// FOR RADIO AND TOGGLE/SWITCH
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff !important;
    border-color: @secondary-color !important;
    background-color: @secondary-color !important;
}

// FOR CHECKBOX
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before, .custom-checkbox .custom-control-label::before {
    border-radius: 0 !important;
}
.custom-control-input:disabled:checked ~ .custom-control-label::before {
    color: #fff !important;
    border-color: grey !important;
    background-color: grey !important;
}
// FOR RANGE
input[type=range] {
    height: 19px;
    -webkit-appearance: none;
    margin: 10px 0;
    width: 100%;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: #E0E2E7;
    border-radius: 8px;
}

input[type=range]::-webkit-slider-thumb {
    border: 1px solid #2497E3;
    height: 12px;
    width: 12px;
    border-radius: 12px;
    background: @secondary-color;
    -webkit-appearance: none;
    margin-top: -4px;
}



input[type=range]::-moz-range-track {
    width: 100%;
    height: 5px;
    background: #2497E3;
    border-radius: 8px;
}

input[type=range]::-moz-range-thumb {
    border: 1px solid #2497E3;
    height: 12px;
    width: 12px;
    border-radius: 12px;
    background: @secondary-color;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: red;
    border-radius: 16px;
}

input[type=range]::-ms-fill-upper {
    background: blue;
    border-radius: 16px;
}

input[type=range]::-ms-thumb {
    margin-top: 1px;
    height: 12px;
    width: 12px;
    border-radius: 12px;
    background: @secondary-color;
    cursor: pointer;
}

// FOR MULTI SELECT
.rhMultiSelect {
    min-height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background-color: #fafafa !important;
    border: 1px solid #eee !important;
    margin-top: 5px !important;
    color: #495057 !important;

    .dropdown.icon {
        padding: .5rem !important;
    }

    a.ui.label {
        background-color: @secondary-color;
        color: #FFF;
        font-weight: normal !important;
    }
    // .item {
    //   &:hover {
    //     color: @sidenav-font-hover !important;
    //   }
    // }
}

// REGULAR INPUT
.rhFormInput {
    background-color: #fafafa !important;
    border: 1px solid #eee !important;
    margin-top: 5px !important;
    // box-shadow: 5px 5px 5px rgba(0,0,0,.08) !important;
    border-radius: 0 !important;

    &:active, &:focus {
        outline: none !important;
        box-shadow: none !important;
    }
}

// SHOW/HIDE INPUT
.rhShowHideInputContainer {
    display: flex;
    border: 1px solid #eee;
    border-radius: 0;

    .rhShowHideInput {
        border: none;

        &:active, &:focus {
            outline: none !important;
            box-shadow: none !important;
        }
    }

    .rhShowHideIconContainer {
        padding-right: 10px;
        margin: auto;

        .rhShowHideIcon {
            color: #a2a2a2 !important;
        }
    }
}

.dragging {
    border-top: 1px solid @secondary-color;
    background-color: @primary-color;
}

.custom-control-label{
    padding-top: 2px;
}