/* ==========================================================================
   FJHX Bank — Login screens (Barclays / Expert Sans look & feel)
   Used by: login.php, RemoteLoginRedirect.php
   Layout: two-panel card — navy brand panel + white sign-in form.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts fallback (the Expert Sans faces are declared in expert-theme.css,
   which is linked after this file).
   -------------------------------------------------------------------------- */
html body {
  background: #eef3f6;
  background: linear-gradient(180deg, #eef3f6 0%, #e2ebf0 100%);
  color: #333333;
  font-family: "Expert Sans Regular", Verdana, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

* { margin: 0px; }

a { font-weight: normal; }
a:link, a:visited { color: #0076b6; text-decoration: none; }
a:hover { color: #00395d; text-decoration: underline; }

hr, .hrule {
  color: #e5ebee;
  background-color: #e5ebee;
  height: 1px;
  font-size: 1px !important;
  border: 0px none transparent;
  margin: 16px 0;
}
.hrule hr { display: none; }

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.mainContainer,
#marketingContainer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: auto;
  max-width: 980px;
  margin: 0 auto;
  padding: 56px 20px;
  text-align: left;
}
.mainContainerWithMarketing { padding-top: 20px; }

/* NOTE: the login markup omits one closing tag, so the browser nests
   #mainContainerRight *inside* #mainContainerLeftWrapper. Using
   display:contents on these wrappers lets the two panels sit in a single
   flex row either way, so the layout is robust to that quirk. */
#mainContainerRightWrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  background: #ffffff;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0, 57, 93, 0.14);
  float: none;
  position: static;
}
#mainContainerDividerWrapper,
#mainContainerLeftWrapper { display: contents; }

/* Left brand panel */
#mainContainerLeft {
  flex: 0 0 38%;
  max-width: 38%;
  background: #00395d;
  background: linear-gradient(160deg, #00395d 0%, #005b8d 100%);
  border: 0;
  color: #ffffff;
  overflow: hidden;
  position: static;
  left: 0;
  width: auto;
}
#mainContainerLeftContent { margin: 0; padding: 44px 34px; }

#mainContainerLeftContentImage {
  height: auto;
  text-align: left;
  margin-bottom: 30px;
}
.mainContainerLeftBrandImage {
  max-height: 62px;
  max-width: 210px;
  border: 0;
  filter: brightness(0) invert(1);
}
#mainContainerLeftContentMessageItems p {
  color: #d8e6ef;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 22px;
}
#mainContainerLeftContentMessageItems b { color: #ffffff; font-family: "Expert Sans Bold", Verdana, sans-serif; }
#mainContainerLeftContentMessageItems a { color: #ffffff; text-decoration: underline; }

#mainContainerDivider { display: none; }

/* Right form panel */
#mainContainerRight {
  flex: 1 1 auto;
  min-width: 0;
  background: #ffffff;
  overflow: hidden;
  position: static;
  left: 0;
  width: auto;
}
#mainContainerRightContent { margin: 0; padding: 44px 40px; }

/* --------------------------------------------------------------------------
   Header / messages
   -------------------------------------------------------------------------- */
#mainContainerRightContentHeader,
.mainContainerRightContentHeader { margin-bottom: 24px; }

.mainContainerRightContentHeaderTitle {
  font-family: "Expert Sans Light", Verdana, sans-serif;
  font-size: 28px;
  font-weight: 300;
  color: #00395d;
  margin-bottom: 10px;
  line-height: 1.25;
}
.productName,
.productName .productName {
  color: #0076b6;
  display: block;
  font-size: 22px;
}
#mainContainerRightContentHeader hr { margin-top: 16px; }

.ErrorMessage { font-size: 14px; font-weight: 400; color: #b00020; margin-bottom: 18px; }
.ErrorMessageItem { font-size: 14px; color: #b00020 !important; }
.InformationMessage { font-size: 15px; font-weight: 700; color: #00395d; margin-bottom: 18px; }
.InformationMessage p { margin-bottom: 18px; }
.InstructionMessage { font-size: 14px; color: #666666; margin-bottom: 18px; }
.InstructionMessage p { margin-bottom: 18px; }
.mainContainerRightContentHeaderInstructionMessage { font-size: 14px; color: #666666; margin-bottom: 8px; }
div.mainContainerRightContentHeaderInstructionMessage p { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */
#mainContainerRightContentInputPanelItems,
.mainContainerRightContentInputPanelItems { margin-bottom: 22px; }
.mainContainerRightContentInputPanelItem { margin-top: 0; margin-bottom: 22px; }
.mainContainerRightContentInputPanelItem p[style*="red"] { font-size: 14px; margin-bottom: 14px; }

.inputPanelItemInputLine { font-size: 15px; font-weight: normal; }
.inputPanelItemInputLineMarginS { margin-bottom: 18px; }

.inputPanelItemInputLabel {
  display: block;
  width: auto;
  color: #00395d;
  font-family: "Expert Sans Bold", Verdana, sans-serif;
  font-weight: 700;
  font-size: 13px !important;
  letter-spacing: 0.2px;
  white-space: normal;
  vertical-align: middle;
  margin-bottom: 6px;
}

/* The class sits on both a wrapper span and the real <input>, so the box
   styling is scoped to inputs only. */
.inputPanelItemInputData { display: block; width: 100%; }
input.inputPanelItemInputData {
  height: 46px;
  line-height: 46px;
  color: #333333;
  font-family: "Expert Sans Regular", Verdana, sans-serif;
  font-size: 15px;
  padding: 0 14px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #ffffff;
  box-sizing: border-box;
  vertical-align: middle;
}
input.inputPanelItemInputData:focus {
  outline: none;
  border-color: #0076b6;
  box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.15);
}
/* The markup uses width175px on the inputs — let them fill the column. */
.width175px { width: 100% !important; }
input.width175px { height: 46px !important; }

.fieldNote { color: #666666; font-style: italic; font-size: 13px; }
.workspaceSubHeader { font-size: 14px; font-weight: 700; color: #0076b6; }

/* Label width helpers used by the form markup */
.login-LabelWidth { width: auto; }
.changePassword-LabelWidth, .changePasswordForgot-LabelWidth,
.passwordEntry-LabelWidth, .passCodeEntry-LabelWidth,
.tokenEntry-LabelWidth, .tokenNextCode-LabelWidth,
.tokenPinEntry-LabelWidth { width: auto; }
.changePassword-FieldNote, .changePasswordForgot-FieldNote,
.passwordEntry-FieldNoteMargin, .passCodeEntry-FieldNoteMargin,
.tokenNextCode-FieldNoteMargin, .tokenPinEntry-FieldNoteMargin { margin-left: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
#buttonPanel { margin-top: 8px; }
#buttonPanel .inputPanelItemInputLabel { display: none; }

.next {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: #0076b6;
  border: 1px solid #0076b6;
  border-radius: 4px;
  color: #ffffff;
  font-family: "Expert Sans Bold", Verdana, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.next:hover { background: #00395d; border-color: #00395d; }
.next:focus { outline: none; box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.3); }

/* --------------------------------------------------------------------------
   Footer note
   -------------------------------------------------------------------------- */
.mainContainerRightContentFooterInstructionMessageItems {
  font-size: 13px;
  color: #666666;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e5ebee;
}
.mainContainerRightContentFooterPageNoteMessage { color: #666666; margin-bottom: 18px; overflow: auto; }
div.mainContainerRightContentFooterPageNoteMessage p { margin-bottom: 18px; }
.mainContainerRightContentFooterActionItems { font-size: 12px; margin-bottom: 22px; }

/* --------------------------------------------------------------------------
   Working / spinner overlay
   -------------------------------------------------------------------------- */
#workingPanelCtrl,
#workingPanel { display: none; position: fixed; }
.workingImage { height: 24px; width: 24px; border: 0; padding-right: 10px; }
.workingText { font-size: 12px; color: #666666; }

/* External / remote-frame variants */
#externalLogo { border: 0; display: block; height: 130px; max-width: 288px; overflow: hidden; }
#externalMessageItems { height: 350px; width: 288px; max-width: 288px; border: 0; overflow: visible; }
#externalFooterContainer { background: #fff; margin: 0 auto; width: 100%; border-top: 1px solid #e5ebee; }
#externalFooter { overflow: hidden; border: 0; height: 80px; width: 100%; }
body.remoteFrame { background: none; }
.mainContainerRightContentHeaderTitle.remoteFrame { margin-bottom: 0; }
.mainContainerRightContentInputPanelItem.remoteFrame { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Utility classes (referenced by the markup)
   -------------------------------------------------------------------------- */
.center { text-align: center; }
.nobr { white-space: nowrap; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.v-alignMiddle { vertical-align: middle; }
.nodisplay { display: none; }
.roundCorner5px { border-radius: 5px; }
.roundCorner5pxE { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.roundCorner5pxW { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.margin10pxN { margin-top: 10px; }
.margin10pxW { margin-right: 10px; }
.margin0pxS { margin-bottom: 0; }
.margin8pxS { margin-bottom: 8px; }
.margin10pxS { margin-bottom: 10px; }
.margin12pxS { margin-bottom: 12px; }
.margin20pxS { margin-bottom: 20px; }
.margin22pxS { margin-bottom: 22px; }
.margin100pxE { margin-left: 100px; }
.margin125pxE { margin-left: 125px; }
.margin150pxE { margin-left: 150px; }
.margin175pxE { margin-left: 175px; }
.padding0pxAll { padding: 0; }
.padding45S { padding-bottom: 45px; }
.padding8E { padding-right: 8px; }
.width30px { width: 30px; }
.width50px { width: 50px; }
.width75px { width: 75px; }
.width100px { width: 100px; }
.width125px { width: 125px; }
.width150px { width: 150px; }
.width175px { width: 175px; }
.width200px { width: 200px; }
.width225px { width: 225px; }
.width250px { width: 250px; }
.border0px { border: 0; }
ul { list-style: disc none outside; padding-left: 14px; }
input[type=radio], input[type=checkbox] { padding: 0; width: 15px; height: 15px; }
input[type=submit] { -webkit-appearance: none; }

/* Enrollment / validation label helpers */
.BstToolValidation-LabelWidth, .CebToolValidation-LabelWidth,
.OlbToolValidation-LabelWidth { width: 150px; }
.enrollment-LabelWidth { width: 150px; }
.enrollment-PhoneNumberExtension-LabelWidth { margin-left: 5px; width: 80px; }
.enrollment-main-input-width { width: 250px; }
.enrollment-Country-input-width { width: 200px; }
.enrollment-PhoneNumberExtension-InputWidth { width: 75px; }
.enrollment-fieldnote { margin-left: 150px; }
.enrollCreatePassword-LabelWidth { width: 125px; }
.enrollmentSetup-LabelWidth { width: 130px; }
.toolRegistration-label-AdminToolMarginW { margin-left: 5px; }
.verification-email-address { word-wrap: break-word; max-width: 292px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .mainContainer, #marketingContainer { padding: 24px 14px; }
  #mainContainerRightWrapper { flex-direction: column; }
  #mainContainerLeft { flex: 0 0 auto; max-width: 100%; }
  #mainContainerLeftContent { padding: 30px 26px; }
  #mainContainerRightContent { padding: 30px 26px; }
  .mainContainerRightContentHeaderTitle { font-size: 24px; }
}