:root {
	--wdth: 1rem;/*variable called wdth - change this to affect both the width and left/right margins of the table*/
	--wdth2: 2rem;
	--syscolour1: #004f75;/*Dark Teal*/
	--syscolour2: #c690ff;/*Lilac*/
	--syscolour3: #00cad5;/*Light Teal*/
	--syscolour4: #333333;/*Grey?*/
	--syscolour5: #0a222b;/*Very Dark Green*/
	--syscolour6: #00c22b;/*Green*/
	--syscolour7: #000000;/*Black*/
	--syscolour8: #ffffff;/*White*/
	--syscolour9: #f08a24;/*Orange?*/
	--syscolour10: #666666;
}
/*basic page structure changes to replace current CSS. Used only on dashboard currently, but hopefully can spread to other pages when redesigned*/
html {
	font-family: 'Roboto', Arial;
	font-size: 10px;
}
body {
	margin: 0;
	padding: 0;
	background-color: var(--syscolour8);
	overflow: auto !important;
}
div {
	margin: 0;
	padding: 0;
	border: 0;
}
a {
	text-decoration: none;
	color: var(--syscolour4);
}
img {
	border: none;
}
header span {
	display: inline-block;
}

button, button:not([class]), a.button {
	text-align: center;
	background-color: var(--syscolour1);
	color: var(--syscolour2);
	font-weight: bold;
	border: none;
	padding: 1rem;
	margin: 0.4rem 0;
	cursor: pointer;
	display: inline-block;
}
figure {
	margin: 0;
}
table {
	border-collapse: collapse;
}

label {
	display: block;
	margin-top: 1rem;
	clear: left;
	color: #268f93;
	font-weight: bold;
	position: relative;
}
input, textarea {
	border: 1px solid #cccccc;
	border-radius: 0.2rem;
	padding: 1rem;
	margin: 0.4rem 0;
	outline: none;
	font-family: 'Roboto', Arial;
	font-size: 1.2rem;
}
@media screen and (min-width: 370px) {
	form:not([id='calcgain']) input:not([type='checkbox']):not([type='radio']), form textarea {
		min-width: 30rem;
	}
}
input:read-only {
	border: none;
}
span.input {
	margin: 0.2rem 0;
	padding: 1rem;
	display: inline-block;
}
input:not([type='checkbox']):not([type='radio']):focus:not([class='failed']), select:focus:not([class='failed']) {
	outline: 2px solid #cccccc;
}
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']).failed, select.failed, textarea.failed, span.failed, div.failed, td.failed {
	border: 2px solid #ff0000;
	border-radius: 4px;
}
select {
	padding: 1rem;
	margin: 0.4rem 0;
	background-color: var(--syscolour8);
	border: 1px solid #cccccc;
	outline: none;
	font-family: 'Roboto', Arial;
	font-size: 1.2rem;
}
h1.banner {
	margin: 1rem 2%;
	padding: 2rem;
	background-color: var(--syscolour1);
	color: var(--syscolour2);
}
h2.table {
	color: var(--syscolour6);
	margin: 0 0 1rem 0;
}
/*.dent used in change password*/
p.dent {
	padding-left: 2.5rem;
}
ul.dent {
	list-style: none;
	margin: 1.2rem 0;
	padding: 0;
}
ul.dent li {
	margin: 0 0 5px 0;
	padding: 0.4rem 2.5rem 0.4rem 2.5rem;
	/*border-bottom: 1px solid #cccccc;*/
}
/*@media screen and (min-width: 700px) {
	ul.dent {
		width: 60%;
	}
}*/
form.standard, div.standard {
	filter: drop-shadow(0 0 0.5rem Grey);
	background-color: white;
	border: white;
	margin: 1rem 2%;
	padding: 2rem;
	font-size: 1.2rem;
	overflow: auto;
}
@media screen and (min-width: 1080px) {
	.flex {
		display: flex;
	}
	.flex table {
		flex: 3;
		align-self: baseline;
	}
	.flex div {
		flex: 1;
		align-self: center;
	}
}
.grid {
	display: grid;
}
.grid-full {
	grid-template-columns: 1fr;
}
.grid-half {
	grid-template-columns: repeat(2, 1fr);
}
.grid-third {
	grid-template-columns: repeat(3, 1fr);
}
.grid-third-twothirds {
	grid-template-columns: 1fr 2fr;
}
.grid-twothirds-third {
	grid-template-columns: 2fr 1fr;
}
/*form .grid {
	grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "col1 col2"
        "wide wide";
}
form .grid .col1 {
	grid-area: col1;
}
form .grid .col2 {
	grid-area: col2;
}
form .grid .wide {
	grid-area: wide;
}*/
form fieldset {
	border: none;
	margin: 0;
	padding: 0;
}
form.standard .grid .reason {
	grid-column: 1 / 3;
	grid-row: 1;
}
@media screen and (max-width: 730px) {
	form .grid, .grid {
		display: block;
	}
}
.clearfix {
	clear: both;
}
.nowrap {
	white-space: nowrap;
}
.validation-help {
	display: none;
	padding: 2px;
	color: red;
	font-weight: bold;
}
.validation-help-on {
	display: block;
	min-width: 150px;
}
div.table {
	display: table;
}
span.table_header {
	display: table-row;
	text-align: center;
	color: #5ac1c6;
	font-weight: bold;
}
span.table_body {
	display: table-row;
	text-align: left;
}
span.cell {
	padding: .5rem;
}
span.table_header > .cell {
	border-bottom: .1rem #999 solid;
}
@media screen and (min-width: 900px) {
	div.table {
		width:75%;
		margin: 0 auto;
	}
	span.table_header {
		font-size: 1.4rem;
	}
}
.good {
	background: url("../images/green_tick_16px.png") no-repeat 0%;
}
.bad {
	background: url("../images/red_cross_16px.png") no-repeat 0%;
}

.ui-dialog .ui-dialog-titlebar, .ui-dialog .ui-dialog-content {
	font-size: 1.2rem;
}
.ui-dialog .ui-dialog-titlebar {
	background-color: #42c0fb;
}
.helpbox {
	display: inline-block;
}
.helpbox .helpbox-icon, .helpbox .helpbox-icon-small {
	background-image: url(help-24.png);
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	padding: 0 5px;
	height: 24px;
	width: 24px;
	z-index: 50;
}
.helpbox .helpbox-text {
	display: none;
}
.ui-dialog .helpbox-dialog {
	background: #42c0fb;
	color: #ffffff;
	border-radius: 5px;
	white-space: pre-line;
}
.helpbox .helpbox-icon-small {
	background-image: url(/ecbs/system/pagebasics/images/help-16.png);
	background-size: 16px 16px;
	height: 16px;
	width: 16px;
	top: 3px;
}
.hidden, div.hidden {
	display: none;
}
.center {
	text-align: center;
}
.right {
	text-align: right;
}
.bold {
	font-weight: bold;
}
.error {
	padding: 10px;
}
.error h4 {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 10px;
	text-transform: capitalize;
	line-height: 1.5em;
	color: #E3170D;
}
.warn {
	margin: 1rem 2%;
	padding: 1.5rem 1rem 1.5rem 6rem;
	font-size: 1.2em;
	line-height: 1.5rem;
	filter: drop-shadow(0 0 0.5rem Grey);
	color: var(--syscolour8);
	background-repeat: no-repeat;
	background-position: 1rem center;
	background-color: var(--syscolour9);
	background-image: url('/wwop/system/images/warning.png');
}
/*old WWOP warning*/
/*.reminderwarn1 {
	color: #FF0000; 
	font-weight: bold;
}*/
/*modal messsage box for errors*/
#modalmask {
	position:absolute;
	top:0px; /* start from top */
	left:0px; /* start from left */
	height:100%; /* cover the whole page */
	width:100%;
	z-index: 9000;
	background-color:#fff;
	display:none;
}
#modalBox {
	display: none;
	position: fixed;
	width:95%;
	max-width: 75em;
	height: auto;
	min-height: 18em;
	z-index: 10000;
	font-family: 'Roboto', Arial;
	color: #000000;
	background: #f8f8f8;
	font-size: 0.9em;
	line-height: 1em;
	font-weight: normal;
	float: right;
	overflow: hidden;
	box-shadow: 0px 7px 35px 0px rgba(0,0,0,0.75);
}
#modalcontent {
	margin: 0 auto;
	overflow: auto;
	height: auto;
	font-size: 1.5rem;
	line-height: 1.5rem;
	padding: 30px;
}
.modalclose {
	font-size: 1.5em;
	font-family: 'Roboto', Arial;
	line-height: 1.5em;
	font-weight: bold;
	color: #7b7b7b;
	position: absolute;
	top: 0px;
	right: 15px;
	background: url("../images/modal-close.png") 0px 0px no-repeat;
	height: 42px;
	width: 42px;
	z-index: 10500;
}
.titlesbar {
	position: absolute;
	top: 0;
	bottom: 0;
	height: 79px;
	right: 0;
	left: 0;
	background-color: var(--syscolour8);
	z-index: 599;
	display: block;
	width: 100%;
	padding-top: 16px;
}
#bun {
	font-size: 3.5em;
	margin: 0 15px;
}
#bun:hover{
	cursor: pointer;
}
#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;
}
.titlesbar #wpp_logo {
	margin: 0 1.5rem 0 0;
}

#systemtitle {
	font-size: 2.8rem;
}
#systemtitle a {
	font-weight: normal;
	text-decoration: none;
}

#pagetitle {
	font-size: 2em;
	padding: 0 2px 1px 2px;
}
.main {
	/*position: absolute;*/
	overflow: auto;
	text-align: left;
	/*top: 95px;
	bottom: 0;
	z-index: 2;
	left: 0;
	right: 0;*/
	margin-top: 95px;
}
/*menu accessed via hamburger*/
header #my_profile {
	top: 4rem;
	left: 4rem;
	background-color: var(--syscolour8);
	display: none;
	position: absolute;
	z-index: 1000;
	text-align: left;
	border-radius: 6px;
	box-shadow: 0 0 6px #818181;
	font-size: 1.2rem;
}
header #my_profile a {
	font-weight: normal;
	color: #808080;
	padding: 5px 10px 5px 40px;
	height: 2em;
	line-height: 2em;
	display: block;
}
header #my_profile a:hover {
	background-color: #f2f2f2;
}
header #dashboard {
	background: no-repeat left 10px center url(/wwop/system/images/dashboard-16-purple.png),var(--syscolour8);
}
header #profile {
	background: no-repeat left 10px center url(/wwop/system/images/my_profile_grey.png),var(--syscolour8);
}
header #options {
	background: no-repeat left 10px center url(/wwop/system/images/my_profile_grey.png),var(--syscolour8);
}
header #doclib {
	background: no-repeat left 10px center url(/wwop/system/images/folder-16.png),var(--syscolour8);
}
header #emailc {
	background: no-repeat left 10px center url(/wwop/system/images/email-2-16.png),var(--syscolour8);
}
header #password {
	background: no-repeat left 10px center url(/wwop/system/images/change_password_colour.png),var(--syscolour8);
}
header #language {
	background: no-repeat left 10px center url(/wwop/system/images/change_language_16px.png),var(--syscolour8);
}
header #legal {
	background: no-repeat left 10px center url(/wwop/system/images/terms_and_conditions_colour.png),var(--syscolour8);
}
header #logout {
	background: no-repeat left 10px center url(/wwop/system/images/logout_grey.png),var(--syscolour8);
}
.info {
	background-color: var(--syscolour1);
	color: var(--syscolour2);
}
.policies {
	background-color: var(--syscolour3);
	color: var(--syscolour1);
}
.prospectus {
	background-color: var(--syscolour2);
	color: var(--syscolour5);
}
.video {
	background-color: var(--syscolour5);
	color: var(--syscolour3);
}
.document {
	background-color: var(--syscolour5);
	color: var(--syscolour2);
}
.modeller {
	background-color: var(--syscolour3);
	color: var(--syscolour1);
}
.exeactivity {
	background-color: var(--syscolour2);
	color: var(--syscolour5);
}
.blackboard {
	background-color: var(--syscolour7);
	color: var(--syscolour8);
	margin: 1rem 2%;
	padding: 2rem;
	font-size: 1.2rem;
}
form .blackboard {
	margin: 1rem 0;
}
@media screen and (max-width: 562px) {
	header #wpp_logo {
		display: none;
	}
}

/*document library in original dashboard design*/
/*a.spreadsheet {
	background: no-repeat right 10px center url("/ecbs/system/pagebasics/images/excel_new_green_24px.png");
	padding: 5px 40px 5px 0;
	line-height: 24px;
}
a.pdf {
	background: no-repeat right 10px center url("pdf-24.png");
	padding: 5px 40px 5px 0;
	line-height: 24px;
}
a.video {
	background: no-repeat right 10px center url("video-play-24.png");
	padding: 5px 40px 5px 0;
	line-height: 24px;
}
input.pdf {
	color: #6e6e6e;
	height: auto;
	display: inline-block;
	margin: 0;
	font-weight: normal;
	background: no-repeat right 10px center url(pdf-24.png),#fff;
	width: max-content;
	cursor: pointer;
	line-height: 24px;
	border: 1px solid #d3d3d3;
	padding: 5px 40px 5px 10px;
	border-radius: 4px;
	transition-duration: 0.4s;
}
*/

/*dashboard*/
.wrapper h1 {
	margin: 0;
	padding-left: 1rem;
	min-height: auto;
	font-size: 2.2rem;
	line-height: 7rem;
	font-weight: normal;
	background-color: #ecf0f1;
}
/*.wrapper h2 {
	min-height: auto;
	border: none;
	font-size: 2.2rem;
	line-height: 3rem;
	color: #333;
	font-weight: normal;
}*/
#grid-stack-container h2 {
	margin: 1rem 1rem 1rem 1.5rem;
}
.grid-stack-item h3 {
	font-size: 1.4rem;
	line-height: 1.4rem;
	font-weight: bold;
	/*margin: 1.5rem 1rem;*/
	margin: 0 1rem 1.5rem 1rem;
	padding-top: 1.5rem;
	text-transform: uppercase;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content {
	/*left: 15px;
	right: 15px;*/
	height: 100%;
	position: relative;
}

.ui-draggable-handle {
	-ms-touch-action:  revert !important;
	touch-action: revert !important;
}

/*.grid-stack-item-content, .charttile {
	overflow: hidden;
}*/

/*.tile-head {
	background-color: darkgrey;
	color: white;
	padding: 5px;
	margin-bottom: 5px
}*/
.wrapper .subhead {
	margin-bottom: 1rem;
	color: var(--syscolour4);
}
.wrapper .subhead h1 {
	margin: 0 1rem;
}

.subhead #sector3 {
	background-image: url("/wwop/system/images/plan_manager_37_50.png");
	background-repeat: no-repeat;
	background-position: 2% 50%;
	background-color: var(--syscolour8);
	padding-left: 6rem;
	margin: 0 1rem;
	font-size: 1.4rem;
	line-height: 1.5rem;
	height: 7rem;
	border: 0.1rem #999 solid;
}
.subhead #sector3 div {
	height: 7rem;
	display: table-cell; 
	vertical-align: middle;
}
@media screen and (min-width: 769px) {
	.wrapper .subhead {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
}

/*currency switch and print controls*/
.dashboard_controls {/*, .currency_controls*/
	display: table;
	/*border: 1px #7f8c8d solid;
	background-color: #fff;*/
}
.dashboard_controls {
	margin-right: 1.5rem;
	margin-left: auto;
}
/*.dashboard_controls button, .currency_controls button {
	padding: 0 1rem;
	font-size: 2rem;
	font-weight: normal;
	line-height: 3.6rem;
	color: #333;
	background-color: white;
	display: table-cell;
	text-align: center;
	border-right: 1px #7f8c8d solid;
	cursor: pointer;
}*/
.dashboard_controls #dashboard-pdf {
	height: 20px;
	padding-top: 3px;
}
.dashboard_controls button:last-child, .currency_controls button:last-child {
	border-left: none;
}
.dashboard_controls .selected, .currency_controls .selected {
	background-color: #fff;/*#ecf0f1;*/
	cursor: default;
}
.dashboard_controls button img {
	vertical-align: text-top;
}
.wrapper #dashhead {
	margin: 0 1rem;
}
#grid-stack-container {
	margin-bottom: 2rem;
}
.grid-stack {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(9, 7rem);
	gap: 1.5rem 2rem;
	margin: 0 1rem;
}
#grid-stack-container .grid-stack-item {
	filter: drop-shadow(0 0 5px Grey);
	overflow: hidden;
}

.grid-stack-item[data-gs-x="0"] { grid-column-start: 1; }
.grid-stack-item[data-gs-x="1"] { grid-column-start: 2; }
.grid-stack-item[data-gs-x="2"] { grid-column-start: 3; }
.grid-stack-item[data-gs-x="3"] { grid-column-start: 4; }
.grid-stack-item[data-gs-x="4"] { grid-column-start: 5; }
.grid-stack-item[data-gs-x="5"] { grid-column-start: 6; }
.grid-stack-item[data-gs-x="6"] { grid-column-start: 7; }
.grid-stack-item[data-gs-x="7"] { grid-column-start: 8; }
.grid-stack-item[data-gs-x="8"] { grid-column-start: 9; }
.grid-stack-item[data-gs-x="9"] { grid-column-start: 10; }
.grid-stack-item[data-gs-x="10"] { grid-column-start: 11; }
.grid-stack-item[data-gs-xend="2"] { grid-column-end: 3; }
.grid-stack-item[data-gs-xend="3"] { grid-column-end: 4; }
.grid-stack-item[data-gs-xend="4"] { grid-column-end: 5; }
.grid-stack-item[data-gs-xend="5"] { grid-column-end: 6; }
.grid-stack-item[data-gs-xend="6"] { grid-column-end: 7; }
.grid-stack-item[data-gs-xend="7"] { grid-column-end: 8; }
.grid-stack-item[data-gs-xend="8"] { grid-column-end: 9; }
.grid-stack-item[data-gs-xend="9"] { grid-column-end: 10; }
.grid-stack-item[data-gs-xend="10"] { grid-column-end: 11; }
.grid-stack-item[data-gs-xend="11"] { grid-column-end: 12; }
.grid-stack-item[data-gs-xend="12"] { grid-column-end: 13; }
.grid-stack-item[data-gs-y="0"] { grid-row-start: 1; }
.grid-stack-item[data-gs-y="1"] { grid-row-start: 2; }
.grid-stack-item[data-gs-y="2"] { grid-row-start: 3; }
.grid-stack-item[data-gs-y="3"] { grid-row-start: 4; }
.grid-stack-item[data-gs-y="4"] { grid-row-start: 5; }
.grid-stack-item[data-gs-y="5"] { grid-row-start: 6; }
.grid-stack-item[data-gs-y="6"] { grid-row-start: 7; }
.grid-stack-item[data-gs-y="7"] { grid-row-start: 8; }
.grid-stack-item[data-gs-y="8"] { grid-row-start: 9; }
.grid-stack-item[data-gs-y="9"] { grid-row-start: 10; }
.grid-stack-item[data-gs-y="10"] { grid-row-start: 11; }
.grid-stack-item[data-gs-yend="1"] { grid-row-end: 2; }
.grid-stack-item[data-gs-yend="2"] { grid-row-end: 3; }
.grid-stack-item[data-gs-yend="3"] { grid-row-end: 4; }
.grid-stack-item[data-gs-yend="4"] { grid-row-end: 5; }
.grid-stack-item[data-gs-yend="5"] { grid-row-end: 6; }
.grid-stack-item[data-gs-yend="6"] { grid-row-end: 7; }
.grid-stack-item[data-gs-yend="7"] { grid-row-end: 8; }
.grid-stack-item[data-gs-yend="8"] { grid-row-end: 9; }
.grid-stack-item[data-gs-yend="9"] { grid-row-end: 10; }
.grid-stack-item[data-gs-yend="10"] { grid-row-end: 11; }
.grid-stack-item[data-gs-yend="11"] { grid-row-end: 12; }

/*tile loading animation*/
.lds-dual-ring {
	display: inline-block;
	width: 80px;
	height: 80px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.lds-dual-ring:after {
	content: " ";
	display: block;
	width: 64px;
	height: 64px;
	margin: 8px;
	border-radius: 50%;
	border: 6px solid #fff;
	border-color: #fff transparent #fff transparent;
	animation: lds-dual-ring 1.2s linear infinite;
}
.lds-dual-ring-b:after {
	border: 6px solid #000;
	border-color: #000 transparent #000 transparent;
}
@keyframes lds-dual-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.SP_link {
	text-align: right;
	font-size: 1.3rem;
	display: block;
	margin: 0 auto;
	font-weight: normal;
	text-decoration: none;
	position: absolute;
	bottom: 1rem;
	right: 2rem;
}
.SP_link:hover {
	font-weight: normal;
	text-decoration: none;
}



/* override styles when printing */
@media print {
	/*@page {
		size: A4 landscape;
	}*/
	header#titlesbar, div.dashboard_controls, div.buttons, div#sectiontabs, .av-wrapper div.chart, .printinstruct, #backdiv, #sitebar {
		display: none;
	}
	main#main {
		top: 0;
	}
	.grid-stack > .grid-stack-item > .grid-stack-item-content {
		left: 5px;
		right: 5px;
	}
	.av-wrapper div.table {
		display: unset;
	}
	.hidden, div.hidden {
		display: inline;
	}
}

table.table {
	font-size: 1.2rem;
	width: 100%;
	margin: 0;
}
table.table .validation-help {
	font-size: 1rem;
}
table.table .totals {
	text-transform: uppercase;
	font-weight: bold;
}
table.table th, table.table td {
	padding: .5rem;
}
table.table th {
	color: #5ac1c6;
}
table.table thead tr {
	border-bottom: .1rem #999 solid;
}
table.table tbody tr {
	border-bottom: .1rem #999 solid;
}
table.table tbody tr:last-child {
	border: none;
}
table.table .no-padding {
	padding: 0;
}
table.table2 {
	font-size: 1.2rem;
	width: calc(100% - var(--wdth)*2);
	margin: 0 var(--wdth);
	text-align: center;
	color: #00034c;
}

table.table2 th, table.table2 td {
	padding: 1rem;
	border:  1px white solid;
}
table.table2 th {
	background-color: #93dfe3;
}
table.table2 td {
	background-color: #dcf3f4;
}
table.nofullwidth {
	width: auto;
	margin: 0;
}
img.center {
	display: block;
	margin: auto;
}

/*<input type="number"> with big spinners*/
.input-group {
	display: flex;
}
.input-group-button {
	flex: 0 0 auto;
	margin: 0 0.5rem;
	background-color: #94dfe4;
	border-radius: 50%;
}
.plus-minus-input {
	align-items: center;
}
.input-group .button.hollow {
	border: 1px solid #94dfe4;
	color: #00034c;
}
.input-group-button a, .input-group-button input, .input-group-button button, .input-group-button label {
	/*height: 1.5rem;*/
	font-size: 1rem;
}
.input-group .button, .input-group .button:focus {
	text-align: center;
	cursor: pointer;
	margin: 0;
	width: 38px;
	height: 38px;
}
.plus-minus-input .input-group-field {
	text-align: center;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}
.plus-minus-input .input-group-field::-webkit-inner-spin-button,
.plus-minus-input .input-group-field ::-webkit-outer-spin-button {
	appearance: none;
}
.plus-minus-input .input-group-field {
	-moz-appearance: textfield;
}
.plus-minus-input .input-group-button .circle {
	border-radius: 50%;
	border: 1px #5ac1c6 solid;
}
.fa-minus::before {
	content: url("/ecbs/system/pagebasics/images/minus-blue.png");
}
.fa-plus::before {
	content: url("/ecbs/system/pagebasics/images/plus-blue.png");;
}

/*presented like a table in tabular form, but not a table*/
.tbl, .tile-text-container {
	display: table;
}
.row, .tile-text {
	display: table-row;
}
.cell, .tile-text span {
	display: table-cell;
}

/*.tile-container used on dashboard, .tile-container2 used in doc library*/
.tile-container {
	width: calc(100% - 4rem);
	margin: 1rem 2rem;
}
.tile-container2 {
	margin: 1rem;
	height: fit-content;
}
.tile-container a, .tile-container2 a {
	display: flex;
	font-weight: normal;
	align-items: center;
}
.tile-container span.cell, .tile-container2 span.cell {
	flex: 1;
	font-size: 1.2rem;
}
.tile-container span.cell:first-of-type {
	padding-left: 2rem;
}
.tile-container span.cell:last-of-type {
	text-align: center;
	flex: 3;
}
.tile-container2 span.cell:first-of-type {
	text-align: left;
	padding: 2rem 0 2rem 2rem;
	flex: 3;
}
.tile-container2 span.cell:last-of-type {
	padding: 2rem;
	text-align: center;
}
.tile-container span.title, .tile-container2 span.title {
	font-size: 2.8rem;
	display: block;
}

.policy {
	margin: 0 var(--wdth2);
	width: calc(100% - var(--wdth2)*2);
	font-size: 1.5rem;
}
.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";
}

/*Heading showing numbered stages of a process*/
#line1 {
	padding: 0 10px 0 10px;
	overflow: hidden;
	text-align: center;
	height: 50px;
}
.line1, .stage {
	width: 14%; /* fallback for browsers without support for calc() */
	box-sizing: border-box;
	width: calc((100% - 2px) / 7);
	text-align: center;
	display: inline-block;
}
.thirds {
	width: 33.3%; /* fallback for browsers without support for calc() */
	width: calc((100% - 2px) / 3);
}
.fourths {
	width: 25%; /* fallback for browsers without support for calc() */
	width: calc((100% - 2px) / 4);
}
.fifth {
	width: 20%; /* fallback for browsers without support for calc() */
	width: calc((100% - 2px) / 5);
}
.sixth {
	width: 16%; /* fallback for browsers without support for calc() */
	width: calc((100% - 2px) / 6);
}
.eighth {
	width: 12.5%; /* fallback for browsers without support for calc() */
	width: calc((100% - 2px) / 8);
}
#labels1 {
	padding: 0 10px 10px;
	text-align: center;
}
.line1 {
	overflow: visible;
	position: relative;
	height: 4px;
	background-color: var(--syscolour1);
	border-top: 1px var(--syscolour1) solid;
	border-bottom: 1px var(--syscolour1) solid;
	top: 20px;
}
.line1:first-child {
	border-left: 1px var(--syscolour1) solid;
	border-top-left-radius: 5px 50%;
	border-bottom-left-radius: 5px 50%;
}
.line1:last-child {
	border-right: 1px var(--syscolour1) solid;
	border-top-right-radius: 5px 50%;
	border-bottom-right-radius: 5px 50%;
}
.stage:first-child {
	border-left: 1px #fff solid;
}
.stage:last-child {
	border-right: 1px #fff solid;
}
.outercircle {
	background-color: white;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	position: relative;
	top: -20px;
	left: calc(50% - 20px);
	border: 1px var(--syscolour1) solid;
	border-radius: 50%;
	padding: 4px;
}
.circle1 {
	background-color: #95A5A6;
	box-sizing: border-box;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	position: relative;
	text-align: center;
	line-height: 30px;
	color: white;
	font-weight: bold;
	font-size: 1.3em;
	display:block;
}
.circle1:hover {
	color: white;
	font-weight: bold;
	border: none;
}
.activestage {
	background-color: var(--syscolour1);
}
body.login #titlesbar, body.changepassword #titlesbar {
	background-color: var(--syscolour1);
}
/*body.login, body.login label {
	color: var(--syscolour3);
}*/
/*body.login a {
	color: var(--syscolour2);
}*/
body.login #titlesbar, body.changepassword #titlesbar {
	color: var(--syscolour8);
}
body.login #main, body.changepassword #main {
	font-size: 1.2rem;
}
body.login .big {
	font-size: 2rem;
}
body.login .large {
	font-size: 1.6rem;
}
body.login p {
	font-size: 1.4rem;
}
body.login a {
	color: var(--syscolour2);
}
body.login #remember {
	text-align: center;
}
body.login form {
	text-align: left;
	width: 30%;
	min-width: 33rem;
	margin: 0 auto;
}
body.login form input {
	width:  calc(100% - 2.4rem);
}
/*body.login button {
	background-color: var(--syscolour8);
	padding: 1rem 4rem;
}*/
body.login .titlesbar #wpp_logo {
	margin: 0 1.5rem 0 1.6rem;
}

/* 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, span.red {
    color: #ff0000;
}
#otp{
    color: #00466a;
    font-size: 2em;
    font-weight: bold;
    letter-spacing: .2em;
}
#excep_detail {
    width:100%;
    height:150px;
}
@media screen and (min-height: 525px) {
    #login_stage_one,
    #login_stage_two {
        position: relative;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -75%);
        margin-top: 0;
    }
}

#logfrm {
    margin-bottom: 50px;
}
body.login #main{
    height: calc(100vh - 95px);
}


/* END OKTA LOGIN */

@media screen and (max-width: 699px) {
	body.login form {
		width: 80%;
	}
	.tile-container2 {
		width: 100%;
	}
}
div#backdiv {
	margin: 1rem 2%;
	text-align: right;
}
a#back {
	background-image: url(/wwop/system/images/back_to_dashboard.png);
	background-repeat: no-repeat;
	padding-left: 4rem;
	color: var(--syscolour1);
	font-weight: normal;
	font-size: 2.2rem;
	white-space: nowrap;
	/*margin: 1rem 0 0.5rem auto;*/
	display: inline-block;
	height: 3.1rem;
	line-height: 3.1rem;
}
form.drop {
    filter: drop-shadow(0 0 0.5rem Grey);
}
.SP_switch a {
	padding: 0.5rem 1rem;
	border: 0.1rem solid;
}
.SP_switch a.on {
    cursor: text;
}
/*carousel - used for videos*/
.slide_left, .slide_right {
	position: absolute;
	top: calc(50% - 60px);
	z-index: 1000;
	opacity: 0;
	transition-duration: 0.8s;
}
.slide_left:hover, .slide_right:hover {
	opacity: 30%;
	transition-duration: 0.8s;
	cursor: pointer;
}
.slide_left {
	left: 0;
}
.slide_right {
	right: 0;
}
div.carousel_bubbles {
	text-align: center;
	position: absolute;
	bottom: 0;
	width: 100%;
}
span.carousel_bubble_box {
	position: relative;
	z-index: 1000;
	display: inline-block;
	margin: 0 0.2rem 0.2rem 0.2rem;
	padding: 0.5rem;
	width: 1.2rem;
	height: 1.2rem;
}
span.carousel_bubble {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border-radius: 100%;
	border: 1px var(--syscolour10) solid;
	background-color: var(--syscolour10);
}
span.carousel_bubble_box:hover {
	cursor: pointer;
}
span.active {
	border: 1px var(--syscolour1) solid;
	background-color: var(--syscolour1);
}

.viddiv {
	position: absolute;
	top:  20%;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: 640px;
	height: 350px;
}
/* This bit handles VERTICAL centering */
.embed-outer {
	display: table;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.embed-middle {
	display: table-cell;
	vertical-align: middle;
}

.embed-inner {
	margin-left: auto;
	margin-right: auto;
	max-width: 640px;
	max-height: 260px;
	overflow: hidden;
}

/* this bit handles responsive video player */
.embed-container { 
	position: relative; 
	padding-bottom: 56.25%; /* 16:9 aspect ratio */ 
	height: 0;  
	max-width: 100%;
	max-height: 260px;
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	max-height: 260px;
	overflow: hidden;
}

.obvious {
    border: 1px solid #3598DC;
    padding:0.75em;
    padding-left: 50px;
    line-height: 32px;
    display:inline-block;
    max-width: 600px;
    margin-top:0.5em;
    margin-bottom: 50px;
    background: url(../images/info-32.png) #fff no-repeat 5px;
}

.obvious strong {
    color: #333333;
}
.inlineblock {
	display: inline-block;
}
.top {
	vertical-align: top;
}
#print {
	float: right;
}
#guide {
	text-align: center;
}
@media screen and (max-width: 769px) {
	.grid-stack > .grid-stack-item:first-of-type {
		margin-top: 10px;
	}
	.grid-stack {
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(22, auto);
	}
	.grid-stack-item[data-gs-y="11"] { grid-row-start: 12; }
	.grid-stack-item[data-gs-y="12"] { grid-row-start: 13; }
	.grid-stack-item[data-gs-y="13"] { grid-row-start: 14; }
	.grid-stack-item[data-gs-y="14"] { grid-row-start: 15; }
	.grid-stack-item[data-gs-y="15"] { grid-row-start: 16; }
	.grid-stack-item[data-gs-y="16"] { grid-row-start: 17; }
	.grid-stack-item[data-gs-y="17"] { grid-row-start: 18; }
	.grid-stack-item[data-gs-y="18"] { grid-row-start: 19; }
	.grid-stack-item[data-gs-y="19"] { grid-row-start: 20; }
	.grid-stack-item[data-gs-y="20"] { grid-row-start: 21; }
	.grid-stack-item[data-gs-y="21"] { grid-row-start: 22; }
	.grid-stack-item[data-gs-y="22"] { grid-row-start: 23; }
	.grid-stack-item[data-gs-yend="12"] { grid-row-end: 13; }
	.grid-stack-item[data-gs-yend="13"] { grid-row-end: 14; }
	.grid-stack-item[data-gs-yend="14"] { grid-row-end: 15; }
	.grid-stack-item[data-gs-yend="15"] { grid-row-end: 16; }
	.grid-stack-item[data-gs-yend="16"] { grid-row-end: 17; }
	.grid-stack-item[data-gs-yend="17"] { grid-row-end: 18; }
	.grid-stack-item[data-gs-yend="18"] { grid-row-end: 19; }
	.grid-stack-item[data-gs-yend="19"] { grid-row-end: 20; }
	.grid-stack-item[data-gs-yend="20"] { grid-row-end: 21; }
	.grid-stack-item[data-gs-yend="21"] { grid-row-end: 22; }
	.grid-stack-item[data-gs-yend="22"] { grid-row-end: 23; }
	.embed-outer {
		position: static;
	}
	.subhead #sector3 {
		margin-top: 2rem;
	}
}

div.belgium .tile-container2 {
	margin: 0;
	width: 40rem;
}