/* --------------------- PAGE METEO --------------------- */

#mainGrid {
    display: grid;
    grid-template-columns: repeat(9, 1fr );
    grid-template-rows: repeat(10, 1fr  ); 
    grid-template-areas:    "   .   jours   jours   jours   jours   jours   jours   jours   .   "
                            "   .   heures  heures  heures  heures  heures  heures  heures  heures" 
                            "labels tableau tableau tableau tableau tableau tableau tableau tableau"
                            "labels tableau tableau tableau tableau tableau tableau tableau tableau"
                            "labels tableau tableau tableau tableau tableau tableau tableau tableau"
                            "labels tableau tableau tableau tableau tableau tableau tableau tableau"
                            "labels tableau tableau tableau tableau tableau tableau tableau tableau"
                            "labels tableau tableau tableau tableau tableau tableau tableau tableau"
                            "labels tableau tableau tableau tableau tableau tableau tableau tableau"
                            "labels tableau tableau tableau tableau tableau tableau tableau tableau"
                            "labels tableau tableau tableau tableau tableau tableau tableau tableau"
                            "labels tableau tableau tableau tableau tableau tableau tableau tableau"
                            "labels tableau tableau tableau tableau tableau tableau tableau tableau";
                            grid-template-rows: 70px;
}

#days {
    display: grid;
    grid-area: jours;
    grid-template-columns: repeat(7, 1fr ); 
    width: 115%;
    /* height: 65px; */
}

.jour {
    background-color: #50dcd2;
    background-color: #38c8bd;
    border: 0;
    font-size: 20px;
    line-height: 20px;
    font-weight: 400;
    height: 70px;
    border-radius: 10px;
    cursor: pointer;
    border: 0px;
    width: 95%;
    /* margin-right: 5px; */
    /* border: 2px solid #FFFFFF; */
    transition: all 0.3s ease-in-out;
}

.jour:hover {
    color: #FFFFFF;
    background-color: #1c756d;
    background-color: #176760;
    border: 0px;
    transition: all 0.3s ease-in-out;
}

#tableau {
    display: grid;
    grid-area: tableau;
    grid-auto-flow: column;
    grid-template-columns: repeat(8, 1fr ) ;
    grid-template-rows: repeat(9, 1fr );
    /* height: 90px; */
    /* background-color: #FFFFFF; */
}

#tableau > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    /* margin: 0% 0; */
}

/* .icons {
    margin: 0;
    padding: 0;
    border-radius: 60px;
} */

.icons {
    color: #FFFFFF!important;
    font-family: 'weathericons';
    font-size: 40px!important;
    line-height: 0.7;
    font-style: normal;
    font-weight: 400!important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 22px 0!important;
}

#tableau > div {
    text-align: center;
    font-size: 20px;
    /* font-size: 1.8vw; */
    font-weight: 400;
    /* font-weight: 700; */
    color: inherit;
    color: #064a44;
    background-color: #50dcd24a;
    height: 81px;
    padding: 28px 0;
    margin: 0 0 5px 0px;
    /* border: 1px solid #26ab9f; */
    border-top: 1px solid #26ab9f;
    border-right: 1px solid #26ab9f;
    border-bottom: 1px solid #26ab9f;
    /* border-left: 1px solid #26ab9f; */
    /* border-radius: 15px; */
    min-width: 100%;  
}

#heures {
    display: grid;
    grid-area: heures;
    grid-auto-flow: row;
    grid-template-columns: repeat(8, 1fr );
    grid-template-rows: 1fr;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    background-color: #167f76;
    background-color: #0067d5;
    margin: 25px 0 0 0;
    padding: 27px 0 25px 0;
    border-radius: 10px 10px 0 0;
}

#heures > div:not(:last-child) {
    border-right: 1px solid #0a4c46;
    border-right: 1px solid #FFFFFF;
}

#labels {
    display: grid;
    grid-area: labels;
    grid-auto-flow: row;
    grid-template-rows: repeat(9, 1fr ) ;
    text-align: center;
    background-color: transparent;
    border-bottom: none;
    /* margin-left: 15%; */
}

#labels p:empty {
	background-color: transparent;
	border-bottom: 1px solid transparent;
}

#labels > p {
    /* object-fit: contain; */
    width: 120px;
    width: 10vw;
    font-size: 19px;
    line-height: 25px;
    font-weight: 700;
    height: 81px;
    color: #FFFFFF;
    background-color: #0067d5;
    /* border-bottom: 1px solid #0e534d; */
    padding: 28px 15px 0px 15px;
    padding: 16px 1vw 0px 1vw;
    margin: 0 0 5px 0;
    border-radius: 10px 0 0 10px;
}

/* #labels > p.center {
    padding: 15px 15px 0px 15px;
} */

.orientation {
    height: 25px;
    width: 25px;
    margin: auto;
    background-color: #FFFFFF;
    clip-path: polygon(50% 0%, 100% 100%, 50% 75%, 0 100%);
}

.houle{
    background-color: #0067d5;;
}

/* -------------------- WIDGET METEO -------------------- */

#widget {
    font-weight: 700;
    text-align: right;
    color: #FFFFFF;
    /* width: 360px;
    width: 18vw; */
    height: 13vw;
    margin: -200px 0 0 24%;
    margin: -14vw -2vw 0 0;
    padding: 0;
    color: #FFFFFF;
    /* background-color: #ffffff1c;
    border-radius: 15px; */
    /* position: absolute; */
    float: right;
}

.widget-icon {
    color: #FFFFFF!important;
    font-family: 'weathericons';
    font-size: 84px!important;
    font-size: 7vw!important;
    line-height: 1;
    font-style: normal;
    font-weight: 400!important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 7.2vw;
    margin: 0 0 -15px 131px;
    margin: 0 0 -2.7vw 9vw!important;
}

.wi {
    display: block!important;
}

.widget-temperature {
    font-size: 40px;
    font-size: 4vw;
    font-weight: 700;
    display: inline-block;
}

.widget-orientation {
    width: 25px;
    height: 25px;
    width: 2.3vw;
    height: 2.4vw;
    margin: auto;
    background-color: #FFFFFF;
    clip-path: polygon(50% 0%, 100% 100%, 50% 75%, 0 100%);
    display: inline-block;
    margin-left: 10px;
    margin: 0 0.9vw 0 0.4vw;
}

.widget-vent {
    font-size: 4vw;
    display: inline-block;
}

.degres {
    font-size: 32px;
    font-size: 3vw;
    font-weight: 400;
    margin-top: -11px;
    margin-top: -0.56vw;
    float: right;
}

.noeuds {
    font-size: 26px;
    font-size: 2vw;
    font-weight: 400;
    margin-left: -2px;
    margin-left: -0.3vw;
}

/* ------------------ MEDIA QUERIES ------------------ */

@media screen and (max-width: 992px) {

    #widget {
        font-weight: 700;
        text-align: right;
        color: #FFFFFF;
        /* width: 360px;
        width: 18vw; */
        height: 25vw;
        margin: -200px 0 0 24%;
        margin: -81vw -2vw 0 0;
        margin: -67vw -2vw 0 0;
        margin: -64vw -2vw 0 0;
        padding: 0;
        color: #FFFFFF;
        /* background-color: #ffffff1c;
        border-radius: 15px; */
        /* position: absolute; */
        float: left;
    }

    .widget-icon {
        color: #FFFFFF!important;
        font-family: 'weathericons';
        font-size: 84px!important;
        font-size: 11vw!important;
        line-height: 1;
        font-style: normal;
        font-weight: 400!important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        width: 7.2vw!important;
        margin: 0 0 -15px 131px;
        margin: 0 0 -27.2vw 0vw!important;
    }

    .widget-temperature {
        font-size: 40px;
        font-size: 7vw;
        font-weight: 700;
        display: inline-block;
    }

    .widget-orientation {
        width: 25px;
        height: 25px;
        width: 3.5vw;
        height: 3.6vw;
        margin: auto;
        background-color: #FFFFFF;
        clip-path: polygon(50% 0%, 100% 100%, 50% 75%, 0 100%);
        display: inline-block;
        margin-left: 10px;
        margin: 0 1.2vw 0 0.4vw;
    }

    .widget-vent {
        font-size: 7vw;
        display: inline-block;
    }

    .degres {
        font-size: 32px;
        font-size: 5vw;
        font-weight: 400;
        margin-top: -11px;
        margin-top: -1.26vw;
        float: right;
    }

    .noeuds {
        font-size: 26px;
        font-size: 4vw;
        font-weight: 400;
        margin-left: -2px;
        margin-left: -0.3vw;
    }
}