/* Mobile View */
@media only screen and (max-width: 991px) {

    /* LOG */
    /* ==== Login styles ==== */
    .login-top-container, .login-bottom-container, .main-head, .sidebar{
        display: none;
    }
    .mobile, .mobile-log-foot{
        background: black;
        display: block;
        padding: 10px;
        width: 100%;
    }
    .mobile .img{
        /*background: red;*/
        /*display: block;*/
        height: 40px;
        /*margin: 10px auto;*/
        /*text-align: center;*/
        width: 100%;
    }
    .mobile .img img{
        display: block;
        height: 100%;
        margin: 10px auto;
        width: 50%;
    }
    .widget{
        border: 1px solid #ededed;
        height: 76px;
        margin-top: 10px;
        padding: 0px;
        width: 100%;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-log-foot .language{
        margin: 0px 0 !important;
        padding: 0px 10px;
        font-size: 15px;
        font-weight: 500;
        background: #ffb600;
        background-size: 300% 100%;
        border: 1px solid #ffb600;
        color: #11132d !important;
        border-radius: 5px;
        cursor: pointer;
        outline: none;
        font-family: 'Poppins', sans-serif;
        border-radius: 5px;
        box-shadow: 0px 3px 5px #fff;
        height: 60px;
        display: inline-block;
        position: relative;
        width: 100%;
        overflow-x: hidden;
    }
    .mobile-log-foot .language select{
        background: #ffb600;
        border: none;
        outline: none;
        padding: 6px;
        width: 102%;
    }
    .mobile-log-foot .icon ul{
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
        text-align: right;
    }
    
    .mobile-log-foot .icon ul li{
        display: inline-block;
        list-style: none;
        margin: 0;
        margin-left: 20px;
        padding: 0;
        /*text-align: -webkit-match-parent;*/
        -webkit-tap-highlight-color: transparent;
    }
    
    .mobile-log-foot .icon ul li a{
        background-color: transparent;
        color: #fff;
        display: block;
        font-size: 20px;
        outline: 0;
        text-decoration: none;
    }
    
    .mobile-log-foot .icon ul li a:hover{
        color: #ffb600;
    }
    
    .mobile-log-foot .widget{
        border: 1px solid #ededed;
        height: 76px;
        margin-top: 10px;
        padding: 0px;
        width: 100%;
        -webkit-tap-highlight-color: transparent;
    }
    footer .footer-one{
        text-align: center;
    }
    footer .footer-two{
        text-align: center;
    }
    .login-container .row{
        margin: 0px auto;
        width: 100%;
    }
    .login-container .row .left h3{
        font-size: 30px;
    }
    
    form.login input{
        border: 1px solid #ededed;
        height: 60px;
        margin-top: 20px;
        padding: 10px 15px;
        width: 100%;  
    }
    form.login input[type="submit"]{
        font-size: 20px;
        padding: 10px 30px;
        width: 100%;
    }
    form.login span{
        font-size: 16px;
        margin-top: 4px;
    }
    form.login input[type="checkbox"]{
        height: 95%;
        margin: 5px 1px 0px 2px;
        width: 15px;
    }
    form.login p{
        font-size: 18px;
    }
    form.login p.first{
        margin-top: 8px;
    }
    
    /* ===== Main Page Section ===== */
    header{
        background: #ffffff;
        display: block;
        height: 70px;
        padding: 0px;
        width: 100%;
    }
    header .main-logo{
        /*background: black;*/
        display: inline-flex;
        height: 100%;
        width: 70%;
    }
    header .main-logo a{
        font-size: 15px;
    }
    header .main-logo a img{
        height: 100%;
        margin: 10px auto;
        margin-right: 8px !important;
        width: 50%;
        vertical-align: middle;
    }
    header .menu{
        display: inline-flex;
        position: absolute;
        right: 0px;
        top:0px;
        width: 30%;
    }
    header .menu .inner{
        align-items: center;
        display: flex;
        font-size: 18px;
        height: 100%;
        justify-content: left;
        margin: 0px auto;
        width: 100%;
    }
    header .menu .inner span img{
        height: 70px;
        width: 60px;
        border-radius: 100%;
        cursor: pointer;
        vertical-align: middle;
    }
    .wrapper-content{
        display: block;
        float: none;
        padding: 10px 38px;
        width: 100%;
    }
    div.people .inner{
        width: 100%;
        background-position: center center;
    }
    .details .inner .row .rec{
        margin-bottom: 15px;
    }
    .details .inner .row .rec.left .inner, .details .inner .row .rec.right .inner, .details .inner .row .rec.bottom.left .inner, .details .inner .row .rec.b.r .inner{
        width: 100%;
    }
    .api .box .inner.left{
        margin-bottom: 15px;
        width: 100%;
    }
    table.user-details tbody tr td div{
        word-wrap: break-word;
    }
    /* Toggle Menu */
    /*.toggle-menu{*/
    /*    right: 0px;*/
    /*    top: 70px;*/
    /*    width: 100%;*/
    /*}*/
    .toggle-menu.active{
        display: block;
    }
    .toggle-menu ul{
        list-style-type: disc;
        margin: 0px;
        padding: 0;
    }
    .toggle-menu ul a{
        color: #1f1f1f;
        font-size: 12px;
        text-decoration: none;
        text-transform: uppercase;
    }
    .toggle-menu ul a.active{
        color: #1f1f1f;
    }
    .toggle-menu ul a.active li{
        background: #e9e9ee;
    }
    .toggle-menu ul a:hover{
        color: #000;
    }
    .toggle-menu ul a li{
        background: transparent;
        border-radius: 0px;
        line-height: 1.8;
        list-style-type: none;
        margin-top: 5px;
        padding: 10px 15px;
    }
    
    .toggle-menu ul a:hover > li{
        background: #e9e9ee;
    }
    
    /* ===== INVESTMENT ===== */
    .investment .inner{
        margin-bottom: 20px;
        width: 100%;
    }
    .investment .inner-right{
        /*margin-bottom: 20px;*/
        position: static;
    }
    .investment ul li{
        font-size: 16px;
        margin: 15px 0px;
    }
    .investment form input{
        appearance: none;
        background: #e9ecef;
        background-clip: padding-box;
        border: 0;
        border-radius: 4px;
        box-shadow: none;
        color: #c9c8c8;
        display: block;
        font-size: 14px;
        outline: 1px solid #CED4DA;
        margin: 12px auto;
        padding: 7px 12px;
        width: 90%;
    }
    .investment-details{
        padding: 20px 15px;
        /*margin-top: 500px;*/
    }
    .investment-details table tbody tr td input{
        background: #ffffff;
        padding: 14px 22px;
        border: 1px solid #CED4DA;
        font-weight: 400;
        border-radius: 4px;
        text-align: left;
        width: 130%; 
        line-height: 1;
        color: #212529;
    }
    .investment-details table tbody tr td input[type="radio"]{
        width: 100%; 
    }
    .investment-details form.deposit input{
        background: #e9ecef;
        background-clip: padding-box;
        border: 0;
        border-radius: 4px;
        box-shadow: none;
        color: #010101;
        font-size: 14px;
        outline: 1px solid #CED4DA;
        padding: 7px 12px;
        width: 100%;
    }
    .investment-details form.deposit input::placeholder{
        color: #c9c8c8;
    }
    .investment-details form.deposit input[type="submit"]{
        display: inline;
        width: auto;
    }
    .transaction .box{
        margin-bottom: 20px;
    }
    .transaction .credit, .transaction .chg-level{
        margin-bottom: 20px;
    }
}