/* Bootstrap overrides */
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1400px;
    }
}

@media (min-width: 1200px) {
    .col-xl-2 {        
        width: 20%;
    }
}

@media (min-width: 1200px) {
    .col-xl-10 {      
        width: 80%;
    }
}
/* End Boostrap overrides */


/* add a variable for the primary color */
:root {
    --base-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    --viewer-primary: #0078b9; /* change per rep agency */

    --primary-text-color: #0A0A0A;
    --muted-text-color: #737373;
    --nav-link-color: #0A0A0A;
    --color-black: #000000;
    --color-black-light: #171717;
    --light-gray-border: #E5E5E5;
    --sidebar-background: #FAFAFA;
    --quote-nav-background: #F5F5F5;
    --sidbar-link-color: #646464;
    --banner-image-ratio: 44%; /* 378 / 856 = 0.4415 */
    --about-image-ratio: 133%; /* 4 / 3 = 1.333 */
    --border-radius-base: 16px;
    --medium-font-size: 16px;
    --background-gray: #F0F0F0;
    --background-light-gray: #F9F9F9;
}



html, body {
    font-family: var(--base-font);
    line-height: 1.45; /* fixed line-height reduces layout shifts */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    font-weight: 400;
    color: var(--primary-text-color)
}


h1, h2 {
    font-weight: 600;
}

.min-vh-viewer {
    min-height: calc(100vh - 98px);
}

.text-medium {
    font-size: var(--medium-font-size, 16px);
}

/* top nav */
.top-container {
    border-bottom: 1px solid var(--light-gray-border);
}

.logo {
    line-height: 1;
    min-height: 68px;
}

    .logo img {
        max-height: 68px;
        max-width: 250px;
    }



.nav {
    align-content: stretch;
    align-items: stretch;
}


.nav-item {
    border-bottom: 2px solid transparent; /* reserve space */
    transition: border-color .18s ease;
}

    .nav-item:hover, .nav-item:focus-within {
        /* focus-within covers keyboard focus on the link */
        border-bottom-color: var(--viewer-primary);
    }

    .nav-item.active {
        border-bottom-color: var(--viewer-primary);
    }

.nav a {
    color: var(--nav-link-color);
    font-weight: 400;
    font-size: 14px;
    font-style: normal;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0;
}

    .nav a:hover, .nav a:focus {
        color: var(--viewer-primary);
    }

.nav-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
}

    .nav-icon svg path {
        stroke: var(--nav-link-color);
    }

    .nav-icon:hover svg path {
        stroke: var(--viewer-primary);
    }

.nav-item.active .nav-icon svg path {
    stroke: var(--viewer-primary);
}

.nav-item.active a {
    color: var(--viewer-primary);
}


.banner-image-ratio {
    aspect-ratio: var(--banner-image-ratio);
    --bs-aspect-ratio: var(--banner-image-ratio);
}

.banner-image {
    border-radius: var(--border-radius-base);
}

/*  Sidebar nav */

.sidebar {
    background-color: var(--sidebar-background);
    border-right: 1px solid var(--light-gray-border);
}

.sidebar-nav li {
    border-radius: 6px;
    /*padding: .5rem .5rem;*/
    margin-bottom: .5rem;
}


    .sidebar-nav li a {
        color: var(--sidbar-link-color);
        font-weight: 600;
        font-size: 14px;
        font-style: normal;
        letter-spacing: 0;
        text-decoration: none;
        display: block;
        padding: .5rem .5rem;
    }

        .sidebar-nav li a svg {
            vertical-align: text-bottom;
            margin-right: .25rem;
        }

    .sidebar-nav li svg path {
        stroke: var(--nav-link-color);
    }


    .sidebar-nav li:hover {
        background-color: #F0F0F0;
        cursor: pointer;
    }

        .sidebar-nav li:hover a {
            color: var(--viewer-primary);
            text-decoration: none;
        }

        .sidebar-nav li:hover svg path {
            stroke: var(--viewer-primary);
        }

    .sidebar-nav li.active svg path, .sidebar-nav li.active a {
        stroke: var(--viewer-primary);
        color: var(--viewer-primary);
    }

    .sidebar-nav li.active {
        background-color: #F0F0F0;
    }


.btn-toggle-nav {
    /*margin-top: .5rem;*/
}

    .btn-toggle-nav li {
        border-radius: 0px;
        /*padding: .5rem 0rem;*/
        margin-bottom: 0;
    }

.sidebar-nav li.active .btn-toggle-nav li a {
    color: var(--sidbar-link-color);
}

.sidebar-nav li:hover .btn-toggle-nav li a {
    color: var(--sidbar-link-color);
}

    .sidebar-nav li.active .btn-toggle-nav li a:hover, .sidebar-nav li:hover .btn-toggle-nav li a:hover {
        color: var(--viewer-primary) !important;
    }

/* end sidebar nav */

.btn-toggle {
    padding: .25rem .5rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    background-color: transparent;
}

    .btn-toggle:hover,
    .btn-toggle:focus {
        color: rgba(var(--viewer-primary), .85);
    }

    .btn-toggle::before {
        width: 1.25em;
        line-height: 0;
        content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%230A0A0A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
        transition: transform .35s ease;
        transform: rotate(270deg);
        transform-origin: .5em 50%;
    }

    .btn-toggle[aria-expanded="true"] {
        color: rgba(var(--viewer-primary), .85);
    }

        .btn-toggle[aria-expanded="true"]::before {
            transform: rotate(360deg);
        }



.btn-toggle-nav a {
    padding: .1875rem .5rem;
    margin-top: .125rem;
    margin-left: 1.25rem;
}

    .btn-toggle-nav a:hover,
    .btn-toggle-nav a:focus {
        color: var(--viewer-primary);
    }


.btn-toggle-nav li.active a {
    color: var(--viewer-primary) !important;
}

.quote-summary-number {
    color: var(--muted-text-color)
}

.quote-summary-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-black);
}

.quote-renderings img {
    border-radius: 4px;
    border: solid 1px var(--light-gray-border);
    margin-bottom: 1.5rem;
}


.preview-mode {
    position: absolute;
    text-align: center;
    background-color: #A70000;
    padding: .25rem .75rem;
    color: #fff;
    margin-right: 1rem;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    float: right;
    right: 0;
}