:root {
    --primary-gray: #47484c;
    --secondary-gray: #303030;
    --primary-light: #f5f6f7;
    --secondary-light: #e7ebee;
    --fog: #85878c;
    --lines: #d5d8e0;
    --primary-font: "Roboto", sans-serif;
}

body {
    margin: 0;
    font-family: var(--primary-font);
    color: var(--primary-gray);
    max-height: 100vh;
}

h2 {
    font-weight: 500;
}

.container {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    grid-template-rows: 0.2fr 1.4fr 1.4fr;
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "menu menu"
        "data map-container"
        "tool map-container";
    height: 100vh;
}

.menu {
    grid-area: menu;
    background-color: var(--primary-light);
    height: 4rem;
    border-bottom: var(--secondary-gray) 1.5px solid;
}

.data-container {
    grid-area: data;
    background-color: var(--primary-light);
    border-right: var(--secondary-gray) 1.5px solid;
    border-bottom: var(--secondary-gray) 1.5px solid;
}

.tool-container {
    grid-area: tool;
    background-color: var(--primary-light);
    border-right: var(--secondary-gray) 1.5px solid;
}

.map-container {
    grid-area: map-container;
    position: relative;
}

#manual-edit-tools {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    z-index: 1000;
}

#map {
    height: 100%;
    width: 100%;
}

button {
    background-color: var(--secondary-light);
    border: none;
    border-radius: 4px;
    padding: 4px 7px;
    font-size: 1em;
    font-weight: 500;
}

button:hover {
    background-color: var(--lines);
    cursor: pointer;
}

nav {
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 20px;
}

nav button {
    margin-right: 1em;
}

.box-header {
    display: grid;
    align-items: center;
    grid-template-columns: 2fr auto;
    margin: 0 20px;
}

.data span button {
    width: fit-content;
}

.data-sub-layer p {
    margin: 0;
    display: grid;
    grid-template-columns: min-content auto;
    gap: 5px;
}

.data-sub-layer p::before {
    content: '';
    aspect-ratio: 1;
    width: 10px;
    border-left: black solid 1px;
    border-bottom: black solid 1px;
}

.data-group {
    border-bottom: var(--secondary-gray) 1px solid;
    padding: 10px 20px;
}

.data-group:nth-child(1) {
    border-top: var(--secondary-gray) 1px solid;
}

.data-item {
    display: grid;
    grid-template-columns: 9fr 1fr 1fr 1fr;
    align-items: center;
}

.data-item a {
    display: flex;
}

.data-item p {
    margin: 0;
}

/* Basic styling for the dropdown */
.dropdown {
    position: relative;
    display: flex;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: var(--primary-light);
    border-radius: 4px;
    top: 35px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 999;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 200px;
}

.dropdown-menu li {
    padding: 10px 20px;
}

.dropdown-menu li a {
    text-decoration: none;
    color: var(--primary-gray);
    display: block;
}

.dropdown-menu li:hover {
    background-color: #f1f1f1;
}

.data-item-icons:hover {
    opacity: .75;
    cursor: pointer;
}

.legend {
    background-color: white;
    padding: 10px;
    border-radius: 7px;
    min-width: 140px;
}

.legend-list {
    padding: 0;
}

.legend-item {
    list-style-type: none;
}

.legend h4 {
    margin: 0;
    margin-bottom: 10px;
}

#popup-editor {
    width: 100%;
    height: 200px;
    border: 1px solid #ccc;
}

.hide {
    display: none !important;
}

.show {
    display: block;
}

#data-dialog {
    width: 80%;
    height: 635px;
}

.tool {
    margin: 0 20px;
    padding-bottom: 20px;
    overflow-y: scroll;
}

#data-entry {
    margin: 0 20px;
}

#data-form {
    margin-top: 20px;
}

a:hover {
    cursor: pointer;
}

dialog {
    border: none;
    background-color: var(--primary-light);
    border-radius: 4px;
}

dialog h3 {
    color: var(--primary-gray);
    margin: 0;
    margin-bottom: 10px;
}

menu {
    padding: 0;
}

.htContextMenu {
    display: none;
    position: absolute;
    z-index: 10000;
}

.data-sub-layer-content {
    display: flex;
    align-items: center;
}

.data-sub-layer-content button {
    background-color: transparent;
    padding: 5px;
    margin-left: 10px;
    line-height: 10px;
}

.data-sub-layer-content button:hover {
    background-color: var(--lines);
}

.alert-info {
    color: var(--primary-gray);
}

.alert-warning {
    color: #f5a623;
}

.alert-error {
    color: #d0021b;
}

.active-geom-type {
    background-color: var(--lines);
}