@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}

body{
    font-family: 'Poppins', sans-serif;
    background:#F5F6F7;
}

a{
    text-decoration:none;
    color:#000;
}

aside{
    position:fixed;
    top:16px;
    left:16px;
    /*width:14rem;*/
    padding:18px;
    width:250px;
    height:calc(100vh - 32px);
    background:#fff;
    border-radius:16px;
    /*box-shadow: rgba(0, 0, 0, 0.05) 0rem 1.25rem 1.687rem;*/
    -webkit-box-shadow: 0px 14px 26px -6px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 14px 26px -6px rgba(0,0,0,0.05);
    box-shadow: 0px 14px 26px -6px rgba(0,0,0,0.05);
    font-family: "Roboto", sans-serif;
    transition: 1s;
    z-index:100;
}

aside p:first-child{
    font-size:1.1vw;
    font-weight:600;
}

aside p:last-child{
    font-size:.77vw;
}

aside .kotak_logo{
    padding:8px 10px;
}

aside .logo{
    width:100%;
}

aside .tombol_tutup{
    position:absolute;
    top:7px;
    right:7px;
    font-size:26px;
    display:none;
}

/*----------------------*/
aside.aktif{
    left:-266px;
}




main{
    width:calc(100% - 250px - 32px - 16px - 22px);
    min-height:100px;
    position:absolute;
    top:16px;
    left:calc(250px + 32px + 16px);
    /*background:grey;*/
    transition: 1s;
    /*border:1px solid black;*/
}

/*----------------------*/
main.aktif{
    width:calc(100% - 32px - 6px);
    left:16px;
}





header{
    width:100%;
    height:60px;
    
}

section{
    width:100%;
    min-height:200px;
    /*margin-top:48px;*/
    margin-top:30px;
    background:#fff;
    border-radius:16px;
    -webkit-box-shadow: 0px 14px 26px -6px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 14px 26px -6px rgba(0,0,0,0.05);
    box-shadow: 0px 14px 26px -6px rgba(0,0,0,0.05);
}

footer{
    margin:20px 0 20px 20px;
    color: #67748e;
    font-size:14px;
}





/*-----------MENU MULAI-------------*/

nav{
    /*border:1px solid black;*/
    font-family: Roboto, Helvetica, Arial, sans-serif;
    transition: 1s;
}

nav li{
    position:relative;
    list-style:none;
    transition:all 0.4s ease;
    transition-delay:0.1s;
    /*border:1px solid coral;*/
    margin:5px 0;
}

nav li a, nav li span{
    /*display:flex;*/
    /*align-items:center;*/
    /*border:1px solid coral;*/
    /*padding:5px 0;*/
    color:#77839A;
    font-weight: 400;
}

nav li a:hover, nav .menu_judul:hover, nav .menu_judul2:hover, nav li a:hover > span, nav .menu_judul:hover > span{
    color:#344767;
}


nav span{
    font-size:15.5px;
}


nav li a i, nav li .menu_judul i:first-child {
    /*height:50px;*/
    /*width:50px;*/
    
    font-size:18px;
    background:#E9ECEF;
    padding:8px;
    border-radius:7px;
    box-shadow: rgba(20, 20, 20, 0.12) 0rem 0.25rem 0.375rem -0.0625rem, rgba(20, 20, 20, 0.07) 0rem 0.125rem 0.25rem -0.0625rem;
    margin-right:8px;
    color:#3A416F;
}

nav .menu_sub{
    /*display:none;*/
    max-height: 0;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
    /*background: #d5d5d5;*/
}

nav .menu_buka .menu_sub{
    /*display:block;*/
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
}

nav .menu_judul, nav .menu_judul2 {
    display: flex;
    /*background: #ccc;*/
    width: 100%;
    align-items:center;
    /*justify-content: space-between;*/
    padding:6px 0;
    color:#77839A;
}

nav .menu_judul i, nav .menu_judul span {
    cursor:pointer;
}

/*nav .menu_judul i:first-child, nav .menu_judul2 i {*/
/*  width:35px;*/
/*}*/

nav i{
    /*font-size:40px;*/
    /*width:50px;*/
    /*margin-right:10px;*/
}


nav .menu_judul i:last-child {
    margin-left: auto;
    transition: all .5s;
}

nav .menu_sub a{
    margin-left:40px;
    padding:5px 0;
    display:block;
    font-weight:300;
    font-size:15px;
}

nav .menu_sub li{
    margin:0;
}

nav .menu_sub li:last-child{
    padding-bottom:7px;
}



nav .aktif a, nav .aktif span{
    font-weight: 500;
}

nav .aktif .menu_sub a{
    font-weight: 300;
}

nav .aktif span{
    color:#344767;
}

nav .aktif a i, nav .aktif .menu_judul i:first-child {
    background:#17C1E8;
    color:#fff;
}



.ikon_putar{
    transform: rotate(180deg);
}

/*nav .menu_judul:after {*/
/*  content: '';*/
/*  display: table;*/
/*  clear: both;*/
/*}*/

/*.nav .menu_judul div {*/
/*  float: left;*/
/*}*/
/*nav .menu_judul i:last-child {*/
/*  float: right;*/
/*}*/



/*#menu #list {*/
/*    max-height: 0;*/
/*    transition: max-height 0.15s ease-out;*/
/*    overflow: hidden;*/
/*    background: #d5d5d5;*/
/*}*/

/*#menu:hover #list {*/
/*    max-height: 500px;*/
/*    transition: max-height 0.25s ease-in;*/
/*}*/

/*-----------MENU END-------------*/

.border{
    border:1px solid black;
}




header #tombol_menu{
    font-size:40px;
    color:#67748E;
    cursor:pointer;
}



.konten_judul{
    height:60px;
    border-bottom:1px solid #eaeaea;
    /*padding:20px;*/
    display:flex;
    align-items:center;
    padding-left:20px;
    color:#344767;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    font-size: 1.25rem;
}

.konten_kotak{
    padding:20px;
}


.tombol_tambah{
    cursor:pointer;
    outline:none;
    /*height: 32px;*/
    background: #007EF4;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    color: white;
    padding: 10px 14px;
    letter-spacing: 1px;
    transition: all .3s;
    /*box-shadow: 0px 14px 26px -6px rgba(0,0,0,0.2);*/
    box-shadow: rgba(20, 20, 20, 0.12) 0rem 0.25rem 0.375rem -0.0625rem, rgba(20, 20, 20, 0.07) 0rem 0.125rem 0.25rem -0.0625rem;
}


/*.tabel{*/
/*    margin-top:50px !important;*/
/*}*/

.tabel th{
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    border-right:1px solid rgba(0, 0, 0, 0.15);
    border-bottom-width:2px !important;
}

.tabel th:first-child{
    border-left:1px solid rgba(0, 0, 0, 0.15);
}

.tabel td{
    /*padding:2px 5px !important;*/
}

.dataTables_filter {margin-bottom: 10px;}

.tabel select{
    margin-top:8px;
    display:inline-block;
    width:100%;
}










.tutup_tambah{
    display:none;
}

.buka_tambah{
    display:block;
}


/*---------------------------------------------------------------------------------------------FORM-------------------------------------------------------------*/
/*.container .judul3{*/
/*    font-size:24px;*/
/*    font-weight:500;*/
/*    position:relative;*/
/*    color:var(--warna-gelap);*/
/*}*/

/*.container .judul4{*/
/*    font-size:22px;*/
/*    font-weight:500;*/
/*    position:relative;*/
/*    color:var(--warna-gelap);*/
/*}*/

/*.container .judul5{*/
/*    font-size:20px;*/
/*    font-weight:500;*/
/*    position:relative;*/
/*    color:var(--warna-gelap);*/
/*}*/

.form_kotak{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin:20px 0 12px 0;
}

.form_kotak .geser{
    margin-left:25px;
}

/*.form_kotak .geser input{*/
/*    margin-left:30px;*/
/*}*/

.input{
    width:100%;
}

.form_kotak .input_kotak{
    width:calc(50% - 15px);
    margin-bottom:15px;
}

.form_kotak .input_kotak_full{
    width:100%;
    margin-bottom:15px;
}

.kotak_judul{
    margin-bottom:5px;
}

.form_kotak .label{
    font-weight:500;
    margin-bottom:5px;
    display:block;
    font-size:16px;
    color:var(--warna-gelap);
    
}

.form_kotak .label_kecil{
    font-weight:500;
    font-size:11px;
    
}

.form_kotak .input_kotak input, .form_kotak .input_kotak_full input,
.form_kotak .input_kotak select, .form_kotak .input_kotak_full select{
    height:45px;
    width:100%;
    border-radius:5px;
    outline:none;
    border:1px solid #ccc;
    padding-left:15px;
    font-size:16px;
    border-bottom-width:2px;
    background:var(--bg2);
    color:var(--warna-gelap);
}

.form_kotak .input_kotak select option, .form_kotak .input_kotak_full select option{
    zoom:1.2;
}

.form_kotak .input_kotak input:focus, .form_kotak .input_kotak_full input:focus, .form_kotak .teksarea:focus{
    border-color:#3F88BA;
}

.form_kotak .form_file{
    width:100%;
    border:2px dashed #000;
    display:flex;
    justify-content: center;
	align-items: center;
	padding:80px 20px;
	cursor:pointer;
}

.form_kotak input[type="file"]{
    /*display:none;*/
}

.form_file label{
    color:#2B7BFF;
    /*background:#464CAE;*/
    /*background:var(--bg-menu);*/
    /*padding:20px;*/
    font-size:16px;
    height:50px;
    width:150px;
    border-radius:5px;
    cursor: pointer;
    /*box-sizing: border-box;*/
    display:block;
    /*position:absolute;*/
    /*margin:auto;*/
    /*top:0;*/
    /*left:0;*/
    /*bottom:0;*/
    /*right:0;*/
 /*   display:flex;*/
 /*   justify-content: center;*/
	/*align-items: center;*/
	text-align:center;
}

/*.form_file label:hover .form_file{*/
/*    border:2px dashed red;*/
/*}*/

.form_file label ion-icon{
    font-size:40px;
}

.tombol_kotak{
    width:100%;
}

.form_kotak .teksarea{
    width:100%;
    height:150px;
    border-radius:5px;
    outline:none;
    border:1px solid #ccc;
    padding:10px 15px;
    font-size:16px;
    border-bottom-width:2px;
    background:var(--bg2);
    color:var(--warna-gelap);
    font-family: 'Roboto', sans-serif;
    resize: none;
}



/*----------------------------------------------------------*/

.select2-container {
    width: 100% !important;
}

.select2-selection {
    height:45px !important;
    width:100%;
    border-radius:5px;
    outline:none;
    border:1px solid #ccc !important;
    /*padding-top:0;*/
    /*margin-top:-3px;*/
    padding-left:15px;
    font-size:16px;
    /*border: 1px solid #989a9c;*/
    border-bottom-width:2px !important;
    background:var(--bg2);
    color:var(--warna-gelap);
    
    
    /*position: absolute;*/
    /*top: 0px;*/
    /*left: 0px;*/
    /*height: 55px !important;*/
    /*width: 100%;*/
    /*border: 1px solid #989a9c;*/
    /*border-bottom-width:2px !important;*/
    /*border-radius: 15px !important;*/
    /*font-size: 18px;*/
    /*padding: 0 10px !important;*/
    /*outline: none;*/
    /*background: none;*/
    /*z-index: 1;*/
    /*color: var(--darkOne);*/
    /*color:#45424b;*/
    /*margin-bottom:14px !important;*/
    /*display:flex;*/
    /*align-items:center !important;*/
    /*margin-top:-10px !important;*/
}

.select2-results__options {
    font-family: 'Roboto', sans-serif;
    /*padding:10px !important;*/
}

.select2-selection__rendered{
    padding-top:8px;
}

.select2-selection__arrow{
    height:45px !important;
}










.kotak_cekbok{
    display:flex;
    align-items:center;
}

.cekbok{
    width:20px;
    height:20px;
    margin-right:8px;
}


.selek2{
    height:45px;
    width:200px;
    border-radius:5px;
    outline:none;
    border:1px solid #ccc;
    padding-left:15px;
    font-size:16px;
    border-bottom-width:2px;
    background:var(--bg2);
    color:var(--warna-gelap);
}

.selek2 option{
    zoom:1.2;
}

.tombol1{
    height:45px;
    width:200px;
    outline:none;
    border:1px solid #ccc;
    padding:15px;
    font-size:16px;
    /*border-bottom-width:2px;*/
    cursor:pointer;
    /*height: 32px;*/
    background: #007EF4;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    color: white;
    /*padding: 10px 14px;*/
    letter-spacing: 1px;
    transition: all .3s;
    /*box-shadow: 0px 14px 26px -6px rgba(0,0,0,0.2);*/
    box-shadow: rgba(20, 20, 20, 0.12) 0rem 0.25rem 0.375rem -0.0625rem, rgba(20, 20, 20, 0.07) 0rem 0.125rem 0.25rem -0.0625rem;
}


/*-----------------------------------------------------------*/










.container-login100-form-btn input{
    vertical-align:middle;
    white-space:normal;
    background:0 0;
    line-height:1;
    
    margin:0;padding:0;border:0;
    font-weight:700;
    letter-spacing:1.5px;
    font-size:16px;
}

.container-login100-form-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 13px;
}

.wrap-login100-form-btn {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: 25px;
  overflow: hidden;
  margin: 0 auto;
}

.login100-form-bgbtn {
  position: absolute;
  z-index: -1;
  width: 300%;
  height: 100%;
  background: #a64bf4;
  background: -webkit-linear-gradient(right, #21d4fd, #014292, #21d4fd, #014292);
  background: -o-linear-gradient(right, #21d4fd, #014292, #21d4fd, #014292);
  background: -moz-linear-gradient(right, #21d4fd, #014292, #21d4fd, #014292);
  background: linear-gradient(right, #21d4fd, #014292, #21d4fd, #014292);
  top: 0;
  left: -100%;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.login100-form-btn {
  font-size: 15px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  height: 50px;
}

.wrap-login100-form-btn:hover .login100-form-bgbtn {
  left: 0;
}

.form_submit{
    /*display:inline-block;*/
    width:150px !important;
    height:45px;
    background: #007EF4 !important;
    border:none !important;
    border-radius:6px;
    cursor:pointer;
    font-size:15px !important;
    font-weight:700;
    /*color:#2271C1;*/
    color: white !important;
    /*padding:0 15px;*/
    padding:0 !important;
    /*margin-left:15px;*/
    letter-spacing:1px;
    transition:all .3s;
    /*margin-left:10px;*/
    display:flex;
    align-items:center;
    justify-content:center;
    /*text-decoration:none;*/
}

.form_submit:hover{
    /*background:#F0F0F1;*/
    /*color:#0A4B8B;*/
    /*border-color:#0A4B8B;*/
    background:#1AA3E8 !important;
    color:white;
    text-decoration:none;
}



/*.form_file{*/
/*    height: 200px;*/
/*    padding: 100px 30px;*/
/*    border: 2px dashed var(--warna-gelap);*/
/*}*/






/*---------------------------------------------------------------------------------------------FORM-END------------------------------------------------------------*/



.tombol_hapus{
    color:#F53939;
    font-size:21px;
    cursor:pointer;
}


table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
    text-align: left !important;
}









@media (max-width:720px){

main{
    width:calc(100% - 32px);
    left:16px;
}

/*main.aktif{*/
/*    width:calc(100% - 32px - 6px);*/
/*    left:16px;*/
/*}*/

aside{
    left:-266px;
}

aside.aktif{
    left:16px;
}

aside .tombol_tutup{
    display:block;
}

footer{
    margin-left:0;
}


}