/* Componentes Gerais */
.componente-invisivel {
  display: none;
}

/* Input de Tempo */
.input-data-hora-UI {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.input-data-hora-UI input {
  text-align: center;
}

.contagem-produtos-importados {
  width: 50%;
  margin-left: 25%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  background-color: #f1f1f1;
  padding: 1em 0;
  border-radius: 5px;
  font-weight: 700;
  margin-bottom: 5px;
}

.input-disabled {
  background-color: #bbbbbb !important;
}

/* LOADING -------------------------------- */

.div-loading-full-screen-magna {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: center;
  align-items: center;
  z-index: 999;
  background-color: #ffffff66;
}

.div-loading-magna {
  width: 100%;
  padding: 1em;
  margin: 1em;
  min-height: 250px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: center;
  align-items: center;
}

.wrapper-loading-magna {
  width: 200px;
  height: 60px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.circle-loading-magna {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background-color: #000000;
  left: 15%;
  transform-origin: 50%;
  animation: circle-loading-magna 0.5s alternate infinite ease;
}

@keyframes circle-loading-magna {
  0% {
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.7);
  }
  40% {
    height: 20px;
    border-radius: 50%;
    transform: scaleX(1);
  }
  100% {
    top: 0%;
  }
}
.circle-loading-magna:nth-child(2) {
  left: 45%;
  animation-delay: 0.2s;
}
.circle-loading-magna:nth-child(3) {
  left: auto;
  right: 15%;
  animation-delay: 0.3s;
}
.shadow-loading-magna {
  width: 20px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 62px;
  transform-origin: 50%;
  z-index: -1;
  left: 15%;
  filter: blur(1px);
  animation: shadow 0.5s alternate infinite ease;
}

@keyframes shadow {
  0% {
    transform: scaleX(1.5);
  }
  40% {
    transform: scaleX(1);
    opacity: 0.7;
  }
  100% {
    transform: scaleX(0.2);
    opacity: 0.4;
  }
}
.shadow-loading-magna:nth-child(4) {
  left: 45%;
  animation-delay: 0.2s;
}
.shadow-loading-magna:nth-child(5) {
  left: auto;
  right: 15%;
  animation-delay: 0.3s;
}
.wrapper-loading-magna span {
  position: absolute;
  top: 75px;
  font-family: "Lato";
  font-size: 20px;
  letter-spacing: 12px;
  color: blue;
  left: 15%;
}

/* Loading Bar --------------------------- */
.ldBar {
  position: relative;
}
.ldBar.label-center > .ldBar-label {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-shadow: 0 0 3px #fff;
}
.ldBar-label:after {
  content: "%";
  display: inline;
}
.ldBar.no-percent .ldBar-label:after {
  content: "";
}

/* TABELAS ------------------------------- */
.dataTable {
  min-width: 100%;
}
.dataTables_wrapper,
.div-tabela-datatable {
  width: 100%;
  overflow-x: auto;
}
.dataTables_wrapper select,
.dataTables_wrapper input {
  font-size: 2em;
  line-height: 1em;
}

.dataTables_wrapper input {
  font-size: 1.8em !important;
  margin-bottom: 15px !important;
}

.dataTables_wrapper tr {
  transition: 0.15s;
}

.row-hover-datatable:hover {
  transform: scale(0.95);
  transition: 0.15s;
  cursor: pointer;
  background-color: #f1f1f1f1;
  border-radius: 5px;
}

@media only screen and (max-width: 700px) {
  .dataTables_wrapper .dataTables_length label,
  .dataTables_wrapper .dataTables_filter label {
    width: 100%;
  }

  .dataTables_wrapper select,
  .dataTables_wrapper input {
    width: 85%;
  }

  .div-comandos-superiores button {
    margin-bottom: 10px;
  }

  .div-imagem-produto img {
    max-width: 120px;
  }
}

.row-hover-datatable:hover {
  transform: scale(0.97);
  transition: 0.15s;
  cursor: pointer;
  background-color: #f1f1f1f1;
  border-radius: 5px;
}

/* MODAIS --------------------------------- */
.ui-dialog {
  width: 90vw !important;
  left: 5vw !important;
}

.jquery-modal {
  z-index: 900 !important;
}