@charset "UTF-8";
/* CSS Document */

.header {
	text-align:center;
	background-color: #2c2f5a;
	height: 100px;
}
.header-title{
  color: white;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 24px;
}

/* 
#QRcode{
	width: 256px;
	margin:auto;
}
 */
#QRcode img{
	display: unset !important;
}

.mainarea{
	background-color:white;
    height: calc(100vh - 115px);
}

.instructions-box{
	font-family: Arial, sans-serif;
	font-size: 1rem;
}

.leg-img{
	height: 100px;
	opacity: 0.5;
}

.leg-img.selected{
	opacity: 1;
}

/** ZingChart fix */
#chart-area,
#animation-area{
    height: calc(100vh - 150px);
}

@media screen and (max-width: 767px){
	#chart-area{
		height: calc(100vh - 110px);
	}
}
#chart-header{
	min-height: 60px;
}
#chart-body{
	height:100%;
}
#chart-container{ 
	height:calc(100vh - 200px);
}

#animation-container{
	height: calc(100vh - 250px);
}

 .modal-body, .modal-header, .modal-footer{
	text-align:center;
}


#parametersTable, #listTable {
  border-collapse: collapse;
  width: 100%;
}

#parametersTable td, #listTable td {
  border: 1px solid #ddd;
  padding: 6px;
  font-size: 12px;
}

#parametersTable tr:nth-child(even), #listTable tr:nth-child(even){background-color: #f2f2f2;}

#parametersTable tr:hover, #listTable tr:hover {background-color: #ddd;}

#listTable thead tr{
	background-color: #1b8e95;
	color: white	
}

/** 
 * OLDER STYLING RULES 

#instructions{
	margin: 30px auto auto 30px;
	height: 100%;
	background-color: white;
}
.qrcode-box{
	background-color: white;
	text-align: center;
	margin: auto auto auto auto;
	padding: 30px 30px 30px 30px;
	min-height: 320px;

}

#animation-area{
	width: 40%;
	float: left;
}
#chart-header{
	height :56px;
	background-color: white;
	padding: 4px;
} 
#animation-header{
	heigth:104px;
	background-color: white;
	padding: 4px;
	text-align: center;
}

#leftLeg, #rightLeg{
	width: 96px;
	height:96px;
	border: 2px solid #808080;
	opacity: 0.5;
}
.shbtn{
}

*/


.btn-player{
    background-color: #4C4C89;
}
.modal-header{
    background-color: #4C4C89;
    color: #fff;
}
.modal-header button.close{
    color: #fff;
}
.modal-body h4 {
    color: #2C2F5A;
}
.modal-body h4  i{
    margin-right: 1em;
}

.modal-body h5 {
    color: #6C757D;
    text-align: left;
}

.step-table{
    text-align: left;
    /*border-spacing: 1em .1em;
    border-collapse: separate;*/
}
.step-table > tr > td:first-child {
    padding-left: 1em;
}
.step-table  th {
   /* white-space: nowrap;*/
}
.step-table tr:nth-child(even) {
  background-color: #f2f2f2;
}
/*.btn-player > i{
    color: #17a2b8;
}*/
.slick-prev:before, .slick-next:before {
    color: #17A2B8;
    background-color: transparent;
}

div.slick-list {
    margin-left:1em;
}
.slick-prev {
    left: -14px;
}
.slick-next{
    right: -14px;
}
#loadinput{
    opacity:0;
    z-index: -1;
    position:absolute;
}
#btnLoad{
    margin-bottom: 0;
}