/*
 * Copyright (c) Avato Systems Inc. 2023.
 * All rights reserved.
 */

@import "header.css";
@import "nav-icons.css";

/****************************************************/
/* Variables */
/****************************************************/

html
{
	--main-color: #ebebeb;
	--main-background-color: #222;

	--secondary-color: #2f46e3;
	--secondary-color2: #5a8bfc;

	--link-color: var(--secondary-color2);

	--secondary-background-color: #333;
	--secondary-background-color2: #444;
	--tertiary-background-color: #444;

	--title-color: var(--main-color);
	--content-border-color: var(--secondary-background-color2);
	--content-border-color2: #666;
	--opacity-background-color: rgba(30,30,30,0.9);
	--opacity-background-color2: rgba(30,30,30,0.3);
	--button-gradient-color1: var(--main-background-color);
	--button-gradient-color2: #585858;
	--button-border-color: var(--secondary-background-color2);
	--button-selected-gradient-color1: var(--secondary-color);
	--button-selected-gradient-color2: var(--secondary-color2);
	--table-row-even-background-color:#383838;
	--input-border-color:#AAA;

	--xml-element-color: var(--secondary-color2);
	--xml-attribute-color: #25B24B;
	--xml-string-color: #151515;

	--h1-color:var(--title-color);
	--h2-color:var(--title-color);
	--h3-color:var(--title-color);
	--h4-color:var(--title-color);

	--code-editor-background-color:var(--secondary-background-color);
	--code-editor-color: var(--main-color);

	--vignette-hover-background-color: var(--secondary-background-color);

	--table-header-color: var(--main-color);
	--table-row-color: var(--main-color);
	--table-background-color:var(--secondary-background-color);

	/*Important for height calculations*/
	--header-height: 58px;
	--footer-height: 0px;

	/* Button attributes shared for header and footer */
	--bar-button-size: 32px;
	--bar-button-padding: 8px;

	--avato-danger-color: red;
	--avato-warning-color: orange;
	--avato-success-color: green;
	--avato-info-color: blue;
	--avato-gray-color: gray;

	--avato-white: #EBEBEB;
}

article
{
	--article-margin: 10px;
	margin-right: 0;
}

/****************************************************
		General CSS
 ****************************************************/

html
{
	height: 100%;
}

body
{
	margin: auto 0;
	padding: 0;
	font-family: 'Nunito', sans-serif;
	height: 100%; /* needed for container min-height */
}

header
{
	background-color: var(--main-background-color);
	color: var(--main-color);
	font-family: 'Nunito', sans-serif;
}
body
{
	background-color: var(--secondary-background-color);
	color: var(--main-color);
	font-family: 'Nunito', sans-serif;
}

aside
{
	background-color: var(--opacity-background-color);
	color: var(--main-color);
	font-family: 'Nunito', sans-serif;
}

/*#maintabs*/
/*{*/
/*display: none;*/
/*}*/

h1, nav li, .user\-gadget
{
	color: var(--main-color);
}

h2 {
	color: var(--h2-color);
}

h1, h2, h3
{
	font-family: Abel, sans-serif;
	font-weight: 400;
}

.component h3
{
	font-size: medium;
}


a:link, a:visited
{
	color: var(--link-color);
	text-decoration:none;
}

a:hover
{
	color: var(--main-color);
}

.logo1, summary svg
{
	fill:var(--title-color);
}

button svg
{
	height: 16px;
	width: 16px;
	fill: var(--main-color);
}

/*.logo2*/
/*{*/
/*highlighting the middle char of avato with a different color*/
/*fill:var(--link-color);*/
/*}*/

/*button*/
input, select
{
	border-radius: 3px;
	outline: none;
	border: 1px solid var(--input-border-color);
	padding: 5px;
	margin-top:3px;
}

input:focus. select:focus
{
	border: 1px solid var(--secondary-color);
}

input[readonly], textarea [readonly]
{
	background-color: var(--input-border-color);
}

textarea
{
	border-radius: 5px;
	border-color:var(--input-border-color);
}

/*message diagram*/
.legend-text
{
	fill: var(--table-header-color) !important;
}

form button, .formbutton
{
	margin-left: 5px;
	min-width: 60px;
	font-size:0.8em;
	padding:5px 3px 6px 3px;
	border: none;
	/*border: solid 1px var(--button-border-color);*/
}

article
{
	color: var(--h2-color);
}

#MessageForm.content
{
	margin-top: 10px;
}

/*button group*/
footer .button-group span
{
	margin:0px;
	padding:5px;
}

footer .playback-impossible, footer .disabled
{
	background-image: none !important;
	background-color: var(--main-background-color) !important;
	fill: var(--button-border-color);
	border:none !important;
}
#button-nav
{
	display: none;
}

.component
{
	color: var(--main-color);
}

button, .component button, footer .button-group span
{
	border: solid 1px var(--button-border-color);
	color: var(--main-color);
}


button, .component nav a,.component .button-group span, footer .button-bar span, header .bar-button
{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	text-decoration:none;
	display:inline-block;
	font-weight: bold;
	color: var(--main-color);
	/*var(--main-color);*/
	background-color: var(--button-gradient-color2);
	background-image: -webkit-gradient(linear, left top, left bottom, from(var(--button-gradient-color2)), to(var(--button-gradient-color1)));
	background-image: -webkit-linear-gradient(top, var(--button-gradient-color2), var(--button-gradient-color1));
	background-image: -moz-linear-gradient(top, var(--button-gradient-color2), var(--button-gradient-color1));
	background-image: -ms-linear-gradient(top, var(--button-gradient-color2), var(--button-gradient-color1));
	background-image: -o-linear-gradient(top, var(--button-gradient-color2), var(--button-gradient-color1));
	background-image: linear-gradient(to bottom, var(--button-gradient-color2), var(--button-gradient-color1));filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=var(--button-gradient-color2), endColorstr=var(--button-gradient-color1));
}

button:hover:not(.disabled)
, .component nav a:hover:not(.disabled)
, .component .button-group span:hover:not(.disabled)
, footer .button-bar span:hover:not(.disabled)
, header .bar-button:hover:not(.disabled)
{
	/*border:1px solid var(--button-gradient-color2);*/
	color: var(--main-color) !important;
	background-color: var(--button-selected-gradient-color1);
	background-image: -webkit-gradient(linear, left top, left bottom, from(var(--button-selected-gradient-color1)), to(var(--button-selected-gradient-color2)));
	background-image: -webkit-linear-gradient(top, var(--button-selected-gradient-color1), var(--button-selected-gradient-color2));
	background-image: -moz-linear-gradient(top, var(--button-selected-gradient-color1), var(--button-selected-gradient-color2));
	background-image: -ms-linear-gradient(top, var(--button-selected-gradient-color1), var(--button-selected-gradient-color2));
	background-image: -o-linear-gradient(top, var(--button-selected-gradient-color1), var(--button-selected-gradient-color2));
	background-image: linear-gradient(to bottom, var(--button-selected-gradient-color1), var(--button-selected-gradient-color2));filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=var(--button-selected-gradient-color1), endColorstr=var(--button-selected-gradient-color2));
	/*background-color: var(--button-gradient-color1); background-image: -webkit-gradient(linear, left top, left bottom, from(var(--button-gradient-color1)), to(var(--button-gradient-color2)));*/
	/*background-image: -webkit-linear-gradient(top, var(--button-gradient-color1), var(--button-gradient-color2));*/
	/*background-image: -moz-linear-gradient(top, var(--button-gradient-color1), var(--button-gradient-color2));*/
	/*background-image: -ms-linear-gradient(top, var(--button-gradient-color1), var(--button-gradient-color2));*/
	/*background-image: -o-linear-gradient(top, var(--button-gradient-color1), var(--button-gradient-color2));*/
	/*background-image: linear-gradient(to bottom, var(--button-gradient-color1), var(--button-gradient-color2));filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=var(--button-gradient-color1), endColorstr=var(--button-gradient-color2));*/
}

button[disabled] ,button[disabled]:hover
{
	background:none;
	background-color: var(--input-border-color);
	cursor: default;
}

#main { height:100% }

h1
{
	font-size: larger;
	margin: 10px;
	margin-bottom: 0;
}

h2
{
	font-size: medium;
	font-weight: 500;
	margin: 10px;
	margin-top: 0;
}

h3
{
	font-size: medium;
	font-weight: 500;
}

#container
{
	position: relative;
	height: calc(100%);

	/*	border: 1px solid #F00;
 */
}

table
{
	overflow-wrap: break-word;
	table-layout: fixed;
	width: 100%;
	margin-bottom: 6px;
	background-color: var(--table-background-color);
	color: var(--table-row-color);
}

@media screen and (max-width: 600px)
{
	table
	{
		table-layout: auto;
	}
}

tr:nth-child(even)
{
	background-color: var(--table-row-even-background-color);
}

tr td
{
	padding-top: 4px;
	padding-bottom: 4px;
}

th
{
	text-align: left;
	padding-bottom: 6px;
	border-bottom: solid 1px var(--content-border-color);
	margin-bottom: 20px;
	color:var(--table-header-color);
}

table a:hover
{
	color: var(--table-row-color);
}

.metadata tr td
{
	padding: 0;
	margin: 0;
}

table.tight
{
	margin-bottom: 0;
}

table.tight tr td
{
	padding-top: 0;
	padding-bottom: 0;
}

summary svg
{
	height: 22px;
	width: 22px;
	padding-right:5px;
	/*display: none;*/
	vertical-align: bottom;
}

summary
{
	padding-top:10px;
	padding-bottom:10px;
}

details
{
	clear:both;
}

.busy
{
	cursor: progress;
}

.esb-logo-iphone
{
	display: none;
}

nav, nav ul, nav li
{
	padding: 0;
	margin: 0;
}

nav ul
{
	margin-top: 15px;
	margin-bottom: 15px;
}

nav li
{
	list-style: none;
}

/*This removes chromes outline on the nav bar*/
:focus {
	outline: none;
}

nav ul {
	margin-top: 5px;
	margin-bottom: 5px;
}

.nav-icon, .nav-icon
{
	float: left;
}



/****************************************************
		Content Body CSS
 ****************************************************/

#content
{
	position: relative;
	clear:both;
	/*margin-top: 10px;*/
	overflow: hidden;
	/*height: calc(100% - 116px);*/
	height: calc(100% - var(--header-height) - var(--footer-height));
	/*padding-bottom: 25px;*/
}

article
{
	margin: var(--article-margin);
	/*min-height: 280px;*/
	min-width: 454px;
	height: calc(100% - var(--article-margin) - var(--article-margin));
	background-color: var(--secondary-background-color);
	position: relative;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	color: var(--h2-color);
}

article h1
{
	color: var(--h2-color);
}

article.no-scroll-article
{
	overflow-y: inherit;
}

article.frame-parent
{
	padding: 0 0 0 0;
	overflow: hidden;
	/*border-radius: 0;*/
}

iframe
{
	overflow: hidden;
	width: 100%;
	height: 100%;
	border: none;
	background-color: white;
}

.center-h
{
	/*Note: must use width on element elsewhere*/
	/*width: 230px;*/
	margin-left: auto;
	margin-right: auto;
}

article.userform button, article.login button {
	/*border: solid 1px var(--button-border-color);*/
	border: none;
	padding:10px;
	min-width:60px;
	margin-right:5px;
	font-size: 1em;
	color: var(--main-color);
}

article #login
{
	width:300px;
}


/****************************************************
		Footer CSS
 ****************************************************/
footer
{
	font-size: small;
	position: absolute;
	top: 0;
	right: 0;
	/*width: 300px;*/
	height: 51px;
	padding-top: 3px;
	z-index: 201;
}

footer .button-bar
{
	background-color: var(--main-background-color);
	width: 100%;
	height: 51px;
	/*padding-top: 3px;*/
	text-align: center;
}

footer a.login {
	padding: 18px;
	display: inline-block;
}

footer .bar-button
{
	width: 32px;
	height: 32px;
	padding: 8px;
	margin-right:5px;
	border-radius: 8px !important;
	border: 1px solid var(--button-border-color);
}

footer .bar-button svg, header .bar-button svg
{
	fill: var(--main-color);
}

.copyright, .button-bar
{
	display: inline-block;
}

.copyright
{
	position: absolute;
	background-image: url(FooterBackground.jpg);
	background-repeat: no-repeat;
	background-color: #FFF;
	height: 26px;
	left: 156px;
	right: 0;
}

.copyright
{
	padding: 6px 5px 6px 5px;
}


.bar-button.hidden
{
	display: none;
}

.bar-button.disabled
{
	cursor: default;
}

.bar-button
{
	cursor: pointer;
}

#button-user-check p
{
	margin-top: 7px;
}

.white
{
	color: #FFF;
}

.error-message
{
	color: red;
	margin-bottom: 20px;
	/*background-color: white;*/
}

.playback-impossible span
{
	background-image: none !important;
	background-color: transparent;
}

.user-gadget
{
	float: right;
	margin: 6px 8px;
	text-align: right;
}

article.login div.center-h
{
	width: 230px;
}

article#homepage div.center-h
{
	width: 330px;
	padding-right: 8%;
	text-align: center;
}

article#logoff div.center-h
{
	width: 330px;
	/*text-align: center;*/
}

article#create-account div.center-h
{
	width: 360px;
	padding-right: 75px;
	/*text-align: center;*/
	min-height: 530px;
}





article.login h1
{
	margin: 40px 0 8px 0;
	font-size: 15px;
}

article.login input
{
	display: block;
	margin: 8px 10px 10px 0;
	width: auto;
	font-size: larger;
}

article.login label input
{
	display: inline;
}

article.login p
{
	margin: 0;
}

article.login button
{
	margin-top: 33px;
	cursor: pointer;
}





article.userform h1
{
	margin: 0 0 8px 0;
	font-size: larger;
}

article.userform p
{
	margin-left: 0;
}

article.userform label.checkbox
{
	/*width: 340px;*/
}

.input-group
{
	margin-top: 20px;
	margin-bottom: 20px;
}

article.userform label.checkbox input[type="checkbox"]
{
	/*float: left;*/
}

article.userform label.checkbox input[type="text"]
{
	/*float: right;*/
}

article.userform label.widebox input[type="text"]
{
	width: calc(100% - 120px);
	min-width: 180px;
}

article.userform #userProfileForm label.checkbox span
{
	width: auto;
}

article#create-account .info-box table
{
	width: auto;
	overflow-y: scroll;
}

article#create-account .info-box table td:first-of-type
{
	width: 106px;
}

article.userform label.checkbox span
{
	display: inline-block;
	width: 107px;
}

article.userform label.checkbox input[type="checkbox"]
, article.userform label.checkbox input[type="radio"]
{
	margin-right: 8px;
}

article.userform button, button.mbutton
{
	margin-top: 33px;
	cursor: pointer;
}

.update-control-group
{
	margin-top: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid grey;
}

.update-control-group label button
{
	margin: 0;
	padding: 0;
	width: 22px;
	height: 20px;
	margin-left: 8px;
	min-width: 22px;
}

.update-control-group label button svg
{
	width: 12px;
	height: 12px;
}


.showpassword
{
	text-align: right;
	margin-bottom: 12px;
}

li.right, li.wrong
{
	margin: 0;
	padding: 2px 0 8px 50px;
	list-style: none;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 22px;
}
li.right
{
	/*list-style-image: url(../resources/img/Right.png);*/
	background-image: url("../resources/img/Right.svg");
}

li.wrong
{
	/*list-style-image: url(../resources/img/Wrong.png);*/
	background-image: url("../resources/img/Wrong.svg");
}

/*article.userform button.disabled, article.userform button.disabled:hover*/
/*{*/
/*background-color: rgba(57, 94, 128, 0.4);*/
/*cursor: default;*/
/*}*/

.user-self-serve
{
	margin-top: 45px;
}

.dialog
{
	/*background-color: rgba(255,255,255, .75);*/
	/*color: black;*/
	padding: 28px;
	width: 50%;
	min-width: 406px;
	/*max-width: 440px;*/
	position: relative;
}

#create-instance h1
{
	/*color: black;*/
}

.dialog-splash
{
	display: inline;
	margin-right: 28px;
	float: left;
	height: 300px;
	position: absolute;
}

.dialog-splash img
{
	width: 100px;
}

.dialog-splash .spinning
{
	left: -34px;
	top: -6px;
}

.dialog-body
{
	display: inline-block;
	margin-left: 120px;
}

.dialog details
{
	margin-top: 16px;
}

.go-full-screen-hidden
{
	display: none;
}

.go-full-screen-visible
{
	display: inherit;
	background-color: rgb(0, 154, 176);
	color: white;
	height: 60px;
	padding: 8px;
}

.vignettes
{
	text-align: center;
	max-height: 100%;
	color: var(--main-color);

	max-width: 1022px;

	/*display: grid;*/
	/*justify-content: center;*/
	/*align-items: center;*/

	/*grid-template-columns: 1fr 1fr 1fr;*/

	/*@media (max-width: 640px) {*/
	/*	grid-template-columns: 1fr 1fr;*/
	/*}*/

	/*@media (max-width: 540px) {*/
	/*	grid-template-columns: 1fr;*/
	/*}*/

	/*& > h1*/
	/*{*/
	/*	grid-column: 1 / -1;*/
	/*}*/
}


.vignette
{
	width: 184px;
	height: 265px;
	display: inline-table;
	border: 1px solid #16344e;
	cursor: pointer;
	background-color: rgba(135, 169, 189, 0.17);

	padding-top: 10px;
}

.vignette img
{
	max-width: 150px;
	max-height: 230px;
	display: block;
	margin: auto;
	margin-top: 10px;
}

.vignette:hover
{
	background-color: rgba(135, 169, 189, 0.37);
}

.info-box
{
	border: 1px solid #bdbdbd;
	padding: 10px;
	margin: 20px 0;
}

.article-reduced-margin
{
	margin-left: 76px;
}

article.center-v
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*height: calc(100% - 180px);*/
	align-items: center;
}

.fit-h
{

}

/*Sequence page*/

#sequence-table {
	background-color: var(--secondary-background-color);
	/*border: 1px solid var(--content-border-color);*/
	margin-bottom: 0;
}

.vignette
{
	border: 1px solid var(--content-border-color);
	background-color: var(--main-background-color);
	margin-top: 15px;
	margin-left: 15px;
	border-radius: 10px;
}

.vignette:hover
{
	background-color: var(--vignette-hover-background-color);
}

.CodeMirror {
	/*color: var(--code-editor-color);*/
	color: #222;
}

.CodeMirror-scroll
{
	/*background-color: var(--code-editor-background-color);*/
	background-color: #fff;
	margin-bottom: -20px !important;
}

.CodeMirror pre
{
	background: none !important;
}

/*************************************
	from wwt.css
**************************************/

div#sequence-list table tbody tr:hover td, article#sequences-jar table tbody tr:hover td
{
	/*color: white;*/
	background: none;
	cursor: pointer;
	/*background: url('back.png');*/
}

.numeric-cell
{
	text-align: right;
}

.stretch-col
{
	width: auto;
}

.ms-col
{
	text-align: right;
	width: 55px;
}

/*Standard form stuff*/

label
{
	display: block;
	margin: 4px 0;
}

label span:first-child
{
	/*margin-left: 80px;*/
	width: 120px;
	display: inline-block;
}

input
{
	left: 200px;
}

.input-group input[type = "text"]
, .input-group input[type = "tel"]
, .input-group input[type = "url"]
, .input-group input[type = "email"]
, .input-group select
{
	width: calc(100% - 125px);
}

.stretch-input
{
	width: calc(100% - 130px);
}

.max-500
{
	max-width: 500px;
}

.newline
{
	display: block;
}

textarea
{
	width: 100%;
}

div#content h1 {
	margin: 0 0 15px 0;
}

summary h3, summary h4, summary p
{
	display: inline;
}

.inline
{
	display: inline;
}

.join-button-with-accept
{
	display: inline;
}

.join-button-with-accept button
{
}

.join-button-with-accept span
{
	width: 200px;
	position: fixed;
	margin-left: 18px;
	margin-top: 24px;
}

#sequences-jar h1
{
	margin: 0 10px 10px 0;
}

/*#sequence-article*/
/*{*/
/*overflow: hidden;*/
/*}*/

/*#Sequence\.List*/
/*{*/
/*overflow-y: scroll;*/
/*}*/

.stretch-col
{
	width: auto;
}

.ms-col
{
	text-align: right;
	width: 60px;
}

.req-col
{
	/*text-align: right;*/
}

.hidden
{
	display: none;
}

.CodeMirror
{
	/*margin-top: 10px;*/
	height: calc(100%);
}

#dashboard-gadget1
{
	height: calc(100% - var(--toolbar-height));
	overflow: scroll;
}


#mobile-banner
{
	display: none;
}

button.submit-animation
{
	width: 100%;
	position: relative;
}
.progress
{
	display: none;
}

.spinning
{
	width: 46px;
	height: 46px;
	left: 13px;
	top: 0;
	position: absolute;
	display: block;
	animation-name: spinning;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes spinning
{
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}

.sequence-metadata
{
	padding-top: 10px;
}

aside.nav-invisible
{
	display: none;
}

.interface
{
	border: none;
	border-bottom: 1px solid var(--button-border-color);
}


/* iPhone and mobile browsers */
@media only handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 480px), (min-resolution: 200dpi)
{
	html
	{
		--header-height: 0px;
		--footer-height: 51px;
	}

	#container
	{
		height: calc(100%);
	}

	header
	{
		display: none;
		/*height: auto;*/
	}

	header img:first-child
	{
		display: block;
	}

	#esb-logo
	{
		display: none;
	}

	#nav-menu
	{
		display: none;
	}

	#button-nav
	{
		display: inline-block;
	}

	article
	{
		margin-left: 0;
		min-height: 280px;
		min-width: 0;
		/*max-width: 1024px;*/
		border-radius: 0;
		padding: 0;
		height: calc(100%);
		position: relative;
	}

	iframe
	{
		margin-left: 0;
		min-height: 280px;
		min-width: 0;
		/*max-width: 1024px;*/
		width: 100%;
		padding: 0;
	}

	footer
	{
		top: unset;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1001;
	}

	.button-bar
	{
		display: block;
		width: auto;
		height: auto;
	}

	.bar-button
	{
		width: auto;
		height: auto;
	}

	.button-bar img, .button-bar svg
	{
		width: 26px;
		height: auto;
		margin: 10px;
	}

	.copyright
	{
		display: none;
		position: absolute;
		background-image: url(FooterBackground.jpg);
		background-repeat: no-repeat;
		background-color: #FFF;
		left: 176px;
		right: 0;
	}

	article.frame-parent
	{
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}

	#stretch-logo
	{
		display: none;
	}

	.user-gadget
	{
		display: none;
	}

	#content
	{
		margin-top: 0;
		height: calc(100% - var(--footer-height));
	}

	div#content h1 {
		margin: 0 0 12px 14px;
	}

	aside nav
	{
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		height: 100%;
	}

	nav a
	{
		padding: 4px;
	}

	aside .book a
	{
		padding: 0;
	}

	.vignettes
	{
		padding-right: 0;
	}

	.vignette
	{
		width: calc(100% - 50px);
	}

	.vignette img
	{
		width: 150px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	article#create-account div.center-h
	{
		padding-right: 0;
	}

	article.center-v
	{
		display: block;
		flex-direction: column;
		justify-content: center;
		padding: 2px;
		height: calc(100% - 35px);
	}

	.component-window-gadget
	{
		width: 21px;
		cursor: pointer;
		margin: 8px;
	}

	#mobile-banner
	{
		display: none;
		height: 51px;
		position: relative;
	}

	#mobile-banner img.menu
	{
		width: 29px;
		position: absolute;
		right: 0;
		margin: 17px 15px;
	}

	#mobile-banner h1
	{
		display: inline;
		top: 4px;
		position: absolute;
	}

	th
	{
		font-size: small;
	}

	.Message\.List
	{
		padding-top: 2px;
		height: calc(100% - 98px);
		margin-left: 0;
		margin-right: 0;
	}

	#message-article .metadata
	{
		height: calc(100% - 125px);
	}

	#sequence-table
	{
		border: none;
	}

	.button-bar img, .button-bar svg {
		width: 32px;
		height: 32px;
		margin: 0px;
	}
	aside nav div.NavLogo img, aside nav div.NavLogo svg
	{
		margin-top: 6px;
		width: 100px;
	}
}
/* iPhone and mobile browsers */
@media only (max-width: 606px), screen and (max-device-width: 606px), screen and (max-width: 606px), (min-resolution: 200dpi)
{
	.dialog
	{
		min-width: 300px;
	}
}

.avato-success
{
	color: var(--avato-success-color);
	fill: var(--avato-success-color);
}

.avato-danger
{
	color: var(--avato-danger-color);
	fill: var(--avato-danger-color);
}

.avato-warning
{
	color: var(--avato-warning-color);
	fill: var(--avato-warning-color);
}

.avato-gray
{
	color: var(--avato-gray-color);
	fill: var(--avato-gray-color);
}