﻿/*==================================RESPONSIVE LAYOUTS===============================================*/
@media only screen and (max-width: 1140px) {
    .header-right {
        margin-right: 24px;
    }
}

@media only screen and (max-width: 991px) {
    .container {
        flex-wrap: wrap;
    }

    .container__content {
        max-width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .range__row {
        width: 100%;
    }

    .profile-name {
        flex-wrap: wrap;
    }

        .profile-name label {
            width: 100%;
            margin-bottom: 20px;
            margin-right: 0;
        }

        .profile-name input {
            width: 100%;
            max-width: 100%;
            background: #F3F4F5;
            max-width: 172px;
        }

        .profile-name .btn {
            margin-left: 20px;
        }

    .profile-name-mobile {
        display: flex;
        width: 100%;
    }

    .title {
        font-size: 30px;
        line-height: 40px;
    }

    .title-2 {
        font-size: 20px;
        line-height: 26px;
    }

    .header-mobile {
        display: flex;
    }

    .header-left .city,
    .header-right > .profile,
    .header-right > .setting,
    .profile-name-wrapper {
        display: none;
    }

    .header-right {
        margin-right: 15px;
    }
}

@media only screen and (max-width: 479px) {
    body {
        min-width: 300px;
    }

    .logo {
        margin-right: 30px;
        margin-left: 14px;
    }

    .bank {
        flex-wrap: wrap;
    }

        .bank .title-2 {
            border-right: none;
        }

    .bank-setting {
        width: 100%;
        margin-top: 20px;
        align-items: center;
    }

    .container-row {
        padding: 14px 14px 22px;
    }

        .container-row.bank-row {
            padding-top: 22px;
        }

    h1, h2 {
        padding-left: 14px;
    }

    .city-yes, .city-close {
        margin-left: 12px;
    }

    header {
        padding-right: 14px;
    }

    .header-container {
        align-items: center;
    }

    .container__sitebar {
        width: 100%;
    }

    .btn-plus {
        margin-left: 0;
        display: flex;
        align-items: center;
    }
}
