/* Font */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap");


/***** CLIENT FORM CUSTOMISATIONS *****/
:root {
  --link-color: #333;
  --link-hover-color: #ced4da;
  --button-primary-color: #fff;
  --button-primary-font-color: #fff;
  --button-secondary-color: #fff;
  --button-secondary-font-color: #333333;
  --header-background-color: #fff;
  --footer-background-color: #333;
  --footer-font-color: #fff;
  --footer-link-color: #fff;
  --footer-link-hover-color: #fff;
  --control-selection-color: #333;
  --control-selection-background-color: #375E7708;
  --progressbar-done-background-color: #fff;
  --progressbar-done-font-color: #333;
  --progressbar-active-background-color: #333;
  --progressbar-active-font-color: #fff;
  --notification-border-color: #333;
  --notification-font-color: #333;
  --notification-heading-font-color: #333;
  --notification-background-color: #375E7708;

  /* Inferred Styles - Only set/override when specifically required for custom branding */
  --progressbar-active-border-color: #333;
  --progressbar-done-border-color: #333;
  --selection-border-color: var(--control-selection-color);
  --button-primary-border-color: #fff;
  --button-primary-hover-color: #fff;
  --button-primary-hover-border-color: #333;
  --button-primary-hover-font-color: #333;
  --button-secondary-border-color: #ced4da;
  --button-secondary-hover-color: var(--button-secondary-color);
  --button-secondary-hover-border-color: var(--button-secondary-border-color);
  --button-secondary-hover-font-color: var(--button-secondary-font-color);
  --font-color: var(--default-font-color);
  --site-background-color: var(--footer-background-color);
  --heading1-font-color: var(--default-font-color);
  --heading2-font-color: var(--default-font-color);
  --heading3-font-color: var(--default-font-color);
  --heading4-font-color: var(--default-font-color);
  --heading5-font-color: var(--default-font-color);
  --heading6-font-color: var(--default-font-color);
  --font-family: "Open Sans", sans-serif !important;

  /* Default Styles - Only set/override if specifically required for custom branding */
  --font-size: 14px;
  --disclaimer-font-size: 11px;
  --form-max-width: 962px;
  --form-responsive-padding: 12px;
  --form-background-color: #fff;
  --form-responsive-padding: 12px;
  --form-responsive-mobile-scaling: 1.75;
  --body-background-color: #ff0000;
  --default-font-color: #333; /* Default #2B2D30 */
  --button-border-radius: 3px;
  --shadedbox-background-color: #fbfbfb;
  --header-height:  calc(90px; + --header-border-bottom-size);
  --header-border-bottom-size: 1px;
  --header-border-color: #333;
  --buttonbox-border-top-size: 0px;
  --buttonbox-border-color: #fff;
  --buttonbox-height: 70px;
  --buttonbox-background-color: #fbfbfb;
  --button-primary-border-color: var(--button-primary-color);
  --footer-border-top-size: 0px;
  --footer-border-top-color: #fff;
  --progressbar-next-background-color: #F7F7F9;
  --progressbar-next-border-color: #e1e1e8;
  --progressbar-next-font-color: var(--default-font-color);
}


/***** PROGRESS BAR *****/
.multiprogressbar {
	max-width: 962px; /* IE FALLBACK */
    max-width: var(--form-max-width);
    margin: auto;
    padding: 0px 12px;
}

.ui-multiprogressbar {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  max-height: 40px;
}

.ui-multiprogressbar-valuetext {
  margin-top: 0.6em !important; /* Adjust to center Progress bar text if using non-standard font/font size. */
}

.ui-widget-header.active {
  background-color: var(--progressbar-active-background-color);
  border-color: var(--progressbar-active-border-color);
  color: var(--progressbar-active-font-color);
}

.todo,
.next {
  background-color: var(--progressbar-next-background-color) !important;
  border-color: var(--progressbar-next-border-color) !important;
  color: var(--progressbar-next-font-color);
}

.done {
  background-color: var(--progressbar-done-background-color);
  border-color: var(--progressbar-done-border-color);
  color: var(--progressbar-done-font-color);
}

/***** IMPORTANT NOTIFICATIONS *****/
.global-notification-message {
    background-color: var(--notification-background-color);
    border-left: 3px solid var(--notification-border-color);
}

.global-message-container .message-content
  {
    color: var(--notification-font-color);
  }
  h2 {
      color: var(--notification-heading-font-color) !important;
  }

/***** FORM GENERAL *****/
/* Global Variables */
:root {
  --light-blue: #333;
  --dark-blue: #333;
}

/* Global Styles */
body,
html {
  font-family: "Open Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400;
  line-height: 1.6;
  background-image: none !important;
  background-color: white;
  color: #333;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 300;
  color: #333;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem !important;
}

.h2 {
  font-size: 1.6875rem !important;
}

.main {
  margin-bottom: 5.25rem;
}

.page {
  padding-top: 5.625rem !important;
}

form {
  background-color: #d9d9d9;
}

#UpdatePanel1 {
  z-index: 2;
  position: relative;
  margin-top: -4.375rem;
}

.header {
  min-height: 90px;
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 0;
  display: table-cell;
  vertical-align: middle;
  border-bottom: 1px solid #333;
}

.headerLogo {
  margin-left: calc((100% - 940px) / 2);
}

.sectiontext {
  line-height: 1.6 !important;
}

.additionaldocuments-document-header {
  width: 250px;
}

.wrap {
  min-height: 0% !important;
  background-color: white;
}

a {
  color: #333;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

a:hover {
  color: var(--link-hover-color);
}

/***** CONTROLS & SELECTORS *****/
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio
  .custom-control-input:disabled:checked
  ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--control-selection-color);
}

.custom-control-label::before,
.custom-control-label::after {
  top: 0.4rem;
}

div.app-type-radiobox:hover, div.trust-type-radiobox:hover, div.channel-type-radiobox:hover {
    background-color: var(--control-selection-background-color);
    border-color: var(--selection-border-color) !important;
}

.app-type-highlight {
    background-color: var(--control-selection-background-color);
    border-color: var(--selection-border-color) !important;
}

/* Button Styles */
input.primaryActionButton,label.primaryActionButton,
a.primaryActionButton {
  display: inline-block;
  padding: 0.5625rem 0.8125rem;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
  cursor: pointer;
  background: none;
  box-shadow: 0px 0px 1px transparent;
  outline: none;
  background-color: #333;
  border-color: #333 !important;
  transition: all 0.25s ease;
  transform: translateZ(0px);
  -webkit-appearance: none;
  -webkit-transition: all 0.25s ease;
  -webkit-transform: translateZ(0);
}

input.actionButton,
a.actionButton {
  display: inline-block;
  border: 1px solid transparent;
  padding: 0.5625rem 0.8125rem;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
  cursor: pointer;
  background: none;
  box-shadow: 0px 0px 1px transparent;
  outline: none;
  transition: all 0.25s ease;
  transform: translateZ(0px);
  -webkit-appearance: none;
  -webkit-transition: all 0.25s ease;
  -webkit-transform: translateZ(0);
}

input.actionButtonDisabled,
a.actionButtonDisabled {
  display: inline-block;
  border: 1px solid transparent;
  padding: 0.5625rem 0.8125rem;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  appearance: none;
  font-size: 1em;
  cursor: pointer;
  background: none;
  box-shadow: 0px 0px 1px transparent;
  outline: none;
  transition: all 0.25s ease;
  transform: translateZ(0px);
  -webkit-appearance: none;
  -webkit-transition: all 0.25s ease;
  -webkit-transform: translateZ(0);
}

.primaryActionButton:hover,
.primaryActionButton:focus,
input[type="file"]:hover,
input[type="file"]:focus {
  border-color: #333 !important;
  color: #333 !important;
  background-color: #fff !important;
}

/* Button Box Styles */
#ctl00_UpdatePanel1 {
  z-index: 2;
  position: relative;
  margin-top: -59px;
}

div.buttonbox {
  border-top-color: #fff;
  background-color: #fff;
  height: 95px;
}

div.buttonAlign,
div.buttonAlignLeft {
  margin-top: 0.1875rem;
}

/***** FORM FOOTER *****/
#VC-footer {
  position: absolute;
  left: 0;
  right: 0;
  background-image: none !important;
  box-shadow: none !important;
  text-align: center;
  border-top: #fff 70px solid;
  margin-top: -70px;
  background-color: #333;
  color: #fff;
  /* box-shadow: 0 -180px 30px 0 rgba(0, 0, 0, 0.45) inset; */
}

.footerLinks a {
  color: #fff; /* IE STANDARD BRANDING */
  color: var(--footer-link-color);
}

.footerLinks a:hover {
  color: #fff; /* IE STANDARD BRANDING */
  color: var(--footer-link-hover-color);
}

.upperFooter {
  padding: 22px 0px !important;
}

.lowerFooter {
  padding: 22px 0px !important;
}

.upperFooter,
.lowerFooter {
  width: 100%;
  max-width: 930px;
  margin: auto;
  text-align: left;
}



/***** REVIEW SCREEN *****/
.masterheadertext {
  color: var(--heading-font-color) !important;
}

.reviewitemsectionlabel {
  color: var(--heading-font-color) !important;
}

.leftmenuContainer .navigationpanel .reviewlist li a {
  color: var(--link-color) !important;
}

.leftmenuContainer .navigationpanel .reviewlist li a:hover {
  color: var(--link-hover-color) !important;
}

.summarytable {
  margin-bottom: 0px; /* Field spacing on review screen. Adjust for custom font. */
}

.summarylabel .formlabels,
.summaryvalue .summaryfields {
  font-size: 12px !important;
}

/***** DECLARATION SCREEN *****/
#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl00_DeclarationPostambleLabel
  > div
  > ul {
  margin-left: 12px !important;
}

#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl01_DeclarationPostambleLabel
  > div
  > ol {
  margin-left: 28px !important;
}

#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl01_DeclarationCheckboxPanel
  label,
#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl02_DeclarationCheckboxPanel
  label,
#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl03_DeclarationCheckboxPanel
  label,
#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl04_DeclarationCheckboxPanel
  label,
#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl05_DeclarationCheckboxPanel
  label,
#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl06_DeclarationCheckboxPanel
  label,
#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl07_DeclarationCheckboxPanel
  label,
#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl08_DeclarationCheckboxPanel
  label,
#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl09_DeclarationCheckboxPanel
  label,
#ctl00_MainContent_DeclarationListControl_DeclarationList_ctl10_DeclarationCheckboxPanel
  label,
  {
  line-height: 26px;
}

#ctl00_MainContent_CompletionPinPanel a {
  color: var(--link-color);
}

#ctl00_MainContent_CompletionPinPanel a:hover {
  color: var(--link-hover-color);
}

/***** FINISH SCREEN *****/
.applicationstatus th { /* Header color in finish table*/
  color: var(--default-font-color) !important;
}

.additionaldocuments-document-header {
  width: 250px;
}

#ctl00_MainContent_DownloadApplicationLinkPanel a {
  color: var(--link-color);
}

#ctl00_MainContent_DownloadApplicationLinkPanel a:hover {
  color: var(--link-hover-color);
}

#ctl00_MainContent_DocIconPanel {
  margin-top: 3px;
}

/** RESPONSIVENESS  **/
@media screen and (max-width: 992px) {  /* Set to max form width*/
  .header {
    background-position: 12px; /* IE FALLBACK */
    background-position: var(--form-responsive-padding);
    padding: 0 12px;
    padding: 0 var(--form-responsive-padding) !important;
  }
}

@media screen and (max-width: 768px) {
  #VC-footer > div.upperFooter > div > ul li {
    display: flex;
    flex-wrap:wrap;
    justify-content: flex-start;
  }

  div.buttonbox {
    height: auto !important;
  }

  #CancelApplicationButton {
    margin-right: 120px !important;
  }
}

@media screen and (max-width: 576px) {
  #CancelApplicationButton {
    padding: 7px 20px !important;
    width: 100%;
  }
}