:root {
  --main: #FFCC00;
  --main1:rgba(255,204,0,0.025);
  --main2:rgba(255,204,0,0.1);
  --main3:rgba(255,204,0,0.25);
  --main5:rgba(255,204,0,0.5);
  --sec: #FF6600;
  --ter: #000;
  --light:#e0e0e0;
  --light1:rgba(255,255,255,0.025);
  --light2:rgba(255,255,255,0.1);
  --light3:rgba(255,255,255,0.25);
  --light5:rgba(255,255,255,0.5);
  --dark:#121212;
  --dark1:rgba(0,0,0,0.025);
  --dark2:rgba(0,0,0,0.1);
  --dark3:rgba(0,0,0,0.25);
  --dark5:rgba(0,0,0,0.5);
  --dark9:rgba(0,0,0,0.9);
  --grey:#888888;
}
.main{
  background-color: var(--main);
}
.sec-bg{
  background-color: var(--sec);
}
.ter-bg{
  background-color: var(--ter);  
}
.light-bg{
  background-color: var(--light);  
}
.dark-bg{
  background-color: var(--dark);  
}
.grey-bg{
  background-color: var(--dark);  
}
.main-text{
  color: var(--main);
}
.sec-text{
  color: var(--sec);
}
.ter-text{
  color: var(--ter);  
}
.light-text{
  color: var(--light);  
}
.dark-text{
  color: var(--dark);  
}
.grey-text{
  color: var(--grey);  
}
@font-face {
  font-family: 'harabara';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Harabara.eot); /* For IE6-8 */
  src: local('Harabara'),
       url(../fonts/Harabara.woff2) format('woff2'),
       url(../fonts/Harabara.woff) format('woff'),
       url(../fonts/Harabara.ttf) format('truetype');
}
@font-face {
  font-family: 'arka';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/arka.eot); /* For IE6-8 */
  src: local('arka'),
       url(../fonts/arka.woff2) format('woff2'),
       url(../fonts/arka.woff) format('woff'),
       url(../fonts/arka.otf) format('otf'),
       url(../fonts/arka.ttf) format('truetype');
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(../fonts/MaterialIcons-Medium.woff2) format('woff2'),
       url(../fonts/MaterialIcons-Regular.woff) format('woff'),
       url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; 
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  -moz-osx-font-smoothing: grayscale;

  font-feature-settings: 'liga'; } html, body { margin: 0; padding: 0; height:
  100%; background: var(--dark); font-family: 'Helvetica', 'Roboto',
  sans-serif; }
.bsof{
  overflow: hidden;  
}
h1, h2, h3, h4, h5, .brand-logo{
  font-family:'harabara';
  letter-spacing:2px;
}
h1{
  font-size: 30px;
  line-height: 126%;
  margin: 26px 0;
}
h2{
  font-size:26px;
  line-height: 122%;
  margin: 22px 0;
}
h3{
  font-size:24px;
  line-height: 118%;
  margin: 18px 0;
}
h4{
  font-size:20px;
  line-height: 114%;
  margin: 14px 0;
}
h5{
  font-size:18px;
  line-height: 110%;
  margin: 10px 0;
}
html, body, p{
  color:var(--light);
}
a, .dropdown-content li a{
  color:var(--light);
}
a:hover{
  color:var(--main);
}
.dropdown-content li span{
  color:var(--light);
}
/*===============================UMUM===============================*/
.smaller-text{
  font-size:0.5rem!important;
}
.small-text{
  font-size:0.8rem!important;
}
.large-text{
  font-size:4rem;
}
.chip>img {
  float: left;
  margin: 0 0px 0 -12px;
  height: 32px;
  width: 32px;
  border-radius: 50%;
}
.chip-small{
  font-size:0.8rem;
  height:18px;
  line-height:18px;
  padding:0 6px;
  margin:0;
}
.chip>i {
  float: left;
  margin: 4px 8px -4px -5px;
  height: 32px;
  width: 18px;
  border-radius: 50%;
}
.curve{
  border-radius:15px;
}
.mt0{
  margin-top:0;
}
.mt50{
  margin-top:50px;
}
.mt100{
  margin-top:100px;
}
.mb0{
  margin-bottom:0;
}
.mb0{
  margin-bottom:10px;
}
.mb20{
  margin-bottom:20px;
}
.mtb0{
  margin-top:0;
  margin-bottom:0;
}
.no-padding{
  padding:0!important;
}
.no-margin{
  margin:0 !important
}
.fixed-action-btn{
  right: 10px;
  /*bottom: 48px;*/
}
.btn-floating{
  background-color:var(--dark);
}
.btn-floating:hover{
  background-color:rgba(255,204,0,0.9);
}
.btn-floating:hover>i{
  color:var(--dark);
}
.fab-home{
  right: 10px;
  bottom: 73px;
}
.fab-home>.btn-floating{
  background-color:var(--main);  
}
.fab-home>.btn-floating:hover{
  background-color:var(--dark);
}
.fab-home>.btn-floating:hover>i{
  color:var(--light);
}
.fab-home>.btn-floating>i{
  color:var(--dark);
}
.opaque{
  opacity:1!important;
}
.hiddendiv{
  display:none!important;
  width:0!important;
}
.fliph{
  transform:scalex(-1);
}
.flipv{
  transform:scaleY(-1);
}
.elipsis{
  white-space:nowrap;
  overflow:hidden;
  text-overflow: elipsis;
}
.elipsis::after{
  content:' ..';
}
.max50{
  max-width:50px;
}
.max100{
  max-width:100px;
}
.max150{
  max-width:150px;
}
.max200{
  max-width:200px;
}
.max250{
  max-width:250px;
}
.max300{
  max-width:300px;
}
/*=============================== NAV ===============================*/
nav{
  box-shadow:none;
  background-image:linear-gradient(to bottom, rgba(0,0,0,.1)30%,rgba(0,0,0,0)90%)!important;
}
.navbar-fixed{
  position:absolute;
}
nav .sidenav-trigger{
  margin:0;
}
.nav-wrapper{
  margin:0 30px;
}
.brand-logo{
  font-size:1.3rem!important;
  margin:8px;
  color:var(--light);
  align-items:center;
}
.brand-logo img{
  height:80px;
}
.brand-logo span{
  padding-left:10px;
  position:absolute;
  top:8px;
  line-height:1;
  white-space:nowrap;
  margin-top:8px;
}
#icon-menu>li>a>img{
  height:40px;
  margin:0px;
}
#icon-menu>li>a{
  /*, #sidenav-menu>li>a{*/
  position:relative;
  width:40px;
  height:40px;
  padding:0px;
  border-radius:50%;
  margin:8px 4px;
}
#icon-menu>li>a:hover{
/*, #sidenav-menu>li>a:hover{*/
  background-color:var(--dark3);  
}
#icon-menu>li>a>i{
  /*, #sidenav-menu>li>a>i{*/
  line-height:40px;
  margin-left:8px;
}
#icon-menu .dots {
  position:absolute;
  top:10px;
  right:12px;
  display: inline-block;
  padding: 0;
  border-radius: 50%;
  margin: 0;
  block-size: .5rem;
  inline-size: .5rem;
  border-radius: 50%;
  background-color: #db3c31;
}
@media only screen and (max-width: 992px) {
  nav .brand-logo {
    left: 0%;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  .nav-wrapper{
    /*margin:0;*/
  }
  .brand-logo img{
    height:40px;
  }
}
/*=============================== Timeline ===============================*/
#bs-main-mid{
  /*height:100vh;*/
  position:relative;
  overflow-x:hidden;
}
#bs-main, #bs-main>.col{
  margin:0;
  /*padding:0;*/
}
.timeline-container{
  position: relative;
  margin:10px;
}
/* Timeline for all sections */
#timeline {
  will-change: transform;
  touch-action: none; /* Prevent default gestures interfering */
  height: 100vh;
  width: 50vw;
  /*overflow-x: hidden;*/
  position: relative;
}
#timeline .section {
  position: relative;
  z-index: 1;
}
@media only screen and (max-width : 599px) {
  #timeline {
    width:100vw;
  }
}
/*=============================== Slide Out Sidenav ===============================*/
#slide-out, #filter{
  background-color:var(--dark);
  margin:0;
  border-radius:0;
}
/*=============================== Sidenav ===============================*/
.sidenav{
  background-color: var(--dark);
  box-shadow: none;
  overflow:scroll;
  border-radius:15px;
  margin-top:100px;
  margin-left:20px;
  width:275px;
}
.sidenav li a{
  padding:0 20px;
}
.sidenav li a, .sidenav li>a>i.material-icons{
  color:var(--light5);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sidenav li a:hover, .sidenav li a:hover>i.material-icons{
  color:var(--main);
}
.sidenav li:hover{
  background-color:var(--light1);
}

.sidenav-logo{
  height:150px;
}
.sidenav-logo>a>img{
  height:150px;
}
.sidenav-logo>a>span{
  margin-top:14px;
}
.sidenav-search{
  margin:20px;
}
/*=============================== BS Main Left Nav ===============================*/
#bs-main-left{
  margin-top:50px!important;
}
.bsnav-search{
  padding:20px;
}
.left-nav{
  position:relative;
  background-color:var(--light1);
  box-shadow: none;
  overflow:hidden;
  border-radius:15px;
  /*margin-top:70px;*/
  margin-left:7%;
  width:86%;
  height:80vh;
}
.left-nav:hover{
  overflow:auto;
}
.left-nav>li{
  float:left;
  line-height:48px;
  width:100%;
}
.left-nav>li>a{
  display: inline-block;
  width:100%;
  font-size: 14px;
  font-weight: 500;
  height: 48px;
  line-height: 48px;
  padding:0 20px;
}
.left-nav>li:hover {
  background-color: var(--light1);
}
.left-nav>li:hover>a, .left-nav>li:hover>a>i.material-icons{
  color:var(--main);  
}
.left-nav>li>a>i{
  float: left;
  height: 48px;
  line-height: 48px;
  margin: 0 32px 0 0;
  width: 24px;  
}
.left-nav>li>a>i.right{
  margin: 0 0 0 32px;  
}
.left-nav>li>a, .left-nav>li>a>i.material-icons{
  color:var(--light);
}
/*=============================== BS Main Right Nav ===============================*/
#bs-main-right{
}
#bs-main-right .container{
  width:90%;
}
.right-nav{
  position:relative;
  background-color:var(--light2);
  box-shadow: none;
  /*overflow:auto;*/
  border-radius:15px;
  margin-top:70px;
  padding:10px;
  /*margin-left:7%;*/
  width:100%;
  /*height:80vh;*/
}
.right-nav>li{
  float:left;
  text-align:left;
  line-height:48px;
  width:100%;
  padding:0 40px;
}
.right-nav>li>a{
  display: inline-block;
  width:100%;
  font-size: 14px;
  font-weight: 500;
  height: 48px;
  line-height: 48px;
  padding:0 20px;
}
.right-nav>li:hover {
  background-color: var(--dark2);
}
.right-nav>li>a>i{
  float: left;
  height: 48px;
  line-height: 48px;
  margin: 0 32px 0 0;
  width: 24px;  
}
.right-nav>li>a, .right-nav>li>a>i.material-icons{
  color:var(--light);
}
/*=============================== BS Search Box ===============================*/
#bs-search-form{
  padding: 0px 16px;
  background: var(--dark);
  transition: background-color 0.3s ease;
  border-radius: 92px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  /*margin: 0px;*/
  height:42px;      
}
#bs-search-form:hover, #bs-search-form:focus{
  background: var(--light1);
}
.bsnav-search:hover{
  background-color: transparent!important;
}
#bs-search-text{
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  border: none;
  background: transparent;
  outline: none;
  padding: 0px;
  width: 89%;
  appearance: textfield;      
  height:40px;
}
#bs-search-form>input::placeholder{
  color: var(--light3);  
  transition: color 0.3s ease;
}
#bs-search-form:hover>input::placeholder, #bs-search-form:hover>i.material-icons, #bs-search-form>input:focus::placeholder{
  color: var(--light);  
}
#bs-search-form i.material-icons {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  z-index: 10;
  color:var(--light3);
  cursor:pointer;
}
/*=============================== dropdown ===============================*/
.dropdown-content{
  background-color:var(--dark);
  z-index: 11000 !important;
  border-radius:10px;
  border:1px solid var(--light2);
  overflow:hidden;
}
.dropdown-content>li>a, .dropdown-content>li>span>a{
  color:var(--light);
}
.dropdown-content li:hover{
  background-color:var(--dark2);
}
.divider{
  background-color:var(--light2);
}

/*=============================== ddnotification ===============================*/
#ddnotification li a{
  padding:5px;
}
/*=============================== ddprofile ===============================*/
#ddprofile,#ddnotification{
  width:300px;
  color:var(--light);
}
.profile-container img{
  height:100px;
}
#ddprofile .profile-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}
/* Dropdown links */
#ddprofile li a {
  color: var(--light);
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
  padding:20px;
  display: flex;
  align-items: center;
}
#ddprofile li:hover{
  background-color:transparent!important;
}
#ddprofile li a:hover {
  background-color: var(--dark2);
  color: var(--light);
}
#ddprofile li a i.material-icons {
  margin-right: 12px;
  font-size: 20px;
}
/*=============================== Swiper  ===============================*/
.swiper {
  height: 100vh;
  width: 100%;
}

/* Slide full viewport with background image */
.swiper-slide {
  background-size: cover;
  background-position: center;
  height: 100vh!important;
  display: flex;
  flex-direction: column; /* stack content vertically */
  justify-content: flex-end; /* push content to bottom */
  position: relative;
  color: white;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  padding: 0; /* optional padding */
  box-sizing: border-box;
}
.swiper-slide .chip{
  /*text-shadow:none;*/
  background-color:var(--dark5);
  color:var(--light);
  border:1px solid var(--dark5);
  transition: all 0.3s;
}
.swiper-slide .chip:hover{
  background-color:var(--main5);
  color:var(--dark);
  border:1px solid var(--dark);
  text-shadow:none;
}

.swiper-slide .chip-title{
  background-color:rgba(0,0,0,0.5);
  color:var(--main);
}
/* Navigation buttons on left side, stacked vertically */
.swiper-button-prev,
.swiper-button-next {
  width: 44px;
  height: 44px;
  color: rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 10px; /* move to left side */
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: rgba(0,0,0,0.7);
}

/* Stack buttons vertically */
.swiper-button-prev {
  top: 50%;
  transform: translateY(-100%);
}

.swiper-button-next {
  top: 52%;
  transform: translateY(0);
}

/* Use up/down arrows for vertical navigation */
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 24px;
  font-weight: bold;
  color: rgba(255,255,255,0.4);
  text-shadow: none;
}

.swiper-button-prev::after {
  content: '▲'; /* up arrow */
  position:absolute;
  top:8px;
}

.swiper-button-next::after {
  content: '▼'; /* down arrow */
}
.swiper-pagination-bullet-active{
  color:rgba(255,255,255,0.5)!important;
  background-color:rgba(0,0,0,0.7)!important;
  opacity:1!important;
}
.swiper-pagination-bullet{
  color:rgba(255,255,255,0.2);
  background-color:rgba(0,0,0,0.2);
  transition: opacity 2s ease-in-out, background-color 0.3s ease, color 0.3s ease;
  opacity:0.9;
  width:44px;
  height:44px;
  padding-top:10px;
}
.swiper-pagination-bullet:hover{
  color:rgba(255,255,255,0.3);
  background-color:rgba(0,0,0,0.7);
}
.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets{
  top:50%;
}
@media only screen and (max-width : 599px) {
  .swiper-button-next, .swiper-button-prev{
    display:none;
  }
}
.chip-container{
  margin:0 -4rem;
  text-align:center;
}
/*=============================== Section ===============================*/
.swipe-top{
  justify-content:flex-start;
  /*height:100vh!important;*/
}
.swipe-top>.section-content{
  height:100vh;  
  align-content:center;
}
.section-content {
  position:relative;
  background: rgba(0, 0, 0, 0.75);
  padding: 1rem 4rem;
  width: 100%;
  z-index: 2;
  margin:0 auto;
  overflow:hidden;
  border:0px solid var(--dark1);
  /* Optional: add margin bottom if you want space from bottom edge */
  /*margin-bottom: 40px;*/
}
.section-content h2 {
  margin: 0;
  font-size: 2.0rem;
}
.section-content .harga{
  position:absolute;
  top:0;
  right:4rem;
  font-size:2.5rem;
  line-height:1;
  font-family:'harabara';
  letter-spacing:4px;
  background-color:var(--dark5);
  padding:8px;
}
.section-content .harga-text{
  font-family: 'Fantasy', 'Helvetica', 'Roboto';
  font-size: 0.8rem;
  line-height: 1;
  padding: 0;
  margin: 0 5px;
  letter-spacing: normal;
  width: 20px;
  display: inline-block;
}
.section-content .juta{
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
  margin: 0;
}
.section-content p {
  font-size: 1.2rem;
  opacity: 0.9;
  margin:0.5rem 0;
}
@media only screen and (max-width : 599px) {
  .section-content{
    /*max-width:85%;*/
  }
  .section-content .harga{
    right:0;
  }
  .section{
    /*padding-bottom:60px;*/
    /*width:100vw;*/
  }
}
.scroll-down{
  content: '▼'; /* down arrow */
  width:100%;
  display:block;
  position:relative;
  left:50%;
}
.peta-container>img{
  width:100%;
  height:80vh;
  object-fit:cover;
}

/*=============================== Banner Promo  ===============================*/
#banner-promo {
  position: relative;
  width: 100%; /* or your desired width */
  height: 150px; /* adjust to your image height */
  overflow: hidden;
  border-radius:15px;
}
#banner-promo img.responsive-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* responsive fill */
  z-index: 1;
  transition: opacity 2s ease-in-out;
}
#banner-promo img.active {
  z-index: 3;
  opacity: 1;
}
#banner-promo img.hide {
  z-index: 1;
  opacity: 0;
}
/*=============================== Villa Pilihan  ===============================*/
#vp-section{
  margin:50px;
  margin-top:100px;
}
.vp-container{
  position:relative;;
  height:100px;
  overflow:hidden;
  padding:1px!important;
  margin:0px!important;
  transition: opacity 1s;
  opacity:0.5;
}
.vp-container:hover{
  opacity:1;
}
.vp-container img{
  display:block;
  width:100%;
  height:100px;
  object-fit:cover;
  margin:auto;
}
.vp-title{
  font-family: 'harabara';
  font-size:1.3rem;
  text-align:right;
  letter-spacing:3px;
  line-height:0.8;
  /*color:#fff;*/
  color:#ffcc00;
  opacity:1;
  position:absolute;
  bottom:5px;
  right:5px;
}
.vp-caption{
  position: absolute;
  bottom: 0;
  right: 0;
  /*background-color: rgba(255, 204, 0, 0.8);*/
  background-color: rgba(0, 0, 0, 0.8);
  padding: 0 5px;
  font-family: 'harabara';
}
.vp-promo img{
  object-fit:contain;
}
.vp-diskon{
  font-size:3rem;
}
.vp-deskripsi{
  font-size:1rem;
  font-family:'Roboto';
  color:#fff;
}
/*=============================== Login Form  ===============================*/
#bs-login-form{
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  /*overflow: hidden;*/
  border-radius:15px;
  margin-top: 100px;
  width: 80%;
  padding:0 30px;
  padding-top:30px;
  position:absolute;
  top:0;
  left:10%;
}
#bs-login-form .input-field{
  padding: 0px 30px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 92px;
  position: relative;
  z-index: 1;
  height:45px;      
  width:100%;
}
@media only screen and (max-width : 599px) {
  #bs-login-form .input-field{
    height:42px;      
  }
}
#bs-login-form input{
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  border: none;
  background: transparent;
  outline: none;
  padding: 0px;
  width: 100%;
  color: rgba(255, 255, 255, 0.9);
  caret-color: rgb(255, 59, 92);
  appearance: textfield;      
}
#bs-login-form .toggle-password{
  color:rgba(255,255,255,0.5);
  float: right;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  z-index: 2;
}
#bs-login-form .toggle-password:hover, #bs-login-form .toggle-password:focus{
  color:rgba(255,255,255,0.9);
}
/*=============================== ALL INPUT  ===============================*/

input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea{
  color:#444;
  background-color: #fff;
  font-size:1.5rem;
}
input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]){
  border-bottom: 1px solid var(--ter);
  -webkit-box-shadow: 0 1px 0 0 var(--ter);
  box-shadow: 0 1px 0 0 var(--ter);  
}
input:not([type]):focus:not([readonly])+label, input[type=text]:not(.browser-default):focus:not([readonly])+label, input[type=password]:not(.browser-default):focus:not([readonly])+label, input[type=email]:not(.browser-default):focus:not([readonly])+label, input[type=url]:not(.browser-default):focus:not([readonly])+label, input[type=time]:not(.browser-default):focus:not([readonly])+label, input[type=date]:not(.browser-default):focus:not([readonly])+label, input[type=datetime]:not(.browser-default):focus:not([readonly])+label, input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label, input[type=tel]:not(.browser-default):focus:not([readonly])+label, input[type=number]:not(.browser-default):focus:not([readonly])+label, input[type=search]:not(.browser-default):focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label{
  color:var(--grey);
}
.input-field>label:not(.label-icon).active{
  transform:translateY(-16px) translateX(10px) scale(0.8);
}
.input-field .prefix.active {
  color: var(--main);
}
.input-field .prefix{
  cursor:pointer;
}
input:not([type]), 
  input[type=text]:not(.browser-default), 
  input[type=password]:not(.browser-default), 
  input[type=email]:not(.browser-default), 
  input[type=url]:not(.browser-default), 
  input[type=time]:not(.browser-default), 
  input[type=date]:not(.browser-default), 
  input[type=datetime]:not(.browser-default), 
  input[type=datetime-local]:not(.browser-default), 
  input[type=tel]:not(.browser-default), 
  input[type=number]:not(.browser-default), 
  input[type=search]:not(.browser-default), 
  textarea.materialize-textarea{
  /*background-color: #1e1e1e;  */
  background-color:transparent;
  color:#e0e0e0;
  }
input:not([type]):focus:not([readonly]), 
  input[type=text]:not(.browser-default):focus:not([readonly]), 
  input[type=password]:not(.browser-default):focus:not([readonly]), 
  input[type=email]:not(.browser-default):focus:not([readonly]), 
  input[type=url]:not(.browser-default):focus:not([readonly]), 
  input[type=time]:not(.browser-default):focus:not([readonly]), 
  input[type=date]:not(.browser-default):focus:not([readonly]), 
  input[type=datetime]:not(.browser-default):focus:not([readonly]), 
  input[type=datetime-local]:not(.browser-default):focus:not([readonly]), 
  input[type=tel]:not(.browser-default):focus:not([readonly]), 
  input[type=number]:not(.browser-default):focus:not([readonly]), 
  input[type=search]:not(.browser-default):focus:not([readonly]), 
  textarea.materialize-textarea:focus:not([readonly]){
  border-bottom: 1px solid var(--main);    
  box-shadow: 0 1px 0 0 var(--main);
  }
input:not([type]):focus:not([readonly])+label, 
  input[type=text]:not(.browser-default):focus:not([readonly])+label, 
  input[type=password]:not(.browser-default):focus:not([readonly])+label, 
  input[type=email]:not(.browser-default):focus:not([readonly])+label, 
  input[type=url]:not(.browser-default):focus:not([readonly])+label, 
  input[type=time]:not(.browser-default):focus:not([readonly])+label, 
  input[type=date]:not(.browser-default):focus:not([readonly])+label, 
  input[type=datetime]:not(.browser-default):focus:not([readonly])+label, 
  input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label, 
  input[type=tel]:not(.browser-default):focus:not([readonly])+label, 
  input[type=number]:not(.browser-default):focus:not([readonly])+label, 
  input[type=search]:not(.browser-default):focus:not([readonly])+label, 
  textarea.materialize-textarea:focus:not([readonly])+label{
  color:var(--main);
}
.select-wrapper input.select-dropdown:focus {
  border-bottom: 1px solid var(--main);
}
table {
  background-color: var(--dark);
  color: var(--light);
}
table tr th {
  color: var(--light);
}
thead{
  background-color:var(--dark);
}
table.highlight>tbody>tr:hover, table.striped>tbody>tr:nth-child(odd):hover {
  background-color: var(--light2);
}
table.striped>tbody>tr:nth-child(odd) {
  background-color: var(--light1);
}
.btn, .btn-large, .btn-small {
  background-color: var(--dark);
  color: var(--light)!important;
}
.btn:hover, .btn-large:hover, .btn-small:hover {
  background-color: var(--ter);
  color: var(--main)!important;
}
.btn:focus, .btn-large:focus, .btn-small:focus, .btn-floating:focus, .btn-floating:focus>i{
  background-color: var(--dark);
  color: var(--main)!important;  
}
::-webkit-scrollbar{
  width: 10px;
  height:10px;
  background-color: var(--dark);
}
::-webkit-scrollbar-track{
  background-color:var(--light1);
}
::-webkit-scrollbar-thumb{
  background-color:var(--light2);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:horizontal{
  background-color:var(--light2);
  border-radius: 10px;
}
input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
/*input:-internal-autofill-selected{*/
-webkit-box-shadow:inset 0px 50px 50px 50px #212121 !important;
-webkit-text-fill-color:#fff;
transition: background-color 99999s ease-in-out 0s;
}
/*============================= Pill Boxes Checkbox =============================*/
.pill-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0px;
}
.jcenter{
  justify-content:center;
}
.pill-checkboxes input[type="checkbox"]{
  display: none;
}
.pill-checkboxes label {
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 50px;
  border: 2.5px solid var(--grey);
  color: var(--grey);
  font-weight: 500;
  font-size:1rem;
  user-select: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.pill-checkboxes input[type="checkbox"]:checked + label{
  background-color: var(--grey);
  color: white;
  box-shadow: 0 0 2px var(--dark);
  border-color: var(--dark);
}
/*============================= Pill Boxes Radio =============================*/
.pill-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0px;
}
.pill-radio.small [type="radio"]:not(:checked)+span, .pill-radio.small [type="radio"]:checked+span{
  padding:5px;
  font-weight: 400;
  font-size:.8rem;
  line-height:1;
  margin-bottom:0px;
}
.pill-radio.small [type="radio"]:not(:checked)+span{
  border: 1.5px solid var(--grey);
}
.pill-radio.small [type="radio"]:checked+span{
  border: 1.5px solid var(--main);
}
.pill-radio [type="radio"]:not(:checked)+span{
  cursor: pointer;
  padding: 15px;
  border-radius: 50px;
  background-color:var(--dark1);
  border: 2.5px solid var(--grey);
  color: var(--grey);
  font-weight: 500;
  font-size:1rem;
  user-select: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  line-height:0;
}

.pill-radio [type="radio"]:checked+span{
  cursor: pointer;
  padding: 15px;
  border-radius: 50px;
  background-color:var(--dark5);
  border: 2.5px solid var(--main);
  color: var(--main);
  font-weight: 500;
  font-size:1rem;
  user-select: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  line-height:0;
}
.pill-radio [type="radio"]:not(:checked)+span:before, 
.pill-radio [type="radio"]:not(:checked)+span:after, 
.pill-radio [type="radio"]:checked+span:before,
.pill-radio [type="radio"]:checked+span:after{
  display:none;
}

/*============================= TEAM =============================*/
.team-img{
  border-radius:50%;
  height:100px;
}
/*============================= WHATSAPP BUTTON =============================*/
.wa-btn{
  background-color:#009688!important;
  color:#fff!important;
}
.wa-btn:hover{
  background-color:#1d7d74!important;  
  color:#fff!important;
}
.wa-btn>img{
  width: 30px;
  height:auto;
  float: left;
  left:-15px;
  top:5px;
  margin:5px 0;
  color: #fff;
}
.wa-btn>img:hover{
  filter: invert(100%);
}

/*============================= COPYRIGHT =============================*/
.copyright{
  color:#444!important;
  text-align:center!important;
}
.copyright>a{
  display:inline!important;
  color:#666!important;
}
.copyright>a:hover{
  color:#444!important;
}
/*============================= CONTACT FORM =============================*/

#contactForm .input-field{
  padding: 0px 16px;
  background: var(--dark);
  transition: background-color 0.3s ease;
  border-radius: 92px;
  /*position: relative;*/
  /*overflow: hidden;*/
  z-index: 1;
}
#contactForm .row{
  margin-bottom:0;
}
#contactForm input, textarea.materialize-textarea{
  padding-left:10px;
  background-color:transparent!important;
  margin-bottom:0;
  width:90%;
  border-bottom:1px solid var(--dark1);
}
#contactForm .row:has(input:focus) .input-field,
#contactForm .row:has(textarea.materialize-textarea:focus) .input-field{
  border:2px solid var(--main);
  transition: background 0.3s ease;
}
#contactForm input:focus, textarea.materialize-textarea:focus:not([readonly]){  
  border-bottom:0px solid #000;
  box-shadow:0 0px 0 0 #000;
}
#contactForm label{
  padding-left:10px;
}
#contactForm .input-field:hover, #contactForm .input-field:focus{
  background: var(--dark2);
}
#contactForm textarea.materialize-textarea:focus{
  transition:none!important;
}
#contactForm>input::placeholder{
  color: var(--light3);  
  transition: color 0.3s ease;
}
#contactForm:hover>input::placeholder, #contactForm:hover>i.material-icons, #contactForm>input:focus::placeholder{
  color: var(--light);  
}
/*============================= Collection =============================*/
.collection{
  border:1px solid var(--light2);
}
/*.collection, .collection .collection-item:first-child{
  border:0;
}*/
.collection .collection-item{
  border-bottom:1px solid var(--light2);
}
.collection .collection-item{
  background-color:var(--dark1);
}
/*============================= Villa Item =============================*/
#list_villa{
  padding:10px;
  transition:all .5s ease-in-out;
}
.loader{
  width:100%;
  height:100%;
  background-color:#000;
  visibility:hidden;
  opacity:0;
}
.loader{
  opacity:1;
  visibility:visible;
  transition: opacity .25s ease-in-out;
}
#list_villa .villa_item{
  padding:0
}
#list_villa .card{
  background-color:var(--dark1);
  margin:10px;
  transition:all .5s ease-in-out;
}
#list_villa .card-content{
  padding:0;
}
#list_villa .villa-caption{
  padding:10px;
}
#list_villa .img-container{
  width:100%;
  height:300px;
  overflow:hidden;
  border-radius:10px;
}
#list_villa .img-container img{
  height:100%;
  transition:all .25s ease-in-out;
}
#list_villa .img-container::after{
  content: '';
  background-color: var(--dark2);
  height: 300px;
  display: block;
  width: 100%;
  top: 0;
  position: absolute;
  left: 0;
  transition:all .25s ease-in-out;
}
#list_villa .img-container:hover > img{
  transform: scale(1.05);
}
#list_villa .img-container:hover::after{
  background-color:transparent;  
}
#list_villa .btn-floating{
  position:absolute;
  right:10px;
  bottom:70px;
}
@media only screen and (max-width : 599px) {
  #list_villa .img-container{
    /*border-radius:0;*/
    height:150px;
  }
  #list_villa .btn-floating{
    position:absolute;
    right:10px;
    bottom:40px;
  }
  #list_villa .card{
    margin:5px;
  }
}
/*=============================== CARD ===============================*/
.card{
  background-color:var(--dark);
  border-radius:15px;
}
/*============================= DASHBOARD =============================*/

/*============================= SUMMARY =============================*/
#summary{
  display: flex;
  flex-wrap: wrap;  
}
#summary .col{
  display:flex;
  flex-direction:column;
}
#summary .card{
  width:100%;
  display: flex;
  flex-direction:column;
}
#summary .card-content{
  flex:1;
  max-height:100px;
  overflow-y:hidden;
  padding:12px;
  flex-direction:column;
}
#summary ul{
  margin:0;
}
#summary ul li{
  white-space:nowrap;
}
#summary h1{
  margin:5px 0;
}
.underline::after{
  content: "";
  width: 40%;
  height: 2px;
  background: rgba(255,255,255,0.5);
  position: absolute;
  top: 34px;
  left: 13px;
}
.underline2::after{
  content: "";
  width: 40%;
  height: 2px;
  background: rgba(0,0,0,0.5);
  position: absolute;
  top: 34px;
  left: 13px;
}
.img-container img{
  height:40px;
}
.muttm .img-container a{
  padding-top:10px;
  height:64px;
}
.muttm .circle{
  background-color:#fff;
}
#summary .card .card-content img.circle{
  height:80px;
}
#recentUsers{
  margin-top:0;
}
#recentUsers li{
  line-height:1.4rem;
}
@media only screen and (max-width : 599px) {
  .section{
    position:relative;
  }
  #summary .card .card-content img.circle{
    height:40px;
  }
  #recentUsers li{
    font-size:11px;
  }
}

/*user_view*/
#userForm .foto-container{
  height:260px;
  width:260px;
  padding:20px;
  margin:0 auto;
  overflow:hidden;
}
#userForm .foto-container img{
  width:100%;
  height:auto;
}
/*============================= MODAL =============================*/
.modal{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  top:0!important;
  left:0!important;
  transform:none!important;
}
.modal, .modal .modal-footer{
  background-color:var(--dark);
}
/*============================= Preview Photo =============================*/
#previewContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.preview-item {
  position: relative;
  width: 120px;
  height: 90px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  cursor: pointer;
}
.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.delete-photo-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: rgba(255, 0, 0, 0.8);
  border: none;
  border-radius: 50%;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background-color 0.3s ease;
}
.delete-photo-btn:hover {
  background-color: rgba(255, 0, 0, 1);
}
.delete-photo-btn i.material-icons {
  font-size: 16px;
  color: white;
  line-height: 16px;
  user-select: none;
  pointer-events: none;
}
/*============================= Pengaturan =============================*/
#pengaturan{
  margin:0 20px;
}
#pengaturan .title-collection{
  margin-left:20px;
}
#pengaturan .collection{
  border-radius:10px;
}
#pengaturan .collection-item{
  color:var(--light);
  border-bottom:0px;
  padding:20px;
}
#pengaturan a.collection-item:not(.active):hover{
  background-color:var(--light1);
  color:var(--main);
}
#pengaturan .foto-profil-container{
  height:100px;
  text-align:center;
  margin:20px;
}
#pengaturan .foto-profil-container img{
  border-radius:50%;
  height:100%;
}
/*============================= Pengaturan =============================*/
/*.filter{
  opacity:0;
  transition:opacity 0.5s ease-in-out;
}
.filter.fade_in{
  opacity:1;
}*/