form.loginform,
form.resetpassword,
.logoutform {
    background:var(--white);
    border-radius:var(--fs10);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    display: none;
    right:0;
    position:absolute;
    top:50px;
    z-index:1000;
}

form.loginform:before,
form.resetpassword:before,
.logoutform:before {
    border-bottom: 17px solid var(--white);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    content:"";
    filter: drop-shadow(0 -10px 12px #6E81AB);
    position: absolute;
    top: -17px;
    right: 10px;
}

form.loginform{
    width:337px;
}

form.resetpassword{
    width:337px;
}

.logoutform{
    width:150px;
}

form.loginform a,
form.resetpassword a,
.logoutform a{
    color:var(--grey);
    font-size:var(--fs14);
    font-weight:600;
    position: relative;
}

.logoutform a{
    padding-left:var(--fs25);
}

form.loginform a{
    text-decoration:underline;
}

.logoutform a:last-child{
    display:block;
    margin-bottom:0;
}

.logoutform a{
    display:block;
    margin-bottom:var(--fs10);
}

.logoutform a:before {
    display:inline-block;
    bottom: 0;
    content:"";
    height:18px;
    left: 0;
    margin-right:10px;
    position: absolute;
    width:18px
}

.logoutform a.icon-logout:before {
    background:url(../images/logout.svg) no-repeat top left;
    background-size:18px 18px;
    content:"";
}

.logoutform a.icon-login:before,
.infosheader .username-mobile{
    background:url(../images/user.svg) no-repeat top left;
    background-size:18px 18px;
    content:"";
}

.infosheader .username-mobile{
    display:block;
    height:18px;
    width:18px;
}

form.loginform.active {
    display: block;
}

form.resetpassword.active {
    display: block;
}

#logout_link {
    cursor: pointer;
}

#logout_link span.username {
    color: #007bff;
}

div#logoutbloc {
    display: none;
}

div#logoutbloc.active{
    display: block;
}

@media screen and (max-width: 460px) {
    form.loginform,
    form.resetpassword{
        right:-60px;
        width:320px;
    }

    form.loginform::before,
    form.resetpassword::before{
        right:20%;
    }
    
    form.loginform a,
    form.resetpassword a{
        display:inline-block;
        padding-bottom:var(--fs10);
    }
}

.btn-blue {
    background-color: rgba(0, 58, 114, 1);
    border: none;
    border-radius: 0;
    color: var(--yellow) !important;
    display: inline-block;
    font-size: var(--fs16);
    font-weight: bold;
    padding: var(--fs5) var(--fs20);
    position: relative;
    transition: 0.5s;
}

.titre-white {
    background-color: var(--blue);
    padding: var(--fs10);
}

.titre-white h2{
    color: var(--white);
    font-size: var(--fs16);
    font-weight: bold;
    margin-bottom: 0;
    text-transform: uppercase;
}

/* CONNEXION PAGE */
.input_bloc{
    margin-bottom:var(--fs16);
}

.input_bloc p{
    font-size:var(--fs14);
    margin-bottom:var(--fs10);
}

.input_bloc [type="checkbox"]:not(:checked),
.input_bloc [type="checkbox"]:checked {
	position: absolute;
	left: -9999px;
}
.input_bloc [type="checkbox"]:not(:checked) + label,
.input_bloc [type="checkbox"]:checked + label {
    margin-bottom:0;
	position: relative;
	cursor: pointer;
}
.input_bloc [type="checkbox"]:not(:checked) + label:before,
.input_bloc [type="checkbox"]:checked + label:before,
.input_bloc [type="checkbox"]:not(:checked) + label:after,
.input_bloc [type="checkbox"]:checked + label:after {
	content: '';
	position: absolute;
}
.input_bloc [type="checkbox"]:not(:checked) + label:before,
.input_bloc [type="checkbox"]:checked + label:before {
	left:0; 
    top: 0;
	width: var(--fs90); 
    height: var(--fs30);
	background: #D7DBE8;
	border-radius: var(--fs20);
	-webkit-transition: background-color .2s;
	-moz-transition: background-color .2s;
	-ms-transition: background-color .2s;
	transition: background-color .2s;
    position: relative;
    display: inline-block;
}
.input_bloc [type="checkbox"]:not(:checked) + label:after,
.input_bloc [type="checkbox"]:checked + label:after {
	width: var(--fs33);
    height: var(--fs33);
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;
	transition: all .2s;
	border-radius: 50%;
	background: var(--white);
	top: -3px; left: -1px;
}

/* on checked */
.input_bloc [type="checkbox"]:checked + label:before {
	background:var(--blue); 
}
.input_bloc [type="checkbox"]:checked + label:after {
	background: var(--white);
	top: -1px; 
    left: var(--fs60);
}

.input_bloc [type="checkbox"]:checked + label .ui,
.input_bloc [type="checkbox"]:not(:checked) + label .ui:before,
.input_bloc [type="checkbox"]:checked + label .ui:after {
	position: absolute;
	left: 6px;
	width: var(--fs90);
	border-radius: 15px;
	font-size: 14px;
	font-weight: bold;
	line-height: 22px;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;
	transition: all .2s;
    top:var(--fs4);
}

.input_bloc [type="checkbox"]:focus + label:before {
	border: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	margin-top: -1px;
}

/* CONNEXION PAGE */
.bloc-connexion{
    width:50%;
}

.bloc-connexion:first-child{
    margin-right:var(--fs20);
    width:calc(50% - var(--fs20));
}

.bloc-connexion:first-child strong{
    display: inline-block;
    min-width: 115px;
}

@media screen and (max-width: 992px) {
    .bloc-connexion,
    .bloc-connexion:first-child{
        margin-right: 0;
        width:100%;
    }
    
    .bloc-connexion:first-child{
        margin-bottom: var(--fs20);
        width:100%;
    }
}

/**********
LOGIN OVERLAY
**********/
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
  }