@charset "utf-8";
/* CSS Document */
button:focus{
    border: 2px solid black;
}
.tickLabel { font-size: 8pt; }

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    font-weight: normal;
  }
  
 
  
  @-moz-document url-prefix() {
    body {
      font-weight: lighter !important;
    }
  }

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

.invisible-item{
    position: absolute;
    width: 830px;
    height: 510px;
    /* background: gray; */
    /* border: 2px solid red; */
    top: 0;
    left: 40px;
}
.invisible-item p{
    height: 100%;
    width: 100%;
    color: transparent;
}

#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;
}
.text-border{   
    position: absolute;
    z-index: 2;
}
.text-border p{
    color: transparent;
}
.text-border:focus, .text-border:focus-visible{
    border:2px solid black;
}

.text-border-1{
    top: 404px;
    left: 70px;
    height: 24px;
    width: 112px;
}
.text-border-2{
    top: 406px;
    left: 688px;
    height: 24px;
    width: 122px;
}
.text-border-3{
    top: 163px;
    left: 842px;
    height: 100px;
    width: 22px;
}

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

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

#swiffycontainer
{
    position: absolute;
    top:10px;
    left: 50px;
    width: 820px;
    height: 500px;
    background-color:#C5C8B7;
}

#slider_holder
{
    width: 410px;
    height: 70px;
    position:absolute;
    left:450px;
    top:430px;
    /*background-color:#DAE4FF;
    border: solid #999 1px;*/
}

#slider
{
    /*overflow:hidden;*/
    margin:auto;
    position:absolute;
    top:35px;
    left:25px;
    width:350px;
}

#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-landmarks-wrap{
    text-align: left;
    margin-top: 35px;
    width: 450px;    
}
.slider-landmarks-wrap button{
    padding: 1px 6px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}
#btn_a{
    margin-left: 98px;
}
#btn_b{
    margin-left: 22px;
    
}
#btn_c{
    margin-left: 66px;
}
#btn_d{
    margin-left: 115px;
}

.slider-box-wrap *{
    box-sizing: border-box;
}
.upper-range{
    height: 8px;
    width: 375px;
    background: #eeeeee;
    border: 1px solid #aaaaaa;
    position: absolute;
    top: 5px;
    left: 15px;
    border-radius: 8px;
}
.slider-box-wrap{
    box-sizing: border-box;
    position: absolute;
    bottom: -48px;
    right: 265px;
    width: 400px;
    height: 110px;
    text-align: center;
}

.slider-wrap label{
    position: absolute;    
    user-select: none;
    height: 1px;
    width: 1px;
    overflow: hidden;
    color: #000000;
    font-size: 16px;
}
input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 400px;
    position: absolute;
    left: 0;
    top: 3px;
 }
 
 /* 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: u#eeeeee00;
    border-radius: 8px;
    height: 8px;  
    border: 1px solid #aaaaaa00;
 }
 

 /* slider thumb */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -14px; /* Centers thumb on the track */
    /* margin-left: 10px; */
    /*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: 40px;
    width: 40px;
 }
 
 input[type="range"]:focus::-webkit-slider-thumb {   
   /* border: 1px solid #053a5f; */
   outline: 2px solid #053a5f;
   outline-offset: 0.125rem; 
 }
 
 /******** Firefox styles ********/
 /* slider track */
 input[type="range"]::-moz-range-track {
    background-color: #eeeeee00;
    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: 40px;
    width: 40px;
    border: 1px solid #aaaaaa;
   -moz-transform: translateY(-5px);
 }
 
 input[type="range"]:focus::-moz-range-thumb {
   /* border: 1px solid #053a5f; */
   outline: 2px solid #053a5f;
   outline-offset: 0.125rem; 
 }