/* TABLILLAS DE MARY SKINS PARA BAÚL Y MÓVIL */

#knowing, #creditosmary {
  --bordecito: #000000; 
  --fondoclaro: #1c1c1c; 
  --fondomedio: #222222; 
  --fondoscuro: #282828;
  --fuente:'Poppins';
  --fuente-tam:12px;
  --acento: var(--grupost, var(--usergroup));
  --borde-acento: var(--grupost, var(--usergroup));
  font-size:var(--fuente-tam);
  font-family:Poppins;
  color:var(--ctexto);
  margin:10px auto;
    border-radius:10px;
  background:var(--fondoclaro);
  border:1px solid var(--bordecito);
  width:500px;
  height:455px;
   overflow:hidden;
}
.light-mode #knowing {
--bordecito: #dcdcdc;
--fondoclaro:#ffffff;
--fondomedio:#fafafa;
--fondoscuro:#f1f1f1;
}
#knowing br{
  display:none;
}

#knowing .knhead {
  border-bottom: 1px solid var(--bordecito);
  width: 90%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0% 5%;
  overflow:hidden;
  position:relative;
  z-index:3;
}

#knowing .knhead i{
  color: var(--acento);
  font-size:1.5em;
}

#knowing .knhead b{
  border-bottom: 2px solid var(--borde-acento);
  text-transform:uppercase;
  font-weight:700;
  color: var(--ctexto)!important;
}

#knowing .kncabecera {
  background: var(--fondoscuro);
  border-bottom: 1px solid var(--bordecito);
  width: 100%;
  height: 100px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
    position:relative;
  z-index:3;
}

#knowing .kncabecera .knmini {
  background: var(--acento);
  width: 100px;
  height: 100px;
  border-right: 1px solid var(--bordecito);
  display: flex;
  align-items: center;
  justify-content: center;
}

#knowing .kncabecera .knmini img {
  width: 70px;
  height: 70px;
  border: 5px solid var(--blanco);
  outline: 1px solid var(--borde-acento);
}

#knowing .kncabecera p{
  text-align:right;
  width:50%;
  padding-right:5%;
}

#knowing .kncabecera p b{
  border-bottom:2px solid var(--acento);
  font-weight:600;
  color: var(--ctexto)!important
}
#knowing .kncabecera p i {
  color: var(--ctexto)!important
}
#knowing .separador {
  width: 100%;
  height: 14px;
  border-bottom: 1px solid var(--bordecito);
  display: flex;
  align-items: center;
  justify-content: center;
    position:relative;
  z-index:3;
}

#knowing .separador::after {
  background:var(--acento);
  content: "";
  color:var(--acento);
  width:98%;
  border-radius:100px;
  height:4px;
}

.kncontent2 {
  background: var(--fondomedio);
  height: 290px;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.kncontent2 .boxkn {
  position: absolute;
  bottom: -260px;
  transition: ease 1s;
  width: 460px;
  height: 250px;
  border: 1px solid var(--bordecito);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow: hidden;
  margin-right: 20px;
}

.kncontent2 input {
  display:none;
}

.kncontent2 label {
  cursor: pointer;
  border: 1px solid var(--bordecito);
  background: var(--fondoclaro);
  width: 10px;
  height: 10px;
  padding: 10px;
  border-radius: 100%;
  align-items: center;
  margin-right: 15px;
  transition: 1s;
  display: inline-flex;
  z-index: 7;
  position: inherit;
  top: -22px;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  color:var(--acento);
}

.kncontent2 input#kntemas1:checked ~ .boxkn1, .kncontent2 input#kntemas2:checked ~ .boxkn2, .kncontent2 input#kntemas3:checked ~ .boxkn3 {
  bottom:20px;
}

.kncontent2 input#kntemas1:checked ~ label[for="kntemas1"], .kncontent2 input#kntemas2:checked ~ label[for="kntemas2"], .kncontent2 input#kntemas3:checked ~ label[for="kntemas3"] {
  background:var(--acento);
}
.kncontent2 input#kntemas1:checked ~ label[for="kntemas1"] i, 
.kncontent2 input#kntemas2:checked ~ label[for="kntemas2"] i, 
.kncontent2 input#kntemas3:checked ~ label[for="kntemas3"] i {
  color: var(--ctexto)!important;
}

#knowing .kncontent2 .boxkn .knregishead {
  background: var(--fondoclaro);
  border-bottom: 1px solid var(--bordecito);
  display: flex;
  width: 94%;
  align-items: center;
  padding: 0% 3%;
  justify-content: space-between;
  height: 30px;
}

#knowing .kncontent2 .boxkn .knregishead b{
  font-weight:600;
    text-transform:uppercase;
}

#knowing .kncontent2 .boxkn .knregishead i{
  color:var(--acento);
}

#knowing .kncontent2 .knregis {
  width: 460px;
  height: 250px;
  border: 1px solid var(--bordecito);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: nowrap;
 overflow:hidden;
}

#knowing .boxkn .lista{
  height: 220px;
  overflow: auto;
}

#knowing .boxkn .lista p{
  margin:0px!important;
  padding:5px 10px;
}

#knowing .boxkn .lista p a{
  text-decoration:none;
  color:var(--borde-acento);
  font-weight:600;
  color:var(--ctexto);
  border-bottom:2px solid var(--borde-acento);
  transition:1s;
}

#knowing .boxkn .lista p a:hover{
  letter-spacing:0.5px;
    transition:1s;
}

#knowing .boxkn .lista p i{
  font-weight:600;
  font-style:normal;
  color: var(--ctexto)!important
}

#knowing .kncontent2.knc2 {
    padding: 15px;
    box-sizing: border-box;
    background: var(--grupost, var(--usergroup));
    display:flex;
    align-items:center;
    justify-content:center;
}

#knowing .kncontent2.knc2 img {
    border: 10px solid var(--blanco);
    width: 380px;
    height: 200px;
    object-fit: cover;
}

#knowing .kncontscroll{
  background: var(--fondomedio);
  display: block;
  width: 100%;
  height: 290px;
  overflow-y: scroll;
  scroll-behavior: smooth;
  position: relative;
  overflow-x: hidden;
  top: 12px;
}

#knowing .kncontscroll::-webkit-scrollbar { 
  width: 0px;
  height: 0px;
}

#knowing .lista::-webkit-scrollbar { 
  width: 5px;
  height: 5px;
  border-left:1px solid var(--bordecito);
}

#knowing .lista::-webkit-scrollbar-thumb {
    background: var(--acento);
  height:2px!important;
  width:20px!important;
}

#creditosmary {
    background: var(--acento);
    border-radius: 100px;
    width: 100px;
    height: 18px;
    text-align: center;
    font-size: 12px;
    font-family: arial;
    padding: 5px;
    font-weight: bold;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: transparent;
}

#creditosmary a{
color: var(--ctexto);
text-decoration:none;
}

/* movil */
#msticker br {
  display: none;
}
#msticker {
  --imagenfondo:url('https://www.transparenttextures.com/patterns/brilliant.png');
  --texto1: var(--ctexto);
  --bordecillo: var(--blanco);
  --transparencia:#00000059;
  --fondoscuro: var(--blanco);
  --fmensaje: var(--grupost, var(--usergroup));
  font-family:poppins;
}
.light-mode #msticker {
    --transparencia:#ffffff59;
}
#msticker {
  background:var(--imagenfondo);
  overflow:hidden;
  color:var(--texto1);
  margin:10px auto;
  width:350px;
  height:580px;
  border-radius:20px;
  box-shadow: 0px 2px 5px -2px rgb(0 0 0 / 50%);
 --color: var(--grupost, var(--usergroup));
}

#msticker .stop {
    background: var(--color);
    width: 100%;
    height: 130px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

#msticker .stop i{
  margin-top:20px;
  margin-left:20px;
  color: var(--texto1)!important;
}
#msticker .stop .perfil {
    display: flex;
    flex-direction: row;
    align-items: center;
}
#msticker .stop .perfil span{
  margin-right:20px;
  text-align:right;
  font-weight:800;
  font-size:25px;
}

#msticker .stop .perfil span b{
  display:block;
  background:var(--fondoscuro);
  font-weight:400;
  text-transform:uppercase;
  font-size:9px;
  padding:1px;
  border-radius:100px;
  width:100px;
  text-align:center;
  margin-top:5px;
  color: var(--texto1)!important;
}
#msticker .stop .perfil .avatar{
  background:var(--transparencia);
  width:100px;
  height:100px;
  border-radius:100%;
  margin-right:20px;
  margin-top:20px;
  border:1px solid var(--bordecillo);
  display:flex;
  justify-content: center;
    align-items: center;
}

#msticker .stop .perfil .avatar img{
  width:70px;
  height:70px;
  overflow:hidden;
  border-radius:100px;
  border:1px solid var(--bordecillo);
  object-fit: cover;
}

#msticker .mensajes {
    width: 100%;
  margin-top:-30px;
    height: 330px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#msticker .mensajes span {
    background: var(--fmensaje);
    color: var(--texto1);
    font-size: 12px;
    padding: 10px;
    border-radius: 5px;
    margin-right: 20px;
    margin-top: 10px;
    max-width: 270px;
    text-align: right;
}

#msticker .mensajes img{
  width:100px;
  height: 100px;
  object-fit: cover;
  margin-top:10px;
  margin-right: 20px;
}

#msticker .sbottom {
    background: var(--color);
    width: 100%;
    height: 75px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#msticker .sbottom i{
  margin-left:20px;
  font-size:25px;
  color: var(--texto1)!important;
}

#msticker .sbottom span{
  display:block;
   background:var(--transparencia);
  border:1px solid var(--bordecillo);
  width:230px;
  height:35px;
  border-radius:100px;
  margin-left:20px;
}

/* BÚSQUEDA DE PERSONAJE */

#knowing.knowbusq {
    height: auto;
}

#knowing.knowbusq .kncabecera p {
    margin-top: 25px;
}
 #knowing.knowbusq .kncabecera p span {
    display: block;
     margin-top: 10px;
     font-size: 11px;
     color: var(--grupost, var(--usergroup))!important;
     font-weight: 600;
}
 #knowing.knowbusq .boxkn .lista br {
  display: block;
 }
 #knowing .boxkn .lista {
    text-align: justify;
     padding: 15px;
     hyphens: auto;
}

/* BÚSQUEDA DE TRAMAS */

#knowing.knowbusq .knowing-tramas {
    background: var(--fondoscuro);
     padding: 30px 0;
}
 #knowing.knowbusq .knowing-tramas .knowtrama {
    width: 400px;
     background: var(--blanco);
     margin: 0 auto;
     margin-top: 25px;
     padding: 10px;
     border-radius: 10px;
     border: 1px solid var(--bordecito);
}
 #knowing.knowbusq .knowing-tramas .knowtrama h {
    color: var(--ctexto);
     display: block;
     font: 700 13px "Poppins";
     text-transform: uppercase;
     margin-bottom: 10px;
     border-bottom: 3px solid var(--grupost, var(--usergroup));
}
 #knowing.knowbusq .knowing-tramas .knowtrama h i {
    font-size: 18px;
     margin-right: 10px;
     color: var(--grupost, var(--usergroup));
}
 #knowing.knowbusq .knowing-tramas .knowtrama h span {
    font-size: 9px;
     font-weight: 500;
     font-style: italic;
     color: var(--grupost, var(--usergroup));
     float: right;
     position: relative;
     top: 4px;
}
 #knowing.knowbusq .knowing-tramas .knowtrama>textotrama br {
    display: block;
}