body {
        font-family: Arial, sans-serif;
    }

    .calendar {
        width: 30px;
        margin: 0 auto;
        border: 1px solid black;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .today {
        padding: 10px;
        background-color: grey;
        border-radius: 5px;
        border: 2px solid red;
        text-align: center;
    }

    .bookable {
        padding: 10px;
        background-color: grey;
        border-radius: 5px;
        text-align: center;
    }

    .booked {
        padding: 10px;
        background-color: orange;
        border-radius: 5px;
        text-align: center;
    }

    .personal {
        padding: 10px;
        background-color: lightblue;
        border-radius: 5px;
        text-align: center;
    }

    .calendar-header {
        text-align: center;
        background-color: #007BFF;
        color: #fff;
        padding: 10px;
        font-weight: bold;
    }

    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        padding: 10px;
    }

    .day-header {
        font-weight: bold;
    }

    .big {
        width: 200px;
        font-size: 2em;
    }

    .calendar-day {
        /*border: 1px solid #ccc;*/
        padding: 10px;
        background-color: lightblue;
        border-radius: 5px;
        text-align: center;
    }

    .empty {
        background-color: #f5f5f5;
    }

    #footer {
        width: 100%;
        height: 60px;
        background-color: white;
        position: fixed;
        bottom: 0;
    }

    .central_column {
        width: 295px;
        margin: 0 auto;
        /*border: 1px solid black;*/
    }

/*    #date_detail_modal {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 2;
        /*height: 400px;
        height: 0px;
        background-color: white;
        transition-duration: 1s;
    }*/

/*    #check_date_modal {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 2;*/
        /*height: 400px;
        height: 0px;
        background-color: white;
        transition-duration: 1s;
    }*/

/*     #settings_modal{
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 2;
        height: 400px;
        height: 0px;
        background-color: white;
        transition-duration: 1s;
    }*/

    .modal {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 2;
        height: 0px;
        background-color: white;
        transition-duration: 1s;
    }

/* Portrait and Landscape iPhone */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) {

    body {
       /* margin: 0;
        padding: 0;
        height: 100vh;
        overflow: hidden;*/
    }

    .central_column {
        width: 295px;
        margin: 0 auto;
        /*border: 1px solid black;*/
    }

    #footer {
        width: 100%;
        height: 60px;
        background-color: white;
        position: fixed;
        bottom: 0;
    }

    .big {
        width: 200px;
        font-size: 2em;
    }

    .modal {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 1;
        height: 0px;
        background-color: white;
        transition-duration: 1s;
    }

    input {
        font-size: 1.3em;
    }

}