:root {
    --x-primary-color: #f57531;

    /*Body*/
    --x-body-bg-color: #f7f9fa;


    /*Checkout Heading*/
    --x-heading-color: #f57531;

    /*MobileCard*/
    --x-mobile-card-bg-color: #fff;
    --x-mobile-card-border: 1px solid #ecf0f1;


    /*TABS*/
    --x-tab-active-header-bg-color: #f57531;
    --x-tab-active-header-border-color: #f57531;


    --x-tab-active-header-text-color: #fff;
    --x-tab-active-description-text-color: #fff;
    --x-tab-header-font-size: 17px;
    --x-tab-description-font-size: 12px;


    /*Mobile and Desktop New User*/
    --x-tab-active-element-border: solid 0.5px #ca745a;
    --x-tab-active-background-image: linear-gradient(to bottom, #ff9b30, #f57531);
    --x-tab-active-text-color: #ffff;
    --x-tab-active-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.5);

    --x-tab-in-active-element-border: solid 0.5px #ecf0f1;
    --x-tab-in-active-background-color: #ffffff;
    --x-tab-in-active-box-shadow: 0 0px 0px 2px #eff1f1;
    --x-tab-in-active-text-color: #000;


    /*Input*/
    --x-input-border: #ccc;
    --x-input-text-color: #4a4a4a;
    --x-input-modal-highlight-blue: #66afe9;
    --x-input-modal-highlight-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
    --x-input-area-color: #555;
    --x-input-tick-color: #ffff;

    /*Button*/
    --x-primary-button-bg-color: #f57531;
    --x-primary-button-color: #ffffff;
    --x-primary-button-border: solid 1px #d6d6d6;
    --x-primary-button-border-radius: 20px;
    --x-primary-button-font-size: 12px;


    --x-secondary-button-bg-color: #ffffff;
    --x-secondary-button-color: #9b9b9b;
    --x-secondary-button-border: solid 1px #d6d6d6;
    --x-secondary-button-border-radius: 100px;


    /*Custom Buttons*/
    --x-custom-outlined-button-color: #f57531;




    --x-white-color: #ffff;
    --x-white-box-border: #ecf0f1;


    --x-success-heading-color: #25ae88;
    --x-success-text-color: #0bc553;

    --x-failure-color: rgb(189, 54, 54);

    /* Loader */

    --x-active-loader-colour: #3571E1;

    /* Notifications */

    --x-notification-border-colour: #6c91d5;
    --x-notification-background-colour: #d5e2fc;
    --x-notifcation-text-colour: #3571E1;

    /* Gift Card Gradient */
    --x-giftcard-firstcolor: #222222;
    --x-giftcard-secondcolor: #434343;
    --x-giftcard-thirdcolor: #252525;
    --x-giftcard-textcolor: white;
    --x-giftcard-secondary-textcolor: #d4d4d4; 

    /* Toasts */
    --x-succes-toastBackground: #308800;
    --x-succes-toastColor: #FFF;
    --x-succes-toastBarBackground: #287200;

    --x-warning-toastBackground: #FFC500;
    --x-warning-toastColor: #333;
    --x-warning-toastBarBackground: #c49600;

    --x-error-toastBackground: #D81A1A;
    --x-error-toastColor: #FFF;
    --x-error-toastBarBackground: #9a1616;
}

.no-scroll {
    width: 100%;
    position: fixed;
    overflow-y: scroll;
}

a {
    text-decoration: none;
}

.override-width {
    max-width: 600px !important;
}

.form-input {
    -webkit-appearance: none;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    box-sizing: border-box;
    margin: 0;
    font: inherit;
    font-family: inherit;
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    background-color: var(--x-white-color);
    background-image: none;
    border: 1px solid var(--x-input-border);
    border-radius: 4px;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    font-size: 14px !important;
    appearance: none;
    color: var(--x-input-text-color) !important;
    line-height: 1.33;
    outline: none;
    -webkit-box-shadow: none !important;
}


.form-input-modal {
    -webkit-appearance: none;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    box-sizing: border-box;
    margin: 0;
    font: inherit;
    font-family: inherit;
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    background-color: var(--x-white-color);
    background-image: none;
    border: 1px solid var(--x-input-border);
    border-radius: 4px;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    font-size: 14px !important;
    appearance: none;
    color: var(--x-input-text-color) !important;
    line-height: 1.33;
    outline: none;
    -webkit-box-shadow: none !important;
}

.form-input-modal:focus {
    border-color: var(--x-input-modal-highlight-blue);
    outline: 0;
    -webkit-box-shadow: var(--x-input-modal-highlight-shadow);
    box-shadow: var(--x-input-modal-highlight-shadow) !important;
}

.payment-heading-offer {
    font-size: 12px;
    box-sizing: border-box;
    display: block;
    color: var(--x-success-heading-color);
}

.error-alert {
    padding: 3px 40px 3px 10px;
    background-color: var(--x-failure-color);
    color: var(--x-white-color);
    border-radius: 5px;
}

.form-button {
    box-sizing: border-box;
    margin: 0;
    font: inherit;
    overflow: visible;
    /*-webkit-appearance: button;*/
    font-family: inherit;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    display: block;
    width: 100%;
    padding: 8px 0px;
    border: var(--x-primary-button-border);
    border-radius: var(--x-primary-button-border-radius);
    background-color: var(--x-primary-button-bg-color);
    outline: none !important;
    color: var(--x-primary-button-color);
    text-transform: uppercase;
    font-size: var(--x-primary-button-font-size);
    box-shadow: none;
}

.form-button-secondary {
    box-sizing: border-box;
    text-decoration: none;
    display: inline-block;
    padding: 6px 12px;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    border-radius: var(--x-secondary-button-border-radius);
    height: 37px;
    width: 110px;
    background: var(--x-secondary-button-bg-color);
    color: var(--x-secondary-button-color);
    line-height: 2;
    text-transform: uppercase;
    font-size: var(--x-primary-button-font-size);
    border: var(--x-secondary-button-border) !important;
}

.form-input-area {
    box-sizing: border-box;
    margin: 0;
    font: inherit;
    overflow: auto;
    font-family: inherit;
    resize: none;
    overflow-x: hidden;
    height: 62px !important;
    display: block;
    width: 100%;
    padding: 6px 12px;
    color: var(--x-input-area-color);
    background-color: var(--x-white-color);
    background-image: none;
    border-radius: 4px;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    border: 1px solid var(--x-input-border);
    font-size: 14px;
    -webkit-box-shadow: none;
    outline: none;
    appearance: none;
    text-transform: capitalize;
}

.load-button {
    box-sizing: border-box;
    font: inherit;
    overflow: visible;
    text-transform: none;
    font-family: inherit;
    font-size: 14px;
    height: 34px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    user-select: none;
    background-image: none;
    border: var(--x-secondary-button-border) !important;
    position: relative;
    z-index: 2;
    margin: 0 0 0 -1px;
    border-radius: 0px 4px 4px 0px;
    width: 63px;
    background: var(--x-tab-active-header-bg-color);
    color: var(--x-tab-active-header-text-color);
}

.load-button:active {
    background: var(--x-tab-active-header-bg-color);
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .white-box {
        background: var(--x-white-color);
        border: solid 1px var(--x-white-box-border);
        border-radius: 4px;
        margin: 0px 7px;
        padding: 23px 15px 0px 17px;
    }
}

body {
    background-color: var(--x-body-bg-color) !important;
    font-family: "Noto Sans", sans-serif !important;
    line-height: 1.42857143;
    -webkit-appearance: none !important;
}


/*//Placeholder small case*/
::-webkit-input-placeholder {
    /* WebKit browsers */
    text-transform: none;
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    text-transform: none;
}

:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    text-transform: none;
}

::placeholder {
    /* Recent browsers */
    text-transform: none;
}



/*Address*/
.mobile-card {
    border-radius: 4px 4px 0 0;
    background: var(--x-mobile-card-bg-color);
    border: var(--x-mobile-card-border);
}

.btn-custom {
    box-sizing: border-box;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 0;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    font-size: 12px;
    width: 100%;
    margin-top: 10px;
    padding: 8px 0px;
    background-color: transparent;
    border: 1px solid var(--x-custom-outlined-button-color);
    border-radius: 100px;
    color: var(--x-custom-outlined-button-color);
    outline: none !important;
    box-shadow: none;
}

.qr-btn-custom {
    box-sizing: border-box;
    text-decoration: none;
    /* display: inline-block; */
    margin-bottom: 0;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    font-size: 12px;
    width: auto;
    margin-top: 10px;
    padding: 8px 12px;
    background-color: transparent;
    border-radius: var(--x-secondary-button-border-radius);
    background: var(--x-tab-active-header-bg-color);
    color: var(--x-tab-active-header-text-color);
    outline: none !important;
    box-shadow: none;
}

.iti {
    width: 100%;
}

div.iti.iti--allow-dropdown.iti--separate-dial-code {
    width: 100%;
}

.congrats-text-tab-color {
    color: var(--x-tab-active-header-bg-color);
}