/* Styles pour customiser la carte : marqueurs clignotant, légende qui peut être dépliée, etc.*/

/* Styles pour le slide menu de la légende.*/
.leaflet-control-slidemenu{
    cursor: pointer;
}

.leaflet-menu{
    position: absolute;
    background-color: rgba(255, 255, 255, 255);
    overflow: auto;
    cursor: default;
    z-index: 9999;
    box-shadow: #222 -1px -1px 20px 0px;
}

.leaflet-menu-contents {
    padding: 10px;
}

.leaflet-menu::-webkit-scrollbar{
    width: 7px;
    height: 7px;
    background: #f2f2f2;
}

.leaflet-menu::-webkit-scrollbar-thumb{
    border-radius: 2px;
    background: #777;
}

.leaflet-menu-close-button{
    background-color: transparent;
    border: none;
    font-size: 14pt;
    color: #777;
    cursor: pointer;
}

.leaflet-menu-close-button:hover{
    color: #0443a8;
}


.legend-header {
    font-size: 18px; /* default font size for laptop */
}

@media only screen and (max-width: 768px) { /* adjust font size for mobile */
    .legend-header {
        font-size: 15px;
    }
}

.legend-item {
    font-size: 18px; /* default font size for laptop */
}

@media only screen and (max-width: 768px) { /* adjust font size for mobile */
    .legend-item {
        font-size: 15px;
    }
}

/* Styles pour l'affichage dans les popups (image et texte)*/
.image {
    width: 810px; /* default width for laptop */
    height: auto; /* maintain aspect ratio */
}

@media only screen and (max-width: 768px) { /* adjust style for smartphone */
    .image {
        width: 450px;
        height: auto; /* maintain aspect ratio */
    }
}


.text_popup {
    font-size: 3.0rem; /* default font size for laptop */
}

@media only screen and (max-width: 768px) { /* adjust font size for mobile */
    .text_popup {
        font-size: 2.0rem;
    }
}

/* Les styles des différents marqueurs (clignotant) sont ajoutés après*/

.aucun_None_None_None {
                            width: 17px; 
                            height: 17px;
                            border: 3.2px solid;
                            border-radius: 100%;
                            animation: aucun_None_None_None-pulsate-2-colors 1s infinite;
                            position: absolute;
                            transform: translate(-50%, -50%);
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .aucun_None_None_None  {
                            width: 22px; 
                            height: 22px;
                            }
            }
            
            @keyframes aucun_None_None_None-pulsate-2-colors {
                            0% {
                                border-color: rgba(0, 139, 40, 1);
                                background-color: rgba(0, 139, 40, 0.3);
                            }
                            40% {
                                border-color: rgba(0, 139, 40, 1);
                                background-color: rgba(0, 139, 40, 0.3);
                            }
                            50% {
                                border-color: rgba(0, 139, 40, 1.0);
                                background-color: rgba(0, 139, 40, 0.3);
                            }
                            60% {
                                border-color: rgba(0, 139, 40, 1);
                                background-color: rgba(0, 139, 40, 0.3);
                            }
                            100% {
                                border-color: rgba(0, 139, 40, 1);
                                background-color: rgba(0, 139, 40, 0.3);
                            }
            }

.aucun_None_aucun_None {
                            width: 17px; 
                            height: 17px;
                            border: 3.2px solid;
                            border-radius: 100%;
                            animation: aucun_None_aucun_None-pulsate-2-colors 1s infinite;
                            position: absolute;
                            transform: translate(-50%, -50%);
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .aucun_None_aucun_None  {
                            width: 22px; 
                            height: 22px;
                            }
            }
            
            @keyframes aucun_None_aucun_None-pulsate-2-colors {
                            0% {
                                border-color: rgba(0, 139, 40, 1);
                                background-color: rgba(0, 139, 40, 0.3);
                            }
                            40% {
                                border-color: rgba(0, 139, 40, 1);
                                background-color: rgba(0, 139, 40, 0.3);
                            }
                            50% {
                                border-color: rgba(0, 139, 40, 1.0);
                                background-color: rgba(0, 139, 40, 0.3);
                            }
                            60% {
                                border-color: rgba(0, 139, 40, 1);
                                background-color: rgba(0, 139, 40, 0.3);
                            }
                            100% {
                                border-color: rgba(0, 139, 40, 1);
                                background-color: rgba(0, 139, 40, 0.3);
                            }
            }

.alarme_haute_None_None_None {
                            width: 17px; 
                            height: 17px;
                            border: 3.2px solid;
                            border-radius: 100%;
                            animation: alarme_haute_None_None_None-pulsate-2-colors 1s infinite;
                            position: absolute;
                            transform: translate(-50%, -50%);
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .alarme_haute_None_None_None  {
                            width: 22px; 
                            height: 22px;
                            }
            }
            
            @keyframes alarme_haute_None_None_None-pulsate-2-colors {
                            0% {
                                border-color: rgba(246, 21, 21, 1);
                                background-color: rgba(246, 21, 21, 0.3);
                            }
                            40% {
                                border-color: rgba(246, 21, 21, 1);
                                background-color: rgba(246, 21, 21, 0.3);
                            }
                            50% {
                                border-color: rgba(246, 21, 21, 1.0);
                                background-color: rgba(246, 21, 21, 0.3);
                            }
                            60% {
                                border-color: rgba(246, 21, 21, 1);
                                background-color: rgba(246, 21, 21, 0.3);
                            }
                            100% {
                                border-color: rgba(246, 21, 21, 1);
                                background-color: rgba(246, 21, 21, 0.3);
                            }
            }

.aucun_None_alarme_haute_None {
                            width: 17px; 
                            height: 17px;
                            border: 3.2px solid;
                            border-radius: 100%;
                            animation: aucun_None_alarme_haute_None-pulsate-2-colors 1s infinite;
                            position: absolute;
                            transform: translate(-50%, -50%);
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .aucun_None_alarme_haute_None  {
                            width: 22px; 
                            height: 22px;
                            }
            }
            
            @keyframes aucun_None_alarme_haute_None-pulsate-2-colors {
                            0% {
                                border-color: rgba(0, 139, 40, 1);
                                background-color: rgba(0, 139, 40, 0.3);
                            }
                            40% {
                                border-color: rgba(0, 139, 40, 1);
                                background-color: rgba(0, 139, 40, 0.3);
                            }
                            50% {
                                border-color: rgba(123, 80, 30, 1.0);
                                background-color: rgba(123, 80, 30, 0.3);
                            }
                            60% {
                                border-color: rgba(246, 21, 21, 1);
                                background-color: rgba(246, 21, 21, 0.3);
                            }
                            100% {
                                border-color: rgba(246, 21, 21, 1);
                                background-color: rgba(246, 21, 21, 0.3);
                            }
            }

.no-data_None_None_None {
                            width: 17px; 
                            height: 17px;
                            border: 3.2px solid;
                            border-radius: 100%;
                            animation: no-data_None_None_None-pulsate-2-colors 1s infinite;
                            position: absolute;
                            transform: translate(-50%, -50%);
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .no-data_None_None_None  {
                            width: 22px; 
                            height: 22px;
                            }
            }
            
            @keyframes no-data_None_None_None-pulsate-2-colors {
                            0% {
                                border-color: rgba(170, 170, 170, 1);
                                background-color: rgba(170, 170, 170, 0.3);
                            }
                            40% {
                                border-color: rgba(170, 170, 170, 1);
                                background-color: rgba(170, 170, 170, 0.3);
                            }
                            50% {
                                border-color: rgba(170, 170, 170, 1.0);
                                background-color: rgba(170, 170, 170, 0.3);
                            }
                            60% {
                                border-color: rgba(170, 170, 170, 1);
                                background-color: rgba(170, 170, 170, 0.3);
                            }
                            100% {
                                border-color: rgba(170, 170, 170, 1);
                                background-color: rgba(170, 170, 170, 0.3);
                            }
            }

.pre_alarme_haute_None_None_None {
                            width: 17px; 
                            height: 17px;
                            border: 3.2px solid;
                            border-radius: 100%;
                            animation: pre_alarme_haute_None_None_None-pulsate-2-colors 1s infinite;
                            position: absolute;
                            transform: translate(-50%, -50%);
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .pre_alarme_haute_None_None_None  {
                            width: 22px; 
                            height: 22px;
                            }
            }
            
            @keyframes pre_alarme_haute_None_None_None-pulsate-2-colors {
                            0% {
                                border-color: rgba(11, 48, 93, 1);
                                background-color: rgba(11, 48, 93, 0.3);
                            }
                            40% {
                                border-color: rgba(11, 48, 93, 1);
                                background-color: rgba(11, 48, 93, 0.3);
                            }
                            50% {
                                border-color: rgba(11, 48, 93, 1.0);
                                background-color: rgba(11, 48, 93, 0.3);
                            }
                            60% {
                                border-color: rgba(11, 48, 93, 1);
                                background-color: rgba(11, 48, 93, 0.3);
                            }
                            100% {
                                border-color: rgba(11, 48, 93, 1);
                                background-color: rgba(11, 48, 93, 0.3);
                            }
            }