/*globales mas de un dialog*/
.titulo-popup {
    width: 100%;
    height: 50px;
    background: black;
    display: flex;
    align-items: center; /*vertical*/
    justify-content: center; /*horizontal*/
}
/*personalizados*/
.titulo-text-popup-steam {
 font-weight: 500;
}
.link-como-jugar {
    /*linea borde por fuera ouline offset*/
    outline: none;
    font-weight: 500;
}
/*====================== MODAL USER_READY MI SALA ==================================*/
#dialog-user-ready {
    width: 540px;
    height: 280px;
    background: #101d23;
    border: 1px solid #1c2b32;
    padding: 0px;
    background-image: url("https://res.cloudinary.com/dmltnnzso/image/upload/v1663492283/paraiso-dotero/assets/backgrounddialog_xsq6k5.webp");
    background-size: auto;
}
#mensaje-dialog-user-ready {
    display: block;
    width: 440px;
    font-size: 18px;
    font-weight: 500;
    color: #ddd;
    /*centrar texto*/
    margin: 38px auto;
}
#dialog-user-ready::backdrop {
    background-color: rgba(0, 0, 0, 0.559);
}
#btn-accept-user-ready {
    display: block;
    width: 300px;
    height: 50px;
    /*margin auto para centrar horizontalmente*/
    margin: 20px auto;  
	cursor: pointer;
    border-radius: var(--border-radius);
    background-color: #29a862;
    border: none;

    font-weight: 500;
    font-size: 18px;
    text-shadow:
        0 0 7px #101d23,
        0 0 10px #101d23,
        0 0 21px #101d23;
}
#btn-accept-user-ready:hover {
    box-shadow: 0 0 10px 0 #29a862 inset, 0 0 20px 2px #29a862;
}
#close-dialog-user-rdy{
    width: 30px;
    position: absolute;
    top: 4px;
    right: 4px;
    cursor: pointer;
}

/*====================== MODAL INFO CUSTOM ===============================*/
#dialog-custom {
    border-radius: var(--border-radius);
    width: 430px;
    height: 164px;
    background: #101d23;
    border: 1px solid #1c2b32;
    padding: 0px;
    position: relative;
    background-size: auto;
    overflow: hidden;
}
#titulo-custom {
    width: 100%;
    height: 32px;
    background: black;
    display: flex; 
}
#titulo-text-custom {
    height: 32px;
    line-height: 32px;
    font-weight: 500;
    margin-left: 14px;
}
#mensaje-dialog-custom {
    display: block;
    width: 406px;
    height: 54px;
    color: #ddd;
    /*centrar texto*/
    margin: 14px;
    margin-top: 16px;
}
#dialog-custom::backdrop {
    background-color: rgba(0, 0, 0, 0.559);
}
#btn-accept-custom {
    display: block;
    width: 114px;
    height: 32px;
    line-height: 32px;
    margin: 0 auto;  
	cursor: pointer;
    border-radius: var(--border-radius);
    background-color: #29a862;
    border: none;

    font-weight: 500;
    text-shadow:
        0 0 7px #101d23,
        0 0 10px #101d23,
        0 0 21px #101d23;
}
#btn-accept-custom:hover {
    box-shadow: 0 0 10px 0 #29a862 inset, 0 0 20px 2px #29a862;   
}
#close-dialog-custom{
    width: 24px;
    position: absolute;
    top: 4px;
    right: 4px;
    cursor: pointer;
}
/*====================== MODAL YOU WIN ========================*/
#dialog_youwin {
	
    
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border-main);
	width: 420px;
    padding: 44px 0; /*only top and bottom*/
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at center, #443501 0%, black 100%);
	
}
#mensaje-dialog-youwin {
    font-size: 24px;
    line-height: 32px;
    margin: 0 auto;
    text-align: center;
}

#dialog_youwin::backdrop {
    background-color: rgba(0, 0, 0, 0.559);
}



/*====================== MODAL SUSCRIBIRSE PLUS ========================*/


#modal_plus_features_and_price {
    border-radius: var(--border-radius);
    width: 420px;
    background: radial-gradient(ellipse at center, #271127, black 100%);
    border: 1px solid var(--border-window-plus);
    padding: 0px;
    /*position: relative; para que no se pierda de foco al mover rueda hacia abajo*/
    background-size: auto;
    overflow: hidden;
}
#modal_plus_features_and_price::backdrop {
    background-color: rgba(0, 0, 0, 0.559);
}
.titulo-dialog-sub {
    height: 32px;
    position: relative;
}


.box-1-sub {
    padding-block: 28px;

}
.plan-name-sub {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
}
.container-costo {
    
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-top: 14px;

}
.costo-plan-sub {
    font-size: 24px;
    font-weight: 500;

}
.tiempo-plan-sub {
    font-size: 18px;
    color: var(--color-font-3);
    font-weight: 500;
    margin-left: 8px;
}

.box2-sub {
    padding-inline: 28px;
}
.feature-sub {
    padding-block: 8px;
    display: flex;
}
.check-feature-sub {
    display: inline-block;
    width: 22px;
    height: 22px;
}
.check-feature-sub path {
    color: var(--green-font);
}
.txt-feature-sub {
    display: inline-block;
    line-height: 22px;
    font-weight: 500;
    margin-left: 6px;
}


/*====================== MODAL PANEL PLUS ========================*/
#dialog-panel-plus {
    border-radius: var(--border-radius);
    width: 1200px;
    height: 600px;
    background-color: black;
    border: 1px solid var(--border-window-plus);
    padding: 0px;
    /*position: relative; para que no se pierda de foco al mover rueda hacia abajo*/
    background-size: auto;
    overflow: hidden;
    
}
#dialog-panel-plus::backdrop {
    background-color: rgba(0, 0, 0, 0.559);
}


#container-avoided-users {
    background: radial-gradient(ellipse at center, #440801, black 90%);
    width: 400px;
    height: 566px;
    margin: 16px;
}
.container-subtitle-panel-plus {
    border-bottom: 1px solid var(--color-red-dota);
}
.txt-subtitle-panel-plus {
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    color: var(--color-font-2);
    padding: 8px;
}
/*tabla evitados en panel plus*/
.card-evitado-panel-plus {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 400px;
    height: 84px;
    padding: 12px;
    
}
.img-avatar-evitado-panel-plus {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius);
    background-size: contain;
    background-repeat: no-repeat;
}
.container-names-evitado-panel-plus {
    width: 274px;
}
.apodo-evitado-panel-plus {
    font-size: 18px;
    color: var(--color-font-2);

}
.nick-evitado-panel-plus {
    font-size: 16px;
}
.btn-delete-evitado-panel-plus {
    width: 22px;
    height: 24px;
    cursor: pointer;
    color: var(--color-font-2);

}
.btn-delete-evitado-panel-plus:hover * {
    color: #d84545;
}

.golden-btn {
    display: inline-block;
    text-align: center;
    
    border-radius: var(--border-radius);
    text-decoration: none;
    background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
    border: 1px solid #a55d07;
    color: rgb(120,50,5);
    text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
    cursor: pointer;
    transition:
        background-size .2s ease-in-out,
        border .2s ease-in-out,
        color .2s ease-in-out,
        box-shadow  .2s ease-in-out;
    background-size: 100% 100%;
    background-position:center;
  }
.golden-btn:focus,
.golden-btn:hover {         
    background-size: 150% 150%;
    border: 1px solid rgba(165,93,7,.6);
    color: rgba(120,50,5,.8);
}
.golden-btn:active {
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
        inset 0 -2px 5px 1px #b17d10,
        inset 0 -1px 1px 3px rgba(250,227,133,1);
}
/*
.golden-btn:hover {
    box-shadow: 0 0 10px 0 #29a862 inset, 0 0 20px 2px #29a862;   
}
*/
/*SIZE*/
.btn-evitar-aliado {
    width: 114px;
    height: 32px;
    line-height: 30px;
    font-weight: 500;
}