:root {
    /* Style Palette */
    --primary-color: #0D1B1E;
    /* --secondary-color: #8AA690; */
    --secondary-color: #7798AB;

    --accent-one: #C3DBC5;
    --accent-two: #E8DCB9;
    --bold: #856084;
    --body-background: #f8f9fa;
    /* --background-color: white; */
    /* https://coolors.co/visualizer/1f6930-13ed46-1e8f38-031708-19331f */
    /* https://coolors.co/visualizer/031708-19331f-1f6930-1e8f38-8aa690 */
    --up-color: #198754;
    --down-color: #dc3545;

    --border: 2px dashed #a73a3a;

    /* Bootstrap */
    --border-bs: 1px solid rgba(0, 0, 0, 0.175);
    --border-radius: 0.375rem;
    --border-width: 1px;
    --border-color: rgba(0, 0, 0, 0.175);

    --bg-light: rgb(248, 249, 250);
    --bg-onepage: rgb(231, 231, 231);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.50rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --outer-space: 0.75rem;
    --inner-space: 0.5rem;



}

/* Large Screens: 1600px and above */
@media (min-width: 1600px) {
    :root {
        --outer-space: 1rem;
        --inner-space: 1rem;
    }
}
/* Medium */
@media (min-width: 1200px) and (max-width: 1599px) {
    :root {
        --outer-space: 0.75rem;
        --inner-space: 0.5rem;
        /* --bg-light: rgba(255, 255, 0, 0.452); */
    }
}
/* Medium Screens: Between 768px and 1199px */
@media (min-width: 768px) and (max-width: 1199px) {
    :root {
        --outer-space: 0.25rem;
        --inner-space: 0.25rem;
        /* --bg-light: blue; */
    }
}
/* Small Screens: Below 768px */
@media (max-width: 767px) {
    :root {
        --outer-space: 0.75rem;
        --inner-space: 0.5rem;
        /* --bg-light: red; */
    }
}




/* montserrat-regular - latin */

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url("../packages/fonts/montserrat.74795056a235.woff2") format('woff2');
}

body {
    font-family: 'Montserrat', sans-serif !important;
}





body {
    background-color: var(--bg-light) !important;
    display: flex;
    flex-direction: column;
}

html, body {
    margin: 0;
}























/* Navbar */
.navbar-onepage {
    display: flex;
    justify-content: space-between;
    align-content: baseline;
    flex-direction: row;
    padding: 0;
    margin: 0;
    height: 4rem !important;
    min-height: 4rem !important;
}
.navbar-left {
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    align-items: center;
}
.navbar-right {
    display: flex;
    flex-direction: row;
    padding-right: 0.75rem;
    margin: 0;
    align-items: center;
}
.navbar-logo {
    padding: 0;
    margin: 0.5rem 1rem 0 0;
    width: 10rem;
}
.navbar-logo a {
    color: black;
    text-decoration: none;
}
.navbar-logo h4 {
    margin: 0;
    padding: 0;
}
.navbar-item {
    padding: 0;
    margin: 0 1rem;
    text-align: center;
}
.navbar-item:hover {
    color: gray;
}
.navbar-item.search {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: black;
}


/* loading */
.htmx-loading {
    display: flex; 
    align-items: center; 
    justify-content: center;
    /* height: 100%; */
}
.loading-icon {
    width: 24px; 
    height: 24px; 
    margin-right: 10px;
}

/* Icon */
.bi-icon {
    vertical-align: -0.125em;
}