:root {
	--main-color-red: red;
	--main-color-green-poison: #80BC5B;
	--main-color-black: #0A1F25;
	--main-color-green: #109AAB;
	--main-color-green-light: #CFEBEE;
	--main-color-blue-light: #E7F2F5;
	--main-color-white: #FFFFFF;
	--main-color-blue: #B8E1E6;
	--main-color-gray: #EDF2F3;
	--main-color-gray-dark: #6A748C;
	--main-color-gray-light: #e9ecef;
	--main-color-gray-medium: #8185A0;
	--main-color-gray-darker: #344767;

    --main-text-input-padding: 5px;
    --main-text-input-border-width: 1px;
    --main-text-input-border-style: solid;
    --main-text-input-border-color: #ccc;
    --main-text-input-border-color-focus: var(--main-color-green);
    --main-text-input-border-radius: 4px;
    --main-text-input-background-color: #f9f9f9;
    --main-text-input-transition: border-color 0.3s, box-shadow 0.3s;
    --main-text-input-box-shadow-focus: 0 0 5px rgba(16, 154, 171, 0.3);

    --main-button-background-color: var(--main-color-green);
    --main-button-background-color-hover: var(--main-color-gray-darker);

    --main-text-color-default: var(--main-color-gray-darker);
}

.row-container {
  display: flex;
  align-items: flex-start;
}

.row-container-element {
  flex-shrink: 0;
}

/* ElementFactory */


.efactory-link {
    color: #aaa;
    font-weight: normal;
}

.efactory-link:hover,
.efactory-link:focus {
    color: var(--nfw-color-green);
    text-decoration: none;
    cursor: pointer;
}


table.efactory-table {
	border: 1px solid #E0E0E0;
	border-collapse: separate;
	border-left: 0;
	border-top: 0;
	border-radius: 5px;
	border-spacing: 0px;
	overflow: hidden;
}

tr.efactory-table-header-row td {
	background: #F4F4F4;
	margin: 0px;
	padding: 5px;
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
	font-weight: bold;
	border-left: 1px solid #E0E0E0;
	border-top: 1px solid #E0E0E0;
}

tr.efactory-table-single-column-row td {
	background-color: white;
	margin: 0px;
	padding: 5px;
	text-align: center;
	border-left: 1px solid #E0E0E0;
	border-top: 1px solid #E0E0E0;
}

tr.efactory-table-row td {
	background-color: white;
	margin: 0px;
	padding: 5px;
	border-left: 1px solid #E0E0E0;
	border-top: 1px solid #E0E0E0;
}

tr.efactory-table-header-row:first-child td:first-child {
	border-radius: 5px 0 0 0;
}
tr.efactory-table-header-row:last-child td:first-child {
	border-radius: 0 0 0 5px;
}

tr.efactory-table-single-column-row:first-child td:first-child {
	border-radius: 5px 0 0 0;
}
tr.efactory-table-single-column-row:last-child td:first-child {
	border-radius: 0 0 0 5px;
}

tr.efactory-table-row:first-child td:first-child {
	border-radius: 5px 0 0 0;
}
tr.efactory-table-row:last-child td:first-child {
	border-radius: 0 0 0 5px;
}

.user-info-table
{
  border-collapse: collapse;
  width: 100%;
  background-color: #004;
  color: #FFF;
}

.user-info-table tr, .user-info-table td
{
  border: 0px;
  padding: 0.75em;
}

.user-general-info-table
{
  border-collapse: collapse;
  width: 100%;
  background-color: #FFF;
  color: #000;
	border-radius: 6px;
}

.user-general-info-table tr, .user-general-info-table td
{
  border: 0px;
  padding: 0.75em;
}

.user-logout-cell
{
	text-align: right;
	color: #FFF;
}

.user-detail-cell
{
	text-align: left;
	color: #FFF;
}

/* AdminView */

.admin-links {
	text-align: center;
}

/* TestLogView */
div.test-log
{
	overflow-x: auto;
	max-width: 40em;
	background-color: #888;
}
div.test-log table
{
	border-collapse: separate;
	border-spacing: 1em;
	background-color: #888;
}
div.test-log table, div.test-log table td
{
	border: 0;
}
div.test-log table td
{
	min-width: 6.5em;
	max-width: 6.5em;
	height: 6.5em;
	max-height: 6.5em;
	vertical-align: middle;
	text-align: center;
	overflow: hidden;
	padding: 0.5em;
}
div.test-log table td.test-log-next
{
	border-style: dotted;
	border-width: 1px;
	border-color: #FFFFFF;
	background-color: #888;
	color: #FFFFFF;
	cursor: default;
}
div.test-log table td.test-log-sel
{
	background-color: #FFFFFF;
	color: #191970;
	cursor: default;
}
div.test-log table td.test-log-unsel
{
	/*background-color: #191970;*/
	background-color: DarkGreen;
	color: #FFFFFF;
	cursor: grab;
}
div.test-log table td.test-log-unsel-error
{
	background-color: red;
	color: white;
	cursor: grab;
}

/* ControllerSessionView */


.controller-session-connection-status-info
{
	text-align: center;
	color: white;
}

.controller-session-connection-status-error
{
	padding: 0.5em;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	color: white;
	background-color: red;
}

@keyframes controller-session-connection-status-attention-animation {
	50% {
		background-color: white;
		color: red;
	}
	100% {
		background-color: red;
		color: white;
	}
}

.controller-session-connection-status-attention
{
	padding: 0.5em;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	color: white;
	background-color: red;
	animation: controller-session-connection-status-attention-animation 0.7s step-start 0s infinite;
}

@keyframes video-chat-chat-indicator-animation {
	50% {
		background: red;
	}
	100% {
		background: white;
	}
}

@keyframes controller-session-alert-animation {
	50% {
		border-color: #445;
	}
	100% {
		border-color: red;
	}
}

@keyframes controller-session-warning-animation {
	50% {
		border-color: #445;
	}
	100% {
		border-color: red;
	}
}

.video-chat-chat-indicator
{
	display: inline-block;
	background-color: white;
	padding: 1em;
}

.video-chat-chat-indicator-circle {
	width: 3em;
	height: 3em;
	-webkit-border-radius: 1.5em;
	-moz-border-radius: 1.5em;
	border-radius: 1.5em;
	background: red;
	animation: video-chat-chat-indicator-animation 1s step-start 0s infinite;
}

.controller-session-command-buttons-table
{
	display: table;
	margin: auto;
	border-collapse: separate;
	border-spacing: 0;
}

.controller-session-command-buttons-table, .controller-session-command-buttons-table td
{
	border: 0;
}

.controller-session-status-paused, .controller-session-status-running, .controller-session-status-finished
{
	padding: 0.5em;
	font-size: 2em;
	display: inline-block;
	width: 6em;
}

.controller-session-status-paused
{
	background-color: Orange;
}

.controller-session-status-running
{
	background-color: LightGreen;
}

.controller-session-status-finished
{
	background-color: SteelBlue;
}

/* SequenceSelectionView */

.sequence-selection-main-table {
	margin: auto;
	text-align: center;
}

.sequence-selection-main-table tr:last-child td {
	padding-top: 0.5em;
}

/* webapp.view.TestStateView */

.test-state-main
{
	background-color: white;
	margin: 0;
	border-collapse: collapse;
	width: 100%;
	table-layout: auto;
}

.test-state-main, .test-state-main td
{
	border: 0.5em solid white;
}

.test-state-header
{
	padding: 0;
	height: 1.5em;
	position: relative;
}

.test-state-title, .test-state-close
{
	display: inline-block;
	position: absolute;
}

.test-state-title
{
	left: 0%;
	right: 0%;
	text-align: center;
	font-weight: bold;
}

.test-state-close
{
	right: 0px;
}

.test-state-name
{
	text-align: center;
}

.test-state-status-completed, .test-state-status-in-progress, .test-state-status-pending, .test-state-status-error
{
	display: inline-block;
	padding: 0.3em;
}

.test-state-status-completed
{
	background-color: SteelBlue;
	text-align: center;
}

.test-state-status-in-progress
{
	background-color: LightGreen;
	text-align: center;
}

.test-state-status-pending
{
	background-color: LightGray;
	text-align: center;
}

.test-state-status-error
{
	background-color: Red;
	color: white;
	text-align: center;
}

.test-state-error
{
	text-align: center;
	background-color: red;
	color: white;
	padding: 0.2em;
}

/* webapp.view.TestListView */

.test-list-table
{
	border-collapse: separate;
	border-spacing: 0;
	background-color: white;
	border: 0.3em solid white;
	color: black;
	display: inline-block;
	overflow-y: auto;
	max-height: 40em;
}

td.test-list-selected
{
	border: 0.3em solid yellow;
}

td.test-list-unselected
{
	border: 0.3em solid white;
}

td.test-list-pointer-selected, td.test-list-pointer-unselected, td.test-list-status-pending, td.test-list-status-in-progress, td.test-list-status-completed, td.test-list-status-error
{
	padding: 0.5em;
	cursor: pointer;
	white-space: nowrap;
}

td.test-list-pointer-selected
{
	background-color: yellow;
	border: 0.3em solid yellow;
}

td.test-list-pointer-unselected
{
	border: 0.3em solid white;
}

td.test-list-status-pending
{
	/*background-color: #191970;*/
	background-color: SteelBlue;
	color: white;
}

td.test-list-status-in-progress
{
	background-color: LightGreen;
	color: white;
}

td.test-list-status-completed
{
	background-color: DarkGreen;
	color: white;
}

td.test-list-status-error
{
	background-color: Red;
	color: white;
}

/*************************/

body
{
/*	margin: 20px;
	border: 0px;
	padding: 0px;
	background-color:#C8C8CC;*/
}

body {
	/*color: #000020;
	font: 10pt Verdana,Helvetica,Arial,sans-serif;
	vertical-align: top;*/
}

/*-----------------------------------------------------------*/
/* text elements */


/* Text used to display error messages */
.structure-status-error
{
	color: #F00;
}
/* Text used to display the status of some operation */
.structure-status-progress
{
	color: #003;
}

/*-----------------------------------------------------------*/
/* form elements */

.video-chat-video-container {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
}

.video-chat-remote-video {
    width: 360px;
    height: 240px;
    border: 3px solid white;
    border-radius: 3px;
}

.video-chat-local-video {
}

.efactory-select
{
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.efactory-select:focus {
    border-color: var(--main-color-green);
    outline: none;
    box-shadow: 0 0 5px rgba(16, 154, 171, 0.3);
}

/* default text input box */
.efactory-text-input
{
    padding: var(--main-text-input-padding);
    border-width: var(--main-text-input-border-width);
    border-style: var(--main-text-input-border-style);
    border-color: var(--main-text-input-border-color);
    border-radius: var(--main-text-input-border-radius);
    box-sizing: border-box;
    background-color: var(--main-text-input-background-color);
    transition: var(--main-text-input-transition);
}

.efactory-text-input:focus {
    border-color: var(--main-text-input-border-color-focus);
    outline: none;
    box-shadow: var(--main-text-input-box-shadow-focus);
}

.efactory-password-input
{
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.efactory-password-input:focus {
    border-color: var(--main-color-green);
    outline: none;
    box-shadow: 0 0 5px rgba(16, 154, 171, 0.3);
}

.efactory-text
{
}

.efactory-checkbox
{
    accent-color: var(--main-color-green);
    border: 1px solid #ccc;
}

.efactory-radio
{
    accent-color: var(--main-color-green);
}

.efactory-button
{
	background-color: var(--main-button-background-color);
	border: none;
	color: white;
	padding: 8px 16px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-radius: 4px;
	font-size: 110%;
}
.efactory-button:hover {
	background-color: var(--main-button-background-color-hover);
    box-shadow: 0 0 5px rgba(52, 71, 103, 0.3);
    outline: none;
    border-color: var(--main-color-green);
	cursor: pointer;
}
.efactory-button:focus {
	background-color: var(--main-button-background-color-hover);
    box-shadow: 0 0 5px rgba(207, 235, 238, 0.3);
    outline: none;
    border: 1px solid var(--main-color-green-light);
	cursor: pointer;
}
.efactory-button:disabled {
	background-color: #DDD;
}
.efactory-button-small
{
	padding: 4px 8px;
}

.controller-session-subject-volume-button
{
	background-color: #879ED2;
	border: none;
	color: white;
	padding: 4px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-radius: 4px;
	font-size: 110%;
}
.controller-session-subject-volume-button:hover {
	background-color: #273E82;
	cursor: pointer;
}
.controller-session-subject-volume-button:disabled {
	background-color: #DDD;
}

.standard-table-title
{
	width: 100%;
	text-align: center;
	padding: 0.5em;
}

.structure-panel-main {
	background-color: var(--nfw-color-white);
	color: var(--nfw-color-gray-darker);
	border-radius: 10px;
	border: none;
	margin: 0;
	padding: 15px;
	box-shadow: 0 20px 27px 0 rgba(0,0,0,.05) !important;
}

.video-chat-comm-status {
	background-color: #FFF;
	color: #000;
	border-radius: 3px;
	border: none;
	padding: 0.5em;
	margin: 0;
}

.video-chat-size-button
{
	background-color: #879ED2;
	border: none;
	color: white;
	padding: 4px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border-radius: 4px;
	font-size: 110%;
	height: 2em;
	width: 2em;
}

.structure-panel-title {
	color: var(--nfw-color-green);
	font-weight: 600;
}

.structure-panel-header {
	margin-top: 0;
	margin-bottom: 1em;
	text-align: center;
}

.structure-file-label
{
	background-color: #677EB2;
	border: none;
	color: white;
	padding: 5px 10px;
	margin: 0px;
	text-align: center;
	text-decoration: none;
	border-radius: 4px;
	font-size: 110%;
	cursor: pointer;
}

.structure-form-table
{
	padding: 0px;
	border: 0px;
	border-collapse: separate;
	border-spacing: 5px;
	margin: auto;
}

.structure-form-table-left-column
{
	text-align: right;
	white-space: nowrap;
	color: #555;
	vertical-align: middle;
}

.structure-form-hideable-row-left
{
	white-space: nowrap;
	color: #555;
	vertical-align: middle;
}

.structure-form-table-right-column
{
	text-align: left;
	vertical-align: middle;
}

.structure-form-hideable-row-right
{
	vertical-align: middle;
}

table.structure-parameter-table
{
	margin: 0;
	border-collapse: collapse;
}

table.structure-parameter-table tr td
{
	padding: 0.3em;
	vertical-align: middle;
}

td.structure-parameter-table-border-cell
{
	border: 1px solid #888;
}

td.structure-parameter-table-no-border-cell
{
	border: 0;
}

table.structure-parameter-table tr td:nth-child(1)
{
	text-align: right;
	white-space: nowrap;
}

table.structure-parameter-table tr td:nth-child(2)
{
	text-align: left;
}

/* div containing the dialog title */
.structure-form-title
{
	text-align: center;
	font-size: 110%;
	font-weight:bold
}
.structure-form-button-row
{
	text-align: center;
}

/* div containing the dialog title */
.structure-dialog-title-container
{
	text-align: center;
	padding: 0px 5px 10px 5px;
	font-weight: bold;
}

.structure-dialog-description
{
	margin: 15px;
}

.structure-dialog-custom-content-container
{
	padding: 0px 0px 15px 0px;
}

/*-----------------------------------------------------------*/
/* modal dialogs */

dialog::backdrop {
  background-color: #00000090;
}

/* full screen background that prevents interaction with page */
.modal-background {
	/*display: none;  Hidden by default */
	display: block;
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	text-align: center;
}

/* Modal Content/Box */
.modal-window {
	background-color: #fefefe;
	margin: 15% auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	display: inline-block;
	border-radius: 6px;
}

/*-----------------------------------------------------------*/
/* Tooltips */

/* container */
.tooltip {
	position: relative;
	display: inline-block;
	padding-left: 5px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	cursor: default;
	margin: 0px;
}

.tooltip .tooltip-text-wrapper
{
	position: absolute;
	left: 50%;
	top: 150%;
	visibility: hidden;
	z-index: 1;
	/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
	opacity: 0;
	transition: opacity 1s;
}

/* Tooltip text, should be inside container tag */
.tooltip .tooltip-text {
	width: 20em;
	display: block;
	text-align: center;
	background-color: #003;
	color: #fff;
	padding: 5px;
	border-radius: 6px;

	/* Position the tooltip text - see examples below! */
	position: relative;
	left: -50%;
}

.tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltip-text-wrapper {
    visibility: visible;
    opacity: 1;
}

/*-----------------------------------------------------------*/

table {
    border-collapse: collapse;
}

table, th, td {
    border: none;
}

a {
    color : #0000A0;
    text-decoration : none;
}

a:hover {
    color : #35546A;
    text-decoration : none;
}

a:active {
	color : #505050;
	text-decoration : none;
}

/*-----------------------------------------------------------*/

/* LayoutTable */

table.lt {
	border-collapse: collapse
	margin: 0;
	padding: 0;
	border: 0;
}

table.lt > tbody > tr > td {
  border: 0px solid transparent;
  background-clip: padding-box;
  padding: 0;
}

table.lt > tbody.small > tr > td + td {
  border-left-width: 0.5em;
}

table.lt > tbody.small > tr + tr > td {
  border-top-width: 0.5em;
}

table.lt > tbody.medium > tr > td + td {
  border-left-width: 1em;
}

table.lt > tbody.medium > tr + tr > td {
  border-top-width: 1em;
}

table.lt > tbody.large > tr > td + td {
  border-left-width: 1.5em;
}

table.lt > tbody.large > tr + tr > td {
  border-top-width: 1.5em;
}

/*-----------------------------------------------------------*/

/* Dialog */

/* div containing the dialog title */
.dlg-title
{
	text-align: center;
	font-weight: bold;
}

/*-----------------------------------------------------------*/

/* TestStationDataSyncComponent */

.sync-detail-panel
{
	background-color: #FFF;
	color: #000;
	border-radius: 3px;
	border: none;
	padding: 0.5em;
	margin: 0;
	display: inline-block;
}

.sync-status
{
	padding: 0.2em;
	border-radius: 3px
}

.sync-status-complete
{
	background-color: green;
	color: white;
}

.sync-status-paused
{
	background-color: red;
	color: white;
}

.sync-status-backlog
{
	background-color: yellow;
	color: black;
}

.sync-status-uploading
{
	background-color: blue;
	color: white;
}