@import "../styles/shared-styles.css";


vaadin-side-nav > [slot="label"]{
    color : white;
}
.cardLocation{
    .legendCol{
        flex : 1 1 50%;
    }
    .legendRow{
        /*max-width: 290px;
        vaadin-horizontal-layout{
            flex: 1 1 80px;
        }*/
    }
    .infoGmLayout{
        gap : 0px;
        padding : 0px;
    }

    /*.legendCol,.gaugeCol{
        width : initial !important;
    }*/

    .imgBox{
        /*
        min et max car lorsque l'on mets width tout court,
        le navigateur n'en fait qu'a ca tête et ne mets pas la bonne taille,
        ce qui déforme l'image
        */
        min-width: 155px;
        max-width: 155px;
        height: 155px;
    }

    .imgBox > img{
        height: 100%;
        width : 100%;
        object-fit: cover;
        border-radius: 20px;
    }

    .hlFirstPart{
        flex-basis: 40%;
        flex-wrap : wrap;
    }

    .gmCol{
        text-wrap :nowrap;
        flex : 1 1 210px;
        gap : 5px;
        vaadin-icon{
            height: 50px;
        }
    }

    .contentRow{
        justify-content: space-between;
    }

    vaadin-progress-bar{
        width : 200px;
    }
    .gaugeCol{
        flex-basis : 20%;
    }
    .hlGarbageModel{
        display: flex;
        flex-wrap : wrap;
        flex-basis : 60%;
    }

    .itemLoc{
        text-wrap : nowrap;
    }

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

            .hlFirstPart,.contentRow{
                flex-direction : column;
            }
            .legendCol,.gaugeCol{
                align-items: center;
            }

            .hlGarbageModel,.gaugeCol{
                margin-left: -45px;
            }
            .legendRow,.legendCol>h1,.itemLoc{
                margin-left: -100px;
            }
            .imgBox{
                align-self: baseline;
                height:100%;
            }
            .imgBox > img{
                height: 80px;
                width : 80px;
                margin-left: 15px;
                margin-top: 15px;
            }

    }
    @media screen and (max-width: 595px) {
        .gmCol{
            max-width: 180px;
            font-size: 10pt;
            gap: 5px;
            padding: 0px;
            h4{
                font-size:12pt;
            }

        }
        .infoGmLayout{
            h3{
                font-size: 12pt;
            }
        }
        .hlGarbageModel{
            padding-bottom: 5px;
            justify-content: center;
        }
        .legendCol>h1{
            font-size: 14pt;
            text-wrap: wrap;
            max-width: 195px;
            text-align: center;
            margin-top: 15px;
        }
        .itemLoc{
            margin-bottom: 30px;
        }
    }
    @media screen and (max-width: 515px) {
        .gmCol>h4,.infoGmLayout>h3{
            font-size:10pt;
        }

        .gmCol{
            vaadin-icon{
                height: 50px;
            }
        }

        .hlGarbageModel{
            margin-left : -110px;
        }
        .legendCol > h1{
            font-size : 12pt;
            max-width : 150px;
            margin-left : -50px;
        }

        .itemLoc{
            margin-left : -50px;
            span{
                max-width : 150px;
                text-wrap : wrap !important;
                text-align : center;
            }
        }
    }

}

.breadcrumb-separator {
  font-weight: bold;
  font-size: 1.7em;
  color: var(--lumo-primary-text-color)

}
.dashboard-export-btn{
    margin:0;
    background-color:#FFF;
    color: var(--body-text);
    border: 0.25px solid #ccc;
}

.custom-avatar{
    width:60px;
    height:60px;
    flex-shrink: 0;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;


    vaadin-icon{
        width:70%;
        height:70%;
    }
}

.text-wrap{
    text-wrap:wrap;
}

.menu-card:hover{
    cursor: pointer;
}

@media screen and (max-width: 700px) {
    .topBarDashboard{
        flex-wrap: wrap;
    }
    .map{
        height : 1000px;
        overflow : scroll;
    }
}