body{
    font-size:0.85rem;
    color:#363638;
}

.min-vh-80{
    min-height: 80vh;
}

.min-vh-75{
    min-height: 75vh;
}

.min-vh-65{
    min-height: 65vh;
}

.min-h-100{
    min-height:100%;
}
.h-60{
    height:60%;
}
.ml-auto{
    margin-left:auto;
}
.text-label-bold,.t-bold{
    font-weight: bold;
}
.text-18{
    font-size:18px;
}
.text-20{
    font-size:20px;
}
.text-24{
    font-size: 24px;
}
.text-28{
    font-size: 28px;
}
.text-32{
    font-size: 32px;
}

.text-36{
    font-size: 36px;
}
.text-bold{
    font-weight: 900;
}
.text-black{
    color: #131313 !important;
}
.nav-item.active{
    background-color: #eaecf4;
    border-radius:8px;
}
.right{
    float:right;
}
.badge{
    border-radius:15px;
}

.icon-file{
    font-size:6rem;
}
.bukti-pembayaran{
    max-height:96px;
}
.no-wrap{
    white-space: nowrap;
}
.img-zoom{
    max-width:600px;
}
.loader{
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #F4F4F4;
    box-shadow: 0 0.625rem 1.25rem rgb(161 172 184 / 50%) !important;
    border-radius: 20px;
}

.elipsize{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.max-w240{
    max-width:240px;
}

.datepicker td, .datepicker th{
    width: 40px !important;
    height: 40px !important;
}
.datepicker-months>.table-condensed{
    width:100% !important;
}



/** Login */


/** Sidebar color */

.btn-bazma{
    /* background: linear-gradient(to bottom, #006600 0%, #009900 100%); */
    background: linear-gradient(to bottom, #0a68c2 0%, #094177 100%);
    color:#fff;
    /* font-size: 24px; */
    font-weight: 900;
}
.bootstrap-select {
    border-radius: 10rem;
    border: 1px solid #d1d3e2 !important;
}
.sidebar-dark .nav-item .nav-link,.sidebar-dark .nav-item .nav-link i{
    color:#131313 !important;
}
.sidebar-dark .nav-item .nav-link[data-toggle="collapse"]::after{
    color:#181818;
}
#sidebarToggle{
    background-color: rgb(225 225 225) !important;
}
#sidebarToggle:after{
    color: rgb(103 98 98 / 50%) !important;
}
/*
.sidebar-dark .nav-item a:hover,.sidebar-dark .nav-item a:hover i {
    
    color:#0968e1 !important;
}
*/

.nav-link:hover{
    background-color: #eaecf4;
    border-radius:8px;
}
.sidebar .nav-item.active .nav-link,.sidebar .nav-item.active i{
    color:#641ee9 !important;
}
.sidebar .nav-item.active .nav-link[data-toggle="collapse"]::after{
    color:#641ee9 !important;
}
.sidebar-dark hr.sidebar-divider{
    border-top:1px solid rgb(30 30 30 / 10%);
}
.sidebar-dark .sidebar-brand{
    color: #767676 !important;
}
.sidebar .nav-item .nav-link{
    padding:.5rem 1rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.collapse-item.active{
    background-color: #eaecf4;
    
} 
.table th, .table td {
    border: 0;
}
.logo-bazma{
    width: 96px;
}
.user-header{
    /* padding: 15px; */
    /* margin: 0 15px; */
    text-decoration: none;
    color: #131313;
    cursor: pointer;
}
.user-header:hover{
    color:#131313;
    text-decoration: none;
}
.user-header i {
   font-size:34px;
   margin:5px;
}
.sidebar-dark .sidebar-heading{
    color:#888888;
}

#content {
    background-color: #f8f9fc;
}
.page-loader-wrapper {
    z-index: 99999999;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    /* background: #f8f9fc; */
    overflow: hidden;
    text-align: center;
    display: flex;
    align-items: center;
}

.preloader img {
    width: calc(50% - 30px);
}

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder,
::placeholder {
    /* color: #c8c8c9 !important; */
    opacity: 1;
    color: #fff !important;
}

.border-1{
    border:1px solid #ADADAD !important;
}

.f-right{
    float:right;
}

.mx-10{
    margin-left:10px;
    margin-right:10px;
}
.mx-5px{
    margin-left:5px;
    margin-right:5px;
}

.user-header.user-name{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.top-dashboard-link:hover{
    text-decoration:none;
}
.table-bar{
    background-color: #F4F4F4;
    padding:10px 4px;
}

.search_icon{
    background: #EAEAEA;
    width: 40px;
    height: 39px;
    display: flex;
    align-items: center;
    border: 1px solid #d1d3e2;
    border-top-right-radius: 0.35rem;
    border-bottom-right-radius: 0.35rem;
}
.search-input{
    border-radius:.35rem 0 0 .35rem !important;
}
.stepper-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
   
}
@media (max-width: 768px) {
    .stepper-item {
        font-size: 12px;
    }
}
@media (max-width: 360px) {
    .stepper-item {
        font-size: 11.6px;
    }
}

.stepper-item::before {
    position: absolute;
    content: "";
    /* border-bottom: 2px solid #ccc; */
    border-bottom: 6px solid #ccc;
    width: 100%;
    top: 20px;
    left: -50%;
    z-index: 2;
    }

.stepper-item::after {
    position: absolute;
    content: "";
    /* border-bottom: 2px solid #ccc; */
    border-bottom: 6px solid #ccc;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 2;
    }

.stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ccc;
    margin-bottom: 6px;
}

.stepper-item.active {
    font-weight: bold;
}

.stepper-item.completed .step-counter {
    background-color: #4bb543;
    color:#ffffff;
}

.stepper-item.completed::after {
    position: absolute;
    content: "";
    /* border-bottom: 2px solid #4bb543; */
    border-bottom: 6px solid #4bb543;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 3;
    
}
.stepper-item.final::after {
    animation: decrease 2s 0.5s infinite;
}

.stepper-item:first-child::before {
    content: none;
}
.stepper-item:last-child::after {
    content: none;
}

.swal-wide{
    width:640px !important;
}
.header-title{
    font-size:24px;
}
.wrap-text{
    white-space: inherit !important;
}

@keyframes increase {
    from { left: -5%; width: 5%; }
    to { left: 130%; width: 100%;}
   }
@keyframes decrease {
    from { left: 40%; width: 40%; }
    to { left: 150%; width: 10%;}
}


@media (min-width: 768px){
    .sidebar {
        width: 16rem!important;
    }
    .sidebar li{
        margin:0 15px;
    }
    /** Login Page */
    .login-logo-bazma{
        height: 96px;
        margin:15px auto;
     
    }
    .sidebar.toggled {
        width: 8.5rem!important;
    }
   
    #accordionSidebar.navbar-nav:not(.toggled){
        height: 100vh !important;
        overflow-y: scroll;
        width: 20rem 9 !important;
    }
    #wrapper{
        height:100vh;
    }
}

@media (max-width: 768px){
    .login-logo-bazma{
        width:80%;
        margin:15px auto;
    }
    .header-title{
        font-size:18px;
    }
    .card-body{
        padding:.7rem !important;
    }
    .user-header{
         padding: 15px;

    }

    /*
    .shadow-lg{
        box-shadow: none !important;
    }
    .card-body{
        padding:.25rem !important;
    }
    */
}

@media (max-width: 360px){
    .title-second{
        display: none;
    }
}

.layout-menu-toggle1{
    background-color: #696cff;
    border: 7px solid #f5f5f9;
    border-radius: 50%;
    color:#fff !important;
}
.app-brand .layout-menu-toggle1 {
    position: absolute;
    left: 15rem;
    border-radius: 50%;
}

.layout-menu-collapsed:not(.layout-menu-expanded) .app-brand .layout-menu-toggle1 {
    left: 4rem !important;
}
.logo-collapsed{
    display: none;
}
.logo-collapsed img{
    width:36px
}
.layout-menu-collapsed .app-brand .logo-collapsed{
    display: block;
}

.layout-menu-collapsed  .app-brand .logo-expanded{
    display: none;
}
.layout-menu-toggle1 .bx-chevron-right{
    display: none;
}
.layout-menu-collapsed .app-brand .layout-menu-toggle1 .bx-chevron-right{
    display: block;
}
.layout-menu-collapsed .app-brand .layout-menu-toggle1 .bx-chevron-left{
    display: none;
}
.bg-soft-grey {
    background-color: #f7f7f7 !important;
}
.min-vh-40{
    min-height:40vh;
}

/*
#Container::-webkit-scrollbar-thumb
#Container::-webkit-scrollbar-track
#Container::-webkit-scrollbar ->width