@import url('spinner.css');

body {
    background-color: white;
    color: #888;
    font-family: Helvetica, sans-serif;
}

#fakeu, #fakep {
    margin-top: 30px !important;
}

#main {
    width: 980px;
    height: 800px;       
}

.x-tab-strip span.x-tab-strip-text {
    font-size: 15px;
}

.x-window-dlg .ext-mb-error {
    background-image: url("/css/stop.png");
    background-size: 32px 32px;
}

.x-tab-strip > li {
    margin-right: 10px;
}

.dialogForm {
    padding: 15px;
}


#logoutBtn {
    display: block;
    float: right;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 7px;
    border: 1px solid #888;
    background-color: #DEDEDE;
    text-decoration: none;
    color: #888;   
    padding: 15px 25px;
}

#uname {
    display: block;
    float: left;
    padding: 25px 20px 20px;
}

#logoutBtn:hover {
    background-color: orange;    
    color: black;
}

.x-tab-strip-top span.x-tab-strip-text {
    padding-bottom: 10px;    
    padding-top: 10px;    
}
.x-tab-strip-top .x-tab-strip-active .x-tab-right span.x-tab-strip-text {
    padding-bottom: 11px;
}

.x-grid3-row-over {
    background-image: none;
}


.calendar .x-panel-body > div {
    overflow-y: auto;
    margin: 0 auto 30px;
    padding-bottom: 70px;
}

.calendar .day {
    width: 18%;
    float:left;
    border-right:1px solid white;
    padding: 0px 4px;
    margin-right:4px; 
    margin-bottom:30px;
}

.day > header {
    text-align:center;
    font-size: 16px;
    text-transform: uppercase;
    padding: 10px 0px;
}

.slot {
    background-color: gray;
    position:relative;    
    font-size: 16px;
    text-align:center;
    font-weight: bold;    
    vertical-align: middle;
    color: #444;
    cursor: not-allowed;
    min-height: 12px;
    margin: 2px;
    border-bottom: 1px solid orange;
}

.slot.free {
    background-color: lightgreen;
    color: black;
    cursor: pointer;
}

.slot > a {
    position: absolute;
    top: 20%;
    display:block;
    width: 100%;
    text-decoration: none;
    vertical-align: middle;
    text-align:center;
    
}

.slot.free:hover {
    background-color: lime;
}

.slot > span {
    color: black;
    display:block;
    position:absolute;
    font-size: 10px;
    left: 2px;
    top: 2px;
}
#historyBox + label {
    padding-bottom:6px;
    padding-right:10px;
}
.trislot {
    width: 32%;
}
.quadslot {
    width: 23.7%;
}
.sixslot {
    width: 15.5%;
}
.sixslot > span {
    left: 1px;
    top: 1px;
    font-size: 9px;
    width: 90%;
    text-align: center;
} 
.trislot,.quadslot,.sixslot {
    color: transparent;
    margin-left: 0;
    height: 28px !important;
    float: left;
}
.trislot > span,.quadslot > span,.sixslot > span {
    display: none;
}
.trislot > a,.quadslot > a,.sixslot > a {
    display: none;
    top: 40%;
    font-size: 12px;
}
.trislot.free:hover > a,.quadslot.free:hover > a,.sixslot.free:hover > a {
    display: block;
}
.trislot:hover > span,.quadslot:hover > span,.sixslot:hover > span {
    display: block;
    color: #444;
}
.trislot.zeroslot, .quadslot.zeroslot, .sixslot.zeroslot {
    
}
.trislot.zeroslot > span, .quadslot.zeroslot > span, .sixslot.zeroslot > span {
    display: block;
}
.trislot.zeroslot:before, .quadslot.zeroslot:before, .sixslot.zeroslot:before {
    
}

.weekcal .slot.free > a {
    display:block;
    color: black;
}
.weekcal .slot > a {
    display: block;
    color: #998;
}
.weekcal .slot {
    cursor: pointer;
}
.weekcal .day {
    width: 18.6%;
    margin-bottom: 0px;
}
.weekcal .slot > span {
    font-size: 9.5px;
}
.weekcal .x-panel-body > div {
    overflow-y: auto;
    margin: 0 auto;
    padding-bottom: 0px;
}


.month-display {
    width: 150px;
    text-align:center;
    padding: 5px 0px;
}

.month-display h3 {
    font-size: 16px;
}

.empty-time {
    color: orange;    
}

.x-form-invalid.x-form-composite .x-form-invalid {
    background-color: transparent;
}