@font-face {
    font-family: lato;
    src: url(fuentes/lato/Lato-Regular.ttf)
}

@font-face {
    font-family: lato-black;
    src: url(fuentes/lato/Lato-Black.ttf)
}

@font-face {
    font-family: nunito;
    src: url(fuentes/nunito/Nunito-VariableFont_wght.ttf)
}

html {
    scroll-behavior: smooth
}

@-webkit-keyframes timeout {
    0% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    100% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
}

@-webkit-keyframes setLetter {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes setLetter {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

body {
    line-height: 1;
    font-family: lato
}

ol,ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote:after,blockquote:before,q:after,q:before {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

input,select {
    outline: 0
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

a,a:hover {
    text-decoration: none!important;
    color: #fff!important
}

d-block {
    display: block
}

w-100 {
    width: 100%
}

img {
    vertical-align: top
}

button,input,select,textarea {
    outline: 0
}

body {
    width: 100%;
    height: 100%;
    margin: 0 auto
}

header {
    padding: 10px 40px 0 40px
}

.header_profile {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #99caff!important;
    font-weight: 600;
    text-align: center;
    gap: 10.5px
}

.header_profile.orange .menu_help_desktop_top span {
    background-color: coral!important
}

.flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.flex-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.flex-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.container {
    background-size: cover;
    max-width: 100%;
    height: 100%;
    min-height: calc(100vh - 104px)
}

.container.inicio {
    background-size: cover;
    max-width: 100%;
    height: 100%
}

.bg_blue {
    background-color: #1f224d
}

.logo_inicio {
    padding-top: 22px;
    padding-left: 55px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.body_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: nunito;
    margin-bottom: 80px
}

.texto_inicio {
    text-align: center;
    width: 458px;
    margin-left: 109px;
    font-size: 22px
}

.texto_inicio p {
    margin: 0 auto;
    margin-bottom: 30px;
    display: inline-block
}

.texto_inicio h1 {
    font-size: 36px;
    font-weight: 900;
    color: coral;
    margin-bottom: 8px
}

.subrayado_azul {
    color: #007bff;
    font-family: lato;
    font-weight: 900;
    font-size: 16px;
    padding-top: 18px;
    text-align: center;
}

.margin_subrayado {
    margin-bottom: 34px
}

footer {
    color: #007bff;
    font-family: lato;
    background-color: #99caff;
    height: 46px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    bottom: 0
}

.t_skyblue {
    color: #99caff;
    font-weight: bolder;
    text-decoration: underline;
    font-size: 20px
}

.box_formulario {
    -webkit-clip-path: polygon(4% 100%,96% 100%,100% 0,0 0);
    clip-path: polygon(4% 100%,96% 100%,100% 0,0 0);
    background-color: #fff;
    width: 516px;
    min-height: 480px;
    border-radius: 10px
}

.box_formulario h1 {
    text-align: center;
    line-height: 1.15
}

.box_formulario p {
    text-align: center;
    font-size: 18px;
    width: 364px;
    margin-top: 23px;
    margin-bottom: 13px;
    line-height: normal
}

.container h1 {
    font-family: nunito;
    font-size: 36px;
    font-weight: 900;
    color: coral;
    margin-bottom: 8px
}

.box-ilustracion {
    margin-top: 32px;
    margin-bottom: 29px
}

.box_formulario.recover .row_input {
    margin-bottom: 56px
}

.box_formulario.change {
    width: 526px;
    height: 490px
}

.box_formulario.change h1 {
    margin-top: 26px!important
}

.box_formulario.change p {
    text-align: start;
    font-size: 14px;
    width: 405px;
    line-height: 1.5
}

.box_formulario.change li {
    list-style-type: disc;
    font-size: 14px;
    line-height: normal
}

.box_formulario.change ul {
    margin-left: 20px
}

.box_formulario.change .top_input {
    margin-top: 20px
}

.box_formulario.change .row_input {
    margin-bottom: 36px
}

.box_formulario.change .row_input:nth-of-type(2) {
    margin-bottom: 47px
}

.h1_padding {
    padding-top: 36px
}

.row_input input {
    width: 434px;
    height: 54px;
    background-color: #f7f7f7;
    border: none;
    border-radius: 8px;
    padding: 15px 12px;
    color: #4a4a4a;
    font-size: 16px;
    font-family: lato;
    font-weight: 600
}

.row_input h2 {
    margin-bottom: 6px
}

.bottom_input {
    margin-bottom: 38px
}

.top_input {
    margin-top: 26px;
    position: relative
}

.box_formulario_create {
    background-color: #fff;
    width: 1040px;
    min-height: 480px;
    border-radius: 10px
}

.form_profile {
    gap: 52px
}

.row_input select {
    width: 434px;
    height: 54px;
    background-color: #f7f7f7;
    border: none;
    border-radius: 8px;
    padding: 15px 12px;
    color: #4a4a4a;
    font-size: 16px;
    font-family: lato;
    font-weight: 600
}

.checkbox {
    text-align: start;
    margin-bottom: 51px;
    position: relative
}

.checkbox a {
    text-decoration: underline;
    font-weight: 700;
    color: #000!important
}

.box_formulario_create .boton_registrar {
    margin-bottom: 28px
}

.box_formulario_welcome {
    background-color: #fff;
    width: 500px;
    min-height: 480px;
    border-radius: 10px
}

.box_formulario_welcome .boton_registrar {
    margin-bottom: 21px
}

.box_formulario_profile {
    background-color: #fff;
    width: 1040px;
    min-height: 480px;
    border-radius: 10px;
    position: relative
}

.box_formulario_profile .boton_registrar {
    margin-bottom: 36px
}

.box_formulario_profile .row_btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 15px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 25px
}

.boton_registrar.flex-center button {
    width: 100%;
    height: 100%;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    color: #fff;
    font-family: lato;
    font-weight: 900;
    font-size: 20px;
    -webkit-box-shadow: none;
    box-shadow: none
}

.text-danger {
    margin-top: 5px;
    margin-left: 8px;
    display: block;
    position: absolute;
    font-size: 14px;
    color: #dc3545
}

.border-danger {
    border: 1px solid #dc3545!important
}

.checkbox input {
    margin-right: 5px;
    vertical-align: middle
}

[disabled] {
    opacity: .8;
    cursor: default!important
}

input[disabled],select[disabled] {
    cursor: default!important
}

.queue_container {
    height: calc(100vh - 46px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 15px
}

.form-password {
    width: 80%
}

.form-password .row_input input {
    width: 100%
}

.boton_registrar.flex-center:hover {
    -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03)
}

a.btn_list {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.header_profile a {
    color: inherit!important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10.5px
}

.header_profile.edit {
    position: absolute;
    right: 15px
}

.ui-centrar-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ui_modal_avatar {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5)
}

.ui_marco_modal_avatar {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ui_contenido_avatar {
    width: 720px;
    padding: 20px 60px;
    background-color: #fff;
    border-radius: 8px;
    position: relative
}

.ui_item_avatar {
    width: 123px
}

.ui_item_avatar img {
    width: 100%
}

.ui_contenido_avatar .ui_titulo {
    font-family: Nunito;
    font-size: 32px;
    font-weight: 900;
    line-height: 43.65px;
    text-align: center;
    color: coral;
    margin-bottom: 33px
}

.ui_list_avatar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.ui_list_avatar .ui_item_avatar {
    margin-bottom: 30px
}

.ui_list_avatar .ui_item_avatar img {
    border-radius: 50%
}

.ui_contenido_avatar .close_modal {
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer
}

.ui_modal_busqueda {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5)
}

.ui_marco_modal_busqueda {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ui_contenido_modal_busqueda {
    width: 390px;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    position: relative
}

.ui_contenido_modal_busqueda .ui_titulo {
    font-family: Nunito;
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    color: #007bff
}

.ui_contenido_modal_busqueda .ui_ilustracion {
    text-align: center;
    margin-bottom: 20px
}

.ui_contenido_modal_busqueda .ui_mensaje {
    text-align: center;
    font-family: Lato;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.2px;
    text-align: center;
    color: #1f224d
}

.close_modal {
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer
}

.close_menu {
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer
}

.ui_menu_perfil {
    text-align: center
}

.ui_menu_perfil p {
    margin-top: 20px;
    margin-bottom: 40px;
    font-family: Lato;
    font-size: 22px;
    font-weight: 700;
    line-height: 26.4px;
    text-align: center;
    color: #99caff
}

.ui_modal_contenido_menu .ui_listado {
    font-family: Lato;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.2px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    margin-top: 50px
}

.ui_modal_contenido_menu .ui_listado li {
    margin-bottom: 15px;
    background-image: url(../fondo/boton_activo.png);
    background-size: 100% 100%;
    background-color: transparent;
    width: 299.07px;
    height: 57.54px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ui_btn_cerrar_sesion {
    text-align: center;
    width: 133px;
    height: 17px;
    color: #99caff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%
}

.ui-centrar-btn .boton_cerrar_juego {
    background-image: url(../fondo/boton_activo.png);
    background-size: 100% 100%;
    background-color: transparent;
    width: 250px;
    height: 45px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: Lato;
    font-size: 17px;
    font-weight: 900;
    line-height: 26.4px;
    text-align: center;
    color: #fff;
    cursor: pointer
}

.ui_modal_compartido {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.ui_marco_modal_compartido {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ui_modal_compartido .ui_modal_compartido_contenido {
    width: 370px;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    position: relative
}

.ui_modal_compartido .ui_modal_compartido_contenido .ui_titulo {
    font-family: Nunito;
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
    color: #007bff;
    text-align: center
}

.ui_modal_compartido .ui_modal_compartido_contenido .ui_icono_sala {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px
}

.ui_modal_compartido .ui_modal_compartido_contenido .ui_mensaje {
    font-family: Lato;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.2px;
    text-align: center;
    margin: 40px 20px 20px 20px
}

.ui_modal_compartido .ui_modal_compartido_contenido .ui_box_codigo {
    background-color: #c1dfff;
    padding: 10px;
    margin-bottom: 25px;
    text-align: center;
    border-radius: 20px;
    overflow: auto
}

.ui_modal_compartido .ui_modal_compartido_contenido .ui_box_codigo .ui_input_codigo {
    font-family: Lato;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    text-align: center
}

.nav-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    gap: 10px
}

nav {
    padding-bottom: 20px;
    width: 100%;
    height: 50px;
    background-color: #fff;
    position: fixed;
    z-index: 1060;
    top: 0;
    -webkit-box-shadow: rgba(0,0,0,.16) 0 1px 4px;
    box-shadow: rgba(0,0,0,.16) 0 1px 4px
}

.menu-desk {
    font-size: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 30px;
    list-style: none;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-left: 0
}

.nav-right {
    font-family: Raleway;
    font-size: 20px;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    color: #804bff;
    cursor: pointer;
    padding-right: 10px
}

.nav-mobile {
    display: none
}

.nav-head {
    -webkit-box-shadow: rgba(0,0,0,.16) 0 1px 4px;
    box-shadow: rgba(0,0,0,.16) 0 1px 4px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 11px 16px;
    background: #fff
}

.nav-head .logo {
    z-index: 101
}

.nav-mobile::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #804bff;
    opacity: .98;
    -webkit-transition: -webkit-transform ease-in-out .3s;
    transition: -webkit-transform ease-in-out .3s;
    -o-transition: transform ease-in-out .3s;
    transition: transform ease-in-out .3s;
    transition: transform ease-in-out .3s,-webkit-transform ease-in-out .3s;
    z-index: 100;
    -webkit-transform: translate(-100%,0);
    -ms-transform: translate(-100%,0);
    transform: translate(-100%,0)
}

.menu-mobile-list {
    position: fixed;
    width: 100%;
    line-height: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0;
    padding: 0;
    -webkit-transition: -webkit-transform ease-in-out .3s;
    transition: -webkit-transform ease-in-out .3s;
    -o-transition: transform ease-in-out .3s;
    transition: transform ease-in-out .3s;
    transition: transform ease-in-out .3s,-webkit-transform ease-in-out .3s;
    top: 35%;
    list-style: none;
    z-index: 101;
    -webkit-transform: translate(-100%,0);
    -ms-transform: translate(-100%,0);
    transform: translate(-100%,0)
}

.nav-mobile.toggle .img_logo_mob {
    background-image: url(../images/logos/logo-mecaso-white.svg);
    -webkit-transform: rotate3d(0,1,0,353deg);
    transform: rotate3d(0,1,0,353deg)
}

.img_logo_mob {
    background-image: url(../images/logos/logo-mecaso.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 126.38px;
    height: 32px;
    display: block;
    -webkit-transition: -webkit-transform ease-in-out .5s;
    transition: -webkit-transform ease-in-out .5s;
    -o-transition: transform ease-in-out .5s;
    transition: transform ease-in-out .5s;
    transition: transform ease-in-out .5s,-webkit-transform ease-in-out .5s
}

.img_logo_mob_user {
    background-image: url(../images/icons/icon-my-account.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    display: block;
    -webkit-transition: all ease-in-out .6s;
    -o-transition: all ease-in-out .6s;
    transition: all ease-in-out .6s
}

.nav-mobile.toggle .img_logo_mob_user {
    background-image: url(../images/icons/icon-my-account-white.svg)
}

.menu-mobile-list a {
    font-family: Raleway;
    font-size: 22px;
    line-height: 40px;
    color: #c1e4c7;
    text-decoration: none;
    cursor: pointer
}

.menu-mobile-list a:hover {
    font-size: 25px;
    font-weight: 700;
    color: #fff;
    -webkit-transition: all ease .3s;
    -o-transition: all ease .3s;
    transition: all ease .3s
}

.nav-head-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    z-index: 101
}

.menu-mobile {
    width: 32px;
    height: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #804bff;
    border-radius: 50%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1.94px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-transition: all ease-in-out .6s;
    -o-transition: all ease-in-out .6s;
    transition: all ease-in-out .6s
}

.menu-mobile span {
    width: 14.4px;
    height: 2.95px;
    border-radius: 10px;
    background-color: #fff;
    -webkit-transition: all ease-in-out .6s;
    -o-transition: all ease-in-out .6s;
    transition: all ease-in-out .6s
}

.nav-mobile.toggle .menu-mobile span {
    background-color: #804bff
}

nav ul li::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background-color: #c1e4c7;
    -webkit-transition: width .3s ease;
    -o-transition: width .3s ease;
    transition: width .3s ease
}

nav ul li:hover::after {
    width: 100%
}

.pulse:active {
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
    opacity: .8;
    color: rgba(128,75,255,.39)
}

.active {
    font-weight: 700;
    color: rgba(128,75,255,.39)!important;
    margin-top: 3px;
    line-height: .9
}

nav ul li::after:active {
    display: none
}

.menu-desk a {
    font-size: 80%;
    padding: 0 1px
}

.menu-desk a {
    color: #007bff;
    font-family: Nunito;
    height: 75%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all .3s cubic-bezier(.075,.82,.165,1);
    -o-transition: all .3s cubic-bezier(.075,.82,.165,1);
    transition: all .3s cubic-bezier(.075,.82,.165,1);
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-flex-line-pack: distribute;
    align-content: space-around;
    align-items: center
}

.menu-desk a:hover,a.logo-mecaso:hover {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    text-shadow: none
}

.menu-desk a::before,a.logo-mecaso::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 80%;
    background: -o-linear-gradient(330deg,rgba(255,255,255,0) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);
    background: linear-gradient(120deg,rgba(255,255,255,0) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);
    -webkit-transition: none;
    -o-transition: none;
    transition: none
}

.menu-desk a:hover::before,a.logo-mecaso:hover::before {
    left: 100%;
    -webkit-transition: left 1s;
    -o-transition: left 1s;
    transition: left 1s
}

.logo-mecaso img {
    max-width: 100%
}

.login-menu-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px
}

a.login-menu-container {
    list-style: none;
    text-decoration: none;
    color: #804bff;
    text-align: center
}

nav {
    background-color: transparent;
    -webkit-transition: background-color .3s ease,background-image .3s ease;
    -o-transition: background-color .3s ease,background-image .3s ease;
    transition: background-color .3s ease,background-image .3s ease;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000
}

.bg_transparent {
    background-color: transparent
}

nav.scrolled {
    background-color: transparent
}

nav.scrolled header {
    background: url("{{asset('plataform/fondo/fondo_entero.png')}}") no-repeat center center;
    background-size: cover;
    height: 50px;
    width: 100%
}
.bg_blue-active scrolled{
    background-color:rgba(31,34,77,1);

}
@media (max-width: 1380px) and (min-width:769px) {
    ul.menu-desk {
        gap:20px;
        text-align: center;
        padding: 0 20px
    }

    .menu-desk {
        font-size: 20px
    }

    .menu-mobile-list li:hover {
        font-family: Raleway;
        background-color: #c5b4ef;
        opacity: 2;
        width: 100%;
        height: auto;
        text-align: center
    }

    .menu-mobile-list a:hover {
        color: #6b3bdd
    }

    .nav-mobile.toggle .menu-mobile-list {
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0)
    }
}

@media (max-width: 768px) {
    .nav-mobile {
        display:block
    }

    nav {
        display: none
    }

    .nav-mobile {
        width: 100%;
        height: 50px;
        background-color: #fff;
        position: sticky;
        z-index: 1060;
        top: 0
    }

    .nav-mobile.toggle .menu-mobile-list {
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0)
    }

    .nav-mobile.toggle::before {
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0)
    }
    .header_profile_inf {
        gap: 20px !important;
    }
}

.c_white {
    color: #fff
}

.c_sky-blue2 {
    color: rgba(0,123,255,1) !important
}
.c_sky-blue {
    color: rgba(153, 202, 255, 1) !important
}

.fs-18 {
    font-size: 18px
}

.fs-24 {
    font-size: 24px
}

.pt-5 {
    padding-top: 5px
}

.pt_1 {
    padding-top: 1rem
}

.mb-0 {
    margin-bottom: 0!important
}

.m-0 {
    margin: 0!important
}

.ml_3 {
    margin-left: 3rem!important
}

.mt-2 {
    margin-top: 2rem!important
}

.pt_4 {
    padding-top: 4rem
}

.pt-pb_4 {
    padding: 4rem 0
}

.pt-pb_2 {
    padding: 2rem 0
}

.w-285 {
    width: 285px
}

.w_530 {
    width: 530px
}

.w_600 {
    width: 600px
}
a.label_information {
    color: #99caff;
    text-decoration: none;
}

a.label_information.active {
    color: coral !important;
}
.container-message {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 1110px;
    height: auto;
    gap: 48px;
    line-height: 1.2
}

.content-message {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 450px;
    height: auto;
    gap: 27px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: nunito
}

.bg_operation {
    min-height: 260px;
    max-height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    width: 530px;
    border-radius: 10px;
    background-color: rgba(31,34,77,1)
}

.mw-700 {
    max-width: 700px;
    width: 100%;
    height: auto
}

.text-left {
    text-align: left
}

nav.nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    color: #99caff!important;
    font-weight: 600;
    text-align: center;
    max-width: 494px;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 20px
}

@media (min-width: 601px) {
    .bg_light {
        background-image:url(/plataform/ilustraciones/light.png);
        background-size: 100% 100%
    }
}

@media (max-width: 1210px) {
    .container.inicio.flex-center .body_box.resp {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        margin-top: 35px;
        margin-bottom: 0px;
    }

    .container.inicio.flex-center .body_box.resp .imagen_inicio {
        margin-bottom: 30px;
        text-align: center;
        margin-top: 20px
    }

    .container.inicio.flex-center .body_box.resp .imagen_inicio img {
        width: 90%;
        max-width: 405px;
        height: auto
    }

    .container-message {
        max-width: 520px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 20px;
        margin-top: 1rem!important
    }

    .m_0-resp {
        margin: 0!important
    }

    .pt-pb_3_resp {
        padding: 3rem!important
    }

    .container.inicio.flex-center .body_box.resp .imagen_inicio img.img_operation,.container.inicio.flex-center .body_box.resp .texto_inicio img.img_operation {
        width: 100vw;
        height: auto;
        max-width: 167px
    }

    .p_0-resp {
        padding: 0
    }
}

@media (max-width: 1024px) {
    header {
        padding-left:10px!important;
        padding-right: 10px;
        margin-bottom: 36px;
    }

    .logo_inicio {
        padding: 10px;
        text-align: center;
        border-bottom: 1px solid #e8e8e8
    }

    .container.inicio.flex-center .body_box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%
    }

    .container.inicio.flex-center .body_box .imagen_inicio {
        margin-bottom: 30px;
        text-align: center;
        margin-top: 20px
    }

    .container.inicio.flex-center .body_box .imagen_inicio img {
        width: 90%;
        max-width: 405px;
        height: auto
    }

    .texto_inicio p {
        width: 100%;
        max-width: 373px
    }

    .container.inicio .texto_inicio {
        margin: 0 auto;
        width: 90%
    }

    .body-page header {
        text-align: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 10px;
        margin-bottom: 0
    }

    .box_formulario_welcome {
        width: 90%;
        max-width: 500px;
        min-height: auto;
        padding-bottom: 30px
    }

    .box_formulario_welcome h1 {
        font-size: 36px
    }

    .box_formulario_welcome div.box-ilustracion {
        text-align: center;
        margin-top: 36px;
        margin-bottom: 42px
    }

    .box_formulario_welcome div.box-ilustracion img {
        width: 90%
    }

    .box_formulario_welcome .boton_registrar {
        max-width: 300px;
        background-size: 100% 100%;
        font-size: 18px;
        height: 50px
    }

    footer {
        font-size: 13px
    }

    .box_formulario.change {
        width: 90%;
        max-width: 500px;
        min-height: auto;
        height: auto;
        padding-bottom: 30px;
        padding: 10px 15px
    }

    .box_formulario.change p {
        width: 90%;
        max-width: 405px;
        margin-top: 15px
    }

    .row_input.bottom_input {
        width: 90%
    }

    .box_formulario.change .row_input input[type=text] {
        width: 100%
    }

    .box_formulario.change h1 {
        font-size: 22px
    }

    .box_formulario.change .row_input h2 {
        font-size: 13px;
        margin-bottom: 5px
    }

    .box_formulario.change {
        -webkit-clip-path: polygon(0 100%,100% 100%,100% 0,0 0);
        clip-path: polygon(0 100%,100% 100%,100% 0,0 0)
    }

    .box_formulario.change .boton_registrar {
        width: 95%;
        max-width: 300px;
        background-size: 100% 100%;
        margin-bottom: 32px!important
    }

    .box_formulario.change .row_input:nth-of-type(2) {
        margin-bottom: 40px
    }

    .box_formulario_create {
        max-width: 400px;
        margin-top: 30px
    }

    .box_formulario_create .form_profile {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        gap: 0
    }

    .body-page .container {
        height: auto;
        min-height: calc(100vh - 127px);
        margin-bottom: 20px;
        padding: 5px 15px
    }

    .box_formulario_create .row_input.bottom_input {
        width: 90%;
        margin-bottom: 7px;
        margin-top: 7px
    }

    .box_formulario_create .row_input.bottom_input h2 {
        font-size: 14px;
        margin-bottom: 7px
    }

    .box_formulario_create .row_input input {
        width: 100%
    }

    .box_formulario_create .row_input select {
        width: 100%
    }

    .box_formulario_create h1.top_input {
        margin-bottom: 20px;
        font-size: 22px
    }

    .box_formulario_create .checkbox {
        padding-left: 15px;
        font-size: 15px;
        line-height: 1.4
    }

    .box_formulario_create .checkbox input {
        margin-right: 5px
    }

    .box_formulario_create .boton_registrar {
        width: 90%;
        background-size: 100% 100%
    }

    .text-danger {
        margin-top: 5px;
        margin-left: 2px;
        position: relative
    }

    .box_formulario_profile {
        margin-top: 20px;
        width: 90%;
        max-width: 550px
    }

    .box_formulario_profile .form_profile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        gap: 0;
        margin-top: 20px
    }

    .box_formulario_profile h1 {
        font-size: 22px;
        margin-bottom: 20px
    }

    .box_formulario_profile .form_profile .row_input input {
        width: 100%
    }

    .box_formulario_profile .form_profile .row_input select {
        width: 100%
    }

    .box_formulario_profile .form_profile .row_input {
        margin-bottom: 7px;
        margin-top: 7px
    }

    .box_formulario_profile form {
        width: 100%
    }

    .box_formulario_profile .boton_registrar {
        margin-top: 30px;
        background-size: 100% 100%
    }

    .box_formulario_profile .header_profile {
        display: block
    }

    .box_formulario_profile .row_btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 25px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column-reverse
    }

    .box_formulario.recover {
        width: 100%;
        max-width: 400px;
        -webkit-clip-path: polygon(0 100%,100% 100%,100% 0,0 0);
        clip-path: polygon(0 100%,100% 100%,100% 0,0 0)
    }

    .box_formulario.recover h1 {
        font-size: 26px
    }

    .box_formulario.recover p {
        font-size: 16px
    }

    .box_formulario.recover form {
        width: 100%
    }

    .box_formulario.recover .row_input input {
        width: 100%
    }

    .box_formulario.recover .row_input h2 {
        font-size: 14px;
        margin-bottom: 10px
    }

    .box_formulario.recover .boton_registrar {
        width: 100%;
        max-width: 300px;
        background-size: 100% 100%
    }

    .formulario-register {
        width: 500px;
        -webkit-clip-path: polygon(0 100%,100% 100%,100% 0,0 0);
        clip-path: polygon(0 100%,100% 100%,100% 0,0 0)
    }

    .formulario-register form {
        width: 100%
    }

    .formulario-register .row_input input {
        width: 100%
    }

    .formulario-register .boton_registrar {
        background-size: 100% 100%
    }

    .ui_tablero .ui_tablero_item {
        width: 47px;
        height: 47px
    }

    .ui_tablero_letras {
        width: 400px
    }

    .ui-tablero-letra {
        width: 33px;
        height: 33px;
        font-size: 24px
    }

    .ui_panel_jugadores {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 15px!important;
        margin: 20px auto!important
    }

    .ui_letras {
        width: auto
    }

    .ui_letras .ui_textos .texto3 {
        height: auto;
        margin-top: 14px
    }

    .ui_letra_confirmar {
        margin-top: 30px
    }

    .ui_contenido_juego {
        padding-top: 0;
        padding-bottom: 0
    }

    .ui_detalle_jugada {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 39px;
        margin-bottom: 20px
    }

    .ui_contenido_marco_resultado {
        width: 85%;
        max-width: 680px
    }

    .ui_detalle_jugada .ui_detalle_nombres {
        width: 280px;
        text-align: center
    }

    .ui_detalle_jugada .ui_detalle_nombres .ui_item_nombre,.ui_tablero_compartido .ui_item_nombre {
        width: 100%;
        min-width: 280px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        padding: 10px 15px
    }

    .ui_contenido_avatar {
        width: 80%;
        max-width: 550px
    }

    .ui_list_avatar {
        overflow-y: scroll;
        max-height: 530px;
        margin-bottom: 30px
    }

    .ui_list_avatar::-webkit-scrollbar {
        background: coral;
        width: 8px;
        border-radius: 50px
    }

    .ui_list_avatar::-webkit-scrollbar-thumb {
        background-color: coral;
        border-radius: 50px;
        height: 5px
    }

    .ui_list_avatar::-webkit-scrollbar-track {
        background-color: #f1efeb;
        border-radius: 50px
    }

    .ui_list_avatar {
        padding-right: 20px
    }

    .form-password {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .container.inicio .texto_inicio.force {
        margin: 0 auto!important;
        padding: 48px 20px 0!important;
        width: 100%
    }
}

@media (max-width: 600px) {
    .container.inicio h1 {
        font-size:24px
    }

    .container.inicio .texto_inicio p {
        font-size: 18px;
        margin-top: 5px;
        line-height: 1.2
    }

    .box_formulario_welcome {
        width: 100%;
        max-width: 360px
    }

    .ui_contenido_avatar {
        max-width: 430px
    }

    .container-message {
        width: 100%
    }

    .content-message {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%
    }

    .bg_operation {
        width: 100%;
        margin: auto
    }

    .w-285 {
        width: 100%;
        padding: 0 30px
    }

    .container.inicio.flex-center .body_box.resp .imagen_inicio img.img_operation {
        width: 35vw;
        height: auto;
        max-width: 167px
    }

    .bg_light_2 {
        background-image: url(/plataform/ilustraciones/light.png);
        background-size: 100% 100%
    }
}

@media (max-width: 440px) {
    .ui-tablero-letra {
        font-size:20px!important
    }

    .ui_tablero .ui_marco_tablero {
        max-width: 250px!important;
        height: auto
    }

    .ui_tablero .ui_tablero_item {
        width: 49px!important;
        height: 49px!important;
        font-size: 25px!important
    }

    .ui_logo_gramat {
        width: 140px
    }

    .ui_logo_gramat img {
        width: 100%
    }

    .header-juego .ui_opcion span {
        font-size: 16px!important
    }
}

.ui-centrar-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@-webkit-keyframes searching {
    0% {
        -webkit-transform: translate(55px,40px);
        transform: translate(55px,40px)
    }

    25% {
        -webkit-transform: translate(55px,0);
        transform: translate(55px,0)
    }

    50% {
        -webkit-transform: translate(-90px,50px);
        transform: translate(-90px,50px)
    }

    75% {
        -webkit-transform: translate(-90px,0);
        transform: translate(-90px,0)
    }

    100% {
        -webkit-transform: translate(55px,40px);
        transform: translate(55px,40px)
    }
}

@keyframes searching {
    0% {
        -webkit-transform: translate(55px,40px);
        transform: translate(55px,40px)
    }

    25% {
        -webkit-transform: translate(55px,0);
        transform: translate(55px,0)
    }

    50% {
        -webkit-transform: translate(-90px,50px);
        transform: translate(-90px,50px)
    }

    75% {
        -webkit-transform: translate(-90px,0);
        transform: translate(-90px,0)
    }

    100% {
        -webkit-transform: translate(55px,40px);
        transform: translate(55px,40px)
    }
}

.ui_modal_avatar {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5)
}

.ui_marco_modal_avatar {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ui_contenido_avatar {
    width: 720px;
    padding: 20px 60px;
    background-color: #fff;
    border-radius: 8px;
    position: relative
}

.ui_item_avatar {
    width: 123px
}

.ui_item_avatar img {
    width: 100%;
    cursor: pointer
}

.ui_contenido_avatar .ui_titulo {
    font-family: Nunito;
    font-size: 32px;
    font-weight: 900;
    line-height: 43.65px;
    text-align: center;
    color: coral;
    margin-bottom: 33px
}

.ui_list_avatar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.ui_list_avatar .ui_item_avatar {
    margin-bottom: 30px
}

.ui_list_avatar .ui_item_avatar img {
    border-radius: 50%;
    background-color: #e9f3ff
}

.ui_contenido_avatar .close_modal {
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer
}

.ui_modal_busqueda {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5)
}

.ui_marco_modal_busqueda {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ui_contenido_modal_busqueda {
    width: 390px;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    position: relative
}

.ui_contenido_modal_busqueda .ui_titulo {
    font-family: Nunito;
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    color: #007bff
}

.ui_contenido_modal_busqueda .ui_ilustracion {
    text-align: center;
    margin-bottom: 20px;
    position: relative
}

.ui_contenido_modal_busqueda .ui_mensaje {
    text-align: center;
    font-family: Lato;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.2px;
    text-align: center;
    color: #1f224d
}

.close_modal {
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer
}

.ui_modal_menu {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #1f224d;
    z-index: 100
}

.ui_marco_modal_menu {
    position: relative;
    padding-top: 70px
}

.close_menu {
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer
}

.ui_menu_perfil {
    text-align: center
}

.ui_menu_perfil p {
    margin-top: 20px;
    margin-bottom: 40px;
    font-family: Lato;
    font-size: 22px;
    font-weight: 700;
    line-height: 26.4px;
    text-align: center;
    color: #99caff
}

.ui_modal_contenido_menu .ui_listado {
    font-family: Lato;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.2px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    margin-top: 50px
}

.ui_modal_contenido_menu .ui_listado li {
    margin-bottom: 15px;
    background-image: url(../fondo/boton_activo.png);
    background-size: 100% 100%;
    background-color: transparent;
    width: 299.07px;
    height: 57.54px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ui_btn_cerrar_sesion {
    text-align: center;
    width: 133px;
    height: 17px;
    color: #99caff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%
}

img.ui_lupa_buscar {
    position: absolute;
    left: 35%
}

img.ui_lupa_buscar.searching {
    -webkit-animation: searching;
    animation: searching;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 3s;
    animation-duration: 3s
}

.ui_item_avatar.active img {
    border: 3px solid #007bff
}

.bg_marco.pointer {
    cursor: pointer
}

.ui_modal_resultado {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    z-index: 1000;
    overflow: hidden
}

.ui_marco_modal_resultado {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 15px
}

.ui_contenido_marco_resultado {
    width: 100%;
    max-width: 800px;
    background-color: #fff;
    border-radius: 10px;
    padding: 30px 30px;
    height: 100%;
    overflow: auto;
    max-height: -webkit-max-content;
    max-height: -moz-max-content;
    max-height: max-content
}

.ui_contenido_marco_resultado .ui_estado_resultado {
    text-align: center
}

.ui_contenido_marco_resultado .ui_estado_resultado p {
    font-family: Nunito;
    font-size: 34px;
    font-weight: 900;
    line-height: 46.38px;
    text-align: center;
    color: coral
}

.ui_detalle_jugada {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 35px;
    margin-bottom: 65px
}

.ui_detalle_jugada .ui_detalle_tablero {
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ui_detalle_jugada .ui_detalle_nombres .ui_item_nombre,.ui_tablero_compartido .ui_item_nombre {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #1f224d;
    padding: 15px 30px;
    border-radius: 50px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 25px;
    width: 10%;
    min-width: 260px
}

.ui_tablero_compartido .ui_icono_usuario {
    width: 30px;
    margin-right: 15px
}

.ui_detalle_jugada .ui_detalle_nombres .ui_item_nombre .ui_icono_usuario {
    width: 44px;
    margin-right: 15px
}

.ui_item_nombre_info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ui_tablero_compartido .ui_nombre_usuario {
    font-family: Lato;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    color: #99caff
}

.ui_detalle_jugada .ui_detalle_nombres .ui_item_nombre .ui_nombre_usuario {
    font-family: Lato;
    font-size: 18px;
    font-weight: 700;
    line-height: 26.4px;
    text-align: center;
    color: #99caff;
    margin-left: 10px
}

.ui_tablero_compartido .ui_puntos_usuario {
    font-family: Lato;
    font-size: 11px;
    font-weight: 700;
    line-height: 21.6px;
    text-align: center;
    color: #fff
}

.ui_detalle_jugada .ui_detalle_nombres .ui_item_nombre .ui_info_usuario_puntos .ui_puntos_usuario {
    font-family: Lato;
    font-size: 14px;
    font-weight: 700;
    line-height: 21.6px;
    text-align: center;
    color: #fff
}

.ui_info_ver_tablero_oponente {
    font-family: Lato;
    font-size: 18px;
    font-weight: 900;
    line-height: 21.6px;
    text-align: center;
    color: #007bff
}

.ui_contenido_marco_resultado .ui_detalle_jugada .ui_box_jugadas {
    background-color: #14173b;
    padding: 10px
}

.ui_contenido_marco_resultado .ui_detalle_jugada .ui_marco_jugadas {
    background-color: #303160;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 5px
}

.ui_contenido_marco_resultado .ui_detalle_jugada .ui_item_jugada {
    width: 44px;
    height: 44px;
    border-radius: 5px;
    background-color: #007bff;
    margin: 5px;
    font-family: Lato;
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.ui_contenido_marco_resultado .ui_detalle_jugada .ui_item_jugada.ui_variante {
    background-color: coral
}

.ui_contenido_marco_resultado .ui_detalle_jugada .ui_item_jugada .punto {
    width: 44px;
    height: 44px;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #1f224d;
    font-family: Nunito;
    font-size: 15.06px;
    font-weight: 700;
    line-height: 20.54px;
    text-align: center
}

.ui_contenido_marco_resultado .ui_detalle_jugada .ui_item_jugada .punto.punto-h {
    right: -65px
}

.ui_contenido_marco_resultado .ui_detalle_jugada .ui_item_jugada .punto.punto-v {
    bottom: -65px
}

.ui_estado_resultado span {
    font-family: Lato;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-left: 10px
}

.disconnected {
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
}

a.boton_cerrar_juego.flex-center {
    text-decoration: none
}

.ui_box_jugadas.short {
    width: 260px
}

.ui_box_jugadas.long {
    width: 300px
}

.ui_box_jugadas.long .ui_marco_jugadas {
    width: 280px
}

.ui_box_jugadas.short .ui_marco_jugadas {
    width: 240px
}

.ui_letras {
    width: 470px
}

.ui_tablero_letras {
    background-color: #303160;
    width: 100%;
    max-width: 470px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;
    grid-template-columns: repeat(9,1fr);
    -ms-grid-rows: auto 10px auto 10px auto;
    grid-template-rows: repeat(3,auto);
    gap: 10px;
    padding: 10px
}

.ui_tablero_letras>:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1
}

.ui_tablero_letras>:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3
}

.ui_tablero_letras>:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5
}

.ui_tablero_letras>:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 7
}

.ui_tablero_letras>:nth-child(5) {
    -ms-grid-row: 1;
    -ms-grid-column: 9
}

.ui_tablero_letras>:nth-child(6) {
    -ms-grid-row: 1;
    -ms-grid-column: 11
}

.ui_tablero_letras>:nth-child(7) {
    -ms-grid-row: 1;
    -ms-grid-column: 13
}

.ui_tablero_letras>:nth-child(8) {
    -ms-grid-row: 1;
    -ms-grid-column: 15
}

.ui_tablero_letras>:nth-child(9) {
    -ms-grid-row: 1;
    -ms-grid-column: 17
}

.ui_tablero_letras>:nth-child(10) {
    -ms-grid-row: 3;
    -ms-grid-column: 1
}

.ui_tablero_letras>:nth-child(11) {
    -ms-grid-row: 3;
    -ms-grid-column: 3
}

.ui_tablero_letras>:nth-child(12) {
    -ms-grid-row: 3;
    -ms-grid-column: 5
}

.ui_tablero_letras>:nth-child(13) {
    -ms-grid-row: 3;
    -ms-grid-column: 7
}

.ui_tablero_letras>:nth-child(14) {
    -ms-grid-row: 3;
    -ms-grid-column: 9
}

.ui_tablero_letras>:nth-child(15) {
    -ms-grid-row: 3;
    -ms-grid-column: 11
}

.ui_tablero_letras>:nth-child(16) {
    -ms-grid-row: 3;
    -ms-grid-column: 13
}

.ui_tablero_letras>:nth-child(17) {
    -ms-grid-row: 3;
    -ms-grid-column: 15
}

.ui_tablero_letras>:nth-child(18) {
    -ms-grid-row: 3;
    -ms-grid-column: 17
}

.ui_tablero_letras>:nth-child(19) {
    -ms-grid-row: 5;
    -ms-grid-column: 1
}

.ui_tablero_letras>:nth-child(20) {
    -ms-grid-row: 5;
    -ms-grid-column: 3
}

.ui_tablero_letras>:nth-child(21) {
    -ms-grid-row: 5;
    -ms-grid-column: 5
}

.ui_tablero_letras>:nth-child(22) {
    -ms-grid-row: 5;
    -ms-grid-column: 7
}

.ui_tablero_letras>:nth-child(23) {
    -ms-grid-row: 5;
    -ms-grid-column: 9
}

.ui_tablero_letras>:nth-child(24) {
    -ms-grid-row: 5;
    -ms-grid-column: 11
}

.ui_tablero_letras>:nth-child(25) {
    -ms-grid-row: 5;
    -ms-grid-column: 13
}

.ui_tablero_letras>:nth-child(26) {
    -ms-grid-row: 5;
    -ms-grid-column: 15
}

.ui_tablero_letras>:nth-child(27) {
    -ms-grid-row: 5;
    -ms-grid-column: 17
}

.ui_letra_confirmar {
    text-align: center;
    margin-top: 10px
}

.ui_letra_confirmar .btn_confirmar {
    background-image: url(../fondo/boton_activo.png);
    background-size: 100% 100%;
    background-color: transparent;
    width: 299.07px;
    height: 57.54px;
    border: none;
    color: #fff;
    font-family: lato;
    font-weight: 900;
    font-size: 20px;
    cursor: pointer;
    -webkit-appearance: none;
    border: 0
}

.ui_letra_confirmar .btn_confirmar.inactivo {
    opacity: .7;
    cursor: default
}

.ui_tablero .ui_tablero_item {
    width: 66px;
    height: 66px;
    background-color: #7071a2;
    cursor: pointer;
    color: #fff;
    font-family: lato;
    font-weight: 900;
    font-size: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.modal-match-juego {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000
}

.ui-tablero-letra:focus {
    background: #303160;
    border: 2px solid coral;
    outline: #ffdead
}

.ui-tablero-letra.active {
    border: 2px solid coral;
    background: #303160;
    color: #ffffff !important;
}

.ui-tablero-letra[disabled] {
    opacity: .6;
    cursor: default
}

.ui_marco_tablero.short {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4,1fr);
    -ms-grid-rows: (auto)[4];
    grid-template-rows: repeat(4,auto)
}

.ui_marco_tablero.short>:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1
}

.ui_marco_tablero.short>:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2
}

.ui_marco_tablero.short>:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3
}

.ui_marco_tablero.short>:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 4
}

.ui_marco_tablero.short>:nth-child(5) {
    -ms-grid-row: 2;
    -ms-grid-column: 1
}

.ui_marco_tablero.short>:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 2
}

.ui_marco_tablero.short>:nth-child(7) {
    -ms-grid-row: 2;
    -ms-grid-column: 3
}

.ui_marco_tablero.short>:nth-child(8) {
    -ms-grid-row: 2;
    -ms-grid-column: 4
}

.ui_marco_tablero.short>:nth-child(9) {
    -ms-grid-row: 3;
    -ms-grid-column: 1
}

.ui_marco_tablero.short>:nth-child(10) {
    -ms-grid-row: 3;
    -ms-grid-column: 2
}

.ui_marco_tablero.short>:nth-child(11) {
    -ms-grid-row: 3;
    -ms-grid-column: 3
}

.ui_marco_tablero.short>:nth-child(12) {
    -ms-grid-row: 3;
    -ms-grid-column: 4
}

.ui_marco_tablero.short>:nth-child(13) {
    -ms-grid-row: 4;
    -ms-grid-column: 1
}

.ui_marco_tablero.short>:nth-child(14) {
    -ms-grid-row: 4;
    -ms-grid-column: 2
}

.ui_marco_tablero.short>:nth-child(15) {
    -ms-grid-row: 4;
    -ms-grid-column: 3
}

.ui_marco_tablero.short>:nth-child(16) {
    -ms-grid-row: 4;
    -ms-grid-column: 4
}

.ui_marco_tablero.long {
    -ms-grid-columns: (1fr)[5]!important;
    grid-template-columns: repeat(5,1fr)!important;
    -ms-grid-rows: (auto)[5]!important;
    grid-template-rows: repeat(5,auto)!important;
    max-width: 401px!important
}

.ui_marco_tablero.long>:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1
}

.ui_marco_tablero.long>:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2
}

.ui_marco_tablero.long>:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3
}

.ui_marco_tablero.long>:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 4
}

.ui_marco_tablero.long>:nth-child(5) {
    -ms-grid-row: 1;
    -ms-grid-column: 5
}

.ui_marco_tablero.long>:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 1
}

.ui_marco_tablero.long>:nth-child(7) {
    -ms-grid-row: 2;
    -ms-grid-column: 2
}

.ui_marco_tablero.long>:nth-child(8) {
    -ms-grid-row: 2;
    -ms-grid-column: 3
}

.ui_marco_tablero.long>:nth-child(9) {
    -ms-grid-row: 2;
    -ms-grid-column: 4
}

.ui_marco_tablero.long>:nth-child(10) {
    -ms-grid-row: 2;
    -ms-grid-column: 5
}

.ui_marco_tablero.long>:nth-child(11) {
    -ms-grid-row: 3;
    -ms-grid-column: 1
}

.ui_marco_tablero.long>:nth-child(12) {
    -ms-grid-row: 3;
    -ms-grid-column: 2
}

.ui_marco_tablero.long>:nth-child(13) {
    -ms-grid-row: 3;
    -ms-grid-column: 3
}

.ui_marco_tablero.long>:nth-child(14) {
    -ms-grid-row: 3;
    -ms-grid-column: 4
}

.ui_marco_tablero.long>:nth-child(15) {
    -ms-grid-row: 3;
    -ms-grid-column: 5
}

.ui_marco_tablero.long>:nth-child(16) {
    -ms-grid-row: 4;
    -ms-grid-column: 1
}

.ui_marco_tablero.long>:nth-child(17) {
    -ms-grid-row: 4;
    -ms-grid-column: 2
}

.ui_marco_tablero.long>:nth-child(18) {
    -ms-grid-row: 4;
    -ms-grid-column: 3
}

.ui_marco_tablero.long>:nth-child(19) {
    -ms-grid-row: 4;
    -ms-grid-column: 4
}

.ui_marco_tablero.long>:nth-child(20) {
    -ms-grid-row: 4;
    -ms-grid-column: 5
}

.ui_marco_tablero.long>:nth-child(21) {
    -ms-grid-row: 5;
    -ms-grid-column: 1
}

.ui_marco_tablero.long>:nth-child(22) {
    -ms-grid-row: 5;
    -ms-grid-column: 2
}

.ui_marco_tablero.long>:nth-child(23) {
    -ms-grid-row: 5;
    -ms-grid-column: 3
}

.ui_marco_tablero.long>:nth-child(24) {
    -ms-grid-row: 5;
    -ms-grid-column: 4
}

.ui_marco_tablero.long>:nth-child(25) {
    -ms-grid-row: 5;
    -ms-grid-column: 5
}

.ui_tablero_item.ui_variante {
    background-color: coral!important
}

.ui_tablero_item.ui_nat {
    background-color: #007bff!important
}

audio {
    display: none
}

.ui_timer.timeout {
    -webkit-animation: timeout;
    animation: timeout;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.ui_fondo_gramat {
    background: #1f224d;
    position: relative
}

.header-juego {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.header-juego .ui_opcion span {
    font-size: 18px;
    font-family: lato;
    color: #99caff;
    font-weight: 900
}

.ui_contenido_juego {
    height: 100%;
    min-height: calc(100vh - 46px);
    padding-top: 45px;
    padding-bottom: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ui_timer {
    font-size: 24px;
    font-family: lato;
    color: #99caff;
    font-weight: 900;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ui_timer img {
    margin-right: 10px
}

.ui_info_jugadores {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 10px
}

.ui_datos_jugadores {
    background: #303160;
    border-radius: 40px;
    width: 100%;
    gap: 15px;
    max-width: 538px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    margin-top: 20px
}

.ui_datos_jugadores .ui_dato_jugador {
    background: #1f224d;
    border-radius: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    font-family: Lato;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: #99caff;
    border: 3px solid #1f224d;
    cursor: pointer
}

.ui_datos_jugadores .ui_dato_jugador.activado {
    border: 3px solid coral
}

.ui_datos_jugadores .ui_dato_jugador span {
    margin-left: 15px
}

.ui_panel_jugadores {
    width: 100%;
    gap: 35px;
    margin: 30px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center
}

.ui_tablero {
    padding: 15px;
    border-radius: 10px;
    background: #14173b
}

.ui_letras {
    width: 100%;
    max-width: 470px
}

.ui_tablero_letras>:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1
}

.ui_tablero_letras>:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3
}

.ui_tablero_letras>:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5
}

.ui_tablero_letras>:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 7
}

.ui_tablero_letras>:nth-child(5) {
    -ms-grid-row: 1;
    -ms-grid-column: 9
}

.ui_tablero_letras>:nth-child(6) {
    -ms-grid-row: 1;
    -ms-grid-column: 11
}

.ui_tablero_letras>:nth-child(7) {
    -ms-grid-row: 1;
    -ms-grid-column: 13
}

.ui_tablero_letras>:nth-child(8) {
    -ms-grid-row: 1;
    -ms-grid-column: 15
}

.ui_tablero_letras>:nth-child(9) {
    -ms-grid-row: 1;
    -ms-grid-column: 17
}

.ui_tablero_letras>:nth-child(10) {
    -ms-grid-row: 3;
    -ms-grid-column: 1
}

.ui_tablero_letras>:nth-child(11) {
    -ms-grid-row: 3;
    -ms-grid-column: 3
}

.ui_tablero_letras>:nth-child(12) {
    -ms-grid-row: 3;
    -ms-grid-column: 5
}

.ui_tablero_letras>:nth-child(13) {
    -ms-grid-row: 3;
    -ms-grid-column: 7
}

.ui_tablero_letras>:nth-child(14) {
    -ms-grid-row: 3;
    -ms-grid-column: 9
}

.ui_tablero_letras>:nth-child(15) {
    -ms-grid-row: 3;
    -ms-grid-column: 11
}

.ui_tablero_letras>:nth-child(16) {
    -ms-grid-row: 3;
    -ms-grid-column: 13
}

.ui_tablero_letras>:nth-child(17) {
    -ms-grid-row: 3;
    -ms-grid-column: 15
}

.ui_tablero_letras>:nth-child(18) {
    -ms-grid-row: 3;
    -ms-grid-column: 17
}

.ui_tablero_letras>:nth-child(19) {
    -ms-grid-row: 5;
    -ms-grid-column: 1
}

.ui_tablero_letras>:nth-child(20) {
    -ms-grid-row: 5;
    -ms-grid-column: 3
}

.ui_tablero_letras>:nth-child(21) {
    -ms-grid-row: 5;
    -ms-grid-column: 5
}

.ui_tablero_letras>:nth-child(22) {
    -ms-grid-row: 5;
    -ms-grid-column: 7
}

.ui_tablero_letras>:nth-child(23) {
    -ms-grid-row: 5;
    -ms-grid-column: 9
}

.ui_tablero_letras>:nth-child(24) {
    -ms-grid-row: 5;
    -ms-grid-column: 11
}

.ui_tablero_letras>:nth-child(25) {
    -ms-grid-row: 5;
    -ms-grid-column: 13
}

.ui_tablero_letras>:nth-child(26) {
    -ms-grid-row: 5;
    -ms-grid-column: 15
}

.ui_tablero_letras>:nth-child(27) {
    -ms-grid-row: 5;
    -ms-grid-column: 17
}

.ui-tablero-letra {
    width: 100%;
    max-width: 41px;
    height: 41px;
    background: #7071a2;
    font-family: Lato;
    font-size: 27.65px;
    font-weight: 900;
    line-height: 33.18px;
    color: #fff;
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    border-radius: 3px;
    outline: 0;
    border: #ffdead
}

.ui_letra_seleccionada {
    background: #7071a2;
    width: 60px;
    height: 60px;
    border-radius: 3px;
    font-family: Lato;
    font-size: 27.65px;
    font-weight: 900;
    line-height: 33.18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    text-transform: uppercase
}

.ui_box_letra_seleccioanda {
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 14px
}

.ui_letras .ui_textos {
    text-align: center;
    font-family: Nunito;
    font-size: 15px;
    font-weight: 700;
    line-height: 20.46px;
    text-align: center;
    color: coral
}

.ui_letra_confirmar {
    text-align: center;
    margin-top: 10px
}

.ui_letra_confirmar .btn_confirmar {
    background-image: url(../fondo/boton_activo.png);
    background-size: 100% 100%;
    background-color: transparent;
    width: 299.07px;
    height: 57.54px;
    border: none;
    color: #fff;
    font-family: lato;
    font-weight: 900;
    font-size: 20px;
    cursor: pointer;
    -webkit-appearance: none;
    outline: 0;
    border: 0
}

.ui_letra_confirmar .btn_confirmar.inactivo {
    opacity: .7
}

.ui_tablero .ui_tablero_item {
    width: 66px;
    height: 66px;
    background-color: #7071a2;
    cursor: pointer;
    color: #fff;
    font-family: lato;
    font-weight: 900;
    font-size: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ui_tablero .ui_marco_tablero {
    border-radius: 10px;
    background-color: #303160;
    width: 100%;
    max-width: 319px;
    display: -ms-grid;
    display: grid;
    padding-left: 15px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 10px;
    -ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
    grid-template-columns: repeat(4,1fr);
    -ms-grid-rows: auto 10px auto 10px auto 10px auto;
    grid-template-rows: repeat(4,auto)
}

.ui_tablero .ui_marco_tablero>:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1
}

.ui_tablero .ui_marco_tablero>:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3
}

.ui_tablero .ui_marco_tablero>:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5
}

.ui_tablero .ui_marco_tablero>:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 7
}

.ui_tablero .ui_marco_tablero>:nth-child(5) {
    -ms-grid-row: 3;
    -ms-grid-column: 1
}

.ui_tablero .ui_marco_tablero>:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 3
}

.ui_tablero .ui_marco_tablero>:nth-child(7) {
    -ms-grid-row: 3;
    -ms-grid-column: 5
}

.ui_tablero .ui_marco_tablero>:nth-child(8) {
    -ms-grid-row: 3;
    -ms-grid-column: 7
}

.ui_tablero .ui_marco_tablero>:nth-child(9) {
    -ms-grid-row: 5;
    -ms-grid-column: 1
}

.ui_tablero .ui_marco_tablero>:nth-child(10) {
    -ms-grid-row: 5;
    -ms-grid-column: 3
}

.ui_tablero .ui_marco_tablero>:nth-child(11) {
    -ms-grid-row: 5;
    -ms-grid-column: 5
}

.ui_tablero .ui_marco_tablero>:nth-child(12) {
    -ms-grid-row: 5;
    -ms-grid-column: 7
}

.ui_tablero .ui_marco_tablero>:nth-child(13) {
    -ms-grid-row: 7;
    -ms-grid-column: 1
}

.ui_tablero .ui_marco_tablero>:nth-child(14) {
    -ms-grid-row: 7;
    -ms-grid-column: 3
}

.ui_tablero .ui_marco_tablero>:nth-child(15) {
    -ms-grid-row: 7;
    -ms-grid-column: 5
}

.ui_tablero .ui_marco_tablero>:nth-child(16) {
    -ms-grid-row: 7;
    -ms-grid-column: 7
}

.ui_modal_match_juego {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    top: 0;
    left: 0;
    z-index: 10000
}

.ui_marco_modal_match {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ui_contenido_match {
    width: 100%;
    max-width: 740px;
    height: 547px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.ui_vs_icono {
    position: absolute;
    left: 50%;
    margin-left: -40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 100
}

.ui_vs_icono img {
    width: 100px
}

.ui_contenido_match .ui_match_p1 {
    width: 50%;
    -ms-flex-item-align: start;
    align-self: flex-start;
    position: relative
}

.ui_contenido_match .ui_match_p2 {
    width: 50%;
    position: relative;
    -ms-flex-item-align: end;
    align-self: flex-end
}

.ui_contenido_match .ui_match_p1 .ui_nombre {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 40px;
    background: #007bff;
    font-family: Nunito;
    font-size: 17px;
    font-weight: 900;
    line-height: 32.74px;
    text-align: left;
    color: #fff;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 30px;
    border-radius: 15px;
    position: absolute;
    top: 30px;
    left: 80px
}

.ui_contenido_match .ui_match_p2 .ui_nombre {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 40px;
    background: coral;
    font-family: Nunito;
    font-size: 17px;
    font-weight: 900;
    line-height: 32.74px;
    text-align: left;
    color: #fff;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 30px;
    border-radius: 15px;
    position: absolute;
    bottom: 30px;
    right: 70px;
    z-index: 1000
}

.ui_contenido_match .ui_match_p1 .fondo {
    width: 102%;
    margin-left: 50px
}

.ui_contenido_match .ui_match_p2 .fondo {
    width: 100%;
    margin-left: -50px
}

.ui_contenido_match .ui_match_p1 .ui_avatar {
    position: absolute;
    bottom: 0;
    text-align: right;
    width: 100%;
    padding-right: 75px
}

.ui_contenido_match .ui_match_p2 .ui_avatar {
    position: absolute;
    bottom: 0;
    text-align: left;
    width: 100%;
    margin-left: -18px
}

.ui_contenido_match .ui_match_p1 .ui_avatar img,.ui_contenido_match .ui_match_p2 .ui_avatar img {
    width: 190px
}

.ui_modal_tipo_juego {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    top: 0;
    left: 0
}

.ui_marco_modal_tipo_juego {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ui_contenido_tipo_juego {
    width: 430px;
    height: 440px;
    background-image: url(../img/fondo_modal.png);
    background-size: 100% 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.ui_contenido_tipo_juego {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 40px
}

.ui_contenido_tipo_juego .ui_titulo {
    font-family: Nunito;
    font-size: 34px;
    font-weight: 800;
    line-height: 46.38px;
    text-align: left;
    color: #fff
}

.ui_contenido_tipo_juego .ui_imgen {
    text-align: center
}

.ui_contenido_tipo_juego .ui_imgen p {
    font-family: Lato;
    font-size: 22px;
    font-weight: 900;
    line-height: 26.4px;
    text-align: center;
    color: #fff;
    margin-bottom: 10px
}

.ui_contenido_tipo_juego .ui_opciones_juego {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: Lato;
    font-size: 22px;
    font-weight: 900;
    line-height: 33.6px;
    text-align: center;
    color: #fff;
    max-width: 220px;
    width: 90%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ui_contenido_tipo_juego .ui_opciones_juego .ui_arrow {
    cursor: pointer
}

.ui_contenido_tipo_juego .ui_opciones_juego .ui_arrow.disabled {
    opacity: .5;
    cursor: default
}

.ui_contenido_tipo_juego {
    position: relative
}

.ui_close_modal {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer
}

.ui_contenido_tipo_juego .ui_opcion_buscar .ui_btn_buscar {
    background-image: url(../fondo/boton_activo.png);
    background-size: 100% 100%;
    background-color: transparent;
    width: 299.07px;
    height: 57.54px;
    border: none;
    color: #fff;
    font-family: lato;
    font-weight: 900;
    font-size: 20px;
    cursor: pointer;
    outline: 0;
    -webkit-appearance: none;
    border: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.bg_marco_miniatura {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.bg_marco_miniatura.no-bg {
    background: unset
}

.bg_marco_miniatura img {
    margin-bottom: 3px
}

.bg_marco {
    background: url("{{asset('plataform/img/marco_x2.png')}}") no-repeat center center;
    width: 149px;
    height: 135px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.bg_marco img {
    margin-bottom: 10px
}

.ui_modal_contenido_menu .ui_listado li:hover {
    -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03)
}

.ui_contenido_tipo_juego .ui_opcion_buscar .ui_btn_buscar:hover {
    -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03)
}

.ads_example {
    width: 100%;
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
    margin: 10px auto;
    top: -7px;
    position: relative
}

.ads_example img {
    -o-object-fit: fill;
    object-fit: fill;
    width: 100%
}

span#btnAds {
    position: absolute;
    right: 0;
    top: -11%;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer
}

.lang_selector::after {
    content: '';
    background-image: url(../íconos/arrow_lang.svg);
    display: block;
    width: 17px;
    height: 10px;
    margin-left: 9px
}

.lang_selector::before {
    content: '';
    background-image: url(../íconos/lang.png);
    display: block;
    width: 22px;
    height: 22px;
    margin-right: 9px
}

.lang_selector {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    /* margin-right: 25px; */
    cursor: pointer;
    position: relative;
    color: #99caff!important;
    font-weight: 600;
    text-align: center
}

.lang_list {
    position: absolute;
    bottom: -18px;
    left: 4px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0 5px;
    display: none
}

.separator {
    height: 1px;
    width: 100%;
    display: block;
    background: #99caff;
    margin: 5px 0
}

.lang_list.active {
    display: block
}

.lang_container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.lang_list a {
    color: #99caff!important;
    font-weight: 600;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.ui_tablero_item.ui_nat,.ui_tablero_item.ui_variante {
    -webkit-animation: setLetter;
    animation: setLetter;
    -webkit-animation-iteration-count: initial;
    animation-iteration-count: initial;
    -webkit-animation-duration: .7s;
    animation-duration: .7s
}

.ui_table_result th {
    padding: 10px
}

.ui_table_result td {
    padding: 10px
}

.result_opponent {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    z-index: 1200;
    overflow: hidden
}
.avatar_name {
    padding-right: 10px;
}
@media (max-width: 640px) {
    .header-juego .ui_opcion span {
        font-size:16px!important
    }

    .ui_contenido_match .ui_match_p1 .ui_avatar img,.ui_contenido_match .ui_match_p2 .ui_avatar img {
        width: 95px!important
    }

    .ui_vs_icono img {
        width: 50px!important
    }

    .ui_contenido_match .ui_match_p1 {
        width: 50%;
        top: 115px;
        left: -13px
    }

    .ui_contenido_match .ui_match_p1 .ui_avatar {
        padding-right: 25px
    }

    .ui_contenido_match .ui_match_p1 .ui_nombre,.ui_contenido_match .ui_match_p2 .ui_nombre {
        font-size: 14px;
        padding: 5px 15px;
        right: 10px
    }

    .item_out_help {
        display: none!important
    }

    .menu_help_desktop_top_wc {
        display: block!important
    }

    .ui_contenido_match .ui_match_p2 {
        width: 50%;
        top: -130px;
        left: 0
    }

    .ui_contenido_match {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .ui_contenido_match .ui_match_p2 .ui_avatar {
        margin-left: 0
    }

    .ui_contenido_match .ui_match_p2 .fondo {
        margin-left: -20px
    }

    .ui_vs_icono {
        left: 56%
    }

    .ui_contenido_tipo_juego {
        margin: 0 10px
    }

    .ui_close_modal {
        right: 7px
    }

    .responsive-table thead {
        display: none
    }

    .responsive-table tr {
        display: block;
        margin-bottom: 10px
    }

    .responsive-table td {
        display: block;
        text-align: right;
        position: relative;
        border: none;
        border-bottom: 1px solid #ddd
    }

    .responsive-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 10px;
        font-weight: 700;
        text-align: left
    }

    .ui_box_letra_seleccioanda {
        margin-top: 15px;
        margin-bottom: 10px
    }

    .ui_datos_jugadores {
        padding: 10px;
        margin-top: 10px
    }

    .ui_datos_jugadores .ui_dato_jugador {
        font-size: 12px;
        padding: 7px
    }

    .bg_marco_miniatura {
        width: 40px!important;
        background-size: contain!important;
        height: 35px!important
    }

    .ui_datos_jugadores .ui_dato_jugador span {
        margin-left: 8px
    }

    .bg_marco_miniatura img {
        width: 25px
    }

    .ui_timer {
        font-size: 18px
    }

    .ui_timer img {
        width: 22px
    }

    .ui_letra_seleccionada {
        width: 53px;
        height: 53px
    }

    .lang_selector {
        margin: 0px 5px
    }

    .avatar_name {
        display: none
    }
    .pr_1-resp640 {
        padding-right: 10px;
    }
}

a.ui_ver_tablero {
    color: #1f224d!important;
    font-size: 18px;
    font-weight: 700
}

.ui_detalle_nombres {
    text-align: center
}

.ui_letra_seleccionada.blue {
    background: #007bff!important
}

.ui_letra_seleccionada.orange {
    background: coral!important
}

.ui_opcion {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.box_body {
    padding: 2rem 3rem
}

.bg-load {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url(../fondo/fondo_entero.png);
    background-repeat: repeat;
    background-position: center;
    background-color: #1f224d;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 10000;
}

.bg-load-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.bg-load-body h2 {
    color: #fff;
    font-family: lato;
    font-weight: 900;
    font-size: 20px
}

.ta-center {
    text-align: center
}

.pl-pr_3 {
    padding: 0 3rem
}

.mb_0 {
    margin-bottom: 0!important
}

.c-blue {
    color: #007bff!important
}

.c-coral {
    color: coral!important
}
a.c-coral {
    color: coral!important;
    font-weight: 700;
}

.crossed-out {
    text-decoration: line-through
}

.fw_700 {
    font-weight: 700
}

.ta-justify {
    text-align: justify
}

.lh_1-2 {
    line-height: 1.2
}

.ml_1 {
    margin-left: 1rem
}

.m-spot {
    margin: 5px 0 0 2rem
}

.box_body p {
    margin-top: 10px
}

ul {
    list-style-type: none;
    padding-left: 0
}

li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.underlined {
    text-decoration: underline!important
}

.note {
    font-size: 12px;
    font-style: italic
}

@media (max-width: 528px) {
    .header_profile_information {
        gap:5px!important
    }
}

.btn_help {
    display: none!important
}

@media (max-width: 485px) {
    .label_information {
        display:none!important
    }

    .btn_help {
        display: block!important
    }

    .menu_help_desktop_top {
        display: block!important
    }
    .img_resp {
        width: 29vw;
        height: auto;
    }
}

@media (max-width: 460px) {
    .content-message {
        max-width:460px;
        width: 100%;
        height: auto
    }
    .header_profile_inf {
        gap: 20px !important;
    }
}

@media (max-width: 360px) {
    .logo_inicio img {
        width:38%;
        height: auto
    }
}

.position-relative {
    position: relative!important
}

.position-absolute {
    position: absolute!important
}

.header_information {
    position: fixed;
    top: 0;
    width: 100%;
    padding-left: 55px;
}

.mobile_help_menu {
    width: 152px;
    height: 62px;
    border-radius: 10px;
    background-color: #007bff;
    border: 2px solid #1f224d;
    top: 50px;
    right: 10px;
    display: none
}

.mobile_help_menu .mobile_help_menu_container .menu_item {
    width: 100%;
    text-align: center;
    padding: 7px 0;
    font-family: nunito;
    font-weight: 700
}

.mobile_help_menu_container {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mobile_help_menu .mobile_help_menu_container .menu_item:first-child {
    border-bottom: 2px solid #1f224d
}

.menu_help_desktop_top {
    width: 24px;
    height: 24px;
    display: none;
    margin-right: 10px;
}

.menu_help_desktop_top.white span {
    background-color: #fff
}

.menu_help_desktop_top.orange span {
    background-color: coral
}

.menu_help_desktop_top.blue span {
    background-color: #99caff
}

.menu_help_desktop_top span {
    border-radius: 17px;
    width: 100%;
    height: 3px;
    display: block;
    margin: 4px 0
}

.mobile_help_menu.active {
    display: block!important
}

.header_profile_inf {
    gap: 40px
}

.header_profile.orange {
    color: coral
}

.header_profile.orange .lang_selector {
    color: coral!important
}

.header_profile.orange .lang_selector::before {
    background-image: url(../íconos/lang_orange.png)
}

.header_profile.orange .lang_selector::after {
    background-image: url(../íconos/arrow_lang_orange.svg)
}

.header_profile.orange .lang_list a {
    color: coral!important
}

.header_profile.orange a {
    color: coral!important
}
@media (min-width: 1210px){
    .container_information {
    height: 100vh!important;
}
.container_information_last{
     height: calc(100vh - 46px)!important;
}
}
.mt_0 {
    margin-top: 0px !important;
}
.mt_1-2 {
    margin-top: 1.2rem !important;
}

.mt-100{
    margin-top: 100px;
}
.ml_2{
    margin-left: 2rem;
}
.mr_2{
    margin-right: 2rem;
}
.g_2{
    gap: 2rem;
}

/* Estilos para el contenedor del slider */
.slider-container {
    position: relative;
    /* max-width: 800px; */
    height: auto;
    margin: 100px auto;
    /* overflow: hidden; */
    /* border-radius: 10px; */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
}

/* Estilos para el slider */
.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* Estilos para cada slide */
.slide {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1100px;
    height: 45vw;
    box-sizing: border-box;
    position: relative;
    margin: 0 50px;
    margin-top: 2rem;
}

.slide img {
    display: block;
}

.slide-content {  
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    padding: 40px;
    border-radius: 5px;
}

/* Estilos para los botones de navegación */
.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0); 
    border: none;
    cursor: pointer;
}

.slider-button.prev {
    left: 10px;
}

.slider-button.next {
    right: 10px;
}

.boton_registrar.btn-slider,
img.btn-slider,
button.btn-slider {
    cursor: none;
}
.boton_registrar.btn-slider:hover,
button.btn-slider {
    cursor: none;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}
.ui_btn_buscar-slider {
    background-image: url(../fondo/boton_activo.png);
    background-size: 100% 100%;
    background-color: transparent;
    width: 299.07px;
    height: 57.54px;
    border: none;
    color: #fff;
    font-family: lato;
    font-weight: 900;
    font-size: 20px;
    cursor: pointer;
    outline: 0;
    -webkit-appearance: none;
    border: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.c-slide,
.c-slider_left {
    display: flex;
    justify-content: flex-end;
    width: 268px;
    height: 334px;
    flex-direction: column-reverse;
    align-items: flex-end;
}
.c-slider_left3 {
    display: flex;
    width: 268px;
    height: 334px;
}
.c-slider_right {
    display: flex;
    font-family: Nunito;
    color: #FF7F50;
    flex-direction: column;
    align-items: center;
    margin-left: 16rem;
    padding: 0 10px;
    text-align: center;
}
.c-slider_right2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 3rem;
    padding: 0 10px;
    text-align: center;
}
.d__flex {
    display: flex;
}
.fs_22 {
    font-size: 22px;
}
.fs_14 {
    font-size: 14px;
}
.m_1 {
    margin: 1rem;
}
.m_2 {
    margin: 2rem;
}
.m_2-1{
    margin: 2rem 1rem;
}
.mt_5{
    margin-top: 5rem;
}
p.p-slide {
    width: 181px;
    height: auto;
    position: absolute;
    display: flex;
    justify-content: flex-end;
    margin-top: 25px;
    font-family: lato;
    font-weight: 14px !important;
    color: #4A4A4A;
    padding-left: 10px;
    line-height: 1.2;
    text-align: center;
}
p.p-slide2 {
    width: 260px;
    height: auto;
    position: absolute;
    display: flex;
    justify-content: flex-end;
    margin-top: 25px;
    font-family: lato;
    font-weight: 14px !important;
    color: #4A4A4A;
    padding-left: 10px;
    z-index: 1003 !important;
    line-height: 1.2;
    text-align: center;
}
p.p-slide2.resp {
    margin-top: 37px;
    margin-left: 10px;
}
.p1_w-200 {
    width: 200px !important;
}
.cloud1 {
    width: 220px !important;
}
.cloud2 {
    height: 180px !important;
}
.mr_7{
    margin-right: 7rem;
}
.pl-26{
    padding-left: 26px !important;
}
.cloud-comment {
    width: 178px;
    height: 140px;
} 
.cloud-comment2 {
    width: 203px;
    height: 140px;
}
.cloud-comment4 {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 234px !important;
    margin-left: -112px;
}
.content-cloud {
    margin-left: -135px;
}
.img-robox1 {  
    margin: 0rem 7rem 0rem 0rem;
    padding-top: 1rem;
}
.img-robox3 {  
    margin-top: 90px;
}
.img-robox4 {
    margin-top: 155px;
}
.img-robox {
    margin-top: 155px;
}
.img-cloudComment4,
.img-cloudComment {
    width: 300px;
    height: 255px;
    position: relative;
    z-index: 5;
}
.position2{
    position: relative;
    z-index: 6;
}
.ui_modal_tipo_juego2 {
    height: 100%;
    top: 0;
    left: 0;
}
.ui_marco_modal_tipo_juego2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    max-width: 400px;
    margin: auto;
}
.ui_modal_tipo_juego.tab_slider2 {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.content-letters-board{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.letters-board {
    font-family: lato;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}
.content_letters-clock {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-family: lato;
    font-size: 24px;
    font-weight: 700;
    color: #99CAFF;
}
.letters-clock {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    width: 27px;
}
.box_formulario_welcome2 {
    background-color: #fff;
    width: 799px;
    height: 594px;
    border-radius: 10px !important;
    margin-left: 280px;
}
.mt_1 {
    margin-top: 1rem;
}
.mt_-80{
    margin-top: -80px !important;
}
.fd-column {
    flex-direction: column;
}
.h_390{
    height: 390px !important;
}
.h-856{
    height: 856.34px;
}
.ml_-50 {
    margin-left: -50px;
}
.ml_-30 {
    margin-left: -30px;
}
.mt_4 {
    margin-top: 4rem;
}
.bg_board_gray {
    margin-top: -148px;
    margin-left: 50px;
}
.bg_board_gray.resp{
    margin-top: 16px;
}
.text-comparation{
    font-family: nunito;
    font-size: clamp(16px, 3vw, 36px);
    color: #FF7F50;  
    font-weight: 900;
    text-align: center;
    padding: 0 10px;
}
.text-tablero {
    font-family: nunito;
    font-size: 20px !important;
    font-weight: 700;
    color: #FF0000 !important;
    margin-top: -297px;
    margin-left: 150px;
}
.c_text-square{
     display: flex;
     align-items: center;
}
.c_text-square.text-red{
    margin-left: 153px;
}
.text-square {
    color: #FF0000 !important;
    max-width: 370px;
    width: 100%;
    height: auto;
    font-size: clamp(14px, 3vw, 20px) !important;
    text-align: center;
    margin-bottom: 0px !important;
}
.d__none {
    display: none !important;
}
.img-cloudComment2{
    width: 300px;
    height: 255px;
    position: relative;
    z-index: 5;
}
.mt_3-0 {
    margin-top: 3rem !important;
}
.c_text-square.text-red1 {
    margin-left: 70px;
}
.bg-black{
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
}
.mt_-40{
    margin-top: -40px;
}
.mb-0 {
    margin-bottom: 0px;
}
.zi-1001{
    z-index: 1001 !important;
    position: relative;
}
.zi-1002{
    z-index: 1002 !important;
    position: relative;
}
.zi-1003{
    z-index: 1003 !important;
    position: relative;
}
.zi-10000{
    z-index: 10000 !important;
    
}
.mt-33 {
    margin-top: 33px;
}
.borde_red {
    border: 4px solid #FF0000;
    border-radius: 10px;
    width: 371px;
    height: 115px;
    z-index: 1001;
    position: relative;
}
 .keyboard_pulse,
 .board_pulse {
    cursor: pointer;
 }
 .keyboard_pulse:hover,
 .board_pulse:hover{
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05)
}
.orange_arrows {
    margin-top: -26px !important;
    align-items: center;
    display: flex;
    justify-content: space-between;
    align-content: center;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.df-center_center{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cloud3 {
    height: 150px;
}
.slide2-juego {
    margin: auto;
    margin-top: 1rem;
}
.text-player {
    font-family: nunito;
    font-weight: 700;
    color: #99CAFF!important;
    font-size: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    align-content: center;
}
.text-points {
    font-family: nunito;
    font-weight: 700;
    color: #fff!important;
    font-size: 15px;
    z-index: 999;
    display: flex;
    align-items: center;
    align-content: center;
}
.content-points{
    display: flex;
    gap: 10px;
}
.c_text-players {
    display: flex;
    width: 71%;
    margin-top: -54px !important;
    padding-left: 30px;
    align-content: center;
    justify-content: space-between;
    margin-left: 4rem;
}
.c_text-players-10 {
    display: flex;
    max-width: 213px;
    height: auto;
    width: 100%;
    margin-top: -79px !important;
    padding-left: 35px;
    justify-content: space-between;
    margin-left: 148px;
    margin-bottom: 20px;
}
.c_text-players4 {
    display: flex;
    justify-content: space-between;
    width: 31%;
    margin-top: -52px;
    padding-left: 35px;
}
.ml_5 {
    margin-left: 5rem;
}
.ml_50 {
    margin-left: 50px;
}
.ml_55 {
    margin-left: 55px;
}
.mt_3 {
    margin-top: 3rem;
}
.fw-500 {
    font-weight: 500;
}
.w-265 {
    width: 265px;
}
.mw_99 {
    max-width: 99px;
}
.mw_170 {
    max-width: 170px;
}
.slider-right_resp {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
    color: #FF7F50;
    justify-content: center;
    padding: 0 10px;
    text-align: center;
    line-height: 1.2;
}
.container__users {
    display: flex;
    align-items: center;
    margin: auto;
    height: auto;
    align-content: center;
    margin-left: -50px;
    justify-content: center;
    flex-direction: column;
}
.c-slider_user1{
    margin-left: -30px;
}
.mw-460{
    max-width: 460px;
}
.resp_content {
    margin-top: 3rem;
}
.board_resp img {
    display: flex;
    margin: auto;
    z-index: 1001;
}
.slide-10 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1100px;
    box-sizing: border-box;
    position: relative;
    margin: 0 50px;
    width: 50%;
    height: auto;
}
.right-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
img.user2{
    margin-left: 0px !important;
}
/* img.board_gray-Arrows1 {
    margin-left: 0px !important;
} */
.robox10 {
    position: relative;
    margin-left: -50px;
}
.ml-12_resp {
    margin-left: 12rem;
}

.comparison-winner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 2rem;
}
@media (max-width: 1210px){

    .content-cloud {
        margin-left: 0px;
    }
    .mt_3-0 {
        margin-top: 0rem !important;
    }
    .box_formulario_welcome2 {
        margin: auto;
        width: 80vw;
        height: 530px;
    }
    .d-none_resp {
        display: none !important;
    }
    .d__block_resp {
        display: block !important;
    }
    .ai-center{
        display: flex;
        align-items: center;
    }
    .container_information {
       width: 100%;
    }
    .mt_3resp {
        margin-top: 3rem;
    }
    .mb_35resp {
        margin-bottom: 35px;
    }
    .c-slide {
        position: absolute;
        padding-top: 460px;
        flex-direction: row;
        justify-content: flex-end;
        display: flex;
        align-items: flex-start;
    }
    .slide {
        width: 100%;
        height: 680px;
        align-items: flex-start;
        gap: 10px;
        margin: auto;
    }
    .img-robox1 {  
        margin: 0rem 0rem 0rem 2rem;
        padding-top: 1rem;
    }
    .img-robox3 {  
        margin: 0rem 0rem 0rem 2rem;
    }
    .ui_marco_modal_tipo_juego2 {
        align-items: flex-start;
    }
    .c-slider_right {
        margin-left: 0px;
    }
    .h_390 {
        height: 175px !important;
    }
    .mb_2 {
        margin-bottom: 2rem!important
    }
    .fd-column_resp {
        flex-direction: column !important;
    }
    .bg_board_gray {
        margin-left: 29px !important;
    }
    .bg_board_gray3,
    .bg_board_gray.style3{
        margin-top: -110px !important;
        margin-left: 1px !important;
    } 
    .bg_board_gray4 {
        margin-top: 1px !important;
        margin-left: -115px !important;
    }
    .bg_board_gray5 {
        margin-top: -270px !important;
        margin-left: -105px !important;
    }
    .bg_board_gray6 {
        margin-top: -250px !important;
    }
    .c-slide, .c-slider_left.slider3 {
        width: 220px;
        height: auto;
    }
    .c-slide2{
        margin-left: 95px;
    }
        
    .h_auto-resp{
        height: auto!important;
    }
    .slider-container.resp{
        height: 850px;
    }
    .slide.resp{
        margin-top: 30px;
    }
    .m_0-5-resp  {
        margin: 0.5rem !important;
    }
    .m_auto-resp{
        margin-top: 3rem;
        margin: auto;
    }
    .text-tablero{
        margin-top: -280px;
    }
    .ml_auto-resp{
        margin-left: auto;
    }
    .robox3 {
        margin-left: 0px !important;
        margin-top: 60px;
    }
    .mt-432_resp {
        margin-top: -432px;
    }
    .slider-10 {
        width: 560px;
        height: auto;
    }
    .c-slider_right {
        margin-top: 1rem;
    }
    .slider-container.resp,
    .slider-container {
        margin-left: 0px 10px!important;
    }

    .mt_2-resp {
        margin-top: 2rem;
    }
    .mt_-35resp {
        margin-top: -35px;
    }
    .mt_-94resp {
        margin-top: 78px;
    }
    .mt_-77-resp {
        margin-top: -77px !important;
    }
    .mt_-78-resp {
        margin-top: 8px !important;
    }
    .mt_-110-resp {
        margin-top: -110px;
    }
    .mt_-20resp{
        margin-top: -20px;
    }
    .cloud4 {
        height: 240px !important;
    }
    .cloud6 {
        height: 210px !important;
    }
    .c-slider5 {
        margin-top: -7rem;
    }
    .c_text-players {
        width: 71%;
    }
    .board_resp {
        display: flex;
        align-content: center;
        justify-content: center;
        margin: auto;
        flex-direction: column;
        align-items: center;
    }
    .player_mb-1 {
        margin-bottom: 1rem;
    }
    .mt-33_resp {
        margin-top: 24rem;
    }
    .mt_58resp {
        margin-top: 58px;
    }
    .c_text-players4 {
        width: 74%;
        margin-top: -70px;
    }
    .mt_2resp {
        margin-top: 2rem;
    }

    .container__users {
        margin-left: auto;
    }

    .robox10 {
        margin-top: 0px;
    }
    .shift-5 {
        margin-top: -2rem !important;
    }
    .shift-6 {
        margin-top: 25rem !important;
    }    
    .cloud-comment4 {
        display: flex;
        flex-direction: row;
        margin-top: 535px !important;
        margin-left: 6px;
    }
    .slider-resp_3 {
        margin-top: -1110px;
    }
    .slider-resp_5 {
        margin-top: -1003px;
        margin-left: 18px;
    }
    .jc-center {
        display: flex;
        justify-content: center;
    }
    .ml_168resp {
        margin-left: 168px;
    }
    .slider-resp_7 {
        margin-top: -1025px;
    }
    .slider-resp_8 {
        margin-top: -1274px;
    }
    .slider-resp_9 {
        margin-top: -1217px;
    }
    .slide-10 {
        display: flex;
        flex-direction: column;
        margin: auto;
        height: 42%;
    }

    .button-close-turorial{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .right-block {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    .c_text-players-10 {
        margin-left: 32px;
        margin-top: -35px !important;
    }

    img.board_gray-Arrows1 {
        margin-top: 6rem !important;
    }
    img.user1, img.user2{
        margin-left: 0px !important;
        margin-top: 1rem;
    }
    .img.board_gray-Arrows1, img.board_gray-Arrows2 {
        margin-left: 0px !important;
    }
    .c-slider_rigth10 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .button-close-turorial {
        margin: auto;
    }
    .container_user1-resp, .container_user2-resp {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 2rem;
    }
    .container__users_resp {
        height: 300px;
    }
    .c_text-players-10 .text-player {
        font-size: clamp(14px, 3vw, 20px) !important;
        width: 80%;
    }
    .cloud-robox_10 {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 1rem auto;
        padding: 0 10px;
    }
    .arrow__left {
        position: absolute;
        bottom: 30px;
        left: -63px;
        z-index: 1003;
    }
    .arrow__right {
        position: absolute;
        top: 165px;
        right: -63px;
        z-index: 1003;
    }
}

@media (max-width: 768px){
    .bg_board_gray6,
    .bg_board_gray {
        margin-top: -250px !important;
        margin-left: -85px;
    }
    .ml_-64-resp{
        margin-left: -64px;
    }
}


@media (max-width: 620px) {
    .mt-17_resp {
        margin-top: -17px;
    } 
    .bg_board_gray6,
    .bg_board_gray {
      
        margin-left: -120px;
    }
    .icons-resp {
        width: 80vw;
        height: auto;
    }
    .cloud4 {
        height: 236px !important;
    }
    .cloud6 {
        height: 210px !important;
    }
    .c_text-players {
        margin-top: -47px !important;
    }
    .c_text-players4 {
        margin-top: -64px;
    }
    .c-slider5 {
        margin-top: -7rem;
    }
    .slider-resp_9 {
        margin-top: -1040px;
    }
    .slider-resp_9 {
        margin-top: -1255px;
    }
}
@media (max-width: 528px) {
    .mt_3resp{
        margin-top: 2rem !important;
    }
    .mt-33_resp {
        margin-top: 23rem !important;
    }
    .box_formulario_welcome.m_2{
        margin: 2rem 0rem;
    }
    .ui_contenido_tipo_juego .ui_opciones_juego.mt_-80 {
        width: 40%;
    }
    .icons-resp {
        width: 80vw;
        height: auto;
    }
    .slider.fd-column {
        width: 450px;
    }
    .img_55 {
        width: 73vw;
        height: auto;
    }
    .slide.resp{
        margin-top: 40px;
    }
    p.p-slide2 {
        margin-top: 20px;
        width: 260px;
        height: auto;
    }
    .mt_3-resp {
        margin-top: 3rem !important;
    }
    .img-robox3{
        width: 30vw;
        height: 40vw;
        margin-left: -20px;
    }
    .img-robox1,
    .img-robox2,
    .img-robox4{
        width: 29vw;
        height: 30vw;
    }
    .img-robox{
        width: 29vw;
        height: 30vw;
    }
    .mt_350-resp{
        margin-top: 150px;
    }
    .c-slide2 {
        margin-top: -519px;
        margin-left: 0px;
    }
    .mt-17_resp {
        margin-top: -17px;
    }
    .img-cloudComment {
        width: 260px !important;
    }
    .w-269_resp {
        width: 290px;
     }
     .c_text-square img {
        width: 12vw;
        height: auto;
     }
     .cloud2 {
        height: 165px !important;
    }
    .cloud5 {
        height: 190px !important;
    }
    .c-slider5 {
        margin-top: -11rem;
    }
    .turno5-mt_2-resp {
        margin-top: 2rem;
    }
    .c-slider6 {
        margin-top: -18rem;
    }
    .cloud8 {
        height: 230px !important;
    }
    .c-slider8 {
        margin-top: -16rem;
    }
    .board_resp {
        margin-top: 2rem;
    }

    .c_text-players4 {
        margin-top: -58px;
        width: 68%;
    }
    .c_text-players {
        margin-top: -41px !important;
        width: 74%;
    }
    .shift-6 {
        margin-top: 21rem !important;
    }
    .cloud-comment2 {
        margin-top: 100px;
    }
    .resp_content {
        margin-top: 0rem;
    }
    .slider-right_resp {
        margin-top: 0.5rem;
    }
    .slider-resp_7 {
        margin-top: -950px;
    }
    p.p-slide8 {
        width: 260px !important;
        height: auto;
    }
    .cloud8 {
        height: 216px !important;
    }
    .slider-resp_8 {
        margin-top: -1244px;
    }
    .slider-resp_9 {
        margin-top: -1000px;
    }
    .robox4 {
        width: 24vw;
        height: 35vw;
    }
    .robox10 {
        width: 25vw;
        height: 30vw;
    }
    .slider-resp_9 {
        margin-top: -1160px;
    }
    .c_text-players-10 {
        margin-left: 32px;
        margin-top: -33px !important;
        width: 65%;
    }
    .cloud-robox_10 {
        margin-top: -23px;
    }
}
@media (max-width: 460px) {

    .ui_marco_modal_tipo_juego2 {
        width: 70%;
    }
    .ui_modal_tipo_juego2 {
        width: 300px;
    }
    .slider.fd-column {
        width: 350px;
    }
    .c_text-square.text-red {
        margin-left: 105px;
    }
    .cloud-comment2{
        margin-left: -36px;  
    }
    .img-cloudComment, .img-cloudComment2, .img-cloudComment3, .img-cloudComment4 {
        width: 235px !important;
    }
    p.p-slide2 {
        width: 210px !important;
        height: auto;
    }
    p.p-slide8 {
        width: 240px !important;
        height: auto;
    }
    .c-slider_right {
        margin-top: 3rem;
    }
    /* .arrow__left {
        left: -20px;
    } */
    /* .arrow__right{
        right: -20px;
    } */
    .mt_-77-resp,
    .mt_-78-resp {
        margin-top: -125px !important;
        margin-left: auto;
    }
    .mt_-110-resp {
        height: 300px !important;
        margin-top: -150px;
        margin-left: auto;
    }
    .c_text-square.text-red1 {
        margin-left: 37px;
    }
    .c_text-square.text-red {
        margin-left: 143px;
    }
    .letters-board {
        font-size: clamp(16px, 3vw, 28px);
    }
    .borde_red {
        width: 290px;
    }
    .cloud3 {
        height: 170px;
    }
    .cloud4 {
        height: 305px !important;
    }
    .cloud5 {
        height: 235px !important;
    }
    .cloud6 {
        height: 225px !important;
    }
    .cloud8 {
        height: 235px !important;
        width: 260px !important;
    }
    .cloud2 {
        height: 220px !important;
    }
    .cloud9 {
        height: 215px !important;
    }
    .c_text-players {
        margin-top: -35px !important;
        width: 74%;
        margin-left: 40px;
    }
    .text-player {
        font-size: clamp(14px, 3vw, 20px) !important;
    }
    .mt-33_resp {
        margin-top: 27rem !important;
    }
    .c_text-players4 {
        margin-top: -52px;
    }
    .content-cloud {
        margin-left: 0px;
        margin-top: 20px;
    }
    .img-robox2{
        width: 25vw;
        height: 30vw;
        margin-top: 90px;
    }
    .robox4 {
        width: 24vw;
        height: 35vw;
    }
    .robox5 {
        width: 29vw;
        height: 35vw;
    }
    .mt_-4resp{
        margin-top: -4rem;
    }
    .c-slider6 {
        margin-top: -20rem;
    }
    .mt_3-resp {
        margin-top: 3rem;
    }
    .line-horizontal {
        width: 80px;
    }
    .ml_168resp {
        margin-left: 130px;
    }
    .shift-6 {
        margin-top: 21rem !important;
    }
    .line-red_resp {
        margin-bottom: -35px;
    }
    .c-slider5 {
        margin-top: -12rem;
    }
    .c-slide2 {
        margin-top: -494px;
        margin-left: 0px;
    }
    .cloud-comment2 {
        margin-top: -6px;
    }
    .robox10{
        width: 29vw;
        height: 30vw;
    }
    img.cloud10{
        height: 15rem !important;
    }
    .cloud-robox_10 {
        margin-top: -40px;
    }
    .button-close-turorial {
        margin-top: 1rem;
    }
    .robox10 {
        margin-top: 9rem;
        margin-right: -20px;
        padding-left: 20px;
    }

    .slider-resp_8 {
        margin-top: -1208px;
    }
    .slider-resp_9 {
        margin-top: -1175px;
    }
    .container__users_resp {
        height: 300px;
    }
    .c_text-players-10 .text-player {
        font-size: clamp(14px, 3vw, 20px) !important;
        width: 80%;
    }

}

@media (max-width: 380px) {
    .c_text-players {
        width: 80%;
        margin-top: -30px !important;
        margin-left: 25px;
    }
    .mt-33_resp {
        margin-top: 25rem !important;
    }
    .c_text-players4 {
        margin-top: -46px;
    }
    .shift-6{
        margin-top: 19rem !important;
    }
    .slider-resp_7 {
        margin-top: -912px;
    }
    .slider-resp_8 {
        margin-top: -1155px;
    }
    .slider-resp_9 {
        margin-top: -1113px;
    }
    .container_user1-resp, .container_user2-resp {
        margin-top: 1.5rem;
    }
    .container__users_resp {
        margin-top: 1rem;
    }
}

.arrow-1 {
    color: #FF001F;
    width: 170px;
    height: 25px;
    display: flex;
    justify-content: flex-end; 
    z-index: 1001;
}

.arrow-1:before {
    content: "";
    background: #FF001F;
    width: 15px;
    clip-path: polygon(100% 10px, 8px 10px, 16px 0, 0 50%, 16px 100%, 8px calc(100% - 10px), 100% calc(100% - 10px)); 
    animation: a1 1.5s infinite linear;
    z-index: 1001;
}

@keyframes a1 {
    0% {
        width: 15px; 
    }
    90%, 100% {
        width: 100px; 
    }
}
.arrow-2 {
    color: #FF001F;
    width:60px;
    height:25px;
    display: flex;
    z-index: 1001;
  }
.arrow-2:before {
    content: "";
    background: #FF001F;
    width:15px;
    clip-path: polygon(0 10px,calc(100% - 8px) 10px,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,calc(100% - 8px) calc(100% - 10px),0 calc(100% - 10px));
    animation: a1 1.5s infinite linear;
    z-index: 1001;
  }
  @keyframes a1 {
    90%,100%{flex-grow: 1}
  }

.line-red_resp {
    margin-top: -159px;
    margin-right: 198px;
    margin-bottom: -43px;
    z-index: 1001;
}
.line-horizontal{
    border-bottom: 4px solid #FF001F;
    width: 120px;
    z-index: 1001;
}
.line-vertical {
    border-left: 4px solid #FF001F;
    height: 190px;
    margin-top: -12px;
    z-index: 1001;
}

@import url("https://fonts.googleapis.com/css?family=Raleway:400");

@property --angle {
  syntax: '<angle>';
  initial-value: 90deg;
  inherits: true;
}

@property --gradX {
  syntax: '<percentage>';
  initial-value: 50%;
  inherits: true;
}

@property --gradY {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: true;
}
  :root {
	--d: 2500ms;
	--angle: 90deg;
	--gradX: 100%;
	--gradY: 50%;
	--c1: rgba(168, 239, 255, 1);
    --c2: rgba(0, 0, 0, 0);
}

.effect-box {    
	font-size: 3vw;
	border: 0.1rem solid;
	border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
	animation: borderRotate var(--d) linear infinite forwards;
}

.effect-box:nth-child(2) {
	border-image: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--c1), var(--c1) 10%, var(--c2) 40%) 30;
	animation: borderRadial var(--d) linear infinite forwards;
}

@keyframes borderRotate {
	100% {
		--angle: 420deg;
	}
}

@keyframes borderRadial {
	20% {
		--gradX: 100%;
		--gradY: 50%;
	}
	40% {
		--gradX: 100%;
		--gradY: 100%;
	}
	60% {
		--gradX: 50%;
		--gradY: 100%;
	}
	80% {
		--gradX: 0%;
		--gradY: 50%;
	}
	100% {
		--gradX: 50%;
		--gradY: 0%;
	}
}

  .effect-box__round {
    font-size: 3vw;
    position: relative;
    border: 0.3rem solid transparent; 
    border-radius: 10px;
  }
  
  .effect-box__round::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    background: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn);
    border-radius: 10px; 
    z-index: -1; 
    animation: borderRotate var(--d) linear infinite forwards;
  }
  
  .effect-box__round:nth-child(2)::before {
    background: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--c1), var(--c1) 10%, var(--c2) 40%);
    animation: borderRadial var(--d) linear infinite forwards;
  }
  
  @keyframes borderRotate {
    100% {
      --angle: 420deg;
    }
  }
  
  @keyframes borderRadial {
    20% {
      --gradX: 100%;
      --gradY: 50%;
    }
    40% {
      --gradX: 100%;
      --gradY: 100%;
    }
    60% {
      --gradX: 50%;
      --gradY: 100%;
    }
    80% {
      --gradX: 0%;
      --gradY: 50%;
    }
    100% {
      --gradX: 50%;
      --gradY: 0%;
    }
  }

  .ui_timer_fixed {
    position: fixed;
    right: 0;
    top: 50%;
    padding: 10px;
    background-color: #444773;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
            box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    -webkit-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
            transform: translate(100%, 0);
    -webkit-transition: -webkit-transform ease-in-out .2s;
    transition: -webkit-transform ease-in-out .2s;
    -o-transition: transform ease-in-out .2s;
    transition: transform ease-in-out .2s;
    transition: transform ease-in-out .2s, -webkit-transform ease-in-out .2s;
}