:root {
  /* --klt-color: rgba(22, 58, 32, 1); */
  --klt-color: #7e1e66;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajusta el valor mínimo según el tamaño de tu card */
  grid-auto-rows: auto;
  gap: 20px; /* Espacio entre las cards */
}
.container-telas {
  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(40rem, 2fr));

  grid-auto-rows: auto;

  gap: 20px;
}

.container-pedidos {
  display: grid;

  grid-template-columns: 1.3fr 3fr;

  grid-auto-rows: auto;

  gap: 20px;
}

@media (max-width: 922px) {
  .container-telas {
    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));

    grid-auto-rows: auto;

    gap: 20px;
  }

  span {
    display: none;
  }
}

.btn-kuality {
  color: #fff;
  background-color:  var(--klt-color);
  border-color:  var(--klt-color);
  box-shadow: none;
  border-radius: 20px;
}

.btn-kuality:hover {
  color: #fff;
  background-color: var(--klt-color);
  border-color: var(--klt-color);
  box-shadow: 2px 2px #8888884b;
}

.btn-kuality:focus,
.btn-kuality.focus {
  color: #fff;

  background-color: var(--klt-color);

  border-color: var(--klt-color);

  box-shadow: 0 0 0 0 var(--klt-color);
}

.btn-kuality.warning {
  background-color: rgb(255, 202, 55) !important;
  color: black !important;
  border-color: rgb(255, 202, 55) !important;
}

.btn-kuality.success {
  border-color: green !important;
  background-color: white !important;
  color: green !important;
}

.btn-kuality.white {
  border-color: var(--klt-color) !important;
  background-color: white !important;
  color: var(--klt-color) !important;
}

.text-kuality {
  color: var(--klt-color);
}

.bg-kuality {
  background-color: var(--klt-color);

  color: white;
}

.container-login100 {
  width: 100%;

  min-height: 90vh;

  display: -webkit-box;

  display: -webkit-flex;

  display: -moz-box;

  display: -ms-flexbox;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  padding: 15px;

  /* background-color: #ebebeb; */
}

.wrap-login100 {
  width: 560px;

  background: #fff;

  border-radius: 10px;

  position: relative;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background-color: white;

  color:  var(--klt-color) !important;
}

.nav-pills .nav-link:not(.active):hover {
  color: white;
}

.nav-pills .nav-link:not(.active) {
  color: white;
}

.card-header {
  background-color:  var(--klt-color) !important;

  color: white !important;
}

/* .card-body {
  color: black !important;
} */

.btn-kuality {
  background-color:  var(--klt-color) !important;
  color: white !important;
  border-radius: 20px;
}

body {
  /* background-image: url("../imgs/background.png"); */
  background: linear-gradient(135deg,  rgba(22, 58, 32, 1),#000000);

  /* background-color: rgba(0, 0, 0, 1);

  background-size: contain;

  background-repeat: repeat; */
}

.dataTables_wrapper .dt-buttons {
  float: right !important;
}

.dt-buttons .dt-button {
  margin-left: 5px !important;
  color: #fff !important;
  background-color:  var(--klt-color) !important;
  border-color:  var(--klt-color) !important;
  box-shadow: none !important;
  border-radius: 20px !important;
}

.dt-buttons .dt-button:hover {
  color: #fff !important;
  background-color: var(--klt-color) !important;
  border-color: var(--klt-color) !important;
  box-shadow: 2px 2px #8888884b !important;
}

.dataTables_wrapper .dataTables_filter input{
  background-color: white !important;
  border-radius: 20px !important;
  border-color: var(--klt-color) !important;
  padding: 3 !important;
  text-align: center !important;
  outline-color: var(--klt-color) !important;
  outline-offset: 0px !important;
}



.paginate_button.current,
.paginate_button.previous,
.paginate_button.next,
.paginate_button.disabled {
  color: #fff !important;
  background-color:  var(--klt-color) !important;
  background-image: none !important;
  border-color:  var(--klt-color) !important;
  box-shadow: none !important;
  padding: 6px !important;
  margin-left: 10px !important;
  border-radius: 20px !important;
  
}

.single-line {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.select2-selection__choice {
  background-color: var(--klt-color) !important;
  color: white !important;
}


.btn-listado {
  color: #fff;
  box-shadow: none;
  border-radius: 20px;
}

.btn-listado:hover {
  color: #fff;
  background-color: var(--klt-color);
  border-color: var(--klt-color);
}

.btn-listado:focus,
.btn-listado.focus {
  color: #fff;

  background-color: var(--klt-color);

  border-color: var(--klt-color);

  box-shadow: 0 0 0 0 var(--klt-color);
}

.btn-listado.eliminar {
  background-color: rgb(165, 2, 2);
}

.btn-listado.entregar {
  background-color: rgb(22, 58, 32);
}