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

	/* background of entire page */
	body {
		background-color: #F9F9F9;
	}

	/* header section */
	header {
		background-color: #ffffff;/*#01a8ce;*/
		border-bottom: 4px solid #aa1c78; 
		background-size: cover;
		background-position: center;
		padding-left: 20px;
		padding-right: 20px;
		margin-left: -10px;
		margin-right: -10px;
	  }

	/* body section */
	div.ndl-body{
		background-color: #ffffff;
		padding-left: 20px;
		padding-right: 20px;
		margin-left: -10px;
		margin-right: -10px;
	  }

	/* footer section */
	footer {
		background-image: url("HCT Footer5.jpg");
		background-size: cover;
		background-color: #f4f4f4;
		border-top: 4px solid #aa1c78;
		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: #aa1c78;
		color: #ffffff;
	  }
	  
	/* Cookie warning section */
	.ndl-cookie-warning {
		background-color: white;
		border-top: 4px solid #aa1c78;
	}
	
/* ==========================================================================
      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: #ffffff;
		  font-weight: bold;
		  background-color: #aa1c78;
		  padding-top: 10px;
		  padding-bottom: 10px;
		  padding-left: 10px;
	  }

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

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

	  .titleSecondaryMagenta {
		 /font-family: 'Open Sans', sans-serif;
		  font-size: 14pt;
		  color: #aa1c78;
		  font-weight: bold;    
		 
		 
	  }
	  
	  .navTabControlHCT { 
		font-weight: bold; 
		background-color: #f08e27; 
		color: #01a8ce;
		}

	  /* Sets properties for links and visited links - automatically applied */
	  a {
		  color: #005EB8;/*#01aace; --Changed by hajra*/
		  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		  font-weight: normal;
		  font-size: 12pt;
	  }
	  
	  a:hover {
		  color:#AE2573; /*#23527c; --Changed by hajra*/
		  text-decoration: underline;
		  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		  font-weight: normal;
		  font-size: 12pt;
	  }

	  /* 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: #aa1c78;
		color:#ffffff;
		border: 2px solid #aa1c78;
		font-family: 'Open Sans', sans-serif;
		outline: none !important;
		font-size: 12pt;
		width: auto;
		padding: 8px 10px 7px;
		float: right;
	  }

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

	  .ButtonPrimary:focus:not(:active):not(:hover) {
		background-color: #f08e27; 
		color: #ffffff;
		border: 2px solid #f08e27;
	  }
	  
	  .ButtonPrimary:active {
		  background-color: #f08e27;
		  transform: translate(1px);
		  top: 4px;
		  
	  }

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

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

	  .ButtonSecondary:focus:not(:active):not(:hover) {
		background-color: #aa1c78; 
		color: #ffffff;
		border: 2px solid #aa1c78;
	  }
	  
	  .ButtonSecondary:active {
		  background-color: #aa1c78;
		  transform: translate(1px);
		  top: 4px;
		  cursor: not-allowed;
	  }

	  .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: #ffffff !important;
		font-size: 12pt;
	  }

	  .ButtonLink:hover {
		background-color: #ffffff;
		border:none;
		outline:none;
		box-shadow:none;
	  }

	  .ButtonLink:focus {
		background-color: #ffffff !important;
		border:none;
		outline:none;
		box-shadow:none;
	  }

	  .ButtonLink:active {
		background-color: #ffffff !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;
	  }

/* ==========================================================================
      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;
		}

		.separatorHerts{
			border-color: #aa1c78;
		}

	  .form-control:focus {
		border-color: #aa1c78 !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;
		}    
	  }