@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
@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=Raleway:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');


:root{
    --warna-putih:#fff;
    --warna-biru:#53A3FF;
    --warna-hitam:#000;
    --warna-gelap:#363949;
    
    --bg:#fff;
    --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);*/
    --bayang:0px 25px 25px 8px rgba(132,139,200,0.15);
}

.dark-mode{
    --bg:#181A1E;
    --bg2:#202528;
    
    --warna-biru:#50525A;
    --warna-gelap:#edeffd;
    --bg-menu:linear-gradient(to bottom, #202528, #202528);
    --bg-tabel:linear-gradient(to right, #363A3D, #363A3D);
    
    /*--bayang:0px 44px 32px 8px rgba(132,139,200,0.12);*/
    --bayang:0px 25px 25px 8px rgba(132,139,200,0.12);
}
    
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    
}

body{
    min-height:100vh;
    
    width:100%;
    background:#F7FAFF;
    
}

.container{
    
}

.tutup{
    /*border:1px solid black;*/
}

a{
    text-decoration:none;
}

.tutup_sidebar{
    position:fixed;
    top:0;
    left:0;
    font-family:"Poppins", sans-serif;
    
    width:260px;
    min-height:100vh;
    
    transition: 1s;
    background:#FFFFFF;
    
    padding:20px;
    
    border-right:1px solid #EFEFEF;
    
    box-shadow: 0 0 10px #ececec;
    
}

.tutup_sidebar.active{
    /*width:0;*/
    left:-260px;
    /*z-index:2;*/
    /*padding:0;*/
}

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

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

.logo h2{
    font-weight:600;
    font-size:1.15rem;
    margin-left:15px;
}

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

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

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

.links li{
    display:flex;
    align-items:center;
    /*padding:12px 10px;*/
    padding:9px 10px;
}

.links li:hover{
    border-radius:4px;
    cursor:pointer;
    background:#56B6F7;
    /*color:#fff;*/
}

.links .aktif{
    border-radius:4px;
    background:#56B6F7;
}

/*.links hr{*/
/*    border-color:#4c4c4c;*/
/*    margin:10px 8px;*/
/*}*/

/*.sidebar:hover .links hr{*/
/*    border-color:transparent;*/
/*}*/

.links li ion-icon{
    font-size:24px;
    margin-right:12px;
}

/*.links li a{*/
.sidebar a{
    text-decoration:none;
    color:#000;
    font-weight:500;
    white-space:nowrap;
    /*padding:10px;*/
}

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

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

.tutup_main.active{
    width:100vw;
    left:0;
}

.tutup_header{
    width:100%;
    height:70px;
    /*background:#ccc;*/
    position:relative;
    font-family: 'Ubuntu', sans-serif;
    /*border:1px solid purple;*/
}

.header_kiri{
    display:flex;
    align-items:center;
    /*justify-content: center;*/
    /*position:absolute;*/
    /*right:30px;*/
    /*top:15px;*/
    /*border:1px solid red;*/
    padding:20px 30px;
}

.judul4{
    color:#6c757d;
    font-size: 1.125rem;
}

.judul5{
    color:#6c757d;
    /*font-size: 1.125rem;*/
}

.header_kanan{
    display:flex;
    align-items:center;
    position:absolute;
    right:30px;
    top:15px;
    /*border:1px solid red;*/
}

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

.close ion-icon{
    font-size:22px;
}

.toggle{
    /*border:1px solid black;*/
    width:45px;
    /*position:relative;*/
}

.toggle ion-icon{
    font-size:29px;
    /*margin-top:20px;*/
    /*margin-left:22px;*/
    /*margin-right:20px;*/
    color:#747678;
    cursor:pointer;
}

.tutup_header img{
    width:40px;
    border-radius:50%;
    margin-right:10px;
}

.tutup_isi{
    /*width:100%;*/
    /*display:flex;*/
    padding:30px;
}

.kotak{
    background:#fff;
    width:100%;
    font-family: Raleway;
    
    /*box-shadow:-8px 12px 18px 0 rgba(25,42,70,.13);*/
    /*margin-top:5px;*/
    padding:20px 22px;
    border-radius:5px;
    
    
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #727e8c;
    
    -webkit-box-shadow:0px 0px 28px 0px rgba(25,42,70,.13);
    -moz-box-shadow:0px 0px 28px 0px rgba(25,42,70,.13);
    box-shadow:0px 0px 28px 0px rgba(25,42,70,.13);
    /*border:1px solid blue;*/
}









.tutup_konten{
    width:100%;
    /*background:#b2b2b2;*/
    padding:20px;
    padding-right:10px;
    padding-top:5px;
    font-family: Raleway;
    /*border:1px solid blue;*/
}

.kotak_konten{
    background:#fff;
    box-shadow:-8px 12px 18px 0 rgba(25,42,70,.13);
    margin-top:5px;
    padding:20px 22px;
    border-radius:5px;
    
    
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #727e8c;
}

.konten_judul1{
    color:#6c757d;
    font-size: 1.125rem;
    /*font-weight: 500;*/
    /*line-height: 1.7;*/
}

.konten_judul2{
    font-size: .925em;
    color:#6c757d;
    font-weight:300;
}

.tutup_petunjuk{
    /*width:17vw;*/
    width:320px;
    /*background:#999999;*/
    /*min-height:100vh;*/
    padding:20px;
    padding-left:10px;
    padding-top:5px;
    padding-right:25px;
    font-family: Raleway;
    margin-top:5px;
    /*border:1px solid green;*/
}

.kotak_petunjuk{
    background:#56B6F7;
    color:#fff;
    padding:10px 12px;
    border-radius:4px;
    margin-top:5px;
    min-height:30px;
    
    font-size:12px;
    font-weight:300;
    line-height:1.2;
    
    box-shadow:1px 2px 9px rgba(86,182,247,.3);
}

.tek{
    color:var(--warna-gelap);
}

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


.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, .form_kotak .label2{
    font-weight:500;
    margin-bottom:5px;
    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);
}

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

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

.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------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------TABEL---------------------------*/
.tabel{
    width:100%;
    border-collapse: collapse;
    
}

.tabel th{
    padding:20px 5px;
    color:#2b7bff;
    text-align:left;
    position:sticky;
    top:0;
    background:#fff;
    font-size:18px;
}

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

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

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

.tabel td{
    padding:12px 5px;
    color:#363949;
}

.kotak_isi::-webkit-scrollbar {
  width: 7px;
}

/* Track */
.kotak_isi::-webkit-scrollbar-track {
  background: #EDF5FF; 
}
 
/* Handle */
.kotak_isi::-webkit-scrollbar-thumb {
  background: #53A3FF; 
}

/* Handle on hover */
.kotak_isi::-webkit-scrollbar-thumb:hover {
  background: #2b7bff; 
}

.img_detail{
    width:50px;
    height:50px;
}

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

.tabel_voli td{
    text-align:center;
    /*padding:5px 0 40px 0;*/
    padding:5px;
}

.tabel_voli .td_skor_judul{
    padding-bottom:0;
    /*font-weight:700;*/
    font-size:22px;
}


.tabel_voli .tr_skor td:last-child{
    /*background:#e6e6e6;*/
    /*padding-bottom:50px;*/
}


.tabel_voli .tr_jarak td{
    padding:20px;
}

.tabel_voli .skor_voli{
    font-size:40px;
    font-weight:700;
}

.tabel_voli a{
    width:60px;
    /*border:1px solid black;*/
    display:block;
    text-align:center;
    color:#000;
}

.tambah_voli{
    width:60px;
    height:60px;
    border-radius:5px;
    background:coral;
    display:flex;
    align-items:center;
    justify-content:center;
}

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

.tambah_y{
    background:LightGreen;
}

.kotak_tombol{
    display:flex;
}

.tombol_a{
    text-decoration:none;
    border:1px solid #2271B1;
    padding:3px 4px;
    color:#2271C1;
    background:#F6F7F7;
    cursor:pointer;
    border-radius:2px;
    margin-right:5px;
}

.tombol_a:hover{
    background:#F0F0F1;
    color:#0A4B8B;
    border-color:#0A4B8B;
}

.status_s{
    color:green;
    border:1px solid green;
    padding:1px 4px;
    font-size:13px;
    border-radius:4px;
}

.status_b{
    color:coral;
    border:1px solid coral;
    padding:1px 4px;
    font-size:13px;
    border-radius:4px;
}

.tombol_penalti{
    width:100%;
    border:1px solid #CDCDCD;
    border-bottom-width:3px;
    padding:10px;
    display:block;
    text-align:center;
    text-decoration:none;
    color:#000;
    margin:auto;
    margin-top:50px;
    border-radius:30px;
    font-size:19px;
    /*font-weight:700;*/
    letter-spacing:1.2px;
    /*background: linear-gradient(to right, #fff, #fff);*/
    transition:0.2s ease-in-out;
    background:#fafafa;
}

.tombol_penalti:hover{
    /*background: linear-gradient(to right, #21d4fd, #014292);*/
    background:CornflowerBlue;
    color:#fff;
}

/*-------------------------------------------------------------------------------------TABEL SELESAI END---------------------------*/

/*-------------------------------------------------------------------------------------TABEL 2---------------------------*/
.tabel2{
    /*width:100% !important;*/
    font-family: 'Roboto', sans-serif;
    margin-top:10px !important;
}

.tabel2 th{
    color:#6A6C6F;
    border-top:1px solid rgba(0, 0, 0, 0.15);
    border-right:1px solid rgba(0, 0, 0, 0.15);
    border-bottom:3px solid rgba(0, 0, 0, 0.15) !important;
    letter-spacing:0.5px;
}

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

.tabel2 td{
    color:#6A6C73;
    font-weight:300;
    font-size:15px;
}

.tabel2 .td_nama{
    max-width:220px;
    min-width:220px;
}

.tabel2 .td_no{
    max-width:30px;
    min-width:30px;
}

.tabel2 .td_nilai{
    max-width:60px;
    min-width:60px;
}

#example_wrapper .row:nth-child(2) {
    width:100%;
    /*color:red !important;*/
    overflow-x: auto;
    padding:10px 0;
}

.paginate_button:hover{
    background:green;
}

.paginate_button a{
    color:#000;
}

.pagination .disabled a{
    color:grey;
}

.tombol_b{
    text-decoration:none;
    margin-right:3px;
    border-radius:7px;
    padding:4px 7px;
    background:#01987A;
    color:#fff;
    font-size:12px;
    border:none;
    cursor:pointer;
}

.tombol_b:hover{
    text-decoration:none;
}

.tombol_c{
    text-decoration:none;
    margin-right:3px;
    border-radius:7px;
    padding:4px 7px;
    background:transparent;
    color:#01987A;
    border:1px solid #01987A;
    font-size:12px;
    /*border:none;*/
    cursor:pointer;
    transition:all 0.5s;
}

.tombol_c:hover{
    text-decoration:none;
    background:#01987A;
    color:#fff;
}

.tombol_hapus{
    color:DarkRed;
    border:1px solid DarkRed;
}

.tombol_hapus:hover{
    text-decoration:none;
    background:DarkRed;
}



.tutup_aksi{
    position:relative;
}

.button_normal{
    border:none;
    background:transparent;
    cursor:pointer;
    position:relative;
}

.kotak_aksi{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    background:#fff;
    border:1px solid #D9D9D9;
    padding:8px 7px;
    border-radius:5px;
}



.kotak_a{
    display:none;
}

.tabel2 tr:hover .kotak_a{
    display:flex;
    flex-direction: row;
}






.paginate_button a{
    /*text-decoration:none;*/
}

.bt_tambah{
    /*position:absolute;*/
    /*width:100px;*/
    /*height:100px;*/
    /*right:25px;*/
    /*bottom:25px;*/
    background:#F6F7F7;
    border:none;
    /*border-radius:50%;*/
    cursor:pointer;
    /*box-shadow: var(--bayang);*/
    font-size:14px;
    font-weight:700;
    color:#2271C1;
    border:1px solid #2271B1;
    padding:10px 15px;
    border-radius:2px;
    margin-left:15px;
}

.bt_tambah:hover{
    background:#F0F0F1;
    color:#0A4B8B;
    border-color:#0A4B8B;
}

/*---------------------------------------------------------------------------------------MODAL-----------------------------------------------------------------------------------*/
.modal {
  display: none; 
  /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* 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 */
  font-family: 'Roboto', sans-serif;
}



/* Modal Content */
.modal-content {
  background-color: #fff;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  /*width: 80%;*/
  width:calc(100% - 40px);
  max-width:980px;
  position:relative;
}

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

/*.close:hover, .close:focus,*/
.close2:hover, .close2:focus
{
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
/*---------------------------------------------------------------------------------------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;
}

.modal option{
    zoom:1.2;
}


.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--------------------------------------------------*/

.kotak_panduan{
    width:260px;
    border:1px solid #D9D9D9;
    padding:10px;
    position:fixed;
    top:70px;
    right:-260px;
    background:white;
    transition: 1s;
}

.kotak_panduan.active{
    right:0;
}

.tombol_panduan{
    position:absolute;
    top:0;
    right:100%;
    width:30px;
    height:80px;
    background:#1F57B8;
    cursor:pointer;
    color:white;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    /*transform: rotate(-90deg);*/
    display:flex;
    align-items: center;
    justify-content: center;
    
}

.tombol_panduan ion-icon{
    font-size:20px;
}


.tidak_tampil{
    display:none;
}

.tampil{
    display:block;
}


.yangdiprin{
    font-family: "Arimo", sans-serif;
}

.tabel3 th{
    padding:3px 7px;
}

.tabel3 td{
    padding:1px 2px;
}

.teks_tengah{
    text-align:center;
}

.teks_kanan{
    text-align:right;
}

.teks_tebal{
    font-weight:900;
}

.skm_hasil{
    font-weight:900;
    font-size:30px;
}



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

@media (max-width:720px){
    .tutup_sidebar{
        z-index:2;
        position:fixed;
        width:260px;
        left:-260px;
    }
    
    .tutup_sidebar.active{
        /*positi*/
        /*z-index:1;*/
        /*position:absolute;*/
        /*width:260px;*/
        left:0px;
    }
    
    .tutup_main{
        width:100vw;
        position:absolute;
        left:0;
    }
    
    .tutup_main.active{
        left:0;
        width:100vw;
    }
    
    .header_kiri{
        padding:18px 15px;
    }
    
    .judul4{
        font-size: .95rem;
    }
    
    .toggle{
        width:38px;
    }
    
    .header_kanan{
        right:15px;
    }
    
    .tutup_isi{
        display:block;
        padding:10px;
    }
    
    .kotak{
        padding:10px 15px;
        font-size: .9rem;
    }
    
    .tutup_konten{
        padding:15px;
    }
    
    .tutup_petunjuk{
        width:100%;
        padding:15px;
    }
    
    .close{
        display:block;
    }
    
    .tutup_header img{
        width:34px;
        margin-right:8px;
    }
    
    .kotak_form .form_kotak .input_kotak{
        width:calc(50% - 8px);
    }
    
    .tabel th{
        font-size:16px;
        padding:20px 2px;
    }
    
    .th_tutup{
        display:none;
    }
    
    .td_tutup{
        display:block;
    }
    
    .kotak_tombol{
        flex-direction:column;
    }
    
    .tombol_a{
        margin-top:6px;
        margin-right:0;
        font-size:14px;
    }
    
    .modal {
      padding-top: 50px; 
    }
    
    .modal-content {
      width: calc(100% - 30px);
    }
    
    .kotak_a{
        display:flex;
        flex-direction: column;
    }
    
    .tabel2 tr:hover .kotak_a{
        flex-direction: column;
    }
    
    .tombol_b{
        margin-bottom:3px;
    }
}




@media print {
  body {
    visibility: hidden;
  }
  
  .yangdiprin {
    visibility: visible;
    position: absolute;
    width:100%;
    left: 0;
    top: 0;
  }
}