﻿:root {
    --primary-stuart: #27E2A5;
    --primary-stuart-dark: #07c285;
    --background-stuart: #F6F8FC;
}
body {
    background: var(--background-stuart);
}
h3 {
    color: #00249c;
    text-align: center;
}

#FormConnexion {
    margin-top: 6rem;
    background-color: #ffffff;
    padding: 4rem;
    box-shadow: 2px 2px 5px #e6e8ec;
}

#FormConnexion > .row:first-child > div:first-child {
    border-right: 1px solid var(--primary-stuart);
}

.LogoConnexion {
    margin-top:4rem;
}

.ImgConnexion{
    width: calc(80%);
}

input {
    width: 100%;
    border-radius: 8px;
}

.colInput{
    position:relative;
}

form input[type="text"], form input[type="password"], form input[type="email"] {
    width: 100%;
    font-size: 16px;
    padding: 1rem 1rem 1rem 4rem;
    border: 1px solid #ddd;
    background: transparent;
    outline: none;
    position: relative;
    border-radius: 8px;
}


form input[type="text"]:focus,
form input[type="text"]:active,
form input[type="password"]:focus,
form input[type="password"]:active,
form input[type="email"]:focus,
form input[type="email"]:active
{
    border: 1px solid var(--primary-stuart);
    color: var(--primary-stuart);
    background-color:none;
}

form input + i {
    position: absolute;
    top: 0;
    left: 0;
    color: #ddd;
    font-size: 1.36rem;
    background-color: #eeeeee;
    padding: 1rem;
    border: 1px solid #ddd;
    border-start-start-radius: 8px;
    border-end-start-radius: 8px;
    text-align:center;
}


form input:focus + i,
form input:active + i {
    color: var(--primary-stuart);
    border: 1px solid var(--primary-stuart);
}

input[type="submit"] {
    color: #ffffff;
    padding: 1rem;
    font-size: 1.36rem;
    background-color: var(--primary-stuart);
    border: 1px solid var(--primary-stuart-dark);
}

input[type="submit"]:hover {
    background-color: var(--primary-stuart-dark);
    transition: ease 0.3s;
    color: #ffffff;
}

a:hover{
    color: var(--primary-stuart);
}

#IconeLogin {
    display: flex!important;
    align-items: center!important;
}








    