@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&display=swap');
:root{
    --main-color:#1b2c3c;
    --main-btn:#f49413;
    --text-color:#060a1d;
    --site-light:#eeeeee;
    --site-white:#ffffff;
    --body-bg:#f2f0fa;
    --fixed-bottom-bg:#020d45;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 90%;
    scroll-behavior: smooth;
}
body{
    color: var(--text-color) !important;
    background-color: var(--body-bg) !important;
    font-family: 'Assistant', sans-serif;
}
.top-notification{
    font-size: 1.5rem;
}
.top-badge{
    font-size: 0.9rem !important;
}
.site-text-dark{
    color: var(--text-color);
}
.site-text-warning{
    color: var(--main-btn);
}
.btn,.rounded,.card{
    border-radius: 0.5rem !important;
}
.btn{
    text-transform: unset !important;
    font-size: 1rem !important;
}
.btn-site-success{
    background-color: var(--main-color) !important;
}
.btn-site-light{
    color: var(--main-color) !important;
    background-color: var(--site-light) !important;
}
.site-btn-outline-success{
    border: 1px solid var(--main-color) !important;
    color: var(--main-color) !important;
}
.dashboard-top-bar{
    background-color: #eeeeee;
}

.btn-outline-edit{
    background-color: var(--site-primary) !important;
    color: var(--site-light) !important;
}
.btn-profile-edit{
    background-color: transparent !important;
    border: 1px solid var(--site-primary) !important;;
    color: var(--site-primary) !important;
}
.profile-form-title{
    color: #999999 !important;
    font-weight: 200 !important;
}
.card.home-card-link{
    color: unset;
    background-color: var(--main-btn) !important;
    box-shadow: none !important;
}
.home-link-text{
    font-size: 1.5rem;
    font-weight: 500;
}
.home-btn{
    padding: 0.25rem 0.5rem !important;
    font-size: 1.15rem !important;
    font-weight: 300;
}
.bottom-menu{
    position: fixed;
    bottom: 0;
    z-index: 100;
    background-color: var(--site-white)!important;
}
.bottom-menu-icon{
    color: var(--text-color);
    font-size: 1.5rem;
}
.bottom-menu-text{
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--text-color);
    margin-top: -0.25rem;
}
label.phone.fg-label.control-label.mb-2.text-capitalize.request-form-label, .otp {
    color: var(--text-color);
    margin-bottom: 0 !important;
    float: left;
}
input.phone.form-control, input.otp.form-control {
    margin-top: 1rem !important;
    padding: 10px;
}
.loginbtn{
    transition: all .5s ease;
    width: 100%;
    color:#ffffff;
    font-weight: 600;
    font-size: 1.2rem !important;
    margin-top: 1em;
    background: var(--main-color) !important;
    margin-bottom: 1.5em;
}
.main-content{
    width: 100%;
    border-radius: 20px;
    margin: 5em auto;
    display: flex;
}
.login_form{
    background-color: #fff;
}
.login_h2{
    color: var(--main-color) !important;
    font-size: 2rem;
    font-weight: 400;
}
.bottom-menu a{
    display: flex;
    flex-direction: column;
}
.bottom-menu a *{
    width: 100%;
}
.bottom-menu .router-link-active.router-link-exact-active :is(.bottom-menu-icon,.bottom-menu-text){
    color: var(--main-btn) !important;
}
.message-dropdown{
    max-width: 80vw !important;
    padding-right:1rem !important;
}
.message-dropdown li a{
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    overflow: hidden !important;
}
.badge-trx-type{
    background-color: #eeeeee;
    color: var(--text-color) !important;
    font-weight: bold;
}
.vendor-home-name{
    text-transform: capitalize;
}
.single-transaction{
    box-shadow: 0 3px 8px #00000011;
    border:1px solid #00000011;
    margin-top: 0.125rem;
    border-radius: 0.5rem !important;
}
.single-transaction a{
    color: unset;
    text-decoration: none !important;
}
.bg-top-profile:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 15rem;
    z-index: -1;
    background-color: var(--main-color);
    border-radius: 0 0 2rem 2rem;
}
.notification-listing-details,.notification-listing-title,.transaction-user-name{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notification-listing-details{
    -webkit-line-clamp: 2;
}
.notification-listing-title,.transaction-user-name{
    -webkit-line-clamp: 1;
}
.form-d-relative{
    position: relative;
}
.form-d-relative input{
    position: relative;
    box-shadow: none !important;
    border-color: var(--main-color) !important;
}
.form-d-relative label{
    position: absolute;
    top: 0.75rem;
    left: 1rem;
    background-color: white;
    padding: 0 0.2rem;
    transition: 0.5s all ease;
    pointer-events: none !important;
    font-weight: 100 !important;
    color: var(--text-color) !important;
}
.form-d-relative input:valid + label ,.form-d-relative input:focus + label{
    transform: translateY(-1.35rem);
    font-size: 0.8rem;
    color: var(--main-color) !important;
}
.form-d-relative input:valid + label ,.form-d-relative input:focus + label ,.form-d-relative input.is-invalid + div + label{
    transform: translateY(-1.35rem) !important;
    font-size: 0.8rem;
    color: var(--main-color) !important;
}
.form-d-relative input.is-invalid{
    border: 1px solid #f93154 !important;
}
.form-d-relative input.is-invalid + div + label{
    color: #f93154 !important;
}
.sh-item-loading{
    position: absolute;
    top: 50%;
    right: 50%;
}
.sh-item-loading{
    width: 45rem;
    height: 20rem;
    display: flex;
    padding: 9rem;
    text-align: center;
    background-color: white;
    position: absolute;
    justify-content: center;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
}
.text-site-light{
    color: var(--site-light) !important;
}
.text-site-warning{
    color: var(--main-btn) !important;
}
.top-bar-menu{
    list-style: none;
    margin-bottom: 0;
}
.top-bar-menu li{
    display: inline-block;
    padding: 0.5rem;
    margin-bottom: 0;
}
.top-bar-menu li a{
    color: var(--site-light);
    font-size: 1.25rem;
    margin-bottom: 0;
}
.app-home{
    background-color: var(--main-color);
}
.user-img{
    height: 100%;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
    border-radius: 100%;
    border:1px solid #d8dada;
}
.user-name{
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    color: var(--site-light);
    margin-bottom: 0;
}
.bg-site-light{
    background-color: var(--site-light) !important;
}
.op-2{
    opacity: 0.2 !important;
}
.add-btn{
    color: var(--main-btn) !important;
    position: relative;
}
.add-btn:after{
    content: "";
    width: 2.5rem;
    height: 2.5rem;
    background-color: #ffffff44;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.trans-small,.trans-lead,.home-account-listing{
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
}
.back-arrow-btn{
    position: relative;
    z-index: 1;
    margin: 0 0.5rem;
}
.back-arrow-btn:after{
    content: "";
    width: 2.25rem;
    height: 2.25rem;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    z-index: -1;
    background-color: var(--site-white);
    opacity: 0.3;
    border-radius: 50%;
}
.back-arrow-btn i{
    font-size: 1.2rem;
}
.home-overlay-sect{
    background-color: var(--site-white);
    position: relative;
}
.home-overlay-sect img{
    position: fixed;
    width: 5rem;
    height: 5rem;
    bottom: 0;
    left: 50%;
    border-radius: 50%;
    padding: 0.75rem;
    border-top: 2px solid var(--site-light);
    transform: translatex(-50%);
    background-color: var(--site-white);
    aspect-ratio: 1/1;
}
.offcanvas.offcanvas-bottom{
    height: auto !important;
}
/* New Styles */