.background-color-text{
			color:SteelBlue;
}
.background-color{
			color:white;
}
.system-color{
			color:red;
			font-size:16px;
}
.agent-color{
	color:blue;
	font-size:16px;
}
.me-color{
	color:green;
	font-size:16px;
}
.other-color{
	color:brown;
	font-size:16px;
}

body > ul {
	list-style-type: none;
	margin: 0;
	padding: 0; 
	overflow: hidden;
	background-color: #00A3A5; /* Was: #333; black */
}

body > ul > li {
	float: right;
}

body > ul > li a, .dropbtn {
	display: inline-block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;

}

/*
body > ul > li a:hover, .dropdown:hover .dropbtn {
	background-color: #1E8EFF; /* Was red; now Eircom blue *//*
}*/

body > ul >li.dropdown {
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 120px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
	color: black;
	padding: 5px 10px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a:hover {
	background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.ui-widget {
	font-family: Raleway,Verdana,Arial,sans-serif; /* DE_WR_18817 Raleway */
	font-size: .8em;
}

.ui-widget-content {
	background: #222222;
	border: 1px solid #000000;
	color: #222222;
}

.ui-dialog {
	left: 0;
	outline: 0 none;
	padding: 0 !important;
	position: absolute;
	top: 0;
	background-color: white;
	color:black;
	font-family:Raleway; /* DE_WR_18817 */
}

#success {
	padding: 0;
	margin: 0; 
}

.ui-dialog .ui-dialog-content {
	background: none repeat scroll 0 0 transparent;
	border: 0 none;
	overflow: auto;
	position: relative;
	padding: 0 !important;
}

.ui-widget-header {
	background: #222222;
	border: 0;
	color: #f0f0f0;
	font-weight: normal;
}

.ui-dialog .ui-dialog-titlebar {
	padding: 0.1em .5em;
	position: relative;
	font-size: 1.5em;
	color:#B200FC; /* plum? Was: white */
	background-color:gainsboro;
}

.SettingsDialog {
	margin-left: 23px;
	margin-right:23px;
	color: black;
	background-color:white;
}

#streamingmode{
   margin-left:10px;
}

#idleTimeOutDiv  {
   margin-left:10px;
}

#SliderDiv  {
   margin-left:10px;
}

#slider {
	color: white;
	width: 84%;
	margin-right: 10px;
	margin-top: 6px;
	float:right;
	vertical-align:middle;
	background-color:gainsboro;
}


#ColorSelectedTextArea {
	background-color: white;
	text-align:center;
	margin-left:10px;
	margin-right:10px;
	border:2px solid silver; /* DE_WR_18817 */
}

#ColorSelectedTextArea > div:hover {
	outline: 4px solid red; /* cyan; */
}

#colorCanvas {
	margin-left:5px;
}

#DivSaveClosePreferences {
	margin-left : 10px;
	margin-right : 10px;
}

#MessageArea {
	overflow-y: auto; 
	height:100%; /* Was: 80%; */
	border:2px solid black;
	background-color:white;
	flex:1;
}

#MessageArea > p {
   margin-top:2px;
   margin-bottom:0px;
   margin-left:0.5em; /* DE_WR_18817 */
}

#InputTextDiv {	/* DE_WR_18817 */
	background-color:gainsboro;
}

#TextInput{
	width: 80%;
	margin-bottom:5px;
	background-color:white;	/* DE_WR_18817 */
	font-family:Raleway;
	flex:1;
	height:20px;
	margin-top:14px;
	padding:2px;
}

#TextInput:focus{
	pointer-events: none;
	/* background-color: yellow; */
}



.links { position: relative; width: 100px; }

.submenu { 
  visibility: hidden; /* hides sub-menu */
  opacity: 0;
  position: absolute;
  top: 0px; /* Was-172px; */
  left: 0;
  /* width: 200%; Was 100% */
  transform: translateY(2em);
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
  white-space: nowrap; /* important new line */
}

.links:hover .submenu {
  visibility: visible; /* shows sub-menu */
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}

/*
footer > ol > li a:hover {
	background-color: #1E8EFF; /* Was red; now blue *//*
}*/

footer > ol > li > ul > li a:hover {
	background-color: lightgray;
}

/* Presentation */
body { 
	padding: 2%;
	font: 18px/1.4 sans-serif; 
	font-family:Raleway; /* DE_WR_18817 */
	margin:4px; /* defaulted itself to 8px previously.*/
}

footer { 
	position: relative; 
	top: 0px;
	display: flex; /* DE_WR_18817 */
	flex-direction:row;
}
footer a { color:black; display: block; /* padding: 0.5em 0px; */ text-decoration: none; }

#PhrasesButton {
	color:white;
	display: block;
	padding: 0.5em 0px;
	text-decoration: none;
	text-align:center;	/* DE_WR_18817 */
	margin-left:10px;
}

/*footer a:hover { 
				color: #9ebe2d;
				//background-color:lightgray;
				background-color: #f1f1f1;
}*/
footer ol, footer ol li { 
		list-style-type: none; 
		padding: 0; 
		margin: 0; 
		margin-right: 10px; 
}
footer > ol { 
	/* background: #B200FC; /* Plum? Was: black; */
	text-align: left;
	/* DE_WR_18817 Now flex. Was: width:20%; */ 
	display:inline;
}
footer > ol > li { display: inline-block; }
footer > ol > li:first-child { border-left: none; }

#mainPhraseList > li {
	margin-left: -30px;
}

.submenu {
  background: white;
  color:black;
}


html{
	height:100%;
}

body{
	height:92%;
	display:flex;
	flex-direction: column;
}



#RegisteredDevices > li {
	width:99%;
	border: 1px groove Gainsboro;
	padding-right: 4px;
}

ListCheckBox{
	float:left;
	text-align:left;
}


#fontsize {
	 -webkit-appearance: none;
	 width: 84%;
}

#phraseInputText {
	background-color:white;
	color: black;
	/* width: 83%; */
	flex:1;
	margin-left:4px;
	margin-right:4px;
}

#RegisterOnTRSM {
	margin-right: 0px;
	float: right;
	width:92px;
}

#cli {
	width: 450px; /* Was 84%; */
}

#DeleteSelectedDevice{
	 float:left;
	 margin-right:5px;
}

#ConnectRegisteredDevice {
	float:right;
	margin-right:0px;
	width:92px;
}

#RegisteredDevices {
	color:black; /* DE_WR_18817 Was white */
	background-color:white; /* Was black */
	width:100%;
	list-style-type:none;
	padding-left:0;
}

#ButtonClose { /* On Register dialog */
	float:right; margin-right:0px; margin-bottom: 20px;
}

#ClosePhraseDialog{ /* On Phrase dialog */
	float:right; margin-right:20px; margin-bottom: 15px;
}

#AddPhrase {
	float:right;
	margin-right:20px;
	/* flex:2; */
}

#innerPhrases {	/* DE_WR_18817 */
	margin-left: 23px;
	/* color:black; */
}

#PhraseList {
	color:black;	/* DE_WR_18817 */
	background-color:white;
	width:99%;
	list-style-type:none;
	padding-left:0;
}

#PhraseList > li {
	width:99%;
	/* DE_WR_18817 Was: border: 1px groove Gainsboro; */
}

#innerHelp {	/* DE_WR_18817 */
	margin-left: 23px;
	/* color:black; */
}

.LED {
	font-size: 1.8em;
	color: orange;
	margin-left:15px;
	vertical-align: middle;
}

#HelpLink{
	color:deepskyblue;
}

/* DE_WR_18817 Start */

#UserGuideDiv{
	height: 200px; /* Was: 30%; */
	/*overflow-y: auto; 
	height:80%;
	border:2px solid black;
	background-color:white;*/
	background-color:WhiteSmoke;
	/* flex:1; */
}

.UserGuideTitle{
	color:#B200FC; /* Eircom style guide primary color, plum? */
	font-size: 1.5em;
	font-weight:bold;
	margin:0px;
}

.vdiIcon{
	/*  margin-top:12px;
	margin-right:15px */
	margin:10px;
	font-size:1.5em;
	margin-left:30px;
}

#UserGuideText {
	/*margin:10px;*/
	margin-left:79px;
	position:relative;
	top:-20px;
	margin-right:79px;
}

.ButtonHolderDiv {
	text-align: center;
	/* padding:0.5em;	/* Space above button */
	width:100%;
}

.BigRoundyButtons {
	border-radius:20px;
	background-color: #B200FC; /* plum? */
	color:white;
	font-size: 1em;
	width:200px;
	padding:0.33em; /* vertically fatter button */
	font-weight:bold;
	border:transparent;
	font-family:Raleway;
	/* margin-top:10px; */
}

.ButtonHolder{
	text-align: center;
}

#PhrasesButtonButton {
	background-color: #B200FC; /* plum? */
	color:white;
	font-size: 1em;
	width:100%;
	/* padding:0.33em; /* vertically fatter button */
	font-weight:bold;
	font-family:Raleway;
	border:transparent;
	margin:5px;
	padding-left:0px;
}

#CloseHelpDialogButton{ /* On Phrase dialog */
	font-family: Raleway;
}

#idletimeout, #Save, #ButtonClose, 
#cli, #RegisterOnTRSM, #DeleteSelectedDevice, #UnregisterAllDevices, #ConnectRegisteredDevice, #ButtonClose,
#phraseInputText, #AddPhrase, #DeletePhrase, #ClosePhraseDialog
{
	font-family:Raleway;
}

.SVGIcon {
	width:60px;
	height:60px;
	vertical-align:middle;
	margin-top:10px;
	margin-left:10px;
	position:relative;
	top:-7px;
}

/*
#PhraseInputDiv {
	display:flex;
	flex-direction:row;
}*/

#PhraseInputPara {
	width:100%;
	display:flex;
}

/* DE_WR_18817 End. */

/**** "Grey-out" background when modal dialogs are displayed ****/

/*
* jQuery UI CSS Framework
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* To view and modify this theme, visit http://jqueryui.com/themeroller/
*/

/* Overlays */
.ui-widget-overlay { background: #aaaaaa/*{bgColorOverlay}*/ none/*{bgImgUrlOverlay}*/ 0/*{bgOverlayXPos}*/ 0/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityOverlay}*/; }