:root {
    /*-------------------------------*/
    /*---- Custom Values ----*/
    /*-------------------------------*/
    --colorPrimary-reskin: #012169;
    --colorSecondary-reskin: #00a3e0;
    --colorInactiveItem: #5a6e9d;
    /*---- Basic Colors ----*/
    /*-------------------------------*/
    --colorWhite-reskin: #FFFFFF;
    --colorBlack-reskin: #000000;
    --colorGreen-reskin: #09B552;
    --colorWelcomePageSidebar-reskin: var(--colorPrimary-reskin);
    --colorPrimaryButton-reskin: var(--colorPrimary-reskin); /* Primary Continue Button Colors */
    --colorSecondaryButton-reskin: var(--colorSecondary-reskin);
    --colorPrimaryButtonText-reskin: var(--colorWhite-reskin);
    --colorProjectSummaryTitle-reskin: var(--colorBlack-reskin);
    --colorQuotePageButtonOutline-reskin: var(--colorWhite-reskin);
    --colorGridItemHover-reskin: var(--colorPrimary-reskin); /* Hover outline color on grid items */
    --colorFilter-reskin: var(--colorPrimary-reskin);
    --colorBorderSecondary: rgba(143, 143, 143, 1);
    --colorBackgroundSecondary: #F2F2F2;
    --colorBackgroundOptimal: #d9f3d0;
    /*-------------------------------*/
    /*---- End Custom Values ----*/
    /*-------------------------------*/
}

#genericWizard-container .step-item-inactive {
    color: var(--colorInactiveItem);
    border-bottom-color: var(--colorInactiveItem);
}

#generators-form .field-validation-error, #generators-form .help-block.with-errors {
    font-size: 20px;
    font-style: italic;
}

select.form-control {
    height: 48px;
}

.option-list {
    border: none !important;
}

.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--colorPrimary-reskin);
    border-color: var(--colorPrimary-reskin);
    color: var(--colorWhite-reskin);
}

@media(max-width: 767px) {
    div.no-border-reskin.sinks-f-reskin.show-reskin {
        margin-left: 0px;
    }

    span.title.padding-top-s-reskin {
        padding-left: 15px;
    }

    #tab-purchaseasink {
        margin-left: 20px;
        margin-right: 20px;
    }

    .heading-secondary.wizards-mobile {
        padding-left: 30px;
    }

    .recommended-option-tags {
       
        gap: 4px;
        flex-direction: column
    }
    .recommended-option-content-generators {
        padding-left: 12px
    }
}

.hide-reskin #btn-tab-nosink {
    display: block;
    width: 100%;
}

@media(max-width:426px) {
    .row.option-list-inner.corners {
        margin-left: 0px;
        margin-right: 0px;
    }
}




@media (max-width: 1199px) {
    div.row.padding-nextstep-reskin > div.row > div.next-step-title.reskin {
        position: relative !important;
        transform: none !important;
        margin-left: 20px;
        margin-right: 20px;
        display: block !important;
        text-align: center;
    }

        div.row.padding-nextstep-reskin > div.row > div.next-step-title.reskin > p.paragraph-alternative > span > br {
            display: none;
        }

    div.row.padding-nextstep-reskin > div.row > div.col-xs-12.cold-md-5.col-lg-5 {
        padding-bottom: 10px;
        z-index: 10;
    }
}

#existingEstimates a {
    background: var(--colorWhite-reskin);
    border: 1px solid var(--colorPrimaryButton-reskin);
    border-radius: 5px;
    color: var(--colorPrimaryButton-reskin);
}

#existingEstimates .your-quote-wrapper-reskin {
    margin-bottom: 0px;
}

#existingEstimates .header3.primary-title {
    color: white;
    background-color: var(--colorPrimary-reskin);
    padding: 5px 0px;
    margin: 0;
    text-transform: uppercase;
    margin: -15px -15px 0px -15px;
    font-size: 20px;
}


.button-product-reskin:hover, .button-bottom-next-reskin:hover {
    cursor: pointer;
}



#form-CutoutsSection .option-item-inner figure {
    pointer-events: none;
}

#welcomeWizard-container .welcome-container-reskin .text-container-reskin {
    padding: 10px;
}

    #welcomeWizard-container #zip-code-form .customCheckbox label {
        padding-left: 5px;
    }

#toggleAssociateModal {
    margin-top: 5px;
    margin-left: -15px;
}

#welcomeWizard-container .log-in-btn-reskin {
    display: flex;
    width: 100%;
    justify-content: center;
}

    #welcomeWizard-container .log-in-btn-reskin > a {
        padding-right: 5px;
    }

#zip-code-form #continue-wizard.button-popup-next-reskin {
    font-size: 18px;
}

    #zip-code-form .ZipCodeDescription-reskin p{
    font-size: 16px;
}

#GoToCustomerInfo > span {
    font-size: 18px
}

.fd-flex-column {
    display: flex;
    flex-direction: column;
}

body[data-retailer^='Lowe'] #generators-form .multiple-choice span.popup-style-dropdown {
    padding-top: calc(var(--bs-gutter-x)*0.5);
    width: 40px;
}

#generators-form .assortmentDropdown.d-flex.col-xs-12 span {
    padding-left: calc(var(--bs-gutter-x)*0.5);
}

#form-HomeDetails .col-md-6 .img-responsive{
    padding-top: 20px;
}

#form-HomeDetails .col-md-6 .col-xs-12.assortmentDropdown,
#form-HomeDetails .d-flex.multiple-choice.autoHeight {
    padding-left: 0px;
}

#nextAction-back.button-bottom-back-reskin {
    color: var(--colorPrimaryButton-reskin);
    background-color: var(--colorWhite-reskin);
    border: 1px solid var(--colorPrimary-reskin);
    border-radius: 3px;
    min-width: 80px;
    width: 280px;
    font-weight: 700;
    height: 56px;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
}

#nextAction.button-bottom-next-reskin {
    color: var(--colorPrimaryButtonText-reskin);
    background-color: var(--colorPrimaryButton-reskin);
    border: 1px solid var(--colorPrimaryButton-reskin);
    border-radius: 3px;
    min-width: 80px;
    width: 280px;
    font-weight: 700;
    height: 56px;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
    align-content: center;
    text-align: center;
}



.button-bottom-next-reskin[disabled] {
    opacity: 70%;
}

div.option-list .option-item-inner:hover {
    border-color: var(--colorPrimaryButton-reskin);
}

div.option-list .option-item.checked .option-item-inner {
    border-color: var(--colorPrimaryButton-reskin);
}

@media (min-width: 1500px) {
    .container {
        width: 1500px;
    }
}

.generic-tree-header {
    padding: 15px 0;
}

    .generic-tree-header p {
        font-size: 20px;
        font-weight: bold;
    }

.tiles-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 50px;
    justify-content: center;
    gap: 10px;
}

.tile-card, .tile-card-assortment, .tile-card-yn-assortment{
    flex: 1 1 calc(25% - 10px);
    max-width: 25%;
    box-sizing: border-box;
    text-align: left;
    box-shadow: 0px 1px 3px 0px var(--colorPrimary-reskin);
    background-color: var(--colorWhite-reskin);
    position: relative;
    border-radius: 3px;
}

.tile-image img {
    width: 100%;
}

.tile-card-selected, div.recommended-option.selected {
    box-shadow: 0 0 0 3px var(--colorPrimaryButton-reskin);
}

    .tile-card-selected::after, div.recommended-option.selected::after {
        content: '✔\fe0e';
        position: absolute;
        top: 5px;
        right: 5px;
        background-color: var(--colorPrimaryButton-reskin);
        color: var(--colorWhite-reskin);
        font-size: 16px;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

.tile-description {
    padding: 8px 16px 16px 16px;
    display: flex;
    flex-direction: column;
}

    .tile-description p {
        margin-bottom: 0px;
    }

.tile-description-line1 p, .tile-description-line3 {
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;
}

.tile-description-line2 p {
    font-size: 14px;
    line-height: 19px;
}

.tile-description-line3 {
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;
}

.tile-description-line3 {
    width: fit-content;
    align-self: center;
}

.tile-tooltip {
    width: fit-content;
    padding-left: 5px;
}

.tile-description-assortments {
    padding: 8px 16px 0px 16px;
    display: flex;
    flex-direction: row;
}

.tile-price {
    padding: 5px 16px 16px 16px;
    display: flex;
    flex-direction: row;
}

.tile-card-assortment, .tile-card-yn-assortment {
    max-width: 100%;
}

@media (min-width: 768px) {
    #text-container {
        min-width: 480px;
        text-align: center;
    }
}

div.welcome-heading-reskin {
    text-align: center;
}

.checkbox-reskin input[type="checkbox"] {
    width: 20px; /* Size of the checkbox */
    height: 20px;
    appearance: none; /* Remove the default checkbox style */
    -webkit-appearance: none; /* For Safari */
    background-color: var(--colorWhite-reskin);
    cursor: pointer;
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    border-width: 0px;
}

    .checkbox-reskin input[type="checkbox"]:focus {
        border-width: 0px;
        outline: 0px auto -webkit-focus-ring-color;
        outline-offset: 0px;
    }

    .checkbox-reskin input[type="checkbox"]:checked {
        background-color: var(--colorPrimaryButton-reskin);
        border-color: var(--colorPrimaryButton-reskin);
        position: relative;
    }

        .checkbox-reskin input[type="checkbox"]:checked::after {
            content: '✔\fe0e';
            color: var(--colorWhite-reskin);
            font-size: 16px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-weight: bold;
        }

.ZipCodeDescription-reskin div {
    font-size: 16px;
    font-weight: bold;

}

#zip-form.modal .modal-body {
    margin-top: 0px;
    padding-top: 0px;
}

.recommended-options-container {
    display: flex;
    flex-direction:column;
    flex-wrap: wrap;
    gap:16px;
}

.recommended-option {
    display: flex;
    flex-direction: row;
    background-color: var(--colorWhite-reskin);
    flex-grow: 1;
    flex-basis: 0;

    position: relative;
    cursor: pointer;
}

.recommended-option-header {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    font-size: 25px;
    line-height: 32px;
    font-weight: 900;
    padding-left: 20px;
    min-width: 280px;
}


    .recommended-option-header > p {
        font-size: 25px;
        line-height: 32px;
    }

.recommended-option-image img {
    width: 100%;
}

.recommended-option-image {
    padding: 20px;
}

.recommended-option-content {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.recommended-option-content {
    padding: 16px 24px 20px 24px;
}

.recommended-option-title {
    font-weight: bold;
    font-size: 20px;
}

.recommended-option-description {
    font-size: 15px;
}

.recommended-option-tags {
    display: flex;
    gap: 48px;
}

.recommended-option-tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
}

.recommended-option-price {
    display: flex;
    padding-top: 28px;
    font-size: 32px;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    padding-right: 16px;
    gap: 20px;
}

.strikethrough-price {
    text-decoration: line-through;
}

.recommended-option-row {
    display: flex;
    flex-direction: row;
    gap: 24px;
}
.recommended-option-title-horizontal {
    font-weight: bold;
    font-size: 20px;
}

.recommended-option {
    border: 1px solid var(--colorPrimary-reskin);
    border-radius: 5px;
}

.recommended-option-button-container {
    padding-top: 20px;
}

.recommended-option-button {
    min-height: 56px;
    border: 1px solid var(--colorPrimaryButton-reskin);
    font-size: 18px;
    font-weight: bold;
    background-color: var(--colorWhite-reskin);
    text-align: center;
    align-content: center;
    color: var(--colorPrimaryButton-reskin);
    border-radius: 3px;
}

.recommended-option-button-container a:hover, .recommended-option-button-container a:focus {
    text-decoration: none;
    color: inherit;
}

.recommended-option-optimal .recommended-option-button {
    color: var(--colorPrimaryButtonText-reskin);
    background-color: var(--colorPrimaryButton-reskin);
    border: 1px solid var(--colorWhite-reskin);
}

.page-header {
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
}

.radio-multiple-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
}

.generator-assortmentgroup-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 40px;
    margin-top: 30px;
}

.radio-multiple-answer {
    display: flex;
    justify-content: center;
    gap: 20px;
}

    .radio-multiple-answer label {
        display: flex;
        gap: 10px;
    }

    .radio-multiple-answer input[type="radio"] {
        margin-top: 0;
    }

.radio-multiple-photo {
    width: 400px;
    height: 100px;
    border: solid 1px black;
}

.radio-multiple-name > div {
    margin-top: 0 !important;
}

.radio-multiple-option-2-container {
    display: flex;
    gap: 30px;
}

.radio-multiple-option-2 {
    display: flex;
    flex-direction: column;
}

@media(max-width: 767px) {
    .radio-multiple-option-2 {
        width: 40%;
    }

    .radio-multiple-option-2-container {
        flex-wrap: wrap;
        padding: 15px;
    }
}

.radio-multiple-option-2-header {
    margin: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0px;
}

.radio-multiple-option-2-header-input {
    display: flex;
    gap: 10px;
}

    .radio-multiple-option-2-header-input input[type="radio"],
    .radio-multiple-option-2-header-input label {
        margin: 0;
    }

.radio-multiple-photo-2 {
    width: 200px;
    height: 100px;
    border: solid 1px black;
}

.radio-multiple-name-2 {
    text-align: center;
}

.radio-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.radio-multiple-question-3 {
    padding-bottom: 20px;
}

.radio-multiple-name.radio-name, .radio-multiple-name-3.radio-name {
    align-items: normal;
    padding: 20px 0;
}

.name-center-align {
    text-align: center;
    justify-content: center;
}

.radio-multiple-container-3 {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 30px;
}

.radio-multiple-option-3-container {
    display: flex;
    column-gap: 100px;
}



.radio-multiple-option-3 label {
    display: flex;
    gap: 10px;
    width: max-content;
}

.radio-multiple-option-3 input[type="radio"] {
    margin-top: 0;
}

.radio-multiple-photo-3 {
    width: 200px;
    height: 100px;
    border: solid 1px black;
}

.radio-multiple-photos-container-3 {
    display: flex;
    gap: 20px;
    align-self: center;
}

.radio-multiple-photo-container-3 {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.radio-multiple-photo-description-3 {
    display: flex;
    justify-content: center;
}

.radio-multiple-name-3 > div {
    margin-top: 0 !important;
    margin-left: 0 !important;
}

.numeric-element {
    height: 100%;
    text-align: center;
    width: 100%;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--colorWhite-reskin);
}

.numeric-element-container {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

    .numeric-element-container input[type="text"]:focus,
    .numeric-element-container input[type="text"]:focus-visible {
        z-index: 1;
        outline-color: var(--colorSecondaryButton-reskin);
        outline-style: solid;
        border-radius: 1px;
        outline-width: 2px;
    }

.quantity-multiple-numeric {
    border: 1px solid var(--colorBorderSecondary);
    display: flex;
    justify-content: space-between;
    width: 75%;
    margin-right: 10px;
    cursor: pointer;
}

.numeric-disabled {
    background-color: rgba(200, 200, 200, 1) !important;
}

.quantity-multiple {
    height: 50px !important;
    padding-right: 150px;
}

div.assortment-name > span {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px
}

.question-item-row {
    border-top: 1px solid rgba(0, 0, 0, 0.09);
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    justify-content: space-between;
    height: 100%;
}

.plus-button {
    border-left: 1px solid var(--colorBorderSecondary);
}

.minus-button {
    border-right: 1px solid var(--colorBorderSecondary);
}

.assortment-name {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.assortment-numeric {
    width: 30%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}


#generators-form i.fa.fa-question-circle,
#generators-form i.fa.fa-info-circle {
    color: var(--colorPrimary-reskin);
}

span.text-xxlarge:focus-within {
    outline: none;
}

.cboxClose {
    top: 0px;
    right: 0px;
    position: relative;
}

    .cboxClose:before, .modal-header .close:before {
        content: "\2716";
        font-size: 25px;
        color: var(--colorPrimary-reskin);
    }

.modal-header .close span {
    display: none;
}

.modal-header .close {
    background-color: inherit;
}


.modal-body {
    padding: 20px;
}


.modal-content {
    border: 0px;
    border-top-width: 0px;
    border-top-style: none;
    border-radius: 0;
}

.modal-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-weight: bold;
    padding: 15px 20px;
}

    .modal-header:has(:nth-child(2)) {
        justify-content: space-between;
    }


.five9-frame .five9-chat-button {
    background-color: var(--colorSecondaryButton-reskin) !important;
}


#submitButton.active-primary-btn {
    color: var(--colorPrimaryButtonText-reskin); /*Workaround for important used in countertop-wizard_reskin.css to not break other styles*/
    background-color: var(--colorPrimary-reskin); /*Workaround for important used in countertop-wizard_reskin.css to not break other styles*/
    border-radius: 3px;
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
}

a.button-white-reskin, a.button-white-reskin:hover {
    background: var(--colorWhite-reskin);
    border: 1px solid var(--colorSecondary-reskin);
    border-radius: 0px;
    color: var(--colorSecondary-reskin);
    font-weight: 700;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.alt-recommendation-container {
    display: flex;
    flex-wrap: wrap;
}

.alt-recommendation-photo {
    max-width: 50%;
}

.alt-recommendation-desc {
    max-width: 50%;
    align-items: center;
    display: flex;
    padding-left: 15px;
}

#popup-get-customer-information .modal-header {
    border-width: 0px;
}

.recommended-option-button-next, .recommended-option-button-next:hover {
    min-height: 56px;
    border: 1px solid var(--colorPrimaryButton-reskin);
    font-size: 18px;
    font-weight: bold;
    background-color: var(--colorPrimaryButton-reskin);
    text-align: center;
    align-content: center;
    color: var(--colorWhite-reskin);
    border-radius: 3px;
}

.recommended-option-content-generators {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}
.recommended-option-image-generators img {
    width: 200px;
}

#welcome-continue-reskin.welcome-form-button {
    color: var(--colorPrimaryButtonText-reskin);
    border-color: var(--colorPrimaryButtonText-reskin);
    background-color: var(--colorPrimary-reskin);
}

.generator-image-small {
    align-self: center;
}
    .generator-image-small img {
        width: 100%;
    }

.recommended-option-description-bottom {
    display: flex;
}

.recommended-option-tags-name {
    color: #a0a4ad;
}

@media(max-width: 1024px) {
    .quantity-multiple {
        padding-right: 0px;
    }

    .tile-card, .tile-card-assortment, .tile-card-yn-assortment {
        min-width: 40%;
    }

    .recommended-option {
        min-width: 100%;
    }

    .sm-left-margin-0{
        margin-left: 0;
    }
}

@media(max-width: 768px) {
    .tile-card, .tile-card-assortment, .tile-card-yn-assortment {
        min-width: 100%;
    }

    #genericButtonsContainer {
        display: flex;
        flex-direction: column-reverse;
    }

    #generators-form #nextAction.button-bottom-next-reskin,
    #generators-form #nextAction-back.button-bottom-back-reskin {
        width: 100%;
    }

    .generator-assortmentgroup-container {
        justify-content: center;
    }

    .alt-recommendation-photo {
        max-width: 100%;
    }

    .alt-recommendation-desc {
        max-width: 100%;
        padding: 10px 0 0 0;
    }

    .radio-multiple-option-3-container {
        flex-wrap: wrap;
        row-gap: 20px;
    }

    .radio-multiple-question-3 {
        padding-left: 18px;
        padding-right: 18px;
    }

    #main-content-container .main {
        padding-left: 15px;
        padding-right: 15px;
    }

    recommended-option {
        display: flex;
        flex-wrap: wrap;
    }

    .recommended-option-tags {
        display: flex;
        gap: 0px;
        column-gap: 48px;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 12px;
    }

    .recommended-option-tags-container {
        width: 40%;
    }

    .recommended-option-title-horizontal,
    .recommended-option-tags {
        padding: 10px;
    }

    .generator-image-large {
        display: none;
    }

    .recommended-option {
        flex-direction: column;
    }
    .recommended-option-header{
        align-self: flex-start;
        justify-content: flex-start;
    }

    .recommended-option-description-bottom {
        padding-left: 10px;
    }
}


@media(min-width: 769px) {
    .alt-recommendation-container {
        padding-top: 15px;
    }

    .generator-image-small {
        display: none;
    }
}

@supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */
    .assortment-numeric {
        width: 40%;
    }
}