@charset "utf-8";
/* CSS Document */
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;
    font-size: 16px;
}

.holder
{
    position: absolute;
    top: 0px;
    left: 0px;
}
.system_img
{
    position:absolute;
}

.textbox
{
    position: absolute;
    width:130px;
    /*color:#333;*/
    font-size:9pt;
    line-height: 1.2em;
    /*font-weight: bold;*/
    padding:0px;
    /*-moz-border-radius: 4px;
    border-radius: 4px;
    border: #666 solid 2px;*/
    background-color: #ffe3a5;
    -moz-box-shadow: 0px 3px 3px #CCC;
    -webkit-box-shadow: 0px 3px 3px #CCC;
    box-shadow: 0px 3px 3px #CCC;
    color: #eebe16;
}
.textbox.single {height:30px;}
.textbox.double {height:50px;}
.textbox_text
{
    width: 100%;
    text-align: center;
    margin-top: 3px;
    color: #FFFFFF;
    font-weight: bold;
    letter-spacing: 1px;
}
.textbox_text.lines1 {margin-top: 17px;}
.textbox_text.lines2 {margin-top: 10px;}
.textbox_text.lines3 {margin-top: 3px;}

#nothing-is-free        { left:340px; top:30px; }
#no-meals               { left:340px; top:120px; }
#additional-revenue     { left:520px; top:30px; }
#low-variable-cost      { left:520px; top:110px; }
#low-quality-service    { left:120px; top:70px; height: 60px; }
#lowest-fares           { left:240px; top:190px; }
#low-fixed-cost         { left:240px; top:260px; }
#high-profit            { left:430px; top:260px; }
#reinvest               { left:560px; top:350px; }
#bargaining-power       { left:160px; top:350px; height: 60px;}
#high-utilization       { left:320px; top:350px; }
#large-volume           { left:240px; top:460px; }

.textbox.interactive { cursor:pointer; }
.textbox.col1 { background-color: #0e334e; }
.textbox.col2 { background-color: #134368; }
.textbox.col3 { background-color: #102f33; }
.textbox.col4 { background-color: #194a50; }

a:focus{
    border: 2px solid black;
}
button:focus{
    outline: 3px solid #FF0000;
}
button .textbox_text{
    margin: 0px !important;
}
.img_btn
{
    position: absolute;
    border:0px;
    cursor:pointer;
    bottom: -15px;
}
.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;
}

#btnClear
{
    top:520px;
    left: 738px;
}
#playPause{
    width:128px;
    height:32px;
    background-image:url("../assets/play-pause.png");
    
    position: absolute;
    left: 580px;
    top: 520px;
}

.pause-btn{
    background-position: 0px 0px;
}
.pause-btn:hover{
    background-position: 0px -33px !important;
}

.play-btn{
    background-position: 0px -65px;
}
.play-btn:hover{
    background-position: 0px -98px;
}

.clear_btn
{
    width:128px;
    height:32px;
    background-image:url("../assets/button-clear.png");
    background-position: 0px 0px;
}
.clear_btn.hoverAction
{
    background-position: 0px -33px;
    background-position-y: -33px;
}

.arrow
{
    position: absolute;
    width:20px;
    height:20px;
}
.arrow.arrow1
{
    /* background-image:url("../assets/ryanair-dot1.png"); */
    background-color: #8f720a;
    border-radius: 50%;
}
.arrow.arrow2
{
    /* background-image:url("../assets/ryanair-dot2.png"); */
    background-color: #c54970;
    border-radius: 50%;
}
.arrow.arrow3
{
    /* background-image:url("../assets/ryanair-dot3.png"); */
    background-color: #6e7b19;
    border-radius: 50%;

}
.arrow.n
{
    background-position: -60px 0px;
    background-position-x: -60px;
}
.arrow.e
{
    background-position: 0px 0px;
    background-position-x: 0px;
}
.arrow.w
{
    background-position: -40px 0px;
    background-position-x: -40px;
}
.arrow.s
{
    background-position: -20px 0px;
    background-position-x: -20px;
}

#speed_slider_container
{
    height: 100px;
    width: 180px;
    position:absolute;
    top: 400px;
    left: 710px;
}

#speed_slider
{
    /*overflow:hidden;*/
    margin:auto;
    position:absolute;
    top:35px;
    left:20px;
    width:140px;
}

.slider_title
{
    width: 100%;
    height: 30px;
    padding-top:5px;
    font-size:13px;
    text-align:center;
    background-color: #58574b;
    /*background-color:#DDD;*/
    border-bottom: solid #FFFFFF 2px;
    color:#FFFFFF;
    font-weight:bold;
}

.slider_holder
{
    width: 100%;
    height: 70px;
    position:absolute;
    left:0px;
    top:30px;
    /*background-color:#EAF4FF;*/
    background-color: #d5d4c9;
    color: #58574b;
    border: solid #FFFFFF 2px;
}

#instruction
{
    position:absolute;
    top: 270px;
    left: 150px;
    width: 600px;
    height: 40px;
    color: #58574b;
    padding-top: 15px;
    text-align: center;
    font-size: 14pt;
    font-weight: normal;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: #666 solid 2px;
    background-color: #ffe3a5;
    -moz-box-shadow: 0px 3px 3px #CCC;
    -webkit-box-shadow: 0px 3px 3px #CCC;
    box-shadow: 0px 3px 3px #CCC;


}
#source_link
{
    position: absolute;
    bottom: 5px;
    right: 20px;
}
#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;
}

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

.img_btn
{
    display:block;
    border:0px;
    cursor:pointer;
    overflow:hidden;
}
.close_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: blue;
    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;
}
.slider-box-wrap *{
    box-sizing: border-box;
}
.slider-box-wrap{
    box-sizing: border-box;
    position: absolute;
    bottom: 75px;
    right: 30px;
    width: 180px;
    height: 110px;
    background-color: #d5d4c9;
    text-align: center;
}
.speed-val-wrap{
    width: 140px;
    margin: 5px auto 12px 20px;
}
.speed-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: #000;
    display: flex;
    justify-content: space-between;
    padding: 0 23px;
    font-size: 14px;
    margin-top: 7px;
}
.slider-info p{
    margin: 0;
    margin: 0;
    position: absolute;
    bottom: 0px;
}
.slider-info p:last-child{
    right: 20px;
}

.slider-wrap label{
    position: absolute;    
    user-select: none;
    height: 1px;
    width: 1px;
    overflow: hidden;
    color: #000000;
    left: 88px;
}
input[type="range"] {
    -webkit-appearance: none;
     appearance: none;
     background: transparent;
     cursor: pointer;
     width: 140px;
 }
 
 /* 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: #eeeeee;
    border-radius: 8px;
    height: 8px;  
    border: 1px solid #aaaaaa;
 }
 

 /* slider thumb */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -14px; /* Centers thumb on the track */
 
    /*custom styles*/
    /* background-color: #5cd5eb; */
    background: radial-gradient(white 10%, #a90416 10%, #a90416 45%, white 45%);
    border: 1px solid #aaaaaa;
    border-radius: 50%;
    /* background-image: url('assets/slider_handle.png'); */
    height: 32px;
    width: 32px;
 }
 
 input[type="range"]:focus::-webkit-slider-thumb {   
   /* border: 1px solid #053a5f; */
   outline: 3px solid #053a5f;
   outline-offset: 0.125rem; 
 }
 
 /******** Firefox styles ********/
 /* slider track */
 input[type="range"]::-moz-range-track {
    background-color: #eeeeee;
    border-radius: 8px;
    height: 8px;
 }
 
 /* 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*/
 
    /*custom styles*/
    /* background-color: #5cd5eb; */
    border-radius: 50%;
    background: radial-gradient(white 10%, #a90416 10%, #a90416 45%, white 45%);
    height: 32px;
    width: 32px;
 }
 
 input[type="range"]:focus::-moz-range-thumb {
   /* border: 1px solid #053a5f; */
   outline: 3px solid #053a5f;
   outline-offset: 0.125rem; 
 }