*, h3 {
	margin: 0px;	
	padding: 0px;
	box-sizing: border-box;
}

:root {
	--did-blue: #179bdf;
	--did-blue-light: #44b9ee;
	--did-blue-page: #1173a5;	
	--did-grey: #cfcfcf;
	--did-white: white;
	--font-size: 1rem;
	--font-size-h3: 1.5rem;
	--font-size-label: 1rem;
	--font-size-modal: 1.0rem;
	--font-size-modal-small: 0.8rem;
	--font-size-table: 0.8rem;
	--font-size-input: 1rem;
	--font-size-button: 1rem;
	--size-checkbox: 2rem;
}

body, p {
	font-family: "Open Sans", Arial, Helvetica;
	touch-action: pan-x pan-y;								/* stop zoom in ?*/
}

h1 {
	color: #1a75ba;
	font-size: 2rem;
}

h2 {
	color: #179bdf;
}

h1, h2 {
	text-align: center;
	padding: 0.5rem;
}

.paytesting {
	padding: 15px 0px;
	background-color: LightSeaGreen;
	border-radius: 25px;
}
.padd05rem-topbottom {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.padd05rem-leftright {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

/* make bootstrap style padding !important */
.pb-0 {											
	padding-bottom: 0px !important;
}
.pt-0 {
	padding-top: 0px !important;
}

h3 {
	padding: 0.5rem;
	background: var(--did-blue);
	font-size: var(--font-size-h3);
	color: white;
	text-align: center;
/* 
	background: gray;
 */
}

section > h3 {
	padding: 0.5rem 1rem;
	border-top-left-radius:10px;	
	border-top-right-radius:10px;	
}

section > h3.carer-h3 {
	background: yellow;
	color: black;
}

header, footer {
	text-align: center;
	color: var(--did-white);
	z-index: 1;
}

label, p, span, div {
	font-size: var(--font-size-label);
}

.table {
	margin: 10px 0px;	
	display: table;
	width: 100%;
	font-family: arial, "Sans serif";
}

#buttonBar {
	margin-top: 9px;
}

.buttonBarSpaceTopBottom {
	margin: 1rem 0px;
}

#searchTable {
	border-collapse: collapse;
	text-align: center;
	margin-top: 10px;
	display: flex;
	overflow-x:scroll;
}

#searchTable tr, 
#searchTable tr th span, 
#searchTable tr th div {
	font-size: var(--font-size-table);
/* 
	border-top: 3px solid var(--did-white);
 */
}

.search-type {
	display: flex;
	flex-direction: column;
}

.search-type-tickbox {
	display: flex;
	flex-direction: row;
	font-size: var(--font-size-table);
}

#search_type_did,
#search_type_did_and_carer,
#search_type_carer,
#search_type_renew,
#search_type_renew_and_carer,
#search_type_carer_renew {

	position:relative;
	top: 0.1rem;
	height: var(--font-size-table);
}

#searchTable tr th {
	background-color: var(--did-blue);
	color: var(--did-white);
}

#searchTable tr th,
#searchTable tr td  {
	padding: 2px 6px;
}

#searchTable tr td  {
	border-bottom: 2px solid white;
}

#searchTable tr th.whiteleft {
	border-left: 2px solid var(--did-white);
}

#searchTable tr th.blueleft {
	border-left: 2px solid var(--did-blue-light);
}

th.bluebottom {
	border-bottom: 2px solid var(--did-blue-light);
}

#searchTable span.name-note {
	font-style:italic; 
	font-size: 12.8px; 
	cursor:pointer;
}

#searchTable tr td.bottombordernone {
	border-bottom: none;
}

.listline {
	background:#cfcfcf; 
	color:black;
	vertical-align: top;
}

.mobile {
	display: none;
}

.desktop {
	display: normal;
}

.photo-thumb {
	height:40px;
}

.flex-row,
.flex-row-sm-column {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.flex-column {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.flex-centre {
	align-items: center;
}
.flex-centre-middle {
	align-items: center;
	justify-content: center;
}

.flex-nojustify {
	justify-content: unset;
}
	
.flex-checkbox {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.flex-checkbox input {
	flex: 0 0 auto;
}

.flex-checkbox label {
	flex: 1 1 auto;
	margin: auto 0.5rem;
	text-align:left;
}

.flex-checkbox.centre label {
	text-align:center;
}

.title {
	background: var(--did-blue);
	padding: 5px 0px;
	color: white;
}

.pagination {
	font-family: arial, "sans serif";
	font-size: 0.8rem;		
	margin: 10px 0px;
}

.page,
.page:visited {
	background: var(--did-blue-page);
	font-size: 0.8rem;			
	color: white;
	padding: 3px;
	margin: 1px;
	text-decoration: none;
}

.page.title {
	background: var(--did-blue);
}

.page.current {
	background: red;
}

.page-content {
	margin:1.5rem;
	text-align:center;
}

.content_wide {
	margin:0% 15%;
	text-align:left;
}

.content_wide li {
	list-style-position: inside;
}

.login-image-block {
	display: flex;
	justify-content: space-between;
	margin-bottom: 3rem;
}

table.grid {
	width: 80%;
	margin: auto;
	border-collapse: collapse;
}
table.grid tr {
	border-bottom: 2px solid white;
}

table.grid-small {
	width: 25%;
	margin: auto;
	margin-bottom: 30px;
}

table.grid-large th {
	text-align: left;
}

table.grid th,
table.grid td {
	border-left: none;
	border-right: none;
}

table.grid td.blue {
	background: var(--did-blue);
	color: white;
	text-align: center;
}

table.grid th {
	background: var(--did-blue);
	color: white;
	padding: 5px 2px;
}

table.grid td {
	background: var(--did-grey);
	padding: 5px;
}

table.grid td.centre {
	text-align:center;
}

.simple-tooltip {
	position: relative;
	display: inline-block;
	font-size: var(--font-size-table);
	z-index: 9999;	
}

.simple-tooltip .simple-tooltiptext {
	position: absolute;
	font-size: var(--font-size-table);
	left: -15px;
	top: +15px;
	z-index: 1;
	visibility: hidden;
	min-width: 100px;
	max-width: 300px;
	padding: 3px;
	background-color: yellow;
	color: black;
	border-radius: 6px;
	text-align: left;
	z-index: 99999;
}

.simple-tooltip .simple-tooltiptext-wide {
	min-width: 300px;
	max-width: 500px;
}

.simple-tooltiptext-wide p {
	margin-bottom: 10px;
}

.simple-tooltip:hover .simple-tooltiptext {
  visibility: visible;
}

.search-title {
	font-family: arial, "Sans Serif";
	font-size: 0.8rem;
}

.faq_question {
	background: var(--did-grey);
	margin: 3px 0px;
	padding: 4px 6px;
	text-align: center;
	animation-name: move;
	animation-duration: 2000ms;
	animation-timing-function: ease-in;
}

.faq_answer {
	padding: 1rem 3rem;
	animation-name: move;
	animation-duration: 2000ms;
	animation-timing-function: ease-in;
}

#searchcriteria {
	display: flex;
	flex-direction: row;
	background-color: #cfcfcf;
	padding: 10px;
	border-radius: 10px;
	border-color: #999;
	border: 1px solid #999;	
	justify-content: space-around;
}

#searchcriteria input,
#searchcriteria select,
.table span, 
.table div {
	font-size: var(--font-size-table);
}

#searchcriteria select, 
#searchcriteria input {
	font-family: arial, "Sans Serif";
	padding: 2px 5px;
	border-radius: 5px;
	border: 1px solid #999;
	background: rgb(223, 223, 223);
}


h1 > span {
	font-size: inherit;
}

h3 > span {
	font-size: var(--font-size-h3);
}

header {
	position: sticky;
	background: var(--did-white);
	color: #000;
	height: 5rem;
	top: 0px;
}

nav {
	margin-top: 1rem;
	float: right;
}

nav > li {
	list-style-type: none;
	float: left;
}

nav > li > a {
	display: block;
	text-align: center;
	padding: 1rem;
}

main {
	min-height: 100vh;
	padding: 1rem;
}

section.application-type,
section.application-photo,
section.application-doc,
section.application-carer-photo,
section.application-payment,
section.application-how-heard,
section.application-tandc,
section.application-notes {
	grid-column: span 2;
}

section 
{
	background-color: #cfcfcf;
	border: 1px solid #333;
	border-radius: 10px;
	padding-bottom: 1rem;
	margin: 0.5rem;		
}

section,
div.middle {
/* div#top-button,
div#bottom-button { */
	margin: 1.5rem;
}


.document-view {
	font-size: 0.9rem;
	cursor:pointer;
}

a.quietlink, 
a.quietlink:visited {
	color: rgb(17, 113, 174);
	text-decoration:none;
}

a.quietlink, 
a.quietlink:visited {
	color: rgb(17, 113, 174);
	text-decoration:none;
}

.footer a.quietlink, 
.footer a.quietlink:visited {
	color: white;
}

a.quietlink:hover {
	background-color:white;
	color: red;
}

a.simple-tooltip {
	text-decoration: none;
}

.footer a.quietlink:hover {
	background-color:white;
	color: red;
}

label {
	width: 250px;
}

label.fullwidth {
	width: 100%;
}

button, .postcodeLookup {
	background-color: var(--did-blue);
	color: white;
	padding: 1rem 1.5rem;
	font-size: var(--font-size-button);	
	font-weight: 600;
	/* border: 2px solid white; */
	border: 2px solid var(--did-blue);	
	margin-bottom: 3px;
	cursor: pointer;
}

.postcodeLookup {
	font-family: arial;
	border-bottom: 0px;
}

a.menu:focus,
button:focus,
.postcodeLookup:focus {
	background-color: red;
}

button:hover,
.postcodeLookup:hover {
	background-color: white;
/* 	color: rgb(17, 113, 174);	 */
 	color: var(--did-blue);
	border: 2px solid var(--did-blue);	
}

/* 
.button-small:hover {
	border: none;
}
 */

.button-small {
	padding: 0.2rem 0.5rem;
	border: none;
	margin: 1px;
	border: 2px solid transparent;
}


.button-header-margin,
.forgot-p {
	margin-top: 20px !important;
}

.paypal-button-container {
	min-height:30px;
	margin-top:2px;
}

.paypal-button:hover {
	background-color: white !important;
}

input, select, textarea {
	font-family: "courier new", Sans-serif, helvetica;
	font-weight: 400;
	padding: 10px;
	font-size: var(--font-size-input);
}

select {
	-webkit-appearance: none;
}
 
input[type='checkbox'], 
input[type='radio'] {
	width: var(--size-checkbox);
	height: var(--size-checkbox);
}

th.tickbox > input[type='checkbox'],
td.tickbox > input[type='checkbox'], 
td.span {
	width: var(--font-size-table);
}

input[type='file'] {
	display: none;

}

textarea {
	resize: vertical;
	height: 5rem;
	min-height: 5rem;
	max-height: 15rem;

}

.upload-file {
    cursor: pointer;
}

input:focus {
	background: pink;
}

.input-block {
	padding: 0.5rem 1rem;
}

footer {
	position: relative;		/* was sticky */
	min-width: 100%;
	padding: 10px 0px 10px 0px;
	background: var(--did-blue);
	bottom: 0px;
	background-color: #1a75ba;
}

section {
	margin-bottom: 2rem;
}

select
{
	max-width: 100%;
}

p.appnote {
	font-style: italic;
	padding: 0rem 0rem 0.7rem 0rem;
}

#applicant_notes {
	width: 100%;
	height: 5rem;
}

label.bold,
td.bold {
	font-weight: bold;
}

td.right {
	text-align:right;
}

.d-none {
	display:none;
}

.field-label {
	display:inline-block; 
	width:30%
}

.field-input {
	display:inline-block; 
	width:40%
}

.field-input-password {
	width:250px; 
	margin-right:10px;
}

.field-input-small,
.field-label-small {
	font-size: 0.9rem;
}
.full-width {
	width: 100% !important;
}
.alert {
	padding: 20px;
	background-color: #2196F3;
	color: white;
	margin-bottom: 15px;
	font-family: "arial";
}

/* The close button */
.closebutton {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebutton:hover {
  color: black;
}

.mandatory:after {
	content: " * ";
	color: red;
}

.topnav {
	z-index: 101;		/* 1 greater than PayPal buttons */
}

div.error {
	padding:1rem;
	font-size: var(--font-size);	
	background: white;
	color:red;
}

.admin-button {
	display:block;
	margin: auto;
	text-align:center;
}

.center {
	/* causes problems with messages appearing even with d-none class added - so removed here. */
	/* display:block; */
	margin: auto;
	text-align: center;
}

.hint {
	text-align:center;
	font-size: 1rem;
	padding: 20px 10px;
}

/* 
.output-image {
	width: 200px;
}
 */

.image-caption {
	margin-top: 10px;
	font-size: 1rem;
	padding: 0.2rem;
	height: 2rem;
}


.icon {
	background: white; 
}

.red {
	color: red;
}

.green {
	color: green;
}

.btn-green {
	background: green;
}

.btn-red {
	background: red;
}

/* Small devices (landscape phones, 576px and up) */
/* @media screen and (max-width: 576px) { */

body {
	font-size: var(--font-size);
}
	
.field-label {
	width:100%
}

.field-input {
	display:block; 
	width:100%
}	

/* potential styling for select boxes */
select.field-input {
}

#filePhotoPreviewEmbed,
#fileDocumentPreviewEmbed,
#filePhotoCarerPreviewEmbed {
	text-align: center;
	width: 100%;
}

/* 
span.small-newline::before {
	content: ' ';
	display: block;
}
 */

.displayinline {
	display:inline;
}

.payment-title {
	margin-top: 2rem;
}

.blocks {
	background-color: #179bdf;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	font-size: 30px;
	text-align: center;
	color:white;
}

.item {
	padding: 10px;
	flex: 50%;
}

.block_centre {
	width: 80%;
	margin: 0% 10%;
	text-align:center;
	vertical-align: top;
}

.block_centre a {
	color: white;
}

.block_centre a:hover {
	color: red;
	background: white;
}

.card_selected {
 	padding: 15px 0px 5px 0px;
}

.logged_in_user {
	margin-top: 50px;
	display: block;
	text-align:center;
	padding-top: 1rem ;
	margin-bottom: 1rem ;
}

.status-approve, 
.status-approved, 
.status-uploaded,
.status-unapproved,
.status-unpaid,
.status-wait {
	max-width: 75%;
	padding: 10px;
	margin: 5px auto;
	border-radius: 10px;
}

.status-wait, 
.status-approved, 
.status-unapproved,
.status-uploaded {
	background: pink;
}

.status-approve {
	background: orange;
	border: 1px solid #ff8c00;	
}

.status-unpaid,
.status-approved {
	background: #d0f0c0;
	border: 1px solid green;	
}

.status-uploaded,
.status-unapproved,
.status-wait {
	background: pink;
	border: 1px solid red;	
}

.tickbox {
	text-align: center;
}

.page:not(.title) {
	cursor: pointer;
}

.page.title {
	cursor: not-allowed; /* none */
}

.dashboard {
	width: 98%;
	margin: auto;
}

#found-message, .small {
	font-size: 1rem;
}

.fa-circle-check,
.fa-circle-xmark {
	padding: 0.25rem;
	border-radius: 1rem;
}

.circle-letterS {
	display: inline-block;
	background-color: var(--did-white);
	color: var(--did-blue);
	border-radius: 50%;
	font-size: 1rem;
	line-height: 1rem;
	width: 1rem;
	height: 1rem;
	text-align:center;
}

.circle-letter {
	font-size: 1rem;
	background:var(--did-white);
	color:var(--did-blue);
	padding: 0.2rem 0.5rem;
	border-radius: 50%;
}

.clickable {
	color: var(--did-blue);
	text-decoration: none;
}

.clickable:hover {
	text-decoration: underline;
}

button:hover .circle-letter {
	color:var(--did-white);
	background:var(--did-blue);
}


.home-grey {
    /* background: #cfcfcf; */
    background:url("../images/slider_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    
    padding: 2rem 0;

}
.home-topbanner {
    display:flex;
}

.home-topbanner div {
	flex: 1;
}

.home-slider-image {
   /* background-image: url(images/card-edward-shield.png); */
   display:flex;
   justify-content: center;
   align-content:center;
}

.home-slider-image img {
	width: 80%;
	height: 80%;
}

.home-middle {
    display:flex;
    justify-content: space-between;
    gap: 5rem;
}

/* .home-topbanner div, */
.home-middle div {
    flex: 1;
}

.home-images {
    display:flex;
    flex-direction: row;
    justify-content: space-arounds;
    align-items: center;
    height: 300px;
}

.home-profileimagecell {
    display:flex;
    justify-content: center;
    align-items: center;
}

.home-topbanner h1,
.home-middle h2 {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.home-topbanner h2 {
	text-align: left;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	padding: 0px;
}

.home-middle p {
	margin-bottom: 1.5rem;
}

[id^=getaddress_dropdown] {
	width:100%;
}

.hoverinfo {
	cursor: pointer;
}

.pay-fp {
	width: 100%;
	margin: 5px 0px;
	border-radius: 3px;
	border: 1px solid transparent;
}

.pay-fp:hover {
	border: 1px solid var(--did-blue);
}

.right-image {
	display:flex;
	margin: 40px;
}

ol.loginnotes {
  list-style-position: inside;
  text-indent: -1em;
  padding-left: 1em;
}

@media screen and (max-width: 600px) {
	.content_wide .faq_answer {
		margin:7px 0% 20px 0%;
		padding:0%;
	}
}

@media screen and (max-width: 500px) {

	.login-image-block {
		display:block;
	}
	
	.right-image #sliderimage{
		max-width: 100%;
		margin-top: 2rem;
	}

	.flex-row-sm-column {				/* use column on small width */
		flex-direction: column;
	}

	.flex-centre {
		align-items: unset;
		justify-content: unset;
	}

    .home-topbanner, 
    .home-middle {
        display: block;
    }
	
	.home-topbanner div {
		display: block; 	
	}

    .home-topbanner button {
    	width:100%;
    	margin-bottom: 1rem;
    }

	.home-card {
		height: 200px;
	}
    
    .home-middle.home-images img {
    	margin-bottom: 2rem;
    }


	.home-images {
		display:flex;
		flex-direction: column;
		height:auto;					/* otherwise footer overlaps */
	}    

	.home-slider-image img {
		width: 100%;
		height: 100%;
	}
}

@media screen and (max-width: 900px) {

	.desktop {
		display: none;
	}
/* 

	.table {
		background-color: gray;	
	}	
	
	.title {
		display: none;
	}
	
	.row:nth-child(even) {
		background-color: inherit;
	}	
	
	.row {
	  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	  transition: 0.3s;
	  margin-bottom: 10px;
  	}
			
	.col {
		background-color: white;
		display: block;
		width: 85%;
		margin: auto;
		text-align: center;
		padding: 0.5rem 0px;
	}
	
	.mobile {
		text-align: center;
		display: block;
	}
	

	
	.photo-thumb {
		width:100px;
		height: auto;
		margin-top: 10px;
	}
	
	.simple-tooltip:hover .simple-tooltip {
	  visibility: hidden;
	}	
 */	
	#searchcriteria {
		display: flex;
		flex-direction: column;	
	}	
}



/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
		
	label {
		text-align:right;
	}

	label.left {
		text-align:left;
	}

	.field-label {
		width:40%;
	}
		
	.field-input {
		display:inline; 
		width:40%;
	}
		
	h3 {
/* 
		background: yellow;	
 */
	}
	
	span.small-newline::before {
		content: ' ';
		display: block;
	}
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
	:root {	
		--font-size-h3: 2rem;
		--font-size-label: 1.5rem;
		--font-size-input: 1.5rem;
	}
	
	h3 {
/* 
		background: pink;
 */
	}
}

/* X-Large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {

	h3 {
/* 
		background: red;	
 */
	}
}

/* XX-large devices (larger desktops, 1400px and up) */
@media screen and (min-width: 1400px) {
	
	h3 {
/* 
		background: orange;	
 */
	}
}