@import url("https://fonts.googleapis.com/css?family=Nunito:300,400,500,600,700&display=swap");

:root {
  --lodgehog-primary: #16a34a;
  /* Green 600 */
  --lodgehog-primary-dark: #15803d;
  /* Green 700 */
  --lodgehog-light: #dcfce7;
  /* Green 100 */
  --lodgehog-bg: #f0fdf4;
  /* Green 50 */
  --bg-body: #f9fafb;
  --sidebar-width: 260px;
}

body {
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
  color: #212529;
  background-color: var(--bg-body);
  min-height: 100vh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Fixed overlays are positioned against the viewport, so they escape the
   safe-area padding on <body>. Re-apply the insets here so dialogs clear the
   status bar / notch when running inside the native app. */
.modal {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-search-overlay {
  padding-top: env(safe-area-inset-top);
}

/* DayPilot's own confirm/prompt dialogs (e.g. the reservation cancel
   confirmation) are position: fixed divs it appends straight to <body>,
   bypassing body's safe-area padding just like Bootstrap's .modal above. */
.modal_default_background {
  top: env(safe-area-inset-top);
  bottom: env(safe-area-inset-bottom);
  left: env(safe-area-inset-left);
  right: env(safe-area-inset-right);
}

.modal_default_main {
  margin-top: env(safe-area-inset-top);
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--bs-font-sans-serif);
  line-height: 1.4;
  font-weight: 600;
}

::-moz-selection {
  background: var(--lodgehog-primary);
  color: #ffffff;
}

::selection {
  background: var(--lodgehog-primary);
  color: #ffffff;
}

a {
  text-decoration: none !important;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

p {
  line-height: 1.6;
}

.page-wrapper .sidebar-wrapper {
  -webkit-box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
  box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
  background-color: #fff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  width: 250px;
  height: 100%;
  max-height: 100%;
  position: fixed;
  top: 0;
  left: -250px;
  z-index: 999;
  padding-top: env(safe-area-inset-top);
}

@media (min-width: 1025px) {
  .page-wrapper .sidebar-wrapper {
    z-index: 1000;
  }
}

@media (max-width: 1024px) {
  .page-wrapper .sidebar-wrapper {
    left: 0;
  }
}

@media (max-width: 425px) {
  .page-wrapper .sidebar-wrapper {
    width: 260px;
  }
}

.page-wrapper .sidebar-wrapper ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.page-wrapper .sidebar-wrapper a {
  text-decoration: none;
}

.page-wrapper .sidebar-wrapper .sidebar-content {
  max-height: calc(100% - 30px);
  height: calc(100% - 30px);
  overflow-y: auto;
  position: relative;
  padding-bottom: env(safe-area-inset-bottom);
}

.page-wrapper .sidebar-wrapper .sidebar-content.desktop {
  overflow-y: hidden;
}

.page-wrapper .sidebar-wrapper .sidebar-brand {
  padding: 10px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 71px;
}

.page-wrapper .sidebar-wrapper .sidebar-brand>a {
  text-transform: uppercase;
  font-weight: bold;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.page-wrapper .sidebar-wrapper .sidebar-brand>a:focus {
  outline: none;
}

.page-wrapper .sidebar-wrapper .sidebar-brand #close-sidebar {
  cursor: pointer;
  font-size: 24px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.page-wrapper .sidebar-wrapper .sidebar-header {
  padding: 20px;
  overflow: hidden;
}

.page-wrapper .sidebar-wrapper .sidebar-menu {
  padding: 16px 0;
}

.page-wrapper .sidebar-wrapper .sidebar-menu .header-menu span {
  font-weight: bold;
  font-size: 14px;
  padding: 15px 20px 5px 20px;
  display: inline-block;
}

.page-wrapper .sidebar-wrapper .sidebar-menu li a {
  display: inline-block;
  width: 100%;
  text-decoration: none;
  position: relative;
  padding: 8px 24px 8px 20px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media (max-width: 1024px) {
  .page-wrapper .sidebar-wrapper .sidebar-menu li a {
    padding: 8px 24px 8px 24px;
  }
}

@media screen and (max-width: 425px) {
  .page-wrapper .sidebar-wrapper .sidebar-menu li a {
    padding: 8px 24px 8px 12px;
  }
}

.page-wrapper .sidebar-wrapper .sidebar-menu li a:hover>i::before {
  display: inline-block;
}

.page-wrapper .sidebar-wrapper .sidebar-menu li a:focus {
  outline: none;
}

.page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown>a:after {
  color: #212529;
  font-family: "Material Design Icons";
  font-size: 14px;
  position: absolute;
  right: 15px;
  top: 17px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active>a:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 17px;
}

.page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown:hover>a:after,
.page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active>a:after {
  color: #2f55d4;
}

.page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu {
  display: none;
}

.page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
  padding: 5px 0;
}

.page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li {
  padding-left: 25px;
  font-size: 14px;
}

.page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a:before {
  content: "\f09df" !important;
  color: #212529;
  font-family: "Material Design Icons";
  margin-right: 4px;
  font-size: 16px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a .badge,
.page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a .label {
  float: right;
  margin-top: 0px;
}

.page-wrapper .sidebar-wrapper .sidebar-menu ul li a span.label,
.page-wrapper .sidebar-wrapper .sidebar-menu ul li a span.badge {
  float: right;
  margin-top: 8px;
  margin-left: 5px;
}

.page-wrapper .sidebar-wrapper.sidebar-dark {
  background-color: #161c2d;
}

.page-wrapper .sidebar-wrapper.sidebar-colored {
  background-color: #2f55d4;
}

.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-brand .sidebar-colored,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-brand .sidebar-colored {
  display: inline-block;
}

.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-brand .logo-dark-mode,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-brand .logo-dark-mode {
  display: none !important;
}

.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-brand .logo-light-mode,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-brand .logo-light-mode {
  display: none !important;
}

.page-wrapper .sidebar-wrapper.sidebar-colored .btn.btn-icon,
.page-wrapper .sidebar-wrapper.sidebar-dark .btn.btn-icon {
  background-color: rgba(248, 249, 250, 0.03) !important;
  color: rgba(248, 249, 250, 0.5) !important;
  border: none !important;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-header,
.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-menu,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-header,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu {
  border-top-color: rgba(255, 255, 255, 0.03);
}

.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-header .user-info .user-role,
.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-header .user-info .user-status,
.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-brand>a,
.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-menu li a,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-header .user-info .user-role,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-header .user-info .user-status,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-brand>a,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li a {
  color: rgba(255, 255, 255, 0.5);
}

.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-menu li:hover>a,
.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-menu li.active>a,
.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-menu li:active>a,
.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-menu li:active>a:before,
.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-menu li:hover>a:before,
.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-menu li.active>a:before,
.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-menu .sidebar-dropdown.active>a,
.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-header .user-info,
.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-brand>a:hover,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li:hover>a,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li.active>a,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li:active>a,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li:active>a:before,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li:hover>a:before,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li.active>a:before,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu .sidebar-dropdown.active>a,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-header .user-info,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-brand>a:hover {
  color: #ffffff !important;
}

.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-menu li a i,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li a i {
  background-color: rgba(248, 249, 250, 0.03);
}

.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-menu li:hover i,
.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-menu li.active i,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li:hover i,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li.active i {
  background-color: rgba(248, 249, 250, 0.05);
}

.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-menu .sidebar-dropdown>a:after,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu .sidebar-dropdown>a:after {
  color: rgba(255, 255, 255, 0.1);
}

.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-menu .sidebar-dropdown:hover>a:after,
.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-menu .sidebar-dropdown.active>a:after,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu .sidebar-dropdown:hover>a:after,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu .sidebar-dropdown.active>a:after {
  color: #ffffff;
}

.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a:before,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a:before {
  color: rgba(255, 255, 255, 0.5);
}

.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-footer {
  background-color: #161c2d;
  border-top-color: rgba(255, 255, 255, 0.03);
}

.page-wrapper .sidebar-wrapper.sidebar-colored .sidebar-footer {
  background-color: #2f55d4;
  border-top-color: rgba(255, 255, 255, 0.03);
}

.page-wrapper .sidebar-wrapper .sidebar-header,
.page-wrapper .sidebar-wrapper .sidebar-menu {
  border-top: 1px solid #e9ecef;
}

.page-wrapper .sidebar-wrapper .sidebar-header .user-info .user-role,
.page-wrapper .sidebar-wrapper .sidebar-header .user-info .user-status,
.page-wrapper .sidebar-wrapper .sidebar-brand>a,
.page-wrapper .sidebar-wrapper .sidebar-menu li a {
  color: #161c2d;
  font-weight: 600;
}

.page-wrapper .sidebar-wrapper .sidebar-menu li:hover>a:not(.btn),
.page-wrapper .sidebar-wrapper .sidebar-menu li.active>a:not(.btn),
.page-wrapper .sidebar-wrapper .sidebar-menu li:active>a:not(.btn),
.page-wrapper .sidebar-wrapper .sidebar-menu li:active>a:not(.btn):before,
.page-wrapper .sidebar-wrapper .sidebar-menu li:hover>a:not(.btn):before,
.page-wrapper .sidebar-wrapper .sidebar-menu li.active>a:not(.btn):before,
.page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active>a:not(.btn),
.page-wrapper .sidebar-wrapper .sidebar-header .user-info,
.page-wrapper .sidebar-wrapper .sidebar-brand>a:not(.btn):hover {
  color: #278222 !important;
}

.page-wrapper .sidebar-wrapper .sidebar-brand .sidebar-colored {
  display: none;
}

.page-wrapper .sidebar-wrapper .sidebar-brand .logo-dark-mode {
  display: none;
}

.page-wrapper .sidebar-wrapper .sidebar-brand .logo-light-mode {
  display: inline-block;
}

.page-wrapper .page-content {
  display: inline-block;
  width: 100%;
  padding-left: 0px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.page-wrapper .page-content .top-header {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
  max-height: 70px;
  left: 0px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.page-wrapper .page-content .top-header .header-bar {
  background: #fff;
  height: calc(71px + env(safe-area-inset-top));
  -webkit-box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
  box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
  position: relative;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top));
}

@media (max-width: 425px) {
  .page-wrapper .page-content .top-header .header-bar {
    padding: 24px 12px;
  }
}

.page-wrapper .page-content .top-header .header-bar .logo-icon {
  display: none;
}

@media (max-width: 1024px) {
  .page-wrapper .page-content .top-header .header-bar .logo-icon {
    display: block;
  }
}

.page-wrapper .page-content .top-header .header-bar .logo-icon .small {
  display: none;
}

@media (max-width: 767px) {
  .page-wrapper .page-content .top-header .header-bar .logo-icon .small {
    display: block;
  }
}

.page-wrapper .page-content .top-header .header-bar .logo-icon .big {
  display: none;
}

.page-wrapper .page-content .top-header .header-bar .logo-icon .big .logo-dark-mode {
  display: none;
}

.page-wrapper .page-content .top-header .header-bar .logo-icon .big .logo-light-mode {
  display: inline-block;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .page-wrapper .page-content .top-header .header-bar .logo-icon .big {
    display: block;
  }
}

.page-wrapper .page-content .top-header .header-bar .search-bar {
  padding-top: 14.5px;
  padding-bottom: 14.5px;
}

.page-wrapper .page-content .top-header .header-bar .search-bar .menu-search form {
  position: relative;
}

.page-wrapper .page-content .top-header .header-bar .search-bar .menu-search input[type=text],
.page-wrapper .page-content .top-header .header-bar .search-bar .searchform input[type=text],
.page-wrapper .page-content .top-header .header-bar .search-bar input.form-control {
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 10px 12px;
  height: 36px;
  font-size: 1rem;
  /* Prevents auto-zoom on iPhone */
  display: block;
  width: 250px;
  outline: none !important;
  padding-right: 45px;
  opacity: 0.7;
}

.page-wrapper .page-content .top-header .header-bar .search-bar .menu-search input[type=submit],
.page-wrapper .page-content .top-header .header-bar .search-bar .searchform input[type=submit] {
  position: absolute;
  top: 5px;
  right: 10px;
  opacity: 0;
  width: 40px;
  height: 40px;
}

.page-wrapper .page-content .top-header .header-bar .search-bar .menu-search .searchform:after {
  content: "\f0349";
  position: absolute;
  font-family: "Material Design Icons";
  right: 14px;
  top: 10px;
  font-size: 20px;
  line-height: 20px;
  pointer-events: none;
}

.page-wrapper .page-content .layout-specing {
  padding: calc(94px + env(safe-area-inset-top)) 14px 24px !important;
  min-height: calc(100vh - 66px) !important;
  position: relative;
}

@media (max-width: 425px) {
  .page-wrapper .page-content .layout-specing {
    /* 12px matches the .row gutter, so a top-level row's -12px margins land
       exactly on the viewport edge (no horizontal scroll) while the cards
       inside sit 12px clear of it. */
    padding: calc(94px + env(safe-area-inset-top)) 12px 24px !important;
    /* Guard for content with wider gutters (gx-5) or its own negative margins. */
    overflow-x: clip;
  }
}

/* Page cards are p-4 (24px); on phones that plus the 12px gutter left content
   starting 36px in. 16px matches the reservation page's p-3 cards. */
@media (max-width: 767px) {
  .layout-specing .card.p-4,
  .layout-specing .card-body.p-4 {
    padding: 1rem !important;
  }
}

@media screen and (min-width: 1025px) {
  .page-wrapper.toggled .page-content {
    padding-left: 250px;
  }
}

.page-wrapper.toggled .top-header {
  left: 251px;
}

@media (max-width: 1024px) {
  .page-wrapper.toggled .top-header {
    left: 0;
  }
}

.page-wrapper.toggled .sidebar-wrapper {
  left: 0px;
}

@media (max-width: 1024px) {
  .page-wrapper.toggled .sidebar-wrapper {
    left: -260px;
  }
}

.sidebar-footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 9px 24px calc(9px + env(safe-area-inset-bottom)) 20px !important;
  background-color: #fff;
  border-top: 1px solid #e9ecef;
  -webkit-box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
  box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
  height: calc(58px + env(safe-area-inset-bottom));
  z-index: 10;
}

@media (max-width: 425px) {
  .sidebar-footer {
    padding: 9px 12px !important;
  }
}

[dir=rtl] .page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown>a:after {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

[dir=rtl] .page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active>a:after {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

[dir=rtl] .page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a:before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

footer {
  position: relative;
  color: #adb5bd;
  background: #fff;
  height: 58px;
}

footer .text-foot {
  color: #adb5bd;
}

footer .footer-head {
  font-size: 18px !important;
  letter-spacing: 1px;
  font-weight: 500;
}

footer .footer-list {
  margin-bottom: 0;
}

footer .footer-list li {
  margin-bottom: 10px;
}

footer .footer-list li a {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

footer .footer-list li a:hover {
  color: #e6e8ea;
}

footer .footer-list li:last-child {
  margin-bottom: 0;
}

.avatar.avatar-coin,
.avatar.avatar-sm-sm {
  height: 36px;
  width: 36px;
}

.avatar.avatar-ex-sm {
  max-height: 25px;
}

.avatar.avatar-ex-small {
  height: 36px;
  width: 36px;
  border-radius: 50% !important;
  border: 1px solid #cacaca;
}

.avatar.avatar-md-sm {
  height: 45px;
  width: 45px;
}

.avatar.avatar-small {
  height: 65px;
  width: 65px;
}

.avatar.avatar-md-md {
  height: 80px;
  width: 80px;
}

.avatar.avatar-medium {
  height: 110px;
  width: 110px;
}

.avatar.avatar-large {
  height: 140px;
  width: 140px;
}

.avatar.avatar-ex-large {
  height: 180px;
  width: 180px;
}

.accordion {
  margin-bottom: 1rem !important;
}

.accordion-button {
  font-weight: bold;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(45deg, #ffffff, #ffffff);
  z-index: 9999999;
}

#preloader #status {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#preloader #status .spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 100px auto;
}

#preloader #status .spinner .double-bounce1,
#preloader #status .spinner .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #2f55d4;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-bounce 2s infinite ease-in-out;
  animation: sk-bounce 2s infinite ease-in-out;
}

#preloader #status .spinner .double-bounce2 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes sk-bounce {

  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes sk-bounce {

  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.form-label,
.form-check-label {
  font-weight: 700;
  font-size: 14px;
}

.form-control {
  border: 1px solid #d1d5db;
  font-size: 1rem;
  line-height: 26px;
  border-radius: 0.5rem;
  color: #212529 !important;
  text-align: left;
}

.form-control-custom {
  padding-left: 2.8rem;
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
}

.form-control:focus,
.form-control-custom:focus {
  border-color: var(--lodgehog-primary);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

.form-control[readonly] {
  background-color: #ffffff;
}

.form-control:disabled {
  background-color: #dee2e6;
}

.form-control::-webkit-input-placeholder {
  color: #adb5bd;
}

.form-control::-moz-placeholder {
  color: #adb5bd;
}

.form-control:-ms-input-placeholder {
  color: #adb5bd;
}

.form-control::-ms-input-placeholder {
  color: #adb5bd;
}

.form-control::placeholder {
  color: #adb5bd;
}

.form-check-input {
  border: 1px solid #e9ecef;
  background-color: #ffffff;
}

.form-check-input:focus {
  border-color: #2f55d4;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.top-level-room .scheduler_default_rowheader_inner_text {
  margin-left: 0px !important;
}

.form-check-input.form-check-input:checked {
  background-color: #2f55d4;
  border-color: #2f55d4;
}

.form-icon .icons {
  position: absolute;
  top: 13px;
  left: 18px;
}

.subcribe-form .btn {
  padding: 10px 20px;
}

.subcribe-form input {
  padding: 12px 20px;
  width: 100%;
  color: #212529 !important;
  border: none;
  outline: none !important;
  padding-right: 160px;
  padding-left: 30px;
  background-color: rgba(255, 255, 255, 0.8);
  height: 50px;
}

.subcribe-form input::-webkit-input-placeholder {
  color: #3c4858;
}

.subcribe-form input::-moz-placeholder {
  color: #3c4858;
}

.subcribe-form input:-ms-input-placeholder {
  color: #3c4858;
}

.subcribe-form input::-ms-input-placeholder {
  color: #3c4858;
}

.subcribe-form input::placeholder {
  color: #3c4858;
}

.subcribe-form button {
  position: absolute;
  top: 2px;
  right: 3px;
  outline: none !important;
}

.subcribe-form form {
  position: relative;
  max-width: 600px;
  margin: 0px auto;
}

/*********************************/
/*         Blog & News           */
/*===============================*/
.blog.blog-primary .tag {
  background: #2f55d4 !important;
}

.blog.blog-primary .title:hover {
  color: #2f55d4 !important;
}

.blog.blog-primary .link {
  color: #2f55d4 !important;
}

.blog.blog-primary .post-meta .like:hover,
.blog.blog-primary .post-meta .comments:hover,
.blog.blog-primary .post-meta .readmore:hover {
  color: #2f55d4 !important;
}

.blog.blog-secondary .tag {
  background: #6c757d !important;
}

.blog.blog-secondary .title:hover {
  color: #6c757d !important;
}

.blog.blog-secondary .link {
  color: #6c757d !important;
}

.blog.blog-secondary .post-meta .like:hover,
.blog.blog-secondary .post-meta .comments:hover,
.blog.blog-secondary .post-meta .readmore:hover {
  color: #6c757d !important;
}

.blog.blog-success .tag {
  background: #2eca8b !important;
}

.blog.blog-success .title:hover {
  color: #2eca8b !important;
}

.blog.blog-success .link {
  color: #2eca8b !important;
}

.blog.blog-success .post-meta .like:hover,
.blog.blog-success .post-meta .comments:hover,
.blog.blog-success .post-meta .readmore:hover {
  color: #2eca8b !important;
}

.blog.blog-info .tag {
  background: #17a2b8 !important;
}

.blog.blog-info .title:hover {
  color: #17a2b8 !important;
}

.blog.blog-info .link {
  color: #17a2b8 !important;
}

.blog.blog-info .post-meta .like:hover,
.blog.blog-info .post-meta .comments:hover,
.blog.blog-info .post-meta .readmore:hover {
  color: #17a2b8 !important;
}

.blog.blog-warning .tag {
  background: #f17425 !important;
}

.blog.blog-warning .title:hover {
  color: #f17425 !important;
}

.blog.blog-warning .link {
  color: #f17425 !important;
}

.blog.blog-warning .post-meta .like:hover,
.blog.blog-warning .post-meta .comments:hover,
.blog.blog-warning .post-meta .readmore:hover {
  color: #f17425 !important;
}

.blog.blog-danger .tag {
  background: #e43f52 !important;
}

.blog.blog-danger .title:hover {
  color: #e43f52 !important;
}

.blog.blog-danger .link {
  color: #e43f52 !important;
}

.blog.blog-danger .post-meta .like:hover,
.blog.blog-danger .post-meta .comments:hover,
.blog.blog-danger .post-meta .readmore:hover {
  color: #e43f52 !important;
}

.blog.blog-light .tag {
  background: #f8f9fa !important;
}

.blog.blog-light .title:hover {
  color: #f8f9fa !important;
}

.blog.blog-light .link {
  color: #f8f9fa !important;
}

.blog.blog-light .post-meta .like:hover,
.blog.blog-light .post-meta .comments:hover,
.blog.blog-light .post-meta .readmore:hover {
  color: #f8f9fa !important;
}

.blog.blog-dark .tag {
  background: #212529 !important;
}

.blog.blog-dark .title:hover {
  color: #212529 !important;
}

.blog.blog-dark .link {
  color: #212529 !important;
}

.blog.blog-dark .post-meta .like:hover,
.blog.blog-dark .post-meta .comments:hover,
.blog.blog-dark .post-meta .readmore:hover {
  color: #212529 !important;
}

.blog {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.blog .content h4 {
  line-height: 1.2;
}

.blog .content .title {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.blog .content .post-meta .like,
.blog .content .post-meta .comments,
.blog .content .post-meta .readmore {
  font-size: 15px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.blog .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background: #3c4858;
}

.blog .author {
  position: absolute;
  z-index: 1;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  top: 5%;
  left: 5%;
}

.blog.blog-detail:hover {
  -webkit-transform: translateY(0px) !important;
  transform: translateY(0px) !important;
}

.blog:hover {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

.blog:hover .overlay {
  opacity: 0.4;
}

.blog:hover .author {
  opacity: 1;
}

.sidebar .widget .post-recent {
  padding-bottom: 15px;
}

.sidebar .widget .post-recent:last-child {
  padding-bottom: 0;
}

.sidebar .widget .post-recent .post-recent-thumb {
  width: 25%;
}

.sidebar .widget .post-recent .post-recent-content {
  width: 75%;
  padding-left: 10px;
}

.sidebar .widget .post-recent .post-recent-content a {
  display: block;
  color: #212529;
  font-size: 15px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.sidebar .widget .post-recent .post-recent-content a:hover {
  color: #2f55d4;
}

.sidebar .widget .post-recent .post-recent-content span {
  font-size: 13px;
}

.tagcloud>a {
  background: #f8f9fa;
  color: #212529;
  display: inline-block;
  font-size: 9px;
  letter-spacing: 1px;
  margin: 5px 10px 5px 0;
  padding: 8px 12px 7px;
  text-transform: uppercase;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  font-weight: 600;
}

.tagcloud>a:hover {
  background: #2f55d4;
  color: #ffffff;
}

.media-list .media .media-heading:hover {
  color: #2f55d4 !important;
}

.media-list .sub-comment {
  border-left: 2px dashed #e9ecef;
}

.widget-grid .item {
  position: relative;
  width: 33.33333333%;
  padding-top: 33.33333333%;
  float: left;
}

.widget-grid .item a {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  overflow: hidden;
}

.widget-grid .item:first-child {
  width: 66.66666666%;
  padding-top: 66.66666666%;
}

.widget-grid .item:nth-child(4) {
  clear: both;
}

.fc-event-title-container,
#external-events .fc-event {
  cursor: pointer;
  margin: 4px 2px;
}

#external-events .fc-event .fc-event-main {
  padding: 5px;
}

.fc .fc-non-business {
  background-color: transparent;
}

.fc .fc-daygrid-day-number {
  padding: 5px;
  font-weight: 600;
  color: #2f55d4;
}

.fc .fc-col-header-cell-cushion {
  padding: 8px 4px !important;
  color: #2f55d4;
}

.fc .fc-scrollgrid-liquid {
  border-radius: 5px !important;
}

.fc-theme-standard .fc-scrollgrid,
.fc-theme-standard td,
.fc-theme-standard th {
  border-color: #e9ecef !important;
}

.fc-header-toolbar .fc-toolbar-chunk .fc-toolbar-title {
  font-size: 18px !important;
}

.fc-direction-ltr .fc-daygrid-event.fc-event-start {
  margin: auto 8px 4px;
}

.fc-event-main {
  background-color: #2f55d4;
}

.fc-daygrid-dot-event {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
}

.fc-daygrid-dot-event:hover {
  background-color: #e9ecef;
}

.fc .fc-button {
  padding: 4px 8px;
  font-size: 13px !important;
  background-color: #2f55d4 !important;
  border: 1px solid #2f55d4 !important;
  color: #ffffff !important;
  text-transform: capitalize !important;
}

.fc .fc-button:disabled,
.fc .fc-button:disabled:hover,
.fc .fc-button:disabled:focus,
.fc .fc-button:disabled:active,
.fc .fc-button:disabled.active,
.fc .fc-button:disabled.focus {
  background-color: rgba(47, 85, 212, 0.1) !important;
  border: 1px solid rgba(47, 85, 212, 0.1) !important;
  color: #2f55d4 !important;
}

.fc .fc-button:hover,
.fc .fc-button:focus,
.fc .fc-button:active,
.fc .fc-button.active,
.fc .fc-button.focus {
  background-color: #284bc1 !important;
  border-color: #284bc1 !important;
}

.fc .fc-button:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.fc .fc-icon {
  font-size: 16px !important;
}

.fc-h-event,
.fc-daygrid-event-dot {
  border-color: #2f55d4;
  background-color: #2f55d4;
}

#calendar {
  max-width: 1240px;
}

.chat .chat-list:hover,
.chat .chat-list.active,
.chat .chat-list:focus {
  background: #f8f9fa !important;
  -webkit-box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
  box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
}

.chat .chat-list .on-off,
.chat .chat-type .on-off {
  position: absolute;
  left: -1px;
  top: -1px;
  font-size: 12px !important;
}

.chat.chat-person .on-off {
  font-size: 10px;
}

.chat.chat-person .chat-msg {
  margin-left: 8px;
}

.chat.chat-person .chat-msg .msg {
  background: #ffffff;
}

.chat.chat-person .chat-msg .msg-time {
  font-size: 12px !important;
}

.chat.chat-person .chat-right {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  text-align: right;
}

.chat.chat-person .chat-right .chat-user-image {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}

.chat.chat-person .chat-right .chat-user-image .on-off {
  right: -1px;
}

.chat.chat-person .chat-right .chat-msg {
  margin-right: 8px;
  margin-left: 0;
}

.chat.chat-person .chat-right .chat-msg .msg {
  display: inline-block;
}

.chat.chat-person .chat-right .chat-msg .msg-time {
  display: block;
}

.ck.ck-toolbar,
.ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
  background: #ffffff !important;
  border: 1px solid #e9ecef !important;
}

.ck.ck-toolbar>.ck-toolbar__items> :not(.ck-toolbar__line-break),
.ck.ck-toolbar>.ck.ck-toolbar__grouped-dropdown {
  color: #212529;
}

.features.feature-primary .title:hover {
  color: #2f55d4 !important;
}

.features.feature-primary .icon {
  color: #2f55d4 !important;
  background-color: rgba(47, 85, 212, 0.04) !important;
}

.features.feature-primary .link {
  color: #2f55d4 !important;
}

.features.feature-primary.key-feature .icon {
  background: linear-gradient(45deg, transparent, rgba(47, 85, 212, 0.1)) !important;
}

.features.feature-bg-primary:hover {
  background-color: #2f55d4 !important;
}

.features.feature-secondary .title:hover {
  color: #6c757d !important;
}

.features.feature-secondary .icon {
  color: #6c757d !important;
  background-color: rgba(108, 117, 125, 0.04) !important;
}

.features.feature-secondary .link {
  color: #6c757d !important;
}

.features.feature-secondary.key-feature .icon {
  background: linear-gradient(45deg, transparent, rgba(108, 117, 125, 0.1)) !important;
}

.features.feature-bg-secondary:hover {
  background-color: #6c757d !important;
}

.features.feature-success .title:hover {
  color: #2eca8b !important;
}

.features.feature-success .icon {
  color: #2eca8b !important;
  background-color: rgba(46, 202, 139, 0.04) !important;
}

.features.feature-success .link {
  color: #2eca8b !important;
}

.features.feature-success.key-feature .icon {
  background: linear-gradient(45deg, transparent, rgba(46, 202, 139, 0.1)) !important;
}

.features.feature-bg-success:hover {
  background-color: #2eca8b !important;
}

.features.feature-info .title:hover {
  color: #17a2b8 !important;
}

.features.feature-info .icon {
  color: #17a2b8 !important;
  background-color: rgba(23, 162, 184, 0.04) !important;
}

.features.feature-info .link {
  color: #17a2b8 !important;
}

.features.feature-info.key-feature .icon {
  background: linear-gradient(45deg, transparent, rgba(23, 162, 184, 0.1)) !important;
}

.features.feature-bg-info:hover {
  background-color: #17a2b8 !important;
}

.features.feature-warning .icon {
  color: #f17425 !important;
  background-color: rgba(241, 116, 37, 0.04) !important;
}

.features.feature-warning .link {
  color: #f17425 !important;
}

.features.feature-warning.key-feature .icon {
  background: linear-gradient(45deg, transparent, rgba(241, 116, 37, 0.1)) !important;
}

.features.feature-bg-warning:hover {
  background-color: #f17425 !important;
}

.features.feature-danger .icon {
  color: #e43f52 !important;
  background-color: rgba(228, 63, 82, 0.04) !important;
}

.features.feature-danger .link {
  color: #e43f52 !important;
}

.features.feature-danger.key-feature .icon {
  background: linear-gradient(45deg, transparent, rgba(228, 63, 82, 0.1)) !important;
}

.features.feature-bg-danger:hover {
  background-color: #e43f52 !important;
}

.features.feature-light .title:hover {
  color: #f8f9fa !important;
}

.features.feature-light .icon {
  color: #f8f9fa !important;
  background-color: rgba(248, 249, 250, 0.04) !important;
}

.features.feature-light .link {
  color: #f8f9fa !important;
}

.features.feature-light.key-feature .icon {
  background: linear-gradient(45deg, transparent, rgba(248, 249, 250, 0.1)) !important;
}

.features.feature-bg-light:hover {
  background-color: #f8f9fa !important;
}

.features.feature-dark .title:hover {
  color: #212529 !important;
}

.features.feature-dark .icon {
  color: #212529 !important;
  background-color: rgba(33, 37, 41, 0.04) !important;
}

.features.feature-dark .link {
  color: #212529 !important;
}

.features.feature-dark.key-feature .icon {
  background: linear-gradient(45deg, transparent, rgba(33, 37, 41, 0.1)) !important;
}

.features.feature-bg-dark:hover {
  background-color: #212529 !important;
}

.features {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.features .icon {
  height: 65px;
  width: 65px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.features .title {
  font-weight: 500;
}

.features .big-icon {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 20px;
  opacity: 0.05;
  font-size: 120px;
}

.features .titles,
.features .icons,
.features .para,
.features .big-icon {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.features:hover .titles,
.features:hover .icons,
.features:hover .big-icon {
  color: #ffffff !important;
}

.features:hover .para {
  color: rgba(255, 255, 255, 0.5) !important;
}

.key-feature .icon {
  height: 45px;
  width: 45px;
  line-height: 45px;
}

.fw-medium {
  font-weight: 600;
}

.section {
  padding: 100px 0;
  position: relative;
}

@media (max-width: 768px) {
  .section {
    padding: 60px 0;
  }
}

.bg-overlay {
  background-color: rgba(60, 72, 88, 0.7);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.bg-overlay-white {
  background-color: rgba(255, 255, 255, 0.5);
}

.title-heading {
  line-height: 26px;
}

.title-heading .heading {
  font-size: 45px !important;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .title-heading .heading {
    font-size: 35px !important;
  }
}

.title-heading .para-desc {
  font-size: 18px;
}

.section-title .title {
  letter-spacing: 0.5px;
  font-size: 30px !important;
}

@media (max-width: 768px) {
  .section-title .title {
    font-size: 24px !important;
  }
}

.para-desc {
  max-width: 600px;
}

.mt-100 {
  margin-top: 100px;
}

.shape {
  position: absolute;
  pointer-events: none;
  right: 0;
  bottom: -2px;
  left: 0;
}

.shape>svg {
  -webkit-transform: scale(2);
  transform: scale(2);
  width: 100%;
  height: auto;
  -webkit-transform-origin: top center;
  transform-origin: top center;
}

.shape.integration-hero {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  height: 250px;
  background: #ffffff;
}

@media (max-width: 768px) {
  .shape.integration-hero {
    height: 140px;
  }
}

@media (max-width: 425px) {
  .shape.integration-hero {
    height: 60px;
  }
}

@media (max-width: 425px) {
  .shape {
    bottom: -4px;
  }
}

@media (min-width: 768px) {
  .margin-top-100 {
    margin-top: 100px;
  }
}

@media (max-width: 768px) {
  .mt-60 {
    margin-top: 60px;
  }
}

/*********************************/
/*         Timeline              */
/*===============================*/
.main-icon {
  border: 2px solid #e9ecef;
  height: 40px;
  width: 40px;
  line-height: 0;
  text-align: center;
}

.main-icon .fea {
  height: 20px;
}

@media (min-width: 768px) {
  .main-icon {
    margin: 0 auto;
  }
}

.timeline-page:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 95%;
  margin: auto;
  width: 2px;
  background-color: #e9ecef !important;
}

.timeline-page .timeline-item .date-label-left,
.timeline-page .timeline-item .duration-right {
  margin-right: 15px;
}

.timeline-page .timeline-item .date-label-left:after,
.timeline-page .timeline-item .duration-right:after {
  content: "";
  position: absolute;
  top: 12px;
  width: 12px;
  height: 12px;
  z-index: 1;
  background-color: #2f55d4;
  border-radius: 4px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.timeline-page .timeline-item .date-label-left {
  float: right;
  margin-right: 15px;
}

.timeline-page .timeline-item .date-label-left:after {
  right: -34px;
}

.timeline-page .timeline-item .duration-right {
  float: left;
  margin-left: 15px;
}

.timeline-page .timeline-item .duration-right:after {
  left: -34px;
}

.timeline-page .timeline-item .event {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.timeline-page .timeline-item .event.event-description-right {
  margin-left: 15px;
}

.timeline-page .timeline-item .event.event-description-left {
  margin-right: 15px;
  text-align: right;
}

@media (max-width: 767px) {
  .timeline-page {
    margin-left: 18px;
  }

  .timeline-page:after {
    margin: 0;
  }

  .timeline-page .timeline-item .duration {
    float: left !important;
    margin: 0 0 30px 15px !important;
    text-align: left !important;
  }

  .timeline-page .timeline-item .duration:after {
    left: -21px !important;
  }

  .timeline-page .timeline-item .duration .event {
    text-align: left !important;
    margin-left: 15px;
  }

  .timeline-page .timeline-item .event-description-left {
    text-align: left !important;
    margin: 0 0 0 15px;
  }
}

.back-to-home {
  position: fixed;
  top: 4%;
  right: 2%;
  z-index: 1;
}

.sticky-bar {
  position: sticky;
  top: 80px;
}

.fea {
  stroke-width: 1.8;
}

.fea.icon-sm {
  height: 16px;
  width: 16px;
}

.fea.icon-ex-md {
  height: 20px;
  width: 20px;
}

.fea.icon-m-md {
  height: 28px;
  width: 28px;
}

.fea.icon-md {
  height: 35px;
  width: 35px;
}

.fea.icon-lg {
  height: 42px;
  width: 42px;
}

.fea.icon-ex-lg {
  height: 52px;
  width: 52px;
}

[class^=uil-]:before,
[class*=" uil-"]:before {
  margin: 0;
}

.uim-svg {
  vertical-align: 0 !important;
}

.social-icon li a {
  color: #212529;
  border: 1px solid #212529;
  height: 32px;
  width: 32px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  overflow: hidden;
  position: relative;
}

.social-icon li a .fea-social {
  stroke-width: 2;
}

.social-icon li a:hover {
  background-color: #2f55d4;
  border-color: #2f55d4 !important;
  color: #fff !important;
}

.social-icon li a:hover .fea-social {
  fill: #2f55d4;
}

.social-icon.social li a {
  color: #adb5bd;
  border-color: #adb5bd;
}

.social-icon.foot-social-icon li a {
  color: #adb5bd;
  border-color: #283453;
}

.rounded {
  border-radius: 6px !important;
}

.rounded-top {
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
}

.rounded-left {
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
}

.rounded-bottom {
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
}

.rounded-right {
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
}

.rounded-md {
  border-radius: 10px !important;
}

.rounded-lg {
  border-radius: 30px !important;
}

.border-primary {
  border-color: #2f55d4 !important;
}

.border-secondary {
  border-color: #a7b5c2 !important;
}

.border-success {
  border-color: #1e875d !important;
}

.border-info {
  border-color: #17a2b8 !important;
}

.border-warning {
  border-color: #f17425 !important;
}

.border-danger {
  border-color: #e43f52 !important;
}

.border-light {
  border-color: #f8f9fa !important;
}

.border-dark {
  border-color: #212529 !important;
}

.bg-white-color {
  background: #fff;
}

.d-flex .flex-1 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/*********************************/
/*         Home & Hero           */
/*===============================*/
.bg-home {
  min-height: 100vh;
  background-size: cover;
  -ms-flex-item-align: center;
  align-self: center;
  position: relative;
  background-position: center center;
}

@media (max-width: 767px) {
  .bg-home {
    padding: 25px 0;
    height: auto;
  }
}

.bg-circle-gradiant {
  background: radial-gradient(circle at 50% 50%, rgba(107, 212, 47, 0.1) 0%, rgba(53, 212, 47, 0.1) 33.333%, rgba(80, 212, 47, 0.2) 33.333%, rgba(135, 212, 47, 0.2) 66.666%, rgba(80, 212, 47, 0.3) 66.666%, rgba(80, 212, 47, 0.3) 99.999%);
}

/*********************************/
/*         Pricing & Plans       */
/*===============================*/
.pricing-rates {
  position: relative;
  z-index: 1;
  border-bottom: 3px solid #e9ecef !important;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.pricing-rates .price {
  font-weight: 400;
}

.pricing-rates.business-rate:hover {
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
  z-index: 2;
  border-color: #2f55d4 !important;
  -webkit-box-shadow: 0 5px 13px rgba(60, 72, 88, 0.2) !important;
  box-shadow: 0 5px 13px rgba(60, 72, 88, 0.2) !important;
  background-color: #fff !important;
}

.pricing-rates.business-rate:hover .title {
  color: #2f55d4;
}

.ribbon.ribbon-primary span {
  background-color: #2f55d4 !important;
}

.ribbon.ribbon-primary span:before {
  border-left-color: #2443ac;
  border-top-color: #2443ac;
}

.ribbon.ribbon-primary span:after {
  border-right-color: #2443ac;
  border-top-color: #2443ac;
}

.ribbon.ribbon-secondary span {
  background-color: #6c757d !important;
}

.ribbon.ribbon-secondary span:before {
  border-left-color: #545b62;
  border-top-color: #545b62;
}

.ribbon.ribbon-secondary span:after {
  border-right-color: #545b62;
  border-top-color: #545b62;
}

.ribbon.ribbon-success span {
  background-color: #2eca8b !important;
}

.ribbon.ribbon-success span:before {
  border-left-color: #25a06e;
  border-top-color: #25a06e;
}

.ribbon.ribbon-success span:after {
  border-right-color: #25a06e;
  border-top-color: #25a06e;
}

.ribbon.ribbon-info span {
  background-color: #17a2b8 !important;
}

.ribbon.ribbon-info span:before {
  border-left-color: #117a8b;
  border-top-color: #117a8b;
}

.ribbon.ribbon-info span:after {
  border-right-color: #117a8b;
  border-top-color: #117a8b;
}

.ribbon.ribbon-warning span {
  background-color: #f17425 !important;
}

.ribbon.ribbon-warning span:before {
  border-left-color: #d55b0e;
  border-top-color: #d55b0e;
}

.ribbon.ribbon-warning span:after {
  border-right-color: #d55b0e;
  border-top-color: #d55b0e;
}

.ribbon.ribbon-danger span {
  background-color: #e43f52 !important;
}

.ribbon.ribbon-danger span:before {
  border-left-color: #d21e32;
  border-top-color: #d21e32;
}

.ribbon.ribbon-danger span:after {
  border-right-color: #d21e32;
  border-top-color: #d21e32;
}

.ribbon.ribbon-light span {
  background-color: #f8f9fa !important;
}

.ribbon.ribbon-light span:before {
  border-left-color: #dae0e5;
  border-top-color: #dae0e5;
}

.ribbon.ribbon-light span:after {
  border-right-color: #dae0e5;
  border-top-color: #dae0e5;
}

.ribbon.ribbon-dark span {
  background-color: #212529 !important;
}

.ribbon.ribbon-dark span:before {
  border-left-color: #0a0c0d;
  border-top-color: #0a0c0d;
}

.ribbon.ribbon-dark span:after {
  border-right-color: #0a0c0d;
  border-top-color: #0a0c0d;
}

.ribbon {
  position: absolute;
  top: -5px;
  width: 75px;
  height: 75px;
  z-index: 2;
}

.ribbon.ribbon-right {
  right: -5px;
}

.ribbon.ribbon-right span {
  right: -23px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.ribbon.ribbon-left {
  left: -5px;
}

.ribbon.ribbon-left span {
  left: -23px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.ribbon span {
  position: absolute;
  top: 18px;
  width: 100px;
  color: #ffffff;
}

.ribbon span:before,
.ribbon span:after {
  content: "";
  position: absolute;
  top: 100%;
  z-index: -1;
  border: 3px solid transparent;
}

.ribbon span:before {
  left: 0;
}

.ribbon span:after {
  right: 0;
}

.invoice-top .logo-invoice {
  font-weight: 700;
  font-size: 27px;
  letter-spacing: 1px;
}

.switcher-pricing .toggle,
.switcher-pricing .toggler {
  display: inline-block !important;
  vertical-align: middle;
}

.switcher-pricing .toggler {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  font-weight: bold;
}

.switcher-pricing .toggler--is-active {
  color: #2f55d4 !important;
}

.switcher-pricing .form-switch .form-check-input {
  width: 48px;
  height: 24px;
  margin-top: 0;
}

.hide {
  display: none;
}

.apexcharts-legend-text {
  font-family: var(--bs-font-sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #343a40 !important;
}

.apexcharts-tooltip {
  background: #fff !important;
  color: #343a40;
  border-color: #e9ecef !important;
}

.apexcharts-gridlines-horizontal,
.apexcharts-gridlines-vertical,
.apexcharts-grid,
.apexcharts-gridline,
.apexcharts-xaxis-tick,
.apexcharts-xaxis line,
.apexcharts-gridline line,
.apexcharts-radar-series line,
.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
.apexcharts-radar-series path,
.apexcharts-radar-series polygon {
  stroke: #e9ecef !important;
}

.apexcharts-data-labels,
.apexcharts-datalabels text,
.apexcharts-xaxis text,
.apexcharts-yaxis text {
  font-family: var(--bs-font-sans-serif) !important;
  fill: #343a40 !important;
}

.apexcharts-tooltip-title {
  background: #fff !important;
  color: #343a40 !important;
  border-color: #e9ecef !important;
}

.shop-features .category-title {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 20px;
  z-index: 1;
}

.shop-list .shop-image .overlay-work,
.shop-list .shop-image .shop-icons {
  position: absolute;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.shop-list .shop-image .overlay-work {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.shop-list .shop-image .overlay-work .out-stock {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.shop-list .shop-image .shop-icons {
  top: 15px;
  right: 15px;
  z-index: 2;
}

.shop-list .shop-image:hover .overlay-work,
.shop-list .shop-image:hover .shop-icons {
  opacity: 1;
}

.shop-list .content .product-name {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.shop-list .content .product-name:hover {
  color: #2f55d4 !important;
}

.shop-list .label {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 2;
}

.shop-list .qty-btn {
  pointer-events: none;
  width: 65px;
  padding-left: 15px;
}

/*********************************/
/*         Team members          */
/*===============================*/
.team.team-primary .name:hover {
  color: #2f55d4 !important;
}

.team.team-secondary .name:hover {
  color: #6c757d !important;
}

.team.team-success .name:hover {
  color: #2eca8b !important;
}

.team.team-info .name:hover {
  color: #17a2b8 !important;
}

.team.team-warning .name:hover {
  color: #f17425 !important;
}

.team.team-danger .name:hover {
  color: #e43f52 !important;
}

.team.team-light .name:hover {
  color: #f8f9fa !important;
}

.team.team-dark .name:hover {
  color: #212529 !important;
}

.team img {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.team .team-icon {
  position: absolute;
  bottom: 50%;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  right: 0;
  opacity: 0;
  left: 0;
  text-align: center;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.team:hover img {
  -webkit-box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
  box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
  opacity: 0.2;
}

.team:hover .overlay-team {
  opacity: 0.6;
}

.team:hover .team-icon {
  opacity: 1;
}

/*********************************/
/*         Testimonial           */
/*===============================*/
.tns-nav {
  text-align: center;
  margin-top: 10px;
}

.tns-nav button {
  border-radius: 3px;
  background: rgba(47, 85, 212, 0.5) !important;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  border: none;
  margin: 0 5px;
  padding: 5px;
}

.tns-nav button.tns-nav-active {
  background: #2f55d4 !important;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* RTL */
/*rtl:begin:ignore*/
html[dir=rtl] .swiper-slider-hero,
html[dir=rtl] .tns-inner,
html[dir=rtl] .tns-nav {
  direction: ltr !important;
}

html[dir=rtl] .tns-visually-hidden {
  left: 0 !important;
  visibility: hidden;
}

/*rtl:end:ignore*/
/*********************************/
/*         Authentications       */
/*===============================*/
.login-page {
  font-size: 15px;
}

.login-page .forgot-pass {
  z-index: 99;
  position: relative;
  font-size: 13px;
}

.cover-user .container-fluid {
  max-width: 100%;
}

@media (max-width: 768px) {
  .cover-user .container-fluid .padding-less {
    position: relative !important;
    height: 400px !important;
  }
}

.cover-user .container-fluid .padding-less.img {
  background: scroll center no-repeat;
  background-size: cover;
  position: absolute;
  height: 100%;
}

.cover-user .cover-user-img {
  height: 100vh;
}

@media (min-width: 1025px) {
  .cover-user .cover-user-img {
    padding: 0px 20%;
  }
}

@media (max-width: 768px) {
  .cover-user .cover-user-img {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: start !important;
    height: auto !important;
    padding: 30px;
  }
}

@media (max-width: 768px) {
  .cover-user .cover-user-content {
    text-align: left !important;
  }

  .cover-user .cover-my-30 {
    margin: 30px 0;
  }
}

.form-signin {
  width: 100%;
  max-width: 400px;
  margin: auto;
}

.form-signin .logo {
  height: 64px;
}

.form-hotel-create {
  width: 100%;
  max-width: 600px;
  margin: auto;
}

.form-hotel-create .logo {
  max-height: 80px;
}

.form-hotel-create .asteriskField {
  display: none;
}

.avatar-profile {
  position: relative;
  top: -80px;
}

/*********************************/
/*         Works & Portfolios    */
/*===============================*/
.work-container.work-classic .work-image {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.work-container.work-classic .work-image:hover {
  -webkit-box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
  box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
}

.work-container.work-classic .content .title,
.work-container.work-modern .content .title {
  font-size: 18px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.work-container.work-classic .content .title:hover,
.work-container.work-modern .content .title:hover {
  color: #2f55d4 !important;
}

.work-container.work-classic .content .tag,
.work-container.work-modern .content .tag {
  font-size: 15px !important;
}

.work-container.work-modern img {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.work-container.work-modern:hover img {
  -webkit-transform: scale(1.1) rotate(3deg);
  transform: scale(1.1) rotate(3deg);
}

.tobii>button.tobii__close svg,
.tobii>button.tobii__prev svg,
.tobii>button.tobii__next svg {
  height: 36px;
  width: auto;
}

.tobii__counter {
  font-size: 16px;
}

.tobii-zoom {
  display: block !important;
}

.tobii-zoom__icon {
  display: none;
}

#grid {
  padding: 0 !important;
}

.switcher-btn {
  position: fixed;
  top: 200px;
  height: 41px;
  width: 40px;
  padding: 3px;
  border-radius: 0 30px 30px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.style-switcher .t-dark,
.style-switcher .t-rtl-light {
  display: inline-block;
}

.style-switcher .t-ltr-light,
.style-switcher .t-light,
.style-switcher .t-rtl-dark,
.style-switcher .t-ltr-dark {
  display: none;
}

@media only screen and (max-width: 375px) {
  .switcher-btn {
    display: none !important;
  }
}

[dir=rtl] .style-switcher .t-rtl-light {
  display: none;
}

[dir=rtl] .style-switcher .t-ltr-light {
  display: inline-block;
}

li.selected {
  background-color: #228125;
  border-radius: 10px;
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.2);
  margin-left: 1em;
  margin-right: 1em;
}

.page-wrapper .sidebar-wrapper .sidebar-menu li.selected a {
  font-weight: bold;
  color: white;
}

.page-wrapper .sidebar-wrapper .sidebar-menu li.selected:hover>a {
  color: white !important;
}

/* Reservation status palette — single source of truth for calendar events and the legend */
:root {
  --res-pr: #ffc107;
  --res-pr-bg: #fffbeb;
  --res-cn: #38761d;
  --res-cn-bg: #f0f7ec;
  --res-ci: #1691f4;
  --res-ci-bg: #eff8ff;
  --res-co: #adb5bd;
  --res-co-bg: #f8f9fa;
}

#dp,
#dp-current,
#dp-solution {
  --dp-scheduler-font-family: inherit;
  --dp-scheduler-border-color: #dee2e6;
  --dp-scheduler-border-inner-color: #e9ecef;
  --dp-scheduler-grid-line-color: #eceef1;
  --dp-scheduler-grid-line-break-color: #dee2e6;
  --dp-scheduler-header-bg-color: #f8f9fa;
  --dp-scheduler-header-color: #6c757d;
  --dp-scheduler-cell-bg-color: #ffffff;
  --dp-scheduler-cell-business-bg-color: #ffffff;
  --dp-scheduler-event-background: #ffffff;
  --dp-scheduler-event-border: 1px solid #dee2e6;
  --dp-scheduler-event-border-radius: 8px;
  --dp-scheduler-event-box-shadow: 0 1px 2px rgba(30, 41, 59, 0.12);
  --dp-scheduler-event-padding: 4px;
  --dp-scheduler-event-bar-display: none;
  --dp-scheduler-focus-outline-color: #2f55d4;
  --dp-scheduler-selectionrectangle-color: #2f55d4;
}

#dp .scheduler_default_corner div:nth-child(2) {
  display: none !important;
}

/* Excludes #dp:has(.scheduler_default_shadow) -- that shadow element only
   exists in the DOM while a move/resize drag is in progress. eventMarginLeft/
   Right and rowMarginTop/Bottom inset the event box from the cell (see the
   .continues-left/right comment below), so the mouse crosses onto plain cell
   background whenever it isn't dead-center over the dragged event, and
   without this exclusion this "add a new reservation" affordance (green fill
   + plus icon) fires mid-drag over what is actually a move. DayPilot's own
   drag shadow already marks the drop target, so this affordance is dropped
   for the duration of any drag. */
#dp:not(:has(.scheduler_default_shadow)) .scheduler_default_cell:not(.scheduler_default_cellparent):hover,
#dp:not(:has(.scheduler_default_shadow)) .scheduler_default_cell:not(.scheduler_default_cellparent).scheduler_default_cell_business:hover {
  /* !important needed because weekend/today cells get an inline backColor */
  background-color: #e6f4ea !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232e7d32'/%3E%3Cpath d='M12 7v10M7 12h10' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: center center;
}

#dp .scheduler_default_cell,
.scheduler_default_cell.scheduler_default_cell_business {
  cursor: pointer;
}

#dp .scheduler_default_cellparent,
.scheduler_default_cell.scheduler_default_cell_business.scheduler_default_cellparent {
  background: #f1f3f5;
}

/* Time header: bold month row, muted day row */
#dp .scheduler_default_timeheadergroup {
  font-weight: 600;
  color: #343a40;
}

#dp .today-time-header {
  background: #ffe2b0;
  color: #664d03;
  font-weight: 600;
}

#dp .weekend-time-header {
  background: #f1f3f5;
  color: #495057;
}

/* Reservation events: flat card with a status-colored left edge */
#dp .res-status-pr .scheduler_default_event_inner {
  border-top: 4px solid var(--res-pr);
  background: var(--res-pr-bg);
}

#dp .res-status-cn .scheduler_default_event_inner {
  border-top: 4px solid var(--res-cn);
  background: var(--res-cn-bg);
}

#dp .res-status-ci .scheduler_default_event_inner {
  border-top: 4px solid var(--res-ci);
  background: var(--res-ci-bg);
}

#dp .res-status-co .scheduler_default_event_inner {
  border-top: 4px solid var(--res-co);
  background: var(--res-co-bg);
  color: #6c757d;
}

/* Says the bookings below are samples (_reservation_calendar.html). Kept quiet
   so the calendar under it stays the thing to look at. */
.sample-reservations-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 12px 16px;
  background: var(--lodgehog-bg);
  border: 1px solid #bbf7d0;
  /* Green 200 */
  border-radius: 12px;
  color: #14532d;
  /* Green 900 */
}

/* Lets the text share the icon's row on a phone; the button wraps below. */
.sample-reservations-banner-text {
  flex: 1 1 0;
  min-width: 200px;
}

.sample-reservations-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lodgehog-light);
  color: var(--lodgehog-primary-dark);
  font-size: 1.25rem;
}

/* Over a calendar window with no bookings (reservation_calendar.js
   showEmptyState): where the nearest booking is. Only the card takes clicks,
   so the empty cells around it still start a reservation. */
.calendar-empty-state {
  position: absolute;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  padding: 0 12px;
  pointer-events: none;
}

.calendar-empty-state[hidden] {
  display: none;
}

.calendar-empty-state-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  max-width: 560px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  color: #475569;
  font-size: 0.875rem;
  pointer-events: auto;
}

.calendar-empty-state-card > .ti {
  font-size: 1.125rem;
}

.calendar-empty-state-text {
  flex: 1 1 200px;
}

/* The home page's today row: room counts that open the room list filtered. */
.today-stat {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px 12px;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

a.today-stat[href]:hover {
  border-color: var(--lodgehog-primary);
  color: inherit;
}

.today-stat-value {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
}

.today-stat-total {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
}

.today-stat-label {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
}

.today-stat-label .ti {
  margin-right: 4px;
}

/* The home page's day: the date between two quiet arrows that step a day. */
.today-day {
  white-space: nowrap;
}

.today-day-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--bs-secondary-color);
  text-decoration: none;
  vertical-align: -1px;
}

.today-day-step:hover {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

.today-day-back {
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.today-day-back:hover {
  color: var(--bs-body-color);
  text-decoration: underline;
}

/* While another day loads. */
#home-today[busy] > .card {
  opacity: 0.6;
  transition: opacity 0.15s 0.1s;
}

/* The home page's arrivals and departures (partials/today_row.html): room
   first, as the desk calls them, then the guest, what they owe and the
   button. Rows already checked in or out stay, dimmed. */
.today-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 8px;
  font-weight: 600;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.today-col-progress {
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
}

.today-col-empty {
  padding: 14px 4px;
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}

.today-done > summary {
  padding: 8px 4px;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  cursor: pointer;
}

/* room | guest | payment and button | menu, one grid so every row's
   pieces line up whatever their content. */
.today-row {
  display: grid;
  grid-template-columns: var(--room-tile, 56px) minmax(0, 1fr) auto auto;
  grid-template-areas: "room main end more";
  align-items: center;
  column-gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.today-row.is-done {
  opacity: 0.55;
}

/* The room tile's width is the column's (--room-tile), set from its longest
   room name (--room-chars, IndexView._add_today): "105" keeps a compact
   tile, "Chalé Beija-Flor" a wider one in a smaller font, and anything past
   the cap wraps onto a second line. */
.today-col {
  --room-tile: 56px;
}

.today-col.has-long-rooms {
  --room-tile: clamp(56px, calc(var(--room-chars) * 0.5rem + 20px), 120px);
}

.today-row-room {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-area: room;
  min-width: 0;
  min-height: 40px;
  padding: 4px 6px;
  border-radius: 8px;
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}

.has-long-rooms .today-row-room {
  font-size: 0.8125rem;
  font-weight: 600;
}

.today-row-room-name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

a.today-row-room[href]:hover {
  background: var(--lodgehog-light);
  color: var(--bs-emphasis-color);
}

.today-row-room-more {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.today-row-main {
  grid-area: main;
  min-width: 0;
}

.today-row-guest {
  font-weight: 600;
  text-decoration: none;
}

.today-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
}

.today-row-meta .ti {
  margin-right: 3px;
}

.today-row-end {
  grid-area: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.today-row-more {
  grid-area: more;
}

.today-row-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.today-row-pill.is-due {
  background: #fef3c7;
  color: #92400e;
}

.today-row-pill.is-paid {
  background: #dcfce7;
  color: #166534;
}

.today-row-pill.is-billed {
  background: #e0f2fe;
  color: #075985;
}

.today-row-pill.is-overdue {
  background: #fee2e2;
  color: #991b1b;
}

.today-row-action {
  min-width: 92px;
  white-space: nowrap;
  font-weight: 600;
  border-radius: 8px;
}

/* Outlined like check-out: a solid fill on every arrival turned the column
   into a stack of green blocks louder than the "due" pill beside them. */
.today-row-action.is-checkin {
  background: #fff;
  border-color: var(--lodgehog-primary);
  color: #15803d;
}

.today-row-action.is-checkin:hover {
  background: var(--lodgehog-light);
  border-color: var(--lodgehog-primary);
  color: #15803d;
}

.today-row-action.is-checkout {
  background: #fff;
  border-color: var(--bs-border-color);
  color: var(--bs-emphasis-color);
}

.today-row-action.is-checkout:hover {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-emphasis-color);
}

.today-row-done {
  min-width: 92px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
}

.today-row-menu {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  color: var(--bs-secondary-color);
}

/* A column too narrow for room, guest, payment and button on one line --
   a phone, or two columns side by side on a laptop -- puts the payment and
   the button under the guest, lined up with the name, and the menu beside
   the name. Decided by the column's own width, and sooner when long room
   names widen the tiles, which are capped here so the guest keeps room. */
.today-col {
  container-type: inline-size;
}

@container (max-width: 519.98px) {
  .today-row {
    grid-template-columns: min(var(--room-tile, 56px), 104px) minmax(0, 1fr) auto;
    grid-template-areas: "room main more" "room end end";
    row-gap: 8px;
  }

  .today-row-room {
    align-self: start;
  }
}

@container (max-width: 639.98px) {
  .has-long-rooms .today-row {
    grid-template-columns: min(var(--room-tile, 56px), 104px) minmax(0, 1fr) auto;
    grid-template-areas: "room main more" "room end end";
    row-gap: 8px;
  }

  .has-long-rooms .today-row-room {
    align-self: start;
  }
}

/* A phone with wide tiles leaves the name too little room for the payment
   and the button side by side, so they take the row's full width. */
@container (max-width: 419.98px) {
  .has-long-rooms .today-row {
    grid-template-areas: "room main more" "end end end";
  }
}

/* The reservation list (reservation_list.html): a search box, the choice
   filters as chips like the room list's and the rates calendar's room type
   pills, and the home page's front desk rows (.today-row) under day or
   month headings. */
.res-search {
  position: relative;
  margin-bottom: 10px;
}

.res-search > .ti {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: var(--bs-secondary-color);
  pointer-events: none;
}

.res-search .form-control {
  padding: 10px 14px 10px 40px;
  border-radius: 12px;
}

.res-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.res-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid #dbe4de;
  border-radius: 2rem;
  background: #fff;
  color: #5b6a61;
  font-size: 0.875rem;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

.res-chip:hover {
  color: #5b6a61;
}

.res-chip.active {
  background: #e3f5e9;
  border-color: var(--lodgehog-primary);
  color: #16201a;
}

.res-chip-label {
  color: #5b6a61;
}

.res-chip .ti-chevron-down {
  font-size: 0.875rem;
}

.dropdown-item.active-option {
  font-weight: 600;
}

/* The date range picker (daterangepicker.html) dressed as a chip: its
   calendar icon, then the readonly input easepick opens from. */
.res-chip-dates .input-group {
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.res-chip-dates .input-group-text {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}

/* Its range text is only used by compact pickers; empty, its margin would
   still push the input away from the icon. */
.res-chip-dates .js-range-text:empty {
  display: none;
}

/* The input is as wide as its text (the placeholder, then the picked range),
   so the chip ends at the same padding as the others. */
.res-chip-dates input {
  field-sizing: content;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  outline: none;
  cursor: pointer;
}

.res-chip-dates input::placeholder {
  color: inherit;
  opacity: 1;
}

/* Without field-sizing (Firefox, Safari before 26.2): widths that fit the
   longest locale. */
@supports not (field-sizing: content) {
  .res-chip-dates input {
    width: 8.5rem;
  }

  .res-chip-dates.active input {
    width: 13.5rem;
  }
}

.res-chip-clear {
  display: inline-flex;
  margin-right: -4px;
  color: #5b6a61;
}

.res-chips-reset {
  font-size: 0.875rem;
  text-decoration: none;
}

.res-list-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--bs-border-color-translucent);
}

.res-period {
  display: flex;
  gap: 6px;
}

.res-list-count {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
}

.res-list {
  container-type: inline-size;
}

.res-list-heading {
  margin: 16px 0 0;
  padding: 0 4px 6px;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

/* A reservation (partials/list_rows.html). On a phone: the guest with the
   pills beside it, the details under both, the usual "Confirmed" left out. */
.res-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.res-row:hover {
  background: rgba(22, 32, 26, 0.025);
}

.res-row.is-done {
  opacity: 0.55;
}

.res-row-guest {
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.res-row-details {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  grid-row: 2;
  gap: 2px 12px;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
}

.res-row-details .ti {
  margin-right: 4px;
}

/* The dates lead the details on a phone, darker than the rest; the table
   keeps them in their column after the room. */
.res-row-dates {
  order: -1;
}

.res-row-range {
  font-weight: 600;
  color: var(--bs-body-color);
}

.res-row-nights {
  margin-left: 6px;
}

.res-row-guests .ti-mood-kid {
  margin-left: 8px;
}

.res-row-code {
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
}

.res-row-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  grid-column: 2;
  grid-row: 1;
  gap: 4px;
}

/* A status and a payment pill stack, beside the details too. */
.res-row.has-status .res-row-end {
  grid-row: 1 / span 2;
}

.res-row.has-status .res-row-details {
  grid-column: 1;
}

.res-row:not(.has-status) .res-row-status,
.res-row-head {
  display: none;
}

.res-list turbo-frame {
  display: block;
}

/* Wide enough for a table: one line a reservation under column headings,
   as compact as the list's old table, the status named on every row. */
@container (min-width: 860px) {
  .res-row {
    grid-template-columns:
      minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.9fr)
      minmax(0, 1fr) 8.5rem 12rem;
    gap: 0 16px;
    padding: 6px 8px;
    font-size: 0.875rem;
  }

  .res-row-details,
  .res-row-end {
    display: contents;
  }

  .res-row-details > span,
  .res-row-end > span {
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .res-row-rooms,
  .res-row-dates {
    color: var(--bs-body-color);
  }

  .res-row-rooms .ti {
    display: none;
  }

  .res-row-dates {
    order: 0;
  }

  .res-row-range {
    font-weight: inherit;
  }

  .res-row:not(.has-status) .res-row-status {
    display: block;
  }

  .res-row-confirmed {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
  }

  .res-row-payment {
    text-align: right;
  }

  .res-row .today-row-pill {
    padding: 1px 8px;
    font-size: 0.75rem;
  }

  .res-row-head {
    display: grid;
    padding-top: 2px;
  }

  .res-row-head:hover {
    background: none;
  }

  .res-row-head span {
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
  }
}

.res-list-more {
  padding: 16px 0 4px;
  text-align: center;
}

.res-list-empty {
  margin-top: 12px;
  padding: 32px 16px;
  border-radius: 12px;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  text-align: center;
}

/* Made-up booking on a property with none yet (reservation_calendar.js
   sampleReservations): on hover it turns into the way to make a real one. */
#dp .sample-reservation-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--lodgehog-primary);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

#dp .sample-reservation-cta:hover {
  background: var(--lodgehog-primary-dark);
}

/* Reservation clipped by the visible window: square off the clipped corner and
   add a chevron so it reads as continuing from / to outside the calendar.
   DayPilot rounds both the outer .scheduler_default_event and the inner, so
   both must be flattened or the outer's corner/box-shadow still shows through. */
/* DayPilot puts eventMarginLeft/Right as inline `left`/width on the outer
   .scheduler_default_event, which also has inline `overflow: hidden`. Making the
   outer's overflow visible lets the inner spill the 5px margin out to the edge
   without moving the outer, so the event's real right/left checkout edge stays put. */
#dp .continues-left.scheduler_default_event,
#dp .continues-right.scheduler_default_event {
  overflow: visible !important;
}

#dp .continues-left.scheduler_default_event,
#dp .continues-left .scheduler_default_event_inner {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

#dp .continues-left .scheduler_default_event_inner {
  /* Cancel eventMarginLeft (5px) so the clipped event bleeds to the calendar edge */
  left: -5px !important;
}

#dp .continues-right.scheduler_default_event,
#dp .continues-right .scheduler_default_event_inner {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

#dp .continues-right .scheduler_default_event_inner {
  /* Cancel eventMarginRight (5px) so the clipped event bleeds to the calendar edge */
  right: -5px !important;
}

#dp .continues-left .scheduler_default_event_inner::before,
#dp .continues-right .scheduler_default_event_inner::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  line-height: 1;
  color: rgba(73, 80, 87, 0.7);
  pointer-events: none;
}

/* Availability count shown on collapsed category rows */
#dp .avail-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
}

#dp .avail-badge.avail-ok {
  background: #e6f4ea;
  color: #2e7d32;
}

#dp .avail-badge.avail-none {
  background: #fdecee;
  color: #c2434f;
}

/* Category rows in the row header read as section headers */
#dp .room-category-row .scheduler_default_rowheader_inner {
  background: #f1f3f5;
  font-weight: 600;
  color: #495057;
}

#dp .scheduler_default_rowheader_inner_text {
  text-overflow: ellipsis;
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
}

#dp .scheduler_default_rowheader_inner_indent {
  margin-left: 0 !important;
}

.scheduler_message_success {
  background-color: rgba(46, 202, 139, .9) !important;
}

.scheduler_message_warning {
  background-color: rgba(226, 155, 56, 0.9) !important;
}

/* Target orderable column headers */
th.orderable {
  position: relative;
  /* To position the pseudo-elements */
}

th.orderable a::after {
  content: '\21C5';
  /* Up arrow character */
  position: relative;
  margin-left: 5px;
}

/* Add an up arrow icon for ascending order */
th.asc a::after {
  content: '\25B2';
  /* Up arrow character */
  position: relative;
  margin-left: 5px;
}

/* Add a down arrow icon for descending order */
th.desc a::after {
  content: '\25BC';
  /* Down arrow character */
  position: relative;
  margin-left: 5px;
}

#div_id_date_of_birth select,
.date-of-birth-field select {
  display: inline-block;
  width: 33%;
}

span.select2 {
  display: block;
  min-width: 0 !important;
}

.select2-container .select2-selection--single {
  height: 40px !important;
}

/* Select2 appends its dropdown to <body> with z-index 1051, which is below the
   Bootstrap modal (1055). Inside a modal the dropdown then opens *behind* the
   modal, so clicking the field looks like nothing happens. */
.select2-container--open {
  z-index: 999999;
}

.alert-info a {
  color: #174850;
}

.select2-selection__arrow {
  display: none;
}

.input-group.hack-to-make-invalid-visible~.valid-feedback,
.input-group.hack-to-make-invalid-visible~.invalid-feedback,
.hack-to-make-invalid-visible~.invalid-feedback {
  display: block;
}

.line-div {
  flex: 1;
  /* flex-grow */
}

.the-line {
  height: 33%;
  border-bottom: 1px solid #bbb;
  margin: 0 5px;
}

.bg-light-gray {
  background-color: #f2f2f2;
}

.jsign-wrapper .btn {
  background-color: #d2d3d2;
  float: right;
  padding: 2px;
  font-size: 0.8em;
}

.jsign-wrapper~.valid-feedback,
.jsign-wrapper~.invalid-feedback {
  display: block;
}

.fieldset {
  border: 1px solid #ddd;
  margin: 0.3em 0.3em 1.3em 0.3em;
}

.fieldset div {
  text-align: left;
  margin-left: 0.5em;
  margin-top: -0.9em;
}

.fieldset div span {
  background: #fff;
  padding: 5px 10px;
  position: relative;
  font-weight: bold;
}

.fieldset p {
  padding: 3px;
  margin: 0;
}

.p-05 {
  padding: .065rem !important;
}

.me-05 {
  margin-right: .125rem !important;
}

/* Booking engine dashboard */
.be-badge-xs {
  font-size: 0.7rem;
}

.be-amenity-badge {
  font-size: 0.75rem;
}

.be-amenity-badge i {
  font-size: 0.9rem;
}

.be-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.be-gallery-hero {
  width: 100%;
  height: 180px;
}

.be-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.be-gallery-thumb {
  height: 64px;
}

.be-photo-placeholder {
  height: 180px;
}

.be-photo-square {
  aspect-ratio: 4 / 3;
}

.be-logo-thumb {
  width: 48px;
  height: 48px;
  padding: 4px;
}

.be-photo-more {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.be-photo-link {
  transition: opacity 0.15s ease-in-out;
}

.be-photo-link:hover {
  opacity: 0.8;
}

.be-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-overline {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

.be-room-card--off {
  opacity: 0.65;
}

.progress-thin {
  height: 8px;
}

.reservation {
  display: inline-block;
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-top-width: 4px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(30, 41, 59, 0.12);
}

.reservation.pre-reservation {
  border-top-color: var(--res-pr);
  background: var(--res-pr-bg);
}

.reservation.confirmed {
  border-top-color: var(--res-cn);
  background: var(--res-cn-bg);
}

.reservation.checked-in {
  border-top-color: var(--res-ci);
  background: var(--res-ci-bg);
}

.reservation.checked-out {
  border-top-color: var(--res-co);
  background: var(--res-co-bg);
}

/* multi upload widget */
.upload-progress-stats {
  display: none;
}

.scheduler_default_selected {
  border-radius: var(--dp-scheduler-event-border-radius, 8px);
  box-shadow: 0 0 0 2px rgba(47, 85, 212, 0.55);
}

/* START OF RATE PLANS */
/* TODO: see note on SingleAdjustmentWidget */
#div_id_occupancy_adjustments select,
#div_id_day_of_week_adjustments select,
#div_id_additional_adjustments select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
  padding-right: 30px;
}

#div_id_occupancy_adjustments fieldset legend.form-label,
#div_id_day_of_week_adjustments fieldset legend.form-label,
#div_id_children_adjustments fieldset legend.form-label,
#div_id_cancellation_policy fieldset legend.form-label,
#div_id_additional_adjustments fieldset legend.form-label,
#div_id_max_stay fieldset legend.form-label {
  display: none;
}

#id_occupancy_adjustments_0,
#id_day_of_week_adjustments_0,
#id_children_adjustments_0,
#id_additional_adjustments_0,
#id_max_stay_0 {
  border: initial;
}

#id_occupancy_adjustments_0 input.form-control,
#id_day_of_week_adjustments_0 input.form-control,
#id_children_adjustments_0 input.form-control,
#id_additional_adjustments_0 input.form-control,
#id_max_stay_0 input.form-control {
  display: inline-block;
  width: auto;
  padding: 0;
  margin-right: .35rem;
  border: none;
  -webkit-appearance: radio;
  appearance: radio;
  box-shadow: none;
}

#id_occupancy_adjustments_0 input.form-control:checked,
#id_day_of_week_adjustments_0 input.form-control:checked,
#id_children_adjustments_0 input.form-control:checked,
#id_additional_adjustments_0 input.form-control:checked,
#id_max_stay_0 input.form-control:checked {
  accent-color: #2f55d4;
  background-color: transparent;
  border-color: transparent;
}

#id_occupancy_adjustments_0 label,
#id_day_of_week_adjustments_0 label,
#id_children_adjustments_0 label,
#id_additional_adjustments_0 label,
#id_max_stay_0 label {
  font-weight: normal;
}

#id_day_of_week_adjustments_overall,
#id_occupancy_adjustments_overall,
#id_additional_adjustments_overall,
#id_max_stay_overall {
  display: none;
}

#div_id_day_of_week_adjustments fieldset,
#div_id_occupancy_adjustments fieldset,
#div_id_children_adjustments fieldset,
#div_id_cancellation_policy fieldset,
#div_id_additional_adjustments fieldset,
#div_id_max_stay fieldset {
  border: 1px solid #dadada;
  border-radius: 5px;
}

#id_children_adjustments_1,
#id_children_adjustments_2 {
  display: unset;
  width: unset;
}

/* Small screens: the occupancy / day-of-week price tables become stacked
   cards (one per row) instead of a table you have to scroll sideways.
   Only `display` changes here - the DOM stays <table><tr><td>, so the
   jQuery row selectors in the widget templates (tbody tr, tr.eq(), etc.)
   keep working unmodified. */
@media (max-width: 575.98px) {
  #div_id_occupancy_adjustments table.table thead,
  #div_id_day_of_week_adjustments table.table thead {
    display: none;
  }

  #div_id_occupancy_adjustments table.table,
  #div_id_occupancy_adjustments table.table tbody,
  #div_id_occupancy_adjustments table.table tr,
  #div_id_occupancy_adjustments table.table td,
  #div_id_day_of_week_adjustments table.table,
  #div_id_day_of_week_adjustments table.table tbody,
  #div_id_day_of_week_adjustments table.table tr,
  #div_id_day_of_week_adjustments table.table td {
    display: block;
    width: 100%;
  }

  #div_id_occupancy_adjustments table.table tr,
  #div_id_day_of_week_adjustments table.table tr {
    border: 1px solid #dadada;
    border-radius: 8px;
    margin-bottom: .75rem;
    padding: .6rem .75rem;
  }

  #div_id_occupancy_adjustments table.table tr.table-light,
  #div_id_day_of_week_adjustments table.table tr.table-light {
    background-color: #f8f9fa;
  }

  #div_id_occupancy_adjustments table.table td,
  #div_id_day_of_week_adjustments table.table td {
    border: none;
    padding: .3rem 0;
  }

  #div_id_occupancy_adjustments table.table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: .15rem;
  }

  /* Give the amount/select controls the full card width to work with */
  #div_id_occupancy_adjustments table.table .input-group,
  #div_id_day_of_week_adjustments table.table .input-group {
    width: 100%;
  }
}

/* Additional fee: amount and the logic dropdown (per reservation, percent,
   per person, ...) share a row when there's room and each take a full row
   of their own when there isn't - no forced stacking or scrolling either way */
#div_id_additional_adjustments .additional-fee-amount {
  flex: 1 1 140px;
  max-width: 200px;
}

#div_id_additional_adjustments .additional-fee-logic {
  flex: 2 1 180px;
}

#div_id_additional_adjustments .additional-fee-logic select {
  width: 100%;
}

@media (max-width: 400px) {
  #div_id_additional_adjustments .additional-fee-amount {
    max-width: none;
  }
}

/* END OF RATE PLAN */

/* START OF RESERVATION PRICING */
#div_id_pricing fieldset legend.form-label {
  display: none;
}

#id_pricing_base {
  display: none;
  /* hide element that is cloned */
}

#empty_id_pricing {
  display: none;
}

#table_id_pricing select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
  padding-right: 30px;
}

/* END OF RESERVATION PRICING */

#pricing_table th:nth-child(2),
#pricing_table th:nth-child(5),
#pricing_table th:nth-child(6),
#pricing_table td:nth-child(6),
#pricing_table td:nth-child(2),
#pricing_table tr.dynamic-form-add {
  display: none;
}

/* START OF AUTOCOMPLETE */

/* Prevent iOS zoom-on-focus (requires font-size >= 16px) */
#autocomplete,
#autocomplete-mobile {
  font-size: 16px;
}

.search-wrapper {
  position: relative;
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 420px;
  max-height: 480px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  z-index: 1050;
  animation: searchDropdownIn 0.15s ease;
}

@keyframes searchDropdownIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-group-header {
  padding: 8px 14px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #adb5bd;
}

.search-group-header:not(:first-child) {
  border-top: 1px solid #f0f0f0;
  margin-top: 4px;
  padding-top: 12px;
}

.search-item {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.1s;
}

.search-item:hover,
.search-item.active {
  background: #f5f7fa;
  color: inherit;
  text-decoration: none;
}

.search-item-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #2d3748;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-item-description {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 2px;
}

.search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.search-empty {
  padding: 16px 14px;
  font-size: 0.875rem;
  color: #94a3b8;
  text-align: center;
}

/* Mobile overlay */
.mobile-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1100;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.mobile-search-overlay.open {
  display: block;
  animation: overlayFadeIn 0.15s ease;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.mobile-search-container {
  background: #fff;
  padding: 10px 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  animation: containerSlideIn 0.15s ease;
}

@keyframes containerSlideIn {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Mobile dropdown fills full width of overlay */
#mobile-search-overlay .search-dropdown {
  min-width: unset;
  width: 100%;
  max-height: calc(100svh - 80px);
  border-radius: 0 0 10px 10px;
  border-top: none;
  top: calc(100% + 1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* END OF AUTOCOMPLETE */

fieldset .form-check-label {
  font-weight: normal;
}

ul.errorlist {
  margin: 0;
  padding: 0 0 0 1rem;
}

/* Basic pulsing dot */
.online-dot {
  width: 12px;
  height: 12px;
  background-color: #00b460;
  border-radius: 50%;
  animation: pulse 2s infinite;
  box-shadow: 0 0 10px rgba(0, 159, 85, 0.5);
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.offline-dot {
  width: 12px;
  height: 12px;
  background-color: #b48d00;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(159, 125, 0, 0.5);
}

#div_id_require_prepayment label {
  font-size: 1em;
}

.table-condensed td span {
  color: black;
}

#overview #div_id_date_range label {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.blocked-dates .scheduler_default_event_inner {
  background: repeating-linear-gradient(45deg, #f8f9fa, #f8f9fa 10px, #e9ecef 10px, #e9ecef 20px) !important;
  border: 1px solid #dee2e6 !important;
  color: #6c757d;
  justify-content: center !important;
  font-weight: bold;
}

/* A room that isn't sellable right now only because it is linked to one that
   was actually booked -- a bedroom inside a sold house, or the house around a
   sold bedroom, whether that is one booking or several overlapping ones (see
   reservations.views._merge_linked_events). There is no booking of its own to
   show here, so it reads the same way .blocked-dates does ("not available"),
   but in its own blue tone rather than grey so the front desk never mistakes
   it for dates someone deliberately blocked. */
.linked-dependency .scheduler_default_event_inner {
  background: repeating-linear-gradient(45deg, #eef5fc, #eef5fc 10px, #dcebf9 10px, #dcebf9 20px) !important;
  border: 1px solid #b8d7f0 !important;
  color: #2f6690;
  justify-content: center !important;
  font-weight: bold;
}

.pending-payment .scheduler_default_event_inner {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 2px dashed rgba(108, 117, 125, 0.5) !important;
  opacity: 0.6;
  position: relative;
}

.iti.iti--allow-dropdown {
  width: 100%;
}

/* Ensure invalid feedback is shown when input inside iti container is invalid 
   (Bootstrap expects input to be direct sibling of feedback, but iti wraps it) */
.iti:has(.is-invalid)+.invalid-feedback {
  display: block;
}

/* --- Lodgehog Rebranding Components --- */

/* Buttons */
.btn {
  font-weight: 600;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem;
  /* Bootstrap default, ensuring consistency */
}

/* Specific overrides for Lodgehog Primary color */
.btn-lodgehog,
.btn-primary,
.btn-success {
  background-color: var(--lodgehog-primary) !important;
  border-color: var(--lodgehog-primary) !important;
  color: white !important;
}

.btn-outline-primary {
  background-color: transparent !important;
  color: var(--lodgehog-primary) !important;
  border-color: var(--lodgehog-primary) !important;
}

.btn-lodgehog:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-lodgehog:active,
.btn-primary:active,
.btn-success:active,
.btn-lodgehog:focus,
.btn-primary:focus,
.btn-success:focus,
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-check:checked+.btn-outline-primary {
  background-color: var(--lodgehog-primary-dark) !important;
  border-color: var(--lodgehog-primary-dark) !important;
  color: white !important;
}

.btn-outline-secondary {
  color: #64748b !important;
  border-color: rgba(100, 116, 139, 0.35) !important;
  background-color: transparent !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary.active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-check:checked+.btn-outline-secondary {
  color: #1e293b !important;
  background-color: rgba(100, 116, 139, 0.12) !important;
  border-color: rgba(100, 116, 139, 0.5) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

.btn-secondary {
  color: #1e293b !important;
  background-color: rgba(100, 116, 139, 0.12) !important;
  border-color: rgba(100, 116, 139, 0.16) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.active,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-check:checked+.btn-secondary {
  color: #1e293b !important;
  background-color: rgba(100, 116, 139, 0.22) !important;
  border-color: rgba(100, 116, 139, 0.28) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

.btn-secondary.dropdown-toggle::after,
.btn-outline-secondary.dropdown-toggle::after {
  border-color: #1e293b !important;
  margin-right: 10px;
}

/* Filter bar "Apply" button: same height as the form-control fields it sits
   next to, rather than the taller default .btn padding. */
.btn-filter-apply {
  padding: 0.375rem 0.75rem;
}

/* Search Input Wrapper */
.search-input-wrapper {
  position: relative;
}

.search-input-wrapper i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 1.1rem;
}

/* Card Overrides */
.card {
  border: 0 !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  border-radius: 1rem !important;
}

/* Main Content */
.main-content,
.page-content {
  /* Attempt to match .main-content style but be careful with existing layout */
  /* flex: 1; display: flex; flex-direction: column; overflow: hidden; */
  /* The existing page-content has padding and width. I'll just ensure bg match */
  background-color: var(--bg-body);
}

.scrollable-area {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
}

/* On mobile the React reservation page is nested inside .layout-specing, which
   already provides the page gutter. Its own horizontal padding — and the
   .container-fluid's below it — would stack into a third and fourth inset, so
   both are dropped: the inner `.row`'s -12px gutter margins then land straight
   on .layout-specing's padding, exactly as they do on the Django pages. */
@media (max-width: 767px) {
  .scrollable-area {
    padding: 1rem 0;
  }

  .scrollable-area > .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }
}

/* App Footer */
.app-footer {
  height: auto;
  min-height: 58px;
  background-color: #fff;
  color: #adb5bd;
  /* Match the header-bar/sidebar-footer shadow instead of Bootstrap's heavier .shadow utility */
  box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
}

.app-footer p {
  line-height: 1.5;
}

.app-footer a {
  transition: color 0.2s ease;
}

.app-footer a:hover {
  color: var(--lodgehog-primary) !important;
}

.app-footer .app-footer-sep {
  color: #ced4da;
}

@media (max-width: 575.98px) {
  .app-footer {
    min-height: auto;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .app-footer .app-footer-inner {
    gap: 0.35rem !important;
  }

  .app-footer p {
    font-size: 0.75rem;
    line-height: 1.4;
  }

  .app-footer #switch-language-widget button {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
  }
}

/* Notifications (bell dropdown, list page, notification-detail sidebar): all
   three render notifications/_notification_item.html. Self-contained on
   purpose -- the row used to borrow the theme's ".features .icon", whose 65px
   default had to be fought with a specificity trick. It no longer does. */
.notification-link {
  color: inherit;
  text-decoration: none;
}

.notification-avatar {
  width: 40px;
  height: 40px;
  /* Set per accent below; these are the fallbacks. */
  background-color: rgba(47, 85, 212, 0.1);
  color: #2f55d4;
}

.notification-avatar i {
  font-size: 1.15rem;
  line-height: 1;
}

.notification-avatar img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* Category tints: what kind of event this is, when there is no brand mark. */
.notification-avatar--rc {
  background-color: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}

.notification-avatar--rm {
  background-color: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

.notification-avatar--rx,
.notification-avatar--danger {
  background-color: rgba(228, 63, 82, 0.1);
  color: #e43f52;
}

.notification-avatar--py {
  background-color: rgba(13, 148, 136, 0.1);
  color: #0d9488;
}

.notification-avatar--ot {
  background-color: rgba(47, 85, 212, 0.1);
  color: #2f55d4;
}

/* Brand tints, for the channels whose real logo we ship. Colours match
   frontend/src/channel_manager/OTASelector.jsx so one OTA looks like itself
   everywhere in the PMS. */
.notification-avatar--bdc {
  background-color: rgba(0, 58, 154, 0.1);
}

.notification-avatar--abb {
  background-color: rgba(255, 90, 95, 0.1);
}

.notification-avatar--exp {
  background-color: rgba(25, 30, 59, 0.1);
}

.notification-header {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #8492a6;
  text-transform: uppercase;
}

.notification-item.unread .notification-header {
  color: #495057;
  font-weight: 600;
}

.notification-time {
  font-size: 0.72rem;
  color: #8492a6;
}

/* Pure CSS so app.js's markNotificationItemRead(), which only strips .unread
   from the row, makes the dot disappear without touching it. */
.notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--lodgehog-primary, #2f55d4);
  display: none;
}

.notification-item.unread .notification-dot {
  display: block;
}

.notification-day-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.4rem 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8492a6;
  background-color: #f8f9fc;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* min-width:0 lets the flex child's text-truncate actually truncate. */
.min-width-0 {
  min-width: 0;
}

.notification-title {
  font-size: 0.9rem;
  line-height: 1.4;
}

.notification-title.unread {
  font-weight: 600;
}

/* Icon chips under the title -- checkin/nights/price/guests. Small enough to
   wrap cleanly inside the 320px bell dropdown. */
.notification-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.notification-facts .badge {
  font-weight: 500;
  font-size: 0.7rem;
}

.notification-facts .ti {
  font-size: 0.85rem;
  vertical-align: -0.1em;
}

.notification-item {
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.notification-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.notification-item.unread {
  border-left-color: var(--lodgehog-primary, #2f55d4);
}

/* Soft alerts. The vendored theme in bootstrap.min.css paints every .alert-* as a 90%
   solid fill with white text, which shouts. Tint the background instead and keep the
   colour for the text and border. The *-subtle tokens are redefined from the theme's own
   colours too, so bg-warning-subtle cards (overbooking) match instead of Bootstrap's yellow. */
:root {
  --bs-primary-bg-subtle: color-mix(in srgb, #2f55d4 8%, #fff);
  --bs-primary-border-subtle: color-mix(in srgb, #2f55d4 28%, #fff);
  --bs-primary-text-emphasis: color-mix(in srgb, #2f55d4 70%, #000);
  --bs-success-bg-subtle: color-mix(in srgb, #2eca8b 9%, #fff);
  --bs-success-border-subtle: color-mix(in srgb, #2eca8b 32%, #fff);
  --bs-success-text-emphasis: color-mix(in srgb, #2eca8b 50%, #000);
  --bs-info-bg-subtle: color-mix(in srgb, #17a2b8 8%, #fff);
  --bs-info-border-subtle: color-mix(in srgb, #17a2b8 28%, #fff);
  --bs-info-text-emphasis: color-mix(in srgb, #17a2b8 55%, #000);
  --bs-warning-bg-subtle: color-mix(in srgb, #f17425 8%, #fff);
  --bs-warning-border-subtle: color-mix(in srgb, #f17425 28%, #fff);
  --bs-warning-text-emphasis: color-mix(in srgb, #f17425 55%, #000);
  --bs-danger-bg-subtle: color-mix(in srgb, #e43f52 7%, #fff);
  --bs-danger-border-subtle: color-mix(in srgb, #e43f52 25%, #fff);
  --bs-danger-text-emphasis: color-mix(in srgb, #e43f52 60%, #000);
  --bs-secondary-bg-subtle: #f6f7f8;
  --bs-secondary-border-subtle: #dee2e6;
  --bs-secondary-text-emphasis: #41464b;
}

.alert-primary,
.alert-secondary,
.alert-success,
.alert-info,
.alert-warning,
.alert-danger {
  background-color: var(--alert-soft-bg);
  border-color: var(--alert-soft-border);
  color: var(--alert-soft-text);
}

.alert-primary { --alert-soft-bg: var(--bs-primary-bg-subtle); --alert-soft-border: var(--bs-primary-border-subtle); --alert-soft-text: var(--bs-primary-text-emphasis); }
.alert-secondary { --alert-soft-bg: var(--bs-secondary-bg-subtle); --alert-soft-border: var(--bs-secondary-border-subtle); --alert-soft-text: var(--bs-secondary-text-emphasis); }
.alert-success { --alert-soft-bg: var(--bs-success-bg-subtle); --alert-soft-border: var(--bs-success-border-subtle); --alert-soft-text: var(--bs-success-text-emphasis); }
.alert-info { --alert-soft-bg: var(--bs-info-bg-subtle); --alert-soft-border: var(--bs-info-border-subtle); --alert-soft-text: var(--bs-info-text-emphasis); }
.alert-warning { --alert-soft-bg: var(--bs-warning-bg-subtle); --alert-soft-border: var(--bs-warning-border-subtle); --alert-soft-text: var(--bs-warning-text-emphasis); }
.alert-danger { --alert-soft-bg: var(--bs-danger-bg-subtle); --alert-soft-border: var(--bs-danger-border-subtle); --alert-soft-text: var(--bs-danger-text-emphasis); }

.alert-primary .alert-link,
.alert-secondary .alert-link,
.alert-success .alert-link,
.alert-info .alert-link,
.alert-warning .alert-link,
.alert-danger .alert-link {
  color: inherit;
}

/* Product intro pages (channel manager, booking engine): what a hotel sees before setting
   the product up. Same look as the chatbot's intro hero. */
.product-intro-hero {
  border: 0;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(22, 163, 74, 0.1);
  background: linear-gradient(135deg, var(--lodgehog-bg) 0%, var(--lodgehog-light) 50%, #fff 100%);
}

.product-intro-hero h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  line-height: 1.2;
  color: #1a2e1a;
}

.product-intro-badge {
  background: var(--lodgehog-primary);
  color: #fff;
  letter-spacing: 0.02em;
}

.product-intro-icon,
.product-intro-step {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.product-intro-icon {
  background: var(--lodgehog-light);
  color: var(--lodgehog-primary-dark);
  font-size: 1.35rem;
}

.product-intro-step {
  background: var(--lodgehog-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Cancellation policy picker (booking_engine/widgets/cancellation_policy.html):
   a chosen option's details show without any JS, so Turbo morphs can't break it. */
.cancellation-policy__options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
}
.cancellation-policy__option {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
}
.cancellation-policy__option:has(> .cancellation-policy__choice input:checked) {
  border-color: var(--lodgehog-primary);
  box-shadow: 0 0 0 1px var(--lodgehog-primary);
}
.cancellation-policy__choice {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  cursor: pointer;
  margin: 0;
}
.cancellation-policy__choice input {
  margin-top: 0.25rem;
  accent-color: var(--lodgehog-primary);
}
.cancellation-policy__label {
  display: block;
  font-weight: 600;
}
.cancellation-policy__example {
  display: block;
  color: #64748b;
  font-size: 0.875rem;
}
.cancellation-policy__details {
  display: none;
  margin: 0.625rem 0 0 1.5rem;
}
.cancellation-policy__option:has(> .cancellation-policy__choice input:checked) > .cancellation-policy__details {
  display: flex;
}
.cancellation-policy__details:not(.row) {
  flex-direction: column;
}