/******************************************/  
/* ESTILOS GENERALES
/******************************************/ 
body, html {

    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: min(max(1rem, 4vw), 22px) !important;
    user-select: none;
    color: white !important;

}

.h-0 {
  height: 0px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.h-10 {
  height: 10%;
  margin-bottom: 20px;
  margin-top: 20px;
}

.h-15 {
  height: 15%;
  margin-bottom: 20px;
  margin-top: 20px;
}

.h-40 {
  height: 40%;
  margin-bottom: 20px;
  margin-top: 20px;
}

.h-35 {
  height: 35%;
  margin-bottom: 20px;
  margin-top: 20px;
}

.h-70 {
  height: 70%;
  margin-bottom: 20px;
  margin-top: 20px;
}

.h-80 {
  height: 80%;
  margin-bottom: 20px;
  margin-top: 20px;
}

.fullScreen{
  height: 23rem !important;
  
}

.halfScreen{
  height: 15rem !important;
  
}

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
      max-width:100%;
      overflow-x: hidden !important;
}

@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
} 

/******************************************/  
/* FONDOS GENERALES
/******************************************/ 
.fondo-general {
  background: url(../dat/img/loc0.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
  width: 100%;
  height: 100%;
}


.fondo-negro {
  background-color: rgb(0, 0, 0) !important;
  width: 100%;
  height: 100%;
}

/******************************************/  
/* PANTALLAS DE TITULO Y LORE
/******************************************/ 

.pantalla-titulo-principal {
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translateX(-0%) translateY(-0%);
  max-width: 100%;
  max-height: 100%;
  overflow-x: hidden !important;
  z-index: 2900;
}

.pantalla-interrogante {
  font-family: 'AventurasAD';
  display: block;
  position: fixed;
   top: 0px; 
   left: 0%; 
   transform: translate(-0%, -0%); 
  background-color: black !important;
  color: white;
  background-repeat: no-repeat;
  z-index: 3000;
  width: 100%;
  height: 100%;
  position: absolute;
}

.pantalla-interrogante-signo {
  font-family: 'AventurasAD';
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color:black !important;
  color: white;
  background-repeat: no-repeat; 
  position: absolute;
}

.pantalla-titulo {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 2900;  
  position: absolute;
  background-size: cover;  
}

.pantalla-titulo-principal {
  position: absolute; 
  top: 20%; 
  left: 50%; 
  transform: translateX(-50%) translateY(-50%); 
  max-width: 100%; 
  max-height: 100%;  
}



.pantalla-personaje {
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    display: none;
    transform: translate(0%, 0%);
    color: white;
    background: url(../dat/img/loc0.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow: hidden;
    z-index: 2800;  
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    position: absolute; 
  }
  .imagen-fadein {
    animation: fadeInImage ease 2s;
    -webkit-animation: fadeInImage ease 2s;
    -moz-animation: fadeInImage ease 2s;
    -o-animation: fadeInImage ease 2s;
    -ms-animation: fadeInImage ease 2s;
  }
  @keyframes fadeInImage {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  @-moz-keyframes fadeInImage {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  @-webkit-keyframes fadeInImage {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  @-o-keyframes fadeInImage {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  @-ms-keyframes fadeInImage {
    0% {opacity:0;}
    100% {opacity:1;}
  }


/* FIN CSS Pantallas de Inicio */





.wrapper {
    overflow-x: clip;
}

.half_graphics {
    height: 50%;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: pic 2s;
    animation-fill-mode: forwards;
    background-color: #000000;
    z-index: -255;
}

.all_text {
  top: 15%;
  bottom: 7%;
  width: auto;
  background-color: #000000a3 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  border-color: white;
  border: 1px;
  border-radius: 20px;
  padding-left: 42px;
  padding-right: 40px;
  padding-top: 10px;
  margin-bottom: 30px;
  min-height: 30% !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: right;
  overflow: auto;
  height: 100%;
  font-size: min(max(1rem, 4vw), 22px) !important;
}

::-webkit-input-placeholder { /* Edge */
  color: rgb(255, 255, 255);
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: rgb(255, 255, 255);
}

::placeholder {
  color: rgb(255, 255, 255);
}


.half_text {
  /*background-color: #0000002e !important;*/

  background-image: linear-gradient(#00000040, #0000002b);

  filter: drop-shadow(0px 6px 6px black);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  border-color: white;
  border: 1px;
  border-radius: 20px;
  padding-left: 42px;
  padding-right: 40px;
  padding-top: 10px;
  padding-bottom: 30px;
  min-height: 30% !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: right;
  overflow: auto;
  height: 15em;
  /*height: 15em;*/
    font-size: min(max(1rem, 4vw), 22px) !important;
}

.input {
  background-color: #000000;
  border-color: white;
  border: 1px;
  border-radius: 10px;
  padding-left: 42px;
  padding-right: 40px;
  padding-top: 10px;
  font-size: min(max(1rem, 4vw), 22px) !important;
}


/* Tamaño del scroll */
  .half_text::-webkit-scrollbar {
    width: 10px;    
  }

  /* Estilos barra (thumb) de scroll */
  .half_text::-webkit-scrollbar-thumb {
    background: rgb(255, 255, 255);
    border-radius: 4px;
  }

  .half_text::-webkit-scrollbar-thumb:active {
    background-color: #25b838;
  }

  .half_text::-webkit-scrollbar-thumb:hover {
    background: #0259fa;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  }

  /* Estilos track de scroll */
  .half_text::-webkit-scrollbar-track {
    background: #000000a3;
    border-radius: 4px;
  }

  .half_text::-webkit-scrollbar-track:hover, 
  .half_text::-webkit-scrollbar-track:active {
    background: #000000a3;
  }



.prompteloy {
	color:#00ff89 !important;
  filter: drop-shadow(0px 6px 6px black);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.promptrosa {
  color: #d800ff !important;
  filter: drop-shadow(0px 6px 6px black);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.oculto {
  display: none !important;
}

.visible {
  display:block;
}

.pantalla-oculta {
  display: none !important;
}

.pantalla-visible {
  display:block;
}


.desactivado {
  color: grey;
}
.activado {
  color: #00ff89;
}
/******************************************/  
/* ICONOS PERSONAJES
/******************************************/  
.npc-talk-img {
  text-align: center;
  max-width: 40px;
  max-height: 40px;
  border-radius: 50%;
  margin-left: 20px;
  border-style: inset;
  border-color: coral;
  margin-right: 20px;
  margin-bottom: 10px;
  border-width: 1px;
}


.floating-image-container {
  text-align:center;
  max-width: 33%;
  max-height: 33%;
  background: rgba(0,0,0,0);
	box-sizing: border-box;
	border-radius: 50%;
  margin-left: 10px;
	box-shadow: 0 40px 5px -25px rgba(0, 0, 0, 0.6);
	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;
  margin-bottom: 20px;
}

.floating-image-container img {
  width: 100px;
  height:100px;
  border-radius: 50%;
  border-style: inset;
  /*border-color: rgb(255 255 255 / 26%);*/
  border-width: 3px;
}


@keyframes float {
	0% {
		box-shadow: 0 60px 5px -42px rgba(0, 0, 0, 0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 75px 5px -40px rgba(0, 0, 0, 0.2);
		transform: translatey(-10px);
	}
	100% {
    box-shadow: 0 60px 5px -42px rgba(0, 0, 0, 0.6);
		transform: translatey(0px);
	}
}
/******************************************/  
/* FIN ICONOS PERSONAJES
/******************************************/  

/******************************************/  
/* ICONOS PROTAGONISTAS
/******************************************/ 
.rosa-container {
  z-index: 2;
  text-align:center;
  max-width: 50px;
  /*
  max-height: 30px;
  background: rgba(0,0,0,0);
	box-sizing: border-box;
    */
	border-radius: 50%;
	box-shadow: 0 6px 10px 0px rgb(0, 0, 0);
	/*
  transform: translatey(0px);
	animation: float 6s ease-in-out infinite;
  margin-bottom: 12px;
  border-style: outset;
  border-width: medium;
  border-color: #d800fff2;*/
  left: -35px;
  position: relative;
  top: -6px;
}

.eloy-container {
  z-index: 1;
  text-align:center;
  max-width: 50px;
  /*
  max-height: 30px;
  background: rgba(0,0,0,0);
	box-sizing: border-box;
    */
	border-radius: 50%;
	box-shadow: 0 6px 10px 0px rgb(0, 0, 0);
	/*transform: translatey(0px);
	animation: float 6s ease-in-out infinite;
  margin-bottom: 12px;
  border-style: outset;
  border-width: medium;
  border-color: #00ff89f2;
  opacity: 1;
  */
  left: -35px;
  position: relative;
  top: -6px;
}

.protagonista-inactivo {
  z-index: 1;
  border-color: #ffffff57;
  width: 30px;
  height: 30px;
  opacity: 0.6;
}


.box {
  margin-left: 21px;
  margin-right: 21px;
  display: flex;
  align-items:center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: right;
  background-color: #00000080   !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  border-color: white;
  border: 2px;
  border-radius: 20px;
  padding-left: 42px;
  padding-right: 40px; 
  max-height: 50px;
}

/******************************************/  
/* BRUJULA
/******************************************/ 
.rotate-45-left {
  display: inline-block;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.rotate-45-right {
  display: inline-block;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.hidden {
  visibility: hidden;
}



.item {
  position:relative;
  padding-top:20px;
  display:inline-block;
  background-color: greenyellow;
}


.notify-badge {
  position: relative !important;
  right: 0px;
  top: -75% !important;
  left: 28px;
  background: red;
  text-align: center;
  border-radius: 50px 50px 50px 50px!important;
  color: white;
  padding: 5px 10px;
  font-size: 15px;
  width: fit-content !important;
  max-width: 50px;
}
/*
.carried-badge {
  position: relative !important;
  left: -20%;
  background: rgba(0, 0, 0, 0);
  text-align: center;
  border-radius: 50px 50px 50px 50px!important;
  color: white;
  padding: 5px 10px;
  font-size: 15px;
  width: fit-content !important;
  max-width: 50px;
}
*/
.carried-badge {
position: relative !important;
right: 0px;
/*
top: -75% !important;
left: 28px;^

background: red;*/
text-align: center;
border-radius: 50px 50px 50px 50px !important;
color: white;
padding: 5px 10px;
font-size: 15px;
width: fit-content !important;
max-width: 50px;
}



/******************************************/  
/* VIDEO DE FONDO
/******************************************/ 
.video_fondo {
  z-index: -10; 
  right: 0; 
  bottom: 0; 
  object-fit: cover; 
  width: 100vw; 
  height: 100vh; 
  position: fixed; 
  top: 0; 
  left: 0;
  animation: myAnim 500ms ease 0s 1 normal forwards;
}

@keyframes myAnim {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*z-index: -10; right: 0; bottom: 0; object-fit: fill; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; */

/******************************************/  
/* VIDEO DE FONDO
/******************************************/ 


@font-face {
	font-family: 'icomoon';
	src:  url('../dat/fonts//icomoon.eot?vu2xyz');
	src:  url('../dat/fonts//icomoon.eot?vu2xyz#iefix') format('embedded-opentype'),
	  url('../dat/fonts//icomoon.ttf?vu2xyz') format('truetype'),
	  url('../dat/fonts//icomoon.woff?vu2xyz') format('woff'),
	  url('../dat/fonts//icomoon.svg?vu2xyz#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
  font-display: swap;
  }
  
  [class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }
  
  .icon-battery:before {
	content: "\f240";
  }
  .icon-battery-4:before {
	content: "\f240";
  }
  .icon-battery-full:before {
	content: "\f240";
  }
  .icon-battery-3:before {
	content: "\f241";
  }
  .icon-battery-three-quarters:before {
	content: "\f241";
  }
  .icon-battery-2:before {
	content: "\f242";
  }
  .icon-battery-half:before {
	content: "\f242";
  }
  .icon-battery-1:before {
	content: "\f243";
  }
  .icon-battery-quarter:before {
	content: "\f243";
  }
  .icon-battery-0:before {
	content: "\f244";
  }
  .icon-battery-empty:before {
	content: "\f244";
  }
  .icon-printer:before {
	content: "\e900";
  font-size: 18px !important;
  }
  .icon-brightness_low:before {
	content: "\e901";
  }
  .icon-filter_1:before {
	content: "\e902";
  }
  .icon-filter_2:before {
	content: "\e903";
  }
  .icon-filter_3:before {
	content: "\e904";
  }
  .icon-filter:before {
	content: "\e905";
  }
  .icon-filter_4:before {
	content: "\e906";
  }
  .icon-filter_5:before {
	content: "\e907";
  }
  .icon-filter_6:before {
	content: "\e908";
  }
  .icon-filter_7:before {
	content: "\e909";
  }
  .icon-filter_8:before {
	content: "\e90a";
  }
  .icon-filter_9:before {
	content: "\e90b";
  }
  .icon-filter_9_plus:before {
	content: "\e90c";
  }
  .icon-dry_cleaning:before {
	content: "\e90d";
  }
  .icon-nightlight_round:before {
	content: "\e90e";
  }
  .icon-arrow-right-alt1:before {
	content: "\e90f";
  }
  .icon-home:before {
	content: "\e910";
  }
  .icon-image:before {
	content: "\e911";
  }
  .icon-bullhorn:before {
	content: "\e91a";
  }
  .icon-map:before {
	content: "\e94b";
  }
  .icon-clock:before {
	content: "\e94e";
  }
  .icon-bubble2:before {
	content: "\e96e";
  }
  .icon-equalizer:before {
	content: "\e992";
  }
  .icon-download2:before {
	content: "\e9c5";
  }
  .icon-upload2:before {
	content: "\e9c6";
  }
  .icon-sun:before {
	content: "\e9d4";
  }
  .icon-man:before {
	content: "\e9dc";
  }
  .icon-woman:before {
	content: "\e9dd";
  }
  .icon-man-woman:before {
	content: "\e9de";
  }
  .icon-enter:before {
	content: "\ea13";
  }
  .icon-exit:before {
	content: "\ea14";
  }
  .icon-arrow-up-left:before {
	content: "\ea31";
  }
  .icon-arrow-up:before {
	content: "\ea32";
  }
  .icon-arrow-up-right:before {
	content: "\ea33";
  }
  .icon-arrow-right:before {
	content: "\ea34";
  }
  .icon-arrow-down-right:before {
	content: "\ea35";
  }
  .icon-arrow-down:before {
	content: "\ea36";
  }
  .icon-arrow-down-left:before {
	content: "\ea37";
  }
  .icon-arrow-left:before {
	content: "\ea38";
  }
  

  .importante{
    color: khaki;    
  }


  .blink_me {
    animation: blinker 1s linear infinite;
  }
  
  @keyframes blinker {  
    50% { opacity: 0; }
  }

  @font-face {
    font-family: 'OneSignature';
    src: url('../dat/fonts/OneSignature.ttf')  format('truetype'); /* Safari, Android, iOS */       
    font-weight: 300;
    font-style: normal;
    font-size: large;
    font-display: swap;
  }

  @font-face {
    font-family: 'zoftfrakt eYe/FS';
    src: url('../dat/fonts/zoftfrakt-eye-fs.ttf')  format('truetype'); /* Safari, Android, iOS */       
    font-weight: 300;
    font-style: normal;
    font-size: large;
    font-display: swap;
}

@font-face {
    font-family: 'MiddleAgesDeco';
    src: url('../dat/fonts/MiddleAgesDeco.ttf')  format('truetype'); /* Safari, Android, iOS */       
    font-weight: 300;
    font-style: normal;
    font-size: large;
    font-display: swap;
}

@font-face {
  font-family: 'Tisk';
  src: url('../dat/fonts/Tisk.ttf')  format('truetype'); /* Safari, Android, iOS */       
  font-weight: 300;
  font-style: normal;
  font-size: large;
  font-display: swap;
}

@font-face {
  font-family: 'AventurasAD';
  src: url('../dat/fonts/AventurasAD.ttf') format('truetype'); /* Safari, Android, iOS */       
}


@font-face {
  font-family: 'JackPirate';
  src: url('../dat/fonts/JackPirate.ttf')  format('truetype'); /* Safari, Android, iOS */       
  font-weight: 300;
  font-style: normal;
  font-size: large;
  font-display: swap;
}


@font-face {
  font-family: 'TerminusTTF';
  src: url('../dat/fonts/TerminusTTF.ttf')  format('truetype'); /* Safari, Android, iOS */       
  font-weight: 40;
  font-style: normal;
  font-display: swap;
  font-size: normal;
}

@font-face {
	font-family: 'Weather Sunday - Personal Use';
	src: url('../dat/fonts/WeatherSunday-PersonalUse.woff2') format('woff2'), url('../dat/fonts/WeatherSunday-PersonalUse.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'MiddleAgesDeco';
	src: url('../dat/fonts/MiddleAgesDeco.ttf') format('truetype');
	/* Safari, Android, iOS */
	font-weight: 300;
	font-style: normal;
	font-size: large;
	font-display: swap;
}

@font-face {
	font-family: 'Danieldb';
	src: url('../dat/fonts/danieldb.ttf') format('truetype');
	/* Safari, Android, iOS */
	font-weight: 300;
	font-style: normal;
	font-size: large;
	font-display: swap;
}

@font-face {
  font-family: 'Lemon Tuesday';
  src: url('../dat/fonts/LemonTuesday.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


  .bg_interrogante {
    font-family: 'Courier New', Courier, monospace;
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color:black !important;
    color: white;
    background-repeat: no-repeat;
    z-index: 1800;  
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .sgn_interrogante {
    font-family:sans-serif;
    display: block;
    font-size: 4rem;
    position: fixed;
    top: 50%;
    left: 50%;
  z-index: 1800;  
    transform: translate(-50%, -50%);
    background-color:black !important;
    color: white;    
  }

  .bg_archivero {
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    display: block;
    position: fixed;
    transform: translate(0%, 0%);
    color: white;
    background-image: url(../dat/img/personajes.jpg);
    background-repeat: round;
    z-index: 1000;  
    width: 100%;
    height: 100%;
    position: absolute; 
  }

/* INICIO LORE SCROLL 
  .pantalla-lore {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 2700;  
    position: absolute;
    background: url(../dat/img/loc0.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow: hidden;
  }
  
  .slider {
    top: 2em;
    position: relative;
    box-sizing: border-box;
    animation: slider 70s linear 5;
    animation-fill-mode: forwards;
    list-style-type: none;
    text-align: center;
    margin-left: 15%;
    width: 70%;
  }

  .slider p {
    font-size: 2rem !important;
    line-height: 2.5rem !important;
    padding-bottom: 1.2rem !important;
  }

  .noselect {
    -webkit-touch-callout: none; /* iOS Safari *
        -webkit-user-select: none; /* Safari *
        -khtml-user-select: none; /* Konqueror HTML *
        -moz-user-select: none; /* Old versions of Firefox *
            -ms-user-select: none; /* Internet Explorer/Edge *
                user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox *
  }

  @keyframes slider {
      0%   { top:   40em }
      100% { top: -150em }
      
  }

  .blur .slider {
      margin: 0;
      padding: 0 1em;
      line-height: 1.5em;
  }

  .blur:before, .blur::before,
  .blur:after,  .blur::after {
      left: 0;
      z-index: 1;
      content: '';
      position: absolute;
      width: 100%; 
      height: 2em;
      /*background-image: linear-gradient(180deg, rgb(0, 0, 0), rgba(255,255,255,0));*
  }

  .blur:after, .blur::after {
      bottom: 0;
      transform: rotate(180deg);
  }

  .blur:before, .blur::before {
      top: 0;
  }

  .sgn_archivero{
    animation: fadeIn 40s;
    -webkit-animation: fadeIn 40s;
    -moz-animation: fadeIn 40s;
    -o-animation: fadeIn 40s ;
    -ms-animation: fadeIn 40s;    
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
/*  z-index: 1800;  *
  }

  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
    }

/* FIN LORE SCROLL */

/* INICIO LORE SCROLL */
.pantalla-lore {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2700;
  background: url(../dat/img/loc0.jpg) no-repeat center center fixed; 
  background-size: cover;
  overflow: hidden;
}

.slider {
  top: 30em;
  position: relative;
  box-sizing: border-box;
  animation: scroll-vertical 50s linear forwards;
  animation-fill-mode: forwards;
  list-style-type: none;
  text-align: center;
  margin-left: 15%;
  width: 70%;

}

.slider p {
  font-size: 2rem;
  line-height: 2.5rem;
  padding-bottom: 1.2rem;
}

.separator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: fade-in 2s linear forwards;
}

.archivero {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: fade-in 50s linear forwards;
}

@keyframes scroll-vertical {
  0% {
      transform: translateY(0);
  }
  100% {
      transform: translateY(-150em);
  }
}

@keyframes fade-in {
  0% {
      opacity: 0;
  }
  20% {
    opacity: 0;
  }
  100% {
      opacity: 1;
  }
}
/* FIN LORE SCROLL */


  .bg_intro{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    display: block;
    position: fixed;
    transform: translate(0%, 0%);
    color: white;
    background-image: url(../dat/img/loc0.avif);
    background-repeat: round;
    z-index: 800;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .bg_titulo {   
    font-family: 'Courier New', Courier, monospace;
    position: fixed;
    transform: translate(0%, 0%);
    background-color: black !important;
    color: white;
    background-image: url(../dat/img/loc0.avif);
    z-index: 800;
    inset: 0px;
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    background-repeat: round;
  }

  .sgn_titulo {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }



  .contenedor {
    top: 10%;    
    left: 10%;
    /* transform: translate(-50%, -50%); */
    overflow: hidden;
    height: 80%;
    width: 80%;
    position: relative;
}


p {
  font-family: MiddleAgesDeco;
  font-size: 3rem;
  text-align: center;
  padding-bottom: 5rem;
  line-height: 1.2;
  color: black;
}

/*!
 * Glowing.css - a simple pure CSS to make PNG or anything glow!
 * https://github.com/topex-psy/Glowing.css
 *
 * Version: 1.0
 * Author: Taufik Nur Rahmanda (https://www.facebook.com/TopEx.Divine)
 * Github: https://github.com/topex-psy

 * Made available under a MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */
 
 .glowing {
  filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0.8));
  transition: all 0.2s linear;
}

.glowing:hover {
  filter: drop-shadow(0 0 8px);
}

.glowing.red:hover {
  filter: drop-shadow(0 0 8px rgba(255, 153, 153, 1));
}

.glowing.orange:hover {
  filter: drop-shadow(0 0 8px rgba(244, 173, 66, 1));
}

.glowing.yellow:hover {
  filter: drop-shadow(0 0 8px rgba(244, 241, 66, 1));
}

.glowing.green:hover {
  filter: drop-shadow(0 0 8px rgba(83, 244, 66, 1));
}

.glowing.cyan:hover {
  filter: drop-shadow(0 0 8px rgba(0, 255, 221, 1));
}

.glowing.lightblue:hover {
  filter: drop-shadow(0 0 8px rgba(0, 231, 255, 1));
}

.glowing.black:hover {
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 1));
}

.glowing.blue:hover {
  filter: drop-shadow(0 0 8px rgba(0, 153, 255, 1));
}

.glowing.darkblue:hover {
  filter: drop-shadow(0 0 8px rgba(0, 63, 255, 1));
}

.glowing.indigo:hover {
  filter: drop-shadow(0 0 8px rgba(167, 66, 244, 1));
}

.glowing.purple:hover {
  filter: drop-shadow(0 0 8px rgba(244, 66, 232, 1));
}

.glowing.magenta:hover {
  filter: drop-shadow(0 0 8px rgba(255, 109, 194, 1));
}

.glowing.pink:hover {
  filter: drop-shadow(0 0 8px rgba(255, 137, 184, 1));
}

.glowing.select:hover {
  filter: drop-shadow(0 0 8px rgb(139, 255, 0))
}


.quickly {
  transition: transform 0.05s !important;
}

.rotating:hover {
  transform: scale(1.1);
}

.zooming:hover {
  transform: scale(1.1);
}

.disco:hover {
  animation: disco 2s ease-in-out infinite;
}

@keyframes disco {
  0% {
      filter: drop-shadow(0 0 8px rgba(255, 153, 153, 1));
  }
  25% {
      filter: drop-shadow(0 0 8px rgba(244, 241, 66, 1));
  }
  50% {
      filter: drop-shadow(0 0 8px rgba(0,153,255,1));
  }
  75% {
    filter: drop-shadow(0 0 8px rgba(244,66,232,1));
  }
  100% {
    filter: drop-shadow(0 0 8px rgba(255,153,153,1));
  }
}
 
/*

 .glowing {
	-webkit-filter: drop-shadow(0 0 0 rgba(255,255,255,.8));
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear;
}
.glowing.red:hover { -webkit-filter: drop-shadow(0 0 8px rgba(255,153,153,1)); }
.glowing.orange:hover { -webkit-filter: drop-shadow(0 0 8px rgba(244,173,66,1)); }
.glowing.yellow:hover { -webkit-filter: drop-shadow(0 0 8px rgba(244,241,66,1)); }
.glowing.green:hover { -webkit-filter: drop-shadow(0 0 8px rgba(83,244,66,1)); }
.glowing.cyan:hover { -webkit-filter: drop-shadow(0 0 8px rgba(0,255,221,1)); }
.glowing.lightblue:hover { -webkit-filter: drop-shadow(0 0 8px rgba(0,231,255,1)); }
.glowing.blue:hover { -webkit-filter: drop-shadow(0 0 8px rgba(0,153,255,1)); }
.glowing.darkblue:hover { -webkit-filter: drop-shadow(0 0 8px rgba(0,63,255,1)); }
.glowing.indigo:hover { -webkit-filter: drop-shadow(0 0 8px rgba(167,66,244,1)); }
.glowing.purple:hover { -webkit-filter: drop-shadow(0 0 8px rgba(244,66,232,1)); }
.glowing.magenta:hover { -webkit-filter: drop-shadow(0 0 8px rgba(255,109,194,1)); }
.glowing.pink:hover { -webkit-filter: drop-shadow(0 0 8px rgba(255,137,184,1)); }

.quickly { -webkit-transition:-webkit-transform .05s !important;-moz-transition:-moz-transform .05s !important;-o-transition:-o-transform .05s !important;transition:transform .05s !important; }
.rotating:hover { -ms-transform:matrix(1.1,0.2,-0.2,1.1,0,0);-webkit-transform:matrix(1.1,0.2,-0.2,1.1,0,0);transform:matrix(1.1,0.2,-0.2,1.1,0,0); }
.zooming:hover { -ms-transform: scale(1.1,1.1);-webkit-transform: scale(1.1,1.1);transform: scale(1.1,1.1); }

.disco:hover {
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: disco;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-name: disco;
}
@-webkit-keyframes disco {
	0%    { -webkit-filter: drop-shadow(0 0 8px rgba(255,153,153,1)); }
	25%  { -webkit-filter: drop-shadow(0 0 8px rgba(244,241,66,1)); }
	50%  { -webkit-filter: drop-shadow(0 0 8px rgba(0,153,255,1)); }
	75%  { -webkit-filter: drop-shadow(0 0 8px rgba(244,66,232,1)); }
	100%    { -webkit-filter: drop-shadow(0 0 8px rgba(255,153,153,1)); }
}


*/

.graphics {
  animation: fadeIn2 1s;
  -webkit-animation: fadeIn2 1s;
  -moz-animation: fadeIn2 1s;
  -o-animation: fadeIn2 1s;
  -ms-animation: fadeIn2 1s;    

}

@keyframes fadeIn2 {
  0% {opacity:0;}
  100% {opacity:1;}
}

.npc{
  /*ont-family: MiddleAgesDeco;*/
  font-size: 1rem;
  line-height: 1.4;
  color: coral !important;

}


.listavariables{
  column-count: 7;
  font-family: 'TerminusTTF', Courier, monospace;
  font-size: medium;
  background-color:black !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: right;
  text-align: left;
  /*padding: 1rem;*/
}




.mapa{
  font-family: 'MiddleAgesDeco', Courier, monospace;
  position: fixed;
  transform: translate(0%, 0%);
  background-color: #0000006b  !important;
  color: black;
  z-index: 800;
  font-size: 1.0rem;
  inset: 0px;
  width: 100% !important;
  height: 100% !important;
  position: absolute;
 /* text-transform: capitalize;*/
  background-repeat: round;
  background-image: url(../dat/img/mapa.png);
}

.lugarMapa {
 /*
  display: flex;
  flex-direction: column;
  transform-origin: 50% 50%;
  
  max-width: 427px;*/
  transition: 0.5s ease-in-out;
  margin: 15px;
  max-height: 120px;
}

.lugarMapa:hover {
  transform: scale(1.525);
  transition: 0.5s ease-in-out;
}

.jugadorMapa {
  animation: resaltado 1300ms infinite; 
  position: absolute; 
  max-width: 50px !important;
  /*
  bottom: 50px !important;
  left: -20px !important;
  */
}

.mapagrid-container {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(8, 1fr);
  /* Establecer un ancho y alto para el contenedor */
  width: 100%;
  height: 100%;
  position: absolute;  
  /* Establecer un margen para centrar el contenedor en la pantalla */
  margin: 0 auto;
  /* Establecer una imagen de fondo */
  background-image: url(../dat/img/mapa.png);
  background-size: cover;
  background-repeat: round;
  top: 0px;
  left: 0px;
}

.mapagrid-cell {
  /* Establecer un borde para las celdas */
 /* border: 1px solid black; */
  /* Centrar el contenido de las celdas */
  display: flex;
  align-items: end;
  justify-content: center;
}

.mapagrid-cell-img {
  /* Establecer un tamaño para las imágenes */
  width: 80%;
  height: 80%;
}

/* Estilos para que la rejilla sea responsive*/
@media (max-width: 768px) {
  .mapagrid-cell {
  width: 20%;
  height: 25%;
  }
  }
  
  @media (max-width: 480px) {
  .mapagrid-cell {
  width: 30%;
  height: 35%;
  }
  }
  
.intmochila{
  transform: translate(0%, 0%);
  background-color: #0000006b  !important;
  color: black;
  font-size: 1.0rem;
  z-index: 800;
  width: 100%; 
  height: 100%;
  left: 0%;
  bottom: 0px;
  position: absolute;
  background-repeat: round;
  /*background-image: url(../dat/icons/intmochila.webp);*/
}

.objpopup{
  font-family: 'Courier New', Courier, monospace;
  position: fixed;
  transform: translate(0%, 0%);
  background-color: #000000d1  !important;
  color: white;
  z-index: 800;
  inset: 0px;
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  background-repeat: round;
	display: none;
  /*display: flex;*/
  justify-content: center;
  align-items: center;
/*  border: 1px solid;*/
  width: 50vw;
  height: 50vw;
}

.objpopup[style*='display: block']{
  display: flex !important;
}

.objpopup_layer .objpopup_graphics {
	position: absolute;
	width: 100%;
	height:100%; 
	top: 0;
	display: inline;
	box-sizing: border-box;
}

.objpopup_picture
{
  margin: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  /*border: 3px solid #d39e00;*/
  padding: 10px;
  padding: 70px 0;
}

.objpopup_text {
	position: absolute;
  font-size: xx-large;
	bottom: 20px;
	width: 100%;
  color:rgb(255, 4, 4);
  text-align: center;
	box-sizing: border-box;
	display: inline;
  z-index: inherit;
  animation: blinker 1s linear infinite;
  text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}

.popup{
  font-family: 'Courier New', Courier, monospace;
  position: fixed;
  transform: translate(0%, 0%);
  background-color: #0000006b  !important;
  color: white;
  z-index: 800;
  inset: 0px;
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  background-repeat: round;
	display: none;
}

.popup_layer .popup_graphics {
	position: absolute;
	width: 100%;
	height:100%; 
	top: 0;
	display: inline;
	box-sizing: border-box;
  
}

.popup_picture
{
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.popup_graphics {
  height: -webkit-fill-available;
}

.popup_text {
	position: absolute;
  font-size: xx-large;
	bottom: 20px;
	width: 100%;
  color:rgb(255, 176, 4);
  text-align: center;
	box-sizing: border-box;
	display: inline;
  animation: blinker 1s linear infinite;
  text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}


.resaltar {
  background: black;
  animation: blink 5s linear infinite;
  border-style: dashed;
  text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
  border-width: thin;
}

@keyframes blink { 
  0% { opacity: 1.0; }
  50% { opacity: 0.5; }
  100% { opacity: 1.0; }
}

.npc-neutro {
  border-style: outset; 
  border-width: medium; 
  border-color: #ff7f5000;
}

.npc-feliz {
  border-style: outset; 
  border-width: medium; 
  border-color: #21b543f2;
}
.npc-enfadado {
  border-style: outset; 
  border-width: medium; 
  border-color: #ff0000f2;
}
.npc-dormido {
  border-style: outset; 
  border-width: medium; 
  border-color: #0022fff2;
}


/***** SAVE BUTTON ****/
.myButton {
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #ffffff 5%, #eeeeee 100%);
	background-color:#ffffff;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:18px;
	font-weight:bold;
  /*width: 100%;*/
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color:#f6f6f6;
}
.myButton:active {
	position:relative;
	top:1px;
}



@keyframes resaltado {
  0% {
    box-shadow: 0 60px 5px -42px rgba(0, 0, 0, 0.6);
    transform: translatey(0px);  
    background-color: #ffffff7a;
    box-shadow: 0 0 5px #ff0101;
    
  }
  50% {
    box-shadow: 0 75px 5px -40px rgba(0, 0, 0, 0.2);
    transform: translatey(-10px);  
    background-color: #ffffff00;
    box-shadow: 0 0 20px #c71b1b;
  }
  100% {
    box-shadow: 0 60px 5px -42px rgba(0, 0, 0, 0.6);
    transform: translatey(0px);  
    background-color: #ffffff7a;
    box-shadow: 0 0 5px #8f050c;
  }
}

/*
.swal2-modal {
 /* min-height: 80%; /
}

.swal2-popup {
  /* height: 32em !important;/
}
*/

.swal2-title {
  font-size: 0.975em;
}

.swal-log-container {
  min-height: 4em !important;
  /*overflow-y: scroll !important;*/
  display: block !important;
  text-align: initial !important;
  font-size: small !important;
}

.swal2-container{
  z-index: 2060 !important;
}



#custom-target {
  width: 600px;
  height: 150px;
}

.body.swal2-toast-shown .swal2-container {
  width: 50% !important;
  background-repeat: round !important;
  background-size: cover !important;
  text-align: center !important;
}

.body.swal2-toast-shown .swal2-container {
  box-sizing: border-box;
  width: 50% !important;
  text-align: center !important;
  max-width: 100%;
  background-color: transparent;
  width: 50% !important;
  background-repeat: round !important;
  background-size: cover !important;
  text-align: center !important;
  pointer-events: none;
}
.swal2-popup.swal2-toast .swal2-html-container {
  margin: 0.5em 1em;
  padding: 0;
  font-size: 1em;
  text-align: center !important;
}

.swal2-popup.swal2-toast { 
  background-repeat: round !important;
  text-align: center !important;
}

.barra-toast {
  background-color: #ff7f50 !important;
}


.fix_height {
  height: 1px;
}

@-moz-document url-prefix() {
   .fix_height {
        height: 100%;
    }
}


/*


.buttonWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

button {
  letter-spacing: 3px;
  border: none;
  padding: 10px;
  background-color: #bccbe9;
  color: #232c3d;
  font-size: 18px;
  cursor: pointer;
  transition: 0.5s;
}

button:hover {
  background-color: #d5e3ff;
}

button.active {
  background-color: white;
}




.content {
  display: none;
  padding: 10px 20px;
  max-height: 250px;
  overflow-x: auto;
  text-align: left !important;
}

.content.active {
  display: block;
}

*/


.marquee {
  height: 25px;
  width: 100%;

  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 30px;
  position: absolute;
  overflow: hidden;
  animation: marquee 45s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -200%; }
}




.luz {
	opacity: 1;
	animation: flickerI 4s linear ;
  animation-iteration-count: infinite;

}
.luz::after {
	content: '';
	width: 150%;
	-webkit-box-shadow: -35px 0px 60px 8px rgba(255,255,255,1);
	-moz-box-shadow: -35px 0px 60px 8px rgba(255,255,255,1);
	box-shadow: -35px 0px 60px 8px rgba(255,255,255,1);
}

@keyframes flickerI {
	0% {
		opacity: 0.4;
	}
	5% {
		opacity: 0.5;
	}
	10% {
		opacity: 0.6;
	}
	15% {
		opacity: 0.85;
	}
	25% {
		opacity: 0.5;
	}
	30% {
		opacity: 1;
	}
	35% {
		opacity: 0.1;
	}
	40% {
		opacity: 0.25;
	}
	45% {
		opacity: 0.5;
	}
	60% {
		opacity: 1;
	}
	70% {
		opacity: 0.85;
	}
	80% {
		opacity: 0.4;
	}
	90% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

/*
.escenaDia {

}

.escenaNoche {

}

.escenaLinterna {
}


.escenaOscuridad {
  
}
*/


/******************************************/  
/* bd-placeholder-img
/******************************************/ 
/*
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}
*/


        /* Default styles for all screen sizes */
        .inventory-grid {
          text-align: center;
          width: 100%;
          display: grid;
          grid-template-columns: repeat(3, 33%);
          grid-template-rows: repeat(3, 33%);
          padding-right: 20px;
          padding-top: 10px;
          overflow-y: visible;
        }
        
        /* Styles for small screens */
        @media (max-width: 600px) {
          .inventory-grid {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, 1fr);
          }
        }
        
        
        
        .inventory-cell {
          /*width: 30% !important;*/
          height: 120px !important;
          position: relative;
          text-align: center;
        }
        
        .inventory-img {
          width: 100% !important;
          height: 80px;
        }
        

        .inventory-img:hover {
          filter: drop-shadow(0 0 8px rgb(139, 255, 0))
        }

        
        .item-count {
          position: absolute;
          bottom: 70%;
          right: 36%;
          background-color: rgb(255, 0, 0);
          color: #ddd;
          padding: 2px 4px;
          border-radius: 50%;
          text-align: match-parent;
          font-size: small;
          min-width: 22px;
          opacity: 0.8;
        }
        
        .item-worn {
          position: absolute;
          top: 33%;
          left: 56%;
          padding: 2px 4px;
          border-radius: 50%;
          width: 14px;
          text-align: match-parent;
          opacity: 0.6;
        }


.objeto-listado {
    margin-top: 2.5px;
    height: 50px;
    width: 50px;
    padding: 5px;
    display: inline-block;
    cursor: pointer;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .3);
    position: relative;
}

/*
.objeto-icono {

}
*/


#quake {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.8);
  transition: height 0.5s ease;  
  z-index: 2000;
}
.nav-tabs--vertical {
  border-bottom: none;
  border-right: 1px solid #ddd;
  display: flex;
  flex-flow: column nowrap;
}
.nav-tabs--left {
  margin: 0 15px;
}
.nav-tabs--left .nav-item + .nav-item {
  margin-top: 0.25rem;
}
.nav-tabs--left .nav-link {
  transition: border-color 0.125s ease-in;
  white-space: nowrap;
}
.nav-tabs--left .nav-link:hover {
  background-color: #f7f7f7;
  border-color: transparent;
}
.nav-tabs--left .nav-link.active {
  border-bottom-color: #ddd;
  border-right-color: #fff;
  border-bottom-left-radius: 0.25rem;
  border-top-right-radius: 0;
  margin-right: -1px;
}
.nav-tabs--left .nav-link.active:hover {
  background-color: #fff;
  border-color: #0275d8 #fff #0275d8 #0275d8;
}

#v-pills-tabContent {
  height: calc(63vh - 50px);
  overflow-y: auto;
  padding-top: 0.5rem;
  
}

#v-pills-profile {
  height: calc(63vh - 50px);
  overflow-y: auto;
  padding-top: 0.5rem;
  
}
#v-pills-messages {
  height: calc(63vh - 50px);
  overflow-y: auto;
  padding-top: 0.5rem;
  
}
#v-pills-settings {
  height: calc(63vh - 50px);
  overflow-y: auto;
  padding-top: 0.5rem;
  
}

.tab-content > .active {
  display: contents;
}


.texto-alerta {
  color: rgb(255, 255, 255);	
  text-shadow: 2px 2px 4px #0000007b; 
  text-shadow: 2px 2px 4px #0000007a;
  font-size: min(max(1rem, 4vw), 20px) !important;
  font: status-bar;
  background-image: linear-gradient(#00000040, #0000002b);
  filter: drop-shadow(0px 6px 6px black);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  border-color: white;
  border: 1px;
  border-radius: 20px;
  padding-left: 42px;
  padding-right: 40px;
  padding-top: 10px;
  margin-bottom: 30px;
  min-height: 30% !important;
  font-size: min(max(1rem, 4vw), 22px) !important;

}



.swal2-modal .my-swal-modal {
  background-size: auto !important;
}


.texto-alerta-container {
  position: relative;
}


.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {  
  50% { opacity: 0; }
}


/* Clases personalizadas para la alerta */
.swal2-premio-popup {
  background-size: auto !important;
  background-repeat: round !important;
  background-position: center center !important;
  color: #fff;
  text-shadow: 11px 8px 7px #000;
  
}

.swal2-premio-alert {
  background-color: #f2f2f2;
  border: 2px solid #aaa;
  border-radius: 10px;
}

.swal2-premio-title {
  color: #fff !important;
  text-shadow: 11px 8px 7px #000 !important;
  font-size: 1.7rem !important;
  animation: blinker 1s linear infinite;
  height: 100% !important;
}

.swal2-premio-text {
  color: #555;
  font-size: 1.2rem;
}

.swal2-premio-icon {
  width: 60px;
  height: 60px;
  margin-right: 20px;
}



/******************************************/  
/* MENU CONTEXTUAL
/******************************************/ 




.inventory-img {
  height: 80px;
}
.inventory-icon {
  height: 25px;
}

.inventory-cell {
 display: inherit;
}

.inventory-cell.highlighted {
  
  display: flex;
}

#context {
  position: fixed;
  z-index: 100;
  width: 180px;
  background: #222222e8;
  display: none;
  text-align: left;
  border-radius: 8px;
  overflow: auto;
}

#context.active {
  display: block;
}

.item {
  padding: 8px 14px;
  color: #eee;
  cursor: context-menu;
  background-color: rgba(255, 255, 255, 0);
  font-size: 0.8em;
}

.item {
  display: flex;
  align-items: center;
}

.item .inventory-img {
  margin-right: 5px;
}

.item .item-text {
  line-height: 1;
}

.item:hover {
  background: #F00;
  transition: 0.2s ease;
  display: flex;
  align-items: center;
}

.fa {
  display: inline-block;
  margin-right: 10px;
}

#context hr {
  border-color: #555;
  margin: 2px 0px;
}


.player-container {
position: relative;
width: 150PX;
height: 80px;
overflow: hidden; /* Para recortar cualquier contenido que sobresalga */
}

.player-foreground-image {
position: absolute;
width: 80px;
height: 80px;
bottom: 0; /* Alinear la imagen en la parte inferior */
clip-path: inset(0px 0 0 0); /* Recorta la parte superior de la imagen */
}

.player-background-image {
position: absolute;
width: 80px;
height: 80px;
top: 0; /* Alinear la imagen en la parte superior */
}

.submenu {
  position: absolute;
  left: -150px; /* Ajusta la posición izquierda según tus necesidades */
  top: 0;
  background-color: #f1f1f1;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.submenu-item {
  padding: 4px 8px;
  cursor: pointer;
}


/*LIBRO DIARIO*/
.wrapper { margin: 150px auto; }
.flip-book {
 /*box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);*/
 display: none;
 background-size: cover;
 margin-top: 50px;
 overflow: hidden;
}
.page {
 padding: 20px;
 background-color: #fdfaf7;
 color: #543912;
  overflow-x: hidden;
 background-image: url(../dat/img/pagina.png);
 background-repeat: round;
 font-size: 16px;
 font-style: italic;
}
.page .page-content {
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: stretch;
 padding: 20px;
}
.page .page-content .page-header {
 height: 30px;
 font-size: 100%;
 /*text-transform: uppercase;*/
 text-align: center;
}
.page .page-content .page-image {
 height: 250px;
 background-size: contain;
 background-position: center center;
 background-repeat: no-repeat;
 position: relative;
 top: -75px;
}
.page .page-content .page-text {
 height: 100%;
 flex-grow: 1;
 font-size: 80%;
 text-align: left;
 margin-top: 10px;
 padding-top: 10px;
 box-sizing: border-box;
 overflow-y: auto;
}

.page .page-content .page-footer {
 height: 30px;
  font-size: 80%;
 color: #998466;
}
.page.--left {
 border-right: 0;
 box-shadow: inset -7px 0 30px -7px rgba(0, 0, 0, 0.4);
}
.page.--right {
 border-left: 0;
 box-shadow: inset 7px 0 30px -7px rgba(0, 0, 0, 0.4);
}
.page.--right .page-footer {
 text-align: right;
}
.page.hard {
 background-color: #f2e8d9;
 border: solid 1px #998466;
}
.page.page-cover {
 background-color: #e3d0b5;
 color: #785e3a;
 border: solid 1px #998466;
}
.page.page-cover h2 {
 text-align: center;
/* padding-top: 50%;*/
 font-size: 210%;
}

.page.page-cover.page-cover-top {
	box-shadow: inset 0px 0 30px 0px rgba(36, 10, 3, 0.5), -2px 0 5px 2px rgba(0, 0, 0, 0.4);
	background-image: url(../dat/img/diario_cover.png?hoo);
	background-repeat: round;
}

.page.page-cover.page-cover-bottom {
	box-shadow: inset 0px 0 30px 0px rgba(36, 10, 3, 0.5), 10px 0 8px 0px rgba(0, 0, 0, 0.4);
}






.msg_time {
	position: absolute;
	left: 0;
	bottom: -15px;
	color: rgba(255, 255, 255, 0.142);
	font-size: 10px;
}

.msg_time_send {
	position: absolute;
	right: 0;
	bottom: -15px;
	color: rgb(29 28 28);
	font-size: 10px;
}

.msg_head {
	position: relative;
}

.user_img {
	height: 70px;
	width: 70px;
	border: 1.5px solid #f5f6fa;
}

.user_img_msg {
	height: 40px;
	width: 40px;
	border: 1.5px solid #f5f6fa;
}

.msg_cotainer {
	margin-top: auto;
	margin-bottom: auto;
	margin-left: 10px;
	position: relative;
	font-size: 18px;
	/*color: #ff4400;
	text-shadow: 1px 1px 1px #000;*/
  color: black;
  font: message-box;
  font-family: 'Lemon Tuesday', sans-serif;
}

.msg_cotainer_send {
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 10px;
	position: relative;
	/*color: #065fff;
	text-shadow: 1px 1px 1px #000;*/
  color: black;
	text-transform: uppercase;
	font-size: 18px;
  font: message-box;
  font-family: 'Lemon Tuesday', sans-serif;
}