p{
    margin-bottom: 0 !important;
    font-family: 'Jost';
}
a{
    text-decoration: none !important;
}
.min-max{
    font-size: 12px;
}
svg{
    flex-shrink: 0 !important;
}
.home-screen{
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: hidden;
    height: 100%;
    padding-bottom: 0;

}

.home-header-container{
    border-radius: 0px 0px 30px 30px;
    background: linear-gradient(222deg, #f9f9ff83 -6.54%, rgba(220, 192, 255, 0.277) 30.83%, rgba(255, 238, 251, 0.268) 70.82%, rgba(46, 64, 219, 0.10) 119.33%);
    display: flex;
    flex-direction: column;
    padding:16px;
    gap: 16px;
}

button{
    text-wrap: nowrap !important;
}

button.trans-reset{
    border: 1px solid rgba(229, 229, 229, 1) !important;
    color: rgba(47, 47, 47, 1) !important; 
    background: rgba(246, 246, 246, 1) !important;
}
.referral-message{
    border: 1px solid rgba(229, 229, 229, 1) !important;
    color: rgba(47, 47, 47, 1) !important; 
    background: rgba(246, 246, 246, 1) !important;
    border-radius: 16px;
}

.referral-message  *{
    font-family: Jost;
    font-size: 12px;
}

.link-input{
    padding: 5px !important;
    background: none !important;
    width: 90%;
    height: 20px;
    text-transform: lowercase !important;
    border: 1px solid rgba(1, 20, 181, 1);
    /* border-radius: 20px ;*/
    font-size:12px !important ; 
}
#ref_link{
    position: relative;
}
.copy-link{
    font-size: 12px;
    position: relative;
}
.copied{
    position: absolute;
    top: -20px;
    right: 12px;
    font-size: 10px;
    display: none;
}

.moni-account img{
    width: 20px;
    height: 20px;
}

.fa-pwd{
    outline: none !important;
    border: none !important;
    background: none !important;
    font-family: 'Jost';
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    margin-right: 10px;
    width: 100% !important;
    color: rgba(85, 85, 85, 1) !important;
}

.search-ref-form{
    border-radius: 15px;
    border: 1.5px solid rgba(229, 229, 229, 1);
    background: rgb(233 232 232);
    margin: 10px 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
    max-width: 500px !important;
    /* margin: auto auto; */
    align-self: center;
    width: -webkit-fill-available;
}

.search-ref-form label{
    font-size: 14px !important;
}

.search-ref-form input, .search-ref-form select{
    font-size: 13px !important;
    padding: 5px 15px !important;
}

.search-ref-form h4{
    font-family: Jost !important;
    text-align: center;
}

.search-ref-form button{
    font-size: 13px !important;
    padding: 3px !important;
}

/*  select2 custom style */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: 50% !important;
}

.hideme{
    display:none;
}
.hide-after::after {
    display: none !important;
}

span.select2{
    width: 100% !important;
    /* height: 55px; */
    border-radius: 20px;
    border: 1.5px solid rgba(221, 221, 221, 1);
    background: rgba(229, 229, 229, 1);
    padding: 8px;
    outline: none;
    font-family: Jost;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(85, 85, 85, 1);
}

 .img-flag{
    width: 24px !important;
    height: 24px !important;
}
.select2-selection{
    background: none !important;
    border: none !important;
    height: fit-content;
}

/** select2 end style **/

/*** phone number tooltip **/
.tooltip-custom {
    position: absolute;
    top: 77px;
    left: 40%;
    z-index: 1000;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: none;
    width: fit-content;
    margin: auto;
}
.tooltip-custom div {
    padding: 8px 12px;
    cursor: pointer;
}
.tooltip-custom div:hover, .frequent-numbers p:hover{
    background-color: lightgray;
}

.frequent-numbers p{
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 500 !important;
    /* text-decoration: 1.3px underline blue; */
    /* color: dodgerblue; */
    font-size: 14px;
    border-radius: 20px;
}

.frequent-numbers > p > img{
    width: 25px;
    height: 25px;
    /* border-radius: 10px; */
}

.frequent-numbers p:nth-child(even){
    background-color:rgb(235, 235, 235);
}

.frequent-numbers p:nth-child(odd){
    background-color:rgb(255, 255, 255);
}

.foneToolTip .bi-database{
    color: #394df8 ;
}

/*** end phone number tooltip **/


.screen-1{
    display: flex;
    position: relative;
    flex-direction: column;
    min-height: 100%;
    padding-bottom:100px ;
    overflow-y: scroll;
    gap: 20px;
}

.header-navbar-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.user-name-container{
    display: flex;
    align-items: center;
    gap: 4px;

}


.notification-menu-container{
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;

}

.user-name-container h1{
font-family: Jost;
font-size: 18px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0em;
text-align: left;
color: rgba(47, 47, 47, 1);
}

.home-balance-container{
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.home-balance-container p{
    margin-bottom: 0 !important;
}

.home-available{

padding: 4px 12px 4px 12px;
border-radius: 15px;
gap: 4px;
border: 1px solid rgba(229, 229, 229, 1);
background: rgba(242, 242, 242, 1);
    display: flex;
    /* width: 139px; */
    justify-content: space-between;
    align-items: center;

}

.home-available p{
font-family: Jost;
font-size: 11px;
font-weight: 700;
line-height: 18px;
letter-spacing: 0em;
text-align: left;
color: rgba(19, 19, 19, 1);
width: 100%;

}

.home-available img{
    width: 20px;
    height: 16px;

}


.figure-container{
    display: flex;
    align-items: center;
    gap: 8px;
}

.figure-container p{
font-family: Jost;
font-size: 24px;
font-weight: 700;
line-height: 32px;
letter-spacing: 0em;
text-align: left;
color: rgba(47, 47, 47, 1);
padding: 5px 15px;
transition: filter 1s;
}

.figure{
    
            overflow: hidden;
            border-radius: 8px;
            position: relative;
}

.figure-skeleton{
    width: 128px;
    height: 32px;
    background-color: #f0f0f0;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}

.fund-wallet-btn{
font-family: Jost;
font-size: 14px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
color: rgba(246, 246, 246, 1);
border: 1px solid rgba(15, 38, 235, 1);
width: 100%;
background: rgba(1, 20, 181, 1);
padding: 9px 24px;
border-radius: 10px;
}

.image-light{
    display: inline !important;
}

.image-dark{
    display: none !important;
}

.ad-container{
    width: 100%;
}

.ad{
    width: 100%;
    height: auto;
}

.action-container{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-container h3{
    padding:0 16px;
font-family: Kanit;
font-size: 18px;
font-weight: 600;
line-height: 26px;
letter-spacing: 0em;
text-align: left;
color: rgba(19, 19, 19, 1);
}

.section-header{
font-family: Kanit;
font-size: 18px;
font-weight: 600;
line-height: 26px;
letter-spacing: 0em;
text-align: left;
color: rgba(19, 19, 19, 1);
}


.action-item-container{
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: scroll;
    flex-shrink: 1;
    padding:0 16px ;

}
.action-item-container::-webkit-scrollbar{
    opacity: 0;    
}

.action-item{
    display: flex;
    gap: 8px;
    padding: 8px;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    border-radius: 15px;
}

.action-item p{
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(19, 19, 19, 1);

}

.action-1{
    border: 1.5px solid rgba(206, 234, 228, 1);
    background-color: rgba(227, 245, 241, 1);
}

.action-2{
    border: 1.5px solid rgba(218, 222, 255, 1);
    background-color: rgba(231, 233, 255, 1);
}


.transaction-container{
    display: flex;
    flex-direction: column;
    gap:8px;
    padding:0 16px;

}

.transaction-items-container{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}


.transaction-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.transaction-header p{
font-family: Jost;
font-size: 14px;
font-weight: 700;
line-height: 18px;
letter-spacing: 0em;
text-align: left;
color: rgba(1, 20, 181, 1);
margin-bottom: 0 !important;
}



.transaction{
    padding: 8px;
    border: 1px solid rgba(229, 229, 229, 1);
    display: flex;
    flex-direction: row;
    gap: 8px;
    border-radius: 15px;
    background: rgba(242, 242, 242, 1);
}


.transaction-skeleton{
    width: 100%;
    border-radius: 15px;
    background: rgba(242, 242, 242, 1);
    height: 64px;
    overflow: hidden;
    position: relative;
}

.transaction-image{
    width: 48px;
    height: 48px;
    border-radius: 15px;
}

.transaction-desc-container{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.transaction-desc-container > div{
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.desc-name{
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(47, 47, 47, 1);
text-overflow: hidden;
}

.desc-date{
font-family: Jost;
font-size: 10px;
font-weight: 500;
line-height: 18px;
letter-spacing: 0em;
text-align: left;
color: rgba(85, 85, 85, 1);

}

.desc-price{
font-family: Jost;
font-size: 14px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(47, 47, 47, 1);
}


.desc-btn{
    width: 80px;
    padding: 2px;
    border-radius: 7.5px;
    color: rgba(246, 246, 246, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
font-family: Jost;
font-size: 10px;
font-weight: 700;
line-height: 18px;
letter-spacing: 0em;
text-align: left;

}

.success-btn{
    border: 1px solid rgba(33, 172, 108, 1);
    background: rgba(25, 135, 84, 1);
}
.warning-btn{
    border: 1px solid #ffc008;
    background: #e2a719;
}
.danger-btn{
    border: 1px solid rgba(241, 73, 89, 1);
    background: rgba(241, 73, 89, 1);
}

.primary-btn{
    border: 1px solid rgba(63, 75, 170, 1);
    background: rgba(38, 49, 134, 1);
}

.nav-overall-container{
    position: fixed;
    width: 100%;
    bottom: 16px;
    display: none;
}

.navigation-container{
    display: flex;
    flex-direction: row;
    padding: 16px;
    margin: 0 16px;
    justify-content: space-between;
    box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.3);
border-radius: 30px;
background: white;

}

.nav-item{
    display: flex;
    padding:4px 8px;
    border-radius: 15px;
    gap: 2px;
    align-items: center;
    justify-content: center;
    min-width: 70px;
}

.nav-item p{
    display: none;
font-family: Jost;
font-size: 10px;
font-weight: 700;
line-height: 18px;
letter-spacing: 0em;
text-align: left;
color: rgba(1, 20, 181, 1);
}

.nav-item-active {
    display: flex;
    padding:4px 8px;
    border-radius: 15px;
    gap: 2px;
    background: rgba(208, 213, 255, 1);
    align-items: center;
}


.nav-item-active p{
    display: flex !important;
}

.nav-hr{
    min-height: 100%;
    width: 0.5px;
    background: rgba(1, 20, 181, 1);
}



.back-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.profile-screen{
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    height: 100%;
    padding-bottom: 0;


}

.notification-screen{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fund-screen, .moni-screen, .vfd-screen,.recent-screen,.transaction-detail-screen,.buy-data-screen,.screen-temp,.notification-screen{
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
}

.profile-content{
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 16px;
}


.screen-title{
font-family: Kanit;
font-size: 18px;
font-weight: 600;
letter-spacing: 0em;
text-align: left;
color: rgba(19, 19, 19, 1);
}


.profile-card-container{
    display: flex;
    flex-direction: row;
    gap: 16px;

}

.profile-card{
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    border: 1px solid rgba(229, 229, 229, 1);
    background: rgba(242, 242, 242, 1);
    padding: 8px 24px;
    border-radius: 15px;
    width: 100%;
}


.profile-card-skeleton{
    width: 100%;
    height: 64px;
    overflow: hidden;
    position: relative;
    border-radius: 15px;
    background: #f0f0f0;
}

.ref-skeleton{
    width: 100%;
    height: 24px;
    overflow: hidden;
    position: relative;
    border-radius: 15px;
    background: #f0f0f0;
}




.profile-card p{
    font-family: Kanit;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(19, 19, 19, 1);
}

.profile-card h4{
    font-family: Jost;
font-size: 10px;
font-weight: 700;
line-height: 18px;
letter-spacing: 0em;
text-align: left;
color: rgba(85, 85, 85, 1);

}


.bio-container{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bio-container h4{
    font-family: Jost;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(19, 19, 19, 1);
}


.input-box-view{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.input-box-view-skeleton{
    display: flex;
    flex-direction: column;
    gap: 4px;
}



.label-skeleton{
    width: 71px;
            height: 22px;
            background-color: #f0f0f0;
            overflow: hidden;
            border-radius: 8px;
            position: relative;
}

.input-skeleton{
    width: 100%;
    height: 40px;
    background-color: #f0f0f0;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}
.input-box-view label {
font-family: Jost;
font-size: 14px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(19, 19, 19, 1);
}

.input-box-view input{
    outline: none;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 15px;
    background: rgba(242, 242, 242, 1);
    padding: 8px 16px;
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
/* color: rgba(85, 85, 85, 1); */
    
}


.input-box-view input::placeholder{
    font-family: Jost;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(85, 85, 85, 1);
}

.profile-btn-container{
    display: flex;
    flex-direction: row;
    gap: 16px;
}


.verify-btn{
    border: 1px solid rgba(10, 183, 140, 1);
 
padding: 9px 24px;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
font-family: Jost;
font-size: 14px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(246, 246, 246, 1);
background: rgba(10, 183, 140, 1);
width: 100%;
}


.update-btn{
    border: 1px solid rgba(15, 38, 235, 1); 
padding: 9px 24px;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
font-family: Jost;
font-size: 14px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(246, 246, 246, 1);
background: rgba(1, 20, 181, 1);
width: 100%;
}


.bvn-warning{
    border: 1px solid rgba(255, 235, 169, 1);
    background-color: rgba(255, 244, 207, 1);
    border-radius: 15px;
    padding: 8px;
font-family: Jost;
font-size: 10px;
font-weight: 700;
line-height: 18px;
letter-spacing: 0em;
text-align: center;
color: rgba(19, 19, 19, 1);

}


.bvn-skeleton{
    width: 100%;
    border-radius: 15px;
    background: rgba(242, 242, 242, 1);
    height: 94px;
    overflow: hidden;
    position: relative;
}


.scroll-overlay{
    height: 100%;
    width: 100%;
    padding:16px;
    display: flex;
    z-index: 99;
    position: fixed;
    overflow-y: scroll;
    backdrop-filter: blur(8px);
    transform: scale(0);
    opacity: 0;
    flex-direction: column;
    transition: all 100ms allow-discrete;

}

.scroll-con{
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 8px;
    width: 100%;
}

.scroll-con > .close-overlay  {
    display: flex;
    justify-content: flex-end;

}

.bar-container{
        width: 100%;
padding: 8px;
border-radius: 16px;
gap: 8px;
display: flex;
flex-direction: column;
border: 1px solid rgba(229, 229, 229, 1);
background: rgba(246, 246, 246, 1);
}
.bar-container > h4{
font-family: Jost;
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: rgba(19, 19, 19, 1);
}
.bar-item{
    display: flex;
    flex-direction: row;
    gap: 4px;
    padding: 8px 16px;
    align-items: center;
}

.bar-item img {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
}
/* .bar-item > *{
    font-size: 14px !important;
} */

.bar-item > p {
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(47, 47, 47, 1);
margin-bottom: 0 !important;

}

.notification-screen-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}




.notification-item-container{
    padding: 8px;
    border-radius: 15px;
    border: 1px solid rgba(229, 229, 229, 1);
    background: rgba(242, 242, 242, 1);
    display: flex;
    gap: 4px;
    flex-direction: row;
}


.notification-items-container{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notification-desc-container{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mark{
font-family: Jost;
font-size: 10px;
font-weight: 700;
line-height: 18px;
letter-spacing: 0em;
text-align: left;
color: rgba(85, 85, 85, 1);

}


.notification-message{
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
width: 100%;
color: rgba(19, 19, 19, 1);
}

.notification-screen .reader{
    height: 8px;
    width: 8px;
    border-radius: 4px;
    background: rgba(220, 53, 69, 1);
    visibility: hidden;
    flex-shrink: 0;
}
.reader{
    height: 8px;
    width: 8px;
    border-radius: 4px;
    background: rgba(220, 53, 69, 1);
    visibility: hidden;
    flex-shrink: 0;
}

.new{
    visibility: visible !important;
}

.notification-date{
font-family: Jost;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(115, 115, 115, 1);

}

.notification-items-empty{
    height: 60vh;
    width: 100%;
    /* display: none; */
    justify-content: center;
    align-items: center;
}

.empty-container{
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}


.empty-container p{
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: center;
color: rgba(47, 47, 47, 1);
padding: 0 4px;
}


.notification-actions{
    display: flex;
    justify-content: space-between;
    margin: 16px 0;
}



.notification-actions .red{
padding: 8px;
border-radius: 10px;
border: 1px solid rgba(220, 53, 69, 1);
gap: 4px;
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
background: rgba(249, 208, 208, 1);
color: rgba(224, 67, 67, 1);
}

.notification-actions .gray{
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(229, 229, 229, 1);
    gap: 4px;
    font-family: Jost;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(85, 85, 85, 1);
}




.payment-options-container{
    display: flex;
    flex-direction: column;
    gap: 16px;

}

.payment-options-container > p:first-child {
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(47, 47, 47, 1);
}

.option-container{
    display: flex;
    gap: 4px;
padding: 8px;
border-radius: 15px;
border: 1px solid rgba(229, 229, 229, 1);
background: rgba(236, 236, 236, 1);
}

.option-container img{
    height: 45px;
    width: 45px;
    border-radius: 10px;
}

.option-desc-container{
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* align-self: center; */
}

.option-desc-container h4{
font-family: Jost;
font-size: 14px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(47, 47, 47, 1);

}


.option-desc-container p{
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(85, 85, 85, 1);
}

 .note{
font-family: Jost;
font-size: 10px;
font-weight: 500;
line-height: 18px;
letter-spacing: 0em;
text-align: center ;
color: rgba(115, 115, 115, 1);

}

.moni-container{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.moni-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.moni-header > p{
font-family: Jost;
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: rgba(47, 47, 47, 1);
}

.moni-accounts-container{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.moni-accounts-container > div:nth-child(odd){
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-radius: 10px;
    background-color: rgba(236, 236, 236, 1);
    align-items: center;
}

.moni-accounts-container > div:nth-child(even){
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-radius: 10px;
    background-color: rgba(242, 242, 242, 1);
    align-items: center;
}

.moni-account .key{
font-family: Jost;
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: rgba(85, 85, 85, 1);
word-break: break-all;


}

.moni-account .value{
font-family: Jost;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
color: rgba(85, 85, 85, 1);

}


.moni-number{
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}


.generate-btn{
font-family: Jost;
font-size: 14px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
outline: none;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
border: 1.5px solid rgba(193, 237, 226, 1);
color: rgba(246, 246, 246, 1);
background: rgba(14, 155, 120, 1);
padding: 8px 24px;
}


.search-input-container{
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: space-between;
}

.search-input-container-sk{
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: space-between;
}


.input-box-container{
    padding: 8px 16px;
    display: flex;
    gap: 4px;
    border-radius: 15px;
    border: 1px solid rgba(115, 115, 115, 1);
    color: rgba(115, 115, 115, 1);
    align-items: center;
    background: #F6F6F6;
    width: 100%;
}

.input-box-container input , .input-box-container input::placeholder{
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(85, 85, 85, 1);
background: none;
outline: none !important;
border: none;
width: 100%;
}


.filter-icon{
    display: flex;
padding: 11px;
justify-content: center;
flex-direction: column;
align-items: center;
border-radius: 15px;
border: 1px solid var(--WEB-WHIT, #E5E5E5);
background: var(--WEB-WHITE-4, #F2F2F2);
position: relative;
}

.filter-icon >svg{
    height: 18px;
    width: 18px;
}

.filter-menu-container{
    position: absolute;
    width: 150px;
    height: 207px;
   right: 0;
    align-items: flex-start;
    top: 100%;
    display: flex;
    z-index: 12;
    display: none;
    
}

.filter-icon-skeleton{
    height: 40px;
    width: 50px;
}

.filter-menu-container > svg{
   
    position: absolute;
    right: 0;
    z-index: -1;
    height: 100%;
    
}


.filter-menu {
    font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(85, 85, 85, 1);
padding: 4px 8px;
}

.filter-list{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding:16px 8px;
}

.filter-transaction-container{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-transaction-container-sk{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-transaction-container  > p{
font-family: Jost;
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: rgba(85, 85, 85, 1);

}


.transaction-detail-container{
    display: flex;
    flex-direction: row;
    flex-direction: column;
    gap: 8px;
}


.transaction-detail-container .key-value-container:nth-child(odd){
    padding: 8px;
    border-radius: 10px;
    gap: 3px;
    background: rgba(236, 236, 236, 1);
    display: flex;
}

.transaction-detail-container .key-value-container:nth-child(even){
    padding: 8px;
    border-radius: 10px;
    gap: 3px;
    background: rgba(242, 242, 242, 1);
    display: flex;
}

.key-value-container h5{
font-family: Jost;
font-size: 14px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(47, 47, 47, 1);

}


.key-value-container p{
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(85, 85, 85, 1);

}


.buy-form-container{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sub-input-container{
    display: flex;
    gap: 8px;
    flex-direction: column;
}

.sub-input-container-skeleton{
    display: flex;
    gap: 8px;
    flex-direction: column;
}

.img-select-skeleton{
    width: 80px;
    height: 80px;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background: #f0f0f0;
}


.sub-end-container{
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.sub-input-container label{
font-family: Jost;
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #2F2F2F;

}


.sub-selector{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    gap: 4px;
    border-radius: 15px;
    border: 1px solid rgba(229, 229, 229, 1);
    background: #F2F2F2;
}

.sub-selector img{
    width: 25px !important;
    height: 25px !important;
}


.sub-end{

padding: 8px 16px 8px 16px;
border-radius: 15px;
background: #F2F2F2;
border: 1px solid rgba(229, 229, 229, 1);
color: #555;
font-family: Jost;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
width: 100%;
outline: none;
display: flex;
align-items: center;
}



.prefer-image-container span {
    padding: 5px;
    display: block;
    position: relative;
    cursor: pointer;
    text-align: center;
  }
  
  .prefer-image-container span:hover {
      opacity: 0.89
  }
  
  .prefer-image-container span[data-available='false'] {
      opacity: 0.5;
      cursor: not-allowed;
  }
  
  
  .prefer-image-container span:before {
    background-color: none;
    color: white;
    content: " ";
    display: block;
    border-radius: 50%;
    position: absolute;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    transition-duration: 0.4s;
    transform: scale(0);
    z-index: 9;
  }
  
  .prefer-image-container span:after {
      background-color: rgba(200,0,0, 0.8);
    color: white;
    content: attr(data-discount)"%";
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -2px;
    right: -2px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 10px;
    z-index: 9;
  }
  
  
  .prefer-image-container span img {
    
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
  }
  
  span.selected {
    border-color: #ddd;
  }
  
  span.selected:before {
    content: "✓";
    background-color: rgba(120, 120, 120, .8);
    transform: scale(1);
  }
  
  span.selected img {
    transform: scale(0.9);
    box-shadow: 0 0 5px #333;
    z-index: -1;
  }



.prefer-container{
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: space-around;
    overflow-x: scroll;
    /* overflow-x: scroll; */
}

.prefer-container-elect{
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap;
    height: 86px;
    overflow: hidden;
    transition: height 400ms ease-in-out;
}

.prefer-container img, .prefer-container-elect img{
    flex-shrink: 0;
    flex-grow: 0;
    height: 70px;
    width: 70px;
}

.sub-input-header{
    display: flex;
    justify-content: space-between;
}

.view-all-btn{
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 1px 8px;
    background: rgba(242, 242, 242, 1);
    border-radius: 7.5px;
    align-items: center;
}

.view-all-btn p {
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(85, 85, 85, 1);
}

.sub-note{
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(115, 115, 115, 1);
}

.charge-note{
    color: rgba(115, 115, 115, 1);
font-family: Jost;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: left;

}



.skeleton-animation {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, #e0e0e0, transparent);
    animation: loading 1.5s infinite;

}

@keyframes loading {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.clip-container{
    display: flex;
    flex-direction: row;
    gap: 8px;
position: absolute;
padding: 8px 16px 8px 8px;
align-items: center;
gap: 4px;
border-radius: 15px;
border: 1px solid var(--WEB-WHITE-2, #E5E5E5);
background: var(--WEB-WHITE-4, #F2F2F2);
bottom: -100px;
align-self: center;
transition: all 1s ease-in-out;
}



.clip-container p{
    color: var(--WEB-BLACK-3, #555);
        font-family: Jost;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px; /* 157.143% */
    text-transform: capitalize;
}

@media only screen and (min-width: 600px) {
    .tooltip-custom{
        top: 93px;
    }
    
    .fund-wallet-btn{
        font-family: Jost;
        font-size: 14px;
        font-weight: 700;
        line-height: 22px;
        letter-spacing: 0em;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: rgba(246, 246, 246, 1);
        border: 1px solid rgba(15, 38, 235, 1);
        width: 100%;
        background: rgba(1, 20, 181, 1);
        padding: 16px 24px;
        border-radius: 10px;
        width: 40%;
        align-self: center;
        }
        
    .ad-container{
        width: 60% !important;
        justify-content: center;
        display: flex;
        align-self: center;
    }


    .action-item-container{
      
        justify-content: center;
    }

    svg{
        transform: scale(1.1);
    }

    .transaction-header > .open-recent{
        font-size: 16px;
        margin-top: 24px;
    }

    .transaction-container{
        padding: 0 5%;

        gap: 18px;
    }
    
    .home-screen .header-navbar-container{
        padding:  3%;
    }

    .home-header-container{
        gap: 24px;
    }

    .action-container{
        padding: 0 3%;
    }
    .fund-screen, .moni-screen, .vfd-screen,.recent-screen,.transaction-detail-screen,.buy-data-screen,.screen-temp, .notification-screen,  .profile-content{
        gap: 24px;
        /* overflow-y: hidden; */
    }

     .profile-content{
        gap: 24px;
        padding:   5% !important;
    }


.input-box-view input{
    outline: none;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 15px;
    background: rgba(242, 242, 242, 1);
    padding: 16px 16px;
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
/* color: rgba(85, 85, 85, 1); */
    
}   

.verify-btn,.update-btn{
padding: 16px 24px;
;
}

.profile-card{
    padding: 16px 24px;
}

.transaction{
    padding: 16px;
}

.action-item{
    padding: 16px;
}

.bvn-warning{
    padding: 16px;
}

.menu-overlay .scroll-con{
    width: 40%;
    align-self: flex-end;
}

.input-box-container{
    padding: 16px 24px;
}


.filter-icon{
    padding: 16px;
    flex-shrink: 0;
}

.notification-item-container{
    padding: 16px 24px;
}

.sub-selector{
    padding: 16px;
}

.sub-end{
    padding: 16px 24px;
}

.back-icon, .transaction-detail-screen .back-container + svg, .header-navbar-container svg, .notification-screen-header svg{
    height: 45px;
    width: 45px;
}

.option-container{
    padding: 16px;
}

.moni-accounts-container > div{
    padding: 16px !important;
}

.generate-btn {
    padding: 16px 24px;
}

.prefer-container img , .prefer-container-elect img{
    height: 100px;
    width: 100px;
}

.prefer-container-elect{
    height: 100px;
}

.bar-container{
    padding: 16px;
}
.transaction-detail-container .key-value-container {
    padding: 16px !important;
}

.transaction-detail-screen > .overlay-btn-container > button {
    padding: 16px 24px;
}

.nav-overall-container{
    padding: 2%;
}

.nav-item p{
    font-size: 15px;
}

.nav-item img{
    width: 35px;
}

.search-ref-form button {
    font-size: 18px !important;
    padding: 8px !important;
}

.note{
    font-size: 12px;
}

.home-available p{
    font-size: 14px;
}
.desc-date{
    font-size: 12px;
}

.desc-name{
    font-size: 17px;
}

.desc-price{
    font-size: 15px;
}

.desc-btn{
    font-size: 12px;
}

.action-item p{
    font-size: 16px;
}


}


@media (prefers-color-scheme: dark){

    .home-header-container{
        background: linear-gradient(222.04deg, #141414 -6.54%, rgba(37, 25, 53, 0.545313) 30.83%, rgba(73, 40, 66, 0.414062) 70.82%, rgba(10, 15, 62, 0.1) 119.33%);
        /* opacity: 0.5; */
    }

    .header-navbar-container svg > rect:nth-child(odd), .close-overlay svg > rect:nth-child(odd), svg.back-icon > rect:nth-child(odd),
    svg.close-overlay > rect:nth-child(odd), .notification-menu-container svg > rect:nth-child(odd){
        fill: #2F2F2F !important;
    }
    .header-navbar-container svg > rect:nth-child(even), .close-overlay svg > rect:nth-child(even), svg.back-icon > rect:nth-child(even),
    svg.close-overlay > rect:nth-child(even), .notification-menu-container svg > rect:nth-child(even){
        stroke: #555555 !important;
    }
    .header-navbar-container svg path, .close-overlay svg > path, svg.close-overlay > path, .notification-menu-container svg > path{
        /* stroke: #F6F6F6 !important; */
        fill: #F6F6F6 !important;        
    }
    svg.back-icon path, .moni-account svg > path{
        stroke: #F6F6F6 !important;
        fill: none !important;
    }

    .user-name-container h1, .figure-container .bi, .desc-name, .desc-price, .figure-container p, .empty-container p,
    .profile-card h4, .bar-item p, .menu-overlay .bi, .overlay-btn-container .btn-plan, .sub-input-container label,
    .payment-options-container > p:first-child, .option-desc-container h4, .moni-header p, .key-value-container h5,
    .sub-input-container p, .currency span{
        color: rgba(229, 229, 229, 1) !important;
    }

    .home-available, .transaction, .profile-card, .bar-container, .attempts, .sub-end, .sub-selector, .search-ref-form,
    span.select2, .select2-dropdown{
        background: rgba(47, 47, 47, 1) !important;
        border: 1px solid rgba(85, 85, 85, 1) !important;
    }

    .home-available p, .section-header, .action-item p, .desc-date, .profile-card p, .bio-container h4, .note,
    .input-box-view label, .bar-container h4, .attempts p, .attempts h4, .screen-title, .option-desc-container p,
    button.trans-reset, .select2-results__option--selectable span, .select2-results__option span, .select2-results__option{
        color: rgba(246, 246, 246, 1) !important;
    }
    .figure-skeleton, .transaction-skeleton, .profile-card-skeleton, .label-skeleton, .input-skeleton,
    .img-select-skeleton{
        background: rgba(47, 47, 47, 1) !important;
    }
    .skeleton-animation{
        background: linear-gradient(90deg, #3A3A3A 0%, #747474 16.67%, #3A3A3A 69.27%);
    }

    .fund-wallet-btn, .primary-btn, .update-btn, .overlay-btn-container .btn-main{
        background: var(--BLU-07, rgba(65, 84, 241, 1));
        border: 1px solid var(--BLU-00, rgba(36, 59, 253, 1));
    }
    .image-light{
        display: none !important;
    }
    
    .image-dark{
        display: inline !important;
    }

    .action-1{
        background: var(--GRN-02, rgba(9, 18, 14, 1));
        border: 1.5px solid var(--GRN-00, rgba(0, 32, 17, 1))
    }
    .action-2{
        background: var(--BLU-06, rgba(11, 12, 21, 1));
        border: 1.5px solid var(--BLU-02, rgba(0, 3, 24, 1))
    }
    .action-item img{
        width: 32px !important;
        height: 32px !important;
    }
    .transaction-header p{
        color: var(--BLU-07, rgba(65, 84, 241, 1));
    }
    .navigation-container{
        background: rgba(19, 19, 19, 1);
        box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.3);
    }
    .nav-item p, p.reload-ajax{
        color: var(--BLU-08, rgba(97, 114, 254, 1)) !important;
    }
    .nav-item-active{
        background: var(--BLU-02, rgba(0, 3, 24, 1));
    }
    .nav-hr{
        background: var(--BLU-08, rgba(97, 114, 254, 1));
    }

    .success-btn, .generate-btn{
        background: var(--GRN-04, rgba(0, 176, 133, 1));
        border: 1px solid var(--GRN-05, rgba(2, 159, 121, 1))
    }

    .danger-btn, .overlay-btn-container .btn-main-danger{
        background: var(--RED-02, rgba(244, 45, 64, 1));
        border: 1px solid var(--RED-03, rgba(231, 32, 51, 1))
    }

    .input-box-view input, button.trans-reset {
        background: var(--BLK-03, rgba(65, 65, 65, 1)) !important;
        border: 1px solid var(--BLK-02, rgba(89, 89, 89, 1)) !important;
    }
    .input-box-view input, .input-box-view input::placeholder, .moni-account .key, .moni-account .value,
    .key-value-container p, .sub-end, .fa-pwd, .show-hide .bi, .transaction p, .moni-account p,
    .select2-container--default .select2-selection--single .select2-selection__rendered{
        color: rgba(221, 221, 221, 1) !important;
    }

    .bar-item img, .open-exampin img{
        filter: invert(1);
    }

    .logout-opener img, .dashboard-icon{
        filter: none !important;
    }

    .overlay-btn-container .btn-plan, .option-container{
        background: var(--BLK-01, rgba(75, 75, 75, 1)) !important;
        border: 1px solid var(--BLK-02, rgba(89, 89, 89, 1)) !important;
    }

    .home-notification-overlay hr{
        border-color: #F6F6F6 !important;
    }

    .moni-accounts-container > div:nth-child(odd), .transaction-detail-container .key-value-container:nth-child(odd), .frequent-numbers p:nth-child(odd){
        background: var(--BLK-01, rgba(65, 65, 65, 1)) !important;
    }
    .moni-accounts-container > div:nth-child(even), .transaction-detail-container .key-value-container:nth-child(even), .frequent-numbers p:nth-child(even){
        background: var(--BLK-01, rgba(75, 75, 75, 1)) !important;
    }
    .foneToolTip .bi-database{
        color: #7281ff !important;
    }
    
    .select2-container--default .select2-search--dropdown .select2-search__field{
        /* outline: none !important; */
        outline: rgba(89, 89, 89, 1) !important;
        background-color: transparent !important;
        color: rgba(229, 229, 229, 1) !important;
    }
    .select2-results__option.select2-results__message{
        color: rgba(229, 229, 229, 1) !important;
    }    






}