/* STYLESHEET for NHS FX Projects

Description: Stylesheet for use in FX projects which applies NHS themes, colours, fonts and ideas. 
FX version required: 1.5
Author: Lizzie Brightwell
Date last updated: 14.07.2021


In this document:
- Section backgrounds
- Typography
- Colours
- Elements
    -  Buttons
         - Primary
         - Secondary
         - Inverse
         - Link
    - Separators
    - Slider
    - Progress bar
- Emphasis Panel
- Miscallaneous

*/

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

  - applied automatically (simply import stylesheet and press 'refresh'). 
   If you do not wish for these stylese to be applied, either comment them out or remove them from the stylesheet.
========================================================================== */

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

/* header section */
header {
  background-color: #005eb8;
  /* padding ensure content does not flow out of the container */
  padding-left: 20px;
  padding-right: 20px;
  margin-left: -10px;
  margin-right: -10px;
}

/* body section */
div.ndl-body {
  background-color: #ffffff;
  /* padding ensure content does not flow out of the container */
  padding-left: 20px;
  padding-right: 20px;
  margin-left: -10px;
  margin-right: -10px;
}

/* footer section */
footer {
  background-color: #d8dde0;
  border-top: 4px solid #005eb8;
  /* padding ensure content does not flow out of the container */
  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: #005eb8;
  color: #ffffff;
}

/* cookie banner */
.ndl-cookie-warning {
  position: static;
  /* reset otherwise will overlay header/footer */
  background-color: #ffffff;
}

.ndl-cookie-warning .ndl-cookie-warning-accept {
  background-color: #007f3b !important;
  color: #ffffff;
  border: none;
  /* border-radius provides slightly rounded corners */
  border-radius: 4px;
  /* box-shadow provides a dark line at the bottom of the button */
  box-shadow: 0 4px 0 #00401e;
  /* no outline ensures there is not a blue outline on the button */
  outline: none !important;
  /* padding sets the size of the button relative to the text */
  padding: 10px 16px 8px 16px;
  font-size: 19px;
  width: auto;
  font-weight: bold;
}

/* cookie popup (policy style) */
.ndl-modal {
  background-color: #ffffff;
  color: #231f20;
  font-size: 16px;
  line-height: 1.5;
}

.ndl-modal button {
  background-color: #007f3b !important;
  color: #ffffff;
  border: none;
  /* border-radius provides slightly rounded corners */
  border-radius: 4px;
  /* box-shadow provides a dark line at the bottom of the button */
  box-shadow: 0 4px 0 #00401e;
  /* no outline ensures there is not a blue outline on the button */
  outline: none !important;
  /* padding sets the size of the button relative to the text */
  padding: 10px 16px 8px 16px;
  font-size: 19px;
  width: auto;
  font-weight: bold;
}

/* changes the style when a user hovers over a button */
.ndl-modal button:hover {
  background-color: #00662f;
  color: #ffffff;
  border: none;
}

/* changes the style when a user is clicking on a button */
.ndl-modal button:active {
  background-color: #00401e !important;
  box-shadow: none;
  color: #ffffff !important;
  border: none;
  /* transform moves the button down by 4 pixels as the user clicks it */
  transform: translateY(4px);
}

/* changes the style when the focus is on the button */
.ndl-modal button:focus {
  background-color: #ffeb3b;
  color: #212b32;
}

/* changes the style when a user has clicked on a button */
.ndl-modal button:focus:not(:active):not(:hover) {
  background-color: #ffeb3b !important;
  box-shadow: 0 4px 0 #212b32;
  color: #212b32 !important;
  border: none;
}

/* ==========================================================================
      TYPOGRAPHY
    
      - These styles are applied in FX by selecting them from the dropdown list under Styles
       in the element properties as desired, unless otherwise stated.

      - For styles which are applied automatically (simply import stylesheet and press 'refresh'):
        if you do not wish for these stylese to be applied, either comment them out or remove them from the stylesheet.
========================================================================== */

/* default font */
body {
  font-family: 'Frutiger W01', Arial, sans-serif;
  font-size: 19px;
  color: #231f20;
}

.Heading1 {
  font-family: 'Frutiger W01', arial, sans-serif;
  font-size: 32px;
  font-weight: bold;
  color: #231f20;
}

.Heading2 {
  font-family: 'Frutiger W01', arial, sans-serif;
  font-size: 24px;
  font-weight: normal;
  color: #231f20;
}

.HeadingWhite {
  font-family: 'Frutiger W01', arial, sans-serif;
  font-size: 32px;
  font-weight: bold;
  color: white;
}

.HeadingFormName {
  font-family: 'Frutiger W01', arial, sans-serif;
  font-size: 32px;
  font-weight: bold;
  color: white;
}

.TextCaption {
  color: #231f20;
  font-size: 16px;
}

.TextFooter {
  color: #212b32;
}

.Subtext {
  color: #4c6272;
}

/* Input and placeholder font & appropriate input box size - applied automatically */
.form-control {
  font-size: 19px;
  height: unset;
}

/* Error message font - applied automatically */
.TextBoxErrormessage_Default {
  font-size: 19px;
}


/* links - applied automatically */
a {
  color: #005eb8;
  text-decoration: underline;
}

/* changes the colour when user hovers over the link */
a:hover {
  color: #7C2855;
  text-decoration: none;
}

/* changes the style when a user is clicking on the link */
a:active {
  background-color: #ffeb3b;
  color: #212b32;
  border: none;
  box-shadow: 0 -2px #ffeb3b, 0 4px #212b32;
  text-decoration: none;
}

/* footer links - applied automatically */
.ndl-footer>* a {
  color: #4c6272 !important;
  /* font-weight: bold; */ /* removed */
}

.ndl-footer>* a:hover {
  color: #212b32 !important;
  font-weight: bold;
}

/* header alternative text for images - applied automatically */
.ndl-header>* img {
  color: white;
}

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

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

/* ==========================================================================
      COLOURS

      - These NHS colours are for optional use. 
      - Apply these styles in FX by selecting them from the dropdown list under Styles
       in the element properties as desired.
========================================================================== */

.BlueBackground {
  background-color: #005eb8;
}

.BlueForeground {
  color: #005eb8;
}

.GreenBackground {
  background-color: #007f3b;
}

.GreenForeground {
  color: #007f3b;
}

.DarkGreyBackground {
  background-color: #425563;
}

.DarkGreyForeground {
  color: #425563;
}

.YellowBackground {
  background-color: #FAE100;
}

.YellowForeground {
  color: #FAE100;
}

.Red {
  color: #8A1538;
}

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

     - Button styles are applied in FX by selecting them from the dropdown list under Styles
       in the element properties.
    - For 'ButtonPrimary' you only need to select 'ButtonPrimary' from the list (not ButtonPrimary1, ButtonPrimary2, etc.)
========================================================================== */


/* Primary Button */
/* The Primary Button style should be used for all main buttons, such as 'submit' 
  and 'next' throughout the form. These are buttons which are essential to a user's journey. */
.ButtonPrimary {
  background-color: #007f3b;
  color: #ffffff;
  border: none;
  /* border-radius provides slightly rounded corners */
  border-radius: 4px;
  /* box-shadow provides a dark line at the bottom of the button */
  box-shadow: 0 4px 0 #00401e;
  /* no outline ensures there is not a blue outline on the button */
  outline: none !important;
  /* padding sets the size of the button relative to the text */
  padding: 10px 16px 8px 16px;
  font-size: 19px;
  width: auto;
  font-weight: bold;
}

/* changes the style when a user hovers over a button */
.ButtonPrimary:hover {
  background-color: #00662f;
  color: #ffffff;
  border: none;
}

/* changes the style when a user is clicking on a button */
.ButtonPrimary:active {
  background-color: #00401e !important;
  box-shadow: none;
  color: #ffffff !important;
  border: none;
  /* transform moves the button down by 4 pixels as the user clicks it */
  transform: translateY(4px);
}

/* changes the style when the focus is on the button */
.ButtonPrimary:focus {
  background-color: #ffeb3b;
  color: #212b32;
}

/* changes the style when a user has clicked on a button */
.ButtonPrimary:focus:not(:active):not(:hover) {
  background-color: #ffeb3b !important;
  box-shadow: 0 4px 0 #212b32;
  color: #212b32 !important;
  border: none;
}

/* Secondary Button */
/* The Secondary Button should be used sparingly, for buttons that are not essential 
  to a user's journey throughout the form, e.g. 'previous' buttons. */

.ButtonSecondary {
  background-color: #4c6272 !important;
  box-shadow: 0 4px 0 #263139;
  color: #ffffff !important;
  padding: 10px 16px 8px 16px;
  font-size: 19px;
  width: auto;
  border: none;
  outline: none !important;
  font-weight: bold;
}

.ButtonSecondary:hover {
  background-color: #384853 !important;
  color: white;
  border: none;
}

.ButtonSecondary:active {
  background-color: #263139;
  box-shadow: none;
  color: #ffffff !important;
  border: none;
  transform: translateY(4px);
}

.ButtonSecondary:focus {
  background-color: #ffeb3b;
  color: #212b32;
}

.ButtonSecondary:focus:not(:active):not(:hover) {
  background-color: #ffeb3b !important;
  box-shadow: 0 4px 0 #212b32;
  color: #212b32 !important;
  border: none;
}

/* Inverse Button */
/* The Inverse Button should be used sparingly and on non-white backgrounds. It could be 
  used for buttons which take the user away from the form for more information. */

.ButtonInverse {
  background-color: #ffffff !important;
  box-shadow: 0 4px 0 #212b32;
  color: #212b32 !important;
  padding: 10px 16px 8px 16px;
  font-size: 19px;
  width: auto;
  border: none;
  outline: none !important;
  font-weight: bold;
}

.ButtonInverse:hover {
  background-color: #f2f2f2 !important;
  color: #212b32;
  border: none;
}

.ButtonInverse:active {
  background: #212b32 !important;
  box-shadow: none;
  color: #ffffff !important;
  border: none;
  transform: translateY(4px);
}

.ButtonInverse:focus {
  background-color: #ffeb3b;
  color: #212b32;
}

.ButtonInverse:focus:not(:active):not(:hover) {
  background-color: #ffeb3b !important;
  box-shadow: 0 4px 0 #212b32;
  color: #212b32 !important;
  border: none;
}

/* Link Button */
/* The Link Button is a button that has been styled to look like a URL link.
     This is done so that a link can have added functionality, as it is possible to
     add Javascript to a button. */
.ButtonURLLink {
  border: none;
  outline: none !important;
  background-color: #ffffff !important;
  font-size: 19px;
}

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

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

.ButtonURLLink: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 */
.ButtonURLLinkLabel {
  color: #005eb8;
  text-decoration: underline;
}

.ButtonURLLinkLabel:hover {
  color: #7C2855;
  text-decoration: none;
}

.ButtonURLLinkLabel:active {
  background-color: #ffeb3b !important;
  color: #212b32 !important;
  border: none;
  box-shadow: 0 -2px #ffeb3b, 0 4px #212b32 !important;
  text-decoration: none;
}

.ButtonURLLinkLabel:focus {
  background-color: #ffeb3b !important;
  color: #212b32 !important;
  border: none;
  box-shadow: 0 -2px #ffeb3b, 0 4px #212b32 !important;
  text-decoration: none;
}

.ButtonURLLinkLabel:focus:not(:active):not(:hover) {
  background-color: #ffeb3b !important;
  color: #212b32 !important;
  border: none;
  box-shadow: 0 -2px #ffeb3b, 0 4px #212b32 !important;
  text-decoration: none;
}


/* ==========================================================================
      ELEMENTS: SEPERATOR

      - Apply these styles in FX by selecting them from the dropdown list under Styles
       in the separator properties as desired.
========================================================================== */

/* makes the separator invisible */
.SeperatorInvisible {
  opacity: 0;
}

.SeparatorBlue {
  height: 15px;
  background-color: #005eb8;
  border: none;
}

.SeparatorGrey {
  border-color: #E8EDEE;

}

/* ==========================================================================
      ELEMENTS: SLIDER

      - applied automatically (simply import stylesheet and press 'refresh'). 
      If you do not wish for these stylese to be applied, either comment them out or remove them from the stylesheet.
========================================================================== */


/* slider circle */
.rzslider .rz-pointer {
  background-color: #005eb8;
}

/* centre of circle while being clicked */
.rzslider .rz-pointer.rz-active:after {
  background-color: #ffffff;
}

/* horizontal bar */
.rzslider .rz-bar {
  background-color: #E8EDEE;
}

/* unselected dots along the bar */
.rzslider .rz-tick {
  background: #E8EDEE;
}

/* slider number font size */
.rz-tick-value {
  font-size: 16px;
}

/* ==========================================================================
      ELEMENTS: PROGRESS BAR

      - applied automatically (simply import stylesheet and press 'refresh'). 
      If you do not wish for these stylese to be applied, either comment them out or remove them from the stylesheet.
 ========================================================================== */

/* NHS colour & hide percentage */
.progress-bar {
  background-color: #005eb8;
  /* change the colour below to white if you would prefer to view the percentage number on the progress bar */
  color: #005eb8;
}

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

/* Changes the colour of the input box outlines - now unused */
/* .form-control:focus {
      border-color: #005eb8 !important;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 94, 184, .6);
    } */


/* Changes the colour of the input box outlines. This is the NHS-Default (yellow outline) - applied automatically */
.form-control:focus {
  border: 2px solid #212b32;
  box-shadow: inset 0 0 0 2px;
  outline: 4px solid #ffeb3b;
  outline-offset: 0
}


/* Align text - apply by selecting it from the dropdown list 
    under Styles in the desired element properties */
.zzcustom-TextAlignLeft {
  text-align: left;
}

.zzcustom-TextAlignCentre {
  text-align: center;
}

.zzcustom-TextAlignRight {
  text-align: right;
}

.zzcustom-TextAlignJustify {
  text-align: justify;
}


/* Vertical align - apply by selecting it from the dropdown list 
    under Styles in the desired element properties */
.zzcustom-VerticalAlignBaseline {
  vertical-align: baseline;
}

.zzcustom-VerticalAlignTextTop {
  vertical-align: text-top;
}

.zzcustom-VerticalAlignTextBottom {
  vertical-align: text-bottom;
}

.zzcustom-VerticalAlignSubscript {
  vertical-align: sub;
}

.zzcustom-VerticalAlignSuperscript {
  vertical-align: super;
}

.zzcustom-VerticalAlignCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Text transform - apply by selecting it from the dropdown list 
    under Styles in the desired element properties */
.zzcustom-TextTransformUppercase {
  text-transform: uppercase;
}

.zzcustom-TextTransformLowercase {
  text-transform: lowercase;
}

.zzcustom-TextTransformCapitalize {
  text-transform: capitalize;
}


/* Display - apply by selecting it from the dropdown list 
    under Styles in the desired element properties */
.zzcustom-DisplayBlock {
  display: block;
}

.zzcustom-DisplayInline {
  display: inline;
}

.zzcustom-DisplayNone {
  display: none;
}

.zzcustom-DisplayHidden {
  visibility: hidden;
}


/* Align element - apply by selecting it from the dropdown list 
    under Styles in the desired element properties */
.zzcustom-AlignElementLeft {
  float: left;
}

.zzcustom-AlignElementRight {
  float: right;
}

.zzcustom-AlignElementCenter {
  margin: auto;
}

.zzcustom-AlignElementImageCenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.zzcustom-AlignElementImageResponsive {
  max-width: 100%;
  height: auto;
}


/* Resets - apply by selecting it from the dropdown list 
    under Styles in the desired element properties */

.zzcustom-MarginNone {
  margin: 0;
}

.zzcustom-MarginLeftNone {
  margin-left: 0;
}

.zzcustom-MarginRightNone {
  margin-right: 0;
}

.zzcustom-MarginTopNone {
  margin-top: 0;
}

.zzcustom-MarginBottomNone {
  margin-bottom: 0;
}

.zzcustom-PaddingNone {
  padding: 0;
}

.zzcustom-PaddingLeftNone {
  padding-left: 0;
}

.zzcustom-PaddingRightNone {
  padding-right: 0;
}

.zzcustom-PaddingTopNone {
  padding-top: 0;
}

.zzcustom-PaddingBottomNone {
  padding-bottom: 0;
}

/* The following should be applied to the 'label' style of the back link button in properties */
.zzcustom-NHSBackLinkLabel {
  color: #005eb8;
  cursor: pointer;
  text-decoration: none;
}

.zzcustom-NHSBackLinkLabel:focus {
  background-color: #ffeb3b;
  box-shadow: 0 -2px #ffeb3b, 0 4px #212b32;
  color: #212b32;
  outline: 4px solid transparent;
  text-decoration: none;
}

.zzcustom-NHSBackLinkLabel:focus:hover {
  text-decoration: none;
}

.zzcustom-NHSBackLinkLabel:focus:visited {
  color: #212b32;
}

.zzcustom-NHSBackLinkLabel:active {
  color: #002f5c;
}

.zzcustom-NHSBackLinkLabel:visited {
  color: #005eb8;
}

.zzcustom-NHSBackLinkLabel:hover {
  color: #7c2855;
  text-decoration: underline;
}

/* The following will automatically be applied to the header hospital name paragraph block */
.nhsuk-organisation-name {
  font-family: Frutiger W01, Arial, Sans-serif;
  color: #fff;
  display: block;
  text-align: right;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 23px;
  margin-top: -2px;
}

.nhsuk-organisation-descriptor {
  font-family: Frutiger W01, Arial, Sans-serif;
  color: #fff;
  display: block;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
}

/* Removes the margin at the bottom of the header - Auto applied */
header .ndl-table .ndl-row:last-of-type .form-group {
  margin-bottom: 0px;
}

/* Adds padding to top and bottom of header - Auto applied */
header .ndl-table {
  padding: 20px 0;
}

/* Adds padding to top and bottom of footer - Auto applied */
footer .ndl-table {
  padding: 32px 0;
}

/* Adds padding to top and bottom of body - Auto applied */
.ndl-body {
  padding-top: 48px;
  padding-bottom: 48px;
}

/* Increases vertical spacing between elements in the body, making it easier to read - Auto applied */
.ndl-body .form-group{
  margin-bottom: 24px;
}

/* Changes input boxes to be square as per NHS standard - Auto applied */
.form-control {
  border: 2px solid #4c6272;
  border-radius: 0;
}

/* Below added to fix inline checkbox padding/margin to not overlap */
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 0px;
}

.radio-inline, .checkbox-inline {
  padding-left: 40px;
  margin-bottom: 10px;
}

/* Changes radio and checkbox input sizes to be larger so easier to select - Auto applied */
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
  height: 30px;
  width: 30px;
  margin-top: 0;
  cursor: pointer;
  margin-left: -33px;
}

/* Changes the colour of the radio and checkbox outlines when focused. This is the NHS-Default (yellow outline) - applied automatically */
.radio input[type="radio"]:focus, .radio-inline input[type="radio"]:focus, .checkbox input[type="checkbox"]:focus, .checkbox-inline input[type="checkbox"]:focus {
  border: 4px solid #212b32;
  box-shadow: 0 0 0 4px #ffeb3b;
}

/* Adjusts padding due to larger radio and checkbox labels - Auto applied */
.radio label > div, .checkbox label > div {
  padding-left: 20px;
}

/* Makes check boxes in line with radio boxes (looks neater) - Auto applied */
.ndl-check-list > div {
  margin-left: 0 !important;
}

/* Changes the slider colour to NHS blue, larger - Auto applied */
.e-control-wrapper.e-slider-container .e-slider .e-handle {
  background-color: #005eb8;
  border: 1px solid #005eb8;
  border-color: #005eb8;
  height: 20px;
  width: 20px;
}

/* Changes the slider so it is centred now that it is bigger - Auto applied */
.e-control-wrapper.e-slider-container.e-horizontal .e-handle {
  margin-left: -10px;
  top: calc(50% - 10px);
}

/* Changes date picker icon to match field height - Auto applied */
.DatePickerButton_Default {
  font-size: 20px;
}