@font-face {
  font-family: 'OpenSans';
  src: url('OpenSans-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Iosevka';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/iosevka-term-ss01-regular.ttf') format('truetype');
}


body {
  font-family: 'OpenSans', Fallback, sans-serif;
}


.content { vertical-align:top; text-align:center; background:#fffff0; padding:12px; -webkit-border-radius:10px; border-radius:10px; }
.canvas { vertical-align:top; text-align:center; background:#efefd0; padding:12px; -webkit-border-radius:10px; border-radius:10px; }


div.zi {
	z-index: 1000
}

td.al {
	text-align: left
}

img.tread1 {
	margin-left: -6px;
	z-index: 10
}

img.tread2 {
	margin-left: -6px;
	z-index: 9
}

img.zup {
	position: relative;
	z-index: 11
}

.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}

.fading-out {
	opacity: 0;
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

td.waiting {
	vertical-align:top;
	text-align:left;
	color:#000000; 
	padding:1px;
	font-size: 9pt;
	font-weight: bold;
	border-radius:5px
}

td.waiting_gi {
	vertical-align:top;
	text-align:left;
	color:#000000; 
	padding:0px;
	font-size: 9pt;
	font-weight: bold;
	border-radius:2px;
}

table.events-table {
	border-spacing: 0 10px;
}

table.comp {
	border-radius:7px;
	width: 100%
}

table.comp_pass {
	background:#01ff70;
}

table.comp_fail {
	background:#ff4136;
	color:#fff;
}

div.ov_good {
	background:#2ecc40;
}

div.ov_bad {
	background: #ff4136;
	color:#fff;
}

span.ov_bad {
	color:#fff
}

div.ov_dunno {
	background:#d0d0d0;
}

img.deemph {
	opacity: 0.6;
}

td.tasks {
	vertical-align:top;
	text-align:center;
	background:#f0f0f0;
	color:#000000;
	padding:0px;
	font-weight: normal; 
	border-radius:6px;
}

td.ti {
	vertical-align: top;
	margin-left: 4px;
}

td.atop {
	vertical-align: top;
}

td.keepline {
	display: inline-flex;
}

td.jumble {
	position: relative;
	vertical-align: top;
	white-space: nowrap;
}

img.saicon {
	width: 24px;
	height:24px;
	padding-right:3px;
}

span.group2 {
	vertical-align:middle;
	text-align:center;
	background:#f0f0f0;
	color:#000000;
	padding:3px;
	font-weight: normal;
	-webkit-border-radius:3px; 
	border-radius:3px;
}

span.stderr {
	color: #44f;
}
span.saibuild {
	color: #68a;
}
span.tty0 {
	color: #884;
}
span.tty1 {
	color: #848;
}


span.noscript {
	font-size: 200%;
}

span.nowrap {
	white-space: pre;
}

div.taskinfo {
	vertical-align: top;
	position: fixed;
	background: #fff;
	z-index: 2002;
	border-style: solid;
	border-width: 3px 16px 0px 16px;
	border-color: #fff;
	margin-top: -3px;
}

table.scrollogs {
	margin-top: 64px;
}

div.taskstate {
	font-weight: normal;
	font-size: 7pt;
	padding:1px;
	margin-right:1px;
	border-radius:3px;
	white-space: nowrap;
}

div.nailed {
        background: #fff;
        width:auto;
        z-index:1001;
        margin-top:-12px;
}

div.undernailed {
        position:relative;
        top: 0px;
        margin-left: 8px;
}


div.evr {
	position: absolute;
	top: 16px;
	left: 16px;
}
div.evr_gi {
	display: inline-block;
	width: 16px;
	height: 16px;
}

div.gi_popup {
	box-shadow: 3px 5px 5px 0px #444;
	left: 0px;
	z-index: -2;
	background: #ffe;
	opacity: 0.0;
	transition: opacity 1s ease;
	display: block;
	position: absolute;
	margin-top: 35px
}

.taskstate0 {
	color:#000000;
	opacity:0.5;
}

.taskstate1 {

	color:#000000;
	opacity:0.6;
}

img.ip {
	width: 16px;
	height: 16px;
	vertical-align:middle;
}

img.ip0 {
	width: 16px;
	height: 16px;
	vertical-align:middle;
}

img.ip1 {
	width: 18px;
	height: 18px;
	vertical-align:top;
}

img.ip2 {
	width: 19px;
	height: 19px;
	vertical-align:text-bottom;
}

img.rebuild {
	width: 16px;
	height: 16px;
	vertical-align:middle;
	cursor: pointer;
}

img.bico {
	width: 12px;
	height: 12px;
	vertical-align:middle;
}

@keyframes stretch {
  0%, 100% {
    opacity: 0.8;
  }
  0% {
    opacity: 0.3;
  }
}

.taskstate1 {
	background: #d0d0d0;
	color:#000000;
	opacity:1;
	transition: background-color 500ms linear;
}

.taskstate2 {
	background:#a0a0a0;
	color:#000000;
	opacity:1;
	transition: background-color 500ms linear;
}

.taskstate3 {
	background:#01ff70;
	color:#003000;
	opacity:1;
	transition: background-color 500ms linear;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


.taskstate4 {
	background:#ff851b;
	color:#300000;
	opacity:1;
	transition: background-color 500ms linear;
}

.taskstate5 {
	background:#808080;
	color:#202020;
	opacity:1;
	transition: background-color 500ms linear;
}

.taskstate6 {
	background:#df3030;
	color:#300000;
	opacity:1;
	transition: background-color 500ms linear;
}

.taskstate10 {
	background:#ffdc00;
	color:#302000;
	opacity:1;
	transition: background-color 500ms linear;
}

div.stats_hidden {
	display: none;
}

div.dlogs {
	vertical-align: top;
	font-size: 11px;
	font-family: "Iosevka";

-webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
        text-size-adjust: none;
}
div.dlogsn {
	vertical-align: top;
	font-size: 11px;
	font-family: "Iosevka";
	text-align:right;
	width: 5em;
	margin-top: 0px;
	margin-right: 3px;
-webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
        text-size-adjust: none;

}
div.dlogst {
	vertical-align: top;
	font-size: 11px;
	color:#808080;
	font-family: "Iosevka";
	text-align:right;
	width: 5em;
	margin-top: 0px;
	margin-right: 3px;
-webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
        text-size-adjust: none;

}

div.hide {
	display: none;
}

td.hide {
	display: none;
}

input.crin {
	font-size: 7pt;
	width: 60px;
}

input.crinb {
	font-size: 7pt;
	margin-top: 4px;
}

label {
	float: left;
	width: 4.5em;
	margin-right: 1em;
}

form.login {
	width: auto;
	color:#808080;
	text-align: right;
}

div.login {
	display: inline-block;
	vertical-align: middle;
	font-size: 7pt;
	color:#3d9970;
	text-align:left;
	margin: 0px 16px 0px 16px;
	padding: 2px 3px;
	border-radius:5px;
}


div.sai_arts {
	display: inline-flex;
	vertical-align: middle;
	font-size: 7pt;
	background-color:#ddd;
	color:#3d9970;
	text-align:left;
	margin: 3px 2px;
	padding: 2px 3px;
	border-radius:5px;
}

span.ti1 {
	font-weight: normal;
	font-size: 9pt;
	color:#000000;
	padding:3px;
	border-radius:3px;
	white-space: nowrap;
}

span.ti2 {
	font-weight: normal;
	font-size: 7pt;
}

span.ti3 {
	font-weight: normal;
	font-size: 7pt;
}

span.ti4 {
	font-weight: normal;
	font-size: 7pt;
}
span.ti5 {
	font-weight: normal;
	font-size: 7pt;
}

span.e1 {
	font-weight: bold;
	font-size: 11pt;
}

span.e2 {
	font-weight: normal;
	font-size: 10pt;
}

span.e3 {
	font-weight: normal;
	font-size: 8pt;
}

td.e4 {
	font-weight: normal;
	font-size: 8pt;
	text-align: right;
}

td.e6 {
	font-weight: normal;
	font-size: 6pt;
	text-align: right;
}
	
table.summary {
	width: 100%;
	padding: 1px;
	margin: 1px;
}

img.bsvg {
	height: 50px;
	width: auto;
	padding:3px;
}

div.builder {
	display: inline-block;
}

div.sticky {
	float: left;
	position: absolute;
}

td.topregion {
	vertical-align: top
}

div.logo {
	display: inline-block;
	margin: 3px;
	margin-right: 4px;
	padding: 2px;
	vertical-align: middle;
	z-index: 1002;
	width: 164px;
	height: auto;
	font-size: 6pt;
}

img.logo {
	width: 158px;
	height: auto;
}

span.logo {
	margin: 3px;
	margin-right: 4px;
	padding: 2px;
	vertical-align: middle;
	z-index: 1002;
	width: 164px;
	height: auto;
	font-size: 7pt;
	text-align: left;
}

td.summary {
	background: #f8f8f8;
	width: 100%;
	margin: 4px;
	padding: 4px; 
}

td.builder-info {
	vertical-align: top;
}

td.bn {
	font-weight: normal;
	font-size: 7pt;
	padding: 1px;
	position: relative;
}

td.bins {
	font-weight: normal;
	font-size: 9pt;
	text-align: center;
}

td.tn {
	font-weight: normal;
	font-size: 7pt;
	padding-left:0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

table.nomar {
	padding: 0px;
	margin: -3px;
	width: 100%;
       text-align:center;
}

td.nomar {
	padding: 0px;
	margin: 0px;
}

div.ib {
	display: inline-block;
	vertical-align:middle;
	text-align:left;
	line-height: 50%;
	float:left;
	margin: 0.1em;
	font-weight: normal;
	font-size: 7pt;
	padding: 1.1px 1.5px 1.1px 1.5px;
	border-radius:3px;
}

div.ibuil {
	display: inline-block;
	vertical-align:top;
	text-align:left;
	line-height: normal;
	float:left;
	margin: 0.1em;
	font-weight: normal;
	font-size: 7pt;
	background:#c0c0e0;
	color:#000000;
	padding:3px;
	border-radius:10px;
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
	width: 80px;
}

div.ibuil table {
	table-layout: fixed;
}

div.ibuil.power-unmanaged {
	border: 2px solid black;
}

div.ibuil.power-stay {
	border: 2px solid green;
}

div.ibuil.power-stay-dep {
	border: 2px solid blue;
}


div.ibuilctr {
	font-weight: normal;
	font-size: 9pt;
	background:#e0e0ff;
}

div.ibuilctrname {
	display: inline-block;
	vertical-align:middle;
	text-align:left;
	line-height: 50%;
	float:left;
	margin: 0.1em;
	font-weight: normal;
	font-size: 9pt;
	color:#000000;
	padding:3px;

}

div.plat {
	display: inline-block;
	vertical-align:middle;
	text-align:left;
	line-height: 50%;
	float:left;
	margin: 0.1em;
	font-weight: normal;
	font-size: 7pt;
	color:#000000;
	padding:3px;
	border-radius:3px;
}

div.pass {
	display: inline-block;
	background:#40e040;
}

div.fail {
	display: inline-block;
	background:#40e040;
}

div.awaiting {
	display: inline-block;
}

div.bdr {
	display: inline-block;
	opacity: 1;
       transition: opacity 2s ease;
}

.bdr.offline {
	background: #e0e0e0;
	color: #666666;
	border: 1px solid #b0b0b0;
	filter: grayscale(100%);
}

/* Style for the powering-up state */
.powering-up {
	position: relative; /* Needed for the ::after pseudo-element */
}

/* The spinner pseudo-element */
.powering-up::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px; /* Adjust size as needed */
	height: 24px;
	margin-top: -12px; /* Half of height */
	margin-left: -12px; /* Half of width */
	border: 3px solid rgba(0, 0, 0, 0.2);
	border-top-color: #007bff; /* Spinner color */
	border-radius: 50%;
	animation: spin 1s linear infinite;
	z-index: 10; /* Ensure it's on top */
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Style for the powering-down state */
.powering-down {
	position: relative; /* Needed for the ::after pseudo-element */
}

/* The spinner pseudo-element */
.powering-down::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px; /* Adjust size as needed */
	height: 24px;
	margin-top: -12px; /* Half of height */
	margin-left: -12px; /* Half of width */
	border: 3px solid rgba(0, 0, 0, 0.2);
	border-top-color: #ff4136; /* Spinner color */
	border-radius: 50%;
	animation: spin 1s linear infinite;
	z-index: 10; /* Ensure it's on top */
}


img.branch {
	display: inline-block;
	float:left;
	background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNi43NDkgMjcuMjIyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImIiIHg9Ii0uMDcwOCIgeT0iLS4wNzA4IiB3aWR0aD0iMS4xNDE2IiBoZWlnaHQ9IjEuMTQxNiIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMC4yNTQyNzk1MyIvPgo8L2ZpbHRlcj4KPGZpbHRlciBpZD0iYSIgeD0iLS4wOTA1NjgiIHk9Ii0uMDQ2MjE0IiB3aWR0aD0iMS4xODExIiBoZWlnaHQ9IjEuMDkyNCIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMC40Nzk4NDA4OSIvPgo8L2ZpbHRlcj4KPC9kZWZzPgo8bWV0YWRhdGE+CjxyZGY6UkRGPgo8Y2M6V29yayByZGY6YWJvdXQ9IiI+CjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0Pgo8ZGM6dHlwZSByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIi8+CjxkYzp0aXRsZS8+CjwvY2M6V29yaz4KPC9yZGY6UkRGPgo8L21ldGFkYXRhPgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzAuNzQ3IC02OS40NTQpIj4KPGNpcmNsZSBjeD0iODQuMTIxIiBjeT0iODMuMDIyIiByPSIxMy4zNzQiIGZpbGw9Im5vbmUiLz4KPHBhdGggZD0ibTgzLjc3MyA3MC42MDZjLTEuMTg2MiAwLjAxNTQtMi4zNDE4IDAuODQ2ODgtMi40Nzc0IDEuOTk4OGwtMC4wMTI0IDAuMDQ5MWMtMC4xNDk5IDUuNjExMi0wLjA0NzQgMTEuMjUyLTAuMTExNjIgMTYuODc0IDAuMDU4MSAxLjg3NzctMC40NDMzNyAzLjg0NDEgMC44NjgxNyA1LjIwMTIgMS43NDYyIDEuNzQ0NSA0LjIzMTcgMC40OTM5MyA0LjE0MjQtMi41MTU2IDAuMDQ1NS0wLjkyODQyIDAuMDExNy0xLjQwMiAwLjExMDA3LTMuMjM0OSAxLjUwNTIgMS4xMzQ4IDIuOTYwNCAyLjk5NjYgNC44MTk5IDMuNTIzOCAyLjAzNzEgMC4zMTUyOCAzLjQ3NDgtMi4yMDU1IDIuMzEyLTMuODU1MS0yLjI5OTItMi4yMDI1LTQuODIwMi00LjA1Ny03LjE2Ni02LjIyODYgMC4xMzg5MyA0LjMwOTcgMC4wMTc2LTYuMTQyIDAuMDQ2NS05LjYwNjctMC40MTQzLTEuNTk4LTEuNDg0OS0yLjIxOTYtMi41MzE2LTIuMjA2MXem0wLjE4NDQ5IDExLjg4M2EyLjA3ODkgMi4wNzg5IDAgMCAxIDIuMDc4OSAyLjA3ODkgMi4wNzg5IDIuMDc4OSAwIDAgMS0yLjA3ODkgMi4wNzkgMi4wNzg5IDIuMDc4OSAwIDAgMS0yLjA3ODQtMi4wNzkgMi4wNzg5IDIuMDc4OSAwIDAgMSAyLjA3ODQtMi4wNzg5eiIgZmlsdGVyPSJ1cmwoI2EpIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iLjI2NDU4cHgiLz4KPHBhdGggZD0ibTgzLjUxOCA3MC4yODNjLTEuMTg2MiAwLjAxNTQtMi4zNDE4IDAuODQ2ODgtMi40Nzc0IDEuOTk4OGwtMC4wMTI0IDAuMDQ5MWMtMC4xNDk5IDUuNjExMi0wLjA0NzQgMTEuMjUyLTAuMTExNjIgMTYuODc0IDAuMDU4MSAxLjg3NzctMC40NDMzNyAzLjg0NDEgMC44NjgxNyA1LjIwMTIgMS43NDYyIDEuNzQ0NSA0LjIzMTcgMC40OTM5MyA0LjE0MjQtMi41MTU2IDAuMDQ1NS0wLjkyODQyIDAuMDExNy0xLjQwMiAwLjExMDA3LTMuMjM0OSAxLjUwNTIgMS4xMzQ4IDIuOTYwNCAyLjk5NjYgNC44MTk5IDMuNTIzOCAyLjAzNzEgMC4zMTUyOCAzLjQ3NDgtMi4yMDU1IDIuMzEyLTMuODU1MS0yLjI5OTItMi4yMDI1LTQuODIwMi00LjA1Ny03LjE2Ni02LjIyODYgMC4xMzg5MyA0LjMwOTcgMC4wMTc2LTYuMTQyIDAuMDQ2NS05LjYwNjctMC40MTQzLTEuNTk4LTEuNDg0OS0yLjIxOTYtMi41MzE2LTIuMjA2MXem0wLjE4NDQ5IDExLjg4M2EyLjA3ODkgMi4wNzg5IDAgMCAxIDIuMDc4OSAyLjA3ODkgMi4wNzg5IDIuMDc4OSAwIDAgMS0yLjA3ODkgMi4wNzkgMi4wNzg5IDIuMDc4OSAwIDAgMS0yLjA3ODQtMi4wNzkgMi4wNzg5IDIuMDc4OSAwIDAgMSAyLjA3ODQtMi4wNzg5eiIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9Ii4yNjQ1OHB4Ii8+CjxwYXRoIGQ9Im04My43MTYgODAuMThhNC4zMDk3IDQuMzA5NyAwIDAgMC00LjMwOTggNC4zMDk4IDQuMzA5NyA0LjMwOTcgMCAwIDAgNC4zMDk4IDQuMzA5OCA0LjMwOTcgNC4zMDk3IDAgMCAwIDQuMzA5OC00LjMwOTggNC4zMDk3IDQuMzA5NyAwIDAgMC00LjMwOTgtNC4zMDk4em0wLjAzMzYgMi4xMDQ4YTIuMTcxNiAyLjE3MTYgMCAwIDEgMi4xNzE1IDIuMTcxNSAyLjE3MTYgMi4xNzE2IDAgMCAxLTIuMTcxNSAyLjE3MTQgMi4xNzE2IDIuMTcxNiAwIDAgMS0yLjE3MTQtMi4xNzE0IDIuMTcxNiAyLjE3MTYgMCAwIDEgMi4xNzE0LTIuMTcxNXoiIGZpbGw9IiNmZmYiIGZpbHRlcj0idXJsKCNiKSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9Ii41Ii8+CjxwYXRoIGQ9Im04My42NjkgODAuMDYyYTQuMzA5NyA0LjMwOTcgMCAwIDAtNC4zMDk4IDQuMzA5OCA0LjMwOTcgNC4zMDk3IDAgMCAwIDQuMzA5OCA0LjMwOTggNC4zMDk3IDQuMzA5NyAwIDAgMCA0LjMwOTgtNC4zMDk4IDQuMzA5NyA0LjMwOTcgMCAwIDAtNC4zMDk4LTQuMzA5OHptMC4wMzM2IDIuMTA0OGEyLjE3MTYgMi4xNzE2IDAgMCAxIDIuMTcxNSAyLjE3MTQgMi4xNzE2IDIuMTcxNiAwIDAgMS0yLjE3MTUgMi4xNzE0IDIuMTcxNiAyLjE3MTYgMCAwIDEtMi4xNzE0LTIuMTcxNCAyLjE3MTYgMi4xNzE2IDAgMCAxIDIuMTcxNC0yLjE3MTR6IiBmaWxsPSIjZmZmIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iLjYiLz4KPC9nPgo8L3N2Zz4K");
	width:0px;
	height:0px;
	cursor:pointer;
	padding: 0.6em;
	background-repeat: no-repeat;
	vertical-align:middle;
	color: rgba(0, 0, 0, 0);
}

/* The actual colored bar inside the box */
.inst_bar {
	background-color: #00afff; /* A nice, high-contrast green */
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: height 0.2s ease-out; /* Smoothly animate height changes */
}

@keyframes flash-slow {
  50% { opacity: 0.8; }
}
@keyframes flash-medium {
  50% { opacity: 0.8; }
}
@keyframes flash-fast {
  50% { opacity: 0.8; }
}

.activity-1 {
	animation: flash-slow 4s infinite;
}
.activity-2 {
	animation: flash-medium 2s infinite;
}
.activity-3 {
	animation: flash-fast 1s infinite;
}

.context-menu {
	position: absolute;
	background-color: #f9f9f9;
	font-size: 8pt;
	border: 1px solid #ccc;
	padding: 5px;
	z-index: 3000;
}

.context-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.context-menu li {
	padding: 8px 12px;
	cursor: pointer;
}

.context-menu li:hover {
	background-color: #f2f2f2;
}

.context-menu li.read-only {
    cursor: default;
    color: #888;
}

.context-menu li.read-only:hover {
    background-color: inherit;
}

.float-right {
	float: right;
}

.progress-bar {
    width: calc(100% - 10px);
    background-color: #f1f1f1;
    height: 10px;
    border-radius: 5px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    overflow: hidden;
    border: 1px solid black;
}

.w-0 { width: 0%; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

.progress-bar-success {
    background-color: #4CAF50; /* green */
    height: 10px;
    float: left;
}

.progress-bar-pending {
    background-color: #ffffff; /* white */
    height: 10px;
    float: left;
}

.progress-bar-ongoing {
    background-color: #000000; /* black */
    height: 10px;
    float: left;
}

.progress-bar-failed {
    background-color: #f44336; /* red */
    height: 10px;
}

/* ANSI Color Support */
.ansi-bold { font-weight: bold; }
.ansi-underline { text-decoration: underline; }

.ansi-fg-black   { color: #000; }
.ansi-fg-red     { color: #A00; }
.ansi-fg-green   { color: #0A0; }
.ansi-fg-yellow  { color: #A50; }
.ansi-fg-blue    { color: #00A; }
.ansi-fg-magenta { color: #A0A; }
.ansi-fg-cyan    { color: #0AA; }
.ansi-fg-white   { color: #AAA; }

/* Bright colors for bold text */
.ansi-bold .ansi-fg-black   { color: #555; }
.ansi-bold .ansi-fg-red     { color: #F55; }
.ansi-bold .ansi-fg-green   { color: #5F5; }
.ansi-bold .ansi-fg-yellow  { color: #FF5; }
.ansi-bold .ansi-fg-blue    { color: #55F; }
.ansi-bold .ansi-fg-magenta { color: #F5F; }
.ansi-bold .ansi-fg-cyan    { color: #5FF; }
.ansi-bold .ansi-fg-white   { color: #FFF; }

.ansi-bg-black   { background-color: #000; }
.ansi-bg-red     { background-color: #A00; }
.ansi-bg-green   { background-color: #0A0; }
.ansi-bg-yellow  { background-color: #A50; }
.ansi-bg-blue    { background-color: #00A; }
.ansi-bg-magenta { background-color: #A0A; }
.ansi-bg-cyan    { background-color: #0AA; }
.ansi-bg-white   { background-color: #AAA; }

.step-progress {
    display: flex;
    width: 16px; /* Match the icon width */
    height: 2px;
    margin-top: 1px;
}

.step-bar {
    flex-grow: 1;
    height: 100%;
    background-color: white;
    margin-right: 1px;
    border: solid 1px #a0a0a0;
}

.step-bar:last-child {
    margin-right: 0;
}

.step-bar-completed {
    background-color: black;
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}

body.overlay-active {
    overflow: hidden;
}

.spreadsheet {
  margin-top: 2px;
  font-size: 7pt;
}
.spreadsheet table {
  width: 100%;
  border-collapse: collapse;
}
.spreadsheet th, .spreadsheet td {
  border: 0px solid #ddd;
  padding: 2px;
  font-size: 7pt;
  text-align: left;
}
.spreadsheet tr {
	transition: opacity 3s linear;
}
.spreadsheet th {
  background-color: #f2f2f2;
}

.main-container {
  display: flex;
  height: 100vh;
}
.left-pane {
  flex: 0 0 30%;
  overflow: auto;
  flex-shrink: 0;
}
.right-pane {
  flex-grow: 1;
  overflow: auto;
}
.resizer {
  width: 5px;
  cursor: ew-resize;
  background-color: #ccc;
  flex-shrink: 0;
}

.step-progress {
    display: flex;
    align-items: center;
}

.step-block {
    width: 8px;
    height: 8px;
    border: 1px solid #aaa;
    margin-right: 2px;
}

.step-done {
    background-color: #555;
}

.step-current {
    background-color: #aaa;
}

.step-pending {
    background-color: #fff;
}

.step-label {
    font-size: 7pt;
    margin-left: 4px;
}

.resource-bars {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-top: 2px;
}

.res-bar {
	height: 2px;
	background-color: rgba(0, 0, 0, 0.2);
	border: 1px solid #fff;
	width: 100%;
}

.res-bar-inner {
	height: 100%;
	transition: width 0.2s ease-out;
}

.res-bar-cpu {
	background-color: #ff4136; /* Red */
}

.res-bar-ram {
	background-color: #0074d9; /* Blue */
}

.res-bar-disk {
	background-color: #2ecc40; /* Green */
}

.res-bar.empty {
  border: 1px solid #777;
  height: 5px;
  width: 24px;
  margin-bottom: 1px;
}

/* PCON Styles */

.pcon {
    margin-bottom: 5px;
    padding-left: 5px;
}

.pcon-header {
    font-weight: bold;
    font-size: 0.5em;
    padding: 2px;
    background-color: #e0e0e0;
    border-radius: 3px;
    display: flex;
    align-items: center;
}

.pcon-on {
    color: #2ecc40; /* Green */
    margin-right: 5px;
}

.pcon-off {
    color: #aaaaaa; /* Grey */
    margin-right: 5px;
}

.pcon-type {
    font-weight: normal;
    font-size: 0.8em;
    color: #666;
    margin-left: 5px;
}

.pcon-children {
    padding-left: 10px;
    border-left: 2px solid #ddd;
    margin-top: 2px;
}

.pcon-orphans .pcon-header {
    background-color: #ffe0e0;
}

.builder-name-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: 2px;
}

.builder-short-name {
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex-grow: 1;
	text-align: left;
	min-width: 0;
}

.builder-icons {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.logo-login-container {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
	flex-wrap: nowrap;
}

.login-status-container {
	margin-left: 10px;
	margin-top: 4px;
}

.log-segment-wrapper {
	margin: 2px 0;
}
.log-segment-body .log-segment-wrapper {
	margin-left: 1em;
}
.log-segment-header {
	background-color: #f8f9fa;
	cursor: pointer;
	padding: 1px 2px;
	border: 1px solid #ddd;
	font-weight: bold;
	font-family: 'OpenSans', sans-serif;
	font-size: 11px;
	margin: 0;
	user-select: none;
	-webkit-user-select: none;
	border-radius: 2px;
}
.log-segment-header.has-error {
	background-color: #ffdddd;
}
.log-segment-header.has-warning {
	background-color: #ffedcc;
}
.log-segment-header:hover {
	background-color: #e9ecef;
}
.log-segment-body {
	border-left: 1px solid #ddd;
	padding-left: 2px;
	margin-left: 2px;
}
.fold-icon {
	display: inline-block;
	width: 10px;
	text-align: center;
}

.sai-pagination {
    text-align: center;
    margin: 20px 0;
}

.sai-pagination-info {
    color: #fff;
    margin: 0 15px;
}

.seg-errors-bold {
    font-weight: bold;
}

.seg-fail-red {
    background-color: red !important;
    color: white !important;
}

.seg-header-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
    padding: 0;
}
.seg-header-table td {
	padding: 0;
}

.seg-td-icon {
    width: 40px;
    text-align: center;
}

.seg-header-table .seg-td-lines, .seg-header-table .seg-td-errors {
    width: 100px;
    text-align: right;
    padding-right: 10px;
}

.seg-td-title {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.power-overview {
	padding: 5px 10px;
	margin-bottom: 10px;
	background: rgba(0,0,0,0.05);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
div.power-overview.hidden {
	display: none;
}
div.power-text {
	font-weight: bold;
	font-size: 0.7em;
	white-space: nowrap;
	margin-right: 10px;
}
canvas.power-graph {
	width: 150px;
	height: 20px;
	display: block;
	border: 1px solid #ccc;
	background: #fff;
	box-sizing: border-box;
}

.pcon-header-on {
    background-color: #79da80;
}

.pcon-header-on .pcon-on, .pcon-header-on .pcon-off {
    color: #000000;
}

.plat-peer-ip {
    font-size: 0.8em;
    color: #555;
    display: block;
    word-break: break-all;
    margin-top: 2px;
}
.watchers-row {
	display: flex;
	flex-wrap: wrap;
	padding: 4px;
	gap: 8px;
}

.watcher {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 4px;
	padding: 2px 4px;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.watcher-icon {
	width: 20px;
	height: 20px;
	margin-right: 4px;
	vertical-align: middle;
}

.watcher-metrics {
	display: flex;
	gap: 4px;
	font-size: 8pt;
	font-weight: bold;
}

.watcher-metric {
	background: rgba(0, 0, 0, 0.05);
	padding: 1px 4px;
	border-radius: 3px;
}

.watcher-fail {
	background: #ff4136;
	color: white;
}

.watcher-warn {
	background: #ffdc00;
	color: black;
}
.taskstate1.prog-0 { background: linear-gradient(90deg, #01ff70 0%, transparent 0%); }
.taskstate1.prog-5 { background: linear-gradient(90deg, #01ff70 5%, transparent 5%); }
.taskstate1.prog-10 { background: linear-gradient(90deg, #01ff70 10%, transparent 10%); }
.taskstate1.prog-15 { background: linear-gradient(90deg, #01ff70 15%, transparent 15%); }
.taskstate1.prog-20 { background: linear-gradient(90deg, #01ff70 20%, transparent 20%); }
.taskstate1.prog-25 { background: linear-gradient(90deg, #01ff70 25%, transparent 25%); }
.taskstate1.prog-30 { background: linear-gradient(90deg, #01ff70 30%, transparent 30%); }
.taskstate1.prog-35 { background: linear-gradient(90deg, #01ff70 35%, transparent 35%); }
.taskstate1.prog-40 { background: linear-gradient(90deg, #01ff70 40%, transparent 40%); }
.taskstate1.prog-45 { background: linear-gradient(90deg, #01ff70 45%, transparent 45%); }
.taskstate1.prog-50 { background: linear-gradient(90deg, #01ff70 50%, transparent 50%); }
.taskstate1.prog-55 { background: linear-gradient(90deg, #01ff70 55%, transparent 55%); }
.taskstate1.prog-60 { background: linear-gradient(90deg, #01ff70 60%, transparent 60%); }
.taskstate1.prog-65 { background: linear-gradient(90deg, #01ff70 65%, transparent 65%); }
.taskstate1.prog-70 { background: linear-gradient(90deg, #01ff70 70%, transparent 70%); }
.taskstate1.prog-75 { background: linear-gradient(90deg, #01ff70 75%, transparent 75%); }
.taskstate1.prog-80 { background: linear-gradient(90deg, #01ff70 80%, transparent 80%); }
.taskstate1.prog-85 { background: linear-gradient(90deg, #01ff70 85%, transparent 85%); }
.taskstate1.prog-90 { background: linear-gradient(90deg, #01ff70 90%, transparent 90%); }
.taskstate1.prog-95 { background: linear-gradient(90deg, #01ff70 95%, transparent 95%); }
.taskstate1.prog-100 { background: linear-gradient(90deg, #01ff70 100%, transparent 100%); }
.taskstate2.prog-0 { background: linear-gradient(90deg, #01ff70 0%, transparent 0%); }
.taskstate2.prog-5 { background: linear-gradient(90deg, #01ff70 5%, transparent 5%); }
.taskstate2.prog-10 { background: linear-gradient(90deg, #01ff70 10%, transparent 10%); }
.taskstate2.prog-15 { background: linear-gradient(90deg, #01ff70 15%, transparent 15%); }
.taskstate2.prog-20 { background: linear-gradient(90deg, #01ff70 20%, transparent 20%); }
.taskstate2.prog-25 { background: linear-gradient(90deg, #01ff70 25%, transparent 25%); }
.taskstate2.prog-30 { background: linear-gradient(90deg, #01ff70 30%, transparent 30%); }
.taskstate2.prog-35 { background: linear-gradient(90deg, #01ff70 35%, transparent 35%); }
.taskstate2.prog-40 { background: linear-gradient(90deg, #01ff70 40%, transparent 40%); }
.taskstate2.prog-45 { background: linear-gradient(90deg, #01ff70 45%, transparent 45%); }
.taskstate2.prog-50 { background: linear-gradient(90deg, #01ff70 50%, transparent 50%); }
.taskstate2.prog-55 { background: linear-gradient(90deg, #01ff70 55%, transparent 55%); }
.taskstate2.prog-60 { background: linear-gradient(90deg, #01ff70 60%, transparent 60%); }
.taskstate2.prog-65 { background: linear-gradient(90deg, #01ff70 65%, transparent 65%); }
.taskstate2.prog-70 { background: linear-gradient(90deg, #01ff70 70%, transparent 70%); }
.taskstate2.prog-75 { background: linear-gradient(90deg, #01ff70 75%, transparent 75%); }
.taskstate2.prog-80 { background: linear-gradient(90deg, #01ff70 80%, transparent 80%); }
.taskstate2.prog-85 { background: linear-gradient(90deg, #01ff70 85%, transparent 85%); }
.taskstate2.prog-90 { background: linear-gradient(90deg, #01ff70 90%, transparent 90%); }
.taskstate2.prog-95 { background: linear-gradient(90deg, #01ff70 95%, transparent 95%); }
.taskstate2.prog-100 { background: linear-gradient(90deg, #01ff70 100%, transparent 100%); }
.taskstate6.prog-0 { background: linear-gradient(90deg, #df3030 0%, transparent 0%); }
.taskstate6.prog-5 { background: linear-gradient(90deg, #df3030 5%, transparent 5%); }
.taskstate6.prog-10 { background: linear-gradient(90deg, #df3030 10%, transparent 10%); }
.taskstate6.prog-15 { background: linear-gradient(90deg, #df3030 15%, transparent 15%); }
.taskstate6.prog-20 { background: linear-gradient(90deg, #df3030 20%, transparent 20%); }
.taskstate6.prog-25 { background: linear-gradient(90deg, #df3030 25%, transparent 25%); }
.taskstate6.prog-30 { background: linear-gradient(90deg, #df3030 30%, transparent 30%); }
.taskstate6.prog-35 { background: linear-gradient(90deg, #df3030 35%, transparent 35%); }
.taskstate6.prog-40 { background: linear-gradient(90deg, #df3030 40%, transparent 40%); }
.taskstate6.prog-45 { background: linear-gradient(90deg, #df3030 45%, transparent 45%); }
.taskstate6.prog-50 { background: linear-gradient(90deg, #df3030 50%, transparent 50%); }
.taskstate6.prog-55 { background: linear-gradient(90deg, #df3030 55%, transparent 55%); }
.taskstate6.prog-60 { background: linear-gradient(90deg, #df3030 60%, transparent 60%); }
.taskstate6.prog-65 { background: linear-gradient(90deg, #df3030 65%, transparent 65%); }
.taskstate6.prog-70 { background: linear-gradient(90deg, #df3030 70%, transparent 70%); }
.taskstate6.prog-75 { background: linear-gradient(90deg, #df3030 75%, transparent 75%); }
.taskstate6.prog-80 { background: linear-gradient(90deg, #df3030 80%, transparent 80%); }
.taskstate6.prog-85 { background: linear-gradient(90deg, #df3030 85%, transparent 85%); }
.taskstate6.prog-90 { background: linear-gradient(90deg, #df3030 90%, transparent 90%); }
.taskstate6.prog-95 { background: linear-gradient(90deg, #df3030 95%, transparent 95%); }
.taskstate6.prog-100 { background: linear-gradient(90deg, #df3030 100%, transparent 100%); }

.taskstate.has_runs {
	border: 1px solid black;
	margin: 0px;
	position: relative;
	z-index: 10;
}

.taskstate.has_runs:hover {
	z-index: 1001;
	opacity: 1.0 !important;
}

.runs-popup {
	display: none;
	position: absolute;
	background: #ccc;
	border: 1px solid black;
	padding: 5px;
	z-index: 2000;
	opacity: 1.0 !important;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.taskstate:hover {
	opacity: 1.0 !important;
}

.taskstate:hover .runs-popup {
	display: block;
}

.runs-popup table {
	border-collapse: collapse;
}

.runs-popup td {
	padding: 2px 5px;
	white-space: nowrap;
}

.runs-header-container {
	margin-top: -8px;
}

.runs-table {
	border-collapse: separate;
	border-spacing: 4px 0px;
}

.runs-table td {
	text-align: center;
	padding: 0px 2px;
}

.runs-popup table {
	border-collapse: collapse;
}

.runs-popup td {
	padding: 2px 8px;
	text-align: left;
}

.run-current-decal {
	border: 2px solid #000;
	position: relative;
	border-radius: 4px;
	display: inline-block;
}

.run-decal {
	position: relative;
	border-radius: 4px;
	display: inline-block;
}

.runs-time-cell {
	white-space: nowrap;
}



div.ibuil.vm-builder {
        background: #e6ce8a;
}