@import "loading.css";

html {
    /*overflow:   scroll;*/
}
/*::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}*/

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: url("/img/fondo.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

#arena {
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
}

.con-panel-chat .panel-desplazable, .con-panel-log .panel-desplazable {
    margin-right: 342px !important;
}

.con-panel-log .log {
    display: block;
}

.con-panel-chat .chat-out {
    display: block;
}

.con-panel-chat .log {
    display: none !important;
}

.w100 {
    width: 100%;
}

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

.no-wrap {
    white-space: nowrap;
}

.separacion-min {
    margin-top: 16px;
}

.separacion {
    margin-top: 32px;
}

.margin-left {
    margin-left: 4px;
}

.margin-left-double {
    margin-left: 16px;
}

.margin-right {
    margin-right: 4px;
}

.margin-right-double {
    margin-right: 16px;
}

.padding-right-separation {
    padding-right: 64px;
}

.menu-separation-horizontal {
    width: 1px;
    border-left: 1px solid white;
    display: inline-block;
}

.editor-texto {
    color: rgb(19, 19, 19);
}

.tooltip {
    z-index: 1000000000000;
}

.loginform-out{
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.loginform-in{
    display: table-cell;
    vertical-align: middle;
}

.loginform-box {
    margin: 0 auto;
    width: 500px;
    min-height: 200px;
    border: 2px solid white;
    border-radius: 3px;
    color: white;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 8px 64px;
    text-align: center;
}

.loginform-box input{
    text-align: center;
}

.loginform-box.green {
    border-color: rgb(0, 255, 0);
}

.loginform-box.red {
    border-color: rgb(146, 0, 0);
}

.btn-min {
    width: 10px !important;
    padding-left: 4px;
    padding-right: 14px;
}

.cuadro-lista-grupo:first-child .subirCategoria, .cuadro-lista-grupo:last-child .bajarCategoria {
    display: none;
}

.cuadro-lista-grupo:first-child .bajarCategoria, .cuadro-lista-grupo:last-child .subirCategoria {
    padding-left: 16px !important;
    padding-right: 28px !important;
}

.btn {
    border: 2px solid white;
    border-radius: 3px;
    color: white;
}

.btn.danger {
    border: 2px solid rgb(255, 79, 79);
    color: rgb(255, 79, 79);
}

.btn:hover, .btn.active {
    background-color: white;
    color: rgb(66, 66, 66);
}

.btn.danger:hover, .btn.danger.active {
    background-color: rgb(255, 79, 79);
    color: rgb(66, 66, 66);
}

.btn:active {
    background-color: transparent;
    color: white;
}

.btn.danger:active {
    background-color: inherit;
    color: rgb(223, 73, 73);
}

.btn-delete {
    border: 2px solid rgb(255, 101, 101);
    color: rgb(255, 101, 101);
}

.btn-delete:hover {
    background-color: rgb(255, 101, 101);
    color: rgb(66, 66, 66);
}

#menu_superior_secundario {
    background: url("/img/fondo2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    z-index: 1000;
}

.menu-superior {
    position: absolute;
    top: 8px;
    right: 8px;
    height: 40px;
    display: flex;
}

.menu-amigos {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    color: white;;
    padding: 0 8px 0 8px;
}

.usuario-conectado {
    width: 40px;
    height: 40px;
    padding-top: 4px;
    border: 2px solid white;
    border-radius: 80px;
    color: white;
    text-align: center;
    cursor: pointer;
    background-image: none;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.usuario-conectado.desconectado {
    opacity: .5;
}

.pagina {
    width: 100%;
    margin: 0;
    padding: 0;
}

.menu-opciones{
    width: 500px;
    text-align: center;
    position: relative;
    display: block;
    border: 2px solid white;
    border-radius: 3px;
    color: white;
    padding: 0;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.2);
    list-style: none;
}


.menu-opciones li{
    margin: 8px;
}

.menu-opciones li a {
    display: block;
    width: 100%;
}

.menu-lateral {
    width: 100%;
    text-align: left;
    position: relative;
    display: block;
    border-radius: 3px;
    color: white;
    padding: 0 0 0 8px;
    list-style: none;
}

.menu-lateral li{
    margin: 8px 8px 8px 0;
    text-align: left;
    display: flex;
}

.menu-lateral li a {
    display: block;
    width: 100%;
    text-align: left;
}

.menu-opcion {
    position: relative;
}

.historia {
    min-height: 100%;
    width: 100%;
    min-width: 80%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction:column;
}

.titulo{
    display: inline-block;
    border-radius: 3px;
    margin: 8px;
    color: white;
    font-size: 26px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: left;
}

@media (min-width: 1300px) {
    .titulo{
        text-align: center;
    }
  }

.cuadro-general {
    position: relative;
    border: 2px solid white;
    border-radius: 3px;
    color: white;
    padding: 8px;
    margin: 0 8px 8px 8px;
    background-color: rgba(0, 0, 0, 0.2);
    flex:1;
	overflow: auto;
}

.cuadro-general-contenido {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
	overflow: auto;
}

.cuadro-general-contenido .menu-superior {
    margin-top: 8px;
    margin-right: 8px;
}

.cuadro-lateral {
    display: flex;
    flex-direction: column;
}

.cuadro-lista {
    height: 100%;
    width: 350px;
    text-align: left;
	overflow: auto;
}

.cuadro-busqueda {
    display: flex;
    margin-right: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid white;
}

.cuadro-busqueda-input {
    background: url("/img/fondo2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    max-height: 42px;
    max-width: 248px;
    border: 1px solid white;
    border-radius: 3px;
    padding: 8px;
    color: white;
    overflow: hidden;
    text-align: left;
}

.cuadro-informacion {
    width: 100%;
    height: 100%;
    text-align: left;
    background: url("/img/fondo2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
	overflow: auto;
}

#cuadro-informacion-contenido {
    padding: 16px;
}

.cuadro-lista-grupo-contenido {
    display: flex;
    flex-direction: row;
    padding-right: 8px;
}

.cuadro-lista-grupo-nombre {
    width: 100%;
    line-height: 40px;
}

.cuadro-lista-grupo-nuevo-personaje {
    cursor: pointer;
    width: 50px;
}

.idea.con-validacion {
    border-radius: 3px 0 0 3px;
}

.validacion-flag {
    position: relative;
    width: 27px;
    border: 2px solid white;
    border-radius: 0 3px 3px 0;
    border-left: 0;
}

.validacion-flag.rejected, .votar-no {
    background-color: #850000;
}

.validacion-flag.validated, .votar-si {
    background-color: #006900;
}

.validacion-flag.partial {
    background: rgb(0,128,0);
    background: linear-gradient(180deg, rgba(0,128,0,1) 0%, rgba(0,105,0,1) 50%, rgba(133,0,0,1) 50%, rgba(133,0,0,1) 100%);
}

.validacion-flag.incomplete {
    background-color: rgb(255, 145, 0);
}

.linea-tiempo {
    position: absolute;
    left: 50%;
    border: 1px solid white;
    width: 1px;
    height: calc(100% - 16px);
}

.lt-caja {
    position: absolute;
    display: flex;
    width: 300px;
    background-color: #2e3764;
    border: 2px solid white;
    border-radius: 100px;
    z-index: 1000;
    align-items: center;
    cursor: grab;
    flex-direction:row-reverse;
    text-align: right;

    -webkit-transtition: left .2s, right .2s, top .2s, bottom .2s;
    transition: left .2s, right .2s, top .2s, bottom .2s;
}

.lt-caja.no-visto {
    background-color: #4b1818;
}

.lt-caja.derecha {
    flex-direction:row;
    text-align: left;
}

.lt-caja:active {
    cursor: grabbing;
}

.lt-caja-imagen {
    border: 2px solid white;
    border-radius: 1000px;
    overflow: hidden;
    width: 90px;
    height: 50px;
    margin: 3px 3px 3px 20px;
    background-size: cover !important;
    background-position: center !important;
}

.lt-caja.derecha .lt-caja-imagen {
    margin: 3px 20px 3px 3px;
}

.lt-caja-capitulo {
    border: 2px solid white;
    border-radius: 1000px;
    overflow: hidden;
    width: 90px;
    height: 50px;
    margin: 3px 20px 3px 3px;
    line-height: 2.8;
    text-align: center;
}

a.lt-caja-capitulo {
    color: white;
}

a.lt-caja-capitulo:hover{
    background-color: white;
    color: rgb(66, 66, 66);
}

.lt-caja.derecha .lt-caja-capitulo {
    margin: 3px 3px 3px 20px;
}

#capitulo_resumen {
    margin: 16px 0 16px 0;
}


.lt-caja-linea {
    border: 1px dashed rgba(255, 255, 255, .5);
    border-radius: 1000px;
    height: 1px;
    position: absolute;
}

.lt-caja-enlace {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: white;
}

.lt-caja-titulo {
    user-select: none;
    width: 100%;
    overflow: hidden;
}

.lt-caja-titulo-personaje {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.lt-caja-titulo-texto {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.panel-out{
    display: table;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000000000000;
}

.panel-in{
    display: table-cell;
    vertical-align: middle;
}

.panel-box {
    margin: 0 auto;
    width: 700px;
    min-height: 100px;
    border: 2px solid white;
    border-radius: 3px;
    color: white;
    padding: 16px;
    background: url("/img/fondo2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

#panel_box {
    width: 400px;
}

.panel-titulo {
    text-align: center;
}

.panel-imagen {
    width: 100%;
    height: 300px;
    /*background-position: center !important;
    background-size: cover !important;*/
    background-repeat: no-repeat !important;
    text-align: center;
    cursor: pointer;
}

.panel-imagen-contenedor {
    text-align: center;
    height: 400px;
}

.panel-imagen-completa {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
}

.panel-avatar {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    text-align: center;
    border: 2px solid white;
    border-radius: 100px;
    cursor: pointer;
}

.panel-archivo {
    padding: 16px;
    margin: 16px;
    border: 1px solid white;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.5);
}

.panel-campo-contenedor {
    margin-top: 16px;
    display: flex;
}

.panel-campo-contenedor label{
    margin-right: 8px;
}

.panel-campo {
    width: 100%;
}

div.panel-campo {
    border: 1px solid white;
    border-radius: 3px;
    padding: 0 3px 0 3px;
}

.panel-contenido {
    width: 100%;
    min-height: 50px;
    max-height: 100px;
    overflow: auto;
    margin-top: 16px;
}

.panel-botones {
    margin-top: 16px;
    text-align: center;
}

.panel-texto-contenedor {
    display: block;
}

.panel-texto-contenedor label{
    display: block;
}

.panel-texto-contenedor .panel-campo{
    min-height: 100px;
    width: 100%;
}



.message-out{
    display: table;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000000000001;
}

.message-in{
    display: table-cell;
    vertical-align: middle;
}

.message-box {
    margin: 0 auto;
    width: 500px;
    height: auto;
    border: 2px solid white;
    border-radius: 3px;
    color: white;
    padding: 16px;    
    background: url("/img/fondo.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    text-align: center;
}

.message-botones {
    margin-top: 16px;
    text-align: center;
}

.message-text {
    margin-top: 16px;
    text-align: center;
}

.panel-pass-contenedor {
    position: relative;
    width: 100%;
}

#panel_contrasena {
    color: transparent;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}

#panel_contrasena_asterisco {
    color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    user-select: none;
    z-index: 1;
}

.chat-out {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 350px;
    height: 100%;
    padding: 0 8px 8px 8px;
    z-index: 100000000000;
    display: none;
}

.chat-in {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chat-close{
    font-size: 12px;
    color: white;
    text-align: center;
    width: 100%;
    cursor: pointer;
    padding: 4px;
}

.chat-box {
    background: url("/img/fondo2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    border: 1px solid white;
    border-radius: 3px;
    margin-bottom: 8px;
    margin-top: 8px;
    padding: 8px;
    height: 100%;
    color: white;
    overflow: auto;
}

.chat-input-box .chat-botones {
    margin-top: 8px;
    display: flex;
}

.chat-input {
    background: url("/img/fondo2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    max-height: 100px;
    border: 1px solid white;
    border-radius: 3px;
    margin-right: 8px;
    padding: 8px;
    color: white;
    overflow: hidden;
}

.chat-botones button {
    height: 100%;
}

.chat-message-main {
    border: 1px solid white;
    border-radius: 10px;
    padding: 8px;
    display: flex;

}

.chat-message-me {
    background-color: #252525;
    margin: 0 0 8px 40px;
}

.chat-message-friend {
    background-color: #002500;
    margin: 0 40px 8px 0;
}

.chat-message-box {
    width: calc(100% - 25px);
}

.chat-avatar {
    width: 25px;
    height: 25px;
    border: 1px solid white;
    border-radius: 55px;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.chat-datehour {
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
}

.chat-message-friend .chat-message {
    margin-left: 8px;
}

.chat-message-me .chat-message {
    margin-right: 8px;
}

.chat-message-friend .chat-datehour {
    margin-left: 8px;
}

.chat-message-me .chat-datehour {
    margin-right: 8px;
}

.chat-emojis {
    width: 100%;
    min-height: 100px;
    overflow: auto;
    margin-top: 8px;
}

.chat-emojis span {
    cursor: pointer;
}

/* LOG */
.log {
    position: fixed;
    top: 0;
    right: 0;
    width: 334px;
    height: calc(100% - 16px);
    padding: 8px;
    margin: 8px;
    z-index: 100000000000;
    border: 1px solid white;
    border-radius: 0 3px 0 0;
    font-size: 14px;
    color: white;
    overflow: auto;
    background: url("/img/fondo2.jpg");
    display: none;
}

.no-log .log {
    display: none;
}

.log-info{
    display: flex;
}

.log-info:not(:first-child){
    margin-top: 8px;
}

.log-index{
    margin-right: 4px;
}

.log-posvale {
    color: grey;
}

.log-mira {
    color: #97b7ff;
}

.log-ben {
    color: #00ff00;
}

.log-alavai {
    color: orange;
}

.log-atpc {
    color: rgb(221, 42, 42);
}

.notification-alert {
    display: none;
    position: absolute;
    left: -7px;
    top: -7px;
    width: 15px;
    height: 15px;
    background-color: rgb(170, 0, 0);
    border-radius: 100px;
    border: 1px solid white;
}

.no-visto > .notification-alert {
    display: block;
}

.contador-caracteres-palabras{
    position: fixed;
    right: 40px;
    bottom: 0;
    margin-top: -24px;
    z-index: 100000;
}

.contador-caracteres, .contador-palabras{
    border-radius: 5px 5px 0 0;
    padding: 0 16px 10px 16px;
    background-color: white;
    border: 1px solid black
}