@media (min-width: 1921px) {
    .login-right {
        width: 80%;
        background-size: cover;
        margin: 0 auto;
    }

    .login-bg {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

}

/* XX-Large devices (larger desktops, 1500px and down) */
@media (max-width: 1500px) {
    .login-bg .slider-3 {
        right: 40%;
    }

    .login-bg .slider-1 {
        left: 44%;
    }

    .login-bg .slider-2 {
        top: 62%;
    }

    .login-title,
    .text-highlight {
        font-size: 28px;
        width: auto;
    }

    .login-btm {
        margin-top: 3rem;
    }

    .login-bg,
    .login-right {
        padding: 2rem;
    }

    .overview-card {
        padding: 2rem;
    }

    .client_login_title h4 {
        font-size: 3.2rem;
    }

    .client_subtitle {
        font-size: 1.875rem;
    }

    .client_left_col {
        height: 860px;
    }
}

/* X-Large devices (large desktops, 1200px and below) */
@media (max-width: 1280px) {

    .closebtn,
    #toggle-sm {
        display: block;
    }

    .main-content {
        margin-left: 0px;
    }

    .sidebar.open {
        margin-left: 0px;
    }

    .sidebar {
        margin-left: -290px;
        z-index: 9999;
    }

    .login-h2 {
        font-size: 30px;
    }

    div#toggleSidebar {
        left: 0px;
    }

    .system-img {
        width: 100px;
        height: 74px;
    }

    .client_login_title h4 {
        font-size: 3rem;
    }

    .client_subtitle {
        font-size: 1.6rem;
    }

    .client_login_title p {
        font-size: 1rem;
    }

    .client_left_col {
        height: 750px;
    }

    .md-stepper-horizontal {
        padding: 0 4rem;
    }

    .debtor-phone {
        border-right: none;
        padding-right: 40px;
        margin-right: 40px;
    }

    .fs-18-medium {
        font-size: 1rem;
    }
}


/* Laptop Devices - 1024px */
@media(max-width: 1024px) {

    .login-title,
    .text-highlight {
        font-size: 20px;
    }

    .login-left {
        padding: 2rem;
    }

    .login-bg {
        height: auto;
    }

    .overview-img {
        width: 40px;
        height: 40px;
    }

    .overview-card {
        padding: 1.8rem;
    }

    .sm-fs {
        font-size: 0.89rem;
    }

    .overview-balance {
        font-size: 22px;
    }

    .client_login_title h4 {
        font-size: 2.4rem;
    }

    .client_subtitle {
        font-size: 1.2rem;
    }
}

/* Medium devices (Tablets, 768px) */
@media (max-width: 768px) {
    .login-left {
        padding: 0;
    }

    .login-bg .cstm-width,
    .login-wrapper .cstm-width {
        width: 100%;
    }

    .login-right {
        display: none;
    }

    .login-bg {
        background: url('../img/Mobile-UI.png') no-repeat;
        padding: 1.4rem;
    }

    .login-div {
        padding: 2rem 3rem;
    }

    .login-btm {
        margin-top: 1rem;
    }

    .header-nav .mr-40 {
        margin-right: 20px;
    }

    .cstm-main-content .cstm-title {
        font-size: 1rem;
    }

    .footer-div,
    .md-step-title {
        font-size: 0.8rem;
    }

    .main-container .mt-32 {
        margin-top: 1rem;
    }

    .searchbar,
    .footer-sm {
        display: block;
    }

    .cstm-global-select,
    .search_icon,
    .client_left_col {
        display: none;
    }

    .settlement-icon {
        width: 50px;
    }

    .balance-breakdown .chart-container canvas#balanceChart {
        width: 180px;
        height: 180px;
        margin-bottom: 1rem;
    }

    .content-card,
    .main-container {
        padding: 20px;
    }

    .mb-3-cstm {
        margin-bottom: 0;
    }

    .account-highlights {
        padding: 10px;
    }

    .client_right .login-details {
        border: 1px solid var(--gray-7);
        border-radius: 10px;
        padding: 2rem;
        margin-top: 2rem;
        box-shadow: 0 2px 8px 0 rgba(136, 136, 136, 0.1);
        background: var(--white);
    }

    .login-wrapper {
        background: linear-gradient(0deg, rgba(2, 33, 66, 0.85) 0%, rgba(2, 33, 66, 0.85) 100%), url('../img/Client-access-bg.png') lightgray 50% / cover no-repeat;
        padding: 3rem 2rem 4rem;
    }

    .md-stepper-horizontal {
        padding: 0 1rem;
    }

    .login-h2 {
        font-size: 24px;
    }

    .login-details img {
        width: 236px;
    }
}

/* Small devices (500px) */
@media (max-width: 576px) {
    .login-div {
        padding: 1.4rem;
    }

    .login-details {
        width: auto;
    }

    .verify-btn {
        height: 40px;
        width: 40px;
    }

    .sm-hide {
        display: none;
    }

    .info-grid,
    .paid-details .payment-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .client_right .login-details {
        padding: 1.5rem;
    }
}