/**************************
*
* MOBILE RESPONSIVE STYLES 
*
***************************/

@media screen and (max-width: 700px) {
    /* DASHBOARD */

    .view-content {
        margin-left: 0;
        width: 100% !important;
        padding-bottom: 100px !important;
        padding-top: 104px;
    }

    .top-row {
        width: 100% !important;
        overflow: scroll;
    }

    .page-model {
        width: 100%;
        overflow: hidden;
    }

    .main-content-row {
        width: 100% !important;
    }

    .view-container {
        width: 100% !important;
    }

    .center-col.flex {
        flex-wrap: wrap;
    }

    .transactions-list.card-mt.next-transactions,
    .transactions-list.tasks-list {
        margin-bottom: 24px;
        margin-left: 0 !important;
        width: 100% !important;
    }

    .transactions .menu-head ul {
        height: unset !important;
        margin-bottom: 10px;
    }

    .accounts-box {
        min-width: 300px !important;
        margin-bottom: 24px;
        height: fit-content !important;
    }

    .accounts-box .row {
        flex-wrap: wrap !important;
    }

    .chart-box.card-mt.full {
        min-width: unset !important;
        overflow: hidden;
    }

    .chart-box {
        width: 100% !important;
        margin-top: 16px;
    }

    .chart-box .content {
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .line-chart {
        min-width: 600px;
    }

    .main-content-row .left-col {
        flex-wrap: wrap;
    }

    .card-mt {
        margin-right: 0 !important;
    }

    .chat-window {
        display: none;
    }

    /* ACTION MENU */

    .action-menu .handler {
        display: none;
    }

    .action-menu .menu-items {
        flex-wrap: wrap !important;
    }

    .action-menu {
        bottom: -196px !important;
        width: 100% !important;
        background-color: white !important;
        border-radius: 0 !important;
        padding: 8px !important;
    }

    .action-menu.is-open {
        bottom: 0 !important;
    }

    .action-menu .menu-items .action-btn p {
        margin-bottom: 0;
    }

    .action-menu .menu-items li {
        width: 20% !important;
    }

    /* TRANSACTIONS */

    .flex {
        flex-wrap: wrap !important;
    }

    .transactions .view-content > .flex {
        flex-wrap: wrap-reverse !important;
    }

    .summary-card {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .general-balance .progress-bar-border.gray:first-child {
        top: -104px !important;
    }

    .balance-value p {
        display: inline;
    }

    .menu-bar {
        flex-wrap: wrap;
        justify-content: center !important;
        height: unset !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    .month-selector {
        margin: 16px 0;
    }

    .custom-select {
        background-color: #f7f4f4;
        padding: 10px 8px 8px;
        border-radius: 4px;
        position: relative;
    }

    .custom-select .the-filter {
        top: 2px !important;
        right: 1px !important;
    }

    .wavy-chart {
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .transactions-list {
        overflow-x: scroll;
    }

    .transaction-list.grow {
        max-width: 100%;
        min-width: 320px !important;
    }

    .menu-head {
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /*   TRANSACTION MODAL */

    .transactions-modal {
        padding: 0 !important;
    }

    .transactions > .view-content > .flex {
        flex-wrap: wrap-reverse !important;
    }

    form.container.modal {
        display: flex;
        flex-direction: column;
    }

    .modal_main-body {
        height: calc(100vh - 160px);
        /* overflow-y: auto; */
    }

    .modal-body {
        height: calc(100vh - 280px);
        overflow-y: auto;
    }

    .tab-menu {
        padding-top: 0 !important;
    }

    .confirmation-modal {
        width: 90% !important;
    }

    /* CALENDAR */

    .payments-calendar .grid {
        /* display: block !important; */
        flex-wrap: wrap-reverse !important;
    }

    .grid > div {
        width: 100% !important;
    }

    /* PLANNING */

    .flex.grow-1.column {
        width: 100% !important;
    }

    .no-budget-wrapper > div {
        width: 100% !important;
    }

    .title .title-text {
        display: inline-block;
    }

    .title .title-type,
    .title .edit-icon {
        margin-top: 10px;
    }

    .spending-card {
        text-align: center;
    }

    .title {
        justify-content: center !important;
    }

    .contend {
        padding: 0 16px !important;
    }

    .spending {
        padding: 16px 0 !important;
        flex-wrap: nowrap !important;
    }

    .item .sub-item {
        width: 100% !important;
    }

    .spend {
        text-align: right;
        width: 93%;
        padding-top: 8px;
    }

    /* WALLETS */

    .paymentsCard .flex {
        flex-wrap: nowrap !important;
    }

    .wallet .view-content .flex .column.grow {
        width: 100% !important;
    }

    .no-data div p {
        width: 100% !important;
    }

    .wallet .view-content > .flex {
        flex-wrap: wrap-reverse !important;
    }

    /* OBJECTIVES */

    .objectives-modal .left-col {
        display: none;
    }

    .objectives-modal {
        width: 95%;
    }

    .objectives-modal .content {
        width: 100% !important;
        height: unset !important;
    }

    .objectives-modal .content .right-col {
        width: 100% !important;
    }

    .objectives-modal .content .right-col form {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .view-container .view-content .objectives-list {
        flex-wrap: wrap-reverse !important;
    }

    .view-container .view-content .objectives-list .objective-wrapper,
    .objectives-card {
        margin: 0 0 24px !important;
        width: 100% !important;
    }

    /* SETTINGS */

    .settings .inner-container {
        width: 100% !important;
        overflow-x: auto;
    }

    .profile-config {
        width: 100% !important;
    }

    .profile-config .forms-box {
        width: 100% !important;
    }

    .profile-config .forms-box .space {
        margin-left: 0 !important;
        margin-top: 16px !important;
    }

    .profile-config .forms-box .contend-form-box .form-width {
        width: 100% !important;
    }

    .profile-config .forms-box .contend-form-box .radio-title {
        left: 0 !important;
    }

    .profile-config .forms-box .contend-form-box .form-margin-top {
        width: 100% !important;
    }

    .category-config {
        width: 100%;
    }

    .category-config .category-config-box .contend-form-box .form-width {
        width: 100% !important;
    }

    .category-config .category-config-box .space {
        margin-left: 0 !important;
    }

    .category-config .category-config-box .contend-form-box .form-box {
        margin-right: 0 !important;
    }

    .preferences-config {
        width: 100%;
    }

    .preferences-config .preferences-config-box {
        width: 100% !important;
    }

    .preferences-config .preferences-config-box .toggle-switch-container .toggle-label {
        width: 100% !important;
        flex: 1;
    }

    .preferences-config .preferences-config-box .contend-margin {
        width: 100%;
    }

    .preferences-config .preferences-config-box .contend-margin .text-box {
        width: 100% !important;
    }

    .preferences-config .preferences-config-box .contend-margin .text-box .box-title {
        flex: 1;
    }

    .family-account {
        width: 100% !important;
    }

    .family-account .family-account-box {
        width: 100% !important;
    }

    .family-account .family-account-box .content-margin .form-planilha {
        flex-wrap: wrap;
    }

    .family-account .family-account-box .content-form-member-guest .basic-button {
        margin-top: 10px;
    }

    .profile-config .img-container {
        margin: 0 auto 16px !important;
    }

    /* MODAL NOVA CONTA */

    .payments-modal {
        width: 95% !important;
    }
    .modal {
        flex-direction: column;
        width: 100% !important;
    }

    .container-left {
        width: 100% !important;
        background-color: white !important;
        padding-bottom: 0 !important;
    }

    .title-box {
        color: black !important;
        margin-bottom: 24px !important;
    }

    button.close {
        padding-right: 16px !important;
        padding-top: 20px !important;
        position: absolute;
        top: 0;
    }
    .stacked-input,
    .stacked-select {
        width: 100% !important;
    }
    .form {
        display: block !important;
        margin: 0 16px 24px !important;
        /* max-width: 310px !important; */
    }
    .stacked-input[name='date'] {
        width: auto !important;
    }
    .basic-button {
        min-width: unset !important;
    }
    .space {
        margin-right: 0 !important;
    }
    .general-balance .progress-bar-border.gray:first-child {
        top: -104px !important;
    }
    .categories.modal {
        display: block !important;
        width: 95% !important;
    }

    /* CATEGORIAS */

    .content .categoryList {
        overflow-x: scroll;
        max-width: 90% !important;
    }

    .content .bars-chart {
        overflow-x: scroll;
        width: 100%;
        margin: 0 20px !important;
        max-width: 320px;
    }
}