#background {
    background-color: var(--content-background);
    background-position: center;
    background-size: cover;
}

input {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 3px solid white !important;
    box-shadow: 0 4px 10px 0 var(--primary-color) !important;
    text-shadow: 0px 0px 10px white, 
        -2px -2px 0 white, 2px 2px 0 white,
        -2px 2px 0 white, 2px -2px 0 white,
        2px 0 0 white, 0px 2px 0 white,
        -2px 0 0 white, 0 -2px 0 white;
    color: var(--primary-color) !important;
    font-weight: bold;
}
input.no-border {
    border: none !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--primary-color) !important;
}

label {
    font-weight: bold !important;
    font-size: 22px;
    text-shadow: 0px 0px 10px white, 
        -2px -2px 0 white, 2px 2px 0 white,
        -2px 2px 0 white, 2px -2px 0 white,
        2px 0 0 white, 0px 2px 0 white,
        -2px 0 0 white, 0 -2px 0 white;
    color: var(--primary-color);
}
span.input-group-addon {
    background: transparent;
    border: none;
    border-bottom: 3px solid white;
    color: var(--primary-color);
    text-shadow: 0px 0px 10px white, 
        -2px -2px 0 white, 2px 2px 0 white,
        -2px 2px 0 white, 2px -2px 0 white,
        2px 0 0 white, 0px 2px 0 white,
        -2px 0 0 white, 0 -2px 0 white;
    box-shadow: 0 4px 10px 0 var(--primary-color) !important;
}
button {
    font-size: 15px !important;
    color: white !important;
    font-weight: bold !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    height: 34px !important;
}

.body-sign {
    display: table;
    height: 100vh;
    margin: 0 auto;
    max-width: 500px;
    padding: 0 15px;
    width: 100%;
    font-family: 'Baloo 2', sans-serif;
}
.body-sign .center-sign {
    display: table-cell;
    padding-top: 20px;
    vertical-align: middle;
}

label {
    font-weight: lighter;
}

.form-control {
    height: 34px;
}


#login_panel {
    background-color: #ffffff54;
    position: relative;
    z-index: 10;
    opacity: 0;
    animation-name: login_panel;
    animation-duration: 0s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
}


.epi-detection {
    height: 6.45161292vw;
    width: 6.45161292vw;
    background: transparent;
    border-radius: 100%;
    box-shadow: 0 0 0 0.53763441vw white, 0 0 1.07526882vw 1.07526882vw var(--primary-color), 0 0 1.07526882vw 0.53763441vw inset var(--primary-color);
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.494623665vw;
    color: white;
    text-shadow: 0 0 0.806451615vw var(--primary-color),
        -0.107526882vw -0.107526882vw 0.53763441vw var(--primary-color), 0.107526882vw 0.107526882vw 0.53763441vw var(--primary-color),
        -0.107526882vw 0.107526882vw 0.53763441vw var(--primary-color), 0.107526882vw -0.107526882vw 0.53763441vw var(--primary-color),
        0.107526882vw 0 0.53763441vw var(--primary-color), 0px 0.107526882vw 0.53763441vw var(--primary-color),
        -0.107526882vw 0 0.53763441vw var(--primary-color), 0 -0.107526882vw 0.53763441vw var(--primary-color);
    z-index: 9;
    animation-name: blink;
    animation-duration: 0ms;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    opacity: 0;
}
#helmet_detection {
    left: 41.774vw;
    bottom: 42.774vw;
}
#earmuffs_detection {
    left: 30.774vw;
    bottom: 29.544vw;
    box-shadow: 0 0 0 0.53763441vw white, 0 0 1.07526882vw 1.07526882vw #b83b3b, 0 0 1.07526882vw 0.53763441vw inset #b83b3b;
    text-shadow: 0 0 0.806451615vw #b83b3b,
        -0.107526882vw -0.107526882vw 0.53763441vw #b83b3b, 0.107526882vw 0.107526882vw 0.53763441vw #b83b3b,
        -0.107526882vw 0.107526882vw 0.53763441vw #b83b3b, 0.107526882vw -0.107526882vw 0.53763441vw #b83b3b,
        0.107526882vw 0 0.53763441vw #b83b3b, 0px 0.107526882vw 0.53763441vw #b83b3b,
        -0.107526882vw 0 0.53763441vw #b83b3b, 0 -0.107526882vw 0.53763441vw #b83b3b;
}
#safety_vest_detection {
    left: 46.774vw;
    bottom: 17.774vw;
}
#glove_detection {
    left: 34.774vw;
    bottom: 7.274vw;
}

#worker_img {
    position: fixed;
    left: -17.11828vw;
    bottom: 1.19vh;
    z-index: 6;
    width: 51vw;
    animation-name: worker;
    animation-duration: 0s;
}

/* Foreground counter/desk, cut from the same frame as #background. Uses the same
   cover/center framing so it lines up pixel-for-pixel with the background, drawing
   over the worker (both z-index 6; this element is later in the DOM). Non-interactive
   so it never intercepts clicks on the login form. */
#foreground_component {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    z-index: 6;
}

.epi-connection {
    position: fixed;
    z-index: 7;
    filter: drop-shadow(0px 0px 3px var(--primary-color));
    width: 18.81720435vw;
}
.epi-connection.wrong {
    filter: drop-shadow(0px 0px 3px #b83b3b);
}
#helmet_connection {
    left: 18.0vw;
    bottom: 45.0vw;
    width: 24.77vw;
    height: 2.0vw;
}
#earmuffs_connection {
    left: 22.0vw;
    bottom: 35.0vw;
    width: 13.0vw;
    height: 4.77vw;
}
#safety_vest_connection {
    left: 20.0vw;
    bottom: 16.0vw;
    width: 27.77vw;
    height: 6.0vw;
}
#glove_connection {
    left: 26.0vw;
    bottom: 9.5vw;
    width: 9.77vw;
    height: 6.0vw;
}

.epi-svg-detection {
    position: fixed;
    stroke-dashoffset: 503px;
    stroke: white;
    stroke-width: 0.645161292vw;
    filter: drop-shadow(0px 0px 0.53763441vw var(--primary-color));
    width: 9.67741938vw;
    z-index: 8;
}
.epi-svg-detection.wrong {
    filter: drop-shadow(0px 0px 0.53763441vw #b83b3b);
}
#helmet_svg_detection {
    left: 40.161vw;
    bottom: 41.161vw;
    transform:rotate(-180deg)
}
#earmuffs_svg_detection {
    left: 29.161vw;
    bottom: 27.931vw;
    transform:rotate(90deg)
}
#safety_vest_svg_detection {
    left: 45.161vw;
    bottom: 16.161vw;
    transform:rotate(-180deg)
}
#glove_svg_detection {
    left: 33.161vw;
    bottom: 5.661vw;
    transform:rotate(-180deg)
}

@keyframes worker {
    0%   {opacity: 0; left: -11.74193590vw;}
    100% {opacity: 1; left: -17.11828vw;}
}

@keyframes blink {
    0%   {opacity: 1;}
    25%  {opacity: 0;}
    50%  {opacity: 1;}
    75%  {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes login_panel {
    0%   {opacity: 0; margin-left: 20px;}
    100% {opacity: 1; margin-left: 0;}
}

@media screen and (max-aspect-ratio: 1/1){
    #worker_img {
        left: -59vw;
        width: 161vw;
    }
    .epi-detection {
        height: 21.45161292vw;
        width: 21.45161292vw;
        box-shadow: 0 0 0 1.8vw white, 0 0 3.5vw 3.5vw var(--primary-color), 0 0 3.5vw 1.5vw inset var(--primary-color);
        font-size: 12vw;
        text-shadow: 0 0 2vw var(--primary-color),
        -0.5vw -0.5vw 2vw var(--primary-color), 0.5vw 0.5vw 2vw var(--primary-color),
        -0.5vw 0.5vw 2vw var(--primary-color), 0.5vw -0.5vw 2vw var(--primary-color),
        0.5vw 0 2vw var(--primary-color), 0px 0.5vw 2vw var(--primary-color),
        -0.5vw 0 2vw var(--primary-color), 0 -0.5vw 2vw var(--primary-color);
        animation-delay: 0s;
    }
    #safety_vest_detection {
        right: 11vw;
        top: 8vw;
        left: auto;
        bottom: auto;
    }
    #helmet_detection {
        left: 11vw;
        top: 8vw;
        bottom: auto;
    }
    #earmuffs_detection {
        left: 11vw;
        top: 41vw;
        bottom: auto;
        box-shadow: 0 0 0 1.8vw white, 0 0 3.5vw 3.5vw #b83b3b, 0 0 3.5vw 1.5vw inset #b83b3b;
        text-shadow: 0 0 2vw #b83b3b,
            -0.5vw -0.5vw 2vw #b83b3b, 0.5vw 0.5vw 2vw #b83b3b,
            -0.5vw 0.5vw 2vw #b83b3b, 0.5vw -0.5vw 2vw #b83b3b,
            0.5vw 0 2vw #b83b3b, 0px 0.5vw 2vw #b83b3b,
            -0.5vw 0 2vw #b83b3b, 0 -0.5vw 2vw #b83b3b;
    }
    #glove_detection {
        right: 11vw;
        top: 41vw;
        left: auto;
        bottom: auto;
    }
    .epi-connection {
        display: none;
    }
    .epi-svg-detection {
        display: none;
    }

    #login_panel {
        animation-delay: 0s;
    }

    @keyframes worker {
        0%   {opacity: 0; left: -52vw;}
        100% {opacity: 1; left: -59vw;}
    }
}