/**
    * Extra CSS for Appointment Wizard POPUP
 */
@import "multiselect.css";

.instore-popup {
    right: 0 !important;
}

.instore-popup-cont .appointment-container {
    padding: 0;
}

.appointment-wizard .steps--section--inner form #step1, .appointment-wizard .steps--section--inner form #step2, .appointment-wizard .steps--section--inner form #step3, .appointment-wizard .steps--section--inner form #step4 {
    margin-top: 20px;
}

.appointment-wizard .steps--section--inner form #step3 .row:nth-child(3) .col-md-8 {
    padding-left: 0;
    padding-right: 0;
}

.appointment-wizard .steps--section--inner form #step2 .select-date {
    text-align: left;
    color: #111623;
    font-family: 'gotham_medium';
    font-size: 14px !important;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: -0.28px;
    text-transform: uppercase;
    margin-top: 16px;
    margin-bottom: 16px;
}

.appointment-wizard .steps--section--inner form #step2 .select-date span {
    color: #585D69;
    font-family: 'latoregular';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.appointment-wizard .steps--section--inner form #step3 .hideonuncheck {
    display: none !important;
}

.appointment-wizard .steps--section--inner form #step2 button.xdsoft_prev {
    background: url(../../images/chevron_left.svg) no-repeat !important;
    background-position: center center !important;
}

.appointment-wizard .steps--section--inner form #step2 button.xdsoft_next {
    background: url(../../images/chevron_right.svg) no-repeat !important;
    background-position: center center !important;
}

.instore-popup .appointment-wizard {
    right: 0px;
}

.instore-popup .row.mobile-title .close-model {
    display: none;
}

.instore-popup .instore-popup-exit {
    right: 30px;
    top: 30px;
}

.instore-popup .instore-popup-collapse {
    right: 65px;
    top: 30px;
}

.instore-popup .appointment-wizard .mobile-title .title > svg:first-child {
    display: block;
}

.instore-popup .appointment-wizard .mobile-title .title > svg:nth-child(2) {
    display: none;
}

.instore-popup .appointment-wizard .row.mobile-title {
    margin-right: 0;
    margin-left: 0;
}

.appointment-wizard .step4--tabcontent .row {
    padding-top: 0;
}

.appointment-wizard .steps--section--inner form #step4 ul.shapes-list span.label-style {
    color: #111623;
    font-size: 10px;
    line-height: 18px;
    text-transform: uppercase;
    letter-spacing: -0.2px;
    font-family: 'gotham_medium', 'Michroma', serif;
    margin-top: 5px;
}

.appointment-wizard .tab button.tablinks.active::after, .appointment-wizard .tab button.tablinks.visited::after {
    background-color: #001245;
}

.appointment-wizard p {
    font-family: 'latoregular';
    color: #585D69;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.appointment-wizard .steps--section--inner .tab {
    padding-bottom: 12px;
}

.appointment-wizard .steps--section--inner .tab .tablinks {
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    color: #9EA3B2;
    font-family: 'Gotham', 'Michroma', serif;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0;
    padding-left: 1px;
    text-wrap: nowrap;
}

.appointment-wizard #step1 h3 {
    text-align: left !important;
    text-transform: uppercase;
    color: #111623;
    font-family: 'gotham_bold';
    font-weight: 500;
    letter-spacing: 0;
    line-height: 20px;
    font-size: 14px;
    margin-top: 34px;
    margin-bottom: 20px;
}

.appointment-wizard h4 {
    text-align: left !important;
    text-transform: uppercase;
    color: #001245;
    font-family: 'gotham_bold', 'Michroma', serif;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 20px;
    font-size: 14px;
}

.appointment-wizard .steps--section--inner .tab .tablinks.active, .appointment-wizard .steps--section--inner .tab .tablinks.visited {
    color: #001245;
    font-family: 'gotham_bold';
    font-weight: 500;
}

.appointment-wizard .steps--section--inner form .tabcontent-container .row .col-md-4 > .imagearea--box {
    padding: 12px;
    border: 1px solid #E4E8F2;
    min-height: 125px;
    cursor: pointer;
    margin-bottom: 12px !important;
    width: 300px;
    margin-right: 0 !important;
}

.appointment-wizard .steps--section--inner form .tabcontent-container .row .col-md-4:not(.fine_jewelrycol) > .imagearea--box {
    margin-right: 20px;
}

.appointment-wizard .steps--section--inner form .tabcontent-container .row .col-md-6:first-child > .datacard {
    margin-right: 20px;
}

.appointment-wizard .step1--content .row:nth-child(1) {
    padding-bottom: 0;
}

.appointment-wizard .steps--section--inner form .next {
    display: flex;
    padding: 12px 16px 12px 20px !important;
    justify-content: center;
    align-items: center;
    gap: 6px;
    background-color: #001245;
    color: white;
    margin: 40px auto 0 auto !important;
    font-size: 15px;
    font-family: 'gotham_bold';
    line-height: 22px;
    letter-spacing: 0;
    font-weight: 500;
    width: 100%;
    min-width: auto;
}

.appointment-wizard .steps--section--inner form .next:not(.disabled):hover {
    background-color: white;
    color: #001245;
    border: 1px solid #001245;
}

.appointment-wizard .steps--section--inner form .next:not(.disabled):hover svg path {
    fill: #001245;
}

.appointment-wizard .steps--section--inner form #step3 .next {
    margin: 0 0 0 auto !important;
}

.appointment-wizard .steps--section--inner form .next.disabled {
    background-color: #F2F4F8;
    color: #C1C5D1;
    border: none;
}

.appointment-wizard .steps--section--inner form .next svg {
    height: 24px;
    width: 24px;
    margin-left: 0;
}

.appointment-wizard .steps--section--inner form .next svg path {
    fill: white;
}

.appointment-wizard .steps--section--inner form .next.disabled svg path {
    fill: #D9D9D9;
}

.appointment-wizard .tab::before {
    background: #001245;
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    position: absolute;
    bottom: 0;
    z-index: 1;
    left: 2px;
}

.appointment-wizard .tab.wi-0::before {
    width: 0;
}

.appointment-wizard .tab.wi-25::before {
    width: 24%;
}

.appointment-wizard .tab.wi-50::before {
    width: 49%;
}

.appointment-wizard .tab.wi-75::before {
    width: 74%;
}

.appointment-wizard .tab.wi-100::before {
    width: 100%;
}

.appointment-wizard input[type="text"], .appointment-wizard input[type="password"], .appointment-wizard select, .appointment-wizard textarea {
    border: 1px solid #E4E8F2 !important;
    height: 42px;
    padding: 11px 16px !important;
    color: #111623 !important;
    font-family: 'latoregular';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.appointment-wizard input[type="password"] {
    font-size: 20px !important;
}

.appointment-wizard textarea {
    height: auto !important;
}

/* Placeholders */
.appointment-wizard input[type="text"]::placeholder, .appointment-wizard input[type="password"]::placeholder, .appointment-wizard select::placeholder, .appointment-wizard textarea::placeholder {
    color: #585D69;
    font-family: 'latoregular';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.appointment-wizard .steps--section--inner form select.nothing-selected {
    color: #585D69 !important;
}

.appointment-wizard input[type="text"]::placeholder:after, .appointment-wizard input[type="password"]::placeholder:after, .appointment-wizard select::placeholder:after, .appointment-wizard textarea::placeholder:after {
    color: red;
    content: " *";
}

.appointment-wizard .select---field.field-cons, .appointment-wizard .field-pass {
    width: 100% !important;
}

.appointment-wizard .prev {
    display: flex;
    width: 102px;
    padding: 13px 20px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    background-color: #F2F4F8;
    position: initial;
    color: #111623;
    font-family: 'gotham_bold' !important;
    font-size: 14px !important;
    font-style: normal !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    height: 48px !important;
    font-weight: 500;
}

.appointment-wizard .prev:hover {
    background-color: #A7AFB7;
}

.appointment-wizard .error-notice {
    display: flex;
    padding: 7px 10px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    background-color: #FFECEC;
    width: 100%;
    margin-bottom: 2em;
}

.appointment-wizard .error-notice .error-message {
    color: #FF4A4A;
    font-family: 'latoregular', serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.appointment-wizard .steps--section--inner form #step2 .next {
    margin-left: 0 !important;
}

/** * Appointment Wizard - STEP 1 */
.appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row .col-md-4 > .imagearea--box:hover, .appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row .col-md-4 > .imagearea--box.selected-radio-step, .appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row .col-md-6 .datacard:hover, .appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row .col-md-6 .datacard.selected-radio-step {
    background-color: #E4E8F2;
    border: 1px solid #001245 !important;
}

.appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row .col-md-6 .datacard {
    border: 1px solid #E4E8F2 !important;
    margin-right: 0 !important;
    margin-bottom: 12px;
}

.appointment-wizard .steps--section--inner form #step1 .datacard .imagearea--box--inner {
    border: none !important;
    padding: 18px 12px;
}

.appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row .col-md-4 > .imagearea--box .imagearea--box--inner {
    display: flex;
    justify-content: start;
}

.appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row .col-md-4 > .imagearea--box .imagearea--box--inner .image--card {
    margin-right: 14px;
    width: 80px;
    height: 80px;
}

.appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row .col-md-4 > .imagearea--box .imagearea--box--inner .image--card img {
    width: 80px;
    height: 80px;
}

.appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row .col-md-4 > .imagearea--box .imagearea--box--inner .data--text {
    height: 80px;
    flex: 1;
}

.appointment-wizard .steps--section--inner form #step1 .datacard {
    height: 56px;
    cursor: pointer;
}

.appointment-wizard .steps--section--inner form #step1 .datacard > label {
    cursor: pointer;
}

.appointment-wizard .steps--section--inner form #step2 .availability .availability-hours p:last-child, .appointment-wizard .steps--section--inner form #step2 .availability .availability-hours p:nth-child(3) {
    margin-bottom: 0;
}

.appointment-wizard .steps--section--inner form #step1 .tm-checkbox, .appointment-wizard .steps--section--inner form #step1 .tm-radio {
    left: 1px;
    cursor: pointer;
}

.appointment-wizard .steps--section--inner form #step1 .tm-checkbox, .appointment-wizard .steps--section--inner form #step1 .tm-radio > input {
    cursor: pointer;
}

.appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row .col-md-4, .appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row .col-md-6 {
    padding: 0;
}

.appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row {
    margin-right: 0;
    margin-left: 0;
}

.appointment-wizard .steps--section--inner form #step1 .tabcontent-container p {
    font-size: 13px;
    line-height: 18px;
}

/** * Appointment Wizard - STEP 2 */
.appointment-wizard .steps--section--inner form #step2 h3 {
    margin-top: 2em;
    color: #111623;
    font-family: 'gotham_bold';
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 18px;
}

.appointment-wizard .steps--section--inner form #step2 .row .col-md-6 {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

/** * Appointment Wizard - STEP 2 - Availability */
.appointment-wizard .steps--section--inner form #step2 .availability {
    background-color: #E2EDFA;
    padding: 12px;
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.instore-popup-cont .appointment-wizard .steps--section--inner {
    padding: 20px 0 0 0;
}

.appointment-wizard .steps--section--inner form #step2 .availability h3 {
    margin-top: 0 !important;
}

.appointment-wizard .steps--section--inner form #step2 .availability .availability-hours {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

.appointment-wizard .steps--section--inner form #step2 .availability .availability-hours p {
    width: 50%;
    margin-bottom: 10px;
    font-size: 13px;
    font-family: 'latoregular';
}

.appointment-wizard .steps--section--inner form #step2 .availability .availability-hours p span {
    font-weight: normal;
}

.appointment-wizard .steps--section--inner form #step2 .availability .availability-hours p span.day {
    color: #111623;
    font-weight: bold;
}

.appointment-wizard .steps--section--inner form #step2 .availability .availability-hours p span.d-block {
    display: block;
}

.appointment-wizard .steps--section--inner form #step2 .availability .availability-hours p span.hour {
    color: #585D69;
}

/** * Appointment Wizard - STEP 2 - date picker */
.appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_mounthpicker {
    display: flex;
    justify-content: space-around;
    padding: 0 !important;
    margin-right: 10px;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_mounthpicker .xdsoft_month {
    order: 1;
    text-align: left !important;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_mounthpicker .xdsoft_month::after {
    content: ",";
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_mounthpicker .xdsoft_year {
    order: 2;
    min-width: 32px;
    margin-left: 0;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_mounthpicker .xdsoft_prev {
    order: 3;
    margin-left: auto;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_mounthpicker .xdsoft_next {
    order: 4;
    margin-left: 1em;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_mounthpicker .xdsoft_prev, .appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_mounthpicker .xdsoft_next {
    display: flex;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    opacity: 1;
    border-radius: 60px;
    border: 1px solid #E4E8F2 !important;
    background-position: center center !important;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_calendar table tr td {
    height: 38px !important;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_calendar table tr td > div {
    font-family: 'latoregular';
    font-weight: 700;
    color: #111623;
    font-size: 14px;
    font-style: normal;
    line-height: 26px;
}

.appointment-wizard .steps--section--inner form #step2 .col-md-6.timepicker .xdsoft_datetimepicker.xdsoft_noselect.xdsoft_.xdsoft_inline {
    padding-left: 0;
    margin: 0;
    margin-bottom: 1em !important;
    width: 100% !important;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_calendar table tr td.xdsoft_disabled > div {
    color: #A7AFB7 !important;
}

.appointment-wizard .steps--section--inner form #step2 .step2--content .xdsoft_datetimepicker .xdsoft_calendar th {
    font-size: 15px;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current {
    background: #001245 !important;
    box-shadow: none !important;
    color: white !important;
    font-weight: 400;
    border: 1px solid !important;
    text-align: center;
}

.appointment-wizard .step2--content .xdsoft_datetimepicker .xdsoft_calendar th {
    font-size: 14px !important;
    font-family: 'gotham_bold';
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0;
    color: #001245;
}

.appointment-wizard .step2--content .xdsoft_label {
    color: #04091E;
    font-size: 15px !important;
    font-family: 'latoregular';
    font-weight: 700 !important;
    line-height: 26px;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current > div {
    color: white !important;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datetimepicker .xdsoft_timepicker.active {
    display: flex !important;
    width: 100% !important;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datetimepicker .xdsoft_timepicker.active .xdsoft_time_variant {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 0 !important;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datetimepicker .xdsoft_timepicker.active .xdsoft_time_box .xdsoft_time_variant .xdsoft_time {
    color: #111623 !important;
    font-family: 'latoregular';
    font-size: 14px !important;
    font-style: normal;
    line-height: 20px !important;
    min-width: 95px !important;
    height: 36px !important;
    padding: 8px !important;
    border: 1px solid #E4E8F2 !important;
    font-weight: 700 !important;
    margin: 0;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datetimepicker .xdsoft_timepicker.active .xdsoft_time_box .xdsoft_time_variant .xdsoft_time.xdsoft_disabled {
    background-color: #F2F4F8 !important;
    border: 1px solid #F2F4F8 !important;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datetimepicker .xdsoft_timepicker.active .xdsoft_time_box .xdsoft_time_variant .xdsoft_time.xdsoft_current {
    background: #001245 !important;
    color: white !important;
    font-weight: 700 !important;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datetimepicker .xdsoft_timepicker.active .xdsoft_time_box .xdsoft_time_variant .xdsoft_time:not(.xdsoft_current):hover {
    background-color: #E4E8F2 !important;
    border: 1px solid #E4E8F2 !important;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datetimepicker .xdsoft_timepicker.active .xdsoft_time_box .xdsoft_time_variant .xdsoft_time.xdsoft_current::after {
    content: none;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_calendar table tr td:not(.xdsoft_disabled):not(.xdsoft_current):hover {
    background-color: #E4E8F2 !important;
    color: #111623 !important;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_calendar table tr td.xdsoft_disabled:hover {
    background-color: #F2F4F8 !important;
    color: #A7AFB7 !important;
}

/** * Appointment Wizard - STEP 3 */
.appointment-wizard .steps--section--inner form #step3 h3 {
    font-size: 14px;
    color: #111623;
    text-align: left;
    letter-spacing: 0;
    font-family: 'gotham_bold';
    font-weight: 500;
    margin: 0;
}

.appointment-wizard .steps--section--inner form #step3 .right--imagebox span.text-center {
    font-size: 14px;
    font-family: 'latoregular';
    text-decoration: underline;
    color: #111623;
    line-height: 20px;
    cursor: pointer;
    min-width: 100%;
    text-align: left !important;
}

.appointment-wizard .steps--section--inner form #step3 > div:nth-child(3) {
    display: flex;
    justify-content: space-between;
}

.appointment-wizard .steps--section--inner form #step3 .input-box input {
    padding: 6px 16px;
    border: 1px solid #E4E8F2;
}

.appointment-wizard .steps--section--inner form #step3 .right--imagebox {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    background-color: #E2EDFA;
    max-width: 100%;
}

.appointment-wizard .steps--section--inner form #step3 .fieldset {
    padding: 0;
}

.appointment-wizard .steps--section--inner form #step3 .row {
    margin-left: 0;
    margin-right: 0;
}

.appointment-wizard .steps--section--inner form #step3 h4.appointment_detail {
    font-size: 14px !important;
    color: #111623;
    font-weight: normal;
    text-align: left;
    letter-spacing: 0;
    font-family: 'latoregular';
    border-bottom: none;
    border-top: 1px solid #A8BBD5;
    text-transform: capitalize !important;
    margin: 0 !important;
    min-width: 100%;
    padding-top: 1em;
    padding-bottom: 0;
    line-height: 20px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.appointment-wizard .steps--section--inner form #step3 h4.appointment_detail div.appt-date {
    margin-top: 16px;
    font-weight: bold;
}

.appointment-wizard .steps--section--inner form #step3 .step-3-buttons {
    display: flex;
    align-items: end;
    width: 100%;
}

.appointment-wizard .steps--section--inner form #step3 .field-pass {
    padding: 0;
    margin-bottom: 2em;
}

.appointment-wizard .steps--section--inner form #step3 .virtual-forgot-info {
    color: #585D69;
    font-family: 'latoregular';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.appointment-wizard .steps--section--inner form #step3 .virtual-forgot-info-container {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
}

.appointment-wizard .steps--section--inner form #step3 .virtual-forgot-info-container a {
    color: #001245;
    text-decoration: underline;
    font-family: 'latoregular';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    display: block;
}

.appointment-wizard .steps--section--inner form #step3 .validation-advice {
    display: none !important;
}

.appointment-wizard .steps--section--inner form #step3 .validation-failed {
    background-color: #FFF4F4 !important;
    border: 1px solid #FF4A4A !important;
}

/** * Appointment Wizard - STEP 4 */
.appointment-wizard .steps--section--inner form #step4 label {
    color: #111623;
    text-align: left;
    font-family: 'latoregular';
    font-size: 14px;
    font-style: normal;
    font-weight: 500 !important;
    line-height: 20px;
    letter-spacing: initial;
    margin-bottom: 12px;
}

/** Step 4 - engagement_ring */
.appointment-wizard .steps--section--inner form #step4 .engagement_ring {
    display: flex;
    flex-direction: column;
}

.appointment-wizard .steps--section--inner form #step4 .engagement_ring .columns {
    display: flex;
    justify-content: space-between;
}

.appointment-wizard .steps--section--inner form #step4 .engagement_ring .columns > div {
    width: 48%;
}

.appointment-wizard .steps--section--inner form #step4 .engagement_ring .columns > div .shapes-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
}

.appointment-wizard .steps--section--inner form #step4 .engagement_ring .columns > div .shapes-list li {
    min-width: 14%;
    margin-bottom: 10px;
}

.appointment-wizard .steps--section--inner form #step4 .engagement_ring .columns > div .shapes-list li.active {
    border: 1px solid #001245 !important;
    background-color: #E4E8F2;
}

.appointment-wizard .steps--section--inner form #step4 .engagement_ring .columns > div .shapes-list li:hover {
    border: 1px solid #001245 !important;
    background-color: #E4E8F2;
}

.appointment-wizard .steps--section--inner form #step4 span.red {
    color: #FF4A4A !important;
}

.appointment-wizard .steps--section--inner form #step4 .row .step-4-footer {
    display: flex;
    flex-direction: column;
}

.appointment-wizard .steps--section--inner form #step4 .row .step-4-footer .buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.appointment-wizard .steps--section--inner form #step4 .row .step-4-footer .buttons .button--submit {
    width: auto;
    margin-top: 0 !important;
}

.appointment-wizard .steps--section--inner form #step4 .row .step-4-footer .buttons .button--submit button {
    display: flex;
    width: 450px;
    padding: 12px 16px 12px 20px !important;
    justify-content: center;
    align-items: center;
    gap: 6px;
    background-color: #001245;
    color: white;
    height: 48px;
    border-radius: 0 !important;
    font-family: 'gotham_bold';
    font-weight: 500;
    font-size: 14px;
}

.appointment-wizard .steps--section--inner form #step4 .row .step-4-footer .buttons .button--submit button.disabled {
    background-color: #F2F4F8;
    color: #C1C5D1;
    border: none;
    box-shadow: none;
}

.appointment-wizard .steps--section--inner form #step4 .row .step-4-footer .buttons .button--submit button:not(.disabled):hover {
    background-color: white;
    color: #001245;
    border: 1px solid #001245;
}

.appointment-wizard .steps--section--inner form #step4 .row .step-4-footer .buttons .button--submit button:not(.disabled):hover svg path {
    fill: #001245;
}

.appointment-wizard .steps--section--inner form #step4 .row .step-4-footer .buttons .button--back .prev {
    color: #111623;
    font-family: 'gotham_bold';
    font-size: 14px;
    font-style: normal;
    line-height: 22px;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 500;
}

.appointment-wizard .steps--section--inner form #step4 .row .step-4-footer .disclamer-text {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.appointment-wizard .steps--section--inner form #step4 .row .step-4-footer .disclamer-text .text {
    color: #111623;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.appointment-wizard .steps--section--inner form #step4 .row .step-4-footer .required {
    color: #585D69 !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    text-transform: inherit !important;
    width: 100%;
    margin-top: 12px;
}

.appointment-wizard .steps--section--inner form #step4 .row .step-4-footer .disclamer-text a {
    color: #111623;
    text-decoration: underline;
}

.appointment-wizard .steps--section--inner form #step4 .validation-failed {
    background-color: #FFF4F4 !important;
    border: 1px solid #FF4A4A !important;
}

.appointment-wizard .steps--section--inner form #step4 .full-column {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.appointment-wizard .steps--section--inner form #step4 .full-column .field {
    width: 100%;
}

.appointment-wizard .steps--section--inner form #step4 .full-column .acheive_options_field {
    width: 49%;
}

.appointment-wizard .steps--section--inner form #step4 .full-column .acheive_options_field_multiselect {
    width: 49%;
    order: -1;
}

.appointment-wizard .steps--section--inner form #step4 .full-column .purchase_options_field {
    width: 49%;
}

.appointment-wizard .steps--section--inner .next.hide--desktop, .appointment-wizard .steps--section--inner .prev.hide--desktop {
    display: none;
}

.appointment-wizard .appt-extra-popup-txt {
    display: block;
    font-size: 14px !important;
    line-height: 24px !important;
}

.appointment-wizard .steps--section--inner form .virtual-forgot-info {
    padding-left: 0;
    display: flex;
    gap: 12px;
}

.appointment-wizard select {
    -webkit-appearance: none;
    appearance: none;
}

.appointment-wizard .select-svg-arrow {
    position: absolute;
    top: 13px;
    right: 16px;
    pointer-events: none;
}

.appointment-wizard #step4 .select-svg-arrow {
    top: 46px;
}

.appointment-wizard .select---field.field-cons {
    position: relative;
}

.appointment-wizard span.red {
    color: red;
}

/** * Appointment Wizard - MOBILE */
.appointment-wizard .field.comment_option_field {
    order: 27;
}

.appointment-wizard .field.wedding_bands_options_field {
    order: 25;
}

.instore-popup img.instore-popup-exit {
    display: none;
}

.cms-products-item .std .appointment-wizard ul {
    padding-left: 0;
}

.appointment-wizard .check-text {
    justify-content: normal;
    gap: 8px;
    align-items: center;
    padding-bottom: 20px;
}

.appointment-wizard .box-check {
    display: flex;
    justify-content: center;
}

.appointment-wizard .check-text p.text.text-para {
    margin-bottom: 0;
    font-size: 14px;
}

.appointment-wizard .steps--section--inner form #step3 .input-box {
    position: relative;
}

.appointment-wizard .steps--section--inner form #step3 .input-box .input--placeholder {
    color: #585D69;
    font-family: 'latoregular';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    position: absolute;
    top: 11px;
    left: 16px;
    pointer-events: none;
    z-index: 999;
}

.appointment-wizard .steps--section--inner form #step3 .input-box .input--placeholder.input--placeholder--ast {
    left: 56px;
}

.appointment-wizard .steps--section--inner form #step3 input[type="text"]::placeholder .appointment-wizard .steps--section--inner form #step3 input[type="password"]::placeholder, .appointment-wizard .steps--section--inner form #step3 select::placeholder, .appointment-wizard .steps--section--inner form #step3 textarea::placeholder {
    display: none;
}

/** Collapsible */
.appointment-wizard .steps--section--inner form #step3 h3 {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.appointment-wizard .steps--section--inner form #step3 h3 svg {
    cursor: pointer;
}

.appointment-wizard .steps--section--inner form #step3 h3.expanded + h4, .appointment-wizard .steps--section--inner form #step3 h3.expanded + h4 + span {
    display: block;
}

.appointment-wizard .steps--section--inner form #step3 h3.collapsed + h4, .appointment-wizard .steps--section--inner form #step3 h3.collapsed + h4 + span {
    display: none;
}

.appointment-wizard .steps--section--inner form #step3 h3.expanded svg.arrow-collapsed {
    display: none;
}

.appointment-wizard .steps--section--inner form #step3 h3.expanded svg.arrow-expanded {
    display: block;
}

.appointment-wizard .steps--section--inner form #step3 h3.collapsed svg.arrow-collapsed {
    display: block;
}

.appointment-wizard .steps--section--inner form #step3 h3.collapsed svg.arrow-expanded {
    display: none;
}

/** Cheeckbox */
.appointment-wizard .steps--section--inner form input[type="checkbox"] {
    border-radius: 1px;
    border: 1px solid #E4E8F2;
    background: #FFF;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.appointment-wizard .box-check, .appointment-wizard .check {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px !important;
    height: 18px !important;
}

.appointment-wizard #step4 .check {
    margin-right: 1em;
}

.appointment-wizard .box-check .tm-checkbox + svg, .appointment-wizard .check .tm-checkbox + svg {
    display: none;
}

.appointment-wizard .box-check .tm-checkbox.tm-checked + svg, .appointment-wizard .check .tm-checkbox.tm-checked + svg {
    display: block;
    position: absolute;
    top: 1px;
    right: 1px;
    pointer-events: none;
}

.appointment-wizard .steps--section--inner form .tm-checkbox {
    width: 18px;
    height: 18px;
    background: #FFF;
    border-radius: 1px;
    border: 1px solid #E4E8F2;
    cursor: pointer;
}

.appointment-wizard .steps--section--inner form .tm-checkbox.tm-checked {
    width: 18px;
    height: 18px;
    background: #001245;
    border-radius: 1px;
    border: 1px solid #001245;
}

/** Validations for step 4 */
.appointment-wizard .steps--section--inner form #step4 .validation-failed {
    background-color: #FFF4F4 !important;
    border: 1px solid #FF4A4A !important;
}

.appointment-wizard .steps--section--inner form #step4 .error-notice {
    width: 97%;
    margin: auto;
    margin-bottom: 1em;
}

.appointment-wizard .steps--section--inner form #step3 .right--imagebox > h3 > span.hide--mobile {
    display: none;
}

.appointment-wizard .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_monthselect {
    right: -15px;
}

.appointment-wizard .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
    background-color: #001245 !important;
}

.appointment-wizard .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
    background-color: #E2EDFA;
    color: black;
}

.catalog-product-view .tooltip-inner {
    color: #fff !important;
    background-color: #000 !important;
    z-index: 999;
}

/* New styles extracted from @media screen and (max-width: 4024px) */
/** General Mobile Styles */
.instore-popup-cont .steps--section .tab {
    padding-top: 0;
}

.instore-popup-cont .imagearea--box--inner .image--card + .data--text h4 {
    padding-top: 0 !important;
}

.appointment-wizard .steps--section--inner #step1, .appointment-wizard .steps--section--inner #step3, .appointment-wizard .steps--section--inner #step2, .appointment-wizard .steps--section--inner #step4, .appointment-wizard .steps--section--inner .mobile-title, .appointment-wizard .steps--section--inner .tab {
    margin-left: 30px !important;
    margin-right: 30px !important;
}

.appointment-wizard .steps--section--inner #step1, .appointment-wizard .steps--section--inner #step2, .appointment-wizard .steps--section--inner #step3, .appointment-wizard .steps--section--inner #step4 {
    padding-bottom: 20px !important;
}

.appointment-wizard .step4--tabcontent .shape_options_field {
    padding-bottom: 0;
}

.appointment-wizard .steps--section--inner form #step2 .availability.hide--mobile {
    display: none;
}

.appointment-wizard .steps--section--inner form .next.hide--mobile {
    display: none !important;
}

.appointment-wizard .steps--section--inner form #step1 .next {
    margin: 12px auto 0 auto !important;
}

.appointment-wizard .steps--section--inner .tab button.tablinks::after {
    width: 10px;
    height: 10px;
    bottom: -11px;
}

.appointment-wizard .steps--section--inner .tab::after, .appointment-wizard .steps--section--inner .tab::before {
    height: 1px !important;
    bottom: 6px;
    left: 9px;
}

.appointment-wizard .steps--section--inner form h4 {
    min-height: auto !important;
    font-size: 14px !important;
    line-height: 20px;
    max-width: 100%;
    justify-content: flex-start;
    letter-spacing: 0;
    font-family: 'gotham_bold';
    font-weight: 500;
    margin-bottom: 0;
}

.appointment-wizard .steps--section--inner form #step1 .data--text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.appointment-wizard .steps--section--inner form #step1 h4 {
    margin: 0;
}

.appointment-wizard .steps--section--inner form #step1 h4 br {
    display: none;
}

.appointment-wizard .steps--section--inner form p {
    padding-left: 0 !important;
    margin: 0;
}

.appointment-wizard .steps--section--inner .next, .appointment-wizard .steps--section--inner .prev {
    min-width: 100%;
    width: 100%;
    margin-left: 15px;
    margin-right: 15px;
}

/** Step 1 - Mobile Styles */
.appointment-wizard .steps--section--inner form #step1 h3.text-center {
    padding: 0;
    margin-bottom: 20px;
    max-width: 100%;
    justify-content: flex-start;
    min-height: fit-content;
    font-size: 14px;
    line-height: 20px;
    margin-top: 24px;
}

.appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row .col-md-4 > .imagearea--box {
    min-height: 80px;
    width: 100%;
}

.appointment-wizard .availability.hide--mobile {
    display: none;
}

.appointment-wizard .steps--section--inner .next.hide--mobile, .appointment-wizard .steps--section--inner .prev.hide--mobile {
    display: none;
}

/** Step 2 - Mobile Styles */
.appointment-wizard .steps--section--inner form #step2 > .row:first-child, .appointment-wizard .steps--section--inner form #step2 > .row:nth-child(2) > div:first-child, .appointment-wizard .steps--section--inner form #step2 > .row:nth-child(2) > div:first-child .xdsoft_datetimepicker, .appointment-wizard .steps--section--inner form #step2 > .row:nth-child(2) > div:first-child .xdsoft_datetimepicker .xdsoft_month, .appointment-wizard .steps--section--inner form #step2 > .row:nth-child(2) > div:first-child .xdsoft_datetimepicker .xdsoft_year {
    background-color: #F8F9FB;
}

.appointment-wizard .steps--section--inner form #step2 > .row:first-child, .appointment-wizard .steps--section--inner form #step2 > .row:nth-child(2) > div:first-child, .appointment-wizard .steps--section--inner form #step2 > .row:nth-child(2) > div:first-child .xdsoft_datetimepicker {
    max-width: 455px;
    margin: auto;
}

.appointment-wizard .steps--section--inner form #step2 .row {
    padding-top: 0;
}

.appointment-wizard .steps--section--inner {
    padding-top: 0 !important;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_mounthpicker .xdsoft_next, .appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_mounthpicker .xdsoft_prev {
    background-color: white !important;
}

.appointment-wizard .steps--section--inner form .nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 32px;
}

.appointment-wizard .steps--section--inner form .nav-buttons .back--container {
    width: 30%;
}

.appointment-wizard .steps--section--inner form .nav-buttons .next--container {
    width: 67%;
}

.appointment-wizard .steps--section--inner form .nav-buttons .back--container .prev {
    position: initial !important;
    margin: 0 !important;
}

.appointment-wizard .steps--section--inner form .nav-buttons .next--container .next {
    display: flex !important;
    margin: 0 !important;
}

/** Step 3 - Mobile Styles */
.appointment-wizard #step3 > div:nth-child(1) > div {
    padding-left: 0;
}

.appointment-wizard .steps--section--inner form #step3 .right--imagebox .hide--desktop {
    display: block;
    max-width: -webkit-fill-available;
    max-height: 10px;
}

.appointment-wizard .steps--section--inner form #step3 {
    padding-top: 0 !important;
}

.appointment-wizard .steps--section--inner form #step3 .form-list--step3 > li:first-child .customer-name {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 0 !important;
}

.appointment-wizard .steps--section--inner form #step3 .form-list--step3 > li:first-child .customer-name .name-prefix {
    width: 31%;
}

.appointment-wizard .steps--section--inner form #step3 .form-list--step3 > li:first-child .customer-name .name-firstname {
    width: 31%;
    padding: 0;
}

.appointment-wizard .steps--section--inner form #step3 .form-list--step3 > li:first-child .customer-name .name-lastname {
    width: 31%;
    padding: 0;
}

.appointment-wizard .steps--section--inner form #step3 .form-list--step3 > .stateclass:not(.hideonuncheck) .customer-name {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.appointment-wizard .steps--section--inner form #step3 .form-list--step3 > .stateclass .customer-name .name-prefix {
    width: 31%;
}

.appointment-wizard .steps--section--inner form #step3 .form-list--step3 > .stateclass .customer-name .name-firstname {
    width: 31%;
    padding: 0;
}

.appointment-wizard .steps--section--inner form #step3 .form-list--step3 > .stateclass .customer-name .name-lastname {
    width: 31%;
    padding: 0;
}

.appointment-wizard .steps--section--inner form #step3 .form-list--step3 > li:nth-child(2) {
    display: flex;
    flex-direction: row;
}

.appointment-wizard .steps--section--inner form #step3 .form-list--step3 > li:nth-child(2) .field--email {
    width: 48%;
}

.appointment-wizard .steps--section--inner form #step3 .form-list--step3 > li:nth-child(2) .field--telephone {
    width: 48%;
}

.appointment-wizard .steps--section--inner form #step3 .form-list--step3 .fields .name-prefix, .appointment-wizard .steps--section--inner form #step3 .form-list--step3 .fields .name-firstname, .appointment-wizard .steps--section--inner form #step3 .form-list--step3 .fields .name-lastname, .appointment-wizard .steps--section--inner form #step3 .form-list--step3 .fields .field--email, .appointment-wizard .steps--section--inner form #step3 .form-list--step3 .fields .field--telephone, .appointment-wizard .steps--section--inner form #step3 .form-list--step3 .fields .field-pass, .appointment-wizard .steps--section--inner form #step3 .form-list--step3 .fields .select---field {
    padding-bottom: 15px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/** Step 4 - Mobile Styles */
.appointment-wizard .steps--section--inner form #step4 #step-4-main-fieldset .columns {
    display: flex;
    flex-direction: column;
}

.appointment-wizard .steps--section--inner form #step4 #step-4-main-fieldset .columns .column-1, .appointment-wizard .steps--section--inner form #step4 #step-4-main-fieldset .columns .column-2 {
    width: 100%;
}

.appointment-wizard .steps--section--inner form .button--back > .prev {
    position: initial !important;
}

.appointment-wizard .steps--section--inner form #step4 .buttons {
    display: flex !important;
    flex-direction: column-reverse !important;
}

.appointment-wizard .steps--section--inner form #step4 .buttons .button--back {
    width: 100% !important;
    margin: auto;
    margin-bottom: 20px;
}

.appointment-wizard .steps--section--inner form #step4 .buttons .button--back .prev {
    width: 100%;
    margin: 0 !important;
}

.appointment-wizard .steps--section--inner form #step4 .buttons .button--submit {
    width: 100%;
    margin-bottom: 20px;
}

.appointment-wizard .steps--section--inner form #step4 .buttons + hr {
    margin-top: 0;
}

.appointment-wizard .steps--section--inner form #step4 .buttons .button--submit #schappbtn {
    width: 100%;
    margin: 0 !important;
}

.appointment-wizard .steps--section--inner form #step4 #step-4-main-fieldset .full-column {
    display: flex;
    flex-direction: column;
}

.appointment-wizard .steps--section--inner form #step4 #step-4-main-fieldset .full-column > .field {
    width: 100% !important;
}

.appointment-wizard .steps--section--inner form #step3 .row .virtual-forgot-info-container {
    display: flex;
    flex-direction: column;
}

.appointment-wizard .field-pass .input-box {
    position: relative;
}

.appointment-wizard .field-pass .input-box .pass-reveal {
    position: absolute;
    top: 14px;
    right: 45px;
    cursor: pointer;
    z-index: 999;
}

.appointment-wizard .field-pass .input-box .pass-info {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 999;
}

.appointment-wizard .row.mobile-title {
    display: flex;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    position: relative;
}

.appointment-wizard .row.mobile-title .title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.appointment-wizard .row.mobile-title .title h1, .appointment-wizard .row.mobile-title .title h2 {
    color: #001245;
    font-family: 'gotham_bold';
    font-size: 20px;
    font-style: normal;
    line-height: 26px;
    letter-spacing: 0;
    margin-bottom: 0 !important;
    font-weight: 500;
    max-width: 324px;
}

.appointment-wizard .steps--section--inner form #step2 .row .col-md-12, .appointment-wizard .steps--section--inner form #step2 .row .col-md-6:not(.timepicker) {
    padding: 20px;
}

.appointment-wizard .steps--section--inner form #step2 .xdsoft_datetimepicker .xdsoft_datepicker {
    margin-left: 0;
}

.appointment-wizard .steps--section--inner form #step2 > .row:nth-child(2) > div:first-child .xdsoft_datetimepicker {
    padding: 0;
}

.appointment-wizard .steps--section--inner form #step2 .row .col-md-12 {
    padding-bottom: 0;
}


@media screen and (min-width: 1024px) {
    .in-store-appt-thank-you h2 {
        white-space: nowrap;
    }

    .instore-popup {
        max-width: 515px !important;
    }
}

@media screen and (max-width: 768px) {

    .appointment-wizard .steps--section--inner form #step3 .input-box .input--placeholder {
        font-size: 13px;
        line-height: 18px;
    }

    .appointment-wizard .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_monthselect {
        right: -50px !important;
    }

    .appointment-wizard .steps--section--inner form #step4 .engagement_ring .columns > div .shapes-list li:not(.active):hover {
        border: 1px solid #dcdcdc !important;
        background-color: inherit;
    }


    .appointment-wizard .steps--section--inner form #step4 .error-notice {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }

    .appointment-wizard .steps--section--inner form #step3 {
        margin-top: 0 !important;
    }

    .appointment-wizard::-webkit-scrollbar {
        width: 0px;
    }

    .appointment-wizard .steps--section--inner form #step2 > .row:first-child, .appointment-wizard .steps--section--inner form #step2 > .row:nth-child(2) > div:first-child, .appointment-wizard .steps--section--inner form #step2 > .row:nth-child(2) > div:first-child .xdsoft_datetimepicker {
        max-width: 100%;
        width: 100%;
    }

    .appointment-wizard .steps--section--inner form #step4 .row .step-4-footer .disclamer-text .text, .appointment-wizard .steps--section--inner form #step4 .row .step-4-footer .required {
        font-size: 12px !important;
        line-height: 18px !important;
    }

    .appointment-wizard .steps--section--inner .tab .tablinks {
        font-size: 10px !important;
        line-height: 18px; /* 180% */
    }

    .appointment-wizard .steps--section--inner form p {
        font-size: 12px !important;
        line-height: 18px !important;
    }

    .appointment-wizard .steps--section--inner form #step1 h3.text-center {
        font-size: 12px;
        line-height: 18px;
    }

    .appointment-wizard .steps--section--inner form .next {
        font-size: 14px;
        line-height: 20px;
    }

    .appointment-wizard .row.mobile-title .title h1, .appointment-wizard .row.mobile-title .title h2 {
        font-size: 15px;
        line-height: 22px;
    }

    .appointment-wizard .steps--section--inner form h4 {
        font-size: 12px !important;
        line-height: 18px !important;
        margin-top: 12px;
    }

    .appointment-wizard .steps--section--inner form #step3 .col-md-12 h4 {
        padding-bottom: 0;
    }


    .appointment-wizard .steps--section--inner form #step2 h4 {
        margin-bottom: 16px !important;

    }

    .appointment-wizard .steps--section--inner form #step1 .tabcontent-container p {
        font-size: 12px !important;
        line-height: 16px !important;
    }

    .appointment-wizard .row.mobile-title .title h1, .appointment-wizard .row.mobile-title .title h2 {
        max-width: 200px;
    }

    .instore-popup .instore-popup-exit svg, .instore-popup .instore-popup-collapse svg {
        width: 14px;
    }

    .instore-popup-cont #step1 .imagearea--box--inner h4 {
        margin-bottom: 0px;
    }

    .appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_calendar table tr td > div {
        font-size: 14px;
        line-height: 20px;
    }

    .appointment-wizard .step2--content .xdsoft_datetimepicker .xdsoft_calendar th {
        font-size: 12px !important;
        line-height: 18px;
    }

    .appointment-wizard .steps--section--inner {
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0;
    }

    .appointment-wizard .steps--section--inner #step2 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .appointment-wizard .steps--section--inner #step1, .appointment-wizard .steps--section--inner #step3, .appointment-wizard .steps--section--inner #step2, .appointment-wizard .steps--section--inner #step4, .appointment-wizard .steps--section--inner .mobile-title {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .instore-popup::-webkit-scrollbar {
        display: none;
    }

    .appointment-wizard .steps--section--inner .tab {
        margin-left: 20px !important;
        margin-right: 20px !important;
        overflow: hidden;
    }

    .appointment-wizard .steps--section--inner #step1,
    .appointment-wizard .steps--section--inner #step3,
    .appointment-wizard .steps--section--inner #step4,
    .appointment-wizard .steps--section--inner .mobile-title,
    .appointment-wizard .tabcontent.step2--content .timepicker,
    .appointment-wizard .tabcontent.step2--content .availability,
    .appointment-wizard .tabcontent.step2--content .nav-buttons {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .appointment-wizard .tabcontent.step2--content .availability {
        margin-right: 20px !important;
        margin-left: 20px !important;
    }


    .appointment-wizard .steps--section--inner form #step2 .row .col-md-12, .appointment-wizard .steps--section--inner form #step2 .row .col-md-6:not(.timepicker) {
        padding: 0px 20px;
    }

    .appointment-wizard .step2--content .xdsoft_label {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    .appointment-wizard .steps--section--inner form #step1 .h4 {
        font-size: 14px !important;
    }


    .appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row .col-md-4 > .imagearea--box .imagearea--box--inner .image--card {
        width: 60px;
        height: 60px;
    }

    .appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row .col-md-4 > .imagearea--box .imagearea--box--inner .image--card img {
        width: 60px;
        height: 60px;
    }

    .appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row .col-md-4 > .imagearea--box {
        min-height: 60px;
        width: 100%;
    }

    .appointment-wizard .steps--section--inner form #step1 .tabcontent-container .row .col-md-4 > .imagearea--box .imagearea--box--inner .data--text {
        height: 60px;
        flex: 1;
    }

    .appointment-wizard .steps--section--inner form .tabcontent-container .row .col-md-4 > .imagearea--box {
        padding: 4px;
    }

    .appointment-wizard .steps--section--inner form #step1 .datacard .imagearea--box--inner {
        padding: 13px 12px;
    }

    .appointment-wizard .steps--section--inner form #step1 .datacard {
        height: 44px;
    }

    .appointment-wizard .steps--section--inner form #step2 .select-date {
        font-size: 12px !important;
        line-height: 18px;
    }

    .appointment-wizard .steps--section--inner form #step2 .xdsoft_datetimepicker .xdsoft_timepicker.active .xdsoft_time_box .xdsoft_time_variant {
        justify-content: normal;
        column-gap: 0;
        row-gap: 12px;
    }

    .appointment-wizard .steps--section--inner form #step2 .xdsoft_datetimepicker .xdsoft_timepicker.active .xdsoft_time_box .xdsoft_time_variant .xdsoft_time {
        font-size: 13px !important;
        min-width: 78px !important;
        width: 22% !important;
        line-height: 18px !important;
        white-space: nowrap;
        margin-right: 3.9%;
    }

    .appointment-wizard .steps--section--inner form #step2 .xdsoft_datetimepicker .xdsoft_timepicker.active .xdsoft_time_box .xdsoft_time_variant .xdsoft_time:nth-child(4n) {
        margin-right: 0;
    }

    .appointment-wizard .steps--section--inner form #step2 h3 {
        font-size: 12px;
        line-height: 18px;
    }

    .appointment-wizard .steps--section--inner form #step2 .availability .availability-hours p {
        font-size: 12px;
        line-height: 18px;
    }

    .appointment-wizard input[type="text"],
    .appointment-wizard input[type="password"],
    .appointment-wizard select,
    .appointment-wizard textarea {
        font-size: 13px;
        line-height: 18px;
    }

    .appointment-wizard textarea, .appointment-wizard input, .appointment-wizard select {
        border-radius: 0 !important;
    }

    .appointment-wizard input[type="text"]::placeholder,
    .appointment-wizard input[type="password"]::placeholder,
    .appointment-wizard select::placeholder,
    .appointment-wizard textarea::placeholder {
        font-size: 13px;
        line-height: 18px;
    }

    .appointment-wizard .steps--section--inner form #step4 label {
        font-size: 12px;
        line-height: 16px;
    }

    .appointment-wizard .steps--section--inner form #step4 ul.shapes-list span.label-style {
        font-size: 8px;
    }

    .appointment-wizard .steps--section--inner form #step3 .form-list--step3 > li:first-child .customer-name .name-prefix {
        width: 100%;
    }

    .appointment-wizard .steps--section--inner form #step3 .form-list--step3 > li:first-child .customer-name .name-firstname {
        width: 48%;
    }

    .appointment-wizard .steps--section--inner form #step3 .form-list--step3 > li:first-child .customer-name .name-lastname {
        width: 48%;
    }

    .appointment-wizard .steps--section--inner form #step3 .form-list--step3 > .stateclass .customer-name .name-prefix {
        width: 100%;
    }

    .appointment-wizard .steps--section--inner form #step3 .form-list--step3 > .stateclass .customer-name .name-firstname {
        width: 48%;
    }

    .appointment-wizard .steps--section--inner form #step3 .form-list--step3 > .stateclass .customer-name .name-lastname {
        width: 48%;
    }

    .appointment-wizard .steps--section--inner form #step3 .form-list--step3 > li:nth-child(2) {
        display: flex;
        flex-direction: column;
    }

    .appointment-wizard .steps--section--inner form #step3 .form-list--step3 > li:nth-child(2) .field--email {
        width: 100%;
        padding: 0;
    }

    .appointment-wizard .steps--section--inner form #step3 .form-list--step3 > li:nth-child(2) .field--telephone {
        width: 100%;
        order: -1;
    }

    .appointment-wizard .row.mobile-title .title svg {
        width: 24px;
        height: 24px;
    }

    .appointment-wizard .steps--section--inner form .nav-buttons {
        margin-top: 24px;
        margin-bottom: 16px;
    }

    .appointment-wizard .check-text {
        padding-bottom: 0;
    }

    .appointment-wizard .fields.stateclass:not(.hideonuncheck) {
        padding-top: 24px;
    }

    .appointment-wizard .step3--content .col-md-12.disclamer-text {
        padding-top: 9px;
        padding-bottom: 0;
    }

    .appointment-wizard .error-notice .error-message {
        font-size: 12px;
        line-height: 18px;
    }

    .appointment-wizard .steps--section--inner form #step3 h3 {
        font-size: 12px;
    }

    .appointment-wizard .steps--section--inner form #step3 .virtual-forgot-info-container a {
        font-size: 12px;
    }

    .appointment-wizard .steps--section--inner form #step2 .col-md-6.timepicker .xdsoft_datetimepicker.xdsoft_noselect.xdsoft_.xdsoft_inline {
        margin-bottom: 0 !important;
    }

    .appointment-wizard .steps--section--inner form #step2 .row {
        padding-bottom: 0;
    }

    .appointment-wizard .steps--section--inner form #step3 h4.appointment_detail,
    .appointment-wizard .steps--section--inner form #step3 .right--imagebox span.text-center {
        font-size: 13px !important;
    }

    .appointment-wizard .steps--section--inner form #step3 h4.appointment_detail div.appt-date {
        margin-top: 10px;
    }

    .appointment-wizard .steps--section--inner form #step3 .right--imagebox > h3 > span {
        max-width: 98px;
    }


    .appointment-wizard .steps--section--inner form #step4 .engagement_ring .columns > div .shapes-list li img {
        height: 20px;
    }


    .appointment-wizard .steps--section--inner form #step4 .engagement_ring .columns > div .shapes-list li {
        padding-top: 10px;
        padding-bottom: 10px;
        margin-right: 0;
        margin-left: 0;
        min-width: 15%;
    }

    .appointment-wizard .steps--section--inner form #step4 .row .step-4-footer .required {
        margin-top: 16px;
    }

    .appointment-wizard .field.multiselect summary {
        font-size: 13px;
        line-height: 18px;
    }

}

@media screen and (max-width: 415px) {
    .appointment-wizard .steps--section--inner form #step2 .xdsoft_datetimepicker .xdsoft_timepicker.active .xdsoft_time_box .xdsoft_time_variant .xdsoft_time {
        min-width: 68px !important;
        font-size: 11px !important;
        text-align: center;
        min-width: max-content;
        width: 21%;
        margin-right: 4%;
    }

    .scheduler-index-index .appointment-main .page-title .title h1, .scheduler-index-index .appointment-main .page-title .title h2 {
        font-size: 14px;
        text-align: left;
        white-space: nowrap;
    }

    .appointment-wizard .steps--section--inner .tab .tablinks {
        font-size: 9px !important;
    }

    .appointment-wizard .steps--section--inner .tab button.tablinks::after {
        bottom: -9px;
    }

    .appointment-wizard .steps--section--inner form #step2 .xdsoft_datepicker .xdsoft_calendar table tr td > div {
        font-size: 13px;
    }

    .appointment-wizard .steps--section--inner form #step4 .field:not(.shape_options_field):not(.wedding_bands_options_field) label {
        white-space: nowrap;
    }


    .appointment-wizard .steps--section--inner #step1,
    .appointment-wizard .steps--section--inner #step3,
    .appointment-wizard .steps--section--inner #step4,
    .appointment-wizard .steps--section--inner .mobile-title,
    .appointment-wizard .tabcontent.step2--content .timepicker,
    .appointment-wizard .tabcontent.step2--content .nav-buttons {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .appointment-wizard .steps--section--inner .tab {
        margin-left: 15px;
        margin-right: 15px;
    }

    .appointment-wizard .tabcontent.step2--content .availability {
        margin-right: 15px !important;
        margin-left: 15px !important;
    }

    .appointment-wizard .row.mobile-title .title h1, .appointment-wizard .row.mobile-title .title h2 {
        font-size: 14px;
    }

    .appointment-wizard .steps--section--inner .tab {
        padding-bottom: 11px;
    }

    .appointment-wizard .steps--section--inner form #step4 .row .step-4-footer .disclamer-text {
        display: flex;
        flex-wrap: wrap;
    }

    .appointment-wizard .steps--section--inner form #step4 .row .step-4-footer .disclamer-text .text {
        width: 80%;
    }

    .appointment-wizard #step4 .select-svg-arrow {
        top: 47%;
    }

    .appointment-wizard .steps--section--inner form #step1,
    .appointment-wizard .steps--section--inner form #step2,
    .appointment-wizard .steps--section--inner form #step3,
    .appointment-wizard .steps--section--inner form #step4 {
        margin-top: 12px;
    }

    .appointment-wizard .steps--section--inner .tab::after,
    .appointment-wizard .steps--section--inner .tab::before {
        bottom: 7px;
    }


}
/**
Spinner
 */

.appointment-wizard #gw_loader_times{
    display: none;
    justify-content: center;
    align-items: center;
}

.appointment-wizard #gw_loader_times > div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.cms-products-item .fixed-add-to-cart-mobile.active{
    display: none!important;
}