html, body {
  height: 100%
}

body {
  /*background-image: url("../imagen/R3B7OQfa.jpeg");*/
  background-size: cover;
  /*background-repeat: no-repeat; */
  background-position: center;
  background-attachment: fixed;
  background-color: rgba(255, 255, 255, 0.5);
  font-family: "Roboto", sans-serif;
  font-size: .8rem;
  font-weight: 400;
  font-style: normal;
  min-height: 100vh;
}


.top-nav {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  height: 20px;
  color: #ffffff;
  background-color: #333
}

.navbar-custom {
  height: 70px;
}
 .lead {
  font-size:  2rem;
  border-radius: 10px;
  box-shadow: 0 0 30px rgbs(0,0,0,0.568);
  /*background-color: rgba(255, 255, 255, 0.5);*/
  
 }

.nav-link.active {
  color: white; /* Color de texto blanco */
  font-size: 20px; /* Tamaño de fuente 14px */
  /* Otras propiedades de estilo que desees aplicar */
}

.navpd-0 {
  padding-left: 0;
  /*max-width: 80%;*/
}
.containermain {
  display: flex;
  
  height: 100vh; /* Opcional: ajusta la altura según tus necesidades */
  
}


.mt-8 {
  margin-top: 6rem !important;
}
.container {

  position: relative;
}
.container-lg {
  padding-top:0px;
  padding-bottom: 1px
  
}

.bg-img {
  
  background-image: url("../imagen/home_welcome_banner.png"); 
  width: 100%;
  color: #FFF;
  height: 100vh; /* Establece la altura al 100% del viewport */
  background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el contenedor */
  background-position: center; /* Centra la imagen en el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */

}
 

.bg-img-1 {
  
  background-image: url("../imagen/your_company _banner.png");
  width: 100%;
  color: #FFF;
  height: 100vh; /* Establece la altura al 100% del viewport */
  background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el contenedor */
  background-position: center; /* Centra la imagen en el contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
}


.top-nav p {
  position: relative;
  
}
.mb-custom {
  margin-bottom: 10rem;
}

.ingresar{
  background: #000;
  background-color: #FFF;
}

.fixed-height {
  height: 120px; /* Altura fija de 100px */
}

#login {
  width: 70%;
  padding-bottom: 40px;
  border-radius: 10px;
  box-shadow: 0 0 30px rgbs(0,0,0,0.568);
  color: #333;
  font-size: 24px;
 
}


#wrapper {
  min-height: 100%;
  margin-bottom: -60px; /* Altura del footer */
}

#id_diameter_um {
  width: 4rem;
  height: 2rem;
  font-size: 1rem;
}

#id_project, #id_rig, #id_tool {
  width: 100%;
  height: 2rem;
  font-size: 1rem;
}

#id_status{
  width: 50%;
  height: 2rem;
  font-size: 1rem;
}

#id_role{
  width: 50%;
  height: 2rem;
  font-size: 1rem;
}

.footer {
  margin-top: 30p;
  color: #b4BABA;
  flex-shrink: 0;
}

.copyright {

  font-size: 0.7rem;
  line-height: 0;
}

.footer a {
  color: #b4baba; /* Color del enlace */
  text-decoration: none; /* Elimina el subrayado del enlace */
}

.not-visible {
   display: none;
}

.mt-custom {
  margin-top: 5rem !important;
}

.nav-item{
  font-size: 1rem;
 }
.sidebar {
  height: 100vh;
  flex: 0 0 16%; /* Tamaño fijo del 16% */
  /* width: 16.66666667%; */ /* 1/6 del ancho */
  position: fixed;
  top: 50px;
  left: 0;
  font-size: 1rem;
  background-color: #333; /* Fondo negro */
  padding-top: 3.5rem; /* Para compensar la altura del navbar */
}
.sidebar ul.nav.flex-column {
  padding-left: 0;
}
.sidebar .nav-link {
  color: #fff; /* Color amarillo */
}
.sidebar .nav-link.active {
  color: #ffffff; /* Color gris para el menú principal activo */
}
.sidebar .nav-link:hover {
  color: #000; /* Color blanco al pasar el cursor sobre el menú principal */
  background-color: #7d7b7b
}

.icono-head {
  margin-top: 0.5rem;
  width: 40px; /* Puedes ajustar el valor según el tamaño deseado */
  height: 40px; /* Puedes ajustar el valor según el tamaño deseado */
}

.icono-head:hover {
  cursor: pointer;
}

.icono-menu {
  width: 24px; /* Puedes ajustar el valor según el tamaño deseado */
  height: 24px; /* Puedes ajustar el valor según el tamaño deseado */
}

.hidden {
  display: none;
}

.btn {
  margin-right: 5px; /* Espacio entre los botones */
}


.content-main {
  margin-top: 60px;
  margin-left: 16%; /* Para dejar espacio al sidebar */
  flex: 1; /* Toma el espacio restante */
  /*background-color: #ffffff; /* Opcional: color de fondo 
  background-color: rgba(255, 255, 255, 0.7);*/
  border-radius: 10px;
  max-width: 80%
}

.content-main1 {
  margin-top: 80px;
}

.content-card {
  border-radius: 5px;
  border: 1px solid #BAB4B4
}

.sub-menu {
  display: none; /* Ocultar los submenús por defecto */
  margin-left: 4px; /* Agregar margen izquierdo al submenú */
}
.sub-menu.show {
  display: block; /* Mostrar el submenú cuando tiene la clase 'show' */
}

.id-column {
  width: 5%; /* Puedes ajustar este valor según tus necesidades */
}

.name-column {
  width: 10%; /* Puedes ajustar este valor según tus necesidades */
}

.description-column {
  width: 30%; /* Puedes ajustar este valor según tus necesidades */
}

.machine-column {
  width: 15%; /* Puedes ajustar este valor según tus necesidades */
}

.status-column {
  width: 10%; /* Puedes ajustar este valor según tus necesidades */
}

.actions-column {
  width: 15%; /* Puedes ajustar este valor según tus necesidades */
}

.custom-shadow {
  /* Puedes ajustar estos valores según tu preferencia */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Utiliza la sombra predeterminada de Bootstrap */
}


#graph-container {
  position: relative;
  margin: auto;
  height: 80vh; 
  width: 90vw;
  outline: none; /* Desactivar el borde punteado */
  overflow: auto; /* Agregar barra de desplazamiento si el contenido se desborda */
}

.chart-container1 {
  position: relative;
  margin: auto;
  height: 50vh;
  width: 100%;
}

.errorlist {
  border-color: red;
  color: red;
}


@media (max-width: 700px) {

  .fixed-height {
    height: 250px; /* Altura fija de 100px */
  }
  
  .col-12 {
    /* max-width: 90%; */
    font-size:small;
    }
  
 .nav-item{
  font-size: large;
 }


}