.toggle-handle {
    background-color: white;
}

.btn-outline-warning {
    color: #f59c1a;
    border-color: #f59c1a;
}

.btn-success {
    color: #fff;
    background-color: #32a932;
    border-color: #32a932;
}

.btn-success:hover {
    color: #fff;
    background-color: #32a932;
    border-color: #32a932;
}

.btn-primary {
    color: #fff;
    background-color: #00acac;
    border-color: #00acac;
}

.btn-primary:hover {
    color: #fff;
    background-color: #00acac;
    border-color: #00acac;
}

.btn-outline-warning:hover {
    color: #fff;
    background-color: #f59c1a;
    border-color: #f59c1a;
}
.btn-warning {
    color: #fff;
    border-color: #f59c1a;
    background-color: #f59c1a;
}
.btn-warning:hover {
    color: #fff;
    border-color: #f59c1a;
    background-color: #f59c1a;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    color: #fff;
    background-color: #bc5449;
    border: #f59c1a;
    opacity: 0.8;
}

.bg-info {
    background-color: #348fe2 !important;
}

.bg-success {
    background-color: #32a932 !important;
}

.fa,
.fas {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.bg-danger {
    background-color: #cb252b !important;
}

.btn-danger {
    background-color: #cb252b !important;
}

.small-box .inner2{
    
    padding-top:5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
}

.small-box .inner3{
    padding-top:38px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 39px;
    
}

.small-box .icon2 > i.fas{
    font-size:70px;
    top:10px;
}

.small-box .icon2 > i {
    font-size: 90px;
    position: absolute;
    right: 15px;
    top: 15px;
    transition: -webkit-transform 0.3s linear;
    transition: transform 0.3s linear;
    transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}

.small-box .icon2{
    color: rgba(0, 0, 0, 0.1);
    z-index: 0;
}
.small-box{
    margin-bottom: 8px;
}

.padding-box-left{
    padding-left: 4px;
}

.padding-box-right{
    padding-right: 4px;
}

.bg-new-req{
    background: #eeeaea;
}

.bg-gradient-paid{
    background: #8bdae2;
}

.bg-gradient-yellow{
    background: #fcd78e !important;
}

.bg-wait-approval{
    background: #94c7f7;
    color: white;
}

.bg-on-process{
    background: #ff9900;    
    color: white;
}
.bg-pink{
    background: #fd8a8a !important;
}

.bg-danger{
    background:#bc5449 !important;
}

.dashboard-admin-main{
    display: grid;
    grid-template-areas: 
      "total-company total-company total-company total-company"
      "active-company active-company nonactive-company nonactive-company"
      "total-client total-client total-user total-user"
      "active-client nonactive-client active-user nonactive-user";   
    grid-auto-columns: 23% 1fr 26%;
    grid-gap: 10px;
    height: 0;  
    margin: 0;
}
.dashboard-user-main{
    display: grid;
    grid-template-areas: 
      "total-company total-company total-client total-client"
      "active-company nonactive-company active-client nonactive-client";
    grid-auto-columns: 23% 1fr 26%;
    grid-gap: 10px;
    height: 0;  
    margin: 0;
}

#total-company{
    grid-area: total-company;
}
#active-company{
    grid-area: active-company;
}
#nonactive-company{
    grid-area: nonactive-company;
}
#total-client{
    grid-area: total-client;
}
#total-user{
    grid-area: total-user;
}
#active-client{
    grid-area: active-client;
}

#nonactive-client{
    grid-area: nonactive-client;
}
#active-user{
    grid-area: active-user;
}
#nonactive-user{
    grid-area: nonactive-user;
}
.dashboard-main{
    display: grid;
    grid-template-areas: 
      "new-request new-request new-request revisi-request"
      "wait-approval approve-request approve-request revisi-request"
      "wait-approval on-process on-process revisi-on-process"
      "reject-request unpaid paid revisi-on-process"
      "reject-request finish finish finish";
    
    grid-auto-columns: 20% 1fr 30%;
    grid-gap: 10px;
    height: 0;  
    margin: 0;
    
}

#new-request{
    grid-area:new-request;
}

#revisi-request{
    grid-area: revisi-request;
}

#wait-approval{
    grid-area: wait-approval;
}


#on-process{
    grid-area: on-process;
}

#approve-request{
    grid-area: approve-request;
}

#revisi-on-process{
    grid-area: revisi-on-process;
}
#reject-request{
    grid-area: reject-request;
}
#unpaid{
    grid-area: unpaid;
}

#paid{
    grid-area: paid;
}

#finish{
    grid-area: finish;
}