h2, h3,h5 {
    letter-spacing: .18em;
    text-align: center;
}
h1, h2, h3 {
    text-align: center;
}
h1, h4,h5 {
    letter-spacing: .15em;
}
h1, h2, h3, h4,h5 {
    font-family: Ostrich;
    word-spacing: 0.35em;
    margin: 10px;
}
.boxshadow10{
    transition: box-shadow 1s ease-in-out;
}
#blackLogo, .boxshadow10, .boxshadow20, .boxshadowinset {
    border-radius: 10px;
}
button, input, select, textarea {
    width: 90%;
    min-width: 200px;
    max-width: 300px;
}
#blackLogo{
    background-color: rgb(0, 0, 0);

}


footer a{
    color:white
}
 

#PanelDerecho, #nota, #panelIzquierdo {
    box-shadow: 0 0 10px rgba(0, 0, 0, .284);
}

#PanelNovedades{
    position: fixed;
    top:120px;
    left:13%;
    background: rgb(46,46,46);
    background: linear-gradient(351deg, rgba(46, 46, 46, 0.903) 0%, rgba(0,0,0,0.903) 100%);
    padding:20px;
    margin:0px;
    color:white;
    opacity: 0;
    z-index: -10;
    transition: opacity 0.3s;
    backdrop-filter: blur(10px);
    max-height: 100%;
    border-radius: 25px;

}


#CerrarNota, #nota {
    z-index: 10;
    overflow: hidden;
}
#PanelDerecho, #boxFastProyect, #panelIzquierdo {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 100;
}
@font-face {
    font-family: Ostrich;
    src: url('../resources/fonts/OstrichSans-Medium.otf') format('truetype');
}

* {
    margin: 0;
}
@media screen and (min-width:500px) {
    h1 {
    font-size: 50px;
}
}@media screen and (max-width:500px) {
    h1 {
    font-size: 32px;
}
}h2 {
    font-size: 40px;
}
@media screen and (min-width:427px) {
    h3 {
    font-size: 30px;
}
}@media screen and (max-width:427px) {
    h3 {
    font-size: 22px;
}
}.mensajeAlerta label, h4 {
    font-size: 20px;
    text-align: center;
}
button, i, label, li, strong {
    font-family: "Kanit";
}
strong {
    font-size: 18px;
    color: #051e26;
}
#blackLogo {
    color: #ffffff;
    padding: 10px 5px 10px 10px;
    text-align: center;
    padding-bottom: 0x;
    margin-left: 10px;
}
.boxshadow10, .boxshadow20, .boxshadowinset {
    background-color: #ffffff;
}

.boxshadow{
    padding: 10px;
    border-radius: 10px;
    background-color: white;
}

#PanelDerecho {
    right: 13%;
    top: -1200px;
    margin: 0;
    padding: 20px 20px 20px 20px;
    opacity: 0;
    background-color: #ffffffc1;
    color:black;
    backdrop-filter: blur(10px);
    transition: top 0.5s, padding 0.5s, opacity 1s;
    border-radius: 25px;
    bottom: auto;
    padding-bottom: 300px;
    z-index: 99;
    margin-right: -30px;
}
#panelIzquierdo {
    opacity: 0;
    left: -600px;
    padding: 20px 100px 20px 20px;
    margin: 0;
    transition: left 1s, padding 1s, opacity 1s;
    background-color: #ffffffd2;
    backdrop-filter: blur(10px);
}

#boxRespuesta{
    z-index:100;
    position:fixed;
    bottom:-800px;
    left:0%;
    right:0%;
    background-color:rgba(255, 255, 255, 0.868);
    box-shadow: 0 0px 50px black;
    backdrop-filter: blur(10px);
    margin:0px;
    padding:0px;
    overflow:hidden
}

.boxshadowHueco100 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 0;
    overflow: hidden;
    
    transition: height 1s;
}
.column-center-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
}
.column-center-start {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin: 10px;
}
.column-center-end, .column-start-start {
    flex-direction: column;
    margin: 10px;
    display: flex;
}
.column-center-end {
    justify-content: center;
    align-items: end;
}
.column-start-start {
    justify-content: start;
    align-items: start;
}
.column-start-center {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    margin: 10px;
}
.row-center-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 10px;
}
.row-center-start {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    margin: 10px;
}
.row-center-end {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: end;
    margin: 10px;
}
.row-start-center, .row-start-start {
    flex-direction: row;
    margin: 10px;
    display: flex;
}
.row-start-start {
    justify-content: start;
    align-items: start;
}
.row-start-center {
    justify-content: center;
    align-items: start;
}
.row-spacebetween-center-fixed {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, .289);
}
.row-spacearound-center, .row-spacearound-start {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin: 10px;
}
.row-spacebetween-center {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
}
.row-wrap-center-center {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 10px;
}
.row-wrap-around-center {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 10px;
}
.row-wrap-center-start {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    margin: 10px;
}
.boxshadow10 {
    box-shadow: 0 0 10px rgba(0, 0, 0, .178);
    padding: 10px;
    transition: box-shadow .1s ease-in-out, padding .1s;
}
.boxshadow10:hover {
    box-shadow: 0 0 16px rgba(0, 0, 0, .335);
}
.boxshadow20 {
    box-shadow: 0 0 20px rgba(0, 0, 0, .178);
    padding: 20px;
}
.boxshadowinset, .mensajeAlerta, button, label, p {
    padding: 10px;
}
.boxshadowinset {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, .178);
}
select, textarea {
    font-family: "Kanit";
    padding: 10px;
    border: none;
    margin: 10px;
    border-radius: 10px;
    border: 0.5px solid #f3f3f3;

}
input{
    font-family: "Kanit";
    padding: 10px;
    border: none;
    margin: 10px;
    border-radius: 10px;
    border: 0.5px solid #f3f3f3;
}
button {
    background: rgb(44, 44, 44);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: width .4s;
    margin: 10px;
    border: none;
}

label {
    text-align: center;
}
i {
    color: gray;
    text-align: center;
    font-size: 13px;
}
a, p {
    font-size: 15px;
    font-family: "Kanit";
}
a {
    color: #051e26;
    padding: 5px;
}
.mensajeAlerta {
    position: fixed;
    bottom: -200px;
    left: 100px;
    right: 100px;
    backdrop-filter: blur(10px);
    margin: 20px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: 7s sacarAlerta;
}
.verificar, footer {
    flex-direction: column;
    display: flex;
}
.mensajeAlerta label {
    font-family: "Kanit";
    color: #fff;
}
@keyframes sacarAlerta {
    0%, 100% {
    opacity: 0;
    bottom: -200px;
}
15%, 85% {
    opacity: 1;
    bottom: 0;
}



}#boxFKinfo,#boxConfirmationBorrarApiPublica,#boxGenerarURL,#boxConfirmationApiPublica,#boxConfirmation,#boxConfirmationGestor, #boxConfirmationEditColumn, #boxConfirmationBorrarCuenta, #boxConfirmationProyecto, #boxConfirmationSeg, #boxConfirmationSegImport, #boxConfirmationTabla {
    background-color: rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    z-index: 101;
    display: none;
    opacity: 0;
    transition: opacity .5s;
    
}

#barraSuperior{
    color:rgb(255, 255, 255);
    user-select:none;
    z-index:100;
    transition:top 1s;
    width: 74%;
    border-radius: 25px;
    overflow: hidden;
    left:13%;
    right: 13%;
    top: 20px;
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.459);
    background: rgba(0, 0, 0, 0.895);
    backdrop-filter: blur(4px);
    margin-left: 30px;
}



#barraMenu{
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 70px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.459);
    margin: 0px;
    padding: 5px;
    z-index: 100;
    background-color: rgb(63, 63, 63);
    width: 65px;
}


footer {
    color: #ffffff;
    padding: 1%;
    justify-content: start;
    align-items: start;
    position: absolute;
    width: 98%;
    left: 0%;
    right: 0%;
    background: rgb(38,38,38);
    background: linear-gradient(45deg, rgba(38,38,38,1) 0%, rgba(0,0,0,1) 100%);
}

@media screen and (min-width: 576px) {
    footer {
        bottom: -490px;
    }
}

/* Media Query para pantallas de 576px o menos */
@media screen and (max-width: 576px) {
    footer {
        bottom: -580px;
    }
}
body {
    margin: 0;
    padding-bottom: 50px;
    min-height: 100vh;
    position: relative;
}
.verificar {
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
.verificar label {
    padding: 20px;
    font-size: 18px;
    text-align: center;
}
.digitos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px;
    width: 100%}
.digitos input {
    padding: 5px;
    height: 50px;
    width: 50px;
    min-width: 25px;
    max-width: 50px;
    margin: 8px;
    border-radius: 20px;
    font-size: 35px;
    text-align: center;
}
#formDigitos {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}
#nota {
    transform: rotate3d(.5, -.866, 0, 15deg) rotate(1deg);
    transition: transform .4s, filter .4s, box-shadow .4s;
    filter: blur(2px);
    position: fixed;
    bottom: 10px;
    right: 0;
    background-color: #ff0;
    padding: 30px 10px 10px;
    border-top-left-radius: 45px;
    max-width: 200px;
    user-select: none;
}
#nota:hover {
    transform: rotate3d(0, 0, 0, 0deg) rotate(0);
    filter: blur(0px);
}
#CerrarNota {
    position: absolute;
    top: 0;
    left: 0;
    background-color: orange;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition: width .4s, height .4s;
}
#CerrarNota:hover {
    width: 35px;
    height: 35px;
}
#boxFastProyect {
    left: 0;
    right: 0;
    margin: 0;
    display: none;
    background-color: #000000c1;
    backdrop-filter: blur(3px);
}
#IAboxFastProyect {
    left: 0;
    right: 0;
    background-color: #000000c1;
    margin: 0;
    display: none;
    backdrop-filter: blur(3px);
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 100;
}
#RegistrosAinsertar {
    left: 0;
    right: 0;
    background-color: #000000c1;
    margin: 0;
    display: none;
    backdrop-filter: blur(3px);
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 100;
}

progress {
    height: 10px;
    border: 1px solid #000;
    border-radius: 10px;
    overflow: hidden;
}
*::-webkit-scrollbar {
    width: 10px;
}
*::-webkit-scrollbar-track {
    background: #e9e9e9;
    border-radius: 20px;
    margin-left: 200px;
    margin-right: 200px;
}
*::-webkit-scrollbar-thumb {
    background-color: #2f2f2f;
    border-radius: 20px;
    border: 1px solid #e9e9e9;
}
#background-css {
    background: linear-gradient(135deg, #0000 20.5%, #f7fcff 0 29.5%, #0000 0) 0 16px, linear-gradient(45deg, #0000 8%, #f7fcff 0 17%, #0000 0 58%) 32px 0, linear-gradient(135deg, #0000 8%, #f7fcff 0 17%, #0000 0 58%, #f7fcff 0 67%, #0000 0), linear-gradient(45deg, #0000 8%, #f7fcff 0 17%, #0000 0 58%, #f7fcff 0 67%, #0000 0 83%, #f7fcff 0 92%, #0000 0), #fff;
    background-size: 64px 64px;
}
@keyframes movimiento {
    0%, 100% {
    bottom: 10px;
}
50% {
    bottom: 15px;
}
}@keyframes sacarCaja {
    0% {
    scale: 0;
}
100% {
    scale: 1;
}
}


#indices{
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    padding:10px;
    padding-bottom:60px;
    backdrop-filter: blur(10px);
    margin:0px;
    width:330px;
    box-shadow:0 0px 10px gray;
    z-index:30;
    overflow-y: auto;
    padding-top: 85px;
    
}

#ayudas{
    margin:0px;
    margin-left:370px;
    margin-top:120px;
    overflow-x:hidden;
    padding:30px;
}

.row-spacebetween-start{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
}

.row-end-start{
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: start;
}

.row-end-end{
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: end;
}
.row-end-center{
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
}

.column-end-end{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end; 
}

@keyframes girarIzquierdaLogin {
    0%{
        transform: rotate3d(0);
        opacity: 1;
    }
    100%{
        transform: rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
    
}

@keyframes girarIzquierdaRegistro {
    0%{
        transform: rotate3d(0, 1, 0, -90deg);
        opacity: 0;

    }
    100%{
        transform: rotate3d(0);
        opacity: 1;
    }
    
}

@keyframes girarDerechaLogin {
    0%{
        transform: rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
    100%{
        transform: rotate3d(0);
        opacity: 1;
    }
    
}

@keyframes girarDerechaRegistro {
    0%{
        transform: rotate3d(0);
        opacity: 1;
    }
    100%{
        transform: rotate3d(0, 1, 0, -90deg);
        opacity: 0;

    }
    
}

@keyframes sacarBoxRespuesta {
    0%{
        bottom: -800px;
        opacity: 0;
        
    }
    100%{
        bottom: 0px;
        opacity: 1;
        

    }
    
}

@keyframes cerrarBoxRespuesta {
    0%{
        bottom: 0px;
        opacity: 1;
        

    }
    100%{
        bottom: -800px;
        opacity: 0;
        
    }

    
}

body{
    background:#f3f3f3;
}

#slogan{
    letter-spacing: .18em;
    font-family: "Ostrich";
    font-size: 12px;
}

#accesos:hover {
    transform: scale(1.03);
}

#accesos {
    transition: 0.3s all;
}


  
@keyframes ocultarBarra {
    0%{
        opacity: 1;
        top: 0%;
        padding: 10px;
    }
    100%{
        opacity: 0;
        top: -20%;
        padding-bottom: 80px;
    }
}
@keyframes aparecerBarra {
    0%{
        top: -20%;
        opacity: 0;
        padding-bottom: 80px;
    }
    100%{
        opacity: 1;
        top: 0%;
        padding: 10px;
    }
}

table{
    border-radius: 10px;
    overflow: hidden;
}
td{
    margin: 1px;
    padding: 10px;
    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.223);
    font-family: "Kanit";
    transition: all 0.05s ease-out;

    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
    text-overflow: ellipsis;
    white-space: nowrap;

}

td:hover{
     box-shadow: 0 0px 5px rgba(0, 0, 0, 0.823);
}

#buscadorDatos{
    position: fixed;
    bottom: -700px;
    padding-top: 100px;
    left: 0%;
    right: 0%;
    z-index: 50;
    transition: all 1s;
    opacity: 0;
    padding: 20px;
}

#insertGestion{
    position: fixed;
    bottom: 0px;
    top: 0px;
    right: -700px;
    padding-left: 100px;
    z-index: 150;
    box-shadow: 0 0px 100px black;
    transition: all 1s;
    opacity: 0;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    background-color: white;
    margin: 0px;
    overflow-y: auto;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

abbr{
    text-decoration: none;
}

#dropper{
    background-color: rgba(255, 255, 255, 0.908);
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    z-index: 10;
    display: none;
    margin: 0px;
    backdrop-filter: blur(10px);
}

input[type="file"]::file-selector-button {
    border-radius: 10px;
    height: 30px;
    padding: 0 16px;
    cursor: pointer;
    background-color: rgb(35, 35, 35);
    color: white;
    border: none;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
    margin-right: 16px;
    transition: background-color 200ms;
  }
  
  /* file upload button hover state */
  input[type="file"]::file-selector-button:hover {
    background-color: #3e3e3e;
  }
  
  /* file upload button active state */
  input[type="file"]::file-selector-button:active {
    background-color: #000000;
  }

  #codigoCompartir{
    box-shadow: inset 0 0px 10px rgba(0, 0, 0, 0.097);
    padding: 10px;
    border-radius: 10px;
    color: rgb(93, 93, 93);
  }

  #etiqueta{
    padding: 0px;
    color: white;

    border-radius: 10px;
    cursor: pointer;
  }


  
#imgTransparente {
  -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}