/************ VALIDATION ***********/
 
    #div_form_error_messages_container {
        padding: 20px;
        display: inline-block;
    }
    #div_form_error_messages {
        border: 1px solid #FF0000;
        background-color: #ff7171;
        text-align: left;
        padding: 5px 30px;
    }
    #div_form_error_messages ul {
        display: block;
        padding: 0;
    }
    #ul_form_error_messages {
        display: block;
        color: black;
    }
    
    em.fieldError {
        color: red;
        font-size: 0.9em;
        margin-left: 5px;
    }
    
    /* Marks an input field red */
    .inputError {
        background-color: #ff7171;
    }

/**********************************/


html {
	font-size: 18px;
	font-family: verdana, Arial, Helvetica, sans-serif;
/* 	color: #919191; */
}

body {
	background-color:#FFFFFF;
}

div {
	text-align: center;
}

img {
	border: 0;
}

/***************/

.chapter {
	padding-top: 25px;
	padding-bottom: 25px;
}
.img_header {
	margin-bottom: 15px;
	max-width: 100%;
	display: -webkit-box;
    margin-left: auto;
    margin-right: auto;
}

.font_small {
	font-size: 0.8em;
}

/* Tabelle immer zentriert ausrichten. */
table {
	margin-left: auto;
    margin-right: auto;
}


/********* FORMS ************/

/* In general textareas are a little bit too wide. But not with this. */
textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	width: 100%;
}


input {
   vertical-align: -webkit-baseline-middle;
   
   -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Font-size */
input[type=text],
input[type=password],
input[type=email],
#loginUsername,
button,
select,
textarea {
	font-size: 1.2em;
}

/* Height & width */
input[type=text],
input[type=password],
input[type=email],
#loginUsername,
button,
select,
textarea {
	height: 48px;
	width: 100%;
    max-width: 450px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
textarea {
	height: 96px;
}
button {
    background-color: #33a6dc;
    color: #fbfbfb;
    border: 0px solid #919191;
    -webkit-appearance: none;
    cursor: pointer;
    text-align: center;
    vertical-align: top;
    margin-top: 25px;
}
.form_row {
   	margin-top: 15px;
   	max-width: 450px;
   	margin-left: auto;
   	margin-right: auto;
   	text-align: left;
}
.form_label, .check-title {
   	vertical-align: -webkit-baseline-middle;
	font-size: 1.2em;
	text-align: left;
}

/*****************/

.div_link {
	margin-top: 25px;
}




/**** CHECKBOXES ****/
/** See https://thatwebdude.com/tutorial/bigger-html-checkboxes-with-font-awesome-and-css/ **/

/* big check labels */
.label-big-check {
	position: relative;
/* 	display: block; */
/* 	padding: 15px 0 15px 35px; */
	padding: 1em 0 0 2.5em;
	margin: 0;
/* 	border-top: 1px solid #eee; */
	cursor: pointer;
}
.label-big-check input {
	display: none;
}
.label-big-check .check-title {
/* 	font-size: .9em; */
/* 	font-weight: 700; */
	cursor: pointer;
}
.label-big-check input[type="checkbox"] + .check-title:before {
	position: absolute;
	top: 12px;
	left: 0;
	width: 30px;
	font-family: FontAwesome;
        content: "\f096";
        font-size: 2em;
        line-height: 1;
        color: #aaa;
}
.label-big-check input[type="checkbox"]:checked + .check-title:before {
    content: "\f14a";
/*     color: #333; */
}
	
	/*********************/

	.page_title {
		margin-top: 15px;
		margin-bottom: 0px;
		font-weight: bold;
		font-size: 1.4em;
		text-decoration: none;
		text-align: center;
	}
	
	/* LINKS */
	a {
		text-decoration: none;
		color: #005ea8;
	}
	a:active, a:focus {
		outline: none;
	}

	
	.clear_both {
		clear: both;
	}

/*	
body, html {
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.95em;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
 
a:active, a:focus {outline: none;}
 
main {
  margin: 3em 1em;
  line-height: 180%;
}
*/

@media screen and (min-width: 651px) {
	
	/* Font-size */
	input[type=text],
	input[type=password],
	input[type=email],
	#loginUsername,
	button,
	select,
	textarea {
		font-size: 16px;
		padding: 3px;
		height: unset;
	}
	
	button {
		width: unset;
		min-width: 300px;
    	min-height: 35px;
	}
	
	.form_label, .check-title {
 		font-size: 1em;
	}
	.label-big-check {
	    padding: 0.8em 0 0 2.5em;
	}
	
	/* Overwrite the class fa from font-awesome.css so that the arrow in front of the link will not be shown anymore in the menu. */
	.fa {
		display: none;
	}
}