/*******************************************************************************/
/*  Traditionsl   -   C O L O R    S K I N          ****************************/
/*******************************************************************************/
/* For better compatibility, please change here only folowing properties:      */
/* 
*        background , background-color, background-repeat, background-image,  background-repeat, background-position
*        border
*        box-shadow, -moz-box-shadow, -webkit-box-shadow
*        border-radius, -moz-border-radius, -webkit-border-radius
*        color
*        font-weight
*        text-shadow
*        text-transform
*
*/
/**********************************************************************************************************************************************************/

/* Full Calendar Frame */
.datepick-inline {
    background: transparent;
    border: 0px solid #999999;
    box-shadow: 0 0 0px #AAAAAA;
    -moz-box-shadow: 0 0 0px #AAAAAA;
    -webkit-box-shadow: 0 0 0px #AAAAAA;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
  }
  /* Background of one calendar month */
  .datepick-inline .datepick{
    background:  #F9F8F8;
  }
  /* Previous & Next links  and TITLE BACKGROUND */
  .datepick-inline .calendar-links {
    background-color: transparent; 
    /*background-repeat: repeat-x; 
    /*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#eee));   /* Safari 4-5, Chrome 1-9 */ 
    /*background: -webkit-linear-gradient(top, #ddd, #eee);                         /* Safari 5.1, Chrome 10+ */ 
    /*background: -moz-linear-gradient(top, #ddd, #eee);                            /* Firefox 3.6+ */ 
    /*background: -ms-linear-gradient(top, #ddd, #eee);                             /* IE 10 */ 
    /*background: -o-linear-gradient(top, #ddd, #eee);                              /* Opera 11.10+ */ 
    
    border-bottom: 1px solid #aaa;
  }
  /* 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: #999;
      font-weight: 600;
      text-shadow: 0 1px 0 #eee;
  }
  /* Month Titles */
  .datepick-inline .datepick-header {
    color: #141618;
    font-weight: 600;
    text-shadow: 0 1px 0 #fff;  
  }
  /* 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: 1px solid #ccc;
      color:#aaa;
  }
  
  /*  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: none repeat scroll 0 0 #eee;
  }
  /* A V A I L A B L E  and UNSELECTABLE - Text */
  .block_hints .block_free,
  .datepick-inline .date_available,
  .datepick-inline .date_available.datepick-unselectable{
    color: #CCCCCC;                                                               /* This style for the uvailbale date, when we are select the dates */
    text-shadow: 0 1px 0 #ddd;                                                 /* This style for the uvailbale date, when we are select the dates */
  }
  /* 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:#707070;
      font-weight: 600;
      text-shadow: 0 1px 0 #eee;
  }
  .datepick-inline .date_available.datepick-unselectable span{                                                        /*  //FixIn: 8.9.4.13 */
      text-shadow: none;
  }
  /*******************************************************************************/
  
  /* T I M E   S L O T S */
  .block_hints .block_time, 
  .datepick-inline .timespartly{
    /*background-image: url("../../assets/img/clock_fill.png");*/                                                     /*  //FixIn: 8.9.4.13 */
    background-repeat: no-repeat;
    background-position:100% 100%; 
  }
  /*******************************************************************************/
  
  /* 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: #af4300;
  }
  /* 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: white;
      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 #D2AA8B;
  }
  .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 #D2AA8B;
  }
  /*******************************************************************************/
  
  /* 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: #141618;
  }
  /* 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: white;
      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 .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 #F5E5BF;
  }
  .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 #F5E5BF;
  }
  /*******************************************************************************/
  
  /* S E L E C T E D   Dates - Background */
  .datepick-inline .datepick-one-month .datepick .datepick-current-day {
    background-color: #889;
  }
  /* 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: #EEEEEE;
      text-shadow: 0 -1px 0 #7777AA;
  }
  /*******************************************************************************/
  
  /* 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:#bbc;
  }
  /* 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: #eee;
      text-shadow: 0 -1px 0 #888;
  }
  /*******************************************************************************/
  /* 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: #eee;
  }
  /* Same as in this Section above --- A V A I L A B L E  - Text A  */
  .wpbc_timeslot_day_bg_as_available .datepick-inline .times_clock.date_available a {
      color:#707070;
      font-weight: 600;
      text-shadow: 0 1px 0 #eee;
  }
  /*  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: 0 -1px 0 #7777AA;
  }
  /*   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 uvailbale 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: #eee;
  }
  /* 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: #eee;
  }
  /* 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: #F5E5BF;
  }
  /* 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: #D2AA8B;
  }
  /* 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: #bbc;
  }