/*******************************************************************************/
/*  Ofin   -   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: none repeat scroll 0 0 transparent;
  padding: 10px;

/*   box-shadow: 0 0 0px #AAAAAA; */
/*   -moz-box-shadow: 0 0 0px #AAAAAA; */
/*   -webkit-box-shadow: 0 0 0px #AAAAAA; */
/*   border-radius: 2px; */
/*   -moz-border-radius: 2px; */
/*   -webkit-border-radius: 2px;/ */
}
/* Background of one calendar month */
.datepick-inline .datepick{
    background: none repeat scroll 0 0 #ffffff;
    /*     box-shadow: 0 1px 2px #ddd; */
}
/* 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(#aaa));   /* Safari 4-5, Chrome 1-9 */
  /*background: -webkit-linear-gradient(top, #aaa, #ddd);                         /* Safari 5.1, Chrome 10+ */
  /*background: -moz-linear-gradient(top, #aaa, #ddd);                            /* Firefox 3.6+ */
  /*background: -ms-linear-gradient(top, #aaa, #ddd);                             /* IE 10 */
  /*background: -o-linear-gradient(top, #aaa, #ddd);                              /* 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: #595959;
    font-weight: 600;
    text-shadow: 0 0px 0 #ddd;
}
/* Month Titles */
.datepick-inline .datepick-header {
  color: #595959;
  font-weight: 600;
  text-shadow: 0 0px 0 #DDDDDD;
}
/* Week Titles */
div.datepick-inline .datepick-title-row th{
    border: 0px solid #fff;
    color: #373737;
    font-weight: 600;
    background: none;
    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: 0px solid #999; */
    color: #d4d4d4;
    /* padding: 0px 12px; */
    box-sizing: border-box;
}

/*  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 #fff; */
}
/* 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: #aaa; */                                                               /* This style for the uvailbale date, when we are select the dates */
  text-shadow: 0 0px 0 #bbb;                                                 /* 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: #a7a7a7;
    font-weight: 600;
    /* text-shadow: 0 -1px 0 #000; */
}
/*******************************************************************************/

/* T I M E   S L O T S */
.block_hints .block_time,
.datepick-inline .timespartly{
  background-image: url("../../assets/img/clock_fill.png");
  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: #853;
}
/* 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: #d93;
    font-weight: 600;
    text-shadow: 0 -1px 0 #793300;
}
/* 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 #853;
}
.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 #853;
}
/*******************************************************************************/

/* 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: #da3;
}
/* 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: #850;
    font-weight: 600;
    text-shadow: 0 1px 0 #FFAA00;
}
/* 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 #da3;
}
.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 #da3;
}
/*******************************************************************************/

/* S E L E C T E D   Dates - Background */
.datepick-inline .datepick-one-month .datepick .datepick-current-day {
  background-color: #011863;
  border-radius: 50px;
}
/* S E L E C T E D   Dates - Text color */
.datepick-inline .datepick-one-month .datepick .datepick-current-day a{
    color: #ededff;
    text-shadow: 0 -1px 0 #339;
}
/*******************************************************************************/

/* C e l l   O V E R   Dates - Background */
.datepick-inline .datepick .datepick-days-cell-over{
    background: #00196B;
    border-radius: 50px;
}
/* C e l l   O V E R   Dates - Text color */
.datepick-inline .datepick .datepick-days-cell-over a:hover,
.datepick-inline .datepick .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;
    color: #b70;
}

/* 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: #bc0003;
    border-radius: 50px;
    /* padding: 5px 14px; */
}
/* 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: #ddd;
    font-weight: 600;
    text-shadow: 0 -1px 0 #000;
}
/*  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: #ededff;
    text-shadow: 0 -1px 0 #339;
}
/*   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: #aaa;                                                               /* This style for the uvailbale date, when we are select the dates */
  /* text-shadow: 0 0px 0 #bbb; */                                                 /* This style for the uvailbale date, when we are select the dates */
  /* padding: 9px; */
}



@media only screen and (max-width: 1025px) {
  /* mobile */
  .datepick-inline .datepick-title-row th, .datepick-inline .datepick-days-cell{
    height: 37px;
  }
}

@media only screen and (min-width: 1025px) {
  /* web */
  .datepick-inline .datepick-title-row th, .datepick-inline .datepick-days-cell{
    height: 70px;
  }

  .wpbc_booking_form_structure .wpbc_structure_calendar {
      width: 50%;
      margin-right: 10px;
  }

  .wpbc_booking_form_structure .wpbc_structure_form {
      width: 50%;
      margin-left: 10px;
  }

  .wpbc_booking_form_structure {
      display: inline-flex;
  }
  .bk_calendar_frame {                                                        /* Define the width of calendar to the 100% of the device screen*/
      width:100% !important;
  }
}
table.datepick tr:first-child td {
    background: none;
}


.wpbc_booking_form_structure .wpbc_structure_form {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 30px;
}


.wpbc_booking_form_structure .wpbc_structure_calendar {
    padding: 30px;
    border-radius: 8px !important;
    border: 1px solid #DDDDDD;
}

.wpbc_structure_form .form-group {
    display: none;
}

.wpbc_structure_form .form-group:first-child {
    display: block;
}
.datepick-inline .datepick, .datepick-inline .datepick-header, .datepick-inline .datepick-header span, .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: 15px;
}

.wpbc_no_custom_width.cal_month_num_1{
    max-width: 100%;
}