.byl-dp-wrap {
    text-align: center;
    color: #aaa;
    min-height: 19rem;
    background-color:#f7f7f7;
    /*padding:20px 0;
    margin-top:10px;*/
}

/* the month/week header + controls, e.g. "<< March 2016, next week >>" */
.byl-dp-data table{
    width:100%;
}
.byl-dp-wrap .byl-dp-data {
    color: #000;
}
.byl-dp-data table{
    font-size:1.4rem;
}
.byl-dp-data table .text-left{
    padding:10px 0 10px 20px;
}
.byl-dp-data table .text-right{
    padding:10px 20px 10px 0;
}
.byl-dp-data table .text-left, .byl-dp-data table .text-right{
    min-width:10%;
    font-size:1.6rem;
}

/* day cell, e.g. "Fri 13" */
.byl-dp-wrap .byl-dp-cal .byl-dp-data>span div {
    display:inline-block;
    color: #aaa;
    padding: .4em .6em;
    width: 13%;
}

/* day cell availability statuses */
.byl-dp-wrap .byl-dp-cal .byl-dp-data>span div.other {
    color:#f7f7f7;
}
.byl-dp-wrap .byl-dp-cal .byl-dp-data>span div.open {
    color: #000;
    cursor: pointer;
}

/* employe dropdown - not strictly part of date picker but they are always used together */
ul.dropdown-menu, button.dropdown-toggle {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset;
    width:95%;
}
button.dropdown-toggle>span {
    display:inline-block;max-width:90%; overflow:hidden;
}
ul.dropdown-menu li {
    color: #333;
    padding-left:.5em;
    border-bottom:1px dashed #ddd;
}
ul.dropdown-menu li:last-child {
    border-bottom:0;
}
ul.dropdown-menu li:hover {
    background-color: #e6e6e6;
}

/* Mobile */

@media
only screen
and (max-device-width : 767px)
and (orientation : portrait),
only screen
and (max-device-width : 998px)
and (orientation : landscape),
only screen
and (max-device-width : 767px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2),
only screen
and (max-device-width : 998px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2)
{
    .byl-dp-wrap .byl-dp-cal .byl-dp-data>span div{
        font-size: 1.1rem;
    }
    .byl-dp-wrap .byl-dp-cal .byl-dp-data>span div span{
        display:block;
    }
}
/*
.byl-dp-wrap .byl-dp-cal .byl-dp-data>span div.today {
    background-color: #aaa;
    color: #fff !important;
    border-radius: 100px;
}
*/

/* hour cell, e.g. "15:00 £35.00" */
.byl-dp-wrap .byl-dp-day .byl-dp-data>span {
    cursor: pointer;
    display: inline-block;
    border: 1px dotted silver;
    border-radius: 100px;
    padding: 3px;
    margin: 2px 7px 2px 7px;
    width: 44%;
}

.byl-dp-wrap .byl-dp-day .byl-dp-data>span span {
    display:inline-block;
    width:46%;
}
.byl-dp-wrap .byl-dp-day .byl-dp-data>span span:first-child{
   text-align:left;
}

.byl-dp-wrap .byl-dp-day .byl-dp-data>span span:last-child{
    text-align:right;
}

.byl-dp-wrap .byl-dp-day .byl-dp-data>span del{
    color: #aaa;
}
/* selected day our hour cell */
.byl-dp-wrap .byl-dp-data .selected {
    background-color: #ee237c;
    color: #fff !important;
    border-radius: 100px;
    border-color:#646464 !important;
}

.byl-dp-wrap .byl-dp-data {
    height: 100%;
}

.byl-dp-wrap .byl-dp-day {
    overflow-y: auto;
}

.byl-dp-wrap .byl-dp-wait, .byl-dp-wrap .byl-dp-hold {
    padding-top: 3.5rem;
}

.byl-dp-day .byl-dp-wait, .byl-dp-day .byl-dp-hold {
    padding-bottom:8rem;
}

/* container for mobile full screen availability picker */
div#mobile-layer {
    background-color:#fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index:1500;
    height:100%;
    width:100%;
    display:none;
}

div.modal-body {
    padding-top:0;
}
div.modal-header {
    padding-bottom:0;
}
div#mobile-layer .btn-default {
    padding:5px 14px 5px 5px;
}
span#byl-dp-fwd, span#byl-dp-rev {
    font-size:2rem;
}
/* mobile overrides.
easier than using bootstrap layout throughout,
plus it keeps the date/time control portable
@todo - revise to work with the new div id="mobile-layer"
*/
@media
only screen
and (max-device-width : 767px)
and (orientation : portrait),
only screen
and (max-device-width : 998px)
and (orientation : landscape),
only screen
and (max-device-width : 767px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2),
only screen
and (max-device-width : 998px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2)
{
    .byl-dp-wrap .byl-dp-day .byl-dp-data>span {
        width: 88%;
    }
    .byl-dp-wrap .byl-dp-cal .byl-dp-cal .byl-dp-data>span {
        padding: .8em;
    }
    /* make up for missing hover effect on mobile list dropdown */
    ul.dropdown-menu li {
        padding-top:1rem; padding-bottom:.5rem;
        border-color:#666;
    }

    span.byl-day-num {
        font-size:1.5rem;
    }
    hr {
        margin-top: 7px;
        margin-bottom: 7px;
    }
}