/**
 * @file      authentication.css
 *
 * @brief
 *
 * @copyright Copyright Dexdyne Ltd. 2018-2023. All Rights Reserved.
 *
 * @author    ???
 */

body
{
    --auth-errors-color:    #d9534f;               /* Very very light pink. */
    --auth-errors-bg:       #fdf7f7;               /* Dark pink. No close official colour. */
}

/*
 * Site login styles.
 */
.noscriptWarning,
.errorsContainer
{
    box-sizing:             border-box;
    background-color:       var(--auth-errors-bg);
    background:             linear-gradient(90deg, var(--auth-errors-color) 0 12px, var(--auth-errors-bg) 10px 100%);
    color:                  var(--auth-errors-color);

    border-width:           0 0 1px 0;
    border-style:           solid;
    border-color:           var(--auth-errors-color);
    font-weight:            bold;
    margin:                 4px -6px 8px 4px;
    padding:                12px 24px;
}

/* Increased specificity to override form styling from dash-base.csst
 * Many examples follow.
 */
.errorsContainer .errorText
{
    margin:                 0;
    color:                  var(--auth-errors-color);
}

#loginFormId .fsHeading
{
    width:                  100%;
}

#loginFormId .dashLoginContainer
{
    width:                  100%;
    display:                flex;
    justify-content:        center;
}

#loginFormId .dashLoginContent input,
#loginFormId .dashLoginContent label
{
    display:                inline;
    float:                  none;
}

#loginFormId .dashLoginContent label
{
    clear:                  none;
    text-align:             start;
    width:                  100%;
}

#loginFormId .dashLoginContent div
{
    float:                  none;
    margin:                 0;
}

#loginFormId .dashLoginContent
{
    width:                  520px;
    margin:                 12px 0 12px 0;

    display:                flex;
    flex-direction:         column;
    justify-content:        center;
    align-items:            flex-start;
}

#loginFormId .loginInputRow
{
    width:                  100%;
    margin:                 0;

    display:                flex;
    flex-direction:         row;
    align-items:            center;
}

#loginFormId .loginInputRow div
{
    display:                flex;
    align-items:            center;
}

#loginFormId .loginInputRow div:nth-of-type(1)
{
    min-width:              180px;
    min-height:             32px;
}

#loginFormId .loginInputRow input[type="submit"]
{
    min-width:              80px;
    padding-left:           6px;
    padding-right:          6px;

    margin:                 12px 0 24px 0;
}

#loginFormId .loginInputRow a
{
    margin:                 4px;
}

#keepUserLoggedIn
{
    margin-top:            4px !important;
}

#keepUserLoggedInTimeoutMsg
{
    display:                block;
    margin:                 4px;
    color:                  Gray;
}

#bePatient_Id
{
    box-sizing:             border-box;
    background-color:       WhiteSmoke;
    background:             linear-gradient(90deg, DarkGray 0 12px, WhiteSmoke 10px 100%);
    color:                  DarkGray;

    border-width:           0 0 1px 0;
    border-style:           solid;
    border-color:           DarkGray;
    font-weight:            bold;
    margin:                 4px -6px 8px 4px;
    padding:                12px 24px;
}

#bePatient_Id p
{
    margin:                 0;
}

#bePatientEllipsis:after
{
    overflow:               hidden;
    display:                inline-block;
    font-weight:            bold;
    color:                  DarkGray;

    vertical-align:         bottom;
    animation:              ellipsis steps(4, end) 1600ms infinite;
    content:                "\2026";               /* ascii code for the ellipsis character */
    width:                  0px;
}

@keyframes ellipsis
{
    to
    {
        width:              24px;                  /* Tweak for different font size/weight. */
    }
}

/*
 * Reauthentication styles.
 */
.ipaddress
{
    padding-left:           30px;
    padding-right:          20px;
}

div.reauthenticate
{
    width:                  600px;
}

.reauthenticate .fsContent,
.reauthenticate .fsHeading
{
    display:                block;
    float:                  left;
}

.reauthenticate input,
.reauthenticate label
{
    display:                block;
    float:                  left;
    margin:                 4px;
}

.reauthenticate label
{
    clear:                  both;
    text-align:             right;
    width:                  350px;
}

div.reauthenticate label
{
    width:                  180px;
}

.reauthenticate p.message
{
    color:                  red;
    margin:                 auto;
    padding:                3px 3px 8px 3px;
    text-align:             center;
}

.reauthenticate p.clear
{
    clear:                  both;
    margin:                 4px auto;
    padding:                3px;
}

/*
 * Missing JS message styles.
 */
.apaAuthenticationJsNotEnabled
{
    background-color:       var(--auth-errors-bg);
    border-width:           0 1px 1px 3px;
    border-style:           solid;
    border-color:           var(--auth-errors-color);
    color:                  var(--auth-errors-color);
    cursor:                 pointer;
    font-weight:            bold;
    margin:                 0 5px 5px;
    padding:                5px;
}

.apaAuthenticationJsNotEnabledDialog
{
    background:             inherit;
    border:                 inherit;
    border-width:           1px;
    color:                  black;
    display:                none;
    left:                   35%;
    margin-top:             5px;
    padding:                20px;
    position:               absolute;
    text-align:             center;
    width:                  30%;
}

.apaAuthenticationJsNotEnabledDialog > p:first-child
{
    color:                  var(--auth-errors-color);
    font-size:              150%;
    margin:                 0 0 10px 0;
}

.apaAuthenticationJsNotEnabledDialog p
{
    margin:                 0;
}

.apaAuthenticationJsNotEnabled:hover .apaAuthenticationJsNotEnabledDialog
{
    display:                block;
}