* {
    margin: 0;
    font-family: Roboto, sans-serif;
    text-align: justify;
}

/*body {
    position: absolute;
    left: 20%;
}*/

#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    /*padding: 50px;
    left: 20%;*/
}

#container form header, #container form section {
    margin: 40px 0px;
    /*max-width: 70%;*/
    padding: 0px 50px;
}

#container form header>div, #container form section>div {
    margin-bottom: 20px;
}

#container form h1 {
    text-align: center;
}

#container form h2, h3 {
    margin-bottom: 10px;
}

#container form .row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#container form section .column .row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 10px;
}

#container form section .column .row>label, form section .column .row>textarea {
    margin-right: 10px;
}

#container form section .column .row>textarea {
min-width: 90%;
}

#container form section .column .row input {
    min-width: 60%;
}

#container form .column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#container form label {
    margin-bottom: 10px;
}

#container form section .row input {
    min-width: 50%;
}

/*#container #message {
    display: flex;
    flex-direction: column;
    justify-content: center;
}*/

#container #message { 
    /* Configuramos ancho y alto deseado */
    width: 350px; height: 30px;
    margin: 0px auto 5px auto;
    
    /* Animamos la salida de la invisibilidad y opacidad */
    transition: visibility 1s, opacity 1s linear;
    
    /* Configuramos el aspecto del mensaje */
    border-radius: 8px;
    border: 4px solid #df9800;
    background-color: rgba(251, 198, 123, 0.771);
    padding: 5px 10px;
    
    /* Centramos el texto del contenido */
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 1s ease-out;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

.horizontal {
    display: block;
    list-style: none;
}

/*.horizontal li {
    margin-bottom: 15px;
}*/

#conexion {
    /*width: 20%;*/
    position: absolute;
    top: 20px;
    right: 20px;
    height: 40px;
    text-align: center;
    z-index: 100;
}

/*#conexion .horizontal #welcome {
    display: none;
}*/

#conexion ul.horizontal li a {
    background-color: transparent;
}

#conexion ul.horizontal li a:hover {
    background-color: transparent;
}

header {
    margin-top: 100px;
}

#background {
    background: url("../../assets/images/formonaf.jpg") no-repeat center center fixed;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


#ingreso,
#registro,
#nuevo,
#vista {
    background-color: #f1f1f1;
    width: 320px;
    margin: 50px auto;
    text-align: center;
    border-radius: 15px;
}

#ingreso form,
#registro form,
#nuevo form,
#vista form {
    text-align: center;
    margin: 10px auto;
    color: #3F67A9;
    font-weight: bold;
    padding: 10px 20px 
}

#ingreso form input,
#registro form input,
#nuevo form input,
#vista form input {
    color: black;
    margin-bottom: 10px;
    padding: 5px;
    min-width: 95%;
    border-radius: 10px;
}

#ingreso h2 {
    color: #3F67A9;
}

#ingreso form input[type=submit],
#registro form input[type=submit],
#nuevo form input[type=submit],
#vista form input[type=submit] {
    padding: 5px;
    margin-top: 10px;
    min-width: 75%;
    border-radius: 10px;
    cursor: pointer;
    color: white;
    background-image: linear-gradient(to bottom, #0088cc, #0044cc);
}

#ingreso form:-internal-autofill-selected {
    border-radius: 10px;
}

.card {
    background-color: rgba(255,255,255,.700);
}

select, input {
    height: 30px;
}


#u_save {
    height: 30px;
    width: 100px;
}

#u_save2 {
    height: 50px;
    width: 120px;
}

#italic {
    font-style: italic;
    font-size: 12px;
    text-align: justify;
}

#valbutton {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#valbutton button {
    text-align: center;
}