/*
 */body {
  overflow-x: hidden;
  position: relative;
}
html.fix-scrollbar body {
  overflow-x: inherit;
}
body.content-expanded .navbar,
body.content-expanded [role=breadcrumb] {
  display: none;
}
body.content-expanded #page-wrapper {
  background: #fff;
  z-index: 1081
}
body.content-expanded [role=content] {
  position: fixed !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow-y: hidden;
}
.clip {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.gradient {
  background-image: linear-gradient(
    to right,
    rgba(30, 30, 30, 0),
    rgba(255, 255, 255, 0.5)
  );
}
.gradient-top {
  background: linear-gradient(
    to top,
    rgba(50, 50, 50, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
.gradient-right {
  background: linear-gradient(
    to right,
    rgba(50, 50, 50, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
.gradient-bottom {
  background: linear-gradient(
    to bottom,
    rgba(50, 50, 50, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
.gradient-left {
  background: linear-gradient(
    to left,
    rgba(50, 50, 50, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
.tooltip {
  position: absolute !important;
  top: 0;
}
.toast-container {
  z-index: 1050 !important;
}
.modal-backdrop.show ~ .modal-backdrop.show {
  z-index: 1055 !important;
}
.modal.show ~ .modal.show {
  z-index: 1056 !important;
}
.modal-body .mCSB_container {
  padding: 3px;
}
.modal-body > .--validation-callback.alert {
  margin-left: -1rem !important;
  margin-right: -1rem!important;
  margin-bottom: -1rem !important;
}
.sortable {
  cursor: pointer;
}
.sortable .sort-icon {
  margin-top: 5px;
}
#option-modal-title .mdi.mdi-cogs,
.list-group-item-action i {
  width: 30px;
  display: inline-block;
}
.btn-group-xs > .btn,
.btn-xs {
  padding: 1px 5px;
  font-size: 12px;
}
.text-break-word {
  word-break: break-word;
}
.text-break-all {
  word-break: break-all;
}
.text-sm {
  font-size: 0.75rem !important;
}
.text-muted {
  color: #a8a8a8 !important;
}
.btn.btn-file {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 2px dashed #ced4da;
  background: #f9fcff;
  min-height: 38px;
}
.btn.btn-file > input[type="file"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 0;
  filter: alpha(opacity=0);
  outline: 0;
  cursor: inherit;
  display: block;
}
.fileupload-new {
  min-height: 36px;
}
.fileupload-new img {
  border-radius: var(--bs-border-radius);
}
.fileuploader-item.row {
  margin-right: 0;
  margin-left: 0;
}
.fileuploader-item.row .col-2,
.fileuploader-item.row .col-10 {
  padding: 0;
}
.fileuploader-item.row .col-2 {
  padding-right: 1rem;
}
button:focus,
.btn:focus,
button:active,
.btn:active,
button:visited,
.btn:visited {
  outline: none;
  box-shadow: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
textarea {
  resize: none !important;
}
.form-control[readonly],
.form-control:focus[readonly] {
  background: #e9ecef;
  opacity: 1;
}
.form-control:focus {
  box-shadow: none !important;
}
.input-group>.select2-container {
  margin-left:0!important
}
.custom-file-label {
  border: 2px dashed #ced4da !important;
  background: #f9fcff;
  white-space: nowrap;
  overflow: hidden;
}
.custom-file-label::after {
  height: auto;
}
.no-wrap {
  white-space: nowrap;
}
.CodeMirror {
  border-radius: 0.375rem !important;
  padding: 0.375rem 0.75rem !important;
  border: 1px solid #ced4da !important;
  background-color: #fff !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.CodeMirror-lines,
.CodeMirror pre {
  padding: 0 !important;
}
.CodeMirror,
.CodeMirror-scroll {
  min-height: auto !important;
}
.CodeMirror-scroll {
  overflow: hidden !important;
}
.editor-toolbar a {
  height: 24px !important;
}
.editor-toolbar a:before {
  line-height: 22px !important;
}
blink {
  animation: blink 0.8s ease-in-out infinite;
}
.mdi-2x {
  font-size: 2rem;
}
.mdi-3x {
  font-size: 3rem;
}
.mdi-4x {
  font-size: 4rem;
}
.mdi-5x {
  font-size: 5rem;
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.autocomplete-suggestions {
  background: #fff;
  border: 1px solid #ced4da;
  overflow-x: hidden;
  overflow-y: auto;
}
.autocomplete-suggestion {
  padding: 0.375rem 0.75rem;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.autocomplete-suggestion strong {
  color: #007bff;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.autocomplete-suggestion:hover {
  color: #fff;
  background: #007bff;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  cursor: pointer;
}
.autocomplete-suggestion:hover strong {
  color: #ff0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.autocomplete-no-suggestion {
  padding: 0.375rem 0.75rem;
  color: #999;
  font-size: small;
}
.navbar-collapse.show .navbar-nav .nav-link i.mdi,
.navbar-collapse.collapsing .navbar-nav .nav-link i.mdi {
  width: 2rem;
}
.table .MsoNormal {
  margin-bottom: 0;
}
.mejs__container {
  padding-top: 0 !important;
}
.mejs__container,
.mejs__embed,
.mejs__embed body,
.mejs__controls:not([style*="display: none"]) {
  background: transparent !important;
}
.ripple {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  border-radius: inherit;
  pointer-events: none;
  animation: ripple-shadow 0.4s forwards;
  -webkit-animation: ripple-shadow 0.4s forwards;
}
.rippleWave {
  backface-visibility: hidden;
  position: absolute;
  border-radius: 50%;
  transform: scale(0.7);
  -webkit-transform: scale(0.7);
  background: rgba(255, 255, 255, 1);
  opacity: 0.45;
  animation: ripple 1s forwards;
  -webkit-animation: ripple 1s forwards;
}
@keyframes ripple-shadow {
  0% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  20% {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}
@-webkit-keyframes ripple-shadow {
  0% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  20% {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}
@keyframes ripple {
  to {
    transform: scale(24);
    opacity: 0;
  }
}
@-webkit-keyframes ripple {
  to {
    -webkit-transform: scale(24);
    opacity: 0;
  }
}

.grand-hotel {
  color: #ffc501 !important;
}

/* change the link color */
.navbar-custom .nav-item .nav-link {
  color: #000000;
}

/* change the color of active or hovered links */
.navbar-custom .nav-item .nav-link:focus,
.navbar-custom .nav-item .nav-link:hover {
  color: #1063af;
}

.navbar-nav li a {
  color: #1063af;
}

a.btn-outline-info {
  background-color: grey; 
  border: none; 
  color: black;
}

a.btn-outline-info:hover {
  background-color: lightgray;
  color: white;
}

.table-custom { 
  --bs-table-bg: transparent !important;
  border-color: orange !important;
}

.flag-icon-rounded {
  font-size: 1.3em;
  width: 1.3em;
  text-align: center;
  line-height: 1.3em;
  border-radius: 0.8em;
  background-size: cover;
  &.flag-icon-squared {
    height: 1.3em;
  }
  margin-right: 5px;
}

@media (max-width: 480px) {
  .size-controller {
    width: 100%;
  }
  .mobile-16px-font {
    font-size: 16px !important;
  }
  .mobile-14px-font {
    font-size: 14px !important;
  }
  .mobile-20px-font {
    font-size: 20px !important;
  }
  .mobile-hide {
    display: none;
  }
  .mobile-100-percent {
    width: 100% !important;
  }
}

@media (min-width: 480px) {
  /* .mobile-hide {
    display: inline;
  } */
  .mobile-show {
    display: none;
  }
}

/* Inset effect for btn-inset-light following pill navigation style */
.btn-inset-light {
  background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%) !important;
  border-radius: 25px !important;
  box-shadow: 
    inset 0 4px 8px rgba(0, 0, 0, 0.2),
    inset 0 -4px 8px rgba(0, 0, 0, 0.05),
    inset 0 -4px 8px rgba(255, 255, 255, 0.8),
    0 4px 8px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(10px);
  color: #333 !important;
  transition: all 0.3s ease !important;
}

.btn-inset-light:hover {
  background: linear-gradient(135deg, rgb(245, 245, 245) 0%, rgb(245, 245, 245) 100%) !important;
  color: #007bff !important;
  text-shadow: 0 0 8px rgba(0, 123, 255, 0.3) !important;
}

.btn-inset-light:focus,
.btn-inset-light:active {
  background: linear-gradient(135deg, rgb(240, 240, 240) 0%, rgb(240, 240, 240) 100%) !important;
  color: #0056b3 !important;
  text-shadow: 0 0 12px rgba(0, 86, 179, 0.4) !important;
  box-shadow: 
    inset 0 4px 8px rgba(0, 0, 0, 0.25),
    inset 0 -4px 8px rgba(0, 0, 0, 0.1),
    inset 0 -4px 8px rgba(255, 255, 255, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
/* Hyfolic Logo */
.hyfolic-shadow-img {
  height: 70px;
  width: auto;
  margin: 0px 15px;
  filter: drop-shadow(2px 0 10px rgba(255, 255, 255, 1)) 
          drop-shadow(4px 0 15px rgba(255, 255, 255, 0.9)) 
          drop-shadow(6px 0 20px rgba(255, 255, 255, 0.8)) 
          drop-shadow(8px 0 25px rgba(255, 255, 255, 0.7))
          drop-shadow(10px 0 30px rgba(255, 255, 255, 0.6));
  vertical-align: sub;
}

.hyfolic-inline-img {
  height: 70px;
  width: auto;
  margin: 0 15px;
  vertical-align: text-top;
}

@media (max-width: 768px) {
  .hyfolic-inline-img {
    height: 30px;
    margin: 0 10px;
  }
  .hyfolic-shadow-img {
    height: 30px;
    margin: 0 10px;
  }
}
.fileupload-new .img-fluid {
    width: 100%
}
body{background: #ffffff!important; color: #333333!important}
body{background: url("https://hy-folic.co.id/assets/local/images/bg-website.jpg") no-repeat !important; background-size: cover !important; color: #333333!important}
#header-wrapper{background: #ffffff!important; color: #000000!important}
#footer-wrapper{background: #cceaff!important; color: #138fcd!important}
#breadcrumb-wrapper{background: #fff!important; color: #333!important}
#sidebar-wrapper{background: #ffffff!important; color: #333333!important}