.text-black{
    color: #000000!important;
}
h1{
    font-family: "Roboto", Helvetica, Arial, sans-serif;
}
input , select{
    font-size:14pt!important;
    border :1px solid lightgray!important;
    padding: 7px 12px!important;
}

input:read-only{
    background-color: #eeeeee!important;
}

.navbar-vertical.navbar-expand-xs {
    min-width: 18.625rem!important; ;
}

.loader {
    border: 10px solid #f3f3f3;
    border-radius: 50% ;
    border-top: 10px solid #3498db;
    width: 80px ;
    height: 80px ;
    display: none;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s infinite linear;
}

 /*Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
 /*Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 576px){

    .d-responsive {
        display: flex!important;
        flex-direction: column!important;
        justify-content: center!important;
        align-items: center!important;
    }

    .navbar-vertical.navbar-expand-xs {
        min-width: 15.625rem!important; ;
    }

    .align-center{
        text-align: center!important;
    }

    .form{
        padding: 10px 23px!important;
    }
    .label{
        padding-left: 9% !important;
    }
    .input{
        width: 80% !important;
        margin: 10px 9% !important;
    }
    .r-btn{
        width: 100% !important;
        margin: 10px 9% !important;
        text-align: center!important;
    }
    .btn-80{
        width: 80% !important;
        margin: 10px 9% !important;
        text-align: center!important;
    }
    .column{
        flex-direction: column!important;
    }
    .mr{
        margin: 0 9% !important;
    }
    .r-none{
        display: none!important;
    }
    .r-show{
        display: block!important;
    }
}