FileMaster

Edit File: _booking_form_preview.scss

/*!
* Copyright (c) 2024 LatePoint LLC. All rights reserved.
*/

$item-border-color: #eee;
$rounded-borders-radius: 4px;
$letter-spacing-lg: 1px;

@mixin latepointfont($content:""){
  font-family: 'latepointIcons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: $content;
}

.booking-form-preview-wrapper {

position: relative;
  display: flex;
  align-items: flex-start;
  background-color: transparent;
  background-image: radial-gradient(rgba(0, 0, 0, 0.05) 2px, transparent 0);
  background-size: 20px 20px;
  padding: 40px $content-padding;
  font-size: $body-font-size-s;
  margin: -$content-padding;

p {
    font-size: $body-font-size-s;
  }

.bf-content {
    padding: 20px;

& + .bf-heading {
      border-top: 1px solid $border-color-lightest;
    }

.os-color-scheme-selector-wrapper {
      display: none;
    }

.os-custom-color-selector-wrapper {
      position: relative;
      margin-bottom: 20px;

.trigger-custom-color-save {
        position: absolute;
        top: 50%;
        right: 10px;
        border-bottom: 1px dotted $brand-primary;
        font-size: $body-font-size-xs;
        text-decoration: none;

&:hover {
          border-bottom-style: solid;
        }
      }

&.is-hidden {
        display: none;
      }
    }

.bf-color-scheme-colors {
      margin-top: 7px;
      display: flex;
      align-items: center;
      gap: 4px;
      justify-content: space-between;
      margin-bottom: 20px;

.bf-color-scheme-color-trigger {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: 3px solid #fff;
        cursor: pointer;

&:hover {
          box-shadow: 0 0 0 2px #000;
        }

&.is-selected {
          box-shadow: 0 0 0 2px #000;
        }
      }
    }

.os-form-group.os-form-group-transparent:last-child {
      margin-bottom: 0;
    }

.os-form-group.os-form-toggler-group {
      &:last-child {
        margin-bottom: 0;
      }
    }

h4 {
      text-transform: uppercase;
      color: $headings-color;
      letter-spacing: 1px;
      font-weight: $headings-font-weight-bold;
    }
  }

.bf-preview-step-settings {
    h3 {
      font-size: $headings-font-size-s;
      margin-top: 20px;
      margin-bottom: 10px;
      border-bottom: 1px solid $border-color-lightest;
      padding-bottom: 5px;
    }
  }

.bf-heading {
    z-index: 1;
    padding: 15px 20px 0;
    font-weight: $headings-font-weight-bold;
    font-size: floor($headings-font-size * 0.65);
    display: flex;
    gap: 10px;
    align-items: center;
    &:first-child {
      border-radius: $border-radius-lg $border-radius-lg 0 0;
    }

.latepoint-icon {
      font-size: 14px;
    }

.bf-link {
      margin-left: auto;
      text-decoration: none;
      font-size: $body-font-size-xs;
      border-bottom: 1px dotted $brand-primary;
      display: flex;
      gap: 5px;
      align-items: center;

&:hover {
        border-bottom-style: solid;
      }

i {
        font-size: 12px;
      }
    }
  }

.booking-form-preview-steps {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 5px 20px -3px rgba(0, 0, 0, 0.1);

.step-edit-link-wrapper {
      display: flex;
      flex-direction: column;
      margin-bottom: 3px;

&.is-active {
        > .step-edit-link:after {
          content: "";
          height: 6px;
          width: 6px;
          background-color: $brand-primary;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
      }

.step-edit-link-wrapper {
        padding-left: 18px;
      }

&:not(.is-active) > .step-edit-link-wrapper {
        display: none;
      }
    }

.step-edit-links {
      display: flex;
    }

.step-edit-link {
      position: relative;
      padding: 5px;
      display: flex;
      align-items: center;
      font-size: $font-size-base;
      gap: 5px;
      border-radius: $border-radius;
      cursor: pointer;

&:hover {
        background-color: #f8f8f8;
      }
    }
  }

.booking-form-preview-inner {
    flex: 1;
    padding: 0 10px 0 0;
  }

}

.booking-form-preview-settings {
  width: 300px;
  flex: 0 0 300px;
  position: relative;
  @include white-box();

&.os-loading {
    &:before {
      @include loading-circle($brand-primary, 15px);
      top: 25px;
      right: 15px;
      left: auto;
    }
  }

.os-form-group.os-form-group-transparent {
    margin-bottom: 20px;
  }

.os-form-group.os-form-toggler-group label {
    font-size: $body-font-size-xs;
  }

.bf-step-no-settings-message {
    background-color: #f8f8f8;
    padding: 15px;
    font-size: floor($font-size-base * 0.8);
    color: $headings-color;
    border-radius: $border-radius;
    position: relative;
    padding-left: 45px;

&:before {
      @include latepointfont_admin("\e948");
      position: absolute;
      top: 50%;
      left: 15px;
      font-size: 15px;
      color: #111;
      transform: translateY(-50%);
    }
  }
}

.bf-main-panel-content-before {
  margin: 20px 40px 15px 40px;
}

.bf-main-panel-content-after {
  margin: 15px 40px 20px 40px;
}

.bf-main-panel-content-before, .bf-main-panel-content-after {
  text-align: left;
  color: $color-faded;
  border: 1px solid transparent;
  padding: 10px 0;

p {
    margin: 0;

& + p {
      margin-top: 5px;
    }
  }

&.medium-editor-placeholder {
    border: 1px dotted #ccc;

&:hover {
      border-style: solid;
      border-color: #ddd;
    }

&:after {
      display: none;
      color: #999;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 0;
      margin: 0;
      font-style: normal;
    }
  }
}

/* Agent Bio/Details Popup */

.os-item-details-popup {
  display: none;

&.open {
    display: block;
  }

.os-item-details-popup-close {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #FF5151;
    color: #fff;
    padding: 10px;
    font-size: floor($font-size-base * 0.9);
    font-weight: $body-font-weight-bold;
    z-index: 9999;

span, i {
      display: inline-block;
      vertical-align: middle;
      line-height: 1;
    }

span {
      margin-right: 10px;
    }
  }

.os-item-details-popup-inner {
    .item-details-popup-head {
      background-size: cover;
      background-position: center center;
      padding: 80px 40px 40px 40px;
      position: relative;

h3 {
        color: #fff;
        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
        font-size: floor($headings-font-size * 2);
        margin: 0px;
        z-index: 2;
        position: relative;
      }

.item-details-popup-title {
        margin-top: 5px;
        color: rgba(255, 255, 255, 0.8);
        z-index: 2;
        position: relative;
        font-size: floor($font-size-base * 1.4);
      }

&:before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1));
        z-index: 1;
      }
    }

.item-details-popup-content {
      padding: 40px;
      font-size: floor($font-size-base * 1.1);
      line-height: floor($font-size-base * 1.4);
      position: relative;
      z-index: 2;

.bio-curve {
        position: absolute;
        top: 1px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        transform: translateY(-100%);
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        z-index: 9999;
      }

.item-details-popup-features {
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;
        margin-top: -15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        margin-bottom: 30px;

.item-details-popup-feature {
          flex: 1;
          padding: 0px 15px;

&:first-child {
            padding-left: 0px;
          }

&:last-child {
            padding-right: 0px;
          }

.item-details-popup-feature-value {
            @include font-headers();
            font-size: floor($headings-font-size * 1.8);
            font-weight: $headings-font-weight-bold;
            line-height: 1.2;
            color: $brand-primary;
          }

.item-details-popup-feature-label {
            font-size: floor($font-size-base * 0.9);
            color: $color-faded;
          }

& + .item-details-popup-feature {
            border-left: 1px solid rgba(0, 0, 0, 0.05);
          }
        }
      }

.item-details-popup-content-i {

&::first-letter {
          @include font-headers();
          font-size: floor($headings-font-size * 1.8);
          line-height: floor($font-size-base * 1.4);
          color: $brand-primary;
          font-weight: $headings-font-weight-bold;
          padding-right: 1px;
        }
      }
    }
  }
}

@import "../shared/booking_form_summary";

.booking-form-preview {

$brand-primary: var(--latepoint-brand-primary);

&.has-changes {
    .bf-main-panel .bf-main-panel-buttons {
      .bf-btn {
        display: none;
      }

.bf-btn.bf-cancel-save-btn,
      .bf-btn.bf-save-btn {
        display: flex;
      }
    }
  }

&.booking-form-preview-step-confirmation {
    .bf-main-heading {
      display: none;
    }
    .bf-main-panel .bf-main-panel-buttons {
      .bf-next-btn {
        display: none;
      }
    }
  }

.booking-preview-step-skipped-message {
    padding: 10px;
    background-color: #fbf6e9;
    color: #111;
    text-align: center;
  }

&.latepoint-summary-is-open {
    max-width: 1030px;
  }

.bf-save-btn {
    background-color: #79b512;
    color: #fff;
  }

.bf-cancel-save-btn {
    background-color: #eee;
    color: #111;
  }

.bf-side-panel {
    flex: 0 0 270px;
    display: flex;
    flex-direction: column;
    padding: 30px;
    border-right: 1px solid $border-color-main;
    text-align: center;
    gap: 40px;

.bf-step-code {
      position: absolute;
      top: 0;
      left: 0;
      background-color: #000;
      color: #fff;
      padding: 4px;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 9px;
    }

b, strong {
      font-weight: $body-font-weight-black;
    }

.bf-side-progress {
      display: flex;
      display: none;
      gap: 10px;
      margin-bottom: 20px;
      justify-content: center;

.bf-side-progress-pill {
        width: 5px;
        height: 5px;
        background-color: #eee;

&.is-active {
          background-color: $brand-primary;
        }
      }
    }

.side-panel-main {
      margin-bottom: auto;
      padding: 50px 0;
    }

.bf-side-media {
      width: 70px;
      margin-bottom: 20px;
      display: inline-block;
      position: relative;

&:hover {
        .remove-side-media-img-tooltip {
          display: block;
        }

&:before {
          display: none;
        }
      }

.os-image-selector-w {
        position: relative;

&:not(.has-image) {
          &:before {
            content: "";
            width: 40px;
            height: 40px;
            background-color: color-mix(in srgb, $brand-primary 20%, transparent);
            position: absolute;
            bottom: 50%;
            right: 50%;
            z-index: 2;
          }
        }
      }

}

.bf-side-heading {
      font-size: $headings-font-size-l;
      margin-bottom: 5px;
      font-weight: $headings-font-weight-black;
      color: $headings-color;
    }

.bf-side-desc {
      color: $color-faded;
      font-size: $body-font-size-s;

p {
        margin: 0;
        padding: 0;

& + p {
          margin-top: 10px;
        }
      }
    }

.side-panel-extra {
      color: $color-faded;
      font-size: $body-font-size-s;

h5 {
        margin: 0 0 5px 0;
        font-weight: $headings-font-weight-black;
        font-size: $headings-font-size-s;
        color: $headings-color;
      }

p:last-child {
        margin-bottom: 0;
      }
    }
  }

.bf-main-panel {
    flex: 0 0 470px;
    max-width: 470px;
    display: flex;
    flex-direction: column;

.bf-main-heading {
      padding: 18px 40px;
      border-bottom: 1px solid $border-color-lightest;
      font-size: $headings-font-size-l;
      font-weight: $headings-font-weight-black;
    }

.bf-main-panel-content-wrapper {
      flex: 1;

.bf-main-panel-content {
        padding: 0px 40px;
      }
    }

.summary-status-wrapper {
      padding: 0 0 40px 0;
      color: $headings-color;
      font-size: $body-font-size-s;
      margin-bottom: 20px;
      border-bottom: 10px solid rgba(0, 0, 0, 0.03);
      margin-top: 20px;

.summary-status-inner {
        display: flex;
        flex-direction: column;
        align-items: center;

.ss-title {
          font-size: $headings-font-size-xl;
          font-weight: $headings-font-weight-bold;
          font-family: $headings-font-family;
          min-width: 30px;
          min-height: $headings-font-size-xl;
          border: 1px dotted #ccc;
          text-align: center;
        }

.ss-description {
          color: $color-faded;
          font-weight: $body-font-weight-normal;
          font-size: $body-font-size-s;
          margin-top: 3px;
          min-width: 30px;
          min-height: $body-font-size-s;
          border: 1px dotted #ccc;
          text-align: center;
        }

.ss-icon {
          margin-bottom: 25px;
        }

.ss-confirmation-number {
          font-size: $body-font-size-xs;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          color: $color-faded;
          margin-top: 15px;
          padding: 3px 5px;
          background-color: rgba(0, 0, 0, 0.03);

span {
          }

strong {
            color: $headings-color;
          }
        }
      }

&.summary-status-style-green {
        .ss-icon {
          display: block;
          padding: 10px;
          background-color: #98ff96;
          border-radius: 50%;
          box-shadow: 0 0 0 10px #e1ffe0;
          width: 44px;
          text-align: center;
          animation: 1s cubic-bezier(0.05, 0.45, 0.1, 1) 0.1s statusIconPop;
          animation-fill-mode: both;

&:before {
            @include latepointfont_admin('\e910');
            color: #000;
            line-height: 24px;
            display: block;
            font-size: 24px;
          }
        }
      }
      &.summary-status-style-yellow {
        .ss-icon {
          display: block;
          padding: 10px;
          background-color: #ffe196;
          border-radius: 50%;
          box-shadow: 0 0 0 10px #fff2e0;
          width: 44px;
          text-align: center;

&:before {
            content: "i";
            color: #000;
            line-height: 24px;
            display: block;
            font-size: 24px;
          }
        }
      }
    }

.bf-main-panel-buttons {
      display: flex;
      justify-content: space-between;
      border-top: 1px solid $border-color-lightest;
      padding: 10px 20px;

.bf-save-btn {
        display: none;
      }

.bf-btn {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 8px 15px;
        font-weight: $body-font-weight-black;
        font-size: $font-size-base;
        position: relative;

&.os-loading {
          color: transparent !important;

&:before {
            @include loading-circle(#fff, 15px);
          }
        }

&.bf-next-btn {
          background-color: $brand-primary;
          color: #fff;
        }

&.bf-save-btn,
        &.bf-cancel-save-btn {
          display: none;
        }
      }
    }
  }

.bf-summary-panel {
    border-left: 1px solid $border-color-lightest;
    flex: 0 0 290px;

.bf-summary-heading {
      border-bottom: 1px solid $border-color-lightest;
      padding: 5px;

.bf-summary-heading-inner {
        padding: 12px 20px;
        background-image: radial-gradient(#d4d4d4 1px, transparent 0);
        background-size: 7px 7px;
        display: flex;
        justify-content: flex-end;
      }

span {
        background-color: #fff;
        display: block;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 5px;
      }
    }

.bf-summary-content {
      padding: 25px 30px 30px;
    }
  }

position: relative;

@import "../shared/step_customer";
  @import "../shared/auth";

.editable-setting {
    &:hover {
      box-shadow: 0 0 0 2px color-mix(in srgb, $brand-primary 30%, transparent);
      border-color: color-mix(in srgb, $brand-primary 30%, transparent);
    }

&:focus {
      box-shadow: 0 0 0 2px color-mix(in srgb, $brand-primary 60%, transparent);
      border-color: color-mix(in srgb, $brand-primary 60%, transparent);
    }
  }

.os-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

&.os-flex {
      display: flex;
      align-items: center;

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

.os-form-group {
      display: inline-block;
      margin-bottom: 0px;

.latepoint-btn {
      }
    }
  }

@import "../shared/step_datepicker";
  .os-dates-and-times-w.is-searching .os-calendar-searching-info {
    display: none;
  }
  .os-dates-and-times-w.is-searching .os-calendar-while-searching-wrapper {
    display: block;
  }

.latepoint-booking-form-element {
    display: flex;
    background-color: #fff;
    box-shadow: 0 10px 30px 0 rgba(115, 125, 146, 0.11), 0 1px 2px 0 rgba(160, 170, 185, 0.6);
    position: relative;
    max-width: 740px;
    margin: 0 auto;

&.latepoint-border-radius-rounded {
      $booking-form-border-radius-rounded: 8px;
      border-radius: $booking-form-border-radius-rounded;

.bf-side-panel {
        border-radius: $booking-form-border-radius-rounded 0 0 $booking-form-border-radius-rounded;
      }

.os-items .os-item .os-item-i {
        border-radius: $booking-form-border-radius-rounded;
      }

.bf-main-panel-content-before.medium-editor-placeholder, .bf-main-panel-content-after.medium-editor-placeholder {
        border-radius: $booking-form-border-radius-rounded;
      }

.bf-main-panel-content-before, .bf-main-panel-content-after {
        border-radius: $booking-form-border-radius-rounded;
      }

.bf-btn {
        border-radius: $booking-form-border-radius-rounded;
      }

.os-monthly-calendar-days .os-day .os-day-box {
        border-radius: $booking-form-border-radius-rounded;
      }

.os-day-status {
        border-radius: $booking-form-border-radius-rounded;
      }

.bf-side-panel .bf-side-media .os-image-selector-w:before {
        border-radius: 50%;
      }
    }
  }

.os-step-tabs .os-step-tab {
    font-weight: $body-font-weight-black;
  }

.os-item-category-w {
    .os-item-category-info {
    }

&:hover:not(.selected) {
      .os-item-category-info {
      }

.os-item-category-name {
      }
    }

> .os-selectable-items {
      display: none;

.os-item {
        &.selected {
          position: relative;
          z-index: 2;

> .os-service-selector {
            &:hover {
              border-color: $brand-primary;
            }
          }
        }

&:hover {
          z-index: 2;
          position: relative;
        }

a.os-service-selector {
          position: relative;

.service-name-w .service-name {
            font-size: floor($font-size-base * 1.1);
          }

&:hover {
            border-color: $brand-primary;
          }
        }
      }
    }

.os-item-category-w {
      margin-top: 0px;
      box-shadow: none;

.os-item-category-info-w {
        border: none;
      }

.os-item-category-info-w {
        display: none;
      }

& + .os-item-category-w {
      }
    }

& + .os-item-category-w {
    }

.os-item-category-info {
      .os-item-category-img-w {
        flex: 0 0 40px;
        height: 40px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        text-align: center;
        margin-right: 15px;
        display: block;
      }

.os-item-category-name {
        display: block;
        font-weight: $body-font-weight-bold;
        font-size: floor($font-size-base * 1.2);
        display: block;
        margin-right: auto;
        flex: 1;
        transition: transform 0.2s ease;
      }

.os-item-category-services-count {
        display: block;
        color: $color-faded;
        font-size: floor($font-size-base * 0.8);
        transform: translateX(-40px);
        transition: transform 0.2s ease;
      }
    }

&.selected {
      box-shadow: none;

> .os-item-category-info-w {
        display: block;
        border-bottom: 1px solid #E5E7EE;
        background-color: #F4F6F9;
        border-top: none;
        position: relative;

&:last-child {
          border-bottom: none;
        }

.os-item-category-img-w {
          opacity: 0;
        }

.os-item-category-services-count {
          transform: translateX(0);
        }

&:before {
          content: "";
          position: absolute;
          top: 50%;
          left: 25px;
          @include latepointfont_admin("\e902");
          font-size: 10px;
          transform: translateY(-50%);
          color: $color-faded;
          transition: all 0.2s ease;
        }

> .os-item-category-info {
          &:after {
            opacity: 0;
            transform: translate(5px, -50%);
          }
        }

&:hover {
          &:before {
            transform: translate(-5px, -50%);
            color: $brand-primary;
          }

.os-item-category-name {
            color: $brand-primary;
          }
        }
      }

.os-item-category-w {
        &:hover {
        }
      }

> .os-selectable-items {
        display: block;
      }
    }
  }

.os-item-categories-holder {
    &.show-selected-only {
      > .os-selectable-items:not(.selected) {
        display: none;
      }

.os-item-category-info-w {
        display: none;
      }

.os-item-category-w {
        &:not(.selected) {
          border: none;

& + .os-item-category-w {
          }
        }

&.selected {
          > .os-item-category-info-w {
            display: none;
          }

> .os-item-categories-holder > .os-item-category-w {
            > .os-item-category-info-w {
              display: block;
            }
          }

> .os-item-categories-holder {
            > .os-item-category-w,
            > .os-selectable-items {
              display: block;

& + .os-item-category-w {
              }
            }
          }
        }
      }
    }
  }

.lp-options {
    margin-top: 20px;

.lp-option {
      box-shadow: 0px 0px 0px 2px #E8EBEE;
      cursor: pointer;
      transition: transform 0.1s ease;

&.selected {
        box-shadow: 0px 0px 0px 2px $brand-primary;

.lp-option-label {
          color: $brand-primary;
        }
      }

&:hover {
        box-shadow: 0px 0px 0px 2px $brand-primary;

.lp-option-label {
          color: $brand-primary;
        }

.lp-option-image {
        }
      }

.lp-option-image {
        padding-bottom: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        transform-origin: center center;
      }

.lp-option-label {
        font-weight: $body-font-weight-bold;
        color: $body-color;
        font-size: floor($font-size-base * 1.2);
        padding: 10px;
      }
    }

&.lp-options-grid {
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;

.lp-option {
        text-align: center;

.lp-option-image-w {
          padding: 15px;
          border-bottom: 1px solid #E8EBEE;
        }
      }

&.lp-options-grid-three {
        .lp-option {
          flex: 0 0 30%;
        }
      }

&.lp-options-grid-two {
        gap: 25px;

.lp-option {
          flex: 0 0 45%;

}
      }
    }

&.lp-options-rows {
      display: flex;
      flex-direction: column;

.lp-option {
        margin-bottom: 15px;
        display: flex;
        align-items: center;

.lp-option-image {
          flex: 0 0 50px;
          width: 50px;
        }

.lp-option-image-w {
          padding: 10px 15px;
          border-right: 1px solid #E8EBEE;
        }

.lp-option-label {
          flex: 1;
          padding-left: 20px;
        }
      }
    }

.lp-option-amount-w {
      padding: 15px 30px;
      border-bottom: 1px solid #E8EBEE;
    }

.lp-option-amount {
      border-radius: 50%;
      padding-bottom: 100%;
      box-shadow: 0px 0px 0px 2px $brand-primary;
      position: relative;

.lp-amount-value {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: $body-font-weight-bold;
        color: $body-color;
        font-size: floor($font-size-base * 1.2);
      }

&.lp-amount-deposit {
        background-color: #D5DEFF;
        box-shadow: none;

.lp-slice {
          width: 50%;
          padding-bottom: 50%;
          background: #fff;
          border-radius: 70px 0px 0px 0px;
          box-shadow: 0px 0px 0px 2px $brand-primary, 0px 0px 0px 6px #fff;
          position: absolute;
          top: 0;
          left: 0;
          transform-origin: bottom right;
          transform: rotate(-45deg);
        }

.lp-amount-value {
          left: 0px;
          background-color: #fff;
          padding: 2px 0px;
        }
      }
    }
  }

.os-items {
    margin: 0px !important;
    padding: 0px !important;

&.os-as-rows {
      & + .os-items {
        margin-top: 15px !important;
      }

> .os-item {
        & + .os-item {
          margin-top: 15px;
        }
      }

.os-item {
        .os-item-i {
          &:hover {
            .os-item-name-w {
              transform: translateX(3px);
            }
          }
        }
      }
    }

.os-item {
      .os-item-i {
        cursor: pointer;
        display: flex;
        background: #FFFFFF;
        border: 1px solid $item-border-color;
        align-items: center;
        box-shadow: none;
        outline: none;
        padding: 10px;
        color: $headings-color;
        text-decoration: none;

&:hover {
          border-color: $brand-primary;
          text-decoration: none;
          box-shadow: 0 0 0 1px $brand-primary;
        }

.os-item-img-w {
          flex: 0 0 45px;
          height: 45px;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          text-align: center;
          margin-right: 15px;
          display: block;

.latepoint-icon {
            font-size: 22px;
            line-height: 45px;
          }
        }

.os-item-name-w {
          padding: 5px 0px;
          margin-right: auto;
          display: block;
          transition: transform 0.2s ease-out;

.os-item-name {
            font-weight: $body-font-weight-black;
            font-size: floor($font-size-base * 1.2);
            display: block;
          }

.os-item-desc {
            color: $color-faded;
            font-size: floor($font-size-base * 0.9);
            display: block;
            margin-top: 3px;
          }
        }

.os-item-child-count {
          display: block;
          color: $color-faded;
          font-size: floor($font-size-base * 0.8);
          transition: transform 0.2s ease;
          flex-shrink: 0;
          margin-left: 15px;
        }

.os-item-price-w {
          border-left: 1px solid rgba(0, 0, 0, 0.05);
          padding-left: 15px;
          margin-left: 10px;
          text-align: center;
          display: block;

.os-item-price {
            display: block;
            color: var(--latepoint-brand-primary);
            line-height: 1.1;
            font-weight: $body-font-weight-bold;
            font-family: $mono-font-family;
            font-size: floor($font-size-base * 1.1);
          }

.os-item-price-label {
            display: block;
            color: $color-faded;
            font-size: floor($font-size-base * 0.8);
            white-space: nowrap;
          }
        }
      }

&:last-child {
        margin-bottom: 0px;
      }

&.with-plus {
      }

&.with-description {
        .os-item-name-w {
          padding: 5px 0px;
        }
      }

&.os-allow-multiselect {
        .os-item-i {
          padding-left: 50px;

&:before {
            background-color: #fff;
            color: #fff;
            padding: 3px;
            font-size: 12px;
            @include latepointfont_admin('\e904');
            position: absolute;
            top: 50%;
            left: 15px;
            display: block;
            transform: translateY(-50%);
            box-shadow: inset 0px 0px 0px 1px #d8dbe3;
          }
        }

&.selected {
          .os-item-i {
            .os-item-name {
            }

&:before {
              background-color: $brand-primary;
              box-shadow: none;

&:hover {
                box-shadow: none;
              }
            }
          }
        }
      }

&.selected {
        &.has-child-items {
          > .os-item-i {
            display: none;
          }

> .os-items {
          }
        }
      }

&:not(.selected) {
        .os-items {
          display: none;
        }
      }
    }

&.selected > .os-items + .os-item-categories-holder {
      margin-top: 15px;
    }

&.os-as-grid {
      display: grid;

.os-item {
        text-align: center;

&.os-item-span-row {
          grid-column: 1/4;

.os-item-i {
            padding: 15px 20px;
          }

&.with-floating-price {
            .os-item-i {
              padding: 15px 20px;
            }
          }

.os-duration-value-label {
            display: none;
          }

.os-duration-name {
            text-align: left;
            font-weight: $body-font-weight-bold;
            font-size: floor($font-size-base * 1.2);
          }
        }

.os-item-i {
          display: block;
          padding: 10px;

.os-item-name-w {
            padding-bottom: 0px;
            padding-top: 10px;
            border-top: 1px solid #eee;
          }

.os-item-img-w {
            flex: 1;
            height: auto;
            padding-bottom: 100%;
            margin: 0px;

&.os-with-avatar {
              padding: 0 15px 15px;

.os-avatar {
                background-size: cover;
                background-position: center center;
                padding-bottom: 100%;
              }
            }
          }
        }

&.with-floating-price {
          .os-item-i {
            padding: 25px 10px 15px;
          }
        }
      }

&.os-three-columns {
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 15px;
        row-gap: 15px;

.os-item {
          .os-item-i {
          }
        }
      }
    }

.os-item-details-popup-btn {
      font-size: floor($font-size-base * 0.9);
      padding: 0px;
      font-weight: $body-font-weight-bold;
      opacity: 0;
      position: absolute;
      bottom: 0px;
      left: 0px;
      right: 0px;
      max-width: 100%;
      z-index: 1;
      border: none;
      transition: transform 0.2s ease;
      display: inline-block;

span {
        color: $brand-primary;
        display: inline-block;
        border-bottom: 1px dotted color-mix(in srgb, $brand-primary 50%, transparent);
        padding: 2px 0px 1px;
      }

&:hover {
        span {
          padding-left: 5px;
          padding-right: 5px;
          color: #fff;
          background-color: $brand-primary;
          border-color: transparent;
        }
      }
    }

.os-item {
      position: relative;

&.with-details {
        .os-item-name-w {
          transition: transform 0.2s ease;
          z-index: 2;
          position: relative;
        }

.os-item-img-w {
          transition: transform 0.2s ease;
        }

.os-item-i:hover {
          .os-item-img-w {
            transform-origin: center center;
            transform: translateY(-8px) scale(0.9);
          }

.os-item-name-w {
            transform: translateY(-18px);
          }

.os-item-details-popup-btn {
            opacity: 1;
            transform: translateY(-7px);

span {
            }
          }
        }
      }

&.selected {
        .os-item-details-popup-btn {
          &:hover {
            border-color: $brand-primary;
          }
        }
      }
    }
  }

.show-selected-only {
    > .os-items.os-as-rows {
      margin-top: 0px !important;
    }
  }

&.latepoint-border-radius-rounded {
    border-radius: $rounded-borders-radius;

.item-quantity-selector-w .item-quantity-selector {
      border-radius: $rounded-borders-radius;
    }

.latepoint-form-w .select-total-attendees-w .total-attendees-selector-w .total-attendees-selector {
      border-radius: $rounded-borders-radius;
    }

.os-items .os-item-details-popup-btn:hover span {
      border-radius: $rounded-borders-radius - 2;
    }

.latepoint-side-panel .latepoint-step-desc-w .latepoint-step-desc .latepoint-desc-media.svg-w:before {
      border-radius: 50%;
    }

.latepoint-form-w .latepoint-heading-w {
      border-top-right-radius: $rounded-borders-radius;
    }

.latepoint-summary-w {
      border-top-right-radius: $rounded-borders-radius;
      border-bottom-right-radius: $rounded-borders-radius;
    }

.latepoint-form-w .latepoint-footer {
      border-bottom-right-radius: $rounded-borders-radius;
    }

.latepoint-form-w,
    .latepoint-form {
      border-bottom-right-radius: $rounded-borders-radius;
      border-top-right-radius: $rounded-borders-radius;
    }

.os-form-group.os-form-phonefield-group {
      border-radius: $rounded-borders-radius !important;
    }

.dp-timeslot .dp-label {
      border-radius: $rounded-borders-radius;
    }

.dp-timebox {
      border-radius: $rounded-borders-radius;
    }

.step-confirmation-w .confirmation-cabinet-info {
      border-radius: $rounded-borders-radius;

.confirmation-cabinet-link {
        border-radius: $rounded-borders-radius;
      }
    }

.os-password-reset-form-holder .os-password-reset-form-w,
    .step-confirmation-w .step-confirmation-set-password {
      border-radius: $rounded-borders-radius;
    }

.info-box {
      border-radius: $rounded-borders-radius;

.info-box-buttons a {
        border-radius: $rounded-borders-radius;
      }
    }

.step-confirmation-w .qr-code-on-full-summary .qr-code-vevent .qr-code-label {
      border-radius: $rounded-borders-radius;
    }

.latepoint-message {
      border-radius: $rounded-borders-radius;
    }

.step-payment-w .payment-total-info .coupon-code-input-w input.coupon-code-input,
    .step-payment-w .payment-total-info .applied-coupon-code,
    .step-payment-w .payment-total-info .coupon-code-input-w .coupon-code-input-submit {
      border-radius: $rounded-borders-radius !important;
    }

.latepoint-form-w .select-total-attendees-w .total-attendees-selector-w {
      border-radius: $rounded-borders-radius;
    }

.select-total-attendees-w {
      border-radius: $rounded-borders-radius;
    }

.dp-timeslot {
      &:first-child {
      }

&:last-child {
      }

&:first-child {
        &:last-child {
        }
      }
    }

.latepoint-progress ul li .progress-item {
      border-radius: $rounded-borders-radius;

span {
        border-radius: $rounded-borders-radius;
      }
    }

.os-monthly-calendar-days .os-day .os-day-box {
      border-radius: $rounded-borders-radius;
    }

.dp-timeslot .dp-label {
    }

.latepoint-side-panel {
      border-radius: $rounded-borders-radius 0px 0px $rounded-borders-radius;
    }

.latepoint-summary-w {
      border-radius: 0px $rounded-borders-radius $rounded-borders-radius 0px;
    }

.lp-options .lp-option {
      border-radius: $rounded-borders-radius;
    }

.os-items {
      .os-item {
        .os-item-i {
          border-radius: $rounded-borders-radius;

.os-item-img-w {
            border-radius: $rounded-borders-radius;
          }

.os-with-avatar {
            padding: 5px 15px 5px 15px;

.os-avatar {
              border-radius: 50%;
              background-size: cover;
              background-position: center center;
              padding-bottom: 100%;
            }
          }
        }

&.os-allow-multiselect .os-item-i:before {
          border-radius: 6px;
        }
      }

&.os-as-grid {
      }

.os-item-details-popup-btn {
      }
    }

.latepoint-btn {
      border-radius: $rounded-borders-radius;
    }

.os-form-group.os-form-select-group .os-form-control,
    .os-form-group.os-form-select-group input.os-form-control,
    .os-form-group.os-form-textfield-group .os-form-control,
    .os-form-group.os-form-textfield-group input.os-form-control {
      border-radius: $rounded-borders-radius !important;
    }

.os-form-group.os-form-phonefield-group {
      input.os-form-control {
        border-radius: 0 $rounded-borders-radius $rounded-borders-radius 0 !important;
      }

.lp_iti__selected-flag {
        border-radius: $rounded-borders-radius 0 0 $rounded-borders-radius;
      }
    }

.step-payment-w .payment-total-info {
      border-radius: $rounded-borders-radius;
    }
  }
}

.bf-side-media-picker-trigger {
  position: relative;
  z-index: 1;

.os-image-selector-w {
    &.has-image {
      .os-default-image-wrapper {
        display: none;
      }
    }

&:not(.has-image) {
      .os-image-container {
        display: none;
      }
    }
  }

.side-media-img-tooltip {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background-color: #000;
    padding: 3px 6px;
    display: none;
    white-space: nowrap;
    font-size: 12px;
  }

.os-image-selector-w {
    .os-image-selector-text {
      display: none;
    }

.os-image-container {
      width: 70px;
      min-height: 40px;
      height: auto;
      border-radius: 0;

&:before {
        content: "" !important;
      }
    }

.os-image-selector-trigger {
      border: none;
      padding: 0;
      border-radius: 0;

&:hover {
        box-shadow: 0 0 0 2px color-mix(in srgb, $brand-primary 30%, transparent);
      }
    }
  }
}

Back