@font-face {
  font-family: headerFont;
  src: url('/fonts/Giaza.otf');
}

.header, .headerFont {
  font-family: headerFont;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

.heading, .headingFont {
  font-family: headerFont;
  font-size: 2rem;
  line-height: 1.3;
  letter-spacing: -0.02rem;
  text-align: center;
}

.subheading, .subheadingFont {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500; /* Medium */
  letter-spacing: 0.8px;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 600px;
  margin: 1rem 0;
  text-align: center;
}

.bodyFont {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400; /* Regular */
  letter-spacing: 0.8px;
  line-height: 1.5;
}

/**/

:root {
  --primary: #d6d3cd;
  --primaryRGB: 214, 211, 205;
  --secondary: #171716;
  --secondaryRGB: 23, 23, 22;

  --border: rgba(255, 255, 255, 0.5);
  --shadow: 0 4px 20px 4px rgb(151, 151, 151);


  --background1: #d6d3cd;
  --backgroundRGB: 214, 211, 205;
  --background2: #171716;
  
  --text1: #171716;
  --text2: #d6d3cd;
  
  
  --accent: #171716;
  --accentRGB: 23, 23, 23;
  
  --glassmorphic: rgba(255, 255, 255, 0.1);
}

.wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg {
  width: 257px;
  height: 381px;
}

.svg #img {
  mask-image: url(/images/ABAA2.svg);
  mask-size: 257px 381px;
  mask-position: 0px 0px;
  mask-repeat: no-repeat;
  width: 257px;
  height: 381px;
  filter: blur(1px);
}

.logo-text {
  font-size: 48px;
  transform: scale(0);
  transition: transform 0.5s ease-out;
  display: block;
}

.logo-text.show {
  transform: scale(1);
}

/*--------*/

.homepage-logo-wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.homepage-logo {
  width: 350px;
  transform: scale(0);
}

@keyframes pop {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  40% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  90% {
    transform: scale(1.3);
    -webkit-transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

.homepage-logo.show {
  animation: pop 2s forwards;
}

/*--------*/

html {
  /* margin: 0; */
  /* width: 100vw; */
  /* height: 100%; */
  font-family: 'Montserrat', sans-serif;
  /* color: #00b1bd; */
  color: var(--secondary, #171716);
  font-size: 16px;
  position: relative;

  /* -ms-overflow-style: none;  /* IE and Edge */
  /* scrollbar-width: none;  /* Firefox */

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  /* padding: 0; */
  /* width: 100vw; */
  /* height: 100%; */
  /* background: url('/images/ABbackground.png') repeat left top, #bee9ed; */
  /* background: linear-gradient(var(--background1, #000), var(--background2, #111), var(--background1, #000)); */
  
  /* background: linear-gradient(var(--background1, #000), var(--background2, #111), var(--background1, #000)); */
  background: var(--primary);
  
  /* background-size: 100% 100%; */

  position: relative;
  /* overflow-x: hidden; */
  /* overflow-y: overlay; */

  /* -ms-overflow-style: none;  /* IE and Edge */
  /* scrollbar-width: none;  /* Firefox */

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.main-container {
  /* padding: 0; */
  /* margin: 0; */
  /* width: 100vw; */
  /* height: 100vh; */
  position: relative;
}

header {
  height: 8vh;
  width: 100%;
}

.header-section-wrapper {
  display: flex;
  justify-content: space-between;

  width: 100%;
  height: 8vh;

  position: fixed;
  top: 0;
  z-index: 900;

  background-color: rgba(var(--primaryRGB), 0.8);
  border-bottom: 1px solid var(--border);
}

.header-section {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.header-section.left, .header-section.right {
  width: 80px;
}

.header-section.main {
  width: 50%;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.open-nav {
  transform: translateX(0%);
}

a, a:link, a:visited, a:hover, a:hover, a:active {
  color: var(--secondary);
  text-decoration: none;
}

nav {
  background: var(--primary);
  border-left: 1px solid var(--border);
  position: fixed;
  right: 0;
  top: 8vh;
  height: 92vh;
  width: 70%;
  z-index: 990;
  font-family: 'Montserrat', sans-serif;
  /* text-transform: uppercase; */
  transform: translateX(100%);
  transition: all .5s ease-in-out;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin-top: 8rem;
}

nav ul a {
  padding: 15px 30px;
  display: block;
  width: 100%;
  font-weight: bold;
  font-size: 1.3rem;
  color: var(--secondary);
}

nav ul a:hover {
  background: var(--secondary);
  color: var(--primary);
}

.page-wrapper {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  gap: 16px;
  padding: 24px 16px;
  position: relative;
  transition: all .5s ease-in-out;
}

.container-base { /*--glassmorphism generator---*/
  background: var(--primary);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.container {
  display: flex;
  flex-direction: column;
  background: var(--primary);
  box-shadow: var(--shadow);
  border-radius: 20px;
  border: 1px solid var(--border);

  max-width: 600px;
  width: 100%;
  transition: all 0.5s;
  /* DO NOT USE transforms OR filters TO AVOID AFFECTING ANY CHILD ELEMENTS WITH display: fixed; */
}

.container:not(#schedule-container, #holiday-container, #services-container, .details, .appointments) {
  max-height: 70vh;
}

.container.minimised {
  transform: scale(0);
}

.container-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5%;
  padding-right: 5%;
}

.container-header-arrow {
  background: url(/images/icon-down.svg) no-repeat center / 100%;
  transform: rotate(-90deg);
  transition: all 0.3s ease-out;
  width: 35px;
  height: 35px;
}

.container-header-arrow.open {
  transform: rotate(0);
}

.container-view {
  position: relative;
  margin-bottom: 16px;
  overflow-x: hidden;
}

#book .container-view, .client.login, .client.register {
  overflow-y: overlay;
}

/*----HOME PAGE----*/

/* body:has(#home.page-wrapper) { */
  /* background-size: 100% 100%; */
/* } */

#home.page-wrapper {
  padding: 0;
  gap: 0;
  overflow-x: hidden;
  display: block;
  flex-direction: unset;
}

#home .hero-section {
  position: relative;
  overflow: hidden;
}

#home .hero-section .content {
  color: #fff;
}

/*--------HIGHLIGHTS-------*/

@keyframes highlightsScroll {
  to {
    transform: translate(calc(-50% + 0px));
  }
}

.scroller.highlights {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.9);
  overflow: hidden;
  position: relative;
  min-height: 80vh;
}

.highlights-inner {
  -webkit-mask: linear-gradient(90deg, 
                transparent 0%, 
                rgba(255, 255, 255, 1) 5%, 
                rgba(255, 255, 255, 1) 95%, 
                transparent 100%);
  mask: linear-gradient(90deg, 
         transparent 0%, 
         rgba(255, 255, 255, 1) 5%, 
         rgba(255, 255, 255, 1) 95%, 
         transparent 100%);
  animation: highlightsScroll 20s linear infinite;
  will-change: transform;
  position: relative;
  min-height: 40vh; /* Make taller to ensure full coverage */
}

.highlights-inner.reverse {
  animation: highlightsScroll 20s linear reverse infinite;
}

.highlight {
  scroll-snap-align: start;
  position: relative; /* Position context for the overlay */
}

.highlight::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2); /* Adjust opacity as needed */
  pointer-events: none; /* Allows clicks to pass through */
  z-index: 1; /* Places overlay above the image */
}

.highlight-image {
  object-fit: cover;
  width: 40vh;
  height: 100%;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative; /* Helps with stacking context */
}

/* Content as overlay */
.content {
  position: absolute; /* Position absolutely */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5; /* Higher z-index to appear above highlights */
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
}

.content .wrapper {
  margin: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 2.5rem;
  line-height: 1.5;
  letter-spacing: -0.05rem;
  text-align: center;
}

.hero-subheading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500; /* Medium */
  font-size: 1.3rem;
  line-height: 1.5;
  text-align: center;
}

.hero-section .cta {
  margin-top: 1rem;
  width: auto;
}

@media only screen and (min-width: 600px) {

  .hero-heading {
    font-size: 3rem;
    letter-spacing: -0.1rem;
  }
  
  .hero-subheading {
    font-size: 1.8rem;
  }

  .hero-section .cta {
    font-size: 1.5rem;
  }

}

.features-section {
  padding: 60px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  border-top: 1px solid var(--border);
}

.features-section .heading, .features-section .subheading {
  margin: 16px 12px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s;
}

.card-flexbox {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  max-width: 95vw;
  min-height: 365px;
  margin: 20px;
  opacity: 0;
  transform: translate(80%);
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

/* .card:hover .card-icon {
  height: 0;
}

.card:hover .card-text {
  height: 100%;
} */

.card.visible {
  transform: translate(0%);
  opacity: 1;
}

.card-icon {
  width: 100%;
  height: 180px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 125px;
  transition: all 0.3s ease-out;
}

.card-text {
  padding: 16px;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  line-height: 1.5;
  transition: all 0.3s ease-out;
}

.services-section {
  padding: 60px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid var(--border);
  gap: 32px;
}

.services-section .heading, .services-section .subheading {
  margin: 16px 12px;
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.3s ease-out;
}

.tile-flexbox {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 40px 0;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 112px;
  max-width: 95vw;
  height: 112px;
  margin: 12px;
  transition: all 0.3s ease-out, transform 0.1s ease-out;
  overflow: hidden;
}

.tile-scaler {
  /*
    A wrapper for .tile that holds the initial scale transition on scroll-into-view.
    This is to avoid any transition-delays on scroll-into-view affecting any touch/click transitions
  */
  transition: transform 0.3s ease-in-out;
  transform: scale(0);
  display: flex;
  justify-content: center;
  align-items: center;
}

.tile-scaler.visible {
  transform: scale(1);
}

.tile.hover .tile-text, .tile:hover .tile-text {
  display: flex;
  color: var(--primary);
}

.tile.open .tile-text {
  display: flex;
  height: 100%;
  background-color: var(--secondary);
  color: var(--primary);
}

.tile.hover .tile-icon, .tile:hover .tile-icon {
  background-size: 70%;
}

.tile.hover, .tile:active {
  transform: scale(0.95);
  box-shadow: var(--shadow);
}

.tile.open {
  width: 250px;
  max-width: 95vw;
  height: 250px;
}

.tile-scaler:has(.tile.open) {
  /*
    This is also styled as a compliment to .tile.open as this will instantly the space needed in flexbox
    before .tile completes height/width transition (to basically create smoother flex reshaping)
  */
  min-width: 250px;
  min-height: 250px;
}

.tile-icon {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  transition: all 0.3s ease-out;
}

.tile-text {
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  letter-spacing: 0.8px;
  background-color: var(--secondary);
  color: var(--primary);
  transition: all 0.3s ease-out;
}

.tile-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* Bold */
  letter-spacing: 1.2px;
  padding: 5px 5px;
}

.tile-description {
  display: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400; /* Medium */
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 12px;
}

.tile.open .tile-title {
  font-size: 1.2rem;
  margin-top: 16px;
}

.tile.open .tile-description {
  display: block;
  margin-bottom: 16px;
}

.review-section {
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  /* background-color: #00b1bd; */
  /* background-color: rgba(0, 177, 189, 0.8); */
  /* color: #00b1bd; */
  border-top: 1px solid var(--border);
  /* background: url('/images/review-bg-icon-megaphone.svg') no-repeat bottom left/150px, url('/images/review-bg-icon-like.svg') no-repeat 95% 15% / 75px; */
}

.review-section .heading, .review-section .subheading {
  margin: 16px 12px;
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.3s ease-out;
}

.review-flexbox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  width: 100%;
  padding-bottom: 16px;
}

/* .review-carousel { */
  /* min-height: 300px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex: 0 1 350px; */
/* } */

/* .block { */
  /* position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: rgba(25, 25, 25, 0.8);
  gap: 15px;
  width: 250px;
  max-width: 95vw;
  height: 300px;
  opacity: 0;
  translate: 150%;
  transform-origin: 100% 120%;
  transition: all 0.3s ease-in; */
/* } */

/*----*/

@keyframes reviewScroll {
  to {
    transform: translate(-100%);
  }
}

.review-carousel {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  padding: 50px 0;
  width: 100vw;
  overflow: hidden;
  /* -webkit-mask: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%); */
  /* mask: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%); */
  mask: radial-gradient(circle, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask: radial-gradient(circle, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
}

.review-carousel-inner {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
  max-height: 80vh;
  min-width: 100vw;
  gap: 16px;
  animation: reviewScroll 20s linear infinite;
}

.block {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 400px;
  gap: 16px;
}

@media only screen and (max-width: 800px) {
  
  .review-carousel-inner {
    min-width: 1200px;
  }

  .block {
    max-width: 80vw;
  }

}

/*----*/

.block.visible {
  opacity: 1;
  translate: 0%;
}

.block-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1rem;
  padding: 30px 30px 0 30px;
}

.block-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500; /* Medium */
  font-style: italic;
  font-size: 0.9rem;
  padding: 0 30px 30px 30px;
}

.buttons-spacer {
  display: none;
}

.buttons {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: flex-end;

  flex: 0 0.5 100px;
}

.buttons .btn {
  margin: 5px;
}

@media only screen and (min-width: 600px) {

  .buttons-spacer {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: flex-start;
    align-items: flex-end;

    flex: 0 0.5 100px;
  }

}

.faq-section {
  padding: 60px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  /* background-color: #00b1bd; */
  /* background-color: rgba(145, 212, 217, 0.8); */
  border-top: 1px solid var(--border);
  transition: all 0.3s ease-in;
}

.faq-section .heading, .faq-section .subheading {
  margin: 16px 12px;
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.3s ease-out;
}

.faq-category-list {
  width: 100%;
  max-width: 900px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 24px;
}

.faq-category {
  width: 100%;
  opacity: 0;
  transform: translate(70%);
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.faq-category.visible {
  transform: translate(0%);
  opacity: 1;
}

.faq-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

.faq-category-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1.3rem;
  letter-spacing: 1.2px;
}

.faq-category-arrow {
  background: url('/images/icon-down.svg') no-repeat center/100%;
  transform: rotate(-90deg);
  transition: all 0.3s ease-out;
  width: 30px;
  height: 30px;
}

.faq-category-header.open .faq-category-arrow {
  transform: rotate(0);
}

.faq-category-content {
  display: block;
  height: 100%;
  /* margin-bottom: 12px; half of .faq-category-header padding */
}

.faq-list {
  display: flex;
  flex-direction: column;
  /* gap: 12px; */
}

.faq {
  border-top: 2px solid var(--border);
}

.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  /* background-color: rgba(145, 212, 217, 0.2); */
  /* color: #00b1bd; */
}

.faq-header.open {
  /* background-color: #00b1bd; */
  /* background-color: rgba(50, 50, 50, 0.8); */
  background-color: rgb(191, 186, 182);
}

.faq .question {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* Bold */
}

.faq-view {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  overflow: hidden;
}

.faq-section a, .faq-section a:link, .faq-section a:visited {
  color: var(--accent);
  text-decoration: underline;
  font-weight: bold;
}

.faq-section a:hover, .faq-section a:active {
  text-decoration: underline;
}

@media only screen and (min-width: 600px) {

  .faq-category-header {
    padding: 16px 36px;
  }

  .faq-category-arrow {
    width: 50px;
    height: 50px;
  }

  .faq-header, .faq-view {
    padding: 20px 36px;
  }

  .faq-view {
    padding: 20px 36px;
  }

}

.cta-section {
  padding: 60px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  border-top: 1px solid var(--border);
  transition: all 0.3s ease-in;
}

.cta-section .heading, .cta-section .subheading {
  margin: 16px 12px;
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.3s ease-out;
}

.cta-content {
  margin: 16px 12px;
}

footer {
  /* below bg-color/font-color has been commented out for the beige color update */
  /* background-color: rgba(20, 20, 20, 0.8); */
  /* color: white; */
  padding: 48px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--border);
}


footer .links-section {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

footer .links-section a:hover {
  text-decoration: underline;
}

footer .section {
  max-width: 95vw;
  width: 100%;
  margin: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

footer .title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* Bold */
  letter-spacing: 2.4px;
}

footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

footer ul li {
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

footer .copyright-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

footer #logo-section {
  display: flex;
  justify-content: center;
  align-items: center;
}

footer #footer-logo {
  width: 150px;
}

footer .copyright-line {
  display: flex;
}

@media only screen and (min-width: 600px) {

  footer .section {
    width: auto;
  }

}

.heading.visible, .subheading.visible {
  opacity: 1;
  transform: scale(1);
}

/*----MENU ICON----*/

#menu-icon {
  width: 40px;
  height: 25px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#menu-icon span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: var(--secondary);
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#menu-icon span:nth-child(1) {
  top: 0px;
}

#menu-icon span:nth-child(2), #menu-icon span:nth-child(3) {
  top: 10px;
}

#menu-icon span:nth-child(4) {
  top: 20px;
}

#menu-icon.open span:nth-child(1) {
  top: 10px;
  width: 0%;
  left: 50%;
}

#menu-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#menu-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#menu-icon.open span:nth-child(4) {
  top: 10px;
  width: 0%;
  left: 50%;
}

/*----*/


/*-----------ABOVE IS EDITED FROM INITIAL STYLESHEET----------*/


.section-title {
  font-family: headerFont;
  font-weight: normal;
  font-size: 2.2rem;
  margin: 16px 0;
}

/* .container-base {
  color: #00b1bd;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
} */

.subcontainer {
  width: 100%;
  /* background: rgba(50, 50, 50, 0.4); */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.subcontainer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  padding: 2px 3% 2px 5%;
}

.subcontainer-header .left-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.subcontainer-header .right-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}

.subcontainer-name {
  font-weight: bold;
  font-size: 1.1rem;

  overflow-x: overlay;
}

.subcontainer-header .categoryName {
  font-size: 1.1rem;
  font-weight: bold;

  min-width: 5ch;
  padding: 0;

  overflow-x: overlay;
}

.subcontainer-header .add {
  background: no-repeat center/80% url('/images/icon-add.svg');
  width: 35px;
  height: 35px;
  transition: all 0.1s;
}

.subcontainer-header .cancel {
  background: no-repeat center/80% url('/images/icon-cancel.svg');
  width: 35px;
  height: 35px;
  transition: all 0.1s;
}

.subcontainer-header .confirm {
  background: no-repeat center/80% url('/images/icon-tick.svg');
  width: 35px;
  height: 35px;
  transition: all 0.1s;
}

.subcontainer-header .edit {
  background: no-repeat center/70% url('/images/icon-edit.svg');
  width: 35px;
  height: 35px;
  transition: all 0.1s;
}

.subcontainer-header .delete {
  background: no-repeat center/85% url('/images/icon-delete.svg');
  width: 35px;
  height: 35px;
  transition: all 0.1s;
}

.subcontainer-header .edit.hover, .subcontainer-header .delete.hover, .subcontainer-header .add.hover {
  transform: scale(0.9);
}

.subcontainer-arrow {
  width: 35px;
  height: 35px;
  background: no-repeat center/90% url('/images/icon-down.svg');
  transition: all 0.2s linear;
}

.subcontainer:not(.open) .subcontainer-arrow {
  rotate: -90deg;
}

.subcontainer-arrow.hover {
  transform: scale(0.8);
}

.subcontainer-view {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

#add-category.subcontainer .subcontainer-header {
  background-color: transparent;
}

#add-category.subcontainer #newCategoryLabel {
  font-weight: bold;
}

.field-value {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;

  text-align: center;
  background-color: transparent;

  width: 100%;
  padding: 2px 10px;
}

.tab-list {
  position: relative;
  width: auto;
  padding: 1px 0 0 0;
  /* background-color: #91d4d9; */
  border-top: 1px solid var(--border);
  width: 100%;
}

.empty-list-notice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 180px;
  padding: 24px 12px 0px 12px;
  /* background-color: white; */
}

.tab-wrapper {
  position: relative;
  display: flex;

  overflow: auto;
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-snap-align: start;
  scroll-behavior: auto;

  overscroll-behavior-x: none;

  width: 100%;

  border-bottom: 1px solid var(--border);

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.subcontainer .tab-wrapper {
  border-color: var(--border);
}

.tab-wrapper::-webkit-scrollbar {
  display: none;
  /* overflow: auto; */
  /* overflow-x: scroll; */
}

.tab-wrapper .tab {
  border: none;
}

.tab {
  display: flex;
  justify-content: space-between;

  min-height: 65px;
  min-width: 100%;

  border-bottom: 1px solid var(--border);
  overflow: hidden;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  transition: transform 0.1s;
}

.tab.appointment.closed.hover, .tab.appointment.closed:active {
  transition: all 0.1s;
  transform: scale(0.95);
}

.swipe-edit {
  min-height: 65px;
  min-width: 65px;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background-color: #fdd96e;
}

.swipe-delete {
  min-height: 65px;
  min-width: 65px;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background-color: #ff878b;

  scroll-snap-type: x mandatory;
  scroll-snap-align: end;

  /* border-radius: 0px 25px 25px 0px; */

}

.edit-icon, .delete-icon {
  transition: all 0.1s;

  width: 50%;
  height: 50%;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.edit-icon.hover, .edit-icon:active, .delete-icon.hover, .delete-icon:active {
  transform: scale(0.8);
}

.opacity-blur {
  display: flex;
  justify-content: center;
  align-items: center;

  text-align: center;
  background: url('/images/icon-animation-infinity.svg'), rgba(var(--secondaryRGB), 0.2);
  background-size: 80px 80px;
  background-position: center;
  background-repeat: no-repeat;

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
}

.opacity-blur.hidden {
  display: none;
}

.opacity-blur .message {
  font-weight: bold;
}

.base {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
}

.blur {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.2s;
}

#myAppointments .blur {
  z-index: 998;
}

#datetime-window .base {
  z-index: 999;
}

#datetime-window .blur {
  z-index: 998;
}

#slidePane-wrapper .base {
  z-index: 989;
  transform: none;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

#slidePane-wrapper .blur {
  z-index: 988;
}

#appointment-window .blur {
  z-index: 978;
}

#appointment-window .base {
  z-index: 979;
}

#holiday-window .base {
  z-index: 979;
}

#holiday-window .blur {
  z-index: 978;
}

#service-window .base {
  z-index: 979;
}

#service-window .blur {
  z-index: 978;
}

#prompt-window .base {
  z-index: 999;
}

#prompt-window .blur {
  z-index: 998;
}

.prompt {
  width: 80vw;
  max-width: 600px;
  color: var(--text1);
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--primary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.2s ease-in;
  transform: scale(1);
  overflow: hidden;
}

.prompt.minimised {
  transform: scale(0);
}

.prompt-view {
  display: flex;
  justify-content: flex-start;
  /* background: var(--accent);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); */
  padding: 0 6%;
  text-align: left;
  position: relative;
}

.prompt-footer {
  display: flex;
  justify-content: center;
  padding: 16px 12px;
  gap: 12px;
  font-weight: bold;
  border-top: 1px solid var(--border);
  /* background: rgba(50, 50, 50, 0.4);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); */
  /* backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); */
}

.window {
  display: flex;
  flex-direction: column;

  position: relative;

  /* background: rgba(50, 50, 50, 0.4);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); */
  background: var(--primary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  width: 90vw;
  max-width: 600px;
  max-height: 90vh;

  border: 1px solid var(--border);
  border-radius: 20px;

  transition: all 0.2s ease-in;
  transform: scale(1);

  overflow: hidden;
}

.window.minimised {
  transform: scale(0);
}

.window-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  position: relative;
  overflow: hidden;

  padding-left: 6%;
  padding-right: 6%;
  /* background: var (--accent); */
  height: 65px;
}

.btn-close.hover {
  transform: scale(0.8);
}

.window-view {
  position: relative;
  padding: 12px;

  display: flex;
  flex-direction: column;
  gap: 8px;

  height: 100%;
  overflow: overlay;

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.window-footer {
  display: flex;
  justify-content: space-around; /* used to be center until schedule appt details */
  padding: 10px;
}

/*----UPDATED BTN NAMING CONVENTIONS----*/

/*
----Define once----
cta: defines shape, padding, border, width and height

primary: bg-color #00b1bd;, font white
secondary: bg-color white, font #00b1bd;

disabled: opacity 50%
raise: box shadow

----Define for each page (due to positioning)----

hover (with raise): opacity 80%, position, box shadow
hover (w/out raise): opacity 80%
*/

.cta {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;

  font-family: headerFont;
  font-size: 1.2rem;
  letter-spacing: 0.8px;
  text-decoration: none;
  text-align: center;

  width: 100%;
  height: 2.5rem;
  position: relative;

  padding: 2px 10px;

  border-style: solid;
  border-width: thin;
  border-color: var(--border);
  border-radius: calc(1rem/1.6);

  transition: transform 0.1s;
  transform: scale(1);

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  overflow: hidden;
}

.cta.hover:not(.disabled), .cta:not(.disabled):active {
  transform: scale(0.9);
}

.cta.primary {
  /* background-color: var(--accent); */
  /* color: var(--text1); */
  background-color: var(--secondary);
  color: var(--primary);
  border-style: none;
}

.cta.primary.disabled {
  border-style: solid;
}

/* .cta.primary:not(.disabled)::before {
  content: "";
  display: flex;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
  background: linear-gradient(135deg, rgba(var(--accentRGB), 0.7) 20%, rgba(var(--accentRGB), 1) 50%, rgba(var(--accentRGB), 0.7) 80%);
  background-size: 50% 100%;
  animation: gradient 4s linear infinite;
} */


.cta.disabled {
  opacity: 50%;
}

.cta.raise {
  box-shadow: 0px 1px 8px grey;
}

.cta.raise.hover, .cta.raise:active {
  box-shadow: 0px 1px 5px grey;
}

.bgGradient {
  position: relative;
  overflow: hidden;
}

.bgGradient:not(.disabled, .unavailable)::before {
  content: "";
  display: flex;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
  background: linear-gradient(135deg, rgba(var(--accentRGB), 0.8) 20%, rgba(var(--accentRGB), 1) 50%, rgba(var(--accentRGB), 0.8) 80%);
  /* background: radial-gradient(circle at center, rgba(var(--accentRGB), 0.2) 20%, rgba(var(--accentRGB), 0.1) 80%); */
  background-size: 50% 100%;
  animation: gradient 4s linear infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
    /* scale: 1.5; */
  }
	50% {
		background-position: 50% 50%;
    /* scale: 1; */
	}
	100% {
		background-position: 100% 50%;
    /* scale: 1.5; */
	}
}

@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
    /* scale: 1.5; */
  }
	50% {
		background-position: 50% 50%;
    /* scale: 1; */
	}
	100% {
		background-position: 100% 50%;
    /* scale: 1.5; */
	}
}

@-moz-keyframes gradient {
  0% {
    background-position: 0% 50%;
    /* scale: 1.5; */
  }
	50% {
		background-position: 50% 50%;
    /* scale: 1; */
	}
	100% {
		background-position: 100% 50%;
    /* scale: 1.5; */
	}
}

/*--------------------------------------*/

.btn {
  min-width: 35px;
  height: 35px;

  border-style: solid;
  border-width: thin;
  border-color: var(--border);
  border-radius: 10px;

  transition: all 0.1s;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn.hover:not(.disabled), .btn:not(.disabled):active {
  transform: scale(0.8);
}

.btn.disabled {
  opacity: 0.4;
}

.btn.new {
  background: no-repeat center/90% url('/images/icon-add.svg');
}

.btn.new.hover, .btn.new:active {
  background: no-repeat center/90% url('/images/icon-add-color.svg'), var(--secondary);
}

.btn.close {
  background: no-repeat center/80% url('/images/icon-cancel.svg');
}

.btn.close:active {
  background: no-repeat center/80% url('/images/icon-cancel-color.svg'), var(--secondary);
}

.btn.spacer {
  border-color: transparent;
  background: none;
}

.btn.reload {
  background: no-repeat center/70% url('/images/icon-reload.svg');
  height: 35px;
  width: 35px;
}

.btn.reload.hover, .btn.reload:active {
  background: no-repeat center/70% url('/images/icon-reload-color.svg'), var(--secondary);
  transform: scale(0.8);
}

.btn.next {
  background: no-repeat center/80% url('/images/icon-next.svg');
}

.btn.prev {
  background: no-repeat center/80% url('/images/icon-prev.svg');
}

.btn.next:active {
  background: no-repeat center/80% url('/images/icon-next-color.svg'), var(--secondary);
}

.btn.prev:active {
  background: no-repeat center/80% url('/images/icon-prev-color.svg'), var(--secondary);
}

.back {
  background: no-repeat center/80% url('/images/icon-prev.svg');
}

.link {
  font-weight: bold;
  transition: all 0.1s;
  color: var(--accent);
  cursor: pointer;
}

.link.hover, .link:hover, .link:active {
  text-decoration: underline;
}

.cta.auto-width {
  width: auto;
}

.cta.wide {
  width: 100%;
}

.cta.small {
  height: 30px;
  font-size: 1rem;
}

.field-section {
  position: relative;

  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  gap: 8px;

  padding: 16px;

  border-style: solid;
  border-width: thin;
  border-color: var(--border);
  border-radius: 12px;
}

.field-section-title {
  margin: 5px 0 0 10px;
  font-weight: bold;
}

.time-field {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.date-field {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/*-----------STAFF - HOURS (UPDATED 31/01/2023)--------*/
/*--------------------(AND AGAIN ON 08/06/2023)--------*/

#hours #shift-time-container.open #shift-time-container-arrow {
  transform: rotate(0);
}

#hours #holiday-container .title-wrapper {
  width: 100%;
  display: flex;
  border-top: 1px solid var(--border);
}

#hours .shift-time.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 12px;
}

#hours .shift-time .title-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#hours .shift-time .field-title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#hours .shift-time .field-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#hours #shift-time-container:not(.open) .field-wrapper:not(.today) {
  display: none;
}

#hours .shift-time .day-title {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  top: 0;
  right: calc(100% + 24px);
  height: 100%;
}

#hours .shift-time .subcontainer {
  overflow: visible;
}

#hours .shift-time .subcontainer-header, #hours .shift-time .subcontainer-view {
  display: flex;
  justify-content: center;
  padding: 8px;
  gap: 8px;
}

#hours .shift-time .slider {
  position: absolute;
  left: calc(100% + 24px);
}

.slider {
  position: relative;
  width: 32px;
  height: 20px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.5));
  border-radius: 6px;
  transition: all 0.3s linear;
}

.slider.off {
  background: var(--accent);
}

.slider.on {
  background: none;
}

/* set base props only, not position */

.slider .controller {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 12px;
  border-radius: 4px;
  background-color: #DDD;
  z-index: 1;
  transition: all 0.3s ease-out;
}

.slider.on .controller {
  left: calc(100% - 14px); /* calc(100% - half of the controller's width */
}

.slider.off .controller {
  left: 2px;
}

#hours .shift-time .field {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-style: solid;
  border-width: thin;
  border-color: var(--border);
  padding: 4px 8px;
  width: 48px;
  height: 28px;
  transition: all 0.1s;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: bold;
}

#hours .shift-time .field.hover:not(.disabled), #hours .shift-time .field:not(.disabled):active {
  background: rgba(var(--secondaryRGB), 0.5);
  color: var(--secondary);
  transform: scale(0.9);
}

#hours .shift-time .field.disabled {
  opacity: 0.5;
}

#hours .shift-time .start.field {
  border-radius: 12px 3px 3px 12px;
  margin-right: 1px;
}

#hours .shift-time .end.field {
  border-radius: 3px 12px 12px 3px;
  margin-left: 1px;
}

#hours .shift-time .value {
  display: flex;
  justify-content: center;
  align-items: center;
}

#hours .shift-time .start .value {
  border-radius: 12px 3px 3px 12px;
}

#hours .shift-time .end .value {
  border-radius: 3px 12px 12px 3px;
}

#hours .tab-list-title-left {
  width: 50%;
  padding-left: 5%;
}

#hours .tab-list-title-right {
  width: 50%;
  padding-left: 5%;
}

#hours .date-icon, #hours .time-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

#hours .data-field.hover, #hours .data-field:active {
  transform: scale(0.95);
  background: var(--secondary);
  color: var(--primary);
}

#shift-time-container .container-view {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

#holiday-container .tab {
  display: flex;
  gap: 5px;

  min-width: 100%;

  font-weight: bold;

  scroll-snap-align: start;
}

#holiday-container .section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;

  width: 80%;
  margin-left: 10px;

  /* font-size: 12px; */
  /* NOTE: This determines date/time text align in holiday tabs */
}

#holiday-container .icon-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}

#holiday-container .icon-wrapper.time {
  font-size: 1.1rem;
}

#holiday-window .base {
  z-index: 997;
}

#holiday-window .blur {
  z-index: 996;
}

#datetime-window .base {
  z-index: 999;
}

#datetime-window .blur {
  z-index: 998;
}

#holiday-window .spacer {
  height: 1rem;
}

#edit-holiday-message, #new-holiday-message {
  font-weight: bold;
  margin-top: 10px;
}

.appt-conflict {
  border-style: solid;
  border-radius: 12px;
  border-color: var(--border);
  border-width: thin;

  padding: 8px;
  max-height: 35vh;
  display: block;

  font-weight: bold;

  overflow: hidden;
}

.appt-conflict::-webkit-scrollbar {
  overflow-y: scroll;
  scrollbar-width: none;
}

.appt-conflict .message {
  text-align: center;
  padding: 5px;
  font-size: 1.1rem;
}

.appt-conflict .table {
  border-top-style: solid;
  border-top-color: var(--border);
  border-top-width: thin;

  max-height: 25vh;
  display: block;
  width: 100%;

  overflow: auto;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
}

.appt-conflict .table::-webkit-scrollbar {
  overflow-y: scroll;
  scrollbar-width: none;
}

.appt-conflict .row {
  display: flex;
  justify-content: space-between;
  gap: 4px;

  margin: 5px;
  padding: 5px 8px;

  border-style: solid;
  border-radius: 8px;
  border-width: thin;
  border-color: var(--border);
}

.appt-conflict .row.recent {
  background: #ff878b;
}

.appt-conflict .date {
  display: block;
  text-align: right;
}

.appt-conflict .times {
  display: block;
  text-align: left;
}

.date-order-message {
  text-align: center;
}

/*----CLASSES - DAY----*/

#day-window {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#day-window-view {
  overflow: auto;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  scroll-snap-type: y proximity;
  scroll-snap-align: start;

  margin: 4px 0;

  max-height: 50vh;
}

#day-view {
  display: grid;
  /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
  grid-template-columns: repeat(auto-fit, minmax(4rem, auto));
  row-gap: 5px;
  /* column-gap: 5px; */
  justify-items: center;
}

#day-view .time {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 6px 10px;
  width: 3ch;

  font-weight: bold;

  border-radius: calc(1rem/1.6);
  border-style: solid;
  border-width: thin;
  border-color: var(--border);

  scroll-snap-align: start;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  transition: all 0.1s;
}

#day-view .time.hover:not(.unavailable), #day-view .time:not(.unavailable):active {
  transform: scale(0.8);
}

#day-view > div.selected {
  background: var(--secondary);
  color: var(--primary);
}

#day-view > div.unavailable {
  opacity: 0.5;
}

#day-window .window-footer {
  padding-top: 10px;
}

/*----CLASSES - CAL----*/

#cal-window {
  display: none;
  position: relative;
}

#cal-window-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.calendar {
  font-weight: bold;
  width: 100%;
  max-width: 360px;
  scroll-snap-align: start;
}

.calendarHeader {
  display: flex;
}

.calendarNav {
  display: flex;
  justify-content: space-around;
  align-items: center;

  width: 100%;

  margin: 8px 0;

  /* border-style: solid;
  border-width: thin;
  border-radius: 25px;
  border-color: #00b1bd; */

  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* Bold */
}

.cal-prev, .cal-next {
  border-style: solid;
  border-radius: 25%;
  border-width: thin;
  border-color: var(--border);

  width: 35px;
  height: 35px;

  display: flex;
  justify-content: center;
  align-items: center;

  transition: all 0.1s;
}

.cal-prev.disabled, .cal-next.disabled {
  opacity: 0.5;
}

.cal-prev {
  background: url('/images/icon-prev.svg');
  background-size: 30px 30px;
  background-position: center;
  background-repeat: no-repeat;
}

.cal-next {
  background: url('/images/icon-next.svg');
  background-size: 30px 30px;
  background-position: center;
  background-repeat: no-repeat;
}

/* .cal-prev:active, .cal-next:active {
  background-color: #00b1bd;
  color: white;
} */

.cal-prev.hover, .cal-prev:active {
  transform: scale(0.9);
  background: url('/images/icon-prev-color.svg'), var(--secondary);
  background-size: 30px 30px;
  background-position: center;
  background-repeat: no-repeat;
}

.cal-next.hover, .cal-next:active {
  transform: scale(0.9);
  background: url('/images/icon-next-color.svg'), var(--secondary);
  background-size: 30px 30px;
  background-position: center;
  background-repeat: no-repeat;
}

.calendarMY {
  position: relative;
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calendarMain {
  margin-top: 8px;
}

.calendarDaysOfWeek {
  display: grid;
  grid-template-columns: 14% 14% 14% 14% 14% 14% 14%;
  justify-content: center;
  column-gap: 0; /* maintain same value as .calendarDates column-gap */
  text-align: center;
  margin: 2px 0;
  width: 100%;
}

.calendarDates {
  display: grid;
  grid-template-columns: 14% 14% 14% 14% 14% 14% 14%;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
  column-gap: 0; /* maintain same value as .calendarDaysOfWeek column-gap */
  row-gap: 3px;
  width: 100%;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*----------INLINE CALENDAR----------*/

.calendar.inline .calendarNav {
  justify-content: space-between;
}

.calendar.inline .calendarNav .week {
  width: 100%;
  text-align: center;
}

.calendar.inline .calendarNav .prev, .calendar.inline .calendarNav .next {
  min-width: 30px;
  height: 30px;
  border-radius: 8px;
  margin: 0 8px;
}

.calendarScrollOuter {
  width: 100%;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 10px 0;
  display: grid;
  column-gap: 8px;
}

.calendarScrollOuter.weeks1 {
  grid-template-columns: 100%;
}

.calendarScrollOuter.weeks2 {
  grid-template-columns: 100% 100%;
}

.calendarScrollOuter.weeks3 {
  grid-template-columns: 100% 100% 100%;
}

.calendarScrollOuter.weeks4 {
  grid-template-columns: 100% 100% 100% 100%;
}

.calendarScrollOuter.weeks5 {
  grid-template-columns: 100% 100% 100% 100% 100%;
}

.calendarScrollOuter.weeks6 {
  grid-template-columns: 100% 100% 100% 100% 100% 100%;
}

.calendarScrollOuter.weeks7 {
  grid-template-columns: 100% 100% 100% 100% 100% 100% 100%;
}

.calendarScrollOuter.weeks8 {
  grid-template-columns: 100% 100% 100% 100% 100% 100% 100% 100%;
}

.calendarScrollOuter.weeks9 {
  grid-template-columns: 100% 100% 100% 100% 100% 100% 100% 100% 100%;
}

.calendarScrollOuter.weeks10 {
  grid-template-columns: 100% 100% 100% 100% 100% 100% 100% 100% 100% 100%;
}

.calendarScrollOuter.weeks11 {
  grid-template-columns: 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100%;
}

.calendarScrollOuter.weeks12 {
  grid-template-columns: 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100%;
}

.calendarScrollOuter.weeks13 {
  grid-template-columns: 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100%;
}

.calendarScrollOuter.weeks14 {
  grid-template-columns: 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100%;
}

.calendarScrollInner {
  width: 1200%;
  display: flex;
}

.calendarWeek {
  display: flex;
  justify-content: space-evenly;
  gap: 2px;

  width: 100%;

  scroll-snap-align: start;
  scroll-snap-stop: always;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*----------*/

.cal-date {
  position: relative;
  padding: 0;
  /* width: 40px;
  height: 40px; */
  /* width: calc(90% - 0.1rem); */
  width: calc(2.5rem - calc(2 * 0.1rem));
  max-width: 2.5rem;
  height: 2.5rem;
  border-radius: 25%;
  border-style: solid;
  border-width: thin;
  border-color: var(--border);
  overflow: hidden;

  transition: all 0.1s;
}

.cal-date.disabled {
  opacity: 0.5;
}

.cal-date.today {
  background-color: rgba(var(--accentRGB), 0.2);
}

.cal-date.hover:not(.disabled), .cal-date:not(.disabled):active {
  transform: scale(0.9);
}

.cal-non-date {
  padding: 0;
  /* width: calc(90% - 0.1rem); */
  width: calc(2.5rem - calc(2 * 0.1rem));
  max-width: 2.5rem;
  height: 2.5rem;
  border-radius: 25%;
}

.cal-date-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.cal-date.selected {
  background: var(--secondary);
  color: var(--primary);
}

.availability {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 15%;
  z-index: 1;
}

.availability.red {
  background-color: rgb(200, 0, 0);
}

.availability.orange {
  background-color: orange;
}

.availability.green {
  background-color: chartreuse;
}

/*----STAFF - SCHEDULE----*/

#schedule .btn-wrapper {
  display: flex;
  gap: 10px;
}

#schedule .container-view {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* STAFF - SCHEDULE (nav) */

.schedule {  /* NOTE: ADDED 31/01/2023 FOR page-container */
  width: 100%;
}

.schedule-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  font-weight: bold;
}

.schedule-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
}

.schedule-view {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.schedule-cal {
  border-style: solid;
  border-radius: 10px;
  border-width: thin;
  border-color: var(--border);

  /* width: 150px;
  height: 25px; */
  padding: 8px 10px;

  /* font-size: 1.2rem; */

  display: flex;
  justify-content: center;
  align-items: center;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  transition: all 0.1s;
}

.schedule-cal.today {
  background-color: rgba(var(--secondaryRGB), 0.8);
  color: var(--primary);
}

.schedule-cal.hover, .schedule-cal:active {
  transform: scale(0.9);
  background-color: var(--secondary);
  color: var(--primary)
}

.schedule-prev, .schedule-next {
  border-style: solid;
  border-radius: 10px;
  border-width: thin;
  border-color: var(--border);

  width: 35px;
  height: 35px;

  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  transition: all 0.1s;
}

.schedule-prev {
  background: url('/images/icon-prev.svg');
  background-size: 30px 30px;
  background-position: center;
  background-repeat: no-repeat;
}

.schedule-next {
  background: url('/images/icon-next.svg');
  background-size: 30px 30px;
  background-position: center;
  background-repeat: no-repeat;
}

.schedule-prev.hover, .schedule-prev:active {
  transform: scale(0.9);
  background: url('/images/icon-prev-white.svg');
  background-size: 30px 30px;
  background-position: center;
  background-repeat: no-repeat;
}

.schedule-next.hover, .schedule-next:active {
  transform: scale(0.9);
  background: url('/images/icon-next-white.svg');
  background-size: 30px 30px;
  background-position: center;
  background-repeat: no-repeat;
}

/* STAFF - SCHEDULE (appointment list) NEW (13.02.2023) */

#schedule .tab:not(.service) {
  display: block;
  position: relative;

  width: 100%;
  height: unset;
  min-width: unset;
  min-height: 65px;

  overflow: hidden;

  background: var(--primary);
  border: none;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#schedule .tab.open {
  z-index: 979;
  border: 1px solid var(--border);
}

#schedule .tab .summary-view {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 65px;
  border-bottom: 1px solid var(--border);
}

#schedule .tab.open .summary-view .location-tag {
  display: none;
}

#schedule .tab .summary-view .top {
  order: 1;

  display: flex;
  gap: 8px;
  position: relative;

  width: 70%;
  height: 40%;
  padding-left: 5%;

  font-weight: bold;
  font-size: 1.1rem;

  transition: all 0.1s;
}

#schedule .tab.open .summary-view .top {
  font-size: 1.2rem;
}

#schedule .tab .summary-view .bottom {
  order: 2;

  position: relative;

  width: 70%;
  height: 30%;
  padding-left: 5%;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom-left-radius: 25px;
  
  font-size: 0.9rem;
  
  transition: all 0.1s;
}

#schedule .tab .side {
  order: 3;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 25%;
  height: 100%;
  padding-right: 5%;

  font-weight: bold;
  font-size: 1.2rem;
}

#schedule .tab .full-view {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;

  /* font-size: 1.1rem; */
  font-weight: bold;
}

#schedule .tab .full-view .section {
  padding: 3% 3%;
}

#schedule .tab .top.section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2px;
  width: 100%;

}

#schedule .tab .top.section .left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5px;
}

#schedule .tab .top.section .right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 5px;

  -webkit-user-select: auto; /* Safari */
  -ms-user-select: auto; /* IE 10 and IE 11 */
  user-select: auto; /* Standard syntax */
}

#schedule .tab .middle.section {
  display: flex;
  flex-flow: row-reverse wrap;
  align-items: center;

  width: 100%;

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

#schedule .tab .middle.section .services {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  gap: 5px;
}

#schedule .tab .middle.section .service {
  display: flex;
  justify-content: center;
  align-items: center;

  font-weight: bold;
  text-align: center;

  padding: 4px 12px;

  /* border: 1px solid var(--border); */
  border-radius: 40px;
  background: var(--secondary);
  color: var(--primary);

  animation: gradient 4s linear infinite;
}

#schedule .tab .lower.section {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
}

#schedule .tab .lower.section .left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5px;
}

#schedule .tab .lower.section .right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 5px;
}

#schedule .tab .lower.section .price {
  font-size: 1.2rem;
}

#schedule .tab .footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 5px;

  padding: 8px;
  width: 100%;

  border-top: 1px solid var(--border);
}

#schedule .tab .left-to-pay-label, #schedule .tab .checkout-reference-label {
  white-space: nowrap;
  padding: 4px 8px;
}

#schedule .tab .left-to-pay-data {
  font-size: 1rem;
}

#schedule .tab .checkout-reference-label, #schedule .tab .checkout-reference-data {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
}

#schedule .tab .footer .cta {
  width: 100%;
}

/* STAFF - SERVICES (services-list) */

#services #add-category {
  margin-bottom: 16px;
}

#services .container-view {
  display: flex;
  justify-content: center;
  margin: 0;
}

#services-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 12px;
  background-color: transparent;
}

#services .tab-wrapper {
  scroll-snap-type: x mandatory;
  scroll-snap-align: start;
}

#services .tab {
  display: flex;
  justify-content: space-between; /**/
  align-content: center;
  gap: 8px;

  min-width: 100%;

  scroll-snap-type: x mandatory;
  scroll-snap-align: start;
}

#services .tab .main {
  order: 1;

  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: center;

  gap: 4px;
  width: 65%;
  padding-left: 12px;
}

#services .tab .service-name {
  font-weight: bold;

  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 100%;
}

#services .tab .location-wrapper {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

#services .tab:has(.service-name.available) {
 opacity: 1;
}

#services .tab:has(.service-name.unavailable) {
  opacity: 0.5;
}

#services .tab .side {
  order: 2;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;

  width: 27%;
  padding-right: 12px;

  font-size: 0.9rem;
  font-weight: bold;
  text-align: right;
}

#services .tab .side div {
  box-sizing: border-box;
}

/*------------STAFF - SERVICES (service window)------------*/

#services #service-window .window-view {
  font-weight: bold;
  max-height: 60vh;
  overflow-y: scroll;
}

#services #service-window .field-value, #services #service-window .field-input {
  font-size: 1rem;
}

/*------------NAME------------*/

#services #service-window .field-value.name {
  width: 10ch;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
  outline: none;
  border-style: none;
}

/*------------DURATION------------*/

#services #service-window .duration-unit {
  position: relative;
  z-index: 2;
  text-align: left;
  margin-right: 1ch;
}

#services #service-window .field-input.duration {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;

  min-width: 1.5ch;
  width: auto;
  max-width: 3ch;

  border-style: none;
  outline: none;

  text-align: center;

  padding: 0;
  margin: 0 1ch;
}

/*------------PRICE------------*/

#services #service-window .field-input.price {
  min-width: 2ch;
  width: auto;
  max-width: 5ch;

  border-style: none;
  outline: none;
  text-align: center;

  padding: 0;
  margin: 0 1ch;
}

/*------------CATEGORY------------*/

#services .category-data-field:has(.dropdown:not(.open)):active {
  transition: all 0.1s ease-out;
  transform: scale(0.9);
  background: var(--secondary);
  color: var(--primary);
}

/*------------AVAILABLE------------*/

#services #service-window .field.available {
  width: 40px;
  display: flex;
  align-items: center;
}

#services #service-window .field.available .tick {
  width: 22px;
  height: 22px;

  display: flex;
  justify-content: center;
  align-items: center;
}

#services #service-window #available-field-value {
  position: relative;
  height: 30px;
  width: 30px;
  background: url('/images/icon-cancel.svg');
  background-size: 75% 75%;
  background-position: center;
  background-repeat: no-repeat;

  padding: 0;
  margin: 0;

  border: 1px solid var(--border);
  border-radius: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  transition: all 0.1s;
}

#services #service-window #available-field-value:active {
  transform: scale(0.8);
}

#services #service-window #available-field-value.checked {
  background: url('/images/icon-tick-color.svg'), var(--secondary);
  background-size: 75% 75%;
  background-position: center;
  background-repeat: no-repeat;
}

#services #service-window .field.available .hide {
  display: none;
}

/*------------LOCATION------------*/

#services #service-window .field-section.location {
  justify-content: flex-start;
}

#services #service-window .location-tag {
  font-size: 1rem;
  opacity: 0.5;
}

#services #service-window .location-tag.selected {
  opacity: 1;
}

#services #service-window .location-tag:active {
  transform: scale(0.95);
}

/*------------IMAGE/DESCRIPTION------------*/

#imagePreview {
  width: 100%; /* or a suitable percentage */
  max-width: 400px; /* optional max width */
  margin: 0 auto; /* center the container */
}

/* Ensure the image fits within the container */
#imagePreview img {
  width: 100%;
  display: block;
}

/* Styling the textarea */
textarea {
  width: 100%;
  padding: 12px;
  font-size: 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  /* color: #3c3c3c; */
  box-sizing: border-box; /* Ensure padding doesn't affect width */
  font-family: inherit;
  resize: vertical; /* Allow vertical resizing only */
}

/* Styling the file input */
input[type="file"] {
  width: 100%;
  padding: 8px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
}

/* Adjust hover and focus styles to match the muted look */
/* textarea:focus, input[type="file"]:focus { */
  /* border-color: #a89e8a; */
  /* outline: none; */
/* } */

/* Add hover effect for file input */
/* input[type="file"]:hover { */
  /* background-color: rgba(0, 0, 0, 0.1); */
/* } */

/*-----------------------------NOTE: CLIENT-----------------------------*/

/*---------------BOOK---------------*/

#book #location-selector {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  translate: 0 -50%;
  padding: 16px;
  text-align: center;
}

#book.staff #location-selector {
  position: unset;
  top: unset;
  translate: unset;
}

#book #location-selector .cta {
  height: auto;
  padding: 12px;
  transition: all 0.1s ease-out;
  width: 100%;
}

#book #location-selector .cta:active {
  transform: scale(0.9);
}

body:has(#book) {
  overflow: hidden;
}

#book.client .container {
  position: fixed;
  width: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  max-height: 70vh;
  overflow: hidden;
}

#book.staff .container {
  position: absolute;
  width: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  max-height: 65vh;
  overflow: hidden;
}

#book .container.hide {
  display: none;
}

/* #book .container-header {
  background-color: #91d4d9;
  color: white;
} */

#book .container-view {
  /* display: flex;
  flex-direction: column;
  align-items: center; */
  /* above flex properties removed once service category buttons implemented (01.02.2024) */

  position: relative;

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);

  margin: 0;
  height: 100%;

  overflow-y: scroll;
  overflow-x: hidden;

  scroll-snap-type: y mandatory;
}

#book .tagline-wrapper {
  width: 100%;
  display: block;
}

#book .tagline {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; /* Subheading weight */
  font-size: 1.1rem;
  padding: 2% 0 2% 6%;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);

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

#book .container-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

#book .btn.back {
  min-width: 2.5rem;
  height: 2.5rem;
}

#book .btn.spacer {
  min-width: 40px;
  height: 40px;
}

#book .divider {
  height: 1px;
  width: 80%;
  background-color: var(--border);
  margin: 12px 0;
}

.category-list-outer {
  overflow-x: scroll;
}

.category-list {
  width: max-content;
  padding: 20px 24px;
  display: flex;
  gap: 16px;
}

.category-list .category {
  width: 75px;
  height: 100px;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  scroll-snap-align: start;
  border: 1px solid var(--border);
  border-radius: 12px;
  transform: scale(0.9);
  opacity: 0.5;
  transition: all 0.2s ease-out;

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

.category-list .category.selected {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 0 12px 4px rgba(var(--accentRGB), 0.2);
}

.category-list .category.hover, .category-list .category:active {
  transform: scale(0.85);
  box-shadow: 0 0px 4px 2px rgba(20, 20, 20, 0.4);
}

.category-list .category.selected.hover, .category-list .category.selected:active {
  transform: scale(0.95);
  box-shadow: 0 0px 8px 2px rgba(var(--accentRGB), 0.2);
}

.category-list .category-icon {
  width: 100%;
  height: 100%;
}

.category-list .category-name {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; /* Semi-bold */
  text-align: center;
}

/*----------Services----------*/

#book .services .container-header {
  gap: 2px;
  flex-flow: row wrap;
}

#book .services .button-wrapper {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#book #selected-services.wrapper {
  border: 1px solid var(--border);
  border-radius: 10px;

  display: flex;
  justify-content: space-around;
  align-items: center;

  padding: 0 4px 0 8px;
  height: 35px;

  font-size: 0.9rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;

  transition: all 0.1s ease-out;
  transform: scale(1);
}

#book #selected-services.wrapper.hover, #book #selected-services.wrapper:active {
  transform: scale(0.9);
  background-color: var(--secondary);
  color: var(--primary);
}

#book #selected-services.hover #deselect-services, #book #selected-services:active #deselect-services {
  background: no-repeat center/100% url('/images/icon-cancel-white.svg');
}

#book #service-count {
  text-align: right;
}

#book #deselect-services {
  width: 20px;
  height: 100%;
  background: no-repeat center/100% url('/images/icon-cancel.svg');
}

#book .services .tagline {
  border-top: none;
}

#book .services .tab-list {
  min-height: 320px;
}

#book .service .main, #services .service .main {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 70%;
  padding-left: 5%;
}

#services .service .side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  width: 20%;
  padding-right: 5%;
  font-size: 0.9rem;
}

#book .service .side {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 20%;
  padding-right: 5%;
  font-size: 0.9rem;
}

#book .service .side .left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
}

#book .service .side .right {
  display: flex;
  justify-content: center;
  align-items: center;
}

#book .service .side .btn.info {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  min-width: unset;
  width: 25px;
  height: 25px;
  background: no-repeat center/100% url('/images/icon-question.svg');
}

#book .service .side .btn.info.hover {
  background: no-repeat center/100% url('/images/icon-question-color.svg'), var(--secondary);
}

#book .service.selected .side .btn.info {
  background: no-repeat center/100% url('/images/icon-question-color.svg');
}

/* Overlay */

.overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  width: 480px;
  max-width: 90vw;

  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--primary);

  overflow: hidden;

  scale: 1;
  transition: all 0.2s ease-in-out;
}

.overlay.minimised {
  scale: 0;
}

.overlay .btn.close {
  background-color: transparent;
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: unset;
  width: 30px;
  height: 30px;
}

.overlay .top {
  width: 100%;
}

.overlay .bottom {
  width: 100%;
  padding: 0 28px 28px 28px;
  box-sizing: border-box;
}

.overlay img {
  width: 100%;
}

.overlay .bottom span {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center; 
}

/*--*/

#book .tab.service.unavailable-in-location {
  display: none !important;
}

#book .service.selected {
  background: var(--secondary);
  color: var(--primary);
}

#book .container.services .service.hover {
  background: rgba(var(--secondaryRGB), 0.5);
  transform: scale(0.95);
  color: var(--primary);
}

#book .container.services .service.selected.hover {
  background: rgba(var(--accentRGB), 0.75);
}

#book .service span, #services .service.span {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

#book .service span.name, #services .service span.name {
  /* border: thin solid #00b1bd; */
  /* border-radius: 40px; */
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; /* Semi-bold */
  padding: 4px 10px;
}

#book .service span.price, #services .service span.price {
  font-weight: bold;
}

/*----------Datetime----------*/

#book .datetime .section {
  position: relative;
  padding: 1rem;
}

#book .datetime .tagline {
  scroll-snap-align: start;
}

#book #date-tagline .tagline {
  border-top: none;
}

#book .section.date {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#book .datetime #calendar-wrapper {
  width: 100%;
  display: inherit;
  justify-content: inherit;
  align-items: inherit;
}

#book .datetime .calendarDates {
  /*--TO ADD THE HEIGHT ADJUSTMENT OF MONTHS W DIFF NO. OF WEEKS--*/
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}

#book .datetime .cal-date.past {
  opacity: 0.5;
}

#book .section.time {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  position: relative;
  min-height: 100px;
}

#book .section.times .message {
  width: 100%;
  text-align: center;
}

/*---------------SWIPE OUT ANIMATION (FROM CENTER TO LEFT)---------------*/

@keyframes swipeOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    top: 50%;
    left: 50%;
    box-shadow: 0px 4px 20px 4px rgb(151, 142, 116);
  }
  40% {
    transform: translate(-50%, -50%) scale(0.9);
    top: 50%;
    left: 50%;
    opacity: 1;
    box-shadow: 0px 2px 8px 2px rgb(151, 142, 116);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.9);
    top: 50%;
    left: -50%;
    opacity: 0;
    box-shadow: 0px 2px 8px 2px rgb(151, 142, 116);
  }
}

@-moz-keyframes swipeOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    top: 50%;
    left: 50%;
    box-shadow: 0px 4px 20px 4px rgb(151, 142, 116);
  }
  40% {
    transform: translate(-50%, -50%) scale(0.9);
    top: 50%;
    left: 50%;
    opacity: 1;
    box-shadow: 0px 2px 8px 2px rgb(151, 142, 116);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.9);
    top: 50%;
    left: -50%;
    opacity: 0;
    box-shadow: 0px 2px 8px 2px rgb(151, 142, 116);
  }
}

@-webkit-keyframes swipeOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    top: 50%;
    left: 50%;
    box-shadow: 0px 4px 20px 4px rgb(151, 142, 116);
  }
  40% {
    transform: translate(-50%, -50%) scale(0.9);
    top: 50%;
    left: 50%;
    opacity: 1;
    box-shadow: 0px 2px 8px 2px rgb(151, 142, 116);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.9);
    top: 50%;
    left: -50%;
    opacity: 0;
    box-shadow: 0px 2px 8px 2px rgb(151, 142, 116);
  }
}

.swipeOut.normal {
  animation: swipeOut 0.6s normal forwards;
}

.swipeOut.reverse {
  animation: swipeOut 0.6s reverse forwards;
}

/*---------------SWIPE IN ANIMATION (FROM RIGHT TO CENTER)---------------*/

@keyframes swipeIn {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    top: 50%;
    left: 150%;
    opacity: 0;
    box-shadow: 0px 2px 8px 2px rgb(151, 142, 116);
  }
  60% {
    transform: translate(-50%, -50%) scale(0.9);
    top: 50%;
    left: 50%;
    opacity: 1;
    box-shadow: 0px 2px 8px 2px rgb(151, 142, 116);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    top: 50%;
    left: 50%;
    box-shadow: 0px 4px 20px 4px rgb(151, 142, 116);
  }
}

@-moz-keyframes swipeIn {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    top: 50%;
    left: 150%;
    opacity: 0;
    box-shadow: 0px 2px 8px 2px rgb(151, 142, 116);
  }
  60% {
    transform: translate(-50%, -50%) scale(0.9);
    top: 50%;
    left: 50%;
    opacity: 1;
    box-shadow: 0px 2px 8px 2px rgb(151, 142, 116);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    top: 50%;
    left: 50%;
    box-shadow: 0px 4px 20px 4px rgb(151, 142, 116);
  }
}

@-webkit-keyframes swipeIn {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    top: 50%;
    left: 150%;
    opacity: 0;
    box-shadow: 0px 2px 8px 2px rgb(151, 142, 116);
  }
  60% {
    transform: translate(-50%, -50%) scale(0.9);
    top: 50%;
    left: 50%;
    opacity: 1;
    box-shadow: 0px 2px 8px 2px rgb(151, 142, 116);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    top: 50%;
    left: 50%;
    box-shadow: 0px 4px 20px 4px rgb(151, 142, 116);
  }
}

.swipeIn.normal {
  animation: swipeIn 0.6s normal forwards;
}

.swipeIn.reverse {
  animation: swipeIn 0.6s reverse forwards;
}

#book .book-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  position: relative;
  margin-bottom: 16px;
}

#book.staff #staff-book-form {
  padding: 32px 0;
}

#book .next-steps .details {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 2rem 0;
}

#book .next-steps .register-prompt, #book .next-steps .welcome-back-box, #book .next-steps .account-fail {
  padding: 8px 12px;

  border-bottom: 1px solid var(--border);

  font-family: 'Montserrat', sans-serif;
  font-weight: 600; /* Semi-bold */
  font-size: 0.9rem;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

#book .next-steps .star-icon {
  width: 35px;
  height: 35px;
}

#book .next-steps .account-fail {
  border-color: #ff878b;
  color: #ff878b;
}

/* taken from client-details */
#book .next-steps .fname, #book .next-steps .lname, #book .next-steps .phone, #book .next-steps .email, #book .next-steps .pw {
  position: relative;
}

/* taken from client-details */
#book .next-steps .data-field {
  width: 100%;
}

/* taken from client-details */
#book .next-steps label {
  position: absolute;
  top: -1.5rem;
  left: 40px;
}

/* taken from client-details */
#book .next-steps input {
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  outline: none;
  border-style: none;
  width: 100%;
  padding: 5px 8px;
}

#book .next-steps .cta.guest, #book .next-steps .cta.register {
  width: 80%;
}

#book .next-steps .login-prompt {
  margin: 0.75rem 0;
}

#book .details {
  width: 90%;
}

#book .pre-book-CTAs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
}

#book .post-details-CTAs {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -24px 0 24px 0;
}

#book .container.summary .section {
  width: 100%;
}

#book .container.summary .summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

#book .container.summary #summary-tagline .tagline {
  border-top: none;
}

#book .container.summary .summary .top, #book .container.summary .summary .bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
  padding: 8px;
}

#book .container.summary .summary .bottom {
  font-weight: bold;
  position: relative;
  gap: 5px;
  flex-flow: row wrap;
}

#book .container.summary .summary .top .left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  gap: 5px;
}

#book .container.summary .summary .top .right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  gap: 5px;
}

#book .container.summary .summary .middle {
  display: flex;
  flex-flow: row-reverse wrap;
  align-items: center;
  gap: 4px;

  padding: 12px 4px;

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

#book .container.summary .summary .service {
  padding: 4px 12px;

  /* border: 1px solid var(--border); */
  border-radius: 40px;
  background: var(--secondary);
  color: var(--primary);

  font-weight: bold;

  animation: gradient 4s linear infinite;
}

#book .container.summary .summary .bottom .left, #book .container.summary .summary .bottom .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

#book .container.summary .summary .bottom .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 5px;
  width: 100%;
}

#book .container.summary .summary .bottom .subheading {
  width: 100%;
  font-weight: bold;
}

#book .container.summary .data-field.m .data {
  padding: 4px 8px;
}

#book #discount-input {
  text-transform: uppercase;
  font-size: 1rem;
  width: 10ch;
  padding: 0;
  text-align: center;
}

#book #remove-discount {
  background: no-repeat center/85% url('/images/icon-cancel.svg');
  border-color: var(--border);
  width: 30px;
  height: 30px;
  min-width: auto;
}

#book .discount-btn-wrapper {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
}

#book .discount-elm-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
}

#book .container.summary .payment {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*---------------BOOKING CONFIRMATION---------------*/

#booking-confirmation .container-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 12px;
  margin: 0;
}

#booking-confirmation .confirmation-wrapper {
  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
}

#booking-confirmation .confirmation-wheel {
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 16px 0;
  width: 150px;
  height: 150px;

  transform: scale(1);
  transition: all 0.3s ease-in;
}

#booking-confirmation .confirmation-wheel.tick {
  background: url('/images/icon-tick.svg');
  background-position: center;
  background-size: 10px 10px;
  background-repeat: no-repeat;
  transition: all 0.3s ease-in;
}

#booking-confirmation .confirmation-wheel.tick.show {
  background-size: 80% 80%;
}

#booking-confirmation .progress-ring {
  transition: all 0.3s ease-in;
}

#booking-confirmation .circle {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

#booking-confirmation .circle.animating {
  transition: all 0.3s ease-in, stroke-dashoffset 1.5s;
}

#booking-confirmation .confirmation-msg {
  color: var(--secondary);
  font-family: headerFont;
  font-size: 2.4rem;
  text-align: center;
}

#booking-confirmation .appt-details {
  color: var(--secondary);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1rem;

  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 1ch;
}

#booking-confirmation .location-details {
  color: var(--secondary);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1rem;
}

#booking-confirmation .container-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
}


/*---------------CLIENT - MY APPOINTMENTS---------------*/

#myAppointments .count {
  font-size: 2rem;
  margin-right: 10px;
  text-align: center;
}

#myAppointments .container-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

#myAppointments .tab {
  display: block;
  position: relative;
  width: 100%;
  height: unset;
  min-width: unset;
  min-height: 65px;
  overflow: hidden;
  background: var(--primary);
}

#myAppointments .tab.open {
  z-index: 999;
  border: 1px solid var(--border);
}

#myAppointments .tab .summary-view {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  gap: 5px;

  border-bottom: 1px solid var(--border);

  position: relative;
  width: 100%;
  height: 65px;
  /* top: 0; */
  /* left: 0; */
}

#myAppointments .tab.closed.hover {
  transition: all 0.1s;
  transform: scale(0.9);
}

#myAppointments .top {
  order: 1;

  display: flex;
  gap: 8px;
  position: relative;

  padding-left: 5%;

  min-width: 60%;

  font-weight: bold;
  font-size: 1.1rem;

  transition: all 0.1s;
}

#myAppointments .tab.open .top {
  font-size: 1.2rem;
}

#myAppointments .tab.open .summary-view .location-tag {
  display: none;
}

#myAppointments .bottom {
  order: 2;

  position: relative;

  padding-left: 5%;

  min-width: 60%;
  height: 30%;
}

#myAppointments .bottom span {
  /* position: absolute;
  top: 50%;
  transform: translateY(-50%); */

  width: 95%;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#myAppointments .side {
  order: 3;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 25%;
  height: 100%;

  font-weight: bold;
  font-size: 1.2rem;
}

#myAppointments .full-view {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;

  font-weight: bold;
}

#myAppointments .full-view .section {
  padding: 12px;
}

/* #myAppointments .full-view span { */
  /* align icons with text */
  /* display: flex;
  justify-content: center;
  align-items: center;
} */

#myAppointments .upper.section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;

  width: 100%;
  /* height: 10%; */
}

#myAppointments .middle.section {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  width: 100%;

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

#myAppointments .lower.section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;

  width: 100%;
  /* height: 25%; */
}

#myAppointments .upper .left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
}

#myAppointments .upper .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
}

#myAppointments .middle .services {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  gap: 5px;
}

#myAppointments .middle .service {
  display: flex;
  justify-content: center;
  align-items: baseline;

  padding: 4px 12px;

  border-radius: 40px;
  background: var(--secondary);
  color: var(--primary);

  animation: gradient 4s linear infinite;
}

#myAppointments .lower .left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
}

#myAppointments .left-to-pay-label, #myAppointments .checkout-reference-label {
  white-space: nowrap;
  padding: 4px 8px;
  font-size: 0.8rem;
}

#schedule .tab .left-to-pay-data {
  font-size: 1rem;
}

#myAppointments .checkout-reference-label, #myAppointments .checkout-reference-data {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
}

#myAppointments .lower .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
}

#myAppointments .lower .price {
  font-size: 1.2rem;
}

/**/



/*---------------CLIENT - MY ACCOUNT---------------*/

#myDetails .container-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#myDetails .container-view {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

#myDetails .account {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;

  width: 100%;
  padding: 24px;
  padding-top: 0;
}

#myDetails .account .header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  width: 100%;
}

#myDetails .account .header .left-spacer {
  width: 20%;
  height: 100%;
}

#myDetails .account .header .right-spacer {
  width: 20%;
  height: 100%;

  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#myDetails .header .display {
  background: no-repeat center/90% url('/images/icon-user.svg');

  border-style: solid;
  border-width: thin;
  border-radius: 100%;
  border-color: var(--border);

  width: 100px;
  height: 100px;

  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#myDetails .btn.edit, #myDetails .btn.cancel {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(1);
  transition: all 0.1s ease;
}

#myDetails .btn.edit .icon, #myDetails .btn.cancel .icon {
  width: 30px;
  height: 30px;
}

#myDetails .btn.edit.disabled, #myDetails .btn.cancel.disabled {
  transform: scale(0);
  transition: all 0.1s ease;
}

#myDetails .account .view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;

  width: 100%;

}

#myDetails .account .footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#myDetails .account .footer .cta.primary {
  opacity: 100%;
}

#myDetails .account .footer .cta.primary.disabled {
  opacity: 50%;
}

#myDetails .fname, #myDetails .lname, #myDetails .mobile, #myDetails .email {
  position: relative;
  font-weight: bold;
}

#myDetails .pw {
  display: none;
  position: relative;
  font-weight: bold;
}

#myDetails .fld {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

#myDetails .fld .data-field {
  width: 100%;
}

/*----------FORM/INPUT/LABEL----------*/

::-webkit-input-placeholder { /* Edge */
  color: var(--secondary);
  opacity: 50%;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--secondary);
  opacity: 50%;
}

::placeholder {
  color: var(--secondary);
  opacity: 50%;
}

#myDetails label {
  position: absolute;
  top: -1.5rem;
  left: 40px;
  /* transform: translateX(-50%); */
}

#myDetails input {
  font-weight: bold;
  font-size: 1.2rem;

  width: 100%;
  height: 100%;

  padding-left: 0.8rem;
  padding-right: 0.8rem;

  border-style: none;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
}

#myDetails input:focus {
  outline: none;
}

#myDetails input:disabled {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /* -webkit-text-fill-color: #00b1bd; */
  opacity: 1; /* required on iOS */
}

/*----input checks----*/

#myDetails .fld span {
  font-weight: bold;
}


/**/

/*---------------ACCOUNT - ALL---------------*/

.register-form > div:not(.footer), .login-form > div:not(.footer) {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.register-form .container-message, .login-form .container-message {
  width: unset;
  padding: 8px;
  border-radius: calc(1rem / 1.6);
  border: 1px solid var(--border);
  background: #be8888;
  font-size: 0.9rem;
  text-align: center;
}

#slidePane #client.register, #slidePane #client.login {
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
}

#guest #client.register.container, #guest #client.login.container, #staff.login.container {
  width: 90%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
}

/*---------------CLIENT - REGISTER---------------*/

#client.register .container-view {
  display: flex;
  justify-content: center;
  margin: 0;
}

#client.register .wrapper {
  width: 80%;
}

#client.register .register-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(1rem + 24px);
  margin-top: calc(1rem + 12px);
}

#client.register .register-form label {
  font-weight: bold;
  position: absolute;
  top: -1.5rem;
  left: 40px;
  font-size: 0.9rem;
}

#client.register .footer {
  padding-bottom: 12px;
  width: 100%;
}

#client.register .login-prompt {
  margin-top: 18px;
  margin-bottom: 12px;
  text-align: center;
}

/*---------------CLIENT - LOGIN---------------*/

#client.login .container-view {
  display: flex;
  justify-content: center;
  margin: 0;
}

#client.login .wrapper {
  width: 80%;
}

#client.login .login-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(1rem + 24px);
  margin-top: calc(1rem + 12px);
}

#client.login .login-form label {
  font-weight: bold;
  position: absolute;
  top: -1.5rem;
  left: 40px;
  font-size: 0.9rem;
}

#client.login .footer {
  padding-bottom: 12px;
  width: 100%;
}

#client.login .register-prompt {
  margin-top: 18px;
  margin-bottom: 12px;
  text-align: center;
}


/*---------------STAFF - LOGIN---------------*/

#staff.login .container-view {
  display: flex;
  justify-content: center;
}

#staff.login .wrapper {
  width: 80%;
}

#staff.login .login-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(1rem + 24px);
  margin-top: calc(1rem + 12px);
}

#staff.login .login-form label {
  font-weight: bold;
  position: absolute;
  top: -1.5rem;
  left: 40px;
  font-size: 0.9rem;
}

#staff.login .footer {
  padding-bottom: 12px;
  width: 100%;
}

/*---------------POPUP---------------*/

.popup {
  display: none;
  position: fixed;
  bottom: -80px;
  left: 50vw;
  transform: translate(-50%);

  height: 75px;
  width: 90%;
  max-width: 600px;

  z-index: 999;

  border: 1px solid var(--border);
  border-radius: 20px;

  font-weight: bold;
  color: var(--secondary);
}

.popup.open {
  display: flex;
  justify-content: space-between;
  align-items: center;

  animation: popup-show 0.2s ease-in forwards;
  -moz-animation: popup-show 0.2s ease-in forwards;
  -webkit-animation: popup-show 0.2s ease-in forwards;
}

.popup.close {
  display: flex;
  justify-content: space-between;
  align-items: center;

  animation: popup-hide 0.2s ease-in forwards;
  -moz-animation: popup-hide 0.2s ease-in forwards;
  -webkit-animation: popup-hide 0.2s ease-in forwards;
}

@keyframes popup-show {
  0% {bottom: -80px}
  100% {bottom: 5vh;}
}

@-moz-keyframes popup-show {
  0% {bottom: -80px}
  100% {bottom: 5vh;}
}

@-webkit-keyframes popup-show {
  0% {bottom: -80px}
  100% {bottom: 5vh;}
}

@keyframes popup-hide {
  0% {bottom: 5vh;}
  100% {bottom: -80px;}
}

@-moz-keyframes popup-hide {
  0% {bottom: 5vh;}
  100% {bottom: -80px;}
}

@-webkit-keyframes popup-hide {
  0% {bottom: 5vh;}
  100% {bottom: -80px;}
}

.popup.success {
  background-color: var(--primary);
}

.popup.error {
  background-color: #ff878b;
}

.popup .left {
  order: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.popup .right {
  order: 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.popup .message {
  font-weight: bold;
  font-size: 1.3rem;
}

.popup .icon {
  /*icon styling*/
  width: 35px;
  height: 35px;
  border-radius: 100%;
  border: 1px solid var(--border);
  margin: 1.5rem;
}

.popup.success .icon {
  background: url('/images/icon-tick.svg');
  background-size: 25px 25px;
  background-position: center;
  background-repeat: no-repeat;
  /*white icon*/
}

.popup.error .icon {
  background: url('/images/icon-error-white.svg');
  background-size: 25px 25px;
  background-position: center;
  background-repeat: no-repeat;
  /*white icon*/
}

.popup .close {
  margin: 1.5rem;
}

/*---------------DATA-FIELD---------------*/

input {
  border-style: none;
  outline-style: none;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  width: 100%;
  height: 100%;
  padding: 0 8px;
}

.field-message {
  font-size: 0.9rem;
}

.data-field {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;

  position: relative;

  border: 1px solid var(--border);
  border-radius: 6px;

  transition: all 0.1s;
}

.data-field.disabled {
  opacity: 0.5;
}

.data-field.s {
  min-height: 20px;
  /* margin: 0.2rem; */
}

.data-field.m {
  min-height: 30px;
  /* margin: 0.5rem; */
}

.data-field .icon {
  display: flex;
  justify-content: center;
  align-items: stretch;
  
  font-weight: bold;

  position: relative;
}

.data-field .icon {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.data-field .icon img, .data-field .icon span {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  margin: 0;
}

.data-field.s .icon img, .data-field.s .icon span {
  width: 1.2rem;
  height: 100%;
  margin: 0 2px;
}

.data-field.m .icon img, .data-field.m .icon span {
  width: 1.6rem;
  height: 100%;
  margin: 0 3px;
}

.data-field .icon span {
  font-size: 1.2rem;
}

.data-field .data {
  /* border-style: solid;
  border-width: thin;
  border-color: var(--border);
  border-left-style: none; */

  background-color: transparent;
  border-left: 1px solid var(--border);

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
  width: 100%;
  font-weight: bold;
  overflow: hidden;
}

.data-field.s .data {
  padding: 2px 5px;
  font-size: 0.9rem;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.data-field.m .data {
  /* Padding not defined in data-field.m because of potential input fields being placed within. */
  /* Input fields should span the whole W/H of the data field and any padding */
  /* should be defined within the input field */
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.data-field .data input {
  background: none;
}

/*----DATA-FIELD (INVALID)----*/

.data-field.i {
  background-color: #fe8080;
}

/* .data-field.i .icon {
  background-color: #ff4d53;
}

.data-field.i .data {
  border-left: 1px solid #ff4d53;
} */

/* commented below as text should remain default color*/

/* .data-field.i .data input, .data-field.i .data span {
  color: #ff878b;
} */

/*----DATA-FIELD (ACTIVE)----*/

.data-field.active .icon, .data-field.active .data {
  border-width: 2px;
}

/*----LOCATION TAG----*/

.location-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 8px;
  border-radius: 40px;
  background: var(--secondary);
  color: var(--primary);
  font-size: 0.8rem;
  transition: all 0.1s ease-out;
}

/*---------------DROPDOWN---------------*/

.dropdown {
  position: relative;
}

.dropdown .data {
  width: auto;
  min-width: 5ch;
  height: 32px;
  padding: 0 5px;
}

.dropdown.open .data {
  border-top-right-radius: 0;
}

.dropdown .list {
  display: none;
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 999;
}

.dropdown.open .list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1px;
  background-color: var(--primary);
  color: var(--secondary);
  border: 1px solid var(--border);
  border-top-right-radius: 8px;
  overflow: hidden;
}

.dropdown .list .item {
  padding: 5px 5px;
  width: 100%;
}

.dropdown .list .item:active, .dropdown .list .item.selected {
  background-color: var(--secondary);
  color: var(--primary);
}

/*---------------ICONS---------------*/

.icon.s {
  width: 16px;
  height: 16px;
}

.icon.m {
  width: 20px;
  height: 20px;
}

.icon.l {
  width: 40px;
  height: 40px;
}

/*---------------SCROLLER/CAROUSEL---------------*/

.scroller {
  width: 100%;
  overflow: hidden;

  position: relative;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.scroll-row {
  display: flex;
  width: fit-content;
}

/*
.scroller.animate .scroll-row {
  animation: scroll 20s linear infinite;
}

.scroller.animate .scroll-row.reverse {
  animation: scroll 20s linear reverse infinite;
}

@keyframes scroll {
  to {
    transform: translate(-50%);
  }
}
*/

/*---------------slidePane---------------*/

#slidePane-wrapper .base {
  z-index: 989;
  /* transform: none;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden; */
}

#slidePane-wrapper .blur {
  z-index: 988;
}

#slidePane-wrapper {
  position: relative;
}

/* #slidePane-wrapper .base {
  transform: none;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; 
} */

.slidePane {
  position: fixed;
  bottom: 0;
  left: 0;

  display: block;

  width: 100vw;

  overflow: hidden;
}

.slidePane.open {
  animation: slideUp 0.3s ease-out;
  -moz-animation: slideUp 0.3s ease-out; /* Firefox */
  -webkit-animation: slideUp 0.3s ease-out; /* Safari and Chrome */
}

@keyframes slideUp {
  0% {bottom: -100vh}
  100% {bottom: 0;}
}

@-moz-keyframes slideUp {
  0% {bottom: -100vh}
  100% {bottom: 0;}
}

@-webkit-keyframes slideUp {
  0% {bottom: -100vh}
  100% {bottom: 0;}
}

.slidePane.closed {
  animation: slideDown 0.3s ease-in forwards;
  -moz-animation: slideDown 0.3s ease-in forwards; /* Firefox */
  -webkit-animation: slideDown 0.3s ease-in forwards; /* Safari and Chrome */
}

@keyframes slideDown {
  0% {bottom: 0}
  100% {bottom: -100vh;}
}

@-moz-keyframes slideDown {
  0% {bottom: 0}
  100% {bottom: -100vh;}
}

@-webkit-keyframes slideDown {
  0% {bottom: 0}
  100% {bottom: -100vh;}
}

.slidePane-header {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 40px;

  background: var(--primary);

  border: 1px solid var(--border);
  border-radius: 25px 25px 0 0;

  overflow: hidden;
}

.slidePane-header .btn.close {
  background: url('/images/icon-down.svg');
  background-size: 40px 40px;
  background-position: center;
  background-repeat: no-repeat;

  width: 50px;
  height: 50px;

  border-style: none;

  transition: all 0.1s;
}

.slidePane-header .btn.close.hover {
  transform: scale(0.85) translateY(8px);
}

.slidePane-view {
  overflow-y: overlay;
  height: 70vh;
  padding: 15px;
  background-color: var(--primary);
  position: relative;
  border: 1px solid var(--border);
  border-top: none;
}

/*--------GENERAL USE STYLING--------*/

.relative {
  position: relative;
}

.hide {
  display: none;
}

/*----POLICY PAGES----*/

.policy.container {
  padding: 32px;
  max-width: 1000px;
}