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: 100px;
    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;
    left: 260px;
    top:0px;
}

#slider{
    position: absolute;
    left:266px;
    width: 276px;
    top:31px;
}

#apparatus{
    float:right;
}

#round-bottom-flask{
    position:absolute;
    z-index:2; 
    left:13%; 
    top:15%;
    width:10%;
    height:59%;
    cursor:pointer;
}

#solution_name{
    position:absolute;
    z-index:2; 
    left:4%; 
    top:99%; 
}

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

#quartz_cuvette{
    position:absolute;
    z-index:2;
    top:48.5%;
    left:65%;
    height: 22.5%;
    width: 3.3%;
}

#cuvette{
    position:absolute;
    z-index:2;
    top:48.5%;
    left:71%;
    height: 22.5%;
    width: 3.3%;
}

#table_with_spec{
    margin:auto;
    display: block;
}

#computerimage{
    position: absolute; 
    left: 48%; 
    top: 8%; 
    max-width: 50%; 
    max-height: 50%; 
}

#comp_trans_button{
    position: absolute; 
    z-index: 2; 
    width: 13%;
    height: 26%; 
    left: 49%;
    top: 10%; 
}

#spectrolid_trans_button{
    position: absolute; 
    z-index:2;
    width: 5%; 
    height: 18%;
    left: 35%; 
    top: 20%;  
}

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

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

#ref_cuvette{
    position: absolute;
    z-index: 1;
    left: 583px;
    top: -6%;
    width: 1.8%;
    height: 11%;
    visibility: hidden;
}

#power_trans_button{
    position: absolute; 
    z-index:2;
    left: 17.3%; 
    top: 44%;
    width: 1.8%;
    height: 7.5%; 
    visibility: hidden;
}

#demo{
    position: absolute;
    top: 64%;
    left: 17%;
    max-width: 68%;
    color: yellow;
    text-align: left;
}

#clockScreen{
    position: absolute;
    top: 56px;
    left: 4px;
    visibility: hidden;
    z-index: 4;
    width: 95%;
    height: 94%;
}

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

#scan{
    position:absolute;
    z-index: 6; 
    top:97px; 
    left:15px;
    visibility:hidden;
    width: 94%;
}

#popup{
    position:absolute;
    top:82px; 
    left:15px;
    z-index:7;
    visibility: hidden;
}

#start{
    position: absolute;
    top: 339px;
    left: 181px;
    width: 73%;
    z-index: 8;
    background-color: #cad86b;
    height: 12%;
    font-size: 35px;
    font-weight: bold;
    visibility: hidden;
}

#input_form{
    position: absolute;
    z-index: 10;
    top: 15%;
    left: 1%;
    width: 95%; 
    visibility : hidden;
}

#start_btn{
    position: absolute;
    z-index: 11;
    top: 20%;
    left: 47%;
    width: 3%;
    height: 5%;
    visibility : hidden;
}

#input1{
    position: absolute;
    z-index: 12;
    top: 50%;
    left: 20%;
    width: 8%;
    height: 5%;
    visibility : hidden;
}

#input2{
    position: absolute;
    z-index: 12;
    top: 50%;
    left: 32%;
    width: 8%;
    height: 5%;
    visibility: hidden;
}

#instruction_bkgd{
    position: absolute;
    z-index: 12;
    top: 80%;
    left: 4%;
    width: 90%;
    visibility: hidden;
}

#graph_instruction{
    position: absolute;
    z-index: 13;
    top: 84%;
    left: 11%;
    color: yellow;
    max-width: 80%;
    text-align: left;
    font-size: 15px;
}

#disposegraph{
    position: absolute;
    z-index: 16;
    width: 8%;
    left: 10%;
    top: 552px;
    height: 6%;
}

/*fluriscence css*/

#input_data{
    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: 9%;
    height: 5%;
    visibility : hidden;
}
#select{
    position: absolute;
    top:24%;
    left:30%;
    width: 15%;
    z-index: 12;
    visibility : hidden;
}

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

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

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

.videos{
    position:absolute;
    z-index:15;
    top:28%;
    left:8%;
    visibility : hidden;
}