:root{
    font-size: 62.5%;


    --theme-yellow: #EDC128;
    --theme-blue: #0c61d8;
    --theme-lightblue: #0172b1;
    --clr-bg-1: #272729;
    --clr-bg-2: #1E2128;

    --clr-inactive: #696969;
    --bg-inactive: #474747;
    --clr-active: #0093ff;

    --gradient-blue: linear-gradient(335deg, rgba(12,97,216,1) 0%, rgba(19,202,244,1) 100%);
    --gradient-input-black-shadow: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0) 35%,rgba(34, 34, 34, 0.25) 75%, rgba(29, 29, 29, 0.38) 100%);
    --gradient-black-focus: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0) 5%,rgba(0, 0, 0, 0.25) 75%, rgba(0, 5, 77, 0.38) 100%);
    --gradient-dark-blue: linear-gradient(335deg, rgb(0 28 67) 0%, rgb(0 59 73) 100%);

    --gradient-blue-ld: linear-gradient(25deg, rgba(12, 97, 216, 1) 0%, rgba(19, 202, 244, 1) 100%); /*left darker*/
    --gradient-red-ld: linear-gradient(25deg, rgb(206, 8, 8) 0%, rgb(247, 89, 27) 100%); /*left darker*/


    --clr-cyan: #00fefc;
    --clr-purple: #a905b6;
    --clr-green: #2aab00;

    --clr-lightpurple: rgb(239 0 255);
    --clr-grey: #b3b3b3;

    /* --clr-focus: #f6d681; */
    --clr-focus: rgb(0, 195, 255);
    --clr-btn: #7a1fdf;

    --clr-th: rgba(0,0,0,0.6);

    --clr-odd: rgba(0,0,0,0.4);
    --clr-even: rgba(0,0,0,0.3);

    --clr-warning: #ffca0a;

    --clr-obj-purple: #8e51b5;
    --clr-obj-blue: #1d92ff;
    --clr-bg-default: rgba(0,0,0,1);
    --clr-overlay-high: rgba(0,0,0,0.75);
    --clr-tbg-white-light: rgba(144,144,144,0.25);
    --clr-tbg-deep: rgba(40,0,70, 0.3);
    --clr-bg-solid2: rgb(255 118 0);

    --clr-bg-cus: linear-gradient(45deg, rgb(24 70 90) 0%, rgb(116 30 115) 100%);
    --clr-bg-cus2: linear-gradient(45deg, rgba(255,221,73,1) 0%, rgba(250,123,123,1) 100%);
    --clr-bg-cus3: linear-gradient(45deg, rgba(50,246,114,1) 0%, rgba(40,169,230,1) 100%);
    --clr-bg-cus4: linear-gradient(45deg, rgba(188,53,169,1) 0%, rgba(87,33,121,1) 100%);
    --clr-bg-cus5: linear-gradient(45deg, rgb(0 78 77) 0%, rgb(0 106 122) 100%);

    --clr-cus5: #00fffd;


    --clr-btn-active: var(--clr-bg-cus4);
    --clr-btn-semi: rgba(122,122,122, 0.5);

    --clr-toggle-bg: rgba(255,255,255, 0.1);
    --clr-toggle-text: #afafaf;
    --grd-green: linear-gradient(180deg, rgba(5,217,118,1) 0%, rgba(1,121,66,1) 100%);
    --grd-pink: linear-gradient(180deg, rgba(239,0,255,1) 0%, rgba(169,5,182,1) 100%);
    --grd-purple: linear-gradient(180deg, rgb(180 0 255) 0%, rgb(123 0 163) 100%);
    --grd-blue: linear-gradient(180deg, rgb(0 196 255) 0%, rgb(0 100 139) 100%);


    --shw-purple-solid: 0 0 1rem rgba(169, 5, 182, 1);
    --shw-cyan-solid: 0 0 1.5rem rgb(43, 255, 244);
    --shw-blue-solid: 0 0 1.5rem rgb(29, 82, 255);


    --fw-thin: 100;
    --fw-extralight: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium : 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;
}

body{
    padding:0;
    background: var(--clr-body);
    position:relative;
    margin: auto;
    font-size:1.6rem;
    max-width:55rem;
    background: #161A20;
    min-height: 100vh;
    box-sizing: border-box;
}

*{
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: white;
    line-height: 1.2;
}

svg > *{
    color: white;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
}

section{
    padding: 2rem 1rem;
}

a{
    text-decoration: none;
}

::-webkit-scrollbar-thumb {
    background: #e14040;
    border-radius: 1rem;
}

::-webkit-scrollbar-track {
    background: #191919;
    border-radius: 100px;
}

.mt-15{
    margin-top:1.5rem;
}

.mb-15{
    margin-bottom:1.5rem;
}

.mb-20{
    margin-bottom:2rem;
}

.mb-25{
    margin-bottom:2.5rem;
}

.btn{
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 0.8rem;
    font-size: 1.4rem;
    font-weight: var(--fw-semibold);
}

.btn-default{
    background: var(--clr-purple);
}

.btn-gradient-secondary{
    background: linear-gradient(180deg, rgb(0 196 255) 0%, rgb(0 100 139) 100%);
    color: white;
}

.btn-full{
    width: 100%;
}

.btn-large{
    padding:1.5rem 2.5rem;
}

.btn-submit{
    background: var(--gradient-blue);
    border: none;
    color: white;
    padding: 1.5rem;
}

.btn-action{
    background: var(--gradient-blue);
    color: white;
    padding: 1.5rem;
}

header{
    display: flex;
    align-items: center;
    gap:0.5rem;
    justify-content: space-between;
    background: rgba(26, 26, 26, 1);
    width: 100%;
    height: 6.5rem;
}

header .col{
    padding: 0.5rem;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

header .col-1{
    padding-left: 1rem;
    gap:1rem;
}

header .col-2{
    padding-right:1rem;
    justify-content: flex-end;
}

header .col-3{
    flex: 0 0 calc(20% - 0.5rem);
    margin: auto;
    justify-content: center;
    align-items: center;
}

header img{
    max-height: 75%;
}

.short-profile{
    
    padding:1.5rem 1rem;
    box-sizing: border-box;
    /*background-image: linear-gradient(6deg, rgba(23,23,23,1) 0%, rgba(54,53,53,1) 100%);*/
    /*background-image: linear-gradient(6deg, rgb(30 45 125) 0%, rgb(0 173 201) 100%);*/
    /*background-image: linear-gradient(6deg, rgb(2 0 83) 0%, rgb(25 47 63) 100%);*/
    background: #1c1c1c;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.short-profile .profile{
    flex: 0 0 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
}



.short-profile .profile-info{
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}

.short-profile .profile-name{
    font-size:1.6rem;
    font-weight: var(--fw-medium);
    line-height: 1.2;
}

.short-profile .profile-name{
    font-size:1.6rem;
    font-weight: var(--fw-semibold);
    line-height: 1.2;
}

.short-profile .bank-name, .short-profile .bank-account{
    font-size:1.4rem;
}

.short-profile .wallet{
    flex: 0 0 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.short-profile .credit-wrap{
    flex: 0 0 50%;
    box-sizing: border-box;
    display: flex;
    gap:0.5rem;
    align-items: center;
    background: linear-gradient(90deg, rgba(255,239,0,0.55) 0%, rgba(255,239,0,0.3) 47%, rgba(255,239,0,0.1) 100%);
    box-sizing: border-box;
    padding: 0.5rem 3rem 0.5rem 1.5rem;
    border-radius: 2.5rem;
    width: auto;
    margin-right: 1.5rem;
}

.short-profile img{
    height:3rem;
    width: auto;
}

.short-profile .credit{
    display: flex;
    gap:0.5rem;
}

#resetamount{
    display: flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    padding:0.5rem;
    background: var(--clr-green);
    width:3rem;
    height: 3rem;
    box-sizing: border-box;
    right: 0;
    top:50%;
    transform: translateY(-50%);
    border-radius: 100%;
    box-shadow: 0 0 0.5rem rgba(42, 171, 0, 1);
}

#resetamount svg > *{
    color: white;
}

.short-funds{
    padding: 1rem;
    padding-left: 0;
    box-sizing: border-box;
    background: var(--gradient-blue);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inbox-wrapper{
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    align-items: center;
    color: white;
}

.inbox-wrapper svg>*{
    color: var(--theme-lightblue);
}

#wallet-wrapper{
    display: flex;
    justify-content: inherit;
    align-items: center;
    gap: 1rem;
    background: var(--theme-blue);
    box-sizing: border-box;
    padding: 0.5rem 1rem 0.5rem 1rem;
    border-radius: 0 2.5rem 2.5rem 0;
    height: fit-content;
}

#fund-options{
    display:flex;
    gap: 0.5rem;
    align-items: center;
}

#fund-options .option{
    display:flex;
    gap: 0.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.5rem;
    border-radius: 0.5rem;
    min-width: 6.4rem;
    background: rgba(255,255,255, 0.15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

#fund-options .option  svg > *{
    color: white;
}

#fund-options label{
    font-size: 1.1rem;
    font-weight: var(--fw-medium);
}

#wallet-wrapper svg > *{
    color: white;
}

#wallet-wrapper label{
    font-weight: var(--fw-medium);
    font-size: 1rem;
}


#wallet-wrapper .main-wallet{
    display: flex;
    flex-direction: column;
    margin-right:1rem;
}

#wallet-wrapper .wallet-amount{
    font-weight: var(--fw-medium);
    font-size: 1.6rem;
}

#navi-spacer{
    height: 7.2rem;
    width: 100% ;
}

#navi-menu{
    display: flex;  
    position: fixed;
    width: 100%;
    max-width: 55rem;
    margin: auto;
    bottom: 0;
    padding: 1rem 0.5rem;
    box-sizing: border-box;
    flex-wrap: nowrap;
    background: #232735;
    box-shadow: 0 -0.5rem 2rem 0.1rem rgb(86 146 255 / 34%);
    border-radius: 0;
    justify-content: space-around;
}

#navi-menu .menu-item{
    flex: 0 0 20%;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap:0.5rem;
}

#navi-menu .menu-item img{
    width: 3.2rem;
    height: auto;
    filter: brightness(0.5);
}

#navi-menu .menu-item label{
    font-size: 1rem;
    font-weight: var(--fw-medium);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.6;
}

#navi-menu .menu-item.active img{
    filter: contrast(1) brightness(1);
}

#navi-menu .menu-item.active label{
    opacity: 1;
}

.input-field{
    display: flex;
    flex-direction: column;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    transition: 0.3s;
}

.input-field.focus{
    border-bottom: 1.5px solid var(--clr-focus);
}

.input-field label{
    font-size:1.6rem;
    color: white;
    opacity: 0.5;
}

.input-field.focus label{
    color: var(--clr-focus);
}

.input-field .remark{
    display:flex;
    justify-content: flex-end;
    margin-top: 0.3rem;
}

.input-field .remark > *{
    font-size:1.4rem;
}

.inp-default{
    font-size: 1.6rem;
    padding: 0;
    margin: 1rem  0.5rem;
    background: none;
    border-radius: 0rem;
    border: none;
}

.sel-default{
    font-size: 1.6rem;
    padding: 0;
    margin: 1rem 0 0.5rem;
    background-color: transparent;
    border-radius: 0rem;
    border: none;
    box-sizing: border-box;
}

.sel-default option{
    background-color: #201c36 !important;
    border-radius: 0;
    padding: 0.5rem;
    box-sizing: border-box;
}

.sel-default:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
}

.inp-default:disabled{
    background: none;
    border: none;  
}

.inp-default::placeholder{
    color: white;
    opacity: 0.5;
    font-weight: 200;
}

.cus-input{
    display: flex;
    width: 100%;
}

.cus-input .inp-default{
    width:70%;
    border-radius: 0.5rem 0 0 0.5rem;
}

.cus-input button{
    width:30%;
    border-radius: 0 0.5rem 0.5rem 0;
}

input:focus{
    outline: none;
}

select:focus{
    outline: none;
}

.top-header{
    display: flex;
    align-items: center;
    gap:0.5rem;
    justify-content: space-between;
    background: var(--gradient-blue);
    width: 100%;
    height: 6.5rem;
    margin-bottom: 2.5rem;
}

.top-header .col{
    padding: 0.5rem;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.top-header .col-1{
    flex: 0 0 calc(20% - 0.5rem);
    box-sizing: border-box;
    padding-left: 1.5rem;
}

.top-header .col-1 svg > *{
    color: white;
}

.top-header .col-2{
    flex: 0 0 calc(60% - 0.5rem);
    margin: auto;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: var(--fw-medium);
}

.top-header .col-3{
    flex: 0 0 calc(20% - 0.5rem);
}

.top-header img{
    max-height: 75%;
}

.text-with-link{
    font-weight: var(--fw-light);
    font-size:1.6rem;
}

.text-with-link a{
    font-weight: var(--fw-semibold);
    font-size:1.6rem;
    text-decoration: underline;
}

.wrapper{
    padding:1.5rem;
}

.content-center{
    display: flex;
    justify-content: center;
}

.form-section{
    background: rgba(69, 63, 72, 0.45);
    border-radius: 0.5rem;
    margin: 1rem;
    padding:1.5rem;
}

.toggle-content{
    display: none;
}

.input-file{
    display:none;
}

.upload-label{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding:1rem 0.5rem;
}

.upload-label .txt{
    font-size:1.6rem;
    color: white;
    opacity: 0.5;
    font-weight: 200;
}

.upload-label .inp-browse{
    background: var(--clr-btn);
    color: white;
    padding:0.5rem 1.5rem;
    box-sizing: border-box;
    border-radius: 0.5rem;
    border: none;
}

/* NOTICE BOX (DEPOSIT/WIRGD) */ 
.notice-box{
    /*background: linear-gradient(135deg, rgba(253,243,29,1) 24%, rgba(252,176,69,1) 100%);*/
    background: #ffffff47;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.notice-box .content{
    z-index: 1;
    overflow: hidden;
}

.notice-box .content ul{
    transform: translateY(-1.5rem);
    animation: showNotice 0.6s forwards;
}

.notice-box svg > *{
    color: white;
}

.notice-box .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

.notice-box .top .label{
    display: flex;
    gap: 1rem;
    align-items: center;
    color: white;
    font-weight: var(--fw-medium);
    font-size: 1.4rem;
}

.notice-box .top{
    display: flex;
    gap:0.5rem;
    align-items: center;
    color: white;
}

.notice-box .top img{
    height: 1.6rem;
    width: 1.6rem;
}

.notice-box p{
    font-size:1.3rem;
    font-weight: var(--fw-medium);
    color: white;
}

.notice-box p > *{
    color: white;
}

.notice-box ul{
    margin: 1rem 0 0 0;
    padding-inline-start: 2.5rem;
}

.notice-box li{
    color: white;
}

.notice-box.minimize .content ul{
    animation: hideNotice 0.6s forwards;
}

.notice-box.minimize .svg-toggle{
    transform: rotate(180deg);
    transition: 0.6s;
}

.notice-box .svg-toggle{
    transform: rotate(0deg);
    transition: 0.6s;
}

@keyframes showNotice {
    0% {
        opacity: 0;
        transform: translateY(-1.5rem);
        height: 0;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        height: 100%;
    }
}

@keyframes hideNotice {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-15px);
        height: 0;
        margin: 0;
    }
}

.hide{
    display: none !important;
}

.popup{
    height: 100%;
    position: fixed;
    width: 100%;
    background: rgba(0,0,0,0.75);
    top: 0;
    left: 0;
    z-index: 99;
    padding: 1.5rem;
    max-width: 100vw;
    box-sizing: border-box;
    max-height: 100vh;
    max-width: 55rem;
    margin: auto;
    left: 50%;
    transform: translate(-50%);
}

.popup-container{
    position: relative;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 1rem 0.5rem rgb(0 0 0 / 70%);
}

#side-menu{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--clr-overlay-high);
    z-index: 100;
    overflow: hidden;
    max-height: 100vh;
    box-sizing: border-box;
    max-width: 55rem;
    margin: auto;
}

#side-menu .menu{
    width:85%;
    background: var(--clr-bg-cus);
    height:100%;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: showMenu 0.3s ease-in-out forwards;
}

#side-menu .menu.hiding{
    animation: hideMenu 0.3s forwards;
}

@keyframes showMenu{
    0%{
        left: -100%;
    }
    100%{
        left: 0;
    }
}

@keyframes hideMenu{
    0%{
        left: 0;
    }
    100%{
        left: -100%;
    }
}

#side-menu .top-wrapper{
    padding: 1.5rem 1rem;
    box-sizing: border-box;
    background-image: url('../img/referral-bonus-background.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#side-menu .middle-wrapper{
    overflow-y: auto;
    flex: 1;
    background: rgba(0,0,0,0.3);
}

#side-menu .bottom-wrapper{
    padding: 2.5rem 1.5rem;
    background: rgba(0,0,0,0.3);
}

#side-menu .bottom-wrapper button{
    background: rgba(0,0,0, 0.5);
    padding: 1.5rem;
}

#side-menu .menu-items{
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 1rem;
}

#side-menu .menu-item{
    margin: 0.5rem;
    padding: 1rem;
    box-sizing: border-box;
    flex: 0 0 calc(33.33% - 1rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgb(183 183 183 / 8%);
    border: 2px solid var(--clr-obj-purple);
    border-radius: 0.5rem;
    gap: 1rem;
    font-size: 1.2rem;
}

#side-menu .menu-item svg > *{
    color: var(--clr-obj-purple);
}

#side-menu .avatar{
    height: 6.4rem;
    width: 6.4rem;
    border: 1.5px solid var(--clr-purple);
    box-shadow: var(--shw-purple-solid);
    border-radius: 100%;
}

#side-menu .profile{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--clr-tbg-white-light);
    box-sizing: border-box;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

#side-menu .info{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#side-menu .username{
    font-size: 1.8rem;
    font-weight: var(--fw-semibold);
}

#side-menu .bank{
    font-size: 1.2rem;
    font-weight: var(--fw-regular);
}

#side-menu .top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

#side-menu .top svg > *{
    color: white;
}

#side-menu .referral-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--clr-tbg-white-light);
    border-radius: 0.5rem;
}

#side-menu .referral-wrapper .info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 0.5rem;
}

#side-menu .referral-code{
    font-size: 1.6rem;
    font-weight: var(--fw-semibold);
}

#copy-referral{
    padding: 0.5rem 1rem;
    background: var(--clr-bg-cus3);
    border-radius: 2.5rem;
    font-size: 1.3rem;
    font-weight: var(--fw-semibold);
}

.back-link{
    text-align: center;
    width: 100%;
    text-decoration: underline;
}

select option {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.btn-sign{
    background: var(--gradient-blue);
    padding: 1rem 2rem;
    border-radius: 2.5rem;
    font-size:1.2rem;
    box-shadow: 0 0 15px rgba(19,202,244,0.3);
}

.swiper {
    width: 100%;
    height: auto;
  }
  
  .swiper img{
      min-height:100%;
      max-height:100%;
      height:auto;
      width:100%;
  }
  
  .swiper p{
      display:none;
  }
  
  .swiper-button-prev, .swiper-button-next {
      color:white;
  }
  
  .swiper-button-prev{
      left:15px;
      
  }
  
  .swiper-button-next{
      right:15px;
  }
  
  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
      bottom:15px;
  }
  
  .swiper-pagination-bullet{
      height:10px;
      width:10px;
      background-color: black;
      opacity:1;
      
  }
  
  .swiper-pagination-bullet-active{
      opacity:1;
      background-color: var(--theme-blue);
  }
  
  :root{
      --swiper-navigation-size: 15px;
  }



@media screen and (max-width: 350px) {
    #fund-options .option svg{
        height: 20px !important;
        width: 20px !important;
    }

    #fund-options .option{
        min-width: 5rem;
    }

    #fund-options label{
        font-size: 0.8rem;
    }

    #fund-options{
        overflow:auto;
    }
  }
  

.input-field.focus label {
    color: var(--clr-cyan);
}

.form-title {
    font-size: x-large;
    padding-bottom: 0.5rem;
    margin-bottom: 2.5rem;
    text-align: center;
    border-bottom: 1px white solid;
}

.input-field.custom {
    position: relative;
}

.input-field.custom label {
    position: absolute;
    pointer-events: none;
    top: 11px;
    left: 5px;
    transition: top 0.35s ease;
}

.input-field.custom input:not(:placeholder-shown)~label,
.input-field.custom.focus label {
    top: -11px;
    font-size:1.2rem;
    font-weight: var(--fw-semibold);
    opacity: 1;
    left:0;
}

.form-section .text-with-link a {
    text-decoration: none;
    border-bottom: 1px var(--clr-cyan) solid;
}

.upload-label .inp-browse {
    background: var(--gradient-blue);
}

.input-toggle-btn {
    position: absolute;
    right: 0;
    top: 5px;
    background: var(--gradient-blue);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size:1.2rem;
    font-weight: var(--fw-medium);
}

.form-image{
    display: flex;
    justify-content: center;
}

.form-image > div{
    
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}


.form-image img{
    width:35%;
    margin: auto;
}

.input-field {
    background: var(--gradient-input-black-shadow);
}

.input-field.focus {
    background: var(--gradient-black-focus);
}

.form-section {
    background: var(--gradient-dark-blue);
}

.input-field .cus-label{
    font-size: 1.2rem;
    font-weight: var(--fw-semibold);
    opacity: 1;
}

.input-field .label-btn{
    font-size: 1.2rem;
    font-weight: var(--fw-medium);
    opacity: 1;
}

.lock-field .icon-tabler-lock{
    position: absolute;
    right: 0.5rem;
    bottom: 1rem;
}

.cus-swal-html{
    color:#b7b7b7 !important;
    margin: 0.5rem 1rem !important;
    font-size: 1.3rem !important;
}

.cus-swal-confirm{
    padding: 1rem 1.5rem !important;
    background: var(--gradient-blue) !important;
    box-shadow: none !important;
    min-width: 150px !important;
    font-size: 1.4rem !important;
}

#balance-wrapper{
    background: #1e1e1e;
    border-radius: 15px;
    padding: 5px 10px;
    border-radius: 8px;
    background-image: url('../img/theme/sign-form.png');
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 5px #4a9effb4;
    margin: 15px 10px;
}

#sign-form{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 5px;
}

#sign-form a{
    width: 50%;
    background-size: 100% 100%;
    text-shadow: none;
    max-width: 320px;
    text-align: center;
    font-size: 18px;
    background: linear-gradient(169deg, rgb(237 187 39) 0%, rgb(237 64 2) 100%);
    /* border: 2px solid white; */
    box-shadow: 0 5px 6px 2px rgb(217 106 10 / 25%);
    border-radius: 100px;
}

#balance-wrapper .information{
    display: flex;
    gap: 5px;
    padding: 10px 0;
}

#balance-box{
    width: 62%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#balance-box .title{
    font-size: 14px;
}

#balance-box .amount{
    font-size: 20px;
    margin: 5px 0;
    font-weight: 600;
}

#balance-box p, #balance-box b{
    font-size: 12px
}

#fund-options{
    width: 38%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    padding: 0 5px;
}

#fund-options a{
    padding: 8px 10px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    gap: 5px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border: 1px solid var(--clr-primary);
    text-align: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    background: var(--gradient-blue);
    box-shadow: 0 0 5px 1px rgb(0 0 0 / 35%);
}

#fund-options a img{
    width: 24px;
}

#profile-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

#profile-info .name {
    font-weight: 600;
    margin-bottom: 5px;
    font-size:18px
}

#profile-info .bank {
    font-size: 14px;
}