.grey-container{
    background: var(--text-secondary-light);
    padding: 2em;
    border-radius: 1em;
}

.side-tab{
    border-right:1px solid #ddd;
    color: var(--color-primary-alt);
    flex:2;
    padding:0.5em 0.5em;
    max-width:150px;
    font-size:0.9em;
    font-weight:600;
}

.content-tab{
    flex:5;
    padding:0 1em;
}

.content-card.user-info{
    padding-block:3em;
}

.content-card.user-info .cred-circle{
    background:var(--color-secondary);
    color: var(--color-primary-alt);
    height:2.5em;
    width:2.5em;
    font-size:2em;
    font-weight:800;
    border-radius:2em;
}

.content-card.user-info .direct-info b{
    font-size:1.2em;
}

.content-card.user-info .direct-info .drop-down-btn{
    font-size:0.9em;
}

.content-card.user-info small{
    color:var(--text-secondary);
}

.content-card.user-info .ref-code{
    flex:1;
}

.content-card.user-info .ref-code .input-box{
    width:clamp(50%, 35em, 90%);
    position:relative;
}

.content-card.user-info input{
    border:1px solid #ccc;
    border-radius: 1em;
    padding:0.5em 1em;
    width:100%;
}

.content-card.user-info .ref-code .input-box > .copy-btn{
    background:var(--color-primary-alt);
    color:#fff;
    border-radius:2em;
    height:100%;
    padding-inline:1em;
    position:absolute;
    right:0;
    top:0;
    font-size:0.8em;
}

.content-card.my-wallet h2.balance{
    font-size:2em;
    color:var(--color-primary-alt);
}


.content-card.my-wallet .balance-switch{
    background:var(--success-light);
    height:3em;
    width:clamp(30%, 24em, 100%);
    border-radius:0.75em;
    font-size:0.9em;
}

.content-card.my-wallet .balance-switch .switch{
    height:100%;
    flex:1;
}

.content-card.my-wallet .balance-switch .switch.active{
    color:#fff;
    background:var(--color-primary);
    border-radius:0.75em;
}

.content-card.my-wallet .divider{
    height:0.5px;
    width:100%;
    border-radius:1em;
    background:var(--text-secondary-light);
}

.content-card.my-wallet .btn-house{
    justify-content:right;
}

.content-card.my-wallet .btn-house .btn{
    padding:1em 7em;
    background: var(--color-primary);
    color:#fff;
    font-size:0.8em;
}

.ih-filter{
    position:relative;
    height:2.5em;
}

.ih-filter select{
    background:var(--color-primary);
    color: #fff;
    padding-left:1em;
    height:100%;
    border:0;
    border-radius:0.4em;
    width:10em;
}

.ih-filter i{
    position:absolute;
    right:5%;
    top:50%;
    transform:translateY(-50%);
    color:#fff;
    font-size:0.8em;
    pointer-events: none;
}

.investment-history .acc-statement-btn{
    border:1.5px solid var(--color-primary-alt);
    color:var(--color-primary-alt);
    padding:0.5em 0.7em;
    border-radius:0.2em;
    font-size:0.9em;
    font-weight:500;
}

.content-card{
    overflow-x:auto;
}

@media (max-width:1200px){
    .grey-container{
        flex-direction:column;
        gap:2em;
        padding:0.5em;
    }
    .grey-container .content-tab{
        font-size:0.9em;
    }

    .grey-container .side-tab{
        flex-direction:row;
        border:0;
    }

    .content-card{
        padding:1em;
    }

    .grey-container .content-card.user-info{
        flex-direction:column;
    }
}