/* Custom styles*/

.none {
    display: none;
}

.w-content {
    width: fit-content;
}

.block {
    display: block;
    width: 200px;
}

.text-left {
    text-align: left;
    justify-content: end !important;
}

.text-center {
    text-align: center;
}

.width-80 {
    width: 80%;
}

.width-20 {
    width: 20%;
}

.width-60 {
    width: 60%;
}

.width-40 {
    width: 40%;
}


/* --------------- */

.test-mode {
    background-color: #CE5555;
    height: 80px;
}

.test-mode-p {
    color: white;
    font-weight: 300;
    font-size: 14px;
}

.test-mode-p span {
    text-decoration: underline;
}

.more-actions-dropdown {
    width: 200px;
    height: 100px;
}

.more-actions-dropdown a {
    font-size: 14px;
    padding: 8px 5px;
}

.upload-btn {
    color: #4C579F;
    font-family: Inter;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
}

.onboarding-container {
    width: 516px;
    min-height: 360px;
}

.onboarding-container2 {
    width: 516px;
    min-height: 740px;
}

.danger-button {
    background-color: #F16063;
    color: white;
    height: 32px;
    width: 71px;
    border-radius: 25px;
    padding: 6px, 11px, 6px, 11px;
}

.bg-gray {
    background-color: #EEEFF7;
    ;
}


/* Dashboard */

.dashboard-container {
    width: 100%;
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    background-color: var(--light-bg-color);
}

.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background-color: #ffffff;
    border-right: 1px solid var(--light-border-color);
}

.sidebar-logo {
    font-family: var(--raleway-font);
    font-size: var(--font-md);
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
}

.sidebar-navbar {
    height: 86px;
}

.sidebar-nav {
    margin-top: 0px;
    padding-top: 12px;
    height: calc(100vh - 36px - 52px);
    overflow-y: scroll;
    border-top: 1px solid var(--light-border-color);
}

.sidebar-nav::-webkit-scrollbar {
    width: 10px;
}

.sidebar-nav::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px #7474744d;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    outline: 1px solid var(--primary-color);
    border-radius: 8px;
}

.side-nav {
    padding-left: 24px;
    height: 40px;
}

.active-sidebar {
    background-color: var(--primary-color);
}

.active-sidebar .nav-text {
    color: var(--white-color);
}


/* Main content */

.main-navbar {
    height: 86px;
    background-color: var(--white-color);
}

.searchbox .icon {
    margin-top: 15px;
    margin-left: 12px;
}

.user-status {
    background-color: var(--success-color);
}

.status-test-mode {
    background-color: #CE5555 !important;
}

.page-overlay {
    display: none;
    z-index: 90;
    background-color: #3c457e17;
}

.tab-container {
    height: 56px;
    border-bottom: 1px solid var(--light-border-color);
    display: flex;
    gap: 32px;
    align-items: center;
    padding: 0 24px;
}

.tab-container .tab-nav {
    display: flex;
    align-items: center;
    height: 56px;
}

.tab-container .tab-nav.active {
    border-bottom: 1px solid #000000;
}

.tab-content {
    padding-left: 24px;
    padding-right: 24px;
}

.b-bottom {
    border-bottom: 1px solid var(--light-border-color);
}

.b-top {
    border-top: 1px solid var(--light-border-color);
}

.tab-container2 {
    height: 68px;
    background-color: var(--white-color);
    border-bottom: 1px solid var(--light-border-color);
}

.tab-container-3 {
    background-color: var(--white-color);
}

.tab-container-3 button {
    color: var(--white-color);
    background-color: var(--primary-color);
    height: 36px;
    width: 152px;
}

.tab-3-active {
    border-bottom: 4px solid var(--primary-color);
}

.product-tab {
    display: block;
    width: 100%;
}

.width-50 {
    width: 50%;
}

.width-30 {
    width: 30%;
}

.new-transfer {
    position: relative;
    display: block;
}

.transfer-h5 {
    font-family: Inter;
    font-size: 16px;
    font-weight: 500 !important;
    line-height: 19px !important;
}

.transfer-p {
    font-family: Inter;
    font-size: 14px;
    font-weight: 400 !important;
    line-height: 19px !important;
}

.transfer-dropdown {
    right: 0px;
    background-color: var(--white-color);
}

.transfer-dropdown li {
    margin-top: 10px;
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
}

.transfer-dropdown a {
    cursor: pointer;
    display: block;
    width: 240px;
    padding: 10px;
}

.time p {
    color: var(--dark-color);
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
}

.download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: var(--font-sm);
    padding: 10px 18px;
    border-radius: 5px;
    gap: 8px;
}

.popup-overlay {
    z-index: 100;
    position: fixed;
    background-color: #00000059;
}

.transaction-filter-popup {
    width: 372px;
    height: 135vh !important;
    background-color: #ffffff;
}

.transfer-popup-1,
.airtime-popup-1,
.set-reminder-popup {
    background-color: var(--white-color);
    display: block;
    height: 50vh;
    width: 35vw;
}

.topup-popup {
    background-color: var(--white-color);
    display: block;
    width: 420px;
    height: fit-content;
}

.payment-link-popup {
    background-color: var(--white-color);
    display: block;
    height: auto;
    width: 35vw;
}

.auto-height-popup-small {
    background-color: var(--white-color);
    display: block;
    height: auto;
    width: 20vw;
}

.bulk-airtime {
    font-weight: 400;
    font-size: 14px;
}

.add-card-popup {
    background-color: var(--white-color);
    display: block;
    height: fit-content;
    width: 420px;
}

.store-popup,
.new-customer-popup,
.invite-user {
    background-color: var(--white-color);
    display: block;
    height: fit-content;
    width: 35vw;
}

.new-subaccount-popup,
.airtime-popup-2,
.bulk-airtime-popup {
    background-color: var(--white-color);
    display: block;
    height: fit-content;
    width: 30vw;
}

.transfer-popup-2 {
    background-color: var(--white-color);
    display: block;
    height: fit-content;
    width: 30vw;
}

.bg-lighter-gray {
    background-color: #EDF2F7;
}

.width-550 {
    width: 550px !important;
}

.payment-link-1,
.payment-link-2,
.payment-link-3,
.payment-plan,
.invoice-filter-popup {
    background-color: var(--white-color);
    display: block;
    height: fit-content;
    width: 30vw;
}

.new-category {
    background-color: var(--white-color);
    display: block;
    height: 40vh;
    width: 30vw;
}

.link-a {
    color: blue;
    font-size: 12px;
    word-spacing: 0px;
    text-transform: uppercase;
}

.popup-overlay::-webkit-scrollbar {
    display: none;
}

.single-transfer,
.bulk-transfer {
    display: flex;
    cursor: pointer;
    padding: 30px 0px;
}

.single-transfer {
    border-bottom: 1px solid var(--light-border-color);
}

.faded-circle {
    width: 60px;
    height: 50px;
    margin: 0px 30px;
    border-radius: 50%;
    background-color: #F5F5F5;
}

.transfer-title,
.subaccount-title,
.store-title {
    border-bottom: 1px solid var(--light-border-color);
}

.transfer-header,
.link-header,
.subscription-header,
.donation-header {
    height: 20px;
    width: 119px;
    font-family: Inter;
    font-size: 14px;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: 0px;
}

.transfer-body-1,
.link-body-1,
.subscription-body-1,
.donation-body-1 {
    height: 42px;
    width: 311px;
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0px;
    text-align: left;
}

.product-container-1 {
    border-right: 1px solid var(--light-border-color);
}

.product-category,
.product-option,
.manage-product-options {
    border-top: 1px solid var(--light-border-color);
}

.product-category button,
.product-option button,
.create-store button,
.fees button {
    height: 20px;
    width: 153px;
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    color: var(--primary-color);
}

.blue-button {
    height: 20px;
    width: 153px;
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    color: var(--primary-color);
}

.edit-btn {
    background-color: #dcdfef;
    color: var(--primary-color);
    font-size: var(--font-sm);
    padding: 5px 20px;
    border-radius: 4px;
}

.width-auto {
    width: auto !important;
}

.upload-header {
    font-size: 20px;
    padding: 25px;
    background-color: var(--light-bg-color);
    border-radius: 100%;
}


/* Hide scrollbar for IE, Edge and Firefox */

.popup-overlay {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.info-popup {
    width: 372px;
    height: 135vh !important;
    background-color: red !important;
}

.refund-filter-popup {
    width: 372px;
    height: fit-content !important;
    margin-top: 100px;
    background-color: #ffffff;
}

.single-refund-popup {
    margin-top: 20px;
    width: 372px;
    height: fit-content !important;
    background-color: #ffffff;
}

.h-auto {
    height: auto !important;
}

.width-70 {
    width: 70%;
}

.width-30 {
    width: 30%;
}

.relative {
    position: relative;
}

.right-10 {
    right: 10px;
}

.relative-align {
    right: 20px;
}

.img-icon-2 {
    top: 18px;
}

.img-icon-3 {
    top: 7px;
    left: 10px;
}

.download-transaction-popup {
    width: 372px;
    height: 80vh !important;
    background-color: #ffffff;
}

.choose-blocking-option-popup {
    width: 372px;
    min-height: 36vh !important;
    background-color: #ffffff;
}

.choose-blocking-email-popup {
    width: 372px;
    min-height: 36vh !important;
    background-color: #ffffff;
}

.choose-blocking-multiple-popup {
    width: 372px;
    min-height: 36vh !important;
    background-color: #ffffff;
}

.popup .top {
    height: 42px;
    background-color: #eceef5;
    width: 100%;
}

.datetime a {
    padding: 8px 12px;
}

.datetime a.active {
    background-color: #f1f1f5;
    border-radius: 5px;
}

.light-border {
    border: 1px solid #e8e8e8;
}

.default-btn {
    background-color: #dcdfef;
    color: var(--primary-color);
    font-size: var(--font-sm);
    padding: 10px 20px;
    border-radius: 4px;
}

.save-btn {
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: var(--font-sm);
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 12px;
}

.form-labels {
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
}

.white-btn {
    background-color: #ffffff;
    color: var(--primary-color);
    font-size: var(--font-sm);
    border-radius: 4px;
}

.primary-btn {
    background-color: var(--primary-color);
    color: #ffffff;
    font-size: var(--font-sm);
    padding: 10px 20px;
    border-radius: 4px;
}

.primary-btn p {
    color: white;
}

.refund-log-dropdown {
    width: 150px;
}

.transaction-container,
.transfer-container {
    height: 54vh;
    display: grid;
    grid-template-columns: 1fr 330px;
}

.transfer-container {
    height: auto !important;
}

.content-box2 {
    box-sizing: content-box;
    max-width: 100% !important;
    /* display: none; */
}

.swiper {
    /* width: calc(100% - 249px - 24px); */
    /* max-width: 100% !important; */
    width: auto !important;
}

.swiper-slide {
    width: 299.57px !important;
    height: 189px;
    background-image: url("../assets/card.svg");
    background-repeat: no-repeat;
    position: relative;
}

.swiper-slide .exp-date {
    position: absolute;
    bottom: 24px;
    left: 28px;
}

.swiper-slide .cvv {
    position: absolute;
    bottom: 24px;
    right: 130px;
}

.exp-date p,
.cvv p {
    color: #8a92c7;
    font-size: 13.333px;
}

.exp-date .desc,
.cvv .desc {
    color: #fafafa;
    font-size: 14px;
}

.swiper-slide .card-no {
    font-size: 24px;
    color: white;
    position: absolute;
    font-weight: 600;
    top: 75px;
    left: 28px;
    font-family: "Raleway", sans-serif;
}

.no-cards-header {
    height: 39px;
    width: 529px;
    font-family: Inter;
    font-size: 32px;
    font-weight: 500;
    line-height: 39px;
    letter-spacing: 0px;
    text-align: left;
}

.no-header {
    height: 39px;
    font-family: Inter;
    font-size: 32px;
    font-weight: 500;
    line-height: 39px;
    letter-spacing: 0px;
    text-align: left;
}

.no-cards p {
    height: 20px;
    width: 462px;
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0px;
    text-align: left;
}

.no-cards button {
    background-color: var(--primary-color);
    color: #ffffff;
    height: 36px;
    width: 150px;
    border-radius: 4px;
}

.no-cards button p {
    font-family: Inter;
    font-size: 12px;
    font-weight: 400;
    line-height: 19px;
}

.subaccount-table,
.users-table {
    border-collapse: separate;
    border-spacing: 0px 25px;
}

.users-table th {
    font-weight: 500;
}

.subaccount-table th,
.subaccount-table td {
    width: auto;
    text-align: left;
    padding: 10px;
}

.blacklist-table th {
    text-align: left;
    font-weight: 500;
}

.blacklist-table tr td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.089);
    padding-bottom: 10px;
}

.blacklist-table {
    border-collapse: separate;
    border-spacing: 0 25px;
}

.upload-img {
    display: none;
}

.img-label {
    background-color: var(--primary-color);
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 2px;
    cursor: pointer;
}


/* Responsiveness */

@media screen and (min-width: 1087px) and (max-width: 1285px) {
    .nav-documentation-text {
        display: none;
    }
}

@media screen and (max-width: 1148px) {
    .nav-documentation-text {
        display: none;
    }
    button.user-status {
        display: none;
    }
}

@media screen and (max-width: 1040px) {
    .nav-documentation-text {
        display: none;
    }
    button.user-status {
        display: none;
    }
    .sidebar {
        display: none;
    }
    .dashboard-container {
        display: block;
        width: 100vw;
    }
    .content-box {
        padding: 20px !important;
    }
    .searchbox,
    .nav-search-bar {
        width: 90% !important;
    }
    .menu-btn {
        width: 28px;
        height: 2px;
        background-color: #000000;
        margin-right: 28px;
        display: flex;
        position: relative;
    }
    .menu-btn::before {
        content: "";
        width: 24px;
        height: 2px;
        bottom: 8px;
        left: 0;
        background-color: #000000;
        position: absolute;
    }
    .menu-btn::after {
        content: "";
        width: 24px;
        height: 2px;
        bottom: -7.5px;
        left: 0;
        background-color: #000000;
        position: absolute;
    }
    .show-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        z-index: 1000;
        width: 200px;
        height: auto;
    }
    .main {
        position: fixed;
        top: 0px;
        display: block;
        overflow: scroll;
        height: 100vh;
        width: 100vw;
        padding-bottom: 300px;
    }
    .show-cancel {
        display: block;
        text-align: center;
        background-color: #000000;
        margin-left: 45%;
        display: flex;
        position: relative;
        margin-bottom: 25px;
        margin-top: 10px;
    }
    .show-cancel::after {
        content: "";
        width: 24px;
        height: 2px;
        bottom: 0px;
        left: 0;
        background-color: #000000;
        position: absolute;
        transform: rotate(-48deg);
    }
    .show-cancel::before {
        content: "";
        width: 24px;
        height: 2px;
        top: 0px;
        left: 0;
        background-color: #000000;
        position: absolute;
        transform: rotate(48deg);
    }
    .sidebar-nav {
        padding-bottom: 300px;
    }
    .transaction-container {
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .right-content {
        display: block;
    }
}

@media screen and (max-width: 960px) {
    .content-box,
    .tab-content {
        padding: 0px !important;
    }
    .p-small-0 {
        padding: 0px !important;
    }
}

@media screen and (max-width: 790px) {
    input,
    select {
        height: 30px !important;
    }
    .nav-search-bar {
        display: none;
    }
    .main-navbar {
        height: 50px;
    }
    .content-box {
        padding: 0px !important;
    }
    .searchbox .icon {
        display: none;
    }
    .sidebar {
        width: 50vw;
    }
    .sidebar-nav::-webkit-scrollbar {
        width: 5px;
    }
    .no-grid-small {
        display: block !important;
    }
    .tab-container2 a {
        padding: 10px;
    }
    .refund-filter-popup {
        height: auto !important;
    }
    .tab-nav {
        font-size: 10px;
    }
    .balance-body {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
    }
    .balance-body .pt-10 {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .balance-body .h-40 {
        height: auto;
    }
    .side-nav span {
        font-size: 10px;
    }
    .time-options,
    .chargeback-nav {
        width: 100vw;
        overflow-x: scroll;
        padding-right: 30px;
    }
    .top-button-container {
        display: block !important;
        gap: 0px;
        padding: 0px;
    }
    .top-button-container button {
        padding: 10px;
    }
    .justify-center-small {
        justify-content: center;
        /* padding-left: 270px; */
        margin-left: 20px;
    }
    .f-16-sm {
        font-size: 16px !important;
    }
    .f-13-sm {
        font-size: 13px !important;
    }
    .f-10-sm {
        font-size: 10px !important;
    }
    .f-11-sm {
        font-size: 11px;
    }
    .p-sm-0 {
        padding: 0px 5px !important;
    }
    .h-auto-small {
        height: auto !important;
        padding-bottom: 30px;
    }
    .mt-sm-10 {
        margin-top: 10px !important;
    }
    .chart-sm {
        height: 300px !important;
        width: calc(100vw - 2.5rem) !important;
    }
    .transfer-nav a {
        padding: 10px 2px;
        font-size: 10px;
    }
    .transfer-nav {
        width: 90vw;
        flex-direction: column;
        padding: 0px;
    }
    .popup {
        width: auto !important;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
    }
    .transfer-popup-1 {
        position: fixed;
        top: 150px;
        height: auto;
    }
    .transfer-popup-2 {
        position: fixed;
        top: 0px;
    }
    .faded-circle {
        height: 30px;
        width: 30px;
    }
    .swiper-wrapper {
        width: calc(100vw - 2.5rem);
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .mx-sm-2 {
        margin: 0px 2px !important;
    }
    .m-sm-0 {
        margin: 0px 0.25rem !important;
    }
    .no-cards {
        flex-direction: column;
        width: calc(100vw - 2.5rem);
        text-align: center;
        height: auto;
    }
    .no-cards p,
    .no-cards h1,
    .create-div {
        text-align: center;
        width: auto;
        height: auto;
    }
    .no-cards button {
        display: inline;
        justify-content: center;
        width: auto;
        margin-top: 20px;
        text-align: center;
    }
    .transaction-filter-popup {
        height: 90vh !important;
        padding-bottom: 250px;
        overflow-y: scroll;
    }
    .payment-div {
        height: auto;
    }
    .h-sm-auto {
        height: auto !important;
    }
    .pt-sm-30 {
        padding-top: 30px;
    }
    .hide-sm {
        display: none !important;
    }
    .no-design {
        flex-direction: column;
    }
    .danger-button {
        height: 20px;
        width: 50px;
    }
    .invoice-container {
        height: 40px;
    }
    .invoice-container .flex-sm-col {
        flex-direction: column;
    }
    .invoice-container button {
        padding: 5px;
        margin: 0px 5px;
    }
    .w-sm-100 {
        width: 100%;
    }
}

.alert {
    padding: 20px;
    margin-bottom: 30px;
    color: white;
}
.alert.alert-info{
    background-color: #09A1E8;
}
.alert.alert-success{
    background-color: #86BE40;
}
.alert.alert-warning{
    background-color: #ffc241;
}
.alert.alert-danger{
    background-color: #f44336;
}

/* Mobile screen design */