@import url('https:fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;400;500;700;800;900&display=swap');
:root {
--dark-grey: #383b49;
--black:#333;
--white: #ffffff;
--soft-purple: #eaedf9;
--light-green: #7cb342;
--red: #dc3545;
--soft-green:#e4f9d3;    
--dark-green:#2a836c;   
--light-grey:#eeeeee; 
--light-text-grey:rgba(93, 96, 108, 0.8); 
--soft-grey:#f8f7f7; 
--warning:#ff6f00;
--yellow:#e9b63a;
--grey:#969cb9;
--purple:#7c43fd;
--light-purple:#baa8e7;
--soft-purple:#f6f4ff;
--dim-purple:#f5f2ff;
--light-pink:#c560c5;
--table-td-hover:rgba(124, 67, 253, 0.05);
/* Transition Speed */
--aniSpeed: 0.3s;   
}
.success{color:var(--light-green)}
.ilde{color:var(--yellow)}
.inactive{color:var(--red)}

.text-primary{color:var(--dark-grey)!important}
.text-secondary{color:var(--purple)!important}

.text-purple{
color:var(--purple)!important
}
.text-grey{
color:var(--grey)!important;
}
input:focus{    
border:none!important;
outline:none
}
small{
font-size:13px;
color:var(--dark-grey);
opacity: 0.8;
line-height:1.3em;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small{
color:var(--light-text-grey);
display:block;
font-weight:normal;
margin-top:3px;
line-height:1.4em;
}
h1, h2, h3, h4, h5, h6{
color:var(--dark-grey);
}
h5{
font-size:18px;
}
h6{
font-size:15px;
}
a:hover,
a{
text-decoration:none;
-webkit-transition: all var(--aniSpeed) ease;
-moz-transition: all var(--aniSpeed) ease;
-ms-transition: all var(--aniSpeed) ease;
-o-transition: all var(--aniSpeed) ease;
transition: all var(--aniSpeed) ease;
}
/*============Status===========*/
.status{
background:var()
}
/*============Button===========*/
.btn i{
font-size:12px;
margin-right:5px;
font-weight:normal
}
.btn{
border-radius:2px;
border:none;
font-size:14px;
font-weight:500;
padding:10px 20px;
cursor: pointer;
}
.btn.btn-sm{
padding:6px 12px;
font-size:12px;
}
.btn.btn-sm i{
font-size:11px;
margin-right:3px;
}
.btn:hover{
opacity: 0.9;    
}
.btn.btn-primary{
background:var(--light-green);
}
.btn.btn-secondary{
background:var(--yellow);
}
.btn.btn-primary.purple{
background:var(--purple);
}
.btn.btn-default{
background:var(--light-grey);  
box-shadow:0px 0px 3px rgba(0,0,0,0.08);      
color:var(--grey);
}
.btn.btn-simple{
color:var(--dark-grey);
}
.btn.btn-lg{
font-size:18px;
padding:12px 30px;
border-radius:4px;
}
.btn.btn-simple{
color:var(--grey);    
}
.btn.btn-simple.white{
color:var(--white);
}
.btn.btn-default.white{
background:var(--white);
}
.btn.btn-default.white:hover{
border-color:var(--purple)!important;
color:var(--purple)
}
body{
font-family:'Roboto', sans-serif;
}
img{
max-width:100%;
}
.form-control::placeholder{
opacity: 0.2;
}
.form-group{
position: relative;
margin-bottom:30px;
}
.form-check{
margin-bottom:15px;
}
.form-check-input:focus{
box-shadow:0 0 0 .25rem rgba(127,67,253,.25)
}
.form-check label.form-check-label{
font-size:15px;
color:var(--dark-grey);
}
.form-check.form-switch label.form-check-label{
cursor: pointer;
}
.form-check label.form-check-label strong{
font-weight:500;
display:block;
}
.form-check.checkbox label.form-check-label strong{    
display:unset;
}
.form-check label.form-check-label.small{
font-size:12px;
color:var(--dark-grey);
opacity: 0.8;
}
.form-check label.form-check-label.small{
font-weight:300;
}
.form-check label.form-check-label.small strong{
font-weight:500;
}
.form-select ul.select-dropdown li input.form-check-input{
margin-right:5px;
}
.form-check.checkbox .form-check-input,
.form-select ul.select-dropdown li input.form-check-input{
border-color:var(--light-purple);
background:var(--soft-purple);
border-radius:2px;
}
.form-check.checkbox .form-check-input:focus,
.form-select ul.select-dropdown li input.form-check-input:focus{
border:1px solid var(--purple)!important;
background:var(--soft-purple);
}
.form-check.checkbox .form-check-input:checked,
.form-select ul.select-dropdown li input.form-check-input:checked{
border-radius:2px;
border-color:var(--purple);
background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") var(--purple);
}
.form-check.radio .form-check-input{
border-color:var(--light-purple);
background:var(--soft-purple);
border-radius:100%;
width:1.5em;
height:1.5em;
border-width:2px;
margin-right:8px;
position: relative;
top:-3px;
cursor: pointer;
}
.form-check.radio .form-check-input:focus{
border:1px solid var(--purple)!important;
background:var(--soft-purple);
}
.form-check.radio .form-check-input:checked{
border-color:var(--purple)
}
.form-check.radio .form-check-input:checked[type="radio"]{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%237c43fd'/%3e%3c/svg%3e");
}
.form-group .form-control{
height:40px;
border:none;
border-bottom:none!important;
border-radius:0;
padding:0;
box-shadow:none;
font-size:17px;
font-weight:400;
color:var(--dark-grey);
box-shadow: inset 0px -1px 0px 0px var(--light-grey);
}
.form-group textarea.form-control{
height:auto;
font-size:17px;
font-weight:normal;
resize:none;
max-height:250px;
padding:20px 0;
color:var(--dark-grey)
}
.form-control:focus,
.form-control:focus-visible{
border-color:var(--purple)!important;
box-shadow: inset 0px -2px 0px 0px var(--purple);
}
.form-group .label{
font-size: 12px;    
background: var(--white);
margin: 0;
position: absolute;
line-height: normal;
top: -10px;    
color:var(--dark-grey);
opacity: 0.5;    
z-index: 9;
left:0;
}

.form-group label span{
color:var(--red)
}

.form-select{
border:none;
padding:0;
position: relative;
}
.form-select select{
position: absolute;
top:0;
left:0;
opacity: 0;
pointer-events: none;;
}
.form-select input[type="text"]{
background:none;
cursor: pointer;
}
.form-select span.caret{
display:none;
}
.form-select ul.select-dropdown{
background:var(--white);
list-style:none;
box-shadow: 0px 1px 5px rgba(0,0,0,0.15);    
padding:0;
max-height:200px!important;
overflow-y:scroll ;
z-index: 99;
top:50%!important;
transform: translateY(-50%);
}
.form-select ul.select-dropdown li{
display:block;
font-size:14px;
color:var(--light-text-grey);
padding:12px;
text-align: left;
cursor:pointer;    
}
.form-select ul.select-dropdown li:hover{
background:var(--soft-purple);
color:var(--dark-grey)
}
.form-check.form-switch input.form-check-input{
border-radius:50px;
width:36px;
height:18px;
margin-right:10px;
cursor: pointer;
border:none;
box-shadow: 0px 1px 11px rgba(0,0,0,0.25);
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e")
}
.form-check.form-switch input.form-check-input:focus{
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}
.form-check.form-switch input:checked{
background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") no-repeat var(--purple);
background-position: right center;
border-color: var(--purple);
}
.form-check.form-switch input.form-check-input:checked:focus{
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-control::placeholder{
opacity: 0.4;
}
.input-group .form-control{    
font-size:14px;
box-shadow:none        
}
.input-group .form-control.border:focus,
.input-group .form-control.border:focus-visible{
border:1px solid var(--purple)!important ;
}

/* =============Slide Panel=========== */

.slidePanel .panel-dialog{
position: fixed;
right:0;    
background:var(--white);
height:100vh;    
margin:0;
max-width:none;
max-width:1280px;
pointer-events: initial;
width:calc(100% - 230px);
}

.slidePanel .panel-dialog.small-dialog{
max-width:400px
}

.panelTopPart{
position: fixed;
width:100%;
left:0;
top:0;
}

.slidePanel .panel-dialog{
display: flex;    
}

.slidePanel .close-panel{
min-height:55px;
background:var(--dark-grey);
display:flex;
align-items: center;
padding-left:24px;
padding-right:24px;  
}
.slidePanel .close-panel .btn{    
font-weight:300;
}

.slidePanel.fade .panel-dialog{
transform: translate(100%, 0);
}
.slidePanel.show .panel-dialog{
transform: none;
}
.slidePanel .panel-title{
font-size:18px;
color:var(--dark-grey);
padding: 20px 24px;    
}

.slidePanel .close-panel .panel-title{
font-size:16px;
}

.slidePanel .panelBody{
padding:0 24px;
}

.slidePanel .panel-content{
display: flex;
flex-direction: column;
}
.slidePanel .panel-content.modal-content{
border:none;
border-radius:0;
flex: 1 1 auto;
}
.slidePanel .panel-header{
/* border-bottom:1px solid var(--light-grey); */
box-shadow:0px 0px 5px rgba(0,0,0,0.15);
position: relative;
z-index: 99;
}

body.settingsPage{
background:var(--white)!important;
}

/*==================================================fj==================================================================*/
.fullsec_fj {
width: 100%;
float: left;
background-image: url(../images/medium.png);
background-size: cover;
background-repeat: no-repeat;
padding: 38px;
}
.fjlogo{
margin: 0 auto;
max-width: 180px;

}

.secteitle {
padding: 35px;
float: left;
width: 100%;
}
.secteitle h3 {
font-size: 20px;
letter-spacing: normal;
font-weight: bold;
color: #000;
}
.secteitle ul li:hover {
background: #ade9d582;
transition: background-color 0.5s ease;
}
.carryLi {
display: flex;
align-items: center;
}
.carryLi .contentCarry{
padding-left: 10px;
}
.carryLi .contentCarry h4 {
margin-bottom: 0px;
color: #18a7f7;
font-size: 20px;
font-weight: 700;
}
.carryLi .contentCarry h3 {
margin-bottom: 0px;
color: #323232;
font-size: 16px;
font-weight: 500;
font-family: 'Poppins', sans-serif;
}
.carryLi .contentCarry .undercarry {
font-size: 13px;
font-weight: 300;
color: #55595c;
line-height: normal;
}
.carryLi i{position: absolute; right: 30px; color: #07a87e;
}

.selected-addons,.selected-addon,.addons-list {
	float: left;
	width: 100%;
}
.selected-addons,.addons-list {
	margin: 35px 0px;
}
.time-slots, .booking-confirmation {
    float: left;
    width: 100%;
}

.secteitle.menu .carryLi .contentCarry {
padding-left: 0px;
}
.checkboxforfj{width: 100%; float: left;}
.secteitle .addons {
width: 100%;
float: left;
border-bottom: 1px solid #d7d4d4;
padding-bottom: 0.8em;
margin-bottom: 0.8em;
/*	margin-top: 40px;*/
}
.secteitle .addons .addons-right {
float: left;
font-weight: bold;
}
.secteitle .addons .addons-left {
float: right;
}
.checkboxforfj .form-check-label h4 {
font-size: 1em;
font-weight: 500;
margin-bottom: 0;
}
.checkboxforfj .form-check.fj {
margin: 0;
margin: 20px 0px;
border-bottom: 1px solid #d7d4d4;
padding-bottom: 20px;
}
.secteitle button.selectProfessional {
border: 0 !important;
background-color: #33343c !important;
border-radius: 20px;
color: white;
padding: 10px 40px;
margin-top: 15px;
font-size: 16px;
}
.secteitle button.selectProfessional:hover{
border: 0 !important;
background-color: #33343c !important;
border-radius: 20px;
color: #fff!important;
padding: 10px 40px;
font-size: 16px;
}
.checkboxforfj .form-check.fj .priceofservice{
float: right;
}
.checkboxforfj .form-check-label h4 i {
font-weight: bold;
font-size: 14px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.nameuserForm {
width: 100%;
float: left;
padding: 35px;
}
.nameuserForm button.selectProfessional {
border: 0 !important;
background-color: #33343c !important;
border-radius: 20px;
color: white;
padding: 10px 40px;
font-size: 16px;
}
.nameuserForm form {
margin-bottom: 40px;
}
.checkboxforfj  h4 {
font-size: 1em;
font-weight: 500;
margin-bottom: 0;
}
.checkboxforfj .form-check.fj {
margin: 0;
margin: 20px 0px;
border-bottom: 1px solid #d7d4d4;
padding-bottom: 20px;
}
.lastvisit{width: 100%; float: left; margin-top: 50px;
margin-bottom: 30px;}

.backGloble{
padding: 8px 20px;
display: block;
float: left;
background: #07a87e;
color: #fff;
text-transform: uppercase;
font-weight: bold;
border-radius: 4px;
font-size: 15px;
/*margin: 0px 30px;
margin-top: 30px;*/
}
.backGloble i {
padding-right: 6px;
font-size: 14px;
}
img.store_log {
width: 60px;
height: 60px;
}

.pricenote {
background: #f4fa41;
padding: 5px 20px;
border-radius: 5px;
border: 1px solid #dcf132e6;
}
.back-lnk {
	float: left;
}
.cart-icon {
	position: absolute;
	padding: 35px;
	top: 0;
	border-radius: 10px;
	background: #adadad61;
	color: #09813d;
	right: 0;
}
.selected-addon {
	border-bottom: 1px solid #ccc;
	padding: 10px;
}
.cart-icon  i.fal.fa-shopping-basket{
	font-size: 40px;
}
.visit_type{
	float: left;
	width: 100%;
	padding-top: 20px;
}

.visit_type .form-select { border: 1px solid #ccc; padding: 10px;}
.calendar { float: left; width: 100%; }
.time-parts{
	float: left; width: 50%;
	padding: 10px;
}

.calendar-container.time-parts .react-calendar {
    /* float: left; */
    width: 100%;
}


.btn.selected {
    background: #5a960ffc !important;
    color: #fff;
}
.time-parts .react-calendar{width: 100%}
.btn.btn-light.available { float: left; margin: 10px; }

/*button.btn.btn-light.available {
	border-radius: 5px;
	margin-right: 10px;
}

button.btn.btn-light.available.selected {
	background: #7adec9;
}

button.react-calendar__tile.react-calendar__month-view__days__day {
    margin: 5px;
    border-radius: 10px;
    padding: 25px 0px;
*/}

/*
.time-parts button.time-slot.available {
	border-radius: 5px;
	padding: 10px 30px;
	margin: 10px;
	background: none;
	border: 1px solid #ccc;
}

.time-parts button.time-slot.available.selected {
	background: #769c2c;
}*/