/* start of desktop styles */
.desktop {
	display: inline;
}

.mobile {
	display: none;
}

.roomy {
	display: inline;
}

.cramped {
	display: none;
}

td, th {
	padding: 2px 4px;
}

#reportEditDates input {
	width:100px;
}

#app, #report, #projects {
	padding: 10px;
}

#grid {
	min-width: 560px;
}

#rptProjectNotes {
	font-size:70%;
	padding-bottom:5px;
}
#reportResults {
	padding-top:20px;
}
.resultsTable {
	border-collapse:collapse;
	border:1px solid black;
}
.resultsTable th {
	text-align: left;
}
.resultsTable th, .resultsTable td {
	border:1px solid black;
}

#predefinedTasks, #recentTasks {
	width: 450px;
}

	#predefinedTasks > option, #recentTasks > option {
		width: 450px;
	}

.pull-left {
	float: left;
}
#gridKeyList {margin-top:10px;}
#gridKeyList td {padding:3px;}

@media screen and (max-width: 991px) {
	/* start of large tablet styles */
}

@media screen and (max-width: 767px) {
	/* start of medium tablet styles */
}

@media screen and (max-width: 639px) {
	/* start of small tablet styles */
	.desktop {
		display: none;
	}

	.mobile {
		display: inline;
	}

	code, small {
		display: none;
	}

	#app div {
		width: 100%;
	}

	#app table {
		margin: 0;
		margin-left: auto;
		margin-right: auto;
	}

	td, th {
		padding: 1px 2px;
	}

	#app {
		padding: 5px;
	}

	#grid {
		min-width: 350px;
		width: 98.5%;
	}

	#predefinedTasks, #recentTasks {
		width: 400px;
	}

		#predefinedTasks > option, #recentTasks > option {
			width: 400px;
		}

	.pull-left {
		float: none;
	}
}

@media screen and (max-width: 479px) {
	/* start of large phone styles */
	.roomy {
		display: none;
	}

	.cramped {
		display: inline;
	}
}

@media screen and (max-width: 410px) {
	/* start of medium phone styles */
	#predefinedTasks, #recentTasks {
		width: 350px;
	}

	#predefinedTasks > option, #recentTasks > option {
		width: 350px;
	}
}

@media screen and (max-width: 374px) {
	/* start of small phone styles */
}

body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: whitesmoke;
	margin: 0;
	padding: 0;
}

button, input, select, textarea {
	font: normal 13px Arial;
}

	button.action {
		white-space: nowrap;
		width: 90px;
	}

	button.icon {
		width: 24px;
		font-size: 16px;
		font-weight: bold;
		padding: 0 3px;
		position: relative;
		top: 1px;
	}

code, small {
	vertical-align: text-top;
}

div {
	position: relative;
}

p {
	margin: 0 1px 2px;
	white-space: nowrap;
}

table.hidden {
	background-color: whitesmoke;
	border: 1px solid silver;
	font-size: 13px;
	left: -95px;
	margin: 0;
	padding: 5px;
	position: absolute;
	top: 23px;
	z-index: 99;
}

	table.hidden td {
		white-space: nowrap;
	}

td > table.hidden {
	left: 0;
	top: 8px;
	position: relative;
}

input[type=text], input[type=password] {
	min-height: 17px;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

table#grid td:not(:last-child),
table#grid th:not(:last-child) {
	border-right: 1px solid silver;
}

table#grid td.auto {
	border-right: none;
	padding-right: 0;
	text-align: right;
}

th.auto, td.auto {
	width: 1px;
}

	td.auto > span {
		background-color: gray;
		color: white;
		font-size: 12px;
		vertical-align: super;
	}

	td.auto > span.calced {
		background-color: limegreen;
	}

#container {
	width: 100%;
}

#login {
	padding: 5px;
}

#info {
	margin-top: 5px;
}

#notify {
    color: darkorange;
}

#error {
    color: red;
}

#config {
	margin-top: 15px;
	margin-bottom: 15px;
}

#grid {
	margin-bottom: 10px;
	border: 1px solid darkgray;
}

	#grid > thead > tr {
		border-bottom: 1px solid darkgray;
	}

		#grid > thead > tr > th {
			white-space: nowrap;
		}

#gridBody > tr > td:first-child {
	white-space: nowrap;
}

#gridBody > tr.even {
	background-color: #eaeaea;
}

#gridBody > tr.odd {
	background-color: white;
}

/* keep this under even/odd so it overrides */
#gridBody > tr.activeLine {
	background-color: silver;
}

#gridBody.enabled > tr.activeLine {
	color: white;
	background-color: dodgerblue;
}

#gridBody.enabled > tr:hover {
	background-color: skyblue;
}

#gridBody.enabled > tr.activeLine:hover {
	color: white;
	background-color: dodgerblue;
}

#details {
	margin-top: 10px;
}

	#details td {
		white-space: nowrap;
	}

#recentTasks {
	left: -124px;
}

#project {
	margin-left: 10px;
}

#Task {
	width: 100%;
}

.hidden {
	display: none;
}

.nowrap {
	white-space: nowrap;
}

.relative {
	position: relative;
}

.pt10 {
	padding-top: 10px;
}

.sub {
	vertical-align: sub;
}

.text-right {
	padding-left: 0;
	text-align: right;
}

.w70 {
	width: 70px;
}

.w100 {
	width: 100px;
}