.wbk_dashboard__wrapper {
    margin-bottom: 20px;

    .wbk_dashboard__blocks {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
        width: 100%;
        list-style: none;
        margin: 0 0 30px 0;

        @include mobile-grid(1, 10);
    }
}

.wbk_dashboard__chart {
    box-shadow: 0 0 15px rgba(161, 164, 182, 0.5);
    border-radius: 8px;
    padding: 35px 35px 40px 35px;
    background-color: colors.$background-white;
    position: relative;

    #wbk_spa_dashboard[data-theme='dark'] & {
        box-shadow: none;
        border: 1px solid colors.$input-border;
    }

    @include mobile {
        padding: 20px;
    }
}

.wbk_dashboard__balanceDetail {
    display: flex;
    align-items: center;
    gap: 5px;

    .wbk_dashboard__balancePositive {
        color: rgb(125, 198, 119);
    }

    .wbk_dashboard__balanceNegative {
        color: rgb(255, 126, 7);
    }
}

.wbk_dashboard__recentBookings {
    margin-bottom: 40px;
    border-bottom: 1px dashed colors.$input-border;

    .wbk_dashboard__welcomeMessage {
        padding: 0px 20px 20px 20px;

        h2 {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: typography.$font-primary;
            font-weight: 700;
            color: colors.$off-black;
            margin: 0;
        }

        p {
            margin-top: 15px;
            margin-bottom: 0;
            color: colors.$text-grey;
        }
    }
}

.wbk_dashboard__bottomContent {
    padding: 0px 20px;

    @include mobile {
        padding: 0px 10px;
    }
}

.wbk_dashboard__promotionWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    flex-flow: column;

    p {
        color: colors.$off-black;
        font-size: 24px;
        margin: 0;
    }
}

.wbk_dashboard__invertedIcon {
    filter: invert(1);
}