.bg-1{
    background: linear-gradient(
45deg
, #9bbb58, #b9cf8a) !important;
}

.bg-2{
    background: linear-gradient(
45deg
, #4aacc7, #80c4d7) !important;
}

.bg-3{
    background: linear-gradient(
45deg
, #c0504e, #d28483) !important;
}

.bg-4{
    background: linear-gradient(
45deg
, #f79647, #f9b57e) !important;
}


.bg-1 .body, .bg-2 .body, .bg-3 .body, .bg-4 .body{
    color: white !important;
}


.table-responsive::-webkit-scrollbar-track
{
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
    border-radius: 10px;
    background-color: #1c222c;
}

.table-responsive::-webkit-scrollbar
{
    width: 12px;
    background-color: #1c222c;
}

.table-responsive::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.3);
    background-color: #323841;
}



.page-item.disabled .page-link{
    background-color: #191f28;
    color: #999;
}

.page-item.active .page-link{

    background-color: var(--principal);
    border-color: #dee2e6;
}

.card .header{
    color: #777;
}

.divider{
    background-color: #141820;
}

.sidebar-nav .metismenu>li.active>a{
    background-color: #10141a;
}

.form-control:focus{
    color: #999;
}



/*.auth-main::before{
    background-color: #212121;
}
*/


.auth-main::before{
    background-color: rgba(25,31,40, 0.9);
}

.top_counter .icon:hover{
    color: #999;
}


.selectize-control.single .selectize-input{
    background: transparent !important;
    border-radius: 5px !important;
    border: 1px solid #3f3e3e !important;
    box-shadow: none !important;
    color: #767676;
}

.modal-update-slot .btn-danger{
    border-color: #b21f2d;
}

.modal-update-slot .btn-danger:hover{
    border-color: var(--principal);
}


.nav-tabs-new2>li>a.active{
    border-bottom: 2px solid var(--principal) !important;
    background-color: transparent;
    color: var(--principal);
}


.btn-default{
    background-color: transparent;
    border-color: #5f5858;
}


.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    background-color: var(--principal);
    border-color: var(--principal) var(--second) var(--third);
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{
    border-color: var(--principal) var(--second) var(--third);
}


.table thead th{
    border-bottom: var(--principal);
    border-top-color:  var(--principal);
}

.text-info{
    color:  var(--principal) !important;
}