@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root
{
    --font:      "DM Sans", sans-serif;

    --white:     255, 255, 255;
    --black:     14, 17, 17;
    --gray:      204, 199, 210;
    --lightgray: 233, 230, 237;
    --red:       235, 27, 30;
    --darkred:   146, 41, 33;
    --green:     0, 177, 113;
}

html, body
{
    font-family: var(--font);
    font-size:   13pt;
    font-weight: 500;
    color:       rgb(var(--black));
    margin:      0;
    padding:     0;
    background:  rgb(var(--white));
}

body
{
    width:           100%;
    display:         flex;
    align-items:     flex-start;
    align-content:   flex-start;
    justify-content: flex-start;
    flex-wrap:       wrap;
    overflow-x:      hidden;
}

body,
article,
img,
div,
table,
tr,
td,
p,
form,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
label,
span,
fieldset,
input,
:before,
:after
{
    border-width:    0;
    padding:         0;
    margin:          0;
    border-spacing:  0;
    border-collapse: collapse;
    text-indent:     0;
    box-sizing:      border-box;
    background-clip: padding-box !important;
}

h1
{
    font-size:   32pt;
    font-weight: 900;
    margin:      0 0 20px;
}

p
{
    margin:  0 0 20px;
    display: block;
}

a
{
    color: rgb(var(--black));

    &:hover
    {
        color: rgb(var(--red));
    }

    &:visited
    {
        color: rgb(var(--darkred));
    }
}

input
{
    &[type="text"],
    &[type="number"],
    &[type="email"]
    {
        font-family:   var(--font);
        font-weight:   500;
        font-size:     13pt;
        text-indent:   16px;
        padding:       0 44px 0 0;
        background:    rgb(var(--lightgray));
        border:        1px solid rgb(var(--gray));
        height:        54px;
        width:         100%;
        border-radius: 5px;
    }
}

:focus
{
    outline:        2px solid rgb(var(--black));
    outline-offset: 2px;
}

.width_50
{
    max-width: calc(50% - 32px);

    &:nth-of-type(odd)
    {
        margin-right: 32px;

        @media all and (width < 900px)
        {
            margin-right: 0;
        }
    }

    @media all and (width < 900px)
    {
        max-width: unset;
    }
}

.required
{
    & > span
    {
        &:not([popover])
        {
            &:after
            {
                content:    '';
                background: url('../images/required.svg') no-repeat right top/100% auto;
                margin:     0 0 0 4px;
                min-width:  10px;
                max-width:  10px;
                height:     16px;
                display:    inline-block;
            }
        }
    }
}

button, a.button
{
    &[type="submit"]
    {
        font-family:     var(--font);
        font-weight:     900;
        font-size:       16pt;
        color:           rgb(var(--white));
        border:          none;
        padding:         12px 24px;
        margin:          20px 0 0;
        background:      rgb(var(--darkred));
        border-radius:   12px;
        transition:      all 0.3s;
        cursor:          pointer;
        text-decoration: none;

        &:hover
        {
            background: rgb(var(--black));
        }
    }

    &.disabled
    {
        opacity: 0.5;
    }
}

article
{
    margin:    0 auto;
    padding:   24px;
    max-width: 1280px;
    position:  relative;

    & aside
    {
        &.loader
        {
            background:      rgba(var(--lightgray), 0.99);
            align-items:     center;
            align-content:   center;
            justify-content: center;
            display:         flex;
            position:        fixed;
            left:            0;
            top:             0;
            z-index:         99;
            width:           100%;
            height:          100vh;
            transition:      all 0.3s;

            &.out
            {
                opacity:    0;
                visibility: collapse;
            }

            & h2
            {
                text-align:      center;
                padding:         80px 10px 10px;
                align-items:     flex-start;
                align-content:   flex-start;
                justify-content: center;
                display:         flex;
                flex-direction:  column;
                position:        relative;

                &:before
                {
                    content:    '';
                    background: url('../images/loading.svg') no-repeat center center/100% 100%;
                    width:      48px;
                    height:     48px;
                    position:   absolute;
                    left:       calc(50% - 24px);
                    top:        20px;
                    animation:  loading 2s ease infinite;
                }

                & small
                {
                    width: 100%;
                }
            }
        }

        &.error
        {
            background:      rgba(var(--white), 0.75);
            width:           100%;
            height:          100dvh;
            display:         flex;
            align-items:     center;
            align-content:   center;
            justify-content: center;
            position:        fixed;
            left:            0;
            top:             0;
            z-index:         98;
            outline:         none;

            & > div
            {
                color:         rgb(var(--white));
                background:    rgb(var(--darkred));
                border:        3px solid rgb(var(--darkred));
                padding:       16px 32px 28px;
                margin:        0 20px 20px;
                max-width:     480px;
                border-radius: 8px;
                box-shadow:    0 0 30px rgba(var(--black), 0.15);
            }

            & h2
            {
                font-size: 24pt;
            }

            & button
            {
                color:      rgb(var(--darkred));
                background: rgb(var(--white));
                margin:     0;

                &:hover
                {
                    color:      rgb(var(--darkred));
                    background: rgb(var(--gray));
                }
            }
        }
    }

    & form
    {
        padding:         32px 0 32px 32px;
        border:          3px solid rgb(var(--darkred));
        border-radius:   25px;
        display:         flex;
        align-items:     flex-start;
        align-content:   flex-start;
        justify-content: flex-start;
        flex-wrap:       wrap;
        box-shadow:      0 0 30px rgba(var(--black), 0.15);
        position:        relative;

        @media all and (width < 900px)
        {
            padding:       16px 0 16px 16px;
            border-radius: 12px;
        }

        & aside
        {
            &.error
            {
                outline: none;
            }
        }

        & p
        {
            font-size: 16pt;
            width:     100%;
        }

        & .error,
        & .ok
        {
            &:after
            {
                /*font-size: 24pt;*/
                content: '';
                width:   20px;
                height:  20px;
                margin:  18px 0 0 -34px;
            }
        }

        & .error
        {
            outline:        2px solid rgb(var(--red));
            outline-offset: 2px;

            &:has(input[type="text"]),
            &:has(input[type="email"]),
            &:has(input[type="number"])
            {
                outline: none;
            }

            &:after
            {
                /*content:   '✖';*/
                /*color:     rgb(var(--red));*/
                background: url('../images/warning.svg') no-repeat center center /100% 100%;
            }

            & input
            {
                border-color:   rgb(var(--red));
                outline:        1px solid rgb(var(--red));
                outline-offset: 0;
            }
        }

        & .ok
        {
            &:after
            {
                /*content:   '✔';*/
                /*color:     rgb(var(--green));*/
                background: url('../images/check.svg') no-repeat center center /100% 100%;
            }

            & input
            {
                border-color: rgb(var(--green));
            }
        }

        & div.errors
        {
            color:      rgb(var(--white));
            background: rgb(var(--darkred));
            padding:    16px 24px 24px 32px;
            margin:     12px 0 0 -32px;
            position:   static;
            width:      calc(100% + 32px);

            @media all and (width < 900px)
            {
                margin:  12px 0 0 -16px;
                padding: 16px 16px 24px;
            }

            & h2
            {
                margin: 0 0 8px;
            }

            & ul
            {
                font-weight: 700;
                margin-left: 24px;
                line-height: 24px;
            }
        }

        & label
        {
            padding:         0;
            margin:          0 0 40px;
            display:         flex;
            align-items:     flex-start;
            align-content:   flex-start;
            justify-content: flex-start;
            flex-wrap:       wrap;
            width:           calc(100% - 32px);
            position:        relative;
            border-radius:   4px;

            @media all and (width < 900px)
            {
                width: calc(100% - 16px);
            }

            & label
            {
                margin: 0;
                width:  100%;
            }

            & span
            {
                font-weight: 700;
                font-size:   14pt;
                margin:      0 0 6px;

                @media all and (width < 900px)
                {
                    width: calc(100% - 28px);
                }

                & a
                {
                    margin-left: 4px;
                }

                &.pl
                {
                    position:       absolute;
                    left:           16px;
                    bottom:         8px;
                    color:          #757575;
                    pointer-events: none;
                }

            }

            &:has([type="checkbox"], [type="radio"])
            {
                margin:        0 0 12px;
                max-width:     calc(100% - 32px);
                border-radius: 4px;
                position:      relative;

                @media all and (width < 900px)
                {
                    max-width: 100%;
                }

                &.ok,
                &.error
                {
                    &:after
                    {
                        margin:   0;
                        top:      3px;
                        right:    5px;
                        position: absolute;
                    }
                }

                & input
                {
                    display: none;
                }

                & span
                {
                    &:not([popover])
                    {
                        margin:          0;
                        display:         flex;
                        align-items:     flex-start;
                        align-content:   flex-start;
                        justify-content: flex-start;
                        cursor:          pointer;

                        &:before
                        {
                            content:             '';
                            font-size:           0;
                            color:               rgb(var(--white));
                            background-color:    rgb(var(--black));
                            background-image:    url('../images/dot.svg');
                            background-repeat:   no-repeat;
                            background-position: 4px 4px;
                            background-size:     16px 16px;
                            padding:             0 4px;
                            margin:              -1px 8px 0 0;
                            min-width:           36px;
                            max-width:           36px;
                            height:              24px;
                            display:             inline-flex;
                            align-items:         center;
                            align-content:       center;
                            justify-content:     flex-start;
                            border-radius:       12px;
                            transition:          all 0.3s;
                        }

                        & ins
                        {
                            text-decoration: none;

                            &:after
                            {
                                content:    '';
                                background: url('../images/required.svg') no-repeat right top/100% auto;
                                margin:     0 0 0 4px;
                                min-width:  10px;
                                max-width:  10px;
                                height:     16px;
                                display:    inline-block;
                            }
                        }

                        &:has(a)
                        {
                            &:after
                            {
                                display: none;
                            }

                            & ins
                            {
                                display:         inline-block;
                                text-decoration: none;

                                &:after
                                {
                                    content:    '';
                                    background: url('../images/required.svg') no-repeat right top/100% auto;
                                    margin:     0 0 0 4px;
                                    min-width:  10px;
                                    max-width:  10px;
                                    height:     16px;
                                    display:    inline-block;
                                }
                            }
                        }

                        &:has(ins)
                        {
                            &:after
                            {
                                display: none;
                            }
                        }
                    }
                }
            }

            &:has([type="checkbox"]:checked, [type="radio"]:checked),
            &:has([checked])
            {
                & span
                {
                    &:not([popover])
                    {
                        &:before
                        {
                            background-color:    rgb(var(--red));
                            background-position: 16px 4px;
                            padding:             0 4px 0 16px;
                        }
                    }
                }
            }

            &.gdpr
            {
                margin-bottom: 4px;
            }
        }

        & > label
        {
            &:has([type="checkbox"], [type="radio"])
            {
                margin-bottom: 24px;

                &.gdpr
                {
                    margin-bottom: 4px;
                }
            }
        }

        a.policy_link
        {
            font-weight: bold;
            margin:      0 12px 12px 44px;
        }

        & .divider
        {
            margin: 0;
            border: none;
            width:  100%;
        }

        & [popover]
        {
            font-weight:   500;
            font-size:     13pt;
            margin:        10px 0 0;
            background:    rgb(var(--white));
            padding:       12px;
            min-width:     300px;
            max-width:     400px;
            box-shadow:    0 0 20px -5px rgba(var(--black), 0.25);
            position-area: bottom center;

            &:popover-open
            {
                display:         inline-flex;
                align-items:     flex-start;
                align-content:   flex-start;
                justify-content: space-between;
            }

            & button
            {
                &[popovertarget]
                {
                    font-size:       0;
                    margin:          0 0 0 8px;
                    padding:         0;
                    background:      none;
                    min-width:       20px;
                    max-width:       20px;
                    height:          20px;
                    align-items:     center;
                    align-content:   center;
                    justify-content: center;
                    display:         inline-flex;

                    &:before
                    {
                        /*content: '✖';*/
                        /*color:   rgb(var(--black));*/
                        content:       '';
                        background:    url('../images/close.svg') no-repeat center center/100% 100%;
                        margin:        auto;
                        width:         12px;
                        height:        12px;
                        filter:        brightness(0) saturate(100%) invert(0%) sepia(97%) saturate(0%) hue-rotate(24deg) brightness(91%) contrast(102%);
                        border-radius: 0;
                    }
                }
            }
        }

        & button
        {
            &[popovertarget]
            {
                font-family:     var(--font);
                font-weight:     900;
                font-size:       13pt;
                color:           rgb(var(--white));
                border:          none;
                background:      rgb(var(--black));
                margin:          0 0 0 8px;
                width:           20px;
                height:          20px;
                display:         flex;
                align-items:     center;
                align-content:   center;
                justify-content: center;
                border-radius:   50%;
                cursor:          pointer;
                position:        relative;
                z-index:         2;
            }
        }

        & fieldset
        {
            margin:          0 0 20px;
            width:           calc(100% - 32px);
            display:         flex;
            align-items:     flex-start;
            align-content:   flex-start;
            justify-content: flex-start;
            flex-wrap:       wrap;
            border-radius:   4px;
            position:        relative;

            @media all and (width < 900px)
            {
                width: calc(100% - 16px);
            }

            &.ok,
            &.error
            {
                &:after
                {
                    margin:   0;
                    top:      8px;
                    right:    8px;
                    position: absolute;
                    z-index:  1;
                }
            }

            & > span
            {
                font-weight: 700;
                font-size:   14pt;
                margin:      0 0 20px;

                @media all and (width < 900px)
                {
                    margin-right: 0;
                    width:        calc(100% - 28px);
                }
            }
        }
    }

    & section
    {
        &.success
        {
            margin:          40px 0 20px;
            padding:         32px 0 32px 32px;
            border:          3px solid rgb(var(--green));
            border-radius:   25px;
            display:         flex;
            align-items:     flex-start;
            align-content:   flex-start;
            justify-content: flex-start;
            flex-wrap:       wrap;
            box-shadow:      0 0 30px rgba(var(--black), 0.15);

            & h2,
            & p
            {
                width: 100%;
            }
        }

        &.red
        {
            border-color: rgb(var(--darkred));
        }
    }
}

@keyframes loading
{
    0%
    {
        transform: rotate(0deg);
    }

    80%
    {
        transform: rotate(360deg);
    }

    100%
    {
        transform: rotate(360deg);
    }
}

[v-cloak]
{
    display: none !important;
}

.attendance
{
    padding:         40px;
    margin:          0;
    max-width:       unset;
    width:           100vw;
    height:          100dvh;
    background:      #DDE1E3;
    display:         flex;
    align-items:     flex-start;
    align-content:   flex-start;
    justify-content: flex-start;
    flex-direction:  column;
    overflow-y:      auto;

    & h1
    {
        font-size:       40pt;
        text-transform:  uppercase;
        display:         inline-flex;
        align-items:     flex-start;
        align-content:   flex-start;
        justify-content: flex-start;
        flex-wrap:       wrap;
        flex-direction:  column;
        flex-grow:       0;
        margin:          0;

        @media all and (width < 1000px)
        {
            font-size: 16pt;
        }

        & img
        {
            margin:    0 0 20px;
            max-width: 280px;
        }

        & span
        {
            font-size:   192pt;
            line-height: 192pt;

            @media all and (width < 1000px)
            {
                font-size:   48pt;
                line-height: 48pt;
            }
        }
    }

    & ul
    {
        margin:          40px 0 0;
        padding:         0;
        list-style:      none;
        display:         flex;
        align-items:     flex-start;
        align-content:   flex-start;
        justify-content: flex-start;
        flex-direction:  column;
        gap:             10px;

        & li
        {
            font-size: 48pt;

            @media all and (width < 1000px)
            {
                font-size: 16pt;
            }
        }
    }
}

.sr-only
{
    position: absolute;
    width:    1px;
    height:   1px;
    padding:  0;
    margin:   -1px;
    overflow: hidden;
    clip:     rect(0, 0, 0, 0);
    border:   0;
}