.container {
    width: 960px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0px;
    z-index: 3;
}
.inner-container {
    width: 650px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    padding: 0px 30px;
}
@media (max-width: 767.98px) {
    html, body, pre, code, kbd, samp, input, button, select, option, textarea {
        font-size: 16px;
    }
    .logo-budget {
        display: none;
    }
    .logo-header {
        width: 80px;
    }
    .header-right .social-nav ul li a {
        width: 26px;
        height: 26px;
        border-radius: 2px;
    }
    .container.header-container {
        height: 100px;
    }
    .banner-wrapper::before, .banner-wrapper::after {
        display: none;
    }
    .main-wrapper {
        position: relative;
        padding-top: 100px;
    }
    
    body.is-apps .main-wrapper {
        position: relative;
        padding-top: 40px;
    }
    
    .headline-wrapper h1 {
        margin: 0 0 10px 0;
        font-size: 200%;
        letter-spacing: 4px;
    }
    p {
        line-height: 150%;
        margin: 0px 0 20px 0;
    }
    .cal-content .total-num {
        font-size: 185%;
        padding-left: 15px;
    }
    .cal-container {
        padding: 10px 30px 10px 30px;
    }
    .cal-result-wrapper {
        padding: 30px 20px 10px 20px;
        top: 0px;
        z-index: 100;
        box-shadow: 0px 0px 20px 17px rgb(0 0 0);
    }
    .control-container {
        flex-wrap: wrap;
    }
    .control-container .control-box {
        width: 100%;
        height: auto;
        padding: 0 0px;
    }
    .control-wrapper::after {
        display: none;
    }
    .control-container .control-box.is-left {
        padding: 0px 30px 30px 30px;
    }
    .control-container .control-box.is-right {
        /*    background-color: var(--color-theme-2);*/
        background-image: url("../images/bg-1.jpg");
        background-repeat: repeat;
        background-size: 600px;
        padding: 30px 30px 50px 30px;
        border-radius: 30px 30px 0px 0px;
        overflow: hidden;
    }
    .control-container .control-box.is-right::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: '';
        background: linear-gradient(45deg, rgba(0, 147, 230, 0.3), rgba(76, 103, 242, 0.6), rgba(185, 66, 248, 0.75), rgba(212, 31, 84, 1.0));
        mix-blend-mode: hard-light;
    }
    .control-wrapper::before {
        display: none;
    }
    .single-box.is-bottom {
        padding-bottom: 10px;
    }
    .btn-decision label {
        width: 70px;
    }
    .card-top {
        padding-bottom: 20px;
    }
    .card-row.card-expenditure {
        padding: 0 0 20px 0;
    }
    .action-btns {
        padding: 0px 0px 20px 0px;
    }
    .card-row {
        position: relative;
        padding: 0 0 15px 0;
    }
    .card-logo {
        width: 120px;
    }
    .flex-list {
        column-gap: 15px;
    }
    .card-name {
        font-size: 160%;
    }
    .prev-card {
        padding: 20px;
    }
    .card-name span {
        display: block;
    }
}