/*	========================
	Global values
	========================*/ 
	
:root {
	--primary-color: #ae2573; /* NHS Pink #b12275*/
	--secondary-color: #005eb8; /* NHS Blue */
	--tertiary-color: #006847; /* NHS Dark Green */
	--bg-transparent: rgba(0, 128, 255, 0.0);
	--bg-color: #ffffff;
	--primary-text-color: #ae2573;
	--primary-text-color-hover: #ce7cab;
	--secondary-text-color-hover: #669ed4;
	--tertiary-text-color-hover: #66a491;
	--body-bg-color: #f9f9f9;
	
	

	--button-disabled:  #f08e27;
	--button-minwidth:  120px;
	--button-border-radius:	20px;
}


/* ==========================================================================
  SECTION BACKGROUNDS
========================================================================== */

/* background of entire page */
body {
	background-color: var(--body-bg-color);
}

/* header section */
/*
header {
	background-color: #01a8ce;
	background-image: url("footer.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border-bottom: 4px solid #aa1c78; 
	background-size: cover;
	background-position: center;
	padding-left: 20px;
	padding-right: 20px;
	margin-left: -10px;
	margin-right: -10px;
  }
*/
header {
	background-image: url("cover.png");
	background-size: cover; 
	background-repeat: no-repeat;
	background-position: center;
	border-bottom: 4px solid var(--primary-color);
	padding-left: 20px;
	padding-right: 20px;
	margin-left: -10px;
	margin-right: -10px;
}

/* body section */
main.ndl-body{
	background-color: var(--bg-color);
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	margin-left: -10px;
	margin-right: -10px;
}

/* footer section */
footer {
	background-image: url("footer.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: var(--bg-color);
	border-top: 4px solid var(--primary-color);
	padding-left: 20px;
	padding-right: 20px;
	margin-left: -10px;
	margin-right: -10px;
}

/* panel headings eg. address finder,  complex name, text panel */
.panel>.panel-heading{
	background-color: var(--primary-color);
	color: var(--bg-color);
}
  
/* Cookie warning section */
.ndl-cookie-warning {
	background-color: var(--bg-color);
	border-top: 4px solid var(--primary-color);
}
	
/* ==========================================================================
      TYPOGRAPHY
    
      - Must be applied manually in FX as desired, unless otherwise stated
========================================================================== */
  
/* default font */
body {
	font-family: 'Open Sans', sans-serif;
	font-size: 12pt;
	font-style: normal;
	color: #333;
}

.titleHeader {
	font-family: 'Open Sans', sans-serif;
	/*font-size: 32pt;*/
	font-size: 20pt;
	color: var(--primary-color);
	font-weight: bold;
	background-color: transparent;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
}

.titleBody {
	font-family: 'Open Sans', sans-serif;
	/*font-size: 20pt;*/
	font-size: 18pt;
	/*color: #000000;*/
	color: var(--secondary-color);
	/*background-color: #005EB8;*/
	background-color: var(--bg-color);
	font-weight: bold;
	/*Added by hajra*/
	padding-top:8px;
	padding-right:10px;
	padding-bottom:8px;
	padding-left:0px;
}

.titleSecondary {
	font-family: 'Open Sans', sans-serif;
	font-size: 16pt;
	color: #01a8ce;
}

.titleSecondaryMagenta {
	font-family: 'Open Sans', sans-serif;
	font-size: 14pt;
	color: var(--primary-color);
	font-weight: bold;    
}

ndl-tab-control ul {
	border: 2px solid var(--primary-color);
	border-radius: 2px;
}
ndl-tab-control ul li {
	background-color: var(--bg-color);
}
ndl-tab-control ul li.active {
	background-color: var(--primary-color);
}
li:not(.active) .navTabControlHCT:hover { 
	font-weight: bold; 
	background-color: transparent !important;
	color: var(--primary-color) !important;
}
li:not(.active) .navTabControlHCT { 
	font-weight: bold; 
	background-color: transparent !important;
	color: var(--primary-color) !important;
}
li.active .navTabControlHCT {
	font-weight: bold;
	background-color: var(--primary-color) !important;
	color: var(--bg-color) !important;
}
li.active .navTabControlHCT:hover {
	font-weight: bold;
	background-color: var(--primary-color) !important;
	color: var(--bg-color) !important;
}
.navTabControlHCT:focus {
	outline: none;
}

	

/* Sets properties for links and visited links - automatically applied */


/* footer link */
.ndl-footer > * a {
	color: #435564 !important;
}

.ndl-footer > * a:hover {
	color: #435564 !important;
	text-decoration: underline;
}

/* header alternative text for images if it has URL behaviour - applied automatically */
.ndl-header > * a {
	color: #ffffff !important;
	font-weight: bold;
}	

.ndl-header > * a:hover  {
	color: #ffffff !important;
	font-weight: bold;
	text-decoration: underline;
}

/* Input and placeholder font */
.form-control {
	font-family: 'Open Sans', sans-serif;
	font-size: 12pt;
	color: #333;
}

/* Error message font */
.TextBoxErrormessage_Default {
	font-size: 12pt;
	color: #ff0000;
}


/* ==========================================================================
      ELEMENTS: BUTTON

     - Must be applied manually in FX to 'button style' in properties
========================================================================== */
  
  
/* Primary Button */
	  
.ButtonPrimary {
	background-color: var(--primary-color);
	color:  var(--bg-color);
	border: 2px solid  var(--primary-color);
	border-radius: var(--button-border-radius); 
	font-family: 'Open Sans', sans-serif;
	outline: none !important;
	font-size: 12pt;
	width: auto;
	min-width: var(--button-minwidth);
	padding: 8px 10px 7px;
	float: right;
}
.ButtonPrimary:hover {
	background-color: var(--primary-color);
	color:  var(--primary-text-color-hover);
}
.ButtonPrimary:focus {
	background-color: var(--primary-color);
	color:  var(--primary-text-color-hover);
	border: 2px solid  var(--primary-color);
	outline: none; !important;
}
.ButtonPrimary:focus:not(:active):not(:hover) {
	background-color: var(--button-disabled);
	color: var(--bg-color);
	border: 2px solid var(--button-disabled);
	cursor: not-allowed;
}
.ButtonPrimary:active {
	background-color: var(--primary-color);
	color:  var(--bg-color);
	transform: translate(1px);
	top: 4px;
}

.ButtonSecondary {
	background-color: var(--secondary-color);
	color: var(--bg-color);
	border: 2px solid var(--secondary-color);
	border-radius: var(--button-border-radius); 
	font-family: 'Open Sans', sans-serif;
	outline: none !important;
	font-size: 12pt;
	width: auto;
	min-width: var(--button-minwidth);
}
.ButtonSecondary:hover {
	background-color: var(--secondary-color);
	color: var(--secondary-text-color-hover);
}
.ButtonSecondary:focus {
	background-color: var(--secondary-color);
	color: var(--secondary-text-color-hover);
	outline: none; !important;
}
.ButtonSecondary:focus:not(:active):not(:hover) {
	background-color: var(--button-disabled);
	color: var(--bg-color);
	border: 2px solid var(--button-disabled);
	cursor: not-allowed;
}
.ButtonSecondary:active {
	background-color: var(--secondary-color);
	transform: translate(1px);
	top: 4px;
}

.ButtonPrimary2 {
	background-color: var(--tertiary-color);
	color: var(--bg-color);
	border: 2px solid var(--tertiary-color);
	border-radius: var(--button-border-radius); 
	font-family: 'Open Sans', sans-serif;
	outline: none !important;
	font-size: 12pt;
	width: auto;
	min-width: var(--button-minwidth);
}
.ButtonPrimary2:hover {
	background-color: var(--tertiary-color);
	color: var(--tertiary-text-color-hover);
}
.ButtonPrimary2:focus {
	background-color: var(--tertiary-color);
	color: var(--tertiary-text-color-hover);
	outline: none; !important;
}
.ButtonPrimary2:focus:not(:active):not(:hover) {
	background-color: var(--button-disabled);
	color: var(--bg-color);
	border: 2px solid var(--button-disabled);
	cursor: not-allowed;
}
.ButtonPrimary2:active {
	background-color: var(--tertiary-color);
	transform: translate(1px);
	top: 4px;
}

.Othercheckin {
	background-color: #f08e27;
	color:#ffffff;
	border: 2px solid #f08e27;
	font-family: 'Open Sans', sans-serif;
	outline: none !important;
	font-size: 12pt;
	width: auto;
}

.Othercheckin:hover {
	background-color: #aa1c78; 
	color: #ffffff;
	border: 2px solid #aa1c78;
}

.Othercheckin:focus {
	background-color:#aa1c78 !important;
	color: #ffffff !important;
	outline: none; !important;
	border: 2px solid #f08e27 !important;
}

.Othercheckin:focus:not(:active):not(:hover) {
	background-color: #aa1c78; 
	color: #ffffff;
	border: 2px solid #aa1c78;
}

.Othercheckin:active {
	background-color: #aa1c78;
	transform: translate(1px);
	top: 4px;
	cursor: not-allowed;
}

/* Link Button (looks like a url link) */

.ButtonLink {
	border:none;
	outline:none !important;
	background-color: var(--bg-color) !important;
	font-size: 12pt;
}

.ButtonLink:hover {
	background-color: var(--bg-color);
	border:none;
	outline:none;
	box-shadow:none;
}

.ButtonLink:focus {
	background-color: var(--bg-color) !important;
	border:none;
	outline:none;
	box-shadow:none;
}

.ButtonLink:active {
	background-color: var(--bg-color) !important;
	border:none;
	outline:none;
	box-shadow:none;
}

/* The following should be applied to the 'label' style of the button in properties */
.ButtonLinkLabel {
	color: #1460aa;
	text-decoration: none;
	font-weight: bold;
	font-size: 12pt;
}

.ButtonLinkLabel:hover {
	color: #1460aa;
	text-decoration: underline;
}

/* ==========================================================================
	- Checkbox style
========================================================================== */
.CheckboxLabel_Default {
	padding-left: 0px !important;
}

/* ==========================================================================
	EMPHASIS PANEL

	- Apply this 'EmphasisPanel' style in FX by selecting it from the dropdown list under Styles
	in the paragraph or label properties as desired.
	- Appropriate for important instructions or helpful information. 
========================================================================== */

/* adds a grey line on left border of element */ 
.EmphasisPanel {
	border-left:5px solid #BFC1C3;
	line-height:1.5;
	padding-left:0.7894737em;
}

  /* ==========================================================================
      MISCELLANEOUS
 ========================================================================== */
  
/* Justifying left & right */

.Left {
	float: left;
}

.Right {
	float: right;
}

.separatorInvisible{
	opacity: 0;
}
.separatorInvisible5px{
	opacity: 0;
	height: 5px;
}

.separatorHerts{
	border-color: #aa1c78;
}

.form-control:focus {
	border-color: var(--primary-color) !important;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(132, 11, 85, .6);
}

/* Ensures words are not cut off when user failes to select an option from droplist */
select.form-control {
	height: fit-content !important;
}

@media (max-width: 767px) {
	#ndl-image1{
		height: 70px !important;
		float: right !important;
	}
}

@media (max-width: 616px) {
	#ndl-image2{
		top: 10px;
		height: 100px !important;
		float: left !important;
	}
}

@media (max-width: 473px) {
	#ndl-image2{
		top: 10px;
		height: 70px !important;
	}
	.Heading1 {
		font-size: 30px;
	}
	.Heading2 {
		font-size: 20px;
	}
}

/* Ensures buttons with Right allignment are inline with another button on mobile screens */
@media (max-width: 767px) {
	.ButtonRightAlign{
		bottom: 58px;
		position: relative;
	}
}

@media (max-width: 473px) {
	.ButtonRightAlign{
		bottom: 58px;
		position: relative;
	}    
}