/*SELECT*/

select {
    /*--bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");*/
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: flex;
    width: 100%;
    padding: var(--input-padding);
    font-size: 16px;
    /*font-weight: 400;*/
    /*line-height: 1.5;*/
    background-color: var(--tg-theme-secondary-bg-color);
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 2px solid transparent;
    border-radius: var(--input-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--text-color)
}

select[multiple], select[size]:not([size="1"]) {
    padding-right: 0.75rem;
    background-image: none;
}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--bs-body-color);
}


select {
    text-transform: none;
}

select {
    word-wrap: normal;
}

/*SPINNERS*/

.spinner-border {
    display: inline-block;
    width: var(--bs-spinner-width);
    height: var(--bs-spinner-height);
    vertical-align: var(--bs-spinner-vertical-align);
    border-radius: 50%;
    animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg) /* rtl:ignore */;
    }
}

.spinner-border {
    --bs-spinner-width: 2rem;
    --bs-spinner-height: 2rem;
    --bs-spinner-vertical-align: -0.125em;
    --bs-spinner-border-width: 0.25em;
    --bs-spinner-animation-speed: 0.75s;
    --bs-spinner-animation-name: spinner-border;
    --bs-spinner-color: var(--tg-theme-button-color);
    border: var(--bs-spinner-border-width) solid var(--bs-spinner-color);
    border-right-color: transparent;
}

.spinner-border-sm {
    --bs-spinner-width: 0.7rem;
    --bs-spinner-height: 0.7rem;
    --bs-spinner-border-width: 0.15em;
}

.spinner-border-icon {
    --bs-spinner-width: 1rem;
    --bs-spinner-height: 1rem;
    --bs-spinner-border-width: 0.12em;
}


@keyframes spinner-grow {
    0% {
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spinner-border {
        --bs-spinner-animation-speed: 1.5s;
    }
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background-color: #ddd;
    border-radius: 4px;
    outline: none;
    margin: 10px 0;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

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

input[type="range"] {
    color: var(--tg-theme-button-color);
    --thumb-height: 16px;
    --track-height: 0.125em;
    --track-color: var(--tg-theme-secondary-bg-color);
    --clip-edges: 0.125em;
}

/* === range commons === */
input[type="range"] {
    border: none;
    position: relative;
    background: transparent;
    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: linear-gradient(currentColor 0 0) scroll no-repeat left center /
		50% calc(var(--track-height) + 1px);
    background-color: currentColor;
    box-shadow: var(--box-fill);
    border-radius: var(--thumb-width, var(--thumb-height));
    border: none;
    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"]:active::-webkit-slider-thumb {
    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-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"]:disabled::-moz-range-thumb {
    cursor: not-allowed;
}

/*#slider-value {*/
/*  position: absolute;*/
/*  top: -20px; !* Расположение текста над ползунком *!*/
/*  left: 0;*/
/*  width: 100%;*/
/*  text-align: center;*/
/*}*/

.form-check-input {
    --bs-form-check-bg: var(--bs-body-bg);
    width: 1em !important;
    height: 1em !important;
    min-width: 22px;
    min-height: 22px;
    padding: 0 !important;
    /*vertical-align: top;*/
    background-color: var(--bs-form-check-bg);
    background-image: var(--bs-form-check-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 2px solid var(--tg-theme-hint-color);
    appearance: none;
    print-color-adjust: exact;
    transition: all 0.2s ease, border-color 0.2s ease;
}

.form-check-input:active {
    filter: brightness(90%);
}

.form-check-input:focus {
    /*border-color: #86b7fe;*/
    outline: 0;
    /*box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);*/
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input:disabled {
    pointer-events: none;
    filter: none;
    opacity: 0.5;
}

.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
    cursor: default;
    opacity: 0.5;
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/%3e%3c/svg%3e");
}

.form-check-input[type=checkbox] {
    border-radius: 0.25em;
}

.form-check-input[type=radio] {
    border-radius: 50%;
}

.form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input + label {
    transition: color 0.2s ease;
}

.form-check-input:checked + label {
    color: var(--primary-color);
}

/* Base container for the switch */
.switch {
    --switch-width: 28px; /* Width of the switch */
    --switch-height: 15px; /* Height of the switch */
    --slider-diameter: 15px; /* Diameter of the slider element, making it taller than the switch */
    --slider-offset: -2px; /* Space for the slider inside the switch */
    --inactive-color: var(--tg-theme-hint-color); /* Color of the slider when inactive */
    --active-color: var(--primary-color); /* Color of the slider when active */
    --slider-color: var(--tg-theme-bg-color); /* Color of the slider button */
    --slider-border-color: var(--primary-color); /* Color of the slider's border */
    --slider-border-width: 2px; /* Width of the slider's border */
    --slider-inactive-border-color: var(--tg-theme-hint-color);
    --switch-transition-duration: .2s;

    position: relative;
    display: inline-block;
    width: var(--switch-width);
    height: var(--switch-height);
    box-sizing: border-box;
    border-radius: 20px; /* Adding rounded corners to the switch */
}

/* Hides the default checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
    display: none;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    background-color: var(--inactive-color);
    -webkit-transition: var(--switch-transition-duration);
    transition: var(--switch-transition-duration);
    border-radius: 20px; /* Adding rounded corners to the slider */
    height: var(--switch-height); /* Height is the same as the switch's height */
}

.slider:before {
    position: absolute;
    content: "";
    height: var(--slider-diameter);
    width: var(--slider-diameter);
    left: var(--slider-offset);
    bottom: 50%;
    transform: translateY(50%);
    background-color: var(--slider-color);
    -webkit-transition: var(--switch-transition-duration);
    transition: var(--switch-transition-duration);
    border-radius: 50%; /* Rounded corners for the circular slider */
    border: var(--slider-border-width) solid var(--slider-inactive-border-color);
}

input:checked + .slider {
    background-color: var(--active-color);
}

input:checked + .slider:before {
    -webkit-transform: translateX(calc(var(--switch-width) - var(--slider-diameter))) translateY(50%);
    -ms-transform: translateX(calc(var(--switch-width) - var(--slider-diameter))) translateY(50%);
    transform: translateX(calc(var(--switch-width) - var(--slider-diameter))) translateY(50%);
    border-color: var(--primary-color);
}