/* disable pull to refresh */
body {overflow-y: hidden;

}

/* fill the screen */
html {height: 100%}
body,
 .ksystemScr3098container,
 .masterContainer3098,
 .masterTemplate {height: inherit;}
 
.ksWidget,
 .training > div {display:none;}
.training > .WSignIn {display: block;}

.ks-footer {background-color: white; /*position: absolute; height: 60px;*/ border-top: 2px solid #45C089;}
.nofooter .ks-content {padding-bottom: 0px;}
.nofooter #main-footer {display: none !important;}

/* Buttons & icons */
.KImageGallery >.Wt-popup >a {margin-right: 1rem;}

/* KsystemWidget Containers */
.ksystemScr2190container,
.ksystemScreencontainer {width:100%; height:100%;}

/* KMenuWidget menggunakan flexbox */
.ksystemMenuContainer {height: 100%;}

.masterTemplate {display: flex; flex-flow: column;}
/* ks-content using flexbox (asalnya pakai bootstrap-column)
, float dicoba gagal (wrapped, kalau width tidak cukup)
, display inline gagal (wrapped)
, ul-li gagal
 */
.ks-content {display:flex; flex-flow:row; justify-content:space-around; overflow: hidden; flex:9 1 auto;}
.ks-content > * {flex: 0 1 auto; /*margin:auto;*/ padding: 0 5px;}
.ks-content > #left-menu {flex: 0 0; height: 100%;}
.ks-content > #screen-area {flex: 5 1 auto;}
@media screen and (max-width: 767px) {
 .ks-content > #left-menu {max-width: 100%;}
}

/* Menu kiri atas di logo */
/*.header-01 > .menu.dropdown:hover > .dropdown-menu {display: block !important; padding: 0;}*/
.header-01 hr {margin:0.5em}
[data-toggle="dropdown"] {cursor: pointer;}

/* navbar 
a.navbar-link > i.fa {margin: 8px 0 0;}
.navbar-brand img {margin: -15px 0 0 -15px;}
.navbar-header .navbar-btn, .navbar-header [data-target="#mycollapse"] {margin-left: 15px;}
.navbar-fixed-top {z-index: 30;}
.ks-menubar .dropdown {background-color: white;}
.navbar-toggle.toggle-left {padding: 12px 10px; margin-left: 15px; float: left;}*/
#main-header {border-bottom: 2px solid #45C089; padding: 0; display:none;}
#main-header .navbar-form {margin: 0;}
#main-header .navbar-nav { flex: 0 0 auto; flex-direction: row; }
#main-header .navbar-nav.header-02 {flex: 9 1 auto;}

/* navbar pakai list BELUM BERHASIL
#main-header.list > ul {list-style: none; padding: 0 10px; margin: 0;}
#main-header.list > ul > li {display: inline-block;}
#main-header.list > * {display: list-item;}
#main-header.list > .header-01 {float: left;}
#main-header.list > .header-02 {_float: left;}
#main-header.list > .header-03 {float: right;}*/

#main-header > ul.header-01 > li:last-child {display: none!important;}

/* navbar pakai display:flex (FlexBox) */
#main-header.flexbox {
	display: flex;
	flex-flow:row nowrap; /*default is row,nowrap*/
	justify-content:space-around; /* default is flex-start */
}
#main-header.flexbox > * {
	flex: 1 1 auto;
	padding: 0 2px;
	align-items: stretch; /*default is stretch*/
	margin: auto; /*harus ada kalau parent:justify-content=space-around*/
	position: relative;
}
#main-header.flexbox > ul {list-style: none;}
#main-header.flexbox > ul > li {display: unset;/*inline-flex;*/}
#main-header.flexbox > .header-01 a[data-toggle='search'] {display: none!important;}
@media screen and (min-width: 768px) {
  #main-header.flexbox > .header-01 {flex: 0 0 200px;}
}
/*
#main-header.flexbox > .header-03 {flex: 1 2 5em;}
#main-header.flexbox > ul.header-03 > li:first-child {float: right;}
#main-header.flexbox > ul.header-03 {text-align: right; _direction: rtl;}
#main-header.flexbox > ul.header-03 > li {_direction: ltr; _float: right;}
*/
#main-header.flexbox > ul.header-03 {text-align: right; min-width: 108px; padding: 0px;}
#main-header.flexbox > .header-02 {flex: 8 1 auto;}
.beranda #main-header.flexbox > .header-02 {_display: none;}
.admin #main-header.flexbox > .header-03 > li:not(:first-child) {display: none;}
/*.admin #main-header.flexbox > .header-03 > li[role='notifikasi'] {display: inline-block;}*/
.admin #main-header.flexbox > .header-03 > li[role='notifikasi'] > ul:empty {background: grey;}
.header-03 > * {margin-right: 5px;}
.header-03 div {display: inline-block;}
@media screen and (max-width: 767px) {
	#main-header.flexbox {height: 50px;}
	#main-header.flexbox > .header-03 #search-header {display: none;}
}
/*#main-header.in-search*/
#main-header.in-search > .header-01 a[data-toggle='search'] {display: inline-block!important;}
#main-header.in-search > .header-01 a[data-toggle="dropdown"] {display: none!important;}
#main-header.in-search > .header-02 {display: none;}
#main-header.in-search > .header-03 {flex: 5;}
#main-header.in-search > .header-03 > li:first-child
,#main-header.in-search > .header-03 #search-header {display: inline-block!important;}
#main-header.in-search > .header-03 > li {display: none;}
#main-header.in-search > .header-03 * {width: 100%;}

.KWidgetList {height: 100%; overflow: auto;}
#screen-area {padding: 0; overflow: auto; position: relative;}
.ksystemScreencontainer {overflow:auto;}
[name="monster"] { overflow: auto; } /* horizontal scroll-bar untuk scr */
.detailBack {position: absolute; top: 10px; left: 10px; z-index: 10;}

/* pindahan dari layout5 */
.image-container {overflow: unset; height: 100%;}

/* for fields directly under .image-container */
.image-container > .box-inner-row::before {
	clear: both;
}


/* Left Menu */
/*.sidebar-form {
  border-radius: 2px;
  border: 1px solid #dbdbdb;
  margin: 10px;
}*/

/* Wt-auth */
div.Wt-form.Wt-auth-login {width: 250px; margin: 0px; background-color:white}
.Wt-auth-login > h2 {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background: #3d9970;
  box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.2);
  padding: 0px 0px;
  text-align: center;
  font-size: 26px;
  font-weight: 300;
  color: #fff;
}

.Wt-auth-login,
.Wt-auth-registration {font-size: large;}
.Wt-auth-login > h2,
.Wt-auth-login > p,
.Wt-auth-login legend {display: none;}
.Wt-auth-login [data-object-name="login"] {
  width: -webkit-fill-available;
  background-color: rgb(9, 255, 0);
  box-shadow: 0 8px 16px 0 rgba(255, 0, 0, 0.2), 0 6px 20px 0 rgba(255, 0, 0, 0.19);
}
.Wt-auth-login .form-group.row,
.Wt-auth-registration .form-group.row {background-color: beige;}

.modal-header > .close { order: 2; }

.Wt-auth-login .Wt-fields {
  padding: 10px 20px;
  background: #fff;
  color: #444;
  background-color: #eaeaec !important;
  margin: 0;
}

@media screen and (max-width: 850px) {
  .Wt-auth-login .Wt-fields label,
  .Wt-auth-registration .Wt-fields label {display: none;}
  .Wt-auth-login .Wt-fields label:last-of-type {display: inherit;}
  .Wt-auth-login {width:100%; padding-top: 0; padding-bottom: 0;}
}
.Wt-form.Wt-auth-login .Wt-fields label {text-align: left; float: none;}
.Wt-form.Wt-auth-login .Wt-info {text-align: left;}
.Wt-form.Wt-auth-login .Wt-fields input[type="checkbox"] {
    margin: -1em 0 0 11em;
    float: right;
}

.Wt-form.Wt-auth-login .Wt-buttons {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  padding: 10px 20px;
  background: #fff;
  color: #444;
  margin: 0;
}
.Wt-form.Wt-auth-login .Wt-buttons.login {padding-right: 0; padding-left: 0;}
.Wt-auth-login .login button {
  width: 100%;
  background: #3d9970;
  color: #fff;
  font-size: 2rem;
}


/* Wt-auth registration */
@media screen and (max-width: 375px) {
  .Wt-form.Wt-auth-registration,
  .Wt-form.Wt-auth-lost-password,
  .Wt-form.Wt-auth-update-password {max-width:90vw;}
  /*.Wt-form.Wt-auth-registration .Wt-fields,
  .Wt-form.Wt-auth-lost-password .Wt-fields {width: 8em;}*/
}
@media screen and (min-width: 376px) and (max-width: 639px) {
  .Wt-form.Wt-auth-registration,
  .Wt-form.Wt-auth-lost-password,
  .Wt-form.Wt-auth-update-password {max-width:80vw;}
}

/* shopping cart / booking list */
.fa > .badge {
  background-color: orangered;
  border-radius: 2rem;
}

/* Gaya dasar gambar */
.menu.kat > a > img {
  border-radius: 12px;
  transition: transform 0.4s ease-in-out, filter 0.3s ease, box-shadow 0.3s ease;
  transform: scale(1) rotate(0deg) translateZ(0);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  filter: saturate(90%);
  will-change: transform, filter, box-shadow;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Efek hover modern yang lebih halus */
.menu.kat > a > img:hover {
  animation: floatHover 3s ease-in-out infinite;
  filter: saturate(120%) drop-shadow(0 5px 15px rgba(81, 203, 238, 0.4));
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  cursor: pointer;
} 

/* Keyframe animasi mengambang halus */
@keyframes floatHover {
  0% {
    transform: scale(1) rotate(0deg) translateY(-0px);
  }
  50% {
    transform: scale(1.05) rotate(1.1deg) translateY(-5px);
  }
  100% {
    transform: scale(1) rotate(0deg) translateY(-0px);
  } 
}


/* katmenu, kategori menu */
.katmenu {position: sticky; top: 0px; z-index: 10;}
div.katmenu .kat.bar {overflow: auto hidden; white-space: nowrap;}
.kat.grid {display:grid}
@media screen and (min-width: 721px) {
.kat.grid { grid-template-columns: repeat(5,20%) }
.kat > a > img {height:calc(calc(100vw - 20px) / 7);}
.kat.rectangle > a > img {height:calc(calc(100vw - 20px) / 15);}
kat.grid.small-icon { grid-template-columns: repeat(10,10%) }
.kat.small-icon > a > img {height:calc(calc(100vw - 20px) / 12);}
.kat.small-icon.rectangle > a > img {height:calc(calc(100vw - 20px) / 25);}
}
@media screen and (max-width: 720px) {
.kat.grid { grid-template-columns: repeat(2,50%) }
.kat > a > img {height:calc(100vmin / 2.4);}
.kat.rectangle > a > img {height:calc(100vmin / 5);}
.kat.grid.small-icon { grid-template-columns: repeat(5,20%) }
.kat.small-icon > a > img {height:calc(calc(100vw - 20px) / 3);}
.kat.small-icon.rectangle > a > img {height:calc(calc(100vw - 20px) / 6);}
}
/*ul.katmenu {list-style:none;padding:0 0;margin:10px 0; white-space: nowrap; overflow-x: auto; overflow-y: hidden;}*/
.kat > a > * {display:block;}
.kat.bar > a > img {display:none;}
.admin .katmenu {display: none;}

.katmenu .kat.scroll-kanan {overflow: auto hidden; white-space: nowrap;}
/*.katmenu .kat.scroll-kanan > a > span {display:none;}*/

/*.katmenu .kat.small-icon > a > span {display:none;}*/

/* katmenu jejak (breadcrumb) */
.katmenu .jejak {font-size: 1.2em;}
.katmenu .jejak > a::after {content: ">>";}

/* tombol navigasi untuk mobile */
.DetWidget {position: relative}
.DetWidget > .prev {opacity:.5; position:absolute; left:0; top:0;}
.DetWidget > .next {opacity:.5; position:absolute; left:0; bottom:0;}

.masterbox {position: relative;}
.masterbox > .masternav {opacity:.5; position:absolute; left:0; top:0;}
.masterbox > .masternav > * {display:block;}

/* Etalase aka ShopDisplay */
.KInfiniteScroll {
  list-style: none; padding-left:0px;
  overflow:auto;
  display:grid;
  grid-column-gap:1%;
}
.KInfiniteScroll > * {
  /*height:350px;*/
  /*grid-auto-rows:minmax(max-content,auto);*/
  /*grid-auto-rows:fit-content(500px);*/
  grid-auto-rows:min-content;
}
@media screen and (min-width: 768px) {
  .KInfiniteScroll {
    height:70vh;
    grid-template-columns: repeat(5,19%);
  }
}
@media screen and (max-width: 767px) {
  .KInfiniteScroll {
    height:90vh;
    grid-template-columns: repeat(2,49%);
  }
}
.KInfiniteScroll .image-container {height:auto; overflow:hidden;}
input[type=checkbox] {transform: scale(1.6);}

/* Menu kategori */
.kat.menu .KPicture {
	padding:.8em;
}
.kat.menu .KPicture img {
	cursor: pointer;
}
.kat.menu .KPicture span {
	position: relative;
	left:20%; top:-50%;
}

.co-name {
	position: absolute;
  	padding-left:65px;
	bottom: -.4em;
	color: black;
}

.WT_showHtml, .showHtml {
  height: 93vh;
}