@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Roboto&display=swap');
:root{
    --satu:#2e3e40;
    --dua:#3A4E51;
    --tiga:#5a786f;
    --empat: #8ba88e;
    --lima:#ccd2c6;
    --enam: #FCFCFD;
    --tujuh:#FF592C;
    --delapan:#3772FF;
    --sembilan: #777E90;
    --shadow:#465e62;
    --danger:#db14148e;
}

* {
    padding: 0 ;
    margin : 0 ;
    font-family: 'Roboto', sans-serif;
    background-color: var(--dua);
    letter-spacing: 0.5px;
    font-size: 12px !important;
}

*,*:before,*:after{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-tap-highlight-color:transparent
}

a{
    text-decoration: none;
}

.shadow{
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
}
.inset-shadow{
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
}

.radius{
    border-radius: 5px !important;
}
.radius-10{
    border-radius: 10px!important;
}

.p-1 {
    padding:10px !important;
}

.bold {
    font-weight: bold !important;
}

.italic {
    font-style: italic !important;
}

.underline{
    text-decoration: underline;
}

.letter-spacing {
    letter-spacing: 0.2em !important;
}

.bg-1 {
    background-color: var(--satu) !important;
}
.bg-2{
    background-color: var(--dua) !important;
}

.bg-3 {
    background-color: var(--tiga) !important;
}
.bg-4 {
    background-color: var(--empat) !important;
}
.bg-5 {
    background-color: var(--lima) !important;
}

.bg-6{
    background-color: var(--enam) !important;
}
.bg-7{
    background-color: var(--tujuh) !important;
}
.bg-8 {
    background-color: var(--delapan) !important;
}

main {
    max-width: 480px !important;
    margin: auto;
    padding: 20x !important;
    display: flex;
    align-items: center;
    flex-direction: column;
}

header {
    margin: auto !important;
    margin-top: -12px !important;
    margin-bottom: 4px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px !important;
    gap: 5px ;
}
header img{
    border-radius: 50% !important;
    padding: 5px !important;
    background: (145deg, #344649, #3e5357);
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) !important;
}

nav  {
    margin-top: 8px !important;
    margin-bottom: 20px !important;
    width: 90%;
    font-weight: bold;
    padding-top: 8px !important;
}

nav ul {
    display: flex;   
    justify-content: space-between; 
}
nav ul li {
    display: block;   
}
nav ul li a {
    color: var(--enam);
    padding: 10px !important;
    border-radius: 5px !important;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 55px !important;
    
}

nav ul li a:hover{
    color: var(--lima);
}

nav ul li a:active{
    color:var(--satu);
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
}

nav ul li a .logo {
    background-color: transparent;
}
nav ul li a .logo ion-icon {
    font-size: 30px !important;
}

nav ul li a .caption {
    background-color: transparent;
    
}

section {
    width: 82%;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) !important;
    padding:20px !important;
    border-radius: 5px !important;
    margin-bottom: 20px !important;
}

h1{
    font-size: 14px !important;
    color: var(--enam);
    background-color: var(--tujuh);
    font-weight: 600;
    border-radius: 5px;
    padding: 10px !important;
    padding-top: 18px !important;
    padding-bottom: 20px !important;
    box-shadow: -3px -3px 6px var(--satu), 3px 3px 7px var(--shadow) !important;
    overflow-wrap: break-word;
    font-family: 'Kanit', sans-serif !important;
    letter-spacing: 4px !important;
    font-family: 'Kanit', sans-serif;
}
h2{
    color: var(--empat);
    font-family: 'Kanit', sans-serif;
    font-size: 14px !important;
    margin-bottom: 20px !important;
    letter-spacing: 4px !important;
}

small{
    margin-top:5px !important;
    margin-bottom:5px !important;
    font-size: 8px !important;
    color: var(--lima);
}

form {
    color: var(--lima);
    display: flex;
    flex-direction: column;
    margin-top: 10px !important;
    box-sizing: border-box !important;
    align-items: center;
    justify-content: center;
    
}

form .input_box{
    position: relative;
    width: 100%;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
}
form label {
    position: absolute;
    color: var(--lima);
    top:28px !important;
    left: 10px !important;
    padding: 2px !important;
    background-color: transparent;
    transition: 0.6s;
}
form select:valid ~ label,
form select:focus ~ label,
form input:valid ~ label,
form input:focus ~ label{
    color: var(--empat);
    transform: translateX(0px) translateY(-30px);
    box-shadow: -3px -3px 6px var(--satu), 3px 3px 7px var(--shadow) !important;
    background-color: var(--dua);
    border-radius: 10px !important;
    padding:5px !important;
}

form input[type=text]{
    width: 88%;
    border-radius:5px;
    background-color: transparent;
    padding: 6%  !important;
    outline: none;
    border: none;
    color: var(--enam);
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
    transition: 0.6s;
    margin-top: 10px !important;
    font-size: 18px !important;
}
form input[type=file]{
    width: 88%;
    border-radius:5px;
    background-color: transparent;
    padding: 6%  !important;
    outline: none;
    border: none;
    color: var(--enam);
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
    transition: 0.6s;
    margin-top: 10px !important;
    font-size: 18px !important;
}
form input[type=password]{
    width: 88%;
    border-radius:5px;
    background-color: transparent;
    padding: 6% !important;
    outline: none;
    border: none;
    color: var(--enam);
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
    transition: 0.6s;
    margin-top: 10px !important;
    font-size: 18px !important;
}
form input[type=email]{
    width: 88%;
    border-radius:5px;
    background-color: transparent;
    padding: 6% !important;
    outline: none;
    border: none;
    color: var(--enam);
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
    transition: 0.6s;
    margin-top: 10px !important;
    font-size: 18px !important;
}
form select{
    width: 100%;
    border-radius:5px;
    background-color: transparent;
    padding: 6% !important;
    outline: none;
    border: none;
    color: var(--enam) !important;
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
    transition: 0.6s;
    margin-top: 10px !important;
    font-size: 18px !important;
}

form select selected{
    color:var(--enam)
}

form input[type=number]{
    width: 88%;
    border-radius:5px;
    background-color: transparent;
    padding: 6% !important;
    outline: none;
    border: none;
    color: var(--enam);
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
    /* margin-bottom: 10px !important; */
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
    transition: 0.6s;
    margin-top: 10px !important;
    font-size: 18px !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
form input[type=date]{
    width: 88%;
    border-radius:5px;
    background-color: transparent;
    padding: 6% !important;
    outline: none;
    border: none;
    color: var(--enam);
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
    /* margin-bottom: 10px !important; */
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
    transition: 0.6s;
    margin-top: 10px !important;
    font-size: 18px !important;
}

input[type=date]:required:invalid::-webkit-datetime-edit {
    color: transparent;
}
input[type=date]:focus::-webkit-datetime-edit {
    color: var(--enam) !important;
}




form button[type=submit]{
    color:var(--lima);
    padding: 10px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    box-shadow: -3px -3px 6px var(--satu), 3px 3px 7px var(--shadow) !important;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    width: 100% !important;
    cursor: pointer;
    font-size: 12px !important;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 4px !important;
    margin-top: 10px !important;
}
form button:active{
    color:var(--satu);
    padding: 10px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    background-color: var(--dua) !important;
}
form .tombol{
    color:var(--lima);
    padding: 10px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    box-shadow: -3px -3px 6px var(--satu), 3px 3px 7px var(--shadow) !important;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    width: 100% !important;
    cursor: pointer;
    font-size: 12px !important;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 4px !important;
    margin-top: 10px !important;
    background-color: var(--satu);
}
form tombol:active{
    color:var(--satu);
    padding: 10px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    background-color: var(--dua) !important;
}

.radio-group {
    display: flex;
    flex-direction: row;
    gap: 4%;
    align-items: start;
    padding: 7px !important;
}
.radio-group .radio {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    width: 99%;
}

.radio-group input[type="radio"] {
    margin-right: 40px !important;
  }      
  .radio-group .lbl-radio {
    display: inline-block;
    background-color: #d1d1d1;
    padding: 4px 11px;
    font-family: Arial;
    font-size: 18px;
    cursor: pointer;
  }      
  .radio-group input[type="radio"]:checked+label {
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
  }


.daftar{
    display: flex;
    margin-top: 20px !important;
    color:var(--lima);
    padding: 10px !important;
    box-shadow: -3px -3px 6px var(--satu), 3px 3px 7px var(--shadow) !important;
    text-decoration: none;
    border: none;
    text-align: center;
}
.daftar:active{
    margin-top: 20px !important;
    color:var(--satu);
    padding: 10px !important;
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
    text-decoration: none;
    border: none;
}

.fasilitas{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:20px!important;
    margin-bottom:15px!important;
    gap: 10px !important;
}

.fasilitas .menu a{
    color: var(--enam);
    padding: 10px !important;
    border-radius:5px ;
    box-shadow: -3px -3px 6px var(--satu), 3px 3px 7px var(--shadow) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 55px !important;
}

.fasilitas .menu a .logo ion-icon {
    font-size: 30px !important;
    background-color: transparent;
}

.fasilitas .menu a:hover{
    color:var(--empat);
}
.fasilitas .menu a:active{
    color:var(--satu);
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) !important;
}



footer {
    width: 82%;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) !important;
    padding: 20px !important;
    border-radius: 5px !important;
    margin-bottom: 20px !important;
    color: var(--lima);
    font-size: 9px !important;
    text-align: center;
    line-height:16px;
}

footer .creator{
    color: var(--enam);
    font-size: 9px !important;
}
figure{
    margin-bottom: 20px!important;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
    border-radius: 5px !important;
}
figure img{
    border-radius: 5px !important;
    /* margin-bottom: 8px !important; */
    
    
}
figure figcaption{
    padding: 10px !important;
    border-radius: 5px !important;
    
}
figure figcaption a{
    color: var(--enam);
    font-size: 14px !important;
    line-height: 18px !important;
    letter-spacing: 2px !important;
    font-weight: bold;
    
}
figure figcaption a:hover{
    color: var(--lima);
    cursor: pointer;
}
figure figcaption a:active{
    color: var(--satu);
    cursor: pointer;
}

figure article{
    color: var(--lima);
    padding: 10px !important;
    line-height: 18px !important;
    letter-spacing: 0.5px !important;
    border-radius: 5px !important;
}

section .btn-lainnya{
    display: inline-block;
    width: 100%;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    color:var(--empat);
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
    border-radius: 5px !important;
    letter-spacing: 5px !important;
    font-weight: bold;
}
section .btn-lainnya:hover{
    
    color:var(--lima);
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
    border-radius: 5px !important;
    
}
section .btn-lainnya:active{
    
    color:var(--satu);
    box-shadow: inset -3px -3px 6px var(--satu),inset 3px 3px 7px var(--shadow) ;
    border-radius: 5px !important;
}

.selengkapnya {
    margin-top: 8px !important;
    text-align: center;
}
.selengkapnya a{
    background-color: var(--satu);
    color: var(--empat);
    font-size: 12px !important;
    display: inline-block;
    width: 100%;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
    border-bottom-left-radius: 5px ;
    border-bottom-right-radius:5px ;
    padding: 10px 0 10px 0 !important;
    text-transform: uppercase;

}

.selengkapnya a:hover{
    color:var(--enam)
}
.selengkapnya a:active{
    background-color: var(--dua);
    color:var(--satu);
    box-shadow: inset -3px -3px 6px var(--satu),inset 3px 3px 7px var(--shadow) ;
}

section .data_null{
    color: var(--enam);
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
}

section .data_null ion-icon{
    font-size: 45px !important;
    margin-bottom: 8px !important;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
    border-radius: 50% !important;
    padding: 5px !important;
    background-color:var(--tujuh);
}
section .data_null .pesan{
    letter-spacing: 0.1em;
}


section .ls_loker{
    width: 100%;
    position: relative;
    display: flex;
    overflow: auto;
    scroll-snap-type: x mandatory;
    margin-top: 8px !important;
    border-radius: 5px;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
    box-sizing: border-box;
}

section .ls_loker article{
    width: 100%;
    height: 270px;
    flex-shrink: 0;
    position: sticky;
    left: 0;
    object-fit: cover;
    color: var(--enam);
    letter-spacing: 0.1em;
    line-height: 2em;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;

}

section .ls_loker article .title_loker{
    padding: 10px !important;
    display: flex;
    justify-content: left;
    background: transparent;
    gap:5px !important;
    border-bottom: solid 2px var(--empat);
    align-items: center  ;
}
.title_loker {
    background: transparent;
}
.title_loker article span{
    background: transparent;
    letter-spacing: 0.1em;
}

.desk{
    padding: 10px !important;
    display: flex;
    justify-content: center;
    align-items: left;
    background-color: transparent;
    flex-direction: column;
}
.desk span{
    letter-spacing: 0.1em;
    color: var(--enam);
    background-color: transparent;

}

.desk .label {
    color: var(--lima);
}

.mou{
    display: flex;
    align-items: left;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px !important;
    /* width: 100px !important; */
    flex-direction: row;
}
.mou figure{
    color: var(--enam);
    text-align: left;
    /* padding-top: 10px !important; */
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    width: 150px!important;
}
.mou figure figcaption{
    letter-spacing: 0.2em;
    line-height: 1.5rem !important;
    display: flex;
    flex-direction: column;
    gap: 8px !important;
    justify-content: start;
    align-items: flex-start;
}

.title_daftar{
    color: var(--empat) !important;
    width: 100% !important;
    text-align: left;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-top: solid 2px var(--tiga);
    font-weight: bold;
    font-size: 14px !important;
    letter-spacing: 0.2em !important;

}

.akun_info{
    color: var(--lima);
    letter-spacing: 0.3em !important;
    font-size: 14px !important;
    padding: 10px !important;
    line-height: 1.5rem !important;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
    margin-top: 20px !important;
    border-radius: 5px !important;
}
.akun_info span{
    color: var(--enam);
    font-weight: bold;
    font-style: italic;
    font-size: 14px!important;
}
.akun_info p{
    margin-bottom: 8px !important;
}


.perbaikan {
    line-height: 1.5rem !important;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
    margin-top:  20px !important;
    border-radius: 5px !important;
    padding: 10px !important;
    color: var(--lima);
    letter-spacing: 0.3em !important;
}

.berita_galeri {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px !important;
    margin-top: 8px !important;
    /* padding: 10px !important; */
    /* box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ; */
    border-radius: 5px !important;
}

.berita_galeri a {
    display: flex;
    flex-direction: row;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
    border-radius: 5px !important;
}
.berita_galeri a:active {
    display: flex;
    flex-direction: row;
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) ;
    border-radius: 5px !important;
    color: var(--satu);
}
.berita_galeri a img{
    width: 30% !important;
    border-radius: 5px !important;
}
.berita_galeri a .detail_berita {
    display: flex;
    gap:6px !important;
    flex-direction: column;
    padding: 8px !important;
    border-radius: 5px !important;
    background: transparent;
}
.berita_galeri a .detail_berita span {
    color: var(--enam);
    background: transparent;
    font-weight: bold;
    letter-spacing: 0.2em !important;
}
.berita_galeri a:active .detail_berita span {
    color: var(--satu);
    background: transparent;
}
.berita_galeri a .detail_berita .date {
    color: var(--empat);
    background: transparent;
    font-size: 8px !important;
    font-style: italic;
}
.berita_galeri a:active .detail_berita .date {
    color: var(--satu);
    background: transparent;
}


.berita {
    display: flex;
    flex-direction: column;
    margin-top: 8px !important;
    border-radius: 5px !important;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
}
.berita img {
    border-radius: 5px !important;
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) ;
}
.berita .caption {
    font-size: 8px !important;
    font-style: italic;
    text-align: center;
    margin-top: 8px !important;
    color: var(--empat);
}

.berita p{
    padding: 8px !important;
    border-radius: 5px !important;
    color: var(--lima);
    line-height: 1.5em !important;
    letter-spacing: 0.1em !important;
}

.tag {
    font-size: 8px !important;
    color: var(--empat);
    border-top: solid thin var(--tiga);
    background: transparent;
    padding: 5px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    font-style: italic;
}



#snackbar {
    visibility: visible;
    min-width: 250px;
    margin: auto;
    background-color: var(--satu);
    color: var(--enam);
    text-align: center;
    border-radius: 5px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* bottom: 30px; */
    font-size: 17px;
    letter-spacing: 0.2em !important;
    cursor: pointer;
  }

  #snackbar span{
    background: transparent;
    letter-spacing: 0.2em !important;
    font-weight: bold;
  }
  #snackbar p{
    background: transparent;
    letter-spacing: 0.2em !important;
    color: var(--lima);
  }
  
  #snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
  }
  
  @-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
  }
  
  @keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }
  
  @-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
  }
  
  @keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  }


.profil{
    color: var(--enam);
    padding: -5px !important;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 10px !important;
    /* background-color: var(--satu); */
}
.profil img{
    background-color: var(--lima);
    border-radius: 5px !important;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
    aspect-ratio: 3/2;
    object-fit: contain;
}
.profil article{
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-around;
}
.profil article p{
    width: 100% !important;
    border-radius: 5px !important;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
    padding:10px !important;
    margin-top: -10px !important;
    background-color: var(--satu);
    letter-spacing: 0.1em !important;
    text-align: center;
}
.profil a{
    color: var(--enam);
    width: 100% !important;
    background-color: var(--tujuh);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
    padding: 10px 12px 10px 12px!important;

}

.profil a ion-icon{
    font-size: 25px !important;
    background: transparent;
}
.profil a span{
    background: transparent;
}

.profil a:active{
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) ;
    color: var(--satu);
    background: transparent;
}
.profil article a{
    display: flex;
    flex-direction: row;
    gap:5px !important;
    border-radius: 5px !important;
    background-color: var(--dua);
    margin-top: 8px !important;
    padding: 5px 10px 5px 10px !important;
    width: 100% !important;
}


.loker{
    border-radius: 5px !important;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
    padding: 10px !important;
    padding-bottom: 20px !important;
    margin-top: 8px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.loker h3{
    color: var(--enam);
    background-color: var(--satu);
    letter-spacing: 0.1em !important;
    font-weight: bold;
    padding: 10px !important;
    border-radius: 5px !important;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
}

.detail_loker{
    display: flex;
    flex-direction: column;
    row-gap: 8px !important;
    color: var(--lima);
    margin-top: 8px !important;
    margin-bottom: 20px !important;
    padding: 5px !important;
}
.detail_loker .field{
    display: flex;
    flex-direction: row;
    gap:5px !important;
    align-items: start;
    justify-content: start;
}

.detail_loker .field .logo ion-icon{
    font-size: 15px !important;
}
.detail_loker .field .label {
    flex: 0 0 100px;
    letter-spacing: 0.1em !important;
    line-height: 1.5em !important;
}

.detail_loker .field .nilai {
    font-style: italic;
    color: var(--enam);
    letter-spacing: 0.1em !important;
    line-height: 1.5em !important;
}


.lamar{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--enam);
    text-decoration: none;
    width: 100% !important;
    border-radius: 5px !important;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
}
.lamar a{
    color: var(--enam);
    
    
}

.kotak{
    margin-top: 20px !important;
    padding: 10px !important;
    border-radius: 5px !important;
    box-shadow: -3px -3px 6px var(--satu),3px 3px 7px var(--shadow) ;
}
.kotak ol{
    counter-reset: li; /* Initiate a counter */
    list-style: none; /* Remove default numbering */
    *list-style: decimal; /* Keep using default numbering for IE6/7 */
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
}

.kotak2{
    margin-top: 20px !important;
    padding: 10px !important;
    border-radius: 5px !important;
    box-shadow: inset -3px -3px 6px var(--satu), inset 3px 3px 7px var(--shadow) ;
}

.kotak2 td{
    margin-top: 20px !important;
    padding: 10px !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
    box-shadow:  -3px -3px 6px var(--satu),  3px 3px 7px var(--shadow) ;
    border-bottom: 1px solid var(--empat);
}
.lokasilulus{
    font-weight:bold !important;
}
.small{
   color:var(--empat) !important;
   font-size: 9px !important;
}



.rounded-list {
    padding-left: 20px !important;
}
.rounded-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: var(--satu);
    color: var(--enam);
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
    letter-spacing: 0.15em !important;
    line-height: 1.5em !important;
  }

  .rounded-list a:hover{
    background: var(--tiga);
  }

  .rounded-list a:hover:before{
    transform: rotate(360deg);
  }

  .rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: var(--tiga);
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid var(--lima);
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
  }




  /* untuk loading page  */