body,
html {
  margin: 0;
  padding: 0; }

html {
  height: 100%;
  overflow: auto; }

body {
  height: 100%; }

.sec-link {
  text-decoration: none !important; }

.sec-link :hover {
  color: #cbd3da !important;
  text-decoration: none !important; }

.flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  min-height: 100px; }

.left {
  background-color: red;
  margin: auto;
  width: 50%;
  min-height: 100px;
  padding: 10px; }

.right {
  background-color: green;
  margin: auto;
  width: 50%;
  min-height: 100px;
  padding: 10px; }

.fa-exclamation-triangle {
  color: orange; }

.fa-check {
  color: green; }

.search {
  margin-top: 10px; }

.form-item {
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #ddd; }
  @media only screen and (min-width: 1200px) {
    .form-item {
      margin-left: 20px; } }

table {
  margin-top: 10px; }

thead {
  background-color: #343a40 !important;
  color: white; }

#table_wrapper {
  margin-top: 20px;
  margin-bottom: 20px;
  max-width: 100%; }
  @media only screen and (min-width: 1200px) {
    #table_wrapper {
      max-width: 50%;
      width: 1200px; } }

textarea {
  padding: 0.375rem 0.75rem;
  display: block;
  width: 100%; }

.display-form {
  height: 0;
  overflow: hidden;
  max-width: 100%; }
  @media only screen and (min-width: 1200px) {
    .display-form {
      max-width: 50%; } }

.show-form {
  height: auto; }

.text-auto {
  background-color: #b0b3da; }

.selected {
  background-color: #ececec; }

#container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly; }
  @media only screen and (min-width: 1200px) {
    #container {
      flex-direction: row-reverse; } }

.minwidth {
  min-width: 500px; }

.extras {
  background-color: beige;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 1px;
  margin-bottom: 15px; }

[data-color="agua"] {
  text-transform: uppercase;
  font-weight: bold;
  color: blue; }

[data-color="tierra"] {
  text-transform: uppercase;
  font-weight: bold;
  color: maroon; }

[data-color="fuego"] {
  text-transform: uppercase;
  font-weight: bold;
  color: orangered; }

[data-color="aire"] {
  text-transform: uppercase;
  font-weight: bold;
  color: cadetblue; }

.btn-xxx {
  padding: 0rem 0.5rem !important; }

.table_wrapper-logs {
  max-width: 100% !important;
  width: 100% !important; }

.table-logs {
  background-color: beige !important; }

hr {
  margin-top: 2rem !important; }

.ui {
  text-align: right;
  display: block !important;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 0;
  max-width: 1200px;
  margin: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%); }

@media (min-width: 992px) {
  .nav-logout {
    position: absolute;
    right: 10px; }
    .nav-logout .nav-link:hover {
      color: black !important; } }

.nav-item {
  padding: 5px; }

.dropdown-menu {
  background-color: #343a40 !important;
  padding: 5px !important; }
  .dropdown-menu .nav-link {
    border-radius: 5px !important; }

.nav-link {
  white-space: nowrap;
  padding: 5px !important;
  border-radius: 5px; }

.nav-link:hover {
  background-color: white;
  color: black !important; }

#title-form {
  text-transform: capitalize !important; }

#page-title {
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: initial;
  font-size: 28px; }

.astroflow {
  color: #343a40; }

.astroworld {
  color: #a3b6c7; }

.search-ui {
  display: flex;
  justify-content: space-between;
  flex-direction: row; }

.input-select {
  padding: 2px 20px 2px 10px;
  margin-left: 10px;
  height: 45px;
  font-size: 20px; }

.button-search {
  height: 45px;
  font-size: 20px;
  color: white;
  border-radius: 5px;
  padding-left: 16px;
  padding-right: 16px;
  background-color: #343a40;
  margin-left: 10px; }
  .button-search:active {
    background-color: #5c5f63; }

.input-search {
  border: 1px solid grey;
  border-radius: 5px;
  height: 45px;
  width: 100%;
  padding: 2px 23px 2px 10px;
  font-size: 25px;
  outline: 0;
  background-color: #f5f5f5;
  width: 100%; }