@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

@font-face 
{
    font-family: 'DSDigital';
    src: url('../fonts/DS-DIGI.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

*
{
    font-family: 'Poppins', Arial;
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    position: relative;
    border: none;
    outline: none;
    box-shadow: none;
}

a,
.discreteLink
{
    text-decoration: none;
    font-weight:bold;
    color:var(--secundary-bg-color);
    cursor:pointer;
}

    .discreteLink
    {
        color:black;
        font-weight: normal;
        text-decoration-line: underline;
        font-size:0.8rem;
    }

input,
textarea
{
    border:2px solid black;
    border-radius: 3px;
    padding:5px;
}

    #txtUserPwd
    {
        padding-right:12%;
    }

p
{
    margin-top:revert;
}

hr
{
    border-style:inset;
    border-width: 1px;
}

ul
{
    padding: revert;
    list-style-type: disc;
}

button
{
    border:revert;
    padding:revert;
}

body
{
    width: 50%;
    height: 100vh;
    margin:auto;
    padding-top:10vmin;
    font-size: 16px;
    color: var(--main-text-color);
}

    #menu 
    {
        display: flex;
    }

        #menu img
        {
            width:32px;
            border-radius:6px;
        }

            #menu img:hover
            {
                background-color:var(--tertiary-bg-color);
            }

        #menu .menu_button
        {
            cursor:pointer;
        }

            #menu .menu_button:not(:last-child)
            {
                margin-right:1vw;
            }

        #searchbar
        {
            display: flex;
            width:100%;
        }

        #searchbar input
        {
            width:100%;
        }

    #content
    {
        width:100%;
        height:calc(100% - 15vmin);
        overflow: auto;
        margin-top:1vmin;
        border-top:1px solid var(--main-bg-color);
        border-bottom:1px solid var(--main-bg-color);

        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        #qrGrid
        {
            display:grid;
            grid-template-columns: repeat(53, 1fr);
            grid-template-rows: repeat(53, 1fr);
        }

            #qrGrid > div
            {
                padding-bottom:100%;
            }

            .qrFilled
            {
                background-color:rgb(0, 0, 0);
            }

            .qrFilledAdmin
            {
                background-color:rgba(160, 160, 0, 0.75);
            }

            .qrEmpty,
            .qrFixedEmpty,
            .qrEmptyAdmin
            {
                background-color:rgba(255, 255, 255, 0);
            }

            .qrFixedFilled
            {
                background-color:var(--secundary-bg-color);
            }

            .qrFixedEmptyAdmin
            {
                background-color:rgba(255, 192, 203, 0.75);
            }

            .qrFixedFilledAdmin
            {
                background-color:rgba(255, 0, 0, 0.75);
            }

        #challenge
        {
            width:100%;
            height:100%;
        }

            .challengeContent
            {
                display:flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }

                .challengeText img
                {
                    max-width:100%;
                }

            .challengeText
            {
                margin:1vw 0px;
                text-align:center;
            }

        #countdown
        {
            font-size:5rem;
            font-family: 'DSDigital';
        }

    #footer
    {
        font-size:0.8rem;
        text-align: end;
    }

    #popUpOverlay
    {
        z-index: 100000;
        position:fixed;
        top:0px;
        left:0px;
        width:100vw;
        height:100vh;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color:rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s;
    }

        #popUp
        {
            width:40vw;
            height:50vh;
            background-color: white;
            border-radius: 6px;
            padding:15px;
            display:flex;
            flex-direction: column;
        }

            #popUpClose
            {
                position:absolute;
                top:15px;
                right:15px;
                cursor:pointer;
                transition: transform 0.5s;
                transform-origin: 50% 50%;
            }
                
                #popUpClose:hover
                {
                    transform:rotate(90deg);
                }

                #popUpClose img
                {
                    width:5vmin;
                    min-width:16px;
                    max-width:32px;
                }

            #popUpContent
            {
                width:100%;
                border-top:1px solid black;
                padding-top:5px;
                overflow: auto;
            }

    .togglePwdVisibility
    {
        position:absolute;
        right:5px;
        aspect-ratio: 1 / 1;
        height:100%;
        background-image:url('/img/visible_on.png');
        background-size: cover; 
        cursor:pointer;
    }

    .form
    {
        width:50%;
        display:flex;
        flex-direction: column;
        justify-content: center;
        background-color:var(--bloc-bg-color);
        border-radius:6px;
        padding:1vw 3vw;
    }

        .form label
        {
            font-style: italic;
            color:var(--discrete-text-color);
            font-size:0.8rem;
        }

        .form .discreteLink
        {
            text-align:right;
        }

        .form .row
        {
            display:flex;
            flex-direction: column;
            justify-content: center;
        }

    .title
    {
        font-size: clamp(1rem, 1rem + 1vw, 2rem);
        font-weight: bold;
    }

    .flex_filler
    {
        flex-grow: 1;
    }

    .important
    {   
        font-weight:bold;
    }

    .discrete
    {   
        font-size: clamp(0.5rem, 0.5rem + 1vw, 0.8rem);
    }

    .critical
    {
        font-weight:bold;
        border-color:var(--error-text-color);
    }

    .message
    {
        border-radius: 3px;
        padding:5px;
        margin-top:5px;
        background-color:white;
        color:white;
        visibility: hidden;
    }
            
        .messageError
        {
            background-color:var(--error-text-color);
            visibility:visible;
        }

        .messageSuccess
        {
            background-color:var(--success-text-color);
            visibility:visible;
        }

        .messageInfo
        {
            background-color:var(--info-text-color);
            visibility:visible;
        }

    .prettyBtn
    {
        font-size: 1.5rem;
        color:white;
        padding:10px 20px;
        margin:10px 0px;
        background-color: var(--secundary-bg-color);
        border-radius:4px;
        cursor:pointer;
    }

    .annoying
    {
        text-align:center; 
        background-image:url('/img/seizure.gif'); 
        background-size: cover; 
        font-weight:bold; 
        color:pink;  
        text-shadow:
               -2px -2px 0 black,
                2px -2px 0 black,
               -2px 2px 0 black,
                2px 2px 0 black;
    }

    .hidden
    {
        visibility:hidden;
    }

/* LIST */
.listContainer
{
    position:fixed;
    left:10px;
    top:10px;
    width:20%;
    height:calc(100% - 20px);
    display:flex;
    flex-direction: column;
    align-items: center;
    border:2px solid black;
    background-color:var(--bloc-bg-color);
    border-radius:6px;
    padding:10px;
}

    .list
    {
        border:1px solid black;
        background-color:white;
        margin:20px;
        width:100%;
        height:90%;
        overflow: auto;
    }

    #challengesCounters
    {
        width:100%;
    }

        .listItem
        {
            cursor:pointer;
            padding:0px 3px;
        }

            .listItem:hover
            {
                background-color:var(--tertiary-bg-color);
                color:white;
            }

                .listItem.selected
                {
                    background-color:var(--secundary-bg-color);
                    color:white;
                }

                .listItemAltColor
                {
                    background-color:var(--quartery-bg-color);
                }

            .listItem img,
            #challengesCounters img
            {
                width : 24px;
                vertical-align: middle;
            }

    .listControls
    {
        align-self: self-start;
    }

        .listControls img
        {
            width:32px;
            border-radius: 6px;
            cursor:pointer;
        }

            .listControls img:hover
            {
                background-color:var(--tertiary-bg-color);
            }

/* RESPONSIVE */
@media only screen and (max-device-width : 1024px)
{
    body
    {
        width: 90%;
        height: 100vh;
    }

    .form
    {
        width:100%;
    }

    #popUp
    {
        width:90vw;
        height:90vh;
    }
}