*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --FocusSize: 5px;
    --BorderSize: 0.1px;
    --LineHeight: normal;
    --SmallIconSize: 1.4em;
    --Padding2: calc(var(--Padding) * 2);
    --LargeIconSize: calc(var(--SmallIconSize) * 2);
    --XSmallIconSize: calc(var(--SmallIconSize) / 2);
    --ItemHeightXS: calc(var(--SmallIconSize) + var(--Padding2));
    --ItemHeightS: calc(var(--SmallIconSize) + var(--Padding2));
    --ItemHeightL: calc(var(--LargeIconSize) + var(--Padding2));
    --MobileHidden: '';
    --MobileVisible: none;
    --NameValueColumns: max-content minmax(0,1fr);
}

@media (max-width: 575px) {
    :root {
        --NameValueColumns: minmax(0,1fr);
        --MobileHidden: none;
        --MobileVisible: '';
    }
}

*:focus-visible {
    outline: none;
}

html {
    font-family: var(--FontFamily);
    font-size: var(--FontSize);
    background-color: var(--BgColor);
    color: var(--FgColor);
    line-height: var(--LineHeight);
}

body {
    margin: 0;
    padding: 0;
}

div, p, span {
    padding: 0;
    margin: 0;
}

table, th, td {
    border: none;
    border-collapse: collapse;
}

input, textarea {
    margin: 0;
    padding: var(--Padding);
    border: none;
    box-shadow: none;
    outline: none;
    background-color: var(--InputBackgroundColor);
    color: var(--InputTextColor);
    overflow: unset;
    min-width: 0;
    font-family: var(--FontFamily);
    font-size: 1em;
    resize: none;
}

hr {
    padding: 0;
    margin: 0;
    border: none;
    border-bottom: var(--BorderSize) solid var(--ThmBorderColor);
}

iframe {
    border: none;
}

.font-normal {
    font-size: var(--FontSize);
}

.font-small {
    font-size: var(--FontSizeSmall);
}

.font-large {
    font-size: var(--FontSizeLarge);
}

.text-left {
    text-align: start;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: end;
}

.shadow {
    box-shadow: 3px 3px 3px 0 #444;
}

.box-shadow {
    box-shadow: 0 0 var(--FocusSize) 0 var(--ThmDisabledBorderColor);
}

.border, .border-active {
    border: var(--BorderSize) solid var(--ThmBorderColor);
}

.border.disabled, .border-active.disabled, .border:disabled, .border-active:disabled {
    border: var(--BorderSize) solid var(--ThmDisabledBorderColor);
}

.line-bottom {
    border: none;
    border-bottom: var(--BorderSize) solid var(--ThmBorderColor);
}

.popup-open .border-active, .border-active:focus, .border-active:active, .border-active.active, .border-active:focus-within, .border-active.popup-open {
    border: var(--BorderSize) solid var(--ThmActiveBorderColor);
}

.border-left {
    border-left: var(--BorderSize) solid var(--ThmBorderColor);
}

.border-right {
    border-right: var(--BorderSize) solid var(--ThmBorderColor);
}

.border-top {
    border-top: var(--BorderSize) solid var(--ThmBorderColor);
}

.border-bottom {
    border-bottom: var(--BorderSize) solid var(--ThmBorderColor);
}

.header {
    min-height: var(--ItemHeight);
    display: flex;
    align-items: end;
}

.header-title {
    padding: var(--Padding);
    text-align: center;
    font-size: var(--FontSizeLarge);
}

.item {
    display: flex;
    align-items: center;
    cursor: default;
    padding: var(--Padding);
    gap: var(--Spacing);
}

.item > span {
    overflow: auto;
    white-space: nowrap;
    user-select: none;
}

.item-xs {
    height: var(--ItemHeightXS);
}

.item-s {
    height: var(--ItemHeightS);
}

.item-l {
    height: var(--ItemHeightL);
}

.item-v {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
    padding: var(--Padding);
    gap: var(--Spacing);
}

.separator {
    padding: var(--Padding);
}

.separator > div {
    border: none;
    border-bottom: var(--BorderSize) solid var(--ThmBorderColor);
    border-right: var(--BorderSize) solid var(--ThmBorderColor);
    width: 100%;
    height: 100%;
}

@media (max-width:575px) {
    .mobile-hidden {
        display: none;
    }
}

@media (min-width:575px) {
    .mobile-visible {
        display: none;
    }
}

.mobile-hidden-text > span:not(.icon) {
    display: var(--MobileHidden);
}

.link-text {
    user-select: none;
    cursor: pointer;
}

.button {
    border-radius: 0.25em;
    padding: var(--Padding) 1em;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    border: var(--BorderSize) solid var(--ThmBorderColor);
    width: max-content;
    min-width: max-content;
}

.button.default-button, .button:focus, .button:active {
    box-shadow: 0 0 var(--FocusSize) 0 var(--ThmDisabledBorderColor);
}

.center {
    margin: auto;
}

.right {
    margin-left: auto;
}

.icon::before {
    content: "";
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: var(--Icon);
    display: block;
}

.icon.popup:not(.item-v):not(.no-dropdownarrow)::after {
    content: "";
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: var(--image-arrow-down1-svg);
    display: block;
    margin-left: var(--Spacing);
}

@media (max-width: 575px) {

    .icon.popup:not(.item-v):not(.no-dropdownarrow)::after {
        margin-left: auto;
    }

}

.icon-s::before, .icon-s.popup:not(.item-v)::after {
    width: var(--SmallIconSize);
    height: var(--SmallIconSize);
}

.icon-l::before, .icon-l.popup:not(.item-v)::after {
    width: var(--LargeIconSize);
    height: var(--LargeIconSize);
}

.icon-xs::before, .icon-xs.popup:not(.item-v)::after {
    width: var(--XSmallIconSize);
    height: var(--XSmallIconSize);
}

.textbox {
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.textbox input {
    min-height: var(--ItemHeightS);
}

.hidden {
    display: none !important;
}

.font-l {
    font-size: var(--FontSizeLarge);
}

.padding {
    padding: var(--Padding);
}

.margin {
    margin: var(--Padding);
}

.underline {
    text-decoration: underline;
}

.italic {
    font-style: oblique;
}

.bold {
    font-weight: bold;
}

.message-box {
    margin: auto;
    margin-top: 1em;
    width: fit-content;
    max-width: 90%;
    min-width: 30%;
    padding: 1em;
    border-radius: 0.5em;
    box-shadow: 0 0 var(--FocusSize) 0 var(--ThmDisabledBorderColor);
}

.message-box > .message-box-text {
    overflow: auto;
    padding: 0.5em 2em 2em 0.5em;
}

.message-box > .message-box-buttons {
    display: flex;
    flex-wrap: nowrap;
    justify-items: end;
    gap: 1.5em;
    margin-top: 0.5em;
}

.message-box-buttons > span {
    flex: 0 0 auto;
    user-select: none;
    cursor: pointer;
}

.modal {
    overflow: auto;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

*.disabled, *.disabled * {
    cursor: default;
    pointer-events: none;
}

.delay-show {
    visibility: hidden;
    -webkit-animation: delay-show 2s linear infinite; /* Safari */
    animation: delay-show 2s linear infinite;
    animation-delay: 2s;
}

/* Safari */
@-webkit-keyframes delay-show {
    0% {
        visibility: visible;
    }

    100% {
        visibility: visible;
    }
}

@keyframes delay-show {
    from {
        visibility: visible;
    }

    to {
        visibility: visible;
    }
}

.loader {
    visibility: hidden;
    -webkit-animation: loader 2s linear infinite; /* Safari */
    animation: loader 2s linear infinite;
    animation-delay: 2s;
    border-style: solid;
    border-radius: 50%;
    border-color: var(--ThmActiveBorderColor) transparent var(--ThmActiveBorderColor) transparent;
}

/* Safari */
@-webkit-keyframes loader {
    0% {
        transform: rotate(0deg);
        visibility: visible;
    }

    100% {
        transform: rotate(360deg);
        visibility: visible;
    }
}

@keyframes loader {
    from {
        transform: rotate(0deg);
        visibility: visible;
    }

    to {
        transform: rotate(360deg);
        visibility: visible;
    }
}

.lockscreen {
    display: grid;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    overflow: auto;
    background-color: transparent;
}

.lockscreen-loader .loader {
    border-width: 1em;
    margin: auto;
    width: 10em;
    height: 10em;
}

.lockscreen-loader {
    animation-name: lockscreen-ani;
    animation-duration: 10s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}

/* Safari */
@-webkit-keyframes lockscreen-ani {
    0% {
        background-color: var(--ThmBkColor);
    }

    100% {
        background-color: var(--ThmBkColor);
    }
}

@keyframes lockscreen-ani {
    from {
        background-color: var(--ThmBkColor);
    }

    to {
        background-color: var(--ThmBkColor);
    }
}