@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

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

:root{
    --warna-putih:#fff;
    --warna-utama1:#08a57b;
    --warna-utama2:#3fdcb2;
    /*--warna-biru:#53A3FF;*/
    /*--warna-hitam:#000;*/
    --warna-gelap:#363949;
    
    --warna-bg:#fff;
    --warna-bg2:#fff;
    /*--bg-menu:linear-gradient(to bottom, #2b7bff, #53A3FF);*/
    /*--bg-tabel:linear-gradient(to right, #2b7bff, #53A3FF);*/
    
    /*--bayang:0px 44px 32px 8px rgba(132,139,200,0.2);*/
}

.tutup{
    /*background:#fff;*/
    min-height:100vh;
    background: linear-gradient(to bottom, #fff, #E6E6E6);
    font-family: 'Roboto', sans-serif;
    /*margin-bottom:45px;*/
    /*overflow: hidden; */
}

/*----------------------------------------------------------------------------------------------------------TENGAH MULAI----*/
@media{
    

.atas{
    width:100%;
    /*background: linear-gradient(150deg, #4393ED, #3FD2F9);*/
    background: linear-gradient(150deg, var(--warna-utama1), var(--warna-utama2));
    /*position:fixed;*/
    padding:22px 13px;
    
    height:160px;
}

.atas_tutup{
    display:flex;
}

.atas_tutup .atas_kotak{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex-grow:1;
    /*min-width:50px;*/
    overflow:hidden;
    
    /*border:1px solid black;*/
}


/*atas untuk halaman page*/
.atas_tutup .kiri{
    justify-content:flex-start;
    flex-direction:row;
}

.atas_tutup .kanan{
    justify-content:flex-end;
    flex-direction:row;
}

.atas .judul{
    font-weight:500;
    font-size:21px;
    color:var(--warna-putih);
    /*letter-spacing:-0.7px;*/
    /*letter-spacing:.5px;*/
}

.atas_tutup ion-icon, .atas_tutup i{
    color:var(--warna-putih);
    font-size:32px;
}

.beranda_atas i{
    /*color:var(--warna-putih);*/
    font-size:38px;
    margin-top:4px;
}

}
/*----------------------------------------------------------------------------------------------------------TENGAH SELSAI----*/

.tengah{
    /*margin-top:-80px;*/
    padding:10px;
    padding-bottom:65px;
    /*border:1px solid black;*/
    /*position:relative;*/
    /*top:300px;*/
    
}

.tengah_tutup{
    max-width:1200px;
    margin-top:-90px;
    margin-left:auto;
    margin-right:auto;
    background:#fff;
    padding:10px 20px;
    /*border-radius:10px;*/
    border-radius:20px;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-padding:10px;
    /*scroll-padding: 50px 0 0 50px;*/
    border-top:20px solid #fff;
    border-bottom:20px solid #fff;
}

.tengah_tutup2{
    padding:10px;
}

.tengah_tutup_page{
    height:calc(100vh - 160px - 55px - 20px + 90px);
}

/*----------------------------------------------------------------------------------------------------------NAV MENU MULAI----*/
@media{
    
.nav{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:55px;
    /*border:1px solid black;*/
    display:flex;
    /*align-items: center;*/
    /*justify-content: center;*/
    /*margin-bottom:25px;*/
    background:#f5f5f5;
    z-index:1;
}

.nav .nav_a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex-grow:1;
    min-width:50px;
    overflow:hidden;
    text-decoration:none;
}



.nav ion-icon, .nav i{
    color:#839CB1;
    font-size:28px;
    /*border-bottom:3px solid transparent;*/
    padding-bottom:2px;
    /*transition: 0.5s;*/
}

.nav .nav_a:hover > ion-icon{
    color:#08A57B;
    /*border-bottom-color:#08A57B;*/
}

.nav .aktif > ion-icon, .nav .aktif > i{
    color:#08A57B;
}

.nav .nav_a:hover:after{
    content: " ";
    display: block;
    /*position: absolute;*/
    height: 3px;
    background: #08A57B;
    width: 17px;
    left: 0;
    top: 50%;
    border-radius:3px;
}

.nav .aktif:after{
    content: " ";
    display: block;
    /*position: absolute;*/
    height: 3px;
    background: #08A57B;
    width: 17px;
    left: 0;
    top: 50%;
    border-radius:3px;
}

.putih{
    background:#fff;
}

}
/*----------------------------------------------------------------------------------------------------------NAV MENU SELESAI----*/

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

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

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

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

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

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

.tutup_form .form_kotak .input_kotak input, .tutup_form .form_kotak .input_kotak_full input,
.tutup_form .form_kotak .input_kotak select, .tutup_form .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);
}



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

.tutup_form .form_kotak .input_kotak input:focus, .tutup_form .form_kotak .input_kotak_full input:focus{
    border-color:#08a57b;
}

.form_kotak .form_file{
    width:100%;
    border:2px dashed var(--warna-gelap);
    display:flex;
    justify-content: center;
	align-items: center;
	padding:20px;
}

.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%;
}

.tutup_form .form_kotak input[type=checkbox] {
    height:20px;
}

.tutup_form .form_kotak .cekbok{
    margin-left:20px;
}

.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:500;
    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, #08a57b, #3fdcb2, #08a57b, #3fdcb2);
  background: -o-linear-gradient(right, #08a57b, #3fdcb2, #08a57b, #3fdcb2);
  background: -moz-linear-gradient(right, #08a57b, #3fdcb2, #08a57b, #3fdcb2);
  background: linear-gradient(right, #08a57b, #3fdcb2, #08a57b, #3fdcb2);
  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-END------------------------------------------------------------*/





/*---------------------------------------------------------------------------------------------TABEL TABLE-MULAI------------------------------------------------------------*/
@media{
    
.tengah .tabel{
    width:100%;
    border-collapse: collapse; 
}

.tengah .tabel .kotak_tabel{
    /*display:flex;*/
}

.tengah .tabel .kotak_tabel .kiri{
    width:60%;
    line-height:70%;
    /*border:1px solid black;*/
}

.tengah .tabel .kotak_tabel .kanan{
    width:40%;
    text-align:right;
    line-height:160%;
}

.tengah .tabel .kotak_tabel .kiri3{
    width:40%;
    /*line-height:70%;*/
    /*border:1px solid black;*/
}

.tengah .tabel .kotak_tabel .kanan3{
    width:60%;
    text-align:right;
    /*line-height:160%;*/
    /*border:1px solid black;*/
}

.tengah .tabel .kotak_tabel .atas2{
    width:100%;
    display:flex;
    /*text-align:right;*/
    /*line-height:160%;*/
    /*border:1px solid black;*/
}

.tengah .tabel .kotak_tabel .bawah2{
    width:100%;
    /*text-align:right;*/
    /*line-height:160%;*/
    /*border:1px solid black;*/
    margin-top:10px;
}

.tengah .tabel tr{
    border-bottom:4px solid #f9f9f9;
}

.tengah .tabel tr:last-child { 
    border-bottom-color:transparent;
}

.tengah .tabel td{
    padding:12px 8px;
}

.tengah .tabel .tek1{
    font-weight:500;
    line-height:130%;
    display:block;
}

.tengah .tabel .tek2{
    font-weight:700;
    font-size:19px;
}

.tengah .tabel .tek3{
    opacity:0.5;
    font-size:14px;
    font-weight:300;
}

.tengah .tabel .tek4{
    opacity:0.5;
}

.tengah .tabel .tek5{
    font-weight:500;
    font-size:14px;
    opacity:0.5;
}

}




@media{
    
    
.tabel2{
    /*border-collapse: collapse;*/
} 

.tabel2 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;
    
}

.tabel2 th{
    font-size:14px !important;
}

.tabel2 th:before, .tabel2 th:after{
    right:2px !important;
    font-size:6px !important;
}

.tabel2 th, .tabel2 td{
    padding:10px 3px !important;
    letter-spacing:-0.5px;
    /*font-size:15px !important;*/
}

.tabel2 td{
    font-size:16px !important;
}

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

.tabel2 .no{
    font-size:12px !important;
    
}

.dataTables_filter {
    margin-bottom: 10px;
}
    
    
    
    
    
    
    
    
    
    
    
    
}
/*---------------------------------------------------------------------------------------------TABEL TABLE-SELESAI------------------------------------------------------------*/

@media{

/*------------------------------------------------------------------BERANDA START-----------------------------------------------*/

.tutup_beranda{
    min-height:100vh;
    background:#F5F7FB;
    width:100%;
    padding:25px;
    padding-bottom:50px;
}

.tutup_beranda ion-icon{
    color:#404E5B;
}

.beranda_atas{
    display: flex;
    
    margin:0 0 10px 0;
    color:#404E5B;
}

.beranda_atas .atas_kotak{
    flex-grow:1;
    /*border:1px solid black;*/
}

.beranda_atas .atas_kanan{
    text-align:right;
}


.beranda_atas ion-icon{
    font-size:48px;
    color:#404E5B;
}

.atas_kanan ion-icon{
    font-size:36px;
    /*color:green;*/
}

.ikon_menu{
    position:relative;
    /*border:1px solid black;*/
}

.ikon_menu .ikon1{
    position:absolute;
    top:-15px;
    left:0;
    /*color:red;*/
}

.ikon_menu .ikon2{
    position:absolute;
    top:0px;
    left:2px;
    /*color:blue;*/
    font-size:38px;
}

.ikon_menu .ikon3{
    position:absolute;
    top:5px;
    left:0;
    /*color:green;*/
}

.beranda_kotak{
    background:#fff;
    width:100%;
    min-height:160px;
    border-radius:20px;
    padding:20px;
    margin:15px 0 25px 0;
    color:#404E5B;
    
    border-bottom:2px solid #ebecf0;
}

.beranda_kotak2{
    background: linear-gradient(to right, #0FA07C , #68D4B6);
    color:#fff;
    height:180px;
    border-bottom-width:3px;
}

.beranda_kotak_flex{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    
}

.tombol{
    text-decoration:none;
    background:#fff;
    color:#08A57B;
    border:1px solid #08A57B;
    padding:2px 8px;
    border-radius:3px;
    cursor:pointer;
}




.beranda_skrol{
    /*overflow: auto;*/
    /*white-space: nowrap;*/
    display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      
    margin:0;
    /*border:1px solid red;*/
    /*margin-bottom:20px;*/
    /*height:200px;*/
}

.beranda_skrol .beranda_skrolkotak{
    margin-bottom:0;
    margin-top:0;
}

.beranda_skrol::-webkit-scrollbar {
  width: 0;
}


.kotak_skrol{
    /*display: inline-block;*/
    flex: 0 0 auto;
    margin-right:15px;
    width:calc(100vw - 84px);
    /*height:200px;*/
    /*border:1px solid blue;*/
}

.kotak_skrol:last-child {
    margin-right:0;
}

.skrol_isi{
    display:block;
    white-space: normal;
}

.kotak_chart{
    padding:5px;
    padding-top:30px;
}

.tutup_beranda .judul{
    font-size:26px;
    font-weight:700;
    color:#404E5B;
}

.tutup_beranda .judul2{
    font-size:20px;
    font-weight:700;
    color:#404E5B;
    margin-left:10px;
    margin-bottom:20px;
}

.tutup_beranda .jarak{
    margin:6px;
}

.tutup_beranda .tek2{
    font-size:25px;
    font-weight:700;
}

.tutup_beranda .tek3{
    font-weight:500;
}

.tutup_beranda .svg{
    width:40px;
    border:none;
    fill:red;
}

/*------------------------------------------------------------------BERANDA END-----------------------------------------------*/

}