@media only screen and (max-width: 768px) {
    .wrap {
        width: 100%;
        height: auto;
        overflow-x: auto;
        scroll-behavior: smooth;
    }

    .login_header {
        width: 300px;
        margin: 6vw auto;
    }

    .login_body {
        width: 100%;
        flex-direction: column;
        flex: 1;
        padding: 0 10vw 5vw;
    }

    /* ----------MASTERPAGE--------- */

    .header .btn_menu {
        margin-left: 3vw;
    }

    .header {
        background: url(../images/bg.jpg) no-repeat;
        background-size: cover;
        background-position: left center;
        width: 100%;
        /* height: 35%; */
        position: relative;
        top: 0;
        z-index: 1002;
        background-size:     cover;                      /* <------ */
        background-repeat:   no-repeat;
        background-position: center center; 
    }

    .main-content {
        /* margin-top: 58%; */
    }

    .footer {
        width: 100%;
    }

        .footer ul li a {
            padding: 0 1vw;
            height: 100%;
            width: 19vw;
            flex-direction: column;
            color: white !important;
            font-weight: normal;
            font-family: "SanFrancisco", sans-serif;
            font-size: 15px;
        }

    .ui-panel-dismiss-open.ui-panel-dismiss-position-left {
        left: 17em;
    }

    /* ----------DASHBOARD--------- */

    .sec_ct_left {
        background: url(../images/circle_security.png) no-repeat;
        background-size: cover;
        background-position: center;
        width: 48vw;
        height: 48vw;
    }

    div[role="progressbar"] {
        --size: 25vw;
    }

    .sec_ct_right .sec_item {
        width: 100%;
        position: relative;
    }

    /* ----------RECHARGE--------- */

    .modal_confirm_recharge {
        width: 100%;
    }
}