:root {
  --back1: url("../img/logoSAzulesc151-m.png");
  --back2: url("../img/logoSAzulesc151-m.webp");
  --back3: url("../img/151-m.png");
  --back4: url("../img/151-m.webp");  
}

body {
  background-color: lightblue;
  color: #15267c;
  color: rgb(30,30,80);
  background-image:   var(--back1), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)) ;
  background-image:   var(--back2), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)) ;
  background-repeat:   space, space ;  
  background-size: 370px, cover; /* Ensure image covers entire background */
  background-position: center, center ; /* Center the image */
}

.titulo {
  background-color: white;
  margin: 0 0 10px 0;
  padding: 15px 5px;
}
.screen0 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
}

.container1 {
  border: 2px solid gray;
  text-align: center;
  width: clamp(300px, 95%, 800px);
  background-color: rgba(200, 200, 200, 0.85);
  padding: 10px;
  -webkit-box-shadow: 21px 25px 40px -13px rgba(0, 0, 0, 1);
  -moz-box-shadow: 21px 25px 40px -13px rgba(0, 0, 0, 1);
  box-shadow: 21px 25px 40px -13px rgba(0, 0, 0, 1);
}

.container1 .titulo{
  background-image:  var(--back1);
  background-image:  var(--back2);
  background-repeat:  no-repeat;  
  background-size: 10%;
  background-position: left 2% bottom 10%;
}

.centrado {
  display: flex;
  justify-content: center;
}

.circle {
  border-radius: 50%;
  border-bottom: 3px solid gray;
  border-right: 2px solid gray;
  background-color: #e2dfd2;
  color: #900c3f;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
}

.bgred {
  background-color: #900c3f;
  color: #e2dfd2;
}

.txtAlignLeft {
  text-align: left;
}

.paso {
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.paso::after {
  content: "";
  position: relative;
  top: -100%;
  left: 15%;
  width: 70%;
  border: 1px solid white;
}

/* Inputs */

form#w0 input,
form#w0 select {
  border-radius: 16px;
  background-color: rgba(250, 250, 250, 0.8);
  border: 1px solid darkgray;
  font-weight: normal;
  transition-property: border-radius, background-color, border, font-weight;
  transition-delay: 0.5s, 1.25s, 0.75s;
  transition: 2s, 3s, 4s;
}

form#w0 input:focus,
form#w0 select:focus {
  border-radius: 5px;
  background-color: white;
  border: 3px solid darkblue;
  font-weight: bold;
}

/* Asistentes */

.fondo-text,
#tblAsistentes > thead:nth-child(1) {
  background-color: #1a1a1a99;
  padding: 10px 10px 5px;
  color: white;
  letter-spacing: 0.6px;
  line-height: 25px;
  text-align: left;
}
#tblAsistentes > thead:nth-child(1) a {
  color: white;
}
/*

width: clamp(800px, 100%, 1200px)
The hero image will cover 100% of the width of the container, but also be no smaller than 800 Pixels and no bigger than 1200 pixel
*/

#grid-inscritos #w0 {
  width: 100%;
  display: flex;
  justify-content: center;
}
#tblAsistentes {
  width: clamp(400px, 85%, 800px);
}

/*  hacer renglones strppes*/
#tblAsistentes > tbody > tr:nth-of-type(2n) td {
  background-color: #88878d;
  color: #172b49;
  font-size: 2rem;
}
#tblAsistentes > tbody > tr:nth-of-type(2n + 1) td {
  background-color: #12283d;
  color: #87888d;
  font-size: 2rem;
}

#tblAsistentes th {
  width: 36%; /* Adjust the width as needed */
}

#tblAsistentes th:last-child {
  width: 15%; /* Adjust the width as needed */
}

#tblAsistentes td {
  padding: 2px;
}

.grid-asistentes {
  padding: 20px;
}
td .btn-danger {
  color: black;
  padding: 4px;
}

#pgoCancelado {
  font-size: 2.5rem;
  padding: 15px;
  text-align: justify;
}



#errorRFC {
  display: none;
  color: #a94442;
}

#rfc:focus + #errorRFC {
  display: block;
}

#rfc:focus + #errorRFC.ok {
  color: green;
}


#errorRFC.nok {
  display: block;
}

#Grupo_RFC >label{
 color : white;

}


}