.form-select.form-select-sm {
    padding: 3px, 3px, 12px, 36px !important;  /* Adjust values as needed. The format is: [top & bottom] [left & right] */
    /* margin: 3px; */
}

.form-control.form-control-sm {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    margin: 2px;
}

/* Slider */
/* Styling the value display */
.slider-container {
    position: relative;
    width: 100%; /* Adjust width as needed */
}

.slider-container input[type="range"] {
    width: 100%;
}

/* Styling the value display */
.slider-value {
    position: absolute;
    top: -30px;
    left: 0;
    transform: translateX(-50%);
    padding: 2px 5px;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    font-size: 12px;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.2s ease-in-out;
}

/* Checkbox styling */
input[type="checkbox"]:checked {
    background-color: var(--primary-color)!important;
    accent-color: var(--primary-color)!important;
}