body {
    padding:40px 15px;
}
h2 {
	border-bottom: 1px solid #bc002d;
	padding-bottom: 5px;
	margin-bottom: 30px;
}
#role {
	max-width:250px;
}
.row .column {
	width: auto;
}
.row .column {
	flex: 0 1 auto;
	width: auto;
}
.row {
	justify-content: flex-start;
}
.row .column.left {
	min-width:30%;
}
.none .button {
	background-color: gray;
	border-color:gray;
}
.krank .button {
	background-color: darkkhaki;
	border-color:darkkhaki;
	color:#000;
}
.office .button {
	background-color: #f00;
	border-color:#f00;
}
.homeoffice .button {
	background-color: #c30;
	border-color:#c30;
}
.abwesend .button {
	background-color: dodgerblue;
	border-color:dodgerblue;
}
.ferien .button {
	background-color: deepskyblue;
	border-color:deepskyblue;
}
select.ferien {
	border-color:deepskyblue;
}
select.office {
	border-color: #f00;
}
select.homeoffice {
	border-color: #c30;
}
select.abwesend {
	border-color: dodgerblue;
}
select.krank {
	border-color: darkkhaki;
}
.column.left h4 {
	position: relative;
	top:5px;
}
.column.right h4 {
	min-width: 147px;
}
.button, button, input[type="button"], input[type="reset"], input[type="submit"] {
	background-color: #bc002d;
	border: 0.1rem solid #bc002d;
}
a {
	color:#bc002d;
}
.gap {
	margin-top:100px;
}
.users input {
	max-width:250px;
}

@media screen and (max-width: 650px) {
body {
	padding: 1.0rem 0;
}
.container {
	padding: 0 1.0rem;
}
h2 {
	font-size: 2.6rem;
}
.row {
	flex-direction: row;
	justify-content: space-between;
}
.row .column {
	flex: 0 1 50%;
	width: 50%;
}
.column.left h4 {
	position: relative;
	top: 5px;
	font-size:1.7rem;
}
.column.right h4, .column.right input {
	width: 100%;
}
.gap {
	margin-top: 50px;
}



}