/*
Copyright (C) Eelco Vriezekolk, Universiteit Twente, Agentschap Telecom.
See LICENSE.md

	                          --== Raster tool Stylesheet ==--

*/

:root {
	--toolbarbg: #eeeeee;
	--lighttbbg: #c6c6c6;
	--greybg: #cccccc;
	--lightbg: #e6e6e6;
	--vlightbg: #f8f8ff;
	--highlt: #80c0ff;
	--warn: #d76f00;
	--toolbar_height: 94px;	/* rasterMain.js: const toolbar_height  */
	--tab_height: 31px;		/* rasterMain.js: const tab_height  */
	--servaddwidth: 40px;	/* Width of the 'add a service' button */
	--fancyheight: 1500px;	/* fancyworkspace is --fancyheight * 1.414 by --fancyheight (A4 proportions) */
}

.ui-button {
	background: white;
}
.ui-checkboxradio-label {
	background: var(--lightbg);
}
.ui-checkboxradio-label.ui-state-active,
.ui-accordion-content,
.ui-dialog .ui-dialog-content {
	background: var(--vlightbg);
}
.ui-accordion-header.ui-accordion-header-active {
	background: var(--lightbg);
}
.ui-accordion-content {
	padding-top: 0 !important;
	padding-right: 0 !important;
}
.ui-dialog {
	box-shadow: 0 0 6px #999999;
	background: var(--vlightbg);
}
.ui-dialog .ui-dialog-titlebar-close { /* Restyle because we add buttons to the title bar */
	border-radius: 6px;
	border-width: 3px;
	padding: 8px;
	top: 13px;
}
.ui-dialog-titlebar.ui-widget-header {
	background: var(--highlt);
}
option:checked {
	background-color: var(--highlt) !important;
}
.ui-state-focus { outline: none; }

/* Make sure model dialogs are above all other elements. */
.ui-widget-overlay { z-index: 4000 !important; }
.ui-tabs-nav {
	z-index: 150;
	user-select: none;
}
.ui-tabs-nav li a {
	width: 9em;
	overflow: hidden;
	z-index: 150;
	outline: none;
}
.longlink { width: 12.5em !important; }
.tabcloseicon {
	margin-top: 0.4em !important;
	cursor: pointer;
}

/* For Chromium */
:focus {
	outline: none;
}
fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

/* * * * * * * * * * * * * * * * *+-------------------------+* * * * * * * * * * * * * * * * *
 * * * * * * * * * * * * * * * * *|       MAIN LAYOUT       |* * * * * * * * * * * * * * * * *
 * * * * * * * * * * * * * * * * *+-------------------------+* * * * * * * * * * * * * * * * */

/* Named grid:
+---+----------------------+
|    toolbar               |
+---+----------------------+
| v |   workspace          |
| t |                      |
| a +----------------------+
| b |   htab               |
+---+----------------------+
*/
body {
	position: absolute;
	background: var(--toolbarbg);
	padding: 0;
	border: 0;
	margin: 0;
	display: grid;
	grid-template-columns: var(--tab_height) 1fr;
	grid-template-rows: var(--toolbar_height) 1fr var(--tab_height);
	grid-template-areas:
		"toolbar	toolbar"
		"vtab		workspace"
		"vtab		htab";
	height: 100%;
	width: 100%;
	overflow: hidden;
	min-width: 1240px;
}
body.waiting * {
	cursor: wait !important;
}
#toolbars {
	grid-area: toolbar;
	padding: 0;
	border: 0;
	margin: 0;
	background: var(--toolbarbg);
	border-top: 1px solid black;
	user-select: none;
}
#vtabs {
	grid-area: vtab;
	padding: 0;
	border: 0;
	margin: 0;
	background: var(--greybg);
}
#workspace {
	grid-area: workspace;
	padding: 0;
	border: 0;
	margin: 0;
}
#htabs {
	grid-area: htab;
	padding: 0;
	border: 0;
	margin: 0;
	background: var(--greybg);
}

#workspace > ul {
	padding: 0;
	border: 0;
}
.ui-tabs-vertical-sw > .ui-tabs-nav li {
	width: 9em;
	float: right;
	z-index: 150;
}
.longtab { width: 15.5em !important; }
.rot-neg-90 {
	border-radius: 0;
	transform-origin: bottom left;
}

.workspace {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	padding: 0 !important;
	border-radius: 0;
}
.workbody {
	position: absolute;
	top: 0;
	padding: 0 !important;
	border-radius: 0;
	height: 100% !important;
	width: calc(100% - 2px); 	/* subtract border width */
	overflow: visible !important;
}
.workbody h1 { margin-top: 0; }

.printonly { display: none; }
.doshow { visibility: visible !important; }
.noselect {
	user-select: none;
}

/* * * * * * * * * * * * * * * * *+-------------------------+* * * * * * * * * * * * * * * * *
 * * * * * * * * * * * * * * * * *|         TOOLBAR         |* * * * * * * * * * * * * * * * *
 * * * * * * * * * * * * * * * * *+-------------------------+* * * * * * * * * * * * * * * * */

#toolbars ul {
	width: 100% !important;
	border-radius: 0;
	border: none;
	padding: 0;
	background: var(--toolbarbg);
}
#toolbars li.ui-tabs-tab {
	border: none;
	border-bottom: 4px solid var(--toolbarbg);
	background: var(--toolbarbg);
	margin: 0 10px 7px;
}
#toolbars li.ui-tabs-tab:first-child {
	margin-left: 10px;
}
#toolbars li.ui-state-hover {
	border-bottom: 1px solid var(--highlt);
}
#toolbars li.ui-state-active {
	font-weight: bold;
	border-bottom: 4px solid var(--highlt);
}
#toolbars li.ui-tabs-tab a {
	padding: 2px 10px;
	font-size: 110%;
	width: auto;
}
.toolbar {
	background: var(--toolbarbg) !important;
	height: 52px;
	width: 100%;
	padding: 10px 0 0 !important;
}
.toolbar > div:first-child {
	margin-left: 8px;
}
.toolbar .ui-button {
	padding: 0.25em 0.6em;
}
.toolbar input[type="checkbox"] {
	margin-top: 0;
	margin-bottom: 2px;
}
.toolbarlargebutton {
	display: inline-block;
	font-size: 80%;
	margin-right: 6px;
	height: 27px;
	padding: 12px 12px 0 !important;
}
.toolbarbutton {
	display: inline-block;
	vertical-align: top;
	margin-right: 6px;
}
.toolbarlargeiconbutton {
	display: inline-block;
	vertical-align: top;
	margin-right: 6px;
	min-width: 40px;
	height: 40px;
	border-radius: 8px;
	padding: 2px !important;
	background-size: cover !important;
}
.toolbarlargeiconbutton img {
	max-width: 25px;
	max-height: 25px;
}
.toolbariconbutton {
	display: inline-block;
	vertical-align: top;
	margin-right: 6px;
	min-width: 25px;
	height: 25px;
	border-radius: 8px;
	padding: 2px !important;
	background-size: cover !important;
}
.toolbariconbutton img {
	max-width: 25px;
	max-height: 25px;
}
.toolbarspacer {
	display: inline-block;
	width: 10px;
	background: white;
}
.toolbarsection {
	display: inline-block;
	vertical-align: top;
	height: 100%;
	margin-left: 10px;
	border-left: 2px dotted gray;
	padding-left: 10px;
	padding-top: 0 !important;
}
.toolbarlabel {
	position: relative;
	height: 100%;
	display: inline-block;
	vertical-align: top;
}
.toolbarlabel > div:first-child {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	font-style: italic;
	line-height: 20px;
	white-space: nowrap;
}

#networkactivity {
	width: 6px;
	height: 6px;
}
.activityoff {
	background: transparent;
	border: none;
}
.activityyes {
	background: lightgreen;
	border: 1px solid grey;
}
.activityno {
	background: white;
	border: 1px solid grey;
}

#fileElem {
	visibility: hidden;
	width: 0;
	height: 0;
}

#buttadd { background-image: url("../img/new_p.png"); }
#buttduplicate { background-image: url("../img/duplicate_p.png"); }
#buttimport { background-image: url("../img/import_p.png"); }
#buttexport { background-image: url("../img/export_p.png"); }

#projlist-menu {
	width: 350px;
	height: 250px;
}
#buttactivate { background-image: url("../img/activate_p.png"); }
#buttdel { background-image: url("../img/del_p.png"); }
#buttmerge { background-image: url("../img/merge_p.png"); }

#undobutton { background-image: url("../img/undo.png"); }
#redobutton { background-image: url("../img/redo.png"); }

#findbutton { background-image: url("../img/find.png"); }
#helpbutton { background-image: url("../img/qm.png"); }

#projectprops { background-image: url("../img/props_p.png"); }
#buttlabels { background-image: url("../img/editlabels.png"); }

#field_projectdescription {
	resize: none;
}
#creatorf {
	width: 15em;
}
.floatright {
	float: right;
}
#mi_cism {
	display: flex;
	flex-wrap: wrap;
	width: 350px;
}
.iconli {
	flex: 50px;
	height: 50px !important;
	background: var(--lightbg);
	border: none;
	text-align: center;
	padding: 0 3px;
}
.iconli:hover {
	background: var(--highlt);
}
.menuimage {
	height: 50px;
}

/* LAYOUT =
 template
	+ templatelabel
	+ templatebg
		+ templateicon
	+ tC
*/
#templates {
	display: inline-block;
	position: relative;
	height: 100%;
}
.template {
	display: inline-block;
	position: relative;
	width: 64px;
	height: 100%;
	margin-right: 2px;
}
.templatelabel {
	position: absolute;
	bottom: 0;
	white-space: nowrap;
	color: #666666;
	width: 100%;
	text-align: center;
	user-select: none;
}
.templatebg {
	position: absolute;
	top: 0;
	width: 100%;
	height: 33px;
	border: 1px solid #333333;
	border-radius: 3px;
	background: var(--greybg);
	cursor: move;
	z-index: 100;
}
img.templateicon {
	position: relative;
	/* Center the image inside the div.templatebg */
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	max-width: 58px;
	max-height: 20px;
}
/* Checklist edit is enabled/disabled using 'visibility', and shown/hidden using 'display' / $().show() & .hide() */
img.tC {
	position: absolute;
	display: none;
	top: -7px;
	right: -2px;
	width: 16px;
	height: 16px;
	border-radius: 6px;
	box-shadow: 0 0 3px gray;
	cursor: context-menu;
	z-index: 100;
}

#currentProject {
	position: absolute;
	right: 4px;
	color: #999999;
	font-size: 1.3em !important;
	white-space: nowrap;
	width: 400px;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
	top: 3px;
}
#classroom {
	position: fixed;
	display: none;
	top: 25px;
	right: 5px;
	color: #999999;
	font-style: italic;
	background: white;
}

#projname {
	width: 14em;
	padding: 6px 3px;
	background: white;
	border: 1px solid gray;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#projdescr {
	width: 23em;
	height: 28px;
	padding: 2px 3px;
	background: white;
	border: 1px solid gray;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Some buttons are shown in the title bar of dialogs or accordions */
.titlebarbutton {
	font-size: 0.9em !important;
	border-radius: 8px;
	padding: 2px 5px;
	height: 14px;
	margin-right: 15px;
	margin-bottom: 7px;
	margin-top: 2px;
}
.titlebaricon {
	border-radius: 8px;
	padding: 0 3px;
	margin-right: 15px;
	width: 25px;
	height: 25px;
}
.titlebaricon img {
	width: 25px;
	height: 25px;
}

.topbuttons {
	background: var(--lightbg);
	position: relative;
	width: 100%;
	padding-left: 25px;
	left: -25px;
	height: 30px;
	top: 0;
	margin-bottom: 2px;
}

/* * * * * * * * * * * * * * * * *+-------------------------+* * * * * * * * * * * * * * * * *
 * * * * * * * * * * * * * * * * *|         DIALOGS         |* * * * * * * * * * * * * * * * *
 * * * * * * * * * * * * * * * * *+-------------------------+* * * * * * * * * * * * * * * * */

input.inplace_field,
textarea.inplace_field {
	font-size: 11px;
	box-shadow: 0 0 0 4px white;
	outline: 2px dotted grey;
	-moz-outline-border: 4px;
	border: 0;
	z-index: 1100;
	background: var(--lightbg);
}
.th_freq .inplace_form {
	position: relative;
	z-index: 1100;
	left: -9px;
}
.th_impact .inplace_form {
	position: relative;
	z-index: 1100;
	left: -9px;
}
.th_freq select {
	margin-left: -7em !important;
}

.ui-link {
	cursor: pointer;
	text-decoration: underline;
}

#helptabs {
	min-height: calc(100% - 1ex);
}
#helppanel iframe {
	width: 100%;
	height: 100%;
	border: none;
}
#helppanel ul {
	border-radius: 8px 8px 0 0;
}
.helptable {
	border-top: 2pt solid black;
	border-collapse: collapse;
}
.helptable td {
	border-bottom: 1pt solid black;
	vertical-align: top;
}
#helptabs td { padding: 2px; }
#helptabs table p { margin: 0; }
.exampleMagnitude {
	border: 1px solid grey;
	border-radius: 3px;
	width: 2em;
	text-align: center;
}
#freqcontrols input[type="text"] {
	width: 3em;
	margin-right: 2em;
}
.range {
	display: inline-block;
	width: 130px;
	padding-left: 30px;
}
#freqcontrols fieldset {
	border: none;
	padding: 0;
}

#resultarea {
	position: relative;
	height: 35px;
}
#result {
	position: absolute;
	bottom: -18px;
	left: 237px;
	width: 0;
	height: 0;
	border: 22px solid rgba(0 0 255 / 50%);
	box-shadow: blue 0 0 8px;
	z-index: 2;
	border-radius: 22px;
}

#freqcontrols {
	background: whitesmoke;
	border: 1px solid grey;
	width: 525px;
}
.tdaright {
	text-align: right;
}
.shortcuttable {
	display: inline-block;
	vertical-align: top;
}
.shortcuttable:last-child {
	margin-left: 30px;
}
.shortcuttable table {
	margin: 10px 0;
}

.box {
	border: 1px solid grey;
	position: absolute;
	height: 6px;
	background: #f8f8f8;
}
#bV {
	left: 10px;
	width: 50px;
}
#bH {
	left: 61px;
	width: 48px;
	background: red;
}
#b1 {
	left: 110px;
	width: 140px;
}
#bM {
	left: 251px;
	width: 48px;
	background: orange;
}
#b2 {
	left: 300px;
	width: 140px;
}
#bL {
	left: 441px;
	width: 48px;
	background: green;
}
#bU {
	left: 490px;
	width: 50px;
}

#boxlabels {
	position: relative;
	height: 40px;
}
.label {
	position: relative;
	top: 10px;
}
#lH { left: 60px; }
#lM { left: 210px; }
#lL { left: 360px; }

.findresult { cursor: pointer; }
.findresult:hover { text-decoration: underline; }
#field_found {
	width: 380px;
	height: 180px;
	overflow: auto;
	white-space: nowrap;
	border: 1px solid grey;
}
#field_find {
	width: 376px;
	margin-bottom: 5px;
}
::placeholder { font-style: italic; }

/* Panel for project settings */
#form_projectprops input,
#form_projectprops textarea,
#sh_onoff {
	margin: 0 0 5px;
}

#field_projecttitle,
#field_projectdescription {
	width: 470px;
}

.psitem {
	display: inline-block;
	vertical-align: top;
	margin-right: 4em;
	margin-top: 2px;
	line-height: 23px;
}
.psitem label.ui-checkboxradio-radio-label {
	/* Tweaked to get the text on the same horizontal line as the select menus */
	padding: 3px 10px;
	top: -2px;
}

#creator {
	width: 260px;
}

/*
Dialog windows:
 - popup menu
 - errors in connections for element nodes
 - threats (checklist) for links and equipment
 - threat evaluations for element nodes
*/

/* Used to hide the close button on dialog windows */
.no-close .ui-dialog-titlebar-close {
	display: none;
}

.ui-menu {
	position: absolute;
	min-width: 150px;
	background: var(--lightbg);
	border: 1px solid gray !important;
	box-shadow: 0 0 8px #999999;
	z-index: 700;
}
.ui-menu-item {
	white-space: nowrap;
}
.ui-menu-item-wrapper.ui-state-active {
	background-color: var(--highlt) !important;
}
.lcT {
	font-weight: bold;
	border-bottom: 1px solid gray;
	width: 100%;
}
li.lcT div:first-child {
	background-color: var(--lightbg) !important;
	font-weight: bold;
	padding-left: 1em;
}
/* Title on icon submenu with icons */
#mi_cism li.lcT {
	padding-left: 1em;
}

.smallblock {
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 1px solid grey;
	border-radius: 6px;
	margin-right: 10px;
	margin-top: 2px;
}
.noneblock {
	display: inline-block;
	margin-right: 10px;
	background: none !important;
	vertical-align: middle;
}
.tinyblock {
	display: inline-block;
	width: 5px;
	height: 5px;
	border: 1px solid grey;
	border-radius: 3px;
	margin-left: 3px;
	margin-right: 3px;
}
.tinysquare {
	display: inline-block;
	width: 5px;
	height: 5px;
	border: 1px solid grey;
	margin-left: 3px;
	margin-right: 3px;
}
.labelmenuitem { width: 160px !important; }
.field_label_text {
	width: 220px;
}
#form_editlabels input { margin-bottom: 5px; }

/* Dialog: errors connections */
div.nodereport p { margin-bottom: 0.5ex; }

/* Dialog: checklist and threat evaluation common parts */
div.thr_header {
	font-weight: bold;
	border-bottom: 1px solid gray;
	/*	border-top: 1px solid gray; */
}
div.threat {
	display: table-row;
}
.ui-sortable .threat { cursor: ns-resize; }
.th_col {
	display: block;
	float: left;
	height: 19px;
	padding: 3px;
	/* border-bottom: 1px solid gray; */
}
div.th_name {
	width: 14em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
div.th_mal {
	width: 4.5em;
}
div.th_descr {
	width: 46em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
div.th_del {
	width: 15px;
	padding-left: 0;
	padding-right: 0;
	border: none;
}
div.th_del .ui-button { /* Circle with cross */
	padding: 0 6px;
	font-size: 16px;
	border: none;
	top: -4px;
	background-color: var(--vlightbg);
}
div.th_del .ui-button:hover {
	outline: 1px solid grey;
	background: white;
}

.th_name span { cursor: text; }
.th_descr span { cursor: text; }
.th_name .inplace_field { width: 8em; } /* Less than width of column, to account for tree structure lines */
.th_descr .inplace_field { width: 46em; }
.errImpact > span::after {
	color: var(--warn); /* Same as .incomplete */
	content: " !";
}
.errImpactM > span::after { content: " < M"; }
.errImpactH > span::after { content: " < H"; }
.errImpactV > span::after { content: " < V"; }

/* Dialog: checklist */
.checklist { display: none; }

.malset label {
	padding: 0 3px;
	height: 18px;
	width: 13px;
	border-color: var(--lightbg);
}
.malset img {
	opacity: 0.35;
}
.malset label.ui-state-active img {
	opacity: 1;
}

/* Dialog: threat evaluation */
div.th_freq { width: 4.5em; }
div.th_impact { width: 4.5em; }
div.th_total {
	width: 5em;
	text-align: center;
}
div.th_remark {
	width: 29em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.th_freq span { cursor: text; }
.th_impact span { cursor: text; }
.th_remark span { cursor: text; }
.th_remark .inplace_field { width: 35em; }

.pdflabel {
	display: inline-block;
	width: 10em;
	line-height: 3em;
	background: transparent !important;
	border: 0 !important;
}

.field_rename {
	width: 30em;
}

/* modaldialog */
#modaldialog ul {
	padding-left: 1.5em;
}

/* * * * * * * * * * * * * * * * *+-------------------------+* * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * *|         DIAGRAMS        |* * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * *+-------------------------+* * * * * * * * * * * * * * * * */

#tabdiagrams .workspace {
	overflow: scroll !important;
}
.fancyworkspace {
	/* Make the drawing area the same proportions as A4-series paper: 1.414 : 1
	 */
	width: calc(1.414 * var(--fancyheight)) !important;
	height: var(--fancyheight) !important;
	position: relative;
	top: 0;
	left: 0;
	background-color: var(--vlightbg) !important;
	background-image: url("../img/paper.png") !important;
	background-size: 100px !important;
	background-position: 8px 9px !important; /* So that node centers line up exactly with the grid */
}
.plainworkspace {
	overflow: auto !important;
	margin-left: 15px;
}

/* Horizontal tabs below the main workspace */
#tab_diagrams {
	border-radius: 0;
}

.tabs-bottom .ui-tabs-panel {
	height: 100%;
	overflow: auto;
}
.tabs-bottom > .ui-tabs-nav {
	position: absolute !important;
	bottom: calc(-1px - var(--tab_height));
	left: var(--servaddwidth);
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	height: var(--tab_height);
	width: 100%;
}
.tabs-bottom .ui-tabs-nav li.ui-tabs-selected { margin-top: -2px !important; }
.tabs-bottom .ui-tabs-nav li {
	margin-top: 0 !important;
	margin-bottom: 1px !important;
	border-top: none;
	border-bottom-width: 1px;
	width: 13em;
	padding-bottom: 1px !important;
}
.tabtitle { width: 9em; }
.servplusbutton {
	position: absolute;
	bottom: calc(2px - var(--tab_height));
	left: -1px;
	width: var(--servaddwidth);
	height: 29px;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	z-index: 150;
}

.scroller_overview {
	position: fixed;
	top: 110px;
	left: calc(100% - 160px);
	width: calc(1.414 * var(--fancyheight) / 16);	/* .fancyworkspace.width / 16  */
	height: calc(var(--fancyheight) / 16);			/* .fancyworkspace.height / 16 */
	background: #aaaaaa;
	border: 1px solid white;
	z-index: 97;
	box-shadow: 0 0 10px #999999;
}

.scroller_region {
	position: absolute;
	left: 0;        /* Recalculated in $(".scroller_region").draggable( ... ) */
	top: 0;
	width: 54px;    /* Recalculated in SizeDOMElements() */
	height: 36px;
	cursor: move;
	border: 1px solid black;
	background: rgba(153 153 255 / 60%);
	z-index: 99;
}
.tinynode {
	position: absolute;
	width: 3px;
	height: 3px;
	background: var(--warn);
	z-index: 98;
}

/* Basic Node templates */
/* round dot on top of nodes */
.jtk-endpoint {
	z-index: 2;
	user-select: none;
}
/* Lines between nodes */
.jtk-connector {
	z-index: 1;
	user-select: none;
}
.jtk-drag-hover {
	outline: 3px dotted rgb(252 107 33);
}
.jtk-hover {
	visibility: visible !important;
}
.jtk-dragging {
	/* Dragging connections should be on top */
	z-index: 200;
}
body.jtk-drag-select * {
	cursor: none !important;
}
.draggedEndpoint circle {
	fill: #666666;
}
svg path {
	stroke-width: 2.5px;
	stroke: #aaaaaa;
}

.connbutton {
	font-size: 16px !important;
	z-index: 2;
	cursor: pointer;
	user-select: none;
}

.ui-resizable-se {
	bottom: -4px !important;
	right: -6px !important;
}

div.node {
	position: absolute;
	padding: 0;
	z-index: 10;
	cursor: move;
	display: none; /* must fade in after create */
	user-select: none;
}

.nodecolorbackground {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* See bug https://bugzilla.mozilla.org/show_bug.cgi?id=1605976
	 *
	 * We used to use a workaround with hidden masks somewhere on the page, so that we could refer to
	 * them by id:
	 *
	 *	-webkit-mask-image: -moz-element(#tACT-mask);
	 *
	 * As this is no longer necessary (any Firefox bugs appear to have been fixed), we just provide the
	 * masks by url().

	mask-image: url("../img/tACT-mask.png");
	-webkit-mask-image: url("../img/tACT-mask.png");

	 */
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;	/* stylelint-disable-line property-no-vendor-prefix */
	z-index: -1;
}
/*
#mask-collection {
	height: 0;
}
.mask {
	width: 1px;
	height: 1px;
}
*/
.Hnone { color: black !important; }
.Hred { color: darkred !important; }
.Horange { color: brown !important; }
.Hyellow { color: black !important; }
.Hgreen { color: darkgreen !important; }
.Hblue { color: darkblue !important; }
.Hpink { color: black !important; }
.Hpurple { color: white !important; }
.Hgrey { color: #aaaaaa !important; }
.Bnone { background: #ffffff; }
.Bred { background: #ffb1b3; }
.Borange { background: #ffd88c; }
.Byellow { background: #fbff7f; }
.Bgreen { background: #d1ff7e; }
.Bblue { background: #bee9ff; }
.Bpink { background: #febcfb; }
.Bpurple { background: #be94d0; }
.Bgrey { background: #f0f0f0; }
/* Grey is special: the black of the icon image is reduced to grey. */
.Igrey { filter: invert(50%); }

.Hhide { color: black !important; }
.Bhide { background: #ffffff !important; }
.Ihide { filter: none !important; }

img.contentimg {
	width: 100%;
	height: 100%;
}

div.nodeheader {
	position: absolute;
	text-align: center;
	font: 12px sans-serif;
	user-select: none;
}
div.headerinside {
	word-break: break-all;
	top: 0;
	left: var(--margin);
	width: calc(100% - 2 * var(--margin));
	height: 100%;
}
div.headerbelow {
	min-width: 8em;
	width: 150%;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	/* border: 1px solid grey; */
	border-radius: 3px;
	background: rgba(255 255 255 / 80%);
	padding: 2px 2px 0;
	color: black !important;
}
div.headertopleft {
	top: 5%;
	text-align: left;
	left: var(--margin);
	width: calc(100% - 2 * var(--margin));
	height: 90%;
}

div.titleinside {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
div.titlebelow {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.titletopleft span { white-space: pre-wrap; }
.nodetitle span { cursor: pointer; }

div.nodeheader input.inplace_field {
	position: relative;
	left: -4em;
	width: 15em;
}
div.titlebelow .editInPlace-active {
	width: 6em;
	display: block;
}
div.titlebelow input.inplace_field {
	left: 0;
}

.marktitleM {
	color: rgb(153 51 0);
	position: relative;
}
.marktitleS {
	color: rgb(153 51 0);
	position: relative;
}
img.nodeC {
	position: absolute;
	top: -5px;
	right: -5px;
	width: 16px;
	height: 16px;
	box-shadow: 0 0 3px #999999;
	z-index: 15;
	cursor: context-menu;
	display: none;
}
.markhi { display: block; }
.marklo { display: none; }
img.nodeW {
	position: absolute;
	top: -5px;
	left: -5px;
	width: 15px;
	height: 15px;
	cursor: pointer;
	z-index: 15;
}

/* The selector 'div.nodeMagnitude' is magic. See PreferencesObject.setemblem()
 * rule.style.visibility='visible';
 * rule.style.width='8px';
 * rule.style.height='8px';
 * rule.style.top='-4px';
 * rule.style.left='-4px';
 * rule.style.color='black';
*/
div.nodeMagnitude {
	display: none;
	width: 8px;
	height: 8px;
	border-radius: 3px;
	border: 1px solid grey;
	text-align: center;
	position: absolute;
	color: transparent;
	top: -4px;
	left: -4px;
	z-index: 15;
	box-shadow: 0 0 3px #999999;
}
.M0 { background: rgb(255 255 255); }    /* '-' */
.M1 { background: rgb(255 0 255); }      /* 'A' */
.M2 { background: rgb(51 255 0); }       /* 'U' */
.M3 { background: rgb(204 255 0); }      /* 'L' */
.M4 { background: rgb(255 204 51); }     /* 'M' */
.M5 { background: rgb(255 153 153); }    /* 'H' */
.M6 { background: rgb(255 0 0); }        /* 'V' */
.M7 { background: rgb(153 204 255); }    /* 'X' */

/* Styling sticky notes */
.nodetNOT {
	height: fit-content !important;
	border: 1px solid grey;
	box-shadow: 0 0 10px #999999;
	padding: 5px !important;
	z-index: 15 !important;
	/* transform: rotate(0deg);  is set in rasterNode.js */
}
.nodetNOT span {
	font-family: serif;
	font-size: 115%;
}
.nodetNOT .nodeheader {
	position: unset;
}
#selectrect {
	position: absolute;
	display: none;
	z-index: 90;
}
#selectrect::after {
	display: inline-block;
	width: 100%;
	height: 100%;
	content: "";
	background: #0050ff;
	opacity: 0.2;
}
#selectrectC {
	top: 2px;
	right: 2px;
}

/* * * * * * * * * * * * * * * * *+-------------------------+* * * * * * * * * * * * * * * * *
 * * * * * * * * * * * * * * * * *|     SINGLE FAILURES     |* * * * * * * * * * * * * * * * *
 * * * * * * * * * * * * * * * * *+-------------------------+* * * * * * * * * * * * * * * * */

.sfworkspace {
	width: 900px;
}
.sfacclist {
	margin-top: 10px;
}

.firstp {
	margin-top: 22px;
}

/*
This tab (as does the common cause failures tab) borrows definitions from the dialogs
for checklists and threat evaluations.
*/
.sfaccordion {
	width: 800px !important;
	margin-bottom: 3px !important;
}
.sfaccordion h3.ui-state-active {
	border-bottom: none !important;
}
#tab_singlefs .ui-accordion-content {
	overflow: hidden;
}
.incomplete {
	margin-left: 2em;
	color: var(--warn);
}

.Magnitude {
	float: right;
	width: 3em;
	margin-left: 2em;
	border: 1px solid grey;
	color: black;
	text-align: center;
}
.Md {     /* disabled */
	border: 0;
	background: transparent;
}
.sflabelgroup {
	position: absolute;
	right: 40px;
	top: 5px;
	width: 175px;
}

/* * * * * * * * * * * * * * * * *+-------------------------+* * * * * * * * * * * * * * * * *
 * * * * * * * * * * * * * * * * *|  COMMON CAUSE FAILURES  |* * * * * * * * * * * * * * * * *
 * * * * * * * * * * * * * * * * *+-------------------------+* * * * * * * * * * * * * * * * */

#tab_ccfs {
	display: flex;
}
#ccfs_body {
	flex: 1 720px;
	position: unset; /* overwrite .workspace definition */
	padding-right: 15px !important;
	border-right: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	overflow-y: scroll !important;
}
#ccfs_details {
	flex: 1 500px;
	position: unset; /* overwrite .workspace definition */
	padding-left: 5px !important; /* Leave a bit of space for the scrollbar for #ccfs_body */
	padding-right: 10px !important;
	border-left: none;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	z-index: 99; /* Above .displayopts */
	overflow-y: scroll !important;
}
#ccfs_body p {
	margin-left: 15px;
	margin-top: 22px;
}
#ccfacclist {
	margin-top: 10px;
}
#outerimpacthint {
	position: absolute;
	width: 260px;
	height: 300px;
	left: 530px;
	top: 10px;
	border: 3px solid grey;
	background: whitesmoke;
	border-radius: 15px;
	z-index: 1200;
}
#outerimpacthint img {
	position: absolute;
	width: 64px;
	height: 74px;
	top: -20px;
	right: -47px;
}
#hintpoint {
	position: absolute;
	width: 0;
	height: 0;
	left: -40px;
	top: 135px;
	border: 20px solid grey;
	border-color: transparent grey transparent transparent;
}
#impacthint {
	position: relative;
	top: 0;
	left: 0;
	width: 240px;
	height: 280px;
	overflow: hidden;
	padding: 10px;
	line-height: 1.5em;
}
#impacthint ul {
	padding-left: 25px;
	line-height: 1.7em;
}
.ccfaccordion {
	margin-left: 10px !important;
	margin-bottom: 3px !important;
}
.ccfhighlight .ui-accordion-header {
	background: var(--highlt) !important;
}

.linechar {
	position: relative;
	left: 1px;
	top: -3px;
	overflow: visible;
	display: inline;
	float: left;
}
.lineimg {
	width: 12px;
	height: 25px;
}

.tlist {
	list-style-type: none;
}

.tlistitem {
	margin: 0 5px 5px 0;
	padding: 1px 5px;
	border: 1px solid #cccccc;
	border-radius: 3px;
	cursor: ns-resize;
	background: var(--vlightbg);
}
.hidepointer {
	cursor: none !important;
}
.li_selected {
	border: 1px solid #5080ff;
	background: #80c0ff;
	z-index: 2;
}
.tlistroot {
	margin: 0 5px 5px 0;
	padding: 1px 5px;
	border: 2px solid gray !important;
	font-size: 120%;
	border-radius: 3px;
}
.clusternode {
	position: sticky !important;
	top: 0;  /* Is incremented for each indent level; see listFromCluster() */
	z-index: 100;  /* Is decremented for each indent level; see listFromCluster() */
}
.clusternode.ui-draggable-dragging {
	position: relative !important;
}

#ccfs_details .ui-draggable-dragging {
	background-color: white;
	z-index: 999 !important;
	box-shadow: 5px 5px 5px #999999;
}

.tlisthigh {
	background: #ddffdd !important;
}

.tlisthover {
	background: #bbddbb !important;
}

.childnode {
	margin-left: 10px;
}

.labelind {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 150px;
}
.ccflabelgroup {
	position: absolute;
	right: 20px;
	top: 0;
	width: 175px;
}

.litext {
	cursor: text;
}

.clustericon {
	float: left;
	margin-left: -8px;
	margin-right: 2px;
	cursor: pointer;
}
/* * * * * * * * * * * * * * * * *+-------------------------+* * * * * * * * * * * * * * * * *
 * * * * * * * * * * * * * * * * *|         ANALYSIS        |* * * * * * * * * * * * * * * * *
 * * * * * * * * * * * * * * * * *+-------------------------+* * * * * * * * * * * * * * * * */

#tab_analysis h3 {
	background: var(--vlightbg);
	margin: 0 0 5px;
	padding: 15px 100px 5px;
}
#tab_analysis p {
	margin-top: 2px;
	margin-bottom: 1em;
}
#bottomtabsana {
	left: 0;	/* No correction for the width of the 'add a service' button is necessary, so remove the correction offset */
}

/* * * * * * * Vulnerability overview * * * * * * */
#at1 {
	/* Make sure single failures and CCFs are side by side */
	white-space: nowrap;
}
.ana_nodeccfblock {
	display: inline-block;
	vertical-align: top;
	padding-top: 10px;
	margin-right: 35px;
}
#ana_nodethreattable table {
	table-layout: fixed;
}
#ana_nodethreattable td {
	white-space: nowrap;
	text-align: center;
}
#ana_ccftable table {
	table-layout: fixed;
	margin-left: 2em;
}
#ana_ccftable td {
	white-space: nowrap;
	text-align: center;
}
.headercell {
	vertical-align: bottom;
	transform: translateX(12px) rotate(-50deg);
	transform-origin: bottom left;
	overflow: visible;
	height: 10em;
}
.blankcell { background: var(--vlightbg); }
.continuationcell { background: #faf8f8; }
.nodetitlecell {
	text-align: right !important;
	overflow: hidden;
	vertical-align: bottom;
}
.largetitlecell {
	font-size: 14px;
	text-decoration: underline;
}
.nodecell { cursor: pointer; }
.clustercell { cursor: pointer; }
.excluded {
	background: white !important;
	color: gray !important;
	text-decoration: line-through;
	border: 1px solid red;
	padding: 0;
}
.reduced {
	color: red;
	background: white;
	font-style: italic;
	margin-left: 0.6em;
}

/* * * * * * * Assessments overview * * * * * * */
#at2 table {
	table-layout: fixed;
}
#at2 td {
	white-space: nowrap;
	text-align: center;
}
#svulns_tabs {
	width: 75em;
	margin-top: 15px;
	padding: 0;
}
#svulns_tabs li {
	padding: 0 8em 0 0;
	margin-bottom: 0 !important;
	border-bottom-width: 0;
}
#svulns_tabs li a {
	padding: 0.5em 11em 0.5em 1em;
}
#svulns_tabs .ui-tabs-panel {
	height: auto;
}
.thinrow {
	height: 5px;
	vertical-align: bottom;
}

/* * * * * * * Node counts * * * * * * */
#at3 { width: 100vw; }
.servicestats {
	display: inline-block;
	margin: 15px;
}
.servicestats th {
	font-style: italic;
	font-weight: normal;
}
.statstype {
	text-align: right !important;
	padding-left: 6px;
}
.statsnum {
	text-align: left !important;
	padding-left: 14px;
}
.statstable {
	background: #faf8f8;
	border-bottom: 1px solid black;
	border-spacing: 0;
}

/* * * * * * * Checklist reports * * * * * * */
#at4 table {
	table-layout: fixed;
}
#at4 td {
	white-space: nowrap;
	text-align: center;
}
.checklistreport {
	display: inline-block;
	vertical-align: top;
}
.checklistreport p {
	width: 85%;
	margin-left: 10%;
}

/* * * * * * * Risk longlist * * * * * * */
#longlist {
	margin-top: 10px;
	margin-bottom: 60px;
}