html, body {
	height: 100%;
}

body {
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-size: auto;
	background-repeat: no-repeat;
	background-position-x: right;
	background-color: #fff;
	height: 100vh;
	overflow-y: hidden;
}

#login {
	align-items: center;
	text-align: center;
	justify-content: center;
}

    #login input:-webkit-autofill,
    #login textarea:-webkit-autofill,
    #login select:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    }

    #login .input {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border: none;
        outline: none;
        background: none;
        padding: 0.5rem 1.0rem;
        font-size: 1rem;
        color: #555;
        font-weight: 300;
    }


    #login .field-validation-error {
        top: 100px;
        left: -7%;
        position: absolute;
        text-align: left;
    }


	/* nom collectivite*/
    #login #container_libelle_kanlab #libelle_kanlab {
        font-weight: 300;
        font-size: 3rem;
        color: #ABABAB;
    }

	/* formulaire login */
    #login #container_form_login {
        width: 26rem;
    }

        #login #container_form_login span.field-icon {
            top: 30px;
        }

        #login #container_form_login .i {
            display: flex;
            justify-content: center;
            align-items: center;
        }
            #login #container_form_login .i i {
                color: #d9d9d9;
                transition: .3s;
            }

        #login #container_form_login .input-div {
            position: relative;
            display: grid;
            grid-template-columns: 7% 93%;
            margin: 2.5rem 0;
            padding: 0.5rem 0;
            border-bottom: 3px solid #d9d9d9;
        }

            #login #container_form_login .input-div:after,
            #login #container_form_login .input-div:before {
                content: '';
                position: absolute;
                bottom: -0.2rem;
                width: 0;
                height: 0.2rem;
                background-color: #424242;
                transition: .3s;
            }

            #login #container_form_login .input-div:after {
                right: 50%;
            }

            #login #container_form_login .input-div:before {
                left: 50%;
            }

            #login #container_form_login .input-div.focus .i i {
                color: #424242;
            }
            #login #container_form_login .input-div.focus div h5 {
                display: none;
            }

            #login #container_form_login .input-div.focus:after,
            #login #container_form_login .input-div.focus:before {
                width: 50%;
            }

            #login #container_form_login .input-div > div {
                position: relative;
                height: 4.5rem;
            }

                #login #container_form_login .input-div > div h5 {
                    position: absolute;
                    font-weight: 300;
                    left: 1rem;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #999;
                    font-size: 1rem;
                    transition: .3s;
                }

                    #login #container_form_login .input-div > div h5 label {
                        font-weight: inherit
                    }

        #login #container_form_login #div_email {
            margin-top: 0;
        }

        #login #container_form_login #div_password {
            margin-bottom: 0.4rem;
        }

            #login #container_form_login #div_password .capslock-warning {
                position: absolute;
                text-align: left;
                width: 100%;
                display: block;
                left: -7%;
                top: 50px;
            }

        #login #container_form_login #remember_me {
            margin-bottom: 30px;
            margin-top: 40px;
            color: #999;
        }

        #login #container_form_login #remember_me .checkbox-label {
            position: relative;
            top: -1px;
        }


        #login #container_form_login #container_btn_login {
            text-align: center !important;
            margin-bottom: 15px !important;
        }

        #login #container_form_login #btn_login {
            display: block;
            width: 100%;
            height: 3rem;
            border-radius: 4px;
            margin: 0.75rem 0;
            font-size: 1.2rem;
            border: none;
            outline: none;
            cursor: pointer;
            color: #fff;
            background-color: #424242;
            max-width: inherit;
            background-size: 200%;
            transition: .5s
        }

            #login #container_form_login #btn_login:hover {
                background-position: right;
            }

            #login #container_form_login #btn_login svg {
                position: relative;
                top: -2px;
            }

/* responsive */
@media(max-width:767px) {
	body {
		background-position-x: center;
	}

    #login form h2 {
        font-size: 2.2rem;
        margin: 1rem 0;
    }
}