.close-custom-alert {
  width: 24px;
  position: absolute;
  top: 4px;
  right: 4px;
  cursor: pointer;
}


.btns-login-register:hover {
  background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
}

.btns-login-register:active {
  /*clic*/
  background-image: linear-gradient(rgb(0 0 0/20%) 0 0);
}







.btns-left {
  position: relative;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-align: center;
  padding: 0 6px;
  margin: 0 14px;
  font-weight: 500;
  transition:
    border-bottom .10s ease-out,
    color .10s ease-out; /*normal = .15*/
}

.btns-left:hover,
.btns-left:hover *{
  color: var(--color-primary);
}
.btns-left:hover:before {
  background-color: var(--color-primary);
  border-radius: 0.125rem 0.125rem 0 0;
  content: "";
  height: 4px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: height .1s ease-in-out;
}
/* right ================= */
.div-right {
  margin-left: auto;
  height: 100%;
  display: flex;
  align-items: center;
  
}
/* tab liga decoration */
#title-liga {
  text-decoration: none;
  transition: all 0.3s ease;
  background-color: transparent;
  transform: none;
  color: #ffd700 !important;
  font-weight: 700 ;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  animation: glow 2s ease-in-out infinite;
  background-color: transparent;
  transition: all 0.3s ease;

  /* estilos antiguos */
  font-size: 16px;
  font-family: 'Salsa';
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}
@keyframes glow {
  0%, 100% {
      color: #ffd700 !important;
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.3),
                  0 0 20px rgba(255, 215, 0, 0.3);
  }
  50% {
      color: #ffe55c !important;
      text-shadow: 0 0 20px rgba(255, 215, 0, 0.5),
                  0 0 30px rgba(255, 215, 0, 0.5),
                  0 0 40px rgba(255, 215, 0, 0.3);
  }
}
#title-liga-navidad {
  text-decoration: none;
  transition: all 0.3s ease;
  background-color: transparent;
  transform: none;
  color: #ff4747 !important;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 71, 71, 0.5);
  animation: glow-navidad 2s ease-in-out infinite;
  
  /* estilos antiguos */
  font-size: 20px;
  font-family: 'Mountains of Christmas', serif;
  letter-spacing: 0.1rem;
}

@keyframes glow-navidad {
  0%, 100% {
      color: #ff4747 !important;
      text-shadow: 0 0 10px rgba(255, 71, 71, 0.3),
                  0 0 20px rgba(255, 71, 71, 0.3);
  }
  50% {
      color: #ff6b6b !important;
      text-shadow: 0 0 20px rgba(255, 71, 71, 0.5),
                  0 0 30px rgba(255, 71, 71, 0.5),
                  0 0 40px rgba(255, 71, 71, 0.3);
  }
}

/* IF USER IS ACTIVE ==============================*/

/*saldo*/
#div-saldo {
  /*background-color: rgb(0, 76, 4);*/
  background-color: var(--color-caja-3);
  height: 100%;
  display: flex;
  align-items: center;
  /*justify-content: center;*/
  border-radius: var(--border-radius);
  padding-inline: 7px;
  transition: background-color 3s ease;
}

#user-saldo-txt {
  display: inline-block;
  font-size: var(--fs-title);
  max-width: 110px;
  height: 32px;
  font-weight: 500;
  line-height: 32px;
  overflow: hidden;
  white-space: nowrap;
  margin-inline: 12px;
  
}

/*avatar*/
#nav-profile {
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  padding: 6px;
  gap: 10px;
  position: relative;
  z-index: 99;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
}
#nav-profile:hover {
  background-color: var(--color-contenido);
}
#profile-dropdown-options {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 60px;
  right: 0;
}
.div-img-person {
  width: 36px;
  height: 36px;
  /*centrar imagen dentro de div*/
  display: flex;
  justify-content: center;
}
.img-person {
  /*no es necesario configurar nada en la imagen
  solo se configura el div padre */
  padding: 0px;
  border-radius: var(--border-radius);
  background-color: #132730;
}


/*nickname*/
#div-nickname-right {
  max-width: 140px;
  height: 36px;
  flex-direction: column;
  justify-content: space-between;
}
#text-nickname-right {
  font-size: var(--fs-title);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  line-height: 18px;
}
#nav-container-skill{
  display: inline-flex;
  height: 1rem;
  align-items: center;
}
#label-title-skill {
  color: var(--color-font-3);
  font-size: 13px;
  margin-right: 8px;
}
/*hamburger*/
.show-options {
  overflow: visible !important; /*uso de important porque overflow:hidden es definido con selector #id*/
}



#option-perfil,
#option-cuenta,
#option-steam,
#option-discord,
#option-partidos,
#option-movimientos,
#option-depositar,
#option-retirar,
#option-logout {
  display: block;
  width: 180px;
  font-size: var(--fs-content);
  background-color: black;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  
}

#option-perfil:hover,
#option-cuenta:hover,
#option-steam:hover,
#option-discord:hover,
#option-partidos:hover,
#option-movimientos:hover,
#option-depositar:hover,
#option-retirar:hover,
#option-logout:hover {
  background-color: var(--color-primary);
}




/*contenido=============================================================================================*/
/*cajas de diferentes vistas*/
#caja1-como-jugar,
#caja1-preguntas-frecuentes,
#caja1-politica-de-privacidad,
#caja1-terminos-y-condiciones,
#en-vivo,
#salas-in-home,
#torneos-in-home,
.caja-login,
#jugar-promos {
  border-radius: var(--border-radius);
  background-color: var(--color-cajas);
  border: 1px solid var(--color-border-main);
}
/*quitar espacio final que ocupa lugar*/
#jugar-promos {
  font-size: 0px;
}

/* eliminar elemento .cuerpo, elemento main lo reemplazara. elemento main debe ser display block sin ningun tipo de centrado de el mismo y su contenido. solo separacion de top y bottom de 16px */
.cuerpo {
  /*separar del nav*/
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://res.cloudinary.com/dmltnnzso/image/upload/v1702777085/246377_gn3jyf.jpg"); */
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  
  width: 100%;
  min-height: 720px;
  align-items: flex-start
}





#jugar-promos {
  width: 820px;
  min-height: 400px;
}
/* como jugar, terminos y condiciones, preguntas frecuentes | cajas height dinamico ####################################################################################*/
#caja1-como-jugar,
#caja1-preguntas-frecuentes,
#caja1-terminos-y-condiciones {
  max-width: 900px;
  min-height: 680px;
  padding: 16px;
  /*separacion con footer*/
  margin: 16px auto;
}
#div-img-share-stats {
  background-image: url("https://res.cloudinary.com/dmltnnzso/image/upload/v1663491902/paraiso-dotero/assets/como-jugar/dota-config_elqut3.webp");
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 500px;

}
/*home ######################################*/

#box-main-home {
  width: 1282px;
  height: 800px;
  
}
/*LOGIN FORMULARIO****************************/
.caja-login {
  border-radius: var(--border-radius);
  margin-top: 100px;
  width: 374px;
  background-color: var(--color-cajas);
  /*separacion con footer*/
  margin-bottom: 16px;
}


.titulos-boxes-normal {
  border-top-right-radius: var(--border-radius);
  border-top-left-radius: var(--border-radius);
  border-bottom: 1px solid var(--color-border-main);
  height: 40px;
  margin-bottom: 0px; /*separacion con los imputs*/
  padding: 0 12px;
  font-size: var(--fs-title);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.labels-inputs {
  margin: 4px 0;
  padding-left: 36px;
  font-size: var(--fs-content);
}
.inputs {
  /*otros inputs(cambiar nick, pass, etc)*/
  display: block;
  margin:auto;
  padding-inline: 8px;
  font-size: var(--fs-title);
  height: 40px;
  width: 260px;
  border: none;
  outline: none;
  background-color: var(--color-contenido);
  border-radius: var(--border-radius-input);
}

.btn-send-credentials {
  background-color: green;
  display: block;
  height: 40px;
  width: 200px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  border: none;
  border-radius: var(--border-radius);
  margin: 28px auto;
  font-weight: 500;
}
.btn-send-credentials:hover {
  box-shadow: 0 0 10px 0 green inset, 0 0 20px 2px green;

}


.flash-message-login-register {
  width: 304px;
  margin: 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: #cc0033;
  line-height: 36px;
  padding-left: 8px;
  background-color: #fce4e4;
  border: 1px solid #fcc2c3;
  border-radius: 4px;
}


.link_ {
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 500;
}
.link_:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/********************************/




.btn-red {
  display: block;
  background-color: var(--color-red-dota);
  text-decoration: none;
  text-align: center;
  letter-spacing: .03em;
  border-radius: var(--border-radius);
}
.btn-red:hover {
  background-color: rgb(157, 0, 0);
  box-shadow: 0 0 10px 0 rgb(157, 0, 0) inset, 0 0 20px 2px rgb(157, 0, 0);
}

/*badge gatex plus*/
.badge-plus-bg-out {
  /*hexagon from https://bennettfeely.com/clippy/*/
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  width: 22px;
  height: 22px;
  background-color: var(--bg-color-gold-plus);
  position: relative;
}
.badge-plus-bg-in {
  /*hexagon from https://bennettfeely.com/clippy/*/
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background-color: #a50625;
}
.badge-plus-center {
  clip-path: polygon(0 35%, 35% 35%, 35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%);
  width: 10px;
  height: 10px;
  background-color: var(--bg-color-gold-plus);
  position: absolute;
  top: 4px;
  left: 4px;
}
/*hex skill level
 *example: https://stackoverflow.com/questions/19418486/hexagon-shape-with-a-border-outline
*/
.badge-level-out {
  position: relative;
  width: 22px;
  height: 22px;
  /*hexagon from https://bennettfeely.com/clippy/*/
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.badge-level-in {
  position: absolute;
  top: 2px;  /* border width */
  left: 2px;  /* border width */
  height: calc(100% - 4px);  /* 100% - (2 * border width) */
  width: calc(100% - 4px);  /* 100% - (2 * border width) */
  background: rgba(0, 0, 0, 0.72);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  text-align: center;
  color: #ddd;
}
.bg-color-level-yellow {
  background-color: var(--colorLevelYellow);
}
.bg-color-level-green {
  background-color: var(--colorLevelGreen);
}
.bg-color-level-purple {
  background-color: var(--colorLevelPurple);
}
.bg-color-level-red {
  background-color: var(--color-red-dota); 
}
.border-color-level-yellow {
  border-color: var(--colorLevelYellow);
}
.border-color-level-green {
  border-color: var(--colorLevelGreen);
}
.border-color-level-purple {
  border-color: var(--colorLevelPurple);
}
.border-color-level-red {
  border-color: var(--color-red-dota);
}

.font-green {
  color: var(--green-font) !important;
}
.font-red {
  color: var(--color-red-dota) !important;
}
.font-green-host {
  color: var(--green-host-font) !important;
}

.text-color-radiant {
  color: var(--color-rad);
}
.text-color-dire {
  color: var(--color-dire)
}
.badge-level-v2__bg {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  /* usar doble fondo, para simular un borde, el borde de color primary y en bg central de color black con transparencia */
  background-color: oklch(0.39 0.14 293.05);
  border: 2px solid var(--color-primary);
}
.badge-level-v2__level {
  font-size: 12px;
  font-weight: 500;
}
/* Publicidad */
/*RETOSDOTA2*/
#box-right-add {
  width: 820px;
  height: 90px;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  background-color: #8080802e;
  font-weight: 500;
  cursor: pointer;
  vertical-align: middle;
}
/*box promociones*/
.promo-img {
  display: inline-block;
  margin: 6px 0 6px 6px;
  border-radius: var(--border-radius);
  cursor: pointer;
  height: 520px;
}
.color-font-secondary {
  color: var(--color-font-2);
}

.font-yellow-2 {
  color: #ffaa29;
}
.font-red-danger {
  color: #d84545;
}
.font-gold {
  color: var(--color-font-gold);
}
/*eliminar cambio de color en inouts autocompletados*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  transition-delay: 9999s;
  transition-property: background-color,color;
}



/* v0.2 */
main {
  max-width: var(--content-max-width);
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}
.row-navbar2 {
  background-color: var(--color-base-350);
  width: 100%;
  border-bottom: 1px solid var(--color-neutral);
}
.navbar2 {
  max-width: var(--content-max-width);
  width: 100%;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}
.navbar2__btn {
  
  padding-inline: 16px;
  padding-block: 8px;
  height: 40px;
}
.navbar2__btn:hover,
.navbar2__btn-active {
  border-bottom: 2px solid var(--color-primary);
}