@charset "UTF-8";

body {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  height: 100vh;
  background-color: #f4feff;
}

thead,
tbody,
td,
th {
  border-color: inherit !important;
  border-style: hidden !important;
  border-width: 0 !important;
  border-spacing: 0 !important;
  font-family: "Manrope-Regular" !important;
}

td,
tr,
th {
  border-collapse: collapse;
}

table {
  border-collapse: collapse;
  -webkit-user-select: none;
  /* Safari */
  /* IE 10+ and Edge */
  -moz-user-select: text;
       user-select: text;
}

button {
  border: none;
  border-radius: 10px !important;
  background-color: transparent;
}

button:active {
  transform: scale(0.98);
  /* Scaling button to 0.98 to its original size */
  box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
  /* Lowering the shadow */
}

.button-su-stroke {
  border: 1.5px solid #0e1764;
  background-color: white;
  padding: 10px;
  width: "100%";
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #0e1764;
  font-family: "Manrope-SemiBold";
  font-size: 0.8em;
  text-align: "center";
  -webkit-text-decoration: "none";
          text-decoration: "none";
}

.button-su-stroke .active {
  background-color: #00e369;
  color: white;
}

.isDraggableTable {
  cursor: grab;
}

.onDragTR {
  cursor: move;
}

.defaultCursorTR {
  cursor: default;
}

.container-search-table {
  border-radius: 20px;
  border: 1.5px solid #E0E0E0;
  background-color: #f4feff;
  margin: 0px;
}

.input-search-table {
  background-color: transparent;
  padding: 10px;
  border: 0;
  font-family: "Manrope-Medium";
  font-size: 0.8em;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

h1 {
  font-family: "Manrope-Bold";
  font-size: 2.6em;
  letter-spacing: 0.1em !important;
}

h2 {
  font-family: "Manrope-Bold";
  font-size: 2.4em !important;
  letter-spacing: 0.1em !important;
}

h3 {
  font-family: "Manrope-Bold";
  font-size: 1.5em !important;
  letter-spacing: 0.1em !important;
}

h4 {
  font-family: "Manrope-Medium";
  font-size: 1.2em !important;
  letter-spacing: 0.1em !important;
}

.cardPressable:hover {
  cursor: pointer;
}

@font-face {
  font-family: "Manrope-Bold";
  src: url("/themes/react/assets/fonts/Manrope-Bold.ttf");
  font-style: medium;
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "Manrope-Light";
  src: url("/themes/react/assets/fonts/Manrope-Light.ttf");
  font-style: medium;
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "Manrope-ExtraBold";
  src: url("/themes/react/assets/fonts/Manrope-ExtraBold.ttf");
  font-style: medium;
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "Manrope-ExtraLight";
  src: url("/themes/react/assets/fonts/Manrope-ExtraLight.ttf");
  font-style: medium;
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "Manrope-Medium";
  src: url("/themes/react/assets/fonts/Manrope-Medium.ttf");
  font-style: medium;
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "Manrope-Regular";
  src: url("/themes/react/assets/fonts/Manrope-Regular.ttf");
  font-style: medium;
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "Manrope-SemiBold";
  src: url("/themes/react/assets/fonts/Manrope-SemiBold.ttf");
  font-style: medium;
  font-weight: 100;
  font-display: swap;
}

.button-pagination:hover {
  background-color: "#e7f7f8";
}

.img-qr {
  width: 200px;
  height: 200px;
}

.leyendX {
  rotate: 45deg;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  letter-spacing: 1px;
}

.pickeable:hover {
  cursor: pointer;
}

.container-overflow-x {
  width: 30em;
  overflow-x: auto;
  white-space: nowrap;
}

#map {
  height: 100%;
}

.img-cursor-pointer:hover {
  cursor: pointer;
}

/* Añade este CSS a tu archivo de estilos */

.card-custom {
  flex: 0 0 20%;
  /* 100% dividido por 5 cards */
  max-width: 20%;
}

@media (max-width: 1200px) {
  .card-custom {
    flex: 0 0 33.33%;
    /* Ajustar a 3 cards por fila en pantallas medianas */
    max-width: 33.33%;
  }
}

@media (max-width: 768px) {
  .card-custom {
    flex: 0 0 50%;
    /* Ajustar a 2 cards por fila en pantallas pequeñas */
    max-width: 50%;
  }
}

@media (max-width: 576px) {
  .card-custom {
    flex: 0 0 100%;
    /* Ajustar a 1 card por fila en pantallas extra pequeñas */
    max-width: 100%;
  }
}