/**
 * @file      password-reset.css
 *
 * @brief     Account password reset styles.
 *
 * @copyright Copyright Dexdyne Ltd. 2023-2023. All Rights Reserved.
 *
 * @author    MWP
 */

#content
{
    --reset-form-elem-pad:  12px;

    --flash-success-green:  Green;
    --flash-success-fill:   rgb(204, 230, 204);

    /* Match error colours to login and banner no JS moan. */
    --flash-failure-red:    #d9534f;               /* Very very light pink. */
    --flash-failure-fill:   #fdf7f7;               /* Dark pink. No close official colour. */
}

#pwResetRequestContent
{
    box-sizing:             border-box;

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

    width:                  100%;
}

#pwResetRequestFormsContainer
{
    box-sizing:             border-box;
    width:                  560px;
    background-color:       WhiteSmoke;

    display:                flex;
    flex-direction:         column;
    justify-content:        flex-start;
    align-items:            center;
    row-gap:                var(--reset-form-elem-pad);

    border:                 1px solid DarkGray;
    border-right:           2px solid DarkGray;
    border-bottom:          2px solid DarkGray;
    padding:                var(--reset-form-elem-pad);
}
 
.resetRequestSection
{
    box-sizing:             border-box;
    width:                  100%;

    display:                flex;
    flex-direction:         column;
    justify-content:        flex-start;
    align-items:            flex-start;
    row-gap:                var(--reset-form-elem-pad);

    background-color:       White;
    background:             linear-gradient(90deg, DarkGray 0 var(--reset-form-elem-pad), White 10px 100%);

    border:                 1px solid DarkGray;
    margin:                 0;
    padding:                var(--reset-form-elem-pad);
    padding-left:           calc(2*var(--reset-form-elem-pad));
}

.ajaxRequestBtnHolder
{
    width:                  100%;
    text-align:             left;
}

.ajaxRequestBtnHolder input
{
    min-width:              96px;
}

.emailAddressObscured
{
    color:                  DarkGray;
}

#valueContainer
{
    display:                flex;
    flex-direction:         row;
    justify-content:        flex-start;
    align-items:            center;
    column-gap:             12px;
}

#passwordValue
{
    color:                  Black;
    background-color:       WhiteSmoke;
    font-family:            monospace;
    padding:                6px;

    height:                 32px;
    line-height:            32px;
    font-size:              20px;
}

#passwordCopyIcon
{
    color:                  Black;
    background-color:       WhiteSmoke;
    height:                 32px;
    width:                  28px;
    padding:                6px 6px;

    cursor:                 pointer;
}

/*---------------------------------
 * Success/Failure flash.
 *---------------------------------*/
#flashBanner
{
    box-sizing:             border-box !important;
    width:                  100%;
    height:                 0;
    max-height:             0;
    margin-bottom:          0;
    padding-left:           calc(var(--reset-form-elem-pad) + 6px);
    padding-right:          6px;

    border:                 none;
    color:                  rgba(255, 255, 255, 0);

    display:                flex;
    justify-content:        center;
    align-items:            center;

    opacity:                0.0;
    transition:             all 0.5s ease;
}

#flashBanner h3
{
    font-size:              16px;
    margin:                 6px 0;
}

div#flashBanner.flashBannerSuccess
{
    height:                 auto;
    max-height:             300px;

    background-color:       var(--flash-success-fill);
    background:             linear-gradient(90deg, var(--flash-success-green) 0 var(--reset-form-elem-pad), var(--flash-success-fill) var(--reset-form-elem-pad) 100%);
    color:                  var(--flash-success-green);

    border-width:           1px 1px 1px 0;
    border-style:           solid;
    border-color:           var(--flash-success-green);

    opacity:                1.0;
}

div#flashBanner.flashBannerError
{
    height:                 auto;
    max-height:             300px;

    background-color:       var(--flash-failure-fill);
    background:             linear-gradient(90deg, var(--flash-failure-red) 0 var(--reset-form-elem-pad), var(--flash-failure-fill) var(--reset-form-elem-pad) 100%);
    color:                  var(--flash-failure-red);

    border-width:           1px 1px 1px 0;
    border-style:           solid;
    border-color:           var(--flash-failure-red);

    opacity:                1.0;
}