:root {
    --theme-color: #1BB4BC;
    --theme-color-light: #EAFBFC;
    --theme-color-white: #F7F9FF;
    --theme-color-gray-head: #5E5E5E;
    --theme-color-gray-dark: #1A1D1F;
    --theme-color-gray-light: #F0F0F0;
    --theme-color-gray-negative: #F5F5F5;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
        COLORS
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/*      TEXT COLOR        */
.text-theme {
    color: var(--theme-color);
}

.text-theme-light {
    color: var(--theme-color-light);
}

.text-theme-gray-head {
    color: var(--theme-color-gray-head);
}

.text-theme-gray-dark {
    color: var(--theme-color-gray-dark);
}

.text-theme-gray-negative {
    color: var(--theme-color-gray-negative);
}

/*      BACKGROUND COLOR        */
.bg-theme {
    background-color: var(--theme-color) !important;
}

.bg-theme-light {
    background-color: var(--theme-color-light) !important;
}

.bg-theme-gray-head {
     background-color: var(--theme-color-gray-head);
 }

.bg-theme-white {
    background-color: var(--theme-color-white) !important;
}

.bg-theme-gray-dark {
    background-color: var(--theme-color-gray-dark);
}

.bg-theme-gray-light {
    background-color: var(--theme-color-gray-light) !important;
}

.bg-theme-gray-negative {
    background-color: var(--theme-color-gray-negative) !important;
}

.bg-gradient-theme {
    background-image: linear-gradient(to right, rgba(56, 194, 180, 0.36), rgba(59, 130, 246, 0.19))
}

/*      SHADOW        */
.shadow-theme {
    box-shadow: 0 1px 24px 0 #0000001A;
}

/*      BORDER COLOR        */
.border-theme {
    border-color: var(--theme-color) !important;
}

.border-theme-gray-head {
    border-color: var(--theme-color-gray-head) !important;
}

.border-gradient-theme{
    background: linear-gradient(180deg, #1BB4BC 0%, rgba(27, 180, 188, 0.56) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.border-gradient-theme:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50rem;
    border: 2px solid transparent;
    background: linear-gradient(180deg, #1BB4BC 0%, rgba(27, 180, 188, 0.56) 100%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
        THEME COMPONENTS
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/*      TAB FILTER        */
.tab-filter-theme button {
    color: #49516F;
}

.tab-filter-theme button:hover,
.tab-filter-theme button.active {
    border-bottom: 4px solid var(--theme-color) !important;
}
.theme-check-input:checked{
    border-color: var(--theme-color) !important;
    background-color: var(--theme-color) !important;
}
.theme-form-check-input[type="checkbox"] {
    --theme-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%2827, 180, 188, 1%29'/%3e%3c/svg%3e");
    border: 1px solid var(--theme-color) !important;
    background-image: var(--theme-form-switch-bg) !important;
}

.theme-form-check-input:focus {
    box-shadow: none;
}

.theme-form-check-input[type="checkbox"]:checked {
    --theme-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: right center;
    background-color: var(--theme-color);
}

.theme-form-check-input {
    border-color: var(--theme-color-gray-head);
    border-width: 2px;
}

.theme-form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231BB4BC'/%3e%3c/svg%3e");
    background-color: #FFFFFF;
    border-color: var(--theme-color) !important;
}

.theme-form-radio-input[type="radio"]:hover + label {
    color: var(--theme-color);
}

.theme-form-radio-input[type="radio"]:checked + label {
    background: var(--theme-color);
    color: var(--theme-color-light);
    box-shadow: 0 4px 10px 0 #00000040;
    border-color: var(--theme-color) !important;
}

.theme-btn-check input[type="radio"]:checked + label{
    background: var(--theme-color);
    color: var(--theme-color-light);
    box-shadow: 0 1px 24px 0 #0000001A;
    border-color: var(--theme-color) !important;
}

.theme-btn-check label span {
    width: 1.5rem;
    height: 1.5rem;
}

/* For Chrome, Safari, Opera, and Edge  */
.theme-form-range::-webkit-slider-runnable-track {
    background: #DDE4E2;
    height: 0.375rem;
    border-radius: 50rem;
}

.theme-form-range::-webkit-slider-thumb {
    box-shadow: 0 1px 2px 0 #0000004D;
    background: var(--theme-color) !important;
    height: 1.2rem;
    width: 1.2rem;
    margin-top: -0.4rem;
}

.theme-form-range::-moz-range-thumb {
    box-shadow: 0 1px 2px 0 #0000004D;
    background: var(--theme-color) !important;
    height: 1.2rem;
    width: 1.2rem;
    margin-top: -0.4rem;
}

.theme-form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 10px #6750A41F;
}