/* common */
.height-fit { height: fit-content; }
.nowrap,.no-wrap { white-space: nowrap; }
.box-content { box-sizing: content-box; }
.box-content-child > * { box-sizing: content-box; }
.tran3 { transition: 250ms; }
.tran5 { transition: 500ms; }
.no-select, .no-ps { user-select: none; }
.no-pointer, .no-ps { pointer-events: none; }
.fl-l { float: left; }
.fl-r { float: right; }

.abs { position: absolute; }
.abs-top, .abs-t { top: 0; }
.abs-top-right, .abs-tr { top: 0; right: 0; }
.abs-top-left, .abs-tl { top: 0; left: 0; }
.abs-top-center, .abs-tc { top: 0; left: 50%; transform: translate(-50%, 0%); }
.abs-bottom, .abs-b { bottom: 0; }
.abs-bottom-left, .abs-bl { bottom: 0; left: 0; }
.abs-bottom-right, .abs-br { bottom: 0; right: 0; }
.abs-bottom-center, .abs-bc { bottom: 0; left: 50%; transform: translate(-50%, 0%); }
.abs-right, .abs-r { right: 0; }
.abs-left, .abs-l { left: 0; }
.abs-center, .abs-c { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.abs-center-left, .abs-cl { top: 50%; left: 0; transform: translate(0%, -50%); }
[class*="abs-"] { position: absolute; }

.transform-x-out { transform: translate(100%, 0);  }
.transform-x-in  { transform: translate(-100%, 0); }
.transform-y-out { transform: translate(0, 100%);  }
.transform-y-in  { transform: translate(0, -100%); }
.rot-z-180 { transform: rotateZ(180deg); }
.rot-z-90 { transform: rotateZ(90deg); }

.fixed { position: fixed; }
.z1 { z-index: 1; }
.z100 { z-index: 100; }
.rel { position: relative; }
.rel-child > * { position: relative; }
.w100 { width: 100%; }
.w37 { width: 37px; }
.w50 { width: 50px; }
.w200-left { width: 200%; margin-left: -100%; }
.mw100 { min-width: 100%; }
.h100 { height: 100%; }
.fit-height { height: 100%; object-fit: contain }
.fit-width { width: 100%; object-fit: contain }
.mh0:not(.not-mh0.mh0) { max-height: 0; }
.hidden-mh { max-height: 0; overflow: hidden; padding: 0 !important; margin: 0 !important; }
.mw0 { max-width: 0; }
.rtl { direction: rtl; }
.hidden-visibility { visibility: hidden; }
.nowrap-hidden { white-space: nowrap; overflow: hidden; }
.nowrap-hidden-child > * { white-space: nowrap; overflow: hidden; }
.nowrap-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowrap-visible { white-space: nowrap; overflow: visible; }
.wrap-any { white-space: normal; line-break: anywhere; }
.no-focus-outline:focus-visible { outline: none; }
.no-focus-bg:focus { background-color: unset !important; }
.no-focus-color:focus { color: unset !important; }
.x-auto { overflow-x: auto; }
.focus-offset-2:focus {  outline-offset: 2px; }

.mh0-child-div > div { 
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
}

.container-collapsed:not(.container-collapsed.not-container-collapsed) {
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important

}
.container-collapsed:not(.container-collapsed.not-container-collapsed) * {
    margin: 0 !important;
}

/* common text styles */
.font-050 { font-size: 0.50em; }
.font-070 { font-size: 0.70em; }
.font-075 { font-size: 0.75em; }
.font-080 { font-size: 0.80em; }
.font-125 { font-size: 1.25em; }
.font-9-child > *, .font-9   { font-size: 9px;  }
.font-10-child > *, .font-10 { font-size: 10px; }
.font-11-child > *, .font-11 { font-size: 11px; }
.font-12-child > *, .font-12 { font-size: 12px; }
.font-13-child > *, .font-13 { font-size: 13px; }
.font-14-child > *, .font-14 { font-size: 14px; }
.font-15-child > *, .font-15 { font-size: 15px; }
.font-16-child > *, .font-16 { font-size: 16px; }
.font-17-child > *, .font-17 { font-size: 17px; }
.font-18-child > *, .font-18 { font-size: 18px; }
.font-19-child > *, .font-19 { font-size: 19px; }
.--font-9-child > *, .--font-9   { font-size: 9px !important;  }
.--font-10-child > *, .--font-10 { font-size: 10px !important; }
.--font-11-child > *, .--font-11 { font-size: 11px !important; }
.--font-12-child > *, .--font-12 { font-size: 12px !important; }
.--font-13-child > *, .--font-13 { font-size: 13px !important; }
.--font-14-child > *, .--font-14 { font-size: 14px !important; }
.--font-15-child > *, .--font-15 { font-size: 15px !important; }
.--font-16-child > *, .--font-16 { font-size: 16px !important; }
.--font-17-child > *, .--font-17 { font-size: 17px !important; }
.--font-18-child > *, .--font-18 { font-size: 18px !important; }
.weight-normal-child > *,
.weight-normal-gchild > * > *,
.weight-normal { font-weight: normal; }
.weight-bold   { font-weight: bold;   }
.weight-bold-odd  > div:nth-child(2n-1) { font-weight: bold; }
.weight-bold-even > div:nth-child(2n+0) { font-weight: bold; }
.weight-bold-child > * { font-weight: bold; }
.italic { font-style: italic; }
.lc, .lowercase { text-transform: lowercase; }
.uc, .uppercase { text-transform: uppercase; }
.cap, .capitalize { text-transform: capitalize; }
.font-mono { font-family: monospace; }
.lh0 { line-height: 0;}

.color-black       { color: #000;    }
.color-white       { color: #fff;    }
.color-red         { color: #d9534f; }
.color-darkred     { color: #d2322d; }
.color-green       { color: #7FC241; }
.--color-green     { color: #7FC241 !important; }
.color-hovergreen  { color: #76b63a; }
.color-darkgreen   { color: #81B11A; }
.color-orange      { color: #f0ad4e; }
.color-lightorange { color: #ffecd0; }
.color-silvergrey  { color: #cccccc; }
.color-lightgrey   { color: #dedede; }
.color-lightergrey { color: #F0F1EF; }
.color-whitesmoke  { color: #f5f5f5; }
.color-darkgrey-l  { color: #aaaaaa; }
.color-darkgrey    { color: #3A4246; }
.color-dark        { color: #202224; }
.color-disabled    { color: #f0f0f0; }
.color-blue        { color: #428bca; }
.color-lightblue   { color: #d7e5f1; }
.color-darkblue    { color: #005cc8; }
.color-sparkleblue { color: #0075ff; }
.color-brown       { color: #a52a2a; }
.color-cadet       { color: #5f9ea0; }

.bg-white        { background-color: #fff;      }
.bg-white-t      { background-color: #ffffff30; }
.bg-white-t0     { background-color: #ffffff00; }
.bg-red          { background-color: #d9534f; }
.bg-darkred      { background-color: #d2322d; }
.bg-green        { background-color: #7FC241; }
.bg-hovergreen   { background-color: #76b63a; }
.bg-darkgreen    { background-color: #81B11A; }
.bg-orange       { background-color: #f0ad4e; }
.bg-lightorange  { background-color: #ffecd0; }
.bg-silvergrey   { background-color: #cccccc; }
.bg-platinum     { background-color: #cecece; }
.bg-lightgrey    { background-color: #dedede; }
.bg-lightergrey  { background-color: #F0F1EF; }
.bg-whitesmoke   { background-color: #f5f5f5; }
.bg-darkgrey     { background-color: #3A4246; }
.bg-dark         { background-color: #202224; }
.bg-dark3        { background-color: #333;    }
.--bg-dark3,  .--bg-dark3:focus { background-color: #333 !important; }
.bg-dark5        { background-color: #555;    }
.bg-disabled     { background-color: #f0f0f0; }
.bg-zebra        { background-color: #f4f4f4; }
.bg-blue         { background-color: #428bca; }
.bg-lightblue    { background-color: #d7e5f1; }
.bg-darkblue     { background-color: #005cc8; }
.bg-dead         { background-color: #ffdead; }
.bg-glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}
.blur-5 { backdrop-filter: blur(5px); }
.blur-10, .bg-glass.blur-10 { backdrop-filter: blur(10px); }
.blur-15, .bg-glass.blur-15 { backdrop-filter: blur(15px); }

.outline-white       { outline-color: #fff;      }
.outline-lightgrey   { outline-color: #dedede;   }
.outline-silvergrey  { outline-color: #ccc;      }
.outline-darkgrey    { outline-color: #3A4246;   }
.outline-dark        { outline-color: #202224;   }
.outline-black       { outline-color: #000;      }
.outline-zebra       { outline-color: #f4f4f4;   }
.outline-red         { outline-color: #d9534f;   }
.outline-orange      { outline-color: #f0ad4e;   }
.outline-white-t     { outline-color: #ffffff30; }
.outline-white-t0    { outline-color: #ffffff00; }
.outline-transparent { outline-color: transparent; }

[class*="outline-"] {
    outline-width: 1px;
    outline-offset: -1px;
    outline-style: solid;
}

[class*="outline-"].offset-5 { outline-offset: 5px; }
[class*="outline-"].offset-8 { outline-offset: 8px; }

.box-glass {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* borders */
[class*="border-"] {
    border-width: 0;
    border-style: solid;
    border-color: #000000;
}
[class*="border-"].silvergrey { border-color: #cccccc; }
[class*="border-"].red        { border-color: #d9534f; }
[class*="border-"].lightgrey  { border-color: #dedede; }
[class*="border-"].platinum   { border-color: #cecece; }
.border-t1 { border-top-width: 1px;    }
.border-b1 { border-bottom-width: 1px; }
.border-b3 { border-bottom-width: 3px; }
.border-r1 { border-right-width: 1px; }
.border-l1 { border-left-width: 1px; }
.border-1  { border-width: 1px; }
.border-glass { border: 1px solid rgba(255, 255, 255, 0.3); }

.br-6 { border-radius: 6px; } 
.br-9 { border-radius: 9px; } 
.br-12 { border-radius: 12px; } 
.br-16 { border-radius: 16px; } 

/* alignments */
.justify-left    { justify-content: left; }
.justify-center  { justify-content: center; }
.justify-right   { justify-content: right; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: end; }
.justifyitems-left    { justify-items: left; }
.justifyitems-center  { justify-items: center; }
.justifyitems-right   { justify-items: right; }
.justifyitems-between { justify-items: space-between; }
.justifyitems-end     { justify-items: end; }
.justifyself-start  { justify-self: start; }
.justifyself-end    { justify-self: end; }
.justifyself-left   { justify-self: left; }
.justifyself-center { justify-self: center; }
.justifyself-right  { justify-self: right; }
.justifyself-base   { justify-self: baseline; }

.items-start  { align-items: start; }
.items-end    { align-items: end; }
.items-left   { align-items: left; }
.items-center { align-items: center; }
.items-right  { align-items: right; }
.items-base   { align-items: baseline; }
.items-normal { align-items: normal; }

.self-start  { align-self: start; }
.self-end    { align-self: end; }
.self-left   { align-self: left; }
.self-center { align-self: center; }
.self-right  { align-self: right; }
.self-base   { align-self: baseline; }
.self-normal { align-self: normal; }

.place-start  { place-self: start; }
.place-end    { place-self: end; }
.place-left   { place-self: left; }
.place-center { place-self: center; }
.place-right  { place-self: right; }
.place-base   { place-self: baseline; }
.place-normal { place-self: normal; }

.content-start   { align-content: start; }
.content-center  { align-content: center; }
.content-between { align-content: space-between; }
.content-around  { align-content: space-around; }
.content-evenly  { align-content: space-evenly; }
.content-stretch { align-content: stretch; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-center-odd  > div:nth-child(2n-1) { text-align: center; }
.text-center-even > div:nth-child(2n+0) { text-align: center; }
.text-left-odd    > div:nth-child(2n-1) { text-align: left; }
.text-left-even   > div:nth-child(2n+0) { text-align: left; }
.text-right-odd   > div:nth-child(2n-1) { text-align: right; }
.text-right-even  > div:nth-child(2n+0) { text-align: right; }

/* paddings */
.pad-tb0  { padding-top: 0px;  padding-bottom: 0px;  }
.pad-tb1  { padding-top: 1px;  padding-bottom: 1px;  }
.pad-tb2  { padding-top: 2px;  padding-bottom: 2px;  }
.pad-tb3  { padding-top: 3px;  padding-bottom: 3px;  }
.pad-tb4  { padding-top: 4px;  padding-bottom: 4px;  }
.pad-tb5  { padding-top: 5px;  padding-bottom: 5px;  }
.pad-tb6  { padding-top: 6px;  padding-bottom: 6px;  }
.pad-tb7  { padding-top: 7px;  padding-bottom: 7px;  }
.pad-tb8  { padding-top: 8px;  padding-bottom: 8px;  }
.pad-tb9  { padding-top: 9px;  padding-bottom: 9px;  }
.pad-tb10 { padding-top: 10px; padding-bottom: 10px; }
.pad-tb11 { padding-top: 11px; padding-bottom: 11px; }
.pad-tb12 { padding-top: 12px; padding-bottom: 12px; }
.pad-tb13 { padding-top: 13px; padding-bottom: 13px; }
.pad-tb14 { padding-top: 14px; padding-bottom: 14px; }
.pad-tb15 { padding-top: 15px; padding-bottom: 15px; }
.pad-tb16 { padding-top: 16px; padding-bottom: 16px; }

.pad-lr0  { padding-left: 0px;  padding-right: 0px;  }
.pad-lr1  { padding-left: 1px;  padding-right: 1px;  }
.pad-lr2  { padding-left: 2px;  padding-right: 2px;  }
.pad-lr3  { padding-left: 3px;  padding-right: 3px;  }
.pad-lr4  { padding-left: 4px;  padding-right: 4px;  }
.pad-lr5  { padding-left: 5px;  padding-right: 5px;  }
.pad-lr6  { padding-left: 6px;  padding-right: 6px;  }
.pad-lr7  { padding-left: 7px;  padding-right: 7px;  }
.pad-lr8  { padding-left: 8px;  padding-right: 8px;  }
.pad-lr9  { padding-left: 9px;  padding-right: 9px;  }
.pad-lr10 { padding-left: 10px; padding-right: 10px; }
.pad-lr11 { padding-left: 11px; padding-right: 11px; }
.pad-lr12 { padding-left: 12px; padding-right: 12px; }
.pad-lr13 { padding-left: 13px; padding-right: 13px; }
.pad-lr14 { padding-left: 14px; padding-right: 14px; }
.pad-lr15 { padding-left: 15px; padding-right: 15px; }
.pad-lr16 { padding-left: 16px; padding-right: 16px; }

.pad-no,
.pad-no.grid,
.pad-no.grid[class*="col-"]
{ padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; }

.pad-no-important { 
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.pad-0 {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}


.pad-00,  .pad-10,  .pad-30,  .pad-40,  .pad-60,  .pad-90,  .pad-120,  .pad-150,  .pad-l0  { padding-left: 0px;  }
.pad-01,  .pad-11,  .pad-31,  .pad-41,  .pad-61,  .pad-91,  .pad-121,  .pad-151,  .pad-l1  { padding-left: 1px;  }
.pad-03,  .pad-13,  .pad-33,  .pad-43,  .pad-63,  .pad-93,  .pad-123,  .pad-153,  .pad-l3  { padding-left: 3px;  }
.pad-04,  .pad-14,  .pad-34,  .pad-44,  .pad-64,  .pad-94,  .pad-124,  .pad-154,  .pad-l4  { padding-left: 4px;  }
.pad-06,  .pad-16,  .pad-36,  .pad-46,  .pad-66,  .pad-96,  .pad-126,  .pad-156,  .pad-l6  { padding-left: 6px;  }
.pad-09,  .pad-19,  .pad-39,  .pad-49,  .pad-69,  .pad-99,  .pad-129,  .pad-159,  .pad-l9  { padding-left: 9px;  }
.pad-012, .pad-112, .pad-312, .pad-412, .pad-612, .pad-912, .pad-1212, .pad-1512, .pad-l12 { padding-left: 12px; }
.pad-015, .pad-115, .pad-315, .pad-415, .pad-615, .pad-915, .pad-1215, .pad-1515, .pad-l15 { padding-left: 15px; }
.pad-00,  .pad-10,  .pad-30,  .pad-40,  .pad-60,  .pad-90,  .pad-120,  .pad-150,  .pad-r0  { padding-right: 0px;  }
.pad-01,  .pad-11,  .pad-31,  .pad-41,  .pad-61,  .pad-91,  .pad-121,  .pad-151,  .pad-r1  { padding-right: 1px;  }
.pad-03,  .pad-13,  .pad-33,  .pad-43,  .pad-63,  .pad-93,  .pad-123,  .pad-153,  .pad-r3  { padding-right: 3px;  }
.pad-04,  .pad-14,  .pad-34,  .pad-44,  .pad-64,  .pad-94,  .pad-124,  .pad-154,  .pad-r4  { padding-right: 4px;  }
.pad-06,  .pad-16,  .pad-36,  .pad-46,  .pad-66,  .pad-96,  .pad-126,  .pad-156,  .pad-r6  { padding-right: 6px;  }
.pad-09,  .pad-19,  .pad-39,  .pad-49,  .pad-69,  .pad-99,  .pad-129,  .pad-159,  .pad-r9  { padding-right: 9px;  }
.pad-012, .pad-112, .pad-312, .pad-412, .pad-612, .pad-912, .pad-1212, .pad-1512, .pad-r12 { padding-right: 12px; }
.pad-015, .pad-115, .pad-315, .pad-415, .pad-615, .pad-915, .pad-1215, .pad-1515, .pad-r15 { padding-right: 15px; }

.pad-00,  .pad-01,  .pad-03,  .pad-04,  .pad-06,  .pad-09,  .pad-012,  .pad-015,  .pad-t0  { padding-top: 0px;  }
.pad-10,  .pad-11,  .pad-13,  .pad-14,  .pad-16,  .pad-19,  .pad-112,  .pad-115,  .pad-t1  { padding-top: 1px;  }
.pad-30,  .pad-31,  .pad-33,  .pad-34,  .pad-36,  .pad-39,  .pad-312,  .pad-315,  .pad-t3  { padding-top: 3px;  }
.pad-40,  .pad-41,  .pad-43,  .pad-44,  .pad-46,  .pad-49,  .pad-412,  .pad-415,  .pad-t4  { padding-top: 4px;  }
.pad-60,  .pad-61,  .pad-63,  .pad-64,  .pad-66,  .pad-69,  .pad-612,  .pad-615,  .pad-t6  { padding-top: 6px;  }
.pad-90,  .pad-91,  .pad-93,  .pad-94,  .pad-96,  .pad-99,  .pad-912,  .pad-915,  .pad-t9  { padding-top: 9px;  }
.pad-120, .pad-121, .pad-123, .pad-124, .pad-126, .pad-129, .pad-1212, .pad-1215, .pad-t12 { padding-top: 12px; }
.pad-150, .pad-151, .pad-153, .pad-154, .pad-156, .pad-159, .pad-1512, .pad-1515, .pad-t15 { padding-top: 15px; }
.pad-00,  .pad-01,  .pad-03,  .pad-04,  .pad-06,  .pad-09,  .pad-012,  .pad-015,  .pad-b0  { padding-bottom: 0px;  }
.pad-10,  .pad-11,  .pad-13,  .pad-14,  .pad-16,  .pad-19,  .pad-112,  .pad-115,  .pad-b1  { padding-bottom: 1px;  }
.pad-30,  .pad-31,  .pad-33,  .pad-34,  .pad-36,  .pad-39,  .pad-312,  .pad-315,  .pad-b3  { padding-bottom: 3px;  }
.pad-40,  .pad-41,  .pad-43,  .pad-44,  .pad-46,  .pad-49,  .pad-412,  .pad-415,  .pad-b4  { padding-bottom: 4px;  }
.pad-60,  .pad-61,  .pad-63,  .pad-64,  .pad-66,  .pad-69,  .pad-612,  .pad-615,  .pad-b6  { padding-bottom: 6px;  }
.pad-90,  .pad-91,  .pad-93,  .pad-94,  .pad-96,  .pad-99,  .pad-912,  .pad-915,  .pad-b9  { padding-bottom: 9px;  }
.pad-120, .pad-121, .pad-123, .pad-124, .pad-126, .pad-129, .pad-1212, .pad-1215, .pad-b12 { padding-bottom: 12px; }
.pad-150, .pad-151, .pad-153, .pad-154, .pad-156, .pad-159, .pad-1512, .pad-1515, .pad-b15 { padding-bottom: 15px; }

.mrg-a { margin: auto; }
.mrg-0a { margin: 0 auto; }
.mrg-a0 { margin: auto 0; }
.mrg-00,  .mrg-10,  .mrg-30,  .mrg-60,  .mrg-90,  .mrg-120,  .mrg-150,  .mrg-l0  { margin-left: 0px;  }
.mrg-01,  .mrg-11,  .mrg-31,  .mrg-61,  .mrg-91,  .mrg-121,  .mrg-151,  .mrg-l1  { margin-left: 1px;  }
.mrg-03,  .mrg-13,  .mrg-33,  .mrg-63,  .mrg-93,  .mrg-123,  .mrg-153,  .mrg-l3  { margin-left: 3px;  }
.mrg-06,  .mrg-16,  .mrg-36,  .mrg-66,  .mrg-96,  .mrg-126,  .mrg-156,  .mrg-l6  { margin-left: 6px;  }
.mrg-09,  .mrg-19,  .mrg-39,  .mrg-69,  .mrg-99,  .mrg-129,  .mrg-159,  .mrg-l9  { margin-left: 9px;  }
.mrg-012, .mrg-112, .mrg-312, .mrg-612, .mrg-912, .mrg-1212, .mrg-1512, .mrg-l12 { margin-left: 12px; }
.mrg-015, .mrg-115, .mrg-315, .mrg-615, .mrg-915, .mrg-1215, .mrg-1515, .mrg-l15 { margin-left: 15px; }
.mrg-00,  .mrg-10,  .mrg-30,  .mrg-60,  .mrg-90,  .mrg-120,  .mrg-150,  .mrg-r0  { margin-right: 0px;  }
.mrg-01,  .mrg-11,  .mrg-31,  .mrg-61,  .mrg-91,  .mrg-121,  .mrg-151,  .mrg-r1  { margin-right: 1px;  }
.mrg-03,  .mrg-13,  .mrg-33,  .mrg-63,  .mrg-93,  .mrg-123,  .mrg-153,  .mrg-r3  { margin-right: 3px;  }
.mrg-06,  .mrg-16,  .mrg-36,  .mrg-66,  .mrg-96,  .mrg-126,  .mrg-156,  .mrg-r6  { margin-right: 6px;  }
.mrg-09,  .mrg-19,  .mrg-39,  .mrg-69,  .mrg-99,  .mrg-129,  .mrg-159,  .mrg-r9  { margin-right: 9px;  }
.mrg-012, .mrg-112, .mrg-312, .mrg-612, .mrg-912, .mrg-1212, .mrg-1512, .mrg-r12 { margin-right: 12px; }
.mrg-015, .mrg-115, .mrg-315, .mrg-615, .mrg-915, .mrg-1215, .mrg-1515, .mrg-r15 { margin-right: 15px; }
.mrg-00,  .mrg-01,  .mrg-03,  .mrg-06,  .mrg-09,  .mrg-012,  .mrg-015,  .mrg-t0  { margin-top: 0px;  }
.mrg-10,  .mrg-11,  .mrg-13,  .mrg-16,  .mrg-19,  .mrg-112,  .mrg-115,  .mrg-t1  { margin-top: 1px;  }
.mrg-30,  .mrg-31,  .mrg-33,  .mrg-36,  .mrg-39,  .mrg-312,  .mrg-315,  .mrg-t3  { margin-top: 3px;  }
.mrg-60,  .mrg-61,  .mrg-63,  .mrg-66,  .mrg-69,  .mrg-612,  .mrg-615,  .mrg-t6  { margin-top: 6px;  }
.mrg-90,  .mrg-91,  .mrg-93,  .mrg-96,  .mrg-99,  .mrg-912,  .mrg-915,  .mrg-t9  { margin-top: 9px;  }
.mrg-120, .mrg-121, .mrg-123, .mrg-126, .mrg-129, .mrg-1212, .mrg-1215, .mrg-t12 { margin-top: 12px; }
.mrg-150, .mrg-151, .mrg-153, .mrg-156, .mrg-159, .mrg-1512, .mrg-1515, .mrg-t15 { margin-top: 15px; }
.mrg-00,  .mrg-01,  .mrg-03,  .mrg-06,  .mrg-09,  .mrg-012,  .mrg-015,  .mrg-b0  { margin-bottom: 0px;  }
.mrg-10,  .mrg-11,  .mrg-13,  .mrg-16,  .mrg-19,  .mrg-112,  .mrg-115,  .mrg-b1  { margin-bottom: 1px;  }
.mrg-30,  .mrg-31,  .mrg-33,  .mrg-36,  .mrg-39,  .mrg-312,  .mrg-315,  .mrg-b3  { margin-bottom: 3px;  }
.mrg-60,  .mrg-61,  .mrg-63,  .mrg-66,  .mrg-69,  .mrg-612,  .mrg-615,  .mrg-b6  { margin-bottom: 6px;  }
.mrg-90,  .mrg-91,  .mrg-93,  .mrg-96,  .mrg-99,  .mrg-912,  .mrg-915,  .mrg-b9  { margin-bottom: 9px;  }
.mrg-120, .mrg-121, .mrg-123, .mrg-126, .mrg-129, .mrg-1212, .mrg-1215, .mrg-b12 { margin-bottom: 12px; }
.mrg-150, .mrg-151, .mrg-153, .mrg-156, .mrg-159, .mrg-1512, .mrg-1515, .mrg-b15 { margin-bottom: 15px; }

.pad-b0-child:not(.not-last)  > *:not([class*="pad-b"]), .pad-b0-child.not-last  > *:not(:last-child) { padding-bottom: 0px; }
.pad-b3-child:not(.not-last)  > *:not([class*="pad-b"]), .pad-b3-child.not-last  > *:not(:last-child) { padding-bottom: 3px; }
.pad-b6-child:not(.not-last)  > *:not([class*="pad-b"]), .pad-b6-child.not-last  > *:not(:last-child) { padding-bottom: 6px; }
.pad-b9-child:not(.not-last)  > *:not([class*="pad-b"]), .pad-b9-child.not-last  > *:not(:last-child) { padding-bottom: 9px; }
.pad-b12-child:not(.not-last) > *:not([class*="pad-b"]), .pad-b12-child.not-last > *:not(:last-child) { padding-bottom: 12px; }
.pad-b15-child:not(.not-last) > *:not([class*="pad-b"]), .pad-b15-child.not-last > *:not(:last-child) { padding-bottom: 15px; }
.pad-b18-child:not(.not-last) > *:not([class*="pad-b"]), .pad-b18-child.not-last > *:not(:last-child) { padding-bottom: 18px; }
.pad-b21-child:not(.not-last) > *:not([class*="pad-b"]), .pad-b21-child.not-last > *:not(:last-child) { padding-bottom: 21px; }

.pad-t0-child:not(.not-first)  > *:not([class*="pad-t"]), .pad-t0-child.not-first  > *:not(:first-child) { padding-top: 0px; }
.pad-t3-child:not(.not-first)  > *:not([class*="pad-t"]), .pad-t3-child.not-first  > *:not(:first-child) { padding-top: 3px; }
.pad-t6-child:not(.not-first)  > *:not([class*="pad-t"]), .pad-t6-child.not-first  > *:not(:first-child) { padding-top: 6px; }
.pad-t9-child:not(.not-first)  > *:not([class*="pad-t"]), .pad-t9-child.not-first  > *:not(:first-child) { padding-top: 9px; }
.pad-t12-child:not(.not-first) > *:not([class*="pad-t"]), .pad-t12-child.not-first > *:not(:first-child) { padding-top: 12px; }
.pad-t15-child:not(.not-first) > *:not([class*="pad-t"]), .pad-t15-child.not-first > *:not(:first-child) { padding-top: 15px; }
.pad-t18-child:not(.not-first) > *:not([class*="pad-t"]), .pad-t18-child.not-first > *:not(:first-child) { padding-top: 18px; }
.pad-t21-child:not(.not-first) > *:not([class*="pad-t"]), .pad-t21-child.not-first > *:not(:first-child) { padding-top: 21px; }

.pad-r3-child:not(.not-first) > *:not([class*="pad-r"]), .pad-r3-child.not-first > *:not(:first-child) { padding-right: 3px; }
.pad-r6-child:not(.not-first) > *:not([class*="pad-r"]), .pad-r6-child.not-first > *:not(:first-child) { padding-right: 6px; }
.pad-r9-child:not(.not-first) > *:not([class*="pad-r"]), .pad-r9-child.not-first > *:not(:first-child) { padding-right: 9px; }

.pad-tb0-child:not(.not-last)  > *:not([class*="pad-"]), .pad-tb0-child.not-last  > *:not(:last-child) { padding-top: 0px;  padding-bottom: 0px;  }
.pad-tb1-child:not(.not-last)  > *:not([class*="pad-"]), .pad-tb1-child.not-last  > *:not(:last-child) { padding-top: 1px;  padding-bottom: 1px;  }
.pad-tb2-child:not(.not-last)  > *:not([class*="pad-"]), .pad-tb2-child.not-last  > *:not(:last-child) { padding-top: 2px;  padding-bottom: 2px;  }
.pad-tb3-child:not(.not-last)  > *:not([class*="pad-"]), .pad-tb3-child.not-last  > *:not(:last-child) { padding-top: 3px;  padding-bottom: 3px;  }
.pad-tb4-child:not(.not-last)  > *:not([class*="pad-"]), .pad-tb4-child.not-last  > *:not(:last-child) { padding-top: 4px;  padding-bottom: 4px;  }
.pad-tb5-child:not(.not-last)  > *:not([class*="pad-"]), .pad-tb5-child.not-last  > *:not(:last-child) { padding-top: 5px;  padding-bottom: 5px;  }
.pad-tb6-child:not(.not-last)  > *:not([class*="pad-"]), .pad-tb6-child.not-last  > *:not(:last-child) { padding-top: 6px;  padding-bottom: 6px;  }
.pad-tb7-child:not(.not-last)  > *:not([class*="pad-"]), .pad-tb7-child.not-last  > *:not(:last-child) { padding-top: 7px;  padding-bottom: 7px;  }
.pad-tb8-child:not(.not-last)  > *:not([class*="pad-"]), .pad-tb8-child.not-last  > *:not(:last-child) { padding-top: 8px;  padding-bottom: 8px;  }
.pad-tb9-child:not(.not-last)  > *:not([class*="pad-"]), .pad-tb9-child.not-last  > *:not(:last-child) { padding-top: 9px;  padding-bottom: 9px;  }
.pad-tb10-child:not(.not-last) > *:not([class*="pad-"]), .pad-tb10-child.not-last > *:not(:last-child) { padding-top: 10px; padding-bottom: 10px; }
.pad-tb11-child:not(.not-last) > *:not([class*="pad-"]), .pad-tb11-child.not-last > *:not(:last-child) { padding-top: 11px; padding-bottom: 11px; }
.pad-tb12-child:not(.not-last) > *:not([class*="pad-"]), .pad-tb12-child.not-last > *:not(:last-child) { padding-top: 12px; padding-bottom: 12px; }
.pad-tb13-child:not(.not-last) > *:not([class*="pad-"]), .pad-tb13-child.not-last > *:not(:last-child) { padding-top: 13px; padding-bottom: 13px; }
.pad-tb14-child:not(.not-last) > *:not([class*="pad-"]), .pad-tb14-child.not-last > *:not(:last-child) { padding-top: 14px; padding-bottom: 14px; }
.pad-tb15-child:not(.not-last) > *:not([class*="pad-"]), .pad-tb15-child.not-last > *:not(:last-child) { padding-top: 15px; padding-bottom: 15px; }
.pad-tb16-child:not(.not-last) > *:not([class*="pad-"]), .pad-tb16-child.not-last > *:not(:last-child) { padding-top: 16px; padding-bottom: 16px; }
.pad-lr0-child:not(.not-last)  > *:not([class*="pad-"]), .pad-lr0-child.not-last  > *:not(:last-child) { padding-left: 0px;  padding-right: 0px;  }
.pad-lr1-child:not(.not-last)  > *:not([class*="pad-"]), .pad-lr1-child.not-last  > *:not(:last-child) { padding-left: 1px;  padding-right: 1px;  }
.pad-lr2-child:not(.not-last)  > *:not([class*="pad-"]), .pad-lr2-child.not-last  > *:not(:last-child) { padding-left: 2px;  padding-right: 2px;  }
.pad-lr3-child:not(.not-last)  > *:not([class*="pad-"]), .pad-lr3-child.not-last  > *:not(:last-child) { padding-left: 3px;  padding-right: 3px;  }
.pad-lr4-child:not(.not-last)  > *:not([class*="pad-"]), .pad-lr4-child.not-last  > *:not(:last-child) { padding-left: 4px;  padding-right: 4px;  }
.pad-lr5-child:not(.not-last)  > *:not([class*="pad-"]), .pad-lr5-child.not-last  > *:not(:last-child) { padding-left: 5px;  padding-right: 5px;  }
.pad-lr6-child:not(.not-last)  > *:not([class*="pad-"]), .pad-lr6-child.not-last  > *:not(:last-child) { padding-left: 6px;  padding-right: 6px;  }
.pad-lr7-child:not(.not-last)  > *:not([class*="pad-"]), .pad-lr7-child.not-last  > *:not(:last-child) { padding-left: 7px;  padding-right: 7px;  }
.pad-lr8-child:not(.not-last)  > *:not([class*="pad-"]), .pad-lr8-child.not-last  > *:not(:last-child) { padding-left: 8px;  padding-right: 8px;  }
.pad-lr9-child:not(.not-last)  > *:not([class*="pad-"]), .pad-lr9-child.not-last  > *:not(:last-child) { padding-left: 9px;  padding-right: 9px;  }
.pad-lr10-child:not(.not-last) > *:not([class*="pad-"]), .pad-lr10-child.not-last > *:not(:last-child) { padding-left: 10px; padding-right: 10px; }
.pad-lr11-child:not(.not-last) > *:not([class*="pad-"]), .pad-lr11-child.not-last > *:not(:last-child) { padding-left: 11px; padding-right: 11px; }
.pad-lr12-child:not(.not-last) > *:not([class*="pad-"]), .pad-lr12-child.not-last > *:not(:last-child) { padding-left: 12px; padding-right: 12px; }
.pad-lr13-child:not(.not-last) > *:not([class*="pad-"]), .pad-lr13-child.not-last > *:not(:last-child) { padding-left: 13px; padding-right: 13px; }
.pad-lr14-child:not(.not-last) > *:not([class*="pad-"]), .pad-lr14-child.not-last > *:not(:last-child) { padding-left: 14px; padding-right: 14px; }
.pad-lr15-child:not(.not-last) > *:not([class*="pad-"]), .pad-lr15-child.not-last > *:not(:last-child) { padding-left: 15px; padding-right: 15px; }
.pad-lr16-child:not(.not-last) > *:not([class*="pad-"]), .pad-lr16-child.not-last > *:not(:last-child) { padding-left: 16px; padding-right: 16px; }

.pad-no-child:not(.not-last) > *, .pad-no-child.not-last > *:not(:last-child) { padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; }


/* margins */
.mrg-0 { margin: 0; }
.--mrg-0 { margin: 0 !important; }

.mrg-lr0  { margin-left: 0px;  margin-right: 0px;  }
.mrg-lr1  { margin-left: 1px;  margin-right: 1px;  }
.mrg-lr2  { margin-left: 2px;  margin-right: 2px;  }
.mrg-lr3  { margin-left: 3px;  margin-right: 3px;  }
.mrg-lr4  { margin-left: 4px;  margin-right: 4px;  }
.mrg-lr5  { margin-left: 5px;  margin-right: 5px;  }
.mrg-lr6  { margin-left: 6px;  margin-right: 6px;  }
.mrg-lr7  { margin-left: 7px;  margin-right: 7px;  }
.mrg-lr8  { margin-left: 8px;  margin-right: 8px;  }
.mrg-lr9  { margin-left: 9px;  margin-right: 9px;  }
.mrg-lr10 { margin-left: 10px; margin-right: 10px; }
.mrg-lr11 { margin-left: 11px; margin-right: 11px; }
.mrg-lr12 { margin-left: 12px; margin-right: 12px; }
.mrg-lr13 { margin-left: 13px; margin-right: 13px; }
.mrg-lr14 { margin-left: 14px; margin-right: 14px; }
.mrg-lr15 { margin-left: 15px; margin-right: 15px; }
.mrg-lr16 { margin-left: 16px; margin-right: 16px; }

.mrg-tb0 { margin-top: 0px; margin-bottom: 0px; }
.mrg-tb1 { margin-top: 1px; margin-bottom: 1px; }
.mrg-tb3 { margin-top: 3px; margin-bottom: 3px; }
.mrg-tb6 { margin-top: 6px; margin-bottom: 6px; }
.mrg-tb15 { margin-top: 15px; margin-bottom: 15px; }

.mrg-0-gchild > * > *,
.mrg-0-child > * { margin: 0; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; }
.--mrg-0-child > * { margin: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }

.mrg-tb0-child:not(.not-last)  > *, .mrg-tb0-child.not-last  > *:not(:last-child) { margin-top: 0px;  margin-bottom: 0px;  }
.mrg-tb1-child:not(.not-last)  > *, .mrg-tb1-child.not-last  > *:not(:last-child) { margin-top: 1px;  margin-bottom: 1px;  }
.mrg-tb3-child:not(.not-last)  > *, .mrg-tb3-child.not-last  > *:not(:last-child) { margin-top: 3px;  margin-bottom: 3px;  }
.mrg-tb6-child:not(.not-last)  > *, .mrg-tb6-child.not-last  > *:not(:last-child) { margin-top: 6px;  margin-bottom: 6px;  }
.mrg-lr0-child:not(.not-last)  > *, .mrg-lr0-child.not-last  > *:not(:last-child) { margin-left: 0px;  margin-right: 0px;  }

.mrg-t0-child > *:not([class*="mrg"]) { margin-top: 0px; }
.mrg-b0-child > *:not([class*="mrg"]) { margin-bottom: 0px; }
.mrg-b5-child-odd > *:nth-child(2n - 1) { margin-bottom: 5px; }
.mrg-b5-child-even > *:nth-child(2n) { margin-bottom: 5px; }
.mrg-b10-child-even > *:nth-child(2n) { margin-bottom: 10px; }
.mrg-l9-child-li > li  { margin-left: 9px; }
.mrg-l12-child-li > li { margin-left: 12px; }
.mrg-l24-child-li > li { margin-left: 24px; }

.mrg-t4  { margin-top: 4px;     }
.mrg-t5  { margin-top: 5px;     }
.mrg-t10 { margin-top: 10px;    }
.mrg-t12 { margin-top: 12px;    }
.mrg-t15 { margin-top: 15px;    }
.mrg-t20 { margin-top: 20px;    }
.mrg-b4  { margin-bottom: 4px;  }
.mrg-b5  { margin-bottom: 5px;  }
.mrg-b10 { margin-bottom: 10px; }
.mrg-b20 { margin-bottom: 20px; }

.--mrg-b3  { margin-bottom: 3px !important; }
.--mrg-b5  { margin-bottom: 5px !important; }
.--mrg-b6  { margin-bottom: 6px !important; }
.--mrg-b9  { margin-bottom: 9px !important; }
.--mrg-b12  { margin-bottom: 12px !important; }
.--mrg-l0  { margin-left: 0px  !important;}
.--mrg-l3  { margin-left: 3px  !important;}
.--mrg-l4  { margin-left: 4px  !important;}
.--mrg-l6  { margin-left: 6px  !important;}
.--mrg-l9  { margin-left: 9px  !important;}
.--mrg-l12 { margin-left: 12px !important;}
.--mrg-l15 { margin-left: 15px !important;}

.gap3 { row-gap: 3px; column-gap: 3px; }
.gap4 { row-gap: 4px; column-gap: 4px; }
.gap5 { row-gap: 5px; column-gap: 5px; }
.gap6 { row-gap: 6px; column-gap: 6px; }
.gap9 { row-gap: 9px; column-gap: 9px; }
.gap10 { row-gap: 10px; column-gap: 10px; }
.gap12 { row-gap: 12px; column-gap: 12px; }
.gap15 { row-gap: 15px; column-gap: 15px; }
.gap18 { row-gap: 18px; column-gap: 18px; }

.gap0-col { column-gap: 0px; }
.gap3-col { column-gap: 3px; }
.gap4-col { column-gap: 4px; }
.gap5-col { column-gap: 5px; }
.gap6-col { column-gap: 6px; }
.gap9-col { column-gap: 9px; }
.gap12-col { column-gap: 12px; }
.gap15-col { column-gap: 15px; }
.gap18-col { column-gap: 18px; }
.gap30-col { column-gap: 30px; }

.gap0-row { row-gap: 0px; }
.gap3-row { row-gap: 3px; }
.gap4-row { row-gap: 4px; }
.gap5-row { row-gap: 5px; }
.gap6-row { row-gap: 6px; }
.gap9-row { row-gap: 9px; }
.gap12-row { row-gap: 12px; }
.gap15-row { row-gap: 15px; }
.gap18-row { row-gap: 18px; }

.mh16 { min-height: 16px; }
.mh32 { min-height: 32px; }
.mh34 { min-height: 34px; }
.mh48 { min-height: 48px; }

.op0  { opacity: 0;    }
.op05 { opacity: 0.5;  }
.op07 { opacity: 0.75; }
.op08 { opacity: 0.85; }
.op1  { opacity: 1;    }

/* expand on hover */
.hover-expand:hover .hover-expand {
    max-height: 300px;
    overflow: inherit;
}
.hover-expand .hover-expand {
    max-height: 0;
    overflow: hidden;
    transition: 400ms all;
}

/* detach on hover */
.hover-detach {
    position: relative;
}
.hover-detach .hover-detach {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    background-color: #dedede;
}
.hover-detach:hover .hover-detach {
    display: block;
}

.hover-show:hover .hover-show {
    display: block;
}
.hover-show > .hover-show {
    display: none;
}

/*  HOVER (on-hover)
        attribute itself will set transition time to 150 ms, if not otherwise specified.

        attribute's options:
            OPTION                  VALUE                   NOTES
            transition-[VALUE]      150, 200, 250, 300      
            pointer                                         sets user-select to none
            brightness-up                                   +25% (filter: brightness(1.25))                       
            brightness-down                                 -25%
            brightness-up-[VALUE]   25, 50
            brightness-down-[VALUE] 25, 50
            scale*                                          sets transform origin to center
            scale-up                                        +25% (transform: scale(1.25))
            scale-down                                      -25%
            scale-up-[VALUE]        15, 25, 50
            scale-down-[VALUE]      25, 50   
            
        example:
            <div on-hover="pointer scale-up brightness-down">example</div>
*/
[on-hover]:not([on-hover*="transition-"]) { transition: 150ms; }
[on-hover*="transition-0"]   { transition: 0ms; }
[on-hover*="transition-150"] { transition: 150ms; }
[on-hover*="transition-200"] { transition: 200ms; }
[on-hover*="transition-250"] { transition: 250ms; }
[on-hover*="transition-300"] { transition: 300ms; }

/* CURSORS */
[on-hover-child*="pointer"]:hover > *, [on-hover*="pointer"]:hover {
    cursor: pointer;
    user-select: none;
}
[on-hover*="zoom-in"]:hover {
    cursor: zoom-in;
    user-select: none;
}

/* COLORS */
[on-hover*="color-blue"]:hover,
[on-hover*="color-blue-child"]:hover > * {
    color: #428bca !important;
}
[on-hover*="color-black"]:hover,
[on-hover*="color-black-child"]:hover > *{
    color: #000 !important;
}
[on-hover*="color-green"]:hover {
    color: #7FC241 !important;
}
[on-hover*="color-hovergreen"]:hover {
    color: #76b63a !important;
}
[on-hover*="color-white"]:hover {
    color: #fff !important;
}
[on-hover*="color-red"]:hover {
    color: #d9534f !important;
}

/* BACKGROUND COLORS */
[on-hover*="bg-lightergrey"]:hover,[on-hover*="trigger-next-bg"]:hover + [on-hover*="bg-lightergrey"],[on-hover*="bg-lightergrey"]:has(+ [on-hover*="trigger-prev-bg"]:hover) { background-color: #F0F1EF; }
[on-hover*="bg-disabled"]:hover,[on-hover*="trigger-next-bg"]:hover + [on-hover*="bg-disabled"],[on-hover*="bg-disabled"]:has(+ [on-hover*="trigger-prev-bg"]:hover) { background-color: #f0f0f0; }
[on-hover*="bg-lightgrey"]:hover,[on-hover*="trigger-next-bg"]:hover + [on-hover*="bg-lightgrey"],[on-hover*="bg-lightgrey"]:has(+ [on-hover*="trigger-prev-bg"]:hover) { background-color: #dedede; }
[on-hover*="bg-green"]:hover,[on-hover*="trigger-next-bg"]:hover + [on-hover*="bg-green"],[on-hover*="bg-green"]:has(+ [on-hover*="trigger-prev-bg"]:hover) { background-color: #7FC241; }
[on-hover*="bg-hovergreen"]:hover,[on-hover*="trigger-next-bg"]:hover + [on-hover*="bg-hovergreen"],[on-hover*="bg-hovergreen"]:has(+ [on-hover*="trigger-prev-bg"]:hover) { background-color: #76b63a; }
[on-hover*="bg-lightblue"]:hover,[on-hover*="trigger-next-bg"]:hover + [on-hover*="bg-lightblue"],[on-hover*="bg-lightblue"]:has(+ [on-hover*="trigger-prev-bg"]:hover) { background-color: #d7e5f1; }
[on-hover*="bg-darkblue"]:hover,[on-hover*="trigger-next-bg"]:hover + [on-hover*="bg-darkblue"],[on-hover*="bg-darkblue"]:has(+ [on-hover*="trigger-prev-bg"]:hover) { background-color: #005cc8; }
[on-hover*="bg-white"]:hover,[on-hover*="trigger-next-bg"]:hover + [on-hover*="bg-white"],[on-hover*="bg-white"]:has(+ [on-hover*="trigger-prev-bg"]:hover) { background-color: #fff; }
[on-hover*="bg-white-t"]:hover,[on-hover*="trigger-next-bg"]:hover + [on-hover*="bg-white-t"],[on-hover*="bg-white-t"]:has(+ [on-hover*="trigger-prev-bg"]:hover) { background-color: #ffffff30; }

/* BRIGHTNESS UP */
[on-hover*="brightness-up"]:not([on-hover*="brightness-up-"]):hover,
[on-hover*="brightness-up-25"]:hover { filter: brightness(1.25); }
[on-hover*="brightness-up-50"]:hover { filter: brightness(1.50); }

/* BRIGHTNESS DOWN */
[on-hover*="brightness-down"]:not([on-hover*="brightness-down-"]):hover,
[on-hover*="brightness-down-25"]:hover { filter: brightness(0.75); }
[on-hover*="brightness-down-50"]:hover { filter: brightness(0.50); }

/* SCALE UP */
[on-hover*="scale"]:hover         { transform-origin: center;}
[on-hover*="scale-up"]:not([on-hover*="scale-up-"]):hover,
[on-hover*="scale-up-25"]:hover   { transform: scale(1.25); }
[on-hover*="scale-up-15"]:hover   { transform: scale(1.15); }
[on-hover*="scale-up-50"]:hover   { transform: scale(1.50); }

/* SCALE DOWN */
[on-hover*="scale-down"]:not([on-hover*="scale-down-"]):hover,
[on-hover*="scale-down-25"]:hover { transform: scale(0.75); }
[on-hover*="scale-down-50"]:hover { transform: scale(0.50); }

/* FONT STYLING */
[on-hover-child*="underline"]:hover > *, [on-hover*="underline"]:hover { text-decoration: underline; }
[on-hover-child*="bold"]:hover > *,      [on-hover*="bold"]:hover      { font-weight: bold; }
[on-hover-child*="italic"]:hover > *,    [on-hover*="italic"]:hover    { font-style: italic; }

[on-hover*="box"]:hover { box-shadow: 0em 0em 1em 0.1em #000; }
[on-hover*="outline-lightgrey"]:hover { outline: 1px solid #dedede; }


[not-hover*="mh-0"],[on-hover*="mh-0"]:hover,[on-hover*="mh-0"]:hover > [not-hover*="mh"] { max-height: 0; overflow: hidden;}
[not-hover*="mw-0"],[on-hover*="mw-0"]:hover,[on-hover*="mw-0"]:hover > [not-hover*="mw"] { max-width: 0; overflow: hidden;}
[not-hover*="mh-unset"],[on-hover*="mh-unset"]:hover,[on-hover*="mh-unset"]:hover > [not-hover*="mh"] { max-height: unset; }
[not-hover*="mw-unset"],[on-hover*="mw-unset"]:hover,[on-hover*="mw-unset"]:hover > [not-hover*="mw"] { max-width: unset; }
[on-hover*="hidden"]:not([on-hover*="hidden-unset"]):hover,[not-hover*="hidden"]:not([on-hover*="hidden-unset"]:hover > [not-hover*="hidden"]) { display: none !important; }
[not-hover*="invisible"],[on-hover*="invisible"]:hover,[on-hover*="invisible"]:hover > [not-hover*="invisible"] { visibility: hidden !important; }
[not-hover*="invisible-unset"],[on-hover*="invisible-unset"]:hover,[on-hover*="invisible-unset"]:hover > [not-hover*="invisible"] { visibility: visible !important; }

[on-hover*="mh-1em"]:hover    { max-height: 1em; }
[on-hover*="mh-1.25em"]:hover { max-height: 1.25em; }
[on-hover*="mh-1.5em"]:hover  { max-height: 1.5em; }
[on-hover*="mh-1.75em"]:hover { max-height: 1.75em; }
[on-hover*="mh-2em"]:hover    { max-height: 2em; }


[on-hover-child*="2-"] > *:nth-child(2) { transition: 150ms; }

[on-hover-child*="2-opacity-1"]:hover    > *:nth-child(2) { opacity: 1.0;  }
[on-hover-child*="2-opacity-0.75"]:hover > *:nth-child(2) { opacity: 0.75; }
[on-hover-child*="2-opacity-0.5"]:hover  > *:nth-child(2) { opacity: 0.5;  }
[on-hover-child*="2-opacity-0.25"]:hover > *:nth-child(2) { opacity: 0.25; }
[on-hover-child*="2-opacity-0"]:hover    > *:nth-child(2) { opacity: 0;    }

[not-hover*="opacity-1"],
[on-hover*="opacity-1"]:hover,
[on-hover*="opacity-1"]:hover [not-hover*="opacity"],
[on-hover*="trigger-next-opacity"]:hover + [on-hover*="opacity-1"],
[on-hover*="trigger-next-opacity"]:hover + [on-hover*="opacity-1"] [not-hover*="opacity"],
[on-hover*="opacity-1"]:has(+ [on-hover*="trigger-prev-opacity"]:hover),
[on-hover*="opacity-1"]:has(+ [on-hover*="trigger-prev-opacity"] [not-hover*="opacity"]:hover)
{ 
    opacity: 1.0 !important; 
}

[not-hover*="opacity-0.5"],
[on-hover*="opacity-0.5"]:hover,
[on-hover*="opacity-0.5"]:hover [not-hover*="opacity"],
[on-hover*="trigger-next-opacity"]:hover + [on-hover*="opacity-0.5"],
[on-hover*="trigger-next-opacity"]:hover + [on-hover*="opacity-0.5"] [not-hover*="opacity"],
[on-hover*="opacity-0.5"]:has(+ [on-hover*="trigger-prev-opacity"]:hover),
[on-hover*="opacity-0.5"]:has(+ [on-hover*="trigger-prev-opacity"] [not-hover*="opacity"]:hover)
{ 
    opacity: 0.5 !important; 
}

[not-hover*="opacity-0.0"],
[on-hover*="opacity-0.0"]:hover,
[on-hover*="opacity-0.0"]:hover [not-hover*="opacity"],
[on-hover*="trigger-next-opacity"]:hover + [on-hover*="opacity-0.0"],
[on-hover*="trigger-next-opacity"]:hover + [on-hover*="opacity-0.0"] [not-hover*="opacity"],
[on-hover*="opacity-0.0"]:has(+ [on-hover*="trigger-prev-opacity"]:hover),
[on-hover*="opacity-0.0"]:has(+ [on-hover*="trigger-prev-opacity"] [not-hover*="opacity"]:hover)
{ 
    opacity: 0 !important; 
}

[not-hover*="z-index-0"],[on-hover*="z-index-0"]:hover,[on-hover*="z-index-0"]:hover [not-hover*="z-index"] { z-index: 0 !important; }
[not-hover*="z-index-1"],[on-hover*="z-index-1"]:hover,[on-hover*="z-index-1"]:hover [not-hover*="z-index"] { z-index: 1 !important; }

[data-validation-message]:not([data-validation-result=""])::before {
	position: absolute;
    right: 16px;

    content: attr(data-validation-message);
    z-index: 10;
    font-size: 13px;
}
[data-validation-message]:not([data-validation-result=""])::after {
    position: absolute;
    right: 0;
    top: 0;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* TRUE */
[data-validation-result="true"][data-validation-style="outline"],
[data-validation-result="true"][data-validation-style="outline"]:focus-visible {
    outline-offset: -1px;
    outline: 1px solid #7FC241;
}
[data-validation-result="true"][data-validation-style="text"]::after,
[data-validation-result="true"][data-validation-style="text"]::before { 
    color: #7FC241; 
}
[data-validation-message][data-validation-result="true"]::after { content: "\f058"; }


/* FALSE */
[data-validation-result="false"][data-validation-style="outline"],
[data-validation-result="false"][data-validation-style="outline"]:focus-visible {
    outline-offset: -3px;
    outline: 3px solid #d2322d;
}
[data-validation-result="false"][data-validation-style="text"]::after,
[data-validation-result="false"][data-validation-style="text"]::before { 
    color: #d2322d; 
}
[data-validation-message][data-validation-result="false"]::after { content: "\f06a"; }



/* bools */

/* common for both */
[data-bool="true" i], [data-bool="1"], [data-bool="false" i], [data-bool="0"] {
    position: relative;
    width: 6ch;
}
[data-bool="true" i]:before, [data-bool="1"]:before, [data-bool="false" i]:before, [data-bool="0"]:before {
    content: " ";
    width: 0.5em;
    height: 0.5em;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
[data-bool="true" i]:after, [data-bool="1"]:after, [data-bool="false" i]:after, [data-bool="0"]:after {
    padding-left: 0.75em;
}

/* TRUE */
[data-bool="true" i], [data-bool="1"] { color: royalblue; }
[data-bool="true" i]:before, [data-bool="1"]:before { background-color: royalblue; }
[data-bool="true" i]:after, [data-bool="1"]:after { content: "true"; }

/* FALSE */
[data-bool="false" i], [data-bool="0"], [data-bool=""] { color: red; }
[data-bool="false" i]:before, [data-bool="0"]:before, [data-bool=""]:before { background-color: red; }
[data-bool="false" i]:after, [data-bool="0"]:after, [data-bool=""]:after { content: "false"; }

ul.normal {
    padding: 0em 0 0 2em !important;
}
ul.normal ul {
    padding: 0em 0 0 1.75em !important;
}

.disabled-child,.locked-child {
    cursor: not-allowed;
}
    .disabled-child > * {
        pointer-events: none;
        user-select: none;
        filter: opacity(0.5);
    }
    .locked-child * {
        pointer-events: none;
        user-select: none;
        color: black;
    }
.disabled-child input[type="radio"][disabled]:not([checked]) + span,
.locked-child input[type="radio"][disabled]:not([checked]) + span {
    opacity: 0.5;
}

.disabled-overlay {
    position: relative;
}
.disabled-overlay::before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: block;
    background-color: rgb(255 255 255 / 25%);
    cursor: not-allowed;
}

.disabled-this {
    pointer-events: none;
    filter: saturate(0.5) opacity(0.5);
}

[data-after-content]::after { content: attr(data-after-content); }
[data-before-content]::before { content: attr(data-before-content); }

/* ASTERISK */
.asterisk {
    position: relative;
    height: 20px;
    width: 12px;
}
.asterisk:before {
    content: '*';
    display: block;
    font-size: 23px;
    line-height: 0;
    position: absolute;
    top: 75%;
    left: 25%;
}


/* auto growing textarea */
.grow-wrap.inline {
    display: inline-grid;
}
.grow-wrap:not(.inline) {
    display: grid;
}
.grow-wrap::after {
    content: attr(data-replicated-value) " ";
    white-space: pre-wrap;
    visibility: hidden;
}
.grow-wrap > textarea {
    resize: none;
    overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
    border: 1px solid #ccc;
    padding: 6px 12px;
    font: inherit;
    grid-area: 1 / 1 / 2 / 2;
}


/* flex */
.flex { display: flex; }
.--flex { display: flex !important; }

.flex.row { flex-direction: row; }
.flex.col { flex-direction: column; }
.flex:not(.flex.no-wrap) { flex-wrap: wrap; }
.flex.no-wrap { flex-wrap: nowrap; }

.flex .f-00 { flex: 0 0; }
.flex .f-01 { flex: 0 1; }
.flex .f-10 { flex: 1 0; }
.flex .f-11 { flex: 1 1; }
.flex .b-0  { flex-basis: 0%;  }
.flex .b-25 { flex-basis: 25%; }
.flex .b-50 { flex-basis: 50%; }
.flex .b-75 { flex-basis: 75%; }
.flex :is(.b-100, .b-1) { flex-basis: 100%; }

.flex .spacer { flex: 1 0; }


/* data-pseudo, data-pseudo-content, data-pseudo-position */
[data-pseudo] { position: relative; }
[data-pseudo]::before, [data-pseudo]::after {
    pointer-events: none;
    display: block;
    position: absolute;
    border-radius: inherit;
}
[data-pseudo]::before {
    z-index: 2;
	content: attr(data-pseudo-content);
    display: block;
    padding: 2px 4px;
    box-shadow: 1px 1px 6px 2px #7575756e;
}
[data-pseudo*="fade"]::after {
    z-index: 1;
    content: " ";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

 [data-pseudo*="error"]::before {
    font: 10px monospace;
    background-color: #ff0000ab;
    color: white;
	font-weight: bold;
}
[data-pseudo*="error"]::after {
    background-color: #ff000024;
}

[data-pseudo*="left"]::before { left: 0; }
[data-pseudo*="right"]::before { right: 0; }
[data-pseudo*="horizontal"]::before { left: 50%; transform: translateX(-50%); }
[data-pseudo*="top"]::before { top: 0; }
[data-pseudo*="bottom"]::before { bottom: 0; }
[data-pseudo*="vertical"]::before { top: 50%; transform: translateY(-50%); }
[data-pseudo*="horizontal"][data-pseudo*="vertical"]::before { transform: translate(-50%, -50%); }
[data-pseudo*="mrg-00"]::before { margin: 0px 0px; }
[data-pseudo*="mrg-03"]::before { margin: 0px 3px; }
[data-pseudo*="mrg-06"]::before { margin: 0px 6px; }
[data-pseudo*="mrg-30"]::before { margin: 3px 0px; }
[data-pseudo*="mrg-33"]::before { margin: 3px 3px; }
[data-pseudo*="mrg-36"]::before { margin: 3px 6px; }
[data-pseudo*="mrg-60"]::before { margin: 6px 0px; }
[data-pseudo*="mrg-63"]::before { margin: 6px 3px; }
[data-pseudo*="mrg-66"]::before { margin: 6px 6px; }

.spinner {
    position: relative;
}
.spinner::after {
    position: absolute;
    z-index: 30;
    font: normal normal normal 3em/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f021";
    color: #3A4246;
    font-size: 1em;
    animation: spin 2s linear infinite;
    line-height: 1.5em;
}
.spinner::before {
    content: "\a0";
}

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }