/* Font MyriadPro */
@font-face {
  font-family: 'MyriadPro';
  src: url('fonts/MyriadPro-Regular.otf') format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MyriadPro';
  src: url('fonts/MyriadPro-It.otf') format("opentype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'MyriadPro';
  src: url('fonts/MyriadPro-SemiBold.otf') format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'MyriadPro';
  src: url('fonts/MyriadPro-Bold.otf') format("opentype");
  font-weight: bold;
  font-style: normal;
}

/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'MyriadPro';
}

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.loginpage {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 120px); /* Adjust based on header/footer height */
}
.nav-logo { 
  color: hsl(235, 100%, 33%);
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.01em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
.nav-friendlyname {
  color: hsl(235, 100%, 33%);
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  text-wrap-mode: nowrap;
  margin: 0px;
}
.nav-logo-footer {
  float:left;
  color: hsl(235, 100%, 33%);
  font-size: 24px;
  font-style: italic;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.01em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
header {   
  background: #FFF;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eaeaea;
}

header .logo img {
  display: flex;
  width: 87px;
  align-items: flex-start;
  gap: 12px;
} 

/* Body without centering */
body {
  margin: 0;
  padding: 0;
  background: url('images/Rabobank.jpg') center/cover no-repeat;
}

/* Center only the container */
.content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Container */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 448px;
  padding: 32px 24px;
  gap: 48px;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 
    0px -1px 2px rgba(37, 38, 39, 0.03),
    0px 2px 1px -2px rgba(37, 38, 39, 0.04),
    0px 5px 5px -2px rgba(37, 38, 39, 0.04),
    0px 10px 10px -2px rgba(37, 38, 39, 0.05),
    0px 20px 20px -2px rgba(37, 38, 39, 0.06),
    0px 40px 40px -2px rgba(37, 38, 39, 0.08);
}

/* Responsive Design */
@media screen and (max-width: 768px) {
  .container {
    width: 90%;
    padding: 20px;
    gap: 30px;
  }
}

@media screen and (max-width: 480px) {
  .welcome, .please {
    font-size: 15px;
  }

  .login-button, .sso-button {
    padding: 8px 16px;
    font-size: 15px;
  }
}

/* Welcome Text */
.welcome {
  align-self: stretch;
  color: #0058FF;
  font-size: 38px;
  font-style: italic;
  font-weight: 400;
  line-height: 120%;
}

/* Please Text */
.please {
  text-align: left;
  color: #202122;
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  padding: 8px 0 48px;
  align-self: stretch;
}

/* Buttons */
.sso-button, .login-button {
  width: 100%;
  height: 48px;
  font-size: 19px;
  font-style: normal;
  font-weight: 700;
  line-height: 22.8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.sso-button {
  background-color: #FB6500;
  color: white;
  border: none;
}

.sso-button:hover {
  background-color: #f77a27;
}

.login-button {
  background-color: transparent;
  color: #000060;
  border: 1.59px solid #000060;
  font-weight: 700;
  margin-top: 20px;
  text-align: center;
}

/* Links and Additional Info */
.another-account {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
  color: #737578;
  margin-top: 20px;
  cursor: pointer;
  font-size: 14px;
font-style: normal;
line-height: 120%; /* 16.8px */
}

.toggle-icon {
  padding-left: 13px;
}

.access, .access-link {
  color: #000FAA;
  font-weight: 700;
}

.access-link {
  font-weight: 500;
}

.access-icon {
  margin-bottom: -4px;
  margin-left: 3px;
}

/* Login Form */
.login-form {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
}

.login-form.show {
  max-height: 500px;
  opacity: 1;
}

.login-form label {
  margin-bottom: 10px;
  color: #333;
  font-weight: bold;
  font-size: 14px;
}

.login-form input {
  background-color: rgba(255, 255, 255, 0);
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid #737578;
  border-radius: 5px;
  width: 100%;
}

/* Remember Me */
.remember-me {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.remember-me input {
  margin-right: 5px;
  margin-top: 7px;
}

/* Info Section */
.info {
  margin-top: 48px;
  text-align: left;
  font-size: 14px;
}

/* Heading Styles */
h1, .welcome {
  font-size: 38px;
  line-height: 120%;
}

h5, .please {
  font-size: 15px;
  line-height: 120%;
}

/* Support Text */
.support-text {
  font-size: 14px;
  line-height: 120%;
}

/* Form Labels and Inputs */
.form-group label {
  font-size: 16px;
  line-height: 18px;
}

.form-control::placeholder {
  font-size: 18px;
  line-height: 24px;
}

.form-group {
  margin-bottom: 4px;
}

/* Remember Me Text */
.remember-me p {
  font-size: 16px;
  line-height: 25.6px;
}

.remember-me input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

footer {
  background-color: #F5F5F5;
  padding: 22px 20px;
  text-align: right;
  border-top: 1px solid var(--Border-Default, #E0E0E1);
  background: var(--Gray-G100, #F5F5F5);
}

footer .footer-content a {
  color: #000FAA;
  text-decoration: underline;
  font-size: 15px;
font-weight: 500;
}