@import "bulma.min.css";
@import "../fontawesome/css/all.min.css";

/* Custom CSS variables */

:root {
    --menu-width: 320px;
}

/* Custom styles for the layout */

body {
    min-height: 100svh;
}

/* Custom styles for the menu */

#menu {
    position: fixed;
    width: var(--menu-width);
    height: 100svh;
    z-index: 1;

    .menu {
        .menu-list {
            display: grid;
            gap: 0.5rem;

            a.is-active {
                background-color: #20375c;
                color: white;
            }
        }
    }
}

/* Custom styles for content area */

#content {
    width: 100%;
    max-width: 1920px;
    padding: 0 0 0 var(--menu-width) !important;
}

/* Custom styles for table */

.table th,
.table td {
    vertical-align: middle;
}

/* Custom styles for breadcrumb */

.breadcrumb a,
.breadcrumb li.is-active a {
    color: #000000;
}

.breadcrumb a:hover {
    color: #000000;
    opacity: 0.5;
}

.breadcrumb li:first-child:before {
    color: var(--bulma-breadcrumb-item-separator-color);
    content: "/";
    margin-right: 0.75em;
}

/* Custom styles for modal dataset preview */

.modal-content.dataset-preview {
    width: 90%;
    max-width: 1440px;
}

/* Custom styles for Leaflet map */

.leaflet-marker-icon.leaflet-interactive {
    display: flex;
    justify-content: center;
    align-content: center;
}

.leaflet-control-attribution {
    display: none !important;
}