* {
	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 {
	display: block;
    margin: 0px !important;
    width: 100%;
    min-height: 100%;
    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:center;
    margin: 0px;
    line-height: 34px;
}

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

h3 {
	width:100%;
	font-style: normal;
	font-weight: 400;
	font-size: var(--normal);
	line-height: 22px;
	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:480px;
	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:480px;
	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:480px;
	width:100%;
	height:42px;
	line-height:42px;
	font-weight:600;
	overflow:hidden;
}

.loginComponent{
	max-width:480px;
	width:100%;
	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:480px;
	width: 100%;
	height:42px;
	line-height:42px;
	padding-left:10px;
	padding-right:10px;
    border-radius: 3px;
	border: 1px solid #C4C4C4;
    border-radius: 3px;
	font-style: normal;
	font-weight: 400;
	background-color: white;
	text-align:left;
}	

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

.chekinCheckBox{
	max-width:480px;
	width:100%;
	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;
	max-width:480px;
	width:100%;
	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:20%;
	max-width:64px;
	height:auto;	
}
/*--------------- END WAIT DIALOG ------------ */

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

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

.datePikerPanelScrollPanel {
	height:192px;
}

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

.responsiveAlertDialog {
	width:90%;
	background-color:transparent;
}




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

.titleTopPanel {
	max-width:480px;
	width:100%;
	background-color:#59626c;
}

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


	
	.loginContainer{
	max-width:480px;
	width:calc(100% - 0px);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    padding-top:25px;
    padding-bottom:25px;
    background: rgba(238, 238, 238, 0.7);
    margin-bottom:40px;
}


.amazonCell{
	max-width:480px;
	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: 480px;
    width: 80%;
    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:20px;
	margin-bottom:50px;
	max-width:480px;
	width:calc(100% - 40px);
    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:10px;
	font-style: normal;
	font-weight: 600;
	font-size: var(--superGrande);
	text-align: center;
	color: #212121;
	width: 100%;
}

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

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

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



.ventasIvasPanel {			
	height:auto;
	max-width:480px;
	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:480px;
    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:80%;
	height:auto;	
	max-height:120px;
	margin-left:10%;
	margin-right:10%;
	margin-top:20px;
	margin-bottom:20px;
	-webkit-align-self:center;
	-ms-flex-item-align:center;
	align-self:center;
}

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



/* -------------- TABLA -------------- */
.tpvTabla {
	width:90%;
	height:auto;
	max-width:480px;
	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:480px;
	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:480px;
	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:480px;
	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:480px;
	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:480px;
	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;
}