@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700);
@import url(https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css);


@import url(../scss/icons/font-awesome/css/font-awesome.min.css);
@import url(../scss/icons/simple-line-icons/css/simple-line-icons.css);
@import url(../scss/icons/weather-icons/css/weather-icons.min.css);
@import url(../scss/icons/linea-icons/linea.css);
@import url(../scss/icons/themify-icons/themify-icons.css);
@import url(../scss/icons/flag-icon-css/flag-icon.min.css);
@import url(../scss/icons/material-design-iconic-font/css/materialdesignicons.min.css);
@import url(spinners.css);
@import url(animate.css);
body {
        background-color: #f8f9fa;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif
}
.modal-header {
        background-color: #0056b3 !important;
        color: #ffffff;
        font-weight: bolder
}
.sidebar {
        background: #0056b3;
        min-height: 100vh;
        width: 250px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        transition: all 0.3s
}
.sidebar-header {
        padding: 0.5em;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
        text-align: center;
        color: dodgerblue;
        font-weight: bolder;
        background-color: lightsteelblue
}
.sidebar-header h4 {
        color: gray;
        margin: 0;
        font-weight: bolder
}
.sidebar-header small {
        color: #dc3545;
        font-weight: bolder
}
.sidebar-menu {
        padding: 1rem 0
}
.sidebar-menu .nav-link {
        color: rgba(255, 255, 255, 0.8);
        padding: 0.5rem;
        border: none;
        border-radius: 0;
        transition: all 0.3s;
        width: 250px;
}

.sidebar-menu .nav-link:hover {
        background: lightsteelblue;
        color: dodgerblue
}
.sidebar-menu .nav-link:active {
        background-color: #ffffff;
        color: #d58512
}

.main-content {
        background: transparent;
        width: 100%;
        max-width: calc(100% - 255px);
        margin: 0 auto;
        padding: 0 5px;
        box-sizing: border-box;
        margin-left: 255px;
        z-index: 1000;
        transition: all 0.3s
}
.top-navbar {
        top: 0;
        left: 255px;
        background: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-bottom: 0.5px solid #e9ecef;
        width: calc(100% - 255px);
        position: fixed;
        padding: 5px;
        z-index: 99
}
.stats-card {
        background: white;
        border-radius: 10px;
        padding: 1.5rem;
        box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);
        border-left: 0.5px solid #dc3545;
        transition: transform 0.2s
}
.stats-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
}
.stats-card .stats-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: white
}

.content-card {
        margin-top: 5px;
        background: white;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05)
}
.content-card .card-header {
        background: transparent;
        border-bottom: 0.5px solid #e9ecef;
        padding: 0.5rem;
        font-weight: 600
}
.btn-custom {
        border-radius: 8px;
        padding: 0.5rem;
        font-weight: 500
}
.table {
        margin-bottom: 0
}
.table th {
        border-top: none;
        background-color: lightsteelblue;
        font-weight: 600;
        border-top: 0.5px solid dodgerblue;
        color: dodgerblue
}
.category-tabs .nav-link {
        background: #e9ecef;
        color: #6c757d;
        border: none;
        margin-right: 0.5rem;
        border-radius: 25px;
        padding: 0.5rem 1.5rem
}
.category-tabs .nav-link.active {
        background: #007bff;
        color: white
}
.btn-add-cart {
        background: #28a745;
        border: none;
        color: white;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center
}
.paymentBtn {
        background: #28a745;
        border: none;
        color: white;
        padding: 1rem;
        font-size: 1.1rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px
}
.payment-buttons button {
        margin: 0.25rem;
        min-width: 80px
}
.role-badge {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 15px;
        font-size: 0.8rem;
        margin-top: 0.5rem;
        display: inline-block
}
.admin-dashboard-card {
        border-radius: 12px;
        padding: 1.5rem;
        background: white;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s;
        height: 100%
}
.admin-dashboard-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)
}
.admin-stat-icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem
}
.admin-chart-container {
        position: relative;
        height: 300px
}
.admin-section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #212529;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #dc3545
}
select, text, btn, button, btn-custom {
        height: 40px
}
.text-right {
        text-align: right;
        vertical-align: middle
}
.grand-total {
        font-weight: bold;
        background-color: #e9ecef
}
.alert-box {
        display: none;
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: #4caf50;
        color: white;
        padding: 16px;
        border-radius: 4px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        font-family: Arial, sans-serif;
        z-index: 1000;
        transition: opacity 0.5s ease
}

.product-card{
        position: relative;
        cursor: pointer;
        transition: all 0.2s;
        border: 0.5px solid silver;
        padding: 0px;
        height: 260px;
        margin: 10px;
        display: block;
}

.product-card img{
        position: relative;
        border-radius: 5px;
        object-fit: cover;
        z-index: 998;
        width: 100%;
        display: block;
}




.product-card:hover {
        background-color: whitesmoke;
        border-color: #dc3545;
        color: #000000;
        transform: scale(1.05); /* Hardware-accelerated zoom */
}

.image-container {
        position: relative;
        display: inline-block; /* Keeps container strictly wrapped tightly around the image */
        width: 100%;           /* Adjust or restrict width as necessary */
        max-width: 600px;      /* Example constraint */
}

/* 2. Ensure the image acts as a fluid block responsive layout */
.image-container img {
        display: block;
        width: 100%;
        height: auto;
}


.modal-dialog {
        display: flex;
        align-items: center; /* Vertically centers the children */
        justify-content: center;
}

.modal-body {
        background-color: #ffffff;
        color: #000000;
        margin-bottom: 0;
        padding-bottom: 0
}

/* === Grid Container for the Cards === */
.cards-grid-container {
        display: grid;
        padding: 0.5rem; /* Optional: provides spacing from the viewport edges */
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* === General Card Styles === */
.it-card-container {
        --it-card-padding: 0.5rem;
        --it-card-border-radius: 12px;
        --it-card-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
        height: 395px;
        border-radius: var(--it-card-border-radius);
        overflow: hidden;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
        transition: transform 0.2s ease-in-out;
        background-color: transparent;
        border: thin solid #adb5bd;
}


.it-card-container a.it-card-link {
        text-decoration: none;
        color: inherit;
        display: block;
}

/* === Card Image === */
.it-card-container .it-card-image {
        width: 100%;    /* Forces the image to fill the container width */
        display: block;
        border-top-right-radius: 12px;
        transition: transform 0.3s ease; /* For smooth hover effects */
}

/* === Card Content === */
.it-card-container .it-card-content {
        padding: var(--it-card-padding);
        text-align: center;
}

.it-card-container .it-card-title {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1;
        margin-top: 0;
        text-align: center;
        height: 40px;
        max-height: 40px;
        flex-wrap: nowrap;
        text-decoration: none;
}

.it-card-container .it-card-description {
        text-align: center;
        font-size: 1rem;
        line-height: 1.2;
        font-style: normal;
        margin: 0;
        color: #4b5563; /* A muted gray */
        height: 70px;
        flex-wrap: nowrap;
        max-height: 70px;
        text-decoration: none;

}

/* === Optional "Read More" Button === */
.it-card-container .it-card-action {
        display: inline-block;
        padding: 0 1rem;
        background-color: #FFFFFF;
        color: #111827;
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: 6px;
        transition: background-color 0.2s ease;
        max-height: 30px;
        border: thin solid lightgrey;
}

.it-card-container .it-card-action:hover {
        background-color: #e5e7eb;
        transition: transform 0.5s ease; /* For smooth hover effects */
        border: thin solid darkslategray;
}


@media all and (max-width: 768px) {
        .sidebar {
                transform: translateX(-100%)
        }
        .sidebar.show {
                transform: translateX(0)
        }
        .main-content {
                margin-left: 0
        }
}
.checkbox-wrapper-19 {
        box-sizing: border-box;
        --background-color: #f8f9fa;
        --checkbox-height: 20px
}
@-moz-keyframes dothabottomcheck-19 {
        0% {
                height: 0;
        }
        100% {
                height: calc(var(--checkbox-height) / 2);
        }
}
@-webkit-keyframes dothabottomcheck-19 {
        0% {
                height: 0;
        }
        100% {
                height: calc(var(--checkbox-height) / 2);
        }
}
@keyframes dothabottomcheck-19 {
        0% {
                height: 0;
        }
        100% {
                height: calc(var(--checkbox-height) / 2);
        }
}
@keyframes dothatopcheck-19 {
        0% {
                height: 0;
        }
        50% {
                height: 0;
        }
        100% {
                height: calc(var(--checkbox-height) * 1.2);
        }
}
@-webkit-keyframes dothatopcheck-19 {
        0% {
                height: 0;
        }
        50% {
                height: 0;
        }
        100% {
                height: calc(var(--checkbox-height) * 1.2);
        }
}
@-moz-keyframes dothatopcheck-19 {
        0% {
                height: 0;
        }
        50% {
                height: 0;
        }
        100% {
                height: calc(var(--checkbox-height) * 1.2);
        }
}
.checkbox-wrapper-19 input[type="checkbox"] {
        display: none;
}

.checkbox-wrapper-19 .check-box {
        height: var(--checkbox-height);
        width: var(--checkbox-height);
        background-color: whitesmoke;
        border: thin solid grey;
        border-radius: 25px;
        position: absolute;
        display: inline-block;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -moz-transition: border-color ease 0.2s;
        -o-transition: border-color ease 0.2s;
        -webkit-transition: border-color ease 0.2s;
        transition: border-color ease 0.2s;
        cursor: pointer;
}
.checkbox-wrapper-19 .check-box::before, .checkbox-wrapper-19 .check-box::after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        height: 0;

        width: calc(var(--checkbox-height) * 0.2);
        background-color: #ff0038;
        display: inline-block;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top;
        -webkit-transform-origin: left top;
        transform-origin: left top;
        border-radius: 25px;
        content: " ";
        -webkit-transition: opacity ease 0.5;
        -moz-transition: opacity ease 0.5;
        transition: opacity ease 0.5;
}

.checkbox-wrapper-19 .check-box::before {
        top: calc(var(--checkbox-height) * 0.72);
        left: calc(var(--checkbox-height) * 0.41);
        box-shadow: 0 0 0 calc(var(--checkbox-height) * 0.05) var(--background-color);
        -moz-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);


}
.checkbox-wrapper-19 .check-box::after {
        top: calc(var(--checkbox-height) * 0.37);
        left: calc(var(--checkbox-height) * 0.05);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);

}

.checkbox-wrapper-19 input[type="checkbox"]:checked + .check-box, .checkbox-wrapper-19 .check-box.checked {
        border-color: #ff0038;

}

.checkbox-wrapper-19 input[type="checkbox"]:checked + .check-box::after, .checkbox-wrapper-19 .check-box.checked::after {
        height: calc(var(--checkbox-height) / 2);
        -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
        -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
        -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
        animation: dothabottomcheck-19 0.2s ease 0s forwards;

}

.checkbox-wrapper-19 input[type="checkbox"]:checked + .check-box::before, .checkbox-wrapper-19 .check-box.checked::before {
        height: calc(var(--checkbox-height) * 2);
        -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
        -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
        -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
        animation: dothatopcheck-19 0.4s ease 0s forwards;
}


.tab {
        overflow: hidden;
        border-bottom: 0.5px solid grey;
        padding: 2px;
        width: 85%
}

.tab button {
        color: #171515;
        background-color: transparent;
        float: left;
        padding: 10px;
        border: none;
        font-size: 85%;
        outline: none;
        cursor: pointer;
        transition: 0.5s;
        height: auto;
        border-right: 0.5px solid grey;
}

.tab button:hover {
        background-color: lightsteelblue;
        color: dodgerblue;
        border-bottom: 3px solid #f44336;
        transform: scale(1.05);
}

.tab button.active {
        border-bottom: 3px solid #006dcc;
        background-color: #ffffff;
        color: #d58512
}

.tab button.focus {
        border-bottom: 3px solid #6610f2;
        background-color: darkslategray
}

.tabcontent {
        display: none;
        padding: 20px 0px 20px 0px;
        font-size: 85%;
        background-color: #ffffff
}

.input-group-text2{
        background-color: whitesmoke;
        border: 0.2px solid lightgrey;
        ;
        width: 30px;
        display: flex;
        align-items: center; /* Vertically centers the children */
        justify-content: center;
}

.scroll-container {
        max-height: 85vh;
        overflow-y: auto;         /* Only shows scrollbar if text is too long */
        overflow-x: hidden;       /* Hides horizontal scroll bar completely */
}


.custom-select {
        display: inline-block;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 1.75rem 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        vertical-align: middle;
        background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
        background-color: #fff;
        border: 0.5px solid #ced4da;
        border-radius: 0.25rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
}
.custom-select:focus {
        border-color: #80bdff;
        outline: 0;
        -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.custom-select:focus::-ms-value {
        color: #495057;
        background-color: #fff;
}
.custom-select[multiple], .custom-select[size]:not([size="1"]) {
        height: auto;
        padding-right: 0.75rem;
        background-image: none;
}
.custom-select:disabled {
        color: #6c757d;
        background-color: #e9ecef;
}
.custom-select::-ms-expand {
        display: none;
}

.custom-select-sm {
        height: calc(1.5em + 0.5rem + 2px);
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        padding-left: 0.5rem;
        font-size: 0.875rem;
}

.custom-select-lg {
        height: calc(1.5em + 1rem + 2px);
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1rem;
        font-size: 1.25rem;
}

.custom-file {
        position: relative;
        display: inline-block;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        margin-bottom: 0;
}

.custom-file-input {
        position: relative;
        z-index: 2;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        margin: 0;
        opacity: 0;
}
.custom-file-input:focus ~ .custom-file-label {
        border-color: #80bdff;
        -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.custom-file-input:disabled ~ .custom-file-label {
        background-color: #e9ecef;
}
.custom-file-input:lang(en) ~ .custom-file-label::after {
        content: "Browse";
}
.custom-file-input ~ .custom-file-label[data-browse]::after {
        content: attr(data-browse);
}

.custom-file-label {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1;
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        border: 0.5px solid #ced4da;
        border-radius: 0.25rem;
}
.custom-file-label::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        display: block;
        height: calc(1.5em + 0.75rem);
        padding: 0.375rem 0.75rem;
        line-height: 1.5;
        color: #495057;
        content: "Browse";
        background-color: #e9ecef;
        border-left: inherit;
        border-radius: 0 0.25rem 0.25rem 0;
}

.custom-range {
        width: 100%;
        height: calc(1rem + 0.4rem);
        padding: 0;
        background-color: transparent;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
}
.custom-range:focus {
        outline: none;
}
.custom-range:focus::-webkit-slider-thumb {
        -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.custom-range:focus::-moz-range-thumb {
        box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.custom-range:focus::-ms-thumb {
        box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.custom-range::-moz-focus-outer {
        border: 0;
}
.custom-range::-webkit-slider-thumb {
        width: 1rem;
        height: 1rem;
        margin-top: -0.25rem;
        background-color: #007bff;
        border: 0;
        border-radius: 1rem;
        -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        -o-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        -webkit-appearance: none;
        appearance: none;
}
@media (prefers-reduced-motion: reduce) {
        .custom-range::-webkit-slider-thumb {
                -webkit-transition: none;
                -o-transition: none;
                transition: none;
        }
}
.custom-range::-webkit-slider-thumb:active {
        background-color: #b3d7ff;
}
.custom-range::-webkit-slider-runnable-track {
        width: 100%;
        height: 0.5rem;
        color: transparent;
        cursor: pointer;
        background-color: #dee2e6;
        border-color: transparent;
        border-radius: 1rem;
}
.custom-range::-moz-range-thumb {
        width: 1rem;
        height: 1rem;
        background-color: #007bff;
        border: 0;
        border-radius: 1rem;
        -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        -o-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        -moz-appearance: none;
        appearance: none;
}
@media (prefers-reduced-motion: reduce) {
        .custom-range::-moz-range-thumb {
                -webkit-transition: none;
                -o-transition: none;
                transition: none;
        }
}
.custom-range::-moz-range-thumb:active {
        background-color: #b3d7ff;
}
.custom-range::-moz-range-track {
        width: 100%;
        height: 0.5rem;
        color: transparent;
        cursor: pointer;
        background-color: #dee2e6;
        border-color: transparent;
        border-radius: 1rem;
}
.custom-range::-ms-thumb {
        width: 1rem;
        height: 1rem;
        margin-top: 0;
        margin-right: 0.2rem;
        margin-left: 0.2rem;
        background-color: #007bff;
        border: 0;
        border-radius: 1rem;
        -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        -o-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        appearance: none;
}
@media (prefers-reduced-motion: reduce) {
        .custom-range::-ms-thumb {
                -webkit-transition: none;
                -o-transition: none;
                transition: none;
        }
}
.custom-range::-ms-thumb:active {
        background-color: #b3d7ff;
}
.custom-range::-ms-track {
        width: 100%;
        height: 0.5rem;
        color: transparent;
        cursor: pointer;
        background-color: transparent;
        border-color: transparent;
        border-width: 0.5rem;
}
.custom-range::-ms-fill-lower {
        background-color: #dee2e6;
        border-radius: 1rem;
}
.custom-range::-ms-fill-upper {
        margin-right: 15px;
        background-color: #dee2e6;
        border-radius: 1rem;
}
.custom-range:disabled::-webkit-slider-thumb {
        background-color: #adb5bd;
}
.custom-range:disabled::-webkit-slider-runnable-track {
        cursor: default;
}
.custom-range:disabled::-moz-range-thumb {
        background-color: #adb5bd;
}
.custom-range:disabled::-moz-range-track {
        cursor: default;
}
.custom-range:disabled::-ms-thumb {
        background-color: #adb5bd;
}

.custom-control-label::before,
.custom-file-label,
.custom-select {
        -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        -o-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
        .custom-control-label::before,
        .custom-file-label,
        .custom-select {
                -webkit-transition: none;
                -o-transition: none;
                transition: none;
        }
}