/* =========================

   ABBVIE SIMPLYBOOK CLEAN CSS

   ========================= */


/* HERO SECTION */

section#main-buttons,

#main-buttons {

    min-height: 490px !important;

    height: 490px !important;

    max-height: 490px !important;

    background-size: cover !important;

    background-position: center center !important;

}

#main-buttons .container-fluid,

#main-buttons .wrapper,

#main-buttons .inner {

    min-height: 490px !important;

    height: 490px !important;

    max-height: 490px !important;

}

#main-buttons .company-name,

.company-name {

    position: relative !important;

    top: 60px !important;

    text-shadow:

        0 0 18px rgba(255,255,255,0.45),

        3px 3px 14px rgba(0,0,0,0.55) !important;

}


/* SERVICE CARD */

.service-item .tab {

    height: 350px !important;

    min-height: 350px !important;

    max-height: 350px !important;

}

#sb_service_step_container .duration,

#sb_service_step_container .time,

#sb_service_step_container .service-duration,

#sb_service_step_container .service-item .txt,

#sb_service_step_container .excerpt-info {

    margin-bottom: 0 !important;

    padding-bottom: 0 !important;

}

#sb_service_step_container .btn-bar,

#sb_service_step_container .buttons,

#sb_service_step_container .select-service,

#sb_service_step_container .select-item {

    margin-top: -90px !important;

    transform: translateY(-50px) !important;

}


/* CALENDAR */

.top-date-select .calendar .weeks-date .date.prev-or-next-month,

.top-date-select .calendar .weeks-date .date.prev-month,

.top-date-select .calendar .weeks-date .date.next-month {

    visibility: hidden !important;

    pointer-events: none !important;

}

#sb-timeline,

.timeline-wrapper,

#steps-content .datetime-step {

    background: #ffffff !important;

    border-radius: 18px !important;

    padding: 24px !important;

    box-shadow: 0 12px 35px rgba(1, 23, 57, 0.12) !important;

}

.calendar,

.datepicker,

.datepicker-inline,

#sb_dateview_container {

    background: #ffffff !important;

    border-radius: 18px !important;

    padding: 18px !important;

    border: 1px solid rgba(1, 23, 57, 0.08) !important;

    box-shadow:

        0 10px 30px rgba(1, 23, 57, 0.12),

        0 4px 12px rgba(0,0,0,0.06) !important;

}

.calendar .title,

.datepicker-switch,

.month-title {

    color: #011739 !important;

    font-weight: 800 !important;

    font-size: 20px !important;

}

.datepicker table tr td,

.datepicker table tr th,

.calendar-day {

    border-radius: 10px !important;

    font-weight: 600 !important;

}

#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date.selected,

#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date.selected .day-on,

#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date.selected .day-off {

    background: #011739 !important;

    color: #ffffff !important;

}

#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .date.selected * {

    color: #ffffff !important;

}


/* BUTTONS - EXCLUDES PHONE COUNTRY PICKER */

button:not(.iti__selected-country),

.sb-btn,

.btn,

input[type="submit"] {

    background: #011739 !important;

    border: 1px solid #011739 !important;

    color: #ffffff !important;

    border-radius: 8px !important;

    transition: all 0.25s ease !important;

}

button:not(.iti__selected-country) *,

.sb-btn *,

.btn * {

    color: #ffffff !important;

}

button:not(.iti__selected-country):hover,

.sb-btn:hover,

.btn:hover,

input[type="submit"]:hover,

.time-slot:hover,

.slot:hover,

.btn.time:hover,

#sb_time_slots_container button:hover,

#sb_time_slots_container .btn:hover {

    background: #03306b !important;

    border-color: #03306b !important;

    color: #ffffff !important;

    box-shadow: 0 6px 18px rgba(1,23,57,0.35) !important;

}


/* FORMS */

input,

textarea,

select,

.form-control {

    border: 1.5px solid rgba(0,0,0,0.25) !important;

    border-radius: 8px !important;

    height: 48px !important;

    padding: 10px 14px;

    background: #ffffff !important;

    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;

    font-size: 15px !important;

}

input:focus,

textarea:focus,

select:focus,

.form-control:focus {

    border-color: #1f5eff !important;

    box-shadow: 0 0 0 3px rgba(31,94,255,0.18) !important;

    outline: none !important;

}

input::placeholder,

textarea::placeholder {

    color: #8a8a8a !important;

}

label {

    font-weight: 700 !important;

}


/* PHONE FIELD / COUNTRY PICKER FIX */

.iti,

.intl-tel-input {

    width: 100% !important;

    position: relative !important;

    display: block !important;

}

.iti input[type="tel"],

.intl-tel-input input[type="tel"],

input[type="tel"] {

    padding-left: 78px !important;

    height: 48px !important;

}

.iti__flag-container,

.intl-tel-input .flag-container {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    width: 62px !important;

    height: 48px !important;

    z-index: 999999 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    background: transparent !important;

}

.iti__selected-country,

.iti__selected-flag,

.intl-tel-input .selected-flag,

.iti button {

    width: 62px !important;

    height: 48px !important;

    min-height: 48px !important;

    background: transparent !important;

    background-color: transparent !important;

    border: none !important;

    border-color: transparent !important;

    box-shadow: none !important;

    padding: 0 !important;

    margin: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 8px 0 0 8px !important;

}

.iti__flag,

.iti-flag {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    width: 20px !important;

    height: 15px !important;

    transform: scale(1.15) !important;

    background-repeat: no-repeat !important;

}

.iti__arrow {

    margin-left: 6px !important;

    opacity: 1 !important;

}

.iti__selected-country *,

.iti__selected-flag *,

.iti button * {

    color: initial !important;

    background: transparent !important;

}
 
/* HIDE BROKEN FLAG, KEEP PHONE FIELD CLEAN */

.iti__flag-container,

.intl-tel-input .flag-container {

    display: none !important;

}

.iti input[type="tel"],

.intl-tel-input input[type="tel"],

input[type="tel"] {

    padding-left: 14px !important;

}

/* TYPE + QUANTITY SIDE BY SIDE */

#sb_additional_fields {

    display: flex !important;

    flex-wrap: wrap !important;

    column-gap: 20px !important;

}

/* Default fields full width */

#sb_additional_fields > .form-group {

    width: 100% !important;

}

/* Type */

#sb_additional_fields > .form-group[data-field="57cb98dc403ba86bd898611e39841439"] {

    width: calc(50% - 10px) !important;

}

/* Quantity */

#sb_additional_fields > .form-group[data-field="e1ab56212ef695aa679a856ac7d4ff4a"] {

    width: calc(50% - 10px) !important;

}
 

/* REMOVE COUNTRY FLAGS + COUNTRY PICKER COMPLETELY */
.iti__flag-container,
.intl-tel-input .flag-container,
.iti__selected-country,
.iti__selected-flag,
.iti__country-list,
.iti__flag,
.iti-flag {
   display: none !important;
}
/* Reset phone input spacing */
.iti input[type="tel"],
.intl-tel-input input[type="tel"],
input[type="tel"] {
   padding-left: 14px !important;
   width: 100% !important;
}
/* Remove wrapper weird spacing */
.iti,
.intl-tel-input {
   width: 100% !important;
   position: relative !important;
}

