/*Button Toggle*/

/* Custom size */

.custom-switch {
    position: relative;
    display: inline-block;
}

.custom-switch .form-check-input {
    width: 70px;
    height: 32px;
    position: relative;
    cursor: pointer;
}

.custom-switch .form-check-label {
    position: absolute!important;
    font-size: 14px!important;
    font-weight: bold!important;
    width: 100%!important;
    pointer-events: none!important;
    padding: 0 8px!important;
}

/* Background colors */
.custom-switch .form-check-input:checked {
    background-color: #28a745;
    border-color: #28a745;
}

.custom-switch .form-check-input:not(:checked) {
    background-color: #dc3545;
    border-color: #dc3545;
}

/* YES text alignment when checked */
.custom-switch .form-check-input:checked + .form-check-label {
    color: #fff !important;
    position: absolute !important;
    top: 10px!important;
    text-shadow: 1px 1px 1px #000!important;
    left: 0px!important;
}

/* YES text alignment when checked */
.custom-switch .form-check-input:not(:checked)::after {
    content: 'No';
    color: #fff !important;
    position: absolute !important;
    top: 5px!important;
    text-shadow: 1px 1px 1px #000!important;
    left: 35px!important;
}

/* Yes/No text inside switch */
.custom-switch .form-check-input::after {
    color: #fff !important;
    position: absolute !important;
    top: 10px!important;
    text-shadow: 1px 1px 1px #000!important;
    left: 25px!important;
    font-weight: bold;
    font-size: 14px;
}

/* Change text to Yes when checked */
.custom-switch .form-check-input:checked::after {
    content: 'Yes';
    color: #fff !important;
    position: absolute !important;
    top: 5px!important;
    text-shadow: 1px 1px 1px #000!important;
    left: 5px!important;
}


/*Button Toggle*/

li .lbl-hdr {
    color:#22608e!important;
    font-size: 13px!important;
    padding: 2px 5px;
}



li .lbl-val {
    color:#484d52!important;
    font-size: 13px!important;
    padding: 2px 5px;
}

li:hover .lbl-hdr {
    color:#520272!important;
    font-weight:bold!important;
    font-size: 13px!important;
    padding: 2px 5px;
}



li:hover .lbl-val {
    color:#055c50!important;
    font-weight:bold!important;
    font-size: 13px!important;
    padding: 2px 5px;
}

.btn-add {
    color:#fafafa!important;
    background-color: #22608e!important;
    border:1px solid #22608e!important;
    font-size: 12px!important;
    padding: 2px 5px!important;
}

.btn-add:hover {
    background-color:#22608e!important;
    color:#fff!important;
    border:1px solid #fff!important;
    font-size: 12px!important;
}


.form-inputs div p {
    color:#22608e!important;
}



.bv-form .input-group .input-label {
    position:absolute!important;
    font-size:12px!important;
    top:4px!important;
    left:4px!important;
    color: #860e5d !important;
}

.bv-form .input-group {
    padding-top: 20px!important;
}

.header {
    background-color:#fff!important;
}

p.title-text {
    font-size: 13px!important;
    font-style: italic!important;
    color: #22608e!important;
    font-weight: bold!important;
}

.filter-graphs .dt-length {
    display:none!important;
}

.form-floating > label {
    position: absolute!important;
    top: -15px!important;
    left: 36px!important;
    z-index: 51!important;
    font-size:12px!important;
    font-weight: bold!important;
    color:#860e5d!important;
}

.bv-form .form-control:focus, .bv-form  .has-success .form-control:focus, .bv-form  .has-error .form-control:focus{
    border-color: #22608e !important;
    -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 6px #020c13 !important;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 6px #020c13 !important;
    background-color: #f7dfab!important;
    border-width: 2px !important;
}

.datatable thead tr th, .dt-container table tr th, .bv-form table tr th {
    background-color:#22608e!important;
    color:#fff!important;
    padding:2px!important;
}


.bv-form {
    font-family: var(--nav-font);
}

.bv-form .input-group-text, .bv-form .form-control, .bv-form .form-control:focus {
    font-family: var(--nav-font);
}

.bv-form .input-group {
    margin-bottom: 20px !important;
}

.datatable tr td, .datatable tr th {
    white-space: nowrap !important;
}

.dt-container .dt-paging .dt-paging-button {
    padding: 2px !important;
    margin: 0px !important;
}

    .dt-container .dt-paging .dt-paging-button .page-link {
        font-size: 11px !important;
        padding: 2px !important;
    }

.dataTable tr td, .dataTable tr th, .expandable-table tr td, .expandable-table tr th {
    font-size: 11px !important;
    white-space: nowrap !important;
    padding:2px!important;
}

.dt-container .dt-length, .dt-container .dt-buttons, .dt-container .dt-search {
    float: left !important;
    font-size: 12px !important;
}

.dt-container .dataTables_filter {
    float: right !important;
    font-size: 12px !important;
}

.dt-container .dt-info, .dt-container .dt-length label {
    font-size: 12px!important;
    font-style: italic!important;
    color:#22608e!important;
    font-weight: bold!important;
}

.dt-container .form-control {
    padding: 2px !important;
    height: 20px !important;
}


.btn-rounded {
    border-radius: 50px !important;
    -moz-border-radius: 50px !important;
    -webkit-border-radius: 50px !important;
    padding:5px!important;
    font-size: 11px !important;
}

.table tr td .btn {
    padding: 2px 5px !important;
    font-size: 11px !important;
}

.client-card {
    font-size: 12px !important;
}

.text-grey {
    color:#ccc!important;
}

.navmenu .dropdown ul a {
    text-align: left !important;
    justify-content:start!important;
}

.container-fluid {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

/*forms*/


.bv-form .help-block {
    position: absolute !important;
    bottom: -20px !important;
    font-style: italic !important;
    font-size: 12px!important;
}

.input-group {
    margin-bottom: 4px !important;
}

.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
    color: #3c763d;
}

.has-success .form-control {
    border-color: #3c763d;
    color: #3c763d !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    background-color: #aeebaf !important;
    color: #3c763d !important;
}

    .has-success .form-control:focus {
        border-color: #2b542c;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
        background-color: #aeebaf !important;
    }

.has-success .input-group-addon {
    color: #3c763d;
    border-color: #3c763d;
    background-color: #dff0d8;
    font-weight: bold !important;
}

.has-success .form-control-feedback {
    color: #3c763d !important;
    /*color: #fff !important;*/
}

.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label {
    color: #8a6d3b;
}

.has-warning .form-control {
    border-color: #8a6d3b;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

    .has-warning .form-control:focus {
        border-color: #66512c;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
    }

.has-warning .input-group-addon {
    color: #8a6d3b;
    border-color: #8a6d3b;
    background-color: #fcf8e3;
}

.has-warning .form-control-feedback {
    color: #8a6d3b;
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
    color: #a94442;
}

.has-error .form-control {
    border-color: #a94442 !important;
    color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    background-color: #efbbba !important;
}

    .has-error .form-control:focus {
        border-color: #843534;
        color: #a94442;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
        background-color: #efbbba !important;
    }

.has-error .input-group-addon {
    color: #a94442;
    border-color: #a94442;
    background-color: #f2dede;
    font-weight: bold !important;
}

.has-error .form-control-feedback {
    color: #a94442;
    /*color: #fff !important;*/
}

.has-feedback label.sr-only ~ .form-control-feedback {
    top: 0;
}

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
}

.form-control[disabled="disabled"] {
    background-color: #e9e9e9 !important;
}

.form-control-feedback {
    position: absolute !important;
    left: 100% !important;
    margin-left: -40px !important;
    top: 25px !important;
    padding-left: 5px!important;
    z-index: 2 !important;
    height: 20px !important;
    width: 20px !important;
    display: inline-block !important;
    font-weight: bold !important;
}

/*Forms*/

.nav-tabs .nav-link
{
    padding: .2rem .5rem;
    font-size:15px!important;
}

.nav-tabs .nav-link.pending.active, .nav-tabs .nav-link.complete.active {
    
    background: linear-gradient(#22608e, #153c5a, #0f2b41)!important;
    border-bottom: 1px solid #0f2b41!important;
}

.nav-tabs .nav-link.complete {
    padding: .2rem .5rem;
    background: linear-gradient(#8bb66f, #5c794a, #506840)!important;
    color: #ffff!important;
}

.nav-tabs .nav-link.pending {
    padding: .2rem .5rem;
    background: linear-gradient(#cccaca, hsl(0, 0%, 40%), #3a3a3a)!important;
    color: #ffff!important;
}

.nav-tabs .nav-link.complete a b{
    color: #22608e!important;
}

.nav-tabs .nav-link.pending a b {
    color: #ffff!important;
}



.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 2px !important;
    margin: 0px !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button .page-link {
        font-size: 11px !important;
        padding: 2px !important;
    }

.dataTable tr td, .dataTable tr th, .expandable-table tr td, .expandable-table tr th {
    font-size: 11px !important;
    white-space: nowrap !important;
    padding: 2px !important;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dt-buttons {
    float: left !important;
    font-size: 12px !important;
}

.dataTables_wrapper .dataTables_filter {
    float: right !important;
    font-size: 12px !important;
}


.dataTables_wrapper .form-control {
    padding: 2px !important;
    height: 20px !important;
}

ul {
    list-style-type: none !important;
}

.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
    width: 100%;
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-right: auto;
    margin-left: auto;
}

form span {
    color: var(--primary) !important;
}

.btn, .fc button, .ajax-upload-dragdrop .ajax-file-upload, .swal2-modal .swal2-buttonswrapper .swal2-styled, .swal2-modal .swal2-buttonswrapper .swal2-styled.swal2-confirm, .swal2-modal .swal2-buttonswrapper .swal2-styled.swal2-cancel, .wizard > .actions a {
    padding: 0.2rem .8rem !important;
}

/*Filters*/

/*Filters  Styles*/

.filter-box .form-control {
    padding: 5px !important;
    font-size: 12px !important;
    height: 24px !important;
    margin-bottom: 2px !important;
    background-color: #e4f9fc !important;
}

    .filter-box .form-control:focus {
        background-color: #efd65d !important;
        color: #000 !important;
    }

.filter-box {
    position: relative;
    padding: 5px !important;
}

    .filter-box > ul {
        height: 130px !important;
        overflow: auto;
        background-color: #ffffff !important;
        border: 2px solid #fff !important;
        margin-top: -2px !important;
    }

    .filter-box > p {
        padding: 2px !important;
        margin-left: -0px !important;
        background-image: linear-gradient(#c5c7c9, #2b4a72, #203755) !important;
        color: #ccc !important;
        font-size: 12px !important;
        border: 1px solid #fff !important;
    }


    .filter-box li {
        padding: 1px !important;
        border: 0px solid #fff;
        border-bottom: 1px solid #ccc !important;
        font-size: small !important;
        font-weight: normal;
        color: #22608e !important;
        border-bottom: 1px solid #e9e7e7 !important;
        white-space: nowrap;
        font-size: 12px !important;
    }

        .filter-box li:hover {
            background-color: #afd7d5 !important;
            cursor: pointer !important;
        }

            .filter-box li:hover .li-unchecked {
                color: #193831 !important;
            }

.li-unchecked {
    font-size: 15px;
    height: 15px;
    width: 15px;
    color: #ccc !important;
    cursor: pointer;
}

.li-checked {
    font-size: 15px;
    height: 15px;
    width: 15px;
    color: #193831 !important;
    cursor: pointer;
}

/*Filters*/

.fs-24 {
    font-size: 24px;
    font-weight: bold !important;
}

.fs-30 {
    font-size: 24px;
    font-weight: bold !important;
}

.content-wrapper {
    padding: 0px !important;
}


.input-group-text {
    padding: 0px !important;
}
.modal .modal-dialog {
    margin-top: 5px !important;
}

p {
    margin-bottom: 2px !important;
}


/*Input Group*/



/*INput Group*/
