/* Colores */
:root {
  --gris-oscuro-primario: #181a1e;
  --gris-oscuro-secundario: #202528;
  --gris-claro-primario: #282d36;
  --azul-no-prioritarios: #3753bf;
  --verde-primario: #1bbf89;
  --verde-secundario: #0e6347;
}

body {
  background-color: var(--gris-oscuro-primario);
}

video {
  outline: none !important;
}
#canvas-container {
  position: relative;
}
#canvas-container canvas {
  position: absolute;
  top: 0;
  z-index: 1000000000;
  background: #000;
}
.img-mantenimiento {
  width: 320px;
  height: 240px;
}
.video-individual {
  min-height: 300px;
  width: 100%;
  max-height: 550px;
}
/* Scrolling */
.obj-scroll-300px {
  height: 300px;
  overflow-y: scroll;
}

.reporto--mantenimiento {
  border: 0 !important;
  border-left: 5px solid #1bbf89 !important;
}

.noReporto--mantenimiento {
  border: 0 !important;
  border-left: 5px solid #c2183a !important;
}

/* Listas Submenus Savetrack */
.savetrackDark-submenu {
  background-color: var(--gris-oscuro-secundario);
  border-radius: 0;
  border: 1px solid #d8d8d8;
  font-size: 1rem;
  color: #fff;
  padding: 10px 0px;
  width: 100%;
}

.savetrackDark-submenu a {
  display: block;
  width: 100%;
  padding: 0px 20px;
}

.savetrackDark-submenu a:hover {
  background-color: #fff;
  color: var(--gris-oscuro-secundario);
  cursor: pointer;
}

/* BTNS */
.btn-verde-primario {
  background-color: var(--verde-primario);
  color: #fff;
}

.btn-no-prioritario {
  background-color: var(--azul-no-prioritarios);
  color: #fff;
}

.btn-no-prioritario:hover {
  color: #fff;
}

/* TABLAS SCROLL */
.overflowXhidden {
  overflow-x: hidden;
}

.tbl-scrolleable {
  max-height: 300px;
  overflow-y: scroll;
}

.tbl-scrolleable--sm {
  max-height: 450px;
}

.tbl-scrolleable--md {
  max-height: 600px;
}

.tbl-scrolleable--lg {
  max-height: 1200px;
}

/* TAMAÑOS FUENTE */
.savetrackFont {
  font-size: 0.7rem;
}

/* GRAFICOS */
.grafico {
  width: 400px;
  height: 400px;
}

/* HEADER */

/* MiniHeader-Resumen(proximamente) */

.main-header {
  margin: 0px 0px 20px 0px;
}

.main-header__icono {
  font-size: 70px;
  -webkit-animation-name: ColorNaranjaDinamico;
  animation-name: ColorNaranjaDinamico;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@-webkit-keyframes ColorNaranjaDinamico {
  0% {
    color: orangered;
  }

  50% {
    color: #f6a821;
  }

  100% {
    color: orangered;
  }
}

@keyframes ColorNaranjaDinamico {
  0% {
    color: orangered;
  }

  50% {
    color: #f6a821;
  }

  100% {
    color: orangered;
  }
}

.main-header__titulo h3 {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 11px;
}

.main-header__titulo p {
  font-size: 1rem;
}

.header {
  background: #191b20;
  height: 60px;
}

.header--fullscreen {
  background: transparent;
}

.fix-w140 {
  width: 140px !important;
  min-width: 140px !important;
}

.header-logo {
  height: 100%;
  width: 140px !important;
  display: flex;
  justify-content: center;
}

.header-logo img {
  height: 60px;
}

.header-logo__texto {
  color: #fff;
  font-family: SavetrackBold;
}

.header-logo:hover img {
  -webkit-animation-name: luzDinamica;
  animation-name: luzDinamica;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.header-logo__texto p:nth-child(1) {
  font-size: 1.5rem;
}

.header-logo__texto p:nth-child(2) {
  display: none;
  font-size: 0.8rem;
  -webkit-animation-name: Animation__footer;
  animation-name: Animation__footer;
  -webkit-animation-duration: 300ms;
  animation-duration: 300ms;
  -webkit-animation-iteration-count: initial;
  animation-iteration-count: initial;
}

.header-logo :hover p:nth-child(2) {
  display: block;
}

.toggleMenuSidebar {
  height: 100%;
}

.toggleMenuSidebar i {
  display: block;
  font-size: 3rem;
}

.modal-editar-usuario .modal-content .modal-body input,
.modal-editar-usuario .modal-content .modal-body label {
  font-family: Arial, Helvetica, sans-serif;
}

/* SIDEBAR y MAIN CONTENT*/
.cont-main-sidebar {
  width: 140px;
}

.main-sidebar {
  background-color: var(--gris-oscuro-primario);
  position: fixed;
  padding-top: 120px;
  height: 100vh;
  width: 140px;
}

.main-sidebar__submenu {
  width: 100%;
  text-align: left;
  padding-left: 20px;
}

.main-sidebar__item {
  transition: 300ms all;
  width: 100%;
}

.main-sidebar__item:hover {
  cursor: pointer;
  background: orangered;
}

.main-sidebar__item a {
  font-size: 0.85rem;
}

.main-sidebar__item .nav-link {
  padding-right: 0rem;
}

.main-monitoreo,
.main-administracion,
.main-mantenimiento {
  display: none;
}
.savetrackInputDark-text::placeholder {
  color: #fff;
}
.savetrackInputDark-text,
.savetrackInputDark-text:disabled,
.savetrackInputDark-select,
.savetrackInputDark-select:disabled {
  background-color: var(--gris-oscuro-primario);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #222;
  color: #fff;
  border-radius: 0;
  box-shadow: none;
  transition: 0.15s all;
}

.savetrackInputDark-select:focus,
.savetrackInputDark-select:active,
.savetrackInputDark-select:focus + .input-group-addon,
.savetrackInputDark-select:active + .input-group-addon,
.savetrackInputDark-text:focus,
.savetrackInputDark-text:active,
.savetrackInputDark-text:focus + .input-group-addon,
.savetrackInputDark-text:active + .input-group-addon {
  box-shadow: none;
  background-color: #1b1c22;
  color: #fff;
  border-bottom: 1px solid orangered;
}

/* En caso de tener icono */
.savetrackInputDark-text + .input-group-prepend .input-group-text {
  transition: 0.15s all;
  border: none;
  background: transparent;
  color: #fff;
  border-bottom: 1px solid #222;
}

.savetrackInputDark-text:focus + .input-group-prepend .input-group-text {
  box-shadow: none;
  background: #1b1c22;
  color: #fff;
  border: none;
  border-bottom: 1px solid orangered;
}

/* Submenu de botones dark */

.savetrackDark-dropdown {
}

.savetrackDark-dropdown .dropdown-menu {
  background-color: var(--gris-oscuro-secundario);
  border: 1px solid #d8d8d8;
  color: #fff;
  font-size: 0.8rem;
}

.savetrackDark-dropdown .dropdown-menu a:hover,
.savetrackDark-dropdown .dropdown-menu li:hover {
  color: var(--gris-oscuro-secundario);
  cursor: pointer;
}

/* Headers de tablas fijos */
.tbl-headerfijo th {
  position: -webkit-sticky;
  /* required for Safari*/
  position: sticky;
  top: 0;
  background-color: #1b1c22;
  z-index: 100;
}

/* TABLAS TAMAÑOS FUENTES */
.tbl-font-large {
  font-size: 1.1rem;
}

.tbl-font-medium {
  font-size: 0.8rem;
}

.tbl-font-small {
  font-size: 0.5rem;
}

/* menu responsive acordeon */
.main-menuresponsive {
  background: #191b20;
}

.main-menuresponsive__items {
  display: block;
  background: #121316;
  color: #fff;
  padding: 5px 0px;
  transition: 200ms all;
  border-radius: 0;
}

.main-menuresponsive__items:hover {
  background: #1b1d21;
}

.main-menuresponsive__items--subitems {
  background: #191b20;
}

.main-menuresponsive__items--subitems:hover {
  background: #343843;
  color: #fff;
}

/* BOTON IR ARRIBA */
.go-top button {
  width: 40px;
  height: 40px;
  -webkit-animation: aparecerOpacity;
  animation: aparecerOpacity;
  -webkit-animation-iteration-count: initial;
  animation-iteration-count: initial;
  -webkit-animation-duration: 300ms;
  animation-duration: 300ms;
  display: none;
  outline: none;
  background-color: transparent;
  transition: 300ms all;
}

.go-top button:hover {
  background-color: #343a40;
}

/* Mis cards(cartas) */
.card-savetrack {
  border: none;
  background: var(--gris-oscuro-secundario);
  border-radius: 0.8rem;
  box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
  width: 100%;
  transition: 100ms all;
  padding: 0.9rem;
}
.card-savetrack:hover {
  border-color: #fff;
}
.card-savetrack .title-sm {
  font-size: 1rem;
}

/* Modificaciones segun color */
/* .card-savetrack--prioritarios {
  background-color: #ce2435;
} */
.card-savetrack--prioritarios {
  background: #d31027; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    #ce2435,
    #d31027
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    #ce2435,
    #d31027
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.card-savetrack--prioritarios .card-footer a {
  color: #8c0b18;
}

/* .card-savetrack--noPrioritarios {
  background-color: #3753bf;
} */
.card-savetrack--noPrioritarios {
  background: #3753bf; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #2b32b2,
    #3753bf
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #2b32b2,
    #3753bf
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.card-savetrack--noPrioritarios .card-footer a {
  color: #182760;
}

.card-savetrack--verde-primario {
  background-color: var(--verde-primario);
}

.card-savetrack--verde-primario .card-footer a {
  color: var(--verde-secundario);
}

.card-savetrack--verde-primario .card-title--contadores--historial {
  color: var(--verde-secundario);
}

.card-savetrack--verde-primario .card-title--contadores--mantenimiento {
  color: var(--verde-secundario);
}
.card-savetrack--contadores .card-body {
  font-weight: bold;
}
.card-savetrack--contadores .card-body .card-title--no-contador {
  font-size: 1.2rem;
  font-weight: bold;
}
.card-savetrack--contadores .card-body .card-title--contadores {
  font-size: 2rem;
  font-weight: bold;
}
.card-savetrack--contadores .card-footer {
  font-size: 1.1rem;
  font-weight: bold;
  padding: 0;
  padding-top: 5px;
}
/* Miscelaneas */
.td-opciones-hover {
  display: none;
}
.tr-opciones-hover:hover .td-opciones-hover {
  display: inline-block;
}
.text_invalido {
  border: 1px solid red;
}
.fixFloatsGon {
  float: none;
  clear: both;
}

.titulo-pagina {
  font-size: 1rem;
  font-family: arial;
  text-decoration: none !important;
}

.bandera_idioma {
  display: block;
  width: 100%;
  height: 109px;
  overflow: hidden;
}

.bandera_idioma_activa {
  border: 2px solid #fc6a0a;
}

.bandera_idioma img {
  transition: 300ms all;
}

.bandera_idioma:hover {
  background-color: #282b31;
}

.bandera_idioma:hover .sombra_savetrack {
  opacity: 1;
}

.bandera_idioma:hover img {
  transform: scale(1.05);
}

.sombra_savetrack {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 0px 0px 5px #000000;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 300ms all;
}

/* Loading */
.main-loading {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.main-loading-300px {
  height: 300px;
}
.dn-loading {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sk-folding-cube {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
  transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  transform: scale(1.1);
}

.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
  animation: sk-foldCubeAngle 2.4s infinite linear both;
  transform-origin: 100% 100%;
}

.sk-folding-cube .sk-cube2 {
  transform: scale(1.1) rotateZ(90deg);
}

.sk-folding-cube .sk-cube3 {
  transform: scale(1.1) rotateZ(180deg);
}

.sk-folding-cube .sk-cube4 {
  transform: scale(1.1) rotateZ(270deg);
}

.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

@-webkit-keyframes sk-foldCubeAngle {
  0%,
  10% {
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }

  25%,
  75% {
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }

  90%,
  100% {
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

@keyframes sk-foldCubeAngle {
  0%,
  10% {
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }

  25%,
  75% {
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }

  90%,
  100% {
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

/* Status de mantenimiento */
.color_status_low {
  color: #db0f0f;
}
.color_status_medium {
  color: #f78031;
}
.color_status_medium_high {
  color: #f5d832;
}
.color_status_high {
  color: #1bbf89;
}

/* ESTRUCTURAL: Scoring animado y no animado*/
.tbl-scoring-fixed td,
.tbl-scoring-fixed th,
.tbl-scoring-animated td,
.tbl-scoring-animated th {
  vertical-align: middle;
  padding: 2px;
  border: none;
}

.tbl-scoring-fixed span {
  display: none;
}

.tbl-scoring-animated thead tr:nth-child(1) th,
.tbl-scoring-animated thead tr:nth-child(2) th,
.tbl-scoring-fixed thead tr:nth-child(1) th,
.tbl-scoring-fixed thead tr:nth-child(2) th {
  border: none;
}

.tbl-scoring-animated tbody tr td a,
.tbl-scoring-fixed tbody tr td a {
  color: #fff;
}

.tbl-scoring-animated tbody tr:hover .score-indicator-cuadrado {
  width: 100%;
}

/* MOSTRAR SCORING */
.tbl-scoring-animated tbody tr .score-indicator-cuadrado span {
  display: none;
}

.tbl-scoring-animated tbody tr:hover .score-indicator-cuadrado span {
  display: block;
}

.tbl-scoring-animated tbody tr:hover .score-indicator--green {
  background-color: #128560;
}

.tbl-scoring-animated tbody tr:hover .score-indicator--yellow {
  background-color: #c47d09;
}

.tbl-scrolleable--prioritarios {
  max-height: 400px;
}

.tbl-scrolleable--noPrioritarios {
  max-height: 600px;
}

.tbl-scrolleable--offline {
  max-height: 800px;
}

.cursor-pointer {
  cursor: pointer;
}

.noDisponible {
  position: absolute;
  width: 100%;
  height: 232px;
  background: rgba(18, 19, 22, 0.8);
  z-index: 10;
}

.filaSeleccionada {
  background-color: red !important;
}

.suggestions {
  width: 100%;
  position: relative;
}

.suggestions-ul {
  background-color: var(--gris-oscuro-secundario);
  color: #fff;
  width: 100%;
  list-style: none;
  position: absolute;
  z-index: 1200;
  max-height: 300px;
  overflow-y: scroll;
  padding: 0;
}

.suggestions-ul div {
  padding: 5px 0px 5px 15px;
}

.suggestions-ul div:hover {
  background-color: #fff;
  color: var(--gris-oscuro-secundario);
}

.suggestions-close {
  display: none;
  cursor: pointer;
  color: #fff;
  position: absolute;
  z-index: 100;
  width: 15px;
  height: 15px;
  top: 12%;
  right: 10px;
}

/* MAPAS */
.mapa-md {
  width: 400px;
  height: 400px;
}

.mapa-lg {
  width: 600px;
  height: 800px;
}

/* CHECKBOX PERSONALIZADO */
/* Clases para los contenedores de Radio y Checkbox*/
.content-input {
  margin-bottom: 15px;
  cursor: pointer;
}

.content-input {
  position: relative;
  margin-bottom: 30px;
  padding: 5px 0 5px 60px;
  display: block;
}

/* 
La propiedadd appearance da un aspecto standard a un elemento.
Por ejemplo: appearance: button
Como vamos a personalizar nuestros elemento añadimos el valor none
 */
.content-input input,
.content-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.content-input i,
.content-input i:before {
  transition: all 0.25s ease;
}

/* 
Ocultamos nuestros inputs.
Con opacity 0. Si utilizamos visibility:hidden o display:none;
no funcionarían
*/
.content-input input {
  opacity: 0;
  position: absolute;
  right: 0;
}

/*
Propiedades para cualquier el elmento i después de un input
dentro de la capa .content-input
*/
.content-input input + i {
  background: transparent;
  border: 2px solid rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 0;
  top: 0;
}

/*
Propiedades para el checkbox
*/
.content-input input[type='checkbox'] + i {
  width: 44px;
  height: 22px;
  border-radius: 15px;
}

/*
Propiedades para radio
*/
.content-input input[type='radio'] + i {
  height: 30px;
  width: 30px;
  border-radius: 100%;
  left: 15px;
}

/*
Creamos el círculo que aparece encima de los checkbox
con la etqieta before. Importante aunque no haya contenido
debemos poner definir este valor.
*/
.content-input input[type='checkbox'] + i:before {
  content: '';
  /* No hay contenido */
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  box-shadow: 3px 0 3px 0 rgba(0, 0, 0, 0.2);
}

.content-input input[type='checkbox'] + i:after {
  content: 'ON';
  position: absolute;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  top: 4px;
  left: 4px;
  opacity: 0;
  transition: all 0.25s ease 0.25s;
}

/*
Creamos el cículo que se mostrará cuando hagamos click 
en cualquier radio y lo ocultamos con opacity 0
*/
.content-input input[type='radio'] + i:before {
  content: '';
  display: block;
  height: 18px;
  width: 18px;
  background: red;
  border-radius: 100%;
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 4px;
  background: #2ac176;
  transition: all 0.25s ease;
  transform: scale(0);
  opacity: 0;
  /* Lo ocultamos*/
}

.content-input:hover i {
  background: #b1e8cd;
}

/*
Con :checked definimos los valores css cuando un input
como radio o checkbox está checheado
*/
.content-input input[type='checkbox']:checked + i {
  background: #2ac176;
}

.content-input input[type='checkbox']:checked + i:before {
  left: 22px;
  box-shadow: 3px 0 -3px 0 rgba(0, 0, 0, 0.2);
}

.content-input input[type='checkbox']:checked + i:after {
  opacity: 1;
}

.content-input input[type='radio']:checked + i:before {
  transform: scale(1);
  opacity: 1;
}
#audio {
  display: none;
}
.btns-config {
  color: #fff;
  border: none;
  outline: none;
  font-size: 1.2rem;
}
.btns-config:hover {
  color: #fc6a0a;
}
.content-main {
  padding-top: 80px;
  color: #ffffff;
}
.img-admin {
  width: 240px;
}
.photos-admin {
  max-height: 700px;
  overflow-y: scroll;
}