@import url('../../../resources/fonts/CabinetGrotesk/css/cabinet-grotesk.css');
@import url('./module_buttons.css');

:root
{
    --font-family: 'CabinetGrotesk-Variable', sans-serif;

    --color-primary: #1a73e8;
    --color-text-on-primary: #ffffff;

    --color-text: #333333;
    --color-background: #ffffff;
    --color-border: #dddddd;
}

*
{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body,html
{
    font-family: var(--font-family);
    color: var(--color-text);
    background-color: var(--color-background);
}

    main
    {
        position: relative;
    }

    .badge
    {
        padding: 0.25rem 0.5rem;
        background-color: #ccc;
        color: #fff;
        border-radius: 100rem;
        -webkit-border-radius: 100rem;
        -moz-border-radius: 100rem;
        -ms-border-radius: 100rem;
        -o-border-radius: 100rem;
        font-size: 0.75rem;
    }

        .badge.positive
        {
            background-color: #28a745;
        }

        .badge.negative
        {
            background-color: #dc3545;
        }

        .badge.warning
        {
            background-color: #e4ab00;
            color: #fff;
        }

    /* Button-Stile → module_buttons.css */

    /* Screenreader-only (WCAG) */
    .sr-only
    {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }