/* Fonts */
@font-face{
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular.ttf");
}

@font-face{
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Bold.ttf");
    font-weight: bold;
}

@font-face{
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Italic.ttf");
    font-style: italic;
}

@font-face {
    font-family: "Quicksand";
    src: url("/fonts/Quicksand-Regular.ttf");
}

@font-face {
    font-family: "Quicksand";
    src: url("/fonts/Quicksand-Bold.ttf");
    font-weight: bold;
}

body {
    background: #003e52 url('/images/plage_b_3200.png') fixed no-repeat bottom -50px center;
    background-size: cover;
    margin: 0;
    height: 100%;
    font-family: "Open Sans", Ubuntu, serif;
    font-size: 16px;
}

* {
    margin: 0;
    color: black;
}

ul {
    padding: 0 0 0 1em;
}

/*decreasing background image size in order to save bandwidth*/

@media (max-width: 1600px) {
    body {
        background: #003e52 url('/images/plage_b_1600.png') fixed no-repeat bottom center;
    }
}

@media (max-width: 800px) {
    body {
        background: #003e52 url('/images/plage_b_800.png') fixed no-repeat bottom center;
    }
}


/* ===================
   ===== Header ======
   =================== */
header {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    background-color: #ecf2f2;
    box-shadow: black;
}
#empty-header {
    width : 150px;
    height: auto;
}

#banner {
    display: flex;
    align-items: center;
    justify-content: center;
}
#banner > .inline-block {
    margin: 10px 30px;
}

#language-selector-header {
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#language-toggle {
    display: flex;
    flex-direction: column; /* to center flag */

}

#flag {
    width: 8vw;
    max-width: 55px;
}

/* =================
   ===== Titre =====
   ================= */

.texte-conso {
    margin: auto;
    max-width: 600px;
    text-align: center;
}

.titre-conso {
    margin: 7px 0;
    color: #ecf2f2;
    font-size: 26px;
    font-weight: bold;
    font-family: "Quicksand", "Open Sans", serif;
}
.paragraphe-conso {
    color: #ecf2f2;
    font-size: 20px;
    font-style: italic;
}


/* =================
   ===== Form ======
   ================= */
.info-form {
    display: flex;
    justify-content: center;
    padding: 30px;
}

.form {
    background-color: #ecf2f2;
    display: block;
    padding: 30px;
    max-width: 350px;
    border-radius: 20px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Input form */
.input-container {
    position: relative;
    margin: 10px;
    padding-bottom: 15px;
}

.input-container input {
    width: 250px;
    background-color: white;
    border: 1px solid rgba(61, 99, 115, 0.3);
    box-shadow: inset 4px 4px 4px 0 rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    margin: 8px 0;
    padding: 13px;
    font-size: medium;
    color: #444e5f;
    font-style: italic;
    font-family: "Open Sans", Ubuntu, serif;
}

#date-sejour-placeholder, #nom-reservation-placeholder {
    font-family : Ubuntu, serif ;
    font-size: medium;
    color: #444e5f;
}

.logo{
    max-width: 20vw;
    max-height: 75px;
}


label {
    font-size: 18px;
    font-weight: bold;
}

.label-input-error{
    color: #ff4444;
}

.input-error{
    border: 1px solid #ff4444 !important; /*needs to specify this in order to override the other border*/
}

.label-input-fine:focus, .input-fine:focus {
    outline: 2px solid #003e52;
}

.label-input-error:focus, .input-error:focus {
    outline: 2px solid #ff4444;
}

#error-connection {
    background-color: rgba(255, 68, 68, 0.38);
    color: #ff4444;
    border-radius: 10px;
    padding: 5px;
    font-size: 15px;
    margin: 10px;
    max-width: 270px;
    display: flex;
    align-items: center;
}

#error-connection-text {
    padding: 5px 5px 5px 10px;
}

#error-connection-logo {
    padding: 5px;
}


/* Submit Button */
.submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 30px;
}

.form button {
    width: 200px;
    border-radius: 5px;
    margin: 8px 0;
    padding: 10px;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    border: none;
}

.form button:hover {
    background-color: #ffbb00;
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
}

.form button:active {
    background-color: #ffbb00;
    transition: all 0.25s;
    -webkit-transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
}

.submit {
    display: block;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(#ffd000, #ffbb00);
    font-size: 20px;
    line-height: 1.25rem;
    width: 100%;
    border-radius: 0.5rem;
}

/* ========================
   ===== Result Page ======
   ======================== */

#results-container {
    display: flex;
    justify-content: center;
    padding: 20px;
}

#results {
    background: rgba(242,251,255,0.9);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    transition: 0.2s ease-in-out;
    width: 90vw;
    max-width: 900px;
}

/* top */
#text-good-conso, #text-bad-conso, #comparison-no-value, #text-medium-conso{
    max-width: 500px;
    margin: auto;
}

#comment-consumption-box {
    width: 100%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background: linear-gradient(#ffd000, #ffbb00);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

#comment-consumption-text {
    padding: 10px 15px;
}

.principal-text-comment-consumption {
    font-size: 30px;
}

#header-bad-conso {
    font-size: 27px;
}

/* middle */

/* Buttons */
#switch-resource {
    display: flex;
    margin: 20px;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

/*used to wrap in the flexbox*/
.wrap {
    flex-basis: 100%;
    height: 0;
}

.switch-button-resource{
    padding: 10px;
    background: linear-gradient(#ffd000, #ffbb00);
    font-size: 16px;
    border-radius: 5px;
    max-width: 30%;
    flex: 1;
    margin: 5px;
}

#switch-resource button {
    box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.5s;
    border: none;
}

#switch-resource button:hover {
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
}

#switch-resource button:active {
    transition: all 0.25s;
    -webkit-transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
}

#select-electricity-button{
    background: linear-gradient(#D6D6D6, #C9C9C9)
}

/* Text consumption */
#display-consumption-text {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0 40px;
    font-size: 17px;
}

.display-consumption {
    flex-direction: column;
    text-align: center;
    margin: 0 40px;
    font-size: 28px;
}

/* Data type switch button */
#switch-data-type{
    display: flex;
    justify-content: center;
    margin: 10px auto;
}

.switch-data-type-button{
    padding: 7px 20px;
    background: linear-gradient(#85CEEF, #66C2EB);
    font-size: 16px;
    border-radius: 5px;
    box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.5s;
    border: none;
}

.switch-data-type-button:hover {
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
}

.switch-data-type-button:active {
    transition: all 0.25s;
    -webkit-transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
}

/* Graph and info */
#container-graph-info {
    max-width: 1000px;
    min-width: 700px;
    justify-items: center;
    margin: 30px auto;
}

#charts-container {
    background-color: #ecf2f2;
    width: 70%;
    padding: 10px;
    margin: auto;
    border-radius: 20px;
}

.table-consumption {
    margin: auto;
    background-color: #d3ecf7;
    text-align: center;
}

.table-consumption-title {
    background-color: #b2e0f5;
}

.table-consumption th {
    outline: solid #66c2eb 2px;
    padding: 7px;
}

.table-consumption td {
    outline: solid #66c2eb 2px;
    padding: 10px;
    font-size: min(3vw, 25px);
}

.comparison-text {
    padding: 0 20px 15px 40px;
}

.comparison-text .comparison-value {
    font-size: 1.1rem;
}

.comparison-text .comparison-text-li {
    font-size: 0.85rem;
    padding-top: 10px;
}

/* ===============================
   ===== Responsive handling =====
   =============================== */


@media (max-height: 775px) {
    .info-form > .form {
        padding: 10px 25px;
    }
    .input-container{
        padding-bottom: 0;
        margin: 10px 10px 0; /*10 except at the bottom*/
    }
    .submit-button{
        padding-top: 5px;
        padding-bottom: 10px;
    }
    .titre-conso{
        font-size: 20px;
    }

    .paragraphe-conso {
        font-size: 18px;
    }

    #container-graph-info {
        max-width: 400px;
        min-width: 100px;
        margin: 15px auto;
    }

    #charts-container {
        width: 85%;
    }

    #switch-resource {
        margin: 10px;
    }

    .texte-conso {
        max-width: 450px;
    }

    .comparison-text {
        padding: 0 20px 15px 20px;
    }

    .switch-button-resource {
        font-size: 14px;
    }

    .table-consumption th {
        font-size: 15px;
    }

    .comment-text {
        font-size: 0.85rem;
    }
}

@media (max-width: 600px) {

    #banner > .inline-block {
        margin-left: 10px;
        margin-right: 10px;
    }
    body {
        background-size: 585px;
    }
    .logo{
        max-width: 35vw;
        max-height: 50px;
    }
    .paragraphe-conso {
        font-size: 17px;
    }

    .titre-conso {
        font-size: 20px;
        font-family: "Quicksand", "Open Sans", serif;
    }

    .texte-conso {
        max-width: 330px;
    }

    #language-selector-header {
        width: 70px;
    }

    #empty-header {
        width : 70px;
    }

    #flag {
        width: 8vw;
    }

    #container-graph-info {
        max-width: 400px;
        min-width: 100px;
        margin: 15px auto;
    }

    #charts-container {
        width: 90%;
    }

    #switch-resource {
        margin: 10px;
    }

    .texte-conso {
        max-width: 450px;
    }

    .comparison-text  {
        padding: 0 20px 15px 20px;
    }

    .switch-button-resource {
        font-size: 14px;
    }

    .table-consumption th {
        font-size: 15px;
    }

    .comparison-value {
        font-size: 16px;
    }

    .comment-text {
        font-size: 0.85rem;
    }
}

@media (max-width: 500px) {
    .info-form > .form {
        padding: 25px;
    }

    @media (min-height: 800px) {
        body {
            background-size: 665px;
        }
    }
}

@media (max-width: 420px) {


    .table-consumption td{
        font-size: x-small;
    }

    .info-form > .form {
        padding: 20px;
    }

    .input-container {
        padding-bottom: 3px;
    }
    .titre-conso{
        font-size: 19px;
        font-family: "Quicksand", "Open Sans", serif;
    }
    .paragraphe-conso{
        font-size: 14px;
    }
    .submit-button {
        padding-bottom: 20px;
    }

}