.booking--wrapper h1{
    margin: 0 0 50px 0;
    color: #7FC0EE;
}
.booking--wrapper .booking--request--details{
    background: #f1f5f6;
    padding: 30px 50px;
    margin-bottom: 20px;
}
.booking--wrapper .booking--request--details h4{
    margin: 0 0 30px 0;
    font-size: 28px;
}
.booking--wrapper .booking--request--details .form-group{
    /* margin-bottom: 30px; */
}
.booking--wrapper .booking--request--details h5{
    font-size: 16px;
}
.booking--wrapper .booking--request--details p{
    font-size: 16px;
    /* margin-top: 5px !important; */
}
.booking--wrapper .booking--request--details .no--card a{
    font-weight: bold;
    cursor: pointer;
}
.booking--wrapper .booking--request--details .bq--footer{
    margin: 50px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.booking--wrapper .booking--request--details .bq--footer .newLogoutBtn{
    margin-right: 15%;
}
.booking--wrapper .booking--request--details .confirm--note{
    margin: 35px 0;
}
.booking--wrapper .booking--request--details .confirm--note p{
    font-size: 16px;
    line-height: 21px;
}
.booking--wrapper .booking--request--details .select--card{
    display: flex;
    align-items: center;
}
.booking--wrapper .booking--request--details .select--card .custom-select-wrapper{
    width: 50%;
    margin-left: 10%;
}
.hide{
    display: none !important;
}
.pr-0{
    padding-right: 0 !important;
}
.pl-0{
    padding-left: 0 !important;
}

/* date--time--section */
.booking--wrapper .fc-calendar .fc-head{
    color: #fff !important;
}
.booking--wrapper .fc-calendar .fc-row>div.fc-today:before{
    background: #7FC0EE !important;
    border: 1px solid transparent !important;
    color: #fff !important;
}
.booking--wrapper .fc-calendar .fc-row>div, 
.booking--wrapper .fc-calendar .fc-head>div{
    font-weight: bold;
    font-size: 16px;
    color: #000;
}

@media(max-width:400px){
    .booking--wrapper .fc-calendar .fc-row>div, 
    .booking--wrapper .fc-calendar .fc-head>div{
        font-weight: bold;
        font-size: 13px;
        color: #000;
    }

}

.booking--wrapper .fc-calendar-container .fc-calendar .fc-head{
    border: none
}
.booking--wrapper  .custom-header nav .custom-prev,
.booking--wrapper .custom-header nav .custom-next{
    border: none
}
.booking--wrapper  .custom-header nav .custom-prev{
    left: 62px;
    margin-top: 5px;
}
.booking--wrapper  .custom-header nav .custom-next{
    right: 62px;
    margin-top: 5px;
}
.booking--wrapper .custom-header h2,
.booking--wrapper .custom-header h3{
    font-family: "bariol_boldbold";
    font-size: 25px;
}
.booking--wrapper .fc-calendar .fc-row>div.currday:before{
    content: "";
    background: transparent;
    border: 1px solid #000;
    box-shadow: none;
    
    left: 17%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 66%;
    padding-top: 66%;
    border-radius: 50%;
    position: absolute;
  
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.booking--wrapper .fc-calendar .fc-row>div.currday>span.fc-date{
    color: #000 !important;
}
.booking--wrapper .fc-calendar .fc-row>div.currday.selected>span.fc-date{
    color: #fff !important;
}
.booking--wrapper .selected-sessions .cost h4{
    color: #7FC0EE;
}
.booking--wrapper #calendarSection .selected-sessions .session__item,
.booking--wrapper .btn-primary--alt{
    background-color: #7FC0EE !important;
    border-color: #7FC0EE !important;
}
.booking--wrapper .custom-next, 
.booking--wrapper .custom-prev{
    border-color: #4E4E4E;
}
.booking--wrapper .custom-header nav div i.fa{
    font-size: 30px;
    font-weight: 600;
    transform: none !important;
    line-height: 15px;
}
.booking--wrapper .custom-header nav div i.fa,
.booking--wrapper .custom-header h2, 
.booking--wrapper .custom-header h3{
    color: #4E4E4E;
}
.booking--wrapper .date--time--section{
    margin-bottom: 50px;
}
.booking--wrapper .date--time--section p{
    font-size: 22px;
    margin-bottom: 50px;
}  
.bg-clr{
    background-color: #f1f5f6 ;
} 
.booking--wrapper .date--time--section .outer--box{
    border-top: 2px solid #ddd;    
    padding: 40px 50px;
}
.booking--wrapper .date--time--section .outer--box.no-brdr{
    border: none;
}
.booking--wrapper .date--time--section .outer--box header{
    font-family: "bariol_boldbold";
    font-size: 25px;
    margin-bottom: 40px;
    text-align: center;
}
.booking--wrapper .date--time--section .profile-calendar-section .custom-calendar-wrap{
    padding: 0;
    box-shadow: none;
    max-width: 400px;
}
.booking--wrapper .date--time--section .custom-next, 
.booking--wrapper .date--time--section .custom-prev,
.booking--wrapper .date--time--section .custom-calendar-wrap .custom-header .calenddar-header,
.booking--wrapper .date--time--section .profile-calendar-section .custom-calendar-wrap .fc-calendar-container,
.booking--wrapper .date--time--section .profile-calendar-section .custom-calendar-wrap .custom-header{
    background: transparent !important;
}
.booking--wrapper .date--time--section .fc-calendar-container .fc-calendar .fc-row{
    /* border: none; */
}
.booking--wrapper .date--time--section .fc-calendar-container{
    height: 265px;
    margin-bottom: 30px;
}
.booking--wrapper .date--time--section .profile-calendar-section .custom-calendar-wrap .fc-calendar-container{
    box-shadow: none !important;
}
.booking--wrapper .date--time--section section#profileCalendarSection .customerBookingsSelectionWrapper{
    border: none;
    padding: 0;
}
.booking--wrapper .date--time--section .fc-calendar .fc-row>div.fc-today:before {
    left: 17%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 66%;
    padding-top: 66%;
}
.booking--wrapper .date--time--section .times.fly-status-check{
    margin-top: 80px;
    /* margin-left: 10%; */
}

.booking--wrapper .date--time--section .fly-status-check li{
    text-align: left;
}
.booking--wrapper .date--time--section .times.fly-status-check li.time__item{
    width: 130px;
    margin: 0 15px 15px 0;
    text-align: center;
    border: 1px solid #c5c5c5;
    padding: 0;
    color: #000;
    font-weight: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    font-size: 14px;
    background-color: white;
    font-family: 'bariolregular';
}
.booking--wrapper .date--time--section .times.fly-status-check li.time__item.time__item--pending{
    /*background: #FAA41C;*/ 
    color: #ccc !important;
    /*color: #000;*/
    /*text-decoration-line: line-through;*/
     border: 1px solid #ccc;
}
.booking--wrapper .date--time--section .times.fly-status-check li.time__item.time__item--unconfirmed{
    /*background: #FAA41C; */
    /*color: #000;*/
    color: #ccc !important;
    /*text-decoration-line: line-through;*/
    /* border: 1px solid #FAA41C; */
    border: 1px solid #ccc;
}
.booking--wrapper .date--time--section .times.fly-status-check li.time__item.time__item--confirmed{
    /*background: #83C141;*/
    /*background: #5d5d5d;*/
    color: #ccc !important;
    /*color: #fff;*/
    /*border: 1px solid #83C141;*/
    border: 1px solid #ccc;
}
.booking--wrapper .date--time--section .times.fly-status-check li.time__item.time__item--selected{
    background: #7FC0EE;
    color: #fff;
    border: 1px solid #7FC0EE;
}
.booking--wrapper .date--time--section .times.fly-status-check li.time__item:after{
    content: none;
}

.booking--wrapper .date--time--section .next--btn{
    margin: 20px 0 10px 0;
}
.booking--wrapper .date--time--section .fix--hgt--wrap{
    height: 360px;
}

/* Developer CSS 6 feb 2020 starts here*/
#therapistBookingRequestSection, #therapistBookingRequestSectionPlusSeven,#guest-sign-up-section-1{
    display: none;
}
.selected-session-info{
    margin-left: 10%;
}
.selected-sessions .session__item {
    background-color: #31C5F4;
}
div#calendarSection select.form-control, div#therapistBookingRequestSection select.form-control {
    /* background-color: #f1f5f6  !important; */
}
div#calendarSection .selected-sessions .session__item{
    background-color: #31C5F4;
}
.booking--wrapper .booking--request--details .bq--footer a.link-color button {
    background-color: transparent !important;
    border-color: #4E4E4E !important;
}
/* Developer CSS 6 feb 2020 ends here */



/* dropdown arr */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}
.custom-select-01 {
    position: relative;
    display: flex;
    flex-direction: column;
    border-width: 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.15);
}
.custom-select__trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    font-size: 20px;
    font-weight: 300;
    color: #3b3b3b;
    height: 45px;
    line-height: 50px;
    background:transparent;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.15);
}
.custom-options {
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-top: 0;
    background: #fff;
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;
}
.custom-select-01.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}
.custom-option {
    position: relative;
    display: block;
    padding:15px 22px 15px 22px;
    font-size: 20px;
    font-weight: 300;
    line-height: 23px;
    cursor: pointer;
    transition: all 0.5s;
}
.custom-option:hover {
    cursor: pointer;
    background-color: #b2b2b2;
}
.custom-option.selected {
    color: #ffffff;
    background-color: #7fc0ee;
}




.custom-select-wrapper--new {
    position: relative;
    user-select: none;
    width: 100%;
}
.custom-select-01--new {
    position: relative;
    display: flex;
    flex-direction: column;
    border-width: 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.15);
}
.custom-select__trigger--new {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    font-size: 20px;
    font-weight: 300;
    color: #3b3b3b;
    height: 45px;
    line-height: 50px;
    background:transparent;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.15);
}
.custom-options--new {
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-top: 0;
    background: #fff;
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;
}
.custom-select-01--new.open .custom-options--new {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}
.custom-option--new {
    position: relative;
    display: block;
    padding: 15px 22px 15px 22px;
    font-size: 20px;
    font-weight: 300;
    line-height: 23px;
    cursor: pointer;
    transition: all 0.5s;
}
.custom-option--new:hover {
    cursor: pointer;
    background-color: #b2b2b2;
}
.custom-option--new.selected--new {
    color: #ffffff;
    background-color: #7fc0ee;
}

.arrow {
    position: relative;
    height: 15px;
    width: 15px;
}
.arrow::before, .arrow::after {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 0.15rem;
    height: 100%;
    transition: all 0.5s;
}
.arrow::before {
    left: -5px;
    transform: rotate(-45deg);
    background-color: #4E4E4E;
}
.arrow::after {
    left: 5px;
    transform: rotate(45deg);
    background-color: #4E4E4E;
}
.open .arrow::before {
    left: -5px;
    transform: rotate(45deg);
}
.open .arrow::after {
    left: 5px;
    transform: rotate(-45deg);
}



/* end */






@media only screen and (max-width: 599px) {
    .booking--wrapper h1 {
        margin: 0 0 30px 0;
        font-size: 22px;
    }
    .booking--wrapper .booking--request--details {
        padding: 20px 25px;
        margin-bottom: 20px;
    }
    .booking--wrapper .booking--request--details h4 {
        margin: 0 0 25px 0;
        font-size: 19px;
    }
    .booking--wrapper .booking--request--details h5 {
        font-size: 16px;
    }
    .booking--wrapper .booking--request--details p {
        font-size: 16px;
        line-height: 18px;
    }
    .booking--wrapper .booking--request--details .form-group {
        /* margin-bottom: 20px; */
    }
    .booking--wrapper .booking--request--details .bq--footer{
        margin: 0px 0;
        flex-direction: row-reverse;
    }
    .booking--wrapper .booking--request--details .bq--footer .btn  {
        font-size: 15px;
    }
    .booking--wrapper .booking--request--details .bq--footer .newLogoutBtn {
        /* margin: 15px 0 0 0; */
        order: 1;
    }
    .booking--wrapper .booking--request--details .confirm--note {
        margin: 15px 0;
    }
    .booking--wrapper .booking--request--details .confirm--note p {
        font-size: 14px;
    }
    .booking--wrapper .date--time--section .outer--box {
        padding: 30px 15px;
    }
    .booking--wrapper .date--time--section .outer--box header {
        font-size: 20px;
        margin-bottom: 18px;
    }
    .booking--wrapper .date--time--section .times.fly-status-check {
        margin: 0;
    }
    .booking--wrapper .date--time--section .times.fly-status-check li.time__item {
        width: 93px;
        margin: 0px auto 15px auto;
        font-size: 14px;
        max-height: 24px;
    }
    .booking--wrapper .date--time--section .next--btn {
        margin: 20px 0 10px 0;
    }
    .booking--wrapper .date--time--section p {
        font-size: 17px;
        margin-bottom: 30px;
    }
    .booking--wrapper .booking--request--details .select--card {
        align-items: flex-start;
        flex-direction: column;
    }
    .booking--wrapper .booking--request--details .select--card .custom-select-wrapper {
        width: 100%;
        margin: 10px 0 0 0;
    }
    .booking--wrapper .custom-header nav .custom-next{
        right: 0;
        margin-top: 0;
    }
    .booking--wrapper .custom-header nav .custom-prev {
        left: 0;
        margin-top: 0;
    }
    .booking--wrapper .custom-header h2, 
    .booking--wrapper .custom-header h3 {
        font-size: 20px;
    }
    .booking--wrapper .date--time--section .fix--hgt--wrap{
        height: auto;
    }
    .booking--wrapper .sm--mb--10{
        margin-bottom: 10px !important;
    }
}
@media  (max-device-width: 900px) and (orientation: landscape) {
    .booking--wrapper .custom-header nav .custom-prev {
        left: 75px !important;
    }
    .booking--wrapper .custom-header nav .custom-next {
        right: 80px !important;
    }
    .booking--wrapper .custom-header h2, 
    .booking--wrapper .custom-header h3 {
        font-size: 20px;
    }

}
@media  (max-device-width: 767px) and (orientation: landscape) {
    .booking--wrapper .booking--request--details .bq--footer{
        flex-wrap: wrap;
        justify-content: center;
    }
    .booking--wrapper .sm--mb--10{
        margin-bottom: 10px !important;
    }
    .booking--wrapper .custom-header nav .custom-next {
        right: 62px !important;
    }
    .booking--wrapper .booking--request--details .select--card { 
        flex-direction: column;
        align-items: flex-start;
    }
    .booking--wrapper .booking--request--details .select--card .custom-select-wrapper {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }
}

@media only screen and (min-width: 600px) and (max-width: 979px){
    .booking--wrapper .booking--request--details .bq--footer .btn  {
        font-size: 16px;
    } 
    .booking--wrapper .booking--request--details .bq--footer .newLogoutBtn {
        margin-right: 5%;
    }
    .booking--wrapper .date--time--section .times.fly-status-check {
        margin: 0;
    }
    .booking--wrapper .date--time--section .fix--hgt--wrap{
        height: auto;
    }
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    .booking--wrapper .date--time--section .times.fly-status-check li.time__item {
        width: 93px;
        margin: 0 10px 10px 0;
        font-size: 14px;
    }
    .booking--wrapper .custom-header nav .custom-prev {
        left: 50px;
    }
}