#calendarScreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* font-size: calc(1.9 * min(1vw, 1vh)); */
    font-size: calc(min(1vw, 1vh));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #2d303246;
    z-index: 1000;
    transition: all 0.9s ease;
    overflow: hidden;
}

#calendarHolder {
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 0.5em;
    padding: 0.5em;
    animation-name: moveholder;
    animation-duration: 1s;
    /* box-shadow: 1px 1px 1px 1px #2d303256; */
}

@keyframes moveholder {
    0% {
        margin-bottom: 100vh;
    }

    50% {
        margin-bottom: -5vh;
    }

    100% {
        margin-bottom: 0;
    }
}


#calendar table {
    width: 20em;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-collapse: collapse;
    font-size: 2em;
}

    #calendar table tr {
        width: 20em;
        height: 2.8em;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    #calendar table tr th {
        width: 20em;
        height: 2.8em;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

@keyframes fadein {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}


#calendar table th a {
    color: #27aa8e;
    text-decoration: none;
}

#calendar table td {
    width: 2.8em;
    height: 2.8em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    #calendar table td a {
        width: 2.3em;
        height: 2.3em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: all 0.9s ease;
        color: #2d3032;
        background-color: transparent;
        text-decoration: none;
    }

        #calendar table td a:hover {
            border-radius: 10em;
            background-color: #2d3032;
            color: #fff;
            text-decoration: none;
        }

#calendarmenu div {
    width: 20em;
    height: 2em;
    background-color: #27aa8e;
    font-size: 2em;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

    #calendarmenu div a {
        padding: 0 1em;
        height: 2em;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.6s ease;
        text-decoration: none;
    }

        #calendarmenu div a svg {
            color: #fff;
        }

            #calendarmenu div a svg:hover {
                color: #2d3032;
            }

        #calendarmenu div a:hover {
            color: #2d3032;
            text-decoration: none;
        }



#calendarsplitter {
    width: 40em;
    height: 0.2em;
    background-color: #27aa8e;
    color: #27aa8e;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 0 0.5em 0;
}

#calendarsethour div {
    width: 20em;
    height: 2em;
    background-color: transparent;
    font-size: 2em;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

    #calendarsethour div div {
        width: auto;
        height: auto;
    }

    #calendarsethour div a {
        color: #2d3032;
        text-decoration: none;
        margin: 1em;
    }

    #calendarsethour div div select {
        font-size: 0.5em;
        background-color: #27aa8e1e;
        color: #2d3032;
        padding: 0 0.5em;
        border: none;
        width: 3em;
        height: 2em;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding-left: 0.7em;
        outline: none;
    }

        #calendarsethour div div select::-ms-expand {
            display: none;
            remove default arrow on ie10 and ie11
        }

    #calendarsethour div div span {
        font-size: 0.5em;
        color: #2d3032;
        background-color: #27aa8e1e;
        height: 2em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

#calendarbuttons div {
    font-size: 2em;
    width: 20em;
    height: 2em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 2em;
}

    #calendarbuttons div a {
        padding: 0.35em 3em;
        background-color: #27aa8e;
        border-radius: 0.1em;
        color: #fff;
        transition: all 0.8s ease;
        text-decoration: none;
    }

        #calendarbuttons div a:hover {
            background-color: #2d3032;
            text-decoration: none;
        }

@media only screen and (max-width: 600px) {
    #calendarScreen {
        font-size: calc(1.9 * min(1vw, 1vh));
    }
}


.hl-Calendar_ctrl {
    height: auto;
    width: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


    .hl-Calendar_ctrl span {
        margin-right: 0.4em;
    }

    .hl-Calendar_ctrl a {
        width: 16px;
        height: 16px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-right: 0.3em;
    }

#LabelInicialDate,
#LabelFinalDate {
    border: 1px solid #cccccc;
    height: 2.0em;
    width: 132px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 0.2em;
    margin-right: 0.3em;
    color: #555;
    text-transform: uppercase;
    box-shadow: inset 0 1px 1px #00000013;
}