html {
	background: rgb(20,105,138);
	background: linear-gradient(90deg, rgba(144,21,136,1) 0%, rgba(144,21,136,0.78) 100%);
}

/* Soleil Light
font-family: soleil, sans-serif;
font-weight: 300;
font-style: normal;

Soleil Regular
font-family: soleil, sans-serif;
font-weight: 400;
font-style: normal;

Soleil Book
font-family: soleil, sans-serif;
font-weight: 500;
font-style: normal;

Soleil Semibold
font-family: soleil, sans-serif;
font-weight: 600;
font-style: normal;

Soleil Bold
font-family: soleil, sans-serif;
font-weight: 700;
font-style: normal;

Soleil Extrabold
font-family: soleil, sans-serif;
font-weight: 800;
font-style: normal; */

body {
	font-family: soleil,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	background: none;
	font-weight: 300;
}

body .container-fluid {
	overflow: hidden;
	margin-top: 0px;
}

.container {
	background: none;
	overflow: auto !important;
	//overflow: scroll !important;
}

.navbar-brand {
	position: absolute;
	left: 15px;
	top: 10px;
}
.navbar-brand a {
	color: rgb(255,255,255,0.5) !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	font-size: 1.5em !important;
}
.navbar-brand a:hover {
	color: rgb(255,255,255,1) !important;
}


.fullscreen {
	margin-top: 20px;
	height: 98vh;
	//background-color: #f00 !important;
}

#modetoggle {
	position: absolute;
	top: 10px; right: 15px;
}
#modetoggle label, #modetoggle .btn-check:checked label, #modetoggle button {
	color: rgb(255,255,255,0.8) !important;
	font-size: 1em !important;
	padding: 2px 10px;
}
#modetoggle label:hover {
	color: rgb(144,21,136,0.8) !important;
}
#modetoggle .btn-check:active+.btn, .btn-check:checked+.btn, .btn.active, .btn.show, .btn:active {
	background-color: rgb(255,255,255,0.4);
	color: rgb(255,255,255,0.8) !important;
}
#modetoggle .btn-check:hover, #modetoggle button:hover {
	background-color: rgb(255,255,255,0.8);
	color: rgb(255,255,255,1) !important;
}
#modetoggle .btn-check:checked label {
	background-color: rgb(255,255,255,0) !important;
	color: rgb(255,255,255,1) !important;
}
.bi-plus-square-fill, .bi-person-square { 
	opacity: 0.8;
	height: 26px; 
	width: 26px;
}.bi-plus-square-fill:hover, .bi-person-square:hover { 
	opacity: 1;
}


#quadrant {
	position: absolute;
	top: 40px;
	left: 0; right: 0; bottom: 0;
	overflow: hidden;
}

#vert-axis {
	position: absolute;
	left: 50%;
	width: 2px;
	top: 0px;
	height: calc(100vh - 50px);
	background-color: white;
}
#horiz-axis {
	position: absolute;
	top: 50%;
	width: calc(100% - 40px);
	left: 20px;
	height: 2px;
	background-color: white;
}
.axes-label {
	color: rgb(255,255,255,0.8);
	font-size: 1em;
	line-height: 1em;
	cursor: default;
}
#vert-label {
	position: absolute;
	left: calc(50% + 7px);
	top: 0px;
}
#horiz-label {
	position: absolute;
	right: 20px;
	top: calc(50% + 5px);
	text-align: right;
}




.zone-label {
	position: absolute;
	color: rgb(255,255,255,0.25);
	font-size: 2em;
	line-height: 1em;
	font-weight: 800;
	cursor: default;
	text-align: center;
}
#coe-zone { right: 5%; top: 12%; }
#uni-zone { left: 5%; top: 12%; }
#elsa-zone{ right: 5%; bottom: 22%; }


.opp-circle {
	//text-align: center;
	color: #fff;
	border: 1px solid;
	border-radius: 50%;
	background-color: rgb(255,255,255,0.1);
	//overflow: hidden;
	//cursor: pointer;
}
a .opp-circle:hover {
	background-color: rgb(255,255,255,0.9);
}
a .opp-circle.opp-status3:hover {
	background-color: rgb(0,0,0,0.3);
}
.opp-circle.opp-state2 {  /* being written up */
	border: 1px solid rgb(255,255,255,0.2);
	background-color: rgb(200,200,225,0); */
}
.opp-circle.opp-state3 {  /* ready for review */
	border: 1px solid rgb(255,255,255,0.4);
	background-color: rgb(200,200,225,0.05); */
}
.opp-circle.opp-state4 {  /* for consideration */
	border: 1px solid rgb(255,255,255,0.6);
	background-color: rgb(200,200,225,0.2); */
}
.opp-circle.opp-state5 {  /* shortlisted */
	border: 1px solid rgb(255,255,255,0.8);
	background-color: rgb(210,210,225,0.35); */
}
.opp-circle.opp-state6 {  /* RAPID  */
	border: 1px solid rgb(255,255,255,1);
	background-color: rgb(220,220,225,0.5); */
}
.opp-circle.opp-state7 {  /* PoC */
	border: 1px solid rgb(255,255,255,1);
	background-color: rgb(230,230,225,0.65); */
}
.opp-circle.opp-state8 {  /* Projects */
	border: 1px solid rgb(255,255,255,1);
	background-color: rgb(240,240,225,0.75); */
}
.opp-circle.opp-status2 {  /* on hold  */
	border: 1px dashed rgb(255,255,255,0.5);
	border-radius: 50%;
	background-color: rgb(255,255,255,0);
}
.opp-circle.opp-status3 {  /*  no pursue */
	border: 1px solid rgb(0,0,0,0.2);
	border-radius: 50%;
	background-color: rgb(0,0,0,0.05);
}

.opptext { 
	opacity: 0; 
	display: none;
}
.opp-code {
	font-weight: 700;
	font-size: 70%;
	line-height: 1em;
	color: rgb(255,255,255,0.6);
}
.opp-name {
	line-height: 0.95em;
}

#coe-zone, .coe-radii, #uni-zone, .uni-radii, #elsa-zone, .elsa-radii { opacity: 0; }

#quadfilters {
	position: absolute;
	left: 20px; bottom: 20px;
	font-size: 0.9em;
}
#trlfilters {
	position: absolute;
	left: 30px; bottom: 120px;
	font-size: 0.9em;
}
#flowfilters {
	position: absolute;
	left: 40%; bottom: 20px;
	font-size: 0.9em;
}
#quadfilters select, #trlfilters select, #flowfilters select {
	border: 1px solid rgba(255,255,255,0.6);
	background-color: rgba(255,255,255,0);
	padding: 1px 5px 1px 5px;
	color: rgb(255,255,255,0.7);
	-webkit-appearance:none;
	margin-top: 3px;
	background: rgba(144,21,136,0.8);
}


#trl #vert-axis {
	position: absolute;
	left: 15px;
	width: 2px;
	top: 50px;
	height: calc(100vh - 70px);
	background-color: white;
}
#trl #vert-label {
	position: absolute;
	left: 20px;
	top: 48px;
}

#trl1 {position: absolute; top: 50px; left: calc( 0%   + 18px); width: 10.75%; height: calc(100vh - 70px); background-color: rgb(255,255,255,0.0)}
#trl2 {position: absolute; top: 50px; left: calc(10.75% + 18px); width: 10.75%; height: calc(100vh - 70px); background-color: rgb(255,255,255,0.03)}
#trl3 {position: absolute; top: 50px; left: calc(21.50% + 18px); width: 10.75%; height: calc(100vh - 70px); background-color: rgb(255,255,255,0.06)}
#trl4 {position: absolute; top: 50px; left: calc(32.25% + 18px); width: 10.75%; height: calc(100vh - 70px); background-color: rgb(255,255,255,0.09)}
#trl5 {position: absolute; top: 50px; left: calc(43.00% + 18px); width: 10.75%; height: calc(100vh - 70px); background-color: rgb(255,255,255,0.12)}
#trl6 {position: absolute; top: 50px; left: calc(53.75% + 18px); width: 10.75%; height: calc(100vh - 70px); background-color: rgb(255,255,255,0.15)}
#trl7 {position: absolute; top: 50px; left: calc(64.50% + 18px); width: 10.75%; height: calc(100vh - 70px); background-color: rgb(255,255,255,0.18)}
#trl8 {position: absolute; top: 50px; left: calc(75.25% + 18px); width: 10.75%; height: calc(100vh - 70px); background-color: rgb(255,255,255,0.21)}
#trl9 {position: absolute; top: 50px; left: calc(86.00% + 18px); right: 17px; height: calc(100vh - 70px); background-color: rgb(255,255,255,0.24)}

.trllabel {
	text-align: center;
	color: rgb(255,255,255,0.1);
	font-size: 2.6em;
	font-weight: 800;
	margin-top: 84vh;
}
.trlname {
	text-align: center;
	color: rgb(255,255,255,0.4);
	font-size: 1.2em;
	margin-top: -8px;
}




.main {
	margin-top: 100px;
	color: white;
	font-size: 1.2em;
}
.oppcode {
	font-size: 75%;
	font-weight: 800;
	opacity: 0.6 !important;
}
/* select.form-control {
	font-size: 85%;
	padding: 3px 6px;;
	background: none;
	color: white;
} */
.outlink {
	color: rgb(255,255,255,0.8);
	text-decoration: none;
}
.outlink:hover {
	color: rgb(255,255,255,1);
	text-decoration: underline;
}
.table {
	color: white;
}
#ratingstable thead tr th {
	text-align: center;	
	padding-top: 0px;
}
#ratingstable tr th {
	text-align: right;
}
#ratingstable td {
	text-align: center;
}
.table tfoot {
	background-color: rgb(255,255,255,0.2);
	font-weight: 800;
}


#opplist tbody tr:hover {
	background-color: rgb(255,255,255,0.2);
}
#opplist tbody td:hover {
	cursor: pointer;
}}



input[type=range] {
  height: 41px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 24px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 2px 2px 3px #000000;
  background: rgb(255,255,255,0.5);
  border-radius: 50px;
  border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 2px 2px 2px #000000;
  border: 1px solid #000000;
  height: 32px;
  width: 15px;
  border-radius: 16px;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgb(255,255,255,0.5);
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 24px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 2px 2px 3px #000000;
  background: rgb(255,255,255,0.5);
  border-radius: 50px;
  border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 2px 2px 2px #000000;
  border: 1px solid #000000;
  height: 32px;
  width: 15px;
  border-radius: 16px;
  background: #32639C;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 24px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: rgb(255,255,255,0.5);
  border: 0px solid #000000;
  border-radius: 100px;
  box-shadow: 2px 2px 3px #000000;
}
input[type=range]::-ms-fill-upper {
  background: rgb(255,255,255,0.5);
  border: 0px solid #000000;
  border-radius: 100px;
  box-shadow: 2px 2px 3px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 2px 2px 2px #000000;
  border: 1px solid #000000;
  height: 32px;
  width: 15px;
  border-radius: 16px;
  background: #32639C;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: rgb(255,255,255,0.5);
}
input[type=range]:focus::-ms-fill-upper {
  background: rgb(255,255,255,0.5);
}
.ratinglabel {
	display: block;
	line-height: 1.15em !important;
	font-weight: 300 !important;
	color: rgb(255,255,255,0.5);
	font-size: 75%;
}

th a {
	text-decoration: none;
	color: rgb(255,255,255,0.8);
}
th a:hover {
	text-decoration: underline;
	color: rgb(255,255,255,1);
}