select {
                min-width: 60px;
            }

            #map-view1, #map-view2 {
                height: 750px;
                width: 100%;
                z-index: 1;
            }

            .custom-popup {
                display: flex;
                align-items: center;
            }

            .popup-circle {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .circle {
                background-color: #ffc923;
                border-radius: 50%;
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .popup-text {
                flex: 11;
                padding-left: 10px;
            }
            .leaflet-popup-content {
                width: 420px !important;
            }

            canvas {
                width: 100%;
                height: 600px !important;
                position: relative;
            }

            .border-row {
                border: 1px solid #023060;
            }

            .canvas-view4-block {
                width: 100%;
            }

            /* Styles pour le conteneur */
            .slider-container {
                width: 100%;
                padding: 10px;
                background-color: #f9f9f9; /* Couleur d'arrière-plan */
                border: 1px solid #2f2f2f; /* Contour gris charbon */
                border-radius: 5px;
                box-sizing: border-box; /* Inclut la bordure dans les dimensions */
                position: relative;
                display: flex;
                align-items: center;
                margin-bottom: 20px; /* Ajoute un espacement entre les sliders */
            }

            /* Styles pour les flèches */
            .arrow-left, .arrow-right {
                background-color: #023060;
                color: white;
                border: none;
                padding: 2px;
                cursor: pointer;
                font-size: 18px;
                border-radius: 80%;
                width: 35px;
                margin: 0 10px;
                transition: background-color 0.3s;
            }

            .arrow-left:hover, .arrow-right:hover {
                background-color: #6a7e9b;
            }

            /* Styles pour le slider */
            input[type="range"] {
                -webkit-appearance: none;
                appearance: none;
                width: 100%;
                height: 8px;
                background: #e0e0e0;
                border-radius: 5px;
                outline: none;
                transition: opacity 0.2s;
            }

            input[type="range"]:hover {
                opacity: 1;
            }

            input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 20px;
                height: 20px;
                background: #023060;
                cursor: pointer;
                border-radius: 50%;
            }

            input[type="range"]::-moz-range-thumb,
            input[type="range"]::-ms-thumb {
                width: 20px;
                height: 20px;
                background: #023060;
                cursor: pointer;
                border-radius: 50%;
            }

            /*Legend specific*/
            .legend {
                padding: 6px 8px;
                font: 14px Arial, Helvetica, sans-serif;
                background: white;
                background: rgba(255, 255, 255, 0.8);
                /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
                /*border-radius: 5px;*/
                line-height: 24px;
                color: #555;
            }

            .legend h4 {
                text-align: center;
                font-size: 16px;
                margin: 2px 12px 8px;
                color: #777;
            }

            .legend span {
                position: relative;
                bottom: 3px;
            }

            .legend i {
                width: 18px;
                height: 18px;
                float: left;
                margin: 0 8px 0 0;
                opacity: 0.7;
            }

            .legend i.icon {
                background-size: 18px;
                background-color: rgba(255, 255, 255, 1);
            }

            .rate-bar {
                width: 100%;
                height: 20px;
                border-radius: 5px;
                margin-top: 10px;
                position: relative;
                background: linear-gradient(to right,
                #ffffff 0%, #ffffff 0%, rgb(60, 84, 106) 50%, #44546A 70%);
                background-size: 100% 100%;
                transition: background 0.5s ease;
            }

            .rate-labels {
                display: flex;
                justify-content: space-between;
                margin-top: 5px;
            }

            .legend-view2, .legend-view1 {
                display: inline-block;
                width: 20px;
                height: 20px;
                border-radius: 100%;
                margin-right: 5px;
                vertical-align: middle;
            }

            .legend-view2#icon1 {
                background-color: gray;
            }

            .legend-view1#icon1 {
                background-color: #2e85cb;
            }

            .legend-view1#icon2 {
                background-color: #5c2adb;
            }

            .legend-view1#icon3 {
                background-color: #ffc002;
            }

            .legend-text {
                font-weight: bold;
            }

            /* start style for navigation bar */
            .nav-item {
                margin-bottom: 8px;
            }

            .nav-link {
                display: block;
                padding: 10px 15px;
                font-weight: 500;
                border: 1px solid transparent;
                border-radius: 5px;
                transition: all 0.1s ease;
                text-decoration: underline;
            }

            .nav-link:hover {
                background-color: #e2f3ff;
                color: #003366;
                border-color: #003366;
                text-decoration: underline;
            }

            .nav-link.active {
                background-color: #023060;
                color: white;
                border-color: #023060;
            }

            /* End style for navigation bar */

            .custom-popup-nz .leaflet-popup-tip-container {
                transform: rotate(-90deg);
                left: 102%;
                bottom: 43%;
            }