@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");

:root {
    --header-height: 3rem;
    --nav-width: 220px;
    --first-color: #98bb4b;
    --first-color-light: #748c36;
    --white-color: #F7F6FB;
    --body-font: 'Nunito', sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100
}

.header {
    position: fixed;
    z-index: 999;
    opacity: 1;
    width: 100%;
    box-shadow: 0 0 .15rem .05rem dimgrey;
}


.l-navbar {
    top: 0;
    position: fixed;
    /*left: -30%;*/
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--first-color);
    /*padding: .5rem 1rem 0 0;*/
    transition: .5s;
    z-index: 0;
}

/*.nav {*/
/*    height: 100%;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: space-between;*/
/*    overflow: hidden*/
/*}*/

.sidebar-header {
    background-color: whitesmoke;
    display: flex;
    padding: .5rem .5rem .5rem 0.95rem;
}

.sidebar-item {
    /*margin: 1rem 0 0 1rem;*/
    display: grid;
    padding: .5rem .5rem .5rem .5rem;
    margin-bottom: .5rem;
    border-radius: 0.25rem;
    background-color: var(--first-color-light);

}

.sidebar-icon {
    margin-right: .5rem;
}

.main {
    margin: 50px;
    height: 100vh;
    padding: 5rem;
    background-color: ghostwhite;
}

.main-auth {
    min-height: 100vh;
    padding: 1.75rem;
    background-color: ghostwhite;
    margin-top: 50px;
    margin-left: 220px;
}

.esri-view-surface {
    border-radius: .25rem !important;
}

#arcgis-map {
    margin: 0;
    height: 100%;
    width: 100%;
    padding: 0.1rem 0.13rem 0.2rem 0.1rem;
}

.invalid-div {
    border-radius: .25rem;
    border: 1px solid #dc3545;
}

.valid-div {
    border-radius: .25rem;
    border: 1px solid #198754;
}

.details-widget {
    background: white;
    border-radius: .15rem;
    padding: .5rem;
    margin: .35rem;
    box-shadow: 0 0 .12rem .02rem dimgrey;
}

.details-mid-widget {
    background: white;
    border-radius: .15rem;
    padding: 1rem;
    margin: 1rem;
    box-shadow: 0 0 .5rem .05rem dimgrey;
}

.widget-icon {
    max-width: 6rem;
    margin: .5rem;
}

.widget-body {
    padding: 1rem;
    width: max-content;
}