:root{
    --main-tc: rgba(255, 255, 255, 0.7);
    --color-selec: rgba(255, 255, 255, 1);
    --hidden-color: #777777a2;
    --above-pace-color: #1a88d6d5;
    --under-pace-color: #da3d08d5;
    font-family: 'Tinos';
    font-weight: 400; /* normal */
    font-style: normal;
    color:var(--main-tc);
    user-select: none;
}


html{
    margin: 0;
    height: 100%;
    width: 100%;
    background-color: black;
}
body{
    margin: 0;
    min-height: 100%;
    min-width: 100%;
}

header{
    height: 8vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn_hdr {
    margin: 0 1vw 0 1vw;
    font-size: 3.8vh;
}
a{
    color:  var(--main-tc);
    text-decoration: none;

}
a:visited{
    text-decoration: none;
}

.inline{
    display:flex;
    flex-direction: row;
}

.tooltip{
    pointer-events: all;
    position: relative;
}
.tooltiptext {
  visibility: hidden;
  width: max-content;
  background-color: #00000088;
  color: var(--main-tc);
  text-align: left;
  border-radius: 2px;
  padding: 4px 8px;
  position: absolute;
  z-index: 10;
  bottom: 100%; /* Position above the text */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.1s;
  pointer-events: none;
  font-size: 0.8vw;
}

.tooltip:hover>.tooltiptext, .tooltiptext:hover {
  visibility: visible;
  pointer-events: all;
  opacity: 1;
}

.tooltiptext_bottom{
  bottom: -1em; /* Position above the text */
  left: 50%;
}
.tooltiptext_right{
    transform: translatey(50%);
    left:100%;
    bottom:50%;
}
.tooltiptext_middle{
    transform: translate(-50%, -50%);
    left:50%;
    bottom:50%;
}

.tooltiptext_ghosty{
    background-color: #ffffff1a;
    color: #ffffff7e;
}

.pointer_events_none{
    pointer-events: none;
}

.main{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 0;
}
.main::before {
    /*--bg-color:#fca400;   fondo con eleccion de color*/
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        url('../imgs/bg_main.png'),                   
        url('../imgs/bg_sec.png');                    
    background-repeat: 
        no-repeat,
        repeat;
    background-size: 
        auto 100vh, 
        auto 100vh;
    background-position: 
        center top,
        center top;
    /*background-image:
        linear-gradient(var(--bg-color), var(--bg-color)), 
        url('../imgs/bg_main_baw.png'),                   
        linear-gradient(var(--bg-color), var(--bg-color)), 
        url('../imgs/bg_sec_baw.png');                    
    background-repeat: 
        no-repeat,
        no-repeat,
        repeat,
        repeat;
    background-size: 
        178vh 100vh, 
        178vh 100vh,
        178vh 100vh,
        178vh 100vh;
    background-position: 
        center top,
        center top,
        center top,
        center top;
    background-blend-mode: multiply, normal, multiply, normal;*/
    opacity: 0.3; /* Ajusta la transparencia */
    z-index: -1;
    pointer-events: none;
}
/*
    cuerpo divide el espacio en 3 columnas iguales
    cuerpo_2 divie el espacio en 2 columnas iguales
    cuerpo_1_2 divide el espacio en 2 columnas, 1/3 y 2/3 del ancho respectivamente
*/
.cuerpo, .cuerpo_2, .cuerpo_1_2{
    display: flex;
    flex: 1;
    flex-direction: row;
    width: 100%;
    min-height: 92vh;
    justify-content: start;
    overflow: hidden;
}

.cuerpo > div, .cuerpo_2 > div , .cuerpo_1_2 > div{
    display: flex;
    flex: 0 0 33%;
    padding:  2vh 2.5vw;
    box-sizing: border-box;
    overflow: hidden;
    flex-direction: column;
}
.cuerpo_1_2 > div:nth-child(2) {
    flex: 0 0 67%;
}

.cuerpo_2 > div {
    flex: 0 0 50%;
}

.title_section {
    --max-letter-spacing: 1.2vw;
    --letter-spacing: 1.2vw; 
    --max-font-size: 2.5vw;
    --min-font-size: 0.5vh;
    white-space: nowrap;
    align-self: center;
    font-size: 4vh;
    letter-spacing: var(--letter-spacing);
    margin-bottom: 2vh;
    margin-right: calc(-1*var(--letter-spacing));
}

._elo_effect{
    color: #00000000;
}

.p_name {
    white-space: nowrap;
    color: var(--color-selec);
    font-size: 6.5vw;
    margin-right: 1vw;
    --max-font-size: 6.5vw;
    --min-font-size: 1vw;
}

.p_name_elo_neto {
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    margin-bottom: 2vw;
}

.p_elo_neto {
    display: flex;
    flex-direction: column;
    position: relative;
    justify-self: center;
}

.p_elo {
    --text-color: var(--main-tc);
    font-size: 2.5vw;
}

.p_neto {
    position: absolute;
    left: 1vw;
    top: -0.5vw;
    font-size: 0.8vw;
}

.p_stats {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    width: 100%;
}

.p_stat_names_dates_block, .p_stat_ns, .p_stat_values{
    display: flex;
    min-width: 0;
    flex-direction: column;
    font-size: 1.6vw;
}
.p_stat_name_date {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    flex-wrap: nowrap; /* Prevent wrapping */
    min-width: 0;      /* Allow children to shrink */
}
.p_stat_name{
    align-items: start;
    
    white-space: nowrap;
    display: inline-block;
    margin-right: 1vw;
}
.p_stat_values_ns{
    display: flex;
    flex-direction: row;
}
.p_stat_ns{
    margin-left: 1vw;
    align-items: end;
}

.p_stat_values{
    align-items: end;
}

.l_title_row {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 0 0.5vw 0;
}
.p_stat_ns > .l_row_date, .p_stat_values > .l_row_date {
    align-self: center;
    
}

.l_sep, .profile_sep {
    flex: 1;
    height: 2px;
    opacity: 0.8;
    width: 100%;

    color: transparent; 
    background: var(--main-tc);
}
.profile_sep {
    flex: unset;
}


.l_title {
    --text-color: var(--main-tc);

    font-size: 1.9vw;
    align-self: center;
    width: auto;
    margin: 0 0.2vw;
    
    color: var(--text-color);
    background: none;
    background-clip: text;
}




footer {
    position: relative;
    min-height: 18vh;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    padding: 1vh 1vw;
    font-size: 1.5vh;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.3) 10%,
        rgba(0,0,0,0.7) 30%,
        rgba(0,0,0,1) 60%
    );
}

.selected_hdr{
    text-decoration: underline;
}
/*
footer::after{
    z-index: -1;
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: black;
    opacity: 0.6;
}*/


/*animaciones de rangos*/


.nan_animated.on, 
.nan_hover:hover{
    background: url('../imgs/nan.png') repeat center top;
    background-size: auto;
}
.copper_animated.on, 
.copper_hover:hover{
    background: url('../imgs/copper.png') repeat center top;
    background-size: auto;
}
.silver_animated.on, 
.silver_hover:hover,
.silver_hover_inverted{
    background: url('../imgs/silver.png') repeat center top;
    background-size: auto;
}
.gold_animated.on, 
.gold_hover:hover{
    background: url('../imgs/gold.png') repeat center top;
    background-size: auto;
}
.poly_animated.on, 
.poly_hover:hover{
    background: url('../imgs/hypr.png') repeat center top;
    background-size: auto;
}
.red_animated.on, 
.red_hover:hover{
    background: url('../imgs/red.png') repeat center top;
    background-size: auto;
}
.red_animated.on, 
.red_hover:hover, 
.poly_animated.on, 
.poly_hover:hover,
.gold_animated.on, 
.gold_hover:hover,
.silver_animated.on, 
.silver_hover:hover,
.silver_hover_inverted,
.copper_animated.on, 
.copper_hover:hover,
.nan_animated.on, 
.nan_hover:hover{
    color: transparent;
    background-clip: text;

    will-change: background-position;
    animation: bg-move 30s linear infinite;
}

.silver_hover_inverted:hover{
    color:var(--hidden-color);
    background: none;
}

.red_animated.on:empty, .poli_animated.on:empty, .gold_animated.on:empty, .silver_animated.on:empty, .copper_animated.on:empty, .nan_animated.on:empty {
    background-clip: border-box;
}
@keyframes bg-move {
  0% {
    background-position: center 100%;
  }
  100% {
    background-position: center 0%;
  }
}

.l_body {
    color: var(--color-selec);
}


.l_body_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.7vw;
    white-space: nowrap;
}

.l_body_row > div {
    display: flex;
    align-items: center;
}

.l_row_n {
    min-width: 1.6vw;
    margin-right: 1vw;
}

.l_row_name {
    max-width: 14ch;
    overflow: hidden;
    margin-right: 0.7vw;
}

.l_row_date {
    color:var(--hidden-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    font-size: 1vw;
    margin-top: 0.2vw;
}



.hs_description {
    display:flex;
    flex: 1;
    align-items: center;
    flex-direction: column;
    padding: 0 3vw 0 3vw;
    color: var(--color-selec);
    font-size: 1.1vw;
}
.hs_description>span{
    display: inline-block;
    text-align: center;
    margin-bottom: 1vw;
}

.hs_version_description{
    font-size: 0.9vw;
    color: var(--main-tc);
    display: flex;
    flex-direction: column;
    align-items: start;
}

.hs_v_row {
    display: flex;
    flex-direction: row;
    align-items: start;
    margin-bottom: 0.5vw;
}

.hs_v_version{
    margin: 0 0.1vw 0 0;

}

.supporters {
    margin-top: 0.2vw;
    display:flex;
    justify-content: center;
}
.supporter{
    font-size: 2vh;
    margin: 0 0.2vw;
}











/*profile:*/

.profile_main_info {
    margin-top: 3.5vw;
}

input {
    font: inherit;
    font-size: inherit;
    background: inherit;
    border: inherit;
    color: inherit;
}
input:focus {outline: 0}



/** std_list: ocupa todo el ancho posible y el alto suficiente para satisfaces a sus hijos, sus hijos se posicionan en una fila separados equitativamente
  * std_list_column: es el hijo de std_list, es una columna que ocupa una posicion de la fila de std_list
  * std_list_param_name: es un titulo estilizado para una columna, es el primer hijo de la columna
  * std_list_value: son los valores de la columna para pada fila, son todos los hijos despues del std_list_param_name
*/
.std_list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
}

.std_list_column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    margin: 0 0.2vw;
}

.std_list_value {
    font-size: 1.2vw;
    white-space: nowrap;
}

.std_list_user_value {
    max-width: 15ch;
    overflow: hidden;
}

.std_list_param_name {
    align-items: center;
    font-size: 1vw;
    color: var(--hidden-color);
    white-space: nowrap;
}
/*---std_list---*/

/*row lists*/
.rlist{
    display: flex;
    width:100%;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.rlist_row{
    display:flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    margin-bottom: 0.3vw;
}

.rlist_value{
    margin: 0 0.1vw;
    font-size: 0.9vw;
}



.self_align_end {
    align-self: flex-end;
}

.self_align_start {
    align-self: flex-start;
}

.self_align_center {
    align-self: center;
}

.self_justify_center {
    justify-self: center;
}

.justify_start{
    justify-content: start;
}


.hidden_text {
    color: var(--hidden-color);
}

.main_text {
    color: var(--main-tc);
}

.important_text {
    color: var(--color-selec);
}

.user_summary{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.w_a_y_title{
    align-self: center;
    margin-top: 1.5vw;
}
.w_a_y_input {
    --max-font-size: 6.5vw;
    --min-font-size: 1vw;
    color: var(--main-tc);
    text-align: center;
    font-size: 6.5vw;
    width:100%;
    height: 7vw;
    border-bottom: 2px solid var(--hidden-color); 
}
.w_a_y_input:focus {
    color: var(--color-selec);
}

.w_a_y_guesses{
    align-self: center;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    width: 100%;
    pointer-events: none;
    align-items: center;
}
.w_a_y_input:focus + .w_a_y_guesses, .w_a_y_guess:hover{
    visibility: visible;
    pointer-events: all;
}
.w_a_y_guess{
    --width-border:1px;
    background-color: #0000004b;
    padding: 0 2vw;
    height:3vw;
    font-size: 1.5vw;
    width: fit-content;
    display: flex;
    align-items: center;
    
    color: var(--main-tc);
    border-bottom: var(--width-border) solid #4d4d4c; /*#4d4d4c es --hidden-color pero con el color embebido sin ser transparente*/
    border-top: var(--width-border) solid #4d4d4c;

    margin-top: 10px;
}
.w_a_y_guess:hover{
    color: var(--color-selec);
}

.std_etc_points {
    align-self: center;
    letter-spacing: 0.2vw;
    font-size: 1.5vw;
}


.matches_main_info {
    margin-top: 3.5vw;
}

.important_hover:hover {
    color:var(--color-selec);
}

.main_color_hover:hover {
    color:var(--main-tc) !important;
}

.opacity_hover:hover{
    opacity: 0.5;
}

.subtitle{
    margin-top: 1vw;
    margin-bottom: 0.5vw;
    color:var(--hidden-color);
    font-size: 2vw;
}

.main_l_margin {
    margin-bottom: 2vw;
}


.dont_display_tag {
    display: none !important;
}

.name_btn_container {
    position: absolute;
    top: -1vw;
    display: flex;
    flex-direction: row;

    visibility: hidden;
    pointer-events: none;
}

.name_btn {
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0.2;
    width: 1vw;
    height: 1vw;
    background-color: #00000000;
}

.p_name:hover + .name_btn_container, .name_btn_container:hover {
    visibility: visible;
    pointer-events: all;
}

.name_btn:hover {
    opacity: 1;
    /*background-color: #0000008a;*/
    z-index: 10;
    border-radius: 1vw;
}

.matches_popup_user {
    position:relative;
}

.matches_popup{
    --font-size:1vw;
    opacity: 0.8;
    font-size: var(--font-size);
    color: var(--main-tc);

    left:100%;
    top:50%;
    transform: translateY(calc(-0.5*var(--font-size)));
    position: absolute;

    display: none;
    flex-direction: column;
}
.matches_popup>a {
    width: fit-content;
    --width-border: 1px;
    display:flex;
    flex-direction: row;
    margin-bottom: calc(-1*var(--width-border));

    background-color: #000000d3;
    border-bottom: var(--width-border) solid #4d4d4c; /*#4d4d4c es --hidden-color pero con el color embebido sin ser transparente*/
    border-top: var(--width-border) solid #4d4d4c;
}
.matches_popup>a>span {
    margin:0 0.2vw;
    white-space: nowrap;
}

.matches_popup_user:hover>.matches_popup {
    display: flex;
}

.m_popup_left {
    left:0;
    transform: translate(-100%,calc(-0.5*var(--font-size)));
}

.glob_pers_container{
    width:100%;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.glob_pers_container>div{
    min-width: 0;
    display: flex;
    width: 50%;
    max-width: 50%;
    flex: 0 0 50%;
    justify-content: center;
    align-items: center;
}

.btn_glob_pers{
    --max-letter-spacing: 2vw;
    --letter-spacing: 2vw; 
    --max-font-size: 3vw;
    --min-font-size: 0.5vh;
    letter-spacing: var(--max-letter-spacing);
    font-size: var(--max-font-size);
    white-space: nowrap;
    margin-right: calc(-1*var(--letter-spacing));
}

.login_fix_for_matches {
    width:66%;
    display: flex;
    align-items: center;
    flex-direction: column;
}


.above_pace_color {
    color: var(--above-pace-color)
}
.under_pace_color {
    color: var(--under-pace-color)
}