* {
	box-sizing: border-box;
	font-family: sans-serif;
}

html {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

body {
	width: 100%;
	min-height: 100%;
	background-color: #282828;
	color: #dbdada;
	padding: 0;
	margin: 0;
	/* border-bottom: 8px solid #087f5b; */
}

header {
	width: 100%;
	height: 50px;
	background-color: #555;
}

a {
	color: #55F;
}

input, textarea {
	display: block;
	margin-bottom: 10px;
	height: 30px;
	width: 300px;
	margin-left: calc(50% - 150px);
	margin-right: calc(50% - 150px);
	padding: 5px;
}

form {
	width: 100%;
}

img, video {
	max-height: 500px;
	max-width: 1000px;
}

/* grid for warehouse */
.gridrow {
	width: 100%;
	height: auto;
	display: block;
	border-top: black 1px solid;
	border-bottom: black 1px solid;
}

.gridcol {
	width: 16.6%;
	height: 80px;
	display: inline;
	border-left: black 1px solid;
	border-right: black 1px solid;
}

/* header buttons */
.header {
	color: #dbdada;
	float: left;
	display: inline-block;
	width: max-content;
	height: 100%;
	text-align: center;
	padding: 10px;
	padding-top: 14px;
	padding-bottom: 15px;
	font-size: 20px;
	background-color: inherit;
	transition: 0.2s;
	text-decoration: none;
}

.header:hover {
	background-color: #333;
}

.headerImg {
	width: min-content;
	padding: 0px;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-right: 10px;
}

.right {
	float: right;
}

.maxContent {
	width: max-content;
}

.selected, .selected:hover {
	background-color: #222;
}
/* end header buttons*/

/* indent of body */
.indent {
	padding: 20px;
	margin: 0;
}

/* submit div */
.submit {
	width: 300px;
	height: 30px;
	font-size: 15px;
	background-color: #087f5b;
	border-radius: 5px;
	padding: 10px;
	padding-top: 6px;
	padding-bottom: 9px;
	text-align: center;
	cursor: pointer;
	margin-left: calc(50% - 150px);
	/* margin-left: calc(50%); */
	margin-right: calc(50% - 150px);
	margin-bottom: 5px;
	border: 1px solid black;
	transition: 0.2s;
	color: rgb(235, 235, 235);
}

.submit:hover {
	background-color: #024b35;
}

/* centering of text */
.center {
	width: 100%;
	text-align: center;
}

/* centering of text with padding */
.padded-center {
	width: 100%;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 5px;
}

/* regular div buttons */
.button {
	width: max-content;
	min-width: 100px;
	height: 30px;
	font-size: 15px;
	background-color: #087f5b;
	border-radius: 5px;
	padding: 10px;
	padding-top: 6px;
	padding-bottom: 9px;
	text-align: center;
	cursor: pointer;
	border: 1px solid black;
	transition: 0.2s;
	color: #AAA;
}

.button:hover {
	background-color: #024b35;
}

/* the description textarea when adding a download */
.desc {
	min-height: 150px;
	resize: vertical;
}

/* download description */
.download {
	margin: 0;
	margin-left: 30px;
}

/* list of clickable divs */
.list {
	width: 100%;
	height: 40px;
	padding: 10px;
	padding-top: 10px;
	padding-bottom: 15px;
	font-size: 15px;
	cursor: pointer;
	transition: 0.2s;
	color: #AAA;
	border-bottom: 1px solid #333;
	background-color: inherit;
	display: block;
}

.list:hover {
	background-color: #333;
}

/* add/adapt download form inputs */
.wideInput {
	width: 600px;
	margin-left: calc(50% - 300px);
	margin-right: calc(50% - 300px);
}

/* simply the standard color */
.noColor {
	color: #AAA;
}

/* well... just red */
.red {
	background-color: red;
	color: #FFF;
}

.red:hover {
	background-color: #A00;
}

/* inline */
.inline {
	display: inline;
}


/* For warehouse table but alters also all ohter tables */
table {
	width: 100%;
	height: auto;
	font-size: 18px;
	display: block;
	table-layout: fixed;
}

th,
td {
	border: 1px solid black;
	padding: 16px 24px;
	text-align: left;
}

thead tr {
background-color: #087f5b;
color: #ffffffdc;
}

.tracking {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 3.2rem;
	row-gap: 2.4rem;
	justify-content: center;
	text-align: center;
  }
  
  .tracking p {
	display: block;
	font-size: 1.6rem;
	font-weight: 500;
	margin-bottom: 1.2rem;
  }
  
  .tracking input,
  .tracking select {
	width: 100%;
	padding: 1.2rem;
	font-size: 1.8rem;
	font-family: inherit;
	color: #222;
	border: none;
	background-color: #fdf2e9;
	border-radius: 9px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  
  .tracking input::placeholder {
	color: #aaa;
  }
  
  .cta *:focus {	
	outline: none;
	box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5);
  }

  .tracking .submit-centered-container {
	width: 100%;
	margin: auto;
	justify-content: center;
	text-align: center;
	position: relative;
  }

  .tracking .submit {
	width: 300px;
	height: 30px;
	font-size: 15px;
	background-color: #087f5b;
	border-radius: 5px;
	padding: 10px;
	padding-top: 6px;
	padding-bottom: 9px;
	text-align: center;
	cursor: pointer;
	/* margin-left: calc(50%); */
	/* margin-right: calc(50%); */
	margin: 0 auto;
	margin-bottom: 5px;
	border: 1px solid black;
	transition: 0.2s;
	color: rgb(235, 235, 235);
}


.tracking .inputStyle {
	width: auto;
	margin-left: auto;
	margin-right: auto;
}

.tracking .form-container {
	width: 100%;
	text-align: center;
	position: absolute;
}

.login {
	padding: 70px 0;
	display: grid;
	/* grid-template-columns: 1fr 1fr; */
	column-gap: 3.2rem;
	row-gap: 1rem;
}

.account-icon {
	stroke: #087f5b;
	width: 48px;
	height: 48px;
	margin-bottom: 24px;
	
}

.account-info {
	padding-top: 70px;
	text-align: center;
	justify-content: center;
}

.account-details {
	padding-top: 1rem;
	padding-bottom: 1rem;
	display: grid;
	column-gap: 3.2rem;
	row-gap: 2rem;
}