body{
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

.container{
    width:1080px; 
    height:715px; 
    position: relative;
}

h3{  
    text-align: center;
    font-weight: bold;
    font-family: "Times New Roman", Times, serif;
}

#reset_btn{
    margin: auto;
    display: block;
    cursor: default;
}

#manual_button, #data_button{
    position:absolute; 
    left: 8%;
    cursor: pointer;
}

.modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        -webkit-animation-name: fadeIn; /* Fade in the background */
        -webkit-animation-duration: 0.4s;
        animation-name: fadeIn;
        animation-duration: 0.4s
    }

    /* Modal Content */
    .modal-content {
        position: fixed;
        bottom: 0;
        background-color: #fefefe;
        width: 100%;
        -webkit-animation-name: slideIn;
        -webkit-animation-duration: 0.4s;
        animation-name: slideIn;
        animation-duration: 0.4s
    }

    /* The Close Button */
    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: white;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-header {
        padding: 2px 16px;
        background-color: black;
        color: white;
    }

    .modal-body {padding: 2px 16px;}

    /* Add Animation */
    @-webkit-keyframes slideIn {
        from {bottom: -300px; opacity: 0} 
        to {bottom: 0; opacity: 1}
    }

    @keyframes slideIn {
        from {bottom: -300px; opacity: 0}
        to {bottom: 0; opacity: 1}
    }

    @-webkit-keyframes fadeIn {
        from {opacity: 0} 
        to {opacity: 1}
    }

    @keyframes fadeIn {
        from {opacity: 0} 
        to {opacity: 1}
    }

#scale_image{
    position: absolute;
    width: 320px;
    left: 208px;
    top: -4px;
}

#slider{
    position: absolute;
    left: 211px;
    width: 301px;
    top: 29px;
}

#apparatus{
    float:right;
}

#round-bottom-flask{
    position:absolute;
    z-index:2; 
    width:12%; 
    height: 56%;
    left:15%; 
    top:22%; 
    cursor:pointer;
}

#pipette{
    position:absolute;
    z-index:1; 
    width:4.5%; 
    left:47%; 
    top:7%;  
    -ms-transform: rotate(-8deg); /* IE 9 */
    -webkit-transform: rotate(-8deg); /* Chrome, Safari, Opera */
    transform: rotate(-8deg);
}

#cuvette{
    position: absolute;
    z-index: 2;
    width: 3.5%;
    left: 76%;
    top: 54.5%;
}

#table_with_spec{
    margin:auto;
    display: block;
    width: 85%;
}

#comp_trans_button{
    position: absolute; 
    z-index: 2; 
    width: 13.5%;
    height: 27%; 
    left: 48%;
    top: 6%; 
}

#spectrolid_trans_button{
    position: absolute; 
    z-index:2;
    width: 5%; 
    height: 21%;
    left: 34.5%; 
    top: 14%;  
}

#spectrolid_trans_button1{
    position: absolute; 
    z-index:3;
    width: 4%; 
    height: 18%;
    left: 35%; 
    top: 2%;  
}

#reference{
    position: absolute; 
    z-index: 2; 
    width: 15%; 
    left: 40%; 
    top: 0%; 
    visibility: hidden;
}

#power_trans_button{
    position: absolute; 
    z-index:2;
    left: 15%; 
    top: 42%;
    width: 2%;
    height: 8%;
    visibility: hidden;
}

#demo{
    position: absolute;
    top: 73%;
    left: 15%;
    max-width: 66%;
    color: yellow;
    text-align:left;
    font-size: 89%;
}

#clockScreen{
    position: absolute;
    top: 71px;
    left: 4px;
    visibility: hidden;
    z-index: 4;
    width: 100%;
    height: 105%;
}

#clockHand{
    position:absolute; 
    top:359.97px;
    left:51.2%; 
    visibility:hidden; 
    z-index: 5;
}

#scan{
    position:absolute;
    z-index: 6; 
    top:76px; 
    left:15px;
    visibility:hidden;
    width: 98%;
    height: 102%;
}

#mfs_form2{
    position: absolute;
    z-index: 8;
    top: 15%;
    left: 15%;
    width: 71%;
    height: 68%;
    visibility : hidden;
}

#ok_btn{
    position: absolute;
    z-index: 12;
    top: 78%;
    left: 45%;
    width: 10%;
    height: 5%;
    visibility : hidden;
}
#select{
    position: absolute;
    top:24%;
    left:30%;
    width: 15%;
    z-index: 12;
    visibility : hidden;
}

#input1{
    position: absolute;
    z-index: 12;
    top: 48%;
    left: 30%;
    width: 9%;
    height: 5.2%;
    visibility : hidden;
}

#input2{
    position: absolute;
    z-index: 12;
    top: 52.9%;
    left: 30%;
    width: 9%;
    height: 5.2%;
    visibility: hidden;
}

#input3{
    position: absolute;
    z-index: 12;
    top: 58%;
    left: 30%;
    width: 9%;
    height: 5%;
    visibility: hidden;
}

.video{
    position:absolute;
    z-index:18;
    top:30%;
    left:10%;
    visibility : hidden;
}

#disposegraph{
    position: absolute;
    z-index: 20;
    width: 8%;
    height: 3.5%;
    left: 83%;
    top: 80%;
}