body {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}
html, body, #map {
    height: 100%;
    width: 100%;
}
.leaflet-draw-toolbar .leaflet-draw-draw-safePolygon  {
    background-position: -31px -2px;
    background-color: #00FF00;
}
.leaflet-draw-toolbar{
    margin-top: 75px;
}
.leaflet-left .leaflet-control{
    margin-left: 25px
}
.leaflet-top .leaflet-control{
    margin-top: 90px
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-safePolygon{
    background-position: -29px -1px;
    background-color: #00cc00;
}

.leaflet-draw-toolbar .leaflet-draw-draw-fearPolygon {
    background-position: -31px -2px;
    background-color: #ff0000;
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-fearPolygon {
    background-position: -29px -1px;
    background-color: #cc0000;
}
.submitButton{
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 9996;
    margin: 25px 25px 0 0;
    background-color: #175a68;
    color: white;
}
#submitButtonID:disabled{
    background-color: #a0a0a0 !important;
    color: white;
    opacity: 1;
    border-color: #a0a0a0 !important;
}
.displayButton{
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 9996;
    margin: 25px 0 0 25px;
    background-color: #175a68;
    color: white;
}
.left-help-box{
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 9996;
    background-color: #FFFFFF;
    border-radius: 0 0 7% 7% ;
    font-size: 18px;
}
.left-help-box *{
    margin-left: 5px;
    margin-right: 5px
}
.left-help-box h3{
    color: #175A68;
    text-align: left;
    font-size: 18px;
}   
.grayout {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    z-index: 9998;
    display: flex;
    justify-content: center;
    align-items: center;
}

.questions{
    font-size: 18px;
    font-weight: 700;
}
.answers{
    font-weight: 400;
}
.big-box{
    width: auto;
    height: auto;
    opacity: 1;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background-color: white;
    text-align: center;
    max-height: 60%; /* Adjust the maximum height as needed */
    overflow-y: auto; /* Add a vertical scrollbar if needed */
    padding: 2% 2% 2% 0;
}
.big-box h2{
    font-weight: 700;
}
ol, ul{
    text-align: left;
}
.big-list{
    font-size: 18px;
}
.big-box h2{
    text-align: center;
}
.big-list li{
    margin: 10px;
}
.no-list-button{
    list-style: none;
}
#remove-button{
    margin: auto;
    font-size: 18px;
    background-color: #175a68;
}
.radio-buttons label{
    display: block;
    margin: 2%;
}
.mobile-column{
    display: flex;
}
.input-text{
    width: 25% !important;
}
.input-postal{
    width: 10% !important;
}
.relative-posi{
    position: relative;
}
.box-title{
    color: #175A68;
    font-size: 18px;
    margin: 1%;
    font-weight: 700;
}
.footer-distributed{
    position: fixed !important;
}
#help-pictures{
    display: flex;
    flex-direction: row;
    list-style: none;
    width: 50vw;
}
#help-pictures img{
    width: 100%;
}
#last-previous-button{
    margin-right: 2%;
}
.initial-display-fix{
    display: initial;
}
.button-color{
    background-color: #175a68 !important;
    border-color: #175a68 !important;
}
.text-answer{
    display: inline !important;
    width: 80% !important;
}
.special-layout {
    display: flex;
    /* Your special layout styles here */
}
.gray-background{
    background-color: #DBDBDB;
}

.leaflet-draw .leaflet-draw-section .leaflet-draw-actions  li a{
    background-color: #175a68;
    font-size: 13px;
}
.leaflet-draw .leaflet-draw-section .leaflet-draw-actions  li a:hover{
    color: white;

}
/* Define the flashing animation for the Save button */
@keyframes flashAnimation {
    0% { background-color: inherit; }
    50% { background-color: red; } /* Change the background color to red */
    100% { background-color: inherit; }
}

/* Apply the flashing animation class */
.flash {
    animation: flashAnimation 0.5s ease-in-out 3; /* Adjust animation duration and iteration as needed */
}
.leaflet-draw-draw-polyline-marker, 
.leaflet-draw-draw-polygon-marker {
    width: 10px; /* Set the width */
    height: 10px; /* Set the height */
    /* Additional styling properties as needed */
}

@media (max-width: 1100px) {
    .footer-distributed{
        display: none !important;
    }
    .left-help-box{
        display: none;
    }
    #help-pictures{
        flex-direction: column;
        width: 70vw;
    }
    .general-button{
        bottom: initial !important;
    }
    .input-postal{
        width: 30vw !important;
    }
    .special-layout {
        flex-direction: column;
    }
    .mobile-column{
        flex-direction: column !important;
    }
    .leaflet-draw-tooltip{
        white-space: normal;
        text-align: center;
    }
  }