/* ------------------------------------------------------------------------------------------------------------------ */
/* Light   -   24-08   -   C O L O R    S K I N           */
/* ------------------------------------------------------------------------------------------------------------------ */
/*  For best compatibility, please change parameters only in :root { ... } section  */
/* Blue 5 */
:root {
  --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: #f6f2ea;
  --wpbc_cal-approved-text-color: #c25b00;
  --wpbc_cal-pending-day-color: #eaecf6;
  --wpbc_cal-pending-text-color: #303960;
  --wpbc_cal-selected-day-color: #6b96ce;
  --wpbc_cal-selected-text-color: #fff;
  --wpbc_cal-hover-day-color: #6b96ce6e;
  --wpbc_cal-hover-text-color: #fff;
  --wpbc_cal-timespartly-day-color: #ececec;
  --wpbc_cal-timespartly-text-color: #000;
}

/* Default Font Sizes */
:root{
	--wpbc_cal-text-general-size: 14px;
	--wpbc_cal-text-cost-size:  0.59em;
	--wpbc_cal-text-header-size:  13px;
	--wpbc_cal-text-weekdays-size: 10px;
	--wpbc_cal-text-prev-next-links-size:  25px;
}

/* 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{
  width: 40px !important;
  height:  40px !important;
}
.block_hints.datepick .wpdev_hint_with_text .wpbc_calendar_legend_table_width_height .wpbc_calendar_legend_day_cell_height {
	height: 40px !important;
	border-width: 0;
}
/* ------------------------------------------------------------------------------------------------------------------ */
/* ==  From  Calendar.css  ==  */
/* ------------------------------------------------------------------------------------------------------------------ */
div.datepick-inline table.datepick,
div.datepick-inline table.datepick th,
div.datepick-inline table.datepick td {
     border-width: 0;
}
.datepick-inline .datepick, 
.datepick-inline .calendar-links, 
.datepick-inline .calendar-links a, 
.datepick-inline .datepick-days-cell, 
.datepick-inline .datepick-days-cell a, 
.datepick-inline .datepick-days-cell div, 
.datepick-inline .datepick-title-row, 
.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 */
.datepick-inline .calendar-links {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 40px;
  margin-bottom: -40px;
}
.datepick-inline .calendar-links .datepick-prev, 
.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;
}
.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{

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

/* Full Calendar Frame */
.datepick-inline {
	background: #fff;										/* FixIn: 9.3.1.4 */
	border: 0px solid #555;
	/*box-shadow: 0 0px 5px #00000030;*/
	box-shadow: 0 1px 5px 1px #00000014;
	border-radius: 0;
	padding: 0;
}
/* Background of one calendar month */
.datepick-inline .datepick-one-month {
    padding: 3px;
}
.datepick-inline .datepick{
  background:  #fff;
}
/* Previous & Next links  and TITLE BACKGROUND */
.datepick-inline .calendar-links {
    border-bottom:none;										/* FixIn: 9.3.1.4 */
    /*! background: #090808; */
}
/* 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: #555;											/* 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: #000;											/* FixIn: 9.3.1.4 */
	font-weight: 600;
	text-shadow: none;
	margin: -3px 0 4px;
	background: linear-gradient(165deg,#555,#4d4d4d);
	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: #555;
    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: 50%;
    border-radius: 100px; /* If calendar width set as 100%, then  here we can  not use  border-radius: 50%; :( */

	border-radius: 6px;
	border-color: #fff;
	border-width: 2px !important;
	box-sizing: border-box;
}
.datepick-inline th{
	border-width: 2px !important;
	border-color: #fff !important;
	box-sizing: border-box;
}

/* 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 {
	background: repeating-linear-gradient( 135deg, #fff, #fff 4px, #eaeaeb 4px, #eaeaeb 8px );
	/*background: repeating-linear-gradient( 135deg, #fff, #fff 4px, #f5f5ef 4px, #f5f5cf 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: #fff;                                   										   /* 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: #fff;
}
/* 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,
.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: var(--wpbc_cal-available-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,
/* 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-color: 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,
.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,
/* 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-color: 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,
.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,
.datepick-inline .date_approved.timespartly {
    background-color: 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{
    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 .datepick-one-month .datepick .datepick-current-day {
  background-color: var( --wpbc_cal-selected-day-color );
}
/* S E L E C T E D   Dates - Text color */
.datepick-inline .datepick-one-month .datepick .datepick-current-day .wpbc_time_dots,                               /*  //FixIn: 8.9.4.13 */
.datepick-inline .datepick-one-month .datepick .datepick-current-day a{
    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,
.datepick-inline .datepick .datepick-days-cell-over{
    background: 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{
    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 ********************************/
/** //FixIn: 8.2.1.27   Updated 2018-07-04   ****/
/* 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 {
    background-color: #4faf00;
}
/* 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 .timespartly:not(.check_in_time,.check_out_time) .wpbc_time_dots,
.wpbc_timeslot_day_bg_as_available .datepick-inline .times_clock.date_available a {
	color: #fff;
	font-weight: 400;
	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: block;
	}
	.datepick-current-day .wpbc-cell-box  .wpbc-diagonal-el svg polygon {
	  fill: var(--wpbc_cal-selected-day-color);
	}
/* Firstly we define background of the day cells background as available */
.datepick-inline td.datepick-days-cell.check_in_time,
.datepick-inline td.datepick-days-cell.check_out_time {
    background-color: var(--wpbc_cal-available-day-color);
}
/* C e l l   O V E R   Dates */
.datepick-inline td.datepick-days-cell.check_in_time.datepick-days-cell-over,
.datepick-inline td.datepick-days-cell.check_out_time.datepick-days-cell-over {
	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 );
}
/* 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 );
}