/*Außenabstand auf Null setzen und Hintergrund mit Bild abdecken*/
body {
    margin: 0px;
    background: url('/SIS/img/Backgound/Login_Koenigsresidenz0135.JPG') center no-repeat fixed white;
    background-size: cover;
}


/*vertikal zentrierter Kontokasten*/
.accountbox {
    position: absolute;
    top: 50%;           /*auf halbe Seitenhöhe setzen*/
    right: auto;
    bottom: auto;
    left: auto;
    display: block;
    min-width: 320px;   /* == 240pt*/
    max-width: 480px;   /* == 360pt*/
    margin: -240px 0px; /* == 2*(0, -max-width/2) (je oben und unten Abstand von halber Quadratbreite/-höhe wegnehmen)*/
    transform: translate(0px, calc(240px - 50%));   /* == (0, max-width/2 - 50%) (größere Höhe kompensieren)*/
}

.content {
    position: relative;
    min-height: 432px;  /* == 480px - 48px == max-width (.accountbox) - 2*padding == 324pt*/
    /*max-height: 636px;*/  /*684px == 426pt - 2*padding == 568px - 2*padding*/
    margin: 0px auto;
    padding: 24px;      /* == 18pt*/
    border-radius: 24px;/* == padding*/
    border: none;
    box-shadow: 20px 28px 40px HSL(215, 0%, 42%);   /*shadowGray*/
    opacity: 0.84;
    background-color: white;
    color: black;
    text-align: left;
    font-family: 'Arial', 'Global Sans Serif', 'Lucida Sans', 'Lucida Sans Unicode', 'sans-serif';
    font-size: 12pt;
}


/*Bilder*/
.logo {
    display: block;
    width: 123.2pt;
    height: 45.25pt;
    margin: 0pt auto 12pt;
}
/*PORTAL mit Mandanten Logo braucht mehr Freiheitsgrade 11.08.2020 br*/
.logoPortal {
    display: block;
    /*width: 123.2pt;*/
    height: 45.25pt;
    /*margin: 0pt auto 12pt;*/
}
.sysgr {
    width: 9pt;
    height: 9pt;
    margin: 0.5pt 2pt -0.5pt 0pt;
}


/*Eingabeformular*/
    form {
    display: block;
    min-height: 243.5pt;  /* == 324pt - (57pt + 12pt + 12pt) == min-height (.content) - (height + margin-top + margin-bottom) (.logo + p.account)*/
    margin: 0pt;
}

/*Kästen für die Eingabe und die Ergebnisausgabe*/
/*notwendig, da beim IE Flexbox nicht richtig funktioniert und beim IE sowie Edge der Offset sonst falsch berechnet wird!*/
.inputbox,
.resultbox {
    min-height: 209pt; /* == 243pt - (22pt + 12pt) == min-height (form) - (height + margin-bottom) (h1)*/
}


/*Überschriften*/
h1 {
    margin: 0pt auto 12pt;
    color: HSL(215, 50%, 60%);  /*sisBlue*/
    text-align: center;
    font-size: 17pt;
}

h2 {
    line-height: 22px;      /*notwendig, da ‑ die Höhe vergrößert*/
    margin: 0pt auto 10pt;
    text-align: center;
    font-size: 14pt;
}

h3 {
    margin: 8pt auto 2.5pt;
    color: HSL(215, 50%, 60%);  /*sisBlue*/
    /*text-align: center;*/
    font-size: 13pt;
}

label {
    margin: 0pt;
    color: HSL(215, 50%, 60%);  /*sisBlue*/
}


/*Eingabefeld*/
input {
    width: calc(100% - 9pt);    /* == 100% - 2*(padding + border-width)*/
    height: 18pt;
    margin: 0pt 0pt 7pt;
    padding: 0pt 3.75pt;        /* == height/4 - border-width*/
    border-width: 1px;          /* == 0.75pt  (ergibt sich auch für border-width: 1pt!?)*/
    border-radius: 4.5pt;       /* == padding + border-width == height/4*/
    border-style: solid;
    border-color: HSL(215, 50%, 50%);   /*inputBlue*/
    background-color: transparent;
    color: HSL(215, 50%, 50%);          /*inputBlue*/
}

input.password {
    margin-bottom: 5pt;
}

/*Übermittlungsknopf*/
button {
    display: block;
    height: 16pt;
    margin: 14pt auto 0pt;
    border-radius: 9pt;     /* == height/2*/
    border: none;
    background-color: HSL(215, 50%, 60%);   /*sisBlue*/
    color: white;
    font-weight: bold;
}
button:hover {
    background-color: HSL(215, 50%, 80%);   /*hoverBlue*/
    color: black;
    cursor: pointer;
}


/*Mitteilungen*/
p {
    margin: 0pt 0pt 8pt;
    /*font-weight: normal;*/
}

.error {
    color: HSL(0, 50%, 50%);    /*errorRed*/
}

.success {
    color: HSL(113, 50%, 42%);  /*successGreen*/
}

label.error {
    color: HSL(0, 50%, 60%);    /*errorlabelRed*/
}


/*Entwicklungsmodus*/
.debug {
    margin: 17pt 0pt;
    text-align: center;
}

/*Schnelleingabeknopf*/
.debug input {
    width: 24pt;
    margin: -2.5pt 0pt;
    border: none;
    background-color: HSL(215, 0%, 50%);    /*inputGray*/
    color: white;
    font-weight: bold;
}
.debug input:hover {
    background-color: HSL(215, 0%, 80%);    /*hoverGray*/
    color: black;
    cursor: pointer;
}


/*Registrieren-Seite*/
.register .inputbox p {
    margin-bottom: -6pt;
}

.columnsbox p {
    margin-bottom: -12pt;
}

/*Datenschutzerklärung*/
.privacy {
    margin: 4pt 0pt 8pt;
}

.privacy label {
    color: black;
    font-size: 11pt;
    /*font-weight: normal;*/
}

.privacy label.error {
    color: HSL(0, 50%, 60%);    /*errorlabelRed*/
}

/*Checkbox*/
.privacy input {
    width: 10pt;
    height: 10pt;
    margin: auto 0pt;
    color: HSL(215, 0%, 50%);   /*inputGray*/
}

.columnsbox button {
    margin-top: 6pt;
}


/*Kennwort vergessen-Seite*/
.reset .inputbox p {
    margin-bottom: 0pt;
}

.reset button {
    margin-top: 14.5pt;
}


/*Registrieren- und Kennwort vergessen-Seite*/
h2.error,
h2.success {
    margin-bottom: 12pt;
}

p.error,
p.success {
    margin-bottom: 0pt;
}


/*Impressum/Kontakt-Seite*/
.contact .logo {
    width: 200.8pt;
}

.contact table {
    margin: 0pt -1pt;
    font-weight: normal;
}


/*Kennwort ändern-Seite*/
.change .inputbox p {
    margin-bottom: 3pt;
}

.change .inputbox input {
    margin-bottom: 3.25pt;
}


/*Navigation*/
.navigation {
    margin: 12pt auto 0pt;
    padding: 0pt;
    color: black;
    text-align: center;
    font-size: 9pt;
    font-weight: bold !important;
}

/*.navigation.re {
    margin-top: 11.75pt;
}*/


/*Link*/
a {
    color: HSL(215, 0%, 50%);   /*inputGray*/
    text-decoration: none;
}
a:hover {
    color: HSL(215, 50%, 50%);  /*inputBlue*/
    cursor: pointer;
}

a.close:hover {
    color: HSL(30, 100%, 60%); /*sisOrange*/
}


/*auf zu breiter Seite den Kasten horizontal zentrieren und quadrieren*/
@media (min-width: 480px) {  /* >= max-width (.accountbox)*/
    .accountbox {
        left: 50%;      /*auf halbe Seitenbreite setzen*/
        margin: -240px; /* == 2*(-max-width/2, -max-width/2)  (rundherum Abstand von halber Quadratbreite wegnehmen)*/
    }
    /*.accountbox:before {
        content: "";
        display: block;
    }*/
    .content {
        max-height: 432px;  /* == min-height == max-width (.accountbox) - 2*padding*/
    }

    /*auf der Registrieren-Seite die Eingabefelder zweispaltig anordnen*/
    .columnsbox {
        column-count: 2;
        column-gap: 24px;   /* == padding (.content)*/
    }

    /*.columnsbox .error {
        font-size: small;
    }*/

    .columnsbox p {
        margin-bottom: 0pt;
    }
}

/*auf zu niedriger Seite den Kasten an den oberen Rand setzen*/
@media (max-height: 479.9px) { /* < max-width (.accountbox)*/
    .accountbox {
        top: 0%;            /*an oberen Seitenrand setzen*/
        margin-top: 0px;    /*oben Null Abstand nehmen)*/
        margin-bottom: 0px; /*unten Null Abstand nehmen)*/
        transform: translate(0px, 0px); /*größere Höhe nicht kompensieren*/
    }
}

@media (max-width: 375px) {
    .register label.error,
    .privacy label {
        font-size: small;
    }

    .privacy .sysgr {
        width: 7.5pt;
        height: 7.5pt;
    }

    .privacy input {
        width: 8pt;
        height: 8pt;
    }

    .contact table {
        font-size: 11pt;
    }
}

@media (max-width: 375px) and (max-height: 640px) {
    .register h2 {
        line-height: 19px; /*notwendig, da &#8209; die Höhe vergrößert*/
        margin-bottom: 8pt;
    }

    .register p {
        margin-bottom: 6pt;
        /*font-size: small;*/
    }

    .register .sysgr {
        width: 8pt;
        height: 8pt;
    }

    .register label {
        font-size: small;
    }

    .register input {
        margin-bottom: 6pt;
        font-size: small;
    }

    .register .privacy {
        margin: 4pt 0pt;
    }

    .register .privacy input {
        width: 9pt;
        height: 9pt;
    }

    /*.navigation.re {
        margin: 12pt auto 0pt;
    }*/
}

@media (max-width: 359.9px) and (max-height: 640px) {
    /*auf zu kleiner Seite den Kasten an den oberen Rand setzen*/
    .accountbox {
        top: 0%; /*an oberen Seitenrand setzen*/
        margin-top: 0px; /*oben Null Abstand nehmen)*/
        margin-bottom: 0px; /*unten Null Abstand nehmen)*/
        transform: translate(0px, 0px); /*größere Höhe nicht kompensieren*/
    }
}

/*auf breiter Seite mit zweispaltig anordneten Eingabefeldern und einzeiliger Navigation*/
/*unter dem Checkbox-Label keinen Leerraum lassen*/
@media (min-width: 480px) {  /* >= max-width (.accountbox)*/
    .register .privacy {
        margin: -2pt 0pt 0pt;
    }

    .register .privacy label {
        white-space: pre-line;
    }

    .register .privacy input {
        margin: 3.75pt 0pt auto;
    }

    .register .columnsbox .password input {
        margin: 0pt;
    }

    .reset .inputbox p {
        margin-bottom: 10.25pt;
    }

    .navigation {
        display: inline-flex;
        width: 432px;   /* == max-width (.accountbox) - 2*padding (.content)*/
    }

    .navigation.single {
        display: block;
        margin-top: 12.25pt;
    }

    .navi {
        margin: 0pt 3pt 0pt auto;
    }

    .navii {
        margin: 0pt auto 0pt 0pt;
    }
}