@layer viasinc-common {
	html {
		-webkit-text-size-adjust: 100%;
		font-family: ui-sans-serif, sans-serif;
		height: 100%;
		line-height: 1.25rem;
		margin: 0;
		overflow: auto;
		padding: 0;
		width: 100%;
	}
	body {
		background-color: var(--background-color-1);
		color: var(--foreground-color-1);
		font-size: 1rem;
		margin: 0;
		min-height: 100%;
		overflow: hidden;
		padding: 0;
		width: 100%;
	}
	* {
		border-color: var(--border-color-1);
		border-style: none;
		border-width: .1rem;
	}

	a {
		background-color: inherit;
		color: inherit;
		cursor: pointer;
		/* display: inline-block; */
		text-decoration: underline var(--accent-color-3) solid .05rem;
		text-underline-offset: .2rem;
	}
	a:hover {
		text-decoration: underline var(--hover-color-1) solid .05rem;
		text-underline-offset: .2rem;
	}
	[title], [href] {
		cursor: pointer;
	}
	details > summary {
		cursor: pointer;
		user-select: none;
	}
	form {
		margin: 0;
		padding: 0;
		width: 100%;
	}
	form.dialog-box {
		width: auto;
	}
	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
		border-style: solid;
		cursor: pointer;
		display: inline-block;
		height: 1rem;
		width: 1rem;
	}
	input[type="checkbox"]:checked,
	input[type="radio"]:checked {
		background-color: var(--selected-color-2);
	}
	input[type="file"] {
		margin: 0;
	}
	input[type="number"],
	input[type="search"],
	input[type="text"],
	input[type="password"] {
		background-color: var(--background-color-1);
		border-style: solid;
		color: var(--foreground-color-1);
		font-size: 1rem;
	}
	input[placeholder] {
		min-width: 30rem;
	}
	::placeholder {
		color: var(--foreground-color-1);
		font-style: oblique;
		opacity: .9;
	}
	input:disabled {
		opacity: .50;
	}
	label {
		align-items: first baseline;
		cursor: pointer;
		display: inline-block;
		user-select: none;
	}
	label.vertical {
		display: block;
		white-space: nowrap;
	}
	label:has(+ [required])::before {
		color: var(--accent-color-1);
		content: '\02732';
		margin-right: .4rem;
	}
	label + label {
		margin: 0 0 0 .75rem;
	}
	label.vertical {
		margin: 0;
	}
	label.vertical + label {
		margin: .3rem 0 0 0;
	}
	label > sup {
		color: var(--accent-color-2);
		font-weight: bold;
		font-size: 1.5rem;
		line-height: 2rem;
	}
	label > input {
		display: inline;
		vertical-align: middle;
	}
	label > span {
		display: inline;
		vertical-align: middle;
		padding: 0 .4rem;
	}
	label.radio-button {
		background-color: var(--background-color-3);
		color: var(--foreground-color-1);
		display: inline-block;
		margin-left: -0.4rem;
	}
	label.radio-button.vertical {
		display: block;
	}
	label.radio-button:hover {
		background-color: var(--hover-color-1);
	}
	label.radio-button > input {
		display: none;
	}
	label.radio-button > span {
		background-color: transparent;
		display: inline-block;
		text-decoration: none;
	}
	label.radio-button > input:checked + span {
		background-color: var(--selected-color-1);
	}
	p {
		margin: 1rem;
	}
	select {
		background-color: var(--background-color-1);
		border-style: solid;
		color: var(--foreground-color-1);
	}
	select option:checked {
		background-color: var(--selected-color-1);
		color: var(--foreground-color-1);
	}
	table {
		border-style: none;
		border-collapse: collapse;
		margin: 0;
	}
	table td {
		vertical-align: top;
	}
	textarea {
		background-color: var(--background-color-1);
		border-style: solid;
		color: var(--foreground-color-1);
		white-space: pre-wrap;
	}

	:focus {
		outline: .1rem solid var(--focus-color-1);
	}

	.figure {
		text-align: right;
		white-space: nowrap;
	}

	.strong {
		font-weight: bold;
	}

	.course-outline h1 {
		color: var(--foreground-color-1);
		font-size: 1.6rem;
		line-height: 1.8rem;
		margin-bottom: 0;
		text-align: center;
	}
	.course-outline h2 {
		color: var(--foreground-color-2);
		font-size: 1.4rem;
		margin-top: 0;
		text-align: center;
	}
	.course-outline table {
		margin: 1rem;
	}
	.course-outline table td {
		padding: .25rem .5rem;
	}
	.course-outline table td.package {
		font-weight: 600;
		white-space: nowrap;
	}
	.course-outline table td.course {
		font-weight: 600;
		padding-left: 2.5rem;
		white-space: nowrap;
	}
	.course-outline table td.module {
		padding-left: 4.5rem;
		white-space: nowrap;
	}

	.buttons {
		align-content: center;
		align-items: center;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		margin: 1rem;
	}
	.tile-buttons {
		align-items: stretch;
		align-content: flex-start;
		justify-content: flex-start;
	}
	.vertical-buttons {
		align-content: flex-start;
		align-items: flex-start;
		flex-flow: column wrap;
		justify-content: flex-start;
	}
	.button {
		background-color: var(--accent-color-2);
		box-shadow: none;
		box-sizing: border-box;
		color: var(--foreground-color-1);
		cursor: pointer;
		display: inline-block;
		font-weight: normal;
		height: max-content;
		line-height: 1.25rem;
		margin: 0;
		padding: .2rem .4rem;
		text-align: center;
		text-decoration: none;
		text-shadow: none;
		user-select: none;
	}
	.vertical-buttons > .button {
		margin: .25rem 1rem .25rem 1rem;
		width: 12rem;
	}
	.buttons > * + .button {
		margin: 0 0 0 1rem;
	}
	.vertical-buttons > .button + .button {
		margin: 0;
	}
	a.button {
		text-decoration: none;
	}
	.button:active,
	.button:hover {
		background-color: var(--hover-color-1);
		cursor: pointer;
	}
	.button:disabled {
		opacity: .50;
	}

	.text-button {
		background: unset;
		border-radius: unset;
		color: var(--foreground-color-1);
		cursor: pointer;
		margin: .2rem .4rem;
		padding: 0;
		text-align: left;
	}
	.text-button:hover {
		text-decoration: underline var(--hover-color-1) solid .05rem;
		text-underline-offset: .2rem;
	}
	.text-button:first-child {
		margin-top: 0;
	}
	.text-button:last-child {
		margin-right: 0;
	}

	.button.tile-button {
		align-content: flex-start;
		align-items: flex-start;
		background: var(--background-color-1);
		border-radius: unset;
		border-style: solid;
		color: var(--foreground-color-1);
		display: flex;
		flex-flow: column;
		font-size: 1rem;
		justify-content: space-between;
		line-height: 1.25rem;
		margin: 0 1rem 1rem 0;
		padding: 0;
		text-align: left;
		text-decoration: none;
		width: 256px;
	}
	.button.tile-button:hover {
		background-color: var(--background-color-1);
		outline: .2rem solid var(--hover-color-1);
		text-decoration: none;
	}
	.button.tile-button > div {
		margin: 0 .5rem;
	}
	.button.tile-button > div.title {
		font-weight: 600;
		margin-bottom: .5rem;
	}
	.fields {
		align-content: center;
		align-items: center;
		display: grid;
		gap: .8rem;
		grid-template-columns: max-content auto;
	}
	.fields.column {
		grid-template-columns: max-content;
		gap: .5rem;
	}
	.fields > :nth-child(odd) {
		justify-self: end;
	}
	.fields.column > :nth-child(odd) {
		justify-self: start;
	}
	.fields > input[type="checkbox"] {
		justify-self: start;
	}
	.fields > label {
		background-color: var(--background-color-1);
		cursor: default;
	}
	.instructions {
		height: 100%;
		display: grid;
		place-items: center;
	}
	.instructions > * {
		max-width: 67%;
	}
	.readonly {
		background-color: #ddd;
	}
	.panel-area {
		height: 100%;
	}

	.panel-area .primary-panel {
		display: none;
		height: calc(100% - 2rem);
		width: 100%;
	}
	.panel-area .primary-panel > .commands {
		align-content: center;
		align-items: center;
		background-color: var(--background-color-2);
		display: flex;
		flex-flow: row wrap;
		height: 2rem;
		justify-content: flex-start;
	}
	.panel-area .primary-panel > .commands > * {
		display: inline-block;
		margin: 0 1rem;
	}
	.panel-area .primary-panel > .commands > :last-child {
		margin: 0 2rem 0 auto;
	}

	.main-area > :nth-child(1) {
		grid-area: area-1;
	}
	.main-area > :nth-child(2) {
		grid-area: area-2;
	}
	.main-area > :nth-child(3) {
		grid-area: area-3;
	}
	.main-area > :nth-child(4) {
		grid-area: area-4;
	}
	.main-area > :nth-child(5) {
		grid-area: area-5;
	}

	.panel-area .primary-panel > :nth-child(1) {
		grid-area: area-1;
	}
	.panel-area .primary-panel > :nth-child(2) {
		grid-area: area-2;
	}
	.panel-area .primary-panel > :nth-child(3) {
		grid-area: area-3;
	}
	.panel-area .primary-panel > :nth-child(4) {
		grid-area: area-4;
	}
	.panel-area .primary-panel > :nth-child(5) {
		grid-area: area-5;
	}

	.grid-areas > :nth-child(1) {
		grid-area: area-1;
	}
	.grid-areas > :nth-child(2) {
		grid-area: area-2;
	}
	.grid-areas > :nth-child(3) {
		grid-area: area-3;
	}
	.grid-areas > :nth-child(4) {
		grid-area: area-4;
	}
	.grid-areas > :nth-child(5) {
		grid-area: area-5;
	}
	.grid-areas > :nth-child(6) {
		grid-area: area-6;
	}
	.grid-areas > :nth-child(7) {
		grid-area: area-7;
	}
	.grid-areas > :nth-child(8) {
		grid-area: area-8;
	}

	.tile-like-boxes {
		align-items: stretch;
		box-sizing: border-box;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-evenly;
		width: 100%;
	}

	.tile-like-boxes .tile-like-box {
		align-content: center;
		align-items: center;
		background-color: #fff;
		border-radius: 1rem;
		border: 1px solid black;
		color: #000;
		display: flex;
		flex-flow: column;
		flex: 0 1 35rem;
		justify-content: space-around;
		margin: 1rem;
	}

	.tile-like-boxes .tile-like-box .branding {
		color: #000;
		margin: 0 1rem 1rem 1rem;
		font-weight: bold;
	}

	.tile-like-boxes .tile-like-box .description {
		color: #000;
		font-size: 1.25rem;
		font-weight: bold;
		margin: 1rem 3rem;
		text-align: left;
	}

	.tile-like-boxes .tile-like-box .extensions {
		margin: 1rem 4rem;
	}
	.tile-like-boxes .tile-like-box .extensions > * + * {
		margin-top: .5rem;
	}


	.tile-like-boxes .tile-like-box .highlights {
		color: #000;
		margin-bottom: 1rem;
	}

	.tile-like-boxes .tile-like-box .highlights > * {
		color: #000;
		margin: 0 1rem 0 2rem;
		display: list-item;
	}

	.tile-like-boxes .tile-like-box .has-icon {
		display: flex;
		justify-content: start;
		align-items: flex-start;
		margin: 1rem 1rem 0 1rem;
		width: 100%;
	}

	.tile-like-boxes .tile-like-box .icon {
		margin: 1rem;
		min-width: 4rem;
	}

	.tile-like-boxes .tile-like-box .price {
		color: #000;
		font-size: 1.5rem;
		font-weight: bold;
		margin: auto 0 .5rem 0;
	}

	.tile-like-boxes .tile-like-box .headline {
		color: #000;
		font-size: 2rem;
		font-weight: bold;
		margin: 1rem;
	}

	.tile-like-boxes .tile-like-box .subheadline {
		color: #000;
		font-size: 1.25rem;
		font-weight: 500;
		margin: -1rem 1rem 1rem 1rem;
	}

	.tile-like-boxes .tile-like-box .terms {
		color: #000;
		text-align: center;
		width: 100%;
	}

	.tile-like-boxes .tile-like-box p {
		color: #000;
		margin: 1rem;
		text-align: left;
	}

	.gds-emulator input[type="checkbox"], .gds-emulator input[type="radio"] {
		-moz-appearance: auto;
		-webkit-appearance: auto;
		appearance: auto;
		border-style: unset;
		cursor: unset;
		display: unset;
		font-family: ui-sans-serif, sans-serif;
		height: unset;
		width: unset;
	}
	.gds-emulator input[type="checkbox"]:checked, .gds-emulator input[type="radio"]:checked {
		font-family: unset;
		background-color: unset;
	}

	.gds-emulator [href], .gds-emulator [href]:hover {
		text-decoration: none;
	}

	.panel-area .queue-count-panel {
		background-color: var(--background-color-2);
		border-right-style: none;
		height: 100%;
		min-width: 13rem;
		overflow: auto;
		padding: 0 0 0 .5rem;
	}
	.panel-area .queue-count-panel-item:nth-child(even) {
		background-color: var(--background-color-3);
	}
	.panel-area .queue-count-panel-item {
		align-items: center;
		border-bottom-style: none;
		column-gap: .5rem;
		display: grid;
	}
	.panel-area .queue-count-panel-item:last-child {
		margin-bottom: 1rem;
	}
	.panel-area .queue-count-panel-item a[href] {
		text-decoration: none;
	}
	.panel-area .queue-count-panel-item > label {
		display: inline-block;
	}
	.panel-area .queue-count-panel-item > label + label {
		margin: 0;
	}
	.panel-area .queue-count-panel-item > input[type="radio"] {
		display: none;
	}
	.panel-area .queue-count-panel-item > input[type="radio"] ~ .queue-count-panel-sub-item:nth-child(2) {
		background-color: var(--background-color-4);
		color: var(--foreground-color-1);
		display: flex;
		justify-content: flex-end;
		margin: 0;
		width: calc(1rem + 3ch);
	}
	.panel-area .queue-count-panel-item > input[type="radio"]:checked ~ .queue-count-panel-sub-item:nth-child(2) {
		background-color: var(--selected-color-1);
	}
	.panel-area .queue-count-panel-item > input[type="radio"] ~ .queue-count-panel-sub-item:nth-child(2):hover {
		background-color: var(--hover-color-1);
	}

	.panel-area .queue-count-panel-item > input[type="radio"] ~ .queue-count-panel-sub-item:nth-child(3) {
		width: 6ch;
		text-align: right;
	}
	.panel-area .queue-count-panel-item > .queue-count-panel-sub-item:last-child {
		padding-right: .5rem;
	}
	.dialog-area {
		display: grid;
		height: 100%;
		left: 0;
		overflow: hidden;
		place-items: center;
		pointer-events: none;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 110;
	}
	.dialog-area > * {
		pointer-events: auto;
		z-index: 111;
	}
	.dialog-area .dialog-box {
		align-content: flex-start;
		align-items: stretch;
		background-color: var(--background-color-1);
		border-color: var(--accent-color-3);
		border-style: solid;
		box-sizing: border-box;
		color: var(--foreground-color-1);
		display: flex;
		flex-direction: column;
		justify-content: stretch;
		max-height: 98%;
		max-width: 98%;
		overflow: hidden;
	}
	.dialog-area .dialog-box > .title {
		align-items: center;
		background-color: var(--accent-color-2);
		color: var(--foreground-color-1);
		display: flex;
		flex: 0 0 auto;
		font-weight: 600;
		height: 2rem;
		justify-content: space-between;
		padding: 0 1rem;
		text-transform: capitalize;
	}
	.dialog-area .dialog-box > .middle {
		overflow-x: hidden;
		overflow-y: auto;
		margin: 0;
		padding: 1rem 1.5rem;
	}
	.dialog-area .dialog-box > .middle:has(>table:first-child) {
		padding: 0 1.5rem 0 1.5rem;
	}
	.dialog-area .dialog-box > .middle:last-child {
		margin-bottom: 1rem;
	}
	.dialog-area .dialog-box > .buttons {
		flex: 0 0 auto;
		height: 3rem;
		margin: auto 0 0 0;
		padding: 0 1rem;
	}

	.dialog-area .dialog-box.progress-progress .package-title {
		color: var(--foreground-color-2);
		font-size: 1.4rem;
		font-weight: bold;
		margin: 1rem 0 0 0;
	}
	.dialog-area .dialog-box.progress-progress .unit-title {
		color: var(--foreground-color-2);
		font-size: 1.15rem;
		font-weight: bold;
		margin: .4rem 0 .4rem .75rem;
	}
	.dialog-area .dialog-box.progress-progress .progress-item {
		align-content: start;
		align-items: start;
		color: var(--foreground-color-1);
		column-gap: 1rem;
		display: grid;
		grid-template-columns: 1rem 3rem 6rem 5rem auto;
		justify-content: start;
		margin: 0 2rem 0 1.5rem;
	}
	.dialog-area .dialog-box.progress-progress .progress-item .progress-item-circle {
		color: var(--foreground-color-2);
	}
	.dlaog-area .dialog-box.progress-progress .progress-item .progress-item-progress {
		color: var(--foreground-color-2);
	}
	.dlaog-area .dialog-box.progress-progress .progress-item .progress-item-nminutes {
		text-align: right;
		width: 100%;
	}

	.dialog-area .dialog-box label.radio-button + label.radio-button {
		margin: .4rem 0 0 0;
	}

	.dialog-area .dialog-box input[id][type="checkbox"],
	.panel-area input[id][type="checkbox"],
	.dialog-area .dialog-box input[id][type="radio"],
	.panel-area input[id][type="radio"] {
		display: none;
	}

	.dialog-area .dialog-box input[id][type="checkbox"] + label,
	.panel-area input[id][type="checkbox"] + label,
	.dialog-area .dialog-box input[id][type="radio"] + label,
	.panel-area input[id][type="radio"] + label {
		background-color: var(--background-color-3);
		cursor: pointer;
		font-size: 1rem;
		padding: .25rem .5rem;
		margin: 0 .5rem;
	}

	.dialog-area .dialog-box input[id][type="checkbox"] + label:hover,
	.panel-area input[id][type="checkbox"] + label:hover,
	.dialog-area .dialog-box input[id][type="radio"] + label:hover,
	.panel-area input[id][type="radio"] + label:hover {
		background-color: var(--hover-color-1);
	}
	.dialog-area .dialog-box input[id][type="checkbox"]:checked + label,
	.panel-area input[id][type="checkbox"]:checked + label,
	.dialog-area .dialog-box input[id][type="radio"]:checked + label,
	.panel-area input[id][type="radio"]:checked + label {
		background-color: var(--selected-color-1);
		color: var(--foreground-color-1);
		text-decoration: none;
	}
	.dialog-area .dialog-box .button {
		border-radius: .3rem;
		min-width: 8rem;
	}
	.dialog-area .dialog-box .dialog-box-close {
		cursor: pointer;
		font-weight: normal;
		margin-left: 2rem;
		transform: scale(1.5);
		z-index: 145;
	}
	.dialog-area .dialog-box .dialog-box-close:hover {
		color: var(--hover-color-1);
	}
	.dialog-area .dialog-box .buttons .button {
		color: var(--foreground-color-1);
		background-color: var(--accent-color-2);
	}
	.dialog-area .dialog-box .buttons .button:hover {
		background-color: color-mix(in srgb, var(--accent-color-2) 70%, white);
	}

	.dialog-area .dialog-box .buttons .button:disabled {
		opacity: .50;
	}
	.dialog-area.dialog-area-2 {
		z-index: 112;
	}
	.dialog-area.dialog-area-2 .dialog-box {
		z-index: 113;
	}
	.dialog-area.dialog-area-3 {
		z-index: 114;
	}
	.dialog-area.dialog-area-3 .dialog-box {
		z-index: 115;
	}
	.dialog-area.dialog-area-4 {
		z-index: 116;
	}
	.dialog-area.dialog-area-4 .dialog-box {
		z-index: 117;
	}

	.dialog-area.dialog-area-2 .dialog-box .title,
	.dialog-area.dialog-area-2 .dialog-box .buttons .button {
		filter: hue-rotate(15deg);
	}
	.dialog-area.dialog-area-3 .dialog-box .title,
	.dialog-area.dialog-area-3 .dialog-box .buttons .button {
		filter: hue-rotate(30deg);
	}
	.dialog-area.dialog-area-4 .dialog-box .title,
	.dialog-area.dialog-area-4 .dialog-box .buttons .button {
		filter: hue-rotate(45deg);
	}

	.dialog-area .dialog-box .info {
		color: var(--foreground-color-2);
		margin-bottom: 1rem;
	}
	.dialog-area .dialog-box .notice {
		color: var(--foreground-color-2);
		font-weight: bold;
		margin-bottom: 1rem;
	}
	.dialog-area .dialog-box .select-form {
		align-content:		center;
		align-items:		center;
		display:			flex;
		flex-flow: 			row wrap;
		justify-content:	stretch;
	}
	.dialog-area .dialog-box .select-form > :nth-child(1) {
		flex-basis: auto;
		flex-grow: 4;
		margin: 0 1rem .5rem 0;
	}
	.dialog-area .dialog-box .select-form > :nth-child(2) {
		flex-basis: min-content;
		flex-grow: 1;
		margin: 0 0 .5rem auto;
	}
	.dialog-area .dialog-box .select-form > :nth-child(3) {
		flex-basis: 100%;
	}
	.dialog-area .dialog-box.communication-edit-form {
		width: 80vw;
	}
	.dialog-area .dialog-box .dialog-box-find {
		align-content: center;
		align-items: center;
		display: grid;
		gap: 1rem;
		grid-template-columns: 1fr max-content;
		justify-content: stretch;
	}
	.dialog-area .dialog-box .dialog-box-find button {
		max-width: unset;
		min-width: unset;
		width: min-content;
	}
	.dialog-area .dialog-box .click-get-preceding-value {
		opacity: .85;
	}
	.hidden {
		display: none;
	}
}