:root {
    /* BRAND COLORS */
    --dxp-brand-green: #009D94;
    --dxp-brand-green-dark: #0C736D;
    --dxp-brand-mint: #33E3B5;
    --dxp-brand-gray: #818285;
    --dxp-brand-gray-accessible: #545558;
    --dxp-brand-black: #000000;
    --dxp-brand-white: #FFFFFF;

    /* SECONDARY COLORS */
    --dxp-secondary-purple: #691A6B;
    --dxp-secondary-mauve: #9F7894;
    --dxp-secondary-cobalt: #0057CF;
    --dxp-secondary-sky: #7BD1EB;
    --dxp-secondary-yellow: #FFBD00;
    --dxp-secondary-orange: #EC6735;

    /* Tint COLORS */
    --dxp-tints-gray-1: #F6F6F7;
    --dxp-tints-gray-2: #EFEFF0;
    --dxp-tints-gray-3: #E1E1E1;
    --dxp-tints-green: #E5F5F4;
    --dxp-brand-tints-green: #009d942e;
    --dxp-brand-mint-light: #50FFD1;
    --dxp-form-layout-error: #DF3030;

    /* Font-Family */
    --dxp-meta-pro-font-family: 'MetaPro-Medium';
    --dxp-meta-bold-font-family: 'MetaPro-Bold';
    --dxp-meta-pro-light-font-family: 'MetaPro-Light';

    --dxp-max-width: 1432px;
}

/* Core Typography for body */
.body-l {
    font-weight: 350;
    font-size: 20px;
    line-height: 26px;
    font-family: var(--dxp-meta-pro-light-font-family);
}

.body-l-bold {
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    font-family: var(--dxp-meta-bold-font-family);
}

.body-l-italic {
    font-weight: 350;
    font-size: 20px;
    font-style: italic;
    line-height: 26px;
    font-family: var(--dxp-meta-pro-light-font-family);
}

.body-m {
    font-weight: 350;
    font-size: 16px;
    line-height: 24px;
    font-family: var(--dxp-meta-pro-light-font-family);
}

.body-m-book {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    font-family: var(--dxp-meta-pro-font-family);
}

.body-m-bold {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    font-family: var(--dxp-meta-bold-font-family);
}

.body-m-italic {
    font-weight: 350;
    font-size: 16px;
    font-style: italic;
    line-height: 24px;
    font-family: var(--dxp-meta-pro-light-font-family);
}

.body-s {
    font-weight: 350;
    font-size: 14px;
    line-height: 20px;
    font-family: var(--dxp-meta-pro-light-font-family);
}

.body-s-book {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    font-family: var(--dxp-meta-pro-font-family);
}

.body-s-bold {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    font-family: var(--dxp-meta-bold-font-family);
}

.body-s-italic {
    font-weight: 350;
    font-size: 14px;
    font-style: italic;
    line-height: 20px;
    font-family: var(--dxp-meta-pro-light-font-family);
}

.body-xs {
    font-weight: 350;
    font-size: 12px;
    line-height: 18px;
    font-family: var(--dxp-meta-pro-light-font-family);
}

.body-xs-bold {
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    font-family: var(--dxp-meta-bold-font-family);
}

.body-xs-italic {
    font-weight: 350;
    font-size: 12px;
    font-style: italic;
    line-height: 18px;
    font-family: var(--dxp-meta-pro-light-font-family);
}

/* Core Typography for Titles */
.title-xxl {
    font-weight: 350;
    font-size: 72px;
    line-height: 80px;
    font-family: var(--dxp-meta-pro-light-font-family);
}

.title-xl {
    font-weight: 350;
    font-size: 64px;
    line-height: 64px;
    font-family: var(--dxp-meta-pro-light-font-family);
}

.title-l {
    font-weight: 350;
    font-size: 48px;
    line-height: 56px;
    font-family: var(--dxp-meta-pro-light-font-family);
}

.title-l-italic {
    font-size: 48px;
    font-style: italic;
    font-weight: 350;
    line-height: 56px;
    font-family: var(--dxp-meta-pro-light-font-family);
}

.title-m {
    font-weight: 350;
    font-size: 32px;
    line-height: 40px;
    font-family: var(--dxp-meta-pro-light-font-family);
}

.title-m-bold {
    font-weight: 500;
    font-size: 32px;
    line-height: 40px;
    font-family: var(--dxp-meta-bold-font-family);
}

.title-m-italic {
    font-weight: 350;
    font-size: 32px;
    font-style: italic;
    line-height: 40px;
    font-family: var(--dxp-meta-pro-light-font-family);
}

.title-s {
    font-weight: 350;
    font-size: 24px;
    line-height: 32px;
    font-family: var(--dxp-meta-pro-light-font-family);
}

.title-s-bold {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    font-family: var(--dxp-meta-bold-font-family);
}

.title-s-italic {
    font-weight: 350;
    font-size: 24px;
    font-style: italic;
    line-height: 32px;
    font-family: var(--dxp-meta-pro-light-font-family);
}


/*------------------------------ Display Modal Starts for Desktop------------------------------------*/

/* The Modal (background) */
.modal-confirm {
    position: fixed;
    z-index: 99999;
    left: 0;
    display: flex;
    justify-content: center;
    /* padding: 200px 380px; */
    padding: 0px 32px;
    flex-direction: column;
    align-items: center;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, 0.80);
}

.modal-dialog {
    position: relative;
}

/* Modal Content */
.modal-content {
    margin: auto;
    width: 672px;
    height: 439px;
    border-radius: 24px;
    padding: 60px 116px 60px 118px;
    background-color: var(--dxp-brand-white);
    position: relative;
    z-index: 9999999;
}

.modal-header {
    padding-bottom: 30px;
}

.modal-main-heading {
    color: var(--dxp-brand-black);
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: 'clig' off, 'liga' off;
    /* font-weight: 350;
    font-size: 32px;
    line-height: 40px;
    font-family: var(--dxp-meta-pro-light-font-family); */
}


.modal-body {
    padding-bottom: 60px;
}

.modal-content-para {
    color: var(--dxp-brand-black);
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: 'clig' off, 'liga' off;
    /* font-weight: 350;
    font-size: 16px;
    line-height: 24px;
    font-family: var(--dxp-meta-pro-light-font-family); */
}

.modal-footer {
    display: flex;
    gap: 30px;
    align-items: center;
}

.modal-button-continue {
    display: flex;
    height: 36px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 36px;
    color: var(--dxp-brand-black) !important;
    background-color: var(--dxp-brand-mint) !important;
    text-decoration: none !important;
}

.modal-button-continue-text {
    color: var(--dxp-brand-black) !important;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: var(--dxp-meta-pro-light-font-family);
    font-size: 14px;
    font-style: normal;
    font-weight: 350;
    line-height: 16px;
    letter-spacing: 1.12px;
    text-transform: uppercase;
}

.modal-button-cancel {
    display: flex;
    width: fit-content;
    text-align: center;
    text-decoration: underline !important;
    text-decoration-color: var(--dxp-brand-mint) !important;
    text-underline-position: under !important;
    text-decoration-thickness: 1px;
    gap: 8px;
}

.modal-button-cancel-text {
    color: var(--dxp-brand-black) !important;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: var(--dxp-meta-bold-font-family);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

/* The Close Button */
.req-popup-close {
    /* position: relative;
    left: 94%;
    top: 42px; */
}

.popup-close-icon-btn {
    background-image: var(--dxp-icon-close_light);
    color: var(--dxp-brand-white);
    background-color: var(--dxp-brand-white);
    border: 0;
    width: 24px;
    height: 24px;
    /* margin-right: 16.2px;
    margin-top: 15.8px */
    position: absolute;
    right: 16px;
    top: 16px;
    background-repeat: no-repeat !important;
}

/*------------------------------ Display Modal Ends for Desktop------------------------------------*/


/* For Tablet */
@media only screen and (max-width: 1024px) {
    .title-xxl {
        font-weight: 350;
        font-size: 64px;
        line-height: 70px;
        font-family: var(--dxp-meta-pro-light-font-family);
    }

    .title-xl {
        font-weight: 350;
        font-size: 48px;
        line-height: 52px;
        font-family: var(--dxp-meta-pro-light-font-family);
    }

    .title-l {
        font-weight: 350;
        font-size: 44px;
        line-height: 50px;
        font-family: var(--dxp-meta-pro-light-font-family);
    }

    .title-l-italic {
        font-size: 44px;
        font-style: italic;
        font-weight: 350;
        line-height: 50px;
        font-family: var(--dxp-meta-pro-light-font-family);
    }

    .title-m {
        font-weight: 350;
        font-size: 32px;
        line-height: 40px;
        font-family: var(--dxp-meta-pro-light-font-family);
    }

    .title-m-bold {
        font-weight: 500;
        font-size: 32px;
        line-height: 40px;
        font-family: var(--dxp-meta-bold-font-family);
    }

    .title-m-italic {
        font-weight: 350;
        font-size: 32px;
        font-style: italic;
        line-height: 40px;
        font-family: var(--dxp-meta-pro-light-font-family);
    }

    .title-s {
        font-weight: 350;
        font-size: 22px;
        line-height: 30px;
        font-family: var(--dxp-meta-pro-light-font-family);
    }

    .title-s-bold {
        font-weight: 500;
        font-size: 22px;
        line-height: 30px;
        font-family: var(--dxp-meta-bold-font-family);
    }

    .title-s-italic {
        font-weight: 350;
        font-size: 22px;
        font-style: italic;
        line-height: 30px;
        font-family: var(--dxp-meta-pro-light-font-family);
    }

    /*------------------------------ Display Modal Starts for Tablet------------------------------------*/
    /* .modal-confirm {
        padding: 200px 248px;
    } */

    .modal-content {
        width: 616px;
        height: 439px;
        padding: 60px 80px;
    }

    /*------------------------------ Display Modal Ends for Tablet------------------------------------*/
}

/* For Mobile */
@media only screen and (max-width: 767px) {
    .title-xxl {
        font-weight: 350;
        font-size: 48px;
        line-height: 56px;
        font-family: var(--dxp-meta-pro-light-font-family);
    }

    .title-xl {
        font-weight: 350;
        font-size: 40px;
        line-height: 48px;
        font-family: var(--dxp-meta-pro-light-font-family);
    }

    .title-l {
        font-weight: 350;
        font-size: 32px;
        line-height: 40px;
        font-family: var(--dxp-meta-pro-light-font-family);
    }

    .title-l-italic {
        font-size: 32px;
        font-style: italic;
        font-weight: 350;
        line-height: 40px;
        font-family: var(--dxp-meta-pro-light-font-family);
    }

    .title-m {
        font-weight: 350;
        font-size: 24px;
        line-height: 32px;
        font-family: var(--dxp-meta-pro-light-font-family);
    }

    .title-m-bold {
        font-weight: 500;
        font-size: 24px;
        line-height: 32px;
        font-family: var(--dxp-meta-bold-font-family);
    }

    .title-m-italic {
        font-weight: 350;
        font-size: 24px;
        font-style: italic;
        line-height: 32px;
        font-family: var(--dxp-meta-pro-light-font-family);
    }

    .title-s {
        font-weight: 350;
        font-size: 20px;
        line-height: 26px;
        font-family: var(--dxp-meta-pro-light-font-family);
    }

    .title-s-bold {
        font-weight: 500;
        font-size: 20px;
        line-height: 26px;
        font-family: var(--dxp-meta-bold-font-family);
    }

    .title-s-italic {
        font-weight: 350;
        font-size: 20px;
        font-style: italic;
        line-height: 26px;
        font-family: var(--dxp-meta-pro-light-font-family);
    }

    /*------------------------------ Display Modal Starts for Mobile------------------------------------*/
    .modal-confirm {
        padding: 60px 24px;
        justify-content: normal;
        /* overflow: hidden; */
    }

    .modal-dialog {
        /* margin-top: -45px; */
    }

    .modal-body {
        padding-bottom: 40px;
    }

    .modal-content {
        width: 324px;
        height: 420px;
        padding: 60px 24px;
        position: relative;
        z-index: 99999999;
    }

    .modal-button-continue-text {
        font-size: 12px;
        font-weight: 350;
        line-height: 16px;
        letter-spacing: 0.96px;
    }

    .req-popup-close {
        position: relative;
        left: 88%;
        top: 42px;
    }

    .modal-button-cancel-text {
        font-size: 14px;
    }

    /*------------------------------ Display Modal Ends for Mobile------------------------------------*/

}