@font-face{font-family:'LatoRegular';src:url('appFonts/Lato/Lato-Regular.ttf');}
*{
margin:0;
padding:0;
box-sizing: border-box;
}
html{min-height: 100vh;overflow-x: hidden;}
html,body{position:relative;width: 100%;min-height: 100vh;margin:0 auto;background-color:#F9F9F9/*#EFEFEF*/;overflow-x: hidden;}

.main-page-container{
position: relative;
width: 570px;
min-height: 100vh;
margin: 0 auto;
padding: 0px 0px 50px 0px;
background: #fff;
}
section.header_section{
position: relative;
width: 100%;
height: auto;
background: #272727;
}
header.header{
position: relative;
width: 100%;
height: auto;
padding: 0 0 10px 0;
}
.header_logo_content{
position: relative;
top: 0;
width: 80px;
}
img.header_logo{
width: 100%;
height: 100%;
object-fit: contain;
}
.header_backimg_content{
position: absolute;
width: 470px;
height: 141px;
overflow: hidden;
left: 100px;
top:0px;
}
.header_backimg_content img{
width: 100%;
height: auto;
}
.header_branch_content {
position: relative;
margin-top: 5px;
}
.branch_content_name{
position: relative;
display: flex;
display: -webkit-flex;
margin-top: 20px;
margin-bottom: 5px;
align-items: center;
}
.dashboard_branch_header{
display: flex;
display: -webkit-flex;
text-decoration: none;
}
img.down_right_arrow{
transform:rotate(90deg);
margin-left: 10px;
}
img.backIcon_img{
transform: rotate(180deg);
margin-left: 10px;
}
.branch_content_name h3{
font-family: 'LatoRegular';
margin-left: 10px;
color: #fff;
font-size: 1.2rem;
}
.branch_content_address{
position: relative;
padding: 0 0 0 10px;
}
.branch_content_address p{
font-family: 'LatoRegular';
color: #a4abaf;
}
.branch_content_phone{
position: relative;
margin: 10px 0 0 0;
padding: 0 0 0 10px;
}
.branch_content_phone a{
text-decoration: none;
color:#a4abaf;
font-family: 'LatoRegular';
}
section.main-page-content{
position: relative;
width: 100%;
height: auto;
margin-top: 40px;
padding: 0 10px 0 10px;
}
/*------Branches pages map------*/
.branches_container{
position: relative;
width: 100%;
min-height: 100%;
}
.branches_content{
position: relative;
width: 100%;
height: auto;
}
.branch_box{
position: relative;
width: 100%;
height: auto;
margin: 10px 0 10px 0;
}
.branch_address{
position: relative;
margin: 10px 0 10px 0;
}
.branch_address a{
display: flex;
display: -webkit-flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
}
.branch__name{
color: #222222;
font-family: 'LatoRegular';
font-size: 17px;
}
.branch_address_name{
margin: 5px 0 5px 0;
color: #667070;
font-family: 'LatoRegular';
font-size: 1.1rem;
}
.branch_map{
position: relative;
width: 100%;
overflow: hidden;
}

.main-page-link_lists{
position: relative;
margin: 20px 0 20px 0;
}
.main-page-link_lists a{
display: flex;
display: -webkit-flex;
text-decoration: none;
color: #040607;
font-family: 'LatoRegular';
font-size: 18px;
justify-content: space-between;
align-items: center;
}
.link_right_text{
display: flex;
display: -webkit-flex;
align-items: center;
}
span.link_right_icon_content{
position: relative;
width: 45px;
height: 45px;
margin-right: 10px;
border-radius: 50%;
background-color: #e0e6e8;
}

.workers_lists{
position: relative;
width: 100%;
height: auto;
}
.worker_box_content{
position: relative;
margin: 15px 0 30px 0;
}
.worker_box_top{
position: relative;
display: flex;
display: -webkit-flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.worker_info{
display: flex;
display: -webkit-flex;
align-items: center;
}
.worker_img_content{
width: 60px;
height: 60px;
}
img.worker_avatar{
width: 100%;
height: 100%;
border-radius: 50%;
}
.worker_name{
position: relative;
margin-left:10px;
}
.worker_name p{
color: #0c1519;
font-family: 'LatoRegular';
font-size: 17px;
}
.worker_box_bottom{
position: relative;
width: 100%;
margin:13px 0 13px 0;
}
.appointm_message{
margin: 0 0 5px 0;
}
.appointm_message p{
color: #0c1519;
font-family: 'LatoRegular';
font-size: 16px;
}
.worker_timeslots_box{
display: flex;
display: -webkit-flex;
}
.worker_timeslots_box .worker_timeslot{
margin: 0 5px 0 5px;
background: #eceff1;
width: 110px;
text-align: center;
height: 35px;
line-height: 35px;
border-radius: 18px;
cursor: pointer;
}
span.timeslot_value{
font-family: 'LatoRegular';
font-size: 16px;
}

/*---Calendar Select time----*/
.date-input{
padding:10px;
font-size: 1rem;
border-radius: 5px;
border: 1px solid #eee;
}

.datepicker-container{
position: relative;
height: auto;
}
.datepicker{
position: relative;
height: auto;
width: 100%;
top:100%;
z-index: 100;
margin-top:2px;
background-color: #ffffff;
padding: 10px;
border-radius: 5px;
box-shadow: 3px 1px 5px 3px #d3d8da;
-webkit-box-shadow: 3px 1px 5px 3px #d3d8da;
}

.datepicker button{
cursor:pointer;
border:none;
border-radius:3px;
background:transparent;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
transition: 0.3s;
 }

.days, .dates{
display:grid;
grid-template-columns:repeat(7, 62px);
gap:10px;
margin-block: 10px;
}

.days span{
 font-size:14px;
 font-weight:600;
 text-transform: uppercase;
 text-align: center;
}

.dates button{
color: slategray;
aspect-ratio: 1;
}
.dates button:disabled{
opacity:0.5;
pointer-events:none;
user-select:none;
}
.dates button:hover{
background: rgb(119, 136, 153, 0.1);
}

.dates button.today{
background-color: rgb(147, 112, 216, 0.2);
color:mediumpurple;
}

.dates button.selected{
background: rgb(148, 109, 224);
color:#ffffff;
}

.datepicker-header{
display:flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}

.datepicker-header select, .datepicker-header input{
font-size:14px;
border:1px solid #eee;
}

.datepicker-header input{
max-width: 64px;
}

.datepicker-header button{
color:slategray;
}

.datepicker-header button:hover{
color:mediumpurple;
}

.datepicker-footer{
display:flex;
justify-content: flex-end;
gap:10px;
padding-top: 10px;
border-top: 1px solid #eee;
}

.datepicker-footer button{
background: rgb(119, 136, 153, 0.1);
padding: 3px 10px;
}

.datepicker-footer button.apply{
background:mediumpurple;
color:#ffffff;
}

/*------Services lists-----*/
.serviceCateg_nav_container{
overflow-x: auto;
white-space: nowrap;
}
.serviceNav_content{
display: flex;
display: -webkit-flex;
-webkit-overflow-scrolling:touch;
}
.serviceNav_box{
margin: 10px 10px 10px 10px;
padding: 10px 5px 10px 5px;
background-color: #eceae6;
border-radius: 15px;
}
.serviceNav_box.active{
background-color: #ffcb00;
}

a.service_nav_link{
margin:0 10px;
text-decoration: none;
color: #222222;
font-family: 'LatoRegular';
font-size: 1.1rem;
}

.serviceNav_content::-webkit-scrollbar{
display: none;
}

/*.serviceNav_content.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
overflow-x: auto;
white-space: nowrap;
}*/

.service_list_container{
position: relative;
width: 100%;
height: auto;
}
.service_list_content{
position: relative;
width: 100%;
height: auto;
}
.categ_list{
position: relative;
margin: 15px 0 30px 0;
border-bottom: 1px solid #b6c2cd;
}
.maincateg_header h3{
font-family: 'LatoRegular';
font-size: 1.3rem;
}
.service_categ_lists{
margin:20px 0 20px 0;
cursor: pointer;
}
.service_top_box{
display: flex;
display: -webkit-flex;
justify-content: space-between;
align-items: center;
}
.service_categ_name{
margin:5px 0 5px 0;
}
.service_categ_name p{
font-family: 'LatoRegular';
font-size: 1.1rem;
}
.service_categ_price{
margin:5px 0 5px 0;
}
.service_categ_price p{
font-family: 'LatoRegular';
font-weight: 600;
color: #000;
}
.service-popup-container{
position: relative;
width: 100%;
height: auto;
}
.service-popup {
position: fixed;
left:50%;
transform:translate(-50%);
bottom:0px;
width: 100%;
max-width: 570px;
background-color: #ffffff;
padding: 15px;
border: 1px solid transparent;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.service-popup p {
margin: 0;
font-size: 14px;
}
.chooseButton_content{
position: relative;
width: 100%;
background-color: #ffcb00;
text-align: center;
margin: 15px 0 0 0;
border-radius: 7px;
}
.chooseButton_content a{
display: block;
text-decoration: none;
color: #222;
font-size: 17px;
font-family: 'LatoRegular';
padding:10px;
}
.alllocation_overlay{
position: fixed;
display:none;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(3, 4, 7, 0.89);
z-index: 99999999;
overflow: hidden;
}
.alllocation_overlay.active{
display: block;
}
.allLocation_popUp_contaner{
position: fixed;
display: none;
top: 42%;
left: 50%;
width: 380px;
height: auto;
padding: 0 20px 20px 20px;
background: #ffffff;
border-radius: 6px;
-webkit-border-radius: 6px;
transform: translate(-50%, -50%) scale(0.9);
opacity: 1;
z-index: 999999;
}
.allLocation_popUp_content{
position: relative;
padding: 20px 0 20px 0;
}
.allLocation_closePopUpBtn{
position: absolute;
right: 8px;
top: 6px;
font-family: 'LatoRegular';
font-size: 16px;
border-radius: 50%;
-webkit-border-radius: 50%;
background: #d3d5d6;
height: 25px;
width: 25px;
text-align: center;
line-height: 24px;
cursor: pointer;
outline: none;
}

.allLocation_popUp_contaner.activePopUp{
display: block;
animation: bounceIn 0.6s ease forwards;
animation-fill-mode: forwards;
}
@keyframes bounceIn {
0% {
    transform: translate(-50%, -50%) scale(0.9);

    opacity: 0;
}
70% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
}
100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
}
.allLocation_branch__name{
text-align: center;
margin: 20px 0 0 0;
}
.allLocation_branch__name h2{
font-family: 'LatoRegular';
font-size: 22px;
}
.allLocation_branch__address{
text-align: center;
margin: 10px 0 0 0;
}
.allLocation_branch__address p{
font-family: 'LatoRegular';
font-size: 17px;
color: #3a4446;
}
.allLocation__Branch{
border: 1px solid #fac907;
border-radius: 10px;
text-align: center;
margin: 20px 0 10px 0;
}
.allLocation__Branch a{
display: block;
text-decoration: none;
color: #363e42;
font-size: 17px;
padding: 10px 0 10px 0;
font-family: 'LatoRegular';
}
.allLocation__locations{
border: 1px solid #fac907;
border-radius: 10px;
text-align: center;
margin: 10px 0 10px 0;
}
.allLocation__locations a{
display: block;
text-decoration: none;
color: #363e42;
font-size: 17px;
padding: 10px 0 10px 0;
font-family: 'LatoRegular';
}

.branch__contact_container{
position: relative;
margin: 20px 0 0 0;
}
.branch_contact_header p{
font-size: 18px;
font-family: 'LatoRegular';
color: #363e42;
}
.branch_contact_tel{
margin: 10px 0 0 0;
}
.branch_contact_tel a{
text-decoration: none;
color:#222222;
font-weight: 500;
}

.branchLocation_address_content{
position: relative;
margin: 30px 0 10px 0;
}
.branch_location h2{
font-size: 23px;
font-family: 'LatoRegular';
font-weight: 600;
}
.branch_location{
position: relative;
margin: 15px 0 15px 0;
}
.branch_location p{
font-size: 18px;
font-family: 'LatoRegular';
}
.branch_comment_container{
position: relative;
margin: 20px 0 20px 0;
}
.comment_header h2{
font-size: 20px;
font-weight: 600;
font-family: 'LatoRegular';
}
.bookVisit_button_container{
position: fixed;
left: 50%;
transform: translate(-50%);
bottom: 8px;
width: 90%;
max-width: 540px;
background-color:#ffcb00;
padding:1px;
border: 1px solid transparent;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.bookVisit_button_content{
text-align: center;
}
.bookVisit_button_content a{
display: block;
text-decoration: none;
color: #222;
padding: 15px 0 15px 0;
font-family: 'LatoRegular';
font-size: 17px;
}

/*-----Booking information----*/
.personl_info_container{
position: relative;
width: 100%;
}
.personal_info_content{
position: relative;
}
.personal_info_header h2{
font-family: 'LatoRegular';
font-size:21px;
font-weight: 600;
}
.label-input-box{
position: relative;
margin: 10px 0 30px 0;
}
.label-box label{
font-family: 'LatoRegular';
font-size: 16px;
margin: 0 0 20px 0;
}
.input-box input{
width: 100%;
padding: 5px;
height: 45px;
border-radius: 15px;
-webkit-border-radius: 15px;
border: 1px solid #d8dadb;
}
.booking_total_content{
display: flex;
display: -webkit-flex;
justify-content: space-between;
margin: 20px 0 30px 0;
}
.bookSbt_btn_content{
position: relative;
width: 100%;
}
input.bookSbt_btn{
width: 100%;
background-color:#ffcb00;
color: #222222;
font-family: 'LatoRegular';
border:1px solid transparent;
border-radius: 12px;
-webkit-border-radius:12px;
font-size: 17px;
height: 42px;
cursor: pointer;
}
@media screen and (min-width:320px) and (max-width:569px){
.main-page-container{
width: 100%;
}
.days, .dates {
display: grid;
grid-template-columns: repeat(7, 41px);
gap: 10px;
}
.service-popup{
width: 90%;
max-width: 90%;
left: 5%;
transform: none;
bottom: 10px;
}
}

.footer__container{
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
}
.footer_content{
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
padding: 9px 0 9px 0;
background-color: #272727;
}
.footer_content h1{
font-size: 20px;
font-family: 'LatoRegular';
text-align: center;
}
img.footer_logo{
width: 60px;
}