/* ==================================================
    =450px
===================================================== */
@media only screen and (max-width: 450px) {
    /* -------------------------------------------------------------------------- Login page */
    .mobile-menu {
        right: -5%;
    }

    .login-footer {
        /*width: 280px;
        min-width: 280px;*/
        position: unset;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .login-footer .lang-nav {
        float:none;
        margin-bottom: 20px;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .login-footer .social {
        width: 100%;
        text-align: center;
    }

    .social li {
        margin-right: 25px;
    }

    /* -------------------------------------------------------------------------- Dashboards */
    #account-slider .account-box {
        width: 90vw;
    }

    .account-box.account-bg-1 {
        background: transparent;
        box-shadow: none;
        -webkit-box-shadow: none;
    }

    .account-list .col-1 {
        width: 100%;
    }

    .account-list .col-2 {
        width: 100%;
    }

        .account-list .col-2 .amount {
            font-size: 22px;
        }

    .widget-grid .widget {
        padding: 0;
    }

    .custom-table .tag-col {
        padding-left: 50px;
    }

    .custom-table .text-3 {
        font-size: 14px;
    }

        .custom-table .text-3 span {
            font-size: 14px;
        }

    .custom-table.table-2 .tag {
        top: 15px;
    }

    .table-head .head-txt-1 {
        padding: 1.5rem;
    }

    .widget-tabs li a {
        padding: 10px;
        min-width: 0;
        font-size:10px;
    }

    .widget-transactions .table-btn.btn-retry {
        display: none;
    }

    .widget-advertising h2 {
        font-size: 32px;
        line-height: 30px;
    }

    #page-footer .lang-nav {
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }

        #page-footer .lang-nav li {
            display: inline-block;
            float: none;
            margin: 0 20px;
        }

    #page-footer .social {
        width: 100%;
        text-align: center;
    }

        #page-footer .social li {
            display: inline-block;
            float: none;
            margin: 0 20px;
        }

    
    #page-footer {
        position: relative;
        padding-bottom: 60px;
    }

        #page-footer .copy {
            width: 100%;
            position: absolute;
            bottom: 0px;
            left: 0;
            text-align: center;
        }
    .col-ms-5 {
        visibility: hidden;
    }
    #currencyBuy, #currencySell {
        padding: 5px 15px;
    }

    .col-text, .custom-table .text-4 {
        font-size: 10px;
    }

    #buyExchangeDashboard, #sellExchangeDashboard {
        padding: 5px 10px 2px;
    }

    #buyExchangeDashboard{
        margin-left: -35px;
    }

    #sellExchangeDashboard {
        float: right;
        margin-right: 35px;
    }

    #currencySell {
        float: right;
        margin-right: 40px;
    }

    .company-picker-container-hidden {
        display: none !important;
    }
    /*     ============ MCash ================     */

    .account-number-mcash {
        display:none !important;
    }
    .date-header-position, .accImg-position {
        float: left;
        width: fit-content !important;
    }
    .amount-header-position, .amounts-position {
        float: right !important;
        width: fit-content;
    }
    .custom-table .row-1 .col:before {
        width: 0px;
    }
    .custom-table .row-1 .col:after {
        width: 0px;
    }
        /*    ========= Account data transactions    =================    */
        #transactionsAmount, #transactionsDate, #transactionsAmountAtos, #dashboardTransactionsAmount {
        font-size: 10px;
    }

    /*  ========== Statements ============    */
    .center-date{
        padding-top: 15px !important;
    }
    .currency-header, .currency-elements{
        display: none !important;
    }
    .actions-button{
        float: right !important;
    }
    .text-size-450{
        font-size: 10px !important;
    }

    /* ========= card transactions ========== */
    .card-number-header, .card-number{
        display: none !important;
    }
    /*    ================== Transfers ===============   */
    #tableHeaderDate, #tableHeaderAmount, #transferAmountData, #transferDates, #dashboardTransactionsDate {
        font-size: 10px;
    }
    #fromToHideit{
        display:none;
    }

    .transfers-hide{
       /* display: none !important;*/
    }

    #dashboardAmountContainer {
        width: fit-content;
    }

    @media only screen and (max-width: 375px) {
        #tableHeaderDate, #tableHeaderAmount{
            font-size: 8px;
        }
    }

    /* ================== Exchange list ================ */
    .exchange-rate-middle{
        display: none;
    }

    .exch-rates {
        width: fit-content;
        padding-left: 5px !important;
        padding-right: 8px !important;
    }

    .exch-rates-value {
        font-size: 8px;
    }

    /* ================================================== Payment between accounts */
    .account-row .account-box .account-main {
        padding-left: 0;
    }

        .account-row .account-box .select-2 {
            width: 66px;
            margin-left: 10px;
        }

            .account-row .account-box .select-2 div.fancy-select div.trigger {
                font-size: 12px;
                padding: 6px 22px 4px 8px;
            }

                .account-row .account-box .select-2 div.fancy-select div.trigger:after {
                    top: 15px;
                }

        /* ================================================== Prelogin ATM Branch */
        .map-list li {
            padding: 10px 0;
        }

        .map-list .item-main {
            padding: 0px 30px 0px 55px;
        }

            .map-list .item-main i {
                width: 40px;
                height: 40px;
                background-size: 20px;
                margin-top: 0px;
                margin-left: 5px;
                top: 0;
            }

        .map-list .name {
            font-size: 14px;
        }

        .map-list .cat-name {
            font-size: 12px;
        }

        .map-list .item-info li {
            padding: 5px 0px 5px 36px;
        }

        .map-list .item-info i {
            width: 30px;
            height: 33px;
            margin-top: 0;
            top: 4px;
            left: 3px;
            background-size: 30px;
        }

        .map-list .info-txt-1 {
            font-size: 12px;
        }

        .map-list .info-txt-2 {
            font-size: 14px;
            line-height: 18px;
        }

        /* ================================================== Prelogin FAQ */
        .accordian-title {
            padding-left: 60px;
            font-size: 13px;
        }

            .accordian-title:after {
                top: 10px;
            }

        .accordian-wrapper .hidden {
            padding-left: 10px;
        }

        .accordian-wrapper .distance {
            float: none;
            margin-top: 5px;
        }

        .contact-data-wrapper .data p {
            font-size: 13px;
        }

            .contact-data-wrapper .data p span {
                font-size: 12px;
            }

        .prelogin-full .col-head .close {
            background-size: 20px;
            color: transparent;
            font-size: 1px;
            margin-top: 4px;
        }

        /* ================================================== Popups */
        .popup-box {
            width: 96%;
            left: 2%;
            top: 60px;
            transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
        }

            .popup-box h3 {
                padding: 20px;
            }

            .popup-box .popup-links li {
                padding: 20px 0;
            }

        .popup-1 .label-1 {
            margin-top: 0;
        }

        /* ================================================== Prelogin Product Catalogue */
        .product-info li span {
            display: block;
            width: 100%;
        }

        .popup-3 {
            width: 100%;
            top: 0;
            left: 0;
        }

        /* ================================================== Prelogin Exchange List */

        .table-row .currency, .table-row .currency-value {
            font-size: 1.2rem;
        }

        @media only screen and (max-width: 450px) {
            .table-head .head-txt-1 {
                font-size: 8px;
                padding: 0rem
            }
        }

        @media only screen and (max-width: 375px) {
            /* ================================================== Prelogin Exchange List */
            .table-head .head-txt-1, .table-row .text-1 {
                font-size: 8px;
                padding: 0rem;
            }

            .table-row .text-1 {
                font-size: 1.2rem;
            }

            .table-row .currency, .table-row .currency-value {
                font-size: 1rem;
            }

            .table-head .head-txt-1 {
                padding: 0;
            }
        }



        /* ================================================== self-care notifications */
        .notification-wraper .sub-notification {
            position: relative;
            margin-bottom: 20px;
        }

        /* ================================================== Tips and tricks */
        .widget.widget-tips-and-tricks:before {
            right: 0;
        }

        .widget.widget-tips-and-tricks:after {
            right: 6px;
        }

        /* ==================================================
    WIDTH,HEIGHT CLASSES FOR RESOLUTIONS TO 450px
    ===================================================== */

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

        .width-100-max450 {
            width: 100% !important;
        }

        .width-90-max450 {
            width: 90% !important;
        }

        .width-80-max450 {
            width: 80% !important;
        }

        .width-70-max450 {
            width: 70% !important;
        }

        .width-60-max450 {
            width: 60% !important;
        }

        .width-50-max450 {
            width: 50% !important;
        }

        .width-40-max450 {
            width: 40% !important;
        }

        .width-30-max450 {
            width: 30% !important;
        }

        .width-20-max450 {
            width: 20% !important;
        }

        .width-10-max450 {
            width: 10% !important;
        }

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

        .height-100-max450 {
            height: 100% !important;
        }

        .height-90-max450 {
            height: 90% !important;
        }

        .height-80-max450 {
            height: 80% !important;
        }

        .height-70-max450 {
            height: 70% !important;
        }

        .height-60-max450 {
            height: 60% !important;
        }

        .height-50-max450 {
            height: 50% !important;
        }

        .height-40-max450 {
            height: 40% !important;
        }

        .height-30-max450 {
            height: 30% !important;
        }

        .height-20-max450 {
            height: 20% !important;
        }

        .height-10-max450 {
            height: 10% !important;
        }
    }

@media only screen and (max-width: 500px) {
    #side-modal-payment-recivers-profiles .btn-1 {
        width: 97%;
        margin-right: 4%;
        font-size: 1.3rem;
        display: flex;
        justify-content: center;
        margin-top: 1rem;
    }

    .recivers-flex-container {
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
    }

    .recivers-flex-container .news {
        width: 98%;
    }

    .recivers-flex-container #template-for-groupping .widget-tabs {
        display: flex;
        flex-direction: column;
    }

/*    .custom-table.table-2 .col {
        padding: 5px 0px;
    }*/

    .custom-table.border-top .table-head {
/*        display: flex;*/
        align-items: center;
    }
}