* {
	font-family:'Open Sans', Arial, sans-serif;
    font-weight:400;
  	color: rgb(51,51,51);
	/*letter-spacing:-0.0300em;*/
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	-o-box-sizing:border-box;
	-khtml-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing: border-box;         /* Opera/IE 8+ */
	/* Prevent any object from being highlighted upon touch event */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	/* disable save image on long press */
	-webkit-touch-callout:none;
	/* disable draggin images */
	-webkit-user-drag:none;
	touch-action: manipulation;/*para evitar zoom en iphone*/
	/* esto da problemas en IOS */
	/*-webkit-user-select: none;  
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;*/
	scroll-behavior: smooth;/* para los anchor que bajan scroll*/
    text-wrap: balance;/*prueba https://developer.chrome.com/blog/css-text-wrap-balance/ */
}

@media print 
{
    @page {
      /*size: A4;*/ /* DIN A4 standard, Europe */
      margin-top:5mm;
      margin-bottom:5mm;
    }
	
}

body {
    width: 100%;
    
    display: flex;
	  justify-content: center; /* Centra horizontalmente */
	  align-items: center; /* Centra verticalmente */
	/*  min-height: 100vh;  Asegura que el contenedor flex (body) tenga al menos el alto de la ventana */
    margin: 0px !important;
    overscroll-behavior: contain;
}

b {
	font-weight: 600;
}

 a, a:hover, a:focus, a:active {
     text-decoration: none;
 }

h1 {
	width:100%;
	font-style: normal;
	font-weight: 600;
	font-size: var(--superGrande);
	line-height: 44px;
	text-align:left;
    margin: 0px;
}

h2 {
	width:100%;
	font-style: normal;
	font-weight: 400;
	font-size: var(--mediana);
	line-height: 28px;
	text-align:left;
    margin-top: 10px;
    margin-bottom: 10px;
}

h3 {
	width:100%;
	font-style: normal;
	font-weight: 400;
	font-size: var(--normal);
	line-height: 20px;
	text-align:left;
    margin-top: 20px;
    margin-bottom: 20px;
}

div {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

button:focus {outline:0;}

*:focus {
    outline: 0;
}

:root {
	--superGrande: 28px;
    --grande: 20px;
    --mediana: 16px;
    --normal: 14px;
    --small: 12px;
    --superSmall: 9px;
}



/* -------------- MAINPANEL ------------------- */

.basePanel {
	/*max-width:980px;*/
	width:100%;
	height:auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;

}

.principalPanel {				
	height:auto;
	max-width:980px;
	width:100%;
	background-color:white;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
/* -------------- END MAINPANEL ------------------- */


/* -------------- LOGINPANEL -------------- */

.loginLabel {
	max-width:980px;
	width:50%;
	height:42px;
	line-height:42px;
	font-weight:600;
	overflow:hidden;
}

.loginComponent {
	max-width:980px;
	width:50%;
	height:42px;
	line-height:42px;
	padding-left:10px;
	padding-right:10px;
	border: 1px solid #C4C4C4;
	border-radius:3px;
	text-align:left;
	user-select: auto;
	font-style: normal;
	background-color: white;
}


.loginComponent::placeholder {
    color: rgb(144,144,144); /* Cambia el color del placeholder */
}

.chekinComboBox {
	max-width:980px;
	width:50%;
	height:42px;
	line-height:42px;
	padding-left:10px;
	padding-right:10px;
	border: 1px solid #C4C4C4;
    border-radius: 3px;
	text-align:left;
	font-style: normal;
	background-color: white;
}	

.chekinComboBox:focus {
	border-color:#337CFB;
}


.chekinCheckBox{
	max-width:980px;
	width:50%;
	height:42px;
	line-height:42px;
	margin-top:10px;
	/*padding-left:4px;
	padding-right:4px;*/
}

.chekinButton {
  all: unset;
  /* Restablece propiedades adicionales según sea necesario */
    box-sizing: border-box;/*para que el pading y borde este incluidos en el height*/
    border-radius: 6px;
	border-color:rgb(218, 220, 224);
	border-style:solid;
	border-width:2px;
	height:50px;
	line-height:46px;
	width:50%;
	max-width:980px;
	cursor:pointer;
	overflow:hidden;
	text-align:center;
	margin-top:20px;
	font-weight:600;
	font-size: var(--normal);
}


.chekinButton:focus {
	border-color:#337CFB;
}
/* -------------- END LOGINPANEL -------------- */



/*--------------- WAIT DIALOG ------------ */
.waitDialog {
	width:100%;
	height:100%;
	/* background-image:url('../images/imgBgroundMask.png'); lo quito pq hay problemas de tama�os y posicionamiento */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.waitDialogImage {
	width:15%;
	max-width:64px;
	height:auto;	
}
/*--------------- END WAIT DIALOG ------------ */

/* --------------- COMPONENTS --------------------*/

.datePikerPanelWidget {
	height:64px;
	line-height:64px;
	font-size: var(--normal);
}

.datePikerPanelScrollPanel {
	height:288px;
}

.datePikerCell {
	width:96px;
	height:96px;
	line-height:96px;
}

.responsiveAlertDialog {
	max-width:500px;
	width:100%;
	background-color:transparent;
}
/* --------------- END COMPONENTS ----------------*/


.titleTopPanel {
	/*max-width:980px;*/ /* problemas en tablet tumbada */
	width:100%;
	background-color:#59626c;
}

.circulo {
  height: 42px;
  width: 42px;
  border-radius: 50%;
  display: inline-block;
}
 


.amazonCell{
	max-width:980px;
	width:calc(100% - 0px);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;;
    align-content: center;
    align-items: center;
	/*border: 1px solid rgb(210,210,210);*/
	height:30px;
}

.suggestions {
    max-width: 980px;
    width: 50%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background: white;
    display: none;
}

.suggestions div {
    padding: 10px;
    cursor: pointer;
}

.suggestions div:hover {
    background-color: #f0f0f0;
}



/* -------------- ERROR404 ------------------- */


.error404Panel {
	margin:25px;
	margin-bottom:100px;
	max-width:980px;
	width:calc(90% - 50px);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding: 20px;
	background-color:white;
}

.error404PanelTitle {
	margin-top:20px;
	font-style: normal;
	font-weight: 600;
	font-size: var(--superGrande);
	text-align: center;
	color: #212121;
	width: 100%;
}

.error404PanelSubtitle {
	margin-top:20px;
	font-style: normal;
	font-weight: 600;
	font-size: var(--grande);
	text-align: center;
	width: 100%;
}

.error404PanelImage{
	margin-top:20px;
	width: 50%;
	height: auto;	
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}


/* -------------- ERROR404 ------------------- */





.ventasIvasPanel {			
	height:auto;
	max-width:980px;
	width:100%;
	background-color:white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: center;
}

.autoRegistroPanelContainer {
	margin:auto;/*para centrarse*/
	max-width:980px;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
	height:auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;

}

.frontDniImage {
	width:auto;
	max-width:400px;
	height:auto;	
	max-height:120px;
	margin-left:5%;
	margin-right:5%;
	margin-top:20px;
	margin-bottom:20px;
	-webkit-align-self:center;
	-ms-flex-item-align:center;
	align-self:center;
}

.frontDniHelp {
	width:max-content;
	max-width:400px;
	height:32px;	
	lineHeight:32px;
	margin-left:5%;
	margin-right:5%;
	font-size:9pt;
	-webkit-align-self:center;
	-ms-flex-item-align:center;
	align-self:center;
}


/* -------------- TABLA ------------------- */
.tpvTabla {
	width:70%;
	max-width:980px;
	height:auto;
	border-collapse:collapse;
	border-spacing:0px;	
	border-style:solid;
	border-width:1px;
	border-color:#59626c;
	border-bottom-width:0px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.cabeceraTabla {
	width:100%;
	max-width:980px;
	height:auto;
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-bottom-color:#59626c;
	background-color:#4095BC;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.cabeceraTablaCell {
	width:100%;
	max-width:980px;
	height:50px;	
	line-height:50px;
	font-size:12pt;
	text-align:left;
	color:white;
	padding-left:5px;
	overflow:hidden;
    letter-spacing: 1px;
}

.tableRowPar {	
	width:100%;
	max-width:980px;
	height:auto;
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-bottom-color:#59626c;
	background-color:white;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.tableRowImpar {	
	width:100%;
	max-width:980px;
	height:auto;
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-bottom-color:#59626c;
	background-color:#f6f1c8;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.tableRowCell {
	width:100%;
	max-width:980px;
	height:40px;	
	line-height:40px;
	font-size:12pt;
	text-align:left;
	padding-left:5px;
	overflow:hidden;
}

.tableRowImageCell {
	width:auto;
	max-width:40px;
	height:40px;	
	line-height:40px;
	text-align:left;
}
/* -------------- END TABLA ------------------- */



.tablaReservasPanel {
	margin:20px;
	max-width:480px;
	width:90%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}