@font-face {
  font-family:'SFProDisplay';
  src: url('../fonts/SFProDisplay-Regular.eot');
  src: url('../fonts/SFProDisplay-Regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/SFProDisplay-Regular.woff2') format('woff2'),
      url('../fonts/SFProDisplay-Regular.woff') format('woff'),
      url('../fonts/SFProDisplay-Regular.ttf') format('truetype'),
      url('../fonts/SFProDisplay-Regular.svg#SFProDisplay-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SFProDisplayMedium';
  src: url('../fonts/SFProDisplay-Medium.eot');
  src: url('../fonts/SFProDisplay-Medium.eot?#iefix') format('embedded-opentype'),
      url('../fonts/SFProDisplay-Medium.woff2') format('woff2'),
      url('../fonts/SFProDisplay-Medium.woff') format('woff'),
      url('../fonts/SFProDisplay-Medium.ttf') format('truetype'),
      url('../fontsSFProDisplay-Medium.svg#SFProDisplay-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}



@font-face {
  font-family: 'SFProDisplayBold';
  src: url('../fonts/SFProDisplay-Bold.eot');
  src: url('../fonts/SFProDisplay-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/SFProDisplay-Bold.woff2') format('woff2'),
      url('../fonts/SFProDisplay-Bold.woff') format('woff'),
      url('../fonts/SFProDisplay-Bold.ttf') format('truetype'),
      url('../fonts/SFProDisplay-Bold.svg#SFProDisplay-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}




body{ font-family: 'SFProDisplay'; margin: 0px; padding: 0px;
 color:#4F2913;  background: #fff; line-height:23px;  font-size:15px; overflow-x:hidden; 


}

::-moz-selection { 
  color: #fff;
  background: #4F2913;
}

::selection {
  color: #fff;
  background: #4F2913;
}


.sfpd-medium{ font-family: 'SFProDisplayMedium';}
.sfpd-bold{ font-family: 'SFProDisplayBold';} 

.text-color-gray-1{ color: #F6F2EF;}
.text-color-gray-2{ color: #A6958C;}
.text-color-gray-3{ color: #9D867B;} 

.text-color-org-1{ color: #FF6E1C;}

.font-12{ font-size: 12px;}
.font-14{ font-size: 14px;}
.font-17{ font-size: 17px;}
.font-16{ font-size: 16px;} 
.font-20{ font-size: 20px;}
.font-24{ font-size: 24px;}
.font-70{ font-size: 70px;}


.h-45{ height: 40px;}
.lh-70{ line-height: 70px;}

.w-337{ width: 337px;}


.appointment_book_link{ display: inline-block;} 
.appointment_book_link a{ display: inline-flex; align-items: center; text-decoration: none;} 
.appointment_book_link a .b_text{  margin-right: 10px;} 
.appointment_book_link a i{ display: inline-flex; align-items: center; justify-content: center; background: #FF6E1C; border-radius: 100px; width: 85px; height: 85px;} 
.appointment_book_link a i img{ width: 60%;}

.appointment_popup{ width: 100%; max-width: 476px; background: #FFFFFF; border-radius: 40px; padding: 20px;} 
.appointment_popup .screen-1{background: #4F2913 url(../images/chat-popup-bg.svg) no-repeat center top; border: 1px solid #FFFFFF5E; height: 450px; padding:45px 30px; border-radius: 40px;} 

.back-link{ width: 30px; height: 30px; background: #F6F2EF; font-size: 18px; border-radius: 10px; color: #000000;} 
.back-link:hover{ background: #FF6E1C; color: #fff;} 
.chat-ic-logo img{ max-width: 100px;} 

.b_text{ background: #F6F2EF; color: #4F2913; font-family:'SFProDisplay'; font-size: 18px; border-radius: 15px; padding: 10px 20px; text-decoration: none; } 
.b_text:hover{ background: #FF6E1C; color: #fff;} 

.b_text2{ background: #F6F2EF; color: #000; font-family: 'SFProDisplayMedium'; font-size: 18px; border-radius: 15px; padding: 10px 20px; text-decoration: none; } 
.b_text2:hover{ background: #FF6E1C; color: #fff;}

.font-35{ font-size: 35px;} 
.logo-app-bi{ max-width: 215px;} 

.chat-bx-bdy{ height: 300px; line-height: 20px; padding-right: 8px;} 

.chat-text-rw-1{ background: #F6F2EF; border-radius: 15px; padding: 12px 15px;} 

.bg-gray-chat{background: #F6F2EF; border-radius: 15px; color: #000; margin: 0px 8px 6px 0px; padding:8px 14px; display: inline-block; text-align: center;} 
.bg-gray-chat.active{ background: #FF6E1C;} 

.min-w-124{ min-width: 124px;} 

.radiobxA{margin: 0px 8px 6px 0px; padding: 0px;}
.radiobxA .form-check-label{background: #F6F2EF; border-radius: 15px; color: #000;  padding:8px 8px; display: inline-flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; min-width: 110px;} 
.radiobxA .form-check-input:checked + .form-check-label{background: #FF6E1C;} 

.s-chat-input{ background: #F6F2EF; height: 60px; color: #4F2913; border: none; box-shadow: none; outline: none; border-radius: 60px; padding: 0px 70px 0px 20px;} 
.s-chat-input::-moz-placeholder{color:#B9A9A1;opacity:1;}
.s-chat-input::placeholder{color:#B9A9A1;opacity:1;} 

.send-btn{ width: 50px; height: 50px; border: none;  background: #4F2913 url(../images/send.svg) no-repeat center center; border-radius: 100%; background-size: 18px !important; position: absolute; right: 10px; top: 5px;} 
.send-btn:hover{background: #FF6E1C url(../images/send.svg) no-repeat center center;} 

.calendar-chat table thead th{ background: #4F2913; color: #F6F2EF99;} 
.calendar-chat table tfoot th{ background: #4F2913; color: #F6F2EF99;} 
.calendar-chat table th, .calendar-chat table td{ padding:12px 8px!important; text-align: center!important;}  
.calendar-chat table tr th:first-child{ border-radius: 8px 0px 0px 8px;} 
.calendar-chat table tr th:last-child{ border-radius: 0px 8px 8px 0px;}
.calendar-chat table td{ background: #fff;} 
.calendar-chat table tbody tr:first-child td:first-child{ background: #fff; border-radius: 8px 0px 0px 0px;}
.calendar-chat table tbody tr:first-child td:last-child{ background: #fff; border-radius: 0px 8px 0px 0px;}


#msBox .not-available-t{ color: #BDBDBD!important;} 
#msBox .booked-t{ display: inline-flex; align-items: center; justify-content: center; background: #FF6E1C4D; color: #FF6E1C;  font-family: 'SFProDisplayMedium'; width: 100%; max-width: 35px; padding: 5px; height: 35px; border-radius: 8px;} 

#msBox .holiday-t{ display: inline-flex; align-items: center; justify-content: center; background: #8D7262; color: #fff;  font-family: 'SFProDisplayMedium'; width: 100%; max-width: 35px; height: 35px; padding: 5px; border-radius: 8px;} 

#msBox .today-t{ display: inline-flex; align-items: center; justify-content: center; background: #4F291366;
  color:#4F2913;  font-family: 'SFProDisplayMedium'; width: 100%; max-width: 35px; padding: 5px; height: 35px; border-radius: 8px;} 
 
  .calendar-date-selected ul li{ margin: 0px 5px 8px 0px;} 
  .calendar-date-selected ul li a .c_rd{ margin-right: 7px;} 
  .calendar-date-selected ul li a {font-family: 'SFProDisplayMedium'; display: inline-flex; align-items: center; padding:7px 10px; border-radius: 12px; text-decoration: none;}
  .calendar-date-selected ul li.available a{  border: 1px solid #00000070;  color: #4F2913; background: #fff; } 
  .calendar-date-selected ul li.available a .c_rd{ display: inline-block; width: 8px; height: 8px; border-radius: 50px; background: #4F2913;} 

  .calendar-date-selected ul li.today a{  border: 1px solid #B9A9A1;  background: #B9A9A1; color: #4F2913; } 
  .calendar-date-selected ul li.today a .c_rd{ display: inline-block; width: 8px; height: 8px; border-radius: 50px; background: #4F2913;}

  .calendar-date-selected ul li.booked a{  border: 1px solid #FFD4BB;  color: #FF6E1C; background: #FFD4BB; } 
  .calendar-date-selected ul li.booked a .c_rd{ display: inline-block; width: 8px; height: 8px; border-radius: 50px; background: #FF6E1C;}

  .calendar-date-selected ul li.holiday a{  background: #8D7262;  border: 1px solid #8D7262; color: #fff;} 
  .calendar-date-selected ul li.holiday a .c_rd{ display: inline-block; width: 8px; height: 8px; border-radius: 50px; background: #fff;} 

  .calendar-date-selected ul li.notavailable a{  background: #fff;  border: 1px solid #A5A5A5; color: #A5A5A5;} 
  .calendar-date-selected ul li.notavailable a .c_rd{ display: inline-block; width: 8px; height: 8px; border-radius: 50px; background: #A5A5A5;} 

  .btn-gray{ display: block; color: #4F2913; background: #F6F2EF; padding: 12px 10px; border-radius: 15px; text-align: center; text-decoration: none;} 
  .btn-gray:hover{ background: #FF6E1C; color: #fff;} 

  #msBox .select-time-bx h5{ font-size: 20px; font-family:'SFProDisplay'; } 
  #msBox .s-time-cl{ display: flex; align-items: center; border-width: 1px; border-style: solid; justify-content: center;  width: 100%; height: 45px; border-radius: 12px; font-family: 'SFProDisplayMedium';  }

  #msBox .s-available{ border-color: #fff; background-color: #fff; color: #4F2913;}
  #msBox .s-n-available{ border-color: #A5A5A5; background-color: #fff; color: #A5A5A5;}
  #msBox .s-selected{ border-color: #FF6E1C; background-color: #FFD4BB; color: #FF6E1C;} 
 
  .select-time_ftr .s-available:before{ content: ""; width: 8px; height: 8px; border-radius: 50px; background: #4F2913; display: inline-block; margin-right: 6px;}
  .select-time_ftr .s-n-available:before{ content: ""; width: 8px; height: 8px; border-radius: 50px; background: #A5A5A5; display: inline-block; margin-right: 6px;}
  .select-time_ftr .s-selected:before{ content: ""; width: 8px; height: 8px; border-radius: 50px; background: #FF6E1C; display: inline-block; margin-right: 6px;}  

  .btn-chat-2{ background: #FF6E1C; display: inline-flex; align-items: center; justify-content: center; height: 45px; min-width: 140px; color: #fff; text-decoration: none; border-radius: 14px;} 
  .btn-chat-2:hover{ background: #000; color: #fff;} 

  .price_t{ background: #4F2913; border-radius: 12px; padding: 10px 8px; text-align: center; min-width: 60px;}

  .appointment-type .radiobxA .form-check-input:checked + .form-check-label small, 
  .appointment-type .radiobxA .form-check-input:checked + .form-check-label p{ color: #fff !important;} 

  .add-g-calendar .form-check-input{ background-color: #F6F2EF; width: 18px; height: 18px; box-shadow: none !important; border: none !important; margin: 0px 6px 0px 0px;} 
  .add-g-calendar .form-check-input:checked{ background-color: #FF6E1C;} 

  .bdr-t-left{ border-left: 1px solid rgba(0,0,0,.25);}





  .chat_m_wrap{ position: fixed; 
    bottom: 10vh;
    z-index: 999999;
    cursor: pointer;transition-duration: 0.60s; }
  .appointment_book_link { position: relative; text-align: right;   bottom: -20px; }
  .insideChat{ position: absolute; 
    /* bottom: 50px;   */
    bottom: 5vh;
    height: 80vh;
    width: 476px; 
    display: none; 
    z-index: 999999999;
  }

  .chat-bx-bdy{ height: 350px; }
  .chat_footer{  border-top:#dbdbdb 1px solid; padding:15px 0px 0px; background: white; } 
  .chat_footer ul{ margin:0px; padding:0px; list-style:none; display:flex; align-items:center;} 
  .chat_footer ul li{ margin-left:20px;}
  .chat_footer ul li:nth-child(1){ width:85%; margin-left:0px;}  
  .chat_footer ul li:nth-child(2){  margin-left:auto;}  
  .chat_footer ul li .text_bx{ border:none; outline:none; width:100%; background:#fff; height:30px; color:#535353; font-family: 'Roboto', sans-serif; font-size:14px; font-weight:300; padding-left: 15px;}
  .chat_footer ul li .text_bx::-moz-placeholder{color:#bfbfbf;opacity:1;}
  .chat_footer ul li .text_bx::placeholder{color:#bfbfbf;opacity:1;}
  .chat_footer ul li .btnc{ width:27px; height:27px; border:none; outline:none; display:inline-block; text-decoration:none;} 
  .chat_footer ul li .btnc.send{ background:url(../images/send.png) no-repeat center center;} 
  .chat_footer ul li .btnc.send:hover{ background:url(../images/send_hv.png) no-repeat center center;}
  
  .scroller::-webkit-scrollbar {  width: 4px; }
  .scroller::-webkit-scrollbar-thumb { background-color: #FF6E1C; border-radius: 10px; }
  .scroller::-webkit-scrollbar-track { background: #F6F2EF; }

  .m-top-15{ margin-top: -15px;}
  .app_monthly_schedule_wrapper table tbody{ background: #fff!important; }



/*----------------------------------div_pagination css start----------------------------------*/

#div_pagination{display:flex; justify-content:flex-end;} 
#div_pagination a{ display:inline-block; text-decoration:none; font-family: 'Roboto', sans-serif; font-weight:400; font-size:14px; color:#000; border:#DFDFDF 1px solid; border-radius:18px; padding: 4px 13px;} 
#div_pagination a i img{ width:10px;} 
#div_pagination a.previous_month{ margin-right:10px;}
#div_pagination a.previous_month i{ margin-right:8px;} 
#div_pagination a.next_month i{ margin-left:8px;}  
#div_pagination a.next_month i img{filter: brightness(0) invert(1);}
#div_pagination a.next_month{ background:#8D7262; border:#8D7262 1px solid; color:#fff;} 
#div_pagination a.previous_month:hover{ background:#FF6E1C; border:#FF6E1C 1px solid; color:#fff;} 
#div_pagination a.previous_month:hover i img{filter: brightness(0) invert(1);}
#div_pagination a.next_month:hover{ background:#FF6E1C; border:#FF6E1C 1px solid; color:#fff;} 
#div_pagination a.next_month:hover i img{filter: brightness(0) invert(1);}
#div_pagination{ margin-bottom: 12px; }

/*----------------------------------div_pagination css end----------------------------------*/