FileMaster

Edit File: 24_9__light.css

/* ------------------------------------------------------------------------------------------------------------------ */
/* Light   -   24-09   -   C O L O R    S K I N           */
/* ------------------------------------------------------------------------------------------------------------------ */
/*  For best compatibility, please change parameters only in :root { ... } section  */
/* Round 1 */
:root {
    /* Round Properties */
    --wpbc_cal-day-cell-border-radius: 50%;
    --wpbc_cal-day-cell-border-width: 2px;
    --wpbc_cal-day-bg-color-opacity: 5%;
    --wpbc_cal-selected-day-bg-color-opacity: 90%;
    /* Default Font Sizes */
    --wpbc_cal-text-general-size: 14px;
    --wpbc_cal-text-cost-size: 50%;
    --wpbc_cal-text-header-size: 13px;
    --wpbc_cal-text-weekdays-size: 10px;
    --wpbc_cal-text-prev-next-links-size: 25px;
    /* Main Colors */
    --wpbc_cal-main-background-color: #fff;
    --wpbc_cal-header-text-color: #000;
    --wpbc_cal-text-prev-next-links-color: #555;
    --wpbc_cal-text-weekdays-color: #555;
    /* Days Colors */
    --wpbc_cal-unavailable-day-color: var(--wpbc_cal-main-background-color);            /* Usually it has to be the same as --wpbc_cal-main-background-color */
    --wpbc_cal-unavailable-text-color: #d4d4d4c7;
    --wpbc_cal-available-day-color: #FFF;
    --wpbc_cal-available-text-color: #000;
    --wpbc_cal-approved-day-color: #c66814;
    --wpbc_cal-approved-text-color: #c25b00;
    --wpbc_cal-pending-day-color: #7281bf;
    --wpbc_cal-pending-text-color: #5b6697;
    --wpbc_cal-selected-day-color: #6b96ce;
    --wpbc_cal-selected-text-color: #fff;
    --wpbc_cal-hover-day-color: #6b96ce;
    --wpbc_cal-hover-text-color: #65778d;
    --wpbc_cal-timespartly-day-color: #a8973c;
    --wpbc_cal-timespartly-text-color: #998a3a;

/* Minor Parameters */
        --wpbc_cal-day-cells-padding: 2px;
}
/* Color Scheme: - .violet 1 */
:root.violet {
  --wpbc_cal-unavailable-day-color: #FFF;
  --wpbc_cal-unavailable-text-color: #d4d4d4c7;
  --wpbc_cal-available-day-color: #FFF;
  --wpbc_cal-available-text-color: #000;
  --wpbc_cal-approved-day-color: #efa557;
  --wpbc_cal-approved-text-color: #fff;
  --wpbc_cal-pending-day-color: #635bff;
  --wpbc_cal-pending-text-color: #fff;
  --wpbc_cal-selected-day-color: #589fc1;
  --wpbc_cal-selected-text-color: #fff;
  --wpbc_cal-hover-day-color: #589fc16e;
  --wpbc_cal-hover-text-color: #fff;
  --wpbc_cal-timespartly-day-color: #7E6FB3;
  --wpbc_cal-timespartly-text-color: #fff;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* !!! Round Properties !!!  */
/* ------------------------------------------------------------------------------------------------------------------ */
/* Change Over days fix for Rounded Day Cells */
.wpbc-cell-box .wpbc-diagonal-el svg {
  width: calc( 100% + 0px );
  height: calc( 100% + 0px );
  border-radius: var( --wpbc_cal-day-cell-border-radius );
}
.datepick-inline td.datepick-days-cell.check_in_time .wpbc-cell-box .wpbc-diagonal-el,
.datepick-inline td.datepick-days-cell.check_out_time .wpbc-cell-box .wpbc-diagonal-el {
  margin-left: 0;
  margin-top: 0;
}
div.wpbc-cell-box .wpbc-diagonal-el svg polygon {
  fill: transparent;
}

/* Round Perfect Square Dates. Support in Browsers since 2021 y. */
.datepick-inline td.datepick-days-cell {
   aspect-ratio: 1 / 1;
}
.datepick-inline td.datepick-days-cell .wpbc-cell-box {
    padding: 0;
    margin: 0;
    position: relative;
    border-radius: var( --wpbc_cal-day-cell-border-radius );
    display: flex;
    flex-flow:column nowrap;
    justify-content: center;
    align-items: center;
    /*! Important settings for showing 'Perfect Square Dates' */
    width: calc( 100% - var( --wpbc_cal-day-cell-border-width ) - var( --wpbc_cal-day-cell-border-width ) );
    height:auto;
    aspect-ratio: 1 / 1;
}
/*! == Safari Only ==   Required Hack for showing 'Perfect Square Dates' on Safari and on iOS */
@supports (-webkit-backdrop-filter: blur(1px)) {
    .datepick-inline td.datepick-days-cell .wpbc-cell-box {
        height:100%;
    }
}
/* Center Day Number */
.datepick-inline .datepick-days-cell .date-cell-content span, .datepick-inline .datepick-days-cell .date-cell-content a {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

/* ================================================================================================================== */
/* Other CSS                                                                                                          */
/* ================================================================================================================== */
/* Font Sizes */
.booking_form_div div.bk_calendar_frame div {
  font-size: var(--wpbc_cal-text-general-size);
}

/* Calendar Legend */
div.block_hints.datepick {
  /*background: none;*/
  /*border-radius: 3px;*/
  /*box-shadow: 0 1px 2px #1111110d;*/
  /*padding: 10px;*/
  /*margin: 20px 0 0;*/
  /*border: 1px solid #cccccc87;*/
  /*max-width: 320px;*/
}
div.block_hints.datepick * {
  font-size: var(--wpbc_cal-text-general-size);
}
.block_check_in_out, .block_pending, .block_time, .block_booked, .block_free {
    float: left;
    width: 40px;
    height: 40px;
    line-height: 32px;
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
}
.block_hints.datepick .wpdev_hint_with_text .wpbc_calendar_legend_table_width_height,
.block_hints.datepick .wpdev_hint_with_text .wpbc_calendar_legend_table_width_height table{
  min-width:  var(--wpbc_cal_legend-day-cell-width, 40px);  /* //FixIn: 10.9.2.3 */
  width: var(--wpbc_cal_legend-day-cell-width, 40px) !important;
  height:   var(--wpbc_cal_legend-day-cell-height, 40px) !important;
    width: calc(var(--wpbc_cal_legend-day-cell-width, 40px) + var(--wpbc_cal-day-cells-padding, 0px) + var(--wpbc_cal-day-cells-padding, 0px)) !important;
    height: calc(var(--wpbc_cal_legend-day-cell-width, 40px) + var(--wpbc_cal-day-cells-padding, 0px) + var(--wpbc_cal-day-cells-padding, 0px)) !important;
}
.block_hints.datepick .wpdev_hint_with_text .wpbc_calendar_legend_table_width_height table.datepick.wpbc_calendar,
.block_hints.datepick .wpdev_hint_with_text .wpbc_calendar_legend_table_width_height .wpbc_calendar_legend_day_cell_height {
    height: var(--wpbc_cal_legend-day-cell-height, 40px) !important;
    border-width: 0;
}
.block_hints.datepick .datepick-inline {
    margin-top: -3px;
}
.block_hints .datepick-inline table.datepick.wpbc_calendar,
.block_hints .datepick-inline,
.block_hints .datepick-inline .datepick {
    background: transparent;
}
/*
.block_hints .datepick-inline .date_available .wpbc-cell-box {
    background: var( --wpbc_cal-main-background-color );
    background: rgb(from var(--wpbc_cal-available-day-color) r g b / 100%);
}
.block_hints .datepick-inline .date_approved .wpbc-cell-box {
    background: rgb(from var(--wpbc_cal-approved-day-color) r g b / 100%);
}
.block_hints .datepick-inline .date2approve .wpbc-cell-box {
    background: rgb(from var(--wpbc_cal-pending-day-color) r g b / 100%);
}
 */
.block_hints .block_free {
    border: var( --wpbc_cal-day-cell-border-width ) solid var(--wpbc_cal-available-day-color);
}
/* ------------------------------------------------------------------------------------------------------------------ */
/* ==  From  Calendar.css  ==  */
/* ------------------------------------------------------------------------------------------------------------------ */
div.datepick-inline table.datepick,
div.datepick-inline table.datepick th,
div.datepick-inline table.datepick td {
     border-width: 0;
}
/* // FixIn: 10.12.4.2. */
div.datepick-inline .datepick,
div.datepick-inline .calendar-links,
div.datepick-inline .calendar-links a,
div.datepick-inline .datepick-days-cell,
div.datepick-inline .datepick-days-cell a,
div.datepick-inline .datepick-days-cell div,
div.datepick-inline .datepick-title-row,
div.datepick-inline .datepick-title-row th {
  font-size: var(--wpbc_cal-text-general-size);
}
/* Mo Tu We Th Fr Sa Su */
/*#wpbc-new-admin-page .booking_form_div .datepick-inline .datepick .datepick-title-row th,*/
/*#wpbc-new-admin-page .booking_form_div .datepick-inline .datepick .datepick-title-row th *,*/
.datepick-inline .datepick .datepick-title-row th {
  font-size: var(--wpbc_cal-text-weekdays-size);
}
/* Month Name */
/*#wpbc-new-admin-page .datepick-inline .datepick-header, */
/*#wpbc-new-admin-page .datepick-inline .datepick-header span,*/
.datepick-inline .datepick-header,
.datepick-inline .datepick-header span{
  font-size: var(--wpbc_cal-text-header-size);
}
/* Next/Prev Month Links */
/* // FixIn: 10.12.4.2. */
div.datepick-inline .calendar-links {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 40px;
  margin-bottom: -40px;
}
div.datepick-inline .calendar-links .datepick-prev,
div.datepick-inline .calendar-links .datepick-next {
  flex: 0 1 30px;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: flex-end;
  margin: 0;
  line-height: 2em;
}
div.datepick-inline .calendar-links .datepick-prev a,
div.datepick-inline .calendar-links .datepick-next a,
div.datepick-inline .calendar-links .datepick-prev a:hover,
div.datepick-inline .calendar-links .datepick-next a:hover{

}
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */

/* Full Calendar Frame */
.datepick-inline {
  background: var( --wpbc_cal-main-background-color );
  border: 0px solid #555;
  box-shadow: 0 1px 5px 1px #00000014;
  border-radius: 4px;
  padding: 0;
}
/* Resolve Conflicts with tables in Elementor //FixIn: 10.9.2.2
table.wpbc_calendar tr:nth-child(2n) > td,
table.wpbc_calendar tr:nth-child(2n+1) > td {
  background-color: transparent;
}
*/
/* Background of one calendar month */
.datepick-inline .datepick-one-month {
    padding: 3px;
}
/* //FixIn: 10.9.2.2 */
.datepick-inline table.datepick.wpbc_calendar,
.datepick-inline .datepick,
.datepick-inline:not(.wpbc_calendar_legend_table_width_height) .datepick thead,
.datepick-inline:not(.wpbc_calendar_legend_table_width_height) .datepick tbody{
  background: var( --wpbc_cal-main-background-color );
}
.wpbc_ajx_avy__calendar .datepick-inline:not(.wpbc_calendar_legend_table_width_height) .datepick tbody{
    background: transparent;
}
/* Previous & Next links  and TITLE BACKGROUND */
.datepick-inline .calendar-links {
    border-bottom:none;
}
/* Prev - Next Text */
.datepick-inline .calendar-links .datepick-prev a,
.datepick-inline .calendar-links .datepick-next a,
.datepick-inline .calendar-links .datepick-prev a:hover,
.datepick-inline .calendar-links .datepick-next a:hover{
  color: var(--wpbc_cal-text-prev-next-links-color);                      /* FixIn: 9.3.1.4 */
  text-shadow: none;
  font-weight: 400;
  padding: 0 12px 0px;
  font-size: var(--wpbc_cal-text-prev-next-links-size);
}
/* Month Titles */
.datepick-inline .datepick-header {
  color: var(--wpbc_cal-header-text-color);                      /* FixIn: 9.3.1.4 */
  font-weight: 600;
  text-shadow: none;
  margin: -3px 0 4px;
  background: transparent;
}
  /* One month only, hide white padding */
  .datepick-inline:not(.datepick-multi) .datepick-one-month {
    padding: 0;
  }
  .datepick-inline:not(.datepick-multi) .datepick-header {
      margin: 0;
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      padding: 0px 0 0 17px;
      box-sizing: border-box;
  }
/* Week Titles */
div.datepick-inline .datepick-title-row th{
    border: 1px solid #ccc;
    color: var(--wpbc_cal-text-weekdays-color);
    font-weight: 600;
    text-transform: uppercase;
}
/* Cell border*/
.block_hints .block_free,
.block_hints .block_time,
.block_hints .block_booked,
.block_hints .block_pending,
.block_hints .block_check_in_out,
.datepick-inline .datepick-days-cell{
    border: 0 solid #e1e1e1;
    color:#4b4b4b;
    border-radius: var( --wpbc_cal-day-cell-border-radius );
    /*border-radius: 100px; !* If calendar width set as 100%, then  here we can  not use  border-radius: 50%; :( *!*/

border-radius: 6px;
    border-radius: var( --wpbc_cal-day-cell-border-radius );
  border-color: transparent;
  border-width: var( --wpbc_cal-day-cell-border-width ) !important;
  box-sizing: border-box;
}
/* Basically  this is padding between the dates: */
.datepick-inline th,
.datepick-inline .datepick-days-cell,
div.datepick-inline table.datepick.wpbc_calendar th,
div.datepick-inline table.datepick.wpbc_calendar td.datepick-days-cell{
  border-width: var( --wpbc_cal-day-cells-padding ) !important;
  box-sizing: border-box;
	border-style: solid;   /* // FixIn: 10.12.4.2. */
}
.datepick-inline th{
  border-color: var( --wpbc_cal-main-background-color ) !important;
}
/* Top and bottom "cost text" in day cells */
.datepick-inline .datepick-days-cell div.date-content-bottom,
.datepick-inline .datepick-days-cell div.date-content-top {
    font-weight: 400;
    color: var(--wpbc_cal-available-text-color);
    color: rgb( from var(--wpbc_cal-available-text-color) r g b / 50% );
    font-size: var(--wpbc_cal-text-cost-size);
}
/* Selected dates - Top and bottom "cost text" in day cells */
.datepick-inline .datepick-days-cell.datepick-current-day div.date-content-bottom,
.datepick-inline .datepick-days-cell.datepick-current-day div.date-content-top {
    /*color:#1d2d41;*/
}
/******************************************************************************** FixIn: 9.5.0.2 */
/*  New Stripes - Unavailable Cells - for  Booking > Availability page  ********/
/*******************************************************************************/
/* Stripes */
.wpbc_ajx_availability_container .datepick-inline .datepick .resource_unavailable:not(.datepick-unselectable,.datepick-current-day,.datepick-days-cell-over) .wpbc-cell-box {
  /*background: repeating-linear-gradient( 135deg, #fff, #fff 4px, #eaeaeb 4px, #eaeaeb 8px );*/
  /*background: repeating-linear-gradient( 135deg, #fff, #fff 4px, #f5f5ef 4px, #f5f5cf 8px );*/
  background: repeating-linear-gradient(-45deg, #eee 0 3px, var( --wpbc_cal-main-background-color ) 3px 8px);
}
/* Unselectable dates  &  headers - calendar empty cells */
.wpbc_ajx_availability_container .datepick-inline  th,
.wpbc_ajx_availability_container .datepick-inline .datepick-days-cell.datepick-unselectable{
    background: var(--wpbc_cal-main-background-color);                                                          /* Here the same color as at line #18 for  "Full Calendar Frame":   .datepick-inline { ... }  */
}
/* It is all unavailable dates */
.wpbc_ajx_availability_container .datepick-inline .date_user_unavailable,
.wpbc_ajx_availability_container .datepick-inline .before_after_unavailable,    /* "Before/After" unavailable days from  Settings General page in "Availability" section */
.wpbc_ajx_availability_container .datepick-inline .weekdays_unavailable,      /* "Weekdays" unavailable  from  Settings General page in "Availability" section */
.wpbc_ajx_availability_container .datepick-inline .season_unavailable       /* "SEASON" unavailable dates  defined at  Booking > Resources > Availability page */
{
   background: var(--wpbc_cal-main-background-color);
}
/* It is all unavailable RESOURCE dates defined at Booking > Availability page */
.wpbc_ajx_availability_container .resource_unavailable:not(.datepick-unselectable) {
    background: transparent;
    color:#fff;
}
/* Unavailable SELECTABLE days for Booking > Availability page */
.block_hints .datepick-inline .datepick-days-cell.date_user_unavailable a,
.datepick-inline .datepick-days-cell.date_user_unavailable:not(.datepick-unselectable) a{
  color:#ccc;
}
/* Unselectable dates - hide check in/out */
.wpbc_ajx_availability_container .datepick-inline td.datepick-days-cell.check_in_time.datepick-unselectable .wpbc-cell-box .wpbc-diagonal-el,
.wpbc_ajx_availability_container .datepick-inline td.datepick-days-cell.check_out_time.datepick-unselectable .wpbc-cell-box .wpbc-diagonal-el{
  display: none;
}
/*********************************************************************************/
/* U N S E L E C T A B L E    -   Usually when we select 1st date with range dates selection mode, previous dates become unselectable. */
div.wpbc_ajx_availability_container .datepick-inline .datepick-unselectable,
.datepick-inline .datepick-unselectable{
  color: var(--wpbc_cal-unavailable-text-color);
  text-shadow: none;
  font-weight: 600;
}
.datepick-inline .datepick-unselectable span{                                                        /*  //FixIn: 8.9.4.13 */
    text-shadow: none;
}
/******************************************************************************** FixIn End: 9.5.0.2 */

/*******************************************************************************/
/*  Dates Cells       **********************************************************/
/*******************************************************************************/

/* A V A I L A B L E - BACKGROUND */
.block_hints .block_free,
.block_hints .block_time,
.block_hints .block_check_in_out div.check-in-div,                             /* Item  for the LEGEND */
.block_hints .block_check_in_out div.check-out-div,                             /* Item  for the LEGEND */
.datepick-inline .date_available .wpbc-cell-box,
.datepick-inline .timespartly.check_in_time div.check-in-div,                   /* Define the COLOR fot the check  in / out times the same as available*/
.datepick-inline .timespartly.check_out_time div.check-out-div {
    background: transparent;
    background: rgb( from var(--wpbc_cal-available-day-color) r g b / var( --wpbc_cal-day-bg-color-opacity ) );
    border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-available-day-color);
}
.block_hints .block_free {
    /*background: var(--wpbc_cal-main-background-color);*/
}
.datepick-inline .datepick-unselectable .wpbc-cell-box,
.block_hints .datepick-unselectable .wpbc-cell-box{
    background: var(--wpbc_cal-main-background-color);
    background: rgb( from var(--wpbc_cal-unavailable-day-color) r g b / var( --wpbc_cal-day-bg-color-opacity ) );
    background: var(--wpbc_cal-unavailable-day-color);
    border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-unavailable-day-color);
}
/* A V A I L A B L E  - Text A */
.block_hints .block_free a,
.block_hints .block_time,
.datepick-inline .date_available a{
    color: var(--wpbc_cal-available-text-color);
    font-weight: 600;
    text-shadow: none;
}
/*******************************************************************************/

/* T I M E   S L O T S */
.block_hints .block_time,
.datepick-inline .timespartly{

}
/*******************************************************************************/

/* A P P R O V E D  - BACKGROUND */
.block_hints .date_approved.block_check_in_out,
.block_hints .block_booked,
.datepick-inline .date_approved .wpbc-cell-box,
/* A P P R O V E D  - BACKGROUND for Check In Pending & Check Out Approved ||  Check Out Pending & Check In Approved   Dates    //FixIn: 6.0.1.2 */
td.timespartly.check_in_time.check_out_time.check_in_time_date2approve.check_out_time_date_approved div.check-in-div,
td.timespartly.check_in_time.check_out_time.check_out_time_date2approve.check_in_time_date_approved div.check-out-div {
    background: transparent;
    background: rgb( from var(--wpbc_cal-approved-day-color) r g b / var( --wpbc_cal-day-bg-color-opacity ) );
    border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-approved-day-color);
}
/* A P P R O V E D  -  T E X T /including partially booked - timeslots/ */
.block_hints .date_approved.block_check_in_out,
.block_hints .block_booked,
.datepick-inline .date_approved .wpbc-cell-box,
.block_hints .block_booked a,
.datepick-inline .date_approved a{
    color: var( --wpbc_cal-approved-text-color );
    font-weight: 600;
    text-shadow: none;
}
/* CHECK IN and CHECK OUT  Borders for the approved cells - the COLOR have to be the SAME as BACKGROUND of this cell*/
.block_hints .date_approved.block_check_in_out div.check-in-div,                /* Item  for the LEGEND */
.datepick-inline .date_approved.timespartly.check_in_time div.check-in-div{
    border-right: 1px dotted var( --wpbc_cal-approved-day-color );
}
.block_hints .date_approved.block_check_in_out div.check-out-div,               /* Item  for the LEGEND */
.datepick-inline .date_approved.timespartly.check_out_time div.check-out-div{
    border-left: 1px dotted var( --wpbc_cal-approved-day-color );
}
/*******************************************************************************/

/* P E N D I N G  - BACKGROUND */
.block_hints .date2approve.block_check_in_out,
.block_hints .block_pending ,
.datepick-inline .date2approve .wpbc-cell-box,
/* P E N D I N G  - BACKGROUND for Check In Approved & Check Out Pending ||  Check Out Approved & Check In Pending    Dates     //FixIn: 6.0.1.2  */
td.timespartly.check_in_time.check_out_time.check_in_time_date_approved.check_out_time_date2approve div.check-in-div,
td.timespartly.check_in_time.check_out_time.check_out_time_date_approved.check_in_time_date2approve div.check-out-div {
    background: transparent;
    background: rgb( from var(--wpbc_cal-pending-day-color) r g b / var(--wpbc_cal-day-bg-color-opacity) );
    border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-pending-day-color);
}
/* P E N D I N G  -  T E X T /including partially booked - timeslots/ */
.block_hints .date2approve.block_check_in_out,
.block_hints .block_pending,
.datepick-inline .date2approve .wpbc-cell-box,
.block_hints .block_pending a,
.datepick-inline .date2approve a {
    color: var(--wpbc_cal-pending-text-color);
    font-weight: 600;
    text-shadow: none;
}
/* Strike Text  for booked dates */
.block_hints .block_pending span *:after,
.datepick-inline .date_approved span:after ,
.block_hints .block_booked span *:after,
.datepick-inline .date2approve span:after {
    border-top: 0px solid;
    position: absolute;
    content: "";
    right: 0;
    top:calc(50% + 1px);
    left: 25%;
    width: 50%;
}
/*******************************************************************************/
/* TIME SLOTs (partially booked) - BACKGROUND */
.datepick-inline .date2approve.timespartly  .wpbc-cell-box,
.datepick-inline .date_approved.timespartly  .wpbc-cell-box{
    background: transparent;
    background: rgb( from var(--wpbc_cal-timespartly-day-color) r g b / var(--wpbc_cal-day-bg-color-opacity) );
    border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-timespartly-day-color);
}
/* TIME SLOTs (partially booked) - TEXT */
.datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) .wpbc_time_dots,
.datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) .wpbc_time_dots,
.datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) a,
.datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) a,
.datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) span,
.datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) span
{
    color: var(--wpbc_cal-timespartly-text-color);
    font-weight: 600;
    text-shadow: none;
}
/*******************************************************************************/
/* CHECK IN and CHECK OUT  Borders for the Pending cells - the COLOR have to be the SAME as BACKGROUND of this cell*/
.block_hints .date2approve.block_check_in_out div.check-in-div,                 /* Item  for the LEGEND */
.datepick-inline .date2approve.timespartly.check_in_time div.check-in-div{
    border-right: 1px dotted var( --wpbc_cal-pending-day-color );
}
.block_hints .date2approve.block_check_in_out div.check-out-div,                /* Item  for the LEGEND */
.datepick-inline .date2approve.timespartly.check_out_time div.check-out-div{
    border-left: 1px dotted var( --wpbc_cal-pending-day-color );
}
/*******************************************************************************/

/* S E L E C T E D   Dates - Background */
.datepick-inline div.datepick-one-month .datepick td.datepick-current-day .wpbc-cell-box{
    background: transparent;
    background: rgb( from var(--wpbc_cal-selected-day-color) r g b / max( var(--wpbc_cal-day-bg-color-opacity), var(--wpbc_cal-selected-day-bg-color-opacity) ) );
    border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-selected-day-color);
}
/* S E L E C T E D   Dates - Text color */
/* S E L E C T E D   Dates - Text color */
.datepick-inline div.datepick-one-month .datepick td.datepick-current-day .wpbc_time_dots,                               /*  //FixIn: 8.9.4.13 */
.datepick-inline div.datepick-one-month .datepick td.datepick-current-day a,
.datepick-inline div.datepick-one-month .datepick td.datepick-current-day a:hover {
    color: var(--wpbc_cal-selected-text-color);
    text-shadow: none;
}
/*******************************************************************************/

/* C e l l   O V E R   Dates - Background */
.wpbc_timeslot_day_bg_as_available .datepick-inline .times_clock.datepick-days-cell-over  .wpbc-cell-box,
.datepick-inline .datepick .datepick-days-cell-over  .wpbc-cell-box,
/* ( EAA ) */
.datepick-inline .datepick .wpbc-cell-box:has(a:focus) {
    background: transparent;
    background: rgb( from var(--wpbc_cal-hover-day-color) r g b / var(--wpbc_cal-day-bg-color-opacity) );
    border: var( --wpbc_cal-day-cell-border-width ) solid var( --wpbc_cal-hover-day-color );
}
/* C e l l   O V E R   Dates - Text color */
.datepick-inline  .datepick-one-month .datepick .datepick-days-cell-over .wpbc_time_dots,                                                /*  //FixIn: 8.9.4.13 */
.datepick-inline  .datepick-one-month .datepick td.datepick-days-cell-over a:hover,
.datepick-inline  .datepick-one-month .datepick td.datepick-days-cell-over a,
/* ( EAA ) */
.datepick-inline  .datepick-one-month .datepick td a:focus{
    color: var( --wpbc_cal-hover-text-color );
    text-shadow: none;
}
/*******************************************************************************/
/* FixIn: 6.0.1.2 */
/* Text style for Check In Approved & Check Out Pending ||  Check Out Approved & Check In Pending || Check In Pending & Check Out Approved ||  Check Out Pending & Check In Approved   */
td.timespartly.check_in_time.check_out_time.check_in_time_date_approved.check_out_time_date2approve span,
td.timespartly.check_in_time.check_out_time.check_out_time_date_approved.check_in_time_date2approve span,
td.timespartly.check_in_time.check_out_time.check_in_time_date2approve.check_out_time_date_approved span,
td.timespartly.check_in_time.check_out_time.check_out_time_date2approve.check_in_time_date_approved span {
    font-weight: 600;
    text-shadow: none;
}

/* Show partially (time-slots) booked days with Background color as for available days ********************************/
/* Color as in this section A V A I L A B L E - BACKGROUND */
.wpbc_timeslot_day_bg_as_available .datepick-inline .times_clock  .wpbc-cell-box{
    background: transparent;
    /*background: rgb( from var(--wpbc_cal-timespartly-day-color) r g b / var(--wpbc_cal-day-bg-color-opacity) );*/
}
/* Same as in this Section above --- A V A I L A B L E  - Text A  */
/* TIME SLOTs (partially booked) - TEXT */
.wpbc_timeslot_day_bg_as_available .datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) .wpbc_time_dots,
.wpbc_timeslot_day_bg_as_available .datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) .wpbc_time_dots,
.wpbc_timeslot_day_bg_as_available .datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) a,
.wpbc_timeslot_day_bg_as_available .datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) a,
.wpbc_timeslot_day_bg_as_available .datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) span,
.wpbc_timeslot_day_bg_as_available .datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) span{
    color: var(--wpbc_cal-timespartly-text-color);
    font-weight: 600;
    text-shadow: none;
}
.wpbc_timeslot_day_bg_as_available .datepick-inline .timespartly:not(.check_in_time,.check_out_time) .wpbc_time_dots{
  font-weight: 600;
}
/*  Same as in this Section above --- S E L E C T E D   Dates - Text color */
.wpbc_timeslot_day_bg_as_available .datepick-inline .datepick-one-month .datepick .times_clock.date_available.datepick-current-day a{
    color: #EEEEEE;
    text-shadow: none;
}
/*   Same as in this Section above --- A V A I L A B L E  and UNSELECTABLE - Text */
.wpbc_timeslot_day_bg_as_available .datepick-inline .date_available {
  color: #CCCCCC;                                                               /* This style for the unavailable date, when we are select the dates */
  text-shadow: none;                                                 /* This style for the unavailable date, when we are select the dates */
}
.datepick-inline .date_available span {
    text-shadow: none;
}

/*******************************************************************************/
/*  CHECK IN / OUT      as          P.O.L.Y.G.O.N.S        //FixIn: 8.9.4.13   */
/*******************************************************************************/
/* Fill diagonal check  in/out items with AVAILABLE background color */
.wpbc-cell-box .wpbc-diagonal-el svg polygon{
    fill: var(--wpbc_cal-available-day-color);
}
  .datepick-inline .datepick-one-month .datepick td.datepick-days-cell.datepick-current-day .wpbc-cell-box .wpbc-diagonal-el {
      display: none;
  }
  .datepick-current-day .wpbc-cell-box  .wpbc-diagonal-el svg polygon {
      fill: var(--wpbc_cal-selected-day-color);
      display: block;
  }
/* Firstly we define background of the day cells background as available */
.datepick-inline td.datepick-days-cell.check_in_time .wpbc-cell-box,
.datepick-inline td.datepick-days-cell.check_out_time  .wpbc-cell-box{
        /*background-color: var(--wpbc_cal-available-day-color);*/
    background: rgb( from var(--wpbc_cal-available-day-color) r g b / var( --wpbc_cal-day-bg-color-opacity ) );
}
/* C e l l   O V E R   Dates */
.datepick-inline td.datepick-days-cell.check_in_time.datepick-days-cell-over .wpbc-cell-box,
.datepick-inline td.datepick-days-cell.check_out_time.datepick-days-cell-over  .wpbc-cell-box{
  background-color: var(--wpbc_cal-hover-day-color);
}

/* Pending */
.datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date2approve     .wpbc-cell-box .wpbc-co-in svg polygon,     /* Check In  */
.datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date2approve   .wpbc-cell-box .wpbc-co-out svg polygon     /* Check Out */
{
    fill: var( --wpbc_cal-pending-day-color );
    fill-opacity: 50%;
    fill-opacity: max( var( --wpbc_cal-day-bg-color-opacity ), 50% );
}

.datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date2approve .wpbc-cell-box,
.datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date2approve .wpbc-cell-box{
  border: var( --wpbc_cal-day-cell-border-width ) solid var( --wpbc_cal-pending-day-color );
}
/* Approved */
.datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date_approved    .wpbc-cell-box .wpbc-co-in svg polygon,     /* Check In  */
.datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date_approved  .wpbc-cell-box .wpbc-co-out svg polygon     /* Check Out */
{
    fill: var( --wpbc_cal-approved-day-color );
    fill-opacity: 50%;
    fill-opacity: max( var( --wpbc_cal-day-bg-color-opacity ), 50% );
}
.datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date_approved .wpbc-cell-box,
.datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date_approved .wpbc-cell-box{
  border: var( --wpbc_cal-day-cell-border-width ) solid var( --wpbc_cal-approved-day-color );
}
/* EAA: Accessibility Standards - Highlight on Focus */
.datepick-inline .calendar-links .datepick-prev a:focus,
.datepick-inline .calendar-links .datepick-next a:focus {
	font-size: var(--wpbc_cal-text-prev-next-links-size);
	line-height: 1.25em;
	box-shadow: 0 0 0 1.2px var(--wpbc_form-button-background-color), 0 1px 2px rgba(0, 0, 0, .15);
	outline: 0;
}

Back