/*****************************************************************************************************************************/
a           {color: white; text-decoration: none;}
a:visited   {text-decoration: none;}
input:focus {outline:none;}

/*****************************************************************************************************************************/
#modal-login,
#modal-forgot{
overflow-x: hidden;}

#modal-login{
position: relative;
z-index: -1;}

#modal-forgot-show,
#modal-login-show{
position: fixed; 
top: 103px;
left: 0; 
display: flex;
justify-content: center;
width: 100%;
height: 100%; 
user-select: none;}

.header-forgot,
.header-login{
text-align: center;
padding-bottom: 50%;}

#hr-login{
border: none;
width: 100%;
border-bottom: 2px solid #7272726e;
border-top: 2px solid #000000;}

#m3ddjpg{
width: 110px;
border-radius: 60px;}

.close-btn{
position: absolute;
float: right;
top: -6px;
right: -1px;
cursor: pointer;
font-size: 23px;
color: #222222;
font-family: Arial, Helvetica, sans-serif;
padding: 10px;}

.close-btn:hover{
color: white;}

#titre-forgot,
#titre-login,
#titre-register,
#oublie{
text-align: left;}

#oublie{
font-size: 14px;
color: rgb(194, 194, 194);
text-align: left;}

#span-oublie:hover{
color: white;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;}

#titre-login{
margin-bottom: 20px;}

#titre-forgot{
margin-bottom: 30px;}

#form-forgot,
#form-register{
display: flex;
flex-direction: column;
width: 360px;
margin-top: 30px;
padding: 22px 24px 10px 24px;}

#form-register-only-log{
display: flex;
flex-direction: column;
width: 360px;
margin-top: 30px;
padding: 22px 24px 0px 24px;}

#form-login{
display: flex;
flex-direction: column;
width: 360px;
margin-top: 0px;
padding: 10px 24px 36px 24px;}

#window-login{
background-color: #3f3f3f88;
border-radius: 10px;
position: relative;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 
0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;}

#window-forgot,
#window-login-only-log{
background-color: #3f3f3f88;
border-radius: 10px;
position: relative;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 
0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;}

#reinit{
width: 100%;
margin-top: 14px;
margin-bottom: 20px;}

label{
font-size: 16px;
margin-top: 5px;
margin-bottom: 5px;
color: rgb(194, 194, 194);}

.label{
padding-top: 8px;
padding-bottom: 8px;}

#ident{
margin: 0;}

#forgot{
float: right;
margin: 0;
color: #1b1b1b;}

#mdp{
float: left;
margin: 0;}

#showhide1{
position: absolute;
float: right;
padding: 14px;
right: -5px;
top: -3px;
width: 18px;
opacity: 0.4;
cursor: pointer;}

#showhide2{
position: absolute;
float: right;
padding: 14px;
right: -5px;
top: -3px;
width: 18px;
opacity: 1.0;
cursor: pointer;}

#modep,
#modep-only-log{
position: relative;}

#modep,
#modep-only-log,
#password{
width: 100%;}

#modep-only-log{
margin-bottom: 6px;}

input{
margin-bottom: 15px;
padding: 11px 10px 11px 10px;
border: 1px solid #1d1d1d;
border-radius: 4px;
background-color: #353535;
color: white;}

button{
margin-top: 20px;
margin-bottom: 0px;
padding: 12px 10px 12px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;}

#reinit:hover,
button:hover{
background-color: #0056b3;}

.footer{
text-align: center;
margin-top: 0px;
padding-bottom: 25px;}

.footer a{
color: #007bff;
color: rgb(194, 194, 194);
text-decoration: none;
margin: 5px 0;}

.footer a:hover{
color: white;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 2px;}


/* MOBILES en mode portrait */
@media (max-width: 600px) and (orientation: portrait) 
{
    #modal-login{
    z-index: 3;}

    #modal-login,
    #modal-forgot{
    justify-content: center;
    width: 100%;
    padding-top: 90px;}

    #modal-login-show,
    #modal-forgot-show{
    position: sticky;
    width: 100%;}

    #window-forgot,
    #window-login-only-log{
    width: 340px;
    background-color: #4b4b4b88;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 
    0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    font-size: 17px;}

    #form-login,
    #form-register,
    #form-forgot{
    width: 290px;}

    #close-login{
    display: none;}

}

/* MOBILES en mode paysage */
@media (max-width: 1000px) and (orientation: landscape) 
{
    #modal-login{
    z-index: 3;}

    #modal-login,
    #modal-forgot{
    justify-content: center;
    width: 100%;
    padding-top: 40px;}

    #modal-login-show,
    #modal-forgot-show{
    position: sticky;
    width: 100%;}

    #window-forgot,
    #window-login-only-log{
    width: 340px;
    background-color: #4b4b4b88;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 
    0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    font-size: 17px;}


    #form-login,
    #form-register,
    #form-forgot{
    width: 290px;}

    #close-login{
    display: none;}

}