*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
	/*background-color: #f0f0f0;*/
	background-image: url('wickedbackground.svg');
	-webkit-background-size: cover;
	width: fit-content;
	font-family: sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
	margin: auto;	
}

div {
	padding: 5px;
}

#scraplogo {
		width: 125px;
		height: 77.5px;
}
	
#container {	
	display: flex;
	justify-items: center;
	align-items: center;
	flex-flow: column;	
	/* width: 98vw; */
}

#header {
	/*min-width: 300px;*/
	min-width: 500px;
	border-radius: 15px;
	border: 2px solid red;
	margin-bottom: 5px;
	background-color: white;
	box-shadow: 0 8px 12px rgb(120 120 150 / 80%);
	min-height: fit-content;
	display: grid;
	justify-items: center;
	align-items: center;
	padding: 5px;
}

.title {
	line-height: 0;
	font-weight: bold;
}

#main {
	background-color: white;
	padding: 0px 10px 10px 10px;
	border: 3px solid red;
	border-radius: 10px;
	min-width: 500px;
	min-height: fit-content;
	display: grid;
	justify-items: center;
	align-items: center;
	text-align: center;
	box-shadow: 0 8px 12px rgba(120, 120, 150, .8);
}

/* the announcement/warning box above the menu */
div.mainannouncement {
	border: 2px dashed red; 
	padding: 10px; 
	width: 450px;
}

/* the main menu on the first page */
div.menu {
	width: 100%;
	margin-top: 10px;
	display: grid;
	/* this automatically scales the menu items with the page in a grid */
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	grid-template-rows: repeat(auto-fit, minmax(110px, 1fr));
	overflow: hidden;
	justify-self: center;
	align-self: center;
	text-align: center;
}

div.menuitem {
	background-color: lightgoldenrodyellow;
	width: 150px;
	height: 120px;
	padding-top: 15px;
	align-self: center;
	justify-self: center;
	text-align: center;
	font-weight: bold;
	border: 2px solid black; 
	border-radius: 15px;
	margin: 5px;
}

div.menuitem img {
	display: block;
	margin: auto;
	margin-bottom: 10px;
}

div.menuitem:hover {
	background-color: #61D6FF;	
	cursor: pointer;
}

div.menuitem:active {
	box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.8);
}

#dates {
	font-size: .75em;
	margin: 0;
}

#ticketinfo {
	text-align: left; 
	border: 2px solid black; 
	padding: 5px;
	display: none;
}

#top {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid black;
	margin-bottom: 15px;
}

#home {
	justify-self: start;
}

#logout {
	justify-self: end;
}

.logoutlink {
	color: red;
}

input[type=text], [type=email], [type=password], [type=submit] {
	padding: 5px;
	font-weight: bold;
	margin-left: 5px;
}

input[type=text]:focus {
	background-color: pink;
	outline-style: none;
	box-shadow: none;
	border-color: red;
}

input[type=email]:focus {
	background-color: pink;
	outline-style: none;
	box-shadow: none;
	border-color: red;
}

input[type=password]:focus {
	background-color: pink;
	outline-style: none;
	box-shadow: none;
	border-color: red;
}

table.data {
	border-spacing: 0px;
	border-collapse: collapse;
}

td {
	text-align: left;
}

th.data {
	padding: 5px;
	background-color: #FFF;
	border: 1px solid black;
}

td.data {
	padding: 5px;
	border: 1px solid black;
}

tr.data:nth-child(even) { 
	background: #F2F2F2;
}
tr.data:nth-child(odd) { 
	background: #FFF; 
}

tr.data:hover {
	background-color: lightblue;
}
.swal2-popup .swal2-content {
	overflow-x: auto;
}

a:link {
	color: blue;
}

a:visited {
	color: blue;
}

a:hover {
	color: red;
}

a:active {
	color: red;
	background-color: pink;
}

a.emoji:link {
	text-decoration: none;
}

@media print {
	thead {
		display: table-header-group;
	}	
	tr {
		page-break-inside: avoid;
	}	
}

@media only screen and (min-device-width : 320px) and (max-device-width : 800px) {
	#header {
		min-width: 98vw;
	}
	
	#main {
		min-width: 98vw;
	}
	
	div.mainannouncement {
		width: 75vw;
	}
	
	div.menu {
		grid-template-columns: auto;
		grid-template-rows: auto;
		grid-template-areas:
		"lookup"
		"rompics"
		"scaleprices"
		"searchpricing"
		"cfc"
		"cars"
		"mytasks"
		"dashboard"
		"dispatchrequests"
		"maintrequests"
		"quotes"
		"advances"
		"shipmentcalendar"
		"paymentauth"
		"paymentauthapproval"
		"rompum"
		"reports"
		"selfservice"
		"dispatchreport"
		"todaystrips"
		"pum"
		"finalpum"
		"final1anddonepum"
		"garageinvmanage"
		"driver"
		"mymaintrequests"
		"materialreport"
		"mraccept"
		"mrreport"
		"mrauth"
		"dailypricing"
		"addprospect"
		"cashedpayments"
		"assignpayment"
		"acceptreturnpayment"
		"acceptpayment"
		"issuepayment"
		"holidaymanager"
		"usermanager";
	}
	
	.menuitemlookup { grid-area: lookup; }
	.menuitemrompics { grid-area: rompics; }
	.menuitemscaleprices { grid-area: scaleprices; }
	.menuitemsearchpricing { grid-area: searchpricing; }
	.menuitemcfc { grid-area: cfc; }	
	.menuitemcars { grid-area: cars; }
	.menuitemmytasks { grid-area: mytasks; }
	.menuitemdashboard { grid-area: dashboard; }
	.menuitemdispatchrequests { grid-area: dispatchrequests; }
	.menuitemmaintrequests { grid-area: maintrequests; }
	.menuitemquotes { grid-area: quotes; }
	.menuitemadvances { grid-area: advances; }
	.menuitemshipmentcalendar { grid-area: shipmentcalendar; }
	.menuitempaymentauth { grid-area: paymentauth; }
	.menuitempaymentauthapproval { grid-area: paymentauthapproval; }
	.menuitemrompum { grid-area: rompum; }
	.menuitemreports { grid-area: reports; }
	.menuitemselfservice { grid-area: selfservice; }
	.menuitemdispatchreport { grid-area: dispatchreport; }
	.menuitemtodaystrips { grid-area: todaystrips; }
	.menuitempum { grid-area: pum; }
	.menuitemfinalpum { grid-area: finalpum; }
	.menuitemfinal1anddonepum { grid-area: final1anddonepum; }
	.menuitemgarageinvmanage { grid-area: garageinvmanage; }
	.menuitemdriver { grid-area: driver; }
	.menuitemmymaintrequests { grid-area: mymaintrequests; }
	.menuitemmaterialreport { grid-area: materialreport; }
	.menuitemmraccept { grid-area: mraccept; }
	.menuitemmrreport { grid-area: mrreport; }
	.menuitemmrauth { grid-area: mrauth; }
	.menuitemdailypricing { grid-area: dailypricing; }
	.menuitemaddprospect { grid-area: addprospect; }
	.menuitemcashedpayments { grid-area: cashedpayments; }
	.menuitemassignpayment { grid-area: assignpayment; }
	.menuitemacceptreturnpayment { grid-area: acceptreturnpayment; }
	.menuitemacceptpayment { grid-area: acceptpayment; }
	.menuitemissuepayment { grid-area: issuepayment; }
	.menuitemholidaymanager { grid-area: holidaymanager; }
	.menuitemusermanager { grid-area: usermanager; }
	div.menuitem { width: 80%; }
}

/* make the main menu buttons a little smaller on the in-between screen sizes */
@media only screen and (min-device-width : 701px) and (max-device-width : 800px) {
	div.menuitem { width: 60%; }
}