@media screen and (max-width:2600px) {
    .container{
        width: 50% !important;
    }
    /* .navbar-header {
        float: none
    }
    .navbar-default .navbar-nav li a {
        color: gray;
        padding-left: 2px
    }
    .navbar-default .navbar-nav li a span {
        color: #304352
    } */
    .logout-btn {
        margin-top: 8px
    }
    /* .navbar-default .navbar-nav li a span:before {
        background: 0 0!important
    }
    .navbar-default .navbar-nav li.active a span {
        background: 0 0;
        color: #ffbc46!important
    }
    .navbar-default .navbar-nav li.active a span:before {
        visibility: visible;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        margin: 0;
        z-index: -1;
        padding: 20px 30px 20px 20px;
        max-height: 100vh;
        box-shadow: 0 2px 6px #d3d3d3
    }
    .navbar-toggle {
        display: block;
        position: relative
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1)
    }
    .navbar-collapse.collapse {
        display: none
    }
    .nav .language-select {
        margin-bottom: 20px
    }
    .navbar-collapse.in {
        display: block!important
    }
    .navbar-nav {
        float: none!important;
        width: 82%;
        margin: 40px auto 20px
    }
    .navbar-nav>li {
        float: none
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px
    }
    .navbar-expand-custom .container {
        width: 100%
    } */
}

@media screen and (max-width:1200px) {
    /* .navbar-nav {
        width: 90%
    } */
    .container{
        width: 70% !important;
    }

}

@media screen and (max-width:1024px) {
    .language-section {
        margin-right: 50px
    }
    .cashout-section {
        width: 60%!important
    }
    .container{
        width: 90% !important;
    }
}

@media screen and (max-width: 992px) {

    .modal-footer{
        flex-wrap:wrap;
    }
    .modal-footer .progress{
        width: 100%;
        margin: auto;
        margin-bottom: 20px;
    }
    .guide-img{
        height: auto !important;
    }
    .modal-footer .checkbox{
        width: 100%;
    }
}

@media screen and (max-width:768px) {
    .container{
        width: 100% !important;
    }
    body {
        background: #fff
    }
    .login-page {
        padding: 15% 0 0
    }
    .cashout-section {
        width: 70%!important
    }
    /* .navbar .container {
        width: 90%!important
    } */
    .logo-img {
        margin-left: 0
    }
    .middle .box{
        width: 120px !important;
        height: 90px !important;
    }
    .middle .box span{
        transform: translate(0, 25px) !important;
    }
    footer{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    footer label{
        width: 100%;
        text-align: center;
        display: block;
    }
    footer label:last-child{
        margin-bottom: 100px;
    }

    .modal-footer .progress{
        width: 90%;
        margin: auto;
    }
    .modal-footer .button-area{
        margin-top: 20px;
    }
}

@media screen and (max-width:640px) {
    .balance-summary {
        width: auto!important
    }
    .body-content {
        width: 85%
    }
    .login-page {
        padding: 20% 0 0
    }
    .cashout-section {
        width: 80%!important
    }
    .balance-section h1 {
        font-size: 30px!important
    }
    .navbar .container {
        width: 95%!important
    }
}

@media screen and (max-width:480px) {
    .middle .box{
        width: 100px !important;
        height: 80px !important;
    }
    .middle .box span{
        transform: translate(0, 20px) !important;
    }
    .login-page {
        padding: 25% 0 0
    }
    .cashout-section {
        width: 100%!important
    }
}