StrateimTech_Cezium/Cezium/Web/Front/Assets/css/Rust/Rust.css
.flex-container {
    display: flex;
    flex-direction: row;
}

.flex-container > div {
    margin: 8px;
    background: rgb(24, 24, 24);
    width: 100%;
    border-radius: 8px;

    /*box-shadow: 0 0 0.5vw rgb(32, 32, 32);*/

    box-sizing: border-box;
    padding: 8px;
}

.select-box-flex-container {
    display: flex;
    flex-direction: row;
}

.select-box-flex-container > label {
    margin: 0 8px 0 0;
}

@media screen and (max-width: 705px) {
    .select-box-flex-container {
        flex-direction: column;
    }

    .select-box-flex-container > label {
        margin: 0 8px 8px 0;
    }
}

.switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 48px;
}

.switch input {
    display: none;
}

.slider {
    cursor: pointer;
    background-color: rgb(64, 64, 64);
    
    position: absolute;
    
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    
    transition: .4s;
}

.slider:before {
    background-color: white;
    bottom: 4px;
    content: "";
    height: 16px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 16px;
}

.slider:hover .slider.round {
    background-color: blue;
}

input:checked + .slider {
    background-color: rgb(100, 185, 100);
}

input:checked + .slider:before {
    transform: translateX(24px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* https://codepen.io/ShadowShahriar/pen/zYPPYrQ */

input[type="range"] {
    font-size: 1.5rem;
    width: 10.85em;
}

input[type="range"] {
    --thumb-height: 0.725em;
    --track-height: 0.125em;
    --thumb-width: 0.725em;
    --track-color: rgba(0, 0, 0, 0.2);
    --brightness-hover: 75%;
    --brightness-down: 80%;
    --clip-edges: 0.125em;
}

@media (prefers-color-scheme: dark) {
    html {
        background-color: #000;
    }

    html::before {
        background: radial-gradient(circle at center, #101112, #000);
    }

    input[type="range"] {
        color: rgb(255, 100, 100);
        --track-color: rgba(12, 12, 12, 1);
    }
}

/* === range commons === */
input[type="range"] {
    position: relative;
    background: #fff0;
    overflow: hidden;
}

input[type="range"]:active {
    cursor: grabbing;
}

input[type="range"]:disabled {
    filter: grayscale(1);
    opacity: 0.3;
    cursor: not-allowed;
}

/* === WebKit specific styles === */
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
    position: relative;
}

input[type="range"]::-webkit-slider-thumb {
    --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
    --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
    --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
    --clip-further: calc(100% + 1px);
    --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;

    width: var(--thumb-width, var(--thumb-height));
    background: currentColor linear-gradient(currentColor 0 0) no-repeat scroll left center;
    box-shadow: var(--box-fill);
    border-radius: var(--thumb-width, var(--thumb-height));

    filter: brightness(100%);
    clip-path: polygon(
            100% -1px,
            var(--clip-edges) -1px,
            0 var(--clip-top),
            -100vmax var(--clip-top),
            -100vmax var(--clip-bottom),
            0 var(--clip-bottom),
            var(--clip-edges) 100%,
            var(--clip-further) var(--clip-further)
    );
}

input[type="range"]:hover::-webkit-slider-thumb {
    filter: brightness(var(--brightness-hover));
    cursor: grab;
}

input[type="range"]:active::-webkit-slider-thumb {
    filter: brightness(var(--brightness-down));
    cursor: grabbing;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center /
		100% calc(var(--track-height) + 1px);
}

input[type="range"]:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}

/* === Firefox specific styles === */
input[type="range"],
input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb {
    appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
    background: #fff0;
}

input[type="range"]::-moz-range-thumb {
    background: currentColor;
    border: 0;
    width: var(--thumb-width, var(--thumb-height));
    border-radius: var(--thumb-width, var(--thumb-height));
    cursor: grab;
}

input[type="range"]:active::-moz-range-thumb {
    cursor: grabbing;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    background: var(--track-color);
}

input[type="range"]::-moz-range-progress {
    appearance: none;
    background: currentColor;
    transition-delay: 30ms;
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-progress {
    height: calc(var(--track-height) + 1px);
    border-radius: var(--track-height);
}

input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
    filter: brightness(100%);
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:hover::-moz-range-progress {
    filter: brightness(var(--brightness-hover));
}

input[type="range"]:active::-moz-range-thumb,
input[type="range"]:active::-moz-range-progress {
    filter: brightness(var(--brightness-down));
}

input[type="range"]:disabled::-moz-range-thumb {
    cursor: not-allowed;
}

/* https://codepen.io/natali_k/pen/PdBLgG */

.select-box {
    position: relative;
    display: inline-block;
    min-height: 40px;
    max-height: 40px;
    min-width: 120px;
    width: 100%;
    padding: 40px 0 0;

    box-sizing: border-box;
    border-radius: 4px;
    outline: none;
    overflow: hidden;
    vertical-align: top;
    transition: .6s;

    background: rgb(10, 10, 10);
    z-index: 1;
}

.select-box:after {
    content: '';
    position: absolute;
    width: 24px;
    height: 40px;
    top: 0;
    right: 10px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTI0IDI0SDBWMGgyNHoiIG9wYWNpdHk9Ii44NyIvPgogICAgICAgIDxwYXRoIGZpbGw9IiNBOUFDQUYiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE1Ljg4IDE1LjI5TDEyIDExLjQxbC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxIDEtMS40MS0xLjQxbDQuNTktNC41OWEuOTk2Ljk5NiAwIDAgMSAxLjQxIDBsNC41OSA0LjU5Yy4zOS4zOS4zOSAxLjAyIDAgMS40MS0uMzkuMzgtMS4wMy4zOS0xLjQyIDB6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=);
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
    transform: rotate(180deg);
}

.select-box > input {
    display: none;
}

.select-box > label {
    display: block;
    height: 40px;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    line-height: 40px;
    cursor: pointer;
    transition: background-color .4s;
}

.select-box > label:hover {
    background-color: #f4f4f4;
}

.select-box > input:checked + label {
    position: absolute;
    top: 0;
}

.select-box > input:checked + label:hover {
    cursor: default;
}

.select-box-input {
    display: none;
}

.select-box-input:checked + label {
    max-height: 240px;
}

.select-box-input-scope:checked + label {
    max-height: 200px;
}

.select-box-input-attachment:checked + label {
    max-height: 160px;
}

.select-box-input:checked + label:after {
    transform: rotate(0deg);
    background-position-x: right;
}

.select-box-input + label:after {
    width: 100%;
    background-position-x: left;
    background-position-y: center;
}

.select-box-input + label:hover {
    box-shadow: 0 0 0 1px #b28fff;
}

.select-box-input + label > label:hover {
    background-color: rgba(24, 24, 24, 1);
}

.select-box-input + label:hover:after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTI0IDI0SDBWMGgyNHoiIG9wYWNpdHk9Ii44NyIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM1NTZBRUEiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE1Ljg4IDE1LjI5TDEyIDExLjQxbC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxIDEtMS40MS0xLjQxbDQuNTktNC41OWEuOTk2Ljk5NiAwIDAgMSAxLjQxIDBsNC41OSA0LjU5Yy4zOS4zOS4zOSAxLjAyIDAgMS40MS0uMzkuMzgtMS4wMy4zOS0xLjQyIDB6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=);
}

.select-box-input + label:not(:focus) {
    max-height: 40px;
}