html,
 body,
 #map {
     height: 100%;
     margin: 0;
     padding: 0;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 }

 #controls {
     position: absolute;
     top: 10px;
     left: 10px;
     background: white;
     padding: 8px;
     border-radius: 8px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
     z-index: 5;
     font-family: Arial, sans-serif;
 }

 button {
     margin: 2px;
     padding: 6px 10px;
     border: none;
     border-radius: 4px;
     cursor: pointer;
 }

 /* Snackbar Styles */
 .snackbar {
     visibility: hidden;
     min-width: 250px;
     background-color: #333;
     color: #fff;
     text-align: center;
     border-radius: 2px;
     padding: 16px;
     position: fixed;
     z-index: 202;
     right: 30px;
     bottom: 30px;
     font-size: 17px;
 }

 .snackbar.show {
     visibility: visible;
     animation: fadein 0.5s, fadeout 0.8s 2.5s;
 }

 .snackbar.show-persistent {
     visibility: visible;
     animation: fadein 0.5s;
 }


 @keyframes fadein {
     from {
         bottom: 0;
         opacity: 0;
     }

     to {
         bottom: 30px;
         opacity: 1;
     }
 }

 @keyframes fadeout {
     from {
         bottom: 30px;
         opacity: 1;
     }

     to {
         bottom: 0;
         opacity: 0;
     }
 }

 .hidden {
     display: none !important;
 }

 @media (max-width: 768px) {
     #controls {
         position: absolute;
         margin-top: 10px;
         width: 90%;
         display: flex;
         flex-direction: column;
         gap: 5px;
         overflow: auto;
         left: 50%;
         transform: translateX(-50%);
     }

     .snackbar {
         background-color: #333;
         min-width: 0;
         width: 90vw;
         left: 50%;
         transform: translateX(-50%);
         bottom: 30px;
     }
 }