/* Generated by less 2.5.1 */
#fondo_modal {
  top: 0px;
  left: 0px;
  background: rgba(25, 0, 25, 0.2);
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
}
#fondo_modal #capa_modal {
  margin: auto;
  max-width: 400px;
  min-height: 150px;
  font-family: verdana;
  font-size: 1.2em;
  border: 2px solid #8c8c8c;
  border-radius: 15px;
  text-align: center;
  z-index: 110;
  box-shadow: 10px 10px 5px #3f3f3f;
  display: block;
  position: relative;
}
#fondo_modal #capa_modal #cabeza_modal {
  padding: 10px;
  border-radius: 15px 15px 0 0;
}
#fondo_modal #capa_modal #cabeza_modal:hover {
  cursor: pointer;
}
#fondo_modal #capa_modal #cuerpo_modal {
  background-color: white;
  color: black;
  padding: 10px;
}
#fondo_modal #capa_modal #pie_modal {
  background-color: white;
  color: black;
  border-radius: 0 0 15px 15px;
  padding: 10px;
}
#fondo_modal #capa_modal #pie_modal .boton_modal {
  margin: 5px;
  padding: 5px;
  height: 35px;
  width: 150px;
  border-radius: 7px;
  font-size: 16px;
}
#fondo_modal #capa_modal #pie_modal .boton_modal:hover {
  cursor: pointer;
  box-shadow: 7px 7px 5px #3f3f3f;
}
.rojo {
  background-color: #bb0000;
  color: white;
}
.rojo:hover {
  background-color: #550000;
  color: yellow;
}
.verde {
  background-color: #39b76f;
  color: white;
}
.verde:hover {
  background-color: #216940;
  color: yellow;
}
.azul {
  background-color: #3183a6;
  color: white;
}
.azul:hover {
  background-color: #1a4557;
  color: yellow;
}
.naranja {
  background-color: #f6a600;
  color: black;
}
.naranja:hover {
  background-color: #a66b00;
  color: yellow;
}