#snellen-cont {width:100%; float:right; horiz-align:center; margin-bottom:10px}
#snellen {max-width:200px; width:100%; display:block; margin:0 auto; padding:0; horiz-align:center;}

@media only screen and (min-width:450px) {
    #snellen-cont {
        max-width: 200px;
        margin-left: 24px;
        margin-right: 10px;
    }
}

/* Simulation */
#viewerContainer {display:flex; margin:0 auto; flex-flow:row nowrap; justify-content:center; height:320px;}
#sneelenChart {height:300px; width:250px;}
#viewer {height:300px; width:600px;}
.viewerMove {left:500px;}
#slider {background:white; top:290px; margin-left:-600px; height:14px; width:600px;}
#slider .ui-slider-handle {width:100px; margin-left:-100px;}

#inputContainer {display:flex; flex-flow:row nowrap; justify-content:center; margin:0 auto 10px;}
.myopia {width:255px;}
.sliderVal {width:130px; padding-top:10px; text-align:right;}

#tableContainer {display:flex; flex-flow:row nowrap; justify-content:center; margin:20px auto 0;}
#dataTable {border:1px solid #ddd; width:100%; table-layout:fixed;}
.tableRow {text-align:right !important;}
tr, td {text-align:center; padding:5px; border:1px solid #ddd; color:#666; height:25px; margin:0; vertical-align:center;}
th {text-align:center; border:1px solid #ddd; padding:5px; color:#666; font-weight:bold; vertical-align:center;}

/* Explanation */
#eyeContainer {display:flex; flex-flow:row nowrap; justify-content:center; margin:0 auto 0;}
#snellenChart2 {height:300px; width:200px;}
#eyeImg {height:300px; width:350px;}

#sliderContainer {margin:0 auto; horiz-align:center;}
.sliderVal2 {padding-top:10px; text-align:center;}
#slider2 {background:#eee; height:14px; width:330px; margin:0 auto; display:block;}
#slider2 .ui-slider-range {background:#666;}
#slider2 .ui-slider-handle {background:#666;}
#slider2 .ui-state-active {background:#666;}
#slider2 .ui-widget-content {border:1px solid #000000;}
#slider2 .ui-state-default {border:1px solid #000000;}
.radioBtn {width:250px; display:block; margin:20px auto 0;}