:root{
	/* By default form tables and normal tables style heading the same
	 */
	--column-th-color: var(--th-color);
	--column-th-bg-color: var(--th-bg-color);
	--form-th-color: var(--th-color);
	--form-th-bg-color: var(--th-bg-color);
	/* width of the top level content blocks */
	--block-width: 95%;
	/* separation between top level block elements */
	--block-v-margin: 20px;
	/* width of content within a block, default is to use padding in block to narrow */
	--content-width: 100%;
	/* padding/margin for text paragraphs looks better without if content and paragraph background the same*/
	--text-h-padding: 8px;
	--text-v-padding: 8px;
	--text-v-margin: 6px;
	
	--table-width: 100%;
	--cell-padding: 3px;
	
	/* suggested colours from html5 standard. should be close to browser defaults
	 */
	--link-color: #0000ee;
	--visited-color: #551a8b;
	
	/* Allow overrides to fix contrast for links in hotice regions. Default is to use normal colours
	 */
	--link-notice-color: var(--link-color);
	--visited-notice-color: var(--visited-color);
	/* standard special markup 
	 * different hover color for styles used in form tables
	 */
	--notice-bg-color: #ffcccc;
	--notice-color: black;
	
	--highlight-color: black;
	--highlight-bg-color: #ffffcc;
    --highlight-hover-bg-color: #ffeecc;
    --warn-bg-color: #ffb3b3;
  	--warn-color: black;
  	--warn-border: solid red;
  	--font-family: "MS Arial", "Helvetica", sans-serif;
}




body {
	color: black;
	font-size: medium;
	background-color: var(--main-bg-color);
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: medium;
    text-decoration: none;
	margin: 0;
}
body{
font-family: var(--font-family);
}

div.banner {
	font-family: sans-serif,verdana,arial,helvetica;
	padding: 5px;
}
div.banner div.link {
/*	font-size-adjust: -1; */
	display: inline;
	margin: 5px;
}
div.banner div.service_title{
	font-size: xx-large;
}
div.banner div.logo img{
	height: 65px;
}
div.banner div.content {
	font-size: x-large;
	min-height: 65px;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}
div.banner div.left{
	float: left;
}
div.banner div.right{
	float: right;
}
/* The basic centered  block
 * This can hold headers paragraphs and forms.
 */
div.block, div.wideblock{
background-color: var(--content-bg-color);
}
/* a single line block containing a heading 
 * this has no following content so usually contains a button
 * or link
 */
div.bar, div.bar h1, div.bar h2, div.bar h3{
	background-color: var(--bar-bg-color);
	color: var(--bar-text-color);
}
/* Simple single line bar contains a single h3 heading and 
 * a submit button only form. We swap the text direction to get the button on the right
 */
div.bar{
text-align: left;
/* background-color: #e7e7e7; */
}
/* simple single bar containing only text */
div.textbar{
	background-color: var(--paragraph-bg-color);
}


/** Allow a block heading to be the summary element 
 */
div.block details summary h2{
	display: inline;
	margin: 0;
}

/* all top level divs form a centered column */
body > div.block, body> div.bar, body > div.textbar, body > div.text, body > div.graph {
	width: var(--block-width);
}
body > div.wideblock {
	width: var(--block-width);
}
body > div.report {
	width: var(--block-width);
}
body > div.bar{
	height: 25px;
}
/* common properties of all top level divs */
body > div.block, body > div.bar, body > div.textbar,body > div.text, body > div.graph, body >div.report,  body > div.wideblock {
    /* centered */
	margin-left: auto;
	margin-right: auto;
	/* seperated from other top level content */
	margin-top: var(--block-v-margin);
	margin-bottom: var(--block-v-margin);
 
    /* if top level blocks have a background color
     * this clears the content from the edge of the physical block
     * for all elements.
     *
     * If we want some content to take the full width of the block
     * zero the padding and set var(--content-width) to the desired width
     * then override width of the wide content
     * setting the top level block to full-width will allow
     * elements to be full width as well
     */
	padding-left: var(--block-h-padding);
	padding-right: var(--block-h-padding);
    padding-top: var(--block-v-padding);
    padding-bottom: var(--block-v-padding);
    border-radius: var(--block-radius);
        
}
div.block, div.bar, div.textbar,div.text, div.graph, div.report, div.wideblock {
	text-align: left;
	color: black;
	white-space: normal;        
}

/** nested block have same width as parent
 * but keep top-bottom spacing
 */
div.block div.block {
	margin-top: var(--block-v-margin);
	margin-bottom: var(--block-v-margin);
	width: 100%;
}
body > div.block > div.block {
	 width: var(--content-width);
}

/* wrapper to add automatic scrollbar */
div.scrollwrapper {
	overflow: auto;
}

div.scrolltext {
	display: inline-block;
	max-width: 600px;
}
div.scrolltext > div.para{
	white-space: nowrap;
}

.login{
	font-weight: bold;
}



/** Acts as pre-formatted without changing the font
 */
p.preformatted{
	overflow: auto;
	white-space: pre;
	/* monospace font makes this exactly like pre but ... */
	/* font-family:  monospace; */
}

pre.loose{
	overflow: auto;
	white-space: pre;
	font-family: var(--font-family);
}

span.password{
	font-family: monospace;
	font-weight: bold;
	user-select: all;
	
}


/* Add space before a h1/h2 heading
 */
h1, h2{
	margin-top: var(--heading-pre-space);
}
/*  First major heading at top of div
 * remove any spacing margins
 */
h1:first-child, h2:first-child{
	margin: 0px;
}

/* no separation when showing log items as these use
 * headings as labels shown in a sequence
 */
div.item h3, div.item h4, div.item h5 , div.item h6 , div.item pre, div.item p{
	margin: 0;
}

/* A form within a block element. This usually contains a nested 
 * table for fine grain layout and a fieldset.action_button
 * for the submit buttons. 
 * These are usually direct children of the top level block.
 * normally the form is just a container with styling applied
 * to the inner elements  

 */
body > div.block form, body > div.wideblock form{
margin-top: 2px;
margin-bottom: 2px;
padding: 0;
}






/* auto generated table from Table class */
table.auto {
	width: 100%;
	text-align: left;
}
/* strong match */
th:first-child, td:first-child{
	text-align: left;
}
table.auto td, table.auto th {
  margin: 1px;	
}

div.ifms_summary td.key {
background-color: #e7e7e7;	
text-align: left;
}
/* paragraph within a block 
 */
div.block p,  div.block ul, div.block ol, div.block pre, div.block div.para, div.block div.table, div.block div.column {
text-align: left;

}
/* first level children default to the same horizontal margin to align equally.
 * alternatively padding can be added to the div.block but if we want any elemments
 * full width use --content-h-margin instead.
 * this also needs to be overridden to centre content
 */
body > div.block > * {
margin-left: var(--content-h-margin);
margin-right: var(--content-h-margin);
border-width: 2px;
}
/* block content (not including table)
 * add margin at bottom so headers associate with following content
 * if the content and background have different backgounds you need
 * padding but this indents the text if they are the same 
 */
div.block p,  div.block ul,  div.block pre, div.block div.para{
margin-top: 0px;
margin-bottom:  var(--text-v-margin);

color: black;
padding-top: var(--text-v-padding);
padding-bottom: var(--text-v-padding);
padding-left: var(--text-h-padding);
padding-right: var(--text-h-padding);
display: block;
}
div.block p,  div.block pre, div.block div.para{
	background-color: var(--paragraph-bg-color);
}
div.block ol {
	margin-top: 0px;
	margin-bottom: 6px;
	background-color: white;
	color: black;
}
/* no margin inside table */
div.block td p,  div.block  td ul, div.block td ol, div.block  td pre, div.block  td div.para{
margin: 0;
}
div.block ul{
list-style: inside;
}
div.block  table, div.wideblock  table, div.report  table {
    width: 100%;
}
/* special rule for top level */
body > div.block > table, body > div.wideblock > table, body > div.report > table {
    width: var(--content-width);
}


/* supress the cell seperators for nested tables */
div.block table table {
	    border-collapse: collapse;
		border-spacing: 0;
		border-width: 0;
		margin: 0;
}
/* need to ensure cells are seperated if this is an auto-table not a form table
 * as data may be packed in there.
*
div.block table table.auto td, div.block table table.auto th{
		border-width: 1px;
		border: solid black; 
}
*/


table.compact {
	    border: none;
		border-spacing: 0;
		margin-top: 0;
		margin-bottom: 6px;	
}

table.listing {
	border: none;
	border-spacing: 0;
	margin-top: 0;
	margin-bottom: 6px;	
	background-color: white;
}

table.listing td.public_access {
	background-color: #ff6666;
}

/* buttons in bar float to the right
 */
div.bar form{
 display: block;
 float: right;
 text-align: right;

 /* old versions of firefox ?
 position: relative;
 top: -5px;
 */
 font-size: 110%;
	color: black;
    line-height: normal;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 4px;
    padding-right: 4px;
}


/* heading within a bar
 */
div.bar h1, div.bar h2, div.bar h3{
/*font-weight: normal;*/
display: inline;
/*float: left;*/
line-height: normal;
margin: 2px;
}






/* fixes to try and get nested tables to pick up the correct
 * highlighting make the notice rule more explicit so it
 * wins over the highlight rule prefix everything with div to
 * avoid matching legacy header footer table formatting.
  * Note auto tables may contain nested 1 button forms 
 */
 div td, div th{
 color: black;
 }

div tr.notice td, div tr td.notice{
	background-color: var(--notice-bg-color);
	color: var(--notice-color);
}

div  *.highlight td, div table.auto *.highlight td form{
	 background-color: var(--highlight-bg-color);
	 color: var(--highlight-color);
}
/* hover highlighting to indicate the active row in a form
*/
form table.form tr.highlight:hover td {
	 background-color: var(--highlight-hover-bg-color);
}
/* some transitions dont set form class
 */ 
form table tr.highlight:hover td {
	 background-color: var(--highlight-hover-bg-color);
}

/* a warning paragraph */
div.warn, div.block div.warn{
	border: var(--warn-border);
	background-color: var(--warn-bg-color);
	color: var(--warn-color);
}

div p.warn, div.warn p, .warn, .warn.sorting_1, div.warn div.para  {
	background-color: var(--warn-bg-color);
	color: var(--warn-color);
}


details div.description{
	 border-radius: var(--block-radius);
	 padding: 5px;
	 background-color: #ffffcc;
	 font-size: small;
}

div td, div table.auto td form , div.block td ul, div.block td ol{
        background-color: #ffffff;
        padding: var(--cell-padding);
}
td.numeric, td[numeric] ,  td.numeric input, table.dataTable tfoot td[numeric]  {
text-align: right;
white-space: nowrap;
}

div th , div td.header{
        color: var(--th-color);
        background-color: var(--th-bg-color);
        padding: var(--cell-padding);
}
div table.column th, div table.column td.header{
        color: var(--column-th-color);
        background-color: var(--column-th-bg-color);
}
div table.column td th, div table.column td td.header{
        color: var(--th-color);
        background-color: var(--th-bg-color);
}

/* Forms may be used for single buttons often in table cells.
 * The other common idiom is a collection of single button forms
 * in an "action_button" group at the end of descriptive content
 * these are intended to be like a pseudo form without input fields.
 * 
 * or major forms with labels/inputs in a 2-column table
 * followed by a fieldset of submit buttons.
 *
 * The fieldset and action_button group share the action_buton class
 */

/* single button forms */
/** Single button forms in an action button block
 */
.action_buttons form{
	display: inline;
}

/** button in a list
*/
li form{
	display: inline;
}
/* embedded forms should use the background of their parent we
 * just want to see a single button
 */
div.block td form, div.wideblock td form{
	background-color: inherit;
}

/* a table cell intended to hold a form button */
div td.button {
	text-align: center;
	background-color: var(--th-bg-color);
}
th.button-col, td.button-col {
	width: 5%;
	text-align: center;
}
form.button{
	display: inline;
	text-align: right;
	background-color: inherit;
}


/** inline errors for transition
 * shown above the form
 */
div.block div.error {
margin-top: 10px;
margin-bottom: 0px;
padding: 0;
}
div.block div.error + form, div.wideblock div.error + form{
margin-top: 0;
margin-bottom: 0;
border: solid red;
}
div.block form, div.wideblock form{
	background-color: var(--form-bg-color);
}



/* block of action buttons at the end of a form
 * buttons pack to the right
*/
.action_buttons{
text-align: right;
border-width: 2px;
margin-bottom: 10px;

}
/** form with ONLY action buttons
 */
form.view > .action_buttons{
	margin-bottom: 0;
}

label{
	text-align: left;
}
/* form label for a required field */
label.required, span.required {
	font-weight: bold;
}
/* Add a black star to labels of required fields.
 */
label.required::after, span.required::after {
	content: " \2605"
}
label.missing::after, span.missing::after {
	color: #ff0000
}
/* Label for an optional form parameter
 */
.optional{
	color: #555555;
}
/* error added to a form input label 
 */
.field_error{
	font-weight: bold;
	color: #ff0000;
}
:disabled, .disabled {
	cursor: not-allowed;
}

/*  keep the label widths limited so inputs are closer to the label
 */
table.form th {
	width: 33%;
}
table.form tr {
        width: 100%;
}
table.form td {
        padding: 2px;
   
}
form table.form th, form table.form td.header{
        color: var(--form-th-color);
        background-color: var(--form-th-bg-color);
}
form table.form tr:hover th, form table.form tr:hover td.header{
	background-color: var(--th-hover-bg-color);
}
table.form td {
        background-color: var(--form-content-bg-color);
}

form table tr:hover td {
	 background-color: var(--form-hover-bg-color);
}


.action_buttons{
border: solid var(--form-border-color);
border-width: 2px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 0;
margin-right: 0;
}
.action_buttons > * {
	margin: 5px;
}

/* styling for input buttons */
.input_button {
	border-style: outset;
	background-color: var(--button-bg-color);
	color: var(--button-color);
}

/* Button like links so we can open new page using right mouse */
div.block .navbar{
	margin-top: 10px;
	margin-bottom: 10px;
	border: none;
	background-color: inherit;	
}
div.block div.navbar{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
 	align-items: center;
    justify-content: space-around;
}
.nav_entry{
	padding: var(--cell-padding);
	flex: 1;
}

div.block table.navbar{
	border-spacing: 0;
}
div.block table.navbar td {
	background-color: inherit;	
}
/* can put single input forms with class input_button in navbar */
.navbar form input{
	width: 100%;
	border-style: outset;
	background-color: var(--button-bg-color);
	color: var(--button-color);
}
/* or can put links that look similar */
.navbar  a {
    background-color: var(--button-bg-color);
    color: var(--button-color);
    margin: 3px 0px;
	border-style: outset;
	border-color: black;
    border-width: 2px;
  
    display: block;
    text-align:center;
}

/* table for fine tuning the layout within a form
 * these have an explicit border 
 */
table.form{
	border: solid var(--form-border-color);
	border-width: 2px;
    background-color: var(--form-content-bg-color);
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: left;
}
form.transition table.form {
	 background-color: var(--form-content-bg-color);
}
div.action_buttons {
	 background-color: var(--form-content-bg-color);
}

div.block ul{
	background-color: var(--list-bg-color);
}
/* nested lists (in body content) indent */
div.block li li {
	margin-left: 20px;
}
div.block > table, div.wideblock > table, div.report > table, details > table , div.scrollwrapper > table, div > table {
	 border-style: solid; 
	 border-color: var(--table-border-color); 
	 background-color: var(--table-bg-color);
     margin-bottom: 10px;  
}

/* custom content table within a form should be a normal table
 * it it was a a table.form we set differently
 */
div table {
	 border-style: solid; 
	 border-color: var(--table-border-color); 
	 background-color: var(--table-bg-color);
}

div.block > table:last-child, div.wideblock > table:last-child, div.report > table:last-child, details > table:last-child , div.scrollwrapper > table:last-child{
	margin-bottom:10px;
}

/* Resoruce table */
td.notes{
	text-align: right;
}
td.resource table.auto td.main, td.resource table.auto th.main{
	text-align: right;
}
div table table.resource{
	text-align: right;
}



.center{
text-align: center;
	}
.plain {
	background-color: #ffffff;
	}

.pass:after {
	content: " \2714";
	color: green;
}
.fail .additional {
	color: red;
}
.fail:after {
	content: " \2718";
	color: red;
}
.sufficient:after {
	content: " \2190";
	color: orange;
}
.notice, .notice.sorting_1 {
	color: var(--notice-color);
	background-color: var(--notice-bg-color);
	font-style: italic;
}
.highlight,div.block  p.highlight {
  color: var(--highlight-color);
  background-color: var(--highlight-bg-color);
}




div.block div.compact {
	display: block;
	text-align: right;
	background-color: #f0f0f0;
}
div.block div.compact p.question {
	text-align: left;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px;
	float: left;
	display: block;
}

div.options{
  font-size: smaller;
  font-weight: bold;
  white-space: nowrap;
}

div.block div.compact div.options {
	padding-right: 4px;
	display: inline;
}
textarea.comment {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
}


div table tr td[format=under]{
	color: red;
}
div table tr td[format=over]{
	color: blue;
}
div td[highlight=true]{
	color: var(--hightlight-color);
	background-color: var(--highlight-bg-color);
}
div td[notice=true]{
	color: var(--notice-color);
	background-color: var(--notice-bg-color);
}
div.block p.comment {
	background-color: #ffeebb;
}

/* XML formatting */
div.element, div.elementcontent, div.element h3 {
background-color: #ffffff;
}
div.elementcontent {
width: 98%;
padding-left: 2%;
}
div.xml_warn {
	font-size: smaller;
	background-color: #ffffcc;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	border-radius: 20px;
	border: solid black;
	padding: 10px;
}
div.xml_warn_scope {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 20px;
	border-radius: 20px;
	border: solid red;
	padding: 10px;
}
div.xml_comment{
	background-color: #ccccff;
	border-radius: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: 20px;
	padding: 10px;
}
div.dynamic_form_question{
	
	
	 padding: 2px;
	 display: block;
 margin-top: 5px;
 margin-bottom: 10px;
 border-width: 0px;
}
td.question{
	overflow: auto;
	background-color: #f3f3f3;
	height: 100%;
	width: 50%;
	border-width: thin;
 border-style: solid;
 padding: 5px;
}
td.answer{
	overflow: auto;
	background-color: white;
	height: 100%;
	width: 50%;
	border-width: thin;
 border-style: solid;
 padding: 5px;
}

td.answer.incomplete {
	border-color: red;
	border-width: 3px;
}
div.complete > h3:after, div.complete > h2:after {
	content: " \2714";
	color: green;
} 

div.dynamic_form_section{
 border-width: 1px;
 border-style: solid;
  border-color: black;
  padding: 2px;
margin: 5px;
margin-bottom: 10px;

}
/* auto collapse
div.element div.element div.elementcontent, div.element div.element:hover div.element div.elementcontent{
	display: none;
}

div.element div.element:hover div.elementcontent, div.element div.element div.element:hover div.elementcontent{
display: block;
}
*/

/* Email edit forms better aligning to the left as they
 * replace text fragments.
 */
div.message form, form div.message{
	text-align: left;
}
div.message {
	border-style: solid;
	border-color: var(--table-border-color);
	border-width: 1px;
	background-color: var(--column-th-bg-color);
	color: var(--column-th-color);
}

h3 form, h4 form{
    display: inline-block;
    /* float: left; */
}
div.multipart {
	border: solid white;
}
div.part {
	border: solid black;
}
div.mail {
   border: solid green;
}
div.mail pre, div.message pre, p.longlines{
	overflow: auto;
}
input[type=number][size="6"] {
	width: 7em;
}
input[type=number][size="5"] {
	width: 6em;
}
input[type=number][size="4"] {
	width: 5em;
}
input[type=number][size="3"] {
	width: 4em;
}
input[type=number][size="2"] {
	width: 3em;
}
input[type=number][size="1"] {
	width: 2em;
}
/*  added by javascript to show how full a textarea is.
 * this puts a thin progress bar under the textarea
 */
progress.textprogress {
	width: 100%;
	height: 4px;
	display: block;
}


img.qrcode{
	max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
	margin-right: auto;
}

div.dataTables_wrapper {
	margin-top: 10px;
}

/* These are also in helpdesk.css but added here for
 * traffic-light type markup elsewhere
*/
table.dataTable.display tbody tr td.GREEN.sorting_1, td.GREEN ,  span.GREEN{
	background: #00ff00;
}
table.dataTable.display tbody tr td.YELLOW.sorting_1,td.YELLOW,  span.YELLOW{
	background: yellow;
}
table.dataTable.display tbody tr td.AMBER.sorting_1, td.AMBER,  span.AMBER{
	background: orange;
}
table.dataTable.display tbody tr td.ORANGE.sorting_1, td.ORANGE,  span.ORANGE{
   background: orange;
}
table.dataTable.display tbody tr td.RED.sorting_1, td.RED,  span.RED{
   background: red;
}

/* allocations use this for end dates in the past */
.grey {
 background-color: #cccccc;
}

div.input_row {
	display: table-row;
}
div.sub_label {
	display: table-cell;
	text-align: center;
}
div.sub_input {
	display: table-cell;
}

/* put links into selected pallete */
a:link {
	color: var(--link-color);
}
.notice a:link, .notice.sorting_1 a:link {
	color: var(--link-notice-color);
}

a:visited {
	color: var(--visited-color);
}
.notice a:visited, .notice.sorting_1 a:visited {
	color: var(--visited-notice-color);
}