body
{
    background-color: #249991;
}


table {
width: 100%;
height: 100%;   
table-layout: fixed;
padding: 30px;
border-collapse: collapse;
background-color:white;
box-shadow: 0 30px 40px 0 rgba(16, 36, 94, 0.2);
touch-action: manipulation;
}
thead
{
border:20px solid #1e6b65;
}
thead > tr > th {
padding: 20px;
background-color:#1e6b65;
color:white;
border:none;

}
.weekDayNames
{
    padding: 10px 0px 0px 0px;
    background-color:#1e6b65;
    color:white;
    border:none;
}

tbody
{
border:20px solid white;
}

tbody > tr > td {
position: relative;
border: 1px solid #d5d5d5;
width: auto;
height: 20px;
overflow: hidden;
}

tbody>tr>:nth-child(1){ 
    color: red;
    }

tbody>tr>:nth-child(7){ 
        color: red;
        }
tbody > tr > td:hover {
background-color: #daedff;
cursor: default;
transform:scale(1.05);
color:black;
overflow:visible;
}

.calendar-button {
border:none;
background-color: transparent;
color:white;
outline:none;
}
.calendar-button:hover{
transform:scale(1.5);
cursor: pointer;
border:none;
}

.today {
background-color: #4ecdc4;
color:white !important;
}

.inactive-month {
color: darkgray !important;
}


.date {
position: absolute;
top: 5px;
left: 8px;
font-size:100%;
user-select: none;
}

.event {
position: absolute;
font-size: 10px;
bottom: 5px;
background-color: #488064;
color: white;
padding:1px 1px;
}
#Calendar
{
    width: 650px;
    height: 500px;
    margin: auto;
}

.selected
{
    background-color: #daedff;
}

.button
{
    background-color: #1c0695bf;
    color: white;
    border: none;
    padding: 3px;
    cursor: pointer;
}
@media screen and (max-width: 360px) {
#Calendar
{
    width: 100%;
    margin: auto;
}
.event {
    position: absolute;
    font-size: 8px;
    bottom: 5px;
    background-color: #488064;
    color: white;
    padding:0px 0px;
    }
}