#calendar {
    padding-left:30%;
    padding-right:30%;
}

@media only screen and (max-width: 1200px) {
    #calendar {
        padding-left:20%;
        padding-right:20%;
    }
}
@media only screen and (max-width: 1000px) {
    #calendar {
        padding-left:15%;
        padding-right:15%;
    }
}
@media only screen and (max-width: 600px) {
    #calendar {
        padding-left:5%;
        padding-right:5%;
    }
}
@media only screen and (max-width: 400px) {
    #calendar {
        padding-left:0%;
        padding-right:0%;
    }
}

.form-floating:focus-within {
    z-index: 2;
}

input[dir="top"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

input[dir="bottom"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}