@import url('https://fonts.googleapis.com/css?family=Open+Sans:300italic,500,400,300,800');
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800');
a {
    text-decoration: none !important;
    color: #000;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button {
    font-family: 'Roboto Condensed', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    color: #000;
}

button,
input:focus {
    box-shadow: none !important;
}

.cursor-pointer {
    cursor: pointer;
}


/* ScrollBar Design */


/* width */

 ::-webkit-scrollbar {
    width: 6px;
}


/* Track */

 ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
    background: rgb(255, 83, 83);
    border-radius: 10px;
}


/* Handle on hover */

 ::-webkit-scrollbar-thumb:hover {
    background: #a31717;
}


/* End Of ScrollBar Design */


/* Setup Header */

.header-title-back {
    font-size: 21px !important;
}

.header-title-setup {
    background-color: transparent;
    /* background: -webkit-linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593); */
    /* background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593); */
    padding: 6px 0;
}

.header-title-setup span {
    font-size: 16px;
    padding-left: 10px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 600;
}


/* End: setup Haeder */

.logo-text img {
    width: 35px;
}

.logo-text span {
    font-size: 20px;
    font-weight: 600;
    font-family: Georgia, 'Times New Roman', Times, serif
}

.custom-container {
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 1) -6px -2px 16px 0px;
    height: 100vh;
}

.background-set {
    /*background: url('../images/bg/background.jpg') no-repeat fixed center;*/
    background: #20002c;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #cbb4d4, #20002c);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #cbb4d4, #20002c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    /*background-color: #cccccc;*/
    height: 100%;
    background-size: cover;
    overflow-y: hidden;
}

.main-container-fluid {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.main-container-fluid::-webkit-scrollbar {
    display: none;
}

.login-signup-text {
    font-size: 15px;
    font-weight: 600;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}

#have_refer_code {
    border-bottom: 1.5px dotted rgb(0, 119, 193);
    font-size: 13px;
}

.submit-btn {
    position: relative;
    width: 100%;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
    overflow: hidden;
    text-transform: uppercase;
    font-weight: 500;
    /* background: #3bbeb2; */
    /* background: -webkit-linear-gradient(90deg, #fe5f94, #fd761a); */
    /* background: linear-gradient(90deg, #fe5f94, #fd761a); */
    background: #fc466b;
    background: -webkit-linear-gradient(to right, #fc466b, #3f5efb);
    background: linear-gradient(to right, #fc466b, #3f5efb);
    /* background: -webkit-linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593); */
    /* background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593); */
}

.submit-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transition: all 1s;
}

.submit-btn:hover:before {
    left: 100%;
}


/* Start Of Input Field */

.form-custom-label {
    position: absolute;
    top: 0;
    font-size: 15px;
    margin: 9px;
    padding: 0 40px;
    -webkit-transition: top .2s ease-in-out, font-size .2s ease-in-out;
    transition: top .2s ease-in-out, font-size .2s ease-in-out;
}

.custom-refer-code-success {
    background-color: rgb(255, 244, 244);
    border-radius: 8px;
}

.active-custom-input {
    top: -21px;
    left: 38px;
    font-size: 14px;
    border-radius: 8px;
    background-color: #fff;
    padding: 1px 4px;
    font-weight: 500;
    color: rgb(0, 0, 0);
}

input[class=custom-input] {
    width: 100%;
    padding: 7px 50px;
    border: 1px solid rgb(123, 123, 123);
    border-radius: 7px;
    font-size: 16px;
    color: #000;
}

input[class=custom-input]:focus {
    outline: none;
    border: 1px solid rgb(38, 159, 38);
}

div.input-error label {
    color: rgb(255, 0, 0);
}

div.input-error input {
    border: 1px solid rgb(255, 0, 0);
}

div.input-error input:focus {
    border: 1px solid rgb(255, 0, 0);
}

div.input-error .input-custom-group i {
    color: rgb(255, 173, 160) !important;
}

.error-message {
    position: absolute;
    border-radius: 7px;
    color: rgb(255, 0, 0);
    right: 5px;
    top: 0px;
    font-size: 13px;
}

input::placeholder {
    opacity: 0;
    font-size: 14px;
    text-transform: none;
}

input:focus::placeholder {
    opacity: 1;
}

.input-custom-group {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    bottom: 0;
    min-width: 40px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    /* border-right: 1.5px solid rgb(123, 123, 123); */
}

.input-custom-group span i {
    color: rgb(54, 54, 54);
    font-size: 17px;
}

input[class=custom-input]:focus+.input-custom-group span i {
    color: rgb(38, 159, 38);
}

.custom-input-form-uppercase input {
    text-transform: uppercase;
}

.custom-input-form-disabled input {
    border: 1px solid rgba(255, 219, 219, 1);
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 36%, rgba(255, 219, 219, 1) 100%);
}

.input_btn_check button {
    font-size: 12px;
    background: -webkit-linear-gradient(90deg, #fe5f94, #fd761a);
    background: linear-gradient(90deg, #fe5f94, #fd761a);
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
}

.sponser_id_applied button {
    font-size: 12px;
    background: -webkit-linear-gradient(90deg, #870000, #190A05);
    background: linear-gradient(90deg, #870000, #190A05);
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
}

.sponser_id_applied button:hover {
    color: #fff;
}

.sponser_id_applied a {
    font-size: 12px;
    background: -webkit-linear-gradient(90deg, #870000, #190A05);
    background: linear-gradient(90deg, #870000, #190A05);
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
}

.sponser_id_applied a:hover {
    color: #fff;
}

.promo_code_applied button {
    background: #d54b4b;
}

.sponser-msg h6 {
    font-size: 13px;
    font-weight: 400;
}

.sponser-msg h6 span {
    font-size: 14px;
    font-weight: 500;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

.input_btn_check button:hover {
    color: #fff;
}


/* End of Input Field */


/* FORM */

.select-option input {
    display: none;
}

.select-option {
    padding: 3px 0;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid rgb(35, 29, 127);
}

.select-option label {
    position: relative;
    color: #000;
    font-size: 13px;
    margin-top: 4px;
    text-align: center;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

.select-option span img {
    max-width: 35px;
}

.active-auth {
    padding: 4px 0;
    border: none;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px;
}

.active-auth label {
    font-weight: 600;
}

.active-auth span i {
    font-weight: 500;
}

.terms-agree p {
    font-size: 11px;
    text-align: center;
    color: rgb(113, 113, 113);
}

.new-entry {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #000;
    line-height: 0.1em;
    margin: 10px 0 20px;
}

.new-entry span {
    background: #fff;
    padding: 0 5px;
}

.custom-text-small button {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 0;
    border-bottom: 1px dotted #000;
}


/* Donwload APP section */

.app-download {
    padding: 0px 15px 0 10px;
    border-radius: 10px;
    background-color: rgb(13, 13, 13);
}

.download-logo img {
    width: 30px;
}

.download-app-text {
    margin-left: 10px;
    color: #fff;
}

.download-app-text span {
    font-size: 11px;
}

.download-app-text h6 {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.download-instruction {
    color: #fff;
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.6);
}

.download-instruction span {
    color: #ffda7c;
}


/* Forgot Pass OTP */

.otp-image img {
    display: block;
    width: 70px;
    margin: 0 auto;
}

.otp-container {
    padding-top: 20px;
    text-align: center;
}

.otp-container h3 {
    font-size: 20px;
    font-weight: 600;
}

.otp-container p {
    font-size: 15px;
}

.otp-container h6 {
    font-size: 15px;
    font-weight: 600;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.custom-button-login button {
    font-size: 13px;
}

.custom-input-otp input {
    letter-spacing: 4px;
}

.custom-input-otp input::placeholder {
    letter-spacing: 0px;
}


/* head */

.header-container {
    background: rgb(0, 0, 0);
    background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 65%, rgba(255, 247, 247, 1) 65%, rgba(255, 218, 218, 1) 100%);
    padding: 6px 15px;
}

.header-container i {
    font-size: 25px;
}

.header-main img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 7px;
}

.header-main span {
    color: #000 !important;
    font-size: 14px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


/* Homepage */

.user-profile-card-container {
    background: -webkit-linear-gradient(linear, left top, right top, from(#42275a), to(#734b6d));
    background: linear-gradient(to right, #ba5370, #f4e2d8);
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
    box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
}

.user-card-info {
    border: 1.5px solid #f29263;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: 0;
}

.user-card-info-title {
    font-size: 15px;
    border-bottom: 1px solid #ee5a6f;
}

.custom-user-card-info-title {
    border-top: 1px solid #ee5a6f;
}

.user-card-body p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
}

.user-card-body h6 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 7px;
    font-size: 13px;
}

.user-card-body button {
    background-color: #fbeee0;
    border: 2px solid #422800;
    border-radius: 30px;
    box-shadow: #422800 4px 4px 0 0;
    color: #422800;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    padding: 0 18px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    user-select: none;
}

.user-card-body button:hover {
    background-color: #000;
    border: 2px solid #000;
}

.user-card-body button:active {
    box-shadow: #422800 2px 2px 0 0;
    transform: translate(2px, 2px);
}

.img-radius {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    box-shadow: rgb(0, 0, 0, 0.3) 0px 2px 4px 0px, rgb(0, 0, 0, 0.4) 0px 2px 16px 0px;
}


/* KYC STATUS CARD */

.kyc-card-container {
    border: 1px solid #42275a;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.kyc-card-body {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 8px 10px;
    background: rgb(0, 0, 0);
    background: -webkit-linear-gradient(linear, left top, right top, from(#42275a), to(#734b6d));
    background: linear-gradient(to right, #42275a, #734b6d);
}

.kyc-card-body h6 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.kyc-card-title p {
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    margin-bottom: 6px;
}

.kyc-card-title button {
    border-radius: 30px;
    padding: 4px 10px;
}


/* Minimal Card */

.minimal-card-container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: rgba(133, 133, 133, 3) 0px 3px 5px 0px;
}

.minimal-card-img img {
    width: 50px;
}

.minimal-card-data h3 {
    font-size: 21px;
}

.minimal-card-data h3 span i {
    font-size: 18px;
    font-weight: 600;
}

.minimal-card-data p {
    font-size: 15px;
}

.minimal-card-count-data {
    position: absolute;
    transform: translate(-0%, 0%);
    top: 0%;
    left: 0%;
    padding: 2px 10px !important;
    font-size: 11px !important;
    color: #fff !important;
}

.card-body-main-heading {
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    background-color: #fff;
}

.card-body-main-heading h6 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card-custom-header {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    background: #fff !important;
    border-bottom: 1px solid rgb(178, 178, 181);
}

.card-custom-header h6 {
    color: #000;
}

.card-container-body {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.card-container-body h6 {
    font-size: 14px;
    font-weight: 600;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.refer-code-detail {
    position: relative;
}

.refer-code-detail p {
    margin: 0;
    letter-spacing: 0.3em;
    padding: 5px 0;
    border-radius: 7px;
    text-align: center;
    background: transparent;
    background: linear-gradient(to right, rgb(255, 166, 0) 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(rgb(0, 0, 255) 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, rgb(0, 101, 0) 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(rgb(255, 0, 0) 50%, rgba(255, 255, 255, 0) 0%);
    background-position: top, right, bottom, left;
    background-repeat: repeat-x, repeat-y;
    background-size: 10px 2px, 2px 10px;
    font-size: 17px;
    font-weight: 600;
}

.refer-code-detail i {
    transform: translate(-50%, -50%);
    position: absolute;
    right: 0%;
    top: 50%;
    float: right;
    cursor: pointer;
    font-size: 20px;
    color: #561ec6;
}

.refer-code-share ul {
    list-style-type: none;
}

.refer-code-share ul li {
    border: none;
}

.refer-code-share ul li img {
    width: 30px;
}


/* SideBar Modal */


/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/

.modal.left .modal-dialog {
    position: fixed;
    margin: auto;
    width: 300px;
    height: 100%;
    overflow-x: hidden;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content {
    height: 100%;
    overflow-y: auto;
    border-radius: 0;
}

.modal-content {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.modal-content::-webkit-scrollbar {
    display: none;
}

.modal.left .modal-body {
    padding: 15px 15px 80px;
}


/*Left*/

.modal.left.fade .modal-dialog {
    left: -320px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog {
    left: 0;
}


/* ----- MODAL STYLE ----- */

.modal-content {
    border-radius: 0;
    border: none;
}

.modal-sidebar {
    z-index: 999999;
    padding: 6px 10px;
    border-bottom-color: #EEEEEE;
    background-color: #fff7f7;
}

.modal-sidebar-head h4 {
    width: 140px;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-sidebar-check-kyc-status>i {
    font-size: 20px;
    font-weight: 600;
    color: rgb(21, 159, 0);
}

.modal-sidebar-check-kyc-status>button {
    font-size: 12px;
    font-weight: 600;
    color: rgb(255, 0, 0);
    padding: 2px 4px;
}

.modal-sidebar-check-kyc-status>button i {
    font-size: 14px;
    font-weight: 600;
}

.modal-sidebar-check-kyc-status button:hover i {
    color: #fff !important;
}

.modal-sidebar-links {
    padding: 12px 17px !important;
    border: 0 !important;
    margin-bottom: 3px;
    box-shadow: 0px 15px 12px -17px rgb(187, 187, 187);
}

.modal-sidebar-links:hover {
    background-color: rgb(249, 245, 245);
}

.modal-sidebar-links p {
    font-size: 15px;
}

.modal-sidebar-links img {
    width: 21px;
    display: block;
    margin: 0 auto;
}

.modal-sidebar-links-img {
    padding: 5px;
    border-radius: 7px;
    box-shadow: rgba(196, 113, 255, 0.4) 0px 2px 8px 0px;
}

.modal-sidebar-links-title {
    padding: 0 0 0 12px;
}

.modal-sidebar-links-title h6 {
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 600;
    margin: 0;
}

.modal-sidebar-links-title button {
    font-size: 13px;
    font-weight: 500;
    padding: 3px 8px;
}


/* End: Modal */


/* Kyc */

.verify-account-header {
    background-color: rgb(255, 245, 245) !important;
    border-radius: 5px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.verify-account-detail h5 {
    font-size: 17px;
    font-weight: 600;
    color: #823f00;
}

.verify-account-detail h5 i {
    font-size: 15px;
    margin-left: 3px;
    margin-right: 2px;
}

.verify-account-detail p {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
}

.verify-account-detail img {
    margin: 0 auto;
    display: block;
    padding: 10px 0;
    width: 80px;
}

.refer-plans-img {
    position: absolute !important;
    width: 25px !important;
    top: 0 !important;
    right: 20px !important;
}

.account-verify-container-card {
    padding: 4px 14px !important;
    border-radius: 10px;
}

.account-verify-container img {
    width: 34px;
}

.account-verify-container h5 {
    font-size: 15px;
    margin-bottom: 3px;
}

.account-verify-container h5 span {
    margin-left: 7px;
    font-size: 10px;
    padding: 3px 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(255, 255, 255);
    background-color: rgb(55, 194, 81);
}

.account-verify-container p {
    font-size: 14px;
    font-weight: 600;
    color: rgb(89, 89, 89);
}

.account-verify-container-end i {
    font-size: 25px;
    color: rgb(55, 194, 81);
}

.account-verify-container-end button {
    font-size: 12px;
    padding: 3px 15px;
    font-weight: 600;
    border-radius: 7px;
    color: #000;
    border: 1px solid #000;
}

.account-verification-pending {
    font-size: 12px !important;
    font-weight: 500 !important;
}

.file-upload {
    background-color: #ffffff;
    margin: 0 auto;
    padding: 5px;
}

.file-upload-btn {
    width: 100%;
    margin: 0;
    color: rgb(0, 0, 0);
    background-color: #fff;
    border: 1px solid rgb(191, 191, 191);
    padding: 5px 15px;
    transition: all .2s ease;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    text-transform: uppercase;
}

.file-upload-btn i {
    font-size: 17px;
    margin-right: 10px;
}

.file-upload-btn:hover {
    background: #e95689;
    color: #ffffff;
    transition: all .2s ease;
    border: 1px solid #e95689;
    cursor: pointer;
}

.file-upload-btn:active {
    transition: all .2s ease;
}

.file-upload-content {
    display: none;
    text-align: center;
}

.file-upload-input {
    display: none;
}

.image-title-wrap {
    color: #222;
}

.file-upload-image {
    max-height: 150px;
    max-width: 150px;
    margin-bottom: 10px;
    border-radius: 7px;
}

.remove-image {
    margin: 0;
    color: rgb(255, 0, 0);
    background: #ffffff;
    border: 1px solid rgb(104, 0, 0);
    padding: 5px 10px;
    border-radius: 4px;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
}

.remove-image:hover {
    background: #ff634f;
    border: 1px solid #ff634f;
    color: #ffffff;
    transition: all .2s ease;
    cursor: pointer;
}

.remove-image:active {
    border: 0;
    transition: all .2s ease;
}


/* End: KYC */


/* Mobile Under 350px */

@media screen and (min-width: 200px) and (max-width: 350px) {
    .header-container {
        background: rgb(0, 0, 0);
        background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 55%, rgba(255, 247, 247, 1) 55%, rgba(255, 218, 218, 1) 100%);
        padding: 4px 10px;
    }
    .header-container i {
        font-size: 20px;
    }
    .logo-text img {
        width: 18px;
        margin-left: 12px;
    }
    .logo-text span {
        font-size: 13px;
        font-weight: 600;
        font-family: Georgia, 'Times New Roman', Times, serif
    }
    .header-main img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 5px;
    }
    .header-main span {
        color: #000;
        font-size: 12px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }
    .header-title-back {
        font-size: 17px !important;
    }
    .header-title-setup {
        background-color: transparent;
        /* background: -webkit-linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593); */
        /* background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593); */
        padding: 6px 0;
    }
    .header-title-setup span {
        font-size: 13px;
        padding-left: 7px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-weight: 600;
    }
    /* End: setup Haeder */
    /* Start Of Input Field */
    .form-custom-label {
        position: absolute;
        top: -3px;
        font-size: 13px;
        margin: 9px;
        padding: 0 40px;
        -webkit-transition: top .2s ease-in-out, font-size .2s ease-in-out;
        transition: top .2s ease-in-out, font-size .2s ease-in-out;
    }
    .custom-refer-code-success {
        background-color: rgb(255, 244, 244);
        border-radius: 8px;
    }
    .active-custom-input {
        top: -20px;
        left: 38px;
        font-size: 13px;
        border-radius: 8px;
        background-color: #fff;
        padding: 1px 4px;
        font-weight: 500;
        color: rgb(0, 0, 0);
    }
    input[class=custom-input] {
        width: 100%;
        padding: 5px 50px;
        border: 1px solid rgb(123, 123, 123);
        border-radius: 7px;
        font-size: 13px;
        color: #000;
    }
    input[class=custom-input]:focus {
        outline: none;
        border: 1px solid rgb(38, 159, 38);
    }
    input::placeholder {
        opacity: 0;
        font-size: 12px;
        text-transform: none;
    }
    input:focus::placeholder {
        opacity: 1;
    }
    .input-custom-group {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
        top: 0;
        bottom: 0;
        min-width: 40px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        /* border-right: 1.5px solid rgb(123, 123, 123); */
    }
    .input-custom-group span i {
        color: rgb(54, 54, 54);
        font-size: 15px;
    }
    input[class=custom-input]:focus+.input-custom-group span i {
        color: rgb(38, 159, 38);
    }
    /* Verify Card Haeder */
    .verify-account-detail h5 {
        font-size: 14px;
        font-weight: 600;
        color: #823f00;
    }
    .verify-account-detail p {
        font-size: 12px;
        font-weight: 500;
        color: #000000;
    }
    .verify-account-detail img {
        margin: 0 auto;
        display: block;
        padding: 10px 0;
        width: 60px;
    }
    .refer-plans-img {
        position: absolute !important;
        width: 20px !important;
        top: 0 !important;
        right: 0 !important;
    }
    .account-verify-container-card {
        padding: 2px 10px !important;
        border-radius: 10px;
    }
    .account-verify-container img {
        width: 30px;
    }
    .account-verify-container h5 {
        font-size: 13px;
        margin-bottom: 3px;
    }
    .account-verify-container h5 span {
        margin-left: 7px;
        font-size: 9px;
        padding: 3px 4px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: rgb(255, 255, 255);
        background-color: rgb(55, 194, 81);
    }
    .account-verify-container p {
        font-size: 12px;
        font-weight: 600;
        color: rgb(89, 89, 89);
    }
    .account-verify-container-end i {
        font-size: 20px;
        color: rgb(55, 194, 81);
    }
    .account-verify-container-end button {
        font-size: 11px;
        padding: 2px 10px;
        font-weight: 600;
        border-radius: 7px;
        color: #000;
        border: 1px solid #000;
    }
    .account-verification-pending {
        font-size: 11px !important;
        font-weight: 500 !important;
    }
    /* uPLOAD iAMGE */
    .file-upload {
        background-color: #ffffff;
        margin: 0 auto;
        padding: 5px;
    }
    .file-upload-btn {
        width: 100%;
        margin: 0;
        color: rgb(0, 0, 0);
        background-color: #fff;
        border: 1px solid rgb(191, 191, 191);
        padding: 5px 15px;
        transition: all .2s ease;
        outline: none;
        font-size: 12px;
        font-weight: 600;
        border-radius: 10px;
        text-transform: uppercase;
    }
    .file-upload-btn i {
        font-size: 15px;
        margin-right: 10px;
    }
    .file-upload-image {
        max-height: 80px;
        max-width: 80px;
        margin-bottom: 7px;
        border-radius: 5px;
    }
    .remove-image {
        margin: 0;
        color: rgb(255, 0, 0);
        background: #ffffff;
        border: 1px solid rgb(104, 0, 0);
        padding: 3px 10px;
        border-radius: 4px;
        transition: all .2s ease;
        outline: none;
        text-transform: uppercase;
        font-size: 13px;
        font-weight: 600;
        border-radius: 10px;
    }
    /* Custom Button */
    .submit-btn {
        position: relative;
        width: 100%;
        border: none !important;
        border-radius: 8px !important;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
        overflow: hidden;
        text-transform: uppercase;
        font-size: 13px !important;
        padding: 4px 0 !important;
        font-weight: 500;
        background: #fc466b;
        background: -webkit-linear-gradient(to right, #fc466b, #3f5efb);
        background: linear-gradient(to right, #fc466b, #3f5efb);
    }
    .submit-btn:before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        transition: all 1s;
    }
}

@media screen and (min-width: 350px) and (max-width: 575px) {
    .header-container {
        background: rgb(0, 0, 0);
        background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 55%, rgba(255, 247, 247, 1) 55%, rgba(255, 218, 218, 1) 100%);
        padding: 6px 10px;
    }
    .header-container i {
        font-size: 24px;
    }
    .logo-text img {
        width: 24px;
        margin-left: 20px;
    }
    .logo-text span {
        font-size: 15px;
        font-weight: 600;
        font-family: Georgia, 'Times New Roman', Times, serif
    }
    .header-main img {
        margin-right: 8px;
    }
    .header-main span {
        color: #000;
        font-size: 13px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }
    .header-title-back {
        font-size: 19px !important;
    }
    .header-title-setup {
        background-color: transparent;
        /* background: -webkit-linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593); */
        /* background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593); */
        padding: 7px 0;
    }
    .header-title-setup span {
        font-size: 14px;
        padding-left: 7px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-weight: 600;
    }
    /* End: setup Haeder */
    /* Start Of Input Field */
    .form-custom-label {
        position: absolute;
        top: -2px;
        font-size: 15px;
        margin: 9px;
        padding: 0 40px;
        -webkit-transition: top .2s ease-in-out, font-size .2s ease-in-out;
        transition: top .2s ease-in-out, font-size .2s ease-in-out;
    }
    .custom-refer-code-success {
        background-color: rgb(255, 244, 244);
        border-radius: 8px;
    }
    .active-custom-input {
        top: -22px;
        left: 38px;
        font-size: 15px;
        border-radius: 8px;
        background-color: #fff;
        padding: 1px 4px;
        font-weight: 500;
        color: rgb(0, 0, 0);
    }
    input[class=custom-input] {
        width: 100%;
        padding: 7px 50px;
        border: 1px solid rgb(123, 123, 123);
        border-radius: 7px;
        font-size: 15px;
        color: #000;
    }
    input[class=custom-input]:focus {
        outline: none;
        border: 1px solid rgb(38, 159, 38);
    }
    input::placeholder {
        opacity: 0;
        font-size: 13px;
        text-transform: none;
    }
    input:focus::placeholder {
        opacity: 1;
    }
    .input-custom-group {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
        top: 0;
        bottom: 0;
        min-width: 40px;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        /* border-right: 1.5px solid rgb(123, 123, 123); */
    }
    .input-custom-group span i {
        color: rgb(54, 54, 54);
        font-size: 17px;
    }
    input[class=custom-input]:focus+.input-custom-group span i {
        color: rgb(38, 159, 38);
    }
    /* Verify Card Haeder */
    .verify-account-detail h5 {
        font-size: 15px;
        font-weight: 600;
        color: #823f00;
    }
    .verify-account-detail p {
        font-size: 12px;
        font-weight: 500;
        color: #000000;
    }
    .verify-account-detail img {
        margin: 0 auto;
        display: block;
        padding: 10px 0;
        width: 70px;
    }
    .refer-plans-img {
        position: absolute !important;
        width: 25px !important;
        top: 0 !important;
        right: 0 !important;
    }
    .account-verify-container-card {
        padding: 3px 12px !important;
        border-radius: 10px;
    }
    .account-verify-container img {
        width: 33px;
    }
    .account-verify-container h5 {
        font-size: 14px;
        margin-bottom: 3px;
    }
    .account-verify-container h5 span {
        margin-left: 7px;
        font-size: 10px;
        padding: 3px 4px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: rgb(255, 255, 255);
        background-color: rgb(55, 194, 81);
    }
    .account-verify-container p {
        font-size: 13px;
        font-weight: 600;
        color: rgb(89, 89, 89);
    }
    .account-verify-container-end i {
        font-size: 22px;
        color: rgb(55, 194, 81);
    }
    .account-verify-container-end button {
        font-size: 12px;
        padding: 2px 10px;
        font-weight: 600;
        border-radius: 7px;
        color: #000;
        border: 1px solid #000;
    }
    .account-verification-pending {
        font-size: 12px !important;
        font-weight: 500 !important;
    }
    /* uPLOAD iAMGE */
    .file-upload {
        background-color: #ffffff;
        margin: 0 auto;
        padding: 5px;
    }
    .file-upload-btn {
        width: 100%;
        margin: 0;
        color: rgb(0, 0, 0);
        background-color: #fff;
        border: 1px solid rgb(191, 191, 191);
        padding: 6px 15px;
        transition: all .2s ease;
        outline: none;
        font-size: 13px;
        font-weight: 600;
        border-radius: 10px;
        text-transform: uppercase;
    }
    .file-upload-btn i {
        font-size: 15px;
        margin-right: 10px;
    }
    .file-upload-image {
        max-height: 110px;
        max-width: 110px;
        margin-bottom: 7px;
        border-radius: 5px;
    }
    .remove-image {
        margin: 0;
        color: rgb(255, 0, 0);
        background: #ffffff;
        border: 1px solid rgb(104, 0, 0);
        padding: 3px 10px;
        border-radius: 4px;
        transition: all .2s ease;
        outline: none;
        text-transform: uppercase;
        font-size: 13px;
        font-weight: 600;
        border-radius: 10px;
    }
    /* Custom Button */
    .submit-btn {
        position: relative;
        width: 100%;
        border: none !important;
        border-radius: 8px !important;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
        overflow: hidden;
        text-transform: uppercase;
        font-size: 14px !important;
        padding: 6px 0 !important;
        font-weight: 500;
        background: #fc466b;
        background: -webkit-linear-gradient(to right, #fc466b, #3f5efb);
        background: linear-gradient(to right, #fc466b, #3f5efb);
    }
    .submit-btn:before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        transition: all 1s;
    }
}

.custom-confirm-button-class {
    background-image: -webkit-linear-gradient(to right, #FF512F 0%, #DD2476 100%) !important;
    background-image: linear-gradient(to right, #FF512F 0%, #DD2476 100%) !important;
    font-size: 14px !important;
    padding: 7px 15px !important;
}

.custom-cancel-button-class {
    background-image: linear-gradient(to right, #ffe5d2 0%, #f2f2f2 100%) !important;
    color: #000 !important;
    font-size: 14px !important;
    padding: 7px 15px !important;
}

.custom-sweetalert2-image {
    width: 55px !important;
}

.custom-icon-class {
    margin: 0 auto !important;
    margin-top: 10px !important;
    border: none !important;
}

.custom-title-class {
    padding: 0 !important;
    font-size: 22px !important;
}

.custom-popup-class {
    padding-bottom: 0 !important;
    border-radius: 10px !important;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 20px 36px -28px inset !important;
}

.custom-footer-class {
    padding: 8px 0 !important;
}

.custom-footer-class button {
    font-size: 12px;
    padding: 2px 8px;
}

.custom-sweetalert2-footer {
    font-size: 14px !important;
    color: rgb(112, 129, 255) !important;
}


/* Profile section */

.custom-title-name-class {
    padding: 0 !important;
    font-size: 20px !important;
}

.go-to-links img {
    width: 23px;
}

.go-to-links {
    padding: 8px 0;
    border-radius: 7px;
    background: #ffefba;
    background: -webkit-linear-gradient(to right, #fff6d9, #f7f7f7);
    background: linear-gradient(to right, #fff6d9, #f7f7f7);
}

.go-to-links p {
    margin: 0;
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
    color: rgb(0, 24, 97);
}


/* Profile */

.profile-image-card img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.profile-card {
    margin-left: 15px;
}

.profile-card span {
    color: #000 !important;
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.profile-card h4 {
    color: rgb(86, 86, 86);
    font-size: 14px;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif
}

.edit-profile {
    border-radius: 50%;
    top: 85%;
    right: 19%;
    transform: translate(50%, -50%);
}

.edit-profile img {
    display: block;
    margin: 0 auto;
    width: 23px;
    height: 23px;
}

.edit_option button {
    background: none;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px !important;
}

.edit_option button i {
    font-size: 17px;
    color: rgb(58, 58, 58);
}

.kyc-card-body-other {
    background: #3494e6;
    background: -webkit-linear-gradient(to right, #3494e6, #ec6ead);
    background: linear-gradient(to right, #3494e6, #ec6ead);
    border-radius: 10px;
}


/* Wallet */


/* .wallet-balance-header {
    top: 48px;
    z-index: 999;
} */

.balance-use-options {
    padding: 15px 17px;
    box-shadow: 0 15px 12px -17px rgb(187 187 187);
}

.balance-use-options-logo {
    border-radius: 5px;
    padding: 5px;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
}

.balance-use-options-logo img {
    width: 27px;
}

.balance-use-options-title h6 {
    font-size: 15px;
    font-weight: 500;
    color: rgb(5, 0, 41);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    margin-left: 10px;
}

.balance-use-options-arrow img {
    width: 25px;
    margin-top: 6px;
}

.wallet-txn-container {
    border-top-left-radius: 13px !important;
    border-top-right-radius: 13px !important;
    padding: 15px 17px;
    box-shadow: rgba(14, 30, 37, 0.1) 0px 2px 4px 0px, rgba(14, 30, 37, 0.2) 0px 2px 16px 0px;
}

.wallet-txn-month h6 {
    font-size: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.wallet-txn-filter h5 {
    font-size: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.wallet-txn-filter button {
    font-size: 11px;
    padding: 3px 5px;
}

.wallet-txn-body {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
}

.wallet-txn-logo {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wallet-txn-mobile {
    background-color: rgba(14, 0, 107, 0.657);
}

.wallet-txn-bills {
    background-color: rgba(0, 147, 140, 0.727);
}

.wallet-txn-bank {
    background-color: rgba(19, 129, 0, 0.642);
}

.wallet-txn-calander {
    background-color: rgba(149, 0, 144, 0.586);
}

.wallet-txn-package {
    background-color: #000;
}

.wallet-txn-logo img {
    width: 27px;
}

.wallet-txn-info {
    padding: 0 10px;
}

.wallet-txn-info h6 {
    font-size: 15px;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
}

.wallet-txn-info p {
    font-size: 13px;
    padding-top: 5px;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
}

.wallet-txn-bal h6 {
    font-size: 17px;
    color: #000;
    font-weight: 600;
}

.wallet-txn-bal h6 i {
    font-size: 15px;
    font-weight: 600;
}

.wallet-txn-bal-status h6 i {
    margin: 0 3px 0 4px !important;
    font-size: 14px;
}

.wallet-txn-bal p {
    font-size: 14px;
    padding-top: 3px;
    font-weight: 500;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.wallet-txn-user {
    border: 1px solid rgb(216, 216, 216);
}

.wallet-txn-user img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
}


/* Bank Transefre */

.bank-account-details-card {
    border: 1px solid #e1dfe6;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.bank-account-details-header {
    padding: 8px 0;
    background: #e1dfe6;
    background: -webkit-linear-gradient(to right, #eae7ed, #e1dfe6);
    background: linear-gradient(to right, #eae7ed, #e1dfe6);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.bank-account-details-header img {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;
}

.bank-account-details-header p {
    font-size: 15px;
    font-weight: 600;
    padding-left: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.bank-account-detail-info {
    padding: 10px 12px;
}

.bank-account-detail-info p {
    font-size: 14px;
    padding-bottom: 5px;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(96, 96, 96);
}

.bank-account-detail-info h6 {
    font-size: 14px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: rgb(0, 0, 0);
}


/* Instruction */

.instruction-list p {
    font-size: 15px;
    color: #000;
}

.instruction-list ul li {
    font-size: 14px;
    color: rgb(77, 77, 77);
}

.instruction-list ul li i {
    font-size: 11px;
}


/* Txn Modal */

.custom-invoice-popup-class {
    padding-bottom: 0 !important;
    border-radius: 10px !important;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 20px 36px -28px inset !important;
}

.custom-invoice-popup-class>div.swal2-html-container {
    margin: 0 !important;
}

.custom-modal-image {
    width: 55px;
}

.invoice-top-header h2 {
    margin-top: 5px;
    font-weight: 600;
    font-size: 18px;
}

.invoice-header h6 {
    font-size: 12px;
    margin-bottom: 4px;
    font-weight: 400;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: rgb(67, 67, 67);
}

.invoice-header p {
    margin: 0;
    margin-top: 1px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(26, 26, 26);
}

.invoice-header p i {
    font-size: 11px;
}

.invoice-header h5 {
    display: inline;
    background-color: #fddfdc;
    padding: 2px 8px;
    border-radius: 8px;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
    color: rgb(58, 58, 58);
}

.invoice-card {
    padding: 15px 10px;
    border-radius: 7px;
    background: #ffefba;
    background: -webkit-linear-gradient(to right, #fff6d9, #f7f7f7);
    background: linear-gradient(to right, #fff6d9, #f7f7f7);
}

.invoice-card-body img {
    width: 35px;
    border-radius: 50%;
}

.invoice-card-body p {
    padding: 0 10px;
    font-size: 15px;
    font-weight: 500;
    color: rgb(0, 24, 97);
}

.invoice-card-body span {
    padding: 0 10px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(0, 24, 97);
}

.invoice-card-balance h6 {
    font-size: 15px;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.invoice-card-balance h6 i {
    font-size: 13px;
}

.invoice-card-total {
    padding: 15px 10px;
    border-radius: 7px;
    background: #ffefba;
    background: -webkit-linear-gradient(to right, #f4f4f4, #f7f7f7);
    background: linear-gradient(to right, #f4f4f4, #f7f7f7);
}

.invoice-card-total p {
    padding: 0 10px;
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    color: rgb(0, 0, 0);
}

.invoice-card-total h6 {
    font-size: 16px;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.invoice-card-total h6 i {
    font-size: 13px;
}

.invoice-note p {
    font-size: 12px;
}

.custom-confirm-button-invoice {
    background: -webkit-linear-gradient(to right, #FF512F 0%, #DD2476 100%);
    background-image: linear-gradient(to right, #FF512F 0%, #DD2476 100%);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 13px;
    color: #fff;
    border: none;
    outline: none;
    border-radius: 5px;
}

.custom-pending-button-invoice {
    background: -webkit-linear-gradient(to right, #5f2c82 0%, #49a09d 100%);
    background-image: linear-gradient(to right, #5f2c82 0%, #49a09d 100%);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 13px;
    color: #fff;
    border: none;
    outline: none;
    border-radius: 5px;
}

.custom-failed-button-invoice {
    background: -webkit-linear-gradient(to right, #e52d27 0%, #b31217 100%);
    background-image: linear-gradient(to right, #e52d27 0%, #b31217 100%);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 13px;
    color: #fff;
    border: none;
    outline: none;
    border-radius: 5px;
}


/* Pricing Table */

.pricing-card {
    border: none !important;
    border-radius: 10px !important;
}

.pricing-card-header {
    border-radius: 10px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding: 15px 0 !important;
    background: #0F2027;
    background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);
    background: linear-gradient(to right, #2C5364, #203A43, #0F2027);
}

.pricing-card-header h6 {
    margin: 0;
    color: #fff;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
}

.pricing-card-body {
    background: #FFEFBA;
    background: -webkit-linear-gradient(to right, #FFFFFF, #FFEFBA);
    background: linear-gradient(to right, #FFFFFF, #FFEFBA);
    border-left: 1px solid #ffefba;
}

.pricing-card-body h5 {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
}

.pricing-card-body h5 i {
    font-size: 15px;
}

.pricing-card-list {
    border-radius: 0 !important;
    border-left: 1px solid rgb(217, 217, 217) !important;
    border-right: 1px solid rgb(217, 217, 217) !important;
}

.pricing-card-list li {
    font-size: 13px;
    color: #000;
}

.pricing-card-footer {
    background: #ECE9E6;
    background: -webkit-linear-gradient(to right, #fff2f2, #ECE9E6);
    background: linear-gradient(to right, #fff2f2, #ECE9E6);
    border-radius: 10px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.pricing-card-footer button {
    background-image: linear-gradient(to right, #808080 0%, #3fada8 51%, #808080 100%);
    font-size: 13px;
    padding: 5px 15px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 5px;
    display: block;
}

.pricing-card-footer button:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}


/* plan Details */

.pricing-data-additional {
    margin-bottom: 3px;
}

.pricing-data-additional p {
    display: inline;
    padding: 5px 17px;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin: 0;
    background-image: linear-gradient(to right, #000428 0%, #004e92 100%);
    color: #fff;
    font-size: 13px;
}

.pricing-data-container {
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 13px 17px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.remove-border-top-left {
    border-top-left-radius: 0;
}

.pricing-data h6 {
    color: #000;
    font-size: 15px;
    margin-bottom: 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
}

.pricing-data h6 i {
    font-size: 14px;
}

.pricing-data p {
    color: rgb(64, 64, 64);
    margin: 0;
    font-size: 14px;
}

.pricing-data-detail {
    margin-top: 5px;
    border-top: 1px solid #ccc;
    padding-top: 7px;
}

.pricing-data-detail-more a {
    font-size: 13px;
}

.pricing-data-buy button {
    padding: 3px 10px;
    background-image: linear-gradient(to right, #4B79A1 0%, #283E51 100%);
    color: #fff;
    border: 0;
    font-size: 13px;
}

.pricing-data-list {
    margin-top: 10px;
}

.pricing-data-list ul li {
    padding: 5px 0;
    font-size: 13px;
    border: 0;
    border-top: 1px solid #ccc;
}

.pricing-data-list ul li i {
    font-size: 12px;
}

.pricing-data-list ul li span {
    font-weight: 600;
}

.pricing-data-list ul li img {
    width: 11px;
    margin-right: 3px;
}


/* Buy Plan */

.payment-method-container {
    padding: 10px 15px;
}

.payment-method-header p {
    font-size: 14px;
    font-weight: 500;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.custom-accordion-btn {
    font-size: 15px !important;
    border-radius: 10px !important;
}

.custom-accordion-btn img {
    width: 22px !important;
    margin-right: 7px;
}

.custom-accordion-btn:not(.collapsed) {
    background-color: rgb(255, 244, 210) !important;
    color: rgb(0, 0, 0) !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.custom-accordion-item {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
    border: 1px solid rgb(233, 233, 233) !important;
    border-radius: 10px !important;
}

.payment-method-details h6 {
    padding: 5px 0;
    width: 150px;
    font-size: 14px;
    color: rgb(62, 62, 62);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.payment-method-details span {
    margin: 0;
    padding: 5px 0;
    font-size: 15px;
    font-weight: 600;
    color: rgb(0, 0, 0);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.payment-method-footer {
    margin: 20px 0;
}

.payment-method-footer input {
    border-radius: 50% !important;
}

.payment-method-footer input:checked {
    border: none;
    background-color: rgb(10, 150, 0);
}

.payment-method-footer label {
    font-size: 13px;
    margin-left: 5px !important;
}

.payment-method-price {
    background: #606c88;
    background: -webkit-linear-gradient(to right, #3f4c6b, #606c88);
    background: linear-gradient(to right, #3f4c6b, #606c88);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 13px;
    color: #fff;
    border: none;
    outline: none;
    border-radius: 5px;
}


/* Mobilke Recharge */

.select2-selection__rendered {
    line-height: 37px !important;
}

.select2-container .select2-selection--single {
    height: 40px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    padding: 0 7px;
    font-weight: 500;
}

.select2-selection__arrow {
    height: 38px !important;
}

.select-option-image {
    max-width: 24px;
    max-height: 24px;
    margin-right: 5px;
}

.select2-search__field {
    border-radius: 7px !important;
    max-height: 30px;
}

.select2-dropdown--below {
    border-radius: 10px 10px 0 0 !important;
}

.select2-results__options li {
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 8px 8px !important;
}

.select2-results__options li span {
    font-size: 14px !important;
    padding: 8px 10px !important;
    font-weight: 500 !important;
}

.select2-results__option--highlighted {
    background-color: rgb(205, 225, 255) !important;
    color: #000 !important;
}


/* Mobile Recharge */

.recharge-plans-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

.recharge-plans-body .recharge-desc {
    font-size: 13px !important;
}

.recharge-plans-body-container {
    width: 85%;
}

.recharge-plan-amt {
    width: 15%;
    margin-right: 5px;
}

.recharge-plan-amt h6 {
    font-size: 13px;
    border: 1px solid rgb(0, 21, 255);
    padding: 5px 7px;
    border-radius: 8px;
    color: #004e92;
}


/* Web Loader */

.preloader-custom {
    position: relative;
}

#preloader {
    background: transparent url('../images/loader/loader.gif') no-repeat center center;
    background-size: 25%;
    height: 100vh;
    width: 100%;
    position: sticky;
    z-index: 999999;
}


/* Loader Spinner Ajax */

.spinner-border {
    width: 17px !important;
    height: 17px !important;
}


/* Add bank */

.bank-ac-container img {
    width: 50px;
    margin-right: 10px;
}

.bank-ac-container h6 {
    font-size: 16px;
    font-weight: 600;
}


/* My Acxcount */

.card-body-main-heading-account {
    border-radius: 8px;
    margin-bottom: 5px;
    background-color: #fff;
}

.card-body-main-heading-account h6 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.wallet-txn-container-account {
    border-top-left-radius: 13px !important;
    border-top-right-radius: 13px !important;
    padding: 7px 15px 15px 15px;
    box-shadow: rgba(14, 30, 37, 0.1) 0px 2px 4px 0px, rgba(14, 30, 37, 0.2) 0px 2px 16px 0px;
}

.card-body-main-heading-account button i {
    font-size: 12px;
}


/* Help & Support */

.help-container h6 {
    font-size: 14px;
}

.accordion-item-custom {
    margin-bottom: 10px;
}

.accordion-header-custom button {
    font-size: 14px;
    color: #000;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px !important;
    line-height: 1.4em !important;
}

.accordion-header-custom button::after {
    width: 15px;
    height: 15px;
    background-size: auto;
}

.accordion-body-custom {
    font-size: 13px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 20px !important;
    margin-top: -7px !important;
    border-radius: 0 0 10px 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.button-call-us {
    margin: 10px 0;
    width: 100%;
    border: 1px solid #3d3d3d !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #482307;
    font-family: ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    padding: 10px 0 !important;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.button-call-us img {
    width: 25px;
    height: 25px;
    margin-right: 8px;
}


/* Ibnvire */

.invite-body-main {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
}

.invite-body-main img {
    width: 37px;
    margin: 0 auto;
}

.invite-body-img-container {
    max-width: 65px;
}

.invite-body-title {
    margin-left: 15px;
}

.invite-body-title h6 {
    letter-spacing: 0.5px;
    font-size: 14.2px;
    font-weight: bold;
    color: #000;
    margin-bottom: 2px;
}

.invite-body-title p {
    font-size: 13px;
    color: rgb(65, 65, 65);
}

.invite-body-title p i {
    font-size: 12px;
}

.invite-example-container {
    margin-top: 10px;
    padding: 8px 10px 1px 8px;
    border-radius: 10px;
    background-color: #ecf3f9;
}

.invite-example-container h6 {
    font-size: 14px;
    font-weight: bold;
}

.invite-example-container ul li {
    font-size: 13px;
    margin-top: 5px;
    color: #001f3b;
}

.invite-example-container ul li i {
    font-size: 11px;
}

.invite-example-container h5 {
    font-size: 13px;
    line-height: 1.5em;
}

.invite-example-container h5 span {
    color: rgb(194, 61, 61);
}

.z-index-999 {
    z-index: 999;
}

.refer-plan-info h6 {
    font-size: 13px !important;
}

.refer-plan-info h6 i {
    font-size: 11px !important;
}

.refer-plan-info button {
    font-size: 12px !important;
    padding: 2px 10px;
    margin-left: 10px;
}


/* Pagination Result links */

.pagination-links-button {
    padding: 5px 0;
}

.pagination-links-result p {
    font-size: 13px;
}

.pagination-btn button {
    padding: 3px 10px;
    font-size: 12px;
}

.pagination-btn button {
    font-size: 11px;
}

.pagination-btn button:first-child {
    margin-right: 8px;
}


/* Invite */

.no-result-found {
    padding: 15px 0;
}

.no-result-found img {
    width: 60px;
    margin-right: 10px;
}

.no-result-found p {
    font-size: 15px;
    font-weight: 600;
}


/* Refer Modal */

.my-modal-dialog {
    animation-name: example2;
    animation-duration: 0.4s;
}

@keyframes example2 {
    0% {
        opacity: 0.4;
        transform: scale(0.1, 0.1);
        top: 100px;
    }
    100% {
        opacity: 1;
        transform: scale(1, 1);
        top: 0px;
    }
}

.modal-body-back {
    background: #ca906e;
    background: -webkit-linear-gradient(to top right, #ecd09f 0%, #ca906e 100%);
    background: -moz-linear-gradient(to top right, #ecd09f 0%, #ca906e 100%);
    background: -o-linear-gradient(to top right, #ecd09f 0%, #ca906e 100%);
    background: linear-gradient(to top right, #ecd09f 0%, #ca906e 100%);
}

.modal-header-data {
    padding: 2px 10px;
}

.modal-header-data h5 {
    font-size: 13px;
}

.modal-header-data button {
    color: #000;
    background-color: #fff;
    padding: 0;
    border-radius: 10px;
    border: none;
}

.modal-header-data button i {
    font-size: 13px;
}

.user-main-profile {
    box-shadow: 3px 2px 10px 0px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

.user-image img {
    width: 60px;
    border-radius: 50%;
    margin-top: 15px;
}

.user-name {
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
}

.user-name h4 {
    margin-top: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #883d00;
    text-align: center;
    line-height: 1.4em;
}

.user-name h6 {
    font-size: 12px;
    font-weight: 600;
    color: #000;
    font-style: normal;
    border-radius: 5px;
    border: none;
    padding: 3px 5px;
    background-color: #f4ded3;
}

.user-name h6 i {
    font-size: 11px;
}

.refer-status-modal {
    margin: 5px 0px;
}

.refer-status-modal p {
    font-size: 13px;
    margin: 0;
    text-align: center;
}

.refer-status-modal div:first-child {
    border-bottom: 1px dotted #000;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.refer-status-modal button {
    width: 100px;
    font-size: 11px;
    font-weight: 600;
    margin: 5px 0px;
}

.user-mobile {
    background-color: #F5E8DF;
    padding: 10px 0px;
    color: #000;
    margin-bottom: 2px;
}

.user-mobile h4 {
    font-size: 12px;
    font-weight: normal;
}

.user-mobile h5 {
    font-size: 12px;
    font-weight: 600;
}

.refer-info-modal {
    padding: 8px 5px;
}

.refer-info-modal p {
    font-size: 11px;
    text-align: center;
    font-weight: 600;
}


/* HomePage */

.kyc-pan-pending {
    margin-top: 10px;
    padding: 8px 0;
}

.kyc-pan-pending p {
    font-size: 13px;
}

.kyc-pan-pending button {
    display: block;
    margin: 0 auto;
    margin-top: 8px;
    font-size: 12px;
}

@media screen and (min-width: 200px) and (max-width: 350px) {
    /* Login */
    .select-option label {
        position: relative;
        color: #000;
        font-size: 12px;
        margin-top: 4px;
        text-align: center;
        display: block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        cursor: pointer;
    }
    .select-option span img {
        max-width: 29px;
    }
    .new-account-open p {
        font-size: 13px;
    }
    .new-account-open button {
        font-size: 11px !important;
    }
    .input_btn_check button {
        font-size: 11px;
        background: -webkit-linear-gradient(90deg, #fe5f94, #fd761a);
        background: linear-gradient(90deg, #fe5f94, #fd761a);
        border-radius: 8px;
        color: #fff;
        font-weight: 600;
    }
    .sponser_id_applied button {
        font-size: 11px;
        background: -webkit-linear-gradient(90deg, #870000, #190A05);
        background: linear-gradient(90deg, #870000, #190A05);
        border-radius: 8px;
        color: #fff;
        font-weight: 600;
    }
    .sponser_id_applied a {
        font-size: 11px;
        background: -webkit-linear-gradient(90deg, #870000, #190A05);
        background: linear-gradient(90deg, #870000, #190A05);
        border-radius: 8px;
        color: #fff;
        font-weight: 600;
    }
    /* OTP */
    .otp-image img {
        display: block;
        width: 50px;
        margin: 0 auto;
    }
    .otp-container {
        padding-top: 15px;
        text-align: center;
    }
    .otp-container h3 {
        font-size: 16px;
        font-weight: 600;
    }
    .otp-container p {
        font-size: 13px;
    }
    .otp-container h6 {
        font-size: 13px;
        font-weight: 600;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }
    /* Home */
    .img-radius {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        box-shadow: rgb(0, 0, 0, 0.3) 0px 2px 4px 0px, rgb(0, 0, 0, 0.4) 0px 2px 16px 0px;
    }
    .kyc-card-body h6 {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .kyc-card-title h6 {
        font-size: 14px;
    }
    .kyc-card-title p {
        font-weight: 600;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 14px;
        margin-bottom: 6px;
    }
    .kyc-card-title button {
        font-size: 11px;
        border-radius: 30px;
        padding: 4px 10px;
    }
    /* Sidebar */
    .modal-sidebar-links {
        padding: 11px 15px !important;
        border: 0 !important;
        margin-bottom: 3px;
        box-shadow: 0px 15px 12px -17px rgb(187, 187, 187);
    }
    .modal-sidebar-links:hover {
        background-color: rgb(249, 245, 245);
    }
    .modal-sidebar-links p {
        font-size: 14px;
    }
    .modal-sidebar-links img {
        width: 20px;
        display: block;
        margin: 0 auto;
    }
    .modal-sidebar-links-img {
        padding: 5px;
        border-radius: 7px;
        box-shadow: rgba(196, 113, 255, 0.4) 0px 2px 8px 0px;
    }
    .modal-sidebar-links-title {
        padding: 0 0 0 12px;
    }
    .modal-sidebar-links-title h6 {
        font-size: 14px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-weight: 600;
        margin: 0;
    }
    .modal-sidebar-links-title button {
        font-size: 12px;
        font-weight: 500;
        padding: 3px 8px;
    }
    /* Ivite */
    .refer-plan-info h6 {
        font-size: 12px !important;
    }
    .refer-plan-info h6 i {
        font-size: 10px !important;
    }
    .refer-plan-info button {
        font-size: 11px !important;
        padding: 2px 10px;
        margin-left: 10px;
    }
    .invite-body-main {
        padding: 13px 0;
        border-bottom: 1px solid #ccc;
    }
    .invite-body-main img {
        width: 37px;
        margin: 0 auto;
    }
    .invite-body-img-container {
        max-width: 65px;
    }
    .invite-body-title {
        margin-left: 15px;
    }
    .invite-body-title h6 {
        letter-spacing: 0.5px;
        font-size: 14.2px;
        font-weight: bold;
        color: #000;
        margin-bottom: 2px;
    }
    .invite-body-title p {
        font-size: 12px;
        color: rgb(65, 65, 65);
    }
    .invite-body-title p i {
        font-size: 12px;
    }
    .invite-example-container {
        margin-top: 10px;
        padding: 8px 10px 1px 8px;
        border-radius: 10px;
        background-color: #ecf3f9;
    }
    .invite-example-container h6 {
        font-size: 13px;
        font-weight: bold;
    }
    .invite-example-container ul li {
        font-size: 12px;
        margin-top: 5px;
        color: #001f3b;
    }
    .invite-example-container ul li i {
        font-size: 11px;
    }
    .invite-example-container h5 {
        font-size: 12px;
        line-height: 1.5em;
    }
    .invite-example-container h5 span {
        color: rgb(194, 61, 61);
    }
    .wallet-txn-body {
        padding: 13px 0;
        border-bottom: 1px solid #ccc;
    }
    .wallet-txn-info {
        padding: 0 10px;
    }
    .wallet-txn-info h6 {
        font-size: 13px;
        font-weight: 600;
        font-family: Arial, Helvetica, sans-serif;
    }
    .wallet-txn-info p {
        font-size: 11px;
        padding-top: 5px;
        font-weight: 500;
        font-family: Arial, Helvetica, sans-serif;
    }
    .wallet-txn-bal h6 {
        font-size: 15px;
        color: #000;
        font-weight: 600;
    }
    .wallet-txn-bal h6 i {
        font-size: 14px;
        font-weight: 600;
    }
    .wallet-txn-bal-status h6 i {
        margin: 0 3px 0 4px !important;
        font-size: 13px;
    }
    .wallet-txn-bal p {
        font-size: 13px;
        padding-top: 3px;
        font-weight: 500;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .wallet-txn-logo {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wallet-txn-user img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    /* Help & Support */
    .help-container h6 {
        font-size: 14px;
    }
    .accordion-item-custom {
        margin-bottom: 7px;
    }
    .accordion-header-custom button {
        font-size: 13px;
        color: #000;
        border-radius: 10px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px !important;
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 1.3em !important;
    }
    .accordion-header-custom button::after {
        width: 15px;
        height: 15px;
        background-size: auto;
    }
    .accordion-body-custom {
        font-size: 12px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding-top: 20px !important;
        margin-top: -7px !important;
        border-radius: 0 0 10px 10px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    }
    .button-call-us {
        margin: 10px 0;
        width: 100%;
        border: 1px solid #3d3d3d !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #482307;
        font-family: ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
        padding: 10px 0 !important;
        text-align: center;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    }
    .button-call-us img {
        width: 22px;
        height: 22px;
        margin-right: 8px;
    }
    /* Payment methods */
    .payment-method-details h6 {
        padding: 5px 0;
        width: 140px;
        font-size: 13px;
        color: rgb(62, 62, 62);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .payment-method-details span {
        margin: 0;
        padding: 5px 0;
        font-size: 14px;
        font-weight: 600;
        color: rgb(0, 0, 0);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .custom-accordion-btn {
        font-size: 13px !important;
        border-radius: 10px !important;
    }
    .custom-accordion-btn img {
        width: 20px !important;
        margin-right: 7px;
    }
    .payment-method-footer {
        margin: 15px 0;
    }
    .payment-method-footer input {
        border-radius: 50% !important;
    }
    .payment-method-footer input:checked {
        border: none;
        background-color: rgb(10, 150, 0);
    }
    .payment-method-footer label {
        font-size: 12px;
        margin-left: 5px !important;
    }
    /* Instruction */
    .instruction-list p {
        font-size: 13px;
        color: #000;
    }
    .instruction-list ul li {
        font-size: 12px;
        color: rgb(77, 77, 77);
    }
    .instruction-list ul li i {
        font-size: 10px;
    }
    /* Wallet */
    .balance-use-options {
        padding: 12px 13px;
        box-shadow: 0 15px 12px -17px rgb(187 187 187);
    }
    .balance-use-options-logo {
        border-radius: 5px;
        padding: 5px;
        box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
    }
    .balance-use-options-logo img {
        width: 27px;
    }
    .balance-use-options-title h6 {
        font-size: 13px;
        font-weight: 500;
        color: rgb(5, 0, 41);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        margin-left: 10px;
    }
    .balance-use-options-arrow img {
        width: 23px;
        margin-top: 6px;
    }
    /* Bank */
    .bank-account-details-header img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;
    }
    .bank-account-details-header p {
        font-size: 14px;
        font-weight: 600;
        padding-left: 8px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .bank-account-detail-info {
        padding: 10px 12px;
    }
    .bank-account-detail-info p {
        font-size: 12px;
        padding-bottom: 5px;
        font-weight: 600;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: rgb(96, 96, 96);
    }
    .bank-account-detail-info h6 {
        font-size: 12px;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        color: rgb(0, 0, 0);
    }
    /* Add bank */
    .no-bank-account-details-card .card-header h6 {
        font-size: 12px;
    }
    .bank-ac-container img {
        width: 35px;
        margin-right: 10px;
    }
    .bank-ac-container h6 {
        font-size: 13px;
        font-weight: 600;
    }
}

@media screen and (min-width: 350px) and (max-width: 575px) {
    /* Login */
    .new-account-open p {
        font-size: 14px;
    }
    .new-account-open button {
        font-size: 12px !important;
    }
    .input_btn_check button {
        font-size: 11px;
        background: -webkit-linear-gradient(90deg, #fe5f94, #fd761a);
        background: linear-gradient(90deg, #fe5f94, #fd761a);
        border-radius: 8px;
        color: #fff;
        font-weight: 600;
    }
    /* OTP */
    .otp-image img {
        display: block;
        width: 60px;
        margin: 0 auto;
    }
    .otp-container {
        padding-top: 15px;
        text-align: center;
    }
    .otp-container h3 {
        font-size: 18px;
        font-weight: 600;
    }
    .otp-container p {
        font-size: 14px;
    }
    .otp-container h6 {
        font-size: 14px;
        font-weight: 600;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }
    /* Ivite */
    .refer-plan-info h6 {
        font-size: 12px !important;
    }
    .refer-plan-info h6 i {
        font-size: 10px !important;
    }
    .refer-plan-info button {
        font-size: 11px !important;
        padding: 2px 10px;
        margin-left: 10px;
    }
    .invite-body-main {
        padding: 13px 0;
        border-bottom: 1px solid #ccc;
    }
    .invite-body-main img {
        width: 37px;
        margin: 0 auto;
    }
    .invite-body-img-container {
        max-width: 65px;
    }
    .invite-body-title {
        margin-left: 15px;
    }
    .invite-body-title h6 {
        letter-spacing: 0.5px;
        font-size: 14.2px;
        font-weight: bold;
        color: #000;
        margin-bottom: 2px;
    }
    .invite-body-title p {
        font-size: 12px;
        color: rgb(65, 65, 65);
    }
    .invite-body-title p i {
        font-size: 12px;
    }
    .invite-example-container {
        margin-top: 10px;
        padding: 8px 10px 1px 8px;
        border-radius: 10px;
        background-color: #ecf3f9;
    }
    .invite-example-container h6 {
        font-size: 13px;
        font-weight: bold;
    }
    .invite-example-container ul li {
        font-size: 12px;
        margin-top: 5px;
        color: #001f3b;
    }
    .invite-example-container ul li i {
        font-size: 11px;
    }
    .invite-example-container h5 {
        font-size: 12px;
        line-height: 1.5em;
    }
    .invite-example-container h5 span {
        color: rgb(194, 61, 61);
    }
    .wallet-txn-body {
        padding: 13px 0;
        border-bottom: 1px solid #ccc;
    }
    .wallet-txn-info {
        padding: 0 10px;
    }
    .wallet-txn-info h6 {
        font-size: 13px;
        font-weight: 600;
        font-family: Arial, Helvetica, sans-serif;
    }
    .wallet-txn-info p {
        font-size: 11px;
        padding-top: 5px;
        font-weight: 500;
        font-family: Arial, Helvetica, sans-serif;
    }
    .wallet-txn-bal h6 {
        font-size: 15px;
        color: #000;
        font-weight: 600;
    }
    .wallet-txn-bal h6 i {
        font-size: 14px;
        font-weight: 600;
    }
    .wallet-txn-bal-status h6 i {
        margin: 0 3px 0 4px !important;
        font-size: 13px;
    }
    .wallet-txn-bal p {
        font-size: 13px;
        padding-top: 3px;
        font-weight: 500;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .wallet-txn-logo {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wallet-txn-user img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    /* Help & Support */
    .help-container h6 {
        font-size: 14px;
    }
    .accordion-item-custom {
        margin-bottom: 7px;
    }
    .accordion-header-custom button {
        font-size: 13px;
        color: #000;
        border-radius: 10px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px !important;
        padding-top: 12px;
        padding-bottom: 12px;
        line-height: 1.3em !important;
    }
    .accordion-header-custom button::after {
        width: 15px;
        height: 15px;
        background-size: auto;
    }
    .accordion-body-custom {
        font-size: 12px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding-top: 20px !important;
        margin-top: -7px !important;
        border-radius: 0 0 10px 10px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    }
    .button-call-us {
        margin: 10px 0;
        width: 100%;
        border: 1px solid #3d3d3d !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #482307;
        font-family: ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
        padding: 10px 0 !important;
        text-align: center;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    }
    .button-call-us img {
        width: 22px;
        height: 22px;
        margin-right: 8px;
    }
    /* Payment methods */
    .payment-method-details h6 {
        padding: 5px 0;
        width: 140px;
        font-size: 13px;
        color: rgb(62, 62, 62);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .payment-method-details span {
        margin: 0;
        padding: 5px 0;
        font-size: 14px;
        font-weight: 600;
        color: rgb(0, 0, 0);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .custom-accordion-btn {
        font-size: 13px !important;
        border-radius: 10px !important;
    }
    .custom-accordion-btn img {
        width: 20px !important;
        margin-right: 7px;
    }
    .payment-method-footer {
        margin: 15px 0;
    }
    .payment-method-footer input {
        border-radius: 50% !important;
    }
    .payment-method-footer input:checked {
        border: none;
        background-color: rgb(10, 150, 0);
    }
    .payment-method-footer label {
        font-size: 12px;
        margin-left: 5px !important;
    }
    /* Instruction */
    .instruction-list p {
        font-size: 13px;
        color: #000;
    }
    .instruction-list ul li {
        font-size: 12px;
        color: rgb(77, 77, 77);
    }
    .instruction-list ul li i {
        font-size: 10px;
    }
    /* Wallet */
    .balance-use-options {
        padding: 12px 13px;
        box-shadow: 0 15px 12px -17px rgb(187 187 187);
    }
    .balance-use-options-logo {
        border-radius: 5px;
        padding: 5px;
        box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
    }
    .balance-use-options-logo img {
        width: 27px;
    }
    .balance-use-options-title h6 {
        font-size: 13px;
        font-weight: 500;
        color: rgb(5, 0, 41);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        margin-left: 10px;
    }
    .balance-use-options-arrow img {
        width: 23px;
        margin-top: 6px;
    }
    /* Bank */
    .bank-account-details-header img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;
    }
    .bank-account-details-header p {
        font-size: 14px;
        font-weight: 600;
        padding-left: 8px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .bank-account-detail-info {
        padding: 10px 12px;
    }
    .bank-account-detail-info p {
        font-size: 12px;
        padding-bottom: 5px;
        font-weight: 600;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: rgb(96, 96, 96);
    }
    .bank-account-detail-info h6 {
        font-size: 12px;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        color: rgb(0, 0, 0);
    }
    /* Add bank */
    .no-bank-account-details-card .card-header h6 {
        font-size: 13px;
    }
    .bank-ac-container img {
        width: 40px;
        margin-right: 10px;
    }
    .bank-ac-container h6 {
        font-size: 14px;
        font-weight: 600;
    }
}


/* Website Extra Stuff */

.conditions_apply {
    padding: 10px 18px;
}

.conditions_apply h1 {
    font-size: 15px;
    font-weight: 600;
}

.conditions_apply p {
    font-size: 12px;
    word-spacing: 0.1em;
    letter-spacing: 0.04em;
    line-height: 1.6em;
    margin-left: 15px;
    color: rgb(80, 80, 80);
}

.conditions_apply ul li {
    font-size: 12px;
    line-height: 1.6em;
    color: rgb(80, 80, 80);
    margin-bottom: 5px;
}

.video-tutorials-header h5{
    font-size: 16px;
    font-weight: 600;
}

@media screen and (min-width: 200px) and (max-width: 991px) {
    .background-set {
        /*background: url('../images/bg/background.jpg') no-repeat fixed center;*/
        /*background: #20002c; */
        /*background: -webkit-linear-gradient(to right, #cbb4d4, #20002c); */
        /*background: linear-gradient(to right, #cbb4d4, #20002c); */
        background: #cccccc;
        height: 100%;
        background-size: cover;
        overflow-y: hidden;
    }
}

/* pay Using UPI */

.payment-warning p {
    font-weight: normal;
    font-size: 13px;
    color: #000;
    text-align: center;
}

.upi-detail-container {
    background-color: #fff;
    padding-bottom: 20px;
}

.upi-transaction {
    padding-top: 20px;
}

.upi-transaction img {
    width: 220px;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
}

.upi-transaction h6 {
    margin-top: 15px;
    padding: 0 20px;
    text-align: center;
    font-size: 20px;
    font-family: Montserrat;
    font-weight: 600;
}

.upi-transaction-info {
    margin-top: 15px;
}

.upi-transaction-info p {
    border: 1px solid rgb(102, 102, 102);
    padding: 4px 15px;
    border-radius: 15px;
    text-align: center;
    font-size: 13px;
}

.upi-transaction-info p span {
    font-size: 14px;
    font-family: Roboto;
    font-weight: 600;
}

.upi-transaction-note {
    margin: 15px 20px;
}

.upi-transaction-note ul li {
    font-family: Ubuntu;
    font-weight: 500;
    margin: 15px 0;
    font-size: 14px;
}

.upi-transaction-progress {
    padding: 5px 20px;
}

.transaction-process-container {
    height: 8px !important;
}

.transaction-process {
    background-color: #ff634f !important;
}

.upi-txn-time p {
    font-size: 14px;
    text-align: center;
    padding: 10px 0;
}

@media screen and (min-width: 200px) and (max-width: 350px) {
    /* pay Using UPI */
    .payment-warning p {
        font-weight: normal;
        font-size: 12px;
        color: #000;
        text-align: center;
    }
    .upi-detail-container {
        background-color: #fff;
        padding-bottom: 15px;
    }
    .upi-transaction {
        padding-top: 15px;
    }
    .upi-transaction img {
        width: 150px;
        display: block;
        margin: 0 auto;
        border-radius: 50%;
    }
    .upi-transaction h6 {
        margin-top: 15px;
        padding: 0 20px;
        text-align: center;
        font-size: 15px;
        font-family: Montserrat;
        font-weight: 600;
    }
    .upi-transaction-info {
        margin-top: 15px;
    }
    .upi-transaction-info p {
        border: 1px solid rgb(102, 102, 102);
        padding: 4px 15px;
        border-radius: 15px;
        text-align: center;
        font-size: 12px;
    }
    .upi-transaction-info p span {
        font-size: 13px;
        font-family: Roboto;
        font-weight: 600;
    }
    .upi-transaction-note {
        margin: 10px 15px;
    }
    .upi-transaction-note ul li {
        font-family: Ubuntu;
        font-weight: 500;
        margin: 15px 0;
        font-size: 13px;
    }
    .upi-transaction-progress {
        padding: 5px 20px;
    }
    .transaction-process-container {
        height: 6px !important;
    }
    .transaction-process {
        background-color: #ff634f !important;
    }
    .upi-txn-time p {
        font-size: 13px;
        text-align: center;
        padding: 10px 0;
    }
}

@media screen and (min-width: 350px) and (max-width: 575px) {
    /* pay Using UPI */
    .payment-warning p {
        font-weight: normal;
        font-size: 12px;
        color: #000;
        text-align: center;
    }
    .upi-detail-container {
        background-color: #fff;
        padding-bottom: 18px;
    }
    .upi-transaction {
        padding-top: 18px;
    }
    .upi-transaction img {
        width: 175px;
        display: block;
        margin: 0 auto;
        border-radius: 50%;
    }
    .upi-transaction h6 {
        margin-top: 15px;
        padding: 0 15px;
        text-align: center;
        font-size: 16px;
        font-family: Montserrat;
        font-weight: 600;
    }
    .upi-transaction-info {
        margin-top: 15px;
    }
    .upi-transaction-info p {
        border: 1px solid rgb(102, 102, 102);
        padding: 4px 15px;
        border-radius: 15px;
        text-align: center;
        font-size: 13px;
    }
    .upi-transaction-info p span {
        font-size: 13px;
        font-family: Roboto;
        font-weight: 600;
    }
    .upi-transaction-note {
        margin: 10px 15px;
    }
    .upi-transaction-note ul li {
        font-family: Ubuntu;
        font-weight: 500;
        margin: 15px 0;
        font-size: 13px;
    }
    .upi-transaction-progress {
        padding: 5px 20px;
    }
    .transaction-process-container {
        height: 7px !important;
    }
    .transaction-process {
        background-color: #ff634f !important;
    }
    .upi-txn-time p {
        font-size: 13px;
        text-align: center;
        padding: 10px 0;
    }
}