.container {
    margin-left: 5%;
    margin-top: 10%;
}
body {
    background: #0B0E14;
    color:white;
    font-family: Arial, sans-serif;
}
.profile {
    display:flex;
    align-items:center;
    gap:15px;
}

.profile img {
    width:60px;
    height:60px;
    border-radius:50%;
}

.avatar {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
}
.account-type {
    color:#0075FF;
    font-size:14px;
    font-weight:600;
}


.username {
    font-size:25px;
    font-weight:700;
}


.telegram {
    margin-top:8px;
    display:inline-block;
    background:#063B32;
    color:#00E676;
    padding:5px 12px;
    border-radius:15px;
    font-size:13px;
}


.balance-card{

    background:#151922;
    border-radius:20px;
    border:1px solid #262C38;

}

.balance {

    font-size: 250%;
}

.line {
    height: 1px;
    background-color: #2D2F36;
    margin-bottom: 5%;
}
.btn-filter{

    background:#20232c;
    color:#8e95a5;
    border:1px solid #2e323c;

}

.btn-filter:hover{

    background:#2b2f38;
    color:white;

}

.btn-filter.active{

    background:#0075FF;
    color:white;
    border-color:#0075FF;

}
canvas{

    margin-top:25px;
    height:180px !important;

}
.inicio {
    color: #61646D;
    font-size: 90%;
}
.ahora {
    color: #61646D;
    font-size: 90%;
    text-align: right;
}
.container-right {
    margin-left:5%;
    margin-top:5%;
    margin-right:5%;
}
.operation{

    background:#151922;
    border:1px solid #262C38;
    border-radius:16px;

}

.icon{

    width:48px;
    height:48px;

    border-radius:12px;

    background:#182438;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#00C3FF;

}
.operation123 {
    color: white
}

.deposit-modal{
    background:#1d1d24;
    border:1px solid #32323b;
    border-radius:18px;
    color:white;
}

.modal-subtitle{
    color:#0075FF;
    font-weight:700;
    font-size:18px;
}

.modal-title{
    font-size:40px;
    font-weight:700;
    margin-top:5px;
}

.btn-close-custom{
    width:48px;
    height:48px;
    border-radius:12px;
    border:1px solid #3b3b44;
    background:#202028;
    color:white;
    font-size:22px;
}

.amount-input{
    margin-top:10px;
    height:64px;
    border:1px solid #3b3b44;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    background:#121216;
}

.amount-input input{
    width:80%;
    background:none;
    border:none;
    outline:none;
    color:white;
    font-size:34px;
    font-weight:600;
    text-align:left;
}

.amount-input span{
    color:white;
    font-size:26px;
    font-weight:700;
}

.deposit-info{
    margin-top:18px;
    color:#8d8d98;
    font-size:16px;
}

.continue-btn{
    margin-top:25px;
    height:58px;
    background:linear-gradient(
        135deg,
        #0075FF,
        #00C3FF
    );;
    color:white;
    border:none;
    border-radius:12px;
    font-size:20px;
    font-weight:600;
}

.continue-btn:disabled{
    opacity:.45;
}

.page{
    display:none;
}

.page.active{
    display:block;
}
.page{
    display:none;
}

.page.active{
    display:block;
}

.deposit-header{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;

}

.back-btn{

    background:none;
    border:none;
    color:white;
    font-size:20px;
    font-weight:600;

}

.back-btn i{

    margin-right:10px;

}

.timer-box{

    background:#20232c;
    padding:10px 16px;
    border-radius:12px;
    color:white;
    font-weight:700;

}

.payment-card{

    background:#151922;
    border-radius:20px;
    padding:25px;
    border:1px solid #262C38;
}

.section-title{

    color:#0075FF;
    font-size:15px;
    font-weight:700;

}

.amount-title{

    margin-top:15px;
    font-size:30px;
    font-weight:700;

}

.payment-amount{

    margin-top:20px;
    font-size:50px;
    font-weight:700;
    color:white;

}

.payment-text{

    margin-top:20px;
    color:#8d8d98;

}

.bank-title{

    margin-bottom:25px;

}

.payment-row{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
    border-bottom:1px solid #2d2f36;

}

.payment-row:last-child{

    border-bottom:none;

}

.payment-row small{

    color:#7b7f89;

}

.payment-row h5{

    margin-top:5px;
    color:white;

}

.copy-btn{

    width:45px;
    height:45px;

    border:none;
    border-radius:12px;

    background:#2b2d35;

    color:#0075FF;

}
.warning-box{

    display:flex;
    align-items:flex-start;
    gap:12px;

    background:#2a2417;
    border:1px solid #4a3e1c;

    border-radius:14px;

    padding:18px;

    color:#FFB020;

    font-size:15px;

    line-height:1.5;

}

.warning-box i{

    color:#f5c542;
    font-size:18px;
    margin-top:2px;

}

.paid-btn{

    height:56px;

    background:linear-gradient(
        135deg,
        #0075FF,
        #00C3FF
    );
    border:none;

    border-radius:14px;

    color:white;

    font-size:20px;
    font-weight:700;

}

.paid-btn:hover{

    background:#ffd02a;

}

.copy-details-btn{

    height:56px;

    background:transparent;

    border:1px solid #30333d;

    border-radius:14px;

    color:white;

    font-size:18px;
    font-weight:600;

}

.copy-details-btn:hover{

    background:#20232c;
    color:white;

}

.custom-modal{
    background:#1b1d23;
    color:#fff;
    border:1px solid #343841;
    border-radius:18px;
}

.custom-modal .modal-header{
    padding:24px 24px 10px;
}

.custom-modal .modal-body{
    padding:0 24px;
}

.custom-modal .modal-footer{
    padding:20px 24px 24px;
}

.warning-icon{
    width:48px;
    height:48px;
    background:#3a3423;
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.warning-icon i{
    color:#FFD43B;
    font-size:24px;
}

.custom-modal .modal-title{
    font-size:34px;
}

.modal-text{
    color:#b4b6bb;
    font-size:19px;
    line-height:1.5;
}

.btn-warning{
    background:linear-gradient(
        135deg,
        #0075FF,
        #00C3FF
    );
    border:none;
    color:white;
    border-radius:12px;
    font-size:20px;
}

.btn-warning:hover{
    background:#f6ca29;
}
.text-warning {
    color:#0075FF!important;
}
.text-success {
    color:#00C087!important;
}
.amount-input{
    display:flex;
    align-items:center;
}

.amount-input input{
    flex:1;
}

.max-btn{

    margin-left:15px;

    background:#0075FF;

    color:white;

    border:none;

    border-radius:10px;

    padding:10px 18px;

    font-weight:700;

    cursor:pointer;

}

.withdraw-input {
    position: relative;
    margin-top: 10px;
}

.withdraw-input input {
    width: 100%;
    height: 55px;

    background:#121216;
    border:1px solid #3b3b44;
    border-radius:14px;

    color:white;
    font-size:22px;
    padding-right:70px;
}

.withdraw-input input:focus {
    background:#121216;
    color:white;
    border-color:#0075FF;
    box-shadow:none;
}

.withdraw-input span {

    position:absolute;

    right:20px;
    top:50%;
    transform:translateY(-50%);

    color:#0075FF;
    font-size:16px;
    font-weight:700;

    cursor:pointer;
}

.withdraw-input span:hover {
    opacity:.7;
}
.custom-input {

    height:64px;

    border:1px solid #3b3b44;
    border-radius:14px;

    display:flex;
    align-items:center;

    padding:0 20px;

    background:#121216;

}


.custom-input input {

    width:100%;

    background:none;

    border:none;

    outline:none;

    color:white;

    font-size:20px;

    font-weight:600;

}


.custom-input input::placeholder {

    color:#666b78;

}


.custom-input:focus-within {

    border-color:#0075FF;

}
.max-withdraw{
    margin-top:8px;
    font-size:13px;
    color:#7B7F89;
    letter-spacing:0.2px;
}

.max-withdraw span{
    color:#8F98A8;
    font-weight:600;
}