div.order-container {
    min-height: calc(83svh - (60px + 20px));
    padding-bottom: 60px;
    & div.child {
        width: calc(1140px - 0px);
        border-radius: 27px;
        display: block;
        margin: 80px auto 0 auto;
    }
    & div.child div.parent-tab {
        display: flex;
        align-items: flex-start;
        gap: 30px;
    }
    & div.tab.start {
        flex: 1;
    }
    & div.tab.end {
        width: 500px;
    }
    /*& h1 {*/
    /*    font-size: 37px;*/
    /*}*/
    & h2 {
        font-size: 22px;
    }
    & h3 {
        font-size: 17px;
        font-weight: 400;
        margin-top: 5px;
        color: #353535;
    }
    & div.form-error-container {
        background-color: #FFD6D6;
        margin-top: 20px;
        border: 1px solid #ff0000;
        border-radius: 11px;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px;
        font-size: 14px;
        & div.icon {
            display: flex;
        }
        & div.icon svg {
            height: 22px;
            width: 22px;
            display: flex;
            fill: #ff0000;
        }

        & p {
            color: #660000;
        }
        &[data-visibility="hidden"] {
           display: none;
        }

    }
    & div.form {
        border: 1px solid var(--secondary-color-30);
        box-shadow: rgba(14, 63, 126, 0.04) 0 0 0 1px, rgba(42, 51, 69, 0.04) 0 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0 6px 6px -3px, rgba(14, 63, 126, 0.04) 0 12px 12px -6px, rgba(14, 63, 126, 0.04) 0 24px 24px -12px;
        padding: 20px;
        border-radius: 27px;
    }
    & div.form div.subform {
        margin-top: 20px;
        /*display: grid;*/
    }
}
div.order-container div.features-summary {
    display: flex;
    align-items: center;
    height: 50px;
    gap: 20px;
    margin: 14px 0 25px 0;
    background-color: #f5f7fa;
    /*border: 1px dashed var(--secondary-color-30);*/
    /*box-shadow: rgba(0, 0, 0, 0.1) 0 0 5px 0, rgba(0, 0, 0, 0.1) 0 0 1px 0;*/
    border-radius: 9px;
    & div.short-feature {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 15px;
        color: #353535;
    }
    & div.short-feature img {
        height: 27px;
        width: auto;
        display: flex;
    }
}

div.order-container div.features {
    height: auto;
    border-radius: 27px;
    border: 1px dashed var(--secondary-color-30);
    display: grid;
    & div.feature {
        padding: 20px 20px 0 20px;
    }
    & div.feature img {
        height: 35px;
        width: auto;
    }
    & div.feature:last-child {
        padding-bottom: 20px;
    }
    & div.feature h2 {
        display: flex;
        align-items: center;
        font-size: 18px;
        margin-bottom: 5px;
        gap: 10px;
    }
    & div.feature p {
        color: #272727;
        font-size: 15px;
        line-height: 1.4;
    }
    & div.feature p strong {
        font-weight: 500;
    }
    &[data-visibility="hidden"] {
        display: none !important;
    }
}
/* Pricing Container */
div.pricing-container {
    & div.tabs {
        display: flex;
        flex-direction: row;
        height: auto;
        margin: 25px 0;
        /*gap: 10px;*/
    }
    & div.tabs div.tab {
        flex: 1;
    }
    & p.title {
        font-size: 28px;
        font-weight: 600;
    }
    & p[data-type="amount"] {
        font-size: 32px;
        font-weight: 600;
        span {
            font-size: 17px;
            font-weight: 400;
            color: #353535;
        }
    }
    & p[data-type="subtitle"] {
        background-color: rgba(96, 24, 196, 0.1);
        border-radius: 4px;
        display: inline-flex;
        font-size: 15px;
        padding: 3px 6px;
        margin-top: 10px;
    }
    & p.subtitle {
        font-size: 17px;
        margin-top: 5px;
        color: #353535;
    }

    & div.info {
        height: auto;
        background-color: #f7f7f7;
        padding: 14px;
        border-radius: 7px;
        margin-top: 14px;
    }
    & div.info p.title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 7px;
        font-style: italic;
    }
    & div.info p.info {
        font-size: 15px;
        color: #000;
    }
}

div.card-confirmation {
    padding: 14px;
    border: 1px dashed var(--secondary-color-30);
    background-color: var(--primary-color-10);
    font-size: 16px;
    border-radius: 17px;
    margin-bottom: -16px;
}
div.card-confirmation div.text {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0;
    & p {
        flex: 1;
        margin-left: 10px;
    }

    & img {
        width: 30px;
        height: 30px;
        display: flex;
    }
    & button {
        border: 0;
        outline: none;
        padding: 0;
        border-radius: 3px;
        background-color: transparent !important;
    }
    & button:hover {
        opacity: 0.7;
        cursor: pointer;
    }
}
div.card-confirmation div.buttons {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    & button {
        padding: 8px 16px;
        font-size: 15px;
        border-radius: 50px;
        border: 0;
        outline: none;
        cursor: pointer;
    }
    & button:hover {
        opacity: 0.8;
    }
}
div.card-confirmation div.buttons button:nth-child(1) {
    background-color: #fff;
    color: #000;
}
div.card-confirmation div.buttons button:nth-child(2) {
    background-color: var(--secondary-color);
    color: #fff;
    font-weight: 600;
}

div.open-member-container {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    & button {
        display: flex;
        align-items: center;
        height: 38px;
        font-size: 15px;
        padding: 0 14px;
        border: 0;
        border-radius: 50px;
        outline: none;
        background-color: var(--secondary-color);
        color: #fff;
        cursor: pointer;
        font-weight: 500;
    }
    & button span {
        margin-left: 10px;
    }
    & svg {
        height: 16px;
        width: 16px;
        display: flex;
        fill: #fff;
    }
}
div.open-member-container[data-visibility="hidden"] {
    display: none;
}

/* Alternate phone number input */
div.input-container.mobile-number {
    & p.cc {
        position: absolute;
        padding: 8px;
        top: 5px;
        left: 5px;
    }
    & input {
        padding-left: calc(41px + 12px);
    }
}
button#remove-alter-number {
    position: absolute;
    right: 5px;
    top: 5px;
    height: 36px;
    width: 36px;
    border: 0;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background-color: transparent;
    cursor: pointer;
    & svg {
        height: 14px;
        width: 14px;
        display: flex;
    }
    &:hover {
        background-color: var(--primary-color-10);
        transition: all 250ms ease-in-out;
    }
}

/* Open alternate phone number input */
button#add-alter-number {
    border: 0;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    background-color: var(--secondary-color);
    cursor: pointer;
    & svg {
        height: 16px;
        width: 16px;
        display: inline-flex;
        fill: #fff;
    }
    & span {
        margin-left: 10px;
        display: flex;
    }
    &:hover {
        opacity: 0.8;
        transition: all 250ms ease-in-out;
    }
}

div.order-summary div.title-container {
    & div {
        display: flex;
        align-items: center;
    }
}
button#delete-address-ls {
    border: none;
    padding: 0;
    height: 31px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 7px;
    background-color: transparent;
    & svg {
        fill: var(--secondary-color);
    }
    &:hover svg {
        fill: #ff0000;
    }
    &[data-visibility="hidden"] {
        display: none;
    }
}
div.order-summary p.title {
    font-size: 18px;
    font-weight: 500;
    color: #212121;
}
div.order-summary div.title-container button {
    padding: 6px 18px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 50px;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    background-color: #fff;
    cursor: pointer;
    &[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
    }
    &:hover:not([disabled="disabled"]) {
        background-color: var(--secondary-color);
        color: #fff;
    }
    & svg {
        height: 21px;
        width: 21px;
        display: flex;
        overflow: visible;
    }
}
div.order-summary div.address {
    background: rgb(245 247 250);
    padding: 14px;
    border-radius: 7px;
    border: 1px dashed var(--secondary-color-50);
    & div.text {
        margin-top: 10px;
    }
    & div.text p.name {
        display: flex;
        align-items: center;
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 5px;
        & span.type {
            font-size: 12px;
            background-color: #e8e8e8;
            color: #353535;
            display: inline-block;
            margin-left: 10px;
            padding: 3px 6px;
            border-radius: 3px;
        }
        & span.cn {
            font-size: 15px;
        }
    }
    & div.text p.add-info {
        margin-top: 10px;
        font-size: 15px;
    }
    & div.text p.cn {
        margin-top: 10px;
        font-size: 15px;
        & span {
            font-weight: 500;
        }
    }

}
div.order-summary div.cards {
    margin-top: 14px;
    padding: 14px 0;
    border: 1px dashed var(--secondary-color-30);
    border-left: 0;
    border-right: 0;
    & div.card {
        display: flex;
        align-items: center;
        padding: 10px;
        margin-top: 10px;
        background: rgb(245 247 250);
        border-left: 2px solid var(--secondary-color-50);
    }
    & div.card p.info {
        flex: 1;
        font-size: 15px;
        font-weight: 500;
        color: #212121;
        display: flex;
        gap: 10px;
    }
}
div.order-summary div.dealer-sign-paper {
    padding-top: 14px;
    display: flex;
    align-items: center;
    & img {
        width: 120px;
        height: auto;
        border-radius: 3px;
        display: flex;
        margin-right: 14px;
    }
    & p.info {
        margin-top: 5px;
        line-height: 1.4;
        font-size: 15px;
    }
    & p.price {
        display: inline-flex;
        font-size: 14px;
        background-color: #e8e8e8;
        padding: 3px 6px;
        border-radius: 3px;
        margin-top: 7px;
        & span {
            font-weight: 600;
            display: block;
            margin-left: 5px;
        }
    }
}

/* Pricing of order summary */
div.order-container div.pricing {
    padding: 20px 20px;
    background-color: #fff;
    border: 1px dashed var(--secondary-color-50);
    border-radius: 17px;
    & h2 {
        margin-bottom: 10px;
    }
    & p.cal {
        color: #212121;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 15px;
        padding: 5px 0;
    }
    & p.delivery-charges span:nth-child(2) {
        color: green;
    }
    & p.total {
        text-transform: uppercase;
        font-size: 15px;
        & span:nth-child(1) {
            font-weight: 500;
        }
        & span:nth-child(2) {
            font-size: 16px;
            font-weight: 600;
        }
    }
}
button.make-payment {
    margin-top: 16px;
    width: 100%;
    height: 38px;
    font-size: 15px;
    border: 0;
    border-radius: 50px;
    outline: none;
    font-weight: 600;
    background-color: var(--primary-color);
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    &.processing {
        opacity: 0.7;
        cursor: progress;
    }
    &:hover:not(.processing) {
        opacity: 0.8;
    }
}

/* Other cards */
div.other-cards {
    margin-top: 20px;
    background-color: #fff;
    /*box-shadow: rgba(14, 63, 126, 0.04) 0 0 0 1px, rgba(42, 51, 69, 0.04) 0 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0 6px 6px -3px, rgba(14, 63, 126, 0.04) 0 12px 12px -6px, rgba(14, 63, 126, 0.04) 0 24px 24px -12px;*/
    border-radius: 24px;
    border: 1px dashed var(--secondary-color-30);
    padding: 20px;
    & div.cards {
        margin-top: 16px;
    }
    & div.card {
        display: flex;
        align-items: center;
        padding: 0 10px;
        background: rgb(245 247 250);
        border-left: 2px solid var(--secondary-color-50);
        margin-top: 14px;
        min-height: 45px;
        font-size: 15px;
    }
}

div.other-cards div.card p.info {
    flex: 1;
    font-weight: 500;
    display: flex;
    gap: 10px;
}
div.other-cards div.card p.primary {
    font-size: 14px;
    font-weight: 500;
    background-color: var(--primary-color-10);
    padding: 5px;
    border-radius: 3px;
    color: var(--primary-color);
    &&::after {
        content: 'Primary';
    }
}
div.other-cards div.card div.buttons {
    display: flex;
    align-items: center;
    gap: 3px;
    & button {
        border: 0;
        outline: none;
        font-size: 15px;
        margin-left: 14px;
        height: 36px;
        background-color: transparent;
        cursor: pointer;
    }
    & svg {
        height: 18px;
        width: 18px;
        display: flex;
        overflow: visible;
        fill: var(--secondary-color);
    }
    & button.remove-card svg{
        height: 21px;
        width: 21px;
    }
    & button.remove-card:hover svg {
        fill: #FF0011;
    }
    & button.edit-card:hover svg {
        fill: var(--primary-color);
    }
}

div.incorrect-address div.child {
    & p.address {
        font-size: 15px;
    }
    & p.address span.incorrect {
        text-decoration: line-through;
        color: #ff0000;
    }
}

div.confirmation-address-ls div.child {
    & p.description {
        font-size: 16px;
        line-height: 1.4;
        margin: 14px 0;
    }
    & p.note {
        font-size: 15px;
        line-height: 1.4;
        color: #272727;
    }
}

div.saved-address-info {
    padding: 10px;
    background: #f5f7fa;
    margin-top: 18px;
    font-size: 14px;
    border-radius: 7px;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    & p {
        flex: 1;
    }
    & button {
        border: 0;
        outline: none;
        font-size: 15px;
        margin-left: 14px;
        height: 36px;
        background-color: transparent;
        cursor: pointer;
    }
    & button:hover svg {
        fill: #ff0000;
    }
    & svg {
        height: 21px;
        width: 21px;
        display: flex;
        overflow: visible;
        fill: var(--secondary-color);
    }
    &[data-visibility="hidden"] {
        display: none;
    }
}

@media only screen and (max-width: 1200px) {
        div.order-container {
            margin-left: 30px;
            margin-right: 30px;
            padding-bottom: 30px;
            & div.child {
                width: auto;
            }
            & div.tab.end {
                width: 43.83% !important;
            }
        }
        h1 {
            font-size: 32px;
            span {
                font-size: 37px;
            }
        }
        div.parent div.tab.start h2 {
            font-size: 18px;
        }

    }
@media only screen and (max-width: 1140px) {
    div.order-container div.parent-tab {
        gap: 20px !important;
    }
}
/*@media only screen and (max-width: 1040px) {*/
/*        div.feature {*/
/*            width: calc(100% - (16px + 28px));*/
/*            border-radius: 14px !important;*/
/*        }*/
/*        div.order-container div.child div.tab.end {*/
/*            width: 540px;*/
/*        }*/
/*        div.tutorial-videos div.videos a {*/
/*            width: calc(calc(100% - 16px));*/
/*        }*/
/*    }*/

@media only screen and (max-width: 970px) {
    div.order-container div.parent-tab {
        display: grid !important;
        & div.tab.end {
            width: auto !important;
        }
        & div.features {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 20px;
            padding: 20px;
        }
        & div.features div.feature {
            width: calc(50% - 10px);
            padding: 0;
        }
    }
}
@media only screen and (max-width: 786px) {
    div.order-container div.parent-tab {
        & div.features {
            display: grid;
            padding: 20px;
            gap: 20px;
        }
        & div.features div.feature {
            width: auto;
        }
    }
}

/*@media only screen and (max-width: calc(650px + 60px)) {*/
/*        div.pricing-container div.child {*/
/*            width: calc(100% - (60px + 50px));*/
/*        }*/
/*    }*/
/*@media only screen and (max-width: calc(600px + 60px)) {*/
/*        div.upi-intent div.child {*/
/*            width: calc(100% - (60px + 50px));*/
/*        }*/

/*    }*/
/*@media only screen and (max-width: 580px) {}*/

/*@media only screen and (max-width: 840px) {*/
/*        div.order-container div.child {*/
/*            display: grid;*/
/*        }*/
/*        div.order-container div.tab:nth-child(1) {*/
/*            order: 2;*/
/*        }*/
/*        div.order-container div.tab:nth-child(2) {*/
/*            order: 1;*/
/*            width: auto !important;*/
/*        }*/
/*        div.features {*/
/*            margin-top: 15px;*/
/*        }*/
/*        div.feature {*/
/*            width: calc(50% - (16px + 28px));*/
/*            border-radius: 14px !important;*/
/*        }*/
/*        div.tutorial-videos div.videos a {*/
/*            width: calc(calc(50% - 16px));*/
/*        }*/
/*    }*/