:root { --lay-col-opacity-hover: 0.7; --lay-col-opacity-disabled: 0.35; --fs-100: clamp(0.64rem, 0.64rem + 0vi, 0.64rem); --fs-200: clamp(0.8rem, 0.8rem + 0vi, 0.8rem); --fs-300: clamp(1rem, 1rem + 0vi, 1rem); --fs-400: clamp(1.25rem, 1.25rem + 0vi, 1.25rem); --fs-500: clamp(1.5625rem, 1.5625rem + 0vi, 1.5625rem); --fs-600: clamp(1.9531rem, 1.9531rem + 0vi, 1.9531rem); --fs-700: clamp(2.4414rem, 2.4414rem + 0vi, 2.4414rem); --fs-800: clamp(3.0518rem, 3.0518rem + 0vi, 3.0518rem); --fs-hero: clamp(2rem, 2rem + 3vi, 4rem); --fs-s: var(--fs-100); --fs-ms: var(--fs-200); --fs-m: var(--fs-300); --fs-l: var(--fs-400); --fs-xl: var(--fs-500); --col-text-50: hsl(263, 33%, 95%); --col-text-100: hsl(263, 33%, 90%); --col-text-200: hsl(263, 33%, 80%); --col-text-300: hsl(263, 33%, 70%); --col-text-400: hsl(263, 33%, 60%); --col-text-500: hsl(263, 33%, 50%); --col-text-600: hsl(263, 33%, 40%); --col-text-700: hsl(263, 33%, 30%); --col-text-800: hsl(263, 33%, 20%); --col-text-900: hsl(263, 33%, 10%); --col-text-950: hsl(263, 33%, 5%); --col-background-50: hsl(270, 33%, 55%); --col-background-100: hsl(268, 33%, 50%); --col-background-200: hsl(268, 33%, 45%); --col-background-300: hsl(268, 33%, 40%); --col-background-400: hsl(268, 33%, 35%); --col-background-500: hsl(268, 33%, 30%); --col-background-600: hsl(268, 33%, 25%); --col-background-700: hsl(268, 33%, 20%); --col-background-800: hsl(268, 33%, 15%); --col-background-900: hsl(268, 33%, 10%); --col-background-950: hsl(263, 33%, 5%); --col-background-910: hsl(263, 31%, 9%); --col-background-920: hsl(263, 31%, 8%); --col-background-930: hsl(263, 31%, 7%); --col-background-940: hsl(263, 31%, 6%); --col-primary-50: hsl(343, 92%, 95%); --col-primary-100: hsl(342, 96%, 90%); --col-primary-200: hsl(342, 94%, 80%); --col-primary-300: hsl(342, 95%, 70%); --col-primary-400: hsl(342, 95%, 60%); --col-primary-500: hsl(342, 95%, 50%); --col-primary-600: hsl(342, 95%, 40%); --col-primary-700: hsl(342, 95%, 30%); --col-primary-800: hsl(342, 94%, 20%); --col-primary-900: hsl(342, 96%, 10%); --col-primary-950: hsl(343, 92%, 5%); --col-secondary-50: hsl(170, 92%, 95%); --col-secondary-100: hsl(170, 92%, 90%); --col-secondary-200: hsl(170, 92%, 80%); --col-secondary-300: hsl(170, 92%, 70%); --col-secondary-400: hsl(170, 92%, 60%); --col-secondary-500: hsl(170, 92%, 50%); --col-secondary-600: hsl(170, 92%, 40%); --col-secondary-700: hsl(170, 92%, 30%); --col-secondary-800: hsl(170, 92%, 20%); --col-secondary-900: hsl(170, 92%, 10%); --col-secondary-950: hsl(172, 92%, 5%); --col-accent-50: hsl(316, 100%, 95%); --col-accent-100: hsl(316, 100%, 90%); --col-accent-200: hsl(316, 100%, 80%); --col-accent-300: hsl(316, 100%, 70%); --col-accent-400: hsl(316, 100%, 60%); --col-accent-500: hsl(316, 100%, 50%); --col-accent-600: hsl(316, 100%, 40%); --col-accent-700: hsl(316, 100%, 30%); --col-accent-800: hsl(316, 100%, 20%); --col-accent-900: hsl(316, 100%, 10%); --col-accent-950: hsl(316, 100%, 5%); --col-background-white-50: hsl(0, 0%, 100%); --col-background-white-100: hsl(0, 0%, 98%); --col-background-white-200: hsl(0, 0%, 96%); --col-background-white-300: hsl(0, 0%, 94%); --col-background-white-400: hsl(0, 0%, 92%); --col-background-white-500: hsl(0, 0%, 90%); --col-background-white-600: hsl(0, 0%, 88%); --col-background-white-700: hsl(0, 0%, 86%); --col-background-white-800: hsl(0, 0%, 84%); --col-background-white-900: hsl(0, 0%, 82%); --col-background-white-950: hsl(0, 0%, 80%); --col-background-bright-50: hsl(268, 35%, 97%); --col-background-bright-100: hsl(268, 35%, 94%); --col-background-bright-200: hsl(268, 35%, 91%); --col-background-bright-300: hsl(268, 35%, 88%); --col-background-bright-400: hsl(268, 35%, 85%); --col-background-bright-500: hsl(268, 35%, 82%); --col-background-bright-600: hsl(268, 35%, 79%); --col-background-bright-700: hsl(268, 35%, 76%); --col-background-bright-800: hsl(268, 35%, 73%); --col-background-bright-900: hsl(268, 35%, 71%); --col-background-bright-950: hsl(268, 35%, 68%); --col-red: #fc6161; --col-red-light: #ff6b6b; --col-red-dark: #dc5b5b; --col-red-very-dark: #ad4949; --col-orange: #ffa780; --col-orange-light: #ffbda3; --col-orange-dark: #ce5757; --col-yellow: #fcea72; --col-yellow-light: #fffd76; --col-yellow-dark: #b0af51; --col-lime: #4AFCE2; --col-lime-light: #80ffe6; --col-lime-dark: #39c9b3; --col-teal: #00D6FE; --col-teal-light: #80e9ff; --col-teal-dark: #03b3d5; --col-blue: #0083CB; --col-blue-light: #E5F3FA; --col-blue-dark: #016fa9; --col-blue-very-dark: #01537e; --col-purple: #9775BD; --col-purple-light: #c097f3; --col-purple-dark: #8766a2; --col-violet: #9775BD; --col-violet-light: #c097f3; --col-violet-dark: #8766a2; --col-pink: #ff88de; --col-pink-light: #fda6e3; --col-pink-dark: #d072b8; --col-grey: #B1A8B9; --col-grey-light: #d3c9dc; --col-grey-very-light: #ECE5F6; --col-grey-dark: #7e7986; --col-grey-very-dark: #5a5660; --col-white: #FFFFFF; --col-black: #121212; --col-green: #00806A; --col-green-light: #00c4a4; --col-green-dark: #015e4d; --col-brown: #8A3A28; --col-rose: #FF869D; --col-rose-light: #ff9cae; --col-rose-dark: #c06576; --col-vip: #ffe669; --col-admin: #0083CB; --col-male: #E5F3FA; --col-female: #ff88de; --col-diverse: #c097f3; --col-official: #0083CB; --col-official-dark: #01679f; --col-private: var(--col-teal-dark); --col-online: var(--col-green); --col-away: var(--col-blue-dark); --col-ok: var(--col-green); --col-warning: var(--col-orange); --col-error: var(--col-red); --lay-line-height: 1.5em; --lay-fw-standard: 400; --lay-fw-header: 700; --lay-fw-navigation: 500; --lay-fw-button: 500; --lay-fs-small: var(--fs-200); --lay-fs-standard: var(--fs-300); --lay-fs-big: var(--fs-400); --lay-fs-navigation: var(--fs-300); --lay-img-size-s: 24px; --lay-img-size-m: 48px; --lay-img-size-l: 72px; --lay-img-size-xl: 120px; --lay-img-size-xxl: 160px; --lay-img-size-xxxl: 240px; --lay-img-size-4xl: 320px; --lay-img-size-5xl: 500px; --lay-zindex-supernav: 500; --lay-zindex-modal: 1000; --lay-site-header-height: 4em; --lay-site-header-margin-bottom: 1em; --lay-site-nav-width: 16rem; --border-radius-checkbox: 4px; --border-radius-button: 8px; --border-radius-container: 12px; --border-radius-ribbon: 12px; --border-radius-pill: 9999px; --border-radius-round: 50%; --spacing-unit: 1em; --spc-gap: calc(0.5 * var(--spacing-unit)); --spc-gap-s: var(--spc-gap); --spc-gap-m: calc(2 * var(--spc-gap)); --spc-gap-l: calc(4 * var(--spc-gap)); --margin: calc(0.5 * var(--spacing-unit)); --margin-s: var(--margin); --margin-m: calc(2 * var(--margin)); --margin-l: calc(4 * var(--margin)); --padding: calc(0.25 * var(--spacing-unit)); --padding-s: calc(2 * var(--padding)); --padding-ms: calc(3 * var(--padding)); --padding-m: calc(4 * var(--padding)); --padding-l: calc(8 * var(--padding)); --padding-btn-v: var(--padding-ms); --padding-btn-h: var(--padding-m); --padding-btn: var(--padding-btn-v) var(--padding-btn-h); --padding-ribbon-v: var(--padding-s); --padding-ribbon-h: var(--padding-m); --padding-ribbon: var(--padding-ribbon-v) var(--padding-ribbon-h); --padding-panel-v: var(--padding-s); --padding-panel-h: var(--padding-m); --padding-panel: var(--padding-panel-v) var(--padding-panel-h); --padding-site-v: 0; --padding-site-h: var(--spacing-unit); --padding-site: var(--padding-site-v) var(--padding-site-h); --padding-site-content-v: var(--spacing-unit); --padding-site-content-h: 0; --padding-site-content: var(--padding-site-content-v) var(--padding-site-content-h); --padding-form-field-v: calc(0.5*var(--spacing-unit)); --padding-form-field-h: calc(1.0*var(--spacing-unit)); --padding-form-field: var(--padding-form-field-v) var(--padding-form-field-h); --padding-label-v: calc(0.5*var(--spacing-unit)); --padding-label-h: calc(1.0*var(--spacing-unit)); --padding-label: var(--padding-label-v) var(--padding-label-h); --grain-unit: 1em; --grain: calc(2.00 * var(--grain-unit)); --grain-100: calc(0.25 * var(--grain-unit)); --grain-200: calc(0.25 * var(--grain-unit)); --grain-300: calc(0.50 * var(--grain-unit)); --grain-400: calc(0.50 * var(--grain-unit)); --grain-500: calc(1.00 * var(--grain-unit)); --grain-600: calc(1.00 * var(--grain-unit)); --grain-700: calc(2.00 * var(--grain-unit)); --grain-800: calc(4.00 * var(--grain-unit)); --grain-900: calc(8.0 * var(--grain-unit)); --lay-col-dashboard-table-altrow-bg: var(--col-background-white-200) } .cc-theme-adaptive, .cc-theme-dark { --lay-col-site-text: var(--col-text-50); --lay-col-site-link: var(--col-accent-200); --lay-col-site-nav-text: var(--col-text-50); --lay-col-site-nav-symbol-text: var(--col-text-50); --lay-col-accent: var(--col-accent-200); --lay-col-accent-hover-bg: var(--col-accent-100); --lay-col-site-bg: var(--col-background-950); --lay-col-site-bg-75: hsl(from var(--col-background-950) h s l / 0.75); --lay-col-site-bg-modal: hsl(from var(--col-background-950) h s l / 0.50); --lay-col-widgetwrap-bg: rgba(0, 0, 0, 0.75); --lay-col-ribbon-text: var(--col-text-50); --lay-col-ribbon-bg: var(--col-background-900); --lay-col-panel-text: var(--col-text-50); --lay-col-panel-bg: var(--col-background-800); --lay-col-panel-bg-elevated: var(--col-background-700); --lay-col-panel-bg-selected: var(--col-background-100); --lay-col-button-text: var(--col-text-50); --lay-col-button-bg: var(--col-background-700); --lay-col-button-inactive-bg: var(--col-background-700); --lay-col-button-tonal-bg: var(--col-background-800); --lay-col-button-outline-border: var(--col-background-700); --lay-col-button-hover-bg: var(--col-background-600); --lay-col-button-focus-bg: var(--lay-col-button-hover-bg); --lay-col-button-enabled-bg: var(--col-background-600); --lay-col-button-color-text: var(--col-accent-800); --lay-col-button-color-bg: var(--col-accent-200); --lay-col-button-cta-text: var(--col-accent-800); --lay-col-button-cta-bg: var(--col-accent-200); --lay-col-input-text: var(--col-background-700); --lay-col-input-bg: var(--col-text-50); --lay-col-input-bg-hover: var(--col-text-100); --lay-col-input-border: var(--col-text-50); --lay-col-info-bg: var(--col-blue-light); --lay-col-success-bg: var(--col-green-light); --lay-col-ok-bg: var(--col-green-light); --lay-col-warning-bg: var(--col-orange-light); --lay-col-error-bg: var(--col-red-light); --lay-col-debug-bg: var(--lay-col-site-bg); --lay-col-dashboard-table-altrow-bg: var(--col-background-950) } .cc-theme-client::-webkit-scrollbar-track, .cc-theme-client select::-webkit-scrollbar-track, .cc-theme-client div::-webkit-scrollbar-track { background-color: var(--lay-col-panel-bg) } .cc-theme-client::-webkit-scrollbar, .cc-theme-client select::-webkit-scrollbar, .cc-theme-client div::-webkit-scrollbar { width: 16px; background-color: var(--lay-col-panel-bg) } .cc-theme-client::-webkit-scrollbar-thumb, .cc-theme-client select::-webkit-scrollbar-thumb, .cc-theme-client div::-webkit-scrollbar-thumb { border-radius: var(--border-radius-button); border: 4px solid var(--lay-col-panel-bg); background-color: var(--lay-col-button-hover-bg) } .cc-theme-light { --lay-col-site-text: var(--col-text-950); --lay-col-site-link: var(--col-accent-300); --lay-col-site-nav-text: var(--col-text-950); --lay-col-site-nav-symbol-text: var(--col-text-800); --lay-col-accent: var(--col-accent-200); --lay-col-accent-hover-bg: var(--col-accent-100); --lay-col-site-bg: var(--col-background-white-50); --lay-col-site-bg-75: hsl(from var(--col-background-white-50) h s l / 0.75); --lay-col-site-bg-modal: hsl(from var(--col-background-white-50) h s l / 0.80); --lay-col-widgetwrap-bg: rgba(255, 255, 255, 0.75); --lay-col-ribbon-text: var(--col-text-950); --lay-col-ribbon-bg: var(--col-background-white-100); --lay-col-panel-text: var(--col-text-950); --lay-col-panel-bg: var(--col-background-white-200); --lay-col-panel-bg-elevated: var(--col-background-white-500); --lay-col-panel-bg-selected: var(--col-background-white-950); --lay-col-button-text: var(--col-text-950); --lay-col-button-bg: var(--col-background-white-400); --lay-col-button-inactive-bg: var(--col-background-white-200); --lay-col-button-tonal-bg: var(--col-background-white-300); --lay-col-button-outline-border: var(--col-background-white-950); --lay-col-button-hover-bg: var(--col-background-white-100); --lay-col-button-focus-bg: var(--lay-col-button-hover-bg); --lay-col-button-enabled-bg: var(--col-accent-200); --lay-col-button-color-text: var(--col-accent-800); --lay-col-button-color-bg: var(--col-accent-200); --lay-col-button-cta-text: var(--col-accent-800); --lay-col-button-cta-bg: var(--col-accent-200); --lay-col-input-text: var(--col-text-950); --lay-col-input-bg: var(--col-background-white-50); --lay-col-input-bg-hover: var(--col-background-white-200); --lay-col-input-border: var(--col-background-white-500); --lay-col-info-bg: var(--col-blue-light); --lay-col-success-bg: var(--col-green-light); --lay-col-ok-bg: var(--col-green-light); --lay-col-warning-bg: var(--col-orange-light); --lay-col-error-bg: var(--col-red-light); --lay-col-debug-bg: var(--lay-col-site-bg) } .cc-theme-light .input--input, .cc-theme-light .textarea, .cc-theme-light .select { border-width: 2px; border-style: solid } @media(prefers-color-scheme: light) { .cc-theme-adaptive { --lay-col-site-text: var(--col-text-950); --lay-col-site-link: var(--col-accent-300); --lay-col-site-nav-text: var(--col-text-950); --lay-col-site-nav-symbol-text: var(--col-text-800); --lay-col-accent: var(--col-accent-200); --lay-col-accent-hover-bg: var(--col-accent-100); --lay-col-site-bg: var(--col-background-white-50); --lay-col-site-bg-75: hsl(from var(--col-background-white-50) h s l / 0.75); --lay-col-site-bg-modal: hsl(from var(--col-background-white-50) h s l / 0.80); --lay-col-ribbon-text: var(--col-text-950); --lay-col-ribbon-bg: var(--col-background-white-100); --lay-col-panel-text: var(--col-text-950); --lay-col-panel-bg: var(--col-background-white-200); --lay-col-panel-bg-elevated: var(--col-background-white-500); --lay-col-panel-bg-selected: var(--col-background-white-950); --lay-col-button-text: var(--col-text-950); --lay-col-button-bg: var(--col-background-white-400); --lay-col-button-inactive-bg: var(--col-background-white-200); --lay-col-button-tonal-bg: var(--col-background-white-300); --lay-col-button-outline-border: var(--col-background-white-950); --lay-col-button-hover-bg: var(--col-background-white-100); --lay-col-button-focus-bg: var(--lay-col-button-hover-bg); --lay-col-button-enabled-bg: var(--col-accent-200); --lay-col-button-color-text: var(--col-accent-800); --lay-col-button-color-bg: var(--col-accent-200); --lay-col-button-cta-text: var(--col-accent-800); --lay-col-button-cta-bg: var(--col-accent-200); --lay-col-input-text: var(--col-text-950); --lay-col-input-bg: var(--col-background-white-50); --lay-col-input-bg-hover: var(--col-background-white-200); --lay-col-input-border: var(--col-background-white-500); --lay-col-widgetwrap-bg: rgba(255, 255, 255, 0.75); --lay-col-info-bg: var(--col-blue-light); --lay-col-success-bg: var(--col-green-light); --lay-col-ok-bg: var(--col-green-light); --lay-col-warning-bg: var(--col-orange-light); --lay-col-error-bg: var(--col-red-light); --lay-col-debug-bg: var(--lay-col-site-bg); --lay-col-dashboard-table-altrow-bg: var(--col-background-white-300) } .cc-theme-adaptive .input--input, .cc-theme-adaptive .textarea, .cc-theme-adaptive .select { border-width: 2px; border-style: solid } } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html { line-height: 1.15; -webkit-text-size-adjust: 100% } body { margin: 0 } main { display: block } h1 { font-size: 2em; margin: .67em 0 } hr { box-sizing: content-box; height: 0; overflow: visible } pre { font-family: monospace, monospace; font-size: 1em } a { background-color: transparent } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted } b, strong { font-weight: bolder } code, kbd, samp { font-family: monospace, monospace; font-size: 1em } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -0.25em } sup { top: -0.5em } img { border-style: none } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0 } button, input { overflow: visible } button, select { text-transform: none } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button } button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0 } button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText } fieldset { padding: .35em .75em .625em } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal } progress { vertical-align: baseline } textarea { overflow: auto } [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0 } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto } [type=search] { -webkit-appearance: textfield; outline-offset: -2px } [type=search]::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } details { display: block } summary { display: list-item } template { display: none } [hidden] { display: none } * { margin: 0; padding: 0 } a { color: inherit } * { margin: 0; padding: 0 } button { border: 0 } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0 } li { list-style: none } hr { clear: both; width: 100%; height: 0; border: 1px solid var(--lay-col-button-bg) } hr+hr { display: none } img { font-style: italic; background-repeat: no-repeat; background-size: cover; height: auto; max-width: 100%; vertical-align: middle; shape-margin: 1rem } html, body { position: relative; min-width: 20em; min-height: 100%; color: var(--lay-col-site-text); letter-spacing: .02em; background-color: var(--lay-col-site-bg); text-rendering: optimizeSpeed; word-break: break-word } span { display: inline-block } a { color: var(--lay-col-site-link); -ms-touch-action: none; text-decoration: none } .no-touch a:hover { text-decoration: underline } img { display: block } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } *:focus { outline: none } .grid { background: var(--lay-col-debug-bg) } .Xgrid.grid_noclip { overflow: visible } .block-xl { background: var(--lay-col-debug-bg) } .block-l { background: var(--lay-col-debug-bg) } .block, .block-m { background: var(--lay-col-debug-bg) } .block-s { background: var(--lay-col-debug-bg) } .block-s2 { background: var(--lay-col-debug-bg) } .block-s3 { background: var(--lay-col-debug-bg) } .block-s4 { background: var(--lay-col-debug-bg) } .row { background: var(--lay-col-debug-bg) } .row_left>.col:last-child { background: var(--lay-col-debug-bg) } .wrap, .crop { position: relative } .pad_none { padding: 0 !important } .crop { overflow: hidden } .equal { background: var(--lay-col-debug-bg) } .equal>.col { background: var(--lay-col-debug-bg) } .col, .panel { background: var(--lay-col-debug-bg) } .col { background: var(--lay-col-debug-bg) } .row_auto, .col_auto { background: var(--lay-col-debug-bg) } .grid_s2 { background: var(--lay-col-debug-bg) } .lobo-s3>*+* { margin-top: var(--grain-300) } .lobo-s2>*+* { margin-top: var(--grain-400) } .lobo-s>*+* { margin-top: var(--grain-500) } .lobo-m>*+* { margin-top: var(--grain-600) } .lobo-l>*+* { margin-top: var(--grain-700) } .lobo-xl>*+* { margin-top: var(--grain-800) } .lobo-m h1 h2 h3 h4 h5 h6>*+* { margin-top: var(--grain-600); margin-bottom: var(--grain-500) } .lobo-x-s4>*+* { margin-left: var(--grain-200) } .lobo-x-s3>*+* { margin-left: var(--grain-300) } .lobo-x-s>*+* { margin-left: var(--grain-500) } .lobo-x-m>*+* { margin-left: var(--grain-600) } .lobo-x-l>*+* { margin-left: var(--grain-700) } .lobo-x-xl>*+* { margin-left: var(--grain-800) } .flag { display: inline-block; margin-right: var(--grain-400) } .hidden { display: none !important } .single-line { white-space: nowrap } .spacer-xxl { background: var(--lay-col-debug-bg); clear: both } .spacer-xl { background: var(--lay-col-debug-bg); clear: both } .spacer-l { background: var(--lay-col-debug-bg); clear: both } .spacer-m { background: var(--lay-col-debug-bg); clear: both } .spacer-s { background: var(--lay-col-debug-bg); clear: both } .spacer-s2 { background: var(--lay-col-debug-bg); clear: both } .spacer-s3 { background: var(--lay-col-debug-bg); clear: both } .spacer-s4 { background: var(--lay-col-debug-bg); clear: both } .spacer-s5 { background: var(--lay-col-debug-bg); clear: both } .clip, .clipping { overflow: hidden !important } .float-left { float: left !important } .float-right { float: right !important } .centered { float: none; max-width: 65em; margin-left: auto; margin-right: auto } .text-left { text-align: left !important } .text-right { text-align: right !important } .text-centered-m-left, .text-centered { text-align: center !important } @media screen and (min-width: 30em) { .Xtext-centered-m-left { text-align: left !important } .Xtext-centered-m-right { text-align: right !important } } .v-align_top { background: var(--lay-col-debug-bg); vertical-align: top } .no-word-wrap { white-space: nowrap } .Xoverlay { background: var(--lay-col-debug-bg); position: absolute; overflow: hidden; bottom: 0; width: 100%; padding: var(--grain-200) var(--grain-300); background: var(--lay-col-site-bg); color: var(--lay-col-site-text) } .render_hover-link { cursor: pointer; color: var(--lay-col-site-text) } .no-touch .render_hover-link:hover { text-decoration: underline } html { font-size: 1em } body { font-family: system-ui, sans-serif; font-weight: var(--lay-fw-standard); font-size: var(--lay-fs-standard); color: var(--lay-col-site-text); line-height: 1.6 } html, body { line-height: var(--lay-line-height) } h1, h2, .font-xl { overflow: hidden; font-family: system-ui, sans-serif; line-height: 1.2; margin: 0 } h3, h4, h5, h6, .font-l { font-family: system-ui, sans-serif; line-height: 1.4; text-rendering: optimizelegibility } h1, h2, h3, h4, h5, h6 { font-weight: var(--lay-fw-header) } h1, .font-xxl { font-size: var(--fs-800) } h2, .font-xl { font-size: var(--fs-600) } h3 { font-size: var(--fs-500) } h4, .font-l { font-size: var(--fs-400) } h5 { font-size: var(--fs-300) } h6 { font-size: var(--fs-200) } .font-m { font-size: var(--fs-100) } .font-ms { font-size: var(--fs-100) } .font-s { font-size: var(--fs-100) } .font_hero { overflow: hidden; font-size: var(--fs-hero); line-height: .92; letter-spacing: -0.01em; font-weight: 900; margin-bottom: .2em } small { font-size: var(--fs-100) } strong { font-weight: 600 } em { margin-right: var(--grain-200); font-style: italic } .icon { display: inline-block } .icon+.icon { margin-left: var(--grain-200) } .icon-refresh { height: .94em } .icon_left { margin-right: var(--margin-s) } .icon_right { margin-left: var(--margin-s) } .icon_spin { -webkit-animation: icon-spin 2s infinite linear; animation: icon-spin 2s infinite linear } @-webkit-keyframes icon-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } @keyframes icon-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } .dashboard-tp--toggle-button .checkbox--label:before { transition: border .2s ease, background-color .2s ease, color .2s ease, text-shadow .2s ease, top .2s ease } .dashboard-tp--toggle-button .checkbox--label:before, .browse-button, .btn, .dialog-buttons button { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: text; -ms-user-select: none; user-select: none } .ajax-notice { position: relative; padding: var(--padding-btn); padding-left: var(--grain-700); padding-right: 0; margin-left: var(--grain-400) } .ajax-notice .icon { position: absolute; left: var(--grain-300); width: 1em; text-align: center } .ajax-notice_info .icon { color: var(--col-blue) } .ajax-notice_success .icon { color: var(--col-green) } .ajax-notice_warning .icon { color: var(--col-orange) } .ajax-notice_error .icon { color: var(--col-red) } .btn, .dialog-buttons button { position: relative; padding: var(--padding-btn); border: none; border-radius: var(--border-radius-button); vertical-align: top; text-align: center; background: var(--lay-col-button-bg); color: var(--lay-col-button-text); cursor: pointer; font-weight: var(--lay-fw-button); line-height: 1em; width: fit-content; display: inline-flex; flex-direction: row; justify-content: space-around; align-items: center; white-space: nowrap; overflow: hidden; -ms-touch-action: none } .btn.outlined, .dialog-buttons button.outlined { background: transparent; outline: 1px solid var(--lay-col-button-outline-border) } .btn.text, .dialog-buttons button.text { background: transparent; border: 1px solid transparent } .btn.blind, .dialog-buttons button.blind { padding: 0; width: 2em; height: 2em; border: 2px solid var(--lay-col-input-bg); color: transparent } .btn.tonal, .dialog-buttons button.tonal { background: var(--lay-col-button-tonal-bg); border: none } .btn.filled, .dialog-buttons button.filled { background: var(--lay-col-button-bg); border: none } .btn.cta, .dialog-buttons button.cta { background: var(--lay-col-button-cta-bg); color: var(--lay-col-button-cta-text) } .btn.color, .dialog-buttons button.color { background: var(--lay-col-button-color-bg); color: var(--lay-col-button-color-text) } .btn.paintpot, .dialog-buttons button.paintpot { padding: 0; width: 2em; height: 2em; border: 2px solid var(--lay-col-input-bg) } .btn.paintpot-reset:after, .dialog-buttons button.paintpot-reset:after { content: "✖"; color: var(--lay-col-button-text) } .btn.paintpot.selected:after, .dialog-buttons button.paintpot.selected:after { content: "⬤" } .btn.round, .dialog-buttons button.round { padding: .8em; border-radius: var(--border-radius-round) } .btn.selected:not(.paintpot), .dialog-buttons button.selected:not(.paintpot), .btn.enabled, .dialog-buttons button.enabled { background: var(--lay-col-button-enabled-bg); color: var(--lay-col-button-text) } .btn.disabled, .dialog-buttons button.disabled, .btn_disabled { opacity: var(--lay-col-opacity-disabled); pointer-events: none } .btn.btn_async, .dialog-buttons button.btn_async { pointer-events: none } .btn.btn_async:before, .dialog-buttons button.btn_async:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--lay-col-button-bg); opacity: var(--lay-col-opacity-disabled) } .btn.btn_async:after, .dialog-buttons button.btn_async:after { position: absolute; display: flex; align-items: center; justify-content: center; font-family: "clubcooee" !important; content: ""; color: var(--lay-col-button-text); -webkit-animation: icon-spin 2s infinite linear; animation: icon-spin 2s infinite linear } .btn a, .dialog-buttons button a { background: var(--lay-col-button-bg); color: var(--lay-col-button-text) } .btn_w100 { display: block; width: 100% } .btn_small { font-size: var(--fs-s) } .btn_big { font-size: var(--fs-l); font-weight: var(--lay-fw-button) } .btn_top-left { position: absolute; top: var(--grain-300); left: var(--grain-300) } .btn_top-right { position: absolute; top: var(--grain-300); right: var(--grain-300) } .btn_bottom-right { position: absolute; bottom: var(--grain-300); right: var(--grain-300) } .btn_disabled:active { text-decoration: none; cursor: default } .btn_count { position: absolute; font-size: var(--fs-100); display: flex; right: 0; bottom: 0; align-items: flex-end; justify-content: center; padding: 0 .5em; border-radius: var(--border-radius-button); background: var(--lay-col-input-bg-hover); color: var(--lay-col-input-text); height: min-content } .button-group { display: flex; flex-direction: row; gap: var(--grain-300) } .text-btn { display: inline-block; padding: var(--padding-btn); font-weight: var(--lay-fw-button); line-height: 1.2em; justify-content: center; text-decoration: none; text-align: center; vertical-align: top; align-items: center; background: transparent; color: var(--lay-col-button-text); cursor: pointer } .float-right .text-btn { background: #adff2f } @media(hover: hover) { .btn:hover, .dialog-buttons button:hover { opacity: var(--lay-col-opacity-hover) } .text-btn:hover { text-decoration: none; cursor: pointer; color: var(--lay-col-site-link) } .btn_disabled:hover { cursor: default } a:hover.btn, a:hover.text-btn { text-decoration: none } } strong { display: inline !important } .cc-lobo-y-100>*+* { margin-top: .4rem } .cc-lobo-y-200>*+* { margin-top: .6rem } .cc-lobo-y-300>*+* { margin-top: .8rem } .cc-lobo-y-400>*+* { margin-top: 1rem } .cc-lobo-y-500>*+* { margin-top: 2rem } .cc-lobo-y-600>*+* { margin-top: 4rem } .cc-lobo-y-700>*+* { margin-top: 8rem } .cc-lobo-y-800>*+* { margin-top: 16rem } .cc-lobo-y-900>*+* { margin-top: 32rem } .cc-main-with-sidebar { display: flex; flex-wrap: wrap; align-items: start; gap: 1rem } .cc-main-with-sidebar>:first-child { flex-basis: 500px; flex-grow: 9999 } .cc-main-with-sidebar>:last-child { flex-basis: 300px; flex-grow: 1 } dl { display: grid; grid-gap: .2em 1em; grid-template-columns: max-content } dt { font-weight: bold } dd { margin: 0; grid-column-start: 2 } .cc-text-oneline { text-overflow: ellipsis; overflow: hidden; white-space: nowrap } .cc-alert { display: none; position: fixed; z-index: 10000; background: rgba(0, 0, 0, .5); backdrop-filter: blur(8px); top: 0; left: 0; right: 0; bottom: 0; padding: 1em } .cc-alert-wrap { display: block; width: 75%; max-width: 40rem; margin: 15% auto 0 auto } .cc-arrange-stacked { display: flex; flex-direction: column; box-sizing: border-box; gap: .5em; margin-left: auto; margin-right: auto } .cc-arrange-cluster { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center } .cc-arrange-cluster-space-around { display: flex; flex-wrap: wrap; justify-content: space-around } .cc-arrange-cluster-space-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5em } .cc-arrange-cluster-centered { display: flex; flex-wrap: wrap; gap: .5em; align-items: center } .cc-arrange-auto-grid { --min-column-size: 7rem; --max-column-size: 1fr; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(var(--min-column-size), 100%), var(--max-column-size))) } .cc-arrange-auto-grid-xxs { --min-column-size: 4rem } .cc-arrange-auto-grid-xs { --min-column-size: 5rem } .cc-arrange-auto-grid-s { --min-column-size: 6rem } .cc-arrange-auto-grid-m { --min-column-size: 7rem } .cc-arrange-auto-grid-l { --min-column-size: 8rem } .cc-arrange-auto-grid-xl { --min-column-size: 10rem } .cc-arrange-auto-grid-xxl { --min-column-size: 14rem } .cc-arrange-auto-grid-xxxl { --min-column-size: 18rem } .cc-arrange-flexible-grid { display: flex; flex-wrap: wrap; gap: 1rem } .cc-arrange-flexible-grid>* { flex: 1 } .cc-arrange-reel { --gap: 1rem; display: grid; gap: var(--gap); grid-auto-flow: column; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-padding: var(--gap) } .cc-arrange-reel>* { scroll-snap-align: start } .cc-arrange-flex-spread { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: .5em } .cc-arrange-flex-spread-v { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: .5em } .cc-arrange-flex-group { display: flex; flex-wrap: wrap; gap: .25rem } .cc-arrange-flex-group>* { min-width: fit-content; flex: 1 } .cc-arrange-grid-01 { display: grid; grid-template-columns: repeat(1, 1fr); overflow: hidden; gap: .5em } .cc-arrange-grid-02 { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; gap: .5em } .cc-arrange-grid-03 { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; gap: .5em } .cc-arrange-grid-04 { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; gap: .5em } .cc-arrange-grid-05 { display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; gap: .5em } .cc-arrange-grid-06 { display: grid; grid-template-columns: repeat(6, 1fr); overflow: hidden; gap: .5em } .cc-arrange-grid-07 { display: grid; grid-template-columns: repeat(7, 1fr); overflow: hidden; gap: .5em } .cc-arrange-grid-08 { display: grid; grid-template-columns: repeat(8, 1fr); overflow: hidden; gap: .5em } .cc-arrange-grid-09 { display: grid; grid-template-columns: repeat(9, 1fr); overflow: hidden; gap: .5em } .cc-arrange-grid-10 { display: grid; grid-template-columns: repeat(10, 1fr); overflow: hidden; gap: .5em } .cc-arrange-grid-11 { display: grid; grid-template-columns: repeat(11, 1fr); overflow: hidden; gap: .5em } .cc-arrange-grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); overflow: hidden; gap: .5em } .cc-arrange-grid-13 { display: grid; grid-template-columns: repeat(13, 1fr); overflow: hidden; gap: .5em } .cc-arrange-grid-14 { display: grid; grid-template-columns: repeat(14, 1fr); overflow: hidden; gap: .5em } .cc-arrange-grid-15 { display: grid; grid-template-columns: repeat(15, 1fr); overflow: hidden; gap: .5em } .cc-arrange-grid-16 { display: grid; grid-template-columns: repeat(16, 1fr); overflow: hidden; gap: .5em } .cc-arrange-noti { visibility: hidden; position: fixed; z-index: var(--lay-zindex-modal); max-width: 60rem; margin: auto; bottom: 1rem; left: 1rem; right: 1rem } .cc-arrange-noti.show { visibility: visible; animation: cc-arrange-noti-show .5s } .cc-arrange-noti.hide { animation: cc-arrange-noti-hide .5s } @keyframes cc-arrange-noti-hide { 0% { opacity: 1 } 100% { opacity: 0 } } @keyframes cc-arrange-noti-show { 0% { opacity: 0 } 100% { opacity: 1 } } .cc-centered { margin-left: auto; margin-right: auto; text-align: center; align-items: center; justify-content: center } .cc-move-tr { position: absolute; margin: 0; top: 0; right: 0 } .cc-move-tl { position: absolute; margin: 0; top: 0; left: 0 } .cc-move-br { position: absolute; margin: 0; bottom: 0; right: 0 } .cc-move-bl { position: absolute; margin: 0; bottom: 0; left: 0 } .cc-pad_none { padding: 0 !important } .cc-standout-y { margin-top: 4rem; margin-bottom: 4rem } .cc-badge--image-wrap { position: relative; width: 64px; height: 64px; margin: 0 auto } .cc-badge--image-wrap-single { position: relative; width: 128px; height: 128px; margin-inline: auto; margin-top: 0; margin-bottom: .5em } .cc-badge-icon--circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; height: 70%; border-radius: var(--border-radius-round); background: var(--col-white) } .cc-badge-icon--icon, .cc-badge-icon--symbol { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; font-size: 28px } .cc-badge-icon--back { position: absolute; width: 71%; height: 100%; margin: auto; border-radius: 20%; background: #bbb } .cc-badge-icon--back:before, .cc-badge-icon--back:after { content: ""; position: absolute; width: 100%; height: 100%; margin: auto; border-radius: inherit; background: inherit } .cc-badge-icon--back:before { transform: rotate(60deg) } .cc-badge-icon--back:after { transform: rotate(-60deg) } .cc-badge-icon_red { color: var(--col-red) } .cc-badge-icon_red .cc-badge-icon--back { background: linear-gradient(to bottom right, var(--col-red-light) 0%, var(--col-red-dark) 100%) } .cc-badge-icon_orange { color: var(--col-orange) } .cc-badge-icon_orange .cc-badge-icon--back { background: linear-gradient(to bottom right, var(--col-orange-light) 0%, var(--col-orange-dark) 100%) } .cc-badge-icon_yellow { color: var(--col-yellow) } .cc-badge-icon_yellow .cc-badge-icon--back { background: linear-gradient(to bottom right, var(--col-yellow-light) 0%, var(--col-yellow-dark) 100%) } .cc-badge-icon_green { color: var(--col-green) } .cc-badge-icon_green .cc-badge-icon--back { background: linear-gradient(to bottom right, var(--col-green-light) 0%, var(--col-green-dark) 100%) } .cc-badge-icon_teal { color: var(--col-teal) } .cc-badge-icon_teal .cc-badge-icon--back { background: linear-gradient(to bottom right, var(--col-teal-light) 0%, var(--col-teal-dark) 100%) } .cc-badge-icon_blue { color: var(--col-blue) } .cc-badge-icon_blue .cc-badge-icon--back { background: linear-gradient(to bottom right, var(--col-blue-light) 0%, var(--col-blue-dark) 100%) } .cc-badge-icon_violet { color: var(--col-violet) } .cc-badge-icon_violet .cc-badge-icon--back { background: linear-gradient(to bottom right, var(--col-violet-light) 0%, var(--col-violet-dark) 100%) } .cc-badge-icon_purple { color: var(--col-purple) } .cc-badge-icon_purple .cc-badge-icon--back { background: linear-gradient(to bottom right, var(--col-purple-light) 0%, var(--col-purple-dark) 100%) } .cc-badge-icon_pink { color: var(--col-pink) } .cc-badge-icon_pink .cc-badge-icon--back { background: linear-gradient(to bottom right, var(--col-pink-light) 0%, var(--col-pink-dark) 100%) } .cc-badge-icon--stars { position: absolute; bottom: -0.4em; font-size: 20px; height: 40%; overflow-wrap: normal; display: flex; align-items: center; flex-direction: row; color: var(--col-white); -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--col-black) } .cc-badge-icon--stars_gold .icon-star { color: var(--col-vip) } .cc-badge--title { margin: 0; text-align: center; text-transform: uppercase; font-weight: 900; color: var(--lay-col-site-text) } .cc-badge--status { display: flex; flex-flow: row nowrap; justify-content: space-between } .cc-badge--image-wrap-single .cc-badge-icon--symbol { font-size: 60px } .cc-badge--image-wrap-single .cc-badge-icon--stars { font-size: 38px } .cc-card-row-1x { display: grid; align-items: flex-end; grid-template-columns: 1fr; justify-content: space-between; gap: 10px } .cc-card-row-3x { display: grid; align-items: flex-end; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); justify-content: space-between; gap: 10px } .cc-card-row-4x { display: grid; align-items: flex-end; grid-template-columns: repeat(4, 24%); justify-content: space-between; grid-row-gap: 20px } .cc-card { padding: calc(2.0 * var(--grain-400)) var(--grain-400); border-radius: var(--border-radius-container); background-color: var(--lay-col-ribbon-bg) } .cc-card:hover { background-color: var(--lay-col-button-hover-bg) } .cc-card>img:first-child { border-radius: var(--border-radius-container); margin: 0 auto 1em auto; max-width: 80%; min-height: 70%; height: auto } .cc-card h4, .card h5, .card h6 { display: grid; grid-template-columns: 1fr auto; align-items: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center } .cc-card p { color: var(--lay-col-ribbon-text); line-height: 1.5 } .cc-card04 { --padding: 1rem; display: flex; flex-direction: column; overflow: hidden; background: var(--lay-col-ribbon-bg); color: var(--lay-col-ribbon-text); border-radius: var(--border-radius-container) } .cc-card04:hover { cursor: pointer } .cc-card04.selectable { border: 3px solid transparent } .cc-card04.selected { border: 3px solid var(--lay-col-panel-bg-selected) } .cc-card04-image, .cc-card04-media { position: relative; flex-shrink: 0; align-items: center; justify-content: center; padding-bottom: 100%; background: var(--lay-col-panel-bg); border-radius: var(--border-radius-container) } .cc-card04-image, .cc-card04-media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; padding: calc(0.5 * var(--padding)); border-radius: var(--border-radius-container) } .cc-card04-image_contain img, .cc-card04-media_contain img { object-fit: contain } .cc-card04-body { display: flex; flex-direction: column; gap: .5rem; padding: calc(1.0 * var(--padding)) } .cc-card04-head { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--lay-fs-standard); font-weight: var(--lay-fw-header) } .cc-card04-subhead { font-size: var(--lay-fs-small) } .cc-card04-support { flex: 1; max-height: 5rem; font-size: var(--lay-fs-standard) } .cc-card04-button, .cc-card04-action, .cc-card04-footer { display: flex; align-items: center; justify-content: space-between; font-size: var(--lay-fs-standard) } @media(hover: hover) { a:hover.card04-clickable { text-decoration: none } } .cc-effects-wobble { --iterations: 3; animation: cc-keyframes-wobble 1s ease infinite; animation-iteration-count: var(--iterations) } @keyframes cc-keyframes-wobble { 0%, 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% } 15% { -webkit-transform: translateX(-16px) rotate(-10deg); transform: translateX(-16px) rotate(-10deg) } 30% { -webkit-transform: translateX(calc(16px / 2)) rotate(10deg); transform: translateX(calc(16px / 2)) rotate(10deg) } 45% { -webkit-transform: translateX(calc(-16px / 2)) rotate(calc(-10deg / 1.8)); transform: translateX(calc(-16px / 2)) rotate(calc(-10deg / 1.8)) } 60% { -webkit-transform: translateX(calc(16px / 3.3)) rotate(calc(10deg / 3)); transform: translateX(calc(16px / 3.3)) rotate(calc(10deg / 3)) } 75% { -webkit-transform: translateX(calc(-16px / 5.5)) rotate(calc(-10deg / 5)); transform: translateX(calc(-16px / 5.5)) rotate(calc(-10deg / 5)) } } .cc-empty { display: flex; flex-direction: column; box-sizing: border-box; gap: 3em; justify-content: center; align-items: center; padding: 6rem 0 } .cc-empty .empty-icon { font-size: var(--fs-hero); line-height: 1.2em; opacity: .8 } .cc-empty .empty-text { font-size: var(--fs-600); line-height: 1.2em; text-align: center; opacity: .8 } .cc-hero-video { position: absolute; z-index: -2; min-width: 100%; min-height: 100%; max-height: 100% } .cc-hero-video-overlay { position: absolute; z-index: -1; min-width: 100%; min-height: 100%; background: var(--lay-col-site-bg-75) } .cc-hero-v { display: flex; flex-direction: column; box-sizing: border-box; max-width: 54rem; gap: 1em; margin-left: auto; margin-right: auto } .cc-hero-h { --min-column-size: 22rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 1fr)); margin-left: auto; margin-right: auto; padding: 0 .5rem } .cc-hero-h-media { --min-column-size: 22rem; max-width: var(--min-column-size) } .cc-hero-h-content { margin-left: auto; margin-right: auto; text-align: center; align-items: center; justify-content: center; overflow: hidden } @media(min-width: 768px) { .cc-hero-h-content { margin-inline: 0; text-align: left; align-items: start; justify-content: left; overflow: hidden } .cc-hero-h-swap { order: -1 } } .cc-img { position: relative } .cc-img_s { width: var(--lay-img-size-s) } .cc-img_m { width: var(--lay-img-size-m) } .cc-img_l { width: var(--lay-img-size-l) } .cc-img_xl { width: var(--lay-img-size-xl) } .cc-img_xxl { width: var(--lay-img-size-xxl) } .cc-img_xxxl { width: var(--lay-img-size-xxxl) } .cc-img_4xl { width: var(--lay-img-size-4xl) } .cc-img_5xl { width: var(--lay-img-size-5xl) } .cc-img_100 { width: 100% } .cc-img_80 { width: 80% } .cc-img_banner { object-fit: cover; width: 100%; height: 30rem } .cc-img_fill { position: absolute; object-fit: cover; width: 100%; height: 100% } .cc-img_rounded { border-radius: var(--border-radius-container) } .cc-img_appstore_qr { position: fixed; bottom: 1rem; right: 1rem; background-image: url(//cdn.clubcooee.com/img/home05/clubcooee-appstore-af-qr-01.svg); width: 8rem; height: 8rem; z-index: 1000; background-size: contain } .cc-lightbox { display: none; position: fixed; z-index: 10000; background: rgba(0, 0, 0, .5); backdrop-filter: blur(8px); top: 0; left: 0; right: 0; bottom: 0; padding: 1em } .cc-lightbox:target { display: block } .cc-lightbox span { display: block; width: 75%; height: 100%; margin-inline: auto; background-position: center; background-repeat: no-repeat; background-size: contain } .cc-looks-ribbon, .cc-looks-panel { border-radius: var(--border-radius-ribbon) } .cc-looks-ribbon { overflow: hidden; padding: var(--padding-ribbon); background: var(--lay-col-ribbon-bg); color: var(--lay-col-ribbon-text) } a.ribbon-clickable { text-decoration: none } .cc-looks-panel { padding: var(--padding-panel); background-color: var(--lay-col-panel-bg); color: var(--lay-col-panel-text); font-weight: var(--lay-fw-button) } .cc-looks-nopad { padding: 0 } .cc-looks-centered { padding: var(--margin-m) } .cc-looks-panel-naked { overflow: hidden; padding: 0; border-radius: var(--border-radius-ribbon); color: var(--lay-col-panel-text); background-color: var(--lay-col-panel-bg) } .cc-looks-panel-center { padding: var(--margin-m); border-radius: var(--border-radius-ribbon); color: var(--lay-col-panel-text); background-color: var(--lay-col-panel-bg) } .panel_info { outline: 3px solid var(--lay-col-info-bg); outline-offset: -3px } .panel_success { outline: 3px solid var(--lay-col-success-bg); outline-offset: -3px } .panel_warning { outline: 3px solid var(--lay-col-warning-bg); outline-offset: -3px } .panel_error { outline: 3px solid var(--lay-col-error-bg); outline-offset: -3px } .panel_admin { outline: 3px solid var(--col-admin); outline-offset: -3px } .panel_vip { outline: 3px solid var(--col-vip); outline-offset: -3px } .panel_popup { outline: 3px solid var(--lay-col-info-bg); outline-offset: -3px } @media screen and (max-width: 61rem) { .cc-looks-ribbon { padding-inline: calc(0.5*var(--padding-ribbon-h)) } .cc-looks-panel { padding-inline: calc(0.5*var(--padding-panel-h)) } } .cc-looks-pale { opacity: .7 } .cc-looks-pale-100 { opacity: .9 } .cc-looks-pale-200 { opacity: .8 } .cc-looks-pale-300 { opacity: .7 } .cc-looks-pale-400 { opacity: .6 } .cc-looks-pale-500 { opacity: .5 } .cc-pill { background: #ff0 } .cc-looks-pill { font-size: var(--lay-fs-small); background-color: var(--lay-col-button-bg); color: var(--lay-col-button-text); height: fit-content; margin: 0 .1em 0 0; border-radius: 1em; line-height: 1em; padding: .25em .5em; display: inline-flex; justify-content: center; align-items: center; text-align: center; white-space: nowrap } .cc-looks-pill-interactive { font-size: var(--lay-fs-navigation); background-color: var(--lay-col-button-bg); color: var(--lay-col-button-text); height: fit-content; margin: 0 .1em 0 0; border-radius: 1em; line-height: 1em; padding: .5em 1em; display: inline-flex; justify-content: center; align-items: center; text-align: center; white-space: nowrap } .cc-looks-pill-interactive_selected { background-color: var(--lay-col-button-text); color: var(--lay-col-button-bg) } .cc-looks-pill-interactive span { max-width: 8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .cc-looks-pill img { display: inline-block; max-height: 1em; margin-right: var(--margin-s) } .cc-effect-wobble { animation: wobble 1s ease infinite; animation-iteration-count: 5 } @keyframes wobble { 0%, 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% } 15% { -webkit-transform: translateX(-16px) rotate(-10deg); transform: translateX(-16px) rotate(-10deg) } 30% { -webkit-transform: translateX(calc(16px / 2)) rotate(10deg); transform: translateX(calc(16px / 2)) rotate(10deg) } 45% { -webkit-transform: translateX(calc(-16px / 2)) rotate(calc(-10deg / 1.8)); transform: translateX(calc(-16px / 2)) rotate(calc(-10deg / 1.8)) } 60% { -webkit-transform: translateX(calc(16px / 3.3)) rotate(calc(10deg / 3)); transform: translateX(calc(16px / 3.3)) rotate(calc(10deg / 3)) } 75% { -webkit-transform: translateX(calc(-16px / 5.5)) rotate(calc(-10deg / 5)); transform: translateX(calc(-16px / 5.5)) rotate(calc(-10deg / 5)) } } .cc-looks-badge { background-color: var(--lay-col-button-bg); color: var(--lay-col-button-text); border-radius: 50%; line-height: 1em; padding: .5em .5em; display: inline-flex; justify-content: center; align-items: center; text-align: center } .cc-looks-badge .icon { width: 1em; height: 1em } .cc-looks-material-glass { backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); background-color: rgba(255, 255, 255, .75); border-radius: 12px; border: 1px solid rgba(209, 213, 219, .3) } .cc-looks-bg-diagonal { --skew-angle: -5deg; --background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59); position: relative; isolation: isolate } .cc-looks-bg-diagonal::after { content: ""; background: var(--background); position: absolute; z-index: -1; inset: 0; transform: skewY(var(--skew-angle)) } .cc-looks-bg-blob { position: relative; isolation: isolate } .cc-looks-bg-blob::after { content: ""; width: 440px; height: 440px; border-radius: 15rem; background: linear-gradient(180deg, #EF516D 0%, rgba(239, 81, 109, 0) 100%), radial-gradient(94.51% 124.88% at 94.32% 94.43%, rgba(65, 244, 255, 0.78) 0%, rgba(131, 218, 255, 0.6552) 32.29%, rgba(99, 175, 240, 0.3978) 64.06%, rgba(43, 90, 211, 0) 100%), linear-gradient(313.04deg, #341D65 0.93%, #604AEA 125.68%); background-blend-mode: normal, normal, normal, normal, normal, normal; filter: blur(76px); position: absolute; z-index: -1; inset: 0; opacity: .7 } .cc-looks-gradient { background-image: linear-gradient(to right top, var(--col-background-900), var(--col-background-800), var(--col-background-700), var(--col-background-600), var(--col-background-500)) } .cc-theme-light .cc-looks-gradient { background-image: linear-gradient(to right top, var(--col-background-white-100), var(--col-background-white-200), var(--col-background-white-300), var(--col-background-white-400), var(--col-background-white-500)) } @media(prefers-color-scheme: light) { .cc-theme-adaptive .cc-looks-gradient { background-image: linear-gradient(to right top, var(--col-background-white-100), var(--col-background-white-200), var(--col-background-white-300), var(--col-background-white-400), var(--col-background-white-500)) } } .cc-looks-banner { border-radius: var(--border-radius-ribbon); background-image: linear-gradient(to right top, var(--col-background-900), var(--col-background-800), var(--col-background-700), var(--col-background-600), var(--col-background-500)) } .cc-looks-banner--image-background img { display: none; height: 100%; width: 100%; object-fit: cover; filter: grayscale(1) } .cc-looks-banner--image-profile img { width: 100%; border-radius: var(--border-radius-ribbon) } .cc-looks-bg-bleed { box-shadow: 0 0 0 100vmax var(--bg-color); clip-path: inset(0 -100vmax) } .cc-looks-bg-bleed-inverse { --bg-color: var(--col-green-light); background-color: var(--bg-color, var(--col-white)); color: var(--lay-col-site-text) } @media(hover: hover) { a:hover.ribbon-clickable { text-decoration: none } .ribbon-clickable:hover { background-color: var(--lay-col-button-hover-bg) } } .cc-nav-mobile { position: fixed; top: calc(var(--lay-site-header-height)); left: 0; right: 0; bottom: 0; z-index: var(--lay-zindex-supernav); overscroll-behavior: contain; overflow-y: auto; background: var(--lay-col-ribbon-bg); display: flex; flex-direction: column; align-items: stretch; -ms-overflow-style: none; scrollbar-width: none } .cc-nav-mobile::-webkit-scrollbar { display: none } #jsSiteHeaderMobile[data-visible=true] { display: block } #jsSiteHeaderMobile[data-visible=false] { display: none } .cc-nav-side { max-width: var(--lay-site-nav-width); display: flex; flex-direction: column; align-items: stretch; min-height: 100%; padding-bottom: 1em } .cc-nav-left { flex: 1; display: flex; justify-content: flex-start; align-items: center } .cc-nav-center { flex: 1; display: flex; justify-content: space-between; align-items: center } .cc-nav-right { flex: 1; display: flex; justify-content: flex-end; align-items: center } .cc-nav-item { position: relative; display: flex; padding: var(--padding-btn); cursor: pointer; color: var(--lay-col-site-nav-text); font-weight: var(--lay-fw-navigation); font-size: var(--lay-fs-navigation); border-radius: var(--border-radius-button); align-items: center; justify-content: flex-start; gap: 1em } .cc-nav-item_active { color: var(--col-accent-200) } .cc-nav-item_admin { opacity: .75 } .cc-nav-item_compact { display: flex } .cc-nav-item_blocking { font-style: italic; color: var(--col-warning) } .cc-nav-item_symbol { display: flex; position: relative; opacity: .9; justify-content: stretch; align-items: center; aspect-ratio: 1 } .cc-nav-item_text { width: 100% } .cc-nav-item_symbol .icon, .cc-nav-item_symbol .user-image { font-size: var(--fs-500); position: relative; width: 36px; text-align: center } .cc-nav-item_disabled { cursor: default; background: inherit; opacity: var(--lay-col-opacity-disabled) } .cc-nav-item_indicator { position: absolute; top: -0.25em; right: -0.25em; width: .5em; height: .5em; background-color: var(--col-red-light); border-radius: 50% } .cc-nav-separator { height: 2px; margin-block: .25em; background: var(--lay-col-button-bg) } .cc-nav-separator+.cc-nav-separator { display: none } @media screen and (min-width: 61rem) { .cc-nav-side { display: flex; flex-direction: column } .cc-nav-item_compact { display: none } } @media(hover: hover) { .cc-nav-item:hover { background: var(--lay-col-button-hover-bg) } a.cc-nav-item:hover { text-decoration: none } .cc-nav-item_disabled:hover { cursor: default; opacity: var(--lay-col-opacity-hover) } } .cc-space { position: relative } .cc-space-with-lobo { position: relative } .cc-space-with-lobo>*+* { margin-top: 1rem } .cc-space-with-lobo-s>*+* { margin-top: .5rem } .cc-space-with-lobo-l>*+* { margin-top: 2rem } .cc-space-with-lobo-xl>*+* { margin-top: 3rem } .cc-space-x-l { position: relative; margin-left: auto; margin-right: auto; max-width: 64rem } .cc-space-x-m { position: relative; margin-left: auto; margin-right: auto; max-width: 54rem } .cc-space-x-s { position: relative; margin-left: auto; margin-right: auto; max-width: 44rem } .cc-space-x-xs { position: relative; margin-left: auto; margin-right: auto; max-width: 34rem } .smoke { text-align: center; background: var(--lay-col-panel-bg); color: var(--lay-col-text); font-size: var(--lay-fs-navigation); font-weight: var(--lay-fw-navigation) } .smoke-base, .smokebg { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: var(--lay-col-site-bg-modal) } .smoke-base { visibility: hidden; opacity: 0 } .smoke-base.smoke-visible { opacity: 1; visibility: visible } .smoke-base .dialog { position: absolute; top: 25%; left: 50%; width: calc(36.0 * var(--grain-unit)); margin-left: calc(-18.0 * var(--grain-unit)) } .smoke-base .dialog-inner { padding: var(--padding-panel); border-radius: var(--border-radius-container); border: 2px solid var(--lay-col-info-bg); font-weight: var(--lay-fw-button) } .smoke-alert .dialog-inner { border-color: var(--lay-col-warning-bg) } .dialog-buttons { border-radius: var(--border-radius-button); padding: 1rem 0 } .dialog-buttons button+button { margin-left: var(--margin-m) } .smoke button:not(.cancel) { background: var(--lay-col-button-color-bg); color: var(--lay-col-button-color-text) } .queue { display: none } .composer--spinner { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: var(--lay-col-site-bg-75) } .composer--spinner:after { position: absolute; width: 40%; height: 40%; top: 30%; left: 30%; text-align: center } .composer-markdown-helper li { display: inline-block; margin-right: 1rem; white-space: nowrap } .embed--photo img { margin-inline: auto; max-height: calc(42.0 * var(--grain-unit)); max-width: 100%; border-radius: var(--border-radius-container) } .embed--photo-subtext { display: none; padding-left: 0; padding-right: 0; text-align: left } .embed--link { word-wrap: break-word; line-height: 1em } .embed--thumbnail { position: relative; cursor: pointer } .embed--play { position: relative; margin: 0 auto } .embed iframe { margin: 0 auto } .embed--load { position: relative; margin: 0 auto; height: 64px; width: 64px } .embed--spinner { font-size: 64px; color: var(--lay-col-site-text) } .bbcode_img { max-width: 100% } form { position: relative } form>*+* { margin-top: var(--grain-600) } .fields { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; gap: .5em 1em; align-items: baseline; justify-content: flex-start } .field { position: relative } .field>*+* { margin-top: var(--grain-300) } .fields_inline .field { display: block } .fields_inline .field--label, .fields_inline .input--label, .fields_inline .textarea--label { display: inline-block } .fields_inline .input--input { display: inline; width: auto } span.field { margin-right: var(--margin-m) } .field--label, .input--label { display: block; font-weight: var(--lay-fw-button) } .field--info { font-size: var(--lay-fs-small); color: var(--lay-col-panel-text); opacity: .75 } .field--info:empty, .field--error:empty { display: none } .field--error { color: var(--col-red) } .input--label, .textarea--label { display: block; font-weight: var(--lay-fw-button) } .input--input, .textarea { display: block; width: 100%; padding: var(--padding-form-field); background: var(--lay-col-input-bg); color: var(--lay-col-input-text); border: none; border-radius: var(--border-radius-container); border-color: var(--lay-col-input-border); font-size: var(--lay-fs-standard) } .textarea { height: 8em } .input--input[disabled], .textarea[disabled] { opacity: .5 } .input--input:read-only, .textarea:read-only { opacity: .75 } .input--input:focus, .textarea:focus { outline: 0 none } .field_error .input--input, .field_error .textarea, .field_error .select { border: 3px solid var(--col-error) !important } .field_error .input--input:focus, .field_error .textarea:focus, .field_error .select:focus { border: 3px solid var(--col-error) !important } .no-touch .field_error:hover .input--input, .no-touch .field_error:hover .textarea, .no-touch .field_error:hover .select { border: 3px solid var(--col-error) !important } .textarea { resize: vertical } .input--input-wrap { position: relative } .input_submit .input--submit-wrap { display: table; width: 100% } .input_submit .input--input { display: table-cell; border-radius: var(--border-radius-container) } .input_submit .input--submit { display: table-cell; vertical-align: top; width: 1px; white-space: nowrap } .input_submit .input--submit .btn, .input_submit .input--submit .dialog-buttons button, .dialog-buttons .input_submit .input--submit button { vertical-align: 0 } .input_icon, .input_cancel { position: relative; padding-right: var(--grain-700) } .input--icon, .input--cancel-button { position: absolute; top: 0; left: 90%; bottom: 0; right: 0; padding: 0 var(--padding-form-field-h); color: var(--lay-col-input-text); display: flex; align-items: center; justify-content: center } .no-touch .input--cancel-button:hover { cursor: pointer } input[type=text], select { box-sizing: border-box; height: 2.5em } input[type=file]::file-selector-button { border: none; margin-inline: 1em; padding: .2em .4em; background: var(--lay-col-input-text); color: var(--lay-col-input-bg); border-radius: var(--border-radius-button); border-color: var(--lay-col-input-text); font-size: var(--lay-fs-standard); font-weight: var(--lay-fw-button); transition: 1s } .checkbox--input, .radio--input { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none } .checkbox--label, .radio--label { --radio_width: 1.5em; display: block; font-weight: var(--lay-fw-button); position: relative; padding-left: calc(1.5 * var(--radio_width)); cursor: pointer; -ms-touch-action: none } .checkbox--label::before { content: " "; position: absolute; top: calc(0.00 * var(--radio_width)); left: calc(-0.00 * var(--radio_width)); width: var(--radio_width); height: var(--radio_width); background: var(--lay-col-button-tonal-bg); border-radius: var(--border-radius-checkbox); outline-offset: -2px; outline: 2px solid var(--lay-col-button-enabled-bg) } .checkbox--label:after { content: " "; position: absolute; top: calc(0.00 * var(--radio_width) + 0.25em); left: calc(-0.00 * var(--radio_width) + 0.25em + 0.1em); width: calc(var(--radio_width) - 0.5em); height: calc(var(--radio_width) - 0.5em); background: var(--lay-col-accent); opacity: 0; -webkit-mask-image: url('data:image/svg+xml,%3Csvg version="1.1" xmlns="http://www.w3.org/2000/svg" width="0.75em" viewBox="0 0 26 32"%3E%3Cpath d="M26 1.5l-17 17-9-9v12l9 9 17-17z"%3E%3C/path%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg version="1.1" xmlns="http://www.w3.org/2000/svg" width="0.75em" viewBox="0 0 26 32"%3E%3Cpath d="M26 1.5l-17 17-9-9v12l9 9 17-17z"%3E%3C/path%3E%3C/svg%3E'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat } .radio--label:before { content: " "; position: absolute; top: calc(0.00 * var(--radio_width)); left: calc(-0.00 * var(--radio_width)); width: var(--radio_width); height: var(--radio_width); background: var(--lay-col-button-tonal-bg); border-radius: var(--border-radius-container); outline-offset: -2px; outline: 2px solid var(--lay-col-button-enabled-bg) } .radio--label:after { content: " "; position: absolute; top: calc(0.00 * var(--radio_width) + 0.25em); left: calc(-0.00 * var(--radio_width) + 0.25em); width: calc(var(--radio_width) - 0.5em); height: calc(var(--radio_width) - 0.5em); background: var(--lay-col-accent); border-radius: var(--border-radius-container); opacity: 0 } .checkbox--input:checked+.checkbox--label:after, .radio--input:checked+.radio--label:after { opacity: 1 } .radio--label:before, .radio--label:after { border-radius: var(--border-radius-round) } .checkbox--label[disabled] { color: var(--col-text-200); cursor: default } .select-wrap { border-radius: var(--border-radius-container); background: var(--lay-col-input-bg) } .select { display: block; width: 100%; padding: var(--padding-form-field-v) calc(var(--padding-form-field-h) * 2) var(--padding-form-field-v) var(--padding-form-field-h); color: var(--lay-col-input-text); border: none; border-radius: var(--border-radius-container); border-color: var(--lay-col-input-border); font-size: var(--lay-fw-button) } .select--label { display: block; font-weight: var(--lay-fw-button) } .select[disabled] { opacity: .5 } select { appearance: none; outline: none; cursor: pointer; font-weight: var(--lay-fw-button); border: 2px solid var(--lay-col-button-bg); border-radius: var(--border-radius-container); padding: .5em 1em; background: url("data:image/svg+xml,") no-repeat; background-position: calc(100% - 0.75rem) center !important } option { font-weight: var(--lay-fw-button) } .image, .image img { background: transparent; position: relative; width: 100% } .image_s { width: var(--lay-img-size-s) } .image_m { width: var(--lay-img-size-m) } .image_l { width: var(--lay-img-size-l) } .image_xl { width: var(--lay-img-size-xl) } .image_xxl, .image_2xl { width: var(--lay-img-size-xxl) } .image_xxxl, .image_3xl { width: var(--lay-img-size-xxxl) } .image_4xl { width: var(--lay-img-size-4xl) } .image_5xl { width: var(--lay-img-size-5xl) } .image_cover { border-radius: var(--border-radius-container); object-fit: cover; max-width: 100% } .item-image { position: relative } .item-image_s { width: var(--lay-img-size-s) } .item-image_m { width: var(--lay-img-size-m) } .item-image_l { width: var(--lay-img-size-l) } .item-image_xl { width: var(--lay-img-size-xl) } .item-image_xxl { width: var(--lay-img-size-xxl) } .item-image img { width: 100% } .item-image--image { width: 100%; border-radius: var(--border-radius-container) } .item-image--gender { content: " "; display: block; float: left; width: var(--grain); height: var(--grain); margin-left: calc(-1.0 * var(--grain-300)); margin-right: var(--grain-300) } .item-image--gender_male { background: var(--col-male) } .item-image--gender_female { background: var(--col-female) } .item-image--overlay { position: absolute; bottom: 0; width: 100%; padding: 0 var(--grain-300); white-space: nowrap; background: var(--col-grey); color: var(--col-white) } .item-image--data { overflow: hidden } .item-image, .item-image a { color: var(--col-white) } .item-image--count { position: absolute; top: 0; left: 0; padding: 0 var(--grain-300); background: var(--col-grey) } .scene-image { position: relative } .scene-image_s { width: var(--lay-img-size-s) } .scene-image_m { width: var(--lay-img-size-m) } .scene-image_l { width: var(--lay-img-size-l) } .scene-image_xl { width: var(--lay-img-size-xl) } .scene-image_xxl { width: var(--lay-img-size-xxl) } .scene-image--image { width: 100%; border-radius: var(--border-radius-container) } .scene-image--flag { position: absolute; width: auto } .user-image { position: relative; overflow: hidden } .user-image_s { width: var(--lay-img-size-s) } .user-image_m { width: var(--lay-img-size-m) } .user-image_l { width: var(--lay-img-size-l) } .user-image_xl { width: var(--lay-img-size-xl) } .user-image_xxl { width: var(--lay-img-size-xxl) } .user-image_xxxl { width: var(--lay-img-size-xxxl) } .no-touch .user-image a:hover { text-decoration: none } .user-image--state { position: absolute; z-index: 1; top: 0; right: 0; width: 25%; height: 25%; background: transparent; border-radius: 50%; border: none } .user-image--state_online { background: var(--col-online); border: 2px solid var(--lay-col-panel-bg) } .user-image--state_away { background: var(--col-away); border: 2px solid var(--lay-col-panel-bg) } .user-image--image { width: 100%; border-radius: 50% } .user-image--name .data { white-space: nowrap } .user-image_icon { display: inline-block; vertical-align: bottom; width: var(--grain) } .user-image_icon .user-image--male, .user-image_icon .user-image--female { position: absolute; bottom: 0 } .user-image_blur { filter: blur(4px) } .user-image_lock:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-family: "clubcooee" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; display: flex; align-items: center; justify-content: center; color: var(--lay-col-accent); font-size: var(--fs-600) } .site-background { padding: var(--padding-site); background: var(--lay-col-site-bg) } .site-header, .site-header-mobile { display: none; flex-direction: column; justify-content: center; z-index: var(--lay-zindex-supernav); background: var(--lay-col-ribbon-bg); color: var(--lay-col-ribbon-text); height: var(--lay-site-header-height) } .site-header-mobile { display: block; position: sticky; top: 0 } .site-nav-side { display: none; position: sticky; top: var(--lay-site-header-height); height: calc(100vh - var(--lay-site-header-height)); overflow-y: scroll; overscroll-behavior: contain; scrollbar-width: none } .site-nav-side::-webkit-scrollbar { width: 0 } .site-content { position: relative; display: flex; flex-direction: column; gap: 1em; flex-wrap: nowrap; min-height: 99vh; padding: var(--padding-site-content); padding-bottom: 5rem; color: var(--lay-col-site-text); font-weight: var(--lay-fw-standard) } .site-content-right { display: none; flex-direction: row; padding: var(--padding-site-content); position: sticky; top: var(--lay-site-header-height); height: calc(100vh - var(--lay-site-header-height)); overflow-y: scroll; overscroll-behavior: contain; scrollbar-width: none; justify-content: flex-start; padding-left: 4rem } .site-content-right::-webkit-scrollbar { width: 0 } .site-content-right-wrap { max-width: var(--lay-site-nav-width); padding-bottom: 1em } @media screen and (min-width: 80rem) { .site-content-right { display: flex; flex-direction: row } } @media screen and (min-width: 61rem) { .site-background { display: grid; grid-template-columns: minmax(16rem, 1fr) 42rem minmax(0, 1fr); grid-gap: var(--padding-site-h) } .site-background.dashboard { grid-template-columns: auto 1fr } .site-header { display: flex; position: sticky; top: 0; height: var(--lay-site-header-height) } .site-header-mobile { display: none; height: var(--lay-site-header-height) } .site-nav-side { display: block } #jsSiteHeaderMobileToggle { display: none } } @media screen and (max-width: 61rem) { .site-background { padding-inline: calc(0.5 * var(--padding-site-h)) } } .site-supernav-tabbar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: center; z-index: var(--lay-zindex-supernav); background: var(--lay-col-ribbon-bg); color: var(--lay-col-ribbon-text); height: var(--lay-site-header-height) } .cc-totop-wrap { position: absolute; top: 0; right: 0; height: 100%; pointer-events: none } .cc-totop-wrap:before { content: ""; display: block; height: 100vh; pointer-events: none } .cc-totop-wrap a { --size: 4rem; display: block; position: sticky; top: calc(100vh - var(--size) - 1rem); cursor: pointer; width: var(--size); height: var(--size); background: var(--lay-col-button-cta-bg); border-radius: var(--border-radius-round); pointer-events: auto } .cc-totop-wrap a:before { content: ""; position: absolute; inset: 30%; transform: translateY(20%) rotate(-45deg); border-top: 5px solid var(--lay-col-button-cta-text); border-right: 5px solid var(--lay-col-button-cta-text) } .footer { font-weight: var(--lay-fw-navigation); padding: 2rem 0; overflow: hidden; margin-top: 10rem; opacity: .75 } .footer-content { display: flex; flex-direction: row; gap: 1rem; justify-content: space-between; align-items: flex-start; max-width: 70rem; margin-inline: auto } .footer--section { display: flex; flex-direction: column; align-items: flex-start } .footer--section>*+* { margin-top: .4rem } .footer--section a { color: var(--lay-col-site-text) } .footer--social-link { display: inline-block; padding: var(--grain-500) var(--grain) 0 var(--grain) } .footer--section .icon { width: 1em; margin-right: var(--grain-400); text-align: center } @media screen and (max-width: 61rem) { .footer-content { flex-direction: column; align-items: center; gap: 2em } .footer--section { align-items: center } } #template { display: none } #shop_container { position: relative; top: -1px } .credits-info { float: right } .no-touch .credits-info a:hover { text-decoration: none } .shop .page-header { float: left; margin-bottom: 0 } .history--back { padding: var(--grain-300) var(--grain-500); margin: calc(-1.0 *var(--grain-300)) 0; color: var(--col-grey-dark); cursor: default } .history--back.active { color: var(--col-grey-light); cursor: pointer } .shop--category { display: inline-block; font-size: 1.3em } .browse-button { font-size: var(--fs-xl); cursor: pointer } .browse-button.inactive { color: var(--col-grey-dark); cursor: default } .item-list { background: var(--lay-col-debug-bg); margin: 0 calc(-1.0 * var(--grain-400)) } .item-list--item { z-index: 0; cursor: pointer; background: var(--lay-col-ribbon-bg); color: var(--lay-col-ribbon-text); border-radius: var(--border-radius-container) } .item-list--item-hover-wrap { overflow: hidden; position: relative; top: 0; z-index: 0; padding: var(--grain-400); text-align: center; border-radius: var(--border-radius-container) } .no-touch .item-list--item:hover { z-index: 10 } .item-list--ugt-back { position: absolute; width: 100%; opacity: .5 } .no-touch .item-list--item_vip:hover .item-list--vip-back { opacity: 1 } .item-list--spinner { width: 100%; padding-top: var(--grain-800); padding-bottom: var(--grain-800); text-align: center } .item-list--data { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 1em } .item-list--image-wrap { width: 100%; height: 0; padding-bottom: 100% } .item-list--image { position: relative; z-index: 10; width: 100%; padding: var(--grain-400); border-radius: var(--border-radius-container) } .item-list--name { text-align: center; vertical-align: middle; font-size: var(--fs-200); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .item-list--price { overflow: hidden; white-space: nowrap; font-size: var(--fs-200); opacity: .75 } .item-list--item .properties { position: absolute; top: calc(0.5 * var(--padding-panel-h)); left: calc(0.5 * var(--padding-panel-h)); z-index: 20; display: flex; flex-direction: row; gap: var(--grain-200); flex-wrap: wrap } .item--count-wrap.inactive { display: none } .item-list--try, .item-list--edit { position: absolute; bottom: 0; right: 0; z-index: 10; opacity: 0; font-size: 1em } .item-list--edit { right: auto; left: 0 } .no-touch .item-list--item:hover .item-list--try, .no-touch .item-list--item:hover .item-list--edit { opacity: 1 } .item-details .item--count-back { background: var(--lay-col-debug-bg); float: left; top: var(--grain-400); margin-right: var(--grain-400) } .item-details--rating-wrap { position: relative; float: left; margin-right: var(--grain-400); white-space: nowrap } .item-details--rating.user .item-details--rating-wrap { cursor: pointer } .item-details--rating-back { color: var(--col-grey) } .item-details--rating-score { position: absolute; top: 0; z-index: 10; overflow: hidden } .item-details--rating-info { float: left } .media { position: relative; display: flex; flex-direction: row; gap: 1em } .media--image { position: relative; height: fit-content } .media--body { display: flex; flex-direction: column; gap: .5em; overflow: hidden; width: 100%; justify-content: center } .cc-ui-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem } .cc-ui-menu .cc-ui-menu--btn .icon { pointer-events: none } .cc-ui-menu--list { position: absolute; top: 3rem; display: none; flex-direction: column; gap: .5em; right: 0; z-index: 200; padding: .5em; background: var(--lay-col-panel-bg); border-radius: var(--border-radius-container); outline: 2px solid var(--lay-col-panel-bg-elevated); outline-offset: -2px } html:not([data-platform=macOS]) .cc-ui-menu:focus-within .cc-ui-menu--list { display: flex } html[data-platform=macOS] .cc-ui-menu[data-showmenu=true] .cc-ui-menu--list { display: flex } .cc-ui-menu--item { display: block; padding: var(--padding-btn); white-space: nowrap; background: var(--lay-col-button-bg); border-radius: var(--border-radius-button); user-select: none } .no-touch .cc-ui-menu--item:hover { text-decoration: none } .page-header { position: relative; z-index: 1 } .page-header--headline { margin-bottom: var(--margin-s) } .page-header--nav { --gap: 1rem; display: grid; gap: var(--gap); grid-auto-flow: column; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-padding: var(--gap); text-wrap: nowrap } .page-header--nav>* { scroll-snap-align: start } .page-header--nav-item { position: relative; display: inline-flex; flex-direction: row; justify-content: center; align-items: center; padding: var(--padding-btn); color: var(--lay-col-button-text); background: var(--lay-col-button-bg); border-radius: var(--border-radius-pill); font-weight: var(--lay-fw-navigation); text-decoration: none; line-height: 1em } .page-header--nav-item_active { color: var(--lay-col-button-bg); background: var(--lay-col-button-text); order: -1 } .page-header--nav-item--count { padding: 0; margin-left: var(--grain-200); border-radius: var(--border-radius-round); font-weight: var(--lay-fw-navigation); background: var(--col-red); color: var(--col-white); display: flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; line-height: 1; font-size: 1em } @media(hover: hover) { .page-header--nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: .5em; overflow-x: auto } .page-header--nav-item_active { order: unset } .page-header--nav-item:hover { opacity: var(--lay-col-opacity-hover); text-decoration: none; cursor: pointer } a:hover.page-header--nav-item { text-decoration: none } } .pagination { display: flex; flex-wrap: wrap; gap: .5rem } .pagination--item { -ms-touch-action: none } .pagination--item a { display: inline-block; width: 100%; height: 100%; padding: var(--padding-btn); border-radius: var(--border-radius-button); background: var(--lay-col-button-bg); color: var(--lay-col-button-text); font-weight: var(--lay-fw-navigation); text-decoration: none; cursor: default; -ms-touch-action: none } .pagination--item_active { display: inline-block; padding: var(--padding-btn); border-radius: var(--border-radius-button); background: var(--lay-col-button-enabled-bg); color: var(--lay-col-button-text) } .pagination--item_disabled { display: inline-block; padding: var(--padding-btn); border-radius: var(--border-radius-button); background: var(--lay-col-button-inactive-bg); color: var(--lay-col-button-text); opacity: var(--lay-col-opacity-disabled) } @media(hover: hover) { .pagination--item:hover a { opacity: var(--lay-col-opacity-hover); cursor: pointer } .pagination--item:hover a { text-decoration: none } } .panel-naked { border-radius: var(--border-radius-ribbon); color: var(--lay-col-panel-text); background-color: var(--lay-col-panel-bg) } .panel, .ribbon { background: var(--lay-col-debug-bg); padding: var(--grain-400) var(--grain); border-radius: var(--border-radius-ribbon); overflow: hidden; color: var(--lay-col-site-text) } .ribbon { background: var(--lay-col-debug-bg) } .panel { background: var(--lay-col-debug-bg) } .equal>.panel { background: var(--lay-col-debug-bg) } .panel>p:first-child { background: var(--lay-col-debug-bg) } .panel>p:last-child { background: var(--lay-col-debug-bg) } .panel_link { text-align: center; word-break: break-all } .progress { padding: var(--grain-200); border-radius: var(--border-radius-button); background: var(--lay-col-button-bg) } .progress--bar { display: block; border-radius: var(--border-radius-button); height: var(--grain-600) } .progress_s { padding: 0; border-radius: var(--border-radius-button); height: var(--grain-400) } .progress_s .progress--bar { background: var(--lay-col-accent); height: var(--grain-400) } .quote { background: var(--lay-col-debug-bg) } .roster-action--overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, .5); display: flex; flex-direction: row; align-items: center; justify-content: center } .scene-profile-wrap { margin-top: calc(-0.9 * var(--lay-img-size-xxl)) } .scene-profile-header { position: relative; top: calc(-1 * var(--padding-ribbon-v)); height: calc(2*var(--grain-900)); margin-inline: calc(-1 * var(--padding-ribbon-h)); background-color: var(--lay-col-ribbon-bg); background-repeat: no-repeat; background-position: center center; background-size: cover } .scene-profile-header-blur { position: absolute; width: 100%; height: 100%; backdrop-filter: blur(20px) brightness(1) } .scene-profile-header--image .scene-image { width: var(--lay-img-size-xxl); height: var(--lay-img-size-xxl); border-radius: var(--border-radius-container); border: 10px solid var(--lay-col-ribbon-bg); background: var(--lay-col-ribbon-bg) } .scene-profile-header--image .user-image--state { display: none } table { width: 100%; table-layout: fixed; color: var(--lay-col-site-text) } thead { display: none } thead tr { background: var(--lay-col-ribbon-bg) } tr { background: var(--lay-col-panel-bg) } th, td { display: block; overflow: hidden; width: 100%; text-align: left; vertical-align: top; padding: var(--padding-btn); white-space: break-spaces } tr:nth-child(2n) { background: var(--lay-col-ribbon-bg) } @media screen and (min-width: 30em) { thead { display: table-header-group } th, td { display: table-cell } } .user-condensed--name { margin: 0; padding: 0; line-height: 1 } .admin.trigger { position: relative; z-index: 100; height: 1em; padding: 0 .236em; margin-bottom: -1em; line-height: .8; background: var(--col-admin); color: var(--col-white); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .user-profile-wrap { margin-top: calc(-0.9 * var(--lay-img-size-xxl)) } .user-profile-header { position: relative; top: calc(-1 * var(--padding-ribbon-v)); height: calc(2*var(--grain-900)); margin-inline: calc(-1 * var(--padding-ribbon-h)); background-color: var(--lay-col-ribbon-bg); background-repeat: no-repeat; background-position: center center; background-size: cover } .user-profile-header--image .user-image { width: var(--lay-img-size-xxl); height: var(--lay-img-size-xxl); border-radius: var(--border-radius-round); border: 10px solid var(--lay-col-ribbon-bg); background: var(--lay-col-ribbon-bg) } .user-profile-header--image .user-image--state { display: none } .user-profile-header--info { display: flex; flex-flow: column; justify-content: center; align-items: flex-start; margin: 0; padding: var(--grain-600) } .wall--more { width: 100%; padding: var(--padding-btn); font-size: var(--fs-xl); line-height: 1; text-align: center } .wall--more .icon { font-size: var(--fs-xl) } .note { overflow: visible } .note--header { box-sizing: content-box; position: relative } .note--header--author { display: flex; flex-direction: row; align-items: stretch; gap: .5em } .note--type { text-transform: uppercase } .note--subject, h1.note--subject, h2.note--subject, h3.note--subject, h4.note--subject, h5.note--subject, h6.note--subject { margin-bottom: var(--grain-400) } .note--edit-info { margin-top: var(--grain-500) } .note--text { overflow: hidden } .note--text iframe { width: 100%; height: 24rem; border-radius: var(--border-radius-container) } .note--text p { margin: var(--grain-500) 0 } .note--text .note--private+p, .note--text p:first-of-type { margin-top: 0 } .note--text p:last-child, .note--text p:last-of-type { margin-bottom: 0 } .note--comment-form { display: none } .note--comment { overflow: hidden; margin-top: var(--grain-200); border-radius: var(--border-radius-container) } .note--comment p+p { margin-top: var(--grain-500) } .note--comment_original-poster { background: var(--lay-col-button-bg) } .note--comment_admin .note--comment-author, .note--comment_community-manager .note--comment-author { font-weight: 900 } .note--comment-author { display: flex; flex-direction: row; gap: 1em; align-items: stretch } .note--show-all-comments { text-align: center } .note--comment_deleted { opacity: .3 } .note--comment-deleted_info { color: var(--col-text-400); font-style: italic } .note--comment-admin-hint_body { color: var(--col-red); margin: var(--grain-400) } .note--like_count { margin-left: var(--grain-400) } .markdown h1 { font-size: var(--fs-l) } .markdown h2 { font-size: var(--fs-m); font-weight: var(--lay-fw-header) } .markdown h3, .markdown h4, .markdown h5, .markdown h6 { font-weight: var(--lay-fw-header) } .markdown li { list-style: disc; margin-left: 1.2rem } .markdown p img { max-width: 100%; margin: 0 auto; border-radius: var(--border-radius-container) } .markdown p span img { max-width: unset } #jsWidgetWrap { display: none } .widget--wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--lay-zindex-modal); background: var(--lay-col-site-bg-modal); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overscroll-behavior-y: contain; overflow-y: scroll } .widget--bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: calc(var(--lay-zindex-modal) + 50) } .widget { position: relative; z-index: calc(var(--lay-zindex-modal) + 100); margin-inline: auto; align-items: center; justify-content: center; width: min(100% - 2rem, 45rem) } .widget--header { margin-bottom: var(--grain-600) } .widget--body { display: flex; flex-direction: column; gap: 1em; background-color: var(--lay-col-site-bg) } .widget--close { margin-bottom: 0 } .widget--noscroll { overflow: hidden } @media screen and (min-width: 61rem) { .widget--back { background: var(--lay-col-site-bg) } .widget { margin: var(--grain-700) auto } } .dashboard a { --lay-col-site-link: var(--lay-col-site-nav-text); text-decoration: underline } .dashboard a.btn, .dashboard a.btn:hover { text-decoration: none } .dashboard a.text-btn, .dashboard a.text-btn:hover { text-decoration: none } .dashboard .cc-nav-item { align-items: flex-start; padding-block: 0; gap: .5em; text-decoration: none } .dashboard .cc-nav-item_symbol .icon { font-size: var(--fs-300); width: 26px } .dashboard .cc-nav-side { max-width: 20vw } .dashboard .site-content .red, .dashboard .site-content .red * { color: var(--col-red) !important } .dashboard .site-content .orange, .dashboard .site-content .orange * { color: var(--col-orange) !important } .dashboard .site-content .yellow, .dashboard .site-content .yellow * { color: var(--col-yellow) !important } .dashboard .site-content .green, .dashboard .site-content .green * { color: var(--col-green) !important } .dashboard .site-content .blue, .dashboard .site-content .blue * { color: var(--col-blue) !important } .dashboard .site-content .purple, .dashboard .site-content .purple * { color: var(--col-purple) !important } .dashboard .site-content .grey, .dashboard .site-content .grey * { color: var(--col-grey) !important } .dashboard .site-content .monitor-load { position: absolute; top: calc(8.0 * var(--grain-unit)); z-index: 1; width: 100%; text-align: center } .dashboard .site-content iframe { position: relative; z-index: 2 } .dashboard .site-content input, .dashboard .site-content .select-wrap { max-width: 24em } .dashboard .site-content table { display: grid; width: fit-content; max-width: 100%; font-size: 14px } .dashboard .site-content table colgroup { display: none } .dashboard .site-content table thead, .dashboard .site-content table tbody, .dashboard .site-content table tr { display: contents } .dashboard .site-content table th, .dashboard .site-content table tr:nth-child(2n) td { background: var(--lay-col-dashboard-table-altrow-bg) } .dashboard .site-content table th, .dashboard .site-content table td { display: block; width: auto; padding: var(--padding-s) var(--padding-m) } .dashboard .site-content table .text-btn { padding: 0; line-height: inherit; color: var(--lay-col-site-link) } .dashboard .site-content table .text-btn:hover { text-decoration: underline } .Xdashboard--navigation { display: flex; flex-direction: row; gap: .5rem } .Xdashboard--navigation .navigation_vertical { float: none } .Xdashboard--navigation .navbar--item { padding: var(--grain-200) var(--grain-500) } .Xdashboard--navigation .navbar--item>* { margin: calc(-1.0 * var(--grain-200)) calc(-1.0 * var(--grain-500)); padding: var(--grain-200) var(--grain-500) } .Xdashboard--navigation .icon { width: var(--grain-500); margin: 0 var(--grain-400) 0 0; text-align: center } .Xdashboard--content { min-height: 100vh; padding: var(--grain-500) var(--grain-300) var(--grain-500) var(--grain-300) } .Xdashboard--content h1, .Xdashboard--content h2, .Xdashboard--content h3, .Xdashboard--content h4, .Xdashboard--content h5, .Xdashboard--content h6 { line-height: 1em; margin: var(--grain-100) 0 var(--grain-300) 0 } .Xdashboard--content dl { margin-bottom: var(--margin-m) } .Xdashboard--content dd { margin-bottom: var(--margin-m) } .Xdashboard--content table { margin-bottom: var(--margin-m); table-layout: auto } .Xdashboard--content thead { display: table-header-group } .Xdashboard--content th, .Xdashboard--content td { display: table-cell } .Xdashboard--content .header { cursor: pointer } .Xdashboard--content .header.headerSortUp:after { content: "▼"; float: right } .Xdashboard--content .header.headerSortDown:after { content: "▲"; float: right } .Xdashboard--content .row { background: #ff0; margin-bottom: var(--margin-m) } .Xdashboard--content .panel { margin-bottom: var(--grain) } .Xdashboard--content .flash-panels .panel { margin-bottom: 0 } .Xdashboard--content pre { word-wrap: break-word; white-space: -moz-pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap } .Xdashboard--content .input_submit, .Xdashboard--content .input--input, .Xdashboard--content .chosen-single, .Xdashboard--content .chosen-drop { max-width: calc(24.0 * var(--grain-unit)) } .Xdashboard--content .field--info { margin-bottom: var(--grain-500) } .Xdashboard--content .fields_inline { margin-bottom: 0 } .Xdashboard--content .fields_inline .field { margin-bottom: 0 } .Xdashboard--content .fields_grid .field { min-width: calc(12.0 * var(--grain-unit)); margin-bottom: var(--grain-500) } .Xdashboard--content .wrap_ap { max-width: calc(24.0 * var(--grain-unit)) } .Xdashboard--content .red, .Xdashboard--content .red * { color: var(--col-red) !important } .Xdashboard--content .orange, .Xdashboard--content .orange * { color: var(--col-orange) !important } .Xdashboard--content .yellow, .Xdashboard--content .yellow * { color: var(--col-yellow) !important } .Xdashboard--content .green, .Xdashboard--content .green * { color: var(--col-green) !important } .Xdashboard--content .blue, .Xdashboard--content .blue * { color: var(--col-blue) !important } .Xdashboard--content .purple, .Xdashboard--content .purple * { color: var(--col-purple) !important } .Xdashboard--content .grey, .Xdashboard--content .grey * { color: var(--col-grey) !important } .Xdashboard--content .monitor-load { position: absolute; top: calc(8.0 * var(--grain-unit)); z-index: 1; width: 100%; text-align: center } .Xdashboard--content iframe { position: relative; z-index: 2 } .Xdashboard--content .calendar table { width: 24em } .Xdashboard--content>*:first-child, .Xdashboard--content>.row:first-child>.col>*:first-child { margin-top: 0 } .XblockMsg h1 { font-size: var(--fs-l) l; font-weight: var(--lay-fw-header) } @media screen and (min-width: 30em) { .Xdashboard--content th, .Xdashboard--content td { display: table-cell; width: auto } .Xdashboard--content th, .Xdashboard--content td { padding-left: var(--grain-400); padding-right: var(--grain-400); white-space: normal } } @media screen and (min-width: 61rem) { .Xdashboard--content .chart, .Xdashboard--content .chartPie { width: calc(48.0 * var(--grain-unit)) } } .dashboard-tp .row { margin-bottom: 0 } .dashboard-tp--entries .input--input { max-width: 100% } .dashboard-tp--entry img { width: 64px } .dashboard-tp--entry.dashboard-tp--entry_master { margin-bottom: var(--grain-800) } .hidden-entry { height: 0; overflow: hidden } .dashboard-tp--toggle-button { display: inline-block } .dashboard-tp--toggle-button input { display: none } .dashboard-tp--toggle-button .checkbox--label { padding: 0 } .dashboard-tp--toggle-button .checkbox--label:before { all: initial; content: "Not Approved"; padding: var(--grain-300) var(--grain-600); background: var(--col-red); color: var(--col-white); font-family: "Open Sans", Verdana, Helvetica, sans-serif; cursor: pointer; -ms-touch-action: none } .dashboard-tp--toggle-button .checkbox--label:after { content: ""; position: absolute; top: -0.2em; left: .5em; color: var(--col-white); opacity: 1; font-size: 1.4em } .dashboard-tp--toggle-button input:checked+.checkbox--label:before { content: "Approved"; background: var(--col-green) } .dashboard-tp--toggle-button input:checked+.checkbox--label:after { content: ""; font-size: 1.2em } .no-touch .dashboard-tp--toggle-button .checkbox--label:hover:before { border: none } .dashboard-tp--modules .modules { margin-bottom: 20px; border-bottom: 1px solid var(--col-grey-very-light); display: flex; flex-wrap: wrap } .dashboard-tp--modules .modules li { margin: 5px; min-width: 200px; color: var(--col-grey-very-dark); cursor: pointer } .dashboard-tp--modules .modules ::before { padding: 4px 7px; color: var(--col-white); margin-right: 10px; border-radius: 4px 0 0 4px; display: inline-block; width: 1.618rem; text-align: center } .dashboard-to--modules .modules :hover { background-color: var(--col-grey); border-radius: 4px } .dashboard-tp--modules .modules ::before { padding: 4px 7px; color: var(--col-white); margin-right: 10px; border-radius: 4px 0 0 4px } .dashboard-tp--modules .modules .translation_ok:hover { border: 1px solid var(--col-green) } .dashboard-tp--modules .modules .translation_ok::before { content: "✔"; background: var(--col-green) } .dashboard-tp--modules .modules .translation_changed:hover { border: 1px solid var(--col-orange) } .dashboard-tp--modules .modules .translation_changed::before { content: "↻"; background: var(--col-yellow) } .dashboard-tp--modules .modules .translation_missing:hover { border: 1px solid var(--col-red-dark) } .dashboard-tp--modules .modules .translation_missing::before { content: "⚠"; background: var(--col-red) } .dashboard-tp--modules .modules .translation_machine:hover { border: 1px solid var(--col-blue) } .dashboard-tp--modules .modules .translation_machine::before { content: "!"; background: var(--col-blue-light) } .dashboard-tp--modules .modules li a, .dashboard-tp--modules.modules li a:visited { display: block; background-color: var(--col-grey); padding: 0 10px 0 0; font-size: .8rem; color: var(--col-black); text-decoration: none; border-radius: 4px; border: 1px solid transparent; transition: border ease .2s } .dashboard-tp--modules .actions a { margin: 5px } .dashboard-tp--missing .dataTables_wrapper { width: 50vw } .dashboard-tp--missing .dataTables_filter { margin-bottom: 1.618em } .dashboard-tp--modules .legend li { display: block; margin: 5px; min-width: 200px; color: var(--col-grey-very-dark) } .dashboard-tp--modules .legend li span { display: inline-block; background-color: var(--col-grey); margin-right: 10px; margin-bottom: 5px; padding: 3px 10px; font-size: .8rem; color: var(--col-black); text-decoration: none; border-radius: 4px; border: 1px solid transparent } .dashboard-tp--modules .legend ::before { padding: 4px 7px; color: var(--col-white); border-radius: 4px 0 0 4px } .dashboard-tp--modules .legend .translation_ok::before { content: "✔"; background: var(--col-green) } .dashboard-tp--modules .legend .translation_changed::before { content: "↻"; background: var(--col-yellow) } .dashboard-tp--modules .legend .translation_missing::before { content: "⚠"; background: var(--col-red) } .dashboard-tp--entry code { font-size: 1rem; line-height: 1 } .dashboard-tp--entry .entry--tag { flex: 0 1 auto; margin-left: .786rem; color: var(--col-black); opacity: .5 } .dashboard-tp--entry .entry--more-chars { font-size: .786rem; font-weight: var(--lay-fw-header); color: var(--col-orange) } .dashboard-tp--entry .entry--no-loca { font-size: .786rem; font-weight: var(--lay-fw-header); color: var(--col-blue) } .dashboard-tp--entry .entry--master, .dashboard-tp--entry .entry--slave, .dashboard-tp--entry .entry--master *, .dashboard-tp--entry .entry--slave * { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text } .dashboard-tp--entry .entry--text { padding: 0 0 0 .786rem; font-family: monospace; font-size: .85rem; font-weight: var(--lay-fw-standard); line-height: 1.4 } .dashboard-tp--entry .entry--text_html { display: inline; background: transparent; color: var(--col-blue-very-dark); font-family: monospace; font-weight: var(--lay-fw-header) } .dashboard-tp--entry .entry--text_html-error, .dashboard-tp--entry .entry--text_html-missing { display: inline; background: transparent; color: var(--col-red); font-family: monospace; font-weight: var(--lay-fw-header) } .dashboard-tp--entry .entry--text_html-missing, .dashboard-tp--entry .entry--text_html-fixed { opacity: .3 } .dashboard-tp--entry .entry--text_tag { display: inline; color: var(--col-green); font-family: monospace; font-weight: var(--lay-fw-header) } .dashboard-tp--entry .entry--text_tag-error, .dashboard-tp--entry .entry--text_tag-missing { display: inline; color: var(--col-red); font-family: monospace; font-weight: var(--lay-fw-header) } .dashboard-tp--entry .entry--text_tag-missing { opacity: .3 } .dashboard-tp--entry .entry--text_newline { display: inline; color: var(--col-purple); font-family: monospace; font-weight: var(--lay-fw-header) } .dashboard-tp--entry .entry--text_newline+.entry--text_newline { margin-left: 0 } .dashboard-tp--entry .entry--preview-label { font-size: .786rem; opacity: .3 } .dashboard-tp--export .export--entry { margin-bottom: 20px; border-bottom: 1px solid var(--col-grey-very-light); display: flex; flex-wrap: wrap } .aws-table-start_group { font-weight: bold } .aws-status_ribbon { text-align: center; transform: rotate(-90deg); padding: 5px; margin-left: -60px; margin-top: 15px; margin-bottom: 15px } .aws-status_ribbon>span>font { color: #fff } .autocomplete-suggestions { overflow: auto; z-index: 10; background: var(--lay-col-input-bg); color: var(--lay-col-input-text); border-radius: var(--border-radius-container); margin-top: var(--margin-s) } .autocomplete-suggestions strong { font-weight: bold; text-decoration: underline; color: var(--lay-col-accent) } .autocomplete-suggestion { overflow: hidden; padding: var(--padding-form-field); white-space: nowrap } .autocomplete-selected { background-color: var(--lay-col-input-bg-hover); cursor: pointer } .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_paginate span { display: flex; flex-wrap: wrap; gap: .5rem } .dataTables_wrapper .dataTables_paginate .paginate_button { padding: var(--padding-btn); cursor: default; background: var(--lay-col-button-bg); border-radius: var(--border-radius-button); color: var(--lay-col-button-text); font-weight: var(--lay-fw-navigation); -ms-touch-action: none } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--lay-col-button-enabled-bg); color: var(--lay-col-button-text) } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { background: var(--lay-col-button-inactive-bg); color: var(--lay-col-button-text); opacity: var(--lay-col-opacity-disabled) } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { opacity: var(--lay-col-opacity-hover); cursor: pointer } .dataTables_wrapper .dataTables_paginate .paginate_button:active { background: var(--lay-col-button-enabled-bg); color: var(--lay-col-button-text) } .Xwordpress-content>*:first-child { margin-top: 0 } .Xwordpress-content { padding: 0 var(--grain-500) } .Xwordpress-content h1, .Xwordpress-content h2, .Xwordpress-content h3, .Xwordpress-content h4, .Xwordpress-content h5, .Xwordpress-content h6 { line-height: 1.2; margin: var(--grain-300) 0 var(--grain-500) 0 } .Xwordpress-content h1 { margin-top: var(--grain); margin-bottom: var(--grain-400); font-size: var(--fs-xl); font-weight: var(--lay-fw-standard); text-rendering: optimizelegibility } .Xwordpress-content h2 { margin-top: var(--grain); margin-bottom: var(--grain-500); font-size: var(--fs-l); font-weight: var(--lay-fw-standard); text-rendering: optimizelegibility } .Xwordpress-content h2.font-xl { font-size: var(--fs-xl) } .Xwordpress-content h3, .Xwordpress-content h4, .Xwordpress-content h5, .Xwordpress-content h6 { margin-top: var(--grain-700); margin-bottom: var(--grain); font-size: var(--fs-m); font-weight: var(--lay-fw-standard) } .Xwordpress-content img { display: inline-block; max-width: 100%; height: auto } .Xwordpress-content strong img, .Xwordpress-content img.new { border-bottom: 6px solid var(--col-red) } .Xwordpress-content img, .Xwordpress-content ul, .Xwordpress-content p { margin: var(--grain-500) 0; font-size: 1.176em } .Xwordpress-content ul li { margin: var(--grain-300) 0 var(--grain-300) var(--grain); padding-left: var(--grain-400); list-style-type: disc } .wp-country-code { min-width: var(--grain-700); padding: var(--grain-200) var(--grain-400); border-radius: var(--border-radius-round); font-weight: bold; text-align: center; text-transform: uppercase; background: var(--col-grey-dark); color: var(--col-white) } .wp-country-code-de { background-color: var(--col-grey-very-dark) } .wp-country-code-en { background-color: var(--col-orange-dark) } .wp-country-code-es { background-color: var(--col-yellow-dark) } .wp-country-code-fr { background-color: var(--col-teal-dark) } .wp-country-code-pt { background-color: var(--col-green) } .wp-country-code-id { background-color: var(--col-grey) } .wp-country-code-tr { background-color: var(--col-red-very-dark) } .cc-col-red { color: var(--col-red) } .cc-col-orange { color: var(--col-orange) } .cc-col-yellow { color: var(--col-yellow) } .cc-col-lime { color: var(--col-lime) } .cc-col-green { color: var(--col-green) } .cc-col-teal { color: var(--col-teal) } .cc-col-light-blue { color: var(--col-blue-light) } .cc-col-blue { color: var(--col-blue) } .cc-col-purple { color: var(--col-purple) } .cc-col-pink { color: var(--col-pink) } .cc-col-grey { color: var(--col-grey) } .cc-col-light-grey { color: var(--col-grey-light) } .cc-col-very-light-grey { color: var(--col-grey-very-light) } .cc-col-white { color: var(--col-white) } .cc-col-black { color: var(--col-black) } .cc-col-admin { color: var(--col-admin) } .cc-col-vip { color: var(--col-vip) } .cc-col-female { color: var(--col-female) } .cc-col-diverse { color: var(--col-diverse) } .cc-col-male { color: var(--col-male) } .cc-col-private { color: var(--col-private) } .cc-col-lang-de { color: var(--col-grey) } .cc-col-lang-en { color: var(--col-orange) } .cc-col-lang-pt { color: var(--col-green) } .cc-col-lang-tr { color: var(--col-red) } .cc-col-lang-fr { color: var(--col-blue) } .cc-col-lang-es { color: var(--col-yellow) } .cc-col-red_inv { background: var(--col-red); color: var(--col-white) } .cc-col-orange_inv { background: var(--col-orange); color: var(--col-white) } .cc-col-yellow_inv { background: var(--col-yellow); color: var(--col-black) } .cc-col-lime_inv { background: var(--col-lime); color: var(--col-white) } .cc-col-green_inv { background: var(--col-green); color: var(--col-white) } .cc-col-teal_inv { background: var(--col-teal); color: var(--col-black) } .cc-col-light-blue_inv { background: var(--col-blue-light); color: var(--col-black) } .cc-col-blue_inv { background: var(--col-blue); color: var(--col-white) } .cc-col-blue_inv a { background: var(--col-white) } .cc-col-purple_inv { background: var(--col-purple); color: var(--col-white) } .cc-col-pink_inv { background: var(--col-pink); color: var(--col-white) } .cc-col-rose_inv { background: var(--col-rose); color: var(--col-black) } .cc-col-brown_inv { background: var(--col-brown); color: var(--col-white) } .cc-col-grey_inv { background: var(--col-grey); color: var(--col-black) } .cc-col-light-grey_inv { background: var(--col-grey-light); color: var(--col-black) } .cc-col-very-light-grey_inv { background: var(--col-grey-very-light); color: var(--col-black) } .cc-col-white_inv { background: var(--col-white); color: var(--col-black) } .cc-col-black_inv { background: var(--col-black); color: var(--col-white) } .cc-col-light-grey_inv { background: var(--col-grey-very-light); color: var(--col-black) } .cc-col-vip_inv { background: var(--col-vip); color: var(--col-black) } .cc-col-male_inv { background: var(--col-male); color: var(--col-black) } .cc-col-female_inv { background: var(--col-female); color: var(--col-black) } .cc-col-diverse_inv { background: var(--col-diverse); color: var(--col-black) } .cc-col-admin_inv { background: var(--col-admin); color: var(--col-white) } .cc-col-private_inv { background: var(--col-private); color: var(--col-white) } .cc-col-new_inv { background: var(--col-red); color: var(--col-white) } .cc-col-ok_inv { background: var(--col-ok); color: var(--col-white) } .cc-col-warning_inv { background: var(--col-warning); color: var(--col-white) } .cc-col-error_inv { background: var(--col-error); color: var(--col-white) } .cc-col-ugt_inv { background: var(--col-grey-very-light); color: var(--col-black) } .cc-col-lang-de_inv { background: var(--col-grey); color: var(--col-black) } .cc-col-lang-en_inv { background: var(--col-orange); color: var(--col-white) } .cc-col-lang-pt_inv { background: var(--col-green); color: var(--col-white) } .cc-col-lang-tr_inv { background: var(--col-red); color: var(--col-white) } .cc-col-lang-fr_inv { background: var(--col-blue); color: var(--col-white) } .cc-col-lang-es_inv { background: var(--col-yellow); color: var(--col-black) } .cc-col-color-text_light { opacity: .9 } .cc-col-accent { color: var(--col-accent-400) } .cc-col-color { color: var(--col-text-100) } .cc-col-color-text_light { opacity: .5 } .list-options .field { margin-bottom: 0 } .event--official-flag { padding: var(--padding-label); background: var(--col-official); color: var(--col-white) } .noscript-warning { position: relative; top: calc(-1.0 * var(--grain)) } .debug--text, .debug--html, #debug { display: none } .confirm-popup { position: absolute; width: 100%; height: 100%; background-color: var(--lay-col-site-bg-75); backdrop-filter: blur(2px); z-index: 1000 } .confirm-popup>*:first-child { position: absolute; width: 80%; top: 10%; left: 10% } * { overflow-x: hidden; }