/* Basis en layout van het aanmeldscherm: border-box voor alles, de
   tekstinstellingen, en het gecentreerde venster met zijn formulierregels. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: url('../images/login/background.png');
}

body {
    font-family: Verdana, Geneva, sans-serif;
    line-height: 1;
    background-color: #f2f2f2;
}

img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

/* De gecentreerde kolom met het aanmeldvenster. De maximumbreedte houdt het
   venster op een leesbare maat op een breed scherm; position: relative is het
   ankerpunt voor het slotje, dat rechtsboven op het kader hangt. */
.tmslogin {
    position: relative;
    width: 50%;
    max-width: 500px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

/* Een formulierregel: label links, invoerveld rechts */
.tmsveld {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.tmsveldlabel {
    flex: 0 0 25%;
    max-width: 25%;
    padding-right: 15px;
    text-align: left;
}

.tmsveldinvoer {
    flex: 1 1 0;
    min-width: 0;
}

@media only screen and (max-width: 767px) {

    .tmslogin {
        width: 83.33333%;
    }

    .tmsveldlabel,
    .tmsveldinvoer {
        flex: 1 1 100%;
        max-width: 100%;
        padding-right: 0;
        text-align: left;
    }
}

.loginformcontainer {
    background-color: #35353A;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin: 10px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
    border-color: #535353 #C0C0C0 #C0C0C0;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-image: none;
    border-style: solid;
    border-width: 2px 1px 1px;
}

.loginformheader,
.loginformfooter {
    background-image: url("../images/login/hr.png");
    background-position: left bottom;
    background-repeat: repeat-x;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 18px;
    margin: 0;
    padding: 0 8px 8px;
    position: relative;
}

.loginformheader {
    padding-bottom: 20px;
}

.loginformfooter {
    height: 75px;
    margin-top: 15px;
}

.loginformcontent {
    background: url('../images/login/background_loginbox.png');
    color: white;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -webkit-border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -webkit-border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-right-radius: 6px;
}

/* .tmsinvoer is dezelfde opmaak voor de schermen van "wachtwoord vergeten", die
   naast het loginscherm staan maar andere veldnamen hebben. Hun knop draagt
   gewoon #btnLogin, zodat hij gegarandeerd gelijk blijft. */
#txtUsername,
#txtPassword,
#txtCode,
.tmsinvoer {
    background-color: #FFFFFF;
    border: 1px solid #323232;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) inset;
    height: 37px;
    padding: 8px 8px 8px 32px;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
}

/* Ruimte tussen twee velden, niet onder het laatste: zo staat de knop even ver
   van het laatste veld als op het loginscherm. */
#txtUsername,
.tmsveld:has(+ .tmsveld) .tmsinvoer {
    margin-bottom: 15px;
}

/* Uitleg en links in het venster: links uitgelijnd en met gewone regelafstand,
   want de body staat op line-height 1 en .whitecolor op 37px. */
.loginformtekst {
    color: #FFFFFF;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    margin: 0 0 15px;
}

/* Een uitleg net onder een veld krijgt dezelfde ruimte als tussen twee velden. */
.tmsveld + .loginformtekst {
    margin-top: 15px;
}

.loginformlinks {
    clear: both;
    font-size: 13px;
    text-align: right;
    margin: 0 0 15px;
}

.loginformlinks a {
    color: #FFFFFF;
}

.veldfout {
    color: #FFCBCA;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    margin: -10px 0 15px;
}

.loginformlock {
    background-color: #35353A;
    background-image: url("../images/login/lock_circle.png");
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 20px 20px 20px 20px;
    color: #FFFFFF;
    font-size: 20px;
    height: 40px;
    line-height: 25px;
    position: absolute;
    right: 17px;
    text-align: center;
    margin-top: -25px;
    width: 40px;
    padding-top: 4px;
}

#btnLogin {
    width: 115px;
    height: 40px;
    float: right;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    background-color: #6da234;
    background-image: linear-gradient(to bottom, #7cbd41 0%, #6da234 100%);
    border: 1px solid #4f7823 !important;
    color: #ffffff !important;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

#btnLogin:hover {
    background-color: #7cbd41;
    background-image: linear-gradient(to bottom, #86cd46 0%, #7cbd41 100%);
}

.whitecolor {
    color: #FFFFFF;
    font-size: 0.875em;
    line-height: 37px;
}

div.alert-box a.close {
    color: white;
}

.error {
    padding: 15px;
    background-color: #FFCBCA;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    color: #9B4449;
    border: solid 2px;
    border-color: #EB979B;

    border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -webkit-border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -webkit-border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-right-radius: 6px;
}

/* Het kruisje staat absoluut en verticaal gecentreerd, zodat het in het midden
   blijft als de melding over meer dan één regel loopt (zoals met de link naar
   "Password reset?"). De ruimte rechts houdt de tekst er weg van. */
.error {
    position: relative;
    padding-left: 35px;
    padding-right: 35px;
}

.error .close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9B4449;
    font-size: 18px;
    line-height: 1;
}

.success {
    padding: 15px;
    background-color: #cbffca;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    color: #3b7d54;
    border: solid 2px;
    border-color: #8ddd91;

    border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -webkit-border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -webkit-border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-right-radius: 6px;
}

.success a {
    color: #3b7d54;
}

button,
.button {
    padding: 0px;
}