﻿.combobox-container {
    --font-size: .9rem;
    --input-padding-left: 0px;
    --padding-left: 8px;
    --padding: 5px;
    --min-height: 30px;
    --font-weight: 400;
    --border-radius: 10px;
    --border: 1px solid rgb(255, 255, 255);
    --text-color: white;
    --arrow-color: rgb(248, 248, 247);
    --option-selected-color: #902020;
    display: flex;
    width: calc(100% - 20px) !important;
}

    .combobox-container input[type="text"],
    .combobox-container select,
    .combobox-container select > option {
        position: relative;
        top: 0;
        border: none;
        margin: 0;
        font-size: var(--font-size);
        padding-left: var(--padding-left);
        font-weight: var(--font-weight);
    }

    .combobox-container input[type="text"] {
        z-index: 1;
        padding: var(--padding);
        outline: none;
        min-width: calc(100% - var(--input-padding-left));
        border-right: 1px solid #666;
        border-radius: var(--border-radius) 0 0 var(--border-radius);
        padding-left: var(--input-padding-left);
    }

    .combobox-container select {
        z-index: 0;
        border-radius: var(--border-radius);
        min-width: 100%;
        left: calc(-100% - -20px);
        -webkit-appearance: menulist;
    }

        .combobox-container select:focus {
            outline: 0;
        }

        .combobox-container select:-moz-focusring,
        .combobox-container input[type="text"]:-moz-focusring {
            color: transparent;
            text-shadow: none;
            outline: 0;
            border: none;
        }

        .combobox-container select > option {
            max-height: 200px;
            overflow-y: auto;
        }

    .combobox-container.light input[type="text"],
    .combobox-container.light select,
    .combobox-container.light select > option {
        background: #cfe5fd;
        color: #242323;
        min-height: var(--min-height);
        --dividing-border: 2px solid #242323;
    }

    .combobox-container.white input[type="text"],
    .combobox-container.white select,
    .combobox-container.white select > option {
        background-color: white;
        color: black;
        min-height: var(--min-height);
        --dividing-border: 1px solid black;
    }

    .combobox-container.black input[type="text"],
    .combobox-container.black select,
    .combobox-container.black select > option {
        background-color: black;
        color: white;
        min-height: var(--min-height);
        --dividing-border: 2px solid white;
    }

    .combobox-container.control-dark input[type="text"],
    .combobox-container.control-dark select,
    .combobox-container.control-dark select > option {
        color: #b9b2b2;
        background-color: #2A3038;
        min-height: var(--min-height);
        --dividing-border: 2px solid #b9b2b2;
        font-size: var(--font-size);
    }

    .combobox-container.antique-white input[type="text"],
    .combobox-container.antique-white select,
    .combobox-container.antique-white select > option {
        color: #3a3a3a;
        background-color: antiquewhite;
        min-height: var(--min-height);
        font-size: var(--font-size);
        --dividing-border: 2px solid rgb(128, 88, 37);
    }

    .combobox-container.border input[type="text"],
    .combobox-container.border select {
        border: var(--dividing-border);
    }

    .combobox-container.dropdown-arrow-border-none input[type="text"] {
        border-right: none;
    }
