/* 
    Author     : Chris
*/
/* Variables and defaults */
:root {
	--helpgreen:#90c080;	/* Help header pale shade of green */
	--helpgrey:#a8aaa7;		/* Help body pale shade of grey */

	--max-mobile-portrait: 768px;	/* can't use in media query condition */
	--max-tablet-portrait: 960px;
}
* {
	/* Reset browsers default margin and padding*/
	margin: 0px;	/*	Space around element */
	border: 0px;	/*	Could be coloured border around element */
	padding: 0px;	/*	Space between content and border */
}
html {
	height: 100%;
}
body {
	min-height: 100%;
	box-sizing: border-box;	/* Includes decoration in sizes */
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 90%;
	color: #000000;
	background-color: #FFFFFF;
}
tr {
	vertical-align: top;
}
th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
	text-align:left;
}
td {
    display: table-cell;
    vertical-align: inherit;
	text-align: left;
}
li {
	list-style: none;
}
/*Override user-agent to avoid warnings*/
div {
	display: block;
}
/*Override user-agent to avoid warnings*/
table {
	display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    border-width: 0px;
}

textarea {
	padding: 5px;	/* Makes cursor visible! */
}
/* Generic Page Layout classes */
.page-flex-container {
	/* Items are arranged in a single column. */
	display: flex;
	flex-flow: column nowrap;
	height: 100%;	/* the page fills the viewport height */
	/*
	The items are
	  a page-banner
	  a print-header-container
	  a page-body
	  an error-flex-container
	  a page-footer
	*/
}
.page-banner{
	/* Items are arranged in a single row. */
	display: flex;
	flex-flow: row nowrap;
	justify-content: left;
	background-color: var(--palerdark);
    background-repeat: repeat-x;
	/*
	The items are
	  a logo container
	  a banner-flex-container
	*/
	order: 1;
	flex: 0 1 auto;
}
.page-body {
	/* Items are arranged in a single column. */
	order: 3;
	display:flex;
    flex-direction:column;
	min-height: 50%;
    position:relative;
	flex: 1 1 auto; /*  Can grow and shrink vertically */
	overflow-y: auto;
	background-color: var(--palerlight);
}
.page-footer {
	/* Items are arranged in a single row. */
	order: 4;
	display: flex;
	flex-flow: row nowrap;
	justify-content:space-between;
	align-items: center;
	margin-left: 20px;
	flex: 0 1 auto; /*  Won't stretch vertically */
	background-color: var(--palerdark);
    background-repeat: repeat-x;
	/* Contains ccredits, logged-in and copyright */
}
.logo-flex-container {
	/* The item is a single image */
	flex: 0 1 auto;

	margin: 10px;
	width: 10%;
}
.logo-flex-container img {
	width: 100%;
	height: auto;
}
.banner-flex-container {
	/* Items are arranged in a single column. */
	display: flex;
	flex: 0 1 auto;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0px;
	/* The items are
	  a clubname item
	  a navigation-flex-container
	  a "subtitle" page heading item
	*/
}
.buttons-flex-container {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	/*	margin-left: 20px;
		margin-right: 20px;
		width: 4%;
		min-width: 30px;*/
}
.error-flex-container {
	order: 2;
	flex: 0 1 auto; /*  Won't stretch vertically */
}
/* The {pageData} token which populates the page-body class container
    is a form object whichis also a flex container.*/
/* Classes used by the form logic class recordForm.. */
.entry-form {
	display: flex;
	flex-flow: column nowrap;
	flex: 1 1 auto;
	flex-basis: 100%;
}
.subform {
	display: flex;
	flex-flow: column nowrap;
	flex: 0 0;
	justify-content: flex-start;
	width:fit-content;
}
.subform-max {
	display: flex;
	flex-flow: column nowrap;
	flex: 0 0;
	justify-content: stretch;
	width:100%;
	height: 200px;
}
.subform-main {
    position:relative;
	display: flex;
	flex-flow: column nowrap;
	flex: 1 0 auto; /*  Can grow and shrink vertically */
	overflow-y: auto;
	width: 100%;
}

.subform td {
	padding-left: 3px;
	padding-right: 3px;
}
.panels {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	width:inherit;	/* was fit-content*/
}
.panel {
	flex: 0 1 auto;
	margin: 3px;
}
.pane {	/* Used for contact list */
	padding: 2px;
	border: 2px;
	margin: 2px;
	border-color: var(--darkdark);
	border-style:solid;
}
.credits-container {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	margin-left: 20px;
}
.logged-in-container {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	margin-left: 20px;
}
.copyright-container {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	margin-left: 20px;
}

/* Responsive Nav bar */
.navigation-flex-container {
	/* Items are arranged in a single row. */
	display: flex;
	flex-flow: row nowrap;
	/* The items are
	  a buttons-flex-container
	  a navbar container
	*/
}
.navbar {
	/* Items are arranged in a single column. */
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: transparent;
	color: var(--palestlight);
	padding: 0px;
	/* The item is
	  a nav-links unordered list containing a checkbox and a menu
	*/
}
.menu-flex-container {
	/* Items are arranged in a single row by default. */
	display: flex;
	flex-flow: row wrap;
	gap: 0.5em;
	font-size: 12px;
	position: relative;
	z-index: 1001;	/* Above leaflet map */
}
.menu-flex-container li {
	background-color: var(--darkdark);
	border-radius: 5px;
	padding: 5px 14px;
	z-index: 1001;	/* Above leaflet map */
}
.menu-flex-container li:hover {
	background-color: var(--palerdark);
	transition: 0.3s ease;
	z-index: 1001;	/* Above leaflet map */
}
/* Hamburger is the label for a hidden checkbox
	visible only in narrow screens */
/* Responsive dropdown navigation */
.hamburger {
	display: none;
	font-size: 24px;
	user-select: none;
	width: 50%;
	margin: auto;
}
#checkbox_toggle {
	display: none;
}
.menu-group {
	position: relative;
}
.menu-group:hover .menu-items {
	display: block;
}
.menu-items {
	background-color: var(--darkdark);
	color: var(--palestlight);
	padding: 0 0;
	position: absolute;
	display: none;
	border-radius: 8px;
	top: 24px;	/* dropdown items below main button */
	left: 0px;
}
.menu-items li + li {
	margin-top: 10px;
}
.menu-items li {
	padding-top: 0.25em;
	padding-right: 1em;
	padding-bottom: 0.25em;
	padding-left: 1em;
	width: 12em;
	text-align: left;
}
.menu-items li:hover {
	background-color: var(--palestlight);
	color: var(--darkdark);
}
.menu-items li a {
	background-color: inherit;
	color: inherit;
}

/* Menus for narrower screens */
@media screen and (max-width: 910px) {
	/* Switch to popup menus */
	.menu-flex-container {
		display:none;
		position: absolute;
		background-color: transparent;
		left: 0;
		text-align: left;
		padding: 0;
	}
	/*	These are the top menu items listed vertically*/
	.menu-flex-container li:hover {
		display: inline-block;
		background-color: var(--palerdark);
		transition: 0.3s ease;
	}
	#checkbox_toggle[type=checkbox]:checked ~ .menu-flex-container{
		display: block;
	}
	.hamburger {
		display: block;
		width: 100%;
		padding-left: 10px;
		padding-right: 10px;
	}
	.menu-flex-container li {
		padding-top: 0.25em;
		padding-right: 1em;
		padding-bottom: 0.25em;
		padding-left: 1em;
		margin-top: 2px;
		margin-bottom: 2px;
		width: 12em;
		text-align: left;
		font-size: 18px;
	}
	.menu-items {
		left: 9em;
		top: 0px;
		-ms-transform: translateY(35%);
		-webkit-transform: translateY(35%);
		-moz-transform: translateY(35%);
		-o-transform: translateY(35%);
		transform: translateX(35%);
		font-size: 18px;
	}
	.menu-items li:hover {
		background-color: var(--palerlight);
	}
}

.clubName {
	display: block;
	font-family: "Times New Roman", Helvetica, "Trebuchet MS", Arial, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 4em;
}
.nav-links a {
	color: var(--palestlight);
}

/*Elements of generic page features*/
.centre {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
}
.rot90 {
	vertical-align:bottom;
}
.rot270 {
	vertical-align:bottom;
}
.rot90 div {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
.rot270 div {
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
	width: 17px;
	white-space: nowrap;
}
.box {
    margin: 2px;
    padding: 5px;
    border-radius: 7px;
}
.blobs {
    list-style-type:disc;
    list-style-position:inside;
    position:relative;
    left:20px;
}
.blob {
	position:relative;
	margin:4px;
	border-style:none;
	border-width:0px;
	border-radius: 16px;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	width:32px;
	height:32px;
}
.blob:hover {
	margin:3px;
	border-style:solid;
	border-width:1px;
	border-color:black;
}
.subtitle {
	margin-top: 5px;
	font-weight: bold;
	font-size: 1.05em;
}

.lt960 {
	display: none;
}

/*The variable page-dependent content*/
/* Entry form related */
.entry {
	table-layout: auto;
}
.entry td {
	min-width: 20px;
}
.entry td input {
	min-width: 20px;
	width: 100%;
	-webkit-transform: scale(1,1);
}
.entry td select {
	width: 100%;
}
.list {
	table-layout: auto;
}
.list th {
	width: 100%;
	display: block;
}
.list td input {
	width: 100%;
	display: block;
}
.list td select {
	width: 100%;
	display: block;
}
fieldset {
	border-color: var(--palestdark);
	border-width:1px;
	border-style:solid;
	border-radius: 5px;
	-moz-border-radius: 5px;	/*	needed to prevent superceding */
	-webkit-border-radius: 5px;	/*	needed to prevent superceding */
}
.panel-title {
	text-align: left;
    padding: 2px;
    margin: 2px;
	font-size: 0.9em;
	border-style:none;
	border-radius: 5px;
	-moz-border-radius: 5px;	/*	needed to prevent superceding */
	-webkit-border-radius: 5px;	/*	needed to prevent superceding */
}
.panel .entry {
	table-layout: auto;
}
.flow tr td {
	vertical-align: middle;
}
.panel .flow {
	table-layout: auto;
}
.panel .list {
	table-layout: auto;
}

.subform-title{
	text-align: left;
    padding: 2px;
    margin: 2px;
	font-size: 0.9em;
	border-style:none;
	border-radius: 5px;
	-moz-border-radius: 5px;	/*	needed to prevent superceding */
	-webkit-border-radius: 5px;	/*	needed to prevent superceding */
}

.errMsg {
	text-align: left;
    padding: 2px;
    margin: 2px;
	font-size: 0.9em;
	border-style:none;
	border-radius: 5px;
	-moz-border-radius: 5px;	/*	needed to prevent superceding */
	-webkit-border-radius: 5px;	/*	needed to prevent superceding */
}
.footnote {
	text-align: left;
    padding: 2px;
    margin: 2px;
	font-size: 0.9em;
	border-style:none;
	border-radius: 5px;
	-moz-border-radius: 5px;	/*	needed to prevent superceding */
	-webkit-border-radius: 5px;	/*	needed to prevent superceding */
}
.form-title {
	text-align: left;
    padding: 2px;
    margin: 2px;
    margin-bottom: 5px;
	font-size: 1.05em;
	border-style:none;
	border-width:1px;
	border-color:black;
	border-radius: 5px;
	-moz-border-radius: 5px;	/*	needed to prevent superceding */
	-webkit-border-radius: 5px;	/*	needed to prevent superceding */
}

.form-2-col {
	background-color: var(--palerlight);
	box-sizing: border-box;
	float:left;
	width:49.99999%;
	padding:0 8px;
}
.form-3-col {
	background-color: var(--palerlight);
	box-sizing: border-box;
	float:left;
	width:33.3333%;
	padding:0 8px;
}
.form-4-col {
	background-color: var(--palerlight);
	box-sizing: border-box;
	float:left;
	width:25%;
	padding:0 8px;
}
@media screen and (max-width: 960px) {
	/* Form can't fit all 4 columns; make a single column */
	.form-4-col {
		width:100%;
	}
}

/*Home page editor related
	Assume a minimum of 384 pixel width for a column */
.highight-menu /* For Html editor */ {
    background-color: #777777 !important;
    color: white !important;
}
.home-container {
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: space-between;
	margin: 0px;
	border-width: 0px;
	padding: 8px;
	height: 100%;
}

.home-1-col {
	box-sizing: border-box;
	flex: 1 1 auto;
	float:left;
	width:99.9%;
	padding:0 0px;
}
.home-2-col {
	box-sizing: border-box;
	flex: 1 1 auto;
	float:left;
	width:49.9%;
	padding:0 8px;
}
/*Less than 2 cols*/
@media screen and (max-width: 768px) {
	.home-2-col {
		width:99.9%;
	}
}
.home-3-col {
	box-sizing: border-box;
	flex: 1 1 auto;
	float:left;
	width:33.3%;
	padding:0 8px;
}

/*Less than 3 cols - go straight to one */
@media screen and (max-width: 1152px) {
	.home-3-col {
		width:99.9%;
	}
}
.home-4-col {
	box-sizing: border-box;
	flex: 1 1 auto;
	float:left;
	width:24.99%;
	padding:0 8px;
}
/* Less than 4 cols - go to 2 */
@media screen and (max-width: 1536px) {
	.home-4-col {
		width:49.9%;
	}
}
/*Less than 2 cols - go to 1 */
@media screen and (max-width: 768px) {
	.home-4-col {
		width:99.99%;
	}
}
/* Show border if in editor */
#editor-text .home-4-col,
#editor-text .home-3-col,
#editor-text .home-2-col
{
	border-width: 1px;
	border-style: dashed;
}
#editor-text article
{
	border-width: 1px;
	border-style: dotted;
}

/* Map styles (see also leaflet.css) */
.leafDiv {
	display: flex;
	flex-direction: row;
	flex: 1 1 auto; /*  Can grow and shrink vertically */
	overflow-y: auto;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: stretch;
	height:100%;
	/*	flex-wrap: nowrap;	*/
}
.leafDirectDiv {
	order: 1;
	flex-basis: 250px;
	flex-grow: 0;
	flex-shrink: 0;
	height:100%;
}
.leafMapDiv {
	order: 2;
	flex-grow: 1;
	flex-shrink: 1;
	height:100%;
}

/* Media queries */
/* Media queries for device types */
@media screen {
	/* Switch to screen copy of the page heading  */
	.print-header-container {
		display: none !important;
	}
	.subtitle {
		display: block;
	}
}
@media print {
	.page-banner {
		display: none !important;
		page-break-before: avoid;
		page-break-inside: avoid;
		page-break-after: avoid;
	}
	.error-flex-container {
		display: none !important;
		page-break-before: avoid;
		page-break-inside: avoid;
		page-break-after: avoid;
	}
	.page-footer {
		display: none !important;
		page-break-before: avoid;
		page-break-inside: avoid;
		page-break-after: avoid;
	}
	.criteria {
		display: none;
	}
	.page-body {
		display: block;
		overflow-y: visible !important;
	}
	.noprint {
		display: none;
	}
	.pagebreakbefore {
		page-break-before: always;
	}
	.pagebreakafter {
		page-break-after: always;
	}

	/* Switch to print copy of the page heading  */
	.print-header-container {
		display: block;
	}
	.subtitle {
		display: none !important;
	}
	.lt960 {
		display: none;
	}
	.action {
		display: none !important;
	}
}
.lt960 {
	display: none;
}

/* Media queries for media types and sizes */
@media screen and (max-width: 960px) {
	/* Override for small tablets */
	.gt960 {
		display: none;
	}
	.lt960 {
		display: block;
	}
}
@media screen and (max-width: 910px) {
	/* Forms can't all columns; make a single column */
	.form-3-col {
		width:100%;
	}
}
@media screen and (max-width: 910px) {
	/* Override for tablets */
	/* Reduce the size of the Club name font a bit */
	.clubName {
		font-size: 2.5em;
	}
	/* Omit credits and copyright */
	.credits-container {
		display: none;
	}
	.copyright-container {
		display: none;
	}
	.gt910, .gt960 {
		display: none;
	}
}
@media screen and (max-width: 768px) {
	/* Forms can't all columns; make a single column */
	.form-2-col {
		width:100%;
	}
}
@media screen and (max-width: 768px) {
	/* This is the point at which there is no room for the wide menu */
	/* Change the banner to row not column */
	.banner-flex-container {
		/* Items are arranged in a single column. */
		display: flex;
		flex: 0 1 auto;
		flex-flow: row nowrap;
	}
	/* Reduce the size of the Club name font */
	.clubName {
		display: none;
		/*		font-size: 1em;*/
	}
	.gt768, .gt910, .gt960 {
		display: none;
	}
}

/*Other content related class style definitions*/
.criteria {
    padding: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
	margin-left: 0px;
	margin-right: 0px;
	width: fit-content;
	border-style:solid;
	border-width:2px;
	border-color:#404040;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	flex-flow: row wrap;
}

.criteria tr {
	vertical-align:top;
}
.criteria td {
    padding-left: 5px;
    padding-right: 5px;
}
a:link {
	color:blue;
	text-decoration:none
}
a:hover {
	color:blue;
	text-decoration:underline
}
a.listnew {
	/* for anchor in rows below a list */
	color: buttontext;
	background-color: buttonface;
	box-sizing: border-box;
	padding: 1px 1px 1px;
	border-width: 1px;
	border-style: outset;
	border-color: buttonface;
	border-image: initial;
}
.rowBtn {
	background-color:transparent;
	border-style:none;
	height:14px;
	font-size:80%;
}
/*For action buttons e.g. Save*/
.action {
	text-align: left;
    padding: 2px;
    margin: 2px;
	font-size: 14px;
    min-width: 80px;
	border-style:none;
	border-width:1px;
	border-color:black;
	border-radius: 5px;
	-moz-border-radius: 5px;	/*	needed to prevent superceding */
	-webkit-border-radius: 5px;	/*	needed to prevent superceding */
}
.action:hover {
	border-style:solid;
}
.grid {		/*Table with grid border */
	border-width: 0px;
	border-spacing: 0px;
	border-style: none;
	border-color: black;
	border-collapse: collapse;
	/*background-color: white;*/
}
.grid td {
	border-width: thin;
	padding: 2px;
	border-style: solid;
	border-color: black;
	/*background-color: white;*/
}
.grid th {
	border-width: thin;
	padding: 1px;
	border-style: solid;
	border-color: black;
	/*background-color: white;*/
}
.editorButton {
	position:relative;
	height:32px;
	width: 32px;
	margin:2px;
	border-style:solid;
	border-width:2px;
	border-color:black;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	font: bold 100% 'trebuchet ms',helvetica,sans-serif;
}
/* Responsive layout picture gallery
	makes a one, two or four column-layout according to width */
.picrow {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
}
@media screen and (max-height: 400px) {
	.logo-flex-container {
		display: none;
	}
	.clubName {
		display: none;
	}
	.subtitle {
		display: none;
	}
}
@media screen and (max-width: 960px) {
	/* Override for small tablets */
	/* Make two equal columns of pictures sit next to each other
	instead of the normal 4 */
	.piccol {
		flex-basis: 50%;
	}
}
@media screen and (max-width: 768px) {
	/* Make the two columns of pictures stack on top of each
	other instead of next to each other */
	.piccol {
		flex-basis: 100%;
	}
}
.piccol {
	box-sizing: border-box;
	width: 25%;
	padding: 0 4px;
}
.piccol img {
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;
}

/* Toggle boxes for Php modules page (e.g.) */
.toggle-box {
	display: none;
}
.toggle-box + label {
	cursor: pointer;
	display: block;
	font-weight: bold;
	line-height: 21px;
	margin-bottom: 5px;
}
.toggle-box + label + div {
	display: none;
	margin-bottom: 10px;
}
.toggle-box:checked + label + div {
	display: block;
}
.toggle-box + label:before {
	background-color: #4F5150;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #ffffff;
	content: "+";
	display: block;
	float: left;
	font-weight: bold;
	height: 20px;
	line-height: 20px;
	margin-right: 5px;
	text-align: center;
	width: 20px;
}
.toggle-box:checked + label:before {
	content: "\2212";
}
.rowspace tr {
	height: 25px;
}
.sortedhead {
	color: black;
	font-weight: bold;
	font-size: 100%;
	border-style: none;
	border-color: #ffffff;
	border-width: thin;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	text-align: left;
	margin: 3px;
}
.sorthead {
	color: black;
	font-weight: bold;
	font-size: 100%;
	border-style: none;
	border-color: #ffffff;
	border-width: thin;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	text-align: left;
	margin: 3px;
}


/* Colours. The variables are defined in the themed stylesheets */
/*
	Colour combinations:
	whOnDarkest (white on darkest shade of the dark colour
	ltOnDkLight (lightest shade of light on lightest of dark
	ltOnDkContr (lightest shade of light on darkest of dark
	ltOnDkDark (darkest shade of light on darkest of dark
	dkOnLtLight (lightest of dark on lightest shade of light
	dkOnLtContr (darkest of dark on lightest shade of light
	dkOnLtDark (darkest of dark on darkest shade of light
	bkOnLightest (black on lightest shade of the light colour
*/
.whOnDarkest {
	color: #ffffff;
	background-color: var(--darkdark);
}
.ltOnDkLight {
	color: var(--palestlight);
	background-color: var(--palerdark);
}
.ltOnDkContr {
	color: var(--palestlight);
	background-color: var(--darkdark);
}
.ltOnDkDark {
	color: var(--darklight);
	background-color: var(--darkdark);
}
.dkOnLtLight {
	color: var(--darkdark);
	background-color: var(--palestlight);
}
.dkOnLtContr {
	color: var(--darkdark);
	background-color: #cccccc;
}
.dkOnLtDark {
	color: var(--darkdark);
	background-color: var(--darklight);
}
.bkOnLightest {
	color: #000000;
	background-color: var(--palestlight);
}
/*	Other colour usage:
	Black:	#000000
	White:	#ffffff
	Grey:	#3f3f3f	for h2
			#4F5150	togglebox label backround
	blue	for hyperlinks
	#FFF	search box background
	#b0b0b0	search box border
	#cccccc	for hr border
*/

.btn {
	background-image: url('./bg_button.png');
}
.btnRov {
	background-image: url('./bg_button.png');
}
.headRow {
	color: #ffffff;
	background-color: var(--darkdark);
}
.headRow th {
	padding-left: 2px;
	padding-right: 2px;
}
.menuItem	/* For Menu Items which only appear when their header is rolled over */ {
	color: var(--darkdark);
	background: var(--palerlight);
}
.dropbtn {
    background-color: var(--darkdark);
    color: var(--palestlight);
}
/*.dropdown:hover .dropbtn {background-color: var(--palerdark);}*/

/*.dropdown-content {
    background-color: var(--darkdark);
}*/
/*.dropdown-content a {
    color: white;
}*/
/*.dropdown-content a:hover {background-color: var(--palestlight);}*/
.helphead {
	background-color: var(--helpgreen);
}
.helpbody {
	background-color: var(--helpgrey);
	;
}
.rowBtn {
    color: blue;
}
.guides {
	border-collapse: collapse;
}
.guides td {
	border-bottom-color: var(--palestlight);
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.cells td {
	/*text-align: center;*/
	border-color: var(--palestlight);
	border-style: solid;
	border-width: 1px;
}
.excHead {
	background-color:var(--darkdark);
	color:white;
}
.excStack {
	background-color:var(--palestlight);
}
.excVariables {
	background-color:var(--palestlight);
	color:var(--darkdark);
}
.max-x {
	width: 100%;
}
.min300 {
	min-width: 300px;
}
.min300 textarea {
	min-width: 300px;
}
.max-y {
	height: 100%;
}
.menulink {
	color: var(--palestlight);
}
.menulink:hover {
	color: #ffffff;
}
.sortedhead {
	background-color: var(--palestlight);
}
.sorthead {
	background-color: var(--palerlight);
}
.whatsonpane {
	color: #000000;
	background-color: var(--palestlight);
	border-style: solid;
	border-width: 3px;
	border-color: var(--darklight);
}
.whatsonpane h4 {
	background-color: var(--palerlight);
	font-weight: bold;
	font-size: 1.5em;
}
.action {
	/*	Same colour as menu buttons*/
    background-color: var(--darkdark);
    color: var(--palestlight);
}
.form-title {
    background-color: var(--palestlight);
    color: var(--darkdark);
}
.subform-title{
	color: #ffffff;
	background-color: var(--darkdark);
}
.panel-title {
    background-color: var(--darkdark);
	color: white;	/*    var(--darklight);*/
}
.errMsg {
    background-color: white;
    color: red;
}
.footnote {
    background-color: white;
    color: black;
}
.criteria {
	background-color: var(--darkdark);
	color: white;
}
.criteria .action {
	/*	color: var(--darkdark);*/
	background-color: var(--palerdark);
}
/* And if it is a link (anchor instead of button) */
.action.link {
    background-color: var(--darkdark);
    color: var(--palestlight) !important;
	text-decoration:none;
}
.action.link:hover {
	color: var(--darklight);
	text-decoration:underline;
}
.ko th {
	/* Applies to a table representing a knockout draw width:50%;*/
	height: 40px;
	text-align: center;
}
.ko td {
	/* Applies to a table representing a knockout draw */
	vertical-align:middle;
	margin-bottom: 5px;
}
.ko-div {
	display:flex;
	flex-flow:row nowrap;
	align-items:stretch;
	width:100%;
	height:100%;
}
.ko-subtitle {
	flex: 0 0 20px;
	width:100%;
	text-align:center;
	font-size: large;
	font-style:italic;
	font-weight: bold;
}
.ko-col-div {
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	justify-content:stretch;
	align-items:center;
	flex-grow:1;
	flex-shrink:1;
}
.ko-col-head {
	/*	Keep depth constant*/
	flex-grow:0;
	flex-shrink:0;
}
.ko-cell {
	/*	Width dynamic */
	flex-grow:1;
	flex-shrink:1;
	display:flex;
	flex-direction: column;
	align-items:stretch;
	width:100%;
}
.ko-brace-div {
	flex-grow:1;
	flex-shrink:0;
	vertical-align: middle;
	width:20px;
}
.ko-cell-div {
    min-height:22px;	/* Same as constant in KnockoutView */
	/*	As flex container*/
    display:flex;
	flex-flow:row nowrap;
	align-items:center;
	/*	As flex content*/
    flex-grow:1;
	flex-shrink:1;
	align-self:flex-start;
}
.ko-max-y {
	flex-grow:1;
	flex-shrink:1;
	flex-basis: 100%;
}
.ko-entrant {
	flex-grow:0;
	flex-shrink:1;
	vertical-align: middle;
}
.origin {	/* used for emails */
	background-color:var(--palerlight);
	color:var(--darkdark);
	padding: 5px;  /* Separate content from border if any. */
	font-style: italic;
	font-size: 10pt;
}
.cblist {
	/* Limit height and show as multi-column */
    display: flex;
    flex-flow: wrap row;
    /* max-width: 150px; */
  }
.cblist dd {
	float: left;
    width: 17em;
}

.pdf-page-canvas {
	display: block;
	margin: 5px auto;
	border: 1px solid rgba(0, 0, 0, 0.2);
}

#pdf-viewer {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.1);
	overflow: auto;
}