html {
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-size: 100%;
	touch-action: none;
}  
body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	background-color: #292526;
	background-image: url('../assets/images/kiosk/lobby/background_lobby.png');
	background-repeat: no-repeat;
	background-size: cover;
	font-family: Nunito-Bold, Nunito-Regular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 14px;
	touch-action: none;
}

#app{
	width: 100%;
	height: 100%;
	left: auto;
	right: auto;
	user-select: none;
}

#helpButton{
	position: 	absolute;
	top: 		0;
	right: 		0;
}

#helpButton > img{
	width: 80%;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	-khtml-user-drag: none;
	cursor: pointer;
}
 
.promoToolsHelp{
	position: absolute;
    top: 40%;
    left: 0;
    background-color: #000;
    color: #fff;
    border-radius: 10px;
    border-color: #6d0000;
    border-width: thin;
    border-style: solid;
    width: 90%;
    margin-left: 5%;
    box-shadow: 5px 5px 5px black;
	font-size: 1.8vh;
	display: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.promoToolsHelp p{
	padding: 0 6% 6% 6%;
}

.promoToolsHelp p.text{
	padding-top: 15%;
}

.promoToolsHelp .closeButton{
	text-align: right;
    margin-top: 5px;
    margin-right: 5px;
	width: 20%;
	position: absolute;
	right: 0;
}

.promoToolsHelp .closeButton img{
	width: 50%;
	pointer-events: none;
}

.promoToolsHelpPortrait{
	position: absolute;
    top: 20%;
    left: 14%;
    background-color: #000;
    color: #fff;
    border-radius: 10px;
    border-color: #6d0000;
    border-width: thin;
    border-style: solid;
    width: 90%;
    margin-left: 5%;
    box-shadow: 5px 5px 5px black;
	font-size: 1.8vh;
	display: none;
	max-width: 60%;
}

.promoToolsHelpPortrait p{
	padding: 0 3% 3% 3%;
}

.promoToolsHelpPortrait .closeButton{
	text-align: right;
    margin-top: 5px;
    margin-right: 5px;
}

.promoToolsHelpPortrait .closeButton img{
	width: 4%;
}

.gamePanel{
	position: absolute;
	width: 20%;
	left: 0%;
	top: 0;
	background: url("../../../contentAPI/assets/panel-bg.png") repeat-y;
	display: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.gamePanel .marca{
	position: absolute;
    bottom: 0;
    right: 0;
	min-width: 200px;
	width:100%;
	text-align: right;
	background-color: #2e2e2e;
	height: 5%;
}

.gamePanel .marca img{
	margin: 2% 5% 2% 0;
	height:65%;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	-khtml-user-drag: none;
}

.gamePanel label{
	position: absolute;
    bottom: 4%;
    left: 4%;
    color: #fff;
	padding-left: 2em;
	text-transform: uppercase;
	font-size: 2vh;
}

#playId, #cardId{
	display: none;
	margin:0;
}

#promoToolsApp{
	height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  	height: calc(var(--vh, 1vh) * 100);
}

#buyButtonLandscape{
	position: absolute;
	top:77%;
	text-align: center;
	width: 100%;
}

#buyButtonLandscape img {
	cursor: pointer;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	-khtml-user-drag: none;
}

@media screen and (min-width: 1025px) {
	#buyButtonLandscape img {	
		width: 65%;
	}
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
	#buyButtonLandscape img {	
		width: 75%;
	}
}

@media screen and (max-width: 639px) {
	#buyButtonLandscape img {
		width: 85%;		
	}
}

#buyButtonLandscape span {
	cursor: pointer;
	user-select: none;
}

#buyButtonLandscape div{
	position: absolute;
    top: 18%;
    text-align: center;
    width: 100%;
	text-transform: uppercase;
	color: #fff;
	pointer-events: none;
}

#imgDiv{
	width: 52%;
	margin:auto;
}
#imgTxt{
	
	cursor: pointer;
}
/* Customize the label (the container) */
.cb-container {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .cb-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 2.5vh;
	width: 2.5vh;
	border-color: #ccc;
	border-style: solid;
	border-width: thin;
  }
  
  /* On mouse-over, add a grey background color */
  .cb-container:hover input ~ .checkmark {
	/* background-color: #ccc; */
  }
  
  /* When the checkbox is checked, add a blue background */
  .cb-container input:checked ~ .checkmark {
	/* background-color: #2196F3; */
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  /* Show the checkmark when checked */
  .cb-container input:checked ~ .checkmark:after {
	display: block;
  }
  
  /* Style the checkmark/indicator */
  .cb-container .checkmark:after {
	left: 1.5vh;
    top: -1.7vh;
    width: 1.5vh;
    height: 3.5vh;
    border: solid rgb(151, 0, 0);
    border-width: 0 .6vh .6vh 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
  }

.gamePanel .open{
	position: absolute;
	bottom: 8%;
 } 

.gamePanel .open img{
	height: 10vh;
 }  

#openFake{
	position:absolute;
	right: 0;
	top:0;
	display: none;
	visibility: hidden;
}

#openFake img{
	height: 3vh;
}

.portraitFoot{
	background-color: #2e2e2e;
	height: 3%;
	text-align: right;
	display:none;
}

.portraitFoot img{
	height: 80%;
	margin-right: 2%;
}

.v-dialog{
	border-radius: 25px !important;
}
.v-window__next{
	visibility: hidden !important;
}
.v-window__prev{
	visibility: hidden !important;
}
.centeredX{
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}
.centeredY{
	top: 45%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	vertical-align: top;
}
.centeredXY{
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	vertical-align: top;
}
.hideElement{
	visibility: hidden;
}
.showElement{
	visibility: visible;
}
.moveElementCenter{
	transform: translate(0px,0) !important;
}
.moveElementLeft{
	transform: translate(-5%,0) !important;
}
.moveElementBigLeft{
	transform: translate(-10%,0) !important;
}
.moveElementRight{
	transform: translate(7%,0) !important;
}
.moveElementBigRight{
	transform: translate(10%,0) !important;

}
.activeOpacity{
	opacity: 0.3;
}
.inactiveOpacity{
	opacity: 1;
}
.activeShadowOver{
	z-index: 10;
	transition: all .5s ease;
	transform: scale(1.1);
	box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.6);
}
/*** LAYERS ***/
.iframeLayer{
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
}
.contentLayer{
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
}
.layerCenter{
	display: flex;
	align-items: center;
	transition: all 1.5s ease;
}

/*** GIRD CHANGE GAME ***/
.containerHeader{
	width: 100%;
	height: 7vh;
	background-image: url('../assets/images/kiosk/lobby/header_lobby_title.png');
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	align-items: center;
	justify-content: center;
}
.menuButtonContainer {
    display: flex;
    justify-content: center;
	margin-top: 20px; 
    gap: 10px;
    width: 100%;
}

.menuButton {
    padding: 10px 20px;
    flex-shrink: 0;
	border: none;
  	color: white !important;
	background-color: rgba(0, 0, 0, 0.4) !important;
}
.carousel-container{
	width: 80%;
	height: 85%;
	margin: auto;
	background-image: url('../assets/images/kiosk/lobby/background_lobby.png');
	background-repeat: no-repeat;
	background-size: cover;
}
.gridContainer{
	width: 90%;
	height: 80%;
	max-height: 100%;
	left: auto;
	right: auto;
	margin: 0 auto;
}
.gallery{
  display: grid;
  grid-template-columns: repeat(4, 23%);
  grid-template-rows: repeat(2, 47%);
	grid-gap: 15px;
	margin: 2% auto;
	left: auto;
	right: auto;
	justify-content: center !important;
	place-content: center !important;
}
.gallery-3-rows{
	display: grid;
	grid-template-columns: repeat(4, 17%);
	grid-template-rows: repeat(3, auto);
	  grid-gap: 15px;
	  margin: 5%;
	  left: auto;
	  right: auto;
	  justify-content: center !important;
	  place-content: center !important;
  }
.gallery-img {
	width: auto;
	height: 100%;
	object-fit: contain;
	box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.4);
}
.gallery-item-double-start-0 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}
.gallery-item-double-medium-1 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}
.gallery-item-double-end-4 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
}
#create .v-speed-dial {
	position: absolute;
	right: 0px;
	padding-right: 68px;
	z-index: 0;
}  
#create .v-btn--floating {
	position: relative;
}
.imageOver{
	background-image: url('../assets/images/games/overGame.png');
	background-size: 100% 95% !important;
	background-position: top !important;
	background-repeat: no-repeat;
}
.layerNext{
	top: 45%;
	right: 0px;
	margin-right: 1%;
	position: absolute;
	z-index: 10;
}
.btnNext{
	background-image: url('../assets/images/kiosk/lobby/btn_next.png');
	background-size: contain;
	object-fit: contain;
}
.layerPrev{
	top: 45%;
	margin-left: 1%;
	position: absolute;
	z-index: 10;
}
.btnPrev{
	background-image: url('../assets/images/kiosk/lobby/btn_previous.png');
	background-size: contain;
	object-fit: contain;
}
.layerBackGame{
	width: 100%;
	height: 10%;
	bottom: 0px;
	text-align: right;
	position: absolute;
}

.layerBackToSite{
	width: 100%;
	height: 10%;
	bottom: 0px;
	text-align: left;
	position: absolute;
	height: 12% !important;
}
.layerBtnBackGames{
	width: 10%;
	max-width: 15%;
	height: auto;
	text-align: right;
	position: absolute;
}
.btnBackGame{
	background-image: url("../assets/images/kiosk/lobby/btn_back_home.png");
	background-size: 100% 100%;
	margin-right: 1.5%;
	font-size: 1vh !important;
	z-index: 999;
}
.iconBackGame{
	background-image: url("../assets/images/kiosk/lobby/icon_back.png");
	background-size: contain;
	object-fit: contain;
}
.layerLineLobby{
	width: 100%;
	height: 2%;
	bottom: 0px;
	background-image: url("../assets/images/kiosk/lobby/line_bottom_lobby.png");
	background-size: 100% 100%;
	position: absolute;
}
.v-carousel__controls{
	bottom: -5px !important;
}
.frameImageSelected{
	background-position: top center;
	background-size: 79% 77%;
	background-repeat: no-repeat;
}
/*** END GIRD CHANGE GAME ***/

/*** MESAGGE ***/
.borderRadiusMessage{
	border-radius: 20px !important;
}
.baseTitleTerminal{
	background-image: url("../assets/images/message/title_termial_Blocked.png");
	background-size: contain;
	object-fit: contain;
}
.v-progress-linear{
	background: url("../assets/images/message/back_termial_line.png") !important;
	background-size: 100% 100% !important;
	background-repeat: no-repeat;
	transition: .3s cubic-bezier(.4,0,.6,1) !important;
}
.keyboardLayer{
	width:50%;
	left: 55%;
	top: 50%;
	position: absolute;
}
.layerKeys{
	width: 70% !important;
	margin-left: 5% !important;
	margin-top: 9%;

}
.layerBigKeys{
	width: 27%;
	right: 0px;
	bottom: 0px;
	margin-left: 2%;
	margin-bottom: 5%;
	position: absolute;
}
.layerKey{
	padding: 1% 30% 1% 0% !important;
	max-width: 25% !important;
}
.layerCode{
	display: flex;
	margin: 5% 5%;
	justify-content: space-between;
}
.baseBtnTerminal{
	background-size: 100% 100%;
	object-fit: contain;
	background-repeat: no-repeat;
}
.btnVirtualKeyboard{
	background-image: url('../assets/images/message/back_btn_virtual.png');
	background-repeat: no-repeat;
}
.btnCancel{
	background-image: url('../assets/images/message/back_btn_cancel.png');
	background-repeat: no-repeat;
}
.btnBalanceCashout{
	background-image: url('../assets/images/message/fondo_numeros-21.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	height: 4vh !important;
}
.iconCancel{
	background-image: url('../assets/images/message/icon_cancel.png');
	background-repeat: no-repeat;
	background-size: cover;
}
.iconCoin{
	background-image: url('../assets/images/message/icon_coin.png');
	background-repeat: no-repeat;
}
.iconDelete{
	background-image: url('../assets/images/message/keyboard/icon_delete.png');
	background-repeat: no-repeat;
	background-size: contain;
}
.baseCode{
	border-radius: 10px !important;
	opacity: 0.5;
	box-shadow: 0 11px 15px -7px rgba(0,0,0,.2);
}
.baseKeyboard{
	background-image: url('../assets/images/message/keyboard/background_keyboard.png');
	background-size: 100% 100%;
	object-fit: contain;
	overflow: hidden;
	max-width: 224px !important;
	min-width: 224px !important;
}
.btnDelete{
	background: url('../assets/images/message/keyboard/btn_delete.png');
	min-width: 95% !important;
	max-width: 95% !important;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.btnDone{
	background: url('../assets/images/message/keyboard/btn_done.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	min-width: 83% !important;
	max-width: 83% !important;
	margin-top: 3%;
}
.btnCancelKeyboard{
	background: url('../assets/images/message/keyboard/btn_cancel.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	min-width: 83% !important;
	max-width: 83% !important;
	margin-bottom: 3%;
}
.btnAccept{
	background: url('../assets/images/message/btn_accept.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.btnKey{
	min-width: 40px !important;
	padding: 0 40% !important;
	background-image: url('../assets/images/message/keyboard/back_btn_key.png');
}
.overlayContainer {
    gap: 10px;               /* Space between the images, adjust as needed */
    display: inline-flex;    /* Ensures the size adjusts to the content */
    position: fixed;
    flex-direction: column;  /* Aligns images in a column, one below the other */
    align-items: center; 	 /* Aligns images to the left horizontally */
    z-index: 1000;           /* Ensures it appears above other content */
    max-width: min(15vw, 15vh);        /* Adjust to the desired maximum width */
    max-height: min(15vw, 15vh);         /* Adjust to the desired maximum height */
	padding: 20px;
}
.overlayImage {
    max-width: 100%;   /* Hace que el ancho de la imagen no exceda el ancho del contenedor */
    max-height: 100%;  /* Hace que la altura de la imagen no exceda la altura del contenedor */
    height: auto;      /* Mantiene la proporción de la imagen */
    width: auto;       /* Asegura que la imagen mantenga su aspecto */
}

@media screen and (min-width: 1200px) {
	html { font-size: 85%; }
	.v-btn--icon.v-size--small {
		height: 25px;
		width: 25px;
	}
	.v-btn--icon.v-size--small{
		height: 23px;
		width: 23px;
	}
}
@media screen and (min-width: 1024px) and (max-width: 1199px) {
	html { font-size: 80%; }

	.v-btn--icon.v-size--small {
		height: 22px;
		width: 22px;
	}
	.v-btn--icon.v-size--small{
		height: 20px;
		width: 20px;
	}
}
@media screen and (min-width: 800px) and (max-width: 1023px) {
	html { font-size: 70%; }

	.v-btn--icon.v-size--small {
		height: 18px;
		width: 18px;
	}
	.v-btn--icon.v-size--small{
		height: 16px;
		width: 16px;
	}
}
@media screen and (min-width: 640px) and (max-width: 799px) {
	html { font-size: 60%; }

	.v-btn--icon.v-size--small {
		height: 15px;
		width: 15px;
	}
	.v-btn--icon.v-size--small{
		height: 13px;
		width: 13px;
	}
}
@media screen and (min-width: 320px) and (max-width: 639px) {
	html { font-size: 50%; }

	.v-btn--icon.v-size--small {
		height: 12px;
		width: 12px;
	}
	.v-btn--icon.v-size--small{
		height: 10px;
		width: 10px;
	}
}
@media screen and (max-width: 319px) {
	html { font-size: 40%; }

	.v-btn--icon.v-size--small {
		height: 10px;
		width: 10px;
	}
	.v-btn--icon.v-size--small{
		height: 8px;
		width: 8px;
	}
}