html {
    font-family: sans-serif;
    color: var(--color-grey-darker);
    font-size: 100%;
}

body {
    background-repeat: repeat;
    margin: 0;
    padding: 0;
}

html, body {
    background: var(--color-white);
    height: 100%;
}

input, textarea, select {
    font-family: sans-serif;
    color: var(--color-grey-darker);
    font-size: 13px;
    padding-left: 1px;
}

a:link, a:hover, a:active, a:visited {
    color: var(--color-white);
    text-decoration: none;
}

input[type=checkbox], label {
    cursor: pointer;
}

.top-bar {
    background: var(--color-main-red);
    width: 0;
    height: 6px;
    position:relative;
    z-index: 10;
}

.container {
    height: calc(100% - 50px);
}

/* Bloc principal de login */
.boite-login {
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boite-login .logo {
    max-width: 255px;
    width: 98%;
    margin-bottom: 50px;
}

.boite-login .login {
    width: 360px;
    margin: 20px auto;
    box-shadow: 0 0 35px -6px var(--color-grey-lighter);
    padding: 20px 40px;
    box-sizing: border-box;
    border-bottom: 8px solid var(--color-main-red);
    text-align: left;
}

.boite-login .login .title {
    text-transform: uppercase;
    color: var(--color-main-red);
    font-weight: 700;
    font-size: 21px;
    padding-bottom: 28px;
    text-align: center;
}

.boite-login .login .champ {
    padding: 7px 0;
}

.boite-login .login .champ a.redirect {
    color: var(--color-grey-lighter);
    display: inline-block;
    width: 100%;
    text-align: center;
}

.boite-login .login .champ input[type=text], .boite-login .login .champ input[type=password] {
    width: 100%;
    height: 38px;
    padding-left: 55px;
    box-sizing: border-box;
}

.boite-login .login .champ input[type=text] {
    background: url(/Content/images/user_200.png) no-repeat 11px center;
    background-size: auto 23px;
}

.boite-login .login .champ input[type=password] {
    background: url(/Content/images/mdp_200.png) no-repeat 16px center;
    background-size: auto 23px;
}

.boite-login .login .champ.garder-session-ouverte, .boite-login .login #persistCookieMessage {
    color: var(--color-grey-lighter);
    font-size: 14px;
}

.boite-login .login .champ.garder-session-ouverte input {
    margin: 0 3px 0 0;
    display: inline-block;
    vertical-align: middle;
}

.boite-login .login .champ.garder-session-ouverte label {
    display: inline-block;
    vertical-align: middle;
}

.boite-login .login .submit {
    padding-top: 35px;
    text-align: center;
}

.boite-login .login .submit .button {
    width: 140px;
}

.boite-login .login .mdp-oublie {
    text-align: center;
    padding: 20px 0 0 0;
}

.boite-login .login .mdp-oublie a {
    color: var(--color-grey-lighter);
    font-size: 14px;
}

/* / Bloc principal de login */

/*** effet madoka inputs ***/
.effet--madoka {
    width: 100%;
    position: relative;
    display: inline-block;
    height: 100%;
}

.effet--madoka input {
    width: 100%;
    background: transparent;
    top: 0;
    left: 0;
    position: relative;
    z-index: 30;
    border: 0 none;
    height: 100%;
}

.effet--madoka label {
    position: absolute;
    width: 100%;
    height: 100%;
    color: var(--color-grey-lighter);
    text-align: left;
    cursor: text;
    top: 0;
    left: 0;
}

.effet {
    transform: scale3d(1, -1, 1);
    transition: stroke-dashoffset 0.7s;
    pointer-events: none;
    fill: transparent;
    stroke: var(--color-main-red);
    stroke-width: 4px;
    stroke-dasharray: 962;
    stroke-dashoffset: 962;
    position: absolute;
    top: 0;
    left: 0;
}

.graphic.base {
    transform: scale3d(1, -1, 1);
    transition: stroke-dashoffset 0.7s;
    pointer-events: none;
    fill: transparent;
    stroke: var(--color-grey);
}

.effet--madoka input:focus + .label--madoka .effet {
    stroke-dashoffset: 0;
}

.Btn-link a {
    color:var(--color-grey-darker);
}

#resetPassword #errorSize, #resetPassword #errorCheck {
    display: none;
}

#resetPassword .inline-block .float-l:first-child {
    padding-right: 3px;
}

/* Bouton */
.button {
    background: var(--color-main-red);
    color: var(--color-white);
    padding: 5px 10px;
    font-size: 15px;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 0 none;
    font-family: sans-serif;
    font-weight: 600;
    position: relative;
}

.button:before {
    content: "";
    background: var(--color-black);
    height: 5px;
    width: 0;
    transition: 0.3s width;
    position: absolute;
    top: 0;
    left: 0;
}

.button:hover:before {
    width: 100%;
}

.button:active {
    background: var(--color-main-red);
    color: var(--color-white);
}
/* / Bouton */