﻿main .dijon-content {
    padding: 0;
}


.on-title li {
    color: white;
    text-align: left;
}

span.contenu {
    text-align: center;
    padding: 0 200px;
    display: block;
}

.connexionwpc .contenu img {
    width: 5vw;
    background-color: white;
    border-radius: 10px;
    box-shadow: 2px 2px 8px rgba(0,0,0,.3);
    padding: 10px;
    margin: 0 auto 5% auto;
}

.connexionwpc .contenu {
    margin: auto;
    background-color: #102B5B;
    display: block;
    padding: 8%;
    height: 100%;
    width: 100%;
}

.connexionwpc p.on-title {
    color: white;
    text-align: justify;
}

.root-dijon.content h2, .root-dijon.content .annuaire {
    display: none;
}

.class_group_intern ul {
    padding: 0;
}

.connexionwpc .bandeau {
    text-align: center;
    display: grid;
    grid-template-columns: 40% auto;
    width: 80%;
    margin: auto;
    box-shadow: 0px 0px 14px -3px #bfbaba;
}

.vdd-form.connexionwpc {
    padding: 20px;
    background: none;
    box-shadow: none;
}

.vdd-form.connexionwpc {
    box-shadow: 2px 2px 12px 0px #ded9d9;
    background: #f9f9f9;
}




.vdd-form.espace-citoyen.connexionwpc {
    padding: 0;
}
/*------------------------- Non authentifier -------------------------------*/
.connexionwpc .authentification, .connexionwpc .creation-compte {
    color: #38414b;
}

.connexionwpc .creation-compte {
    margin-top: 5%;
}

.connexionwpc .authentification {
    border-right: solid 1px #dbdcd7;
    padding: 5%;
    text-align: center;
}

    .connexionwpc .authentification .header, .connexionwpc .creation-compte .header {
        position: relative;
        margin-bottom: 20px;
        display: block;
        width: 100%;
    }


        .connexionwpc .authentification .header .icon-login {
            background: url('../images/login.png');
            min-height: 50px;
            min-width: 50px;
            display: inline-block;
            background-repeat: no-repeat;
            background-size: contain;
            background: none;
            min-width: 0;
        }

        .connexionwpc .authentification .header .titre, .connexionwpc .creation-compte .header .titre {
            font-family: "Overpass", Regular, Arial, sans-serif;
            font-size: 25px;
            font-weight: 400;
            display: inline-block;
        }

            .connexionwpc .authentification .header .titre:after {
                content: '';
                width: 10%;
                display: block;
                height: .5vh;
                background-color: #254c93;
                margin: 2% auto 0 auto;
            }

        .connexionwpc .creation-compte .header .icon-creation-compte {
            background: url('../images/sign_up.png');
            min-height: 50px;
            min-width: 50px;
            display: inline-block;
            background-repeat: no-repeat;
            background-size: contain;
            background: none;
            min-width: 0;
        }

    .connexionwpc .authentification .login, .connexionwpc .authentification .password {
        display: block;
        background: none;
        width: 100%;
        position: relative;
    }

        .connexionwpc .authentification .login input:focus, .connexionwpc .authentification .password input:focus {
            outline: none;
            opacity: 1;
        }

        .connexionwpc .authentification .login input:hover, .connexionwpc .authentification .password input:hover {
            opacity: 1;
        }

        .connexionwpc .authentification .login input, .connexionwpc .authentification .password input {
            display: inline-block;
            background: none;
            font-family: "Overpass Thin", Regular, Arial, sans-serif;
            color: #38414b !important;
            width: 100%;
            border-bottom: solid 1px #d5d5d5;
            margin-bottom: 15px;
            padding: 0px 5px;
            /* opacity: 0.6; */
            height: 30px;
            background: white;
        }



    .connexionwpc .authentification .icon-password, .connexionwpc .authentification .icon-mail {
        width: 20px;
        height: 20px;
        display: inline-block;
        position: absolute;
        top: 5px;
        right: 5px;
    }

    .connexionwpc .authentification .icon-mail {
        background-image: url('../images/mail.png');
        background-repeat: no-repeat;
        background-size: contain;
    }

    .connexionwpc .authentification .icon-password {
        background-image: url('../images/password.png');
        background-repeat: no-repeat;
        background-size: contain;
        width: 17px;
    }

    .connexionwpc .authentification .footer {
        display: block;
        margin-top: 15px
    }

        .connexionwpc .authentification .footer input {
            width: 35%;
            display: inline-block;
            background-color: #b23993;
            color: white;
            text-align: center;
            padding: 7px 0px;
            border: none;
            font-family: "Overpass Light", Regular, Arial, sans-serif;
            font-weight: 200;
            min-width: 100px;
        }

            .connexionwpc .authentification .footer input:focus {
                outline: none;
            }

            .connexionwpc .authentification .footer input:hover {
                transform: scale(1.05);
            }

        .connexionwpc .authentification .footer a {
            width: 65%;
            display: inline-block;
            color: #38414b;
            text-decoration: none;
            font-size: 13px;
            font-family: "Overpass Thin", Regular, Arial, sans-serif;
            /* opacity: 1.8; */
        }

            .connexionwpc .authentification .footer a:hover {
                opacity: 1
            }

    .connexionwpc .creation-compte .contenu, .connexionwpc .authentification .contenu {
        display: block;
        color: #38414b;
        font-family: "Overpass Thin", Regular, Arial, sans-serif;
        line-height: 25px;
        margin-bottom: 29px;
    }




    .connexionwpc .authentification .on-connect {
        display: inline-block;
        font-family: "Overpass Thin", Regular, Arial, sans-serif;
        text-decoration: none;
        width: 35%;
        font-weight: 200;
        min-width: 150px;
        background: #254c93;
        color: white;
        text-align: center;
        padding: 1%;
    }

.connexionwpc .creation-compte a {
    color: #254c93;
    text-decoration: none;
}

    .connexionwpc .creation-compte a:hover,
    .connexionwpc .authentification a:hover, {
        transform: scale(1.05);
    }

.authentification .invalid .error {
    margin: 10px 0;
    font-size: 12pt;
    font-style: normal;
    color: white;
    font-weight: 100;
    padding: 15px;
    background: #da3264;
    display: block;
}

.error .fal.fa-exclamation-square {
    margin-right: 10px;
}


@media (max-width: 1024px) {

    .connexionwpc .contenu img {
        width: 15vw;
    }

    .bandeau {
        display: flex !important;
        flex-direction: column-reverse;
    }

    .connexionwpc .authentification .header .titre, .connexionwpc .creation-compte .header .titre {
        font-family: "Overpass", Regular, Arial, sans-serif;
        padding: 0px 10px;
        font-weight: 400;
        display: inline-block;
    }


    .connexionwpc .creation-compte a {
        margin: auto;
        display: block;
    }
}


/**v2***/
.connexionwpc .light .authentification {
    padding: 10px;
}

    .connexionwpc .light .authentification a {
        padding: 20px;
        font-weight: bold;
    }



.content.light {
    padding: 20px;
}