@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{
    /*--mainColor: #64bcf4;*/
  --mainColor: #709E68;
  
  /*--hoverColor: #5bacdf;*/
  --hoverColor: #fff;
  /*--backgroundColor: #f1f8fc;*/
  --backgroundColor: #F5FCF6;t
  
  --darkOne: #312f3a;
  /*--darkTwo: #45424b;*/
  
  --lightOne: #919191;
  /*--lightTwo: #aaa;*/
  --lightTwo: #E6A8A9;
}

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

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

.tutup{
    font-family: 'Roboto', sans-serif;
    width:100%;
    min-height:100vh;
    background:#fff;
    background-image: url("https://sikernas.setda.natunakab.go.id/aset/img/bg.png");
    background-attachment:fixed;
    /*background-position: center;*/
    /*background-repeat: no-repeat;*/
    background-size: 230px 230px;
}

.tutup_main{
    width:100%;
    min-height:500px;
    padding:20px;
    /*border:1px solid black;*/
}

.kotak_main{
    position:relative;
    width:1280px;
    max-width:100%;
    min-height:500px;
    margin:auto;
    padding:20px;
    border:1px solid #ddd;
    background:#fff;
    border-radius:5px;
}


/*------------------------------------------------------------------------------------------------------------------------MENU---------------------*/
.tutup_menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*padding:5px 15px;*/
    /*border:1px solid red;*/
    /*background:#C12729;*/
    /*background: linear-gradient(to right, #C12729 100%, #601314 100%);*/
    background-image: linear-gradient(to right, #C12729, #731718);
    height:70px;
}

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

.kotak_menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*border:1px solid black;*/
    /*width:auto;*/
    /*position:absolute;*/
    /*top:10px;*/
    /*right:10px;*/
    /*background:grey;*/
    width:1280px;
    max-width:100%;
    margin:auto;
}

.kotak_menu_isi{
    /*padding:0;*/
    display: flex;
    align-items: center;
    /*border:1px solid blue;*/
    /*height:40px;*/
}

.kotak_menu ul{
    /*border:1px solid purple;*/
    display: flex;
    list-style: none;
    align-items: center;
    /*width:500px;*/
    /*height:40px;*/
    margin-bottom:0;
}

.kotak_menu li{
    display: flex;
    align-items: center;
    /*background:grey;*/
    /*border:1px solid yellow;*/
    padding:7px 12px;
    /*height:40px;*/
}

.kotak_menu a{
    color:#fff;
    font-size:16px;
}

.tutup_menu .logo{
    /*display:none;*/
    display: flex;
    align-items: center;
    /*border:1px solid yellow;*/
}

.tutup_menu .logo p{
    font-size:30px;
    font-weight:700;
    color:#fff;
}

.tutup_menu .overlay {
    display: none;
}

.hamburger-menu {
  position: absolute;
  /*top:0;*/
  right:20px !important;
  z-index: 99;
  width: 2rem;
  /*height: 2rem;*/
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  display: none;
  /*margin-top:10px;*/
  /*border:1px solid red;*/
}

.hamburger-menu .bar {
  position: relative;
  width: 100%;
  height: 3px;
  width:25px;
  background-color: #fff;
  border-radius: 3px;
  transition: 0.5s;
}

.hamburger-menu .bar::before,
.hamburger-menu .bar::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 3px;
  transition: 0.5s;
}

.hamburger-menu .bar::before {
  transform: translateY(-8px);
}

.hamburger-menu .bar::after {
  transform: translateY(8px);
}

.tutup_menu.active .hamburger-menu .bar {
  background-color: transparent;
}

.tutup_menu.active .bar::before {
  transform: translateY(0) rotate(-45deg);
}

.tutup_menu.active .bar::after {
  transform: translateY(0) rotate(45deg);
}


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


.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{
    white-space: nowrap;
}



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

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






.tabelsorting thead tr:first-child th{
    border-bottom:none !important;
    padding-bottom:4px !important;
}

.tabelsorting thead tr:last-child th{
    border-bottom:2px solid #DDDDDD !important;
    border-top:none !important;
    padding:0 0 10px 8px;
}




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




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

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



/*-----------------------------------------------------------------------------------------------------------------DETAIL MULAI START------------------------------------------*/

.kotak_detail{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    /*border:1px solid black;*/
}

.kotak_detail img{
     width:250px;
     margin-bottom:5px;
     border:2px solid #eee;
     border-radius:5px;
}

.kotak_detail p{
    font-size:20px;
    font-weight:700;
}

.tabel_detail{
    width:100%;
}

.tabel_detail td{
    padding:8px 1px;
}

.tabel_detail td:first-child{
    width:49%;
    text-align:right;
    /*background:red;*/
}

.tabel_detail td:nth-child(2){
    /*width:calc(50% - 10px);*/
    text-align:center;
    /*background:blue;*/
    width:2%;
}

.tabel_detail td:last-child{
    /*width:calc(50% - 10px);*/
    /*background:green;*/
}

/*-----------------------------------------------------------------------------------------------------------------DETAIL SELESAI END------------------------------------------*/


@media screen and (max-width: 720px) {
    
.tutup_main{
    padding:10px;
}

.kotak_main{
    padding:10px;
}

.kotak_menu{
    padding-left:10px;
}
    
    
.kotak_menu_isi{
    position: fixed;
    top: 0;
    right: 0;
    max-width: 450px;
    width: 100%;
    height: 100%;
    /*background-color: grey;*/
    background-image: linear-gradient(120deg, #C12729, #731718);
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(100%);
    transition: 0.5s;
}

.tutup_menu.active .kotak_menu_isi{
    transform: translateX(0);
}

.kotak_menu ul {
    flex-direction: column;
}   

.kotak_menu li{
    padding:20px 10px;
}

.kotak_menu a{
    font-size:17px;
    letter-spacing:.7px;
}

/*.tutup_menu .logo{*/
/*    display:block;*/
/*}*/

.hamburger-menu {
    display: block;
}

.tutup_menu  .overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: 0.5s;
  }

.tutup_menu.active .overlay {
    pointer-events: all;
    opacity: 1;
}

.kotak_judul .judul{
    font-size:19px;
    line-height:60px;
}
    
    
  
}