@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;
}

#sai_task_logs_container div.taskinfo.taskstate1, div.taskinfo.taskstate1 { background: #d0d0d0; border-color: #d0d0d0; transition: background-color 500ms linear; }
#sai_task_logs_container div.taskinfo.taskstate2, div.taskinfo.taskstate2 { background: #a0a0a0; border-color: #a0a0a0; transition: background-color 500ms linear; }
#sai_task_logs_container div.taskinfo.taskstate3, div.taskinfo.taskstate3 { background: #01ff70; border-color: #01ff70; transition: background-color 500ms linear; }
#sai_task_logs_container div.taskinfo.taskstate4, div.taskinfo.taskstate4 { background: #ff851b; border-color: #ff851b; transition: background-color 500ms linear; }
#sai_task_logs_container div.taskinfo.taskstate5, div.taskinfo.taskstate5 { background: #808080; border-color: #808080; transition: background-color 500ms linear; }
#sai_task_logs_container div.taskinfo.taskstate6, div.taskinfo.taskstate6 { background: #df3030; border-color: #df3030; transition: background-color 500ms linear; }
#sai_task_logs_container div.taskinfo.taskstate10, div.taskinfo.taskstate10 { background: #ffdc00; border-color: #ffdc00; transition: background-color 500ms linear; }
#sai_task_logs_container div.taskinfo.taskstate11, div.taskinfo.taskstate11 { background: #b0c4de; border-color: #b0c4de; transition: background-color 500ms linear; }

#sai_task_logs_container div.taskinfo.taskstate6, #sai_task_logs_container div.taskinfo.taskstate6 span.ti1, #sai_task_logs_container div.taskinfo.taskstate6 span.ti5, #sai_task_logs_container div.taskinfo.taskstate6 div.sai_arts,
div.taskinfo.taskstate6, div.taskinfo.taskstate6 span.ti1, div.taskinfo.taskstate6 span.ti5, div.taskinfo.taskstate6 div.sai_arts {
	color: #ffffff;
}
#sai_task_logs_container div.taskinfo.taskstate5, #sai_task_logs_container div.taskinfo.taskstate5 span.ti1, #sai_task_logs_container div.taskinfo.taskstate5 span.ti5, #sai_task_logs_container div.taskinfo.taskstate5 div.sai_arts,
div.taskinfo.taskstate5, div.taskinfo.taskstate5 span.ti1, div.taskinfo.taskstate5 span.ti5, div.taskinfo.taskstate5 div.sai_arts {
	color: #ffffff;
}
#sai_task_logs_container div.taskinfo.taskstate6 a, #sai_task_logs_container div.taskinfo.taskstate5 a,
div.taskinfo.taskstate6 a, div.taskinfo.taskstate5 a {
	color: #ffffff;
}

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: 28px;
	height: 28px;
	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:#ffffff;
	opacity:1;
	transition: background-color 500ms linear;
}

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

/* an idle task's slice that the builder stopped, eg, for real work */
.taskstate11 {
	background:#b0c4de;
	color:#202830;
	opacity:1;
	transition: background-color 500ms linear;
}

/*
 * Idle tasks ("lanes") run in time the builders would otherwise spend idle.
 * While a slice runs they are shown at full strength, gently breathing; the
 * rest of the time, including when real work makes them yield, they fade back.
 */
div.taskstate.idle-lane, tr.tt-row.idle-lane {
	opacity: 0.35;
	transition: opacity 1.5s ease-in-out, background-color 500ms linear;
}

div.taskstate.idle-lane.taskstate1, div.taskstate.idle-lane.taskstate2,
div.taskstate.idle-lane.taskstate9,
tr.tt-row.idle-lane.taskstate1, tr.tt-row.idle-lane.taskstate2,
tr.tt-row.idle-lane.taskstate9 {
	opacity: 1;
}

div.taskstate.idle-lane.taskstate1, div.taskstate.idle-lane.taskstate2,
div.taskstate.idle-lane.taskstate9 {
	background: #9fd8b8;
	animation: idle-breathe 4s ease-in-out infinite;
}

@keyframes idle-breathe {
	0%, 100% {
		filter: brightness(1);
	}
	50% {
		filter: brightness(1.25);
	}
}

@media (prefers-reduced-motion: reduce) {
	div.taskstate.idle-lane.taskstate1, div.taskstate.idle-lane.taskstate2,
	div.taskstate.idle-lane.taskstate9 {
		animation: none;
	}
}

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: var(--term-black, #000); }
.ansi-fg-red     { color: var(--term-red, #A00); }
.ansi-fg-green   { color: var(--term-green, #0A0); }
.ansi-fg-yellow  { color: var(--term-yellow, #A50); }
.ansi-fg-blue    { color: var(--term-blue, #55F); }
.ansi-fg-magenta { color: var(--term-magenta, #A0A); }
.ansi-fg-cyan    { color: var(--term-cyan, #0AA); }
.ansi-fg-white   { color: var(--term-white, #AAA); }

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

.ansi-bg-black   { background-color: var(--term-black, #000); }
.ansi-bg-red     { background-color: var(--term-red, #A00); }
.ansi-bg-green   { background-color: var(--term-green, #0A0); }
.ansi-bg-yellow  { background-color: var(--term-yellow, #A50); }
.ansi-bg-blue    { background-color: var(--term-blue, #55F); }
.ansi-bg-magenta { background-color: var(--term-magenta, #A0A); }
.ansi-bg-cyan    { background-color: var(--term-cyan, #0AA); }
.ansi-bg-white   { background-color: var(--term-white, #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;
}

/*
 * Ad-hoc events: single-task events an admin seeded from an existing task.
 * Marked with a dashed border wherever the event appears so they read as
 * scratch builds rather than the state of the branch.
 */
.sb-event-row.adhoc {
	border: 1px dashed #7c3aed;
}

.sb-event-row.adhoc.selected {
	border: 2px dashed #7c3aed;
}

.event-tasks-header.adhoc {
	border: 1px dashed #7c3aed;
	border-radius: 4px;
}

table.comp.adhoc {
	border: 1px dashed #7c3aed;
}

.adhoc-tag {
	display: inline-block;
	font-size: 7pt;
	font-weight: normal;
	color: #7c3aed;
	border: 1px dashed #7c3aed;
	border-radius: 3px;
	padding: 0 4px;
	margin-left: 4px;
	vertical-align: middle;
}

/* modal dialog, used by the ad-hoc build dialog */

.sai-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 4000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sai-modal {
	background: #ffffff;
	border: 1px solid #94a3b8;
	border-radius: 6px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
	padding: 12px 16px;
	width: 90%;
	max-width: 760px;
	max-height: 90%;
	overflow: auto;
	font-size: 9pt;
	color: #1e293b;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sai-modal-title {
	font-size: 11pt;
	font-weight: bold;
}

.sai-modal-sub {
	font-size: 8pt;
	color: #64748b;
}

/* the global label rule floats labels into a narrow column; undo that here */
.sai-modal-label {
	float: none;
	display: block;
	width: auto;
	margin: 6px 0 0 0;
	font-size: 8.5pt;
	color: #334155;
}

.sai-modal-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sai-modal-input {
	font-family: monospace;
	font-size: 9pt;
	padding: 3px 5px;
	border: 1px solid #cbd5e1;
	border-radius: 3px;
}

.sai-modal-hash {
	font-family: monospace;
	font-size: 7.5pt;
	color: #64748b;
	min-height: 1.2em;
}

.sai-modal-textarea {
	font-family: monospace;
	font-size: 8.5pt;
	width: 100%;
	box-sizing: border-box;
	min-height: 220px;
	resize: vertical;
	border: 1px solid #cbd5e1;
	border-radius: 3px;
	padding: 4px;
	white-space: pre;
	overflow-wrap: normal;
	overflow-x: auto;
}

.sai-modal-note {
	font-size: 7.5pt;
	color: #64748b;
	text-align: right;
}

.sai-modal-note.over {
	color: #df3030;
}

.sai-modal-error {
	font-size: 8pt;
	color: #df3030;
	min-height: 1.2em;
}

.sai-modal-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 4px;
}

.sai-modal-button {
	font-size: 9pt;
	padding: 4px 12px;
	border: 1px solid #94a3b8;
	border-radius: 3px;
	background: #f1f5f9;
	cursor: pointer;
}

.sai-modal-button:hover {
	background: #e2e8f0;
}

.sai-modal-button.primary {
	background: #7c3aed;
	border-color: #6d28d9;
	color: #ffffff;
}

.sai-modal-button.primary:hover {
	background: #6d28d9;
}

.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: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.right-pane {
  flex: 0 0 0px;
  overflow-x: hidden;
  overflow-y: auto;
  flex-shrink: 0;
}
.resizer {
  width: 5px;
  cursor: ew-resize;
  background-color: #ccc;
  flex-shrink: 0;
  touch-action: none;
}

.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;
}

.login-status-container {
	margin-top: 6px;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	overflow: visible;
}
.login-status-container:empty {
	display: none;
}

.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: 4px;
}

.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;
	margin-right: 6px;
	margin-bottom: 6px;
}

.run-decal {
	position: relative;
	border-radius: 4px;
	display: inline-block;
	border: 1px solid #bbb;
	margin-right: 6px;
	margin-bottom: 6px;
}

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



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

.sai-terminal {
    --term-bg: #1e1e1e;
    --term-fg: #00ff00;
    --term-out: #ddd;
    --term-cursor-bg: rgba(0, 255, 0, 0.7);
    --term-cursor-fg: #1e1e1e;
    --term-title-bg: #333;
    --term-title-fg: #fff;
    --term-border: #555;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: var(--term-bg);
    color: var(--term-fg);
    font-family: 'Iosevka', monospace;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--term-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    z-index: 9999;
    resize: both;
    overflow: hidden;
}

.sai-terminal.theme-light {
    --term-bg: #f5f5f5;
    --term-fg: #000;
    --term-out: #333;
    --term-cursor-bg: rgba(0, 0, 0, 0.5);
    --term-cursor-fg: #fff;
    --term-title-bg: #ddd;
    --term-title-fg: #000;
    --term-border: #aaa;
    --term-blue: #00A;
    --term-bold-blue: #55F;
}

.sai-terminal-titlebar {
    background: var(--term-title-bg);
    color: var(--term-title-fg);
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    user-select: none;
    font-family: sans-serif;
    border-bottom: 1px solid var(--term-border);
}

.sai-terminal-burger {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 16px;
    cursor: pointer;
    margin-right: 8px;
    padding: 2px 6px;
}
.sai-terminal-burger:hover {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 3px;
}

.sai-terminal-menu {
    position: absolute;
    top: 30px;
    left: 10px;
    background: var(--term-bg);
    border: 1px solid var(--term-border);
    border-radius: 4px;
    padding: 5px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    z-index: 10000;
    display: none;
    min-width: 120px;
    font-family: sans-serif;
    color: var(--term-out);
}

.sai-terminal-menu.show {
    display: block;
}

.sai-terminal-menu-item {
    padding: 5px 15px;
    cursor: pointer;
}

.sai-terminal-menu-item:hover {
    background: var(--term-border);
}

.sai-terminal-title {
    font-weight: bold;
}

.sai-terminal-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    overflow: hidden;
    position: relative;
}

.sai-terminal-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.sai-terminal-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: sai-spin 1s ease-in-out infinite;
}

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

.sai-terminal-output {
    flex-grow: 1;
    overflow: hidden;
    margin: 0;
    white-space: pre;
    color: var(--term-out);
    line-height: 16px;
}

.sai-terminal-input {
    background: transparent;
    color: #fff;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    padding: 0;
    min-width: 200px;
}

.sai-terminal-err {
    color: #ff5555;
}

.builder-delete-btn {
    color: #e74c3c;
    font-weight: bold;
}

.builder-shell-btn {
    color: #3498db;
    font-weight: bold;
}

.sai-terminal-close {
    background: #e74c3c;
    border: none;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    font-weight: bold;
    padding: 2px 6px;
}

.sai-terminal-close:hover {
    background: #c0392b;
}

.term-cursor {
    background-color: var(--term-cursor-bg);
    color: var(--term-cursor-fg);
}

/* Color the avatar silhouette based on grant level */
.login-status-container.grant-admin img,
.login-status-container.grant-admin svg,
.login-status-container.grant-admin .avatar {
	filter: drop-shadow(0 0 2px rgba(46, 204, 64, 0.4));
	border-color: #2ecc40 !important;
}

.login-status-container.grant-admin svg path {
	fill: #2ecc40 !important;
}

.login-status-container.grant-user img,
.login-status-container.grant-user svg,
.login-status-container.grant-user .avatar {
	filter: drop-shadow(0 0 2px rgba(243, 156, 18, 0.4));
	border-color: #f39c12 !important;
}

.login-status-container.grant-user svg path {
	fill: #f39c12 !important;
}

.login-status-container.grant-none img,
.login-status-container.grant-none svg,
.login-status-container.grant-none .avatar {
	filter: drop-shadow(0 0 2px rgba(231, 76, 60, 0.4));
	border-color: #e74c3c !important;
	opacity: 0.6;
}

.login-status-container.grant-none svg path {
	fill: #e74c3c !important;
}

/* Three-pane layout styles */
.right-pane {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
}

/*
 * Builder list pane: a flex child of .right-pane.  Takes the remaining height
 * beneath the power overview and scrolls independently when the builder list is
 * taller than the viewport, so clipped builders stay reachable.  min-height:0
 * is required so the flex item can shrink below its content size and actually
 * scroll instead of forcing the pane to grow.
 */
#sai_builders {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
}

.sidebar-pane {
	flex: 0 0 auto;
	height: 150px;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	background: #f8f9fa;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	overflow: hidden;
	scrollbar-width: thin;
}

.sidebar-pane .sb-col {
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;	/* allow flex children to actually scroll */
	max-height: 100%;
	height: 100%;
	border-right: 1px solid rgba(0, 0, 0, 0.10);
	padding: 4px 6px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.sidebar-pane .sb-col:last-child {
	border-right: none;
}

/* col 1: logo + login.  Top-aligned with scroll fallback so the logo can
 * never be clipped by the pane's overflow:hidden. */
.sidebar-pane .sb-col-logo {
	flex: 0 0 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	background: #ffffff;
	overflow-y: auto;
	padding: 4px 6px;
}

.sidebar-pane .sb-col-logo .logo {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	width: auto;
}

.sidebar-pane .sb-col-logo img.logo {
	width: 110px;
	height: auto;
	display: block;
	flex: 0 0 auto;
}

/* vertical stack of "Sai git" + "API rev N" to the right of the logo image */
.sidebar-pane .sb-col-logo .logo-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
}

/* override the global span.logo (Sai git / apirev) for the narrow column */
.sidebar-pane .sb-col-logo span.logo {
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
	display: block;
}

/* rss feed link under "Sai git" / apirev */
.sidebar-pane .sb-col-logo a.logo-rss {
	display: block;
	line-height: 0;
	margin-top: 2px;
}

.sidebar-pane .sb-col-logo a.logo-rss img {
	width: 16px;
	height: 16px;
}

/* col 2 + col 3: selectable project / branch lists */
.sidebar-pane .sb-col-projects,
.sidebar-pane .sb-col-branches {
	flex: 0 0 130px;
}

/* col 4: events (most-recent-first), takes the remaining space.
 * Not a flex container: the rows are block-level and the column itself is
 * the scroll region (overflow-y:auto comes from .sb-col). */
.sidebar-pane .sb-col-events {
	flex: 1 1 50%;
}

/* selectable row in col 2 / col 3 */
.sb-row {
	display: block;
	padding: 2px 6px;
	margin: 1px 0;
	border-radius: 3px;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	font-size: 9pt;
	color: #1e293b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sb-row:hover {
	background: #e2e8f0;
}

.sb-row.selected {
	background: #334155;
	color: #ffffff;
	font-weight: bold;
}

/*
 * Branch rows are coloured by the state of their newest event: green for a
 * successful build, red for a failed one (states 3 / 4 / 6, matching the
 * event-row semantics).  Ongoing / waiting states keep the default styling.
 * Brighter hues are used on the dark selected-row background so the colour
 * stays readable whether or not the branch is the current selection.
 */
.sb-row.comp_pass {
	color: #1b8f3a;
}
.sb-row.comp_fail {
	color: #c3261d;
}
.sb-row.selected.comp_pass {
	color: #2ecc40;
}
.sb-row.selected.comp_fail {
	color: #ff6b61;
}

/* event rows in col 4 */
/*
 * Tabular event rows: CSS grid with fixed-width columns so the date/time,
 * tag, status and progress-bar cells line up across all rows regardless of
 * their content width (the date/time and tag are constant width; status is
 * auto so it takes its natural size; the bar is a fixed 250px).
 */
.sb-event-row {
	display: grid;
	grid-template-columns: 150px 96px minmax(60px, auto) 250px;
	align-items: center;
	column-gap: 10px;
	padding: 2px 10px;
	margin: 1px 0;
	border-radius: 4px;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	background: #f1f5f9;
	border: 1px solid #cbd5e1;
	font-size: 9pt;
	color: #1e293b;
	white-space: nowrap;
	overflow: hidden;
}

.sb-event-row:hover {
	border-color: #94a3b8;
}

.sb-event-row.comp_pass {
	background: #01ff70;
	border-color: #2ecc40;
}

.sb-event-row.comp_fail {
	background: #ff4136;
	color: #ffffff;
	border-color: #df3030;
}

.sb-event-row.selected {
	border: 2px solid #000000;
}

.sb-event-row .sb-event-when {
	font-family: 'OpenSans', sans-serif;
	font-size: 8pt;
	color: #64748b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sb-event-row.comp_fail .sb-event-when {
	color: #fde2e0;
}

.sb-event-row .sb-event-tag {
	font-family: monospace;
	font-size: 9pt;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sb-event-row .sb-event-status {
	font-size: 8.5pt;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* progress bar slot: fixed compact width, inline on the same row */
.sb-event-row .sb-event-bar {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}
.sb-event-row .sb-event-bar:empty {
	display: none;
}

.sb-event-row .progress-bar {
	width: 100%;
	min-width: 0;
	height: 8px;
}

.sb-empty {
	color: #64748b;
	font-size: 9pt;
	font-style: italic;
	padding: 4px 6px;
}

.tasks-section {
	flex: 0 0 200px;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	overflow-y: auto;
	padding: 12px;
	background: #ffffff;
	min-height: 100px;
}

.resizer-h {
	height: 5px;
	cursor: ns-resize;
	background-color: #ccc;
	flex-shrink: 0;
	touch-action: none;
}

.event-tasks-header {
	margin-bottom: 8px;
	padding-bottom: 4px;
	border-bottom: 1px solid #f1f5f9;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.event-tasks-title {
	font-weight: bold;
	font-size: 11pt;
	color: #1e293b;
	flex: 1 1 auto;
	min-width: 0;
}

.event-tasks-header img.rebuild {
	display: inline-block;
}

/* reflect the event's completion state on the header background, like div4 */
.event-tasks-header.comp_pass {
	background: #01ff70;
	border-bottom-color: #2ecc40;
}
.event-tasks-header.comp_fail {
	background: #ff4136;
	color: #ffffff;
	border-bottom-color: #df3030;
}
.event-tasks-header.comp_fail .event-tasks-title {
	color: #ffffff;
}

/*
 * Links into the repo's gitweb (event weburl): keep the surrounding text
 * styling (so pass/fail backgrounds still read), hint with hover underline
 */
.event-tasks-title a,
.sb-event-tag a,
span.e1 a,
span.e2 a,
td.e6 a {
	color: inherit;
	text-decoration: none;
}

.event-tasks-title a:hover,
.sb-event-tag a:hover,
span.e1 a:hover,
span.e2 a:hover,
td.e6 a:hover {
	text-decoration: underline;
}

.tasks-table-display {
	width: 100%;
	border-collapse: collapse;
}

.tasks-table-display td.tasks {
	border: none !important;
	padding: 0 !important;
}

.logs-section {
	flex: 1 1 0%;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #ffffff;
	color: #000000;
	position: relative;
}

#sai_task_logs_container .undernailed {
	margin-left: 0;
	top: 0;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#sai_task_logs_container #summary {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: transparent;
	margin: 0;
	padding: 0;
}

#sai_task_logs_container #sai_overview {
	flex-grow: 1;
	overflow-y: auto;
	min-height: 0;
	padding: 10px;
	scrollbar-width: thin;
}

#sai_task_logs_container #sai_sticky {
	position: relative;
	float: none;
	background: #ffffff;
	width: 100%;
	z-index: 10;
	border-bottom: 1px solid #e2e8f0;
}

/* Override taskinfo to be relative when inside Section 3 */
#sai_task_logs_container div.taskinfo {
	position: relative;
	background: #ffffff;
	color: #000000;
	border-style: none;
	border-bottom: 1px solid #e2e8f0;
	margin: 0;
	padding: 8px 12px;
	width: auto;
	z-index: 10;
	flex-shrink: 0;
}

#sai_task_logs_container div.taskinfo table {
	color: #000000;
}

#sai_task_logs_container div.taskinfo span.ti1 {
	color: #000000;
	font-weight: bold;
}

#sai_task_logs_container div.taskinfo span.ti5 {
	color: #64748b;
}

#sai_task_logs_container div.taskinfo table.comp {
	display: none; /* Hide the duplicate event decal in the logs header since we have Section 1 */
}

/* Scrolllogs light styling */
#sai_task_logs_container table.scrollogs {
	margin-top: 0px;
	background: #ffffff;
	width: 100%;
}

#sai_task_logs_container table.scrollogs td.atop {
	vertical-align: top;
}

#sai_task_logs_container div.dlogs {
	background: #ffffff;
	color: #000000;
}

#sai_task_logs_container div.dlogsn a {
	color: #64748b;
	text-decoration: none;
}

#sai_task_logs_container div.dlogsn a:hover {
	color: #334155;
}

#sai_task_logs_container div.dlogst {
	color: #64748b;
}

.no-tasks, .no-events, .loading-logs {
	padding: 20px;
	text-align: center;
	color: #64748b;
	font-style: italic;
}

.loading-logs {
	color: #888888;
}

/* Pagination card inside horizontal scroll */
.pagination-card {
	display: inline-block;
	flex: 0 0 auto;
	background: #e2e8f0;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	padding: 6px 10px;
	cursor: pointer;
	align-self: center;
	font-weight: bold;
	height: fit-content;
	transition: all 0.2s;
	color: #334155;
	user-select: none;
}

.pagination-card:hover {
	background: #cbd5e1;
	color: #0f172a;
}



/*
 * Tasks pane split: full-width header, then the sectionalized view (left)
 * and the sortable task table (right) with a draggable splitter between.
 * The header stays put; each sub-pane scrolls on its own.
 */
.tasks-section {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.tasks-section > .event-tasks-header {
	flex: 0 0 auto;
}

.tasks-split {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: row;
}

.tasks-split-left {
	flex: 1 1 50%;
	min-width: 0;
	overflow: auto;
}

.tasks-split-right {
	flex: 1 1 50%;
	min-width: 0;
	overflow: auto;
}

/*
 * 13px wide hit target (finger-friendly) drawing the same 5px bar the
 * other resizers use; touch-action: none so the browser doesn't turn a
 * touch drag into a pan of the surrounding scrollers
 */
.resizer-v {
	width: 13px;
	cursor: ew-resize;
	background: linear-gradient(to right, transparent 4px, #ccc 4px,
				    #ccc 9px, transparent 9px);
	flex-shrink: 0;
	touch-action: none;
}

/* the task table itself */
table.tt {
	border-collapse: collapse;
	width: 100%;
	font-size: 8pt;
	white-space: nowrap;
}

table.tt th.tt-th {
	position: sticky;
	top: 0;
	/* above the platform icons: img.zup is positioned at z-index 11 */
	z-index: 20;
	background: #f1f5f9;
	color: #1e293b;
	text-align: left;
	font-size: 8pt;
	font-weight: 600;
	padding: 2px 6px;
	border-bottom: 1px solid #cbd5e1;
	cursor: pointer;
	user-select: none;
}

table.tt th.tt-th:hover {
	background: #e2e8f0;
}

table.tt th.tt-th.sort-asc::after {
	content: " \25B2";
	font-size: 6pt;
}

table.tt th.tt-th.sort-desc::after {
	content: " \25BC";
	font-size: 6pt;
}

table.tt td {
	padding: 1px 6px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	vertical-align: middle;
}

table.tt td.tt-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* rows take their colour from the shared .taskstateN rules */
tr.tt-row {
	cursor: pointer;
	transition: background-color 500ms linear;
}

tr.tt-row:hover td {
	box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.07);
}

tr.tt-row.selected td {
	box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.14);
	font-weight: bold;
}

/* small inline progress bar beside "step n/m" for tasks being built */
.tt-bar {
	display: inline-block;
	width: 48px;
	height: 6px;
	margin-left: 6px;
	vertical-align: middle;
	background: rgba(0, 0, 0, 0.12);
	border-radius: 3px;
	overflow: hidden;
}

.tt-bar > span {
	display: block;
	height: 100%;
	background: #01ff70;
}

.taskstate6 .tt-bar > span {
	background: #ffffff;
}

/* findings, admins only */

.findings-btn {
	display: block;
	margin: 4px 0 0 0;
	font-size: 8pt;
	padding: 2px 8px;
	border: 1px solid #94a3b8;
	border-radius: 3px;
	background: #f1f5f9;
	cursor: pointer;
}

.findings-btn.hidden {
	display: none;
}

.findings-btn.unacked {
	background: #df3030;
	border-color: #b91c1c;
	color: #ffffff;
	font-weight: bold;
}

.sai-modal.findings-modal {
	max-width: 1200px;
}

.findings-table {
	border-collapse: collapse;
	width: 100%;
	font-size: 8pt;
}

.findings-table th {
	text-align: left;
	color: #64748b;
	font-weight: normal;
	border-bottom: 1px solid #cbd5e1;
	padding: 2px 4px;
}

.findings-table td {
	padding: 2px 4px;
	border-bottom: 1px solid #f1f5f9;
	vertical-align: top;
}

.findings-row.status1 td, .findings-row.status2 td {
	color: #94a3b8;
}

.findings-row.unacked td.findings-status {
	color: #ffffff;
	background: #df3030;
	font-weight: bold;
}

.findings-row.unacked.regressed td.findings-status {
	background: #ff851b;
}

.findings-id, .findings-frames, .findings-ok {
	font-family: monospace;
}

.findings-frames {
	max-width: 360px;
	overflow-wrap: anywhere;
}

.findings-num {
	text-align: right;
}

.findings-actions {
	white-space: nowrap;
}

.sai-modal-button.small {
	font-size: 7.5pt;
	padding: 1px 6px;
	margin-right: 2px;
}

.findings-detail.hidden {
	display: none;
}

.findings-report {
	font-family: monospace;
	font-size: 7.5pt;
	max-height: 360px;
	overflow: auto;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	padding: 4px;
	white-space: pre;
}