: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 */
}
/* section {
  background-color: rgba(56, 56, 56, 0.726);
}  */

.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: rgb(3 152 158);
  border-color: rgb(3 152 158);
  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: rgba(3, 130, 134, 0.795) !important;
}

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

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

.card-header {
  background-color: rgba(3, 130, 134, 0.795) !important;

  color: white !important;
}

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

.btn-kuality {
  background-color: rgba(3, 130, 134, 0.795) !important;
  color: white !important;
  border-radius: 20px;
}


/*
Body viejo con img background
body {
  background-image: url("../imgs/background.jpg");
  background-image: url("../imgs/bannerTemporal.jpg"); 
  
  background-color: rgba(228, 212, 170, 0.44);
  
  background-color: rgb(255,255,255);

  background-size: contain;

  background-repeat: repeat;
  
} */

/* Body gradient */
body {
  background: linear-gradient(135deg,  rgba(22, 58, 32, 1),#000000);
}


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

.dt-buttons .dt-button {
  margin-left: 5px !important;
  color: #fff !important;
  background-color: rgb(3 152 158) !important;
  border-color: rgb(3 152 158) !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 {
  color: white !important;
  background-color: rgb(3 152 158) !important;
  background-image: none !important;
  border-color: rgb(3 152 158) !important;
  box-shadow: none !important;
  padding: 6px !important;
  margin-left: 10px !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(91, 91, 255);
}


    @font-face {
        font-family: "Varsity";
        font-style: normal;
        src: url("../../fonts/varsity_regular.otf");
    }

    .titulo {
        font-family: "Varsity";
    }