@font-face {
    font-family: Poppins-Medium;
    src: url('../fonts/Poppins-Medium.ttf');
}

@font-face {
    font-family: Poppins-Bold;
    src: url('../fonts/Poppins-Bold.ttf');
}

@font-face {
    font-family: Roboto-Bold;
    src: url('../fonts/Roboto-Bold.ttf');
}

@font-face {
    font-family: Roboto-Regular;
    src: url('../fonts/Roboto-Regular.ttf');
}

:root {
    --pal2: rgb(17, 207, 255);
    --pal3: rgb(62, 187, 255);
    --pal4: rgb(62, 187, 255);
    --yes: rgb(47, 188, 40);
    --no: rgb(255, 55, 55);
    --a: #fafafc;
    --b: #fff;
    --c: rgb(43, 43, 43);
    --d: rgb(208, 208, 208);
    --e: rgb(76, 76, 76);
    --pal1: #fafafc;
    --pal15: #fff;
    --text: rgb(43, 43, 43);
    --ozo1: #aae0fa;
    --ozo2: #40c8f4;
    --ozo3: #00aeef;
    --ozo4: #4ee4ff;


    --verde: rgb(88, 209, 108);
    --rosso: rgb(255, 80, 80);
    --pagina: #fafafc;
    --scheda: #fff;
    --testo: rgb(43, 43, 43);
    /* text */
    --disabilitato: rgb(208, 208, 208);
    /* d */
    --celeste: #aae0fa;
    /* pal2, ozo1 */
    --ciano: #40c8f4;
    /* pal3, ozo2 */
    --blu: #00aeef;
    /* pal4, ozo3 */

    --green: rgb(88, 209, 108);
    --red: rgb(255, 80, 80);
    --page: #fafafc;
    --card: #fff;
    --text: rgb(43, 43, 43);
    /* text */
    --disabled: rgb(208, 208, 208);
    /* d */
    --lightBlue: #aae0fa;
    /* pal2, ozo1 */
    --cyan: #40c8f4;
    /* pal3, ozo2 */
    --blue: #00aeef;
    /* pal4, ozo3 */
    --yellow: rgb(255, 217, 0);
}

* {
    font-family: Poppins-Medium, Roboto-Medium;
}

body {
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: var(--a);
    color: var(--c);
    margin: 0px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

p,
label {
    font-family: Poppins-Medium;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
label {
    margin: 0;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.bold,
input {
    font-family: Poppins-Bold;
    background-color: transparent;
}

input:focus {
    outline: none;
}

label {
    cursor: pointer;
    color: var(--c);
}

#main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 400px;

    #page {

        display: flex;
        flex-direction: row;
        width: 100%;

        #left {
            display: flex;
            flex-direction: column;
            width: 100%;

            #form {
                display: none;
                justify-content: center;
                animation: opacity 0.3s ease-in-out;
            }

            #cards {
                display: none;
                flex-wrap: wrap;
                justify-content: center;
                animation: opacity 0.3s ease-in-out;
            }

            #vista {
                display: none;
                justify-content: center;
                animation: opacity 0.3s ease-in-out;
            }

            #report {
                display: none;
                justify-content: center;
                animation: opacity 0.3s ease-in-out;
            }
        }

        #alarm {
            flex: 0.01;
            display: none;
            flex-direction: column;
            justify-content: center;

            
            max-width: fit-content;
            max-height: fit-content;
            padding: 10px 20px 10px;
            margin: 20px;
            background-color: var(--scheda);
            outline: 4px solid var(--red);

            border-radius: 18px;
            box-shadow: 2px 4px 12px #00000014;

            p {
                text-align: center;
                font-size: 20px;
                margin: 15px 5px 15px;
                line-height: 22px;
                color: var(--no)
            }
        }
    }



}




@keyframes opacity {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}