html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

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

body {
  margin-bottom: 60px;
}


.noPdf span {
    transform: rotate(45deg);
    font-size: 85px;
    color: grey;
}

.errorPdf span {
	font-size: 85px;
	color: red;
}

table tr {
    cursor: pointer;
}

    /* Display a little circle icon */
    table tr td .statusIcon {
        background-color: #a9a9a9;
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 15px;
        vertical-align: middle;
        margin-top: -5px;
    }

    table tr.success td .statusIcon {
        background-color: #4bb543;/*6d;*/
    }
    table tr.fail td .statusIcon {
        background-color: #d43a13;/*7d;*/
    }
    table tr.row-selected {
        background-color: #e7e7e7 !important;
    }

div.dts div.dataTables_scrollBody {
    background: none !important;
}

textarea#livePdfJson {
	border-radius: 15px;
}

.runTest .basicLoader {
	width: 16px;
	height: 16px;
	
	position: absolute;
	top: 20%;
	left: 40%;
}


/* Basic loader */
.basicLoader {
	width: 48px;
	height: 48px;
	border: 5px solid #FFF;
	border-bottom-color: transparent;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
} 



/* Train loader */

.loadingPdf .trainContainer {
	position: relative;
}

.trainContainer .track {
	position: relative;
	overflow: hidden;
	width: 50px;
	height: 90px; /*100px;*/
	border-left: 3px solid #333;
	margin-left: 13px;
	/*transform: skew(-10deg) rotateX(45deg);*/
}

	.trainContainer .track:before {
		content: "";
		position: absolute;
		height: 3px;
		width: 50px;
		background-color: #333;
		top: 90px;
		box-shadow: 0 0 #333, 0 -10px #333, 0 -20px #333, 0 -30px #333, 0 -40px #333, 0 -50px #333, 0 -50px #333, 0 -60px #333,0 -70px #333, 0 -80px #333, 0 -90px #333, 0 -100px #333, 0 -110px #333, 0 -120px #333, 0 -130px #333, 0 -140px #333;
		animation: track 1s linear infinite;
	}

	.trainContainer .track:after {
		content: "";
		position: absolute;
		/*transform: rotate(-15deg);*/
		width: 50px;
		height: 120px;
		background-color: #fff;
		border-left: 3px solid #333;
		left: 30px;
		top: -10px;
	}

@keyframes track {
	0% {
		transform: translateY(70px) rotateX(45deg);
	}

	100% {
		transform: translateY(0px) rotateX(45deg);
	}
}

.trainContainer .train {
	position: absolute;
	width: 60px;
	height: 60px;
	background-color: #333;
	border-radius: 15px;
	top: 0;
	/*left: -13px;*/
	transform-origin: bottom;
	animation: rotate 1s linear infinite;
}

	.trainContainer .train:before {
		content: "";
		position: absolute;
		background-color: #ced4da;
		width: 20px;
		height: 15px;
		left: 9px;
		top: 15px;
		box-shadow: 22px 0 #ced4da;
	}

	.trainContainer .train:after {
		content: "";
		position: absolute;
		background-color: #ced4da;
		border-radius: 50%;
		height: 10px;
		width: 10px;
		top: 45px;
		left: 10px;
		box-shadow: 30px 0px #ced4da;
	}

@keyframes rotate {
	0% {
		transform: rotate(0);
	}

	25% {
		transform: rotate(2deg);
	}

	50% {
		transform: rotate(0);
	}

	75% {
		transform: rotate(-2deg);
	}

	100% {
		transform: rotate(0);
	}
}

.trainContainer .loadingText {
	font-style: italic;
	color: grey;
}