@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-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.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.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-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-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.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.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;
  }
}
.dd, .mm {
  width: 30px;
}

.yyyy {
  width: 50px;
}

.dd, .mm, .yyyy {
  border: 0 !important;
  outline: 0 !important;
}

.input-container {
  position: relative;
  transition: height 0.25s ease, opacity 0.2s ease;
}
.input-container label {
  font: 600 0.9rem var(--text-font);
  color: var(--text-color);
}
.input-container > input[type=text], .input-container input[type=password], .input-container input[type=email], .input-container input[type=time], .input-container input[type=numeric], .input-container textarea {
  box-sizing: border-box;
  padding: 13px 15px;
  border: 0;
  border-radius: 4px;
  font: 500 1rem var(--text-font);
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  outline: 0px !important;
}
.input-container > input[type=text].smaller, .input-container input[type=password].smaller, .input-container input[type=email].smaller, .input-container input[type=time].smaller, .input-container input[type=numeric].smaller, .input-container textarea.smaller {
  padding: 9px 12px;
  font-size: 0.875rem;
  max-width: 300px;
  box-sizing: border-box;
}
.input-container > input[type=text].smaller.w-100, .input-container input[type=password].smaller.w-100, .input-container input[type=email].smaller.w-100, .input-container input[type=time].smaller.w-100, .input-container input[type=numeric].smaller.w-100, .input-container textarea.smaller.w-100 {
  width: 100%;
}
.input-container > input[type=text]:focus-within, .input-container input[type=password]:focus-within, .input-container input[type=email]:focus-within, .input-container input[type=time]:focus-within, .input-container input[type=numeric]:focus-within, .input-container textarea:focus-within {
  box-shadow: 0px 0px 0px 1px var(--color-slate-700);
}
.input-container > input[type=text] + .disabled-help, .input-container input[type=password] + .disabled-help, .input-container input[type=email] + .disabled-help, .input-container input[type=time] + .disabled-help, .input-container input[type=numeric] + .disabled-help, .input-container textarea + .disabled-help {
  display: none;
  position: absolute;
  font: 500 0.7rem "Lato";
  position: absolute;
  top: 19px;
  background: var(--logo-color);
  color: #fff;
  padding: 7px;
  border-radius: 4px;
  width: 200px;
  right: 0;
  opacity: 0;
  transform: translateY(5px) scale(0.95);
  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-logo-darker-10), 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;
}
.input-container > input[type=text]:disabled, .input-container input[type=password]:disabled, .input-container input[type=email]:disabled, .input-container input[type=time]:disabled, .input-container input[type=numeric]:disabled, .input-container textarea:disabled {
  opacity: 0.6;
  background-color: var(--color-slate-200);
}
.input-container > input[type=text]:disabled ~ .icon.eye, .input-container input[type=password]:disabled ~ .icon.eye, .input-container input[type=email]:disabled ~ .icon.eye, .input-container input[type=time]:disabled ~ .icon.eye, .input-container input[type=numeric]:disabled ~ .icon.eye, .input-container textarea:disabled ~ .icon.eye {
  display: none;
}
.input-container > input[type=text]:disabled + .disabled-help, .input-container input[type=password]:disabled + .disabled-help, .input-container input[type=email]:disabled + .disabled-help, .input-container input[type=time]:disabled + .disabled-help, .input-container input[type=numeric]:disabled + .disabled-help, .input-container textarea:disabled + .disabled-help {
  display: block;
}
.input-container > input[type=text]:disabled:hover + .disabled-help, .input-container input[type=password]:disabled:hover + .disabled-help, .input-container input[type=email]:disabled:hover + .disabled-help, .input-container input[type=time]:disabled:hover + .disabled-help, .input-container input[type=numeric]:disabled:hover + .disabled-help, .input-container textarea:disabled:hover + .disabled-help {
  opacity: 1;
  transform: translateY(0px) scale(1);
}
.input-container > input[type=time]:not(.keep-default) {
  text-align: center;
  padding: 11px 15px;
  width: 73px;
  font-size: 0.9rem;
}
.input-container > input[type=time]:not(.keep-default)::-webkit-calendar-picker-indicator {
  display: none;
}
.input-container:has(.touched:invalid) label {
  color: var(--color-danger-700) !important;
}
.input-container > :not(fieldset).touched:invalid, .input-container .business-url-input:invalid {
  color: var(--color-danger-700) !important;
  box-shadow: 0px 0px 0px 1px var(--color-danger-700) !important;
}
.input-container .invalid-msg {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: opacity 0.15s ease, grid-template-rows 0.2s ease, margin 0.1s ease;
  margin: 0px;
  font: 500 0.8rem var(--text-font);
  color: var(--color-danger-700);
  pointer-events: none;
}
.input-container .invalid-msg > div {
  overflow: hidden;
}
.input-container .icon.eye, .input-container .icon.eye-off {
  position: absolute;
  top: 32.25px;
  right: 12px;
  padding: 3px;
  box-sizing: content-box;
}
.input-container .loader-container {
  position: absolute;
  top: 45px;
  right: 28px;
}

.input-currency-code {
  position: absolute;
  bottom: 3px;
  right: 3px;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.input-container input.touched:invalid, .priorly-input input.touched:invalid {
  box-shadow: var(--color-danger-400) 0px 1px 1px 0px, var(--color-danger-700) 0px 0px 0px 1px, var(--color-danger-100) 0px 2px 5px 0px;
  color: var(--color-danger-600);
}
.input-container input.touched:invalid::-moz-placeholder, .priorly-input input.touched:invalid::-moz-placeholder {
  color: var(--color-danger-400);
}
.input-container input.touched:invalid::placeholder, .priorly-input input.touched:invalid::placeholder {
  color: var(--color-danger-400);
}
.input-container.all-touched:has(:invalid) .invalid-msg, .priorly-input.all-touched:has(:invalid) .invalid-msg {
  grid-template-rows: 1fr;
  opacity: 1;
  margin: 5px 0px;
}

.default-text-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-sizing: border-box;
  border: 0 !important;
  outline: 0 !important;
}
.default-text-input.padding {
  padding: 9px;
}
.default-text-input.width {
  width: 305px;
}
.default-text-input: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;
}

.input-checkbox-primary input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0;
}
.input-checkbox-primary input[type=checkbox].full-space {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.input-checkbox-primary .checkbox-span {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  box-shadow: rgba(58, 63, 69, 0.25) 0px 1px 1px 0px, rgba(58, 63, 69, 0.15) 0px 0px 0px 1px, rgba(58, 63, 69, 0.05) 0px 2px 5px 0px;
}
.input-checkbox-primary input:checked + .checkbox-span {
  background: linear-gradient(to bottom, var(--logo-color), var(--logo-color-darker-10));
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-50);
}
.input-checkbox-primary label {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

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

.postcode-city-input {
  width: 300px;
  gap: 5px;
}
.postcode-city-input > input[type=text].smaller {
  width: 50%;
}

.new-location-country {
  width: 300px;
}
.new-location-country .searchable-btn {
  font-size: 0.875rem;
}
.new-location-country .searchable-list {
  top: 60px;
}

.location-icon-uploader {
  border: 1px dashed var(--color-slate-300);
  padding: 10px;
  cursor: pointer;
  min-width: 300px;
  max-width: 400px;
  box-sizing: border-box;
  border-radius: 4px;
  text-align: center;
  width: 100%;
}
.location-icon-uploader.w-100 {
  width: 100%;
}

.location-icon-uploader:hover .upload-header, .location-icon-uploader.dragged-on .upload-header, .location-hero-uploader:hover .upload-header, .location-hero-uploader.dragged-on .upload-header {
  color: var(--color-slate-700);
  --icon-color: var(--color-slate-700);
  background: var(--color-slate-200);
}
.location-icon-uploader.disabled, .location-hero-uploader.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

.upload-header {
  font: 600 0.875rem var(--header-font);
  color: var(--color-slate-500);
  --icon-url: url(/images/icons/upload.svg);
  --size: 18px;
  --icon-color: var(--color-slate-500);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border-radius: 4px;
  background: #fff;
  transition: background-color 0.2s ease-in;
}
.upload-header::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: var(--size);
  height: var(--size);
  display: block;
  margin-right: 5px;
}

.upload-subheader {
  font: 400 0.65rem var(--header-font);
}

.location-icon-input {
  display: none;
}

.radio-input {
  position: relative;
  border-radius: 2px;
  height: 40px;
  width: 100%;
}
.radio-input 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%;
}
.radio-input 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;
}
.radio-input label {
  font: 500 0.9rem "Lato";
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300), rgba(0, 0, 0, 0.07) 0px 0px 0px 0px;
  transition: background-color 0.15s ease-in, box-shadow 0.25s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.searchable-btn {
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  outline: 0px !important;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  text-align: start;
}
.searchable-btn:focus-within, .searchable-btn:active {
  box-shadow: 0px 0px 0px 1px var(--color-slate-700);
}

.searchable-list-container label {
  font: 600 0.9rem var(--text-font);
  color: var(--text-color);
}

.searchable-list {
  top: 70px;
  position: absolute;
  background: #fff;
  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.width-325 {
  max-width: 325px;
}
.searchable-list > div {
  padding: 13px 10px 10px;
}
.searchable-list.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  z-index: 102;
}
.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: 500 1rem var(--text-font);
}
.searchable-list input:focus-within {
  box-shadow: 0px 0px 0px 1px var(--color-slate-700);
}
.searchable-list ul {
  max-height: 150px;
  overflow-y: scroll;
}
.searchable-list ul li {
  cursor: pointer;
  padding: 8px 14px;
  font: 500 0.9rem var(--text-font);
}
.searchable-list ul li:hover, .searchable-list ul li.hovered, .searchable-list ul li.active {
  background-color: var(--color-gray-100);
}

fieldset input {
  font: 500 1rem var(--text-font);
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  outline: 0px !important;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
}
fieldset.touched input.is-required:invalid {
  color: var(--color-danger-700);
  box-shadow: 0px 0px 0px 1px var(--color-danger-700);
}
fieldset.touched:invalid .invalid-msg {
  opacity: 1;
  margin: 5px 0px;
  grid-template-rows: 1fr;
}

fieldset .invalid-msg, .priorly-input .invalid-msg {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: opacity 0.15s ease, grid-template-rows 0.2s ease, margin 0.1s ease;
  margin: 0px;
  font: 500 0.8rem var(--text-font);
  color: var(--color-danger-700);
  pointer-events: none;
}
fieldset .invalid-msg.error-active, .priorly-input .invalid-msg.error-active {
  opacity: 1;
  margin: 5px 0px;
  grid-template-rows: 1fr;
}
fieldset .invalid-msg > div, .priorly-input .invalid-msg > div {
  overflow: hidden;
}

.dashed-image-upload {
  min-height: 200px;
  height: 100%;
  border: 1px dashed var(--color-slate-700);
}

.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;
  }
}
.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);
  }
}
.header-container-index.dark {
  background-color: #020617;
  background-image: linear-gradient(135deg, #020617 0%, #1b2e48 100%);
}
.header-container-index.dark .nav-list li {
  color: #fff;
}
.header-container-index.dark .nav-list .nav-sub-menu li {
  color: var(--text-color);
}
.header-container-index.dark .nav-list .nav-sub-menu li:hover {
  color: #fff;
}
.header-container-index.dark .logo svg {
  color: #fff;
}
.header-container-index.dark .sign-in-btn {
  background-color: #fff;
  color: var(--text-color);
}
.header-container-index.light {
  background-color: #fff;
  background-image: linear-gradient(135deg, #fff 0%, #fff 100%);
}
.header-container-index.light .icon {
  --icon-color: var(--text-color);
}
.header-container-index.light .nav-list li {
  color: var(--text-color);
}
.header-container-index.light .logo svg {
  color: var(--logo-color);
}
.header-container-index.light .sign-in-btn {
  background-color: var(--color-slate);
  color: #fff;
}
.header-container-index .sign-in-btn {
  letter-spacing: -0.5px;
  font: 500 1rem var(--header-font);
  padding: 10px 15px;
  border-radius: 40px;
}
.header-container-index .navbar {
  padding: 20px;
  max-width: 1000px;
  width: 85%;
  position: relative;
  z-index: 3;
}

.nav-list > li {
  padding: 10px 20px;
}
.nav-list li {
  letter-spacing: -0.5px;
  font: 500 1rem var(--header-font);
  position: relative;
}
.nav-list li .nav-sub-menu {
  position: absolute;
  min-width: 200px;
  left: 50%;
  transform: translate(-50%, 10px);
  background: #fff;
  top: 40px;
  box-shadow: 0 14px 35px 0 rgba(9, 9, 12, 0.4);
  border-radius: 6px;
  padding: 5px;
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.15s ease-in, opacity 0.15s ease-in, transform 0.2s ease-in;
}
.nav-list li .nav-sub-menu::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 9px 8px;
  border-color: transparent transparent #fff transparent;
  content: "";
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  transition: top 0.3s ease;
}
.nav-list li .nav-sub-menu li {
  color: var(--text-color);
  transform: translateX(-10px);
  opacity: 0;
  transition: color 0.15s ease-in, background-color 0.2s ease-in, transform 0.2s ease-in, opacity 0.35s ease-in;
}
.nav-list li .nav-sub-menu li:hover {
  background-color: var(--logo-color);
  text-decoration: none;
  color: #fff;
  border-radius: 2px;
}
.nav-list li .nav-sub-menu:hover, .nav-list li .nav-sub-menu:focus-within {
  transform: translate(-50%, 0px);
  visibility: visible;
  opacity: 1;
  display: block;
  z-index: 3;
}
.nav-list li .nav-sub-menu:hover::before, .nav-list li .nav-sub-menu:focus-within::before {
  top: -8px;
}
.nav-list li .nav-sub-menu:hover li, .nav-list li .nav-sub-menu:focus-within li {
  transform: translateX(0px);
  opacity: 1;
}
.nav-list li .nav-sub-menu a {
  width: 100%;
  padding: 10px 20px;
  display: block;
  box-sizing: border-box;
}
.nav-list li:hover, .nav-list li:focus-within {
  text-decoration: underline;
}
.nav-list li:hover ul, .nav-list li:focus-within ul {
  pointer-events: default;
  transform: translate(-50%, 0px);
  visibility: visible;
  opacity: 1;
  display: block;
  z-index: 3;
}
.nav-list li:hover ul::before, .nav-list li:focus-within ul::before {
  top: -8px;
}
.nav-list li:hover ul li, .nav-list li:focus-within ul li {
  transform: translateX(0px);
  opacity: 1;
}

.mobile-nav {
  visibility: hidden;
  display: none;
}
.mobile-nav .hamburger {
  --icon-color: #fff;
  --width: 26px;
  --height: 26px;
}

.nav-item {
  margin-top: 8px;
  margin-bottom: 8px;
}

@media (max-width: 1000px) {
  .desktop-nav {
    display: none;
  }
  .mobile-nav {
    display: flex;
    visibility: visible;
  }
}
.scrollbar::-webkit-scrollbar {
  width: 7px;
  border-radius: 10px;
}

.scrollbar::-webkit-scrollbar-track {
  border-radius: 10px;
  background: transparent;
}

.scrollbar::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 10px 10px rgba(100, 116, 139, 0.4901960784);
  border: 2px solid transparent;
  border-radius: 10px;
}

.smaller-scrollbar::-webkit-scrollbar-thumb {
  border: 6px solid transparent;
}

*:not(:hover):not(.show-scroll).scrollbar::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 10px 10px transparent;
}

.medicine-search-container {
  position: fixed;
  background: #fff;
  max-height: 300px;
  max-width: 800px;
  z-index: 102;
}
.medicine-search-container .contain-search-results {
  max-height: 200px;
  overflow-y: auto;
}

.prescription-item-container {
  --tooltip-top: 70px;
  width: 20%;
}
.prescription-item-container:has(label.d-none) {
  --tooltip-top: 48px;
}
.prescription-item-container:nth-child(1), .prescription-item-container:nth-child(2) {
  width: 40%;
}

.legal-requirement {
  background: var(--color-danger-50);
  box-shadow: 0px 0px 0px 1px var(--color-danger-600);
  height: 19px;
}

.pin-input {
  width: 50px;
  font-size: 1.25rem;
}

.prescription-destination-choice, .radio-choice {
  padding: 15px 23px 12px 15px;
  box-shadow: 0px 0px 0px 1px var(--color-gray-400);
  width: 310px;
}
.prescription-destination-choice input[type=radio], .radio-choice input[type=radio] {
  accent-color: var(--logo-color-darker-10);
  margin-top: 3px;
}
.prescription-destination-choice:has(input:checked), .radio-choice:has(input:checked) {
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10), 0px 0px 0px 4px rgb(202, 202, 240);
}

.radio-choice {
  padding: 10px 23px 7px 12px;
}

.prescription-checkbox {
  box-shadow: 0px 0px 0px 1px var(--color-gray-400);
  position: relative;
}
.prescription-checkbox:has(input:checked) {
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10), 0px 0px 0px 4px rgb(202, 202, 240);
}
.prescription-checkbox input[type=checkbox] {
  width: 13px;
  height: 13px;
}
.prescription-checkbox-label {
  opacity: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hover-copy {
  position: relative;
  cursor: pointer;
  width: -moz-fit-content;
  width: fit-content;
}
.hover-copy::after {
  content: "Copy";
  position: absolute;
  top: 0;
  right: -46px;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  background-color: var(--color-slate-800);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.7rem;
}
.hover-copy:hover::after {
  opacity: 1;
}

.prescription-selected {
  background-color: var(--color-slate-100);
}

.picked-box {
  height: 15px;
  width: 15px;
  border-radius: 2px;
  border: 1px solid var(--color-gray-800);
  box-sizing: border-box;
}

.print-border-top {
  border-top: 1px solid var(--color-gray-400);
}

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

.print-bar {
  background: #fff;
  position: fixed;
  right: 0px;
  bottom: 0px;
  width: 100%;
  border-top: 1px solid var(--color-slate-300);
  z-index: 1;
}

.prescriptions-table {
  min-width: 1000px;
}

.prescription-error {
  width: -moz-fit-content;
  width: fit-content;
  right: 3px;
  z-index: 3;
  background: var(--color-danger-700);
  color: #fff;
}
.prescription-error .icon {
  --icon-color: #fff;
  --width: 16px;
  --height: 16px;
}

.prescriber-id-container {
  border: 1px dashed var(--color-slate-400);
  height: 125px;
  width: 125px;
}

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

.index-header-container {
  height: 75vh;
  z-index: 2;
  position: relative;
}

.header-image {
  position: absolute;
  top: calc(50% + 14px);
  right: -66px;
  width: 500px;
  transform: translateY(-50%);
  z-index: 1;
}
.header-image img {
  -webkit-mask-image: linear-gradient(to bottom, black 62%, transparent 95%);
  mask-image: linear-gradient(to bottom, black 62%, transparent 95%);
}

.index-header-text {
  font: 600 5.5rem var(--header-font);
  letter-spacing: -0.08rem;
  line-height: 1.1;
  color: #fff;
}

.highlight {
  color: var(--logo-color-lighter);
  height: 120px;
}

.highlight-text {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: absolute;
  opacity: 0;
  transform: translateY(-25px);
  transition: transform 0.25s ease-in, opacity 0.25s ease-in;
}

.slide-in {
  transform: translateY(0px);
  opacity: 1;
}

.slide-out {
  transform: translateY(25px);
  opacity: 0;
}

.btn-header {
  padding: 10px 30px;
}
.btn-header.outline {
  background: transparent;
  box-shadow: 0px 0px 0px 1px var(--logo-color);
  transition: box-shadow 0.2s ease-in;
}
.btn-header.outline:hover {
  box-shadow: 0px 0px 0px 2px #fff;
}
.btn-header.full {
  box-shadow: 0px 0px 0px 1px #fff;
  background-color: #fff;
  transition: box-shadow 0.1s ease-in, background-color 0.1s ease-in, color 0.1s ease-in;
}
.btn-header.full:hover {
  color: #fff;
  background-color: var(--logo-color);
  box-shadow: 0px 0px 0px 1px var(--logo-color), 0px 5px 12px 0px rgba(0, 0, 0, 0.25);
}

.phone-template {
  width: 250px;
  height: 520px;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0px 5px 13px 2px rgba(0, 0, 0, 0.2117647059), inset 0px 0px 8px 1px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 4px #000;
  border: 3px solid var(--color-slate-600);
  display: flex;
  flex-flow: column;
}

.create-booking-box {
  --scale-amount: 1;
  --scale-to-amount: 0.9;
}

.the-great-ratsby {
  overflow: hidden;
  --scale-amount: 1;
  --scale-to-amount: 0.9;
}
.the-great-ratsby .calendar {
  width: 230px;
  left: 10px;
  background-color: #020336;
  --month-background: #020336;
  --chevron-color: #f0d115;
  --days-color: #f0d115;
  --dates-color: #f0d115;
  --month-color: #f0d115;
}
.the-great-ratsby .--calendar-date-selector {
  --border-color: #020336;
  --border-active: #020336;
  --border-active-fade: #02033666;
}
.the-great-ratsby .--time-holder {
  --times-background-color: #020336;
  --times-color: #f0d115;
  --time-hover: #fff;
  --time-hover-color: #f0d115;
}
.the-great-ratsby .service-header,
.the-great-ratsby .service-making {
  margin-left: 10px;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
}
.the-great-ratsby .service-making {
  margin-top: 15px;
  color: var(--color-slate-500);
  font-weight: 500 !important;
  font-size: 0.7rem;
}
.the-great-ratsby .template-navbar {
  margin-left: 4px;
  padding: 13px 0px;
  background: #020335;
  border-bottom: 1px solid var(--color-slate-700);
  width: calc(100% - 8px);
  margin-top: 4px;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}
.the-great-ratsby .template-navbar .template-logo-holder {
  width: 40px;
  height: 40px;
  margin: auto;
}
.the-great-ratsby .confirm-booking-btn-container {
  --confirm-btn-hover-background: #030450;
  --confirm-btn-hover-color: #f0d115;
  padding: 5px 10px;
  box-sizing: border-box;
  --confirm-btn-font-size: .8rem;
  --confirm-btn-padding: 13px 10px;
  --confirm-btn-background: #020336;
  --confirm-btn-color: #f0d115;
}
.the-great-ratsby .completion-page-wrapper {
  padding: 10px;
  --details-font-size: .8rem;
  --details-header-font-size: .8rem;
  --details-container-background: #020336;
  --booking-details-header-color: #f0d115;
  --details-font-color: #fff;
  --details-header-color: var(--color-slate-400);
}
.the-great-ratsby .completion-page-wrapper .add-to-calendar {
  display: flex;
  align-items: center;
  padding: 10px;
}
.the-great-ratsby .completion-page-wrapper .add-to-calendar .calendar-icon {
  width: 12px;
  height: 12px;
}
.the-great-ratsby .completion-page-wrapper .add-to-calendar .calendar-txt {
  font-size: 0.6rem;
  font-family: "Lato";
}
.the-great-ratsby .completion-page-wrapper .cancel-btn,
.the-great-ratsby .completion-page-wrapper .resched-btn {
  font-size: 0.7rem;
  padding: 10px;
  margin-top: 5px;
}

.desktop-template {
  background: #fff;
  height: 470px;
  width: 900px;
  border-radius: 4px;
}
.desktop-template .booking-manager-container {
  height: calc(100% - 0px);
}
.desktop-template .booking-manager-toolbar {
  --logo-width: 44.2px;
  --logo-height: 16.9px;
}
.desktop-template .booking-manager-toolbar .nav-link {
  font-size: 0.8rem;
}
.desktop-template .side-calendar .month-changer {
  padding: 5px 0px;
}
.desktop-template .filters-container .service-container {
  padding: 3px 0px;
  margin: 3px 0px;
}
.desktop-template .filters-container .service-container .service-color {
  width: 14px;
  height: 14px;
  border-radius: 100%;
}
.desktop-template.day .calendar-calendar .bottom-big-container {
  height: calc(100% - 57px);
}
.desktop-template .calendar-toolbar {
  padding: 8px;
}
.desktop-template .calendar-toolbar .dropdown-btn {
  font-size: 0.8rem;
  padding: 3px 8px;
  color: var(--color-slate-700);
}
.desktop-template .calendar-toolbar .dropdown-ele {
  font-size: 0.8rem;
  width: 100px;
}
.desktop-template .calendar-toolbar .calendar-toolbar .main-calendar-date {
  font-size: 0.8rem;
  padding: 0px 8px 1px;
}
.desktop-template .calendar-side-bar {
  --logo-size: 16px;
  --logo-text-size: .8rem;
  --calendar-text-size: .7rem;
  --logo-background: #020336;
}
.desktop-template .icon {
  --width: 16px;
  --height: 16px;
}
.desktop-template .icon.check-small {
  --width: 14px;
  --height: 14px;
  --icon-color: #fff;
}
.desktop-template .other-txt {
  font-size: 0.6rem;
}
.desktop-template .header {
  font-size: 0.8rem;
  transition: opacity 0.15s ease-in;
}
.desktop-template .shrink-heights {
  height: 35px;
  margin-top: 10px;
}
.desktop-template button.has-arrow::after,
.desktop-template button.has-arrow::before {
  background-size: 10px 10px !important;
  width: 10px !important;
  height: 10px !important;
}
.desktop-template .calendar-calendar .monthly-row .month {
  font-size: 0.6rem;
}

.index-first-section {
  margin-top: 80px;
}

h2.index-headers {
  font: 600 1.5rem var(--header-font);
}

h3.index-headers {
  font: 500 2.5rem var(--header-font);
  color: var(--logo-color-darker-10);
  margin-top: 5px;
}

.index-headers {
  padding-left: 15px;
}

.index-leads {
  font: 1.1rem/26px var(--text-font);
  color: var(--color-slate-600);
  box-sizing: border-box;
  padding: 0px 15px;
  width: 75%;
}
.index-leads.full-width {
  width: 100%;
}

.glass-card {
  padding: 5px;
  box-sizing: border-box;
}
.glass-card .payment-template {
  --card-holder-background: #fff;
  --template-background: var(--color-slate-50);
  --card-holder-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;
  --card-holder-color: var(--color-slate-500);
  --card-holder-border-radius: 4px;
  --pay-btn-background-color: rgb(85, 85, 221);
  --pay-btn-border-radius: 4px;
  --pay-btn-box-shadow: 0px 0px 0px 1px rgb(60, 60, 215), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --pay-btn-color: rgb(255, 255, 255);
  --pay-btn-weight: 600;
  --template-label-weight: 600;
  --font: Inter;
  --pay-btn-font: Inter;
  --template-color: var(--text-color);
  --template-box-shadow: unset;
  --template-header-weight: 600;
  --template-box-shadow: 0px 0px 0px 1px rgb(85, 85, 221);
  --template-border-radius: 8px;
  background: var(--template-background);
  border-radius: var(--template-border-radius);
  box-sizing: border-box;
  box-shadow: var(--template-box-shadow);
}
.glass-card .payment-template.two {
  --font: Darker Grotesque;
  --template-color: #000;
  --template-background: #d8b3f8;
  --template-header-weight: 900;
  --template-label-weight: 700;
  --card-holder-background: #fff;
  --card-holder-box-shadow: 0px 0px 0px 2px rgb(33, 37, 41), 6px 6px 0px 1px rgb(33, 37, 41);
  --card-holder-color: var(--color-slate-400);
  --card-holder-border-radius: 2px;
  --pay-btn-background-color: #ffa2b5;
  --pay-btn-border-radius: 2px;
  --pay-btn-box-shadow: 0px 0px 0px 2px rgb(33, 37, 41), 6px 6px 0px 1px rgb(33, 37, 41);
  --pay-btn-color: #000;
  --template-box-shadow: 0px 0px 0px 2px #000, 0px 0px 0px 3px #fff;
  --pay-btn-weight: 900;
  --pay-btn-font: Darker Grotesque;
}
.glass-card .payment-template.three {
  --font: "Playfair Display", serif;
  --template-background: #f9f6f2;
  --template-header-weight: 500;
  --template-color: var(--text-color);
  --card-holder-background: #fff;
  --card-holder-box-shadow: 0px 0px 0px 1px rgba(162, 126, 67, 0.2705882353);
  --card-holder-color: var(--color-slate-500);
  --card-holder-border-radius: 0px;
  --pay-btn-background-color: #caae7f;
  --pay-btn-border-radius: 0px;
  --pay-btn-box-shadow: 0px 0px 0px 1px #a27e43;
  --pay-btn-color: #f9f6f2;
  --pay-btn-weight: 600;
  --pay-btn-font: Lato;
  --template-box-shadow: 0px 0px 0px 1px #caae7f;
}
.glass-card .payment-template.four {
  --font: VT323;
  --template-background: rgb(192, 192, 192);
  --template-color: #000;
  --card-holder-background: #fff;
  --card-holder-box-shadow: inset -1px -1px rgb(255, 255, 255), inset 1px 1px rgb(128, 128, 128), inset -2px -2px rgb(223, 223, 223), inset 2px 2px rgb(10, 10, 10);
  --card-holder-color: var(--color-slate-400);
  --card-holder-border-radius: 0px;
  --pay-btn-background-color: rgb(192, 192, 192);
  --pay-btn-border-radius: 0px;
  --pay-btn-box-shadow: inset -1px -1px rgb(10, 10, 10), inset 1px 1px rgb(223, 223, 233), inset -2px -2px rgb(128, 128, 128), inset 2px 2px rgb(255, 255, 255);
  --pay-btn-color: rgba(0, 0, 0, 1);
  --template-box-shadow: inset -1px -1px rgb(10, 10, 10), inset 1px 1px rgb(223, 223, 233), inset -2px -2px rgb(128, 128, 128), inset 2px 2px rgb(255, 255, 255);
  --template-border-radius: 0px;
  --pay-btn-font: VT323;
}
.glass-card .payment-template.five {
  --card-holder-background: #fff;
  --template-background: #fff5d7;
  --card-holder-box-shadow: rgba(159, 211, 199, 0.25) 0px 0px 0px 1px, rgba(159, 211, 199, 0.15) 0px 1px 1px 0px, rgba(159, 211, 199, 0.15) 0px 2px 5px 0px;
  --card-holder-color: var(--color-slate-400);
  --card-holder-border-radius: 4px;
  --pay-btn-background-color: #ff5e6c;
  --pay-btn-border-radius: 4px;
  --pay-btn-box-shadow: 0px 0px 0px 1px #e46161, 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --pay-btn-color: #2c1824;
  --template-color: #2c1824;
  --template-box-shadow: 0px 0px 0px 1px #e46161;
}
.glass-card .payment-template.six {
  --card-holder-background: #142d4c;
  --template-background: #142d4c;
  --template-color: #ececec;
  --card-holder-box-shadow: rgba(159, 211, 199, 0.25) 0px 0px 0px 1px, rgba(159, 211, 199, 0.15) 0px 1px 1px 0px, rgba(159, 211, 199, 0.15) 0px 2px 5px 0px;
  --card-holder-color: rgba(159, 211, 199, 0.25);
  --card-holder-border-radius: 4px;
  --pay-btn-background-color: #9fd3c7;
  --pay-btn-border-radius: 4px;
  --pay-btn-box-shadow: 0px 0px 0px 1px #58857b, 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --pay-btn-color: rgb(0, 0, 0);
  --template-box-shadow: 0px 0px 0px 2px #9fd3c7;
}
.glass-card .payment-template label {
  pointer-events: none;
  font-weight: var(--template-label-weight);
}
.glass-card .payment-template .template-header {
  font-weight: var(--template-header-weight);
}
.glass-card .payment-template .template-color {
  font-family: var(--font);
  color: var(--template-color);
}
.glass-card .payment-template .card-holder {
  background: var(--card-holder-background);
  box-shadow: var(--card-holder-box-shadow);
  box-sizing: border-box;
  color: var(--card-holder-color);
  border-radius: var(--card-holder-border-radius);
}
.glass-card .payment-template .pay-btn {
  background-color: var(--pay-btn-background-color);
  border-radius: var(--pay-btn-border-radius);
  box-shadow: var(--pay-btn-box-shadow);
  color: var(--pay-btn-color);
  display: flex;
  font: var(--pay-btn-weight) 1rem var(--pay-btn-font);
  padding: 10px 0px;
  width: 100%;
}
.glass-card .glass-container {
  background: #161b22;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-sizing: border-box;
  padding: 30px;
  height: 100%;
  overflow: hidden;
}
.glass-card .glass-container.notfications {
  min-height: 350px;
}
.glass-card .glass-container.location-card {
  min-height: 412px;
}
.glass-card .glass-container.shiny {
  position: relative;
  overflow: hidden;
  --size: 600px;
  --y: 0px;
  --x: 0x;
}
.glass-card .glass-container.shiny::after {
  content: "";
  position: absolute;
  width: var(--size);
  height: var(--size);
  opacity: 0.6;
  background: radial-gradient(rgba(85, 85, 221, 0.4), rgba(57, 132, 255, 0) 60%);
  top: calc(var(--y, 0) * 1px - var(--size) / 2);
  left: calc(var(--x, 0) * 1px - var(--size) / 2);
}
.glass-card .glass-header,
.glass-card .glass-link {
  color: #fff;
  text-shadow: 0 2px 4px rgba(71, 97, 206, 0.36);
}
.glass-card .glass-header {
  margin: 0;
  font: 600 1.5rem var(--header-font);
}
.glass-card .glass-lead {
  font: 500 1.5rem var(--text-font);
  color: var(--color-gray-600);
}
.glass-card .glass-link {
  position: relative;
  font: 600 1.25rem var(--header-font);
  width: -moz-fit-content;
  width: fit-content;
}
.glass-card .glass-link:hover {
  color: var(--color-gray-600);
  text-shadow: unset;
}
.glass-card .glass-link:hover::after {
  background-color: var(--color-gray-600);
  transform: rotate(270deg) translateY(3px);
}
.glass-card .glass-link::after {
  background-color: #fff;
  transform: rotate(270deg) translateY(0px);
  width: 24px;
  height: 24px;
  transition: transform 0.1s ease-in;
}
.glass-card .phone-template {
  overflow: hidden;
  background-color: #161718;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.glass-card .phone-template .toolbar {
  font: 500 10px var(--text-font);
  padding: 10px 15px;
  box-sizing: border-box;
  color: #fff;
  border-bottom: 0px;
}
.glass-card .phone-template .toolbar .wifi,
.glass-card .phone-template .toolbar .signal {
  margin-right: 2px;
}
.glass-card .phone-template .toolbar .icon {
  --icon-color: #fff;
  --width: 12px;
  --height: 12px;
}
.glass-card .phone-template .toolbar .icon.battery {
  --width: 14px;
  --height: 14px;
}
.glass-card .phone-template.email {
  position: absolute;
  left: 50px;
}
.glass-card .phone-template.email .email-toolbar {
  padding: 5px 15px 10px;
}
.glass-card .phone-template.email .email-toolbar .email-search {
  background-color: var(--color-gray-900);
  color: var(--color-gray-500);
  font: 500 10px var(--text-font);
  padding: 10px;
  box-sizing: border-box;
  border-radius: 40px;
}
.glass-card .phone-template.email .email-toolbar .email-search .icon {
  --icon-color: #fff;
  --width: 12px;
  --height: 12px;
}
.glass-card .phone-template.email .emails-container {
  padding: 5px 15px 10px;
}
.glass-card .phone-template.email .emails-container .header {
  color: var(--color-gray-500);
  font: 500 10px var(--text-font);
}
.glass-card .phone-template.email .emails-container .email {
  font: 500 10px var(--text-font);
  color: #fff;
  background: #161718;
}
.glass-card .phone-template.email .emails-container .email.new {
  transition: opacity 0.2s ease-in, transform 0.15s ease;
  transition-delay: 0.15s;
}
.glass-card .phone-template.email .emails-container .email.old {
  transition: transform 0.2s ease-in;
}
.glass-card .phone-template.email .emails-container .email .email-logo {
  width: 14px;
  background: #202336;
  height: 14px;
  padding: 8px;
  border-radius: 100%;
  aspect-ratio: 1/1;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 8px;
}
.glass-card .phone-template.email .emails-container .email .title {
  margin-top: 1px;
  margin-bottom: 1px;
}
.glass-card .phone-template.email .emails-container .email .content {
  color: var(--color-gray-500);
}
.glass-card .phone-template.email .emails-container.default .old {
  transform: translateY(-100%);
}
.glass-card .phone-template.email .emails-container.default .new {
  opacity: 0;
  transform: scale(0.75);
}
.glass-card .phone-template.email .emails-container.animate .old {
  transform: translateY(10px);
}
.glass-card .phone-template.email .emails-container.animate .new {
  opacity: 1;
  transform: scale(1);
}
.glass-card .quesitonnaire-emulate-container {
  height: 500px;
}
.glass-card .desktop {
  font: 500 10px var(--text-font);
  box-sizing: border-box;
  color: #fff;
  background: #0a192f;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 1px 1px 20px 0px rgba(0, 0, 0, 0.3764705882), 7px 7px 30px rgba(126, 133, 110, 0.1882352941);
}
.glass-card .desktop.location-emulate {
  width: 600px;
  position: absolute;
  right: -55px;
  bottom: -65px;
}
.glass-card .desktop.location-emulate .location-bar {
  width: 250px;
  background: #202329;
}
.glass-card .desktop.location-emulate .location-bar .location-header {
  background: #292e35;
  border-bottom: 1px solid var(--color-gray-900);
  padding: 12px 15px;
}
.glass-card .desktop.location-emulate .location-bar .location-header .select {
  color: var(--color-gray-200);
}
.glass-card .desktop.location-emulate .location-bar .location-header .search {
  padding: 3px 0px;
}
.glass-card .desktop.location-emulate .location-bar .location-header .search .input {
  background-color: var(--color-gray-900);
  color: var(--color-gray-500);
  font: 500 10px var(--text-font);
  border-radius: 4px;
  padding: 3px;
}
.glass-card .desktop.location-emulate .location-bar .location-header .select-location {
  padding: 3px;
  margin-top: 3px;
}
.glass-card .desktop.location-emulate .location-bar .location-list {
  padding: 12px 15px;
}
.glass-card .desktop.location-emulate .location-bar .location-list .location-two {
  padding-top: 10px;
  border-top: 1px solid var(--color-gray-900);
}
.glass-card .desktop.location-emulate .location-bar .location-list .title {
  font: 600 11px var(--header-font);
}
.glass-card .desktop.location-emulate .location-map {
  height: 350px;
  width: 350px;
  aspect-ratio: 1/1;
  position: relative;
}
.glass-card .desktop.location-emulate .location-map.animate .manchester {
  transform: scale(0.75) translateY(0px);
  opacity: 1;
}
.glass-card .desktop.location-emulate .location-map.animate .location-details {
  transform: scale(1);
  opacity: 1;
}
.glass-card .desktop.location-emulate .location-map.animate .location-details div {
  opacity: 1;
  transform: translateX(0px);
}
.glass-card .desktop.location-emulate .location-map .location-details {
  background: #202329;
  padding: 10px;
  border-radius: 8px;
  position: absolute;
  top: 94px;
  left: 155px;
  font-size: 8px;
  box-shadow: 1px 1px 20px 0px rgba(0, 0, 0, 0.3764705);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s ease-in 0.35s, transform 0.2s ease-in 0.35s;
}
.glass-card .desktop.location-emulate .location-map .location-details .title {
  font: 600 9px var(--header-font);
}
.glass-card .desktop.location-emulate .location-map .location-details div {
  opacity: 0;
  transform: translateX(3px);
  transition: opacity 0.2s ease-in 0.35s, transform 0.2s ease-in 0.35s;
}
.glass-card .desktop.location-emulate .location-map .location-details div:nth-child(0) {
  transition-delay: 0.45s;
}
.glass-card .desktop.location-emulate .location-map .location-details div:nth-child(1) {
  transition-delay: 0.55s;
}
.glass-card .desktop.location-emulate .location-map .location-details div:nth-child(2) {
  transition-delay: 0.65s;
}
.glass-card .desktop.location-emulate .location-map .location-details div:nth-child(3) {
  transition-delay: 0.75s;
}
.glass-card .desktop.location-emulate .location-map .location-details div:nth-child(4) {
  transition-delay: 0.85s;
}
.glass-card .desktop.location-emulate .location-map .location-details div:nth-child(4) {
  transition-delay: 0.95s;
}
.glass-card .desktop.location-emulate .location-map .location-details div:nth-child(5) {
  transition-delay: 1.05s;
}
.glass-card .desktop.location-emulate .location-map .pin {
  position: absolute;
  border-radius: 50%;
  border: 8px solid #161b22;
  width: 8px;
  height: 8px;
  opacity: 0;
  transform: scale(0.75) translateY(-10px);
  transition: opacity 0.2s cubic-bezier(0.87, 0.22, 0.96, 0.55), transform 0.2s cubic-bezier(0.87, 0.22, 0.43, 0.63);
}
.glass-card .desktop.location-emulate .location-map .pin.manchester {
  left: 229px;
  top: 162px;
}
.glass-card .desktop.location-emulate .location-map .pin::after {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  bottom: -30px;
  left: -6px;
  border: 10px solid transparent;
  border-top: 17px solid #161b22;
}
.glass-card .desktop .toolbar {
  border-bottom: 1px solid var(--color-gray-900);
  background: #292e35;
}
.glass-card .desktop .icon {
  --width: 14px;
  --height: 14px;
  --icon-color: #fff;
}
.glass-card .desktop .icon.forward {
  --icon-color: var(--color-gray-800);
}
.glass-card .desktop .icon.lock {
  --width: 10px;
  --height: 10px;
}
.glass-card .desktop .url-bar {
  padding: 5px;
  width: 100%;
  background: #161b22;
  border-radius: 40px;
  letter-spacing: 0.1px;
}
.glass-card .desktop .url-bar .prefix {
  color: var(--color-gray-800);
}
.glass-card .desktop.questionnaire-emulate {
  position: absolute;
  top: 0;
  width: 600px;
}
.glass-card .desktop.questionnaire-emulate .ratsby-header {
  display: flex;
  justify-content: center;
  padding: 5px;
  box-sizing: border-box;
  background: #020336;
  border-bottom: 1px solid #05051d;
}
.glass-card .desktop.questionnaire-emulate .ratsby-header .ratsby-logo {
  width: 25px;
}
.glass-card .desktop.questionnaire-emulate .questionnaire-container {
  width: 220px;
  margin-left: auto;
  margin-right: auto;
}
.glass-card .desktop.questionnaire-emulate .questionnaire-container .input-title {
  font: 400 0.6rem var(--header-font);
  color: var(--color-gray-200);
  margin-bottom: 6px;
  margin-top: 8px;
}
.glass-card .desktop.questionnaire-emulate .questionnaire-container .input-label {
  font: 500 0.5rem var(--header-font);
  color: var(--color-gray-200);
  margin-bottom: 3px;
  margin-top: 8px;
}
.glass-card .desktop.questionnaire-emulate .questionnaire-container .input-label .icon {
  --width: 10px;
  --height: 10px;
  margin-left: -5px;
}
.glass-card .desktop.questionnaire-emulate .questionnaire-container .input-label .chevron-after {
  margin-left: auto;
}
.glass-card .desktop.questionnaire-emulate .questionnaire-container .input-label .chevron-after::after {
  background-color: #fff;
  rotate: 270deg;
  height: 10px;
  width: 10px;
}
.glass-card .desktop.questionnaire-emulate .questionnaire-container .input-label .optional {
  background: #020336;
  padding: 2px 4px;
  border-radius: 2px;
  font: 500 0.5rem "Inter";
  color: #dfc114;
  margin-left: 3px;
}
.glass-card .desktop.questionnaire-emulate .questionnaire-container .input {
  height: 20px;
  padding: 5px;
  width: 100%;
  box-shadow: 0px 0px 0px 1px #234373;
  font: 400 0.5rem var(--header-font);
  color: var(--color-gray-500);
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: #0a192f;
  background-clip: padding-box;
}
.glass-card .desktop.questionnaire-emulate .questionnaire-container .input.line-one {
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
}
.glass-card .desktop.questionnaire-emulate .questionnaire-container .input.city {
  border-bottom-left-radius: 2px;
}
.glass-card .desktop.questionnaire-emulate .questionnaire-container .input.postcode {
  border-bottom-right-radius: 2px;
}
.glass-card .desktop.questionnaire-emulate .questionnaire-container .input.radius {
  border-radius: 2px;
}
.glass-card .chat-emulate-container {
  height: 375px;
}
.glass-card .chat-emulate {
  position: absolute;
  top: 31px;
  left: 39px;
  width: 100%;
  font: 500 10px var(--text-font);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 1px 1px 20px 0px rgba(0, 0, 0, 0.3764705882), 7px 7px 30px rgba(126, 133, 110, 0.1882352941);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.glass-card .chat-emulate .chat-header {
  color: #fff;
  background: #292e35;
  border-bottom: 1px solid var(--color-gray-900);
}
.glass-card .chat-emulate .box {
  background: #202329;
  padding: 5px 10px;
}
.glass-card .chat-emulate .box .msg-container {
  color: var(--text-color);
  max-width: 65%;
  min-width: 50px;
  width: -moz-fit-content;
  width: fit-content;
  box-sizing: border-box;
  padding: 5px;
  border-radius: 4px;
  position: relative;
  color: var(--text-color);
  background: #fff;
  box-shadow: 0px 1px 0px 0px var(--color-gray-600);
  margin-top: 3px;
  font-size: 8px;
}
.glass-card .chat-emulate .box .msg-container.business {
  margin-left: auto;
  background: var(--logo-color);
  color: #fff;
  box-shadow: 0px 1px 0px 0px var(--logo-color-darker-10);
}
.glass-card .chat-emulate .box .msg-container.call {
  background-color: var(--color-gray-800);
  color: #fff;
  margin: 3px auto 0px auto;
  box-shadow: 0px 1px 0px 0px var(--color-gray-900);
}
.glass-card .chat-emulate .send-message {
  background: #292e35;
  border-top: 1px solid var(--color-gray-900);
}
.glass-card .chat-emulate .send-message .input {
  background-color: var(--color-gray-900);
  color: var(--color-gray-500);
  font: 500 10px var(--text-font);
  border-radius: 4px;
}
.glass-card .stat {
  position: absolute;
  background: #202329;
  text-align: center;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 1px 1px 20px 0px rgba(0, 0, 0, 0.3764705882), 7px 7px 30px rgba(26, 26, 26, 0.19);
  color: #fff;
  font: 600 1.2rem var(--header-font);
}
.glass-card .stat.page-view {
  top: 166px;
  width: 200px;
}
.glass-card .stat.started {
  top: 225px;
  left: 190px;
}
.glass-card .stat.completed {
  top: 323px;
  left: 10px;
}
.glass-card .stat.abandoned {
  top: 370px;
  left: 152px;
}
.glass-card .stat.reviews {
  top: 441px;
  left: 54px;
}
.glass-card .stat .stat-title {
  background: #292e35;
}
.glass-card .stat .ratings {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: #b1b1b1;
  overflow: hidden;
}
.glass-card .stat .full-stars {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #dfc114;
  width: 91%;
}
.glass-card .stat .empty-stars:before,
.glass-card .stat .full-stars:before {
  content: "★★★★★";
  font-size: 24px;
}
.glass-card .stat .numerical {
  font: 600 0.8rem var(--header-font);
  margin-top: 5px;
}

.beta-testing {
  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);
  min-width: 250px;
  z-index: 9998;
}

.the-great-ratsby {
  z-index: 1;
}
.the-great-ratsby .not-work {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px;
  border-radius: 5px;
  color: #fff;
  background: rgb(102, 102, 102);
  left: 50%;
  z-index: 99;
  top: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.the-great-ratsby .not-work.active {
  opacity: 1;
}
.the-great-ratsby .side-calendar {
  height: 180px;
}
.the-great-ratsby .big-calendar-days .date {
  font-size: 1rem;
}
.the-great-ratsby .big-calendar-days .day {
  font-size: 0.75rem;
}
.the-great-ratsby .calendar-calendar .icon {
  --width: 16px;
  --height: 16px;
}
.the-great-ratsby .calendar-calendar .big-calendar .big-calendar-times .between-hours.last::after {
  top: 108px;
}
.the-great-ratsby .calendar-calendar .calendar-toolbar .main-calendar-date {
  font-size: 0.775rem;
  min-width: 108px;
  padding: 0px 4px;
}
.the-great-ratsby .calendar-calendar .calendar-toolbar .search-container .icon {
  margin-left: -5px;
}
.the-great-ratsby .calendar-calendar .calendar-toolbar .search-container .search-bar {
  cursor: not-allowed;
  pointer-events: none;
  box-sizing: border-box;
  margin-right: 10px;
}
.the-great-ratsby .calendar-calendar .booking-info-container .booking-close-container .icon {
  --width: 12px;
  --height: 12px;
}
.the-great-ratsby .calendar-calendar .booking-info-container .booking-toolbar .edit,
.the-great-ratsby .calendar-calendar .booking-info-container .booking-toolbar .delete-btn {
  font-size: 0.65rem;
  margin: 0;
}
.the-great-ratsby .calendar-calendar .booking-info-container .booking-toolbar .edit:hover,
.the-great-ratsby .calendar-calendar .booking-info-container .booking-toolbar .delete-btn:hover {
  cursor: not-allowed;
}
.the-great-ratsby .calendar-calendar .booking-info-container .booking-toolbar .edit {
  margin-right: 5px;
}
.the-great-ratsby .calendar-calendar .booking-info-container .booking-name {
  margin-bottom: 0px;
}
.the-great-ratsby .calendar-calendar .booking-info-container .booking-price {
  margin-bottom: 0px;
}

.the-great-ratsby.one.phone-template {
  position: absolute;
  bottom: -15px;
  z-index: 2;
  left: -50px;
  pointer-events: none;
}

.pricing {
  color: #fff;
}
.pricing .pricing-header {
  padding: 0;
  font: 600 3rem var(--header-font);
}
.pricing .pricing-lead {
  margin: 20px 0px;
  font: 1.1rem/26px var(--text-font);
}
.pricing .pricing-box {
  background: #fff;
  color: #000;
  width: 300px;
  margin: 25px auto;
  font: 500 1rem var(--text-font);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.pricing .pricing-box .for {
  font: 600 1.25rem var(--header-font);
}
.pricing .pricing-box .price {
  font: 600 3rem var(--header-font);
}
.pricing .pricing-box .price span {
  position: absolute;
  bottom: 10px;
  color: var(--color-gray-700);
}
.pricing .pricing-box .per {
  color: var(--color-gray-700);
  font-size: 0.875rem;
}
.pricing .pricing-box .price-card-list li {
  padding: 10px 5px;
  background: var(--color-slate-100);
  margin-top: 3px;
  border-radius: 4px;
}
.pricing .pricing-box .price-card-list li .list-for {
  font: 600 0.875rem var(--header-font);
}
.pricing .pricing-box .price-card-list li .list-price {
  font: 600 1.6rem var(--text-font);
  margin: 3px 0px;
}

.tailored {
  --main-font: var(--header-font);
  --primary-color: var(--logo-color);
  --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-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-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;
  --in-person-icon-display: inline;
  --in-person-background-color: rgb(51, 65, 85);
  --in-person-border-radius: 30px;
  --in-person-color: #fff;
  --in-person-font-size: 13px;
  --in-person-font: var(--main-font);
  --in-person-padding: 5px;
  --in-person-weight: 600;
  --in-person-box-shadow: 0px 0px 0px 1px rgb(30, 41, 59);
  --mobile-icon-display: inline;
  --mobile-background-color: rgb(51, 65, 85);
  --mobile-border-radius: 30px;
  --mobile-color: #fff;
  --mobile-font-size: 13px;
  --mobile-font: var(--main-font);
  --mobile-padding: 5px;
  --mobile-weight: 600;
  --mobile-box-shadow: 0px 0px 0px 1px rgb(30, 41, 59);
  --virtual-background-color: rgb(51, 65, 85);
  --virtual-border-radius: 30px;
  --virtual-color: #fff;
  --virtual-font-size: 13px;
  --virtual-font: var(--main-font);
  --virtual-padding: 5px;
  --virtual-weight: 600;
  --virtual-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);
  --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-hover: 0px 0px 0px 1px rgb(60, 60, 215), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --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;
  --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;
  --inner-services-wrapper-background-color: rgb(241, 245, 249);
}
.tailored .show-off-buttons {
  margin-bottom: 30px;
}
.tailored .square-paper {
  height: 545px;
}
.tailored .square-paper::after {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  --square-color: rgba(194 194 194 / 22%);
  background-size: 40px 40px;
  background-image: linear-gradient(to right, var(--square-color) 1px, transparent 1px), linear-gradient(to bottom, var(--square-color) 1px, transparent 1px);
}
.tailored.custom .desktop-template {
  transform: translate(calc(-50% - 200px), -50%);
  transition: background-color 0.25s ease-in, transform 0.2s ease-in;
}
.tailored.custom .coding-box {
  transform: translate(-50%, 0px);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease-in 0.1s, transform 0.25s ease-in 0.1s, visibility 0.25s ease-in 0.1s;
}
.tailored .coding-box {
  box-shadow: 0px 5px 20px 6px rgba(0, 0, 0, 0.2117647059);
  height: 527px;
  left: calc(50% + 480px);
  opacity: 0;
  position: absolute;
  top: 9px;
  transform: translate(-50%, 20px);
  transition: opacity 0.25s ease-in, 0.25s transform ease-in, visibility 0.25s ease-in;
  visibility: hidden;
  width: 435px;
  z-index: 2;
}
.tailored .desktop-template {
  z-index: 2;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  height: 527px;
  overflow: hidden;
  background-color: var(--business-container-background-color);
  transition: background-color 0.25s ease-in, transform 0.2s ease-in 0.1s;
}
.tailored .desktop-template .calendar {
  width: 325px;
}
.tailored .desktop-template .--service-container {
  background: var(--inner-services-wrapper-background-color);
  height: 535px;
  padding: 5px;
  transition: background-color 0.2s ease-in, border 0.2s ease-in, box-shadow 0.2s ease-in;
}
.tailored .desktop-template .--service-container .--book-btn {
  transition: background-color 0.2s ease-in, border-radius 0.2s ease-in, box-shadow 0.2s ease-in;
}
.tailored .desktop-template .--calendar-container {
  box-sizing: border-box;
  transition: background-color 0.2s ease-in, border 0.2s ease-in;
  visibility: visible;
  opacity: 1;
  max-width: 1000px;
  transform: translateY(0px);
  width: 50%;
}
.tailored .desktop-template .--calendar-container .calendar-overflow-container {
  transform: translate(-50%, 5px);
  left: 50%;
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}
.tailored .calendar {
  border-radius: var(--calendar-border-radius);
  box-shadow: var(--calendar-box-shadow);
  padding: var(--calendar-padding);
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, 0px);
  left: 50%;
  transition: transform 0.2s ease-in, opacity 0.2s ease-in;
  width: 325px;
}
.tailored .calendar .--row-holder.--days {
  top: -0.5px;
  position: relative;
  background-color: var(--day-background-color);
}

.index-second-section {
  margin-top: 80px;
  background: var(--color-slate-50);
  padding: 40px 0px 60px 0px;
}

.custom.phone-template {
  margin-left: -50px;
}
.custom.phone-template .calendar {
  top: 50px;
  position: relative;
  background-color: #fff;
  --month-background: var(--color-slate-100);
  --chevron-color: var(--color-slate-700);
  --days-color: var(--text-color);
  --dates-color: var(--color-slate-500);
  --month-color: var(--text-color);
  --font-family: "Lato", sans-serif;
}
.custom.phone-template .--calendar-date-selector {
  top: 50px;
  position: relative;
  --border-color: var(--color-slate-300);
  --border-active: var(--color-slate-700);
  --border-active-fade: #00000077;
}

.show-off-button {
  background: transparent;
  padding: 25px;
  box-shadow: 0px 0px 0px 1px var(--color-slate-400);
  color: var(--color-slate-400);
  border-radius: 4px;
  font-weight: 600;
}

.show-off-button.active {
  box-shadow: 0px 0px 0px 1px var(--color-slate);
  color: var(--color-slate);
}

.developer {
  width: 100vw;
}
.developer .code-option {
  gap: 15px;
}
.developer .code-img {
  width: 48px;
}

.coding-box {
  background: var(--color-slate);
  width: 400px;
  height: 400px;
  border-radius: 8px;
  color: #fff;
  overflow-x: overlay;
}

.code-option {
  box-sizing: border-box;
  padding: 15px;
}

.style-toggle {
  width: 175px;
  margin-top: 10px;
  height: 30px;
}

.the-walking-med-navbar {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-slate-300);
  font-family: Ubuntu, sans-serif;
}

.the-walking-med-logo {
  width: 125px;
  margin: auto;
}

.the-walking-med-progress-bar {
  width: 28%;
  height: 5px;
  background: var(--main-color-lighter);
  transition: height 0.15s ease-in, opacity 0.15s ease-in, background-color 0.2s ease-in, width 0.15s ease-out;
}
.the-walking-med-progress-bar.hide {
  opacity: 0;
  height: 0px;
}

.q-num {
  color: var(--color-slate-500);
  font-size: 0.7rem;
  transition: opacity 0.15s ease-in;
}
.q-num.hide {
  opacity: 0;
}

.the-walking-med-weight-loss {
  font-family: "Lato", sans-serif;
  font: 600 0.8rem Ubuntu;
  letter-spacing: -0.2px;
  margin: 10px 0px 0px 15px;
  color: var(--color-slate-700);
}

.the-walking-med-questionnaire {
  padding-bottom: 30px;
}

.question-holder.desktop {
  width: 275px;
  margin: auto;
  text-align: center;
}

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

.circle {
  background-color: var(--color-slate-300);
  border-radius: 100%;
  height: 12px;
  margin-right: 8px;
  width: 12px;
}

.swapping-question-layout {
  opacity: 0;
  transform: translateY(-15px);
}

.swapping {
  transition: transform 0s ease-in, opacity 0.15s ease-in !important;
}

.current {
  z-index: 99;
}

.template-choices {
  max-width: 120px;
  white-space: nowrap;
}

[data-question-page].swapping-question-layout {
  transform: translate(-50%, -15px);
}
[data-question-page] .active {
  z-index: 2;
}
[data-question-page]:not(.active) {
  z-index: -1;
}
[data-question-page]:not(.active) * input {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
[data-question-page]:not(.active) .swapping {
  transition: transform 0s ease-in, opacity 0s ease-in !important;
}
[data-question-page].go-back {
  transform: translateX(calc(-50% + 40px));
}
[data-question-page].go-forward {
  transform: translateX(calc(-50% - 40px));
}

.question-holder.desktop {
  margin-top: 8px;
  transition: transform 0.25s, opacity 0.15s ease-in;
}
.question-holder.desktop .header,
.question-holder.desktop .other-txt {
  font-family: var(--template-font);
}
.question-holder.desktop label {
  border-radius: var(--template-button-rounding);
  font-family: var(--template-font);
}
.question-holder.desktop .priorly-checkbox-container {
  border-radius: var(--template-button-rounding);
}
.question-holder.desktop .priorly-checkbox-container label {
  height: 11px;
  font-family: var(--template-font);
}
.question-holder.desktop .priorly-checkbox-container input {
  accent-color: var(--main-color);
}
.question-holder.desktop .priorly-checkbox-container:has(input:checked) {
  box-shadow: 0px 0px 0px 2px var(--main-color), rgba(0, 0, 0, 0.07) 0px 0px 0px 0px;
}
.question-holder.desktop .priorly-radio-container label {
  transition: border-radius 0.3s ease-in, background-color 0.15s ease-in, box-shadow 0.25s ease;
  font-family: var(--template-font);
}
.question-holder.desktop .priorly-radio-container input:checked + label {
  background: var(--main-color);
  box-shadow: 0px 0px 0px 1px var(--secondary-color), 0px 0px 0px 3px rgba(0, 0, 0, 0.0784313725);
  color: var(--main-text-color);
}
.question-holder.desktop textarea {
  font-size: 0.8rem;
  margin-top: 8px;
  height: 60px;
  font-family: var(--template-font);
}
.question-holder.desktop.hide {
  opacity: 0;
  transform: translateY(15px);
}
.question-holder.desktop.hide div {
  display: none;
}

.header-button-spacer {
  margin: 50px 0px 100px;
}

.get-started-btn {
  padding: 8px;
}

.index-section-container {
  max-width: 1000px;
  margin: 130px auto 60px;
  padding: 50px 10px;
  gap: 100px;
  box-sizing: border-box;
  width: calc(100% - 100px);
}
.index-section-container.no-gap {
  gap: 0px;
}
.index-section-container.no-margin-top {
  margin: 0px auto 130px;
}
.index-section-container .big-header {
  font-size: 2.5rem;
}
.index-section-container .image-container {
  border-radius: 10px;
  overflow: hidden;
  margin-left: 30px;
}
.index-section-container h2.index-headers, .index-section-container h3.index-headers, .index-section-container .index-leads {
  padding-left: 0px;
}

.lead-text {
  color: var(--color-slate-600);
  font-size: 1.25rem;
  line-height: 28px;
}

.inputs-examples-container {
  --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(--text-font);
  --checkbox-font-size: 0.875rem;
  --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);
}
.inputs-examples-container textarea {
  height: 200px;
}
.inputs-examples-container .input-show {
  width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 10px));
  opacity: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  transition: opacity 0.25s ease-in, transform 0.25s ease-in;
}
.inputs-examples-container .input-show.active {
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: all;
}
.inputs-examples-container .--input-box {
  width: 100%;
}
.inputs-examples-container .--input-box.dd, .inputs-examples-container .--input-box.mm {
  width: 45px;
  text-align: center;
  margin-right: 5px;
}
.inputs-examples-container .--input-box.yyyy {
  width: 60px;
  text-align: center;
}

.bespoke-container .icon {
  --height: 24px;
  --width: 24px;
  --icon-color: var(--logo-color);
}

.bespoke-target {
  width: 100%;
  height: 1px;
  background-color: transparent;
}

.bespoke-option {
  box-sizing: border-box;
  width: 250px;
}

.scrolling-image {
  box-sizing: border-box;
  height: 400px;
  overflow: hidden;
}
.scrolling-image.streamline {
  padding-bottom: 40px;
}

.standard-input {
  --main-font: var(--header-font);
  --primary-color: var(--logo-color);
  --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: rgb(85, 85, 221);
  --back-btn-background-color-hover: var(--primary-color);
  --back-btn-color: rgba(255, 255, 255, 1);
  --back-btn-color-hover: #fff;
  --back-btn-font: var(--main-font);
  --back-btn-font-size: 0.875rem;
  --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;
  --business-container-background-color: #fff;
  --input-label-color: #212529;
  --input-label-font-weight: 600;
  --input-label-font: var(--header-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-label-color: #212529;
  --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(--text-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: 305px;
  --input-margin: 0px 0px 10px 0px;
  --input-transition: box-shadow .15s ease-in-out, color .15s ease-in-out, background-color .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);
  --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: rgba(33, 37, 41, 1);
  --radio-color-hover: #212529;
  --radio-color-checked: #212529;
  --radio-check-radio-size: 12px;
  --radio-check-radio-color: rgb(85, 85, 221);
  --radio-check-radio-color-hover: rgba(0, 0, 0, 0.25);
  --radio-font: var(--text-font);
  --radio-font-size: 0.875rem;
  --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: inline;
  --radio-radio-size: 0px;
  --radio-padding: 20px 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);
  --text-color: rgba(33, 37, 41, 1);
  --text-font-weight: 500;
  --text-element-font: var(--text-font);
  --text-font-size: 0.875rem;
  --text-spacing: 0px;
  --text-decoration: none;
  --text-margin: 10px 0px 10px 0px;
  --medium-header-color: rgba(33, 37, 41, 1);
  --medium-header-font-weight: 600;
  --medium-header-font: var(--header-font);
  --medium-header-font-size: 1.375rem;
  --medium-header-spacing: 0px;
  --medium-header-decoration: none;
  --medium-header-margin: 0px 0px 0px 0px;
  --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: rgb(85, 85, 221);
  --next-btn-background-color-hover: var(--primary-color);
  --next-btn-color: rgba(255, 255, 255, 1);
  --next-btn-color-hover: #fff;
  --next-btn-font: var(--header-font);
  --next-btn-font-size: 0.875rem;
  --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;
  --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);
}

.retro-98 {
  --main-font: VT323, Arial;
  --primary-color: rgb(85, 85, 221);
  --business-container-background-color: rgba(205, 205, 205, 1);
  --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: 0px;
  --input-border: inset -1px -1px rgb(255, 255, 255), inset 1px 1px rgb(128, 128, 128), inset -2px -2px rgb(223, 223, 223), inset 2px 2px rgb(10, 10, 10);
  --input-border-focus: inset -1px -1px rgb(255, 255, 255), inset 1px 1px rgb(128, 128, 128), inset -2px -2px rgb(223, 223, 223), inset 2px 2px rgb(10, 10, 10);
  --input-border-hover: inset -1px -1px rgb(255, 255, 255), inset 1px 1px rgb(128, 128, 128), inset -2px -2px rgb(223, 223, 223), inset 2px 2px rgb(10, 10, 10);
  --input-padding: 9px 9px 9px 9px;
  --input-width: 305px;
  --input-margin: 0px 0px 10px 0px;
  --input-transition: box-shadow .15s ease-in-out, color .15s ease-in-out, background-color .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: rgba(255, 255, 255, 0);
  --radio-background-hover: rgba(255, 255, 255, 0);
  --radio-background-checked: rgba(255, 255, 255, 0);
  --radio-border: 0px 0px 0px 0px rgba(255, 255, 255, 0);
  --radio-border-hover: 0px 0px 0px 0px rgba(255, 255, 255, 0);
  --radio-border-checked: 0px 0px 0px 0px rgba(255, 255, 255, 0);
  --radio-border-radius: 4px;
  --radio-color: #212529;
  --radio-color-hover: #212529;
  --radio-color-checked: #212529;
  --radio-check-radio-size: 4px;
  --radio-check-radio-color: rgba(0, 0, 0, 1);
  --radio-check-radio-color-hover: rgba(255, 255, 255, 1);
  --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: inset 1px 1px rgb(0, 0, 0), inset -1px -1px rgb(255, 255, 255), inset -2px -2px rgb(240, 240, 240);
  --radio-radio-border-checked: inset 1px 1px rgb(0, 0, 0), inset -1px -1px rgb(255, 255, 255), inset -2px -2px rgb(240, 240, 240);
  --radio-radio-border-hover: inset 1px 1px rgb(0, 0, 0), inset -1px -1px rgb(255, 255, 255), inset -2px -2px rgb(240, 240, 240);
  --radio-radio-border-radius: 30px;
  --radio-radio-display: inline;
  --radio-radio-size: 12px;
  --radio-padding: 15px;
  --radio-text-align: left;
  --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);
  --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;
  --next-btn-text-align: left;
  --next-btn-border: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.7), inset -1px -1px 0px 0px rgba(33, 37, 41, 0.77), inset -2px -2px 0px 0px rgba(33, 37, 41, 0.34), inset 2px 2px 0px 0px rgba(255, 255, 255, 0.29);
  --next-btn-border-hover: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.7), inset -1px -1px 0px 0px rgba(33, 37, 41, 0.77), inset -2px -2px 0px 0px rgba(33, 37, 41, 0.34), inset 2px 2px 0px 0px rgba(255, 255, 255, 0.29);
  --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: 0px;
  --next-btn-icon-display: inline;
  --next-btn-icon-size: 16px;
  --next-btn-icon-spacing: 5px;
  --next-btn-spacing: 0px;
  --next-btn-width: fit-content;
  --big-subcategory-button-border-radius: 0px;
  --big-subcategory-button-border-radius-active: 4px;
  --inner-services-wrapper-background-color: rgba(241, 245, 249, 0);
  --subcategory-header-weight: 300;
  --service-wrapper-background-color: rgba(255, 255, 255, 0);
  --big-subcategory-button-background-color: rgba(241, 245, 249, 0);
  --big-subcategory-button-background-color-hover: rgba(241, 245, 249, 0);
  --big-subcategory-button-box-shadow: inset -1px -1px rgb(10, 10, 10), inset 1px 1px rgb(223, 223, 233), inset -2px -2px rgb(128, 128, 128), inset 2px 2px rgb(255, 255, 255);
  --big-subcategory-button-box-shadow-hover: inset -1px -1px rgb(10, 10, 10), inset 1px 1px rgb(223, 223, 233), inset -2px -2px rgb(128, 128, 128), inset 2px 2px rgb(255, 255, 255);
  --service-wrapper-background-color: rgba(205, 205, 205, 1);
  --service-wrapper-box-shadow: inset 0px 1px 0px 0.25px rgb(255, 255, 255), 0px 0px 0px 1px rgb(149, 149, 149), 0px 1px 0px 1px rgb(255, 255, 255), 1px 0px 0px 1px rgb(255, 255, 255), -1px 0px 0px 1px rgb(255, 255, 255);
  --service-wrapper-divider-color: rgba(149, 149, 149, 1);
  --service-wrapper-border-radius: 0px;
  --service-cost-border-radius: 0px;
  --service-cost-box-shadow: inset -1px -1px rgb(255, 255, 255), inset 1px 1px rgb(129, 129, 129);
  --service-cost-background-color: rgba(241, 242, 244, 1);
  --service-duration-border-radius: 0px;
  --service-duration-box-shadow: inset -1px -1px rgb(255, 255, 255), inset 1px 1px rgb(129, 129, 129);
  --service-cost-background-color: rgba(192, 192, 192, 1);
  --service-duration-background-color: rgba(192, 192, 192, 1);
  --location-amount-border-radius: 0px;
  --in-person-border-radius: 0px;
  --mobile-border-radius: 0px;
  --virtual-border-radius: 0px;
  --book-btn-weight: 400;
  --book-btn-background-color: rgb(192, 192, 192);
  --book-btn-background-color-hover: rgb(192, 192, 192);
  --book-btn-color: rgba(0, 0, 0, 1);
  --book-btn-color-hover: rgba(0, 0, 0, 1);
  --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-hover: 0px 0px 0px 1px rgb(60, 60, 215), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  --book-btn-padding: 5px 25px;
  --book-btn-border-radius: 0px;
  --book-btn-box-shadow: inset -1px -1px rgb(10, 10, 10), inset 1px 1px rgb(223, 223, 233), inset -2px -2px rgb(128, 128, 128), inset 2px 2px rgb(255, 255, 255);
  --book-btn-box-shadow-hover: inset -1px -1px rgb(10, 10, 10), inset 1px 1px rgb(223, 223, 233), inset -2px -2px rgb(128, 128, 128), inset 2px 2px rgb(255, 255, 255);
  --service-chosen-background-color: rgba(226, 232, 240, 0);
  --service-chosen-border-radius: 0px;
  --locate-input-border-radius: 0px;
  --locate-input-box-shadow: inset -1px -1px rgb(255 255 255), inset 1px 1px rgb(128 128 128), inset -2px -2px rgb(223 223 223), inset 2px 2px rgb(10 10 10);
  --locate-btn-background-color: rgb(192, 192, 192);
  --locate-btn-color: rgba(0, 0, 0, 1);
  --locate-btn-border-radius: 0px;
  --locate-btn-box-shadow: inset -1px -1px 0px 0px rgb(10, 10, 10), inset 1px 1px 0px 0px rgb(223, 223, 233), inset -2px -2px 0px 0px rgb(128, 128, 128), inset 2px 2px 0px 0px rgb(255, 255, 255);
  --location-wrapper-background-color: rgb(192, 192, 192);
  --location-wrapper-border-radius: 0px;
  --location-wrapper-box-shadow: inset -1px -1px 0px 0px rgb(10, 10, 10), inset 1px 1px 0px 0px rgb(223, 223, 233), inset -2px -2px 0px 0px rgb(128, 128, 128), inset 2px 2px 0px 0px rgb(255, 255, 255);
  --location-service-list-item-background-color: rgb(192, 192, 192);
  --location-service-list-item-color: rgb(2, 3, 54);
  --location-display-background-color: rgba(205, 205, 205, 1);
  --location-display-border-left-color: rgba(255, 255, 255, 1);
  --location-summary-container-box-shadow: inset 0px 1px 0px 0.25px rgb(255, 255, 255), 0px 0px 0px 1px rgb(149, 149, 149), 0px 1px 0px 1px rgb(255, 255, 255), 1px 0px 0px 1px rgb(255, 255, 255), -1px 0px 0px 1px rgb(255, 255, 255);
  --location-summary-container-border-radius: 0px;
  --location-summary-container-background-color: rgba(255, 255, 255, 0);
  --location-summary-wrapper-background-color: rgba(255, 255, 255, 0);
  --calendar-date-selector-box-shadow: inset -1px -1px 0px 0px rgb(10, 10, 10), inset 1px 1px 0px 0px rgb(223, 223, 233), inset -2px -2px 0px 0px rgb(128, 128, 128), inset 2px 2px 0px 0px rgb(255, 255, 255);
  --calendar-date-selector-box-shadow-active: inset -1px -1px 0px 0px rgb(10, 10, 10), inset 1px 1px 0px 0px rgb(223, 223, 233), inset -2px -2px 0px 0px rgb(128, 128, 128), inset 2px 2px 0px 0px rgb(255, 255, 255);
  --calendar-date-selector-padding: 5px 10px 5px 10px;
  --calendar-date-selector-background-color: rgba(192, 192, 192, 1);
  --calendar-date-selector-background-color-active: rgba(192, 192, 192, 1);
  --calendar-date-selector-border-radius: 0px;
  --calendar-date-selector-color: rgba(33, 37, 41, 1);
  --calendar-date-selector-color-active: #212529;
  --calendar-box-shadow: inset -1px -1px rgb(255, 255, 255), inset 1px 1px rgb(128, 128, 128), inset -2px -2px rgb(223, 223, 223), inset 2px 2px rgb(10, 10, 10);
  --calendar-border-radius: 0px;
  --calendar-padding: 2px;
  --chevron-color: rgba(255, 255, 255, 1);
  --date-border-radius: 0px;
  --date-background-color-hover: rgba(0, 0, 128, 1);
  --date-color-hover: rgb(255, 255, 255);
  --month-wrapper-background-color: rgba(144, 144, 144, 1);
  --month-wrapper-color: rgb(255, 255, 255);
  --month-wrapper-weight: 300;
  --month-wrapper-background-color: rgba(144, 144, 144, 1);
  --day-color: rgba(255, 255, 255, 1);
  --day-weight: 300;
  --day-background-color: rgba(144, 144, 144, 1);
}

.neobrutalism {
  --main-font: Darker Grotesque, sans-serif;
  --primary-color: rgb(85, 85, 221);
  --business-container-background-color: rgba(254, 244, 210, 1);
  --input-title-color: #212529;
  --input-title-font-weight: 600;
  --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: 900;
  --input-label-font: var(--main-font);
  --input-label-font-size: 16px;
  --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 0px 0px 2px rgb(33, 37, 41), 6px 6px 0px 1px rgb(33, 37, 41);
  --input-border-focus: 0px 0px 0px 2px rgb(33, 37, 41), 2px 2px 0px 1px rgb(33, 37, 41);
  --input-border-hover: 0px 0px 0px 2px rgb(33, 37, 41), 4px 4px 0px 1px rgb(33, 37, 41);
  --input-padding: 9px 9px 9px 9px;
  --input-width: 305px;
  --input-margin: 0px 0px 10px 0px;
  --input-transition: box-shadow .15s ease-in-out, color .15s ease-in-out, background-color .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 2px rgb(33, 37, 41), 6px 6px 0px 0px rgb(33, 37, 41);
  --radio-border-hover: 0px 0px 0px 2px rgb(33, 37, 41), 4px 4px 0px 0px rgb(33, 37, 41);
  --radio-border-checked: 0px 0px 0px 2px rgb(33, 37, 41), 4px 4px 0px 0px rgb(33, 37, 41);
  --radio-border-radius: 4px;
  --radio-color: rgba(33, 37, 41, 1);
  --radio-color-hover: #212529;
  --radio-color-checked: rgba(0, 0, 0, 1);
  --radio-check-radio-size: 9px;
  --radio-check-radio-color: rgb(85, 85, 221);
  --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: rgba(255, 201, 1, 1);
  --radio-radio-background-hover: rgb(255, 255, 255);
  --radio-radio-border: 0px 0px 0px 2px rgb(33, 37, 41);
  --radio-radio-border-checked: 0px 0px 0px 2px rgb(33, 37, 41);
  --radio-radio-border-hover: 0px 0px 0px 2px rgb(33, 37, 41);
  --radio-radio-border-radius: 30px;
  --radio-radio-display: inline;
  --radio-radio-size: 16px;
  --radio-padding: 20px 15px;
  --radio-text-align: center;
  --radio-weight: 600;
  --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);
  --medium-header-color: #212529;
  --medium-header-font-weight: 700;
  --medium-header-font: var(--main-font);
  --medium-header-font-size: 26px;
  --medium-header-spacing: 0px;
  --medium-header-decoration: none;
  --medium-header-margin: 0px 0px 0px 0px;
  --next-btn-text-align: left;
  --next-btn-border: 0px 0px 0px 2px rgb(33, 37, 41), 3px 3px 0px 1px rgb(33, 37, 41);
  --next-btn-border-hover: 0px 0px 0px 1px rgb(33, 37, 41), 0px 0px 0px 1px rgb(33, 37, 41);
  --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: 600;
  --next-btn-border-radius: 1px;
  --next-btn-icon-display: inline;
  --next-btn-icon-size: 16px;
  --next-btn-icon-spacing: 5px;
  --next-btn-spacing: 0px;
  --next-btn-width: fit-content;
  --business-container-background-color: rgba(254, 244, 210, 1);
  --subheader-weight: 600;
  --subcategory-header-font-size: 20px;
  --subcategory-header-weight: 900;
  --subcategory-service-count-weight: 900;
  --big-subcategory-button-box-shadow: 6px 6px 0px 1px rgba(0, 0, 0, 1), 0px 0px 0px 2px rgba(0, 0, 0, 1);
  --big-subcategory-button-box-shadow-hover: 6px 6px 0px 1px rgba(0, 0, 0, 1), 0px 0px 0px 2px rgba(0, 0, 0, 1);
  --big-subcategory-button-background-color: rgba(255, 255, 255, 1);
  --big-subcategory-button-background-color-hover: rgba(255, 255, 255, 1);
  --inner-services-wrapper-background-color: rgba(20, 22, 26, 1);
  --service-wrapper-box-shadow: 0px 0px 0px 0px rgb(0, 0, 0);
  --service-wrapper-border-radius: 4px;
  --service-wrapper-divider-size: 3px;
  --service-wrapper-divider-color: rgba(0, 0, 0, 1);
  --service-name-weight: 900;
  --service-name-font-size: 18px;
  --book-btn-font-size: 18px;
  --book-btn-border-radius: 50px;
  --book-btn-padding: 5px 20px 8px 20px;
  --book-btn-weight: 900;
  --book-btn-box-shadow: 4px 3px 0px 1px rgb(33, 37, 41), 0px 0px 0px 2px rgb(33, 37, 41);
  --book-btn-box-shadow-hover: 4px 3px 0px 1px rgb(33, 37, 41), 0px 0px 0px 2px rgb(33, 37, 41);
  --location-amount-border-radius: 4px;
  --location-amount-box-shadow: 0px 0px 0px 2px rgb(85, 85, 221);
  --location-amount-weight: 900;
  --service-cost-border-radius: 4px;
  --service-cost-box-shadow: 0px 0px 0px 2px rgb(1, 1, 1);
  --service-cost-font-size: 12px;
  --service-cost-weight: 900;
  --in-person-weight: 900;
  --in-person-box-shadow: 0px 0px 0px 2px rgb(30, 41, 59);
  --in-person-border-radius: 4px;
  --mobile-weight: 900;
  --mobile-box-shadow: 0px 0px 0px 2px rgb(30, 41, 59);
  --mobile-border-radius: 4px;
  --virtual-weight: 900;
  --virtual-box-shadow: 0px 0px 0px 2px rgb(30, 41, 59);
  --virtual-border-radius: 4px;
  --service-duration-background-color: rgba(20, 22, 26, 1);
  --service-duration-color: rgba(255, 255, 255, 1);
  --service-duration-border-radius: 4px;
  --service-duration-box-shadow: 0px 0px 0px 2px rgb(33, 37, 41);
  --service-duration-font-size: 12px;
  --service-duration-weight: 900;
  --service-chosen-background-color: rgba(33, 37, 41, 1);
  --calendar-date-selector-weight: 900;
  --calendar-date-selector-font-size: 16px;
  --calendar-date-selector-box-shadow: 6px 6px 0px 1px rgb(33, 37, 41), 0px 0px 0px 2px rgb(33, 37, 41);
  --calendar-date-selector-box-shadow-active: 6px 6px 0px 1px rgb(33, 37, 41), 0px 0px 0px 2px rgb(33, 37, 41);
  --calendar-box-shadow: inset 0px 0px 0px 4px rgb(33, 37, 41), 0px 0px 0px 1px rgb(33, 37, 41);
  --calendar-padding: 4px 4px 4px 4px;
  --day-color: rgba(255, 255, 255, 1);
  --day-weight: 600;
  --day-background-color: rgba(0, 0, 0, 1);
  --month-wrapper-color: rgba(255, 255, 255, 1);
  --month-wrapper-weight: 600;
  --month-wrapper-background-color: rgba(0, 0, 0, 1);
  --chevron-color: rgba(255, 255, 255, 1);
  --date-weight: 700;
}

.midnight {
  --main-font: Inter, sans-serif;
  --primary-color: rgb(85, 85, 221);
  --input-title-color: rgb(255, 255, 255);
  --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: rgb(255, 255, 255);
  --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(30, 41, 59);
  --input-background-color-hover: rgb(30, 41, 59);
  --input-background-color-focus: rgb(30, 41, 59);
  --input-weight: 500;
  --input-font-size: 14px;
  --input-font: var(--main-font);
  --input-color: rgb(255, 255, 255);
  --input-color-hover: rgb(255, 255, 255);
  --input-color-focus: rgb(255, 255, 255);
  --input-border-radius: 4px;
  --input-border: 0px 1px 1px 0px rgb(75, 98, 120), 0px 0px 0px 1px rgb(71, 82, 96), 0px 2px 5px 0px rgb(33, 37, 41);
  --input-border-focus: 0px 1px 1px 0px rgb(103, 128, 152), 0px 0px 0px 1px rgb(117, 131, 150), 0px 2px 5px 0px rgb(33, 37, 41);
  --input-border-hover: 0px 1px 1px 0px rgb(103, 128, 152), 0px 0px 0px 1px rgb(117, 131, 150), 0px 2px 5px 0px rgb(33, 37, 41);
  --input-padding: 9px 9px 9px 9px;
  --input-width: 305px;
  --input-margin: 0px 0px 10px 0px;
  --input-transition: box-shadow .15s ease-in-out, color .15s ease-in-out, background-color .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: rgba(30, 41, 59, 1);
  --radio-background-hover: rgba(51, 65, 85, 1);
  --radio-background-checked: rgba(51, 65, 85, 1);
  --radio-border: 0px 1px 1px 0px rgb(75, 98, 120), 0px 0px 0px 1px rgb(71, 82, 96), 0px 2px 5px 0px rgb(33, 37, 41);
  --radio-border-hover: 0px 0px 0px 1px rgb(203, 213, 225);
  --radio-border-checked: 0px 0px 0px 1px rgb(33, 37, 41), 0px 0px 0px 3px rgb(255, 255, 255);
  --radio-border-radius: 4px;
  --radio-color: rgba(203, 213, 225, 1);
  --radio-color-hover: rgba(255, 255, 255, 1);
  --radio-color-checked: rgba(255, 255, 255, 1);
  --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: inline;
  --radio-radio-size: 0px;
  --radio-padding: 20px 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);
  --medium-header-color: rgb(255, 255, 255);
  --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;
  --next-btn-text-align: left;
  --next-btn-border: 0px 0px 0px 1px rgb(60, 60, 215), 0px 0px 0px 1px rgb(33, 37, 41), 0px 2px 5px 0px rgb(33, 37, 41);
  --next-btn-border-hover: 0px 0px 0px 1px rgb(60, 60, 215), 0px 0px 0px 1px rgb(33, 37, 41), 0px 2px 5px 0px rgb(33, 37, 41);
  --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;
  --business-container-background-color: rgb(15, 23, 42);
  --index-header-color: rgb(255, 255, 255);
  --subheader-color: rgb(255, 255, 255);
  --subcategory-header-color: rgb(241, 245, 249);
  --subcategory-service-count-color: rgb(241, 245, 249);
  --timer-background-color: rgba(51, 65, 85, 1);
  --timer-color: rgba(255, 255, 255, 1);
  --timer-time-color: rgba(255, 255, 255, 1);
  --service-wrapper-divider-color: #475569;
  --service-name-color: rgb(255, 255, 255);
  --service-name-weight: 500;
  --big-subcategory-button-background-color: rgba(30, 41, 59, 1);
  --big-subcategory-button-background-color-hover: rgba(30, 41, 59, 1);
  --big-subcategory-button-box-shadow: 0px 0px 0px 1px rgb(51, 65, 85), 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  --big-subcategory-button-box-shadow-hover: 0px 0px 0px 1px rgb(51, 65, 85), 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  --inner-services-wrapper-background-color: rgba(30, 41, 59, 1);
  --service-wrapper-background-color: rgba(51, 65, 85, 1);
  --service-wrapper-box-shadow: 0px 0px 0px 1px rgb(71, 85, 105), 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  --service-description-color: rgb(255, 255, 255);
  --service-description-weight: 400;
  --expand-btn-color: rgba(96, 231, 196, 1);
  --expand-btn-color-hover: rgba(96, 231, 196, 1);
  --service-chosen-background-color: rgba(42, 53, 69, 1);
  --change-location-btn-color: rgba(96, 231, 196, 1);
  --change-location-btn-color-hover: rgba(96, 231, 196, 1);
  --change-location-btn-color: rgba(96, 231, 196, 1);
  --change-location-btn-color-hover: rgba(96, 231, 196, 1);
  --change-btn-color: rgba(96, 231, 196, 1);
  --change-btn-color-hover: rgba(96, 231, 196, 1);
  --locate-store-color: rgb(255, 255, 255);
  --locate-input-background-color: rgba(51, 65, 85, 1);
  --locate-input-color: rgb(255, 255, 255);
  --locate-input-box-shadow: 0px 0px 0px 1px rgb(100, 116, 139);
  --location-name-color: rgb(255, 255, 255);
  --location-address-color: rgba(148, 163, 184, 1);
  --location-display-background-color: rgb(51, 65, 85);
  --location-summary-wrapper-background-color: rgba(51, 65, 85, 1);
  --location-summary-wrapper-border-radius: 4px;
  --location-summary-wrapper-box-shadow: 0px 0px 0px 1px rgb(71, 85, 105), 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  --location-summary-container-background-color: rgba(42, 53, 69, 1);
  --location-summary-name-color: rgba(253, 253, 254, 1);
  --location-summary-address-color: rgba(148, 163, 184, 1);
  --location-wrapper-background-color: rgb(15, 23, 42);
  --location-wrapper-box-shadow: 0px 0px 0px 1px rgb(125, 135, 147);
  --calendar-date-selector-background-color: rgba(51, 65, 85, 1);
  --calendar-date-selector-color: rgb(255, 255, 255);
  --calendar-date-select-box-shadow: 0px 0px 0px 1px rgb(71, 85, 105), 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  --calendar-background-color: rgb(30, 41, 59);
  --chevron-background-color: rgba(51, 65, 85, 0);
  --chevron-color: rgb(241, 245, 249);
  --chevron-box-shadow: 0px 0px 0px 0px rgb(255, 255, 255);
  --month-wrapper-background-color: rgb(15, 23, 42);
  --month-wrapper-color: rgb(255, 255, 255);
  --day-background-color: rgb(15, 23, 42);
  --day-color: rgb(255, 255, 255);
  --dates-holder-background-color: rgb(30, 41, 59);
  --date-color: rgb(233, 238, 244);
  --date-background-color: rgba(255, 255, 255, 0);
  --time-holder-background-color: rgba(51, 65, 85, 1);
  --time-holder-background-color-hover: rgba(51, 65, 85, 1);
  --time-holder-color: rgb(255, 255, 255, 1);
  --time-holder-color-hover: rgb(255, 255, 255, 1);
  --time-holder-box-shadow: 0px 0px 0px 1px rgb(71, 85, 105), 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);
  --times-box-shadow: 0px 0px 0px 1px rgb(148, 163, 184), 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  --times-background-color: rgba(51, 65, 85, 1);
  --times-background-color-hover: rgba(255, 255, 255, 1);
  --times-color: rgb(255, 255, 255);
  --times-color-hover: rgba(51, 65, 85, 1);
}

.index-section-container .options-container {
  width: 42%;
  flex-shrink: 0;
  box-sizing: border-box;
  box-shadow: var(--color-slate-300) 0px 1px 1px 0px, var(--color-slate-300) 0px 0px 0px 1px, var(--color-slate-200) 0px 2px 5px 3px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.index-section-container .page-options-box.active {
  box-shadow: unset;
  position: absolute;
  top: 0;
  left: 0;
  height: 378px;
  opacity: 0;
  transform: translateX(15px);
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0, 0.7, 0.8, 1), opacity 0.55s cubic-bezier(0, 0.7, 0.8, 1);
}
.index-section-container.animations-bespoke .page-options-box.active {
  opacity: 1;
  transform: translateX(0px);
}
.index-section-container.animations-bespoke.been .page-options-box.active {
  color: rgba(128, 128, 128, 0.75);
  opacity: 0;
  transform: translateX(-30px);
}
.index-section-container .--input-radio .option {
  position: absolute;
  opacity: 0;
}
.index-section-container .standard-input .fake-align,
.index-section-container .midnight .fake-align,
.index-section-container .neobrutalism .fake-align {
  left: 0%;
  transform: translateX(132.5px);
  width: -moz-fit-content;
  width: fit-content;
}
.index-section-container .neobrutalism .option {
  opacity: 1;
}
.index-section-container .retro-98 .fake-align {
  left: 0px;
  transform: translateX(32px);
}
.index-section-container .retro-98 .option {
  opacity: 1;
}

.fake-align {
  position: absolute;
  transition: transform 0.35s ease-in;
}

.fake-display-column-shift {
  position: relative;
}
.fake-display-column-shift.radio {
  height: 162px;
  transition: margin-top 0.25s ease-in;
}
.fake-display-column-shift.input-box {
  height: 70px;
}
.fake-display-column-shift .--input-label,
.fake-display-column-shift .--input-box,
.fake-display-column-shift .--input-radio {
  position: absolute;
}
.fake-display-column-shift .--input-radio {
  width: 100%;
}
.fake-display-column-shift.rows.input-box .--input-label {
  top: 27px;
}
.fake-display-column-shift.rows.input-box .--input-box {
  top: 18px;
  left: 150px;
}
.fake-display-column-shift.rows.radio {
  margin-top: 10px;
}
.fake-display-column-shift.rows.radio .fake-align {
  left: 50%;
  transform: translateX(-50%);
  width: -moz-fit-content;
  width: fit-content;
}
.fake-display-column-shift.rows.radio .--input-radio {
  top: 0px;
  left: 150px;
}
.fake-display-column-shift.rows.radio .--input-radio.second {
  top: 53px;
}
.fake-display-column-shift.rows.radio .--input-radio:last-of-type {
  top: 103px;
}
.fake-display-column-shift.column .--input-label {
  top: 0px;
  left: 0px;
}
.fake-display-column-shift.column .--input-box {
  top: 23px;
  left: 0px;
}
.fake-display-column-shift.column .--input-radio {
  width: 100%;
  top: 23px;
  left: 0px;
}
.fake-display-column-shift.column .--input-radio.second {
  top: 73px;
}
.fake-display-column-shift.column .--input-radio:last-of-type {
  top: 123px;
}

.bespoke-show-off {
  background-color: var(--business-container-background-color);
  border-radius: 8px;
  box-shadow: var(--color-slate-300) 0px 1px 1px 0px, var(--color-slate-300) 0px 0px 0px 1px, var(--color-slate-200) 0px 2px 5px 3px;
  height: 378px;
  max-width: 525px;
  transition: background-color 0.2s ease-in;
}

[data-animation-stage="1"] {
  transform: translate(-50%, calc(-50% + 20px));
  transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

.stage-one [data-animation-stage="1"] {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.stage-two [data-animation-stage="2"] .animated-bespoke-object {
  transform: translateY(0px);
  opacity: 1;
}

.transition-bespoke-object {
  transition: border 0.35s ease-in, left 0.35s ease-in, top 0.35s ease-in, box-shadow 0.35s ease-in, font-weight 0.25s ease-in, padding 0.25s ease-in, margin 0.25s ease-in, 0.35s ease-in, border-radius 0.6s ease-in, opacity 0.3s ease-in, transform 0.3s ease-in !important;
}
.transition-bespoke-object.d-100 {
  transition-delay: 0.1s !important;
}
.transition-bespoke-object.d-200 {
  transition-delay: 0.2s !important;
}
.transition-bespoke-object.d-300 {
  transition-delay: 0.3s !important;
}
.transition-bespoke-object.d-400 {
  transition-delay: 0.4s !important;
}
.transition-bespoke-object.d-500 {
  transition-delay: 0.5s !important;
}

[data-animation-stage="2"] .animated-bespoke-object {
  opacity: 0;
  transform: translateY(20px);
}

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

[data-animation-inputs-target] {
  box-sizing: border-box;
  max-height: 378px;
  overflow: hidden;
  opacity: 0;
  position: absolute;
  transform: translateX(20px);
  transition: transform 0.45s cubic-bezier(0, 0.7, 0.9, 1), opacity 0.55s cubic-bezier(0, 0.7, 0.9, 1);
}

[data-animation-inputs-target].active {
  color: var(--text-color);
  opacity: 1;
  transform: translateX(0px);
}

[data-animation-inputs-target].been {
  color: rgba(128, 128, 128, 0.75);
  opacity: 0;
  transform: translateX(-30px);
}

@keyframes pressed-small {
  0% {
    scale: 1;
  }
  50% {
    scale: 0.9;
  }
  100% {
    scale: 1;
  }
}
@keyframes pressed {
  0% {
    scale: 1;
  }
  50% {
    scale: 0.8;
  }
  100% {
    scale: 1;
  }
}
@keyframes pressed-no-scale {
  0% {
    scale: 1;
    background-color: #020336;
    --icon-color: #fff;
    color: #fff;
  }
  95% {
    background-color: #fff;
    --icon-color: #020336;
    color: #020336;
  }
}
@keyframes pressed-color {
  0% {
    scale: 1;
    background-color: #020336;
    --icon-color: #fff;
    color: #fff;
  }
  50% {
    scale: 0.6;
  }
  100% {
    scale: 1;
    background-color: #020336;
    --icon-color: #fff;
    color: #fff;
  }
}
@media (min-width: 1001px) {
  .the-great-ratsby.one.desktop-template .booking-info-container {
    width: 210px;
    padding: 10px 15px;
  }
  .the-great-ratsby.one.desktop-template .booking-info-container .booking-close-container .icon {
    --width: 12px;
    --height: 12px;
  }
  .the-great-ratsby.one.desktop-template .booking-info-container div {
    font-family: var(--text-font);
  }
  .the-great-ratsby.one.desktop-template .booking-info-container .booking-toolbar {
    text-align: end;
  }
  .the-great-ratsby.one.desktop-template .booking-info-container .booking-toolbar button {
    margin: 5px 5px 0px 5px;
  }
  .the-great-ratsby.one.desktop-template .booking-info-container .booking-toolbar button.icon {
    --width: 12px;
    --height: 12px;
  }
  .the-great-ratsby.one.desktop-template .booking-info-container .booking-id {
    font-size: 0.5rem;
    text-align: end;
    border-bottom: 3px solid;
  }
  .the-great-ratsby.one.desktop-template .booking-info-container .booking-name {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 3px;
  }
  .the-great-ratsby.one.desktop-template .booking-info-container .booking-service {
    font-size: 0.7rem;
    margin-bottom: 3px;
  }
  .the-great-ratsby.one.desktop-template .booking-info-container .booking-price {
    font-size: 0.6rem;
    margin-bottom: 5px;
  }
  .the-great-ratsby.one.desktop-template .booking-info-container .booking-date,
  .the-great-ratsby.one.desktop-template .booking-info-container .booking-location,
  .the-great-ratsby.one.desktop-template .booking-info-container .no-show,
  .the-great-ratsby.one.desktop-template .booking-info-container .arrived {
    font-size: 0.5rem;
  }
  .the-great-ratsby.one.desktop-template .booking-info-container .no-show,
  .the-great-ratsby.one.desktop-template .booking-info-container .arrived {
    cursor: not-allowed;
  }
}
.bespoke-background-color {
  background: var(--color-slate-50);
}

@media (max-width: 1000px) {
  .header-image {
    right: -40px;
    width: 430px;
    -webkit-mask-image: radial-gradient(ellipse 250% 370px at 100% 50%, black 0%, transparent 100%);
    mask-image: radial-gradient(ellipse 250% 370px at 100% 50%, black 0%, trafnsparent 100%);
  }
  .index-section-container {
    gap: 75px;
    max-width: calc(100vw - 75px);
    width: unset;
  }
  .index-section-container .image-container {
    margin-left: 0px;
  }
  .index-section-container .options-container {
    width: 100%;
    max-width: 460px;
    height: 350px;
    overflow-x: auto;
  }
  .index-section-container .button-container {
    margin-top: 10px;
    width: 100%;
  }
  .index-header-text {
    font: 600 3.25rem var(--header-font);
  }
  .index-header-container {
    margin-left: 15px;
  }
  .highlight {
    height: 75px;
  }
  .features .desktop.location-emulate {
    right: -70px;
    bottom: -112px;
  }
  .tailored .desktop-template {
    transform: translate(-50%, -50%) scale(0.8);
  }
  .the-great-ratsby.one.desktop-template {
    width: 770px;
  }
  .the-great-ratsby.one.desktop-template .not-work.active {
    opacity: 1;
  }
  .the-great-ratsby.one.desktop-template .booking-info-container {
    width: 100%;
  }
  .the-great-ratsby.one.desktop-template .calendar-side-bar {
    width: 175px;
  }
  .forms-animation-container {
    zoom: 0.85;
  }
}
@media (max-width: 770px) {
  .notifications-card .glass-container .phone-template.email {
    left: 0;
  }
  .the-great-ratsby.one.desktop-template {
    width: calc(100% - 15px);
  }
  .questionnaires-card {
    max-height: 600px;
  }
  .questionnaires-card .glass-container .questionnaire-emulate {
    left: 100px;
  }
  .features .glass-card {
    width: 100%;
  }
  .features .glass-card .glass-descriptor {
    width: 100%;
    max-width: 540px;
  }
  .features .glass-card .location-card {
    min-height: 455px;
  }
  .features .desktop.location-emulate {
    right: -55px;
    bottom: -90px;
  }
  .payments-card .glass-container {
    min-height: 450px;
  }
  .payments-card .glass-container .phone-template.payments {
    top: 178px;
    bottom: unset;
  }
  .more-card {
    min-height: 500px;
  }
  .more-card .glass-container .stat.page-view {
    top: 16px;
  }
  .more-card .glass-container .stat.started {
    top: 43px;
  }
  .more-card .glass-container .stat.completed {
    top: 130px;
  }
  .more-card .glass-container .stat.abandoned {
    top: 170px;
    left: 175px;
  }
  .more-card .glass-container .stat.reviews {
    top: 27px;
    left: 416px;
  }
  .tailored .square-paper {
    height: 900px;
  }
  .tailored .desktop-template {
    width: 80%;
    height: 900px;
  }
  .tailored .desktop-template > .d-flex {
    flex-flow: column;
  }
  .tailored .desktop-template .services-container {
    width: 100%;
  }
  .tailored .desktop-template .--calendar-container {
    width: 100%;
    height: 370px;
  }
  .tailored .calendar-overflow-container {
    left: calc(50% - 162.5px);
  }
  .developer .code-option {
    gap: 7px;
  }
  .developer .d-flex {
    flex-flow: column;
    justify-content: center;
  }
  .developer .index-leads {
    margin-bottom: 15px;
  }
  .developer .coding-box {
    width: 100%;
    margin: 15px auto;
    box-sizing: border-box;
  }
  .developer .code-img {
    width: 40px;
  }
  .forms-animation-container {
    zoom: 0.62;
  }
}
@media (max-width: 575px) {
  .big-header {
    font-size: 2.5rem;
  }
  .index-section-container .big-header {
    font-size: 2rem;
  }
  .index-section-container .color-picker-full-container {
    min-width: 26px;
  }
  .index-section-container .--input-box {
    width: 100%;
  }
  .index-section-container .bespoke-show-off {
    overflow: hidden;
  }
  .index-section-container .rows.input-box {
    width: calc(100% - 122px);
  }
  .index-section-container .rows.input-box .--input-label {
    top: 27px;
  }
  .index-section-container .rows.input-box .--input-box {
    top: 18px;
    left: 150px;
  }
  .index-section-container .rows.radio {
    margin-top: 10px;
  }
  .index-section-container .rows.radio .--input-radio {
    top: 0px;
    left: 150px;
    width: calc(100% - 122px);
  }
  .index-section-container .rows.radio .--input-radio.second {
    top: 53px;
  }
  .index-section-container .rows.radio .--input-radio:last-of-type {
    top: 103px;
  }
  .index-section-container .questions-modal .question-container, .index-section-container .preview-modal .question-container {
    width: calc(100% - 20px);
    margin: 0px 0px;
    padding: 0px 10px;
  }
  .index-section-container .questions-modal .question-container .title-input.input, .index-section-container .preview-modal .question-container .title-input.input {
    width: 100%;
  }
  .lead-text {
    font-size: 1rem;
    line-height: 26px;
  }
  .header-image {
    height: 100%;
    right: -7px;
    top: 379px;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -webkit-mask-image: radial-gradient(ellipse 190% 1000px, black 25%, transparent 39%);
    mask-image: radial-gradient(ellipse 190% 1000px, black 25%, transparent 39%);
  }
  .index-header-text {
    font: 600 3rem var(--header-font);
  }
  .index-header-container {
    max-width: 419px;
  }
  .features .desktop.location-emulate {
    right: unset;
    bottom: -85px;
    transform: scale(0.9);
    left: -10px;
  }
  h2.index-headers {
    font: 600 1.25rem var(--header-font);
  }
  h3.index-headers {
    font: 500 1.75rem var(--header-font);
  }
  .tailored .show-off-buttons {
    max-width: 100%;
    justify-content: start;
    margin-left: 15px;
    overflow: scroll;
    padding: 5px;
  }
  .tailored .square-paper {
    height: 850px;
  }
  .tailored .desktop-template {
    transform: translate(-50%, -50%);
    width: 95%;
  }
  .index-leads {
    font: 1rem/22px var(--text-font);
    width: 100%;
  }
  .notifications-card {
    min-height: 400px;
  }
  .notifications-card .glass-container {
    flex-flow: column;
  }
  .notifications-card .glass-container .phone-template.email {
    right: 0;
    left: unset;
  }
  .notifications-card .glass-descriptor,
  .notifications-card .glass-template-container {
    width: 100%;
  }
  .payments-card .glass-container {
    min-height: 410px;
  }
  .payments-card .glass-container .phone-template.payments {
    bottom: unset;
    top: unset;
  }
  .glass-card .glass-container {
    padding: 15px;
  }
  .glass-card .glass-container .glass-header {
    font: 600 1.25rem var(--header-font);
  }
  .glass-card .glass-container .glass-lead {
    font: 500 1.25rem var(--text-font);
  }
  .glass-card .glass-container .glass-link {
    font: 600 1rem var(--header-font);
  }
  .glass-card .quesitonnaire-emulate-container {
    height: 380px;
  }
  .glass-card .desktop.questionnaire-emulate {
    margin-top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .glass-card .chat-emulate-container {
    margin-top: 0px;
  }
  .more-card {
    min-height: 500px;
  }
  .more-card .glass-container .stat.reviews {
    top: 228px;
    left: 50px;
  }
  .forms-animation-container {
    zoom: 0.42;
  }
}
@media (max-width: 450px) {
  .notifications-card .glass-container .phone-template.email {
    height: 240px;
    top: 4px;
  }
  .features .desktop.location-emulate {
    right: unset;
    bottom: -95px;
    transform: scale(0.85);
    left: -50px;
  }
}
.business-types {
  display: flex;
  gap: 10px;
  overflow: overlay;
  padding: 0px 0px 0px 5px;
  height: 0px;
  opacity: 0;
  box-sizing: border-box;
  overflow-y: hidden;
  transition: opacity 0.2s ease, height 0.2s ease, padding 0.2s ease;
}
.business-types.active {
  padding: 5px 5px 10px 5px;
  height: 115px;
  opacity: 1;
}
.business-types .business-type {
  flex: 0 0 auto;
  width: 100px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100px;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  cursor: pointer;
  border-radius: 4px;
  padding: 5px;
  box-sizing: border-box;
}
.business-types .business-type:hover, .business-types .business-type.active {
  box-shadow: 0px 0px 0px 2px var(--color-slate-700);
}
.business-types .business-type.none {
  opacity: 0.75;
  color: rgba(0, 0, 0, 0.6509803922);
}
.business-types .business-type .icon {
  --height: 30px;
  --width: 30px;
}
.business-types .business-type .business-type-name {
  font: 500 0.9rem var(--header-font);
}

.country-error {
  display: grid;
  grid-template-rows: 0fr;
  color: var(--color-danger-700);
  margin: -5px 0 0 0;
  transition: grid-template-rows 0.2s ease-in, margin 0.2s ease-in;
}
.country-error.active {
  grid-template-rows: 1fr;
  margin: -5px 0 10px 0;
}
.country-error > div {
  overflow: hidden;
}

.register-counter {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-slate-300);
  padding: 1px 1px;
  border-radius: 20px;
  gap: 5px;
  box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.3098039216), 0px 0px 0px 1px var(--color-slate-400);
}
.register-counter .counter {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 0.75px;
  top: 0px;
  background: #fff;
  z-index: 1;
  border-radius: 100%;
  border: 1px solid var(--color-slate-400);
  box-sizing: border-box;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2117647059);
  transition: left 0.25s ease;
}
.register-counter div {
  width: 22px;
  height: 22px;
  font-size: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.register-counter .count {
  z-index: 2;
  opacity: 0.5;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.register-counter .count.active {
  opacity: 1;
  color: var(--logo-color-darker-50);
  font-weight: 600;
}

.descriptive-text {
  font: 500 0.8rem var(--text-font);
}

.explain-txt {
  margin-bottom: -15px;
  letter-spacing: 0.1px;
  line-height: 1.2rem;
}

.sucessful-reset-txt {
  max-width: 315px;
}

.reset-transition {
  transition: height 0.2s ease-in, opacity 0.2s ease-in;
}

.login-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-slate);
  background-image: linear-gradient(135deg, var(--color-slate) 0%, #17202e 100%);
}

.login-form-holder {
  display: flex;
  padding: 45px 30px 53px 30px;
  box-sizing: border-box;
  background: #fff;
  background-color: #fff;
  border-radius: 6px;
  font-family: var(--text-font);
  width: 385px;
  box-sizing: border-box;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7215686275), 0px 13px 28px 0px rgba(0, 0, 0, 0.2392156863);
  overflow: hidden;
}

.login-box {
  background-color: #fff;
  font-family: var(--text-font);
  box-sizing: border-box;
  width: 100%;
  flex: 1 0 auto;
  margin-right: 30px;
  margin-top: auto;
  margin-bottom: auto;
  transition: transform 0.2s ease, height 0.25s ease;
}
.login-box .header {
  font-size: 1.7rem;
  font-weight: 600;
  margin: 8px 0px 22px 0px;
}
.login-box .register-txt {
  font-size: 0.9rem;
  color: var(--text-color);
}
.login-box .back-to-login {
  position: absolute;
  top: 0;
}

.register-box {
  width: 100%;
  flex: 1 0 auto;
  opacity: 0;
  visibility: hidden;
  height: 0;
  transition: opacity 0.15s ease, height 0.25s ease, visibility 0.15s ease, transform 0.2s ease;
}
.register-box > [data-page] {
  flex: 1 0 auto;
  width: 100%;
  padding-right: 31px;
}

@media screen and (max-width: 776px) {
  .login-form-holder {
    width: 100%;
  }
  .login-background > div {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
  }
  .login-background .login-box {
    width: 100%;
  }
}
.new-keys {
  width: 100%;
  font: 500 0.9rem var(--header-font);
  padding: 45px 30px 53px 30px;
  background-color: #fff;
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7215686275), 0px 13px 28px 0px rgba(0, 0, 0, 0.2392156863);
  overflow: hidden;
  min-width: 325px;
  max-width: 600px;
}

@media screen and (max-width: 776px) {
  .new-keys {
    min-width: 325px;
  }
}
.drag-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 5px));
  background: #fff;
  padding: 70px 55px;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0px 8px 13px 3px rgba(0, 0, 0, 0.2117647059), 0px 2px 6px 0px rgba(0, 0, 0, 0.44);
  z-index: 11;
  transition: transform 0.2s ease-in, opacity 0.15s ease-in, visibility 0.15s ease-in;
  visibility: hidden;
  opacity: 0;
}
.drag-container.active {
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
}
.drag-container form .upload-info-container .upload-info-border {
  padding: 30px;
  border: 4px dashed var(--color-slate-700);
  border-radius: 4px;
}
.drag-container form .upload-info-container .upload-info-border label {
  font-family: var(--header-font);
}
.drag-container form .upload-info-container .upload-info-border .header {
  font-family: var(--header-font);
  font-weight: 600;
  font-size: 20px;
  color: var(--text-color);
}
.drag-container form .upload-info-container .upload-info-border .body {
  font-family: var(--text-font);
  font-weight: 400;
  color: var(--color-slate-500);
}
.drag-container form .upload-info-container.dragged-on .upload-info-border {
  scale: 0.95;
  background-color: var(--color-slate-200);
}
.drag-container form.loading .upload-info-container {
  opacity: 0.5;
}
.drag-container form .preview-logo {
  width: 50px;
  height: 50px;
}

.business-before span {
  width: 120px;
}
.business-before::before {
  content: "";
  -webkit-mask-image: url(/images/icons/store.svg);
  mask-image: url(/images/icons/store.svg);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--color-slate-700);
  height: 20px;
  width: 20px;
  display: block;
  margin-right: 5px;
}

.times-modal {
  padding: 30px;
}

.refund-currency-container.input-container > input[type=text].smaller {
  width: 150px;
}
.refund-currency-container .currency-label {
  color: var(--color-slate-900);
  position: absolute;
  top: 26px;
  left: 160px;
}

.opening-hours-container {
  padding: 5px 5px 5px 15px;
  min-height: 41.33px;
}
.opening-hours-container div {
  flex-shrink: 0;
}
.opening-hours-container:last-child [data-day-chose] {
  --tooltip-top: -46px;
}
.opening-hours-container:last-child .break-btn {
  --tooltip-top: -46px;
}
.opening-hours-container:last-child .delete-break-btn {
  --tooltip-top: -30px;
}
.opening-hours-container .opening-container.error input,
.opening-hours-container .break-container.error input {
  color: var(--color-danger-700);
  box-shadow: 0px 0px 0px 1px var(--color-danger-700);
}

.break-container::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% - 25px);
  height: calc(100% + 4px);
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);
}

.date-time-modal {
  height: 690px;
  transition: height 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.date-time-modal:has(.--confirm-booking-container.active) {
  height: 790px;
}
.date-time-modal .close {
  display: flex;
  margin-left: auto;
  border-radius: 100%;
  padding: 2px;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 15px;
  right: 15px;
  --tooltip-width: 40px;
  --tooltip-top: 23px;
}
.date-time-modal .--calendar-container {
  width: 350px;
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.date-time-modal .--calendar-date-selector {
  box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);
  border-radius: 4px;
  padding: 15px 10px 15px 10px;
  font: 600 0.875rem var(--text-font);
  color: rgb(33, 37, 31);
  background-color: rgb(255, 255, 255);
}
.date-time-modal .--calendar-date-selector.active {
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px 3px rgba(0, 0, 0, 0.078);
}
.date-time-modal .standard {
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 0px 1px rgb(203, 213, 225);
  border-radius: 4px;
  display: flex;
  position: relative;
  top: 8px;
  overflow: hidden;
}
.date-time-modal .standard.forward > .w-100 {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.date-time-modal .standard.primed > .w-100 {
  transform: translateX(-100%);
}
.date-time-modal .standard.backward > .w-100 {
  transform: translateX(0%);
  transition: transform 0.3s ease;
}
.date-time-modal .standard .--month-wrapper {
  background-color: var(--color-slate-100);
  padding: 13px 15px;
  font: 600 0.875rem var(--text-font);
  color: var(--text-color);
}
.date-time-modal .standard .--month-wrapper .--chevron {
  --chevron-color: var(--text-color);
}
.date-time-modal .standard .--days {
  font: 600 0.875rem var(--text-font);
  color: var(--text-color);
}
.date-time-modal .standard .--date {
  font: 500 0.875rem var(--text-font);
  color: var(--text-color);
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
}
.date-time-modal .standard .--date:hover:not(.--strike) {
  color: rgb(255, 255, 255);
  background-color: var(--text-color);
}
.date-time-modal .--time-holder {
  margin-top: 15px;
  padding: 17px 14px;
  background-color: rgb(255, 255, 255);
  color: var(--text-color);
  height: 54px;
  box-sizing: border-box;
  box-shadow: 0px 0px 0px 1px rgb(203, 213, 225);
  font: 500 0.9rem var(--text-font);
  border-radius: 4px;
}
.date-time-modal .--time-holder .--times {
  background-color: rgb(255, 255, 255);
  top: 60px;
  border-radius: 4px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2392156863);
}
.date-time-modal .--time-holder .--times .--row-holder .time:not(.no-hover):hover {
  color: rgb(255, 255, 255);
  background-color: var(--text-color);
}
.date-time-modal .--time-holder:hover {
  box-shadow: 0px 0px 0px 1px rgb(51, 65, 85);
}
.date-time-modal .confirm-booking-btn-container {
  margin-top: 0px;
}
.date-time-modal .--summary-service, .date-time-modal .--summary-price, .date-time-modal .confirm-btn-wrapper {
  display: none;
}
.date-time-modal .--summary-date {
  margin-bottom: 3px;
}
.date-time-modal .--summary-time {
  margin-bottom: 3px;
}
.date-time-modal .--confirm-booking-container {
  margin-top: 10px;
}
.date-time-modal .--confirm-booking-container .--continue-btn {
  width: 100%;
  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-align: center;
  padding: 10px;
}

[data-day-chose] {
  width: 100px;
  font-family: var(--text-font);
  color: var(--text-color);
  font-size: 0.9rem;
  text-align: center;
  box-shadow: 0px 0px 0px 1px var(--logo-color-step-5);
  margin-right: 5px;
  padding: 11px 0;
  cursor: pointer;
  transition: 0.25s ease;
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 2px;
  text-transform: capitalize;
  transition: box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  position: relative;
  --tooltip-top: 45px;
  --tooltip-width: 100px;
}
[data-day-chose].selected {
  background: var(--logo-color);
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10);
  color: #fff;
}

.unavailable {
  font: 500 0.9rem var(--text-font);
  opacity: 0.6;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.optional {
  padding: 3px 5px;
  background: var(--color-slate-100);
  border-radius: 4px;
  font-size: 0.7rem;
}

.sound-record-fixed-container {
  background-color: #fff;
  padding: 5px 10px;
  position: fixed;
  top: 40px;
  right: 40px;
  z-index: 10;
}
.sound-record-container {
  padding: 7px 13px 7px 10px;
}

.record-type-btn {
  --icon-color: var(--color-slate-400);
  --size: 14px;
  color: var(--color-slate-400);
  padding: 5px 10px 5px 6px;
}
.record-type-btn.active, .record-type-btn:hover {
  color: var(--color-slate-700);
  --icon-color: var(--logo-color);
  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;
}
.record-type-btn.transcript-btn {
  --icon-url: url(/images/icons/speech-to-text.svg);
}
.record-type-btn.note-btn {
  --icon-url: url(/images/icons/clinical-note.svg);
}
.record-type-btn.ai-btn {
  --icon-url: url(/images/icons/ai.svg);
}
.record-type-btn.blocks-btn {
  --icon-url: url(/images/icons/blocks.svg);
}
.record-type-btn.info-btn {
  --icon-url: url(/images/icons/info-outline.svg);
}
.record-type-btn::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: var(--size);
  height: var(--size);
  display: block;
}

.recording-icon {
  --width: 16px;
  --height: 16px;
  --icon-color: var(--color-slate-600);
}
.recording-icon.active {
  --icon-color: var(--color-danger-500);
  animation: alternate infinite 1s ease-in-out pulse;
}
.recording-icon::after {
  transition: background-color 0.3s ease;
}

@keyframes pulse {
  0% {
    --icon-color: var(--color-danger-800);
    transform: scale(1);
  }
  100% {
    --icon-color: var(--color-danger-500);
    transform: scale(1.075);
  }
}
.recordings-list {
  border-right: 1px solid var(--color-slate-300);
  width: 170px;
}
.recordings-list-item:hover {
  background-color: var(--color-slate-50);
}
.recordings-list-item.active {
  background-color: var(--color-slate-100);
}

.recording-output {
  overflow-y: auto;
  max-height: 650px;
}

.record-search-customers::-moz-placeholder {
  color: var(--color-gray-300);
}

.record-search-customers::placeholder {
  color: var(--color-gray-300);
}

.upload-file-btn::before {
  --size: 20px;
  content: "";
  -webkit-mask-image: url(/images/icons/upload.svg);
  mask-image: url(/images/icons/upload.svg);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--color-slate-600);
  width: var(--size);
  height: var(--size);
  display: block;
}

.progress-container {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 10px;
  height: 17px;
}

.progress-bar {
  background: #eee;
  height: 100%;
  width: 100%;
  overflow: hidden;
  transition: width 0.3s ease, margin 0.3s ease;
  z-index: 2;
  position: relative;
}

.progress-bar-text {
  color: #fff;
  position: absolute;
  left: 50%;
  text-shadow: 0px 1px 1px var(--logo-color-darker-10);
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}

.progress-bar-gradient {
  position: absolute;
  height: 99.9%;
  background: linear-gradient(to right, #5555dd, #00e5aa);
  top: 0;
  width: 100%;
}

.progress-status {
  max-width: 300px;
}

.recording-timer {
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
}
.recording-timer.active {
  width: 40px;
}

.quick-booking-service {
  background: var(--color-slate-200);
  color: var(--color-slate-800);
  border: 1.5px solid var(--color-slate-800);
}

.search-customer-results, .search-results-box {
  background: #fff;
  position: absolute;
  top: calc(100% + 5px);
  z-index: 2;
}
.search-customer-results .contain-search-results, .search-results-box .contain-search-results {
  max-height: 200px;
  overflow-y: auto;
}

.calendar-overflow-container {
  background-color: #fff;
  min-width: 325px;
  z-index: 9;
}
.calendar-overflow-container:not(.active) {
  pointer-events: none;
}
.calendar-overflow-container.level-two {
  z-index: 11;
}

.calendar {
  background-color: #fff;
  --chevron-color: var(--text-color);
  --month-wrapper-padding: 10px 5px;
  --month-wrapper-font-size: 0.875rem;
  --month-wrapper-weight: 600;
  --month-wrapper-font: var(--header-font);
  --day-weight: 600;
  --day-font: var(--header-font);
  --day-font-size: 0.875rem;
  --date-weight: 500;
  --date-font: var(--header-font);
  --date-font-size: 0.875rem;
}
.calendar .--date:not(.date-between) {
  border-top: 1px solid var(--color-slate-300);
  border-left: 1px solid var(--color-slate-300);
}
.calendar .blank-border-left:not(.date-between) {
  border-left: 1px solid var(--color-slate-300);
}
.calendar .--row-holder .--date:last-of-type:not(.date-between) {
  border-right: 1px solid var(--color-slate-300);
}
.calendar .--row-holder:last-of-type .--date:not(.date-between) {
  border-bottom: 1px solid var(--color-slate-300);
}
.calendar .blank-border-top:not(.date-between) {
  border-top: 1px solid var(--color-slate-300);
}
.calendar .--date:hover {
  background-color: var(--color-slate-100);
}
.calendar .--date:hover.date-between:hover {
  background-color: var(--color-slate-600);
}

.date-between {
  background-color: var(--color-slate-500) !important;
  color: #fff !important;
}
.date-between.selected-date {
  background-color: var(--color-slate-900) !important;
}

.date-filter-btn:before {
  content: "";
  -webkit-mask-image: url(/images/icons/calendar-sm.svg);
  mask-image: url(/images/icons/calendar-sm.svg);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--color-slate-700);
  height: 14px;
  width: 14px;
  display: block;
  margin-right: 5px;
}

.apply-cal-filter-btn {
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.service-item {
  width: 325px;
  font: 500 0.8rem "Lato";
  box-shadow: 0px 0px 0px 1px var(--color-slate-600), 0px 0px 0px 3px var(--service-box-shadow-color);
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
}
.service-item[data-enabled=false] {
  background: var(--color-gray-200);
  box-shadow: 0px 0px 0px 1px var(--color-gray-500);
}
.service-item[data-enabled=false] .service, .service-item[data-enabled=false] .subcategory {
  color: rgba(0, 0, 0, 0.25);
}
.service-item[data-enabled=false] .details-container {
  border-top: 1px solid transparent;
  background: transparent;
  color: rgba(0, 0, 0, 0.25);
}
.service-item[data-enabled=false] .details-container .icon {
  --icon-color: rgb(0, 0, 0, 0.25);
}
.service-item .top-container {
  padding: 20px 20px 1px 20px;
}
.service-item .service {
  font: 600 18px var(--header-font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}
.service-item .subcategory {
  font-size: 0.9rem;
  padding: 0px 20px 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
  min-height: 32.3px;
  box-sizing: border-box;
}
.service-item .details-container {
  padding: 9px 20px;
  border-top: 1px solid var(--color-slate-300);
  gap: 15px;
  background: var(--color-slate-100);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.service-item [data-tooltip] {
  white-space: pre-wrap;
}
.service-item .icon {
  --icon-color: var(--color-slate);
}

.subheader-btns button {
  padding: 3px 9px;
  font-size: 0.75rem;
  color: var(--text-color);
}
.subheader-btns button.active {
  background-color: var(--logo-color);
  color: #fff;
}

.services-calendar {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  background-color: #fff;
  width: 250px;
  right: -90px;
  top: 8px;
  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);
  --month-wrapper-padding: 8px 5px 5px;
  --chevron-color: #000;
  --date-background-color-hover: var(--color-slate-100);
  z-index: 2;
}

.service-calendar-holder:has(> .active) {
  z-index: 2;
}

.services-calendar + .triangle {
  left: 40px;
  z-index: 3;
}

.active > .services-calendar {
  pointer-events: all;
}

.price-history {
  height: 100%;
  margin-bottom: 15px;
  border-radius: 4px;
  padding: 15px 5px;
  overflow: auto;
  box-shadow: 0px 0px 0px 1px var(--color-slate-400);
  box-sizing: border-box;
}
.price-history > .d-flex {
  gap: 10px;
  border-bottom: 1px solid var(--color-slate-300);
}
.price-history.cal-open input, .price-history.cal-open .currency-error {
  z-index: -1;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.price-history button.delete-btn {
  position: relative;
  font: 600 0.7rem var(--header-font);
  padding: 3px;
  margin-bottom: 5px;
  margin-top: -20px;
}

.confirm-modal {
  z-index: 9999;
  background: #fff;
  padding: 30px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font: 500 1rem var(--text-font);
  color: var(--text-color);
  box-shadow: 0px 0px 0px 1px #fff, 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.confirm-modal .header {
  font: 600 1.2rem var(--header-font);
  text-align: center;
  width: 288px;
  padding: 0px 0px 15px;
  box-sizing: border-box;
}

.confirm-modal-overlay {
  content: "";
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 998;
}

#basicInformation .description {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: calc(100% - 20px);
  background: #fff;
  padding: 24px 30px;
  border-radius: 4px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2392156863);
  box-sizing: border-box;
  left: -4px;
  top: 10px;
  height: calc(100% - 20px);
  opacity: 0;
  pointer-events: none;
}
#basicInformation .description textarea {
  border: 0;
  outline: 0px !important;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 7px 8px;
  font: 500 1rem var(--text-font);
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  resize: none;
}
#basicInformation .description textarea:focus-within {
  box-shadow: 0px 0px 0px 1px var(--color-slate-700);
}
#basicInformation .description.active {
  opacity: 1;
  pointer-events: all;
  z-index: 3;
}
#basicInformation .description-btn {
  text-align: start;
  box-sizing: border-box;
  padding: 13px 15px;
  border: 0;
  border-radius: 4px;
  font: 500 1rem var(--text-font);
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 495px;
  min-height: 45px;
}

.additional-inputs {
  gap: 5px;
}
.additional-inputs .calendar-overflow-container .calendar {
  width: 250px;
  top: 50%;
  left: -140px;
  transform: translate(-50%, calc(-50% - 10px));
}
.additional-inputs .calendar-overflow-container .calendar.active {
  transform: translate(-50%, -50%);
}
.additional-inputs .calendar-overflow-container .triangle {
  top: 50%;
  z-index: 99;
  rotate: 90deg;
  left: -19px;
  transform: translateX(calc(-50% - 9px));
}
.additional-inputs .radio-input {
  width: 80px;
}
.additional-inputs input[type=text], .additional-inputs input[type=time], .additional-inputs .price-from {
  width: 80px;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0px 0px 0px 1px var(--color-slate-600), rgba(0, 0, 0, 0.07) 0px 0px 0px 0px;
  font: 500 0.9rem var(--text-font);
  padding: 8px 10px;
  box-sizing: border-box;
  margin: 0px 2px;
  border: 0;
  outline: 0px !important;
  height: 40px;
}
.additional-inputs input[type=text]::-moz-placeholder, .additional-inputs input[type=time]::-moz-placeholder, .additional-inputs .price-from::-moz-placeholder {
  opacity: 0;
}
.additional-inputs input[type=text]::placeholder, .additional-inputs input[type=time]::placeholder, .additional-inputs .price-from::placeholder {
  opacity: 0;
}
.additional-inputs input[type=text]:-moz-placeholder:not(:focus-within), .additional-inputs input[type=time]:-moz-placeholder:not(:focus-within), .additional-inputs .price-from:-moz-placeholder:not(:focus-within) {
  background-color: var(--color-slate-100);
  box-shadow: 0px 0px 0px 1px var(--color-slate-300), rgba(0, 0, 0, 0.07) 0px 0px 0px 0px;
}
.additional-inputs input[type=text]:placeholder-shown:not(:focus-within), .additional-inputs input[type=time]:placeholder-shown:not(:focus-within), .additional-inputs .price-from:placeholder-shown:not(:focus-within) {
  background-color: var(--color-slate-100);
  box-shadow: 0px 0px 0px 1px var(--color-slate-300), rgba(0, 0, 0, 0.07) 0px 0px 0px 0px;
}
.additional-inputs input[type=time] {
  text-align: left;
}
.additional-inputs input[type=time]::-webkit-calendar-picker-indicator {
  width: 14px;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}
.additional-inputs .price-from {
  padding: 8px 0px;
  font-size: 0.8rem;
  position: relative;
  background: #fff;
}
.additional-inputs .dropdown-container label {
  font: 0.9rem var(--text-font);
  margin-left: 2px;
}
.additional-inputs .dropdown-container ul {
  left: -10px;
  width: 100px;
}
.additional-inputs .dropdown-container .dropdown {
  margin-top: -3px;
  padding-right: 20px;
}
.additional-inputs .dropdown-container .dropdown-ele {
  font-size: 0.85rem;
  width: 100px;
  box-sizing: border-box;
}
.additional-inputs .dropdown-container .has-chevron::after {
  background-size: 18px 18px;
  width: 18px;
  height: 18px;
  right: -18px;
}
.additional-inputs .currency-tooltip {
  --tooltip-top: -15px;
  font-size: 0.7rem;
}
.additional-inputs .currency-tooltip:before {
  transform: translate(10%, 0px) scale(0.85);
}
.additional-inputs ~ .currency-error {
  height: 0;
  opacity: 0;
  transition: height 0.2s ease-in, opacity 0.15s ease-in;
}
.additional-inputs ~ .currency-error.active {
  height: 17px;
  opacity: 1;
}

.service-details-modal {
  min-width: 450px;
  height: 445px;
  box-sizing: border-box;
  overflow: hidden;
  transition: height 0.2s ease, width 0.2s ease;
}
.service-details-modal .location-dropdown {
  min-width: 160px;
  text-align: end;
}
.service-details-modal .location-dropdown .triangle {
  top: 32px;
  z-index: 11;
  left: 50%;
  transform: translateX(-50%);
}
.service-details-modal .location-dropdown button {
  min-width: 90px;
  text-align: start;
}
.service-details-modal .location-dropdown ul {
  top: 40px;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
}
.service-details-modal .location-dropdown ul li {
  font: 500 0.875rem var(--text-font);
  text-align: start;
}
.service-details-modal .color-container label {
  font: 600 0.9rem var(--header-font);
  color: var(--color-slate-700);
}
.service-details-modal .color-picker-full-container > .color-picker-container {
  top: -262px;
  left: -230px;
}
.service-details-modal .close {
  position: absolute;
  right: 20px;
  top: 20px;
  border-radius: 100%;
}
.service-details-modal .assign-btn {
  position: absolute;
  top: -40px;
  right: 0;
}
.service-details-modal .staff-list {
  height: 155px;
  overflow-y: visible;
  border-radius: 2px;
  max-width: 375px;
}
.service-details-modal .staff-list .staff-member {
  width: 33px;
  height: 33px;
  border-radius: 100%;
  cursor: pointer;
  --tooltip-top: 36px;
}
.service-details-modal .stock-level {
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: opacity 0.2s ease-in, transform 0.2s ease-in, visibility 0.2s ease-in;
}
.service-details-modal .stock-level.active {
  opacity: 1;
  transform: translateY(0px);
  visibility: visible;
}
.service-details-modal .billing-information .input-container {
  padding: 3px;
}
.service-details-modal .billing-information .stock-level {
  height: 64px;
  margin-top: auto;
  margin-bottom: 3px;
}
.service-details-modal .payment-inputs {
  gap: 10px;
  height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}
.service-details-modal .hide-if-free {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in, height 0.2s ease-in;
}
.service-details-modal .hide-if-free.active {
  overflow: hidden;
  height: 0px;
  visibility: hidden;
  opacity: 0;
}

.days-container {
  gap: 10px;
}
.days-container div {
  width: 18px;
  height: 18px;
  padding: 2px;
  border-radius: 2px;
  cursor: pointer;
  --tooltip-top: 28px;
}
.days-container div:first-child::before {
  left: calc(50% + 15px);
}
.days-container .open {
  background-color: var(--logo-color);
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-50);
  color: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.pricing-modal-container,
.service-times-container,
.remove-staff-modal-container,
.person-document-modal,
.assign-staff-container {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 13;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
}
.pricing-modal-container [data-new],
.service-times-container [data-new],
.remove-staff-modal-container [data-new],
.person-document-modal [data-new],
.assign-staff-container [data-new] {
  background: var(--color-slate-100);
}
.pricing-modal-container.active,
.service-times-container.active,
.remove-staff-modal-container.active,
.person-document-modal.active,
.assign-staff-container.active {
  opacity: 1;
  visibility: visible;
}
.pricing-modal-container .header,
.service-times-container .header,
.remove-staff-modal-container .header,
.person-document-modal .header,
.assign-staff-container .header {
  font: 600 1.4rem var(--header-font);
  margin-left: 15px;
}
.pricing-modal-container .subheader,
.service-times-container .subheader,
.remove-staff-modal-container .subheader,
.person-document-modal .subheader,
.assign-staff-container .subheader {
  font: 500 1rem var(--text-font);
  color: var(--color-slate-500);
  margin-left: 15px;
}

.remove-staff-modal-container {
  z-index: 999;
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.15s ease-in;
  transform: translate(-50%, calc(-50% + 8px));
  height: 400px;
  width: 385px;
}
.remove-staff-modal-container.active {
  transform: translate(-50%, calc(-50% + 0px));
}

.service-times-container {
  width: 635px;
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in, scale 0.25s cubic-bezier(0.47, 1.2, 1, 1), transform 0.2s ease;
  transform: translate(-50%, -50%) rotate3d(1, 0, 0, 30deg);
  transform-origin: left top;
  scale: 1.1;
  opacity: 0;
}
.service-times-container.active {
  transform: translate(-50%, -50%) rotate3d(1, 0, 0, 0deg);
  opacity: 1;
  scale: 1;
}

.assign-staff-container {
  width: 400px;
  height: 410px;
}
.assign-staff-container .open-delete-modal {
  position: absolute;
  right: 25px;
}

.pricing-modal-container,
.person-document-modal,
.assign-staff-container {
  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%);
}
.pricing-modal-container.active,
.person-document-modal.active,
.assign-staff-container.active {
  opacity: 1;
  scale: 1;
}

.pricing-modal-container {
  max-width: 495px;
  max-height: 572px;
  width: 100%;
  height: 100%;
}

.service-times,
.which-times {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.service-times.active,
.which-times.active {
  opacity: 1;
  visibility: visible;
}

[data-state=editing] .details-container [data-map] {
  padding: 5px;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  height: 27px;
}
[data-state=editing] .details-container [data-map]: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;
}
[data-state=editing] .details-container [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);
}

.staff-item {
  padding: 20px 30px;
  width: 100%;
  font: 500 0.8rem "Lato";
  box-shadow: 0px 0px 0px 1px var(--color-slate-600);
  border-radius: 4px;
  box-sizing: border-box;
}
.staff-item.current {
  box-shadow: 0px 0px 0px 1px var(--color-slate-600), 0px 0px 0px 3px var(--logo-color-step-5);
}
.staff-item .avatar {
  height: 30px;
  width: 30px;
  background: var(--staff-color);
  position: relative;
  border-radius: 100%;
  margin-right: 5px;
}
.staff-item .avatar::before {
  content: attr(data-staff-initials);
  color: var(--text-color);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.staff-item > div {
  width: 33%;
}

.staff-profile-preview {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.add-staff-btn {
  padding: 7px 10px;
}

.email-explain {
  height: 0px;
  transition: height 0.2s ease-in;
  overflow: hidden;
  font: 500 0.775rem var(--text-font);
  margin-top: 0;
}
.email-explain.reveal {
  height: 30px;
  margin-top: 5px;
}

.email-tooltip::before {
  left: calc(50% + 80px);
}

input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--logo-color);
  cursor: pointer;
  margin: 0;
}

.create-modal {
  padding: 40px 0px;
  width: auto;
}
.create-modal .color-picker-container {
  left: unset;
  right: 30px;
  top: -153px;
}
.create-modal .header {
  margin-left: 40px;
}
.create-modal .subheader {
  width: 325px;
  margin-left: 40px;
}
.create-modal .button-container {
  margin-top: 30px;
  width: 100%;
}
.create-modal .page-holder {
  padding: 0px 35px;
  width: 325px;
  height: 323px;
  transition: opacity 0.15s ease, height 0.25s ease, visibility 0.15s ease, transform 0.2s ease;
}
.create-modal .page-holder [data-staff-page] {
  margin-right: 36px;
  pointer-events: none;
  overflow-y: hidden;
  overflow-x: visible;
  padding: 1px;
  box-sizing: border-box;
}
.create-modal .page-holder [data-staff-page].active {
  pointer-events: all;
}
.create-modal .page-holder [data-staff-page].loading {
  pointer-events: none;
}
.create-modal .page-holder [data-staff-page].loading button[type=button] {
  opacity: 0.6;
}
.create-modal .page-holder [data-staff-page].admin-selected .opening-hours-container > [data-day-chose], .create-modal .page-holder [data-staff-page].admin-selected .opening-hours-container button, .create-modal .page-holder [data-staff-page].not-bookable .opening-hours-container > [data-day-chose], .create-modal .page-holder [data-staff-page].not-bookable .opening-hours-container button, .create-modal .page-holder [data-staff-page].loading .opening-hours-container > [data-day-chose], .create-modal .page-holder [data-staff-page].loading .opening-hours-container button {
  pointer-events: none;
  opacity: 0.6;
  cursor: default;
}
.create-modal .page-holder [data-staff-page].admin-selected input, .create-modal .page-holder [data-staff-page].admin-selected .dropdown, .create-modal .page-holder [data-staff-page].not-bookable input, .create-modal .page-holder [data-staff-page].not-bookable .dropdown, .create-modal .page-holder [data-staff-page].loading input, .create-modal .page-holder [data-staff-page].loading .dropdown {
  pointer-events: none;
  opacity: 0.6;
}
.create-modal .page-holder [data-staff-page] .move-right-tooltip::before {
  left: calc(50% + 54px);
  width: 180px;
  text-wrap: auto;
}
.create-modal .page-holder [data-staff-page] label {
  font: 600 0.9rem var(--header-font);
  color: var(--color-slate-700);
}
.create-modal .page-holder [data-staff-page] .input-container:has(.touched:invalid) label {
  color: var(--color-danger-700);
}
.create-modal .page-holder [data-staff-page] .checkbox-container {
  padding: 10px 0px;
  margin-right: 3px;
}
.create-modal .page-holder [data-staff-page] .admin-warning {
  font-size: 0.55rem;
  position: absolute;
  top: 64px;
  text-align: left;
  width: 201px;
  left: 112px;
  color: #fff;
  border-radius: 4px;
  background: var(--color-slate-700);
  font-weight: 500;
  padding: 4px 5px;
  z-index: 10;
  overflow: visible;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
  opacity: 0;
  transition: opacity 0.15s ease-in, transform 0.2s ease-in, scale 0.15s ease-in;
}
.create-modal .page-holder [data-staff-page] .admin-warning.reveal {
  transform: translateY(0px) scale(1);
  opacity: 1;
}
.create-modal .page-holder [data-staff-page] .dropdown {
  width: 140px;
  text-align: end;
}
.create-modal .page-holder [data-staff-page] .dropdown > ul {
  left: -42px;
  top: 32px;
  opacity: 0;
  transform: translateY(-5px) scale(0.95);
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.25s ease, scale 0.15s cubic-bezier(0.53, 0.14, 1, 0.25);
  z-index: 1;
  font-size: 0.9rem;
}
.create-modal .page-holder [data-staff-page] .dropdown.active > ul {
  opacity: 1;
  transform: translateY(0px) scale(1);
  visibility: visible;
}
.create-modal .page-holder [data-staff-page="1"] {
  overflow-x: hidden;
}
.create-modal [data-staff-page="5"] {
  max-width: 500px;
}

.full-staff-list {
  height: 300px;
  box-shadow: 0px 0px 0px 1px var(--color-gray-400);
  box-sizing: border-box;
  padding: 0px 10px;
  overflow: auto;
}
.full-staff-list li {
  cursor: pointer;
  padding: 15px 5px;
}
.full-staff-list li:not(:last-of-type) {
  border-bottom: 1px solid var(--color-gray-400);
}
.full-staff-list li:hover {
  background: var(--color-gray-50);
}

.search-staff-list {
  outline: 0;
  border: 0;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
}
.search-staff-list:focus-visible {
  box-shadow: 0px 0px 0px 1px var(--color-slate-600);
}

.staff-unconfirmed {
  position: relative;
}
.staff-unconfirmed .avatar {
  opacity: 0.5;
}
.staff-unconfirmed .avatar + div {
  opacity: 0.5;
}
.staff-unconfirmed .staff-invitation-sent {
  position: absolute;
  right: 5px;
  width: -moz-fit-content;
  width: fit-content;
  bottom: 5px;
}

.holiday-calendar {
  left: 50%;
}

.holidays-modal:has(.show-holiday.active) .save-btn-container {
  z-index: -1;
}

.change-password-modal {
  z-index: 99;
  width: 325px;
  height: 325px;
  box-sizing: border-box;
}

.globals-container {
  width: 440px;
  box-sizing: border-box;
  border-right: 1px solid var(--color-slate-400);
  overflow-y: auto;
  overflow-x: hidden;
}
.globals-container .globals-item {
  height: 30px;
  margin: 20px 0px;
  padding: 0px 19px;
}
.globals-container .color-picker-full-container .color-picker-container {
  left: -200px;
}

.margin-inputs input {
  width: 40px;
  height: 29px;
  border-radius: 4px;
  font-size: 0.8rem;
  padding: 0px;
  box-sizing: border-box;
}
.margin-inputs input.has-buttons {
  padding-right: 14px;
}
.margin-inputs label {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: var(--color-slate-600);
  font-family: var(--header-font);
  opacity: 0;
  transition: opacity 0.075s ease-in;
}
.margin-inputs:focus-within label {
  opacity: 1;
}

.setting-radio-container {
  height: 26px;
}

.styling-choice {
  position: relative;
  color: var(--color-slate-400);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-sizing: border-box;
  background: #fff;
}
.styling-choice .stage-number {
  font: 600 1rem var(--header-font);
}
.styling-choice .text {
  display: block;
  font: 400 0.75rem var(--header-font);
  text-align: center;
}
.styling-choice .icon {
  --icon-color: var(--color-slate-400);
}
.styling-choice:hover, .styling-choice.hovered-styles, .styling-choice.active {
  color: var(--color-slate-700);
}
.styling-choice:hover .icon, .styling-choice.hovered-styles .icon, .styling-choice.active .icon {
  --icon-color: var(--color-slate-700);
}

.elements-panel {
  background: var(--color-slate-100);
  flex-shrink: 0;
  overflow: auto;
}

.element-toggle {
  position: relative;
  background-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.element-toggle:has(:checked) {
  background-color: var(--logo-color);
  color: #fff;
}
.element-toggle input {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.elements-shadows-container {
  padding: 5px;
  margin-top: 3px;
}
.elements-shadows-container .shadow-number {
  display: none;
}
.elements-shadows-container .delete {
  margin-left: 5px;
}

.hover-shadow-container {
  width: 290px;
  overflow: auto;
}
.hover-shadow-container .elements-shadows-container {
  margin-right: 10px;
  overflow: hidden;
  width: 175px;
  height: 175px;
  flex-shrink: 0;
}

.elements-add-shadow {
  font-size: 0.875rem;
  margin-bottom: -15px;
}

.element-shadows {
  gap: 10px;
  margin-top: 0px;
}

.styling-main-container {
  min-height: calc(100vh - 41px);
  flex: 0 1 0;
}
.styling-main-container .styling-choice-container {
  width: 85px;
  height: 100%;
  border-right: 1px solid var(--color-slate-400);
}
.styling-main-container .styling-choice-container .expand-header {
  transition: visibility 0.1s ease-in, opacity 0.1s ease-in, transform 0.1s ease-in;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  display: block;
}
.styling-main-container .styling-choice-container:not(.expand) {
  transition: width 0.2s ease-in;
}
.styling-main-container .styling-choice-container:not(.expand) .expand-text {
  transition: visibility 0.1s ease-in, opacity 0.1s ease-in, transform 0.1s ease-in;
}
.styling-main-container .styling-choice-container.expand {
  transition: width 0.2s ease-in;
  width: 225px;
}
.styling-main-container .styling-choice-container.expand .expand-header {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.styling-main-container .styling-choice-container.expand .styling-choice .expand-text {
  opacity: 1;
  transform: translateY(-50%);
  visibility: visible;
  transition: visibility 0.2s ease-in, opacity 0.2s ease-in, transform 0.2s ease-in;
}
.styling-main-container .styling-choice-container.expand .expand-container::before {
  content: "Collapse";
}
.styling-main-container .styling-choice-container.expand .expand-container .icon {
  rotate: 90deg;
}
.styling-main-container .styling-choice-container .header {
  font: 600 1.25rem var(--header-font);
}
.styling-main-container .styling-choice-container .expand-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--color-slate-400);
  height: 70px;
}
.styling-main-container .styling-choice-container .expand-container::before {
  left: calc(50% + 80px);
}
.styling-main-container .styling-choice-container .expand-container .icon {
  rotate: 270deg;
  --tooltip-top: 75px;
}
.styling-main-container .choice-container {
  border-bottom: 1px solid var(--color-slate-400);
  padding: 25px 23px 10px 23px;
}
.styling-main-container .color-picker {
  border-radius: 4px;
}
.styling-main-container .dropdown {
  box-sizing: border-box;
  border-radius: 4px;
  font: 500 1rem var(--text-font);
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
}
.styling-main-container .dropdown .dropdown-btn {
  height: 100%;
  width: 100%;
  text-align: start;
  padding: 6px 15px;
}
.styling-main-container .dropdown ul {
  width: 150px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;
  margin-top: 4px;
  padding: 5px 0px 5px 6px;
  right: -2px;
}
.styling-main-container .dropdown ul .dropdown-ele {
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 1px;
}

.styling-main-container [data-page] {
  --confirm-page-left: 50%;
  transform: translateX(-50%);
  margin-top: 0px;
  left: var(--confirm-page-left);
  transform: var(--confirm-page-transform);
  max-width: 570px;
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  top: 0px;
}

.toggle-mode-btn {
  position: fixed;
  top: 53px;
  right: 151px;
  padding: 4px 8px;
  z-index: 999;
  background: #fff;
}

.mode-container {
  position: fixed;
  bottom: 0px;
  width: 100vw;
  z-index: 100;
}
.mode-container .mode-bar {
  height: 5px;
}
.mode-container.viewing .mode-bar, .mode-container.viewing .mode-label {
  background: var(--color-success-600);
}
.mode-container.editing .mode-bar, .mode-container.editing .mode-label {
  background: var(--color-danger-600);
}
.mode-container .mode-label {
  width: -moz-fit-content;
  width: fit-content;
  padding: 6px 15px 3px;
  border-radius: 4px 4px 0px 0px;
  color: #fff;
  letter-spacing: 0.3px;
}

.radio-custom-choices:not(.icons-radios) {
  box-shadow: 0px 1px 1px 0px rgb(203, 213, 225), 0px 0px 0px 1px rgb(226, 232, 240), 0px 2px 5px 0px rgb(241, 245, 249);
  border-radius: 4px;
  font: 500 0.875rem var(--text-font);
  background: #fff;
}
.radio-custom-choices:not(.icons-radios) .radio-choices-container:not(.icon-radios) {
  width: 50px;
  text-align: center;
  padding: 5px 10px;
  cursor: pointer;
}
.radio-custom-choices:not(.icons-radios) .radio-choices-container:not(.icon-radios).wider {
  width: 65px;
}
.radio-custom-choices:not(.icons-radios) .radio-choices-container:not(.icon-radios):hover, .radio-custom-choices:not(.icons-radios) .radio-choices-container:not(.icon-radios).hovered-styles {
  font-weight: 600;
}
.radio-custom-choices:not(.icons-radios) .radio-choices-container:not(.icon-radios):first-child {
  border-right: 1px solid var(--color-slate-500);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.radio-custom-choices:not(.icons-radios) .radio-choices-container:not(.icon-radios):last-child {
  border-left: 1px solid var(--color-slate-500);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.radio-custom-choices:not(.icons-radios) .radio-choices-container:not(.icon-radios):has(input:checked) {
  background: var(--logo-color);
  color: #fff;
  box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.1254901961);
  font-weight: 600;
}
.radio-custom-choices:not(.icons-radios) .radio-choices-container:not(.icon-radios):has(input:checked):first-child {
  box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.1254901961);
}
.radio-custom-choices:not(.icons-radios) .radio-choices-container:not(.icon-radios):has(input:checked):last-child {
  box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.1254901961);
}
.radio-custom-choices:not(.icons-radios) .radio-choices-container:not(.icon-radios) input {
  opacity: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: absolute;
  margin: 0;
  z-index: -1;
}
.radio-custom-choices:not(.icons-radios) .radio-choices-container:not(.icon-radios) label {
  font-family: var(--text-font);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}

.property-container {
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  align-items: center;
  margin-right: 20px;
}
.property-container .dropdown ul {
  font-size: 0.875rem;
  bottom: 35px;
}

.state-holder {
  bottom: 0;
  left: 0;
}
.state-holder.second-state {
  left: 291px;
  border-left: 1px solid var(--color-slate-300);
  background: var(--color-slate-200);
}

.part-holder {
  left: 0px;
  bottom: 60px;
}

.state-holder, .part-holder {
  position: absolute;
  background: var(--color-slate-100);
  padding: 8px 5px 8px 5px;
  border-top-right-radius: 4px;
}
.state-holder button, .part-holder button {
  padding: 5px 10px;
  background: #fff;
}
.state-holder button.active, .part-holder button.active {
  background: var(--logo-color);
  color: #fff;
}

.add-shadow-toolbar {
  height: 25px;
}

.shadow-property-container {
  background: var(--color-slate-100);
  border-radius: 4px;
  border: 1px solid var(--color-slate-200);
  margin-top: 10px;
  flex-flow: column;
  gap: 0;
  align-items: baseline;
  padding: 5px 15px 10px;
  min-height: 255px;
  box-sizing: border-box;
  margin-right: 100%;
}

.shadow-property-container .color-picker-container, .property-container .color-picker-container {
  top: unset;
  bottom: 30px;
}

.box-shadow-inputs {
  padding: 10px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid var(--color-slate-200);
}
.box-shadow-inputs .shadow-input {
  font: 500 0.8rem var(--text-font);
  padding: 6px;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  border: 0;
  outline: 0 !important;
  width: 50px;
  text-align: center;
}
.box-shadow-inputs label {
  font-size: 0.775rem;
}
.box-shadow-inputs .offset-labels {
  position: absolute;
  left: 100px;
  bottom: 0px;
  font-weight: 600;
  color: var(--color-slate-400);
}
.box-shadow-inputs .offset-labels.x {
  left: 98px;
}
.box-shadow-inputs .offset-labels.y {
  left: 159px;
  bottom: 1px;
}

.bottom-styling-container {
  border-top: 2px solid var(--color-slate-100);
  padding: 15px 10px 25px;
}

.no-shadows {
  font: 500 0.875rem var(--header-font);
  width: 150px;
}

.element-tooltip {
  background: #eeeefc;
  position: absolute;
  top: 12px;
  right: 140px;
  color: var(--logo-color);
  display: flex;
  align-items: center;
  gap: 5px;
}
.element-tooltip::before {
  content: "";
  -webkit-mask-image: url(/images/icons/exclamation.svg);
  mask-image: url(/images/icons/exclamation.svg);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--logo-color);
  width: 14px;
  height: 14px;
  display: block;
}

.publish-style-button {
  position: fixed;
  z-index: 999999;
  padding: 4px 8px;
  top: 53px;
  right: 0px;
}

.globals-setting-container {
  max-width: 500px;
  margin-left: 50px;
}

.show-off-biggest {
  font-size: 1.5rem;
}

.show-off-bigger {
  font-size: 1.2rem;
}

.show-off-normal {
  font-size: 1rem;
}

.show-off-smaller {
  font-size: 0.875rem;
}

.show-off-smallest {
  font-size: 0.775rem;
}

.show-off-boldest {
  font-weight: 700;
}

.show-off-bold {
  font-weight: 600;
}

.show-off-normal-weight {
  font-weight: 500;
}

.show-off-light {
  font-weight: 400;
}

.show-off-lightest {
  font-weight: 300;
}

.font-show-off {
  font-family: var(--font-show-off);
}
.font-show-off .--input-box {
  margin: 0 !important;
}

.show-off-header {
  font-size: 1.5rem;
}

.show-off-other {
  font-size: 1.25rem;
}

.show-off-custom {
  max-width: 300px;
}

.color-show-off {
  max-width: 400px;
}

.example-btn {
  background-color: var(--primary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 0px 0px 5px;
  padding: 5px 9px;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--primary-color);
  font: 600 0.875rem Inter;
  letter-spacing: 0px;
  transition: box-shadow 0.2s ease-in, background-color 0.2s ease-in, color 0.2s ease-in;
}
.example-btn.text {
  background-color: transparent;
  box-shadow: 0px 0px 0px 0px var(--primary-color);
  color: var(--primary-color);
}

.example-radio, .example-checkbox {
  align-items: center;
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px rgb(203, 213, 225);
  box-sizing: border-box;
  color: #212529;
  display: flex;
  font: 400 0.9rem Inter;
  margin: 0px 0px 10px 0px;
  min-width: 100px;
  padding: 15px 15px 15px 15px;
  position: relative;
  text-align: center;
  transition: background-color 0.2s ease-in, box-shadow 0.2s ease-in;
}
.example-radio input, .example-checkbox input {
  opacity: 0;
  position: absolute;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}
.example-radio .option, .example-checkbox .option {
  display: inline;
  width: 16px;
  height: 16px;
  box-shadow: 0px 0px 0px 2px var(--primary-color);
  background: rgb(255, 255, 255);
  border-radius: 30px;
  position: relative;
  flex-shrink: 0;
  margin-right: 5px;
}
.example-radio .option::before, .example-checkbox .option::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  display: inline;
  width: 12px;
  height: 12px;
  background-color: var(--primary-color);
  border-radius: 30px;
  transition: transform 0.12s ease-in;
}
.example-radio.hovered, .example-checkbox.hovered {
  box-shadow: 0px 0px 0px 1px #212529;
}
.example-radio.hovered .option::before, .example-checkbox.hovered .option::before {
  background-color: rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%) scale(1);
}
.example-radio.checked, .example-checkbox.checked {
  box-shadow: 0px 0px 0px 1px #212529, 0px 0px 0px 3px var(--primary-color);
}
.example-radio.checked .option::before, .example-checkbox.checked .option::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.example-checkbox .option {
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px rgb(203, 213, 225);
}
.example-checkbox .option::before {
  width: 16px;
  height: 16px;
  clip-path: polygon(28% 38%, 41% 53%, 75% 24%, 86% 38%, 40% 78%, 15% 50%);
}
.example-checkbox.checked .option {
  box-shadow: 0px 0px 0px 1px rgb(85, 85, 221);
}

.setting-dropdown {
  height: 35px;
  min-width: 110px;
  margin: auto;
}

.color-container {
  height: 22px;
  box-shadow: 0px 0px 0px 1px var(--color-gray-400);
}

.hex-color {
  min-width: 90px;
}

.theme-button {
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  transition: box-shadow 0.2s ease-in;
}
.theme-button:hover, .theme-button.active {
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-50), 0px 0px 0px 3px var(--logo-color);
}

.theme-element-container {
  width: 323px;
  position: relative;
}
.theme-element-container .--calendar {
  position: relative;
}

.theme-show-off {
  padding: 20px;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  background: var(--business-container-background-color);
  margin-right: 40px;
  margin-bottom: 40px;
  visibility: hidden;
  opacity: 0;
}
.theme-show-off.active {
  visibility: visible;
  opacity: 1;
}

.theme-color {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.25) inset;
}

.--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);
}

.--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);
}

.--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);
  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);
  align-items: end;
}

.--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::-moz-placeholder {
  color: var(--input-color-placeholder);
}
.--input-box::placeholder {
  color: var(--input-color-placeholder);
}
.--input-box:hover, .--input-box.hovered-styles, .--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.hovered-styles::-moz-placeholder, .--input-box.hover-state::-moz-placeholder {
  color: var(--input-color-placeholder-hover);
}
.--input-box:hover::placeholder, .--input-box.hovered-styles::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-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);
  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;
}

.button-container {
  width: 500px;
}
.button-container.--back {
  justify-content: var(--back-btn-position);
}
.button-container.--next {
  justify-content: var(--next-btn-position);
}

.--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, .--back-btn.hovered-styles {
  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, .--next-btn.hovered-styles {
  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);
}

.--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);
  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, .--input-checkbox.hover-state {
  color: var(--checkbox-color-hover);
  box-shadow: var(--checkbox-border-hover);
  background: var(--checkbox-background-hover);
}
.--input-checkbox:not(.checked-state):hover .option, .--input-checkbox.hover-state .option {
  box-shadow: var(--checkbox-checkbox-border-hover);
  background: var(--checkbox-checkbox-background-hover);
}
.--input-checkbox:not(.checked-state):hover .option::before, .--input-checkbox.hover-state .option::before {
  background-color: var(--checkbox-checkbox-symbol-color-hover);
  transform: translate(-50%, -50%) scale(1);
}
.--input-checkbox:has(input:checked), .--input-checkbox.checked-state {
  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, .--input-checkbox.checked-state .option {
  box-shadow: var(--checkbox-checkbox-border-checked) !important;
  background: var(--checkbox-checkbox-background-checked) !important;
}
.--input-checkbox:has(input:checked) .option::before, .--input-checkbox.checked-state .option::before {
  background-color: var(--checkbox-checkbox-symbol-color) !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.hover-box {
  width: 100px;
  height: 50px;
  position: fixed;
  top: 40px;
  width: 500px;
  border: 1px dashed var(--logo-color);
  z-index: 999;
  pointer-events: none;
}

.display-elements {
  transform: translateX(0px);
  transition: transform 0.2s ease-in;
}
.display-elements.offset-left {
  transform: translateX(239px);
}

.options-bar-header {
  font-size: 1.25rem;
}
.options-bar-header .icon.close {
  --widith: 24px;
  --height: 24px;
}

.options-bar {
  display: none;
  position: fixed;
  top: 41px;
  left: 10px;
  height: calc(100vh - 41px);
  z-index: 99;
  box-sizing: border-box;
  width: 325px;
  padding-right: 10px;
  pointer-events: none;
}
.options-bar.active {
  display: flex;
  pointer-events: all;
}
.options-bar .margin-inputs label {
  font-size: 0.5rem;
  bottom: -1px;
}
.options-bar .options-label {
  font-size: 0.7rem;
}
.options-bar .dropdown {
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  border-radius: 4px;
}
.options-bar .dropdown > ul {
  top: 30px;
  left: 0px;
}
.options-bar .dropdown .dropdown-btn {
  padding: 5px;
}

.options-bar-inner-container {
  background-color: #fff;
  border-right: 1px solid var(--color-slate-400);
  padding: 10px 5px 5px 5px;
  width: 100%;
}

.alter-container {
  display: flex;
  flex-flow: column;
  position: absolute;
  right: 0px;
  top: 0px;
}
.alter-container button {
  background: var(--color-slate-100);
  border-radius: 2px;
  box-shadow: 0px 0px 0px 0.5px var(--color-slate-400);
  --width: 13px;
  --height: 13px;
}
.alter-container button:hover, .alter-container button.hovered-styles {
  background: var(--color-slate-600);
  --icon-color: #fff ;
}
.alter-container .up {
  transform: rotate(180deg);
}
.alter-container .down {
  margin-top: 3px;
}

.icon-radios {
  height: 26px;
  width: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  position: relative;
  border-radius: 4px;
}
.icon-radios input {
  opacity: 0;
  position: absolute;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 2;
}
.icon-radios:has(input:checked), .icon-radios:hover, .icon-radios.hovered-styles {
  background-color: var(--color-slate-200);
}
.icon-radios .icon {
  --icon-color: var(--color-slate-700);
}

.--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;
}

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

.--business-container {
  background-color: var(--business-container-background-color);
  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;
}

.--index-header {
  color: var(--index-header-color);
  font: var(--index-header-weight) var(--index-header-font-size) var(--index-header-font);
  margin: var(--index-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);
}

.--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: 0px;
}

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

.--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);
  width: -moz-fit-content;
  width: fit-content;
  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: 0;
  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;
}

.--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, .--big-subcategory-button.hovered-styles {
  box-shadow: var(--big-subcategory-button-box-shadow-hover);
  background-color: var(--big-subcategory-button-background-color-hover);
}
.--big-subcategory-button:hover .--subcategory-header, .--big-subcategory-button.hovered-styles .--subcategory-header {
  color: var(--subcategory-header-color-hover);
}
.--big-subcategory-button:hover .--subcategory-service-count, .--big-subcategory-button.hovered-styles .--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%);
  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;
}

.--in-person::before, .--virtual::before, .--location-amount::before, .--service-duration::before, .--mobile::before, .--service-cost::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;
}

.--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);
}

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

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

.--virtual {
  align-items: center;
  background-color: var(--virtual-background-color);
  color: var(--virtual-color);
  border-radius: var(--virtual-border-radius);
  box-shadow: var(--virtual-box-shadow);
  box-sizing: border-box;
  color: var(--virtual-color);
  display: flex;
  font: var(--virtual-weight) var(--virtual-font-size) var(--virtual-font);
  height: -moz-fit-content;
  height: fit-content;
  padding: var(--virtual-padding);
  --icon-url: url(/images/icons/virtual.svg);
  --icon-color: var(--virtual-color);
}
.--virtual::before {
  display: var(--virtual-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, .--expand-btn.hovered-styles {
  background-color: var(--expand-btn-background-color-hover);
  box-shadow: var(--expand-btn-box-shadow-hover);
  color: var(--expand-btn-color-hover);
}

.--book-btn {
  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);
  margin-right: 10px;
  margin-bottom: 10px;
}
.--book-btn:hover, .--book-btn.hovered-styles {
  background-color: var(--book-btn-background-color-hover);
  box-shadow: var(--book-btn-box-shadow-hover);
  color: var(--book-btn-color-hover);
}

.view-location-container {
  display: none;
}

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

.--service-chosen,
.--location-summary-container {
  grid-template-rows: 0fr;
}
.--service-chosen > div,
.--location-summary-container > div {
  overflow: hidden;
}

.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 .--services-container, .calendar-active .--services-container {
  transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.location-active .--service-chosen, .calendar-active .--service-chosen {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.location-active .--business-header-container, .calendar-active .--business-header-container {
  transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

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

.--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%;
}

.--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-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-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: absolute;
  top: 0px;
  right: 0px;
  width: calc(100% - 10px);
  min-width: 325px;
  max-width: 450px;
  padding: 10px 15px 40px;
  z-index: 99;
  border-top: 1px solid rgb(148, 163, 184);
  overflow: auto;
  max-height: calc(100vh - 40px);
}
.--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);
  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);
}

.--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, .--time-holder.hovered-styles {
  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 .time {
  font: var(--times-weight) var(--times-font-size) var(--times-font);
  color: var(--times-color);
  border-radius: var(--times-border-radius-hover);
}
.--times .time:not(.no-hover):hover, .--times .time:not(.no-hover).hovered-styles {
  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.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, .--confirm-booking-btn.hovered-styles {
  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, .--change-staff.hovered-styles {
  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);
  font: var(--continue-btn-weight) var(--continue-btn-font-size) var(--continue-btn-font);
  border-radius: var(--continue-btn-border-radius);
  color: var(--continue-btn-color);
  padding: var(--continue-btn-padding);
  width: 100%;
  display: flex;
  justify-content: var(--continue-btn-align);
  box-shadow: var(--continue-btn-box-shadow);
}
.--continue-btn:hover, .--continue-btn.hovered-styles {
  background-color: var(--continue-btn-background-color-hover);
  color: var(--continue-btn-color-hover);
  box-shadow: var(--continue-btn-box-shadow-hover);
}

.--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 {
  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;
}

.--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);
}

.--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);
}

.--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);
  letter-spacing: var(--desc-letter-spacing);
}

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

.--virtual-link {
  font-weight: 600;
  color: var(--virtual-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, .--cancel-btn.hovered-styles {
  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, .--reschedule-btn.hovered-styles {
  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);
}

.--booking-btn-container {
  display: flex;
}

.questionnaire-container [data-page] {
  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(--input-max-width);
  box-sizing: border-box;
  transform: var(--page-transition-start-transform);
  transition: opacity 0.25s ease-in, transform 0.2s ease-in, visibility 0.25s ease-in;
}
.questionnaire-container [data-page].active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.questionnaire-container [data-page].confirm-page {
  --confirm-page-left: 50%;
  transform: translateX(-50%);
  margin-top: 50px;
  left: var(--confirm-page-left);
  transform: var(--confirm-page-transform);
  max-width: 570px;
}

.--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);
}

.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);
}

.--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);
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}
.--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;
}

.--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;
}

.--booking-btn-container.--stacked {
  flex-flow: row;
  flex-wrap: wrap;
  gap: 10px;
  width: 500px;
}

.--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);
  flex-grow: 1;
}
.--deposit-btn:hover, .--deposit-btn.hovered {
  background-color: var(--deposit-btn-background-color-hover);
  color: var(--deposit-btn-color-hover);
  box-shadow: var(--deposit-btn-box-shadow-hover);
}

.--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);
}

.--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;
}

.--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);
  flex-grow: 1;
}
.--pay-full-btn:hover, .--pay-full-btn.hovered {
  background-color: var(--pay-full-btn-background-color-hover);
  color: var(--pay-full-btn-color-hover);
  box-shadow: var(--pay-full-btn-box-shadow-hover);
}

.--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);
  width: 100%;
}
.--pay-later-btn:hover, .--pay-later-btn.hovered {
  background-color: var(--pay-later-btn-background-color-hover);
  color: var(--pay-later-btn-color-hover);
  box-shadow: var(--pay-later-btn-box-shadow-hover);
}

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

.--payment-info {
  display: flex;
  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);
}

.--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 {
  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);
  color: var(--view-receipt-btn-color);
  display: flex;
  margin: var(--view-receipt-btn-margin);
  padding: var(--view-receipt-btn-padding);
  border-radius: var(--view-receipt-btn-border-radius);
  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);
  overflow: hidden;
  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, .--view-receipt-btn.hovered {
  background-color: var(--view-receipt-btn-background-color-hover);
  color: var(--view-receipt-btn-color-hover);
  box-shadow: var(--view-receipt-btn-box-shadow-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: 9;
  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);
}
.--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);
}

@media screen and (max-width: 1300px) {
  .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) {
  .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%);
  }
}
@media screen and (max-width: 350px) {
  #serviceDate {
    max-width: 145px;
  }
}
.form-list .form-item {
  font: 500 0.8rem "Lato";
  box-shadow: 0px 0px 0px 1px var(--color-slate-600);
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
  width: calc(50% - 10px);
  min-width: 325px;
}
.form-list .form-item .questionnaire-service {
  pointer-events: none;
}
.form-list .top-container {
  padding: 20px 20px 1px 20px;
}
.form-list .questionniare {
  font: 600 18px var(--header-font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}
.form-list .form-updated-at {
  padding: 10px 20px 20px;
}
.form-list .questionnaire-services {
  padding: 0px 20px 20px;
}
.form-list .delete-btn {
  display: none;
}

.questionnaire-service {
  --service-background-opacity: 0.2;
  --service-color-opacity: 1;
  background-color: var(--service-background);
  padding: 5px 10px;
  border-radius: 20px;
  box-shadow: 0px 0px 0px 1px var(--service-color);
  color: var(--service-color);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-right: 10px;
  margin-bottom: 10px;
  font: 500 0.8rem var(--text-font);
  width: -moz-fit-content;
  width: fit-content;
}
.questionnaire-service.deleting {
  --service-background-opacity: 0.2;
  --service-color-opacity: 0.2;
}
.questionnaire-service .delete-btn,
.questionnaire-service .success-btn {
  border-radius: 100%;
  --icon-color: #fff;
  margin-left: 5px;
  --tooltip-top: 30px;
}

.full-screen-modal {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 12;
}

.filter-radio {
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
}
.filter-radio:has(:checked), .filter-radio:hover {
  box-shadow: 0px 0px 0px 2px var(--logo-color);
  color: var(--logo-color-darker-10);
}
.filter-radio label {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 100%;
}
.filter-radio input {
  opacity: 0;
  position: absolute;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}

.premade-modal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.1s ease-in, transform 0.1s ease-in;
}
.premade-modal.active {
  opacity: 1;
  transform: translateY(0px);
}

.viewing-template .form-publish-container,
.viewing-template .question-options {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.viewing-template .ghost-input {
  display: none;
}

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

.premade-item {
  border-radius: 10px;
  box-sizing: border-box;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  cursor: pointer;
  height: -moz-fit-content;
  height: fit-content;
  overflow: hidden;
  width: 270px;
}
.premade-item .premade-img-container {
  background: var(--color-slate-100);
}
.premade-item img {
  width: 250px;
}
.premade-item:hover {
  box-shadow: 0px 0px 0px 2px var(--logo-color);
}

.form-publish-container {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}

.toggle-break {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  z-index: 2;
  pointer-events: none;
  color: var(--color-slate-400);
}

.break-line {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  opacity: 0;
}

.page-break {
  width: 100%;
  position: relative;
  cursor: pointer;
}

.broke .page-break {
  height: 27px;
  padding: 25px 0px;
}
.broke .break-line {
  opacity: 1;
  height: 1px;
  background: var(--color-slate-300);
}
.broke .toggle-break {
  opacity: 1;
  pointer-events: all;
}

.questions-modal textarea,
.preview-modal textarea {
  resize: none;
}
.questions-modal .header-container,
.preview-modal .header-container {
  border-bottom: 1px solid var(--color-slate-400);
}
.questions-modal .header-container .header,
.preview-modal .header-container .header {
  font: 600 1.25rem var(--header-font);
}
.questions-modal .header-container .close,
.preview-modal .header-container .close {
  --width: 24px;
  --height: 24px;
}
.questions-modal .save,
.preview-modal .save {
  --width: 24px;
  --height: 24px;
  --tooltip-top: 25px;
}
.questions-modal .question-sidebar,
.preview-modal .question-sidebar {
  width: 420px;
}
.questions-modal .question-sidebar .numbers-toolbar,
.preview-modal .question-sidebar .numbers-toolbar {
  border-right: 1px solid var(--color-slate-400);
}
.questions-modal .question-sidebar .numbers-toolbar .question-numbers-container,
.preview-modal .question-sidebar .numbers-toolbar .question-numbers-container {
  height: calc(100% - 108px);
  overflow-y: auto;
  width: 70px;
  padding-left: 6px;
  box-sizing: border-box;
}
.questions-modal .question-sidebar .numbers-toolbar .question-numbers-container .question-number-link,
.preview-modal .question-sidebar .numbers-toolbar .question-numbers-container .question-number-link {
  height: 32px;
  width: 32px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-family: var(--text-font);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}
.questions-modal .question-sidebar .numbers-toolbar .question-numbers-container .question-number-link.active, .questions-modal .question-sidebar .numbers-toolbar .question-numbers-container .question-number-link:hover,
.preview-modal .question-sidebar .numbers-toolbar .question-numbers-container .question-number-link.active,
.preview-modal .question-sidebar .numbers-toolbar .question-numbers-container .question-number-link:hover {
  background-color: rgba(85, 85, 221, 0.1);
  color: var(--logo-color-darker-10);
}
.questions-modal .question-sidebar .numbers-toolbar .question-expand-container,
.preview-modal .question-sidebar .numbers-toolbar .question-expand-container {
  height: 50px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--color-slate-400);
}
.questions-modal .question-sidebar .numbers-toolbar .question-expand-container .expand,
.preview-modal .question-sidebar .numbers-toolbar .question-expand-container .expand {
  --tooltip-top: -10px;
}
.questions-modal .question-sidebar .numbers-toolbar .question-expand-container .expand::before,
.preview-modal .question-sidebar .numbers-toolbar .question-expand-container .expand::before {
  transform: translate(10px, 10px) scale(0.9);
}
.questions-modal .question-sidebar .numbers-toolbar .question-expand-container .expand:hover::before,
.preview-modal .question-sidebar .numbers-toolbar .question-expand-container .expand:hover::before {
  transform: translate(20px, 0px) scale(1);
}
.questions-modal .question-sidebar .numbers-toolbar .question-expand-container .expand::after,
.preview-modal .question-sidebar .numbers-toolbar .question-expand-container .expand::after {
  transform: rotate(270deg);
}
.questions-modal .questions-top-toolbar,
.preview-modal .questions-top-toolbar {
  box-sizing: border-box;
}
.questions-modal .questions-top-toolbar .add-question,
.preview-modal .questions-top-toolbar .add-question {
  padding: 5px 10px;
  border-radius: 2px;
}
.questions-modal .inner-questions-container,
.preview-modal .inner-questions-container {
  height: 100%;
  overflow-x: hidden;
  overflow-y: overlay;
  padding-bottom: 250px;
  padding-top: 25px;
}
.questions-modal .inner-questions-container.moving-question .question-container,
.preview-modal .inner-questions-container.moving-question .question-container {
  padding-top: 15px;
  padding-bottom: 15px;
  cursor: pointer;
}
.questions-modal .inner-questions-container.moving-question .question-container input,
.questions-modal .inner-questions-container.moving-question .question-container div,
.preview-modal .inner-questions-container.moving-question .question-container input,
.preview-modal .inner-questions-container.moving-question .question-container div {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.questions-modal .inner-questions-container.moving-question .question-container .ghost-input,
.questions-modal .inner-questions-container.moving-question .question-container .question-options,
.questions-modal .inner-questions-container.moving-question .question-container .broke,
.preview-modal .inner-questions-container.moving-question .question-container .ghost-input,
.preview-modal .inner-questions-container.moving-question .question-container .question-options,
.preview-modal .inner-questions-container.moving-question .question-container .broke {
  display: none !important;
}
.questions-modal .inner-questions-container.moving-question .question-container:hover::after,
.preview-modal .inner-questions-container.moving-question .question-container:hover::after {
  background-color: var(--color-slate-400);
}
.questions-modal .inner-questions-container.moving-question .question-container::after,
.preview-modal .inner-questions-container.moving-question .question-container::after {
  content: "";
  position: absolute;
  top: 0px;
  height: 2px;
  width: 100%;
  background-color: var(--color-slate-200);
}
.questions-modal .options-input-container:has(:-moz-placeholder) .options-input, .questions-modal .options-input-container:has(:-moz-placeholder) .usual-label, .preview-modal .options-input-container:has(:-moz-placeholder) .options-input, .preview-modal .options-input-container:has(:-moz-placeholder) .usual-label {
  opacity: 0.5;
}
.questions-modal .options-input-container:has(:placeholder-shown) .options-input,
.questions-modal .options-input-container:has(:placeholder-shown) .usual-label,
.preview-modal .options-input-container:has(:placeholder-shown) .options-input,
.preview-modal .options-input-container:has(:placeholder-shown) .usual-label {
  opacity: 0.5;
}
.questions-modal .options-input-container .options-input,
.preview-modal .options-input-container .options-input {
  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;
  width: 30px;
  margin-left: 5px;
  height: 30px;
}
.questions-modal .options-input-container .options-input.height,
.preview-modal .options-input-container .options-input.height {
  width: 45px;
}
.questions-modal .options-input-container .options-input::-moz-placeholder, .preview-modal .options-input-container .options-input::-moz-placeholder {
  opacity: 0;
}
.questions-modal .options-input-container .options-input::placeholder,
.preview-modal .options-input-container .options-input::placeholder {
  opacity: 0;
}
.questions-modal .question-container,
.preview-modal .question-container {
  width: 550px;
  margin: 0px 20px;
  padding: 0px 20px 0px 31px;
}
.questions-modal .question-container.being-moved,
.preview-modal .question-container.being-moved {
  box-shadow: 0px 0px 0px 5px var(--color-warning-200);
  background-color: var(--color-warning-200);
}
.questions-modal .question-container.being-moved::after,
.preview-modal .question-container.being-moved::after {
  height: 0px !important;
}
.questions-modal .question-container.being-moved + .question-container::after,
.preview-modal .question-container.being-moved + .question-container::after {
  height: 0px !important;
}
.questions-modal .question-container[data-blocks="3"],
.preview-modal .question-container[data-blocks="3"] {
  width: 549.5px;
}
.questions-modal .question-container .choice-input,
.preview-modal .question-container .choice-input {
  transition: height 0.2s ease-in, opacity 0.2s ease-in;
  border: 0;
  padding: 4px 0px;
  font: 500 0.9rem var(--text-font);
  outline: 0 !important;
  opacity: 1;
  height: 25.3px;
  box-sizing: border-box;
}
.questions-modal .question-container .choice-input.hide,
.preview-modal .question-container .choice-input.hide {
  height: 0;
  opacity: 0;
}
.questions-modal .question-container .display-choice-container,
.preview-modal .question-container .display-choice-container {
  padding: 2px;
}
.questions-modal .question-container .display-choice-container .dropdown,
.preview-modal .question-container .display-choice-container .dropdown {
  width: 175px;
}
.questions-modal .question-container .display-choice-container .dropdown .dropdown-btn,
.preview-modal .question-container .display-choice-container .dropdown .dropdown-btn {
  padding: 10px 12px;
}
.questions-modal .question-container .trigger-container,
.preview-modal .question-container .trigger-container {
  background: var(--color-slate-100);
  border-radius: 4px;
  margin-bottom: 15px;
}
.questions-modal .question-container .trigger-container .triggers-header,
.preview-modal .question-container .trigger-container .triggers-header {
  font: 600 0.85rem var(--text-font);
  color: var(--color-slate-700);
}
.questions-modal .question-container .trigger-container .triggers,
.preview-modal .question-container .trigger-container .triggers {
  font: 500 0.875rem Lato;
}
.questions-modal .question-container .trigger-container .triggers .delete-trigger,
.preview-modal .question-container .trigger-container .triggers .delete-trigger {
  position: absolute;
  right: 0;
  --width: 15px;
  --height: 15px;
  background: var(--color-danger-600);
  box-shadow: 0px 0px 0px 2px #fff, 0px 0px 2px 2px rgba(0, 0, 0, 0.431372549);
  border-radius: 100%;
  --icon-color: #fff;
  opacity: 0;
  visibility: hidden;
  top: 0px;
  transition: opacity 0.2s ease-in, visbility 0.2s ease-in, top 0.2s ease-in;
  scale: 0.95;
  z-index: 99;
}
.questions-modal .question-container .trigger-container .triggers .trigger-question-container,
.preview-modal .question-container .trigger-container .triggers .trigger-question-container {
  padding: 7px 0px;
}
.questions-modal .question-container .trigger-container .triggers .trigger-question-container[data-trigger-id]:hover .delete-trigger,
.preview-modal .question-container .trigger-container .triggers .trigger-question-container[data-trigger-id]:hover .delete-trigger {
  opacity: 1;
  visibility: visible;
  top: -4px;
}
.questions-modal .question-container .trigger-container .triggers .dropdown,
.preview-modal .question-container .trigger-container .triggers .dropdown {
  margin: 0;
  border: 0;
  box-shadow: 0px 0px 0px 0px;
}
.questions-modal .question-container .trigger-container .triggers .dropdown .dropdown-btn,
.preview-modal .question-container .trigger-container .triggers .dropdown .dropdown-btn {
  padding: 0;
  box-shadow: 0px 0px 0px 0px;
  font-weight: 700;
  margin: 0px 7px;
}
.questions-modal .question-container .trigger-container .triggers .dropdown .dropdown-btn.operator,
.preview-modal .question-container .trigger-container .triggers .dropdown .dropdown-btn.operator {
  color: var(--logo-color);
}
.questions-modal .question-container .trigger-container .triggers .dropdown .dropdown-btn.operator.not-selected,
.preview-modal .question-container .trigger-container .triggers .dropdown .dropdown-btn.operator.not-selected {
  opacity: 0.5;
}
.questions-modal .question-container .trigger-container .triggers .dropdown .dropdown-btn.question-answer,
.preview-modal .question-container .trigger-container .triggers .dropdown .dropdown-btn.question-answer {
  color: var(--color-success-700);
}
.questions-modal .question-container .trigger-container .triggers .dropdown .dropdown-btn.control-flow,
.preview-modal .question-container .trigger-container .triggers .dropdown .dropdown-btn.control-flow {
  font-weight: 500;
}
.questions-modal .question-container .trigger-container .triggers .dropdown ul,
.preview-modal .question-container .trigger-container .triggers .dropdown ul {
  min-width: 200px;
}
.questions-modal .question-container .title-input[data-db-name=text_small],
.preview-modal .question-container .title-input[data-db-name=text_small] {
  height: 36px;
}
.questions-modal .question-container .title-input[data-db-name=text_med],
.preview-modal .question-container .title-input[data-db-name=text_med] {
  height: 100px;
}
.questions-modal .question-container .title-input[data-db-name=text_long],
.preview-modal .question-container .title-input[data-db-name=text_long] {
  height: 175px;
}
.questions-modal .question-container .title-input.label,
.preview-modal .question-container .title-input.label {
  font: 600 0.9rem var(--text-font);
  padding: 9px 2px 5px;
}
.questions-modal .question-container .title-input.title,
.preview-modal .question-container .title-input.title {
  font: 300 1.1rem var(--header-font);
  padding: 9px 2px 5px;
}
.questions-modal .question-container .title-input.text,
.preview-modal .question-container .title-input.text {
  font: 500 0.9rem var(--text-font);
  padding: 9px 2px 5px;
}
.questions-modal .question-container .title-input.text, .questions-modal .question-container .title-input.label, .questions-modal .question-container .title-input.large-header, .questions-modal .question-container .title-input.medium-header, .questions-modal .question-container .title-input.small-header, .questions-modal .question-container .title-input.title,
.preview-modal .question-container .title-input.text,
.preview-modal .question-container .title-input.label,
.preview-modal .question-container .title-input.large-header,
.preview-modal .question-container .title-input.medium-header,
.preview-modal .question-container .title-input.small-header,
.preview-modal .question-container .title-input.title {
  width: 100%;
}
.questions-modal .question-container .title-input.text.align-c,
.questions-modal .question-container .title-input.text .ql-align-center, .questions-modal .question-container .title-input.label.align-c,
.questions-modal .question-container .title-input.label .ql-align-center, .questions-modal .question-container .title-input.large-header.align-c,
.questions-modal .question-container .title-input.large-header .ql-align-center, .questions-modal .question-container .title-input.medium-header.align-c,
.questions-modal .question-container .title-input.medium-header .ql-align-center, .questions-modal .question-container .title-input.small-header.align-c,
.questions-modal .question-container .title-input.small-header .ql-align-center, .questions-modal .question-container .title-input.title.align-c,
.questions-modal .question-container .title-input.title .ql-align-center,
.preview-modal .question-container .title-input.text.align-c,
.preview-modal .question-container .title-input.text .ql-align-center,
.preview-modal .question-container .title-input.label.align-c,
.preview-modal .question-container .title-input.label .ql-align-center,
.preview-modal .question-container .title-input.large-header.align-c,
.preview-modal .question-container .title-input.large-header .ql-align-center,
.preview-modal .question-container .title-input.medium-header.align-c,
.preview-modal .question-container .title-input.medium-header .ql-align-center,
.preview-modal .question-container .title-input.small-header.align-c,
.preview-modal .question-container .title-input.small-header .ql-align-center,
.preview-modal .question-container .title-input.title.align-c,
.preview-modal .question-container .title-input.title .ql-align-center {
  margin: auto;
  text-align: center;
}
.questions-modal .question-container .title-input.text.align-l,
.questions-modal .question-container .title-input.text .ql-align-left, .questions-modal .question-container .title-input.label.align-l,
.questions-modal .question-container .title-input.label .ql-align-left, .questions-modal .question-container .title-input.large-header.align-l,
.questions-modal .question-container .title-input.large-header .ql-align-left, .questions-modal .question-container .title-input.medium-header.align-l,
.questions-modal .question-container .title-input.medium-header .ql-align-left, .questions-modal .question-container .title-input.small-header.align-l,
.questions-modal .question-container .title-input.small-header .ql-align-left, .questions-modal .question-container .title-input.title.align-l,
.questions-modal .question-container .title-input.title .ql-align-left,
.preview-modal .question-container .title-input.text.align-l,
.preview-modal .question-container .title-input.text .ql-align-left,
.preview-modal .question-container .title-input.label.align-l,
.preview-modal .question-container .title-input.label .ql-align-left,
.preview-modal .question-container .title-input.large-header.align-l,
.preview-modal .question-container .title-input.large-header .ql-align-left,
.preview-modal .question-container .title-input.medium-header.align-l,
.preview-modal .question-container .title-input.medium-header .ql-align-left,
.preview-modal .question-container .title-input.small-header.align-l,
.preview-modal .question-container .title-input.small-header .ql-align-left,
.preview-modal .question-container .title-input.title.align-l,
.preview-modal .question-container .title-input.title .ql-align-left {
  margin: unset;
  text-align: left;
}
.questions-modal .question-container .title-input.text.align-r,
.questions-modal .question-container .title-input.text .ql-align-right, .questions-modal .question-container .title-input.label.align-r,
.questions-modal .question-container .title-input.label .ql-align-right, .questions-modal .question-container .title-input.large-header.align-r,
.questions-modal .question-container .title-input.large-header .ql-align-right, .questions-modal .question-container .title-input.medium-header.align-r,
.questions-modal .question-container .title-input.medium-header .ql-align-right, .questions-modal .question-container .title-input.small-header.align-r,
.questions-modal .question-container .title-input.small-header .ql-align-right, .questions-modal .question-container .title-input.title.align-r,
.questions-modal .question-container .title-input.title .ql-align-right,
.preview-modal .question-container .title-input.text.align-r,
.preview-modal .question-container .title-input.text .ql-align-right,
.preview-modal .question-container .title-input.label.align-r,
.preview-modal .question-container .title-input.label .ql-align-right,
.preview-modal .question-container .title-input.large-header.align-r,
.preview-modal .question-container .title-input.large-header .ql-align-right,
.preview-modal .question-container .title-input.medium-header.align-r,
.preview-modal .question-container .title-input.medium-header .ql-align-right,
.preview-modal .question-container .title-input.small-header.align-r,
.preview-modal .question-container .title-input.small-header .ql-align-right,
.preview-modal .question-container .title-input.title.align-r,
.preview-modal .question-container .title-input.title .ql-align-right {
  margin-left: auto;
  text-align: right;
}
.questions-modal .question-container .title-input.text span, .questions-modal .question-container .title-input.label span, .questions-modal .question-container .title-input.large-header span, .questions-modal .question-container .title-input.medium-header span, .questions-modal .question-container .title-input.small-header span, .questions-modal .question-container .title-input.title span,
.preview-modal .question-container .title-input.text span,
.preview-modal .question-container .title-input.label span,
.preview-modal .question-container .title-input.large-header span,
.preview-modal .question-container .title-input.medium-header span,
.preview-modal .question-container .title-input.small-header span,
.preview-modal .question-container .title-input.title span {
  position: relative;
}
.questions-modal .question-container .title-input.text:empty::before, .questions-modal .question-container .title-input.label:empty::before, .questions-modal .question-container .title-input.large-header:empty::before, .questions-modal .question-container .title-input.medium-header:empty::before, .questions-modal .question-container .title-input.small-header:empty::before, .questions-modal .question-container .title-input.title:empty::before,
.preview-modal .question-container .title-input.text:empty::before,
.preview-modal .question-container .title-input.label:empty::before,
.preview-modal .question-container .title-input.large-header:empty::before,
.preview-modal .question-container .title-input.medium-header:empty::before,
.preview-modal .question-container .title-input.small-header:empty::before,
.preview-modal .question-container .title-input.title:empty::before {
  content: attr(data-placeholder);
  color: var(--color-gray-700);
}
.questions-modal .question-container .title-input.text:focus-within, .questions-modal .question-container .title-input.label:focus-within, .questions-modal .question-container .title-input.large-header:focus-within, .questions-modal .question-container .title-input.medium-header:focus-within, .questions-modal .question-container .title-input.small-header:focus-within, .questions-modal .question-container .title-input.title:focus-within,
.preview-modal .question-container .title-input.text:focus-within,
.preview-modal .question-container .title-input.label:focus-within,
.preview-modal .question-container .title-input.large-header:focus-within,
.preview-modal .question-container .title-input.medium-header:focus-within,
.preview-modal .question-container .title-input.small-header:focus-within,
.preview-modal .question-container .title-input.title:focus-within {
  box-shadow: 0px 0px 0px 0px var(--color-slate-700);
}
.questions-modal .question-container .title-input.large-header,
.preview-modal .question-container .title-input.large-header {
  font: 600 1.7rem var(--header-font);
}
.questions-modal .question-container .title-input.medium-header,
.preview-modal .question-container .title-input.medium-header {
  font: 600 1.4rem var(--header-font);
}
.questions-modal .question-container .title-input.small-header,
.preview-modal .question-container .title-input.small-header {
  font: 600 1.2rem var(--header-font);
}
.questions-modal .question-container .title-input.input,
.preview-modal .question-container .title-input.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;
  padding: 9px;
  box-sizing: border-box;
  width: 305px;
  color: var(--color-gray-600);
}
.questions-modal .question-container .title-input.input.im,
.preview-modal .question-container .title-input.input.im {
  width: 75px;
}
.questions-modal .question-container .title-input.input.cm,
.preview-modal .question-container .title-input.input.cm {
  width: 100px;
  position: relative;
}
.questions-modal .question-container .title-input.input.cm::after,
.preview-modal .question-container .title-input.input.cm::after {
  content: attr(placeholder);
  position: absolute;
  right: 10px;
}
.questions-modal .question-container .title-input.input.dd, .questions-modal .question-container .title-input.input.mm,
.preview-modal .question-container .title-input.input.dd,
.preview-modal .question-container .title-input.input.mm {
  width: 45px;
  text-align: center;
}
.questions-modal .question-container .title-input.input.yyyy,
.preview-modal .question-container .title-input.input.yyyy {
  width: 60px;
  text-align: center;
}
.questions-modal .question-container .title-input.input.dob-one,
.preview-modal .question-container .title-input.input.dob-one {
  width: 115px;
}
.questions-modal .question-container .title-input.input::-moz-placeholder, .preview-modal .question-container .title-input.input::-moz-placeholder {
  color: var(--color-gray-600);
}
.questions-modal .question-container .title-input.input::placeholder,
.preview-modal .question-container .title-input.input::placeholder {
  color: var(--color-gray-600);
}
.questions-modal .question-container .title-input.input:hover, .questions-modal .question-container .title-input.input:focus-within, .questions-modal .question-container .title-input.input.focused,
.preview-modal .question-container .title-input.input:hover,
.preview-modal .question-container .title-input.input:focus-within,
.preview-modal .question-container .title-input.input.focused {
  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;
}
.questions-modal .title-width,
.preview-modal .title-width {
  width: 100%;
}
.questions-modal .title-input,
.preview-modal .title-input {
  outline: 0;
  border: 0;
  font: 500 0.9rem var(--text-font);
  padding: 5px 2px;
  color: var(--text-color);
  box-sizing: border-box;
  flex-shrink: 0;
}
.questions-modal .question-options,
.preview-modal .question-options {
  display: block;
  position: absolute;
  right: -30px;
  top: 10px;
}
.questions-modal .question-container:has(.spacer) .ghost-input,
.preview-modal .question-container:has(.spacer) .ghost-input {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.questions-modal .title-width:has(.spacer) + .question-options,
.preview-modal .title-width:has(.spacer) + .question-options {
  top: 50%;
  transform: translateY(-50%);
}
.questions-modal .spacer,
.preview-modal .spacer {
  align-items: center;
  color: rgba(0, 0, 0, 0.65);
  cursor: pointer;
  display: flex;
  height: 20px;
  padding: 0px;
  width: 100%;
}
.questions-modal .spacer:hover, .questions-modal .spacer:focus-within, .questions-modal .spacer.focused,
.preview-modal .spacer:hover,
.preview-modal .spacer:focus-within,
.preview-modal .spacer.focused {
  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;
}

.question-edit-toolbar .dropdown {
  box-sizing: border-box;
  border-radius: 4px;
  font: 500 1rem var(--text-font);
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  margin-top: 5px;
}
.question-edit-toolbar .dropdown .dropdown-btn {
  height: 100%;
  width: 100%;
  text-align: start;
  padding: 5px;
}
.question-edit-toolbar .dropdown ul {
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;
  margin-top: 4px;
  padding: 5px 0px 5px 6px;
}
.question-edit-toolbar .dropdown ul .dropdown-ele {
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 1px;
}
.question-edit-toolbar .restriction-container .delete-btn {
  --icon-color: #fff;
  border-radius: 100%;
  --width: 15px;
  --height: 15px;
}

.trigger-input {
  border: 0;
  width: 100px;
}

.preview-modal {
  background: var(--business-container-background-color);
  box-sizing: border-box;
  display: flex;
  height: 100%;
  opacity: 0;
  position: fixed;
  transform: translateY(10px);
  width: 100%;
  z-index: 999;
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}
.preview-modal.active {
  opacity: 1;
  transform: translate(0px);
}
.preview-modal .question-container {
  flex-shrink: 0;
}
.preview-modal .question-container.broke .page-break {
  display: none;
}
.preview-modal .question-options,
.preview-modal .ghost-input {
  display: none !important;
}
.preview-modal .title-width {
  width: 100%;
}
.preview-modal .align-t {
  margin: 0;
}
.preview-modal .align-c {
  margin: auto;
}
.preview-modal .align-b {
  margin-top: auto;
}

.preview-btns {
  top: 15px;
  right: 15px;
  transition: transform 0.2s ease-in;
  z-index: 2;
}
.preview-btns button {
  z-index: 9999;
}
.preview-btns.bar-open {
  transform: translateX(-300px);
}

.customise-preview,
.close-preview {
  color: var(--color-slate-400);
}
.customise-preview:hover,
.close-preview:hover {
  color: var(--color-slate);
}

.customise-bar {
  background-color: #fff;
  border-left: 1px solid var(--color-slate-300);
  width: 300px;
  right: 0px;
  top: 0px;
  height: 100dvh;
  max-height: 100dvh;
  overflow: auto;
  transform: translateX(100%);
  transition: transform 0.2s ease-in;
}
.customise-bar.active {
  transform: translateX(0px);
}

.customise-bar-content {
  height: 100%;
}

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

.unit-input {
  width: 85px;
}

.unit-dropdown {
  position: absolute;
  right: -4px;
  bottom: 2px;
}
.unit-dropdown button {
  text-transform: lowercase;
}
.unit-dropdown-list.active {
  z-index: 9999;
}
.unit-dropdown-list .dropdown-ele {
  padding: 6px;
}

.vertical-top,
.vertical-bottom,
.vertical-center {
  width: 26px;
  height: 26px;
}
.vertical-top.active,
.vertical-bottom.active,
.vertical-center.active {
  background-color: var(--color-slate-200);
}

.logic-conditions {
  top: 35px;
  right: -10px;
  width: 200px;
}

.new-block-popover {
  left: -10px;
  top: 39px;
  width: 178px;
  font-size: 0.875rem;
}

.question-container:hover .ghost-input,
.question-container:focus-within .ghost-input {
  opacity: 1;
}

.questions-modal .question-container:has(.input) + .question-container:has(.input) {
  margin-top: 3px;
  margin-bottom: 3px;
}

.ghost-input {
  box-shadow: var(--color-slate-400) 0px 1px 1px 0px, var(--color-slate-200) 0px 0px 0px 1px, var(--color-slate-100) 0px 2px 5px 0px;
  box-sizing: border-box;
  width: 35px;
  height: 35px;
  margin-left: -40px;
  opacity: 0;
  font-weight: 800;
  color: var(--color-slate-400);
}
.ghost-input:hover {
  color: var(--color-slate-700);
  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;
}

.delete-block-container:hover .delete-block {
  opacity: 1;
}

.delete-block {
  position: absolute;
  top: 8px;
  right: 10px;
  --tooltip-width: 62px;
  opacity: 0;
}

.new-block-modal {
  z-index: 999;
  box-sizing: border-box;
}

.new-block-header {
  border-bottom: 1px solid var(--color-slate-300);
  font: 600 1.1rem var(--header-font);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 15px 20px;
}

.block-type-list {
  width: 200px;
  padding: 5px 15px;
  border-right: 1px solid var(--color-slate-300);
  box-sizing: border-box;
  flex-shrink: 0;
}

.block-type-btn.active {
  background: var(--color-slate-100);
  color: var(--color-slate-600);
  font-weight: 600;
}

.example-description {
  line-height: 1.2rem;
}

.contain-1000 {
  max-width: 1000px;
  margin: auto;
}

.question-edit-toolbar,
.page-options-box {
  position: fixed;
  width: 300px;
  background: #fff;
  padding: 5px;
  box-sizing: border-box;
  box-shadow: var(--color-slate-300) 0px 1px 1px 0px, var(--color-slate-300) 0px 0px 0px 1px, var(--color-slate-200) 0px 2px 5px 3px;
  border-radius: 8px;
  z-index: 99;
  left: -20px;
  opacity: 0;
  pointer-events: none;
}
.question-edit-toolbar.active,
.page-options-box.active {
  opacity: 1;
  pointer-events: all;
}
.question-edit-toolbar input,
.page-options-box 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;
  border: 0;
  padding: 5px;
  border-radius: 4px;
  box-sizing: border-box;
}

.page-options-box {
  width: -moz-fit-content;
  width: fit-content;
  padding: 10px;
}
.page-options-box .animate-options-input {
  width: 65px;
  height: 27.5px;
}
.page-options-box .icon {
  width: 26px;
  height: 26px;
}
.page-options-box .icon.active {
  background-color: var(--color-slate-200);
}

.page-animations-grid {
  display: grid;
  grid-template-columns: 85.5px 70px 70px 85.5px 70px 20px;
}
.page-animations-grid.inactive {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0.5;
  cursor: not-allowed;
}
.page-animations-grid .remove {
  --icon-color: var(--color-danger-700);
}
.page-animations-grid .dropdown {
  margin-top: 0px;
  width: 80.5px;
}
.page-animations-grid .dropdown .offscreen.bottom {
  bottom: 35px;
  top: unset;
}
.page-animations-grid [data-unit]::after {
  bottom: 2px;
  color: var(--text-color);
  content: attr(data-unit);
  font: 400 0.75rem var(--text-font);
  position: absolute;
  right: 9px;
}

.ms-input {
  position: relative;
}
.ms-input::after {
  content: "ms";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font: 500 0.8rem var(--header-font);
}

.required-dropdown-list {
  width: 80px;
  right: 0;
}

.map-values-list {
  width: 140px;
  right: 0;
}

.further-options-dropdown li,
.required-dropdown-list li,
.map-values-list li {
  font-size: 0.875rem;
  padding: 4px 8px;
}

.text-toolbar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  opacity: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

[data-style-value].active {
  background-color: var(--color-slate-200);
}

.edit-text-toolbar {
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  box-shadow: var(--color-slate-300) 0px 1px 1px 0px, var(--color-slate-300) 0px 0px 0px 1px, var(--color-slate-200) 0px 2px 5px 3px;
  background: #fff;
  display: flex;
  gap: 5px;
  margin-top: 5px;
}
.edit-text-toolbar .color-picker-full-container {
  background: transparent;
  box-shadow: unset;
  height: 3px;
  display: flex;
  position: absolute;
  bottom: -1px;
  min-width: unset;
}
.edit-text-toolbar .color-picker-full-container .color-picker-preview-box {
  height: 4px;
  border: 0;
  box-shadow: unset;
  border-radius: 0;
  width: 17px;
}
.edit-text-toolbar .icon {
  width: 26px;
  height: 26px;
  transition: background-color 0s;
}
.edit-text-toolbar .icon::after {
  --icon-color: var(--color-slate-700);
}
.edit-text-toolbar.active {
  opacity: 1;
  pointer-events: all;
}
.edit-text-toolbar [data-tooltip]::before {
  --tooltip-top: 33px;
  white-space: nowrap;
  width: -moz-fit-content;
  width: fit-content;
}

[data-anchor] {
  text-decoration: underline;
  color: blue;
}

.resize-input {
  width: 10px;
  flex-shrink: 0;
  cursor: ew-resize;
}

.measurement-label {
  position: absolute;
  right: 0;
  z-index: 9;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font: 400 0.875rem var(--text-font);
  color: var(--color-slate-500);
}

.form-page-toolbar {
  width: 300px;
  position: sticky;
  top: 0;
  height: 100%;
  border-right: 1px solid var(--color-slate-300);
}
.form-page-toolbar-part {
  background: var(--color-slate-100);
}
.form-page-toolbar-part.form-pages {
  height: calc(75% - 40px);
  overflow-y: auto;
}
.form-page-toolbar-part.form-ends {
  height: calc(25% - 40px);
  overflow-y: auto;
}

.page-blocks-wrapper [data-page-type=end-page] {
  display: none;
}
.page-blocks-wrapper.show-form-end [data-page-type=end-page].show {
  display: flex;
}
.page-blocks-wrapper.show-form-end [data-page-type=normal] {
  display: none;
}

.product-variant-image-container img {
  width: 60px;
}

.product-grid {
  display: grid;
  gap: 8px;
}

.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;
  }
}
.user-details .details-container {
  max-width: 1000px;
  margin-right: auto;
  margin-left: 0px;
}

.location-logo-container {
  max-width: 300px;
}

.sessions-table, .customers-table, .prescriptions-table {
  text-align: left;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
.sessions-table th, .sessions-table td, .customers-table th, .customers-table td, .prescriptions-table th, .prescriptions-table td {
  font: 600 0.875rem var(--text-font);
}
.sessions-table td, .customers-table td, .prescriptions-table td {
  font-weight: 400;
}
.sessions-table th,
.sessions-table td, .customers-table th,
.customers-table td, .prescriptions-table th,
.prescriptions-table td {
  padding: 8px 0px;
}
.sessions-table tr, .customers-table tr, .prescriptions-table tr {
  border-bottom: 1px solid var(--color-slate-300);
}

.copy-url-btn {
  color: var(--color-slate-500);
}
.copy-url-btn::before {
  width: 14px;
  height: 14px;
  background: transparent;
  box-shadow: 0px 0px 0px 0px;
  padding: 0;
  content: "";
  -webkit-mask-image: url(/images/icons/copy.svg);
  mask-image: url(/images/icons/copy.svg);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--color-slate-500);
  display: block;
  margin: 0px 3px;
}
.copy-url-btn::after {
  content: "";
  padding: 3px 3px 3px 3px;
  position: absolute;
  width: 100%;
  box-shadow: 0px 0px 0px 1px var(--color-slate-200);
  left: 50%;
  height: 100%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
}
.copy-url-btn:hover {
  color: var(--text-color);
}
.copy-url-btn:hover::before {
  background-color: var(--text-color);
}
.copy-url-btn:hover::after {
  box-shadow: 0px 0px 0px 1px var(--color-slate-400);
}

.current-business {
  position: relative;
}
.current-business::after {
  color: var(--logo-color-darker-10);
  content: "Active business";
  font: 600 0.875rem var(--header-font);
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
}

.bank-account-searchable {
  width: 300px;
}
.bank-account-searchable button {
  font-size: 0.875rem;
}
.bank-account-searchable .searchable-list {
  top: 60px;
}

.people-modal {
  width: 650px;
  max-width: 650px;
}

.person-right-side {
  max-height: 500px;
  overflow: overlay;
}

.person-error .input-container .person-phone-input, .person-container .input-container .person-phone-input {
  height: 27px;
  border-radius: 0px 4px 4px 0px;
}
.person-error .invalid-msg, .person-container .invalid-msg {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: opacity 0.15s ease, grid-template-rows 0.2s ease, margin 0.1s ease;
  margin: 0px;
  font: 500 0.8rem var(--text-font);
  color: var(--color-danger-700);
  pointer-events: none;
}
.person-error .invalid-msg > div, .person-container .invalid-msg > div {
  overflow: hidden;
}

.searchable-btn.person-phone-btn {
  border-radius: 4px 0px 0px 4px;
  font-size: 0.875rem;
}

.person-error.error .invalid-msg {
  grid-template-rows: 1fr;
  opacity: 1;
  margin: 5px 0px;
}

.person-container {
  max-width: 300px;
}
.person-container .dob-small {
  width: 40px;
}
.person-container .dob-long {
  width: 60px;
}
.person-container:has(.touched:invalid) label {
  color: var(--color-danger-700) !important;
}
.person-container .touched:invalid {
  box-shadow: 0px 0px 0px 1px var(--color-danger-700) !important;
}
.person-container:has(.touched:invalid) .invalid-msg {
  grid-template-rows: 1fr;
  opacity: 1;
  margin: 5px 0px;
}

.person-searchable-list {
  max-width: 300px;
}
.person-searchable-list .searchable-btn {
  font-size: 0.875rem;
  padding: 5px;
}
.person-searchable-list .searchable-list {
  top: 53px;
}
.person-searchable-list .searchable-list.flip {
  top: -182px;
}
.person-searchable-list .phone-list {
  top: 35px;
  width: 300px;
}
.person-searchable-list .searchable-list input, .person-searchable-list .phone-list input {
  padding: 5px;
  font-size: 0.875rem;
}

.person-document-modal {
  width: 640px;
  box-sizing: border-box;
  padding: 0px;
  min-height: 560px;
  z-index: 15;
}

.add-later label, .add-later button {
  opacity: 0.5;
  pointer-events: none;
}
.add-later::after {
  content: "Add the documents after creating the person";
  position: absolute;
  left: 140px;
  top: 0px;
  font: 400 0.7rem Lato;
  width: 132px;
  background: var(--color-slate-700);
  color: #fff;
  border-radius: 4px;
  padding: 5px;
}

.type-dropdown {
  width: -moz-fit-content;
  width: fit-content;
  padding: 3px 20px 3px 4px;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  transition: box-shadow 0.2s ease-in;
}
.type-dropdown.has-chevron::after {
  height: 17px;
  width: 17px;
}
.type-dropdown ul {
  left: 0px;
  top: 29px;
  width: 190px;
}
.type-dropdown .dropdown-ele {
  box-sizing: border-box;
  width: 100%;
}

.identity-type-list {
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  cursor: pointer;
  transition: box-shadow 0.2s ease-in;
}
.identity-type-list button {
  box-shadow: unset;
  padding: 3px 20px 3px 4px;
  font-size: 0.9rem;
  outline: 0;
  width: -moz-fit-content;
  width: fit-content;
}
.identity-type-list.has-chevron::after {
  height: 17px;
  width: 17px;
}
.identity-type-list .searchable-list {
  top: 27px;
  width: 250px;
}
.identity-type-list .searchable-list input {
  padding: 5px;
  font-size: 0.875rem;
}

.role-list-btn,
.role-list {
  padding: 5px;
  font-size: 0.875rem;
  max-width: 300px;
  box-sizing: border-box;
}

.role-list {
  top: -100px;
}
.role-list li {
  width: 100%;
  box-sizing: border-box;
}

.information-box {
  width: 40px;
  box-shadow: 0px 0px 0px 1px var(--color-slate-500);
  margin: 0px 3px 5px;
  --tooltip-width: 58px;
}
.information-box.role-box {
  width: -moz-fit-content;
  width: fit-content;
  padding: 3px;
  --tooltip-width: 80px;
}

.person-input, .person-phone-input {
  box-sizing: border-box;
  flex-shrink: 0;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  border: 0;
  outline: 0px !important;
}
.person-input:focus-within, .person-phone-input:focus-within {
  box-shadow: 0px 0px 0px 1px var(--color-slate-700);
}

.person-phone-input {
  border-radius: 0px 4px 4px 0px;
  flex-shrink: 1;
  margin-left: 1px;
}

.persons-radio {
  height: 25px;
  width: 55px;
}

.account-name {
  width: 235px;
}

.domain-status {
  width: 100px;
}

.remove-domain {
  width: 100px;
}

.profile-change-btn {
  width: 300px;
}

.current-session {
  position: relative;
}
.current-session::after {
  content: "Active session";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font: 600 0.875rem var(--header-font);
  color: var(--logo-color-darker-10);
}

.transfer-keys-modal {
  transition: height 0.2s ease-in;
}
.transfer-keys-modal .info-box {
  font: 500 0.875rem var(--text-font);
  padding: 5px;
  border-radius: 4px;
  background: var(--color-warning-100);
  box-shadow: 0px 0px 0px 1px var(--color-warning-400);
}
.transfer-keys-modal .key-code {
  color: var(--text-color);
  font: 500 3rem var(--header-font);
  text-align: center;
}

.audit-modal {
  top: 0;
  left: 0;
  transform: unset;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border-radius: 0;
}
.audit-modal.active {
  transform: unset;
}
.audit-modal .header-container {
  border-bottom: 1px solid var(--color-slate-400);
  padding: 15px;
}
.audit-modal .dropdown-placeholder {
  font: 600 1.5rem var(--header-font);
  width: 325px;
  margin: 15px auto 0px;
  opacity: 0.35;
  text-align: center;
  cursor: wait;
}
.audit-modal .dropdown {
  width: 325px;
  margin: 15px auto 0px;
}
.audit-modal .dropdown .dropdown-btn {
  font: 600 1.5rem var(--header-font);
}
.audit-modal .dropdown ul {
  left: -10px;
  top: 35px;
}
.audit-modal .dropdown ul .dropdown-ele {
  width: 100%;
  box-sizing: border-box;
  font: 600 1.5rem var(--header-font);
}
.audit-modal .chat-wrapper {
  height: calc(100% - 142px);
}
.audit-modal .full-chat-container {
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-slate-400);
  box-shadow: 0px 0px 3px 0px var(--color-gray-400), 0px 2px 12px 1px rgba(0, 0, 0, 0.2);
}
.audit-modal .full-chat-container .room-choice {
  width: 25%;
  border-right: 1px solid var(--color-slate-400);
  max-width: 250px;
  flex-shrink: 0;
}
.audit-modal .full-chat-container .room-choice .choice-header {
  border-bottom: 1px solid var(--color-slate-400);
}
.audit-modal .full-chat-container .room-choice .room-list {
  overflow-y: auto;
  height: calc(100% - 76px);
}
.audit-modal .full-chat-container .room-choice .room-list .audit-room {
  border-bottom: 1px solid var(--color-slate-400);
  cursor: pointer;
}
.audit-modal .full-chat-container .room-choice .room-list .audit-room:hover, .audit-modal .full-chat-container .room-choice .room-list .audit-room.selected {
  background-color: var(--color-slate-100);
}
.audit-modal .full-chat-container .chat-box {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  width: 100%;
  overflow-y: auto;
}
.audit-modal .full-chat-container .chat-box .message-list {
  box-sizing: border-box;
  padding: 15px;
}
.audit-modal .--calendar-container .start-date {
  left: 163px;
  top: 28px;
  z-index: 99;
}
.audit-modal .--calendar-container .start-date .triangle {
  top: 2px;
  z-index: 999;
  left: -125px;
}
.audit-modal .--calendar-container .end-date {
  left: 60px;
  z-index: 99;
}
.audit-modal .--calendar-container .end-date .triangle {
  top: 2px;
  left: -22px;
  z-index: 999;
}

.policy-container {
  max-width: 800px;
  margin: 40px auto;
  color: var(--text-color);
  display: flex;
  flex-flow: column;
  gap: 20px;
}
.policy-container h1 {
  font-size: 3rem;
}
.policy-container h3 {
  margin-top: 20px;
}
.policy-container p {
  line-height: 26px;
  font-size: 1.1rem;
  letter-spacing: 0.35px;
  margin-top: 15px;
}
.policy-container li {
  font-size: 1.1rem;
  letter-spacing: 0.35px;
  line-height: 26px;
  margin-top: 10px;
  margin-left: 30px;
}

.hamburger-menu {
  width: 325px;
  visibility: hidden;
  transform: translateX(100%);
  transition: visibility 0.2s cubic-bezier(0.92, 0.09, 0.06, 1), transform 0.2s cubic-bezier(0.92, 0.09, 0.06, 1);
  background-color: #fff;
  position: fixed;
  top: 58px;
  z-index: 9999;
  right: 15px;
  height: calc(100% - 100px);
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  display: none;
}
.hamburger-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.hamburger-menu.menu-item-two-open .menu-item-one {
  transform: translateX(-100%);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.hamburger-menu.menu-item-two-open .menu-item-two.active {
  transform: translateX(0%);
}
.hamburger-menu.menu-item-two-open .menu-two-back-btn {
  opacity: 1;
}

.menu-item-one {
  transition: transform 0.25s ease-in;
}

.menu-two-back-btn {
  padding: 20px 10px 20px 12px;
  border-bottom: 1px solid var(--color-slate-200);
  opacity: 0;
  transition: opacity 0.25s ease-in 0.1s;
}
.menu-two-back-btn .back {
  --width: 18px;
  --hegiht: 18px;
  --icon-color: var(--text-color);
}

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

.hamburger-close-btn {
  position: absolute;
  top: -40px;
  z-index: 999;
  right: 10px;
}
.hamburger-close-btn.dashboard-hamburger-close {
  position: absolute;
  top: 0px;
  right: 0;
  z-index: 999;
  width: 100%;
  background: #fff;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  display: flex;
  justify-content: end;
  box-sizing: border-box;
  padding-right: 15px;
  padding-top: 10px;
}
.hamburger-close-btn.dashboard-hamburger-close button {
  --icon-color: var(--text-color);
  --width: 18px;
  --height: 18px;
}
.hamburger-close-btn button {
  --icon-color: #fff;
  --width: 30px;
  --height: 30px;
}

.hamburger-list-item {
  font: 600 1.1rem var(--header-font);
  padding: 15px 20px;
  box-sizing: border-box;
}
.hamburger-list-item .item-chevron {
  rotate: 180deg;
  --width: 24px;
  --height: 24px;
}

.hamburger-btn {
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in;
}
.hamburger-btn.inactive {
  opacity: 0;
  visibility: hidden;
}

.hamburger-menu-item-container {
  border-radius: 10px;
  overflow: hidden;
}

.menu-item-two {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.25s ease-in;
}

@media screen and (max-width: 1000px) {
  .hamburger-menu {
    display: block;
  }
}
@media screen and (max-width: 575px) {
  .hamburger-menu {
    width: calc(100% - 40px);
  }
}
.inner-details-container .location-url-prefix {
  width: -moz-fit-content;
  width: fit-content;
  margin-right: 3px;
}

.business-errors, .business-pending {
  margin: 20px 30px 10px 30px;
  border-radius: 6px;
}
.business-errors.person-margin, .business-pending.person-margin {
  margin: 0 0 5px;
}

.business-pending {
  background: var(--color-warning-50);
  box-shadow: 0px 0px 0px 1px var(--color-warning-500), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  color: var(--color-warning-800);
}
.business-pending .error-lead {
  color: var(--color-warning-700);
}

.business-errors {
  background: var(--color-danger-50);
  box-shadow: 0px 0px 0px 1px var(--color-danger-500), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  color: var(--color-danger-800);
}
.business-errors .error-lead {
  color: var(--color-danger-700);
}

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

.person-btn {
  position: relative;
}
.person-btn.required::after {
  content: "Required";
  position: absolute;
  right: -12px;
  background-color: var(--color-danger-50);
  color: var(--color-danger-800);
  padding: 2px 5px;
  top: 3px;
  font-weight: 600;
  border-radius: 4px;
}
.person-btn.pending::after {
  content: "Pending";
  position: absolute;
  right: -12px;
  background-color: var(--color-warning-50);
  color: var(--color-warning-800);
  padding: 2px 5px;
  top: 3px;
  font-weight: 600;
  border-radius: 4px;
}
.person-btn.verified::after {
  content: "Verified";
  position: absolute;
  right: -12px;
  background-color: var(--color-success-50);
  color: var(--color-success-800);
  padding: 2px 5px;
  top: 3px;
  font-weight: 600;
  border-radius: 4px;
}

.location-hero-images, .location-showcase-images, .location-showcase-images-gallery {
  box-sizing: border-box;
  border: 1px dashed var(--color-slate-300);
}

.location-hero-images, .location-showcase-images {
  width: 442px;
}

.location-showcase-images .thumbnail, .location-showcase-images-gallery .thumbnail {
  height: 140px;
}

.location-showcase-images-gallery {
  width: 75vw;
  height: 75vh;
  max-width: 732px;
  max-height: 592px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}

.thumbnail {
  box-sizing: border-box;
  height: 105px;
  width: 140px;
}
.thumbnail img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
.thumbnail .thumbnail-overlay {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.2s ease-in;
  width: 100%;
}
.thumbnail-location .btn-container {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 10px));
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}
.thumbnail-location:hover .thumbnail-overlay {
  opacity: 1;
}
.thumbnail-location:hover .btn-container {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.add-image {
  background: var(--color-slate-50);
  border: 1px dashed var(--color-slate-400);
}

.location-image-container {
  border: 1px dashed var(--color-slate-400);
  height: 372px;
  width: 496px;
}

.location-showcase-container {
  border: 1px dashed var(--color-slate-400);
  height: 200px;
  width: 200px;
}

.location-image-overlay {
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  background: var(--color-slate-100);
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

.location-hero-uploader:hover .location-image-overlay, .location-hero-uploader.dragged-on .location-image-overlay {
  opacity: 1;
}

.location-about {
  height: 200px;
  line-height: 21px;
}

.image-description {
  height: 100px;
  line-height: 21px;
  max-width: 285px;
}

.location-showcase-btn {
  border: 1px dashed var(--color-slate-300);
  height: 140px;
  width: 140px;
}

.card-logo-footer {
  background-color: #fff;
  border-radius: 4px;
  height: 25px;
  width: 40px;
}

.footer {
  box-sizing: border-box;
  background: var(--color-slate-100);
}

@media (max-width: 770px) {
  footer.footer {
    padding: 15px;
  }
  footer.footer .w-25 {
    width: 33%;
  }
  footer.footer .footer-overspill {
    margin-left: 33%;
    margin-top: 15px;
  }
}
@media (max-width: 575px) {
  footer.footer nav .footer-logo {
    width: 100%;
    margin-bottom: 15px;
  }
  footer.footer .footer-overspill {
    margin-left: 0px;
    margin-top: 15px;
  }
  footer.footer .w-25 {
    width: 50%;
  }
}
:root {
  --scale-amount: 0.9;
  --scale-to-amount: 0.8;
}

.forms-fly-in {
  animation: 0.4s cubic-bezier(0.83, 0.38, 0.3, 0.7) 0.4s fade-out-down-more reverse forwards;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(30px);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.sim-block-holder {
  margin: auto 80px 0px auto;
  width: 500px;
}

.question-edit-toolbar.sim {
  transform: scale(0.9);
  left: -10px;
  top: 130px;
}

.double-block:has(.current) .ghost-input {
  opacity: 1;
}

.edit-text-toolbar.simulate {
  z-index: 3;
}
.edit-text-toolbar.simulate.icon.hover::before {
  transform: translate(-50%, 0px) scale(1);
  opacity: 1;
  scale: 1;
}

.show-options .sim-question-options, .double-block:has(.show-options) .sim-question-options {
  display: block;
}

.sim-question-options {
  display: none;
  right: -15px;
  position: absolute;
  top: 7px;
}

.sim-page-break {
  display: none;
  width: 100%;
  position: relative;
}

.sim-break-line {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  opacity: 0;
}

.broke .sim-page-break {
  height: 24px;
  padding: 22px 0px;
  display: block;
}
.broke .sim-break-line {
  opacity: 1;
  height: 1px;
  background: var(--color-slate-300);
}
.broke .sim-toggle-break {
  opacity: 1;
  pointer-events: all;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  background: #fff;
  padding: 3px;
}

.simulate-page-options {
  left: -53.1111px;
  scale: 0.7;
  z-index: 2;
}

.simulate-logic {
  top: 25px;
  z-index: 3;
}
.simulate-logic button.hover {
  background-color: var(--color-slate-100);
}

.sim-block {
  box-sizing: border-box;
  border: 0;
  color: var(--text-color);
  opacity: 1;
  outline: 0;
  margin: 2px;
  width: 100%;
}
.sim-block + .sim-block.hide {
  display: none;
}
.sim-block .color-picker-full-container {
  width: 15px;
}
.sim-block .color-text .color-picker-full-container {
  background-color: rgb(0, 0, 0);
}
.sim-block .text-highlight .color-picker-full-container {
  background-color: yellow;
}
.sim-block.ghost-selected .ghost-input {
  color: var(--color-slate-700);
  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;
}
.sim-block .new-block-popover {
  color: var(--text-color);
  font-size: 0.7875rem;
  left: -39px;
  width: 169.2px;
  z-index: 2;
}
.sim-block .new-block-popover.same > button:nth-child(2) {
  background-color: var(--color-slate-100);
}
.sim-block .ghost-input {
  flex-shrink: 0;
  height: 31.5px;
  width: 31.5px;
}
.sim-block.current .ghost-input {
  opacity: 1;
}
.sim-block.current.input-box {
  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;
}
.sim-block.medium {
  font: 600 1.26rem var(--header-font);
}
.sim-block.medium .cursor {
  height: 1.26rem;
}
.sim-block.large {
  font: 600 1.53rem var(--header-font);
}
.sim-block.large .cursor {
  height: 1.53rem;
}
.sim-block.input-box {
  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;
  box-sizing: border-box;
  color: var(--color-gray-600);
  font: 500 0.81rem var(--header-font);
  margin-left: -2px;
  max-width: 255px;
}
.sim-block.input-box .placeholder {
  margin-left: 10px;
  opacity: 0.75;
}
.sim-block.input-box .cursor {
  height: 0.81rem;
}
.sim-block .highlight {
  background-color: #3367d1;
  color: #fff;
}
.sim-block.text {
  align-items: center;
  font: 500 0.81rem var(--text-font);
}
.sim-block.text .cursor {
  height: 0.81rem;
}
.sim-block.label {
  font: 600 0.81rem var(--text-font);
}
.sim-block.label [data-text] {
  display: flex;
  align-items: center;
}
.sim-block.label .cursor {
  height: 0.81rem;
}
.sim-block .placeholder {
  color: var(--color-gray-700);
  width: -moz-fit-content;
  width: fit-content;
}
.sim-block .hide {
  opacity: 0;
}

.sim-new-block-modal {
  background: #fff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  left: 50%;
  min-width: 500px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 190px;
  transform: translate(-50%, calc(-50% - 5px));
  transform-origin: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
  scale: 0.9;
  z-index: 100;
}
.sim-new-block-modal.active {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.sim-new-block-modal .block-type-btn {
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sim-new-block-modal .sim-hover {
  background: var(--color-slate-100);
  color: var(--color-slate-600);
  font-weight: 600;
}
.sim-new-block-modal .sim-insert {
  --scale-amount: 1;
  --scale-to-amount: 0.85;
}
.sim-new-block-modal .sim-header,
.sim-new-block-modal .sim-description,
.sim-new-block-modal .sim-insert {
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sim-new-block-modal .sim-header.sim-in,
.sim-new-block-modal .sim-description.sim-in,
.sim-new-block-modal .sim-insert.sim-in {
  opacity: 1;
  transform: translateY(0px);
}
.sim-new-block-modal .sim-header {
  transform: translateY(-10px);
}
.sim-new-block-modal .sim-description,
.sim-new-block-modal .sim-insert {
  transform: translateY(10px);
}

.sim-overlay {
  background: rgba(0, 0, 0, 0.2);
  height: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.2s ease;
  top: 0;
  width: 100%;
  z-index: 99;
}
.sim-overlay.active {
  opacity: 1;
}

.scale-down {
  scale: var(--scale-amount);
  transform-origin: center;
}

.sim-click {
  animation: sim-click 0.4s ease-in-out 0s forwards;
}

.cursor {
  display: inline-block;
  vertical-align: bottom;
  width: 1px;
  height: 1.4rem;
  background-color: #2E3D48;
}
.cursor:not(.stale) {
  animation: 1s blink step-end infinite;
}
@keyframes sim-click {
  0% {
    scale: var(--scale-amount);
  }
  50% {
    scale: var(--scale-to-amount);
  }
  100% {
    scale: var(--scale-amount);
  }
}
@keyframes blink {
  from, to {
    background-color: transparent;
  }
  50% {
    background-color: black;
  }
}
.report-type-btn {
  --icon-color: var(--color-slate-600);
  --size: 15px;
  color: var(--color-slate-600);
  padding: 10px 20px 10px 12px;
}
.report-type-btn.booking-summary-btn {
  --icon-url: url(/images/icons/calendar-month.svg);
}
.report-type-btn.customer-summary-btn {
  --icon-url: url(/images/icons/customers.svg);
}
.report-type-btn.order-summary-btn {
  --icon-url: url(/images/icons/orders.svg);
}
.report-type-btn.prescription-summary-btn {
  --icon-url: url(/images/icons/prescriptions.svg);
}
.report-type-btn.payment-summary-btn {
  --icon-url: url(/images/icons/credit-card.svg);
}
.report-type-btn.print-report {
  --icon-url: url(/images/icons/print.svg);
}
.report-type-btn:hover {
  color: var(--color-slate-700);
  --icon-color: var(--logo-color);
  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;
}
.report-type-btn::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: var(--size);
  height: var(--size);
  display: block;
}

.sessions-table.report-scripts td {
  vertical-align: baseline;
  padding: 12px 12px 12px 0px;
}
.sessions-table.report-scripts td.cell-no-right-padding {
  padding-right: 0px;
}

.task-status {
  padding: 3px 5px;
}
.task-status.open {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
}
.task-status.in-progress {
  background: var(--color-warning-50);
  color: var(--color-warning-900);
}
.task-status.cancelled {
  background: var(--color-danger-50);
  color: var(--color-danger-700);
}
.task-status.completed {
  background: var(--color-success-50);
  color: var(--color-success-700);
}

.task-priority {
  padding: 3px 5px;
}
.task-priority.low {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
}
.task-priority.medium {
  background: var(--color-warning-50);
  color: var(--color-warning-900);
}
.task-priority.high {
  background: var(--color-danger-50);
  color: var(--color-danger-700);
}
.task-priority.urgent {
  background: var(--color-danger-700);
  color: #fff;
}

.quick-status-update-btn.complete {
  --icon-url: url(/images/icons/check.svg);
}
.quick-status-update-btn.reopen {
  --icon-url: url(/images/icons/redo.svg);
}
.quick-status-update-btn.create {
  --icon-url: url(/images/icons/add-task.svg);
}
.quick-status-update-btn::before {
  content: "";
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: #fff;
  height: 14px;
  width: 14px;
  display: block;
  margin-right: 5px;
}

.frequency-choice-list {
  transition: height 0.2s ease-in-out;
}

.frequency-choice-checkbox {
  padding: 7px 0px;
}

.frequency-choice-radio input {
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
}
.frequency-choice-radio-container::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--color-gray-400);
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.frequency-choice-radio-container:has(:checked)::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--logo-color);
}

.offset-top {
  top: 2px;
}

.remove-repeat-rule {
  background: var(--color-danger-100);
  padding: 3px 6px;
}

.task-title:empty::before {
  content: "New task title";
  color: #555;
}

.product-table-image {
  width: 40px;
  height: 36px;
}

.product-description-box {
  max-height: 200px;
  height: 200px;
}

.images {
  --first-image-size: 212px;
  --second-image-size: 103px;
}

.first-image {
  width: var(--first-image-size);
  height: var(--first-image-size);
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f8f8f8;
  flex-shrink: 0;
}
.first-image img {
  -o-object-fit: cover;
     object-fit: cover;
}

.secondary-images,
.tertiary-images {
  display: grid;
  gap: 8px;
  flex-shrink: 0;
}
.secondary-images img,
.tertiary-images img {
  -o-object-fit: cover;
     object-fit: cover;
}

.secondary-images {
  grid-template-columns: repeat(4, var(--second-image-size));
  grid-template-rows: repeat(2, var(--second-image-size));
}

.tertiary-images {
  grid-template-columns: repeat(6, var(--second-image-size));
}

.add-image-small-thumbnail {
  width: var(--second-image-size);
  height: var(--second-image-size);
  border: 1px dashed #ccc;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drag-ghost {
  width: 140px;
  height: 140px;
  position: fixed;
  pointer-events: none;
  z-index: 1000;
}
.drag-ghost img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
}

.one-dragged::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-gray-200);
  border-radius: 8px;
}

.preview-thumb {
  height: 100%;
  display: flex;
  align-items: center;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.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;
}

.remove-tag {
  --height: 12px;
  --width: 12px;
  --icon-color: var(--color-danger-500);
}

.variant-value {
  min-width: 40px;
}

.variant-container {
  --icon-color: black;
  --size: 12px;
}
.variant-container:hover [data-edit-variant] {
  display: flex;
}
.variant-container:hover .variant-container-hide {
  transform: translateX(0px);
}
.variant-container-hide.draggable {
  transform: translateX(-40px);
  background: #fff;
  transition: transform 0.125s ease-out;
}

.drag-variant-ghost {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 0px 0px 2px var(--logo-color);
  pointer-events: none;
  padding-top: 0px;
  z-index: 1000;
}
.drag-variant-ghost .variant-container-hide {
  transform: translateX(0px);
}

[data-edit-variant] {
  display: none;
}

.variant-image-container {
  width: 60px;
  height: 60px;
  position: relative;
}
.variant-image-container .variant-checkbox:not(:has(:checked)) {
  display: none;
}
.variant-image-container .checkbox-span {
  background: #fff;
}
.variant-image-container:hover .variant-checkbox,
.variant-image-container:hover .variant-delete {
  display: flex;
}
.variant-image-container:hover .variant-delete {
  opacity: 1;
  transform: translateY(0);
}

.variant-image-container-smaller {
  width: 35px;
  height: 35px;
}

.variant-checkbox {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
}

.variant-edit,
.variant-delete {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 5px;
  right: 5px;
  z-index: 2;
  --icon-color: #fff;
  --height: 12px;
  --width: 12px;
  height: 16px;
  width: 16px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.variant-container {
  background-color: #fff;
}

.variant-grid {
  display: grid;
  grid-template-columns: 70px 200px 100px 176px 90px;
  gap: 8px;
}

.variant-left-side {
  width: 40%;
}

.variant-right-side {
  width: 60%;
}

.variant-list-item.active {
  background-color: var(--color-gray-50);
}

.image-gallery-modal {
  max-width: 728px;
}

.image-gallery-image {
  width: 80px;
  height: 80px;
  box-shadow: 0px 0px 0px 1px var(--color-gray-200);
}
.image-gallery-image .checkbox-span {
  background: #fff;
}
.image-gallery-image-container .f-header {
  max-width: 75px;
}
.image-gallery-image:hover .variant-edit {
  opacity: 1;
  transform: translateY(0);
}

.image-gallery-delete {
  position: absolute;
  bottom: 20px;
}

.graph-holder {
  border-left: 1px solid var(--color-slate-300);
  border-bottom: 1px solid var(--color-slate-300);
  height: var(--graph-height);
  width: var(--graph-width);
}
.graph-holder::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -20px;
  height: 1px;
  background: var(--color-slate-300);
  width: 20px;
}
.graph-holder li:has(.hover-container:hover) + li .graph-point {
  z-index: -1;
}

.graph-point {
  background-color: var(--logo-color-lighter);
  border-radius: 50%;
  bottom: calc(var(--y) - var(--y-offset));
  height: calc(var(--point-size) * 1px);
  left: calc(var(--x) - var(--x-offset));
  position: absolute;
  width: calc(var(--point-size) * 1px);
  z-index: 4;
}

.line-segment {
  background-color: var(--logo-color-lighter);
  bottom: var(--y);
  height: calc(var(--line-height) * 1px);
  left: var(--x);
  position: absolute;
  transform: rotate(calc(var(--angle) * 1deg));
  transform-origin: left bottom;
  width: calc(var(--length) * 1px);
}

.line-split {
  background-color: var(--color-slate-200);
  left: var(--x);
  height: var(--graph-height);
  opacity: 0.5;
  position: absolute;
  width: 1px;
}

.x-axis-label {
  color: var(--color-slate-500);
  font-size: 0.7rem;
  position: absolute;
  top: 5px;
  left: var(--label-left);
  width: -moz-fit-content;
  width: fit-content;
}

.x-axis-outer {
  position: absolute;
  top: 100%;
  width: var(--graph-width);
}

.y-axis-outer {
  bottom: 0px;
  position: absolute;
  left: 0px;
  height: var(--graph-height);
}

.y-axis-label {
  color: var(--color-slate-500);
  font-size: 0.7rem;
  position: absolute;
  right: 8px;
  top: var(--label-top);
  width: -moz-fit-content;
  width: fit-content;
}

.hover-container {
  background: transparent;
  position: absolute;
  left: calc(var(--x) - var(--offset));
  bottom: 0px;
  width: calc(var(--offset) * 2);
  height: var(--graph-height);
  z-index: 3;
}
.hover-container:hover + .line-split {
  background-color: var(--color-slate-400);
  opacity: 1;
}
.hover-container:hover + .line-split::after {
  content: attr(data-label);
  top: calc(100% + 5px);
  left: -38px;
  font: 600 0.7rem Lato;
  position: absolute;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--color-slate-100);
  color: var(--color-slate-500);
  width: 76px;
  text-align: center;
  z-index: 4;
}
.hover-container:hover + .line-split + .graph-point::after {
  content: attr(data-label);
  top: -10px;
  left: 10px;
  font: 600 0.7rem Lato;
  position: absolute;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--color-slate-200);
  color: var(--color-slate-900);
  width: 77px;
  text-align: center;
}

.graph-filter {
  border-radius: 3px;
  padding: 5px 9px;
  box-sizing: border-box;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-slate-900);
}
.graph-filter span {
  max-width: 75px;
}
.graph-filter.no-radius {
  border-radius: 0px !important;
}

.filter-shadow {
  box-shadow: rgba(60, 63, 67, 0.2) 0px 1px 1px 0px, var(--color-slate-200) 0px 0px 0px 1px, rgba(62, 63, 65, 0.2) 0px 2px 5px 0px;
}
.filter-shadow.add-hover: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;
}

.combined-filters {
  border-radius: 3px;
}
.combined-filters > .dropdown:first-child {
  border-radius: 3px 0px 0px 3px;
}
.combined-filters > .dropdown:last-child {
  border-radius: 0px 3px 3px 0px;
}
.combined-filters > .dropdown:not(:last-child) {
  border-right: 1px solid var(--color-slate-200);
}
.combined-filters > .dropdown: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;
}

.calendar-overflow-container.filter {
  left: 50%;
  transform: translate(-50%, 15px);
  top: 31px;
  z-index: 10;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --date-background-color-hover: var(--logo-color-lighter);
  --date-color-hover: #fff;
  transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}
.calendar-overflow-container.filter .calendar.standard {
  transform: translate(-50%, 0px);
}
.calendar-overflow-container.filter.active {
  pointer-events: all;
  transform: translate(-50%, 0px);
}
.calendar-overflow-container.filter .calendar {
  margin-top: 8px;
}
.calendar-overflow-container.filter .triangle {
  z-index: 10;
}
.calendar-overflow-container.filter .--date.active {
  background: var(--logo-color);
  color: #fff;
}

.dash-info-box {
  box-shadow: 0px 0px 0px 1px var(--color-slate-400);
  min-width: 175px;
  box-sizing: border-box;
}
.dash-info-box .the-info {
  font-size: 2.5rem;
}

.dashboard-list {
  width: 300px;
}

.dashboard-list-item:not(:last-child) {
  border-bottom: 1px solid var(--color-slate-200);
}

.table-scroll {
  overflow-y: auto;
  flex: 1;
}
.table-scroll thead tr {
  border-bottom: 0px;
}
.table-scroll thead tr th {
  background: #fff;
  box-shadow: inset 0 -1px 0 var(--color-slate-300);
  position: sticky;
  top: 0;
  z-index: 2;
}
.table-scroll table {
  border-collapse: collapse;
}

.marketing-side-bar {
  box-sizing: border-box;
  background-color: rgba(241, 245, 249, 0.7);
  width: 220px;
  background: linear-gradient(90deg, rgb(255, 255, 255) 40%, rgba(241, 245, 249, 0.7) 100%);
}

.marketing-list-item:hover {
  background-color: var(--color-slate-100);
}
.marketing-list-item.active {
  color: var(--logo-color);
}

.email-input {
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  cursor: text;
  overflow-y: scroll;
  height: 400px;
  outline: none !important;
  width: 455px;
}
.email-input > div:focus-within, .email-input > div:focus-visible {
  box-shadow: 0px;
  border: 0px;
  outline: none !important;
}

.static-toolbar-color .color-picker-full-container {
  background: transparent;
  height: 3px;
  display: flex;
  position: absolute;
  box-shadow: unset;
  bottom: -5px;
  min-width: -moz-fit-content;
  min-width: fit-content;
}
.static-toolbar-color .color-picker-full-container .color-picker-preview-box {
  height: 4px;
  border: 0;
  box-shadow: unset;
  border-radius: 0px;
  width: 17px;
}
.static-toolbar-color .color-picker-container {
  top: -65px;
  left: 29px;
}

.anchor-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 9998;
}

.anchor-box {
  background: #fff;
  box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.2), 0 5px 10px 1px rgba(0, 0, 0, 0.1);
  position: fixed;
  z-index: 9999;
}
.anchor-box input {
  border: 0;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  outline: 0px !important;
  width: 260px;
}
.anchor-box input:focus-within {
  box-shadow: 0px 0px 0px 1px var(--color-slate-700);
}

.add-services-list {
  right: 0;
  top: 32px;
}

.generic-modal.email-modal {
  min-width: 800px;
  max-width: 1000px;
}
.generic-modal.email-modal .left-half {
  width: 250px;
}

.manage-payments-modal {
  width: 100%;
  max-width: 1000px;
}

.add-manual-payment-modal {
  height: 500px;
  padding: 25px;
  width: 385px;
  z-index: 999;
}
.add-manual-payment-modal .dropdown-btn, .add-manual-payment-modal .date-btn {
  box-sizing: border-box;
  border: 0;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  padding: 13px 15px;
  font: 500 1rem var(--text-font);
  outline: 0px !important;
}
.add-manual-payment-modal .dropdown-btn {
  min-width: 212px;
  text-align: left;
}
.add-manual-payment-modal .input-container, .add-manual-payment-modal .date-container {
  width: -moz-fit-content;
  width: fit-content;
}
.add-manual-payment-modal .amount {
  width: 125px;
}
.add-manual-payment-modal .dropdown-list {
  top: 49px;
}
.add-manual-payment-modal .dropdown-ele {
  width: 100%;
  box-sizing: border-box;
}
.add-manual-payment-modal .calendar-overflow-container {
  position: relative;
  z-index: 2;
}

.refund-modal {
  width: 90%;
  max-width: 980px;
  min-height: 385px;
  padding: 25px;
  z-index: 999;
}

.create-refund-modal {
  z-index: 1001;
}

.create-refund-overlay {
  z-index: 1000;
}

.coupon-modal {
  max-height: 90vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.customer-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  background: #fff;
  height: 90vh;
  z-index: 99;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 20px));
  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);
  box-sizing: border-box;
  width: 90vw;
  max-width: 1100px;
}
.customer-modal.active {
  transform: translate(-50%, calc(-50% + 0px));
  opacity: 1;
}
.customer-modal.level-2 {
  z-index: 101;
  width: 325px;
  height: auto;
}

.customer-level-2 {
  z-index: 100;
}

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

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

.modal-details {
  max-height: 500px;
}

.p-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - 5px));
  background: #fff;
  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);
  box-sizing: border-box;
  min-width: 325px;
}
.p-modal.light-bg {
  background-color: var(--color-gray-50);
}
.p-modal.full-screen {
  border-radius: 0px;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  transform: translate(0, 0);
}
.p-modal.full-screen.active {
  transform: translate(0, 0);
}
.p-modal.wider {
  width: calc(100vw - 50px);
  max-width: 700px;
}
.p-modal.active {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.p-modal.level-one {
  z-index: 11;
}
.p-modal.level-two {
  z-index: 24;
}
.p-modal.level-three {
  z-index: 101;
}
.p-modal.level-four {
  z-index: 102;
}
.p-modal.level-almost-top {
  z-index: 9996;
}
.p-modal.level-top {
  z-index: 9999;
}
.p-modal .modal-details.details-full-height {
  max-height: unset;
}
.p-modal .modal-details.no-bottom {
  padding-bottom: 0px;
}
.p-modal .take-up-space {
  overflow: hidden;
  max-height: 100%;
  height: 100%;
}
.p-modal .take-up-space > div {
  height: 100%;
  display: flex;
}
.p-modal .take-up-space > div > div {
  height: 100%;
  display: flex;
}

.modal-overlay.level-four {
  z-index: 101;
}

.modal-ontop-overlay.level-one {
  z-index: 10;
}
.modal-ontop-overlay.level-two {
  z-index: 23;
}
.modal-ontop-overlay.level-three {
  z-index: 100;
}
.modal-ontop-overlay.level-four {
  z-index: 101;
}
.modal-ontop-overlay.level-almost-top {
  z-index: 9995;
}
.modal-ontop-overlay.level-top {
  z-index: 9998;
}
.modal-ontop-overlay.darker {
  background-color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 770px) {
  .customer-modal {
    height: 100dvh;
    width: 100vw;
  }
}
.slap-in {
  transform: scale(1.05);
  opacity: 0;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.15, 0.8, 0.9, 1) 0.3s, opacity 0.35s cubic-bezier(0.15, 0.8, 0.9, 1) 0.3s;
}
.slap-in.active {
  transform: scale(1);
  opacity: 1;
}

.sticky-header {
  position: sticky;
  --scale-amount: 1;
  --scale-to-amount: 0.9;
}
.sticky-header .cursor {
  height: 1rem;
}

.keep-offscren {
  margin-top: calc(100vh - 800px) !important;
}

.index-section-container.calendar-page {
  margin: 180px auto 280px 0px;
}

.highlight-box {
  box-shadow: rgb(0, 0, 0) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 0px 5000px;
  border-radius: 2px;
  opacity: 0;
  position: absolute;
  transition: opacity 0.25s ease-in, height 0.15s ease-in, width 0.15s ease-in, top 0.25s ease-in, left 0.25s ease-in;
  z-index: 9999;
}

.blur {
  filter: blur(0px);
  transition: filter 0.5s ease-in;
}
.blur.active {
  filter: blur(3px);
}

.coming-soon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 99;
}

.coming-soon-txt {
  font-weight: 900;
  font-size: 4rem;
  opacity: 0.5;
}

.the-great-ratsby {
  will-change: width, height;
  transition: height 0.25s ease-in, width 0.25s ease-in, transform 0.35s cubic-bezier(0.15, 0.8, 0.9, 1) 0.3s, opacity 0.35s cubic-bezier(0.15, 0.8, 0.9, 1) 0.3s, zoom 0.35s cubic-bezier(0.15, 0.8, 0.9, 1);
  zoom: 1;
}

.mobile-template {
  border-radius: 30px;
  top: 100px;
  height: 710px;
  width: 430px;
  box-shadow: 0px 0px 0px 4px #000, 0px 0px 0px 6px var(--color-slate-600), 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);
  zoom: 0.8;
}
.mobile-template .calendar-side-bar {
  height: 100%;
  display: block;
  position: absolute;
  z-index: 15;
  background: #fff;
  width: 250px;
  overflow: overlay;
  transform: translateX(-100%);
  transition: transform 0.2s ease-in;
}
.mobile-template .calendar-calendar .big-calendar-days-holder .big-calendar-days {
  margin-left: 0px;
  display: flex;
  flex-flow: column-reverse;
  text-align: center;
}
.mobile-template .calendar-calendar .big-calendar-days-holder .big-calendar-days .calendar-day {
  font-size: 0;
  text-align: center;
  display: block;
}
.mobile-template .calendar-calendar .big-calendar-days-holder .big-calendar-days .calendar-day::first-letter {
  font-weight: 700;
  font-size: 0.8rem;
}
.mobile-template .calendar-calendar .calendar-toolbar {
  padding: 10px 5px;
}
.mobile-template .calendar-calendar .calendar-toolbar .dropdown-btn {
  font-size: 0.8rem;
}
.mobile-template .calendar-calendar .calendar-toolbar .search-container {
  transition: visibility 0s ease-in, opacity 0s ease-in;
  opacity: 0;
  visibility: hidden;
}
.mobile-template .calendar-calendar .calendar-toolbar .filters, .mobile-template .calendar-calendar .calendar-toolbar .search-thick {
  display: block;
}

.calendar-point {
  height: 1px;
  z-index: 140;
  position: relative;
  background: transparent;
  width: 75%;
  overflow: hidden;
}

.mid-section {
  position: absolute;
  top: 550px;
  left: 10px;
  width: calc(100% - 20px);
  height: 10px;
}

[data-calendar-duplicate] {
  display: none;
  z-index: -1;
}

.create-booking-box.absolute-quick {
  position: absolute;
}

@media (min-width: 1000px) {
  .sticky-header {
    top: 250px !important;
  }
}
@media (max-width: 1000px) {
  [data-calendar-duplicate] {
    display: block;
  }
  .the-great-ratsby {
    will-change: unset;
    transition: unset;
  }
  .the-great-ratsby.original {
    box-shadow: unset;
  }
  .mobile-template.slap-in.active {
    margin-top: 30px;
  }
  .calendar-unset-position {
    position: unset;
  }
  .calendar-item-one {
    margin-bottom: 470px;
  }
  .the-great-ratsby {
    position: absolute;
    left: 10px;
  }
  .index-section-container.calendar-page {
    margin-bottom: 470px;
  }
  .index-section-container.calendar-page.mobile-section {
    margin-bottom: 550px;
  }
  .the-great-ratsby.sticky-header.transition-calendar-out {
    opacity: 0;
  }
}
@media (max-width: 570px) {
  .mobile-template.slap-in.active {
    zoom: 0.7;
    margin-top: 300px;
  }
}
.payment-header-text {
  max-width: 490px;
}

.payment-header-lead {
  color: var(--color-slate-600);
  font-size: 1.1rem;
  line-height: 26px;
  max-width: 490px;
}

.payment-header-template {
  background: #fff;
  border-radius: 12px;
  left: 40px;
  position: absolute;
  top: 0px;
  height: 470px;
  width: 680px;
  --background: #f9f6f2;
  --border-color: var(--color-slate-300);
  --confirm-page-header-font-size: 20px;
  --confirm-page-lead-font-size: 12px;
  --confirm-booking-id-font-size: 8px;
  --desc-font-size: 10px;
  --value-font-size: 10px;
  --confirm-details-container-margin: 10px 0px 10px 0px;
  --confirm-details-container-padding: 10px 0px 10px 0px;
  --deposit-btn-margin: 5px 0px 0px 0px;
  --deposit-btn-padding: 9px;
  --deposit-btn-font-size: 9px;
  --pay-full-btn-margin: 5px 0px 0px 0px;
  --pay-full-btn-padding: 9px;
  --pay-full-btn-font-size: 9px;
  --pay-later-btn-padding: 8.5px;
  --pay-later-btn-font-size: 9px;
  --change-date-btn-font-size: 9px;
  --desc-value-margin: 5px 0px 5px 0px;
  --pay-later-btn-margin: 5px 0px 0px 0px;
  --back-btn-icon-size: 8px;
  --back-btn-icon-spacing: 5px;
  --back-btn-font-size: 8px;
  --back-btn-margin: 15px 0px 15px 0px;
  --back-btn-padding: 3px 5.5px 3px 3px;
  --scale-amount: 1;
  --billing-detail-font-size: 10px;
  --billing-detail-weight: 600;
  --billing-detail-font: var(--header-font);
  --billing-value-font-size: 10px;
  --billing-value-weight: 400;
  --billing-value-font: var(--header-font);
  --billing-detail-margin: 5px 0px 0px 0px;
  --payment-info-item-weight: 600;
  --payment-info-item-font-size: 10px;
  --payment-info-item-font: var(--main-font);
  --payment-info-amount-weight: 400;
  --payment-info-amount-font-size: 10px;
  --payment-info-amount-font: var(--main-font);
  --input-label-font-size: 10px;
  --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: 9px;
  --optional-letter-spacing: 0px;
  --optional-margin: 0px 0px 0px 5px;
  --optional-padding: 1px 2px;
  --apply-coupon-btn-align: center;
  --apply-coupon-btn-background-color: #a27e43;
  --apply-coupon-btn-weight: 600;
  --apply-coupon-btn-font-size: 10px;
  --apply-coupon-btn-font: var(--main-font);
  --apply-coupon-btn-border-radius: 2px;
  --apply-coupon-btn-color: #fff;
  --apply-coupon-btn-box-shadow: 0px 0px 0px 1px #a27e43;
  --apply-coupon-btn-background-color-hover: #a27e43;
  --apply-coupon-btn-color-hover: #fff;
  --apply-coupon-btn-box-shadow-hover: 0px 0px 0px 1px #a27e43;
  --apply-coupon-btn-margin: 0px 0px 10px 0px;
  --apply-coupon-btn-width: 35px;
  --input-border: 0px 0px 0px 1px rgba(162, 126, 67, 0.2705882353);
  --input-border-hover: 0px 0px 0px 1px rgba(162, 126, 67, 0.2705882353);
  --input-padding: 6px 4px;
  --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: 3px;
  --view-receipt-btn-border-radius: 2px;
  --view-receipt-btn-box-shadow: 0px 0px 0px 0.75px var(--primary-color);
  --view-receipt-btn-font: var(--main-font);
  --view-receipt-btn-font-size: 9px;
  --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 #a27e43;
  --view-receipt-btn-icon: url(/images/icons/receipt.svg);
  --view-receipt-btn-position: center;
}
.payment-header-template.salon {
  --primary-color: #caae7f;
  background-color: var(--background);
  --border-color: var(--background);
  --back-btn-background-color: #caae7f;
  --back-btn-border-radius: 0px;
  --back-btn-border: 0px 0px 0px 1px #caae7f;
  --back-btn-background-color-hover: #caae7f;
  --back-btn-border-hover: 0px 0px 0px 1px #a27e43;
  --change-date-btn-color: #a27e43;
  --change-date-btn-color-hover: #fff;
  --change-date-btn-background-color-hover: #a27e43;
  --confirm-page-header-font: "Playfair Display", serif;
  --confirm-page-header-weight: 500;
  --pay-full-btn-border-radius: 0px;
  --deposit-btn-border-radius: 0px;
  --deposit-btn-box-shadow: 0px 0px 0px 1px var(--color-slate-500);
  --deposit-btn-box-shadow-hover: 0px 0px 0px 2px var(--color-slate-800);
  --pay-full-btn-box-shadow: 0px 0px 0px 1px #a27e43;
  --pay-full-btn-background-color: #caae7f;
  --pay-full-btn-color-hover: #a27e43;
  --pay-full-btn-background-color-hover: #f9f6f2;
  --pay-full-btn-box-shadow-hover: 0px 0px 0px 1px #f9f6f2;
  --pay-later-btn-color: #a27e43;
  --pay-later-btn-background-color-hover: #fff;
  --pay-later-btn-color-hover: #a27e43;
  --confirm-page-cancel-btn-color: #a27e43;
  --confirm-page-cancel-btn-color-hover: #fff;
  --confirm-page-cancel-btn-box-shadow: 0px 0px 0px 1px #a27e43;
  --confirm-page-cancel-btn-shadow-hover: 0px 0px 0px 1px #a27e43;
  --confirm-page-cancel-btn-font: var(--main-font);
  --confirm-page-cancel-btn-weight: 600;
  --confirm-page-cancel-btn-font-size: 9px;
  --confirm-page-cancel-btn-padding: 8px;
  --confirm-page-cancel-btn-background-color: rgba(255, 255, 255, 0);
  --confirm-page-cancel-btn-background-color-hover: #a27e43;
  --confirm-page-cancel-btn-margin: 5px 0px;
  --confirm-page-cancel-btn-border-radius: 0px;
  --confirm-page-reschedule-btn-color: #fff;
  --confirm-page-reschedule-btn-color-hover: #caae7f;
  --confirm-page-reschedule-btn-box-shadow: 0px 0px 0px 1px #caae7f;
  --confirm-page-reschedule-btn-shadow-hover: 0px 0px 0px 1px #fff;
  --confirm-page-reschedule-btn-font: var(--main-font);
  --confirm-page-reschedule-btn-weight: 600;
  --confirm-page-reschedule-btn-font-size: 9px;
  --confirm-page-reschedule-btn-padding: 8px;
  --confirm-page-reschedule-btn-background-color: #caae7f;
  --confirm-page-reschedule-btn-background-color-hover: #fff;
  --confirm-page-reschedule-btn-margin: 0px;
  --confirm-page-reschedule-btn-border-radius: 0px;
  font-optical-sizing: auto;
}
.payment-header-template.salon .icon {
  --icon-url: url(/images/logos/rejuve.svg);
  --width: 53px;
  --height: 17px;
  --icon-color: #483C32;
}
.payment-header-template .--confirm-page-lead {
  margin: 5px 0px 6px;
}
.payment-header-template .confirm-page {
  max-width: 400px;
  margin: auto;
}
.payment-header-template .--booking-btn-container.--stacked {
  width: 100%;
  gap: 5px;
}
.payment-header-template .payment-header-nav {
  height: 50px;
  border-bottom: 1px solid var(--border-color);
}
.payment-header-template .sim-payment-modal {
  background-color: var(--background);
  border-radius: 8px;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 20px));
  transition: opacity 0.25s ease-in, transform 0.25s ease-in;
  z-index: 100;
  padding: 13px 15px;
}
.payment-header-template .sim-payment-modal.active {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.payment-header-template .sim-payment-modal .cursor {
  height: 0.8rem;
}
.payment-header-template .sim-payment-modal .cursor.offset-margin {
  margin-right: -3px;
}
.payment-header-template .sim-payment-modal .template-header {
  font: var(--confirm-page-header-weight) 1.3rem var(--confirm-page-header-font);
  margin-bottom: 5px;
}
.payment-header-template .sim-payment-modal input {
  accent-color: #a27e43;
}
.payment-header-template .sim-payment-modal .billing-name {
  font-family: Lato;
  font-size: 10px;
}
.payment-header-template .sim-payment-modal .exp-date .cursor, .payment-header-template .sim-payment-modal .cvc .cursor {
  margin-right: -1px;
}
.payment-header-template .sim-payment-modal .exp-date {
  text-align: left;
  width: 40px;
  overflow: visible;
}
.payment-header-template .sim-payment-modal .cvc {
  text-align: left;
  width: 27px;
  overflow: visible;
}
.payment-header-template .sim-payment-modal .card-holder {
  background-color: #fff;
  font-size: 0.7rem;
  width: 230px;
  padding: 7px 5px;
  margin: 10px 0px 8px;
  box-shadow: 0px 0px 0px 1px rgba(162, 126, 67, 0.2705882353);
  transition: box-shadow 0.25s ease-in;
  color: var(--color-slate-500);
}
.payment-header-template .sim-payment-modal .card-holder.focus {
  box-shadow: 0px 0px 0px 1px #a27e43;
}
.payment-header-template .sim-payment-modal .card-holder .typed {
  color: var(--text-color);
}
.payment-header-template .sim-payment-modal .pay-btn {
  box-shadow: var(--pay-full-btn-box-shadow);
  background-color: var(--pay-full-btn-background-color);
  color: var(--pay-full-btn-color);
  padding: 6px;
  font-size: 0.7rem;
  font-weight: var(--pay-full-btn-weight);
}
.payment-header-template .sim-payment-modal .pay-btn.hovered {
  color: #fff;
  background-color: #a27e43;
  box-shadow: 0px 0px 0px 1px #a27e43;
}
.payment-header-template input[type=checkbox] {
  margin-right: 5px;
}

.pricing-modal-show-off {
  max-width: 500px;
  flex-shrink: 0;
  width: 100%;
}
.pricing-modal-show-off .overflow-hidden {
  overflow: hidden !important;
}

.index-payments-table-container {
  min-width: 750px;
}

.coupon-show-off {
  filter: drop-shadow(6px 4px 0px #F3F4F5);
  transition: transform 0.25s ease-in, filter 0.25s ease-in;
}

.refunds-min-width {
  width: 960px;
}

.manage-refund-show-off::after {
  background-color: rgba(0, 0, 0, 0);
  content: "";
  transition: background-color 0.25s ease-in;
}
.manage-refund-show-off:has(.create-refund-show-off.active)::after {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.create-refund-show-off {
  position: absolute;
  opacity: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  background: #fff;
  transition: opacity 0.2s ease-in;
  z-index: 2;
}
.create-refund-show-off.active {
  opacity: 1;
}

.fake-input {
  border-radius: 4px;
  font: 500 1rem var(--text-font);
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  box-sizing: border-box;
  height: 34.89px;
  padding: 9px 12px;
  font-size: 0.875rem;
  width: 150px;
}
.fake-input .cursor {
  height: 1rem;
}
.fake-input-other, .fake-input-booking {
  height: 42px;
}
.fake-input-booking {
  width: 100%;
  max-width: 182px;
}
.fake-input-other {
  height: 42px;
  width: 100%;
}
.fake-textarea {
  box-sizing: border-box;
  height: 80px;
  padding: 13px 15px;
  border-radius: 4px;
  font: 500 1rem var(--text-font);
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
}

.scene {
  width: 400px;
  height: 400px;
  perspective: 600px;
}

.payment-card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
  --main-font: Inter, sans-serif;
  --primary-color: var(--logo-color);
  --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: 305px;
  --input-margin: 0px 0px 10px 0px;
  --input-transition: box-shadow .15s ease-in-out, color .15s ease-in-out, background-color .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;
  --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;
  --confirm-page-header-weight: 600;
  --confirm-page-header-font: var(--main-font);
  --billing-detail-color: rgb(0, 0, 0, 1);
  --same-as-billing-font: var(--main-font);
  --same-as-billing-font-size: 14px;
  --same-as-billing-weight: 400;
  --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 5px 0px;
  --billing-value-color: rgb(0, 0, 0, 1);
  --billing-value-weight: 400;
  --billing-value-font-size: 14px;
  --billing-value-font: var(--main-font);
  --payment-modal-background: #fff;
  --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-margin: 0px 0px 10px 0px;
  --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-width: 70px;
  --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: 10px 0px 10px 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);
  --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: 15px 0px 0px 0px;
}
.payment-card-face {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}
.payment-card-front {
  background: var(--payment-modal-background);
  padding: 20px;
}
.payment-card-back {
  background: #fff;
  transform: rotateY(180deg);
  overflow-y: auto;
}
.payment-card.is-flipped {
  transform: rotateY(180deg);
}
.payment-card-header {
  font: var(--confirm-page-header-weight) 1.3rem var(--confirm-page-header-font);
}
.payment-card-input {
  color: var(--input-color-placeholder);
}
.payment-card-detail {
  min-width: 108px;
}
.payment-card-explanation {
  line-height: 25px;
}
.payment-card-roundness-input-container::after {
  color: var(--color-slate-500);
  content: "px";
  font: 500 0.7rem var(--header-font);
  position: absolute;
  right: 2px;
  bottom: 2px;
}
.payment-card-roundness-input {
  border: 0;
  outline: 0 !important;
  width: 50px;
}
.payment-card:has(.color-picker-full-container.active) + .flip-container {
  z-index: -1;
}

.flip-container {
  background: var(--color-slate-100);
  box-shadow: 0px 0px 0px 1px var(--color-slate-400);
  gap: 20px;
  padding: 4px;
}
.flip-container::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  height: calc(100% - 6px);
  background-color: var(--logo-color);
  width: calc(50% - 9px);
  border-radius: 3px;
  transition: left 0.25s ease-in;
}
.flip-container.options::after {
  left: 80px;
}
.flip-container button {
  z-index: 2;
  padding: 4px;
  transition: color 0.25s ease-in;
}
.flip-container button.active {
  color: #fff;
}

.payment-flip {
  position: absolute;
  bottom: -100px;
  left: calc(50% - 20px);
  transform: translateX(-50%);
}

.payment-input-margin-sm {
  margin-left: 23px;
}

@media (max-width: 1000px) {
  .payment-header-template {
    position: relative;
    left: 0;
    margin: 15px auto 0px;
  }
}
@media (max-width: 770px) {
  .payment-header-template {
    width: 100%;
  }
  .payment-header-template input[type=checkbox] {
    width: 12px;
    height: 12px;
  }
}
@media (max-width: 575px) {
  .scene {
    width: 325px;
    height: 395px;
    perspective: 487.5px;
  }
  .payment-card-face {
    box-sizing: border-box;
  }
  .payment-flip {
    bottom: -50px;
  }
}
.location-header {
  --business-container-padding: 15px;
  --subheader-font-size: 13px;
  --index-header-font: Fira Sans, sans-serif;
  --subheader-color: #fff;
  --index-header-color: #fff;
  --index-header-font-size: 22px;
  --big-subcategory-button-padding: 11.5px;
  --business-container-background-color: rgb(5 5 5);
  --big-subcategory-button-background-color: rgb(30 30 30);
  --big-subcategory-button-box-shadow: 0px 0px 0px 1px #866d34;
  --big-subcategory-button-box-shadow-hover: 0px 0px 0px 1px #c4a86a;
  --big-subcategory-button-background-color-hover: rgb(50 50 50);
  --subcategory-service-count-color: #fff;
  --subcategory-service-count-color-hover: #fff;
  --subcategory-service-count-font-size: 12px;
  --subcategory-service-count-weight: 500;
  --subcategory-header-color: #fff;
  --subcategory-header-color-hover: #fff;
  --subcategory-header-weight: 500;
  --subcategory-header-font-size: 12px;
  --service-chosen-background-color: rgb(30 30 30);
  --service-wrapper-background-color: rgb(60 60 60);
  --service-wrapper-box-shadow: 0px 0px 0px 1px #866d34;
  --service-name-color: #fff;
  --service-description-color: #fff;
  --expand-btn-color: #c4a86a;
  --change-btn-color: #c4a86a;
  --location-amount-color: #c4a86a;
  --location-amount-box-shadow: 0px 0px 0px 1px #c4a86a;
  --location-amount-background-color: #c4a86a14;
  --locate-store-color: rgb(255, 255, 255);
  --locate-btn-background-color: #c4a86a;
  --locate-btn-box-shadow: 0px 0px 0px 1px #c4a86a;
  --locate-btn-color: #493405;
  --locate-input-background-color: rgb(0, 0, 0);
  --location-wrapper-background-color: #3c3c3c;
  --location-wrapper-box-shadow: 0px 0px 0px 1px #866d34;
  --location-address-color: rgb(184 184 184);
  --location-name-color: rgb(255, 255, 255);
  --nav-bar-background-color: rgb(0, 0, 0);
  --nav-bar-padding: 10px 10px 10px 30px;
  --nav-bar-border-bottom-color: rgb(0, 0, 0);
  --logo-size: 35px;
  --service-name-font-size: 13px;
  --service-cost-font-size: 10.1px;
  --service-duration-font-size: 10.1px;
  --service-description-font-size: 10.8px;
  --expand-btn-font-size: 10.8px;
  --location-amount-font-size: 10.1px;
  --in-person-font-size: 10.1px;
  --change-btn-font-size: 10.8px;
  --locate-store-font-size: 11.8px;
  --locate-input-font-size: 10.8px;
  --location-address-font-size: 10.8px;
  --location-name-font-size: 11.8px;
  --locate-input-color: rgb(255, 255, 255);
  --location-distance-color: rgb(255, 255, 255);
  --location-distance-font-size: 10.8px;
  width: calc(100% - 10px);
  max-width: 900px;
}
.location-header .--service-chosen, .location-header .summary-container, .location-header .--service-container {
  max-width: 350px;
}
.location-header .--locate-store, .location-header .--locate-container, .location-header .--location-wrapper {
  min-width: 250px;
  width: 250px;
}
.location-header .--service-description.collapsed {
  height: calc(var(--service-description-line-height) * 2.05rem);
  line-clamp: 3;
  -webkit-line-clamp: 3;
}
.location-header .--locate-input {
  min-height: 33.33px;
}
.location-header .--locate-input .cursor {
  height: 0.8rem;
  background-color: rgb(255, 255, 255);
}
.location-header .--locate-input.placeholder {
  color: var(--locate-input-placeholder-color);
}
.location-header .--locate-btn {
  --scale-amount: 1;
  --scale-to-amount: 0.9;
}
.location-header .--locate-btn.sim-click {
  animation: sim-click 0.25s ease-in-out 0s forwards;
}

.unified-calendar-show-off.calendar-calendar .big-calendar {
  overflow: hidden;
}

.unified-calendar-show-off {
  width: 50%;
  --checkup-session-background-color: rgb(183 84 19);
  --back-tattoo-session-background-color: rgb(19 16 18);
  --naval-piercing-background-color: rgb(49 95 211);
  --snakebite-piercing-background-color: rgb(206 44 144);
  --tattoo-session-background-color: rgba(123, 30, 98, 1);
  --tattoo-session-background-color-50: rgba(111, 27, 88, 1);
  --at-home-ear-piercing-background-color: rgb(255 190 105);
  --sleeve-tattoo-session-background-color: rgb(0 150 136);
  --multiple-piercings-background-color: rgb(227 85 85);
  --ear-piercing-background-color: rgb(103 58 183);
}

.location-details {
  min-width: 325px;
}

.location-map {
  --border-size: 4px;
  width: 275px;
  height: calc(100% + 13px);
  border-radius: 10px;
  background-clip: padding-box;
  border: var(--border-size) solid transparent;
}
.location-map img {
  border-radius: 8px;
}
.location-map::before {
  content: "";
  position: absolute;
  top: calc(var(--border-size) * -1);
  left: calc(var(--border-size) * -1);
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, #8829bf, #7d7af1);
  width: calc(100% + var(--border-size) * 2);
  height: calc(100% + var(--border-size));
}

.location-map-pin {
  position: absolute;
  top: var(--top);
  left: var(--left);
  opacity: 0;
  transform: translateY(-30px);
  transition: transform 0.3s cubic-bezier(0, 2.22, 0.69, 0.35), opacity 0.05s ease-in;
}
.location-map-pin.dropped {
  opacity: 1;
  transform: translateY(0px);
}

@media (max-width: 768px) {
  .location-header {
    height: 640px;
  }
  .locations-container {
    overflow-x: auto;
    justify-content: unset;
    padding-bottom: 40px;
    left: -16px;
    position: relative;
    width: calc(100vw + 10px);
  }
}
.url-bar {
  background-color: var(--color-slate-100);
  color: var(--color-slate-600);
  font: 600 0.7rem Inter;
  padding: 5px 20px;
  border-radius: 20px;
  width: 260px;
}
.url-bar.extra-padding {
  padding: 5px 20px 5px 55px;
}

.page-fly-in {
  animation: 0.4s cubic-bezier(0.83, 0.38, 0.3, 0.7) 0.4s fade-out-down-more reverse forwards;
  opacity: 0;
  overflow: hidden;
  transform: translateY(30px);
}

.swap-url {
  border-radius: 12px;
  font-size: 0.7rem;
  padding: 5px 10px;
  --icon-url: url(/images/icons/swap.svg);
}
.swap-url::before {
  content: "";
  background: transparent;
  content: "";
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: #fff;
  margin-right: 5px;
  width: 13px;
  height: 13px;
  display: block;
}

.changing-url-bar {
  max-width: 395px;
}

.unbranded-url {
  position: absolute;
}

.branded-url {
  position: relative;
  z-index: 2;
}
.branded-url > div {
  animation: expandBrandedUrl infinite 4s linear;
  width: 0px;
  overflow: hidden;
  z-index: 2;
  position: relative;
  background: #f1f5f9;
}

.fake-notification {
  background: linear-gradient(to right, #FFFFFF, #f0f1f5);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border-radius: 6px;
  box-sizing: border-box;
  border-radius: 6px;
  width: 325px;
  overflow: hidden;
  position: absolute;
  top: 0px;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.25s ease-in, transform 0.25s ease-in;
  animation-delay: 1s;
}
.fake-notification-toolbar {
  background: rgba(220, 226, 242, 0.3019607843);
}
.fake-notification.two {
  top: 15px;
  z-index: 2;
}
.fake-notification.three {
  top: 30px;
  z-index: 3;
}
.fake-notification.active {
  opacity: 1;
  transform: translateY(0px);
}
.fake-notification.swipe-off {
  opacity: 0;
  transform: translate(-50px, 0px);
}

.services-booking-page {
  max-height: 288px;
}

.unique-branding-bar {
  border-bottom: 1px solid var(--color-slate-300);
  box-sizing: border-box;
  height: 40px;
}
.unique-branding-placeholder {
  border: 1px dashed var(--color-slate-300);
  color: var(--color-gray-800);
}
.unique-branding-services-list, .unique-branding-bar {
  transition: opacity 0.25s ease-in;
}
.unique-branding-location {
  background: #fff;
  transform: translateX(100%);
  position: absolute;
  right: 0px;
  top: 0px;
  width: 155px;
  border-left: 1px solid var(--color-slate-300);
  transition: transform 0.25s ease-in, opacity 0.25s ease-in;
  height: 100%;
  z-index: 2;
}
.unique-branding-location-image {
  height: 145px;
  width: 145px;
}
.unique-branding [data-location] {
  --scale-amount: 1;
  --scale-to-amount: 0.9;
}
.unique-branding [data-location].hovered {
  background-color: var(--color-slate-100);
}
.unique-branding-pill {
  --scale-amount: 1;
  --scale-to-amount: 0.9;
  font-size: 0.7rem;
  padding: 3px;
}
.unique-branding-pill.hovered {
  background-color: var(--color-slate-100);
}
.unique-branding-service .subcategory {
  --scale-amount: 1;
  --scale-to-amount: 0.825;
  opacity: 1;
  transform: translateY(0px);
  transition: background-color 0.25s ease-in, opacity 0.25s ease-in, transform 0.25s ease-in;
  width: 200px;
}
.unique-branding-service .subcategory.hovered {
  background-color: var(--color-slate-100);
}
.unique-branding-locations, .unique-branding-chosen-service {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease-in, transform 0.25s ease-in;
}
.unique-branding-services, .unique-branding-chosen-service, .unique-branding-chosen-location {
  position: absolute;
  width: 200px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease-in, transform 0.25s ease-in;
}
.unique-branding-services > div:not(:last-of-type), .unique-branding-chosen-service > div:not(:last-of-type), .unique-branding-chosen-location > div:not(:last-of-type) {
  margin-bottom: 3px;
  padding-bottom: 3px;
  border-bottom: 1px dashed var(--color-slate-300);
}
.unique-branding-services, .unique-branding-chosen-service {
  top: 5px;
}
.unique-branding-chosen-location {
  top: 104px;
}
.unique-branding.subcategory-chosen .subcategory {
  opacity: 0;
  transform: translateY(10px);
}
.unique-branding.subcategory-chosen .unique-branding-services {
  opacity: 1;
  transform: translateY(0px);
}
.unique-branding.service-chosen .subcategory {
  opacity: 0;
  transform: translateY(10px);
}
.unique-branding.service-chosen .unique-branding-locations, .unique-branding.service-chosen .unique-branding-chosen-service {
  opacity: 1;
  transform: translateY(0px);
}
.unique-branding.location-chosen .subcategory, .unique-branding.location-chosen .unique-branding-locations {
  opacity: 0;
  transform: translateY(10px);
}
.unique-branding.location-chosen .unique-branding-location {
  opacity: 1;
  transform: translateX(0%);
}
.unique-branding.location-chosen .unique-branding-chosen-service, .unique-branding.location-chosen .unique-branding-chosen-location {
  opacity: 1;
  transform: translateY(0px);
}
.unique-branding.reset .unique-branding-services-list, .unique-branding.reset .unique-branding-bar, .unique-branding.reset .unique-branding-location {
  opacity: 0 !important;
}

@keyframes expandBrandedUrl {
  0%, 15% {
    width: 0px;
  }
  35%, 50%, 65% {
    width: 214px;
  }
  85%, 100% {
    width: 0px;
  }
}
@media (max-width: 770px) {
  .booking-page-header {
    overflow: visible;
  }
  .swap-url {
    width: 169px;
    height: 23.3px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: -35px;
  }
}
@media (max-width: 575px) {
  .booking-page-header .circle {
    opacity: 0;
  }
  .url-bar.extra-padding {
    padding: 5px 20px;
  }
}
.video-chat-header {
  background: #fff;
  border-radius: 12px;
  left: 40px;
  overflow: hidden;
  position: absolute;
  top: 0px;
  height: 470px;
  width: 680px;
}

.video-chat-template {
  background-color: #171717;
  display: flex;
  flex-flow: row;
  max-height: 470px;
  position: relative;
  width: 100%;
  z-index: 11;
}
.video-chat-template .call-timer {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-gray-900);
  color: #fff;
  padding: 2px 6px;
  border-radius: 12px;
}
.video-chat-template .call-container {
  border-radius: 12px;
  max-width: 200px;
  max-height: 140px;
  overflow: hidden;
}
.video-chat-template .call-container.larger {
  max-width: 300px;
  max-height: 240px;
}
.video-chat-template .call-toolbar .toggle-btn .icon, .video-chat-template .call-toolbar .end-call-btn .icon {
  --width: 20px;
  --height: 20px;
}
.video-chat-template .icon.close {
  --width: 16px;
  --height: 16px;
}
.video-chat-template .chat-box {
  max-width: 230px;
}
.video-chat-template .chat-box .chat-box-header {
  padding: 8px;
  height: 45px;
}
.video-chat-template .chat-box .chat-box-header .chat-box-with {
  font-size: 0.7rem;
}
.video-chat-template .chat-box .message-list {
  --s: 20px;
  box-sizing: border-box;
  height: 375px;
}
.video-chat-template .chat-box .message-list .message-date {
  font-size: 0.65rem;
  width: 150px;
  padding: 3px 5px;
}
.video-chat-template .chat-box .message-list .message-container.video-call .message-content-container.other .message-content, .video-chat-template .chat-box .message-list .message-container.video-call .message-content-container.yours .message-content {
  font-size: 0.6rem;
}
.video-chat-template .chat-box .message-container .message-content-container.yours .message-status {
  font-size: 0.45rem;
}
.video-chat-template .chat-box .message-container .message-content-container .message-author {
  font-size: 0.55rem;
}
.video-chat-template .chat-box .message-container .message-content-container .message-content {
  font-size: 0.65rem;
}
.video-chat-template .chat-box .message-container .message-content-container .message-time {
  font-size: 0.5rem;
}
.video-chat-template .chat-box .message-input-container {
  padding: 10px;
}
.video-chat-template .chat-box .message-input-container input {
  height: 33px;
  font-size: 0.65rem;
}
.video-chat-template .chat-box .message-input-container .full-btn {
  padding: 7px;
  font-size: 0.7rem;
  margin-left: 7px;
}
.video-chat-template .info-box {
  font-size: 0.55rem;
  padding: 8px;
}

.float-name {
  background: rgba(0, 0, 0, 0.75);
  border-radius: 12px;
  color: #fff;
  font-size: 0.6rem;
  padding: 2px 6px;
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.message-how-item {
  background-color: #fff;
}

.message {
  background: var(--logo-color);
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 12px;
  color: #fff;
}

.send-box {
  background: var(--color-slate-100);
  color: var(--color-slate-500);
  border-radius: 12px;
}

.video-chat-template .chat-box {
  opacity: 1;
  transform: translateX(0%);
  transition: transform 0.25s ease-in;
}

@media (max-width: 1000px) {
  .video-chat-header {
    margin-left: 20px;
    position: relative;
    left: 0;
  }
}
@media (max-width: 768px) {
  .h-100-md {
    height: 100%;
  }
  .index-section-container {
    gap: 40px;
    max-width: 100vw;
  }
  .video-chat-template .call-container.top-business-stream {
    position: absolute;
    top: 10px;
    z-index: 2;
    right: 10px;
    width: 140px;
  }
  .video-chat-template .call-container.top-person-stream {
    max-width: unset;
    max-height: unset;
  }
  .video-chat-template .chat-box {
    position: absolute;
    right: 0;
    z-index: 10;
    transform: translateX(100%);
  }
  .video-chat-template .chat-box.active {
    transform: translateX(0%);
  }
  .video-chat-header {
    margin-left: 0px;
  }
}
@media (max-width: 576px) {
  .video-chat-template.call-container.business-stream {
    position: absolute;
    top: 10px;
    z-index: 2;
    right: 10px;
    width: 140px;
  }
  .video-chat-template.call-container.person-stream {
    max-width: unset;
    max-height: unset;
  }
  .call-toolbar {
    bottom: 15px;
  }
}
.holidays-overflow {
  max-height: 510px;
  overflow-y: auto;
}

@media (max-width: 575px) {
  .desktop-template .staff-item {
    padding: 20px 10px;
    font-size: 0.75rem;
    gap: 10px;
  }
  .desktop-template .list-min-width {
    min-width: 105px;
  }
}
.notification-header {
  background: #fff;
  border-radius: 12px;
  left: 40px;
  overflow: hidden;
  position: absolute;
  top: 0px;
  min-height: 510px;
  width: 680px;
}

.email-body-outer {
  background-color: var(--color-slate-100);
}

.email {
  background-color: #fff;
}

.url {
  text-decoration: underline;
  color: blue;
}

.email-container {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  max-width: 680px;
}

.email-btn {
  border-radius: 100px;
  box-shadow: 0px 0px 0px 1px #000;
  padding: 8px 20px 8px 12px;
}

.notification-list:not(:last-of-type) {
  border-bottom: 1px solid var(--color-gray-300);
}

.dynamic-text-flip::after {
  width: calc(50% - 10px);
  transition: width 0.2s ease-in, left 0.25s ease-in;
}
.dynamic-text-flip.text::after {
  left: 110px;
  width: calc(50% - 12px);
}

[data-placeholder-item] {
  background: var(--logo-color);
  color: #fff;
  padding: 2px;
  border-radius: 2px;
  position: relative;
  cursor: default;
}
[data-placeholder-item]::after {
  content: attr(data-placeholder-item);
  position: absolute;
  white-space: nowrap;
  width: -moz-fit-content;
  width: fit-content;
  background: var(--color-slate-700);
  color: #fff;
  font: 400 0.7rem/16px var(--text-font);
  left: 50%;
  transform: translate(-50%, 10px) scale(0.9);
  padding: 5px 10px;
  top: 27px;
  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;
}
[data-placeholder-item]:hover::after {
  opacity: 1;
  transform: translate(-50%, 0px) scale(1);
}

@media (max-width: 786px) {
  .notification-header {
    position: relative;
    left: 0;
    margin-left: 0px;
  }
}
.pricing-calculator-box {
  max-width: 540px;
  border-radius: 8px;
}

.pricing-calculator-value {
  border-right: 1px solid var(--color-gray-400);
  width: 170px;
  height: 90px;
}

.contact-us-pricing {
  font-size: 2rem;
}

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

.pricing-check {
  background: linear-gradient(45deg, #8829BF, #7D7AF1);
  border-radius: 100px;
  color: #fff;
  font-weight: 900;
  font-size: 9px;
  margin-top: 5px;
  height: 12px;
  width: 12px;
  min-height: 12px;
  min-width: 12px;
}

.pricing-icon {
  height: 30px;
  color: var(--logo-color-lighter);
}

input[type=range] {
  position: relative;
  background: rgba(255, 255, 255, 0);
  overflow: hidden;
}

input[type=range] {
  color: var(--logo-color);
  --thumb-height: 15px;
  --track-height: 3px;
  --track-color: rgba(0, 0, 0, 0.2);
  --brightness-hover: 180%;
  --brightness-down: 80%;
  --clip-edges: 3px;
}
input[type=range]:active {
  cursor: grabbing;
}
input[type=range]:disabled {
  filter: grayscale(1);
  opacity: 0.3;
  cursor: not-allowed;
}

input[type=range],
input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -webkit-transition: all ease 100ms;
  transition: all ease 100ms;
  height: var(--thumb-height);
}

input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-webkit-slider-thumb {
  position: relative;
}

input[type=range]::-webkit-slider-thumb {
  --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
  --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
  --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
  --clip-further: calc(100% + 1px);
  --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
  	100vmax currentColor;
  width: var(--thumb-width, var(--thumb-height));
  background: linear-gradient(currentColor 0 0) scroll no-repeat left center/50% calc(var(--track-height) + 1px);
  background-color: currentColor;
  box-shadow: var(--box-fill);
  border-radius: var(--thumb-width, var(--thumb-height));
  filter: brightness(100%);
  clip-path: polygon(100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further));
}

input[type=range]:hover::-webkit-slider-thumb {
  filter: brightness(var(--brightness-hover));
  cursor: grab;
}

input[type=range]:active::-webkit-slider-thumb {
  filter: brightness(var(--brightness-down));
  cursor: grabbing;
}

input[type=range]::-webkit-slider-runnable-track {
  background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center/100% calc(var(--track-height) + 1px);
}

input[type=range]:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}

/* === Firefox specific styles === */
input[type=range],
input[type=range]::-moz-range-track,
input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
       appearance: none;
  -moz-transition: all ease 100ms;
  transition: all ease 100ms;
  height: var(--thumb-height);
}

input[type=range]::-moz-range-track,
input[type=range]::-moz-range-thumb,
input[type=range]::-moz-range-progress {
  background: rgba(255, 255, 255, 0);
}

input[type=range]::-moz-range-thumb {
  background: currentColor;
  border: 0;
  width: var(--thumb-width, var(--thumb-height));
  border-radius: var(--thumb-width, var(--thumb-height));
  cursor: grab;
}

input[type=range]:active::-moz-range-thumb {
  cursor: grabbing;
}

input[type=range]::-moz-range-track {
  width: 100%;
  background: var(--track-color);
}

input[type=range]::-moz-range-progress {
  -moz-appearance: none;
       appearance: none;
  background: currentColor;
  transition-delay: 30ms;
}

input[type=range]::-moz-range-track,
input[type=range]::-moz-range-progress {
  height: calc(var(--track-height) + 1px);
  border-radius: var(--track-height);
}

input[type=range]::-moz-range-thumb,
input[type=range]::-moz-range-progress {
  filter: brightness(100%);
}

input[type=range]:hover::-moz-range-thumb,
input[type=range]:hover::-moz-range-progress {
  filter: brightness(var(--brightness-hover));
}

input[type=range]:active::-moz-range-thumb,
input[type=range]:active::-moz-range-progress {
  filter: brightness(var(--brightness-down));
}

input[type=range]:disabled::-moz-range-thumb {
  cursor: not-allowed;
}

@media (max-width: 1000px) {
  .pricing-section {
    padding: 50px 20px;
  }
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .pricing-calculator-box {
    width: 90%;
    min-width: 300px;
  }
  .pricing-calculator-value {
    border: 0px;
    padding: 0;
  }
  .pricing-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
.contact-us-form {
  transition: height 0.15s ease-in, opacity 0.15s ease-in;
}

.feature-link:hover::after {
  transform: translateX(5px);
}
.feature-link::after {
  content: "";
  -webkit-mask-image: url(/images/icons/chevron-thick.svg);
  mask-image: url(/images/icons/chevron-thick.svg);
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--logo-color);
  height: 19px;
  width: 19px;
  display: block;
  transition: transform 0.15s ease-in;
  margin-left: 2px;
  transform: translateX(0px);
}

.solution-container {
  max-width: 1000px;
  margin: 50px auto 50px;
  padding: 50px 10px;
  line-height: 26px;
}
.solution-container h2 {
  line-height: 33px;
}
.solution-container.no-margin-top {
  margin-top: 0;
}

.solution-image {
  max-width: 400px;
  box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.15);
  padding: 40px 20px;
  width: 100%;
}
.solution-image img {
  width: 250px;
}

.solution-hightown {
  background-color: #020336;
  color: #fff;
}

.solution-just-feel {
  background-color: #000;
  color: #fff;
}

.solution-mindful {
  color: #fff;
  background: linear-gradient(45deg, #cd5a81, #ed6593);
}

.solution-icon {
  width: 150px;
}

.solution-aesthetics-logo {
  color: #fff;
  font-weight: 300;
  letter-spacing: -0.5px;
  margin-left: -10px;
}

.solution-coaching-logo {
  color: #12101b;
  font-weight: 700;
  margin-left: -10px;
  padding: 3px;
}

.solution-booking-page {
  height: 400px;
  width: 340px;
}
.solution-booking-page .toolbar {
  padding: 20px;
}

.solution-beauty-page {
  color: #12101b;
  font-weight: 800;
  margin-left: -10px;
  padding: 3px;
  letter-spacing: 2px;
}

.solution-pharmacy-styling {
  --business-container-padding: 15px;
  --subheader-font-size: 13px;
  --index-header-font: Lora, sans-serif;
  --subheader-color: rgb(30 30 30);
  --index-header-color: rgb(30 30 30);
  --index-header-font-size: 22px;
  --big-subcategory-button-padding: 11.5px;
  --business-container-background-color: rgb(255, 255, 255);
  --big-subcategory-button-background-color: rgb(255 255 255);
  --big-subcategory-button-box-shadow: 0px 0px 0px 1px #020336;
  --big-subcategory-button-box-shadow-hover: 0px 0px 0px 1px #05d8c8;
  --big-subcategory-button-background-color-hover: #020336;
  --subcategory-service-count-color: rgb(30 30 30);
  --subcategory-service-count-color-hover: rgb(255 255 255);
  --subcategory-service-count-font-size: 12px;
  --subcategory-service-count-weight: 500;
  --subcategory-header-color: rgb(30 30 30);
  --subcategory-header-color-hover: rgb(255 255 255);
  --subcategory-header-weight: 500;
  --subcategory-header-font-size: 12px;
  --service-chosen-background-color: rgb(30 30 30);
  --service-wrapper-background-color: rgb(60 60 60);
  --service-wrapper-box-shadow: 0px 0px 0px 1px #866d34;
  --service-name-color: #fff;
  --service-description-color: #fff;
  --expand-btn-color: #c4a86a;
  --change-btn-color: #c4a86a;
  --location-amount-color: #c4a86a;
  --location-amount-box-shadow: 0px 0px 0px 1px #c4a86a;
  --location-amount-background-color: #c4a86a14;
  --locate-store-color: rgb(255, 255, 255);
  --locate-btn-background-color: #c4a86a;
  --locate-btn-box-shadow: 0px 0px 0px 1px #c4a86a;
  --locate-btn-color: #493405;
  --locate-input-background-color: rgb(0, 0, 0);
  --location-wrapper-background-color: #3c3c3c;
  --location-wrapper-box-shadow: 0px 0px 0px 1px #866d34;
  --location-address-color: rgb(184 184 184);
  --location-name-color: rgb(255, 255, 255);
  --nav-bar-background-color: #020336;
  --nav-bar-padding: 10px 10px 10px 30px;
  --nav-bar-border-bottom-color: rgb(0, 0, 0);
}

.solution-aesthetics-styling {
  --business-container-padding: 15px;
  --subheader-font-size: 12px;
  --index-header-font: "Playfair Display", serif;
  --subheader-color: rgb(255 255 255);
  --index-header-color: rgb(255 255 255);
  --index-header-weight: 100;
  --index-header-font-size: 22px;
  --big-subcategory-button-padding: 11.5px;
  --business-container-background-color: rgb(0, 0, 0);
  --big-subcategory-button-background-color: rgb(0 0 0);
  --big-subcategory-button-box-shadow: 0px 0px 0px 1px #fff;
  --big-subcategory-button-box-shadow-hover: 0px 0px 0px 1px #fff;
  --big-subcategory-button-background-color-hover: rgba(255, 255, 255, 0.8);
  --big-subcategory-button-border-radius: 0px;
  --subcategory-service-count-color: rgb(255 255 255);
  --subcategory-service-count-color-hover: rgb(0 0 0);
  --subcategory-service-count-font-size: 12px;
  --subcategory-service-count-weight: 500;
  --subcategory-header-color: rgb(255 255 255);
  --subcategory-header-color-hover: rgb(0 0 0);
  --subcategory-header-weight: 500;
  --subcategory-header-font-size: 12px;
  --service-chosen-background-color: rgb(30 30 30);
  --service-wrapper-background-color: rgb(60 60 60);
  --service-wrapper-box-shadow: 0px 0px 0px 1px #866d34;
  --service-name-color: #fff;
  --service-description-color: #fff;
  --expand-btn-color: #c4a86a;
  --change-btn-color: #c4a86a;
  --nav-bar-background-color: #000;
  --nav-bar-padding: 10px 10px 10px 30px;
  --nav-bar-border-bottom-color: rgb(0, 0, 0);
  --logo-size: 35px;
}

.solution-coaching-styling {
  --business-container-padding: 15px;
  --subheader-font-size: 12px;
  --index-header-font: "Playfair Display", serif;
  --subheader-color: #12101b;
  --index-header-color: #12101b;
  --index-header-weight: 100;
  --index-header-font-size: 22px;
  --big-subcategory-button-padding: 11.5px;
  --business-container-background-color: #fefef4;
  --big-subcategory-button-background-color: #fefef4;
  --big-subcategory-button-box-shadow: 0px 0px 0px 1px #b99936;
  --big-subcategory-button-box-shadow-hover: 0px 0px 0px 1px #b99936;
  --big-subcategory-button-background-color-hover: rgba(255, 255, 255, 0.8);
  --big-subcategory-button-border-radius: 0px;
  --subcategory-service-count-color: #12101b;
  --subcategory-service-count-color-hover: rgb(0 0 0);
  --subcategory-service-count-font-size: 12px;
  --subcategory-service-count-weight: 500;
  --subcategory-header-color: #12101b;
  --subcategory-header-color-hover: rgb(0 0 0);
  --subcategory-header-weight: 500;
  --subcategory-header-font-size: 12px;
  --service-chosen-background-color: rgb(30 30 30);
  --service-wrapper-background-color: rgb(60 60 60);
  --service-wrapper-box-shadow: 0px 0px 0px 1px #866d34;
  --service-name-color: #fff;
  --service-description-color: #fff;
  --nav-bar-background-color: #fefef4;
  --nav-bar-padding: 10px 10px 10px 30px;
  --nav-bar-border-bottom-size: 2px;
  --nav-bar-border-bottom-color: #b99936;
  --logo-size: 35px;
}

.solution-beauty-styling {
  --business-container-padding: 15px;
  --subheader-font-size: 12px;
  --index-header-font: "Lato", serif;
  --subheader-color: #12101b;
  --index-header-color: #12101b;
  --index-header-weight: 800;
  --index-header-font-size: 22px;
  --big-subcategory-button-padding: 11.5px;
  --business-container-background-color: #ffc0cb;
  --big-subcategory-button-background-color: #fefef4;
  --big-subcategory-button-box-shadow: 4px 3px 0px 1px rgb(33, 37, 41), 0px 0px 0px 2px rgb(33, 37, 41);
  --big-subcategory-button-box-shadow-hover: 4px 3px 0px 1px rgb(33, 37, 41), 0px 0px 0px 2px rgb(33, 37, 41);
  --big-subcategory-button-background-color-hover: rgba(255, 255, 255, 0.8);
  --big-subcategory-button-border-radius: 0px;
  --subcategory-service-count-color: #12101b;
  --subcategory-service-count-color-hover: rgb(0 0 0);
  --subcategory-service-count-font-size: 12px;
  --subcategory-service-count-weight: 500;
  --subcategory-header-color: #12101b;
  --subcategory-header-color-hover: rgb(0 0 0);
  --subcategory-header-weight: 500;
  --subcategory-header-font-size: 12px;
  --service-chosen-background-color: rgb(30 30 30);
  --service-wrapper-background-color: rgb(60 60 60);
  --service-wrapper-box-shadow: 0px 0px 0px 1px #866d34;
  --service-name-color: #fff;
  --service-description-color: #fff;
  --nav-bar-background-color: #ffc0cb;
  --nav-bar-padding: 10px 10px 10px 30px;
  --nav-bar-border-bottom-size: 0px;
  --nav-bar-border-bottom-color: #b99936;
  --logo-size: 35px;
}

@media (max-width: 768px) {
  .solution-header {
    margin: 0;
  }
  .solutions-coupon-container {
    position: relative;
    width: calc(100% + 10px);
  }
}
@media (max-width: 575px) {
  .solution-icon {
    width: 75px;
  }
}
.inner-nav-btn {
  background: var(--color-slate-100);
  color: var(--color-slate-500);
  text-shadow: 0px 1px 1px var(--color-slate-200);
  position: relative;
}
.inner-nav-btn:hover {
  background: var(--color-slate-200);
  color: var(--color-slate-800);
}
.inner-nav-btn.active {
  background: var(--logo-color);
  text-shadow: 0px 1px 1px var(--logo-color-darker-10);
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10), 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
  color: #fff;
}
.inner-nav-btn.active::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%;
}

.hide-if-inactive {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease-in;
}
.hide-if-inactive:not(.active).input-container:has(.touched:invalid) .invalid-msg {
  grid-template-rows: 0fr;
  margin: 0;
  opacity: 0;
}
.hide-if-inactive:not(.active).input-container:has(.touched:invalid) input {
  opacity: 0;
}
.hide-if-inactive .invalid-msg {
  margin-left: 20px;
}
.hide-if-inactive.contain-width input {
  box-sizing: border-box;
  font-size: 0px;
  width: 190px;
}
.hide-if-inactive[data-input-tag]::after {
  content: attr(data-input-tag);
  font: 500 0.87rem Inter;
  opacity: 0;
  position: absolute;
  left: 170px;
  top: 16px;
  transition: opacity 0.05s ease-in;
}
.hide-if-inactive.active {
  grid-template-rows: 1fr;
}
.hide-if-inactive.active[data-input-tag]::after {
  transition: 0.2s opacity 0.2s ease-in;
}
.hide-if-inactive.active:has(.calendar.active) .overflow-hidden, .hide-if-inactive.active:has(.dropdown.active) .overflow-hidden {
  overflow: visible;
}
.hide-if-inactive.active::after {
  opacity: 1;
}
.hide-if-inactive.active input {
  color: rgb(34, 38, 42);
  font-size: 0.875rem;
  margin-top: 8px;
  padding: 7px 7px;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  transition: color 0.2s ease-in 0.05s, margin 0.2s ease-in, padding 0.2s ease-in, box-shadow 0.2s ease-in;
}
.hide-if-inactive.active input:focus-within {
  box-shadow: 0px 0px 0px 1px var(--color-slate-700);
}
.hide-if-inactive.active .overflow-hidden {
  padding: 3px;
}
.hide-if-inactive input {
  color: rgba(34, 38, 42, 0);
  margin-left: 20px;
  overflow: hidden;
  outline: 0;
  border: 0;
  padding: 0px 7px;
  transition: color 0s ease-in, margin 0.2s ease-in, padding 0.2s ease-in, box-shadow 0.2s ease-in;
}
.hide-if-inactive input[type=time] {
  box-sizing: border-box;
  width: 86px;
  font: 400 0.9rem var(--text-font);
  border-radius: 4px;
  height: 32px;
}
.hide-if-inactive .date-btn, .hide-if-inactive .dropdown-btn {
  box-sizing: border-box;
  overflow: hidden;
  margin-left: 20px;
  padding: 7px;
  height: 32px;
}
.hide-if-inactive .date-btn.disabled, .hide-if-inactive .dropdown-btn.disabled {
  opacity: 0.7;
}
.hide-if-inactive .calendar.standard {
  --date-color-hover: #fff;
  --date-background-color-hover: var(--logo-color);
  left: calc(50% + 120px);
  transform: translate(-50%, calc(-100% - 0px));
}
.hide-if-inactive .calendar.standard.active {
  transform: translate(-50%, calc(-100% - 5px));
}

.restriction-list-item {
  max-width: 350px;
  border-bottom: 1px solid var(--color-slate-100);
}
.restriction-list-item.invalid-restriction::after {
  content: "This service is not available at the location(s) chosen";
  font: 500 0.8rem Inter;
  color: var(--color-danger-600);
}

[data-discount-type]::after {
  content: attr(data-discount-type);
  position: absolute;
  top: 32px;
  font: 600 0.875rem var(--header-font);
  left: 100px;
}
[data-discount-type].input-container > input[type=text] {
  width: 130px;
  padding: 9px 12px;
  font-size: 0.875rem;
}

.coupon-container {
  filter: drop-shadow(6px 4px 0px #F3F4F5);
  transition: transform 0.25s ease-in, filter 0.25s ease-in;
}
.coupon-container:hover {
  filter: drop-shadow(6px 4px 3px #dad8d8);
  transform: scale(1.02);
}
.coupon-container:hover .coupon {
  filter: blur(2px);
  color: rgba(255, 255, 255, 0.5);
}
.coupon-container:hover .coupon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.coupon-container:hover .coupon-btns {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.coupon {
  filter: blur(0px);
  box-sizing: border-box;
  color: #fff;
  width: 330px;
  border-radius: 8px;
  background: linear-gradient(109deg, #8829BF, #7D7AF1 100.2%);
  -webkit-mask-image: radial-gradient(circle at 28px 50%, transparent 8px, red 8.5px);
          mask-image: radial-gradient(circle at 28px 50%, transparent 8px, red 8.5px);
  -webkit-mask-position: -28px center;
          mask-position: -28px center;
  transition: color 0.25s ease-in, filter 0.25s ease-in;
  will-change: filter, color;
}

.coupon-header {
  letter-spacing: 0.5px;
}

.coupon-btns {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 10px));
  transition: opacity 0.25s ease-in, transform 0.25s ease-in;
}
.coupon-btns .copy-btn {
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5);
  color: #fff;
  transition: background-color 0.25s ease-in, box-shadow 0.25s ease-in, color 0.25s ease-in;
}
.coupon-btns .copy-btn:hover {
  background: rgb(255, 255, 255);
  box-shadow: 0px 0px 0px 1px rgb(255, 255, 255);
  color: #000;
}
.coupon-btns .view-btn {
  background: rgb(255, 255, 255);
  box-shadow: 0px 0px 0px 1px rgb(255, 255, 255);
  transition: transform 0.25s ease-in;
}
.coupon-btns .view-btn:hover {
  transform: scale(1.05);
}
.coupon-btns .view-btn, .coupon-btns .copy-btn {
  width: 80px;
}

.back-to-coupons::before {
  background: transparent;
  background-color: var(--text-color);
  content: "";
  display: var(--icon-display);
  height: 14px;
  flex-shrink: 0;
  -webkit-mask-image: url(/images/icons/arrow-back-round.svg);
  mask-image: url(/images/icons/arrow-back-round.svg);
  margin-right: 5px;
  -webkit-mask-size: cover;
  mask-size: cover;
  width: 14px;
  transition: background-color 0.2s ease-in;
}

.view-coupon-header {
  max-width: 417px;
  border-bottom: 1px solid var(--color-slate-300);
}

.coupon-tags-container {
  margin-left: 12px;
}

.coupon-tag-container {
  width: 85px;
  height: 34px;
}
.coupon-tag-container:has(:checked) .coupon-tag {
  box-shadow: 0px 0px 0px 1px var(--color-slate-700);
}

.coupon-tag {
  padding: 8px 10px 8px 25px;
  box-shadow: 0px 0px 0px 1px var(--color-slate-300);
  border-radius: 4px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -22px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.coupon-tag:hover {
  box-shadow: 0px 0px 0px 1px var(--color-slate-500);
}

[data-expired=true] {
  opacity: 0.5;
}

@media (max-width: 770px) {
  .manage-refund-modal {
    zoom: 0.9;
  }
}
@media (max-width: 575px) {
  .manage-refund-modal {
    zoom: 0.7;
  }
  .manage-refund-modal .create-refund-show-off {
    zoom: 0.75;
  }
}
.customer-mail-btn {
  padding: 2px;
}

.customer-toolbar {
  border-bottom: 1px solid var(--color-gray-200);
}
.customer-toolbar-btn.active {
  color: var(--logo-color);
}
.customer-toolbar-btn.active:after {
  background: var(--logo-color);
  content: "";
  position: absolute;
  bottom: -10px;
  height: 2px;
  width: 100%;
  left: 0;
}

.customer-detail {
  gap: 2px;
}

.customer-note-container {
  max-width: 650px;
}

.note-container {
  border-left: 1px solid var(--color-slate-200);
}
.note-container.pinned {
  border-left: 1px solid var(--logo-color);
}
.note-container.pinned::after {
  rotate: -45deg;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='14px' viewBox='0 -960 960 960' width='14px' fill='%235555dd'%3E%3Cpath d='m640-480 80 80v80H520v240l-40 40-40-40v-240H240v-80l80-80v-280h-40v-80h400v80h-40v280Zm-286 80h252l-46-46v-314H400v314l-46 46Zm126 0Z'/%3E%3C/svg%3E");
}
.note-container::after {
  position: absolute;
  left: -7px;
  top: 0px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='14px' viewBox='0 -960 960 960' width='14px' fill='%2394a3b8'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h440l200 200v440q0 33-23.5 56.5T760-120H200Zm0-80h560v-400H600v-160H200v560Zm80-80h400v-80H280v80Zm0-320h200v-80H280v80Zm0 160h400v-80H280v80Zm-80-320v160-160 560-560Z'/%3E%3C/svg%3E");
  width: 14px;
  height: 14px;
  background: #fff;
  z-index: 2;
}

.note-author {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  overflow: hidden;
}

.note-text {
  padding: 0px 10px 0px 20px;
}

.add-note {
  min-height: 74px;
}
.add-note .text-editor {
  padding: 0px 2px 10px;
}
.add-note .text-editor:focus-within, .add-note .text-editor:focus-visible {
  outline: none;
}

.details-min-width {
  min-width: 130px;
}

.customer-booking-note-wrapper:hover .customer-booking-container::after {
  border-bottom: 4px dotted var(--logo-color);
}
.customer-booking-note-wrapper:hover .customer-booking-note-container, .customer-booking-note-wrapper:hover .customer-booking-container {
  box-shadow: 0px 0px 0px 1px var(--logo-color-darker-10), 0px 0px 0px 2px var(--logo-color);
}

.customer-left-width {
  width: 100%;
  max-width: 325px;
}

.customer-booking-container {
  height: -moz-fit-content;
  height: fit-content;
}
.customer-booking-container.has-note::after {
  content: "";
  display: block;
  border-bottom: 4px dotted var(--color-slate-300);
  width: 35px;
  position: absolute;
  right: -38px;
  top: 50%;
  transform: translateY(-50%);
  transition: border 0.2s ease-in;
}

.customer-booking-note-container {
  height: 131px;
  padding: 15px 5px 15px 15px;
  transition: box-shadow 0.2s ease-in;
}
.customer-booking-note-container:hover .customers-expand-note::before {
  opacity: 1;
}
.customer-booking-note-container.expanded .customers-expand-note::before {
  content: "Collapse note";
  left: -98px;
}
.customer-booking-note-container.expanded .customers-expand-note::after {
  rotate: 180deg;
}

.customers-expand-note::before {
  content: "Expand note";
  color: var(--logo-color);
  background-color: #fff;
  font: 600 0.875rem var(--header-font);
  padding: 5px;
  position: absolute;
  opacity: 0;
  left: -88px;
  text-wrap: nowrap;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.2s ease-in;
  width: -moz-fit-content;
  width: fit-content;
}

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

.danger-booking, .warning-booking, .success-booking, .none-booking {
  padding: 2px 4px;
  font-size: 0.7rem;
}

.none-booking {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
  box-shadow: 0px 0px 0px 1px var(--color-gray-300);
}

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

.warning-booking {
  background-color: var(--color-warning-100);
  color: var(--color-warning-700);
  box-shadow: 0px 0px 0px 1px var(--color-warning-300);
}

.success-booking {
  background-color: var(--color-success-100);
  color: var(--color-success-700);
  box-shadow: 0px 0px 0px 1px var(--color-success-300);
}

.edit-detail {
  --width: 15px;
  --height: 15px;
  height: 20px;
  width: 20px;
}

.customers-table th:nth-child(3), .customers-table th:nth-child(4), .customers-table th:nth-child(5), .customers-table th:nth-child(6) {
  width: 115px;
}
.customers-table th:nth-child(7), .customers-table th:nth-child(8) {
  width: 190px;
}

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

.customers-table-container {
  max-width: 1400px;
}

.customer-search {
  padding: 7px 10px 7px 35px;
}
.customer-search::-moz-placeholder {
  top: 1px;
  position: relative;
}
.customer-search::placeholder {
  top: 1px;
  position: relative;
}

.customer-search-icon {
  left: 8px;
  --width: 18px;
  --height: 18px;
}

.customer-filter {
  position: fixed;
  background-color: #fff;
  width: 300px;
  z-index: 9;
}

.remove-filter {
  --icon-color: var(--color-danger-600);
  --width: 16px;
  --height: 16px;
}

[data-customer-filter]::before {
  position: absolute;
  content: attr(data-customer-filter);
  bottom: 3px;
  right: 5px;
  font: 700 0.6rem Inter, sans-serif;
}

[data-customer-filter=Bookings]::before, [data-customer-filter="No shows"]::before {
  bottom: 0px;
  right: 2px;
  font-size: 0.5rem;
}

.prescription-status {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.customer-document-upload {
  border: 2px dashed var(--color-slate-300);
  text-align: center;
  background-color: var(--color-slate-50);
  transition: background-color 0.2s ease-in;
}
.customer-document-upload:hover {
  background-color: var(--color-slate-100);
}
.customer-document-upload:hover .upload-header {
  background-color: var(--color-slate-200);
}
.customer-document-upload .upload-header {
  background-color: var(--color-slate-50);
  margin: 5px 0px;
}

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

.prescription-info {
  max-height: 90vh;
  overflow-y: auto;
  width: 100vw;
  max-width: 900px;
}

.prescription-info-card {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #374151;
  padding: 13px 15px;
  line-height: 24px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-family: "Inter";
}

.prescription-items > div {
  border-bottom: 1px solid var(--color-gray-400);
  padding: 13px 0;
}
.prescription-items > div:first-child {
  border-top: 1px solid var(--color-gray-400);
}

.enter-details, .dispense-prescription {
  transform: translateY(0px);
  opacity: 1;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.enter-details.inactive, .dispense-prescription.inactive {
  transform: translateY(20px);
  opacity: 0;
}

@media (max-width: 1000px) {
  .align-items-start-lg {
    align-items: start;
  }
  .flex-column-lg {
    flex-flow: column;
  }
  .justify-content-center-lg {
    justify-content: center;
  }
  .m-0-lg {
    margin: 0;
  }
  .mb-15-lg {
    margin-bottom: 15px;
  }
  .overflow-x-auto-md {
    overflow-x: auto;
  }
  .pl-15-lg {
    padding-left: 15px;
  }
  .pr-15-lg {
    padding-right: 15px;
  }
  .p-10-lg {
    padding: 10px;
  }
  .text-center-lg {
    text-align: center;
  }
  .w-100-lg {
    width: 100%;
  }
}
@media (max-width: 770px) {
  .align-items-start-md {
    align-items: start;
  }
  .flex-column-reverse-md {
    flex-flow: column-reverse;
  }
  .flex-column-md {
    flex-flow: column;
  }
  .m-0-md {
    margin: 0;
  }
  .m-auto-md {
    margin: auto;
  }
  .mb-15-md {
    margin-bottom: 15px;
  }
  .mt-15-md {
    margin-top: 15px;
  }
  .p-20-md {
    padding: 20px;
  }
  .p-10-md {
    padding: 10px;
  }
  .text-center-md {
    text-align: center;
  }
  .w-100-md {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .align-items-center-sm {
    align-items: center;
  }
  .align-items-start-sm {
    align-items: start;
  }
  .flex-column-sm {
    flex-flow: column;
  }
  .flex-column-reverse-sm {
    flex-flow: column-reverse;
  }
  .f-bigger-sm {
    font-size: 2.5rem;
  }
  .f-big-sm {
    font-size: 1.25rem;
  }
  .f-normal-sm {
    font-size: 1rem;
  }
  .justify-content-unset-sm {
    justify-content: unset;
  }
  .ml-5-sm {
    margin-left: 5px;
  }
  .px-5-sm {
    padding: 0px 5px;
  }
  .p-10-sm {
    padding: 10px;
  }
  .w-100-sm {
    width: 100%;
  }
}
.sidebar {
  position: fixed;
  right: 0;
  height: 100dvh;
  border-left: 1px solid var(--color-slate-300);
  width: 600px;
  background: #fff;
  z-index: 2;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}
.sidebar.active {
  transform: translateX(0);
}

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

.title-spinner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
}

.popover-staff-choices {
  background-color: #fff;
  display: none;
  min-height: 50px;
  max-height: 300px;
  overflow-y: auto;
  position: fixed;
  width: 300px;
  z-index: 10000;
}
.popover-staff-choices.active {
  display: block;
}

.popover-staff-choice:hover {
  background-color: var(--color-slate-100);
}/*# sourceMappingURL=style.css.map */