/* DEFINICIÓN DE VARIABLES PARA LAS PALETAS DE COLORES DEL TEMA CLARO Y OSCURO */
:root,:root.light{
    --bgcolor-primary: #FFFFFF;
    --bgcolor-secundary: #F6F8FA;
    --btn-color: #0066FF;
    --btn-hover-color: #005AE0;
    --link-color: #005AE0;
    --border-color: #D1D5DA80;
    --boxshadow-color: #959DA5;
    --text-primary-color: #2F363D;
    --text-secundary-color: #F6F8FA;
    --box-shadow-values: 0 0.5rem 1rem rgb(0 0 0 / 5%), inset 0 -1px 0 rgb(0 0 0 / 15%);
    --svg-color: invert(17%) sepia(28%) saturate(344%) hue-rotate(169deg) brightness(88%) contrast(86%);
}
:root.dark{
    --bgcolor-primary: #2F363D;
    --bgcolor-secundary: #24292E;
    --btn-color: #005AE0;
    --btn-hover-color: #0049B8;
    --link-color: #009AFF;
    --border-color: #444D56;
    --boxshadow-color: #444D56;
    --text-primary-color: #F6F8FA;
    --text-secundary-color: #FFFFFF;
    --box-shadow-values: rgb(0 0 0 / 30%) 0px 1px 3px 0px, rgb(0 0 0 / 25%) 0px 1px 2px 0px;
    --svg-color: invert(61%) sepia(11%) saturate(221%) hue-rotate(169deg) brightness(99%) contrast(95%);
}
h1,h2,h3,h4,h4,h6,p,input, label, td{
    color: var(--text-primary-color) !important;
    transition: color 0.5s;
}
a:hover{
    color: var(--link-color) !important;
    transition: color 0.5s;
}
input{
    background-color: var(--bgcolor-primary) !important;
    border: 2px var(--border-color) solid !important;
    transition: background-color 0.5s, border 0.5s;
}
input:focus{
    outline: none !important;
}



/* INCLUSIÓN DE LA FUENTE A UTILIZAR */
@font-face{
    font-family: "Inter";
    src: url(ttf/Inter-Light.ttf);
}



button.link { background:none; border:none; }


/* Boton para cambiar el tema de la página */
.lightMode{
    background-image: url('../img/sun.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 40px;
    height: 40px;
    border: none;
    background-color: transparent;
    margin-right: 2em;
    filter: var(--svg-color);
}
.lightMode:hover{
    filter: invert(77%) sepia(52%) saturate(3898%) hue-rotate(6deg) brightness(111%) contrast(106%);
}
.darkMode{
    background-image: url('../img/moon.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 40px;
    height: 40px;
    border: none;
    background-color: transparent;
    margin-right: 2em;
}
.darkMode:hover{
    filter: invert(18%) sepia(31%) saturate(5672%) hue-rotate(259deg) brightness(82%) contrast(135%);
}
body{
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bgcolor-secundary);
    transition: background-color 0.5s, border 0.5s;
}






/* Error BD */
.secErrorBD{
    height: unset;
    padding-bottom: 5em;
}
#IconErrorBD{
    padding-top: 2em;
    margin: 0 auto;
    width: 30%;
}







/* NAVBAR */
.navbar{
    background-color: var(--bgcolor-primary);
    transition: background-color 0.5s, border 0.5s;
    z-index: 999;
}
.passnarvbar{
    display: flex;
    justify-content: center;
    flex-flow: row;
}
.logo-container{
    font-size: 1.25em;
}
.nav-link{
    font-size: 1.25em;
    border-radius: 1em;
}
.nav-link:hover{
    background-color: var(--bgcolor-secundary);
    text-decoration: underline;
}
.LogInAccount{
    display: flex;
    justify-content: center;
    flex-flow: row;
    align-items: center;
    margin-right: 2em;
}
#LogOut{
    border: none;
    background: none;
    width: 2.5em;
    height: 2.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5em;
    margin-right: 2em;
    margin-left: 1em;
}
.vanish{
    display: none !important;
}

.btn-inicio{
    width: 3em;
    height: 3em;
    background-image: url("../img/LOGO.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    background-color: transparent;
    
  }
.btn-inicio:hover{
    background-image: url("../img/home.svg");
    transform: rotate(-360deg);
    filter: invert(24%) sepia(49%) saturate(4757%) hue-rotate(211deg) brightness(102%) contrast(106%);
    transition: all 0.75s;
}
.btn-inicio:not(:hover){
    background-image: url("../img/LOGO.png");
    transform: rotate(360deg);
    
    transition: all 0.75s;
}
.btn-logout{
    width: 40px;
    height: 40px;
    background-image: url("../img/log-out.svg");
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
    background-color: transparent;
    filter: var(--svg-color);
}
.btn-logout:hover{
    filter: invert(24%) sepia(49%) saturate(4757%) hue-rotate(211deg) brightness(102%) contrast(106%);
    transition: all 0.3s;
}
.btn-logout:not(:hover){
    filter: var(--svg-color);
    transition: all 0.3s;
}






/* ------------------- */
/* ----- INDEX ------ */
/* ------------------ */

#logSec{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70%;
    height: 70%;
    margin: auto;
}
#LogedOut{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin-top: 15em;
    background-color: var(--bgcolor-primary);
    box-shadow: var(--box-shadow-values);
    border: var(--border-color) 2px solid;
    border-radius: 0.5em;
    text-align: center;
    transition: background-color 0.5s, border 0.5s;
}
#LogedOut h2{
    padding-top: 1em;
    font-size: 2.5em;
}
#LogedOut p{
    font-size: 1.3em;
    padding: 0 1em;
}
#LogedOut form{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}
#LogedOut form label{
    color: var(--link-color);
    text-decoration: underline;
    font-size: 1.25em;
    padding-bottom: 1em;
    transition: color 0.5s;
}
#LogedOut form #boton{
    margin: 0 auto;
    width: 50%;
    font-size: 1.5em;
}
.LogedOut__Div{
    display: flex;
    flex-direction: column;
    width: 50%;
    padding-top: 3em;
}
#logInSec{
    border-right: 1px solid var(--border-color);
}




/* -------------------- */
/* LOGIN Y REGISTER */
/* -------------------- */
::-webkit-input-placeholder {
    color: rgb(177, 177, 177);
    font-size: 1.2em;
    text-align: center;
  }
  html {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  body {
    margin: 0;
  }
  body,
  html {
    height: 100%;
    margin: 0;
    margin: 0 auto;
  }
  .navbar{
    width: 100%;
    border-bottom: solid var(--border-color) 1px;
    box-shadow: var(--box-shadow-values);
  }
  section#LogIn{
    width: 35%;
    background-color: var(--bgcolor-primary);
    border: 2px var(--border-color) solid;
    border-radius: 0.5em;
    box-shadow: var(--box-shadow-values);
    margin: 0 auto;
    margin-top: 7em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: wrap;
    transition: background-color 0.5s, border 0.5s;
  }
  section#LogIn div#LogIn_div{
    width: 100%;
    height: auto;
  }
  div#LogIn_div form{
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  section#LogIn h2{
    font-size: 3em;
    text-align: center;
  }
  .login-input {
    margin: 0 auto;
    font-size: 1em;
    width: 20em;
    height: 3em;
    margin-top: 2em;
    border: 1px var(--border-color) solid;
    border-radius: 0.5em !important;
    padding: 2em;
    border-radius: 0.1em;
  }
  .login-input:focus{
    border: none;
    outline: 0;
  }
  .btn-verPassLogin{
    display: flex;
    position: relative;
    width: 2em;
    height: 2em;
    background-image: url("../img/eye.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 100;
    border: none;
    top: 3em;
    right: 3em;
    justify-content: end;
    background-color: transparent;
    filter: var(--svg-color);
}
  #boton_repiola{
    border: none;
    color: whitesmoke;
    width: 7.5em;
    height: 3em;
    font-size: 1.25em;
    border-radius: 0.45em;
    margin-top: 2em;
  }
  .btn_repiola-reg{
    background-color: #ff8000;
  }
  .btn_repiola-reg:hover{
    background-color: #f85d09;
    transition: all 1s;
  }
  .btn_repiola-reg:not(:hover){
    background-color: #ff8000;
    transition: all 1s;
  }
  .btn_repiola-log{
    background-color: #358BFC;
  }
  .btn_repiola-log:hover{
    background-color: #0E69DF;
    transition: all 1s;
  }
  .btn_repiola-log:not(:hover){
    background-color: #358BFC;
    transition: all 1s;
  }
  #LogIn_div form{
    text-align: center;
    margin: 0 auto;
  }
  .LogIn_div{
    display: flex;
    text-align: center;
  }
  .tooltipButton-characters{
    position: fixed;
    bottom: 5;
    right: 5%;
    width: 5em;
    height: 5em;
    background-color: transparent;
    border: none;
    background-image: url('../img/help-circle.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: var(--svg-color);
  }
  .tooltipButton-characters:hover{
    filter: invert(24%) sepia(70%) saturate(4256%) hue-rotate(212deg) brightness(103%) contrast(105%);
    transition: filter 0.3s;
  }
  .tooltipButton-characters:not(:hover){
    filter: var(--svg-color);
    transition: 0.3s;
  }
  @media screen and (max-width: 1200px) {
    section#LogIn{
      width: 70%;
    }
  }
  @media screen and (max-width: 700px) {
    section#LogIn{
      width: 100%;
    }
  }
  #errorAlert {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 95%;
      height: 10%;
      margin-top: 0.75em;
      background-color: #e7c9c9;
      border-radius: 5px;
      font-size: 1.35em;
      color: #c5807f;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      text-align: center;
  }


/* PÁGINA DE INICIO */

#optionsMenu{
    width: 100%;
    height: 100vh;
    background-color: var(--bgcolor-secundary);
    transition: background-color 0.5s, border 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#menuBase{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background-color: var(--bgcolor-primary);
    border-radius: 1em;
    transition: background-color 0.5s, border 0.5s;
}
.opcionElegida{
    width: 100%;
    height: 80%;
    background-color: var(--bgcolor-secundary);
}
.opcionMenu{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 25%;
    background-color: var(--bgcolor-primary);
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    border: solid var(--border-color) 1px;
    transition: background-color 0.5s, border 0.5s;
    box-shadow: var(--box-shadow-values);
}
.loggednt{
    display: none;
}
.managePasswords{
    font-size: 1.35em;
    width: 30%;
    height: 30%;
}
.manageProfile{
    font-size: 1.35em;
    width: 30%;
    height: 30%;
}
/* Ingresar Cuenta - Opcion */

.MenuOpcions__base{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border-bottom: none;
}
.MenuOpcions__base h2{
    margin-bottom: 0.5em;
    font-size: 60px;
    text-align: center;
}
.botonStyle{
    margin-top: 2em;
}
.inputStyle{
    width: 14em;
    height: 4em;
    padding: 1em;
    border-radius: 7px;
    border: none;
    background-color: var(--bgcolor-primary);
    transition: background-color 0.5s, border 0.5s;
}
.inputStyle{
    width: 14em;
    height: 4em;
    padding: 1em;
    border-radius: 7px;
    border: none;
    background-color: var(--bgcolor-primary);
    transition: background-color 0.5s, border 0.5s;
}
::-webkit-input-placeholder {
  color: rgb(170, 170, 170);
  text-align: center;
}
.botonEnviar{
    border: rgb(99, 99, 99) 2px solid;
    border-radius: 5px;
    margin-top: 3em;
    width: 8em;
    height: 3em;
}
.botonEnviar:hover{
    background-color: rgb(214, 214, 214);
}
/* Esto sería para la vista en dispositivos móviles */
@media screen and (max-width: 700px) {
    #menuBase{
        height: 100%;
        width: 100%;
        border-radius: 0;
    }
    .MenuOpcions__base{
        border-top-right-radius: 0;
        border-top-left-radius: 0;
    }
    .opcionMenu{
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
    .managePasswords{
        background-image: url("../img/list.svg");
        border: none;
        width: 5em !important;
        height: 5em;
        content-visibility: hidden;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        filter: var(--svg-color);
    }
    .manageProfile{
        background-image: url("../img/user.svg");
        border: none;
        width: 5em !important;
        height: 5em;
        content-visibility: hidden;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        filter: var(--svg-color);
    }
    .managePasswords:hover{
        background-color: transparent;
        filter: invert(24%) sepia(49%) saturate(4757%) hue-rotate(211deg) brightness(102%) contrast(106%);
        transition: filter 0.5s;
    }
    .manageProfile:hover{
        background-color: transparent;
        filter: invert(24%) sepia(49%) saturate(4757%) hue-rotate(211deg) brightness(102%) contrast(106%);
        transition: filter 0.5s;
    }
    .viewPw:hover{
        background-color: transparent;
        filter: invert(21%) sepia(97%) saturate(2489%) hue-rotate(210deg) brightness(93%) contrast(103%);
        transition: filter 0.5s;
    }
    .managePasswords:not(:hover){
        background-color: transparent;
        filter: var(--svg-color);
        transition: filter 0.5s;
    }
    .manageProfile:not(:hover){
        background-color: transparent;
        filter: var(--svg-color);
        transition: filter 0.5s;
    }
}





/* ----------------------- */
/* GESTIONAR CONTRASEÑAS */
/* ----------------------- */

section#gestionarPass{
    width: 75%;
    margin: 0 auto;
    padding-bottom: 3em;
    padding-top: 10em;
    background-color: var(--bgcolor-secundary);
    transition: background-color 0.5s, border 0.5s;
}
#gestionarPass hr{
    color: var(--text-primary-color);
}
.buscador-container{
    display:flex;
    width: 80%;
    margin: 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 1.5em;
}
.inputSearch-container{
    width: 15em;
    justify-content: center;
    text-align: center;
}
.inputSearch{
    border-radius: 0.25em;
    width: 100%;
    height: 2em;
    text-align: center;
}
.searchButton-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10em;
}
.searchButton{
    width: 100%;
}
table{
    width: 80%;
    text-align: center;
    border-radius: 2em;
    box-shadow: var(--box-shadow-values);
}
table thead{
    color: var(--text-secundary-color);
    font-weight: 400 !important;
    letter-spacing: 0.03em;
    background-color: var(--btn-color);
    transition: background-color 0.5s, border 0.5s;
}
table tr, thead{
    border-radius: inherit;
    overflow: scroll;
}
table tr{
    border-top: 0.5px solid var(--border-color);
}
table tbody{
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
table th, td{
    padding: 1em;
}
.td-password{
    position:relative;
    bottom:7.5px;
    background-color:transparent !important;
    border: none !important;
    text-align: center;
    width: 7.5em;
}
#filaAddPass{
    border-top: 1.35px solid var(--border-color) !important;
}
#Agregar{
    border-top: 1px solid #d1d5da80;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
.btn-showPass{
    background-image: url("../img/eye.svg");
    width: 2em;
    height: 2em;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    background-size: contain;
    border: none;
    vertical-align: center;
    margin-left: 0.5em;
    filter: var(--svg-color);
}
.btn-editPass{
    background-image: url("../img/edit.svg");
    width: 2.25em;
    height: 2.25em;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    background-size: contain;
    border: none;
    vertical-align: center;
    filter: var(--svg-color);
}
.btn-copyPass{
    background-image: url("../img/clipboard.svg");
    width: 2.25em;
    height: 2.25em;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    background-size: contain;
    border: none;
    vertical-align: center;
    filter: var(--svg-color);
}
.btn-showPass:hover, .btn-editPass:hover, .btn-copyPass:hover{
    filter: invert(29%) sepia(91%) saturate(5015%) hue-rotate(212deg) brightness(102%) contrast(101%);
    transition: all 0.25s;
}
.btn-showPass:not(:hover), .btn-editPass:not(:hover), .btn-copyPass:not(:hover){
    filter: var(--svg-color);
    transition: all 0.25s;
}
.btn-delPass{
    background-image: url("../img/trash-2.svg");
    width: 2.5em;
    height: 2.5em;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    background-size: contain;
    border: none;
    vertical-align: center;
    filter: var(--svg-color);
}
.btn-delPass:hover{
    filter: invert(50%) sepia(96%) saturate(6988%) hue-rotate(351deg) brightness(105%) contrast(97%);
}
.btn-addPass{
    background-color: var(--btn-color);
    transition: background-color 0.5s, border 0.5s;
    color: #FFF;
    border: none;
    width: 25%;
    font-size: 1.25em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    text-align: center;
    vertical-align: center;
    border-radius: 1em;
}
.btn-addPass:hover{
    background-color: var(--btn-hover-color);
    transition: all 0.4s;
}
.btn-addPass:not(:hover){
    background-color: var(--btn-color);
    transition: all 0.4s;
}
.btn-verPassInput{
    position: absolute;
    width: 1em;
    height: 1em;
    background-image: url("../img/eye.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 100;
    bottom: 5em;
    right: 4em;
    background-color: transparent;
    filter: var(--svg-color);
}
.btn-verPassInput:focus{
    animation: none !important;
    -webkit-animation: none !important;
}
.btn-generarPass{
    position: absolute;
    width: 1em;
    height: 1em;
    background-image: url("../img/refresh-cw.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 100;
    bottom: 5em;
    right: 1em;
    background-color: transparent;
    filter: var(--svg-color);
}
.btn-generarPass:focus{
    animation: none !important;
    -webkit-animation: none !important;
}
.opciones img{
    width: 2em;
}
.btn-opcion{
    border: none;
}
.btn-opcion img:hover{
    width: none !important;
    height: none !important;
}
#mobileButton{
    display: none;
}

/* ALERTAS */
.vex-content{
    background-color: var(--bgcolor-secundary) !important;
    transition: background-color 0.5s, border 0.5s;
}
.vex-dialog-message{
    color: var(--text-primary-color);
    text-align: center;
}
.ajs-message{
    border-radius: 1em !important;
}
.swal2-popup{
    background-color: var(--bgcolor-primary) !important;
    color: var(--text-primary-color) !important;
}
.swal2-html-container{
    color: var(--text-primary-color);
}



/* --------------------- */
/* ------PERFIL--------- */
/* --------------------- */
.vanish{
    display: none;
}
#seccionOpciones{
    display: flex;
    flex-direction: row;
    height: auto;
}
#navPerfil {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
    height: auto;
    padding-top: 9em;
    background-color: var(--bgcolor-secundary);
    border-right: 1px solid var(--border-color);
    transition: background-color 0.5s, border 0.5s;
    padding-bottom: 1em;
}
#navPerfil a{
    color: #ffff;
    text-decoration: none;
}
#photoPerfil{
    width: 12em;
    height: 12em;
    border-radius: 12em;
}
#opciones{
    display: flex;
    flex-direction: column;
    margin-top: 2em;
}
#contenido{
    display: flex;
    flex-direction: row;
    background-color: var(--bgcolor-primary);
    transition: background-color 0.5s, border 0.5s;
    width: 75%;
    height: 100%;
    padding-top: 5em;
    padding-bottom: 1em;
}
.botonOpcion{
    margin: 1em;
}
#Personalizar{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}
#PerfilCambiar{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3em 10em 0 10em;
    padding-top: 3em;
}
#photoPerfilCambiar{
    width: 10em;
    height: 10em;
    border-radius: 10em;
}
#linkPerfilCambiar{
    position: relative;
    color: var(--link-color);
    font-size: 1.2em;
    font-weight: 500;
}
#linkPerfilCambiar:hover{
    color: var(--btn-hover-color);
}
#formContenido{
    display: flex;
    flex-direction: column;
    padding-top: 3em;
    width: 100%;
    margin: 0 auto;
}
#contenido .espacio{
    margin-top: 2em;
}
#formContenido label{
    text-decoration: underline;
    font-size: 1.2em;
}
#PyS{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
    padding: 5em;
}
#contenido input{
    text-align: center;
    font-size: 1.35em;
    width: 100%;
    height: 3em;
    border-radius: 0.25em;
    background-color: #F5F5F5;
}
#Personalizar{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}
#exampleFormControlTextarea1{
    background-color: var(--bgcolor-primary);
    color: var(--text-primary-color);
    border: var(--border-color) 2px solid;
    transition: background-color 0.5s, box-shadow 0.25s;
    font-size: 1.35em;
    border-radius: 0.25em;
}
#btn-guardarPerfil{
    font-size: 1.35em;
}

/* ---------------------- */
/* ------FOOTER------ */
/* ---------------------- */
.footer-container{
    background-color: var(--bgcolor-secundary);
    transition: background-color 0.5s;
}
.footer-logo{
    width: 6em;
    height: 6em;
    margin: 0 auto;
   
    background-image: url("../img/LOGO.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: filter 0.5s;
}
.social-link-icon{
    filter: var(--svg-color);
}
.social-link-icon:hover{
    filter: invert(71%) sepia(77%) saturate(4895%) hue-rotate(234deg) brightness(98%) contrast(101%);
}
.social-link-icon:not(:hover){
    filter: var(--svg-color);
}

/* footer de perfil.php */
#footerPerfil{
    margin-top: -3em;
    z-index: -1;
}
/* ---------------------- */
/* ------RESPONSIVE------ */
/* ---------------------- */

@media (min-width: 2000px) {
    html {
        font-size: 32px;
    }
}
@media (max-width: 1440px) {
    html {
        font-size: 16px;
    }
}
@media (max-width: 1024px) {
    html {
        font-size: 14px;
    }
    .buscador-container{
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        height: 15em;
    }
}
@media (max-width: 992px){
    .logo-container{
        font-size: 2em !important;
    }
    .nav-link{
        font-size: 2em !important;
    }
}
@media (max-width: 768px) {
    html {
        font-size: 12px;
    }
    #table-accounts{
        font-size: 12px;
    }
    #logSec{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 80%;
        margin: auto;
    }
    #LogedOut form{
        display: flex;
        flex-direction: column;
    }
    .LogedOut__Div{
        width: 100%;
    }
    #logInSec{
        border-right: none;
    }
    #seccionOpciones{
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    #navPerfil {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 15%;
        padding: 0em;
        margin-top: 8em;
        justify-content: center;
    }
    #photoPerfil{
        display: none;
    }
    #opciones{
        display: flex;
        flex-direction: row;
        margin-top: 0;
    }
    #photoPerfil{
        width: 8em;
    }
    #contenido{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100vh;
    }
    #Personalizar{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    .desktopButtons, #ver{
        display: none;
    }
    section#gestionarPass{
        width: 85%;
    }
    #mobileButton{
        display: inherit;
    }
    #table-accounts td{
        padding: 1.5em;
    }
    #table-accounts th{
        padding: 1em;
    }
}
@media (max-width: 500px) {
    html {
        font-size: 10px;
    }
    table{
        width: 100%;
        text-align: center;
    }
    table th, td{
        padding: 0.5em;
    }
    #table-accounts{
        font-size: 8px;
    }
}
@media (max-width: 375px) {
    html {
        font-size: 8px;
    }
    #table-accounts{
        font-size: 5px;
    }
}