/*******************************************                                *******************************************
-----------------------------------------------------------------------------------------------------------------------
GLOBAL MY ACCOUNT PAGE
-----------------------------------------------------------------------------------------------------------------------
*********************************************                                ******************************************/
/*
    size base on ad height size
*/
.widget-advert-33,
.my-account > div > div.widget-block
{
    position:   relative;
    height:     33.7em;
}

/* The forgot-password card carries an extra reCAPTCHA widget — let it grow so
   the fixed 33.7em height doesn't push the submit button out of view. */
#main__content.widget-password-forgot .widget-block {
    height:     auto;
    min-height: 33.7em;
}

/* Tighten the gap between the reCAPTCHA and the ENVOYER button: drop the form's
   bottom margin and the empty js-error paragraph's default margins. */
#main__content.widget-password-forgot form { margin-bottom: 0; }
#main__content.widget-password-forgot footer p#js-error { margin: 0; }

/*
    its parent container is an 33.7em div
*/
.widget-login{
    height:     100%;
}

/*
    "required fields" message, just under the footer
*/
.my-account p.information {
    padding:    1em;
    width:      100%;
    font-size:  1.2em;
}

.my-account footer p.error{
    display: block;
}

/*
    the footer of every div in my-account page is in the same place
*/
.my-account footer{
/*    position: absolute;
    bottom: 1.5em;
    left: 0;
*/    width: 100%;
height: auto;
    line-height: inherit;
}

/*
    FORM
*/
.my-account form
{
    margin: 0 auto;
    margin-top: 5em;
    margin-bottom: 1em;
    width: 70%;
}
    .my-account form .form-fields-wrapper label{
        width: 12em;
    }

    .my-account form .form-fields-wrapper input{
        padding-left: 14em;
    }


/*
    EMAIL PICTURE FOR CREATE ACCOUNT VALIDATION SCREEN
*/
.callback-message img,
.callback-message img{
    display: block;
    margin: 1em;
    width: 100%;
    height: 3em;
}











/*******************************************                                *******************************************
-----------------------------------------------------------------------------------------------------------------------
SPECIFIC RULES
-----------------------------------------------------------------------------------------------------------------------
*********************************************                                ******************************************/
/*---------------------------------------------------------------------------------------------------------------------
                                                    AD
---------------------------------------------------------------------------------------------------------------------*/
.widget-block.widget-advert-336:before,
.widget-block.widget-advert-336:after
{
    padding: .7em 0;
}

/*---------------------------------------------------------------------------------------------------------------------
                                                    HOME (VALIDATIONS)
---------------------------------------------------------------------------------------------------------------------*/
#main__content.widget-home footer{
    position: relative;
    bottom: 0;
    background-color: #212121;
    -webkit-box-shadow: inset 0px 2px 5px 0px #201F1F;
    -moz-box-shadow: inset 0px 2px 5px 0px #201F1F;
    box-shadow: inset 0px 2px 5px 0px #201F1F;
    -o-box-shadow: inset 0px 2px 5px 0px #201F1F;
}

#main__content.widget-home footer p{
    padding-top: 1em;
    font-size:  1.4em;
    color:      #9c9898;
}

#main__content.widget-home footer a{
    text-decoration: underline;
}

#main__content.widget-home .block_100{
    position: relative;
    float: none;
    margin-bottom: 0;
    min-height: 0;
}

#main__content.widget-home .my-validations {
    margin-bottom:      50px;
}
#main__content.widget-home .my-validations h2 {
    padding-bottom:     .5em;
    margin-bottom:      0;
}
#main__content.widget-home .my-validations .update {
    font-size:      1.3em;
    opacity:        .55;
    font-weight:    normal;
}
#main__content.widget-home .my-validations .update:hover {
    opacity:            .8;
    text-decoration:    underline;
}
#main__content.widget-home .my-validations h5 {
    padding:            2.5em 0 1em 0;
}

#main__content.widget-home .my-validations .widget-buttons {
    padding-bottom:     2em;
}
#main__content.widget-home .button.icon-windows span,
#main__content.widget-home .button.icon-android span {
    padding-left:       2em;
    padding-right:      2em;
}
#main__content.widget-home .button.icon-windows span::after {
    background-image: 		url('../images/icon-windows.svg');
    background-size: 		1em auto;
}
#main__content.widget-home .button.icon-android span::after {
    background-image: 		url('../images/icon-android.svg');
    background-size: 		1em auto;
}

/*---------------------------------------------------------------------------------------------------------------------
                                                    CREATE
---------------------------------------------------------------------------------------------------------------------*/

#main__content.widget-create .block_66 .widget-block,
#main__content.widget-create .block_33 .widget-block {
    min-height:     38em;
}
#main__content.widget-create .block_66 .widget-block {
    height:         auto;
}
#main__content.widget-create form{
    margin-top:     2em;
    margin-bottom:  0;
}

#main__content.widget-create .callback-message p{
    margin-top:     6em;
    font-size:      1.2em;
}

#main__content.widget-create .callback-message footer .button{
    width: 28em;
}

#main__content.widget-create #js-error{
    display: block;
    color: rgb(240, 10, 10);
    font-weight: bold;
}

/*---------------------------------------------------------------------------------------------------------------------
                                                    LOGIN
---------------------------------------------------------------------------------------------------------------------*/

#main__content.widget-login .block_66 .widget-block,
#main__content.widget-login .block_33 .widget-block {
    min-height:     38em;
}

#main__content.widget-login .widget-block p#widget-login-error{
    top: 7em;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 1.3em;
}

#main__content.widget-login .widget-block #login-form{
    margin-top: 2em;
}

/*
    field-label icons — a small white glyph immediately before the right-aligned
    "USER NAME*" / "PASSWORD*" text. Scoped to #login-form so the password-forgot
    and new-password forms (which reuse for="password") stay icon-free.
*/
#main__content.widget-login #login-form label[for="email"]::before,
#main__content.widget-login #login-form label[for="password"]::before{
    content:                '';
    display:                inline-block;
    vertical-align:         middle;
    width:                  1.3em;
    height:                 1.3em;
    margin-right:           .55em;
    background-repeat:      no-repeat;
    background-position:    center;
    background-size:        contain;
    opacity:                .9;
}

#main__content.widget-login #login-form label[for="email"]::before{
    background-image:       url(../images/icon-account.svg);
}

#main__content.widget-login #login-form label[for="password"]::before{
    /* the padlock art is narrower and carries internal padding, so enlarge its
       (square) box until the glyph reads the same height as the user icon;
       vertical-align:middle keeps both icons centered on the same text line */
    width:                  1.45em;
    height:                 1.45em;
    background-image:       url(../images/cadena-blanc.svg);
}

/* shrink the login card to its content so it doesn't leave a tall empty gap below */
#main__content.widget-login .block_66 .widget-block.widget-login{
    height:         auto;
    min-height:     0;
}

/*
    meta row under the password field: "*Required fields" pinned left (italic),
    "Forgot your password" link kept on the right (was two separate lines before).
*/
#main__content.widget-login #login-form p.login-meta{
    display:        flex;
    align-items:    baseline;
    width:          90%;
    margin:         0 auto;
    text-align:     left;
}

#main__content.widget-login #login-form p.login-meta .req-fields{
    font-style:     italic;
    color:          #888888;
}

#main__content.widget-login #login-form p.login-meta .forgot-pw{
    margin-left:    auto;   /* pin right even when the required-fields note is absent */
}


/*---------------------------------------------------------------------------------------------------------------------
                            "DON'T HAVE AN ACCOUNT?" EXPLAINER  (second card under the login widget)
---------------------------------------------------------------------------------------------------------------------*/

/*
    sits as a second card below .widget-login in the same .block_66 column — it must
    shed both the global fixed 33.7em height and the login section's 38em min-height.
*/
#main__content.widget-login .block_66 .widget-block.create-account-info{
    height:             auto;
    min-height:         0;
    margin-top:         2em;
    padding:            2.2em 4em 2.4em;
}

.create-account-info h4{
    margin-bottom:      .5em;
}

.create-account-info .cai-intro{
    margin:             0 0 1.7em;
    font-size:          1.5em;
    line-height:        1.5;
    color:              #cccccc;
}

/*
    numbered step list — accent badge + connecting rail, built with a CSS counter
    so the markup carries no hard-coded numbers.
*/
.create-account-info .cai-steps{
    counter-reset:      cai;
    list-style:         none;
    margin:             0;
    padding:            0;
}

.create-account-info .cai-steps li{
    position:           relative;
    counter-increment:  cai;
    display:            flex;
    align-items:        flex-start;
    padding:            0 0 1.6em 0;
}

/* the accent number badge */
.create-account-info .cai-steps li::before{
    content:            counter(cai);
    flex:               0 0 auto;
    width:              2.4em;
    height:             2.4em;
    margin-right:       1em;
    line-height:        2.4em;
    text-align:         center;
    font-size:          1.4em;
    font-weight:        bold;
    color:              #ffffff;
    border-radius:      50%;
    background-color:   #a8009a;
    background-image:   -webkit-linear-gradient(top, #c000a8, #91007f);
    background-image:   linear-gradient(to bottom, #c000a8, #91007f);
    box-shadow:         0 2px 6px rgba(0, 0, 0, .45);
}

/* vertical rail linking consecutive badges */
.create-account-info .cai-steps li:not(:last-child)::after{
    content:            '';
    position:           absolute;
    left:               1.68em;        /* centre of the 2.4em x 1.4 badge */
    margin-left:        -1px;
    top:                3.6em;          /* just below the badge */
    bottom:             0;
    width:              2px;
    background-color:   #3e3e3e;
}

.create-account-info .cai-steps .cai-text{
    padding-top:        .35em;
}

.create-account-info .cai-steps .cai-text h5{
    margin:             0 0 .25em;
    padding:            0;
    font-size:          1.5em;
    color:              #ffffff;
}

.create-account-info .cai-steps .cai-text p{
    margin:             0;
    font-size:          1.5em;
    line-height:        1.45;
    color:              #b3b3b3;
}

.create-account-info .cai-steps strong{
    color:              #e7e7e7;
}

/* highlighted reminder, accent-bordered */
.create-account-info .cai-note{
    margin:             .4em 0 0;
    padding:            1em 1.2em;
    font-size:          1.2em;
    line-height:        1.5;
    color:              #e2a9d8;
    background-color:   rgba(192, 0, 168, .09);
    border-left:        3px solid #c000a8;
    border-radius:      3px;
}

.create-account-info .cai-note strong{
    color:              #ffffff;
}


/*---------------------------------------------------------------------------------------------------------------------
                                                    ACCOUNT FORGOT PASSWORD
---------------------------------------------------------------------------------------------------------------------*/



#main__content.widget-password-forgot form{
    margin: 9em auto;
    margin-bottom: 5em;
}

/*---------------------------------------------------------------------------------------------------------------------
                                                    PROFILE INFORMATION
---------------------------------------------------------------------------------------------------------------------*/

#main__content.widget-profile-information .block_66 .widget-block,
#main__content.widget-profile-information .block_33 .widget-block {
    min-height:     38em;
}

#main__content.widget-profile-information form{
    margin-top: 1.5em;
    width: 81.5%;
}

#main__content.widget-profile-information form input[disabled="disabled"]{
    background-color: #3C3C3D;
}

#main__content.widget-profile-information .button{
    width: 36%;
}

#main__content.widget-profile-information select{
    margin-left: 23%;
    width: 77%;
}

#main__content.widget-profile-information p.callback-message{
    color: #6CB301;
    font-weight: bold;
}

#main__content.widget-profile-information #js-error{
    display: block;
    color: rgb(240, 10, 10);
    font-weight: bold;
}

#main__content.widget-profile-information p.callback-message.error{
    color: #c6172f;
}

#main__content.widget-profile-information footer {
    margin-top:     0;
    padding-top:    0;
    line-height:    2em;
}
#main__content.widget-profile-information footer .back {
    display:        inline-block;
    margin-top:     1.5em;
    margin-bottom:  .5em;
    font-size:      1.4em;
    opacity:        .7;
}


/*---------------------------------------------------------------------------------------------------------------------
                                                    NEW PASSWORD
---------------------------------------------------------------------------------------------------------------------*/
#main__content.widget-new-password p.help{
    padding: .5em 2.4em;
    width: 70%;
    text-align: left;
    font-size: 1.2em;
}

#main__content.widget-new-password p.token-expired{
    margin-top: 1em;
}

#main__content.widget-new-password form{
    margin-top: 6em;
    margin-bottom: 1.5em;
}


/*---------------------------------------------------------------------------------------------------------------------
                                                    CALLBACK MESSAGE
---------------------------------------------------------------------------------------------------------------------*/

#main__content .callback-message p{
    margin-top: 6em;
}