/* Estilos usados en páginas de mtv */
/* mtv developement */					  
.mtv-hide {
  background-color: aquamarine;
  /* display: none; */
}

div>.mtv-many {
  background-color: rgb(230, 235, 240);
  width: 100%;
  height: 200px;
  overflow: scroll;
  overflow-x: scroll;
  white-space: nowrap;
}

.mtv-title {
  width: 100%;
  height: 30px;
}

.text-description {
  width: 100%;
  height: 100px;
  overflow-y: auto;
  /* overflow-x: scroll; */
  white-space: wrap;
}
.mtv-selector {
  width: 100%;
  height: 30px;
}

select.mtv-many {
  /* background-color: #e6ebf0; */
  background-color: #ebeff5;
  width: 200px;
  height: 200px;
}

select.mtv-many>option.selected {
  background-color: #cecece;
}

input[type=number] {
  text-align: center;
  /* width: 60px; */
}

.number-short {
  text-align: center;
  width: 75px;
}

.no-content {
  opacity: 0.5;
}

.maplibregl-popup {
  max-width: 400px;
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

/* Target focusable elements inside popups */
.maplibregl-popup-content a:focus,
.maplibregl-popup-content button:focus,
.maplibregl-popup-content [tabindex="0"]:focus {
    outline: none !important; /* Remove the default blue outline */
    /* You can add your own subtle visual indicator here if desired,
       e.g., a custom box-shadow or a different border color: */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); /* Example: custom blue glow */
}

.maplibregl-popup-content.gymkhana-detail {
  /* max-width: 400px; */
  width: 200px;
}

.cpedit {
  background-color: white;
  border-style: solid;
  border-radius: 20px;
  border-width: thin;
  padding-top: 2px;
  height: 25px;
  min-width: 25px;
  max-width: 30px;
  text-align: center;
  line-height: 1;
}

.cpmarker {
  background-color: white;
  border-style: solid;
  padding: 1px 3px;
  border-radius: 20px;
  min-height: 30px;
  min-width: 30px;
  max-width: 90px;
  text-align: center;
}

.cpmarker-selected {
  background-color: orange;
  border-style: solid;
  padding: 1px 3px;
  border-radius: 20px;
  min-width: 30px;
  text-align: center;
}

.cpmarker[selected] {
  background-color: orange;
}				 


/* .point_popup {
  padding: 10px 30px;
  border-style: solid;
} */

.listButton {
  width: 100%;
}

.point_popup .maplibregl-popup-content {
  /* background-color: rgb(250, 236, 219); */
  padding: 0px 0px 5px 0px;
  text-align: center;
  /* border-radius: 5px; */
  border-style: solid;
  border-width: thin;
}

.point_popup .maplibregl-popup-tip {
  /* background-color: rgb(250, 236, 219); */
  /* z-index: 3; */
  display: none;
}

.point_popup .maplibregl-popup-close-button {
  /* background-color: rgb(250, 236, 219); */
  /* z-index: 3; */
  display: none;
}

/* errors */
.field-error {
  border-style: solid;
  border-color: red;
}

/* effects */

.transp40 {
  opacity: 0.4;
}

/* tables */

.table-container {
  width: 100%;
  min-width: 450px;
}

.mtv-table {
  /* table-layout: auto; */
  /* table-layout: fixed; */
  width: 100%;
  /* display: table; */
  border-collapse: collapse;
  min-width: 450px;
  /* border: 3px solid purple; */
  /* border: 1px solid #ddd; */
}

thead,
tbody {
  width: 100%;
  display: table;
  table-layout: fixed;
}

thead th {
  background-color: black;
  color: white;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table-scroll {
  /* max-height: 1000px; */
  overflow-y: auto;
}

.list-element[selected] {
  /* background-color: #f5c296; */
  background-color: rgb(254, 190, 190);
}

/* thead th:nth-child(1) { width: 5%; }
thead th:nth-child(2) { width: 25%; }
thead th:nth-child(3) { width: 50%; }
thead th:nth-child(4) { width: 10%; }
thead th:nth-child(5) { width: 10%; } */

tbody td {
  width: auto;
  /* Las celdas del tbody heredan el ancho de las cabeceras */
  /* text-align: center; */
  border: 1px solid #ddd;
}

tbody tr:nth-child(odd) {
  background-color: #f5efc9;
  /* color: #fff; */
}

tbody tr:nth-child(odd).out-of-date {
  background-color: rgb(254, 190, 190);
}

.mtv-table tr.out-of-date {
  background-color: rgb(254, 190, 190);
}								 

table,
th,
td {
  /* border: 1px solid #ddd; */
  text-align: center;
  padding: 5px;
}


/* tr, td {
  border: 1px solid #ddd;
  padding: 20px;
} */

ul.mtv-a {
  list-style-type: circle;
  /* margin: 0; */
  margin-left: 20px;
  padding: 0;
  /* list-style-position: inside; */
  list-style-position: outside;
}

.mtv-modal {
  height: 100%;
  text-align: center;
  min-width: 500px;
}

dialog::backdrop {
  /* background-color: black; */
  background: rgb(0 0 0 / 50%);
  opacity: 0.3;
}

.out-of-date {
  background-color: rgb(254, 190, 190);
  /* border: red; */
}

.time-input {
  width: 40px;
}

.input-40 {
  width: 40px;
  text-align: center;
}

.input-60 {
  width: 60px;
  text-align: center;
}

.input-80 {
  width: 80px;
  text-align: center;
}

.input-100 {
  width: 100px;
  text-align: center;
}

.input-120 {
  width: 120px;
  text-align: center;
}

/* tooltips */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #fff584;
  color: #000000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #fff584 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.label-in-line {
  /* Other styling... */
  text-align: right;
  clear: both;
  float: left;
  margin-right: 15px;
}


/* div.time-input::before {
  content: url(localhost://static/web/assets/ux/cart.svg);
}​ */

/* For screens smaller than 768px */
@media (max-width: 768px) {
  .lang-section {
    background-color: #37383a;
    color: white;
    max-width: 100%;
  }

  .lang-section-disabled {
    background-color: #bebfc3;
    color: white;
    width: 100%;
  }

  .top-section {
    background-color: #37383a;
    color: white;
    /* max-width: 100%; */
    width: 100%;
  }

  .top-section-disabled {
    background-color: #bebfc3;
    color: white;
    width: 100%;
  }

  .wordpairs {
    width: 100%;
  }
}

/* For screens 768px and larger */
@media (min-width: 768px) {
  .lang-section {
    background-color: #37383a;
    color: white;
    max-width: 66%;
  }

  .lang-section-disabled {
    background-color: #bebfc3;
    color: white;
    width: 66%;
  }

  .top-section {
    background-color: #37383a;
    color: white;
    max-width: 100%;
  }

  .top-section-disabled {
    background-color: #bebfc3;
    color: white;
    width: 100%;
  }

  .wordpairs {
    width: 66%;
  }
}

.cpoint-header {
  width: 100%;
  height: 25px; 
  background-color: #eeddcc;
  text-align: center;
  margin-top: 2px;
  /* margin-bottom: 1px; */
}

.cpoint-challenge {
  width: 100%;
  height: 25px; 
  background-color: #eeeedd;
  text-align: center;
  align-items: center;
  /* margin-top: 1px; */
  margin-bottom: 2px;
}
/* 
mejor usamos los de bulma
.navbar-item {
  width: 120px;
  padding: 2px;
}

.navbar-item .button {
  width: 100%;
}

.navbar-burger span {
  height: 2px;
} */


/* Icons */

.clr-i-alert {
  color: red;
}