:root {
   --add-10-black: rgba(0, 0, 0, 0.1);
   --add-20-black: rgba(0, 0, 0, 0.2);
   --add-30-black: rgba(0, 0, 0, 0.3);
   --add-40-black: rgba(0, 0, 0, 0.4);
   --add-50-black: rgba(0, 0, 0, 0.5);
   --add-60-black: rgba(0, 0, 0, 0.6);
   --add-70-black: rgba(0, 0, 0, 0.7);
   --add-80-black: rgba(0, 0, 0, 0.8);
   --add-90-black: rgba(0, 0, 0, 0.9);
   --add-10-gray: rgba(127, 127, 127, 0.1);
   --add-20-gray: rgba(127, 127, 127, 0.2);
   --add-30-gray: rgba(127, 127, 127, 0.3);
   --add-40-gray: rgba(127, 127, 127, 0.4);
   --add-50-gray: rgba(127, 127, 127, 0.5);
   --add-60-gray: rgba(127, 127, 127, 0.6);
   --add-70-gray: rgba(127, 127, 127, 0.7);
   --add-80-gray: rgba(127, 127, 127, 0.8);
   --add-90-gray: rgba(127, 127, 127, 0.9);
   --add-10-white: rgba(255, 255, 255, 0.1);
   --add-20-white: rgba(255, 255, 255, 0.2);
   --add-30-white: rgba(255, 255, 255, 0.3);
   --add-40-white: rgba(255, 255, 255, 0.4);
   --add-50-white: rgba(255, 255, 255, 0.5);
   --add-60-white: rgba(255, 255, 255, 0.6);
   --add-70-white: rgba(255, 255, 255, 0.7);
   --add-80-white: rgba(255, 255, 255, 0.8);
   --add-90-white: rgba(255, 255, 255, 0.9);
}

html {
   font-size: 14px;
}

@media (min-width: 768px) {
   html {
      font-size: 16px;
   }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
   box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
   position: relative;
   min-height: 100%;
}

body {
   margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
   color: var(--bs-secondary-color);
   text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
   text-align: start;
}

.hg-placeholder {
   height: 20rem;
   margin: 1rem;
   padding: 1rem;
   background-color: lightgray;
   color: #676767;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2rem;
   box-shadow: var(--bs-box-shadow);
   border-radius: var(--bs-border-radius);
}

.hg-responsive-image {
   width: 100%;
   height: auto;  
   display: block;
   border-radius: var(--bs-border-radius);
}

.hg-scroll-wrap {
   position: relative;
   height: 100%;
}

   .hg-scroll-wrap .hg-scroll-content {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      overflow-y: auto;
      overflow-x: auto;
      width: 100%;
   }

.hg-resource-availability {
}

   .hg-resource-availability .hg-time-slot-container {
      border: 1px solid #dee2e6;
      border-radius: .25rem;
      background-color: #fff;
      padding: 0.5rem 1rem;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      grid-gap: 0.5rem;
   }

   .hg-resource-availability .hg-slot {
      min-width: 100px;
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0.5rem 0.75rem;
      border-radius: .25rem;
      border-bottom-width: initial;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
   }

      .hg-resource-availability .hg-slot:active.hg-available {
         box-shadow: 0 -1px 2px transparent;
      }

      .hg-resource-availability .hg-slot.hg-available {
         background-color: #e6ffe6;
      }

      .hg-resource-availability .hg-slot.hg-booked {
         background-color: #ffe6e6;
         cursor: not-allowed;
      }

      .hg-resource-availability .hg-slot:hover.hg-available {
         background-color: #abf3ab;
      }

      .hg-resource-availability .hg-slot.hg-selected {
         border-radius: .25rem;
         background-color: #64ceff;
         cursor: pointer;
      }

         .hg-resource-availability .hg-slot.hg-selected:hover {
            border-radius: .25rem;
            background-color: #51a5cc;
            cursor: pointer;
         }

.hg-payment-container {
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.hg-payment-element {
   padding: 1.5rem;
   border: 1px solid #dee2e6;
   border-radius: 0.375rem;
   background-color: #f8f9fa;
}

.hg-stripe-button {
   background-color: #6772E5;
   border-color: #6772E5;
}

   .hg-stripe-button:hover {
      background-color: #5469d4;
      border-color: #5469d4;
   }

.hg-spinner-border-sm {
   width: 1rem;
   height: 1rem;
}

.hg-select-date-bar {
   width: 100%;
   display: flex;
   justify-content: center;
   padding: .35rem;
}

.hg-date-button {
   cursor: pointer;
   padding: .1rem .35rem;
   margin: 0 .35rem;
   background-color: var(--add-10-black);
   border-radius: .35rem;
   display: flex;
   justify-items: center;
   align-items: center;
}

.hg-date-button:hover {
   background-color: var(--add-20-black);
}

.hg-availability-loader {
   background-color: var(--add-50-gray);
   z-index: 1000;
   border-radius: inherit;
}

[x-cloak] {
   display: none !important;
}