/*@node = 584*/
:root {
	--wdth: 1rem;/*variable called wdth - change this to affect both the width and left/right margins of the table*/
	--wdth2: 2rem;
	--syscolour1: #93dfe3;
	--syscolour2: #6b15d5;
	--syscolour3: #000050;
	--syscolour4: #49c9d0;
	--syscolour5: #328fff;
	--syscolour6: #2bffc1;
	--syscolour7: #000000;/*Black*/
	--syscolour8: #ffffff;/*White*/
	--syscolour9: #666666;
}
body {
	margin: 0;
	padding: 0;
	background: white;
	font-family: 'Roboto', sans-serif;
	font-size: 0.8em;
	overflow: auto !important;
	color: #6e6e6e;
}

TABLE {
	font-size: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

TH {
	border: 0;
	padding: 0;
	text-align: left;
}

TD {
	border: 0;
	padding: 0;
}

FORM, P {
	padding: 0;
	margin: 0;
	border: 0;
}

LI {
	margin: 0 0 5px 0;
}

A {
	text-decoration: none;
	font-weight: bold;
	color: #000000;
}

A:hover {
	color: #999999;
	cursor: pointer;
}

img {
	border: none;
}

DIV {
	margin: 0;
	padding: 0;
	border: 0;
}
sup {
	font-style: italic;
}

/*************************************************************/
/*					   FORM ELEMENTS					   */
/*************************************************************/
input {
	border-radius: 2px;
	border: 1px solid;
	color: #6e6e6e;
}
select {
	color: #6e6e6e;
}
label {
	color: #666;
}
input[type="submit"], input[type="button"], button {
	color: #fff;
	background-color: #616b6f;
	border-radius: 3px;
	border: none;
	/*font-weight: bolder;*/
	padding: 3px 5px;
}
input[type="submit"]:disabled, input[type="button"]:disabled {
	color: #95a5a6;
	background-color: #e4ecef;
	cursor:not-allowed;
}

input[type="submit"]:hover:enabled, input[type="submit"]:focus:enabled, input[type="button"]:hover:enabled, input[type="button"]:focus:enabled {
	background-color: #95a5a6;
	border: none;
}
input[type="submit"]:hover:enabled, input[type="button"]:hover:enabled {
	cursor: pointer;
}

/***************************************************************/
/*					   LAYOUT ELEMENTS					   */
/***************************************************************/

/****** sidebar ******/
A#hidebutton {
	position: fixed;
	top: 110px;
	right: 20px;
	z-index: 2;
}
.pagespecific {
	position: absolute;
	overflow: hidden;
	top: 100px;
	bottom: 0;
	left: 85%;
	right: 0;
	background: #FFFFFF;
	z-index: 1;
	padding: 10px;
	display: block;
}
.usefullinks, .usefullinks a, .relatedlinks, .relatedlinks a {
	color: #6e6e6e;
	font-weight: normal;
	/*line-height: 1.5em;*/
}
.usefullinks h2, .relatedlinks h2 {
	color: #6e6e6e;
}
ul.usefullinksbox {
	margin: 0;
	padding: 0;
}
.pagespecific .usefullinksbox {
	font-size: 1.2em;
	border-radius: .2em;
	border: 3px solid;
	display: table;
	width: 100%;
}
.usefullinksbox span:nth-child(1) {
	width: 20%;
}
.pagespecific .related {
	border-color: #000000;
	padding: 10px;
  	width: calc(100% - 20px);
  	list-style: none;
}
.pagespecific .related a:not(.button):hover {
	text-decoration: underline;
}
.pagespecific .doclib {
	border-color: #c0504d;
}
.pagespecific .contact {
	border-color: #f79646;
}
.pagespecific .market {
	border-color: #8db4e2;
}
.doclib span, .contact span, .market span {
	display: table-cell;
	padding: 10px;
	vertical-align: middle;
}

.sbar {
	position: fixed;
	overflow: auto;
	top: 100px;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	background: #FFFFFF;
	width: 300px;
	font-size: 1.2em;
	border-right: 1px #E8E8E8 solid;
}
.sbar ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.sbar li {
	border-bottom: thin #E8E8E8 solid;
	vertical-align: middle;
	width: 300px;
	margin: 0;
}
.sbar li a {
	height: 60px;
	display: table-cell;
	vertical-align: middle;
	color: #6e6e6e;
	font-weight: normal;
}
.sbar li a:nth-child(1) {
	width:48px;
	text-align:center;
}
.sbar li a:nth-child(2) {
	width:202px;
}
.sbar li a:nth-child(3) {
	width:40px; 
	text-align:center;
}
.sbar .current {
	background-color: #F2F2F2;
}

/****** main body text ******/
header { display: block; }
.titlessbshow,
.titlessbhide {
	position: fixed;
	top: 0;
	height: 79px;
	right:0;
	left: 0;
	background-color: #fff;
	z-index: 599;
	vertical-align: bottom;
	padding-top: 16px;
}
header span {
	display: inline-block;
}

#hamburger{
	width:30px;
	height:5px;
	background-color:#111;
	border-radius:5px;
	position:relative;
	top:-10px;
}
#hamburger:after, #hamburger:before {
	content: '';
	width: 30px;
	height:5px;
	background-color:#111;
	position:absolute;
	border-radius:5px;
}
#hamburger:after{
	top:-10px;
}

#hamburger:before{
	top:-20px;
}
#bun{
	font-size: 2.5em;
	margin: 0 15px;
}
#bun:hover{
	cursor: pointer;
}
#blankbun {
	margin: 0 15px;
}
.opaque {
	opacity: 0.5;
}

header #wpp_logo {
	margin: 0 15px 0 0;
}
header #titlebar_nav {
	float: right;
	margin: 30px 30px 0 0;
}
#titlebar_nav .divspan {
	margin-left: 30px;
	display: inline;
}
#titlebar_nav > div a {
	padding-left: 20px;
	font-weight: normal;
	color: #808080;
	display: inline-block;
	height: 17px;
}

header #my_profile_toggle {
	background: #fff url("/ecbs/system/pagebasics/images/my_profile_grey.png") no-repeat left center;
}
#switch_profile_toggle {
	background: #fff url("/ecbs/system/pagebasics/images/change-user-16.png") no-repeat left center;
}
header #titlebar_nav_logout a {
	background: #fff url("/ecbs/system/pagebasics/images/logout_grey.png") no-repeat left center;
}

.minimenu {
	background-color: #fff;
	display: none;
	position: absolute;
	max-width: 250px;
	z-index: 1000;
	text-align: left;
	border-radius: 6px;
	box-shadow: 0 0 6px #818181;
	overflow: hidden;
}
body[data-node="68"] .minimenu {
	border-radius: unset;
}
#titlebar_nav_switch .minimenu {
	/*right: 300px;*/
	min-width: 150px;
}
@media screen and (max-width: 620px) {
	#titlebar_nav .divspan {
		margin-left: 15px;
	}
	/*#titlebar_nav_switch .minimenu {
		left: 1.5rem;
		right: unset;
	}*/
}
/*body[data-node="68"] #titlebar_nav_switch .minimenu {
	right: 30px;
	min-width: 150px;
}*/

header #titlebar_nav_profile .minimenu {
	right: 70px;
}
#titlebar_nav > div .minimenu a {
	padding: 5px 10px;
	display: block;
}
#titlebar_nav > div .minimenu a:first-child {
	padding-top: 10px;
}
#titlebar_nav > div .minimenu a:last-child {
	padding-bottom: 10px;
}
.minimenu a .ico {
	width: 30px;
	vertical-align: middle;
}
.minimenu a:hover {
	background-color: #f2f2f2;
}

.main {
	position: absolute;
	overflow: auto;
	text-align: left;
	top: 95px;
	bottom: 0;
	background-color: #fff;
	z-index: 2;
	padding: 1% 0 1% 1%;
	left: 301px;
	right: 15%;
}
div.logintitlebar {
	background-color: var(--syscolour1);
}
#main.login_page {
	text-align: center;
	left: 0;
	right: 0;
	background-color: var(--syscolour8);
	color: var(--syscolour3);
	font-family: 'Roboto', sans-serif;
}
#main.login_page section {
	width: 30%;
	padding: 0 10px;
	margin: 0 auto;
	font-size: 16px;
}
#main.login_page section .big {
	font-size: 20px;
}
#main.login_page form {
	text-align: left;
	font-size: 16px;
}
#main.login_page form label, #main.login_page section a {
	color: var(--syscolour4);
}
#main.login_page form input {
	height: 24px;
	margin: 4px 0;
	border: 2px #e5e5e5 solid;
	border-radius: 0;
	padding: 10px;
	font-size: 16px;
	width: 100%;
	outline: none;
}
#main.login_page form button {
	text-align: center;
	background-color: var(--syscolour1);
	color: var(--syscolour3);
	font-size: 18px;
	font-weight: bold;
	height: 48px;
	margin: 4px 0;
	border: none;
	padding: 10px;
	cursor: pointer;
	border-radius: 0;
	min-width: 100px;
}
#main #forgot h2 {
	color: var(--syscolour3);;
	font-size: 20px;
	font-weight: normal;
}
@media screen and (max-width: 769px) {
	#main.login_page section, #main.login_page form input {
		width: calc(100% - 20px);
	}
}
@media screen and (max-width: 826px) {
	#main, .sbar, #psl {
		top: 140px;
	}
	a#hidebutton {
		top: 130px;	
	}
}
@media screen and (max-width: 425px) {
	#systemtitle, #pagetitle {
		margin-left: 0.5rem;
	}
	#blankbun, header #wpp_logo {
		margin: 0;
	}
	header #wpp_logo {
		display: none;
	}
	/*header #titlebar_nav_switch .minimenu {
		right: 200px;
	}*/
}
/*#main.login_page p {
	margin: 8px 0;
}*/
/*#main.login_page input[type="text"],
#main.login_page input[type="password"]{
	min-width: 250px;
}*/

.sbhide {
    right:0;
	padding-right: 55px;
}
.navhide {
	left: 0;
}

.mainpopup, .mainpopup_dash {
	text-align: left;
	background-color: #FFFFFF;
	padding-left:5px;
	padding-right:5px;
	position: absolute;
	top:0;
	bottom: 0;
	left:0;
	right:0;
}
.mainpopup_dash {
	top: 95px;
}
#systemtitle {
	padding: 0 2px 1px 2px;
	font-size: 2.3em;
}
#systemtitle a {
	color: #000;
	font-weight: normal;
}
#pagetitle {
	font-size: 1.5em;
	padding: 0 2px 1px 2px;
}
div#pagetitle {
	width:95%;
	font-size: 1em;
	color: #000000;
	font-weight: bold;
	padding: 0 2px 1px 2px;
	margin-bottom: 15px;
}

/* header splits */
.header1, .header1_light, .header1_ers {
	width: 90%;
	background-color: #EDEFF0;/*7C8EDA*/
	color: #4B4A4E;
	font-weight: bold;
	padding: 0 2px 1px 2px;
	margin-bottom: 10px;
	text-align:left;
}

.header1_light {
	background-color: #99A8E6;
}

.header1_ers {
	width: 98%;
}

/* table1 - invisible table no borders*/
.table1 th, .table1 td {
	text-align: left;
	padding: 5px 5px 0 5px;
}

/* table2 - background coloured th and no borders*/
.table2 {
	border-collapse: collapse;
}
.table2 th {
	background: #EDEFF0;
	color: #4B4A4E;
	padding: 2px 4px;
}

/* table 2 used for frozen headers*/
.table2 th[scope=td] {
	background: #FFFFFF;
	color: #4B4A4E;
	text-align: center;
	padding: 2px 4px;
}

.table2 th.frozentd {
	background: #FFFFFF;
	color: #6e6e6e;
	font-weight: normal;
	padding: 2px 4px 2px 4px;
}
.table2 th.leavers, .leavers, .parentcomp, .red {
	color: #FF0000;
}
.table2 th.warning, .warning {
	color: #FF0000;
	font-weight: bold;
}
.newwarning, table.display td.newwarning {
	background: url("images/error.png") 0px 20px no-repeat;
	padding-left: 20px;
	color: #FF0000;
	font-weight: bold;
}
.table2 td {
	padding: 2px 4px 2px 4px;
}

/* - use for formatted result tables*/
.table3 {
	font-size: 8pt;
	border-top: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	border-left: 2px #000000 solid;
	border-right: 2px #000000 solid;
}
.table3 th {
	background: #EDEFF0;
	border-top: 1px #000000 solid;
	border-bottom: 2px #000000 solid;
	text-align: center;
	color: #4B4A4E;
}
.table3 td {
	border-bottom: 1px #000000 solid;
	padding-left:2px;
	padding-right:2px;
	padding-top:1px;
	padding-bottom:1px;
}
.largerFont {
	font-size: 9pt;
}

/*table 4 - invisible table indented from screen edge*/
.table4 {
	position:relative;
	left:5%;
	width:90%;
}

.table4 th {
	text-align: left;
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 4px;
	width:30%;
}
.table4 td {
	text-align: left;
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 4px;
}

/*table 5 - invisible table with centre aligned headers and text*/
.table5 {
	width:99%;
}
.table5 th {
	text-align: center;
	background-color: #EDEFF0;
	color: #4B4A4E;
	font-weight: bold;
}
.table5 td {
	text-align: center;
}

/* table6 - green top, overall border, no borders inside */
.table6 {
	/*color: #111111;*/
	font-size: 8pt;
	border-top: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	border-left: 2px #000000 solid;
	border-right: 2px #000000 solid;
}
.table6 th {
	background: #EDEFF0;
	border-top: 1px #000000 solid;
	border-bottom: 2px #000000 solid;
	text-align: center;
	color: #4B4A4E;
}
.table6 td {
	padding-left:2px;
	padding-right:2px;
}

/* table8 - used for salary tables*/
.table8 {
	font-size: 8pt;
	border-top: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	border-left: 2px #000000 solid;
	border-right: 2px #000000 solid;
	empty-cells:show;
	border-collapse: collapse;
}
.table8 th {
	background: #EDEFF0;
	border-top: 1px #000000 solid;
	border-bottom: 2px #000000 solid;
	padding-left: 2px;
	padding-right: 2px;
	text-align: center;
	color: #4B4A4E;
}
.table8 td {
	border-bottom: 1px #000000 solid;
	padding-left:2px;
	padding-right:2px;
	text-align: center;
}

.th1 {
	padding-left:2px;
	padding-right:2px;
	font-weight: bold;
}

.td1 {
	padding-left:2px;
	padding-right:2px;
}

.erstable {
	font-size:9pt;
}

.foreground_colour {
	background-color: #FFFFFF;
}

.header_colour {
	background: #EDEFF0;
	color: #4B4A4E;
	font-weight: bold;
	padding: 0 4px;
}

.special_table {
	color: #111111;
	font-size: 8pt;
	border-right:1px black solid;
	empty-cells:show;
}
.special_table TH {
	background: #EDEFF0;
	text-align: center;
	color: #4B4A4E;
	border:1px black solid;
	border-right:none;
}
.special_table TD {
	text-align: center;
	border-bottom:1px black solid;
	border-left:1px black solid;
}

#csvdiv {
	margin-top: 100px;
	margin-bottom: 6px;
	text-align:center;
}
.popupdiv {
	display:none;
	background-color: #FFFFFF;
	border: 1px solid black; 
	width: 600px; 
	height: 370px; 
	z-index:30; 
	overflow: auto; 
	position: absolute; 
	float: left; 
	top:100px; 
	left:10px;
}
.hidden {
	display: none;
}
@media screen {
	.hide {
		color: black;
	}
}
@media print {
	.hide {
		display: none;
	}
}

.popbox{
	border: 2px solid blue;
	background:#F5F5F5;
	z-index:30; 
	overflow: auto;
	padding:2px;
	display:none;
	position: absolute; 
	float: left;
}
#sectorlist td {
	border-top: 1px black solid;
}
#sectorlist td[colspan] {
	border: none;
}
#sectorlist table td {
	border: none;
}
#sectorlist table th, #sectorlist th {
	background: #EDEFF0;
	color: #4B4A4E;
	padding-left: 4px;
	padding-right: 4px;
}
.left, th.left, td.left {
	text-align: left;
}
.right, th.right, td.right {
	text-align: right;
}
.center, th.center, td.center {
	text-align: center;
}
.top {
	vertical-align: top;
}

.col_2 {
	width: 49.5%;
	display: inline-block;
}
.col_3 {
	width: 33%;
	display: inline-block;
}
.col_3b {
	width: 66%;
	display: inline-block;
}
.nowrap {
	white-space: nowrap;
}
.wrapnormal{
	white-space: normal;
}
a.openassist {
	display: inline;
}
.assist {
	background-color: #fff;
	display:none;
	position:absolute;
	z-index:1000;
	text-align:left;
	font-size: 9pt;
	font-weight: normal;
	line-height: 1em;
	border-radius: .4em;
	box-shadow: 0em 0em .4em #818181;
	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=3, offY=3, positive=true);
	padding: 1em;
	max-width:45%;
}
.none {
	display:none;
}
.block {
	display:block;
}
.inlineblock {
	display:inline-block;
}
/*.policyblock {
	width: 1000px; 
}
.policy{
	width: 1000px;
	height: 600px;
}*/
ul.cp li {
	padding: 4px 25px 4px 4px;
	border-bottom: 1px solid #cccccc;
	border-radius: 2px;
}
.bold {
	font-weight: bold;
}
.ui-dialog .sessionWarn {
	background-color: #f08a24;
	color: #fff;
}
.error {
	padding: 10px;
}
/*presented like a table in tabular form, but not a table*/
.tbl, .tile-text-container {
	display: table;
}
.row {
	display: table-row;
}
.cell {
	display: table-cell;
}

.policy {
	margin: 0 1em;
	width: calc(100% - 2em);
	/*font-size: 1.5rem;*/
	text-align: left;
}
.policy span:first-of-type {
	width: 10%;
	font-weight: bold;
}
.policy .cell {
	padding-bottom: 1.5rem;
}
.policy ol {
	counter-reset: list;
}
.policy ol > li {
	list-style: none;
	counter-increment: list;
}
.policy ol li::marker {
	content: "(" counter(list, lower-alpha) ")\a0\a0\a0";
}
.policy ul {
	list-style: disc;
}
.policy ul > li {
	margin-left: 3rem;
}
#dashboard {
	background-color:#010050;
	color:#fff;
	padding: 30px 20px;
}
#dashboard #actions {
	color: #2bffc1; 
	font-weight: bold
}
#dashboard .dash_heading {
	font-size: 16px;
	font-weight: bold;
}

/* NEW OKTA LOGIN CSS */
#login_stage_one,
#login_stage_two {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 10px;
}
#login_stage_one h3 {
    text-align: left;
}
#login_stage_two .red {
    color: #ff0000;
}
#otp{
    color: #00466a;
    font-size: 2em;
    font-weight: bold;
    letter-spacing: .2em;
}
#excep_detail {
    width:100%;
    height:150px;
    font-size: 0.8em;
}

#epsp_packs {
	background-color:#2bffc1;
	color:#6b15d5;
	padding: 30px 20px;
	display: block;
}
#akqadiv {
	border: 1px solid black; width: 700px; height: 450px; z-index:30; overflow: auto; position: absolute; float: left; top:50px; left:150px;
}
.statement_table {
	margin: 5px;
}
.statement_table .line_border {
	border: 1px black solid;
}
.statement_table .th, .statement_table .thfirst, .statement_table .td, .statement_table .tdfirst {
	border:1px black solid; 
}
.size6 { font-size:6pt; }
.size7 { font-size:7pt; }
.size8 { font-size:8pt; }
.size9 { font-size:9pt; }
.size10 { font-size:10pt; }
.size11 { font-size:11pt; }
.size12 { font-size:12pt; }
.size13 { font-size:13pt; }
.size14 { font-size:14pt; }
.size15 { font-size:15pt; }
.size16 { font-size:16pt; }
.size17 { font-size:17pt; }
.size18 { font-size:18pt; }
.changed {
	color: red;
	font-size: 7pt;
	font-weight:bold;
}