src/style/custom.css

@@ -42,7 +42,7 @@ main {
     height: 100%;
     right: 0;
     top: 0;
-    overflow: scroll;
+    margin-left: 0;
 }
 
 .travel-path-icon {
@@ -50,6 +50,9 @@ main {
     margin-top: -32px;
 }
 
+.input {
+    max-height: 100%;
+}
 
 .ml-auto {
     margin-left: auto;
@@ -67,10 +70,20 @@ main {
     height: 100%;
 }
 
+.h-0 {
+    height: 0%;
+    overflow: hidden;
+}
+
 .w-100 {
     width: 100%;
 }
 
+.w-0 {
+    width: 0%;
+    overflow: hidden;
+}
+
 .map-menu {
     position: absolute;
     display: flex;
@@ -105,7 +118,7 @@ main {
 }
 
 .map-menu-item:hover {
-    filter: brightness(150%);
+    background-color: var(--lightdark);
 }
 
 .map-menu-sub {
@@ -268,10 +281,86 @@ main {
     display: inline-block;
 }
 
-.list-group-item:not(.show):hover {
-    filter: brightness(85%);
+.list-group-item.bg-white:hover {
+    background: var(--blue);
+    /* filter: brightness(85%); */
 }
 
 .mx-datepicker {
     width: 100% !important;
 }
+
+.overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 5000;
+}
+
+.popup {
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    z-index: 5001;
+}
+
+.button {
+    background-color: var(--lightlight);
+    border: 0;
+    border-radius: var(--border-radius);
+    color: var(--darkdark);
+    display: inline-block;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    font-weight: 600;
+    white-space: nowrap;
+    line-height: 1.2em;
+    padding: 8px 16px;
+    margin: 8px 16px;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.tooltip .tooltip-text {
+    visibility: hidden;
+    background-color: var(--white);
+    color: var(--darkdark);
+    text-align: center;
+    border-radius: var(--border-radius);
+    padding: 2px;
+    position: absolute;
+    z-index: 20;
+    bottom: 0%;
+    left: 0%;
+    margin-left: 0px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    pointer-events: none;
+}
+
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}
+
+.smallbar {
+    z-index: 10;
+    position: absolute;
+    width: 100%;
+    top: 0;
+    display: flex;
+    flex-flow: row;
+    padding: 8px;
+    margin: 0 -12px;
+}