/* form */
select option {
/*  color:#fff;
  background:#65396f;*/ 
}
option:hover{
  -webkit-filter: hue-rotate(50deg);
  filter: hue-rotate(50deg); /* 50deg, 90deg */
} 
 
.fbook-input{
    width: 380px;
    background: #fff;
    font-size: 18px;
    color:#380044;
    font-weight:400;    
    height: 60px;
    padding:0 0 0 20px; /* If you add too much padding here, the options won't show in IE */
    border:0;
}

select optgroup{
    background:#fff;
    color:#380044;
    font-size:16px;
    line-height:22px;
    /*border-top:1px #380044 solid;*/
    font-style:normal;
    font-weight:normal;
}
select optgroup:hover{
  color:#fff;
  background:#65396f;
}
optgroup:before {
  content: attr(label);
  display: block;
  font-weight:bold;
  line-height:24px;   
}
.selectheader {
  font-weight:bold;
  line-height:24px; 
  padding:0 0 0 10px;
}


select {cursor:pointer;}

.styled-select {
   height: 60px;
   overflow: hidden;
   width: 100%;
}

.styled-select select {
   background: transparent;
   border: none;
   height: 50px;
   padding:5px 0 0 20px; /* If you add too much padding here, the options won't show in IE */
   width: 410px;      
}

.styled-select.slate {
   background: url('../img/arrow.png') no-repeat right center;
   height: 60px;
   width: 390px;
}

.styled-select.slate select {
   font-size: 20px;
   color:#380044;   
}


/*
*
*
* BOOKING
*
*
* */


div.hours {
    width: 301px;
    overflow: auto;
}

div.hours-top {
    width: 100%;
    overflow: auto;
}

div.hours-bottom {
    width: 100%;
    overflow: auto;
    height: 166px;
}


div.hours table {
    width: 325px;
    margin: auto;
}

div.hours td, div.hours th {
    text-align: center;
}

div.hours td a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 3px 0px;
}

div.hours td a:hover {
    cursor: pointer !important;
}

td.first-book a{
    background: #b9216b;
}

td.hour-excluded a {
    text-decoration: line-through;
    background: #ccc;
    border: 0px !important;
}

td.hour-excluded a:hover {
    text-decoration: line-through;
    cursor: default !important;
}

/* hour active */
/*a.ui-state-active {
    background: #b9216b !important;
    color: #fff !important;
    border: 1px solid #fff !important;
} */
div.hours td a.ui-state-active {
    background: #b9216b !important;
    color: #fff !important;
    border:0;
} 

div.hours td.hour-incorrect a {
    background: red !important
}

div.hours table {
    border-collapse: collapse;
}

div.hours td{
    border: 1px #cfb0d5 solid;
}

div.hours th{
    font-size:16px;
    font-weight:bold;
    border-top: 1px #380044 solid;
    border-right: 1px #380044 solid;
    border-left: 1px #380044 solid;
    border-bottom: 1px #895994 solid;
    padding: 2px 1px;
    color: #380044;
}

div.hours table {
    width: 325px;
    margin: auto;
}
div.hours td, div.hours th {
    text-align: center;
}
div.hours td a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 3px 0px;
    color:#b27e97;
}
div.hours td a:hover {
    cursor: pointer !important;
}

td.hour-incorrect a {
    background: red !important
}


/* queue */
.bookOne.active{
    font-family: 'Open Sans', sans-serif;
    font-size:14px;
    color: #b9216b;
    font-weight:600;
}

.bookOne{
    font-family: 'Open Sans', sans-serif;
    color: #b9216b;
    font-size:14px;
    font-weight:600;

    margin: 7px 0;
    padding: 4px 0;
    border-top: 1px solid #65396f;
    border-bottom: 1px solid #65396f;
}

.bookOne .name,
.bookOne .date{
    float: left;
    word-break: break-all;
    word-wrap: break-word;
}

.bookOne-id {width:47px;height:47px;background:#b9216b;display:block;font-family: 'Open Sans', sans-serif;color:#fff;font-size:18px;}


.bookOne > div{
    float: left;
    box-sizing: border-box;
}

.bookOne > div:first-child{
    width: 10%;
}
.bookOne > div:last-child{
    width: 80%;
}

.bookOne:after,
.bookOne > div:after,
div.calendar-card:after,
div.calendar:after,
.cont-border:after,
.bookOne > .name:after,
.bookOne > .date:after{
    clear: both;
    height: 0;
    content: '.';
    overflow: hidden;
    padding: 0;
    margin: 0;
    display: block;
}

.bookOne .date{
    clear: both;
}

div.calendar{
    font-family: 'Balthazar', serif;
    font-size:12px;
    height: 197px;
    width: 220px;
    line-height: 13px;
    float: left;
    margin:0 0 0 6px;
}

.ui-datepicker td {
    border: 0;
    padding: 1px;
}

div.calendar-card{
    float: left;
}

div.calendar-card,
div.calendar {

}

div.calendar-card {
    background: url("../img/booking-calendar-bg.png") no-repeat;
    height: 197px;
    width: 180px;
    float:left;
}

.calendar-month {
    font-family: 'Salsa', cursive;
    width:100%;
    text-align: center;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    padding-top: 20px;
    height: 61px;
}

.calendar-day {
    font-family: 'Salsa', cursive;
    width: 100%;
    text-align: center;
    color: #b9216b;
    font-size: 72px;
    font-weight: bold;
    padding-top: 15px;
}

.calendar-day-name {
    font-family: 'Salsa', cursive;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding-top: 40px;
}

.queuebox{
    background: #B9216B;
    color: #fff;
    text-align: center;
    margin-right: 2%;
    min-height: 44px;
    position: relative;
}


/*

*/
.queuebox-l{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}


/* responsive */

@media only screen and (min-width: 320px) and (max-width: 479px){

.fbook-input{width: 240px;}
.styled-select.slate {width: 260px;}
.styled-select select {width: 280px;}

div.calendar {float: none;margin:6px auto 0 auto;}
div.calendar-card {float: none;}
div.calendar-card {height:197px;width: 180px;float:none;margin:0px auto;}
div.hours table {width:260px;margin: auto;}

}


td.dblbookshow a {
    text-decoration: none !important;
    background: url("../img/double.png") no-repeat bottom left;
    border: 0px !important;
}

td.dblbookshow a:hover {
    text-decoration:  none !important;
    cursor: default !important;
}