.td-login-container {
  min-height: 700px;
  overflow: hidden;
}

.td-login-container > div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.td-login-main, .td-login-footer {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  transform: none;
}
.td-login-main {
  margin-top: 0;
}
.td-login-footer {
  margin-top: 20px;
}
.td-login-error-text {
  display: none;
  margin-top: 9px;
  color: red;
  font-size: 12px;
  height: inherit;
}
.td-login-error-text i{
  font-size: 16px;
}
.td-login-forgot-pwd {
  margin-top:7px;
  text-transform: capitalize;
}

.list-inline {
  margin-bottom: 7px;
}

.copyright .ec-buildnr{
  color: #000;
}

.td-login-secure-link i{
  font-size: 14px;
  color: #FF9902;
}
.td-login-secure-link {
  font-size: 12px;
  color: #FF9902;
}
a {
    color: #03A9F4;
}

input.td-login-error-line {
  border-bottom: 1px solid red !important;
}

div.td-login-links ul li {
  padding: 2px 0;
}

.banner {
  margin-top: 11px;
  margin-left: -30px;
}
.banner-img{
  bottom: 0px;
  border: 3px solid #FFF;
  width: 420px;
  height: 100px;
}

.td-login-btn {
  text-transform: uppercase;
}

.td-login-logo {
  background: url('../img/content/TMA_loginpage_logo.svg') no-repeat top center;
}

.mapp-logo-container {
  height: 150px;
  text-align: center;
}

.mapp-login-logo {
  background: url('https://web.kivii.nl/uploads/logo_login.png') no-repeat top center;
  width: 100%;
  height: 70px;
}

.mapp-logo-msg {
  font-size: 15px;
  letter-spacing: 0.025em;
  color: #1A5F96;
}

.td-login-mapp {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  overflow: auto;
}

/* ==== Telefoon en tablet ===========================================================
   login_ath.min.css (het Teradata-vendorbestand; niet aanpassen) geeft de kaart een
   vaste 420px en de velden en knop 360px. Onder 420px schermbreedte liep de kaart
   daardoor rechts het beeld uit, en `overflow:hidden` hierboven sneed velden en knop
   af tegen de schermrand. Dit bestand laadt NA het vendorbestand, dus bij gelijke
   specificiteit wint het hier - geen !important nodig.
   Vanaf 768px staat de kaart precies waar hij stond: 420px breed, 15% van rechts,
   30px binnenruimte. De kivii-ui.css-tokens bestaan op deze schermen niet (die
   bibliotheek laadt alleen in de beheeromgeving), vandaar de letterlijke maten.
   De vendorklassen krijgen elk een kv-auth-haakje in de markup van de vijf
   schermen (KIVII-UI.md par. 1): zo raken deze regels alleen wat wij bouwden. */
.td-login-container.kv-auth-card {
  width: 100%;
  max-width: 420px;
  margin: 0 0 0 auto;
  padding: 0 24px;
}

@media (min-width: 768px) {
  .td-login-container.kv-auth-card {
    margin-right: 15%;
    padding: 0 30px;
  }
}

/* Tot 480px geen foto (includes/background.php) en dus ook geen smalle kaart: bij
   421-479px bleef er links een reepje foto van een paar pixels over naast de kaart
   van 420px. Vanaf 480px is de foto een strook van minstens 60px. */
@media (max-width: 479px) {
  .td-login-container.kv-auth-card {
    max-width: none;
  }
}

/* De velden van inloggen en wachtwoord vergeten: vendor .group input is 360px vast.
   input + klasse weegt even zwaar als die regel, en dit bestand laadt erna. */
input.kv-auth-input {
  width: 100%;
}

/* "Wachtwoord vergeten?" en "Ga terug naar login" waren tikdoelen van 140x15px. De
   binnenruimte maakt het tikvlak groter; de negatieve marge ernaast houdt de regel
   even hoog, zodat er op de desktop niets verschuift. */
.kv-auth-link {
  display: inline-block;
  padding: 12px 8px;
  margin: -12px -8px;
}

/* 2FA-scherm: het vinkje "blijf aangemeld" is 13x13px; het label is nu aan het
   vinkje gekoppeld. Inline in plaats van Bootstraps inline-block: verticale
   binnenruimte op een inline element vergroot het tikvlak zonder de regelhoogte
   te veranderen, en op een smal scherm loopt de tekst door naast het vinkje in
   plaats van als blok eronder te vallen. */
.kv-auth-check {
  display: inline;
  padding: 10px 0;
}

/* "AUTHENTICATIECODE" is een woord van 17 hoofdletters op 24px (head.php): onder
   360px steekt het door de binnenrand van het kader. */
@media (max-width: 359px) {
  .kv-auth-title {
    font-size: 20px;
  }
}

/* "Ga terug naar login" (2FA). Stond als inline float:right in de markup; hier
   staat hij nu, zodat de telefoonregel hieronder hem kan losmaken. */
.kv-auth-back {
  float: right;
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
}

/* Deze schermen laden Bootstrap 5.3 (assets_helper.php, groep admin-auth), en die
   kent .btn-block niet meer: de bevestigknop werd een klein knopje naast de
   teruglink. Op de telefoon weer schermbreed, met de teruglink eronder als eigen
   regel. Vanaf 768px blijft het zoals het was. */
@media (max-width: 767px) {
  .kv-auth-submit {
    display: block;
    width: 100%;
  }

  .kv-auth-back {
    float: none;
    display: block;
    margin: 4px 0 -12px;
    text-align: center;
  }
}