input:focus             {outline:none;}
#body-reset-password    {width: 100%; height: 100%;}

#modal-overlay{
position: fixed;
top: -13%;
left: 0;
width: 100%;
height: 100%;/*
background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
display: flex;
justify-content: center;
align-items: center;
z-index: 4;}

#header-modal{
text-align: center;
padding-bottom: 30px;}

#content-modal{
position: relative;
width: 360px;
padding: 20px;
background-color: #3f3f3f88;
border-radius: 10px;
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;}

#titre-reset{
font-size: 17px;
padding-bottom: 34px;}

.input-reset{
width: 100%;
margin-bottom: 5px;
margin-top: 8px;
padding: 11px 10px 11px 10px;
border: 1px solid #1d1d1d;
border-radius: 4px;
background-color: #353535;
color: white;}

#first-input,
#snd-input{
position: relative;
width: auto;
height: auto;}

#sh-reset1a,
#sh-reset2a{
position: absolute;
float: right;
padding: 14px;
right: -5px;
top: 23px;
width: 18px;
opacity: 0.4;
cursor: pointer;}

#sh-reset1b,
#sh-reset2b{
position: absolute;
float: right;
padding: 14px;
right: -5px;
top: 23px;
width: 18px;
opacity: 1.0;
cursor: pointer;}

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

.button-reset:hover{
background-color: #0056b3;}

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

#close-reset:hover{
color: white;}


/* MOBILES en mode portrait */
@media (max-width: 600px) and (orientation: portrait) 
{
    #modal-overlay{
    position: relative;
    top: 60px;
    align-items: flex-start;}

    #modal{
    width: 340px;}

    #content-modal{
    width: 300px;
    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;}

}

/* MOBILES en mode paysage */
@media (max-width: 1000px) and (orientation: landscape) 
{

    #modal-overlay{
    position: relative;
    top: 40px;
    align-items: flex-start;}

    #modal{
    width: 340px;}

    #content-modal{
    width: 300px;
    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;}

}