@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@font-face {
  font-family: 'DIN';
  src: url('../fonts/DIN-MediumAlternate.woff2') format('woff2'),
      url('../fonts/DIN-MediumAlternate.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DIN Alternate';
  src: url('../fonts/DINAlternate-Bold.woff2') format('woff2'),
      url('../fonts/DINAlternate-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DIN Condensed';
  src: url('../fonts/DINCondensed-Bold.woff2') format('woff2'),
      url('../fonts/DINCondensed-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

html, body {
  width: 100%; 
  height: 100%; 
  font-family: 'DIN', sans-serif; 
  top: 0 !important;
}

input:focus, select:focus {outline: 0}

.container {max-width: 1140px;}


/*--------------------------------Backgrounds---------------------------------*/

.bg-img-01 {
  background-image: url(../images/bg_mv_img_01.png);
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center; 
}

.bg-img-02 {
  background-image: url(../images/bg_mv_img_01.png);
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center; 
}

.bg-img-03 {
  background-image: url(../images/bg_mv_img_01.png);
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center; 
}

.bg-img-04 {
  background-image: url(../images/bg_mv_img_02.png);
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center; 
}

.bg-no-img {
  position: relative;
  min-height: 100vh;
}

.bg-no-img::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 80px;
  background-color: #A53533;
  z-index: -1;
}

.bg-gray {
  background-color: #EDECEC;
}

.bg-white {
  background-color: #ffffff;
}

.bg-img-balon {
  position: absolute;
  top: -80px;
  left: -80px;
  width: 250px !important;
  height: 250px !important;
  background-image: url(../images/balon.png);
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center; 
  z-index: 1;
}

@media (min-width: 768px) {
  .bg-img-01 {
    background-image: url(../images/bg_pc_img_01.png);
  }

  .bg-img-02 {
    background-image: url(../images/bg_pc_img_02.png);
  }

  .bg-img-03 {
    background-image: url(../images/bg_pc_img_03.png);
  }

  .bg-img-04 {
    background-image: url(../images/bg_pc_img_04.png);
  }

  .bg-img-balon {
    position: absolute;
    top: -80px;
    left: -80px;
    width: 350px !important;
    height: 350px !important;
    background-image: url(../images/balon.png);
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    z-index: 1;
  }
}

/*----------------------------------------------------------------------------*/


/*-----------------------------------Página-----------------------------------*/

.centered-page {
  width: 100%; 
  padding: 60px 0; 
  min-height: 100vh;  
  display: flex; 
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.centered-page > div {width: 100%;}

.title-page {
  width: 100%; 
  padding: 0 0 60px 0; 
  min-height: 100vh;  
  display: flex; 
  flex-direction: column;
}

.page-flex {
  height: 100%;
  flex: 1;
  display: flex; 
  align-items: center;
  justify-content: center;
  padding: 0 0 40px 0;
}

.page-flex .col-12 {
  text-align: center;
}

.page-logo-area {
  text-align: center;
  margin: 0 auto;
  width: 80%;
  max-width: 350px;
}

.page-logo-area img {
  /* max-width: 400px; */
}

.page-title-area {
  min-height: 12vh;
  width: 100%;
  text-align: center;
  background-color: #F3F3F3;
  color: #000000;
  display: flex;
  align-items: end;
  justify-content: center;
}

.page-footer-area {
  min-height: 20vh;
  width: 100%;
  text-align: center;
  background-color: #F3F3F3;
  color: #000000;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .centered-page {
    padding: 70px 0; 
  }

  .title-page {
    padding: 0 0 80px 0; 
  }

  .page-logo-area {
    width: 100%;
  }
}

/*----------------------------------------------------------------------------*/


/*----------------------------------Botones-----------------------------------*/

.all-buttons {
  max-width: 260px; 
  margin: 0 auto;
}

.all-buttons ul {
  margin: 30px 0 0; 
  list-style: none; 
  padding: 0; 
  display: flex; 
  flex-direction: column; 
  gap: 15px;
}

.btn-square {
  width: 100%; 
  display: inline-flex; 
  justify-content: flex-start; 
  background: transparent; 
  border-radius: 12px; 
  font-size: 16px; 
  color: #000000; 
  min-width: 260px; 
  min-height: 45px; 
  align-items: center; 
  text-decoration: none; 
  padding: 0 25px; 
  gap: 20px; 
  text-align: left; 
  line-height: normal; 
  cursor: pointer; 
  border: 1px solid #000000; 
  transition-duration: 0.3s
}

.btn-square:hover, .btn-square.active {
  background: #C43C2C; 
  border-color: #ffffff; 
  color: #ffffff
}

.btn-square img {
  max-width: 25px;
}

.btn-salir {
  background: #000000;
  border-radius: 20px;
  min-width: 260px;
  min-height: 45px;
  border: none;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto 0;
  text-decoration: none;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  transition-duration: 0.3s;
}

.btn-salir:hover {
  background: #AEAFAF;
  color: #000000;
}

.group-buttons .row {
  gap: 1rem 0;
}

.group-btn .g-btn {
  width: 100%; 
  border: 1px solid #000; 
  display: inline-flex; 
  border-radius: 8px; 
  justify-content: center; 
  color: #000; 
  text-decoration: none; 
  padding: 4px; 
  font-size: 14px; 
  font-weight: 500; 
  cursor: pointer; 
  transition-duration: .3s;
}

.group-btn .g-btn:hover, .group-btn .g-btn.active {background: #C43C2C; border-color: #ffffff; color: #ffffff;}

.rounded-5 {
  border-radius: 1.5rem;
}

@media (min-width: 768px) {
  .all-buttons {
    max-width: 280px; 
  }

  .btn-square {
    min-width: 280px; 
    min-height: 45px; 
    font-size: 18px;
  }

	.btn-square img {
    max-width: 28px;
  }

  .btn-salir {
    min-width: 280px; 
    min-height: 45px; 
    font-size: 18px;
  }

  .score-exclamation {
    padding: 20px 0;
  }

  .score-exclamation p:not(.score-exclamation .exc-icon p) {
    font-size: 22px;
  }
}

/*----------------------------------------------------------------------------*/


/*----------------------------------Toast--------------------------------------*/

/* El contenedor fijo + padding no debe capturar clics (p. ej. sobre el menú móvil). */
.toast-container.position-fixed {
  pointer-events: none;
  z-index: 9999;
}

.toast-container.position-fixed .toast {
  pointer-events: auto;
}

.toast-header {
  background: #D9D9D9;
  color: #000000;
  justify-content: end;
}

.toast-body {
  background: #D9D9D9;
  color: #000000;
}

#toast-message {
  font-size: 18px;
  font-weight: 500;
  color: #000000;
}

/*----------------------------------------------------------------------------*/


/*----------------------------------Tabs--------------------------------------*/

/* Mobile-first: 2 filas, 2 columnas visibles, scroll horizontal con flechas */

.tab-scroll-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.tab {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 10px) / 2);
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.tab::-webkit-scrollbar {
  display: none;
}

.tab .tablinks {
  background: #D9D9D9;
  font-size: 14px;
  border-radius: 8px;
  border-color: #fff;
  border-width: 1px;
  padding: 2px 10px;
  color: #000000;
  font-weight: 500;
  min-width: 0;
  width: 100%;
  transition-duration: .3s;
}

.tab .tablinks:hover {
  background: #C43C2C;
  border-color: #ffffff;
  color: #ffffff;
}

.tabactive {
  background: #C43C2C !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.tab-scroll-btn {
  display: inline-flex;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #ffffff;
  background: #000;
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: opacity .2s, transform .15s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.tab-scroll-btn:hover:not(:disabled) {
  transform: scale(1.05);
}

.tab-scroll-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (min-width: 768px) {
  .tab {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    overflow: visible;
  }

  .tab .tablinks {
    font-size: 16px;
    min-width: 15.666667%;
    width: auto;
    min-height: 35px;
  }

  .tab-scroll-btn {
    display: none;
  }
}

/*----------------------------------------------------------------------------*/


/*---------------------------------Exclamación--------------------------------*/

.score-exclamation {
  padding: 50px 0; 
  position: relative; 
  margin: 0 0 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-exclamation .exc-icon {
  position: absolute; 
  right: 5%;
  top: 5%;
}

.score-exclamation .exc-icon img {max-width: 25px;}

.score-exclamation .note {
  position: absolute; 
  top: -130px; 
  background: #868798; 
  border-radius: 28px; 
  font-size: 14px; 
  min-width: 250px; 
  padding: 20px 10px; 
  left: -200px; 
  opacity: 0; 
  visibility: hidden;
}

.score-exclamation .note p {font-size: 12px; color: #fff;  font-weight: normal;}

.score-exclamation .exc-icon:hover .note {opacity: 1; visibility: visible;}

@media (min-width: 768px) {
  .score-exclamation {
    padding: 20px 0;
    margin: 0 0 20px 0;
  }

  .score-exclamation .exc-icon {
    right: 10%;
    top: unset;
  }

  .score-exclamation p:not(.score-exclamation .exc-icon p) {
    font-size: 22px;
  }
}

/*----------------------------------------------------------------------------*/


/*----------------------------------Titulos-----------------------------------*/

h1 {
  font-size: 75px; 
  font-weight: 800; 
  color: #000000;
}

h2 {
  font-size: 40px; 
  font-weight: 800; 
  color: #000000;
}

.icon-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

h3 {
  font-size: 24px; 
  font-weight: 800; 
  color: #000000;
}

h4 {
  font-size: 16px; 
  font-weight: 600; 
  color: #000000;
}

.head-c p {
  color: #000; 
  font-size: 1.1rem;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 250px;
}

.bg-circle-g {
  width: 100px; 
  height: 100px; 
  justify-content: center; 
  display: flex; 
  align-items: center; 
  border-radius: 100%;
}

.bg-circle.nombre .bg-circle-g {background: #ffffff; border: 2px solid #000000;}
.bg-circle.puntos .bg-circle-g {background: #C43C2C;}
.bg-circle.puesto .bg-circle-g {background: #ffffff; border: 2px solid #C43C2C;}

.bg-circle {display: flex; flex-direction: column; align-items: center;}

.bg-circle-g p {
  font-weight: bold; 
  font-size: 35px; 
  margin: 0;
}

@media (min-width: 768px) {
  .icon-title {
    display: inline-flex;
    flex-direction: row;
  }
}

/*----------------------------------------------------------------------------*/


/*----------------------------------Banderas----------------------------------*/

.country-flag {
  max-width: 60px;
}

.country-flagtime {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; 
  align-items: start; 
  text-align: center;
  padding: 20px 0;
  row-gap: 10px;
}

.country-flagtime div {
  width: 50%;
}

@media (min-width: 768px) {
  .country-flagtime div {
    width: 25%;
  }
}

/*----------------------------------------------------------------------------*/


/*--------------------------------Formularios---------------------------------*/

.square-border {
  border: 1px solid #000000; 
  border-radius: 10px; 
  padding: 20px 40px 40px 40px; 
  max-width: 90%; 
  margin: 0 auto;	
}

.form-cont .form-element {
  margin: 0 0 20px 0;
}

.form-element select {
  -webkit-appearance: none; 
  -moz-appearance: none; 
  border: none; 
  cursor: pointer; 
  border-radius: 8px; 
  padding: 5px 20px; 
  color: #000000; 
  min-width: 180px; 
  text-align: center; 
  width: 100%;
}

.form-element input[type="text"] {
  min-width: 180px; 
  max-width: 180px; 
  border-radius: 8px; 
  padding: 5px 20px; 
  text-align: center; 
  color: #000000; 
}

.middle-top {margin: -45px 0 20px 0;}

.middle-bottom {margin: 0 0 -60px 0;}

.form-save button {
  background: #D3D3D3;
  color: #000000; 
  font-size: 16px; 
  height: auto; 
  line-height: normal; 
  min-height: unset; 
  display: inline-block; 
  border: 1px solid transparent; 
  padding: 10px 40px; 
  border-radius: 15px;
  font-weight: 500;
  position: relative;
}

.form-save button.btn-border {
  border: 1px solid #000000;
} 

.form-save button:hover {
  background: #808080;
  color: #fff;
}

#partidoModalElimin {
  z-index: 1200;
}

#partidoModalElimin .modal-content {
  position: relative;
}

#partidoModalElimin .modal-close-elimin {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: none;
  color: #000000;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

#partidoModalElimin .goal-flex,
#partidoModalElimin .form-save {
  display: flex;
  justify-content: center;
  width: 100%;
}

body.modal-open .mobile-menu-toggle {
  z-index: 1040;
}

.form-buttons {
  display: flex; 
  justify-content: center; 
  gap: 40px; 
  margin: 60px 0 0 0;
}

.footer-button .btn-small {border: 1px solid #fff; border-radius: 12px; min-width: 120px; padding: 3px; text-decoration: none; color: #fff; cursor: pointer; transition-duration: .3s; text-align: center}

.footer-button .btn-small.start, .footer-button .btn-small:hover {background: #00c8ff;border-color: #00c8ff;}

.footer-button .btn-small.start:hover {background: transparent; border: 1px solid #fff; color: #fff}

.form-buttons a.btn-black {
  background: #000000;
  border-radius: 20px;
  min-width: 160px;
  min-height: 35px;
  border: none;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  transition-duration: 0.3s;
}

.form-buttons a.btn-black:hover {
  background: #AEAFAF;
  color: #000000;
}

.round-section {padding: 20px 30px;}

.total-score-section p {
  font-size: 18px; 
  color: #000; 
  margin: 0; 
  font-weight: 600; 
  text-align: center;
}

.total-score-section {margin: 20px 0;}

.lideras-total {display: flex; justify-content: center; gap: 60px;}

@media (min-width: 768px) {
  .round-section {padding: 30px 40px;}
}

/*----------------------------------------------------------------------------*/


/*-------------------------------Bracket Grid---------------------------------*/

/* Mobile-first: las 9 columnas son hijas directas del grid.
   En móvil sólo se muestra la columna con .is-active y ocupa el 100%.
   El selector permite cambiar entre las primeras 5 columnas.
   En PC: las 9 columnas se reparten 4 x 10% + 1 x 20% + 4 x 10%. */

   .bracket-grid {
    position: relative;
    width: 100%;
  }
  
  /* Selector de columnas (sólo móvil) */
  .bracket-select {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 16px 0;
  }
  
  .bracket-select-btn {
    flex: 0 0 auto;
    min-width: 60px;
    padding: 6px 14px;
    background: #D9D9D9;
    border: 1px solid #ffffff;
    border-radius: 8px;
    color: #000000;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  }
  
  .bracket-select-btn:hover,
  .bracket-select-btn.is-active {
    background: #C43C2C;
    color: #ffffff;
    border-color: #ffffff;
  }
  
  /* Cada columna en móvil ocupa el 100% del dispositivo.
     Sólo se muestra la que tenga .is-active. */
  .bracket-col {
    display: none;
    width: 100%;
    margin-bottom: 16px;
  }
  
  .bracket-col.is-active {
    display: block;
  }
  
  .bracket-col:last-child {
    margin-bottom: 0;
  }
  
  /* Listado de grupos dentro de una columna: simple flex column con
     espaciado consistente. El alineamiento en cascada lo hace JS. */
  .bracket-col-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 30px; */
  }
  
  /* Cada grupo apila sus subgrupos con el mismo gap por defecto. */
  .bracket-col-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 80%;
    /* Espacio mínimo arriba/abajo para que los grupos no queden pegados.
       La cascada lee este margen como base, lo suma con su offset y deja
       inline el resultado, así que no interfiere con el cálculo. */
    margin: 25px 0;
  }
  
  /* Decoración tipo corchete "}" o "{" sobre .bracket-col-content.
     Variantes: --right ( } )  /  --left ( { )
     El alto se ajusta dinámicamente porque ::before usa top:0 / bottom:0. */
  
  .bracket-col-content--right { padding-right: 18px; }
  .bracket-col-content--left  { padding-left: 18px; }

  .bracket-col-content--left .bracket-col-group {
    align-items: flex-end;
  }

  .bracket-col-content--right .bracket-col-group {
    align-items: flex-start;
  }
  
  /* Cuerpo del corchete (línea vertical con curvas en los extremos).
     --bracket-top y --bracket-bottom son seteadas por JS para alinear los
     extremos al centro de cada subgrupo. El 19% es un fallback razonable
     por si el JS aún no se ha ejecutado o hay un único subgrupo. */
  .bracket-col-content--right::before,
  .bracket-col-content--left::before {
    content: "";
    position: absolute;
    top: var(--bracket-top, 19%);
    bottom: var(--bracket-bottom, 19%);
    width: 10px;
    border: 1px solid #1a1a1a;
    pointer-events: none;
  }
  
  .bracket-col-content--right::before {
    right: 8px;
    border-left: none;
    border-radius: 0 10px 10px 0;
  }
  
  .bracket-col-content--left::before {
    left: 8px;
    border-right: none;
    border-radius: 10px 0 0 10px;
  }
  
  /* Diente central (protrusión hacia afuera del corchete) */
  .bracket-col-content--right::after,
  .bracket-col-content--left::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 2px;
    background: #1a1a1a;
    transform: translateY(-50%);
    pointer-events: none;
  }
  
  .bracket-col-content--right::after { right: 0; }
  .bracket-col-content--left::after  { left: 0; }

  /* Botón de equipo dentro del bracket: ícono circular + nombre */
  .bracket-team-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-left: 6px;
    padding-right: 10px;
    text-align: left;
    width: 90%;
  }

  .bracket-team-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #D9D9D9;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .bracket-team-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .bracket-team-icon img.is-lock {
    width: 60%;
    height: 60%;
    object-fit: contain;
  }

  .bracket-team-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bracket-col-img {
    position: relative;
    margin: 40px 0 0px 0;
    z-index: 1;
  }
  
  .bracket-col-final {
    position: relative;
    background: linear-gradient(to bottom, #D92827 0%, #731515 100%);
    padding: 80px 20px 40px 20px;
    border-radius: 10px;
    margin: -80px 0 0 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .bracket-col-final hr {
    color: #ffffff;
    opacity: 1;
  }

  /* PC: las 9 columnas se muestran todas en una fila. */
  @media (min-width: 768px) {
    .bracket-select {
      display: none;
    }
  
    .bracket-grid {
      display: flex;
      align-items: flex-start;
      flex-wrap: nowrap;
      width: 100%;
    }
  
    .bracket-col,
    .bracket-col.is-active {
      display: block;
      flex: 0 0 10.5%;
      width: 10.5%;
      margin-bottom: 0;
    }
  
    /* Columna ancha (la central, 16%) */
    .bracket-col--wide {
      flex: 0 0 16%;
      width: 16%;
    }

    .bracket-team-btn {
      width: 90%;
    }

    .bracket-col-content {
      width: 100%;
    }
  }
  
  /*----------------------------------------------------------------------------*/


/*<----------------PAGE-01, PAGE-02 Css------------->*/

.q-page-01 {background-image: url(../images/page-01/page-01-bg.png);}

.q-page-02 {background-image: url(../images/page-02/page-02-bg.png);}

.quiniela-colores-bg-flex {height: 100%; display: flex; align-items: center; width: 100%}

.quiniela-flex {display: flex; justify-content: flex-end; flex-direction: column; align-items: flex-start; width: auto;}

.quiniela-colores-left {float: left}

.quiniela-colores-right {float: right; max-width: 550px;}

.quiniela-colores-right h3 {color: #fff; font-size: 35px; font-weight: 600; margin: 0 0 40px 0;}

.quiniela-colores-logo img {max-width: 150px;}

.quiniela-colores-form p {color: #fff; font-size: 22px; font-weight: 500; margin: 10px 0;}

.blue, .quiniela-colores-form .blue{color: #01b0e4;}

.gorm-group {gap: 20px; display: inline-flex; align-items: flex-end;}

.gorm-group input[type="email"], .gorm-group input[type="number"] {border-radius: 64px; border: none; padding: 12px 20px; font-size: 20px; max-width: 220px;}

.gorm-group input[type="submit"] {background: #00c8ff; color: #fff; font-size: 12px; height: auto; line-height: normal; min-height: unset; display: inline-block; border: none; padding: 5px 20px; border-radius: 64px;}

.form-first {margin: 0 0 30px 0;}

a.forgot-pswd {color: #84610b; font-size: 12px; text-decoration: none;}

.form-third {margin: 0 0 60px 0;}

.btm-img {display: none;}

/*<----------------PAGE-03 Css------------->*/

.q-page-03 {background-image: url(../images/page-03/page-03-bg.png)}

/*<----------------PAGE-04 PROFILE Css------------->*/

.q-page-04 {height: auto; background-image: url(../images/page-04-profile/page-04-bg.png)}

.profile-center {max-width: 295px; margin: 0 auto; display: flex; flex-direction: column; gap: 80px;}

a.btn-medium {background: #fff; min-width: 200px; display: inline-flex; align-items: center; border-radius: 12px; padding: 10px 20px; gap: 40px; text-decoration: none; color: #00377d; font-weight: 500; cursor: pointer}

a.btn-medium img {max-width: 25px; transition-duration: .3s;}

a.btn-medium:hover {background: #00c8ff;}

.select-profile .blue {font-size: 22px; font-weight: 600; color: #00c8ff; margin: 0 0 30px 0; line-height: normal;}

.profile-button {text-align: center;}


/*<----------------PAGE-05 MYSCORE Css------------->*/

.q-page-05 {background-image: url(../images/page-05-my-score/page-05-bg.png); height: auto;}

.group-stage {max-width: 700px; margin: 0 auto;}

.note:before {content: ""; position: absolute; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 45px solid #868798; bottom: -25px; transform: rotate(80deg); right: 25px;}

.score-main {display: flex; justify-content: center; margin: 10px 0 0;}

.score-bg {background: #C43C2C; width: 150px; height: 150px; border-radius: 100%; display: flex; align-items: center; justify-content: center;}

.score-bg h3 {color: #ffffff; font-size: 55px; font-weight: 900; margin: 0}


/*<----------------PAGE-06 GROUPSCORE Css------------->*/

.q-page-06 {background-image: url(../images/page-06-group-score/page-06-bg.png); height: auto;}

.groupscore a.btn-medium {gap: 20px; line-height: normal;}

.group-score-stage {margin: 30px 0 0 0;}

.group-score-stage .group-head {width: 200px; margin: 0 auto 30px auto; padding: 10px 20px; background: #D9D9D9; color: #000; border-radius: 10px;}

.country {display: flex; gap: 5px; justify-content: center; border: 1px solid #fff; border-bottom: 0; min-height: 45px; align-items: center;}

.c-f {width: 50%;}

.score-heading p {font-size: 18px; margin: 0 0 5px 0; text-align: center; color: #000; font-weight: 600; font-size: 18px;}

.score-board-main {margin: 0 0 100px 0;}

.groupscore .score-bg {width: 100px; height: 100px;}

.groupscore .score-bg h3 {font-size: 35px;}

.score-table table {width: 100%}

table thead th p {margin: 0; padding: 5px 0; display: inline-block; width: 100%; background: #000;}

.score-table table td {padding: 0; border: 1px solid #000; color: #000; font-size: 14px; text-align: center;}

.score-table table td p {margin: 0; display: block; height: 100%; padding: 5px; border-bottom: 0; border-left: 0;}

.score-table table td:first-child {border-left: 1px solid #000;}

.score-table table tr:last-child td {border-bottom: 1px solid #000;}

.prediction table td p:not(.prediction table td .country p) {min-height: 45px; display: flex; align-items: center; justify-content: center;}

.score-table table tr:last-child td:first-child {border-bottom-left-radius: 12px;}

.score-table table tr:last-child td:last-child {border-bottom-right-radius: 12px;}

/* .score-table table tr:last-child td:first-child .country {border-bottom-left-radius: 12px;}

.score-table table tr:last-child .country {border-bottom: 1px solid #000;} */

.score-table table td p:not(.score-table table td .country p) {min-height: 45px; display: flex; align-items: center; justify-content: center;}

.score-table table th {vertical-align: top; background: #000; color: #fff; font-size: 16px; text-align: center; padding: 0; line-height: normal;}

.score-table table th:first-child {padding-left: 10px;}

.score-table table th:last-child {padding-right: 10px;}

.score-table table tr:first-child td:first-child .country {border-top-left-radius: 12px;}

table thead th:first-child {border-top-left-radius: 12px;}

table thead th:last-child {border-top-right-radius: 12px;}

.c-f img {max-width: 12px;}

.c-f p {margin: 0; font-size: 10px;}

.prediction thead th {min-width: 110px;}

.score-table table tr td .country p {border: none; padding-top: 0;}

.total .score-table table th p {display: flex; align-items: flex-end; justify-content: center;}

.score-board-main .col-md-1 {display: flex; align-items: center; color: #000; width: auto; padding: 0;}

.score-board-main .col-md-1 p {font-size: 12px; margin: 0;}

.score-table table td p {margin: 0;}

.score-table table td p

.total .score-table table th p {min-height: 34px; display: flex; align-items: flex-end; justify-content: center;}

.total .score-table table th {min-width: 60px;}


/*<----------------PAGE-07 GROUPPAHSE Css------------->*/

.q-page-07 {background-image: url(../images/page-05-my-score/page-05-bg.png); height: auto;}

.upper-heading {padding: 0 20px; text-align: left;}

.group-score-phase table thead th p span {font-size: 16px;}

.group-score-phase-main {margin: 10px 0;}

.group-score-phase-main .score-board-main {margin: 0 0 50px 0;}

.score-board-main p.blue {color: #01b0e4; margin: 0 0 50px 0; font-size: 22px;}

.group-phase .footer-button {margin: 80px 0 0;}

.upper-heading p {margin: 0; background: #fff; color: #000; border-top-left-radius: 12px; border-top-right-radius: 12px; font-weight: 600; font-size: 16px;}

.score-table table td:first-child p {border-left: 1px solid #fff;}

.group-score-phase-main table tr td p:not(.group-score-phase-main table tr:first-child td p, .group-score-phase-main table tr:nth-child(2) td p) {border-top: 0;}

/* .group-score-phase-main table tr:first-child p {font-size: 18px;} */


/*<----------------PAGE-08 LIDERAS PAGE Css------------->*/

.q-page-08 {background-image: url(../images/page-06-group-score/page-06-bg.png); height: auto;}

.lideras-page .btn-medium {text-align: left}

.p-f {gap: 20px;}

.p-f img {max-width: 25px;}

.q-page-08 .group-score-phase-main table tr:first-child p {font-size: 14px;}

.ranking-heading {text-align: center; margin: 40px 0 0;}

.ranking-heading h2 {min-width: 350px; width: auto; float: none; margin: 0 auto; border: 1px dashed #fff; display: table; padding: 14px 60px; color: #000; font-weight: bold; font-size: 25px; border-top-left-radius: 32px; border-top-right-radius: 32px;}

.lideras-page .score-table table tr:nth-child(2) td p {border-top: 0;}

.lideras-page .score-table table th:first-child {padding-left: 20px;}

.lideras-page .score-table table th:last-child {padding-right: 20px;}

.table-2 table thead tr th p {min-height: 48px; display: flex; align-items: center; justify-content: center;}

.lideras-page .footer-button {margin: 150px 0 0 0;}


/*<----------------PAGE-09 GROUP QUALIFY Css------------->*/

.q-page-09 {background-image: url(../images/page-06-group-score/page-06-bg.png);}

.group-qualify-button {display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 40px; margin: 70px 0;}

.g-q-btns {background: #ffb200; border-radius: 20px; min-width: 320px; display: flex; align-items: center; padding: 10px 20px; font-size: 25px; gap: 30px; text-decoration: none;color: #00377d; transition-duration: .3s;}

.g-q-btns img {max-width: 40px;}

.g-q-btns:hover {background: #00c8ff; color: #fff;}


/*<----------------PAGE-10 GROUP STAG Css------------->*/

.q-page-10 {background-image: url(../images/page-10-group-stage/page-10-bg.png); height: auto;}

.stage-part {padding: 40px 40px; max-width: 850px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; flex-wrap: wrap;}

.stage-list {background: #EBEEF3; border-radius: 32px; padding: 30px;}

.flagcountry p {font-size: 18px; color: #000000; font-weight: 600; margin: 5px 0 0 0;}

.flagcountry img {
  min-width: 80px;
  max-width: 80px;
}

.checkbox-title {margin: 40px 0 0;}

.checkbox-flex {display: flex; justify-content: center; border-bottom: 1px solid #00377d; margin: 5px 0 0; gap: 30px; text-align: center; padding-bottom: 5px;}

.checkbox-flex p {margin: 0; color: #00377d; line-height: normal; min-height: 45px;}

.formn-main {display: flex; justify-content: center; gap: 60px;}

.goal-list input[type="number"] {
  background: #fff; 
  border: none; 
  width: 75px; 
  border-radius: 8px; 
  height: 75px; 
  font-size: 46px; 
  color: #000000; 
  font-weight: 600; 
  text-align: center;
}

.goal-list input[type="number"]:disabled {
  background: #D9D9D9;
  border: none; 
  max-width: 65px; 
  border-radius: 8px; 
  height: 60px; 
  font-size: 36px; 
  color: #000000; 
  font-weight: 600; 
  text-align: center;
}

.goal-list input[type="number"]::placeholder {color: #000000}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}

.goal-list.middle {padding: 20px 60px;}

.goal-list  p {margin: 0; color: #000000;}

.save-button-full {
  text-align: center; 
  /*margin-top: 5px; */
}

.save-button-full img {
  margin-top: 10px;
  margin-bottom: 10px;
}

.save-button-full button {background: #00c8ff; border-color: #00c8ff; color: #fff; border: 1px solid transparent; border-radius: 8px; min-width: 100px; line-height: normal; padding: 2px;}

/**PAGE-11 quiniela page css***/

.q-page-11 {background-image: url(../images/page-11-group-quirenel/page-11-bg.png); height: auto;}

.quinella-heading h2 {color: #fff; font-weight: bold;}

.quinella-heading h3 {color: #00c0f6; line-height: normal; font-size: 24px;}

.qiniela-flex h2 {font-weight: 700; color: #fff; font-size: 22px; margin: 0 0 80px 0; border-bottom: 4px solid #fff; text-align: center; border-radius: 4px;}

.quinella-heading {text-align: center;}

.qiniela-flex {align-items: center;}

.card-box {width: 100%; background: #525775; border-radius: 4px; padding: 6px 20px 15px; position: relative; display: flex; flex-direction: column; gap: 4px;}

.country-image img {max-width: 25px;}

.country-name h4 {font-size: 14px; font-weight: 700; margin: 0}

.country-list {display: flex; justify-content: space-between; padding: 0; flex-direction: column; gap: 15px}

.country-image {min-height: 1px;}

.country-name {min-height: 1px;}

.quiz-part-main .form-group {gap: 15px; display: flex; flex-direction: column; position: relative}

.quiz-part-main {display: flex; flex-direction: column; gap: 60px; position: relative}

.qiniela-flex .col-md-3 {width: 18%;}

.qiniela-flex.row {justify-content: space-between; gap: 9%; margin: 40px 0 0 0;}

.second .quiz-part-main {gap: 205px;}

.second .quiz-part-main .form-group {gap: 205px;}

.third .quiz-part-main {gap: 285px;}

.third .form-group {gap: 530px;}

.lock-image img {max-width: 100%;}

.lock-image {position: absolute; left: 0; right: 0; max-width: 40px; margin: 0 auto; top: 50%; transform: translatey(-50%); z-index: 9;}

.qiniela-flex .col-md-3:last-child .form-group::before, .qiniela-flex .col-md-3:last-child .form-group::after{display: none;}

.quiz-part-main .form-group:before {position: absolute; bottom: 0; width: 65px; height: 55%; content: ""; right: -65px; border: 1px solid #fff; background: transparent; border-left: 0; top: 50%; transform: translatey(-50%);}

.second .quiz-part-main .form-group:before {height: 75%;}

.third .quiz-part-main .form-group:before {height: 86%;}

.quiz-part-main .form-group:after {content: ""; position: absolute; top: 50%; transform: translatey(-50%); height: 1px; background: #fff; width: 65px; right: -130px;}

.fourth .f-image {max-width: 150px; position: absolute; bottom: 150px; left: 0;}

.fourth .f-image img, .b-image img{max-width: 100%;}

.b-image {position: absolute; right: 0; min-width: 305px; bottom: -310px;}

.quiz-part.fourth{position: relative;}

.fourth .f-image {max-width: 150px; position: absolute; bottom: 160px; left: -25px;}

.date-time p {color: #fff; font-size: 12px; margin: 0 0 10px 0;}

.radio-i input[type="radio"] {width: 30px; height: 30px;}

.radio-list {display: flex; align-items: center; gap: 10px; font-size: 12px;}

.Por {color: #fff;}

.quiz-part-main .input-group h2 {width: 100%; margin: 0 0 10px 0;}

.qiniela-flex .col-md-3:nth-child(3) .quiz-part-main .form-group:after {display: none;}

.qiniela-flex .col-md-3:last-child .quiz-part-main .form-group {gap: 80px}

.qiniela-flex .col-md-3:last-child .card-box:before {content: ""; height: 1px; background: #fff; position: absolute; top: 50%; left: -63px; transform: translateY(-50%); width: 63px;}

.q-page-11 .footer-button {margin: 400px 0 0;}



/**PAGE-12 quiniela FINAL page css***/


.q-page-12 {background-image: url(../images/page-12-final/page-12-bg.png); height: auto;}

.group-final .logo-main img {max-width: 170px;}

.group-final h3 {color: #fff; font-size: 22px; font-weight: bold; margin: 20px 0 0 0;}

.group-final .stage-part {padding: 5px 40px;}

.qiniela-flex .col-md-3:last-child .card-box:before {display: none;}

.third .quiz-part-main .input-group:before {content: ""; height: 1px; background: #fff; position: absolute; bottom: -85px; width: 65px; right: -129px;}

.third .quiz-part-main .input-group:last-child:before {bottom: auto; top: -200px;}

/**Translator**/

.goog-logo-link {display:none !important;}

.goog-te-gadget {color: transparent !important;}

.goog-te-banner-frame{display:none !important}

#google_translate_element {position: absolute; top: 20px; left: 20px;}

#translate_element {position: absolute; top: 20px; left: 20px; background-color: transparent;}

.goog-te-gadget .goog-te-combo {background: #00c8ff; padding: 5px 10px; border-radius: 4px; font-family: 'Roboto', sans-serif; cursor: pointer; color: #fff; border: 1px solid #fff;}


.flag-rounded { width: 36px; height: 36px; border-radius: 50% !important; }

.clickable { cursor: pointer; }

.third-custom .quiz-part-main {gap: 560px;}

.third-custom .quiz-part-main .form-group {gap: 530px;}

.third-custom .quiz-part-main .form-group:before {height: 86%;}


/* .third-custom .quiz-part-main .input-group:before {content: ""; height: 1px; background: #fff; position: absolute; bottom: -85px; width: 65px; right: -129px;}

.third-custom .quiz-part-main .input-group:last-child:before {bottom: auto; top: -200px;}  */

.fourth-custom .quiz-part-main {gap: 500px;}

.fourth-custom .quiz-part-main .form-group {gap: 1200px;}

.fourth-custom .quiz-part-main .form-group:before {height: 90%;}


.fifth .quiz-part-main {gap: 500px;}

.fifth .quiz-part-main .form-group {gap: 1200px;}

.fifth .quiz-part-main .form-group:before {height: 90%;}