#submit.top_button {
  padding: 0.5em;
  border-radius: 4px;
  color: inherit;
  background-color: #fff;
  /* border: 1px solid #000; */
  font-family: Roboto-Regular;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, .2), inset 0 0 0 0 rgba(0, 0, 0, .2);
  width: fit-content;
  min-width: 8rem;
  font-size: var(--normal);
  overflow: hidden;
  transition: all ease 0.2s;
}

#submit.top_button:active,
#submit.top_button:hover {
  background-color: #019c50;
  /* border: 1px solid #019c50; */
  cursor: pointer;
  transform: scaleY(1.1);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), inset 1px 1px 3px 2px rgba(0, 0, 0, .2);
}

[type="submit"] {
  all: unset;
}

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

.container_title {
  font-family: Roboto-Bold;
  font-size: var(--titulo);
  float: left;
  -webkit-text-stroke: 1px rgb(255, 255, 255);
}

.container_logo1 {
  float: right;
  max-width: 15em;
}

.container_logo1 img {
  width: 73%;
  height: auto;
  margin-left: 20%
}

.contenido {
  text-align: center;
  /* font-size: 0.83em; */
}

.contenedor_flexbox {
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, .2);
  width: 50%;
  padding: 1em;
  gap: 0.5em;
  align-items: center;
  font-family: chivo;
  background-color: #fff;
}

.tiny {
  font-size: var(--tiny);
  justify-content: center;
  gap: 0.5em;
  text-align: center;
}

input:not(#submit),
input:-webkit-autofill:not(#submit),
input:-webkit-autofill:hover:not(#submit),
input:-webkit-autofill:focus:not(#submit) {
  font-size: var(--normal);
  border: none;
  border-radius: 15px;
  box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, .2);
  padding: 0.5em;
  box-sizing: border-box;
}

input.registro {
  width: 40%;
}

.left label {
  padding: 0.5em;
}

.buttons_container {
  text-align: center;
  display: flex;
  flex-direction: row;
  margin: 3rem auto 2rem;
  width: 85%;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-evenly;
}

.config {
  margin: 1rem auto
}

.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.puestos {
  margin: 0.3em
}

#button_caja {
  padding-top: 5%;
  padding-bottom: 5%
}

.container_button {
  display: flex;
  justify-content: center;
  font-family: Roboto-Regular;
  font-weight: bold;
  font-size: var(--normal);
  padding: 2.5%;
  border: 1px solid #000;
  width: 20%;
  border-radius: 12px;
  box-shadow: 5px 5px 7px 6px rgba(0, 0, 0, .2), inset 0 0 0 0 rgba(0, 0, 0, .2);
  box-sizing: border-box;
  margin: .7%;
  background-color: #fff;
  cursor: pointer;
  flex: 0 1 calc(25%);
  transition: box-shadow ease 0.5s, transform 0.5s ease;
  align-items: center;
}

.container_button:hover {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), inset 5px 5px 7px 6px rgba(0, 0, 0, .2);
  transform: scaleY(1.1);
}

#espacio_vacio {
  border: none;
  box-shadow: none;
  cursor: auto;
  background: none;
}

.log {
  width: 15%
}

.container_logo2 {
  margin: 2em auto 0 auto;
  width: 5%
}

.container_logo2 img {
  width: 100%
}

.clearfix {
  clear: both
}

.user,
.pass {
  padding: 0.6em;
}

.error {
  text-align: center;
  font-family: Roboto-regular;
}

#config {
  background-color: darkseagreen;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 2;
}

#modal {
  margin: 15% auto;
  width: 10em;
  border: 1px solid black;
  border-radius: 11px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 0.5em;
  text-align: center;
}

.botones {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 1em;
}

.confirmar {
  width: auto !important;
}

.hide {
  display: none !important;
}

@media (max-height:720) {
  body {
    font-size: 28px;
  }
}

form div:not(.top, .contenedor_flexbox, .form_items, .tiny, .aceptar, .botones) {
  display: flex;
  gap: 1rem;
  flex-direction: column;
  align-items: center;
  width: 75%;
}

.aceptar {
  margin-top: 1em;
}

.form_items {
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}

small {
  font-size: var(--tiny);
}

.wrapper {
  margin: 0 auto;
  width: 100%;
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  align-items: center;
  padding: 0.5em;
}

form .container_button {
  width: fit-content;
}

form .container_button:hover {
  background-color: #019c50;
  border: 1px solid #019c50;
  cursor: pointer
}

@media (max-width:1025px) {
  #config {
    flex: 1 0 auto
  }
}

ul {
  margin: 0;
}

.content_container {
  display: flex;
  flex-direction: column;
  /* overflow-y: auto; */
}

.content_container a {
  margin: 0 auto;
}

.titulo {
  margin: 1em auto;
}

.top {
  display: flex;
}

.left {
  text-align: right;
  justify-content: space-between;
}

.left,
.right {
  display: flex;
  flex-direction: column;
}

.vacio {
  visibility: hidden;
}

p {
  text-align: center;
}

.rojo:hover {
  background-color: red;
}

.error-actions {
  margin-top: 1em;
}

body {
  overflow-y: auto !important;
}

@media (orientation: portrait) {
  .main_container {
    padding: 0 2rem;
  }

  form div:not(.top, .contenedor_flexbox, .form_items, .tiny, .aceptar, .botones) {
    gap: 2rem
  }

  #submit.top_button {
    min-width: 12rem;
  }
}