﻿
#calendar {
    z-index: 5000;
    position: absolute;
    left: -100px;
    top: -300px;
    visibility: hidden;
    background-color: #ffffff;
    padding: 7px;
    border: 1px solid #e2e2e6;
    border-radius: 9px;
}

#calendarTable {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    border-spacing: 1px;
    border-collapse: separate;
}

    #calendarTable th {
        padding-top: 4px;
        padding-bottom: 4px;
        background-color: #FFFFFF;
        text-align: center;
        width: 38px;
        color: #b53c3c;
    }

    #calendarTable td {
        font-family: Verdana,Arial,Sans Serif;
        color: #444444;
        text-align: center;
         padding: 4px 0px 4px 0px;
    }

#today {
    background-color: #FFFFFF;
}

.calendarCell a:link {
    color: #a42929;
    text-decoration: none;
    padding: 5px 11px 5px 11px;
}

.calendarCell a:active {
    color: #a42929;
    text-decoration: none;
    background-color: #f0f0f0;
    padding: 5px 11px 5px 11px;
}

.calendarCell a:visited {
    color: #a42929;
    text-decoration: none;
    padding: 5px 11px 5px 11px;
}

.calendarCell a:hover {
    color: #a42929;
    text-decoration: none;
    padding: 5px 11px 5px 11px;
}

.calendarCell {
    background-color: #ffffff;
}

    .weekend, .calendarCell.weekend, .calendarCell {
        background-color: #e9e9ee;
    }

#calendarTable .weekend.daylabel {
    background-color: #F8F8F8;
    text-align: center;
}

#calendarTable td.calendarCellblank, #calendarTable td.calendarCell.calendarCellblank, #calendarTable td.calendarCell.calendarCellblank.weekend {
    color: #D5D5D5;
    background-color: #ffffff;
}

.calendarCellSelected, .calendarCell.calendarCellSelected.diffmo, .calendarCellSelected.calendarCell.diffmo a {
    background-color: #b53c3c;
    color: #FFF;
}

    .calendarCellSelected.weekend, .calendarCell.calendarCellSelected.diffmo.weekend {
        background-color: #b53c3c;
        color: #FFF;
    }

    .calendarCellSelected a, .calendarCellSelected a:visited {
        color: #FFF;
        text-decoration: none;
    }

.calendarCell.calendarCellSelected a, .calendarCell.calendarCellSelected a:visited {
    color: #FFF;
    text-decoration: none;
}

.calendarCell.weekend.calendarCellSelected a, .calendarCell.weekend.calendarCellSelected a:visited {
    color: #FFF;
    text-decoration: none;
}

.calendarCell.diffmo.calendarCellSelected a, .calendarCell.diffmo.calendarCellSelected a:visited {
    color: #FFF;
    text-decoration: none;
}

.diffmo, .calendarCell.diffmo, .calendarCell.weekend.diffmo, .diffmo, .calendarCell.diffmo a, .calendarCell.weekend.diffmo a:visited {
    /*color: #fff;*/
    text-decoration: none;
    background-color: #ffffff;
}

#calendarTable select {
    font-family: Verdana,Arial,Sans Serif;
    color: #444444;
    background-color: #FFFFFF;
    padding: 5px;
    border: none;
    line-height: 24px;
    /*-webkit-appearance: menulist-button;
    height: 24px;*/
}

#calendarTable .tcrow {
    background-color: #E9E9ED;
}

#calendarTimePicker {
    float: left;
    padding: 6px 7px 0px 14px;
}

#calendarTable td.tcwid {
    border: 1px solid #E9E9ED;
    border-collapse: collapse;
    border-spacing: 0px;
    padding: 1px 4px 2px 4px;
}

#calendarTable input {
    width: 80px;
    margin-top: 3px;
    font-family: Verdana, Arial,Sans Serif;
    margin-right: 7px;
    color: #FFF;
    background-color: #a13b3b;
    border: 0px solid #FFF;
    cursor: pointer;
    border-radius: 4px;
}

#img-cal-ok {
    cursor: pointer;
    margin-top: 4px;
}

#tableHeader {
    background-color: #E9E9ED;
    padding: 4px 4px 4px 4px;
}

#tableHeaderTime {
    background-color: #E9E9ED;
    padding: 4px 4px 4px 4px;
}

#calendarTable .daylabel {
    font-weight: bold;
    width:25px;
}

.calendarCellSelected > a {
    background: none !important;
}

#timeChooser {
    overflow-y: auto;
    overflow-x: hidden;
    height: 200px;
    width: 80px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

    #timeChooser li {
        padding: 1px 3px;
        cursor: pointer;
    }

#showSelectedTime {
    width: 70%;
    margin: auto;
    margin-top: 5px;
}

    #showSelectedTime td {
        height: 28px;
    }

    #showSelectedTime .div {
        width: 20px;
    }


.picker__day {
    font-weight: bold!important;
}

#tableHeaderTime span {
    background-color: white;
    padding: 6px 8px;
    border-radius: 4px;
}

#selectedDate, #selectedTime {
    padding: 5px 8px;
    border-radius: 4px;
}