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

:root{
    --warna-putih:#fff;
    --warna-biru:#53A3FF;
    --warna-hitam:#000;
    --warna-gelap:#363949;
    --warna-menu:#fff;
    --warna-menu-teks:#000;
    --warna-bg:#F2F7F8;
    --warna-bg2:#D9DEDF;
}

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

.senter{
    text-align:center !important;
}

@media{

.sidebar{
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:200px;
    /*width:12vw;*/
    /*min-width:230px;*/
    background:var(--warna-menu);
    z-index:100;
    transition:all 0.5s ease;
    -webkit-box-shadow: -4px 0px 29px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: -4px 0px 29px 0px rgba(0,0,0,0.2);
    box-shadow: -4px 0px 29px 0px rgba(0,0,0,0.2);
    font-family: 'Poppins', sans-serif;
}
 
.sidebar.closesatu{
    width:65px;
}

.sidebar .logo-details{
    height:60px;
    width:100%;
    display:flex;
    align-items:center;
}

.sidebar .logo-details img{
    width:65px;
    padding:10px;
}

.sidebar .logo-details .logo_name{
    font-size:20px;
    font-weight:600;
    color:var(--warna-menu-teks);
    transition:0.1s ease;
    transition-delay:0.1s;
    white-space:nowrap;
}

.sidebar.closesatu .logo-details .logo_name{
    opacity:0;
    pointer-events:none;
}

.sidebar .nav-links{
    height:100%;
    padding:30px 0 150px 0;
    background:var(--warna-menu);
    overflow:auto;
}

.sidebar .nav-links{
    overflow:visible;
}

.sidebar .nav-links::-webkit-scrollbar{
    display:none;
}

.sidebar .nav-links li{
    position:relative;
    list-style:none;
    transition:all 0.4s ease;
    transition-delay:0.1s;
}

.sidebar .nav-links .aktif{
    background:var(--warna-bg);
}


.sidebar .nav-links li:hover{
    background:var(--warna-bg);
}

.sidebar .nav-links li .icon-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.sidebar .nav-links li i{
    height:50px;
    min-width:65px;
    text-align:center;
    line-height:50px;
    /*color:var(--warna-menu-teks);*/
    color:#092A44;
    font-size:22px;
    transition:all 0.3s ease;
    cursor:pointer;
}

.sidebar .nav-links li.showMenu i.arrow{
    transform:rotate(-180deg);
}

.sidebar.closesatu .nav-links li i.arrow{
    display:none;
}

.sidebar .nav-links li a{
    text-decoration:none;
    display:flex;
    align-items:center;
    color:var(--warna-menu-teks);
}

.sidebar .nav-links li a .link_name{
    font-size:14px;
    font-weight:400;
}

.sidebar.closesatu .nav-links li a .link_name{
    opacity:0;
    pointer-events:none
}

.sidebar .nav-links li .sub-menu{
    /*padding:6px 6px 14px 80px;*/
    padding:6px 6px 14px 65px;
    margin-top:-10px;
    background:var(--warna-bg);
    display:none;
}

.sidebar .nav-links li.showMenu .sub-menu{
    display:block;
}

.sidebar .nav-links li .sub-menu a{
    color:var(--warna-menu-teks);
    font-size:13px;
    padding:5px 0;
    white-space:nowrap;
    opacity:0.6;
    transition:all 0.3 ease;
    /*background:#D9DEDF;*/
}

.sidebar .nav-links li .sub-menu a:hover{
    opacity:1;
    /*background:#D9DEDF;*/
}

.sidebar.closesatu .nav-links li .sub-menu{
    position:absolute;
    left:100%;
    top:-10px;
    margin-top:0;
    padding:10px 20px;
    border-radius:0 6px 6px 0;
    transition:all 0.4s ease;
    opacity:0;
    display:block;
    pointer-events:none;
    background:var(--warna-bg2);
}

.sidebar.closesatu .nav-links li:hover .sub-menu{
    opacity:1;
    top:0;
    pointer-events:auto;
}

.sidebar .nav-links li .sub-menu .link_name{
    display:none;
}

/*.sidebar.closesatu .nav-links li .sub-menu .link_name{*/
/*    display:none;*/
/*}*/

.sidebar.closesatu .nav-links li .sub-menu .link_name{
    font-size:18px;
    opacity:1;
    display:block;
}

.sidebar .nav-links li .sub-menu.blank{
    opacity:1;
    pointer-events:auto;
    padding:3px 20px 6px 16px;
    opacity:0;
    pointer-events:none;
}

.sidebar.closesatu .nav-links li:hover .sub-menu.blank{
    top:50%;
    transform: translateY(-50%);
}

.sidebar .profile-details{
    position:fixed;
    bottom:0;
    width:200px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    /*background:#1d1b31;*/
    /*background:#1768AA;*/
        background-image: linear-gradient(to right, rgb(2, 184, 199) 10%, rgb(31, 114, 162) 100%);
    padding:6px 0;
    transition:all 0.4s ease;
}

.sidebar.closesatu .profile-details{
    width:78px;
    background:none;
}

.sidebar .profile-details img{
    /*height:52px;*/
    /*width:52px;*/
    height:35px;
    width:35px;
    object-fit:cover;
    border-radius:8px;
    margin:0 6px 0 8px;
    background:#02b8c7;
    /*padding:10px;*/
    transition:all 0.5s ease;
}

.sidebar.closesatu .profile-details img{
    height:50px;
    width:50px;
    padding:10px;
}

.sidebar .profile-details .profile-content{
    display:flex;
    align-items:center;
}

.sidebar .profile-details .profile_name,
.sidebar .profile-details .job{
    color:#fff;
    font-size:14px;
    font-weight:500;
    white-space:nowrap;
}

.sidebar.closesatu .profile-details i,
.sidebar.closesatu .profile-details .profile_name,
.sidebar.closesatu .profile-details .job{
    display:none;
}

.sidebar .profile-details .job{
    font-size:11px;
}

.sidebar .profile-details i{
    color:#fff !important;
    min-width:40px !important;
}

.sidebar h3{
    padding-left:24px;
    font-size:18px;
    font-weight:500;
    display:block;
    margin-top:5px;
    letter-spacing:0.3px;
}

.sidebar.closesatu h3{
    display:none;
}

.sidebar .menu_h3{
    padding-left: 24px;
    font-size: 16px;
    font-weight: 500;
    display: block;
    margin:0;
    margin-top: 8px;
    letter-spacing: 0.3px;
}

.sidebar.closesatu .menu_h3{
    display:none;
}

.sidebar hr{
    width:22px;
    margin:0 0 2px 22px;
    opacity:0;
    transition:all 0.3s ease;
    /*color:#000;*/
    border-top: 1px solid #888 !important;
}

.sidebar.closesatu hr{
    opacity:1;
    margin:10px 0 10px 22px;
}

}

header{
    height:60px;
    /*background-image: linear-gradient(to right, #5FB0EB, #1768AA);*/
    background-image:linear-gradient(to right, rgb(0, 213, 230) 10%, rgb(31, 114, 162) 100%);
    position:fixed;
    top:0;
    left:200px;
    width:calc(100% - 200px);
    /*left:12vw;*/
    /*width:calc(100% - 12vw);*/
    transition:all 0.5s ease;
    z-index:3;
    font-family: 'Poppins', sans-serif;
}

/*header::before{*/
/*    content: '';*/
/*    position: absolute;*/
/*    top:60px;left:0;*/
/*    width: 100%;*/
/*    height: 10px;*/
/*    background-image: linear-gradient(to right, #5FB0EB, #1768AA);*/
/*    z-index:-2;*/
/*}*/

header.closedua{
    left:65px;
    width:100%;
}

header .tutup_header{
    height:60px;
    display:flex;
    align-items:center;
    
}



header .btn-menu,
header .text{
    /*color:#11101d;*/
    color:#fff;
    font-size:35px;
}

header .btn-menu{
    margin:0 15px;
    cursor:pointer;
}

header .text{
    font-size:23px;
    font-weight:600;
}

.btn-close{
    position:absolute;top:3px;right:3px;
    display:none;
}

.btn-close i{
    color:black;font-size:26px;
}









.home-section{
    position:relative;
    background:var(--warna-bg);
    left:200px;
    /*left:12vw;*/
    top:60px;
    /*width:calc(100% - 12vw);*/
    width:calc(100% - 200px);
    min-height:calc(100vh - 60px);
    transition:all 0.5s ease;
}

.sidebar.closesatu ~ .home-section{
    left:65px;
    width:calc(100% - 65px);
}

.bg_bulat{
    /*content: '';*/
    position: absolute;
    top:0;left:0;
    width: 100%;
    height: 120px;
    /*background-image: linear-gradient(to right, #5FB0EB, #1768AA);*/
    background-image:linear-gradient(to right, rgb(0, 213, 230) 10%, rgb(31, 114, 162) 100%);
    border-bottom-right-radius:100%;
    /*border-bottom-left-radius:50%;*/
    z-index:1;
    /*opacity:0.4;*/
}

.konten{
    position:relative;
    padding:15px;
    z-index:2;
    font-family: 'Roboto', sans-serif;
}

.tutup_konten{
    background:#fff;
    padding:20px;
    border-radius:10px;
}

.tutup_konten_data{
    background:#fff;
    padding:0;
    border-radius:10px;
}

.jarak{
    height:40px;
}

.table{
    color:#333;
}

.table th{
    font-size: 16px;
}

.table td{
    font-size: 15px;
}

.table tbody tr:hover{
    /*background:#F6F6F6 !important;*/
}

.table .tr_detail{
    /*background:#fbfbfb;*/
}

.tabel_data{
    width:100% !important;
    border-top:1px solid rgba(0, 0, 0, 0.15);
    border-bottom:1px solid rgba(0, 0, 0, 0.15);
}

.tabel_data tbody tr:hover{
    background:#F6F6F6 !important;
}

.tabel_detail{
    /*border-collapse: collapse;*/
    /*width:100vw;*/
    font-weight: 400;
    font-size: 16px;
    color: #5f6d79;
    border-bottom-left-radius:5px !important;
    border-bottom-right-radius:5px !important;
}

.tabel_detail th{
    border-top:1px solid rgba(0, 0, 0, 0.15);
    border-right:1px solid rgba(0, 0, 0, 0.15);
    border-bottom:3px solid #DDDDDD !important;
    background: #fbfbfb;
    color: #5f6d79;
}

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

.tabel_detail th:first-child{
    border-top-left-radius:5px !important;
}

.tabel_detail th:last-child{
    border-top-right-radius:5px !important;
}

.tabel_detail tr:last-child td:first-child{
    border-bottom-left-radius:5px !important;
}

.tabel_detail tr:last-child td:last-child{
    border-bottom-right-radius:5px !important;
}



/*style tabel detail 2*/
@media{
    
.tabel_detail2{
    border-bottom-left-radius:8px !important;
    border-bottom-right-radius:8px !important;
}

.tabel_detail2 th{
    background:#1F74A3;
    color:#fff;
    font-size:15px;
    /*border-color:#fff !important;*/
    /*border-right-color:#fff !important;*/
    border:1px solid rgba(255, 255, 255, 0.5);
    border-left:none;
}

.tabel_detail2 th:last-child{
    border-right-color:#1F74A3;
}

.tabel_detail2 tr:first-child th:first-child{
    border-top-left-radius:8px !important;
}

.tabel_detail2 tr:first-child th:last-child{
    border-top-right-radius:8px !important;
}

.tabel_detail2 tr:last-child td:first-child{
    border-bottom-left-radius:5px !important;
}

.tabel_detail2 tr:last-child td:last-child{
    border-bottom-right-radius:5px !important;
}

/*.tabel_detail2 tr:first-child{*/
/*    border-top-left-radius:8px !important;*/
/*}*/

/*table.dataTable.no-footer {*/
/*    border-bottom: none !important;*/
/*}*/




}

.th_nilai{
    width:80px;
}

.th_nilai2{
    /*width:125px;*/
    width:100px;
}

.td_kode_wilayah{
    width:20px;
    white-space: nowrap;
}

.tabel_pengunjung, .tabel_update{
    width:100%;
    border-collapse: collapse;
}

.tabel_pengunjung td, .tabel_update td{
    border-top:1px solid #eaeaea;
    padding:5px 0;
}

.tabel_pengunjung tr:first-child td, .tabel_update tr:first-child td{
    border-top:none;
}

.tabel_pengunjung tr:hover{
    background:#fafafa;
}

.tabel_pengunjung td:last-child{
    text-align:right;
}

.tabel_pengunjung span{
    font-size:15px;
    color:#777;
}


.tabel_update td{
    padding:9px 0;
}

.tabel_update a{
    color:#337ab7;
    text-decoration:none;
}

.tabel_update a:hover{
    text-decoration:underline;
}


.tabel_update span{
    font-size:16px;
}


.tutup_grafik{
    padding:30px 20px 0 20px;
    /*padding-bottom:0;*/
    background:#fff;
    border-radius:10px;
    margin-bottom:20px;
}

.tutup_tabel{
    padding:20px;
    /*padding-bottom:0;*/
    background:#fff;
    border-radius:10px;
    margin-bottom:20px;
    font-family: 'Roboto', sans-serif;
}

.tutup_detail{
    background:#fff;
    border-radius:10px;
    min-height:200px;
    margin-bottom:20px;
    padding:0;
    position:relative;
}

.tutup_detail_judul{
    border-bottom: 1px solid #eceef3;
    height: 50px;
    color: #5f6d79;
    display:flex;
    align-items:center;
    padding-left:20px;
}

.tutup_detail_judul i{
    font-size:25px;
    margin-right:8px;
    /*color: #5f6d79;*/
}

.tutup_detail_judul p{
    font-size:18px;
    /*color: #0e1111;*/
    margin:0;
}

.tutup_detail_data{
    padding:20px;
    
}

.tutup_detail_judul_tahun{
    justify-content: space-between;
    padding:0 20px;
}

.tutup_detail_judul_tahun .kotak_judul{
    display:flex;
    align-items:center;
}

.td_desk{
    color:transparent;
}


.selek_tahun{
    height: 35px;
    /*width: 100px;*/
    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);
}

.selek_sumber{
    height: 35px;
    /*width: 100px;*/
    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);
}

.selek_sumber option{
    white-space: nowrap;
}

.selek_btn{
    height: 35px;
    background: #007EF4;
    border:none;
    border-radius:6px;
    /*cursor:pointer;*/
    /*box-shadow: var(--bayang);*/
    font-size:14px;
    font-weight:700;
    /*color:#2271C1;*/
    color: white;
    /*border:1px solid #2271B1;*/
    padding:0 8px;
    /*margin-left:15px;*/
    /*letter-spacing:1px;*/
    /*transition:all .3s;*/
    /*margin-left:10px;*/
}

.tabel_metadata{
    width: 100%;
    border-collapse: collapse;
    /*margin-bottom: 30px;*/
}

.tabel_metadata tr:nth-child(odd) {
    background-color: #F1F4FF;
}

.tabel_metadata td{
    padding:12px 17px;
    color: #000;
    opacity:0.8;
    font-size:15px;
}

.judul{
    font-size:28px;
    font-weight:500;
    margin-bottom:20px;
    color: #000;
    opacity:0.62;
}

.judul2{
    font-size:24px;
    margin-bottom:10px;
}

.tutup{
    display:none;
}


.kotak_btn{
    position:absolute;
    /*border:1px solid red;*/
    top:0;
    right:0;
    height:50px;
    display:flex;
    align-items:center;
    padding-right:20px;
}


.bt_tombol{
    /*width:100px;*/
    height:32px;
    /*right:25px;*/
    /*bottom:25px;*/
    /*background:#F6F7F7;*/
    background: #007EF4;
    border:none;
    border-radius:6px;
    cursor:pointer;
    /*box-shadow: var(--bayang);*/
    font-size:14px;
    font-weight:700;
    /*color:#2271C1;*/
    color: white;
    /*border:1px solid #2271B1;*/
    border:none;
    padding:0 8px;
    /*margin-left:15px;*/
    letter-spacing:1px;
    transition:all .3s;
    margin-left:10px;
    display:flex;
    align-items:center;
    text-decoration:none;
}

.bt_tombol:hover, .tombol:hover{
    /*background:#F0F0F1;*/
    /*color:#0A4B8B;*/
    /*border-color:#0A4B8B;*/
    background:#1AA3E8;
    color:white;
    text-decoration:none;
}

.bt_tombol i{
    margin:0;
    padding:0;
    margin-right:3px;
}

.tombol{
    padding:4px 8px;
    background: #007EF4;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
    font-weight:700;
    color: white;
    text-decoration:none;
    letter-spacing:.5px;
    transition:all .3s;
}




/*-------------------------------------------------------------------------------TAB------------*/
@media{
    
    
    
.tab {
  overflow: hidden;
  /*border: 1px solid #ccc;*/
  /*background-color: #f1f1f1;*/
  /*border-bottom:1px solid #ccc;*/
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 18px;
  transition: 0.3s;
  font-size: 16px;
  border:1px solid transparent;
  border-bottom-color:#ccc;
  color:#5f6d79;
  letter-spacing:0.5px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  /*background-color: #ddd;*/
    border-color:#ccc #ccc transparent #ccc;
}

/* Create an active/current tablink class */
.tab button.active {
  /*background-color: #ccc;*/
    border-color:#ccc #ccc #fff #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 20px 15px;
  border-top: 1px solid #ccc;
  /*border-top: none;*/
  margin-top:-1px;
}

.tabcontent p{
    line-height:25px;
}



}
/*-------------------------------------------------------------------------------TAB------------*/

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

.grid1, .grid3, .grid4, .grid2{
    display: grid;
    grid-gap: 20px;
    margin-bottom:20px;
}

.grid1 {
    grid-template-columns:1fr;
}

.grid2 {
    grid-template-columns:1fr 1fr;
}

.grid4 {
    grid-template-columns:1fr 1fr 1fr 1fr;
}

.grid3 {
    grid-template-columns:1fr 1fr 1fr;
}

.kotak_grid {
    position:relative;
    background:#fff;
    
    /*margin-bottom:20px;*/
    border:1px solid #EEEEF0;
    border-radius:5px;
    
    min-height:160px;
    
    /*padding:15px 5px 5px 15px;*/
}

.kotak_grid_margin{
    margin-bottom:20px;
}




#map{
    width:100%;
    height:90vh;
}

.ber_peta{
    width:100%;
    height:360px;
}



.berkon_tutup{
    width:100%;
    display:flex;
    justify-content: space-between;
    align-items:center;
    flex-wrap: wrap;
}

.berkon_kotak {
    /*position:relative;*/
    background:#fff;
    margin-bottom:20px;
    border:1px solid #EEEEF0;
    border-radius:5px;
    width:150px;
    min-height:140px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}

.berkon_kotak p:last-child{
    font-size:20px;
}




/*---------------------------------------------------------------------------------------------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;*/
/*}*/

.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:18px;
    color:var(--warna-gelap);
    
}

.form_kotak .label2{
    text-align:left;
}

.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{
    border-color:#3F88BA;
}

.file2{
    display:block !important;
    /*margin-top:4px;*/
    padding-top:9px;
}

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

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

.form_kotak .form_file2 input[type="file"]{
    padding-top:9px;
}

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

.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, #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-END------------------------------------------------------------*/

.pisah_garis{
    width:calc(100% + 40px);
    border-bottom:1px solid #eceef3;
    margin-left:-20px;
    margin-top:60px;
    margin-bottom:40px;
}


/*---------------------------------------------------------------------------------------MODAL-----------------------------------------------------------------------------------*/
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1001; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}



/* Modal Content */
.modal-content {
  background-color: var(--bg);
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close, .close2 {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover, .close:focus,
.close2:hover, .close2:focus
{
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
/*---------------------------------------------------------------------------------------MODAL SELESAI-----------------------------------------------------------------------------------*/

.form_edit{
    font-size:18px;
    padding:0 2px;
    /*width:20vw;*/
}


.tutup_notif{
    width:100%;
    border:1px solid #C2C3C6;
    /*padding:10px 15px;*/
    min-height:45px;
    padding:8px 0;
    background:#ECF9EE;
    border-left-width:4px;
    /*border-left-color:#00A22E;*/
    display:flex;
    /* Vertical */
    align-items: center; 
    /* Horizontal */
    /*justify-content: center; */
    padding-left:10px;
    animation: fadeInLeft 0.8s ease;
    color:grey;
    margin:6px 0;
    /*border-radius:2px;*/
}

.anot{
    text-decoration:none;
    color:#999999;
}

.tutup_notif ion-icon{
    /*color:#66DD84;*/
    font-size:22px;
    margin-right:8px;
    min-width:20px;
}

.eks{
    color:grey;
    font-size:18px;
    cursor:pointer;
    margin-left: auto;
    transition: 0.3s;
    margin-right:6px;
}

.eks:hover{
    color:black;
}

.warning {
  background-color: #FDF7DF;
  border-color:#FEEC6F;
  /*color: #C9971C;*/
  color: #D7B35B;
  border-left-color:#D3AB49;
}



.btneksel{
    background:#4285F4 !important;
    color:white !important;
    height:40px;
    border-radius:10px !important;
    border:none !important;
    font-size:16px !important;
    padding:0 20px !important;
}

.btneksel:hover{
    background:#72A4F7 !important;
}



.dataset_status{
    /*background:grey;*/
    font-size:13px;
    /*color:#fff;*/
    padding:2px 3px;
    border-radius:3px;
}

.status_tampil{
    background:seagreen;
    color:#fff;
}

.status_baru, .status_lama{
    background:slategray;
    color:#fff;
}

.status_tunggu{
    background:sandybrown;
    color:#000;
}

.status_update{
    background:royalblue;
    color:#fff;
}

.status_hapus{
    background:Crimson;
    color:#fff;
}




.tampil {
    display: block !important;
}

.tidak_tampil {
    display: none;
}


.ikon_cek{
    margin:0;
    padding:0;
    display:inline-block;
    /*border:1px solid black;*/
    vertical-align: top;
}

.ikon_cek i{
    margin:0;
    padding:0;
    
}

.logo_cek_up{
    color:#00B400;
}

.logo_cek_down{
    color:coral;
}













/*-------------------------------------------------------------------------------------------------------------------------------------------------------MEDIA-----------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------KECIL-----------------------------------------------------------------------------------*/


@media (max-width:720px){
    
.sidebar{
    left:-200px;
    /*left:-12vw;*/
    /*width:230px;*/
}

.sidebar.closesatu{
    left:0;
    width:200px;
    /*width:12vw;*/
}

.sidebar.closesatu .logo-details .logo_name,
.sidebar.closesatu .nav-links li a .link_name,
.sidebar.closesatu .nav-links li:hover .sub-menu,
.sidebar.closesatu .nav-links li .sub-menu .link_name{
    opacity:1;
    /*pointer-events:none;*/
}

.sidebar.closesatu .nav-links li i.arrow{
    display:block;
}


.sidebar .nav-links li .sub-menu{
    padding:6px 6px 14px 65px;
    margin-top:-10px;
    background:var(--warna-bg);
    display:none;
}

.sidebar.closesatu .nav-links li .sub-menu{
    position:relative;
    left:0;
    top:0;
    padding:6px 6px 14px 65px;
    margin-top:-10px;
    border-radius:0;
    display:none;
    /*pointer-events:none;*/
    background:var(--warna-bg);
}

.sidebar.closesatu .nav-links li.showMenu .sub-menu{
    display:block;
}



.sidebar .nav-links li .sub-menu .link_name,
.sidebar.closesatu .nav-links li .sub-menu .link_name{
    display:none;
}

    
.home-section{
    left:0;
    width:calc(100%);
}

.sidebar.closesatu ~ .home-section{
    left:0;
    width:100%;
}

.btn-close{
    display:block;
}

.sidebar h3, .sidebar.closesatu h3{
    display:block;
}

.sidebar hr,.sidebar.closesatu hr{
    margin:0 0 2px 22px;
    opacity:0;
}


header{
    height:60px;
    /*background-image: linear-gradient(to right, #5FB0EB, #1768AA);*/
    position:fixed;
    top:0;
    left:0;
    width:100%;
    transition:all 0.5s ease;
}

header.closedua{
    left:0;
}

.bg_bulat{
    height: 60px;
}

.grid2, .grid3 {
    grid-template-columns:1fr;
}

.grid4 {
    grid-template-columns:1fr 1fr;
}








}