:root{
    --input-border-color: black;
    --input-border-color-light: #8c8c8c;
}


.form-main{
    font-family: 'Roboto', sans-serif;
}

.form-main .form-control{
    background-color: unset!important;
    border-radius: unset!important;
    padding: 0!important;
    border-bottom: 2px solid var(--input-border-color-light)!important;
    padding-bottom: 0.6rem!important;
}

.form-main .form-control::placeholder, .form-control::placeholder{
   color: var(--input-border-color-light)!important;

}

.form-main .form-control:not(:placeholder-shown) {
    border-bottom: 2px solid var(--input-border-color)!important;

}

.form-main .form-label,
.col-form-label
{
    font-weight: bold;
}

.form-check-input[type='radio']{
    position: relative;
    color: rgba(0,0,0,0);
    outline: none!important;
    box-shadow: none!important;
}
.form-check-input[type='radio']:before{
    position: absolute;
    top:-4px;
    left: -4px;
    content: "";
    display: inline-block;
    min-width: 22px;
    min-height: 22px;
    max-width: 22px;
    max-height:  22px;
    background-color: #efefef;
    color: white;
    padding: 3px 5px;
    border-radius: 50%;
    margin-right: 6px;
}

.form-main .form-check-input[type='radio']:checked:before {
    background-color: black;
}
.form-main .form-check-input[type='radio']:checked:after {
    position: absolute;
    content: '✓';
    color: white;
    top: -6px;
    left: 1px;
}

.form-main .form-check-input[type='checkbox']{
    position: relative;
    color: rgba(0,0,0,0);
    outline: none!important;
    box-shadow: none!important;
}
.form-main .form-check-input[type='checkbox']:before{
    position: absolute;
    top:-4px;
    left: -4px;
    content: "";
    display: inline-block;
    min-width: 22px;
    min-height: 22px;
    max-width: 22px;
    max-height:  22px;
    background-color: white !important;
    border: 3px solid black;
    border-radius: 4px;
    padding: 3px 5px;
    margin-right: 6px;
}

.form-main .form-check-input[type='checkbox']:checked:before {
    background-color: black!important;
}
.form-main .form-check-input[type='checkbox']:checked:after {
    position: absolute;
    content: '✓';
    color: white;
    top: -6px;
    left: 1px;
}

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

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

.form-select:disabled, .form-control:disabled{
    background-color: #ababab !important;
    color: #5b5b5b!important;
}

form .form-loading {
    animation: blinker 1.2s linear infinite;
}
@keyframes blinker {
    50% { opacity: 50%; }
}