/*

   NUOS CMS
   Copyright (c) 2025 Patrick Heyer
   https://nuos-cms.org

   This software is subject to the included license.
   Please see /nuos/license.txt for full details.

*/

/* fonts */
@import url("font/open-sans.css");
@import url("font/d-din.css");
@import url("font/entypo.css");

:root
{
    COLOR-SCHEME: only light;

    --cms-factor-raw: 0.0625vw;
    --cms-factor: max(1px, var(--cms-factor-raw));

    /* response */
    --cms-response-color: #808040;
    --cms-response-background: #f2f2da;

    /* success */
    --cms-success-color: #408040;
    --cms-success-background: #daf2da;

    /* error */
    --cms-error-color: #800000;
    --cms-error-background: #ffd9d9;

    /* general */
    --cms-color: #000000;
    --cms-color-alt: #ffffff;
    --cms-color-highlight: #d4004b;
    --cms-background: #ffffff;
    --cms-background-alt: #000000;
    --cms-font-family: "D-DIN", "Open Sans", "Arial", sans-serif;
    --cms-font-size: calc(17 * var(--cms-factor));
    --cms-font-weight: 500;
    --cms-line-height: 155%;

    /* link */
    --cms-link-color: #354352;
    --cms-link-color-alt: #d4004b;

    /* spacing */
    --cms-hpadding: calc(10 * var(--cms-factor));
    --cms-vpadding: calc(5 * var(--cms-factor));
    --cms-hspacing: calc(50 * var(--cms-factor));
    --cms-vspacing: calc(30 * var(--cms-factor));
    --cms-minwidth: calc(250 * var(--cms-factor));

    /* heading 1 */
    --cms-h1-color: inherit;
    --cms-h1-background: transparent;
    --cms-h1-font-family: inherit;
    --cms-h1-font-size: calc(43 * var(--cms-factor));
    --cms-h1-font-weight: 900;
    --cms-h1-line-height: 100%;

    /* heading 2 */
    --cms-h2-color: inherit;
    --cms-h2-background: transparent;
    --cms-h2-font-family: inherit;
    --cms-h2-font-size: calc(25 * var(--cms-factor));
    --cms-h2-font-weight: 600;
    --cms-h2-line-height: 117.5%;

    /* heading 3 */
    --cms-h3-color: inherit;
    --cms-h3-background: transparent;
    --cms-h3-font-family: inherit;
    --cms-h3-font-size: calc(22 * var(--cms-factor));
    --cms-h3-font-weight: 600;
    --cms-h3-line-height: 117.5%;

    /* input */
    --cms-input-color: #000000;
    --cms-input-color-alt: #000000;
    --cms-input-background: #f6f6f6;
    --cms-input-background-alt: #f6f6f6;
    --cms-input-border-width: var(--cms-factor);
    --cms-input-border-width-alt: var(--cms-factor);
    --cms-input-border-style: dotted;
    --cms-input-border-style-alt: solid;
    --cms-input-border-color: #b3b3b3;
    --cms-input-border-color-alt: #4d4d4d;
    --cms-input-border: var(--cms-input-border-width) var(--cms-input-border-style) var(--cms-input-border-color);
    --cms-input-border-alt: var(--cms-input-border-width-alt) var(--cms-input-border-style-alt) var(--cms-input-border-color-alt);

    /* checkbox */
    --cms-checkbox-color: #000000;
    --cms-checkbox-color-alt: #000000;
    --cms-checkbox-background: #f6f6f6;
    --cms-checkbox-background-alt: #f6f6f6;
    --cms-checkbox-border-width: var(--cms-factor);
    --cms-checkbox-border-width-alt: var(--cms-factor);
    --cms-checkbox-border-style: dotted;
    --cms-checkbox-border-style-alt: dotted;
    --cms-checkbox-border-color: #b3b3b3;
    --cms-checkbox-border-color-alt: #b3b3b3;
    --cms-checkbox-border: var(--cms-checkbox-border-width) var(--cms-checkbox-border-style) var(--cms-checkbox-border-color);
    --cms-checkbox-border-alt: var(--cms-checkbox-border-width-alt) var(--cms-checkbox-border-style-alt) var(--cms-checkbox-border-color-alt);

    /* button */
    --cms-button-color: #354352;
    --cms-button-color-alt: #ffffff;
    --cms-button-background: #ffffff;
    --cms-button-background-alt: #d4004b;
    --cms-button-border-width: var(--cms-factor);
    --cms-button-border-width-alt: var(--cms-factor);
    --cms-button-border-style: dotted;
    --cms-button-border-style-alt: solid;
    --cms-button-border-color: #354352;
    --cms-button-border-color-alt: #d4004b;
    --cms-button-border: var(--cms-button-border-width) var(--cms-button-border-style) var(--cms-button-border-color);
    --cms-button-border-alt: var(--cms-button-border-width-alt) var(--cms-button-border-style-alt) var(--cms-button-border-color-alt);

    /* separator */
    --cms-separator-width: calc(2 * var(--cms-factor));
    --cms-separator-style: dotted;
    --cms-separator-color: #666666;
    --cms-separator-border: var(--cms-separator-width) var(--cms-separator-style) var(--cms-separator-color);

    /* overlay */
    --cms-overlay-color: #ffffff;
    --cms-overlay-background: rgba(15, 15, 15, 0.95);

    /* scrollbar */
    --cms-scrollbar-color: #ffffff;
    --cms-scrollbar-color-alt: var(--cms-scrollbar-color);
    --cms-scrollbar-bgcolor: #000000;
    --cms-scrollbar-width: calc(10 * var(--cms-factor));

    /* shadow */
    --cms-box-shadow: var(--cms-factor) var(--cms-factor) calc(10 * var(--cms-factor)) rgba(0, 0, 0, 0.5);
}

/* global reset */
*
{
    BACKGROUND-ATTACHMENT: scroll;
    BACKGROUND-COLOR: transparent;
    BACKGROUND-IMAGE: none;
    BACKGROUND-POSITION: left top;
    BACKGROUND-REPEAT: no-repeat;
    BORDER: none;
    BORDER-RADIUS: 0;
    BOTTOM: auto;
    COLOR: inherit;
    FLOAT: none;
    FONT-FAMILY: inherit;
    FONT-SIZE: inherit;
    FONT-STYLE: inherit;
    FONT-VARIANT: inherit;
    FONT-WEIGHT: inherit;
    LEFT: auto;
    LETTER-SPACING: inherit;
    LINE-HEIGHT: inherit;
    MARGIN: 0;
    OVERFLOW: visible;
    OVERFLOW-WRAP: break-word;
    PADDING: 0;
    POSITION: relative;
    RIGHT: auto;
    TEXT-ALIGN: inherit;
    TEXT-DECORATION: inherit;
    TEXT-INDENT: 0;
    TEXT-TRANSFORM: inherit;
    TOP: auto;
    VERTICAL-ALIGN: top;
    VISIBILITY: inherit;
    WHITE-SPACE: inherit;
    WORD-BREAK: break-word;
    WORD-SPACING: inherit;
    WORD-WRAP: break-word;
    Z-INDEX: auto;
}

/* scrollbars */
*
{
    SCROLL-BEHAVIOR: smooth;
    SCROLLBAR-COLOR: var(--cms-scrollbar-color) var(--cms-scrollbar-bgcolor);
    SCROLLBAR-WIDTH: thin;
    -WEBKIT-OVERFLOW-SCROLLING: touch;
}

*:focus,
*:hover
{
    SCROLLBAR-COLOR: var(--cms-scrollbar-color-alt) var(--cms-scrollbar-bgcolor);
}

*::-webkit-scrollbar
{
    WIDTH: var(--cms-scrollbar-width);
}

*::-webkit-scrollbar-track
{
    BACKGROUND: var(--cms-scrollbar-bgcolor);
}

*::-webkit-scrollbar-thumb
{
    BACKGROUND: var(--cms-scrollbar-color);
    WIDTH: var(--cms-scrollbar-width);
}

*:focus::-webkit-scrollbar-thumb,
*:hover::-webkit-scrollbar-thumb
{
    BACKGROUND: var(--cms-scrollbar-color-alt);
}

/* html5 fallback */
ARTICLE, ASIDE, DETAILS, FIGCAPTION, FIGURE, FOOTER, HEADER, HGROUP, MAIN, MENU, NAV, SECTION, SUMMARY
{
    DISPLAY: block;
}

/* general */
BODY
{
    BACKGROUND: var(--cms-background);
    COLOR: var(--cms-color);
    FONT-FAMILY: var(--cms-font-family);
    FONT-SIZE: var(--cms-font-size);
    FONT-STYLE: normal;
    FONT-VARIANT: normal;
    FONT-WEIGHT: var(--cms-font-weight);
    LETTER-SPACING: 0;
    LINE-HEIGHT: var(--cms-line-height);
    MARGIN: var(--cms-vspacing) var(--cms-hspacing);
    TEXT-ALIGN: justify;
    TEXT-DECORATION: none;
    TEXT-INDENT: 0;
    TEXT-TRANSFORM: none;
    VISIBILITY: visible;
    WHITE-SPACE: normal;
    WORD-SPACING: 0;
    BACKGROUND-SIZE: cover;
    -MOZ-BACKGROUND-SIZE: cover;
    -WEBKIT-BACKGROUND-SIZE: cover;
    HYPHENS: auto;
    -MOZ-HYPHENS: auto;
    -MS-HYPHENS: auto;
    -WEBKIT-HYPHENS: auto;
}

/* semantic */
B, STRONG
{
    FONT-WEIGHT: 700;
}

BLOCKQUOTE, CITE, Q
{
    QUOTES: "“" "”" "‘" "’";
}

BLOCKQUOTE:before, CITE:before, Q:before
{
    CONTENT: open-quote;
}

BLOCKQUOTE:after, CITE:after, Q:after
{
    CONTENT: close-quote;
}

CODE, PRE
{
    FONT-FAMILY: monospace;
    WHITE-SPACE: pre-wrap;
}

DEL, S
{
    TEXT-DECORATION: line-through;
}

EM, I
{
    FONT-STYLE: italic;
}

SMALL
{
    FONT-SIZE: 0.85em;
    LINE-HEIGHT: var(--cms-line-height);
    VERTICAL-ALIGN: baseline;
}

SUB
{
    FONT-SIZE: 0.75em;
    TOP: 0.25em;
    VERTICAL-ALIGN: bottom;
}

SUP
{
    FONT-SIZE: 0.75em;
    TOP: -0.25em;
    VERTICAL-ALIGN: top;
}

U
{
    TEXT-DECORATION: underline;
}

/* link */
A
{
    COLOR: var(--cms-link-color);
    CURSOR: pointer;
    FONT-WEIGHT: 600;
    TEXT-DECORATION: none;
}

A:focus,
A:hover
{
    COLOR: var(--cms-link-color-alt);
    TEXT-DECORATION: underline;
}

/* heading */
H1,
.like-h1
{
    BACKGROUND: var(--cms-h1-background);
    BREAK-INSIDE: avoid;
    COLOR: var(--cms-h1-color);
    FONT-FAMILY: var(--cms-h1-font-family);
    FONT-SIZE: var(--cms-h1-font-size);
    FONT-WEIGHT: var(--cms-h1-font-weight);
    HYPHENS: none;
    LINE-HEIGHT: var(--cms-h1-line-height);
    MARGIN-BOTTOM: var(--cms-vspacing);
    TEXT-ALIGN: left;
    TEXT-TRANSFORM: uppercase;
    TEXT-WRAP: balance;
}

H2,
.like-h2
{
    BACKGROUND: var(--cms-h2-background);
    BREAK-INSIDE: avoid;
    COLOR: var(--cms-h2-color);
    FONT-FAMILY: var(--cms-h2-font-family);
    FONT-SIZE: var(--cms-h2-font-size);
    FONT-WEIGHT: var(--cms-h2-font-weight);
    HYPHENS: none;
    LINE-HEIGHT: var(--cms-h2-line-height);
    MARGIN-BOTTOM: var(--cms-vspacing);
    TEXT-ALIGN: left;
    TEXT-WRAP: pretty;
}

H3,
.like-h3
{
    BACKGROUND: var(--cms-h3-background);
    BREAK-INSIDE: avoid;
    COLOR: var(--cms-h3-color);
    FONT-FAMILY: var(--cms-h3-font-family);
    FONT-SIZE: var(--cms-h3-font-size);
    FONT-WEIGHT: var(--cms-h3-font-weight);
    LINE-HEIGHT: var(--cms-h3-line-height);
    MARGIN-BOTTOM: var(--cms-vspacing);
    TEXT-ALIGN: left;
    TEXT-WRAP: pretty;
}

/* paragraph */
P,
.p
{
    DISPLAY: block;
    MARGIN-BOTTOM: var(--cms-vspacing);
}

P,
.p,
DIV
{
    TEXT-WRAP: pretty;
}

/* table */
TABLE
{
    BORDER-COLLAPSE: collapse;
    BORDER-SPACING: 0;
}


/*
TR
{
    DISPLAY: none;
}

TR:has(TH:not(:empty), TD:not(:empty))
{
    DISPLAY: table-row;
}
*/

TH,
TD
{
    BORDER: var(--cms-factor) solid var(--cms-separator-color);
    PADDING: var(--cms-vpadding) var(--cms-hpadding);
}

TH
{
    FONT-WEIGHT: 700;
}

/*
TH:not(:empty),
TD:not(:empty)
{
    BORDER: var(--cms-factor) solid var(--cms-separator-color);
}
*/

.varied
{

}

/* list */
OL,
UL
{
    MARGIN: 0 0 var(--cms-vspacing) var(--cms-hspacing);
}

LI
{
    BREAK-INSIDE: avoid;
    MARGIN-BOTTOM: calc(var(--cms-vspacing) / 4);
}

H1:last-child,
.like-h1:last-child,
H2:last-child,
.like-h2:last-child,
H3:last-child,
.like-h3:last-child,
P:last-child,
.p:last-child,
OL:last-child,
UL:last-child,
LI:last-child
{
    MARGIN-BOTTOM: 0;
}

/* media*/
CANVAS,
IMG,
OBJECT,
SVG,
VIDEO
{
    BORDER: none;
    CONTAIN: layout paint style;
    HEIGHT: auto;
    MAX-WIDTH: 100%;
    OVERFLOW: clip;
    OVERFLOW-CLIP-MARGIN: content-box;
    VERTICAL-ALIGN: middle;
}

/* whitespace */
BR
{
    CLEAR: both;
}

NOBR
{
    WHITE-SPACE: nowrap;
}

PRE
{
    WHITE-SPACE: pre-wrap;
}

/* separator */
HR
{
    BORDER: none;
    BORDER-BOTTOM: var(--cms-separator-border);
    COLOR: transparent;
    DISPLAY: block;
    BACKGROUND-COLOR: transparent;
    HEIGHT: 0;
    MARGIN: var(--cms-vspacing) 0;
    WIDTH: 100%;
}

/* response */
DIV.response
{
    BACKGROUND: var(--cms-response-background);
    COLOR: var(--cms-response-color);
    FONT-WEIGHT: 500;
    MARGIN: var(--cms-vspacing) 0;
    PADDING: var(--cms-vpadding) var(--cms-hpadding);
}

DIV.response *
{
    COLOR: var(--cms-response-color);
}

DIV.response-success
{
    BACKGROUND: var(--cms-success-background);
    COLOR: var(--cms-success-color);
    FONT-WEIGHT: 500;
    MARGIN: var(--cms-vspacing) 0;
    PADDING: var(--cms-vpadding) var(--cms-hpadding);
}

DIV.response-success *
{
    COLOR: var(--cms-success-color);
}

DIV.response-error
{
    BACKGROUND: var(--cms-error-background);
    COLOR: var(--cms-error-color);
    FONT-WEIGHT: 500;
    MARGIN: var(--cms-vspacing) 0;
    PADDING: var(--cms-vpadding) var(--cms-hpadding);
}

DIV.response-error *
{
    COLOR: var(--cms-error-color);
}

DIV.response:empty,
DIV.response-success:empty,
DIV.response-error:empty
{
    DISPLAY: none;
}

/* form */
FIELDSET
{
    MARGIN: 0 0 var(--cms-vspacing);
}

LEGEND
{
    FLOAT: left;
    FONT-WEIGHT: 700;
    WIDTH: 100%;
}

LABEL
{
    COLOR: var(--cms-link-color);
    FONT-WEIGHT: 700;
}

LABEL[for]
{
    CURSOR: pointer;
}

LABEL:has(INPUT[type=checkbox]),
LABEL:has(INPUT[type=radio])
{
    CURSOR: pointer;
    FONT-WEIGHT: 600;
}

LABEL:focus,
LABEL:hover
{
    COLOR: var(--cms-link-color-alt);
}

/* input */
INPUT[type=email],
INPUT[type=password],
INPUT[type=text],
SELECT,
TEXTAREA
{
    BACKDROP-FILTER: blur(calc(2.5 * var(--cms-factor))) brightness(90%);
    BACKGROUND: var(--cms-input-background);
    BORDER: var(--cms-input-border);
    BOX-SIZING: border-box;
    COLOR: var(--cms-input-color);
    FONT-WEIGHT: var(--cms-font-weight);
    MARGIN: 0 var(--cms-hpadding) var(--cms-hpadding) 0;
    MAX-WIDTH: 100%;
    MIN-HEIGHT: calc(40 * var(--cms-factor));
    PADDING: var(--cms-vpadding) var(--cms-hpadding);
    TEXT-ALIGN: left;
}

SELECT
{
    CURSOR: pointer;
}

TEXTAREA
{
    WHITE-SPACE: pre-wrap;
}

INPUT[type=email]:not([size]),
INPUT[type=password]:not([size]),
INPUT[type=text]:not([size]),
TEXTAREA:not([cols])
{
    WIDTH: 100%;
}

TEXTAREA:not([rows])
{
    HEIGHT: 15em;
}

INPUT[type=email]:focus,
INPUT[type=password]:focus,
INPUT[type=text]:focus,
SELECT:focus,
TEXTAREA:focus
{
    BACKGROUND: var(--cms-input-background-alt);
    BORDER: var(--cms-input-border-alt);
    COLOR: var(--cms-input-color-alt);
    OUTLINE: none;
}

INPUT[type=email]:valid
{
    BACKGROUND-COLOR: var(--cms-success-background);
    BORDER-COLOR: var(--cms-success-color);
}

/* checkbox */
INPUT[type=checkbox],
INPUT[type=radio]
{
    CURSOR: pointer;
    HEIGHT: 0;
    MARGIN-RIGHT: calc(var(--cms-font-size) * 0.75 + var(--cms-hpadding) / 2);
    VERTICAL-ALIGN: baseline;
    WIDTH: 0;
    -MOZ-APPEARANCE: initial;
}

INPUT[type=checkbox]:before,
INPUT[type=radio]:before
{
    BACKDROP-FILTER: blur(calc(2.5 * var(--cms-factor))) brightness(90%);
    BACKGROUND: var(--cms-checkbox-background);
    BORDER: var(--cms-checkbox-border);
    BOTTOM: 0;
    BOX-SIZING: border-box;
    CONTENT: "";
    CURSOR: pointer;
    HEIGHT: calc(var(--cms-font-size) * 0.75);
    LEFT: 0;
    POSITION: absolute;
    WIDTH: calc(var(--cms-font-size) * 0.75);
}

INPUT[type=checkbox]:checked:before,
INPUT[type=radio]:checked:before
{
    BACKGROUND: var(--cms-checkbox-background-alt);
    BORDER: var(--cms-checkbox-border-alt);
}

INPUT[type=checkbox]:after,
INPUT[type=radio]:after
{
    BACKGROUND: transparent;
    BOTTOM: calc(var(--cms-font-size) * -0.1);
    BOX-SIZING: border-box;
    CONTENT: "";
    CURSOR: pointer;
    HEIGHT: calc(var(--cms-font-size) * 1.1);
    LEFT: calc(var(--cms-font-size) * -0.1);
    POSITION: absolute;
    WIDTH: calc(var(--cms-font-size) * 1.1);
}

@keyframes checkbox-check
{
      0% { OPACITY: 0; TRANSFORM: translateY(-25%) scale(0.75); }
    100% { OPACITY: 1; TRANSFORM: translateY(  0)  scale(1);    }
}

INPUT[type=checkbox]:checked:after,
INPUT[type=radio]:checked:after
{
    ANIMATION: checkbox-check 0.5s;
    BACKGROUND: var(--cms-checkbox-color);
    CLIP-PATH: polygon(0% 50%, 32.5% 72.5%, 100% 0%, 32.5% 100%);
}

INPUT[type=radio]:before,
INPUT[type=radio]:after
{
    BORDER-RADIUS: 50%;
}

OPTION
{
    BACKGROUND: var(--cms-background);
    COLOR: var(--cms-color);
}

::placeholder
{
    COLOR: var(--cms-input-color);
    OPACITY: 0.5;
}

:focus::placeholder
{
    COLOR: var(--cms-input-color-alt);
}

/* button */
A.button,
BUTTON,
INPUT[type=button],
INPUT[type=submit]
{
    BACKDROP-FILTER: blur(calc(2.5 * var(--cms-factor))) brightness(90%);
    BACKGROUND: var(--cms-button-background);
    BORDER: var(--cms-button-border);
    BOX-SIZING: border-box;
    COLOR: var(--cms-button-color);
    CURSOR: pointer;
    DISPLAY: inline-block;
    FONT-WEIGHT: 600;
    MARGIN: 0 var(--cms-hpadding) var(--cms-hpadding) 0;
    MIN-HEIGHT: calc(40 * var(--cms-factor));
    MIN-WIDTH: 100px;
    PADDING: var(--cms-vpadding) var(--cms-hpadding);
    TEXT-ALIGN: center;
    TEXT-DECORATION: none;
    USER-SELECT: none;
}

A.button:focus,
A.button:hover,
BUTTON:focus,
BUTTON:hover,
INPUT[type=button]:focus,
INPUT[type=button]:hover,
INPUT[type=submit]:focus,
INPUT[type=submit]:hover
{
    BACKGROUND: var(--cms-button-background-alt);
    BORDER: var(--cms-button-border-alt);
    COLOR: var(--cms-button-color-alt);
}

BUTTON:disabled,
INPUT:disabled,
SELECT:disabled,
TEXTAREA:disabled
{
    FILTER: grayscale(1);
    OPACITY: 0.5;
    POINTER-EVENTS: none;
}

/* forms */
SECTION.mailform FIELDSET.mailform-mismatch LEGEND,
SECTION.mailform DIV.mailform-mismatch LABEL,
SECTION.profile FIELDSET.profile-mismatch LEGEND,
SECTION.profile DIV.profile-mismatch LABEL
{
    COLOR: var(--cms-error-color);
}

SECTION.mailform .mailform-mismatch INPUT[type=text],
SECTION.mailform .mailform-mismatch SELECT,
SECTION.mailform .mailform-mismatch TEXTAREA,
SECTION.profile .profile-mismatch INPUT[type=password],
SECTION.profile .profile-mismatch INPUT[type=text],
SECTION.profile .profile-mismatch SELECT,
SECTION.profile .profile-mismatch TEXTAREA
{
    BACKGROUND: var(--cms-error-background);
    BORDER-COLOR: var(--cms-error-color);
}

SECTION.mailform DIV.mailform-multicolumn
{
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    MARGIN: 0 0 calc(var(--cms-vpadding) * -1) calc(var(--cms-hpadding) * -1);
}

SECTION.mailform DIV.mailform-multicolumn > DIV
{
    BOX-SIZING: border-box;
    PADDING: 0 0 var(--cms-vpadding) var(--cms-hpadding);
}

@media (max-width: 640px)
{
    SECTION.mailform DIV.mailform-multicolumn > DIV
    {
        WIDTH: 100% !important;
    }
}

/* chat / core control */
.cms-chat-interface
{
    DISPLAY: grid;
    GAP: var(--cms-vspacing) var(--cms-hspacing);
    GRID-TEMPLATE-ROWS: auto 1fr auto;
    HEIGHT: calc(100vh - var(--cms-vspacing) * 2);
    WIDTH: calc(100vw - var(--cms-hspacing) * 2);
}

#chat-control-switch
{
    DISPLAY: none;
}

#chat-menu
{
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GRID-COLUMN: 1;
    GRID-ROW: 1;
    JUSTIFY-SELF: end;
    MARGIN-LEFT: calc(var(--cms-hspacing) * -1);
    USER-SELECT: none;
}

#chat-menu > *
{
    MARGIN-LEFT: var(--cms-hspacing);
}

#chat-menu > *:nth-child(1):before
{
    CONTENT: "\e967\00a0";
    FONT-FAMILY: "Entypo";
}

#chat-menu > *:nth-child(2):before
{
    CONTENT: "\e8e6\00a0";
    FONT-FAMILY: "Entypo";
}

#chat-menu > *:nth-child(3):before
{
    CONTENT: "\e87d\00a0";
    FONT-FAMILY: "Entypo";
}

#chat-output
{
    GRID-COLUMN: 1;
    GRID-ROW: 2;
    OVERFLOW-Y: auto;
    PADDING-RIGHT: var(--cms-hspacing);
    TEXT-ALIGN: left;
    WIDTH: 100%;
}

#chat-output A
{
    COLOR: inherit;
}

#chat-input
{
    GRID-COLUMN: 1;
    GRID-ROW: 3;
}

#chat-input > FORM
{
    DISPLAY: block;
}

#chat-emoticon-switch
{
    BACKGROUND-COLOR: var(--cms-link-color);
    FONT-SIZE: 0;
    HEIGHT: calc(40 * var(--cms-factor));
    LEFT: 0;
    MASK: url("/data/template/chat-emoticon.svg") no-repeat center / 75%;
    OVERFLOW: hidden;
    POSITION: absolute;
    TOP: 0;
    USER-SELECT: none;
    WIDTH: calc(40 * var(--cms-factor));
    -WEBKIT-MASK: url("/data/template/chat-emoticon.svg") no-repeat center / 75%; /* safari */
}

#chat-emoticon-switch:focus,
#chat-emoticon-switch:hover
{
    BACKGROUND-COLOR: var(--cms-link-color-alt);
}

#chat-emoticon-trigger,
#chat-emoticon
{
    DISPLAY: none;
}

#chat-emoticon-trigger:checked + #chat-emoticon
{
    DISPLAY: flex;
    FLEX-WRAP: wrap-reverse;
    PADDING: var(--cms-vpadding) 0;
}

#chat-data
{
    PADDING-LEFT: calc(40 * var(--cms-factor));
}

#chat-control
{
    BACKGROUND: var(--cms-background);
    BOTTOM: 0;
    CONTAIN: strict;
    DISPLAY: grid;
    GRID-COLUMN: 1;
    GRID-ROW: 1 / span 3;
    GRID-TEMPLATE-ROWS: auto 1fr;
    LEFT: 0;
    OVERFLOW: hidden;
    PADDING: var(--cms-vspacing) var(--cms-hspacing);
    POSITION: fixed;
    RIGHT: 0;
    TOP: 0;
    TRANSFORM: translateX(100vw);
    TRANSITION: transform 0.5s;
    WILL-CHANGE: transform;
}

#chat-control-head
{
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    JUSTIFY-CONTENT: space-between;
    MARGIN-LEFT: calc(var(--cms-hspacing) * -1);
    USER-SELECT: none;
}

#chat-control-head > *
{
    MARGIN: 0 0 var(--cms-vspacing) var(--cms-hspacing);
}

#chat-control-head > *:first-child:before
{
    CONTENT: "\e83d\00a0";
    FONT-FAMILY: "Entypo";
}

#chat-settings
{
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    MARGIN-LEFT: 0;
}

#chat-settings > *
{
    MARGIN-LEFT: var(--cms-hspacing);
}

#chat-settings > *:last-child:before
{
    CONTENT: "\e873\00a0";
    FONT-FAMILY: "Entypo";
}

#chat-control-iframe
{
    HEIGHT: calc(100% + var(--cms-vspacing));
    WIDTH: calc(100% + var(--cms-hspacing));
}

#chat-control-switch:checked ~ #chat-control
{
    TRANSFORM: none;
}

.cms-chat-control
{
    MARGIN: 0 var(--cms-hspacing) var(--cms-vspacing) 0;
}

.chat-message,
.chat-message-private,
.chat-message-system,
.chat-message-info,
.core-control-channel,
.core-control-profile
{
    BACKGROUND-COLOR: var(--cms-input-background);
    BORDER-RADIUS: var(--cms-hpadding);
    DISPLAY: block;
    MARGIN-BOTTOM: var(--cms-vpadding);
    PADDING: var(--cms-vpadding) var(--cms-hpadding);
}

.chat-message-private
{
    BORDER-WIDTH: calc(2 * var(--cms-factor));
    BORDER-STYLE: dotted;
}

.chat-message:has(.chat-message-image),
.chat-message-private:has(.chat-message-image),
.core-control-profile:has(.core-control-profile-image)
{
    PADDING-LEFT: calc(35 * var(--cms-factor) + var(--cms-hpadding) * 2);
    MIN-HEIGHT: calc(35 * var(--cms-factor));
}

.chat-message-image,
.core-control-profile-image
{
    BORDER-RADIUS: 100%;
    HEIGHT: calc(35 * var(--cms-factor));
    LEFT: var(--cms-hpadding);
    OBJECT-FIT: cover;
    POSITION: absolute;
    WIDTH: calc(35 * var(--cms-factor));
}

.chat-message-name,
.core-control-channel-name,
.core-control-profile-name
{
    FONT-WEIGHT: bold;
}

.core-control-channel-status,
.core-control-profile-status
{
    FONT-SIZE: 0.75em;
}

.core-control-list
{
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    MARGIN: 0 calc(var(--cms-vpadding) * -1) calc(var(--cms-vpadding) * -1 + var(--cms-vspacing)) 0;
}

.core-control-list > *
{
    FLEX: 1 1 calc(250 * var(--cms-factor));
    MARGIN: 0 var(--cms-vpadding) var(--cms-vpadding) 0;
}

/* identification */
BODY.cms-identification
{
    ALIGN-ITEMS: center;
    DISPLAY: flex;
    JUSTIFY-CONTENT: center;
    MARGIN: 0;
    MIN-HEIGHT: calc(100vh - var(--cms-vspacing) * 2);
}

BODY.cms-identification > *
{
    PADDING: var(--cms-vspacing) var(--cms-hspacing);
    MAX-WIDTH: calc(250 * var(--cms-factor));
    OUTLINE: 50vmax solid var(--cms-overlay-background);
    WIDTH: 100%;
}

/* -------- DO NOT CHANGE BELOW -------- */

/* layout tables */
TABLE.layout
{
    BACKGROUND-COLOR: transparent;
    BORDER: none;
    BORDER-COLLAPSE: collapse;
    BORDER-SPACING: 0;
    EMPTY-CELLS: show;
    MARGIN: 0;
    TABLE-LAYOUT: auto;
}

TABLE.layout > TR,
TABLE.layout > TBODY > TR
{
    BACKGROUND-COLOR: transparent;
    BORDER: none;
}

TABLE.layout > TR > TD,
TABLE.layout > TBODY > TR > TD
{
    BACKGROUND-COLOR: transparent;
    BORDER: none;
    PADDING: 0;
}

/* error messages */
DIV.error
{
    BACKGROUND-COLOR: rgba(255, 255, 255, 0.95);
    BORDER: 2px solid #ff6a00;
    BOTTOM: auto;
    COLOR: #293131;
    LEFT: auto;
    MARGIN: 40px 50px;
    MAX-HEIGHT: 500px;
    MAX-WIDTH: 350px;
    OVERFLOW: auto;
    OUTLINE: 2px solid #ffffff;
    PADDING: 9px 14px 11px;
    POSITION: fixed;
    RIGHT: 0;
    TOP: 0;
    WHITE-SPACE: normal;
    Z-INDEX: 1000;
}

DIV.error A,
DIV.error LABEL
{
    COLOR: #ff6a00;
    CURSOR: pointer;
}

DIV.error SMALL
{
    COLOR: #737c85;
}

DIV.error INPUT,
DIV.error INPUT + *
{
    DISPLAY: none;
}

DIV.error INPUT:checked + *
{
    DISPLAY: block;
}

/* textcontrol */
DIV.textcontrol
{
    BACKGROUND: var(--cms-link-color);
    LINE-HEIGHT: 100%;
    PADDING: 2px;
}

DIV.textcontrol IMG
{
    PADDING: 4px;
}

/* permission */
.permission
{
    LINE-HEIGHT: 100%;
    TEXT-ALIGN: right;
}

.permission IMG
{
    VERTICAL-ALIGN: middle;
}