FileMaster

Edit File: _customize.less

@import "_variables";

// selector variable
@checkGroup: el-checkbox-group;
@checkBtn: el-checkbox-button;
@calendar: v-calendar-column;
@formItem: el-form-item;
@input: el-input;
@textarea: el-textarea;
@select: el-select;
@radio: el-radio;
@checkbox: el-checkbox;
@upload: el-upload;
@collapse: el-collapse;

.amelia-app-booking #amelia-booking-wrap {
  .am-step-booking-catalog {
    .am-form {
      //STEP BY STEP
      &-stepByStepForm {
        //STEP BY STEP - SELECT SERVICE FORM
        &-selectServiceForm {
          background-color: @sbs-ssf-bgr-color;

.am-select-service {
            background-color: transparent;
          }
        }

//STEP BY STEP - CALENDAR DATE TIME FORM
        &-calendarDateTimeForm {
          &.am-select-date {
            background: linear-gradient(@sbs-cf-gradient-angle, @sbs-cf-gradient1 0%, @sbs-cf-gradient2 100%);

* {
              color: @sbs-cf-text-color;
            }

.am-recurring-check {
              span {
                color: @sbs-cf-text-color;
              }
            }

.am-appointment-times {
              .el-radio-button {
                .el-radio-button__inner {
                  color: @sbs-cf-text-color;
                }
              }
            }
          }
        }

//STEP BY STEP - RECURRING SETUP FORM
        &-recurringSetupForm {
          &.am-select-date {
            background: linear-gradient(@sbs-rsf-gradient-angle, @sbs-rsf-gradient1 0%, @sbs-rsf-gradient2 100%);
          }
        }

//STEP BY STEP - RECURRING DATES FORM
        &-recurringDatesForm {
          &.am-recurring-dates {
            background-color: @sbs-rdf-bgr-color;

.am-recurring-dates-header {
              p {
                color: @sbs-rdf-text-color;
              }

p.am-recurring-dates-header-second {
                color: fade(@sbs-rdf-text-color, 65%);
              }
            }

.am-recurring-dates-row-header {
              * {
                color: fade(@sbs-rdf-text-color, 65%);
              }
            }

.am-recurring-flex-row-middle-align.am-recurring-dates-row-editing {
              background-color: fade(@sbs-rdf-bgr-color, 60%);
            }

// NONE FORM ITEMS
            .am-select {
              &-stepByStepForm {
                //CUSTOMIZE - SELECT - STEP BY STEP - RECURRING DATES FORM
                &-recurringDatesForm {
                  &.is-editing {
                    .@{input} {
                      &:hover {
                        .@{select} {
                          &__caret {
                            color: @sbs-rdf-input-text-color;
                          }
                        }
                      }

& .@{input}__inner {
                        color: @sbs-rdf-input-text-color;
                        background-color: @sbs-rdf-input-color;
                      }

&.is-disabled {
                        .@{input}__inner {
                          background-color: fade(@sbs-rdf-input-color, 25%);
                        }
                      }

& .@{select} {
                        &__caret {
                          color: fade(@sbs-rdf-input-text-color, 75%);
                        }
                      }
                    }

&.am-recurring-row-item {
                      .@{select} {
                        background-color: transparent;
                      }
                    }
                  }

.@{input} {
                    & .@{input}__inner {
                      color: @sbs-rdf-text-color;
                    }

&.is-disabled {
                      .@{input}__inner {
                        background-color: fade(@sbs-rdf-input-color, 25%);
                      }
                    }

& .@{select} {
                      &__caret {
                        color: fade(@sbs-rdf-input-text-color, 75%);
                      }
                    }
                  }

.@{select} {
                    background-color: transparent;
                  }
                }
              }
            }

.am-block-stepByStepForm-recurringDatesForm {
              &.am-pagination.am-section {
                p {
                  color: @sbs-rdf-text-color;
                }

.el-pagination {
                  button {
                    background-color: @sbs-rdf-bgr-color;
                  }

.el-pager {
                    li {
                      background-color: @sbs-rdf-bgr-color;
                      color: @sbs-rdf-text-color;

&:hover {
                        color: @color-accent;
                      }
                    }

li.active {
                      background-color: @color-accent;

&:hover {
                        color: @sbs-rdf-text-color;
                      }
                    }
                  }
                }
              }
            }
          }
        }

//STEP BY STEP - SELECT PACKAGE FORM
        &-selectPackageForm {
          background-color: @sbs-spf-bgr-color;

p {
            color: @sbs-spf-text-color;
          }
        }

//STEP BY STEP - PACKAGE INFO FORM
        &-packageInfoForm {
          background-color: @sbs-pif-bgr-color;

p, h2 {
            color: @sbs-pif-text-color;
          }

.am-package {
            &-rule {
              span, i {
                color: @sbs-pif-text-color;
              }
            }

&-description {
              color: @sbs-pif-text-color;
            }
          }
        }

//STEP BY STEP - PACKAGE SETUP FORM
        &-packageSetupForm {
          &.am-select-date {
            background: linear-gradient(@sbs-psf-gradient-angle, @sbs-psf-gradient1 0%, @sbs-psf-gradient2 100%);

* {
              color: @sbs-psf-text-color;
            }

.am-appointment-times {
              .el-radio-button {
                .el-radio-button__inner {
                  color: @sbs-psf-text-color;
                }
              }
            }
          }
        }

//STEP BY STEP - PACKAGE LIST FORM
        &-packageListForm {
          &.am-package-list {
            background-color: @sbs-plf-bgr-color;

.am-package-header-image-data-wrapper, .am-overview-booking, .am-appointments-wrapper {
              * {
                color: @sbs-plf-text-color
              }
            }

.am-package-price__wrapper {
              color: @color-accent;
            }

.am-package-description {
              color: @sbs-plf-text-color;
            }

.am-appointment {
              &-header-cell {
                color: fade(@sbs-plf-text-color, 50%);
              }

&-body-heading {
                color: fade(@sbs-plf-text-color, 50%);
              }
            }

.el-collapse {
              &-item {
                &__header {
                  background-color: rgba(0, 0, 0, 0.05);
                }

&__wrap {
                  background-color: transparent;
                }
              }
            }
          }
        }

//STEP BY STEP - CONFIRM BOOKING FORM
        &-confirmBookingForm {
          //STEP BY STEP - CONFIRM BOOKING FORM - APPOINTMENT
          &-appointment {
            &.am-confirm-booking {
              .@{formItem} {
                &__content {
                  .am-payment-button {

&-selected {
                      p {
                        color: @color-accent;
                      }
                    }
                    &-inner {
                      svg {
                        path {
                          fill: @sbs-caf-text-color;
                        }
                      }
                    }
                  }
                }
              }
              background-color: @sbs-caf-bgr-color;

p {
                color: @sbs-caf-text-color;
              }
            }
          }

//STEP BY STEP - CONFIRM BOOKING FORM - PACKAGE
          &-package {
            &.am-confirm-booking {
              .@{formItem} {
                &__content {
                  .am-payment-button {

&-selected {
                      p {
                        color: @color-accent;
                      }
                    }
                    &-inner {
                      svg {
                        path {
                          fill: @sbs-cpf-text-color;
                        }
                      }
                    }
                  }
                }
              }
              background-color: @sbs-cpf-bgr-color;

p, h2 {
                color: @sbs-cpf-text-color;
              }
            }
          }
        }

//STEP BY STEP - CONGRATULATIONS BOOKING FORM
        &-congratulationsForm {
          //STEP BY STEP - CONGRATULATIONS BOOKING FORM - APPOINTMENT
          &-appointment {
            &.am-success-payment {
              background-color: @sbs-coa-bgr-color;

h4, p {
                color: @sbs-coa-text-color;
              }
            }

}

//STEP BY STEP - CONGRATULATIONS BOOKING FORM - PACKAGE
          &-package {
            &.am-success-payment {
              background-color: @sbs-cop-bgr-color;

h4, p {
                color: @sbs-cop-text-color;
              }
            }

}
        }
      }

//CATALOG FORM
      &-catalogForm {
        //CATALOG FORM - SELECT SERVICE FORM
        &-selectServiceForm {
          background-color: @cf-ssf-bgr-color;

.am-select-service {
            background-color: transparent;
          }
        }

//CATALOG FORM - CALENDAR DATE TIME FORM
        &-calendarDateTimeForm {
          &.am-select-date {
            background: linear-gradient(@cf-cf-gradient-angle, @cf-cf-gradient1 0%, @cf-cf-gradient2 100%);

* {
              color: @cf-cf-text-color;
            }

.am-recurring-check {
              span {
                color: @cf-cf-text-color;
              }
            }

.am-appointment-times {
              .el-radio-button {
                .el-radio-button__inner {
                  color: @cf-cf-text-color;
                }
              }
            }
          }
        }

//CATALOG FORM - RECURRING SETUP FORM
        &-recurringSetupForm {
          &.am-select-date {
            background: linear-gradient(@cf-rsf-gradient-angle, @cf-rsf-gradient1 0%, @cf-rsf-gradient2 100%);
          }
        }

//CATALOG FORM - RECURRING DATES FORM
        &-recurringDatesForm {
          &.am-recurring-dates {
            background-color: @cf-rdf-bgr-color;

.am-recurring-dates-header {
              p {
                color: @cf-rdf-text-color;
              }

p.am-recurring-dates-header-second {
                color: fade(@cf-rdf-text-color, 65%);
              }
            }

.am-recurring-dates-row-header {
              * {
                color: fade(@cf-rdf-text-color, 65%);
              }
            }

.am-recurring-flex-row-middle-align.am-recurring-dates-row-editing {
              background-color: fade(@cf-rdf-bgr-color, 60%);
            }

// NONE FORM ITEMS
            .am-select {
              &-catalogForm {
                //CUSTOMIZE - SELECT - STEP BY STEP - RECURRING DATES FORM
                &-recurringDatesForm {
                  &.is-editing {
                    .@{input} {
                      &:hover {
                        .@{select} {
                          &__caret {
                            color: @cf-rdf-input-text-color;
                          }
                        }
                      }

& .@{input}__inner {
                        color: @cf-rdf-input-text-color;
                        background-color: @cf-rdf-input-color;
                      }

&.is-disabled {
                        .@{input}__inner {
                          background-color: fade(@cf-rdf-input-color, 25%);
                        }
                      }

& .@{select} {
                        &__caret {
                          color: fade(@cf-rdf-input-text-color, 75%);
                        }
                      }
                    }

&.am-recurring-row-item {
                      .@{select} {
                        background-color: transparent;
                      }
                    }
                  }

.@{input} {
                    & .@{input}__inner {
                      color: @cf-rdf-text-color;
                    }

&.is-disabled {
                      .@{input}__inner {
                        background-color: fade(@cf-rdf-input-color, 25%);
                      }
                    }

& .@{select} {
                      &__caret {
                        color: fade(@cf-rdf-input-text-color, 75%);
                      }
                    }
                  }

.@{select} {
                    background-color: transparent;
                  }
                }
              }
            }

.am-block-catalogForm-recurringDatesForm {
              &.am-pagination.am-section {
                p {
                  color: @cf-rdf-text-color;
                }

.el-pagination {
                  button {
                    background-color: @cf-rdf-bgr-color;
                  }

.el-pager {
                    li {
                      background-color: @cf-rdf-bgr-color;
                      color: @cf-rdf-text-color;

&:hover {
                        color: @color-accent;
                      }
                    }

li.active {
                      background-color: @color-accent;

&:hover {
                        color: @cf-rdf-text-color;
                      }
                    }
                  }
                }
              }
            }
          }
        }

//CATALOG FORM - PACKAGE SETUP FORM
        &-packageSetupForm {
          &.am-select-date {
            background: linear-gradient(@cf-psf-gradient-angle, @cf-psf-gradient1 0%, @cf-psf-gradient2 100%);

* {
              color: @cf-psf-text-color;
            }

.am-appointment-times {
              .el-radio-button {
                .el-radio-button__inner {
                  color: @cf-psf-text-color;
                }
              }
            }
          }
        }

//CATALOG FORM - PACKAGE LIST FORM
        &-packageListForm {
          &.am-package-list {
            background-color: @cf-plf-bgr-color;

.am-package-header-image-data-wrapper, .am-overview-booking, .am-appointments-wrapper {
              * {
                color: @cf-plf-text-color
              }
            }

.am-package-price__wrapper {
              color: @color-accent;
            }

.am-package-description {
              color: @cf-plf-text-color;
            }

.am-appointment {
              &-header-cell {
                color: fade(@cf-plf-text-color, 50%);
              }

&-body-heading {
                color: fade(@cf-plf-text-color, 50%);
              }
            }

.el-collapse {
              &-item {
                &__header {
                  background-color: rgba(0, 0, 0, 0.05);
                }

&__wrap {
                  background-color: transparent;
                }
              }
            }
          }
        }

//CATALOG FORM - CONFIRM BOOKING FORM
        &-confirmBookingForm {
          //CATALOG FORM - CONFIRM BOOKING FORM - APPOINTMENT
          &-appointment {
            &.am-confirm-booking {
              background-color: @cf-caf-bgr-color;

p {
                color: @cf-caf-text-color;
              }
            }
          }

//CATALOG FORM - CONFIRM BOOKING FORM - PACKAGE
          &-package {
            &.am-confirm-booking {

.@{formItem} {
                &__content {
                  .am-payment-button {

&-selected {
                      p {
                        color: @color-accent;
                      }
                    }
                    &-inner {
                      svg {
                        path {
                          fill: @cf-cpf-text-color;
                        }
                      }
                    }
                  }
                }
              }
              background-color: @cf-cpf-bgr-color;

p, h2 {
                color: @cf-cpf-text-color;
              }
            }
          }
        }

//CATALOG FORM - CONGRATULATIONS BOOKING FORM
        &-congratulationsForm {
          //CATALOG FORM - CONGRATULATIONS BOOKING FORM - APPOINTMENT
          &-appointment {
            &.am-success-payment {
              background-color: @cf-coa-bgr-color;

h4, p {
                color: @cf-coa-text-color;
              }
            }
          }

//CATALOG FORM - CONGRATULATIONS BOOKING FORM - PACKAGE
          &-package {
            &.am-success-payment {
              background-color: @cf-cop-bgr-color;

h4, p {
                color: @cf-cop-text-color;
              }
            }
          }
        }
      }
    }

//CUSTOMIZE - BLOCK
    .am-block {
      //CUSTOMIZE - BLOCK - STEP BY STEP
      &-stepByStepForm {
        //CUSTOMIZE - BLOCK - STEP BY STEP - SELECT SERVICE FORM
        &-selectServiceForm {
          color: @sbs-ssf-text-color;

.@{formItem} {
            &__label {
              color: @sbs-ssf-text-color;
              font-weight: 700;
            }
          }

span, p {
            color: @sbs-ssf-text-color;
          }
        }

//CUSTOMIZE - BLOCK - STEP BY STEP - CALENDAR DATE FORM
        &-calendarDateTimeForm {
          color: @sbs-cf-text-color;

span, p {
            color: @sbs-cf-text-color;
          }
        }

//CUSTOMIZE - BLOCK - STEP BY STEP - RECURRING SETUP FORM
        &-recurringSetupForm {
          color: @sbs-rsf-text-color;

span, p {
            color: @sbs-rsf-text-color;
          }

p.am-recurring-setup-title {
            color: @sbs-rsf-text-color
          }

&.am-recurring-setup-description {
            span, p {
              color: @sbs-rsf-text-color;
            }
          }
        }

//CUSTOMIZE - BLOCK - STEP BY STEP - RECURRING DATES FORM
        &-recurringDatesForm {
          span, p, i {
            color: @sbs-rdf-text-color;
          }

&.am-delete-element {
            i {
              background-color: @color-accent;
            }

&:hover {
              i {
                background-color: @sbs-rdf-text-color;
                color: @color-accent;
              }
            }
          }
        }

//CUSTOMIZE - BLOCK - STEP BY STEP - PACKAGE INFO FORM
        &-packageInfoForm {
          color: @sbs-pif-text-color;
          fill: @sbs-pif-text-color;
        }

//CUSTOMIZE - BLOCK - STEP BY STEP - PACKAGE SETUP FORM
        &-packageSetupForm {
          color: @sbs-psf-text-color;

span, p {
            color: @sbs-psf-text-color;
          }
        }

//CUSTOMIZE - BLOCK - STEP BY STEP - CONFIRM BOOKING FORM
        &-confirmBookingForm {
          // APPOINTMENT
          &-appointment {
            color: @sbs-caf-text-color;

.@{formItem} {
              &__label {
                color: @sbs-caf-text-color;
                font-weight: 700;

span {
                  color: @sbs-caf-text-color;
                  font-weight: 700;
                }
              }
            }

div, i {
              color: @sbs-caf-text-color;
            }
          }

// PACKAGE
          &-package {
            color: @sbs-cpf-text-color;

.@{formItem} {
              &__label {
                color: @sbs-cpf-text-color;
                font-weight: 700;

span {
                  color: @sbs-cpf-text-color;
                }
              }
            }

div, i {
              color: @sbs-cpf-text-color;
            }
          }
        }
      }

//CUSTOMIZE - BLOCK - CATALOG FORM
      &-catalogForm {
        //CUSTOMIZE - BLOCK - CATALOG FORM - SELECT SERVICE FORM
        &-selectServiceForm {
          color: @cf-ssf-text-color;

.@{formItem} {
            &__label {
              color: @cf-ssf-text-color;
              font-weight: 700;
            }
          }

span, p {
            color: @cf-ssf-text-color;
          }
        }

//CUSTOMIZE - BLOCK - CATALOG FORM - CALENDAR DATE FORM
        &-calendarDateTimeForm {
          color: @cf-cf-text-color;

span, p {
            color: @cf-cf-text-color;
          }
        }

//CUSTOMIZE - BLOCK - CATALOG FORM - RECURRING SETUP FORM
        &-recurringSetupForm {
          color: @cf-rsf-text-color;

span, p {
            color: @cf-rsf-text-color;
          }

p.am-recurring-setup-title {
            color: @cf-rsf-text-color
          }

&.am-recurring-setup-description {
            span, p {
              color: @cf-rsf-text-color;
            }
          }
        }

//CUSTOMIZE - BLOCK - CATALOG FORM - RECURRING DATES FORM
        &-recurringDatesForm {
          span, p, i {
            color: @cf-rdf-text-color;
          }

&.am-delete-element {
            i {
              background-color: @color-accent;
            }

&:hover {
              i {
                background-color: @cf-rdf-text-color;
                color: @color-accent;
              }
            }
          }
        }

//CUSTOMIZE - BLOCK - CATALOG FORM - PACKAGE SETUP FORM
        &-packageSetupForm {
          color: @cf-psf-text-color;

span, p {
            color: @cf-psf-text-color;
          }
        }

//CUSTOMIZE - BLOCK - CATALOG FORM - CONFIRM BOOKING FORM
        &-confirmBookingForm {
          // APPOINTMENT
          &-appointment {
            color: @cf-caf-text-color;

.am-payment-buttons-wrapper {
              label {
                span {
                  color: @cf-caf-text-color;
                }
              }
            }

.@{formItem} {
              &__label {
                color: @cf-caf-text-color;
                font-weight: 700;

span {
                  color: @cf-caf-text-color;
                  font-weight: 700;
                }
              }
            }

div, i {
              color: @cf-caf-text-color;
            }
          }

// PACKAGE
          &-package {
            color: @cf-cpf-text-color;

.@{formItem} {
              &__label {
                color: @cf-cpf-text-color;
                font-weight: 700;

span {
                  color: @cf-cpf-text-color;
                  font-weight: 700;
                }
              }
            }

div, i {
              color: @cf-cpf-text-color;
            }
          }
        }

//CUSTOMIZE - BLOCK - CATALOG FORM - CONFIRM BOOKING FORM
        &-congratulationsForm {
          // APPOINTMENT
          &-appointment {
            color: @cf-coa-text-color;

.@{formItem} {
              &__label {
                color: @cf-coa-text-color;
                font-weight: 700;

span {
                  color: @cf-coa-text-color;
                  font-weight: 700;
                }
              }
            }

div, i {
              color: @cf-coa-text-color;
            }
          }

// PACKAGE
          &-package {
            color: @cf-cop-text-color;

.@{formItem} {
              &__label {
                color: @cf-cop-text-color;
                font-weight: 700;

span {
                  color: @cf-cop-text-color;
                  font-weight: 700;
                }
              }
            }

div, i {
              color: @cf-cop-text-color;
            }
          }
        }
      }
    }

.@{calendar} {
      .am-calendar {
        // STEP BY STEP
        &-stepByStepForm {
          // STEP BY STEP - RECURRING SETUP FORM
          &-recurringSetupForm {
            &.@{formItem} {
              & .@{formItem}__label {
                color: @sbs-rsf-text-color;
                font-weight: 700;
              }

& .@{formItem}__content {
                & .@{input}__inner {
                  color: @sbs-rsf-input-text-color;
                  background-color: @sbs-rsf-input-color;
                }
              }
            }

.popover-content-wrapper .popover-content {
              color: @sbs-rsf-dropdown-text-color;
              background-color: @sbs-rsf-dropdown-color;

* {
                color: @sbs-rsf-dropdown-text-color;
              }

.c-title-popover.popover-container {
                .popover-origin {
                  background-color: @sbs-rsf-dropdown-color;

* {
                    background-color: @sbs-rsf-dropdown-color;
                  }
                }
              }

.c-day-content:hover {
                & > div {
                  color: @color-accent;
                }
              }

:not(.c-day-backgrounds.c-day-layer:empty) ~ .c-day-content-wrapper .c-day-content > div {
                color: @color-white;
              }
            }
          }
        }

// CATALOG FORM
        &-catalogForm {
          // CATALOG FORM - RECURRING SETUP FORM
          &-recurringSetupForm {
            &.@{formItem} {
              & .@{formItem}__label {
                color: @cf-rsf-text-color;
                font-weight: 700;
              }

& .@{formItem}__content {
                & .@{input}__inner {
                  color: @cf-rsf-input-text-color;
                  background-color: @cf-rsf-input-color;
                }
              }
            }

.popover-content-wrapper .popover-content {
              color: @cf-rsf-dropdown-text-color;
              background-color: @cf-rsf-dropdown-color;

* {
                color: @cf-rsf-dropdown-text-color;
              }

.c-title-popover.popover-container {
                .popover-origin {
                  background-color: @cf-rsf-dropdown-color;

* {
                    background-color: @cf-rsf-dropdown-color;
                  }
                }
              }

.c-day-content:hover {
                & > div {
                  color: @color-accent;
                }
              }

:not(.c-day-backgrounds.c-day-layer:empty) ~ .c-day-content-wrapper .c-day-content > div {
                color: @color-white;
              }
            }
          }
        }
      }

&.am-calendar {
        // STEP BY STEP
        &-stepByStepForm {
          // STEP BY STEP - RECURRING DATES FORM
          &-recurringDatesForm {
            &.am-recurring-row-item.am-recurring-row-item-date {
              &.is-editing {
                & .@{input}__inner {
                  color: @sbs-rdf-input-text-color;
                  background-color: @sbs-rdf-input-color;
                }

.popover-content-wrapper .popover-content {
                  color: @sbs-rdf-dropdown-text-color;
                  background-color: @sbs-rdf-dropdown-color;

* {
                    color: @sbs-rdf-dropdown-text-color;
                  }

.c-title-popover.popover-container {
                    .popover-origin {
                      background-color: @sbs-rdf-dropdown-color;

* {
                        background-color: @sbs-rdf-dropdown-color;
                      }
                    }
                  }

.c-day-content:hover {
                    & > div {
                      color: @color-accent;
                    }
                  }

:not(.c-day-backgrounds.c-day-layer:empty) ~ .c-day-content-wrapper .c-day-content > div {
                    color: @color-white;
                  }
                }
              }

&.is-substitute {
                & .@{input}__inner {
                  color: @color-accent;
                }
              }

& .@{input}__inner {
                color: @sbs-rdf-text-color;
              }
            }

.popover-container {
              .popover-content-wrapper .popover-content {
                color: @sbs-rdf-dropdown-text-color;
                background-color: @sbs-rdf-dropdown-color;

* {
                  color: @sbs-rdf-dropdown-text-color;
                }

.c-title-popover.popover-container {
                  .popover-origin {
                    background-color: @sbs-rdf-dropdown-color;

* {
                      background-color: @sbs-rdf-dropdown-color;
                    }
                  }
                }

.c-day-content:hover {
                  & > div {
                    color: @color-accent;
                  }
                }

:not(.c-day-backgrounds.c-day-layer:empty) ~ .c-day-content-wrapper .c-day-content > div {
                  color: @color-white;
                }
              }
            }
          }
        }

// CATALOG FORM
        &-catalogForm {
          // CATALOG FORM - RECURRING DATES FORM
          &-recurringDatesForm {
            &.am-recurring-row-item.am-recurring-row-item-date {
              &.is-editing {
                & .@{input}__inner {
                  color: @cf-rdf-input-text-color;
                  background-color: @cf-rdf-input-color;
                }
              }

&.is-substitute {
                & .@{input}__inner {
                  color: @color-accent;
                }
              }

& .@{input}__inner {
                color: @cf-rdf-text-color;
              }
            }

.popover-container {
              .popover-content-wrapper .popover-content {
                color: @cf-rdf-dropdown-text-color;
                background-color: @cf-rdf-dropdown-color;

* {
                  color: @cf-rdf-dropdown-text-color;
                }

.c-title-popover.popover-container {
                  .popover-origin {
                    background-color: @cf-rdf-dropdown-color;

* {
                      background-color: @cf-rdf-dropdown-color;
                    }
                  }
                }

.c-day-content:hover {
                  & > div {
                    color: @color-accent;
                  }
                }

:not(.c-day-backgrounds.c-day-layer:empty) ~ .c-day-content-wrapper .c-day-content > div {
                  color: @color-white;
                }
              }
            }
          }
        }
      }
    }
  }

#am-events-booking {
    .am-event-list {
      .am-form {
        //EVENT LIST
        &-eventListForm {
          &.am-event {
            background-color: @elf-bgr-color;

&:hover {
              background-color: darken(@elf-bgr-color, 5%);
            }

.am-event-data {
              .am-event-info {
                .am-event-sub-info {
                  & > div {
                    color: @elf-text-color;
                  }
                }
              }
            }

.am-event-book-cta {
              &__inner {
                span {
                  color: @elf-text-color;
                }
              }
            }
          }

div {
            color: @elf-text-color;

&.am-calendar-picker * {
              color: @color-text-prime;
            }

&.@{formItem}__error {
              color: @color-red;
            }
          }

//EVENT LIST - CONFIRM BOOKING FORM
          &-confirmBookingForm {
            //EVENT LIST - CONFIRM BOOKING FORM - EVENT
            &-event {
              &.am-confirmation-booking {
                p {
                  color: @elf-text-color;
                }

.am-payment-button {
                  &:hover {
                    p {
                      color: @color-accent;
                    }
                  }

&-selected {
                    p {
                      color: @color-accent;
                    }
                  }
                }
              }
            }
          }

//EVENT LIST - CONGRATULATIONS BOOKING FORM
          &-congratulationsForm {
            &-event {
              h4, p {
                color: @elf-text-color;
              }
            }
          }
        }
      }

.am-block {
        &-eventListForm {
          &-confirmBookingForm {
            &-event {
              .@{formItem} {
                &__label {
                  color: @elf-text-color;
                  font-weight: 700;

span {
                    color: @elf-text-color;
                    font-weight: 700;
                  }
                }
              }
            }
          }
        }
      }
    }

.@{calendar} {
      &.am-calendar {
        &-eventListForm {
          .@{input}__inner {
            color: @elf-input-text-color;
            background-color: @elf-input-color;
          }

.@{input}__prefix {
            svg {
              path {
                fill: @elf-input-text-color;
              }
            }
          }

.popover-content-wrapper .popover-content {
            color: @elf-dropdown-text-color;
            background-color: @elf-dropdown-color;

* {
              color: @elf-dropdown-text-color;
            }

.c-title-popover.popover-container {
              .popover-origin {
                background-color: @elf-dropdown-color;

* {
                  background-color: @elf-dropdown-color;
                }
              }
            }

.c-day-content:hover {
              & > div {
                color: @color-accent;
              }
            }

:not(.c-day-backgrounds.c-day-layer:empty) ~ .c-day-content-wrapper .c-day-content > div {
              color: @color-white;
            }
          }
        }
      }
    }
  }

// FORM ITEMS
  .@{formItem} {
    // CUSTOMIZE - INPUT
    &.am-input {
      // CUSTOMIZE - INPUT - STEP BY STEP
      &-stepByStepForm {
        // CUSTOMIZE - INPUT - STEP BY STEP - CONFIRM BOOKING
        &-confirmBookingForm {
          // CUSTOMIZE - INPUT - STEP BY STEP - CONFIRM BOOKING APPOINTMENT
          &-appointment {
            .@{formItem} {
              &__label {
                color: @sbs-caf-text-color;
                font-weight: 700;

span {
                  color: @sbs-caf-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &__inner {
                color: @sbs-caf-input-text-color;
                background-color: @sbs-caf-input-color;
              }

&.is-disabled {
                .@{input}__inner {
                  border-color: #e4e7ed;
                  background-color: lighten(@sbs-caf-input-color, 15%);
                }
              }

&-group {
                &__prepend {
                  background-color: @sbs-caf-input-color;

.@{input}__icon {
                    color: @sbs-caf-input-text-color;
                  }
                }

.@{input} {
                  &__suffix {
                    i {
                      color: @sbs-caf-input-text-color;
                    }
                  }
                }
              }
            }
          }

// CUSTOMIZE - INPUT - STEP BY STEP - CONFIRM BOOKING PACKAGE
          &-package {
            .@{formItem} {
              &__label {
                color: @sbs-cpf-text-color;
                font-weight: 700;

span {
                  color: @sbs-cpf-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &__inner {
                color: @sbs-cpf-input-text-color;
                background-color: @sbs-cpf-input-color;
              }

&.is-disabled {
                .@{input}__inner {
                  border-color: #e4e7ed;
                  background-color: lighten(@sbs-cpf-input-color, 15%);
                }
              }

&-group {
                &__prepend {
                  background-color: @sbs-cpf-input-color;

.@{input}__icon {
                    color: @sbs-cpf-input-text-color;
                  }
                }

.@{input} {
                  &__suffix {
                    i {
                      color: @sbs-cpf-input-text-color;
                    }
                  }
                }
              }
            }
          }
        }
      }

// CUSTOMIZE - INPUT - EVENT LIST
      &-eventListForm {
        // CUSTOMIZE - INPUT - EVENT LIST - CONFIRM BOOKING
        &-confirmBookingForm {
          // CUSTOMIZE - INPUT - EVENT LIST - CONFIRM BOOKING EVENT
          &-event {
            .@{formItem} {
              &__label {
                color: @elf-text-color;
                font-weight: 700;
              }
            }

.@{input} {
              &__inner {
                color: @elf-input-text-color;
                background-color: @elf-input-color;
              }

&.is-disabled {
                .@{input}__inner {
                  border-color: #e4e7ed;
                  background-color: lighten(@elf-input-color, 15%);
                }
              }

&-group {
                &__prepend {
                  background-color: @elf-input-color;

.@{input}__icon {
                    color: @elf-input-text-color;
                  }
                }

.@{input} {
                  &__suffix {
                    i {
                      color: @elf-input-text-color;
                    }
                  }
                }
              }
            }
          }
        }
      }

// CUSTOMIZE - INPUT - CATALOG FORM
      &-catalogForm {
        // CUSTOMIZE - INPUT - CATALOG FORM - CONFIRM BOOKING
        &-confirmBookingForm {
          // CUSTOMIZE - INPUT - CATALOG FORM - CONFIRM BOOKING APPOINTMENT
          &-appointment {
            .@{formItem} {
              &__label {
                color: @cf-caf-text-color;
                font-weight: 700;

span {
                  color: @cf-caf-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &__inner {
                color: @cf-caf-input-text-color;
                background-color: @cf-caf-input-color;
              }

&.is-disabled {
                .@{input}__inner {
                  border-color: #e4e7ed;
                  background-color: lighten(@cf-caf-input-color, 15%);
                }
              }

&-group {
                &__prepend {
                  background-color: @cf-caf-input-color;

.@{input}__icon {
                    color: @cf-caf-input-text-color;
                  }
                }

.@{input} {
                  &__suffix {
                    i {
                      color: @cf-caf-input-text-color;
                    }
                  }
                }
              }
            }
          }

// CUSTOMIZE - INPUT - CATALOG FORM - CONFIRM BOOKING PACKAGE
          &-package {
            .@{formItem} {
              &__label {
                color: @cf-cpf-text-color;
                font-weight: 700;

span {
                  color: @cf-cpf-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &__inner {
                color: @cf-cpf-input-text-color;
                background-color: @cf-cpf-input-color;
              }

&.is-disabled {
                .@{input}__inner {
                  border-color: #e4e7ed;
                  background-color: lighten(@cf-cpf-input-color, 15%);
                }
              }

&-group {
                &__prepend {
                  background-color: @cf-cpf-input-color;

.@{input}__icon {
                    color: @cf-cpf-input-text-color;
                  }
                }

.@{input} {
                  &__suffix {
                    i {
                      color: @cf-cpf-input-text-color;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

//CUSTOMIZE - SELECT
    &.am-select {
      //CUSTOMIZE - SELECT - STEP BY STEP
      &-stepByStepForm {
        //CUSTOMIZE - SELECT - STEP BY STEP - SELECT SERVICE FORM
        &-selectServiceForm {
          .@{formItem} {
            &__label {
              color: @sbs-ssf-text-color;
              font-weight: 700;
            }
          }

.@{input} {
            &:hover {
              .@{select} {
                &__caret {
                  color: @sbs-ssf-input-text-color;
                }
              }
            }

&__inner {
              color: @sbs-ssf-input-text-color;
              background-color: @sbs-ssf-input-color;
            }

&.is-disabled {
              .@{input}__inner {
                background-color: fade(@sbs-ssf-input-color, 25%);
              }
            }

& .@{select} {
              &__caret {
                color: fade(@sbs-ssf-input-text-color, 75%);
              }
            }
          }
        }

//CUSTOMIZE - SELECT - STEP BY STEP - RECURRING SETUP FORM
        &-recurringSetupForm {
          .@{formItem} {
            &__label {
              color: @sbs-rsf-text-color;
              font-weight: 700;
            }
          }

.@{input} {
            &:hover {
              .@{select} {
                &__caret {
                  color: @sbs-rsf-input-text-color;
                }
              }
            }

& .@{input}__inner {
              color: @sbs-rsf-input-text-color;
              background-color: @sbs-rsf-input-color;
            }

&.is-disabled {
              .@{input}__inner {
                background-color: fade(@sbs-rsf-input-color, 25%);
              }
            }

& .@{select} {
              &__caret {
                color: fade(@sbs-rsf-input-text-color, 75%);
              }
            }
          }
        }

//CUSTOMIZE - SELECT - STEP BY STEP - SELECT PACKAGE FORM
        &-selectPackageForm {
          .@{formItem} {
            &__label {
              color: @sbs-spf-text-color;
              font-weight: 700;
            }
          }

.@{input} {
            &:hover {
              .@{select} {
                &__caret {
                  color: @sbs-spf-input-text-color;
                }
              }
            }

&__inner {
              color: @sbs-spf-input-text-color;
              background-color: @sbs-spf-input-color;
            }

&.is-disabled {
              .@{input}__inner {
                background-color: fade(@sbs-spf-input-color, 25%);
              }
            }

& .@{select} {
              &__caret {
                color: fade(@sbs-spf-input-text-color, 75%);
              }
            }
          }
        }

//CUSTOMIZE - SELECT - STEP BY STEP - PACKAGE SETUP FORM
        &-packageSetupForm {
          .@{formItem} {
            &__label {
              color: @sbs-psf-text-color;
              font-weight: 700;
            }
          }

.@{input} {
            &:hover {
              .@{select} {
                &__caret {
                  color: @sbs-psf-input-text-color;
                }
              }
            }

& input.@{input}__inner {
              color: @sbs-psf-input-text-color;
              background-color: @sbs-psf-input-color;
            }

&.is-disabled {
              .@{input}__inner {
                background-color: fade(@sbs-psf-input-color, 25%);
              }
            }

& .@{select} {
              &__caret {
                color: fade(@sbs-psf-input-text-color, 75%);
              }
            }
          }
        }

//CUSTOMIZE - SELECT - STEP BY STEP - CONFIRM APPOINTMENT FORM
        &-confirmBookingForm {
          &-appointment {
            .@{formItem} {
              &__label {
                color: @sbs-caf-text-color;
                font-weight: 700;

span {
                  color: @sbs-caf-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &:hover {
                .@{select} {
                  &__caret {
                    color: @sbs-caf-input-text-color;
                  }
                }
              }

& .@{input}__inner {
                color: @sbs-caf-input-text-color;
                background-color: @sbs-caf-input-color;
              }

&.is-disabled {
                .@{input}__inner {
                  background-color: fade(@sbs-caf-input-color, 25%);
                }
              }

& .@{select} {
                &__caret {
                  color: fade(@sbs-caf-input-text-color, 75%);
                }
              }
            }
          }

&-package {
            .@{formItem} {
              &__label {
                color: @sbs-cpf-text-color;
                font-weight: 700;

span {
                  color: @sbs-cpf-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &:hover {
                .@{select} {
                  &__caret {
                    color: @sbs-cpf-input-text-color;
                  }
                }
              }

& .@{input}__inner {
                color: @sbs-cpf-input-text-color;
                background-color: @sbs-cpf-input-color;
              }

&.is-disabled {
                .@{input}__inner {
                  background-color: fade(@sbs-cpf-input-color, 25%);
                }
              }

& .@{select} {
                &__caret {
                  color: fade(@sbs-cpf-input-text-color, 75%);
                }
              }
            }
          }
        }

//CUSTOMIZE - SELECT - STEP BY STEP - CONGRATULATIONS APPOINTMENT FORM
        &-congratulationsForm {
          &-appointment {
            .@{formItem} {
              &__label {
                color: @sbs-coa-text-color;
                font-weight: 700;

span {
                  color: @sbs-coa-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &:hover {
                .@{select} {
                  &__caret {
                    color: @sbs-coa-input-text-color;
                  }
                }
              }

& .@{input}__inner {
                color: @sbs-coa-input-text-color;
                background-color: @sbs-coa-input-color;

&::placeholder {
                  color: fade(@sbs-coa-input-text-color, 60%);
                }

&::-webkit-input-placeholder {
                  color: fade(@sbs-coa-input-text-color, 60%);
                }

&::-moz-placeholder {
                  color: fade(@sbs-coa-input-text-color, 60%);
                }

&:-ms-input-placeholder {
                  color: fade(@sbs-coa-input-text-color, 60%);
                }

&:-moz-placeholder {
                  color: fade(@sbs-coa-input-text-color, 60%);
                }
              }

&.is-disabled {
                .@{input}__inner {
                  background-color: fade(@sbs-coa-input-color, 25%);
                }
              }

& .@{select} {
                &__caret {
                  color: fade(@sbs-coa-input-text-color, 75%);
                }
              }
            }
          }

&-package {
            .@{formItem} {
              &__label {
                color: @sbs-cop-text-color;
                font-weight: 700;

span {
                  color: @sbs-cop-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &:hover {
                .@{select} {
                  &__caret {
                    color: @sbs-cop-input-text-color;
                  }
                }
              }

& .@{input}__inner {
                color: @sbs-cop-input-text-color;
                background-color: @sbs-cop-input-color;

&::placeholder {
                  color: fade(@sbs-cop-input-text-color, 60%);
                }

&::-webkit-input-placeholder {
                  color: fade(@sbs-cop-input-text-color, 60%);
                }

&::-moz-placeholder {
                  color: fade(@sbs-cop-input-text-color, 60%);
                }

&:-ms-input-placeholder {
                  color: fade(@sbs-cop-input-text-color, 60%);
                }

&:-moz-placeholder {
                  color: fade(@sbs-cop-input-text-color, 60%);
                }
              }

&.is-disabled {
                .@{input}__inner {
                  background-color: fade(@sbs-cop-input-color, 25%);
                }
              }

& .@{select} {
                &__caret {
                  color: fade(@sbs-cop-input-text-color, 75%);
                }
              }
            }
          }
        }
      }

//CUSTOMIZE - SELECT - EVENT LIST
      &-eventListForm {
        .@{input} {
          &:hover {
            .@{select} {
              &__caret {
                color: @elf-input-text-color;
              }
            }
          }

&__inner {
            color: @elf-input-text-color;
            background-color: @elf-input-color;

&::placeholder {
              color: fade(@elf-input-text-color, 60%);
            }

&::-webkit-input-placeholder {
              color: fade(@elf-input-text-color, 60%);
            }

&::-moz-placeholder {
              color: fade(@elf-input-text-color, 60%);
            }

&:-ms-input-placeholder {
              color: fade(@elf-input-text-color, 60%);
            }

&:-moz-placeholder {
              color: fade(@elf-input-text-color, 60%);
            }
          }

&__prefix {
            img, svg {
              path {
                fill: @elf-input-text-color
              }
            }
          }

&.is-disabled {
            .@{input}__inner {
              background-color: fade(@elf-input-color, 25%);
            }
          }

& .@{select} {
            &__caret {
              color: fade(@elf-input-text-color, 75%);
            }
          }
        }

//CUSTOMIZE - SELECT - EVENT LIST - CONFIRM EVENT FORM
        &-confirmBookingForm, &-congratulationsForm {
          &-event {
            .@{formItem} {
              &__label {
                color: @elf-text-color;
                font-weight: 700;

span {
                  color: @elf-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &:hover {
                .@{select} {
                  &__caret {
                    color: @elf-input-text-color;
                  }
                }
              }

& .@{input}__inner {
                color: @elf-input-text-color;
                background-color: @elf-input-color;

&::placeholder {
                  color: fade(@elf-input-text-color, 60%);
                }

&::-webkit-input-placeholder {
                  color: fade(@elf-input-text-color, 60%);
                }

&::-moz-placeholder {
                  color: fade(@elf-input-text-color, 60%);
                }

&:-ms-input-placeholder {
                  color: fade(@elf-input-text-color, 60%);
                }

&:-moz-placeholder {
                  color: fade(@elf-input-text-color, 60%);
                }
              }

&.is-disabled {
                .@{input}__inner {
                  background-color: fade(@elf-input-color, 25%);
                }
              }

& .@{select} {
                &__caret {
                  color: fade(@elf-input-text-color, 75%);
                }
              }
            }
          }
        }
      }

//CUSTOMIZE - SELECT - CATALOG FORM
      &-catalogForm {
        //CUSTOMIZE - SELECT - CATALOG FORM - SELECT SERVICE FORM
        &-selectServiceForm {
          .@{formItem} {
            &__label {
              color: @cf-ssf-text-color;
              font-weight: 700;
            }
          }

.@{input} {
            &:hover {
              .@{select} {
                &__caret {
                  color: @cf-ssf-input-text-color;
                }
              }
            }

&__inner {
              color: @cf-ssf-input-text-color;
              background-color: @cf-ssf-input-color;
            }

&.is-disabled {
              .@{input}__inner {
                background-color: fade(@cf-ssf-input-color, 25%);
              }
            }

& .@{select} {
              &__caret {
                color: fade(@cf-ssf-input-text-color, 75%);
              }
            }
          }
        }

//CUSTOMIZE - SELECT - CATALOG FORM - RECURRING SETUP FORM
        &-recurringSetupForm {
          .@{formItem} {
            &__label {
              color: @cf-rsf-text-color;
              font-weight: 700;
            }
          }

.@{input} {
            &:hover {
              .@{select} {
                &__caret {
                  color: @cf-rsf-input-text-color;
                }
              }
            }

& .@{input}__inner {
              color: @cf-rsf-input-text-color;
              background-color: @cf-rsf-input-color;
            }

&.is-disabled {
              .@{input}__inner {
                background-color: fade(@cf-rsf-input-color, 25%);
              }
            }

& .@{select} {
              &__caret {
                color: fade(@cf-rsf-input-text-color, 75%);
              }
            }
          }
        }

//CUSTOMIZE - SELECT - CATALOG FORM - PACKAGE SETUP FORM
        &-packageSetupForm {
          .@{formItem} {
            &__label {
              color: @cf-psf-text-color;
              font-weight: 700;
            }
          }

.@{input} {
            &:hover {
              .@{select} {
                &__caret {
                  color: @cf-psf-input-text-color;
                }
              }
            }

& input.@{input}__inner {
              color: @cf-psf-input-text-color;
              background-color: @cf-psf-input-color;
            }

&.is-disabled {
              .@{input}__inner {
                background-color: fade(@cf-psf-input-color, 25%);
              }
            }

& .@{select} {
              &__caret {
                color: fade(@cf-psf-input-text-color, 75%);
              }
            }
          }
        }

//CUSTOMIZE - SELECT - CATALOG FORM - CONFIRM FORM
        &-confirmBookingForm {
          // APPOINTMENT
          &-appointment {

.@{formItem} {
              &__label {
                color: @cf-caf-text-color;
                font-weight: 700;

span {
                  color: @cf-caf-text-color;
                  font-weight: 700;
                }
              }
              &__content {
                .am-payment-button {

&-selected {
                    p {
                      color: @color-accent;
                    }
                  }
                  &-inner {
                    svg {
                      path {
                        fill: @cf-caf-text-color;
                      }
                    }
                  }
                }
              }
            }

.@{input} {
              &:hover {
                .@{select} {
                  &__caret {
                    color: @cf-caf-input-text-color;
                  }
                }
              }

& .@{input}__inner {
                color: @cf-caf-input-text-color;
                background-color: @cf-caf-input-color;
              }

&.is-disabled {
                .@{input}__inner {
                  background-color: fade(@cf-caf-input-color, 25%);
                }
              }

& .@{select} {
                &__caret {
                  color: fade(@cf-caf-input-text-color, 75%);
                }
              }
            }
          }

// PACKAGE
          &-package {
            .@{formItem} {
              &__label {
                color: @cf-cpf-text-color;
                font-weight: 700;

span {
                  color: @cf-cpf-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &:hover {
                .@{select} {
                  &__caret {
                    color: @cf-cpf-input-text-color;
                  }
                }
              }

& .@{input}__inner {
                color: @cf-cpf-input-text-color;
                background-color: @cf-cpf-input-color;
              }

&.is-disabled {
                .@{input}__inner {
                  background-color: fade(@cf-cpf-input-color, 25%);
                }
              }

& .@{select} {
                &__caret {
                  color: fade(@cf-cpf-input-text-color, 75%);
                }
              }
            }
          }
        }

//CUSTOMIZE - SELECT - CATALOG FORM - CONGRATULATIONS FORM
        &-congratulationsForm {
          // APPOINTMENT
          &-appointment {
            .@{formItem} {
              &__label {
                color: @cf-coa-text-color;
                font-weight: 700;

span {
                  color: @cf-coa-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &:hover {
                .@{select} {
                  &__caret {
                    color: @cf-coa-input-text-color;
                  }
                }
              }

& .@{input}__inner {
                color: @cf-coa-input-text-color;
                background-color: @cf-coa-input-color;

&::placeholder {
                  color: fade(@cf-coa-input-text-color, 60%);
                }

&::-webkit-input-placeholder {
                  color: fade(@cf-coa-input-text-color, 60%);
                }

&::-moz-placeholder {
                  color: fade(@cf-coa-input-text-color, 60%);
                }

&:-ms-input-placeholder {
                  color: fade(@cf-coa-input-text-color, 60%);
                }

&:-moz-placeholder {
                  color: fade(@cf-coa-input-text-color, 60%);
                }
              }

&.is-disabled {
                .@{input}__inner {
                  background-color: fade(@cf-coa-input-color, 25%);
                }
              }

& .@{select} {
                &__caret {
                  color: fade(@cf-coa-input-text-color, 75%);
                }
              }
            }
          }

// PACKAGE
          &-package {
            .@{formItem} {
              &__label {
                color: @cf-cop-text-color;
                font-weight: 700;

span {
                  color: @cf-cop-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &:hover {
                .@{select} {
                  &__caret {
                    color: @cf-cop-input-text-color;
                  }
                }
              }

& .@{input}__inner {
                color: @cf-cop-input-text-color;
                background-color: @cf-cop-input-color;

&::placeholder {
                  color: fade(@cf-cop-input-text-color, 60%);
                }

&::-webkit-input-placeholder {
                  color: fade(@cf-cop-input-text-color, 60%);
                }

&::-moz-placeholder {
                  color: fade(@cf-cop-input-text-color, 60%);
                }

&:-ms-input-placeholder {
                  color: fade(@cf-cop-input-text-color, 60%);
                }

&:-moz-placeholder {
                  color: fade(@cf-cop-input-text-color, 60%);
                }
              }

&.is-disabled {
                .@{input}__inner {
                  background-color: fade(@cf-cop-input-color, 25%);
                }
              }

& .@{select} {
                &__caret {
                  color: fade(@cf-cop-input-text-color, 75%);
                }
              }
            }
          }
        }
      }
    }

//CUSTOMIZE - INPUT NUMBER
    &.am-input-number {
      //CUSTOMIZE - INPUT NUMBER - STEP BY STEP
      &-stepByStepForm {
        //CUSTOMIZE - INPUT NUMBER - STEP BY STEP - RECURRING SETUP FORM
        &-recurringSetupForm {
          &:hover {
            .@{input}__inner {
              border-color: #C0C4CC;
            }
          }

.@{formItem} {
            &__label {
              color: @sbs-rsf-text-color;
              font-weight: 700;
            }
          }

.@{input} {
            &-number {
              & .@{input}-number__increase, & .@{input}-number__decrease {
                color: @sbs-rsf-input-text-color;
                background-color: @sbs-rsf-input-color;

i {
                  color: inherit;
                }

&:hover {
                  &:not(.is-disabled) {
                    &~.@{input} {
                      .@{input}__inner {
                        &:not(.is-disabled) {
                          border-color: #C0C4CC;
                        }
                      }
                    }
                  }
                }
              }

& .@{input} {
                &__inner {
                  color: @sbs-rsf-input-text-color;
                  background-color: @sbs-rsf-input-color;
                }
              }

&.is-disabled {
                .@{input}__inner {
                  background-color: fade(@sbs-rsf-input-color, 25%);
                }
              }
            }
          }
        }
      }

//CUSTOMIZE - INPUT NUMBER - EVENT LIST
      &-eventListForm {
        &:hover {
          .@{input}__inner {
            border-color: #C0C4CC;
          }
        }

.@{formItem} {
          &__label {
            color: @elf-text-color;
            font-weight: 700;
          }
        }

.@{input} {
          &-number {
            & .@{input}-number__increase, & .@{input}-number__decrease {
              color: @elf-input-text-color;
              background-color: @elf-input-color;

i {
                color: inherit;
              }

&:hover {
                &:not(.is-disabled) {
                  &~.@{input} {
                    .@{input}__inner {
                      &:not(.is-disabled) {
                        border-color: #C0C4CC;
                      }
                    }
                  }
                }
              }
            }

& .@{input} {
              &__inner {
                color: @elf-input-text-color;
                background-color: @elf-input-color;
              }
            }

&.is-disabled {
              .@{input}__inner {
                background-color: fade(@elf-input-color, 25%);
              }
            }
          }
        }
      }

//CUSTOMIZE - INPUT NUMBER - CATALOG FORM
      &-catalogForm {
        //CUSTOMIZE - INPUT NUMBER - CATALOG FORM - RECURRING SETUP FORM
        &-recurringSetupForm {
          &:hover {
            .@{input}__inner {
              border-color: #C0C4CC;
            }
          }

.@{formItem} {
            &__label {
              color: @cf-rsf-text-color;
              font-weight: 700;
            }
          }

.@{input} {
            &-number {
              & .@{input}-number__increase, & .@{input}-number__decrease {
                color: @cf-rsf-input-text-color;
                background-color: @cf-rsf-input-color;

i {
                  color: inherit;
                }

& .@{input} {
                &__inner {
                  color: @cf-rsf-input-text-color;
                  background-color: @cf-rsf-input-color;
                }
              }

&.is-disabled {
                .@{input}__inner {
                  background-color: fade(@cf-rsf-input-color, 25%);
                }
              }
            }
          }
        }
      }
    }

//CUSTOMIZE - CHECKBOX BTN
    &.am-checkbox-btn {
      //CUSTOMIZE - CHECKBOX BTN -STEP BY STEP
      &-stepByStepForm {
        //CUSTOMIZE - CHECKBOX BTN - STEP BY STEP - RECURRING SETUP FORM
        &-recurringSetupForm {
          .@{formItem} {
            &__label {
              color: @sbs-rsf-text-color;
              font-weight: 700;
            }
          }

.@{checkBtn} {
            & .@{checkBtn}__inner {
              color: @sbs-rsf-input-text-color;
              background-color: @sbs-rsf-input-color;
            }
          }

.@{checkGroup} {
            .@{checkBtn} {
              &.is-checked {
                .@{checkBtn}__inner {
                  color: @sbs-rsf-input-text-color;
                  background-color: @color-accent;
                }
              }
            }
          }
        }
      }

//CUSTOMIZE - CHECKBOX BTN -CATALOG FORM
      &-catalogForm {
        //CUSTOMIZE - CHECKBOX BTN - CATALOG FORM - RECURRING SETUP FORM
        &-recurringSetupForm {
          .@{formItem} {
            &__label {
              color: @cf-rsf-text-color;
              font-weight: 700;
            }
          }

.@{checkBtn} {
            & .@{checkBtn}__inner {
              color: @cf-rsf-input-text-color;
              background-color: @cf-rsf-input-color;
            }
          }

.@{checkGroup} {
            .@{checkBtn} {
              &.is-checked {
                .@{checkBtn}__inner {
                  color: @cf-rsf-input-text-color;
                  background-color: @color-accent;
                }
              }
            }
          }
        }
      }
    }

//CUSTOMIZE - RADIO BTN
    &.am-radio-btn {
      //CUSTOMIZE - RADIO BTN - STEP BY STEP
      &-stepByStepForm {

//CUSTOMIZE - RADIO BTN - STEP BY STEP - CONFIRM APPOINTMENT FORM
        &-confirmBookingForm {
          &-appointment {
            .am-payment-type-radio {
              span {
                color: @sbs-caf-text-color;
              }
            }
            .@{formItem} {
              &__label {
                color: @sbs-caf-text-color;
                font-weight: 700;

span {
                  color: @sbs-caf-text-color;
                  font-weight: 700;
                }
              }
            }
          }

&-package {
            .am-payment-type-radio {
              span {
                color: @sbs-cpf-text-color;
              }
            }
            .@{formItem} {
              &__label {
                color: @sbs-cpf-text-color;
                font-weight: 700;

span {
                  color: @sbs-cpf-text-color;
                  font-weight: 700;
                }
              }
            }
          }
        }
      }

//CUSTOMIZE - RADIO BTN - EVENT LIST
      &-eventListForm {

//CUSTOMIZE - RADIO BTN - EVENT LIST - CONFIRM EVENT FORM
        &-confirmBookingForm {
          &-event {
            .am-payment-type-radio-checked {
              .el-radio__label {
                color: @color-accent;
              }
            }
            .@{formItem} {
              &__label {
                color: @elf-text-color;
                font-weight: 700;

span {
                  color: @elf-text-color;
                  font-weight: 700;
                }
              }
              &__content {
                span {
                  color: @elf-text-color;
                }
              }
            }
          }
        }
      }

//CUSTOMIZE - RADIO BTN - CATALOG FORM
      &-catalogForm {

//CUSTOMIZE - RADIO BTN - CATALOG FORM - CONFIRM FORM
        &-confirmBookingForm {
          // APPOINTMENT
          &-appointment {
            .@{formItem} {
              &__label {
                color: @cf-caf-text-color;
                font-weight: 700;

span {
                  color: @cf-caf-text-color;
                  font-weight: 700;
                }
              }
              &__content {
                span {
                  color: @cf-caf-text-color;
                }
              }
            }
          }

// PACKAGE
          &-package {
            .@{formItem} {
              &__label {
                color: @cf-cpf-text-color;
                font-weight: 700;

span {
                  color: @cf-cpf-text-color;
                  font-weight: 700;
                }
              }
              &__content {
                span {
                  color: @cf-cpf-text-color;
                }
              }
            }
          }
        }
      }
    }

//CUSTOMIZE - CUSTOM FIELDS
    &.am-custom {
      //CUSTOMIZE - CUSTOM FIELDS - STEP BY STEP
      &-stepByStepForm {
        //CUSTOMIZE - CUSTOM FIELDS - STEP BY STEP - CONFIRM BOOKING
        &-confirmBookingForm {
          //CUSTOMIZE - CUSTOM FIELDS - STEP BY STEP - CONFIRM BOOKING - APPOINTMENT
          &-appointment {
            .@{formItem} {
              &__label {
                color: @sbs-caf-text-color;
                font-weight: 700;

span {
                  color: @sbs-caf-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &__inner {
                color: @sbs-caf-input-text-color;
                background-color: @sbs-caf-input-color;
              }

&__suffix {
                i {
                  color: @sbs-caf-input-text-color;
                }
              }
            }

.@{textarea} {
              &__inner {
                color: @sbs-caf-input-text-color;
                background-color: @sbs-caf-input-color;
              }
            }

.@{radio} {
              &__label {
                color: @sbs-caf-text-color;
                font-weight: 700;
              }
            }

.@{checkbox} {
              &__label {
                color: @sbs-caf-text-color;
                font-weight: 700;
              }

&.is-checked {
                .@{checkbox}__label {
                  color: @color-accent;
                }
              }
            }

.@{upload} {
              &-dragger {
                background-color: @sbs-caf-bgr-color;
              }
            }

.am-calendar-picker.popover-container {
              .popover-content-wrapper .popover-content {
                color: @sbs-caf-dropdown-text-color;
                background-color: @sbs-caf-dropdown-color;

* {
                  color: @sbs-caf-dropdown-text-color;
                }

.c-title-popover.popover-container {
                  .popover-origin {
                    background-color: @sbs-caf-dropdown-color;

* {
                      background-color: @sbs-caf-dropdown-color;
                    }
                  }
                }

.c-day-content:hover {
                  & > div {
                    color: @color-accent;
                  }
                }

:not(.c-day-backgrounds.c-day-layer:empty) ~ .c-day-content-wrapper .c-day-content > div {
                  color: @color-white;
                }
              }
            }
          }

//CUSTOMIZE - CUSTOM FIELDS - STEP BY STEP - CONFIRM BOOKING - PACKAGE
          &-package {
            .@{formItem} {
              &__label {
                color: @sbs-cpf-text-color;
                font-weight: 700;

span {
                  color: @sbs-cpf-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &__inner {
                color: @sbs-cpf-input-text-color;
                background-color: @sbs-cpf-input-color;
              }

&__suffix {
                i {
                  color: @sbs-cpf-input-text-color;
                }
              }
            }

.@{textarea} {
              &__inner {
                color: @sbs-cpf-input-text-color;
                background-color: @sbs-cpf-input-color;
              }
            }

.@{radio} {
              &__label {
                color: @sbs-cpf-text-color;
                font-weight: 700;
              }
            }

.@{checkbox} {
              &__label {
                color: @sbs-cpf-text-color;
                font-weight: 700;
              }

&.is-checked {
                .@{checkbox}__label {
                  color: @color-accent;
                }
              }
            }

.@{upload} {
              &-dragger {
                background-color: @sbs-cpf-bgr-color;
              }
            }

.am-calendar-picker.popover-container {
              .popover-content-wrapper .popover-content {
                color: @sbs-cpf-dropdown-text-color;
                background-color: @sbs-cpf-dropdown-color;

* {
                  color: @sbs-cpf-dropdown-text-color;
                }

.c-title-popover.popover-container {
                  .popover-origin {
                    background-color: @sbs-cpf-dropdown-color;

* {
                      background-color: @sbs-cpf-dropdown-color;
                    }
                  }
                }

.c-day-content:hover {
                  & > div {
                    color: @color-accent;
                  }
                }

:not(.c-day-backgrounds.c-day-layer:empty) ~ .c-day-content-wrapper .c-day-content > div {
                  color: @color-white;
                }
              }
            }
          }
        }
      }

//CUSTOMIZE - CUSTOM FIELDS - EVENT LIST
      &-eventListForm {
        //CUSTOMIZE - CUSTOM FIELDS - EVENT LIST - CONFIRM BOOKING
        &-confirmBookingForm {
          //CUSTOMIZE - CUSTOM FIELDS - EVENT LIST - CONFIRM BOOKING - EVENT
          &-event {
            .@{formItem} {
              &__label {
                color: @elf-text-color;
                font-weight: 700;

span {
                  color: @elf-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &__inner {
                color: @elf-input-text-color;
                background-color: @elf-input-color;
              }

&__suffix {
                i {
                  color: @elf-input-text-color;
                }
              }
            }

.@{textarea} {
              &__inner {
                color: @elf-input-text-color;
                background-color: @elf-input-color;
              }
            }

.@{radio} {
              &__label {
                color: @elf-text-color;
                font-weight: 700;
              }
            }

.@{checkbox} {
              &__label {
                color: @elf-text-color;
                font-weight: 700;
              }

&.is-checked {
                .@{checkbox}__label {
                  color: @color-accent;
                }
              }
            }

.@{upload} {
              &-dragger {
                background-color: @elf-bgr-color;
              }
            }

.am-calendar-picker.popover-container {
              .popover-content-wrapper .popover-content {
                color: @elf-dropdown-text-color !important;
                background-color: @elf-dropdown-color !important;

* {
                  color: @elf-dropdown-text-color !important;
                }

.c-title-popover.popover-container {
                  .popover-origin {
                    background-color: @elf-dropdown-color !important;

* {
                      background-color: @elf-dropdown-color !important;
                    }
                  }
                }

.c-day-content:hover {
                  & > div {
                    color: @color-accent !important;
                  }
                }

:not(.c-day-backgrounds.c-day-layer:empty) ~ .c-day-content-wrapper .c-day-content > div {
                  color: @color-white !important;
                }
              }
            }
          }
        }
      }

//CUSTOMIZE - CUSTOM FIELDS - CATALOG FORM
      &-catalogForm {
        //CUSTOMIZE - CUSTOM FIELDS - CATALOG FORM - CONFIRM BOOKING
        &-confirmBookingForm {
          //CUSTOMIZE - CUSTOM FIELDS - CATALOG FORM - CONFIRM BOOKING - APPOINTMENT
          &-appointment {
            .@{formItem} {
              &__label {
                color: @cf-caf-text-color;
                font-weight: 700;

span {
                  color: @cf-caf-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &__inner {
                color: @cf-caf-input-text-color;
                background-color: @cf-caf-input-color;
              }

&__suffix {
                i {
                  color: @cf-caf-input-text-color;
                }
              }
            }

.@{textarea} {
              &__inner {
                color: @cf-caf-input-text-color;
                background-color: @cf-caf-input-color;
              }
            }

.@{radio} {
              &__label {
                color: @cf-caf-text-color;
                font-weight: 700;
              }
            }

.@{checkbox} {
              &__label {
                color: @cf-caf-text-color;
                font-weight: 700;
              }

&.is-checked {
                .@{checkbox}__label {
                  color: @color-accent;
                }
              }
            }

.@{upload} {
              &-dragger {
                background-color: @cf-caf-bgr-color;
              }
            }

.am-calendar-picker.popover-container {
              .popover-content-wrapper .popover-content {
                color: @cf-caf-dropdown-text-color;
                background-color: @cf-caf-dropdown-color;

* {
                  color: @cf-caf-dropdown-text-color;
                }

.c-title-popover.popover-container {
                  .popover-origin {
                    background-color: @cf-caf-dropdown-color;

* {
                      background-color: @cf-caf-dropdown-color;
                    }
                  }
                }

.c-day-content:hover {
                  & > div {
                    color: @color-accent;
                  }
                }

:not(.c-day-backgrounds.c-day-layer:empty) ~ .c-day-content-wrapper .c-day-content > div {
                  color: @color-white;
                }
              }
            }
          }

//CUSTOMIZE - CUSTOM FIELDS - CATALOG FORM - CONFIRM BOOKING - PACKAGE
          &-package {
            .@{formItem} {
              &__label {
                color: @cf-cpf-text-color;
                font-weight: 700;

span {
                  color: @cf-cpf-text-color;
                  font-weight: 700;
                }
              }
            }

.@{input} {
              &__inner {
                color: @cf-cpf-input-text-color;
                background-color: @cf-cpf-input-color;
              }

&__suffix {
                i {
                  color: @cf-cpf-input-text-color;
                }
              }
            }

.@{textarea} {
              &__inner {
                color: @cf-cpf-input-text-color;
                background-color: @cf-cpf-input-color;
              }
            }

.@{radio} {
              &__label {
                color: @cf-cpf-text-color;
                font-weight: 700;
              }
            }

.@{checkbox} {
              &__label {
                color: @cf-cpf-text-color;
                font-weight: 700;
              }

&.is-checked {
                .@{checkbox}__label {
                  color: @color-accent;
                }
              }
            }

.@{upload} {
              &-dragger {
                background-color: @cf-cpf-bgr-color;
              }
            }

.am-calendar-picker.popover-container {
              .popover-content-wrapper .popover-content {
                color: @cf-cpf-dropdown-text-color;
                background-color: @cf-cpf-dropdown-color;

* {
                  color: @cf-cpf-dropdown-text-color;
                }

.c-title-popover.popover-container {
                  .popover-origin {
                    background-color: @cf-cpf-dropdown-color;

* {
                      background-color: @cf-cpf-dropdown-color;
                    }
                  }
                }

.c-day-content:hover {
                  & > div {
                    color: @color-accent;
                  }
                }

// CREDIT CARD - STRIPE
  .am-stripe {
    display: flex;
    align-items: center;
    height: 40px;
    margin: 0;
    padding-left: @padding-small;
    border-radius: 4px;
    background-color: #ffffff;

> div {
      width: 100%;
    }
  }
}

// DROPDOWN CUSTOMIZE STYLES
.@{select}-dropdown {
  &.am-dropdown {
    // STEP BY STEP FORM
    &-stepByStepForm {
      // STEP BY STEP FORM - SELECT SERVICE FORM
      &-selectServiceForm {
        background-color: @sbs-ssf-dropdown-color;
        border-color: @sbs-ssf-dropdown-color;

& .@{select}-dropdown {
          &__item {
            color: @sbs-ssf-dropdown-text-color;

&:hover {
              background-color: darken(@sbs-ssf-dropdown-color, 15%);
            }

&.selected {
              color: @color-accent;
            }
          }
        }

&[x-placement^=bottom] {
          & .popper__arrow {
            border-bottom-color: @sbs-ssf-dropdown-color;

&::after {
              border-bottom-color: @sbs-ssf-dropdown-color;
            }
          }
        }

&[x-placement^=top] {
          & .popper__arrow {
            border-top-color: @sbs-ssf-dropdown-color;

&::after {
              border-top-color: @sbs-ssf-dropdown-color;
            }
          }
        }
      }

// STEP BY STEP FORM - SELECT PACKAGE FORM
      &-selectPackageForm {
        background-color: @sbs-spf-dropdown-color;
        border-color: @sbs-spf-dropdown-color;

& .@{select}-dropdown {
          &__item {
            color: @sbs-spf-dropdown-text-color;

&:hover {
              background-color: darken(@sbs-spf-dropdown-color, 15%);
            }

&.selected {
              color: @color-accent;
            }
          }
        }

&[x-placement^=bottom] {
          & .popper__arrow {
            border-bottom-color: @sbs-spf-dropdown-color;

&::after {
              border-bottom-color: @sbs-spf-dropdown-color;
            }
          }
        }

&[x-placement^=top] {
          & .popper__arrow {
            border-top-color: @sbs-spf-dropdown-color;

&::after {
              border-top-color: @sbs-spf-dropdown-color;
            }
          }
        }
      }

// STEP BY STEP FORM - RECURRING SETUP FORM
      &-recurringSetupForm {
        background-color: @sbs-rsf-dropdown-color;
        border-color: @sbs-rsf-dropdown-color;

& .@{select}-dropdown {
          &__item {
            color: @sbs-rsf-dropdown-text-color;

&:hover {
              background-color: darken(@sbs-rsf-dropdown-color, 15%);
            }

&.selected {
              color: @color-accent;
            }
          }
        }

&[x-placement^=bottom] {
          & .popper__arrow {
            border-bottom-color: @sbs-rsf-dropdown-color;

&::after {
              border-bottom-color: @sbs-rsf-dropdown-color;
            }
          }
        }

&[x-placement^=top] {
          & .popper__arrow {
            border-top-color: @sbs-rsf-dropdown-color;

&::after {
              border-top-color: @sbs-rsf-dropdown-color;
            }
          }
        }
      }

// STEP BY STEP FORM - RECURRING DATES FORM
      &-recurringDatesForm {
        background-color: @sbs-rdf-dropdown-color;
        border-color: @sbs-rdf-dropdown-color;

& .@{select}-dropdown {
          &__item {
            color: @sbs-rdf-dropdown-text-color;

&:hover {
              background-color: darken(@sbs-rdf-dropdown-color, 15%);
            }

&.selected {
              color: @color-accent;
            }
          }
        }

&[x-placement^=bottom] {
          & .popper__arrow {
            border-bottom-color: @sbs-rdf-dropdown-color;

&::after {
              border-bottom-color: @sbs-rdf-dropdown-color;
            }
          }
        }

&[x-placement^=top] {
          & .popper__arrow {
            border-top-color: @sbs-rdf-dropdown-color;

&::after {
              border-top-color: @sbs-rdf-dropdown-color;
            }
          }
        }
      }

// STEP BY STEP FORM - RECURRING SETUP FORM
      &-packageSetupForm {
        background-color: @sbs-psf-dropdown-color;
        border-color: @sbs-psf-dropdown-color;

& .@{select}-dropdown {
          &__item {
            color: @sbs-psf-dropdown-text-color;

&:hover {
              background-color: darken(@sbs-psf-dropdown-color, 15%);
            }

&.selected {
              color: @color-accent;
            }
          }
        }

&[x-placement^=bottom] {
          & .popper__arrow {
            border-bottom-color: @sbs-psf-dropdown-color;

&::after {
              border-bottom-color: @sbs-psf-dropdown-color;
            }
          }
        }

&[x-placement^=top] {
          & .popper__arrow {
            border-top-color: @sbs-psf-dropdown-color;

&::after {
              border-top-color: @sbs-psf-dropdown-color;
            }
          }
        }
      }

// STEP BY STEP FORM - CONFIRM APPOINTMENT FORM
      &-confirmBookingForm {
        &-appointment {
          background-color: @sbs-caf-dropdown-color;
          border-color: @sbs-caf-dropdown-color;

& .@{select}-dropdown {
            &__item {
              color: @sbs-caf-dropdown-text-color;

&:hover {
                background-color: darken(@sbs-caf-dropdown-color, 15%);
              }

&.selected {
                color: @color-accent;
              }

.am-phone-input-phonecode {
                color: @sbs-caf-dropdown-text-color;
              }
            }
          }

&[x-placement^=bottom] {
            & .popper__arrow {
              border-bottom-color: @sbs-caf-dropdown-color;

&::after {
                border-bottom-color: @sbs-caf-dropdown-color;
              }
            }
          }

&[x-placement^=top] {
            & .popper__arrow {
              border-top-color: @sbs-caf-dropdown-color;

&::after {
                border-top-color: @sbs-caf-dropdown-color;
              }
            }
          }
        }

&-package {
          background-color: @sbs-cpf-dropdown-color;
          border-color: @sbs-cpf-dropdown-color;

& .@{select}-dropdown {
            &__item {
              color: @sbs-cpf-dropdown-text-color;

&:hover {
                background-color: darken(@sbs-cpf-dropdown-color, 15%);
              }

&.selected {
                color: @color-accent;
              }

.am-phone-input-phonecode {
                color: @sbs-cpf-dropdown-text-color;
              }
            }
          }

&[x-placement^=bottom] {
            & .popper__arrow {
              border-bottom-color: @sbs-cpf-dropdown-color;

&::after {
                border-bottom-color: @sbs-cpf-dropdown-color;
              }
            }
          }

&[x-placement^=top] {
            & .popper__arrow {
              border-top-color: @sbs-cpf-dropdown-color;

&::after {
                border-top-color: @sbs-cpf-dropdown-color;
              }
            }
          }
        }
      }

// STEP BY STEP FORM - CONGRATULATIONS APPOINTMENT FORM
      &-congratulationsForm {
        &-appointment {
          background-color: @sbs-coa-dropdown-color;
          border-color: @sbs-coa-dropdown-color;

& .@{select}-dropdown {
            &__item {
              color: @sbs-coa-dropdown-text-color;

&:hover {
                background-color: darken(@sbs-coa-dropdown-color, 15%);
              }

&.selected {
                color: @color-accent;
              }
            }
          }

&[x-placement^=bottom] {
            & .popper__arrow {
              border-bottom-color: @sbs-coa-dropdown-color;

&::after {
                border-bottom-color: @sbs-coa-dropdown-color;
              }
            }
          }

&[x-placement^=top] {
            & .popper__arrow {
              border-top-color: @sbs-coa-dropdown-color;

&::after {
                border-top-color: @sbs-coa-dropdown-color;
              }
            }
          }
        }

&-package {
          background-color: @sbs-cop-dropdown-color;
          border-color: @sbs-cop-dropdown-color;

& .@{select}-dropdown {
            &__item {
              color: @sbs-cop-dropdown-text-color;

&:hover {
                background-color: darken(@sbs-cop-dropdown-color, 15%);
              }

&.selected {
                color: @color-accent;
              }
            }
          }

&[x-placement^=bottom] {
            & .popper__arrow {
              border-bottom-color: @sbs-cop-dropdown-color;

&::after {
                border-bottom-color: @sbs-cop-dropdown-color;
              }
            }
          }

&[x-placement^=top] {
            & .popper__arrow {
              border-top-color: @sbs-cop-dropdown-color;

&::after {
                border-top-color: @sbs-cop-dropdown-color;
              }
            }
          }
        }
      }
    }

// CATALOG FORM
    &-catalogForm {
      // CATALOG FORM - SELECT SERVICE FORM
      &-selectServiceForm {
        background-color: @cf-ssf-dropdown-color;
        border-color: @cf-ssf-dropdown-color;

& .@{select}-dropdown {
          &__item {
            color: @cf-ssf-dropdown-text-color;

&:hover {
              background-color: darken(@cf-ssf-dropdown-color, 15%);
            }

&.selected {
              color: @color-accent;
            }
          }
        }

&[x-placement^=bottom] {
          & .popper__arrow {
            border-bottom-color: @cf-ssf-dropdown-color;

&::after {
              border-bottom-color: @cf-ssf-dropdown-color;
            }
          }
        }

&[x-placement^=top] {
          & .popper__arrow {
            border-top-color: @cf-ssf-dropdown-color;

&::after {
              border-top-color: @cf-ssf-dropdown-color;
            }
          }
        }
      }

// CATALOG FORM - RECURRING SETUP FORM
      &-recurringSetupForm {
        background-color: @cf-rsf-dropdown-color;
        border-color: @cf-rsf-dropdown-color;

& .@{select}-dropdown {
          &__item {
            color: @cf-rsf-dropdown-text-color;

&:hover {
              background-color: darken(@cf-rsf-dropdown-color, 15%);
            }

&.selected {
              color: @color-accent;
            }
          }
        }

&[x-placement^=bottom] {
          & .popper__arrow {
            border-bottom-color: @cf-rsf-dropdown-color;

&::after {
              border-bottom-color: @cf-rsf-dropdown-color;
            }
          }
        }

&[x-placement^=top] {
          & .popper__arrow {
            border-top-color: @cf-rsf-dropdown-color;

&::after {
              border-top-color: @cf-rsf-dropdown-color;
            }
          }
        }
      }

// CATALOG FORM - RECURRING DATES FORM
      &-recurringDatesForm {
        background-color: @cf-rdf-dropdown-color;
        border-color: @cf-rdf-dropdown-color;

& .@{select}-dropdown {
          &__item {
            color: @cf-rdf-dropdown-text-color;

&:hover {
              background-color: darken(@cf-rdf-dropdown-color, 15%);
            }

&.selected {
              color: @color-accent;
            }
          }
        }

&[x-placement^=bottom] {
          & .popper__arrow {
            border-bottom-color: @cf-rdf-dropdown-color;

&::after {
              border-bottom-color: @cf-rdf-dropdown-color;
            }
          }
        }

&[x-placement^=top] {
          & .popper__arrow {
            border-top-color: @cf-rdf-dropdown-color;

&::after {
              border-top-color: @cf-rdf-dropdown-color;
            }
          }
        }
      }

// CATALOG FORM - RECURRING SETUP FORM
      &-packageSetupForm {
        background-color: @cf-psf-dropdown-color;
        border-color: @cf-psf-dropdown-color;

& .@{select}-dropdown {
          &__item {
            color: @cf-psf-dropdown-text-color;

&:hover {
              background-color: darken(@cf-psf-dropdown-color, 15%);
            }

&.selected {
              color: @color-accent;
            }
          }
        }

&[x-placement^=bottom] {
          & .popper__arrow {
            border-bottom-color: @cf-psf-dropdown-color;

&::after {
              border-bottom-color: @cf-psf-dropdown-color;
            }
          }
        }

&[x-placement^=top] {
          & .popper__arrow {
            border-top-color: @cf-psf-dropdown-color;

&::after {
              border-top-color: @cf-psf-dropdown-color;
            }
          }
        }
      }

// CATALOG FORM - CONFIRM APPOINTMENT FORM
      &-confirmBookingForm {
        &-appointment {
          background-color: @cf-caf-dropdown-color;
          border-color: @cf-caf-dropdown-color;

& .@{select}-dropdown {
            &__item {
              color: @cf-caf-dropdown-text-color;

&:hover {
                background-color: darken(@cf-caf-dropdown-color, 15%);
              }

&.selected {
                color: @color-accent;
              }
            }
          }

&[x-placement^=bottom] {
            & .popper__arrow {
              border-bottom-color: @cf-caf-dropdown-color;

&::after {
                border-bottom-color: @cf-caf-dropdown-color;
              }
            }
          }

&[x-placement^=top] {
            & .popper__arrow {
              border-top-color: @cf-caf-dropdown-color;

&::after {
                border-top-color: @cf-caf-dropdown-color;
              }
            }
          }
        }

&-package {
          background-color: @cf-cpf-dropdown-color;
          border-color: @cf-cpf-dropdown-color;

& .@{select}-dropdown {
            &__item {
              color: @cf-cpf-dropdown-text-color;

&:hover {
                background-color: darken(@cf-cpf-dropdown-color, 15%);
              }

&.selected {
                color: @color-accent;
              }
            }
          }

&[x-placement^=bottom] {
            & .popper__arrow {
              border-bottom-color: @cf-cpf-dropdown-color;

&::after {
                border-bottom-color: @cf-cpf-dropdown-color;
              }
            }
          }

&[x-placement^=top] {
            & .popper__arrow {
              border-top-color: @cf-cpf-dropdown-color;

&::after {
                border-top-color: @cf-cpf-dropdown-color;
              }
            }
          }
        }
      }

// CATALOG FORM - CONGRATULATIONS APPOINTMENT FORM
      &-congratulationsForm {
        &-appointment {
          background-color: @cf-coa-dropdown-color;
          border-color: @cf-coa-dropdown-color;

& .@{select}-dropdown {
            &__item {
              color: @cf-coa-dropdown-text-color;

&:hover {
                background-color: darken(@cf-coa-dropdown-color, 15%);
              }

&.selected {
                color: @color-accent;
              }

.am-phone-input-phonecode {
                color: @cf-coa-dropdown-text-color;
              }
            }
          }

&[x-placement^=bottom] {
            & .popper__arrow {
              border-bottom-color: @cf-coa-dropdown-color;

&::after {
                border-bottom-color: @cf-coa-dropdown-color;
              }
            }
          }

&[x-placement^=top] {
            & .popper__arrow {
              border-top-color: @cf-coa-dropdown-color;

&::after {
                border-top-color: @cf-coa-dropdown-color;
              }
            }
          }
        }

&-package {
          background-color: @cf-cop-dropdown-color;
          border-color: @cf-cop-dropdown-color;

& .@{select}-dropdown {
            &__item {
              color: @cf-cop-dropdown-text-color;

&:hover {
                background-color: darken(@cf-cop-dropdown-color, 15%);
              }

&.selected {
                color: @color-accent;
              }

.am-phone-input-phonecode {
                color: @cf-cop-dropdown-text-color;
              }
            }
          }

&[x-placement^=bottom] {
            & .popper__arrow {
              border-bottom-color: @cf-cop-dropdown-color;

&::after {
                border-bottom-color: @cf-cop-dropdown-color;
              }
            }
          }

&[x-placement^=top] {
            & .popper__arrow {
              border-top-color: @cf-cop-dropdown-color;

&::after {
                border-top-color: @cf-cop-dropdown-color;
              }
            }
          }
        }
      }
    }

// EVENT LIST FORM
    &-eventListForm {
      background-color: @elf-dropdown-color;
      border-color: @elf-dropdown-color;

& .@{select}-dropdown {
        &__item {
          color: @elf-dropdown-text-color;

&:hover {
            background-color: darken(@elf-dropdown-color, 15%);
          }

&.selected {
            color: @color-accent;
          }
        }
      }

&[x-placement^=bottom] {
        & .popper__arrow {
          border-bottom-color: @elf-dropdown-color;

&::after {
            border-bottom-color: @elf-dropdown-color;
          }
        }
      }

&[x-placement^=top] {
        & .popper__arrow {
          border-top-color: @elf-dropdown-color;

&::after {
            border-top-color: @elf-dropdown-color;
          }
        }
      }

// EVENT LIST FORM - CONFIRM EVENT FORM
      &-confirmBookingForm, &-congratulationsForm {
        &-event {
          background-color: @elf-dropdown-color;
          border-color: @elf-dropdown-color;

& .@{select}-dropdown {
            &__item {
              color: @elf-dropdown-text-color;

&:hover {
                background-color: darken(@elf-dropdown-color, 15%);
              }

&.selected {
                color: @color-accent;
              }

.am-phone-input-phonecode {
                color: @elf-dropdown-text-color;
              }
            }
          }

&[x-placement^=bottom] {
            & .popper__arrow {
              border-bottom-color: @elf-dropdown-color;

&::after {
                border-bottom-color: @elf-dropdown-color;
              }
            }
          }

&[x-placement^=top] {
            & .popper__arrow {
              border-top-color: @elf-dropdown-color;

&::after {
                border-top-color: @elf-dropdown-color;
              }
            }
          }
        }
      }
    }

// EVENT CALENDAR FORM
    &-eventCalendarForm {
      // EVENT CALENDAR FORM - CONFIRM EVENT FORM
      &-confirmBookingForm {
        &-event {
          background-color: @ecf-cef-dropdown-color;
          border-color: @ecf-cef-dropdown-color;

& .@{select}-dropdown {
            &__item {
              color: @ecf-cef-dropdown-text-color;

&:hover {
                background-color: darken(@ecf-cef-dropdown-color, 15%);
              }

&.selected {
                color: @color-accent;
              }

.am-phone-input-phonecode {
                color: @ecf-cef-dropdown-text-color;
              }
            }
          }

&[x-placement^=bottom] {
            & .popper__arrow {
              border-bottom-color: @ecf-cef-dropdown-color;

&::after {
                border-bottom-color: @ecf-cef-dropdown-color;
              }
            }
          }

&[x-placement^=top] {
            & .popper__arrow {
              border-top-color: @ecf-cef-dropdown-color;

&::after {
                border-top-color: @ecf-cef-dropdown-color;
              }
            }
          }
        }
      }

&-congratulationsForm {
        &-event {
          background-color: @ecf-coe-dropdown-color;
          border-color: @ecf-coe-dropdown-color;

& .@{select}-dropdown {
            &__item {
              color: @ecf-coe-dropdown-text-color;

&:hover {
                background-color: darken(@ecf-coe-dropdown-color, 15%);
              }

&.selected {
                color: @color-accent;
              }

.am-phone-input-phonecode {
                color: @ecf-coe-dropdown-text-color;
              }
            }
          }

&[x-placement^=bottom] {
            & .popper__arrow {
              border-bottom-color: @ecf-coe-dropdown-color;

&::after {
                border-bottom-color: @ecf-coe-dropdown-color;
              }
            }
          }

&[x-placement^=top] {
            & .popper__arrow {
              border-top-color: @ecf-coe-dropdown-color;

&::after {
                border-top-color: @ecf-coe-dropdown-color;
              }
            }
          }
        }
      }
    }
  }
}

// DIALOG
#am-modal.am-modal.am-in-body {
  &.am-event-modal.event-dialog {
    .am-event-modal {
      &__confirm-booking {
        p {
          color: @ecf-cef-text-color;
        }
      }
    }

// FORM
    .am-form {
      &-eventCalendarForm {
        //EVENT CALENDAR - CONGRATULATIONS BOOKING FORM
        &-congratulationsForm {
          //EVENT CALENDAR - CONGRATULATIONS BOOKING FORM - APPOINTMENT
          &-event {
            &.am-success-payment {
              h4, p {
                color: @ecf-coe-text-color;
              }
            }
          }
        }
      }
    }

// FORM ITEMS
    .@{formItem} {
      // CUSTOMIZE - INPUT
      &.am-input {
        // CUSTOMIZE - INPUT - EVENT CALENDAR
        &-eventCalendarForm {
          // CUSTOMIZE - INPUT - EVENT CALENDAR - CONFIRM BOOKING
          &-confirmBookingForm {
            // CUSTOMIZE - INPUT - EVENT CALENDAR - CONFIRM BOOKING EVENT
            &-event {
              .@{formItem} {
                &__label {
                  color: @ecf-cef-text-color;
                  font-weight: 700;
                }
              }

.@{input} {
                &__inner {
                  color: @ecf-cef-input-text-color;
                  background-color: @ecf-cef-input-color;

&::placeholder {
                    color: fade(@ecf-cef-input-text-color, 60%);
                  }
                  &::-webkit-input-placeholder {
                    color: fade(@ecf-cef-input-text-color, 60%);
                  }
                  &::-moz-placeholder {
                    color: fade(@ecf-cef-input-text-color, 60%);
                  }
                  &:-ms-input-placeholder {
                    color: fade(@ecf-cef-input-text-color, 60%);
                  }
                  &:-moz-placeholder {
                    color: fade(@ecf-cef-input-text-color, 60%);
                  }
                }

&.is-disabled {
                  .@{input}__inner {
                    border-color: #e4e7ed;
                    background-color: lighten(@ecf-cef-input-color, 15%);
                  }
                }

&-group {
                  &__prepend {
                    background-color: @ecf-cef-input-color;

.@{input}__icon {
                      color: @ecf-cef-input-text-color;
                    }

.am-selected-flag {
                      .@{input}__inner {
                        background-color: transparent;
                      }
                    }
                  }

.@{input} {
                    &__suffix {
                      i {
                        color: @ecf-cef-input-text-color;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

//CUSTOMIZE - SELECT
      &.am-select {
        //CUSTOMIZE - SELECT - EVENT CALENDAR
        &-eventCalendarForm {
          //CUSTOMIZE - SELECT - EVENT CALENDAR - CONFIRM EVENT FORM
          &-confirmBookingForm {
            &-event {
              .@{formItem} {
                &__label {
                  color: @ecf-cef-text-color;
                  font-weight: 700;

span {
                    color: @ecf-cef-text-color;
                    font-weight: 700;
                  }
                }
              }

.@{input} {
                &:hover {
                  .@{select} {
                    &__caret {
                      color: @ecf-cef-input-text-color;
                    }
                  }
                }

& .@{input}__inner {
                  color: @ecf-cef-input-text-color;
                  background-color: @ecf-cef-input-color;
                }

&.is-disabled {
                  .@{input}__inner {
                    background-color: fade(@ecf-cef-input-color, 25%);
                  }
                }

& .@{select} {
                  &__caret {
                    color: fade(@ecf-cef-input-text-color, 75%);
                  }
                }
              }

.am-payment-button {
                svg {
                  fill: @ecf-cef-text-color;
                }

&-selected, &:hover {
                  p {
                    color: @color-accent;
                  }
                }
              }
            }
          }

&-congratulationsForm {
            &-event {
              .@{input} {
                &:hover {
                  .@{select} {
                    &__caret {
                      color: @ecf-coe-input-text-color;
                    }
                  }
                }

& .@{input}__inner {
                  color: @ecf-coe-input-text-color;
                  background-color: @ecf-coe-input-color;

&::placeholder {
                    color: fade(@ecf-coe-input-text-color, 60%);
                  }

&::-webkit-input-placeholder {
                    color: fade(@ecf-coe-input-text-color, 60%);
                  }

&::-moz-placeholder {
                    color: fade(@ecf-coe-input-text-color, 60%);
                  }

&:-ms-input-placeholder {
                    color: fade(@ecf-coe-input-text-color, 60%);
                  }

&:-moz-placeholder {
                    color: fade(@ecf-coe-input-text-color, 60%);
                  }
                }

&.is-disabled {
                  .@{input}__inner {
                    background-color: fade(@ecf-coe-input-color, 25%);
                  }
                }

& .@{select} {
                  &__caret {
                    color: fade(@ecf-coe-input-text-color, 75%);
                  }
                }
              }
            }
          }
        }
      }

// CUSTOMIZE - BLOCK
      &.am-block {
        &-eventCalendarForm {
          &-confirmBookingForm {
            &-event {
              .@{formItem} {
                &__label {
                  color: @ecf-cef-text-color;

span {
                    color: @ecf-cef-text-color;
                  }
                }
              }
            }
          }
        }
      }

//CUSTOMIZE - CUSTOM FIELDS
      &.am-custom {
        //CUSTOMIZE - CUSTOM FIELDS - EVENT CALENDAR
        &-eventCalendarForm {
          //CUSTOMIZE - CUSTOM FIELDS - EVENT CALENDAR - CONFIRM BOOKING
          &-confirmBookingForm {
            //CUSTOMIZE - CUSTOM FIELDS - EVENT CALENDAR - CONFIRM BOOKING - EVENT
            &-event {
              .@{formItem} {
                &__label {
                  color: @ecf-cef-text-color;
                  font-weight: 700;

span {
                    color: @ecf-cef-text-color;
                    font-weight: 700;
                  }
                }
              }

.@{input} {
                &__inner {
                  color: @ecf-cef-input-text-color;
                  background-color: @ecf-cef-input-color;
                }

&__suffix {
                  i {
                    color: @ecf-cef-input-text-color;
                  }
                }
              }

.@{textarea} {
                &__inner {
                  color: @ecf-cef-input-text-color;
                  background-color: @ecf-cef-input-color;
                }
              }

.@{radio} {
                &__label {
                  color: @ecf-cef-text-color;
                  font-weight: 700;
                }

&.is-checked {
                  .@{radio}__label {
                    color: @color-accent;
                  }
                }
              }

.@{checkbox} {
                &__label {
                  color: @ecf-cef-text-color;
                  font-weight: 700;
                }

&.is-checked {
                  .@{checkbox}__label {
                    color: @color-accent;
                  }
                }
              }

.@{upload} {
                &-dragger {
                  background-color: @ecf-cef-bgr-color;

span {
                    color: @color-accent;
                  }
                }
              }

.am-calendar-picker.popover-container {
                .popover-content-wrapper .popover-content {
                  color: @ecf-cef-dropdown-text-color;
                  background-color: @ecf-cef-dropdown-color;

* {
                    color: @ecf-cef-dropdown-text-color;
                  }

.c-title-popover.popover-container {
                    .popover-origin {
                      background-color: @ecf-cef-dropdown-color;

* {
                        background-color: @ecf-cef-dropdown-color;
                      }
                    }
                  }

.c-day-content:hover {
                    & > div {
                      color: @color-accent;
                    }
                  }

:not(.c-day-backgrounds.c-day-layer:empty) ~ .c-day-content-wrapper .c-day-content > div {
                    color: @color-white;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

> div {
      width: 100%;
    }
  }
}

Back