:root {
    --cls-color-light: #FFFFFF;
    --cls-color-dark: #141D4E;
    --cls-color-blue: #505AB6;
    --cls-color-turquoise: #03E6AD;
    --cls-color-turquoise-light: #E6FFF8;
    --cls-color-background: #FFFFFF;
}

/* Texts */
.cls-text-light {
    color: var(--cls-color-light) !important;
}

.cls-text-dark {
    color: var(--cls-color-dark) !important;
}

.cls-text-blue {
    color: var(--cls-color-blue) !important;
}

.cls-text-turquoise {
    color: var(--cls-color-turquoise) !important;
}

/* backgrounds */
.cls-bg-white {
    background-color: var(--cls-color-background) !important;
}

.cls-bg-dark {
    background-color: var(--cls-color-dark) !important;
}

.cls-bg-blue {
    background-color: var(--cls-color-blue) !important;
}

.cls-bg-turquoise {
    background-color: var(--cls-color-turquoise) !important;
}

/* Полезные классы для интерфейса */
.cls-page-title {
    color: var(--cls-color-dark) !important;
    font-weight: 800 !important;
}

.cls-section-title {
    color: var(--cls-color-dark) !important;
    font-weight: 700 !important;
}

.cls-accent-text {
    color: var(--cls-color-blue) !important;
}

.cls-highlight-text {
    color: var(--cls-color-turquoise) !important;
}

/*buttons*/
.cls-button-primary {
    background-color: var(--cls-color-blue) !important;
    color: white !important;
}

.cls-button-secondary {
    background-color: var(--cls-color-turquoise) !important;
    color: var(--cls-color-dark) !important;
}

.cls-link {
    color: var(--cls-color-blue) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

    .cls-link:hover {
        color: var(--cls-color-turquoise) !important;
        text-decoration: underline !important;
    }




/*<MudText Typo="Typo.h4" Style="color: var(--cls-color-dark);" >
Вітаємо на платформі!
</MudText >*/


/*<MudCard Class="cls-bg-white pa-6" >
<MudText Typo="Typo.h5" Class="cls-section-title" >
Аналітичний центр
</MudText >

<MudText Typo="Typo.body2" Class="cls-text-dark mt-2" >
Дослідження, цифрова стратегія, програма заходів та презентація донору.
</MudText >

<MudButton Variant="Variant.Filled"
Class="mt-4"
Style="background-color: var(--cls-color-blue); color: white;" >
Відкрити
</MudButton >
</MudCard >*/

/*<MudButton Variant="Variant.Filled" Class="cls-button-primary" >
Перейти до інструменту
</MudButton >
*/

/*<MudLink Href="/community/tools" Class="cls-link" >
Відкрити інструменти громади
</MudLink >*/