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

:root{
    --warna-menu:#6B7D5D;
    --warna-menu-teks:#ADB7A5;
    --warna-menu-teks-pilih:#fff;
}

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

a, a:hover{
    text-decoration:none;
}

.tutup{
    font-family: 'Roboto', sans-serif;
}


/*--------------------------------------------------------------------------------SIDEBAR--------------------------*/

.tutup_sidebar{
    /*position:absolute;*/
    position:fixed;
    top:0;
    left:0;
    font-family:"Poppins", sans-serif;
    
    width:260px;
    min-height:100vh;
    transition: 0.4s;
    /*ekejap*/
    /*background:#405189;*/ 
    /*background:#46B5AE;*/
    background:var(--warna-menu);
    
    
    padding:15px;
    
    /*border-right:1px solid #EAEAEC;*/
    
    /*box-shadow: 0 0 10px #ececec;*/
}

.tutup_sidebar.active{
    /*width:0;*/
    /*left:-260px;*/
    width:80px;
    /*z-index:2;*/
    padding:0;
    padding-top:15px;
    /*display:flex;*/
    /*align-items:center;*/
    background:var(--warna-menu);
}

.menu_gambar{
    width:60px;
    margin-top:20px;
}

.menu_gambar2{
    width:40px;
    margin-top:10px;
    display:none;
}


.tutup_sidebar.active span, .tutup_sidebar.active h4, .tutup_sidebar.active .judul3, .tutup_sidebar.active .dropdown-btn .panah{
    display:none;
}

.tutup_sidebar.active hr, .tutup_sidebar.active .judul_singkatan{
    display:block;
    font-size:35px;
    letter-spacing:0;
}

.tutup_sidebar.active .links li{
    padding:13px 0;
}

.tutup_sidebar.active .links li ion-icon{
    margin-right:0;
    font-size:28px;
}

.tutup_sidebar.active .links{
    display:flex;
    align-items:center;
    flex-direction:column;
    /*text-align:center;*/
}

.tutup_sidebar.active .dropdown-btn{
    width:30px;
    padding-right:0;
    padding-left:0;
}

.tutup_sidebar.active .dropdown-btn .ikon{
    font-size:28px;
    margin-right:0;
}

.tutup_sidebar.active .dropdown-container{
    margin:0;
}

.tutup_sidebar.active .dropdown-container a ion-icon, .tutup_sidebar.active .menu_gambar2{
    display:block;
}

.tutup_sidebar.active .dropdown-container a span, .tutup_sidebar.active .menu_gambar{
    display:none;
}

.tutup_sidebar img{
    /*width:80px;*/
    /*margin-top:20px;*/
}

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

.dropdown-btn.active{
    background:var(--warna-menu);
}

.sidebar_close{
    position:absolute;
    display:none;
    top:12px;
    right:10px;
}

.sidebar_close ion-icon{
    font-size:22px;
    color:#fff;
}

.sidebar .logo{
    /*display:flex;*/
    /*align-items:center;*/
    /*padding:15px 10px 15px;*/
}

.logo img{
    /*width:43px;*/
    /*border-radius:50%;*/
}

.logo .judul3{
    font-weight:700;
    font-size:26px;
    /*margin-left:15px;*/
    color:#fff;
    letter-spacing:5px;
}

.logo .judul_singkatan{
    display:none;
}

.sidebar .links{
    height:calc(100vh - 150px);
    overflow-y:auto;
    scrollbar-width:none;
    list-style:none;
    margin-top:20px;
    /*border:1px solid red;*/
}

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

.sidebar .links h4{
    color:#222;
    font-weight:400;
    margin-top:20px;
    margin-bottom:5px;
    margin-left:5px;
    color:#A6B7ED;
}

.links li, .dropdown-btn{
    display:flex;
    align-items:center;
    /*padding:12px 10px;*/
    padding:14px 10px;
    /*border:1px solid red;*/
}

.dropdown-btn{
    /*color:#A6B7ED;*/
    color:var(--warna-menu-teks);
    width:100%;
    /*background:#405189;*/
    background:var(--warna-menu);
    border:none;
    font-family:"Poppins", sans-serif;
    font-size:15px;
    font-weight:500;
    position:relative;
    /*border:1px solid red;*/
}

.links li:hover, .dropdown-btn:hover{
    /*border-radius:4px;*/
    cursor:pointer;
    /*background:#56B6F7;*/
    /*color:#fff;*/
    color:var(--warna-menu-teks-pilih);
}

.links .aktif{
    /*border-radius:4px;*/
    /*background:#56B6F7;*/
    /*color:#fff;*/
    color:var(--warna-menu-teks-pilih);
}

.links li ion-icon, .dropdown-btn .ikon{
    font-size:24px;
    margin-right:9px;
}

.links li span{
    font-size:15px;
}

.sidebar a{
    text-decoration:none !important;
    /*color:#000;*/
    /*color:#A6B7ED;*/
    color:var(--warna-menu-teks);
    font-weight:500;
    white-space:nowrap;
    /*padding:10px;*/
}

.links hr{
    /*border-color:#A6B7ED;*/
    border-color:var(--warna-menu-teks);
    margin:10px 0;
    display:none;
    width:20px;
}

.dropdown-container {
  display: none;
  /*height:0;*/
  /*visibility: hidden;*/
  margin-left:30px;
  transition:ease 0.3s;
  padding-bottom:10px;
}

.dropdown-container a{
    display:block;
    padding:5px 0;
    /*width:100%;*/
    font-size:15px;
}

.dropdown-container a:hover{
    /*color:#fff;*/
    color:var(--warna-menu-teks-pilih);
    text-decoration:none;
}

.dropdown-container a ion-icon{
    display:none;
}

.dropdown-btn .panah {
    position:absolute;
    top:17px;
    right:10px;
    transition:0.5s;
  /*float: right;*/
  /*padding-right: 10px;*/
  /*color:#6B7274;*/
}

.active .panah {
    transform:rotate(90deg);
}

/*--------------------------------------------------------------------------------SIDEBAR END--------------------------*/

.tutup_main{
    width:calc(100% - 260px);
    transition: 0.4s;
    min-height:100vh;
    background:#F2F3F7;
    z-index:1;
    position:absolute;
    top:0;
    left:260px;
    /*padding:20px;*/
    
    background-image: url("https://stunting.bp3d.natunakab.go.id/asset/img/bg.png");
    background-attachment:fixed;
    /*background-position: center;*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
}

.tutup_main.active{
    width:calc(100% - 80px);
    left:80px;
}

.tutup_atas{
    width:100%;
    height:60px;
    /*border-bottom:1px solid #EAEAEC;*/
    position:relative;
    /*top:0;*/
    /*left:0;*/
    /*border:1px solid blue;*/
    /*background:#46B5AE;*/
    /*background:#405189;*/
    background:var(--warna-menu);
    display:flex;
}

.sticky {
  position: fixed !important;
  top: 0 !important;
  min-height:100vh !important;
}

.tutup_atas ion-icon{
    position:absolute;
    top:13px;
    left:13px;
    font-size:22px;
    color:#676769;
    cursor:pointer;
}

.tutup_atas .kotak_toggle{
    width:70px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    /*border:1px solid red;*/
}

.tutup_atas .toggle{
    width:26px;
    cursor:pointer;
}

.tutup_atas .kotak_judul_pjg{
    height:60px;
    /*width:100px;*/
    /*padding-left:10px;*/
}

.tutup_atas .kotak_judul_pjg p{
    line-height:60px;
    font-weight: 500;
    font-size: 19px;
    color:white;
    letter-spacing:0.3px;
}

.akun{
    position:absolute;
    top:0;
    right:30px;
    height:60px;
    display:flex;
    align-items:center;
    color:#fff;
    font-family: 'Poppins', sans-serif;
}

.akun img{
    width:30px;
    border-radius:50%;
}



.tutup_tengah{
    width:100%;
    /*background:#F2F3F7;*/
    /*position:relative;*/
    /*width:calc(100% - 260px);*/
    /*transition: 1s;*/
    /*min-height:100vh;*/
    /*background:#F7FAFF;*/
    /*z-index:1;*/
    /*position:absolute;*/
    /*top:0;*/
    /*left:260px;*/
}

.kotak{
    padding:20px;
}

.kotak_isi{
    width:100%;
    background:#fff;
    min-height:200px;
    /*max-height:calc(100vh - 50px - 40px);*/
    /*overflow-y:scroll;*/
    padding:20px;
    /*border:20px solid #fff;*/
    /*border-right:none;*/
    /*padding:20px;*/
    /*overflow-x: auto;*/
    border-radius:5px;
    border:1px solid #ECEBF0;
}

.kotak_judul{
    height:60px;
    /*display:flex;*/
    /*align-items:center;*/
    border-bottom:1px solid #EBEBEB;
    /*border:1px solid red;*/
    margin-top:-20px;
    margin-left:-20px;
    width:calc(100% + 40px);
    padding-left:20px;
    margin-bottom:20px;
    position:relative;
}

.kotak_judul .judul{
    font-size:22px;
    font-weight:500;
    color:#4E5661;
    line-height:60px;
}

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

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

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

.bt_tambah{
    position:absolute;
    top:9px;
    right:20px;
    /*width:100px;*/
    /*height:100px;*/
    /*right:25px;*/
    /*bottom:25px;*/
    /*background:#F6F7F7;*/
    background: #007EF4;
    border:none;
    border-radius:6px;
    cursor:pointer;
    /*box-shadow: var(--bayang);*/
    font-size:16px;
    font-weight:700;
    /*color:#2271C1;*/
    color: white;
    border:1px solid #2271B1;
    padding:8px 15px;
    /*margin-left:15px;*/
    letter-spacing:1px;
    transition:all .3s;
    
}

.bt_tambah:hover{
    /*background:#F0F0F1;*/
    /*color:#0A4B8B;*/
    /*border-color:#0A4B8B;*/
    background:#1AA3E8;
    color:white;
}

/*---------------------------------------------------------------------------------------MODAL-----------------------------------------------------------------------------------*/
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 30px; /* 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: #fff;
  margin: auto;
  padding: 25px;
  /*border: 1px solid #888;*/
  border:10px solid white;
  /*width: 80%;*/
  width:calc(100% - 20px);
  max-width:980px;
  overflow-y:auto;
  min-height:300px;
  max-height:calc(100vh - 70px);
}

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

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

.close2{
    position:absolute;
    top:8px;
    right:18px;
}
/*---------------------------------------------------------------------------------------MODAL SELESAI-----------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------------------FORM mulai--------------------------------------------------*/
.form {
  /*background-color: white;*/
  width: 100%;
  /*border-radius: 8px;*/
  /*padding: 20px 40px;*/
  /*box-shadow: 0 10px 25px rgba(92, 99, 105, .2);*/
  /*border:1px solid grey;*/
}

.title {
  font-size: 23px;
  margin-bottom: 30px;
  /*color:#45424B;*/
  /*color: var(--darkTwo);*/
  color:#45424b;
  font-weight:600;
}

.title2 {
  font-size: 23px;
  margin-bottom: 5px;
  /*color:#45424B;*/
  /*color: var(--darkTwo);*/
  color:#45424b;
  font-weight:600;
}

.inputContainer {
  position: relative;
  height: 57px;
  width: 100%;
  margin-bottom: 14px;
}

.input {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border: 1px solid #989a9c;
  border-bottom-width:2px;
  border-radius: 15px;
  font-size: 18px;
  padding: 0 20px;
  outline: none;
  background: none;
  z-index: 1;
  /*color: var(--darkOne);*/
  color:#45424b;
}


.label {
  position: absolute;
  top: 17px;
  left: 15px;
  padding: 0 4px;
  /*background-color: #F5FCF6;*/
  background-color:#fff;
  color: #989a9c;
  font-size: 18px;
  transition: 0.5s;
  z-index: 0;
}

::placeholder {
  color: transparent;
}

.submitBtn {
  display: block;
  /*margin-left: auto;*/
  padding: 16px 70px;
  border: none;
  background-color: #008141;
  color: white;
  border-radius: 50px;
  cursor: pointer;
  font-size: 20px;
  font-weight:600;
  margin-top: 30px;
  letter-spacing:5px;
}

.submitBtn:hover {
  background-color: #4CA67A;
  transform: translateY(-2px);
}
.input:focus + .label {
  top: -7px;
  left: 7px;
  z-index: 10;
  font-size: 14px;
  font-weight: 600;
  color: #008141;
  letter-spacing:1.2px;
}

.input:not(:placeholder-shown)+ .label {
  top: -7px;
  left: 7px;
  z-index: 10;
  font-size: 14px;
  font-weight: 600;
  letter-spacing:1.1px;
}

.input:focus {
  border: 2px solid #008141;
  border-bottom-width:3px;
}

.input:focus::placeholder {
  color: grey;
}

.inputContainer input[type=file]{
    padding-top:17px;
    color:var(--darkTwo);
}
/*---------------------------------------------------------------------------------------------FORM END--------------------------------------------------*/

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

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

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

.kotak_judul2{
    margin-bottom:5px;
}

.form_kotak .label2{
    font-weight:500;
    margin-bottom:3px;
    display:block;
    font-size:18px;
    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);
}

.selek{
    height:40px;
    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);
}

.selek2{
    height:40px;
    width:170px;
    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);
}

.selek3{
    height:40px;
    width:100px;
    border-radius:5px;
    outline:none;
    border:1px solid #ccc;
    padding-left:15px;
    font-size:16px;
    border-bottom-width:2px;
    background:transparent;
    color:#000;
}

.selek4{
    width:auto;
    padding-right:5px;
}

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

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

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

.form_kotak .input_kotak textarea, .form_kotak .input_kotak_full textarea{
    height:100px;
    width:100%;
    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);
    resize: vertical;
}

.tombol_submit{
    background: #007EF4;
    color: white;
    font-size:18px;
    font-weight:500;
    padding: 10px 30px;
    text-align: center;
    text-decoration: none;
    border-radius:25px;
    transition:all 0.3s;
    border:none;
    letter-spacing:2px;
}

.tombol_submit:hover{
    text-decoration: none;
    background:#1AA3E8;
    color:white;
}

.form_kotak .input_kotak_full{
    margin-bottom:2px;
}


.form_kotak2 .input_kotak input, .form_kotak2 .input_kotak_full input{
    height:30px;
    padding:3px;
    width:100%;
    margin:2px;
    border-radius:5px;
    outline:none;
    border:1px solid #ccc;
    padding-left:5px;
    font-size:13px;
    border-bottom-width:2px;
    background:var(--bg2);
    color:var(--warna-gelap);
}

.form_kotak2 .tombol_submit{
    font-size:14px;
    font-weight:500;
    padding: 8px 17px;
}


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

.tabel_cek td{
    /*padding:0 10px;*/
    padding-left:10px;
    vertical-align:top;
}

#tutupcekdesa, #tutupcekkecamatan{
    display:none;
}

.tutup_cek {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 11px;
  cursor: pointer;
  font-size: 16px;
  font-weight:400;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.tutup_cek input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.tutup_cek:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.tutup_cek input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.tutup_cek input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.tutup_cek .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}






#map{
    width:100%;
    height:calc(100vh - 50px);
    /*height:200px;*/
}

/*-------------------------------------------------------------------------------------TABEL---------------------------*/

.tabel{
    width:100%;
    /*border-collapse: collapse;*/
    border-collapse: separate; /* Don't collapse */
    border-spacing: 0;
    margin-top:20px;
}

.tabel th{
    padding:20px 5px;
    color:#6A6C6F;
    text-align:left;
    position:sticky;
    top:0;
    background:#fff;
    /*font-size:18px;*/
    font-size:14px;
    letter-spacing:0.2px;
    line-height:18px;
    /*border:2px solid #F9F9F9;*/
    /*border: 1px solid #ddd;*/
    
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.tabel tr{
    /*border-bottom:3px solid #F9F9F9;*/
}

.tabel tr:nth-child(even) {background-color: #F9F9F9;}

.tabel tr:hover{
    /*background:#f1f1f1;*/
    background:#F5F5F5;
}

.tabel tr:last-child{
    border-style:none;
}

.tabel td{
    padding:10px 5px;
    color:#6A6C6F;
    font-size:14px;
    font-weight:300;
    /*border: 1px solid #ddd;*/
    border-color:#ddd;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.tabel th:first-child,
.tabel td:first-child {
  border-left: 1px solid #ddd;
}

.table{
    width:100% !important;
}

.table .th_desa{
    /*width:130px;*/
    min-width:130px;
    /*max-width:130px;*/
}

.table .th_angka{
    width:85px;
    min-width:85px;
    max-width:85px;
}

.table .th_ujung{
    /*width:85px;*/
    width:50px;
    min-width:50px;
    max-width:50px;
}

.table .th_no{
    /*width:85px;*/
    width:57px !important;
    min-width:57px;
    max-width:57px !important;
}

.table .th_panjang{
    /*width:85px;*/
    width:250px;
    min-width:250px !important;
    /*max-width:50px;*/
}

.table .td_ful, .tabel2 .td_ful{
    white-space: nowrap;
}

.table .td_1{
    background:#82E0AA;
}

.table .td_2{
    background:#FFFF00;
}

.table .td_3{
    background:#F8C471;
}

.table .td_4{
    background:#F1948A;
}


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

.table th{
    /*color:#6A6C6F;*/
    color:#2B353F;
    font-size:15px;
    letter-spacing:0.2px;
    font-family: 'Poppins', sans-serif;
    font-weight:600;
}

.table td{
    /*color:#6A6C6F;*/
    color:#2B353F;
    font-size:15px;
    font-weight:400;
    font-family: 'Poppins', sans-serif;
}

.table tbody tr:hover{
    background:#F5F5F5 !important;
}

.table ul, .table ol {
    margin-left: 10px; /* To remove default bottom margin */ 
    padding: 0; /* To remove default left padding */
}

.table ol ol {
    margin-left: 17px; /* To remove default bottom margin */ 
    padding: 0; /* To remove default left padding */
}


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

.tabel2 td{
    /*color:#6A6C6F;*/
    color:#2B353F;
    font-size:16px;
    font-weight:400;
    font-family: 'Poppins', sans-serif;
    padding:3px 5px;
}


/*untuk data tabel pada peta*/

.tabel_peta, #peta table{
    min-width:245px;
}

.tabel_peta td, #peta table td{
    font-size:13px;
}

.tabel_peta td:last-child, #peta table td:last-child{
    white-space: nowrap;
}

.peta_foto{
    width:300px
}

.table3{
    
}





.animfade{
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.grid1, .grid3, .grid4, .grid2{
    display: grid;
    grid-gap: 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:3px;*/
    
    min-height:160px;
    
    /*padding:15px 5px 5px 15px;*/
}

.kotwar1,.kotwar2,.kotwar3,.kotwar4{
    border-radius:7px;
    color:#fff;
    padding:15px;
    position:relative;
}

.kotwar1{
    background:#0AB39C;
}

.kotwar2{
    background:#299CDB;
}

.kotwar3{
    background:#F6B84B;
}

.kotwar4{
    background:#F06548;
}

.kotak_grid .grid_kotak_atas{
    /*font-weight:700;*/
    /*color: rgba(255, 255, 255, 0.7);*/
    height:130px;
    display:flex;
    justify-content: space-between;
    flex-direction: column;
    /*border:1px solid red;*/
}

.kotak_grid .kotwar_judul{
    font-weight:700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing:1px;
}

.kotak_grid .kotwar_nilai{
    font-weight:500;
    color: rgba(255, 255, 255, 0.9);
    font-size:24px;
    /*margin-top:30px;*/
}

.kotak_grid .kotwar_nilai2{
    font-weight:500;
    color: rgba(255, 255, 255, 0.9);
    font-size:21px;
    /*margin-top:30px;*/
}

.kotak_grid .kotwar_detail{
    font-weight:400;
    color: rgba(255, 255, 255, 0.9);
    font-size:15px;
    text-decoration:underline ;
    /*margin-top:30px;*/
}

.kotak_grid .grid_kotak_ikon{
    position:absolute;
    bottom:17px;
    right:17px;
    width:60px;
    height:60px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius:5px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.kotak_grid .grid_kotak_ikon ion-icon{
    font-size:25px;
}


.grid_atas{
    width:100%;
    min-height:180px;
    padding:10px;
    background:#fff;
    
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction: column;
}

.grid_atas ion-icon{
    color:#6C6C6C;
    font-size:50px;
}

.grid_nilai{
    font-size:40px;
    font-weight:300;
    color:#69707A;
}

.grid_per{
    font-size:40px;
    font-weight:700;
    color:#69707A;
}

.grid_rp{
    font-size:25px;
}

.grid_kata{
    color:#87BA4D;
    font-weight:700;
    font-size:24px;
}

.grid_bawah{
    /*position:absolute;*/
    width:100%;
    height:50px;
    /*bottom:0;*/
    /*left:0;*/
    border-bottom:1px solid #EBEBEB;
    /*height:40px;*/
    /*padding:7px;*/
    padding-left:17px;
    background:#FFF;
}

.grid_bawah span{
    color:#4E5661;
    font-size:20px;
    font-weight:500;
    line-height:50px;
}

.ber_runing{
    width:100%;
    /*position:relative;*/
    background:#fff;
    
    margin-bottom:20px;
    border:1px solid #EEEEF0;
    padding:15px;
}

.kotak_ber_pisah{
    display:flex;
    width:100%;
    align-items: flex-start;
}

.kotak_ber_pisah2{
    display:flex;
    width:100%;
    flex-direction: column;
    /*border:1px solid red;*/
    /*gap:10px*/
}

.kotak_ber_pisah_kiri{
    width:65%;
    /*border:1px solid red;*/
}

.kotak_ber_pisah_kanan{
    width:35%;
    /*border:1px solid red;*/
    padding-left:20px;
}

.kotak_ber_pisah_isi{
    width:100%;
    background:#fff;
    margin-bottom:20px;
    border:1px solid #EEEEF0;
    /*padding:10px;*/
}

.kotak_ber_pisah_isi2{
    margin-right:10px;
    margin-left:10px;
}

.kotak_ber_pisah_isi3{
    margin-bottom:10px;
}

/*.kotak_ber_pisah_isi:last-child{*/
/*    width:700px;*/
/*}*/


.kotak_ber_ikon{
    display:flex;
    flex-wrap: wrap;
    /*flex-wrap: nowrap;*/
    /*justify-content: space-between;*/
    /*flex-wrap: wrap;*/
    justify-content:  space-between;
    margin-bottom:10px;
}

.ber_ikon{
    /*margin:10px;*/
    background:#FFF;
    /*width:calc(20% - 12px);*/
    width:calc((100% / 7) - 12px);
    min-height:60px;
    min-width:160px;
    margin-bottom:10px;
    padding:10px;
    display:flex;
    /*justify-content: center;*/
    align-items:center;
    flex-direction:column
}

/*.ber_ikon:last-child{*/
/*    margin:0;*/
/*}*/

.ber_ikon p{
    font-weight:700;
    /*color: rgba(255, 255, 255, 0.7);*/
    color: rgba(0, 0, 0, 0.7);
    letter-spacing:1px;
    line-height:25px;
}

.ber_ikon p:first-child{
    /*margin:2px 0;*/
    line-height:20px;
}

.ber_ikon p:last-child{
    font-weight:700;
    /*color: rgba(255, 255, 255, 0.7);*/
    color: rgba(0, 0, 0, 0.9);
    letter-spacing:1px;
    font-size:22px;
}

.ber_pisah_isi_atas{
    height:35px;
    width:100%;
    border-bottom:1px solid #EBEBEB;
    padding-left:10px;
    position:relative;
}

.ber_pisah_isi_atas p{
    color:#4E5661;
    font-size:18px;
    font-weight:500;
    line-height:35px;
}

.ber_pisah_isi_bawah{
    padding:15px;
}

.ber_pisah_isi_bawah2{
    padding-top:3px;
    padding-bottom:5px;
}

.tabel_ber{
    width:100%;
    border-collapse: collapse;
}

.tabel_ber tr{
    border-top:1px solid #EBEBEB;
}

.tabel_ber tr:first-child{
    border-top:none;
}

.tabel_ber th{
    text-align:left;
    color:#2B353F;
    font-size:15px;
    font-weight:600;
    font-family: 'Poppins', sans-serif;
    padding:2px 0;
}

.tabel_ber td{
    text-align:left;
    color:#2B353F;
    font-size:14px;
    font-weight:400;
    font-family: 'Poppins', sans-serif;
    padding:2px 0;
}

.tabel_ber .td_no2{
    text-align:center;
    width:50px;
}

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

.tombol_ber{
    /*position:abso;*/
    /*float:right;*/
}









#chart_div, #chart_div2, #chart_div3{
    width:calc(100% - 20px);
    padding:0;
}

#chart_div{
    height:300px;
    /*width:100vw;*/
    /*margin-left:-40px;*/
}

.ber_chart{
    width:100%;
    height: 300px;
    /*padding:0;*/
}

.ber_chart2{
    width:100%;
    height: 216px;
}

.ber_img{
    width:100px;
}










/* Next & previous buttons */
.ber_prev, .ber_next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -60px;
  color: var(--warna-menu);
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.ber_next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.ber_prev:hover, .ber_next:hover {
  background-color: rgba(0,0,0,0.8);
  color:white;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot2{
    background-color: transparent;
}

.dot2 ion-icon{
    color:#717171;
}

.dot.active, .dot:hover {
  background-color: #717171;
}

.dot2.active ion-icon, .dot2:hover ion-icon{
  color: white;
}

.ber_slide_gambar{
    width:100%;
    max-height:84vh;
}





#example_wrapper{
    /*width:100%;*/
    /*padding-right:5px;*/
}

#example_wrapper .row:nth-child(2) {
    /*color:red !important;*/
    /*overflow-x: auto;*/
}

#example th{
  vertical-align: middle;
}

.tombol{
    background: #007EF4;
    color: white;
    font-size:16px;
    font-weight:500;
    padding: 6px 9px;
    text-align: center;
    text-decoration: none;
    border-radius:5px;
    transition:all 0.3s;
    display:inline-block;
}

.tombol:hover{
    text-decoration: none;
    background:#1AA3E8;
    color:white;
}

.tombol_a{
    background: #007EF4;
    color: white;
    font-size:14px;
    font-weight:500;
    padding: 2px 8px;
    text-align: center;
    text-decoration: none;
    border-radius:5px;
    transition:all 0.3s;
    display:inline-block;
    letter-spacing:1px;
}

.tombol_b{
    margin-bottom:3px;
}

.tombol_a:hover{
    text-decoration: none;
    background:#1AA3E8;
    color:white;
}

.iprem{
    width:100%;
    height:70vh;
    border:none;
}

@media (max-width:768px){
    .grid4, .grid2{
        grid-template-columns:1fr 1fr;
    }
    
    .grid2{
        grid-template-columns:1fr;
    }
    
    .kotak_ber_pisah{
        flex-direction:column;
    }
    
    .kotak_ber_pisah_kiri, .kotak_ber_pisah_kanan{
        width:100%;
        padding:0;
    }
}


@media (max-width:480px){
    .tutup_sidebar{
        z-index:2;
        /*width:200px;*/
        left:-260px;
        /*background:#FFFFFF;*/
    }
    
    .tutup_sidebar.active{
        width:260px;
        left:0;
        /*background:#FFFFFF;*/
        padding:15px;
    }
    
    .sidebar_close{
        display:block;
    }
    
    
    .tutup_sidebar.active span, .tutup_sidebar.active h4, .tutup_sidebar.active .judul3, .tutup_sidebar.active .dropdown-btn .panah, .tutup_sidebar.active .menu_gambar{
        display:block;
    }
    
    .tutup_sidebar.active hr, .tutup_sidebar.active .judul_singkatan, .tutup_sidebar.active .menu_gambar2{
        display:none;
    }
    
    .tutup_sidebar.active .links li{
        padding:14px 10px;
    }
    
    .tutup_sidebar.active .links li ion-icon{
        font-size:24px;
        margin-right:9px;
    }
    
    .tutup_sidebar.active .links{
        display:block;
        /*align-items:center;*/
        /*flex-direction:column;*/
        /*text-align:center;*/
    }
    
    .tutup_sidebar.active .dropdown-btn{
        width:100%;
        padding:14px 10px;
    }
    
    .tutup_sidebar.active .dropdown-btn .ikon{
        font-size:24px;
        margin-right:9px;
    }
    
    .tutup_sidebar.active .dropdown-container{
        margin-left:30px;
    }
    
    .tutup_sidebar.active .dropdown-container a ion-icon{
        display:none;
    }
    
    .tutup_sidebar.active .dropdown-container a span{
        display:block;
    }
    
    .tutup_main{
        width:100vw;
        position:absolute;
        left:0;
        /*padding:15px;*/
    }
    
    .tutup_main.active{
        left:0;
        width:100vw;
    }
    
    .kotak{
        padding:15px;
    }
    
    .kotak_judul .judul{
        font-size:19px;
        line-height:60px;
    }
    
    .modal-content {
        width: calc(100vw - 30px);
        padding: 20px;
      /*max-width:calc(100vw - 30px);*/
    }
    
    .form_kotak .label2{
        margin-bottom:1px;
        font-size:16px;
        
    }
    
    .grid4, .grid2{
        /*margin:5px;*/
        grid-template-columns:1fr;
    }
    
    .kotak_grid {
        margin-bottom:0;
    }
    
    .grid1, .grid3, .grid4, .grid2{
        margin-bottom:20px;
    }
    
    .ber_img{
        width:80px;
    }
    
    .grid_bawah span{
        font-size:18px;
        line-height:50px;
    }
    
    .table th{
        font-size:14px;
        font-weight:600;
    }
    
    .table td{
        font-size:13px;
        font-weight:400;
    }
    
    .kotak_btn{
        padding-right:10px;
    }
    
    .bt_tambah{
        right:10px;
    }
    
    .tutup_atas .kotak_judul_pjg{
        display:none;
    }
    
    .kotak_ber_pisah_kiri, .kotak_ber_pisah_kanan{
        width:100%;
    }
    
}