@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
.scrollbar
{
	float: left;
	height: 300px;
	overflow-y: scroll;
}
#style-1::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

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

body{
    font-family: 'Poppins', sans-serif !important;
}
.digital-date{
    float: right;
    font-size: 22px !important;
    font-weight: 600 !important;
}
.digital-clock{
    float: right;
    font-size: 22px;
    font-weight: 600;
}
.br-theme-fontawesome-stars .br-widget a, .br-theme-css-stars .br-widget a{
    font-size: 32px;
    margin-right: 14px;
}
.bg-reporting1{
    padding: 3.1rem 3.5rem !important;
    background: #8dd7cf;
    color: #fff;
    min-height: 190px !important;
    max-height: 190px;
}
.bg-reporting{
    padding: 3.5rem 3.5rem !important;
    background: #8dd7cf;
    color: #fff;
}
.bg-project{
    padding: 3.5rem 3.5rem !important;
    background: #90bcb3;
    color: #fff;
}
.bg-info{
    padding: 3.5rem 3.5rem !important;
    background: #96c3ec;
    color: #fff;
}
.bg-master{
    padding: 3.5rem 3.5rem !important;
    background: #d6b1b1;
    color: #fff;
}
.modal .modal-dialog .modal-content .modal-header{
    padding: 15px 26px;
}
.modal .modal-dialog .modal-content .modal-body{
    padding: 15px 26px;
}
/* Slider */
.slider {
    position: relative;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    /* margin: auto auto; */
  }
  
  .slider:hover > .button-wrapper {
    width: 100%;
  }
  
  .item-wrapper {
    display: flex;
    flex-direction: row;
    height: 100%;
    transition: transform 0.4s ease;
  }
  
  .item-wrapper img {
    width: 360px;
    object-fit: cover;
    flex-basis: 100%;
    height: 353px;
  }
  
  .button-wrapper {
    position: absolute;
    width: calc(100% + 200px);
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(calc(-50% - 25px));
    transition: width 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
  }
  
  .btn-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background-color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    outline: none;
    cursor: pointer;
    transition: transform 0.25s ease;
  }
  
  .btn-slide:hover {
    transform: scale(1.1);
  }
  
  .indicator-wrapper {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  
  .indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
  }
  
  .indicator.current {
    background-color: #777;
  }
  
  .indicator:not(.current):hover {
    background-color: #ddd;
  }
  

.caption {
	position: absolute;
	top: 50%;
	left: 50%;
    transform: translateX(-50%) translateY(-50%);
	width: 60%;
	z-index: 9;
	margin-top: 20px;
	text-align: center;
}
.caption h1 {
  color: #fff;
	font-size: 52px;
	font-weight: 700;
	margin-bottom: 23px;
}
.caption h2 {
  color: rgba(255,255,255,.75);
	font-size: 26px;
	font-weight: 300;
}

a.view-demo {
	color: #fff;
	font-size: 21px;
	font-weight: 700;
	display: inline-block;
	margin-top: 35px;
}
a.view-demo:hover {
	text-decoration: none;
	color: #333;
}

.carousel-indicators .active {
  background: #fff;
}
.carousel-indicators li {
  background: #fff !important;
  border-top: 20px solid;
  z-index: 15;
}

.portfolio-grid{
    height: 200px !important;
}
.img-p{
    text-align: justify;
}
.img-action {
    width: 30%;
    border-radius: 8px;

}
.img-blank{
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
}
.table th, .jsgrid .jsgrid-table th, .table td, .jsgrid .jsgrid-table td{
    padding: 0.6375rem !important;
}
.pt-50{
    padding-top: 40px !important;
}
.table-responsive > .table-bordered{
    border:1px solid #e0e0ef;
}
.full-width{
    width: 100% !important;
}
.full-width-2{
    width: 100% !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    top: 6px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 20px !important;
}
.table thead th, .jsgrid .jsgrid-table thead th{
    font-weight: 500;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5{
    font-weight: 500;
}
.bg-light{
    background-color: #fff !important;
    border: 1px solid #fff;
}
.btn-inverse-success.btn-icon{
    width: auto;
    height: auto;
    padding: 10px;
}
p{
  margin: 8px 0px 8px;
}
/* .bold{
    font-weight: bold !important;
    letter-spacing: 1px;
} */
.agenda-pekerjaan li{
    text-decoration: none !important;
    border-bottom: 1px solid #eee;
    margin: 10px 0px 10px 0px;
}
.font-green{
    color: #7adc46;
}
.auth .brand-logo{
    margin-bottom: 15px;
}
.auth .brand-logo img{
    width: 100%;
}
.active-menu{
    background: #30576f;
    border-radius: 0.375rem;
}
.sidebar .nav .nav-item .nav-link i.menu-icon{
    width: 20px;
}
.font-size-16{
    font-size: 16px !important;
}
.navbar-select2{
    flex-basis: 40% !important;
}
.sidebar .nav.sub-menu{
    padding: 0 0 0 3.25rem;
}
.ml-mt-button{
    margin-left: 200px;
    margin-top:20px;
}
.width-100{
    width: 100% !important;
}
/*.select2-container{*/
/*    width: 100% !important;*/
/*}*/
/* .card .card-title{
    font-weight: bold;
    font-size: 20px;
    margin-top: 5px;
} */
.form-group{
    margin-bottom: 12px;
}
/* .col-form-label{
    font-weight: 600;
    letter-spacing: 0.09rem;
} */
.col-form-label{
    padding-top: calc(0.30rem + 1px);
}
.datepicker{
    padding: 0px;
}
.icon-size-form{
    padding: 0.300rem 0.75rem !important;
}
.mt-top-min-20{
    margin-top: -15px;
}
.select2-container .select2-selection--single .select2-selection__rendered{
    padding-left: 0px;
}
.dataTables_wrapper .dataTable .btn, .dataTables_wrapper .dataTable .fc button, .fc .dataTables_wrapper .dataTable button, .dataTables_wrapper .dataTable .ajax-upload-dragdrop .ajax-file-upload, .ajax-upload-dragdrop .dataTables_wrapper .dataTable .ajax-file-upload, .dataTables_wrapper .dataTable .swal2-modal .swal2-buttonswrapper .swal2-styled, .swal2-modal .swal2-buttonswrapper .dataTables_wrapper .dataTable .swal2-styled, .dataTables_wrapper .dataTable .wizard > .actions a, .wizard > .actions .dataTables_wrapper .dataTable a{
    padding: 0.3rem 0.7rem;
}
/*div.dataTables_wrapper div.dataTables_length select{*/
/*    width: 85px;*/
/*}*/
.form-control, .asColorPicker-input, .dataTables_wrapper select, .jsgrid .jsgrid-table .jsgrid-filter-row input[type=text], .jsgrid .jsgrid-table .jsgrid-filter-row select, .jsgrid .jsgrid-table .jsgrid-filter-row input[type=number], .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--single .select2-search__field, .typeahead, .tt-query, .tt-hint{
    padding: 0.53rem 1.375rem;
}
.pagination, .jsgrid .jsgrid-pager{
    padding-left: 1rem;
}
a:hover{
    text-decoration: none;
}
.navbar{
    flex-wrap: inherit;
    padding: 0.5rem;
}
.card.card-statistics{
background: linear-gradient(85deg, #7ADC46, #309FEA) !important;
}
.space-breadcome{
    padding: 10px 0px 0px 0px !important;
}
.card.card.card-menu{
background: linear-gradient(85deg, #7ADC46, #309FEA) !important;
    color: #fff !important;
}
.jarak-menu{
    padding: 10px 15px;
}
.font-menu-icon{
    font-size: 16px;
    color: #fff !important;
    speak: none;
    display: inline-block;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-decoration: none !important;
    vertical-align: top;
}
.font-white{
    color: #fff !important;
}
.footer{
    padding: 3rem 3rem;
}
.scroll-horizontal {
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 1000px;
    height: auto;    
 }
 /* .justify-content-center, .orders-chart-legend ul, .email-wrapper .message-body .attachments-sections ul li .thumb{
     padding: 0px 40px 0px 40px;
 } */
 .main-panel{
     width: calc(100%);
 }
 .navbar.horizontal-layout-navbar{
     z-index: 1;
 }
.right-10{
    padding-left: 10px !important;
}

.dropdown-toggle:after{
    margin-left: 10px !important;
}
.flag-icon{
    margin-right: 10px !important;
}
.color-icon-login{
    color: #309fea ;
}
.form-control:focus{
    box-shadow: none !important;
}
.auth .login-half-bg{
    /* background: url('../static/bg-login.png'); */
    background: linear-gradient(rgba(255,255,255,.2), rgba(37,102,142,.5)), url('../static/images-login.webp');
    background-repeat: no-repeat;
    background-size: cover;
background-position: center bottom;
}
.auth form .auth-form-btn{
    height: auto;
}
.btn-color-smt{
    background: #309fea;
    color: #ffffff;
}
.btn-color-smt:hover{
    background: #0098ff;
}
.nav-link-icon{
    margin-right: 0rem;
}
.content-wrapper{
    padding: 2rem 3rem;
    /* margin-top: 5rem; */
}
.navbar.default-layout-navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile{
    border: none;
}
.text-left-search{
    margin-left: 15px;
}
.boxed-layout .container-scroller{
    background: #fff;
}
.boxed-layout .container-scroller{
    background: #f4f6fa;
}
.content-wrapper{
    background: #f4f6fa;
}
.number-notif{
    font-size: 12px;
    color: red;
    margin-top: -15px;
}
.ti-bell{
    font-size: 18px;
}
.width-search{
    width: 505px !important;
}
.btn-outline-dark{
    border-color: #dadcde;
}
.border-search{
   line-height: 1.4285714;
    color: #232e3c;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dadcde;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.navbar.default-layout-navbar .navbar-brand-wrapper .navbar-brand img{
    height: 45px;
}
@media screen and (max-width: 1023px) and (min-width: 360px) {
    .login-half-bg{
        display: none !important;
    }
   
}
@media (min-width: 992px){
    .horizontal-menu .page-body-wrapper{
        padding-top: 0px;
    }
}
@media (max-width: 768px){
    .d-inline-block{
        width: 100% !important;
    }
    .respon-android{
        display: none !important;
    }
    .content-wrapper{
        padding: 1rem;
    }
    .ml-mt-button{
        margin: 0px;
    }
    .auth.auth-img-bg .auth-form-transparent{
        width: 60%;
    }
    .navbar.default-layout-navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile{
        width: 115px;
    }
    .mobile-hidden{
        display: none;
    }
    .mt-05{
        margin-top: 5px !important;
    }
    .mt-10-c{
        margin-top: 10px !important;
    }
    .pb-10-c{
        padding-bottom: 10px !important;
    }
    .mb-05{
        margin-bottom: 5px !important;
    }
    .mb-10{
        margin-bottom: 10px !important;
    }
    .mb-15{
        margin-bottom: 15px !important;
    }
    .mb-20{
        margin-bottom: 20px !important;
    }
    .navbar.default-layout-navbar .navbar-brand-wrapper{
        /* width: 100% !important; */
        height: 70px !important;
    }
    .navbar.default-layout-navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile img{
        /* display: none !important; */
    }
    .navbar.default-layout-navbar .navbar-menu-wrapper .navbar-toggler{
        margin-left: -50px;
        margin-top: 10px;
    }
}