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

/*****************************************************************************************************************************/

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

#page-content.login-fade{
display: none;}

#modal-login-show{
opacity: 0;
animation: modal-login-appear 0.35s ease forwards;}

@keyframes modal-login-appear{
from{ opacity: 0; }
to{ opacity: 1; }}

#modal-login{
position: relative;
display: none;
z-index: 3;}

#modal-login-devkits{
position: relative;}

#close-login,
#close-login-devkits,
#close-forgot{
font-size: 36px;
line-height: 1;
color: #aaaaaa;}

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

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

/* Logo abaisse pour chevaucher la fenetre forgot (identique au login) */
.header-forgot #m3ddjpg{
position: relative;
z-index: 4;
margin-bottom: -42px;
box-shadow: 0 1px 8px rgba(0,0,0,0.55);}

/* Logo abaisse pour chevaucher la fenetre de login */
.header-login{
text-align: center;
padding-bottom: 50%;}

.header-login #m3ddjpg{
position: relative;
z-index: 4;
margin-bottom: -50px;
box-shadow: 0 1px 8px rgba(0,0,0,0.55);}

#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;
top: 11px;
right: 7px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #aaaaaa;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
border-radius: 10px;
transition: background-color 0.18s ease, color 0.18s ease;
z-index: 5;}

#close-login:hover,
#close-login-devkits:hover,
.close-btn:hover{
color: white;
background-color: rgba(255,255,255,0.10);}

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

/* Ligne label + lien "mot de passe oublie" */
.lbl-row{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;}

.lbl-row .lbl-login{
margin-bottom: 0;}

.lbl-row #span-oublie{
font-size: 12px;
color: #8a8a8a;
cursor: pointer;
white-space: nowrap;
transition: color 0.16s ease;}

.lbl-row #span-oublie:hover{
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;}

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

#oublie,
#oublie-devkits{
font-size: 13px;
color: #9d9d9d;
text-align: right;
margin-top: -2px;}

#span-oublie-devkits{
margin-bottom: 10px;}

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

/* Titre conserve pour la modale devkits uniquement
   (login, register et code n'en ont plus) */
#titre-login,
#titre-login-devkits{
margin-top: 58px;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.4px;
text-align: center;
margin-bottom: 33px;}

/* Les titres ayant ete retires, l'espace sous le logo est
   porte par la fenetre elle-meme */
#window-login{
padding-top: 0;
}

#form-forgot,
#form-forgot6{
display: flex;
flex-direction: column;
width: 350px;
margin-top: 0px;
margin-bottom: 8px;
padding: 68px 22px 16px 22px;}

#form-register-only-log,
#form-register-devkits{
display: flex;
flex-direction: column;
width: 350px;
margin-top: 20px;
padding: 22px 24px 0px 24px;}

#form-login,
#form-login-devkits{
display: flex;
flex-direction: column;
width: 350px;
margin-top: 0px;
margin-bottom: 8px;
padding: 68px 22px 22px 22px;}

/* ===== REGISTER : réplique exacte du gabarit login ===== */
#form-register{
display: flex;
flex-direction: column;
width: 350px;
margin-top: 0px;
margin-bottom: 3px;
padding: 0px 22px 22px 22px;}

/* Sans bandeau affiche, le formulaire porte lui-meme l'espace du logo */
#reg-mode-notice[style*="display:none"] + #form-register,
#reg-mode-notice[style*="display: none"] + #form-register{
padding-top: 68px;}

/* bouton s'inscrire plus proche des champs */
#form-register .valid{
margin-top: 5px;}

/* input avatar + password + confirm : pleine largeur comme #password */
#reg-username,
#reg-password,
#reg-password-confirm{
width: 100%;}

/* Lien de bascule login <-> register */
.switch-auth{
text-align: center;
font-size: 13.5px;
color: #d3d3d3;
padding: 4px 22px 28px 22px;
margin-top: 0px;}

/* Filet de separation au-dessus du lien de bascule */
#switch-to-register::before,
#switch-to-login::before{
content: "";
display: block;
height: 1px;
margin: 0 0 14px 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);}

/* Étape code : mêmes dimensions que le formulaire register */
#form-code{
display: flex;
flex-direction: column;
width: 350px;
margin-top: 0px;
padding: 68px 22px 0px 22px;}

#form-code .valid{
margin-top: 5px;}

/* Étape code : indice + cases OTP */
.code-hint{
margin-top: 0;
font-size: 14px;
color: #cacaca;
margin: 0 0 16px 0;
text-align: left;}

#otp-wrapper{
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 15px;}

.otp-cell{
width: 44px;
height: 52px;
text-align: center;
font-size: 22px;
padding: 0;
margin-bottom: 0;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
background-color: rgba(0,0,0,0.30);
color: #fff;}

.otp-cell:focus{
outline: none;
border-color: rgb(25, 136, 240);}

#resend-code{
color: rgb(25, 136, 240);
cursor: pointer;
font-weight: bold;}

#resend-code:hover{
text-decoration: underline;
color: white;}

.switch-auth span{
color: rgb(53 157 255);
cursor: pointer;
font-weight: bold;
text-underline-offset: 3px;}

.switch-auth span:hover{
text-decoration: underline;
color: white;}

/* Statut d'inscription : conteneur (vide = invisible, rempli = bandeau) */
.reg-status{
margin: 16px 0 0;
font-size: 14px;
overflow-wrap: anywhere;
word-break: break-word;}

.reg-status:empty{
display: none;}

.reg-status.is-info,
.reg-status.is-success,
.reg-status.is-warning,
.reg-status.is-error{
box-sizing: border-box;
width: 100%;
margin: 16px 0 0;
padding: 12px 14px;
border-radius: 10px;
line-height: 1.5;
text-align: center;}

.reg-status a{
color: #ffffff;
font-weight: bold;
text-decoration: underline;
text-underline-offset: 3px;}

/* ===== Variantes de couleur sémantiques (partagées bandeau + statut) ===== */
.reg-mode-notice.is-info,
.reg-status.is-info{
background: rgba(25,136,240,0.12);
border: 1px solid rgba(25,136,240,0.40);
color: #dde9ff;}

.reg-mode-notice.is-success,
.reg-status.is-success{
background: rgba(46,204,113,0.12);
border: 1px solid rgba(46,204,113,0.42);
color: #cdf8df;}

.reg-mode-notice.is-warning,
.reg-status.is-warning{
background: rgba(240,180,40,0.12);
border: 1px solid rgba(240,180,40,0.45);
color: #ffebc4;}

.reg-mode-notice.is-error,
.reg-status.is-error{
background: rgba(255,110,110,0.12);
border: 1px solid rgba(255,110,110,0.45);
color: #ffdcdc;}

/* ===== Bandeau mode d'inscription (in-world requis / bloqué) ===== */
/* Largeur = celle externe de #form-register (350 + padding 22 gauche/droite = 394px)
   pour que ses bords coincident avec ceux du formulaire. */
/* Le bandeau remonte tout en haut de la fenetre et passe en partie
   sous le logo : son padding-top degage le texte. */
#reg-step-form{
padding-top: 0;}

.reg-mode-notice{
position: relative;
z-index: 1;
box-sizing: border-box;
width: 394px;
margin: 0 auto 18px;
padding: 58px 23px 16px 23px;
border-radius: 20px 20px 10px 10px;
font-size: 14px;
line-height: 1.5;
text-align: left;
background: rgba(25,136,240,0.12);
border: 1px solid rgba(25,136,240,0.40);
color: #dde9ff;}

.reg-mode-notice.blocked{
background: rgba(255,110,110,0.12);
border-color: rgba(255,110,110,0.45);
color: #ffdcdc;}

.reg-mode-notice .reg-mode-title{
font-weight: bold;
margin-bottom: 6px;
color: #ffffff;
padding-right: 28px;}

.reg-mode-notice.blocked .reg-mode-title{
color: #ffe3e3;}

.reg-mode-notice .reg-mode-step{
margin-top: 4px;}

.reg-mode-notice .reg-tp-link{
display: inline-block;
margin-left: 4px;
padding: 4px 12px;
border-radius: 8px;
text-decoration: none;
font-weight: bold;
background: rgba(25,136,240,0.28);
border: 1px solid rgba(25,136,240,0.55);
color: #ffffff;}

.reg-mode-notice .reg-tp-link:hover{
background: rgba(25,136,240,0.45);
text-decoration: none;}

/* Petit spinner affiché pendant la redirection vers le login */
.redir-spinner{
display: inline-block;
width: 12px;
height: 12px;
vertical-align: middle;
border: 2px solid rgba(110,231,160,0.35);
border-top-color: #6ee7a0;
border-radius: 50%;
animation: reg-spin 0.7s linear infinite;}

/* Spinner dans le bouton register */
#reg-submit{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;}

#reg-submit .btn-spinner{
display: none;
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,0.35);
border-top-color: #ffffff;
border-radius: 50%;
animation: reg-spin 0.7s linear infinite;}

#reg-submit.is-sending .btn-spinner{
display: inline-block;}

#reg-submit.is-sending{
opacity: 0.85;
cursor: progress;}

@keyframes reg-spin{
to{ transform: rotate(360deg); }}

#window-login{
background-color: #3d3d3da3;
backdrop-filter: blur(26px) saturate(102%);
-webkit-backdrop-filter: blur(26px) saturate(102%);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 20px;
position: relative;
/*margin-top: 15px;*/

box-shadow:
inset 0 1px 0 rgba(255,255,255,0.16),
inset 0 1px 0 rgba(0,0,0,0.30),
0 40px 80px rgba(0,0,0,0.55),
0 12px 28px rgba(0,0,0,0.35);}

/* Reflet diagonal oriente comme la lumiere du fond */
#window-login::before{
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
pointer-events: none;
background: linear-gradient(118deg,
rgba(255,255,255,0.075) 0%,
rgba(255,255,255,0.02) 26%,
transparent 52%);
z-index: 1;}

/* Le contenu passe au-dessus du reflet */
#form-login-block,
#form-register-block{/*
position: relative;*/
z-index: 2;}

/* La croix reste au-dessus des blocs de formulaire et du bandeau */
.close-btn{
z-index: 6;}

/* Fenetre forgot : glassmorphisme identique a #window-login */
#window-forgot{
background-color: #2929293b;
backdrop-filter: blur(26px) saturate(102%);
-webkit-backdrop-filter: blur(26px) saturate(102%);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 20px;
position: relative;
padding-top: 0;

box-shadow:
inset 0 1px 0 rgba(255,255,255,0.16),
inset 0 -1px 0 rgba(0,0,0,0.30),
0 40px 80px rgba(0,0,0,0.55),
0 12px 28px rgba(0,0,0,0.35);}

/* Reflet diagonal oriente comme la lumiere du fond */
#window-forgot::before{
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
pointer-events: none;
background: linear-gradient(118deg,
rgba(255,255,255,0.075) 0%,
rgba(255,255,255,0.02) 26%,
transparent 52%);
z-index: 1;}

/* Le contenu passe au-dessus du reflet */
#form-forgot{
position: relative;
z-index: 2;}

#window-login-only-log,
#window-access-devkits{
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;}

#reinitialiser{
width: 100%;}

/* Messages d'erreur des modales login / forgot / reset :
   places sous le bouton, meme gabarit que #reg-status et #code-status. */
#forgot-status,
#login-status,
#reset-status{
margin: 14px 0 0;}

/* #reinit porte deja 20px sous lui : le statut n'en rajoute pas */
#reinitialiser + #forgot-status{
margin: 0;}

#reinit,
#reinit6{
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 12px;}

label{
font-size: 16px;
margin-top: 5px;
margin-bottom: 5px;
color: #cacaca;}

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

#ident{
margin: 0;}

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

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

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

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

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

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

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

input{
margin-bottom: 15px;
padding: 12px 16px;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
background-color: rgb(0 0 0 / 24%);
color: white;
font-size: 15px;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;}

input::placeholder{
color: #878787;}

/* Neutralise le fond blanc/bleu impose par l'autofill du navigateur */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-text-fill-color: white;
-webkit-box-shadow: 0 0 0 1000px rgb(0 0 0 / 24%) inset;
box-shadow: 0 0 0 1000px rgb(0 0 0 / 24%) inset;
caret-color: white;
transition: background-color 9999s ease-out 0s;}

/* Focus visible : blanc translucide, le bleu reste reserve a l'action */
input:focus{
border-color: rgba(255,255,255,0.30);/*
background-color: rgba(0,0,0,0.42);*/
box-shadow: 0 0 0 4px rgba(255,255,255,0.05);}

/* Champ avec label au-dessus */
.field-login{
position: relative;
width: 100%;
margin-bottom: 16px;}

.field-login input{
width: 100%;
margin-bottom: 0;}

/* ===== Icone en tete de champ (avatar / oeil) ===== */
.field-icon{
position: absolute;
left: 9px;
bottom: 12px;
width: 20px;
height: 20px;
color: #9c9c9c;
opacity: 0.95;
pointer-events: none;
z-index: 3;}

/* ===== Oeil du mot de passe (login) =====
   Cible par ID : showhide() fait className="hidden", ce qui ecrase
   les autres classes. L'ID, lui, reste toujours present. */
#showhide1,
#showhide2,
#sh-reset1a,
#sh-reset1b,
#sh-reset2a,
#sh-reset2b,
#reg-showhide1,
#reg-showhide2,
#reg-showhide3,
#reg-showhide4{
position: absolute;
left: 9px;
bottom: 12px;
width: 20px;
height: 20px;
padding: 0;
right: auto;
top: auto;
color: #9c9c9c;
opacity: 0.85;
cursor: pointer;
pointer-events: auto;
z-index: 3;
transition: opacity 0.16s ease, color 0.16s ease;}

#showhide1:hover,
#showhide2:hover,
#sh-reset1a:hover,
#sh-reset1b:hover,
#sh-reset2a:hover,
#sh-reset2b:hover,
#reg-showhide1:hover,
#reg-showhide2:hover,
#reg-showhide3:hover,
#reg-showhide4:hover{
opacity: 1;
color: #d8d8d8;}

/* Bascule show / hidden geree par showhide() */
#showhide1.hidden,
#showhide2.hidden,
#sh-reset1a.hidden,
#sh-reset1b.hidden,
#sh-reset2a.hidden,
#sh-reset2b.hidden,
#reg-showhide1.hidden,
#reg-showhide2.hidden,
#reg-showhide3.hidden,
#reg-showhide4.hidden{
display: none;}

#showhide1.show,
#showhide2.show,
#sh-reset1a.show,
#sh-reset1b.show,
#sh-reset2a.show,
#sh-reset2b.show,
#reg-showhide1.show,
#reg-showhide2.show,
#reg-showhide3.show,
#reg-showhide4.show{
display: block;}

/* Place reservee a gauche pour l'icone */
.field-login.has-icon > input{
padding-left: 36px;}

/* ===== Bouton d'effacement rapide ===== */
.field-wrap{
position: relative;
width: 100%;}

.field-wrap input{
width: 100%;}

.clear-input{
position: absolute;
right: 10px;
bottom: 12px;
width: 22px;
height: 22px;
display: none;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: rgba(255,255,255,0.18);
color: #dadada;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1;
cursor: pointer;
user-select: none;
transition: background-color 0.16s ease, color 0.16s ease;
z-index: 4;}

.clear-input:hover{
background-color: rgba(255,255,255,0.26);
color: #fff;}

/* Visible uniquement quand le champ contient du texte */
.field-login.has-value > .clear-input,
.field-wrap.has-value > .clear-input{
display: flex;}

/* Reserve la place a droite pour ne pas passer sous la croix */
.field-login.has-value > input,
.field-wrap.has-value > input{
padding-right: 44px;}

.lbl-login{
display: block;
font-size: 11.5px;
letter-spacing: 1px;
text-transform: uppercase;
color: #adadad;
font-weight: 600;
margin-top: 0;
margin-bottom: 8px;
text-align: left;}

/* Conteneur des checkbox */
.label {
position: relative;
display: block;
text-align: left;
margin-left: 30px;}

/* Première couche */
.checkbox {
position: absolute;
top: 66px;
left: 0;
opacity: 0;
z-index: 6;
cursor: pointer;
padding: 8px;
width: 22px;
height: 22px;
margin: 0;}

/* Deuxième couche */
.box{
position: absolute;
top: 66px;
left: 0;
opacity: 1.0;
z-index: 2;
cursor: pointer;
width: 22px;
height: 22px;
margin: 0;
background: #353535;
border-radius: 4px;}

/* Troisième couche */
.check-symbol {
color: rgb(0, 146, 214);
display: none; /* Masquer le symbole au départ */
position: absolute;
top: 66px;
left: 0;
opacity: 1.0;
z-index: 4;
cursor: pointer;
width: 22px;
height: 22px;
margin: 0;
background: #353535;
border-radius: 4px;}

.true + .label + .check-symbol {
display: inline-block; /* Afficher le symbole lorsque la checkbox est cochée */
}

#LIC-devkits{
color: rgb(25, 136, 240);
cursor: pointer;
text-decoration: underline;
font-weight: bold;
text-underline-offset: 3px;}

.valid{
margin-top: 10px;}

button{
margin-bottom: 0px;
padding: 12px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
font-size: 15px;
font-weight: 600;/*
box-shadow: 0 6px 20px rgba(0,123,255,0.30);
transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;*/}

#reinit:hover,
button:hover{
background-color: #0d8bff;
transform: translateY(-1px);/*
box-shadow: 0 9px 26px rgba(0,123,255,0.42);*/}

#reinit:active,
button:active{
transform: translateY(0);/*
box-shadow: 0 4px 14px rgba(0,123,255,0.30);*/}

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

.footer a{
color: #007bff;
color: #cacaca;
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) 
{
    #close-login,
    #close-login-devkits,
    #close-forgot{
    font-size: 30px;}

    .header-login #m3ddjpg,
    .header-forgot #m3ddjpg{
    margin-bottom: -44px;}

    #form-login,
    #form-login-devkits,
    #form-code,
    #form-forgot,
    #form-forgot6{
    padding-top: 54px;}

    #form-register{
    padding-top: 0;}

    .reg-mode-notice{
    padding-top: 54px;}

    #reg-mode-notice[style*="display:none"] + #form-register,
    #reg-mode-notice[style*="display: none"] + #form-register{
    padding-top: 54px;}

    .check-symbol{
    /*top: 62px;*/
    height: 16px;}

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

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

    #window-forgot{
    width: 340px;
    font-size: 15px;}

    #window-login-only-log,
    #window-access-devkits{
    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-login-devkits,
    #form-register,
    #form-code,
    #form-forgot,
    #form-forgot6{
    width: 296px;}

    .reg-mode-notice{
    width: 340px;}

    #m-links-logo{
    padding-top: 0px;
    padding-bottom: 0px;
    }

    #m3ddjpg{
    margin-top: 14px;
    margin-bottom: 14px;    
    }

    #form-register-only-log,
    #form-register-devkits{
    margin-top: 6px;
    }

    #form-forgot,
    #form-forgot6{
    margin-top: 0;
    }
/*
    .checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    /* garder opacity: 0, top, left, etc.
    }
*/




}

/* MOBILES en mode paysage */
@media (max-width: 1000px) and (orientation: landscape) 
{
    #close-login,
    #close-login-devkits,
    #close-forgot{
    font-size: 28px;}

    .header-login #m3ddjpg,
    .header-forgot #m3ddjpg{
    margin-bottom: -44px;}

    #form-login,
    #form-login-devkits,
    #form-code,
    #form-forgot,
    #form-forgot6{
    padding-top: 54px;}

    #form-register{
    padding-top: 0;}

    .reg-mode-notice{
    padding-top: 54px;}

    #reg-mode-notice[style*="display:none"] + #form-register,
    #reg-mode-notice[style*="display: none"] + #form-register{
    padding-top: 54px;}

    #header-modal-i{
    padding-bottom: 14px;}

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

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

    #window-forgot{
    width: 340px;
    font-size: 15px;}

    #window-login-only-log,
    #window-access-devkits{
    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-login-devkits,
    #form-register,
    #form-code,
    #form-forgot,
    #form-forgot6{
    width: 296px;}

    .reg-mode-notice{
    width: 340px;}

    .otp-cell{
    width: 38px;
    height: 46px;
    font-size: 19px;}

    #form-forgot,
    #form-forgot6{
    margin-top: 0;}

    #form-register-only-log,
    #form-register-devkits{
    margin-top: 14px;}

}