.side-menu {
    background: #004D43 !important;
    color: white !important;
}




.form-group.has-error .val-msg {
    font-size: 8pt;
    color: #f96868;
    margin-top: 3px;
}

.val-msg {
    font-size: 8pt;
    color: #f96868;
    margin-top: 3px;
}

.dataTable a {

    color: #004D43 !important;
    font-weight: bold;

}

.dataTable .selected a {

    color: darkgray !important;

}


.dataTable .badge-primary {

    background-color: #CFC394 !important;

}

.dataTable .selected .badge-primary {

    background-color: white !important;
    color: #CFC394 !important;
}



.text-bold { font-weight: bold; }

.text-decoration-none {
    text-decoration: none !important;
}


.text-custom-primary {
    color: #004D43 !important;
}

.text-custom-secondary {
    color: #CFC394 !important;
}


table.dataTable tbody tr.selected, table.dataTable tbody th.selected, table.dataTable tbody td.selected {

    color: darkgray !important;

}


/**
Page Header overrides
 */

.breadcrumb-item a {
    color: black !important;

}

.breadcrumb-item.active a {
    color: #98a6ad !important;

}


/**
Drop Menu overrides
 */

.dropdown-menu a {

    color: #004D43 !important;
    font-weight: 100;
    margin: 10px !important;
    padding: 5px !important;

}


/**
   Input File
 */

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}





/**
LOADING
*/

#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(230, 232, 236, .9);
    z-index: 1050;
}

#page-loader.fade {
    display: none
}

#page-loader.fade.in {
    display: block
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(359deg)
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg)
    }
    to {
        -moz-transform: rotate(359deg)
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg)
    }
    to {
        -o-transform: rotate(359deg)
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(359deg)
    }
}

.spinner,
.spinner-small {
    height: 40px;
    width: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px -20px 0 0;
    border: 2px solid #fff;
    border-top: 2px solid #004D43;
    border-radius: 100%
}

.fade.in .spinner,
.fade.in .spinner-small {
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear
}

.spinner-small {
    border: 2px solid rgba(0, 0, 0, .05);
    border-top: 2px solid #004D43;
    height: 30px;
    width: 30px;
    margin: -15px -15px 0 0
}



/*Datatable*/
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus, .page-item.active .page-link {
    background: #004D43 !important;
    border-color: #004D43 !important;
}


/*DATATABLES*/
.dataTable td.check_col, .dataTable th.check_col {
    padding: 5px 15px;
    text-align: center;
    width: 1%;
    vertical-align: middle !important;
}

.display-table .display-table-cell.fit,
table.dataTable .fit {
    width: 1%;
}


.display-table .display-table-cell.width-100px,
table.dataTable .width-100px {
    width: 100px;
}


table.dataTable thead th {
    white-space: nowrap;
    padding: 10px;
    padding-right: 17.5px;
    /*vertical-align: top !important;*/
}

table.dataTable tbody td {
    padding: 10px;
}

table.dataTable th small {
    font-size: 75%;
}

table.dataTable.withtrashed tr.highlight td,
table.dataTable.withtrashed tr.highlight td a:not(.btn),
table.dataTable.withtrashed tr.highlight td .text-primary,
table.dataTable.withtrashed tr.highlight td .text-success,
table.dataTable.withtrashed tr.highlight td .text-warning,
table.dataTable.withtrashed tr.highlight td .text-danger {
    color: #CACACA !important;
}

.table-responsive table.dataTable {
    width: 99.9% !important;
}

table.dataTable table.dataTable_detail {
    margin-bottom: 5px;
    background-color: transparent;
}

table.dataTable table.dataTable_detail td,
table.dataTable table.dataTable_detail th {
    padding: 5px;
}

table.dataTable td :not(.btn) small > i.fa {
    font-size: 65%;
}




/*Menu*/

.side-menu .topbar-left {
    background-color: transparent !important;
}

#sidebar-menu > ul > li > a.active {

    color: white !important;
    font-weight: bold !important;
}


#sidebar-menu > ul > li > a {
    margin: 1px 0 !important;
}


.nav-second-level li.active > a {
    color: white !important;
    font-weight: bold !important;
    opacity: 1.0;
}

#sidebar-menu > ul > li > a:hover, #sidebar-menu > ul > li > a:focus, #sidebar-menu > ul > li > a:active {
    color: white !important;
    font-weight: bold !important;
    opacity: 1.0;

    background-color: #00281f !important;
}


#sidebar-menu > ul > li > a {
    color: white !important;
    font-weight: lighter;
    opacity: 0.9;
}

.nav-second-level li a, .nav-thrid-level li a {
    color: white !important;
    background-color: #CFC394 !important;
}


.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border-bottom-color: #f9f9f9;
}

.nav-second-level li a:hover, .nav-thrid-level li a:hover {
    background-color: #00281f !important;
}




.enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a:hover, .enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a:active, .enlarged #wrapper .left.side-menu #sidebar-menu > ul > li > a:focus {
    color: white !important;
    background-color: #CFC394;
}

.nav-second-level li a:hover, .nav-thrid-level li a:hover {
    color: white !important;
    background-color: #786e50 !important;
}

.nav-second-level li a:active, .nav-thrid-level li a:active {
    color: white !important;
    background-color: #786e50 !important;
}



.nav-second-level > li >.active, .nav-thrid-level > li >.active {
    background-color: #786e50 !important;
}


/**
Buttons
*/

.btn-primary {

    background-color: #CFC393 !important;
    border-color: #CFC393 !important;

}


.btn:disabled {
    opacity: 0.6;
    background-color: whitesmoke !important;
    border-color: whitesmoke !important;
    color: lightgray !important;
    cursor: not-allowed;
}

.btn-link {
    color: #004D43 !important;
    text-decoration: none !important;
}

.btn-link:hover {
    color: #00281f !important;
    text-decoration: none !important;
    opacity: 0.5;

}




/**
SELECT PICKER
*/

.selectpicker {
    border: 1px solid #d9e3e9 !important;
    background-color: white !important;
}

/*.bootstrap-select > .dropdown-menu > .dropdown-menu li a {*/
    /*padding-left: 10px !important;*/
    /*margin-left: 0 !important;*/
/*}*/


.dropdown-menu a {
    padding-left: 10px !important;
    margin-left: 0 !important;
}


.bootstrap-select > .dropdown-menu {
   padding-bottom: 0 !important;
}



/*Checkboxes*/
.checkbox-custom input[type="checkbox"]:checked + label::before {
    background-color: #CFC393 !important;
    border-color: #CFC393 !important;
}


.padding-0 {

    padding: 0 !important;
}

.padding-left-0 {

    padding-left: 0 !important;
}

.padding-right-0 {

    padding-right: 0 !important;
}



.accordion li {
    background: #fbfbfb;

    border-width: 2px !important;
    border-style: solid !important;
    border-color: #f1f1f1 !important;
}

.accordion li:nth-child(odd) {
    background: #f5f5f5;
}


/**
DROPZONE
*/
.dropzone.dz-clickable .dz-message {
    font-size: 13pt;
    margin-bottom: 10px;
}


/*IMAGES*/
.bg_img_panel,
.img_fade{
    opacity: 0;
}


.disabled {
    background-color: #e9ecef;
}



/*LISTS*/

.color_rounded_square {
    height: 20px;
    width: 20px;
    border-style: solid;
    border-width: 1px;
    border-color: lightgrey;
}

.bottom_separator {
    border-bottom: 1px solid rgba(0,0,0,.1);
}


/*ALERTS*/
.alert_high {
    color: red;
}

.alert_low {
    color: orange;
}


.form-control:disabled, .form-control[readonly] {
    background-color: #F9F9F9;
    opacity: 1;
}







.language-area {
    position: absolute;
    top: 25px;
    right: 25px;
// background-color: yellow;
    z-index: 666;
    text-align: center;

    width: 60px;

@if(isset($display_mode) && $display_mode == \App\Http\Controllers\front\frontMasterController::DISPLAY_DARK)
color: white !important;
@else
color: #5b5b5b !important;
@endif

}


.language-area-mobile {
    text-align: center;
    width: 100%;
@if(isset($display_mode) && $display_mode == \App\Http\Controllers\front\frontMasterController::DISPLAY_DARK)
color: white !important;
@else
color: #5b5b5b !important;
@endif

font-size: 10pt !important;

}



.language-area:hover,
.language-area-mobile:hover {
    opacity: 0.5;
}

.language-button {
    cursor: pointer;
    position: relative;
    border-radius: 20px !important;
    width: 24px;
    height: 24px;
    overflow: hidden;
    text-align: center;

    border-width: 0;

}


small > .flag-icon {
    width: 12px !important;
    height: 12px !important;
    top: 5px;
}


.flag-icon {

    width: 14px !important;
    height: 14px !important;
    top: 3px;
   /* padding: 30px 0 0 0;
    margin: 0;*/

    /*position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/

}

.swatch {
    border: 1px inset white;
}


.gm-ui-hover-effect {
    opacity: .6;
    margin-right: 5px !important;
    margin-top: 5px !important;
}


@media screen and (max-width: 640px) {


    .navbar-custom {
        padding: 0 5px;
    }


    .nav-user {
        padding: 0 6px !important;
    }


    .page-title-box .page-title {
        font-size: 12px;
    }


    .content-page .content {
        padding-top: 60px !important;
    }



    .col-12 {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    .col-sm-12 {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }


    .col-6 {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }


    .col-sm-6 {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    .card-box {
        padding: 5px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    h3 {
        padding-left: 10px;
        padding-right: 10px;
    }




    .dropdown-menu.show{
       /* transform: translate3d(0, 0px, 0px); */
    }

    .bootstrap-select .dropdown-menu li a span.text {
        display: inline-block;
        width: 85vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

}