html {
	-webkit-text-size-adjust: 100%;
	overflow-y: scroll;
	background: #eee;
	background: linear-gradient(180deg, rgba(255,255,255,1), rgba(230,230,230,1));
}
body {
	/* background: #0353b7 url('../graphics/stripes.jpg') repeat; */
	padding-bottom: 130px;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type=number] {-moz-appearance: textfield;}

html, body {color: #333; font-family: 'Lato', sans-serif; text-align: center; margin: 0; padding: 0; font-size: 12pt;}
a:link, a:hover, a:visited {color: #fff; text-decoration: none; cursor: pointer;}
h1, h2, h3, h4, h5, h6 {text-align: center; margin: 0; margin-bottom: 20px; margin-top: 20px; padding: 0; color: #333; text-transform: uppercase;}
.noselect {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;}
.page {display: none;}
#languagemenu {position: fixed; top: 0px; right: 0px; padding: 5px; background: #ccc; background: linear-gradient(#ccc, #eee); border-radius: 0px 0px 0px 5px; z-index: 10;}
.flagicon {float: right; clear: both; width: 40px;}
.flagicon img {width: 100%;}
#searchservicepoint {text-transform: uppercase;}
#loginform {margin-top: 30px;}
#adminmenu {width: 100%; background: #555; color: white; margin-bottom: 20px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 2px;}
#adminmenu .notselected {padding: 3px; background: linear-gradient(#000, #333);}
#adminmenu .selected {padding: 3px; background: #fff;}
#adminmenu img {max-width: 10%; padding-top: 5px; padding-bottom: 5px;}
#adminmenu .notselected:hover {background: #555;}
.adminbutton {margin-top: 10px;}
#adminlanguagemenu {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 5px;}
.copy {width: 15px; margin-left: 5px; cursor: pointer;}

.button {padding: 2%; background: #0253b7; color: #fff; text-transform: uppercase; border-radius: 5px 5px 5px 5px; font-weight: bold; margin-bottom: 3px; border: 1px solid #333;}
.redbutton {padding: 2%; background: rgba(255,0,00,1); color: #fff; text-transform: uppercase; border-radius: 5px 5px 5px 5px; font-weight: bold; margin-bottom: 3px; border: 1px solid #333;}
.button:hover, .redbutton:hover {background: #032c6c; cursor: pointer;}
#doningmenuinfo {width: 98%; padding: 1%; background: #ccc; color: #555; margin-bottom: 10px;}
.generalinfo {width: 98%; padding: 1%; background: #ccc; color: #555; margin-bottom: 10px;}

#basicbarcode {font-size: 60pt;}
#basictype {text-transform: uppercase; margin-bottom: 20px;}
.barcode:hover {background: #ddd;}
.tobedeleted {text-decoration: line-through; color: red;}
#addboxnumber, #addpalletnumber, #searchitem {text-transform: uppercase;}
#palletlist, #boxlist {margin-bottom: 20px; margin-top: 10px;}
#categorystats {display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 1px; background: #0353b8; padding: 1px;}
#dailystats {display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; grid-gap: 1px; background: #0353b8; padding: 1px;}
#dailystats div, #categorystats div {background: #022c6c; padding: 2px;}
.left {text-align: left;}

.dataheader {padding: 2%; background: #032c6c; color: white; text-transform: uppercase; border-radius: 5px 5px 0px 0px; font-weight: bold;}
.dataheaderpriority {padding: 2%; background: red; color: white; text-transform: uppercase; border-radius: 5px 5px 0px 0px; font-weight: bold;}
.data {border: 1px solid #000; background: white; overflow: scroll; font-size: 10pt; text-transform: uppercase; text-align: center; position: relative; padding-bottom: 30px;}
.data:hover {cursor: pointer;}
img {max-width: 100%;}
.data .title {padding-top: 5px; padding-bottom: 10px; font-weight: bold;}
textarea {min-height: 200px; resize: none;}
#cancel {margin-top: 5px;}
.img img:hover {width: 120%;}

.buttons {display: grid; grid-template-columns: 1fr 2fr 1fr; grid-gap: 0px; width: 100%; position: absolute; left: 0px; bottom: 0px;}
.plus {background: green;color: white; border-radius: 15px 0px 0px 0px;}
.minus {background: red; color: white; border-radius: 0px 15px 0px 0px;}
.minus, .data .quantity, .plus {padding-bottom: 7px; padding-top: 7px; font-weight: bold;}
.selected {background: #ffd80b}

.listitem {width: 94%; margin-left: 2%; text-transform: uppercase; padding: 1%; border-bottom: 3px dotted #ddd; display: grid; grid-template-columns: 1fr 3fr 1fr; grid-gap: 0px;}
.listitem:hover {background: #ddd; color: #000; cursor: pointer;}
.listitem .quantity {text-align: left; padding-top: 3px;}
.listitem .title {text-align: left; padding-top: 3px;}
.listitem .delete {background: red; padding-left: 10px; padding-right: 10px; color: white; border-radius: 5px; padding-top: 3px; padding-bottom: 3px;}

.town {padding-top: 5px; padding-bottom: 5px; background: #0253b7; color: white; padding-bottom: 10px; font-weight: bold; text-transform: uppercase; border: 1px solid #333;}
.town:hover {background: #032c6c; color: white; cursor: pointer;}
.time {background: red; color: white; padding: 5px; position: absolute; top: 0px; left: 0px; text-transform: uppercase; font-size: 10pt;}
.link {background: green; color: white; padding: 5px; position: absolute; top: 0px; right: 0px; text-transform: uppercase; font-size: 10pt;}
.facebook {background: #0353b7; color: white; padding: 5px; position: absolute; bottom: 0px; right: 0px; text-transform: uppercase; font-size: 10pt;}
.street {font-style: italic; padding-top: 10px; margin-bottom: 10px; font-size: 10pt;}
.opening {font-style: italic; padding-top: 10px; margin-bottom: 10px; font-size: 10pt;}
.location {padding: 5px; border: 1px solid #333;}
.location:hover {background: #0353b7; color: white; cursor: pointer;}
.location .address {font-style: italic; font-size: 80%; padding-top: 5px;}
.selectedlocation {background: #ffd80b;}
.notselectedlocation .town {background: #888;}
.notselectedlocation {color: #888;}
.notselectedlocation .time {background: #888;}
.notselectedlocation .link {background: #888;}
.previous {border-radius: 15px 0px 0px 15px;}
.next {border-radius: 0px 15px 15px 0px;}
.subnavigationlink {background: white; font-weight: bold; padding: 10px; border: 1px solid #000; margin-bottom: 30px; text-transform: uppercase;}
.subnavigationlink:hover {background: #0353b7; color: white; cursor: pointer;}
.inputheader {text-transform: uppercase; background: #0253b7; color: #ffd80b; padding: 7px; font-size: 10pt;}
.inputheaderfull {margin-top: 30px; text-transform: uppercase; background: #0253b7; color: #ffd80bf; padding: 7px; font-size: 10pt;}
input {width: 96%; padding: 2%; border: 1px solid #ccc; text-align: center;}
select {width: 100%; padding: 1%; padding-right: 0px; padding-left: 0px; border: 1px solid #ccc; text-align: center;}
textarea {width: 100%; padding: 1%; border: 1px solid #ccc;}
.save {margin-top: 30px;}
#footer {width: 100%; background: #022c6b; padding-top: 15px; padding-bottom: 10px; color: white; font-size: 8pt; border-top: 1px solid white; position: fixed; bottom: 0px; left: 0px;}
#footer img {max-width: 80px;}
.accepttermsdiv {border: 1px solid #333; background: red; color: white; padding-top: 5px; padding-bottom: 5px; border-radius: 5px;}
.accepttermsdiv input, .accepttermsdiv label {text-align: left;}
#changedelivery {margin-top: 30px;}
.message {margin-top: 10px; padding: 1%; color: red;}
#boxnumber {font-size: 40pt;}
.info {padding-top: 30px; padding-bottom: 30px;}
.admininfo {background: #0253b7; color: white; padding: 2%;}
#loginbutton {margin-top: 15px;}
.donation {display: grid; grid-template-columns: 1fr 3fr 3fr 1fr 1fr; grid-gap: 0px; margin-bottom: 5px; border-bottom: 1px solid #ddd;}
.watch {font-size: 8pt; margin-right: 5px;}
.receive, .received {font-size: 8pt;}
.close {font-size: 8pt; margin-right: 5px;}
.donationlistitem {margin-bottom: 5px; border-bottom: 1px solid #ddd; text-transform: uppercase;}
.donationlistitem:hover {background: #333; color: white;}
.parcel {margin-bottom: 30px; border: 3px solid #333; padding: 15px;}
.parcel .title {font-size: 24pt; width: 40%; margin-left: 30%; background: red; color: white; margin-bottom: 10px;}
.parcel .pdf {margin-top: 15px;}
.parcel .pdf img {width: 60px;}
.parcelinfo {padding: 5px; background: #ddd; color: #555; font-style: italic; width: 40%; margin-left: 30%; text-transform: uppercase; margin-top: 10px;}
.submenubutton.disabled {background: #ccc; color: #eee;}
#parcelid {text-transform: uppercase;}
#categoryitems {text-align: left; text-transform: uppercase; margin-top: 15px; margin-bottom: 70px;}
#categoryitems .itemline {padding: 4px; display: grid; grid-template-columns: 6fr 1fr 1fr 1fr; grid-gap: 5px; border-bottom: 1px solid #ccc;}
.yellow {background: rgba(255,255,0,0.8);}
#categoryitems .name {padding-top: 4px;}
#categoryitems .packingplus {background: green; color: white; padding: 4px; text-align: center;}
#categoryitems .packingminus {background: red; color: white; padding: 4px; text-align: center;}
#categoryitems input {text-align: center; padding-top: 4px; padding-bottom: 4px;}

.outsideheader {width: 76%; margin-left: 10%; padding: 2%; background: #032c6c; color: white; text-transform: uppercase; border-radius: 5px 5px 0px 0px; font-weight: bold;}
.innerheader {width: 98%; padding: 1%; background: #032c6c; color: white; text-transform: uppercase; border-radius: 5px 5px 0px 0px; font-weight: bold;}
#menu {width: 78%; margin-left: 10%; padding: 1%; margin-bottom: 10px;}
#instructions {width: 78%; margin-left: 10%; padding: 1%; background: white; margin-bottom: 10px;}
.instructions {width: 78%; margin-left: 10%; padding: 1%; background: white; margin-bottom: 10px;}
.instructions:last-child {margin-bottom: 100px;}
.transparent {width: 80%; margin-left: 10%; padding: 0%; margin-bottom: 10px;}
.transparentadmin {width: 80%; margin-left: 10%; margin-bottom: 10px;}
.transparentadmin .infodiv {padding-top: 20px; padding-bottom: 10px;}
.datagroup {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 0px; margin-bottom: 20px; background: white;}
#mobilecover {display: none; margin-bottom: 10px;}
#locations {width: 100%; margin-bottom: 10px; background: white; display: grid; grid-template-columns: 1fr; grid-gap: 0px;}
.subpagenavigation {width: 76%; padding: 2%; margin-left: 10%; margin-bottom: 10px; display: grid; grid-template-columns: 1fr 2fr 1fr; grid-gap: 0px;}
#list {width: 80%; margin-left: 10%; min-height: 100px; background: white; color: #333; padding-top: 30px; padding-bottom: 30px; margin-bottom: 20px;}
.form {width: 50%; margin-left: 25%; background: white; margin-bottom: 10px; margin-top: 10px;}
/* .innerform {display: grid; grid-template-columns: 3fr 3fr 1fr 3fr; grid-gap: 30px; margin-bottom: 20px;} */
.innerform {display: grid; grid-template-columns: 1fr; grid-gap: 10px; margin-bottom: 20px;}
.innerdriverform, .innercarform {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;}
.fiveoptions {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 5px;}
.twooptions {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 5px;}
.twooptions div, .fiveoptions div {border: 1px solid #ccc; padding: 10px;}
#deliverycontainer {width: 98%; padding: 1%; background: white; margin-bottom: 10px;}
#adminlogin, #adminlogout, #searchform, #donationslist {width: 78%; margin-left: 10%; padding: 1%; background: white; margin-bottom: 30px;}
.hashing {width: 80%; margin-left: 10%;}
.banner {margin-bottom: 15px;}
.banner img {width: 80%;}
.townlocations {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 0px;}
#doningmenu {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 10px; background: white; padding-top: 0px; margin-bottom: 10px; margin-top: 10px;}
.number {font-size: 60pt;}
.submenubutton {background: #0253b7; color: white; text-transform: uppercase; font-weight: bold; border-radius: 0px; padding: 5px; padding-bottom: 15px;}
#doningmenu .selected {color: white; background: #032c6c;}
.submenubutton:hover {background: #eee; color: rgba(109,187,249); cursor: pointer;}
.packagedetailslist {width: 96%; padding: 2%; display: grid; grid-template-columns: 1fr 5fr 2fr; grid-gap: 3px; background: white; padding-top: 0px; margin-bottom: 30px; text-align: left; text-transform: uppercase; font-weight: bold;}
.scandetails {margin-bottom: 15px; padding: 1%; width: 50%; margin-left: 24%; background: #eee; color: #666; position: relative;}
.scanorder {position: absolute; color: #aaa; font-size: 40pt; left: 10px; top: 5px; font-weight: bold;}
#topmenu {width: 80%; margin-left: 10%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1px; background: #ccc; margin-bottom: 5px; margin-top: 0px; margin-bottom: 10px; font-size: 12pt; text-transform: uppercase; position: relative; top: -4px; border-top: 1px solid #ccc;}
#topmenu a:link, #topmenu a:hover, #topmenu a:visited {color: rgba(0,100,200,0.9);}
#topmenu div {padding: 3px; background: #fff; font-size: 12pt;}
#topmenu div:hover {background: #eee;}
#topmenu .notselectedmenu {background: #ddd; color: #888;}
#listcontainer {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; text-align: left; padding: 20px; padding-bottom: 60px;}
.listheader {background: #0253b7; color: white; padding: 5px; text-transform: uppercase; border-radius: 5px; margin-bottom: 10px; padding-left: 15px;}
.dot {float: left; margin-right: 10px; margin-left: 15px;}
#markform {width: 78%; margin-left: 10%; background: white; min-height: 200px; padding: 1%; margin-bottom: 30px; padding-bottom: 30px;}
#deliverform {width: 78%; margin-left: 10%; background: white; min-height: 50px; padding: 1%; margin-bottom: 30px; padding-bottom: 30px;}
.divcontainer {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; margin-bottom: 70px;}
.infodiv {background: #022c6b; padding: 4%; padding-top: 2%; padding-bottom: 2%; color: white;}
.infodiv h1, .infodiv h2, .infodiv h3, .infodiv h4, .infodiv h5, .infodiv h6 {color: white; padding-top: 10px; margin-top: 0px;}
.infodiv a:link, .infodiv a:hover, .infodiv a:visited {text-decoration: underline; color: white;}
#packingbuttonarea {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px;}
#packingbuttonarea .selected {background: white; color: #0253b7;}
.packingbutton {padding-top: 15px; padding-bottom: 15px;}
#categorystats {font-size: 10pt;}
.graph {padding: 5px; background: white; margin-top: 10px; border-radius: 10px 0px 10px 0px;}
.onecolumn img {max-width: 30%;}
.twocolumns {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; margin-top: 30px;}
.fourcolumns {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 10px;}
.threecolumns {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; margin-top: 10px;}
/* .onecolumn .boxtitle {font-size: 16pt; color: white; border-radius: 10px; padding-top: 10px; padding-bottom: 10px; background: rgba(0,0,0,0.7); background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,1)); position: absolute; bottom: 10px; width: 50%; padding: 2%; left: 23%; text-transform: uppercase;} */
.box {width: 90%; padding: 5%; min-height: 150px; background: #fdd60c; cursor: pointer; position: relative; color: #000; overflow: hidden;}
.box img {width: 100%;}
.box:hover {background: linear-gradient(#ffe556, #fdd60c);}
.boxtitle {font-size: 16pt; color: white; border-radius: 10px; padding-top: 10px; padding-bottom: 10px; background: rgba(0,0,0,1); background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,1)); position: absolute; bottom: 10px; width: 80%; padding: 5%; left: 5%; padding-top: 10px; padding-bottom: 10px; text-transform: uppercase;}
.boxtitlehover {font-size: 16pt; color: #000; border-radius: 10px; padding-top: 10px; padding-bottom: 10px; background: rgba(255,255,255,1); background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,1)); position: absolute; bottom: 10px; width: 80%; padding: 5%; left: 5%; padding-top: 10px; padding-bottom: 10px; text-transform: uppercase;}
video {width: 100%; max-width: 100%;}
.competitionimage {width: 30%;}
#scrolltotop {position: fixed; bottom: 0px; right: 0px; padding: 10px; background: #12255d; color: white; cursor: pointer; text-align: right; background: linear-gradient(140deg, #073abe, #12255d); border-right: 0px; border-bottom: 0px;}
#mobilemenu {display: none;}

@media (max-width: 1100px) {
	.outsideheader {width: 86%; margin-left: 5%; padding: 2%;}
	#menu {width: 88%; margin-left: 5%; padding: 1%;}
	#instructions {width: 88%; margin-left: 5%; padding: 1%;}
	.instructions {width: 88%; margin-left: 5%; padding: 1%;}
	.transparent {width: 90%; margin-left: 5%; padding: 0%;}
	.transparentadmin {width: 90%; margin: 5%;}
	.datagroup {grid-template-columns: 1fr 1fr 1fr 1fr;}
	#locations {width: 100%; grid-template-columns: 1fr;}
	.subpagenavigation {width: 86%; padding: 2%; padding-bottom: 0px; padding-top: 0px; margin-top: 0px; margin-bottom: 0px; margin-left: 5%; grid-template-columns: 1fr 2fr 1fr;}
	#list {width: 90%; margin-left: 5%; }
	.form {width: 86%; margin-left: 5%; background: white; padding: 2%;}
	.innerform {display: grid; grid-template-columns: 1fr; grid-gap: 30px;}
	#deliverycontainer {width: 98%;}
	#adminlogin, #adminlogout, #searchform, #donationslist {width: 88%; margin-left: 5%;}
	.email, .phone {font-size: 10pt; padding-top: 3px;}
	.hashing {width: 90%; margin-left: 10%;}
	.number {font-size: 40pt;}
	.submenubutton {font-size: 10pt;}
	.banner img {width: 90%;}
	.townlocations {grid-template-columns: 1fr 1fr 1fr 1fr;}
	#markform, #deliverform {width: 88%; margin-left: 5%;}
	#topmenu {width: 90%; margin-left: 5%; font-size: 10pt;}
	#listcontainer {grid-template-columns: 1fr 1fr;}
	#adminmenu img {max-width: 20%;}
	.divcontainer {grid-template-columns: 1fr 1fr; grid-gap: 10px;}
	#categorystats {font-size: 10pt;}
	.boxtitle {font-size: 12pt;}
	.competitionimage {width: 40%;}
}

@media (max-width: 700px) {
	.outsideheader {width: 96%; padding: 2%; margin-left: 0px; border-radius: 0px;}
	#datacontainer {width: 98%; padding: 1%; margin-left: 0px;}
	#instructions {width: 96%; background: white; padding: 2%; margin-left: 0px;}
	.instructions {width: 96%; background: white; padding: 2%; margin-left: 0px;}
	.transparent {width: 100%; background: white; margin-left: 0px;}
	.transparentadmin {width: 92%; margin: 4%; background: white;}
	.datagroup {grid-template-columns: 1fr;}
	.data {display: grid; grid-template-columns: 1fr 4fr 3fr; grid-gap: 0px; align-items: center; position: relati; padding-bottom: 0px;}
	.buttons {position: relative;}
	#mobilecover {display: block;}
	.subpagenavigation {width: 96%; grid-template-columns: 1fr 1fr 1fr; margin: 0; padding: 0; padding-left: 2%; padding-right: 2%;}	
	#list {width: 100%; margin-left: 0px;}
	.form {width: 100%; padding: 0px; margin-left: 0px;}
	.innerform {display: grid; grid-template-columns: 1fr; grid-gap: 0px;}
	.innerdriverform {display: grid; grid-template-columns: 1fr; grid-gap: 30px;}
	input {width: 95%;}
	#adminlogin, #adminlogout, #searchform, #donationslist {width: 92%; margin-left: 3%;}
	.email, .phone {font-size: 9pt; padding-top: 3px; display: none;}
	.hashing {width: 100%;}
	.number {font-size: 40pt;}
	.submenubutton {font-size: 9pt;}
	#doningmenu {width: 100%; grid-gap: 1px; grid-template-columns: 1fr 1fr 1fr;}
	.plus {background: green;color: white; border-radius: 0px}
	.minus {background: red; color: white; border-radius: 0px;}
	.minus, .data .quantity, .plus {padding-bottom: 7px; padding-top: 7px; font-weight: bold;}
	.image {padding-bottom: 0px; margin-bottom: 0px;}
	.data .title {padding: 0px; font-weight: bold; text-align: left; padding-left: 6%; padding-bottom: 0px; overflow: hidden;}
	.banner img {width: 100%;}
	.townlocations {grid-template-columns: 1fr 1fr;}
	#markform, #deliverform {width: 98%; padding: 1%; margin-left: 0px;}
	.parcel .title {width: 100%; margin-left: 0px;}
	.parcelinfo {width: 98%; margin-left: 0px;}
	.makenewdonation {border-radius: 0px; border: 0; padding-top: 10px;}
	.scandetails {width: 98%; margin-left: 0%;}
	#topmenu {width: 100%; margin-left: 0px;}
	#topmenu div {font-size: 8pt;}
	#listcontainer {grid-template-columns: 1fr;}
	#adminmenu img {max-width: 40%;}
	.divcontainer {grid-template-columns: 1fr;}
	#categorystats {font-size: 9pt;}
	.twocolumns {grid-template-columns: 1fr;}
	.competitionimage {width: 80%;}
	.fourcolumns {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;}
	.boxtitle {font-size: 10pt;}
	.flagicon {width: 30px;}
}