@charset "UTF-8";
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%;
  font-family: lato; }

body {
  box-sizing: border-box; }

.hidden_val {
  display: none; }

.hidden_val input {
  width: 50px; }

.highlight {
  font-weight: bold;
  color: #FF3300; }

.hidden_vals {
  display: none; }

.content {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  min-height: 90vh; }
  .content_body {
    margin-left: 2rem;
    margin-right: 2rem;
    margin-top: 1rem;
    margin-bottom: 1rem; }
    @media only screen and (max-width: 1680px) {
      .content_body {
        margin-left: 0rem;
        margin-right: 0rem;
        margin-top: 1rem;
        margin-bottom: 1rem; } }
  .content__center {
    margin: 0 auto; }

.popup_content {
  min-height: 40vh;
  max-height: 60vh; }

.error {
  color: #FF3300;
  font-size: 1.4rem; }

.icon {
  width: 25px;
  height: 25px;
  transition: 0.3s all; }
  .icon-select {
    cursor: pointer;
    transition: 0.3s all; }
  .icon-disabled {
    fill: #AAAAAA;
    cursor: not-allowed; }
  .icon-blue {
    fill: #2196F3; }
  .icon-info {
    fill: #2196F3; }
    .icon-info:hover {
      fill: #306C94; }
  .icon-pdf {
    cursor: pointer; }
    .icon-pdf:hover {
      fill: #FF3300; }
  .icon-deposit_ref_find {
    cursor: pointer;
    fill: #2196F3;
    width: 30px;
    height: 30px; }
    .icon-deposit_ref_find:hover {
      fill: #306C94; }
  .icon-edit {
    fill: #191919;
    cursor: pointer; }
    .icon-edit:hover {
      fill: #262668; }
  .icon-bin {
    fill: #FF0033;
    cursor: pointer; }
    .icon-bin:hover {
      fill: #84001A; }
  .icon-delete {
    fill: #333333;
    cursor: pointer; }
    .icon-delete:hover {
      fill: #84001A; }
  .icon-warning {
    fill: red;
    width: 35px;
    height: 35px; }
  .icon-waiting_list {
    cursor: pointer;
    fill: #2196F3;
    width: 30px;
    height: 30px;
    stroke-width: 0; }
  .icon-third_party {
    cursor: pointer;
    fill: #333333;
    width: 30px;
    height: 30px;
    stroke-width: 0; }

.icon-animate, .icon-animate-notes {
  transition: transform .15s ease;
  will-change: transform, filter; }

td[data-available="true"] .icon-animate-notes {
  fill: #2196F3;
  animation: icon-pulse-glow 1.6s ease-in-out infinite; }
  td[data-available="true"] .icon-animate-notes:hover {
    transform: scale(1.06); }
  td[data-available="true"] .icon-animate-notes:active {
    transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  td[data-available="true"] .icon-animate-notes {
    animation: none; } }

@keyframes icon-pulse-glow {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 6px rgba(33, 150, 243, 0.85)) drop-shadow(0 0 12px rgba(33, 150, 243, 0.45)); } }

.icon-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center; }
  .icon-tooltip[data-note=""], .icon-tooltip:not([data-note]),
  td[data-available="false"] .icon-tooltip {
    pointer-events: auto; }
    .icon-tooltip[data-note=""]::after, .icon-tooltip[data-note=""]::before, .icon-tooltip:not([data-note])::after, .icon-tooltip:not([data-note])::before,
    td[data-available="false"] .icon-tooltip::after,
    td[data-available="false"] .icon-tooltip::before {
      display: none; }
  .icon-tooltip::after {
    content: attr(data-note);
    position: absolute;
    bottom: 100%;
    right: 0;
    left: auto;
    transform: translateY(-6px);
    display: block;
    width: max-content;
    white-space: normal;
    /* Keep it on-screen even at the far right */
    max-width: clamp(0px, 60ch, calc(100vw - 16px));
    max-height: 180px;
    background: #111;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.25;
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    overflow: auto;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    transition: opacity .15s ease, transform .15s ease; }
  .icon-tooltip::before {
    content: "";
    position: absolute;
    right: 10px;
    left: auto;
    bottom: 100%;
    transform: none;
    border: 6px solid transparent;
    border-top-color: #111;
    opacity: 0;
    z-index: 1001;
    transition: opacity .15s ease; }
  .icon-tooltip:hover::after, .icon-tooltip:hover::before, .icon-tooltip:focus-within::after, .icon-tooltip:focus-within::before {
    opacity: 1; }
  .icon-tooltip:hover::after, .icon-tooltip:focus-within::after {
    transform: translate(0px, -10px); }

td[data-available="true"] .icon-animate-notes:hover {
  transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .icon-tooltip::after {
    transition: opacity .01s linear; } }

.tooltip_icon {
  width: 20px;
  height: 20px; }
  .tooltip_icon-info {
    width: 20px;
    height: 20px;
    fill: #2196F3; }
    .tooltip_icon-info:hover {
      fill: #111111; }

.bold {
  font-weight: bold !important; }

.width-50 {
  max-width: 50px; }

.width-80 {
  max-width: 80px; }

.width-100 {
  max-width: 100px; }

.width-200 {
  max-width: 200px; }

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

.width-400 {
  max-width: 400px; }

.width-500 {
  max-width: 500px; }

.ml-inline_form {
  margin-left: 4rem !important; }

.ml {
  margin-left: 0.5rem !important; }

.ml-1 {
  margin-left: 1rem !important; }

.ml-2 {
  margin-left: 1.5rem !important; }

.ml-3 {
  margin-left: 2rem !important; }

.ml-4 {
  margin-left: 4rem !important; }

.ml-5 {
  margin-left: 5rem !important; }

.mr {
  margin-right: 0.5rem !important; }

.mr-1 {
  margin-right: 1rem !important; }

.mr-2 {
  margin-right: 1.5rem !important; }

.mt {
  margin-top: 0.5rem !important; }

.mt-1 {
  margin-top: 1rem !important; }

.mt-2 {
  margin-top: 1.5rem !important; }

.mt-3 {
  margin-top: 2rem !important; }

.mb {
  margin-bottom: 0.5rem !important; }

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

.mb-2 {
  margin-bottom: 1.5rem !important; }

.mb-3 {
  margin-bottom: 2rem !important; }

.mb-4 {
  margin-bottom: 4rem !important; }

.mb-5 {
  margin-bottom: 5rem !important; }

.pl {
  padding-left: 0.5rem !important; }

.pr {
  padding-right: 0.5rem !important; }

.pt {
  padding-top: 1.5rem !important; }

.pb {
  padding-bottom: 0.5rem !important; }

.pb-1 {
  padding-bottom: 1rem !important; }

.p-1 {
  padding: 1rem; }

.heading_h1 {
  font-size: 3rem; }

.heading_h2 {
  font-size: 2.5rem; }

.heading_h3 {
  font-size: 2rem; }

.heading_h4 {
  font-size: 1.5rem; }

.align_center {
  text-align: center !important; }

.align_right {
  text-align: right !important; }

.align_left {
  text-align: left !important; }

.align_middle_table {
  vertical-align: middle; }

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

.bold_red {
  font-weight: bold;
  color: red; }

.actions__button {
  background-color: #555555;
  border: 1px solid #333333;
  color: #ffffff;
  padding: 1rem 2rem;
  border-radius: 3px;
  font-size: 1.4rem;
  text-decoration: none;
  margin-right: 1rem;
  cursor: pointer;
  transition: 0.2s background-color; }
  .actions__button:hover {
    background-color: #0086F3; }
  .actions__button-save {
    background-color: #5CAC00;
    border: 1px solid #999999; }
    .actions__button-save:hover {
      background-color: #498800; }
  .actions__button-cancel {
    background-color: #555555; }
    .actions__button-cancel:hover {
      background-color: #444444; }
  .actions__button-list {
    padding: 0.5rem 0.7rem;
    font-size: 1rem; }
  .actions__button-waiting_list {
    background-color: #2196F3; }
  .actions__button-link {
    background-color: transparent;
    border: none; }
    .actions__button-link:hover {
      background-color: transparent; }

.table {
  width: 100%;
  border-collapse: collapse;
  border-color: #555555 1px solid; }
  .table__main_header {
    background-color: #555555;
    color: #ffffff;
    padding: 2rem 1rem;
    font-size: 2.5rem;
    text-align: center;
    border-bottom: #555555 2px solid; }
  .table__header {
    font-weight: bold;
    background-color: #AAAAAA;
    padding: 0.5rem 0.7rem;
    text-align: center;
    border-bottom: #555555 2px solid; }
    .table__header:not(:last-child) {
      border-right: #555555 1px solid; }
  .table__data {
    text-align: center; }

.section_actions {
  margin-left: 1rem;
  margin-top: 1rem; }
  .section_actions__selected {
    background-color: #111111; }

.section_heading {
  position: relative;
  font-family: inherit;
  width: 100%;
  color: #555555;
  border-bottom: #999999 1px solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F0F0F0; }
  .section_heading__text {
    padding: 7px 0px 7px 30px;
    font-size: 3rem; }
  .section_heading__total_sales {
    font-size: 2.5rem; }
  .section_heading__actions {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 1rem; }
    .section_heading__actions-option {
      border-left: 1px solid #999999;
      padding: 5px 10px 5px 10px;
      cursor: pointer;
      width: 120px;
      text-align: center; }
      .section_heading__actions-option:hover {
        background-color: #DDDDDD; }
      .section_heading__actions-option:hover > .section_heading__actions-option_text {
        text-decoration: underline; }
      .section_heading__actions-option_icon {
        height: 30px;
        width: 30px; }
      .section_heading__actions-option_text {
        color: #111111;
        font-size: 1.5rem; }
  .section_heading__links {
    position: relative; }
    .section_heading__links-link {
      text-align: center;
      color: #191919;
      font-size: 1.3rem;
      padding: 0.5rem;
      cursor: pointer; }
      .section_heading__links-link:link, .section_heading__links-link:visited {
        color: #191919;
        text-decoration: none;
        display: inline-block;
        transition: all .2s;
        line-height: 1; }
      .section_heading__links-link:hover .section_heading__links-link-icon {
        fill: #262668; }
      .section_heading__links-link:hover .section_heading__links-link-text {
        text-decoration: underline; }
  .section_heading__text_link {
    font-family: inherit;
    cursor: pointer;
    font-size: 3rem; }
  .section_heading__link {
    font-family: inherit;
    cursor: pointer;
    font-size: 1.5rem;
    background-color: #555555;
    color: #BBBBBB;
    padding: 0.8rem 1rem;
    border-radius: 0.5rem; }
    .section_heading__link:link, .section_heading__link:visited {
      color: #BBBBBB;
      text-decoration: none;
      display: inline-block;
      transition: all .2s;
      line-height: 1; }
    .section_heading__link:hover {
      background-color: #333333; }
    .section_heading__link::before {
      content: attr(title);
      display: block;
      font-weight: bold;
      height: 0;
      overflow: hidden;
      visibility: hidden; }

.section_tabs {
  display: flex;
  flex-wrap: wrap;
  font-size: 2rem;
  margin-left: 1rem;
  margin-top: 1rem;
  border-bottom: #555555 solid 2px; }
  @media only screen and (max-width: 1680px) {
    .section_tabs {
      font-size: 1.4rem;
      margin-left: 0rem;
      margin-right: 0rem; } }
  .section_tabs__tab {
    cursor: pointer;
    background-color: #555555;
    color: #EEEEEE;
    padding: 1rem 2rem;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-right: #111111 solid 2px; }
    .section_tabs__tab:hover {
      background-color: #333333; }
    .section_tabs__tab-selected {
      background-color: #111111 !important;
      color: #ffffff;
      text-decoration: underline  !important; }

.highlight_red {
  background-color: #FF3300;
  color: #ffffff;
  padding: 0.2rem 0.5rem; }

.margin-right-1 {
  margin-right: 1rem; }

.pages {
  text-align: right;
  font-size: 2rem;
  margin-top: 1rem;
  margin-right: 1rem; }
  .pages p {
    display: inline; }
  .pages__total {
    text-align: left; }
  .pages__heading {
    font-weight: bold;
    margin-right: 2rem; }
  .pages__number {
    cursor: pointer;
    padding: 0 0.3rem; }
    .pages__number_current {
      background-color: #BBBBBB;
      font-weight: bold;
      padding: 0 0.5rem; }
    .pages__number:hover {
      background-color: #DDDDDD;
      font-weight: bold; }
    .pages__number-first {
      font-weight: bold;
      color: #2196F3; }

.ui-tooltip {
  padding: 0.3rem;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  background-color: #555555;
  color: #ffffff; }

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.nothing_to_display {
  font-size: 3rem;
  text-align: center;
  width: 100%;
  color: #333333; }

/* Pager wrapper */
.pager {
  display: flex;
  justify-content: center;
  margin: 14px 0 6px; }

/* Theme-able tokens (tweak to taste) */
:root {
  --pager-bg: #fff;
  --pager-border: #e5e7eb;
  /* light grey */
  --pager-text: #111827;
  /* near-black */
  --pager-muted: #6b7280;
  /* grey */ }

/* Pill container */
.pager__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--pager-bg);
  border: 1px solid var(--pager-border);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }

/* Buttons */
.pager__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--pager-text);
  background: #fff;
  border: 1px solid var(--pager-border);
  border-radius: 999px;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .06s ease, border-color .15s ease, background .15s ease; }

.pager__btn:hover:not([disabled]) {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px); }

.pager__btn:active:not([disabled]) {
  transform: translateY(0); }

.pager__btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none; }

/* Text bits */
.pager__info,
.pager__page {
  font-size: 13px;
  color: var(--pager-muted); }

/* Optional: small chevron icons */
.pager__icon {
  width: 16px;
  height: 16px;
  display: inline-block; }

/* Compact on small screens */
@media (max-width: 520px) {
  .pager__inner {
    padding: 6px 8px;
    gap: 6px;
    border-radius: 14px; }
  .pager__btn {
    padding: 6px 10px;
    font-size: 13px; }
  .pager__info {
    display: none; }
  /* hide range "1–100 of 169" on mobile */
  .pager__page {
    font-size: 12px; } }

/* Optional: make it stick under long lists */
.pager--sticky {
  position: sticky;
  bottom: 8px;
  z-index: 10; }

.navbar {
  font-family: inherit;
  font-size: 1.8rem;
  width: 100%;
  padding: 1.2rem;
  border-bottom: #111111 solid thick;
  display: grid;
  grid-template-columns: 150px 1fr 150px;
  align-items: end; }
  .navbar--margin_for_alerts {
    margin-top: 30px; }
  @media only screen and (max-width: 1680px) {
    .navbar {
      font-size: 1.3rem; } }
  .navbar__logo {
    width: 100%; }
    .navbar__logo-img {
      width: 100px; }
  .navbar__centre {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 50px;
    grid-gap: 10px;
    grid-template-areas: "messages"
 "navbar"; }
  .navbar__navigation {
    grid-area: navbar;
    align-self: flex-end;
    position: relative;
    display: flex;
    justify-content: space-between; }
  .navbar__messages {
    grid-area: messages;
    position: relative;
    font-size: 0.8em; }
    .navbar__messages__display {
      background-color: #859DFF;
      padding: 1rem;
      border-radius: 5px; }
    .navbar__messages_header {
      font-weight: bold;
      padding-bottom: 0.3;
      margin-bottom: 0.5rem;
      border-bottom: 1px solid black; }
    .navbar__messages_line {
      padding: 0.2rem; }
    .navbar__messages_date_time {
      font-weight: bold; }
    .navbar__messages_text {
      color: black;
      padding-left: 1rem; }
  .navbar__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%; }
    .navbar__actions__loggedin-name {
      font-size: 1.3rem; }
    .navbar__actions__alert {
      display: flex;
      align-items: flex-end;
      align-items: center;
      height: 100%; }
      .navbar__actions__alert_icon {
        cursor: pointer;
        width: 40px;
        height: 40px;
        fill: #333333; }
  .navbar__list {
    list-style: none; }
  .navbar__item {
    display: inline-block;
    font-size: 0.8em; }
    .navbar__item:not(:last-child) {
      margin-right: 0rem; }
  .navbar__link {
    padding: 0.3rem 0.7rem; }
    .navbar__link:link, .navbar__link:visited {
      color: #111111;
      text-decoration: none;
      text-transform: uppercase;
      display: inline-block;
      transition: all 0.4s; }
    .navbar__link:hover, .navbar__link:active {
      color: #111111;
      text-shadow: 1px 0 0 currentColor; }
  .navbar__loggedin {
    color: #111111; }

.extra_nav {
  width: 100%;
  height: 35px;
  background-color: #DDDDDD;
  padding-top: 0.5rem; }
  .extra_nav__options {
    font-size: 2rem;
    display: flex; }
    .extra_nav__options__left {
      flex: 1;
      margin-left: 1rem; }
    .extra_nav__options-link {
      cursor: pointer;
      margin-right: 2rem; }
      .extra_nav__options-link:link, .extra_nav__options-link:visited {
        text-decoration: none;
        transition: all 0.4s;
        color: #111111; }
      .extra_nav__options-link:hover, .extra_nav__options-link:active {
        color: #555555; }

.footer {
  position: relative;
  margin-top: 2rem;
  font-family: inherit;
  width: 100%;
  background-color: #111111;
  display: flex;
  justify-content: space-between; }
  .footer__address {
    padding: 2rem;
    font-size: 2rem;
    color: #ffffff; }
  .footer__middle {
    padding: 1.5rem;
    font-weight: normal;
    color: #ffffff;
    text-align: center; }
    .footer__middle_text-1 {
      font-family: 'Cabin Condensed', sans-serif;
      font-size: 3rem; }
    .footer__middle_text-2 {
      font-family: 'birch std';
      font-size: 7rem; }
    .footer__middle_text-3 {
      font-family: 'Lato';
      font-size: 1.5rem; }
  .footer__links {
    padding-top: 1.4rem;
    padding-right: 1rem; }
    .footer__links-link {
      padding: 0.5rem; }
    .footer__links-img {
      width: 50px; }

.scheduled {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-family: inherit;
  font-size: 1.5rem; }
  .scheduled-border {
    border: #777777 2px solid;
    min-height: 500px; }
  .scheduled__label {
    width: 160px; }
  .scheduled__data {
    padding: 1rem 1rem; }
  .scheduled__flex {
    display: flex;
    justify-content: space-evenly;
    margin-top: 1rem;
    font-size: 2rem; }
  .scheduled__datepicker {
    width: 500px; }
  .scheduled__enter_details {
    background-color: #BBBBBB;
    padding: 1rem; }
  .scheduled__date {
    width: 100%;
    border-bottom: #555555 1px solid;
    margin-top: 2rem; }
    .scheduled__date-active {
      background-color: #FF3350;
      padding-left: 1rem; }
  .scheduled__employee_name {
    width: 150px !important;
    text-align: right;
    margin-right: 1rem; }
  .scheduled__time {
    width: 100px !important;
    margin-right: 1rem; }
  .scheduled__days {
    border-bottom: #BBBBBB 1px solid;
    margin-top: 1rem;
    padding-bottom: 1rem; }
    .scheduled__days__line {
      display: flex;
      align-items: center;
      margin-top: 1rem; }
      .scheduled__days__line-today {
        background-color: #FF3350; }
  .scheduled__icon {
    width: 25px;
    height: 25px;
    margin-left: 1rem; }
  .scheduled__nothing_to_display {
    font-size: 3rem; }
  .scheduled__input-time {
    width: 100px !important; }
  .scheduled__errors {
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 100px; }

.scheduled_nav {
  width: 100%;
  font-size: 1.5rem;
  background-color: #BBBBBB;
  color: #111111;
  padding: 0.5rem; }
  .scheduled_nav__option {
    display: inline;
    cursor: pointer;
    padding-left: 2rem; }
    .scheduled_nav__option:hover {
      color: #555555;
      font-weight: bold;
      text-decoration: underline; }
    .scheduled_nav__option::before {
      content: attr(title);
      font-weight: bold;
      height: 0;
      overflow: hidden;
      visibility: hidden; }
    .scheduled_nav__option-selected {
      font-weight: bold;
      text-decoration: underline; }

.working_hours {
  width: 800px; }
  .working_hours__title {
    border-bottom: #111111 2px solid;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 1rem; }
  .working_hours__table {
    width: 100%; }
    .working_hours__table-heading {
      background-color: #999999;
      padding: 0.5rem;
      text-align: center; }
    .working_hours__table-data {
      background-color: #EEEEEE;
      padding: 0.5rem;
      text-align: center; }

.overtime {
  padding: 1rem 3rem; }

.loyalty_card__edit {
  padding: 2rem;
  position: relative;
  min-height: 80vh; }
  .loyalty_card__edit label {
    display: block;
    font-size: 2rem; }

.product_selection__wrapper {
  max-width: 640px;
  font-family: sans-serif;
  background-color: #B9DDDD;
  padding: 2rem; }

.product_selection__input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px; }

.product_selection__dropdown {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  z-index: 100; }

.product_selection__options {
  list-style: none;
  margin: 0;
  padding: 4px;
  max-height: 300px;
  overflow: auto;
  font-size: 1.4em; }

.product_selection__option {
  padding: 8px;
  cursor: pointer; }

.product_selection__option:hover {
  background: #f2f6ff; }

.product_selection__selected {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px; }

.product_selection__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 999px;
  background: #fafafa; }

.product_selection__chip-remove {
  border: none;
  background: transparent;
  cursor: pointer; }

/* grey out & no pointer for disabled options */
.product_selection__option--disabled {
  opacity: 0.6;
  cursor: not-allowed; }

.product_selection__option--disabled.product_selection__option--active {
  /* even if keyboard highlights it, still looks disabled */
  background: #eee; }

.table {
  width: 100%; }
  .table__heading {
    background-color: #BBBBBB;
    border-bottom: 1px solid #999999;
    text-align: center;
    font-size: 1.6rem; }
    .table__heading-title {
      padding: 0.7rem 0; }
  .table__body-data {
    padding: 5px 10px 0 10px;
    border-bottom: 1px dotted #AAAAAA; }
    .table__body-data_center {
      text-align: center; }

.data_display {
  position: relative;
  font-size: inherit;
  max-width: 100%; }
  .data_display__heading {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    font-weight: bold;
    background-color: #BBBBBB;
    border-bottom: 1px solid #999999;
    padding: 0.5rem; }
    @media only screen and (max-width: 1880px) {
      .data_display__heading {
        font-size: 1.2rem; } }
    @media only screen and (max-width: 1680px) {
      .data_display__heading {
        font-size: 1.1rem; } }
  .data_display_br {
    border-right: 1px solid #888888; }
  .data_display__line {
    display: flex;
    width: 100%;
    border-bottom: #999999 solid 1px;
    background-color: #ffffff;
    align-items: center;
    font-size: 1.3rem;
    padding: 0.5rem; }
    @media only screen and (max-width: 1880px) {
      .data_display__line {
        font-size: 1.2rem; } }
    @media only screen and (max-width: 1680px) {
      .data_display__line {
        font-size: 1.1rem; } }
    .data_display__line p {
      margin: 0;
      padding: 0; }
    .data_display__line-100 {
      min-width: 100px;
      text-align: center; }
    .data_display__line-id {
      min-width: 60px;
      text-align: center; }
    .data_display__line-transaction {
      min-width: 100px;
      text-align: center; }
    .data_display__line-name {
      text-align: center;
      width: 180px; }
    .data_display__line-amt {
      text-align: center;
      width: 100px; }
    .data_display__line-area {
      text-align: center;
      min-width: 200px; }
    .data_display__line-postcode {
      text-align: center;
      min-width: 100px; }
    .data_display__line-email {
      text-align: center;
      min-width: 350px; }
    .data_display__line-phone {
      text-align: center;
      min-width: 200px; }
    .data_display__line-dateregistered {
      text-align: center;
      width: 120px; }
    .data_display__line-toggle {
      display: flex;
      justify-content: center;
      min-width: 80px; }
    .data_display__line-daterange {
      text-align: center;
      min-width: 250px; }
    .data_display__line-status {
      text-align: center;
      min-width: 200px;
      max-width: 200px; }
    .data_display__line-deposit_notes {
      text-align: left;
      min-width: 150px;
      max-width: 150px; }
    .data_display__line-time {
      text-align: center;
      min-width: 100px; }
    .data_display__line-product {
      text-align: center;
      min-width: 300px; }
    .data_display__line-promo_products {
      text-align: center;
      min-width: 400px;
      overflow: hidden; }
    .data_display__line-promo_description {
      min-width: 400px;
      overflow: hidden; }
    .data_display__line-price {
      text-align: right;
      min-width: 110px; }
    .data_display__line-confirmed {
      text-align: center;
      min-width: 100px; }
    .data_display__line-icon {
      margin-right: 1rem !important; }
    .data_display__line-discount_amt {
      text-align: center;
      min-width: 100px; }
    .data_display__line-skintestwarning {
      color: crimson;
      min-width: 350px;
      font-weight: bold; }
    .data_display__line-sms_message {
      text-align: left;
      min-width: 800px; }
    .data_display__line-actions {
      text-align: left;
      min-width: 250px;
      margin-left: 3rem; }
    .data_display__line-reconciled {
      color: crimson;
      font-weight: bold;
      font-size: 2rem;
      min-width: 80px;
      text-align: center; }
    .data_display__line-link {
      color: #555555; }
      .data_display__line-link:link, .data_display__line-link:visited {
        color: #555555;
        text-decoration: none;
        display: inline-block;
        transition: all .2s;
        line-height: 1; }
  .data_display__nodata {
    padding: 0.7rem 0.7rem;
    font-size: 2rem; }
  .data_display__icon-promocodes-info {
    width: 15px;
    height: 15px;
    fill: #2196F3;
    cursor: pointer; }
  .data_display__warning {
    color: #FF3300;
    font-size: 1.5rem;
    padding: 1rem;
    background-color: black;
    text-align: center; }

.data_display__details {
  border-top: 1px solid #CCCCCC;
  padding: 1rem 5rem;
  background: #fafafa;
  margin: -6px 0 12px 0; }

.data_display__services-list p {
  width: 100%;
  font-size: 1.5rem;
  font-weight: bold;
  border-bottom: 1px solid #CCCCCC;
  padding-bottom: 1rem;
  margin-bottom: 1rem; }

.data_display__services-list__ul {
  font-size: 1.3rem; }

.chevron.rotated {
  transform: rotate(180deg);
  transition: transform 0.15s ease-in-out; }

.grid_display {
  position: relative;
  max-width: 100%;
  font-size: inherit;
  overflow-x: auto; }
  .grid_display__loyalty_cards {
    --cols: 60px 100px 1fr 0.6fr 0.6fr 1.2fr 1fr 1fr 160px; }
  .grid_display__history_general {
    --cols: 120px 100px 1fr 200px 100px 40px 40px; }
  .grid_display__heading, .grid_display__line {
    display: grid;
    grid-template-columns: var(--cols);
    align-items: center;
    justify-items: center;
    column-gap: 12px;
    min-width: 980px;
    width: 100%;
    padding: 0.5rem; }
  .grid_display__heading {
    font-size: 1.4rem;
    font-weight: bold;
    background: #BBBBBB;
    border-bottom: 1px solid #999999;
    position: sticky;
    top: 0;
    z-index: 2; }
  .grid_display__line {
    font-size: 1.3rem;
    background: #ffffff;
    border-bottom: 1px solid #999999; }
    .grid_display__line p {
      margin: 0;
      padding: 0; }
  .grid_display__details {
    grid-column: 1 / -1;
    border-top: 1px solid #CCCCCC;
    padding: 1rem 1.5rem;
    background: #fafafa;
    margin: -6px 0 12px 0;
    text-align: left; }
  @media (max-width: 1880px) {
    .grid_display__heading {
      font-size: 1.2rem; }
    .grid_display__line {
      font-size: 1.2rem; } }
  @media (max-width: 1680px) {
    .grid_display__heading {
      font-size: 1.1rem; }
    .grid_display__line {
      font-size: 1.1rem; } }

.grid_display__line-actions {
  display: flex;
  justify-content: center;
  gap: .5rem; }

.grid_display__line-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center; }

.chevron.rotated {
  transform: rotate(180deg);
  transition: transform .15s ease-in-out; }

.error {
  font-family: inherit;
  text-align: left;
  padding-left: 1rem;
  padding-top: 0.5rem;
  font-size: 1.5rem; }

.toggle_switch {
  position: relative;
  display: flex;
  align-items: center; }
  .toggle_switch__title {
    font-size: 1.8rem;
    margin-right: 5px; }
  .toggle_switch__switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px; }
    .toggle_switch__switch_chk {
      opacity: 0;
      width: 0;
      height: 0; }
      .toggle_switch__switch_chk:checked + .toggle_switch__switch_chk__slider {
        background-color: #2196F3; }
      .toggle_switch__switch_chk:checked + .toggle_switch__switch_chk__slider::before {
        -webkit-transform: translateX(22px);
        -ms-transform: translateX(22px);
        transform: translateX(22px); }
      .toggle_switch__switch_chk__slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #555555;
        -webkit-transition: .4s;
        transition: .4s; }
        .toggle_switch__switch_chk__slider::before {
          position: absolute;
          content: "";
          height: 20px;
          width: 20px;
          left: 4px;
          bottom: 4px;
          background-color: white;
          -webkit-transition: .4s;
          transition: .4s; }
      .toggle_switch__switch_chk__round {
        border-radius: 34px; }
        .toggle_switch__switch_chk__round::before {
          border-radius: 50%; }

.radio_container {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-left: 35px;
  padding-top: 4px; }
  .radio_container__input {
    position: absolute;
    opacity: 0;
    cursor: pointer; }
    .radio_container__input:checked ~ .radio_container__checkmark {
      background-color: #2196F3; }
    .radio_container__input:checked ~ .radio_container__checkmark::after {
      display: block; }
  .radio_container__checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #AAAAAA;
    border-radius: 50%; }
    .radio_container__checkmark::after {
      content: "";
      position: absolute;
      top: 6px;
      left: 6px;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: white;
      display: none; }

.client_name_search {
  z-index: 1000; }
  .client_name_search__container {
    position: relative;
    width: 100%; }
  .client_name_search__results {
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    height: 0;
    border: 1px solid #333333;
    border-width: 0px;
    font-size: 1.5rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    overflow-y: scroll; }
    .client_name_search__results-line {
      display: flex;
      border-bottom: 1px solid #BBBBBB;
      cursor: pointer;
      padding: 2px 5px; }
      .client_name_search__results-line:hover {
        background-color: #DDDDDD; }
    .client_name_search__results-name {
      width: 200px; }
    .client_name_search__results-address {
      width: 300px;
      border-left: 1px solid #BBBBBB;
      padding-left: 10px; }

input[type="checkbox"], label {
  margin: 0px 2px;
  padding: 0px;
  font-size: inherit;
  cursor: pointer; }

.form {
  position: relative;
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  width: 100%; }
  .form__group {
    font-size: inherit;
    text-align: left;
    margin-bottom: 10px; }
    @media only screen and (max-width: 1680px) {
      .form__group {
        font-size: 1.4rem; } }
    .form__group-inline {
      display: flex;
      align-items: center; }
    .form__group_icon_inline {
      width: 50px;
      height: 40px;
      cursor: pointer; }
    .form__group_input_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 10px; }
    .form__group__heading {
      margin-top: 1rem;
      margin-bottom: 1rem;
      font-weight: 500;
      font-size: 1.4em; }
  .form__readonly {
    text-align: left;
    font-size: inherit;
    margin-bottom: 1rem; }
    .form__readonly label {
      margin-right: 1rem;
      display: inline; }
    .form__readonly input {
      border: none;
      font-size: inherit;
      background: transparent;
      padding: 0.5rem; }
  .form__margin-left {
    margin-left: 1em; }
  .form__horizontal {
    display: flex;
    align-items: center; }
  .form__label {
    display: block;
    font-weight: 500;
    margin-bottom: 3px;
    text-align: left; }
    .form__label-inline {
      margin-right: 1rem;
      display: inline; }
    .form__label-cashup {
      width: 150px; }
    .form__label-skin-test-date {
      width: 200px; }
  .form__input {
    font-size: inherit;
    padding: 0.7rem 1rem;
    border-radius: 7px;
    border: #888888 1px solid;
    width: 100%; }
    .form__input-small {
      width: 60px;
      text-align: center; }
    .form__input-small_number {
      width: 100px;
      text-align: center; }
    .form__input-amount {
      width: 120px;
      text-align: center; }
    .form__input-price {
      width: 100px;
      text-align: right; }
    .form__input_text-right {
      text-align: right; }
    .form__input-date {
      width: 120px;
      text-align: center; }
    .form__input-slf_date_range {
      width: 250px;
      text-align: center; }
    .form__input-time {
      width: 100px;
      text-align: center; }
    .form__input-datetime {
      width: 180px;
      text-align: center; }
    .form__input-code_name {
      width: 150px;
      text-align: center; }
    .form__input-voucher_code {
      width: 280px;
      text-align: center; }
    .form__input-daterange {
      width: 250px;
      text-align: center; }
    .form__input-client_name {
      width: 290px;
      text-align: left; }
    .form__input-phone_number {
      width: 290px;
      text-align: left; }
    .form__input-email {
      width: 290px;
      text-align: left; }
    .form__input-password {
      width: 250px; }
    .form__input-whitebg {
      background-color: white; }
    .form__input:focus {
      outline: none;
      border: 1px solid #111111; }
    .form__input:focus:invalid {
      border-bottom: 3px solid #601300; }
    .form__input-client_notes_title {
      width: 600px; }
    .form__input-client_notes-note {
      width: 100%;
      height: 200px;
      border: 1px solid #111111;
      font-size: 1.8rem;
      padding: 10px; }
  .form__hint {
    font-size: 1.4em; }
  .form__select {
    font-size: inherit;
    padding: 0.7rem 1rem;
    border-radius: 7px;
    border: #888888 1px solid; }
    .form__select:focus {
      outline: none;
      border: 1px solid #111111; }
    .form__select:focus:invalid {
      border-bottom: 3px solid #601300; }
  .form__heading {
    font-size: 4rem;
    display: block;
    text-align: center;
    margin-bottom: 3rem; }
  .form__error {
    color: #FF3300;
    font-size: 2rem;
    margin-bottom: 2rem; }
  .form__checkbox {
    font-size: 2rem; }
  .form__checkbox_group {
    position: relative;
    width: 500px;
    margin-bottom: 1rem; }
    .form__checkbox_group_heading {
      width: 100%;
      line-height: 1;
      text-align: center;
      overflow: hidden;
      font-size: 2rem; }
      .form__checkbox_group_heading > span {
        position: relative; }
        .form__checkbox_group_heading > span::before, .form__checkbox_group_heading > span::after {
          content: "";
          position: absolute;
          height: 1px;
          border-top: 2px solid #555555;
          top: 13px;
          width: 300px; }
        .form__checkbox_group_heading > span::before {
          right: 100%;
          margin-right: 10px; }
        .form__checkbox_group_heading > span::after {
          left: 100%;
          margin-left: 10px; }
      .form__checkbox_group_heading-container {
        width: 100%;
        border-left: 2px solid #555555;
        border-right: 2px solid #555555;
        border-bottom: 2px solid #555555;
        padding: 1.5rem 0rem 1rem 0rem;
        box-sizing: border-box;
        margin-top: -7px;
        display: flex;
        justify-content: center;
        text-align: center; }
    .form__checkbox_group_checkboxes {
      display: flex;
      align-items: center;
      margin-top: 1.5rem; }
  .form__checkbox_container {
    display: flex;
    align-items: center; }
  .form__checkbox_label {
    font-size: 2rem;
    margin-left: 0.5rem; }
  .form__custom_checkbox .css-checkbox {
    display: none; }
    .form__custom_checkbox .css-checkbox:checked + i {
      background: #2980b9;
      border-color: #2980b9; }
      .form__custom_checkbox .css-checkbox:checked + i:hover:after {
        opacity: 1; }
      .form__custom_checkbox .css-checkbox:checked + i:after {
        opacity: 1;
        border-color: papayawhip; }
    .form__custom_checkbox .css-checkbox + i {
      box-sizing: border-box; }
      .form__custom_checkbox .css-checkbox + i:before, .form__custom_checkbox .css-checkbox + i:after {
        box-sizing: border-box; }
    .form__custom_checkbox .css-checkbox + i {
      position: relative;
      display: inline-block;
      top: -1px;
      width: 30px;
      height: 30px;
      margin: 0;
      vertical-align: middle;
      border: 1px solid #999;
      transition: background 200ms ease;
      border-radius: 10em;
      background: #F9F9F9;
      font-size: 30px;
      cursor: pointer; }
      .form__custom_checkbox .css-checkbox + i:hover:after {
        opacity: .2; }
      .form__custom_checkbox .css-checkbox + i:after {
        content: '';
        opacity: 0;
        transform: translateZ(1px) rotate(-45deg);
        outline: 1px solid transparent;
        position: absolute;
        top: 22%;
        left: 15%;
        width: .68em;
        height: .4em;
        border: .15em solid #222;
        border-top: none;
        border-right: none;
        background: rgba(0, 0, 0, 0); }
  .form__submit {
    font-size: 1.8rem;
    max-height: 4rem;
    border: none;
    background-color: #555555;
    color: #BBBBBB;
    padding: 0.5rem 2rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden; }
    .form__submit:hover {
      background-color: #2196F3;
      border-color: #2196F3; }
  .form__submit_link {
    font-size: 1.8rem;
    border: #111111 1px solid;
    background-color: #333333;
    color: #BBBBBB;
    padding: 0.6rem 2rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.4s; }
    .form__submit_link:link, .form__submit_link:visited {
      color: #BBBBBB;
      text-decoration: none;
      display: inline-block;
      transition: all .2s; }
    .form__submit_link:hover {
      background-color: #2196F3;
      border-color: #2196F3; }
    .form__submit_link-ML {
      margin-left: 2rem; }
  .form__header_submit {
    font-size: 1.5rem;
    border: #111111 1px solid;
    background-color: #333333;
    color: #EEEEEE;
    padding: 0.7rem 2rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.4s; }
    .form__header_submit:link, .form__header_submit:visited {
      color: #BBBBBB;
      text-decoration: none;
      display: inline-block;
      transition: all .2s;
      line-height: 1; }
    .form__header_submit:hover {
      background-color: #2196F3;
      border-color: #2196F3; }
  .form__forgot_password {
    font-size: 1.4rem;
    margin-left: 1rem; }
    .form__forgot_password:link, .form__forgot_password:visited {
      color: #555555;
      text-decoration: none;
      display: inline-block;
      transition: all .2s;
      line-height: 1; }
    .form__forgot_password:hover {
      color: #111111; }
  .form__textarea {
    padding: 5px;
    font-family: inherit; }
  .form__rating {
    position: relative; }
    .form__rating_wrapper {
      width: 100%;
      max-width: 400px;
      margin-top: 20px; }
      .form__rating_wrapper_title {
        width: 100%;
        line-height: 1;
        text-align: center;
        overflow: hidden; }
        .form__rating_wrapper_title > span {
          position: relative; }
          .form__rating_wrapper_title > span::before, .form__rating_wrapper_title > span::after {
            content: "";
            position: absolute;
            height: 1px;
            border-top: 2px solid #555555;
            top: 13px;
            width: 500px; }
          .form__rating_wrapper_title > span::before {
            right: 100%;
            margin-right: 10px; }
          .form__rating_wrapper_title > span::after {
            left: 100%;
            margin-left: 10px; }
    .form__rating_container {
      display: flex;
      justify-content: space-around;
      min-height: 50px;
      margin-top: -9px;
      border-left: 2px solid #555555;
      border-right: 2px solid #555555;
      border-bottom: 2px solid #555555;
      padding: 20px 5px 10px 5px; }
    .form__rating_group {
      font-size: 1.2rem;
      width: 80px;
      text-align: center; }
      .form__rating_group-header {
        margin-bottom: 5px; }
  .form__input_text {
    font-size: inherit;
    border: none;
    padding: 0.7rem 1rem; }

.form_messages {
  font-family: lato;
  display: flex;
  align-items: center; }
  .form_messages-txt {
    color: #FF3300;
    font-size: 2.5rem; }
    .form_messages-txt-ok {
      color: #00CB00; }
  .form_messages-icon {
    fill: #FF3300;
    margin-right: 1rem;
    width: 4rem; }
    .form_messages-icon-ok {
      fill: #00FF00; }

#form_changes {
  display: none; }

.form__clients_marketing_opt_out {
  margin-left: 2rem;
  min-width: 300px; }

.flex_label {
  display: flex;
  align-items: center; }
  .flex_label__bold {
    font-weight: bold; }
  .flex_label__fill {
    flex: 1; }

.label {
  font-size: inherit; }
  .label__points {
    width: 100px; }
  .label__diary_start_time {
    width: 150px; }
  .label__payments_section {
    width: 130px; }

.input__small {
  width: 60px;
  text-align: center; }

.input__small_number {
  width: 100px;
  text-align: center; }

.input__amount {
  width: 120px;
  text-align: center; }

.input__single_date {
  width: 140px;
  text-align: center; }

.input__price {
  width: 100px;
  text-align: right; }

.input__points_per_unit {
  width: 80px;
  text-align: right; }

.input__deposit_amount {
  width: 100px;
  text-align: right; }

.input__points {
  width: 100%;
  text-align: center; }

.input__email-address {
  width: 400px;
  text-align: center; }

.input__receipt_textarea {
  font-family: 'lato';
  font-weight: 400;
  width: 400px;
  height: 180px;
  padding: 0.5rem;
  font-size: 1.9rem;
  text-align: center; }
  .input__receipt_textarea_chars_remaining {
    margin-left: 130px;
    color: crimson; }

.input__sms_textarea {
  width: 350px;
  height: 100px;
  resize: none;
  padding: 0.7rem;
  font-size: 1.8rem; }

.field {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
  text-align: left; }
  .field_wrapper {
    height: 50px;
    border: 1px solid #BBBBBB;
    padding: 0.5rem;
    z-index: 0; }
  .field_flex {
    display: flex;
    align-items: center; }
  .field label {
    font-weight: 700;
    display: block;
    font-size: 1.5rem; }
  .field input, .field select {
    width: 100%;
    margin-top: 0.5rem;
    margin-left: 1rem;
    border: none;
    display: block;
    outline: none;
    background: transparent;
    color: inherit; }
    .field input:focus, .field select:focus {
      border: none; }
    .field input:-webkit-autofill,
    .field input :-webkit-autofill:focus, .field select:-webkit-autofill,
    .field select :-webkit-autofill:focus {
      transition: background-color 600000s 0s, color 600000s 0s; }
  .field_day_text {
    font-size: 2rem;
    margin-left: 1rem;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .field_error {
    border: 2px solid #FF3350; }
    .field_error ::placeholder {
      color: #FF3350;
      font-weight: 700; }
  .field_error_text {
    margin-left: 2rem;
    color: #FF3350;
    float: right; }

.textarea {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
  text-align: left; }
  .textarea__wrapper {
    width: 100%; }
  .textarea__heading {
    font-weight: 700;
    display: block;
    font-size: 1.5rem; }
  .textarea__textarea {
    width: 100%;
    min-height: 120px;
    font-size: 1.2em;
    padding: 1rem; }

.side_bar_nav {
  width: 100%;
  background-color: #DDDDDD; }
  .side_bar_nav-option {
    border-bottom: 1px dotted #BBBBBB;
    padding: 0.7rem 0.3rem;
    padding-left: 1.5rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s; }
    .side_bar_nav-option:hover {
      background-color: #888888; }
    .side_bar_nav-option--selected {
      background-color: #888888;
      border-right: 5px solid #111111; }

.daterangepicker {
  position: fixed; }

.list_selections {
  position: relative; }
  .list_selections__section_heading {
    width: 100%;
    text-align: center;
    background-color: #2196F3;
    padding: 0.4rem; }
    .list_selections__section_heading_text {
      font-size: 2rem; }
  .list_selections__chk {
    display: none; }
  .list_selections__line_selected {
    background-color: yellow; }
  .list_selections__text {
    width: 100%;
    font-size: 1.8rem !important;
    background-color: #EEEEEE !important;
    padding: 0.5rem 1rem !important; }

.input_field_readonly {
  background-color: "#e9ecef";
  opacity: 0.5; }

.product_selection__error {
  color: red;
  font-size: 1.2em;
  margin-top: 0.7rem; }

/* error outline on inputs */
.product_selection__input-error {
  border-color: red !important; }

.ajaxloader {
  z-index: 2000; }
  .ajaxloader-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

.ui-datepicker {
  font-family: inherit;
  width: 100%;
  margin: 5px auto 0;
  font-size: 1.5rem; }

.ui-datepicker table {
  width: 100%; }

.ui-datepicker-header {
  width: 100%;
  color: #000000; }

.ui-datepicker-title {
  text-align: center;
  font-size: 1.5rem;
  border-bottom: #000000 solid 1px;
  margin-bottom: 1rem; }

.ui-datepicker-prev {
  float: left;
  cursor: pointer;
  background-position: center -30px;
  font-size: 1.2rem;
  margin-left: 0.5rem;
  font-weight: bold; }

.ui-datepicker-next {
  float: right;
  cursor: pointer;
  background-position: center 0px;
  font-size: 1.2rem;
  margin-right: 0.5rem;
  font-weight: bold; }

.ui-datepicker thead {
  color: #000000; }

.ui-datepicker th {
  text-transform: uppercase;
  font-size: 1rem;
  color: #000000; }

.ui-datepicker tbody td {
  padding: 0;
  border: #AAAAAA 1px solid; }

.ui-datepicker tbody td:last-child {
  border-right: 0px; }

.ui-datepicker tbody tr {
  border-bottom: 1px solid #6ac3ff; }

.ui-datepicker tbody tr:last-child {
  border-bottom: 0px; }

.ui-datepicker a {
  text-decoration: none; }

.ui-datepicker td span, .ui-datepicker td a {
  display: inline-block;
  text-align: center;
  width: 60px;
  height: 20px;
  line-height: 20px; }

.ui-datepicker-calendar .ui-state-default {
  color: #000000;
  height: 20px;
  width: 25px; }

.ui-datepicker-calendar .ui-state-hover {
  background: #6ac3ff;
  transition: all 1s; }

.ui-datepicker-calendar .ui-state-active {
  background: #3aacf8;
  color: #000000;
  position: relative;
  margin: -1px; }

.ui-tooltip {
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  background-color: #ffffff;
  color: #111111;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 2rem;
  box-shadow: 0 0 7px black; }

body .ui-tooltip {
  border-width: 2px; }

#slidein__diary_audit,
#display_diary_audit__chk,
#display_waiting_list__chk {
  display: none; }

.slidein {
  width: 100%;
  height: 100vh;
  top: 100px;
  z-index: 999;
  position: fixed; }
  .slidein h1 {
    background-color: #555555;
    color: #ffffff;
    padding: 0.7rem 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.5rem; }
  .slidein__diary_audit {
    z-index: 1001;
    position: fixed;
    width: 350px;
    right: 50px;
    top: 100px;
    height: 80vh;
    overflow-y: scroll;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 0px 12px -1px rgba(0, 0, 0, 0.78);
    -moz-box-shadow: 0px 0px 12px -1px rgba(0, 0, 0, 0.78);
    box-shadow: 0px 0px 12px -1px rgba(0, 0, 0, 0.78); }

.notification_display {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: none; }
  .notification_display--closed_content {
    max-height: 30px; }
  .notification_display__alerts {
    display: flex;
    align-items: center;
    justify-content: flex-start; }
    .notification_display__alerts__content {
      font-size: 1.6rem;
      font-weight: bold; }
  .notification_display__bell {
    fill: #333;
    width: 30px;
    height: 30px; }
    .notification_display__bell--new_notifications {
      fill: #c02239; }
  .notification_display__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow-y: hidden;
    max-height: 30px;
    padding: 5px 5px;
    background-color: #96ABFF;
    z-index: 1002; }
    .notification_display__header h1 {
      font-size: 1.6rem;
      margin: 0; }
    .notification_display__header--new_notifications {
      background-color: #FF325B; }
    .notification_display__header .notification__toggle {
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center; }
      .notification_display__header .notification__toggle .icon {
        width: 1.5rem;
        height: 1.5rem;
        color: #333; }
        .notification_display__header .notification__toggle .icon--minus {
          display: none; }
  .notification_display__content {
    position: relative;
    font-size: 1.2rem;
    width: 100%;
    border-bottom: 1px solid #333333;
    padding: 0.5rem;
    background-color: white;
    z-index: 1001;
    /* Hidden state */
    transform: translateY(-150%);
    opacity: 1;
    transition: transform 1s ease, opacity 1s ease;
    display: block; }
    .notification_display__content--visible {
      transform: translateY(0);
      opacity: 1;
      height: 100%;
      pointer-events: auto; }
    .notification_display__content__details {
      background-color: white; }
  .notification_display__employees-employee_name {
    font-weight: bold; }
  .notification_display__employees-date_time_seen {
    color: black;
    background-color: greenyellow;
    padding: 0.3rem;
    font-weight: bold; }

.notification-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-content: left;
  border-bottom: 1px solid #ddd;
  height: 3rem; }

.notification-cell {
  padding: 2px 2px;
  font-size: 14px; }

.notification-cell input[type="checkbox"] {
  transform: scale(1.2);
  height: 2.5rem; }

.notification_display__table {
  position: relative;
  width: 100%;
  border-collapse: collapse; }
  .notification_display__table table {
    width: 100%;
    table-layout: fixed; }
  .notification_display__table th, .notification_display__table td {
    padding: 0.4rem;
    text-align: left;
    border: 1px solid #ccc;
    font-size: 1.2rem; }
  .notification_display__table th {
    background-color: #f0f0f0;
    font-weight: bold;
    text-align: center; }
  .notification_display__table .align_left {
    text-align: left; }
  .notification_display__table .date_time-col {
    width: 180px; }
  .notification_display__table .employee-col {
    width: 180px; }
  .notification_display__table .action-col {
    width: 220px; }
  .notification_display__table .flex-col {
    width: auto; }
  .notification_display__table_btn {
    padding: 0.4rem 0.8rem;
    margin-right: 0.3rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s ease; }
    .notification_display__table_btn--edit {
      background-color: #4caf50;
      color: #fff; }
      .notification_display__table_btn--edit:hover {
        background-color: #45a049; }
    .notification_display__table_btn--delete {
      background-color: #f44336;
      color: #fff; }
      .notification_display__table_btn--delete:hover {
        background-color: #e53935; }
  .notification_display__table__completed_by {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1rem; }
    .notification_display__table__completed_by p, .notification_display__table__completed_by select {
      margin-bottom: 0.7rem; }
  .notification_display__table__employee {
    font-size: inherit;
    font-weight: bold;
    margin-right: 1rem; }

.urgent_notification {
  background-color: #e53935;
  font-weight: bold; }

.diary_audit {
  width: 100%;
  color: #111111; }
  .diary_audit_line {
    width: 100%;
    display: grid;
    grid-template-columns: 40px 1fr 80px;
    align-items: center;
    background-color: #FAFAFA;
    padding: 1rem;
    border-bottom: 1px solid #555555;
    font-size: 1.3rem;
    cursor: pointer; }
    .diary_audit_line:hover {
      background-color: #F1F1F1; }
    .diary_audit_line__icon-tick {
      fill: #00FF00; }
    .diary_audit_line__icon-cross {
      fill: #FF0000; }
    .diary_audit_line__description-client {
      color: #306C94;
      font-size: 1.5rem;
      font-weight: bold; }
    .diary_audit_line__description-description {
      padding: 3px 0; }
      .diary_audit_line__description-description-heading {
        font-size: 1.4rem;
        font-weight: bold;
        color: #FF6464; }
      .diary_audit_line__description-description-booking_date {
        font-size: 1.4rem;
        margin-top: 3px; }
      .diary_audit_line__description-description-details {
        margin-top: 2px; }
      .diary_audit_line__description-description-audit_notes {
        font-weight: bold;
        margin-top: 3px;
        margin-bottom: 3px;
        background-color: #777777;
        padding: 4px;
        color: #ffffff; }
    .diary_audit_line__date_time {
      margin-right: 5px;
      text-align: right;
      font-weight: bold; }
  .diary_audit_alert_icon_ON {
    fill: #FF0000; }

.grid {
  width: 100%; }
  .grid__header {
    position: relative;
    width: 100%;
    background-color: #EEEEEE;
    color: #555555;
    font-size: 1.8rem;
    font-weight: 600;
    padding: 1rem 0;
    height: 4rem;
    border-bottom: 1px solid #555555; }
    .grid__header_actions {
      flex: 1;
      text-align: right;
      margin-right: 1rem; }
  .grid__line {
    padding: 0.5rem 0rem 0.5rem 0rem;
    border-bottom: 1px solid #AAAAAA; }
    .grid__line-clickable {
      height: 100%;
      cursor: pointer; }
      .grid__line-clickable:hover {
        background-color: #EEEEEE; }
  .grid__item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .grid__item-left {
      justify-content: flex-start; }
    .grid__item-right {
      justify-content: flex-end; }
    .grid__item-header {
      font-weight: bold; }

.grid_data_line {
  list-style: none;
  cursor: grab;
  padding: 0.5rem 0rem 0.5rem 0rem;
  border-bottom: 1px solid #DDDDDD; }
  .grid_data_line:hover {
    background-color: #FAFAFA; }
  .grid_data_line__image {
    position: relative;
    cursor: pointer;
    width: 100px;
    height: 100px;
    border: 1px solid #555555; }
    .grid_data_line__image_img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0; }

.sort-icon {
  width: 12px;
  height: 12px;
  margin-left: 5px;
  fill: #999;
  /* Set default arrow color */
  transition: transform 0.3s ease; }

.sort-asc {
  transform: rotate(0deg);
  /* Default is up arrow */ }

.sort-desc {
  transform: rotate(180deg);
  /* Rotate to down arrow */ }

.grid__item.sortable {
  cursor: pointer; }

.overlay {
  height: 100vh;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  padding: 50px;
  z-index: 80;
  /* Fallback for web browsers that don't support RGBa */
  background-color: black;
  /* RGBa with 0.6 opacity */
  background-color: rgba(0, 0, 0, 0.6);
  transition: opacity 500ms;
  /*
    visibility: hidden;
    opacity: 0;
    */ }
  .overlay__z-index_1 {
    z-index: 101; }

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  display: block;
  font-family: inherit;
  font-size: 2rem;
  border: #333333 1px solid;
  text-align: center;
  border-radius: 10px;
  color: #111111;
  background-color: #F0F0F0;
  overflow: hidden; }
  @media only screen and (max-width: 1680px) {
    .popup {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translate(-50%, -10%); } }
  .popup__header {
    text-align: center;
    background-color: #333333;
    padding: 1rem;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    font-size: 2rem;
    color: #ffffff; }
  .popup__body {
    text-align: center;
    background-color: #F0F0F0;
    color: #333333;
    padding: 1rem 2rem;
    font-size: 2rem; }
    .popup__body-text {
      margin-bottom: 0.7rem; }
  .popup__actions {
    width: 100%;
    text-align: right;
    padding: 1rem;
    margin-right: 1rem;
    font-size: 2rem;
    border-top: #999999 1px solid; }
  .popup__button {
    font-size: 1.2rem;
    font-weight: 700;
    height: 3rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background-color: #333333;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer; }
    .popup__button--disabled {
      background-color: #BBBBBB;
      cursor: not-allowed; }
  .popup__input-small {
    width: 200px; }
  .popup__input-medium {
    width: 300px; }
  .popup__input-large {
    width: 500px; }
  .popup__input-price {
    width: 100px;
    text-align: right; }
  .popup__options_header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #BBBBBB; }
  .popup__user_password_prompt {
    width: 300px; }
    .popup__user_password_prompt__select {
      width: 90%; }
    .popup__user_password_prompt__password {
      width: 90%; }
  .popup__sms_history {
    font-size: 1.2rem;
    max-height: 60vh;
    overflow-y: scroll;
    text-align: left; }

#popup_confirm_unsaved_query_type {
  display: none; }

#popup_client_form {
  padding: 1rem 2rem; }

#ajax_loader,
#popup_confirm_unsaved,
#popup__edit_transaction,
#popup__edit_category,
#popup__are_you_sure,
#popup__employee_cost,
#popup__enter_client,
#popup_confirm_delete_client_note,
#popup__edit_client_notes,
#popup__gift_voucher_purchase,
#popup__redeem_voucher,
#popup__cashup,
#popup__deposit,
#popup__redeem_deposit,
#popup__payment_discount,
#popup__yesno_box,
#popup__message_box,
#popup__edit_marketing_campaign,
#popup__changes_saved,
#popup_confirm_delete,
#popup_confirm_delete_voucher,
#popup__edit_skin_test,
#popup__client_history,
#popup__diary_booking_info,
#popup__delete_booking_prompt,
#popup__enter_phonenumber,
#popup__treatwell_prepaid,
#popup__sms_client,
#popup__edit_client_notes_single,
#popup__notify_deposit,
#popup__move_booking_prompt,
#popup__add_to_waiting_list,
#popup__skin_test,
#popup_move_booking_points_prompt,
#popup__gift_voucher_edit,
#popup__edit_employee_notification,
#popup__request_deposit,
#popup__third_party_notes,
#popup__friend_referral {
  display: none;
  position: relative;
  z-index: 101; }

#popup__message_box,
#popup_confirm_delete,
#popup__yesno_box,
#popup__are_you_sure,
#popup__request_deposit {
  z-index: 102; }

#popup__client_old_hair_notes {
  display: none; }

.popup__edit_employee_notification {
  position: relative;
  max-width: 500px; }
  .popup__edit_employee_notification__body {
    font-size: 1.2rem; }
  .popup__edit_employee_notification__employees__heading {
    display: flex;
    margin-bottom: 1rem; }
    .popup__edit_employee_notification__employees__heading p {
      font-weight: bold;
      font-size: 1.2em;
      width: 200px; }
  .popup__edit_employee_notification__employees__select_all {
    margin-bottom: 1rem; }
  .popup__edit_employee_notification__employees__container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; }
  .popup__edit_employee_notification__employees__chk {
    display: flex;
    align-items: center;
    padding: 0.1rem;
    flex: 0 1 auto;
    max-width: 100%; }
  .popup__edit_employee_notification__employees__employee-label {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    width: 100%; }
  .popup__edit_employee_notification__employees__employee-checkbox {
    flex-shrink: 0; }
  .popup__edit_employee_notification__employees__employee-name {
    flex-grow: 1;
    word-break: break-word; }

.popup__friend_referral {
  position: relative; }
  .popup__friend_referral__body {
    min-height: 400px; }

.popup__gift_voucher {
  width: 600px; }

#popup-paymentscreen-select_employee {
  visibility: visible; }

.popup__employee_cost {
  width: 300px;
  height: auto; }
  .popup__employee_cost-body {
    width: 220px;
    margin-left: 20px; }
  .popup__employee_cost-employee_select {
    width: 220px; }
  .popup__employee_cost-price {
    width: 100px;
    text-align: right; }

#popup-paymentscreen-enter_client {
  visibility: visible; }

.popup__enter_client {
  z-index: 99;
  width: 730px;
  height: auto; }
  .popup__enter_client-body {
    width: 660px;
    margin-left: 20px; }

.popup__input-small {
  width: 200px; }

.popup__input-medium {
  width: 300px; }

.popup__input-large {
  width: 500px; }

.popup__duplicate_number {
  z-index: 101; }

#popup__edit_category {
  visibility: visible; }

.popup__edit_category {
  width: 400px;
  height: auto; }
  .popup__edit_category-body {
    width: 100%;
    padding: 1rem; }
  .popup__edit_category-form {
    width: 100%;
    border-bottom: 1px solid #555555; }

#popup__diary_booking_info {
  visibility: visible; }

.popup__booking_info {
  position: absolute;
  top: 10%;
  left: 10%;
  transform: translate(0%, 0%);
  font-size: 1.8rem;
  border-radius: 12px; }

.popup__appointment_info {
  background-color: #F0F0F0;
  text-align: left; }
  .popup__appointment_info__heading {
    text-align: left;
    border-bottom: 1px solid #333333;
    font-weight: bold; }
  .popup__appointment_info__clients_details {
    width: 100%;
    padding: 0.5rem 1.8rem;
    border-bottom: 2px solid #555555; }
    .popup__appointment_info__clients_details__line {
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
      color: brown; }
    .popup__appointment_info__clients_details-name {
      font-weight: bold; }
  .popup__appointment_info__icon {
    width: 25px;
    height: 25px;
    margin-right: 1rem; }
  .popup__appointment_info__booking_details {
    width: 100%;
    padding: 0.5rem 2rem;
    border-bottom: 2px solid #555555; }
    .popup__appointment_info__booking_details_time {
      display: flex;
      align-items: center;
      margin-top: 0.5rem;
      padding-left: 1rem; }
    .popup__appointment_info__booking_details-section {
      padding: 0.5rem 1rem; }
      .popup__appointment_info__booking_details-section:not(:last-child) {
        border-bottom: 1px dotted #777777; }
    .popup__appointment_info__booking_details-employee {
      font-weight: bold; }
  .popup__appointment_info__treatments {
    width: 100%;
    padding: 0.5rem 2rem;
    border-bottom: 2px solid #333333; }
    .popup__appointment_info__treatments-services {
      margin-top: 0.8rem;
      font-size: 1.6rem;
      text-align: left; }

.popup__skin_test__body {
  font-size: 2rem;
  margin-bottom: 2rem; }
  .popup__skin_test__body_warning {
    display: flex;
    align-items: center; }
    .popup__skin_test__body_warning p {
      margin-left: 1rem;
      font-weight: bold; }

#popup__client_history__display {
  padding: 0 1rem;
  width: 100%;
  max-height: 800px;
  overflow-x: hidden; }

#popup_client_history__clientid {
  display: none; }

.popup__client_history {
  width: 1130px;
  border-radius: 10px;
  text-align: left;
  overflow-x: hidden; }

.client_history {
  color: #111111;
  width: 100%;
  padding: 1rem; }
  .client_history__header {
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .client_history__header_title {
      font-size: 2.2rem; }
    .client_history__header_icon {
      height: 40px;
      width: 30px;
      margin-right: 2rem;
      fill: #111111;
      cursor: pointer; }
  .client_history__data_heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 2rem; }
    .client_history__data_heading-title {
      font-size: 2.5rem; }
  .client_history__data {
    font-size: 1.5rem;
    border-bottom: 2px solid #AAAAAA;
    padding-bottom: 1rem; }
    .client_history__data_content {
      overflow-y: scroll;
      overflow-x: hidden;
      max-height: 300px; }
      .client_history__data_content-saleshistory {
        max-height: 550px; }
      .client_history__data_content-nodata {
        font-size: 2rem;
        margin-top: 1rem;
        margin-left: 1rem; }
    .client_history__data_line {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 0.3rem;
      padding-bottom: 0.3rem;
      border-bottom: 1px solid #AAAAAA;
      flex-wrap: nowrap; }
    .client_history__data_header {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-weight: bold;
      text-align: center;
      padding-bottom: 0.5rem;
      padding-top: 0.3rem;
      background-color: #999999; }
    .client_history__data-overdue {
      color: crimson;
      font-weight: bold; }
    .client_history__data-id {
      width: 80px; }
    .client_history__data-date {
      width: 140px; }
    .client_history__data-treatments {
      width: 350px;
      overflow: hidden; }
    .client_history__data-employees {
      width: 200px;
      overflow: hidden; }
    .client_history__data-employee_single {
      width: 100px;
      overflow: hidden; }
    .client_history__data-price {
      width: 100px; }
    .client_history__data-notice {
      width: 100px; }
    .client_history__data-noshow {
      width: 50px; }
    .client_history__data-category {
      width: 150px;
      overflow: hidden; }
    .client_history__data-note_title {
      width: 180px;
      overflow: hidden; }
    .client_history__data-note {
      width: 350px;
      overflow: hidden; }
    .client_history__data-icon {
      height: 25px;
      width: 25px; }
      .client_history__data-icon_noshow {
        fill: #FF0000; }
      .client_history__data-icon_veryshortnotice {
        fill: #DAA300; }
      .client_history__data-icon_shortnotice {
        fill: #00FF00; }
  .client_history__tabs {
    font-size: 0;
    margin-top: 10px;
    text-align: left;
    border-bottom: 2px solid #333333;
    background-color: #CCCCCC; }
    .client_history__tabs_tab {
      font-size: 2rem;
      margin-right: 2px;
      display: inline-block;
      background-color: #555555;
      color: #EEEEEE;
      padding: 0.7rem 1rem;
      border-radius: 0px 5px 0px 0px;
      cursor: pointer; }
      .client_history__tabs_tab:hover {
        background-color: #333333; }
    .client_history__tabs_client-name {
      font-size: 2.5rem;
      padding: 4px;
      padding-right: 2rem;
      float: right;
      margin: auto; }
  .client_history__rating-icon {
    width: 30px;
    height: 30px;
    margin-right: 0.7rem;
    fill: #FF3300; }
    .client_history__rating-icon-rating-1 {
      fill: #FF3300; }
    .client_history__rating-icon-rating-2 {
      fill: #DAA300; }
    .client_history__rating-icon-rating-3 {
      fill: #00FF00; }
  .client_history__general {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    font-size: 2rem; }
    .client_history__general_section {
      margin-right: 2rem;
      display: flex;
      align-items: center; }
    .client_history__general-info_header {
      margin-right: 0.5rem; }
    .client_history__general-info_data {
      color: #555555; }
  .client_history__oldnote {
    display: flex;
    text-align: left;
    max-width: 800px;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem; }
    .client_history__oldnote-date {
      width: 100px; }

.popup__edit_client_notes {
  width: 700px;
  min-height: 200px;
  border-radius: 10px;
  text-align: left; }
  .popup__edit_client_notes-form {
    padding: 1rem 2rem; }

.client_referrer_list {
  width: 100%;
  display: flex; }

.popup_notify_deposits {
  width: 800px; }
  .popup_notify_deposits_container {
    width: 90%;
    margin-left: auto;
    margin-right: auto; }
    .popup_notify_deposits_container_heading {
      width: 100%;
      text-align: left;
      margin-bottom: 0.5rem; }
    .popup_notify_deposits_container_list {
      width: 100%;
      min-height: 100px;
      border: 1px solid #111111; }
      .popup_notify_deposits_container_list-ref {
        width: 100px; }
      .popup_notify_deposits_container_list-amount {
        width: 60px;
        text-align: right; }
      .popup_notify_deposits_container_list-date {
        width: 100px; }
      .popup_notify_deposits_container_list-services {
        width: 300px;
        text-align: left; }
      .popup_notify_deposits_container_list__line {
        display: flex;
        width: 100%;
        border-bottom: #999999 solid 1px;
        background-color: #ffffff;
        align-items: center;
        font-size: 1.3rem;
        padding: 0.5rem;
        white-space: initial; }
        .popup_notify_deposits_container_list__line p {
          margin: 0;
          padding: 0; }
      .popup_notify_deposits_container_list__header {
        background-color: #BBBBBB; }
        .popup_notify_deposits_container_list__header p {
          font-weight: bold;
          text-align: center; }

.popup__deposit_notes {
  z-index: 99 !important;
  font-size: 1.8rem;
  border-radius: 5px;
  min-width: 500px;
  max-height: 500px; }
  .popup__deposit_notes__text {
    padding: 1em; }
    .popup__deposit_notes__text-textarea {
      border: none;
      resize: none;
      overflow-y: scroll;
      width: 100%;
      height: 100px;
      padding: 1em;
      font-size: 1.5rem; }

#popup__duplicate_number,
#duplicate_number_chk {
  display: none; }

.duplicate_numbers {
  margin-top: 1rem;
  text-align: left; }
  .duplicate_numbers__header {
    margin-bottom: 1rem; }
  .duplicate_numbers__address {
    font-size: 1.6rem;
    display: grid;
    grid-template-columns: 200px 300px 100px 150px;
    grid-gap: 10px;
    background-color: #DDDDDD;
    margin-bottom: 0.5rem; }
    .duplicate_numbers__address p {
      padding: 1rem 1rem; }
    .duplicate_numbers__address p:not(:last-child) {
      border-right: 1px solid #BBBBBB; }

.popup__add_to_waiting_list {
  width: 800px; }
  .popup__add_to_waiting_list__content {
    padding: 2rem;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    grid-template-areas: "client client"
 "treatments date_range"
 "treatments employee"
 "treatments days"; }
  .popup__add_to_waiting_list__heading {
    text-align: left;
    margin-bottom: 0.7rem; }
  .popup__add_to_waiting_list__treatments {
    grid-area: treatments;
    width: 100%;
    min-width: 300px;
    height: 500px;
    overflow: hidden; }
  .popup__add_to_waiting_list__date_range {
    grid-area: date_range; }
  .popup__add_to_waiting_list__employee {
    grid-area: employee; }
  .popup__add_to_waiting_list__days {
    grid-area: days; }
    .popup__add_to_waiting_list__days input[type="checkbox"] {
      height: 15px;
      width: 15px; }
    .popup__add_to_waiting_list__days__select_all {
      display: grid;
      grid-template-columns: 120px 1fr;
      justify-items: flex-start;
      border-bottom: 1px solid #DDDDDD;
      padding-bottom: 0.4rem;
      margin-bottom: 0.4rem;
      font-size: 1.5rem; }
    .popup__add_to_waiting_list__days__line {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      justify-items: center;
      align-items: center;
      grid-gap: 5px;
      border-bottom: 1px solid #DDDDDD;
      padding-bottom: 0.4rem;
      margin-bottom: 0.4rem;
      font-size: 1.5rem; }

.waiting_list_notes {
  padding: 1rem;
  width: 350px;
  max-width: 350px;
  min-width: 350px;
  max-height: 70px;
  min-height: 50px;
  overflow-y: scroll;
  resize: none; }

.waiting_list_display {
  position: relative;
  width: 100%;
  min-height: 60vh; }

/* Make the control the positioning context for the dropdown */
.product_selection__control {
  position: relative;
  z-index: 1; }

.product_selection__control__height {
  height: 240px; }

/* The dropdown panel */
.product_selection__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* same width as input */
  background: #fff;
  border: 1px solid #ccc;
  max-height: 150px;
  overflow-y: auto;
  z-index: 999;
  font-size: 1em;
  /* 👈 smaller text */ }

/* UL inside dropdown */
.product_selection__options {
  list-style: none;
  margin: 0;
  padding: 0; }

/* Each option row */
.product_selection__option {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 1.2rem; }

.product_selection__option:hover {
  background: #f0f0f0; }

/* Selected chip below input */
.product_selection__selected {
  margin-top: 0.5rem; }

.product_selection__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  border: 1px solid #ccc;
  padding: 0.25rem 0.6rem;
  background: #fafafa;
  cursor: pointer;
  font-size: 1em; }

.product_selection__chip-remove {
  font-weight: bold; }

/* IMPORTANT: make sure the wrapper isn't clipping the dropdown */
.product_selection__wrapper {
  overflow: visible;
  /* override any overflow: hidden; if you had it */ }

.index {
  min-height: 100vh;
  background-color: #FAFAFA;
  border-top: 8px solid #111111; }

.login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 300px;
  background-color: #ffffff;
  margin-top: -150px;
  font-size: 2rem; }
  .login__heading {
    text-align: center;
    font-size: 4rem; }
  .login__box {
    position: relative;
    border: 1px solid #111111;
    width: 500px;
    border-radius: 10px;
    padding-top: 2rem; }
    .login__box_inputs {
      margin-left: auto;
      margin-right: auto;
      width: 400px; }
      .login__box_inputs-text_input {
        width: 100%;
        text-align: left; }
      .login__box_inputs-resetpw {
        display: block;
        font-size: 1.7rem;
        color: #2196F3;
        text-align: right;
        text-decoration: none;
        margin-top: -10px; }
        .login__box_inputs-resetpw:link, .login__box_inputs-resetpw:visited {
          color: #2196F3;
          text-decoration: none;
          transition: all .2s;
          line-height: 1; }
      .login__box_inputs-submit {
        margin-top: 20px;
        font-size: 1.5rem;
        padding: 1rem;
        color: #ffffff;
        background-color: #2196F3;
        width: 100%; }
        .login__box_inputs-submit:hover {
          background-color: #0086F3; }

.datepicker {
  width: 100%;
  margin-bottom: 1rem;
  border: 1px solid #555555; }

.diary_wrapper {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 300px auto;
  grid-gap: 10px;
  grid-template-areas: "sidebar diary"; }

.sidebar__inner {
  margin-left: 10px;
  margin-top: 1rem;
  margin-bottom: 10px; }

.sidebar {
  position: relative;
  grid-area: sidebar;
  width: 300px; }
  .sidebar__title {
    width: 100%;
    text-align: center;
    font-size: 2.1rem;
    border-bottom: 1px solid #BBBBBB;
    padding: 0.7rem;
    color: #333333; }
  .sidebar__treatments {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    border: #111111 1px solid; }
    .sidebar__treatments_treatment {
      position: relative;
      display: flex;
      padding: 0.5rem 0.5rem;
      border-bottom: #555555 1px solid;
      cursor: not-allowed;
      background-color: #DDDDDD; }
      .sidebar__treatments_treatment-description {
        width: 150px;
        margin-left: 0.5rem; }
      .sidebar__treatments_treatment-category {
        font-weight: bold;
        width: 100px;
        margin-left: 0.5rem; }
      .sidebar__treatments_treatment-price_icon {
        cursor: pointer; }
        .sidebar__treatments_treatment-price_icon:hover + .treatment_price {
          visibility: visible; }

.treatment_background__enabled {
  background-color: white;
  cursor: pointer; }
  .treatment_background__enabled:hover {
    background-color: #F0F0F0; }

.treatment_background__disabled {
  background-color: #999999;
  cursor: not-allowed; }
  .treatment_background__disabled:hover {
    opacity: 1;
    background-color: #999999; }

.treatment_background__selected {
  background-color: #ffb829;
  cursor: pointer; }
  .treatment_background__selected:hover {
    opacity: 0.8;
    background-color: #ffb829; }

.treatment_price {
  visibility: hidden;
  position: absolute;
  top: 3px;
  right: 40px;
  background-color: #111111;
  color: white;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  border-radius: 10px; }

#diary {
  grid-area: diary;
  width: 100%;
  grid-column-start: 2; }

.booking_note_bg {
  background-color: #ffb829; }

.diary {
  position: relative;
  width: 100%;
  color: #111111;
  border-collapse: collapse;
  float: right;
  margin-top: 1rem;
  z-index: 0; }
  .diary_header {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: #AAAAAA;
    color: #111111;
    text-align: center;
    font-size: 1.7rem; }
    @media only screen and (max-width: 1680px) {
      .diary_header {
        font-size: 1.3rem; } }
    .diary_header__show_cancelled {
      font-size: inherit;
      display: flex;
      justify-items: center;
      align-items: center;
      background-color: #888888;
      transition: background-color 0.5s;
      min-height: 30px;
      padding: 3px 7px; }
      .diary_header__show_cancelled-label {
        cursor: pointer;
        margin-right: 1rem; }
      .diary_header__show_cancelled:hover {
        background-color: #777777; }
    .diary_header__showall {
      margin-left: 2rem;
      cursor: pointer; }
      .diary_header__showall:hover {
        color: #111111;
        text-decoration: underline; }
    .diary_header__group {
      display: flex;
      align-items: center;
      gap: 1rem; }
    .diary_header__employees {
      display: flex;
      align-items: center; }
      .diary_header__employees_title {
        color: chartreuse; }
      .diary_header__employees_input {
        display: block;
        font-size: 2rem;
        width: auto;
        border-radius: 10px;
        padding: 0.5rem;
        background-color: #555555;
        border-color: #555555;
        color: #ffffff; }
        .diary_header__employees_input:hover {
          border-color: #ffffff; }
        .diary_header__employees_input:focus {
          border-color: #ffffff; }
    .diary_header__week {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-right: 2rem;
      height: 35px;
      font-size: inherit; }
      .diary_header__week-nav {
        display: flex;
        align-items: center;
        background-color: #888888;
        height: 100%;
        padding: 0px 7px;
        cursor: pointer;
        transition: all 0.5s; }
        .diary_header__week-nav:hover {
          background-color: #666666; }
        .diary_header__week-nav_icon {
          width: 50px; }
      .diary_header__week_info {
        text-align: center;
        margin-left: 1rem;
        margin-right: 1rem;
        font-weight: bold; }
      .diary_header__week-today {
        display: flex;
        align-items: center;
        margin-right: 1rem;
        font-size: 1.8rem;
        background-color: #888888;
        cursor: pointer;
        transition: all 0.5s;
        height: 100%;
        padding: 0px 7px; }
        .diary_header__week-today:hover {
          background-color: #666666; }
    .diary_header__public_holiday_icon {
      width: 38px;
      padding: 5px;
      cursor: pointer;
      background-color: #ffffff;
      border-radius: 5px; }
      .diary_header__public_holiday_icon:hover {
        background-color: #EDB500; }
      .diary_header__public_holiday_icon-day_set {
        background-color: #BB8F00;
        border-radius: 5px; }
  .diary__column {
    width: 100%; }
    .diary__column_header {
      width: 100%; }
      .diary__column_header_th {
        font-size: 2rem;
        top: 0;
        background-color: #ffffff;
        text-align: center;
        max-width: 200px;
        overflow: wrap;
        padding-bottom: 0.7rem; }
        .diary__column_header_th__date {
          font-size: 1.5rem; }
      .diary__column_header_link {
        color: inherit; }
        .diary__column_header_link:link, .diary__column_header_link:visited {
          color: inherit; }
        .diary__column_header_link:hover, .diary__column_header_link:active {
          color: #555555; }
    .diary__column_td {
      min-width: 125px;
      max-width: 250px;
      overflow: wrap;
      border-right: 1px solid white; }
    .diary__column_row {
      position: relative;
      align-items: center;
      width: 100%;
      border-bottom: #555555 1px solid;
      height: 50px;
      overflow: hidden; }
      .diary__column_row-time_now {
        border-top: 3px dashed crimson; }
    .diary__column_row_timeslot {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      font-size: 1.2rem;
      height: 50px;
      background-color: #CCCCCC;
      cursor: not-allowed;
      z-index: 0; }
      .diary__column_row_timeslot-time {
        position: relative;
        width: 50px;
        border-right: #555555 1px solid;
        font-size: 1.3rem;
        font-weight: bold;
        height: 50px;
        text-align: center; }
        .diary__column_row_timeslot-time_time {
          margin-top: 5px; }
      .diary__column_row_timeslot-employee_name {
        font-size: 2rem;
        font-weight: bold;
        color: #BBBBBB;
        text-align: center;
        margin-top: 0.5rem; }
      .diary__column_row_timeslot-details {
        position: relative;
        flex: 1;
        height: 50px;
        width: 75px;
        padding: 2px 25px 2px 4px;
        overflow: hidden; }
      .diary__column_row_timeslot-disabled {
        background-color: #AAAAAA; }
      .diary__column_row_timeslot-overtime {
        background-color: #AB96FF; }
      .diary__column_row_timeslot-holiday {
        background-color: #bb8f00; }
      .diary__column_row_timeslot-block_diary {
        background-color: #FF6464; }
      .diary__column_row_timeslot-new_client {
        position: absolute;
        top: 0;
        right: -100px;
        min-width: 50px;
        z-index: 1;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: flex-end; }
        .diary__column_row_timeslot-new_client-show {
          right: 17px; }
        .diary__column_row_timeslot-new_client p {
          font-size: 1.6rem;
          color: #ffffff;
          opacity: 1; }
        .diary__column_row_timeslot-new_client_img {
          width: 50px;
          margin-right: 1px; }
    .diary__column-checkbox {
      display: none; }
    .diary__column-icon {
      transition: all 0.2s; }
      .diary__column-icon-actions {
        width: 20px;
        height: 20px; }
        .diary__column-icon-actions-close {
          width: 8px;
          height: 8px; }
          .diary__column-icon-actions-close:hover {
            fill: #FF3300; }
      .diary__column-icon-info {
        width: 18px;
        height: 18px;
        display: none;
        margin-top: 0.5rem;
        cursor: pointer; }
        .diary__column-icon-info:hover {
          fill: #555555; }
      .diary__column-icon-payment {
        width: 19px;
        height: 19px;
        display: none;
        margin-top: 0.5rem;
        cursor: pointer;
        fill: #FF3300; }
        .diary__column-icon-payment:hover {
          fill: #306000; }
        .diary__column-icon-payment-black {
          fill: black; }
          .diary__column-icon-payment-black:hover {
            fill: black; }
      .diary__column-icon-block {
        width: 10px;
        height: 18px;
        margin-top: 0.5rem;
        cursor: pointer; }
        .diary__column-icon-block:hover {
          fill: #555555; }
  .diary__treatments {
    height: 1000px; }

.diary__column_row_timeslot-status {
  position: absolute;
  top: 0;
  right: 20px;
  display: flex;
  align-items: center;
  height: 100%;
  z-index: 1; }
  .diary__column_row_timeslot-status__prepaid {
    display: none;
    width: 7px;
    height: 100%;
    background-color: #02B0B9; }
  .diary__column_row_timeslot-status__external_booking {
    display: none;
    width: 7px;
    height: 100%;
    background-color: #4036ED; }
  .diary__column_row_timeslot-status__urgent_skin_text {
    display: none;
    width: 7px;
    height: 100%;
    background-color: #FF3232; }

.diary__column_row_timeslot-actions {
  background-color: white;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  width: 0px;
  height: 100%;
  transition: 1s;
  z-index: 2; }
  .diary__column_row_timeslot-actions-bin {
    display: block;
    padding: 0rem 0.5rem;
    cursor: pointer; }
  .diary__column_row_timeslot-actions-swap {
    display: block;
    padding: 0rem 0.5rem;
    cursor: pointer; }
  .diary__column_row_timeslot-actions-noshow {
    display: block;
    padding: 0rem 0.5rem;
    cursor: pointer; }
  .diary__column_row_timeslot-actions-prepaid {
    display: block;
    padding: 0rem 0.5rem;
    cursor: pointer; }
    .diary__column_row_timeslot-actions-prepaid_img {
      width: 25px;
      height: 25px; }
  .diary__column_row_timeslot-actions-close {
    background-color: white;
    margin-left: 0px;
    min-width: 20px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: not-allowed; }
    .diary__column_row_timeslot-actions-close-show {
      margin-left: -20px;
      cursor: pointer; }

.show_actions_2 {
  width: 70px; }

.show_actions_4 {
  width: 125px; }

.actions_icon_cross {
  width: 10px;
  height: 10px; }

.timeslot_details_overlay {
  background-color: #333333 !important;
  color: antiquewhite;
  font-size: 1.2rem;
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; }

.treatment_selected,
.treatment_selected__waiting {
  display: none; }

.popup__diary_delete_booking-flex {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1rem; }

.popup__diary_delete_booking_textblock {
  text-align: left; }

.popup__diary_delete_booking-question {
  margin-right: 1rem;
  color: #111111; }
  .popup__diary_delete_booking-question-sub {
    font-size: 1.5rem;
    margin-top: 0.7rem; }

.popup__diary_delete_booking-button {
  width: 120px;
  text-align: center; }

.popup__diary_delete_booking-actions {
  border-top: 1px solid #555555;
  margin-top: 20px;
  padding-top: 10px;
  margin-bottom: 10px; }

.booking_notes {
  background-color: #222222; }
  .booking_notes__box {
    position: fixed;
    bottom: -100%;
    left: 5px;
    z-index: 1;
    display: block;
    font-family: inherit;
    font-size: 2rem;
    border: #111111 2px solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
    width: 300px;
    height: 200px;
    transition: 1s all; }
    .booking_notes__box__open {
      bottom: 0%; }
  .booking_notes__header {
    display: flex;
    background-color: #222222;
    color: #ffffff;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px; }
    .booking_notes__header-title {
      flex: 1; }
    .booking_notes__header-close {
      font-weight: bold;
      cursor: pointer; }
  .booking_notes__text {
    background-color: #DDDDDD;
    width: 100%;
    height: 80%; }
    .booking_notes__text-textarea {
      width: 100%;
      height: 100%;
      resize: none;
      padding: 0.5rem;
      font-size: 1.5rem;
      font-weight: bold;
      font-family: inherit;
      background-color: #ffb829;
      color: #222222; }
  .booking_notes__footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0.6rem;
    background-color: #222222; }

.payment_options_menu {
  display: none;
  position: absolute;
  overflow-y: visible;
  width: 100%;
  top: 0;
  left: 0;
  text-align: left;
  background-color: white;
  font-size: 10px;
  z-index: 100; }
  .payment_options_menu__link {
    cursor: pointer;
    padding: 2px 4px; }
    .payment_options_menu__link:hover {
      background-color: #AAAAAA; }
  .payment_options_menu__min_charge {
    background-color: #777777;
    color: white;
    padding: 2px 4px;
    font-size: 11px; }

#block_options_menu {
  opacity: 0;
  /* Start invisible */
  transition: opacity 1s ease;
  /* Transition effect */
  position: absolute;
  top: -200px;
  left: -200px;
  width: 150px;
  border: 1px #333333 solid;
  background-color: #EDB500;
  z-index: 1001; }

.blockslot_options_menu {
  width: 100%;
  text-align: left;
  font-size: 10px; }
  .blockslot_options_menu__link {
    cursor: pointer;
    padding: 4px 4px; }
    .blockslot_options_menu__link:hover {
      background-color: #AAAAAA; }
  .blockslot_options_menu__close {
    width: 100%;
    font-size: 12px;
    text-align: right;
    padding: 3px;
    border-bottom: solid #333333 1px;
    cursor: pointer; }
    .blockslot_options_menu__close:hover {
      text-shadow: 1px 0 0 currentColor; }

.appointments {
  width: 100%; }

.payment {
  width: 100%;
  padding: 0px 20px 0px 20px; }
  .payment__grid {
    display: grid;
    grid-template-columns: 400px 1fr 400px;
    grid-template-rows: 300px 200px 500px 100px;
    grid-gap: 10px;
    grid-template-areas: "client product basket"
 "client product promotions"
 "client product totals"
 "na na actions"; }
  .payment__section_heading {
    width: 100%;
    padding: 0.5rem;
    background-color: #333333;
    display: flex;
    justify-content: center;
    align-items: center; }
    .payment__section_heading-header {
      color: #ffffff;
      margin-top: -1px;
      font-size: 1.6rem;
      text-align: center;
      flex-grow: 1; }
    .payment__section_heading-icon {
      fill: #ffffff;
      cursor: pointer;
      transition: fill 0.5s; }
      .payment__section_heading-icon:hover {
        fill: #FF3300; }
      .payment__section_heading-icon-bin {
        width: 20px;
        height: 20px; }
    .payment__section_heading_gift_voucher_icon {
      width: 30px;
      cursor: pointer; }

.client {
  grid-area: client;
  position: relative;
  margin-bottom: 1rem; }
  .client__details {
    position: relative;
    font-size: 1.8rem;
    padding: 1rem;
    width: 100%;
    border: #111111 1px solid; }
    .client__details_actions {
      width: 95%;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: #AAAAAA 1px solid;
      padding: 0.5rem; }
      .client__details_actions-icon-delete {
        height: 25px;
        width: 25px;
        margin-left: 1rem;
        cursor: pointer;
        transition: all 0.5s; }
        .client__details_actions-icon-delete:hover {
          fill: red; }
      .client__details_actions-icon-user {
        height: 35px;
        width: 35px;
        margin-bottom: 7px;
        cursor: not-allowed; }
      .client__details_actions-icon-user1 {
        height: 35px;
        width: 35px;
        cursor: pointer;
        margin-left: 1rem; }
      .client__details_actions-title {
        font-size: 2rem;
        flex: 1; }
    .client__details_display {
      width: 100%;
      width: 95%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 1rem;
      overflow: hidden; }
      .client__details_display-title {
        font-size: 2rem; }
    .client__details_info {
      display: none;
      position: relative;
      margin-top: 10px;
      height: 40px;
      width: 95%;
      margin-left: auto;
      margin-right: auto; }
      .client__details_info__flex {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        padding: 0.5rem;
        position: relative;
        border-top: 1px solid #AAAAAA; }
      .client__details_info-icon {
        position: relative;
        width: 30px;
        height: 30px;
        margin-left: 10px;
        cursor: pointer;
        transition: all 0.5s; }
        .client__details_info-icon:hover {
          fill: red; }
    .client__details__email {
      margin-top: 0.5rem;
      font-weight: bold;
      width: 100%; }
    .client__details__phonenumber {
      margin-top: 0.5rem;
      font-weight: bold; }
  .client__search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; }
    .client__search-input {
      width: 100%;
      font-size: 2rem;
      border-radius: 10px;
      padding: 0.7rem 1rem 0.7rem 0.7rem;
      z-index: 9;
      margin-right: 1rem;
      text-align: left; }
      .client__search-input-products {
        width: 300px; }
      .client__search-input-with_icon {
        padding: 0.7rem 1rem 0.7rem 5rem; }
    .client__search-mag {
      position: absolute;
      top: 6;
      left: 0;
      padding-left: 5px;
      z-index: 10;
      fill: #AAAAAA;
      height: 33px;
      width: 33px; }
    .client__search_results {
      width: 100%;
      height: 0px;
      overflow-y: scroll;
      border: #111111 1px solid;
      margin-top: 1rem;
      margin-bottom: 1rem;
      transition: all 1s; }
      .client__search_results-option {
        font-size: 2rem;
        padding-left: 0.5rem;
        cursor: pointer; }
        .client__search_results-option:hover {
          background-color: #AAAAAA; }
  .client__search-input {
    margin-right: 1rem; }
  .client__group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem; }
  .client__select {
    width: 100%; }
  .client__addnew {
    cursor: pointer; }
    .client__addnew-icon {
      margin-left: 0.7rem;
      width: 50px;
      height: 50px; }
  .client__edit_client-button {
    width: 100%;
    padding: 1rem;
    background-color: #AAAAAA;
    color: #ffffff;
    cursor: not-allowed; }
    .client__edit_client-button-enabled {
      cursor: pointer;
      background-color: #111111; }

.products {
  grid-area: product;
  width: 100%;
  height: 100%; }
  .products__nav {
    display: flex;
    justify-content: space-between;
    height: 60px; }
    .products__nav-basket {
      justify-content: flex-end; }
    .products__nav_links {
      display: flex;
      align-items: center; }
    .products__nav_option {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 130px;
      padding-left: 5px;
      padding-right: 5px;
      text-align: center;
      cursor: pointer;
      border-left: 1px solid #999999;
      height: 100%; }
      .products__nav_option:hover {
        background-color: #F0F0F0; }
      .products__nav_option:hover > .products__nav_option-text {
        text-decoration: underline; }
      .products__nav_option-icon {
        position: relative;
        margin-top: 10px; }
        .products__nav_option-icon-pig {
          width: 35px; }
        .products__nav_option-icon-voucher {
          margin-bottom: 1px;
          width: 35px; }
      .products__nav_option-text {
        font-size: 1.2rem; }
  .products__display_products {
    overflow: scroll;
    height: 100%;
    border: #111111 1px solid; }
  .products__line {
    padding: 0.2rem 0.5rem;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-bottom: #EEEEEE solid thin; }
    .products__line:hover {
      background-color: #EEEEEE; }
    .products__line-highlight {
      background-color: #FFFF99; }
    .products__line-product {
      width: 45%;
      overflow-wrap: normal; }
    .products__line-category {
      width: 20%;
      overflow-wrap: normal;
      text-align: left; }
    .products__line-price {
      width: 10%;
      overflow-wrap: normal;
      text-align: left; }
    .products__line-skintest {
      width: 25%;
      overflow-wrap: normal;
      text-align: left; }
      .products__line-skintest_text {
        color: crimson; }
    .products__line-action {
      margin-right: 10px;
      flex: 1;
      text-align: right; }
  .products__addtobasket_icon {
    width: 25px;
    height: 25px;
    fill: #306000; }
  .products__search {
    position: relative;
    display: flex;
    align-items: center;
    width: 370px;
    padding-left: 10px;
    border-left: 1px solid #999999; }
    .products__search-diary {
      width: 100%;
      border: none;
      padding-left: 0;
      margin-bottom: 0.7rem; }
    .products__search-input {
      width: 100%;
      font-size: 2rem;
      border-radius: 10px;
      padding: 0.7rem 1rem 0.7rem 5rem;
      z-index: 9;
      margin-right: 1rem;
      text-align: left; }
    .products__search-mag {
      position: absolute;
      top: 6;
      left: 0;
      padding-left: 15px;
      z-index: 10;
      fill: #AAAAAA;
      height: 43px;
      width: 43px; }
    .products__search-cross {
      height: 30px;
      width: 30px;
      cursor: pointer; }

.basket {
  position: relative;
  grid-area: basket;
  width: 100%;
  height: 100%; }
  .basket__contents {
    overflow-y: scroll;
    border: #111111 1px solid;
    padding: 0.7rem;
    height: 210px; }
  .basket__line {
    display: flex;
    font-size: 1.5rem;
    border-bottom: #EEEEEE solid thin;
    padding: 0.5rem 0rem; }
    .basket__line-description {
      width: 300px; }
    .basket__line-price {
      width: 100px;
      margin-left: 10px;
      text-align: right; }
    .basket__line-employee {
      width: 100px;
      margin-left: 10px;
      text-align: right;
      overflow-x: hidden; }
    .basket__line-icon {
      cursor: pointer; }
      .basket__line-icon_bin {
        width: 20px;
        height: 20px;
        transition: fill 0.5s; }
        .basket__line-icon_bin:hover {
          fill: #FF3300; }

.totals {
  grid-area: totals;
  border: #111111 1px solid; }
  .totals__content {
    padding-top: 10px;
    width: 300px;
    margin-left: auto;
    margin-right: auto; }
  .totals__label {
    display: inline-block;
    width: 180px;
    font-size: 2.2rem; }
  .totals__redeem_points {
    display: block;
    font-size: 1.5rem;
    margin-left: 1rem;
    color: #2196F3; }
  .totals__input {
    width: 110px;
    background-color: #EEEEEE;
    font-size: 2rem;
    text-align: center; }
    .totals__input-user_input {
      background-color: #6ac3ff; }
      .totals__input-user_input:focus {
        background-color: #ffffff; }

.promotions {
  grid-area: promotions;
  width: 100%;
  height: 100%;
  background-color: #FAFAFA; }
  .promotions__available {
    border: #111111 1px solid;
    overflow-y: scroll;
    height: 175px; }
  .promotions__line {
    display: flex;
    font-size: 1.5rem;
    padding: 0.3rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #CCCCCC; }
    .promotions__line:hover {
      background-color: #EEEEEE; }
    .promotions__line-code {
      width: 120px; }
    .promotions__line-discountamt {
      width: 80px; }

.payment_actions {
  grid-area: actions; }

#gift_voucher_services {
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

#gift_voucher_services__value {
  display: none; }

.deposit_popup {
  width: 800px; }
  .deposit_popup__input_info {
    width: 90%;
    font-size: 1.8rem;
    color: #FF3300; }

.gift_voucher {
  width: 100%;
  font-size: 1.5rem; }
  .gift_voucher__label {
    min-width: 150px; }
  .gift_voucher__date_input {
    background-color: white;
    padding-left: 20px; }

.gift_voucher_services {
  width: 100%;
  max-height: 300px;
  font-size: 1.4rem;
  border: 1px solid #555555;
  overflow-y: scroll; }
  .gift_voucher_services__hidden {
    max-height: 0px;
    opacity: 0; }
  .gift_voucher_services__product_line {
    font-size: 1.2rem;
    cursor: pointer; }
    .gift_voucher_services__product_line:hover {
      background-color: #EEEEEE; }
    .gift_voucher_services__product_line-selected {
      background-color: #2196F3; }
      .gift_voucher_services__product_line-selected:hover {
        background-color: #0086F3; }
  .gift_voucher_services__chk {
    display: none; }

.gift-card-prompt {
  color: #a94442;
  font-size: 14px;
  margin-bottom: 10px; }

.redeem_gift_voucher__icon {
  fill: #2196F3;
  cursor: pointer;
  transition: fill 0.5s; }
  .redeem_gift_voucher__icon:hover {
    fill: #555555; }

.redeem_gift_voucher__details {
  font-size: 1.5rem; }
  .redeem_gift_voucher__details_box {
    border: 1px solid #555555;
    border-radius: 3px; }
  .redeem_gift_voucher__details_heading {
    background-color: #555555;
    color: #ffffff;
    padding: 2px; }
  .redeem_gift_voucher__details_products {
    margin-top: 10px; }
  .redeem_gift_voucher__details_line {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 3px 5px; }
    .redeem_gift_voucher__details_line-redeem {
      width: 120px;
      text-align: center; }
    .redeem_gift_voucher__details_line-product {
      width: 300px;
      text-align: left; }
    .redeem_gift_voucher__details_line-border:not(:last-child) {
      border-bottom: 1px #999999 solid; }
    .redeem_gift_voucher__details_line-text {
      width: 120px;
      text-align: left;
      font-weight: bold; }
      .redeem_gift_voucher__details_line-text_red {
        color: #FF3300; }
  .redeem_gift_voucher__details_not_found {
    width: 100%;
    font-size: 2rem; }

.redeem_deposit {
  position: relative; }
  .redeem_deposit__details {
    font-size: 2rem; }
    .redeem_deposit__details_line {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 3px 5px; }
      .redeem_deposit__details_line-text {
        width: 170px;
        text-align: left;
        font-weight: bold; }
        .redeem_deposit__details_line-text_red {
          color: #FF3300; }
    .redeem_deposit__details_not_found {
      width: 100%;
      font-size: 2rem; }

.finish_sale_disabled {
  background-color: #AAAAAA;
  cursor: not-allowed; }
  .finish_sale_disabled:hover {
    background-color: #EEEEEE; }

.popup__cashup_content {
  min-width: 300px; }

.popup__discount {
  width: 280px; }

.use_deposit {
  display: none; }

.employees {
  width: 100%;
  margin: 0 auto;
  font-size: 1.5rem; }
  .employees__details {
    width: 1000px;
    margin: 0 auto; }
    .employees__details_table {
      background-color: #FAFAFA; }
      .employees__details_table-align_left {
        text-align: left; }
      .employees__details_table-data {
        border: #BBBBBB solid 1px;
        padding: 0.5rem 0.5rem; }
    .employees__details_name {
      font-weight: bold;
      font-size: 2rem;
      text-decoration: none;
      color: inherit; }
      .employees__details_name:hover {
        text-decoration: underline; }

.edit_employee {
  width: 100%;
  display: grid;
  grid-template-columns: 400px 700px;
  grid-gap: 10px;
  justify-content: center;
  grid-template-areas: "client_details working_hours"                             
 "actions actions"; }
  .edit_employee__input-name {
    width: 300px; }
  .edit_employee__input-email {
    width: 300px; }
  .edit_employee__input-phonenumber {
    width: 300px; }
  .edit_employee__details {
    grid-area: client_details;
    padding-left: 20px;
    font-size: 2rem; }
  .edit_employee__working_hours {
    grid-area: working_hours;
    width: 100%;
    margin-bottom: 2rem;
    border: #111111 2px solid; }
    .edit_employee__working_hours-header {
      border-bottom: #111111 2px solid;
      text-align: center;
      padding: 1rem;
      font-size: 3rem;
      background-color: #CCCCCC; }
    .edit_employee__working_hours-column_day {
      text-align: center;
      width: 200px; }
    .edit_employee__working_hours-column_starttime {
      text-align: center;
      width: 150px; }
    .edit_employee__working_hours-column_endtime {
      text-align: center;
      width: 150px; }
    .edit_employee__working_hours-line {
      font-size: 2rem;
      display: flex;
      align-items: center;
      justify-content: center; }
      .edit_employee__working_hours-line-head {
        background-color: #F0F0F0;
        border-bottom: #AAAAAA 1px solid;
        padding: 7px 0px 7px 0px;
        margin-bottom: 10px; }
  .edit_employee__actions {
    grid-area: actions;
    margin-top: 2rem;
    margin-bottom: 3rem;
    margin-right: 2rem;
    display: flex;
    align-items: center;
    justify-content: right;
    border-bottom: 1px #CCCCCC solid;
    padding-bottom: 2rem; }

.edit_employee__privilages {
  border: 1px #555555 solid; }
  .edit_employee__privilages_line {
    display: flex;
    justify-content: center;
    align-items: center; }
  .edit_employee__privilages_head {
    background-color: #F0F0F0;
    border-bottom: 1px #AAAAAA solid; }
  .edit_employee__privilages_col1 {
    width: 50%;
    text-align: center;
    border-right: 1px #AAAAAA solid;
    padding: 5px 0px 5px 0px; }
  .edit_employee__privilages_col2 {
    width: 50%;
    text-align: center;
    padding: 5px 0px 5px 0px; }

.sales_targets {
  display: grid;
  grid-template-columns: minmax(2rem, 2fr) repeat(8, 1fr) minmax(2rem, 2fr);
  grid-gap: 1rem;
  margin-top: 2rem; }
  .sales_targets__content {
    grid-column: 2 / 10; }
  .sales_targets__select {
    display: flex;
    align-items: center;
    font-size: 2rem; }

.sales_targets_summary {
  width: 100%;
  font-size: 1.5rem; }
  .sales_targets_summary__table {
    width: 100%;
    border-collapse: collapse; }
    .sales_targets_summary__table thead {
      border-bottom: 1px solid #333333; }
    .sales_targets_summary__table th {
      border: 1px solid #333333;
      border-bottom: 3px solid #333333;
      font-weight: normal;
      background-color: #777777;
      color: #ffffff;
      padding: 0.5rem; }
    .sales_targets_summary__table td {
      border: 1px solid #333333;
      padding: 0.3rem 1rem; }
  .sales_targets_summary__actions {
    margin-top: 2rem;
    display: flex;
    justify-content: flex-end; }

/*
********** Edit the notifications in managemnent area *****
*/
.notifications {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-family: sans-serif;
  font-size: 1.3rem; }
  .notifications__flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; }
  .notifications svg {
    width: 20px;
    height: 20px;
    cursor: pointer; }
  .notifications thead {
    background-color: #f2f2f2; }
    .notifications thead th {
      text-align: left;
      padding: 0.75rem;
      border-bottom: 2px solid #ccc; }
  .notifications tbody tr {
    border-bottom: 1px solid #e0e0e0; }
    .notifications tbody tr:hover {
      background-color: #f9f9f9; }
    .notifications tbody tr td {
      padding: 0.75rem;
      vertical-align: top; }
    .notifications tbody tr .btn {
      padding: 0.4rem 0.8rem;
      margin-right: 0.3rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1.4rem;
      transition: background-color 0.2s ease;
      text-decoration: none !important; }
      .notifications tbody tr .btn--edit {
        background-color: #4caf50;
        color: #fff; }
        .notifications tbody tr .btn--edit:hover {
          background-color: #45a049; }
      .notifications tbody tr .btn--delete {
        background-color: #f44336;
        color: #fff; }
        .notifications tbody tr .btn--delete:hover {
          background-color: #e53935; }
  .notifications_edit__message {
    font-size: 1.2rem; }
  .notifications_edit__valid_until {
    font-size: 1.4rem;
    padding: 0.5rem; }

.services {
  width: 100%; }
  .services__line {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.1rem 3rem;
    border-bottom: 1px solid #EEEEEE; }
    .services__line-select {
      width: 180px; }
    .services__line-actions {
      width: 50px;
      text-align: right; }
    .services__line-variable_price {
      width: 150px;
      text-align: center; }
    .services__line-stock {
      width: 80px;
      text-align: center; }
    .services__line-product {
      width: 500px; }
    .services__line-category {
      width: 300px; }
    .services__line-description {
      width: 500px;
      height: 300px; }
    .services__line-duration {
      width: 150px;
      text-align: center; }
    .services__line-price {
      width: 100px;
      text-align: center; }
    .services__line-save {
      flex: 1;
      text-align: right;
      display: none; }
    .services__line:hover {
      background-color: #EEEEEE; }
    .services__line-heading {
      display: flex;
      align-items: center;
      font-size: 1.8rem;
      background-color: #F0F0F0;
      font-weight: bold;
      border-bottom: 2px solid #555555;
      padding: 0.7rem 3rem; }
  .services__nothing_to_display {
    font-size: 3rem; }

.retail_variants_hide {
  display: none; }

.edit_service {
  display: grid;
  grid-template-columns: [full-start] minmax(2rem, 1fr) [center-start] repeat(2, [col-start] minmax(min-content, 16rem) [col-end]) [center-end] minmax(2rem, 1fr) [full-end];
  grid-template-rows: auto;
  font-size: 1.8rem;
  margin-top: 2rem; }

.service_form {
  position: relative;
  grid-column: center-start / center-end; }
  .service_form__details {
    display: grid;
    grid-template-columns: repeat(2, min-content);
    grid-gap: 5rem; }
  .service_form__product {
    position: relative;
    min-width: 400px; }
  .service_form__description {
    position: relative; }
  .service_form__input-description {
    width: 400px;
    height: 250px;
    padding: 1rem;
    font-size: 1em;
    resize: none;
    font-family: lato; }

.employee_service_variants {
  position: relative;
  grid-column: center-start / center-end;
  margin-top: 2rem;
  display: grid;
  grid-template-areas: "employees service_info service_pattern";
  grid-template-columns: 1fr 200px 1fr; }
  .employee_service_variants__employee {
    grid-area: employees;
    width: 100%;
    border: 1px solid #BBBBBB; }
    .employee_service_variants__employee-line {
      display: flex;
      align-items: center;
      border-top: 1px dotted #BBBBBB;
      border-bottom: 1px dotted #BBBBBB; }
    .employee_service_variants__employee-chk_select {
      border-right: 1px solid #BBBBBB;
      padding: 0.3em; }
    .employee_service_variants__employee-employee {
      cursor: pointer;
      width: 100%;
      padding: 0.3em; }
      .employee_service_variants__employee-employee:hover {
        background-color: #EEEEEE; }
      .employee_service_variants__employee-employee--selected {
        background-color: #96CBFF; }
  .employee_service_variants__info {
    grid-area: service_info;
    width: 100%;
    border: 1px solid #BBBBBB; }
    .employee_service_variants__info-employee {
      width: 100%;
      display: none;
      text-align: center; }
  .employee_service_variants__group {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto; }
  .employee_service_variants__pattern {
    grid-area: service_pattern;
    width: 100%;
    border: 1px solid #BBBBBB; }
  .employee_service_variants__header {
    width: 100%;
    border-bottom: 1px solid #BBBBBB;
    margin-bottom: 2rem;
    text-align: center; }
    .employee_service_variants__header_text {
      color: crimson;
      font-size: 2rem;
      padding: 0.5rem; }

.edit_service__actions {
  position: relative;
  grid-column: center-start / center-end;
  margin-top: 2rem;
  text-align: right; }

.service_pattern {
  position: relative;
  padding: 1rem 0; }
  .service_pattern__line {
    display: flex;
    align-items: center;
    justify-content: space-around; }
  .service_pattern__label {
    width: 40px; }
  .service_pattern__selection {
    width: 100px;
    height: 25px;
    border: 1px solid #555555;
    font-size: 1.5rem;
    text-align: center;
    cursor: pointer; }
    .service_pattern__selection--selected {
      background-color: #96CBFF; }
    .service_pattern__selection_chk {
      display: none; }

.promo_codes {
  position: relative; }
  .promo_codes__display {
    font-size: 1.5rem; }
  .promo_codes__content {
    padding: 1rem; }
  .promo_codes__section_heading {
    width: 100%;
    background-color: #555555;
    padding: 0.3rem;
    text-align: center; }
    .promo_codes__section_heading__text {
      color: #ffffff; }
  .promo_codes__edit {
    padding: 1rem;
    font-size: 2rem;
    width: 100%;
    display: grid;
    grid-template-columns: 600px 1fr;
    grid-gap: 10px;
    grid-template-areas: "details products";
    min-height: 100vh; }
    .promo_codes__edit_discount_type {
      margin-bottom: 1rem;
      width: 400px; }
  .promo_codes__details {
    grid-area: details;
    width: 100%;
    border: 1px solid #999999;
    background-color: #F0F0F0; }
    .promo_codes__details-description {
      width: 100%;
      height: 80px;
      resize: none;
      font-size: 2rem; }
  .promo_codes__products {
    grid-area: products;
    width: 100%;
    border: 1px solid #999999; }
    .promo_codes__products_display {
      font-size: 1.5rem; }
    .promo_codes__products_line {
      display: flex; }
  .promo_codes__product_line {
    cursor: pointer; }
    .promo_codes__product_line:hover {
      background-color: #EEEEEE; }
    .promo_codes__product_line-selected {
      background-color: #2196F3; }
      .promo_codes__product_line-selected:hover {
        background-color: #0086F3; }
  .promo_codes__product_chk {
    display: none; }
  .promo_codes__total_selected {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 5px;
    width: 130px;
    overflow: hidden;
    background-color: #555555;
    color: #ffffff; }

.service_sales {
  padding: 2rem 4rem; }
  .service_sales__output {
    padding: 1rem;
    font-size: 1.5rem; }
    @media only screen and (max-width: 1680px) {
      .service_sales__output {
        font-size: 1.2rem; } }
    .service_sales__output table {
      border: 2px solid #555555;
      border-collapse: collapse; }
      .service_sales__output table th {
        padding: 0.5rem 1.5rem;
        border-bottom: 2px solid #555555; }
      .service_sales__output table td {
        background-color: #F0F0F0;
        padding: 0.2rem;
        border-bottom: 1px solid #EEEEEE; }
        @media only screen and (max-width: 1680px) {
          .service_sales__output table td {
            padding: 0.1rem; } }
    .service_sales__output__price_input {
      max-width: 120px;
      padding: 0.5rem;
      text-align: center;
      font-size: inherit; }
      @media only screen and (max-width: 1680px) {
        .service_sales__output__price_input {
          padding: 0.1rem;
          max-width: 80px; } }
    .service_sales__output__readonly {
      max-width: 120px;
      border: none;
      padding: 0.5rem;
      text-align: center;
      font-size: inherit;
      background-color: #F0F0F0; }
  .service_sales__report {
    position: relative;
    display: flex; }
    .service_sales__report__totals {
      position: fixed;
      font-size: 2rem;
      right: 0;
      margin-right: 50px;
      background-color: white;
      padding: 2rem;
      border: 2px solid #555555; }
      @media only screen and (max-width: 1680px) {
        .service_sales__report__totals {
          font-size: 1.2rem; } }

.service_sales_params {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 1.5rem; }
  .service_sales_params__btn {
    min-height: 30px;
    margin-top: 10px;
    padding: 0rem 1rem;
    cursor: pointer; }
  .service_sales_params__label {
    font-size: 1.4rem; }
  .service_sales_params__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border: 2px solid #555555;
    margin-right: 2rem;
    padding: 1rem; }
    .service_sales_params__group-noborder {
      border: none;
      padding: 0; }

.categories__line {
  display: flex;
  align-items: center;
  font-size: 2rem;
  background-color: #CCCCCC;
  width: 100%;
  padding: 1rem 3rem;
  border-bottom: #EEEEEE solid 1px;
  cursor: grabbing; }
  .categories__line-header {
    background-color: #999999;
    font-size: 2.4rem; }
  .categories__line-icon {
    width: 20px;
    height: 20px; }
    .categories__line-icon_pencil {
      cursor: pointer;
      margin-right: 1rem; }
  .categories__line-name {
    width: 600px;
    margin-left: 2rem;
    cursor: pointer; }
  .categories__line-retail {
    width: 100px;
    text-align: center; }
  .categories__line-edit {
    width: 100px;
    text-align: center; }
  .categories__line-link {
    text-decoration: none;
    color: #111111;
    transition: all 0.2s; }
    .categories__line-link:hover {
      color: #555555; }

.clients {
  width: 100%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  font-family: inherit;
  margin-bottom: 2rem;
  min-height: 500px;
  font-size: 1.5rem;
  /*
    &__line {
        display: flex;
        align-items: center;        
        width: 100%;
        border-bottom: $color-grey-6 solid 1px; 
        background-color: $color-white-1;     
        font-size: 1.6rem;           

        &-heading {
            display: flex;
            align-items: center;
            font-size: 1.6rem;
            font-weight: bold;
            background-color: $color-grey-4;            
            border-bottom: 1px solid $color-grey-6;
        }
        &-id {            
            width: 100px;
            text-align: center;            
            padding: 0.5rem;
        }
        &-name {
            text-align: center;
            width: 250px;
            padding: 0.5rem;
        }
        &-area {
            text-align: center;
            width: 200px;
            padding: 0.5rem;
        }
        &-postcode {
            text-align: center;
            width: 100px;
            padding: 0.5rem;
        }
        &-email {
            text-align: center;
            width: 350px;
            padding: 0.5rem;            
        }
        &-phone {
            text-align: center;
            width: 200px;
            padding: 0.5rem;
            
        }
        &-dateregistered {
            text-align: center;
            width: 120px;            
            padding: 0.5rem;
        }

        &-confirmed {
            text-align: center;
            width: 100px;
            padding: 0.5rem;
       }

       &-icon {
           width: 30px;
           height: 30px;
           margin-left: 1rem;
       }

       &-actions {
        width: 300px;
        }       

       &-link {
        color: $color-grey-10; 

        &:link,
        &:visited {            
            color: $color-grey-10;            
            text-decoration: none;
            display: inline-block;
            transition: all .2s;
            line-height: 1;
        }

        &:hover {
            color: $color-grey-8;
        }           
       }

       &-bookings {
        text-align: center;
        width: 80px;
        padding: 0.5rem;
        }  
        
        @media only screen and ( max-width: $small_screen ) {
            // when screen is smalled that specified width, run this >>>
            font-size: 1.4rem;
            &-name {             
                width: 150px;
            }         
            &-area {             
                width: 150px;                
            }
            &-postcode {                
                width: 100px;                
            }               
            &-phone {
                text-align: center;
                width: 120px;
                padding: 0.5rem;
                
            }
            &-email {
                display: none;
            }
        }          
    }
    */ }
  .clients__search {
    display: flex;
    align-items: center;
    justify-content: center; }
    .clients__search-input {
      width: 300px;
      font-size: 2rem;
      border-radius: 5px;
      padding: 0.7rem 1rem 0.7rem 5rem;
      z-index: 9;
      margin-right: 1rem; }
      .clients__search-input:focus {
        background-color: #D2EDFF; }
    .clients__search-icon {
      width: 30px;
      height: 30px;
      margin-right: -35px;
      z-index: 10; }
    .clients__search-button {
      font-size: 2rem;
      padding: 0.5rem 1rem;
      transition: all 0.5s;
      background-color: #2196F3;
      border-color: #2196F3;
      text-decoration: none;
      border-radius: 3px;
      cursor: pointer;
      box-shadow: none;
      color: #ffffff; }
      .clients__search-button:hover {
        background-color: #0086F3; }
  .clients__grid {
    position: relative;
    width: 100%;
    font-size: 1.4rem;
    display: grid;
    grid-template-columns: 100px 250px 100px 100px 180px 350px 130px 130px 80px 80px 80px 80px 50px;
    align-items: center; }
    .clients__grid__header {
      position: relative;
      width: 100%;
      background-color: #EEEEEE;
      color: #555555;
      font-size: 1.5em;
      font-weight: 600;
      padding: 1rem 0;
      height: 4rem;
      border-bottom: 1px solid #555555; }
      .clients__grid__header_actions {
        flex: 1;
        text-align: right;
        margin-right: 1rem; }
  .clients__item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center; }

.skin_test_details {
  width: 100%;
  border: solid 1px #777777;
  background-color: #AAAAAA;
  padding: 10px; }
  .skin_test_details__reaction {
    width: 500px;
    margin-right: 70px; }

.friend_referrals {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 1rem; }
  .friend_referrals__flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; }
  .friend_referrals table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem; }
    .friend_referrals table thead {
      background-color: #2c3e50;
      color: #ffffff; }
      .friend_referrals table thead th {
        text-align: center;
        padding: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.5px; }
    .friend_referrals table tbody tr:nth-child(even) {
      background-color: #f2f2f2; }
    .friend_referrals table tbody tr:hover {
      background-color: #e9f5ff; }
    .friend_referrals table tbody tr td {
      border-bottom: 1px solid #e0e0e0;
      color: #333;
      background-color: #E0E6EC;
      padding: 0.7rem; }
      .friend_referrals table tbody tr td.referrer_client {
        background-color: white; }
      .friend_referrals table tbody tr td svg {
        fill: #2c3e50;
        width: 20px;
        height: 20px;
        cursor: pointer; }

.sales_ledger {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-family: inherit;
  margin-bottom: 2rem; }
  .sales_ledger__grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-gap: 10px;
    grid-template-areas: "filter sales_ledger_display"; }

.sales_ledger_sidebar {
  grid-area: filter;
  font-size: 2rem; }

.sales_ledger_filter {
  font-size: 2rem; }

.sales_ledger_weeks {
  grid-area: filter;
  font-size: 2rem;
  text-align: center; }
  .sales_ledger_weeks__h1 {
    font-size: 2.2rem;
    border-bottom: 1px solid #999999;
    background-color: #777777;
    color: #F0F0F0; }
  .sales_ledger_weeks__section {
    padding: 0.5rem 0; }
    .sales_ledger_weeks__section-heading {
      font-size: 2rem;
      font-weight: bold;
      margin-top: 0.5rem; }
    .sales_ledger_weeks__section-sales {
      background-color: #DDDDDD;
      font-size: 0.9em;
      margin-top: 0.4rem; }
      .sales_ledger_weeks__section-sales-section {
        border-bottom: 1px dotted #BBBBBB;
        padding: 0.3rem; }
      .sales_ledger_weeks__section-sales-heading {
        color: #333333;
        font-weight: bold; }
      .sales_ledger_weeks__section-sales-data {
        color: #555555;
        margin-left: 0.7rem; }

.sales_ledger_display {
  grid-area: sales_ledger_display; }

.sales_ledger_data {
  position: relative;
  font-size: 1.4rem; }
  .sales_ledger_data-icon {
    width: 30px;
    height: 30px;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    margin-left: 1rem;
    cursor: pointer;
    transition: fill 0.3s; }
    .sales_ledger_data-icon_pencil:hover {
      fill: #0086F3; }
    .sales_ledger_data-icon_bin:hover {
      fill: #FF3300; }

.till_declarations {
  width: 100%;
  font-size: 2rem; }

.marketing {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-gap: 10px;
  grid-template-areas: "left_nav layout";
  font-size: 1.4rem;
  min-height: 100vh; }

.marketing_edit_client_list {
  display: grid;
  grid-template-columns: 740px 1fr;
  grid-gap: 10px;
  grid-template-areas: "filter results";
  flex-wrap: wrap; }

.marketing_campaign_edit {
  display: grid;
  grid-template-columns: minmax(2rem, 10rem) 1fr minmax(2rem, 10rem); }
  .marketing_campaign_edit__content {
    grid-column: 2 / 3;
    margin-top: 3rem; }

.marketing_client_filter {
  grid-area: filter;
  position: relative; }
  .marketing_client_filter__products {
    position: relative;
    display: flex;
    flex-wrap: wrap; }
    .marketing_client_filter__products-chklabel {
      font-size: 1rem;
      margin-right: 0.5rem; }

.marketing_client_filter_results {
  grid-area: results;
  position: relative; }
  .marketing_client_filter_results__header {
    width: 100%;
    font-size: 1.2rem; }
  .marketing_client_filter_results__list {
    height: 570px;
    overflow-y: scroll;
    border: 1px solid #555555;
    margin-bottom: 10px;
    background-color: #FAFAFA; }
  .marketing_client_filter_results__actions {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 20px;
    padding-left: 10px; }

.left_nav {
  grid-area: left_nav;
  width: 100%;
  border-right: 1px solid #999999; }
  .left_nav__option {
    display: flex;
    align-items: center;
    height: 60px;
    padding-left: 20px;
    cursor: pointer;
    border-bottom: 1px solid #999999; }
    .left_nav__option-icon {
      width: 40px;
      height: 40px; }
    .left_nav__option-title {
      font-size: 1.6rem;
      margin-left: 20px; }
    .left_nav__option:hover {
      background-color: #FAFAFA; }

.layout {
  grid-area: layout;
  width: 100%;
  color: #555555; }
  .layout__heading {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #FAFAFA;
    border-bottom: 1px #999999 solid;
    padding: 1rem 0rem; }
    .layout__heading-text {
      font-size: 2.5rem;
      flex: 1; }
    .layout__heading-addnew {
      margin-right: 20px; }

.layout_box {
  border: 1px solid #999999;
  background-color: #FAFAFA;
  border-radius: 10px;
  width: 95%;
  padding: 10px 20px; }
  .layout_box_header {
    border-bottom: 1px solid #999999;
    padding: 10px 0;
    margin-bottom: 10px; }
  .layout_box-subheading {
    font-size: 1.6rem;
    font-weight: bold;
    margin-right: 10px; }
  .layout_box_group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem; }
  .layout_box_chk {
    display: flex;
    align-items: center;
    margin-right: 1rem; }
    .layout_box_chk-txt {
      font-size: 1.3rem;
      margin-right: 0.5rem; }

.filter_form {
  padding: 1rem 1rem;
  display: grid;
  grid-template-columns: 350px 350px;
  grid-gap: 10px;
  grid-template-areas: "quick quick" 
 "dateselection sundry"
 "usedservices notusedservices"
 "used_employees not_used_employees"; }

.filter {
  position: relative;
  font-size: 2.5rem; }
  .filter__heading {
    font-size: 1.5rem; }
  .filter__quick {
    grid-area: quick;
    position: relative;
    width: 100%;
    border: 2px solid #555555;
    background-color: #FAFAFA;
    padding: 0.7rem; }
  .filter__date_selection {
    grid-area: dateselection;
    position: relative;
    width: 350px;
    border: 2px solid #555555;
    background-color: #FAFAFA;
    padding: 0.7rem; }
  .filter__sundry_data {
    grid-area: sundry;
    position: relative;
    width: 350px;
    border: 2px solid #555555;
    background-color: #FAFAFA;
    padding: 0.7rem; }
  .filter__services {
    position: relative;
    width: 350px;
    border: 2px solid #555555;
    background-color: #FAFAFA;
    padding: 0.7rem; }
    .filter__services_used {
      grid-area: usedservices; }
    .filter__services_notused {
      grid-area: notusedservices; }
    .filter__services_header {
      width: 100%;
      text-align: center;
      font-size: 1.8rem;
      padding-bottom: 0.2rem;
      border-bottom: 1px solid #555555; }
    .filter__services_list {
      margin-top: 1rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center; }
      .filter__services_list_chk_container {
        display: flex;
        align-items: center;
        margin-right: 15px;
        margin-bottom: 10px; }
        .filter__services_list_chk_container_text {
          font-size: 1.5rem;
          margin-right: 0.5rem; }
      .filter__services_list_heading {
        width: 100%;
        display: block;
        font-size: 1.8rem;
        padding-bottom: 2px;
        border-bottom: 1px solid #AAAAAA;
        margin-bottom: 10px;
        color: #2196F3; }
  .filter__group {
    margin-top: 1rem;
    font-size: inherit; }
    .filter__group_daterange_select_type-chkgroup label {
      font-size: inherit; }
    .filter__group_daterange_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px; }
      .filter__group_daterange_header-toggle {
        margin-right: 8px;
        font-size: 1.5rem; }
    .filter__group-inline {
      display: flex;
      align-items: center; }
    .filter__group_label {
      margin-right: 5px;
      font-size: 1.5rem; }
      .filter__group_label-list_name {
        font-size: 2rem; }
    .filter__group_input {
      font-size: 1.5rem;
      padding: 0.5rem;
      margin-top: 0.5rem;
      border-radius: 5px; }
      .filter__group_input-daterange {
        font-size: 2rem;
        text-align: center; }
      .filter__group_input-visits {
        width: 60px;
        text-align: center; }
      .filter__group_input-list_name {
        width: 400px;
        font-size: 1.8rem; }
      .filter__group_input-time {
        width: 120px;
        text-align: center; }

.filter__employees_used {
  grid-area: used_employees; }

.filter__employees_not_used {
  grid-area: not_used_employees; }

#clientid_list {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; }

.total_clients {
  position: absolute;
  top: 2px;
  right: 10px; }
  .total_clients-text {
    display: inline-block;
    font-size: 1.5rem;
    margin-right: 5px;
    font-weight: bold; }
  .total_clients-input {
    width: 50px;
    font-size: 1.6rem;
    background-color: #DDDDDD;
    border: none;
    border-radius: 5px;
    text-align: center;
    padding: 2px; }

.marketing_campaign {
  display: grid;
  grid-template-columns: 600px;
  grid-gap: 10px;
  grid-template-areas: "group-1"
 "group-2"
 "group-3";
  font-size: 1.7rem;
  padding: 1rem;
  text-align: left;
  background-color: #ffffff; }
  .marketing_campaign__email {
    display: none; }
  .marketing_campaign__type {
    width: 250px; }
  .marketing_campaign__sms-text {
    width: 100%;
    height: 70px;
    resize: none;
    border: 2px solid #555555; }
  .marketing_campaign__send_date {
    width: 300px; }
  .marketing_campaign__group {
    border: 1px solid #555555;
    background-color: #FAFAFA;
    padding: 10px; }
    .marketing_campaign__group-1 {
      grid-area: group-1;
      display: flex;
      align-items: center;
      width: 100%; }
    .marketing_campaign__group-2 {
      grid-area: group-2;
      display: flex; }
    .marketing_campaign__group-3 {
      grid-area: group-3; }

.skin_tests {
  font-size: 1.5rem; }

.settings {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: [side-start] 20rem [side-end full-start] minmax(2rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(2rem, 1fr) [full-end];
  grid-template-rows: 1000px;
  font-size: 1.8rem; }
  .settings__content {
    grid-column: full-start / full-end; }

.salon_details {
  position: relative; }

.points_scheme {
  width: 100%; }

.cancellations {
  width: 100%; }

.actions_footer {
  grid-area: footer; }

.section_group {
  width: 100%;
  margin-top: 2rem;
  padding-left: 2rem;
  display: none; }
  .section_group__header {
    border-bottom: 2px #555555 solid;
    font-size: 1.2em;
    padding: 0.5rem;
    color: #333333; }
  .section_group__box {
    border: 1px solid #333333;
    padding: 1rem;
    margin-bottom: 2rem; }
  .section_group__content {
    margin-top: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px dotted #CCCCCC; }
    .section_group__content_table {
      width: 100%;
      border-collapse: collapse; }
    .section_group__content_table th, .section_group__content td {
      padding: 0.5rem 0;
      border: 1px solid #999999; }
  .section_group__actions {
    margin-top: 1rem; }
  .section_group__points_input {
    width: 130px;
    text-align: left; }
  .section_group__commissions {
    width: 500px; }

#popup__notification_contact {
  display: none; }

#edit_notification_contact_form {
  font-size: 1.4rem; }

.popup__notification_contact {
  width: 400px; }

.birthday_vouchers {
  width: 700px;
  padding: 1rem;
  margin-top: 0; }
  .birthday_vouchers_form__label {
    width: 250px; }
  .birthday_vouchers_form__input {
    width: 80px;
    text-align: right; }
  .birthday_vouchers__sms_textarea {
    padding: 1rem;
    width: 500px;
    height: 100px; }

.container {
  display: grid;
  grid-template-columns: minmax(2rem, 6rem) 1fr minmax(2rem, 6rem); }

.edit_survey {
  grid-column: 2 / 3;
  width: 100%;
  margin-top: 1rem; }
  .edit_survey__question {
    background-color: #EEEEEE;
    padding-bottom: 1rem;
    -webkit-box-shadow: 0px 3px 8px 0px #000000;
    box-shadow: 0px 3px 4px 0px #000000; }
    .edit_survey__question_header {
      background-color: #CCCCCC;
      display: flex;
      align-items: flex-end;
      padding: 0.7rem; }
      .edit_survey__question_header_number {
        position: relative; }
        .edit_survey__question_header_number_input {
          background-color: transparent;
          border: 0;
          width: 50px;
          font-size: 3rem;
          text-align: left;
          outline: none !important; }
      .edit_survey__question_header_question {
        flex: 1; }
  .edit_survey__answer_type {
    margin-top: 1rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #999999;
    font-size: 1.5rem; }
  .edit_survey__answer_logic {
    display: flex;
    align-items: center;
    margin-top: 1rem;
    padding-bottom: 1rem;
    font-size: inherit; }
  .edit_survey__extra_questions {
    padding: 1rem;
    font-size: 1.5rem; }
  .edit_survey__question_bonus {
    display: flex;
    align-items: end; }
  .edit_survey__options {
    padding: 1rem; }
    .edit_survey__options_selection_label {
      font-size: 1.5rem; }
  .edit_survey__label {
    margin-right: 1rem;
    font-size: 1.7rem; }
    .edit_survey__label-question {
      font-size: 2rem; }
  .edit_survey__input {
    margin-right: 1rem; }
    .edit_survey__input-name {
      width: 300px; }
    .edit_survey__input-question {
      font-size: 1.5rem;
      width: 90%; }
  .edit_survey__button {
    background-color: #555555;
    cursor: pointer; }
    .edit_survey__button_disabled {
      color: #A0A0A0;
      background-color: #6E6E6E;
      cursor: not-allowed; }
      .edit_survey__button_disabled:hover {
        color: #A0A0A0;
        background-color: #6E6E6E; }

.rating {
  display: flex; }

.rating input {
  position: absolute;
  left: -100vw; }

.rating label {
  width: 48px;
  height: 48px;
  overflow: hidden;
  padding: 48px 0 0;
  background: url("../img/svg/stars.svg") no-repeat top left; }

.rating:not(:hover) input:indeterminate + label,
.rating:not(:hover) input:checked ~ input + label,
.rating input:hover ~ input + label {
  background-position: -48px 0; }

.rating:not(:hover) input:focus-visible + label {
  background-position: -96px 0; }

#popup__edit_deposit {
  display: none; }

.popup__edit_deposit {
  width: 800px; }

.edit_deposit {
  position: relative;
  width: 100%; }
  .edit_deposit__bookings {
    position: relative;
    margin-bottom: 2rem;
    z-index: 0;
    height: 0;
    overflow: hidden; }
    .edit_deposit__bookings_heading {
      z-index: 0;
      font-size: 2rem;
      text-align: left; }
    .edit_deposit__bookings_list {
      width: 100%;
      height: 120px;
      overflow-y: scroll;
      border: 1px solid #111111; }
    .edit_deposit__bookings_line {
      display: flex;
      font-size: 1.3rem;
      padding: 0.4rem 0.3rem;
      background-color: #ffffff;
      border-bottom: 1px solid #BBBBBB;
      cursor: pointer;
      white-space: initial; }
      .edit_deposit__bookings_line:hover {
        background-color: #2196F3; }
      .edit_deposit__bookings_line-date {
        width: 70px;
        text-align: center; }
      .edit_deposit__bookings_line-service {
        width: 300px;
        text-align: left;
        white-space: normal;
        margin-right: 1rem; }
      .edit_deposit__bookings_line-info {
        min-width: 150px;
        text-align: left; }
      .edit_deposit__bookings_line_selected {
        background-color: #2196F3; }

.waiting_list__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  /* makes the colgroup widths respected */
  font-size: 1.2em; }

.waiting_list__table thead th {
  background: #ccc;
  /* grey header */
  text-align: center;
  padding: .7rem; }

.waiting_list__table td {
  text-align: center;
  padding: .7rem;
  border-bottom: 1px solid #ddd; }

.waiting_list__btn {
  background-color: #7e98ff;
  display: flex;
  padding: 0.7rem;
  cursor: pointer;
  transition: background-color 0.5s; }
  .waiting_list__btn:hover {
    background-color: #6483FF; }
  .waiting_list__btn__text {
    margin-left: 0.7rem;
    margin-top: 0.2rem; }

.vouchers_list {
  position: relative;
  width: 100%;
  font-size: 1.8rem;
  display: grid;
  grid-template-columns: minmax(10px, 50px) 1fr minmax(10px, 50px); }
  .vouchers_list__grid {
    grid-column: 2/3;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: minmax(50px, 1fr) minmax(100px, 1fr) 1fr 1fr 1fr 2fr 1fr 2fr minmax(100px, 1fr) 1fr 1fr;
    align-items: center;
    justify-items: center; }
  .vouchers_list__heading {
    font-size: 1em;
    text-align: center; }
  .vouchers_list__line {
    border-bottom: 1px solid #CCCCCC;
    padding: 0.7rem 0; }
  .vouchers_list__line_txt {
    font-size: 0.8em; }

.months_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem; }

/* Hide the actual radios */
.months_radio {
  display: none; }

/* Reuse your .popup__button but allow them to behave like toggles */
.months_button {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color .2s, color .2s, border-color .2s; }

/* Highlight the active one */
.months_radio:checked + .months_button {
  background-color: #28a745;
  /* strong green */
  border-color: #1e7e34;
  color: #fff;
  font-weight: 600; }

.third_party_appointments {
  position: relative;
  font-size: 1.5rem; }
  .third_party_appointments table {
    position: relative;
    width: 100%;
    padding: 2rem;
    border-collapse: collapse; }
  .third_party_appointments th, .third_party_appointments td {
    position: relative;
    padding: 1rem 1rem;
    text-align: center;
    border-bottom: 1px solid #AAAAAA; }

.popup__third_party_notes {
  min-width: 500px; }
  .popup__third_party_notes__form {
    padding: 2rem; }
  .popup__third_party_notes__text {
    display: flex;
    flex-direction: column; }
    .popup__third_party_notes__text-textarea {
      min-width: 300px;
      min-height: 300px;
      padding: 1rem; }

#popup__edit_third_party_name {
  display: none; }

.third_party_diary {
  font-size: 2rem;
  margin-top: 30px;
  margin-left: 20px;
  margin-right: 20px; }
  .third_party_diary table {
    border-collapse: collapse; }
  .third_party_diary__open_close {
    text-align: center;
    width: 100px;
    padding: 0.5rem;
    background-color: #B9DDDD;
    border-bottom: 2px solid #555555; }
  .third_party_diary__name {
    padding: 0.5rem 0;
    background-color: #B9DDDD;
    border-bottom: 2px solid #555555;
    width: 300px; }
  .third_party_diary__icon {
    width: 80px;
    background-color: #B9DDDD;
    border-bottom: 2px solid #555555;
    text-align: center;
    padding-top: 5px; }
  .third_party_diary__employee_name {
    font-size: 1.5rem;
    width: 300px;
    padding: 0.5rem;
    padding-left: 100px;
    background-color: #D2EDFF;
    border-bottom: 1px solid #888888; }
  .third_party_diary__radio {
    padding: 0.5rem;
    background-color: #D2EDFF;
    border-bottom: 1px solid #888888; }

.third_party_diary_icon {
  display: none; }
  .third_party_diary_icon__open {
    display: block; }

.third_party_diary_employees {
  display: none; }
  .third_party_diary_employees__open {
    display: block; }

#popup__connect_loyalty_card,
#popup__redeem_loyalty_card {
  display: none; }

.popup__connect_loyalty_card__body {
  min-height: 400px; }

.loyalty-cards-table {
  position: relative;
  font-size: 1.2rem;
  font-weight: normal; }

.gift_cards {
  max-width: 1050px;
  margin: 0 auto 30px;
  padding: 10px 15px;
  box-sizing: border-box;
  font-size: 1.5rem;
  line-height: 1.6; }

.gift_cards h1,
.gift_cards h2,
.gift_cards h3 {
  font-size: 1.3em;
  font-weight: 600; }

.gift-card-heading {
  font-size: 1.8rem;
  margin: 0 0 15px; }

.gift-card-layout {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #dddddd;
  background: #ffffff; }

.gift-card-layout__col {
  box-sizing: border-box;
  padding: 15px; }
  @media (min-width: 960px) {
    .gift-card-layout__col--details {
      width: 40%;
      border-right: 1px solid #dddddd; }
    .gift-card-layout__col--values {
      width: 30%;
      border-right: 1px solid #dddddd; }
    .gift-card-layout__col--summary {
      width: 30%; } }
  @media (max-width: 959px) and (min-width: 640px) {
    .gift-card-layout__col {
      width: 50%; }
      .gift-card-layout__col--details {
        width: 100%;
        border-bottom: 1px solid #dddddd; }
      .gift-card-layout__col--values {
        border-right: 1px solid #dddddd; } }
  @media (max-width: 639px) {
    .gift-card-layout__col {
      width: 100%; }
      .gift-card-layout__col--details, .gift-card-layout__col--values {
        border-bottom: 1px solid #dddddd; } }

.gift-card-card {
  height: 100%; }

.gift-card-image {
  border: 1px solid #dddddd;
  background: #f7f7f7;
  margin-bottom: 10px; }
  .gift-card-image img {
    display: block;
    width: 100%;
    height: auto; }

.gift-card-title {
  font-size: 1.2rem;
  margin: 0 0 10px; }

.gift-card-text {
  margin: 0 0 10px; }

.gift-card-list {
  margin: 0 0 10px 18px;
  padding: 0; }
  .gift-card-list li {
    margin-bottom: 4px; }

.gift-card-note {
  font-size: 1.6rem;
  color: #777777;
  margin: 5px 0 0; }

.gift-card-subheading {
  font-size: 1.1rem;
  margin: 0 0 10px; }

.gift-card-label {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 5px; }

.gift-card-values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px; }

.gift-card-value {
  border: 1px solid #dddddd;
  background: #ffffff;
  padding: 6px 12px;
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 999px;
  white-space: nowrap; }
  .gift-card-value.is-active {
    background: #4a7da6;
    border-color: #4a7da6;
    color: #ffffff; }

.gift-card-custom {
  margin-bottom: 15px; }

.gift-card-custom__inner {
  display: inline-flex;
  align-items: center;
  border: 1px solid #dddddd;
  background: #ffffff;
  padding: 4px 6px;
  border-radius: 3px; }

.gift-card-currency {
  font-size: 1.4rem;
  margin-right: 4px;
  color: #777777; }

.gift-card-input {
  border: 0;
  outline: none;
  width: 70px;
  font-size: 1.4rem; }

.gift-card-helper {
  font-size: 1.6rem;
  color: #777777;
  margin-top: 4px; }

.gift-card-delivery {
  background: #f7f7f7;
  border: 1px solid #dddddd;
  padding: 8px 10px;
  margin-top: 8px; }

.gift-card-delivery__title {
  font-size: 1.2rem;
  margin: 0 0 4px; }

.gift-card-delivery__text {
  margin: 0;
  font-size: 1.2rem;
  color: #777777; }

.gift-card-field {
  margin-bottom: 12px; }

.gift-card-select {
  width: 100%;
  max-width: 120px;
  padding: 5px 8px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  font-size: 1.2rem; }

.gift-card-summary {
  border: 1px solid #dddddd;
  background: #f7f7f7;
  padding: 10px;
  margin-bottom: 15px;
  font-size: 1.2rem; }

.gift-card-summary__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px; }
  .gift-card-summary__row--total {
    border-top: 1px solid #dddddd;
    padding-top: 6px;
    margin-top: 4px;
    font-weight: 600; }

.gift-card-button {
  display: inline-block;
  width: 100%;
  text-align: center;
  border: 0;
  padding: 9px 14px;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  background: #4a7da6;
  color: #ffffff;
  border-radius: 3px; }

.gift-card-smallprint {
  font-size: 1.2rem;
  color: #777777;
  margin-top: 8px; }

.giftcard_header {
  position: relative;
  width: 100%;
  background-color: #333333;
  min-height: 80px;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center; }
  .giftcard_header p {
    color: white; }

.mobile {
  display: grid;
  grid-template-columns: [full-start] minmax(2rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 7rem) [col-end]) [center-end] minmax(2rem, 1fr) [full-end];
  grid-template-rows: auto;
  background-color: #222222; }
  .mobile__input {
    background-color: #555555; }
    .mobile__input--postcode {
      width: 120px; }
    .mobile__input--phone_number {
      width: 170px; }
  .mobile__payment {
    position: relative;
    grid-column: center-start / center-end;
    color: #333333;
    font-size: 2rem;
    background-color: #ffffff;
    padding: 2rem;
    min-height: 100vh; }
    .mobile__payment_header {
      font-size: 3rem;
      font-weight: bold; }
    .mobile__payment p {
      margin-bottom: 0.5rem; }
  .mobile__client_details {
    font-size: 2.2rem; }
    .mobile__client_details__header {
      color: #333333; }
    .mobile__client_details__warning {
      padding: 0.5rem;
      color: #000000;
      background-color: #FF3300;
      margin-bottom: 2rem !important; }
  .mobile__booking_details {
    margin-top: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #555555; }
    .mobile__booking_details_header {
      font-size: 2rem;
      width: 100%;
      text-align: center;
      background-color: #333333;
      color: #ffffff;
      padding: 1rem;
      text-transform: uppercase; }
    .mobile__booking_details_info {
      margin-top: 10px; }
      .mobile__booking_details_info p {
        font-size: 1.8rem;
        margin-bottom: 5px; }
  .mobile__pay_request {
    margin-top: 2rem;
    width: 100%; }
    .mobile__pay_request_topay {
      background-color: #FF3300;
      color: #000000;
      padding: 1rem;
      text-align: center;
      font-size: 1.8rem;
      font-weight: bold; }
    .mobile__pay_request_remove {
      padding: 1rem 5rem;
      font-size: 1.8rem;
      text-align: center; }
    .mobile__pay_request_message {
      background-color: #FF3300;
      color: #000000;
      padding: 1rem;
      text-align: center;
      font-size: 2.4rem;
      font-weight: bold; }

.mobile_header {
  position: relative;
  grid-column: full-start / full-end;
  background-color: #222222;
  display: grid;
  grid-template-columns: [full-start] minmax(2rem, 1fr) [header-center-start] minmax(min-content, 56rem) [header-center-end] minmax(2rem, 1fr) [full-end]; }
  .mobile_header_content {
    position: relative;
    grid-column: header-center-start / header-center-end;
    height: 100%;
    color: #ffffff; }
    .mobile_header_content__salonname {
      margin-top: 1rem;
      margin-bottom: 1rem;
      font-size: 4rem; }
    .mobile_header_content__salonaddress {
      font-size: 2.5rem;
      margin-bottom: 1rem; }

.edit_client {
  position: relative;
  grid-column: center-start / center-end;
  color: #555555;
  font-size: 1.8rem; }
  .edit_client__header {
    font-size: 1.2em; }
  .edit_client__user-info {
    background-color: #ffffff;
    border: 1px solid #555555;
    border-radius: 5px;
    margin-top: 0.5rem;
    padding: 1rem;
    font-size: 1.5rem;
    color: #2196F3;
    max-width: 90%; }
  .edit_client__saved {
    width: 100%;
    border-radius: 5px;
    border: 1px solid #555555;
    text-align: center;
    font-size: 4rem;
    background-color: #EEEEEE;
    margin-top: 1rem;
    padding: 2rem 2rem; }

.survey {
  position: relative;
  grid-column: center-start / center-end;
  font-size: 1.5rem;
  color: white; }
  .survey input[type="radio"] {
    width: 2em;
    height: 2em;
    accent-color: #FF7032;
    cursor: pointer; }
  .survey__header {
    font-size: 1.2em; }
  .survey__group {
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #BBBBBB;
    margin-bottom: 1rem; }
    .survey__group__header {
      margin-bottom: 0.7rem;
      font-weight: bold;
      font-size: 1.3em;
      padding-bottom: 0.7rem;
      border-bottom: 1px solid #BBBBBB; }
    .survey__group__question {
      margin-bottom: 0.7rem;
      font-weight: bold;
      font-size: 1.1em; }
    .survey__group__extra_questions {
      margin-top: 2rem; }
  .survey__yes_no {
    padding: 1rem; }
    .survey__yes_no__radio {
      width: 100%;
      display: flex;
      margin-bottom: 1rem;
      align-items: center; }
      .survey__yes_no__radio label {
        width: 50px; }
  .survey__rating {
    display: flex;
    margin-top: 2rem; }
    .survey__rating__container {
      padding-left: 2rem;
      padding-right: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center; }
      .survey__rating__container__heading {
        margin-bottom: 1rem; }

/*
.payment {
    position: relative;
    grid-column: center-start / center-end;        
    color: $color-grey-10;
    font-size: 1.8rem;    
}
    */