@layer www-main {
	:root {
		--accent-color-1: #282878;
		--accent-color-2: #3c94b4;
		--accent-color-3: #3c94b4;
		--accent-color-4: #3c94b4;
		--accent-color-5: #3c94b4;
		--background-color-1: #fff;
		--background-color-2: #ddd;
		--background-color-3: #bbb;
		--border-color-1: #888;
		--foreground-color-1: #000;
		--foreground-color-2: #222;
		--foreground-color-3: #444;
		--hover-color-1: #a8a;
		--selected-color-1: #636;
		--selected-color-2: #00f;
		--focus-color-1: #939;
	}
	body.company {
		--accent-color-1: #147878;
		--accent-color-2: #147878;
		--accent-color-3: #64b4b4;
		--accent-color-4: #c8964a;
		--accent-color-5: #c8964a;
		--background-color-5: #010;
		--background-color-6: #010;
	}
	body.home {
		--accent-color-1: #282878;
		--accent-color-2: #282878;
		--accent-color-3: #3c94b4;
		--accent-color-4: #3c94b4;
		--accent-color-5: #3c94b4;
		--background-color-5: #003;
		--background-color-6: #003;
	}
	body.products {
		--accent-color-1: #606;
        --accent-color-2: #606;
        --accent-color-3: #c8964a;
        --accent-color-4: #c8964a;
        --accent-color-5: #c8964a;
		--background-color-5: #202;
		--background-color-6: #202;
	}
	body.products.airport {
		--accent-color-1: #514e19;
		--accent-color-2: #514e19;
		--accent-color-3: #b4a000;
		--accent-color-4: #c8964a;
		--accent-color-5: #c8964a;
		--background-color-5: #220;
		--background-color-6: #220;
	}
	body.products.gds {
		--accent-color-1: #323c96;
		--accent-color-2: #323c96;
		--accent-color-3: #50a0f0;
		--accent-color-4: #c8964a;
		--accent-color-5: #c8964a;
		--background-color-5: #003;
		--background-color-6: #003;
	}
	body.products.travel {
		--accent-color-1: #640064;
		--accent-color-2: #640064;
		--accent-color-3: #b48cb4;
		--accent-color-4: #b48cb4;
		--accent-color-5: #b48cb4;
		--background-color-5: #d6ade7;
		--background-color-6: #202;
	}
	body.resources {
		--accent-color-1: #7d96a0;
		--accent-color-2: #7d96a0;
		--accent-color-3: #dc5050;
		--accent-color-4: #dc5050;
		--accent-color-5: #dc5050;
		--background-color-5: #5d7680;
		--background-color-6: #422;
	}
	nav ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	nav li {
		display: block;
		margin: 0;
		padding: 0;
	}
	body {
		font-size: 1rem;
		line-height: 1.5rem;
	}
	body.home {
		background-color: var(--background-color-5);
		background-image: url("https://d2v7ueas9lh564.cloudfront.net/webmedia/background2.jpg");
		background-repeat: no-repeat;
		background-size: cover;
	}
	body.company {
		background-color: var(--background-color-5);
		background-image: url("https://d2v7ueas9lh564.cloudfront.net/webmedia/background36.jpg");
		background-repeat: no-repeat;
		background-size: cover;
	}
	body.products {
		background-color: var(--background-color-5);
		background-image: url("https://d2v7ueas9lh564.cloudfront.net/webmedia/lavender_field.jpg");
		background-repeat: no-repeat;
		background-size: cover;
	}
	body.products.gds {
		background-color: var(--background-color-5);
		background-image: url("https://d2v7ueas9lh564.cloudfront.net/webmedia/background4.jpg");
		background-position: top center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	body.products.travel {
		background-color: var(--background-color-5);
		background-image: url("https://d2v7ueas9lh564.cloudfront.net/webmedia/background10.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	body.products.travel article {
		background-color: var(--background-color-5);
	}
	body.products.travel article > .headline {
		color: white;
	}
	body.products.airport {
		background-color: var(--background-color-5);
		background-image: url("https://d2v7ueas9lh564.cloudfront.net/webmedia/background32.jpg");
		background-position: top center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	body.resources {
		background-color: var(--background-color-5);
		background-image: url("https://d2v7ueas9lh564.cloudfront.net/webmedia/background30.jpg");
		background-repeat: no-repeat;
		background-size: cover;
	}
	.p {
		display: block;
	}
	.viasinc-logo {
		margin: .5rem 1rem 0 0;
		width: 8rem;
		cursor: pointer;
	}

	img {
		display: inline-block;
		border-style: none;
	}
	strong {
		font-weight: bolder;
	}
	table {
		border-collapse: collapse;
		font-size: 1rem;
		line-height: 1.5rem;
	}
	td {
		font-size: 1rem;
		line-height: 1.5rem;
		vertical-align: top;
	}
	button,
	select {
		text-transform: none;
	}
	button,
	[type="button"],
	[type="reset"],
	[type="submit"] {
		-webkit-appearance: button;
	}
	[type="checkbox"],
	[type="radio"] {
		box-sizing: border-box;
		padding: 0;
	}
	article {
		padding: 1rem;
	}
	article > .headline {
		text-align: center;
	}
	.assignment-area:has(> .headline) {
		background-color: var(--background-color-5);
		color: #fff;
	}
	.assignment-area .assignment-details {
		column-gap: .5rem;
		display: grid;
		grid-template-columns: auto auto;
		grid-template-rows: auto;
		margin: 0 1rem;
	}
	.button {
		border-radius: .5rem;
		color: #fff;
		min-width: 7rem;
	}
	.headline {
		display: block;
		font-size: 1.5rem;
		font-weight: bold;
		line-height: 2rem;
		margin: 1rem;
	}

	.grid-area > *:nth-child(1) {
		grid-area: one;
	}
	.grid-area > *:nth-child(2) {
		grid-area: two;
	}
	.grid-area > *:nth-child(3) {
		grid-area: three;
	}
	.grid-area > *:nth-child(4) {
		grid-area: four;
	}
	.grid-area > *:nth-child(5) {
		grid-area: five;
	}
	.grid-area > *:nth-child(6) {
		grid-area: six;
	}
	.grid-area > *:nth-child(7) {
		grid-area: seven;
	}
	.grid-area > *:nth-child(8) {
		grid-area: eight;
	}
	.grid-area > *:nth-child(9) {
		grid-area: nine;
	}
	.grid-area > *:nth-child(10) {
		grid-area: ten;
	}
	.grid-area > *:nth-child(11) {
		grid-area: eleven;
	}
	.grid-area > *:nth-child(12) {
		grid-area: twelve;
	}

	.line {
		display: block;
	}

	.button-section {
		align-items: baseline;
		box-sizing: border-box;
		display: flex;
		flex-flow: row wrap;
		order: 0;
		padding: .5rem 1rem 1rem 1rem;
		width: 100%;
	}
	.button-section.dev {
		align-items: center;
	}
	.button-section > .button {
		font-size: 1.5rem;
		line-height: 2rem;
		margin: 1rem 0 0 .5rem;
		padding: .25rem;
	}
	.button-section > .button.static-button {
		border-radius: unset;
		margin: .5rem 0 0 0;
		padding: .5rem;
		width: auto;
	}
	.button-section > .button.static-button:nth-child(2) {
		margin-left: auto;
	}
	.button {
		background-color: var(--accent-color-3);
		color: #fff;
	}
	.button.static-button {
		background-color: var(--accent-color-2);
		color: #fff;
	}
	.button:hover {
		background-color: color-mix(in srgb, var(--accent-color-3) 70%, white);
		color: #fff;
	}
	.button.static-button:hover {
		background-color: color-mix(in srgb, var(--accent-color-2) 70%, white);
		color: #fff;
	}
	.outline-button {
		color: var(--accent-color-3);
	}

	.tile-like-boxes .tile-like-box.course-extension .buttons .button {
		background-color: #8f7ad3;
	}
	.tile-like-boxes .tile-like-box.course-extension .buttons .button:hover {
		background-color: color-mix(in srgb, var(--accent-color-2) 70%, white);
		color: #fff;
	}

	header {
		align-items: center;
		box-sizing: border-box;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		margin: 0;
		padding: 0;
	}

	.page-headline-section {
		box-sizing: border-box;
		justify-self: start;
		margin: 0;
		order: 1;
		width: max-content;
	}

	.page-headline-section .page-headlines {
		color: #fff;
		margin: 2rem 1rem;
		max-width: 50rem;
		padding: 1rem;
	}
	.page-headline-section .page-headlines > .headline {
		font-size: 2rem;
		line-height: 2.5rem;
		font-weight: bold;
		margin: 0;
	}
	.page-headline-section .page-headlines > .subheadline {
		font-size: 1.25rem;
		line-height: 1.75rem;
		font-weight: 500;
		margin: .5rem 0 0 0;
	}

	.visitor-name-section {
		background-color: #000;
		color: #fff;
		margin: 0 3rem 1rem auto;
		order: 2;
	}
	.visitor-name {
		margin: .5rem 1rem;
	}
	.visitor-name :first-child {
		font-weight: bold;
	}

	.page-headline-section .page-headlines {
		background-color: var(--accent-color-1);
	}

	.home .why-area {
		color: #fff;
		background-color: #204;
	}
	.home .why-area .tile-like-boxes .tile-like-box .headline {
		text-align: center;
	}
	.home .product-area {
		color: #fff;
		background-color: #009;
		background-color: #1da2ff;
	}
	.products.airport .product-area {
		background-color: #330;
		border: 1px solid #514e19;
		color: #fff;
	}
	.products.gds .product-area {
		background-color: rgb(30, 130, 225);
		color: #fff;
	}
	.home .footer-line {
		background-color: var(--background-color-5);
		color: #fff;
		display: block;
		text-align: center;
		font-weight: bold;
		margin: 1rem auto;
		padding: .75rem;
		width: max-content;
	}
	.resources-area {
		background-color: #903cec;
		background-image: url("https://d2v7ueas9lh564.cloudfront.net/webmedia/background4.jpg");
		background-repeat: no-repeat;
		box-sizing: border-box;
		color: #fff;
		width: 100%;
	}
	.resources-area > .items {
		align-items: flex-start;
		box-sizing: border-box;
		color: #fff;
		display: flex;
		justify-content: space-evenly;
		width: 100%;
	}
	.resources-area > .items > .item {
		margin: 1rem .5rem;
		flex: 1 1 auto;
		max-width: 35rem;
	}
	.resources-area > .items > .item > p {
		text-align: left;
		background-color: rgb(40, 140, 220);
		padding: 1rem;
	}
	.resources-area > .items > .item > h2 {
		font-weight: bold;
		text-align: center;
		padding: 0;
		margin: 0 0 1rem 0;
	}
	.resources-area img.movie-preview {
		min-width: 8rem;
		max-width: 100%;
	}
	.resources-area a { 
		color: #fff;
	}

	.news-teaser-area > .item {
		margin-top: 1rem;
	}
	.news-teaser-area > .item > p {
		margin-top: .5rem;
	}
	.news-teaser-area > .item > :first-child {
		font-weight: bold;
	}

	.article-area {
		background-color: #fff;
		box-sizing: border-box;
		color: #000;
		min-height: 20rem;
	}
	.article-area > .headline {
		font-size: 2rem;
		line-height: 2.5rem;
		font-weight: bold;
		margin: 1rem 2rem 0 2rem;
	}
	.article-area > article {
		align-items: flex-start;
		box-sizing: border-box;
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
	}
	.article-area > article > .headline {
		font-size: 1.5rem;
		line-height: 2rem;
		font-weight: bold;
		margin: 1rem;
		width: 100%;
	}
	.article-area > article.no-flex {
		display: block;
	}
	.article-area > article > section {
		margin: 1rem;
	}
	.article-area > article > .headline + section {
		margin-top: 0;
	}
	.article-area > article > section.item {
		align-items: flex-start;
		display: flex;
		flex-flow: row wrap;
		flex: 0 1 35rem;
		justify-content: flex-start;
		margin: 1rem;
	}
	.article-area > article > section.item.no-flex {
		flex: 0 0 auto;
	}
	.article-area > article > section.item > img,
	.article-area > article > section.item > a > img {
		margin: 2rem;
	}
	.article-area > article > section.item > img ~ div,
	.article-area > article > section.item > a ~ div {
		flex: 0 0 calc(100% - 12rem);
		margin: 1rem 0;
	}
	.article-area > article > section.item .headline {
		font-size: 1.5rem;
		line-height: 2rem;
		font-weight: bold;
		margin: 1rem 0;
		width: 100%;
	}
	.article-area > article > section.item p {
		margin: 1rem 0;
	}
	.article-area .viasinc-logo {
		width: 6rem;
	}
	.home .article-area > article {
		border-bottom: thin solid rgb(40, 40, 120);
	}
	.company .article-area > article {
		border-bottom: thin solid rgb(100, 0, 100);
	}
	.products .article-area > article {
		border-bottom: thin solid rgb(80, 0, 80);
	}
	.resources .article-area > article {
		border-bottom: thin solid rgb(130, 160, 160);
	}
	.article-area > article:last-child {
		border-bottom: none;
	}
	.home .article-area .item > .headline {
		color: rgb(40, 40, 120);
	}
	.products .article-area .item > .headline {
		color: rgb(80, 0, 80);
	}
	.resources .article-area .item > .headline {
		color: rgb(130, 160, 160);
	}

	.footer-area {
		align-items: flex-start;
		background-color: var(--background-color-6);
		border: 1px solid #003;
		box-sizing: border-box;
		color: #fff;
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
	}
	.footer-area .viasinc-logo {
		margin: .5rem 0;
		width: 6rem;
	}
	.footer-area a { 
		color: #fff;
		display: block;
		margin: .5rem 0;
	}
	.footer-area .headline {
		margin: 1rem 0;
	}
	.footer-area > .item {
		border: none;
		width: 20rem;
		margin: 1rem;
	}

	.products .fab {
		border-top: thin dotted rgb(80, 0, 80);
		border-left: thin dotted rgb(80, 0, 80);
		display: table
	}
	.products .fab > * {
		display: table-row;
	}
	.products .fab > * > * {
		border-right: thin dotted rgb(80, 0, 80);
		border-bottom: thin dotted rgb(80, 0, 80);
		display: table-cell;
		padding: .5rem;
	}
	.products .fab > :nth-child(1) > :nth-child(1), .products .fab > :nth-child(1) > :nth-child(2) {
		font-weight: bold;
		color: rgb(80, 0, 80);
	}

	table.data { margin: 1rem 0; }
	table.data td { border: thin dotted #562f72; padding: .3rem 1rem; color: #000; }
	table.data th { border: thin dotted #562f72; padding: .3rem 1rem; text-align: left; color: #000; }
	table.signature { margin-bottom: 1rem; }
	table.signature th { text-align: left; padding: .5rem 0 1.5rem 0; }
	table.signature th:first-child { padding-right: 1rem; }
	table.signature td { text-align: left; padding: 1rem 0; }
	table.signature td:first-child { padding-right: 1rem; }

	.dialog-area .dialog-box {
		align-content: flex-start;
		align-items: stretch;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}
	.dialog-area .dialog-box > .title {
		flex: 0 0 auto;
	}
	.dialog-area .dialog-box > .middle {
		overflow-x: hidden;
		overflow-y: auto;
		padding-right: 1rem;
	}

	.dialog-area > .dialog-box .buttons .button {
		background-color: var(--accent-color-3);
		color: #fff;
	}
	.dialog-box .title {
		background-color: var(--accent-color-3);
		color: #fff;
	}
	.dialog-box {
		background-color: var(--background-color-1);
		border: thin solid var(--accent-color-3);
	}

	.dialog-area .dialog-box.login-form {
		max-width: 40rem;
	}
	.dialog-area .dialog-box.login-form a {
		display: inline;
	}
	.dialog-area .dialog-box.order-pay-form {
		max-width: 60rem;
	}
	.dialog-area .dialog-box.order .order-items {
		display: grid;
		column-gap: 1rem;
		grid-template-columns: auto auto auto auto auto;
		margin: 1rem;
		row-gap: .5rem;

	}
	.dialog-area .dialog-box.order .order-items .header {
		font-weight: bold;
	}
	.dialog-area .dialog-box.order .order-items .button-holder {
		align-content: center;
		align-items: center;
		display: flex;
		flex-flow: row;
		justify-content: flex-start;
		width: 4rem;
	}
	.dialog-area .dialog-box.order .order-items .button-holder .button {
		align-content: center;
		align-items: center;
		display: flex;
		height: 1.5rem;
		justify-content: center;
		min-width: 1.5rem;
		width: 1.5rem;
	}
	.dialog-area .dialog-box.order .order-items .button-holder .button:first-child {
		margin-right: .5rem;
	}
	.dialog-area .dialog-box.order .status {
		margin: 0 1rem;
	}

	.dialog-area .dialog-box.order-list .order-list {
		display: grid;
		column-gap: 1rem;
		grid-template-columns: auto auto auto auto auto auto;
		margin: 1rem;
	}
	.dialog-area .dialog-box.order-list .order-list .header {
		font-weight: bold;
	}
	.dialog-area .dialog-box.order-list .order-list .actions {
		display: flex;
		flex-flow: row nowrap;
	}
	.dialog-area .dialog-box.order-list .order-list .actions > * {
		margin-right: .75rem;
	}

	body.company article img {
		width: 128px;
	}
}