@import "https://unpkg.com/open-props";

body {
    --primary-1: #ecf1e6;
    --primary-2: #dee8d4;
    --primary-3: #c5d3b7;
    --primary-4: #98ab85;
    --primary-5: #b8de92;
    --primary-10: #1d211a;
    --primary-0: #f5faed;
 
    background: var(--primary-0)!important;

    display: flex;
    flex-direction: column;
    width: 100%;
}

#map {
    width: 100%;
    height: 500px;

}
.input-group {
    position: relative;
    margin: auto;
    width: 100%;
    align-items: center;
    gap: var(--size-4);
    border-bottom: 1px solid var(--primary-2);
    padding: var(--size-4);
}



.searchContainer {
    display: flex;   
    max-width: 400px;
    min-width: 200px;  
    flex: 2;
}

#searchButton {
   min-width: max-content;
}


.filters {
    display: flex;
    align-items: center;
    gap: var(--size-3);
}
.filters h5 {
    margin: 0;
    color: #333;
}
table {
position: relative;
padding: 0;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0, 0.5);
}

.form-group {
    display: flex;
    flex-direction: column;
    & label {
        color: #555;
    }
}

.loggedIn.loggedIn{
    display: none;
}

.prompt {
    background-color: var(--primary-1);
    padding: var(--size-4);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-2);
    max-width: 400px;
    width: 100%;
    margin: var(--size-5) auto;
    
  }

.prompt input {
    padding: var(--size-1);
    width: 100%;
    border: 1px solid var(--gray-4);
    border-radius: var(--radius-2)
}

.prompt label {
    display: block;
}
.prompt button {
    margin-top: var(--size-2);
}

.prompt section {
    margin-bottom: var(--size-2);
}
.isAdmin {
    display: block;
}
.nav {
    background-color: var(--primary-1);
    border-bottom: 1px solid var(--primary-2);
    position: relative;
}
.nav .fangstCallOut {
    position: absolute;
    top: calc(100% + var(--size-2));
    right: var(--size-3);
    background: var(--primary-1);
    display: block;
    padding: var(--size-2);
    z-index: 999;
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
    font-size: var(--font-size-1);
    &::after {
        content: "";
        display: block;
        width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid var(--primary-1);
  position: absolute;
  bottom: 100%;
  right: var(--size-3);
    }

}

.callOut {
    text-align: center;
    padding: var(--size-4);
    font-weight: 700;
}

.nav-link.nav-link {
    color: var(--primary-10);
    font-weight: 500;
    &:hover {
        background-color: var(--primary-2);
    }
}
.primary-nav-link {
    background: var(--primary-5)
}

.light-text {
    color: #666;
}

.popupTable td {
    padding: 1px 0px;
}
.popupTable td:first-child {
    padding-right: var(--size-2);
}

.center-container {
    margin: 0 auto;
    max-width: 700px;
    width: 100%
}