/* The illustration's unit (#425).

   Every offset and size in the composition below -- the worker, the four
   detection circles, their connectors and their SVG arcs -- was authored in
   `vw`, and `worker2_blue.png` is square, so `width: 51vw` set the worker's
   HEIGHT from the viewport's WIDTH. The only breakpoint was
   `max-aspect-ratio: 1/1`, i.e. portrait, so nothing bounded the composition on
   a viewport WIDER than the 16:9 it was drawn for: at 1920x900 the worker stood
   109% of the viewport tall and the helmet circle's top edge sat at 105%, both
   clipped by the top of the screen.

   So the numbers are kept and the unit is bounded instead. `--stage-u` is 1vw
   until the viewport passes 16:9 and 1/100th of a 16:9-of-this-height box after
   that, which keeps the whole composition scaling as one piece -- the circles
   mark points on the worker's body and have to move by the same factor he does.
   Below 16:9, including every portrait viewport, `min()` picks `1vw` and every
   value is what it always was. */
:root {
    --stage-u: min(1vw, 1.77778vh);
}

#background {
    background-color: var(--content-background);
    /* #425: deliberately NOT bottom-anchored, unlike #foreground_component below.
       safewatchbg4.jpg is 1618x1079 (3:2), so `cover` already overflows vertically
       from 1.500 on -- anchoring it would move a ratio that was never broken, and at
       2560x1080 it crops the ceiling and horizon away entirely, leaving bare floor.
       Compared side by side against the anchored variant before choosing this. */
    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: calc(6.45161292 * var(--stage-u));
    width: calc(6.45161292 * var(--stage-u));
    background: transparent;
    border-radius: 100%;
    box-shadow: 0 0 0 calc(0.53763441 * var(--stage-u)) white, 0 0 calc(1.07526882 * var(--stage-u)) calc(1.07526882 * var(--stage-u)) var(--primary-color), 0 0 calc(1.07526882 * var(--stage-u)) calc(0.53763441 * var(--stage-u)) inset var(--primary-color);
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(3.494623665 * var(--stage-u));
    color: white;
    text-shadow: 0 0 calc(0.806451615 * var(--stage-u)) var(--primary-color),
        calc(-0.107526882 * var(--stage-u)) calc(-0.107526882 * var(--stage-u)) calc(0.53763441 * var(--stage-u)) var(--primary-color), calc(0.107526882 * var(--stage-u)) calc(0.107526882 * var(--stage-u)) calc(0.53763441 * var(--stage-u)) var(--primary-color),
        calc(-0.107526882 * var(--stage-u)) calc(0.107526882 * var(--stage-u)) calc(0.53763441 * var(--stage-u)) var(--primary-color), calc(0.107526882 * var(--stage-u)) calc(-0.107526882 * var(--stage-u)) calc(0.53763441 * var(--stage-u)) var(--primary-color),
        calc(0.107526882 * var(--stage-u)) 0 calc(0.53763441 * var(--stage-u)) var(--primary-color), 0px calc(0.107526882 * var(--stage-u)) calc(0.53763441 * var(--stage-u)) var(--primary-color),
        calc(-0.107526882 * var(--stage-u)) 0 calc(0.53763441 * var(--stage-u)) var(--primary-color), 0 calc(-0.107526882 * var(--stage-u)) calc(0.53763441 * var(--stage-u)) var(--primary-color);
    z-index: 9;
    animation-name: blink;
    animation-duration: 0ms;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    opacity: 0;
}
#helmet_detection {
    left: calc(41.774 * var(--stage-u));
    bottom: calc(42.774 * var(--stage-u));
}
#earmuffs_detection {
    left: calc(30.774 * var(--stage-u));
    bottom: calc(29.544 * var(--stage-u));
    box-shadow: 0 0 0 calc(0.53763441 * var(--stage-u)) white, 0 0 calc(1.07526882 * var(--stage-u)) calc(1.07526882 * var(--stage-u)) #b83b3b, 0 0 calc(1.07526882 * var(--stage-u)) calc(0.53763441 * var(--stage-u)) inset #b83b3b;
    text-shadow: 0 0 calc(0.806451615 * var(--stage-u)) #b83b3b,
        calc(-0.107526882 * var(--stage-u)) calc(-0.107526882 * var(--stage-u)) calc(0.53763441 * var(--stage-u)) #b83b3b, calc(0.107526882 * var(--stage-u)) calc(0.107526882 * var(--stage-u)) calc(0.53763441 * var(--stage-u)) #b83b3b,
        calc(-0.107526882 * var(--stage-u)) calc(0.107526882 * var(--stage-u)) calc(0.53763441 * var(--stage-u)) #b83b3b, calc(0.107526882 * var(--stage-u)) calc(-0.107526882 * var(--stage-u)) calc(0.53763441 * var(--stage-u)) #b83b3b,
        calc(0.107526882 * var(--stage-u)) 0 calc(0.53763441 * var(--stage-u)) #b83b3b, 0px calc(0.107526882 * var(--stage-u)) calc(0.53763441 * var(--stage-u)) #b83b3b,
        calc(-0.107526882 * var(--stage-u)) 0 calc(0.53763441 * var(--stage-u)) #b83b3b, 0 calc(-0.107526882 * var(--stage-u)) calc(0.53763441 * var(--stage-u)) #b83b3b;
}
#safety_vest_detection {
    left: calc(46.774 * var(--stage-u));
    bottom: calc(17.774 * var(--stage-u));
}
#glove_detection {
    left: calc(34.774 * var(--stage-u));
    bottom: calc(7.274 * var(--stage-u));
}

#worker_img {
    position: fixed;
    left: calc(-17.11828 * var(--stage-u));
    bottom: 1.19vh;
    z-index: 6;
    width: calc(51 * var(--stage-u));
    animation-name: worker;
    animation-duration: 0s;
}

/* Foreground counter/desk, cut from the same scene as #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.

   Bottom-anchored since #425: this image is 1520x855, exactly 16:9, so on any
   viewport wider than that `cover` overflows vertically, and `object-position: center`
   took half of that overflow off the counter's bottom edge -- 8.3% of it at 1920x900.
   The two sources are NOT the same aspect ratio (safewatchbg4.jpg is 1618x1079, 3:2),
   so they never showed the same region of the scene -- the pixel-for-pixel match this
   comment used to claim was never true, which is why only this half is anchored. See
   #background above for why the other half is left centred. */
#foreground_component {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    pointer-events: none;
    z-index: 6;
}

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

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

@keyframes worker {
    0%   {opacity: 0; left: calc(-11.74193590 * var(--stage-u));}
    100% {opacity: 1; left: calc(-17.11828 * var(--stage-u));}
}

@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: calc(-59 * var(--stage-u));
        width: calc(161 * var(--stage-u));
    }
    .epi-detection {
        height: calc(21.45161292 * var(--stage-u));
        width: calc(21.45161292 * var(--stage-u));
        box-shadow: 0 0 0 calc(1.8 * var(--stage-u)) white, 0 0 calc(3.5 * var(--stage-u)) calc(3.5 * var(--stage-u)) var(--primary-color), 0 0 calc(3.5 * var(--stage-u)) calc(1.5 * var(--stage-u)) inset var(--primary-color);
        font-size: calc(12 * var(--stage-u));
        text-shadow: 0 0 calc(2 * var(--stage-u)) var(--primary-color),
        calc(-0.5 * var(--stage-u)) calc(-0.5 * var(--stage-u)) calc(2 * var(--stage-u)) var(--primary-color), calc(0.5 * var(--stage-u)) calc(0.5 * var(--stage-u)) calc(2 * var(--stage-u)) var(--primary-color),
        calc(-0.5 * var(--stage-u)) calc(0.5 * var(--stage-u)) calc(2 * var(--stage-u)) var(--primary-color), calc(0.5 * var(--stage-u)) calc(-0.5 * var(--stage-u)) calc(2 * var(--stage-u)) var(--primary-color),
        calc(0.5 * var(--stage-u)) 0 calc(2 * var(--stage-u)) var(--primary-color), 0px calc(0.5 * var(--stage-u)) calc(2 * var(--stage-u)) var(--primary-color),
        calc(-0.5 * var(--stage-u)) 0 calc(2 * var(--stage-u)) var(--primary-color), 0 calc(-0.5 * var(--stage-u)) calc(2 * var(--stage-u)) var(--primary-color);
        animation-delay: 0s;
    }
    #safety_vest_detection {
        right: calc(11 * var(--stage-u));
        top: calc(8 * var(--stage-u));
        left: auto;
        bottom: auto;
    }
    #helmet_detection {
        left: calc(11 * var(--stage-u));
        top: calc(8 * var(--stage-u));
        bottom: auto;
    }
    #earmuffs_detection {
        left: calc(11 * var(--stage-u));
        top: calc(41 * var(--stage-u));
        bottom: auto;
        box-shadow: 0 0 0 calc(1.8 * var(--stage-u)) white, 0 0 calc(3.5 * var(--stage-u)) calc(3.5 * var(--stage-u)) #b83b3b, 0 0 calc(3.5 * var(--stage-u)) calc(1.5 * var(--stage-u)) inset #b83b3b;
        text-shadow: 0 0 calc(2 * var(--stage-u)) #b83b3b,
            calc(-0.5 * var(--stage-u)) calc(-0.5 * var(--stage-u)) calc(2 * var(--stage-u)) #b83b3b, calc(0.5 * var(--stage-u)) calc(0.5 * var(--stage-u)) calc(2 * var(--stage-u)) #b83b3b,
            calc(-0.5 * var(--stage-u)) calc(0.5 * var(--stage-u)) calc(2 * var(--stage-u)) #b83b3b, calc(0.5 * var(--stage-u)) calc(-0.5 * var(--stage-u)) calc(2 * var(--stage-u)) #b83b3b,
            calc(0.5 * var(--stage-u)) 0 calc(2 * var(--stage-u)) #b83b3b, 0px calc(0.5 * var(--stage-u)) calc(2 * var(--stage-u)) #b83b3b,
            calc(-0.5 * var(--stage-u)) 0 calc(2 * var(--stage-u)) #b83b3b, 0 calc(-0.5 * var(--stage-u)) calc(2 * var(--stage-u)) #b83b3b;
    }
    #glove_detection {
        right: calc(11 * var(--stage-u));
        top: calc(41 * var(--stage-u));
        left: auto;
        bottom: auto;
    }
    .epi-connection {
        display: none;
    }
    .epi-svg-detection {
        display: none;
    }

    #login_panel {
        animation-delay: 0s;
    }

    @keyframes worker {
        0%   {opacity: 0; left: calc(-52 * var(--stage-u));}
        100% {opacity: 1; left: calc(-59 * var(--stage-u));}
    }
}