/*******************************************************************************/
/*  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:  #ffffff;
  height: 277px;
}
/* TOP TITLE  */
.datepick-inline .datepick-header span{
  text-transform: uppercase;
  color: #a33476;
  font-size: 16px;
}
/* Previous & Next links  and TITLE BACKGROUND */
.datepick-inline .calendar-links {
  background-color: #ECF0F1;
  border-bottom: 1px solid #d7dadb;
  padding: 12px 0;
  margin-bottom: -30px;
  -moz-border-radius: 8px 8px 0px 0px;
  -webkit-border-radius: 8px 8px 0px 0px;
  border-radius: 8px 8px 0px 0px;
}
/* Prev - Next Text */
.datepick-inline .calendar-links .datepick-prev{
  width: 48%;
  padding-left: 2%;
}
.datepick-inline .calendar-links .datepick-next{
  width: 48%;
  padding-right: 2%;
}
.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: #FFF;
  background: #1B9DAF;
  width: 24px;
  height: 24px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  font-family: Open Sans;
  font-weight: 600;
  line-height: 20px;color: #FFF;
  background: #1B9DAF;
  width: 24px;
  height: 24px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  font-family: Open Sans;
  font-weight: 600;
  line-height: 20px;
}
/* Month Titles */
.datepick-inline .datepick-header {
  color: #888;
  font-weight: bold;
  text-shadow: 0 1px 0 #fff;  
  top: -9px;
}
/* Week Titles */
div.datepick-inline .datepick-title-row th{
    border: 1px solid #ECF0F1;     
    color: #1B9DAF;
    font-weight: bold;    
    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 #ecf0f1;
    color:#d3d3d3;
}

/*  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: #fff;                                                               /* This style for the uvailbale date, when we are select the dates */                                                 /* 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: #8a1f5f;
    font-weight: bold;
    text-shadow: 0 1px 0 #eee;
}
/*******************************************************************************/

/* T I M E   S L O T S */
.block_hints .block_time, 
.datepick-inline .timespartly{
  background-image: url("../../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  {
    background-color: #a33476;
}
/* 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: #8a1f5f;
    font-weight: bold;
    text-shadow: 0 1px 0 #6E234F;
}

.block_hints {
  width: 100%;
  clear: both;
  margin: -1px 0px 25px 0px !important;
  border: none;
  height: 30px;
  background-color: #ECF0F1;
  border-top: 1px solid #D7DADB;
  padding: 12px 0;
  -moz-border-radius: 0px 0px 8px 8px;
  -webkit-border-radius: 0px 0px 8px 8px;
  border-radius: 0px 0px 8px 8px;
  position: relative;
}
.wpdev_hint_with_text{
  margin-left: 6px;
}

/* 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  {
  background-color: #dc67ac;
  border: none;
}
/* 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: #8a1f5f;
    font-weight: bold;
    text-shadow: 0 1px 0 #E0A3C7;
}
.block_text{
  color:#8C8C8C;
}
/* 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: #1b9daf;
}
/* S E L E C T E D   Dates - Text color */
.datepick-inline .datepick-one-month .datepick .datepick-current-day a{
    color: #EEEEEE;
    text-shadow: 0 0px 0 rgba(255, 255, 255, 0);
}
/*******************************************************************************/

/* C e l l   O V E R   Dates - Background */
.datepick-inline .datepick .datepick-days-cell-over{
    background:#1ccde6;
}
/* 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: #fff;
    text-shadow: 0 0px 0 #888;
}
/*******************************************************************************/