.dashboard__item {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 19rem;
    text-align: center;
    color: #022873;
    background: #FFF;
    border-radius: 1rem;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.07);
    transition: all ease-in-out 0.3s;
}

:root {
    --progress-bar-width: 100px;
    --progress-bar-height: 100px;
    --progress-bar-color: #eee;
}

/* Mobile in portrait */
@media (max-width: 768px) and (orientation: portrait),
/* Mobile in landscape */
(max-height: 500px) and (orientation: landscape) {
    .dashboard__item {
        height: 15rem;
    }
}

/*.dashboard__item:hover {
    color: #BF0404;
}*/

.dashboard__icon {
    font-size: 4.8rem;
}

/* Mobile in portrait */
@media (max-width: 768px) and (orientation: portrait),
/* Mobile in landscape */
(max-height: 500px) and (orientation: landscape) {
    .dashboard__icon {
        font-size: 3.8rem;
    }
}

.dashboard__title {
    margin-top: 1rem;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.05rem;
}

/* Mobile in portrait */
@media (max-width: 768px) and (orientation: portrait),
/* Mobile in landscape */
(max-height: 500px) and (orientation: landscape) {
    .dashboard__title {
        font-size: 2rem;
    }
}

.validation-message > div,
.validation-message > span {
    margin: 2rem 0;
    padding: 2rem;
    color: #947600;
    background: #fffbeb;
    border-radius: 1rem;
}

.validation-message--error > div,
.validation-message--error > span {
    color: #BF0404;
    background: #f0c7c7;
}

.validation-message--success > div,
.validation-message--success > span {
    color: #48c774;
    background: #dfffea;
}

.form__field label {
    margin-bottom: 1.3rem;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
}

@media screen and (min-width: 800px) {
    .page .dashboard__inner.dashboard__inner_w1 > .dashboard__item {
        width: calc(100% / 1 - 50px);
    }

    .page .dashboard__inner.dashboard__inner_w2 > .dashboard__item {
        width: calc(100% / 2 - 50px);
    }

    .page .dashboard__inner.dashboard__inner_w3 > .dashboard__item {
        width: calc(100% / 3 - 50px);
    }

    .page .dashboard__inner.dashboard__inner_w4 > .dashboard__item {
        width: calc(100% / 4 - 50px);
    }

    .page .dashboard__inner.dashboard__inner_w5 > .dashboard__item {
        width: calc(100% / 5 - 50px);
    }

    .page .dashboard__inner.dashboard__inner_w6 > .dashboard__item {
        width: calc(100% / 6 - 50px);
    }
}

.page .dashboard__inner > .dashboard__item.dashboard__item__progress {
    height: 200px;
}

:root {
    --progress-bar-width: 100px;
    --progress-bar-height: 100px;
    --progress-bar-color: #eee;
}

.page .circular-progress {
    width: var(--progress-bar-width);
    height: var(--progress-bar-height);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    background: conic-gradient(var(--accent-color) 0deg, var(--progress-bar-color) 0deg);
    transition: background 1s;
}

    .page .circular-progress > .inner-circle {
        position: absolute;
        width: calc(var(--progress-bar-width) - 2rem);
        height: calc(var(--progress-bar-height) - 2rem);
        border-radius: 50%;
        background-color: var(--background);
    }

    .page .circular-progress > .percentage {
        position: relative;
        font-size: 4rem;
        color: var(--font-color);
        margin: 0;
    }