/* ==========================
   NemoLens – Final CSS
   ========================== */

/* Root tokens */
:root {
    --nl-font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --nl-font-head: Manrope, var(--nl-font-sans);
  
    /* light theme defaults */
    --nl-color-bg: #f7f9fb;
    --nl-color-surface: #ffffff;
    --nl-color-surface-2: #f0f4f8;
    --nl-color-text: #101828;
    --nl-color-text-muted: #6b7280;
    --nl-color-border: rgba(16,24,40,.12);
  
    --nl-color-brand: #2f8cff;
    --nl-color-brand-2: #00c7a9;   /* lime / teal accent */
    --nl-color-ok: #00c7a9;
    --nl-color-info: #5b8cff;
  
    --nl-radius-sm: 8px;
    --nl-radius-md: 12px;
    --nl-radius-lg: 16px;
  
    --nl-shadow-sm: 0 4px 12px rgba(0,0,0,.06);
    --nl-shadow-lg: 0 12px 36px rgba(0,0,0,.12);
  
    --nl-transition-base: .18s ease;
  }
  
  /* dark theme */
  [color-scheme="dark"] {
    --nl-color-bg: #0b0d12;
    --nl-color-surface: #0f131a;
    --nl-color-surface-2: #0b1017;
    --nl-color-text: #e8edf7;
    --nl-color-text-muted: #8a93a6;
    --nl-color-border: rgba(255,255,255,.12);
  
    --nl-shadow-sm: 0 4px 12px rgba(0,0,0,.35);
    --nl-shadow-lg: 0 12px 36px rgba(0,0,0,.35);
  }
  
  /* Base */
  html, body { height: 100%; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--nl-font-sans);
    background:
      radial-gradient(1200px 800px at 70% -10%, rgba(91,140,255,.08), transparent 50%),
      radial-gradient(800px 600px at -10% 0%, rgba(58,109,255,.06), transparent 50%),
      var(--nl-color-bg);
    color: var(--nl-color-text);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  }
  
  /* Layout helpers */
  .nl-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
  .muted { color: var(--nl-color-text-muted); }
  
  /* Cards & surfaces */
  .nl-card {
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    border: 1px solid var(--nl-color-border);
    border-radius: var(--nl-radius-lg);
    box-shadow: var(--nl-shadow-sm);
    margin-top: 24px;
  }
  
  /* Buttons */
  .nl-btn {
    appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--nl-color-border);
    color: var(--nl-color-text);
    background: var(--nl-color-surface);
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--nl-transition-base), filter var(--nl-transition-base), border-color var(--nl-transition-base);
  }
  .nl-btn:hover { border-color: rgba(16,24,40,.22); filter: brightness(1.03); }
  [color-scheme="dark"] .nl-btn:hover { border-color: rgba(255,255,255,.18); filter: brightness(1.06); }
  
  .nl-btn--primary {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(90deg, var(--nl-color-brand), #3a6dff);
  }
  .nl-btn--primary:hover { filter: brightness(1.05); }
  .nl-btn--search { font-weight: 800; }
  
  /* Badges & tags */
  .nl-badge--lime {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    color: #08332f;
    background: #00c7a9;
    border: 1px solid rgba(0,199,169,.35);
  }
  [color-scheme="dark"] .nl-badge--lime { color: #eafff9; }
  
  .nl-tag {
    display: inline-block;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--nl-color-border);
  }
  .nl-tag--ok {
    color: #08332f;
    background: rgba(0,199,169,.12);
    border-color: rgba(0,199,169,.35);
  }
  [color-scheme="dark"] .nl-tag--ok { color: #eafff9; }
  .nl-tag--info {
    color: #0b2a66;
    background: rgba(91,140,255,.12);
    border-color: rgba(91,140,255,.35);
  }
  [color-scheme="dark"] .nl-tag--info { color: #e8f0ff; }
  
  /* Top bar (full-width strip) */
  .nl-topbar {
    position: sticky; top: 0; z-index: 20; width: 100%;
    background: var(--nl-color-surface);
    border-bottom: 1px solid var(--nl-color-border);
  }
  .nl-topbar__inner {
    display: flex; align-items: left; justify-content:start; gap: 12px; flex-wrap: wrap;
    padding: 10px 24px;
  }
  .nl-topbar__right { display: flex; align-items: center; margin-left: auto; gap: 8px; }
  
  /* Logo */
  .nl-logo { display: flex; align-items: center; gap: 8px; font-size: 18px; cursor: pointer;} 
  .nl-logo__img { height: 24px; width: auto; display: inline-block; }
  .nl-logo__text { display: inline-flex; gap: 0; line-height: 1; }
  .nl-logo__lens { color: #00c7a9 }
  


  @media (max-width: 600px) { .nl-logo__img{ height: 20px } }
  
  /* Hero */
  .hero { padding: 24px 0 0; }
  .hero .eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--nl-color-text-muted); }
  .hero h1 { margin: 6px 0; font-family: var(--nl-font-head); font-size: 40px; line-height: 1.1; font-weight: 800; }
  .hero .lead { color: var(--nl-color-text-muted); font-size: 18px; max-width: 780px; margin-top: 10px; }
  .hero-pills { margin-top: 24px; padding-left: 16px; display: grid; gap: 8px; }
  .hero-trust { display: flex; gap: 16px; align-items: center; color: var(--nl-color-text-muted); font-size: 13px; margin-top: 12px; }
  .hero-trust .dot { opacity: .45 }
  
  /* Section head (pricing header) */
  .section-head { padding: 24px 0 0; margin-top:24px; }
  .section-head .eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--nl-color-text-muted); }
  .section-head h2 { margin: 6px 0 0 0; font-family: var(--nl-font-head); }
  
  /* Pricing grid & plan cards */
  .nl-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px 24px; margin: 40px 0 24px 0; }
  @media (max-width: 900px){ .nl-pricing-grid { grid-template-columns: 1fr; } }
  
  .nl-plan-card { padding: 22px; display: flex; flex-direction: column; gap: 10px; position: relative; }
  .nl-plan-card.popular { border-color: rgba(0,199,169,.45); box-shadow: var(--nl-shadow-lg); }
  
  .nl-plan-title {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .12em;
    color: var(--nl-color-text-muted);
  }
  .nl-price { font-family: var(--nl-font-head); font-weight: 800; font-size: 40px; line-height: 1; }
  .nl-per { color: var(--nl-color-text-muted); font-size: 14px; }
  
  .nl-badge-reco { position: absolute; top: -14px; left: 16px; }
  .nl-save { margin-top: 4px; }
  .nl-cta { margin-top: auto; display: grid; gap: 8px; }
  
  /* Autorenev switch */
  .nl-billing { margin: 16px 0 0; display: flex; gap: 12px; color: var(--nl-color-text-muted); }
  .nl-switch {
    position: relative; width: 54px; height: 30px; border-radius: 999px;
    background: var(--nl-color-surface-2); border: 1px solid var(--nl-color-border);
    display: inline-flex; align-items: center;
  }
  .nl-switch input { appearance: none; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .nl-switch .knob {
    position: absolute; width: 24px; height: 24px; border-radius: 999px; left: 3px; background: #fff;
    transition: transform var(--nl-transition-base);
  }
  .nl-switch input:checked + .knob { transform: translateX(24px); }
  
  .nl-note { color: var(--nl-color-text-muted); font-size: 13px; }
  
  /* Lists */
  .nl-list-two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 20px; padding-left: 18px; }
  @media (max-width: 900px){ .nl-list-two { grid-template-columns: 1fr; } }
  
  /* Footer */
  footer { border-top: 1px solid var(--nl-color-border); margin-top: 36px; }
  .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; color: var(--nl-color-text-muted); font-size: 13px }
  .footer-links { display: flex; gap: 14px; flex-wrap: wrap }
  .footer-links a { color: var(--nl-color-text-muted); text-decoration: none; border-bottom: 1px dashed var(--nl-color-border) }
  .footer-links a:hover { color: var(--nl-color-text) }
  
  /* Utilities */
  .dot { opacity: .45 }
  





  /* ------------------------------------  OLD ------------------------------------------------------- */




.list-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Container for plain pages (without columns) */
.plain-page-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    background-color: #2a2a2a;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.plain-page-container textarea {
    box-sizing: border-box;
    padding: 10px;
    width: 100%; /* Ensures it doesn't exceed parent */
    min-height: 120px; /* Adjust initial height */
    resize: none; 
    border-radius: 10px;
}

/* Add spacing between form elements */
.plain-page-container form > * {
    margin-bottom: 15px;
}

table {
    border-radius: var(--nl-radius-lg);
    border-spacing: 6px;
}

td,th {
    background-color: var(--nl-color-surface);
    padding: 12px;
    border: 1px solid var(--nl-color-border);
}

/* table with round corners */
th:first-of-type {
    border-top-left-radius: var(--nl-radius-lg);
}
th:last-of-type {
    border-top-right-radius: var(--nl-radius-lg);
}
tr:last-of-type td:first-of-type {
    border-bottom-left-radius: var(--nl-radius-lg);
}
tr:last-of-type td:last-of-type {
    border-bottom-right-radius: var(--nl-radius-lg);
}



.tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.tag {
    padding: 3px 5px;   
    background-color: transparent;
    background-blend-mode: lighten;
    color: var(--nl-color-info);
    border-radius:var(--nl-radius-sm);
    border: 1px solid var(--nl-color-info);
    cursor: default;
}





.img_row_container {
    display: flex;
    justify-content: space-between; /* Distributes images with equal spacing */
    width: 100%; /* Adjust to the parent container */
}

.img_row_container img {
    width: 32%; /* Adjust this to fit within the parent, considering the gap */
    aspect-ratio: 1 / 1; /* Forces square shape */
    object-fit: cover;
    border-radius: 10px;
}

.main_img_mini {
    width: 30%; /* Adjust this to fit within the parent, considering the gap */
    aspect-ratio: 1 / 1; /* Forces square shape */
    object-fit: cover;
    border-radius: 10px;
}


.back-arrow {
    font-size: 1.5em;
    text-decoration: none;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 5px;
}

.styled-dropzone {
    border: 2px dashed #3cba3c;
    background-color: #2a2a2a;
    padding: 20px;
    text-align: center;
    font-size: 1em;
    color: var(--muted_text);
    border-radius: 10px;
    transition: border-color 0.3s;
}

.styled-dropzone:hover {
    border-color: var(--hover-color);
}

h1 {
    margin-bottom: 10px;
}

/* Apply horizontal layout on wider screens */
@media (min-width: 1024px) {
    .page-container {
        flex-direction: row; /* Side by side */
        align-items: flex-start; /* Align to the top */
    }

    .form-container {
        flex: 2; /* Left section: filters */
        max-width: 350px; /* Optional: restrict width */
    }

    .list-container {   
        flex: 3; /* Right section: results */
    }
}


.form-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.group {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[hidden] {
  display: none !important;
}

.group h3 {
    margin: 0;
    font-size: 1em;
    color: var(--text);
    border-bottom: 1px solid var(--nl-color-surface-2);
    padding-bottom: 5px;
    width:100%;
}

.checkbox-row {
    display: flex;
    justify-content: space-between; /* Distribute checkboxes equally */
    flex-wrap: wrap; /* Ensure responsiveness if there are too many checkboxes */
    gap: 10px; /* Optional spacing between items */
    align-items: center; /* Align items vertically */
}

.checkbox-item {
    flex: 1 1 auto;
    min-width: 30px;
    justify-content: center;
    margin: 0;
    display: flex;
    align-items: center;
    border: 1px solid var(--nl-color-border);
    border-radius: 999px;
    padding: 5px 10px;
    gap: 10px;
    transition: background-color 0.2s ease;
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);*/
}

/*
.checkbox-item:hover {
    background-color: var(--nl-color-surface-2);
}
*/

.checkbox-item input[type="checkbox"] {
    accent-color: var(--nl-color-brand-2);
    margin: 0;
}



input[type="number"],
input[type="text"],
input[type="password"],
input[type="search"],
textarea {
    flex: 1;
    background-color: transparent;
    color: var(--nl-color-text);
    border: 1px solid var(--nl-color-border);
    border-radius: 999px;
    padding: 10px;
    font-size: 1em;
    outline: none;
    transition: border 0.2s ease;
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);*/
}

input[type="number"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
    border: 1px solid var(--nl-color-brand-2);
}


/*
input[type="number"]:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
    background-color: var(--nl-color-surface-2);
}
*/


select {
    width:100%;
    background-color: transparent;
    color: var(--nl-color-text);
    border: 1px solid var(--nl-color-border);
    border-radius: 999px;
    padding: 10px;
    font-size: 1em;
    appearance: none; /* Remove default OS styling */
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Add a custom arrow */
select::-ms-expand {
    display: none; /* Hide default arrow in IE */
}

.select-container {
    position: relative;
}

.select-container::after {
    content: "▼"; /* Custom arrow */
    font-size: 0.9em;
    color: var(--text);
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* select options */
select * {
  color: var(--nl-color-text);
  background-color: var(--nl-color-surface);
}

select *:hover {
  color: var(--nl-color-text);
  background-color: var(--nl-color-surface2);
}


.filter-chip {
  background-color: var(--nl-color-text);
  color: var(--nl-color-text-muted);
  border: 1px solid var(--nl-color-border);
  border-radius: var(--nl-radius-sm);
  padding: 6px 12px;
}

.filter-chip-x {
  color: var(--nl-color-surface);
  margin-left: 12px;
}


.list-item {
    display: flex;
    min-width: 0; /* 800 px */
    background-color: var(--nl-color-surface);
    color: var(--nl-color-text-muted);
    border-radius: var(--nl-radius-lg);
    border: 1px solid var(--nl-color-border);
    overflow: hidden;

    flex-wrap: nowrap;
    align-items: stretch;
}

/*
.list-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}*/

.list-item img {
    width: 125px;
    height: auto;
    object-fit: cover;
    border-right: 4px solid transparent;
}

.list-item p {
    margin: 5px 0px;
}

.list-item .item-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px 15px 10px 11px;             
    /*flex: 1;*/
    flex: 1 1 auto;
}
 


/* Mobile layout */
@media (max-width: 850px) {
    .list-item {
        flex-wrap: wrap;
        justify-content: space-between;
        /* allow items to wrap onto multiple rows */
    }

    /* First row: all images on one row, equal width, fixed height */
    .list-item > img {
        flex: 0 0 33%;   /* exactly 1/3 of the row */
        max-width: 33%;        
        height: 150px;
        object-fit: cover;
        display: block;       /* just in case there’s global inline-img spacing */
        border-right: 0px;
      }

    /* Second row: content full width */
    .list-item .item-content {
        flex: 0 0 100%;
        box-sizing: border-box;
        /* take entire row width */
    }
}



.list-item .item-title {
  color: var(--nl-color-text);
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 5px;

  min-width: 0; /* crucial for ellipsis in a flex context */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.list-item h3 {
    margin: 8px 0px;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: inherit;
    text-decoration: underline;
}

.link-hover {    
    text-decoration: underline;
}




.item-location-row {
    display: flex;
    width: 100%;
    gap: 5px;
    flex-direction: row;
}


.item-location {
    /*color: #aaa;*/
    /*font-size: 0.9em;*/

    min-width: 0; /* crucial for ellipsis in a flex context */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
}



.list-item .item-pricing p {
    margin: 3px 0;
}


.yield {
    color: #e4e000;
    font-weight: bold;
}



.list-item .discount {
    color: var(--nl-color-ok);
}

.list-item .anti-discount {
    color: #ff0000;
}


.percent_negative {
    color: #ff0000;
}

.percent_positive {
  color: var(--nl-color-ok);
}




.list-item-gray {
    opacity: 50%;
    filter: grayscale(90%);
}




.submit-button, .reset-button {
    flex: 1;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);*/
}


.submit-button {
    background-color: var(--nl-color-brand-2);
}

.submit-button:hover {
    background-color: var(--nl-color-brand);
}

.submit-button:disabled { 
    opacity: 0.5;
    cursor: not-allowed; 
}


.reset-button {
    background-color: #ba8a3c;
}

.reset-button:hover {
    background-color: #b06f08;
}



.user {
    display: flex; 
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 15px;
}

.list_controls {
    display: flex; 
    justify-content: flex-end;
    margin-left:auto;
    margin-top: 12px;
}

.valuation-button, .main-login-button {
    width: fit-content;
    flex: none;
    margin-right: 10px;
}

.main-login-button {
    margin-left: auto;
    margin-right: auto;
}


.login_form {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    height: 70vh;
}

.login_form form {
    display: flex;
    flex-direction: column;
    gap: 15px;  
    align-items: center;
    justify-content: center;    
}

.center > input::placeholder {
    text-align: center; 
}





.url_row {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.url {
    flex: 1 1 0;
    min-width: 0; /* crucial for ellipsis in a flex context */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #707070;
}

.url a {
    color: #707070;
}

.hearts {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    gap: 4px;
    margin: 0px 0px 0px 10px;
    padding: 0px;
}


.heart-list {
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols', 'Arial Unicode MS', sans-serif;
    font-size: 24px;
    cursor: pointer;    
    margin: -4px 0px -4px 0px;
}

/*
.heart-list-click {
    text-shadow: 0px 2px 5px #000;
}
*/

.heart-list-click {
    padding-top: 2px;
    padding-bottom: 0px;
}

.heart-list-click:hover {
    padding-top: 0px;
    padding-bottom: 2px;
    
    /*filter: brightness(1.2);*/
    
    /*transform: scale(1.1);*/
    /*transform: translateY(-2px);*/
    /*text-shadow: 0px 0px 2px #ffffff;*/
}

label:active, .heart-list-click:active, .submit-button:active, .reset-button:active {
    transform: translateY(2px);
}


.heart-list-1 {
    color: #ff8060;
}
.heart-list-2 {
    color: #00c7a9;
}
.heart-list-3 {
    color: #2f8cff;
}

.listing_text {
    border-radius: 10px;
    background: var(--background);
    padding: 10px;
    white-space: pre-wrap;    
}


.feature-key {
    font-weight: normal;
}

.feature-value {
    font-weight: bold;
}

[data-tooltip]:hover::after {
    font-weight: normal;
    color: #fff;   
    text-shadow: none; 
    display: block;
    position: absolute;
    content: attr(data-tooltip);
    border: 2px solid black;
    background: #202020;
    box-shadow: 0 4px 10px #000; 
    margin-top: 12px;
    margin-left: -20px;
    padding: .35em !important;
    font-size: 12px;
    z-index: 1000;
}


svg {
    vertical-align: middle;    
}


.location-icon {
    flex: 0 0 auto;
    fill: var(--nl-color-text);
    /*filter: drop-shadow(0px 2px 3px #000);*/
}

.location-icon:hover {        
    transform: scale(1.1);
    /*filter: drop-shadow(0px 0px 2px #ffffff);*/
}

.location-icon:active {
    transform: translateY(1px);
}

.location-icon-anchor {
    display: contents;
    cursor: pointer;
}


.filter-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
}

.openable-box-wrapper {
  position: relative;          /* makes the panel position relative to this */
  display: inline-block;       /* or block, depending on your layout */
}


.filters-scrollable {
  position: absolute;
  left: 0;                     /* align with input's left edge */
  top: 100%;                   /* directly below the input */
  margin-top: 4px;             /* small gap if you like */
  width: 70vw;             /* same width as the input (or more) */

  border: 1px solid var(--nl-color-border);
  background: var(--nl-color-surface);
  border-radius: var(--nl-radius-lg);

  max-height: 70vh;
  overflow-y: scroll;
  z-index: 50;
  box-shadow: var(--nl-shadow-lg);
}


#loading-overlay {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  display: none;              /* hidden by default */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);  /* dark transparent layer */
  backdrop-filter: blur(4px);       /* optional: blur page behind */
  z-index: 9999;                    /* above everything */
}

/* Simple spinner */
.spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.economic-box-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px; 
}

.economic-box {
  border: 1px solid var(--nl-color-border);
  border-radius: var(--nl-radius-lg);
  color: var(--nl-color-text);
  padding: 12px;
  flex: 1;
}

.economic-box-number {
  font-weight: bold;
  font-size: larger;
}

.filter-brow {
  margin-bottom: 3px;
  margin-left:10px;
}