/* Gemini**ERP by Aris S. Indonesia 2011.11.11 */

*{font-size:1rem;line-height:1.4;margin:0px;padding:0px;box-sizing:border-box;font-family:Arial, sans-serif}
html{font-size:12px}
h4,h5,h6{font-size:1.1rem;line-height:1.2}
h3{font-size:1.2rem;line-height:1.3}
h2{font-size:1.35rem;line-height:1.5}
h1{font-size:1.5rem;line-height:1.7}
hr{height:2px;border:1px solid gray;}

form{display:inline}
img{max-width:99%;height:auto}
::placeholder{opacity:0.5;font-weight:bolder;font-style:italic}
table{border-collapse:collapse;margin:5px;box-shadow:0 0 7px 0 gray,0 0 7px 0 gray inset}
table th{padding:5px;border:1px solid gray;text-align:center}
table td{padding:5px;border:1px solid gray;vertical-align:middle;text-align:left}
table tr:hover{cursor:pointer;box-shadow:0 0 7px 0 gray inset}
b,u,s,i,span{font-size:inherit}

a{cursor:pointer;display:inline-block;text-decoration:none;font-weight:bolder}
a:hover,a:focus{text-decoration:overline;}
.btn,.btn:visited,.btn:link,.btn:active,input[type=submit],input[type=reset],button{box-shadow:0 0 4px 0 gray,0 0 4px 0 gray inset;border-radius:5px;border:0px;border-left:3px solid black;min-width: 59px;text-align:center;     cursor:pointer;padding:3px;margin:5px;display:inline-block;text-decoration:none;font-weight:bolder}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],input[type=file],input[type=color],select,textarea{border:1px solid gray;border-radius:4px;padding:3px;margin:5px 0px;width:100%}
input[type=text]:focus,input[type=number]:focus,input[type=date]:focus,input[type=time]:focus,input[type=password]:focus,input[type=color]:focus,select:focus,input[type=text]:hover,input[type=number]:hover,input[type=date]:hover,input[type=time]:hover,input[type=password]:hover,input[type=color]:hover,select:hover,textarea:hover,textarea:focus{box-shadow:0 0 7px 0 gray;border:1px solid gray}
textarea{height:42px;transition:height 0.7s ease-in-out}
textarea:hover,textarea:focus{height:120px}

input[type=checkbox],input[type=radio]{margin-right:5px;cursor:pointer;transform:translateY(2px)}

@keyframes bgScrollX{0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}}
.ani{animation:zoom-hc 0.8s}
@keyframes zoom-hc{0%{transform:scaleX(0.2)}100%{transform:scaleX(1)}}

.c{text-align:center;vertical-align:middle;align-items:center;align-content:center}
.l{text-align:left}
.r{text-align:right}
.fr{float:right}
.j,.lst,.tile,#gli{text-align:left;text-align:justify}
.error,.ok{box-shadow:0 0 7px 0 gray;text-align:center;border-radius:4px;margin:5px;padding:5px}
.error{background-color:#f6f6a2;color:red}

.box{display:block;border-top:3px solid black;min-width:260px;   box-shadow:0 0 7px 0 gray,0 0 7px 0 gray inset;text-align:center;border-radius:10px;margin:5px;padding:5px}
.box h3{text-align:center}
.box2{text-align:left;vertical-align:top;padding:5px}
#gl,#gl0,#gl1,#gl2{scroll-margin:40px;word-wrap:break-word;margin:5px}
#gli{position:fixed;overflow:auto;left:0;top:0;width:100%;height:100%;z-index:-1}

.lst{display:inline-block;padding:10px;margin:5px;text-decoration:none;box-shadow:0 0 7px 0 gray,0 0 7px 0 gray inset;border-radius:10px;border-top:3px solid black;width:99%;overflow:hidden;font-weight:normal}
.lst img{width:128px;height:128px;float:left;border:0px;margin-right:10px}
.lst h3{height:28px;overflow:hidden;line-height:1;margin-bottom:3px;text-align:left;font-style:italic}
.lst:hover,.lst:focus,.btn:focus,.btn:hover,.gac a:hover,.gac a:focus{box-shadow:0 0 7px 0 white,0 0 7px 0 white inset;text-shadow:none;text-decoration:none}

.tile{display:block;margin:5px}
.tile img,#gl img{display:block;margin-left:auto;margin-right:auto;padding:5px;border:0px}
.icoB{width:320px;height:320px;border:0px;margin:5px}

.gac{width:fit-content;height:fit-content;position:absolute;text-align:left;padding:5px;box-shadow:0 0 7px 0 gray,0 0 7px 0 gray inset;z-index:10;display:none}
.gac a{border-bottom:1px solid gray;padding:4px 5px;margin:0px;display:block;text-shadow:none}
.gac a:last-child{border-bottom:0px solid gray}

.scrollx{overflow-x:scroll}
#a_kategori a{width:176px;text-align:left !important}
#cari{width:62px;margin:5px;transition:width 0.7s ease-in-out}
#cari:focus,#cari:hover{width:155px}
.foot{margin: 20px 5px 5px 5px;padding: 20px 5px;text-align:center;box-shadow:0 0 7px 0 gray}
#gnav{padding:0px 5px;position:fixed;width:100%;overflow-x:auto;white-space:nowrap;box-shadow:0 0 7px 0 gray}
#gnav a,.foot a,#gTag a,.cmd a{padding:3px}

/* slideshow carousel */
.ss-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow:0 0 7px 0 gray,0 0 7px 0 gray inset;
  background: #111;
  opacity: 0; transition: opacity 3s ease;
  text-align: left;
}
.ss-carousel.ss-ready { opacity: 1; }

.ss-slide {
  position: absolute; inset: 0;
  background: center/cover no-repeat;
  opacity: 0; transition: opacity 1.5s;
}
.ss-slide.ss-active { opacity: 1; }

.ss-caption {
  position: absolute; left:0; right:0; bottom:0;
  padding:.6rem; font-weight:600; font-size:1rem;
  background: linear-gradient(to top,rgba(0,0,0,.6),transparent);
  opacity:0; transform:translateY(10px);
}
.ss-caption.ss-show { opacity:1; transform:translateY(0); transition:1.2s; }
.ss-caption.ss-hide { opacity:0; transform:translateY(10px); transition:1s; }

.ss-progress-bars {
  position:absolute; top:0px; left:50%; transform:translateX(-50%);
  display:flex; gap:4px; width:98%;
}
.ss-bar {flex:1; height:3px; background:rgba(243, 184, 69,0.4); border-radius:2px; cursor:pointer}
.ss-bar-fill { height:100%; width:0; background:#b0e0e6}

.ss-tap-zone {
  position:absolute; top:0; bottom:0; width:20px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.ss-tap-zone:hover { background:rgba(0,0,0,.25); }
.ss-tap-left{left:0;} .ss-tap-right{right:0;}
.ss-arrow-icon { font-size:21px; color:#fff; opacity:.4; }

.ss-thumbnails {
  display:flex; gap:6px; overflow-x:auto;
  padding:0;
  width:640px; max-width:90vw;
  justify-content:center;
  margin-top:5px;
}
.ss-thumbnails.top { margin-bottom:5px; }

.ss-thumbnail {
  flex:0 0 auto;
  object-fit:cover;
  border:2px solid transparent;
  border-radius:3px;
  opacity:.6;
  cursor:pointer;
}
.ss-thumbnail:hover { opacity:1; }
.ss-thumbnail.ss-active { border-color:#00d4ff; opacity:1; }

/*pc*/
@media (min-width:640px){
textarea{width:240px;transition:width 0.7s,height 0.7s ease-in-out}
textarea:focus{width:400px;height:280px}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],input[type=file],input[type=color],select{width:240px}
.box{display:inline-block;vertical-align:top;margin:5px;padding:5px}
.box2{display:inline-block}
.scrollx{overflow-x:visible}
.scrolly{overflow-y:scroll;height:301px;margin: 5px 0px;}
.lst{width:320px;height:236px}
.tile{display:inline-block;width:99%}
.tile img{float:left;margin-right:10px;padding:0px}
.cmd{width:425px}
.br1{border-right:2px solid gray}
.bl1{border-left:2px solid gray}
}

@media (max-width:524px){#a_kategori a{width:46%}}

/*tema*/
body,a,::placeholder{color:black}
table th,table tr:hover,.box,.ok,#gnav,.foot,.gac,.lst,.btn,.btn:visited,.btn:link,.btn:active,input[type=submit],input[type=reset],button{background-color:#f3b845;color:black;background:linear-gradient(to bottom right,#f3b845,white)}
input[type=submit]:focus,input[type=reset]:focus,button:focus,.btn:focus,input[type=submit]:hover,input[type=reset]:hover,button:hover,.btn:hover{color:black;background:linear-gradient(to right,#f3b845,#b0e0e6,white);background-size:300% 100%;animation:bgScrollX 3s ease-in-out infinite}
.lst:focus,.lst:hover{color:black;background:linear-gradient(to top right,#f3b845,#b0e0e6)}
a:hover,a:focus{text-shadow:2px -1px 3px black,-1px 2px 4px black;color:#b0e0e6}
table tbody tr:nth-child(odd),  input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],input[type=file],input[type=color],select,textarea,  .gac a:hover,.gac a:focus,  hr,.aktif{color:black;background-color:#b0e0e6}
table tbody tr:nth-child(even),  input[type=text]:focus,input[type=number]:focus,input[type=date]:focus,input[type=time]:focus,input[type=password]:focus,input[type=color]:focus,select:focus,input[type=text]:hover,input[type=number]:hover,input[type=date]:hover,input[type=time]:hover,input[type=password]:hover,input[type=color]:hover,select:hover,textarea:hover,textarea:focus{background-color:#fae1b0}
#gli{background:radial-gradient(at 20% 10%,#f3b845,#b0e0e6,#f3b845,#b0e0e6)}

#gnav{top:0px}
#gli{padding:42px 5px 5px 5px}

#ss{display:block;margin:10px auto;max-width:1300px;aspect-ratio: 1300 / 300;}