/****************************************************************************************************/
/***************** this is portfolio-calendar , courseHome-calendar *********************************/
/****************************************************************************************************/

#calendar-header{
  background-color: #2B3944;
}

#cal-header{ 
  border-top-left-radius: 4px; 
  border-top-right-radius:4px ;
}

@media (max-width: 991px){ 
  #cal-header{  
    margin-left:0px;  
    margin-right:0px; 
  } 
}

#current-month{  
  color:#ffffff; 
}

#cal-header .fa-chevron-left{ 
  color:#ffffff; 
}

#cal-header .fa-chevron-right{ 
  color:#ffffff; 
}

.text-agenda-title,
.text-agenda-title:hover{
  color:#ffffff; 
}

.cal-day-outmonth,
.datetimepicker table tr td.old, 
.datetimepicker table tr td.new,
.datepicker table tr td.old, 
.datepicker table tr td.new{
  background-color: #FAFBFC;
}
.datetimepicker table tr td.old,
.datetimepicker table tr td.new,
.datepicker table tr td.old,
.datepicker table tr td.new{
  color: #2B3944 !important;
}

.btn-calendar-prev, .btn-calendar-next{
  height:25px; width:25px; 
  font-size:11px;
}

#cal-slide-content {
  -webkit-box-shadow:none  ;
  box-shadow: none  ;
  background: #ffffff ;
  background-image: none !important;
  box-shadow: none !important;
  border: solid 1px #EFF2FB;
}


#cal-slide-content a.event-item {
  color: #005ad9 !important;
  font-weight: bold;
  line-height: 22px;
}

#cal-slide-content .event{
  width: 100%;
  height:5px;
}

.cal-day-today.cal-day-holiday .pull-right {
  background-color: #0073E6;
  padding: 4px 4px 3px 3px;
  border-radius: 50% ;
  color: #ffffff;
  width: 32px;
  height: 32px;
  text-align: center;
}

/****************************************************************************************************/
/****************************************************************************************************/

#cal-slide-content ul{
  padding: 12px;
  border: 0px;
}
#cal-slide-content ul li{
 margin-bottom: 12px;
}
#cal-slide-content ul li .event-item{
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
}
.cal-month-day{
  display: flex;
  justify-content: center;
  align-items: center;
}
.cal-month-day .pull-right,
.cal-day-weekend span[data-cal-date]{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  font-size: 14px;
  font-style: normal;
  color: #2B3944;
  margin: 0;
  opacity: 1;
}
.cal-day-today span[data-cal-date],
.cal-day-holiday span[data-cal-date]{
  border-radius: 50%;
  background-color: #0073E6;
  color: #ffffff;
  font-weight: normal;
  font-size: 14px;
  height: 32px;
  width: 32px;
}
.cal-day-today span[data-cal-date]{
  color: #2B3944;
  background-color: transparent;
  border: solid 1px #0073E6;
}
.cal-month-box .cal-day-today span[data-cal-date] {
  font-size: 14px !important;
}
.cal-month-day .events-list{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.cal-row-fluid.cal-row-head .cal-cell1{
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  color: #2B3944;
}
.cal-month-box{
  border: 0px !important;
}
.cal-month-box .cal-row-fluid{
  border: 0px !important;
}
.cal-month-box .cal-row-fluid .cal-cell1{
  border: 0px !important;
}
.cal-day-outmonth span[data-cal-date] {
  opacity: 1;
}
.day-event.day-highlight{
  margin-top: 0px !important;
}















/************************************rgba(255, 255, 255, 0.5)**********************************************/
/***************** this is mypersonal-calendar *********************************/
/****************************************************************************************************/

.fc-view, .fc-view>table {
  position: relative;
  z-index: 0;
}

.myPersonalCalendar table {
  width: 100% !important;
  box-sizing: border-box;
  table-layout: fixed !important;
  border-collapse: collapse;
  border-spacing: 0;
}
.myPersonalCalendar tbody tr:hover{
  background-color: transparent;
}

@media(max-width:991px){
  .myPersonalCalendar,.personal-calendar-header{
    min-width:500px ;
  }
}

.myPersonalCalendar{
  background-color: #ffffff;
}
.personal-calendar-header{
  padding:7px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.personal-calendar-header .btn-group .btn{
  font-size: 15px;
}
.personal-calendar-header .btn-group .btn.active{
  background: #005ad9 ;
  border-radius: 4px ;
  z-index: 0;
}
.myPersonalCalendar .cal-row-fluid.cal-row-head{
  background: #ffffff;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom:0px;
}
.myPersonalCalendar .cal-row-fluid.cal-row-head .cal-cell1{
  color:#003e87;
  text-transform: uppercase;
  font-size: 14px;
  text-shadow: none;
  font-weight: 700;
}
.myPersonalCalendar .cal-row-fluid.cal-row-head .cal-cell1:hover{
  background-color: transparent;
}
.myPersonalCalendar .cal-month-day{
  display: flex;
  justify-content: center;
  align-items: center;
}
.myPersonalCalendar .cal-month-day .pull-right{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  margin: 0;
  opacity: 1;
  color: #2B3944;
  font-size: 17px ;
}
.myPersonalCalendar .cal-month-box .cal-day-today span[data-cal-date]{
  color: #ffffff; font-size: 17px !important;
}
.myPersonalCalendar .cal-day-holiday span[data-cal-date]{
  color: #ffffff;
}
.myPersonalCalendar .cal-cell{
  border: solid 0.5px #f5f4f4 ;
}
.myPersonalCalendar .fc-time-grid-event{
  display: flex ;
  justify-content: center ;
  align-items: center ;
}

/********************************************* DATES TUTOR CALENDAR VIEW **********************************************/

@media(max-width:991px){
  .calendar-events-container{
    overflow: auto;
  }
}


.calendarViewDatesTutorGroup .fc-view-container *, 
.calendarViewDatesTutorGroup .fc-view-container :after, 
.calendarViewDatesTutorGroup .fc-view-container :before,
.calendarAddDaysCl .fc-view-container *, 
.calendarAddDaysCl .fc-view-container :after, 
.calendarAddDaysCl .fc-view-container :before,
.bookingCalendarByUser .fc-view-container *, 
.bookingCalendarByUser .fc-view-container :after, 
.bookingCalendarByUser .fc-view-container :before,
.myCalendarEvents .fc-view-container *, 
.myCalendarEvents .fc-view-container :after, 
.myCalendarEvents .fc-view-container :before {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

/* table */

.calendarViewDatesTutorGroup table,
.calendarAddDaysCl table,
.bookingCalendarByUser table,
.myCalendarEvents table {
  width: 100%;
  box-sizing: border-box ;
  table-layout: fixed !important;
  border-collapse: collapse ;
  border-spacing: 0 ;
  border-color: #EFF6FF;
}
.calendarViewDatesTutorGroup .fc-toolbar .fc-state-active, 
.calendarViewDatesTutorGroup .fc-toolbar .ui-state-active,
.calendarAddDaysCl .fc-toolbar .fc-state-active, 
.calendarAddDaysCl .fc-toolbar .ui-state-active,
.bookingCalendarByUser .fc-toolbar .fc-state-active, 
.bookingCalendarByUser .fc-toolbar .ui-state-active,
.myCalendarEvents .fc-toolbar .fc-state-active, 
.myCalendarEvents .fc-toolbar .ui-state-active {
  z-index: 0;
}
@media(max-width:991px){
  /* .calendarViewDatesTutorGroup, */
  .calendarAddDaysCl,
  .bookingCalendarByUser,
  .myCalendarEvents{
    width: 768px;
    overflow-x: auto;
  }
}

.calendarViewDatesTutorGroup .fc-basic-view .fc-day-top .fc-day-number {
  font-weight: 700;
}

/************************* table header ****************************/
.calendarViewDatesTutorGroup .fc-widget-header,
.calendarAddDaysCl .fc-widget-header,
.bookingCalendarByUser .fc-widget-header,
.myCalendarEvents .fc-widget-header,
.calendarViewDatesTutorGroup table .fc-head table thead tr th,
.calendarAddDaysCl table .fc-head table thead tr th,
.bookingCalendarByUser table .fc-head table thead tr th,
.myCalendarEvents table .fc-head table thead tr th{
  border-color:  #EFF6FF;
}
.calendarViewDatesTutorGroup table .fc-head,
.calendarAddDaysCl table .fc-head,
.bookingCalendarByUser table .fc-head,
.myCalendarEvents table .fc-head{
  border-color:  #EFF6FF;
}
.calendarViewDatesTutorGroup table .fc-head table thead tr th span,
.calendarAddDaysCl table .fc-head table thead tr th span,
.bookingCalendarByUser table .fc-head table thead tr th span,
.myCalendarEvents table .fc-head table thead tr th span{
  font-weight: 700;
}

/******************** table header - buttons  **********************/
.calendarViewDatesTutorGroup .fc-header-toolbar .fc-button-group .fc-prev-button,
.calendarViewDatesTutorGroup .fc-header-toolbar .fc-button-group .fc-next-button,
.calendarAddDaysCl .fc-header-toolbar .fc-button-group .fc-prev-button,
.calendarAddDaysCl .fc-header-toolbar .fc-button-group .fc-next-button,
.bookingCalendarByUser .fc-header-toolbar .fc-button-group .fc-prev-button,
.bookingCalendarByUser .fc-header-toolbar .fc-button-group .fc-next-button,
.myCalendarEvents .fc-header-toolbar .fc-button-group .fc-prev-button,
.myCalendarEvents .fc-header-toolbar .fc-button-group .fc-next-button{
  margin-right: 10px;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  background-image: none;
  background-color: #ffffff;
  border-color: #0073E6;
}
.calendarViewDatesTutorGroup .fc-header-toolbar .fc-button-group .fc-prev-button .fc-icon::after,
.calendarViewDatesTutorGroup .fc-header-toolbar .fc-button-group .fc-next-button .fc-icon::after,
.calendarAddDaysCl .fc-header-toolbar .fc-button-group .fc-prev-button .fc-icon::after,
.calendarAddDaysCl .fc-header-toolbar .fc-button-group .fc-next-button .fc-icon::after,
.bookingCalendarByUser .fc-header-toolbar .fc-button-group .fc-prev-button .fc-icon::after,
.bookingCalendarByUser .fc-header-toolbar .fc-button-group .fc-next-button .fc-icon::after,
.myCalendarEvents .fc-header-toolbar .fc-button-group .fc-prev-button .fc-icon::after,
.myCalendarEvents .fc-header-toolbar .fc-button-group .fc-next-button .fc-icon::after{
  color: #0073E6;
}


/************************** table body **************************/
.calendarViewDatesTutorGroup .fc-body table tbody tr td.fc-axis,
.calendarViewDatesTutorGroup .fc-body table tbody tr td.fc-axis span,
.calendarAddDaysCl .fc-body table tbody tr td.fc-axis,
.calendarAddDaysCl .fc-body table tbody tr td.fc-axis span,
.bookingCalendarByUser .fc-body table tbody tr td.fc-axis,
.bookingCalendarByUser .fc-body table tbody tr td.fc-axis span,
.myCalendarEvents .fc-body table tbody tr td.fc-axis,
.myCalendarEvents .fc-body table tbody tr td.fc-axis span{
  font-weight: 700;
}
.calendarViewDatesTutorGroup table .fc-body thead,
.calendarAddDaysCl table .fc-body thead,
.bookingCalendarByUser table .fc-body thead,
.myCalendarEvents table .fc-body thead{
  border-color: transparent ;
}
.calendarViewDatesTutorGroup table .fc-body .fc-widget-content,
.calendarAddDaysCl table .fc-body .fc-widget-content,
.bookingCalendarByUser table .fc-body .fc-widget-content,
.myCalendarEvents table .fc-body .fc-widget-content{
  border-color:  #EFF6FF;
}

/************************** table body - scrollbar **************************/
.calendarViewDatesTutorGroup table .fc-body .fc-widget-content .fc-scroller::-webkit-scrollbar,
.calendarAddDaysCl table .fc-body .fc-widget-content .fc-scroller::-webkit-scrollbar,
.bookingCalendarByUser table .fc-body .fc-widget-content .fc-scroller::-webkit-scrollbar,
.myCalendarEvents table .fc-body .fc-widget-content .fc-scroller::-webkit-scrollbar{
  width: 0px;
  height: 8px;
}
.calendarViewDatesTutorGroup table .fc-body .fc-widget-content .fc-scroller::-webkit-scrollbar-track,
.calendarAddDaysCl table .fc-body .fc-widget-content .fc-scroller::-webkit-scrollbar-track,
.bookingCalendarByUser table .fc-body .fc-widget-content .fc-scroller::-webkit-scrollbar-track,
.myCalendarEvents table .fc-body .fc-widget-content .fc-scroller::-webkit-scrollbar-track {
  background-color: #ffffff;
}
.calendarViewDatesTutorGroup table .fc-body .fc-widget-content .fc-scroller::-webkit-scrollbar-thumb,
.calendarAddDaysCl table .fc-body .fc-widget-content .fc-scroller::-webkit-scrollbar-thumb,
.bookingCalendarByUser table .fc-body .fc-widget-content .fc-scroller::-webkit-scrollbar-thumb,
.myCalendarEvents table .fc-body .fc-widget-content .fc-scroller::-webkit-scrollbar-thumb {
  background-color: #ffffff;
  border-radius: 20px;
  border: 1px solid transparent;
  background-clip: content-box;
}
.calendarViewDatesTutorGroup table .fc-body .fc-widget-content .fc-scroller::-webkit-scrollbar-thumb:hover,
.calendarAddDaysCl table .fc-body .fc-widget-content .fc-scroller::-webkit-scrollbar-thumb:hover,
.bookingCalendarByUser table .fc-body .fc-widget-content .fc-scroller::-webkit-scrollbar-thumb:hover,
.myCalendarEvents table .fc-body .fc-widget-content .fc-scroller::-webkit-scrollbar-thumb:hover{
  background: #ffffff;
}


/************************** table body - events  **************************/
.calendarViewDatesTutorGroup table .fc-body tbody tr td,
.calendarAddDaysCl table .fc-body tbody tr td,
.bookingCalendarByUser table .fc-body tbody tr td,
.myCalendarEvents table .fc-body tbody tr td{
  border-color: #EFF6FF ;
}

/******** About list-table for available dates of tutor *********/
.calendarViewDatesTutorGroup .fc-list-table .fc-list-heading .fc-widget-header {
  background: #EFF6FF ;
}
.calendarViewDatesTutorGroup .fc-list-table .fc-list-heading .fc-list-heading-main,
.calendarViewDatesTutorGroup .fc-list-table .fc-list-heading .fc-list-heading-alt{
  font-weight: 700;
}
.calendarViewDatesTutorGroup .fc-list-table .fc-list-item:hover td{ 
  background-color: transparent;
}
.fc-unthemed .fc-content, 
.fc-unthemed .fc-divider, 
.fc-unthemed .fc-list-heading td, 
.fc-unthemed .fc-list-view, 
.fc-unthemed .fc-popover, 
.fc-unthemed .fc-row, 
.fc-unthemed tbody, 
.fc-unthemed td, 
.fc-unthemed th, 
.fc-unthemed thead {
  border-color: #EFF6FF;
}
.fc-unthemed .fc-list-empty {
  background-color: transparent;
}
/***************************************************************/

.calendarAddDaysCl table .fc-body tbody tr,
.bookingCalendarByUser table .fc-body tbody tr,
.myCalendarEvents table .fc-body tbody tr{
  height: 40px;
}

.calendarAddDaysCl table .fc-body tbody tr td .fc-time-grid-event,
.myCalendarEvents table .fc-body tbody tr td .fc-time-grid-event{
  color:#ffffff !important; 
  font-weight: 700;
}

.calendarAddDaysCl .fc-time-grid-event,
.myCalendarEvents .fc-time-grid-event,
.bookingCalendarByUser .fc-time-grid-event{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.calendarAddDaysCl .fc-time-grid-event .fc-time span,
.myCalendarEvents .fc-time-grid-event .fc-time span,
.bookingCalendarByUser .fc-time-grid-event .fc-time span{
  font-weight: 700;
  color:#ffffff !important; 
}
.calendarAddDaysCl .fc-time-grid-event .fc-title,
.myCalendarEvents .fc-time-grid-event .fc-title,
.bookingCalendarByUser .fc-time-grid-event .fc-title {
  display: none;
}

.bookingCalendarByUser table .fc-body tbody tr td .fc-time-grid-event,
.calendarAddDaysCl table .fc-body tbody tr td .fc-time-grid-event,
.bookingCalendarByUser .fc-body tbody tr td .fc-time-grid-event,
.myCalendarEvents .fc-body tbody tr td .fc-time-grid-event{
  border: none;
  transition: 0.3s ease;
}
.bookingCalendarByUser table .fc-body tbody tr td .fc-time-grid-event:hover,
.calendarAddDaysCl table .fc-body tbody tr td .fc-time-grid-event:hover,
.bookingCalendarByUser .fc-body tbody tr td .fc-time-grid-event:hover,
.myCalendarEvents .fc-body tbody tr td .fc-time-grid-event:hover{
  filter: brightness(90%);
}

.popover.fade.show:has(.container-events-available) *,
.popover.fade.show:has(.tutor-available-event-date) *,
.popover.fade.show:has(.simple-user-booking-event) *{
  background-color: #000000 !important;
  color:#ffffff !important;
}
.popover.fade.show .popover-header:has(.container-events-available) *,
.popover.fade.show .popover-header:has(.tutor-available-event-date) *,
.popover.fade.show .popover-header:has(.simple-user-booking-event) *{
  color:#ffffff !important;
  background-color: #000000 !important;
}






















/****************************************************************************************************/
/*************************************** this is datetimepicker-calendar *************************************/
/****************************************************************************************************/

 .datetimepicker .table-condensed{ width:240px; }

 .datetimepicker .table-condensed thead{ border-bottom: 0px;}

 .datetimepicker .table-condensed th,.datetimepicker .table-condensed td { padding: 4px 15px; }

 .datetimepicker .table-condensed thead > tr > th,
 .datetimepicker .table-condensed tbody > tr > th,
 .datetimepicker .table-condensed tfoot > tr > th,
 .datetimepicker .table-condensed thead > tr > td,
 .datetimepicker .table-condensed tbody > tr > td,
 .datetimepicker .table-condensed tfoot > tr > td {
    font-size: 14px; padding: 5px; color:#212D37;
  }

  .datetimepicker .table-condensed thead > tr , 
  .datetimepicker .table-condensed tbody > tr , 
  .datetimepicker .table-condensed tbody , 
  .datetimepicker .table-condensed tfoot > tr {
    border:0;
  }

  .datetimepicker .table-condensed thead tr th.next::after{ 
    content: '\f178'; 
    font-size: 15px; 
    font-weight: 700; 
    color:#212D37;
  }

  .datetimepicker .table-condensed thead tr th.switch{ 
    font-size: 14px; 
    padding: 5px; 
    font-family: 'Manrope' , sans-serif; 
    font-weight: 700; 
    font-style: normal; 
    color:#212D37;
  }

  .datetimepicker .table-condensed thead tr th.prev::before{ 
    content: '\f177'; 
    font-size: 15px; 
    font-weight: 700; 
    color:#212D37;
  }

  
/****************************************************************************************************/
/*************************************** this is datepicker-calendar ********************************/
/****************************************************************************************************/

.datepicker-days .table-condensed{ 
  width:240px; 
}

.datepicker-days .table-condensed thead{ 
  border-bottom: 0px;
}

.datepicker-days .table-condensed th,
.datepicker-days .table-condensed td { 
  padding: 4px 15px; 
}

.datepicker-days .table-condensed thead > tr > th,
.datepicker-days .table-condensed tbody > tr > th,
.datepicker-days .table-condensed tfoot > tr > th,
.datepicker-days .table-condensed thead > tr > td,
.datepicker-days .table-condensed tbody > tr > td,
.datepicker-days .table-condensed tfoot > tr > td {
   font-size: 14px; 
   padding: 5px; 
   color:#212D37;
 }

 .datepicker-days .table-condensed thead > tr , 
 .datepicker-days .table-condensed tbody > tr , 
 .datepicker-days .table-condensed tbody , 
 .datepicker-days .table-condensed tfoot > tr {
    border:0;
 }

 .datepicker-days .table-condensed thead tr th.next::after,
 .datepicker-months .table-condensed thead tr th.next::after,
 .datepicker-years .table-condensed thead tr th.next::after,
 .datepicker-decades .table-condensed thead tr th.next::after,
 .datepicker-centuries .table-condensed thead tr th.next::after{ 
  content: '\f178'; 
  font-size: 15px; 
  font-weight: 700; 
  color:#212D37;
 }

 .datepicker-days .table-condensed thead tr th.datepicker-switch,
 .datepicker-months .table-condensed thead tr th.datepicker-switch,
 .datepicker-years .table-condensed thead tr th.datepicker-switch,
 .datepicker-years .table-condensed thead tr th.datepicker-switch,
 .datepicker-centuries .table-condensed thead tr th.datepicker-switch{ 
  font-size: 14px; 
  padding: 5px; 
  font-family: 'Manrope' , sans-serif; 
  font-weight: 700; 
  font-style: normal; 
  color:#212D37;
 }

 .datepicker-days .table-condensed thead tr th.prev::before,
 .datepicker-months .table-condensed thead tr th.prev::before,
 .datepicker-years .table-condensed thead tr th.prev::before,
 .datepicker-decades .table-condensed thead tr th.prev::before,
 .datepicker-centuries .table-condensed thead tr th.prev::before{ 
  content: '\f177'; 
  font-size: 15px; 
  font-weight: 700; 
  color:#212D37;
 }