[class^="step-"] {
    display: none;
}

.main {
    overflow-x: hidden;
}

.show-form {
    display: block !important;
}

.dd-input {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s
}

.btn_qty.less-disabled, .btn_qty.plus-disabled {
    cursor: auto!important;
}

.less-disabled .fa-minus {
    color: gray;
}

.plus-disabled i.fas.fa-plus.fa-fw {
    color: gray;
}

.lbl_qty.disabled input {
    color: gray!important;
}

.btns a {
    padding: .375rem .75rem;
}

.alarttex {
    font-size: 15px;
    color: red;
    font-weight: 500;
    padding-top: 6px;
    display: inline-block;
}

.sign-up-form-section .container {
    max-width: 1240px !important;
    width: 100% !important;
}

.sign-up-form-section .stp-btns {
    position: relative;
    margin-top: 73px;
    margin-bottom: 41px;
}

.item-s {
    align-items: start;
}

.item-c {
    align-items: center;
}

.mx-auto {
    margin: 0 auto;
}

.j-s {
    justify-content: space-between;
}

.j-c {
    justify-content: center;
}

.text-c {
    text-align: center;
}

.kk-hd {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 0;
    line-height: 1.5;
}

.sign-up-form-section .stp-btns .box-ww {
    margin-bottom: 5px;
}

.box-yy {
    background-color: transparent;
    border: 0;
    background-color: #fff;
}

.box-yy .box-ww {
    height: 50px;
    width: 50px;
    border: 2px solid black;
    border-radius: 100%;
    color: black;
    border-color: #000;
}

    .box-yy:disabled .box-ww {
        border-color: #AAAAAA;
        background: #fff !important;
    }

    .box-yy.active-zz .box-ww {
        color: #1473b8;
        border-color: #1775b9;
        background: rgb(208 227 241) !important;
    }

    .box-yy.active-zz .box-ww .ttt-hd {
        color: #1473b8;
    }

        .box-yy .box-ww .ttt-hd {
    margin-bottom: 0;
}

.ttt-hd {
    font-style: normal;
    font-weight: 700;
    font-size: 1.8rem;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.copy-from-payer-container {
    padding-bottom: 20px;
}

.box-yy.active-zz .box-ww span {
    color: #0369b3;
}

.box-yy:disabled .box-ww span {
    color: #AAAAAA;
}

.box-yy .kk-hd {
    color: black;
}

.box-yy.active-zz .kk-hd {
    color: #0369b3;
}

.box-yy:disabled .kk-hd {
    color: #AAAAAA;
}

.b-dashed-io {
    /* border-bottom: 2px dashed #AAAAAA; */
    position: absolute;
    top: 25%;
    width: calc(100% + -109px);
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

    .b-dashed-io::before {
        content: "";
        width: 50%;
        border-bottom: 1px dashed #AAAAAA;
        right: 0;
        top: 0;
        position: absolute;
        display: inline-block;
    }

    .b-dashed-io::after {
        content: "";
        width: 50%;
        border-bottom: 1px dashed #AAAAAA;
        left: 0;
        top: 0;
        position: absolute;
        display: inline-block;
    }

.btns-container-1 {
    display: flex;
    flex-flow: column;
    border: 1px solid #91bdde;
    border-radius: 10px;
    padding: 50px;
}

    .btns-container-1 .btns {
        display: flex;
        gap: 30px;
        max-width: 500px;
    }

    .btns-container-1 p {
        font-size: 20px;
        font-weight: 600;
    }

    .btns-container-1 a.btn {
        background: #1775b9;
        font-size: 16px;
        flex: 1;
        color: #fff !important;
        font-weight: 500;
    }


.keyboard {
    overflow: hidden;
    min-height: 40px;
    flex:1;
}

    .keyboard .btn_qty {
        overflow: hidden;
        /* float: left; */
        width: 30px;
        height: 30px;
        line-height: 30px;
        transition: all .3s;
        background-color: #fff;
        color: #000;
        text-align: center;
        border-radius: 100%;
        cursor: pointer;
        color: #0369b3;
    }

    .keyboard .lbl_qty {
        /* width: 40px; */
        /* float: left; */
        overflow: hidden;
    }

        .keyboard .lbl_qty input {
            background: transparent !important;
            border: none !important;
            height: 30px !important;
            width: 40px;
            color: #0369b3;
            font-weight: 600;
            text-align: right;
            font-size: 16px;
        }

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.btn {
    font-size: 1.6rem;
}

.wr-btn-n {
    width: 30%;
}

.btn-link {
    font-weight: 400;
    color: #007bff;
    text-decoration: none;
}


.guest-btn, .login-btn, .continue-button, .btn-next, .btn-submit, .participant-btn, .btn-cancel, .save-ind {
    background-color: #1b8ecd !important;
    display: inline-block;
    padding: 5px 35px;
    font-weight: 500;
    border-radius: 0;
    border: none !important;
    outline: none !important;
    color: #fff !important;
    font-size: 16px;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all .2s;
}

    .guest-btn:hover, .login-btn:hover, .continue-button:hover, .btn-next:hover, .btn-submit:hover, .participant-btn:hover, .btn-cancel:hover, .save-ind:hover {
        background-color: #1b8ecd !important;      
    }

button.btn.btn-uu.wr-btn-n.mt-24.next.btn-primary {
    background: #0067b2 !important;
    font-size: large;
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d !important;
    border-color: #6c757d;
}

.selectedMemValues {
    display: flex;
    align-items: center;
    min-height: 45px;
}

.selected-options-container {
    display: flex;
    flex-flow: column;
    align-items: center;
}

.rate-box {
    background-color: #e9ecef75;
    padding: 3px;
    border-radius: 4px;
}

.prod {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.title-flex {
    display: flex;
    flex-flow: column;
    flex: 1;
    color: #0369b3;
    min-width: 200px;
    max-width: 200px;
}

.keyboard-container {
    flex: 1;
    min-width: 200px;
    max-width: 200px;
}

.price {
    justify-content: flex-start;
    color: #0369b3;
    font-weight: 600;
    min-width: 50px;
    max-width: 150px;
}

.fa, .fas {
    color: #1775b9;
}

.membership-table {
    padding: 0 50px 20px 50px;
    border: 1px solid #3486c1;
    border-radius: 10px;
    background: #d0e3f1;
    
}

.row-separator {
    margin-top: 20px!important;
    border: 1px solid #5499cb;
}

.step-1.show-form.stp-form.added {
    display: flex !important;
    flex-flow: row;
    align-items: flex-start;
    gap:20px;
}

.productlist.cart {
    border: 1px solid #0369b3;
    border-radius: 6px;

}

.cart-container {
    display: flex;
    flex-flow: column;
    gap: 20px;
}

.form-control {
    border: 1px solid #d0e3f1;
}

    .cart-header {
    border-bottom: 1px solid #0369b3;
    background: #0369b3;
    padding: 5px;
    color: white;
    font-weight: 600;
}

.empty-cart {
    color: #0369b3;
}

.headers {
    display: flex;
    gap: 20px;
    padding: 10px 10px 0 10px;
    font-weight: 600;
}

.selectedValues {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
}

.prodTitle {
    width: 250px;
}

.added-items {
    display: flex;
    flex-flow: column;
    align-items: normal;
    padding: 10px;
}

.item-info {
    padding-bottom: 5px;
    padding-top: 5px;
}


    .item-info:nth-child(even) {
        background: #b0d0e78c;     
    }

.step-2.stp-form.show-form {
    padding: 30px;
}

.work-rd-btn.text-c {
    display: flex;
    justify-content: space-evenly;
}

a.btn.btn-link.wr-btn-n.next.btn-back {
    color: #0067b2 !important;
    font-size: large;
}

.total {
    display: flex;
    justify-content: flex-end;
    font-weight: 600;
    color: #0369b3;
    padding-right: 20px;
}

.btns-container {
    display:flex;
    justify-content:center;
    gap:30px;
    padding:30px;
}

.btns-container-2 {
    display: flex;
    justify-content: space-between;
    padding: 30px;
}


.confirmation-container {
    display: flex;
    margin-bottom: 1rem;
}

.conf-form-details.col-12.col-lg-6 {
    /*border: 1px solid #0369b3;
    border-radius: 6px;*/
}

.conf-form-details .form-section h4 {
    background: #0369b3;
    color: #fff;
    padding: 5px;
}

.form-contain {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.conf-form-details .form-group {
    padding-left: 15px;
    margin-bottom: 5px;
}

.conf-form-details .form-group label{
    margin-bottom: 0;
    font-weight: 600;
}

    .conf-form-details .form-group p {
        margin-bottom: 18px;
        border: 1px solid #eaeaea;
        border-radius: 4px;
        background: #eaeaea;
        width: 400px;
        padding: 5px;
        color: gray;
        font-size: 17px;
    }

.conf-form-details .t-n-c {
    padding-left: 0;
}

    .acknowledge-tnc label {
        padding-left: 25px;
    }

.acknowledge-tnc .custom-control-label::before {
    left: 15px;
}

a.continue-back {
    font-weight: 600;
    text-decoration: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    color: #1775b9 !important;
}

.promo-container {
    display: flex;
}

.form-control-section {
    display: flex;
}

    .form-control-section .custom-control-label {
        text-align: justify;
    }

    .form-control-section .form-group {
        display: flex;
        flex-flow: column;
    }

.selected-options-container .item-info:nth-child(even) {
    background: #ffffff;
}

.selected-options-container {
    display: flex;
    flex-flow: column;
    align-items: center;
    border: 1px solid #1b8ecd;
    border-radius: 6px;
    padding: 20px;
    width: fit-content;
}

.stp-form-participants {
    display: flex;
    flex-flow: column;
    align-items: center;
}

.guest-form label {
    text-align:left;
}


.d-flex.input-container {
    flex-flow: column;
    align-items: baseline;
}

.confirmation-container .accordion {
    margin-top: 0;
}

.promo-details {
    border: 1px solid #0369b3;
    border-radius: 6px;
    padding: 10px;
}

    .promo-details .conf-form-details .form-section h4 {
        background: #0369b3;
        color: #fff;
        padding: 5px;
    }

.confirmation-container .accordion  {
    border: 1px solid #0369b3 !important;
    border-radius: 2px;
}

.confirmation-container .accordion .card.mb-0 {
    border: none !important;
    padding: 10px;
}

.card.mb-0:nth-child(even) {
    border-top: 1px solid #0369b3;
}

.confirmation-container .accordion .card.mb-0 .card-header::before {
    content: "\f107";
    position: absolute;
    top: 50%;
    right: 0.8rem;
    transform: translateY(-50%);
    display: block;
    font-family: "FontAwesome";
    font-size: 1.1rem;
}

.confirmation-container .accordion .card.mb-0 .card-header[aria-expanded="true"]::before {
    content: "\f106";
    top: 25px;
}

.cart-conf-details.col-12.col-lg-6 {
    display: flex;
    flex-flow: column;
    gap: 30px;
}

.confirmation-container .accordion .card-header {
    background: #d0e3f1;
    padding: 3px;
    border-radius: 3px !important;
}

.confirmation-container .accordion .card-header.collapsed {
    background: #d0e3f1;
    padding: 3px;
    border-radius: 3px !important;
}

.work-rd-btn.my-4 {
    display: flex;
    align-items: center;
    gap: 50px;
    justify-content: flex-end;
}

.checkout-form .mb-35.form-group {
    margin-bottom: 10px;
}

.custom-control-label {
    text-align: justify;
}

.box-sign p.ool-para.py-50-s {
    text-align: justify;
}

span.prodTitleQty {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

.checkout-container {
    display: flex;
    gap: 30px;
    flex-flow: column;
}

i.fas.fa-solid.fa-check {
    padding-left: 5px;
    color: #11cd11;
}

.next-to-3:disabled {
    background: #aaaaaa !important;
}

.participant-btn {
    padding: 5px 7px;
    display: flex;
    gap: 5px;
    justify-content: flex-start;
    align-items: center;
}

i.fas.fa-solid.fa-user {
    padding-left: 2px;
}

.alert-message {
    text-align: center;
}

.step-3 .headers, .step-4 .headers {
    justify-content: space-between;
}

.col-lg-6.col-12.checkout-form-container {
    border: 1px solid #0369b3;
    border-radius: 6px;
    padding: 20px 10px;
}

.checkout-form h4 {
    background: #0369b3;
    color: #fff;
    font-weight: 500;
    padding: 5px;
    border-radius: 3px;
    margin-bottom: 20px;
}

.cont {
    display: flex !important;
    align-items: center;
    padding-left: 10px;
    padding-right: 0;
    width: 250px;
}

.acknowledge-PP.custom-control.custom-checkbox.custom-control-inline {
    flex-flow: column;
}

#PP-label {
order:1;
}

#privacyPolicy-error {
    order: 2;
}

.invoice-check .col-lg-6.col-12 {
    padding-left: 0;
}

.invoice-lbl-chk {
font-weight:600;
}

.input-container.invoice-check {
    flex-flow: row;
    align-items: center;
    justify-content: center;
}

.btn-primary.apply-invno-btn, .btn-primary.apply-invno-btn:focus, .btn-primary.apply-invno-btn:active {
    background-color: #e9ecef !important;
    padding: 5px 15px;
    border-radius: 6px;
    border: 1px solid #d2e4f1 !important;
    color: #575e65 !important;
    cursor: pointer;
    box-shadow: none;
}

.input-container.invoice-check {
    flex-flow: column;
    align-items: normal;
    justify-content: center;
}

.inv-promo {
    display: flex;
    gap: 5px;
    align-items: center;
}

.uploader {
    min-height: 100px;
    max-height: 390px;
    min-width: 250px;
    overflow-y: hidden;
    width: inherit;
    border-radius: 6px;
    background-color: #fdfdfd;
    border: 1px dashed #ccc;
    padding: 20px;
}

.select-files-btn, .select-files-btn:active {
    width: 100%;
    font-size: 17px;
    background-color: #1269cff2 !important;
}


a.uploaded-photo {
    display: flex;
    justify-content: space-between;
    border: 1px solid #006fb954;
    border-radius: 2px;
    padding: 5px;
}

.uploaded-img-cont {
    background-image: url('/assets/images/wwpm card back.png') !important;
    width: 400px;
    height: 500px;
    background-repeat: no-repeat, repeat;
    background-size: contain;
    background-position: center center;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}



.tab-content .form-page {
    display: flex;
    justify-content: space-between;
}

    .tab-content .form-page .form-section {
        flex: 2;
    }

.card-face {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
}

label.error {
    color: #ed1414;
    font-size: 14px;
    font-weight: 500;
    padding-top: 10px;
    scroll-margin-top: 150px;
}

.img-wrap {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: flex-start;
    position:relative;
}

    .img-wrap .close {
        position: absolute;
        z-index: 100;
        left: 120px;
    }

.uploaded-photo {
    padding-bottom: 200px;
}

.fields-cont {
    display:flex;
    flex-flow:column;
    justify-content:center;
    align-items:center;
}

.btn-pay {
    font-size: large;
    background-color: #0369b3 !important;
}

/* hide the remove column on step 4 */
.step-4 .remove-clmn,
.step-4 div.remove {
    display: none;
}

.details-summary-accordion-container {
    display:flex;
    flex-flow:column;
    align-items:baseline;
    gap:30px;
}

form#tncForm .custom-control-label {
    font-weight: 400 !important;
}

section.update-profile-form-section {
    display: flex;
    justify-content: center;
}

.d-flex.item-c.input-ff.pass {
    flex-flow: row;
    border: 1px solid #b4d2e8;
    border-radius: 5px;
    background: white;
    padding-right: 5px;
}

.pass input {
    border: none;
}

.fa-eye, .fa-eye-slash {
    color: #5398cbd1;
}

.pass .form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: none;
    outline: 0;
    box-shadow: none;
    cursor:default;
}

@media (min-width: 992px) {
    .modal-lg {
        max-width: 1200px;
    }

    .form-group-container.mb-4 {
        display: flex;
    }
}

@media (max-width:991px) {
    .form-group-container.mb-4 {
        display: flex;
        flex-flow: column;
        gap: 20px;
        align-items: baseline;
    }

    section.update-form-container.p-5 {
        padding: 0 !important;
        padding-bottom: 20px !important;
    }

    .form-page {
        padding: 15px!important;
    }
}

@media (max-width:973px) {
        .step-1.show-form.stp-form.added {
            display: flex !important;
            flex-flow: column;
            align-items: flex-start;
            gap: 20px;
        }

        .cart-container {
            order: 1;
            padding-left: 0;
            padding-right: 0;
        }

        .membership-table {
            order: 2;
        }

        .work-rd-btn {
            order: 0;
        }

        .productlist.cart {
            order: 1;
        }

        .keyboard .lbl_qty input {
            text-align: center;
        }

        .membership-table {
            padding: 0 5px 5px 5px;
            border: 1px solid #3486c1;
            border-radius: 10px;
            background: #d0e3f1;
        }

        .confirmation-container {
            display: flex;
            flex-flow: column;
            align-items: flex-start;
            gap: 20px;
        }

        .conf-form-details {
            order: 2;
        }

        .cart-conf-details {
            order: 1;
            padding-right: 0;
            padding-left: 0;
        }

        .form-control-section {
            flex-flow: column;
        }

        .sign-up-form-section .container {
            padding-left: 0;
            padding-right: 0;
        }

        .work-rd-btn.my-4 {
            justify-content: center;
        }

        .prodTitle {
            padding-left: 0;
            padding-right: 0;
        }

        .participant-btn {
            white-space: normal !important;
        }

        .conf-form-details.col-12.col-lg-6 {
            padding-left: 0;
            padding-right: 0;
        }

        .checkout-container {
            flex-flow: column;
        }

        .participant-btn {
            width: 200px;
        }

        .tab-content .form-page {
            flex-flow: column;
        }

    .userIcon .dropdown-menu {
        right: 0;
    }
    }

@media (max-width:600px) {
        .conf-form-details .form-group {
            padding-left: 0;
        }

        .panel-checkout {
            display: flex;
            flex-flow: column;
        }

            .conf-form-details .form-group p {
                min-width: 330px;
            }

        .title-flex {
            min-width: 120px;
            max-width: 120px;
        }

        .keyboard-container {
            min-width: 100px;
            max-width: 100px;
        }
        .price {
            min-width: 80px;
            max-width: 80px;
        }

        .prodTitle {
            min-width: 150px;
        }

        span.prodTitleQty {
            min-width: 50px;
            max-width: 50px;
        }

        .participant-btn {
            min-width: 140px;
            max-width: 140px;
        }

        i.fas.fa-solid.fa-check {
            min-width: 35px;
            max-width: 35px;
        }

        .cont {
            min-width: 180px;
            max-width: 180px;
        }

        .uppy-size--md {
            min-height: auto;
        }

        .uppy-Dashboard-inner {
            max-height: 550px !important; /* no !important */
            /*min-height: 450px is required for everything to fit on mobile*/
            min-height: 550px !important;
            max-width: 400px !important;
            outline: none;
            border: 1px solid rgba($color-gray, 0.2);
            border-radius: 5px;
        }

        .uppy-Dashboard-inner {
            max-height: 550px !important;
            max-height: 550px !important;
            max-width: 400px !important;
            min-width: 300px !important;
        }

        .uppy-Dashboard-innerWrap {
            height: 550px !important;
            max-width: 400px !important;
            min-width: 400px !important;
        }

        .uppy-Dashboard-AddFiles-list {
            max-width: 350px !important;
        }

        .uppy-Dashboard-AddFiles-title {
            max-width: 350px !important;
        }

        .headers {
            gap: 10px;
        }

        i.fas.fa-solid.fa-check {
            min-width: 40px;
            max-width: 40px;
        }

    button.btn.btn-uu.wr-btn-n.mt-24.next.btn-primary.save-ind {
        width:100%;
    }

}

.step-1 .prodTitle, .step-4 .prodTitle {
    flex: 1;
}

.step-1 .prodPrice,
.step-1 .remove-clmn {
    flex: 0 0 50px;
}

.step-4 hr {
    border-top: 1px solid #5499cb;
    width: 100%;
}