/* Structure */
html { padding: 0px; margin: 0px; scroll-behavior: smooth; background: var(--drk-9); }
body { padding: 0px; margin: 0px; scroll-behavior: smooth; }
main { min-height: calc(100vh - 64px); }
img, iframe, svg { user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; }
input:focus { border: none; outline: none; }
a { color: unset; }
*::selection { background: #F11500; }
.hidden { display: none !important; }
.dsk { display: flex !important; }
.mob { display: none !important; }
.round { border-radius: 8px; }
.circle { border-radius: 100%; }
.border { border: 1.5px solid; }
.noborder { border: none; }
.border-0 { border-radius: 0.125rem; }
.border-1 { border-radius: 0.5rem; }
.border-3 { border-radius: 1rem; }
.border-5 { border-radius: 1.5rem; }
.border-7 { border-radius: 2rem; }
.grecaptcha-badge { display: none !important; }
.fullw { width: 100%; }
.fullh { height: 100%; }
.scrnw { width: 100vw; }
.scrnh { height: 100vh; }
.fitcont { width: fit-content; }
.grow { flex: 1; }
.halfw { width: 50%; }
.samew > * { flex: 1; }
.cont { display: flex; box-sizing: border-box; flex-wrap: wrap; }
.row { flex-direction: row; }
.col { flex-direction: column; flex-wrap: nowrap !important; }
.nwrap { flex-wrap: nowrap !important; }
.col.apart { justify-content: space-between; }
.col.start { justify-content: flex-start; }
.col.end { justify-content: flex-end; }
.row.apart { justify-content: space-between; }
.row.start { justify-content: flex-start; }
.row.end { justify-content: flex-end; }
.col.vcent { justify-content: center; }
.col.hcent { align-items: center; }
.row.hcent { justify-content: center; }
.row.vcent { align-items: center; }
.fcent { text-align: center; }
.fleft { text-align: left; }
.fright { text-align: right; }
.fjustify { text-align: justify; }
.bgcover { background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; }
.bgcontain { background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }
.bgtrans { background: transparent; }
.d-order-1 { order: 1; }
.d-order-2 { order: 2; }
.d-order-3 { order: 3; }
.d-order-4 { order: 4; }
.admOnly { display: none !important; }
/**/
/* Variables */
:root {
--red-0: #EF7990; --red-1: #EF627D; --red-2: #EF4B6B; --red-3: #EF3458; --red-4: #EF1D46; --red-5: #EF0633; --red-6: #BE0429; --red-7: #A60324; --red-8: #8D031F; --red-9: #730219;
--drk-0: #F4F2EA; --drk-1: #DCDAD3; --drk-2: #C0BFBA; --drk-3: #A2A19D; --drk-4: #81817D; --drk-5: #5C5C59; --drk-6: #383737; --drk-7: #1C1A1B; --drk-8: #161214; --drk-9: #10060A;
--ylw-0: #FFF8EB; --ylw-1: #FFE7B8; --ylw-3: #FFCA67; --ylw-5: #E7B75D; --ylw-7: #CFA453;
--ppl-0: #F8F2FB; --ppl-1: #E1C9EF; --ppl-3: #8F57AB; --ppl-5: #7B4B93; --ppl-7: #663E7A;
--err-0: #FFEDEC; --err-1: #F8B7AE; --err-3: #E25B4F; --err-5: #B3271B; --err-7: #8D2219;
--wrn-0: #FFFBE6; --wrn-1: #FFF4B3; --wrn-3: #FFF4AD; --wrn-5: #FFE64D; --wrn-7: #F5D400;
--scs-0: #E8FFF1; --scs-1: #B9F5D3; --scs-3: #62DB98; --scs-5: #1FCC6C; --scs-7: #168F4C;
--inf-0: #E6FBFE; --inf-1: #B3F0FA; --inf-3: #45D6F4; --inf-5: #0AAACC; --inf-7: #208398;
--spc-0: 0.250rem; --spc-1: 0.375rem; --spc-2: 0.500rem; --spc-3: 0.750rem; --spc-4: 1.000rem; --spc-5: 1.500rem; --spc-6: 2.000rem; --spc-7: 3.000rem; --spc-8: 4.000rem; --spc-9: 5.000rem;
--acdm-pry-3: #1E2C4C; --acdm-pry-5: #17203D; --acdm-pry-7: #11172C; --acdm-pry-0: rgba(23, 32, 61, 0.80);
--acdm-sec-3: #FAF7F2; --acdm-sec-5: #F4EEE4; --acdm-sec-7: #EDE3D4;
--acdm-neu-3: #FBF8F2; --acdm-neu-5: #DBD8D2; --acdm-neu-7: #BBB8B2;
--acdm-acc-3: #91F2E7; --acdm-acc-5: #64EDDC; --acdm-acc-7: #36E7D3;
--acdm-red-3: #E63247; --acdm-red-5: #E63247; --acdm-red-7: #E63247;
--ark-pri-1: #01B7AB; --ark-pri-3: #018A80; --ark-pri-5: #007269; --ark-pri-7: #015B59; --ark-pri-9: #013D3C;
--ark-sec-1: #FCF9EE; --ark-sec-3: #F9F2DC; --ark-sec-5: #F3E6BB; --ark-sec-7: #F0DFA8; --ark-sec-9: #EDD997;
--ark-ter-1: #F8F6F2; --ark-ter-3: #EAE5D7; --ark-ter-5: #D9D1B7; --ark-ter-7: #CEC3A1; --ark-ter-9: #C0B287;
--fmp-1: #DEDEB3; --fmp-3: #7D8C6F; --fmp-5: #434C43;
}
/**/
/* Typography */
html { font-size: 16px; }
a { text-decoration: none;}
h1, h2, h3, h4, h5, p { margin: 0px; padding: 0px; display: block; }
.strike { text-decoration: line-through; }
.rbt { font-family: 'Roboto', sans-serif; }
.jst { font-family: 'Jost', sans-serif; }
/* Loot Icons */
@font-face {
font-family: 'loot-iconset-filled';
src:
url('loot-icons/loot-iconset-filled.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'loot-iconset-outlined';
src:
url('loot-icons/loot-iconset-outlined.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: block;
}
.material-symbols-outlined,
.loot-icons {
font-family: 'loot-iconset-filled' !important;
font-size: 24px;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
letter-spacing: 0;
-webkit-font-feature-settings: "liga";
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
font-feature-settings: "liga";
-webkit-font-variant-ligatures: discretionary-ligatures;
font-variant-ligatures: discretionary-ligatures;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
}
.loot-icons.filled { font-family: 'loot-iconset-filled' !important; }
.loot-icons.outlined { font-family: 'loot-iconset-outlined' !important; }
/**/
/* Deprecated */
.tx1.rbt { font-size: 3.0rem; line-height: 090%; font-weight: 700; }
.tx2.rbt { font-size: 2.0rem; line-height: normal; font-weight: 700; }
.tx3.rbt { font-size: 1.5rem; line-height: 090%; font-weight: 700; }
.tx4.rbt { font-size: 1.0rem; line-height: 090%; font-weight: 700; }
.tx5.rbt { font-size: 0.7rem; line-height: 090%; font-weight: 700; }
/**/
.hero { font-size: 4.50rem; line-height: 110%; font-weight: 700; }
.tx1.jst { font-size: 3.25rem; line-height: 110%; font-weight: 700; }
.tx2.jst { font-size: 2.88rem; line-height: 110%; font-weight: 700; }
.tx3.jst { font-size: 2.00rem; line-height: 110%; font-weight: 700; }
.tx4.jst { font-size: 1.50rem; line-height: 110%; font-weight: 700; }
.tx5.jst { font-size: 1.13rem; line-height: 110%; font-weight: 700; }
.txbtn { font-family: Roboto; font-size: 0.875rem; line-height: 24px; font-weight: 400; }
.txnav { font-family: Jost; font-size: 0.875rem; line-height: 150%; font-weight: 700; }
.tx-lrg { font-family: Roboto; font-size: 1.130rem; line-height: 150%; font-weight: 400; }
.tx-reg { font-family: Roboto; font-size: 1.000rem; line-height: 150%; font-weight: 400; }
.tx-sml { font-family: Roboto; font-size: 0.875rem; line-height: 175%; font-weight: 400; }
.tx-tny { font-family: Roboto; font-size: 0.750rem; line-height: 200%; font-weight: 400; }
/* Academy */
@font-face { font-family: "Anton"; font-weight: 700; src: url(academy/Anton-Regular.ttf); }
@font-face { font-family: "Sweet Sans"; font-weight: 400; src: url(academy/Sweet-Sans.otf); }
.ds1_3dph { font-family: Anton; font-size: 4.50rem; line-height: 110%; font-weight: 700; }
.tx1_3dph { font-family: Anton; font-size: 3.25rem; line-height: 110%; font-weight: 700; }
.tx2_3dph { font-family: Anton; font-size: 2.88rem; line-height: 110%; font-weight: 700; }
.tx3_3dph { font-family: Anton; font-size: 2.00rem; line-height: 110%; font-weight: 700; }
.tx4_3dph { font-family: Anton; font-size: 1.50rem; line-height: 110%; font-weight: 700; }
.tx5_3dph { font-family: Anton; font-size: 1.13rem; line-height: 110%; font-weight: 700; }
.lrg_3dph { font-family: Sweet Sans; font-size: 1.130rem; line-height: 150%; font-weight: 400; }
.reg_3dph { font-family: Sweet Sans; font-size: 1.000rem; line-height: 150%; font-weight: 400; }
.sml_3dph { font-family: Sweet Sans; font-size: 0.875rem; line-height: 175%; font-weight: 400; }
.tny_3dph { font-family: Sweet Sans; font-size: 0.750rem; line-height: 200%; font-weight: 400; }
.txbtn_3dph { font-family: Roboto; font-size: 0.875rem; line-height: 24px; font-weight: 400; }
.txnav_3dph { font-family: Anton; font-size: 0.875rem; line-height: 150%; font-weight: 700; }
/**/
/* Arkham */
@font-face { font-family: "Teutonic"; font-weight: 700; src: url(arkham/Teutonic.ttf); }
@font-face { font-family: "MyOldRemington"; font-weight: 400; src: url(arkham/MyOld.ttf); }
.ds1_ark { font-family: Teutonic; font-size: 4.50rem; line-height: 110%; font-weight: 700; }
.tx1_ark { font-family: Teutonic; font-size: 3.25rem; line-height: 110%; font-weight: 700; }
.tx2_ark { font-family: Teutonic; font-size: 2.88rem; line-height: 110%; font-weight: 700; }
.tx3_ark { font-family: Teutonic; font-size: 2.00rem; line-height: 110%; font-weight: 700; }
.tx4_ark { font-family: Teutonic; font-size: 1.50rem; line-height: 110%; font-weight: 700; }
.tx5_ark { font-family: Teutonic; font-size: 1.13rem; line-height: 110%; font-weight: 700; }
.lrg_ark { font-family: Roboto; font-size: 1.130rem; line-height: 150%; font-weight: 400; }
.reg_ark { font-family: Roboto; font-size: 1.000rem; line-height: 150%; font-weight: 400; }
.sml_ark { font-family: Roboto; font-size: 0.875rem; line-height: 175%; font-weight: 400; }
.tny_ark { font-family: Roboto; font-size: 0.750rem; line-height: 200%; font-weight: 400; }
.btn_ark { font-family: Teutonic; font-size: 0.875rem; line-height: 24px; font-weight: 400; }
.nav_ark { font-family: Teutonic; font-size: 0.875rem; line-height: 150%; font-weight: 700; }
.aux_ttl_ark { font-family: MyOldRemington; font-size: 3rem; line-height: auto; font-weight: 400; }
.aux_txt_ark { font-family: MyOldRemington; font-size: 1.625rem; line-height: 24px; font-weight: 400; }
/**/
/* Free Mini Pack */
@font-face { font-family: "Cinzel"; font-weight: 700; src: url(free-mini-pack/Cinzel-Bold.ttf); }
@font-face { font-family: "Sarabun"; font-weight: 300; src: url(free-mini-pack/Sarabun-Light.ttf); }
.ds1_fmp { font-family: Cinzel; font-size: 4.5rem; line-height: 110%; font-weight: 700; }
.tx1_fmp { font-family: Cinzel; font-size: 3.25rem; line-height: 110%; font-weight: 700; }
.tx2_fmp { font-family: Cinzel; font-size: 2.88rem; line-height: 110%; font-weight: 700; }
.tx3_fmp { font-family: Cinzel; font-size: 2.00rem; line-height: 110%; font-weight: 700; }
.lrg_fmp { font-family: Sarabun; font-size: 1.125rem; line-height: 110%; font-weight: 300; }
/**/
/**/
/* Effects */
.hover:hover { cursor: pointer; }
.und:hover { text-decoration: underline; } /* change to "an-und" and update references */
.undl { text-decoration: underline; } /* change to "und" and update references */
/**/
.anbg-round { position: relative; }
.anbg-round::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.anbg-round::before { background: white; opacity: 0; width: 0px; height: 0px; transition: all 0.3s; border-radius: 100%; }
.anbg-round:hover { cursor: pointer; }
.anbg-round:hover::before { width: 40px; height: 40px; opacity: 0.2; transition: all 0.3s; }
.anbg-round:active::before { width: 60px; height: 60px; opacity: 0.2; transition: all 0.3s; }
.anbg-fill { transition: background-color 0.3s; }
.anbg-fill:hover { background-color: rgba(255, 255, 255, 0.10); transition: background-color 0.3s; }
:hover > .anbg-round-parent { cursor: pointer; }
:hover > .anbg-round-parent::before { width: 40px; height: 40px; opacity: 0.2; transition: all 0.3s; }
:active > .anbg-round-parent::before { width: 60px; height: 60px; opacity: 0.2; transition: all 0.3s; }
/**/
.elev-1 { box-shadow: 0px 4px 4px 2px rgba(0, 0, 0, 0.25); }
.elev-2 { box-shadow: 0px 8px 8px 4px rgba(0, 0, 0, 0.25); }
.elev-3 { box-shadow: 0px 12px 12px 6px rgba(0, 0, 0, 0.25); }
.at-elev-1:hover { box-shadow: 0px 4px 4px 2px rgba(0, 0, 0, 0.25); }
.at-elev-2:hover { box-shadow: 0px 8px 8px 4px rgba(0, 0, 0, 0.25); }
.at-elev-3:hover { box-shadow: 0px 12px 12px 6px rgba(0, 0, 0, 0.25); }
/**/
/* Color Palette */
.inhe-cl { color: inherit; } /* add references where style="color:inherit" is used */
/* General */
.red-0-cl { color: var(--red-0); } .red-0-bg { background-color: var(--red-0); } .red-0-bc { border-color: var(--red-0); }
.red-1-cl { color: var(--red-1); } .red-1-bg { background-color: var(--red-1); } .red-1-bc { border-color: var(--red-1); }
.red-2-cl { color: var(--red-2); } .red-2-bg { background-color: var(--red-2); } .red-2-bc { border-color: var(--red-2); }
.red-3-cl { color: var(--red-3); } .red-3-bg { background-color: var(--red-3); } .red-3-bc { border-color: var(--red-3); }
.red-4-cl { color: var(--red-3); } .red-4-bg { background-color: var(--red-3); } .red-4-bc { border-color: var(--red-3); }
.red-5-cl { color: var(--red-5); } .red-5-bg { background-color: var(--red-5); } .red-5-bc { border-color: var(--red-5); }
.red-6-cl { color: var(--red-6); } .red-6-bg { background-color: var(--red-6); } .red-6-bc { border-color: var(--red-6); }
.red-7-cl { color: var(--red-7); } .red-7-bg { background-color: var(--red-7); } .red-7-bc { border-color: var(--red-7); }
.red-8-cl { color: var(--red-8); } .red-8-bg { background-color: var(--red-8); } .red-8-bc { border-color: var(--red-8); }
.red-9-cl { color: var(--red-9); } .red-9-bg { background-color: var(--red-9); } .red-9-bc { border-color: var(--red-9); }
.drk-0-cl { color: var(--drk-0); } .drk-0-bg { background-color: var(--drk-0); } .drk-0-bc { border-color: var(--drk-0); }
.drk-1-cl { color: var(--drk-1); } .drk-1-bg { background-color: var(--drk-1); } .drk-1-bc { border-color: var(--drk-1); }
.drk-2-cl { color: var(--drk-2); } .drk-2-bg { background-color: var(--drk-2); } .drk-2-bc { border-color: var(--drk-2); }
.drk-3-cl { color: var(--drk-3); } .drk-3-bg { background-color: var(--drk-3); } .drk-3-bc { border-color: var(--drk-3); }
.drk-4-cl { color: var(--drk-4); } .drk-4-bg { background-color: var(--drk-4); } .drk-4-bc { border-color: var(--drk-4); }
.drk-5-cl { color: var(--drk-5); } .drk-5-bg { background-color: var(--drk-5); } .drk-5-bc { border-color: var(--drk-5); }
.drk-6-cl { color: var(--drk-6); } .drk-6-bg { background-color: var(--drk-6); } .drk-6-bc { border-color: var(--drk-6); }
.drk-7-cl { color: var(--drk-7); } .drk-7-bg { background-color: var(--drk-7); } .drk-7-bc { border-color: var(--drk-7); }
.drk-8-cl { color: var(--drk-8); } .drk-8-bg { background-color: var(--drk-8); } .drk-8-bc { border-color: var(--drk-8); }
.drk-9-cl { color: var(--drk-9); } .drk-9-bg { background-color: var(--drk-9); } .drk-9-bc { border-color: var(--drk-9); }
.ylw-0-cl { color: var(--ylw-0); } .ylw-0-bg { background-color: var(--ylw-0); } .ylw-0-bc { border-color: var(--ylw-0); }
.ylw-1-cl { color: var(--ylw-1); } .ylw-1-bg { background-color: var(--ylw-1); } .ylw-1-bc { border-color: var(--ylw-1); }
.ylw-3-cl { color: var(--ylw-3); } .ylw-3-bg { background-color: var(--ylw-3); } .ylw-3-bc { border-color: var(--ylw-3); }
.ylw-5-cl { color: var(--ylw-5); } .ylw-5-bg { background-color: var(--ylw-5); } .ylw-5-bc { border-color: var(--ylw-5); }
.ylw-7-cl { color: var(--ylw-7); } .ylw-7-bg { background-color: var(--ylw-7); } .ylw-7-bc { border-color: var(--ylw-7); }
.ppl-0-cl { color: var(--ppl-0); } .ppl-0-bg { background-color: var(--ppl-0); } .ppl-0-bc { border-color: var(--ppl-0); }
.ppl-1-cl { color: var(--ppl-1); } .ppl-1-bg { background-color: var(--ppl-1); } .ppl-1-bc { border-color: var(--ppl-1); }
.ppl-3-cl { color: var(--ppl-3); } .ppl-3-bg { background-color: var(--ppl-3); } .ppl-3-bc { border-color: var(--ppl-3); }
.ppl-5-cl { color: var(--ppl-5); } .ppl-5-bg { background-color: var(--ppl-5); } .ppl-5-bc { border-color: var(--ppl-5); }
.ppl-7-cl { color: var(--ppl-7); } .ppl-7-bg { background-color: var(--ppl-7); } .ppl-7-bc { border-color: var(--ppl-7); }
.inf-0-cl { color: var(--inf-0); } .inf-0-bg { background-color: var(--inf-0); } .inf-0-bc { border-color: var(--inf-0); }
.inf-1-cl { color: var(--inf-1); } .inf-1-bg { background-color: var(--inf-1); } .inf-1-bc { border-color: var(--inf-1); }
.inf-3-cl { color: var(--inf-3); } .inf-3-bg { background-color: var(--inf-3); } .inf-3-bc { border-color: var(--inf-3); }
.inf-5-cl { color: var(--inf-5); } .inf-5-bg { background-color: var(--inf-5); } .inf-5-bc { border-color: var(--inf-5); }
.inf-7-cl { color: var(--inf-7); } .inf-7-bg { background-color: var(--inf-7); } .inf-7-bc { border-color: var(--inf-7); }
.scs-0-cl { color: var(--scs-0); } .scs-0-bg { background-color: var(--scs-0); } .scs-0-bc { border-color: var(--scs-0); }
.scs-1-cl { color: var(--scs-1); } .scs-1-bg { background-color: var(--scs-1); } .scs-1-bc { border-color: var(--scs-1); }
.scs-3-cl { color: var(--scs-3); } .scs-3-bg { background-color: var(--scs-3); } .scs-3-bc { border-color: var(--scs-3); }
.scs-5-cl { color: var(--scs-5); } .scs-5-bg { background-color: var(--scs-5); } .scs-5-bc { border-color: var(--scs-5); }
.scs-7-cl { color: var(--scs-7); } .scs-7-bg { background-color: var(--scs-7); } .scs-7-bc { border-color: var(--scs-7); }
.wrn-0-cl { color: var(--wrn-0); } .wrn-0-bg { background-color: var(--wrn-0); } .wrn-0-bc { border-color: var(--wrn-0); }
.wrn-1-cl { color: var(--wrn-1); } .wrn-1-bg { background-color: var(--wrn-1); } .wrn-1-bc { border-color: var(--wrn-1); }
.wrn-3-cl { color: var(--wrn-3); } .wrn-3-bg { background-color: var(--wrn-3); } .wrn-3-bc { border-color: var(--wrn-3); }
.wrn-5-cl { color: var(--wrn-5); } .wrn-5-bg { background-color: var(--wrn-5); } .wrn-5-bc { border-color: var(--wrn-5); }
.wrn-7-cl { color: var(--wrn-7); } .wrn-7-bg { background-color: var(--wrn-7); } .wrn-7-bc { border-color: var(--wrn-7); }
.err-0-cl { color: var(--err-0); } .err-0-bg { background-color: var(--err-0); } .err-0-bc { border-color: var(--err-0); }
.err-1-cl { color: var(--err-1); } .err-1-bg { background-color: var(--err-1); } .err-1-bc { border-color: var(--err-1); }
.err-3-cl { color: var(--err-3); } .err-3-bg { background-color: var(--err-3); } .err-3-bc { border-color: var(--err-3); }
.err-5-cl { color: var(--err-5); } .err-5-bg { background-color: var(--err-5); } .err-5-bc { border-color: var(--err-5); }
.err-7-cl { color: var(--err-7); } .err-7-bg { background-color: var(--err-7); } .err-7-bc { border-color: var(--err-7); }
/**/
/* Academy */
.acdm-pry-3-cl { color: var(--acdm-pry-3); } .acdm-pry-3-bg { background-color: var(--acdm-pry-3); } .acdm-pry-3-bc { border-color: var(--acdm-pry-3); }
.acdm-pry-5-cl { color: var(--acdm-pry-5); } .acdm-pry-5-bg { background-color: var(--acdm-pry-5); } .acdm-pry-5-bc { border-color: var(--acdm-pry-5); }
.acdm-pry-7-cl { color: var(--acdm-pry-7); } .acdm-pry-7-bg { background-color: var(--acdm-pry-7); } .acdm-pry-7-bc { border-color: var(--acdm-pry-7); }
.acdm-pry-0-bg { background-color: var(--acdm-pry-0); }
.acdm-sec-3-cl { color: var(--acdm-sec-3); } .acdm-sec-3-bg { background-color: var(--acdm-sec-3); } .acdm-sec-3-bc { border-color: var(--acdm-sec-3); }
.acdm-sec-5-cl { color: var(--acdm-sec-5); } .acdm-sec-5-bg { background-color: var(--acdm-sec-5); } .acdm-sec-5-bc { border-color: var(--acdm-sec-5); }
.acdm-sec-7-cl { color: var(--acdm-sec-7); } .acdm-sec-7-bg { background-color: var(--acdm-sec-7); } .acdm-sec-7-bc { border-color: var(--acdm-sec-7); }
.acdm-neu-3-cl { color: var(--acdm-neu-3); } .acdm-neu-3-bg { background-color: var(--acdm-neu-3); } .acdm-neu-3-bc { border-color: var(--acdm-neu-3); }
.acdm-neu-5-cl { color: var(--acdm-neu-5); } .acdm-neu-5-bg { background-color: var(--acdm-neu-5); } .acdm-neu-5-bc { border-color: var(--acdm-neu-5); }
.acdm-neu-7-cl { color: var(--acdm-neu-7); } .acdm-neu-7-bg { background-color: var(--acdm-neu-7); } .acdm-neu-7-bc { border-color: var(--acdm-neu-7); }
.acdm-acc-3-cl { color: var(--acdm-acc-3); } .acdm-acc-3-bg { background-color: var(--acdm-acc-3); } .acdm-acc-3-bc { border-color: var(--acdm-acc-3); }
.acdm-acc-5-cl { color: var(--acdm-acc-5); } .acdm-acc-5-bg { background-color: var(--acdm-acc-5); } .acdm-acc-5-bc { border-color: var(--acdm-acc-5); }
.acdm-acc-7-cl { color: var(--acdm-acc-7); } .acdm-acc-7-bg { background-color: var(--acdm-acc-7); } .acdm-acc-7-bc { border-color: var(--acdm-acc-7); }
.acdm-red-3-cl { color: var(--acdm-red-3); } .acdm-red-3-bg { background-color: var(--acdm-red-3); } .acdm-red-3-bc { border-color: var(--acdm-red-3); }
.acdm-red-5-cl { color: var(--acdm-red-5); } .acdm-red-5-bg { background-color: var(--acdm-red-5); } .acdm-red-5-bc { border-color: var(--acdm-red-5); }
.acdm-red-7-cl { color: var(--acdm-red-7); } .acdm-red-7-bg { background-color: var(--acdm-red-7); } .acdm-red-7-bc { border-color: var(--acdm-red-7); }
/**/
/* Arkham */
.ark-pri-1-cl { color: var(--ark-pri-1); } .ark-pri-1-bg { background-color: var(--ark-pri-1); } .ark-pri-1-bc { border-color: var(--ark-pri-1); }
.ark-pri-3-cl { color: var(--ark-pri-3); } .ark-pri-3-bg { background-color: var(--ark-pri-3); } .ark-pri-3-bc { border-color: var(--ark-pri-3); }
.ark-pri-5-cl { color: var(--ark-pri-5); } .ark-pri-5-bg { background-color: var(--ark-pri-5); } .ark-pri-5-bc { border-color: var(--ark-pri-5); }
.ark-pri-7-cl { color: var(--ark-pri-7); } .ark-pri-7-bg { background-color: var(--ark-pri-7); } .ark-pri-7-bc { border-color: var(--ark-pri-7); }
.ark-pri-9-cl { color: var(--ark-pri-9); } .ark-pri-9-bg { background-color: var(--ark-pri-9); } .ark-pri-9-bc { border-color: var(--ark-pri-9); }
.ark-sec-1-cl { color: var(--ark-sec-1); } .ark-sec-1-bg { background-color: var(--ark-sec-1); } .ark-sec-1-bc { border-color: var(--ark-sec-1); }
.ark-sec-3-cl { color: var(--ark-sec-3); } .ark-sec-3-bg { background-color: var(--ark-sec-3); } .ark-sec-3-bc { border-color: var(--ark-sec-3); }
.ark-sec-5-cl { color: var(--ark-sec-5); } .ark-sec-5-bg { background-color: var(--ark-sec-5); } .ark-sec-5-bc { border-color: var(--ark-sec-5); }
.ark-sec-7-cl { color: var(--ark-sec-7); } .ark-sec-7-bg { background-color: var(--ark-sec-7); } .ark-sec-7-bc { border-color: var(--ark-sec-7); }
.ark-sec-9-cl { color: var(--ark-sec-9); } .ark-sec-9-bg { background-color: var(--ark-sec-9); } .ark-sec-9-bc { border-color: var(--ark-sec-9); }
.ark-ter-1-cl { color: var(--ark-ter-1); } .ark-ter-1-bg { background-color: var(--ark-ter-1); } .ark-ter-1-bc { border-color: var(--ark-ter-1); }
.ark-ter-3-cl { color: var(--ark-ter-3); } .ark-ter-3-bg { background-color: var(--ark-ter-3); } .ark-ter-3-bc { border-color: var(--ark-ter-3); }
.ark-ter-5-cl { color: var(--ark-ter-5); } .ark-ter-5-bg { background-color: var(--ark-ter-5); } .ark-ter-5-bc { border-color: var(--ark-ter-5); }
.ark-ter-7-cl { color: var(--ark-ter-7); } .ark-ter-7-bg { background-color: var(--ark-ter-7); } .ark-ter-7-bc { border-color: var(--ark-ter-7); }
.ark-ter-9-cl { color: var(--ark-ter-9); } .ark-ter-9-bg { background-color: var(--ark-ter-9); } .ark-ter-9-bc { border-color: var(--ark-ter-9); }
/**/
/* Free Mini Pack */
.fmp-1-cl { color: var(--fmp-1); } .fmp-1-bg { background-color: var(--fmp-1); } .fmp-1-bc { border-color: var(--fmp-1); }
.fmp-3-cl { color: var(--fmp-3); } .fmp-3-bg { background-color: var(--fmp-3); } .fmp-3-bc { border-color: var(--fmp-3); }
.fmp-5-cl { color: var(--fmp-5); } .fmp-5-bg { background-color: var(--fmp-5); } .fmp-5-bc { border-color: var(--fmp-5); }
/**/
/**/
/* Spacing */
.ml-0 { margin-left: var(--spc-0); } .mr-0 { margin-right: var(--spc-0); } .mt-0 { margin-top: var(--spc-0); } .mb-0 { margin-bottom: var(--spc-0); }
.ml-1 { margin-left: var(--spc-1); } .mr-1 { margin-right: var(--spc-1); } .mt-1 { margin-top: var(--spc-1); } .mb-1 { margin-bottom: var(--spc-1); }
.ml-2 { margin-left: var(--spc-2); } .mr-2 { margin-right: var(--spc-2); } .mt-2 { margin-top: var(--spc-2); } .mb-2 { margin-bottom: var(--spc-2); }
.ml-3 { margin-left: var(--spc-3); } .mr-3 { margin-right: var(--spc-3); } .mt-3 { margin-top: var(--spc-3); } .mb-3 { margin-bottom: var(--spc-3); }
.ml-4 { margin-left: var(--spc-4); } .mr-4 { margin-right: var(--spc-4); } .mt-4 { margin-top: var(--spc-4); } .mb-4 { margin-bottom: var(--spc-4); }
.ml-5 { margin-left: var(--spc-5); } .mr-5 { margin-right: var(--spc-5); } .mt-5 { margin-top: var(--spc-5); } .mb-5 { margin-bottom: var(--spc-5); }
.ml-6 { margin-left: var(--spc-6); } .mr-6 { margin-right: var(--spc-6); } .mt-6 { margin-top: var(--spc-6); } .mb-6 { margin-bottom: var(--spc-6); }
.ml-7 { margin-left: var(--spc-7); } .mr-7 { margin-right: var(--spc-7); } .mt-7 { margin-top: var(--spc-7); } .mb-7 { margin-bottom: var(--spc-7); }
.ml-8 { margin-left: var(--spc-8); } .mr-8 { margin-right: var(--spc-8); } .mt-8 { margin-top: var(--spc-8); } .mb-8 { margin-bottom: var(--spc-8); }
.ml-9 { margin-left: var(--spc-9); } .mr-9 { margin-right: var(--spc-9); } .mt-9 { margin-top: var(--spc-9); } .mb-9 { margin-bottom: var(--spc-9); }
.mh-0 { margin-left: var(--spc-0); margin-right: var(--spc-0); } .mv-0 { margin-top: var(--spc-0); margin-bottom: var(--spc-0); } .m-0 { margin: var(--spc-0); }
.mh-1 { margin-left: var(--spc-1); margin-right: var(--spc-1); } .mv-1 { margin-top: var(--spc-1); margin-bottom: var(--spc-1); } .m-1 { margin: var(--spc-1); }
.mh-2 { margin-left: var(--spc-2); margin-right: var(--spc-2); } .mv-2 { margin-top: var(--spc-2); margin-bottom: var(--spc-2); } .m-2 { margin: var(--spc-2); }
.mh-3 { margin-left: var(--spc-3); margin-right: var(--spc-3); } .mv-3 { margin-top: var(--spc-3); margin-bottom: var(--spc-3); } .m-3 { margin: var(--spc-3); }
.mh-4 { margin-left: var(--spc-4); margin-right: var(--spc-4); } .mv-4 { margin-top: var(--spc-4); margin-bottom: var(--spc-4); } .m-4 { margin: var(--spc-4); }
.mh-5 { margin-left: var(--spc-5); margin-right: var(--spc-5); } .mv-5 { margin-top: var(--spc-5); margin-bottom: var(--spc-5); } .m-5 { margin: var(--spc-5); }
.mh-6 { margin-left: var(--spc-6); margin-right: var(--spc-6); } .mv-6 { margin-top: var(--spc-6); margin-bottom: var(--spc-6); } .m-6 { margin: var(--spc-6); }
.mh-7 { margin-left: var(--spc-7); margin-right: var(--spc-7); } .mv-7 { margin-top: var(--spc-7); margin-bottom: var(--spc-7); } .m-7 { margin: var(--spc-7); }
.mh-8 { margin-left: var(--spc-8); margin-right: var(--spc-8); } .mv-8 { margin-top: var(--spc-8); margin-bottom: var(--spc-8); } .m-8 { margin: var(--spc-8); }
.mh-9 { margin-left: var(--spc-9); margin-right: var(--spc-9); } .mv-9 { margin-top: var(--spc-9); margin-bottom: var(--spc-9); } .m-9 { margin: var(--spc-9); }
.pl-0 { padding-left: var(--spc-0); } .pr-0 { padding-right: var(--spc-0); } .pt-0 { padding-top: var(--spc-0); } .pb-0 { padding-bottom: var(--spc-0); }
.pl-1 { padding-left: var(--spc-1); } .pr-1 { padding-right: var(--spc-1); } .pt-1 { padding-top: var(--spc-1); } .pb-1 { padding-bottom: var(--spc-1); }
.pl-2 { padding-left: var(--spc-2); } .pr-2 { padding-right: var(--spc-2); } .pt-2 { padding-top: var(--spc-2); } .pb-2 { padding-bottom: var(--spc-2); }
.pl-3 { padding-left: var(--spc-3); } .pr-3 { padding-right: var(--spc-3); } .pt-3 { padding-top: var(--spc-3); } .pb-3 { padding-bottom: var(--spc-3); }
.pl-4 { padding-left: var(--spc-4); } .pr-4 { padding-right: var(--spc-4); } .pt-4 { padding-top: var(--spc-4); } .pb-4 { padding-bottom: var(--spc-4); }
.pl-5 { padding-left: var(--spc-5); } .pr-5 { padding-right: var(--spc-5); } .pt-5 { padding-top: var(--spc-5); } .pb-5 { padding-bottom: var(--spc-5); }
.pl-6 { padding-left: var(--spc-6); } .pr-6 { padding-right: var(--spc-6); } .pt-6 { padding-top: var(--spc-6); } .pb-6 { padding-bottom: var(--spc-6); }
.pl-7 { padding-left: var(--spc-7); } .pr-7 { padding-right: var(--spc-7); } .pt-7 { padding-top: var(--spc-7); } .pb-7 { padding-bottom: var(--spc-7); }
.pl-8 { padding-left: var(--spc-8); } .pr-8 { padding-right: var(--spc-8); } .pt-8 { padding-top: var(--spc-8); } .pb-8 { padding-bottom: var(--spc-8); }
.pl-9 { padding-left: var(--spc-9); } .pr-9 { padding-right: var(--spc-9); } .pt-9 { padding-top: var(--spc-9); } .pb-9 { padding-bottom: var(--spc-9); }
.ph-0 { padding-left: var(--spc-0); padding-right: var(--spc-0); } .pv-0 { padding-top: var(--spc-0); padding-bottom: var(--spc-0); } .p-0 { padding: var(--spc-0); }
.ph-1 { padding-left: var(--spc-1); padding-right: var(--spc-1); } .pv-1 { padding-top: var(--spc-1); padding-bottom: var(--spc-1); } .p-1 { padding: var(--spc-1); }
.ph-2 { padding-left: var(--spc-2); padding-right: var(--spc-2); } .pv-2 { padding-top: var(--spc-2); padding-bottom: var(--spc-2); } .p-2 { padding: var(--spc-2); }
.ph-3 { padding-left: var(--spc-3); padding-right: var(--spc-3); } .pv-3 { padding-top: var(--spc-3); padding-bottom: var(--spc-3); } .p-3 { padding: var(--spc-3); }
.ph-4 { padding-left: var(--spc-4); padding-right: var(--spc-4); } .pv-4 { padding-top: var(--spc-4); padding-bottom: var(--spc-4); } .p-4 { padding: var(--spc-4); }
.ph-5 { padding-left: var(--spc-5); padding-right: var(--spc-5); } .pv-5 { padding-top: var(--spc-5); padding-bottom: var(--spc-5); } .p-5 { padding: var(--spc-5); }
.ph-6 { padding-left: var(--spc-6); padding-right: var(--spc-6); } .pv-6 { padding-top: var(--spc-6); padding-bottom: var(--spc-6); } .p-6 { padding: var(--spc-6); }
.ph-7 { padding-left: var(--spc-7); padding-right: var(--spc-7); } .pv-7 { padding-top: var(--spc-7); padding-bottom: var(--spc-7); } .p-7 { padding: var(--spc-7); }
.ph-8 { padding-left: var(--spc-8); padding-right: var(--spc-8); } .pv-8 { padding-top: var(--spc-8); padding-bottom: var(--spc-8); } .p-8 { padding: var(--spc-8); }
.ph-9 { padding-left: var(--spc-9); padding-right: var(--spc-9); } .pv-9 { padding-top: var(--spc-9); padding-bottom: var(--spc-9); } .p-9 { padding: var(--spc-9); }
.gv-0 { row-gap: var(--spc-0); } .gh-0 { column-gap: var(--spc-0); } .g-0 { gap: var(--spc-0); }
.gv-1 { row-gap: var(--spc-1); } .gh-1 { column-gap: var(--spc-1); } .g-1 { gap: var(--spc-1); }
.gv-2 { row-gap: var(--spc-2); } .gh-2 { column-gap: var(--spc-2); } .g-2 { gap: var(--spc-2); }
.gv-3 { row-gap: var(--spc-3); } .gh-3 { column-gap: var(--spc-3); } .g-3 { gap: var(--spc-3); }
.gv-4 { row-gap: var(--spc-4); } .gh-4 { column-gap: var(--spc-4); } .g-4 { gap: var(--spc-4); }
.gv-5 { row-gap: var(--spc-5); } .gh-5 { column-gap: var(--spc-5); } .g-5 { gap: var(--spc-5); }
.gv-6 { row-gap: var(--spc-6); } .gh-6 { column-gap: var(--spc-6); } .g-6 { gap: var(--spc-6); }
.gv-7 { row-gap: var(--spc-7); } .gh-7 { column-gap: var(--spc-7); } .g-7 { gap: var(--spc-7); }
.gv-8 { row-gap: var(--spc-8); } .gh-8 { column-gap: var(--spc-8); } .g-8 { gap: var(--spc-8); }
.gv-9 { row-gap: var(--spc-9); } .gh-9 { column-gap: var(--spc-9); } .g-9 { gap: var(--spc-9); }
/**/
/* Components */
/* compCheckable */
.compCheckable { column-gap: 0.5rem; }
.compCheckableIcon { border: 2px solid var(--drk-1); border-radius: 2px; width: 18px; height: 18px; }
.compCheckableText { font-family: 'Roboto'; font-weight: 400; font-size: 15px; line-height: 150%; color: var(--drk-3); }
[active="false"] .compCheckableIcon span { opacity: 0%; }
[active="true"] .compCheckableIcon span { opacity: 100%; }
[active="true"] .compCheckableIcon { background: var(--red-5); border-color: var(--red-5); }
/**/
/* compCheckchip */
.compCheckchip { border-radius: 8px; padding: 9px 16px; }
.compCheckchip[active="true"] { background: var(--red-3); }
.compCheckchip[active="false"] { background: var(--drk-8); }
.compCheckchipText { font-family: 'Roboto'; font-weight: 400; font-size: 12px; line-height: 14px; }
[active="true"] > .compCheckchipText { color: var(--drk-8); }
[active="false"] > .compCheckchipText { color: var(--drk-2); }
[active="true"] > .compCheckchipIcon { width: 14px; transition: all 0.3s; color: var(--drk-8); font-size: 18px; padding-right: 0.5rem; }
[active="false"] > .compCheckchipIcon { width: 0px; transition: all 0.3s; color: var(--drk-8); font-size: 18px; overflow: hidden; }
/**/
/* compChipclose */
.compChipclose { border: 1px solid var(--drk-1); border-radius: 8px; padding: 6px 6px 6px 16px; column-gap: 10px; }
.compChipcloseText { font-family: 'Roboto'; font-weight: 400; font-size: 12px; line-height: 14px; color: var(--drk-1); }
.compChipcloseIcon span { font-size: 18px;}
/**/
/* compChip */
/* infox */
.compChip.infoxLyt
{
border: 1px solid var(--drk-5);
border-radius: 0.5rem;
background: transparent;
color: var(--drk-2);
}
.compChip.infoxLyt > div { padding-left: var(--spc-3); padding-right: var(--spc-1); gap: var(--spc-1); }
.compChip[value="template"] { display: none; }
/**/
/* select */
.compChip.selectLyt { height: 36px; white-space: nowrap; }
.compChip.selectLyt > div { background: var(--drk-8); color: var(--drk-2); padding-right: var(--spc-3); }
.compChip.selectLyt:hover > div { background: var(--drk-6); color: var(--drk-2); }
.compChip.selectLyt[status="true"] > div { background: var(--red-3); color: var(--drk-8); }
.compChip.selectLyt[status="true"]:hover > div { background: var(--red-1); color: var(--drk-8); }
.compChip.selectLyt[status="false"] > div { padding-left: var(--spc-3); }
.compChip.selectLyt[status="false"] .compChipLft { display: none; }
/**/
/* combinations */
.compChip.infox.selectLyt > div { padding-left: var(--spc-3); padding-right: var(--spc-1); }
/**/
/**/
/* compRadioitem */
.compRadioitem { column-gap: 11px; }
.compRadioitemText span { font-family: 'Roboto'; font-weight: 400; font-size: 15px; line-height: 150%; color: var(--drk-3); }
.compRadioitemIcon { border-radius: 100%; width: 20px; height: 20px; }
[active="true"] .compRadioitemIcon { border: 5px solid var(--red-7); transition: border 0.3s; }
[active="false"] .compRadioitemIcon { border: 2px solid var(--drk-1); transition: border 0.3s; }
[status="true"] .compRadioitemIcon { border: 5px solid var(--red-7); transition: border 0.3s; }
[status="false"] .compRadioitemIcon { border: 2px solid var(--drk-1); transition: border 0.3s; }
/**/
/* compSearchbar */
.compSearchbar { position: relative; }
.compSearchbar input { background: transparent; border: none; }
.compSearchbar div { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.compSearchbar.openSearchbar { border-bottom: 1px solid var(--drk-1); }
.compSearchbar.framedSearchbar { border: 1px solid var(--drk-1); }
.compSearchbar input::placeholder { color: var(--drk-4); }
/**/
/* compDropDown2 */
.compDropDown2 .compDropDownHeadLast { color: var(--drk-1); }
.compDropDown2 input { background: transparent; color: inherit; border: none; padding: 0; }
.compDropDown2 input::placeholder { color: inherit; }
.compDropDown2.normal > label { color: var(--drk-3); }
.compDropDown2.normal:focus-within > label { color: var(--drk-2); }
.compDropDown2.normal > span { color: var(--drk-3); }
.compDropDown2.normal:focus-within > span { color: var(--drk-1); }
.compDropDown2.normal .compDropDownHead { border: 1.5px solid transparent; border-radius: 8px; }
.compDropDown2.normal .compDropDownHead { background: var(--drk-6); }
.compDropDown2.normal .compDropDownHead { color: var(--drk-2); }
.compDropDown2.normal .compTextLft span { color: var(--drk-4); }
.compDropDown2.normal .compTextRgt span { color: var(--drk-1); }
.compDropDown2.normal:focus-within .compDropDownHeadValue { color: var(--drk-1); }
.compDropDown2.normal:focus-within .compTextLft span { color: var(--drk-1); }
.compDropDown2.normal.frameless:focus-within .compDropDownHead { border-bottom-color: var(--red-3); }
.compDropDown2.normal.framed:focus-within .compDropDownHead { border-color: var(--red-3); }
.compDropDown2.normal.open .compDropDownHead { background: transparent; padding: 0; }
/**/
.compDropDown2 input { background: transparent; border: none; }
.compDropDown2 .compDropDownItem { transition: all 0.3s; color: var(--drk-3); }
.compDropDown2 .compDropDownItem:hover { color: var(--drk-1); background: rgba(255, 255, 255, 0.1); transition: all 0.3s; }
.compDropDown2 .compDropDownActual { position: relative; }
.compDropDown2 .compDropDownOpts { overflow: hidden; position: absolute; width: max-content; min-width: 100%; z-index: 4; }
.compDropDown2 .compDropDownOpts > div { max-height: 100%; overflow-y: scroll; transition: all 0.3s; }
.compDropDown2 .compDropDownOpts > div::-webkit-scrollbar { width: var(--spc-2); background: var(--drk-7); border-radius: 8px; }
.compDropDown2 .compDropDownOpts > div::-webkit-scrollbar-thumb { background: var(--red-7); border-radius: 8px; }
.compDropDown2 .compDropDownOpts .compDropDownItem:not([state="selected"]) > div { display: none; }
/**/
/* oldDropDown */
.oldDropDown { position: relative; }
.oldDropDown .compDropDownHead { border: 1px solid var(--drk-3); border-radius: 8px; }
.oldDropDown .compDropDownHeadValue { flex: 1; }
.oldDropDown .compDropDownOpts { overflow: hidden; position: absolute; width: 100%; top: 2rem; z-index: 1; }
.oldDropDown .compDropDownOpts > div { border-radius: 8px; border: 1px solid var(--drk-3); }
.oldDropDown .compDropDownItem { transition: all 0.3s; }
.oldDropDown .compDropDownItem:hover { color: var(--drk-1); background: rgba(255, 255, 255, 0.1); transition: all 0.3s; }
.oldDropDown .compDropDownOpts > div { overflow-y: scroll; transition: all 0.3s; }
.oldDropDown .compDropDownOpts > div::-webkit-scrollbar { width: var(--spc-2); background: var(--drk-7); border-radius: 8px; }
.oldDropDown .compDropDownOpts > div::-webkit-scrollbar-thumb { background: var(--red-7); border-radius: 8px; }
/**/
/* compSelect */
.compSelect { position: relative; height: fit-content; }
.compSelectTooltip { display: none; height: fit-content; max-width: 14.25rem; }
.compSelectTooltip { position: absolute; width: max-content; z-index: 1; transform: translate(-50%, -50%); }
.compSelect:not(.disabled):hover .compSelectTooltip { display: flex; }
.compSelectTooltip.top { top: -0.25rem; left: 50%; transform: translate(-50%, -100%); }
.compSelectTooltip.bottom { bottom: -0.25rem; left: 50%; transform: translate(-50%, 100%); }
.compSelectTooltip.left { left: -0.25rem; top: 50%; transform: translate(-100%, -50%); }
.compSelectTooltip.right { right: -0.25rem; top: 50%; transform: translate( 100%, -50%); }
.compSelect { column-gap: 0.5rem; }
.compSelectIcon { border: 2px solid var(--drk-1); border-radius: 2px; width: 18px; height: 18px; }
.compSelectText { font-family: 'Roboto'; font-weight: 400; font-size: 15px; line-height: 150%; color: var(--drk-3); }
[active="false"] .compSelectIcon span { opacity: 0%; }
[active="true"] .compSelectIcon span { opacity: 100%; }
[active="true"] .compSelectIcon { background: var(--red-5); border-color: var(--red-5); }
/**/
/* compButton */
.compButton { position: relative; height: fit-content; }
.compButtonTooltip { display: none; height: fit-content; max-width: 14.25rem; }
.compButtonTooltip { position: absolute; width: max-content; z-index: 1; transform: translate(-50%, -50%); }
.compButton:not(.disabled):hover .compButtonTooltip { display: flex; }
.compButton.disabled .anbg-round::before { display: none; }
.compButton.disabled .anbg-round-parent::before { display: none; }
.compButton[active='true'] .compButtonRgt { color: var(--red-5); }
.compButton[active='true'] .compButtonTooltipFalse { display: none; }
.compButton[active='false'] .compButtonTooltipTrue { display: none; }
.compButtonTooltip.top { top: -0.25rem; left: 50%; transform: translate(-50%, -100%); }
.compButtonTooltip.bottom { bottom: -0.25rem; left: 50%; transform: translate(-50%, 100%); }
.compButtonTooltip.left { left: -0.25rem; top: 50%; transform: translate(-100%, -50%); }
.compButtonTooltip.right { right: -0.25rem; top: 50%; transform: translate( 100%, -50%); }
.compButton_red { background: var(--red-5); color: var(--drk-1); border-color: transparent; }
.compButton_red.disabled { opacity: 0.33; }
:not(.disabled) > .compButton_red:hover { background: var(--red-3); color: var(--drk-1); }
:not(.disabled) > .compButton_red:active { background: var(--red-7); color: var(--drk-2); }
.compButton_green { background: var(--scs-5); color: var(--drk-9); border-color: transparent; }
.compButton_green.disabled { opacity: 0.33; }
:not(.disabled) > .compButton_green:hover { background: var(--scs-3); color: var(--drk-9); }
:not(.disabled) > .compButton_green:active { background: var(--scs-7); color: var(--drk-9); }
.compButton_fmp { background: var(--fmp-3); color: var(--drk-9); border-color: transparent; transition: all 0.3s;}
.compButton_fmp.disabled { opacity: 0.33; }
:not(.disabled) > .compButton_fmp:hover { background: var(--fmp-1); color: var(--drk-9); }
:not(.disabled) > .compButton_fmp:active { background: var(--fmp-5); color: var(--drk-9); }
.compButton_open { background: transparent; color: var(--drk-1); border-color: transparent; padding: 0 !important; }
.compButton_open.disabled { opacity: 0.33; }
:not(.disabled) > .compButton_open:hover { background: transparent; color: var(--drk-1); } .compButton_open:hover > span { text-decoration: underline; }
:not(.disabled) > .compButton_open:active { background: transparent; color: var(--drk-2); }
.compButton_framed { background: transparent; color: var(--drk-1); border-color: var(--drk-1); }
.compButton_framed.disabled { opacity: 0.33; }
:not(.disabled) > .compButton_framed:hover { background-color: rgba(255, 255, 255, 0.10); color: var(--drk-1); }
:not(.disabled) > .compButton_framed:active { background: transparent; color: var(--drk-2); }
.compButton_framed_fmp { background: transparent; color: var(--fmp-3); border-color: var(--fmp-3); transition: all 0.2s;}
.compButton_framed_fmp.disabled { opacity: 0.33; }
:not(.disabled) > .compButton_framed_fmp:hover { background-color: rgba(255, 255, 255, 0.10); color: var(--fmp-1);}
:not(.disabled) > .compButton_framed_fmp:active { background: transparent; color: var(--drk-2); }
/**/
.compButton_open-dark { background: transparent; color: var(--drk-9); border-color: transparent; padding: 0 !important; }
.compButton_open-dark.disabled { opacity: 0.33; }
:not(.disabled) > .compButton_open-dark:hover { background: transparent; color: var(--drk-9); } .compButton_open-dark:hover > span { text-decoration: underline; }
:not(.disabled) > .compButton_open-dark:active { background: transparent; color: var(--drk-8); }
.compButton_framed-dark { background: transparent; color: var(--drk-9); border-color: var(--drk-9); }
.compButton_framed-dark.disabled { opacity: 0.33; }
:not(.disabled) > .compButton_framed-dark:hover { background-color: rgba(255, 255, 255, 0.10); color: var(--drk-9); }
:not(.disabled) > .compButton_framed-dark:active { background: transparent; color: var(--drk-8); }
/**/
.compButton_acdm-blue { background: var(--acdm-pry-5); color: var(--acdm-sec-7); border-color: transparent; border-radius: 0; }
.compButton_acdm-blue.disabled { opacity: 0.33; }
:not(.disabled) > .compButton_acdm-blue:hover { background: var(--acdm-pry-3); color: var(--acdm-sec-7); } .compButton_acdm-blue:hover > span { text-decoration: underline; }
:not(.disabled) > .compButton_acdm-blue:active { background: var(--acdm-pry-7); color: var(--acdm-sec-5); }
.compButton_acdm-red { background: var(--red-5); color: var(--drk-1); border-color: transparent; border-radius: 0; }
.compButton_acdm-red.disabled { opacity: 0.33; }
:not(.disabled) > .compButton_acdm-red:hover { background: var(--red-3); color: var(--drk-1); } .compButton_acdm-red:hover > span { text-decoration: underline; }
:not(.disabled) > .compButton_acdm-red:active { background: var(--red-7); color: var(--drk-2); }
.compButton_acdm-framed { background: transparent; color: var(--acdm-sec-3); border-color: var(--acdm-sec-3); border-radius: 0; }
.compButton_acdm-framed.disabled { opacity: 0.33; }
:not(.disabled) > .compButton_acdm-framed:hover { background: rgba(255, 255, 255, 0.10); color: var(--acdm-sec-3); } .compButton_acdm-framed:hover > span { text-decoration: underline; }
:not(.disabled) > .compButton_acdm-framed:active { background: transparent; color: var(--acdm-sec-7); }
/**/
.compButton_ark-primary { background: var(--ark-pri-5); color: var(--drk-9); border-color: transparent; border-radius: 0; }
.compButton_ark-primary.disabled { opacity: 0.33; }
:not(.disabled) > .compButton_ark-primary:hover { background: var(--ark-pri-3); color: var(--drk-9); } .compButton_ark-primary:hover > span { text-decoration: underline; }
:not(.disabled) > .compButton_ark-primary:active { background: var(--ark-pri-7); color: var(--drk-9); }
.compButton_ark-tertiary { background: var(--ark-ter-5); color: var(--drk-9); border-color: transparent; border-radius: 0; }
.compButton_ark-tertiary.disabled { opacity: 0.33; }
:not(.disabled) > .compButton_ark-tertiary:hover { background: var(--ark-ter-3); color: var(--drk-9); } .compButton_ark-tertiary:hover > span { text-decoration: underline; }
:not(.disabled) > .compButton_ark-tertiary:active { background: var(--ark-ter-7); color: var(--drk-9); }
.compButton_ark-framed { background: transparent; color: var(--drk-1); border-color: var(--ark-pri-5); border-radius: 0; }
.compButton_ark-framed.disabled { opacity: 0.33; }
:not(.disabled) > .compButton_ark-framed:hover { background: rgba(0, 114, 105, 0.10); color: var(--drk-1); } .compButton_ark-framed:hover > span { text-decoration: underline; }
:not(.disabled) > .compButton_ark-framed:active { background: transparent; color: var(--drk-1); }
.compButton_ark-primary .btn { font-family: Teutonic !important; }
.compButton_ark-tertiary .btn { font-family: Teutonic !important; }
.compButton_ark-framed .btn { font-family: Teutonic !important; }
/**/
/* compText */
.compText input { background: transparent; color: inherit; border: none; padding: 0; }
.compText.normal > label { color: var(--drk-3); }
.compText.normal:focus-within > label { color: var(--drk-2); }
.compText.normal > span { color: var(--drk-3); }
.compText.normal:focus-within > span { color: var(--drk-1); }
.compText.normal .compTextInput { border: 1.5px solid transparent; }
.compText.normal .compTextInput { background: var(--drk-6); }
.compText.normal .compTextInput { color: var(--drk-2); }
.compText.normal .compTextLft span { color: var(--drk-4); }
.compText.normal .compTextRgt span { color: var(--drk-1); }
.compText.normal:focus-within .compTextInput { color: var(--drk-1); }
.compText.normal:focus-within .compTextLft span { color: var(--drk-1); }
.compText.normal.frameless:focus-within .compTextInput { border-bottom-color: var(--red-3); }
.compText.normal.framed:focus-within .compTextInput { border-color: var(--red-3); }
.compText.framed .compTextInput { border-radius: 8px; }
.compText.disabled > label { color: var(--drk-3); }
.compText.disabled > span { color: var(--drk-3); }
.compText.disabled .compTextInput { background: var(--drk-4); }
.compText.disabled .compTextInput { color: var(--drk-6); }
.compText.disabled .compTextLft span { color: var(--drk-6); }
.compText.disabled .compTextRgt span { color: var(--drk-6); }
.compText input:-webkit-autofill,
.compText input:-webkit-autofill:hover,
.compText input:-webkit-autofill:focus,
.compText input:-webkit-autofill:active{
-webkit-background-clip: text;
-webkit-text-fill-color: var(--red-1);
transition: background-color 5000s ease-in-out 0s;
box-shadow: inset 0 0 20px 20px transparent;
}
/**/
/* compSltToggle */
.compSltToggleBox { width: var(--spc-5); height: var(--spc-5); }
.compSltToggleBox > div { width: 1.25rem; height: 0.625rem; padding: 0rem 0.125rem; border-radius: 10px; transition: all 0.3s; }
.compSltToggleBox > div > div { width: 0.375rem; height: 0.375rem; border-radius: 100%; background: var(--drk-9); transition: all 0.3s; }
.compSltToggle.disabled { opacity: 0.33; }
.compSltToggle[status="false"] > .compSltToggleBox > div > div { margin-left: 0.00rem; }
.compSltToggle[status="true"] > .compSltToggleBox > div > div { margin-left: 0.63rem; }
.compSltToggle[status="false"] > .compSltToggleBox > div { background: var(--drk-1); }
.compSltToggle[status="true"] > .compSltToggleBox > div { background: var(--red-5); }
.compSltToggle[status="false"]:hover > .compSltToggleBox > div { background: var(--drk-2); }
.compSltToggle[status="true"]:hover > .compSltToggleBox > div { background: var(--red-3); }
/**/
/* rewardsFeatured */
.rewardsFeatured .deactivate { display: none; }
.rewardsFeatured.active .deactivate { display: flex; }
.rewardsFeatured.active .activate { display: none; }
.rewardsFeatured:not(.active) .rewardsFeaturedActual > div:nth-child(n+9) { display: none; }
/**/
/* listingItem */
.listingItem { border-color: transparent; height: inherit; transition: border-color 0.3s; }
.listingItem:hover { border-color: var(--drk-5); transition: border-color 0.3s; }
.listingItem h2 { text-transform: uppercase; height: 2.25em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.listingItemCard { position: relative; }
.listingItemCard img { object-fit: cover; object-position: top; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.listingItemInfo { justify-content: space-between; transition: all 0.5s; position: relative; z-index: 1; }
.listingItemInfo { border-top-right-radius: 0; border-top-left-radius: 0; transition: background-color 0.3s; }
.listingItem:hover .listingItemInfo { background-color: var(--drk-5); transition: background-color 0.3s; }
.listingItemButton { transition: all 0.3s; opacity: 0; }
.listingItem:hover .listingItemButton { transition: all 0.3s; opacity: 1; }
/**/
.listingItem .notOwned { position: absolute; top: 12px; left: 12px; }
.listingItem .otherIcons { position: absolute; top: 0px; right: 0px; border-bottom-left-radius: 8px; border-top-right-radius: 8px; }
.listingItem .otherIcons { transition: all 0.3s; opacity: 0.3; }
.listingItem .otherIcons > div[status="false"] { color: var(--drk-1); }
.listingItem .otherIcons > div[status="true"] { color: var(--red-5); }
.listingItem .helperTxt { right: 0.25rem; position: absolute; transform: translate(-50%, -50%); width: fit-content; white-space: nowrap; top: 50%; }
.listingItem .helperTxt { opacity: 0; transition: all 0.3s; }
.listingItem:hover .otherIcons { opacity: 1; transition: all 0.3s; }
.listingItem .otherIcons > div:hover > .helperTxt { opacity: 1; transition: all 0.3s; }
/**/
.listingItemPrice { display: flex; } .listingItem.no_purc .listingItemPrice { display: none; }
.listingItemUnav { display: none; } .listingItem.is_unav .listingItemUnav { display: flex; }
.cartToggleListing { display: flex; } .listingItem.no_purc .cartToggleListing { display: none; }
.memberDiscNo { display: flex; } .mem_disc .memberDiscNo { display: none; }
.memberDiscYes { display: none; } .mem_disc .memberDiscYes { display: flex; }
.saleOff { display: none; position: absolute; top: var(--spc-2); left: var(--spc-2); }
.saleMem { display: none; } .sale_mem .saleMem { display: flex; }
.saleExt { display: none; } .sale_ext .saleExt { display: flex; }
.listingItem:not(.mem_disc).sale_ext.sale_mem .saleMem { display: none; }
.listingItem.mem_disc.sale_ext.sale_mem .saleExt { display: none; }
.notOwned { display: none; } .listingItem.owner_notown .notOwned { display: flex; }
.listingItem.owner_notown.sale_mem .notOwned { display: none; }
.listingItem.owner_notown.sale_ext .notOwned { display: none; }
.listingItem.loot_reward .cartToggleListing { display: none; }
.listingItem:not(.loot_reward) .listingItemCoin { display: none; }
.listingItem.loot_reward .listingItemCoin { display: flex; }
.owner_yesown .saleOff { display: none; }
/**/
.listingItem .loggedButton
{ display: flex; }
.listingItem .unloggedButton
{ display: none; }
.listingItem.unlogged .otherIcons,
.listingItem.unlogged .notOwned,
.listingItem.unlogged .listingItemPrice,
.listingItem.unlogged .listingItemCoin,
.listingItem.unlogged .loggedButton
{ display: none; }
.listingItem.unlogged .unloggedButton
{ display: flex; }
.listingItem .currentBundleButton { display: none; }
.listingItem.currentBundle .currentBundleButton { display: flex; }
.listingItem.currentBundle .otherIcons,
.listingItem.currentBundle .notOwned,
.listingItem.currentBundle .listingItemPrice,
.listingItem.currentBundle .listingItemCoin,
.listingItem.currentBundle .loggedButton
{ display: none; }
.listingItem.currentBundle .unloggedButton
{ display: none; }
.listingItem.currentBundle .currentBundleButton
{ display: flex; }
/**/
/* cartDrawer */
.cartDrawer { z-index: 100; position: fixed; top: 0; right: -100%; height: 100vh; transition: right 0.3s ease; width: 20rem; }
.cartDrawer.active { right: 0; transition: right 0.3s ease; }
.cartClose { height: var(--spc-8); position: absolute; top: 0; }
.cartClose > div { width: fit-content; }
.cartLists { overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; }
.cartLists::-webkit-scrollbar { display: none; }
.cartDrawer .cartItemTemplate { display: none; }
.cartDrawer .cartItemName p { display: none; }
.cartDrawer .cartItemDelete { display: none; }
.cartDrawer .cartItem:hover .cartItemDelete { display: flex; }
.cartDrawer .cartItemSelect { display: none; }
.cartDrawer .cartItem:hover .cartItemSelect { display: flex; }
.cartDrawer .cartItem:hover .cartItemPrice { display: none; }
.cartDrawer .cartItem .cartItemName span { width: 6rem; text-overflow: ellipsis; overflow: hidden; }
.cartPromo { background-position: 0% 40% !important; }
.cartPromoTier { position: relative; }
.cartPromoTier div { position: absolute; top: 27.8px; }
.cartPromoTier div { height: 4px; width: 4px; border: 2px solid var(--drk-1); border-radius: 100%; }
/**/
/* mainMenu */
.mainMenu { height: var(--spc-8); position: fixed; z-index: 100; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); }
.menuImage { width: var(--spc-8); }
.menuImage img { object-fit: contain; }
.menuActual > div { height: 100%; }
.profMenu { position: relative; }
.profMenu .profDrop { position: absolute; top: calc(-100% - (var(--spc-7) + 2px)); right: 0%; transition: all 0.33s; z-index: -1; }
.profMenu .profDrop { padding-bottom: var(--spc-2); border-bottom: 2px solid var(--red-5); }
.profMenu:hover .profDrop { top: 100%; }
.profMenu .profDrop > div { white-space: nowrap; }
.profMenu .profDrop > div a { transition: color 0.3s; }
.profMenu .profDrop > div:hover a { transition: color 0.3s; color: var(--drk-1); }
.cartMenu .cartCounter { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 1rem; height: 1rem; }
.notificationCounter { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 1rem; height: 1rem; }
.menu > li { border-bottom: 2px solid transparent; transition: all 0.33s; }
.menu > li > a { transition: all 0.33s; }
.menu > li > a > span { transition: all 0.33s; }
.menu > li:hover > .sub-menu { transform: translateY(0%); transition: all 0.33s; }
.menu > li:hover { border-color: var(--red-5); transition: all 0.33s; }
.menu > li:hover > a { color: var(--drk-1); transition: all 0.33s; }
.menu > li:hover > a > span { transform: rotateX(180deg); transition: all 0.33s; }
.menu > li > .sub-menu { position: absolute; transform: translateY(-150%); transition: all 0.33s; list-style: none; z-index: -1; }
.menu > li > .sub-menu { top: calc(100% - 2px); left: 0; width: 100vw; }
.menu > li > .sub-menu > li > .sub-menu { list-style-type: none; padding: 0; }
.profMenu:hover > div { transform: translateY(0%); transition: all 0.33s; }
.profMenu > div { position: absolute; transform: translateY(-150%); top: var(--spc-8); transition: all 0.33s; }
.profMenu > div { width: 100vw; right: calc(var(--spc-7) * -1); z-index: -1; }
#header-logo { max-width: 50px; }
/**/
/* tour */
.stepNavs span.disabled { opacity: 33%; }
.myPopover.right .myPopovercont { margin-left: calc(var(--spc-3)* -1); } .popover.right > .arrow:after { border-right-color: var(--red-7) !important; }
.myPopover.left .myPopovercont { margin-right: calc(var(--spc-3)* -1); } .popover.left > .arrow:after { border-left-color: var(--red-7) !important; }
.myPopover.top .myPopovercont { margin-bottom: calc(var(--spc-3)* -1); } .popover.top > .arrow:after { border-top-color: var(--red-7) !important; }
.myPopover.bottom .myPopovercont { margin-top: calc(var(--spc-3)* -1); } .popover.bottom > .arrow:after { border-bottom-color: var(--red-7) !important; }
/**/
/* misc */
.backTo { width: fit-content !important; transition: color 0.3s; }
.backTo:hover span { color: var(--drk-3); transition: color 0.3s; }
.loader { height: 4px; background: var(--drk-8); width: 100%; z-index: 999; position: fixed; }
.loaded { height: 4px; background: var(--red-5); width: 0%; transition: width 1s; }
.btn { font-family: Roboto; font-size: 0.875rem; transition: all 0.3s; line-height: normal; font-weight: 400; border-radius: 8px; column-gap: var(--spc-1); }
.btn { display: flex; box-sizing: border-box; flex-wrap: nowrap; align-items: center; }
.btn.hcent { justify-content: center; }
.btn:hover { cursor: pointer; }
.btn.und:hover > span { text-decoration: underline; }
.btn.auto { width: fit-content !important; }
[enabled="false"].btn { opacity: 33%; transition: opacity 0.3s; }
.btn.red-5-bg:not([enabled="false"]):hover { background: var(--red-3); transition: background 0.3s; }
.packBundles > div:not(:last-child) { display: none; }
/**/
/**/
/* Responsive */
.co-12 { width: calc(98px * 12 + (1.5rem * (12 - 1))); }
.co-11 { width: calc(98px * 11 + (1.5rem * (11 - 1))); }
.co-10 { width: calc(98px * 10 + (1.5rem * (10 - 1))); }
.co-09 { width: calc(98px * 9 + (1.5rem * (9 - 1))); }
.co-08 { width: calc(98px * 8 + (1.5rem * (8 - 1))); }
.co-07 { width: calc(98px * 7 + (1.5rem * (7 - 1))); }
.co-06 { width: calc(98px * 6 + (1.5rem * (6 - 1))); }
.co-05 { width: calc(98px * 5 + (1.5rem * (5 - 1))); }
.co-04 { width: calc(98px * 4 + (1.5rem * (4 - 1))); }
.co-03 { width: calc(98px * 3 + (1.5rem * (3 - 1))); }
.co-02 { width: calc(98px * 2 + (1.5rem * (2 - 1))); }
.co-01 { width: calc(98px * 1 + (1.5rem * (1 - 1))); }
/* Deprecated */
.col-12 { width: 100.0%; }
.col-11 { width: 91.66%; }
.col-10 { width: 83.33%; }
.col-09 { width: 75.00%; }
.col-08 { width: 66.66%; }
.col-07 { width: 58.33%; }
.col-06 { width: 50.00%; }
.col-05 { width: 41.66%; }
.col-04 { width: 33.33%; }
.col-03 { width: 25.00%; }
.col-02 { width: 16.66%; }
.col-01 { width: 08.33%; }
.clg-12 { width: calc((100% - (12 - 1) * 1rem) / 12); }
.clg-11 { width: calc((100% - (12 - 1) * 1rem) / 11); }
.clg-10 { width: calc((100% - (10 - 1) * 1rem) / 10); }
.clg-09 { width: calc((100% - (9 - 1) * 1rem) / 9); }
.clg-08 { width: calc((100% - (8 - 1) * 1rem) / 8); }
.clg-07 { width: calc((100% - (7 - 1) * 1rem) / 7); }
.clg-06 { width: calc((100% - (6 - 1) * 1rem) / 6); }
.clg-05 { width: calc((100% - (5 - 1) * 1rem) / 5); }
.clg-04 { width: calc((100% - (4 - 1) * 1rem) / 4); }
.clg-03 { width: calc((100% - (3 - 1) * 1rem) / 3); }
.clg-02 { width: calc((100% - (2 - 1) * 1rem) / 2); }
.clg-01 { width: calc((100% - (1 - 1) * 1rem) / 1); }
/**/
@media only screen and (min-width: 1536px)
{
html { font-size: 16px; }
.mwc { max-width: 1440px; column-gap: 1.5rem; }
}
@media only screen and (max-width: 1536px)
{
html { font-size: 16px; }
.mwc { max-width: 90vw; column-gap: 1.5rem; }
.co-12 { width: calc(((90vw - 16.5rem) / 12) * 12 + (1.5rem * (12 - 1))); }
.co-11 { width: calc(((90vw - 16.5rem) / 12) * 11 + (1.5rem * (11 - 1))); }
.co-10 { width: calc(((90vw - 16.5rem) / 12) * 10 + (1.5rem * (10 - 1))); }
.co-09 { width: calc(((90vw - 16.5rem) / 12) * 9 + (1.5rem * (9 - 1))); }
.co-08 { width: calc(((90vw - 16.5rem) / 12) * 8 + (1.5rem * (8 - 1))); }
.co-07 { width: calc(((90vw - 16.5rem) / 12) * 7 + (1.5rem * (7 - 1))); }
.co-06 { width: calc(((90vw - 16.5rem) / 12) * 6 + (1.5rem * (6 - 1))); }
.co-05 { width: calc(((90vw - 16.5rem) / 12) * 5 + (1.5rem * (5 - 1))); }
.co-04 { width: calc(((90vw - 16.5rem) / 12) * 4 + (1.5rem * (4 - 1))); }
.co-03 { width: calc(((90vw - 16.5rem) / 12) * 3 + (1.5rem * (3 - 1))); }
.co-02 { width: calc(((90vw - 16.5rem) / 12) * 2 + (1.5rem * (2 - 1))); }
.co-01 { width: calc(((90vw - 16.5rem) / 12) * 1 + (1.5rem * (1 - 1))); }
}
/**/