body       { background-color: #2f62b6; padding: 0px; }
h1         { font-family: Verdana,Helvetica,sans-serif; }
.top	{ display: grid; grid-template-columns: max-content auto; background-color: white; }
.logo	{ align-self: start; padding: 1em; }
.title	{ align-self: center; text-align: right; font-family: Arial,Helvetica,sans-serif; font-size: 3em; font-weight: bold; margin: 0.5em; }
#content   { padding: 1em; }

#login		{ padding-top: 2em; text-align: center; }
#login2		{ min-width: 20em; margin: 0 auto; background-color: #1b66e4; padding-top: 1em; padding-bottom: 1em; padding-left: 2em; padding-right: 2em; display: inline-block; text-align: center; }
#login3		{ background-color: white; padding: 0.5em; margin: auto; width: 30em; }
#error		{ color: red; font-weight: bold; font-family: "Times New Roman",Times,serif; font-size: 1.2em; padding-top: 0.5em; display: none; }

.question	{ font-family: Verdana,Helvetica,sans-serif; font-weight: bold; padding: 1em; }
.example	{ font-family: Verdana,Helvetica,sans-serif; padding: 0px 1em 0px 1em; }
.answers	{ font-family: "Times New Roman",Times,serif; font-size: 1.2em; padding: 0.5em; }
.message	{ font-family: Verdana,Helvetica,sans-serif; padding: 1em; margin-bottom: 1em; }
.button		{ font-family: Verdana,Helvetica,sans-serif; padding: 0.3em; background-color: #2f62b6; color: white; border: solid #1b66e4; }
.textbox	{ font-size: 1em; margin: 0.5em; }
.password	{ font-size: 1em; margin: 0.5em; }
.input		{ margin-bottom: 0.25em; }
.unbutton	{ font-family: Verdana,Helvetica,sans-serif; padding: 0.3em; background-color: #737373; color: lightgrey; border: solid #808080; }
.chunky		{ font-size: 120%; }

.hidden		{ display: none !important; }
#todaybox	{ display: flex; flex-direction: column; align-items: center; padding-top: 2em; }
#dates		{ grid-column-end: span 3; display: flex; background-color: white; justify-content: space-between; align-items: center; }
#prev		{ padding: 0 1em 0 0.5em; cursor: pointer; }
#show		{ padding: 0.2em 1em; font-weight: bold; font-size: larger; }
#next		{ text-align: right; padding: 0 0.5em 0 1em; cursor: pointer; }
#today		{ display: grid; grid-template-columns: repeat(3,max-content); width: max-content; background-color: red; }
.invisible	{ visibility: hidden; }
.time		{ font-family: Verdana,Helvetica,sans-serif; padding: 0.2em 0.5em 0.2em 0.2em; border: 1px solid grey; text-align: right; }
.site		{ padding: 0.2em; border: 1px solid grey; }
.out		{ text-decoration: line-through; }
.delete		{ padding: 0.2em; font-weight: bold; border: 1px solid grey; cursor: pointer; }
.deleting	{ animation: fadeblink 1s; animation-iteration-count: infinite; }
@keyframes fadeblink {
  0% { opacity: 1; }
  50% { opacity: 0.33; }
  100% { opacity: 1; }
}

#main		{ display: flex; justify-content: space-between; }
#when		{ margin-right: 0.25em; }
#checkin	{ background-color: antiquewhite; }
#youare		{ display: flex; flex-direction: column; align-items: center; margin: 2em; }
#here		{ display: flex; flex-direction: column; align-items: center; padding: 1em; background-color: white; border-radius: 1.5em; }
#current	{ padding-bottom: 1em; font-weight: bold; }

#inputs		{ display: flex; }
#inputs div	{ white-space: nowrap; }

.visit		{ background-color: cornflowerblue; }
.trip		{ background-color: darkseagreen; }
.tripfrom	{ border-top: 1px dotted silver; }
.tripto		{ border-bottom: 1px dotted silver; }

#sitename:read-only	{ background-color: #cfc; }