:root { font-size: 16px; font-family: arial, sans serif; --primary-color: #052955; --secondary-color: #dedede; --highlight-color: #96c56f; }
html { background-color: #d6d8d9; }
body { background-color: white; border-radius: 1rem; width: calc(100% - 4rem); max-width: 960px; margin: 1rem auto; padding: 1rem;  }

.rightalign { text-align: right; }
.leftalign { text-align: left; }
.centeralign { text-align: center; }
.topalign { vertical-align: top; }
.bottomalign { vertical-align: bottom; }
.warning { color: red; }
.notice-message { font-style: oblique; text-align: center; background-color: #ffc; }
.error-message-container { margin: 0 0 1.5rem 0; }
.error-message { font-style: oblique; text-align: center; background-color: #fcc; color: red; border: 1px solid red; border-radius: 0.15rem; padding: 0.25rem; margin: 0.5rem; }

header { height: fit-content; width: auto; border-radius: 0.5rem; margin: 0 auto 3rem auto; overflow: hidden; }
header div.header-top { background-color: var(--primary-color); height: 8rem; width: auto; margin: 0 auto; padding: 0; color: white; font-size: 1.75rem; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
header div.header-top div.logo { flex-basis: 30%; height: 8rem; padding: 0 3rem; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
header div.header-top div.logo img { height: 50%; display: block; }
header div.header-top div.title { flex-basis: 30%; }
header div.header-top div.title p { text-align: center; margin: 0; padding: 0; }
header div.header-top div.title p:first-child { font-weight: bold;  }
header div.header-bottom { background-color: var(--secondary-color); height: 10%; width: auto; padding: 0.5rem 2rem; font-size: 0.84rem; color: #002855; }
header div.header-bottom a { color: inherit; text-decoration: none; }

div.tab-group { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin: 2rem 0; }
div.tab-group div.tab { flex-basis: 20%; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; background-color: var(--primary-color); color: white; border-radius: 0.25rem; padding: 0.25rem; margin: 0 0.25rem; text-align: center; height: 5rem; }
div.tab-group div.tab:hover { background-color: var(--highlight-color); }
div.tab-group div.tab a { display: block; width: 100%; color: inherit; text-decoration: none; }
div.tab-group div.tab div.content { height: 100%; width: 100%; text-align: center; align-content: center; }
div.tab-group div.tab.instructions div.content { text-align: left; align-content: start; }
div.tab-group div.tab p { margin: 0; padding: 0; }
div.tab-group div.tab p:nth-child(2) { font-size: 0.75rem; }
div.tab-group div.tab.selected { background-color: var(--secondary-color); color: #5c7f92; }
div.tab-group div.tab.instructions { flex-basis: 36%; background-color: white; text-align: left; color: inherit; font-size: 0.81rem; }
div.tab-group div.tab.instructions p:first-child { font-weight: bold; }

div.item-grid { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; }
div.item-grid div.item { flex-basis: 15rem; margin: 1rem 0 4rem 0; height: 15rem; font-size: 0.85rem; padding: 1rem; }
div.item-grid div.item img { display: block; border-radius: 0.25rem; margin: 0 auto; }
div.item-grid div.item p.title { text-align: center; margin: 0.25rem 0 0 0; padding: 0; }
div.item-grid div.item a { text-decoration: none; color: inherit; }
div.item-grid div.item a:hover { color: var(--highlight-color); }
div.item-grid div.item p.description { font-size: 0.75rem; margin: 1.5rem 0 0 0; padding: 0.5rem 0 0 0; border-top: 2px solid var(--secondary-color); }
div.download-bar { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; border-radius: 0.25rem; overflow: hidden; margin: 0.5rem 0 0 0; }
div.download-bar div.element { flex-basis: 80%; height: 2rem; margin: auto 0; padding: 0; text-align: center; color: white; background-color: var(--primary-color); font-size: 0.75rem; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
div.download-bar div.element:first-child { flex-basis: 20%; color: var(--primary-color); background-color: var(--secondary-color); font-weight: bold; }
div.download-bar div.element p { margin: 0; padding: 0; text-align: center; width: 100%; }
div.download-bar div.element p a { text-decoration: none; color: inherit; }
div.download-bar div.element p a:hover { color: var(--highlight-color); }

#video-dialog { height: fit-content; width: 75%; min-width: 300px; padding: 1.5rem; border: 1px solid black; border-radius: 0.5rem; position: fixed; top: 10%; }
#video-dialog header { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin: 0 0 1rem 0; padding: 0; height: fit-content; }
#video-dialog header div.video-title { flex-basis: 60%; font-weight: bold; margin: 0 1rem 0 0; font-size: 1.25rem; }
#video-dialog header div.download-bar { flex-basis: 38%; margin: 0; }
#video-dialog div.video-description { margin: 1rem 0; }
#video-dialog footer { margin: 1rem 0 0 0; padding: 0; justify-content: flex-end; }
#video-dialog footer div.close-button { display: inline-block; width: fit-content; height: fit-content; padding: 0.5rem; margin: 0; background-color: var(--primary-color); color: white; border-radius: 0.5rem; text-align: center; font-weight: bold; cursor: pointer; }
#video-dialog footer div.close-button:hover { background-color: var(--highlight-color); }

#video-player { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
#video-player iframe, #video-player object, #video-player embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.skip-button { z-index: 999; position: absolute; background-color: white; padding: 0.5rem 0.5rem; border-radius: 0.5rem; right: 1rem; bottom: 4rem; opacity: 0.75; width: 6rem; text-align: center; display: none; }
.skip-button:hover { background-color: #ccc; }
.play-button { z-index: 999; position: absolute; /*background-color: white; padding: 0.5rem 0.5rem; border-radius: 2rem;*/ right: 50%; bottom: 50%; transform: translate(50%, 50%); opacity: 0.65; width: fit-content; height: fit-content; display: none; }
.play-button:hover { opacity: 1; }

footer { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; font-size: 0.75rem; padding: 0; margin: 2rem 0 0 0; }
footer div.disclaimer { flex-basis: 100%; background-color: #eff1e7; border-radius: 0.25rem; height: fit-content; padding: 0.75rem; margin: 0 0 1rem 0; font-size: 0.85rem; }
footer div.disclaimer p { padding: 0; margin: 0; }
footer div.disclaimer p:first-child { font-weight: bold; margin-bottom: 1rem; }
footer div.footer-text { flex-basis: calc(100% - 17.5rem); background-color: #666666; border-radius: 0.25rem; height: 2.5rem; padding: 0.75rem; margin: 0; color: white; text-align: center; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
footer div.footer-text div.content { flex-basis: 100%; }
footer div.footer-text p { margin: 0; padding: 0; }
footer div.powered-by { flex-basis: 14rem; background-color: var(--primary-color); border-radius: 0.25rem; height: 2.5rem; padding: 0.75rem; margin: 0; color: white; display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; }
footer div.powered-by p { /*flex-basis: 38%;*/ margin-right: 0.5rem; text-align: right; }
footer div.powered-by img { display: block; /*flex-basis: 50%;*/ max-height: 80%; }

@media (max-width: 900px) {
	#video-dialog { width: 90%; }
	div.item-grid div.item { flex-basis: 40%; }
/*	footer div.footer-text { flex-basis: 60%; }
	footer div.powered-by { flex-basis: 48%; }*/
}

@media (max-width: 700px) {
	header div.header-top { flex-wrap: wrap; }
	header div.header-top div.logo { flex-basis: 100%; }
	header div.header-top div.title { display: none; }
	div.item-grid { justify-content: center; }
	div.item-grid div.item { flex-basis: 100%; }
/*	footer div.footer-text { flex-basis: 20rem; }
	footer div.powered-by { flex-basis: calc(100% - 24rem); }*/
}

@media (max-width: 660px) {
	body { margin: 0; width: auto; }
	header div.header-top div.logo { margin: auto; width: 50%; }
}

@media print {
	.edit-project .editor { display: none; }
	nav { display: none; }
	.edit-project .preview iframe { border: none; }
	sl-breadcrumb { display: none; }
}