@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

body 
{
    height:100%;
    width:100%;
    font-family:Arial,Helvetica,sans-serif;
}

#wrapper
{
    width:100%;
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
    padding:32px;
}

#wrapper #titleline
{
float:left;    
margin-top:5px;
}

#wrapper #logo
{
    width:100%;
    max-width:300px;
    height:auto;
    float:right;
}

#wrapper #logo>img
{
    width:100%;
}
#wrapper #content
{
    width:100%;
    clear:left;
    float:left;
}


.blur
{
  -webkit-filter: blur(5px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

#preloader {
  height: 100%;
  width: 100%;
  position:absolute;
  display:none;
  top:0px;
  left:0px;
  font-family: Helvetica;
  background-color:rgba(255, 255, 255, 0.7);
}

.loader {
  height: 20px;
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.loader--dot {
  animation-name: loader;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: black;
  position: absolute;
  border: 2px solid white;
}
.loader--dot:first-child {
  background-color: #8cc759;
  animation-delay: 0.5s;
}
.loader--dot:nth-child(2) {
  background-color: #8c6daf;
  animation-delay: 0.4s;
}
.loader--dot:nth-child(3) {
  background-color: #ef5d74;
  animation-delay: 0.3s;
}
.loader--dot:nth-child(4) {
  background-color: #f9a74b;
  animation-delay: 0.2s;
}
.loader--dot:nth-child(5) {
  background-color: #60beeb;
  animation-delay: 0.1s;
}
.loader--dot:nth-child(6) {
  background-color: #fbef5a;
  animation-delay: 0s;
}
.loader--text {
  position: absolute;
  top: 200%;
  left: 0;
  right: 0;
  width: 4rem;
  margin: auto;
}
.loader--text:after {
  content: "Warten";
  font-weight: bold;
  animation-name: loading-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes loader {
  15% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(230px);
  }
  65% {
    transform: translateX(230px);
  }
  95% {
    transform: translateX(0);
  }
}
@keyframes loading-text {
  0% {
    content: "Warten";
  }
  25% {
    content: "Warten.";
  }
  50% {
    content: "Warten..";
  }
  75% {
    content: "Warten...";
  }
}

label{
	position: relative;
	cursor: pointer;
	color: #666;
	font-size: 20px;
}

input[type="checkbox"], input[type="radio"]{
	position: absolute;
	right: 9000px;
}

/*Check box*/
input[type="checkbox"] + .label-text:before{
	content: "\f096";
	font-family: "FontAwesome";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing:antialiased;
	width: 1em;
	display: inline-block;
	margin-right: 5px;
}

input[type="checkbox"]:checked + .label-text:before{
	content: "\f14a";
	color:#00325f;
	animation: effect 250ms ease-in;
}

input[type="checkbox"]:disabled + .label-text{
	color: #aaa;
}

input[type="checkbox"]:disabled + .label-text:before{
	content: "\f0c8";
	color: #ccc;
}

/*Radio box*/

input[type="radio"] + .label-text:before{
	content: "\f10c";
	font-family: "FontAwesome";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing:antialiased;
	width: 1em;
	display: inline-block;
	margin-right: 5px;
}

input[type="radio"]:checked + .label-text:before{
	content: "\f192";
	color: #00325f;
	animation: effect 250ms ease-in;
}

input[type="radio"]:disabled + .label-text{
	color: #aaa;
}

input[type="radio"]:disabled + .label-text:before{
	content: "\f111";
	color: #ccc;
}

/*Radio Toggle*/

.toggle input[type="radio"] + .label-text:before{
	content: "\f204";
	font-family: "FontAwesome";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing:antialiased;
	width: 1em;
	display: inline-block;
	margin-right: 10px;
}

.toggle input[type="radio"]:checked + .label-text:before{
	content: "\f205";
	color: #2980b9;
	animation: effect 250ms ease-in;
}

.toggle input[type="radio"]:disabled + .label-text{
	color: #aaa;
}

.toggle input[type="radio"]:disabled + .label-text:before{
	content: "\f204";
	color: #ccc;
}


@keyframes effect{
	0%{transform: scale(0);}
	25%{transform: scale(1.3);}
	75%{transform: scale(1.4);}
	100%{transform: scale(1);}
}

.circle
{
    background-color: #ccc;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 20px;
    color:Black;
    font-family:Arial,Helvetica,sans-serif;
    font-size:18px;
    font-weight:bold;
    margin-right:auto;
    margin-left:auto;
    padding-top:0px;
}

.circle a
{
    color:Black;
    text-decoration:none;
}

.circle_active
{
    background-color:#00325f;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 20px;
    color:White;
    font-family:Arial,Helvetica,sans-serif;
    font-size:18px;
    margin-right:auto;
    margin-left:auto;
    font-weight:bold;
    padding-top:0px;
}

.circle_active a
{
    color:White;
    text-decoration:none;
}

.step
{
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    text-transform:uppercase;
    text-align:center;
    clear:left;
    color:#aaa;
    margin-right:auto;
    margin-left:auto;
    margin-top:5px;
}

.step a 
{
    color:#aaa;
    text-decoration:none;
}

.step_active
{
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    text-transform:uppercase;
    text-align:center;
    clear:left;
    color:#000;
    margin-right:auto;
    margin-left:auto;
    margin-top:5px;
}

.step_active a 
{
    color:#000;
    text-decoration:none;
}

.greyline
{
    border-bottom:3px solid #aaa;
    height:25px;
    width:3%;
    float:left;
}

.progressbox
{
    float:left;
    width:auto;
    width:80px;
}

#progressline
{
    width:100%;
    float:left;
    margin-bottom:32px;
}

.redtext
{
    color:Red;
}

.invalid-bg
{
    background-color:#ffaaaa;
}

hr
{
    width:100%;
    clear:both;
    border:1px solid;
    margin-top:16px;
    float:left;
    mragin-bottom:16px;
    
}

.btn-primary
{
    background-color:#00325f;
    border-color:#00325f;
}

h1
{
    font-size:26px;
    margin-bottom:24px;
}

h2
{
    font-size:22px;
    margin-bottom:32px;
}

h3
{
    font-size:18px;
    font-weight:bold;
    color:#00325f;
}

select.dropdown
{
    font-size:20px;
}

.buttonline
{
    clear:left;
    margin-top:32px;
    width:100%;
    float:left;
}

table, td, th
{
    border-collapse: collapse;
}

table.print, table.print td, table.print th
{
    border:1px solid #000000;
}

.btn 
{
    margin-bottom:8px;
}