:root {
    --white: white;
    --black: black;
    --black-bg: color-mix(in srgb, var(--black) 75%, var(--white));
    --text-color: color-mix(in srgb, var(--black) 75%, var(--white));
    --filter: invert(0);
    --button-hover-background-color: color-mix(in srgb, var(--black) 15%, var(--white));
    --button-pressed-background-color: color-mix(in srgb, var(--black) 15%, var(--white));
    --bg: color-mix(in srgb, var(--black) 5%, var(--white));
    --green: green;
    --base-font-size: .875rem;
    --smaller-font-size: .8rem;
    --base-line-height: 1.6rem;
    --base-font-family: system-ui, sans-serif;
    --compact-font-family: system-ui, sans-serif;
    --margin: calc(var(--base-line-height) * 1.7);
    --x2-margin: calc(var(--margin) * 2);
    --half-margin: calc(var(--margin) / 2);
    --quarter-margin: calc(var(--margin) / 4);
    --border-radius: 1rem;
    --border-radius-10: 10px;
    --line-height: var(--base-line-height);
    --p-margin: var(--line-height);
    --background-color: #00195e;
    --mobile: 0;
    --bold: 700;
    --c1: color-mix(in srgb, var(--app-color-11) 80%, var(--app-color-10));
    --c2: color-mix(in srgb, var(--app-color-11) 50%, var(--app-color-10));
    --c3: color-mix(in srgb, var(--app-color-11) 20%, var(--app-color-10));
    --c4: #00195e;
    --control-height: 30px;
    --img-icon-heigth: 30px;
    --app-color: #3f48cc;
    --app-color-2: #b1b1b1;
    --app-color-10: #00205a;
    --app-color-11: #0042bb;
    --app-color-hover: #242db8;
    --width-90: 90px;
    --btn-border-radius: 2px;
    --a-color: #1823b6;
    --border1: 1px solid;
    --border2: 2px solid;
    --min-clickable-size-1: 20px;
    --min-clickable-width-size-1: var(--min-clickable-size-1);
    --gap2: 2px;
    --gap5: 5px;
    --gap10: calc(var(--gap5) * 2);
    --gap15: calc(var(--gap5) * 3);
    --gap20: calc(var(--gap5) * 4);
    --padding5: var(--gap5);
    --padding10: var(--gap10);
    --padding15: var(--gap15);
    --padding20: var(--gap20);
    --margin5: var(--gap5);
    --margin10: var(--gap10);
    --margin15: var(--gap15);
    --box-shadow-1: 0 0 20px color-mix(in srgb, white 50%, black);
    --border-color-1: var(--app-color-2);
    --border-bottom-1: dashed 1px color-mix(in srgb, var(--black) 40%, var(--white));

    @media (width <= 400px) {
        --margin: calc(var(--base-line-height) * 1.2);
    }

    @media (width <= 850px) {
        --base-font-size: 1rem;
        --smaller-font-size: .8rem;
        --mobile: 1;
    }

    @media (prefers-color-scheme: dark) {
        --white: #111;
        --black: #f5f5f5;
        --box-shadow-1: 0 0 10px color-mix(in srgb, white 20%, black);
        --filter: invert(1);
    }
}

:root {
}

a {
    --_n: 90%;

    @media (prefers-color-scheme: dark) {
        --_n: 50%;
    }

    --a-color: color-mix(in srgb, var(--app-color-11) var(--_n), var(--black));

    color: var(--a-color);
}

main a {
    text-decoration: none;
    border-bottom: solid 1px;
    font-weight: bold;
}

    main .main-cms-container a:not(.public),
    main a.cms {
        color: #0000d9;
    }

:is(body, #a #b #c) main :is(a:hover, a:active, a:focus) {
    color: #af00bb;
}

html {
    -webkit-text-size-adjust: 100%;
    font-weight: var(--base-font-weight);
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
    font-family: var(--base-font-family);
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: var(--black);
}

* {
    box-sizing: border-box;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, h5, strong {
    font-weight: var(--bold);
    text-wrap: balance;
}

h3 {
    font-size: 1.1rem;
}

h2 {
    font-size: 1.2rem;
}

h1 {
    font-size: 1.3rem;
}

.form {
    display: grid;
    font-size: 90%;
    grid-template-columns: 1fr 3fr;
    max-width: 40rem;
    background: var(--white);
    padding: var(--margin);
    border-radius: 1rem;
    gap: var(--half-margin);
    position: relative;
}

    .form .row {
        display: contents;
    }

:is(input, select, textarea, button) {
    height: 2.5rem;
    width: 100%;
    padding-inline: .5rem;
    border: solid 2px #dddde0;
    border-radius: .2rem;
    font-weight: var(--bold);
}

body .form textarea {
    height: 8rem;
    padding-block: .5rem;
    font-family: inherit;
}

.form .row > :first-child {
    display: flex;
    align-items: center;
}

.form .row .zoom-factor,
.form .row .offset {
    max-width: 5rem;
}

.form .row .sublabel-char {
    font-size: 140%;
    font-weight: var(--bold);
}

.form .row .x2,
.form .row .x21 {
    grid-column: span 2;
}

.form .row .x21 {
    gap: var(--gap10);
}

button.delete {
    height: 2.5rem;
    min-width: 5rem;
    scale: .9;
}

    button.delete:hover,
    button.delete:active {
        background: red;
        color: var(--white);
    }

.h1-wrap {
    display: flex;
    align-items: center;
    gap: 50px;
    min-height: 2.5rem;
}

    .h1-wrap button.delete {
        max-width: 10rem;
    }

    button {
        cursor: pointer;
        max-width: 10rem;
        height: 3rem;
        font-size: var(--base-font-size);

        &:not(:disabled) {
            &:hover {
                background: linear-gradient(var(--c2), var(--c3));
                border-color: var(--c3);
            }

            &:active {
                background: linear-gradient(var(--c3), var(--c2));
                border-color: var(--c3);
            }

            &.delete, 
            &.edit {
                --c1: #f5f5f5;
                --c2: #f0f0f0;
                --c3: #e5e5e5;
                color: inherit;
            }

            &.edit {
                display: flex;
                align-items: center;
                width: auto;
                height: inherit;
                padding: var(--padding10);
            }
        }
    }

button:not(:disabled) {
    background: linear-gradient(var(--c1), var(--c2));
    border-color: var(--c2);
    color: white;
}

    :is(button, input):disabled {
        cursor: default !important;
    }


.main-cms-container {
    margin-top: var(--half-margin);
}

main table,
main .form {
    border: solid 2px #ddd;
    border-radius: 10px;
}

    main table td {
        padding: var(--quarter-margin) var(--half-margin);
        background: var(--white);
    }

    main table th {
        padding: var(--quarter-margin) var(--half-margin);
        font-weight: var(--bold);
    }

    main table td .num {
        text-align: center;
    }

    main table tfoot td {
        padding-top: var(--half-margin);
    }


a.a-type1 {
}

    a.a-type1:hover, a.a-type1:active {
        text-decoration: underline;
    }

label,
button.cancel-button {
    color: var(--black);
}

button.cancel-button {
    --c1: color-mix(in srgb, var(--white) 95%, var(--black));
    --c2: color-mix(in srgb, var(--white) 90%, var(--black));
    --c3: color-mix(in srgb, var(--white) 85%, var(--black));
}

#featuredUpdatedialog .featured-header .close {
    position: absolute;
    right: var(--padding10);
    top: var(--padding10);
}

textarea {
    font-family: inherit;
}

button.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding10);
    background: unset;
    border: none;
    width: auto;
}

    button.icon img,
    img.icon {
        filter: var(--filter);
    }

a.icon {
    display: flex;
    align-items: center;
}

img.icon {
    height: var(--img-icon-heigth);
}

button.icon:hover {
    background: color-mix(in srgb, var(--c4) 90%, var(--white));
}

.error {
    color: red;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    select, textarea, input {
        font-size: 1rem;
    }
}

:is(h2, h3, h4) {
    & + br {
        display: none;

        & + br {
            display: none;
        }
    }
}