/* DEFAULT */
:root {
    --cl-sp-black: #111111;
    --cl-sp-red: #AB0000;
    --cl-light-gray: #FFF5D2;
}

/* ACTIVE ACCOUNT PAGE */
#CR-recovery-pass-page .box-content,
#CR-active-account-page .box-content {
    -webkit-box-shadow: 0px 0px 20px rgb(0 0 0 / 20%) !important;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 20%) !important;
    border: none !important;
    border-radius: 1rem;
    padding: 2rem;
    max-width: 31.25rem;
    margin: 20vh auto !important;
}

#CR-active-account-page .top{
    margin-bottom: 1rem;
}

#CR-active-account-page .wrap-title .note{
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    color: var(--cl-black);
    line-height: normal;
    font-size: 1.5rem;
}

#CR-recovery-pass-page .CR-empty-result,
#CR-active-account-page .CR-empty-result {
    padding: 0;
}

#CR-recovery-pass-page .CR-succees-result,
#CR-active-account-page .CR-succees-result {
    text-align: center;
}

#CR-active-account-page .CR-succees-result a:hover {
    background-color: var(--cl-light-hover);
}

#CR-active-account-page .CR-succees-result a {
    height: 2.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    white-space: nowrap;
    width: fit-content;
    background-color: var(--cl-white);
    padding: 0 1rem;
    color: var(--cl-main);
    opacity: 1;
    border: 1px solid var(--cl-main);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: normal;
    text-transform: uppercase;
    margin: 1rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ACCOUNT RECHARGE PAGE */
.CR-recharge--box {

}

.CR-recharge--box .steps--box {
    margin-bottom: 6.25rem  /* 100/16 */;
}

.CR-recharge--box .steps--box ul {
    gap: 6.25rem  /* 100/16 */;
}

.CR-recharge--box .steps--box li {
    color: var(--cl-sp-black);
    position: relative;
}

.CR-recharge--box .steps--box li:not(:last-child):after {
    content: '';
    height: 1px;
    background-image: linear-gradient(90deg, var(--cl-sp-black), var(--cl-sp-black) 75%, transparent 75%, transparent 100%);
    background-size: 0.25rem  /* 4/16 */ 0.0625rem  /* 1/16 */;
    width: calc(6.25rem - 1.875rem);
    left: calc(100% + 0.9375rem);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.CR-recharge--box .steps--box li span {
    min-width: 4.8125rem /* 77/16 */;
    width: 4.8125rem /* 77/16 */;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid var(--cl-sp-black);
    z-index: 1;
    font-size: 1.875rem  /* 30/16 */;
    color: var(--cl-sp-black);
}

.CR-recharge--box .steps--box li.done span {
    color: var(--cl-white);
}

.CR-recharge--box .steps--box li.done span:before {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.CR-recharge--box .steps--box li span:before {
    content: '';
    position: absolute;
    top: 0.4375rem  /* 7/16 */;
    left: 0.4375rem  /* 7/16 */;
    right: 0.4375rem  /* 7/16 */;
    bottom: 0.4375rem  /* 7/16 */;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    opacity: 0;
    background-color: var(--cl-main);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    border-radius: 50%;
    z-index: -1;
}

.CR-recharge--box .steps--box li .info {
    flex: 1;
    padding-left: 1rem  /* 16/16 */;
}

.CR-recharge--box .steps--box li .info b {
    font-size: 1.25rem  /* 20/16 */;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    display: block;
}

.CR-recharge--box .steps--box li .info p {
    font-size: 1.125rem  /* 18/16 */;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    display: block;
}

.CR-recharge--box .main--box .info--box {
    width: 66.66666667%;
    min-width: 66.66666667%;
    padding-right: 3.125rem  /* 50/16 */;
    border-right: 1px solid #E0E0E0;
}

.CR-recharge--box .main--box .info--box .heading-title {
    color: var(--cl-sp-black);
    font-size: 1.875rem  /* 30/16 */;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    margin-bottom: 1.875rem  /* 30/16 */;
}

.CR-recharge--box .main--box .info--box .sub--box:not(:last-child) {
    margin-bottom: 3.75rem  /* 60/16 */;
}

.CR-recharge--box .main--box .billing-info--box {
    flex: 1;
    padding-left: 3.125rem  /* 50/16 */;
}

.CR-recharge--box .package-list--box {
    margin: -0.4375rem  /* -7/16 */ -0.75rem  /* -12/16 */;
}

.CR-recharge--box .package-list--box li {
    width: 25%;
    padding: 0.4375rem  /* 7/16 */ 0.75rem  /* 12/16 */;
}

.CR-recharge--box .package-list--box label {
    background: var(--cl-white);
    padding: 1.5rem  /* 24/16 */ 0.625rem  /* 10/16 */;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.5s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
}

.CR-recharge--box .package-list--box label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.CR-recharge--box .package-list--box label .checkmark {
    position: absolute;
    top: 0.625rem  /* 10/16 */;
    left: 0.625rem  /* 10/16 */;
    height: 0.875rem  /* 14/16 */;
    width: 0.875rem  /* 14/16 */;
    border: 1px solid #B6B6B6;
    background-color: #F0F0F0;
    border-radius: 50%;
    transition: 0.5s ease-in-out;
}

.CR-recharge--box .package-list--box label:hover input ~ .checkmark {
    border-color: var(--cl-main);
}

.CR-recharge--box .package-list--box label input:checked ~ .checkmark {
    border-color: var(--cl-main);
}

.CR-recharge--box .package-list--box label input:checked ~ .checkmark:after {
    -webkit-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

.CR-recharge--box .package-list--box label .checkmark:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: var(--cl-main);
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    -webkit-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
}

.CR-recharge--box .package-list--box label .border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border: 1px solid #D9D9D9;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.CR-recharge--box .package-list--box label:hover .border,
.CR-recharge--box .package-list--box label input:checked ~ .checkmark ~ .border {
    border-color: var(--cl-main) !important;
}

.CR-recharge--box .package-list--box .info-package .point {
    display: block;
    color: #666666;
    font-size: 1.125rem  /* 18/16 */;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.CR-recharge--box .package-list--box .info-package .point b {
    font-size: 2rem  /* 32/16 */;
    font-weight: 900;
    color: var(--cl-sp-black);
    margin-right: 0.25rem;
}

.CR-recharge--box .package-list--box .info-package .price {
    color: #666666;
    font-size: 0.9375rem /* 15/16 */;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: block;
    text-align: center;
}

.CR-recharge--box .view--box {
    position: sticky;
    top: 0;
    transition: 1s ease-in-out;

    background: #FFF;
}

.CR-recharge--box .view--box .heading-title{
    background: var(--cl-sp-black);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
    color: #ffffff;
    font-size: 1.25rem  /* 20/16 */;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    display: flex;
    align-items: center;
    padding: 0.9375rem  /* 15/16 */ 1.75rem  /* 28/16 */;
}

.CR-recharge--box .view--box .sub--box {
    border: 1px solid #C4C4C4;
    border-top: none;
    padding: 1.4375rem  /* 23/16 */ 1.75rem  /* 28/16 */;
}

.CR-recharge--box .view--box .list {
    margin-bottom: 1.875rem  /* 30/16 */;
    padding-bottom: 1.875rem  /* 30/16 */;
    border-bottom: 1px solid #E0E0E0;
}

.CR-recharge--box .view--box .list li {
    color: var(--cl-sp-black);
    font-size: 1.125rem  /* 18/16 */;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.CR-recharge--box .view--box .list li:not(:last-child) {
    margin-bottom: 0.625rem  /* 10/16 */;
}

.CR-recharge--box .view--box .list b {
    font-size: 0.9375rem  /* 15/16 */;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.CR-recharge--box .view--box .total--box p {
    color: var(--cl-sp-black);
    font-size: 1.125rem  /* 18/16 */;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.CR-recharge--box .view--box .total-recharge-result {
    color: var(--cl-sp-black);
    font-size: 0.9375rem  /* 15/16 */;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.CR-recharge--box .view--box .total-recharge-result b {
    font-size: 1.5625rem /* 25/16 */;
    font-weight: 900;
    line-height: normal;
    margin-right: 0.25rem;
}

.CR-recharge--box .view--box .action--box {
    margin-top: 1.875rem  /* 30/16 */;
}

.CR-recharge--box .payment-methods-list--box {
    margin: -0.3125rem  /* -5/16 */ -0.4375rem  /* -7/16 */;
}

.CR-recharge--box .payment-methods-list--box .payment-method {
    width: 100%;
    padding: 0.3125rem  /* 5/16 */ 0.4375rem  /* 7/16 */;
}

.CR-recharge--box .payment-methods-list--box .payment-method:not(:last-child) {
    margin-bottom: 1rem !important;
}

.CR-recharge--box .payment-methods-list--box .payment-method label:hover {
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    border-color: var(--cl-main) !important;
}

.CR-recharge--box .payment-methods-list--box .payment-method label {
    padding: 0.9375rem /* 15/16 */ 1.25rem /* 20/16 */;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    line-height: normal !important;
    width: 100%;
    background: var(--cl-white);
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    position: relative;
    cursor: pointer;
}

.CR-recharge--box .payment-methods-list--box .payment-method--icon {
    width: 10%;
    padding-right: 1rem;
}

.CR-recharge--box .payment-methods-list--box .payment-method--icon svg {
    width: 100%;
    height: auto;
    fill: var(--cl-black);
}

.CR-recharge--box .payment-methods-list--box .payment-method--info {
    border-left: 1px solid #F0F0F2;
    padding-left: 1rem;
    width: 90%;
}

.CR-recharge--box .payment-methods-list--box input {
    display: none;
}

.CR-recharge--box .payment-methods-list--box .payment-method--content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 2.5rem /* 40/16 */;
    width: 100%;
}

.CR-recharge--box .payment-methods-list--box .payment-method--title {
    color: #666666;
    font-size: 1rem  /* 16/16 */;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
}

.CR-recharge--box .payment-methods-list--box label:hover .payment-method--title,
.CR-recharge--box .payment-methods-list--box label input:checked ~ .checkmark ~ .border ~ .payment-method--content .payment-method--info .payment-method--title {
    color: var(--cl-main);
}

.CR-recharge--box .payment-methods-list--box .payment-method--des {
    color: var(--cl-black) !important;
    font-size: 0.75rem /* 12/16 */ !important;
    font-weight: 500;
    padding: 0 !important;
    border-radius: 0 !important;
    line-height: normal !important;
    background-color: transparent !important;
    margin: 0 !important;
    display: block !important;
}

.CR-recharge--box .payment-methods-list--box .payment-method--des:before {
    display: none !important;
}

.CR-recharge--box .payment-methods-list--box .payment-method--des .logo--box {
    margin-top: 0.5rem;
}

.CR-recharge--box .payment-methods-list--box .payment-method--des .logo--box svg {
    width: auto;
    height: 3.125rem  /* 50/16 */;
}

.CR-recharge--box .payment-methods-list--box .checkmark {
    position: absolute;
    top: 50%;
    left: 1.25rem /* 20/16 */;
    height: 1.5625rem /* 25/16 */;
    width: 1.5625rem /* 25/16 */;
    border: 1px solid var(--cl-light-gray);
    border-radius: 50%;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    transform: translate(0, -50%);
}

.CR-recharge--box .payment-methods-list--box label input:checked ~ .checkmark {
    border: 1px solid var(--cl-main);
}

.CR-recharge--box .payment-methods-list--box label input:checked ~ .checkmark:after {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.CR-recharge--box .payment-methods-list--box label .checkmark:after {
    top: 0.25rem;
    left: 0.25rem;
    bottom: 0.25rem;
    right: 0.25rem;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    border-radius: 100%;
    background: var(--cl-main);
    content: "";
    position: absolute;
    opacity: 0;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.CR-recharge--box .payment-methods-list--box label .border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border: 1px solid #C4C4C4;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.CR-recharge--box .payment-methods-list--box label:hover .border,
.CR-recharge--box .payment-methods-list--box label input:checked ~ .checkmark ~ .border {
    border-color: var(--cl-main) !important;
}

.CR-recharge--box .payment-methods-list--box .bank-list--box {
    margin: 1rem 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.CR-recharge--box .payment-methods-list--box .bank-item {
    padding: 0.85rem;
    border-radius: 0.5rem;
    background: var(--cl-light-gray);
    height: 100%;
    width: 33.33%;
}

.CR-recharge--box .payment-methods-list--box .bank-item:not(:last-child) {
    margin-bottom: 1rem !important;
}

.CR-recharge--box .payment-methods-list--box .bank-item .bank--info {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.CR-recharge--box .payment-methods-list--box .bank-item li:after,
.CR-recharge--box .payment-methods-list--box .bank-item li:before {
    display: none !important;
}

.CR-recharge--box .payment-methods-list--box .bank-item li {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.75rem /* 12/16 */;
    line-height: normal !important;
    color: var(--cl-black);
    font-weight: 500;
}

.CR-recharge--box .payment-methods-list--box .bank-item li:not(.bank--name) b {
    color: var(--cl-black);
}

.CR-recharge--box .payment-methods-list--box .bank-item li b {
    font-weight: 700;
}

.CR-recharge--box .payment-methods-list--box .bank-item li.qr-code img {
    width: 100%;
    height: auto;
}

.CR-recharge--box.show-result #CR-form-recharge {
    display: none !important;
}

.CR-recharge--box.show-result .result--box {
    display: block;
}

.CR-recharge--box .result--box {
    width: 75%;
    margin: 0 auto;
    display: none;
}

.CR-recharge--box .result--box .top--box {
    margin-bottom: 2.8125rem  /* 45/16 */;
}

.CR-recharge--box .result--box .info-order--box .info-order-default--box li {
    color: var(--cl-sp-black);
    font-size: 0.75rem  /* 12/16 */;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 0.8125rem  /* 13/16 */;
    width: 20%;
}

.CR-recharge--box .result--box .info-order--box .info-order-default--box li:last-child {
    text-align: right;
}

.CR-recharge--box .result--box .info-order--box .info-order-default--box li.pending {
    color: var(--cl-dark-red);
}

.CR-recharge--box .result--box .info-order--box .info-order-default--box li.completed {
    color: var(--cl-green);
}

.CR-recharge--box .result--box .info-order--box .head--box {
    background: var(--cl-sp-black);
}

.CR-recharge--box .result--box .info-order--box .head--box li {
    color: var(--cl-white) !important;
}

.CR-recharge--box .result--box .info-order--box .total--box {
    background: #D6D6D6;
    padding: 0.8125rem  /* 13/16 */;
}

.CR-recharge--box .result--box .info-order--box .total--box li {
    color: var(--cl-sp-black);
    font-size: 0.9375rem  /* 15/16 */;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.CR-recharge--box .result--box .info-order--box .total--box li.total-info-order-result {
    font-weight: 900;
    font-size: 1.25rem  /* 20/16 */;
    text-align: right;
}

.CR-recharge--box .result--box .info-order--box .button--box {
    margin-top: 1.875rem  /* 30/16 */;
}

.CR-recharge--box .result--box .info-order--box .button--box a:hover {
    background: var(--cl-white);
    color: var(--cl-main);
}

.CR-recharge--box .result--box .info-order--box .button--box a {
    color: var(--cl-white);
    font-size: 1.125rem /* 18/16 */;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background: var(--cl-main);
    height: 3.125rem /* 50/16 */;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    padding: 0 2.5rem  /* 40/16 */;
    border: 1px solid var(--cl-main);
    width: max-content;
    max-width: 100%;
    outline: none !important;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    margin: 0 auto;
}

.CR-recharge--box .result--box .info-order--box {

}

.CR-recharge--box .result--box .icon--box {
    min-width: 9.375rem  /* 150/16 */;
    width: 9.375rem  /* 150/16 */;
}

.CR-recharge--box .result--box .icon--box svg {
    width: 100%;
    height: auto;
}

.CR-recharge--box .result--box .cont--box {
    flex: 1;
    padding-left: 1rem;
}

.CR-recharge--box .result--box .heading-title {
    color: var(--cl-sp-black);
    font-size: 0.8125rem  /* 13/16 */;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 0.625rem  /* 10/16 */;
}

.CR-recharge--box .result--box .desc * {
    color: var(--cl-sp-black);
    font-size: 0.9375rem  /* 15/16 */;
    font-style: normal;
    font-weight: 400;
    line-height: 1.375rem  /* 22/16 */;
}

.CR-recharge--box .result--box .desc b,
.CR-recharge--box .result--box .desc strong {
    font-weight: 700;
}

.CR-recharge--box .result--box .desc a {
    color: var(--cl-main) !important;
    font-weight: 700;
}

.CR-recharge--box button {
    color: var(--cl-white);
    font-size: 1.125rem /* 18/16 */;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background: var(--cl-main);
    height: 3.125rem /* 50/16 */;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    padding: 0 1rem;
    border: 1px solid var(--cl-main);
    width: 100%;
    outline: none !important;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.CR-recharge--box button:hover {
    background: var(--cl-white);
    color: var(--cl-main);
}

.CR-order-recharge-history--box {
    position: relative;
}

.CR-order-recharge-history--box .head--box {
    background: var(--cl-sp-black);
    position: sticky;
    top: 0;
    transition: 1s ease-in-out;
    z-index: 1;
}

.CR-order-recharge-history--box .head--box .CR-order-recharge-col-box li {
    color: var(--cl-white);
    font-weight: 900;
}

.CR-order-recharge-col-box {

}

.CR-order-recharge-col-box li {
    padding: 0.875rem  /* 14/16 */ 1.25rem  /* 20/16 */;
    width: 16.6667%;
}

.CR-order-recharge-col-box li:last-child {
    text-align: right;
}

.CR-order-recharge-col-box li,
.CR-order-recharge-col-box li * {
    color: var(--cl-sp-black);
    font-size: 1rem  /* 16/16 */;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.CR-order-recharge-col-box li.statusDisplay p {
    font-weight: 700;
    text-align: right;
    display: block;
    width: 100%;
}

.CR-order-recharge-col-box li .cr-completed {
    color: var(--cl-green);
}

.CR-order-recharge-col-box li .cr-payment-failed,
.CR-order-recharge-col-box li .cr-pending {
    color: var(--cl-sp-red);
}

.CR-item-order-recharge {
    width: 100%;
    border-bottom: 1px solid #E3E3E3;
}


/**================== AJAX LOAD FORM ==================**/
.CR-load-form-ajax {
    position: relative;
}

.CR-load-form-ajax.active{
    cursor: progress;
}

.CR-load-form-ajax.active > * {
    opacity: 0.5;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    pointer-events: none;
}

.CR-load-form-ajax.active:before {
    opacity: 1;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.CR-load-form-ajax:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' class='svg-loader' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 80 80' xml:space='preserve'%0A%3E%3Cpath fill='%23dedede' d='M10,40c0,0,0-0.4,0-1.1c0-0.3,0-0.8,0-1.3c0-0.3,0-0.5,0-0.8c0-0.3,0.1-0.6,0.1-0.9c0.1-0.6,0.1-1.4,0.2-2.1 c0.2-0.8,0.3-1.6,0.5-2.5c0.2-0.9,0.6-1.8,0.8-2.8c0.3-1,0.8-1.9,1.2-3c0.5-1,1.1-2,1.7-3.1c0.7-1,1.4-2.1,2.2-3.1 c1.6-2.1,3.7-3.9,6-5.6c2.3-1.7,5-3,7.9-4.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.3,1.5-0.3,2.3-0.5c0.8-0.2,1.5-0.3,2.3-0.4l1.2-0.1 l0.6-0.1l0.3,0l0.1,0l0.1,0l0,0c0.1,0-0.1,0,0.1,0c1.5,0,2.9-0.1,4.5,0.2c0.8,0.1,1.6,0.1,2.4,0.3c0.8,0.2,1.5,0.3,2.3,0.5 c3,0.8,5.9,2,8.5,3.6c2.6,1.6,4.9,3.4,6.8,5.4c1,1,1.8,2.1,2.7,3.1c0.8,1.1,1.5,2.1,2.1,3.2c0.6,1.1,1.2,2.1,1.6,3.1 c0.4,1,0.9,2,1.2,3c0.3,1,0.6,1.9,0.8,2.7c0.2,0.9,0.3,1.6,0.5,2.4c0.1,0.4,0.1,0.7,0.2,1c0,0.3,0.1,0.6,0.1,0.9 c0.1,0.6,0.1,1,0.1,1.4C74,39.6,74,40,74,40c0.2,2.2-1.5,4.1-3.7,4.3s-4.1-1.5-4.3-3.7c0-0.1,0-0.2,0-0.3l0-0.4c0,0,0-0.3,0-0.9 c0-0.3,0-0.7,0-1.1c0-0.2,0-0.5,0-0.7c0-0.2-0.1-0.5-0.1-0.8c-0.1-0.6-0.1-1.2-0.2-1.9c-0.1-0.7-0.3-1.4-0.4-2.2 c-0.2-0.8-0.5-1.6-0.7-2.4c-0.3-0.8-0.7-1.7-1.1-2.6c-0.5-0.9-0.9-1.8-1.5-2.7c-0.6-0.9-1.2-1.8-1.9-2.7c-1.4-1.8-3.2-3.4-5.2-4.9 c-2-1.5-4.4-2.7-6.9-3.6c-0.6-0.2-1.3-0.4-1.9-0.6c-0.7-0.2-1.3-0.3-1.9-0.4c-1.2-0.3-2.8-0.4-4.2-0.5l-2,0c-0.7,0-1.4,0.1-2.1,0.1 c-0.7,0.1-1.4,0.1-2,0.3c-0.7,0.1-1.3,0.3-2,0.4c-2.6,0.7-5.2,1.7-7.5,3.1c-2.2,1.4-4.3,2.9-6,4.7c-0.9,0.8-1.6,1.8-2.4,2.7 c-0.7,0.9-1.3,1.9-1.9,2.8c-0.5,1-1,1.9-1.4,2.8c-0.4,0.9-0.8,1.8-1,2.6c-0.3,0.9-0.5,1.6-0.7,2.4c-0.2,0.7-0.3,1.4-0.4,2.1 c-0.1,0.3-0.1,0.6-0.2,0.9c0,0.3-0.1,0.6-0.1,0.8c0,0.5-0.1,0.9-0.1,1.3C10,39.6,10,40,10,40z' %3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 40 40' to='360 40 40' dur='0.8s' repeatCount='indefinite' /%3E%3C/path%3E%3Cpath fill='%23000000' d='M62,40.1c0,0,0,0.2-0.1,0.7c0,0.2,0,0.5-0.1,0.8c0,0.2,0,0.3,0,0.5c0,0.2-0.1,0.4-0.1,0.7 c-0.1,0.5-0.2,1-0.3,1.6c-0.2,0.5-0.3,1.1-0.5,1.8c-0.2,0.6-0.5,1.3-0.7,1.9c-0.3,0.7-0.7,1.3-1,2.1c-0.4,0.7-0.9,1.4-1.4,2.1 c-0.5,0.7-1.1,1.4-1.7,2c-1.2,1.3-2.7,2.5-4.4,3.6c-1.7,1-3.6,1.8-5.5,2.4c-2,0.5-4,0.7-6.2,0.7c-1.9-0.1-4.1-0.4-6-1.1 c-1.9-0.7-3.7-1.5-5.2-2.6c-1.5-1.1-2.9-2.3-4-3.7c-0.6-0.6-1-1.4-1.5-2c-0.4-0.7-0.8-1.4-1.2-2c-0.3-0.7-0.6-1.3-0.8-2 c-0.2-0.6-0.4-1.2-0.6-1.8c-0.1-0.6-0.3-1.1-0.4-1.6c-0.1-0.5-0.1-1-0.2-1.4c-0.1-0.9-0.1-1.5-0.1-2c0-0.5,0-0.7,0-0.7 s0,0.2,0.1,0.7c0.1,0.5,0,1.1,0.2,2c0.1,0.4,0.2,0.9,0.3,1.4c0.1,0.5,0.3,1,0.5,1.6c0.2,0.6,0.4,1.1,0.7,1.8 c0.3,0.6,0.6,1.2,0.9,1.9c0.4,0.6,0.8,1.3,1.2,1.9c0.5,0.6,1,1.3,1.6,1.8c1.1,1.2,2.5,2.3,4,3.2c1.5,0.9,3.2,1.6,5,2.1 c1.8,0.5,3.6,0.6,5.6,0.6c1.8-0.1,3.7-0.4,5.4-1c1.7-0.6,3.3-1.4,4.7-2.4c1.4-1,2.6-2.1,3.6-3.3c0.5-0.6,0.9-1.2,1.3-1.8 c0.4-0.6,0.7-1.2,1-1.8c0.3-0.6,0.6-1.2,0.8-1.8c0.2-0.6,0.4-1.1,0.5-1.7c0.1-0.5,0.2-1,0.3-1.5c0.1-0.4,0.1-0.8,0.1-1.2 c0-0.2,0-0.4,0.1-0.5c0-0.2,0-0.4,0-0.5c0-0.3,0-0.6,0-0.8c0-0.5,0-0.7,0-0.7c0-1.1,0.9-2,2-2s2,0.9,2,2C62,40,62,40.1,62,40.1z' %3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 40 40' to='-360 40 40' dur='0.6s' repeatCount='indefinite' /%3E%3C/path%3E%3C/svg%3E");
    background-size: 6rem;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

@media only screen and (max-width: 1199px) {
    .CR-recharge--box .package-list--box li {
        width: 33.33%;
    }
}

@media only screen and (max-width: 992px){
    .CR-recharge--box .main--box .info--box .heading-title {
        font-size: 1.25rem  /* 20/16 */;
    }

    .CR-recharge--box .steps--box {
        margin-bottom:  3.125rem  /* 50/16 */;
    }

    .CR-recharge--box .steps--box ul {
        gap: 3.125rem  /* 50/16 */;
    }

    .CR-recharge--box .steps--box li:not(:last-child):after {
        width: calc(3.125rem  /* 50/16 */ - 1.875rem);
    }

    .CR-recharge--box .steps--box li span {
        min-width: 3.125rem  /* 50/16 */;
        width:3.125rem  /* 50/16 */;
        font-size: 1rem  /* 16/16 */;
    }

    .CR-recharge--box .package-list--box li {
        width: 50%;
    }

    .CR-recharge--box .package-list--box .info-package .price,
    .CR-recharge--box .package-list--box .info-package .point {
        font-size: 0.875rem  /* 14/16 */;
    }

    .CR-recharge--box .package-list--box .info-package .point b {
        font-size: 1.25rem  /* 20/16 */;
    }

    .CR-recharge--box #CR-form-recharge {
        flex-wrap: wrap;
    }

    .CR-recharge--box .main--box .billing-info--box,
    .CR-recharge--box .main--box .info--box {
        width: 100%;
        min-width: 100%;
        padding: 1.25rem /* 20/16 */ 0;
    }

    .CR-recharge--box .payment-methods-list--box .bank-item {
        width: 100%;
    }

    .CR-order-recharge-history--box .head--box {
        display: none !important;
    }

    .CR-order-recharge-col-box {
        flex-wrap: wrap;
    }

    .CR-order-recharge-col-box li {
        width: 50%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start !important;
        -ms-flex-align: start !important;
        align-items: flex-start !important;
        padding: 0.75rem;
    }

    .CR-order-recharge-col-box li .label {
        display: block !important;
        font-weight: 700;
    }

    .CR-order-recharge-col-box li * {
        text-align: left !important;
    }

    .CR-item-order-recharge {
        background: #f4f5f9;
        border: none !important;
    }

    .CR-item-order-recharge:not(:last-child) {
        margin-bottom: 1rem;
    }

    .CR-recharge--box .result--box {
        width: 100%;
    }

    .CR-recharge--box .result--box .icon--box {
        min-width: 2.5rem  /* 40/16 */;
        width: 2.5rem  /* 40/16 */;
    }

    .CR-recharge--box .result--box .info-order--box .info-order-default--box li {
        padding: 0.5rem 0.35rem;
    }
}

@media only screen and (max-width: 767px){
    .CR-recharge--box .payment-methods-list--box .payment-method--icon {
        display: none;
    }

    .CR-recharge--box .payment-methods-list--box .payment-method--info {
        width: 100%;
    }
}