:root {
    --input-container-focus-color: #32ade6;
    --input-container-secondary-color: #86868b;
    --input-container-foreground-color: #000;
    --input-container-background-color: #fff;
    --input-container-invalid-color: #ff3b30;

    --input-button-primary-color: #fafafa;
    --input-button-primary-hover-color: #d9d9d9;
    --input-button-primary-active-color: #d0d0d0;
    --input-button-highlight-color: rgb(0, 113, 227);
    --input-button-highlight-hover-color: #0077ED;
    --input-button-highlight-active-color: #006EDB;
    --input-button-foreground-color: #000;
    --input-button-corner-radius: 30px;

    --input-min-width: 300px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --input-container-foreground-color: #fff;
        --input-container-background-color: #000;
        /* Dark-mode optimized button colors */
        --input-button-primary-color: #1f1f1f;
        --input-button-primary-hover-color: #2a2a2a;
        --input-button-primary-active-color: #171717;
        --input-button-highlight-color: #3390ff; /* vivid blue for contrast */
        --input-button-highlight-hover-color: #1f7fe6;
        --input-button-highlight-active-color: #176fd0;
        --input-button-foreground-color: #ffffff;
    }
}

.input-container {
    position: relative;
    display: inline-block;
    font-family: sans-serif;
    min-width: var(--input-min-width);
    background: var(--input-container-background-color);
    border-radius: 10px;
}

.input-container.fullwidth {
    width: 100%;
}

.input-container input,
.input-container select {
    width: 100%;
    padding: 20px 10px 10px 10px;
    border: 1px solid var(--input-container-secondary-color);
    color: var(--input-container-foreground-color);
    border-radius: 10px;
    font-size: 16px;
    box-sizing: border-box;
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none; 
    background: none;
}

.input-container label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    padding: 0 5px;
    color: var(--input-container-secondary-color);
    transition: 0.2s;
    pointer-events: none;
}

.input-container label.icon {
    background-size: 16px 16px;
    text-indent: 30px;
}

.input-container input:focus + label.icon {
    text-indent: 20px;
}

@media (prefers-color-scheme: dark) {
    .input-container label.icon {
        filter: invert(1);
    }
}

.input-container label.search {
    background: url(../img/icons/magnifyingglass.svg) no-repeat left 10px center;
}

.input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label,
.input-container select:valid + label  {
    top: 15px;
    left: 5px;
    font-size: 12px;
    color: var(--input-container-secondary-color);
}

.input-container input:focus,
.input-container select:focus {
    outline: 1px solid var(--input-container-focus-color);
}

.input-container select {
    padding-right: 40px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2386868b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat right 10px center;
    background-size: 16px 16px;
}

/*::picker(select) {
    display: flex;
    appearance: base-select;
}*/

select option *:nth-child(2) {
    padding-left: 5px;
    opacity: 0.5;
}

/* Invalid apperance */
.input-container input:user-invalid,
.input-container select:user-invalid {
    outline: 1px solid red;
}

/* Loading state */
.input-container:has(select.loading)::after, .input-container:has(input.loading)::after {
    content: '';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: url(../img/icons/spinner.png) no-repeat center center;
    background-size: 20px 20px;
    animation: spin 1s linear infinite;
}

.input-container:has(input.loading) input, .input-container:has(select.loading) select {
    opacity: 0.5;
    pointer-events: none;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (prefers-color-scheme: dark) {
    .input-container:has(.loading)::after {
        filter: invert();
    }
}

input[type="button"], button {
    padding: 15px;
    height: 50px;
    border: none;
    border-radius: var(--input-button-corner-radius);
    font-size: 16px;
    font-weight: 300;
    font-family: sans-serif;
    background-color: var(--input-button-primary-color);
    color: var(--input-button-foreground-color);
    transition: background-color 0.2s, color 0.2s;
    user-select: none;
}

input[type="button"]:hover, button:hover {
    background-color: var(--input-button-primary-hover-color);
    color: var(--input-button-foreground-color)
}

input[type="button"]:active, button:active {
    background-color: var(--input-button-primary-active-color);
}

input[type="button"]:disabled, button:disabled, 
input[type="button"].highlight.disabled, button.highlight.disabled, 
input[type="button"].secondary.disabled, button.secondary.disabled {
    background-color: var(--input-container-secondary-color);
    cursor: default;
    opacity: 0.5;
    border: 0px;
}

/* Highlight button */
input[type="button"].highlight, button.highlight,
input[type="button"].secondary, button.secondary {
    background-color: var(--input-button-highlight-color);
    color: var(--input-button-primary-color);
    border: 1px solid var(--input-button-highlight-color);
}

input[type="button"].highlight:hover:not(.disabled), button.highlight:hover:not(.disabled),
input[type="button"].secondary:hover:not(.disabled), button.secondary:hover:not(.disabled) {
    background-color: var(--input-button-highlight-hover-color);
    color: var(--input-button-primary-color)
}

input[type="button"].highlight:active, button.seconhighlightdary:active,
input[type="button"].secondary:active, button.secondary:active {
    background-color: var(--input-button-highlight-active-color);
}

input[type="button"].secondary, button.secondary {
    background-color: initial;
    color: var(--input-button-highlight-color);
    border: 1px solid var(--input-button-highlight-color);
}

input[type="button"].major, button.major {
    width: 100%;
}

input[type="button"].minor, button.minor {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
}

input[type="button"].destructive, button.destructive {
    background-color: var(--input-container-invalid-color);
    color: var(--input-button-primary-color);
}

input[type="button"].destructive:hover, button.destructive:hover {
    background-color: var(--input-container-invalid-color);
    opacity: 0.8;
}

/* Button icons */
.icon-container {
    position: relative;
    display: inline-block;
}

.icon-container input[type="button"], .icon-container button, button.icon-container {
    padding-left: 40px; /* Platz für das Icon */
    position: relative;
}

.icon-container::after {
    position: absolute;
    top: 10px;
    left: 13px;
    bottom: 10px;
    width: 20px;
    pointer-events: none;
    content: '';
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.icon-container:not(.highlight)::after {
    filter: invert(1);
}

@media (prefers-color-scheme: dark) {
    .icon-container:not(.highlight)::after {
        filter: invert(0);
    }

    .icon-container.highlight::after {
        filter: invert(1);
    }
}

.icon-container.basketball::after {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLUdlbmVyYXRvcjogQXBwbGUgTmF0aXZlIENvcmVTVkcgMjI4LS0+CjwhRE9DVFlQRSBzdmcKUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIKICAgICAgICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjIwLjI4MzIiIGhlaWdodD0iMTkuOTEyMSI+CiA8Zz4KICA8cmVjdCBoZWlnaHQ9IjE5LjkxMjEiIG9wYWNpdHk9IjAiIHdpZHRoPSIyMC4yODMyIiB4PSIwIiB5PSIwIi8+CiAgPHBhdGggZD0iTTAuMDA5NzY1NjIgOS44MzM5OEMwLjg2OTE0MSA4LjY1MjM0IDEuOTUzMTIgNy41NTg1OSAzLjEzNDc3IDYuNjYwMTZDMy4xMjUgNi42MjEwOSAzLjEyNSA2LjU3MjI3IDMuMTE1MjMgNi41MjM0NEMzLjA3NjE3IDUuODEwNTUgMi42MTcxOSA0LjQyMzgzIDEuNzg3MTEgNC4zMDY2NEMwLjcyMjY1NiA1LjgzMDA4IDAuMDY4MzU5NCA3LjY1NjI1IDAgOS42MTkxNEMwIDkuNjk3MjcgMCA5Ljc2NTYyIDAuMDA5NzY1NjIgOS44MzM5OFpNNC4xNjAxNiA1LjkzNzVDNC40NzI2NiA1LjczMjQyIDQuNzk0OTIgNS41MzcxMSA1LjExNzE5IDUuMzYxMzNDNC45MTIxMSAzLjU5Mzc1IDQuOTkwMjMgMi4xNTgyIDUuMjkyOTcgMS4xNzE4OEM0LjIwODk4IDEuNzU3ODEgMy4yNTE5NSAyLjUyOTMgMi40NDE0MSAzLjQ0NzI3QzMuNDE3OTcgMy43MTA5NCAzLjk2NDg0IDQuOTYwOTQgNC4xNjAxNiA1LjkzNzVaTTYuMTUyMzQgNC44NDM3NUM2LjYzMDg2IDQuNjE5MTQgNy4xMjg5MSA0LjQyMzgzIDcuNjM2NzIgNC4yNTc4MUM3LjYxNzE5IDQuMDUyNzMgNy41OTc2NiAzLjg1NzQyIDcuNTk3NjYgMy42NTIzNEM3LjU5NzY2IDIuMDg5ODQgOC40Mzc1IDAuNzkxMDE2IDkuNzQ2MDkgMEM5LjY3NzczIDAgOS42Mjg5MSAwIDkuNTYwNTUgMEM4LjQ2NjggMC4wMzkwNjI1IDcuNDAyMzQgMC4yNjM2NzIgNi40MjU3OCAwLjY0NDUzMUM2LjE2MjExIDEuNTEzNjcgNS45NjY4IDIuOTAwMzkgNi4xNTIzNCA0Ljg0Mzc1Wk04Ljc0MDIzIDMuOTI1NzhDOS45NjA5NCAzLjYxMzI4IDExLjI0MDIgMy40NDcyNyAxMi41Njg0IDMuNDQ3MjdDMTQuNTUwOCAzLjQ0NzI3IDE2LjUyMzQgMy44Mzc4OSAxOC4yOTEgNC41NjA1NUMxNi44NzUgMi4zODI4MSAxNC42Mzg3IDAuNzgxMjUgMTIuMDMxMiAwLjIxNDg0NEM5Ljk3MDcgMC44MTA1NDcgOC42NzE4OCAxLjkxNDA2IDguNzIwNyAzLjY1MjM0QzguNzIwNyAzLjc0MDIzIDguNzMwNDcgMy44Mzc4OSA4Ljc0MDIzIDMuOTI1NzhaTTMuMTE1MjMgOC4xMTUyM0MxLjk5MjE5IDkuMTExMzMgMC45NDcyNjYgMTAuMzAyNyAwLjEzNjcxOSAxMS42MDE2QzAuNTE3NTc4IDEzLjgyODEgMS42Njk5MiAxNS44MzAxIDMuMzAwNzggMTcuMzE0NUMyLjExOTE0IDE0LjU0MSAyLjk2ODc1IDExLjA4NCAzLjExNTIzIDguMTE1MjNaTTQuMjY3NTggNy4yMDcwM0M0LjI5Njg4IDExLjY2OTkgMi4yODUxNiAxNi43ODcxIDYuNjAxNTYgMTkuMjY3NkM3LjYzNjcyIDE5LjY3NzcgOC43NzkzIDE5LjkxMjEgOS45NjA5NCAxOS45MTIxQzEwLjUwNzggMTkuOTEyMSAxMS4wNDQ5IDE5Ljg3MyAxMS41NjI1IDE5Ljc4NTJDNy44MzIwMyAxNS4yMzQ0IDUuOTU3MDMgMTAuMzMyIDUuMjkyOTcgNi41NDI5N0M0Ljk0MTQxIDYuNzQ4MDUgNC41OTk2MSA2Ljk2Mjg5IDQuMjY3NTggNy4yMDcwM1pNNy45Mzk0NSA1LjMyMjI3QzcuMzgyODEgNS41MTc1OCA2LjgyNjE3IDUuNzQyMTkgNi4yOTg4MyA2LjAwNTg2QzYuODk0NTMgOS42ODc1IDguNzY5NTMgMTQuNzc1NCAxMi43ODMyIDE5LjQ5MjJDMTQuOTEyMSAxOC44NTc0IDE2Ljc1NzggMTcuNTA5OCAxOC4wMzcxIDE1LjcyMjdDMTcuODkwNiAxMC45MTggOS43MTY4IDkuNDgyNDIgNy45Mzk0NSA1LjMyMjI3Wk0xOC45MTYgMTQuMjY3NkMxOS41NjA1IDEyLjk0OTIgMTkuOTIxOSAxMS40OTQxIDE5LjkyMTkgOS45NTExN0MxOS45MjE5IDguNjIzMDUgMTkuNjU4MiA3LjM0Mzc1IDE5LjE2MDIgNi4xOTE0MUMxNy4wODAxIDUuMTA3NDIgMTQuOTMxNiA0LjU3MDMxIDEyLjU2ODQgNC41NzAzMUMxMS4zNDc3IDQuNTcwMzEgMTAuMTY2IDQuNzE2OCA5LjA0Mjk3IDVDMTAuNTk1NyA4LjIxMjg5IDE3LjQ3MDcgOS42NTgyIDE4LjkxNiAxNC4yNjc2WiIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+CiA8L2c+Cjwvc3ZnPgo=");
}

.icon-container.share::after {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLUdlbmVyYXRvcjogQXBwbGUgTmF0aXZlIENvcmVTVkcgMjI4LS0+CjwhRE9DVFlQRSBzdmcKUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIKICAgICAgICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjE3LjY5NTMiIGhlaWdodD0iMjYuNDc0NiI+CiA8Zz4KICA8cmVjdCBoZWlnaHQ9IjI2LjQ3NDYiIG9wYWNpdHk9IjAiIHdpZHRoPSIxNy42OTUzIiB4PSIwIiB5PSIwIi8+CiAgPHBhdGggZD0iTTE3LjMzNCAxMC43NjE3TDE3LjMzNCAyMC41MDc4QzE3LjMzNCAyMi41MTk1IDE2LjMwODYgMjMuNTM1MiAxNC4yNjc2IDIzLjUzNTJMMy4wNjY0MSAyMy41MzUyQzEuMDI1MzkgMjMuNTM1MiAwIDIyLjUxOTUgMCAyMC41MDc4TDAgMTAuNzYxN0MwIDguNzUgMS4wMjUzOSA3LjczNDM4IDMuMDY2NDEgNy43MzQzOEw2LjAwNTg2IDcuNzM0MzhMNi4wMDU4NiA5LjMwNjY0TDMuMDg1OTQgOS4zMDY2NEMyLjEwOTM4IDkuMzA2NjQgMS41NzIyNyA5LjgzMzk4IDEuNTcyMjcgMTAuODQ5NkwxLjU3MjI3IDIwLjQxOTlDMS41NzIyNyAyMS40MzU1IDIuMTA5MzggMjEuOTYyOSAzLjA4NTk0IDIxLjk2MjlMMTQuMjM4MyAyMS45NjI5QzE1LjIwNTEgMjEuOTYyOSAxNS43NjE3IDIxLjQzNTUgMTUuNzYxNyAyMC40MTk5TDE1Ljc2MTcgMTAuODQ5NkMxNS43NjE3IDkuODMzOTggMTUuMjA1MSA5LjMwNjY0IDE0LjIzODMgOS4zMDY2NEwxMS4zMjgxIDkuMzA2NjRMMTEuMzI4MSA3LjczNDM4TDE0LjI2NzYgNy43MzQzOEMxNi4zMDg2IDcuNzM0MzggMTcuMzM0IDguNzUgMTcuMzM0IDEwLjc2MTdaIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz4KICA8cGF0aCBkPSJNOC42NjIxMSAxNS44ODg3QzkuMDgyMDMgMTUuODg4NyA5LjQ0MzM2IDE1LjUzNzEgOS40NDMzNiAxNS4xMjdMOS40NDMzNiA1LjA5NzY2TDkuMzg0NzcgMy42MzI4MUwxMC4wMzkxIDQuMzI2MTdMMTEuNTIzNCA1LjkwODJDMTEuNjYwMiA2LjA2NDQ1IDExLjg1NTUgNi4xNDI1OCAxMi4wNTA4IDYuMTQyNThDMTIuNDUxMiA2LjE0MjU4IDEyLjc2MzcgNS44NDk2MSAxMi43NjM3IDUuNDQ5MjJDMTIuNzYzNyA1LjI0NDE0IDEyLjY3NTggNS4wODc4OSAxMi41MjkzIDQuOTQxNDFMOS4yMjg1MiAxLjc1NzgxQzkuMDMzMiAxLjU2MjUgOC44NjcxOSAxLjQ5NDE0IDguNjYyMTEgMS40OTQxNEM4LjQ2NjggMS40OTQxNCA4LjMwMDc4IDEuNTYyNSA4LjA5NTcgMS43NTc4MUw0Ljc5NDkyIDQuOTQxNDFDNC42NDg0NCA1LjA4Nzg5IDQuNTcwMzEgNS4yNDQxNCA0LjU3MDMxIDUuNDQ5MjJDNC41NzAzMSA1Ljg0OTYxIDQuODYzMjggNi4xNDI1OCA1LjI3MzQ0IDYuMTQyNThDNS40NTg5OCA2LjE0MjU4IDUuNjczODMgNi4wNjQ0NSA1LjgxMDU1IDUuOTA4Mkw3LjI4NTE2IDQuMzI2MTdMNy45NDkyMiAzLjYzMjgxTDcuODkwNjIgNS4wOTc2Nkw3Ljg5MDYyIDE1LjEyN0M3Ljg5MDYyIDE1LjUzNzEgOC4yNDIxOSAxNS44ODg3IDguNjYyMTEgMTUuODg4N1oiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPgogPC9nPgo8L3N2Zz4K");
}

.icon-container.import::after {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLUdlbmVyYXRvcjogQXBwbGUgTmF0aXZlIENvcmVTVkcgMjI4LS0+CjwhRE9DVFlQRSBzdmcKUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIKICAgICAgICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjE3LjY5NTMiIGhlaWdodD0iMjUuMzQxOCI+CiA8Zz4KICA8cmVjdCBoZWlnaHQ9IjI1LjM0MTgiIG9wYWNpdHk9IjAiIHdpZHRoPSIxNy42OTUzIiB4PSIwIiB5PSIwIi8+CiAgPHBhdGggZD0iTTE3LjMzNCAxMC4xOTUzTDE3LjMzNCAxOS45NDE0QzE3LjMzNCAyMS45NTMxIDE2LjMwODYgMjIuOTY4OCAxNC4yNjc2IDIyLjk2ODhMMy4wNjY0MSAyMi45Njg4QzEuMDI1MzkgMjIuOTY4OCAwIDIxLjk1MzEgMCAxOS45NDE0TDAgMTAuMTk1M0MwIDguMTgzNTkgMS4wMjUzOSA3LjE2Nzk3IDMuMDY2NDEgNy4xNjc5N0w2LjAwNTg2IDcuMTY3OTdMNi4wMDU4NiA4Ljc0MDIzTDMuMDg1OTQgOC43NDAyM0MyLjEwOTM4IDguNzQwMjMgMS41NzIyNyA5LjI2NzU4IDEuNTcyMjcgMTAuMjgzMkwxLjU3MjI3IDE5Ljg1MzVDMS41NzIyNyAyMC44NjkxIDIuMTA5MzggMjEuMzk2NSAzLjA4NTk0IDIxLjM5NjVMMTQuMjM4MyAyMS4zOTY1QzE1LjIwNTEgMjEuMzk2NSAxNS43NjE3IDIwLjg2OTEgMTUuNzYxNyAxOS44NTM1TDE1Ljc2MTcgMTAuMjgzMkMxNS43NjE3IDkuMjY3NTggMTUuMjA1MSA4Ljc0MDIzIDE0LjIzODMgOC43NDAyM0wxMS4zMjgxIDguNzQwMjNMMTEuMzI4MSA3LjE2Nzk3TDE0LjI2NzYgNy4xNjc5N0MxNi4zMDg2IDcuMTY3OTcgMTcuMzM0IDguMTgzNTkgMTcuMzM0IDEwLjE5NTNaIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz4KICA8cGF0aCBkPSJNOC42NjIxMSAxNi41NDNDOC44NjcxOSAxNi41NDMgOS4wMzMyIDE2LjQ4NDQgOS4yMjg1MiAxNi4yODkxTDEyLjUyOTMgMTMuMDk1N0MxMi42NzU4IDEyLjk0OTIgMTIuNzYzNyAxMi43OTMgMTIuNzYzNyAxMi41ODc5QzEyLjc2MzcgMTIuMTg3NSAxMi40NTEyIDExLjkwNDMgMTIuMDUwOCAxMS45MDQzQzExLjg1NTUgMTEuOTA0MyAxMS42NjAyIDExLjk4MjQgMTEuNTIzNCAxMi4xMzg3TDEwLjAzOTEgMTMuNzEwOUw5LjM4NDc3IDE0LjQwNDNMOS40NDMzNiAxMi45Mzk1TDkuNDQzMzYgMi42NDY0OEM5LjQ0MzM2IDIuMjM2MzMgOS4wODIwMyAxLjg4NDc3IDguNjYyMTEgMS44ODQ3N0M4LjI0MjE5IDEuODg0NzcgNy44OTA2MiAyLjIzNjMzIDcuODkwNjIgMi42NDY0OEw3Ljg5MDYyIDEyLjkzOTVMNy45NDkyMiAxNC40MDQzTDcuMjg1MTYgMTMuNzEwOUw1LjgxMDU1IDEyLjEzODdDNS42NzM4MyAxMS45ODI0IDUuNDU4OTggMTEuOTA0MyA1LjI3MzQ0IDExLjkwNDNDNC44NjMyOCAxMS45MDQzIDQuNTcwMzEgMTIuMTg3NSA0LjU3MDMxIDEyLjU4NzlDNC41NzAzMSAxMi43OTMgNC42NDg0NCAxMi45NDkyIDQuNzk0OTIgMTMuMDk1N0w4LjA5NTcgMTYuMjg5MUM4LjMwMDc4IDE2LjQ4NDQgOC40NjY4IDE2LjU0MyA4LjY2MjExIDE2LjU0M1oiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPgogPC9nPgo8L3N2Zz4K");
}

.icon-container.clear::after {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLUdlbmVyYXRvcjogQXBwbGUgTmF0aXZlIENvcmVTVkcgMjI4LS0+CjwhRE9DVFlQRSBzdmcKUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIKICAgICAgICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjIwLjI4MzIiIGhlaWdodD0iMTkuOTMxNiI+CiA8Zz4KICA8cmVjdCBoZWlnaHQ9IjE5LjkzMTYiIG9wYWNpdHk9IjAiIHdpZHRoPSIyMC4yODMyIiB4PSIwIiB5PSIwIi8+CiAgPHBhdGggZD0iTTkuOTYwOTQgMTkuOTIxOUMxNS40MTAyIDE5LjkyMTkgMTkuOTIxOSAxNS40MDA0IDE5LjkyMTkgOS45NjA5NEMxOS45MjE5IDQuNTExNzIgMTUuNDAwNCAwIDkuOTUxMTcgMEM0LjUxMTcyIDAgMCA0LjUxMTcyIDAgOS45NjA5NEMwIDE1LjQwMDQgNC41MjE0OCAxOS45MjE5IDkuOTYwOTQgMTkuOTIxOVpNOS45NjA5NCAxOC4yNjE3QzUuMzUxNTYgMTguMjYxNyAxLjY2OTkyIDE0LjU3MDMgMS42Njk5MiA5Ljk2MDk0QzEuNjY5OTIgNS4zNTE1NiA1LjM0MTggMS42NjAxNiA5Ljk1MTE3IDEuNjYwMTZDMTQuNTYwNSAxLjY2MDE2IDE4LjI2MTcgNS4zNTE1NiAxOC4yNjE3IDkuOTYwOTRDMTguMjYxNyAxNC41NzAzIDE0LjU3MDMgMTguMjYxNyA5Ljk2MDk0IDE4LjI2MTdaIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuODUiLz4KICA8cGF0aCBkPSJNNi42MjEwOSAxNC4wOTE4QzYuODQ1NyAxNC4wOTE4IDcuMDQxMDIgMTQuMDAzOSA3LjE4NzUgMTMuODQ3N0w5Ljk1MTE3IDExLjA3NDJMMTIuNzM0NCAxMy44NDc3QzEyLjg4MDkgMTMuOTk0MSAxMy4wNjY0IDE0LjA5MTggMTMuMjkxIDE0LjA5MThDMTMuNzIwNyAxNC4wOTE4IDE0LjA3MjMgMTMuNzQwMiAxNC4wNzIzIDEzLjMwMDhDMTQuMDcyMyAxMy4wNzYyIDEzLjk5NDEgMTIuOTAwNCAxMy44Mzc5IDEyLjc0NDFMMTEuMDY0NSA5Ljk3MDdMMTMuODQ3NyA3LjE3NzczQzE0LjAxMzcgNy4wMTE3MiAxNC4wODIgNi44NDU3IDE0LjA4MiA2LjYzMDg2QzE0LjA4MiA2LjIwMTE3IDEzLjczMDUgNS44NDk2MSAxMy4zMDA4IDUuODQ5NjFDMTMuMDk1NyA1Ljg0OTYxIDEyLjkyOTcgNS45Mjc3MyAxMi43NjM3IDYuMDkzNzVMOS45NTExNyA4Ljg3Njk1TDcuMTY3OTcgNi4xMDM1MkM3LjAyMTQ4IDUuOTQ3MjcgNi44NDU3IDUuODY5MTQgNi42MjEwOSA1Ljg2OTE0QzYuMTkxNDEgNS44NjkxNCA1LjgzOTg0IDYuMjEwOTQgNS44Mzk4NCA2LjY0MDYyQzUuODM5ODQgNi44NTU0NyA1LjkyNzczIDcuMDQxMDIgNi4wNzQyMiA3LjE4NzVMOC44NDc2NiA5Ljk3MDdMNi4wNzQyMiAxMi43NTM5QzUuOTI3NzMgMTIuOTAwNCA1LjgzOTg0IDEzLjA4NTkgNS44Mzk4NCAxMy4zMDA4QzUuODM5ODQgMTMuNzQwMiA2LjE5MTQxIDE0LjA5MTggNi42MjEwOSAxNC4wOTE4WiIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+CiA8L2c+Cjwvc3ZnPgo=");
}

.icon-container.plus::after {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLUdlbmVyYXRvcjogQXBwbGUgTmF0aXZlIENvcmVTVkcgMzQxLS0+CjwhRE9DVFlQRSBzdmcKUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIKICAgICAgICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDgwLjU2NjQgODAuNjE1MiI+CiA8Zz4KICA8cmVjdCBoZWlnaHQ9IjgwLjYxNTIiIG9wYWNpdHk9IjAiIHdpZHRoPSI4MC41NjY0IiB4PSIwIiB5PSIwIi8+CiAgPHBhdGggZD0iTTQ0LjY3NzcgNzYuMjIwN0w0NC42Nzc3IDQuMzQ1N0M0NC42Nzc3IDIuMDAxOTUgNDIuNjc1OCAwIDQwLjI4MzIgMEMzNy44OTA2IDAgMzUuOTM3NSAyLjAwMTk1IDM1LjkzNzUgNC4zNDU3TDM1LjkzNzUgNzYuMjIwN0MzNS45Mzc1IDc4LjU2NDUgMzcuODkwNiA4MC41NjY0IDQwLjI4MzIgODAuNTY2NEM0Mi42NzU4IDgwLjU2NjQgNDQuNjc3NyA3OC41NjQ1IDQ0LjY3NzcgNzYuMjIwN1pNNC4zNDU3IDQ0LjYyODlMNzYuMjIwNyA0NC42Mjg5Qzc4LjU2NDUgNDQuNjI4OSA4MC41NjY0IDQyLjY3NTggODAuNTY2NCA0MC4yODMyQzgwLjU2NjQgMzcuODkwNiA3OC41NjQ1IDM1Ljg4ODcgNzYuMjIwNyAzNS44ODg3TDQuMzQ1NyAzNS44ODg3QzIuMDAxOTUgMzUuODg4NyAwIDM3Ljg5MDYgMCA0MC4yODMyQzAgNDIuNjc1OCAyLjAwMTk1IDQ0LjYyODkgNC4zNDU3IDQ0LjYyODlaIiBmaWxsPSJ3aGl0ZSIvPgogPC9nPgo8L3N2Zz4K");
}

.icon-container.submit::after {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLUdlbmVyYXRvcjogQXBwbGUgTmF0aXZlIENvcmVTVkcgMzQxLS0+CjwhRE9DVFlQRSBzdmcKUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIKICAgICAgICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwNy4zMjQgMTA3Ljk1OSI+CiA8Zz4KICA8cmVjdCBoZWlnaHQ9IjEwNy45NTkiIG9wYWNpdHk9IjAiIHdpZHRoPSIxMDcuMzI0IiB4PSIwIiB5PSIwIi8+CiAgPHBhdGggZD0iTTYxLjEzMjggMTA3Ljk1OUM2NC42NDg0IDEwNy45NTkgNjcuMTM4NyAxMDQuOTMyIDY4Ljk0NTMgMTAwLjI0NEwxMDAuOTI4IDE2LjY5OTJDMTAxLjgwNyAxNC40NTMxIDEwMi4yOTUgMTIuNDUxMiAxMDIuMjk1IDEwLjc5MUMxMDIuMjk1IDcuNjE3MTkgMTAwLjM0MiA1LjY2NDA2IDk3LjE2OCA1LjY2NDA2Qzk1LjUwNzggNS42NjQwNiA5My41MDU5IDYuMTUyMzQgOTEuMjU5OCA3LjAzMTI1TDcuMjc1MzkgMzkuMjA5QzMuMTczODMgNDAuNzcxNSAwIDQzLjI2MTcgMCA0Ni44MjYyQzAgNTEuMzE4NCAzLjQxNzk3IDUyLjgzMiA4LjEwNTQ3IDU0LjI0OEw0My4zNTk0IDY0LjU5OTZMNTMuNjEzMyA5OS40MTQxQzU1LjA3ODEgMTA0LjM0NiA1Ni41OTE4IDEwNy45NTkgNjEuMTMyOCAxMDcuOTU5Wk00NS41NTY2IDU3LjE3NzdMMTEuODY1MiA0Ni44NzVDMTEuMDg0IDQ2LjYzMDkgMTAuODM5OCA0Ni40MzU1IDEwLjgzOTggNDYuMDkzOEMxMC44Mzk4IDQ1Ljc1MiAxMS4wMzUyIDQ1LjUwNzggMTEuNzY3NiA0NS4yMTQ4TDc3Ljc4MzIgMjAuMjE0OEM4MS42ODk1IDE4Ljc1IDg1LjQ0OTIgMTYuNzk2OSA4OS4wNjI1IDE1LjEzNjdDODUuODM5OCAxNy43NzM0IDgxLjgzNTkgMjAuODk4NCA3OS4xNTA0IDIzLjU4NFpNNjEuOTE0MSA5Ny4yMTY4QzYxLjUyMzQgOTcuMjE2OCA2MS4zMjgxIDk2Ljg3NSA2MS4wODQgOTYuMDkzOEw1MC43ODEyIDYyLjQwMjNMODQuMzc1IDI4LjgwODZDODcuMDExNyAyNi4xNzE5IDkwLjI4MzIgMjIuMDcwMyA5Mi44NzExIDE4Ljc1QzkxLjIxMDkgMjIuNDYwOSA4OS4yMDkgMjYuMjIwNyA4Ny43NDQxIDMwLjE3NThMNjIuNzQ0MSA5Ni4xOTE0QzYyLjQ1MTIgOTYuOTIzOCA2Mi4yNTU5IDk3LjIxNjggNjEuOTE0MSA5Ny4yMTY4WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC44NSIvPgogPC9nPgo8L3N2Zz4K");
}

input[type="button"].loading, button.loading {
    cursor: default;

}
.icon-container.loading::after {
    pointer-events: none;
    background: url(../img/icons/spinner.png) no-repeat center center;
    background-size: 20px 20px;
    animation: spin 1s linear infinite;
}

.collapsible {
	max-height: 20px;
  	overflow: hidden;

  	transition: max-height .45s ease-in-out;
}

.collapsible > input[type='checkbox'] {
  display: none;
}

.collapsible-toggle {
  display: block;
  color: var(--input-button-highlight-active-color);
  cursor: pointer;
  transition: all 0.25s ease-out;
  margin-left: 5px;
}

.collapsible-toggle::before {
	content: '';
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLUdlbmVyYXRvcjogQXBwbGUgTmF0aXZlIENvcmVTVkcgMjI4LS0+CjwhRE9DVFlQRSBzdmcKUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIKICAgICAgICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjExLjY4OTUiIGhlaWdodD0iMTYuOTYyOSI+CiA8Zz4KICA8cmVjdCBoZWlnaHQ9IjE2Ljk2MjkiIG9wYWNpdHk9IjAiIHdpZHRoPSIxMS42ODk1IiB4PSIwIiB5PSIwIi8+CiAgPHBhdGggZD0iTTExLjY4OTUgOC40NzY1NkMxMS42ODk1IDguMjMyNDIgMTEuNTkxOCA4LjAwNzgxIDExLjQwNjIgNy44MzIwM0wzLjY3MTg4IDAuMjUzOTA2QzMuNDk2MDkgMC4wODc4OTA2IDMuMjgxMjUgMCAzLjAyNzM0IDBDMi41MjkzIDAgMi4xMzg2NyAwLjM4MDg1OSAyLjEzODY3IDAuODg4NjcyQzIuMTM4NjcgMS4xMzI4MSAyLjIzNjMzIDEuMzU3NDIgMi4zOTI1OCAxLjUyMzQ0TDkuNTAxOTUgOC40NzY1NkwyLjM5MjU4IDE1LjQyOTdDMi4yMzYzMyAxNS41OTU3IDIuMTM4NjcgMTUuODEwNSAyLjEzODY3IDE2LjA2NDVDMi4xMzg2NyAxNi41NzIzIDIuNTI5MyAxNi45NTMxIDMuMDI3MzQgMTYuOTUzMUMzLjI4MTI1IDE2Ljk1MzEgMy40OTYwOSAxNi44NjUyIDMuNjcxODggMTYuNjg5NUwxMS40MDYyIDkuMTIxMDlDMTEuNTkxOCA4LjkzNTU1IDExLjY4OTUgOC43MjA3IDExLjY4OTUgOC40NzY1NloiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC44NSIvPgogPC9nPgo8L3N2Zz4K");
    width: 12px;
    height: 12px;
    margin-right: 5px;
  	display: inline-block;

  	transition: transform .2s ease-out;
}

.collapsible:has(.toggle:checked) {
  max-height: 100vh;
}

.collapsible:has(.toggle:checked) > .collapsible-toggle::before  {
  transform: rotate(90deg);
}

@media (prefers-color-scheme: light) {
    .collapsible-toggle::before {
        filter: invert(1);
    }
}

ol {
	list-style-type: none;
	margin: 0px;
	padding: 0px 0px 1px 0px;
}

li {
    padding: 10px 10px 10px 10px;
    margin-top: 10px;
    margin-left: 1px;
    border: 2px solid oklch(from var(--input-container-secondary-color) l c h / .1);
    color: var(--input-container-foreground-color);
    background-color: var(--input-container-background-color);
    border-radius: 10px;
    font-size: 16px;
    box-sizing: border-box;
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
}

li:hover:not(.disabled, .selected) {
	border: 2px solid oklch(from var(--input-container-secondary-color) calc(l - 0.2) c h / .2);
}

li.selected {
    border: 2px solid var(--input-button-highlight-active-color);
}

li.selected:hover {
    border: 2px solid oklch(from var(--input-button-highlight-active-color) calc(l - 0.1) c h);
}

@media (prefers-color-scheme: dark) {
    li {
        border: 2px solid oklch(from var(--input-container-secondary-color) l c h / .3);
    }

    li:hover:not(.disabled, .selected) {
        border: 2px solid oklch(from var(--input-container-secondary-color) calc(l + 0.2) c h / .3);
    }

    li.selected:hover {
        border: 2px solid oklch(from var(--input-button-highlight-active-color) calc(l + 0.1) c h);
    }
}

li.disabled {
    opacity: 0.5;
}

li h4, li p, li img {
	padding: 0px;
	margin: 7px 0px 0px 0px;
    line-break: anywhere;
}

li p.primary {
    font-weight: 600;
    font-size: 17px;
    margin: 7px 0px 7px 0px;
}

li p.secondary {
	font-size: 12px;
	opacity: 0.7;
	margin-top: 0px;
}

li p:last-of-type {
    margin-bottom: 7px;
}

li img {
	height: 20px;
    filter: invert(1);
}

@media (prefers-color-scheme: dark) {
    li img {
        filter: invert(0);
    }
}

a {
    cursor: pointer;
    color: var(--input-button-highlight-active-color);
    text-decoration: none;
}

a:hover {
    color: var(--input-container-focus-color);
}