.result_od {
  border-right-width: 10px;
  border-right-style: dotted;
  border-left-width: 10px;
  border-left-style: dotted;
  border-color: #4888C8;/*#b3d9ff;*/
}

.result_os {
  border-right-width: 10px;
  border-right-style: dotted;
  border-left-width: 10px;
  border-left-style: dotted;
  border-color: #2FB297;/*#b3ffef;*/
}

.expand {
  width: 100% !important;
}

.os_dot {
  height: 50px;
  width: 50px;
  line-height: 50px;
  background-color: #2FB297;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  margin: 15px 0px 30px 0px;
  /* position: sticky;
  display: inline-block; */
  transition: all 0.3s;
}

.os_bar {
  height: 20px;
  width: 100%;
  top: 0;
  right: 0;
  z-index: 10;
  margin-top: 0px;
  background-color: #2FB297;
  border-radius: 0;
  position: fixed;
  display: table;
  visibility: hidden;
  transition: all 0.3s;
}

.os_bar .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  
  font-size: 15px;
  color: #fff;
  font-weight: bold;
  line-height: 50px;
}

.mininame {
  height: 20px;
  width: 100%;
  top: 0;
  right: 0;
  z-index: 10;
  margin-top: 20px;
  background-color: #eee;
  border-radius: 0;
  position: fixed;
  display: table;
  visibility: hidden;
  transition: all 0.1s;
  text-align: center;
}

.mininame .text {
  position: absolute;
  width: 100%;
  top: 50%;
  /*left: 10%;*/
  transform: translate(-50%, -50%);
  text-align: center;
  
  font-size: 15px;
  color: #000;
  font-weight: bold;
  line-height: 50px;
}

/*@media screen and (max-width: 600px){
  .os_dot{
    display: inline-block;
  }
  .os_bar{
    display: block;
  }
}*/


.od_dot {
  height: 50px;
  width: 50px;
  line-height: 50px;
  background-color: #4888C8;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  margin: 15px 0px 30px 0px;
  /* position: sticky;
  display: inline-block; */
  transition: all 0.3s;
}

.od_bar {
  height: 20px;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  margin-top: 0px;
  background-color: #4888C8;
  border-radius: 0;
  position: fixed;
  visibility: hidden;
  transition: all 0.3s;
}

.od_bar .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  
  font-size: 15px;
  color: #fff;
  font-weight: bold;
  line-height: 50px;
}

/*@media screen and (max-width: 600px){
  .od_dot{
    display: inline-block;
  }
  .od_bar{
    display: block;
  }
}*/



.os_dot_small {
  height: 30px;
  width: 30px;
  line-height: 1.9;
  background-color: #2FB297;
  border-radius: 50%;
  display: inline-block;
  font-size: 15px;
  color: #fff;
  text-align: center;
  font-weight: bold;
}

.od_dot_small {
  display: inline-block;
  height: 30px;
  width: 30px;
  line-height: 1.9;
  background-color: #4888C8;
  border-radius: 50%;
  display: inline-block;
  font-size: 15px;
  color: #fff;
  text-align: center;
  font-weight: bold;
}

.od_dot_small.disabled {
  background-color: lightgray;
  color: gray;
}

.os_dot_small.disabled {
  background-color: lightgray;
  color: gray;
}

.od_dot.disabled {
  background-color: lightgray;
  color: gray;
}

.os_dot.disabled {
  background-color: lightgray;
  color: gray;
}

.clean-link {
  text-decoration: none;
}


.od_dot.null {
  background-color: white; 
  color: gray; 
  border: 1px solid gray; 
}

.os_dot.null {
  background-color: white; 
  color: gray; 
  border: 1px solid gray; 
}

.clickable-col {
  cursor: pointer;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.clickable-row {
  cursor: pointer;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.fabs {
  --_viewport-margin: 2.5vmin;

  position: fixed;
  z-index: var(--layer-1);

  inset-block: auto var(--_viewport-margin);
  inset-inline: auto var(--_viewport-margin);
}

.btn-group-fab {
  position: fixed;
  width: 50px;
  height: auto;
  right: 20px; bottom: 20px;
}
.btn-group-fab div {
  position: relative; width: 100%;
  height: auto;
}
.btn-group-fab .btn {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  display: block;
  margin-bottom: 4px;
  width: 40px; height: 40px;
  margin: 4px auto;
}
.btn-group-fab .btn-main {
  width: 55px; height: 55px;
  right: 50%; margin-right: -25px;
  z-index: 9;
}
.btn-group-fab .btn-sub {
  bottom: 0; z-index: 8;
  right: 50%;
  margin-right: -20px;
  -webkit-transition: all 2s;
  transition: all 0.5s;
}
.btn-group-fab.active .btn-sub:nth-child(2) {
  bottom: 60px;
}
.btn-group-fab.active .btn-sub:nth-child(3) {
  bottom: 110px;
}
.btn-group-fab.active .btn-sub:nth-child(4) {
  bottom: 160px;
}
.btn-group-fab .btn-sub:nth-child(5) {
  bottom: 210px;
}

.table-ok {
  background-color: #4ba762 !important;
}

.table-danger-low {
  background-color: #ff4c4c !important;
}

.table-danger-hi {
  background-color: #ff00ff !important;
}

.table-warning-low {
  background-color: #ffff47 !important;
}

.table-warning-hi {
  background-color: #7c9cd6 !important;
}

.button-od {
  background-color: #4888C8 !important;
  color: #FFFFFF !important;
  /* Otros estilos de diseño, como bordes, márgenes, etc. */
}

.button-os {
  background-color: #2FB297 !important;
  color: #FFFFFF !important;
  /* Otros estilos de diseño, como bordes, márgenes, etc. */
}

.key-off {
  color: red !important;
}

/* CSS personalizado */
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.blinking {
  animation: blink 1s infinite; /* Ajusta la velocidad según tus preferencias */
}


.key-hide {
  opacity: 0; /* Establecer opacidad inicial a 0 */
  transition: opacity 0.3s ease; /* Agregar una transición de 0.3 segundos */
}

.key-hide:hover {
  opacity: 1; /* Establecer opacidad a 1 cuando el mouse está sobre el div */
}

.card-od {
  background-color: #4888C877 !important;
  color: #000;
}

.card-os {
  background-color: #2FB29777 !important;
  color: #000;
}

.eye-head-od {
  width: 50px !important;
  height: 50px !important;
  background-color: #4888C8 !important;
  color: #fff !important;
  border-radius: 50% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-weight: bold !important;
}

.eye-head-os {
  width: 50px !important;
  height: 50px !important;
  background-color: #2FB297 !important;
  color: #fff !important;
  border-radius: 50% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-weight: bold !important;
}

.cont-nav {
  /* background-color: #4a7588; */
  background-color: #1a2a2f;
  color: white;
}

.cont-nav:hover {
  color: #96e4fb; /* Cambia #ff5733 al color que desees */
}

/* Cambia el color de enlace cuando está activo (clicado) */
.cont-nav:active {
  color: #96e4fb; /* Cambia #007bff al color que desees */
}

.cont-nav:visited {
  color: white; /* Cambia #007bff al color que desees */
}

.panel-alpha {
  background-color: rgba(0,0,0,.0001) !important;
}

.copy-code {
  cursor: pointer;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.out-range{
  border-color: #ff0000; /* Cambia a tu color deseado */
  border-width: 2px;
}

/* CSS para la animación */
@keyframes blink-token {
  0% { background-color: #ffffff; }
  50% { background-color: #ce6f6f; }
  100% { background-color: #ffffff; }
}

.blink-token {
  animation: blink-token 1s infinite;
}

.static-spinner {
  width: 1rem; /* Tamaño del spinner */
  height: 1rem; /* Tamaño del spinner */
  background-color: #198754; /* Color azul de Bootstrap para el spinner */
  border-radius: 50%; /* Hace el círculo perfecto */
}

.static-spinner-none {
  width: 1rem; /* Tamaño del spinner */
  height: 1rem; /* Tamaño del spinner */
  background-color: #6c757d; /* Color azul de Bootstrap para el spinner */
  border-radius: 50%; /* Hace el círculo perfecto */
}