/* CSS Root Vars for colors */
:root {
	--green: #4CAF50;
	--blue: #008CBA;
	--red: #f44336;
	--lightgray: #e7e7e7;
	--darkgray: #555555;
}

/* ----- CSS-Classes ----- */
/* #region */
.feedback_negative, .feedback_positive {
	border-radius: 5px;
	padding: 10px 12px;
	margin-bottom: 25px;
}

.feedback_negative {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

.feedback_positive {
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
}

div.form_control {
	margin-bottom: 20px;
}
/* #endregion */

/* ----- Form Tags ----- */
/* #region */
form {
	background-color: #EEEEEE;
	padding: 25px 15px 10px 15px;;
}

fieldset {
	padding: 25px 2% 5px 2%;
	border: 1px solid var(--green);
}

legend {
	padding: 0 5px;
}

label {
	font-weight: 500;
	display: block;
	margin-bottom: 5px;
}

.no_block {
	display: inline;
}

.label_right {
	padding-left: 6px;
}

/* ----- Elemente mit Text als Inhalt, diese sollen ähnlich aussehen ----- */
input[type="text"],
input[type="password"],
textarea,
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"] {
	padding: 3px 10px;
	border: 1px solid var(--blue);
	border-radius: 3px;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
}

input[type="number"] {
	/* Erhöhe die Schriftgrösse, sonst sind die Pfeile zu klein */
	font-size: 18px;
}

/* ----- <input>s mit keinem Text als Inhalt ----- */
input[type="checkbox"] {

}

input[type="radio"] {

}
/* #endregion */

/* ----- Select ----- */
/* #region */
select {
	padding: 3px 10px;
	border: 1px solid var(--blue);
	border-radius: 3px;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
}

optgroup {

}

option {

}
/* #endregion */

/* NOTCH START */
/* ----- Buttons "Mini-Framework" ----- */
/* #region */
.btn {
	border: 0;
	border: none;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	padding: 12px 22px;
	font-size: 16px;
	transition-duration: 0.2s;
	border: 2px solid white;
}

.btn:active {
	box-shadow: 2px 2px 5px #555;
}

.btn-green {
	color: white;
	background-color: var(--green);
}

.btn-green:hover {
	color: black;
	background-color: white;
	border: 2px solid var(--green);
}

.btn-blue {
	color: white;
	background-color: var(--blue);
}

.btn-blue:hover {
	color: black;
	background-color: white;
	border: 2px solid var(--blue);
}

.btn-red {
	color: white;
	background-color: var(--red);
}

.btn-red:hover {
	color: black;
	background-color: white;
	border: 2px solid var(--red);
}

.btn-lightgray {
	color: black;
	background-color: var(--lightgray);
}

.btn-lightgray:hover {
	background-color: white;
	border: 2px solid var(--darkgray);
}

.btn-darkgray  {
	color: white;
	background-color: var(--darkgray);
}

.btn-darkgray:hover {
	color: black;
	background-color: white;
	border: 2px solid var(--darkgray);
}

.btn-xs {
	font-size: 12px;
}

.btn-x {
	font-size: 14px;
}

.btn-m {
	font-size: 16px;
}

.btn-l {
	font-size: 18px;
}

.btn-xl{
	font-size: 20px;
}
/* #endregion */
/* NOTCH END */