/* typefaces typefaces typefaces */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');






/* previously applied tanamode styling.... */
.navbar {
    background: #FFC559;
    color: #FFC559;
    min-height: 60px;
    margin: 0px;
}

.admin_header .container-fluid {
    padding-right: 0px !important;
    border-bottom: solid 4px black;
}

/* any nested child with "templates_color" class inside body */
body .templates_color {
    background-color: #FFC559 !important;
    color: black !important;
    background: black;
}
#sidebar.sidebar {
    color: black;
    background-color: #FFC559 !important;
    background: black;
    border-right: solid 4px black;
}

.hr-color {
    border-top: 1px solid black !important;
}
/* all children under sidebar */
#sidebar.sidebar * {
    /* svg fill */
    fill: black;
    color: black;
    background-color: #FFC559 !important;
    background: black;
}

#sidebar.sidebar::-webkit-scrollbar {
    width: 0px;
}

.admin_header.navbar .nav>li>a {
    text-shadow: none;
    line-height: 40px;
    color: #FFC559;
    font-size: 14px;
    background: #FFC559;
}
.nav li a {
    border-bottom-color: #4d5f77 !important;
}
#bs-example-navbar-collapse-1 > ul.nav.navbar-nav.navbar-right > li.dropdown.open > ul > li:nth-child(2) > a{
    display:none;
}

.selectionBorder {
    border-color: #FFC559 !important;
    background-color: #FFC559 !important;
}
.selectionBorder.custom_highlight {
    border-color: #FFC559 !important;
    background-color: #FFC559 !important;
}

#msform .action-button {
    /* width: auto; */
    min-width: 100px;
    background-color: #FFC559;
    color: black;
}

.custom_scroll_bar::-webkit-scrollbar-thumb {
    background-color: #FFC559 !important;
}

.add-to-calendar-widget.front_btn_color, #rerender-form.front_btn_color {
    border: 4px solid black !important;
    background-color: #FFC559 !important;
    color: black !important;
}

#progressbar li#service_select.active::before, #progressbar li#service_select.active::after, 
#progressbar li#staff_select.active::before, #progressbar li#staff_select.active::after,
#progressbar li#datetime_slect.active::before, #progressbar li#datetime_slect.active::after,
#progressbar li#appointment_selec.active::before, #progressbar li#appointment_selec.active::after
{
    color: #000;
    background-color: #FFC559 !important;
}

#progressbar li#service_select.active,
#progressbar li#staff_select.active,
#progressbar li#datetime_slect.active,
#progressbar li#appointment_selec.active
{
    color: #000 !important;

}

#progressbar li.active::before {
    color: #000;
}

#adhoc_meeting{
    display:none;
}

.time_containt:hover {
    background-color: #FFC559 !important;
}

#add-another-appointment{
    display:none;
}

#weekCalendar.fc-header-center.fc-button-prev, #weekCalendar.fc-header-center.fc-button-next {
    margin: 0px !important;
    border-radius: 32px !important;
    height: 32px !important;
    width: 32px;
    padding: 0px;
    border: 0px;
    background-color: #ffd15900 !important;
    -webkit-box-shadow: 0px 1px 3px 0rgba(19,22,87,0.12);
    -moz-box-shadow: 0px 1px 3px 0 rgba(19,22,87,0.12);
    box-shadow: none;
}

.modal-footer button.request-app-button, .modal-footer #popover_open_modal, .modal-footer #weekly-delete-btn-details{
    display:none !important;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: black;
}

.fc-header-title h2 {
    color: #333;
}

.action-button.appointment_continue_btn_class.appointments_btn_cont {

}

.fc-agenda-slots td div {
    height: 2rem;
}

.sweet-alert {
    display: none !important;
    opacity: -0.04;
}

.sweet-overlay{
    display: none !important;
    opacity: -0.04;

}

.visible {
    display: none;
}

.showSweetAlert {
    display: none;
    opacity: -0.04;
}

#service option:not([value="-1"]) {
    display: none;
}

.modal-footer #request_modal.btn {
    display: none !important;
}

.modal-footer #popover_open_modal.btn {
    display: none !important;
}

.modal-footer button {
    background-color: #FFC559 !important;
    color: black !important;
}

#myModalLabel {
    color: black !important;
    background-color: #FFC559 !important;
}







/* ############### HYLIMODE starts now ############### */



/* First things first... we're building a view with a header bar, a dynamically responsive center section with a flexbox layout, and similar color scheme to the preceeding menus. let's go! */
.booking_popup {
    background: #FFC559 !important;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
}

.insertBookApp {
    background: #FFC559 !important;
}

.powered_by_text_style{
    display: none;
}

#classServiceStep, .category_service_block, .book_class {
    height: auto !important;
}

.schedule_appointment_steps{
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-top: 30px !important;
}

.sheet_height {
    border: 1px solid #CABBA5;
    border-top: none;
}



.margin-top-20{
    margin-top: 0px;
        border: 1px solid #CABBA5;
    border-bottom: none;

    
}

#classServiceStep, .customer_header {
    background: #fef9ef !important;
    border-radius: 0px !important;
    
}

row main-containt sheet_padding sheet_height {
    background: #fef9ef !important;
    
}

.main-containt {
 background: #fef9ef !important;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 100px;
}

.booking_popup .category_service_block {
    background: #FFC559 !important;
    

}

/* in this design we don't need a progress bar... so we cut it */

.progres_row {
    display: none;
}

/* let's theme the timezone dropdown */


.select2-container--default .select2-selection--single {
    background-color: transparent !important;
    border: none !important;
}


.select2-container--default .select2-selection--single:focus {
    background-color: transparent !important;
    border: none !important;
}

.select2-selection__rendered {
    border : 0px solid transparent;
    border-radius : 0!important;
    border-bottom : 1.5px solid #CABBA5;
    background-color : #F8F1E7;
    color: #A9A199 !important;
}

/* let's theme this calendar */

#calendar {
    background-color: #FFC559;
    padding-left: 0px;
    padding-right: 0px;
    border: 1.5px solid #CABBA5 !important;
    font-family: "DM Sans", sans-serif;
}

.responsivve-tr{
    background-color: #FFC559;
}

.calendar th {
    background-color: #F1AB13 !important;
    color: #845b02;
    padding-top: 5px;
    padding-bottom: 3px;
}

.calendar_main .fc-header-right .fc-button .fc-icon {
    color: #bf8507 !important;
    stroke: 0 !important;
}
.calendar_main .fc-header-left .fc-button .fc-icon {
    color: #bf8507 !important;
    stroke: 0 !important;
}

.calendar h2 {
    font-family: "Poppins", sans-serif !important;
    font-weight: 500 !important;
    padding-bottom: 15px
}

.calendar_main .fc-header-title h2 {
    color: #0f0a0a !important;
}

.fc-content {
  background-color: #F8F1E7;
}

.fc-content .fc-widget-content {
  background-color: #FEF9EF ;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px
}

.new_class {
    padding: 0!important;
}

.fc-past {
    background: #F8F1E7 !important;
    border-radius: 15px;
}

.fc-today {
    background: #FFFDF9 !important;
}

.fc-future {
    background: #FFFDF9 !important;
}

.fc-other-month.fc-future {
 /* color: red !important; */
}


.fc-content .selectionBorder {
    background-color: #FFC559 !important;
    color: #0f0a0a !important
}

.fc-past .fc-day-number {
    color: #0f0a0a60 !important;
}

.fc-day-number {
    color: #0f0a0a !important;
}

/* They goofed their spacing on the timeslots for appointments, let's help them out */

.calendar_slots {
            display: flex !important;
            justify-content: space-between;
            padding-right: 15px;
            padding-left: 40px;
}

.padding_right_left_morning {
    margin-right: 0px;
    margin-left: 30px;
}

.padding_right_left_morning {
    margin-right: 0px;
}

.padding_right_left_afternoon{
    margin-right: 0px;
}

.time_containt {
  background: #FFFDF9 !important;
    border: 1px solid #cabba5;
    border-radius: 0px;
    height: 50px;
    margin-bottom: 10px;

}

.time_containt a {
    color: #0f0a0a !important;
    font-family: "DM Sans", sans-serif !important;
padding-top: 5px;
}

td.fc-today:nth-child(even),
td.fc-future:nth-child(even) {
  background-color: hsl(40 77% 97% / 1) !important;
}


/* Let's work on the "schedule your appointment" screen... */

#create_appointment {
    margin-top: -5px;
}

#create_appointment .modal-content {
    border-radius: 0px;
    background-color: #fef9ef;
}

#create_appointment .modal-content:first-of-type {
 /* this is the hackiest bit of css i've ever written using a pseudoclass to enhance specificity just to put a border on this damn box */
    border: 1px solid #CABBA5 !important;
    border-top: transparent !important;
}

.brightCyanSectionHeader .gray-background {
        background-color: #fef9ef !important;
}


    .col-lg-3 {
        width: 10%;
}

#note {
    display:none;
}

/* Theme text inputs with class "customer_input_fields" */

.col-sm-12 .details_list {
    padding-bottom: 19px;
}

.select2-container--default .select2-selection--single {
    border-radius: 0 !important;
    
}


input.customer_input_fields {
  border: 0 solid transparent !important;
  border-radius: 0 !important;
  border-bottom: 1.5px solid #CABBA5 !important;
  background-color: #F8F1E7 !important;
    color: #0f0a0a !important;
    font-family: "DM Sans", sans-serif !important;
}

input.customer_input_fields:hover {
  border: 0 solid transparent !important;
  background-color: #F2EADF !important;
  border-bottom: 2px solid #CABBA5 !important;
  box-shadow: none !important;
}

input.customer_input_fields:focus {
  border: 1px solid #CABBA5 !important;
  box-shadow: 0 0 3px rgba(202, 187, 165, 0.25) !important;
}

/* spacing on desktop for the boxes to account for the fact that the back button used to be ginormous and must be in its own vertical section awesome CSS guys great job */


.new_customer {
    padding-right: 10%;
}

.appointment_right_side_equal {
    padding-right: 7%;
    padding-left: 5%;
}

/* style the box that has the appointment details */

.service_details_box, .class_details_box {
    border: 1px solid #CABBA5;
    background: #FFFDF9 !important;
    border-radius: 0px;
    padding: 30px 30px 10px 30px;
}

.writ {
    background: #FFFDF9 !important;
    font-family: "DM Sans", sans-serif;
    color: #0f0a0a !important;

}

.writ_title {
    background: #FFFDF9 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 14px !important;
    color: #0f0a0a !important;
    font-weight: 400 !important;
}

.action-button.appointment_continue_btn_class.appointments_btn_cont:first-of-type {
  background-color: #FFC559 !important;
  border: 1px solid #0F0A0A !important;
  box-shadow: 1px 1px 0 #0F0A0A !important;
  border-radius: 0 !important;
  color: #0F0A0A !important;
  font-weight: 500 !important;
  cursor: pointer;
  text-align: center;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 400;
  margin-bottom: 50px !important;
}

.action-button#appointment_continue_btn {
    background-image: none !important;
        padding: 20px 0px 30px 0px!important;
}

.action-button.appointment_continue_btn_class.appointments_btn_cont:hover {
  background-color: #F1AB13 !important;
  box-shadow: 3px 3px 0 #0F0A0A !important;
}

.customer_field_step_60 .col-xs-12.col-sm-12.col-md-12.col-lg-12 {
 margin-left: -75px !important;
}    

/* spacing improvements and layout fixes for mobile */
@media(max-width: 991px) {
    .customer_field_step_60 .col-xs-12.col-sm-12.col-md-12.col-lg-12 {
 margin-left: 0px !important;
}   
    .new_customer {
    padding-right: 0%;
}

    .appointment_right_side_equal {
    padding-right: 15px;
    padding-left: 15px;
}

       .col-lg-3 {
        padding-bottom: 20px
}
/* some calendar + timeslot spacing isn't quite right either lemme fix that */

    .fc-content .fc-widget-content {
    padding-left: 5px;
   
}

    .time_containt {
        padding-top: 10px
    }
}

/* Make the overall appointment modal a flex container that spans the viewport */
#create_appointment {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  /* Optionally remove any default padding/margins */
  padding: 0;
}

/* Let the modal content grow to fill nearly the full viewport width */
@media (min-width: 992px) {
  #create_appointment .modal-content {
    flex: 1 1 auto;
    max-width: 98vw !important;
    margin: 0 auto !important;
  }
}

/* On mobile, let it fill the full width */
@media (max-width: 991px) {
  #create_appointment .modal-content {
    flex: 1 1 auto;
    width: 98vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
  }
}


/* here's where I apply additional type styling, in vertical order on the page... */

.headingDark {
    font-family: "Poppins", sans-serif !important;
    font-weight: 600;
    padding-top: 40px;
    padding-bottom: 20px;
}

/* On very large screens, force a fixed width (1500px) and center */
@media (min-width: 1500px) {
  .schedule_appointment_steps {
    width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* On medium-large desktops, let the container take up most of the width */
@media (min-width: 592px) and (max-width: 1499px) {
  .schedule_appointment_steps {
    width: 90vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

   
}

/* weird bugs on intermediate screen sizes */
@media only screen and (min-device-width: 200px) and (max-device-width: 767px) {
    
.custom_scroll_bar_height {
    background: #FEF9EF !important;
}

    .calendar_slots {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    .padding_right_left_morning {
        margin-left: 0px !important;
}

   
}

 @media only screen and (min-device-width: 768px) and (max-device-width: 1401px) {
         .col-sm-4 {
        width: 40% !important;
             padding: 0!important;
    }

     .calendar_slots {
         padding-left: 20px !important;
     }
        }

/* On mobile, allow full-width and remove side margins */
@media (max-width: 591px) {
    
  .schedule_appointment_steps {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

    .padding_right_left_morning {
        margin-left: 14px
    }

    .padding_right_left_afternoon {
        margin-right: 0px;
    }

    .calendar_slots {
        padding-top: 40px;
        padding-left: 0px;

    }

    .main-containt {
 background: #fef9ef !important;
 padding-left: 10px;
 padding-right: 10px;
 padding-bottom: 100px;
 width: 100%;
 height: 100%;
}

    /* prevent horizontal scroll on mobile */
    .booking_popup {
        overflow-x: hidden;
    }

.booking_popup .category_service_block {
    background: transparent !important;

} 



    @media only screen and (min-device-width: 416px) and (max-device-width: 765px) {
    .calendar_slots {
        background-color: transparent !important;
    }

} 


/* hotfixing some mobile bugs now that i see it live on prod */

@media only screen and (min-device-width: 200px) and (max-device-width: 767px) {
    .calendar_slots.custom_scroll_bar {
        background: #FEF9EF !important;
    }

    .margin-top-20 {
        margin-left: 0%;
        margin-right: 0%;
}

#create_appointment .modal-content {
    width: unset !important;
}

.fc-content .fc-widget-content {
    padding-left: 0px;
}
}