body {
	background-color: rgb(32,32,32);
	color: white;
	margin: 0;
	overflow-x: hidden;
}
body.Login {
	/* margin-top: -10vh; */
	/* height: 100vh; */
	background-image: url('wave.svg');
	background-repeat: no-repeat;
	background-position: bottom;
}

a {
	text-decoration: none;
	color: white;
	border: 1px solid silver;
	margin: 1em;
	padding: 1em;
	/* margin-left: 15vw; */
	border-radius: 50px;
}
.autocomplete {
  /*the container must be positioned relative:*/
	width: 100%;
  position: relative;
  display: inline-block;
}

input[type="submit"] {
	align-items: center;
	/* background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB); */
	background: rgb(32,87,15);
	background: linear-gradient(144deg, rgba(35,96,16,1) 12%, rgba(103,191,0,1) 100%);
	border: 0;
	border-radius: 8px;
	/* box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px; */
	box-shadow: rgba(103,191,0, 0.2) 0 15px 30px -5px;
	box-sizing: border-box;
	color: #FFFFFF;
	display: flex;
	font-family: Phantomsans, sans-serif;
	font-size: 18px;
	justify-content: center;
	line-height: 1em;
	max-width: 100%;
	min-width: 140px;
	/* padding: .5em; */
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
	cursor: pointer;
	transition: all .3s;
	padding: .5em 2em;
	margin-bottom: 1em;
}


/* Mobile */
@media screen and (max-width: 640px) {
	body {
		font-size: 1.5rem;
		overflow-x: hidden;
	}
	h1 {
		font-size: 20vw;
		width: 90%;
		padding-top: .5em;
		margin-left: auto;
		margin-right: auto;
	}
	/* h3 {
		padding-top: 1em;
		/* border-top: 2px silver solid;
	}*/
	.signin select, , .signin input[type="number"] {
		/* height: 25vh; */
		margin-right: 2em;
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		font-size: 2rem;
	}
	.signin input {
		margin-top: 2em;
		font-size: 1.5rem;
	}
	.User {
		width: 90vw;
		padding-bottom: .5em;
		margin: auto;
	}
	table thead {
		display: none;
	}
	table td {
		/* display: flex; */
		padding-right: 2em;
	}
	table {
		padding-bottom: 2em;
	}
	input[name='OdometerStart'] {
		margin: 1em 0em;
		width: 40vw;
	}
	.InProgress {
		display: flex;
		width: 95vw;
		flex-direction: column;
	}
	.InProgress form input[type="number"] {
		width: 48vw;
		margin-bottom: 1em;
	}
	#AdminReport {
		font-size: 2em;
	}
	.container{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		border-bottom: 1px solid silver;
}

	.welcomeHeader {
		background-color: #131313;
		border-radius: 0px 0px 50px 50px;
		/* margin-top:1em; */
		height: auto;
		width: 100vw;
		/* padding-bottom: 3vh; */
		/* background: rgba( 255, 255, 255, 0.4 ); */
		box-shadow: 0 8px 32px 0 rgba( 55, 55, 55, 0.37 );
		/*Green Glow box-shadow: rgba(103,191,0, 0.2) 0 15px 30px -5px; */

	}
	.welcomeHeader h1 {
		width: 96vw;
		font-size: 3rem;
		margin-bottom: 0;
		padding-left: 4vw;
	}
	.welcome {
		font-size: 1.5rem;
		display: flex;
		flex-wrap:wrap;
		width: 75vw;
		/* margin: auto; */
		margin-left: auto;
		margin-right: 0;
		justify-content: center;
	}
	a {
		font-size: .8rem;
	}
	.menu a {
		text-decoration: none;
		color: white;
		border: 1px solid silver;
		margin: 1em;
		padding: 1em;
		border-radius: 50px;
	}
	.menu {
		display: flex;
		width: 100vw;
		margin: auto;
		justify-content: center;
	}
	.NewClientSplash {
		width: 100vw;
    height: 100%;
    background-color: rgba(255,255,255,.4);
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
		font-size: 14vw;
		color: black;
		padding-top: 2em;
	}
	.NewClientSplash form {
		width: 80vw;
		margin: auto;
	}
	input.splash.ui-autocomplete-input {
    font-size: 12vw;
		margin: 1.5em 0em;
		width: 100%;
	}
	.LoginHome {
		font-size: 4rem;
		align-items: center;
		justify-content: center;
		width: 75vw;
		height: 66vh;
		margin: 0 auto;
		margin-top: 13vh;
		display: flex;
		flex-direction: column;
		background: rgba( 255, 255, 255, 0.4 );
		box-shadow: 0 8px 32px 0 rgba( 55, 55, 55, 0.37 );
		backdrop-filter: blur( 5px );
		-webkit-backdrop-filter: blur( 5px );
		border-radius: 10px
		/* background-color: rgba(240,240,240,.9);
		box-shadow:
	2.9px 3.9px 3.5px rgba(0, 0, 0, 0.071),
	7.2px 9.8px 8.5px rgba(0, 0, 0, 0.102),
	14.7px 20px 16.7px rgba(0, 0, 0, 0.128),
	30.3px 41.2px 32.4px rgba(0, 0, 0, 0.159),
	83px 113px 80px rgba(0, 0, 0, 0.23)
; */
	}
	.LoginHome select, .LoginHome input {
		font-size: 1.5rem;
	}
	.LoginHome h3 {
		font-size: 2rem;
		margin: 0 2vw;
	}
	.LoginHome select {
		width: 95%;
		/* padding-left: 25vw; */
		margin-bottom: 2em;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.container form input[type="date"] {
		margin-bottom: 1em;
	}
	.reportcontainer {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.edits {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Desktop */
@media screen and (min-width: 601px) {
	.User {
		width: 50vw;
		padding-bottom: 2em;
		padding-left: 1em;
		margin: 1em 0em;
		border: 1px solid silver;
	}
	table {
		width: 50vw;
		margin-left: atuo;
		text-align: center;
		padding: 1em 0em 2em;
	}
	th, td {
		padding-top: 1em;
	}
	.edits {
		display: flex;
		flex-direction: row;
		float: right;
		position: absolute;
		top: 3em;
		right: 3em;
		padding: 1em;
		border: 2px solid silver;
		/* height: 50vh; */
		width: 20vw;
	}
	.EditReport {
		padding-top: 2em;
	}
	.EditReport input[type='number'] {
		width:10vw;
	}
	.container {
		margin-top: 2em;
		padding: 1em;
		/* border: 1px solid silver; */
		width: 50vw;
		padding-left: 2em;
		background: rgba( 255, 255, 255, 0.4 );
		box-shadow: 0 8px 32px 0 rgba( 55, 55, 55, 0.37 );
		backdrop-filter: blur( 5px );
		-webkit-backdrop-filter: blur( 5px );
		border-radius: 10px
	}
	h4 {
		padding-top: 2em;
	}
	.welcome {
		/* display: flex;
		flex-wrap:wrap;
		width: 66vw; */
		/* margin: auto; */
		/* justify-content: center; */
	}
	.welcome h2 {
		margin: 1em 0em;
	}
	.menu {
		position: relative;
		margin: 1em 0em;
	}
	div.UserTable {
		padding-top: 2em;
		width: 90vw;
		display:table;
	}
	form.tr, div.tr {
		display: table-row;
	}
	span.td {
		display:table-cell;
		padding-bottom: 2em;
		padding-right: 3em;
	}
	span.td input {
		width: 15vw;
	}
	.NewDrive input {
		margin-top:1em;
		/* padding-top: 1em; */
	}
	form {
		margin: 0em;
	}
	.LoginHome {
		font-size: 3.5vw;
		align-items: center;
		justify-content: center;
		width: 75vw;
		height: 66vh;
		margin: 0 auto;
		margin-top: 13vh;
		display: flex;
		flex-direction: column;
		background: rgba( 255, 255, 255, 0.4 );
		box-shadow: 0 8px 32px 0 rgba( 55, 55, 55, 0.37 );
		backdrop-filter: blur( 5px );
		-webkit-backdrop-filter: blur( 5px );
		border-radius: 10px
		/* background-color: rgba(240,240,240,.9);
		box-shadow:
  2.9px 3.9px 3.5px rgba(0, 0, 0, 0.071),
  7.2px 9.8px 8.5px rgba(0, 0, 0, 0.102),
  14.7px 20px 16.7px rgba(0, 0, 0, 0.128),
  30.3px 41.2px 32.4px rgba(0, 0, 0, 0.159),
  83px 113px 80px rgba(0, 0, 0, 0.23)
; */
	}
	.LoginHome h1 {
		margin: .5em auto;
	}
	.signin select , .signin input[type="number"] {
		width: 95%;
		margin-left: auto;
		margin-right: auto;
	}
	.LoginHome select, .LoginHome input {
		font-size: 2vw;
	}
	.LoginHome select {
		/* width: 100%; */
		/* padding-left: 25vw; */
		margin-bottom: 2em;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	body .Login {
		/* background-image: url('wave.svg'); */
	}
	body#index {
		width: 80vw;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.NewClientSplash {
		width: 100vw;
		height: 100%;
		background-color: rgba(255,255,255,.4);
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 4vw;
		color: black;
		padding-top: 2em;
	}
	.NewClientSplash form {
		width: 80vw;
		margin: auto;
	}
	input.splash.ui-autocomplete-input {
		font-size: 4vw;
		margin: 1.5em 0em;
		width: 100%;
	}
	body.report {
		margin-left: 10vw;
	}
	.welcomeHeader {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 75vw;
		margin-left: 0;
		margin-right: auto;
	}
	.LoginHome h3 {
		/* font-size: 2rem; */
		margin: 0 2vw;
	}
	input[type='submit'] {
		margin-top:1em;
	}
	.leftedit {
		width: 60%;
	}
	.rightedit {
		margin: auto;
		/* width:90%; */
		font-size: 1em;
		justify-content: center;
	}
	.rightedit a {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.UserEditTable {
		display: inline-grid;
		grid-template-columns: repeat(auto-fill, 10vw);
		grid-template-rows: repeat(auto-fill, 100%);
		/* flex-direction: row; */
		width: 90%;
		/* justify-items: space-evenly; */
	}
	.UserEditTable {
		align-items: center;
	}
}