body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body * {
   font-family: Arial, Helvetica, sans-serif;
}

main {
   display: flex;
   flex-direction: row;
   width: 100vw;
   height: 100vh;
}

.sidebar {
   z-index: 2;
   width: 300px;
}

.sidebar-container {
   padding: 10px;
   display: flex;
   flex-direction: column;
   gap: 5px;
   height: 100%;
   max-height: calc(100vh - 20px);
   overflow-y: scroll;
}

.sidebar-container::-webkit-scrollbar {
   width: 7px;
   height: 7px;
}

.sidebar-container::-webkit-scrollbar-thumb {
   cursor: pointer;
   transition: 0.45s all;
   background: #727272;
}

.sidebar-item {
   border-radius: 5px;
   padding: 7px 5px;
}

.sidebar-item:hover {
   background: #e3e3e3;
   cursor: pointer;
}

.sidebar-item * {
   cursor: pointer;
}

.map-container {
   display: flex;
   flex: 1 1;
   position: relative;
}

#map {
   position: absolute;
   z-index: 1;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

/* HTML: <div class="loader"></div> */

.loader-container {
   width: 100%;
   height: 100%;
   background: #000000eb;
   z-index: 10;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   justify-content: center;
   align-items: center;
}

label {
   pointer-events: none;
}

.loader {
   width: 50px;
   aspect-ratio: 1;
   border-radius: 50%;
   border: 8px solid #514b82;
   animation:
      l20-1 0.8s infinite linear alternate,
      l20-2 1.6s infinite linear;
}

.global-checkbox-container {
   background: #e3e3e3;
   padding: 15px;
}

@keyframes l20-1 {
   0% {
      clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
   }
   12.5% {
      clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
   }
   25% {
      clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
   }
   50% {
      clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
   }
   62.5% {
      clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
   }
   75% {
      clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
   }
   100% {
      clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
   }
}

@keyframes l20-2 {
   0% {
      transform: scaleY(1) rotate(0deg);
   }
   49.99% {
      transform: scaleY(1) rotate(135deg);
   }
   50% {
      transform: scaleY(-1) rotate(0deg);
   }
   100% {
      transform: scaleY(-1) rotate(-135deg);
   }
}