.free {
    background-color: #f0fdf4;
} 
.booked {
    background-color: #fee2e2;
}
.login-form {
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    height: 100%;
    min-height: 100vh;
}
.login-form form {
    align-self: center;
    display: inline-block;
    max-width:350px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    background:#eee;
    padding: 20px 10px;
    padding-bottom: 40px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.login-form input {
    display: block;
    width: 100%;
    padding: 8px 5px;
    font-size: 18px;
    box-sizing: border-box;
    border-radius: 3px;
    border:1px solid #999;
}
.login-form label{
    text-align: left;
    display: block;
    padding: 10px 0;
    margin-top: 15px;
}
.login-form .h3 {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.login-form button {
    display: block;
    width: 100%;
    padding: 8px 5px;
    border-radius: 3px;
    margin-top: 30px;
    border:1px solid #999;
    background-color: orange;
    font-size: 18px;
}
.weekend {
    background-color: rgba(255,0,0,0.1);
}
.day {
    width: 3%;
    font-size: 16px;
    min-width: 40px;
}
.cell {
    font-size: 16px;
    border:1px solid #ccc;
    border-collapse: collapse;
    position: relative;
    height: 46px;
    box-sizing: border-box;
    overflow: hidden;
}
#chessboard {
    border-collapse: collapse;
    width: 100%;
}
#chessboard th {
    padding: 14px 0 ;
}
#chessboard .text-center  {
    text-align: center;
}
#chessboard .room {
    padding-left: 8px;
    font-weight: bold;
    min-width: 100px;
}
.daySel{
    box-sizing: border-box;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    transition: 0.3s;
}

.daySel:hover{
    background-color: orange;
}
.daySel span {
    box-sizing: border-box;
    display: block;
    padding: 2px 5px;
    line-height:42px
}
.modal_form input, .modal_form select{
    display: block;
    width: 100%;
    border:1px solid #bbb;
    border-radius: 2px;
    font-size: 18px;
    padding: 5px 5px;
    margin-bottom: 20px;
    box-sizing: border-box;

}
.modal_form label{
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 5px;
    display: block;
}
.modal_form textarea{
    display: block;
    width: 100%;
    border:1px solid #888;
    border-radius: 2px;
    font-size: 16px;
    padding: 5px 5px;
    margin-bottom: 20px;
    box-sizing: border-box;
}
#modalTitle, #messageTitle {
    display: block;
    background-color: rgba(59, 130, 246,1);
    color:#fff;
    margin:0;
    padding: 15px 15px;
    border-bottom:1px solid #aaa;
}
#modalBody, #messageBody{
    padding: 20px 15px;
}
#closeModal, #closeMessage {
    font-size:20px;
    padding: 7px 10px;
    border:1px solid #ccc;
    border-radius: 2px;
    background-color: #eee;
    cursor: pointer;
    transition: 0.3s;
}
#closeModal:hover , #closeMessage:hover{
    background-color: red;
    color:#fff;
}
.close {
    background-color: rgba(0, 255, 0, 0.3);
}
.start {
    background-color: rgba(255, 165, 0, 0.5);
}
.end {
    background-color: rgba(0, 0, 255, 0.5);
}
.new, .work {
    max-height:48px;
    overflow: hidden;
    color:#fff;
}
.new {
    background-color: rgba(0, 128, 1, 0.7);
}
.work {
    background-color: rgba(59, 130, 246, 0.8);
}
.buttonBooking {
    color:#fff;
    background-color: rgba(0, 128, 1, 0.7);
    margin-top: 30px;
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 5px;
    border: 1px solid #eee;
    border-radius: 2px;
    font-weight: bold;
}
.float-right {
    width: 100%;
    display: block;
    text-align: right;
}
.btn-success  {
    color: #fff;
    font-size: 18px;
    background-color: rgba(0, 128, 1, 0.7);
    margin-top: 10px;
    text-align: center;
    padding: 10px 15px;
    border: 1px solid #eee;
    border-radius: 2px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}
.btn-success:hover {
    background-color: orange;
}
.form_buttonRem {
    float:left;
    color: #fff;
    font-size: 18px;
    background-color: red;
    margin-top: 10px;
    text-align: center;
    padding: 10px 15px;
    border: 1px solid #eee;
    border-radius: 2px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}
.form_buttonRem:hover {
    background-color: #333333;
    border: 1px solid red;
}
#messageBody {
    font-size: 20px;
    text-align: center;
}