/* Styles for display widgets */

@font-face
{
    font-family: 'LiberationSans';
    src: url('../fonts/LiberationSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'LiberationSans';
    src: url('../fonts/LiberationSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face
{
    font-family: 'LiberationSans';
    src: url('../fonts/LiberationSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

body
{
    font-family: 'LiberationSans', sans-serif;
    margin-left: 3ex;
    margin-right: 3ex;
}

pre
{
    background-color: #EEE;	
}

.Screen
{
	position: relative;
}

.Widget
{
	/* Position via top, left, width, height */
	position: absolute;
	
	/* Include padding and border in width, height */
	box-sizing: border-box;
}

svg.Widget
{
	overflow: visible;
}

.AlignedText
{
	display: inline-flex;
}
.AlignedHorizCenter
{
    justify-content: center;	
    text-align: center;
}
.AlignedRight
{
    justify-content: flex-end;    
    text-align: end;
}
.AlignedVertCenter
{
    align-items: center;    
}
.AlignedBottom
{
    align-items: flex-end;    
}

/* Border used to debug layout */
.Debug
{
	border: 1px solid blue;
}

/* Alarm borders: 3 pixel wide,
 * using outline for the first and maybe only line.
 * When multiple lines are needed, using box shadow.
 */
.BorderMinor
{
	outline: 3px solid #F80;
}
.BorderMajor
{
	outline: 3px double #F00;
}
.BorderInvalid
{
    outline: 3px dashed #F0F;
}
.BorderDisconnected
{
	outline: 3px dotted #F0F;
}

#content
{
}

.Error
{
	color: red;
	font-size: smaller;
	font-style: italic;
}

.ContextMenu
{
    border: 1px solid black;
    position: fixed;
    background-color: rgb(255, 255, 255);
    display: block;
    left: 100px;
    top: 150px;
    display: none;
    z-index: 2;
    box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2); 
}

.ContextMenu .Header
{
	font-weight: bold;
}

.ContextMenu ul
{
    margin: 5px;
    padding: 5px;
}

.ContextMenu li
{
	list-style: none;
	padding-bottom: 5px;
}

.ContextMenu li a
{
	text-decoration: none;
	color: black;
	padding: 5px;
}

.ContextMenu li  a:hover
{
	background-color: #CCF;
}



#info_panel
{
	float: right;
}

#info
{
	font-style: italic;
}

#info table
{
    border: none;
    width: 100%;
}

#info table tr
{
    text-align: left;
}

#info table tr:nth-child(even)
{
    background: #EEE;
}

#info table td
{
  vertical-align: top;
}