@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;
    user-select: none;
}

#container
{
	width: 920px;
    height: 580px;
    position: relative;
    left: 30px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: #CCC solid 1px;
    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;
}

.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;
}
.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;
}

input[type="checkbox"]{
    /* display: none; */
    opacity: 0;
    height: 34px;
    width: 30px;
    position: absolute;
    top: 57px;
    left: 0px;
    z-index: 0;
}
input[type="checkbox"]:focus, input[type="checkbox"]:focus-visible+label{
    border: 1px solid rgb(0 0 0);
    outline: 2px solid #fff;
    border-radius: 4px;
}

.input-label{
    outline: 2px solid transparent;
    border: 1px solid transparent;
    background: #d8323200;
    width: 25px;
    height: 25px;
    display: inline-block;
    cursor: pointer;
    position: absolute;
    top: 63px;
    color: transparent;
    left: 3px;
}
.input-label p{
    position: absolute;
    color: #fff;
    pointer-events: none;
    top: -73px;
    width: 200px;
}

.styledCheckbox{
    position: absolute;
    top: 65px;
}
button{
    color: transparent;
    user-select: none;
    overflow: hidden;
}
.slider_text{
    user-select: none;
    color: #ffffff;
}
#checkContainer td:first-of-type{
    user-select: none;
}
td
{
   display: table-cell;
   padding: 0px;
}

#cycleView
{
    position: absolute;
    top: 30px;
    right: 60px;
    width: 540px;
    height: 540px;
    background-image: url( ../assets/cycle-bg.png );
}

.circle
{
    position: absolute;
    width: 32px;
    height: 32px;
}

.circle .label
{
    position: absolute;
    left: 10px;
    bottom: 20px;
    color: red;
    font-size: 6pt;
}

#controlPanel
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 240px;
    height: 580px;
    background: #292920;
    border-radius: 6px 0px 0px 6px;
}

#controlContainer
{
    position: absolute;
    top: 20px;
    left: 20px;
    width: 148px;
    height: 80px;
    padding: 12px;
    background: #292920;
    border-radius: 5px;
    border: 2px solid #606057;
}

.img-btn
{
    position: absolute;
    border:0px;
    cursor:pointer;
}
.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;
}

.img-btn:hover
{
    background-position: 0px -36px;
    background-position-y: -36px;
}

.play-btn
{
    position: absolute;
    top:5px;
    left:7px;
    width:72px;
    height:36px;
    background: url("../assets/play-btn.png") 0px 0px;
}
.pause-btn
{
    position: absolute;
    top:5px;
    left:86px;
    width:36px;
    height:36px;
    background: url("../assets/pause-btn.png") 0px 0px;
}
.rewind-btn
{
    position: absolute;
    top:5px;
    left: 129px;
    width:36px;
    height:36px;
    background: url("../assets/rewind-btn.png") 0px 0px;
}

.slider-container { position:absolute; }
.slider-container table
{
    /*border: 1px solid #999;*/
    border-collapse: collapse;
    table-layout: fixed;
}
.slider-container td
{
    display: table-cell;
    padding:0px;
}

.slider-container .row {height:8px;}
.slider-container .title-col
{
    text-align:left;
    color:#FFFFFF;
    padding-right:20px;
    font-size: 10pt;
    font-weight: bold;
    width: 115px;
}



#speedSlider
{
    top: 45px;
    left: 0px;
}

.slider-value-rect
{
    position:absolute;
    background-color: #7E97C3;
    width: inherit;
    height: 20px;
}

#rndSlider
{
    position: absolute;
    top: 240px;
    left: 325px;
    width: 25px;
    height: 60px;
}
#rndSlider .slider_title{
    right: 20px;
    width: 160px;
    text-align: center;
    height: 50px;
    bottom: 70px;
}
#priceSlider
{
    position: absolute;
    top: 220px;
    left: 605px;
    width: 25px;
    height: 60px;
}

.bar-container
{
    width: 85px;
    height: 13px;
    border: 1px solid black;
    font-family: Helvetica, Arial, sans-serif;
    color: #F0F0EA;
    font-size: 10pt;
    text-align: left;
}

.bar-container .bar
{
    background: black;
    width: 0%;
    height: inherit;
}

.bar-container .title
{
    position: absolute;
    bottom: 15px;
    width: 127px;
}

.bar-container .callout
{
    position: absolute;
    top: 15px;
    font-family: Helvetica, Arial, sans-serif;
    color: #FFFFFF;
    font-size: 12pt;
    font-weight: bold;
    text-align: left;
}

#superBar
{
    position: absolute;
    left: 410px;
    top: 80px;
}

#speed-slow{
    background-color: transparent;
    color: #fff;
    cursor: pointer;
}
#speed-fast{
    background-color: transparent;
    color: #fff;
    cursor: pointer;
}

#willBar
{
    position: absolute;
    left: 710px;
    top: 85px;
}

#saleBar
{
    position: absolute;
    left: 825px;
    top: 275px;
}
#saleBar .title{
    width: 80px;
    left: 16px;
}

#costBar
{
    position: absolute;
    left: 750px;
    top: 475px;
}

#newCostBar
{
    position: absolute;
    left: 750px;
    top: 535px;
}

#newCostBar .title{
    width: 165px;
}

#checkContainer
{
    position: absolute;
    left: 220px;
    top: 10px;
    text-align: left;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10pt;
    color: #F0F0EA;
    user-select: none;
}



#profitBox
{
    position: absolute;
    left: 395px;
    top: 480px;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 12pt;
    color: #F0F0EA;
}

.info-btn
{
    position: absolute;
    display: inline-block;
    width:20px;
    height:20px;
    background: url("../assets/info-button.png") 0px 0px;
    cursor:pointer;
    border: none;
    overflow: hidden;
}

#info0 { left: 335px; top: 60px }
#info1 { left: 605px; top: 65px }
#info2 { left: 695px; top: 195px }
#info3 { left: 700px; top: 305px }
#info4 { left: 490px; top: 420px }
#info5 { left: 820px; top: 215px }
#info6 { left: 695px; top: 420px }
#info7 { left: 555px; top: 475px }
#info8 { left: 400px; top: 330px }
#info9 { left: 390px; top: 120px }

#cover { position:absolute; top:0px; left:0px; width:100%; height:100%; border-radius: 6px; background: url(../assets/popup-cover.png) repeat; }

#popup
{
    position: absolute;
    width: 200px;
    height: 120px;
    left: 240px;
    top:200px;
    background-image: url( ../assets/callout.png );
    z-index:51;
    -moz-box-shadow: 0px 5px 5px rgba(0,0,0,.4);
    -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,.4);
    box-shadow: 0px 5px 5px rgba(0,0,0,.4);
}

#popup .content
{
    color: #F0F0EA;
    margin: 25px 30px 10px 10px;
    font-size: 11pt;
    line-height: 1.5em;
    font-family: Helvetica, Arial, sans-serif;
}

.close-btn
{
    cursor:pointer;
    position: absolute;
    top: 8px;
    right: 28px;
    width: 21px;
    height: 21px;
    background: url("../assets/close-button.png") no-repeat;
    background-position: 5px 0px;
    border: none;
    overflow: hidden;
    /*background-color: #7E97C3;
    border-radius: 0px 0px 0px 10px;
    top: 0px;
    right: 0px;*/
}
.graph-label{
    position: absolute;
    width: 350px;
    height: 270px;
    /* background: red; */
    top: 294px;
    left: 8px;
    color: transparent;
    user-select: none;
}

.graph-label p{
    height: 100%;
    margin: 0;
}

.graph
{
    margin:auto;
    position:absolute;
    font-family:Arial, sans-serif;
    font-size:10pt;
}
.graph1{bottom:20px; left:10px; width: 340px; height:240px;}

.ui-slider-handle{
    color: transparent !important;
    overflow: hidden;
    user-select: none;
}
.graph-title
{
    position: absolute;
    font-size: 11pt;
    color: #ffffff;
    font-weight: bold;
    text-align: left;
}
#graph-title1{top: 300px; left: 10px; }

.tickLabel{ font-size: 7pt }

.rot90
{
    transform: rotate(-90deg);
    text-align: left;
}

.axisLabels
{
    font-size: 12pt;
    font-weight: bold;
    color: #F0F0EA;
}

.vert-line
{
    position: absolute;
    width: 2px;
    height: 165px;
    overflow: hidden;
    background-image: url( ../assets/vert-line.png );
    background-repeat: no-repeat;
}

#arrow
{
    position: absolute;
    left: 253px;
    top: 77px;
    width: 150px;
    height: 20px;
    background-image: url( ../assets/arrow.png );
}

.plus-minus
{
    position: absolute;
    color: #CACAC6;
    font-size: 20pt;
    font-weight: bold;
    width: 20px;
    height: 20px;
    
}
.plus-minus p {
    color: transparent;
    user-select: none;    
    margin: 0;
    overflow: hidden;
    overflow: hidden;
    position: absolute;
    background: transparent;
    width: 20px;
    top: 0;
    left: -2px;
}

#MinExclu { left: 360px; top: 57px }
#MinWill { left: 630px; top: 62px }
/*#info2 { left: 695px; top: 195px }*/
#PriceSales { left: 725px; top: 302px }
#Profit { left: 515px; top: 417px }
#WillSales { left: 800px; top: 212px }
#SalesCost { left: 720px; top: 417px }
#CostProfit { left: 535px; top: 472px }
/*#info8 { left: 400px; top: 330px }*/
#RnDSpend { left: 415px; top: 117px }

.slider-1{
    top: 50px;
    left: 0px;
}

/*======SLIDER========*/
.slider-box-wrap{
    box-sizing: border-box;
    position: absolute;
    width: 170px;
    height: 40px;
    text-align: center;
    /* background-color: #dae4ff6e;
    border: 1px solid #999; */
}
.slider-box-wrap *{
    box-sizing: border-box;
}
.slider_title
{
    width: 100%;
    height: 30px;
    padding-top:5px;
    font-size:13px;
    text-align:center;
    background-color:#DDD;
    border-bottom: solid #FFFFFF 2px;
    color:#535353;
    font-weight:bold;
    border-bottom: 1px solid #999;
}
.slider_title h2{
    font-size:13px;
    margin: 0;
}
.slider-val-wrap{
    width: 140px;
    margin: 5px auto 12px 20px;
}
.slider-val{
    height: 20px;
    width: 30px;
    padding: 5px;
    background-color: #eeeeee;
    border-radius: 8px;
    line-height: 10px;
    font-size: 14px;
    color: #000;
    user-select: none;
}
.slider-info{
    color: rgb(255, 255, 255);
    display: flex;
    justify-content: space-between;
    padding: 0 9px;
    font-size: 14px;
    margin-top:6px;
}
.slider-info p{
    margin: 0;
    margin: 0;
   
}

.invisible ~ input[type="range"]{
    margin-top: 35px;
}

.slider-wrap label{
    position: absolute;    
    user-select: none;
    height: 1px;
    width: 1px;
    overflow: hidden;
    color: #000000;
}
input[type="range"] {
    -webkit-appearance: none;
     appearance: none;
     background: transparent;
     cursor: pointer;
     width: 150px;
 }
 
 /* Removes default focus */
 input[type="range"]:focus {
   outline: none;
 }
 
 /***** Chrome, Safari, Opera and Edge Chromium styles *****/
 /* slider track */
 input[type="range"]::-webkit-slider-runnable-track {
    background-color: #606057;
    border-radius: 8px;
    height: 4px;  
    /* border: 1px solid #aaaaaa; */
 }
 
 /* slider thumb */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -12px; /* Centers thumb on the track */
    background: radial-gradient(circle,gray 20%, rgb(223, 223, 223) 5%, white 50%);
    border: 1px solid #aaaaaa;
    border-radius: 50%;
    height: 25px;
    width: 25px;
 }
 
 input[type="range"]:focus::-webkit-slider-thumb {   
   /* border: 1px solid #053a5f; 
   outline: 3px solid #053a5f;
   outline-offset: 0.125rem; */
   border: 1px solid rgb(0 0 0);
   outline: 2px solid #fff;
   border-radius: 50%;
 }
 
 /******** Firefox styles ********/
 /* slider track */
 input[type="range"]::-moz-range-track {
    background-color: #606057;
    border-radius: 8px;
    height: 4px;
 }
 
 /* slider thumb */
 input[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0; /*Removes default border-radius that FF applies*/
    margin-top: -12px;
    border-radius: 50%;
    background: radial-gradient(circle,gray 20%, rgb(223, 223, 223) 5%, white 50%);
    height:25px;
    width: 25px;
    
 }
 
 input[type="range"]:focus::-moz-range-thumb {
   /* border: 1px solid #053a5f;
   outline: 3px solid #053a5f;*/
   outline-offset: 0.125rem; 
   border: 1px solid rgb(0 0 0);
   outline: 2px solid #fff;
   border-radius: 50%;


 }
 /*======SLIDER ENDS========*/