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

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

#container
{
	width: 920px;
    height: 580px;
    position: relative;
    left: 30px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    
    background-color: #292920;
    /* 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;
}
 [aria-disabled] {
    pointer-events: none;
    opacity: 0.5;
} 

#head h2{
    font-size: 13pt;
    margin: 0;
}
#output-table h2{
    margin: 0;
    color: #fff;
    text-align: center;
    font-size: 12px;
}
.table-label{
    position: absolute;
    height: 456px;
    width: 820px;
    /* background: aqua; */
    top: 101px;
    left: 40px;
}
.table-label p{
    color: transparent;
    height: 100%;
    user-select: none;
}

#legend td p{
    color: transparent;
    user-select: none;
    overflow: hidden;
    margin: 0;
}
.main-graph-label{
    position: absolute;
    /* background: #ff000078; */
    top: 12px;
    left: 10px;
    width: 900px;
    height: 560px;
    color: transparent;
    user-select: none;
}
.main-graph-label p{
    height: 100%;
    margin: 0;
}


.fieldset{
    border: none;
    padding: 0;
    display: flex;
    width: 200px;
}
.fieldset legend{
    margin-top: 10px;
    width: 138px;
}
.fieldset>div{
    display: flex;
    flex-direction: column;
}

.radio-wrap>div{
    display: flex;
    align-items: end;
    font-style: normal;
}


.hidden
{
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}
.order-radio input:checked ~ .checkmark {
    background-color: #ffd600;
  }

.radio-wrap label{
    position: absolute;
    width: 14px;
    height: 14px;
    color: transparent;
    background: #fff;
    border-radius: 50%;
    right: 47px;
    top: 16px;
}
label>p{
    margin-left: 17px;
    color: white;
    margin-top: -1px;
    font-weight: 700;
}

#chk1 ~ label{
    top:33px;
}

.order-radio:checked~label{
    background-color: #ffd600;
}

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

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



td
{
   display: table-cell; 
   padding-left:0px;
   padding-right:0px;
   padding-top:0px;
   padding-bottom:0px;
}

.table-container
{
    position: absolute;
    top: 100px;
    left: 70px;
}
/* overlay table doesn't have head column so needs to be 72 pixels further to the right */
#curve-table{ left: 142px; }
#over-table{ left: 142px; }
#high-table{ left: 142px; }

.table-container table{ border-collapse: separate; border-spacing: 4px; }
.table-container tr{ height: 30px;  }
.table-container td{ width: 54px; }
.table-container .table-val{ position: relative; text-align: center; font-size: 9pt; font-weight: bold; line-height: 15px; width: 54px; }
.table-container .kl-val{ color: #b00021; background-color: rgb(255 255 255);}
.table-container .lal-val{ color: #1D6355; background-color: rgb(255 255 255); }
.table-container .kl-head{ cursor:pointer; width: 68px; height: 30px; background: url(../assets/back-kl.png); background-position: 0px 0px; color: #FFFFFF; text-align: center; font-size: 12pt; font-weight: bold; padding-right:15px; border:none; }
.table-container .lal-head{ cursor:pointer; width: 54px; height: 42px; background: url(../assets/back-lal.png); background-position: 0px 0px; color: #FFFFFF; text-align: center; font-size: 12pt; font-weight: bold; padding-top:10px; border:none; }
.table-container .kl-head.disabled{ background-position: 0px -60px; color: #666666; cursor: default; }
.table-container .lal-head.disabled{ background-position: 0px -84px; color: #666666; cursor: default; }
.table-container .kl-head.selected{ background-position: 0px -30px; color: #FFFFFF; }
.table-container .lal-head.selected{ background-position: 0px -42px; color: #FFFFFF; }
.table-container .lal-head-empty{ background:none; width: 54px; height: 32px; }

.over-table td{ background-color: rgb(193 247 34 / 15%); color: #000;}
.over-table td.shaded{ background:none; }

.data-table td.nash{ background-color: #FFD600; }
.data-table td.selected{ background-color: #FFF190; }

.curve-table td{ background-color:#FFFFFF; }
.curve-table td.nash{ background-color: #FFD600; }
.curve-table td.lal_reaction{ background-color: #7ad0d0; }
.curve-table td.kl_reaction{ background-color: #f3a4d1; }

.high-table td
{
    background:url(../assets/arrows.png);
    background-position: 0px 0px;
    background-repeat: no-repeat;
}
.high-table td.left{ background-position: 0px -90px; }
.high-table td.right{ background-position: 0px -120px; }
.high-table td.up{ background-position: 0px -60px; }
.high-table td.down{ background-position: 0px -30px; }

#head
{
    position:absolute;
    top:5px;
    left:15px;
    width: 300px;
    font-family: Arial, sans-serif;
    font-size: 13pt;
    font-weight: bold;
    color: #FFF;
}

.company-selector-table
{
    position:absolute;
    top:20px;
    left:10px;
    height: 60px;
}

.selector-holder
{
    position: relative;
    display: block;
}

.selector
{
    top: 0px;
    left: 0px;
    width: 48px;
    height: 24px;
    padding-top: 6px;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 13pt;
    font-weight: bold;
    margin-right: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.inactive-selector
{
    position: absolute;
    color: #FFFFFF;
    background-color: #FF0000;
    cursor: default;
}
.inactive-selector.selector0{background-color: #b00021;}
.inactive-selector.selector1{background-color: #007e8d;}

.active-selector
{
    color: #E4E4E2;
    background-color: #5A5A4B;
    cursor: pointer;
}
.company-selector-table .title-col{ width:155px; font-size: 9pt; font-weight: bold; font-style: italic; color:#FFFFFF; line-height: 1.2em; }
.title-col h3{
    margin: 0;
    font-size: 12px;
}
.title h2{
    font-size: 12pt;
    margin: 0;
}
#table-title h2{
    font-size: 11pt;
    margin: 0;
}
.intro-text
{
    position: absolute;
    top: 10px;
    left: 20px;
    color: #FFFFFF;
    font-size: 11pt;
}
#table-title
{
    position: absolute;
    top: 82px;
    left: 420px;
    color: #FFFFFF;
    font-size: 11pt;
    font-weight: bold;
}
.order-selector-table
{
    position:absolute;
    top:20px;
    left:290px;
    height: 60px;
}

.order-selector-table .title-col{ width:150px; font-size: 9pt; font-weight: bold; font-style: italic; color:#FFFFFF; line-height: 1.2em; text-align: right; }
.order-selector-table .check_col{width: 14px; }

.order-selector-table .text_col
{
    color: #ffffff;
    font-size: 9pt;
    font-weight: bold;
    line-height: 1.2em;
    padding-left: 5px;
}

#legend
{
    position: absolute;
    top: 79px;
    left: 490px;
}

#legend .color-col{ width: 12px; height: 12px; }
#legend .label-col{ color: #FFFFFF; font-size: 8pt; padding-left: 5px; padding-right: 0px; height: 12px; line-height: 12px; }
#legend .info-col{ padding-right: 10px; height: 12px; }
#legend .lal-col{ background-color: #7ad0d0; }
#legend .kl-col{ background-color: #f3a4d1; }
#legend .nash-col{ background-color: #FFD600; }

#run-btn
{
    position: absolute;
    top: 33px;
    left: 505px;
}
#reset-btn
{
    position: absolute;
    top: 33px;
    left: 505px;
}

.block-btn
{
    cursor:pointer;
    color: #292920;
    background-color: #F0F0EA;
    text-align: center;
    width: 80px;
    height: 30px;
    font-size: 12pt;
    font-weight: bold;
    border-bottom:#B4B4AF solid 4px;
    line-height: 30px;
}
.block-btn:hover
{
    background-color: #727268;
    color: #FFFFFF;
}
.block-btn.disabled
{
    color: #E4E4E2;
    background-color: #5A5A4B;
    border-bottom:#5A5A4B solid 4px;
    cursor: default;
}

#output-table
{
    position:absolute;
    top: 0px;
    left: 600px;
    width: 305px;
}

.output-table-container table{ border-collapse: separate; border-spacing: 2px; }
.output-table-container tr{  }
.output-table-container td{ width: 75px; }
.output-table-container .row-head{ color: #FFFFFF; font-size: 9pt; font-weight: bold; line-height: 1em;  text-align: center;/*width: 90px;*/ }
.output-table-container .row-subhead{ color: #FFFFFF; font-size: 7.5pt; font-weight: normal; line-height: 1em; text-align: center;}
.output-table-container .score-col{ background-color: #56565d; font-size: 10pt; font-weight: normal; text-align: right; padding-right: 10px; }
.output-table-container .row-kl .score-col{ color: #b00021; }
.output-table-container .row-lal .score-col{ color: #007e8d; }
.output-table-container .title-row{ color: #FFFFFF; font-weight: bold; width: 40px; padding-left: 10px; }
.output-table-container .row-kl .title-row{ background-color: #b00021; }
.output-table-container .row-lal .title-row{ background-color: #007e8d; }
.output-table-container .score-col.active{ background-color: #FFFFFF; }

.axis-label
{
    position:absolute;
    font-size: 10pt;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
}
#horiz-label{ top: 557px; left:142px; width: 700px;}
#vert-label{ top: 295px; left:-150px; width: 400px; }
.rotate90ccw
{
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#selector-cover { position:absolute; top:20px; left:10px; width:480px; height:60px; background-image: url(../assets/popup-cover.png); background-repeat: repeat; /*border: 1px solid red;*/  }

.info-btn
{
    display: inline-block;
    width:12px;
    height:12px;
    background-image:url("../assets/info-button.png");
    background-position: 0px 0px;
    cursor:pointer;
    border-radius: 50%;
    border: none;
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    transform: translateY(-5px);
}

#info-panel-main { position:absolute; top:0px; left:0px; width:100%; height:100%; background-image: url(../assets/popup-cover.png); background-repeat: repeat;  }

#popup
{
    position: absolute;
    width: 419px;
    left: 30px;
    height: 80px;
    top:4px;
    background-color: #FFFFFF;
    z-index:51;
    -moz-box-shadow: 0px 5px 5px #000;
    -webkit-box-shadow: 0px 5px 5px #000;
    box-shadow: 0px 5px 5px #000;
    padding-bottom: 5px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border:#606057 solid 5px;

}

#popup .title
{
    color: #FFFFFF;
    width: 410px;
    padding-left: 10px;
    height: 20px;
    background-color: #606057;
    font-size: 12pt;
    font-weight: bold;
    line-height: 1.2em;
    font-family: Helvetica, Arial, sans-serif;
}
#popup .content
{
    color: #5A5A4B;
    margin: 5px 10px;
    font-size: 10.5pt;
    line-height: 1.3em;
    font-family: Helvetica, Arial, sans-serif;
}

.close-btn
{
    cursor:pointer;
    position: absolute;
    width: 24px;
    height: 24px;
    background: url("../assets/close-button.png");
    top: -6px;
    right: -6px;
    border: none;
}

.close_source_btn
{
    position: absolute;
    top:5px;
    right: 5px;
    width: 10px;
    height: 10px;
    cursor:pointer;
    background-image:url("../assets/close.png");
    background-position: 0px 0px;
    background-repeat:no-repeat;
    border: none;
}
#source_link
{
    position: absolute;
    bottom: 5px;
    right: 20px;
    cursor: pointer;
    background: transparent;
    border: none;
    color: #8080FF;
    text-decoration: underline;
}
#source
{
    position: absolute;
    width: 540px;
    right: 90px;
    bottom:10px;
    border: 2px solid #999999;
    background-color: #FFFFFF;
    z-index:50;
    -moz-box-shadow: 0px 5px 5px #666;
    -webkit-box-shadow: 0px 5px 5px #666;
    box-shadow: 0px 5px 5px #666;
    display: none;
    
}

#source .content
{
    color: #333;
    margin: 10px;
    font-size: 8pt;
    font-family: Arial, sans-serif;
}