*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Poppins', sans-serif;
    overflow-y:scroll ;
    font-size: 0.875rem;
}
.sticky-top{
    background-color: white !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    /* border-bottom: 1px solid #8b3dff !important; */
}
a {
    cursor: pointer;
    text-decoration: none !important;
    color: var(--bs-text-reset) !important;
}
form{
    background-color: var(--bs-body-bg) !important;
}
.wi-50{
    width: 500px !important;
}

.p-input input:not([type="checkbox"]){
    padding: 12px 15px;
    border-radius: 15px !important;
    border:1px solid lightgrey;
    margin: 25px 0;
}
.service-input input, .service-input select{
    padding: 12px 15px;
    border: 2px solid var(--bs-secondary-border-subtle);
    border-radius: 7px !important;
    margin: 25px 0;
}
.service-input-group input{
    padding: 12px 15px !important;
}
.p-input input::placeholder, .info-input input::placeholder{
    color: #888;
}
.info-input input{
    padding: 8px 12px;
    border: 1px solid var(--bs-secondary-border-subtle);
    border-radius: 7px !important;
    box-shadow: var(--bs-shadow-sm);
}

.df-nav{
    width: 100%;
}
.df-btn-square{
    padding:.7rem 1rem;  
    border-radius: 6px 6px 6px 6px;
    outline:none;
    transition:0.3s;
    background:inherit;
    text-decoration: none;
    font-family: 'Urbanist', sans-serif;
    cursor: pointer;
    font-size:1.1rem;
}

.df-btn-round{
    padding:10px 20px;  
    border-radius: 90px 90px 90px 90px;
    outline:none;
    transition:0.3s;
    background:inherit;
    text-decoration: none;
    cursor: pointer;
    font-size:18px;
}

.df-btn-wide{
    padding:10px 20px;
    border-radius: 6px 6px 6px 6px;
    outline:none;
    transition:0.3s;
    background:inherit;
    text-decoration: none;
    cursor: pointer;
    font-size:18px;
    width: 100%;
}

.df-btn-tiny{font-size:8px;padding:2.5px 6px; font-weight: 500;}
.df-btn-tiny2{font-size:8.5px;padding:4px 8px; font-weight: 500;}
.df-btn-tiny3{font-size:11px;padding:8px 8px; font-weight: 600;}
.df-btn-sm{font-size:14.6px;padding:10px 27px;}
.df-btn-sm2{font-size:16px;padding:7px 27px; font-weight: 400;}
.df-btn-md{font-size:1rem;padding:.69rem 1.1rem;}
.df-btn-md2{font-size:1.03rem;padding:.67rem 1.5rem;}

.df-btn-blackfill{background-color: rgba(10,14,39,.9);border:1px solid rgba(10,14,39,.9); color: white;}
.df-btn-blackfillopac{background-color: rgba(10, 14, 39, 0.605);border:1px solid rgba(10, 14, 39, 0.605); color: white;}
.df-btn-greenfill{background-color: #155724 /*#69650e*/; border:1px solid #69650e; color: white; text-decoration: none;}
.df-btn-successfill{background-color: #28a745 /*#69650e*/; border:1px solid #28a745; color: white; text-decoration: none;}
.df-btn-greyfill{background-color: rgba(72, 120, 228, 0.1)/*#31444e29 #69650e*/; /*border:1px solid #69650e;*/ color: #2287ac; text-decoration: none;}
.df-btn-bluefill{background-color: #01A2B4; color: white; text-decoration: none;}
.df-btn-greyfill2{background-color: rgba(72, 120, 228, 0.15); color: #2287ac; text-decoration: none;}
.df-btn-whitefill{background-color: white; color:rgba(0, 0, 0, 0.847); text-decoration: none;}
.df-btn-whitefill2{background-color: rgb(244, 243, 243); color:rgba(48, 47, 47, 0.847); text-decoration: none;}
.df-btn-primarybs{background-color: var(--bs-primary);border:1px solid var(--bs-primary); color: white;}
.df-btn-blackoutline{border:2px solid rgba(10,14,39,.9); color: rgba(10,14,39,.9)}
.df-btn-greenoutline{border:1px solid #155724; color: #155724}
.df-btn-whiteoutline{border:1px solid white; color: white}
.df-btn-blackfill:hover{background-color:  rgba(10,14,39,.9); color: white; text-decoration: none;}
.df-btn-blackoutline:hover{background-color:  rgba(10,14,39,.9); color: white !important;}
.df-btn-whiteoutline:hover{background-color:  white; color: black;}
.df-btn-greenoutline:hover{background-color:  #155724; color: white;}
.df-btn-greenfill:hover{ color: white; text-decoration: none;}
.df-btn-successfill:hover{ color: white; text-decoration: none;}
.df-btn-greyfill:hover{ color: #2287ac; text-decoration: none;background-color: rgba(72, 120, 228, 0.15)}
.df-btn-greyfill2:hover{ color: white; text-decoration: none;background-color: #01A2B4}
.bg-success-light{
    background-color: #28a745 !important;
}
.border-success-lighter{
    border: 1px solid #28a745 !important;
    color: #28a745 !important;
}
.bgi-container{
    position: relative;
    background-image: url('images/2069151.jpg');
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
    z-index: 1;
}
.bgi-container::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgb(179, 212, 174, 0.8);
    z-index: 2;
    pointer-events: none;
}
.bgi-container > * {
    position: relative;
    z-index: 3;
}

.wrapper{
    display: flex;
    align-items: stretch;
    width: 100%;
}
#sidebar{
    max-width: 264px;
    min-width: 264px;
    /* background: var(--bs-dark); */
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transition: all 0.35s ease-in-out;
    margin-left: -264px;
    border-right: 1px solid #888;
}
#sidebar2{
    max-width: 264px;
    min-width: 264px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transition: all 0.35s ease-in-out;
    margin-left: -264px;
    scrollbar-width: thin;     /* makes it thin */

    border-right: 1px solid #888;
}
#sidebar2::-webkit-scrollbar {
    width: 4px;                
}

.main{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    margin-left:0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    width: 100%;
    /* background:var(--bs-dark-bg-subtle); */
}

.main2{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    margin-left:0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    width: 100%;
    /* background:var(--bs-dark-bg-subtle); */
}

.navbar{ transition: all 0.3s ease-in-out;}
.sidebar-user{
    padding: 0.55rem 1rem;
    width: 264px !important;
}
.sidebar-user2{
    padding: 0.55rem 1rem;
    width: 264px !important;
}

.sidebar-user a{
    font-weight: 600;
}
.sidebar-user2 a{
    font-weight: 600;
}
.sidebar-nav{
    flex-grow: 1;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
    margin-left: 0;
}

.sidebar-header{
    /* color:#e9ecef; */
    font-size: .9rem;
    padding: 1.5rem .3rem .375rem;
}
#sidebar2 a.sidebar-link i{padding-right: 1rem;}
a.sidebar-link{
    /* color:#e9ecef; */
    font-size: 1rem;
    padding: .66rem .3rem;
    display: block;
    font-weight: 600;
    position: relative;
}

.sidebar-link[data-bs-toggle="collapse"]::after{
    border:solid;
    border-width: 0 .085rem .085rem 0;
    content: "";
    display: inline-block;
    padding: 2px;
    position: absolute;
    right: 1.5rem;
    top: 1.4rem;
    transform: rotate(-135deg);
    transition: all .3s ease-out;
}

.sidebar-link[data-bs-toggle="collapse"].collapsed::after{
    transform: rotate(45deg);
    transition: all .3s ease-out;

}
.logout-btn { /* Target the new class */
    bottom: 0;
    left: 0;
  }
/* Sidebar Toggle */
#sidebar.collapsed {
    margin-left: 0;
}
#sidebar2.collapsed {
    margin-left: 0;
}

#main.collapsible{margin-left: 264px;}
#main2.collapsible{margin-left: 264px;}
.navbar.collapsible-nav{margin-left: 264px;}
.navbar.collapsible-nav2{margin-left: 264px;}
.avatar{
    height: 30px;
    width: 30px;
}

.navbar-expand .navbar-nav{
    margin-left: auto;
}

.content{
    flex: 1;
    max-width: 100vw;
    width: 100vw;
    margin-top: 100px;
}
.content-fluid{margin-top: 50px;}
@media (min-width:768px){
    .content{
        max-width: auto;
        width: auto;
    }
    #sidebar2{
        max-width: 190px;
        min-width: 190px;
        margin-left: -190px;
        font-size: 4px;
    }
    #main2.collapsible{margin-left: 190px;}
    .sidebar-user2{
        width: 190px !important;
    }
    #main2.collapsible{margin-left: 190px;}
    .navbar.collapsible-nav2{margin-left: 190px;}
    #sidebar2 a.sidebar-link{font-size: 0.7rem !important;}
    
    #filterCollapse {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    background: #fff;
    margin-top: 5px;
  }
}
.nav-item .active{
    background-color:var(--bs-body-bg) /*darkolivegreen*/ !important;
    border-radius: 90px !important;
}
.nav-item .nav-link{
    padding: 0.36rem !important;
    /* font-size: .94rem !important; */
    /* padding-bottom: 0.4rem !important; */
}



.tab-pane .card{
    border-radius: 10px !important;
    min-height: 220px !important;
}
.account-info{
    color: #e9ecef !important;
}

.bank-img{
    width: 25%;
}
.services-card-wrapper{
    border-radius: 20px !important;
}

.services-card-1{
  height: 140px;
}

.services-card-2{
  height: 225px;
}
.services-card i{
    font-size: 40px;
}
.q-service .card{
    border-radius: 10px !important;
}
.high-quality{
    padding: 3px;
}

.high-quality .card{
    transition: 0.3s; 
    box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /*0 6px 10px 0 rgba(0,0,0,0.3); */
    border-radius: 10px !important;
}
.high-quality img{
    height:237px;
    width: 100%;
    border-radius: 10px 10px 0 0;
}
.high-quality p{
    font-size: 20px;
}

.high-quality .card-texts{
    padding: 12px 16px;
    background:rgba(232, 232, 232, 0.721);
    border-radius: 0 0 10px 10px;
}

.high-quality .card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.bank-acts .card:hover{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);}
.easy-steps .rounded-circle {
    background-color: darkseagreen; 
    color: white; 
    font-size: 3rem;
    height: 85px;
    width: 85px;
}

.easy-steps h6{
    color: darkseagreen; 

}

.dash-rounded-circle .rounded-circle{
    height: 59px;
    width: 59px;
}
.oswald-400 {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.sm-none{
    display: none;
}

.potta-one-regular {
    font-family: "Potta One", system-ui;
    font-weight: 400;
    font-style: normal;
}

.archivo-black-regular {
    font-family: "Archivo Black", sans-serif;
    font-weight: 400;
    font-style: normal;
}
  
@media (max-width: 767.98px){
    .navbar{
        width: 100vw;
    }
}

@media (min-width: 767.98px){
    .high-quality img{
        height:auto;
    }
}
.theme-toggle{ 
    transform: translateY(-65%);
    text-align: center;
    z-index: 10;
    border: none;
    color: var(--bs-body-color);
}

html[data-bs-theme='dark'] .theme-toggle .bi-sun,
html[data-bs-theme='light'] .theme-toggle .bi-moon{
    cursor: pointer;
    margin-right: 28px;
    padding-top: .5rem;
    margin-bottom: 0;
    padding-bottom: 0;
    display: block;
    font-size: 1.25rem;
    color: #fff;
}

html[data-bs-theme='dark'] .theme-toggle .bi-moon{
    display: none;
}
html[data-bs-theme='light'] .theme-toggle .bi-sun{
    display: none;
}



.rounded-90{
    border-radius: 90px;
}

.table thead, .table tbody{font-size: .6rem;}
.table td, 
.table th {
  white-space: nowrap;
}

.pending{
    background-color: rgb(250, 111, 4); 
    color: white; 
    font-size: 7.5px; 
    border-radius: 4px;
    padding: 0 3px 1px 3px;
    font-weight: 700;
}
.queried{
    background-color: rgb(58, 55, 54); 
    color: white; 
    font-size: 7.5px; 
    border-radius: 4px; 
    padding: 0 3px 1.3px 3px;
    font-weight: 700;
}
.error{
    background-color: var(--bs-danger); 
    color: white; 
    font-size: 7.5px; 
    border-radius: 4px; 
    padding: 0 3px 1.3px 3px;
    font-weight: 700;
}
.processing{
    background-color: var(--bs-primary); 
    color: white; 
    font-size: 7.5px; 
    border-radius: 4px;
    padding: 0.2px 3px 1.5px 3px;
    font-weight: 700;
}
.completed{
    background-color: #28a745; 
    color: white; 
    font-size: 7.5px; 
    border-radius: 4px;
    padding: 0 3px 1.3px 3px;
    font-weight: 700;
}
.awaiting{
    background-color: #0dcaf0; 
    color: black; 
    font-size: 7.5px; 
    border-radius: 4px;
    padding: 0 3px 1.3px 3px;
    font-weight: 700;
}

.pagination .page-link{font-size: 10px !important;}

.pin-input-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.pin-input {
    width: 2.3rem;
    height: 2.3rem;
    font-size: 15px;
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 4px;
}
.pin-input:focus {
    border-color: #888;
    outline: none;
}

.coupon-card {
  background: linear-gradient(to bottom right, #f3e8ff, #fce7f3);
  border: 1px solid #e9d5ff;
  border-radius: 12px !important;
}

.icon-box {
  background: #ede9fe;
  border-radius: 10px;
  padding: 10px;
  display: inline-flex;
}

.df-fs-5{font-size: 0.95rem !important;}
.df-fs-6{font-size: 0.9rem !important;}
.df-fs-68{font-size: 0.8rem;}
.df-fs-68i{font-size: 0.8rem !important;}
.df-fs-65{font-size: 0.7rem;}
.df-fs-65i{font-size: 0.7rem !important;}
.df-fs-63{font-size: 0.65rem;}
.df-fs-63i{font-size: 0.65rem !important;}
.df-fs-7{font-size: 0.6rem;}
.df-fs-7i{font-size: 0.6rem !important;}
.df-fs-8{font-size: 0.55rem;}

.df-p-30{padding:30px}
.df-p-b5{padding-bottom:5px}
.df-p-b15{padding-bottom:15px}
.df-p-b30{padding-bottom:30px}
.df-p-b50{padding-bottom:100px}
.df-p-b70{padding-bottom:70px}
.df-p-5{padding-top:5px}
.df-p-t15{padding-top:15px}
.df-p-t25{padding-top:25px}
.df-p-t20{padding-top:20px}
.df-p-t40{padding-top:40px}
.df-p-t50{padding-top:50px}
.df-p-t150{padding-top:140px}
.df-p-t100{padding-top:100px}
.df-p-t65{padding-top:65px}
.df-p-v5{padding-top: 5px; padding-bottom: 5px;}
.df-p-v10{padding-top: 10px; padding-bottom: 10px;}
.df-p-v15{padding-top: 15px; padding-bottom: 15px;}
.df-p-v20{padding-top: 20px; padding-bottom: 20px;}
.df-p-v30{padding-top: 30px; padding-bottom: 30px;}
.df-p-v40{padding-top: 40px; padding-bottom: 40px;}
.df-p-v55{padding-top: 55px; padding-bottom: 55px;}
.df-p-v65{padding-top: 65px; padding-bottom: 65px;}
.df-p-v70{padding-top: 70px; padding-bottom: 70px;}
.df-p-v80{padding-top: 80px; padding-bottom: 80px;}
.df-p-v90{padding-top: 90px; padding-bottom: 90px;}
.df-p-v100{padding-top: 100px; padding-bottom: 100px;}
.df-p-v120{padding-top: 120px; padding-bottom: 120px;}
.df-p-v150{padding-top: 150px; padding-bottom: 150px;}
.df-p-h5{padding-left: 5px; padding-right: 5px;}
.df-p-h15{padding-left: 15px; padding-right: 15px;}
.df-p-h25{padding-left: 25px; padding-right: 25px;}
.df-p-h30{padding-left: 30px; padding-right: 30px;}
.df-p-h35{padding-left: 35px; padding-right: 35px;}
.df-p-h50{padding-left: 50px; padding-right: 50px;}
.df-p-h80{padding-left: 80px; padding-right: 80px;}
.df-p-l10{padding-left: 10px}
.df-p-l15{padding-left: 15px}
.df-p-l20{padding-left: 20px}
.df-p-l25{padding-left: 25px}
.df-p-l30{padding-left: 30px}
.df-p-l50{padding-left: 50px}
.df-p-r10{padding-right: 10px}
.df-p-r15{padding-right: 15px}