@charset "utf-8";
/* CSS Document */

/* body { font-family: 'Poppins', sans-serif; font: 10px !important; background-color: #fff !important;}
.container { padding-right: 30px !important; padding-left: 30px !important; }
.red-bg { background-image: url(../images/app-red-bg.png); background-color: #ea3939; }
.width-app { width: 500px; height: 800px; margin: auto; background-position: top; background-size: contain }
header.site-header { display: inline-block; margin-top: 22px; color: #fff; }
header.site-header a { color: #fff; }
.logo-box { margin: auto; text-align: center; margin-top: 150px; }
.btm-logo { text-align: center; margin-top: 23em; }
.btn-box { text-align: center; }
.btn-box a { border: 2px solid; color: #fff; padding: 7px 29px; text-align: center; margin: 26px 10px; display: inline-block; border-radius: 20pc; }
section.dash-board { background-color: #ea3939; color: #fff !important; display: inline-block; width: 100%; border-radius: 0px 0px 0px 95px; background-image: url(../images/app-red-bg-top.png); background-size: cover; }
.head-tittile { margin: 162px 0px 80px; }
.register-form label { width: 100%; }
.register-form small { width: 100%; display: block; }
.register-form label { width: 100%; }
.register-form small { width: 100%; display: block; }
.register-form input { border: none; }
.register-form input { border: none; width: 100%; }
.border { border: 1px solid #dee2e6!important; padding: 7px 12px; }
section.cont-section { margin-top: 50px; }
p.btm-text { margin-top: 9em; text-align: center; }
.border { padding: 7px 12px; border-radius: 4px; }
.head-tittile small { font-size: 18px; }
.otp-register input { width: 33px; padding: 9px 10px; height: 54px; margin: 0px 8px 40px; display: inline-block; }
.otp-register { text-align: center; margin: auto; }
.otp-register p { color: #b8b8b8; }
span.chng-c-n { color: #141414; font-weight: 600; }
.submite-btn { border: inherit; background-color: #ea3939; padding: 8px 26px; color: #fff; border-radius: 20pc; text-transform: uppercase; font-size: 13px; }
span.chg-c { color: #ea3939; font-weight: 600; }
.submite-btn a{color:#fff;}
span.bg-t {background-color: #ea3939;padding: 4px 6px;width: 20% !important;display: inline-block;color: #fff;border-radius: 3px;}
span.bg-t a {color: #fff;} */
/* .pending-btn{background-color: #f96a15 !important;}
.success-btn{background-color: #0e5e03 !important;}
.reject-btn{background-color: #7e827e !important;}



body { color: #666 !important; }

h2 { font-family: 'Fugaz One', cursive; color: #000; text-transform: uppercase;}

h6 { font-family: 'Fugaz One', cursive; color: #000; text-transform:uppercase; }
input { background-color: #ff7070 !important; border: none; border-radius: 8px; box-shadow: 0px 0px 7px #60606026; }
input:focus { outline: inherit; }
label.forgote-label { float: left; margin: 10px 20px; color: #fff;cursor: pointer; }
.btn-primary { padding: 10px 15px !important; border-radius: 11px !important; background-color: #fff !important; border: none !important; font-family: 'Fugaz One', cursive; color: #F00 !important; text-transform: uppercase; font-size: 16px !important; box-shadow: 0px 0px 6px #5857575c; }


.app-outer { width: 450px; height: 900px; margin: auto; background-position: top; background-size: contain; box-shadow: 0px 0px 5px #ccc !important; margin: 50px auto; border-radius: 20px; overflow: hidden; background-color: #f72626; }
.top-section { border-radius: 0px 0px 0px 42px !important; background-color: #fff; }
.bottom-section { background-color: #f72626; height: 100%; }
.top-content { padding-top: 6em; }
 .register-form input::placeholder {
 color: #fff !important;
 font-size: 18px;
}
.register-form input { width: 100%; padding: 10px 12px 10px 40px; }
.register-form input::before { font-family: "Font Awesome 5 Free"; content: "\f095"; display: inline-block; padding-right: 3px; vertical-align: middle; font-weight: 900; }
.user-icons { position: absolute; left: 12px; top: 13px; font-size: 18px; color: #fff; }
.user-box, .password-box { position: relative; width: 100%; }
.login-btn { float: left; }

.otp-box input { text-align: center; line-height: 80px; font-size: 50px; width: 15%; }
.otp-box { text-align: center; }
.otp-btn { display: block !important; margin: auto; }
.otp-btm-box {
    text-align: center;
    color: #fff;
}
.otp-btm-box a {
    color: #ffaaaa;
}
.invalid-feedback.white-msg{color:#fff !important}
.parsley-error-list {
    color: #fff !important;
    font-size: 15px;
    font-weight: bold;
    list-style-type: none;
}

.red-bg { background-image: url(../images/app-red-bg.png); background-color: #ea3939; }
.width-app { width: 500px; height: 800px; margin: auto; background-position: top; background-size: contain }
header.site-header { display: inline-block; margin-top: 22px; color: #fff; }
header.site-header a { color: #fff; }
.logo-box { margin: auto; text-align: center; margin-top: 150px; }
.btm-logo { text-align: center; margin-top: 23em; }
.btn-box a { border: 2px solid; color: #fff; padding: 7px 29px; text-align: center; margin: 26px 10px; display: inline-block; border-radius: 20pc; }


.white{background:white; overflow:hidden;}
.width400{ width: 400px!important; margin:auto;}
.bottom-section { background-color: #f72626; height: 100%; border-radius: 0px 42px 0px 0px !important; }
.app-outer { width: 100%!important; border-radius: 0px!important; margin:auto!important; }
header.site-header {width:100%!important;}



.av-time svg {
    font-size: 29px;
    color: #ffff;
    margin-right: 13px;
}
.av-time {
    font-size: 22px;
    color: #fff;
} */


/* CSS Document */

html, body, .grey_bg { height: 100%; }
.center-screen { width: 100%; padding: 0px 10%; margin: auto; box-shadow: 0px 1px 8px #d4d2d2; }
body { font-family: 'Roboto', sans-serif !important; font-size: 16px !important; margin: 0px }
h2 { font-size: 25px; }
h3 { font-size: 30px; }
h4 { font-size: 25px; margin-bottom: 15px; }
h5 { font-size: 20px; }
a { text-decoration: none !important; }
.clearfix::after { display: block; clear: both; content: ""; }
.center { text-align: center !important; }
.mt4 { margin-top: 4px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }
.mt75 { margin-top: 75px; }
.mt100 { margin-top: 100px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb50 { margin-bottom: 50px; }
.mb75 { margin-bottom: 75px; }
.mb100 { margin-bottom: 100px; }
.m0 { margin: 0px !important }
.my10 { margin: 10px 0px; }
.p15 { padding: 15px; }
.pb10 { padding-bottom: 10px !important; }
.pb20 { padding-bottom: 20px !important; }
.fad-text { color: #a098b5; }
::placeholder {
color: #CCC;
font-size:16px !important;
}
button { cursor: pointer; }
.fw300 { font-weight: 300; }
.app_outer_box { display: table; color: #fff !important; }
.grey_bg { background-color: #F6F6F6 !important; }
.blue_bg { background-color: #58419C !important; }
.h-100 { height: 100%; }
.w-100 { width: 100%; }
.app_top_section{ padding: 0px 25px; }
.app_top_section {background-image: url(https://tokens.bytelabz.com/public/images/Dashboard-bg.jpg);}
.weight_box, .grey_content { background-color: #fff; color: #363636; height: 100%; padding: 30px 30px; }
.redius_top { border-radius: 20px 20px 0px 0px; }
.redius_btm { border-radius: 0px 0px 0px 0px; }
.grey_bg .app_content { color: #363636; }
.btn-full { background: #FFC785; padding: 14px 14px; display: block; text-align: center; color: #fff; text-decoration: none; font-size: 20px; width: 39%; border: none; box-shadow: 0px 6px 16px -1px #d9d6d6; float: right;}
.right-end svg { width: 30px !important; }
.btn-danger { padding: 0px !important; background: none !important; border: none !important; }
.left-start { float: left; }
.right-side {
    display: flex;
    align-items: center;
    gap: 10px;
}
.right-side span {
    text-wrap: nowrap;
}
/*------------------------------------
app-head
------------------------------------*/
.time-head { font-size: 14px; }
.right-end { float: right; }
.app_top_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%; padding: 0px 0px;
    /*display: inline-block;*/ }
.right-end { display: flex; }
.right-end form { margin-right: 10px !important; }
.top-profile-icons {
    display: flex;
    gap: 10px;
}

/*p.cancel_slot_p {
      position: absolute;
    z-index: 11;
    background-color: #FFC785;
    padding: 5px 11px;
    bottom: -45px;
    right: 0;
    width: 100%;
}*/

.radiobtn.time_box.booked_tm_box.booked_pending, .radiobtn.time_box.booked_tm_box.booked_pending:hover {
    background-color: #58419C;
}
/*------------------------------------
Login-page
------------------------------------*/

.form_feild_box input { height: 50px; width: 94%; background-color: white !important; border: none; padding: 0px 3%; margin-bottom: 9px; border-radius: 12px; }
button.submit-button { background: #664dad; display: block; width: 100%; height: 51px; border: none; margin-top: 15px; border-radius: 12px; color: #fff; font-size: 18px; }
span.psw { float: right; margin-bottom: 20px; }
span.input_icons { width: 100%; position: relative; }
.icons-feild { position: relative; }
span.input_icons::before { position: absolute; right: 13px; top: 15px; color: #dad8d8; }
.form_feild_box .psw { color: white !important; }
.reg_here, .login_here { color: white !important; }
.login_box { display: flex; align-items: center; justify-content: center; }
.login_outer-box { width: 33%; background-color: #3b2872; border-radius: 23px; padding: 20px; }
@media only screen and (max-width: 999px) {
.login_outer-box { width: 60%; }
}
 @media only screen and (max-width: 499px) {
.login_outer-box { width: 80%; }
}
/*------------------------------------
otp-registration
------------------------------------*/
button.otp_again_btn a { margin-left: 9px !important; color: #000; }
button.otp_again_btn { color: #000; background: none; border: none; font-size: 18px; text-transform: uppercase; }
.otp-box input { background-color: #EAECEF; border: none; width: 27px; height: 46px; border-radius: 9px; padding: 10px; margin-right: 4px; }
/*------------------------------------
Search-feild-css
------------------------------------*/
.search_box input { height: 55px; width: 100%; background-color: #fff; border: none; padding: 0px 20px; border-radius: 5px; box-shadow: 1px 12px 15px #e8e8e8; }
.search_box form { display: flex; flex-wrap: nowrap; position: relative; }
.search_box button { background-color: #FFC785; border: none; padding: 17.5px; color: #fff; font-size: 20px; border-radius: 5px; position: absolute; right: 0px; }
/*------------------------------------
Dashboard-css
------------------------------------*/


.service_box:first-child { margin-left: 0px; }
.service_box { background-color: #58419c; color: #fff; text-align: center; border-radius: 7px; margin: 0 0.8rem 1.5rem; padding: 17px; box-shadow: 0px 5px 6px #29204440; transition: 0.9s; }
.service_box:first-child { margin-left: 0px; }
.service_box:last-child { margin-right: 0px; }
.sr_tittile { font-size: 14px; }
span.sr_price { background: #694fb3; padding: 3px 18px; font-size: 14px; border-radius: 4px; }
.app_row {display: grid; grid-template-columns: 20% 20% 20% 20% 20%;}
.service_box a { color: #fff; }
.prf_cont p { margin: 0px !important; font-size: 14px; }
.prf_cont h5 { margin-bottom: 10px !important; }
.time_box img { width: 20px; margin: 0px 0px 5px 0px; }
.no_slot_img { width: 100%; }
.title_main_div { padding-top: 17px; }
h3#change-click {
    text-transform: uppercase;
}
img.change-image {
    margin-bottom: 15px;
}
/*------------------------------------
Profile-css
------------------------------------*/
.prf_details .left-start { display: flex; flex-direction: row; }
.prf_cont { margin-left: 15px !important; display: table; }
.prf_cont h5 { margin: 0px; }
.prf_details { display: flex; margin-bottom: 5px;align-items: center;}
.service_logo {width: 18%;}
.service_logo img { width: 100%;}
.select-time { margin: 0px; font-size: 13px; }
.time_box { display: flex; background-color: #fff; /*box-shadow: 0px 3px 5px #e8e8e8;*/ margin: 9px 7px !important; transition: 0.9s; }
.time_box:hover { box-shadow: 0px 9px 11px #d6d6d6 !important; background-color: #58419c; }
.select-time:hover { color: #fff; }
.time_box:first-child { margin-left: 0px; }
.time_box:last-child { margin-right: 0px; }
.select_tm_box { background-color: #58419c; box-shadow: 0px 9px 11px #d6d6d6 !important; }
.select_tm_box .select-time { color: #fff; }
.booked_tm_box { background-color: #f1f1f1; }
.owl-stage-outer { width: 341px; }
.top-carousel .owl-item .active-carousel { background: #58419c !important; }
.top-carousel .item { background: #fff !important; border-radius: 6px; text-align: center; box-shadow: 0px 4px 5px #e2e2e2; margin: 9px 4px; }
span.cro_box_cont h3 { margin: 0px !important; color: #000; font-size: 16px; margin-bottom: 8px !important; }
span.cro_box_cont { padding: 17px 9px 10px !important; display: block; }
.owl-dots { display: none !important; }
.top-carousel .date-tab-li .active .cro_box_cont h3 { color: #fff; }
.top-carousel .date-tab-li .active .cro_box_cont { background: #58419c !important; }
.top-carousel .date-tab-li .cro_box_cont { background: #fff !important; text-align: center; box-shadow: 0px 4px 5px #e2e2e2; margin: 9px 7px; }
.date-tab-ul {display: grid !important; grid-template-columns: 20% 20% 20% 20% 20%;}
span.cro_box_cont { padding: 17px 9px 10px !important; display: block; }
.owl-dots { display: none !important; }
.top-carousel .columns { padding: 0px 8px !important; width: 100%; }
.active-carousel .cro_box_cont h3 { color: #fff; }
.date-tab-ul { list-style-type: none; }


.booking_cancel { font-size: 13px !important; text-transform: uppercase; }

h3.sel-active, h3.sel- {
    font-size: 28px !important;
    color: #ffc785 !important;
}

/*--------------22-09-21--------------*/

.profile-edit-box input, .change-password-box input { width: 100%; }
.profile-edit-box h2, .change-password-box h3 { font-size: 22px; margin-bottom: 20px; }
.prof-icon-cls svg, a.home-icon-cls svg { width: 27px !important; }
/*------------------------------------
Admin-Dashboard
------------------------------------*/
span.no_text { padding: 1rem 1rem; background-color: #F7F7F7; font-size: 25px; border-radius: 5px; border: 1px solid #eaeaea; font-weight: 600; margin-right: 10px; }
.app_cont p { margin: 0px 0px 8px !important; font-weight: 600; font-size: 18px; }
.app_cont img { margin-right: 5px; float: left }
span.app-time { font-size: 13px; float: left; }
.app_cont { margin-right: 25px; }
span.app_icons img { position: relative; bottom: -30px; right: -20px; }
.app_fw_box { background-color: white; padding: 11px; border-radius: 6px; display: flex; box-shadow: 0px 8px 8px #e2e2e2; }
.app_row input[type="radio"] { opacity: 0; position: fixed; width: 0; }
.app_row label { display: inline-block; background-color: #ddd; padding: 10px 20px; font-family: sans-serif, Arial; font-size: 16px; border: 2px solid #444; border-radius: 4px; }
.radiobtn { position: relative; display: block; text-align: center;}
.radiobtn label { display: block; background: none; border-radius: 0px; padding: 13px 20px 13px; border: none; margin-bottom: 0px; cursor: pointer; font-family: Arial, Helvetica, sans-serif; box-shadow: 0px 1px 9px #cdcdcd;}
.booking-tabContent input[type="radio"] { display: none; position: absolute; width: 100%; appearance: none; }
.booking-tabContent input[type="radio"]:checked + label { background: #01a7e1; color: #fff; }

.radiobtn.time_box.booked_tm_box.booked_accepted { background-color: #FFC785; }
.booking_cancel { cursor: pointer; }
.radiobtn.time_box.booked_tm_box:hover { background-color: #f1f1f1; color: black !important; }
/*------------------------------------
*Time-box
------------------------------------*/
.app_row input[type="radio"]:checked + label { height: 100%; color: #fff; background-color: #58419c; border-color: #58419c; }
.cancel_slot_p { min-height: 20px !important; }
.no_slot_img { margin-bottom: 30px; }
.radiobtn.time_box.booked_tm_box.booked_pending { color: white !important; }
/*------------------------------------
*Booked-box
------------------------------------*/
.booked_tm_box .select-time:hover { color: #000; }
.booked_tm_box:hover { box-shadow: none !important; }
.time_box:hover img { filter: invert(1) !important; }
.booked_tm_box:hover img { filter: invert(0) !important; }
.time_box:hover p { color: white !important; }
.booked_tm_box label { cursor: auto; }
.booked_tm_box:hover p, .booked_tm_box p { color: #979797 !important; }
.booking_cancel, .booking_cancel p, .booking_cancel:hover p { color: white !important; }
/*------------------------------------
*Message
------------------------------------*/

.alert-danger, .alert-success { color: #fff; background-color: #ffc785; border-color: #ffc785; border-radius: 5px; }



@media only screen and (max-width: 767px) {
span.cro_box_cont img {width: 29px;}
.right-side { display: block;float: right;} 
.app_top_head:nth-child(2) { display: block;}
.right-side img { width: 13%;}   
.right-side { border: 2px solid #785acf; padding: 4px 2px 4px 15px;  margin-top: 24px;}  
.btn-full {width: 100%;}
/*.service_name_div img { width: 70% !important;}*/
.top-profile-icons a img { width: 28px !important;}   
.title_main_div { padding: 10px 0px;}
.center-screen {padding: 0px 5%; } 
.top-profile-icons a {margin-left: 10px;}    
}


@media only screen and (max-width: 540px) {
.radiobtn label { padding: 11px 10px 13px;}
 h3.sel-active, h3.sel- {font-size: 22px !important; }
 .app_row {grid-template-columns: 33.5% 33.5% 33.5%;} 
    
}

@media only screen and (max-width: 495px) {
.prf_details { display: block;}  
.prf_cont {margin: 6px 0px 0px !important;}
.service_logo { width: 26%;}    
}
@media only screen and (max-width: 415px) {
   /* p.cancel_slot_p {
    bottom: -46px;
    right: 0px;
}*/
.radiobtn label {padding: 10px 10px 10px;}   
.time_box {margin: 5px 5px !important}
.top-carousel .date-tab-li .cro_box_cont {margin: 9px 5px;}    
h3.sel-active, h3.sel- {font-size: 20px !important;}  
span.cro_box_cont img {width: 24px; margin-bottom: 6px;}  
span.cro_box_cont h3 { margin-bottom: 0px !important;  font-size: 14px; }  
.time_box img {display: block; margin: auto; margin-bottom: 5px;}
 .right-side span {font-size: 14px;}
}