@charset "utf-8";
/* CSS Document */
.tickLabel
{
    font-size: 10.5pt;
}

body
{
	padding:0px;
	margin:0px;
	color:#000000;
	font-family:Arial, sans-serif;
	font-size:12px;
	/* background-color:#f0f0f0; */
	margin:auto;
	height:700px;
	line-height:1.5em;
}

#container
{
	width:920px;
	height:580px;
	position:relative;
	left:30px;
	
	-moz-border-radius: 6px; 
	border-radius: 6px;
	border:#CCC solid 1px;
	background-color:#fff;
	-moz-box-shadow: 0px 5px 5px #CCC;
	-webkit-box-shadow: 0px 5px 5px #CCC;
	box-shadow: 0px 5px 5px #CCC;
}


.header{
    position: relative;
    left: 30px;
    /* top: 9px; */
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 905px;
    padding-left: 10px;
}

#title
{
	/*width: 100px; */
    padding: 7px;
    height: 16px;
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    /* top: -30px; */
    margin-bottom: 0px !important;
    left: 10px;
    /* position: absolute; */
    background-color: #BE5513;
    /* border: #CCC solid 1px; */
    -moz-border-radius-topright: 6px;
    -webkit-border-top-right-radius: 6px;
    border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -webkit-border-top-left-radius: 6px;
    border-top-left-radius: 6px;
}

#logo
{
	/* background-image:url('../assets/hbpub_logo.png'); */
	/* position:absolute; */
	margin-top: 5px;
	width:86px;
	height:30px;
}

#copyright
{
	position:absolute;
	left:30px;
	top:625px;
	width:920px;
	height:30px;
	text-align:center;
	font-size:9px;
	color:#666;
}

.hidden
{
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

.lightgrey_textbox
{
	border: solid #999 1px;
	/*background-color:#CCC;*/
	background-color:#F4EAF4;
}

.darkgrey_textbox
{
	border: solid #999 1px;
	background-color:#999;
}

.styledCheckbox{
    
}

#graph-caption
{
    margin:auto;
    position:absolute;
    width: 710px;
    height: 470px;
    top: 20px;
    left: 200px;
    font-family:Arial, sans-serif;
    font-size:1px;
    color: transparent;
    user-select: none;
}
#graph-caption p{
    width: 100%;
    height: 100%;
}

.input-label{
    outline: none;
    background: #d8323200;
    /* border: 2px solid transparent; */
    width: 42px;
    height: 42px;
    display: inline-block;
    cursor: pointer;
    position: absolute;
    top: -1px;
    left: 0px;
    color: transparent;
    user-select: none;
    /* background-position: 0 -1px; */
    background-repeat: no-repeat;
    /* background-size: cover; */
}

input ~ .input-label{
    background-image: url(../assets/checkbox.jpg);
}
input:checked ~ .input-label{
    background-position: 0 -42px;
}
.styledCheckbox~ input[type="checkbox"]{
    /* display: none; */
    opacity: 0;
    height: 38px;
    width: 38px;
    position: absolute;
    top: -1px;
    left: 0px;
    z-index: 0;
}

input[type="checkbox"]{
    height: 40px;
    width: 40px;
    position: relative;
    left: -4px;
    top: -3px;
}
input[type="checkbox"]:focus-visible+label {
    outline: 2px solid rgb(255, 0, 0) !important;
}

.styledCheckbox{
    background-repeat: no-repeat;
    background-position: 1.5px 0px;
}

#bar_graph
{
    margin:auto;
    position:absolute;
    width:340px;
    height:440px;
    top:50px;
    left:220px;
    font-family:Arial, sans-serif;
    font-size:10px;
}
#bar_graph_grid
{
    margin:auto;
    position:absolute;
    width:340px;
    height:440px;
    top:50px;
    left:220px;
    font-family:Arial, sans-serif;
    font-size:10px;
}

#percent_graph
{
    margin:auto;
    position:absolute;
    width:340px;
    height:440px;
    top:50px;
    left:560px;
    font-family:Arial, sans-serif;
    font-size:10px;
}
#percent_graph_grid
{
    margin:auto;
    position:absolute;
    width:340px;
    height:440px;
    top:50px;
    left:560px;
    font-family:Arial, sans-serif;
    font-size:10px;
}

.title
{
    position: absolute;
    font-size: 12pt;
    color: #666666;
    font-weight: bold;
}

/*#input_title
{
    top: 20px;
    left: 30px;
}*/

#output_title1
{
    top: 20px;
    left: 250px;
}
#output_title2
{
    top: 20px;
    left: 590px;
}

#checkbox_holder
{
    position: absolute;
    top: 50px;
    left: 20px;
}
.input_txt
{
    font-size: 10.5pt;
    font-weight: bold;
    margin-left: 10px;
    margin-top: 10px;
    color: #58574B;
}
.input_txt2
{
    margin-top: 2px;
}

.chk
{
    /*position: relative;
    width: 100px;
    float: left;*/
}

.col
{
    position: absolute;
    height: 40px;
}
.col1
{
    left: 0px;
    width:42px;
    margin-top: 1px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    /* background-color: #b8c6d1; */

}
.col2
{
    left: 47px;
    width:140px;
    /* background-color: #D5D4C9; */
}
.col3
{
    left: 185px;
    width:10px;
}

.row
{
    position: absolute;
}
.row1 { top: 0px; background-color: #e6f6f8; }
.row2 { top: 50px; }
.row3 { top: 100px; }
.row4 { top: 150px; }
.row5 { top: 200px; }
.row6 { top: 250px; }
.row7 { top: 300px; }

.img_btn
{
    display:block;
    border:0px;
    cursor:pointer;
    overflow:hidden;
}
.img_btn_disabled
{
    -moz-opacity: 0.5;
    -webkit-opacity: 0.5;
    opacity: 0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity = 50);
    cursor:auto;
}

.build_btn
{
    width:128px;
    height:32px;
    background-image:url("../assets/button-build.png");
    background-position: 0px 0px;
}
.build_btn.startHoverAction
{
    background-position: 0px -33px;
    background-position-y: -33px;
}
.clear_btn
{
    width:128px;
    height:32px;
    background-image:url("../assets/button-clear.png");
    background-position: 0px 0px;
}
.clear_btn.startHoverAction
{
    background-position: 0px -33px;
    background-position-y: -33px;
}
#ui_container
{
    height: 70px;
    width: 130px;
    position: absolute;
    top: 420px;
    left: 26px;
    /*background-color: #F4EAF4;
    border: 1px solid #999999*/
}
#ui_container button{
    color: transparent;
    padding: 0;
}
#ui_container button:focus{
    border:2px solid red !important;
    outline: none;
}
.ui_col1
{
    position:absolute;
    left: -8px;
    top:0px;
    background: transparent;
    border: 2px solid transparent;
    height: 36px;
    width: 132px;
}
.ui_col2
{
    position:absolute;
    left: -8px;
    top:40px;
    background: transparent;
    border: 2px solid transparent;
    height: 36px;
    width: 132px;
}
#source
{
    position:absolute;
    left:10px;
    top:550px;
    width:900px;
    height:30px;
    text-align:center;
    font-size:9px;
    color:#666;
    line-height: 1.4em;
}