/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

/* BEGIN: global paragraph margin override — hapus blok ini untuk undo */
p {
  margin-bottom: 0.5em;
}
/* END: global paragraph margin override */

.menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo svg,
.app-brand-logo.demo img {
  width: 34px;
  height: 34px;
}

.yonery-logo-img {
  display: block;
  object-fit: contain;
}

.app-brand-text.demo {
  font-size: 1.375rem;
}

:root,
[data-bs-theme='light'] {
  /* --yp-logobg: #66be34; */

  --yp1: #66be34; /* background header  */
  --yp2: #064f2a; /* background menu */
  --yp3: #087437; /* menu aktif */

  --yp-logobg: #087437;
  --yp-menubg: #064f2a;
  --yp-menuselected: #087437;
  --yp-menutextcolor: #fff;

  --yonery-mint: #e9f6ed;
  --yonery-green: #72d21f;
  --yonery-green-rgb: 114, 210, 31;
  --yonery-forest: #008c4a;
  --yonery-forest-deep: #004f2b;
  --yonery-red: #ff1a0f;
  --yonery-orange: #ff7a21;
  --yonery-blue: #484bd7;
  --yonery-lime: #9bef00;

  --bs-primary: var(--yonery-green);
  --bs-primary-rgb: var(--yonery-green-rgb);
  --bs-link-color: var(--yonery-forest);
  --bs-link-hover-color: #04562f;
}

body {
  background: url('/assets/img/backgrounds/mega-mendung-background.jpg');
  background-repeat: repeat;
}

.text-primary {
  color: var(--yonery-green) !important;
}

.btn-primary {
  /* --bs-btn-color: #10190f; */
  --bs-btn-color: var(--yonery-forest);
  /* --bs-btn-bg: var(--yonery-lime); */
  --bs-btn-bg: rgba(var(--yonery-forest), 0.14);
  /* --bs-btn-border-color: var(--yonery-forest); */
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--yonery-forest);
  --bs-btn-hover-border-color: var(--yonery-forest);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--yonery-forest-deep);
  --bs-btn-active-border-color: var(--yonery-forest-deep);
  --bs-btn-disabled-bg: var(--yonery-lime);
  --bs-btn-disabled-border-color: var(--yonery-forest);
  box-shadow: 0 0.125rem 0.375rem rgba(0, 140, 74, 0.35);
}

.btn-label-secondary {
  --bs-btn-color: var(--yonery-forest);
  --bs-btn-bg: rgba(var(--yonery-green-rgb), 0.14);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--yonery-forest);
  --bs-btn-hover-border-color: var(--yonery-forest);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--yonery-forest-deep);
  --bs-btn-active-border-color: var(--yonery-forest-deep);
  --bs-btn-disabled-bg: var(--yonery-lime);
  --bs-btn-disabled-border-color: var(--yonery-forest);
  box-shadow: 0 0.125rem 0.375rem rgba(0, 140, 74, 0.35);
}

/* INI BACKGROUND MENU */
.layout-menu {
  background: var(--yp2) !important;
  /* border-inline-end: 3px solid var(--yonery-forest); */
  color: #fff;
}

/* INI BACKGROUND LOGO, KOTAK PLUS GRADASINYA */
.layout-menu .app-brand {
  background: var(--yp1) !important;
  /* border-block-end: 3px solid var(--yonery-forest); */
}

/* TEXT MENU */
.layout-menu .app-brand-text,
.layout-menu .menu-link,
.layout-menu .menu-icon,
.layout-menu .menu-header-text {
  /* color: var(--yp-menutextcolor) !important; */
  color: #fff !important;
}

/* text-shadow:
    -1px -1px 0 var(--yonery-forest),
    1px -1px 0 var(--yonery-forest),
    -1px 1px 0 var(--yonery-forest),
    1px 1px 0 var(--yonery-forest),
    0 2px 0 var(--yonery-forest); */

/* ini ke bawah header */
.layout-menu .app-brand-text {
  /* color: var(--yonery-lime) !important; */
  /* color: var(--yp-logobg) !important; */
  color: #fff !important;
  font-weight: 800;
}

.layout-menu .menu-inner-shadow {
  /* background: linear-gradient(var(--yonery-orange), rgba(255, 122, 33, 0)); */
  /* background: linear-gradient(#fff, rgba(255, 122, 33, 0)); */
  background: linear-gradient(var(--yp1), rgba(255, 122, 33, 0));
}

/* kalo menu di hover */
.layout-menu .menu-item.active > .menu-link,
.layout-menu .menu-item.open > .menu-link,
.layout-menu .menu-link:hover {
  background: var(--yp3) !important;
  color: #fff !important;
  border: 2px solid var(--yp3);
  /* box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75) inset; */
}

/* menu khusus admin diberi warna beda supaya jelas terpisah dari menu user biasa */
.layout-menu .menu-header-admin .menu-header-text {
  color: var(--yonery-orange) !important;
}

.layout-menu .menu-item-admin > .menu-link {
  color: var(--yonery-orange);
}

.layout-menu .menu-item-admin > .menu-link i {
  color: var(--yonery-orange);
}

.layout-menu .menu-item-admin.active > .menu-link,
.layout-menu .menu-item-admin.open > .menu-link,
.layout-menu .menu-item-admin > .menu-link:hover {
  background: var(--yonery-orange) !important;
  border-color: var(--yonery-orange);
  color: #fff !important;
}

.layout-menu .menu-item-admin.active > .menu-link i,
.layout-menu .menu-item-admin.open > .menu-link i,
.layout-menu .menu-item-admin > .menu-link:hover i {
  color: #fff !important;
}

/* box nya menu aktif */
.layout-menu .menu-item.active > .menu-link {
  /* box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.75) inset,
    0 0.2rem 0.6rem rgba(0, 79, 43, 0.22); */
}

.layout-navbar,
.card {
  box-shadow: 0 0.25rem 1.2rem rgba(6, 55, 33, 0.08) !important;
}

.layout-horizontal .layout-navbar {
  /* background: #0878ff !important; */
  /* background: var(--yp1) !important; */
  background-color: var(--yp1) !important;
  border-bottom: 1px solid rgba(5, 62, 34, 0.45);
}

.layout-horizontal .layout-navbar .app-brand-text,
.layout-horizontal .layout-navbar .nav-link,
.layout-horizontal .layout-navbar .menu-link,
.layout-horizontal .layout-navbar .icon-base {
  color: #fff !important;
}

.layout-horizontal .layout-navbar .app-brand-text {
  /* color: var(--yonery-green) !important; */
  color: #fff !important;
}

.layout-horizontal .layout-menu-horizontal {
  /* background: #0b110e !important; */
  background: var(--yp2) !important;
  border-bottom: 1px solid rgba(var(--yonery-green-rgb), 0.45);
  box-shadow: 0 0.5rem 1.25rem rgba(6, 55, 33, 0.16) !important;
}

.layout-horizontal .layout-menu-horizontal .menu-inner > .menu-item > .menu-link {
  color: rgba(255, 255, 255, 0.82) !important;
  border-radius: 0.375rem;
}

.layout-horizontal .layout-menu-horizontal .menu-inner > .menu-item > .menu-link .menu-icon,
.layout-horizontal .layout-menu-horizontal .menu-inner > .menu-item > .menu-link .icon-base {
  color: rgba(255, 255, 255, 0.82) !important;
}

.layout-horizontal .layout-menu-horizontal .menu-inner > .menu-item.active > .menu-link,
.layout-horizontal .layout-menu-horizontal .menu-inner > .menu-item.open > .menu-link,
.layout-horizontal .layout-menu-horizontal .menu-inner > .menu-item > .menu-link:hover {
  background: rgba(var(--yonery-green-rgb), 0.18) !important;
  color: var(--yonery-green) !important;
}

.layout-horizontal .layout-menu-horizontal .menu-inner > .menu-item.active > .menu-link .menu-icon,
.layout-horizontal .layout-menu-horizontal .menu-inner > .menu-item.active > .menu-link .icon-base,
.layout-horizontal .layout-menu-horizontal .menu-inner > .menu-item.open > .menu-link .menu-icon,
.layout-horizontal .layout-menu-horizontal .menu-inner > .menu-item.open > .menu-link .icon-base,
.layout-horizontal .layout-menu-horizontal .menu-inner > .menu-item > .menu-link:hover .menu-icon,
.layout-horizontal .layout-menu-horizontal .menu-inner > .menu-item > .menu-link:hover .icon-base {
  color: var(--yonery-green) !important;
}

.authentication-wrapper {
  background: linear-gradient(135deg, rgba(168, 235, 199, 0.55), rgba(255, 255, 255, 0.86)), #f7fbf8;
}

.yonery-login-page {
  min-height: 100vh;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}

.yonery-login-background {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #dff4eb;
}

.yonery-login-background::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 112%;
  height: 112%;
  background-image:
    linear-gradient(90deg, rgba(0, 40, 24, 0.16), rgba(255, 255, 255, 0.28) 42%, rgba(255, 255, 255, 0.1)),
    url('/assets/yp_com/login-tropical-energy-bg.png');
  background-size: cover;
  background-position: center;
  transform: translate3d(-5%, -4%, 0) scale(1.03);
  animation: yonery-login-pan 34s ease-in-out infinite alternate;
  will-change: transform;
}

.yonery-login-background::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    circle at 68% 48%,
    rgba(255, 255, 255, 0.42),
    rgba(255, 255, 255, 0.1) 34%,
    rgba(0, 38, 23, 0.22)
  );
  pointer-events: none;
}

.yonery-login-background .authentication-inner {
  position: relative;
  z-index: 1;
}

.yonery-login-background .card {
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
}

@keyframes yonery-login-pan {
  0% {
    transform: translate3d(-5%, -4%, 0) scale(1.03);
  }

  50% {
    transform: translate3d(-1%, -7%, 0) scale(1.07);
  }

  100% {
    transform: translate3d(-9%, -2%, 0) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yonery-login-background::before {
    animation: none;
  }
}

/* ! For .layout-navbar-fixed added fix padding top to .layout-page */
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 72px !important;
}
/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 254px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}