* {
	box-sizing: border-box;
}

html {
	font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size: 16px;
}

html, body {
	height: 100%;
}

body {
	background: white;
}

h1:first-child {
	margin-top: 0;
}

.app-view {
	height: 100%;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
.app-view__main {
	min-height: 100%;
	padding: .5rem .5rem 2.5rem;
}
.app-view__footer {
	margin-top: -1.5rem;
	padding: 0 .5rem;
	color: hsl(0, 0%, 40%);
}

.app-view__overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: white;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}
.app-view__overlay__window {
	padding: .5rem 1rem;
}

.app-view--overlay-visible {
	overflow: hidden;
}
.app-view--overlay-visible .app-view__overlay {
	display: block;
}


.attendee-collection__header {
	padding: .5rem 0;
}
.attendee-collection__header__headline {
	background: url(/img/buelkbook.svg) 0 .15em no-repeat;
	padding-left: 1em;
	background-size: .9em;
}

.attendee-collection__attendees {
	table-layout: fixed;
	width: 100%;
}

.companion-collection {
	margin: 0;
	padding: 0;
	list-style: none;
}

th {
	padding: .5rem;
	background: hsl(0, 0%, 95%);
	text-align: left;	
}
td {
	padding: .5rem;
	vertical-align: top;
	overflow: hidden;
	text-overflow: hidden;
}

tbody tr:nth-child(2n+1) {
	background: hsl(0, 0%, 98%);
}


@media screen and (max-width: 40rem) {
	table, thead, tbody, tr, td {
		display: block;
	}

	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tbody tr {
		border-top: .1rem solid hsl(0, 0%, 40%);
	}
	tbody tr:first-child {
		border-top: 0;
	}

	td {
		padding-left: 8rem;
		min-height: 2rem;
		position: relative;
	}
	td::before {
		content: "abc";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 8rem;
		padding: .5rem;
		font-weight: bold;
	}
	.attendee-table-row__guys::before {
		content: "Leute:";
	}
	.attendee-table-row__stuff::before {
		content: "Zeugs:";
	}
	.attendee-table-row__comment::before {
		content: "Anmerkung:";
	}
	.attendee-table-row__option::before {
		content: "Abstimmung:";
	}
	.attendee-table-row__controls {
		padding-left: .5rem;
	}
	.attendee-table-row__controls::before {
		content: none;
	}
	.attendee-collection-total__votes th, .attendee-collection-total__votes td {
		padding: .5rem;
		padding-left: 7rem;
	}
	.attendee-collection-results__vote-row__option::before {
		content: "Option:";
	}
	.attendee-collection-results__vote-row__votes::before {
		content: "Stimmen:";
	}
	.attendee-collection-results__meal-row__meal::before {
		content: "Mahlzeit:";
	}
	.attendee-collection-results__meal-row__count::before {
		content: "Leute:";
	}
}


input, textarea {
	border: .1rem solid hsl(0, 0%, 85%);
	padding: .3rem;
}


.button {
	display: inline-block;
	background: hsl(0, 0%, 90%);
	border: 0;
	padding: .4rem;

	color: black;
	text-decoration: none;
}
.button:hover {
	background: hsl(0, 0%, 85%);
}
.button:focus {
	outline: .15rem dashed hsl(0, 0%, 40%);
}
.button:active {
	-ms-transform: translateY(1px);
	-moz-transform: translateY(1px);
	-webkit-transform: translateY(1px);
	transform: translateY(1px);
	outline: 0;
}

.button--negative {
	background: hsl(2, 98%, 61%);
	color: white;
}
.button--negative:hover {
	background: hsl(2, 98%, 56%);
}

.button--positive {
	background: hsl(130, 73%, 40%);
	color: white;
}
.button--positive:hover {
	background: hsl(130, 73%, 35%);
}

.button--float {
	display: block;
	float: left;
	margin-right: .5em;
}


.input-group {
	display:block;
	margin: 2rem 0;
}
.input-group__label {
	display: block;
	margin: .3rem 0;
}
.input-group__input {
	display: block;
	width: 100%;
}
.input-group__input--multiline {
	height: 6rem;
}
.input-group__message {
	margin: .3rem 0;
	color: hsl(2, 98%, 56%);
}

.input-group--error .companion-edit__input-group__input--name {
	border-color: hsl(2, 98%, 56%);
}
.input-group--error .companion-edit__input-group__label--name {
	color: hsl(2, 98%, 56%);
}

@media screen and (max-width: 40rem) {
	.companion-edit {
		margin: 1rem -.3rem;
	}
	.companion-edit__input-group {
		display: flex;
		align-items: center;
		margin: .3rem;
	}
	.companion-edit__input-group__label {
		padding-right: .5rem;
	}
	.companion-edit__input-group__input {
		flex-grow: 1;
		width: 100%;
	}
	.companion-edit__meals {
		display: flex;
		flex-wrap: wrap;
	}
	.companion-edit__meals .companion-edit__input-group {
		flex: 1;
		flex-basis: 0;
		flex-grow: 1;
		flex-shrink: 0;
		background: hsl(0, 0%, 90%);
		padding: .4rem;
	}
	.companion-edit__meals .companion-edit__input-group__label {
		width: 11rem;
		flex-grow: 1;
		white-space: nowrap;
		padding: 0;
		padding-left: .5rem;
		order: 2;
	}
	.companion-edit--canceled .companion-edit__meals, 
	.companion-edit--canceled .companion-edit__input-group--option {
		display: none;
	}
}

@media screen and (min-width: 40rem) {
	.companion-edit {
		display: flex;
		align-items: center;
	}
	.companion-edit__input-group {
		display: block;
		padding: .5rem;
	}
	.companion-edit__input-group--name {
		padding-left: 0;
		width: 20%;
		flex-shrink: 0;
	}
	.companion-edit__input-group--checkbox {
		width: 3rem;
		text-align: center;
	}
	.companion-edit__input-group--option {
		flex-grow: 1;
		padding-right: 0;
	}
	.companion-edit__input-group__label {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.companion-edit__input-group__input {
		width: 100%;
	}
	.companion-edit__meals {
		display: flex;
		flex-shrink: 0;
	}
	.companion-edit:first-child {
		padding-top: 7rem;
	}
	.companion-edit:first-child .companion-edit__input-group__label {
		position: absolute;
		top: inherit;
		left: inherit;
		white-space: nowrap;
		transform: translate(0, -1.7rem);
	}
	.companion-edit:first-child .companion-edit__input-group__label--checkbox {
		transform-origin: center left;
		transform: rotate(-45deg) translate(1.3rem, -0.9rem);
	}
	.companion-edit--canceled .companion-edit__meals input, 
	.companion-edit--canceled .companion-edit__input-group--option select {
		visibility: hidden;
		pointer-events: none;
	}
}

@media screen and (min-width: 50rem) {
	body {
		background: hsl(0, 0%, 40%);
	}
	.app-view__main {
		background: white;
		padding: 2rem 2rem 4rem;
		margin: 0 auto;
		max-width: 80rem;
	}
	.app-view__footer {
		margin: -2rem auto 0;
		max-width: 80rem;
		padding: 0 2rem;
	}
	.app-view--overlay-visible .app-view__main {
		filter: blur(1px);
	}
	.app-view__overlay {
		background: hsla(0, 0%, 0%, .5);
	}
	.app-view__overlay__window {
		background: white;
		padding: 2rem;
		max-width: 70rem;
		margin: 0 auto;
	}

	.attendee-collection__header {
		padding: .5rem 0;
	}
}



@media screen and (min-width: 60rem) {
	.attendee-collection-results {
		display: flex;
		justify-content: space-between;
	}
	.attendee-collection-results__votes {
		width: 66%;
		margin-right: .5rem;
	}
	.attendee-collection-results__meals {
		width: 33%;
		margin-left: .5rem;
	}
	.attendee-collection-results table {
		width: 100%;
	}
}
@media screen and (min-width: 60rem) and (min-height: 45rem) {
	.attendee-collection__body {
		display: flex;
		flex-direction: column;
	}
	.attendee-collection__results {
		order: -1;
	}
}