/* Ensure the body and HTML take up the full height */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Fix the container to the right side of the screen */
.collaboration-container {
    position: fixed;
    bottom: 20px; /* Slight padding from the bottom */
    left: 50%;
    transform: translateX(-50%);
    width: 250px; /* Adjust width as needed */
    background-color: #333333;
    color: #ffffff;
    padding: 10px;
    z-index: 1000;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

/* Style the buttons for collaboration */
.collaboration-container .button,
.collaboration-container .btn-primary {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    background-color: #154883;
    color: #ffffff;
    padding: 15px; /* Increase padding for larger button size */
    font-size: 16px; /* Larger font for readability */
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.collaboration-container .button:hover,
.collaboration-container .btn-primary:hover {
    background-color: #0f5da6; /* Lighter blue on hover */
}

/* Responsive adjustment for mobile */
@media (max-width: 768px) {
    .collaboration-container {
        width: 100%; /* Take full width on mobile */
        left: 0;
        transform: none;
        padding: 5px;
        bottom: 0; /* Stick to the bottom */
    }
}

.sidebar {
	background-color: #333333; /* Couleur de fond grise à 80% */
	color: #ffffff; /* Couleur de texte blanche */
}
.app {
	background-color: #333333; /* Couleur de fond grise à 80% */
	color: #ffffff; /* Couleur de texte blanche */
}
.panel {
	background-color: #333333; /* Couleur de fond grise à 80% */
	color: #ffffff; /* Couleur de texte blanche */
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

#cursorCircle {
    width: 60px;  /* À modifier dynamiquement en fonction de la valeur du slider */
    height: 60px;
    border-radius: 50%;  /* Rend le div circulaire */
    border: 2px solid blue;  /* Contour bleu */
    position: absolute;  /* Positionnement absolu pour le déplacer librement */
    top: -1000px;  /* Le place hors de la vue initialement */
    left: -1000px;
    pointer-events: none;  /* Assurez-vous que le cercle n'interfère pas avec les clics de la souris ou d'autres événements */
    z-index: 10000;  /* Garantit qu'il est au-dessus des autres éléments */
    transform: translate(-50%, -50%);  /* Centre le cercle sur le pointeur de la souris */
    display: none;  /* Cache le cercle au début */
}


.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #0f5da6;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #0f5da6;
  cursor: pointer;
}

.button {
	background-color: #154883;
	border-color: #0f5da6;
}

.button:hover {
	background-color: #0f5da6;
	border-color: #0f5da6;
}

.button:selected {
	background-color: #0f5da6;
	border-color: #0f5da6;
}

.button:focus {
	background-color: #0f5da6;
	border-color: #0f5da6;
}

.button:active {
	background-color: #0f5da6;
	border-color: #0f5da6;
}

.slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 80px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider2:hover {
  opacity: 1;
}

.slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 80px;
  background: #0f5da6;
  cursor: pointer;
}

.slider2::-moz-range-thumb {
  width: 80px;
  height: 80px;
  background: #0f5da6;
  cursor: pointer;
}

.btn-circle {
  display: inline-block;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  text-align: center;
  font-size: 20px;
  width: 40px;
  height: 40px;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9999;
}

.btn-circle i {
  line-height: 40px;
}

.btn-primary {
	background-color: #154883;
	border-color: #0f5da6;
}

.btn-primary:hover {
	background-color: #0f5da6;
	border-color: #0f5da6;
}

.btn-primary:selected {
	background-color: #0f5da6;
	border-color: #0f5da6;
}

.btn-primary:focus {
	background-color: #0f5da6;
	border-color: #0f5da6;
}

.btn-primary:active {
	background-color: #0f5da6;
	border-color: #0f5da6;
}





/* Fond du popup */
.popup10 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(51, 51, 51, 0.8); /* Fond harmonisé avec la couleur de fond grise à 80% */
    z-index: 3;
}

.popup-content {
    background-color: #333333; /* Couleur de fond harmonisée */
    border-radius: 10px;
    margin: 15% auto;
    padding: 30px 40px;
    width: 30%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    color: #ffffff; /* Couleur de texte harmonisée */
	z-index: 4;
}

.close-btn {
    color: #ffffff; /* Harmonisé avec la couleur de texte blanche */
    float: right;
    font-size: 28px;
    cursor: pointer;
    border: none;
    background: transparent;
    margin: -15px -15px 0 0;
}

.popup-content button, .minipop button {
    background-color: #154883; /* Harmonisé avec la couleur du bouton */
    color: #ffffff; /* Couleur de texte blanche */
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.popup-content button:hover, .minipop button:hover {
    background-color: #0f5da6; /* Harmonisé avec la couleur du bouton au survol */
}

.annotation-btn {
    padding: 15px 20px; /* Increase padding to make the buttons larger */
    font-size: 18px; /* Increase font size for better readability */
    border-radius: 50%; /* Optional: make the buttons circular */
    width: 100px; /* Adjust width as needed */
    height: 100px; /* Adjust height as needed */
    background-color: #ff5e00; /* Customize the button background color */
    color: #fff; /* Text color */
    border: none; /* Remove border */
    cursor: pointer; /* Change cursor to pointer on hover */
    text-align: center;
    line-height: 50px; /* Vertical align text */
}

.annotation-btn:hover {
    background-color: #ff7f50; /* Lighter color on hover */
}


#annotationDetailImage {
    max-width: 100%;
    max-height: 300px;
    display: block;
    margin: 20px auto;
}

.minipop {
    background-color: #333333; /* Couleur de fond harmonisée */
    color: #ffffff; /* Couleur de texte harmonisée */
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: auto;
    max-width: 300px;
    font-size: 14px;
}

.popup-content textarea,
.popup-content select,
.popup-content input[type="text"],
.popup-content input[type="email"],
.popup-content input[type="password"] {
    color: #000000; /* Texte noir */
    background-color: #ffffff; /* Fond blanc pour une meilleure lisibilité */
    border: 1px solid #d3d3d3; /* Bordure légère pour définir la zone */
    padding: 5px 10px; /* Un peu d'espacement à l'intérieur */
}

.minipop textarea,
.minipop select,
.minipop input[type="text"],
.minipop input[type="email"],
.minipop input[type="password"] {
    color: #000000; /* Texte noir */
    background-color: #ffffff; /* Fond blanc pour une meilleure lisibilité */
    border: 1px solid #d3d3d3; /* Bordure légère pour définir la zone */
    padding: 5px 10px; /* Un peu d'espacement à l'intérieur */
}

/* Styles adaptés pour les écrans de taille moyenne (par exemple, tablettes) */
@media (max-width: 768px) {
    .popup-content {
        width: 60%;    /* Largeur plus grande pour les tablettes */
        padding: 20px 30px; /* Espacement ajusté pour les tablettes */
    }
}

/* Styles pour les petits écrans (par exemple, téléphones mobiles) */
@media (max-width: 480px) {
    .popup-content {
        width: 90%;    /* Utilisation de presque toute la largeur pour les mobiles */
        padding: 15px 20px; /* Espacement ajusté pour les mobiles */
        margin: 10% auto;   /* Marge verticale réduite pour les mobiles */
    }
}

/* Adaptation du bouton de fermeture pour les mobiles */
@media (max-width: 480px) {
    .close-btn {
        font-size: 24px;  /* Réduction de la taille du bouton de fermeture */
    }
}

/* Espacement entre les éléments de formulaire */
.popup-content label, 
.popup-content input, 
.popup-content button {
    display: block;
    margin-bottom: 15px;
}

.popup-content textarea, 
.popup-content input[type="text"], 
.popup-content input[type="email"], 
.popup-content input[type="password"] {
    max-width: 100%;  /* Garantit que la zone de texte ne déborde pas de son conteneur */
    width: 90%;       /* Largeur de base à 90% du conteneur pour laisser un peu d'espace */
    /* ... autres styles ... */
}

/* Style for the toggle button */
.btn-circle {
    position: absolute;
    top: 0;
    right: 10px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 50%;
    padding: 5px;
    cursor: pointer;
    z-index: 1000;
}

/* Toggle animation for the collaboration container */
.collaboration-container {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 400px; /* Initial max height */
    overflow: hidden;
    opacity: 1;
}

.collaboration-container.collapsed {
    max-height: 0; /* Collapse the section */
    opacity: 1;
}

#toggle-collab-btn {
  position: absolute;
  top: -20px; /* Ajustez cette valeur pour placer le bouton plus haut ou plus bas */
  left: 50%;
  transform: translateX(-50%);
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  z-index: 10000;
  border-radius: 50%;
}


/* Popup styling: aligned with annotation popup */
#attribute-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #333333;  /* Harmonized with other popups */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    color: #ffffff;  /* Harmonized text color */
    width: 400px;
    z-index: 9999;
    display: none;  /* Initially hidden */
}

/* Style the save button in the popup */
#save-attributes-btn {
    background-color: #154883;  /* Same color as collaboration buttons */
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

#save-attributes-btn:hover {
    background-color: #0f5da6;  /* Lighter blue on hover */
}

/* Export GeoJSON button styling, matching the other buttons */
#export-btn {
    background-color: #154883;
    color: white;
    padding: 15px 32px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

#export-btn:hover {
    background-color: #0f5da6;  /* Same hover effect */
}

/* Import button and layer selection dropdown matching the style */
#import-btn, .select-layer {
    background-color: #154883;
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

#import-btn:hover, .select-layer:hover {
    background-color: #0f5da6;
}

/* Make sure the dropdown matches the button size */
.select-layer {
    width: 200px;
}