html body {
      background-color: #edead8;
}

.footer{
      text-align: center;
      background-color: #edead8;
}
.visible{
      display: inline-block;
}
.invisible{
      display: none;
}
.home{
      background-color: black;
      color: white;
}
.home-header{
      display: flex;
      justify-content: space-around;
}
.home-cards{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      padding: 50px;
      margin: auto;
      background-color: rgb(38, 38, 38);
}
.header-home-titulo{
      display: flex;
      align-items: center;
      justify-content: left;
      text-align: center;
      max-width: 800px;
}
.card-link{
      background-color: white;
      border-radius: 5px;
      box-shadow: 0px 1px 1px 0px grey;
      padding: 10px;
}
.navbar{
      background-color: white;
      height: 70px;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 0;
      padding-bottom: 0;
      font-size: 20px;
}
.offcanvas-header{
      background-color: #ea1c1c;
      color: white;
}
.offcanvas-body{
      background-color: white;
}
.offcanvas-item{
      margin-bottom: 20px;
}
.offcanvas-link{
      text-decoration: none;
      color: black;
}
.img-nav{
      height: 100%;
}
.loader {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 9999;
      opacity: .8;
  }
.btn-nav{
      background-color: white;
      border: 0px;
      display: flex;
      align-items: center !important;
      padding-left: 10px;
      padding-right: 10px;
      text-decoration: none;
      color: black;
      margin: 2px;
      font-size: 15px;
}
.btn-nav:hover{
      background-color: #f0f0f0;
      color: black;
}
.nombre{
      height: 100%;
      border-left: 1px solid black;
}
.menu-header{
      display: flex;
      flex-direction: row;
}
.menu-nav{
      display: flex;
      height: 100%;
}
.toggler-navbar{
      display: none;
}
.login{
      background-color: white;
      margin: auto;
      padding: 40px !important;
      border-radius: 7px;
      max-width: 550px !important;
      margin-top: 20px;
      box-shadow: 0px 1px 1px 0px grey;
}
.link-header{
      text-decoration: none;
      background-color: #ea1c1c;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px;
      border-radius: 50px;
      font-size: 18px;
      color: white;
      margin: 2px;
      max-height: 50px;
      font-weight: 600;
      border: none;
}
.link-header:hover{
      text-decoration: none;
      background-color: #c51919;
      color: white;
}
.link{
      text-decoration: none;
      background-color: rgb(221, 196, 196);
      color: black;
      padding: 2px;
      border-radius: 7px;
      border: none;

}
.link:hover{
      cursor: pointer;
      background-color: rgb(203, 169, 169);
      color: black;
}
.header{
      width: 100%;
      background-color: #ea1c1c;
      margin: auto;
      display: flex;
      justify-content: left;
}
.header-titulo{
      text-transform: uppercase;
      font-size: 30px;
      font-weight: 700;
}
.header-container{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: auto;
      background-color: #edead8;
      padding: 30px;
      width: 100%;
}
.form > form {
      max-width: 600px;
      width: 100%;
      margin: auto;
      margin-bottom: 0px!important;
      display: flex;
      flex-direction: column;
      margin-block-end: 0em !important;
}
.login .form-control {
      margin-left: 10px;
}
.boton{
      color: white;
      background-color: #ea1c1c;
      font-weight: bold;
      font-size: 14px;
      text-decoration:none;
      min-width: 130px;
      text-align: center;
      padding: 8px;
}
.boton:hover{
      color: white;
      background-color: #c51919;
}
.menu{
      display: flex;
      justify-content: center;
}
.menu button, .menu input{
      margin: 10px !important;
}
.menu-botones{
      display: flex;
      justify-content: left;
      align-items: end;
}

.titulo {
      text-align: center;
}
.navbar-error{
      background-color: rosybrown;
      border-radius: 10px;
      margin: auto;
      padding: 40px !important;
      position: unset!important;
      display: block!important;
      max-width: 500px;
      margin-top: 2rem;
}
.dropdown-menu li
::hover,
::focus {
      border-bottom: 2px solid #ea1c1c;
}
.btn-box{
      display:flex;
      justify-content: space-around;
}
.contenedor-general{ 
      background-color: white;
      padding: 20px;
      text-align: left;
      border-radius: 10px;
      margin: 30px;
      margin-top: 0px;
}
.min-width-view {
      max-width: 1500px;
      width: 80%;
      margin: auto;
}
.columns{
      font-size: small;
}
.fila{
      font-size: normal;
}
.fila:hover{
      background-color: rgb(254, 234, 234);
}
.img-footer{
      width: 250px;
}
.label{
      font-size: small;
      font-weight: bold;
}
.listas-header{
      display: flex;
      justify-content: space-between;
      padding: 20px;
      font-size: 25px;
}
.contenedor-graficos{
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
}

/********************* RESPONSIVE *********************/ 
@media (max-width: 700px) {
      .login {
            margin: 20px;
      }
      .contenedor-general {
            width: 100%;
            margin: 0;
      }
      .contenedor-general > i {
            font-size: 14px;
            display: inline-block;
      }
      .menu {
            display: flex;
            flex-direction: column;
      }
      .menu-header{
            display: inline-flex;
            flex-direction: row;
      }
      .header-titulo {
            font-size: 1.8rem;
            text-align: center;
      }
      .header-container{
            flex-direction: column;
      }
      .link-header{
            text-align: center;
            max-width: 100%;
      }
      .navbar{
            padding-left: 1px;
            padding-right: 1px;
      }
      .toggler-navbar{
            display: flex;
            background-color: white;
            border-radius: 0% !important;
            border: 0px;
      }
      .btn-nav{
            display: none;
      }
      .boton{
            display: none;
      }
      .form > form {
            width: 100%;
      }
      /* Estilo de Tablas */
      .table>:not(caption)>*>* {
            padding: 0.5rem 0.5rem;
            background-color: var(--bs-table-bg);
            border-bottom-width: 1px;
            box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
            width: 100px;
      }
      .analytics-grafico img{
            max-width: 100%;
      }
}




/* Spinner */

.loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #333333;
      transition: opacity 0.75s, visibility 0.75s;
    }
    
    .loader--hidden {
      opacity: 0;
      visibility: hidden;
    }
    
    .loader::after {
      content: "";
      width: 75px;
      height: 75px;
      border: 15px solid #dddddd;
      border-top-color: #009578;
      border-radius: 50%;
      animation: loading 0.75s ease infinite;
    }
    
    @keyframes loading {
      from {
        transform: rotate(0turn);
      }
      to {
        transform: rotate(1turn);
      }
    }