body {
    /*margin:0;*/
    margin: 75px 0 40px 0 ;
    /*padding: 0;*/
}

/*.main-container {*/
/*    width: 100vw;*/
/*    height: 100vh;*/
/*    margin:0;*/
/*}*/

.header {

    overflow: hidden;
    /*position: sticky;*/
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
    font-size: 14pt;
    padding: 10px;
    background-color: #042677;
    color: white;
    box-shadow: 0 2px 3px #00000099;
    z-index: 10;
}

.footer {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    padding: 5px;
    gap:3px;
    align-items: center;
    width: 100vw;
    background-color: #EEEEEE;
    box-shadow: 0 -2px 3px #00000099;
    font-size:8pt;
    z-index: 10;
}

.actual-values {
    font-weight: bold;
    font-size: 18pt;
}


.both-calendars-container {
    display:flex; justify-content: center; align-items: start; flex-wrap: wrap;
    /*width: 100vw;*/
}

/*--------- Graph Title --------------*/
.graph-title {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap ;

    /*align-self: center;*/
    gap: 10px;
    margin: 0 auto 0 auto;
    width: 95vw;
    /*background-color: cornsilk;*/
    /*border: solid 1px silver;*/
    font-size: 13pt;
}

.dates-from-to {
    font-weight: bold;
    /*font-size: 16pt;*/
}
/*--------- Graph --------------*/

.google-chart {
    width: 90vw;
    height: 500px;
    margin: 10px auto 10px auto;
    /*border: solid 1px silver;*/
    padding: 0;
    /*border: 1px solid silver;border-radius: 5px; background-color: whitesmoke;*/
}
/*--------- Graph Title --------------*/
.other-title {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    margin: 0 auto 0 auto;
    width: 95vw;
    /*background-color: cornsilk;*/
    /*border: solid 1px silver;*/
    font-size: 14pt;
    font-weight: 600;
}


/*----- PRESETS --------*/
.presets-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px;
    padding: 6px;
    border: 1px solid silver;border-radius: 5px; background-color: whitesmoke;
}
.presets-outer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /*margin: 6px;*/
    padding: 6px;
}






/*    CALENDAR */
.calendar-container {
    width: 300px;
    height: 250px;
    margin: 15px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #EEEEEE;
    box-shadow: 2px 2px 3px #00000099;
    font-size: 11pt;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    padding: 2px;

    font-weight: bold;
}

.calendar-footer {
    display: flex;
    justify-content: center;
    padding: 2px;

    font-weight: bold;
}

.calendar-header button {
    cursor: pointer;
}

.calendar-grid {

}

.calendar-weekdays div {
    width: calc(100% / 7);
    text-align: center;
    padding: 0px;
}


.calendar-weekdays,
.calendar-days {
    display: flex;
    flex-wrap: wrap;
    font-size: 11pt;
    /*border: solid 1px red;*/
    /*gap:5px;*/
}


.prev-next-month {
    background-color: gray;
    color: white;
    cursor: pointer;
}


.calendar-day {
    width: calc(100% / 7);
    padding: 2px;
}

.calendar-day-a {
    text-align: center;
    width: 100%;
    display: inline-block;
    /*margin: 10px;*/
    /*border: solid 1px gray;*/
    border-radius: 5px;
    text-decoration: none;
}

.calendar-day-selected {
    background-color: #0a58ca;
    color: white;
}
.calendar-day-today {
    background-color: #0f5132;
    color: white;
}
.calendar-day-normal {
    background-color: #FFFFFF;
    color:black;
}

.form-container {
    display: flex;
    flex-direction: column;
}

.input-grp-my {
    display: flex; align-items: center; justify-content: space-between;gap:15px;
}

.error-container {
    margin-top: -60px;
    padding: 15px;
}

/*<meta name="viewport" content="width=device-width, initial-scale=1.0">*/

/* ================================ 500 ========================================= */
@media screen and (max-width: 500px) {
    .actual-values-container {
        display: flex;
        flex-direction: row;
        gap: 5px;
        justify-content: center;
        align-items: center;
        font-size: 13pt;
    }
    .google-chart {
        /*width: 500px;*/
        height: 300px;
        /*border: solid 1px silver;*/
        /*padding: 30px;*/
    }
}

/* ================================ 500-1200 ========================================= */
@media screen and ( max-width: 1200px) and (min-width:500px) {

}

/* ================================ 1200 ========================================= */
@media screen and (min-width: 1200px) {
}