:root {
	--header-height: 5em;
	--menu-height: 1.6em;
	--left-side-width: 0;
	--invalid-input-color: #d33;
	--warning-input-color: #fa0;
	--header-bg-color: black;
	--menu-bg-color: #eee;
	--usage-bg-color: #eff;
	--usage-border-color: #9dd;
	--error-bg-color: #fee;
	--error-border-color: red;
	--warning-bg-color: #ffa;
	--warning-border-color: #f70;
	--fade-duration: .5s;
	--roll-duration: .5s;
	--odd-row-bg-color: #eee;
	--no-license-fgcolor: #07f;
	--latest-releases-dont-have-it-fgcolor: #070;
	--form-messages-margin: 0;
}

.index0 {
	--compatible-system-bgcolor: hsla(120, 100%, 50%, .5);
}

.index1 {
	--compatible-system-bgcolor: hsla(210, 100%, 50%, .5);
}

.index2 {
	--compatible-system-bgcolor: hsla(270, 100%, 50%, .5);
}

.index3 {
	--compatible-system-bgcolor: hsla(40, 100%, 50%, .5);
}

html {
	font-family: sans-serif;
	padding: 0;
	margin: 0;
	overflow: hidden;
	background: var(--menu-bg-color);
	margin-top: var(--header-height);
}

xhtml, xbody {
	font-family: sans-serif;
	padding: 0;
	margin: 0;
	overflow: hidden;
	background: var(--menu-bg-color);
}

tt {
	font-family: monospace, monospace;
}

tt.email {
	white-space: nowrap;
}

:-moz-ui-invalid,
.ng-pristine.ng-untouched, .ng-invalid {
	box-shadow: none;
}

input:focus {
	outline: none;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	    user-select: none; /* Non-prefixed version, currently
				  supported by Chrome, Opera and Firefox */
}

:not(css-spinner).fade.ng-enter, :not(css-spinner).fade.ng-hide-remove {
	-webkit-animation: fadein var(--fade-duration) both;
	-moz-animation: fadein var(--fade-duration) both;
	-o-animation: fadein var(--fade-duration) both;
	animation: fadein var(--fade-duration) both;
}

:not(css-spinner).fade.ng-leave, :not(css-spinner).fade.ng-hide-add {
	-webkit-animation: fadeout var(--fade-duration) both;
	-moz-animation: fadeout var(--fade-duration) both;
	-o-animation: fadeout var(--fade-duration) both;
	animation: fadeout var(--fade-duration) both;
}

.fade.later {
	animation-delay: var(--fade-duration) !important;
}

.fade.later-in.ng-enter, .fade.later-in.ng-hide-remove {
	animation-delay: var(--fade-duration) !important;
}

css-spinner.ng-hide-add-active, css-spinner.ng-hide-remove-active {
	position: absolute;
}

css-spinner.fade {
	animation: fadein var(--fade-duration);
}

css-spinner.fade.ng-hide {
	animation: fadeout var(--fade-duration);
}

@keyframes fadein {
	from { opacity: 0 }
	to { opacity: 1 }
}

@keyframes fadeout {
	to { opacity: 0 }
}

green-top-link {
	display: block;
	margin-top: 1ex;
	margin-left: auto;
	margin-right: auto;
	border: 1pt solid gray;
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	border-radius: 1em;
	background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="12" width="14"><path d="M 2 10 l 5 -5 l 5 5 m 0 -8 l -10 0" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="gray" stroke-width="2"/></svg>') center center no-repeat white;
	box-shadow: 1.5pt 1.5pt 5pt rgba(0, 0, 0, .3);
	cursor: pointer;
}

#modal-overlay {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2000;
	background-color: rgba(0, 0, 0, .25);
}

.dialog {
	font-size: small;
	text-align: justify;
	background: white;
	width: 30em;
	padding: 3em;
	text-align: center;
}

#modal-overlay .dialog {
	box-shadow: 1.5pt 1.5pt 8pt rgba(0, 0, 0, .25);
	margin-top: auto;
}

#modal-overlay div[tabindex="0"] {
	margin-bottom: auto;
}

.dialog .dialog-actions {
	margin-top: 2em;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

.dialog .dialog-actions>button:first-of-type:last-of-type {
	margin-left: auto;
	margin-right: auto;
}

body>.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: var(--header-height);
	line-height: var(--header-height);
	background: var(--header-bg-color);
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body>.header::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -10pt;
	right: -10pt;
	box-shadow: 1.5pt 1.5pt 8pt rgba(0, 0, 0, .4);
	z-index: -2;
}

body>.header .title {
	display: inline;
	position: relative;
	font-size: larger;
	font-weight: bold;
	color: white;
	text-shadow: 1pt 1pt 10pt white;
	cursor: pointer;
}

body>.header .title .logo {
	background: url(/images/logo.svg);
	width: 4rem;
	height: 4rem;
	margin-left: 1rem;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: -.4em;
}

body>.header>.login {
	color: white;
	position: absolute;
	top: calc(50% - 1em);
	right: 1em;
	height: 2em;
	line-height: 2em;
	font-family: sans-serif;
	cursor: pointer;
}

body>.header>.login::before {
	content: "";
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	background: url(/images/login.svg) center / contain no-repeat;
	width: 1.5em;
	height: 1.5em;
	padding: 0 1ex;
	font-weight: normal
}

body>.header>.gcls-version {
	position: absolute;
	bottom: 0;
	right: 0;
	color: lightgray;
	font-size: 60%;
	height: 2em;
	line-height: 2em;
	padding-right: 1ex;
}
body>.header>.gcls-version:not(:empty)::before {
	content: "Version:\a0";
}
.menu {
	width: 100%;
	height: calc(var(--menu-height) + 5pt);
	position: fixed;
	top: var(--header-height);
	display: flex;
	flex-flow: row nowrap;
	box-sizing: border-box;
	overflow: hidden;
}

.menu::before {
	content: "";
	position: absolute;
	top: 100%;
	left: -10pt;
	right: -10pt;
	bottom: -10pt;
	box-shadow: 1.5pt 1.5pt 8pt rgba(0, 0, 0, .4);
}

.menu>button {
	height: calc(var(--menu-height) + 1ex);
	border: none;
	border-top-left-radius: 5pt;
	border-top-right-radius: 5pt;
	margin: 0 2pt;
	background: lightgray;
	color: black;
	position: relative;
	align-self: flex-end;
	line-height: calc(var(--menu-height));
	text-shadow: .5pt .5pt 2pt rgba(0, 0, 0, .4);
	z-index: -1;
	padding: 0 1ex;
	cursor: pointer;
}
.menu>button::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: 1.5pt 1.5pt 8pt rgba(0, 0, 0, .4);
	border-radius: inherit;
	z-index: -4;
}

.menu>button.systems {
	padding-left: calc(var(--menu-height) + 1ex);
	background: lightgray url(/images/systems-black.svg) .5ex .5ex / var(--menu-height) no-repeat;
}
.menu>button.account {
	padding-left: calc(var(--menu-height) + 1ex);
	background: lightgray url(/images/login-black.svg) .5ex .5ex / var(--menu-height) no-repeat;
}
.menu>button.accounts {
	padding-left: calc(var(--menu-height) + 1.2ex);
	background: lightgray url(/images/accounts-black.svg) .7ex .5ex / var(--menu-height) no-repeat;
}

.menu>button.releases {
	padding-left: calc(var(--menu-height) + 1.2ex);
	background: lightgray url(/images/releases-black.svg) .7ex .5ex / var(--menu-height) no-repeat;
}

.menu>button.logout {
	padding-left: calc(var(--menu-height) + 1ex);
	background: lightgray url(/images/logout-black.svg) .5ex .5ex / var(--menu-height) no-repeat;
	margin-left: auto;
}
.menu>button.contact {
	padding-left: calc(var(--menu-height) + 1ex);
	background: lightgray url(/images/contact-black.svg) .5ex .5ex / var(--menu-height) no-repeat;
}
.menu>button.selected {
	background-color: white;
	color: black;
	z-index: 1;
}

.menu>button:focus {
	outline: none;
}
.menu>button::-moz-focus-inner {
	border: none;
}

h1 {
	font-size: x-large;
}

body {
	margin: 0;
	margin-top: calc(var(--menu-height) + 5pt);
	height: calc(100vh - var(--header-height) - var(--menu-height) - 5pt);
	overflow: auto;
	background: white;
}

body.no-menu {
	margin-top: 0;
	height: calc(100vh - var(--header-height));
}

#content {
	color: black;
	display: block;
	position: relative;
	box-sizing: border-box;
	vertical-align: top;
	padding: 1em 2em;
}

#content:focus {
	outline: none;
}

#content .quicklinks {
	display: block;
	font-size: small;
	margin-bottom: 1em;
}

#content p {
	width: 40rem;
}

#content>:last-child {
	margin-bottom: 1rem;
}

#content>.usage,
#content>.warning,
#content>.error {
	font-size: 75%;
	padding: 1em;
	border: 2pt dashed;
	width: 40rem;
	margin-bottom: 2em;
	box-sizing: border-box;
}

#content>.usage p,
#content>.warning p,
#content>.error p {
	width: 100%;
}

#content>.usage {
	border-color: var(--usage-border-color);
	background-color: var(--usage-bg-color);
}

#content>.warning {
	font-weight: bold;
	color: var(--warning-border-color);
	border-color: var(--warning-border-color);
	background-color: var(--warning-bg-color);
}

#content>.error {
	color: var(--error-border-color);
	border-color: var(--error-border-color);
	background-color: var(--error-bg-color);
}

#content>.usage.rolled-remove {
	animation: roll-usage-down var(--roll-duration) both;
}

#content>.usage.rolled-add {
	animation: roll-usage-up var(--roll-duration) both;
}

@keyframes roll-usage-down {
	from { height: var(--rolled-height) }
	50%, to { height: var(--unrolled-height) }
}
@keyframes roll-usage-up {
	from, 50% { height: var(--unrolled-height) }
	to { height: var(--rolled-height) }
}

#content>.usage>p:last-of-type {
	margin-bottom: 0;
}

#content>.usage.rolled:not(.rolled-add) *:not(h3) {
	display: none;
}

#content>.usage.rolled-remove h3 {
	animation: roll-usage-title-in var(--roll-duration) both;
}

#content>.usage.rolled-add h3 {
	animation: roll-usage-title-out var(--roll-duration) both;
}

@keyframes roll-usage-title-in {
	from { color: var(--usage-border-color) }
	to { color: black }
}
@keyframes roll-usage-title-out {
	from { color: black }
	to { color: var(--usage-border-color) }
}

#content>.usage.rolled-remove *:not(h3) {
	animation: roll-usage-fade-in var(--roll-duration) both;
}

#content>.usage.rolled-add *:not(h3) {
	animation: roll-usage-fade-out var(--roll-duration) both;
}

@keyframes roll-usage-fade-in {
	from, 50% { opacity: 0 }
	to { opacity: 1 }
}
@keyframes roll-usage-fade-out {
	from { opacity: 1 }
	50%, to { opacity: 0 }
}

#content>.usage>h3 {
	width: 100%;
	padding: 1em;
	margin: -1em;
	position: relative;
	cursor: pointer;
	user-select: none;
}

#content>.usage.rolled:not(.rolled-add)>h3 {
	color: var(--usage-border-color);
}

#content>.usage>h3::before,
#content>.usage>h3::after {
	content: "show";
	position: absolute;
	right: 1em;
	font-weight: normal;
	color: var(--usage-border-color);
	opacity: 1;
}

#content>.usage>h3::before {
	content: "hide";
}

#content>.usage.rolled>h3::before,
#content>.usage:not(.rolled):not(.rolled-remove)>h3::after {
	opacity: 0;
}

#content>.usage.rolled-add>h3::before {
	animation: cross-zero-fade-out var(--roll-duration) both;
}
#content>.usage.rolled-add>h3::after {
	animation: cross-zero-fade-in var(--roll-duration) both;
}
#content>.usage.rolled-remove>h3::before {
	animation: cross-zero-fade-in var(--roll-duration) both;
}
#content>.usage.rolled-remove>h3::after {
	animation: cross-zero-fade-out var(--roll-duration) both;
}

@keyframes cross-zero-fade-in {
	from, 50% { opacity: 0; }
	to { opacity: 1; }
}
@keyframes cross-zero-fade-out {
	from { opacity: 1; }
	50%, to { opacity: 0; }
}

#content>.usage.rolled-remove,
#content>.usage.rolled-remove>h3,
#content>.usage.rolled-remove>h3::before,
#content>.usage.rolled-remove>h3::after,
#content>.usage.rolled-remove>:not(h3) {
	animation-timing-function: linear;
	animation-delay: calc(-1 * var(--rolleddown-ratio) * var(--roll-duration));
}

#content>.usage.rolled-add,
#content>.usage.rolled-add>h3,
#content>.usage.rolled-add>h3::before,
#content>.usage.rolled-add>h3::after,
#content>.usage.rolled-add>:not(h3) {
	animation-timing-function: linear;
	animation-delay: calc(-1 * (1 - var(--rolleddown-ratio)) * var(--roll-duration));
}

#content>p.forgot {
	width: auto;
}

#content>.usage tt.url {
	display: block;
	margin: 1em 2em;
	white-space: pre-wrap;
}

#content>.login-page css-spinner {
	width: 1.5em;
	height: 1.5em;
}

#content>.usage pre {
	font-family: monospace, monospace;
	margin-left: 2em;
	white-space: pre-wrap;
}

#content>.usage tt.url em,
#content>.usage pre em {
	font-weight: bold;
}

.login-page {
	display: flex;
	flex-flow: column nowrap;
	position: relative;
	width: max-content;
	margin-top: 2em;
	margin-left: auto;
	margin-right: auto;
	align-items: flex-end;
}

.login-page.forgot {
	margin-top: 0;
}

.login-page>.or {
	display: block;
	align-self: stretch;
	text-align: center;
	font-size: larger;
	color: gray;
	position: relative;
	margin: 1ex 0;
}
.login-page>.or::before {
	content: "";
	position: absolute;
	border-top: 2pt solid lightgray;
	top: 50%;
	left: 0;
	right: calc(50% + 1em);
	bottom: 0;
}
.login-page>.or::after {
	content: "";
	position: absolute;
	border-top: 2pt solid lightgray;
	top: 50%;
	left: calc(50% + 1em);
	right: 0;
	bottom: 0;
}

p.forgot {
	text-align: center;
}

.login-page.forgot>.actions {
	align-self: stretch;
	margin-top: 2em;
	justify-content: space-around;
	align-items: baseline;
	position: relative;
}

.login-page.forgot>.actions>button {
	flex-basis: 100%;
	max-width: 12em;
}

#content>.info {
	display: flex;
	flex-flow: column nowrap;
	margin-top: 1em;
	width: max-content;
	margin-left: auto;
	margin-right: auto;
}
#content>.info>p {
	width: auto;
	text-align: center;
	max-width: 40em;
}
#content>.info>p>span.expires-on {
	white-space: nowrap;
}

#content>.info>button {
	margin-top: 1em;
	align-self: center;
}
#content>.info>.actions {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	width: 40em;
}

#content .activation-link {
	display: flex;
	width: 40em;
	flex-flow: column nowrap;
	align-items: baseline;
	border: 1pt solid lightgray;
	padding: 1ex;
	padding-top: 1em;
	position: relative;
}

#content .activation-link::after {
	content: "Activation Link";
	color: gray;
	position: absolute;
	background: white;
	padding: 0 1ex;
	top: 0;
	left: 0;
	transform: translate(1em, -50%);

}

#content .activation-link>span {
	width: 100%;
	box-sizing: border-box;
	align-self: center;
	display: flex;
	flex-flow: row nowrap;
	align-items: baseline;
}
#content .activation-link>span>input {
	flex-grow: 1;
}
#content .activation-link>span>button {
	margin-left: 1ex;
}

.login-page>span {
	display: inline-flex;
	flex-flow: row nowrap;
	align-items: baseline;
}

.login-page>span>label {
	display: inline-block;
	text-align: right;
	flex-grow: 1;
	margin-right: 1ex;
}
.login-page>span>input {
	display: block;
	width: 10rem;
}

.login-page>.actions {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	margin-top: 1ex;
}

.login-page>.actions>css-spinner {
	width: 1.5em;
	height: 1.5em;
	margin-right: 1em;
}

.login-page>.actions>.forgot {
	font-size: x-small;
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-start;
	margin-right: 1ex;
	width: 9em;
	text-align: right;
	margin-top: auto;
	margin-bottom: auto;
}

.login-page>.error {
	font-size: small;
	text-align: right;
	margin-top: 1em;
	color: red;
	position: absolute;
	top: -3em;
	right: 0;
}
.login-page>.error>span {
	white-space: nowrap;
}
.login-page>.remember-me {
	font-size: small;
	display: flex;
	flex-flow: row nowrap;
	align-self: flex-end;
}
.login-page>.remember-me>span {
	width: 10rem;
	align-self: flex-end;
}
.login-page>.remember-me>span>label {
	white-space: nowrap;
}
.login-page>.remember-me>span>input {
	padding-left: 0;
	margin-left: 0;
	position: relative;
	top: .3ex;
}

#content css-spinner {
	display: block;
	width: 2em;
	height: 2em;
}

#content>.account {
	display: block;
	font-size: initial;
	width: 40em;
}

#content>.account span>label {
	display: inline-block;
	text-align: right;
	width: 10em;
	margin-right: 1ex;
	white-space: nowrap;
	flex-shrink: 0;
}

.login-page>span>input,
#content>.account input:not([type="checkbox"]),
#content>.account select,
#content>.blank-container input,
#content .activation-link input:not([type="checkbox"]) {
	border: 1pt solid lightgray;
	height: 2em;
	padding: 0 1ex;
	margin-top: .5ex;
	font-size: inherit;
	font-family: inherit;
	box-sizing: border-box;
	position: relative;
}
#content>.account span>select {
	height: 2em;
}

#content>.account input[readonly],
#content .activation-link input[readonly] {
	color: #555;
}

div.green-suggestions-input-wrapper {
	position: relative;
}

div.green-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	display: inline-block;
	border: 1pt solid lightgray;
	background-color: white;
	z-index: 1;
	box-sizing: border-box;
}
div.green-suggestions::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: 1.5pt 1.5pt 8pt rgb(0, 0, 0, .4);
	z-index: -1;
}
div.green-suggestions-content {
	overflow-y: scroll;
	overflow-x: hidden;
	max-height: 9em;
}
div.green-suggestion {
	white-space: nowrap;
	line-height: 1.5em;
	padding: 0 1ex;
	cursor: pointer;
}

div.green-suggestion.highlighted {
	background-color: lightgray;
}

.input-parameters .system-actions input.ng-invalid-free,
.input-parameters .system-actions input.ng-invalid.ng-touched,
request-input>textarea.ng-invalid-proper-request,
request-input>textarea.ng-invalid-probable-request,
#content textarea.ng-invalid.ng-touched,
#content>.blank-container span>div.green-suggestions-input-wrapper>input.ng-invalid.ng-touched,
#content>.login-page.forgot span>input.ng-invalid-unknown.ng-touched,
#content>.account span>div.green-suggestions-input-wrapper>input.ng-invalid.ng-touched,
#content>.account span>div.green-suggestions-input-wrapper>input.ng-invalid-free,
#content>.account span>div.green-suggestions-input-wrapper>input.ng-invalid-pattern,
#content>.account span>.ng-invalid.ng-touched,
#content>.account span>[name="login"].ng-invalid,
#content>.account span>[name="login"].ng-invalid-pattern,
#content>.account span>[name="organization"].ng-invalid,
#content>.account span>[name="password"].ng-invalid.ng-touched,
#content>.account span>[name="new-password"].ng-invalid.ng-touched,
#content>.account span>[name="new-password2"].ng-invalid.ng-touched,
#content>.account span>[name="password"].ng-invalid-pattern,
#content>.account span>[name="new-password"].ng-invalid-pattern,
#content>.account span>[name="new-password2"].ng-invalid-pattern,
#content>.account span>[name="password"].ng-invalid-minlength,
#content>.account span>[name="new-password"].ng-invalid-minlength,
#content>.account span>[name="new-password2"].ng-invalid-minlength,
#content>.account span>[name="email"].ng-invalid.ng-touched {
	border: 1pt solid var(--invalid-input-color);
	box-shadow: 0 0 5pt inset var(--invalid-input-color) !important;
}

.input-parameters .system-actions input.ng-invalid-free:not(.ng-invalid-required) {
	border-color: var(--warning-input-color);
	box-shadow: 0 0 5pt inset var(--warning-input-color) !important;
}
.input-parameters .system-actions [ng-message-exp].form-message-free {
	color: var(--warning-input-color) !important;
	position: relative;
}

#content>.account span>div.autocomplete {
	display: inline;
}

#content>.account span>input[name="login"],
#content>.account span>div>input[name="login"],
#content>.account span>input[name="organization"],
#content>.account span>div>input[name="organization"] {
	width: 15em;
}

#content>.account label:not(:first-of-type) {
	width: auto;
	margin-left: 1em;
}

#content>.account>div {
	position: relative;
	border: 1pt solid lightgray;
	width: 100%;
	margin-top: 1em;
	padding: 1em 1ex;
	padding-bottom: 1ex;
	display: flex;
	flex-flow: column;
	box-sizing: border-box;
}
#content>.account>div::before {
	position: absolute;
	top: 0;
	left: 1em;
	transform: translateY(-50%);
	background: white;
	padding: 0 1ex;
	color: gray;
}

#content>.account>span,
#content>.account>div>span {
	display: flex;
	flex-flow: row nowrap;
	align-items: baseline;
	position: relative;
}

#content>.account>div>.actions {
	margin-top: 1ex;
}

#content>.account>div>.actions>button.reset {
	margin-right: 0;
}

#content>.blank-container span>div.green-suggestions-input-wrapper>input,
#content>.login-page.forgot span>input,
#content>.account>span>div.green-suggestions-input-wrapper>input,
#content>.account>span>input,
#content>.account>div>span>input {
	background-color: transparent;
}

#content>.account>div>span>select {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	position: relative;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='1.2em' width='1em'%3E%3Ctext x='0' y='1.2em' fill='gray'%3E%26%239662;%3C/text%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right top;
	padding-right: 1.5em;
}

#content>.account>div>span>input,
#content>.account>div>span>select {
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 0;
	width: 0;
	box-sizing: border-box;
}
.dialog.serial-edit [ng-message-exp],
#content [ng-message-exp] {
	position: absolute;
	line-height: inherit;
	padding: 0pt;
	transform: translateX(calc(-100% - 1em));
	font-size: 80%;
	z-index: 1;
	background: white;
	height: 0;
	line-height: 0;
	overflow: visible;
	box-shadow: 0 0 3pt 6pt white;
	color: var(--invalid-input-color);
	pointer-events: none;
	white-space: nowrap;
	bottom: calc(50% - var(--form-messages-margin));
}
#content textarea + * [ng-message-exp] {
	bottom: 1ex;
}
#content>.account>.password::before{
	content: "Password";
}
#content>.account>.password span:not(:only-of-type)>label {
	width: 13em;
}
#content>.account>.password span>input {
	width: 24em;
}
#content>.account>.contact::before {
	content: "Contact";
}

#content>.account>.contact>p {
	margin-top: 0;
	font-size: small;
}
#content>.account>.contact span>label {
	width: 5em;
}

#content>.account>.contact>.pending {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: baseline;
	margin: 1em 0;
}
#content>.account>.contact>.pending>p {
	width: max-content;
	margin: 0;
	margin-bottom: 1em;
}
#content>.account>.contact>.pending>.actions {
	display: flex;
	flex-flow: row nowrap;
	margin-left: auto;
	align-items: baseline;
}
#content>.account>.contact>.pending>.actions>button {
	position: relative;
}
#content>.account>.contact>.pending>.actions>button>css-spinner {
	position: absolute;
	left: -2.2em;
	top: calc(50% - .6em);
	width: 1.2em;
	height: 1.2em;
	margin: 0;
}

#content>.account>div .notifications {
	margin-top: 1em;
	margin-bottom: 0;
	font-size: small;
}

#content>.account>div .notifications+div {
	font-size: small;
	display: flex;
	flex-flow: column nowrap;
	margin-left: 1em;
}

#content>.account>div .notifications+div>input {
	width: 2em;
	flex-grow: 0;
	min-width: auto;
	align-self: center;
}
#content>.account>div .notifications+div>label {
	flex-grow: 5;
	padding: 0;
	text-align: left;
	font-size: small;
	margin-left: 0;
}

#content>.account>.actions {
	margin-top: 1em;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: auto;
}

#content>.account .note {
	font-size: small;
	width: unset;
	margin: 0;
	margin-bottom: 1em;
	color: gray;
}

#content .actions:not(:last-child) {
	margin-bottom: 1ex;
}

#content .systems,
#content :not(td).licenses,
#content>.accounts,
#content>.releases {
	position: relative;
	border-collapse: collapse;
	font-size: small;
}
#content .systems,
#content :not(td):not(table).licenses,
#content>.accounts,
#content>.releases {
	box-shadow: 1.5pt 1.5pt 8pt rgba(0, 0, 0, .4);
}
#content>.accounts,
#content>.releases {
	margin-bottom: 1em;
}

#content .systems>tbody>tr>th,
#content .licenses>tbody>tr>th,
#content>.accounts>tbody>tr>th,
#content>.releases>tbody>tr>th {
	position: relative;
	cursor: default;
}

#content .systems>tbody>tr>td.last-licensed.no-license {
	font-style: italic;
	font-weight: bold;
	color: var(--no-license-fgcolor);
}

#content>.accounts>tbody>tr>td.login,
#content>.accounts>tbody>tr>td.organization {
	cursor: pointer;
}

tbody>tr>th.sort-key::after {
	position: absolute;
	right: 1ex;
	content: '\0025be';
}
tbody>tr>th.sort-rev::after {
	content: '\0025b4';
}

#content .new-release .notes {
	font-weight: normal;
}

#content .new-release .notes::before {
	content: " ";
}

#content .new-release h4 {
	margin-bottom: .5em;
}

#content .new-release p:first-of-type {
	margin-top: .5em;
}

#content .systems>tbody>tr.title>th .contact-to-upgrade {
	font-weight: initial;
}

#content .systems>tbody>tr.title>th .contact-to-upgrade a {
	color: lightblue;
}

#content .systems>tbody>tr.title>th .contact-to-upgrade a:visited {
	color: lightpink;
}

#content .systems>tbody>tr>td.number {
	text-align: right;
}
#content .systems>tbody>tr>th.serial {
	min-width: 20em;
}
#content .systems>tbody>tr>th.maintenance {
	min-width: 14em;
}
#content .systems>tbody>tr>th.last-licensed {
	min-width: 10em;
}
#content .systems>tbody>tr>th.last-release {
	min-width: 9em;
}
#content .systems>tbody>tr>th.platform {
	width: 7em;
}
#content .systems>tbody>tr>td.platform {
	overflow-x: hidden;
	text-overflow: ellipsis;
	max-width: 7em;
	width: 7em;
	white-space: nowrap;
}
#content .systems>tbody>tr>th.registration {
	min-width: 10em;
}
#content .systems>tbody>tr>th.licenses {
	min-width: 8em;
}
#content .systems>tbody>tr:nth-child(odd),
#content>.accounts>tbody>tr:nth-child(odd),
#content>.releases>tbody>tr:nth-child(odd){
	background: var(--odd-row-bg-color);
}
#content .summary>tbody>tr.header,
#content .systems>tbody>tr.header,
#content>.accounts>tbody>tr.header,
#content>.releases>tbody>tr.header {
	background: black;
	color: white;
}
#content .systems>tbody>tr.header>th,
#content>.accounts>tbody>tr.header>th,
#content>.releases>tbody>tr.header>th {
	padding: 1ex;
	border-left: 1pt solid white;
}

#content .summary>tbody>tr.header>th {
	font-weight: bold;
	text-align: center;
}

#content table>tbody>tr.title {
	background: black !important;
}
#content table>tbody>tr.title:not(.inline) {
	border-bottom: 1pt solid white;
}

#content table>tbody>tr.title>th {
	padding: 1ex;
	border-top: 1pt solid black;
	border-left: 1pt solid black;
	border-right: 1pt solid black;
	background: transparent;
	color: white;
}
#content table>tbody>tr.header>th:last-of-type {
	border-right: 1pt solid black;
}
#content table>tbody>tr.header>th.sortable {
	cursor: pointer;
}

#content .systems>tbody>tr.header>th:first-child,
#content>.accounts>tbody>tr.header>th:first-child,
#content>.releases>tbody>tr.header>th:first-child {
	padding: 1ex;
	border-left: 1pt solid black;
}
#content .systems>tbody>tr.header>th:nth-last-child(0),
#content>.accounts>tbody>tr.header>th:nth-last-child(0),
#content>.releases>tbody>tr.header>th:nth-last-child(0) {
	padding: 1ex;
	border-right: 1pt solid black;
}
#content .systems>tbody>tr:last-of-type,
#content>.accounts>tbody>tr:last-of-type,
#content>.releases>tbody>tr:last-of-type {
	border-bottom: 1pt solid black;
}
#content .systems>tbody>tr>td,
#content>.accounts>tbody>tr>td,
#content>.releases>tbody>tr>td {
	border-left: 1pt solid black;
	line-height: 2em;
	padding: 1ex;
}
#content .systems>tbody,
#content .accounts>tbody,
#content .releases>tbody {
	border-right: 1pt solid black;
}

#content .systems:not(:first-of-type) {
	margin-top: 1em;
}

#content .systems>tbody>tr>td.registration {
	position: relative;
	border-right: 1pt solid black;
}
#content .systems>tbody>tr>td.registration>.error {
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	width: max-content;
	text-align: left;
	margin: 0;
	margin-left: 1em;
	color: red;
	font-weight: bold;
}
#content .systems td.serial {
	font-family: monospace, monospace;
	font-weight: bold;
}

#content .systems tr.compatible td {
	background: var(--compatible-system-bgcolor);
}

#content .systems td.serial.editing {
	padding: 0;
	position: relative;
}
#content .systems td.serial.editing>.green-suggestions-input-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
#content .systems td.serial>.green-suggestions-input-wrapper>input {
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	color: inherit;
	border: none;
	padding: 1ex;
	box-sizing: border-box;
	margin: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 0 10pt inset green;
}
#content .systems td.serial>.green-suggestions-input-wrapper>input.ng-invalid {
	box-shadow: 0 0 10pt inset var(--invalid-input-color);
}
#content .systems td.serial>.green-suggestions-input-wrapper>input.ng-invalid-free {
	box-shadow: 0 0 10pt inset var(--warning-input-color);
}

#content .systems>tbody>tr>td:not(.serial) {
	text-align: center;
}

#content .systems>tbody>tr>td.maintenance.no-maintenance {
	font-style: italic;
}
#content .systems>tbody>tr>td.maintenance.expiring-soon {
	font-weight: bold;
	color: orange;
}
#content .systems>tbody>tr>td.maintenance.expired {
	font-weight: bold;
	color: red;
}

#content>.accounts>tbody>tr>th.login,
#content>.accounts>tbody>tr>td.login {
	min-width: 10em;
}

#content>.accounts>tbody>tr>th.organization,
#content>.accounts>tbody>tr>td.organization {
	min-width: 25em;
}

#content .systems>tbody>tr.registering,
#content .systems>tbody>tr.listing-licenses {
	background: orange;
}

#content .systems .licenses-list>table>tbody>tr.highlighted:not(.highlighted-add),
#content .systems>tbody>tr.highlighted:not(.highlighted-add) {
	outline: 3pt solid orange;
	background-color: yellow !important;
}
#content .systems .licenses-list>table>tbody>tr.highlighted-add,
#content .systems>tbody>tr.highlighted-add {
	animation: highlight-in var(--fade-duration) linear both;
}
#content .systems .licenses-list>table>tbody>tr.highlighted-remove,
#content .systems>tbody>tr.highlighted-remove {
	animation: highlight-out var(--fade-duration) linear both;
}


@keyframes highlight-in {
	from {
		outline: 3pt solid transparent;
	}
	to {
		outline: 3pt solid orange;
		background-color: yellow;
	}
}

@keyframes highlight-out {
	from {
		outline: 3pt solid orange;
		background-color: yellow;
	}
	to {
		outline: 3pt solid transparent;
	}
}

#content .systems>tbody>tr>td>button {
	min-width: 7em;
}
#content .systems>tbody>tr>td.licenses.waiting>button:not(.spinner) {
	display: none;
}
#content .systems>tbody>tr>td.licenses:not(.waiting)>button.spinner {
	display: none;
}

#content .systems>tbody>tr>td.licenses>button.spinner {
	position: relative;
}
#content .systems>tbody>tr>td.licenses>button.spinner::after {
	content: "X";
	color: transparent;
}
#content .systems>tbody>tr>td.licenses>button>css-spinner {
	position: absolute;
	left: calc(50% - .75em);
	top: calc(50% - .75em);
	width: 1.5em;
	height: 1.5em;
}
#content .systems>tbody>tr>td.licenses.waiting>button>css-spinner.ng-animate {
	animation: fadein linear calc(2 * var(--fade-duration)) both;
}

#content>.summary>.summary>tbody>tr.upgradable {
	color: var(--latest-releases-dont-have-it-fgcolor);
	font-weight: bold;
	cursor: pointer;
}

#content>.releases>tbody>tr>th:not(.action) {
	width: 8em;
}

#content>.releases>tbody>tr>td.name,
#content>.releases>tbody>tr>td.platform,
#content>.releases>tbody>tr>td.publish {
	text-align: center;
}

#content>.releases>tbody>tr>td.version-id {
	font-family: monospace, monospace;
}

#content>.blank-container {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	width: max-content;
	height: max-content;
}

#content>.registered-container {
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-start;
	width: max-content;
	height: max-content;
	position: relative;
}

#content>.registered-container .licenses-list {
	border: 1pt solid lightgray;
	position: absolute;
	background: white;
	--beak-basic-offset: 3em;
	--beak-offset: var(--beak-basic-offset);
	--beak-width: 11.707pt;
	--beak-height: 21.01011pt;
	display: block;
	padding: 1ex;
	margin: 0;
	width: 38em;
	height: auto;
	min-height: 3em;
	z-index: 1;
}

#content>.registered-container .licenses-list p {
	width: unset;
}

#content>.registered-container .licenses-list.invisible {
	opacity: 0 !important;
	pointer-events: none !important;
}

#content>.registered-container .licenses-list::before {
	content: "";
	position: absolute;
	display: block;
	top: calc(var(--beak-offset) - .5 * var(--beak-height));
	left: calc(100% - 1pt);
	width: var(--beak-width);
	height: var(--beak-height);
	background: url(/images/beak-right.svg);
	z-index: 3;
}

#content>.registered-container .licenses-list::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: 1.5pt 1.5pt 8pt rgba(0, 0, 0, .4);
	z-index: -1;


}

#content>.registered-container .licenses-list>css-spinner {
	width: 1.5em;
	height: 1.5em;
}
#content>.registered-container .licenses-list>css-spinner:not(:last-child) {
	display: none;
}

#content>.registered-container .licenses-list>.licenses {
	width: 100%;
}

#content>.registered-container .licenses-list>.licenses>tbody>tr:first-of-type {
	background: darkgray;
	border-top: 1pt solid black;
}
#content>.registered-container .licenses-list>.licenses>tbody>tr:last-of-type {
	border-bottom: 1pt solid black;
}
#content>.registered-container .licenses-list>.licenses>tbody>tr:nth-of-type(odd):not(:first-of-type) {
	background: var(--odd-row-bg-color);
}
#content>.registered-container .licenses-list>.licenses>tbody>tr.selected {
	background: orange !important;
}
#content>.registered-container .licenses-list>.licenses>tbody>tr>th {
	line-height: 2em;
	font-size: small;
}

#content>.registered-container .licenses-list>.licenses>tbody>tr>th.release {
	width: auto;
}
#content>.registered-container .licenses-list>.licenses>tbody>tr>th.date {
	width: 10em;
}
#content>.registered-container .licenses-list>.licenses>tbody>tr>th.action {
	width: 8em;
}

#content>.registered-container .licenses-list>.licenses>tbody>tr>td {
	vertical-align: baseline;
	padding: 1ex;
}
#content>.registered-container .licenses-list>.licenses>tbody>tr>td.release {
	white-space: pre;
}
#content>.registered-container .licenses-list>.licenses>tbody>tr>td.release>.releases {
	width: max-content;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}
#content>.registered-container .licenses-list>.licenses>tbody>tr>td.release>.releases> *{
	padding: 0;
	margin: 0;
	line-height: 1.5em;
}
#content>.registered-container .licenses-list>.licenses>tbody>tr>td.release>.releases>.none {
	font-style: italic;
	color: gray;
}

#content>.registered-container .licenses-list>.licenses>tbody>tr>td.date,
#content>.registered-container .licenses-list>.licenses>tbody>tr>td.action {
	text-align: center;
}
#content>.registered-container .licenses-list>.licenses>tbody>tr>td.download>button {
	width: 100%;
}
#content>.registered-container .licenses-list>.licenses>tbody>tr>th,
#content>.registered-container .licenses-list>.licenses>tbody>tr>td {
	border-left: 1pt solid black;
}
#content>.registered-container .licenses-list>.licenses>tbody>tr>th:last-of-type,
#content>.registered-container .licenses-list>.licenses>tbody>tr>td:last-of-type {
	border-right: 1pt solid black;
}

#content>.registered-container .licenses-list>.actions {
	display: flex;
	flex-flow: row nowrap;
}

#content>.registered-container .licenses-list>.actions>css-spinner {
	width: 1.5em;
	height: 1.5em;
	align-self: center;
	margin-left: 1ex;
}

#content>.registered-container .licenses-list>.output {
	display: flex;
	flex-flow: row nowrap;
	margin-top: 1em;
}

#content>.registered-container .licenses-list>.output>textarea {
	font-family: monospace, monospace;
	font-size: xx-small;
	resize: none;
	width: 68ch;
	flex-shrink: 0;
}

#content>.registered-container .licenses-list>.output>.actions {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 1ex;
}

#content>.registered-container .licenses-list>.output>.actions button {
	margin: 0;
}

green-popup-menu {
	font: initial;
}
green-popup-menu>ul>li>.menu-entry-icon {
	display: inline-block;
	width: 1.5em;
	text-align: center;
	margin-right: 0;
}
green-popup-menu>.overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
}
green-popup-menu>ul {
	text-indent: initial;
	font-size: small;
	z-index: 4;
	position: absolute;
	background: white;
	top: 4ex;
	left: -1pt;
	text-align: left;
	padding: 0;
	margin: 0;
	border: 1pt solid #efefef;
	line-height: 3ex;
	box-shadow: 1.5pt 1.5pt 8pt rgba(0, 0, 0, .3);
	overflow: visible;
	width: auto;
}
green-popup-menu>ul>li {
	font-size: smaller;
	padding: 0 1em;
	margin: 0;
	white-space: nowrap;
	cursor: default;
	list-style-type: none;
}
green-popup-menu>ul>li.disabled {
	color: #bfbfbf;
}
green-popup-menu>ul>li:hover {
	background: #fbbf3f;
}
green-popup-menu>ul>li>.entry-italic {
	font-style: italic;
}
green-popup-menu>ul>li.top-bar {
	border-top: 1pt dashed lightgray;
}
green-popup-menu>ul>li.center {
	text-align: center;
}
green-popup-menu>ul>li.gray {
	color: gray;
}

.dialog.serial-edit>h1 {
	font-size: initial;
	margin-bottom: 1em;
}

.dialog.serial-edit .input-container {
	position: relative;
	text-align: right;
}
.dialog.serial-edit>.input-container>.green-suggestions-input-wrapper>input {
	width: 100%;
	box-sizing: border-box;
	font-family: monospace, monospace;
	font-weight: bold;
	border: 1pt solid gray;
	height: 2.5em;
	padding: 0 1ex;
}
.dialog.serial-edit>.input-container>.green-suggestions-input-wrapper>input.ng-invalid:not(.ng-untouched) {
	border-color: var(--invalid-input-color);
	box-shadow: 0 0 5pt inset var(--invalid-input-color);
}
.dialog.serial-edit>.input-container>.green-suggestions-input-wrapper>input.ng-invalid-free:not(.ng-invalid-required) {
	border-color: var(--warning-input-color);
	box-shadow: 0 0 5pt inset var(--warning-input-color);
}

.dialog.serial-edit [ng-message-exp] {
	bottom: 50%;
}
.dialog.serial-edit [ng-message-exp].form-message-free {
	color: var(--warning-input-color);
}

.dialog>.dialog-actions>button {
	min-width: 6em;
}

.input-parameters {
	width: max-content;
	position: relative;
	pointer-events: initial;
	z-index: 10;
	background: white;
	padding: 1em;
	border-radius: 1ex;
	display: flex;
	flex-flow: column nowrap;
}

.input-parameters::after {
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: inherit;
	box-shadow: 1.5pt 1.5pt 8pt rgba(0, 0, 0, .4);
	z-index: -1;
}

.input-parameters h1 {
	align-self: stretch;
	margin-top: 0;
	text-align: center;
	cursor: default;
}

.input-parameters .inout-container {
	border: 1pt solid lightgray;
	padding: 1ex;
	padding-top: 2ex;
	position: relative;
	display: flex;
	flex-flow: column nowrap;
}
.input-parameters .inout-container::after {
	content: var(--title);
	color: gray;
	background: white;
	padding: 0 .5ex;
	position: absolute;
	height: 2em;
	line-height: 2em;
	top: -1em;
}
.input-parameters .inout-container:not(:first-of-type) {
	margin-top: 1em;
}

.actions {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

.actions>:not(:last-child) {
	margin-right: .5ex;
}
.actions>:not(:first-child) {
	margin-left: .5ex;
}

.actions .error {
	align-self: center;
}

.actions :first-child:last-child {
	margin-left: auto;
	margin-right: auto;
}

.input-parameters .releases {
	display: inline-block;
	width: 40em;
	font-size: small;
}

.input-parameters .releases:empty {
	color: lightgray;
}

.input-parameters .releases .release {
	font-family: monospace, monospace;
}

.input-parameters .releases .release.none {
	font-family: revert;
	font-style: italic;
}

.input-parameters .releases::before {
	content: "Release:\a0";
}
.input-parameters .releases.plural::before {
	content: "Releases:\a0";
}

.input-parameters .system-actions {
	display: flex;
	flex-flow: row nowrap;
	align-items: baseline;
	width: 100%;
	margin: 1ex 0;
	position: relative;
}

.input-parameters .system-actions * {
	flex-shrink: 0;
}
.input-parameters .system-actions .green-suggestions-input-wrapper {
	flex-grow: 1;
	margin: 0 1ex;
	height: 2em;
	padding: 0;
}

.input-parameters .system-actions .green-suggestions-input-wrapper:last-child {
	margin-right: 0;
}

.input-parameters .system-actions .green-suggestions-input-wrapper + * [ng-message-exp] {
	margin-left: -1ex;
}

.input-parameters .system-actions input[name="serial"] {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1pt solid lightgray;
	padding: .2ex 1ex;
	font-family: monospace, monospace;
	font-size: inherit;
}
.input-parameters .system-actions input[name="serial"]::placeholder {
	font-family: initial;
	font-size: small;
}
.input-parameters .system-actions label[for="generate-license"] {
	width: min-content;
	font-size: x-small;
	align-self: center;
	margin-left: 1ex;
}

.input-parameters .error {
	font-weight: bold;
	font-size: x-small;
	width: min-content !important;
	margin-top: 0;
	margin-bottom: 0;
	color: red;
	text-align: center;
	flex-grow: 1;
	flex-shrink: 0;
	white-space: pre-wrap;
	display: inline-block;
}

.input-parameters .actions {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 1ex;
	flex-grow: 0;
	width: 100%;
}

.input-parameters .actions :first-child:last-child {
	margin-left: auto;
	margin-right: auto;
}

.input-parameters>css-spinner {
	position: absolute;
	top: 1.3em;
	right: 1em;
	width: 1.2em !important;
	height: 1.2em !important;
}

request-input {
	position: relative;
	display: block;
	width: max-content;
}

textarea.ascii-license-request {
	resize: none;
	display: block;
	font-family: monospace, monospace;
	font-size: small;
	white-space: pre;
	width: 66ch;
	resize: none;
	overflow-x: hidden;
	border: 1pt solid lightgray;
}

textarea.ascii-license-request + * [ng-message-exp] {
	width: max-content !important;
	display: inline-block;
	position: absolute;
	right: 2ex;
	bottom: 1ex !important;
	transform: none !important;
	box-shadow: none !important;
	height: unset !important;
	background: none !important;
	line-height: unset !important;
}
textarea.ascii-license-request + * [ng-message-exp]::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 3pt;
	right: 3pt;
	bottom: 50%;
	box-shadow: 0pt 0pt 3pt 6pt white;
	z-index: -1;
}


textarea.ascii-license-request::placeholder {
	font-size: small;
	font-family: initial;
}

div.summary {
	width: 30rem;
}

table.summary {
	border: 1pt solid black;
	border-collapse: collapse;
	box-shadow: 1.5pt 1.5pt 8pt rgba(0, 0, 0, .4);
	width: 100%;
}

table.summary>tbody>tr {
	line-height: 2em;
}
table.summary>tbody>tr>td:nth-last-of-type(1) {
	text-align: right;
}
table.summary>tbody>tr>td {
	padding: 0 1em;
}
table.summary>tbody>tr:not(:last-of-type) {
	border-bottom: 1pt solid black;
}

table.summary>tbody>tr.title>td {
	text-align: center;
	background: black;
	color: white;
	font-weight: bold;
}

table.summary>tbody>tr.blanks:not(.only),
table.summary>tbody>tr.regs.total,
table.summary>tbody>tr>td[rowspan] {
	font-weight: bold;
}

.latest-releases h4.new-release {
	color: var(--latest-releases-dont-have-it-fgcolor);
}

.latest-releases .show-hide-releases {
	color: initial;
	font-size: x-small;
	font-weight: initial;
}

.latest-release.ng-enter {
	-webkit-animation: rolldown var(--fade-duration) both;
	-moz-animation: rolldown var(--fade-duration) both;
	-o-animation: rolldown var(--fade-duration) both;
	animation: rolldown var(--fade-duration) both;
}

.latest-release.ng-leave {
	-webkit-animation: rollup var(--fade-duration) both;
	-moz-animation: rollup var(--fade-duration) both;
	-o-animation: rollup var(--fade-duration) both;
	animation: rollup var(--fade-duration) both;
}

.latest-releases {
	overflow-y: hidden;
}

#content table.registered.systems.ng-enter {
	animation: cross-fadein calc(.5 * var(--fade-duration)) both;
}
#content table.registered.systems.ng-leave {
	animation: cross-fadeout calc(.5 * var(--fade-duration)) both;
}

@keyframes cross-fadein {
	from { opacity: 0 }
	to { opacity: 1 }
}
@keyframes cross-fadeout {
	from { opacity: 1 }
	to { opacity: 0 }
}

@keyframes rolldown {
	from {
		opacity: 0;
		max-height: 0;
		margin-top: 0;
		margin-bottom: 0;
	}
	50% { opacity: 0 }
	to {
		opacity: 1;
		max-height: 3em;
	}
}

@keyframes rollup {
	from {
		opacity: 1;
		max-height: 3em;
	}
	50% { opacity: 0 }
	to {
		opacity: 0;
		max-height: 0;
		margin-top: 0;
		margin-bottom: 0;
	}
}

.latest-releases {
	margin-top: 1em;
	margin-bottom: 2em;
	font-size: 80%;
}

.latest-releases h4 {
	margin-bottom: .5em;
}

.latest-releases p {
	margin-top: 0;
	margin-bottom: 0;
}

.latest-release:not(:first-of-type) {
	margin-top: 1em;
}

.latest-release>p {
	position: relative;
	margin-top: .5em;
	margin-left: 4em;
}

.latest-release svg {
	position: absolute;
	top: 50%;
	left: -2em;
	margin-right: .5em;
	transform: translateY(-50%)
}

.latest-release svg rect {
	stroke-width: 1pt;
	stroke: black;
	fill: var(--compatible-system-bgcolor);
}

.latest-releases sup {
	color: initial;
	font-size: smaller;
}

.latest-releases .footnote {
	font-size: smaller;
}

.latest-releases .footnote sup {
	display: inline-block;
	text-align: right;
	width: 1.5em;
}

.latest-releases .footnote:first-of-type {
	margin-top: 1em;
}

/* CSS-only spinner animations */
css-spinner {
	display: block;
	position: relative; /* Set a containing block for spinner ticks. */
}
css-spinner .tick {
	display: block;
	position: absolute;
	top: 0; left: 0;
	height: 100%; width: 100%;
}
@keyframes         spinner-fade-black {
	from { opacity: .8; } to { opacity: .1; } }
@-webkit-keyframes spinner-fade-black {
	from { opacity: .8; } to { opacity: .1; } }
@keyframes         spinner-fade-white {
	from { opacity: 1; } to { opacity: .1; } }
@-webkit-keyframes spinner-fade-white {
	from { opacity: 1; } to { opacity: .1; } }
css-spinner .tick::before,
css-spinner.white .tick::before {
	display: block;
	width: 8%; height: 25%;
	content: " ";
	background: black;
	opacity: .1;
	animation: spinner-fade-black 0.6s infinite;
	-webkit-animation: spinner-fade-black 0.6s infinite;
}
css-spinner.white .tick::before {
	background: white;
	animation: spinner-fade-white 0.6s infinite;
	-webkit-animation: spinner-fade-white 0.6s infinite;
}
css-spinner .tick.t01 { transform:             rotate(000deg) translate(50%);
			-webkit-transform:     rotate(000deg) translate(50%); }
css-spinner .tick.t02 { transform:             rotate(028deg) translate(50%);
			-webkit-transform:     rotate(028deg) translate(50%); }
css-spinner .tick.t03 { transform:             rotate(055deg) translate(50%);
			-webkit-transform:     rotate(055deg) translate(50%); }
css-spinner .tick.t04 { transform:             rotate(083deg) translate(50%);
			-webkit-transform:     rotate(083deg) translate(50%); }
css-spinner .tick.t05 { transform:             rotate(111deg) translate(50%);
			-webkit-transform:     rotate(111deg) translate(50%); }
css-spinner .tick.t06 { transform:             rotate(138deg) translate(50%);
			-webkit-transform:     rotate(138deg) translate(50%); }
css-spinner .tick.t07 { transform:             rotate(166deg) translate(50%);
			-webkit-transform:     rotate(166deg) translate(50%); }
css-spinner .tick.t08 { transform:             rotate(194deg) translate(50%);
			-webkit-transform:     rotate(194deg) translate(50%); }
css-spinner .tick.t09 { transform:             rotate(222deg) translate(50%);
			-webkit-transform:     rotate(222deg) translate(50%); }
css-spinner .tick.t10 { transform:             rotate(249deg) translate(50%);
			-webkit-transform:     rotate(249deg) translate(50%); }
css-spinner .tick.t11 { transform:             rotate(277deg) translate(50%);
			-webkit-transform:     rotate(277deg) translate(50%); }
css-spinner .tick.t12 { transform:             rotate(305deg) translate(50%);
			-webkit-transform:     rotate(305deg) translate(50%); }
css-spinner .tick.t13 { transform:             rotate(332deg) translate(50%);
			-webkit-transform:     rotate(332deg) translate(50%); }
css-spinner .tick.t01::before { animation-delay:                0.00s;
				-webkit-animation-delay:        0.00s; }
css-spinner .tick.t02::before { animation-delay:                0.05s;
				-webkit-animation-delay:        0.05s; }
css-spinner .tick.t03::before { animation-delay:                0.10s;
				-webkit-animation-delay:        0.10s; }
css-spinner .tick.t04::before { animation-delay:                0.15s;
				-webkit-animation-delay:        0.15s; }
css-spinner .tick.t05::before { animation-delay:                0.20s;
				-webkit-animation-delay:        0.20s; }
css-spinner .tick.t06::before { animation-delay:                0.25s;
				-webkit-animation-delay:        0.25s; }
css-spinner .tick.t07::before { animation-delay:                0.30s;
				-webkit-animation-delay:        0.30s; }
css-spinner .tick.t08::before { animation-delay:                0.35s;
				-webkit-animation-delay:        0.35s; }
css-spinner .tick.t09::before { animation-delay:                0.40s;
				-webkit-animation-delay:        0.40s; }
css-spinner .tick.t10::before { animation-delay:                0.45s;
				-webkit-animation-delay:        0.45s; }
css-spinner .tick.t11::before { animation-delay:                0.50s;
				-webkit-animation-delay:        0.50s; }
css-spinner .tick.t12::before { animation-delay:                0.55s;
				-webkit-animation-delay:        0.55s; }
css-spinner .tick.t13::before { animation-delay:                0.60s;
				-webkit-animation-delay:        0.60s; }


/* Overrides for MS Edge */

@supports not (width: max-content) {
	#content.login,
	#content.confirm,
	#content.forgot,
	#content.info {
		text-align: center;
	}
	.login-page,
	#content>.info {
		display: inline-flex;
	}
	#content > .registered-container {
		display: inline-flex;
	}
}