@charset "UTF-8";
:root {
  --text-color: rgb(34, 38, 42);
  --logo-color: rgb(85, 85, 221);
  --logo-color-lighter: rgb(127, 127, 246);
  --logo-color-darker-10: rgb(60, 60, 215);
  --logo-color-darker-50: rgb(25, 25, 127);
  --logo-color-step-1: rgb(85 85 221 / 10%);
  --logo-color-step-2: rgb(85 85 221 / 20%);
  --logo-color-step-3: rgb(85 85 221 / 30%);
  --logo-color-step-5: rgb(85 85 221 / 50%);
  --color-blue-50: rgb(239, 246, 255);
  --color-blue-100: rgb(219, 234, 254);
  --color-blue-200: rgb(190 219 255);
  --color-blue-300: rgb(142 197 255);
  --color-blue-400: rgb(81 162 255);
  --color-blue-500: rgb(43 127 255);
  --color-blue-600: rgb(21 93 252);
  --color-blue-700: rgb(20 71 230);
  --color-blue-800: rgb(25 60 184);
  --color-blue-900: rgb(28 57 142);
  --color-gray-50: #f8f9f9;
  --color-gray-100: #f1f2f4;
  --color-gray-200: #e4e6e9;
  --color-gray-300: rgb(214, 217, 222);
  --color-gray-400: #c8ccd3;
  --color-gray-500: #b3b9c2;
  --color-gray-600: #848d9c;
  --color-gray-700: #6b7585;
  --color-gray-800: #565d6b;
  --color-gray-900: #404650;
  --color-slate: #1e293b;
  --color-slate-50: #f8fafc;
  --color-slate-100: rgb(241, 245, 249);
  --color-slate-200: rgb(226, 232, 240);
  --color-slate-300: rgb(203, 213, 225);
  --color-slate-400: rgb(148, 163, 184);
  --color-slate-500: rgb(100, 116, 139);
  --color-slate-600: rgb(71, 85, 105);
  --color-slate-700: rgb(51, 65, 85);
  --color-slate-800: rgb(30 41 59);
  --color-slate-900: rgb(15 23 42);
  --color-danger-50: #fcf2f4;
  --color-danger-100: rgb(250 229 233);
  --color-danger-200: #f5ccd3;
  --color-danger-300: #f0b2bd;
  --color-danger-400: #eb99a6;
  --color-danger-500: #e37285;
  --color-danger-600: #d22a46;
  --color-danger-700: rgb(176, 35, 58);
  --color-danger-800: rgb(141, 28, 47);
  --color-danger-900: #6a1523;
  --color-success-50: rgb(234 252 242);
  --color-success-100: rgb(214 250 228);
  --color-success-200: rgb(172 245 201);
  --color-success-300: rgb(131 240 174);
  --color-success-400: rgb(89 234 147);
  --color-success-500: rgb(28 226 107);
  --color-success-600: rgb(17 140 66);
  --color-success-700: rgb(14 117 55);
  --color-success-800: rgb(12 93 44);
  --color-success-900: rgb(9 70 33);
  --color-success: #149d14;
  --color-success-darker: #0f7d0f;
  --color-warning-50: #fdf8ef;
  --color-warning-100: #fbf2de;
  --color-warning-200: #f7e4be;
  --color-warning-300: #f4d79d;
  --color-warning-400: #f0c97d;
  --color-warning-500: #eab54c;
  --color-warning-600: #c48a17;
  --color-warning-700: #a37313;
  --color-warning-800: #825c0f;
  --color-warning-900: #62450b;
  --color-warning: #ffcb57;
  --color-warning-darker: #e59e00;
  --header-font: "Inter", "Segoe UI", "Helvetica Neue", sans-serif;
  --text-font: "Lato", "Arial Nova", sans-serif;
}

html {
  color: var(--text-color);
}

a {
  text-decoration: none;
  color: inherit;
}

.authentication-body {
  background-color: #fff;
  padding: 15px;
}

li,
ul {
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
  overflow-x: hidden;
}

button {
  color: inherit;
}
button span {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

fieldset,
figure {
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-block-start: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  padding-block-end: 0;
  min-inline-size: -moz-min-content;
  min-inline-size: min-content;
  border-width: 0;
  border-style: none;
  border-color: unset;
  -o-border-image: none;
     border-image: none;
}

input {
  border: 0;
  outline: 0;
  margin: 0;
}

input[type=text],
input[type=email] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.load-none {
  display: none !important;
  transition: unset !important;
}

.fill-main {
  height: 100dvh;
  width: 100%;
}

.ai-toolbar {
  position: fixed;
  background-color: #fff;
  width: 500px;
  z-index: 150;
}

button {
  outline: 0 !important;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  background-color: transparent;
  transition: box-shadow 0.2s ease-in, background-color 0.2s ease-in, color 0.2s ease-in;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
button span, button.save::after {
  display: block;
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
button.loading span {
  opacity: 0;
  transform: translateY(5px);
}
button.loading::after {
  opacity: 0;
  transform: translateY(5px);
}

.style-disabled:disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

.accordian {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}
.accordian-list {
  font-size: 0.9rem;
}
.accordian-text, .accordian-list {
  overflow: hidden;
  margin: 0;
  opacity: 0;
  transition: opacity 0.45s ease, margin 0.1s ease;
}
.accordian-list-item {
  margin-left: 32px;
  padding: 5px 0px;
}
.accordian.active {
  grid-template-rows: 1fr;
  opacity: 1;
}
.accordian.active .accordian-text {
  opacity: 1;
}
.accordian.active .accordian-list {
  margin: 3px 0px;
  opacity: 1;
}

.accordian-container {
  border-bottom: 1px solid var(--color-slate-300);
  max-width: 750px;
}

.accordian-inner::after {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%236b7585'%3E%3Cpath d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/%3E%3C/svg%3E");
  width: 24px;
  height: 24px;
}
.accordian-inner:hover::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23000000'%3E%3Cpath d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/%3E%3C/svg%3E");
}

.accordian-content {
  line-height: 24px;
}

.active.accordian-inner::after {
  transform: translateY(-50%) rotate(-90deg);
}

.calendar.standard {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: transform 0.2s ease-in, opacity 0.2s ease-in;
  opacity: 0;
  background-color: #fff;
  width: 325px;
  left: 50%;
  transform: translate(-50%, 10px);
  box-shadow: 0px 0px 0px 1px var(--color-gray-400), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font: 600 0.85rem var(--header-font);
}
.calendar.standard.active {
  transform: translate(-50%, 0px);
  pointer-events: all;
  opacity: 1;
}
.calendar.standard .--month-wrapper {
  padding: 15px 15px 0px;
}
.calendar.standard .--chevron {
  --chevron-color: var(--text-color);
}
.calendar.standard .--dates-holder {
  padding: 10px;
}
.calendar.standard .--dates-holder .--row-holder .date.active {
  background-color: var(--logo-color);
  color: #fff;
  border-radius: 100%;
}
.calendar.standard .--dates-holder .--row-holder .date:hover:not(.active) {
  border-radius: 100%;
  background-color: var(--color-gray-100);
}

.code-search-list {
  background: #fff;
  display: none;
  position: absolute;
  width: 300px;
  z-index: 2;
}
.code-search-list.active {
  display: block;
}

.code-search-item:hover {
  background-color: var(--color-slate-100);
}

.color-picker-full-container {
  min-width: 80px;
}
.color-picker-full-container:not(.hide-hex)::after {
  content: attr(data-hex-value);
  font: 400 0.7rem var(--header-font);
}
.color-picker-full-container.active {
  box-shadow: 0px 0px 0px 1px #8b95a2, 0px 1px 5px rgba(0, 0, 0, 0.4392156863), 0px 1px 2px 0px rgba(0, 0, 0, 0.2392156863);
}
.color-picker-full-container.active .color-picker-preview-box {
  box-shadow: 0px 0px 0px 1px #8b95a2, 0px 1px 5px rgba(0, 0, 0, 0.4392156863), 0px 1px 2px 0px rgba(0, 0, 0, 0.2392156863);
}
.color-picker-full-container .color-picker-preview-box {
  height: 22px;
  width: 22px;
  border-radius: 4px;
  transition: unset;
  border: 2px solid #fff;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
}
.color-picker-full-container .color-picker-preview-box:hover {
  box-shadow: 0px 0px 0px 1px #8b95a2, 0px 1px 5px rgba(0, 0, 0, 0.4392156863), 0px 1px 2px 0px rgba(0, 0, 0, 0.2392156863);
}

.color-picker-container {
  position: fixed;
  background: #fff;
  width: 200px;
  opacity: 0;
  z-index: 999999;
  visibility: hidden;
  transform: translateY(10px);
  transition: visibility 0.2s ease-in, opacity 0.2s ease-in, transform 0.2s ease-in;
  box-shadow: 0px 0px 0px 1px #8b95a2, 0px 1px 5px rgba(0, 0, 0, 0.4392156863), 0px 1px 2px 0px rgba(0, 0, 0, 0.2392156863);
}
.color-picker-container.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.color-picker-container .palette-container .palette {
  height: 150px;
  width: 200px;
}
.color-picker-container .palette-container .picker {
  top: 10%;
  left: 20%;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  border: 2px solid #fff;
  position: absolute;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.color-picker-container .choices {
  width: 100%;
}
.color-picker-container .choices .picker {
  position: absolute;
  height: 8px;
  width: 6px;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3019607843);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  cursor: pointer;
  background: #fff;
  border-radius: 2px;
}
.color-picker-container .choices .slider {
  height: 12px;
  width: 100%;
  border-radius: 2px;
}
.color-picker-container .choices .colors .picker {
  left: calc(50% - 7px);
}
.color-picker-container .choices .colors .slider {
  background: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);
}
.color-picker-container .choices .opacity {
  background-image: linear-gradient(45deg, #dddddd 25%, transparent 25%), linear-gradient(-45deg, #dddddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dddddd 75%), linear-gradient(-45deg, transparent 75%, #dddddd 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}
.color-picker-container .choices .opacity .picker {
  left: calc(100% - 7px);
}
.color-picker-container .choices .opacity .slider {
  background: linear-gradient(to right, rgba(23, 20, 79, 0) 0%, rgb(23, 20, 79) 100%);
}
.color-picker-container .preview {
  height: 28px;
  width: 28px;
  flex-shrink: 0;
  background-image: linear-gradient(45deg, #dddddd 25%, transparent 25%), linear-gradient(-45deg, #dddddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dddddd 75%), linear-gradient(-45deg, transparent 75%, #dddddd 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  overflow: hidden;
  box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25), inset 0px 0px 4px rgba(0, 0, 0, 0.25);
}
.color-picker-container .preview .preview-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25), inset 0px 0px 4px rgba(0, 0, 0, 0.25);
}
.color-picker-container .color-inputs {
  justify-content: space-evenly;
}
.color-picker-container .color-inputs .rgb,
.color-picker-container .color-inputs .hex {
  font-size: 0.75rem;
  text-align: center;
  font-family: var(--text-font);
  margin: 10px 0px 3px;
  border: 0px;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  outline: 0px !important;
  border-radius: 2px;
}
.color-picker-container .color-inputs .hex {
  width: 50px;
}
.color-picker-container .color-inputs .rgb {
  width: 25px;
}
.color-picker-container .suggested-colors {
  gap: 7px;
}
.color-picker-container .suggested-colors .suggested-color {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.4);
  --tooltip-top: 22px;
}
.color-picker-container .suggested-colors .suggested-color::before {
  text-align: center;
}
.color-picker-container .suggested-colors .suggested-color::after {
  content: "";
  background-image: linear-gradient(45deg, #dddddd 25%, transparent 25%), linear-gradient(-45deg, #dddddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dddddd 75%), linear-gradient(-45deg, transparent 75%, #dddddd 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.create-dropdown {
  right: 0;
  top: 38px;
}
.create-dropdown li {
  width: 190px;
}

.text-btn {
  font-weight: 700;
}
.text-btn.logo-color {
  color: var(--logo-color);
}
.text-btn.underline-hover {
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.text-btn.underline-hover:hover {
  border-bottom: 1px solid var(--logo-color);
}

.dashed-btn {
  height: 40px;
  border: 1px dashed var(--color-slate-500);
  margin-top: 5px;
  border-radius: 2px;
  color: var(--color-slate-600);
  width: 100%;
  box-sizing: border-box;
}
.dashed-btn:before {
  content: "+";
  margin-right: 5px;
  font-weight: 400;
  font-family: "Inter";
  color: var(--color-slate-600);
}
.dashed-btn:hover {
  background-color: var(--color-slate-100);
  transition: background-color 0.3s ease;
}

button:disabled {
  cursor: default;
}

.darker-box-hover:hover {
  box-shadow: 0px 0px 0px 1px #8b95a2, 0px 1px 5px rgba(0, 0, 0, 0.4392156863), 0px 1px 2px 0px rgba(0, 0, 0, 0.2392156863);
}

.text-btn {
  box-shadow: unset;
  background: transparent;
}
.text-btn:hover {
  color: var(--logo-color);
}
.text-btn.logo-color {
  color: var(--logo-color);
}

.success-btn {
  background: var(--color-success-600);
  color: #fff;
  box-shadow: 0px 0px 0px 1px var(--color-success-700), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--color-success-800);
}
.success-btn:hover {
  border-bottom: 1px solid var(--color-success-700);
  background: var(--color-success-700);
  box-shadow: 0px 0px 0px 1px var(--color-success-900), 0px 5px 12px 0px rgba(0, 0, 0, 0.25);
}

.delete-btn {
  font-weight: 600;
  font-family: Inter;
  background: var(--color-danger-600);
  text-shadow: 0px 1px 1px var(--color-danger-800);
  box-shadow: 0px 0px 0px 1px var(--color-danger-700), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  color: #fff;
  position: relative;
}
.delete-btn:hover {
  background: var(--color-danger-700);
  box-shadow: 0px 0px 0px 1px var(--color-danger-800), 0px 5px 12px 0px rgba(0, 0, 0, 0.25);
}
.delete-btn::after {
  content: "";
  background-image: radial-gradient(75% 75% at center top, color-mix(in srgb, rgba(255, 255, 255, 0.73) 20%, transparent), transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.icon-btn {
  box-shadow: 0px 0px 0px 0px var(--color-slate-200), 0px 2px 5px 1px rgba(0, 0, 0, 0);
}

.icon-btn:hover {
  box-shadow: 0px 0px 0px 1px var(--color-slate-200), 0px 2px 10px 1px rgba(0, 0, 0, 0.1);
}

.small-btn {
  height: 34px;
  font-size: 12px;
}

.tall-btn {
  height: 44px;
}

.taller-btn {
  height: 48px;
}

.wide-btn {
  padding: 0 25px;
}

.full-btn {
  background: var(--logo-color);
  color: #fff;
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0px 1px 1px var(--logo-color-darker-10);
  position: relative;
}
.full-btn:disabled {
  opacity: 0.5;
}
.full-btn::after {
  content: "";
  background-image: radial-gradient(75% 75% at center top, color-mix(in srgb, rgba(255, 255, 255, 0.6588235294) 20%, transparent), transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.secondary-btn {
  background: var(--color-gray-50);
  color: var(--color-gray-900);
  box-shadow: 0px 0px 0px 1px var(--color-gray-400), 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  text-shadow: 0px 1px 1px var(--color-gray-100);
  position: relative;
}
.secondary-btn:hover {
  box-shadow: 0px 0px 0px 1px var(--color-gray-900), 0px 2px 5px 1px rgba(0, 0, 0, 0.15);
}
.secondary-btn:disabled {
  opacity: 0.5;
}
.secondary-btn::before {
  content: "";
  background-image: radial-gradient(75% 75% at center top, color-mix(in srgb, rgba(255, 255, 255, 0.6588235294) 20%, transparent), transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.warning-btn {
  background: #cd9d3d;
  color: #fff;
  box-shadow: 0px 0px 0px 1px var(--color-warning-700), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0px 1px 3px var(--color-warning-700);
  position: relative;
}
.warning-btn:hover {
  background-color: var(--color-warning-700);
  box-shadow: 0px 0px 0px 1px var(--color-warning-700), 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.warning-btn::after {
  content: "";
  background-image: radial-gradient(75% 75% at center top, color-mix(in srgb, rgba(255, 255, 255, 0.6588235294) 20%, transparent), transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.tertiary-btn {
  background: rgb(41, 189, 130);
  --darker: rgb(15 132 85);
  color: #fff;
  box-shadow: 0px 0px 0px 1px var(--darker), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0px 1px 1px var(--darker);
  position: relative;
}
.tertiary-btn:hover {
  background-color: var(--darker);
  box-shadow: 0px 0px 0px 1px var(--darker), 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.tertiary-btn::after {
  content: "";
  background-image: radial-gradient(75% 75% at center top, color-mix(in srgb, rgba(255, 255, 255, 0.6588235294) 20%, transparent), transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.gradient-btn {
  background: linear-gradient(45deg, #8829bf, #7d7af1);
  color: #fff;
  box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
}
.gradient-btn:not(:disabled):hover {
  box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.25);
}

.dark-btn,
.slate-btn {
  background: var(--color-slate-700);
  color: #fff;
  box-shadow: 0px 0px 0px 1px var(--color-slate-900), 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  text-shadow: 0px 1px 1px var(--color-slate-900);
  position: relative;
}
.dark-btn:not(:disabled):hover,
.slate-btn:not(:disabled):hover {
  background: var(--color-slate-800);
  box-shadow: 0px 0px 0px 1px var(--color-gray-900), 0px 2px 5px 1px rgba(0, 0, 0, 0.15);
}
.dark-btn:not(:disabled):hover::after,
.slate-btn:not(:disabled):hover::after {
  background-image: radial-gradient(75% 75% at center bottom, color-mix(in srgb, rgba(255, 255, 255, 0.6588235294) 20%, transparent), transparent);
}
.dark-btn:disabled,
.slate-btn:disabled {
  opacity: 0.5;
}
.dark-btn::after,
.slate-btn::after {
  content: "";
  background-image: radial-gradient(110% 15% at center top, color-mix(in srgb, rgba(255, 255, 255, 0.56) 30%, transparent), transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.new-clear-btn {
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0px 3px 5px -1px rgba(0, 0, 0, 0.15), 0px 0px 0px 1px rgba(0, 0, 0, 0.12);
}
.new-clear-btn:hover {
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1), 0px 3px 9px -1px rgba(0, 0, 0, 0), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}
.new-clear-btn:disabled {
  opacity: 0.5;
}

.clear-btn {
  background: transparent;
  box-shadow: 0px 0px 0px;
  padding: 0;
  color: var(--logo-color);
}

.white-btn {
  background: #fff;
  color: var(--text-color);
  box-shadow: 0px 0px 0px 1px #fff, 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
}

.white-btn:hover {
  color: #fff;
}

.rounded {
  border-radius: 100px;
}

.search-results-box {
  display: none;
}
.search-results-box.active {
  display: flex;
}

.full-btn:not(:disabled):hover,
.white-btn:not(:disabled):hover {
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10), 0px 5px 12px 0px rgba(0, 0, 0, 0.25);
  background-color: var(--logo-color-darker-10);
}

.full-btn:not(:disabled):hover::after {
  background-image: radial-gradient(75% 75% at center bottom, color-mix(in srgb, rgba(255, 255, 255, 0.6588235294) 20%, transparent), transparent);
}

.white-btn.to-slate:not(:disabled):hover {
  box-shadow: 0px 0px 0px 1px var(--color-slate), 0px 5px 12px 0px rgba(0, 0, 0, 0.25);
  background-color: var(--color-slate-600);
}

.outline-btn {
  background: transparent;
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10);
}

.outline-btn:not(:disabled):hover {
  background: var(--logo-color);
  box-shadow: 0px 0px 0px 2px var(--logo-color-step-5);
  color: #fff;
}

.coding-list {
  white-space: nowrap;
  font-family: "Cascadia Code", sans-serif;
  font-size: 14px;
  margin: 7px 0px;
  counter-increment: code-list;
  list-style-type: none;
  position: relative;
  min-height: 16px;
}

.coding-list::before {
  color: #9ca3af;
  content: counter(code-list);
  position: absolute;
  left: -20px;
  top: 1px;
}

.const {
  color: #358cd6;
}

.const-variable {
  color: #4fc1ff;
}

.comment {
  color: #6a9955;
}

.function {
  color: #dcdcaa;
}

.bracket {
  color: #f1d700;
}

.string {
  color: #ce9178;
}

.await {
  color: #c586c0;
}

.other {
  color: #9cdcfe;
}

.marquee {
  display: flex;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  gap: var(--gap);
  -webkit-mask-image: linear-gradient(var(--mask-direction, to right), hsla(0, 0%, 0%, 0), hsl(0, 0%, 0%) 20%, hsl(0, 0%, 0%) 80%, hsla(0, 0%, 0%, 0));
          mask-image: linear-gradient(var(--mask-direction, to right), hsla(0, 0%, 0%, 0), hsl(0, 0%, 0%) 20%, hsl(0, 0%, 0%) 80%, hsla(0, 0%, 0%, 0));
}

.marquee-wrapper {
  --size: 280px;
  --gap: calc(var(--size) / 7);
  --duration: 27s;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: auto;
  width: 100vw;
  padding: 15px 0px;
  border-top: 1px solid #7017a3;
  border-bottom: 1px solid #7017a3;
  background: linear-gradient(8deg, #8829bf, #7d7af1);
  color: #fff;
}

.slight-rotate {
  transform: rotate(-10deg) scale(1.05);
}

.marquee-group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: marquee-scroll-x var(--duration) linear infinite;
}
.marquee-group div {
  position: relative;
}
.marquee-group div::after {
  content: "•";
  position: absolute;
  right: -26px;
}

@keyframes marquee-scroll-x {
  from {
    transform: translateX(var(--scroll-start));
  }
  to {
    transform: translateX(var(--scroll-end));
  }
}
.tgl {
  display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
  box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
  background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
  background: none;
}
.tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 35px;
  height: 20px;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.tgl + .tgl-btn:after {
  left: 0;
}
.tgl + .tgl-btn:before {
  display: none;
}
.tgl:checked + .tgl-btn:after {
  left: 50%;
}

.tgl-ios + .tgl-btn {
  background: #fbfbfb;
  border-radius: 10px;
  padding: 2px;
  transition: all 0.4s ease;
  border: 1px solid #e8eae9;
}
.tgl-ios + .tgl-btn:after {
  border-radius: 10px;
  background: #fbfbfb;
  transition: left 0.2s cubic-bezier(0.18, 0.65, 0.52, 0.89), padding 0.2s cubic-bezier(0.18, 0.65, 0.52, 0.89), margin 0.2s cubic-bezier(0.18, 0.65, 0.52, 0.89);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08);
}
.tgl-ios + .tgl-btn:hover:after {
  will-change: padding;
}
.tgl-ios + .tgl-btn:active {
  box-shadow: inset 0 0 0 10px #e8eae9;
}
.tgl-ios:checked + .tgl-btn {
  background: var(--logo-color);
}
.tgl-ios:checked + .tgl-btn:active {
  box-shadow: none;
}
.tgl-ios:checked + .tgl-btn:active:after {
  margin-left: -0.8em;
}

.chosen-filter.new:hover,
.chosen-filter.new.question.active,
.dropdown.active > .question.dropdown,
.question.dropdown:hover {
  background: #fcfcfc !important;
  box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.0784313725) !important;
}

.chosen-filter.new.question:hover,
.chosen-filter.new.question.active,
.dropdown.active > .question.dropdown,
.question.dropdown:hover {
  color: var(--text-color) !important;
}

.dropdown {
  cursor: pointer;
  font-family: var(--text-font);
  position: relative;
}
.dropdown.active .active-highlight {
  background-color: var(--logo-color-step-3) !important;
}
.dropdown button {
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}
.dropdown .triangle {
  visibility: hidden;
}
.dropdown-list {
  position: absolute;
  max-height: 150px;
  background: #fff;
  overflow-y: overlay;
  border-radius: 4px;
  z-index: 0;
  visibility: hidden;
  list-style: none;
}
.dropdown-list.active {
  visibility: visible;
  z-index: 102;
}

.dropdown.active > .triangle {
  visibility: visible;
}

.dropdown.active > ul {
  padding: 5px;
}

.dropdown.active > ul.float-right {
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% + 10px);
}

.dropdown.active > ul.align-right {
  top: 34px;
  right: 0;
}

.dropdown.active > ul.align-right > li {
  text-align: end;
  justify-content: end;
  padding: 6px 21px 6px 6px;
}

.dropdown > button > span {
  pointer-events: none;
  text-overflow: ellipsis;
  overflow: hidden;
}

.dropdown > div > span,
.dropdown > button:not(.symbol-drop):not(.question) {
  margin: 0px 4px;
  transition: background-color 0.25s ease;
}

.dropdown > button:not(.symbol-drop):not(.question) {
  margin: 0px;
  transition: background-color 0.25s ease, outline 0.25s ease, box-shadow 0.2s ease-in;
  background: transparent;
  border: 0;
  border-radius: 3px;
  outline: 3px solid transparent;
}

.dropdown:hover > div > span,
.dropdown.active > div > span {
  background: #3a3c46;
}

.dropdown:hover > button:not(.symbol-drop),
.dropdown.active > button:not(.symbol-drop) {
  background: rgba(255, 255, 255, 0.1803921569);
  outline: 3px solid rgba(255, 255, 255, 0.1803921569);
}

.dropdown-modal {
  width: 400px;
  height: 410px;
  scale: 1.1;
  opacity: 0;
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in, scale 0.25s cubic-bezier(0.47, 1.2, 1, 1);
  transform-origin: left top;
  transform: translate(-50%, -50%);
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 13;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
}
.dropdown-modal.active {
  opacity: 1;
  scale: 1;
  visibility: visible;
}
.dropdown-modal.loading button {
  pointer-events: none;
}
.dropdown-modal .header {
  font: 600 1.4rem var(--header-font);
  margin-left: 15px;
}
.dropdown-modal .subheader {
  font: 500 1rem var(--text-font);
  color: var(--color-slate-500);
  margin-left: 15px;
}
.dropdown-modal .dropdown-modal-default {
  box-sizing: border-box;
  border: 0;
  border-radius: 4px;
  font: 500 1rem var(--text-font);
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  outline: 0px !important;
  margin-left: 15px;
  margin-top: 10px;
}
.dropdown-modal .dropdown-modal-default-btn {
  height: 100%;
  width: 100%;
  text-align: start;
  padding: 13px 15px;
}
.dropdown-modal .dropdown-modal-default-list {
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  margin-top: 4px;
}
.dropdown-modal .dropdown-modal-default-list .dropdown-ele {
  width: 100%;
}

.symbol-drop {
  text-align: center;
  font-weight: 900;
  padding: 0;
  border-radius: 0px;
  background: #202125;
  border: 2px dashed #797979;
  color: #33b8ff;
  transition: 0.3s ease;
  cursor: pointer;
  width: 40px;
  height: 40px;
  font-size: 18px;
}

.symbol-drop:hover {
  border-color: #fff;
  color: #79d0ff;
  background: #212227;
}

.symbol-drop.words {
  display: flex;
  align-items: center;
  justify-content: center;
  width: unset;
  height: unset;
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 8px 12px !important;
  margin-top: 5px !important;
}

.dropdown-ele {
  padding: 6px 10px;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}
.dropdown-ele.fit {
  width: 100%;
  box-sizing: border-box;
}

.dropdown-ele:hover,
.dropdown-ele.hovered,
.dropdown > ul:not(:hover) > .dropdown-ele.active {
  background-color: var(--color-gray-50);
  color: var(--color-slate-700);
}

.dropdown-button-standard {
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  padding: 5px 10px;
  display: flex;
  align-items: center;
}

.has-chevron button {
  padding-right: 25px !important;
}
.has-chevron::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' width='16px' fill='%23000'%3E%3Cpath d='M560-232.35 312.35-480 560-727.65 623.65-664l-184 184 184 184L560-232.35Z'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  display: inline-block;
  width: 16px;
  height: 16px;
  content: "";
  right: 5px;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
  position: absolute;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dropown-top-35 {
  top: 35px;
}

button.forward,
button.backward {
  transition: transform 0.25s ease-in, opacity 0.15s ease-in;
}

button.forward {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

button.has-arrow {
  display: flex;
  align-items: center;
}
button.has-arrow.forward.has-arrow::after, button.has-arrow.backward.has-arrow::before {
  background-image: url(/images/icons/arrow-back.svg);
  background-size: 20px 20px;
  display: inline-block;
  width: 20px;
  height: 20px;
  content: "";
  left: 3px;
  position: relative;
}
button.has-arrow.backward.has-arrow:disabled:before, button.has-arrow.forward.has-arrow:disabled::after {
  opacity: 0.5;
}
button.has-arrow.backward.has-arrow::before {
  margin-right: 5px;
}
button.has-arrow.forward.has-arrow::after {
  scale: -1;
}

.infobox-container {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #374151;
  padding: 13px 15px;
  line-height: 24px;
}
.infobox-container .info {
  border-left: 2px solid var(--color-blue-600);
}
.infobox-container .info .infobox-header {
  color: var(--color-blue-700);
}
.infobox-container .warning {
  border-left: 2px solid var(--color-warning-400);
}
.infobox-container .warning .infobox-header {
  color: var(--color-warning-900);
}
.infobox-container .danger {
  border-left: 2px solid var(--color-danger-600);
}
.infobox-container .danger .infobox-header {
  color: var(--color-danger-700);
}
.infobox-container.danger-one-line {
  background-color: var(--color-danger-50);
  border: 0px;
  color: var(--color-danger-700);
}
.infobox-container.info-one-line {
  background-color: var(--color-blue-50);
  border: 0px;
  color: var(--color-blue-700);
}

.priorly-radio-container {
  position: relative;
  width: 100%;
  height: 55px;
  background: #fff;
  margin-top: 15px;
  box-sizing: border-box;
}
.priorly-radio-container input {
  position: absolute;
  opacity: 0.01;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  z-index: 2;
  margin: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.priorly-radio-container input:checked + label {
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-50), 0px 0px 0px 3px rgba(0, 0, 0, 0.0784313725);
  background: var(--logo-color);
  color: #fff;
}
.priorly-radio-container label {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  z-index: 1;
  font-weight: 500;
  box-shadow: 0px 0px 0px 1px #cecece, rgba(0, 0, 0, 0.07) 0px 0px 0px 0px;
  transition: background-color 0.15s ease-in, box-shadow 0.25s ease;
}

.priorly-checkbox-container {
  box-shadow: 0px 0px 0px 1px #cecece, rgba(0, 0, 0, 0.07) 0px 0px 0px 0px;
  transition: background-color 0.15s ease-in, box-shadow 0.25s ease;
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 15px;
}
.priorly-checkbox-container:has(input:checked) {
  box-shadow: 0px 0px 0px 2px var(--logo-color), rgba(0, 0, 0, 0.07) 0px 0px 0px 0px;
}
.priorly-checkbox-container input {
  margin: 0px;
  accent-color: var(--logo-color);
}
.priorly-checkbox-container label {
  width: 100%;
  height: 100%;
  font-weight: 500;
  padding: 0px;
  box-sizing: border-box;
}

.priorly-textarea {
  width: 100%;
  resize: vertical;
  box-shadow: 0px 0px 0px 1px #cecece, rgba(0, 0, 0, 0.07) 0px 0px 0px 0px;
  border-radius: 2px;
  max-height: 215px;
  outline: 0 !important;
  border: 0;
  transition: box-shadow 0.25s ease-in;
}
.priorly-textarea:focus-within {
  box-shadow: 0px 0px 0px 2px var(--logo-color), rgba(0, 0, 0, 0.07) 0px 0px 0px 0px;
}

[data-question-page] {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: transform 0.25s ease-in, opacity 0.15s ease-in;
}
[data-question-page].active {
  opacity: 1;
}
[data-question-page] button.forward:not(.show),
[data-question-page] button.backward:not(.show) {
  opacity: 0;
  transform: translateY(5px);
}
[data-question-page]:not(:has(* .invalid)) * button.forward {
  opacity: 1;
  transform: translateY(0px);
  -webkit-user-select: unset;
     -moz-user-select: unset;
          user-select: unset;
  pointer-events: unset;
}

.color-picker {
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4784313725);
  border-radius: 100%;
  background-color: #5555dd;
  transition: background-color 0.2s ease-in;
  width: 20px;
}

input[type=color] {
  opacity: 0;
  display: block;
  border: none;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.--calendar-date-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 0px 0px 1px var(--border-color);
  border-radius: 4px;
  padding: 6px 10px;
  box-sizing: border-box;
  min-width: 125px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: opacity 0.15s, box-shadow 0.25s ease-in;
}
.--calendar-date-selector .calendar-holder {
  width: 20px;
  height: 20px;
}

.--row-holder {
  display: flex;
  text-align: center;
  align-items: center;
}

.--strike,
[data-side-calendar-date],
.--date,
.day,
.time {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  aspect-ratio: 1/1;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-flow: column-reverse;
}

.counter {
  font: 500 0.8rem "Lato", sans-serif;
}

.calendar-overflow-container {
  opacity: 0;
  position: absolute;
  transform: translateY(15px);
}
.calendar-overflow-container.active {
  opacity: 1;
  transform: translateY(6px);
  -webkit-user-select: unset;
     -moz-user-select: unset;
          user-select: unset;
  pointer-events: unset;
}

.--month-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--month-wrapper-background);
  font-family: var(--month-wrapper-font);
  color: var(--month-wrapper-color);
}
.--month-wrapper .month {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.--chevron {
  padding: 0;
  width: 20px;
  height: 20px;
  box-shadow: 0px 0px 0px 0px;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.--chevron:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.--chevron.next-month .--chevron-mask {
  rotate: 270deg;
}
.--chevron.prev-month .--chevron-mask {
  rotate: 90deg;
}
.--chevron .--chevron-mask {
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-image: url(/images/icons/chevron.svg);
  mask-image: url(/images/icons/chevron.svg);
  background-color: var(--chevron-color);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.calendar {
  display: flex;
  position: absolute;
  width: 100%;
  box-sizing: content-box;
  z-index: 6;
  overflow: hidden;
  transition: height 0.25s ease, transform 0.2s ease-in, opacity 0.15s ease-in;
}
.calendar.loading > .w-100 {
  opacity: 0.5;
  pointer-events: none;
}
.calendar .--row-holder.--days {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--days-color);
  font-family: var(--calendar-font-family);
  text-transform: capitalize;
}
.calendar .--row-holder.--days > div {
  width: 14.285714%;
}
.calendar [data-cal-date] {
  transform: translateX(0%);
}
.calendar.forward [data-cal-date] {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.calendar.primed [data-cal-date] {
  transform: translateX(-100%);
}
.calendar.backward [data-cal-date] {
  transform: translateX(0%);
  transition: transform 0.3s ease;
}

.usual-label {
  font: 600 0.875rem var(--header-font);
  color: var(--text-color);
}

.--time-holder {
  position: relative;
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
  border-radius: var(----time-holder-radius);
  box-shadow: 0px 0px 0px 1px var(----time-holder-inactive-border);
  color: var(----time-holder-inactive-text);
  font-weight: var(----time-holder-font-weight);
  font-size: var(----time-holder-font-size);
  font-family: var(----time-holder-font-family);
  transition: opacity 0.2s ease-in, transform 0.25s ease-in, color 0.15s ease-in, box-shadow 0.15s ease-in;
  cursor: pointer;
}
.--time-holder.inactive {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.--time-holder.active, .--time-holder:hover {
  box-shadow: 0px 0px 0px 1px var(----time-holder-active-border);
  color: var(----time-holder-active-text);
}
.--time-holder:has(.--times.active) {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.--date,
.--strike {
  color: var(--dates-color);
  font-family: var(--calendar-font-family);
  width: 14.285714%;
  border-radius: 2px;
}

.--date:not(.--strike) {
  cursor: pointer;
}
.--date:not(.--strike):hover {
  background-color: var(--color-slate-100);
}

.--times {
  max-height: 210px;
  overflow-y: overlay;
  position: absolute;
  width: calc(100% + 2px);
  background: var(--times-background-color);
  box-shadow: var(--times-box-shadow);
  left: -1px;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 4px;
  font-family: var(--times-font);
  color: var(--times-color);
  z-index: 5;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.15s ease-in, transform 0.2s ease-in;
  cursor: default;
}
.--times.active {
  pointer-events: unset;
  opacity: 1;
  transform: translateY(0px);
}

.--row-holder .time {
  width: 20%;
  border-radius: 2px;
}
.--row-holder .time:not(.no-hover) {
  cursor: pointer;
}
.--row-holder .time:not(.no-hover):hover {
  background-color: var(--time-hover);
  color: var(--time-hover-color);
}

.--strike {
  text-decoration: line-through;
  opacity: 0.5;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.--staff-container {
  font: 500 0.8rem var(--text-font);
  color: var(--text-color);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.15s ease-in, visibility 0.15s ease-in, transform 0.15s ease-in;
}
.--staff-container.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.--staff-container .member {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 4px;
  cursor: pointer;
}
.--staff-container .member.disabled {
  cursor: default;
  opacity: 0.65;
}
.--staff-container .member:not(.disabled):hover {
  box-shadow: var(--member-shadow-hover);
}
.--staff-container .member:not(.disabled).active {
  box-shadow: var(--member-shadow-active);
}
.--staff-container .member .staff-avatar {
  width: 50px;
  height: 50px;
  background: var(--color-slate);
  border-radius: 100%;
}
.--staff-container .member .staff-avatar .staff-initial {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font: 600 1.1rem var(--text-font);
}

.confirm-booking-container {
  background: var(--color-slate-100);
  box-shadow: 0 0 0 1px var(--color-slate-300), rgba(0, 0, 0, 0.07) 0 2px 0 0;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--text-font);
  margin-top: 22px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
  position: absolute;
  width: 100%;
  top: 0px;
}
.confirm-booking-container.active {
  opacity: 1;
  transform: translateY(0px);
}
.confirm-booking-container .change-staff {
  position: absolute;
  top: -19px;
  right: 1px;
  color: var(--logo-color-darker-50);
  font-weight: 600;
}
.confirm-booking-container .service {
  font: 600 0.9rem var(--text-font);
}
.confirm-booking-container .price {
  margin-left: auto;
  font: 600 1rem var(--text-font);
}
.confirm-booking-container .time {
  margin-top: 2px;
}
.confirm-booking-container .with {
  font-style: italic;
  font-size: 0.8rem;
}
.confirm-booking-container .staff {
  padding: 7px 0px 1px;
  border-top: 1px solid var(--color-slate-300);
  margin-top: 10px;
}

.booking-date-details {
  --booking-date-font: "Lato", sans-serif;
  --boking-date-font-size: 1rem;
  font-family: var(--booking-date-font);
  font-size: var(--boking-date-font-size);
  line-height: 1.5;
}
.booking-date-details b {
  text-transform: capitalize;
}

.confirm-booking-btn-container {
  display: flex;
  flex-flow: column-reverse;
  margin-top: 10px;
}
.confirm-booking-btn-container .confirm-booking-btn {
  opacity: 0;
  transform: translateY(10px);
  outline: 0 !important;
  border: 0;
  cursor: pointer;
  text-align: center;
  font: var(--confirm-btn-font-size) var(--confirm-btn-font);
  box-shadow: var(--confirm-btn-box-shadow);
  background-color: var(--confirm-btn-background);
  color: var(--confirm-btn-color);
  width: var(--confirm-btn-width);
  border-radius: var(--confirm-btn-radius);
  padding: var(--confirm-btn-padding);
  transition: box-shadow 0.2s ease-in, background-color 0.2s ease-in, color 0.2s ease-in, opacity 0.15s ease-in, transform 0.2s ease-in;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.confirm-booking-btn-container .confirm-booking-btn span {
  opacity: 1;
  transform: translateY(0px);
  display: block;
  transition: opacity 0.15s ease-in, transform 0.2s ease-in;
}
.confirm-booking-btn-container .confirm-booking-btn.loading span {
  opacity: 0;
  transform: translateY(10px);
}
.confirm-booking-btn-container .confirm-booking-btn.active {
  opacity: 1;
  transform: translateY(0px);
  pointer-events: unset;
}
.confirm-booking-btn-container .confirm-booking-btn:hover {
  background-color: var(--confirm-btn-hover-background);
  color: var(--confirm-btn-hover-color);
  box-shadow: var(--confirm-btn-box-shadow-hover);
}

.completion-page-wrapper {
  --booking-details-header-color: var(--logo-color);
  --details-font-size: 1rem;
  --details-font-color: var(--text-color);
  --details-font-weight: 600;
  --details-header-font-size: 1rem;
  --details-header-color: var(--color-slate-500);
  --details-header-font-weight: 600;
  --details-font: "Lato", sans-serif;
  --details-container-background: #fff;
  --booking-details-border-radius: 4px;
}
.completion-page-wrapper .add-to-calendar {
  display: flex;
  align-items: center;
}
.completion-page-wrapper .add-to-calendar .calendar-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.completion-page-wrapper .add-to-calendar .calendar-txt {
  font-size: 0.8rem;
  font-family: "Lato";
  font-weight: 600;
}
.completion-page-wrapper .booking-confirmed-header-container {
  padding: 15px 10px;
  background-color: #f0fdf4;
  border-radius: 2px;
}
.completion-page-wrapper .booking-confirmed-header-container .header {
  font-size: 0.7rem;
  font-weight: 700;
  font-family: "Lato";
  color: #14532d;
}
.completion-page-wrapper .booking-confirmed-header-container .id {
  font-family: "lato", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-color);
}
.completion-page-wrapper .booking-confirmed-header-container .date-time {
  font-family: "lato", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-color);
  text-transform: capitalize;
}
.completion-page-wrapper .booking-details-container {
  padding: 10px;
  background-color: #fff;
  border-radius: var(--booking-details-border-radius);
  transition: background-color 0.99s ease;
}
.completion-page-wrapper .booking-details-container.active {
  background-color: var(--details-container-background);
}
.completion-page-wrapper .booking-details-container .header {
  font-family: "lato", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--booking-details-header-color);
  text-transform: capitalize;
}
.completion-page-wrapper .booking-details-container .detail-holder {
  margin: 5px 0px;
}
.completion-page-wrapper .booking-details-container .detail-holder .detail-header {
  color: var(--details-header-color);
  font-family: var(--details-font);
  font-weight: var(--details-header-font-weight);
  font-size: var(--details-header-font-size);
}
.completion-page-wrapper .booking-details-container .detail-holder .detail {
  font-size: var(--details-font-size);
  font-family: var(--details-font);
  font-weight: var(--details-font-weight);
  color: var(--details-font-color);
}
.completion-page-wrapper .manage-container {
  display: flex;
  flex-flow: column;
}
.completion-page-wrapper .manage-container button {
  outline: 0 !important;
  border: 0;
  cursor: pointer;
  text-align: center;
  transition: box-shadow 0.2s ease-in, background-color 0.2s ease-in, color 0.2s ease-in;
}
.completion-page-wrapper .manage-container .resched-btn {
  font-family: "lato";
  box-shadow: 0px 0px;
  border-radius: 4px;
  background-color: transparent;
}
.completion-page-wrapper .manage-container .cancel-btn {
  font-family: "lato";
  box-shadow: 0px 0px 0px 1px #e11d48;
  border-radius: 4px;
  background-color: transparent;
  color: #9f1239;
}

.disabled .--calendar-date-selector,
.disabled .--time-holder {
  opacity: 0.45;
  pointer-events: none;
}

.booking-manager-toolbar {
  background: #fff;
  box-sizing: border-box;
  --toolbar-padding: 20px 25px;
  --logo-width: 63.14px;
  --logo-height: 24.14px;
  --nav-link-size: 0.825rem;
  padding: var(--toolbar-padding);
  font-family: var(--text-font);
  border-right: 1px solid var(--color-slate-300);
  height: 100dvh;
  width: 200px;
  z-index: 2;
}
.booking-manager-toolbar.collapsed {
  display: flex;
  flex-flow: column;
  width: 60px;
  padding: 25px 10px;
  background-color: var(--color-slate-50);
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
}
.booking-manager-toolbar.collapsed .close-toolbar svg {
  transform: scaleX(-1);
}
.booking-manager-toolbar.collapsed .logo {
  display: none;
}
.booking-manager-toolbar.collapsed .business-before::before {
  margin-right: 0px;
}
.booking-manager-toolbar.collapsed .hide-collapsed,
.booking-manager-toolbar.collapsed .dropdown-txt,
.booking-manager-toolbar.collapsed .business-before::after {
  display: none;
}
.booking-manager-toolbar .hamburger {
  display: none;
}
.booking-manager-toolbar .logo {
  width: var(--logo-width);
  height: var(--logo-height);
}

.close-toolbar {
  color: var(--color-slate-400);
}
.close-toolbar:hover {
  color: var(--color-slate-700);
}

.nav-link {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: var(--nav-link-size);
  cursor: pointer;
}
.nav-link .nav-link-href {
  color: var(--color-slate-400);
  font: 600 var(--nav-link-size) var(--header-font);
}
.nav-link .nav-link-href:hover {
  color: var(--color-slate-700);
}
.nav-link.selected .nav-link-href, .nav-link:hover .nav-link-href {
  color: var(--text-color);
}

.active .settings-container {
  display: block;
}

.settings-container {
  position: absolute;
  left: 0px;
  width: 130px;
  padding: 5px;
  background: #fff;
  box-sizing: border-box;
  top: 22px;
  z-index: 10;
  display: none;
}

.settings-link {
  width: 100%;
  display: block;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 2px;
}
.settings-link:hover {
  background-color: var(--color-slate-100);
}

.calendar-side-bar {
  width: 20%;
  max-width: 250px;
  border-right: 1px solid var(--color-slate-400);
  --logo-background: #fff;
  --logo-size: 40px;
  --logo-text-size: 1rem;
  --side-bar-background: var(--color-slate-50);
  --calendar-text-size: 0.8rem;
  flex-shrink: 0;
  overflow-y: overlay;
  padding-bottom: 10px;
}
.calendar-side-bar .company {
  padding: 10px;
}
.calendar-side-bar .company .company-logo {
  align-items: center;
  background: var(--logo-background);
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: 3px;
  width: var(--logo-size);
  height: var(--logo-size);
}
.calendar-side-bar .company .company-logo.dash {
  border: 1px dashed var(--color-slate-500);
  border-radius: 2px;
  color: var(--color-slate-600);
  font-weight: 600;
}
.calendar-side-bar .company .company-logo.dash:before {
  content: "Logo";
  font-weight: 700;
  font-family: "Inter";
  font-size: 0.7rem;
  color: var(--color-slate-300);
}
.calendar-side-bar .company .company-text {
  font-family: var(--text-font);
  font-size: var(--logo-text-size);
  font-weight: 600;
  margin-left: 5px;
}
.calendar-side-bar .side-calendar {
  padding: 10px;
  font-size: var(--calendar-text-size);
  height: 280px;
  box-sizing: border-box;
}
.calendar-side-bar .side-calendar --days {
  font-weight: 600;
  color: var(--text-color);
  font-family: var(--text-font);
  text-transform: capitalize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.calendar-side-bar .side-calendar .selected-date {
  background-color: var(--logo-color);
  color: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 2px var(--logo-color-lighter);
}
.calendar-side-bar .side-calendar .current-date {
  background-color: var(--logo-color);
  color: #fff;
  border-radius: 4px;
}
.calendar-side-bar .side-calendar .month-changer {
  font-family: var(--text-font);
  color: var(--text-color);
  font-weight: 600;
  padding: 5px 0px;
}
.calendar-side-bar .side-calendar .month-changer .left,
.calendar-side-bar .side-calendar .month-changer .right {
  background: transparent;
  box-shadow: 0px 0px 0px 0px;
  border-radius: 100%;
}
.calendar-side-bar .side-calendar .month-changer .left:hover,
.calendar-side-bar .side-calendar .month-changer .right:hover {
  background-color: var(--color-slate-100);
}
.calendar-side-bar .side-calendar .month-changer .left {
  rotate: 90deg;
  margin-right: 5px;
}
.calendar-side-bar .side-calendar .month-changer .right {
  rotate: 270deg;
}
.calendar-side-bar .side-calendar .--row-holder {
  font-family: var(--text-font);
}
.calendar-side-bar .side-calendar .--row-holder .outside-month {
  color: var(--color-slate-400);
}
.calendar-side-bar .side-calendar .--row-holder:has(.current-date), .calendar-side-bar .side-calendar .--row-holder:hover {
  background-color: var(--color-slate-100);
}
.calendar-side-bar .side-calendar .--row-holder > div {
  width: 14.285714%;
}
.calendar-side-bar .side-calendar .--row-holder > div:hover {
  cursor: pointer;
  background-color: var(--logo-color);
  color: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 2px var(--logo-color-lighter);
}
.calendar-side-bar .filters-container {
  padding: 10px;
}
.calendar-side-bar .filters-container .filters-header {
  font-family: var(--text-font);
  color: var(--text-color);
  font-size: var(--calendar-text-size);
}
.calendar-side-bar .filters-container .service-container {
  padding: 5px 0px;
  margin: 5px 0px;
  cursor: pointer;
  border-radius: 20px;
  opacity: 0.5;
}
.calendar-side-bar .filters-container .service-container:hover {
  background: var(--color-slate-100);
}
.calendar-side-bar .filters-container .service-container .check-small {
  opacity: 0;
}
.calendar-side-bar .filters-container .service-container.active {
  opacity: 1;
}
.calendar-side-bar .filters-container .service-container.active .check-small {
  opacity: 1;
}
.calendar-side-bar .filters-container .service-container .service-color {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin-right: 5px;
  filter: contrast(1.5);
}
.calendar-side-bar .filters-container .service-container .filter-service-name {
  font-family: var(--text-font);
  font-size: var(--calendar-text-size);
}

.booking-manager-container {
  height: 100vh;
}

.popover {
  position: absolute;
  top: 20px;
  right: 0;
  background: #fff;
  display: flex;
  flex-flow: column;
  text-align: start;
  box-shadow: 0px 0px 0px 1px #fff, 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  opacity: 0;
  scale: 0.95;
  transform: translateY(5px);
  transition: opacity 0.15s ease, transform 0.2s ease, scale 0.15s ease-in;
}
.popover.wider {
  width: 150px;
}
.popover.active {
  scale: 1;
  opacity: 1;
  transform: translateY(0px);
  z-index: 3;
}
.popover button {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-align: start;
  font: 500 0.9rem Inter;
  padding: 5px 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.popover button:hover {
  background-color: var(--color-slate-100);
}

.calendar-overflow-container.active .calendar {
  pointer-events: all;
}

.search-filter-container {
  position: absolute;
  left: 200px;
  top: 38px;
  width: 325px;
  gap: 10px;
  background: #fff;
  padding: 0px 0px 55px;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--color-gray-400), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  font: 600 0.85rem var(--header-font);
  color: var(--text-color);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.search-filter-container.active {
  opacity: 1;
  transform: translateY(0px);
  pointer-events: all;
}
.search-filter-container.active .date-container {
  pointer-events: all;
}
.search-filter-container .header {
  padding: 7px;
  font: 600 0.875rem var(--header-font);
  border-bottom: 1px solid var(--color-gray-400);
  text-align: center;
}
.search-filter-container .filter-input-container {
  width: 100%;
  gap: 10px;
  padding: 0px 20px;
}
.search-filter-container .filter-input-container .calendar-overflow-container .triangle {
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
}
.search-filter-container .filter-input-container .calendar.standard {
  top: 50px;
  width: 300px;
}
.search-filter-container .filter-input-container input[type=checkbox] {
  box-shadow: unset;
  accent-color: var(--logo-color);
}
.search-filter-container .filter-input-container .dropdown {
  box-sizing: border-box;
  border: 0;
  border-radius: 4px;
  font: 500 0.875rem var(--text-font);
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
}
.search-filter-container .filter-input-container .dropdown button {
  width: 100%;
  padding: 2.5px 6px;
}
.search-filter-container .filter-input-container .dropdown ul {
  width: 100%;
  box-sizing: border-box;
  top: 30px;
  box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
}
.search-filter-container .filter-input-container .dropdown ul li {
  width: 100%;
  box-sizing: border-box;
}
.search-filter-container .date-container {
  width: 50%;
  position: relative;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  flex-shrink: 1;
  transform: translateY(0px);
}
.search-filter-container .date-container > button {
  box-sizing: border-box;
  border: 0;
  border-radius: 4px;
  font: 500 0.875rem var(--text-font);
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  outline: 0px !important;
  text-align: left;
}
.search-filter-container .date-container .calendar-overflow-container {
  left: 50%;
}
.search-filter-container .full-btn {
  position: absolute;
  bottom: 14px;
  right: 19px;
  padding: 5px 8px;
}
.search-filter-container input {
  box-sizing: border-box;
  border: 0;
  border-radius: 4px;
  font: 500 0.875rem var(--text-font);
  outline: 0px !important;
}
.search-filter-container .triangle {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
}

.day .calendar-calendar .bottom-big-container {
  overflow-x: auto;
}
.day .calendar-calendar .big-calendar-days-holder {
  min-width: 770px;
  margin-right: 0px;
}
.day .calendar-calendar .big-calendar {
  min-width: 790px;
}

.calendar-calendar {
  width: 100%;
  height: 100%;
  position: relative;
}
.calendar-calendar .bottom-big-container {
  height: calc(100% - 100px);
}
.calendar-calendar .need-hours {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3411764706);
  display: flex;
  justify-content: center;
  align-items: center;
}
.calendar-calendar .need-hours .container {
  background: #fff;
  padding: 30px 50px;
}
.calendar-calendar .need-hours .container .header {
  font-family: var(--header-font);
  font-weight: 600;
  font-size: 20px;
  color: var(--text-color);
}
.calendar-calendar .need-hours .container .body {
  font-family: var(--text-font);
  font-weight: 400;
  color: var(--color-slate-500);
}
.calendar-calendar .booking-info-container {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in;
  z-index: 5;
  position: absolute;
  top: 110px;
  width: 325px;
  background: #fff;
  right: 100px;
  padding: 15px 20px;
  border-radius: 6px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2392156863), 0px 3px 6px 2px rgba(0, 0, 0, 0.1882352941);
}
.calendar-calendar .booking-info-container.no-show {
  box-shadow: 0px 0px 0px 1px var(--color-danger-600), 0px 3px 6px 2px var(--color-danger-200);
}
.calendar-calendar .booking-info-container.no-show::after {
  content: "No show";
  position: absolute;
  top: 9px;
  font: 600 0.875rem Inter;
  color: var(--color-danger-600);
}
.calendar-calendar .booking-info-container.arrived {
  box-shadow: 0px 0px 0px 1px var(--color-warning-600), 0px 3px 6px 2px var(--color-warning-200);
}
.calendar-calendar .booking-info-container.arrived::after {
  content: "In progress";
  position: absolute;
  top: 9px;
  font: 600 0.875rem Inter;
  color: var(--color-warning-600);
}
.calendar-calendar .booking-info-container.completed {
  box-shadow: 0px 0px 0px 1px var(--color-success-600), 0px 3px 6px 2px var(--color-success-200);
}
.calendar-calendar .booking-info-container.completed::after {
  content: "Completed";
  position: absolute;
  top: 9px;
  font: 600 0.875rem Inter;
  color: var(--color-success-600);
}
.calendar-calendar .booking-info-container .arrived,
.calendar-calendar .booking-info-container .no-show {
  --tooltip-top: 32px;
}
.calendar-calendar .booking-info-container .arrived {
  background: var(--color-success-100);
  box-shadow: 0px 0px 0px 1px var(--color-success-700), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  color: var(--color-success-700);
}
.calendar-calendar .booking-info-container .no-show {
  background: var(--color-danger-100);
  box-shadow: 0px 0px 0px 1px var(--color-danger-700), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  color: var(--color-danger-700);
}
.calendar-calendar .booking-info-container.active {
  opacity: 1;
  pointer-events: unset;
}
.calendar-calendar .booking-info-container .booking-close-container {
  position: absolute;
  top: -10px;
  right: -5px;
  background: #fff;
  padding: 5px;
  border-radius: 100%;
  display: flex;
  border: 0px solid;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2392156863);
}
.calendar-calendar .booking-info-container div {
  font-family: var(--text-font);
}
.calendar-calendar .booking-info-container .booking-toolbar {
  text-align: end;
}
.calendar-calendar .booking-info-container .booking-toolbar button,
.calendar-calendar .booking-info-container .booking-toolbar a {
  --tooltip-top: 30px;
  --tooltip-width: 76px;
  padding: 5px 10px;
  border-radius: 4px;
  font: 600 0.875rem var(--header-font);
}
.calendar-calendar .booking-info-container .booking-toolbar .edit {
  box-shadow: 0px 0px 0px 1px var(--color-gray-600), 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid var(--color-gray-600);
  background: var(--color-slate-100);
  font: 600 0.875rem var(--header-font);
  color: var(--color-slate-700);
}
.calendar-calendar .booking-info-container .booking-toolbar .full-btn {
  border-bottom: 1px solid var(--logo-color-darker-10);
}
.calendar-calendar .booking-info-container .booking-toolbar .full-btn:hover {
  border-bottom: 1px solid var(--logo-color-lighter);
}
.calendar-calendar .booking-info-container .booking-id {
  font-size: 0.7rem;
  text-align: end;
  border-bottom: 4px solid;
}
.calendar-calendar .booking-info-container .booking-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 3px;
  text-transform: capitalize;
}
.calendar-calendar .booking-info-container .booking-service {
  font-size: 0.9rem;
  margin-bottom: 3px;
}
.calendar-calendar .booking-info-container .booking-price {
  font-size: 0.8rem;
  margin-bottom: 5px;
}
.calendar-calendar .booking-info-container .booking-date {
  text-transform: capitalize;
}
.calendar-calendar .booking-info-container .booking-date,
.calendar-calendar .booking-info-container .booking-location {
  font-size: 0.7rem;
}
.calendar-calendar .booking-info-container .confirm-container .booking-needs-confirmed {
  font: 600 0.875rem var(--header-font);
  background: #e7f4f9;
  border: 1px solid #cee9f2;
  padding: 7px 5px;
  border-radius: 4px;
  box-sizing: border-box;
  text-align: center;
  color: #1a5265;
}
.calendar-calendar .booking-info-container .confirm-container .full-btn {
  padding: 7px 5px;
}
.calendar-calendar .calendar-toolbar {
  padding: 10px 10px 10px 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-slate-300);
  margin-bottom: 10px;
  z-index: 9;
  position: relative;
}
.calendar-calendar .calendar-toolbar .badge {
  position: absolute;
  background: var(--color-danger-600);
  width: 16px;
  height: 16px;
  border-radius: 100%;
  color: #fff;
  top: -7px;
  left: 14px;
  z-index: 1;
}
.calendar-calendar .calendar-toolbar .badge[data-count="0"] {
  display: none;
}
.calendar-calendar .calendar-toolbar .badge::after {
  content: attr(data-count);
  font: 600 0.7rem var(--text-font);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.calendar-calendar .calendar-toolbar .notification-box {
  position: absolute;
  left: -135px;
  top: 32px;
  width: 220px;
  background: #fff;
  z-index: 2;
  box-shadow: 0px 0px 0px 1px var(--color-gray-400), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  opacity: 0;
  transform: translateY(10px);
  transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}
.calendar-calendar .calendar-toolbar .notification-box .dismiss {
  top: 10px;
  right: 10px;
}
.calendar-calendar .calendar-toolbar .notification-box .show-notification-btn {
  right: 10px;
  bottom: 10px;
}
.calendar-calendar .calendar-toolbar .notification-box .show-notification-btn,
.calendar-calendar .calendar-toolbar .notification-box .dismiss {
  position: absolute;
  font: 600 0.7rem var(--header-font);
  color: var(--logo-color-darker-10);
}
.calendar-calendar .calendar-toolbar .notification-box.active {
  opacity: 1;
  transform: translateY(0px);
}
.calendar-calendar .calendar-toolbar .notification-box .header {
  padding: 8px 5px;
  font: 600 0.875rem var(--header-font);
  border-bottom: 1px solid var(--color-gray-400);
  text-align: left;
  padding-left: 20px;
}
.calendar-calendar .calendar-toolbar .notification-box .notification-list > li {
  padding: 8px 8px 8px 20px;
  font: 500 0.8rem var(--header-font);
  text-align: left;
  list-style-type: none;
  position: relative;
}
.calendar-calendar .calendar-toolbar .notification-box .notification-list > li.not-none::before {
  content: "•";
  color: var(--logo-color);
  font-weight: bold;
  display: inline-block;
  width: 6px;
  position: absolute;
  left: 8px;
}
.calendar-calendar .calendar-toolbar .notification-box .triangle {
  top: -8px;
  left: 139px;
}
.calendar-calendar .calendar-toolbar.searching .search-thick,
.calendar-calendar .calendar-toolbar.searching .printer,
.calendar-calendar .calendar-toolbar.searching .filters,
.calendar-calendar .calendar-toolbar.searching .bell {
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
}
.calendar-calendar .calendar-toolbar.searching .close-search,
.calendar-calendar .calendar-toolbar.searching .search-filter {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
}
.calendar-calendar .calendar-toolbar .search-container {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  transition: transform 0.25s ease-in, opacity 0.25s ease-in, visibility 0.25s ease-in;
}
.calendar-calendar .calendar-toolbar .search-container .search-filter {
  position: absolute;
  right: -85px;
  width: 70px;
  height: 23px;
  background: #fff;
  gap: 5px;
  --width: 18px;
  --height: 18px;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  letter-spacing: -0.3px;
}
.calendar-calendar .calendar-toolbar .search-container .search-filter:hover {
  box-shadow: 0px 0px 0px 1px #8b95a2, 0px 1px 5px rgba(0, 0, 0, 0.4392156863), 0px 1px 2px 0px rgba(0, 0, 0, 0.2392156863);
}
.calendar-calendar .calendar-toolbar .search-bar {
  height: 28px;
  width: 300px;
  background: rgb(243, 244, 246);
  margin: auto;
  border-radius: 4px;
  font: 500 0.875rem var(--text-font);
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0px;
  position: relative;
  outline: 0 !important;
  border: 0px !important;
  padding: 2px 2px 2px 10px;
}
.calendar-calendar .calendar-toolbar .search-bar::-moz-placeholder {
  font: 400 0.875rem var(--header-font);
  color: var(--text-color);
  text-align: center;
  letter-spacing: 0.3px;
}
.calendar-calendar .calendar-toolbar .search-bar::placeholder {
  font: 400 0.875rem var(--header-font);
  color: var(--text-color);
  text-align: center;
  letter-spacing: 0.3px;
}
.calendar-calendar .calendar-toolbar .search-bar:not(:-moz-placeholder) + .icon.search {
  display: none;
}
.calendar-calendar .calendar-toolbar .search-bar:not(:placeholder-shown) + .icon.search {
  display: none;
}
.calendar-calendar .calendar-toolbar .icon.search {
  position: absolute;
  left: 10px;
  top: calc(50% + 1px);
  transform: translateY(-50%);
  --width: 18px;
  --height: 18px;
}
.calendar-calendar .calendar-toolbar .icon {
  --width: 24px;
  --height: 24px;
  --tooltip-top: 26px;
}
.calendar-calendar .calendar-toolbar .icon.printer {
  --tooltip-width: 30px;
}
.calendar-calendar .calendar-toolbar .dropdown-btn {
  box-shadow: 0px 0px 0px 0px;
  padding: 3px 8px;
  display: flex;
  font: 400 0.9rem var(--header-text);
  color: var(--color-text);
}
.calendar-calendar .calendar-toolbar .dropdown-btn::after {
  height: 22px;
  width: 22px;
  margin-left: 5px;
}
.calendar-calendar .calendar-toolbar .dropdown-ele {
  font-size: 0.9rem;
}
.calendar-calendar .calendar-toolbar .main-calendar-date {
  font: 600 0.9rem var(--header-font);
  padding: 0px 8px;
  min-width: 140px;
  text-transform: capitalize;
}
.calendar-calendar .calendar-toolbar .filters,
.calendar-calendar .calendar-toolbar .search-thick {
  display: none;
}
.calendar-calendar .calendar-toolbar .printer,
.calendar-calendar .calendar-toolbar .filters,
.calendar-calendar .calendar-toolbar .close-search,
.calendar-calendar .calendar-toolbar .search-filter,
.calendar-calendar .calendar-toolbar .bell {
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in;
}
.calendar-calendar .calendar-toolbar .printer,
.calendar-calendar .calendar-toolbar .filters,
.calendar-calendar .calendar-toolbar .bell {
  transform: translateY(0px);
  opacity: 1;
  visibility: visible;
}
.calendar-calendar .calendar-toolbar .search-filter,
.calendar-calendar .calendar-toolbar .close-search {
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-50% - 10px));
  top: 50%;
}
.calendar-calendar .calendar-toolbar .close-search {
  position: absolute;
  right: 12px;
  width: 109px;
}
.calendar-calendar .calendar-toolbar .close-search::after {
  margin-top: 1px;
  margin-left: 5px;
}
.calendar-calendar .big-calendar-days-holder {
  margin-left: 25px;
}
.calendar-calendar .big-calendar-days-holder .big-calendar-days {
  font: 400 0.9rem var(--header-font);
  width: 100%;
  margin-left: 2px;
  text-transform: capitalize;
  color: var(--text-color);
}
.calendar-calendar .big-calendar-days-holder .big-calendar-days .date {
  font-size: 1.4rem;
}
.calendar-calendar .big-calendar {
  overflow-y: overlay;
  width: 100%;
  height: 100%;
  position: relative;
  --scale-amount: 1;
  --scale-to-amount: 0.85;
}
.calendar-calendar .big-calendar.loading .time-column {
  opacity: 0.5;
  pointer-events: none;
}
.calendar-calendar .big-calendar .time-bar {
  position: absolute;
  width: calc(100% - 20px);
  height: 3px;
  background-color: red;
  left: 20px;
}
.calendar-calendar .big-calendar .time-bar .time-ball {
  height: 10px;
  width: 10px;
  background: red;
  top: -4px;
  position: absolute;
  border-radius: 100%;
}
.calendar-calendar .big-calendar .big-calendar-times {
  width: 25px;
}
.calendar-calendar .big-calendar .big-calendar-times .between-hours {
  height: 120px;
  --time-number: "0";
}
.calendar-calendar .big-calendar .big-calendar-times .between-hours::before {
  content: var(--time-number);
  font-family: "Lato";
  font-size: 0.6rem;
  top: -11px;
  position: relative;
  right: -7px;
}
.calendar-calendar .big-calendar .big-calendar-times .between-hours.last::after {
  content: var(--last-time);
  font-family: "Lato";
  font-size: 0.6rem;
  top: 109px;
  position: relative;
  right: 2px;
}
.calendar-calendar .big-calendar .top-spacing {
  height: 20px;
}
.calendar-calendar .big-calendar .monthly-row {
  width: 100%;
  flex: 1 1 0;
}
.calendar-calendar .big-calendar .monthly-row .month {
  width: 100%;
  padding: 10px;
  font-size: 0.8rem;
  flex: 1 1 0%;
  font-family: var(--text-font);
  font-weight: 600;
  border-right: 1px solid var(--color-slate-300);
  border-bottom: 1px solid var(--color-slate-300);
  text-align: end;
  text-transform: capitalize;
  cursor: pointer;
}
.calendar-calendar .big-calendar .monthly-row .month:hover {
  background: var(--color-slate-50);
  outline: 1px solid var(--color-slate-700);
  border-radius: 2px;
  border: 0px;
  margin-right: 1px;
  z-index: 2;
}
.calendar-calendar .big-calendar .monthly-row .month .booking-amount {
  text-align: center;
  font-size: 0.55rem;
  background: var(--logo-color);
  padding: 2px 5px;
  border-radius: 100px;
  margin-top: 4px;
  color: #fff;
}
.calendar-calendar .big-calendar .monthly-row .month .booking-amount.none {
  opacity: 0.5;
  background: var(--logo-color-step-5);
  color: var(--logo-color-darker-50);
}
.calendar-calendar .big-calendar .monthly-row:first-of-type .in-month {
  border-top: 1px solid var(--color-slate-600);
}
.calendar-calendar .big-calendar .monthly-row .outside-month.start {
  border-top: 1px solid var(--color-slate-300);
  border-bottom: 1px solid var(--color-slate-600);
}
.calendar-calendar .big-calendar .monthly-row .outside-month.start.last {
  border-right: 1px solid var(--color-slate-600) !important;
}
.calendar-calendar .big-calendar .monthly-row .outside-month.end {
  border-top: 1px solid var(--color-slate-600);
}
.calendar-calendar .big-calendar .monthly-row .outside-month.end.first {
  border-left: 1px solid var(--color-slate-600) !important;
}
.calendar-calendar .big-calendar .monthly-row .outside-month {
  color: var(--color-slate-300);
}
.calendar-calendar .big-calendar .monthly-row .outside-month .booking-amount {
  opacity: 0.5;
}
.calendar-calendar .big-calendar .time-column {
  width: 100%;
  min-height: 100px;
  position: relative;
}
.calendar-calendar .big-calendar .time-column .break {
  position: absolute;
  background-color: var(--color-slate-300);
  width: calc(100% - 4px);
  left: 2px;
  background-image: linear-gradient(45deg, var(--color-slate-50) 25%, var(--color-slate-300) 25%, var(--color-slate-300) 50%, var(--color-slate-50) 50%, var(--color-slate-50) 75%, var(--color-slate-300) 75%, var(--color-slate-300) 100%);
  background-size: 14.14px 14.14px;
}
.calendar-calendar .big-calendar .time-column .ghost-div,
.calendar-calendar .big-calendar .time-column .ghost-div-hover {
  position: absolute;
  border: 2px dashed var(--logo-color);
  border-radius: 4px;
  height: 15px;
  width: calc(100% - 8px);
  left: 2px;
  z-index: 5;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.calendar-calendar .big-calendar .time-column .ghost-div {
  font: 600 0.8rem "Lato";
  color: var(--color-slate-600);
  background-color: var(--color-slate-100);
  transition: height 0.2s ease-in;
  min-height: 5px;
}
.calendar-calendar .big-calendar .time-column .ghost-div.overlaps {
  border: 2px dashed var(--color-danger-600);
}
.calendar-calendar .big-calendar .time-column .ghost-div.overlaps::before {
  content: "Booking overlaps";
  position: absolute;
  top: -19px;
  font: 600 0.8rem var(--text-font);
  color: var(--color-danger-700);
  width: 120px;
}
.calendar-calendar .big-calendar .time-column .ghost-div-hover {
  opacity: 0;
}
.calendar-calendar .big-calendar .time-column .ghost-div-hover.active {
  opacity: 1;
}
.calendar-calendar .big-calendar .time-column .ghost-div-hover.active.one::before {
  left: calc(100% + 15px);
}
.calendar-calendar .big-calendar .time-column .ghost-div-hover.active.one::after {
  left: 100%;
}
.calendar-calendar .big-calendar .time-column .ghost-div-hover.active::before {
  content: attr(data-time);
  color: #fff;
  background-color: var(--logo-color);
  padding: 5px;
  position: absolute;
  font: 600 0.65rem "Lato";
  border-radius: 6px;
  top: 50%;
  transform: translateY(-50%);
  left: -45px;
  z-index: 2;
}
.calendar-calendar .big-calendar .time-column .ghost-div-hover.active::after {
  content: "";
  position: absolute;
  left: -15px;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  width: 15px;
  background-color: var(--logo-color);
  z-index: 1;
}
.calendar-calendar .big-calendar .time-column .booking-div {
  cursor: pointer;
  width: calc(100% - 5px);
  position: absolute;
  border-radius: 6px;
  left: 2.5px;
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 3;
}
.calendar-calendar .big-calendar .time-column .booking-div > div {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.calendar-calendar .big-calendar .time-column .booking-div[data-confirmed=true]::before, .calendar-calendar .big-calendar .time-column .booking-div[data-confirmed=true]::after {
  content: "";
  position: absolute;
  background-color: var(--buffer-color);
  opacity: 0.5;
  border-radius: 4px;
  width: 100%;
  background-size: 14.14px 14.14px;
  background-image: linear-gradient(45deg, var(--buffer-alternate-color) 25%, var(--buffer-color) 25%, var(--buffer-color) 50%, var(--buffer-alternate-color) 50%, var(--buffer-alternate-color) 75%, var(--buffer-color) 75%, var(--buffer-color) 100%);
}
.calendar-calendar .big-calendar .time-column .booking-div[data-confirmed=true]::before {
  top: calc(0% - var(--buffer-before));
  height: var(--buffer-before);
}
.calendar-calendar .big-calendar .time-column .booking-div[data-confirmed=true]::after {
  height: var(--buffer-after);
  top: calc(100% + 6px);
}
.calendar-calendar .big-calendar .time-column .booking-div[data-confirmed=false]::after {
  content: "Requires Confirmation";
  position: absolute;
  top: -2px;
  left: -2px;
  font: 500 0.6rem var(--header-font);
  background: var(--logo-color);
  padding: 5px;
  width: 100%;
  white-space: break-spaces;
  text-align: center;
  border-radius: 4px;
  z-index: -1;
  height: calc(100% + 18px);
  display: flex;
  align-items: self-end;
  padding: 2px;
  text-align: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
}
.calendar-calendar .big-calendar .time-column .booking-div > div {
  overflow: hidden;
  padding: 3px;
  position: relative;
  height: 100%;
  border-radius: 4px;
  transition: box-shadow 0.15s ease;
}
.calendar-calendar .big-calendar .time-column .booking-div.active > div, .calendar-calendar .big-calendar .time-column .booking-div:hover > div, .calendar-calendar .big-calendar .time-column .booking-div.hovered > div {
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2392156863), 0px 3px 6px 2px rgba(0, 0, 0, 0.1882352941);
}
.calendar-calendar .big-calendar .time-column .booking-div .booking-time,
.calendar-calendar .big-calendar .time-column .booking-div .service,
.calendar-calendar .big-calendar .time-column .booking-div .other-location {
  font-size: 0.7rem;
  font-family: var(--text-font);
  font-weight: 500;
}
.calendar-calendar .big-calendar .time-column .booking-div .name {
  font-family: "Lato";
  font-size: 0.8rem;
  font-weight: 600;
}
.calendar-calendar .big-calendar .time-column .booking-div .name,
.calendar-calendar .big-calendar .time-column .booking-div .service {
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}
.calendar-calendar .big-calendar .time-column .booking-div .other-location {
  position: absolute;
  bottom: 3px;
  width: -moz-fit-content;
  width: fit-content;
  right: 3px;
  font-weight: 600;
  font-size: 0.55rem;
}
.calendar-calendar .big-calendar .time-column .top-spacing {
  background-image: linear-gradient(45deg, var(--color-slate-50) 25%, var(--color-slate-300) 25%, var(--color-slate-300) 50%, var(--color-slate-50) 50%, var(--color-slate-50) 75%, var(--color-slate-300) 75%, var(--color-slate-300) 100%);
  background-size: 14.14px 14.14px;
}
.calendar-calendar .big-calendar .time-column .between-hours {
  height: 120px;
  box-shadow: 0 0 0 0.5px var(--color-slate-300) inset;
  background: #fff;
}
.calendar-calendar .big-calendar .time-column.closed .between-hours {
  background-color: var(--color-slate-200);
}
.calendar-calendar .calendar-overlay {
  position: absolute;
  background: #fff;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  pointer-events: auto;
}
.calendar-calendar .calendar-overlay.search {
  top: 53px;
  height: calc(100% - 53px);
  z-index: 8;
}
.calendar-calendar .calendar-overlay.pending {
  top: 0px;
  height: 100%;
  z-index: 9;
}
.calendar-calendar .calendar-overlay .pending-toolbar {
  box-sizing: border-box;
  border-bottom: 1px solid var(--color-slate-400);
  font: 600 1rem var(--header-font);
}
.calendar-calendar .calendar-overlay .no-results {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 500px;
  overflow-wrap: break-word;
}
.calendar-calendar .calendar-overlay .no-results .title {
  font: 200 3rem var(--header-font);
}
.calendar-calendar .calendar-overlay .no-results .lead {
  font: 300 1.5rem var(--header-font);
}
.calendar-calendar .calendar-overlay .result-container {
  height: 68px;
  box-sizing: border-box;
  border-radius: 8px;
  font: 500 1rem var(--header-font);
  color: var(--text-color);
  box-shadow: 0px 0px 0px 1px var(--color-gray-900), 0px 0px 3px 0px rgba(0, 0, 0, 0.431372549);
  transition: box-shadow 0.2s ease-in, height 0.2s ease-in;
}
.calendar-calendar .calendar-overlay .result-container.expanded {
  box-shadow: 0px 0px 0px 1px var(--logo-color), 0px 0px 0px 3px var(--logo-color-lighter);
  height: 90px;
}
.calendar-calendar .calendar-overlay .result-container.expanded .date-container {
  border-right: 3px solid var(--logo-color);
}
.calendar-calendar .calendar-overlay .result-container.expanded .booking-option-bar {
  padding: 5px;
  height: 28px;
  transition: height 0.2s ease-in, padding 0s ease-in;
}
.calendar-calendar .calendar-overlay .result-container.expanded .booking-expand {
  opacity: 1;
  visibility: visible;
}
.calendar-calendar .calendar-overlay .result-container.expanded .booking-expand::after {
  rotate: 180deg;
}
.calendar-calendar .calendar-overlay .result-container:hover {
  box-shadow: 0px 0px 0px 1px var(--logo-color), 0px 0px 0px 3px var(--logo-color-lighter);
}
.calendar-calendar .calendar-overlay .result-container:hover .booking-expand {
  opacity: 1;
  visibility: visible;
}
.calendar-calendar .calendar-overlay .result-container .confirm-btn {
  padding: 5px 10px;
  font: 500 0.875rem var(--header-font);
  display: none;
}
.calendar-calendar .calendar-overlay .result-container[data-confirmed=false] .confirm-btn {
  display: block;
}
.calendar-calendar .calendar-overlay .result-container .details-container {
  margin-top: 7px;
}
.calendar-calendar .calendar-overlay .result-container .date-container {
  padding: 5px 15px;
  border-right: 3px solid var(--color-gray-800);
}
.calendar-calendar .calendar-overlay .result-container .booking-staff {
  color: #636363;
  font-weight: 400;
}
.calendar-calendar .calendar-overlay .result-container .booking-time {
  font: 400 0.875rem var(--header-font);
}
.calendar-calendar .calendar-overlay .result-container .booking-option-bar {
  justify-content: end;
  position: absolute;
  top: 50px;
  right: 5px;
  overflow: hidden;
  height: 0;
  padding: 0px;
  transition: height 0.2s ease-in, padding 0s ease-in 0.2s;
}
.calendar-calendar .calendar-overlay .result-container .booking-option-bar .edit-btn,
.calendar-calendar .calendar-overlay .result-container .booking-option-bar .cancel-btn {
  padding: 7px 10px;
  background: #fff;
  width: 119px;
  box-sizing: border-box;
}
.calendar-calendar .calendar-overlay .result-container .booking-option-bar .cancel-btn {
  background: var(--color-danger-600);
  box-shadow: 0px 0px 0px 1px var(--color-danger-800);
  color: #fff;
  font-weight: 600;
}
.calendar-calendar .calendar-overlay .result-container .booking-option-bar .cancel-btn:hover {
  box-shadow: 0px 0px 0px 1px var(--color-danger-900), 0px 1px 5px rgba(196, 23, 23, 0.8), 0px 1px 2px 0px rgba(106, 18, 18, 0.24);
}
.calendar-calendar .calendar-overlay .result-container .booking-expand {
  position: absolute;
  top: calc(100% - 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  width: 105px;
  font-size: 0.8rem;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 15;
  box-shadow: 0px 0px 0px 1px var(--logo-color);
  --icon-color: var(--logo-color);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease-in, visibility 0.1s ease-in;
}
.calendar-calendar .calendar-overlay .result-container .booking-expand::after {
  margin-left: 5px;
}

.dragging .calendar-toolbar .search-container {
  transform: translate(-50%, -10px);
  opacity: 0;
  visibility: hidden;
}

.cancel-moving-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 10px));
  transition: opacity 0.25s ease-in, transform 0.25s ease-in;
  opacity: 0;
}
.cancel-moving-button.active {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.create-booking-box {
  position: fixed;
  top: 260px;
  left: 400px;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 8px;
  box-shadow: rgba(50, 50, 93, 0.25) 0 13px 27px -5px, rgba(0, 0, 0, 0.3) 0 8px 16px -8px;
  padding: 15px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  z-index: 9;
  box-sizing: border-box;
  overflow: hidden;
}
.create-booking-box.level-two {
  z-index: 101;
}
.create-booking-box.style-modal {
  opacity: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 15px));
}
.create-booking-box.style-modal.active {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.create-booking-box.overlaps {
  box-shadow: 0px 0px 0px 1px var(--color-danger-600), 0px 3px 6px 2px var(--color-danger-200);
}
.create-booking-box.overlaps:before {
  content: attr(data-overlap-text);
  position: absolute;
  top: 10px;
  right: 78px;
  font: 600 0.875rem Inter;
  color: var(--color-danger-600);
  background: var(--color-danger-100);
  padding: 5px 10px;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--color-danger-600);
}
.create-booking-box:has(.searchable-list.active) button {
  z-index: -1;
}
.create-booking-box.active {
  opacity: 1;
  visibility: visible;
}
.create-booking-box .back-btn {
  transform: translateY(10px);
  opacity: 0;
  transition: opacity 0.1s ease-in, transform 0.1s ease-in;
}
.create-booking-box .back-btn.active {
  transform: translateY(0px);
  opacity: 1;
}
.create-booking-box.loading {
  pointer-events: none;
}
.create-booking-box .header {
  font: 600 1rem var(--header-font);
  color: var(--text-color);
}
.create-booking-box .input-container input {
  font-size: 0.875rem;
}
.create-booking-box .page {
  flex-shrink: 0;
  width: 100%;
  transition: transform 0.35s cubic-bezier(0, 1.2, 0, 0.99);
}
.create-booking-box .page .searchable-btn {
  box-sizing: border-box;
  padding: 13px 15px;
  font-size: 0.875rem;
}
.create-booking-box .page .offset-tooltip::before {
  left: calc(50% + 35px);
}
.create-booking-box .page.one.active {
  transform: translateX(0px);
}
.create-booking-box .page.one.done {
  transform: translateX(calc(-100% - 30px));
}
.create-booking-box .page.two {
  transform: translateX(30px);
}
.create-booking-box .page.two.active {
  transform: translateX(-100%);
}
.create-booking-box .page.two.done {
  transform: translateX(calc(-200% - 30px));
}
.create-booking-box .page.three {
  box-sizing: border-box;
  flex-flow: column;
  transform: translateX(30px);
  padding: 0px 5px 5px 0px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.create-booking-box .page.three.active {
  transform: translateX(-200%);
}
.create-booking-box .page.three .optional {
  font: 400 0.875rem var(--header-font);
  color: var(--color-slate-500);
}
.create-booking-box .page.three .input-label {
  font: 400 0.8rem var(--header-font);
}
.create-booking-box .page.three .input-container {
  margin-left: 1px;
}
.create-booking-box .page.three .input-container input {
  padding: 6px 12px;
}
.create-booking-box .page.three .dob-three {
  width: 50px;
  margin-right: 5px;
}
.create-booking-box .page.three .dob-three.year {
  width: 60px;
}
.create-booking-box .page.three .address {
  border-radius: 0;
}
.create-booking-box .page.three .address:first-of-type {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
.create-booking-box .page.three .address:nth-of-type(3) {
  border-bottom-left-radius: 4px;
  width: 50%;
}
.create-booking-box .page.three .address:nth-of-type(4) {
  border-bottom-right-radius: 4px;
  width: 50%;
}
.create-booking-box .page.three .address:focus-within {
  z-index: 2;
}
.create-booking-box .page.three .input-choice {
  box-shadow: 0px 0px 0px 1px #cecece;
  border-radius: 4px;
  margin: 2px;
  position: relative;
  padding: 5px 8px;
  cursor: pointer;
}
.create-booking-box .page.three .input-choice:has(input:checked) {
  background-color: var(--logo-color);
  color: #fff;
}
.create-booking-box .page.three .input-choice > input:checked ~ label {
  background-color: var(--logo-color);
  color: #fff;
}
.create-booking-box .page.three .input-choice label {
  padding: 1px 5px;
  display: block;
  position: relative;
  pointer-events: none;
}
.create-booking-box .page.three .input-choice label::first-letter {
  text-transform: capitalize;
}
.create-booking-box .page.three .input-choice input[type=checkbox],
.create-booking-box .page.three .input-choice input[type=radio] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.cancel-modal .cancel-reason-btn {
  padding: 7px 10px;
  --tooltip-top: 35px;
  --tooltip-width: 167px;
}
.cancel-modal.cancellation .cancellation-text {
  width: 100%;
  margin-top: 5px;
  box-sizing: border-box;
  height: 142px;
  padding: 5px;
  resize: none;
  box-shadow: 0px 0px 0px 1px var(--color-slate-200);
  border-radius: 4px;
  font: 500 0.9rem var(--text-font);
  color: var(--text-color);
  transition: height 0.1s ease-in;
  opacity: 1;
}
.cancel-modal.cancellation .suggestion-container {
  height: 56px;
  padding: 5px;
  opacity: 1;
  transition: height 0.1s ease-in, opacity 0.15s ease-in;
}
.cancel-modal .suggestion-container {
  height: 0px;
  overflow: hidden;
  padding: 0px;
  opacity: 0;
  transition: height 0.1s ease-in, opacity 0.15s ease-in, padding 0s ease-in 0.1s;
}
.cancel-modal .reason-suggestions {
  width: 100%;
  flex-shrink: 0;
  font: 600 0.875rem Lato;
  margin-bottom: 2px;
  margin-top: 5px;
  color: var(--text-color);
}
.cancel-modal .cancellation-text {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  margin: 0px;
  box-sizing: border-box;
  height: 0px;
  padding: 0px;
  border: 0;
  opacity: 0;
  transition: height 0.1s ease-in, opacity 0.15s ease-in, padding 0s ease-in 0.1s, margin 0s ease-in 0.1s;
}

.generic-modal.view-booking-modal,
.user-details {
  top: 0;
  left: 0;
  transform: unset;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border-radius: 0;
}
.generic-modal.view-booking-modal[data-state=viewing] .start-edit,
.generic-modal.view-booking-modal[data-state=viewing] .export-pdf,
.user-details[data-state=viewing] .start-edit,
.user-details[data-state=viewing] .export-pdf {
  display: block;
}
.generic-modal.view-booking-modal[data-state=viewing] .edit-btns,
.user-details[data-state=viewing] .edit-btns {
  display: none;
}
.generic-modal.view-booking-modal[data-state=editing] .start-edit,
.generic-modal.view-booking-modal[data-state=editing] .export-pdf,
.user-details[data-state=editing] .start-edit,
.user-details[data-state=editing] .export-pdf {
  display: none;
}
.generic-modal.view-booking-modal[data-state=editing] .edit-btns,
.user-details[data-state=editing] .edit-btns {
  display: flex;
  margin-left: auto;
}
.generic-modal.view-booking-modal[data-state=editing] .details-container .booking-details-container .dropdown,
.user-details[data-state=editing] .details-container .booking-details-container .dropdown {
  padding: 5px;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  pointer-events: all;
}
.generic-modal.view-booking-modal[data-state=editing] .details-container .booking-details-container .dropdown button::after,
.user-details[data-state=editing] .details-container .booking-details-container .dropdown button::after {
  opacity: 1;
}
.generic-modal.view-booking-modal[data-state=editing] .details-container .booking-details-container > span[data-map],
.user-details[data-state=editing] .details-container .booking-details-container > span[data-map] {
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  padding: 5px;
}
.generic-modal.view-booking-modal[data-state=editing] .details-container .booking-details-container > span[data-map]:focus-within, .generic-modal.view-booking-modal[data-state=editing] .details-container .booking-details-container > span[data-map].focused,
.user-details[data-state=editing] .details-container .booking-details-container > span[data-map]:focus-within,
.user-details[data-state=editing] .details-container .booking-details-container > span[data-map].focused {
  box-shadow: 0px 0px 0px 1px #8b95a2, 0px 1px 5px rgba(0, 0, 0, 0.4392156863), 0px 1px 2px 0px rgba(0, 0, 0, 0.2392156863);
  outline: 0;
}
.generic-modal.view-booking-modal[data-state=editing] .details-container .booking-details-container > span[data-map]:hover,
.user-details[data-state=editing] .details-container .booking-details-container > span[data-map]:hover {
  box-shadow: 0px 0px 0px 1px #8b95a2, 0px 1px 5px rgba(0, 0, 0, 0.4392156863), 0px 1px 2px 0px rgba(0, 0, 0, 0.2392156863);
}
.generic-modal.view-booking-modal.active,
.user-details.active {
  transform: unset;
}
.generic-modal.view-booking-modal .details-container,
.generic-modal.view-booking-modal .questionnaire-container,
.user-details .details-container,
.user-details .questionnaire-container {
  padding: 20px 30px;
  width: 100%;
  margin: auto;
  max-width: 500px;
  box-sizing: border-box;
}
.generic-modal.view-booking-modal .details-container .spinner-circle,
.generic-modal.view-booking-modal .questionnaire-container .spinner-circle,
.user-details .details-container .spinner-circle,
.user-details .questionnaire-container .spinner-circle {
  width: 12px;
  height: 12px;
  border-top: 3px solid var(--spinner-color);
  border-right: 3px solid var(--spinner-color);
  border-bottom: 3px solid var(--spinner-color);
  border-left: 3px solid transparent;
}
.generic-modal.view-booking-modal .details-container .f-header:not(.f-sm),
.generic-modal.view-booking-modal .questionnaire-container .f-header:not(.f-sm),
.user-details .details-container .f-header:not(.f-sm),
.user-details .questionnaire-container .f-header:not(.f-sm) {
  font-size: 1.6rem;
}

.booking-note {
  height: 100px;
}

.notes-text {
  font: 500 0.9rem var(--text-font);
  box-sizing: border-box;
  border: 0;
  resize: none;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  transition: box-shadow 0.2s ease-in;
}
.notes-text:hover, .notes-text:focus-within {
  box-shadow: 0px 0px 0px 1px #8b95a2, 0px 1px 5px rgba(0, 0, 0, 0.4392156863), 0px 1px 2px 0px rgba(0, 0, 0, 0.2392156863);
  outline: 0;
}

.character-count {
  font: 400 0.7rem var(--text-font);
  margin-left: auto;
  margin-bottom: 3px;
  margin-top: -5px;
}

.export-pdf {
  padding: 5px 10px;
}
.export-pdf span {
  width: 115px;
  display: flex;
  flex-flow: row-reverse;
  --icon-color: #fff;
  gap: 5px;
  align-items: center;
  padding-right: 5px;
}

.booking-details-container.staff-error,
.inner-details-container.staff-error {
  color: var(--color-danger-600);
  flex-wrap: wrap;
}
.booking-details-container.staff-error > div.dropdown,
.inner-details-container.staff-error > div.dropdown {
  box-shadow: 0px 0px 0px 1px var(--color-danger-500);
}
.booking-details-container.staff-error::after,
.inner-details-container.staff-error::after {
  content: "This staff member cannot perform the selected service";
  font: 600 0.875rem var(--header-font);
  width: 100%;
  margin: 5px 0px;
  text-align: center;
  background: var(--color-danger-100);
  padding: 5px;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--color-danger-500);
  color: var(--color-danger-700);
}
.booking-details-container > div,
.inner-details-container > div {
  font: 400 0.9rem var(--text-font);
  width: 170px;
}
.booking-details-container > div.f-600,
.inner-details-container > div.f-600 {
  font-weight: 600;
}
.booking-details-container > div.date-time-modal,
.inner-details-container > div.date-time-modal {
  height: 690px;
  width: 100%;
  max-width: 415px;
}
.booking-details-container > div.date-time-modal .confirm-booking-container,
.inner-details-container > div.date-time-modal .confirm-booking-container {
  margin-top: 5px;
}
.booking-details-container > div.modal-ontop-overlay,
.inner-details-container > div.modal-ontop-overlay {
  width: 100%;
  z-index: 11;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  height: 100%;
}
.booking-details-container > div.dropdown,
.inner-details-container > div.dropdown {
  display: block;
  margin-left: 0px;
  width: 270px;
  padding: 0px 5px;
  border-radius: 4px;
  box-sizing: border-box;
  text-align: left;
  transition: padding 0.2s ease-in, box-shadow 0.2s ease-in;
  pointer-events: none;
}
.booking-details-container > div.dropdown .drop-list,
.inner-details-container > div.dropdown .drop-list {
  width: calc(100% + 2px);
  top: 33px;
  left: -1px;
  box-sizing: border-box;
}
.booking-details-container > div.dropdown .drop-list li,
.inner-details-container > div.dropdown .drop-list li {
  width: 100%;
  box-sizing: border-box;
}
.booking-details-container > div.dropdown button,
.inner-details-container > div.dropdown button {
  text-align: left;
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  font: 600 0.9rem var(--text-font);
}
.booking-details-container > div.dropdown button::after,
.inner-details-container > div.dropdown button::after {
  opacity: 0;
  transition: opacity 0.2s ease-in;
}
.booking-details-container > .booking-length::after,
.inner-details-container > .booking-length::after {
  content: attr(data-duration-name);
  margin-left: 5px;
  color: var(--color-gray-900);
  font-weight: 400;
}
.booking-details-container > span,
.booking-details-container .date-change-btn,
.inner-details-container > span,
.inner-details-container .date-change-btn {
  display: flex;
  font: 600 0.9rem var(--text-font);
  margin-left: 0px;
  width: 270px;
  transition: padding 0.2s ease-in, box-shadow 0.2s ease-in;
  padding: 0px 5px;
  border-radius: 4px;
  box-sizing: border-box;
}
.booking-details-container .business-url-input,
.inner-details-container .business-url-input {
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  margin-right: 5px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 5px 10px;
  outline: 0 !important;
}
.booking-details-container .business-url-input:focus-within,
.inner-details-container .business-url-input:focus-within {
  box-shadow: 0px 0px 0px 2px var(--color-slate-500);
}
.booking-details-container .url-end,
.inner-details-container .url-end {
  width: -moz-fit-content;
  width: fit-content;
  margin-right: 10px;
  color: var(--color-slate-600);
}

.header-container {
  border-bottom: 1px solid var(--color-slate-400);
  padding: 15px;
}
.header-container .header {
  font: 600 1.25rem var(--header-font);
}
.header-container .close {
  --width: 22px;
  --height: 22px;
}

.business-url-input {
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  margin-right: 5px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 5px 10px;
  outline: 0 !important;
  border: 0 !important;
  border-radius: 4px;
}
.business-url-input:focus-within {
  box-shadow: 0px 0px 0px 2px var(--color-slate-500);
}

.url-end {
  width: -moz-fit-content;
  width: fit-content;
  margin-right: 10px;
  color: var(--color-slate-600);
}

.url-change-container button {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in;
}
.url-change-container.different button {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.generic-modal.switching-modal {
  min-width: unset;
  width: 300px;
  box-sizing: border-box;
}

.switching-loading-container {
  height: 200px;
}

.swap-text {
  text-align: center;
  font: 500 1rem var(--header-font);
  padding-bottom: 30px;
  color: var(--color-gray-800);
}

.generic-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - 5px));
  background: #fff;
  border-radius: 4px;
  z-index: 12;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  width: 50%;
  max-width: 560px;
  min-width: 325px;
  box-sizing: border-box;
}
.generic-modal.just-spinner-modal {
  min-width: 100px;
  width: 100px;
  height: 100px;
}
.generic-modal.level-two {
  z-index: 14;
}
.generic-modal.loading {
  pointer-events: none;
  cursor: default;
}
.generic-modal.loading .exit,
.generic-modal.loading .opening-hours-container {
  opacity: 0.5;
}
.generic-modal.active {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.generic-modal .header {
  font: 600 1.4rem var(--header-font);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.generic-modal .subheader {
  font: 500 1rem var(--text-font);
  color: var(--color-slate-500);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.generic-modal.delete-location-modal {
  padding: 30px;
  box-sizing: border-box;
}
.generic-modal.delete-location-modal .warning-box {
  height: 80px;
  box-sizing: border-box;
}
.generic-modal.delete-location-modal .warning-box.loading {
  background-color: #fff;
  border: 1px solid #fff;
}
.generic-modal.delete-location-modal .warning-box.loading::before {
  opacity: 0;
}

.generic-modal.holidays-modal {
  padding: 40px 20px 40px 40px;
  box-sizing: border-box;
  overflow: visible;
  top: calc(50% - 30px);
  min-width: 325px;
  width: 400px;
}

.calendar-top {
  background-color: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}

.holidays-container {
  height: 375px;
  padding: 0;
  z-index: 5;
}
.holidays-container.--calendar-container {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.holidays-container .calendar {
  box-shadow: unset;
  overflow: visible;
}
.holidays-container .calendar.animating {
  overflow: hidden;
}
.holidays-container .calendar .--row-holder {
  position: relative;
}
.holidays-container .calendar .--row-holder .--date {
  border-radius: 100%;
}
.holidays-container .calendar .--row-holder .--date.show-holiday + .date-values {
  max-height: 300px;
  opacity: 1;
  overflow: visible;
  visibility: visible;
  transform: translate(-50%, 0px);
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in, max-height 0s 0s ease-in;
}
.holidays-container .calendar .--row-holder .--date.holiday-set {
  background-color: var(--color-slate);
  color: #fff;
}

.date-values {
  position: absolute;
  max-height: 0;
  overflow: hidden;
  top: 49px;
  color: #000;
  width: 180px;
  background: #fff;
  left: 50%;
  transform: translate(-50%, 8px);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in, max-height 0s 0.3s ease-in;
}
.date-values .invalid-txt {
  font: 400 0.8rem var(--text-font);
  color: var(--color-danger-600);
  padding: 0px 10px 10px 10px;
}
.date-values .full-btn {
  border-bottom: 1px solid var(--logo-color-darker-10);
}
.date-values label {
  font: 600 0.85rem var(--header-font);
  color: var(--text-color);
}
.date-values .times-container {
  gap: 5px;
}
.date-values .triangle {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
}
.date-values .holiday-date {
  padding: 10px 10px 7px;
  border-bottom: 1px solid var(--color-gray-400);
}
.date-values .dropdown {
  margin-top: 3px;
}
.date-values .dropdown button {
  width: 100%;
  text-align: start;
}
.date-values .dropdown ul {
  top: 38px;
  font: 400 0.9rem var(--text-font);
  width: 100%;
  box-sizing: border-box;
}
.date-values .dropdown ul li {
  width: 100%;
  box-sizing: border-box;
}
.date-values .dropdown .triangle {
  top: 30px;
  z-index: 11;
}
.date-values input {
  outline: 0;
  border: 0;
  padding: 3px;
  font: 500 0.9rem var(--text-font);
  width: 100%;
  box-sizing: border-box;
  margin-top: 3px;
}

.notification {
  position: fixed;
  top: 50px;
  right: 20px;
  padding: 10px;
  box-sizing: border-box;
  font-family: var(--text-font);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.15s ease-in, visibility 0.15s ease-in, transform 0.25s cubic-bezier(0.25, 0.1, 0.7, 1.82);
  min-width: 250px;
  z-index: 9999999;
}
.notification.active {
  opacity: 1;
  visibility: visible;
  transform: translate(0px);
}
.notification.error {
  background-color: var(--color-danger-50);
  box-shadow: 0px 0px 0px 1px var(--color-danger-500), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --icon-url: url(/images/icons/close-circle.svg);
  --size: 16px;
  --icon-color: var(--color-danger-700);
}
.notification.error .icon {
  --size: 16px;
  --icon-color: var(--color-danger-600);
}
.notification.success {
  background-color: var(--color-success-50);
  box-shadow: 0px 0px 0px 1px var(--color-success-500), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --icon-url: url(/images/icons/check-circle.svg);
  --size: 16px;
  --icon-color: var(--color-success-700);
}
.notification.success .icon {
  --size: 16px;
  --icon-color: var(--color-success-700);
}
.notification.toast {
  background-color: var(--color-slate-800);
  box-shadow: 0px 0px 0px 1px var(--color-slate-900), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  color: #fff;
}
.notification.toast .title {
  display: none;
}
.notification.toast .body {
  margin-top: 0px;
}
.notification .title > div {
  gap: 5px;
}
.notification .title > div::before {
  width: var(--size);
  height: var(--size);
  background: transparent;
  content: "";
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--icon-color);
  display: block;
}

.marked {
  display: none;
}

.deletion {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.deletion .service,
.deletion .subcategory,
.deletion .details-container,
.deletion .questionniare,
.deletion .quesiton-amount,
.deletion .questionnaire-services {
  opacity: 0.4;
}
.deletion [data-tooltip]:hover::before {
  opacity: 0;
}
.deletion .marked {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  border: 1px solid var(--color-danger-600);
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--color-danger-600), 0px 0px 0px 3px var(--color-danger-200);
  pointer-events: none;
}
.deletion .marked div {
  position: absolute;
  top: -29.5px;
  background: var(--color-danger-600);
  padding: 5.5px 15px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  border-left: 2px solid var(--color-danger-200);
  border-top: 2px solid var(--color-danger-200);
  border-right: 2px solid var(--color-danger-200);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.15s ease;
  cursor: pointer;
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}
.modal-overlay.active.no-pointer {
  pointer-events: none;
}
.modal-overlay.level-one {
  z-index: 10;
}
.modal-overlay.level-two {
  z-index: 100;
}
.modal-overlay.level-three {
  z-index: 200;
}
.modal-overlay.no-pointer {
  pointer-events: none;
}

.modal-ontop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  pointer-events: none;
}
.modal-ontop-overlay.active {
  pointer-events: all;
}
.modal-ontop-overlay.show-background {
  background-color: rgba(0, 0, 0, 0.1215686275);
}
.modal-ontop-overlay.level-one {
  z-index: 10;
}
.modal-ontop-overlay.level-1 {
  z-index: 12;
}
.modal-ontop-overlay.level-2 {
  z-index: 100;
}
.modal-ontop-overlay.level-three {
  z-index: 100;
}

.delete-modal {
  padding: 30px;
}
.delete-modal .header {
  margin-left: 0;
}
.delete-modal .button-container {
  padding: 20px 0px;
}

.warning-box {
  font: 500 0.9rem Lato;
  background-color: var(--color-warning-100);
  padding: 13px 20px 13px 30px;
  border: 1px solid var(--color-warning-200);
  color: var(--color-warning-900);
  position: relative;
}
.warning-box::before {
  content: "";
  -webkit-mask-image: url(/images/icons/warning.svg);
  mask-image: url(/images/icons/warning.svg);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--color-warning-800);
  height: 12px;
  width: 12px;
  display: block;
  position: absolute;
  left: 12px;
  top: 16px;
}

@media screen and (max-width: 568px) {
  html body:has(.generic-modal.active) main {
    filter: blur(12px);
  }
  html body div.generic-modal {
    position: fixed;
    left: 50%;
    right: 0;
    max-width: 100%;
    min-width: 319px;
    max-width: 364px;
    top: 50%;
    width: 98%;
    padding: 15px;
    border-radius: 10px;
    transform: translate(-50%, -50%);
  }
  html body div.generic-modal .header {
    font-size: 1rem;
    margin-top: 5px;
  }
  html body div.generic-modal .subheader {
    font-size: 0.875rem;
  }
  html body div.generic-modal.active {
    transform: translate(-50%, -50%);
  }
  html body div.generic-modal.date-time-modal.give-height {
    height: 510px;
  }
  html body div.generic-modal.date-time-modal .--calendar-container .confirm-booking-btn-container .confirm-booking-container {
    margin-top: 10px;
  }
}
@media (max-width: 1200px) {
  .calendar-calendar .calendar-toolbar .search-container {
    left: calc(50% + 70px);
  }
  .calendar-calendar .calendar-toolbar .close-search {
    font-size: 0;
    justify-content: end;
  }
}
@media (max-width: 1000px) {
  .booking-manager-toolbar {
    --toolbar-padding: 8px 10px;
    --logo-width: 60.14px;
    --logo-height: 24.14px;
    justify-content: space-between;
  }
  .booking-manager-toolbar .nav-link {
    display: none;
  }
  .booking-manager-toolbar .hamburger {
    display: block;
  }
  .calendar-side-overlay {
    position: absolute;
    height: 0;
    width: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.2s ease-in, opacity 0.2s ease-in;
  }
  .side-open .calendar-side-overlay {
    height: 100%;
    width: 100%;
    z-index: 14;
    opacity: 1;
    visibility: visible;
  }
  .side-open .calendar-side-bar {
    transform: translateX(0%);
  }
  .calendar-side-bar {
    height: 100%;
    display: block;
    position: absolute;
    z-index: 15;
    background: #fff;
    width: 250px;
    max-height: calc(100vh - 51px);
    overflow: overlay;
    transform: translateX(-100%);
    transition: transform 0.2s ease-in;
  }
  .month .calendar-calendar .big-calendar-days-holder {
    margin: 0px 0px 5px;
  }
  .month .calendar-calendar .big-calendar-days-holder .big-calendar-days {
    font-size: 0;
    text-align: center;
    display: block;
  }
  .month .calendar-calendar .big-calendar-days-holder .big-calendar-days::first-letter {
    font-weight: 700;
    font-size: 0.8rem;
  }
  .calendar-calendar .calendar-day {
    text-align: center;
  }
  .calendar-calendar .booking-info-container {
    left: 0 !important;
    top: unset !important;
    bottom: 0;
    position: fixed;
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;
    transform: translateY(100%);
    opacity: 1;
    padding: 25px 20px 15px 20px;
    transition: transform 0.2s ease-in;
  }
  .calendar-calendar .booking-info-container .booking-close-container {
    background-color: transparent;
    box-shadow: none;
    top: 0px;
    right: 10px;
  }
  .calendar-calendar .booking-info-container .booking-close-container button::before {
    content: "";
    position: fixed;
    top: -100vh;
    left: 0px;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 49;
    opacity: 0;
    transition: opacity 0.2s ease-in;
  }
  .calendar-calendar .booking-info-container.active {
    transform: translateY(0px);
    z-index: 10;
  }
  .calendar-calendar .booking-info-container.active .booking-close-container button::before {
    opacity: 1;
    pointer-events: auto;
  }
  .calendar-calendar .create-booking-box.active {
    opacity: 1;
    visibility: visible;
    left: 50% !important;
    transform: translate(-50%, 30px);
  }
  .calendar-calendar .create-booking-box.active.bottom {
    transform: translate(-50%, -20px);
  }
  .calendar-calendar .bottom-big-container {
    height: calc(100% - 90px);
  }
  .calendar-calendar .calendar-overlay.search {
    top: 44px;
    height: calc(100% - 44px);
    z-index: 8;
  }
  .calendar-calendar .calendar-toolbar {
    padding: 10px 5px;
  }
  .calendar-calendar .calendar-toolbar .notification-box {
    left: -106px;
  }
  .calendar-calendar .calendar-toolbar .notification-box .triangle {
    left: 108px;
  }
  .calendar-calendar .calendar-toolbar.searching {
    padding: 6px 5px;
  }
  .calendar-calendar .calendar-toolbar.searching .length-selector,
  .calendar-calendar .calendar-toolbar.searching .main-calendar-date,
  .calendar-calendar .calendar-toolbar.searching .icon.chevron {
    display: none;
  }
  .calendar-calendar .calendar-toolbar.searching .search-container {
    visibility: visible;
    position: relative;
    top: 0;
    left: 0;
    transform: unset;
    z-index: 10;
    opacity: 1;
    transition: visibility 0.2s ease-in, opacity 0.2s ease-in;
    display: flex;
    align-items: center;
  }
  .calendar-calendar .calendar-toolbar .main-calendar-date {
    font-size: 0.8rem;
    min-width: 110px;
  }
  .calendar-calendar .calendar-toolbar .filters,
  .calendar-calendar .calendar-toolbar .search-thick {
    display: block;
  }
  .calendar-calendar .calendar-toolbar .search-container {
    transition: visibility 0s ease-in, opacity 0s ease-in;
    opacity: 0;
    visibility: hidden;
  }
  .calendar-calendar .calendar-toolbar .close-search {
    font-size: 0.875rem;
    justify-content: unset;
  }
  .calendar-calendar .calendar-toolbar .icon {
    --width: 20px;
    --height: 20px;
  }
  .calendar-calendar .calendar-toolbar .dropdown-btn {
    font-size: 0.8rem;
  }
  .calendar-calendar .calendar-toolbar .dropdown-btn::after {
    margin-left: 2px;
    height: 18px;
    width: 18px;
  }
  .calendar-calendar .big-calendar .big-calendar-times {
    width: 20px;
  }
  .calendar-calendar .big-calendar .monthly-row .month {
    padding: 5px;
    font-size: 0.65rem;
  }
  .calendar-calendar .big-calendar-days-holder {
    margin-left: 20px;
    margin-right: 7px;
  }
  .calendar-calendar .big-calendar-days-holder .big-calendar-days {
    margin-left: 0px;
    display: flex;
    flex-flow: column-reverse;
  }
  .calendar-calendar .big-calendar-days-holder .big-calendar-days .date {
    text-align: center;
    font-size: 1rem;
  }
  .calendar-calendar .big-calendar-days-holder .big-calendar-days .day {
    font-size: 0;
    text-align: center;
  }
  .calendar-calendar .big-calendar-days-holder .big-calendar-days .day::first-letter {
    font-weight: 700;
    font-size: 0.8rem;
  }
}
@media (max-width: 770px) {
  .calendar-calendar .search-filter-container .filter-input-container .date-container.date-from .calendar-overflow-container {
    right: 0;
    left: unset;
  }
  .calendar-calendar .search-filter-container .filter-input-container .date-container.date-from .calendar-overflow-container .triangle {
    left: -66px;
  }
  .calendar-calendar .search-filter-container .filter-input-container .date-container.date-to .calendar-overflow-container {
    left: 0;
  }
  .calendar-calendar .search-filter-container .filter-input-container .date-container.date-to .calendar-overflow-container .triangle {
    left: 60px;
  }
}
.location-times .opening-hours-container {
  padding: 5px 5px 5px 0px;
}

.location-modal {
  height: 100vh;
  width: 100vw;
  position: fixed;
  background: #fff;
  box-sizing: border-box;
  z-index: 12;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in;
  overflow: auto;
}
.location-modal.active {
  opacity: 1;
  visibility: visible;
}

.rest-container {
  padding: 30px;
  max-width: 530px;
}

@media (max-width: 575px) {
  .location-modal {
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: #fff;
    box-sizing: border-box;
    z-index: 12;
  }
  .rest-container {
    padding: 10px;
  }
  .generic-modal.view-booking-modal.active {
    padding: 0px;
  }
  .generic-modal.view-booking-modal.active .details-container {
    padding: 10px 15px;
  }
  .calendar-calendar .calendar-day {
    font-size: 0;
    text-align: center;
  }
  .calendar-calendar .calendar-day::first-letter {
    font-size: 0.9rem;
  }
  .calendar-calendar .create-booking-box.active {
    width: 100%;
    max-width: 420px;
    padding: 10px 15px;
  }
  .calendar-calendar .create-booking-box.active .align-input {
    width: 50%;
    margin-left: 0;
  }
  .calendar-calendar .calendar-overlay .no-results {
    width: 100%;
    overflow-wrap: break-word;
  }
  .calendar-calendar .calendar-overlay .no-results .title {
    font-size: 2.5rem;
  }
  .calendar-calendar .calendar-overlay .no-results .lead {
    font-size: 1rem;
  }
  .calendar-calendar .calendar-overlay .result-container.expanded {
    height: 100px;
  }
  .calendar-calendar .calendar-overlay .result-container .booking-expand {
    font-size: 0.6rem;
    --width: 16px;
    --height: 16px;
    top: calc(100% - 8px);
  }
  .calendar-calendar .calendar-overlay .result-container .date-container {
    font-size: 0.875rem;
  }
  .calendar-calendar .calendar-overlay .result-container .booking-time {
    font-size: 0.775rem;
  }
  .calendar-calendar .calendar-overlay .result-container .details-container {
    max-width: 225px;
    font-size: 0.875rem;
  }
  .calendar-calendar .calendar-overlay .result-container .details-container .f-sm {
    font-size: 0.775rem;
  }
  .calendar-calendar .calendar-overlay .result-container .details-container div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .calendar-calendar .calendar-overlay .result-container .booking-option-bar {
    top: 53px;
    right: 0px;
  }
  .calendar-calendar .calendar-overlay .result-container .booking-option-bar .edit-btn,
  .calendar-calendar .calendar-overlay .result-container .booking-option-bar .cancel-btn {
    width: 91px;
  }
  .calendar-calendar .calendar-overlay .result-container .booking-option-bar .edit-btn,
  .calendar-calendar .calendar-overlay .result-container .booking-option-bar .full-btn,
  .calendar-calendar .calendar-overlay .result-container .booking-option-bar .cancel-btn {
    font-size: 0.7rem;
    padding: 4px 7px;
  }
  .calendar-calendar .calendar-toolbar .dropdown-btn {
    padding: 3px 5px;
  }
  .calendar-calendar .calendar-toolbar .search-bar {
    width: 100%;
  }
  .calendar-calendar .calendar-toolbar .search-filter-container {
    left: unset;
    right: -40px;
    top: 38px;
    width: 320px;
  }
  .calendar-calendar .calendar-toolbar .search-filter-container .triangle {
    left: 261px;
    transform: unset;
  }
  .calendar-calendar .calendar-toolbar .btn-container {
    overflow: clip;
  }
  .calendar-calendar .calendar-toolbar .btn-container:has(.notification-box.active) {
    overflow: unset;
  }
  .calendar-calendar .calendar-toolbar .btn-container .search-thick,
  .calendar-calendar .calendar-toolbar .btn-container .filters,
  .calendar-calendar .calendar-toolbar .btn-container .bell {
    margin-right: 10px;
  }
  .calendar-calendar .calendar-toolbar.searching .search-container {
    width: calc(100% - 44px);
    margin-left: 5px;
    min-width: 255px;
  }
  .calendar-calendar .calendar-toolbar.searching .search-container input::-moz-placeholder {
    text-align: left;
    padding-left: 25px;
  }
  .calendar-calendar .calendar-toolbar.searching .search-container input::placeholder {
    text-align: left;
    padding-left: 25px;
  }
  .calendar-calendar .calendar-toolbar.searching .btn-container {
    margin-left: 0px;
    width: 38px;
    overflow: unset;
  }
  .calendar-calendar .calendar-toolbar.searching .btn-container .close-search {
    font-size: 0;
    justify-content: end;
  }
  .calendar-calendar .calendar-toolbar.searching .search-filter {
    position: relative;
    right: 0;
    top: 0;
    gap: 0;
    font-size: 0;
    width: 25px;
    height: 25px;
    transform: unset;
    margin-left: 8px;
  }
  .calendar-calendar .big-calendar .monthly-row .month .booking-amount {
    font-size: 0.4rem;
  }
}
.info-business-message-box {
  position: fixed;
  bottom: 10px;
  width: 100%;
  max-width: 500px;
  padding: 10px 20px 10px 10px;
  box-sizing: border-box;
  left: 10px;
  background: var(--color-warning-100);
  font: 400 0.8rem var(--header-font);
  color: var(--color-warning-900);
  box-shadow: 0px 0px 0px 1px var(--color-warning-300);
  letter-spacing: 0.3px;
  z-index: 9999;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.info-business-message-box .close {
  position: absolute;
  top: 5px;
  right: 5px;
  --icon-color: var(--color-warning-900);
}

@media (max-width: 375px) {
  .calendar-calendar .calendar-overlay .result-container .details-container {
    max-width: 140px;
    font-size: 0.875rem;
  }
}
.ai-generated-text {
  background: var(--color-blue-50);
  color: var(--color-blue-900);
  --icon-color: var(--color-blue-700);
}

.ai-suggestion-input {
  outline: 1px solid var(--color-blue-500);
  background: var(--color-blue-50);
  color: var(--color-blue-700);
  --icon-color: var(--color-blue-700);
}

.add-icon::before {
  content: "+";
  font: 600 1rem ui-serif;
  margin-right: 5px;
  height: 15px;
  position: relative;
  top: -0.5px;
}

.before-icon.ai {
  --icon-url: url(/images/icons/ai.svg);
}
.before-icon.add-thick {
  --icon-url: url(/images/icons/add-thick.svg);
}
.before-icon.apps {
  --icon-url: url(/images/icons/apps.svg);
}
.before-icon.delete {
  --icon-url: url(/images/icons/delete.svg);
}
.before-icon.delete-fill {
  --icon-url: url(/images/icons/delete-fill.svg);
}
.before-icon.edit-fill {
  --icon-url: url(/images/icons/edit-fill.svg);
}
.before-icon.check-thick-rounded {
  --icon-url: url(/images/icons/check-thick-rounded.svg);
}
.before-icon.more-options {
  --icon-url: url(/images/icons/more-options.svg);
}
.before-icon.packaging {
  --icon-url: url(/images/icons/packaging.svg);
}
.before-icon.packaging-fill {
  --icon-url: url(/images/icons/packaging-fill.svg);
}
.before-icon.printer-fill {
  --icon-url: url(/images/icons/printer-fill.svg);
}
.before-icon.refund {
  --icon-url: url(/images/icons/refund.svg);
}
.before-icon.save-fill {
  --icon-url: url(/images/icons/save-fill.svg);
}
.before-icon.upload-thick {
  --icon-url: url(/images/icons/upload-thick.svg);
}
.before-icon::before {
  content: "";
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--icon-color, #fff);
  height: var(--size, 14px);
  width: var(--size, 14px);
  display: block;
  margin-right: 5px;
}

.allow-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.animate-in {
  opacity: 0;
}

.absolute-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.absolute-x-center {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

.absolute-y-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-center {
  align-items: center;
}

.align-items-stretch {
  align-items: stretch;
}

.align-items-start {
  align-items: start;
}

.align-items-end {
  align-items: end;
}

.white-background {
  background: #fff;
}

.background-color-grey-50 {
  background: var(--color-gray-50);
}

.background-color-grey-100 {
  background: var(--color-gray-100);
}

.background-color-slate-50 {
  background: var(--color-slate-50);
}

.background-color-danger-100 {
  background: var(--color-danger-100);
}

.background-light-hover:hover {
  background: var(--color-gray-50);
}

.background-color-gray-100-hover:hover {
  background: var(--color-gray-100);
}

.big-header {
  font-size: 3.5rem;
}

.bold-link {
  color: var(--logo-color);
  font-weight: 600;
}

.box-sizing-border {
  box-sizing: border-box;
}

.box-shadow-danger-700 {
  box-shadow: 0px 0px 0px 1px var(--color-danger-700);
}

.box-shadow-input {
  box-shadow: var(--color-slate-300) 0px 1px 1px 0px, var(--color-slate-200) 0px 0px 0px 1px, var(--color-slate-100) 0px 2px 5px 0px;
}
.box-shadow-input.darker-hover:hover, .box-shadow-input.darker-hover:focus-within {
  box-shadow: var(--color-slate-500) 0px 1px 1px 0px, var(--color-slate-400) 0px 0px 0px 1px, var(--color-slate-200) 0px 2px 5px 0px;
}

.box-shadow-drop {
  box-shadow: 0px 8px 16px -3px rgba(0, 0, 0, 0.08), 0px 16px 36px -6px rgba(25, 28, 33, 0.2), 0px 0px 0px 1px var(--color-gray-100);
}

.box-shadow-slate-200 {
  box-shadow: 0px 0px 0px 1px var(--color-slate-200);
}

.box-shadow-outline {
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
}

.box-shadow-slate-400 {
  box-shadow: 0px 0px 0px 1px var(--color-slate-400);
}

.box-shadow-logo-hover:hover {
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10), 0px 0px 0px 2px var(--logo-color);
}

.box-shadow-dark-blur {
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.06) 0px 4px 2px, rgba(0, 0, 0, 0.06) 0px 8px 4px, rgba(0, 0, 0, 0.06) 0px 16px 8px, rgba(0, 0, 0, 0.06) 0px 32px 16px, 0px 0px 0px 1px rgba(0, 0, 0, 0.12);
}

.box-shadow-lighter-blur {
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
}

.border-slate-300-dashed {
  border: 1px dashed var(--color-slate-300);
}

.border-radius-2 {
  border-radius: 2px;
}

.border-radius-3 {
  border-radius: 3px;
}

.border-radius-4 {
  border-radius: 4px;
}

.border-radius-10 {
  border-radius: 10px;
}

.border-radius-100 {
  border-radius: 100px;
}

.b-top-left-radius-4 {
  border-top-left-radius: 4px;
}

.b-top-right-radius-4 {
  border-top-right-radius: 4px;
}

.b-bottom-left-radius-4 {
  border-bottom-left-radius: 4px;
}

.b-bottom-right-radius-4 {
  border-bottom-right-radius: 4px;
}

.b-top-left-radius-10 {
  border-top-left-radius: 10px;
}

.b-top-right-radius-10 {
  border-top-right-radius: 10px;
}

.b-bottom-left-radius-10 {
  border-bottom-left-radius: 10px;
}

.b-bottom-right-radius-10 {
  border-bottom-right-radius: 10px;
}

.b-top-light {
  border-top: 1px solid var(--color-slate-200);
}

.b-top-slate-300 {
  border-top: 1px solid var(--color-slate-300);
}

.b-bottom-light {
  border-bottom: 1px solid #eeeef0;
}

.b-bottom-slate-300 {
  border-bottom: 1px solid var(--color-slate-300);
}

.b-bottom-gray-500 {
  border-bottom: 1px solid var(--color-gray-500);
}

.b-bottom-gray-900 {
  border-bottom: 1px solid var(--color-gray-900);
}

.chevron-after {
  display: flex;
  align-items: center;
}
.chevron-after::after {
  content: "";
  -webkit-mask-image: url(/images/icons/chevron.svg);
  mask-image: url(/images/icons/chevron.svg);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--color-slate-700);
  height: 16px;
  width: 16px;
  display: block;
}
.chevron-after.point-forward::after {
  transform: rotate(270deg);
}
.chevron-after.white::after {
  background-color: rgb(255, 255, 255);
}
.chevron-after.thick::after {
  -webkit-mask-image: url(/images/icons/chevron-thick.svg);
  mask-image: url(/images/icons/chevron-thick.svg);
  --icon-url: url(/images/icons/chevron-thick.svg);
}

.color-logo {
  color: var(--logo-color);
}

.color-text {
  color: var(--text-color);
}

.color-gray-800 {
  color: var(--color-gray-800);
}

.color-gray-900 {
  color: var(--color-gray-900);
}

.color-success-600 {
  color: var(--color-success-600);
}

.color-success-700 {
  color: var(--color-success-700);
}

.color-slate-500 {
  color: var(--color-slate-500);
}

.color-slate-600 {
  color: var(--color-slate-600);
}

.color-slate-700 {
  color: var(--color-slate-700);
}

.color-danger-600 {
  color: var(--color-danger-600);
}

.color-danger-700 {
  color: var(--color-danger-700);
}

.color-warning-700 {
  color: var(--color-warning-700);
}

.color-white {
  color: rgb(255, 255, 255);
}

.contain-height {
  max-height: 100dvh;
}

[data-info-label] {
  position: relative;
}
[data-info-label]::after {
  align-items: center;
  background: linear-gradient(45deg, var(--color-danger-700), var(--color-danger-500));
  border-radius: 100px;
  color: #fff;
  content: attr(data-info-label);
  display: flex;
  font: 600 0.7rem Lato;
  width: 15px;
  height: 15px;
  position: absolute;
  right: 0px;
  top: -5px;
  justify-content: center;
  text-shadow: 0 0 black;
}

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

.d-none {
  display: none;
}

.d-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.dark-icon {
  --icon-color: var(--color-slate-900);
}

.elipses-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elipses-txt.wrap-hover:hover {
  text-overflow: unset;
  white-space: break-spaces;
}

.remove-elipses-hover:hover {
  overflow: visible;
}

.error-txt {
  font: 400 0.8em var(--header-font);
  color: var(--color-danger-600);
}

.img-fit {
  display: block;
  width: 100%;
  height: auto;
}

.fade {
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}

.f-header {
  font-family: var(--header-font);
}

.f-italics {
  font-style: italic;
}

.f-body {
  font-family: var(--text-font);
}

.f-white {
  color: #fff;
}

.f-300 {
  font-weight: 300;
}

.f-400 {
  font-weight: 400;
}

.f-500 {
  font-weight: 500;
}

.f-600 {
  font-weight: 600;
}

.f-700 {
  font-weight: 700;
}

.f-800 {
  font-weight: 800;
}

.no-shrink {
  flex-shrink: 0;
}

.fade-out-down {
  animation: fade-out-down 0.2s ease-in forwards;
}

.fade-out-down-reverse {
  animation: fade-out-down 0.2s ease-in reverse;
}

.f-very-sm {
  font-size: 0.7rem;
}

.f-sm {
  font-size: 0.875rem;
}

.f-mid {
  font-size: 1rem;
}

.f-header-sm {
  font-size: 1.1rem;
}

.f-header-md {
  font-size: 1.25rem;
}

.f-big {
  font-size: 1.5rem;
}

.f-bigger {
  font-size: 3rem;
}

.f-line-height-1-6 {
  line-height: 1.6;
}

.line-height-21 {
  line-height: 21px;
}

.f-serif {
  font-family: serif;
}

.f-sans-serif {
  font-family: sans-serif;
}

.flex-column {
  flex-flow: column;
}

.flex-row {
  flex-flow: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flew-grow {
  flex: 1 1 auto;
}

.full-vh {
  min-height: 100vh;
}

.gap-5 {
  gap: 5px;
}

.gap-10 {
  gap: 10px;
}

.gap-20 {
  gap: 20px;
}

.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}

.h-100 {
  height: 100%;
}

.height-container-800 {
  height: 800px;
}

.height-container-full-height {
  height: 100%;
}

.hide {
  pointer-events: none;
  visibility: hidden;
}

.higher {
  z-index: 99 !important;
}

.icon, .tooltip {
  --width: 20px;
  --height: 20px;
  --icon-color: var(--color-slate-600);
  --icon-url: "";
  width: var(--width);
  height: var(--height);
  background: transparent;
  box-shadow: 0px 0px 0px 0px;
  padding: 0;
}
.icon.ai, .tooltip.ai {
  --icon-url: url(/images/icons/ai.svg);
}
.icon.account, .tooltip.account {
  --icon-url: url(/images/icons/account.svg);
}
.icon.account.fill:hover, .tooltip.account.fill:hover {
  --icon-url: url(/images/icons/account-fill.svg);
}
.icon.align-left, .tooltip.align-left {
  --icon-url: url(/images/icons/align-left.svg);
}
.icon.align-center, .tooltip.align-center {
  --icon-url: url(/images/icons/align-center.svg);
}
.icon.align-right, .tooltip.align-right {
  --icon-url: url(/images/icons/align-right.svg);
}
.icon.add-thick, .tooltip.add-thick {
  --icon-url: url(/images/icons/add-thick.svg);
}
.icon.animation, .tooltip.animation {
  --icon-url: url(/images/icons/animation.svg);
}
.icon.archive, .tooltip.archive {
  --icon-url: url(/images/icons/archive.svg);
}
.icon.arrow, .tooltip.arrow {
  --icon-url: url(/images/icons/arrow-back.svg);
}
.icon.arrow.forward, .tooltip.arrow.forward {
  rotate: 180deg;
}
.icon.back, .tooltip.back {
  --icon-url: url(/images/icons/chevron-thick.svg);
}
.icon.back::after, .tooltip.back::after {
  rotate: 180deg;
}
.icon.form-back, .tooltip.form-back {
  --icon-url: url(/images/icons/form-back.svg);
}
.icon.battery, .tooltip.battery {
  --icon-url: url(/images/icons/battery.svg);
}
.icon.border, .tooltip.border {
  --icon-url: url(/images/icons/border.svg);
}
.icon.business, .tooltip.business {
  --icon-url: url(/images/icons/store.svg);
}
.icon.business.fill:hover, .tooltip.business.fill:hover {
  --icon-url: url(/images/icons/store-fill.svg);
}
.icon.battery, .tooltip.battery {
  --icon-url: url(/images/icons/battery.svg);
}
.icon.bell, .tooltip.bell {
  --icon-url: url(/images/icons/bell.svg);
}
.icon.bell.active, .tooltip.bell.active {
  --icon-url: url(/images/icons/bell-active.svg);
}
.icon.bold, .tooltip.bold {
  --icon-url: url(/images/icons/bold.svg);
}
.icon.n-calendar, .tooltip.n-calendar {
  --height: 22px;
  --icon-url: url(/images/icons/calendar-thick.svg);
}
.icon.sm-calendar, .tooltip.sm-calendar {
  --icon-url: url(/images/icons/calendar-sm.svg);
}
.icon.chat, .tooltip.chat {
  --icon-url: url(/images/icons/chat.svg);
}
.icon.check-small, .tooltip.check-small {
  --icon-url: url(/images/icons/check-small.svg);
}
.icon.checkbox, .tooltip.checkbox {
  --icon-url: url(/images/icons/checkbox.svg);
}
.icon.chevron, .tooltip.chevron {
  --icon-url: url(/images/icons/chevron.svg);
}
.icon.chevron.left, .tooltip.chevron.left {
  rotate: 90deg;
}
.icon.chevron.right, .tooltip.chevron.right {
  rotate: 270deg;
}
.icon.close, .tooltip.close {
  --icon-url: url(/images/icons/close.svg);
}
.icon.close-thick, .tooltip.close-thick {
  --icon-url: url(/images/icons/close-thick.svg);
}
.icon.colors, .tooltip.colors {
  --icon-url: url(/images/icons/colors.svg);
}
.icon.color-text, .tooltip.color-text {
  --icon-url: url(/images/icons/color-text.svg);
}
.icon.delete, .tooltip.delete {
  --icon-url: url(/images/icons/delete.svg);
}
.icon.delete-fill, .tooltip.delete-fill {
  --icon-url: url(/images/icons/delete-fill.svg);
}
.icon.desktop, .tooltip.desktop {
  --icon-url: url(/images/icons/desktop.svg);
}
.icon.download, .tooltip.download {
  --icon-url: url(/images/icons/download.svg);
}
.icon.drag-indicator, .tooltip.drag-indicator {
  --icon-url: url(/images/icons/drag-indicator.svg);
}
.icon.edit, .tooltip.edit {
  --icon-url: url(/images/icons/edit.svg);
}
.icon.edit-square, .tooltip.edit-square {
  --icon-url: url(/images/icons/edit-square.svg);
}
.icon.edit-fill, .tooltip.edit-fill {
  --icon-url: url(/images/icons/edit-fill.svg);
}
.icon.eraser, .tooltip.eraser {
  --icon-url: url(/images/icons/eraser.svg);
}
.icon.export, .tooltip.export {
  --icon-url: url(/images/icons/export.svg);
}
.icon.elements, .tooltip.elements {
  --icon-url: url(/images/icons/form-elements.svg);
}
.icon.email, .tooltip.email {
  --icon-url: url(/images/icons/email.svg);
}
.icon.end-call, .tooltip.end-call {
  --icon-url: url(/images/icons/end-call.svg);
}
.icon.error.fill, .tooltip.error.fill {
  --icon-url: url(/images/icons/error-fill.svg);
}
.icon.expand, .tooltip.expand {
  --icon-url: url(/images/icons/expand.svg);
}
.icon.eye, .tooltip.eye {
  --icon-url: url(/images/icons/eye.svg);
}
.icon.eye-off, .tooltip.eye-off {
  --icon-url: url(/images/icons/eye-off.svg);
}
.icon.file, .tooltip.file {
  --icon-url: url(/images/icons/file.svg);
}
.icon.filters, .tooltip.filters {
  --icon-url: url(/images/icons/filters.svg);
}
.icon.flip-camera, .tooltip.flip-camera {
  --icon-url: url(/images/icons/flip-camera.svg);
}
.icon.font, .tooltip.font {
  --icon-url: url(/images/icons/font.svg);
}
.icon.font-decrease, .tooltip.font-decrease {
  --icon-url: url(/images/icons/font-decrease.svg);
}
.icon.font-increase, .tooltip.font-increase {
  --icon-url: url(/images/icons/font-increase.svg);
}
.icon.gallery, .tooltip.gallery {
  --icon-url: url(/images/icons/gallery.svg);
}
.icon.globals, .tooltip.globals {
  --icon-url: url(/images/icons/globals.svg);
}
.icon.grid, .tooltip.grid {
  --icon-url: url(/images/icons/grid.svg);
}
.icon.hamburger, .tooltip.hamburger {
  --icon-url: url(/images/icons/hamburger.svg);
}
.icon.header-large, .tooltip.header-large {
  --icon-url: url(/images/icons/large-header.svg);
}
.icon.header-medium, .tooltip.header-medium {
  --icon-url: url(/images/icons/medium-header.svg);
}
.icon.header-small, .tooltip.header-small {
  --icon-url: url(/images/icons/small-header.svg);
}
.icon.help, .tooltip.help {
  --icon-url: url(/images/icons/help.svg);
}
.icon.text-highlight, .tooltip.text-highlight {
  --icon-url: url(/images/icons/highlight.svg);
}
.icon.home, .tooltip.home {
  --icon-url: url(/images/icons/home.svg);
}
.icon.italics, .tooltip.italics {
  --icon-url: url(/images/icons/italics.svg);
}
.icon.input, .tooltip.input {
  --icon-url: url(/images/icons/input.svg);
}
.icon.important, .tooltip.important {
  --icon-url: url(/images/icons/important.svg);
}
.icon.label, .tooltip.label {
  --icon-url: url(/images/icons/label.svg);
}
.icon.layout, .tooltip.layout {
  --icon-url: url(/images/icons/layout.svg);
}
.icon.link, .tooltip.link {
  --icon-url: url(/images/icons/link.svg);
}
.icon.lock, .tooltip.lock {
  --icon-url: url(/images/icons/lock.svg);
}
.icon.list, .tooltip.list {
  --icon-url: url(/images/icons/list.svg);
}
.icon.mark-unread, .tooltip.mark-unread {
  --icon-url: url(/images/icons/mark-unread.svg);
}
.icon.mic, .tooltip.mic {
  --icon-url: url(/images/icons/mic.svg);
}
.icon.mobile, .tooltip.mobile {
  --icon-url: url(/images/icons/phone.svg);
}
.icon.move, .tooltip.move {
  --icon-url: url(/images/icons/move.svg);
}
.icon.more, .tooltip.more {
  --icon-url: url(/images/icons/more.svg);
}
.icon.more.vertical, .tooltip.more.vertical {
  transform: rotate(90deg);
}
.icon.new-window, .tooltip.new-window {
  --icon-url: url(/images/icons/new-window.svg);
}
.icon.next, .tooltip.next {
  --icon-url: url(/images/icons/next.svg);
}
.icon.notes, .tooltip.notes {
  --icon-url: url(/images/icons/notes.svg);
}
.icon.notice, .tooltip.notice {
  --icon-url: url(/images/icons/notice.svg);
}
.icon.optional, .tooltip.optional {
  --icon-url: url(/images/icons/optional.svg);
}
.icon.other, .tooltip.other {
  --icon-url: url(/images/icons/other.svg);
}
.icon.padding, .tooltip.padding {
  --icon-url: url(/images/icons/padding.svg);
}
.icon.paint, .tooltip.paint {
  --icon-url: url(/images/icons/paint.svg);
}
.icon.pay-btns, .tooltip.pay-btns {
  --icon-url: url(/images/icons/pay-btns.svg);
}
.icon.paint, .tooltip.paint {
  --icon-url: url(/images/icons/paint.svg);
}
.icon.pencil, .tooltip.pencil {
  --icon-url: url(/images/icons/pencil.svg);
}
.icon.person, .tooltip.person {
  --icon-url: url(/images/icons/person.svg);
}
.icon.prescription, .tooltip.prescription {
  --icon-url: url(/images/icons/prescriptions.svg);
}
.icon.printer, .tooltip.printer {
  --icon-url: url(/images/icons/printer.svg);
}
.icon.printer.fill:hover, .icon.printer.filled, .tooltip.printer.fill:hover, .tooltip.printer.filled {
  --icon-url: url(/images/icons/printer-fill.svg);
}
.icon.questionnaire, .tooltip.questionnaire {
  --icon-url: url(/images/icons/questionnaire.svg);
}
.icon.radio, .tooltip.radio {
  --icon-url: url(/images/icons/radio.svg);
}
.icon.reply, .tooltip.reply {
  --icon-url: url(/images/icons/reply.svg);
}
.icon.reply.mirror, .tooltip.reply.mirror {
  transform: scaleX(-1);
}
.icon.refresh, .tooltip.refresh {
  --icon-url: url(/images/icons/refresh.svg);
}
.icon.remove, .tooltip.remove {
  --icon-url: url(/images/icons/remove.svg);
}
.icon.report, .tooltip.report {
  --icon-url: url(/images/icons/report.svg);
}
.icon.save, .tooltip.save {
  --icon-url: url(/images/icons/save.svg);
}
.icon.save.fill:hover, .tooltip.save.fill:hover {
  --icon-url: url(/images/icons/save-fill.svg);
}
.icon.search-filter, .tooltip.search-filter {
  --icon-url: url(/images/icons/search-filter.svg);
}
.icon.settings, .tooltip.settings {
  --icon-url: url(/images/icons/settings.svg);
}
.icon.settings.fill:hover, .tooltip.settings.fill:hover {
  --icon-url: url(/images/icons/settings-fill.svg);
}
.icon.shadows, .tooltip.shadows {
  --icon-url: url(/images/icons/shadows.svg);
}
.icon.signal, .tooltip.signal {
  --icon-url: url(/images/icons/signal.svg);
}
.icon.search, .tooltip.search {
  --icon-url: url(/images/icons/search.svg);
}
.icon.search-thick, .tooltip.search-thick {
  --icon-url: url(/images/icons/search-thick.svg);
}
.icon.squish, .tooltip.squish {
  --icon-url: url(/images/icons/squish.svg);
}
.icon.store-alt, .tooltip.store-alt {
  --icon-url: url(/images/icons/store-alt.svg);
}
.icon.star, .tooltip.star {
  --icon-url: url(/images/icons/star.svg);
}
.icon.unfold, .tooltip.unfold {
  --icon-url: url(/images/icons/unfold.svg);
}
.icon.tablet, .tooltip.tablet {
  --icon-url: url(/images/icons/tablet.svg);
}
.icon.text, .tooltip.text {
  --icon-url: url(/images/icons/text.svg);
}
.icon.timer, .tooltip.timer {
  --icon-url: url(/images/icons/timer.svg);
}
.icon.timer-thick, .tooltip.timer-thick {
  --icon-url: url(/images/icons/timer-thick.svg);
}
.icon.title, .tooltip.title {
  --icon-url: url(/images/icons/title.svg);
}
.icon.underline, .tooltip.underline {
  --icon-url: url(/images/icons/underline.svg);
}
.icon.upload, .tooltip.upload {
  --icon-url: url(/images/icons/upload.svg);
  --width: 60px;
  --height: 60px;
}
.icon.wifi, .tooltip.wifi {
  --icon-url: url(/images/icons/wifi.svg);
}
.icon.vertical-top, .tooltip.vertical-top {
  --icon-url: url(/images/icons/vertical-top.svg);
}
.icon.vertical-center, .tooltip.vertical-center {
  --icon-url: url(/images/icons/vertical-center.svg);
}
.icon.vertical-bottom, .tooltip.vertical-bottom {
  --icon-url: url(/images/icons/vertical-bottom.svg);
}
.icon.videocall, .tooltip.videocall {
  --icon-url: url(/images/icons/videocall.svg);
}
.icon::after, .tooltip::after {
  content: "";
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--icon-color);
  width: var(--width);
  height: var(--height);
  display: block;
}

[data-tooltip] {
  --tooltip-top: 20px;
  --tooltip-width: 100px;
  --tooltip-left: 0px;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  width: var(--tooltip-width);
  font-size: 0.7rem;
  background: var(--color-slate-700);
  color: #fff;
  font: 400 0.7rem/16px "Lato";
  left: calc(50% + var(--tooltip-left));
  transform: translate(-50%, 10px) scale(0.9);
  padding: 5px 10px;
  top: var(--tooltip-top);
  z-index: 9;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.25s ease, scale 0.15s cubic-bezier(0.53, 0.14, 1, 0.25);
  box-shadow: 0px 0px 0px 1px var(--color-slate), 0px 3px 6px 1px rgba(0, 0, 0, 0.2705882353), 0px 0px 3px 1px rgba(0, 0, 0, 0.2392156863);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-transform: none;
  width: -moz-fit-content;
  width: fit-content;
  text-wrap: nowrap;
}
[data-tooltip]:hover::before {
  transform: translate(-50%, 0px) scale(1);
  opacity: 1;
  scale: 1;
}

.tooltip {
  --icon-url: url(/images/icons/info.svg);
  --tooltip-width: 150px;
  --width: 12px;
  --height: 12px;
  --icon-color: #fff;
  background: var(--logo-color);
  border-radius: 4px;
  height: 12px;
  width: 12px;
  position: relative;
}
.tooltip:hover {
  background: var(--color-slate-700);
}
.tooltip.wider::before {
  text-wrap: auto;
  width: 200px;
}

.justify-content-around {
  justify-content: space-around;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-end {
  justify-content: end;
}

.justify-content-space-evenly {
  justify-content: space-evenly;
}

.list-no-style li {
  list-style: none;
}

.loading, .pointer-events-none {
  pointer-events: none;
}

.loading-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: all;
}

.logo {
  width: 88.4px;
  height: 33.8px;
  display: block;
}
.logo.login-logo {
  width: 70.72px;
  height: 27.04px;
}
.logo.pointer svg:hover {
  opacity: 0.6;
}
.logo.white svg {
  color: #fff;
}
.logo.slate svg {
  color: var(--color-slate);
}
.logo.logo-color svg {
  color: var(--logo-color);
}

.min-loading {
  min-height: 100px;
}

.min-fullscreen {
  min-height: 100vh;
}

.m-5 {
  margin: 5px;
}

.m-auto {
  margin: auto;
}

.ml-auto {
  margin-left: auto;
}

.ml-2 {
  margin-left: 2px;
}

.ml-5 {
  margin-left: 5px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-15 {
  margin-left: 15px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-30 {
  margin-left: 30px;
}

.ml-40 {
  margin-left: 40px;
}

.mx-5 {
  margin-left: 5px;
  margin-right: 5px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mt-auto {
  margin-top: auto;
}

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

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

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

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

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

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

.mr-auto {
  margin-right: auto;
}

.mr-5 {
  margin-right: 5px;
}

.mr-10 {
  margin-right: 10px;
}

.mr-15 {
  margin-right: 15px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-30 {
  margin-right: 30px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.my-5 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.no-white-space {
  white-space: nowrap;
}

.no-transitions * {
  transition: all 0s !important;
}

.squish {
  min-height: 0px;
  height: 0px;
}

.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.text-editor {
  height: 100%;
  outline: 0px !important;
}

.cursor-grab {
  cursor: grab;
}

.pointer {
  cursor: pointer;
}

.pointer-none {
  pointer-events: none;
}

.p-absolute {
  position: absolute;
}

.p-relative {
  position: relative;
}

.p-0 {
  padding: 0;
}

.p-3 {
  padding: 3px;
}

.p-5 {
  padding: 5px;
}

.p-10 {
  padding: 10px;
}

.p-15 {
  padding: 15px;
}

.p-20 {
  padding: 20px;
}

.p-30 {
  padding: 30px;
}

.pl-5 {
  padding-left: 5px;
}

.pl-10 {
  padding-left: 10px;
}

.pl-15 {
  padding-left: 15px;
}

.pl-20 {
  padding-left: 20px;
}

.pt-5 {
  padding-top: 5px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.pl-30 {
  padding-left: 30px;
}

.pr-30 {
  padding-right: 30px;
}

.pt-30 {
  padding-top: 30px;
}

.pb-5 {
  padding-bottom: 5px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pr-5 {
  padding-right: 5px;
}

.pr-10 {
  padding-right: 10px;
}

.pr-15 {
  padding-right: 15px;
}

.pr-20 {
  padding-right: 20px;
}

.pr-25 {
  padding-right: 25px;
}

.py-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.py-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.py-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.px-5 {
  padding-left: 5px;
  padding-right: 5px;
}

.px-10 {
  padding-left: 10px;
  padding-right: 10px;
}

.px-15 {
  padding-left: 15px;
  padding-right: 15px;
}

.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}

.user-select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.reverse {
  flex-direction: row-reverse;
}

.text-first-capitalize:first-letter {
  text-transform: capitalize;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-start {
  text-align: start;
}

.text-center {
  text-align: center;
}

.text-end {
  text-align: end;
}

.transition-opacity {
  transition: opacity 0.15s ease-in;
}

.triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--color-gray-400);
}
.triangle::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #fff;
  position: absolute;
  left: -6.7px;
  top: 1.5px;
}

.methods-container:has(.payment-method) {
  overflow: auto;
  padding: 5px;
  max-width: 600px;
  margin-left: -5px;
}

.payment-method {
  padding: 5px 15px 5px 5px;
}
.payment-method.active {
  box-shadow: 0px 0px 0px 1px var(--logo-color), 0px 0px 0px 2px var(--logo-color-step-5) !important;
}
.payment-method.active [data-target] {
  display: none;
  pointer-events: none;
}

.no-exp {
  width: 88.9px;
}

.type-container {
  width: 50px;
  height: 30px;
}

ul {
  margin: 0;
}

.yes-no-container {
  width: 200px;
}

.width-container-220 {
  max-width: 220px;
}

.width-container-325 {
  max-width: 325px;
}

.width-container-350 {
  max-width: 350px;
}

.width-container-525 {
  max-width: 525px;
}

.width-container-700 {
  max-width: 700px;
}

.width-container-1000 {
  max-width: 1000px;
}

.width-container-1200 {
  max-width: 1200px;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

.w-75 {
  width: 75%;
}

.w-100 {
  width: 100%;
}

.word-wrap {
  word-wrap: break-word;
}

.z-2 {
  z-index: 2;
}

.z-100 {
  z-index: 100;
}

.z-200 {
  z-index: 200;
}
@keyframes fade-out-down {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}
@keyframes fade-out-down-more {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(30px);
    opacity: 0;
  }
}
body {
  --page-transition-start-opacity: 0;
  --page-transition-start-transform: translateX(calc(-50% + 40px));
  --page-transition-active: translateX(-50%);
  --page-transition-visited-transform: translateX(calc(-50% - 40px));
  --page-transition-left: 50%;
  --page-max-width: 550px;
  --main-font: Inter, sans-serif;
  --primary-color: rgb(85, 85, 221);
  --primary-color-opacity-75: rgb(85, 85, 221, 75%);
  --primary-color-opacity-50: rgb(85, 85, 221, 50%);
  --primary-color-opacity-25: rgb(85, 85, 221, 25%);
  --online-link-color: rgb(85, 85, 221);
  --error-text-color: rgb(210, 42, 70);
  --error-text-weight: 600;
  --error-text-font-size: 0.875rem;
  --error-text-font: var(--main-font);
  --timer-box-shadow: 0px 0px 0px 0px rgb(0, 0, 0);
  --timer-background-color: rgb(241, 245, 249);
  --timer-border-radius: 4px;
  --timer-color: rgb(33, 37, 41);
  --timer-font: var(--main-font);
  --timer-font-size: 16px;
  --timer-padding: 7px 16px 7px 16px;
  --timer-letter-spacing: 0px;
  --timer-weight: 400;
  --timer-box-shadow-overran: 0px 0px 0px 0px rgb(0, 0, 0);
  --timer-background-color-overran: rgb(250, 229, 233);
  --timer-color-overran: rgb(176, 35, 58);
  --timer-time-color: rgb(33, 37, 41);
  --timer-time-weight: 600;
  --timer-weight-overran: 500;
  --optional-background-color: rgb(241, 245, 249);
  --optional-border-radius: 4px;
  --optional-box-shadow: 0px 0px 0px 1px rgb(226, 232, 240);
  --optional-color: rgb(15, 23, 42);
  --optional-weight: 600;
  --optional-font: var(--main-font);
  --optional-font-size: 12px;
  --optional-letter-spacing: 0px;
  --optional-margin: 0px 0px 0px 5px;
  --optional-padding: 2px 4px;
  --large-header-color: #212529;
  --large-header-font-weight: 600;
  --large-header-font: var(--main-font);
  --large-header-font-size: 27px;
  --large-header-spacing: 0px;
  --large-header-decoration: none;
  --large-header-margin: 0px 0px 0px 0px;
  --medium-header-color: #212529;
  --medium-header-font-weight: 600;
  --medium-header-font: var(--main-font);
  --medium-header-font-size: 22px;
  --medium-header-spacing: 0px;
  --medium-header-decoration: none;
  --medium-header-margin: 0px 0px 0px 0px;
  --small-header-color: #212529;
  --small-header-font-weight: 600;
  --small-header-font: var(--main-font);
  --small-header-font-size: 19px;
  --small-header-spacing: 0px;
  --small-header-decoration: none;
  --small-header-margin: 0px 0px 0px 0px;
  --text-color: #212529;
  --text-font-weight: 500;
  --text-element-font: var(--main-font);
  --text-font-size: 14px;
  --text-spacing: 0px;
  --text-decoration: none;
  --text-margin: 10px 0px 10px 0px;
  --input-title-color: #212529;
  --input-title-font-weight: 300;
  --input-title-font: var(--main-font);
  --input-title-font-size: 17px;
  --input-title-spacing: 0px;
  --input-title-decoration: none;
  --input-title-margin: 0px 0px 5px 0px;
  --input-title-align: left;
  --input-label-color: #212529;
  --input-label-font-weight: 600;
  --input-label-font: var(--main-font);
  --input-label-font-size: 14px;
  --input-label-spacing: 0px;
  --input-label-decoration: none;
  --input-label-margin: 0px 0px 5px 0px;
  --input-label-align: left;
  --input-background-color: rgb(255, 255, 255);
  --input-background-color-hover: rgb(255, 255, 255);
  --input-background-color-focus: rgb(255, 255, 255);
  --input-weight: 500;
  --input-font-size: 14px;
  --input-font: var(--main-font);
  --input-color: #212529;
  --input-color-hover: #212529;
  --input-color-focus: #212529;
  --input-border-radius: 4px;
  --input-border: 0px 1px 1px 0px rgb(203, 213, 225),
    0px 0px 0px 1px rgb(226, 232, 240), 0px 2px 5px 0px rgb(241, 245, 249);
  --input-border-focus: 0px 1px 1px 0px rgb(100, 116, 139),
    0px 0px 0px 1px rgb(148, 163, 184), 0px 2px 5px 0px rgb(226, 232, 240);
  --input-border-hover: 0px 1px 1px 0px rgb(100, 116, 139),
    0px 0px 0px 1px rgb(148, 163, 184), 0px 2px 5px 0px rgb(226, 232, 240);
  --input-padding: 9px 9px 9px 9px;
  --input-width: 270px;
  --input-margin: 0px 0px 10px 0px;
  --input-transition: box-shadow 0.15s ease-in-out, color 0.15s ease-in-out,
    background-color 0.15s ease-in-out;
  --input-text-align: left;
  --input-color-placeholder: rgb(203, 213, 225);
  --input-color-placeholder-hover: rgb(203, 213, 225);
  --input-color-placeholder-focus: rgb(203, 213, 225);
  --input-spacing: 0px;
  --radio-background: rgb(255, 255, 255);
  --radio-background-hover: rgb(255, 255, 255);
  --radio-background-checked: rgb(255, 255, 255);
  --radio-border: 0px 0px 0px 1px rgb(203, 213, 225);
  --radio-border-hover: 0px 0px 0px 1px rgb(33, 37, 41);
  --radio-border-checked: 0px 0px 0px 1px rgb(33, 37, 41),
    0px 0px 0px 3px var(--primary-color);
  --radio-border-radius: 4px;
  --radio-color: #212529;
  --radio-color-hover: #212529;
  --radio-color-checked: #212529;
  --radio-check-radio-size: 12px;
  --radio-check-radio-color: var(--primary-color);
  --radio-check-radio-color-hover: rgba(0, 0, 0, 0.25);
  --radio-font: var(--main-font);
  --radio-font-size: 14px;
  --radio-margin: 0px 0px 10px 0px;
  --radio-min-width: 100px;
  --radio-radio-background: rgb(255, 255, 255);
  --radio-radio-background-checked: rgb(255, 255, 255);
  --radio-radio-background-hover: rgb(255, 255, 255);
  --radio-radio-border: 0px 0px 0px 2px var(--primary-color);
  --radio-radio-border-checked: 0px 0px 0px 2px var(--primary-color);
  --radio-radio-border-hover: 0px 0px 0px 2px var(--primary-color);
  --radio-radio-border-radius: 30px;
  --radio-radio-display: none;
  --radio-radio-size: 16px;
  --radio-padding: 15px;
  --radio-text-align: center;
  --radio-weight: 400;
  --radio-border-error: 0px 0px 0px 1px rgb(141, 28, 47);
  --radio-color-error: rgb(255, 255, 255);
  --radio-background-error: rgb(176, 35, 58);
  --checkbox-background: rgb(255, 255, 255);
  --checkbox-background-hover: rgb(255, 255, 255);
  --checkbox-background-checked: rgb(255, 255, 255);
  --checkbox-border: 0px 0px 0px 1px rgb(203, 213, 225);
  --checkbox-border-hover: 0px 0px 0px 1px rgb(2, 3, 54);
  --checkbox-border-checked: 0px 0px 0px 1px rgb(2, 3, 54),
    0px 0px 0px 3px rgb(2, 3, 54);
  --checkbox-border-radius: 4px;
  --checkbox-checkbox-display: inline;
  --checkbox-checkbox-size: 20px;
  --checkbox-checkbox-border: 0px 0px 0px 1px rgb(203, 213, 225);
  --checkbox-checkbox-border-hover: 0px 0px 0px 1px rgb(203, 213, 225);
  --checkbox-checkbox-border-checked: 0px 0px 0px 1px rgb(203, 213, 225);
  --checkbox-checkbox-background: rgb(255, 255, 255);
  --checkbox-checkbox-background-hover: rgb(255, 255, 255);
  --checkbox-checkbox-background-checked: rgb(255, 255, 255);
  --checkbox-checkbox-border-radius: 4px;
  --checkbox-checkbox-shape: polygon(28% 38%,
      41% 53%,
      75% 24%,
      86% 38%,
      40% 78%,
      15% 50%);
  --checkbox-checkbox-symbol-color: rgb(33, 37, 41);
  --checkbox-checkbox-symbol-color-hover: rgba(0, 0, 0, 0.25);
  --checkbox-check-size: 100%;
  --checkbox-color: rgb(33, 37, 41);
  --checkbox-color-hover: rgb(33, 37, 41);
  --checkbox-color-checked: rgb(33, 37, 41);
  --checkbox-font: var(--main-font);
  --checkbox-font-size: 14px;
  --checkbox-weight: 400;
  --checkbox-margin: 0px 0px 10px 0px;
  --checkbox-min-width: 0px;
  --checkbox-padding: 15px 15px 15px 15px;
  --checkbox-text-align: left;
  --checkbox-check-margin-offset: calc((var(--checkbox-custom-size) / 2) * -1);
  --checkbox-left: calc(var(--checkbox-custom-size) / 2);
  --checkbox-background-error: rgb(255, 255, 255);
  --checkbox-border-error: 0px 0px 0px 3px rgb(141, 28, 47);
  --checkbox-custom-symbol-bg-checked-error: rgb(255, 255, 255);
  --checkbox-custom-symbol-color-error: rgb(141, 28, 47);
  --checkbox-color-error: rgb(141, 28, 47);
  --back-btn-text-align: left;
  --back-btn-border: 0px 0px 0px 1px rgb(60, 60, 215),
    0px 0px 0px 1px rgb(226, 232, 240), 0px 2px 5px 0px rgb(241, 245, 249);
  --back-btn-border-hover: 0px 0px 0px 1px rgb(60, 60, 215),
    0px 0px 0px 1px rgb(226, 232, 240), 0px 2px 5px 0px rgb(241, 245, 249);
  --back-btn-background-color: var(--primary-color);
  --back-btn-background-color-hover: var(--primary-color);
  --back-btn-color: #fff;
  --back-btn-color-hover: #fff;
  --back-btn-font: var(--main-font);
  --back-btn-font-size: 14px;
  --back-btn-margin: 0px 0px 30px 0px;
  --back-btn-padding: 6px 11px 6px 6px;
  --back-btn-position: left;
  --back-btn-weight: 500;
  --back-btn-border-radius: 4px;
  --back-btn-icon-display: inline;
  --back-btn-icon-size: 16px;
  --back-btn-icon-spacing: 10px;
  --back-btn-spacing: 0px;
  --back-btn-width: fit-content;
  --next-btn-text-align: left;
  --next-btn-border: 0px 0px 0px 1px rgb(60, 60, 215),
    0px 0px 0px 1px rgb(226, 232, 240), 0px 2px 5px 0px rgb(241, 245, 249);
  --next-btn-border-hover: 0px 0px 0px 1px rgb(60, 60, 215),
    0px 0px 0px 1px rgb(226, 232, 240), 0px 2px 5px 0px rgb(241, 245, 249);
  --next-btn-background-color: var(--primary-color);
  --next-btn-background-color-hover: var(--primary-color);
  --next-btn-color: #fff;
  --next-btn-color-hover: #fff;
  --next-btn-font: var(--main-font);
  --next-btn-font-size: 14px;
  --next-btn-margin: 0px 0px 0px 0px;
  --next-btn-padding: 6px 11px 6px 11px;
  --next-btn-position: right;
  --next-btn-weight: 500;
  --next-btn-border-radius: 4px;
  --next-btn-icon-display: inline;
  --next-btn-icon-size: 16px;
  --next-btn-icon-spacing: 5px;
  --next-btn-spacing: 0px;
  --next-btn-width: fit-content;
  --logo-position: center;
  --nav-bar-padding: 20px 10px 20px 10px;
  --nav-bar-background-color: #fff;
  --nav-bar-border-bottom-size: 1px;
  --nav-bar-border-bottom-style: solid;
  --nav-bar-border-bottom-color: #cbd5e1;
  --logo-size: 16px;
  --business-container-background-color: #fff;
  --business-container-padding: 20px 20px 20px 20px;
  --index-header-font-size: 29px;
  --index-header-font: var(--main-font);
  --index-header-weight: 600;
  --index-header-color: #212529;
  --index-header-text-align: left;
  --index-header-margin: 0px 0px 0px 0px;
  --subheader-font-size: 17px;
  --subheader-font: var(--main-font);
  --subheader-weight: 400;
  --subheader-color: #212529;
  --subheader-margin: 0px 0px 10px 0px;
  --subheader-text-align: left;
  --back-to-subcategory-btn-background-color: rgb(255, 255, 255, 0);
  --back-to-subcategory-btn-background-color-hover: rgb(255, 255, 255, 0);
  --back-to-subcategory-btn-box-shadow: 0px 0px 0px 0px rgb(255, 255, 255, 0);
  --back-to-subcategory-btn-box-shadow-hover: 0px 0px 0px 0px rgb(255, 255, 255, 0);
  --back-to-subcategory-btn-border-radius: 4px;
  --back-to-subcategory-btn-color: rgb(85, 85, 221);
  --back-to-subcategory-btn-color-hover: rgb(85, 85, 221);
  --back-to-subcategory-btn-font-size: 14px;
  --back-to-subcategory-btn-font: var(--main-font);
  --back-to-subcategory-btn-padding: 0px 0px 0px 0px;
  --back-to-subcategory-btn-margin: 0px 0px 0px 0px;
  --back-to-subcategory-btn-weight: 600;
  --inner-services-wrapper-border-radius: 4px;
  --inner-services-wrapper-box-shadow: 0px 0px 0px 0px rgb(255, 255, 255);
  --inner-services-wrapper-background-color: rgb(241, 245, 249);
  --big-subcategory-button-background-color: rgb(255, 255, 255);
  --big-subcategory-button-background-color-hover: rgb(255, 255, 255);
  --big-subcategory-button-box-shadow: 0px 0px 0px 1px rgba(148, 163, 184, 0.53),
    0px 1px 1px 2px rgba(0, 0, 0, 0.07);
  --big-subcategory-button-box-shadow-hover: 0px 0px 0px 1px rgb(148, 163, 184),
    0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  --big-subcategory-button-margin: 0px 0px 15px 0px;
  --big-subcategory-button-padding: 15px 15px 15px 15px;
  --big-subcategory-button-border-radius: 4px;
  --subcategory-header-color: #212529;
  --subcategory-header-color-hover: #212529;
  --subcategory-header-font-size: 16px;
  --subcategory-header-weight: 600;
  --subcategory-header-font: var(--main-font);
  --subcategory-header-text-transform: capitalize;
  --subcategory-service-count-color: #212529;
  --subcategory-service-count-color-hover: #212529;
  --subcategory-service-count-font-size: 16px;
  --subcategory-service-count-weight: 600;
  --subcategory-service-count-font: var(--main-font);
  --subcategory-chevron-display: none;
  --subcategory-chevron-chevron-size: 16px;
  --subcategory-chevron-chevron-color: #212529;
  --service-wrapper-background-color: #fff;
  --service-wrapper-box-shadow: 0px 0px 0px 1px rgb(148, 163, 184);
  --service-wrapper-border-radius: 4px;
  --service-wrapper-divider-size: 1px;
  --service-wrapper-divider-style: solid;
  --service-wrapper-divider-color: #c8ccd3;
  --service-wrapper-padding: 0px 0px 10px 0px;
  --service-name-color: #212529;
  --service-name-weight: 600;
  --service-name-font: var(--main-font);
  --service-name-font-size: 15px;
  --service-name-spacing: normal;
  --service-name-text-transform: capitalize;
  --service-cost-icon-display: inline;
  --service-cost-background-color: #f1f2f4;
  --service-cost-color: #14161b;
  --service-cost-border-radius: 30px;
  --service-cost-box-shadow: 0px 0px 0px 1px rgb(241, 242, 244);
  --service-cost-font-size: 13px;
  --service-cost-font: var(--main-font);
  --service-cost-padding: 5px;
  --service-cost-weight: 600;
  --service-duration-icon-display: inline;
  --service-duration-background-color: #f1f2f4;
  --service-duration-color: #14161b;
  --service-duration-border-radius: 30px;
  --service-duration-box-shadow: 0px 0px 0px 1px rgb(241, 242, 244);
  --service-duration-font-size: 13px;
  --service-duration-font: var(--main-font);
  --service-duration-padding: 5px;
  --service-duration-weight: 600;
  --service-description-padding: 3px 55px 0px 10px;
  --service-description-border-radius: 0px;
  --service-description-color: #212529;
  --service-description-font: var(--main-font);
  --service-description-font-size: 14px;
  --service-description-spacing: normal;
  --service-description-box-shadow: 0px 0px 0px 0px rgb(255, 255, 255);
  --service-description-line-height: 1.2;
  --service-description-weight: 500;
  --location-amount-icon-display: inline;
  --location-amount-background-color: #fff;
  --location-amount-border-radius: 30px;
  --location-amount-box-shadow: 0px 0px 0px 1px var(--primary-color);
  --location-amount-color: var(--primary-color);
  --location-amount-font-size: 13px;
  --location-amount-font: var(--main-font);
  --location-amount-padding: 5px;
  --location-amount-weight: 600;
  --business-icon-display: inline;
  --business-background-color: rgb(51, 65, 85);
  --business-border-radius: 30px;
  --business-color: #fff;
  --business-font-size: 13px;
  --business-font: var(--main-font);
  --business-padding: 5px;
  --business-weight: 600;
  --business-box-shadow: 0px 0px 0px 1px rgb(30, 41, 59);
  --customers-icon-display: inline;
  --customers-background-color: rgb(51, 65, 85);
  --customers-border-radius: 30px;
  --customers-color: #fff;
  --customers-font-size: 13px;
  --customers-font: var(--main-font);
  --customers-padding: 5px;
  --customers-weight: 600;
  --customers-box-shadow: 0px 0px 0px 1px rgb(30, 41, 59);
  --online-display: inline;
  --online-background-color: rgb(51, 65, 85);
  --online-border-radius: 5px;
  --online-color: #fff;
  --online-font-size: 13px;
  --online-font: var(--main-font);
  --online-padding: 3px 5px;
  --online-weight: 600;
  --online-box-shadow: 0px 0px 0px 1px rgb(30, 41, 59);
  --expand-btn-background-color: rgb(255, 255, 255, 0);
  --expand-btn-background-color-hover: rgb(255, 255, 255, 0);
  --expand-btn-border-radius: 4px;
  --expand-btn-color: var(--primary-color);
  --expand-btn-color-hover: var(--primary-color);
  --expand-btn-font-size: 14px;
  --expand-btn-font: var(--main-font);
  --expand-btn-padding: 0px 10px 10px 10px;
  --expand-btn-margin: 0px 10px 10px 0px;
  --expand-btn-weight: 600;
  --expand-btn-box-shadow: 0px 0px 0px 0px rgb(255, 255, 255, 0);
  --expand-btn-box-shadow-hover: 0px 0px 0px 0px rgb(255, 255, 255, 0);
  --service-chosen-background-color: #e2e8f0;
  --service-chosen-box-shadow: 0px 0px 0px 0px rgb(100, 116, 139);
  --service-chosen-padding: 5px;
  --service-chosen-border-radius: 4px;
  --change-btn-weight: 600;
  --change-btn-font-size: 14px;
  --change-btn-font: var(--main-font);
  --change-btn-background-color: rgba(255, 255, 255, 0);
  --change-btn-color: var(--primary-color);
  --change-btn-border-radius: 4px;
  --change-btn-box-shadow: 0px 0px 0px 0px rgb(255, 255, 255);
  --change-btn-background-color-hover: rgba(255, 255, 255, 0);
  --change-btn-color-hover: var(--primary-color);
  --change-btn-box-shadow-hover: 0px 0px 0px 0px rgb(255, 255, 255);
  --change-btn-padding: 0px 0px 0px 0px;
  --locate-store-color: #212529;
  --locate-store-weight: 600;
  --locate-store-font: var(--main-font);
  --locate-store-font-size: 15px;
  --locate-store-spacing: 0px;
  --locate-input-background-color: #fff;
  --locate-input-color: #212529;
  --locate-input-placeholder-color: rgb(203, 213, 225);
  --locate-input-border-radius: 4px;
  --locate-input-box-shadow: 0px 0px 0px 1px rgb(203, 213, 225);
  --locate-input-weight: 500;
  --locate-input-font: var(--main-font);
  --locate-input-font-size: 14px;
  --locate-input-spacing: 0px;
  --locate-input-padding: 10px;
  --locate-input-focus-box-shadow: 0px 0px 0px 1px rgb(30, 41, 59);
  --locate-btn-background-color: var(--primary-color);
  --locate-btn-color: #fff;
  --locate-btn-border-radius: 4px;
  --locate-btn-box-shadow: 0px 0px 0px 1px rgb(60, 60, 215);
  --location-wrapper-background-color: #fff;
  --location-wrapper-border-radius: 4px;
  --location-wrapper-box-shadow: 0px 0px 0px 1px rgb(203, 213, 225);
  --location-wrapper-margin: 0px 0px 10px 0px;
  --location-wrapper-padding: 15px 15px 15px 15px;
  --location-distance-color: #14161a;
  --location-distance-weight: 500;
  --location-distance-font: var(--main-font);
  --location-distance-font-size: 14px;
  --location-distance-spacing: 0px;
  --location-distance-margin: 0px 0px 0px 0px;
  --location-display-background-color: #fff;
  --location-display-border-left-size: 1px;
  --location-display-border-left-style: solid;
  --location-display-border-left-color: rgb(148, 163, 184);
  --location-img-container-border-radius: 12px;
  --location-display-name-color: #212529;
  --location-display-name-weight: 600;
  --location-display-name-font: var(--main-font);
  --location-display-name-font-size: 15px;
  --location-display-name-spacing: 0px;
  --location-display-address-color: #565d6b;
  --location-display-address-weight: 500;
  --location-display-address-font: var(--main-font);
  --location-display-address-font-size: 14px;
  --location-display-address-spacing: 0px;
  --location-number-color: #565d6b;
  --location-number-weight: 500;
  --location-number-font: var(--main-font);
  --location-number-font-size: 14px;
  --location-number-spacing: 0px;
  --location-email-color: #565d6b;
  --location-email-weight: 500;
  --location-email-font: var(--main-font);
  --location-email-font-size: 14px;
  --location-email-spacing: 0px;
  --location-number-container-margin: 15px 0px 15px 0px;
  --location-call-btn-background-color: rgb(255, 255, 255, 0);
  --location-call-btn-box-shadow: 0px 0px 0px 1px rgb(203, 213, 225);
  --location-call-btn-color: #565d6b;
  --location-call-border-radius: 4px;
  --location-call-btn-weight: 500;
  --location-call-btn-font: var(--main-font);
  --location-call-btn-font-size: 14px;
  --location-call-btn-spacing: 0px;
  --location-call-btn-padding: 5px 10px 5px 10px;
  --location-email-btn-background-color: rgb(255, 255, 255, 0);
  --location-email-btn-box-shadow: 0px 0px 0px 1px rgb(203, 213, 225);
  --location-email-btn-color: #565d6b;
  --location-email-border-radius: 4px;
  --location-email-btn-weight: 500;
  --location-email-btn-font: var(--main-font);
  --location-email-btn-font-size: 14px;
  --location-email-btn-spacing: 0px;
  --location-email-btn-padding: 5px 10px 5px 10px;
  --location-times-container-margin: 15px 0px 10px 0px;
  --location-times-container-divider-size: 1px;
  --location-times-container-divider-style: solid;
  --location-times-container-divider-color: rgb(203, 213, 225);
  --location-times-container-padding: 6px 0px 6px 0px;
  --location-display-day-color: #212529;
  --location-display-day-weight: 600;
  --location-display-day-font: var(--main-font);
  --location-display-day-font-size: 15px;
  --location-display-day-spacing: 0px;
  --location-display-times-color: #565d6b;
  --location-display-times-weight: 500;
  --location-display-times-font: var(--main-font);
  --location-display-times-font-size: 14px;
  --location-display-times-spacing: 0px;
  --location-service-list-item-background-color: #f1f2f4;
  --location-service-list-item-color: #565d6b;
  --location-service-list-item-weight: 500;
  --location-service-list-item-font: var(--main-font);
  --location-service-list-item-font-size: 14px;
  --location-service-list-item-spacing: 0px;
  --location-service-list-item-border-radius: 4px;
  --location-services-header-color: #212529;
  --location-services-header-weight: 600;
  --location-services-header-font: var(--main-font);
  --location-services-header-font-size: 15px;
  --location-services-header-spacing: 0px;
  --location-summary-container-background-color: #e2e8f0;
  --location-summary-container-border-radius: 4px;
  --location-summary-container-box-shadow: 0px 0px 0px 0px rgb(100, 116, 139);
  --location-summary-container-margin: 5px 0px 0px 0px;
  --location-summary-container-padding: 5px 5px 5px 5px;
  --location-summary-wrapper-background-color: #fff;
  --location-summary-wrapper-border-radius: 4px;
  --location-summary-wrapper-box-shadow: 0px 0px 0px 0px rgb(100, 116, 139);
  --location-summary-wrapper-padding: 10px 10px 10px 10px;
  --change-location-btn-weight: 600;
  --change-location-btn-font-size: 14px;
  --change-location-btn-font: var(--main-font);
  --change-location-btn-background-color: rgb(255, 255, 255, 0);
  --change-location-btn-color: var(--primary-color);
  --change-location-btn-border-radius: 4px;
  --change-location-btn-box-shadow: 0px 0px 0px 0px rgb(100, 116, 139);
  --change-location-btn-background-color-hover: rgb(255, 255, 255, 0);
  --change-location-btn-color-hover: var(--primary-color);
  --change-location-btn-box-shadow-hover: 0px 0px 0px 0px rgb(100, 116, 139);
  --change-location-btn-padding: 0px 0px 0px 0px;
  --location-summary-address-color: #565d6b;
  --location-summary-address-weight: 500;
  --location-summary-address-font: var(--main-font);
  --location-summary-address-font-size: 14px;
  --location-summary-address-spacing: 0px;
  --location-summary-name-color: #212529;
  --location-summary-name-weight: 600;
  --location-summary-name-font-size: 15px;
  --location-summary-name-font: var(--main-font);
  --location-summary-name-spacing: 0px;
  --calendar-date-selector-background-color: #fff;
  --calendar-date-selector-background-color-active: #fff;
  --calendar-date-selector-border-radius: 4px;
  --calendar-date-selector-color: #212529;
  --calendar-date-selector-color-active: #212529;
  --calendar-date-selector-font: var(--main-font);
  --calendar-date-selector-weight: 600;
  --calendar-date-selector-font-size: 14px;
  --calendar-date-selector-padding: 15px 10px 15px 10px;
  --calendar-date-selector-box-shadow: 0px 0px 0px 1px rgb(148, 163, 184),
    0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  --calendar-date-selector-box-shadow-active: 0px 0px 0px 1px rgb(148, 163, 184),
    0px 0px 0px 2px rgb(226, 232, 240), 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  --calendar-border-radius: 4px;
  --calendar-box-shadow: 0px 0px 0px 1px rgb(214, 217, 222),
    0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --calendar-padding: 2px;
  --day-color: #212529;
  --day-weight: 600;
  --day-font-size: 14px;
  --day-font: var(--main-font);
  --day-background-color: #fff;
  --month-wrapper-color: #212529;
  --month-wrapper-weight: 600;
  --month-wrapper-font-size: 14px;
  --month-wrapper-font: var(--main-font);
  --month-wrapper-background-color: #fff;
  --month-wrapper-padding: 13px 15px 13px 15px;
  --chevron-background-color: rgba(255, 255, 255, 0);
  --chevron-padding: 1px 1px 1px 1px;
  --chevron-color: #212529;
  --chevron-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
  --chevron-border-radius: 4px;
  --date-weight: 500;
  --date-font-size: 13px;
  --date-font: var(--main-font);
  --date-color: #212529;
  --date-background-color: #fff;
  --date-border-radius: 25px;
  --date-background-color-hover: var(--primary-color);
  --date-color-hover: rgb(255, 255, 255);
  --calendar-background-color: #fff;
  --time-holder-background-color: #fff;
  --time-holder-background-color-hover: #fff;
  --time-holder-box-shadow: 0px 0px 0px 1px rgb(148, 163, 184),
    0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  --time-holder-box-shadow-hover: 0px 0px 0px 1px rgb(148, 163, 184),
    0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  --time-holder-border-radius: 4px;
  --time-holder-font: var(--main-font);
  --time-holder-font-size: 14px;
  --time-holder-weight: 600;
  --time-holder-color: #212529;
  --time-holder-color-hover: #212529;
  --time-holder-padding: 17px 14px 17px 14px;
  --times-background-color: #fff;
  --times-background-color-hover: #212529;
  --times-box-shadow: 0px 0px 0px 1px rgb(148, 163, 184),
    0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  --times-border-radius: 4px;
  --times-font: var(--main-font);
  --times-font-size: 14px;
  --times-weight: 600;
  --times-color: #212529;
  --times-color-hover: #fff;
  --times-padding: 10px 10px 10px 10px;
  --times-border-radius-hover: 4px;
  --times-top: 55px;
  --member-background-color: #fff;
  --member-border-radius: 4px;
  --member-box-shadow: 0px 0px 0px 1px rgb(148, 163, 184);
  --member-box-shadow-hover: 0px 0px 0px 2px rgb(71, 85, 105);
  --member-background-color-active: #fff;
  --member-box-shadow-active: 0px 0px 0px 2px var(--primary-color);
  --member-padding: 10px 10px 10px 10px;
  --staff-avatar-border-radius: 25px;
  --staff-name-font: var(--main-font);
  --staff-name-font-size: 14px;
  --staff-name-weight: 600;
  --staff-name-color: #212529;
  --staff-lead-font: var(--main-font);
  --staff-lead-font-size: 13px;
  --staff-lead-weight: 500;
  --staff-lead-color: #212529;
  --confirm-booking-btn-background-color: var(--primary-color);
  --confirm-booking-btn-weight: 600;
  --confirm-booking-btn-font-size: 14px;
  --confirm-booking-btn-font: var(--main-font);
  --confirm-booking-btn-box-shadow: 0px 0px 0px 1px rgb(60, 60, 215),
    0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --confirm-booking-btn-border-radius: 4px;
  --confirm-booking-btn-color: #fff;
  --confirm-booking-btn-padding: 10px 5px;
  --confirm-booking-btn-width: 100%;
  --confirm-booking-btn-background-color-hover: var(--primary-color);
  --confirm-booking-btn-color-hover: #fff;
  --confirm-booking-btn-box-shadow-hover: 0px 0px 0px 1px rgb(60, 60, 215),
    0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --confirm-booking-btn-align: center;
  --confirm-booking-container-background-color: rgb(241, 245, 249);
  --confirm-booking-container-box-shadow: 0px 0px 0px 1px rgb(203, 213, 225),
    0px 2px 0px 0px rgba(0, 0, 0, 0.07);
  --confirm-booking-container-border-radius: 4px;
  --confirm-booking-container-padding: 0px 15px 15px 15px;
  --change-staff-align: right;
  --change-staff-background-color: rgba(255, 255, 255, 0);
  --change-staff-color: var(--primary-color);
  --change-staff-weight: 600;
  --change-staff-font-size: 14px;
  --change-staff-font: var(--main-font);
  --change-staff-border-radius: 0px;
  --change-staff-box-shadow: 0px 0px 0px 0px rgb(255, 255, 255);
  --change-staff-margin: 0px 0px 0px 0px;
  --change-staff-padding: 0px 0px 0px 0px;
  --change-staff-color-hover: var(--primary-color);
  --change-staff-background-color-hover: rgba(255, 255, 255, 0);
  --change-staff-box-shadow-hover: 0px 0px 0px 0px rgb(255, 255, 255);
  --summary-service-color: #212529;
  --summary-service-weight: 600;
  --summary-service-font-size: 14px;
  --summary-service-font: var(--main-font);
  --summary-price-color: #212529;
  --summary-price-weight: 600;
  --summary-price-font-size: 14px;
  --summary-price-font: var(--main-font);
  --summary-date-color: #212529;
  --summary-date-weight: 500;
  --summary-date-font-size: 14px;
  --summary-date-font: var(--main-font);
  --summary-time-color: #212529;
  --summary-time-weight: 500;
  --summary-time-font-size: 14px;
  --summary-time-font: var(--main-font);
  --summary-staff-color: #212529;
  --summary-staff-weight: 500;
  --summary-staff-font-size: 14px;
  --summary-staff-font: var(--main-font);
  --summary-staff-border-top-size: 1px;
  --summary-staff-border-top-style: solid;
  --summary-staff-border-top-color: rgb(148, 163, 184);
  --summary-staff-padding: 7px 0px 7px 0px;
  --summary-staff-margin: 10px 0px 0px 0px;
  --continue-btn-align: center;
  --continue-btn-background-color: var(--primary-color);
  --continue-btn-weight: 600;
  --continue-btn-font-size: 14px;
  --continue-btn-font: var(--main-font);
  --continue-btn-border-radius: 4px;
  --continue-btn-color: #fff;
  --continue-btn-padding: 10px 5px 10px 5px;
  --continue-btn-box-shadow: 0px 0px 0px 1px rgb(60, 60, 215),
    0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --continue-btn-background-color-hover: var(--primary-color);
  --continue-btn-color-hover: #fff;
  --continue-btn-box-shadow-hover: 0px 0px 0px 1px rgb(60, 60, 215),
    0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --continue-btn-margin: 0px 0px 0px 0px;
  --confirm-page-header-font: var(--main-font);
  --confirm-page-header-weight: 700;
  --confirm-page-header-font-size: 40px;
  --confirm-page-header-color: #212529;
  --confirm-page-header-top: -30px;
  --confirm-page-padding: 0px 10px 0px 10px;
  --confirm-page-lead-color: #212529;
  --confirm-page-lead-font-size: 24px;
  --confirm-page-lead-font: var(--main-font);
  --confirm-page-lead-weight: 500;
  --confirm-booking-id-color: #212529;
  --confirm-booking-id-font-size: 16px;
  --confirm-booking-id-font: var(--main-font);
  --confirm-booking-id-weight: 500;
  --confirm-details-container-border-top-style: solid;
  --confirm-details-container-border-top-color: rgb(148, 163, 184);
  --confirm-details-container-border-top-size: 1px;
  --confirm-details-container-border-bottom-style: solid;
  --confirm-details-container-border-bottom-color: rgb(148, 163, 184);
  --confirm-details-container-border-bottom-size: 1px;
  --confirm-details-container-margin: 20px 0px 20px 0px;
  --confirm-details-container-padding: 15px 0px 15px 0px;
  --desc-value-margin: 10px 0px 10px 0px;
  --desc-width: 70px;
  --desc-color: #212529;
  --desc-font: var(--main-font);
  --desc-weight: 400;
  --desc-font-size: 15px;
  --desc-letter-spacing: -0.2px;
  --value-color: #212529;
  --value-font: var(--main-font);
  --value-weight: 400;
  --value-font-size: 15px;
  --value-letter-spacing: -0.2px;
  --confirm-page-transform: translateX(-50%);
  --confirm-page-cancel-btn-color: var(--primary-color);
  --confirm-page-cancel-btn-color-hover: #fff;
  --confirm-page-cancel-btn-box-shadow: 0px 0px 0px 1px var(--primary-color);
  --confirm-page-cancel-btn-shadow-hover: 0px 0px 0px 1px var(--primary-color);
  --confirm-page-cancel-btn-font: var(--main-font);
  --confirm-page-cancel-btn-weight: 600;
  --confirm-page-cancel-btn-font-size: 15px;
  --confirm-page-cancel-btn-padding: 15px 15px 15px 15px;
  --confirm-page-cancel-btn-background-color: rgba(255, 255, 255, 0);
  --confirm-page-cancel-btn-background-color-hover: var(--primary-color);
  --confirm-page-cancel-btn-margin: 10px 10px 0px 0px;
  --confirm-page-cancel-btn-border-radius: 4px;
  --confirm-page-reschedule-btn-color: #fff;
  --confirm-page-reschedule-btn-color-hover: #fff;
  --confirm-page-reschedule-btn-box-shadow: 0px 0px 0px 1px var(--primary-color);
  --confirm-page-reschedule-btn-shadow-hover: 0px 0px 0px 1px var(--primary-color);
  --confirm-page-reschedule-btn-font: var(--main-font);
  --confirm-page-reschedule-btn-weight: 600;
  --confirm-page-reschedule-btn-font-size: 15px;
  --confirm-page-reschedule-btn-padding: 15px 15px 15px 15px;
  --confirm-page-reschedule-btn-background-color: var(--primary-color);
  --confirm-page-reschedule-btn-background-color-hover: var(--primary-color);
  --confirm-page-reschedule-btn-margin: 10px 10px 0px 0px;
  --confirm-page-reschedule-btn-border-radius: 4px;
  --change-date-btn-font: var(--main-font);
  --change-date-btn-font-size: 14px;
  --change-date-btn-weight: 600;
  --change-date-btn-color: var(--primary-color);
  --change-date-btn-color-hover: var(--primary-color);
  --change-date-btn-background-color: rgba(255, 255, 255, 1);
  --change-date-btn-background-color-hover: rgba(255, 255, 255, 1);
  --change-date-btn-border-radius: 4px;
  --change-date-btn-padding: 5px 5px 5px 5px;
  --change-date-btn-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
  --change-date-btn-box-shadow-hover: 0px 0p 0px 0px rgba(255, 255, 255, 1);
  --deposit-btn-background-color: rgba(255, 255, 255, 1);
  --deposit-btn-color: #212529;
  --deposit-btn-margin: 10px 0px 0px 0px;
  --deposit-btn-padding: 13px;
  --deposit-btn-border-radius: 4px;
  --deposit-btn-box-shadow: 0px 0px 0px 1px rgb(203, 213, 225);
  --deposit-btn-font: var(--main-font);
  --deposit-btn-font-size: 14px;
  --deposit-btn-weight: 600;
  --deposit-btn-letter-spacing: 0px;
  --deposit-btn-background-color-hover: rgba(255, 255, 255, 1);
  --deposit-btn-color-hover: #212529;
  --deposit-btn-box-shadow-hover: 0px 0px 0px 1px rgba(139, 149, 162),
    0px 1px 5px rgba(0, 0, 0, 0.43), 0px 1px 2px 0px rgba(0, 0, 0, 0.23);
  --pay-full-btn-background-color: var(--primary-color);
  --pay-full-btn-color: #fff;
  --pay-full-btn-margin: 10px 0px 0px 0px;
  --pay-full-btn-padding: 13px;
  --pay-full-btn-border-radius: 4px;
  --pay-full-btn-box-shadow: 0px 0px 0px 1px rgb(60, 60, 215),
    0px 0px 0px 1px rgb(226, 232, 240), 0px 2px 5px 0px rgb(241, 245, 249);
  --pay-full-btn-font: var(--main-font);
  --pay-full-btn-font-size: 14px;
  --pay-full-btn-weight: 600;
  --pay-full-btn-letter-spacing: 0px;
  --pay-full-btn-background-color-hover: var(--primary-color);
  --pay-full-btn-color-hover: #fff;
  --pay-full-btn-box-shadow-hover: 0px 0px 0px 1px rgb(60, 60, 215),
    0px 0px 0px 1px rgb(226, 232, 240), 0px 2px 5px 0px rgb(241, 245, 249);
  --pay-later-btn-background-color: rgb(255, 255, 255, 0);
  --pay-later-btn-color: var(--primary-color);
  --pay-later-btn-margin: 10px 0px 0px 0px;
  --pay-later-btn-padding: 13px;
  --pay-later-btn-border-radius: 4px;
  --pay-later-btn-box-shadow: 0px 0px 0px 0px rgb(255, 255, 255);
  --pay-later-btn-font: var(--main-font);
  --pay-later-btn-font-size: 14px;
  --pay-later-btn-weight: 600;
  --pay-later-btn-letter-spacing: 0px;
  --pay-later-btn-background-color-hover: rgba(255, 255, 255, 1);
  --pay-later-btn-color-hover: var(--primary-color);
  --pay-later-btn-box-shadow-hover: 0px 0px 0px 0px rgb(255, 255, 255);
  --same-as-billing-color: rgb(0, 0, 0, 1);
  --same-as-billing-font: var(--main-font);
  --same-as-billing-font-size: 14px;
  --same-as-billing-weight: 500;
  --same-name-container-color: rgb(0, 0, 0, 1);
  --same-name-container-weight: 500;
  --same-name-container-font-size: 14px;
  --same-name-container-font: var(--main-font);
  --apply-coupon-btn-align: center;
  --apply-coupon-btn-background-color: var(--primary-color);
  --apply-coupon-btn-weight: 600;
  --apply-coupon-btn-font-size: 14px;
  --apply-coupon-btn-font: var(--main-font);
  --apply-coupon-btn-border-radius: 4px;
  --apply-coupon-btn-color: #fff;
  --apply-coupon-btn-box-shadow: 0px 0px 0px 1px rgb(60, 60, 215),
    0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --apply-coupon-btn-background-color-hover: var(--primary-color);
  --apply-coupon-btn-color-hover: #fff;
  --apply-coupon-btn-box-shadow-hover: 0px 0px 0px 1px rgb(60, 60, 215),
    0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --apply-coupon-btn-margin: 0px 0px 10px 0px;
  --apply-coupon-btn-width: 70px;
  --billing-detail-color: rgb(0, 0, 0, 1);
  --billing-detail-weight: 600;
  --billing-detail-font-size: 14px;
  --billing-detail-font: var(--main-font);
  --billing-detail-margin: 5px 0px 0px 0px;
  --billing-value-color: rgb(0, 0, 0, 1);
  --billing-value-weight: 400;
  --billing-value-font-size: 14px;
  --billing-value-font: var(--main-font);
  --no-detail-color: var(--primary-color);
  --no-detail-weight: 600;
  --no-detail-font-size: 14px;
  --no-detail-font: var(--main-font);
  --no-detail-color-hover: var(--primary-color);
  --payment-info-item-color: rgb(0, 0, 0, 1);
  --payment-info-item-weight: 600;
  --payment-info-item-font-size: 14px;
  --payment-info-item-font: var(--main-font);
  --payment-info-margin: 5px 0px 5px 0px;
  --payment-info-amount-color: rgb(0, 0, 0, 1);
  --payment-info-amount-weight: 400;
  --payment-info-amount-font-size: 14px;
  --payment-info-amount-font: var(--main-font);
  --coupon-description-color: rgb(0, 0, 0, 1);
  --coupon-description-weight: 400;
  --coupon-description-font-size: 14px;
  --coupon-description-font: var(--main-font);
  --remove-coupon-btn-color: var(--primary-color);
  --remove-coupon-btn-weight: 600;
  --remove-coupon-btn-font-size: 14px;
  --remove-coupon-btn-font: var(--main-font);
  --remove-coupon-btn-margin: 0px 0px 10px 0px;
  --view-receipt-btn-background-color: rgb(255, 255, 255, 1);
  --view-receipt-btn-color: var(--primary-color);
  --view-receipt-btn-margin: 0px 0px 0px 0px;
  --view-receipt-btn-padding: 5px;
  --view-receipt-btn-border-radius: 4px;
  --view-receipt-btn-box-shadow: 0px 0px 0px 1px rgb(203, 213, 225);
  --view-receipt-btn-font: var(--main-font);
  --view-receipt-btn-font-size: 14px;
  --view-receipt-btn-weight: 600;
  --view-receipt-btn-letter-spacing: 0px;
  --view-receipt-btn-background-color-hover: rgba(255, 255, 255, 1);
  --view-receipt-btn-color-hover: var(--primary-color);
  --view-receipt-btn-box-shadow-hover: 0px 0px 0px 1px rgb(139, 149, 162),
    0px 1px 5px rgba(0, 0, 0, 0.4392156863),
    0px 1px 2px 0px rgba(0, 0, 0, 0.2392156863);
  --view-receipt-btn-icon: url(/images/icons/receipt.svg);
  --view-receipt-btn-position: center;
  --cancel-billing-btn-box-shadow: 0px 0px 0px 1px rgb(203, 213, 225);
  --cancel-billing-btn-background-color: rgb(255, 255, 255, 1);
  --cancel-billing-btn-border-radius: 4px;
  --cancel-billing-btn-color: rgb(0, 0, 0, 1);
  --cancel-billing-btn-weight: 600;
  --cancel-billing-btn-font-size: 14px;
  --cancel-billing-btn-font: var(--main-font);
  --cancel-billing-btn-letter-spacing: 0px;
  --cancel-billing-btn-padding: 5px 5px 5px 5px;
  --cancel-billing-btn-background-color-hover: rgba(255, 255, 255, 1);
  --cancel-billing-btn-box-shadow-hover: 0px 0px 0px 1px rgb(139, 149, 162),
    0px 1px 5px rgba(0, 0, 0, 0.4392156863),
    0px 1px 2px 0px rgba(0, 0, 0, 0.2392156863);
  --cancel-billing-btn-color-hover: rgb(0, 0, 0, 1);
  --save-billing-btn-box-shadow: 0px 0px 0px 1px rgb(60, 60, 215),
    0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --save-billing-btn-background-color: var(--primary-color);
  --save-billing-btn-border-radius: 4px;
  --save-billing-btn-color: #fff;
  --save-billing-btn-weight: 600;
  --save-billing-btn-font-size: 14px;
  --save-billing-btn-font: var(--main-font);
  --save-billing-btn-letter-spacing: 0px;
  --save-billing-btn-padding: 5px 5px 5px 5px;
  --save-billing-btn-background-color-hover: var(--primary-color);
  --save-billing-btn-box-shadow-hover: 0px 0px 0px 1px rgb(60, 60, 215),
    0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --save-billing-btn-color-hover: #fff;
}

.--main-container {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-flow: column;
}
.--main-container:has(.--location-content.--active) {
  height: unset;
}

.--nav-bar {
  background-color: var(--nav-bar-background-color);
  border-bottom: var(--nav-bar-border-bottom-size) var(--nav-bar-border-bottom-style) var(--nav-bar-border-bottom-color);
  box-sizing: border-box;
  display: flex;
  justify-content: var(--logo-position);
  padding: var(--nav-bar-padding);
  transition: border-color 0.2s ease-in, background-color 0.2s ease-in;
  z-index: 1;
}
.--nav-bar .--logo {
  display: flex;
  height: var(--logo-size);
  z-index: 2;
}

body {
  background-color: var(--business-container-background-color);
}

.--hide {
  display: none !important;
}
.--hide-on-medium {
  display: none;
}

.--business-container {
  display: none;
  padding: var(--business-container-padding);
  height: 100%;
}

.--business-header-container {
  transition: opacity 0.2s ease-in, transform 0.2s ease-in, visibility 0.2s ease-in;
}

.--header {
  color: var(--index-header-color);
  font: var(--index-header-weight) var(--index-header-font-size) var(--index-header-font);
  margin: var(--header-margin);
  text-align: var(--index-header-text-align);
}

.--subheader {
  color: var(--subheader-color);
  font: var(--subheader-weight) var(--subheader-font-size) var(--subheader-font);
  margin: var(--subheader-margin);
  text-align: var(--subheader-text-align);
}

.--back-to-subcategory-btn {
  max-width: -moz-fit-content;
  max-width: fit-content;
  transform: translateY(-20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in;
}

.--height-container {
  display: flex;
  position: relative;
}

.--services-container {
  flex-shrink: 0;
  margin-right: 10px;
  max-width: 450px;
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in;
  visibility: visible;
  width: 100%;
  position: absolute;
  top: 0;
}

.--service-container {
  box-sizing: border-box;
  max-width: 450px;
  width: 100%;
}

.--big-subcategory-button {
  box-sizing: border-box;
  box-shadow: var(--big-subcategory-button-box-shadow);
  border-radius: var(--big-subcategory-button-border-radius);
  margin: var(--big-subcategory-button-margin);
  align-items: center;
  background-color: var(--big-subcategory-button-background-color);
  border-radius: var(--big-subcategory-button-border-radius);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: var(--big-subcategory-button-padding);
  transition: border-radius 0s 0.2s, background-color 0.2s ease-in, opacity 0.2s ease-in, transform 0.2s ease-in, visibility 0.2s ease-in;
  width: 100%;
}
.--big-subcategory-button:hover {
  box-shadow: var(--big-subcategory-button-box-shadow-hover);
  background-color: var(--big-subcategory-button-background-color-hover);
}
.--big-subcategory-button:hover .--subcategory-header {
  color: var(--subcategory-header-color-hover);
}
.--big-subcategory-button:hover .--subcategory-service-count {
  color: var(--subcategory-service-count-color-hover);
}

.--subcategory-header {
  color: var(--subcategory-header-color);
  font: var(--subcategory-header-weight) var(--subcategory-header-font-size) var(--subcategory-header-font);
  text-transform: var(--subcategory-header-transform);
}

.--pill-container {
  display: flex;
  align-items: center;
  gap: 5px;
}

.--subcategory-service-count {
  color: var(--subcategory-service-count-color);
  font: var(--subcategory-service-count-weight) var(--subcategory-service-count-font-size) var(--subcategory-service-count-font);
}

.--subcategory-chevron {
  display: var(--subcategory-chevron-display);
  width: var(--subcategory-chevron-chevron-size);
  height: var(--subcategory-chevron-chevron-size);
  --width: var(--subcategory-chevron-chevron-size);
  --height: var(--subcategory-chevron-chevron-size);
  --icon-color: var(--subcategory-chevron-chevron-color);
  transform: rotate(0deg);
  transition: transform 0.175s ease-in;
}

.--inner-services-wrapper {
  padding: 0px;
  opacity: 0;
  transform: translateY(20px);
  visibility: hidden;
}

.--service-container.active .--inner-services-wrapper {
  position: absolute;
  top: 30px;
  width: 100%;
  max-width: 450px;
  border-radius: var(--inner-services-wrapper-border-radius);
  box-sizing: border-box;
  box-shadow: var(--inner-services-wrapper-box-shadow);
  opacity: 1;
  padding: 10px;
  transition: transform 0.2s ease-in, visible 0.2s ease-in, opacity 0.2s ease-in;
  transform: translateY(0px);
  background-color: var(--inner-services-wrapper-background-color);
  visibility: visible;
}
.--service-container.active .--inner-services-container {
  box-shadow: var(--service-wrapper-box-shadow);
}

.--inner-services-container {
  background: var(--service-wrapper-background-color);
  box-shadow: 0px 0px 0px 0px;
  box-sizing: border-box;
  border-radius: var(--service-wrapper-border-radius);
  overflow: hidden;
  transition: box-shadow 0.2s ease-in;
  width: 100%;
}

.--service-wrapper {
  position: relative;
}
.--service-wrapper:not(:last-of-type)::after {
  content: "";
  border-bottom: var(--service-wrapper-divider-size) var(--service-wrapper-divider-style) var(--service-wrapper-divider-color);
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  width: 90%;
}

.--service-holder {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.--service-name {
  color: var(--service-name-color);
  font: var(--service-name-weight) var(--service-name-font-size) var(--service-name-font);
  letter-spacing: var(--service-name-spacing);
  text-transform: var(--service-name-transform);
}

.--service-description {
  color: var(--service-description-color);
  padding: var(--service-description-padding);
  background: var(--service-description-background);
  border-radius: var(--service-description-border-radius);
  font: var(--service-description-weight) var(--service-description-font-size) var(--service-description-font);
  letter-spacing: var(--service-description-spacing);
  box-shadow: var(--service-description-box-shadow);
  line-height: var(--service-description-line-height);
  transition: 0.2s height ease-in;
  overflow: hidden;
}
.--service-description.collapsed {
  height: calc(var(--service-description-line-height) * 1.9rem);
  white-space: normal;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.--service-bottom-bar {
  display: flex;
  justify-content: space-between;
}

.--business::before,
.--online::before,
.--location-amount::before,
.--service-duration::before,
.--customers::before,
.--service-cost::before,
.--locate-a-store-icon::before,
.--use-current-location-btn-icon::before,
.--location-list-direction-btn-icon::before,
.--location-list-staff-btn-icon::before,
.--location-list-service-btn-icon::before,
.--modal-top-close-btn::before,
.--booking-page-previous-step-btn::before,
.--drawer-direction-btn-icon::before,
.--drawer-staff-btn-icon::before,
.--drawer-service-btn-icon::before,
.--drawer-close-btn::before,
.--popular-service-info-btn::before,
.--service-category-icon::before,
.--booking-page-date-change-btn::before,
.--view-receipt-btn::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: transparent;
  box-shadow: 0px 0px 0px 0px;
  padding: 0;
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--icon-color);
  margin-right: 3px;
}

.--locate-a-store-icon::before {
  width: var(--locate-a-store-icon-size);
  height: var(--locate-a-store-icon-size);
  margin: var(--locate-a-store-icon-margin);
}

.--use-current-location-btn-icon::before {
  width: var(--use-current-location-btn-icon-size);
  height: var(--use-current-location-btn-icon-size);
  margin: var(--use-current-location-btn-icon-margin);
}

.--location-list-direction-btn-icon::before {
  width: var(--location-list-direction-btn-icon-size);
  height: var(--location-list-direction-btn-icon-size);
  margin: var(--location-list-direction-btn-icon-margin);
}

.--location-list-staff-btn-icon::before {
  width: var(--location-list-staff-btn-icon-size);
  height: var(--location-list-staff-btn-icon-size);
  margin: var(--location-list-staff-btn-icon-margin);
}

.--location-list-service-btn-icon::before {
  width: var(--location-list-service-btn-icon-size);
  height: var(--location-list-service-btn-icon-size);
  margin: var(--location-list-service-btn-icon-margin);
}

.--service-cost {
  align-items: center;
  background-color: var(--service-cost-background-color);
  border-radius: var(--service-cost-border-radius);
  box-shadow: var(--service-cost-box-shadow);
  box-sizing: border-box;
  color: var(--service-cost-color);
  display: flex;
  font: var(--service-cost-weight) var(--service-cost-font-size) var(--service-cost-font);
  height: -moz-fit-content;
  height: fit-content;
  padding: var(--service-cost-padding);
  --icon-url: url(/images/icons/price.svg);
  --icon-color: var(--service-cost-color);
}
.--service-cost::before {
  display: var(--service-cost-icon-display);
}

.--service-duration {
  align-items: center;
  background-color: var(--service-duration-background-color);
  border-radius: var(--service-duration-border-radius);
  box-shadow: var(--service-duration-box-shadow);
  box-sizing: border-box;
  color: var(--service-duration-color);
  display: flex;
  font: var(--service-duration-weight) var(--service-duration-font-size) var(--service-duration-font);
  height: -moz-fit-content;
  height: fit-content;
  padding: var(--service-duration-padding);
  display: flex;
  --icon-url: url(/images/icons/clock-tag.svg);
  --icon-color: var(--service-duration-color);
}
.--service-duration::before {
  display: var(--service-duration-icon-display);
}

.--location-amount {
  align-items: center;
  background-color: var(--location-amount-background-color);
  border-radius: var(--location-amount-border-radius);
  box-shadow: var(--location-amount-box-shadow);
  box-sizing: border-box;
  color: var(--location-amount-color);
  display: flex;
  font: var(--location-amount-weight) var(--location-amount-font-size) var(--location-amount-font);
  height: -moz-fit-content;
  height: fit-content;
  padding: var(--location-amount-padding);
  margin-left: 6px;
  --icon-url: url(/images/icons/location.svg);
  --icon-color: var(--location-amount-color);
}
.--location-amount::before {
  display: var(--location-amount-icon-display);
}

.--business {
  align-items: center;
  background-color: var(--business-background-color);
  border-radius: var(--business-border-radius);
  box-shadow: var(--business-box-shadow);
  color: var(--business-color);
  display: flex;
  height: -moz-fit-content;
  height: fit-content;
  font: var(--business-weight) var(--business-font-size) var(--business-font);
  padding: var(--business-padding);
  --icon-url: url(/images/icons/person.svg);
  --icon-color: var(--business-color);
}
.--business::before {
  display: var(--business-icon-display);
}

.--customers {
  align-items: center;
  background-color: var(--customers-background-color);
  border-radius: var(--customers-border-radius);
  box-shadow: var(--customers-box-shadow);
  color: var(--customers-color);
  display: flex;
  height: -moz-fit-content;
  height: fit-content;
  font: var(--customers-weight) var(--customers-font-size) var(--customers-font);
  padding: var(--customers-padding);
  --icon-url: url(/images/icons/mobile.svg);
  --icon-color: var(--customers-color);
}
.--customers::before {
  display: var(--customers-icon-display);
}

.--online {
  align-items: center;
  background-color: var(--online-background-color);
  color: var(--online-color);
  border-radius: var(--online-border-radius);
  box-shadow: var(--online-box-shadow);
  box-sizing: border-box;
  color: var(--online-color);
  display: flex;
  font: var(--online-weight) var(--online-font-size) var(--online-font);
  height: -moz-fit-content;
  height: fit-content;
  padding: var(--online-padding);
  --icon-url: url(/images/icons/virtual.svg);
  --icon-color: var(--online-color);
}
.--online::before {
  display: var(--online-icon-display);
}

.--expand-btn {
  background-color: var(--expand-btn-background-color);
  border-radius: var(--expand-btn-border-radius);
  box-sizing: border-box;
  box-shadow: var(--expand-btn-box-shadow);
  color: var(--expand-btn-color);
  font: var(--expand-btn-weight) var(--expand-btn-font-size) var(--expand-btn-font);
  padding: var(--expand-btn-padding);
  margin: var(--expand-btn-margin);
}
.--expand-btn:hover {
  background-color: var(--expand-btn-background-color-hover);
  box-shadow: var(--expand-btn-box-shadow-hover);
  color: var(--expand-btn-color-hover);
}

.summary-container {
  position: relative;
  width: 100%;
  max-width: 450px;
  margin-right: 5px;
}

.--questionnaire-container.hide {
  opacity: 0;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  visibility: hidden;
  z-index: -1;
}

.--back-to-subcategory-btn-container {
  z-index: -1;
  position: absolute;
}
.--back-to-subcategory-btn-container .--back-to-subcategory-btn {
  background-color: var(--back-to-subcategory-btn-background-color);
  border-radius: var(--back-to-subcategory-btn-border-radius);
  box-sizing: border-box;
  box-shadow: var(--back-to-subcategory-btn-box-shadow);
  color: var(--back-to-subcategory-btn-color);
  font: var(--back-to-subcategory-btn-weight) var(--back-to-subcategory-btn-font-size) var(--back-to-subcategory-btn-font);
  padding: var(--back-to-subcategory-btn-padding);
  margin: var(--back-to-subcategory-btn-margin);
  overflow: hidden;
}
.--back-to-subcategory-btn-container .--back-to-subcategory-btn:hover {
  background-color: var(--back-to-subcategory-btn-background-color-hover);
  box-shadow: var(--back-to-subcategory-btn-box-shadow-hover);
  color: var(--back-to-subcategory-btn-color-hover);
}

.--subcategory-chosen .--back-to-subcategory-btn-container {
  grid-template-rows: 1fr;
  z-index: 2;
}
.--subcategory-chosen .--business-header-container {
  height: 0px;
  transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
}
.--subcategory-chosen .--big-subcategory-button {
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
}
.--subcategory-chosen .--back-to-subcategory-btn {
  opacity: 1;
  transform: translateY(0px);
  visibility: visible;
}

.location-active .--location-summary-container {
  opacity: 0;
  visibility: hidden;
  height: 0;
}
.location-active .--location-container {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.location-active .--business-header-container,
.calendar-active .--business-header-container {
  height: 0px;
}
.location-active .--service-chosen,
.calendar-active .--service-chosen {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  grid-template-rows: 1fr;
}
.location-active .--business-header-container,
.location-active .--questionnaire-container,
.location-active .--services-container,
.calendar-active .--business-header-container,
.calendar-active .--questionnaire-container,
.calendar-active .--services-container {
  transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.calendar-active .--location-summary-container {
  grid-template-rows: 1fr;
}
.calendar-active .--calendar-container,
.calendar-active .--location-summary-container {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  pointer-events: all;
}

.questionnaire-active .--business-header-container {
  height: 28px;
}
.questionnaire-active .--services-container,
.questionnaire-active .--service-chosen,
.questionnaire-active .--business-header-container,
.questionnaire-active .--calendar-container,
.questionnaire-active .--location-summary-container {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
}
.questionnaire-active .--location-display {
  transform: translateX(100%);
}

.--calendar-container {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in;
  max-width: 325px;
  position: relative;
  flex-shrink: 0;
  pointer-events: none;
  width: 100%;
}
.--calendar-container.--active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  pointer-events: all;
}

.--location-container {
  width: 0px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in;
  position: relative;
}

.--locate-container {
  align-items: center;
  display: flex;
  margin-bottom: 10px;
  margin-top: 5px;
  min-width: 325px;
}

.--service-chosen {
  background: var(--service-chosen-background-color);
  box-shadow: var(--service-chosen-box-shadow);
  padding: var(--service-chosen-padding);
  border-radius: var(--service-chosen-border-radius);
  opacity: 0;
  width: 100vw;
  max-width: 450px;
  z-index: 99;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.2s ease-in visibility, 0.2s ease-in opacity, 0.2s ease-in transform;
}
.--service-chosen .--service-wrapper {
  background: var(--service-wrapper-background-color);
  box-shadow: var(--service-wrapper-box-shadow);
  padding: var(--service-wrapper-padding);
  border-radius: var(--service-wrapper-border-radius);
}

.--change-btn {
  display: flex;
  margin-left: auto;
  margin-right: 5px;
  color: var(--change-btn-color);
  font: var(--change-btn-weight) var(--change-btn-font-size) var(--change-btn-font);
  letter-spacing: var(--change-btn-spacing);
  padding: var(--change-btn-padding);
  box-shadow: var(--change-btn-box-shadow);
  background: var(--change-btn-background-color);
  border-radius: var(--change-btn-border-radius);
}
.--change-btn:hover {
  background: var(--change-btn-background-color-hover);
  box-shadow: var(--change-btn-box-shadow-hover);
  color: var(--change-btn-color-hover);
}

.--locate-store {
  color: var(--locate-store-color);
  font: var(--locate-store-weight) var(--locate-store-font-size) var(--locate-store-font);
  letter-spacing: var(--locate-store-spacing);
  min-width: 325px;
}

.--locate-input {
  width: 100%;
  background: var(--locate-input-background-color);
  border-radius: var(--locate-input-border-radius);
  border: 0;
  box-shadow: var(--locate-input-box-shadow);
  box-sizing: border-box;
  color: var(--locate-input-color);
  font: var(--locate-input-weight) var(--locate-input-font-size) var(--locate-input-font);
  letter-spacing: var(--locate-input-spacing);
  padding: var(--locate-input-padding);
  outline: 0 !important;
}
.--locate-input::-moz-placeholder {
  color: var(--locate-input-placeholder-color);
}
.--locate-input::placeholder {
  color: var(--locate-input-placeholder-color);
}

.--locate-btn {
  background: var(--locate-btn-background-color);
  --icon-color: var(--locate-btn-color);
  border-radius: var(--locate-btn-border-radius);
  box-shadow: var(--locate-btn-box-shadow);
  margin-left: 10px;
  width: 40px;
  height: 100%;
  aspect-ratio: 1/1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  --icon-url: url(/images/icons/search-thick.svg);
}

.--location-wrapper {
  text-align: left;
  background: var(--location-wrapper-background-color);
  border-radius: var(--location-wrapper-border-radius);
  padding: var(--location-wrapper-padding);
  margin: var(--location-wrapper-margin);
  box-shadow: var(--location-wrapper-box-shadow);
  width: 100%;
  width: 325px;
}

.--location-distance {
  color: var(--location-distance-color);
  font: var(--location-distance-weight) var(--location-distance-font-size) var(--location-distance-font);
  letter-spacing: var(--location-distance-spacing);
  margin: var(--location-distance-margin);
}

.--location-display {
  background: var(--location-display-background-color);
  box-sizing: border-box;
  border-left: var(--location-display-border-left-size) var(--location-display-border-left-style) var(--location-display-border-left-color);
  position: fixed;
  top: 0;
  right: 0;
  width: calc(100% - 10px);
  min-width: 325px;
  max-width: 450px;
  padding: 10px 15px 40px;
  z-index: 99;
  overflow-y: scroll;
  height: 100vh;
}
.--location-display::-webkit-scrollbar {
  width: 7px;
  border-radius: 10px;
}
.--location-display::-webkit-scrollbar-track {
  border-radius: 10px;
  background: transparent;
}
.--location-display::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 10px 10px rgba(100, 116, 139, 0.4901960784);
  border: 6px solid transparent;
  border-radius: 10px;
}

.--location-img-container {
  width: 100%;
  overflow: hidden;
  border-radius: var(--location-img-container-border-radius);
  position: relative;
  margin-bottom: 5px;
  aspect-ratio: 1/1;
}

.--location-direction-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.8);
  font: 500 0.875rem Lato;
  letter-spacing: 0.2px;
  padding: 5px 10px;
  border-radius: 12px;
}

.--location-display-name {
  color: var(--location-display-name-color);
  font: var(--location-display-name-weight) var(--location-display-name-font-size) var(--location-display-name-font);
  letter-spacing: var(--location-display-name-spacing);
  margin-bottom: 3px;
}

.--location-display-address {
  color: var(--location-display-address-color);
  font: var(--location-display-address-weight) var(--location-display-address-font-size) var(--location-display-address-font);
  letter-spacing: var(--location-display-address-spacing);
  margin-bottom: 3px;
}

.--location-direction-icon-btn {
  --icon-url: url(/images/icons/near-me.svg);
  --icon-color: var(--location-display-address-color);
}

.--location-number {
  color: var(--location-number-color);
  font: var(--location-number-weight) var(--location-number-font-size) var(--location-number-font);
  letter-spacing: var(--location-number-spacing);
  display: flex;
  align-items: center;
  --icon-url: url(/images/icons/phone-fill.svg);
  --icon-color: var(--location-number-color);
}
.--location-number::before {
  content: "";
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--icon-color);
  width: 16px;
  height: 16px;
  display: block;
  margin-right: 5px;
}

.--location-email {
  color: var(--location-email-color);
  font: var(--location-email-weight) var(--location-email-font-size) var(--location-email-font);
  letter-spacing: var(--location-email-spacing);
  display: flex;
  align-items: center;
  --icon-url: url(/images/icons/email-fill.svg);
  --icon-color: var(--location-email-color);
}
.--location-email::before {
  content: "";
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--icon-color);
  width: 16px;
  height: 16px;
  display: block;
  margin-right: 5px;
}

.--location-number-container {
  margin: var(--location-number-container-margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.--location-call-btn {
  background: var(--location-call-btn-background-color);
  padding: var(--location-call-btn-padding);
  box-shadow: var(--location-call-btn-box-shadow);
  border-radius: var(--location-call-border-radius);
  color: var(--location-call-btn-color);
  font: var(--location-call-btn-weight) var(--location-call-btn-font-size) var(--location-call-btn-font);
  letter-spacing: var(--location-call-btn-spacing);
}

.--location-email-btn {
  background: var(--location-email-btn-background-color);
  padding: var(--location-email-btn-padding);
  box-shadow: var(--location-email-btn-box-shadow);
  border-radius: var(--location-email-border-radius);
  color: var(--location-email-btn-color);
  font: var(--location-email-btn-weight) var(--location-email-btn-font-size) var(--location-email-btn-font);
  letter-spacing: var(--location-email-btn-spacing);
}

.--location-times-container {
  margin: var(--location-times-container-margin);
  border-top: var(--location-times-container-divider-size) var(--location-times-container-divider-style);
  border-bottom: var(--location-times-container-divider-size) var(--location-times-container-divider-style);
  border-color: var(--location-times-container-divider-color);
  padding: var(--location-times-container-padding);
}
.--location-times-container > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.--location-display-day {
  text-transform: capitalize;
  color: var(--location-display-day-color);
  font: var(--location-display-day-weight) var(--location-display-day-font-size) var(--location-display-day-font);
  letter-spacing: var(--location-display-day-spacing);
  margin-bottom: 10px;
}

.--location-display-times {
  text-transform: capitalize;
  color: var(--location-display-times-color);
  font: var(--location-display-times-weight) var(--location-display-times-font-size) var(--location-display-times-font);
  letter-spacing: var(--location-display-times-spacing);
}

.--location-services-container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.--location-services-header {
  color: var(--location-services-header-color);
  font: var(--location-services-header-weight) var(--location-services-header-font-size) var(--location-services-header-font);
  letter-spacing: var(--location-services-header-spacing);
  margin-bottom: 4px;
}

.--location-service-list-item {
  font: var(--location-service-list-item-weight) var(--location-service-list-item-font-size) var(--location-service-list-item-font);
  padding: 3px 7px;
  background-color: var(--location-service-list-item-background-color);
  color: var(--location-service-list-item-color);
  border-radius: var(--location-service-list-item-border-radius);
  flex-shrink: 0;
}

.--location-summary-container {
  background: var(--location-summary-container-background-color);
  border-radius: var(--location-summary-container-border-radius);
  box-shadow: var(--location-summary-container-box-shadow);
  margin: var(--location-summary-container-margin);
  padding: var(--location-summary-container-padding);
  width: 100vw;
  max-width: 450px;
  z-index: 99;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.2s ease-in visibility, 0.2s ease-in opacity, 0.2s ease-in transform;
}

.--location-summary-wrapper {
  background: var(--location-summary-wrapper-background-color);
  border-radius: var(--location-summary-wrapper-border-radius);
  box-shadow: var(--location-summary-wrapper-box-shadow);
  padding: var(--location-summary-wrapper-padding);
}

.--location-summary-name {
  color: var(--location-summary-name-color);
  font: var(--location-summary-name-weight) var(--location-summary-name-font-size) var(--location-summary-name-font);
  letter-spacing: var(--location-summary-name-spacing);
}

.--location-summary-address {
  color: var(--location-summary-address-color);
  font: var(--location-summary-address-weight) var(--location-summary-address-font-size) var(--location-summary-address-font);
  letter-spacing: var(--location-summary-address-spacing);
}

.--change-location-btn {
  display: flex;
  margin-left: auto;
  margin-top: 10px;
  color: var(--change-location-btn-color);
  font: var(--change-location-btn-weight) var(--change-location-btn-font-size) var(--change-location-btn-font);
  letter-spacing: var(--change-location-btn-spacing);
  padding: var(--change-location-btn-padding);
  box-shadow: var(--change-location-btn-box-shadow);
  background: var(--change-location-btn-background-color);
  border-radius: var(--change-location-btn-border-radius);
}
.--change-location-btn:hover {
  background: var(--change-location-btn-background-color-hover);
  box-shadow: var(--change-location-btn-box-shadow-hover);
  color: var(--change-location-btn-color-hover);
}

.--calendar {
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in, height 0.25s ease;
  transform: translateY(6px);
  margin-top: 10px;
  position: absolute;
  width: 100%;
  border-radius: var(--calendar-border-radius);
  box-shadow: var(--calendar-box-shadow);
  padding: var(--calendar-padding);
  display: flex;
  z-index: 6;
  overflow: hidden;
}
.--calendar.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.--calendar.loading > .w-100 {
  opacity: 0.5;
  pointer-events: none;
}
.--calendar .w-100 {
  transform: translateX(0%);
}
.--calendar.forward > .w-100 {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.--calendar.primed > .w-100 {
  transform: translateX(-100%);
}
.--calendar.backward > .w-100 {
  transform: translateX(0%);
  transition: transform 0.3s ease;
}

.--calendar-date-selector {
  background-color: var(--calendar-date-selector-background-color);
  color: var(--calendar-date-selector-color);
  border-radius: var(--calendar-date-selector-border-radius);
  font: var(--calendar-date-selector-weight) var(--calendar-date-selector-font-size) var(--calendar-date-selector-font);
  padding: var(--calendar-date-selector-padding);
  box-shadow: var(--calendar-date-selector-box-shadow);
}
.--calendar-date-selector .icon {
  --icon-color: var(--calendar-date-selector-color);
  --icon-url: url(/images/icons/calendar-thick.svg);
  --width: 20px;
  --height: 20px;
}

.--month-wrapper {
  background-color: var(--month-wrapper-background-color);
  color: var(--month-wrapper-color);
  font: var(--month-wrapper-weight) var(--month-wrapper-font-size) var(--month-wrapper-font);
  padding: var(--month-wrapper-padding);
}

.--row-holder div {
  width: 14.285714%;
  aspect-ratio: 1/1;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-flow: column-reverse;
}
.--row-holder.days {
  background-color: var(--day-background-color);
}
.--row-holder > .--day {
  font: var(--day-weight) var(--day-font-size) var(--day-font);
  color: var(--day-color);
  text-transform: capitalize;
}
.--row-holder > .--date {
  font: var(--date-weight) var(--date-font-size) var(--date-font);
  color: var(--date-color);
  background-color: var(--date-background-color);
  border-radius: var(--date-border-radius);
}
.--row-holder > .--date:not(.--strike) {
  cursor: pointer;
}
.--row-holder > .--date:not(.--strike):hover,
.--row-holder > .--date .active {
  color: var(--date-color-hover);
  background-color: var(--date-background-color-hover);
}

.--dates-holder {
  background-color: var(--calendar-background-color);
}

.--chevron {
  background-color: var(--chevron-background-color);
  border-radius: var(--chevron-border-radius);
  box-shadow: var(--chevron-box-shadow);
  padding: var(--chevron-padding);
}
.--chevron .--chevron-mask {
  background-color: var(--chevron-color);
}

.--time-holder {
  box-shadow: var(--time-holder-box-shadow);
  border-radius: var(--time-holder-border-radius);
  background-color: var(--time-holder-background-color);
  padding: var(--time-holder-padding);
  font: var(--time-holder-weight) var(--time-holder-font-size) var(--time-holder-font);
  color: var(--time-holder-color);
  border-radius: var(--time-holder-border-radius);
  margin-top: 10px;
}
.--time-holder:hover {
  box-shadow: var(--time-holder-box-shadow-hover);
  background-color: var(--time-holder-background-color-hover);
  color: var(--time-holder-color-hover);
}

.--times {
  box-shadow: var(--times-box-shadow);
  border-radius: var(--times-border-radius);
  background-color: var(--times-background-color);
  padding: var(--times-padding);
  top: var(--times-top);
}
.--times .--row-holder .time {
  font: var(--times-weight) var(--times-font-size) var(--times-font);
  color: var(--times-color);
  border-radius: var(--times-border-radius-hover);
}
.--times .--row-holder .time:hover {
  background-color: var(--times-background-color-hover);
  color: var(--times-color-hover);
}

.--staff-container {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.15s ease-in, visibility 0.15s ease-in, transform 0.15s ease-in;
}
.--staff-container.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.--member {
  border-radius: var(--member-border-radius);
  background-color: var(--member-background-color);
  box-shadow: var(--member-box-shadow);
  padding: var(--member-padding);
  display: flex;
  align-items: center;
  margin-top: 10px;
  cursor: pointer;
}
.--member.disabled {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}
.--member.active {
  background-color: var(--member-background-color-active);
}
.--member.active .--staff-avatar.staff-img {
  background-image: var(--member-img) !important;
  background-size: cover;
}
.--member.active .--staff-name {
  color: var(--staff-name-color-active);
}
.--member.active .--staff-lead {
  color: var(--staff-lead-color-active);
}
.--member:not(.disabled):hover {
  box-shadow: var(--member-box-shadow-hover);
}
.--member:not(.disabled).active {
  box-shadow: var(--member-box-shadow-active);
}
.--member .--staff-avatar {
  width: 50px;
  height: 50px;
  background-color: var(--member-avatar-bg);
  color: var(--member-avatar-color);
  border-radius: var(--staff-avatar-border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  font-family: var(--staff-name-font);
}
.--member .--staff-avatar.staff-img {
  background-image: var(--member-img) !important;
  background-size: cover;
}
.--member .--staff-avatar .staff-initial {
  color: var(--main-color-contrast);
}
.--member .--staff-name {
  font: var(--staff-name-weight) var(--staff-name-font-size) var(--staff-name-font);
  color: var(--staff-name-color);
}
.--member .--staff-lead {
  font: var(--staff-lead-weight) var(--staff-lead-font-size) var(--staff-lead-font);
  color: var(--staff-lead-color);
}

.--confirm-booking-btn {
  background-color: var(--confirm-booking-btn-background-color);
  font: var(--confirm-booking-btn-weight) var(--confirm-booking-btn-font-size) var(--confirm-booking-btn-font);
  box-shadow: var(--confirm-booking-btn-box-shadow);
  border-radius: var(--confirm-booking-btn-border-radius);
  color: var(--confirm-booking-btn-color);
  padding: var(--confirm-booking-btn-padding);
  width: var(--confirm-booking-btn-width);
  display: flex;
  justify-content: var(--confirm-booking-btn-align);
  opacity: 0;
  transform: translateY(10px);
  outline: 0 !important;
  border: 0;
  transition: box-shadow 0.2s ease-in, background-color 0.2s ease-in, color 0.2s ease-in, opacity 0.15s ease-in, transform 0.2s ease-in;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.--confirm-booking-btn:hover {
  background-color: var(--confirm-booking-btn-background-color-hover);
  box-shadow: var(--confirm-booking-btn-box-shadow-hover);
  color: var(--confirm-booking-btn-color-hover);
}
.--confirm-booking-btn.active {
  opacity: 1;
  transform: translateY(0px);
  pointer-events: unset;
}

.--confirm-booking-container {
  background: var(--confirm-booking-container-background-color);
  box-shadow: var(--confirm-booking-container-box-shadow);
  border-radius: var(--confirm-booking-container-border-radius);
  padding: var(--confirm-booking-container-padding);
  margin-top: 22px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
  position: absolute;
  width: 100%;
  top: 0px;
  box-sizing: border-box;
}
.--confirm-booking-container.active {
  opacity: 1;
  transform: translateY(0px);
}

.--change-staff-container {
  display: flex;
  top: -20px;
  position: relative;
}

.--change-staff {
  background-color: var(--change-staff-background-color);
  font: var(--change-staff-weight) var(--change-staff-font-size) var(--change-staff-font);
  box-shadow: var(--change-staff-box-shadow);
  border-radius: var(--change-staff-border-radius);
  color: var(--change-staff-color);
  padding: var(--change-staff-padding);
  margin: var(--change-staff-margin);
  text-align: var(--change-staff-align);
  width: 100%;
}
.--change-staff:hover {
  background-color: var(--change-staff-background-color-hover);
  box-shadow: var(--change-staff-box-shadow-hover);
  color: var(--change-staff-color-hover);
}

.--summary-service {
  color: var(--summary-service-color);
  font: var(--summary-service-weight) var(--summary-service-font-size) var(--summary-service-font);
}

.--summary-price {
  color: var(--summary-price-color);
  font: var(--summary-price-weight) var(--summary-price-font-size) var(--summary-price-font);
  margin-left: auto;
}

.--summary-date {
  color: var(--summary-date-color);
  font: var(--summary-date-weight) var(--summary-date-font-size) var(--summary-date-font);
}

.--summary-time {
  color: var(--summary-time-color);
  font: var(--summary-time-weight) var(--summary-time-font-size) var(--summary-time-font);
}

.--summary-staff {
  color: var(--summary-staff-color);
  font: var(--summary-staff-weight) var(--summary-staff-font-size) var(--summary-staff-font);
  border-top: var(--summary-staff-border-top-size) var(--summary-staff-border-top-style) var(--summary-staff-border-top-color);
  padding: var(--summary-staff-padding);
  margin: var(--summary-staff-margin);
}

.--continue-btn {
  background-color: var(--continue-btn-background-color);
  border-radius: var(--continue-btn-border-radius);
  box-shadow: var(--continue-btn-box-shadow);
  color: var(--continue-btn-color);
  display: flex;
  font: var(--continue-btn-weight) var(--continue-btn-font-size) var(--continue-btn-font);
  justify-content: var(--continue-btn-align);
  padding: var(--continue-btn-padding);
  margin: var(--continue-btn-margin);
  position: relative;
  width: 100%;
}
.--continue-btn:hover {
  background-color: var(--continue-btn-background-color-hover);
  color: var(--continue-btn-color-hover);
  box-shadow: var(--continue-btn-box-shadow-hover);
}
.--continue-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.--confirm-page-header {
  font: var(--confirm-page-header-weight) var(--confirm-page-header-font-size) var(--confirm-page-header-font);
  color: var(--confirm-page-header-color);
  width: 100%;
  text-align: center;
  padding: var(--confirm-page-header-padding);
  box-sizing: border-box;
}
.--confirm-page-header.active {
  position: relative;
}

.--confirm-page-lead {
  word-break: break-word;
  text-align: center;
  position: relative;
  font: var(--confirm-page-lead-weight) var(--confirm-page-lead-font-size) var(--confirm-page-lead-font);
  color: var(--confirm-page-lead-color);
  top: 0px;
  margin: 10px 0px 12px;
}

.--booking-id {
  text-align: center;
  position: relative;
  font: var(--confirm-booking-id-weight) var(--confirm-booking-id-font-size) var(--confirm-booking-id-font);
  color: var(--confirm-booking-id-color);
  opacity: 0;
  transform: translateY(-10px);
  transition: 0.2s opacity ease-in, 0.2s transform ease-in;
}
.--booking-id.active {
  opacity: 1;
  transform: translateY(0px);
}

.--confirm-details-container {
  border-top: var(--confirm-details-container-border-top-size) var(--confirm-details-container-border-top-style) var(--confirm-details-container-border-top-color);
  border-bottom: var(--confirm-details-container-border-bottom-size) var(--confirm-details-container-border-bottom-style) var(--confirm-details-container-border-bottom-color);
  margin: var(--confirm-details-container-margin);
  padding: var(--confirm-details-container-padding);
  border-top: 1px solid rgb(148, 163, 184);
  border-bottom: 1px solid rgb(148, 163, 184);
}

.--change-date {
  font: var(--change-date-btn-weight) var(--change-date-btn-font-size) var(--change-date-btn-font);
  color: var(--change-date-btn-color);
  background-color: var(--change-date-btn-background-color);
  border-radius: var(--change-date-btn-border-radius);
  padding: var(--change-date-btn-padding);
  position: absolute;
  box-shadow: var(--change-date-box-shadow);
  right: 0;
  top: -5px;
}
.--change-date:hover {
  color: var(--change-date-btn-color-hover);
  background-color: var(--change-date-btn-background-color-hover);
  box-shadow: var(--change-date-box-shadow-hover);
}

.--desc-value {
  position: relative;
  display: flex;
  margin: var(--desc-value-margin);
}

.--desc {
  flex-shrink: 0;
  width: var(--desc-width);
  font: var(--desc-weight) var(--desc-font-size) var(--desc-font);
  color: var(--desc-color);
}

.--value {
  font: var(--value-weight) var(--value-font-size) var(--value-font);
  color: var(--value-color);
}

.--online-link {
  font-weight: 600;
  color: var(--online-link-color);
}

.--cancel-btn {
  padding: var(--confirm-page-cancel-btn-padding);
  background: var(--confirm-page-cancel-btn-background-color);
  margin: var(--confirm-page-cancel-btn-margin);
  font: var(--confirm-page-cancel-btn-weight) var(--confirm-page-cancel-btn-font-size) var(--confirm-page-cancel-btn-font);
  color: var(--confirm-page-cancel-btn-color);
  box-shadow: var(--confirm-page-cancel-btn-box-shadow);
  border-radius: var(--confirm-page-cancel-btn-border-radius);
  width: 100%;
}
.--cancel-btn:hover {
  background: var(--confirm-page-cancel-btn-background-color-hover);
  box-shadow: var(--confirm-page-cancel-btn-box-shadow-hover);
  color: var(--confirm-page-cancel-btn-color-hover);
}

.--reschedule-btn {
  padding: var(--confirm-page-reschedule-btn-padding);
  background: var(--confirm-page-reschedule-btn-background-color);
  margin: var(--confirm-page-reschedule-btn-margin);
  font: var(--confirm-page-reschedule-btn-weight) var(--confirm-page-reschedule-btn-font-size) var(--confirm-page-reschedule-btn-font);
  color: var(--confirm-page-reschedule-btn-color);
  box-shadow: var(--confirm-page-reschedule-btn-box-shadow);
  border-radius: var(--confirm-page-reschedule-btn-border-radius);
  width: 100%;
}
.--reschedule-btn:hover {
  background: var(--confirm-page-reschedule-btn-background-color-hover);
  box-shadow: var(--confirm-page-reschedule-btn-box-shadow-hover);
  color: var(--confirm-page-reschedule-btn-color-hover);
}

.--page,
.--confirm-page {
  background: #fff;
  position: absolute;
  top: 0px;
  left: var(--page-transition-left);
  opacity: var(--page-transition-start-opacity);
  visibility: hidden;
  pointer-events: none;
  width: 100%;
  max-width: var(--page-max-width);
  box-sizing: border-box;
  --bezier: cubic-bezier(0.77, 0, 0.175, 1);
  transform: var(--page-transition-start-transform);
  transition: opacity 0.35s var(--bezier), transform 0.35s var(--bezier), visibility 0.35s var(--bezier);
}
.--page.--back,
.--confirm-page.--back {
  transform: var(--page-transition-visited-transform);
}
.--page.--active,
.--confirm-page.--active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: var(--page-transition-active);
}
.--page[data-skip=true] .--back-btn,
.--page[data-skip=true] .--page-btn-container,
.--confirm-page[data-skip=true] .--back-btn,
.--confirm-page[data-skip=true] .--page-btn-container {
  height: 0px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  margin: 0;
  padding: 0;
}

.--page,
.--vertical-align-c,
.--confirm-page {
  align-items: center;
  display: flex;
  flex-flow: column;
  padding: 20px;
  height: 100%;
  position: absolute;
  justify-content: center;
  left: 0;
  overflow-y: auto;
  max-height: 100vh;
  max-width: 100vw;
  transform: translateY(100%);
}
.--page.--back,
.--vertical-align-c.--back,
.--confirm-page.--back {
  transform: translateY(-100%);
}
.--page.--active,
.--vertical-align-c.--active,
.--confirm-page.--active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0px);
}

.--confirm-page .--page-container {
  width: 100%;
  max-width: 550px;
}

.view-location-container {
  transform: translateX(100%);
  position: fixed;
  top: 90px;
  background-color: rgba(0, 0, 0, 0.75);
  right: 0px;
  --view-location-height: 26px;
  --view-location-width: 26px;
  height: var(--view-location-height);
  width: var(--view-location-width);
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  z-index: 100;
  transition: transform 0.25s ease-in;
}

.view-location-btn {
  --icon-url: url(/images/icons/chevron-thick.svg);
  --icon-color: #fff;
  --height: var(--view-location-height);
  --width: var(--view-location-width);
  transform: rotate(180deg);
  transition: transform 0.2s cubic-bezier(0.92, 0.09, 0.06, 1);
}
.view-location-btn.open {
  transform: rotate(0deg);
}

.--back-btn {
  --size: var(--back-btn-icon-size);
  --icon-color: var(--back-btn-color);
  --icon-url: url(/images/icons/arrow-back-round.svg);
  --icon-display: var(--back-btn-icon-display);
  background: var(--back-btn-background-color);
  color: var(--back-btn-color);
  display: flex;
  align-items: center;
  justify-content: var(--back-btn-text-align);
  margin: var(--back-btn-margin);
  padding: var(--back-btn-padding);
  border-radius: var(--back-btn-border-radius);
  box-shadow: var(--back-btn-border);
  font: var(--back-btn-weight) var(--back-btn-font-size) var(--back-btn-font);
  letter-spacing: var(--back-btn-spacing);
  transition: box-shadow 0.2s ease-in, background-color 0.2s ease-in, color 0.2s ease-in;
  width: var(--back-btn-width);
}
.--back-btn::before {
  background: transparent;
  background-color: var(--icon-color);
  content: "";
  display: var(--icon-display);
  height: var(--size);
  flex-shrink: 0;
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  margin-right: var(--back-btn-icon-spacing);
  -webkit-mask-size: cover;
  mask-size: cover;
  width: var(--size);
  transition: background-color 0.2s ease-in;
}
.--back-btn:hover {
  background: var(--back-btn-background-color-hover);
  box-shadow: var(--back-btn-border-hover);
  color: var(--back-btn-color-hover);
  --icon-color: var(--back-btn-color-hover);
}

.--next-btn {
  --size: var(--next-btn-icon-size);
  --icon-color: var(--next-btn-color);
  --icon-url: url(/images/icons/arrow-forward-round.svg);
  --icon-display: var(--next-btn-icon-display);
  align-items: center;
  background: var(--next-btn-background-color);
  border-radius: var(--next-btn-border-radius);
  box-shadow: var(--next-btn-border);
  color: var(--next-btn-color);
  display: flex;
  justify-content: var(--next-btn-text-align);
  margin: var(--next-btn-margin);
  padding: var(--next-btn-padding);
  font: var(--next-btn-weight) var(--next-btn-font-size) var(--next-btn-font);
  letter-spacing: var(--next-btn-spacing);
  transition: box-shadow 0.2s ease-in, background-color 0.2s ease-in, color 0.2s ease-in;
  width: var(--next-btn-width);
}
.--next-btn::after {
  background: transparent;
  background-color: var(--icon-color);
  content: "";
  display: var(--icon-display);
  height: var(--size);
  flex-shrink: 0;
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  margin-left: var(--next-btn-icon-spacing);
  -webkit-mask-size: cover;
  mask-size: cover;
  width: var(--size);
  transition: background-color 0.2s ease-in;
}
.--next-btn:hover {
  background: var(--next-btn-background-color-hover);
  box-shadow: var(--next-btn-border-hover);
  color: var(--next-btn-color-hover);
  --icon-color: var(--next-btn-color-hover);
}

.--page-btn-container {
  display: flex;
  justify-content: var(--next-btn-position);
  margin: var(--back-btn-margin);
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
}

.--timer-container {
  background: var(--timer-background-color);
  border-radius: var(--timer-border-radius);
  box-shadow: var(--timer-box-shadow);
  padding: var(--timer-padding);
  letter-spacing: var(--time-spacing);
  position: absolute;
  right: 10px;
  top: 10px;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 5;
}
.--timer-container .--timer {
  font: var(--timer-weight) var(--timer-font-size) var(--timer-font);
  color: var(--timer-color);
}
.--timer-container .--time-left {
  font: var(--timer-time-weight) var(--timer-font-size) var(--timer-font);
  color: var(--timer-time-color);
}
.--timer-container.--overran {
  width: 290px;
  background: var(--timer-background-color-overran);
  box-shadow: var(--timer-box-shadow-overran);
}
.--timer-container.--overran .--timer {
  color: var(--timer-color-overran);
  font-weight: var(--timer-weight-overran);
  font-size: 0.8rem;
}
.--timer-container.--overran .time-left {
  display: none;
}

.--large-header {
  color: var(--large-header-color);
  font: var(--large-header-font-weight) var(--large-header-font-size) var(--large-header-font);
  letter-spacing: var(--large-header-spacing);
  -webkit-text-decoration: var(--large-header-decoration);
          text-decoration: var(--large-header-decoration);
  margin: var(--large-header-margin);
}

.--block-container {
  width: calc(var(--page-max-width) + 6.66px);
}
.--block-container.--more-blocks {
  display: flex;
  gap: 10px;
  width: calc(var(--page-max-width) + 3.33px);
}
.--block-container.--three-blocks {
  width: var(--page-max-width);
}

.--input-error-container:has(:invalid.touched) .--error-text {
  margin-bottom: 15px;
  grid-template-rows: 1fr;
}

.--show-error .--error-text {
  margin-bottom: 15px;
  grid-template-rows: 1fr;
}

.--error-text {
  display: grid;
  grid-template-rows: 0fr;
  color: var(--error-text-color);
  font: var(--error-text-weight) var(--error-text-font-size) var(--error-text-font);
  transition: margin 0.2s ease-in, grid-template-rows 0.2s ease-in;
}
.--error-text > div {
  overflow: hidden;
}

.--input-error-container {
  display: flex;
  flex-flow: column;
  flex-shrink: 0;
}

.--medium-header {
  color: var(--medium-header-color);
  font: var(--medium-header-font-weight) var(--medium-header-font-size) var(--medium-header-font);
  letter-spacing: var(--medium-header-spacing);
  -webkit-text-decoration: var(--medium-header-decoration);
          text-decoration: var(--medium-header-decoration);
  margin: var(--medium-header-margin);
}

.--small-header {
  color: var(--small-header-color);
  font: var(--small-header-font-weight) var(--small-header-font-size) var(--small-header-font);
  letter-spacing: var(--small-header-spacing);
  -webkit-text-decoration: var(--small-header-decoration);
          text-decoration: var(--small-header-decoration);
  margin: var(--small-header-margin);
}

.--text {
  color: var(--text-color);
  font: var(--text-font-weight) var(--text-font-size) var(--text-element-font);
  letter-spacing: var(--text-spacing);
  -webkit-text-decoration: var(--text-decoration);
          text-decoration: var(--text-decoration);
  margin: var(--text-margin);
}
.--text strong {
  font-weight: 600;
}

.--image {
  display: block;
  height: auto;
  width: 100%;
}

.--align-r {
  text-align: right;
}

.--align-c {
  text-align: center;
}

.--align-l {
  text-align: left;
}

.--input-title {
  color: var(--input-title-color);
  font: var(--input-title-font-weight) var(--input-title-font-size) var(--input-title-font);
  letter-spacing: var(--input-title-spacing);
  -webkit-text-decoration: var(--input-title-decoration);
          text-decoration: var(--input-title-decoration);
  margin: var(--input-title-margin);
  text-align: var(--input-title-align);
  display: flex;
  align-items: end;
}

.--input-label {
  color: var(--input-label-color);
  font: var(--input-label-font-weight) var(--input-label-font-size) var(--input-label-font);
  letter-spacing: var(--input-label-spacing);
  -webkit-text-decoration: var(--input-label-decoration);
          text-decoration: var(--input-label-decoration);
  margin: var(--input-label-margin);
  text-align: var(--input-label-align);
  display: flex;
  align-items: end;
}

.--measurement-container {
  align-items: center;
  display: flex;
  margin: var(--input-margin);
  position: relative;
}
.--measurement-container.--metric {
  width: -moz-fit-content;
  width: fit-content;
}

.--measurement-label-container {
  align-items: center;
  display: flex;
  margin-right: 10px;
  position: relative;
}

.--measurement-label {
  position: absolute;
  z-index: 9;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font: 400 0.875rem var(--main-font);
  color: var(--input-color);
  opacity: 0.75;
}

textarea.--input-box {
  width: 100%;
}

.--input-box {
  background: var(--input-background-color);
  box-shadow: var(--input-border);
  padding: var(--input-padding);
  box-sizing: border-box;
  width: var(--input-width);
  color: var(--input-color);
  outline: 0;
  border: 0;
  font: var(--input-weight) var(--input-font-size) var(--input-font);
  border-radius: var(--input-border-radius);
  margin: var(--input-margin);
  transition: var(--input-transition);
  text-align: var(--input-text-align);
  letter-spacing: var(--input-spacing);
}
.--input-box.--card-number,
.--input-box .--billing-name {
  width: 100%;
  margin: 0;
}
.--input-box.--exp-date, .--input-box.--cvc-number, .--input-box.--billing-postal {
  width: 30%;
  flex-grow: 1;
}
.--input-box.--im {
  width: 75px;
}
.--input-box.--metric {
  width: 100px;
}
.--input-box.--im, .--input-box.--metric {
  text-align: center;
  margin: 0;
}
.--input-box::-moz-placeholder {
  color: var(--input-color-placeholder);
}
.--input-box::placeholder {
  color: var(--input-color-placeholder);
}
.--input-box:hover, .--input-box.hover-state {
  color: var(--input-color-hover);
  box-shadow: var(--input-border-hover);
  background: var(--input-background-color-hover);
}
.--input-box:hover::-moz-placeholder, .--input-box.hover-state::-moz-placeholder {
  color: var(--input-color-placeholder-hover);
}
.--input-box:hover::placeholder, .--input-box.hover-state::placeholder {
  color: var(--input-color-placeholder-hover);
}
.--input-box:focus-within, .--input-box.focus-state {
  color: var(--input-color-focus);
  box-shadow: var(--input-border-focus);
  background: var(--input-background-color-focus);
}
.--input-box:focus-within::-moz-placeholder, .--input-box.focus-state::-moz-placeholder {
  color: var(--input-color-placeholder-focus);
}
.--input-box:focus-within::placeholder, .--input-box.focus-state::placeholder {
  color: var(--input-color-placeholder-focus);
}
.--input-box.dd, .--input-box.mm {
  width: 45px;
  text-align: center;
  margin-right: 5px;
}
.--input-box.yyyy {
  width: 60px;
  text-align: center;
}

.--input-radio {
  align-items: center;
  background-color: var(--radio-background);
  border-radius: var(--radio-border-radius);
  box-shadow: var(--radio-border);
  box-sizing: border-box;
  color: var(--radio-color);
  display: flex;
  font: var(--radio-weight) var(--radio-font-size) var(--radio-font);
  margin: var(--radio-margin);
  min-width: var(--radio-min-width);
  width: var(--radio-fit);
  padding: var(--radio-padding);
  position: relative;
  text-align: var(--radio-text-align);
  transition: background-color 0.2s linear, box-shadow 0.2s linear;
}
.--input-radio input {
  opacity: 0;
  position: absolute;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}
.--input-radio .option {
  display: var(--radio-radio-display);
  width: var(--radio-radio-size);
  height: var(--radio-radio-size);
  box-shadow: var(--radio-radio-border);
  background: var(--radio-radio-background);
  border-radius: var(--radio-radio-border-radius);
  position: relative;
  flex-shrink: 0;
  margin-right: 5px;
}
.--input-radio .option::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  display: var(--radio-radio-display);
  width: var(--radio-check-radio-size);
  height: var(--radio-check-radio-size);
  background-color: var(--radio-check-radio-color-hover);
  border-radius: var(--radio-radio-border-radius);
  transition: transform 0.12s ease-in;
}
.--input-radio label {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 100%;
}
.--input-radio::first-letter {
  text-transform: capitalize;
}
.--input-radio:not(.checked-state):hover, .--input-radio.hover-state {
  color: var(--radio-color-hover);
  box-shadow: var(--radio-border-hover);
  background: var(--radio-background-hover);
}
.--input-radio:not(.checked-state):hover .option, .--input-radio.hover-state .option {
  box-shadow: var(--radio-radio-border-hover);
  background: var(--radio-radio-background-hover);
}
.--input-radio:not(.checked-state):hover .option::before, .--input-radio.hover-state .option::before {
  background-color: var(--radio-check-radio-color-hover);
  transform: translate(-50%, -50%) scale(1);
}
.--input-radio:has(input:checked), .--input-radio.checked-state {
  box-shadow: var(--radio-border-checked) !important;
  background-color: var(--radio-background-checked) !important;
  color: var(--radio-color-checked) !important;
}
.--input-radio:has(input:checked) .option, .--input-radio.checked-state .option {
  box-shadow: var(--radio-radio-border-checked) !important;
  background: var(--radio-radio-background-checked) !important;
}
.--input-radio:has(input:checked) .option::before, .--input-radio.checked-state .option::before {
  background-color: var(--radio-check-radio-color) !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.--input-file-container {
  background: #f8fafc;
  border: 1px dashed #94a3b8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 20px;
  border-radius: 4px;
  box-sizing: border-box;
}
.--input-file-preview {
  display: block;
  height: auto;
  max-width: 100%;
}
.--input-file-preview-container {
  width: 100%;
  max-width: 325px;
  overflow: hidden;
  border-radius: 4px;
}
.--input-file-buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.--input-file-buttons-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}
.--input-file-text {
  color: #404650;
  margin: 10px 0px;
  font: 300 0.875rem var(--main-font);
}
.--input-file-button {
  align-items: center;
  background: var(--logo-color);
  box-sizing: border-box;
  color: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  display: flex;
  font: 600 0.875rem var(--main-font);
  text-shadow: 0px 1px 1px var(--logo-color-darker-10);
  margin: 10px 0px 5px;
  padding: 5px 15px 5px 10px;
  position: relative;
  text-align: center;
}
.--input-file-button::before {
  --icon-url: url(/images/icons/upload-thick.svg);
  content: "";
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--icon-color, #fff);
  height: var(--size, 14px);
  width: var(--size, 14px);
  display: block;
  margin-right: 5px;
}
.--input-file-button:disabled {
  opacity: 0.5;
}
.--input-file-button::after {
  content: "";
  background-image: radial-gradient(75% 75% at center top, color-mix(in srgb, rgba(255, 255, 255, 0.6588235294) 20%, transparent), transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.--input-checkbox {
  align-items: center;
  background-color: var(--checkbox-background);
  border-radius: var(--checkbox-border-radius);
  box-shadow: var(--checkbox-border);
  box-sizing: border-box;
  color: var(--checkbox-color);
  display: flex;
  font: var(--checkbox-weight) var(--checkbox-font-size) var(--checkbox-font);
  margin: var(--checkbox-margin);
  min-width: var(--checkbox-min-width);
  width: var(--checkbox-fit);
  padding: var(--checkbox-padding);
  position: relative;
  text-align: var(--checkbox-text-align);
  transition: background-color 0.2s linear, box-shadow 0.2s linear;
}
.--input-checkbox input {
  opacity: 0;
  position: absolute;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}
.--input-checkbox .option {
  display: var(--checkbox-checkbox-display);
  width: var(--checkbox-checkbox-size);
  height: var(--checkbox-checkbox-size);
  box-shadow: var(--checkbox-checkbox-border);
  background: var(--checkbox-checkbox-background);
  border-radius: var(--checkbox-checkbox-border-radius);
  position: relative;
  flex-shrink: 0;
  margin-right: 5px;
}
.--input-checkbox .option::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: var(--checkbox-check-size);
  height: var(--checkbox-check-size);
  border-radius: var(--checkbox-checkbox-border-radius);
  transition: transform 0.12s ease-in;
  clip-path: var(--checkbox-checkbox-shape);
  background-color: transparent;
}
.--input-checkbox label {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 100%;
}
.--input-checkbox::first-letter {
  text-transform: capitalize;
}
.--input-checkbox:not(.checked-state):hover {
  color: var(--checkbox-color-hover);
  box-shadow: var(--checkbox-border-hover);
  background: var(--checkbox-background-hover);
}
.--input-checkbox:not(.checked-state):hover .option {
  box-shadow: var(--checkbox-checkbox-border-hover);
  background: var(--checkbox-checkbox-background-hover);
}
.--input-checkbox:not(.checked-state):hover .option::before {
  background-color: var(--checkbox-checkbox-symbol-color-hover);
  transform: translate(-50%, -50%) scale(1);
}
.--input-checkbox:has(input:checked) {
  box-shadow: var(--checkbox-border-checked) !important;
  background-color: var(--checkbox-background-checked) !important;
  color: var(--checkbox-color-checked) !important;
}
.--input-checkbox:has(input:checked) .option {
  box-shadow: var(--checkbox-checkbox-border-checked) !important;
  background: var(--checkbox-checkbox-background-checked) !important;
}
.--input-checkbox:has(input:checked) .option::before {
  background-color: var(--checkbox-checkbox-symbol-color) !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.--optional {
  background: var(--optional-background-color);
  border-radius: var(--optional-border-radius);
  box-shadow: var(--optional-box-shadow);
  color: var(--optional-color);
  font: var(--optional-weight) var(--optional-font-size) var(--optional-font);
  height: -moz-fit-content;
  height: fit-content;
  letter-spacing: var(--optional-letter-spacing);
  margin: var(--optional-margin);
  padding: var(--optional-padding);
  box-sizing: border-box;
}

.--date-time-modal {
  background: var(--business-container-background-color);
  border-radius: 8px;
  box-sizing: border-box;
  height: 600px;
  left: 50%;
  max-width: 100%;
  opacity: 0;
  padding: 30px;
  position: fixed;
  top: 50%;
  transform: translate(-50%, calc(-50% + 10px));
  transition: transform 0.2s ease-in, opacity 0.2s ease-in;
  width: 420px;
  z-index: 99;
}
.--date-time-modal.active {
  opacity: 1;
  transform: translate(-50%, calc(-50% + 0px));
}
.--date-time-modal .--confirm-booking-container {
  padding-top: 20px;
}
.--date-time-modal .--calendar-container.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  pointer-events: all;
}

.--date-close {
  --width: 20px;
  --height: 20px;
  --icon-color: var(--index-header-color);
  --icon-url: url(/images/icons/close.svg);
  background: transparent;
  box-shadow: 0px 0px 0px 0px;
  height: var(--height);
  padding: 0;
  position: relative;
  width: var(--width);
}
.--date-close::after {
  background-color: var(--icon-color);
  content: "";
  display: block;
  height: var(--height);
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: cover;
  mask-size: cover;
  width: var(--width);
}

.--date-header {
  font: 600 1.4rem var(--main-font);
  color: var(--index-header-color);
  margin: 5px 0px 15px 0px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.--date-subheader {
  font: 400 1rem var(--main-font);
  color: var(--index-header-color);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.--date-date-text {
  font-weight: 600;
}

.--date-time-modal-overlay {
  position: fixed;
  height: 100%;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 98;
}

.--room-login-container {
  width: var(--input-width);
  margin: 50px 0px;
}

.--password-container {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin: var(--input-margin);
}
.--password-container input {
  margin: 0;
}

[data-toggle-password] {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.--booking-btn-container {
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: end;
}
.--booking-btn-container.--stacked {
  flex-flow: row;
  flex-wrap: wrap;
  gap: 10px;
}
.--booking-btn-container.--stacked:has(.--next-btn) {
  justify-content: var(--next-btn-position);
}
.--booking-btn-container.--stacked .--deposit-btn,
.--booking-btn-container.--stacked .--pay-full-btn:not(.--next-btn) {
  flex-grow: 1;
}
.--booking-btn-container.--stacked .--pay-later-btn {
  width: 100%;
}

.--deposit-btn {
  box-shadow: var(--deposit-btn-box-shadow);
  background-color: var(--deposit-btn-background-color);
  color: var(--deposit-btn-color);
  margin: var(--deposit-btn-margin);
  padding: var(--deposit-btn-padding);
  border-radius: var(--deposit-btn-border-radius);
  font: var(--deposit-btn-weight) var(--deposit-btn-font-size) var(--deposit-btn-font);
  letter-spacing: var(--deposit-btn-letter-spacing);
}
.--deposit-btn:hover {
  background-color: var(--deposit-btn-background-color-hover);
  color: var(--deposit-btn-color-hover);
  box-shadow: var(--deposit-btn-box-shadow);
}

.--pay-full-btn {
  box-shadow: var(--pay-full-btn-box-shadow);
  background-color: var(--pay-full-btn-background-color);
  color: var(--pay-full-btn-color);
  margin: var(--pay-full-btn-margin);
  padding: var(--pay-full-btn-padding);
  border-radius: var(--pay-full-btn-border-radius);
  font: var(--pay-full-btn-weight) var(--pay-full-btn-font-size) var(--pay-full-btn-font);
  letter-spacing: var(--pay-full-btn-letter-spacing);
}
.--pay-full-btn:hover {
  background-color: var(--pay-full-btn-background-color-hover);
  color: var(--pay-full-btn-color-hover);
  box-shadow: var(--pay-full-btn-box-shadow);
}

.--pay-later-btn {
  box-shadow: var(--pay-later-btn-box-shadow);
  background-color: var(--pay-later-btn-background-color);
  color: var(--pay-later-btn-color);
  margin: var(--pay-later-btn-margin);
  padding: var(--pay-later-btn-padding);
  border-radius: var(--pay-later-btn-border-radius);
  font: var(--pay-later-btn-weight) var(--pay-later-btn-font-size) var(--pay-later-btn-font);
  letter-spacing: var(--pay-later-btn-letter-spacing);
}
.--pay-later-btn:hover {
  background-color: var(--pay-later-btn-background-color-hover);
  color: var(--pay-later-btn-color-hover);
  box-shadow: var(--pay-later-btn-box-shadow);
}

.--payment-modal {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  left: 50%;
  max-width: 450px;
  opacity: 0;
  position: fixed;
  top: 50%;
  transform: translate(-50%, calc(-50% + 10px));
  transition: height 0.2s ease-in, opacity 0.2s ease-in, transform 0.2s ease-in;
  width: 100%;
  z-index: 11;
}
.--payment-modal.--show {
  opacity: 1;
  transform: translate(-50%, calc(-50% + 0px));
}

.--billing-modal {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 15px 0px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.15), 0 -3px 7px 2px rgba(0, 0, 0, 0.075);
  box-sizing: border-box;
  left: 50%;
  max-width: 430px;
  opacity: 0;
  position: fixed;
  top: 50%;
  transform: translate(-50%, calc(-50% + 10px)) scale(1.05);
  transition: height 0.2s ease-in, opacity 0.2s ease-in, transform 0.2s ease-in;
  width: 100%;
  z-index: 13;
}
.--billing-modal.--show {
  opacity: 1;
  transform: translate(-50%, calc(-50% + 0px)) scale(1);
}

.--billing-container {
  padding: 0px 20px;
}

.--billing-btn-container {
  align-items: baseline;
  padding: 20px;
  display: flex;
  justify-content: end;
  gap: 20px;
}

.--coupon-container {
  display: flex;
  gap: 10px;
  margin: var(--apply-coupon-btn-margin);
}
.--coupon-container .--input-box {
  margin: 0;
  width: 100%;
}

.--apply-coupon-btn {
  align-items: center;
  background-color: var(--apply-coupon-btn-background-color);
  border-radius: var(--apply-coupon-btn-border-radius);
  box-shadow: var(--apply-coupon-btn-box-shadow);
  color: var(--apply-coupon-btn-color);
  display: flex;
  font: var(--apply-coupon-btn-weight) var(--apply-coupon-btn-font-size) var(--apply-coupon-btn-font);
  justify-content: var(--apply-coupon-btn-align);
  position: relative;
  max-width: var(--apply-coupon-btn-width);
  width: 100%;
}
.--apply-coupon-btn:hover {
  background-color: var(--apply-coupon-btn-background-color-hover);
  color: var(--apply-coupon-btn-color-hover);
  box-shadow: var(--apply-coupon-btn-box-shadow-hover);
}

.--card-details-container {
  display: flex;
  gap: 10px;
}

.--same-as-billing {
  color: var(--same-as-billing-color);
  font: var(--same-as-billing-weight) var(--same-as-billing-font-size) var(--same-as-billing-font);
}

.--same-name-container {
  margin: 0px 0px 15px;
  color: var(--same-name-container-color);
  font: var(--same-name-container-weight) var(--same-name-container-font-size) var(--same-name-container-font);
}
.--same-name-container label {
  align-items: center;
  cursor: pointer;
  display: flex;
}
.--same-name-container input {
  margin-right: 10px;
}

.--card-number-container {
  position: relative;
  margin-bottom: 10px;
}
.--card-number-container.is-visa .--mastercard {
  display: none;
}
.--card-number-container.is-mastercard .--visa {
  display: none;
}
.--card-number-container.hide-all .--visa,
.--card-number-container.hide-all .--mastercard {
  display: none;
}
.--card-number-container.invalid input {
  color: rgb(176, 35, 58);
  box-shadow: 0px 0px 0px 1px rgb(176, 35, 58);
}

.--card-logo-container {
  align-items: center;
  display: flex;
  gap: 10px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.--visa,
.--mastercard {
  align-items: center;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px #e4e6e9;
  display: flex;
  height: 22px;
  width: 38px;
}
.--visa img,
.--mastercard img {
  width: 100%;
}

.--pay-header {
  font: 600 1.5rem var(--main-font);
  margin: 10px 0px 15px;
  padding: 15px 15px 0px;
}

.--payment-padding-x {
  padding: 0px 15px;
}

.--payment-padding-b {
  padding: 0px 15px 15px;
}

.--billing-name-wrapper,
.--payment-error {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease-in, margin 0.2s ease-in;
}
.--billing-name-wrapper > div,
.--payment-error > div {
  overflow: hidden;
}
.--billing-name-wrapper.active,
.--payment-error.active {
  grid-template-rows: 1fr;
}

.--payment-error {
  padding: 0px;
  margin: 0;
  color: rgb(176, 35, 58);
  font: 500 0.875rem var(--main-font);
}
.--payment-error.active {
  margin: 0 0 10px 0;
}

.--authentication-frame {
  background: #fff;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  height: 600px;
  left: 50%;
  max-width: 400px;
  top: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 999;
}

.--billing-country {
  width: 70%;
  flex-grow: 1;
}
.--billing-country .--searchable-list .searchable-btn {
  width: 100%;
}

.--searchable-list .searchable-btn {
  background: var(--input-background-color);
  box-shadow: var(--input-border);
  padding: var(--input-padding);
  box-sizing: border-box;
  width: var(--input-width);
  color: var(--input-color);
  outline: 0;
  border: 0;
  font: var(--input-weight) var(--input-font-size) var(--input-font);
  border-radius: var(--input-border-radius);
  margin: var(--input-margin);
  transition: var(--input-transition);
  text-align: var(--input-text-align);
  letter-spacing: var(--input-spacing);
}
.--searchable-list .searchable-btn:focus-within, .--searchable-list .searchable-btn:active {
  box-shadow: 0px 0px 0px 1px var(--color-slate-700);
}
.--searchable-list .searchable-list {
  top: 35px;
  position: absolute;
  background: #fff;
  border-radius: var(--input-border-radius);
  box-shadow: var(--input-border);
  z-index: 3;
  width: calc(100% + 2px);
  box-sizing: border-box;
  left: -1px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.25s ease;
}
.--searchable-list .searchable-list > div {
  padding: 13px 10px 10px;
}
.--searchable-list .searchable-list.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.--searchable-list .searchable-list input {
  border: 0;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  outline: 0;
  text-transform: capitalize;
  font: var(--input-weight) var(--input-font-size) var(--input-font);
}
.--searchable-list .searchable-list input:focus-within {
  box-shadow: 0px 0px 0px 1px var(--color-slate-700);
}
.--searchable-list .searchable-list ul {
  max-height: 150px;
  overflow-y: scroll;
}
.--searchable-list .searchable-list ul li {
  cursor: pointer;
  padding: 8px 14px;
  font: 500 0.9rem var(--input-font);
}
.--searchable-list .searchable-list ul li:hover {
  background-color: var(--color-slate-200);
}
.--searchable-list .searchable-list ul li.active {
  background-color: var(--color-slate-100);
}

.--payment-element {
  margin-bottom: 15px;
  border-radius: var(--input-border-radius);
  box-shadow: var(--input-border);
  box-sizing: border-box;
  overflow: visible;
}

.cooupon-info-container {
  margin: 0px 0px 10px 0px;
}

.--payment-info {
  display: flex;
  justify-content: space-between;
  margin: var(--payment-info-margin);
}

.--payment-info-item {
  color: var(--payment-info-item-color);
  font: var(--payment-info-item-weight) var(--payment-info-item-font-size) var(--payment-info-item-font);
}

.--payment-info-amount {
  color: var(--payment-info-amount-color);
  font: var(--payment-info-amount-weight) var(--payment-info-amount-font-size) var(--payment-info-amount-font);
}

.--coupon-description {
  color: var(--coupon-description-color);
  font: var(--coupon-description-weight) var(--coupon-description-font-size) var(--coupon-description-font);
  margin: var(--coupon-description-margin);
}

.--billing-detail-container {
  margin: var(--billing-detail-margin);
}
.--billing-detail {
  color: var(--billing-detail-color);
  font: var(--billing-detail-weight) var(--billing-detail-font-size) var(--billing-detail-font);
}
.--billing-value {
  cursor: pointer;
  color: var(--billing-value-color);
  font: var(--billing-value-weight) var(--billing-value-font-size) var(--billing-value-font);
}

.--no-detail {
  color: var(--no-detail-color);
  cursor: pointer;
  font: var(--no-detail-weight) var(--no-detail-font-size) var(--no-detail-font);
}
.--no-detail:hover {
  color: var(--no-detail-color-hover);
}

.--remove-coupon-btn {
  color: var(--remove-coupon-btn-color);
  font: var(--remove-coupon-btn-weight) var(--remove-coupon-btn-font-size) var(--remove-coupon-btn-font);
  margin: var(--remove-coupon-btn-margin);
}

.--view-receipt-btn-container {
  display: grid;
  grid-template-rows: 0fr;
  justify-content: var(--view-receipt-btn-position);
  transition: grid-template-rows 0.2s ease;
}
.--view-receipt-btn-container:not(.--show) .--view-receipt-btn {
  padding: 0px;
  box-shadow: unset;
}
.--view-receipt-btn-container.--show {
  grid-template-rows: 1fr;
}

.--view-receipt-btn {
  align-items: center;
  box-shadow: var(--view-receipt-btn-box-shadow);
  background-color: var(--view-receipt-btn-background-color);
  border-radius: var(--view-receipt-btn-border-radius);
  color: var(--view-receipt-btn-color);
  display: flex;
  font: var(--view-receipt-btn-weight) var(--view-receipt-btn-font-size) var(--view-receipt-btn-font);
  letter-spacing: var(--view-receipt-btn-letter-spacing);
  margin: var(--view-receipt-btn-margin);
  overflow: hidden;
  padding: var(--view-receipt-btn-padding);
  transition: padding 0.1s ease, box-shadow 0.2s ease-in, background-color 0.2s ease-in, color 0.2s ease-in;
  --icon-url: var(--view-receipt-btn-icon);
  --icon-color: var(--view-receipt-btn-color);
}
.--view-receipt-btn:hover {
  background-color: var(--view-receipt-btn-background-color-hover);
  box-shadow: var(--view-receipt-btn-box-shadow-hover);
  color: var(--view-receipt-btn-color-hover);
  --icon-color: var(--view-receipt-btn-color-hover);
}

.--receipt-modal {
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.1));
  width: 325px;
  margin: 0 auto;
  background: linear-gradient(135deg, transparent 7.1px, white 7.11px) top left, linear-gradient(45deg, white 3.5px, transparent 3.51px) top left, linear-gradient(135deg, white 3.5px, transparent 3.51px) bottom left, linear-gradient(45deg, transparent 7.1px, white 7.11px) bottom left;
  background-repeat: repeat-x;
  background-size: 10px 5px;
  opacity: 0;
  padding: 4px 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 10px));
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
  z-index: 10;
}
.--receipt-modal.--show {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.--receipt-top-border {
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  margin-bottom: 15px;
  padding-bottom: 8px;
}
.--receipt-list {
  background-color: white;
  list-style-type: none;
  padding: 20px;
}
.--receipt-list-item {
  font-family: monospace;
  display: flex;
  justify-content: space-between;
}
.--receipt-list-item.--last-sold {
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  margin-bottom: 8px;
  padding-bottom: 15px;
}
.--receipt-spacing {
  border-bottom: 1.5px dashed rgba(0, 0, 0, 0.15);
  flex-grow: 1;
  -webkit-flex-grow: 1;
}
.--receipt-item {
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.--receipt-wrap {
  white-space: normal;
  margin-bottom: 5px;
}
.--receipt-value {
  font-family: monospace;
}
.--receipt-balance-due {
  padding: 8px 0px;
  margin: 8px 0px;
  border-top: 1px dashed rgba(0, 0, 0, 0.25);
  border-bottom: 1px dashed rgba(0, 0, 0, 0.25);
}
.--receipt-link {
  font-weight: 600;
}
.--receipt-discount .--receipt-item {
  font-weight: 600;
}
.--receipt-discount .--receipt-value {
  color: rgb(17, 140, 66);
}

.--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.15s ease;
  cursor: pointer;
}
.--overlay-invisible {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: all;
  visibility: visible;
  cursor: pointer;
}
.--overlay-invisible.--level-two {
  z-index: 12;
}
.--overlay.--show {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

.--save-billing-btn {
  box-shadow: var(--save-billing-btn-box-shadow);
  background-color: var(--save-billing-btn-background-color);
  border-radius: var(--save-billing-btn-border-radius);
  color: var(--save-billing-btn-color);
  font: var(--save-billing-btn-weight) var(--save-billing-btn-font-size) var(--save-billing-btn-font);
  letter-spacing: var(--save-billing-btn-letter-spacing);
  padding: var(--save-billing-btn-padding);
  position: relative;
}
.--save-billing-btn:hover {
  background-color: var(--save-billing-btn-background-color-hover);
  box-shadow: var(--save-billing-btn-box-shadow-hover);
  color: var(--save-billing-btn-color-hover);
}

.--cancel-billing-btn {
  box-shadow: var(--cancel-billing-btn-box-shadow);
  background-color: var(--cancel-billing-btn-background-color);
  border-radius: var(--cancel-billing-btn-border-radius);
  color: var(--cancel-billing-btn-color);
  font: var(--cancel-billing-btn-weight) var(--cancel-billing-btn-font-size) var(--cancel-billing-btn-font);
  letter-spacing: var(--cancel-billing-btn-letter-spacing);
  padding: var(--cancel-billing-btn-padding);
}
.--cancel-billing-btn:hover {
  background-color: var(--cancel-billing-btn-background-color-hover);
  box-shadow: var(--cancel-billing-btn-box-shadow-hover);
  color: var(--cancel-billing-btn-color-hover);
}

.staging {
  background-color: #fff;
  box-shadow: 0px 0px 0px 1px var(--logo-color), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  position: fixed;
  bottom: 20px;
  left: 50%;
  padding: 10px;
  box-sizing: border-box;
  font-family: var(--text-font);
  opacity: 1;
  transform: translateX(-50%);
  transition: opacity 0.15s ease-in, visibility 0.15s ease-in, transform 0.25s cubic-bezier(0.25, 0.1, 0.7, 1.82);
  width: calc(100% - 15px);
  z-index: 2;
}

.--form {
  flex: 1;
  position: relative;
}

.--form-page {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.--form-page:not(:has(.-checkout-page)) {
  overflow: hidden;
}

.--form-product-wrapper {
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
}
.--form-product-container {
  display: flex;
  flex-flow: row;
  gap: 10px;
}
.--form-product-image {
  width: 100%;
  height: auto;
  display: block;
}
.--form-product-image-container {
  width: 120px;
  border-radius: 8px;
  overflow: hidden;
  height: -moz-fit-content;
  height: fit-content;
  flex-shrink: 0;
}
.--form-product-name {
  font: 600 1.2rem var(--main-font);
  color: var(--text-color);
}
.--form-product-price {
  font: 500 0.875rem var(--main-font);
  color: var(--text-color);
}
.--form-product-key-features {
  margin-bottom: 5px;
}
.--form-product-key-feature {
  font: 400 0.875rem var(--main-font);
  color: var(--text-color);
  margin-bottom: 2px;
}
.--form-product-select-btn {
  background: var(--primary-color);
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  font: 600 0.875rem Inter;
  margin-top: 15px;
  width: 100%;
}
.--form-product-select-btn:disabled {
  opacity: 0.5;
}
.--form-product-attribute-label {
  font: 600 0.875rem var(--main-font);
  color: var(--text-color);
  margin: 10px 0px 4px;
}
.--form-product-attribute-label::first-letter {
  text-transform: capitalize;
}
.--form-product-attribute {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.--form-product-attribute-option {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex: 0 0 var(--radio-width);
  position: relative;
  padding: 10px;
  background: #fff;
  border-radius: 4px;
  gap: 5px;
  box-shadow: 0px 0px 0px 1px var(--color-gray-500);
}
.--form-product-attribute-option:has(input:checked) {
  box-shadow: 0px 0px 0px 2px var(--color-slate-900);
}
.--form-product-attribute-option:has(input:checked) .--form-product-attribute-option-btn {
  box-shadow: 0px 0px 0px 1px var(--color-slate-600);
  background-color: var(--color-slate-100);
}
.--form-product-attribute-option:has(input:checked) .--form-product-attribute-option-btn::before {
  background-color: var(--color-slate-900);
}
.--form-product-attribute-option-btn {
  position: relative;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: #fff;
  flex-shrink: 0;
  cursor: pointer;
  transition: box-shadow 0.2s ease-in;
  box-shadow: 0px 0px 0px 1px var(--color-gray-500);
}
.--form-product-attribute-option-btn::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: box-shadow 0.2s ease-in;
  margin-right: 5px;
}
.--form-product-attribute-option-label {
  font: 500 0.875rem var(--main-font);
  color: var(--text-color);
  width: -moz-max-content;
  width: max-content;
}
.--form-product-attribute-option-input {
  cursor: pointer;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
}

@media screen and (max-width: 1300px) {
  .--calendar-container {
    margin-top: 15px;
  }
  .--height-container {
    flex-flow: column;
  }
  .calendar-active .--location-container,
  .--services-container {
    height: 0px;
  }
  .summary-container {
    width: 100%;
  }
  .--service-chosen,
  .--location-summary-container {
    width: 100%;
  }
}
@media screen and (max-width: 950px) {
  .--page-container {
    width: 100%;
  }
  .calendar-active .view-location-container {
    transform: translateX(0%);
  }
  .--location-display {
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.92, 0.09, 0.06, 1);
  }
  .--location-display.active {
    transform: translateX(0%);
  }
  .--timer-container {
    left: 50%;
    transform: translateX(-50%);
    top: 8px;
    width: -moz-fit-content;
    width: fit-content;
    text-align: center;
  }
}
@media screen and (max-width: 568px) {
  .--hide-on-medium {
    display: block;
  }
  .--payment-modal {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transform: translate(-50%, 10px);
    top: unset;
  }
  .--payment-modal.--show {
    bottom: 0;
    transform: translate(-50%, 0px);
    top: unset;
  }
}
@media screen and (max-width: 350px) {
  #serviceDate {
    max-width: 145px;
  }
}
.--spinner-container {
  position: absolute;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  z-index: 9999999;
  pointer-events: none;
  --spinner-color: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.15s ease-in;
}
.--spinner-container.--small {
  transform: translate(-50%, -50%) scale(0.5);
}
.--spinner-container .--spinner-circle {
  position: relative;
  border-top: 5px solid var(--spinner-color);
  border-right: 5px solid var(--spinner-color);
  border-bottom: 5px solid var(--spinner-color);
  border-left: 5px solid transparent;
  transform: translateZ(0);
  animation: spin 1.1s infinite linear;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.--loading span {
  opacity: 0;
}
.--loading .--spinner-container {
  opacity: 1;
}

.--white-spinner {
  --spinner-color: rgba(255, 255, 255);
}

.--dark-spinner {
  --spinner-color: var(--color-slate-700);
}

.--danger-btn {
  font-weight: 600;
  font-family: Inter;
  background: var(--color-danger-600);
  border-radius: 4px;
  text-shadow: 0px 1px 1px var(--color-danger-800);
  box-shadow: 0px 0px 0px 1px var(--color-danger-700), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  color: #fff;
  position: relative;
  padding: 5px;
}
.--danger-btn:hover {
  background: var(--color-danger-700);
  box-shadow: 0px 0px 0px 1px var(--color-danger-800), 0px 5px 12px 0px rgba(0, 0, 0, 0.25);
}
.--danger-btn::after {
  content: "";
  background-image: radial-gradient(75% 75% at center top, color-mix(in srgb, rgba(255, 255, 255, 0.73) 20%, transparent), transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
body {
  --modal-border-radius: 8px;
  --modal-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --modal-top-close-btn-icon-size: 18px;
  --modal-top-close-btn-margin-margin: 0px 0px 0px 0px;
  --modal-top-close-btn-display: inline;
  --modal-top-close-btn-icon: url(/images/icons/close.svg);
  --modal-top-close-btn-color: #000;
  --modal-top-close-btn-color-focus: #000;
  --modal-top-container-background: rgb(248, 249, 249);
  --modal-top-container-divider-size: 1px;
  --modal-top-container-divider-style: solid;
  --modal-top-container-divider-color: rgb(228, 230, 233);
  --modal-top-container-color: rgb(15, 23, 42);
  --modal-top-container-font-weight: 600;
  --modal-top-container-font: var(--main-font);
  --modal-top-container-font-size: 18px;
  --modal-top-container-letter-spacing: 0px;
  --modal-top-container-padding: 20px;
  --modal-mid-container-background: #fff;
  --modal-mid-container-color: rgb(49 53 62);
  --modal-mid-container-font-weight: 300;
  --modal-mid-container-font: var(--main-font);
  --modal-mid-container-font-size: 16px;
  --modal-mid-container-letter-spacing: 0px;
  --modal-mid-container-line-height: 22px;
  --modal-mid-container-padding: 10px 20px;
  --modal-bottom-container-background: rgb(248, 249, 249);
  --modal-bottom-container-divider-size: 1px;
  --modal-bottom-container-divider-style: solid;
  --modal-bottom-container-divider-color: rgb(228, 230, 233);
  --modal-bottom-container-color: rgb(15, 23, 42);
  --modal-bottom-container-font-weight: 600;
  --modal-bottom-container-font: var(--main-font);
  --modal-bottom-container-font-size: 18px;
  --modal-bottom-container-letter-spacing: 0px;
  --modal-bottom-container-padding: 20px;
  --modal-subcategory-color: rgb(15, 23, 42);
  --modal-subcategory-font-weight: 600;
  --modal-subcategory-font: var(--main-font);
  --modal-subcategory-font-size: 16px;
  --modal-subcategory-letter-spacing: 0px;
  --modal-subcategory-margin: 8px 0px 10px 0px;
  --modal-service-color: rgb(15, 23, 42);
  --modal-service-font-weight: 400;
  --modal-service-font: var(--main-font);
  --modal-service-font-size: 14px;
  --modal-service-letter-spacing: 0.2px;
  --modal-service-margin: 4px 0px 4px 0px;
  --modal-service-cost-color: rgb(15, 23, 42);
  --modal-service-cost-font-weight: 400;
  --modal-service-cost-font: var(--main-font);
  --modal-service-cost-font-size: 14px;
  --modal-service-cost-letter-spacing: 0.2px;
  --modal-service-cost-margin: 4px 0px 4px 0px;
  --modal-staff-avatar-border-radius: 100%;
  --modal-staff-name-color: rgb(15, 23, 42);
  --modal-staff-name-font-weight: 600;
  --modal-staff-name-font: var(--main-font);
  --modal-staff-name-font-size: 14px;
  --modal-staff-name-letter-spacing: 0.2px;
  --modal-staff-role-color: rgb(15, 23, 42);
  --modal-staff-role-font-weight: 400;
  --modal-staff-role-font: var(--main-font);
  --modal-staff-role-font-size: 12px;
  --modal-staff-role-letter-spacing: 0px;
}

.--modal-overlay {
  background-color: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.--billing-modal-container {
  position: relative;
  z-index: 13;
}

.--modal {
  display: flex;
  flex-flow: column;
  max-height: calc(100% - 10px);
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-box-shadow);
  pointer-events: none;
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 325px;
  overflow: hidden;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 10px));
  z-index: 6;
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}
.--modal.--show {
  pointer-events: auto;
  opacity: 1;
  transform: translate(-50%, -50%);
}
.--modal [data-date-choices-container] {
  min-width: 454px;
  min-height: 70px;
}
.--modal-top-close-btn {
  display: var(--modal-top-close-btn-display);
  --icon-size: var(--modal-top-close-btn-icon-size);
  --icon-url: var(--modal-top-close-btn-icon);
  --icon-color: var(--modal-top-close-btn-color);
  margin: var(--modal-top-close-btn-margin);
}
.--modal-top-close-btn::before {
  width: var(--modal-top-close-btn-icon-size);
  height: var(--modal-top-close-btn-icon-size);
}
.--modal-top-close-btn:hover {
  --icon-color: var(--modal-top-close-btn-color-focus);
}
.--modal-top-container {
  background-color: var(--modal-top-container-background);
  border-bottom: var(--modal-top-container-divider-size) var(--modal-top-container-divider-style);
  border-color: var(--modal-top-container-divider-color);
  color: var(--modal-top-container-color);
  font: var(--modal-top-container-font-weight) var(--modal-top-container-font-size) var(--modal-top-container-font);
  letter-spacing: var(--modal-top-container-letter-spacing);
  padding: var(--modal-top-container-padding);
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.--modal-mid-container {
  display: flex;
  flex-flow: column;
  flex: 1;
  color: var(--modal-mid-container-color);
  font: var(--modal-mid-container-font-weight) var(--modal-mid-container-font-size) var(--modal-mid-container-font);
  background-color: var(--modal-mid-container-background);
  letter-spacing: var(--modal-mid-container-letter-spacing);
  line-height: var(--modal-mid-container-line-height);
  padding: var(--modal-mid-container-padding);
  min-height: 300px;
}
.--modal-mid-container > div {
  display: flex;
  flex-flow: column;
  flex: 1;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.--modal-mid-container .--times-container {
  overflow-y: auto;
  padding: 2px;
}
.--modal-bottom-container {
  display: flex;
  justify-content: end;
  gap: 10px;
  background-color: var(--modal-bottom-container-background);
  border-top: var(--modal-bottom-container-divider-size) var(--modal-bottom-container-divider-style);
  border-color: var(--modal-bottom-container-divider-color);
  color: var(--modal-bottom-container-color);
  font: var(--modal-bottom-container-font-weight) var(--modal-bottom-container-font-size) var(--modal-bottom-container-font);
  letter-spacing: var(--modal-bottom-container-letter-spacing);
  padding: var(--modal-bottom-container-padding);
}
.--modal-subcategory-container {
  margin: 0px 0px 8px 0px;
}
.--modal-subcategory {
  font: var(--modal-subcategory-font-weight) var(--modal-subcategory-font-size) var(--modal-subcategory-font);
  letter-spacing: var(--modal-subcategory-letter-spacing);
  margin: var(--modal-subcategory-margin);
}
.--modal-service-information {
  display: flex;
  justify-content: space-between;
  margin: var(--modal-service-margin);
}
.--modal-service {
  font: var(--modal-service-font-weight) var(--modal-service-font-size) var(--modal-service-font);
  letter-spacing: var(--modal-service-letter-spacing);
}
.--modal-service-cost {
  font: var(--modal-service-cost-font-weight) var(--modal-service-cost-font-size) var(--modal-service-cost-font);
  letter-spacing: var(--modal-service-cost-letter-spacing);
}
.--modal-staff-list, .--modal-staff-container {
  display: flex;
  justify-content: center;
}
.--modal-staff-list {
  align-items: baseline;
  flex-flow: wrap;
  gap: 15px;
}
.--modal-staff-container {
  align-items: center;
  flex-flow: column;
}
.--modal-staff-avatar {
  border-radius: var(--modal-staff-avatar-border-radius);
}
.--modal-staff-name {
  font: var(--modal-staff-name-font-weight) var(--modal-staff-name-font-size) var(--modal-staff-name-font);
  letter-spacing: var(--modal-staff-name-letter-spacing);
}
.--modal-staff-role {
  font: var(--modal-staff-role-font-weight) var(--modal-staff-role-font-size) var(--modal-staff-role-font);
  letter-spacing: var(--modal-staff-role-letter-spacing);
}

@media (max-width: 575px) {
  .--modal {
    width: calc(100% - 10px);
    max-height: calc(100% - 10px);
  }
  .--modal [data-date-choices-container] {
    min-width: unset;
  }
}
body {
  --locate-a-store-input-container-padding: 25px 40px 25px 40px;
  --locate-a-store-input-container-padding-sm: 18px 16px 18px 16px;
  --locate-a-store-input-container-background-color: rgb(248, 249, 249);
  --locate-a-store-label-color: rgb(33, 37, 41);
  --locate-a-store-label-weight: 500;
  --locate-a-store-label-font-size: 18px;
  --locate-a-store-label-font: var(--main-font);
  --locate-a-store-input-background-color: #fff;
  --locate-a-store-input-color: #212529;
  --locate-a-store-input-placeholder-color: rgb(129 144 162);
  --locate-a-store-input-border-radius: 4px;
  --locate-a-store-input-box-shadow: 0px 0px 0px 1px rgb(203, 213, 225);
  --locate-a-store-input-weight: 500;
  --locate-a-store-input-font: var(--main-font);
  --locate-a-store-input-font-size: 14px;
  --locate-a-store-input-spacing: 0px;
  --locate-a-store-input-margin: 10px 0px 10px 0px;
  --locate-a-store-input-padding: 13px 38px 13px 10px;
  --locate-a-store-input-background-color-focus: rgb(255, 255, 255);
  --locate-a-store-input-color-focus: #212529;
  --locate-a-store-input-border-focus: 0px 1px 1px 0px rgb(100, 116, 139), 0px 0px 0px 1px rgb(148, 163, 184), 0px 2px 5px 0px rgb(226, 232, 240);
  --locate-a-store-input-border-hover: 0px 1px 1px 0px rgb(100, 116, 139), 0px 0px 0px 1px rgb(148, 163, 184), 0px 2px 5px 0px rgb(226, 232, 240);
  --locate-a-store-input-transition: box-shadow .15s ease-in-out, color .15s ease-in-out, background-color .15s ease-in-out;
  --locate-a-store-icon: url(/images/icons/search-alt.svg);
  --locate-a-store-display: inline;
  --locate-a-store-icon-size: 20px;
  --locate-a-store-icon-margin: 0px 0px 0px 0px;
  --locate-a-store-icon-right: 15px;
  --use-current-location-btn-background-color: rgba(255, 255, 255, 1);
  --use-current-location-btn-color: #212529;
  --use-current-location-btn-margin: 10px 0px 0px 0px;
  --use-current-location-btn-padding: 13px;
  --use-current-location-btn-border-radius: 100px;
  --use-current-location-btn-box-shadow: 0px 0px 0px 1px rgb(203, 213, 225);
  --use-current-location-btn-font: var(--main-font);
  --use-current-location-btn-font-size: 14px;
  --use-current-location-btn-weight: 500;
  --use-current-location-btn-letter-spacing: 0px;
  --use-current-location-btn-justify-content: center;
  --use-current-location-btn-flex-flow: row;
  --use-current-location-btn-background-color-hover: rgba(255, 255, 255, 1);
  --use-current-location-btn-color-hover: #212529;
  --use-current-location-btn-box-shadow-hover: 0px 1px 1px 0px rgb(100, 116, 139), 0px 0px 0px 1px rgb(148, 163, 184), 0px 2px 5px 0px rgb(226, 232, 240);
  --use-current-location-btn-icon: url(/images/icons/current-location.svg);
  --use-current-location-btn-icon-size: 14px;
  --use-current-location-btn-icon-margin: 0px 0px 0px 5px;
  --use-current-location-btn-icon-display: inline;
  --address-autocomplete-list-background: #fff;
  --address-autocomplete-list-border-radius: 4px;
  --address-autocomplete-list-box-shadow: 0px 0px 0px 1px rgb(203, 213, 225);
  --address-autocomplete-suggestion-color: rgb(15, 23, 42);
  --address-autocomplete-suggestion-font: var(--main-font);
  --address-autocomplete-suggestion-font-size: 12px;
  --address-autocomplete-suggestion-letter-spacing: 0px;
  --address-autocomplete-suggestion-padding: 15px;
  --address-autocomplete-suggestion-weight: 600;
  --address-autocomplete-suggestion-divider-size: 1px;
  --address-autocomplete-suggestion-divider-style: solid;
  --address-autocomplete-suggestion-divider-color:rgb(214, 217, 222);
  --address-autocomplete-suggestion-background-hover: rgb(248, 249, 249);
  --locate-a-store-list-item-background: rgb(255, 255, 255);
  --locate-a-store-list-item-padding: 5px;
  --locate-a-store-list-item-divider-size: 1px;
  --locate-a-store-list-item-divider-style: solid;
  --locate-a-store-list-item-divider-color:rgb(214, 217, 222);
  --locate-a-store-list-item-background-hover: rgb(248, 249, 249);
  --locate-a-store-list-item-border-selected: inset 0px 0px 0px 2px var(--primary-color);
  --location-list-top-container-padding: 10px;
  --location-list-name-color: rgb(15, 23, 42);
  --location-list-name-weight: 600;
  --location-list-name-font: var(--main-font);
  --location-list-name-font-size: 16px;
  --location-list-name-letter-spacing: 0px;
  --location-list-name-margin: 0px 0px 0px 0px;
  --location-list-status-color: rgb(15, 23, 42);
  --location-list-status-weight: 400;
  --location-list-status-font: var(--main-font);
  --location-list-status-font-size: 14px;
  --location-list-status-letter-spacing: 0px;
  --location-list-status-margin: 5px 0px 0px 0px;
  --location-list-status-open-color: green;
  --location-list-status-closed-color: red;
  --location-list-address-color: rgb(15, 23, 42);
  --location-list-address-weight: 400;
  --location-list-address-font: var(--main-font);
  --location-list-address-font-size: 14px;
  --location-list-address-letter-spacing: 0px;
  --location-list-address-margin: 0px 0px 0px 0px;
  --location-list-distance-color: rgb(15, 23, 42);
  --location-list-distance-weight: 400;
  --location-list-distance-font: var(--main-font);
  --location-list-distance-font-size: 12px;
  --location-list-distance-letter-spacing: 0px;
  --location-list-distance-margin: 0px 0px 0px 0px;
  --location-list-distance-text-align: end;
  --location-list-options-padding: 5px;
  --location-list-direction-btn-icon: url(/images/icons/directions.svg);
  --location-list-direction-btn-icon-size: 14px;
  --location-list-direction-btn-icon-margin: 0px 5px 0px 0px;
  --location-list-direction-btn-icon-display: inline;
  --location-list-direction-btn-background-color: var(--primary-color);
  --location-list-direction-btn-color: rgb(255, 255, 255);
  --location-list-direction-btn-margin: 0px 0px 0px 0px;
  --location-list-direction-btn-padding: 8px;
  --location-list-direction-btn-border-radius: 100px;
  --location-list-direction-btn-box-shadow: unset;
  --location-list-direction-btn-font: var(--main-font);
  --location-list-direction-btn-font-size: 14px;
  --location-list-direction-btn-weight: 600;
  --location-list-direction-btn-letter-spacing: 0px;
  --location-list-direction-btn-justify-content: center;
  --location-list-direction-btn-flex-flow: row;
  --location-list-direction-btn-background-color-hover: var(--primary-color);
  --location-list-direction-btn-color-hover: rgb(255, 255, 255);
  --location-list-direction-btn-box-shadow-hover: unset;
  --location-list-staff-btn-icon: url(/images/icons/staff-list.svg);
  --location-list-staff-btn-icon-size: 14px;
  --location-list-staff-btn-icon-margin: 0px 5px 0px 0px;
  --location-list-staff-btn-icon-display: inline;
  --location-list-staff-btn-background-color: rgb(234, 234, 234);
  --location-list-staff-btn-color: var(--primary-color);
  --location-list-staff-btn-margin: 0px 0px 0px 0px;
  --location-list-staff-btn-padding: 8px;
  --location-list-staff-btn-border-radius: 100px;
  --location-list-staff-btn-box-shadow: unset;
  --location-list-staff-btn-font: var(--main-font);
  --location-list-staff-btn-font-size: 14px;
  --location-list-staff-btn-weight: 600;
  --location-list-staff-btn-letter-spacing: 0px;
  --location-list-staff-btn-justify-content: center;
  --location-list-staff-btn-flex-flow: row;
  --location-list-staff-btn-background-color-hover: var(--primary-color);
  --location-list-staff-btn-color-hover: rgb(255, 255, 255);
  --location-list-staff-btn-box-shadow-hover: unset;
  --location-list-service-btn-icon: url(/images/icons/service-list.svg);
  --location-list-service-btn-icon-size: 14px;
  --location-list-service-btn-icon-margin: 0px 5px 0px 0px;
  --location-list-service-btn-icon-display: inline;
  --location-list-service-btn-background-color: rgb(234, 234, 234);
  --location-list-service-btn-color: var(--primary-color);
  --location-list-service-btn-margin: 0px 0px 0px 0px;
  --location-list-service-btn-padding: 8px;
  --location-list-service-btn-border-radius: 100px;
  --location-list-service-btn-box-shadow: unset;
  --location-list-service-btn-font: var(--main-font);
  --location-list-service-btn-font-size: 14px;
  --location-list-service-btn-weight: 600;
  --location-list-service-btn-letter-spacing: 0px;
  --location-list-service-btn-justify-content: center;
  --location-list-service-btn-flex-flow: row;
  --location-list-service-btn-background-color-hover: var(--primary-color);
  --location-list-service-btn-color-hover: rgb(255, 255, 255);
  --location-list-service-btn-box-shadow-hover: unset;
  --location-list-select-btn-icon: url(/images/icons/directions.svg);
  --location-list-select-btn-icon-size: 14px;
  --location-list-select-btn-icon-margin: 0px 5px 0px 0px;
  --location-list-select-btn-icon-display: inline;
  --location-list-select-btn-background-color: var(--primary-color);
  --location-list-select-btn-color: rgb(255, 255, 255);
  --location-list-select-btn-margin: 0px 0px 0px 0px;
  --location-list-select-btn-padding: 8px;
  --location-list-select-btn-border-radius: 100px;
  --location-list-select-btn-box-shadow: unset;
  --location-list-select-btn-font: var(--main-font);
  --location-list-select-btn-font-size: 14px;
  --location-list-select-btn-weight: 600;
  --location-list-select-btn-letter-spacing: 0px;
  --location-list-select-btn-justify-content: center;
  --location-list-select-btn-flex-flow: row;
  --location-list-select-btn-background-color-hover: var(--primary-color);
  --location-list-select-btn-color-hover: rgb(255, 255, 255);
  --location-list-select-btn-box-shadow-hover: unset;
  --location-list-email-color: rgb(15, 23, 42);
  --location-list-email-weight: 600;
  --location-list-email-font: var(--main-font);
  --location-list-email-font-size: 14px;
  --location-list-email-letter-spacing: 0px;
  --location-list-email-margin: 3px 0px 3px 0px;
  --location-list-phone-color: rgb(15, 23, 42);
  --location-list-phone-weight: 600;
  --location-list-phone-font: var(--main-font);
  --location-list-phone-font-size: 14px;
  --location-list-phone-letter-spacing: 0px;
  --location-list-phone-margin: 3px 0px 3px 0px;
  --location-list-times-full-container-margin: 15px 0px 10px 0px;
  --location-list-times-full-container-divider-size: 1px;
  --location-list-times-full-container-divider-style: solid;
  --location-list-times-full-container-divider-color: rgb(203, 213, 225);
  --location-list-times-full-container-padding: 6px 0px 6px 0px;
  --location-list-day-color: rgb(15, 23, 42);
  --location-list-day-weight: 600;
  --location-list-day-font: var(--main-font);
  --location-list-day-font-size: 14px;
  --location-list-day-letter-spacing: 0px;
  --location-list-day-margin: 5px 0px 5px 0px;
  --location-list-time-color: rgb(15, 23, 42);
  --location-list-time-weight: 600;
  --location-list-time-font: var(--main-font);
  --location-list-time-font-size: 14px;
  --location-list-time-letter-spacing: 0px;
  --grab-handle-color: rgb(204, 204, 204);
  --drawer-close-btn-icon-size: 18px;
  --drawer-close-btn-margin-margin: 0px 0px 0px 0px;
  --drawer-close-btn-display: inline;
  --drawer-close-btn-icon: url(/images/icons/close.svg);
  --drawer-close-btn-color: #000;
  --drawer-close-btn-color-focus: #000;
  --drawer-name-color: var(--location-list-name-color);
  --drawer-name-weight: var(--location-list-name-weight);
  --drawer-name-font: var(--location-list-name-font);
  --drawer-name-font-size: var(--location-list-name-font-size);
  --drawer-name-letter-spacing: var(--location-list-name-letter-spacing);
  --drawer-name-margin: var(--location-list-name-margin);
  --drawer-status-color: var(--location-list-status-color);
  --drawer-status-weight: var(--location-list-status-weight);
  --drawer-status-font: var(--location-list-status-font);
  --drawer-status-font-size: var(--location-list-status-font-size);
  --drawer-status-letter-spacing: var(--location-list-status-letter-spacing);
  --drawer-status-margin: var(--location-list-status-margin);
  --drawer-status-open-color: var(--location-list-status-open-color);
  --drawer-status-closed-color: var(--location-list-status-closed-color);
  --drawer-address-color: var(--location-list-address-color);
  --drawer-address-weight: var(--location-list-address-weight);
  --drawer-address-font: var(--location-list-address-font);
  --drawer-address-font-size: var(--location-list-address-font-size);
  --drawer-address-letter-spacing: var(--location-list-address-letter-spacing);
  --drawer-address-margin: var(--location-list-address-margin);
  --drawer-email-color: var(--location-list-email-color);
  --drawer-email-weight: var(--location-list-email-weight);
  --drawer-email-font: var(--location-list-email-font);
  --drawer-email-font-size: var(--location-list-email-font-size);
  --drawer-email-letter-spacing: var(--location-list-email-letter-spacing);
  --drawer-email-margin: var(--location-list-email-margin);
  --drawer-phone-color: var(--location-list-phone-color);
  --drawer-phone-weight: var(--location-list-phone-weight);
  --drawer-phone-font: var(--location-list-phone-font);
  --drawer-phone-font-size: var(--location-list-phone-font-size);
  --drawer-phone-letter-spacing: var(--location-list-phone-letter-spacing);
  --drawer-phone-margin: var(--location-list-phone-margin);
  --drawer-options-padding: var(--location-list-options-padding);
  --drawer-direction-btn-icon: url(/images/icons/directions.svg);
  --drawer-direction-btn-icon-size: 14px;
  --drawer-direction-btn-icon-margin: 0px 5px 0px 0px;
  --drawer-direction-btn-icon-display: inline;
  --drawer-direction-btn-background-color: var(--primary-color);
  --drawer-direction-btn-color: rgb(255, 255, 255);
  --drawer-direction-btn-margin: 0px 0px 0px 0px;
  --drawer-direction-btn-padding: 8px;
  --drawer-direction-btn-border-radius: 100px;
  --drawer-direction-btn-box-shadow: unset;
  --drawer-direction-btn-font: var(--main-font);
  --drawer-direction-btn-font-size: 14px;
  --drawer-direction-btn-weight: 600;
  --drawer-direction-btn-letter-spacing: 0px;
  --drawer-direction-btn-justify-content: center;
  --drawer-direction-btn-flex-flow: row;
  --drawer-direction-btn-background-color-hover: var(--primary-color);
  --drawer-direction-btn-color-hover: rgb(255, 255, 255);
  --drawer-direction-btn-box-shadow-hover: unset;
  --drawer-staff-btn-icon: url(/images/icons/staff-list.svg);
  --drawer-staff-btn-icon-size: 14px;
  --drawer-staff-btn-icon-margin: 0px 5px 0px 0px;
  --drawer-staff-btn-icon-display: inline;
  --drawer-staff-btn-background-color: rgb(234, 234, 234);
  --drawer-staff-btn-color: var(--primary-color);
  --drawer-staff-btn-margin: 0px 0px 0px 0px;
  --drawer-staff-btn-padding: 8px;
  --drawer-staff-btn-border-radius: 100px;
  --drawer-staff-btn-box-shadow: unset;
  --drawer-staff-btn-font: var(--main-font);
  --drawer-staff-btn-font-size: 14px;
  --drawer-staff-btn-weight: 600;
  --drawer-staff-btn-letter-spacing: 0px;
  --drawer-staff-btn-justify-content: center;
  --drawer-staff-btn-flex-flow: row;
  --drawer-staff-btn-background-color-hover: var(--primary-color);
  --drawer-staff-btn-color-hover: rgb(255, 255, 255);
  --drawer-staff-btn-box-shadow-hover: unset;
  --drawer-service-btn-icon: url(/images/icons/service-list.svg);
  --drawer-service-btn-icon-size: 14px;
  --drawer-service-btn-icon-margin: 0px 5px 0px 0px;
  --drawer-service-btn-icon-display: inline;
  --drawer-service-btn-background-color: rgb(234, 234, 234);
  --drawer-service-btn-color: var(--primary-color);
  --drawer-service-btn-margin: 0px 0px 0px 0px;
  --drawer-service-btn-padding: 8px;
  --drawer-service-btn-border-radius: 100px;
  --drawer-service-btn-box-shadow: unset;
  --drawer-service-btn-font: var(--main-font);
  --drawer-service-btn-font-size: 14px;
  --drawer-service-btn-weight: 600;
  --drawer-service-btn-letter-spacing: 0px;
  --drawer-service-btn-justify-content: center;
  --drawer-service-btn-flex-flow: row;
  --drawer-service-btn-background-color-hover: var(--primary-color);
  --drawer-service-btn-color-hover: rgb(255, 255, 255);
  --drawer-service-btn-box-shadow-hover: unset;
  --drawer-select-btn-icon: url(/images/icons/directions.svg);
  --drawer-select-btn-icon-size: 14px;
  --drawer-select-btn-icon-margin: 0px 5px 0px 0px;
  --drawer-select-btn-icon-display: inline;
  --drawer-select-btn-background-color: var(--primary-color);
  --drawer-select-btn-color: rgb(255, 255, 255);
  --drawer-select-btn-margin: 0px 0px 0px 0px;
  --drawer-select-btn-padding: 8px;
  --drawer-select-btn-border-radius: 100px;
  --drawer-select-btn-box-shadow: unset;
  --drawer-select-btn-font: var(--main-font);
  --drawer-select-btn-font-size: 14px;
  --drawer-select-btn-weight: 600;
  --drawer-select-btn-letter-spacing: 0px;
  --drawer-select-btn-justify-content: center;
  --drawer-select-btn-flex-flow: row;
  --drawer-select-btn-background-color-hover: var(--primary-color);
  --drawer-select-btn-color-hover: rgb(255, 255, 255);
  --drawer-select-btn-box-shadow-hover: unset;
}

.--map-marker {
  align-items: center;
  background-color: #fff;
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.75));
  border-radius: 50%;
  color: #263238;
  display: flex;
  font-size: 14px;
  gap: 15px;
  height: 22px;
  justify-content: center;
  padding: 4px;
  position: relative;
  transition: all 0.3s ease-out;
  width: 22px;
}
.--map-marker::after {
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  top: 59%;
  transform: translate(-50%, 0) rotate(45deg);
  transition: all 0.3s ease-out;
  height: 15px;
  width: 15px;
  background: #fff;
  border-radius: 3px;
  z-index: -1;
}
.--map-marker > div {
  padding: 3px;
  background: var(--primary-color);
  border-radius: 100%;
}
.--map-marker .icon {
  --icon-color: #fff;
  --width: 18px;
  --height: 18px;
}

.--map-loading-container {
  position: relative;
  width: 100%;
}

.--map-loading {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgb(231, 231, 231);
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  font: 600 16px Arial, sans-serif;
  color: #111111;
  z-index: 4;
}

.--map-search-container {
  display: flex;
  flex-flow: column;
  border-right: 1px solid var(--nav-bar-border-bottom-color);
  max-width: 400px;
  height: 100%;
  width: 100%;
}

.--map-container {
  height: 100%;
  display: flex;
  overflow: hidden;
}

.--locate-a-store-input-container {
  background: var(--locate-a-store-input-container-background-color);
  padding: var(--locate-a-store-input-container-padding);
}

.--locate-a-store-label {
  color: var(--locate-a-store-label-color);
  font: var(--locate-a-store-label-weight) var(--locate-a-store-label-font-size) var(--locate-a-store-label-font);
}

.--locate-a-store-input-wrapper {
  position: relative;
}

.--locate-a-store-icon {
  display: var(--locate-a-store-display);
  --icon-size: var(--locate-a-store-icon-size);
  --icon-url: var(--locate-a-store-icon);
  --icon-color: var(--locate-a-store-input-color);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: var(--locate-a-store-icon-margin);
  right: var(--locate-a-store-icon-right);
}
.--locate-a-store-icon:hover {
  --icon-color: var(--locate-a-store-input-color-focus);
}

.--locate-a-store-input {
  background: var(--locate-a-store-input-background-color);
  border-radius: var(--locate-a-store-input-border-radius);
  border: 0;
  box-shadow: var(--locate-a-store-input-box-shadow);
  box-sizing: border-box;
  color: var(--locate-a-store-input-color);
  font: var(--locate-a-store-input-weight) var(--locate-a-store-input-font-size) var(--locate-a-store-input-font);
  letter-spacing: var(--locate-a-store-input-spacing);
  margin: var(--locate-a-store-input-margin);
  padding: var(--locate-a-store-input-padding);
  outline: 0 !important;
  transition: var(--locate-a-store-input-transition);
  width: 100%;
}
.--locate-a-store-input:focus-within, .--locate-a-store-input.focus-state {
  color: var(--locate-a-store-input-color-focus);
  box-shadow: var(--locate-a-store-input-border-focus);
  background: var(--locate-a-store-input-background-color-focus);
}
.--locate-a-store-input:focus-within::-moz-placeholder, .--locate-a-store-input.focus-state::-moz-placeholder {
  color: var(--locate-a-store-input-color-placeholder-focus);
}
.--locate-a-store-input:focus-within::placeholder, .--locate-a-store-input.focus-state::placeholder {
  color: var(--locate-a-store-input-color-placeholder-focus);
}
.--locate-a-store-input::-moz-placeholder {
  color: var(--locate-a-store-input-placeholder-color);
}
.--locate-a-store-input::placeholder {
  color: var(--locate-a-store-input-placeholder-color);
}

.--use-current-location-btn {
  display: flex;
  align-items: center;
  justify-content: var(--use-current-location-btn-justify-content);
  flex-flow: var(--use-current-location-btn-flex-flow);
  box-shadow: var(--use-current-location-btn-box-shadow);
  background-color: var(--use-current-location-btn-background-color);
  color: var(--use-current-location-btn-color);
  margin: var(--use-current-location-btn-margin);
  padding: var(--use-current-location-btn-padding);
  border-radius: var(--use-current-location-btn-border-radius);
  font: var(--use-current-location-btn-weight) var(--use-current-location-btn-font-size) var(--use-current-location-btn-font);
  letter-spacing: var(--use-current-location-btn-letter-spacing);
  width: 100%;
}
.--use-current-location-btn:hover {
  background-color: var(--use-current-location-btn-background-color-hover);
  color: var(--use-current-location-btn-color-hover);
  box-shadow: var(--use-current-location-btn-box-shadow);
}

.--use-current-location-btn-icon {
  display: var(--use-current-location-btn-icon-display);
  --icon-size: var(--use-current-location-btn-icon-size);
  --icon-url: var(--use-current-location-btn-icon);
  --icon-color: var(--use-current-location-btn-color);
  margin: var(--use-current-location-btn-icon-margin);
}
.--use-current-location-btn-icon:hover {
  --icon-color: var(--use-current-location-btn-color-hover);
}

.--address-autocomplete-list {
  background: var(--address-autocomplete-list-background);
  border-radius: var(--address-autocomplete-list-border-radius);
  box-shadow: var(--address-autocomplete-list-box-shadow);
  box-sizing: border-box;
  overflow: hidden;
  position: absolute;
  list-style: none;
  width: 100%;
  z-index: 2;
}
.--address-autocomplete-list li {
  border-bottom: var(--address-autocomplete-suggestion-divider-size) var(--address-autocomplete-suggestion-divider-style);
  border-color: var(--address-autocomplete-suggestion-divider-color);
}
.--address-autocomplete-list li:last-child {
  border-bottom: none;
}

.--address-autocomplete-suggestion {
  color: var(--address-autocomplete-suggestion-color);
  font: var(--address-autocomplete-suggestion-weight) var(--address-autocomplete-suggestion-font-size) var(--address-autocomplete-suggestion-font);
  letter-spacing: var(--address-autocomplete-suggestion-letter-spacing);
  padding: var(--address-autocomplete-suggestion-padding);
  text-align: start;
  width: 100%;
}
.--address-autocomplete-suggestion:hover {
  background: var(--address-autocomplete-suggestion-background-hover);
}

.--locate-a-store-list {
  overflow-y: auto;
}

.--locate-a-store-list-item {
  background: var(--locate-a-store-list-item-background);
  padding: var(--locate-a-store-list-item-padding);
  border-bottom: var(--address-autocomplete-suggestion-divider-size) var(--address-autocomplete-suggestion-divider-style);
  border-color: var(--address-autocomplete-suggestion-divider-color);
}
.--locate-a-store-list-item.--blur {
  opacity: 0.5;
}
.--locate-a-store-list-item:hover {
  background: var(--locate-a-store-list-item-background-hover);
}
.--locate-a-store-list-item.--selected {
  box-shadow: var(--locate-a-store-list-item-border-selected);
  border-radius: 4px;
}

.--location-list-top-container {
  padding: var(--location-list-top-container-padding);
}

.--location-list-name {
  color: var(--location-list-name-color);
  font: var(--location-list-name-weight) var(--location-list-name-font-size) var(--location-list-name-font);
  letter-spacing: var(--location-list-name-letter-spacing);
  margin: var(--location-list-name-margin);
}

.--location-list-status-container {
  align-items: center;
  display: flex;
  gap: 5px;
}

.--location-list-status {
  align-items: center;
  display: flex;
  justify-content: space-between;
  color: var(--location-list-status-color);
  font: var(--location-list-status-weight) var(--location-list-status-font-size) var(--location-list-status-font);
  letter-spacing: var(--location-list-status-letter-spacing);
  margin: var(--location-list-status-margin);
}

.--location-list-status-open {
  color: var(--location-list-status-open-color);
}

.--location-list-status-closed {
  color: var(--location-list-status-closed-color);
}

.--location-list-address {
  color: var(--location-list-address-color);
  font: var(--location-list-address-weight) var(--location-list-address-font-size) var(--location-list-address-font);
  letter-spacing: var(--location-list-address-letter-spacing);
  margin: var(--location-list-address-margin);
}

.--location-list-distance {
  color: var(--location-list-distance-color);
  font: var(--location-list-distance-weight) var(--location-list-distance-font-size) var(--location-list-distance-font);
  letter-spacing: var(--location-list-distance-letter-spacing);
  margin: var(--location-list-distance-margin);
  text-align: var(--location-list-distance-text-align);
}

.--location-list-options {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: var(--location-list-options-padding);
}

.--location-list-direction-btn {
  display: flex;
  align-items: center;
  justify-content: var(--location-list-direction-btn-justify-content);
  flex-flow: var(--location-list-direction-btn-flex-flow);
  box-shadow: var(--location-list-direction-btn-box-shadow);
  background-color: var(--location-list-direction-btn-background-color);
  color: var(--location-list-direction-btn-color);
  margin: var(--location-list-direction-btn-margin);
  padding: var(--location-list-direction-btn-padding);
  border-radius: var(--location-list-direction-btn-border-radius);
  font: var(--location-list-direction-btn-weight) var(--location-list-direction-btn-font-size) var(--location-list-direction-btn-font);
  letter-spacing: var(--location-list-direction-btn-letter-spacing);
  width: 100%;
  --icon-color: var(--location-list-direction-btn-color);
}
.--location-list-direction-btn:hover {
  background-color: var(--location-list-direction-btn-background-color-hover);
  color: var(--location-list-direction-btn-color-hover);
  box-shadow: var(--location-list-direction-btn-box-shadow);
  --icon-color: var(--location-list-direction-btn-color-hover);
}
.--location-list-direction-btn-icon {
  display: var(--location-list-direction-btn-icon-display);
  --icon-size: var(--location-list-direction-btn-icon-size);
  --icon-url: var(--location-list-direction-btn-icon);
  margin: var(--location-list-direction-btn-icon-margin);
}

.--location-list-service-btn {
  display: flex;
  align-items: center;
  justify-content: var(--location-list-service-btn-justify-content);
  flex-flow: var(--location-list-service-btn-flex-flow);
  box-shadow: var(--location-list-service-btn-box-shadow);
  background-color: var(--location-list-service-btn-background-color);
  color: var(--location-list-service-btn-color);
  margin: var(--location-list-service-btn-margin);
  padding: var(--location-list-service-btn-padding);
  border-radius: var(--location-list-service-btn-border-radius);
  font: var(--location-list-service-btn-weight) var(--location-list-service-btn-font-size) var(--location-list-service-btn-font);
  letter-spacing: var(--location-list-service-btn-letter-spacing);
  width: 100%;
  --icon-color: var(--location-list-service-btn-color);
}
.--location-list-service-btn:hover {
  background-color: var(--location-list-service-btn-background-color-hover);
  color: var(--location-list-service-btn-color-hover);
  box-shadow: var(--location-list-service-btn-box-shadow);
  --icon-color: var(--location-list-service-btn-color-hover);
}
.--location-list-service-btn-icon {
  display: var(--location-list-service-btn-icon-display);
  --icon-size: var(--location-list-service-btn-icon-size);
  --icon-url: var(--location-list-service-btn-icon);
  margin: var(--location-list-service-btn-icon-margin);
}

.--location-list-staff-btn {
  display: flex;
  align-items: center;
  justify-content: var(--location-list-staff-btn-justify-content);
  flex-flow: var(--location-list-staff-btn-flex-flow);
  box-shadow: var(--location-list-staff-btn-box-shadow);
  background-color: var(--location-list-staff-btn-background-color);
  color: var(--location-list-staff-btn-color);
  margin: var(--location-list-staff-btn-margin);
  padding: var(--location-list-staff-btn-padding);
  border-radius: var(--location-list-staff-btn-border-radius);
  font: var(--location-list-staff-btn-weight) var(--location-list-staff-btn-font-size) var(--location-list-staff-btn-font);
  letter-spacing: var(--location-list-staff-btn-letter-spacing);
  width: 100%;
  --icon-color: var(--location-list-staff-btn-color);
}
.--location-list-staff-btn:hover {
  background-color: var(--location-list-staff-btn-background-color-hover);
  color: var(--location-list-staff-btn-color-hover);
  box-shadow: var(--location-list-staff-btn-box-shadow);
  --icon-color: var(--location-list-staff-btn-color-hover);
}
.--location-list-staff-btn-icon {
  display: var(--location-list-staff-btn-icon-display);
  --icon-size: var(--location-list-staff-btn-icon-size);
  --icon-url: var(--location-list-staff-btn-icon);
  margin: var(--location-list-staff-btn-icon-margin);
}

.--location-list-select-btn {
  display: flex;
  align-items: center;
  justify-content: var(--location-list-select-btn-justify-content);
  flex-flow: var(--location-list-select-btn-flex-flow);
  box-shadow: var(--location-list-select-btn-box-shadow);
  background-color: var(--location-list-select-btn-background-color);
  color: var(--location-list-select-btn-color);
  margin: var(--location-list-select-btn-margin);
  padding: var(--location-list-select-btn-padding);
  border-radius: var(--location-list-select-btn-border-radius);
  font: var(--location-list-select-btn-weight) var(--location-list-select-btn-font-size) var(--location-list-select-btn-font);
  letter-spacing: var(--location-list-select-btn-letter-spacing);
  width: 100%;
}
.--location-list-select-btn:hover {
  background-color: var(--location-list-select-btn-background-color-hover);
  color: var(--location-list-select-btn-color-hover);
  box-shadow: var(--location-list-select-btn-box-shadow);
}

.--location-list-email {
  color: var(--location-list-email-color);
  display: block;
  font: var(--location-list-email-weight) var(--location-list-email-font-size) var(--location-list-email-font);
  letter-spacing: var(--location-list-email-letter-spacing);
  margin: var(--location-list-email-margin);
}

.--location-list-phone {
  color: var(--location-list-phone-color);
  display: block;
  font: var(--location-list-phone-weight) var(--location-list-phone-font-size) var(--location-list-phone-font);
  letter-spacing: var(--location-list-phone-letter-spacing);
  margin: var(--location-list-phone-margin);
}

.--location-list-times-full-container {
  border-top: var(--location-list-times-full-container-divider-size) var(--location-list-times-full-container-divider-style);
  border-bottom: var(--location-list-times-full-container-divider-size) var(--location-list-times-full-container-divider-style);
  border-color: var(--location-list-times-full-container-divider-color);
  margin: var(--location-list-times-full-container-margin);
  padding: var(--location-list-times-full-container-padding);
}

.--location-list-times-container {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: var(--location-list-day-margin);
}

.--location-list-day {
  text-transform: capitalize;
  color: var(--location-list-day-color);
  font: var(--location-list-day-weight) var(--location-list-day-font-size) var(--location-list-day-font);
  letter-spacing: var(--location-list-day-spacing);
}

.--location-list-time {
  text-transform: capitalize;
  color: var(--location-list-time-color);
  font: var(--location-list-time-weight) var(--location-list-time-font-size) var(--location-list-time-font);
  letter-spacing: var(--location-list-time-spacing);
}

.--drawer {
  display: none;
  position: fixed;
  top: 100%;
  left: 0;
  right: 0;
  min-height: 530px;
  background: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
  padding: 0px 10px;
  z-index: 5;
}
.--drawer-images-container {
  display: flex;
  gap: 10px;
  width: 100%;
  overflow: auto;
  margin: 10px 0px 0px 10px;
}
.--drawer-images-container img {
  border-radius: 4px;
}
.--drawer-header-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2px;
}
.--drawer-name {
  color: var(--drawer-name-color);
  font: var(--drawer-name-weight) var(--drawer-name-font-size) var(--drawer-name-font);
  letter-spacing: var(--drawer-name-letter-spacing);
  margin: var(--locatdrawer-name-margin);
}
.--drawer-address {
  color: var(--drawer-address-color);
  font: var(--drawer-address-weight) var(--drawer-address-font-size) var(--drawer-address-font);
  letter-spacing: var(--drawer-address-letter-spacing);
  margin: var(--drawer-address-margin);
}
.--drawer-email {
  color: var(--drawer-email-color);
  display: block;
  font: var(--drawer-email-weight) var(--drawer-email-font-size) var(--drawer-email-font);
  letter-spacing: var(--drawer-email-letter-spacing);
  margin: var(--drawer-email-margin);
}
.--drawer-list-options {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: var(--drawer-options-padding);
}
.--drawer-phone {
  color: var(--drawer-phone-color);
  display: block;
  font: var(--drawer-phone-weight) var(--drawer-phone-font-size) var(--drawer-phone-font);
  letter-spacing: var(--drawer-phone-letter-spacing);
  margin: var(--drawer-phone-margin);
}
.--drawer-status-container {
  align-items: center;
  display: flex;
  gap: 5px;
}
.--drawer-options {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: var(--drawer-options-padding);
}
.--drawer-status {
  align-items: center;
  display: flex;
  justify-content: space-between;
  color: var(--drawer-status-color);
  font: var(--drawer-status-weight) var(--drawer-status-font-size) var(--drawer-status-font);
  letter-spacing: var(--drawer-status-letter-spacing);
  margin: var(--drawer-status-margin);
}
.--drawer-status-open {
  color: var(--drawer-status-open-color);
}
.--drawer-status-closed {
  color: var(--drawer-status-closed-color);
}
.--drawer-close-btn {
  display: var(--drawer-close-btn-display);
  --icon-size: var(--drawer-close-btn-icon-size);
  --icon-url: var(--drawer-close-btn-icon);
  --icon-color: var(--drawer-close-btn-color);
  margin: var(--drawer-close-btn-margin);
}
.--drawer-close-btn::before {
  width: var(--drawer-close-btn-icon-size);
  height: var(--drawer-close-btn-icon-size);
}
.--drawer-close-btn:hover {
  --icon-color: var(--drawer-close-btn-color-focus);
}
.--drawer-direction-btn {
  display: flex;
  align-items: center;
  justify-content: var(--drawer-direction-btn-justify-content);
  flex-flow: var(--drawer-direction-btn-flex-flow);
  box-shadow: var(--drawer-direction-btn-box-shadow);
  background-color: var(--drawer-direction-btn-background-color);
  color: var(--drawer-direction-btn-color);
  margin: var(--drawer-direction-btn-margin);
  padding: var(--drawer-direction-btn-padding);
  border-radius: var(--drawer-direction-btn-border-radius);
  font: var(--drawer-direction-btn-weight) var(--drawer-direction-btn-font-size) var(--drawer-direction-btn-font);
  letter-spacing: var(--drawer-direction-btn-letter-spacing);
  width: 100%;
  --icon-color: var(--drawer-direction-btn-color);
}
.--drawer-direction-btn:hover {
  background-color: var(--drawer-direction-btn-background-color-hover);
  color: var(--drawer-direction-btn-color-hover);
  box-shadow: var(--drawer-direction-btn-box-shadow);
  --icon-color: var(--drawer-direction-btn-color-hover);
}
.--drawer-direction-btn-icon {
  display: var(--drawer-direction-btn-icon-display);
  --icon-size: var(--drawer-direction-btn-icon-size);
  --icon-url: var(--drawer-direction-btn-icon);
  margin: var(--drawer-direction-btn-icon-margin);
  width: var(--drawer-direction-btn-icon-size);
  height: var(--drawer-direction-btn-icon-size);
}
.--drawer-service-btn {
  display: flex;
  align-items: center;
  justify-content: var(--drawer-service-btn-justify-content);
  flex-flow: var(--drawer-service-btn-flex-flow);
  box-shadow: var(--drawer-service-btn-box-shadow);
  background-color: var(--drawer-service-btn-background-color);
  color: var(--drawer-service-btn-color);
  margin: var(--drawer-service-btn-margin);
  padding: var(--drawer-service-btn-padding);
  border-radius: var(--drawer-service-btn-border-radius);
  font: var(--drawer-service-btn-weight) var(--drawer-service-btn-font-size) var(--drawer-service-btn-font);
  letter-spacing: var(--drawer-service-btn-letter-spacing);
  width: 100%;
  --icon-color: var(--drawer-service-btn-color);
}
.--drawer-service-btn:hover {
  background-color: var(--drawer-service-btn-background-color-hover);
  color: var(--drawer-service-btn-color-hover);
  box-shadow: var(--drawer-service-btn-box-shadow);
  --icon-color: var(--drawer-service-btn-color-hover);
}
.--drawer-service-btn-icon {
  display: var(--drawer-service-btn-icon-display);
  --icon-size: var(--drawer-service-btn-icon-size);
  --icon-url: var(--drawer-service-btn-icon);
  margin: var(--drawer-service-btn-icon-margin);
  height: var(--drawer-service-btn-icon-size);
  margin: var(--drawer-service-btn-icon-margin);
}
.--drawer-staff-btn {
  display: flex;
  align-items: center;
  justify-content: var(--drawer-staff-btn-justify-content);
  flex-flow: var(--drawer-staff-btn-flex-flow);
  box-shadow: var(--drawer-staff-btn-box-shadow);
  background-color: var(--drawer-staff-btn-background-color);
  color: var(--drawer-staff-btn-color);
  margin: var(--drawer-staff-btn-margin);
  padding: var(--drawer-staff-btn-padding);
  border-radius: var(--drawer-staff-btn-border-radius);
  font: var(--drawer-staff-btn-weight) var(--drawer-staff-btn-font-size) var(--drawer-staff-btn-font);
  letter-spacing: var(--drawer-staff-btn-letter-spacing);
  width: 100%;
  --icon-color: var(--drawer-staff-btn-color);
}
.--drawer-staff-btn:hover {
  background-color: var(--drawer-staff-btn-background-color-hover);
  color: var(--drawer-staff-btn-color-hover);
  box-shadow: var(--drawer-staff-btn-box-shadow);
  --icon-color: var(--drawer-staff-btn-color-hover);
}
.--drawer-staff-btn-icon {
  display: var(--drawer-staff-btn-icon-display);
  --icon-size: var(--drawer-staff-btn-icon-size);
  --icon-url: var(--drawer-staff-btn-icon);
  width: var(--drawer-staff-btn-icon-size);
  height: var(--drawer-staff-btn-icon-size);
  margin: var(--drawer-staff-btn-icon-margin);
}
.--drawer-select-btn {
  display: flex;
  align-items: center;
  justify-content: var(--drawer-select-btn-justify-content);
  flex-flow: var(--drawer-select-btn-flex-flow);
  box-shadow: var(--drawer-select-btn-box-shadow);
  background-color: var(--drawer-select-btn-background-color);
  color: var(--drawer-select-btn-color);
  margin: var(--drawer-select-btn-margin);
  padding: var(--drawer-select-btn-padding);
  border-radius: var(--drawer-select-btn-border-radius);
  font: var(--drawer-select-btn-weight) var(--drawer-select-btn-font-size) var(--drawer-select-btn-font);
  letter-spacing: var(--drawer-select-btn-letter-spacing);
  width: 100%;
}
.--drawer-select-btn:hover {
  background-color: var(--drawer-select-btn-background-color-hover);
  color: var(--drawer-select-btn-color-hover);
  box-shadow: var(--drawer-select-btn-box-shadow);
}

.--grab-handle-padding {
  padding: 10px 10px 15px 10px;
}

.--grab-handle {
  width: 50px;
  height: 5px;
  background: var(--grab-handle-color);
  border-radius: 10px;
  display: flex;
  margin: 0px auto;
}

.--map-pop-up img {
  border-radius: 4px;
  width: 180px;
}
.--map-pop-up-img-container {
  min-width: 230px;
  aspect-ratio: 16/9;
  flex-shrink: 0;
  background: var(--background);
  background-size: cover;
  background-position: center;
  margin-right: 10px;
}
.--map-pop-up-header {
  font: 600 16px var(--main-font);
  margin-bottom: 10px;
  padding-right: 25px;
}
.--map-pop-up-address {
  font: 400 14px var(--main-font);
}
.--map-pop-up-phone {
  font: 600 14px var(--main-font);
  display: block;
  margin: 8px 0px;
}
.--map-pop-up-select {
  font: 500 14px var(--main-font);
  color: #fff;
  background: rgb(6, 6, 54);
  padding: 5px;
  border-radius: 4px;
}
.--map-pop-up-select:hover {
  color: rgb(6, 6, 54);
  background: var(--color-gray-200);
}
.--map-pop-up .maplibregl-popup-content {
  padding: 25px 25px 30px 25px;
  box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.3), 0px 5px 6px 2px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.--map-pop-up .maplibregl-popup-close-button {
  position: absolute;
  top: 26px;
  right: 25px;
  text-indent: -9999px;
  height: 18px;
}
.--map-pop-up .maplibregl-popup-close-button:hover {
  background-color: #fff;
}
.--map-pop-up .maplibregl-popup-close-button::after {
  content: "";
  -webkit-mask-image: url(/images/icons/close.svg);
  mask-image: url(/images/icons/close.svg);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: #000;
  width: 20px;
  height: 20px;
  display: block;
  top: -20px;
  position: relative;
}

.--map-info-holder {
  display: flex;
}

@media (max-width: 770px) {
  .--form {
    min-height: 100dvh;
  }
  .--main-container:not(.--form-container) {
    height: unset;
    min-height: 100dvh;
  }
  .--locate-a-store-input-container {
    padding: var(--locate-a-store-input-container-padding-sm);
  }
  .--map-loading-container {
    position: relative;
    width: 100%;
    flex-shrink: 1;
  }
  .--map-container {
    flex-flow: column-reverse;
  }
  .--map-search-container {
    border-right: unset;
    max-width: 100%;
    height: 345px;
  }
  .maplibregl-map .maplibregl-popup {
    display: none;
  }
  .--drawer {
    display: block;
  }
}
body {
  --font: 50px;
  --location-name-color: #212529;
  --location-name-weight: 600;
  --location-name-font: var(--main-font);
  --location-name-font-size: 36px;
  --location-name-spacing: 0px;
  --location-name-margin: 10px 0px 0px 0px;
  --location-address-color: #565D6B;
  --location-address-weight: 500;
  --location-address-font: var(--main-font);
  --location-address-font-size: 18px;
  --location-address-spacing: 0px;
  --location-address-margin: 0px 0px 0px 0px;
  --location-status-color: #212529;
  --location-status-weight: 500;
  --location-status-font: var(--main-font);
  --location-status-font-size: 16px;
  --location-status-spacing: 0px;
  --location-status-margin: 5px 0px 3px 0px;
  --location-status-open-color: green;
  --location-status-closed-color: red;
  --location-status-seperator-font-size: 10px;
  --location-reviews-margin: 10px 0px 0px 0px;
  --location-reviews-gap: 12px;
  --location-reviews-rating-color: rgb(240 177 0);
  --location-reviews-rating-weight: 600;
  --location-reviews-rating-font: var(--main-font);
  --location-reviews-rating-font-size: 26px;
  --location-reviews-rating-spacing: 0px;
  --location-reviews-rating-margin: 2px 0px 0px 0px;
  --location-reviews-amount-color: var(--primary-color);
  --location-reviews-amount-weight: 600;
  --location-reviews-amount-font: var(--main-font);
  --location-reviews-amount-font-size: 16px;
  --location-reviews-amount-spacing: 0px;
  --location-reviews-amount-margin: 0px 0px 0px 0px;
  --star-ratings-base-color: rgb(255, 240, 133);
  --star-ratings-fill-color: rgb(253, 199, 0);
  --star-ratings-big-size: 24px;
  --book-btn-background-color: var(--primary-color);
  --book-btn-background-color-hover: var(--primary-color);
  --book-btn-border-radius: 4px;
  --book-btn-color: #fff;
  --book-btn-color-hover: #fff;
  --book-btn-font-size: 14px;
  --book-btn-font: var(--main-font);
  --book-btn-padding: 10px 15px 10px 15px;
  --book-btn-weight: 600;
  --book-btn-box-shadow: 0px 0px 0px 1px rgb(60, 60, 215), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --book-btn-box-shadow-disabled: 0px 0px 0px 1px rgba(60, 60, 215, 0.25);
  --book-btn-box-shadow-hover: 0px 0px 0px 1px rgb(60, 60, 215), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --book-btn-background-color-active: #47c184;
  --book-btn-box-shadow-active: 0px 0px 0px 1px #31a36a, 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --book-btn-color-active: #fff;
  --section-margin: 50px 0px 0px 0px;
  --section-padding: 10px;
  --section-header-color: #212529;
  --section-header-weight: 600;
  --section-header-font: var(--main-font);
  --section-header-font-size: 22px;
  --section-header-spacing: 0px;
  --section-header-margin: 0px 0px 0px 0px;
  --popular-service-name-color: #21259;
  --popular-service-name-weight: 600;
  --popular-service-name-font: var(--main-font);
  --popular-service-name-font-size: 16px;
  --popular-service-name-spacing: 0px;
  --popular-service-name-margin: 0px 0px 0px 0px;
  --popular-service-info-btn-icon: url(/images/icons/info-outline.svg);
  --popular-service-info-btn-color: var(--primary-color);
  --popular-service-info-btn-color-focus: var(--popular-service-info-btn-color);
  --popular-service-info-btn-icon-size: 18px;
  --popular-service-info-btn-margin: 0px;
  --categories-width: 30%;
  --service-category-color: #212529;
  --service-category-padding: 10px;
  --service-category-border-radius: 4px;
  --service-category-letter-spacing: 0px;
  --service-category-margin: 10px 0px 0px 0px;
  --service-category-box-shadow: 0px 0px 0px 1px var(--color-gray-200);
  --service-category-weight: 600;
  --service-category-font-size: 16px;
  --service-category-font: var(--main-font);
  --service-category-background-hover: rgb(255, 255, 255);
  --service-category-color-hover: #212529;
  --service-category-box-shadow-hover: 0px 0px 0px 1px var(--color-gray-200);
  --service-category-background-selected: var(--primary-color);
  --service-category-color-selected: var(--main-color-contrast);
  --service-category-box-shadow-selected: unset;
  --service-category-icon: url(/images/icons/chevron-right.svg);
  --service-category-icon-color: rgba(0, 0, 0, 0);
  --service-category-icon-size: 24px;
  --service-category-icon-margin: 0px;
  --service-category-icon-color-hover: rgb(240, 240, 240);
  --service-category-icon-color-selected: rgb(255, 255, 255);
  --staff-member-name-color: #212529;
  --staff-member-name-weight: 600;
  --staff-member-name-font: var(--main-font);
  --staff-member-name-font-size: 16px;
  --staff-member-name-spacing: 0px;
  --staff-member-name-margin: 0px 0px 0px 0px;
  --staff-member-role-color: #565D6B;
  --staff-member-role-weight: 500;
  --staff-member-role-font: var(--main-font);
  --staff-member-role-font-size: 16px;
  --staff-member-role-spacing: 0px;
  --staff-member-role-margin: 0px 0px 0px 0px;
  --staff-avatar-border-radius: 100%;
  --staff-services-list-header-color: #212529;
  --staff-services-list-header-weight: 600;
  --staff-services-list-header-font: var(--main-font);
  --staff-services-list-header-font-size: 16px;
  --staff-services-list-header-spacing: 0px;
  --staff-services-list-header-margin: 0px 0px 10px 0px;
  --staff-services-list-pill-color: rgb(25, 25, 127);
  --staff-services-list-pill-weight: 600;
  --staff-services-list-pill-font: var(--main-font);
  --staff-services-list-pill-font-size: 14px;
  --staff-services-list-pill-spacing: 0px;
  --staff-services-list-pill-margin: 0px 0px 10px 0px;
  --staff-services-list-pill-padding: 5px 10px;
  --staff-services-list-pill-border-radius: 100px;
  --staff-services-list-pill-background: rgb(85 85 221 / 30%);
  --staff-services-list-pill-box-shadow: 0px 0px 0px 1px rgb(85 85 221 / 100%);
  --reviews-section-width: 740px;
  --reviews-section-divider-size: 1px;
  --reviews-section-divider-style: solid;
  --reviews-section-divider-color: rgb(228, 230, 233);
  --reviews-section-padding: 30px 0px 0px 0px;
  --reviews-section-margin: 30px 0px 0px 0px;
  --review-author-color: #212529;
  --review-author-weight: 600;
  --review-author-font: var(--main-font);
  --review-author-font-size: 16px;
  --review-author-spacing: 0px;
  --review-author-margin: 0px 0px 0px 0px;
  --review-left-date-color: rgb(107, 117, 133);
  --review-left-date-weight: 400;
  --review-left-date-font: var(--main-font);
  --review-left-date-font-size: 14px;
  --review-left-date-spacing: 0px;
  --review-left-date-margin: 0px 0px 0px 0px;
  --review-message-color: #212529;
  --review-message-weight: 400;
  --review-message-font: var(--main-font);
  --review-message-font-size: 15px;
  --review-message-line-height: 26px;
  --review-message-spacing: 0px;
  --review-message-margin: 5px 0px 0px 0px;
  --review-service-date-color: rgb(107, 117, 133);
  --review-service-date-weight: 400;
  --review-service-date-font: var(--main-font);
  --review-service-date-font-size: 14px;
  --review-service-date-spacing: 0px;
  --review-service-date-margin: 5px 0px 0px 0px;
  --review-filter-box-backgroud: rgb(255, 255, 255);
  --review-filter-box-box-shadow: 0px 0px 0px 1px rgb(228, 230, 233);
  --review-filter-box-border-radius: 8px;
  --review-filter-box-margin-left: auto;
  --review-filter-box-weight: 500;
  --review-filter-box-font: var(--main-font);
  --review-filter-box-font-size: 16px;
  --review-filter-header-margin: 0px 0px 20px 0px;
  --review-filter-header-color: #212529;
  --review-filter-header-weight: 600;
  --review-filter-header-font: var(--main-font);
  --review-filter-header-font-size: 14px;
  --review-filter-header-spacing: 0px;
  --review-filter-header-margin: 5px 0px 0px 0px;
  --review-filter-header-padding: 15px 15px 10px;
  --filter-middle-padding: 0px 15px;
  --review-filter-rating-count-color: #212529;
  --review-filter-rating-count-weight: 700;
  --review-filter-rating-count-font: var(--main-font);
  --review-filter-rating-count-font-size: 14px;
  --review-filter-rating-count-spacing: 0px;
  --filter-rating-bar-border-radius: 4px;
  --filter-rating-bar-height: 7px;
  --review-filter-info-margin: 27px 0px 0px 0px;
  --review-filter-info-padding: 15px;
  --review-filter-info-divider-color: rgb(228, 230, 233);
  --review-filter-info-icon-color: var(--primary-color);
  --review-filter-info-header-color: #212529;
  --review-filter-info-header-weight: 600;
  --review-filter-info-header-font: var(--main-font);
  --review-filter-info-header-font-size: 16px;
  --review-filter-info-header-spacing: 0px;
  --review-filter-info-header-margin: 0px 0px 5px 0px;
  --review-filter-info-lead-color: #212529;
  --review-filter-info-lead-weight: 500;
  --review-filter-info-lead-font: var(--main-font);
  --review-filter-info-lead-font-size: 14px;
  --review-filter-info-lead-spacing: 0px;
  --review-filter-info-lead-margin: 0px 0px 0px 0px;
  --section-about-width: 740px;
  --section-header-about-color: var(--section-header-color);
  --section-header-about-weight: var(--section-header-weight);
  --section-header-about-font: var(--section-header-font);
  --section-header-about-font-size: 28px;
  --section-header-about-spacing: var(--section-header-spacing);
  --section-header-about-margin: 0px 0px 5px 0px;
  --section-header-opening-times-color: var(--section-header-about-color);
  --section-header-opening-times-weight: var(--section-header-about-weight);
  --section-header-opening-times-font: var(--section-header-about-font);
  --section-header-opening-times-font-size: var(--section-header-about-font-size);
  --section-header-opening-times-spacing: var(--section-header-about-spacing);
  --section-header-opening-times-margin: 0px 0px 10px 0px;
  --about-text-color: #212529;
  --about-text-weight: 400;
  --about-text-font: var(--main-font);
  --about-text-font-size: 15px;
  --about-text-line-height: 26px;
  --about-text-spacing: 0px;
  --about-text-margin: 0px 0px 0px 0px;
  --about-opening-times-day-color: #212529;
  --about-opening-times-day-weight: 400;
  --about-opening-times-day-font: var(--main-font);
  --about-opening-times-day-font-size: 15px;
  --about-opening-times-day-spacing: 0px;
  --about-opening-times-day-margin: 0px 0px 0px 0px;
  --about-opening-times-day-weight-selected: 600;
  --about-opening-times-day-color-selected: #212529;
  --about-opening-times-times-color: #212529;
  --about-opening-times-times-weight: 400;
  --about-opening-times-times-font: var(--main-font);
  --about-opening-times-times-font-size: 15px;
  --about-opening-times-times-spacing: 0px;
  --about-opening-times-timess-margin: 0px 0px 0px 0px;
  --about-opening-times-icon-size: 8px;
  --about-opening-times-icon-border-radius: 100%;
  --about-opening-times-icon-color-open: green;
  --about-opening-times-icon-color-closed: grey;
  --about-name-color: #212529;
  --about-name-weight: 600;
  --about-name-font: var(--main-font);
  --about-name-font-size: 16px;
  --about-name-spacing: 0px;
  --about-name-margin: 0px 0px 0px 0px;
  --about-address-background: rgb(255, 255, 255);
  --about-address-color: #212529;
  --about-address-weight: 400;
  --about-address-font: var(--main-font);
  --about-address-font-size: 16px;
  --about-address-spacing: 0px;
  --about-address-margin: 0px 0px 0px 0px;
  --about-address-padding: 15px;
  --about-directions-color: var(--link-color);
  --about-directions-weight: var(--link-weight);
  --about-directions-font: var(--link-font);
  --about-directions-font-size: 16px;
  --about-directions-spacing: var(--link-spacing);
  --about-directions-margin: var(--link-margin);
  --footer-background: #F1F2F4;
  --footer-padding: 20px;
  --footer-list-header-color: #212529;
  --footer-list-header-weight: 600;
  --footer-list-header-font: var(--main-font);
  --footer-list-header-font-size: 16px;
  --footer-list-header-spacing: 0px;
  --footer-list-header-margin: 15px 0px 5px 0px;
  --footer-list-item-color: #212529;
  --footer-list-item-weight: 400;
  --footer-list-item-font: var(--main-font);
  --footer-list-item-font-size: 13px;
  --footer-list-item-spacing: 0px;
  --footer-list-item-margin: 0px 0px 5px 0px;
}

.--location-content {
  box-sizing: border-box;
  max-width: 1200px;
  margin: auto;
  width: 100%;
}
.--location-details-container {
  padding: var(--section-padding);
}
.--location-name {
  color: var(--location-name-color);
  font: var(--location-name-weight) var(--location-name-font-size) var(--location-name-font);
  letter-spacing: var(--location-name-spacing);
  margin: var(--location-name-margin);
}
.--location-address {
  color: var(--location-address-color);
  font: var(--location-address-weight) var(--location-address-font-size) var(--location-address-font);
  letter-spacing: var(--location-address-spacing);
  margin: var(--location-address-margin);
}
.--location-status {
  color: var(--location-status-color);
  font: var(--location-status-weight) var(--location-status-font-size) var(--location-status-font);
  letter-spacing: var(--location-status-spacing);
  margin: var(--location-status-margin);
}
.--location-status-open {
  color: var(--location-status-open-color);
}
.--location-status-closed {
  color: var(--location-status-closed-color);
}
.--location-status-seperator {
  font-size: var(--location-status-seperator-font-size);
}
.--location-reviews {
  display: flex;
  align-items: center;
  gap: var(--location-reviews-gap);
  margin: var(--location-reviews-margin);
}
.--location-reviews-amount {
  color: var(--location-reviews-amount-color);
  font: var(--location-reviews-amount-weight) var(--location-reviews-amount-font-size) var(--location-reviews-amount-font);
  letter-spacing: var(--location-reviews-amount-spacing);
  margin: var(--location-reviews-amount-margin);
}
.--location-reviews-rating {
  color: var(--location-reviews-rating-color);
  font: var(--location-reviews-rating-weight) var(--location-reviews-rating-font-size) var(--location-reviews-rating-font);
  letter-spacing: var(--location-reviews-rating-spacing);
  margin: var(--location-reviews-rating-margin);
}

[data-carousel-container] {
  padding: 10px;
  position: relative;
}

.--popular-service {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0px;
}
.--popular-service:not(:last-of-type) {
  border-bottom: 1px solid var(--color-gray-200);
}
.--popular-service-name {
  align-items: center;
  display: flex;
  gap: 8px;
  color: var(--popular-service-name-color);
  font: var(--popular-service-name-weight) var(--popular-service-name-font-size) var(--popular-service-name-font);
  letter-spacing: var(--popular-service-name-spacing);
  margin: var(--popular-service-name-margin);
}
.--popular-service-info-btn {
  display: inline;
  --icon-size: var(--popular-service-info-btn-icon-size);
  --icon-url: var(--popular-service-info-btn-icon);
  --icon-color: var(--popular-service-info-btn-color);
  margin: var(--popular-service-info-btn-margin);
}
.--popular-service-info-btn::before {
  width: var(--popular-service-info-btn-icon-size);
  height: var(--popular-service-info-btn-icon-size);
}
.--popular-service-info-btn:hover {
  --icon-color: var(--popular-service-info-btn-color-focus);
}
.--popular-service-duration {
  font: 500 13px Lato;
  color: var(--color-gray-700);
  margin-top: 3px;
}
.--popular-service-price {
  font: 600 14px Lato;
  margin-top: 10px;
}

.--book-btn {
  --drop-shadow-color: #25232c;
  background-color: var(--book-btn-background-color);
  border-radius: var(--book-btn-border-radius);
  box-sizing: border-box;
  box-shadow: var(--book-btn-box-shadow);
  color: var(--book-btn-color);
  font: var(--book-btn-weight) var(--book-btn-font-size) var(--book-btn-font);
  padding: var(--book-btn-padding);
  position: relative;
}
.--book-btn:disabled {
  background-color: var(--primary-color-opacity-25);
  box-shadow: var(--book-btn-box-shadow-disabled);
  --drop-shadow-color: unset;
}
.--book-btn:disabled::before {
  background: #212529;
  border-radius: 4px;
  content: attr(data-disabled-text);
  position: absolute;
  top: 60px;
  opacity: 0;
  width: 150px;
  font: 500 0.7rem Lato;
  padding: 5px;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.25s top ease-in, 0.25s opacity ease-in;
}
.--book-btn:disabled:hover::before {
  top: 40px;
  opacity: 1;
}
.--book-btn span {
  filter: drop-shadow(0px 1px 1px var(--drop-shadow-color));
}
.--book-btn:not(:disabled):not(.--selected):hover {
  background-color: var(--book-btn-background-color-hover);
  box-shadow: var(--book-btn-box-shadow-hover);
  color: var(--book-btn-color-hover);
}
.--book-btn.--selected {
  --drop-shadow-color: #1a7b4a;
  background-color: var(--book-btn-background-color-active);
  box-shadow: var(--book-btn-box-shadow-active);
  color: var(--book-btn-color-active);
}

.--image-carousel {
  border-radius: 8px;
  display: flex;
  height: -moz-fit-content;
  height: fit-content;
  margin: 20px 0px 10px;
  overflow-y: auto;
  position: relative;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.--image-carousel.--double-height {
  border-radius: 0px;
  height: 512px;
  gap: 10px;
}
.--image-carousel::-webkit-scrollbar {
  display: none;
}
.--image-carousel-btn {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  height: var(--size);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;
  --size: 38px;
  z-index: 2;
}
.--image-carousel-btn.back {
  left: 50px;
}
.--image-carousel-btn.next {
  right: 50px;
}
.--image-carousel-btn.next svg {
  scale: -1;
}
.--image-carousel-item {
  align-items: center;
  min-width: 50%;
  margin-right: 2px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  scroll-snap-align: start;
  justify-content: flex-start;
}
.--image-carousel-item.--stacked {
  border-radius: 8px;
  flex-flow: column;
  height: 400px;
  width: 200px;
  min-width: 200px;
  gap: 12px;
}
.--image-carousel-item.--stacked img {
  border-radius: 8px;
  height: 200px;
}
.--image-carousel-item img {
  flex-shrink: 0;
  width: 100%;
  height: auto;
}

.--star-ratings {
  position: relative;
  display: inline-block;
}
.--star-ratings-base svg {
  color: var(--star-ratings-base-color);
}
.--star-ratings-big svg {
  width: var(--star-ratings-big-size);
  height: var(--star-ratings-big-size);
}
.--star-ratings-fill {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
}
.--star-ratings-fill svg {
  color: var(--star-ratings-fill-color);
}
.--star-ratings-filter svg {
  color: var(--star-ratings-base-color);
}
.--star-ratings-filter.one svg:first-of-type {
  color: var(--star-ratings-fill-color);
}
.--star-ratings-filter.two svg:first-of-type, .--star-ratings-filter.two svg:nth-of-type(2) {
  color: var(--star-ratings-fill-color);
}
.--star-ratings-filter.three svg:first-of-type, .--star-ratings-filter.three svg:nth-of-type(2), .--star-ratings-filter.three svg:nth-of-type(3) {
  color: var(--star-ratings-fill-color);
}
.--star-ratings-filter.four svg:not(:nth-of-type(5)) {
  color: var(--star-ratings-fill-color);
}
.--star-ratings-filter.five svg {
  color: var(--star-ratings-fill-color);
}

.--section {
  margin: var(--section-margin);
  padding: var(--section-padding);
}
.--section-header {
  color: var(--section-header-color);
  font: var(--section-header-weight) var(--section-header-font-size) var(--section-header-font);
  letter-spacing: var(--section-header-spacing);
  margin: var(--section-header-margin);
}
.--section-header-opening-times {
  color: var(--section-header-opening-times-color);
  font: var(--section-header-opening-times-weight) var(--section-header-opening-times-font-size) var(--section-header-opening-times-font);
  letter-spacing: var(--section-header-opening-times-spacing);
  margin: var(--section-header-opening-times-margin);
}
.--section-header-about {
  color: var(--section-header-about-color);
  font: var(--section-header-about-weight) var(--section-header-about-font-size) var(--section-header-about-font);
  letter-spacing: var(--section-header-about-spacing);
  margin: var(--section-header-about-margin);
}
.--section-about {
  display: flex;
  gap: 20px;
}
.--section-about-container {
  width: var(--section-about-width);
  flex-shrink: 0;
}
.--section-about-opening-times {
  width: 100%;
}

.--service {
  align-items: flex-start;
  display: flex;
}
.--service-categories {
  width: var(--categories-width);
}
.--service-container {
  margin-left: 10px;
  flex: 1;
}
.--service-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--service-category-color);
  font: var(--service-category-weight) var(--service-category-font-size) var(--service-category-font);
  letter-spacing: var(--service-category-spacing);
  padding: var(--service-category-padding);
  border-radius: var(--service-category-border-radius);
  margin: var(--service-category-margin);
  box-shadow: var(--service-category-box-shadow);
  width: 100%;
}
.--service-category:hover {
  background: var(--service-category-background-hover);
  color: var(--service-category-color-hover);
  box-shadow: var(--service-category-box-shadow-hover);
}
.--service-category:hover > .--service-category-icon {
  --icon-color: var(--service-category-icon-color-hover);
}
.--service-category.--selected {
  background: var(--service-category-background-selected);
  color: var(--service-category-color-selected);
  box-shadow: var(--service-category-box-shadow-selected);
}
.--service-category.--selected > .--service-category-icon {
  --icon-color: var(--service-category-icon-color-selected);
}
.--service-category-icon {
  --icon-size: var(--service-category-icon-size);
  --icon-url: var(--service-category-icon);
  --icon-color: var(--service-category-icon-color);
  margin: var(--service-category-icon-margin);
}
.--service-category-icon::before {
  width: var(--service-category-icon-size);
  height: var(--service-category-icon-size);
}

.--staff {
  display: flex;
  gap: 10px;
  flex-flow: column;
}
.--staff-services-container {
  display: flex;
  gap: 20px;
}
.--staff-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--staff-avatar-border-radius);
}
.--staff-avatar-text {
  background-color: var(--staff-color);
  width: 50px;
  height: 50px;
  font: 600 18px var(--main-font);
  color: var(--contrast-color);
}
.--staff-avatar-image {
  width: 50px;
  height: 50px;
}
.--staff-avatar-image img {
  width: 50px;
  height: 50px;
}
.--staff-member {
  display: flex;
  gap: 12px;
  width: 300px;
  padding: 15px 13px;
  border-radius: 8px;
  box-shadow: 0px 0px 0px 1px rgba(19, 19, 112, 0.25);
  text-align: start;
}
.--staff-member-container {
  display: flex;
  flex-shrink: 0;
}
.--staff-member.--active {
  box-shadow: 0px 0px 0px 1px rgb(19, 19, 112), 0px 0px 0px 3px rgba(85, 85, 221, 0.5);
}
.--staff-member-details {
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  margin-right: 15px;
}
.--staff-member-name {
  color: var(--staff-member-name-color);
  font: var(--staff-member-name-weight) var(--staff-member-name-font-size) var(--staff-member-name-font);
  letter-spacing: var(--staff-member-name-spacing);
  margin: var(--staff-member-name-margin);
}
.--staff-member-role {
  color: var(--staff-member-role-color);
  font: var(--staff-member-role-weight) var(--staff-member-role-font-size) var(--staff-member-role-font);
  letter-spacing: var(--staff-member-role-spacing);
  margin: var(--staff-member-role-margin);
}
.--staff-services-list {
  display: flex;
  gap: 5px;
  flex: 1;
  flex-wrap: wrap;
}
.--staff-services-list-pill {
  border-radius: var(--staff-services-list-pill-border-radius);
  background: var(--staff-services-list-pill-background);
  box-shadow: var(--staff-services-list-pill-box-shadow);
  color: var(--staff-services-list-pill-color);
  font: var(--staff-services-list-pill-weight) var(--staff-services-list-pill-font-size) var(--staff-services-list-pill-font);
  letter-spacing: var(--staff-services-list-pill-spacing);
  margin: var(--staff-services-list-pill-margin);
  padding: var(--staff-services-list-pill-padding);
}
.--staff-services-list-header {
  color: var(--staff-services-list-header-color);
  font: var(--staff-services-list-header-weight) var(--staff-services-list-header-font-size) var(--staff-services-list-header-font);
  letter-spacing: var(--staff-services-list-header-spacing);
  margin: var(--staff-services-list-header-margin);
}

.--review-section {
  display: flex;
  margin: var(--reviews-section-margin);
  padding: var(--reviews-section-padding);
  border-top: var(--reviews-section-divider-size) var(--reviews-section-divider-style);
  border-color: var(--reviews-section-divider-color);
}
.--review-container {
  flex-shrink: 1;
  max-width: var(--reviews-section-width);
  width: 100%;
  display: flex;
  flex-flow: column;
  gap: 10px;
}
.--review-none {
  text-align: center;
  font: 600 1.5rem var(--main-font);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 100px;
}
.--review-author {
  color: var(--review-author-color);
  font: var(--review-author-weight) var(--review-author-font-size) var(--review-author-font);
  letter-spacing: var(--review-author-spacing);
  margin: var(--review-author-margin);
}
.--review-left-date {
  color: var(--review-left-date-color);
  font: var(--review-left-date-weight) var(--review-left-date-font-size) var(--review-left-date-font);
  letter-spacing: var(--review-left-date-spacing);
  margin: var(--review-left-date-margin);
}
.--review-message {
  color: var(--review-message-color);
  font: var(--review-message-weight) var(--review-message-font-size) var(--review-message-font);
  letter-spacing: var(--review-message-spacing);
  line-height: var(--review-message-line-height);
  margin: var(--review-message-margin);
}
.--review-service-date {
  color: var(--review-service-date-color);
  font: var(--review-service-date-weight) var(--review-service-date-font-size) var(--review-service-date-font);
  letter-spacing: var(--review-service-date-spacing);
  margin: var(--review-service-date-margin);
}
.--review-filter-box {
  background: var(--review-filter-box-backgroud);
  box-shadow: var(--review-filter-box-box-shadow);
  border-radius: var(--review-filter-box-border-radius);
  margin-left: var(--review-filter-box-margin-left);
  font: var(--review-filter-box-weight) var(--review-filter-box-font-size) var(--review-filter-font);
  max-width: 300px;
  width: 100%;
  flex-shrink: 0;
  height: -moz-fit-content;
  height: fit-content;
}
.--review-filter-header {
  color: var(--review-filter-header-color);
  font: var(--review-filter-header-weight) var(--review-filter-header-font-size) var(--review-filter-header-font);
  letter-spacing: var(--review-filter-header-spacing);
  margin: var(--review-filter-header-margin);
  padding: var(--review-filter-header-padding);
}
.--review-filter-header {
  color: var(--review-filter-header-color);
  font: var(--review-filter-header-weight) var(--review-filter-header-font-size) var(--review-filter-header-font);
  letter-spacing: var(--review-filter-header-spacing);
  margin: var(--review-filter-header-margin);
  padding: var(--review-filter-header-padding);
}
.--review-filter-middle {
  display: flex;
  flex-flow: column;
  gap: 12px;
  padding: var(--filter-middle-padding);
}
.--review-filter-label {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.--review-filter-rating-count {
  margin-left: auto;
  color: var(--review-filter-rating-count-color);
  font: var(--review-filter-rating-count-weight) var(--review-filter-rating-count-font-size) var(--review-filter-count-rating-font);
  letter-spacing: var(--review-filter-rating-count-spacing);
}
.--review-filter-info {
  margin: var(--review-filter-info-margin);
  padding: var(--review-filter-info-padding);
  border-top: 1px solid var(--review-filter-info-divider-color);
  width: 100%;
  box-sizing: border-box;
}
.--review-filter-info-header {
  color: var(--review-filter-info-header-color);
  font: var(--review-filter-info-header-weight) var(--review-filter-info-header-font-size) var(--review-filter-info-header-font);
  letter-spacing: var(--review-filter-info-header-spacing);
  margin: var(--review-filter-info-header-margin);
}
.--review-filter-info-lead {
  color: var(--review-filter-info-lead-color);
  font: var(--review-filter-info-lead-weight) var(--review-filter-info-lead-font-size) var(--review-filter-info-lead-font);
  letter-spacing: var(--review-filter-info-lead-spacing);
  margin: var(--review-filter-info-lead-margin);
}
.--review-filter-rating-bar {
  display: flex;
  width: 100px;
  border-radius: var(--filter-rating-bar-border-radius);
  overflow: hidden;
}

.--opening-times-container {
  display: flex;
  flex-flow: column;
  gap: 12px;
  padding-bottom: 20px;
}

.--about-opening-times {
  display: flex;
  justify-content: space-between;
}
.--about-opening-times-icon {
  border-radius: var(--about-opening-times-icon-border-radius);
  width: var(--about-opening-times-icon-size);
  height: var(--about-opening-times-icon-size);
  background-color: var(--about-opening-times-icon-color-open);
}
.--about-opening-times.--closed {
  opacity: 0.5;
}
.--about-opening-times.--closed .--about-opening-times-icon {
  background-color: var(--about-opening-times-icon-color-closed);
}
.--about-opening-times.--today .--about-opening-times-day, .--about-opening-times.--today .--about-opening-times-times {
  color: var(--about-opening-times-day-color-selected);
  font-weight: var(--about-opening-times-day-weight-selected);
}
.--about-opening-times-container {
  display: flex;
  align-items: center;
  gap: 12px;
}
.--about-opening-times-day {
  color: var(--about-opening-times-day-color);
  font: var(--about-opening-times-day-weight) var(--about-opening-times-day-font-size) var(--about-opening-times-day-font);
  letter-spacing: var(--about-opening-times-day-spacing);
  margin: var(--about-opening-times-day-margin);
}
.--about-opening-times-times {
  color: var(--about-opening-times-times-color);
  font: var(--about-opening-times-times-weight) var(--about-opening-times-times-font-size) var(--about-opening-times-times-font);
  letter-spacing: var(--about-opening-times-times-spacing);
  margin: var(--about-opening-times-times-margin);
}
.--about-text {
  color: var(--about-text-color);
  font: var(--about-text-weight) var(--about-text-font-size) var(--about-text-font);
  letter-spacing: var(--about-text-spacing);
  line-height: var(--about-text-line-height);
  margin: var(--about-text-margin);
}
.--about-name {
  color: var(--about-name-color);
  font: var(--about-name-weight) var(--about-name-font-size) var(--about-name-font);
  letter-spacing: var(--about-name-spacing);
  line-height: var(--about-name-line-height);
  margin: var(--about-name-margin);
}
.--about-address {
  background: var(--about-address-background);
  display: flex;
  gap: 5px;
  flex: 1;
  flex-flow: column;
  color: var(--about-address-color);
  font: var(--about-address-weight) var(--about-address-font-size) var(--about-address-font);
  letter-spacing: var(--about-address-spacing);
  line-height: var(--about-address-line-height);
  margin: var(--about-address-margin);
  padding: var(--about-address-padding);
}
.--about-directions {
  color: var(--about-directions-color);
  font: var(--about-directions-weight) var(--about-directions-font-size) var(--about-directions-font);
  letter-spacing: var(--about-directions-spacing);
  line-height: var(--about-directions-line-height);
  margin: var(--about-directions-margin);
}

.--map-show-a-place-container {
  display: flex;
  margin-top: 10px;
  margin-bottom: 40px;
}

.--map-show-a-place {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  height: 380px;
  width: 740px;
}
.--map-show-a-place .maplibregl-canvas {
  cursor: pointer;
}

.--map-place {
  height: 100%;
  width: 100%;
}

.--to-date-select-container {
  display: flex;
  justify-content: space-between;
  visibility: hidden;
  box-sizing: border-box;
  max-width: 500px;
  position: fixed;
  bottom: 7px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #FFF;
  padding: 17px;
  border-radius: 4px;
  box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
}
.--to-date-select-container.--active {
  visibility: visible;
}
.--to-date-select-total {
  font: 800 1rem Lato;
}
.--to-date-select-service-count {
  font: 400 13px Lato;
  color: #454545;
}
.--to-date-select-btn {
  background: #5555dd;
  color: #fff;
  border-radius: 4px;
  font: 600 14px Inter;
  padding: 10px;
}

.--showcase-modal {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + 10px), -50%);
  transition: translate 0.25s ease-in, opacity 0.25s ease-in;
  opacity: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  z-index: 10;
}
.--showcase-modal.--show {
  transform: translate(-50%, -50%);
  opacity: 1;
}
.--showcase-modal-content {
  display: flex;
}
.--showcase-modal-image {
  height: 450px;
  width: 450px;
}
.--showcase-modal-image-container {
  position: relative;
}
.--showcase-modal-details {
  min-width: 200px;
  padding: 20px;
}
.--showcase-modal-detail-header {
  font: 600 1rem var(--main-font);
  margin-top: 15px;
}
.--showcase-modal-detail-item {
  font: 400 1rem var(--main-font);
  margin-top: 0px;
}

.--footer {
  background-color: var(--footer-background);
  box-sizing: border-box;
  padding: var(--footer-padding);
  width: 100%;
}
.--footer ul {
  list-style: none;
}
.--footer-content {
  max-width: 1200px;
  margin: auto;
}
.--footer-list-header {
  color: var(--footer-list-header-color);
  font: var(--footer-list-header-weight) var(--footer-list-header-font-size) var(--footer-list-header-font);
  letter-spacing: var(--footer-list-header-spacing);
  line-height: var(--footer-list-header-line-height);
  margin: var(--footer-list-header-margin);
}
.--footer-list-item {
  color: var(--footer-list-item-color);
  font: var(--footer-list-item-weight) var(--footer-list-item-font-size) var(--footer-list-item-font);
  letter-spacing: var(--footer-list-item-spacing);
  line-height: var(--footer-list-item-line-height);
  margin: var(--footer-list-item-margin);
}

.--terms p {
  margin-bottom: 10px;
}
.--terms ul {
  margin-bottom: 10px;
}
.--terms li {
  margin-left: 15px;
}

@media (max-width: 1050px) {
  .--section-about {
    flex-flow: column;
  }
}
@media (max-width: 778px) {
  body {
    --categories-width: 100%;
    --section-padding: 7px 15px;
    --location-name-font-size: 26px;
    --location-address-font-size: 16px;
    --location-status-font-size: 14px;
    --location-reviews-rating-font-size: 18px;
    --star-ratings-big-size: 16px;
    --section-about-width: 100%;
  }
  .--staff {
    flex-flow: row;
    margin: -8px;
    padding: 8px;
    overflow: auto;
    width: -moz-fit-content;
    width: fit-content;
  }
  .--staff-member {
    flex-flow: column;
    width: -moz-fit-content;
    width: fit-content;
  }
  .--image-carousel {
    margin: 0px;
  }
  .--service-container {
    margin-left: 0px;
    max-width: unset;
    padding: 0px 5px;
  }
  .--service-category-icon {
    transform: rotate(90deg);
  }
  .--staff-services-container {
    flex-flow: column;
  }
  .--review-section {
    flex-flow: column-reverse;
  }
  .--review-filter-box {
    margin: 0px auto 10px auto;
    width: 100%;
    max-width: 600px;
  }
  .--map-show-a-place {
    border-radius: 0px;
    width: 100%;
  }
  .--map-show-a-place-container {
    flex-flow: column;
  }
}
@media (max-width: 568px) {
  [data-carousel-container] {
    padding: 0px;
  }
  .--image-carousel {
    border-radius: 0px;
  }
  .--image-carousel-item {
    min-width: 100%;
  }
}
body {
  --booking-page-container-padding: 40px 10px 10px 10px;
  --booking-page-header-color: #212529;
  --booking-page-header-weight: 600;
  --booking-page-header-font: var(--main-font);
  --booking-page-header-font-size: 32px;
  --booking-page-header-spacing: 0px;
  --booking-page-header-margin: 10px 0px 20px 0px;
  --booking-page-previous-step-btn-icon-size: 24px;
  --booking-page-previous-step-btn-icon: url(/images/icons/chevron-thick-left.svg);
  --booking-page-previous-step-btn-icon-color: #212529;
  --breadcrumbs-color: #a6a6a6;
  --breadcrumbs-weight: 500;
  --breadcrumbs-font: var(--main-font);
  --breadcrumbs-font-size: 14px;
  --breadcrumbs-spacing: 0px;
  --breadcrumbs-margin: 10px 0px 0px 0px;
  --breadcrumbs-active-color: #212529;
  --floating-information-location-background: #fff;
  --floating-information-location-color: #212529;
  --floating-information-location-weight: 600;
  --floating-information-location-font: var(--main-font);
  --floating-information-location-font-size: 18px;
  --floating-information-location-spacing: 0px;
  --floating-information-location-margin: 0px 0px 0px 0px;
  --floating-information-address-color: #51565c;
  --floating-information-address-weight: 400;
  --floating-information-address-font: var(--main-font);
  --floating-information-address-font-size: 15px;
  --floating-information-address-spacing: 0px;
  --floating-information-address-margin: 0px 0px 15px 0px;
  --floating-information-chosen-time-color: #212529;
  --floating-information-chosen-time-weight: 600;
  --floating-information-chosen-time-font: var(--main-font);
  --floating-information-chosen-time-font-size: 34px;
  --floating-information-chosen-time-spacing: 0px;
  --floating-information-chosen-date-color: #212529;
  --floating-information-chosen-date-weight: 600;
  --floating-information-chosen-date-font: var(--main-font);
  --floating-information-chosen-date-font-size: 15px;
  --floating-information-chosen-date-spacing: 0px;
  --floating-information-chosen-duration-color: #51565c;
  --floating-information-chosen-duration-weight: 400;
  --floating-information-chosen-duration-font: var(--main-font);
  --floating-information-chosen-duration-font-size: 15px;
  --floating-information-chosen-duration-spacing: 0px;
  --floating-information-service-container-padding: 10px 0px 10px 0px;
  --floating-information-service-name-color: #212529;
  --floating-information-service-name-weight: 600;
  --floating-information-service-name-font: var(--main-font);
  --floating-information-service-name-font-size: 15px;
  --floating-information-service-name-spacing: 0px;
  --floating-information-service-name-margin: 0px 0px 0px 0px;
  --floating-information-service-price-color: #212529;
  --floating-information-service-price-weight: 600;
  --floating-information-service-price-font: var(--main-font);
  --floating-information-service-price-font-size: 15px;
  --floating-information-service-price-spacing: 0px;
  --floating-information-service-price-margin: 0px 0px 0px 0px;
  --floating-information-service-information-color: #212529;
  --floating-information-service-information-weight: 400;
  --floating-information-service-information-font: var(--main-font);
  --floating-information-service-information-font-size: 13px;
  --floating-information-service-information-spacing: 0px;
  --floating-information-service-information-margin: 0px 0px 0px 0px;
  --floating-information-total-container-divider-size: 1px;
  --floating-information-total-container-divider-style: solid;
  --floating-information-total-container-divider-color: rgb(228, 230, 233);
  --floating-information-total-container-margin: 20px 0px 0px 0px;
  --floating-information-total-container-padding: 20px 0px 20px 0px;
  --floating-information-total-text-color: #212529;
  --floating-information-total-text-weight: 600;
  --floating-information-total-text-font: var(--main-font);
  --floating-information-total-text-font-size: 15px;
  --floating-information-total-price-color: #212529;
  --floating-information-total-price-weight: 600;
  --floating-information-total-price-font: var(--main-font);
  --floating-information-total-price-font-size: 15px;
  --booking-page-staff-choice-background: #fff;
  --booking-page-staff-choice-box-shadow: 0px 0px 0px 1px #212529;
  --booking-page-staff-choice-border-radius: 8px;
  --booking-page-staff-choice-color: #212529;
  --booking-page-staff-choice-weight: 600;
  --booking-page-staff-choice-font: var(--main-font);
  --booking-page-staff-choice-font-size: 16px;
  --booking-page-staff-choice-spacing: 0px;
  --booking-page-staff-choice-width: 220px;
  --booking-page-staff-choice-height: 220px;
  --booking-page-staff-choice-background-active: #fff;
  --booking-page-staff-choice-box-shadow-active: 0px 0px 0px 1px #212529, 0px 0px 0px 3px var(--primary-color-opacity-75);
  --booking-page-staff-choice-color-active: #212529;
  --booking-page-date-change-btn-icon-size: 24px;
  --booking-page-date-change-btn-icon: url(/images/icons/chevron-right.svg);
  --booking-page-date-change-btn-icon-color: #212529;
  --booking-page-date-month-container-padding: 10px;
  --booking-page-date-month-color: #212529;
  --booking-page-date-month-weight: 600;
  --booking-page-date-month-font: var(--main-font);
  --booking-page-date-month-font-size: 16px;
  --booking-page-date-month-spacing: 0px;
  --booking-page-date-choice-container-padding: 10px;
  --booking-page-date-choice-day-color: #212529;
  --booking-page-date-choice-day-weight: 400;
  --booking-page-date-choice-day-font: var(--main-font);
  --booking-page-date-choice-day-font-size: 14px;
  --booking-page-date-choice-day-spacing: 0px;
  --booking-page-date-choice-date-color: #212529;
  --booking-page-date-choice-date-weight: 600;
  --booking-page-date-choice-date-font: var(--main-font);
  --booking-page-date-choice-date-font-size: 16px;
  --booking-page-date-choice-date-spacing: 0px;
  --times-choice-gap: 15px;
  --times-choice-border-radius: 8px;
  --times-choice-box-shadow: 0px 0px 0px 1px #e1e1e1;
  --times-choice-color: #212529;
  --times-choice-weight: 600;
  --times-choice-font: var(--main-font);
  --times-choice-font-size: 16px;
  --times-choice-spacing: 0px;
  --times-choice-padding: 15px;
  --times-choice-text-align: start;
  --continue-btn-align: center;
  --continue-btn-background-color: var(--primary-color);
  --continue-btn-weight: 600;
  --continue-btn-font-size: 14px;
  --continue-btn-font: var(--main-font);
  --continue-btn-border-radius: 4px;
  --continue-btn-color: #fff;
  --continue-btn-padding: 10px 5px 10px 5px;
  --continue-btn-box-shadow: 0px 0px 0px 1px rgb(60, 60, 215), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --continue-btn-background-color-hover: var(--primary-color);
  --continue-btn-color-hover: #fff;
  --continue-btn-box-shadow-hover: 0px 0px 0px 1px rgb(60, 60, 215), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --continue-btn-margin: 0px 0px 0px 0px;
}

.--booking-page-container {
  box-sizing: border-box;
  padding: var(--booking-page-container-padding);
  max-width: 1100px;
  margin: auto;
  width: 100%;
}

.--version-modal {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  height: 100vh;
  width: 100vw;
  visibility: hidden;
  overflow: scroll;
  overscroll-behavior: contain;
}
.--version-modal.--active {
  visibility: visible;
  z-index: 4;
}

.--breadcrumbs {
  display: flex;
  list-style: none;
  color: var(--breadcrumbs-color);
  font: var(--breadcrumbs-weight) var(--breadcrumbs-font-size) var(--breadcrumbs-font);
  letter-spacing: var(--breadcrumbs-spacing);
  margin: var(--breadcrumbs-margin);
}
.--breadcrumbs li:hover {
  color: var(--breadcrumbs-active-color);
}
.--breadcrumbs > .--active {
  color: var(--breadcrumbs-active-color);
}
.--breadcrumbs li:not(:last-of-type):after {
  padding: 0px 5px;
  color: inherit;
  content: "/ ";
}
.--breadcrumbs button {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
}

.--split-screen {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.--split-left {
  width: 65%;
  flex-shrink: 0;
  box-sizing: border-box;
}

.--split-right {
  flex-grow: 1;
  box-sizing: border-box;
}

.--floating-information {
  height: -moz-fit-content;
  height: fit-content;
  padding: 15px;
  box-shadow: 0px 0px 0px 1px #e1e1e1;
  border-radius: 8px;
  position: sticky;
  max-height: calc(100vh - 200px);
  top: 10px;
}
.--floating-information-location {
  background: var(floating-information-location-background);
  color: var(--floating-information-location-color);
  font: var(--floating-information-location-weight) var(--floating-information-location-font-size) var(--floating-information-location-font);
  letter-spacing: var(--floating-information-location-spacing);
  margin: var(--floating-information-location-margin);
}
.--floating-information-address {
  color: var(--floating-information-address-color);
  font: var(--floating-information-address-weight) var(--floating-information-address-font-size) var(--floating-information-address-font);
  letter-spacing: var(--floating-information-address-spacing);
  margin: var(--floating-information-address-margin);
}
.--floating-information-chosen-container {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: opacity 0.15s ease, grid-template-rows 0.2s ease, margin 0.1s ease, padding 0.1s ease;
  border-bottom: 1px solid #e1e1e1;
}
.--floating-information-chosen-container > div {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.--floating-information-chosen-container.--show {
  margin-bottom: 15px;
  grid-template-rows: 1fr;
  opacity: 1;
  padding-bottom: 15px;
}
.--floating-information-chosen-time {
  color: var(--floating-information-chosen-time-color);
  font: var(--floating-information-chosen-time-weight) var(--floating-information-chosen-time-font-size) var(--floating-information-chosen-time-font);
  letter-spacing: var(--floating-information-chosen-time-spacing);
}
.--floating-information-chosen-date {
  color: var(--floating-information-chosen-date-color);
  font: var(--floating-information-chosen-date-weight) var(--floating-information-chosen-date-font-size) var(--floating-information-chosen-date-font);
  letter-spacing: var(--floating-information-chosen-date-spacing);
}
.--floating-information-chosen-duration {
  color: var(--floating-information-chosen-duration-color);
  font: var(--floating-information-chosen-duration-weight) var(--floating-information-chosen-duration-font-size) var(--floating-information-chosen-duration-font);
  letter-spacing: var(--floating-information-chosen-duration-spacing);
}
.--floating-information-service-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: var(--floating-information-service-container-padding);
}
.--floating-information-service-name {
  color: var(--floating-information-service-name-color);
  font: var(--floating-information-service-name-weight) var(--floating-information-service-name-font-size) var(--floating-information-service-name-font);
  letter-spacing: var(--floating-information-service-name-spacing);
  margin: var(--floating-information-service-name-margin);
}
.--floating-information-service-information {
  color: var(--floating-information-service-information-color);
  font: var(--floating-information-service-information-weight) var(--floating-information-service-information-font-size) var(--floating-information-service-information-font);
  letter-spacing: var(--floating-information-service-information-spacing);
  margin: var(--floating-information-service-information-margin);
}
.--floating-information-service-price {
  color: var(--floating-information-service-price-color);
  font: var(--floating-information-service-price-weight) var(--floating-information-service-price-font-size) var(--floating-information-service-price-font);
  letter-spacing: var(--floating-information-service-price-spacing);
  margin: var(--floating-information-service-price-margin);
}
.--floating-information-total-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: var(--floating-information-total-container-divider-size) var(--floating-information-total-container-divider-style);
  border-color: var(--floating-information-total-container-divider-color);
  margin: var(--floating-information-total-container-margin);
  padding: var(--floating-information-total-container-padding);
}
.--floating-information-total-text {
  color: var(--floating-information-total-text-color);
  font: var(--floating-information-total-text-weight) var(--floating-information-total-text-font-size) var(--floating-information-total-text-font);
  letter-spacing: var(--floating-information-total-text-spacing);
}
.--floating-information-total-price {
  color: var(--floating-information-total-text-color);
  font: var(--floating-information-total-text-weight) var(--floating-information-total-text-font-size) var(--floating-information-total-text-font);
  letter-spacing: var(--floating-information-total-text-spacing);
}
.--floating-information-continue-container {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: opacity 0.15s ease, grid-template-rows 0.2s ease, margin 0.1s ease, padding 0.1s ease, overflow 0s 0.15s;
}
.--floating-information-continue-container > div {
  overflow: hidden;
}
.--floating-information-continue-container.--show {
  grid-template-rows: 1fr;
  opacity: 1;
}
.--floating-information-continue-container.--show > div {
  overflow: visible;
}

.--continue-btn {
  background-color: var(--continue-btn-background-color);
  border-radius: var(--continue-btn-border-radius);
  box-shadow: var(--continue-btn-box-shadow);
  color: var(--continue-btn-color);
  display: flex;
  font: var(--continue-btn-weight) var(--continue-btn-font-size) var(--continue-btn-font);
  justify-content: var(--continue-btn-align);
  padding: var(--continue-btn-padding);
  margin: var(--continue-btn-margin);
  position: relative;
  width: 100%;
}
.--continue-btn:hover {
  background-color: var(--continue-btn-background-color-hover);
  color: var(--continue-btn-color-hover);
  box-shadow: var(--continue-btn-box-shadow-hover);
}

.--booking-page-header {
  color: var(--booking-page-header-color);
  font: var(--booking-page-header-weight) var(--booking-page-header-font-size) var(--booking-page-header-font);
  letter-spacing: var(--booking-page-header-spacing);
  margin: var(--booking-page-header-margin);
}
.--booking-page-header > span {
  display: none;
}
.--booking-page-header > span.--active {
  display: block;
}
.--booking-page-staff-container {
  display: none;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.--booking-page-staff-container.--active {
  display: flex;
}
.--booking-page-any-staff {
  display: flex;
  align-items: center;
  justify-content: center;
}
.--booking-page-staff-choice {
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: var(--booking-page-staff-choice-background);
  box-shadow: var(--booking-page-staff-choice-box-shadow);
  border-radius: var(--booking-page-staff-choice-border-radius);
  color: var(--booking-page-staff-choice-color);
  font: var(--booking-page-staff-choice-weight) var(--booking-page-staff-choice-font-size) var(--booking-page-staff-choice-font);
  letter-spacing: var(--booking-page-staff-choice-spacing);
  width: var(--booking-page-staff-choice-width);
  height: var(--booking-page-staff-choice-height);
}
.--booking-page-staff-choice.--show {
  display: flex;
}
.--booking-page-staff-choice.--selected {
  color: var(--booking-page-staff-choice-background-active);
  box-shadow: var(--booking-page-staff-choice-box-shadow-active);
  color: var(--booking-page-staff-choice-color-active);
}
.--booking-page-choices-container {
  display: none;
}
.--booking-page-choices-container.--active {
  display: block;
}

.--booking-page-date-container {
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0px 0px 0px 1px var(--color-gray-300);
  border-radius: 8px;
}
.--booking-page-date-month-container {
  box-sizing: border-box;
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: var(--booking-page-date-month-container-padding);
}
.--booking-page-date-month {
  color: var(--booking-page-date-month-color);
  font: var(--booking-page-date-month-weight) var(--booking-page-date-month-font-size) var(--booking-page-date-month-font);
  letter-spacing: var(--booking-page-date-month-spacing);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.--booking-page-date-change-btn {
  --icon-color: var(--booking-page-date-change-btn-icon-color);
  --icon-url: var(--booking-page-date-change-btn-icon);
}
.--booking-page-date-change-btn::before {
  width: var(--booking-page-date-change-btn-icon-size);
  height: var(--booking-page-date-change-btn-icon-size);
}
.--booking-page-date-change-btn.--left {
  transform: scale(-1);
}
.--booking-page-date-choice {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.--booking-page-date-choice-container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  padding: var(--booking-page-date-choice-container-padding);
  transform: translateX(0);
}
.--booking-page-date-choice-container.--transition {
  transition: transform 0.2s ease-in;
}
.--booking-page-date-choice.--selected .--booking-page-date-choice-date {
  color: #fff;
  background: #000;
}
.--booking-page-date-choice.--unavailable {
  opacity: 0.5;
}
.--booking-page-date-choice.--unavailable .--booking-page-date-choice-date {
  text-decoration: line-through;
}
.--booking-page-date-choice-day {
  color: var(--booking-page-date-choice-day-color);
  font: var(--booking-page-date-choice-day-weight) var(--booking-page-date-choice-day-font-size) var(--booking-page-date-choice-day-font);
  letter-spacing: var(--booking-page-date-choice-day-spacing);
}
.--booking-page-date-choice-date {
  color: var(--booking-page-date-choice-date-color);
  font: var(--booking-page-date-choice-date-weight) var(--booking-page-date-choice-date-font-size) var(--booking-page-date-choice-date-font);
  letter-spacing: var(--booking-page-date-choice-date-spacing);
  color: var(--booking-page-date-choice-date-color);
  padding: 5px;
  border-radius: 100px;
  aspect-ratio: 1/1;
}

.--times-container {
  display: flex;
  flex-flow: column;
  gap: var(--times-choice-gap);
  margin-top: var(--times-choice-gap);
}
.--times-choice {
  border-radius: var(--times-choice-border-radius);
  box-shadow: var(--times-choice-box-shadow);
  color: var(--times-choice-color);
  font: var(--times-choice-weight) var(--times-choice-font-size) var(--times-choice-font);
  letter-spacing: var(--times-choice-spacing);
  padding: var(--times-choice-padding);
  text-align: var(--times-choice-text-align);
}

@media (max-width: 1000px) {
  .--split-left {
    width: 100%;
  }
  .--floating-information {
    position: fixed;
    bottom: 10px;
    top: unset;
    background: #fff;
    width: calc(100% - 20px);
    display: flex;
    flex-flow: row;
    justify-content: space-between;
  }
  .--floating-information-chosen-container.--show {
    border-bottom: 0;
    padding: 0;
    margin: 0;
  }
  .--hide-below-large {
    display: none;
  }
}
@media (max-width: 576px) {
  .--booking-page-date-container {
    padding: 0px;
  }
}
body {
  --page-padding: 50px 10px 10px 10px;
}

.--form-container {
  position: relative;
  min-height: 100dvh;
}

.--contain-height {
  max-height: 100dvh;
  overflow: hidden;
}

.--form-product-subscription-container, .--checkout-subscription-note {
  margin: 10px 0px;
  text-align: center;
  background: var(--color-blue-50);
  padding: 10px 5px;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--color-blue-200);
  color: var(--color-blue-800);
}

.--form-product-subscription-label, .--checkout-subscription-note {
  font: 500 0.875rem "Inter", sans-serif;
}

@media (max-width: 568px) {
  .--medium-header {
    font-size: 1.1rem;
  }
  [data-page] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100dvw;
  }
  .--block-container {
    width: 100%;
  }
  .--block-container.--more-blocks {
    width: 100%;
    box-sizing: border-box;
  }
  .--block-container.--more-blocks .--input-error-container {
    width: unset !important;
    flex: 1;
  }
}
body {
  --booking-page-location-name-color: #212529;
  --booking-page-location-name-weight: 600;
  --booking-page-location-name-font: var(--main-font);
  --booking-page-location-name-font-size: 16px;
  --booking-page-location-name-spacing: 0px;
  --booking-page-location-name-margin: 0px 0px 0px 0px;
  --booking-page-location-email-color: #212529;
  --booking-page-location-email-weight: 500;
  --booking-page-location-email-font: var(--main-font);
  --booking-page-location-email-font-size: 14px;
  --booking-page-location-email-spacing: 0px;
  --booking-page-location-email-margin: 0px 0px 0px 0px;
  --booking-page-location-contact-number-color: #212529;
  --booking-page-location-contact-number-weight: 500;
  --booking-page-location-contact-number-font: var(--main-font);
  --booking-page-location-contact-number-font-size: 14px;
  --booking-page-location-contact-number-spacing: 0px;
  --booking-page-location-contact-number-margin: 0px 0px 0px 0px;
  --booking-page-location-address-background: rgb(255, 255, 255);
  --booking-page-location-address-color: #212529;
  --booking-page-location-address-weight: 400;
  --booking-page-location-address-font: var(--main-font);
  --booking-page-location-address-font-size: 16px;
  --booking-page-location-address-spacing: 0px;
  --booking-page-location-address-margin: 0px 0px 0px 0px;
  --booking-page-location-address-padding: 15px;
  --booking-page-location-times-day-color: #212529;
  --booking-page-location-times-day-weight: 400;
  --booking-page-location-times-day-font: var(--main-font);
  --booking-page-location-times-day-font-size: 15px;
  --booking-page-location-times-day-spacing: 0px;
  --booking-page-location-times-day-margin: 0px 0px 0px 0px;
  --booking-page-location-times-day-weight-selected: 600;
  --booking-page-location-times-day-color-selected: #212529;
  --booking-page-location-times-times-color: #212529;
  --booking-page-location-times-times-weight: 400;
  --booking-page-location-times-times-font: var(--main-font);
  --booking-page-location-times-times-font-size: 15px;
  --booking-page-location-times-times-spacing: 0px;
  --booking-page-location-times-timess-margin: 0px 0px 0px 0px;
  --booking-page-location-times-icon-size: 8px;
  --booking-page-location-times-icon-border-radius: 100%;
  --booking-page-location-times-icon-color-open: green;
  --booking-page-location-times-icon-color-closed: grey;
  --link-color: blue;
  --link-weight: 600;
  --link-font: var(--main-font);
  --link-font-size: 14px;
  --link-spacing: 0px;
  --link-margin: 0px 0px 0px 0px;
}

.--booking-completed {
  flex: 1;
  background: var(--color-gray-50);
  padding-bottom: 50px;
}
.--booking-completed-section {
  box-sizing: border-box;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  margin-top: 15px;
}
.--booking-completed-section-header {
  font: 600 1rem Inter;
  margin: 0px 0px 5px;
}

.--booking-status {
  text-align: center;
  font: 600 3rem Inter;
  letter-spacing: -2px;
  margin: 15px;
}

.--booking-completed-full-container {
  box-sizing: border-box;
  display: flex;
  max-width: 1000px;
  margin: auto;
  justify-content: space-between;
  width: 100%;
}

.--booking-completed-left-container {
  margin-right: 30px;
}

.--booking-completed-service-detail {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.--booking-completed-service-detail-container {
  align-items: center;
  display: flex;
}

.--booking-completed-icon {
  background: var(--color-gray-100);
  border-radius: 4px;
  color: #565d6b;
  display: flex;
  padding: 5px;
  height: 100%;
}

.--booking-complete-date-time-information {
  margin-left: 10px;
}
.--booking-complete-date-time-information-header {
  font: 600 0.875rem Inter;
}
.--booking-complete-date-time-information-value {
  font: 400 0.875rem Inter;
}

.--booking-completed-card-used {
  background-color: var(--color-gray-100);
  padding: 10px;
  border-radius: 4px;
  font: 600 0.87rem Inter;
}
.--booking-completed-card-used-type {
  display: flex;
  width: 30px;
}
.--booking-completed-card-used-type svg {
  border-radius: 4px;
  padding: 4px;
  background: #fff;
}

.--booking-page-location-name {
  color: var(--booking-page-location-name-color);
  font: var(--booking-page-location-name-weight) var(--booking-page-location-name-font-size) var(--booking-page-location-name-font);
  letter-spacing: var(--booking-page-location-name-spacing);
  line-height: var(--booking-page-location-name-line-height);
  margin: var(--booking-page-location-name-margin);
}
.--booking-page-location-email {
  color: var(--booking-page-location-email-color);
  font: var(--booking-page-location-email-weight) var(--booking-page-location-email-font-size) var(--booking-page-location-email-font);
  letter-spacing: var(--booking-page-location-email-spacing);
  line-height: var(--booking-page-location-email-line-height);
  margin: var(--booking-page-location-email-margin);
}
.--booking-page-location-contact-number {
  color: var(--booking-page-location-contact-number-color);
  font: var(--booking-page-location-contact-number-weight) var(--booking-page-location-contact-number-font-size) var(--booking-page-location-contact-number-font);
  letter-spacing: var(--booking-page-location-contact-number-spacing);
  line-height: var(--booking-page-location-contact-number-line-height);
  margin: var(--booking-page-location-contact-number-margin);
}
.--booking-page-location-address-header {
  font: 600 0.875rem Inter;
  margin-top: 15px;
}
.--booking-page-location-address-part {
  font: 500 0.875rem Inter;
}
.--booking-page-location-opening-times {
  flex: 1;
  margin-top: 15px;
}
.--booking-page-location-times {
  display: flex;
  justify-content: space-between;
}
.--booking-page-location-times-header {
  font: 600 0.875rem Inter;
  margin-bottom: 5px;
}
.--booking-page-location-times-container {
  display: flex;
  flex-flow: column;
  gap: 6px;
  padding-bottom: 20px;
}
.--booking-page-location-times-icon {
  border-radius: var(--booking-page-location-times-icon-border-radius);
  width: var(--booking-page-location-times-icon-size);
  height: var(--booking-page-location-times-icon-size);
  background-color: var(--booking-page-location-times-icon-color-open);
}
.--booking-page-location-times.--closed {
  opacity: 0.5;
}
.--booking-page-location-times.--closed .--booking-page-location-times-icon {
  background-color: var(--booking-page-location-times-icon-color-closed);
}
.--booking-page-location-times.--today .--booking-page-location-times-day, .--booking-page-location-times.--today .--booking-page-location-times-times {
  color: var(--booking-page-location-times-day-color-selected);
  font-weight: var(--booking-page-location-times-day-weight-selected);
}
.--booking-page-location-times-day {
  color: var(--booking-page-location-times-day-color);
  font: var(--booking-page-location-times-day-weight) var(--booking-page-location-times-day-font-size) var(--booking-page-location-times-day-font);
  letter-spacing: var(--booking-page-location-times-day-spacing);
  margin: var(--booking-page-location-times-day-margin);
}
.--booking-page-location-times-times {
  color: var(--booking-page-location-times-times-color);
  font: var(--booking-page-location-times-times-weight) var(--booking-page-location-times-times-font-size) var(--booking-page-location-times-times-font);
  letter-spacing: var(--booking-page-location-times-times-spacing);
  margin: var(--booking-page-location-times-times-margin);
}

.--booking-page-map {
  height: 200px;
  width: 350px;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.--booking-page-map > div {
  height: 100%;
  width: 100%;
}

[data-animate] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}
[data-animate].--show {
  opacity: 1;
  transform: translateY(0px);
}

.--link {
  color: var(--link-color);
  font: var(--link-weight) var(--link-font-size) var(--link-font);
  letter-spacing: var(--link-spacing);
  line-height: var(--link-line-height);
  margin: var(--link-margin);
}

.--cancel-text {
  font: 500 0.87rem Inter;
  line-height: 21px;
  margin-top: 10px;
}

.--cancel-booking-button {
  background: var(--color-danger-600);
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--color-danger-700);
  margin-top: 10px;
}

@media (max-width: 1000px) {
  .--booking-completed-left-container {
    margin-right: 0px;
  }
  .--booking-completed-full-container {
    flex-flow: column;
    padding: 15px;
  }
}
.--checkout-page {
  box-sizing: border-box;
  max-width: 600px;
  margin: auto;
  padding: 20px;
  --input-width: 100%;
}

.--checkout-container {
  overflow-y: auto;
}

.--checkout-subtitle {
  font: 400 0.875rem var(--main-font);
  color: var(--color-gray-900);
  margin-bottom: 10px;
}

.--checkout-detail {
  font: 400 0.875rem var(--main-font);
}

.--checkout-shipping-option {
  box-sizing: border-box;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  margin-bottom: 10px;
  position: relative;
}
.--checkout-shipping-option:has(input:checked) {
  box-shadow: var(--radio-border-checked);
}
.--checkout-shipping-option input {
  cursor: pointer;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
}
.--checkout-shipping-option-header {
  display: flex;
  font: 600 0.875rem var(--main-font);
  justify-content: space-between;
}
.--checkout-shipping-option-description {
  font: 400 0.875rem var(--main-font);
  color: var(--color-gray-800);
}

.--checkout-section, .--order-complete-section {
  margin: 10px 0;
  padding: 15px 0;
  border-bottom: 1px solid var(--color-slate-300);
}

.--checkout-summary-header, .--order-complete-header {
  font: 600 1.5rem var(--main-font);
  letter-spacing: -0.5px;
  margin: 40px 0 20px;
}

.--checkout-summary-items {
  padding: 20px 20px 0px;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  margin-bottom: 20px;
}

.--checkout-item-details-container, .--order-complete-item-details-container {
  width: 100%;
}

.--checkout-item {
  box-sizing: border-box;
  display: flex;
  padding: 5px 0px;
}
.--checkout-item-image {
  width: 80px;
  height: auto;
  border-radius: 10px;
  display: block;
}
.--checkout-item-image-container {
  overflow: hidden;
  border-radius: 10px;
  margin-right: 20px;
  flex-shrink: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.--checkout-item-name {
  font: 600 1rem var(--main-font);
}
.--checkout-item-price {
  font: 600 1rem var(--main-font);
}
.--checkout-item-attribute {
  font: 400 0.875rem var(--main-font);
  color: var(--color-gray-900);
}
.--checkout-item-details {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.--checkout-subtotal-container,
.--checkout-shipping-container,
.--checkout-total-container,
.--checkout-item-discount,
.--order-complete-subtotal-container,
.--order-complete-shipping-container,
.--order-complete-total-container,
.--order-complete-item-discount {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
}

.--checkout-shipping-container, .--order-complete-shipping-container {
  border-top: 1px solid var(--color-gray-500);
  border-bottom: 1px solid var(--color-gray-500);
}

.--checkout-subtotal,
.--checkout-subtotal-amount,
.--checkout-shipping,
.--checkout-shipping-amount,
.--checkout-discount,
.--checkout-discount-amount,
.--order-complete-subtotal,
.--order-complete-subtotal-amount,
.--order-complete-shipping,
.--order-complete-shipping-amount,
.--order-complete-discount,
.--order-complete-discount-amount {
  font: 500 0.875rem var(--main-font);
}

.--checkout-total,
.--order-complete-total {
  font: 600 0.875rem var(--main-font);
}

.--checkout-total-amount,
.--order-complete-total-amount {
  font: 600 1rem var(--main-font);
}

.--checkout-header {
  font: 600 1.25rem Inter;
  letter-spacing: -0.4px;
  margin-bottom: 5px;
}

.--checkout-info-box {
  background: var(--color-blue-50);
  border-radius: 8px;
  box-shadow: 0px 0px 0px 1px var(--color-blue-400);
  box-sizing: border-box;
  font: 600 0.875rem var(--main-font);
  line-height: 20px;
  margin: 10px 0px;
  padding: 10px;
  width: 100%;
  color: rgb(27, 80, 161);
}

.--checkout-sex-select-container {
  display: flex;
  flex-flow: row;
  gap: 10px;
}

.--checkout-city-postcode-container {
  display: flex;
  gap: 10px;
}
.--checkout-city-postcode-container > div {
  width: 100%;
}

.--checkout-terms-container,
.--checkout-same-address-container {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 0.875rem Inter;
  margin: 10px 0px;
}

.--checkout-checkbox {
  box-shadow: var(--color-slate-300) 0px 1px 1px 0px, var(--color-slate-200) 0px 0px 0px 1px, var(--color-slate-100) 0px 2px 5px 0px;
  height: 18px;
  width: 18px;
  display: block;
  border-radius: 4px;
}
.--checkout-checkbox svg {
  width: 18px;
  height: 18px;
}
.--checkout-checkbox-actual {
  cursor: pointer;
  position: absolute;
  opacity: 0;
  width: 0;
  height: 100%;
  width: 100%;
}
.--checkout-checkbox-actual:checked + .--checkout-checkbox {
  background: linear-gradient(to bottom, var(--logo-color), var(--logo-color-darker-10));
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-50);
}
.--checkout-checkbox-container {
  position: relative;
}

.--checkout-hidden {
  display: none;
}

.--checkout-submit-button {
  background: var(--logo-color);
  color: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0px 1px 1px var(--logo-color-darker-10);
  padding: 10px;
  position: relative;
  width: 100%;
}
.--checkout-submit-button:disabled {
  opacity: 0.5;
}
.--checkout-submit-button::after {
  content: "";
  background-image: radial-gradient(75% 75% at center top, color-mix(in srgb, rgba(255, 255, 255, 0.6588235294) 20%, transparent), transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.--input-auto-complete-container {
  position: relative;
  margin: var(--input-margin);
}

.--auto-complete-address-spinner {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
}

.--auto-complete-addresses {
  position: absolute;
  z-index: 1;
  background: white;
  border: 1px solid var(--color-gray-300);
  border-radius: 4px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
}

.--auto-complete-input {
  margin-bottom: 0px;
}

.--address-autocomplete-suggestion {
  box-sizing: border-box;
  border-radius: 6px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 11px 15px;
  width: 100%;
}
.--address-autocomplete-suggestion-not-found {
  border-top: 1px solid var(--color-slate-500);
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}
.--address-autocomplete-suggestion:hover {
  background: var(--color-slate-100);
}
.--address-autocomplete-suggestion-container {
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--color-slate-500) 0px 1px 1px 0px, var(--color-slate-400) 0px 0px 0px 1px, var(--color-slate-200) 0px 2px 5px 0px;
  box-sizing: border-box;
  display: none;
  margin: 5px 0 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}
.--address-autocomplete-suggestion-container.--active {
  display: block;
}

.--checkout-address-container.--hidden,
.--hidden {
  display: none;
}

.--order-complete-page {
  flex: 1;
  background: #f8f9f9;
  padding-bottom: 50px;
}

.--order-complete-header-container {
  max-width: 1000px;
  margin: auto;
  width: 100%;
}

.--order-complete-header {
  text-align: center;
  font: 600 2.5rem Inter;
  letter-spacing: -2px;
  margin: 15px;
}

.--order-complete-subheader {
  font: 500 1.55rem var(--main-font);
  color: var(--color-gray-700);
  margin: 0px 0px 30px;
  text-align: center;
}

.--order-complete-container {
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  max-width: 1000px;
  margin: auto;
  justify-content: space-between;
  width: 100%;
}

.--order-complete-summary-left-side {
  width: 60%;
}

.--order-complete-summary-right-side {
  width: 40%;
}

.--order-complete-item {
  box-sizing: border-box;
  display: flex;
  padding: 5px 0px;
}
.--order-complete-item-image {
  width: 50px;
  height: auto;
  border-radius: 10px;
  display: block;
}
.--order-complete-item-image-container {
  overflow: hidden;
  border-radius: 10px;
  margin-right: 10px;
  flex-shrink: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.--order-complete-item-name {
  font: 600 1rem var(--main-font);
}
.--order-complete-item-price {
  font: 600 1rem var(--main-font);
}
.--order-complete-item-attribute {
  font: 400 0.875rem var(--main-font);
  color: var(--color-gray-900);
}
.--order-complete-item-details {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.--order-complete-summary-items {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.--order-complete-information {
  font: 400 0.875rem var(--main-font);
  margin: 0px 0px 15px;
}

.--order-complete-map {
  border-radius: 8px;
  margin: 0px 0px 20px;
}

.--order-complete-section-header {
  font: 600 1.25rem Inter;
  letter-spacing: -0.4px;
  margin: 0px 0px 10px;
}

.--order-complete-card-used-type {
  display: flex;
  width: 30px;
}

.--order-complete-card-details {
  align-items: center;
  gap: 6px;
  font: 600 0.875rem Inter;
  display: flex;
}

.--order-complete-address-header {
  font: 500 0.95rem Inter;
  margin: 0px 0px 5px;
}

.--order-complete-addresses,
.--order-complete-shipping-information {
  display: flex;
  gap: 60px;
  font: 400 0.875rem Inter;
}

.--order-complete-shipping-header {
  font: 600 0.8rem Inter;
}

.--order-complete-shipping-information {
  margin: 0px 0px 5px;
}

.--order-complete-create-account-button, .--order-complete-manage-account-button {
  background: var(--logo-color);
  color: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0px 1px 1px var(--logo-color-darker-10);
  box-sizing: border-box;
  padding: 10px;
  position: relative;
  width: 100%;
  display: block;
  font: 600 1rem Inter;
  text-align: center;
  margin-top: 10px;
}
.--order-complete-create-account-button:disabled, .--order-complete-manage-account-button:disabled {
  opacity: 0.5;
}
.--order-complete-create-account-button::after, .--order-complete-manage-account-button::after {
  content: "";
  background-image: radial-gradient(75% 75% at center top, color-mix(in srgb, rgba(255, 255, 255, 0.6588235294) 20%, transparent), transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .--order-complete-container {
    flex-direction: column-reverse;
  }
  .--order-complete-summary-left-side, .--order-complete-summary-right-side {
    width: 100%;
  }
}
.--login-page-content {
  max-width: 1000px;
  margin: auto;
  padding-bottom: 50px;
}

.--login-page {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80dvh;
}

.--login-page-title {
  text-align: center;
  font: 600 1.5rem Inter;
  letter-spacing: -0.2px;
  margin: 0px 0px 30px;
}

.--login-page-subtitle {
  font: 500 0.9rem var(--main-font);
  color: var(--color-gray-700);
  margin: 0px 0px 30px;
  text-align: center;
  max-width: 330px;
}

.--login-page-input-container {
  --input-padding: 12px;
  --input-width: 330px;
}

.--login-button {
  background: var(--logo-color);
  box-sizing: border-box;
  color: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  display: block;
  font: 500 0.875rem var(--main-font);
  text-shadow: 0px 1px 1px var(--logo-color-darker-10);
  margin: 10px 0px 20px;
  padding: 13px;
  position: relative;
  text-align: center;
  width: 100%;
}
.--login-button:disabled {
  opacity: 0.5;
}
.--login-button::after {
  content: "";
  background-image: radial-gradient(75% 75% at center top, color-mix(in srgb, rgba(255, 255, 255, 0.6588235294) 20%, transparent), transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.--login-page-forgot-password {
  text-align: center;
  font: 500 0.875rem var(--main-font);
  color: var(--color-gray-900);
}

.--login-password-container {
  position: relative;
}

.--show-password-button {
  --width: 20px;
  --height: 20px;
  --icon-color: var(--color-slate-600);
  --icon-url: url(/images/icons/eye.svg);
  width: var(--width);
  height: var(--height);
  background: transparent;
  box-shadow: 0px 0px 0px 0px;
  padding: 0;
}
.--show-password-button-container {
  top: calc(50% - var(--input-margin-bottom) / 2);
  position: absolute;
  transform: translateY(-50%);
  right: 10px;
}
.--show-password-button::after {
  content: "";
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--icon-color);
  width: var(--width);
  height: var(--height);
  display: block;
}
.--show-password-button.--showing {
  --icon-url: url(/images/icons/eye-off.svg);
}

.--customer-portal-page {
  background: #f8f9f9;
  flex: 1;
  display: flex;
  min-height: 80dvh;
  padding: 50px 0px;
  justify-content: center;
}

.--customer-portal-documents {
  display: flex;
  gap: 10px;
}

.--customer-portal-content {
  box-sizing: border-box;
  max-width: 1000px;
  margin: auto;
  padding: 0px 20px;
  width: 100dvw;
}

.--customer-portal-title {
  text-align: center;
  font: 600 2.5rem var(--main-font);
  letter-spacing: -2px;
  margin: 0px 0px 15px;
}
.--customer-portal-title-container {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}

.--customer-portal-settings {
  font: 600 1.1rem var(--main-font);
}

.--customer-portal-container {
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  max-width: 1000px;
  margin: auto;
  justify-content: space-between;
  width: 100%;
}

.--customer-portal-left-side {
  width: 60%;
}

.--customer-portal-right-side {
  width: 40%;
}

.--customer-portal-section {
  background: #fff;
  box-shadow: 0px 0px 0px 1px #e4e6e9;
  padding: 20px;
  border-radius: 8px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.--customer-portal-section-header {
  align-items: baseline;
  display: flex;
  font: 600 1.25rem var(--main-font);
  justify-content: space-between;
  letter-spacing: -0.4px;
  margin: 0px 0px 10px;
}
.--customer-portal-section-content {
  font: 400 1rem var(--main-font);
  color: #333;
  line-height: 1.5;
}

.--customer-portal-back-link {
  align-self: center;
  display: flex;
  font: 600 0.75rem var(--main-font);
  margin: 0px 0px 10px;
}

.--customer-portal-order-header {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}
.--customer-portal-order-number {
  font: 500 0.875rem var(--main-font);
  margin: 0px 0px 3px;
}
.--customer-portal-order-date {
  font: 400 0.875rem var(--main-font);
  color: #565d6b;
  margin: 0px 0px 10px;
}
.--customer-portal-order-status {
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--color-warning-200);
  font: 600 0.7rem var(--main-font);
}
.--customer-portal-order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  padding: 5px 0px;
}
.--customer-portal-order-item-name {
  font-weight: 600;
}
.--customer-portal-order-item-image {
  display: block;
  height: auto;
  width: 100%;
}
.--customer-portal-order-item-image-container {
  border-radius: 4px;
  overflow: hidden;
  width: 44px;
}
.--customer-portal-order-total {
  border-top: 1px solid #e4e6e9;
  margin-top: 10px;
  padding-top: 10px;
  text-align: end;
  font-size: 0.875rem;
}
.--customer-portal-order-view-details {
  background: var(--logo-color);
  color: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0px 1px 1px var(--logo-color-darker-10);
  box-sizing: border-box;
  padding: 7px;
  position: relative;
  width: 100%;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 10px 0px 0px auto;
  font: 500 0.875rem var(--main-font);
  text-align: center;
}
.--customer-portal-order-view-details:disabled {
  opacity: 0.5;
}
.--customer-portal-order-view-details::after {
  content: "";
  background-image: radial-gradient(75% 75% at center top, color-mix(in srgb, rgba(255, 255, 255, 0.6588235294) 20%, transparent), transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.--customer-portal-order-item-name-image {
  align-items: center;
  display: flex;
  gap: 10px;
}

.--customer-portal-booking-header {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}
.--customer-portal-booking-id {
  font: 500 0.875rem var(--main-font);
  margin: 0px 0px 3px;
}
.--customer-portal-booking-date {
  font: 400 0.875rem var(--main-font);
  color: #565d6b;
  margin: 0px 0px 10px;
}
.--customer-portal-booking-status {
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--color-warning-200);
  font-weight: 600;
  font-size: 0.7rem;
}
.--customer-portal-booking-service {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  padding: 5px 0px;
}
.--customer-portal-booking-service-name {
  font-weight: 600;
}
.--customer-portal-booking-service-image {
  display: block;
  height: auto;
  width: 100%;
}
.--customer-portal-booking-service-image-container {
  border-radius: 4px;
  overflow: hidden;
  width: 44px;
}
.--customer-portal-booking-total {
  border-top: 1px solid #e4e6e9;
  margin-top: 10px;
  padding-top: 10px;
  text-align: end;
  font-size: 0.875rem;
}
.--customer-portal-booking-view-details {
  background: var(--logo-color);
  color: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0px 1px 1px var(--logo-color-darker-10);
  box-sizing: border-box;
  padding: 7px;
  position: relative;
  width: 100%;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 10px 0px 0px auto;
  font: 500 0.875rem var(--main-font);
  text-align: center;
}
.--customer-portal-booking-view-details:disabled {
  opacity: 0.5;
}
.--customer-portal-booking-view-details::after {
  content: "";
  background-image: radial-gradient(75% 75% at center top, color-mix(in srgb, rgba(255, 255, 255, 0.6588235294) 20%, transparent), transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.--customer-portal-task {
  margin: 0px 0px 10px;
}
.--customer-portal-task-separator {
  padding: 0px 0px 10px;
  border-bottom: 1px solid #e4e6e9;
}
.--customer-portal-task-date {
  font: 400 0.875rem var(--main-font);
}
.--customer-portal-task-title {
  font: 600 1rem var(--main-font);
}
.--customer-portal-task-complete {
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
  font: 500 0.75rem var(--main-font);
  padding: 5px;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  background: var(--primary-color);
  color: #fff;
  margin: 7px 0px 7px auto;
}

.--customer-portal-input-container {
  max-width: 270px;
  width: 100%;
}

.--dob-wrap .--day {
  width: 50px;
}
.--dob-wrap .--month {
  width: 50px;
}
.--dob-wrap .--year {
  width: 70px;
}

.--input-unit {
  bottom: 14px;
  font: 400 0.875rem var(--main-font);
  color: #565d6b;
  position: absolute;
  right: 6px;
}

.--input-measurements {
  position: relative;
  display: flex;
  gap: 5px;
}
.--input-measurements .--input-container {
  position: relative;
}
.--input-measurements .--input-box {
  max-width: 80px;
}
.--input-measurements-swap-btn {
  font: 500 0.8rem var(--main-font);
  margin: 0px 0px 15px;
}

.--tracker-entries-outer {
  margin: 15px 0px;
}

.--tracker-entries-inner {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 0px 0px 1px #e4e6e9;
  margin: 4px 0px 25px;
  padding: 20px 10px 20px 18px;
  position: relative;
}

.--tracker-entries-header {
  font: 600 1.4rem var(--main-font);
  margin-bottom: 10px;
}

.--tracker-entry {
  margin: 5px 0px;
}

.--tracker-entry-label {
  font: 600 1.1rem var(--main-font);
  margin-bottom: 5px;
}

.--tracker-entry-details {
  font: 600 0.8rem var(--main-font);
}

.--tracker-entry-date {
  font: 400 0.75rem var(--main-font);
  color: #565d6b;
}

.--tracker-entry-image {
  border-radius: 4px;
  display: block;
  height: auto;
  width: 100%;
}
.--tracker-entry-image-container {
  width: 400px;
}

.--photos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.--customer-portal-track-progress-link {
  background: #000;
  color: #fff;
  border-radius: 4px;
  width: 100%;
  display: block;
  text-align: center;
  font: 600 0.875rem var(--main-font);
  padding: 15px;
  margin: 10px 0px 0px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .--customer-portal-container {
    flex-flow: column-reverse;
  }
  .--customer-portal-left-side, .--customer-portal-right-side {
    flex: 1;
    width: 100%;
  }
  .--photos {
    gap: 0px;
  }
  .--tracker-entry {
    width: 50%;
  }
  .--tracker-entry-image-container {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
  }
}
.--customer-tasks {
  align-items: center;
  background: #fff;
  display: flex;
  border-radius: 8px;
  box-shadow: 0px 0px 0px 1px #e4e6e9;
  justify-content: space-between;
  margin: 4px 0px 25px;
  padding: 20px 10px 20px 18px;
  position: relative;
  transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.--customer-tasks.--completed {
  opacity: 0.75;
}
.--customer-tasks:hover {
  opacity: 1;
  box-shadow: 0px 0px 0px 1px var(--primary-color), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
}
.--customer-tasks-title {
  font: 600 1rem var(--main-font);
  color: #212529;
  margin: 0px 0px 5px;
}
.--customer-tasks-details {
  font: 400 0.875rem var(--main-font);
  color: #212529;
}
.--customer-tasks-status {
  font: 600 0.775rem var(--main-font);
  color: var(--color-danger-800);
  color: var(--color-danger-800);
  background: var(--color-danger-100);
  padding: 3px 9px;
  border-radius: 4px;
  position: absolute;
  top: -9px;
  left: 16px;
}
.--customer-tasks-status.--in-progress {
  background: var(--color-warning-100);
  color: var(--color-warning-800);
}
.--customer-tasks-status.--completed {
  color: var(--color-success-800);
  background: var(--color-success-100);
}

.--customer-task:hover {
  opacity: 1;
  box-shadow: 0px 0px 0px 1px var(--primary-color), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
}
.--customer-task-title {
  font: 600 1.1rem var(--main-font);
  color: #212529;
  margin: 5px 0px 5px;
}
.--customer-task-details {
  font: 400 0.875rem var(--main-font);
  color: #212529;
  max-width: 500px;
  margin: 0px 0px 15px;
}
.--customer-task-status {
  font: 600 0.875rem var(--main-font);
  color: var(--color-danger-800);
  color: var(--color-danger-800);
  background: var(--color-danger-100);
  padding: 3px 9px;
  border-radius: 4px;
}
.--customer-task-status.--in-progress {
  background: var(--color-warning-100);
  color: var(--color-warning-800);
}
.--customer-task-status.--completed {
  color: var(--color-success-800);
  background: var(--color-success-100);
}

.--customer-task-mark-as-complete {
  background: var(--logo-color);
  color: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0px 1px 1px var(--logo-color-darker-10);
  box-sizing: border-box;
  padding: 4px 7px;
  position: relative;
  width: 100%;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 15px 0px 0px 0px;
  font: 500 0.875rem var(--main-font);
  text-align: center;
}
.--customer-task-mark-as-complete::after {
  content: "";
  background-image: radial-gradient(75% 75% at center top, color-mix(in srgb, rgba(255, 255, 255, 0.6588235294) 20%, transparent), transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.--customer-task-mark-as-complete:disabled {
  opacity: 0.5;
}

.--uploading-progress-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(var(--logo-color) 0%, white 0%);
  mask: radial-gradient(farthest-side, transparent 60%, black 61%);
  -webkit-mask: radial-gradient(farthest-side, transparent 60%, black 61%);
  pointer-events: none;
  transition: background 0.2s linear;
}

.--customer-task-image {
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
}
.--customer-task-image-container {
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--color-gray-200);
  overflow: hidden;
  position: relative;
  width: 250px;
}

.--customer-task-submission-status {
  font: 600 0.875rem var(--main-font);
  margin: 10px 0px 5px;
}

.--customer-task-submission-feedback {
  font: 400 0.875rem var(--main-font);
  color: #212529;
  margin: 5px 0px;
}

.--no-progress-data {
  font: 600 0.875rem var(--main-font);
  color: #212529;
  margin: 10px 0px;
  text-align: center;
}

.--log-progress {
  background: var(--color-slate-700);
  border-radius: 4px;
  color: #fff;
  box-shadow: 0px 0px 0px 1px var(--color-slate-900), 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  text-shadow: 0px 1px 1px var(--color-slate-900);
  margin: 10px 0px;
  padding: 10px;
  position: relative;
  width: 100%;
}
.--log-progress:not(:disabled):hover {
  background: var(--color-slate-800);
  box-shadow: 0px 0px 0px 1px var(--color-gray-900), 0px 2px 5px 1px rgba(0, 0, 0, 0.15);
}
.--log-progress:not(:disabled):hover::after {
  background-image: radial-gradient(75% 75% at center bottom, color-mix(in srgb, rgba(255, 255, 255, 0.6588235294) 20%, transparent), transparent);
}
.--log-progress:disabled {
  opacity: 0.5;
}
.--log-progress::after {
  content: "";
  background-image: radial-gradient(110% 15% at center top, color-mix(in srgb, rgba(255, 255, 255, 0.56) 30%, transparent), transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.--log-progress-container {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--color-gray-200);
  overflow: hidden;
  padding: 10px;
  position: relative;
  width: 300px;
}

.--save-progress {
  background: var(--logo-color);
  color: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0px 1px 1px var(--logo-color-darker-10);
  margin: 0px 0px 0px 15px;
  padding: 5px;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
.--save-progress:disabled {
  opacity: 0.5;
}
.--save-progress::after {
  content: "";
  background-image: radial-gradient(75% 75% at center top, color-mix(in srgb, rgba(255, 255, 255, 0.6588235294) 20%, transparent), transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.--progress-modal-body {
  padding: 5px;
}

.--customer-task-data-item {
  display: flex;
  flex-flow: column;
  margin: 5px 0px;
}

.--customer-task-data-label {
  font: 600 0.875rem var(--main-font);
}

.--customer-task-data-value {
  font: 400 0.875rem var(--main-font);
}

.--task-booking-confirmed {
  font: 600 1rem var(--main-font);
}
.--task-booking-at {
  font: 400 0.875rem var(--main-font);
}
.--task-booking-with {
  font: 400 0.875rem var(--main-font);
}
.--task-booking-view-details {
  font: 500 0.875rem var(--main-font);
  margin: 10px 0px 0px;
}

.--document-container {
  text-decoration: none;
  color: inherit;
  align-items: center;
  box-shadow: var(--color-slate-300) 0px 1px 1px 0px, var(--color-slate-200) 0px 0px 0px 1px, var(--color-slate-100) 0px 2px 5px 0px;
  border-radius: 4px;
  display: flex;
  flex-flow: column;
  position: relative;
  padding: 15px;
}
.--document-container:hover {
  box-shadow: var(--color-slate-500) 0px 1px 1px 0px, var(--color-slate-400) 0px 0px 0px 1px, var(--color-slate-200) 0px 2px 5px 0px;
}

.--document-icon {
  margin: 10px 0px;
  --width: 20px;
  --height: 20px;
  --icon-color: var(--color-slate-600);
  width: var(--width);
  height: var(--height);
  background: transparent;
  box-shadow: 0px 0px 0px 0px;
  padding: 0;
}
.--document-icon::after {
  content: "";
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--icon-color);
  width: var(--width);
  height: var(--height);
  display: block;
}
.--document-icon.--link {
  --icon-url: url(/images/icons/link.svg);
}
.--document-icon.--file {
  --icon-url: url(/images/icons/file.svg);
}

.--document-title {
  font: 600 0.875rem var(--main-font);
}
.--document-description {
  color: #848d9c;
  font: 300 0.7rem var(--main-font);
}

.--customer-plans {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0px 0px 5px;
}
.--customer-plans-container {
  background: #fff;
  display: block;
  border-radius: 8px;
  box-shadow: 0px 0px 0px 1px #e4e6e9;
  margin: 4px 0px 25px;
  padding: 20px 18px 20px 18px;
  position: relative;
  transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.--customer-plans-container:hover {
  opacity: 1;
  box-shadow: 0px 0px 0px 1px var(--primary-color), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
}
.--customer-plans-name {
  font: 600 1rem var(--main-font);
  color: #212529;
  margin: 0px 0px 5px;
}
.--customer-plans-details {
  font: 400 0.875rem var(--main-font);
  color: #212529;
}
.--customer-plans-status {
  font: 600 0.775rem var(--main-font);
  padding: 3px 9px;
  border-radius: 4px;
  position: absolute;
  top: -9px;
  left: 16px;
  text-transform: capitalize;
}
.--customer-plans-status.--active {
  color: var(--color-success-800);
  background: var(--color-success-100);
}
.--customer-plans-status.--paused {
  color: var(--color-warning-800);
  background: var(--color-warning-100);
}
.--customer-plans-status.--cancelled,
.--customer-plans-status .--canceled {
  color: var(--color-danger-800);
  background: var(--color-danger-100);
}

.--customer-plans-product-container, .--customer-plan-product-container {
  display: flex;
  gap: 10px;
  margin: 10px 0px 0px;
}
.--customer-plans-product-image, .--customer-plan-product-image {
  display: block;
  height: auto;
  width: 100%;
}
.--customer-plans-product-image-container, .--customer-plan-product-image-container {
  width: 80px;
  border-radius: 4px;
  overflow: hidden;
}
.--customer-plans-product-name, .--customer-plan-product-name {
  font: 600 1rem var(--main-font);
  color: #212529;
}
.--customer-plans-product-attributes, .--customer-plan-product-attributes {
  font: 400 0.875rem var(--main-font);
  color: #212529;
}

.--customer-plan-name {
  font: 600 1.1rem var(--main-font);
  color: #212529;
  margin: 5px 0px 5px;
}
.--customer-plan-details {
  font: 400 0.875rem var(--main-font);
  color: #212529;
}
.--customer-plan-status {
  font: 600 0.775rem var(--main-font);
  padding: 3px 9px;
  border-radius: 4px;
  text-transform: capitalize;
}
.--customer-plan-status.--active {
  color: var(--color-success-800);
  background: var(--color-success-100);
}
.--customer-plan-status.--paused {
  color: var(--color-warning-800);
  background: var(--color-warning-100);
}
.--customer-plan-status.--cancelled,
.--customer-plan-status .--canceled {
  color: var(--color-danger-800);
  background: var(--color-danger-100);
}

.--customer-plan-btns-container {
  display: flex;
  gap: 10px;
  margin: 15px 0px 0px;
}
.--customer-plan-btns-pause {
  background: var(--color-warning-100);
  color: var(--color-warning-800);
  padding: 5px 10px;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--color-warning-200);
  font: 500 0.875rem var(--main-font);
}
.--customer-plan-btns-cancel {
  background: var(--color-danger-100);
  color: var(--color-danger-800);
  padding: 5px 10px;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--color-danger-200);
  font: 500 0.875rem var(--main-font);
}
.--customer-plan-btns-restart {
  background: var(--color-success-100);
  color: var(--color-success-800);
  padding: 5px 10px;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--color-success-200);
  font: 500 0.875rem var(--main-font);
}

.--customer-plan-modal-body {
  padding: 5px;
}
.--customer-plan-modal-text {
  font: 500 1rem var(--main-font);
  margin: 10px 0px;
}
.--customer-plan-modal-help-text {
  font: 500 0.875rem var(--main-font);
  margin: 0px 0px 10px;
}
.--customer-plan-modal-cancel-btn {
  background: var(--color-danger-100);
  color: var(--color-danger-800);
  padding: 5px 10px;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--color-danger-200);
  font: 500 0.875rem var(--main-font);
}

.--customer-orders {
  align-items: center;
  background: #fff;
  display: block;
  border-radius: 8px;
  box-shadow: 0px 0px 0px 1px #e4e6e9;
  justify-content: space-between;
  margin: 4px 0px 25px;
  padding: 20px 10px 20px 18px;
  position: relative;
  transition: box-shadow 0.2s ease-in-out;
}
.--customer-orders:hover {
  box-shadow: 0px 0px 0px 1px var(--primary-color), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
}
.--customer-orders-order-number {
  font: 600 0.875rem var(--main-font);
}
.--customer-orders-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0px;
}
.--customer-orders-item-name-image {
  align-items: center;
  display: flex;
  gap: 10px;
}
.--customer-orders-item-name {
  font: 600 0.875rem var(--main-font);
}
.--customer-orders-item-attributes {
  font: 400 0.75rem var(--main-font);
}
.--customer-orders-item-image {
  display: block;
  height: auto;
  width: 100%;
}
.--customer-orders-item-image-container {
  border-radius: 4px;
  overflow: hidden;
  width: 44px;
}
.--customer-orders-item-price-quantity {
  font: 500 0.875rem var(--main-font);
}
.--customer-orders-total {
  border-top: 1px solid #e4e6e9;
  margin: 10px 0px 0px 0px;
  padding: 10px 0px 0px 0px;
  text-align: end;
  font: 600 0.875rem var(--main-font);
}

.--customer-bookings-container {
  align-items: center;
  background: #fff;
  display: block;
  border-radius: 8px;
  box-shadow: 0px 0px 0px 1px #e4e6e9;
  justify-content: space-between;
  margin: 4px 0px 25px;
  padding: 20px 10px 20px 18px;
  position: relative;
  transition: box-shadow 0.2s ease-in-out;
}
.--customer-bookings-container:hover {
  box-shadow: 0px 0px 0px 1px var(--primary-color), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
}
.--customer-bookings-id {
  font: 600 0.875rem var(--main-font);
}
.--customer-bookings-date {
  font: 400 0.875rem var(--main-font);
  color: #6c757d;
  margin: 0px 0px 10px;
}
.--customer-bookings-service {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0px;
}
.--customer-bookings-service-name {
  font: 600 0.875rem var(--main-font);
}
.--customer-bookings-service-staff {
  font: 400 0.875rem var(--main-font);
  color: #6c757d;
}
.--customer-bookings-service-cost {
  font: 400 0.875rem var(--main-font);
  color: #6c757d;
}
.--customer-bookings-total {
  border-top: 1px solid #e4e6e9;
  margin: 10px 0px 0px 0px;
  padding: 10px 0px 0px 0px;
  text-align: end;
  font: 600 0.875rem var(--main-font);
}

.--customer-setting-title {
  font: 600 0.8rem var(--main-font);
}

.--customer-setting-detail {
  font: 400 0.875rem var(--main-font);
}

.--customer-setting-container {
  margin: 10px 0px 10px;
}

.--customer-addresses {
  list-style: none;
  padding: 0;
  margin: 0;
}

.--customer-address {
  margin: 15px 0px;
  background: var(--color-white);
}

.--address-line-name {
  font: 600 0.875rem var(--main-font);
}

.encryption-text {
  width: 870px;
  margin: auto;
}
.encryption-text .top-header {
  text-align: center;
  font: 300 2rem var(--header-font);
  margin-top: 50px;
}
.encryption-text .list-description, .encryption-text ul > li {
  font: 400 1rem var(--header-font);
  width: 870px;
  margin-top: 15px;
  list-style: auto;
}
.encryption-text .submit-btn {
  padding: 12px 20px;
}

.side-chat {
  width: 25%;
  max-width: 500px;
  min-width: 325px;
  border-right: 1px solid var(--color-slate-400);
  box-sizing: border-box;
  background-color: #fff;
}
.side-chat .search-filter-container {
  left: 147px;
  z-index: 10;
}
.side-chat.searching .side-chat-header-container {
  display: none;
}
.side-chat.searching .load-more {
  display: none;
}
.side-chat.searching [data-room-id], .side-chat.searching [data-unread-result] {
  display: none;
}
.side-chat.unread [data-room-id], .side-chat.unread [data-search-result] {
  display: none;
}
.side-chat.unread .load-more {
  display: none;
}
.side-chat .search {
  width: calc(100% - 20px);
  box-sizing: border-box;
  margin: 5px 5px 5px 10px;
  padding: 7px 8px;
  border-radius: 4px;
  border: 0;
  outline: 0;
  background: var(--color-slate-100);
  font: 500 0.875rem var(--text-font);
}
.side-chat .side-chat-header-container {
  height: 45px;
  box-sizing: border-box;
  padding: 10px 20px;
  border-bottom: 1px solid var(--color-slate-200);
}
.side-chat .side-chat-header-container button {
  border-bottom: 3px solid transparent;
  padding-bottom: 2px;
}
.side-chat .side-chat-header-container button.active {
  border-color: var(--logo-color);
}
.side-chat .side-chat-header-container [data-unread-count] {
  position: relative;
}
.side-chat .side-chat-header-container [data-unread-count][data-unread-count="0"]:after {
  display: none;
}
.side-chat .side-chat-header-container [data-unread-count]::after {
  content: attr(data-unread-count);
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--logo-color);
  border-radius: 100%;
  width: 16px;
  height: 16px;
  text-align: center;
  color: #fff;
  font: 500 0.7rem var(--header-font);
  display: flex;
  justify-content: center;
  align-items: center;
}
.side-chat .side-chat-header-container .side-chat-header-txt {
  font: 600 1.25rem var(--header-font);
}

.load-more {
  font: 600 0.875rem var(--header-font);
  color: var(--logo-color-darker-10);
}

.info-box {
  background: var(--color-warning-100);
  padding: 10px;
  box-sizing: border-box;
  border-radius: 4px;
  font: 400 0.8rem var(--header-font);
  color: var(--color-warning-900);
  box-shadow: 0px 0px 0px 1px var(--color-warning-300);
}

.chat-box {
  width: 75%;
}
.chat-box .order-notes {
  width: 100%;
  max-width: 425px;
  background: #fff;
  border-left: 1px solid var(--color-slate-400);
}
.chat-box .order-notes .header {
  min-height: 55px;
  font: 500 1.25rem var(--header-font);
  border-bottom: 1px solid var(--color-slate-400);
}
.chat-box .order-notes textarea {
  border: 0;
  outline: 0;
  resize: none;
}
.chat-box .chat-box-header {
  height: 55px;
  background: #fff;
  border-bottom: 1px solid var(--color-slate-400);
}
.chat-box .chat-box-header .chat-box-with {
  font: 500 0.9rem var(--header-font);
}
.chat-box .chat-box-header .chevron {
  rotate: 90deg;
  --width: 24px;
  --height: 24px;
  --icon-color: var(--text-color);
  display: none;
}
.chat-box .chat-box-header button:not(.icon) {
  padding: 3px 11px;
  height: 30px;
}
.chat-box .chat-box-header .full-btn {
  font: 600 0.9rem var(--text-font);
}
.chat-box .chat-box-header .videocall {
  --icon-color: #fff;
  --width: 24px;
  --height: 24px;
  margin-left: 10px;
}
.chat-box .message-list {
  height: 100%;
  background: #fff;
  overflow-y: auto;
}
.chat-box .message-list .message-date {
  background: #fff;
  border-radius: 4px;
  padding: 5px 8px;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-slate-700);
  margin: 3px auto;
  position: sticky;
  top: 0;
  z-index: 2;
}
.chat-box .message-list .message-container.video-call .message-content-container {
  margin: 3px auto 0px auto;
}
.chat-box .message-list .message-container.video-call .message-content-container.yours, .chat-box .message-list .message-container.video-call .message-content-container.other {
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
}
.chat-box .message-list .message-container.video-call .message-content-container.yours .message-content, .chat-box .message-list .message-container.video-call .message-content-container.other .message-content {
  font: 400 0.8rem var(--header-font);
}
.chat-box .message-list .message-container.video-call .message-status {
  display: none !important;
}
.chat-box .message-list .message-container .message-content-container {
  background: var(--color-gray-100);
  box-shadow: 0px 1px 0px 0px var(--color-gray-200);
  color: var(--text-color);
  max-width: 65%;
  min-width: 50px;
  margin-top: 3px;
  padding: 7px;
}
.chat-box .message-list .message-container .message-content-container.error {
  cursor: pointer;
}
.chat-box .message-list .message-container .message-content-container .error {
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  --icon-color: var(--color-danger-600);
  border-radius: 100%;
  box-sizing: border-box;
  box-shadow: 0px 0px 0px 1px #fff;
  background: #fff;
}
.chat-box .message-list .message-container .message-content-container .message-author {
  font: 500 0.8rem var(--header-font);
}
.chat-box .message-list .message-container .message-content-container .message-content {
  font: 500 0.9rem var(--text-font);
  margin: 1px 0x 3px 20px;
}
.chat-box .message-list .message-container .message-content-container .message-time {
  font: 400 0.7rem var(--header-font);
  text-align: end;
}
.chat-box .message-list .message-container .message-content-container .message-status {
  display: none;
}
.chat-box .message-list .message-container .message-content-container.yours {
  margin-left: auto;
  background: var(--logo-color);
  color: #fff;
}
.chat-box .message-list .message-container .message-content-container.yours .message-status {
  display: block;
  font: 500 0.6rem var(--text-font);
  text-align: end;
  text-transform: capitalize;
}
.chat-box .message-input-container {
  box-sizing: border-box;
  box-shadow: 0px 0px 0px 1px var(--color-gray-300);
  border-radius: 100px;
}
.chat-box .message-input-container input {
  width: 100%;
  height: 43px;
  border: 0;
  outline: 0 !important;
  border-radius: 100px;
  box-sizing: border-box;
}
.chat-box.none-selected {
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-box .not-selected-header {
  font: 200 2.75rem var(--header-font);
}
.chat-box .not-selected-lead {
  width: 588px;
  font: 300 1.1rem/24px var(--header-font);
}

.chat-toolbar {
  border-top: 1px solid var(--color-slate-200);
}

.message-input-padding {
  background: #fff;
}

.send-chat {
  border-radius: 100px;
  padding: 8px 17px;
  height: -moz-fit-content;
  height: fit-content;
}

.transfer-keys-input {
  border: 0;
  outline: 0;
  width: 300px;
  font: 500 2rem var(--header-font);
  border-bottom: 1px solid;
  text-align: center;
}

.encryption-message {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #374151;
  font: 400 0.875rem system-ui, sans-serif;
  padding: 13px 15px;
  border-radius: 4px;
  line-height: 24px;
  box-sizing: border-box;
  max-width: 500px;
  width: 100%;
}

.encryption-side-bar {
  border-left: 2px solid black;
  padding-left: 15px;
}

.video-call-holder {
  background-color: #171717;
  display: flex;
  flex-flow: row;
  height: 100dvh;
  left: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  width: 100%;
  z-index: 11;
}
.video-call-holder:has(.gallery) {
  justify-content: center;
}
.video-call-holder::before {
  content: "";
  position: fixed;
  background-color: rgba(0, 0, 0, 0);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-call-holder .chat-name {
  position: absolute;
  z-index: 11;
  bottom: 10px;
  background: rgba(0, 0, 0, 0.63);
  min-width: 100px;
  font: 500 0.9rem var(--text-font);
  color: #fff;
  padding: 3px 8px;
  text-align: center;
  box-sizing: border-box;
  left: 20px;
  border-radius: 30px;
}
.video-call-holder .gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.video-call-holder .other-view {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  overflow: auto;
  align-items: center;
}
.video-call-holder .other-view:has(.video-call.other) .video-call.yours {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  touch-action: none;
}
.video-call-holder .other-view:has(.video-call.other) .video-call.other {
  flex-grow: 1;
  flex-basis: 0;
  min-width: 325px;
  max-width: 400px;
}
.video-call-holder .chat-box {
  width: 0px;
  transform: translateX(100%);
  flex-shrink: 0;
  transition: transform 0.2s ease-in, width 0s ease-in 0.3s;
}
.video-call-holder .chat-box .order-notes:not(.active) {
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  width: 0;
}
.video-call-holder .chat-box .order-notes.active {
  position: absolute;
  height: 100%;
  z-index: 99;
}
.video-call-holder .chat-box .message-input-container {
  background: #fff;
}
.video-call-holder .chat-box.active {
  width: 325px;
  transform: translateX(0%);
  transition: transform 0.2s ease-in, width 0s ease-in 0s;
}

.video-call-container {
  border-radius: 12px;
  max-width: 400px;
  max-height: 400px;
  overflow: hidden;
}
.video-call-container video {
  -o-object-fit: cover;
     object-fit: cover;
  max-width: 400px;
  max-height: 400px;
}

.call-toolbar {
  background: transparent;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  max-width: 325px;
  transform: translateX(-50%);
  bottom: 70px;
  z-index: 9;
}
.call-toolbar::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  background-color: red;
}
.call-toolbar .toggle-btn, .call-toolbar .end-call-btn {
  background-color: var(--color-slate-800);
  padding: 10px;
  border-radius: 100%;
  z-index: 10;
}
.call-toolbar .toggle-btn.off, .call-toolbar .end-call-btn.off {
  background-color: var(--color-slate-400);
}
.call-toolbar .toggle-btn.off .icon.mic, .call-toolbar .end-call-btn.off .icon.mic {
  --icon-color: #fff;
  --icon-url: url(/images/icons/mic-off.svg);
}
.call-toolbar .toggle-btn.off .icon.videocall, .call-toolbar .end-call-btn.off .icon.videocall {
  --icon-color: #fff;
  --icon-url: url(/images/icons/videocam-off.svg);
}
.call-toolbar .toggle-btn .icon, .call-toolbar .end-call-btn .icon {
  --icon-color: #fff;
  --width: 24px;
  --height: 24px;
}
.call-toolbar .end-call-btn {
  background: var(--color-danger-600);
}
.call-toolbar .end-call-btn .icon {
  --icon-color: #fff;
}

.video-reverse {
  transform: scaleX(-1);
}

.room-login-container {
  width: 325px;
  margin-bottom: 50px;
}

.room-container {
  height: 85px;
  box-sizing: border-box;
  padding: 10px 10px 10px 20px;
  width: 100%;
  position: relative;
  cursor: pointer;
}
.room-container[data-unread-count="0"] .unread-count {
  display: none;
}
.room-container[data-unread-count="0"] .room-preview {
  font-weight: 500;
}
.room-container[data-unread-count="0"] .room-date-time, .room-container[data-unread-count="0"] .room-service, .room-container[data-unread-count="0"] .room-preview {
  color: var(--text-color);
  font-weight: 500;
}
.room-container:after {
  content: "";
  border-bottom: 1px solid var(--color-slate-200);
  width: calc(100% - 20px);
  right: 0px;
  bottom: 0px;
  position: absolute;
}
.room-container.selected, .room-container:hover {
  background: var(--color-slate-100);
}
.room-container .room-date-time, .room-container .room-service {
  font-size: 0.775rem;
  color: var(--logo-color-darker-10);
  font-weight: 600;
}
.room-container .room-date-time {
  position: absolute;
  top: 10px;
  right: 10px;
}
.room-container .room-preview {
  max-width: 270px;
  font-weight: 600;
  font-size: 0.775rem;
}
.room-container .unread-count {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--logo-color);
  border-radius: 100%;
  width: 21px;
  height: 21px;
  text-align: center;
  color: #fff;
  font: 500 0.77rem var(--header-font);
  display: flex;
  justify-content: center;
  align-items: center;
}
.room-container .room-due {
  text-align: end;
  font: 400 0.75rem var(--header-font);
  margin-top: 5px;
}
.room-container div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.call-timer {
  position: fixed;
  top: 10px;
  left: 10px;
  background: var(--color-gray-900);
  color: #fff;
  padding: 2px 6px;
  border-radius: 12px;
}

@media screen and (max-width: 1000px) {
  .chat-room-holder > .chat-container {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    transform: unset;
  }
  .chat-box .not-selected-header {
    font-size: 2.2rem;
  }
  .chat-box .not-selected-lead {
    width: 95%;
    font-size: 1rem;
    margin: auto;
  }
}
@media screen and (max-width: 768px) {
  .video-call-holder .chat-box-header .icon.chevron {
    display: none;
  }
  .chat-container {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100dvh;
    transform: unset;
  }
  .chat-box-header .icon.close {
    display: block;
  }
  .chat-box .message-list .message-container .message-content-container {
    max-width: 95%;
  }
  .side-chat {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    width: 100%;
    max-width: 100%;
    transform: translateY(0px);
    transition: transform 0.2s ease-in;
    z-index: 2;
  }
  .chat-box {
    width: 100%;
    transform: translateY(75px);
    transition: transform 0.15s ease-in, opacity 0s ease-in 0.15s;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .chat-box.active {
    transform: translateY(0);
    pointer-events: all;
    -webkit-user-select: unset;
       -moz-user-select: unset;
            user-select: unset;
    opacity: 1;
    transition: transform 0.15s ease-in, opacity 0.15s ease-in;
  }
  .gallery .your-stream {
    position: absolute;
    z-index: 9;
    top: 10px;
    right: 10px;
  }
  .gallery .your-stream video {
    max-width: 130px;
  }
  .video-call-holder .chat-box {
    border-left: 0px solid var(--color-slate-500);
  }
  .video-call-holder .chat-box.active {
    position: absolute;
    left: 0;
    border: 0;
    width: 100%;
    z-index: 14;
    height: 100vh;
  }
}
.spinner-container {
  position: absolute;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  z-index: 9999999;
  pointer-events: none;
  --spinner-color: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.15s ease-in;
}
.spinner-container.small {
  transform: translate(-50%, -50%) scale(0.5);
}
.spinner-container .spinner-circle {
  position: relative;
  border-top: 5px solid var(--spinner-color);
  border-right: 5px solid var(--spinner-color);
  border-bottom: 5px solid var(--spinner-color);
  border-left: 5px solid transparent;
  transform: translateZ(0);
  animation: spin 1.1s infinite linear;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.loading .spinner-container, .--loading .spinner-container {
  opacity: 1;
}

.white-spinner {
  --spinner-color: rgba(255, 255, 255);
}

.dark-spinner {
  --spinner-color: var(--color-slate-700);
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}/*# sourceMappingURL=business.css.map */