:root {
    --blue-1: #011f3b;
    --blue-2: #011e3a;
    --blue-3: rgba(1, 30, 58, 0.63);
    --blue-4: #0f284a;
    --red-1: #98012e;
    --red-2: #c3043d;
    --red-3: #9c0d37;
    --red-4:#ae3b5d;
    --white-1: #fff;
    --white-2: #f5f5f5;
    --black-1: #0c0b07;
    --beige-1: #e7e0d6;
    --grey-1: #abaeb0;
    --grey-2: #cccccc;
    --grey-3: #ebecee;
    --grey-4: #e4e1e1;
    --green-1:#073B01;
    --green-2:#1D4A0F;
    --green-3:#45AC25;
}

body.com_sash {
    main {
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%);
        margin-top: 0;
        margin-bottom: 0;
        max-width: 100vw;
        width: 100vw;
        div#form_wrapper {
            max-width: 1600px;
            margin: 4rem auto 0;
        }
    }
    h1,h2{
        font-family: 'bodoni_modaregular', serif !important;
    }
    #topNav, #botNav {
        background:var(--white-2);
        box-shadow:none;
        &.stuck {
            border-bottom: solid 2px var(--grey-2);
        }

        .progress-bar li{
            color:var(--blue-1);
        }
    }
    #botNav {
        &.stuck-bot {
            border-top: solid 2px var(--grey-2);

        }
        .text-center {
            display:flex;
            justify-content: center;
            gap:10px;
            button.ladda-button, button {
                background: var(--blue-1) !important;
                border: var(--blue-1) !important;
                color:var(--white-1);
                border-radius:4px;!important;
                font-size:var(--size-1);
                display:flex;
                width: 200px;
                height:44px;
                gap:10px;
                align-items: center;
                justify-content: center;
                .visible-phone {
                    display:none;
                }
                i {
                    width:24px;
                    height:24px;
                }
                .fa-angle-double-left {
                    &::before {
                        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8'/%3E%3C/svg%3E");
                    }
                }
                .fa-angle-double-right {
                    &::before {
                        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8'/%3E%3C/svg%3E");
                    }
                }
                .order-now {
                    &::before {
                        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23FFF'%3E%3Cpath d='M11.354 6.354a.5.5 0 0 0-.708-.708L8 8.293L6.854 7.146a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0z'/%3E%3Cpath d='M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607l1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4a2 2 0 0 0 0-4h7a2 2 0 1 0 0 4a2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1zm3.915 10L3.102 4h10.796l-1.313 7zM6 14a1 1 0 1 1-2 0a1 1 0 0 1 2 0m7 0a1 1 0 1 1-2 0a1 1 0 0 1 2 0'/%3E%3C/g%3E%3C/svg%3E");
                    }
                }
                &:hover {
                    background: var(--blue-4) !important;
                    border: var(--blue-4) !important;
                }

                    padding: 7px 14px !important;
                    border-radius: 3px;

                    p {
                        font-weight: normal;
                    }

            }
        }
    }
    main {
        position: relative;
        z-index:2;
    }
    #adminForm {
        ul.thumbnails {
            list-style: none;
            display:grid;
            grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
            padding:0;
            gap:3rem;
            li {
                margin:0 auto;
            }
            .span6, .span4 {
                width:auto;
            }
        }

    }
    #topNav {
        .progress-bar>li.is-active:before {
            color: var(--white-1);
            background: var(--blue-1);
        }
    }
    .qty_spin.quantity-box {
        span.btn-number.btn-select-fix {
            width:35px;
            height:35px;
            padding:0;
            display:flex;
            align-items:center;
            justify-content: center;
            position:relative;
        }
        .fa.fa-minus::before {
            position: absolute;
           content:"-";
            inset:0;
            display:flex;
            align-items:center;
            justify-content: center;
            font-size:2rem;
            color:var(--blue-1);
            line-height:1;
        }
        .fa.fa-plus::before {
            position: absolute;
            content:"+";
            inset:0;
            display:flex;
            align-items:center;
            justify-content: center;
            font-size:2rem;
            color:var(--blue-1);
            line-height:1;
        }
    }
    .sash_helpful_text_right {
        font-size:var(--size-1);
        margin-top: 2rem;
    }
    #price-block {
        margin-top:4rem;
        color:var(--blue-1);
        h2, #sash-price {
            color:var(--blue-1);
        }
    }
    div.bulk_pricing_link {
        background: var(--red-1);
        border: var(--red-1);
        &:hover {
            background: var(--red-2);
            border: var(--red-2);
        }
        a {
            padding: 7px 14px !important;
            border-radius: 3px;
            display: block;
            p {
                font-weight: normal;
            }
        }
    }
    #sash-price_old.hero-unit {
        padding: 10px 20px;
        margin-bottom: 0;
    }
    .thumbnail {
        img {
            max-width:300px;
            margin-inline: auto;
        }
    }
    .remodal {
        padding:20px;
        border-radius:10px;
    }
    .modal-footer {
        gap:10px;
        button {
            background:var(--green-1);
            border:none;
            border-radius:4px;
            display:flex;
            align-items:center;
            justify-content: center;
            color:var(--white-1);
            padding: 7px 14px;
            &:hover, &:focus, &.active {
                background:var(--green-2);
            }
            &.remodal-cancel {
                background:var(--red-1);
                &:hover, &:focus, &.active {
                    background:var(--red-2);
                }
            }
        }
    }
    .progress-bar>li.is-complete:before, .progress-bar>li.is-complete:after {
        color: var(--white-1);
        background: var(--blue-1);
    }
    .progress-bar>li.is-complete:before, .progress-bar>li.is-complete:after {
    color: var(--white-1);
        background: var(--blue-1);
    }
    .inner-phase2, .inner-phase3, .inner-phase4 {
        .control-label {
            padding-left:0;
            font-size:1.1rem;
        }
        div.span12 a {
            background:var(--red-1);
            border:none;
            border-radius:4px;
            top: 2rem;
            position: relative;
            &:hover, &:focus, &.active {
                background:var(--red-2);
            }
            margin-left:0;
            padding:7px 14px;

        }
        .select2, .select2-selection, .select2-selection__rendered, .select2-results__option {
            span {
                font-size:1.1rem !important;
            }
            font-size:1.1rem !important;
        }
    }
    .select2-results__option {
        font-size: 1rem;
    }
    .inner-phase4 {
        .control-group .controls {
            display:flex;
            align-items:center;
        }
    }
    #right-admin-adds {
    position: absolute;
    right: 0px !important;
    top: 0px;
    bottom:unset;
    background: var(--white-2);
    z-index: 500;
    width: 350px;
    border: solid;
    max-height: 700px;
    overflow: hidden;
        border-radius:10px;
        border:none;
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);

    }
    .fpd-navigation>div {
        display: flex;
        -webkit-box-flex: 1;
        flex: 1;
        gap:10px;
        margin: 0;
        padding: 11px 10px;
       text-align: left;
        cursor: pointer;
    }
    .fpd-navigation>div>span {
        font-size: 1.1rem;
        line-height: 1;
        color:var(--blue-1) !important;
    }
    .fpd-navigation {
        display: flex;
        gap: 10px;
        .images, .text {
            display: flex;
            gap: 5px;
            align-items: center;
        }
    }
    .fpd-content {
        textarea {
            width:100%;
        }
        .fpd-btn {
            background:var(--blue-1);
            display:flex;
            align-items: center;
            justify-content: center;
            box-shadow:none;
            border:none;
            color:var(--white-1);
            padding:7px 14px;
            border-radius:4px;
            font-weight:normal;
            width:100%;
        }
    }
    #right-admin-adds a[data-remodal-target] {
        color: var(--blue-1);
        font-size: 1.1rem;
        text-decoration: underline;
        font-weight: normal;
        line-height: 1.5;
        font-family: 'Montserrat', sans-serif;

        p {
            margin-bottom:0;
            padding-block:10px;
        }
    }
    #main-block > .row-fluid:nth-of-type(1){

            display:grid;
            grid-template-columns:minmax(250px, 400px) 1fr minmax(250px, 400px);
            gap:2rem;

            & > div {
                width:auto;
                float:none;
            }
            &:has(.inner-main.span9) {
                grid-template-columns:2fr 1fr;
                .price-block {
                    .row-fluid {
                        display:grid;
                        grid-template-columns:1fr;
                    }
                }
            }
        .inner-main, #price-block {
            margin-left:0;
        }
        .inner-phase2 {

            max-width:650px;
            margin-inline:auto;
        }
        .phase4_sash_custom_text {
            overflow:hidden;
        }

    }
    @media screen and (width < 1650px) {
        div#form_wrapper {
            padding-inline:2rem;
        }
    }
    @media screen and (width < 1350px) {
        #main-block > .row-fluid:nth-of-type(1):not(:has(.inner-main.span9)) {
                grid-template-columns:1fr 1fr;
        }
        #main-block:has(.inner-phase2.hidden, .inner-phase3.hidden, .inner-phase4.hidden) {
            .row-fluid:nth-of-type(1) {
                #inner-main {
                    grid-column: 1 / span 2;
                    max-width:700px;
                    justify-self:center;
                    .thumbnails {
                        padding:0;
                        gap:3rem;
                        .span6 {
                            width:100%;
                        }
                    }
                }
            }
        }
        #main-block:has(.inner-phase1.hidden) {
            .row-fluid:nth-of-type(1) {
                #engine7-block {
                    grid-area: 1 / 1 / 2 / 2;
                    .fpd-product-stage {
                        margin-inline:auto;
                    }
                }
                #inner-main {
                    grid-area: 1 / 2 / 2 / 3;
                    max-width:unset;
                    justify-self:unset;
                }
            }
        }
        #price-block {
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:2rem;
            grid-row:2 / 3;
            grid-column: 1 / span 2;
            max-width:700px;
            justify-self:center;
            margin-bottom:4rem;
            .price-block-1 {
                order:2;
            }
            .price-block-2 {
                order:1;
                .sash_helpful_text_right {
                    margin-top:0;
                }
            }
        }
        #sash-designer {
            margin-inline:auto;
        }
    }
    @media screen and (width < 900px) {
        #main-block:has(.inner-phase1.hidden) {
            .row-fluid:nth-of-type(1) {
                #engine7-block {
                    grid-area: 1 / 1 / 2 / 2;
                    .fpd-product-stage {
                        margin-inline:auto;
                    }
                }
                #inner-main {
                    grid-area: 1 / 2 / 2 / 3;
                    max-width:unset;
                    justify-self:unset;
                }
            }
        }
    }
    @media screen and (width < 821px) {

            #main-block:has(.inner-phase1.hidden) {
                .row-fluid:nth-of-type(1) {
                    grid-template-columns:1fr !important;
                    #engine7-block, #inner-main, #price-block {
                        grid-column: 1 / span 2;
                    }
                    #inner-main {
                        grid-area: 2 / 1 / 3 / 2;
                    }
                    #engine7-block {
                        grid-area: 1 / 1 / 2 / 2;

                    }
                    #price-block {
                        grid-area: 3 / 1 / 4 / 2;
                        margin-bottom:4rem;
                        margin-top:4rem;
                        padding-top:4rem;
                        border-top:solid 1px var(--grey-2);
                    }

                }
            }
        div#form_wrapper {
            padding-inline: 1rem;
        }

    }
    @media screen and (width < 571px) {
        #sash-designer {
            width:auto !important;
            .lower-canvas, .upper-canvas {
                margin-inline:auto;
            }
        }
        .fpd-container>.fpd-main-wrapper {

        }
    }
    @media screen and (width < 553px) {
        #price-block {
            grid-template-columns:1fr;
            .price-block-1 {
                order:1;
            }
            .price-block-2 {
                order:2;
            }
        }
    }
    @media screen and (width < 352px) {
       .control-label {
           width:100%;
       }
        .controls {
            float: unset;
            width: 100%;
            max-width: 100%;
            padding-left: 0px !important;
        }
    }
}