body {
    /* Hintergrundbild zentriert anzeigen */
    background: url(../images/background.png) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

.center{
    text-align: center;
}
.hidden { display: none; }

.navbar { min-height: 65px; }

.navbar-brand { padding: 20px 15px; }
.navbar-brand > img { display: inline; margin-right: 30px; }
.navbar-brand .name { padding-left: 10px; }

.navbar-text {
  margin-top: 23px;
  font-size: 17px;
  margin-right: 13px;
  margin-left: 13px;
}

.electrode-size span {
  background-color: #006633;
  color: #fff;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 3px;
}


.btn-primary,
.btn-primary:hover,
.btn-primary:active {
  color: #fff;
  background-color: #006633;
  border-color: #006633;
}

.btn-primary:focus, .btn-primary.focus {
    color: #fff;
    background-color: #006633;
    border-color: #006633;
}

.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.btn-primary:active.focus,
.btn-primary.active.focus {
    color: #fff;
    background-color: #006633;
    border-color: #006633;
}

.btn-lg, .btn-group-lg > .btn {
    font-size: 21px;
}

.btn-back,
.btn-back:hover,
.btn-back:active {
    color: #fff;
    background-color: #8abd53;
    border-color: #8abd53;
}

.btn-back:focus, .btn-back.focus {
  color: #fff;
  background-color: #8abd53;
  border-color: #8abd53;
}

.btn-back:active:hover,
.btn-back.active:hover,
.btn-back:active:focus,
.btn-back.active:focus,
.btn-back:active.focus,
.btn-back.active.focus {
  color: #fff;
  background-color: #8abd53;
  border-color: #8abd53;
}

.panel {
  margin-bottom: 0;
}

.panel-primary {
  border-color: #006633;
}

.panel-primary > .panel-heading {
  color: #fff;
  background-color: #006633;
  border-color: #006633;
}

.text-info {
  color: #006633;
}

.panel-default p {
    margin-bottom: 15px;
    font-size: 21px;
    font-weight: 200;
}

.instruction-text {
  position: absolute;
  top: 30%;
  width: 30%;
}

.measdatatable {
  position: absolute;
  top: 20px;
  left: 30px;
  width: 25%;
  opacity: 0.5;
  font-size: 75%;
}

.table > thead > tr > th {
  color: #006633;
}

.fa-1p5x {
	font-size: 1.5em !important;
}

.login {
	max-width : 280px;
	margin-top: 75px;
}

.login .btn-block {
	margin-top: 7px;
}

.login input.btn {
    font-size: 23px;
}

.numpad {
  margin-top: 10px;
  margin-left: 1px;
}

.numpad .btn-lg, .btn-group-lg > .btn {
  border-radius: 0;
    font-size: 38px;
}

.numpad .btn {
  border-radius: 0;
  padding-left: 30px;
  padding-right: 30px;
  border-bottom: 0;
}

.numpad .btn:last-child {
  padding-left: 53px;
  padding-right: 53px;
  border-bottom: 1px solid #ccc;
}

.numpad .btn:nth-last-child(2) {
  border-bottom: 1px solid #ccc;
}

nav a {
 color: #787878 !important;
}

nav a:hover{
    color: #006633 !important;
}


.apply-img {
	margin: 7px;
  width: 100%;
  height: 100%;
}

img.size-img {
  position: absolute;
  bottom:0;
  left: 0;
  right:0;
  margin: auto;
  padding: 5px;
}

.size-box {
  margin-left: 75px;
  margin-bottom: 10px;
}

.size-col {
    height: 140px;
}

.size-button-col {
    text-align: center;
    padding-left: 15px;
}

.size-template div {
  margin-right: 30px;
}

.size-template div:last-child {
  margin-left: 30px;
}

.size-template div:nth-child(2) {
  margin-left: -30px;
}

.size-template div:nth-child(3) {
  margin-left: -5px;
}

.size-template div:nth-child(4) {
  margin-left: 10px;
}

.size-template div:last-child button {
    margin-left: 23px;
}

.size-template div:nth-last-child(2) button {
  margin-left: 3px;
}

.active img {
  -webkit-filter: invert(.3);
  filter: invert(.3);
}

/* MEASUREMENT IMAGE POSITIONING */

.measurement-img {
  width: 100%;
	height:358px;
	background-image:url("../images/messkabelanschluesse.png");
	background-repeat: no-repeat;
	background-position: right center;
	background-size:cover;
  margin-bottom: 40px;
}

.flip{
   transform: scaleX(-1);
}

/* animation */

.positioners{
	position:absolute;
	width: 100%;
	height: 100%;
}

.positioner{
	position:absolute;
	width: 80px;
	height: 80px;
	z-index: 0;
	font-size: 1.3em;
}

#pl1{
	left: 560px;
	top: 110px;
}
#pl2{
	left: 560px;
	top: 208px;
}
#pl3{
	left: 651px;
	top: 208px;
}
#pl4{
	left: 651px;
	top: 110px;
}

#pr1{
	left: 862px;
	top: 110px;
}
#pr2{
	left: 862px;
	top: 208px;
}
#pr3{
	left: 767px;
	top: 208px;
}
#pr4{
	left: 767px;
	top: 110px;
}

/* Blinking stuff */

@keyframes blinking {
  0% { background-color: rgba(255, 255, 0, 0.5); }
  100% { background-color: rgba(0,180,51, 0.9); }
}
@-webkit-keyframes blinking {
  0% { background-color: rgba(255, 255, 0, 0.5); }
  100% { background-color: rgba(0,180,51, 0.9); }
}

.blinker{
	border-radius:10px;
	width: 45px;
	height: 45px;
	background-color: rgba(255, 255, 0, 0.5);
	text-align:center;
	display:table-cell;
	vertical-align:middle;
	color:#006633;
}

.blinking{
	-webkit-animation: blinking 0.5s ease infinite alternate;
  	-moz-animation: blinking 0.5s ease infinite alternate;
  	animation: blinking 0.5s ease infinite alternate;
}

.progress {
  margin-top: 40px;
}


/* results */

.mamma-left h4, .mamma-right h4 {
  margin-left: 20px;
}

.mamma-left h5, .mamma-right h5 {
  margin-left: 5px;
}

/* Graph */
.ellipseLabel_Links {
    top: 10px!important;
    left: 368px!important;
    display: flex;
    width: 50px;
    color: blue;
}

.ellipseLabel_Links:before {
    content: '';
    height: 8px;
    flex: 1;
    border-bottom: 2px solid blue;
    margin-right: 5px;
}

.ellipseLabel_Rechts {
    top: 40px!important;
    left: 368px!important;
    display: flex;
    width: 60px;
    color: red;
}

.ellipseLabel_Rechts:before {
    content: '';
    height: 8px;
    flex: 1;
    border-bottom: 2px solid red;
    margin-right: 5px;
}

.referenceLabel_Links {
    top: 80px!important;
    left: 368px!important;
    display: flex;
    width: 50px;
    color: blue;
}

.referenceLabel_Links:before {
    content: '';
    height: 8px;
    flex: 1;
    border-bottom: 2px dashed blue;
    margin-right: 5px;
}

.referenceLabel_Rechts {
    top: 110px!important;
    left: 368px!important;
    display: flex;
    width: 50px;
    color: red;
}

.referenceLabel_Rechts:before {
    content: '';
    height: 8px;
    flex: 1;
    border-bottom: 2px dashed red;
    margin-right: 5px;
}

/* Hint */
.hint {
  margin-top: 10px;
  background-color: rgba(255, 255, 255, 0.25);
  padding: 5px 10px;
}

/* sticky footer stuff */

html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 80px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 80px;
}

.footer .panel {
  background-color: rgba(255, 255, 255, 0.25);
  border: 0;
}

.jumbotron {
  position: fixed;
  left: 0;
  bottom: 0;
  margin-bottom: 0;
  width: 100%;
}

.container .jumbotron {
  border-radius: 0;
}

@media screen and (min-width: 768px) {
  .jumbotron {
    padding-top: 0;
    padding-bottom: 20px;
}}

.start-btns a {
  margin-right: 30px;
}

#content_area{
  margin-top: 35px;
}

/*
 * test result page
 */

.xera-panel-test-style {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    height: 510px;
}

.test-panel-style {
    background-color: rgba(255, 255, 255, 0); /* White with 100% opacity */
    border: none;
    margin: 0;
    padding: 0;
}

.test-start-img {
    background-image: url('../images/XERA3-Test-start.jpg')
}

.test-img {
    background-image: url('../images/XERA3-Test-vorderseite.jpg');
    background-size: 77%;
    background-position: center;
}


.panel-test-text {
    position:absolute;
    top: 15px;
    left: 80px;
    padding: 10px;
}
.panel-test-text-overlay p {
    font-weight: bold; color: #006633;
}


.test-result-status{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.7);
    z-index: 10;
    text-align: center;
}

.test-result-status i {
    font-size: 150px;
    margin-top: 200px;
}

.test-result-status .col-md-6:first-child i {
    margin-left: 170px;
}

.test-result-status .col-md-6:last-child i {
    margin-right: 145px;
}

.test-result-status .fa-check{
    color: green;
    margin-left: 0px;
}

.test-result-status .fa-spinner{
    color: gray;
    margin-left: 0px;
}

.test-result-status .fa-times{
    color: red;
    margin-left: 0px;
}


/*
 * test result summary
*/

.test-result-summary .test-result-wrapper {
    display: flex;
    justify-content: space-between;
}

.test-result-summary .xera-panel-img,
.test-result-summary .xera-panel-table {
    position: relative;
}

.test-result-summary .xera-panel-table {
    text-align: center;
    width: 188px;
}

.test-result-summary .xera-panel-table table {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.test-result-summary .xera-panel-table table tr:nth-child(odd) td {
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 5px;
}

.test-result-summary .xera-panel-table table tr:first-child td {
    padding-top: 0;
}

.test-result-summary .xera-panel-table table tr:nth-child(even) td:first-child {
    border-right: 1px solid #969696;
    text-align: left;
}

.test-result-summary .xera-panel-table table tr:nth-child(even) td:first-child:before {
    font-family: 'FontAwesome';
    content: '\f104';
    margin-right: 10px;
}

.test-result-summary .xera-panel-table table tr:nth-child(even) td:last-child {
    text-align: right;
}

.test-result-summary .xera-panel-table table tr:nth-child(even) td:last-child:after {
    font-family: 'FontAwesome';
    content: '\f105';
    margin-left: 10px;
}

.test-result-summary .xera-panel-img .apply-img {
    position: relative;
    width: 460px;
    height: 460px; /*323*/
    margin: 0;
}

.test-result-summary .xera-panel-img span {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: green;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: 0.75;
}

.result_image img {
    width: 160px;
    height: auto;
}

.footer-logo {
    margin-top: -4.0rem;
}
.footer-logo a {
    display: block;
    margin-bottom: 0.5rem;
}