/* general */
body
{
	color: black;
	font-family: Arial, Helvetica, sans-serif;
}

form
{
	margin-bottom: 0px;
}

button, input[type=submit]
{
	border: none;
	border-radius: 0.5em;
	cursor: pointer;
	display: block;
	background-color: #8eceff;
	margin: 0.25em;
}

button.critical, input[type=submit].critical
{
	background-color: #DABABA;
}

.pannel
{
	margin-top: 2em;
}

.info_row
{
	padding-left: 1em;
}

.result_message div
{
	padding: 2em;
	padding: 0.5em;
	border-radius: 0.5em;
}

.result_message .failure
{
	background-color: #DABABA;
}

.result_message .success
{
	background-color: #BADABA;
}

.top_bar
{
	padding-bottom: 3em;
}

.top_bar .button.selected button
{
	background-color: #badaba;
}

.login_dialog
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 1cm;
	padding: 1em;
	background-color: #eeeeee;
}

.login_dialog .label
{
}

.login_dialog .text_box 
{
	padding-bottom: 1em;
}

.login_dialog .text_box input[type=text], .login_dialog .text_box input[type=password]
{
	width: 100%;
	padding: 0.5em;
}

.login_dialog button
{
	width: 100%;
}

.login_dialog .input_button
{
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 80%;
}

.table .month_row
{
	margin-top: 0.5em;
	padding: 0.25em;
	background-color: #eeeeee;
}

.table .admin.is_admin:after
{
	content: "<admin>";
	color: #2aae2a;
}

/* desktop */
.desktop, .desktop table, .desktop input, .desktop button
{
	font-size: 12pt;
}

.desktop button, .desktop input[type=submit]
{
	padding: 0.25em 1em;
}

.desktop .login_dialog
{
	width: 10cm;
}

.desktop .top_bar
{
	display: flex;
	flex-direction: row;
}

.desktop .form
{
	padding: 1em;
	width: 15cm;
}

.desktop .form .title
{
	font-size: 150%;
	text-align: center;
	padding: 1em;
}

.desktop .form .labels
{
	display: flex;
	flex-direction: column;
	float: left;
}

.desktop .form .labels div
{
	height: 3em;
}

.desktop .form .inputs
{
	display: flex;
	flex-direction: column;
	float: right;
}

.desktop .form .inputs div
{
	height: 3em;
}

.desktop .form .inputs div input
{
	width: 100%;
}

.desktop .form .submit
{
	clear: both;
}

.desktop .form .submit input[type=submit]
{
	width: 100%;
}

.desktop .new_worktime_form
{
	padding: 1em;
	height: 4em;
}

.desktop .new_worktime_form .labels
{
	display: flex;
	flex-direction: row;
	float: left;
	clear: both;
	width: 80%;
}

.desktop .new_worktime_form .labels div
{
	height: 2em;
}

.desktop .new_worktime_form .inputs
{
	display: flex;
	flex-direction: row;
	float: left;
	width: 80%;
}

.desktop .new_worktime_form .inputs div input
{
	width: 100%;
	height: 2em;
}

.desktop .new_worktime_form .submit
{
	float: right;
	width: 20%;
	display: flex;
	justify-content: center;
}

.desktop .new_worktime_form .submit input[type=submit]
{
	width: 80%;
	height: 2em;
}

.desktop .table .row
{
	display: flex;
	flex-direction: row;
	padding: 0.25em 1em;
}

.desktop .table .row .data
{
	display: flex;
	flex-wrap: wrap;
	border-bottom: solid 1px #eeeeee;
}

.desktop .jobsites_overview .labels,
.desktop .user_table .labels,
.desktop .new_worktime_form .labels,
.desktop .new_worktime_form .inputs,
.desktop .table .row .data 
{
	width: 90%;
}

.desktop .table .submit,
.desktop .table .buttons
{
	width: 10%;
}

.desktop .new_worktime_form .date,
.desktop .table             .date
{
	width: 10%;
}

.desktop .new_worktime_form .jobsite,
.desktop .table             .jobsite
{
	width: 30%;
}

.desktop .new_worktime_form .hours,
.desktop .table             .hours
{
	width: 10%;
}

.desktop .new_worktime_form .comment,
.desktop .table             .comment
{
	width: 50%;
}

.desktop .all_worktime.table .user_name { width: 20%; }
.desktop .all_worktime.table .date      { width: 10%; }
.desktop .all_worktime.table .jobsite   { width: 20%; }
.desktop .all_worktime.table .hours     { width: 5%; }
.desktop .all_worktime.table .comment   { width: 45%; }

.desktop .user_table .labels
{
	display: flex;
	flex-direction: row;
}
.desktop .user_table.table .user_id   { width: 10%; }
.desktop .user_table.table .user_name { width: 70%; }
.desktop .user_table.table .admin     { width: 20%; }

.desktop .jobsites_overview .labels
{
	display: flex;
	flex-direction: row;
}
.desktop .jobsites_overview.table .jobsite_id   { width: 10%; }
.desktop .jobsites_overview.table .jobsite_name { width: 90%; }

/* mobile */
@media screen and (min-width: 320px)
{
	.mobile, .mobile table, .mobile input, .mobile button
	{
		font-size: 10pt;
	}
}
@media screen and (min-width: 481px)
{
	.mobile, .mobile table, .mobile input, .mobile button
	{
		font-size: 15pt;
	}
}
@media screen and (min-width: 641px)
{
	.mobile, .mobile table, .mobile input, .mobile button
	{
		font-size: 20pt;
	}
}
@media screen and (min-width: 961px)
{
	.mobile, .mobile table, .mobile input, .mobile button
	{
		font-size: 30pt;
	}
}
@media screen and (min-width: 1025px)
{
	.mobile, .mobile table, .mobile input, .mobile button
	{
		font-size: 32pt;
	}
}
@media screen and (min-width: 1281px)
{
	.mobile, .mobile table, .mobile input, .mobile button
	{
		font-size: 40pt;
	}
}

.mobile .login_dialog
{
	width: 80%;
}

.mobile button, .mobile input[type=submit]
{
	padding-top: 1em;
	padding-bottom: 1em;
}

.mobile input[type=text], .mobile input[type=password], .mobile input[type=date]
{
	height: 2em;
}

.mobile .top_bar button, .mobile .top_bar input[type=submit]
{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

.mobile .table,
.mobile .form
{
	padding: 1em;
}

.mobile .table .title,
.mobile .form .title
{
	font-size: 150%;
	text-align: center;
	padding: 1em;
}

.mobile .table .labels,
.mobile .form .labels
{
	display: flex;
	flex-direction: column;
	float: left;
}

.mobile .table .inputs > div,
.mobile .table .labels > div,
.mobile .form .inputs > div,
.mobile .form .labels > div
{
	height: 25mm;
	display: flex;
	align-items: center;
}

.mobile .table .inputs,
.mobile .form .inputs
{
	display: flex;
	flex-direction: column;
	float: right;
}

.mobile .table .inputs > div > input,
.mobile .form .inputs > div > input
{
	width: 100%;
}

.mobile .table .submit,
.mobile .form .submit
{
	clear: both;
}

.mobile .table .submit input[type=submit],
.mobile .form .submit input[type=submit]
{
	width: 100%;
}

.mobile .table .row
{
	display: flex;
	padding-bottom: 0.25em;
	padding-top: 0.25em;
}

.mobile .table .row .data
{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	border-bottom: solid 1px black;
}

.mobile .table .row .data div
{
	font-size: 80%;
	padding: 0.5em 0.25em;
}

.mobile .table .row .data .date,
.mobile .table .row .data .hours
{
	flex-grow: 0;
}

.mobile .table .row .data .jobsite
{
	flex-grow: 1;
}

.mobile .table .row .data .comment
{
	flex-shrink: 0;
	width: 100%;
	padding-left: 2em;
	padding-right: 2em;
}

.mobile .table .row .data .buttons
{
}

.mobile .data .hours::after
{
	content: " h";
}

.mobile .modify_user_form .labels div
{
	font-size: 80%;
}

.mobile .user_table .user_id   { flex-grow: 0; }
.mobile .user_table .user_name { flex-grow: 1; }
.mobile .user_table .admin     { flex-grow: 0; }

.mobile .user_table.table .user_id:before
{
	content: "Id: ";
}

.mobile .jobsites_overview .jobsite_id   { flex-grow: 0; }
.mobile .jobsites_overview .jobsite_name { flex-grow: 1; }

.mobile .jobsites_overview.table .jobsite_id:before
{
	content: "Id: ";
}

/* custom check box */
.checkbox
{
	display: block;
	position: relative;
	padding-left: 1.5em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.checkbox input
{
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.checkbox .checkmark
{
	position: absolute;
	top: 0;
	left: 0;
	height: 1em;
	width: 1em;
	background-color: #cccccc;
}

.checkbox:hover input ~ .checkmark
{
	background-color: #eeeeee;
}

.checkbox input:checked ~ .checkmark
{
	background-color: #cccccc;
}

.checkbox .checkmark:after
{
	content: "";
	position: absolute;
	display: none;
}

.checkbox input:checked ~ .checkmark:after
{
	display: block;
}

.checkbox .checkmark:after
{
	left: 0.25em;
	top: 0.05em;
	width: 0.3em;
	height: 0.6em;
	border: solid black;
	border-width: 0 0.2em 0.2em 0;
	-web-kit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*
@media screen and (min-width: 320px)
{
	.body.mobile:before { content:  "mobile-320"; }
	.body.desktop:before{ content: "desktop-320"; }
}
@media screen and (min-width: 481px)
{
	.body.mobile:before { content:  "mobile-480"; }
	.body.desktop:before{ content: "desktop-480"; }
}
@media screen and (min-width: 641px)
{
	.body.mobile:before { content:  "mobile-640"; }
	.body.desktop:before{ content: "desktop-640"; }
}
@media screen and (min-width: 961px)
{
	.body.mobile:before { content:  "mobile-960"; }
	.body.desktop:before{ content: "desktop-960"; }
}
@media screen and (min-width: 1025px)
{
	.body.mobile:before { content:  "mobile-1024"; }
	.body.desktop:before{ content: "desktop-1024"; }
}
@media screen and (min-width: 1281px)
{
	.body.mobile:before { content:  "mobile-1280"; }
	.body.desktop:before{ content: "desktop-1280"; }
}
*/