html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

    width: 100%;
    height: 100%;
}

.tile {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}


.lab {
    background-image: linear-gradient(45deg,pink,orange,green,pink, blue, purple);
    background-size: cover;
    /*height: 95vh;
    width: 95vw;
    */
    min-height: 80vh;
    
    padding: 1em;
    display: flex;
    margin: 0 auto;
}

#labTimer {
    font-size: 1.5em;
}

.lab-left, .lab-right, .lab-left > *, .lab-right > *, .lab-center-bottom > * {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /*border: 1px solid black;*/
    align-items: center;
    color: white;
    text-align: center;
}

.lab-center-main {
    width: 70%;
}

.lab-center {
    margin: 0.5em auto;
    padding: .25em;
    background-color: hotpink;
    width: 500px;
    height: 68vh;
}

.lab-center-bottom {
    display: flex;
    gap: 1em;
    justify-content:center;
}

.lab-table {
    background-color: white;
    border: 1px solid white;
    margin: 1em;
    padding: 10px;
    height: 60vh;
    position: relative;
}

.beaker,
.beaker-filled,
.beaker-salt {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    background-image: url(../images/apparatus/beaker.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.bottle {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    cursor: pointer;
}

    .bottle.alkali {
        background-color: rgb(0, 255, 0);
        background-image: url(../images/apparatus/alkali-bottle.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto 100px;
    }

    .bottle.acid, .reagent-bottle {
        background-color: rgb(255, 0, 0);
        background-image: url(../images/apparatus/acid-bottle.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto 100px;
    }

.bunsen-burner,
.bunsen-burner-fire,
.bunsen-burner-fire-quench,
.bunsen-burner-remove {
    width: 100px;
    height: 100px;
    background-color: rgb(228, 217, 149);
    background-image: url(../images/apparatus/bunsen-burner.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.burette,
.burette-mounted,
.burette-mounted-filled {
    width: 100px;
    height: 100px;
    background-color: rgb(247, 250, 0);
    background-image: url(../images/apparatus/burette.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.burette-stand, .retort-stand {
    width: 100px;
    height: 100px;
    background-color: rgb(226, 82, 235);
    background-image: url(../images/apparatus/burette-stand.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    border: 1px solid black;
    cursor: pointer;
}

.conical-flask {
    width: 100px;
    height: 100px;
    background-color: rgb(228, 217, 149);
    background-image: url(../images/apparatus/conical-flask.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.cork {
    width: 100px;
    height: 100px;
    background-color: rgb(228, 217, 149);
    background-image: url(../images/apparatus/cork.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.fire {
    width: 100px;
    height: 100px;
    background-color: rgb(228, 217, 149);
    background-image: url(../images/apparatus/fire.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.fire-blue {
    width: 100px;
    height: 100px;
    background-color: rgb(228, 217, 149);
    background-image: url(../images/apparatus/fire-blue.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.funnel,
.funnel-burette,
.funnel-burette-remove {
    width: 100px;
    height: 100px;
    background-color: rgb(228, 217, 149);
    background-image: url(../images/apparatus/funnel.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.rod, .glass-rod, .rod-acid {
    width: 100px;
    height: 100px;
    background-color: rgb(228, 217, 149);
    background-image: url(../images/apparatus/glass-rod.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.spatula, .spatula-acid, .spatula-cleaned, .spatula-clean-acid, .spatula-salt, .spatula-burn-color {
    width: 100px;
    height: 100px;
    background-color: rgb(228, 217, 149);
    background-image: url(../images/apparatus/spatula.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.stirrer {
    width: 100px;
    height: 100px;
    background-color: rgb(228, 217, 149);
    background-image: url(../images/apparatus/stirrer.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.measuring-cylinder {
    width: 100px;
    height: 100px;
    background-color: orange;
    background-image: url(../images/apparatus/measuring-cylinder.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.petri-dish,
.petri-dish-salt {
    width: 100px;
    height: 100px;
    background-color: rgb(228, 217, 149);
    background-image: url(../images/apparatus/petri-dish.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.ph-indicator {
    width: 100px;
    height: 100px;
    background-color: deeppink;
    background-image: url(../images/apparatus/ph-indicator.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    border: 1px solid black;
    cursor: pointer;
}


.pipette {
    width: 100px;
    height: 100px;
    background-color: rgb(0, 255, 255);
    background-image: url(../images/apparatus/pipette.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.round-bottom-flask,
.round-bottom-flask-filled,
.round-bottom-flask-filled-up {
    width: 100px;
    height: 100px;
    background-color: rgb(228, 217, 149);
    background-image: url(../images/apparatus/round-bottom-flask.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.test-tube {
    width: 100px;
    height: 100px;
    background-color: rgb(228, 217, 149);
    background-image: url(../images/apparatus/test-tube.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.titration {
    width: 100px;
    height: 100px;
    background-color: rgb(228, 217, 149);
    background-image: url(../images/apparatus/titration.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.salt {
    width: 100px;
    height: 100px;
    background-color: rgb(228, 217, 149);
    background-image: url(../images/apparatus/salt.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.weighing-balance {
    width: 100px;
    height: 100px;
    background-color: rgb(228, 217, 149);
    background-image: url(../images/apparatus/weighing-balance.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}

.water, .water-bottle {
    width: 100px;
    height: 100px;
    background-color: rgb(228, 217, 149);
    background-image: url(../images/apparatus/water-bottle.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: 1;
    border: 1px solid black;
    cursor: pointer;
}


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

.clock {
    position: absolute;
    z-index: 50;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: aquamarine;
    font-size: .8em;
    cursor: pointer;
}

.lab-table > * {
    display: none;
}

.lab-table > div#labTableText {
    display: block;
    text-align: center;
}

.lab-table > .prep-pipette {
}

    .lab-table > .prep-pipette.visible {
        display: block;
    }

    .lab-table > .prep-pipette .beaker {
        display: none;
        position: absolute;
        bottom: 10%;
        height: 40%;
        width: 50%;
        left: calc(100%/2 - 50%/2);
    }

        .lab-table > .prep-pipette .beaker.visible {
            display: block;
        }

    .lab-table > .prep-pipette .bottle.alkali {
        display: none;
        position: absolute;
        bottom: 12%;
        height: 100px;
        width: 30%;
        left: calc(100%/2 - 30%/2);
    }

        .lab-table > .prep-pipette .bottle.alkali.visible {
            display: block;
        }

    .lab-table > .prep-pipette .pipette {
        display: none;
        position: absolute;
        bottom: 15%;
        height: 70%;
        width: 4%;
        left: calc(100%/2 - 4%/2);
        opacity: .9;
    }

        .lab-table > .prep-pipette .pipette.visible {
            display: block;
        }

.lab-table > .prep-acid {
}

    .lab-table > .prep-acid.visible {
        display: block;
    }

    .lab-table > .prep-acid .measuring-cylinder {
        display: none;
        position: absolute;
        bottom: 10%;
        height: 80%;
        width: 20%;
        left: calc(100%/2 - 20%/2);
        background-image: url(../images/apparatus/measuring-cylinder.png);
        background-position: center;
        background-repeat: no-repeat;
        background-clip: border-box;
        background-size: auto 80%;
        background-color: transparent;
        border: 0;
    }

        .lab-table > .prep-acid .measuring-cylinder.visible {
            display: block;
        }

    .lab-table > .prep-acid .bottle.acid {
        display: none;
        position: absolute;
        bottom: 12%;
        height: 80%;
        width: 50%;
        left: calc(100%/2 - 50%/2);
        background-image: url(../images/experiment/measuring_cylinder_fill.png);
        background-position: center;
        background-repeat: no-repeat;
        background-clip: border-box;
        background-size: auto 80%;
        background-color: transparent;
        border: 0;
    }

        .lab-table > .prep-acid .bottle.acid.visible {
            display: block;
        }

.lab-table > .titration {
}

    .lab-table > .titration.visible {
        display: block;
    }

    .lab-table > .titration .burette-stand {
        display: none;
        position: absolute;
        bottom: 0%;
        height: 90%;
        width: 50%;
        left: calc(100%/2 - 50%/2);
        background-image: url(../images/exp/burette_stand.png);
        background-position: center;
        background-repeat: no-repeat;
        background-clip: border-box;
        background-size: auto 90%;
        background-color: transparent;
        border: 0;
    }

        .lab-table > .titration .burette-stand.visible {
            display: block;
        }

    .lab-table > .titration .burette {
        display: none;
        position: absolute;
        bottom: 0%;
        height: 90%;
        width: 50%;
        left: calc(100%/2 - 50%/2);
        background-image: url(../images/exp/burette_stand_burrete.png);
        background-position: center;
        background-repeat: no-repeat;
        background-clip: border-box;
        background-size: auto 90%;
        background-color: transparent;
        border: 0;
    }

        .lab-table > .titration .burette.visible {
            display: block;
        }

        .lab-table > .titration .burette .filled {
            opacity: 0.9;
        }

    .lab-table > .titration .measuring-cylinder {
        display: none;
        position: absolute;
        /*bottom: 85%;
        height: 3%;
        width: 20%;
        left: calc(100%/2 - 0%/2);*/
        bottom: 0%;
        height: 90%;
        width: 50%;
        left: calc(100%/2 - 50%/2);
        background-image: url(../images/exp/burette_filling.gif);
        background-position: center;
        background-repeat: no-repeat;
        background-clip: border-box;
        background-size: auto 90%;
        background-color: transparent;
        border: 0;
    }

        .lab-table > .titration .measuring-cylinder.visible {
            display: block;
        }

    .lab-table > .titration .conical-flask {
        display: none;
        position: absolute;
        /* bottom: 12%;
        height: 20%;
        width: 30%;
        left: calc(100%/2 - 30%/2);*/
        bottom: 0%;
        height: 90%;
        width: 50%;
        left: calc(100%/2 - 50%/2);
        background-image: url(../images/experiment/burette_conical_flask_mounted.png);
        background-position: center;
        background-repeat: no-repeat;
        background-clip: border-box;
        background-size: auto 90%;
        background-color: transparent;
        border: 0;
    }

        .lab-table > .titration .conical-flask.visible {
            display: block;
        }

        .lab-table > .titration .conical-flask.filled {
            opacity: 0.9;
            /*background-color: rgb(0, 255, 255);*/
            bottom: 0%;
            height: 90%;
            width: 50%;
            left: calc(100%/2 - 50%/2);
            background-image: url(../images/experiment/burette_conical_flask_mounted.png);
            background-position: center;
            background-repeat: no-repeat;
            background-clip: border-box;
            background-size: auto 90%;
            background-color: transparent;
            border: 0;
        }

        .lab-table > .titration .conical-flask.indicator {
            opacity: 0.9;
            /*background-color: deeppink;*/
        }

        .lab-table > .titration .conical-flask.endpoint {
            background-color: transparent;
        }

    .lab-table > .titration .pipette {
        display: none;
        position: absolute;
        bottom: 32%;
        height: 3%;
        width: 20%;
        left: calc(100%/2 + 20%/2);
    }

        .lab-table > .titration .pipette.visible {
            display: block;
        }

    .lab-table > .titration .ph-indicator {
        display: none;
        position: absolute;
        /*bottom: 13%;
        height: 10%;
        width: 28%;
        left: calc(100%/2 - 28%/2);*/
        bottom: 2%;
        height: 40%;
        width: 50%;
        left: calc(100%/2 - 50%/2);
        background-image: url(../images/exp/conical-flask_indicated.gif);
        background-position: center;
        background-repeat: no-repeat;
        background-clip: border-box;
        background-size: auto 90%;
        background-color: transparent;
        border: 0;
    }

        .lab-table > .titration .ph-indicator.visible {
            display: block;
        }

        .lab-table > .titration .ph-indicator.endpoint {
            display: none;
        }

    .lab-table > .titration .movie {
        display: none;
        position: absolute;
        /*bottom: 85%;
        height: 3%;
        width: 20%;
        left: calc(100%/2 - 0%/2);*/
        bottom: 0%;
        height: 90%;
        width: 50%;
        left: calc(100%/2 - 50%/2);
        background-position: center;
        background-repeat: no-repeat;
        background-clip: border-box;
        background-size: auto 90%;
        background-color: transparent;
        border: 0;
    }

        .lab-table > .titration .movie.visible {
            display: block
        }

        .lab-table > .titration .movie.titrating {
            background-image: url(../images/exp/titration.gif);
        }

        .lab-table > .titration .movie.titrated {
            background-image: url(../images/exp/titration_endpoint.gif);
        }

#login_page {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    opacity: 0;
    transition: 0.2s opacity ease-out;
    display: none;
}

    .overlay.visible {
        display: block;
        opacity: 1;
        animation: 0.2s fade-in ease-out;
        overflow-y: auto;
    }

.overlay-contents {
    background-color: white;
    box-shadow: 0 0 10px 8px rgba(0, 0, 0, .5);
    padding: 1.5em;
    position: absolute;
    transition: 0.2s transform ease-out;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    /*overflow-y: auto;
    height: 90vh;*/
}