﻿/*body {
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    color: #393F5A;
    -webkit-overflow-scrolling: touch;
}*/

.navbar {
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom: 2px solid #393F5A;
}

.navbar-brand {
    width: 15%;
}

.nav-item {
    font-family: "Noto Sans", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #494947;
}

/*.hero1-bg {
    background-color: #EAE6E4;
    padding: 50px 0;
}*/


.home-bg {
    background-color: #EAE6E4;
}

.home-title {
    color: #282425;
    font-size: 2.0rem;
    font-weight: 300;
    margin-bottom: 0;
    padding-bottom: 0;
}

.home-copy {
    color: #3e3e3e;
    font-size: 1.5rem;
    font-weight: 300;
    margin-top: 0;
    padding-top: 0;
}

/* EXTRA MARGINS */
.mt100 {
    margin-top: 100px;
}

/* END EXTRA MARGINS */


.home-quote {
    color: #282425;
    font-size: 2.0rem;
    font-weight: 200;
    margin-top: 0;
    padding-top: 0;
    text-transform: uppercase;
}

.home-quote-2 {
    color: #b1988a;
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.home-quote-3 {
    color: #b1988a;
    font-size: 1.0rem;
    font-weight: 300;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

/* CUSTOM LINK */
/*
.link-button {
    background-color: rgba(194, 136, 122, 1.0);
    padding: 2px 5px 2px 5px;
    font-family: "Noto Sans", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    border-radius: 2px;
}

    .link-button:hover {
        background-color: rgba(194, 136, 122, 0.8);
    }
*/
/* INTERNAL PAGES */

/*.inner-page {
    padding: 0 5% 0 5%;
}

.cat-title {
    color: #393F5A;
    font-family: "seitu-variable", sans-serif;
    font-size: 2.5rem;
    font-variation-settings: "wght" 200;
    line-height: 2.5rem;
    margin-bottom: 0;
    padding-bottom: 0;
    text-transform: uppercase;
}

.cat-title-extended {
    color: #393F5A;
    font-family: "seitu-variable", sans-serif;
    font-size: 1.5rem;
    font-variation-settings: "wght" 200;
    line-height: 2.5rem;
    margin-bottom: 0;
    padding-bottom: 0;
    text-transform: uppercase;
}

.cat-sub-title {
    color: #393F5A;
    font-size: 2.0rem;
    font-weight: 200;
    line-height: 2.0rem;
    margin-bottom: 0;
    padding-bottom: 0;
}

.cat-copy {
    color: #3e3e3e;
    font-size: 1.0rem;
    font-weight: 300;
    margin-top: 0;
    padding-top: 0;
}

.cat-grid {
    font-family: "seitu-variable", sans-serif;
    font-size: 1.9rem;
    font-variation-settings: "wght" 500;
    color: #4a4a48;
}


    .cat-grid span {
        font-family: "seitu-variable", sans-serif;
        font-size: 1rem;
        font-variation-settings: "wght" 500;
        color: #4a4a48;
    }

    .cat-grid .config {
        font-family: "seitu-variable", sans-serif;
        font-size: 0.6rem;
        line-height: 0.5rem;
        font-variation-settings: "wght" 200;
        color: #4a4a48;
    }

.cat-image-container {*/
/*height: 400px;*/ /*Set any dimensions you like*/
/*width: 90%;
    border: 1 solid #333;
}

.cat-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
}


.program-image-div {
    display: inline;
    float: right;
    margin-right: 100px;
}

.program-image {
    width: 100px;
    float: right;
    margin-right: 20px;
}

.inner-title {
    font-family: "seitu-variable", sans-serif;
    font-size: 1.9rem;
    font-variation-settings: "wght" 500;
    color: #4a4a48;
}

.download-links {
    font-size: 1.0rem;
    color: #A28678;
    text-decoration: none;
}

    .download-links:hover {
        text-decoration: underline;
    }*/
/* Carousel */
/*.car-image {
    width: 100%;
}

.carousel-inner {
    width: 100%;
}*/
/*.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}*/

/* SPECS */

/*.spec-desk {
    display: block;
}

.spec-mobile {
    display: none;
}

.spec {*/
/*border: 1px solid #efefef;
    padding: 10px;
    border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;*/
/*}

.spec-title {
    color: #393F5A;
    font-family: "seitu-variable", sans-serif;
    font-size: 1.1rem;
    font-variation-settings: "wght" 300;
    line-height: 1.1rem;
}

table th {
    font-family: "Noto Sans", sans-serif;
    font-size: .8rem;
    font-weight: 700;
    color: #333 !important;
}

table td {
    font-family: "Noto Sans", sans-serif;
    font-size: .8rem;
    font-weight: 700;
    color: #333 !important;
}

.spec-qs {
    font-family: "Noto Sans", sans-serif;
    font-size: .8rem;
    font-weight: 300;
    color: #333 !important;
    line-height: .8rem;
}

.product-download {
    text-decoration: none;
}

.onetoonetext {
    font-family: "Noto Sans", sans-serif;
    font-size: .9rem;
    font-weight: 300;
    color: #333 !important;
    line-height: .8rem;
}

.materialtext {
    padding: 0;
    font-family: "Noto Sans", sans-serif;
    font-size: 1.0rem;
    font-weight: 300;
    color: #333 !important;
    line-height: 1.1rem;
}

    .materialtext span {
        color: #fff !important;
    }*/

/* RETAIL LOCATOR */
/*
.panel-color-2 {
    background-color: #EAE6E4;
    padding: 10px;
}

.results-row {
    margin: 0 0 5px 0;
    padding: 10px;
}

.result-number {
    font-family: "Noto Sans", sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    padding: 0 7px 7px 7px;
    margin-right: 10px;
    color: #C2887A;
    background-color: #4A4948;
}

.distance {
    font-family: "Noto Sans", sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    font-style: italic;
}

.result-name {
    font-family: "Noto Sans", sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: #333 !important;
    line-height: 1.1rem;
    margin: 15px 0 15px 0;
}

.result-address {
    font-family: "Noto Sans", sans-serif;
    font-size: 1.0rem;
    font-weight: 300;
    color: #333 !important;
    line-height: 1.1rem;
    margin: 0 0 0 0;
}*/
/* FOOTER */
/*.footer {
    background-color: #4A4948;
    margin-top: 50px;
}*/

.footer-container-block {
    padding: 30px 0;
}

.footer-text {
    padding: 0;
    color: #c4c3c3;
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: 300;
    text-transform: uppercase;
}

.footer-text-2 {
    padding: 0;
    color: #fff;
    font-size: 1.0rem;
    font-weight: 300;
    text-transform: none;
}

    .footer-text-2 a:link {
        color: #fff;
        text-decoration: none;
    }


/*@media (max-width: 1800px) {*/
/* Category Page */
/*.cat-copy {
        display: none;
    }
}

@media (max-width: 1600px) {*/
/* Program Image */
/*.program-image-div {
        display: inline;
        float: right;
        margin-right: 80px;
    }

    .program-image {
        width: 80px;
        float: right;
        margin-right: 10px;
    }
}

@media (max-width: 1400px) {*/
/* Program Image */
/*.program-image-div {
        display: inline;
        float: right;
        margin-right: 10px;
    }

    .program-image {
        width: 80px;
        float: right;
        margin-right: 10px;
    }
}*/

@media (max-width: 992px) {
    .navbar {
        background-color: rgba(255, 255, 255, 0.9);
        border-bottom: 2px solid #393F5A;
    }

    .navbar-brand {
        width: 40%;
        padding-top: 15px;
    }

    .nav-item {
        font-family: "Noto Sans", sans-serif;
        font-size: 0.9rem;
        font-weight: 500;
        color: #494947;
    }

    .navbar-nav {
        margin-left: 10px !important;
    }

        .navbar-nav .ms-5 {
            margin-left: 5px !important;
        }

    .navbar-toggler:focus {
        border: 0 !important;
        box-shadow: none !important;
    }

    .navbar-toggler {
        border: 0 !important;
    }
}

/*@media (min-width: 768px) {*/
/* MATERIALS */
/*.finish-sm {
        display: none;
    }

    .finish-lg {
        display: flex;
    }
}

@media (max-width: 768px) {
    .home-intro p {
        text-align: center;
    }

    .home-intro .home-title {
        font-size: 1.9rem;
    }

    .mt100 {
        margin-top: 40px;
    }

    .hand-built {
        width: 30%;
    }

    .home-title {
        font-size: 1.5rem;
    }

    .home-copy {
        font-size: 1.0rem;
    }

    .home-quote {
        font-size: 1.5rem;
    }

    .home-quote-2 {
        font-size: 1.0rem;
    }

    .home-quote-3 {
        font-size: 0.8rem;
    }

    .locally-sourced-icon {
        display: none;
    }*/

/* Category Page */
/*.program-image {
        display: none;
    }*/

/* Carousel */

/*.carousel-inner {
        width: 100%;
    }*/

/* MATERIALS */
/*.finish-sm {
        display: flex;
    }

    .finish-lg {
        display: none;
    }
}

@media (max-width: 479px) {*/
/* Carousel */
/*.car-image {
        width: 100%;
    }

    .carousel-inner {
        width: 100%;
    }

    .carousel-control-prev {
        display: none;
    }

    .carousel-control-next {
        display: none;
    }

    .spec-desk {
        display: none;
    }

    .spec-mobile {
        display: block;
    }
}*/
/* MEDIA QUERY TEST */
/*@media (max-width: 2200px) {
    .flex-adjust {
        flex-direction: column;
    }

    .spec-title {
        color: #393F5A;
        font-family: "seitu-variable", sans-serif;
        font-size: 1.0rem;
        font-variation-settings: "wght" 300;
        line-height: 1.1rem;
    }
}*/


.toast {
    visibility: hidden;
    min-width: 120px;
    background-color: black;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.5s;
}

    .toast.show {
        visibility: visible;
        opacity: 1;
    }


/*.custom-card {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 10px;
    padding: 15px 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    max-width: 400px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.custom-radio-input {
    display: none;*/ /* Hide default radio button */
/*}

.custom-card-wrapper {
    width: 100%;*/ /* Ensure full width */
/*max-width: 400px;*/ /* Prevent cards from being too wide */
/*}
.custom-card-container {
    display: flex;
    flex-direction: column;*/ /* Stack items vertically */
/*gap: 15px;*/ /* Adds spacing between cards */
/*align-items: center;*/ /* Centers cards */
/*}

.custom-icon img {
    width: 60px;
    height: 60px;
    border-radius: 50%;*/ /* Fully round */
/*border: 3px solid #c9a18a;
    padding: 5px;
    object-fit: cover;
    transition: border-color 0.3s ease;
}

.custom-content {
    margin-left: 15px;
}

.custom-title {
    margin: 0;
    font-size: 18px;
    color: #444;
}

.custom-description {
    margin: 5px 0 0;
    font-size: 14px;
    color: #666;
}*/

/* Change card and border color when selected */
/*.yf-radio-card-fill .yf-radio-option-fill {
    display: flex;
    flex-direction: row;*/ /* Changed from column to row */
/*align-items: center;*/ /* Center items vertically */
/*justify-content: space-between;*/ /* Distribute items evenly with space in between */
/*height: 100%;
    padding: 12px;*/ /* Reduced padding to fit better in row layout */
/*border: 1px solid var(--yf-light-gray);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    background: var(--yf-white);
    width: 100%;*/ /* Ensures the element stretches across the available space */
/*}

input.yf-radio-card-fill-input[type="radio"] {
    display: none;
}

    input.yf-radio-card-fill-input[type="radio"]:checked + .yf-radio-option-fill {
        border-color: var(--yf-secondary);
        box-shadow: 0 0 8px 1px var(--yf-black-rgba-15);
    }

.custom-radio-input:checked + .custom-card-wrapper .custom-card {
    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--YF-Secondary, #BA8A7D);
}

.custom-title {
    color: var(--YF-Dark-Gray, #4A4A48);
    font-family: "Noto Sans", sans-serif;*/ /* Ensures the font is loaded correctly */
/*font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;*/ /* This is 16.8px based on the 12px font size */
/*}

.custom-description {
    color: var(--YF-Dark-Gray, #4A4A48);
    font-family: "Noto Sans", sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    align-self: stretch;
}

.custom-icon {
    width: 58px;
    height: 56px;
    flex-shrink: 0;
    aspect-ratio: 29 / 28;
    border-radius: 50%;
    overflow: hidden;*/ /* Ensures the image fits within the rounded shape */
/*display: flex;
    justify-content: center;*/ /* Aligns the image horizontally in the center */
/*align-items: center;*/ /* Aligns the image vertically in the center */
/*}

    .custom-icon img {
        width: 100%;*/ /* Makes the image take up the full width of the container */
/*height: 100%;*/ /* Makes the image take up the full height of the container */
/*object-fit: cover;*/ /* Ensures the image covers the space without distortion */
/*}*/


.custom-card {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 10px;
    padding: 15px 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    max-width: 400px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.custom-radio-input {
    display: none; /* Hide default radio button */
}

.custom-card-wrapper {
    width: 100%; /* Ensure full width */
    max-width: 400px; /* Prevent cards from being too wide */
}

.custom-card-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: 15px; /* Adds spacing between cards */
    align-items: center; /* Centers cards */
}

.custom-icon {
    width: 58px;
    height: 56px;
    flex-shrink: 0;
    aspect-ratio: 29 / 28;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .custom-icon img {
        width: 100%; 
        height: 100%; 
        object-fit: cover;
    }

.custom-content {
    margin-left: 15px;
}

.custom-title {
    color: var(--YF-Dark-Gray, #4A4A48);
    font-family: "Noto Sans", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

.custom-description {
    color: var(--YF-Dark-Gray, #4A4A48);
    font-family: "Noto Sans", sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    align-self: stretch;
}

/* Change card and border color when selected */
.custom-radio-input:checked + .custom-card {
    border-color: #8b5e34; /* Highlight when selected */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

    .custom-radio-input:checked + .custom-card .custom-icon img {
        border-color: #8b5e34; /* Change image border when selected */
    }


#LoadingSpinnerOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.8); /* semi-transparent white */
    z-index: 1055; /* Above modals */
    display: flex;
    justify-content: center;
    align-items: center;
}