/* @import url(http://fonts.googleapis.com/css?family=Open+Sans); */

*{
    margin: 0;
    padding: 0;
    /* test */
}

body{
    /* font-family: 'Open Sans', sans-serif;   */
    background-image:linear-gradient(to left, #38135a , rgb(25, 8, 53));
     /*background-image:linear-gradient(to right, #232224 , rgb(25, 8, 53)); */
}

hr{
  background-color: rgba(255, 255, 255, 0.166);
}

/* header block========================== */
header{
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    background: rgb(25, 8, 53);
    z-index:999;
}

header nav {
    float: right;
}

 header nav ul{
    display: flex;
    margin:0;
    padding: 0;
    
}

header ul li{
    list-style: none;
    border-bottom: 0px;

}

header ul li a{

    line-height: 50px;
    text-decoration: none;
    color: white;
    padding: 0 20px;
  
    display: block;
     transition: .1000s;
  
}
header ul li a:hover{
  text-decoration: none;
  color: red;
}


#search{
    
   /* position: absolute;
   left: 50%;
   transform: translate(-50%, -0%); */
   float: right;
   line-height: 50px;
   z-index: 12;
}
/* ===================================== */
#side-menu {
    grid-area: sm;
   
}

.sideNavWrap{
  position: sticky;
  top:60px;
  left: 0;  
  z-index:999;
}
.sideNav nav{
    position:absolute ;
    top:-60px;
    left: -300%; 
    width: 300px;
    background: rgba(255, 255, 255, 0.925);
    padding: 20px;
    height: 100vh; 
    overflow: scroll;
    transition: 0.5s;
    display: block;
    box-sizing: border-box;
    box-shadow:
    1px 1px 0px rgb(177, 174, 174),
    2px 2px 0px rgba(177, 174, 174, 0.959),
    3px 3px 0px rgba(177, 174, 174, 0.897),
    4px 4px 0px rgba(177, 174, 174, 0.877),
    5px 5px 0px rgba(177, 174, 174, 0.863),
    6px 6px 0px rgba(177, 174, 174, 0.856),
    7px 7px 0px rgba(177, 174, 174, 0.849),
    8px 8px 0px rgba(177, 174, 174, 0.863),
    9px 9px 0px rgba(177, 174, 174, 0.856),
    10px 10px 0px rgba(177, 174, 174, 0.849);
   
}

p{
    background:red;
}
/*=============================================*/

@media (max-width: 768px) {
    #content{
    padding:0px !important;
 
    }
    .sideNavWrap{
          z-index:999999;
    }
    
    
    .active .bar{
        z-index:99;
    }
   .sideNav nav{
         width: 100%;
           top:0px;
         background: rgba(255, 255, 255, 255);
      
   }
   
   .active .bar{
       color:black;
        z-index:999999;
         margin-top:60px;
   }
  .active .bar{
     
         z-index: 999999 !important;
   }
   
     .active .bar:before, 
 .active .bar:after{
    content: " ";
    position: absolute;
    width: inherit;
    height: inherit;
    background: #eee;
    transition:0.5s;
    z-index: 999999 !important;
    
}
.hamburger-menu{
    left:10px !important;
}
       .active .hamburger-menu{
        left:10px !important;
        z-index:999 !important;
    
    }
    .fc-view-container
    {
      overflow: hidden;
      overflow-x: scroll;
    }
    .fc table{
      width:1000px !important;
    }
}
/*==============================================*/


   
.sideNav nav ul li {
    border-bottom: 1px solid rgba(143, 136, 136, 0.363);
    line-height: 45px;
     padding: 0px 0px 0px 40px;
     list-style: none;
    cursor: pointer;
 
} 

 .sideNav nav ul li a{
    text-decoration:none;
    color: rgb(58, 49, 49);
    display: block;
}

#account-drop,#customer-drop, #deal-drop, #designstion-drop,
#employee-drop, #appointment-drop, #menu-drop, #order-drop, #payment-drop,
#purchase-drop, #stock-drop,#vendor-drop, #tax-drop{
   max-height: 0px;
    transition: 0.5s ease-in-out; 
    overflow: hidden;
}

#account-drop.show1, #customer-drop.show2,
#deal-drop.show3, #designstion-drop.show4,
#employee-drop.show5, #appointment-drop.show6, 
#menu-drop.show7, #order-drop.show8, #payment-drop.show9,
#purchase-drop.show10, #stock-drop.show11,
#vendor-drop.show12, #tax-drop.show13{
   max-height: 200px;
    opacity: 1;
    overflow-y: auto;
} 


 .hamburger-menu{
 position: absolute;
 left:40px;
 height: 4rem;
 width: 3rem;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 transition: 0.5s;
 z-index:909 !important;
}

 .bar{
 width: 1.9rem;
 height: 1.5px;
 border-radius: 2px;
 background: #eee;
 transition:0.5s;
 position: relative;
 z-index: 99 !important;

}

.bar:before, 
.bar:after{
    content: " ";
    position: absolute;
    width: inherit;
    height: inherit;
    background: #eee;
    transition:0.5s;
    z-index: 999 !important;
    
}
.bar:before{
 transform:translateY(-9px);
 z-index: 999 !important;

}
.bar:after{
    transform:translateY(9px);
    z-index: 999 !important;
 
   }
   
.active .bar{
 transform: rotate(180deg);
 background: transparent;
 z-index: 999 !important;

   }

.active .bar:before{
       transform: translateY(0) rotate(45deg);
     
   }
   .active .bar:after{
    transform: translateY(0) rotate(-45deg);
     
  
}

.active #side-menu{
    left:0%;
    transition: 0.5s;
    z-index: 999;
   
}

.active .hamburger-menu{
    left:300px;
    z-index:999 !important;

}
/* ============================= */

.active .sideNav nav{
    left:0%;
   transition: 0.5s;
    
}

/*content===========================*/

#content{
    width: 100%;
    transition: 0.5s;
    padding:40px;
    box-sizing: border-box;
}

.active #content{
    width: -webkit-calc(100% - 300px);
    width:    -moz-calc(100% - 300px);
    width:         calc(100% - 300px);
    margin-left: 300px;
    box-sizing: border-box;
}

.active #addServiceMenu{

left: calc(50% + 150px);
  box-sizing: border-box;
}

/* Employee Form =========================================== */
.reactiveFormClass{
    margin:20px 0px 20px 0;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 0px 30px 0px rgba(51, 51, 51, 0.438);

}
.formWrap{
padding: 20px;
z-index:999;
}

input[type='file']{
    display: none;
    transition: 0.5s;
}

input  {
    border: 0 !important;
    outline: none !important;
}
select{
  border: 0;
  outline: none !important;
  border:none !important;
}


span{
    cursor: pointer;
    /* background-color: rgba(244, 244, 244, 0.879); */
}


/* input:focus, textarea:focus, select:focus{
    outline: none !important;
} */

/* select:focus,
textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline:0px !important;
    -webkit-appearance:none;
    box-shadow: none !important;
} */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

input::placeholder{
 font-size: 14px;
}
select{

        font-size: 16px !important;
       color:#666!important;
}

input:focus, select:focus{
 border-bottom: 2px solid green !important;
}


/* =====================ViewEmployeees=============== */

.employeeHead{

}
.viewEmployee{
  margin:20px 0px 20px 0;
}


.our-team {
    padding: 10px 0 20px;
    margin-bottom: 30px;
    background-color: #ffffff;
    text-align: center;
    overflow: hidden;
    position: relative;
    box-shadow: 1px 1px 10px 0px rgb(0, 0, 0);
  }
  
  .our-team .picture {
    display: inline-block;
    height: 150px;
    width: 150px;
    margin-bottom: 10px;
    z-index: 1;
    position: relative;
    box-shadow: 1px 1px 10px 1px;
    border-radius: 50%;
  }
  
  .our-team .picture::before {
    content: "";
    width: 100%;
    height: 0;
    border-radius: 50%;
    background-color: #1c1c1d;
    position: absolute;
    bottom: 135%;
    right: 0;
    left: 0;
    opacity: 0.9;
    transform: scale(3);
    transition: all 0.3s linear 0s;
  }
  
  .our-team:hover .picture::before {
    height: 100%;
  }
  
  .our-team .picture::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #1b1b1c;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  
  .our-team .picture img {
    /* width: 100%;
    height: auto;
    border-radius: 50%;
    transform: scale(1);
    transition: all 0.9s ease 0s; */
    width: 200px;
    height: 150px;
    border-radius: 50%;
    transform: scale(1);
    transition: all 0.9s ease 0s;
    object-fit: cover;
  }
  
  .our-team:hover .picture img {
    box-shadow: 0 0 0 4px #ffffff;
    transform: scale(0.7);
  }
  
  .our-team .title {
    display: block;
    font-size: 15px;
    color: #4e5052;
    text-transform: capitalize;
  }
  
  .our-team .social {
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #101112;
    position: absolute;
    bottom: -100px;
    left: 0;
    transition: all 0.5s ease 0s;
  }
  
  .our-team:hover .social {
    bottom: 0;
  }
  
  .our-team .social li {
    display: inline-block;
  }
  
  .our-team .social li a {
    display: block;
    padding: 10px;
    font-size: 17px;
    color: white;
    transition: all 0.3s ease 0s;
    text-decoration: none;
  }
  
  .our-team .social li a:hover {
    color: #1369ce;
    background-color: #f7f5ec;
  }
  /* ======================================== */
  .employeeHead{
    position: relative;
 
  }

  .addViewButton{
    
    box-sizing: border-box;
    margin-bottom: -15px;
    margin-top:50px;
    display: flex;
    justify-content: space-between;
  }

  .addViewButton input{
    margin-bottom: 0;
  }

  .addViewButton ul{
    display: flex;
  }

  .addViewButton ul li{
    list-style: none;
    padding:0 10px;
    float: left;
  }

  .addViewButton a{
    text-decoration: none;
    color: white;
    border-radius: 5px;
   font-size: 12px;

  }

  .addViewButton a:hover{
    text-decoration: none;
    color: white;
  }

  .schViewButton ul{
    display: flex;
  }

  .schViewButton ul li{
    list-style: none;
    padding:0 10px;
    float: left;
  }

  .calendarWrap{
    background-color: white  ;
  }

  .search{
    float: right;
  }

  .search{
    list-style: none;
    /* margin-top: -45px; */
    
  }

  .search input{
    border-radius: 5px;
  }


/* =================================== */

.openingHours, .scheduleEdit, .viewService{
 background-color: white;
 padding: 20px;
 border-radius: 5px;
}
.openingHours ul, .scheduleEdit ul, .viewService ul{
  margin-top: 20px;
}

.openingHours select, .scheduleEdit select, .viewService select{
  border: 1px solid rgba(145, 139, 139, 0.557);
  padding: 8px 20px;
  border-radius: 5px;
  width: 100%;
}

.openingHours li,.scheduleEdit li, .viewService li{
  list-style: none;
  margin-bottom: 10px;
  padding: 10px;
  border-bottom: 1px solid rgba(145, 139, 139, 0.193) !important;
  color:rgb(145, 139, 139) ;
}

.scheduleEdit h2{
   color: #212529;
}
/* ==========Schedule Calender================ */

.scheduleWrap{
  background-color: white;
  padding: 40px;
  border-radius: 5px;
}
.scheduleHours{
  background-color: white;
 padding: 20px;
 border-radius: 5px;
 width: 50%;
position: absolute;
top: 50%;
left: 50%;
 transform: translate(-50%, -50%);
 z-index: 2;
 display: none;
}


.scheduleHours ul{
  margin-top: 20px;
}

.scheduleHours select, .addLeave input{
  border: 1px solid rgba(145, 139, 139, 0.557) !important;
  padding: 8px 20px;
  border-radius: 5px;
}

.scheduleHours li, .addLeave li{
  list-style: none;
  margin-bottom: 10px;
  padding: 10px;
  color:rgb(145, 139, 139) ;
}


.scheduleHours select{
 width: 100%;
}
.scheduleHead, .leaveHead{
  position: relative;
  width: 100%;
  margin-bottom: 60px;
}
.defaultHour{
  position: absolute;
  right: 0;
 
}
.addLeave{
background-color: white;
/* width: 50%; */
padding: 20px;
 border-radius: 5px;
}
/* ===================== */
 

.serviceContent{
background-color: white;
padding: 20px;
border-radius: 5px;
overflow: hidden;
}

 .serviceContent .table thead th {
  vertical-align: bottom;
  border-bottom: 1px solid #dee2e6 ;
  border-top: none ;
}

.search input{
  border: 1px solid rgba(145, 139, 139, 0.557) !important;
  padding: 8px;
  margin-bottom: 20px;
  /* margin-top: 50px;
  margin-bottom: 50px; */
}

/* .serviceContent .table th{
  color:rgb(77, 75, 75) ; 
} */

.serviceContent .table td{
  color:rgb(145, 139, 139) ;
} 
.planText{
    margin-left: 20px;
}

/* ======================== */

.formWrap li{
 list-style: none;
}

.designationTable li{
 list-style: none;
}

#addServiceMenu{
  position: absolute;
  top:50%;
  left:50%;
transform: translate(-50%, -50%);
transition: 0.5s;
 
}

#addServiceMenuOverlap{
  width: 100%;
  height: 100Vh;
  overflow: hidden;
  background-color:rgba(51, 51, 51, 0.5);
  position: absolute;
  top:0%;
  left:0%;
  z-index: 30;
  display: none;
}
/* ============================= */
label.error{
  font-size: 12px;
  color:red;
  margin-left:6px;
}
.error{
  font-size: 12px;
  color:red;
  margin-left:6px;
}
.show_progression
{
  font-style: italic;
  color:red;
  display: none;
}
.swal-overlay
{
  z-index: 999999;
}
/**popup**/

.popup-small {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.75);
  overflow: auto;
}

.popup-inner-small {
  max-width: 300px;
  width: 90%;
  padding: 0px 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px black;
  border-radius: 3px;
  background: #fff;
  z-index: 9999;
}


.popup-medium {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.75);
  overflow: auto;
}

.popup-inner-medium {
  max-width: 500px;
  width: 90%;
  padding: 0px 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px black;
  border-radius: 3px;
  background: #fff;
  z-index: 9999;
}

.popup-new {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.75);
  overflow: auto;
}

.popup-inner-new {
  max-width: 300px;
  width: 90%;
  padding: 0px 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px black;
  border-radius: 3px;
  background: #fff;
  z-index: 9999;
}

.popup-main {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.75);
  overflow: auto;
}

.popup-inner-main {
  max-width: 1200px;
  width: 90%;
  /* height: 80%; */
  /* overflow:scroll; */
  padding: 20px 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px black;
  border-radius: 3px;
  background: #fff;
  z-index: 9999;
  /* max-height: 500px;
  overflow-y: auto; */
}

.no-btn{
  background: transparent;
  outline: none;
  cursor: pointer;
  padding:0px;
  margin:0px;
}
img.emp_photo
{
  width:80px;
  height:50px;
  object-fit: cover;
}
.hiddenName{
  display:none;
}
.clearable{
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAc1JREFUOI3NkT1rk1EYhq/nvCepgxKbt1REpRH8B05aIX5hxEmEdihCSKuVQkX9BaGjrgqpaWKlHfzoIi6NNe1mcfEX6GZCl3yA4mDfnPM4JTbGznqPz7nvi/t5DvxryZ+DU1fvDrWiH7OInBVhFwDVIUU/Ju3BwpfK45/7AkYyt4867xcD5WmjWl4HtOsbvnzriuDnsWauVSnVuhnTS09MxJ33i4ibb4wfr+wJA2h7/Nh7gTt0fGEsnT0wAAjbh6aN6HJ743kt3K69TmSyqe7b4QvTY+GHr6+a1Wc7Bil8j9u5wQZwvnnmxFtA1UX3rDPFRCabSmSyqcBIUX3nPqCNanld8OcGACrqWFjwAK2tlbp6l7NRsBp4VlWj6dbWSr1rBdP5SwPpO6iLSUwNirfexSRGv3pe83sicdJ5C5DIZFPW2yWsmUKjqe46AOTzxqPxQYDIRmhrk4BYbx9pILlWpVTrrePtQ0CS2/Ub4tkcqMLp2Vgy2XljvHnQ2Cx9pv8bAWT0Uu6kE/OkOfztOmtru/0AYPTizBFnWAZ90Wzbl3wqRgCk8za0tUmEmxKYmca7pZ3BBnuajIQ+59RfM6gD8EhglEqzbcs96H+jX6PxvGFTRxxJAAAAAElFTkSuQmCC) no-repeat right -15px center;
  transition: background .4s;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { 
  background-position: right 5px center; 
} /* (jQ) Show icon */
.clearable.onX{ 
  cursor: pointer; 
}
.select_duration
{
  margin-top:10px;
}
.select_duration:first-child
{
  margin-top:0px;
}
.btnPlus{
  background: rgba(3, 41, 124, 0.856);
  color:#fff;
  border:1px solid #1d3c5c;
  margin-top:-10px;
}
.btnMinus{
  background: rgba(151, 3, 3, 0.856);
  color:#fff;
  border:1px solid #fc4c4c;
  display:block;
}
.wrap-calender
{
  background: #fff;
  padding:30px;
}
.hidden{
  display:none;
}
.show_opening_time
{
  font-size: 10px;
}
.wrap_employee_schedule
{
   
}
.errors{
  display:none;
  color:red;
  font-size: 14px;
}
.service_name_error
{
  margin-left:5px;
}
labe.errors{
  font-size: 12px;
  color:red;
  margin-left:6px;
}
.search_warning{
  padding: 30px 0px 30px;
    color: red;
    text-align: center;
    background: #ffe7e7;
    margin-bottom: 20px;
}
.wrap-employee-select{
  margin:50px 15px 30px;
}
.waiting_txt
{
  text-align: center;
  color:#fc4c4c;
  padding: 20px 0px 50px;
}
.wrap-progression{
  display:none;
}
.not_found{
  color:#fc4c4c;
}
/** close icon **/
.close-icon {
  color: #fff;
    position: absolute;
    top: -25px;
    right: -20px;
    font-size: 30px;
    font-weight: normal;
    text-shadow: 1px 1px #353333;
    border-radius: 50%;
    height: 60px;
    width: 60px;
    background: #f00;
    text-align: center;
    z-index: 99;
}

.close-icon a {
  color: #f00;
}

.close-icon-medium {
  color: #fff;
    position: absolute;
    top: -25px;
    right: -20px;
    font-size: 20px;
    font-weight: normal;
    text-shadow: 1px 1px #353333;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    background: #f00;
    text-align: center;
}

.close-icon-medium a {
  color: #f00;
}

.schedule_change_note{
  font-size:11px;
  color:#f00;
  text-align: center;
}
.note_sch{
  display: none;
  text-align: center;
}
/* .wrap-service-list
{
  display: flex;
} */
.wrap-serview-add-btn
{
  margin-left:30px;
}

/** calender ****/
a.fc-day-grid-event {
  margin: 8px 2px;
}
.fc-event .fc-content {
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex-flow: column-reverse;
  align-items: center;
}
.fc-agendaDay-view .fc-event .fc-content {
  padding: 10px;
  display: inline;
   
}
.fc-event .fc-content .fc-title{
  
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fc-agendaDay-view .fc-event .fc-content .fc-title{
  
  display: inline;
  font-size: 14px;
    padding-left: 10px;
}
.fc-agendaDay-view .fc-time-grid-event.fc-short .fc-time span
{
  display:block !important;
}
.fc-agendaDay-view .fc-time-grid-event.fc-short .fc-time:before, .fc-agendaDay-view .fc-time-grid-event.fc-short .fc-time:after {
  content: '' !important;
}
.fc-agendaDay-view .fc-axis {
  vertical-align: middle;
  padding: 0px 4px !important;
}
.fc-agendaDay-view span.hideTime
{
  display:none;
}
.fc-event .fc-content .fc-title span{
  font-weight: bold;
}
.fc-listWeek-view span.hideTime{
  display: none;
}
.fc-basicWeek-view .cls_hide_day
{
  /* display: none; */
  font-size:12px;
}
.fc-basicWeek-view .fc-time{
  font-size: 12px;
}
a.cls_business_close{
  color:#f00 !important;
  text-decoration: underline !important;
  cursor: none !important;
}

form#event_update_form .day{
  display: flex;
  flex-direction: column;
}
form#event_update_form select{
  border: 1px solid rgba(145, 139, 139, 0.557) !important;
    padding: 8px 20px;
    border-radius: 5px;
    width: 100%;
}
form#event_update_form .show_opening_time
{
  padding:10px;
}
.chosen-container-multi .chosen-choices li.search-field
{
    width: 100%;
    display: flex;
    justify-content: space-between;
  
}
.chosen-container-multi .chosen-choices li.search-field .btn-addin-plus
{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 3px 0px 0px 0px;
    cursor: pointer;
}
/* Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #45a2b9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
  z-index: 9999;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #fff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color:#2988a0;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #008fb3;}

a.active{
  background-color:#0b5466;
}

.fc-content-skeleton table tr:nth-child(even) {background: #CCC}
.fc-content-skeleton table tr:nth-child(odd) {background: #FFF}
.fc-event{
 background: transparent !important;
 border: none !important;
}
.fc .fc-row .fc-content-skeleton td
{
  border-color: #e5e5e5 !important;
}
.fc-unthemed td.fc-today
{
  background: transparent !important;
}
.warp_opening_time_table{
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-column-gap: 0%;
  grid-row-gap: 0px;
  border: 1px solid #e5e5e5;
  padding: 10px;
  background: #fafafa;
  font-size: 15px;
  margin-bottom: 20px;
  max-height: 150px;
  overflow: hidden;
}
.form-control:focus
{
  box-shadow: none !important;
}
.warp_opening_time_table label,
.warp_opening_time_table input {
  display: block;
  /* position: absolute; */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.warp_opening_time_table input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
  display: none;
}

.warp_opening_time_table input[type="radio"]:checked+label,
.Checked+label {
  background: rgb(255, 102, 0);
  border:1px solid #f54905
}

.warp_opening_time_table label {
  padding: 4px;
  margin: 5px;
  border: 1px solid #CCC;
  cursor: pointer;
  z-index: 90;
  text-align: center;
}

.warp_opening_time_table label:hover {
  background: #DDD;
}
.warp_opening_time_table label.cls_booked{
  background: #2f92f9;
  color: #cbe3fb;
  border: 1px solid #034890;
  cursor: not-allowed;
}
.warp_opening_time_table label.cls_booked span.apt_booked
{
  font-size: 10px;
  display: block;
}
.warp_opening_time_table .wrap_booked_time
{
  display:none;
}
.wrap_apt_time h5{
  font-size: 18px;
  margin-top:30px;
}
.tot_duration{
  font-size:14px;
  color:rgb(255, 0, 0);
}
.wrap-from-to-schedule
{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom:10px;
}
.defult-note{
  font-size:14px;
  color:rgb(255, 0, 0);
}
#wrap-calender-datalist-link
{
  display: block;
  float: right;
  position: relative;
  top: 0px;
  margin-left: 15px;
  margin-right: 5px;
}
.wrap-table{
  background-color: white;
    padding: 20px;
    border-radius: 5px;
}
.wrap-table-search
{
  float: right;
  padding: 20px 0px 40px;
}
.wrap-percentage,.wrap-commission-amt
{
  display:flex;
  align-items: flex-end;
}
.wrap-commission-select
{
  padding:20px 0px;
  margin:0px;
}
.wrap-commission-service-list{
  padding:10px 0px;
}
.wrap-commission-input
{
  padding:10px 0px;
}
.wrap-commission-btn{
  padding:10px 0px;
}
.wrap-label-offset{
  display:flex;
  align-items: center;
}
.label-offset{
  margin-bottom: 0px !important;
}
/**********************************/
.clearable{
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAc1JREFUOI3NkT1rk1EYhq/nvCepgxKbt1REpRH8B05aIX5hxEmEdihCSKuVQkX9BaGjrgqpaWKlHfzoIi6NNe1mcfEX6GZCl3yA4mDfnPM4JTbGznqPz7nvi/t5DvxryZ+DU1fvDrWiH7OInBVhFwDVIUU/Ju3BwpfK45/7AkYyt4867xcD5WmjWl4HtOsbvnzriuDnsWauVSnVuhnTS09MxJ33i4ibb4wfr+wJA2h7/Nh7gTt0fGEsnT0wAAjbh6aN6HJ743kt3K69TmSyqe7b4QvTY+GHr6+a1Wc7Bil8j9u5wQZwvnnmxFtA1UX3rDPFRCabSmSyqcBIUX3nPqCNanld8OcGACrqWFjwAK2tlbp6l7NRsBp4VlWj6dbWSr1rBdP5SwPpO6iLSUwNirfexSRGv3pe83sicdJ5C5DIZFPW2yWsmUKjqe46AOTzxqPxQYDIRmhrk4BYbx9pILlWpVTrrePtQ0CS2/Ub4tkcqMLp2Vgy2XljvHnQ2Cx9pv8bAWT0Uu6kE/OkOfztOmtru/0AYPTizBFnWAZ90Wzbl3wqRgCk8za0tUmEmxKYmca7pZ3BBnuajIQ+59RfM6gD8EhglEqzbcs96H+jX6PxvGFTRxxJAAAAAElFTkSuQmCC) no-repeat right -15px center;
  transition: background .4s;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { 
  background-position: right 5px center; 
} /* (jQ) Show icon */
.clearable.onX{ 
  cursor: pointer; 
}
/*******************************************/
.wrap-customer-point {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}
.wrap-input-other {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap-input-customer-id{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom:10px;
  margin-left:10px;
}
.wrap-search-customer-id-phone
{
  display: none;
  align-items: center;

}
.hidden_comm{
  display:none;
}

.time-table {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
ul.wrap-day{
padding:0px;
margin:0px;
list-style: none;
display: flex;
justify-content: space-between;
}
.wrap-days{
  overflow: hidden;
}
.wrap-day, .wrap-deal-service{
  width: 100%;
    /* margin: 100px auto; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-column-gap: 15px;
    grid-row-gap: 10px;
    /* padding: 20px; */
    transition: 0.6s ease-in-out;
  }
fieldset {
    min-width: 0;
    padding: 10px 20px 20px!important;
    margin: 0 ;
     
    border: 1px solid #e5e5e5;
}
.highlight_day_err,.highlight_service_err,.highlight_comp_service_err{
  border:1px solid #f00 !important
}

legend{
  width:auto !important;
  text-align: center
}
.wrap-price-service{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-right:1px solid #e5e5e5;
  margin-bottom: 10px;
}
.wrap-input-label{
  display:flex;
  align-items: center;
}
label{
  margin-bottom: 0px !important;
}
@media only screen and (max-width: 1024px){
  .sideNav nav{
    left:-300%
  }
  .active #content
  {
   width:100%;
   margin-left:0;
  }
}
/** protecting repeation of plugin****/
.richText .richText{
  display:none;
}
.richText .richText-toolbar:last-child
{
  display: none;
}
.dataTables_wrapper .dataTables_wrapper .dataTables_length, 
.dataTables_wrapper .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_wrapper .dataTables_paginate
{
  display: none;
}
.hide-combo-wraper,.hide-comp-wraper{
  display:none;
}

.chosen-container
{
  display: none !important;
}
.chosen-container:nth-child(2){
  display: inline-block !important;
}
/** end of protecting repeation of plugin****/


ul.serviceDealList
{
  padding:0px;
  margin:0px;
  list-style: none;
  clear: both;
  overflow: hidden;
}
.wrap-view-deal{
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}
ul.mainList{
  padding:0px;
  margin:0px;
  list-style: none;
}


.wrap-search-deal
{
  margin-bottom: 20px;
  background: #f9f9f9;
  padding-top:10px;
  padding-bottom: 10px;
}
.subSearchList{
  margin-bottom: 20px;
    background: #f9f9f9;
    padding: 10px 10px 30px;
}

ul.subList{
  padding:0px;
  margin:0px;
  list-style: none;
  clear: both;
  overflow: hidden;
}

ul.subList li{
  padding:10px;
  float:left;
  border-bottom: none;
}

ul.activeDayList{
  padding:0px;
  margin:0px;
  list-style: none;
  overflow:hidden;
}
ul.activeDayList li{
  padding: 2px 10px;
  margin-right: 2px;
  float: left;
  background: #e5e5e5;
  border: 1px solid #dadada;
  text-transform: capitalize;
  font-size: 14px;
}

ul.activeDayList li.active{
  background: #f3d0a2;
  border: 1px solid #ffaaaa;
}
.deal-heading{
  display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding-bottom: 10px; */
    /* border: 1px solid; */
    padding: 15px;
    background: #fafafa;
    font-size: 18px;
}
.comp-heading{
  color:#2f92f9;
  padding-bottom: 4px;
   
}
label.selectBox
{
  background: #cccccc;
    padding: 6px 10px;
    color: #03031f;
    border-radius: 4px;
}
.wrap-deal-view{
  overflow:hidden;
  padding-top:20px
}
.show_selected_deal
{
  padding:0px;
  margin:0px;
  clear: both;
  overflow: hidden;
}

.show_selected_deal h5,.show_selected_deal h6{
  clear:both;
}
.show_selected_deal h6{
  font-weight: 600;
}

ul.deal_service_list{
  padding:0px;
  margin:0px;
  list-style: none;
  clear:both;
}

ul.deal_service_list li{
  padding:10px;
  float:left;
}
li.cat-heading{
  overflow:hidden;
  clear: both;
}
.wrap_selected_deal{
  border: 1px solid #e5e5e5;
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
  background: #fafafa;
  clear: both;
  overflow: hidden;
}
.wrap_selected_deal button.clearBtn{
  position: absolute;
  top: 3px;
  right: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 3px 0px 0px 0px;
  cursor: pointer;
}
.free-comp{
  display: block;
    clear: both;
    overflow: hidden;
    color: blue;
}
.active-day-heading{
  font-size: 12px;
  color:#999;
}
.wrap-gender{
  margin-top:10px;
  /* font-size:14px; */
  margin-left:10px;
  margin-bottom: 25px;
}
.wrap-gender label{
  padding-right:10px;
}
.chosen-container-single .chosen-search input[type="text"]{
  border:1px solid #e5e5e5 !important;
}
.wrap-add-category
{
  margin-bottom: 50px;
}
/****menu****/
.wrap-menu-list h5 {
    align-items: center; 
    margin: 5px 0px;
    display: flex;
    justify-content:space-between;
    cursor: pointer;
    font-weight: normal;
    font-size: 16px;
    border-bottom: 1px solid rgba(143, 136, 136, 0.363);
    line-height: 45px;
    padding: 0px 0px 0px 16px;
}

.wrap-menu-list h5 .show-plus{
  font-weight: normal;
  padding-right: 6px;
  font-size:12px;
}
.wrap-menu-list h5 .hide-minus{
  font-weight: normal;
  padding-right: 6px;
  font-size:12px;
}
.wrap-menu-list h5 i.hide-minus{
  display: none;
}
.wrap-menu-list h5 i.show-minus{
  display: block !important;
}

.wrap-menu-list h5 i.hide-plus{
  display: none !important;
}


.wrap-menu-list h5 a{
  text-decoration:none;
  color: rgb(58, 49, 49);
}
.wrap-menu-list h5 span.angle-rotate {
  transform: rotate(
   90deg
   ) !important;
  transition: 1s;
}

.wrap-submenu-list{
  display:none;
}

.wrap-submenu-list h6 {
  align-items: center; 
  margin: 5px 0px;
  display: flex;
  justify-content:space-between;
  cursor: pointer;
  font-weight: normal;
  font-size: 16px;
  line-height: 45px;
  padding: 0px 0px 0px 25px;
}

.wrap-submenu-list h6 a{
  color:#212529;
}

.wrap-submenu-list h6 .show-plus{
font-weight: normal;
padding-right: 6px;
font-size:12px;
}
.wrap-submenu-list h6 .hide-minus{
font-weight: normal;
padding-right: 6px;
font-size:12px;
}
.wrap-submenu-list h6 i.hide-minus{
display: none;
}
.wrap-submenu-list h6 i.show-minus{
display: block !important;
}

.wrap-submenu-list h6 i.hide-plus{
display: none !important;
}

.wrap-deal-submenu
{
  display: none;
}
.deal-hide-minus
{
  display: none !important;
}
.wrap-sales-billing{
  border:1px solid #e5e5e5;
  padding:10px;
  border-radius: 4px;
}
.wrap-popup-scroll
{
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.wrap-popup-content
{
  max-height: 80vh;
  overflow-y: scroll;
  overflow-x:hidden;
}
.wrap-sales-service-list,.wrap-sales-product
{
  /* border-right: 1px solid #e5e5e5; */
}
.wrap-billing-table
{
  border-left:1px solid #e5e5e5;
  padding-left:10px;
}

ul.serviceList
{
  padding:0px;
  margin:0px;
  list-style: none;
  overflow: hidden;
  clear: both;
}

ul.serviceList li
{
  margin-bottom: 20px;
}

ul.serviceList li legend
{
  font-size: 18px;
}

ul.serviceList li ul.innerServiceList
{
  padding:0px;
  margin:0px;
  list-style: none;
}

ul.serviceList li ul.innerServiceList li
{
  padding:10px;
  width:50%;
  display:flex;
  justify-content: space-between;
  align-items: center;
  float: left;
  border-right: 1px solid #e5e5e5;
  margin-bottom: 0px;
}
ul.serviceList li ul.innerServiceList li:nth-child(even)
{
  border-right:none
}
ul.employeeList,ul.productList
{
  padding:0px;
  margin:0px;
  list-style: none;
}
ul.employeeList li,ul.productList li
{
  padding:10px;
  cursor: pointer;
}
ul.employeeList li:hover,ul.productList li:hover
{
  color:#410668;
}
table.tbl-edit-service
{
  padding:0px;
  margin: 0px;
  border-collapse: collapse;
}
table.tbl-edit-service th,table.tbl-edit-service td
{
  padding:6px 10px;
  border-top: 1px solid #e5e5e5;
}
.wrap-dis-pc
{
  display: flex;
  align-items: center;
  width: 45%;
  text-align: right;
  justify-content: flex-end;
  float: right;
}
.wrap-all-total-price
{
  display:flex;
}
.wrap-all-price .wrap_price1
{
  display:flex;
  margin-bottom:6px;
}
.wrap-all-price .wrap_price2{
  margin-bottom: 6px;
}
.wrap-all-total-price .wrap_price1
{
  display: flex;
  margin-bottom: 6px;
}
.price_heading{
        /* width: 110px; */
        /* text-align: right; */
        /* padding-right: 10px; */
        /* font-weight: bold; */
        padding-left: 10px;
}
.price_content{
   width:20px;
   /* margin-left: -7px; */
}
table#tbl-sales-billing thead th
{
   border-top:none !important;
   border-bottom:none !important;
}
ul.dealNameList{
  padding: 0px;
  margin: 0px;
  list-style: none;
  padding-left: 16px;
}
ul.dealNameList li{
  padding-bottom: 10px !important;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-left: 0px;
  list-style: circle;
}
.wrap-btn-bill
{
  display: flex;
    align-items: center;
    justify-content: flex-end;
}
.wrap-btn-bill .wrap-bill-no{
  margin-right:10px;
}
.text-small{
  font-size: 10px;
  color:#999;
  font-style: italic;
  display: flex;
}
.split_row{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    /* grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); */
    grid-column-gap: 15px;
    grid-row-gap: 16px;
    margin-top: 20px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 30px;
}
.wrap-customer-detail
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  /* grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); */
  grid-column-gap: 15px;
  grid-row-gap: 16px;
  margin-top: 20px;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 30px;
}
.wrap-customer-detail .wrap-customer-list
{
  display:flex;
  flex-direction:column;
  align-items: flex-start;
}
.wrap-customer-detail .wrap-customer-list .cus-detail-heading{
  font-weight: bold;
}
.wrap-payment-type
{
  padding:0px;
  margin:0px;
  display: flex;
}
.wrap-payment-type label
{
  padding-right:20px;
}
.wrap-card-option
{
  padding:0px;
  margin:0px;
}
.wrap-card-option label
{
  padding-right:20px;
}
.tr-card-option,
.tr-card-pay,
.tr-cash-pay,
.tr-cheque-amt,
.wrap-print-done
{
  display: none;
}
/**********report ****************/
.innerallHead {
  /* position: relative; */
  /* top: 100px; */
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-column-gap: 15px;
  grid-row-gap: 20px;
  /* display: flex; */
  /* margin: auto; */
  height: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.titleHeadNoWidth {
  background: white;
  padding: 10px 20px;
  border-radius: 5px;
  /* height: 100px; */
  /* width: 100%; */
  margin-bottom: 20px;
  box-shadow: 1px 2px 14px 1px #2b2a2a73;
}
.wrap-table-calculation-head {
  /* width: 95%; */
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-column-gap: 15px;
  grid-row-gap: 20px;
  height: 100%;
  /* margin: auto; */
  overflow: hidden;
  clear: both;
  margin-bottom: 30px;
  margin-top: 0px;
}
.wrap-table-calculation-head .head-box {
  background: #fff;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #e5e5e5;
}
.wrap-table-calculation-head .head-box h5{
  font-size:16px;
}
.wrap-sales-report-menu{
  padding:0px;
  margin:0px;
  overflow:hidden;
  clear:both;
}
.wrap-sales-report-menu ul.reportMenu{
  padding:0px;
  margin:0px;
  list-style: none;
}
.wrap-sales-report-menu ul.reportMenu li{
  float:left;
  padding:10px;
}
.wrap-total-detail h6{
  padding: 15px;
    margin-bottom: 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    background: #c7c7c7;
    width: 16%;
    clear: both;
    overflow: hidden;
    text-align: center;
}
.wrap-total-detail h6 span.angle-right .fa-angle-right{
  transform: rotate(0deg);
  transition: 0.3s;
  margin-left:5px;
}

.wrap-total-detail h6 span.angle-rotate .fa-angle-right{
  transform: rotate(90deg) !important;
  transition: 0.3s;
  margin-left:5px;
}
.wrap_show_paid_return_amt,.wrap-inner-tips
{
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding:70px 0px;
}
.wrap_show_paid_return_amt .wrap_return_amt h5{
  font-size:30px;
}
.wrap_show_paid_return_amt .wrap_return_amt #show_return_amt
{
  font-size:40px;
  text-align: center;
}
.wrap-tips,.wrap-pay-with-tips{
  display: none;
}
.show_paid_amt,.show_return_amt{
  
}
.wrap-report-tbl{
  padding:0px;
  margin-top:50px;
  overflow:hidden;
  clear:both;
}
 .serviceContent table.report_tbl th{
  white-space: nowrap;
  text-align: center;
}
.serviceContent table.report_tbl td{
  padding:13px;
  color: rgb(70 69 69);
  /* border-top: none !important; */
  border-top: 1px solid #eaeaea;
  white-space: nowrap;
  text-align: center;
} 

.table th{
  white-space: nowrap;
  /* text-align: center; */
}
.table td{
  padding:13px !important;
  color: rgb(70 69 69);
  /* border-top: none !important; */
  border-top: 1px solid #eaeaea;
  white-space: nowrap;
  /* text-align: center; */
}
.table td:first-child,.table th:first-child{
  padding-left:30px !important;
}

table#tbl-sales-billing td{
  text-align:left;
}
.dataTables_length,.dataTables_filter
{
  margin-bottom:20px;
}
 
.dataTables_filter input{
  border-bottom:1px solid #dadada !important;
  padding:5px;
}

table.dataTable>tbody>tr.child ul.dtr-details {
  border: 1px solid #e5e5e5;
  width: 100%;
}
table.dataTable>tbody>tr.child ul.dtr-details>li:first-child {
  padding-top: 8px !important;
}

table.dataTable>tbody>tr.child ul.dtr-details>li {
  float: left;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px;
  border-left: 1px solid #e5e5e5;
  /* border-top: 1px solid #e5e5e5; */
  /* border-right: 1px solid #e5e5e5; */
  width: 20%;
}
ul.dtr-details li {
  display: flex;
  flex-wrap: wrap;
}
.wrap-inner-print-done
{
  display: flex;
  justify-content: flex-end;
}
.paid_banner{
  padding: 10px;
    color: #f00;
    animation: text-shadow 1.5s ease-in-out infinite;
    /* font-size: 5em; */
    font-weight: 900;
    line-height: 1;
}
@keyframes text-shadow {
  0% {  
      transform: translateY(0);
      text-shadow: 
          0 0 0 #f3d342, 
          0 0 0 #c5fd2c, 
          0 0 0 #fb203b, 
          0 0 0 #fefc4b;
  }

  20% {  
      transform: translateY(-1em);
      text-shadow: 
          0 0.125em 0 #ebce2c, 
          0 0.25em 0 #c5fd2c, 
          0 -0.125em 0 #fb203b, 
          0 -0.25em 0 #fefc4b;
  }

  40% {  
      transform: translateY(0.5em);
      text-shadow: 
          0 -0.0625em 0 #fbaf0c, 
          0 -0.125em 0 #c5fd2c, 
          0 0.0625em 0 #fb203b, 
          0 0.125em 0 #fefc4b;
  }
  
 60% {
      transform: translateY(-0.25em);
      text-shadow: 
          0 0.03125em 0 #fbaf0c, 
          0 0.0625em 0 #c5fd2c, 
          0 -0.03125em 0 #fb203b, 
          0 -0.0625em 0 #fefc4b;
  }

  80% {  
      transform: translateY(0);
      text-shadow: 
          0 0 0 #fbaf0c, 
          0 0 0 #c5fd2c, 
          0 0 0 #fb203b, 
          0 0 0 #fefc4b;
  }
}
@media print{
  .hidden-print{
    display:none!important
  }
}
canvas#displayChart
{
   width:100% !important;
   /* height:40% !important; */
   height:300px !important;
}
/* .chartjs-size-monitor{
  width:100% !important;
   height:40% !important;
} */
/* .today_graph canvas{
  width:100% !important;
   height:40% !important;
}
.today_graph {
  position: relative;
  margin: auto;
  height: 100%;
  width: 50px;
} */

.wrap-switch-report-graph{
    padding: 10px 0px 0px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/****endclass*****/
.radio-toolbar {
  margin: 10px;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #391f5a;
  padding: 6px 10px;
  /* font-family: sans-serif, Arial; */
  font-size: 12px;
  border: 2px solid #5909c3;
  border-radius: 4px;
  color: #fff;
}

.radio-toolbar label:hover {
  background-color: rgb(96, 2, 124);
}

.radio-toolbar input[type="radio"]:focus + label {
    border: 2px dashed rgb(105, 6, 124);
}

.radio-toolbar input[type="radio"]:checked + label {
    background-color: rgb(192, 60, 253);
    border-color: rgb(90, 11, 97);
}

.wrap-toggle-btn{
 display: flex;
 justify-content: flex-end;
}

.radio-toolbar-small {
  margin: 10px;
}

.radio-toolbar-small input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.radio-toolbar-small label {
  display: inline-block;
  background-color: #b64009;
  padding: 6px 10px;
  /* font-family: sans-serif, Arial; */
  font-size: 12px;
  border: 2px solid #fa861a;
  border-radius: 4px;
  color: #fff;
}

.radio-toolbar-small label:hover {
  background-color: rgb(248, 127, 28);
}

.radio-toolbar-small input[type="radio"]:focus + label {
    border: 2px dashed rgb(252, 99, 28);
}

.radio-toolbar-small input[type="radio"]:checked + label {
    background-color: rgb(253, 153, 60);
    border-color: rgb(156, 61, 6);
}

.wrap-legend{
  text-align: center;
}
.radio-toolbar-lagend {
  margin: 10px;
}

.radio-toolbar-lagend input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.radio-toolbar-lagend label {
  display: inline-block;
  background-color: #14a2f5;
  padding: 2px 10px;
  /* font-family: sans-serif, Arial; */
  font-size: 12px;
  border: 2px solid #0688bb;
  border-radius: 4px;
  color: #fff;
}

.radio-toolbar-lagend label:hover {
  background-color: rgb(6, 81, 124);
}

.radio-toolbar-lagend input[type="radio"]:focus + label {
    border: 2px dashed rgb(3, 92, 133);
}

.radio-toolbar-lagend input[type="radio"]:checked + label {
    background-color: rgb(97, 197, 255);
    border-color: rgb(37, 159, 207);
}
.wrap_by_service{
  display: none;
}
.wrap-back-btn
{
  text-align: right;
  padding-right: 10px;
}
.wrap-search-filter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  /* grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); */
  grid-column-gap: 15px;
  grid-row-gap: 16px;
  margin-top: 20px;
  /* border: 1px solid #e5e5e5; */
  padding: 10px
}
.wrap-date {
  display: flex;
  margin-right: 10px;
  align-items: center;
}
.btn-clear-min, .btn-clear-max {
  visibility: hidden;
}
#view_chart_graph{
  overflow:hidden;
  clear: both;
}
.get_height{
  height:0px;
}
.hide-t-index{
  display: none;
}
.hide{
  display:none;
}
.show{
  display: block;
}
.wrap-all-dashboard{
  width: 100%;
  margin: 20px auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-column-gap: 15px;
  grid-row-gap: 50px;
  padding: 20px;
  transition: 0.6s ease-in-out;
}
.wrap-dashboard-box{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border:1px solid #e5e5e5;
    border-radius: 4px;
    background: #fafafa;
    padding:40px 0px;
}
.wrap-home-text{
  margin: 20px auto;
  width: 80%;
  text-align: center;
  min-height: 300px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.wrap-heading-form{
  display:flex;
}
.wrap-heading-form h5{
  padding-right: 10px;
  color:#fff;
}
.wrap-btn{
  margin-top:30px;
}
.wrap-employee-detail{
  margin:20px 0;
}
.wrap-password-eye{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.passwordGroup{
  width:100% !important;
}
.wrap_show_password{
  padding-left:10px;
}
.wrap-emp-detail{
  margin-left:20px;
}
ul.em-detail-list{
  padding:0px;
  margin:0px;
  list-style:none;
}
ul.em-detail-list li{ 
  float:left;
  width:20%;
  padding-right:10px;
  margin-bottom: 15px;
}
ul.em-detail-list li span:first-child{ 
  font-weight: bold;
  display: block;
}
.emp_img{
  object-fit: contain;
}
.cat_img{
  object-fit: contain;
}
.wrap-edit-employee-login{
  margin:50px auto;
}
.wrap-create-login-loc{
  display:none;
}
.wrap-permission{
  margin:20px 0px;
}
.se_toggle{
  display:none;
}
.graph_caption{
  text-align: center;
  font-weight: bolder;
  text-decoration: underline;
  text-transform: capitalize;
  font-size: 20px;
}
.flatpickr-input[readonly]{
  background: transparent !important;
  font-size:14px;
}
.wrap-qty-inc-dec{
  display:flex;
  align-items: center;
 
}
.wrap-qty-inc-dec button{
  padding:0px 10px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 12px;
  color: green;
}
.wrap-qty-inc-dec input
{
  text-align: center;
  height: 30px;
}
.wrap-qty-inc-dec input:read-only{
  background: transparent;
  border: none !important;
  outline: none !important;
  width:40px;
  height:30px;
}
.wrap-qty-inc-dec input:focus{
  border: none;
  outline: none;
}
.show-waiting{
  font-size:12px;
  font-style: italic;
  color:red;
  text-align: center;
}
.validation-error-message,.show_error
{
  color:red;
  font-size:14px;
  position: relative;
  top: -14px;
}
.error-msg{
  font-style: italic;
  color:red;
  text-align: center;
}
.has-border-red{
  border-bottom: 1px solid #f00 !important;
}
#dumy_time-error,#appointment_days-error,#day_arr-error,#service_arr-error,#comp_service_arr-error{
  top:2px;
}
/**/
.form-group {
  position:relative;  
}

.form-label {
  position: absolute;
  left: 10px;
  top: 10px;
  color: #999;
  background-color: #fff;
  z-index: 1;
  transition: transform 150ms ease-out, font-size 150ms ease-out;
}

.focused .form-label {
  transform: translateY(-125%);
  font-size: 10px;
  font-weight: normal  !important;
  /* background: transparent; */
  background-color: #fff;
}
.focusd .selService{
  
}

.form-input {
  position: relative;
  /* padding: 12px 0px 5px 0; */
  width: 100%;
  outline: 0;
  border: 0;
  /* box-shadow: 0 1px 0 0 #e5e5e5;
  transition: box-shadow 150ms ease-out; */
}

.form-input.filled {
  /* box-shadow: 0 2px 0 0 lightgreen; */
}
.loading_text{
  display:flex;
  align-items: center;
  justify-content: center;
  width:100%;
  height: 350px;
  color:#f00;
  font-weight: bold;
  font-size: 40px;
}
.wrap-login-rights
{
  margin-bottom:25px;
}
.wrap-btn-deg
{
  /* display: flex;
  align-items: flex-start;
  justify-content: flex-start; */
}
.more_designation{
  margin-left:10px;
}
.hideMoreDeg{
  display:none;
}
.table.dataTable
{
  /* width:100% !important */
}
.selService{
  display:none;
}
.blue-text{
  color:#4AA2CC !important;
}
.wrap-ul-list
{
  overflow: auto;
  clear:both;
  margin-bottom: 20px;
  max-height: 320px;
}
 
ul.appEmpList
{
  display:block !important;
}
.wrap-print-btn
{
  margin:10px;
}
.wrap-print-btn .print-btn{
  padding:6px;
}
.dt-buttons{
  display:block;
  float:left;
  clear:both;
}
.dt-buttons button{
  color: #fff;
    background-color: #007bff;
    border-color: #007bff;
     display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}
.wrap-report-tbl .text-right{
  display:none;
}
#save_opening_hr{
  display:none;
}
.borderRemove{
  border:none !important;
  -webkit-appearance: none !important;
    -moz-appearance: none !important;
    text-indent: 1px;
    text-overflow: '';
}
.hideCloseCheckBox{
  display: none;
}
.fc-time-grid .fc-event {
  position: relative !important;
  left: 0px !important;
  top: 0px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  padding-bottom: 10px;
  padding-left: 10px;
}
.fc-time-grid .fc-event .fc-content
{
  font-size:18px;
  color:#333;
}
.wrap-notification
{
  position: fixed;
    right: 40px;
    bottom: 8px;
    z-index: 99999999;
}
.noti_body{

}
.wrap_msg{
  position:relative;
  top:0px;
  right:0px;
  clear:both;
  margin-bottom:10px;
  border:1px solid #14a2f5;
  background:#daefff;
}
.wrap_msg .close_noti
{
  position: absolute;
    top: -9px;
    right: -9px;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    color: #fff;
    background-color: #f00;
    text-align: center;
    font-size: 16px;
    font-weight: normal;
}
.wrap_msg_context
{
  padding:20px;
}

ul.wrap-notification-list{
        padding: 0;
        list-style: none;
    }
    ul.wrap-notification-list li{
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul.wrap-notification-list li a{
        display: block;
        padding: 8px 25px;
        color: #333;
        text-decoration: none;
        background: #e5e5e5;
        border-radius: 4px;
    }
    ul.wrap-notification-list li a:hover{
        color: #fff;
        background: #939393;
    }
    ul.wrap-notification-list li ul.dropdown-sub-menu{
        min-width: 400px; /* Set width of the dropdown */
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
        left: 12px;
        margin-top: 10px;
    }
    ul.wrap-notification-list li ul.dropdown-sub-menu li{
        display: block;
        padding:20px;
    }
    .dropdown-sub-menu::before {
      border-bottom: 9px solid rgba(0, 0, 0, 0.2);
      border-left: 9px solid rgba(0, 0, 0, 0);
      border-right: 9px solid rgba(0, 0, 0, 0);
      content: "";
      display: inline-block;
      left: 5%; /* position */
      position: absolute;
      top: -8px;
  }
  
  .dropdown-sub-menu::after {
      border-bottom: 8px solid #f2f2f2;
      border-left: 9px solid rgba(0, 0, 0, 0);
      border-right: 9px solid rgba(0, 0, 0, 0);
      content: "";
      display: inline-block;
      left: 5%; /* position */
      position: absolute;
      top: -7px;
  }

  .show-dropdown
    {
      display:block !important;
    }
    .wrap-bell-link
    {
      position:relative;
    }
    .wrap-bell-link .wrap-noti-counter
    {
      position:absolute;
      top:-9px;
      right:-9px;
    }
    .wrap-bell-link .noti-counter{
      border:1px solid #fb203b;
      background: #f00;
      color:#fff;
      font-size:12px;
      text-align: center;
      width:25px;
      height:25px;
      border-radius: 50%;
      padding: 6px 10px
    }
    .schViewButton{
      display:flex;
    }
    .wrap-inner-service{
      padding: 10px;
      border: 2px double #e5e5e5;
      margin-bottom: 20px;
      border-radius: 4px;
      background: #fbfbfb;
    }
    .hide_days_duration{
      display: none;
    }
    .wrap-inner-client
    {
      padding: 10px;
      padding-top:50px;
      border: 2px double #e5e5e5;
      margin-bottom: 20px;
      border-radius: 4px;
    }
    .wrap-services{
      width: 100%;
      margin: 20px auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      grid-column-gap: 15px;
      grid-row-gap: 10px;
      padding: 20px;
      transition: 0.6s ease-in-out;
      /* margin-top: 20px; */
      /*border: 1px solid #e5e5e5;*/
    }
    .wrap-service-display
    {
      width: 100%;
      margin: 20px auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      grid-column-gap: 15px;
      grid-row-gap: 10px;
      padding: 20px;
      transition: 0.6s ease-in-out;
      /* margin-top: 20px; */
      /*border: 1px solid #e5e5e5;*/
    }
    .wrap-service-category
    {
      width: 100%;
      margin: 20px auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      grid-column-gap: 15px;
      grid-row-gap: 10px;
      padding: 20px;
      transition: 0.6s ease-in-out;
      /* margin-top: 20px; */
      /*border: 1px solid #e5e5e5;*/
    }
    .service-display{
      /*border-right: 1px solid #e5e5e5;*/
    }
    .service-display:last-child{
      border-right: none;
    }
    ul.serviceDisplayList{
      padding:0px;
      margin:0px;
      list-style: none;
    }
    ul.serviceDisplayList li{
      padding:10px;
    }
    .wrap-buy-btn{
      margin-top:20px;
    }
    #client-wrapper{
      height:300px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .wrap-outer-edit-payment{
      width: 100%;
      margin: 0px auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      grid-column-gap: 15px;
      grid-row-gap: 10px;
      padding: 8px;
      transition: 0.6s ease-in-out;
    }
    .wrap-client-location{
      /*height:400px;
      overflow-y: auto;*/
      position: relative;
    }
    .wrap-inner-client-location{
      border:1px solid #e5e5e5;
      margin-top:20px;
      margin-bottom:20px;
      padding:10px;
    }
    .wrap-address{
      width: 100%;
      margin: 0px auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      grid-column-gap: 15px;
      grid-row-gap: 10px;
      padding: 20px;
      transition: 0.6s ease-in-out;
    }
    .wrap-contact-person{
      width: 100%;
      margin: 0px auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      grid-column-gap: 15px;
      grid-row-gap: 10px;
      padding: 20px;
      transition: 0.6s ease-in-out;
    }
    .wrap-service-plan{
      width: 100%;
      margin: 0px auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      grid-column-gap: 15px;
      grid-row-gap: 10px;
      padding: 20px;
      transition: 0.6s ease-in-out;
    }
    .wrap-plan-heading{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
    }
    .plan-heading{
      text-transform: capitalize;
    }
    .btn_change_plan{
      margin-left:10px;
    }
/***/
  :root
  {
    --text: "Select service plan";
  }
  .multiple_select
  {
    height: 18px;
    width: 90%;
    overflow: hidden;
    -webkit-appearance: menulist;
    position: relative;
  }
  .multiple_select::before
  {
    content: var(--text);
    display: block;
    margin-left: 5px;
    margin-bottom: 2px;
  }
  .multiple_select_active
  {
    overflow: visible !important;
  }
  .multiple_select option
  {
    display: none;
      height: 18px;
    background-color: white;
  }
  .multiple_select_active option
  {
    display: block;
  }

  .multiple_select option::before {
    content: "\2610";
  }
  .multiple_select option:checked::before {
    content: "\2611";
  }
  .outer-wrap-billing{
    border: 1px solid #e5e5e5;
    padding: 20px;
    background: #fafafa;
    margin-bottom: 50px;
    overflow:hidden;
  }
  .wrap-billing{
    width:100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-column-gap: 0%;
    grid-row-gap: 20px;
    

    overflow: hidden;

  }
  .first-col{
    
    padding-right: 10px;
    font-weight:bold;
  }
  .wrap_card_payment,.wrap-paypal-pay{
    display:none;
  }
  #billing_cycle-error{
    margin-top:20px;
  }
  .wrap_paying_for{
    /* display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px; */
  }
  .wrap_paying_for .show_paying_date{
    /* padding-left:10px; */
  }
  .wrap-client-address-detail{
    position: relative;
  }
  ul.billingAddress{
    padding: 0px;
    margin: 0px;
    list-style: none;
    margin-left: 18px;
    list-style: circle;
  }
 .wrap-billing-menu{
  padding: 6px;
  margin: 20px 0px;
  background: #007bff;
  height: 44px;
  overflow:hidden;
 }
 .wrap-billing-menu ul.menuList{
   padding:0px;
   margin:0px;
   list-style: none;
  
 }
 .wrap-billing-menu ul.menuList li{
    float:left;
    padding: 4px 14px;
    border-right:1px solid #03031f;
 }
 .wrap-billing-menu ul.menuList li:last-child{
   border-right:none;
 }
 .wrap-billing-menu ul.menuList li a{
   color:#fff;
   font-style: normal;
   text-decoration: none;
   padding: 4px 14px;

 }
 .wrap-billing-menu ul.menuList li a:hover
 {
    background: #ffffff;
    border-radius: 20px;
    padding: 8px 14px;
    color: #027afb;
 }
 .wrap-billing-menu ul.menuList li a.active
 {
    background: #ffffff;
    border-radius: 20px;
    padding: 8px 14px;
    color: #027afb;
 }
 .wrap-page{
   display: none;
 }
 .active_page{
   display: block !important;
 }
 .wrap-history-detail{
   position:relative;
 }
 .wrap-btn-remove-client{
   display:flex;
   justify-content: center;
 }
 .wrap-dis-info{
   display:flex;
   align-items: center;
 }
 table.retTableBill{
   padding:0px;
   margin:20px 10px;
 }
 table.retTableBill td{
  padding: 6px;
  margin:0px;
}
.text-bold{
   font-weight: bold;
}
.border-bottom{
  border-bottom: 1px solid #e5e5e5;
}
.border-top{
  border-top: 1px solid #e5e5e5;
}
.border-grey{
  border:1px solid #e5e5e5;
}
.wrap-sum-ret-amt{
  display:flex;

}
.wrap-sumup-header{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    /* grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); */
    grid-column-gap: 15px;
    grid-row-gap: 16px;
    margin-top: 20px;
    padding-bottom: 30px;
}
.wrap-sumup-header div{
 border:1px solid #e5e5e5;
 text-align: center;
 padding:16px;
}
.wrap-sumup-header div div{
  border:none;
}
.indicator-wrapper {
    position:fixed;
    top:0;
    width:100%;
    height:5px;
    z-index: 9999;
  }

  .indicator {
    width:0;
    height:100%;
    background-color:#7770fd;
    box-shadow:0 2px 5px #6e67ee;
  }
  .wrap-billing-detail{
    height: 80vh;
    overflow: scroll;
    overflow-x: hidden;
  }
  button.active{
    box-shadow: 0 0 0 0.2rem rgb(38 143 255 / 50%);
  }
@media (max-width: 768px)
{
    table.dataTable>tbody>tr.child ul.dtr-details>li {
        float: none;
        /* display: block; */
        flex-wrap: nowrap;
        flex-direction: none;
        align-items: flex-start;
        padding: 10px 20px;
        border-left: none;
        /* border-top: 1px solid #e5e5e5; */
        /* border-right: 1px solid #e5e5e5; */
        width: 100%;
        align-items: flex-start;
        padding-left: 15px !important;
    }
    .wrap-total-detail h6
    {
      width:100%;
    }
    .table td:first-child, .table th:first-child {
      padding-left: 30px !important;
    }
    .table-responsive-sm
    {
      display:inline-table !important;
    }
    .selService{
      display:block;
      background: linear-gradient(#f1f1f1, #dbdbdb);
      color: #999;
    }
    .fc-day-grid-event .fc-content
    {
      word-break: break-word !important;
      white-space: normal !important;
    }
    .fc-center
    {
      text-align: center;
      margin-top:20px;
    }
    .fc-center h2{
      font-size: 22px;
    }
    .fc-right{
      margin-top:20px;
    }
    .px-5{
      padding-right:1rem !important;
      padding-left:1rem !important;
    }
    .fc-scroller{
      overflow-x: scroll !important;
    }
    .openingHours
    {
      overflow-x: scroll;
    }
    .openingHours ul
    {
      width:600px;
    }
    ul.wrap-notification-list li ul.dropdown-sub-menu{
      min-width:210px;
    }
    .wrap-day, .wrap-deal-service {
      grid-template-columns: repeat(auto-fit, minmax(166px, 1fr));
      word-break: break-all;
  }
  .active .bar{
    top:-32px;
      }
  .contentHead{
    margin-top:30px;
  }
  .wrap-notification{
    width:80%;
  }
  .radio-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .radio-toolbar label{
    text-align: center;
    margin-right: 6px;
  }
  .chartWrapper{
    overflow-x:scroll;
  }
  canvas#displayChart
  {
    width:1000px !important;
  }
  .display_graph{
    width:1000px;
    /* width:290px; */
    overflow-x: scroll;
  }
  .wrap-toggle-btn{
    align-items:center;
    justify-content: space-between;
  }
  .radio-toolbar-small
  {
    margin-left:0px;
    margin-right:10px;
  }
  .radio-toolbar-small label
  {
    padding:2px 4px;
    text-align: center;
  }
  .radio-toolbar{
    margin:0px;
  }
  .radio-toolbar label
  {
    padding:2px 4px;
  }
  .wrap-print-btn .print-btn
  {
    padding:2px 4px;
    font-size:12px;
  }
  .radio-toolbar-lagend
  {
    margin:0px;
  }
  .radio-toolbar-lagend label
  {
    padding:2px;
  }
  div.dt-buttons
  {
    display:flex;
  }
  .innerallHead {
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
  .filter-employee{
    margin:10px 0px 30px;
  }
  .dt-buttons button{
    margin-right: 10px;
  }
  .dt-buttons button:last-child{
    margin-right: 0px;
  }
  .wrap-billing-menu{
    height: auto;
  }
  ul.menuList{
    /* grid-template-rows: 35px auto 34px;
    column-gap: 10px;
    row-gap: 15px;
    display: grid; */
    /* grid-template-columns: 1fr 350px; */
  }
  ul.menuList li{
    float:none !important;
    border-left: none;
    border-right: none !important;
    border-bottom: 1px solid #4297f3;
    padding: 10px !important;
  }
}
.wrap-btn-pgn{
  display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}
.wrap-cus_search
{
  display:none;
}

@media print{
@page {
size: landscape;
}
 .no-print, .no-print *
    {
        display: none !important;
    }
}