.custom-bookAppointment-content, .custom-servicePackages-block, .booking-calender, .custom-timeSlot-block, .custom-userInfo-block{
    box-shadow:0px 0 10px 0 rgba(0, 0, 0, .08);
    background:#fff;
    border-radius:0.6em;
    padding:20px;
    width:100%;
    margin:17px 0 0;
}

.custom-bookAppointment-content .tittle, .custom-servicePackages-block .tittle, .booking-calender .tittle, .custom-timeSlot-block .tittle, .custom-userInfo-block .tittle{font-size:24px;}

.custom-bookAppointment-content .tittle{color:rgba(80, 80, 80, 1);}

.bookAppointment-media-block {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.bookAppointment-item{width:100%; padding:10px; position:relative; display:flex; flex-wrap:wrap; margin:0 0 12px; cursor:pointer;}
.bookAppointment-item input{position:absolute; cursor:pointer; z-index:1; opacity:0;}
.bookAppointment-item .mediaIcon{width:36px; height:36px; margin:0 15px 0 0; position:relative; z-index:1;}
.bookAppointment-item .mediaIcon svg{max-width:85%; height:auto; color:rgb(96 96 96); margin:3px 0 0;}
.bookAppointment-item .mediaText{font-size:18px; font-weight:normal; position:relative; z-index:1; cursor:rgba(96, 96, 96, 1); line-height:36px;}
.bookAppointment-item .selected-checkMark{position:absolute; top:0; left:0; width:100%; height:100%; background:#f7f7f7; border-radius:6px;}


.bookAppointment-item input:checked ~ .selected-checkMark{background:rgba(52, 0, 71, 1);}
.bookAppointment-item input:checked ~ .mediaIcon svg{color:#fff;}
.bookAppointment-item input:checked ~ .mediaText{color:#fff;}


.booking-calender{}
.ui-datepicker .ui-datepicker-title{color:#464646; font-size:17px;}

.booking-calender .ui-datepicker{
	/*	border-radius:0px; */
		border:1px solid #e7e7e7;
	
	/*box-shadow:0px 3px 8px rgba(0, 0, 0, 0.1);*/
	 width:100%;
	 padding:11px;
}

.booking-calender .ui-datepicker-header{background:none; border-radius:0px;}
.booking-calender .ui-datepicker table thead th{font-size:13px; color:#0693e3; font-weight:normal; text-transform:uppercase;}
.booking-calender .ui-datepicker .ui-datepicker-header{border:none;}
.booking-calender .ui-datepicker table{border:none;}

.booking-calender .ui-datepicker-calendar tr td .ui-state-default{border:none; text-align:center; font-size:14px; text-decoration:none;     background-color: #efefef;}
.booking-calender .ui-datepicker-calendar tr td .ui-state-default.ui-state-highlight{background:#2e7eff; color:#fff;}

.booking-calender .ui-datepicker-header .ui-corner-all {
    border: 1px solid #e0e0e0;
    cursor: pointer;
}
.booking-calender .ui-datepicker-header .ui-corner-all .ui-icon{position:relative;}
.booking-calender .ui-datepicker-header .ui-corner-all .ui-icon:after, .booking-calender .ui-datepicker-header .ui-corner-all .ui-icon:before {
    content: "";
    position: absolute;    
    width: 1.4px;
    height: 11px;
    background: #383838;    
    border-radius: 0px;
}

.booking-calender .ui-datepicker-header .ui-corner-all .ui-icon:after{
	top: 0;
    left: 9px;
    transform: rotate(45deg);
}
.booking-calender .ui-datepicker-header .ui-corner-all .ui-icon:before{
	    top: 6px;
    left: 9px;
    transform: rotate(-58deg);
}


.booking-calender .ui-datepicker-header .ui-corner-all.ui-datepicker-next .ui-icon {
    transform: rotate(180deg);
}



.servicePackages-list {
    display: flex;
    flex-wrap: wrap;
}
.servicePackage-item {
    border: 1px solid #dedede;
    width: 31.3%;
    margin: 1%;
    border-radius: 5px;
    padding: 8px;
    position:relative;
    cursor:pointer;
}

.servicePackage-item .srv-name{font-size:15px;}

.servicePackage-item input{position:absolute; opacity:0;}

.selected-servi-pack {
    position: absolute;
    width: 101%;
    height: 101%;
    top: 0;
    left: 0;
    border-radius: 5px;
    border: 1px solid #046bd2;
    transition:all 0.45s ease;
    opacity:0;
}
.servicePackage-item:hover .selected-servi-pack{opacity:1;} 
.servicePackage-item input:checked ~ .selected-servi-pack{opacity:1;}

.servicePackage-item .srv-price {
    display: block;
    color: #000;
    font-weight: bold;
    font-size: 18px;
    margin: 8px 0 3px;
}

.selected-servi-icon {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    top: -6px;
    left: -4px;
    background: #fff;
    border: 1px solid #dedede;
     transition:all 0.45s ease;
}

.selected-servi-icon:after, .selected-servi-icon:before {
    content: "";
    width: 1px;   
    background: #9e9e9e;
    position: absolute;
    z-index: 1;
   
   
}

.selected-servi-icon:after {
    top: 8px;
    left: 5px;
    transform: rotate(-38deg);
    height: 4px;
}

.selected-servi-icon:before {
    top: 5px;
    left: 9px;
    transform: rotate(42deg);  
    height: 8px;
}

.servicePackage-item:hover .selected-servi-icon, .servicePackage-item input:checked ~ .selected-servi-icon{background:#046bd2; border:1px solid #046bd2;}

.servicePackage-item:hover .selected-servi-icon:after, .servicePackage-item:hover .selected-servi-icon:before, .servicePackage-item input:checked ~ .selected-servi-icon:after, .servicePackage-item input:checked ~ .selected-servi-icon:before{background:#fff;}


.custom-timeSlot-block ul {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.custom-timeSlot-block ul li {
    cursor: pointer;
    width: 49%;
    background: #f3f3f3;
    text-align: center;
    /* margin: 1%; */
    padding: 8px;
    border-radius: 5px;
    color: #000;
    transition:all 0.45s ease;
}

.custom-timeSlot-block ul li:hover{background:#27baa8; color:#fff;}


.custom-userInfo-block form input{margin:0 0 7px;}
.custom-userInfo-block form button{margin:10px 0 0;}


.custom-timeSlot-block ul li.active{
    background: #27baa8;
    color: #fff;
}

.custom-timeSlot-block ul li.time-item.disabled{
    background: #f3f3f3;
    text-align: center;
    padding: 8px;
    border-radius: 5px;
    color: #000;
    transition: all 0.45s ease;
}


.custom-timeSlot-block ul li:hover.time-item.disabled{
    background: #f3f3f3;
    color: #000;
    cursor: not-allowed;
}

.custom-timeSlot-block ul li.time-item-dis:hover{color: #000;
    cursor: not-allowed;  background: #f3f3f3;}