h1 { 
	float: left;
	color: black; 
	font-size: 2vw; 
	transition: 0.5s; 
	font-family: Arial, Helvetica, sans-serif; 
	margin-left: 1%;
	margin-top: 1%;
} 
.button {
	padding: 0.3vw 3vw;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 0.4vw 0.2vw;
	transition-duration: 0.4s;
	cursor: pointer;
	border-radius: 0.5vw;
}
.button:active {
	background-color: #accf7d;
	box-shadow: 0 0.5vw #666;
	transform: translateY(4px);
}
.button2 {
	font-size: 1.5vw !important;
	background-color: #00994e;
	color: white ;
	border: 2px solid #accf7d;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
	font-size: 1.5vw;
	background-color: white; 
	color: black; 
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.button2:disabled {
	font-size: 1.5vw;
	background-color: #a4aba7;
	color: white;
	border: 2px solid #accf7d;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
} 
.button2c {
	font-size: 1.5vw !important;
	background-color: #3793e9;
	color: white ;
	border: 2px solid #accf7d;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2c:hover {
	font-size: 1.5vw;
	background-color: #95c7f7; 
	color: black; 
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.button2c:disabled {
	font-size: 1.5vw;
	background-color: #a4aba7;
	color: white;
	border: 2px solid #accf7d;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
} 
.button_ticket {
	width: 90%;
	padding: 0.3vw 3vw;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 0.4vw 0.2vw;
	transition-duration: 0.4s;
	cursor: pointer;
	border-radius: 0.5vw;
}
.button_cancel {
	width: 90%;
	padding: 0.3vw 3vw;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 0.4vw 0.2vw;
	transition-duration: 0.4s;
	cursor: pointer;
	border-radius: 0.5vw;
}
.button_ticket_redemp {
	width: 98%;
	padding: 0.3vw 3vw;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 0.4vw 0.2vw;
	transition-duration: 0.4s;
	cursor: pointer;
	border-radius: 0.5vw;
}
#login_page {
	background-color: #f2f2f2;
	width: 100%;
	height: 100%;
}
#header {
	width: 100%;
	height:10%;
	background-color: #f2f2f2;
}
#content {
	width: 100%;
	height: 80%;
	z-index:-1;
	// padding-top: 4vw;
	
	display: flex;
    justify-content: center;
    align-items: center;	
}
#login_box {
	margin: 0 auto;
	width: 30%;
	height:50%;
	text-align: center;
	background-color: #ffffff;
	border-radius: 1vw;
}
#login_box_header {
	border: solid 0px black;
	margin: 0 auto;
	width: 100%;
	height:25%;
	text-align: center;
	border-radius: inherit;
	font-size: 2vw;
}
#login_box_header_p {
	padding-top: 0.8vw;
	margin:0 ;
}
#login_box_center {
	border: solid 0px black;
	margin: 0 auto;
	width: 100%;
	height:50%;
	text-align: center;
	background-image: url(../images/vasrahelykartya.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
#login_box_footer {
	border: solid 0px black;
	margin: 0 auto;
	width: 100%;
	height:25%;
	text-align: center;
	border-radius: inherit;
	font-size: 2vw;
}
#login_box_footer_p {
	padding-top: 0.8vw;
	margin:0 ;
	color: crimson;
	display:none;
}
#nfckeys {
	font-size: 0.1vw;
    text-align: center;
    background-color: #f2f2f2;
    color: #f2f2f2f2;
	cursor:default;
	border:0px;
	box-shadow:0px 0px 0px;
	outline: none;
}
#buying_page {
	background-color: #f2f2f2;
	width: 100%;
	height: 100%;
}
#box {
	float: left ;
	margin: 0 auto;
	width: 30%;
	height:100%;
	text-align: center;
	background-color: #ffffff;
	border-radius: 1vw;
}
#box-2 {
	float: left ;
	margin: 0 auto;
	width: 60%;
	height:100%;
	text-align: center;
	background-color: #ffffff;
	border-radius: 1vw;
}
#box-3 {
	float: left ;
	margin: 0 auto;
	width: 60%;
	height:100%;
	text-align: center;
	background-color: #ffffff;
	border-radius: 1vw;
}
#customer_header {
	border: solid 0px black;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	border-radius: inherit;
	font-size: 2vw;
}
#customer_card {
	border: solid 0px black;
	margin: 0 auto;
	width: 100%;
	height:20%;
	text-align: center;
	font-size: 2vw;
	background-image: url(../images/vasrahelykartya.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	
}
#customer_header_p {
	padding-top: 0.8vw;
	margin:0 ;
}
#customer_header_p2 {
	padding-top: 0.8vw;
	margin:0 ;
}
#customer_center {
	border: solid 0px black;
	margin: 0 auto;
	width: 100%;
	height:59%;
	text-align: center;
	font-size: 2vw;
}
#customer_center2 {
	margin: 1vw;
}
#customer_center_p {
	display: contents;
	padding-top: 0.8vw;
	margin:0 ;
}
#customer_center_p2 {
	display: contents;
	padding-top: 0.8vw;
	margin:0 ;
	color: crimson;	
}
#customer_center_p3 {
	display: contents;
	padding-top: 0.8vw;
	margin:0 ;
	color: crimson;	
}
#customer_footer {
	border: solid 0px black;
	margin: 0 auto;
	width: 100%;
	height:10%;
	text-align: center;
	border-radius: inherit;
}
#ticket_header {
	border: solid 0px black;
	margin: 0 auto;
	width: 100%;
	height:10%;
	text-align: center;
	border-radius: inherit;
	font-size: 2vw;
}
#ticket_header_p {
	padding-top: 0.8vw;
	margin:0 ;
}
#box-3-ticket_header_p {
	padding-top: 0.8vw;
	margin:0 ;
}
#ticket_center {
    display: grid;
	grid-template-columns: repeat(auto-fit, minmax( 500px, 1fr));
    grid-template-rows: repeat(10,minmax(min-content, max-content));
    justify-items: center;
	height: 80% ;
    // grid-gap: 5px;
}
#ticket_center2 {
    display: grid;
	// grid-template-columns: repeat(auto-fit, minmax( 500px, 1fr));
    grid-template-rows: repeat(10,minmax(min-content, max-content));
    justify-items: center;
	height: 80% ;
    // grid-gap: 5px;
}
#ticket_footer {
	border: solid 0px black;
	margin: 0 auto;
	width: 100%;
	height:5%;
	text-align: center;
	border-radius: inherit;
}
#buying_header {
	border: solid 0px black;
	margin: 0 auto;
	width: 100%;
	height:25%;
	text-align: center;
	border-radius: inherit;
	font-size: 2vw;
}
#buying_header_p {
	padding-top: 0.8vw;
	margin:0 ;
}
#buying_center {
	border: solid 0px black;
	margin: 0 auto;
	width: 100%;
	height:65%;
	text-align: center;
}
#buying_footer {
	border: solid 0px black;
	margin: 0 auto;
	width: 100%;
	height:10%;
	text-align: center;
	border-radius: inherit;
}
#nfckeys_cust {
	font-size: 0.1vw;
    text-align: center;
    background-color: #ffffff;
    color: #ffffff;
	cursor:default;
	border:0px;
	box-shadow:0px 0px 0px;
	outline: none;
}
.no-close .ui-dialog-titlebar-close {
  display: none;
}
.inputnone{
	display:none;
}
.inputmini{
	font-size: 0.1vw;
    text-align: center;
    background-color: #ffffff;
    color: #ffffff;
	cursor:default;
	border:0px;
	box-shadow:0px 0px 0px;
	outline: none;
}
.no-close .ui-dialog-titlebar-close {
  display: none;
}
.item1 { grid-area: npinput; }
.item2 { grid-area: np7; }
.item3 { grid-area: np8; }
.item4 { grid-area: np9; }
.item5 { grid-area: np4; }
.item6 { grid-area: np5; }
.item7 { grid-area: np6; }
.item8 { grid-area: np3; }
.item9 { grid-area: np2; }
.item10 { grid-area: np1; }
.item11 { grid-area: npC; }
.item12 { grid-area: np0; }
.item13 { grid-area: npE; }
.item14 { grid-area: npD; }
.item15 { grid-area: npNFC; }
.item16 { grid-area: npTICKET; }

.div-container {
	display: block;
    float: unset;
    height: 80%;
    border: solid 1px black;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 1vh;
    margin: auto;
    width: 60%;
    border: 3px solid black;
}
.grid-container {
  display: grid;
  grid-template-rows: 55px 1fr; /* changed */
  // grid-template-columns: 200px auto; 
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));  
  grid-template-rows: repeat(auto-fit, minmax(50px, 1fr)); 
  grid-template-areas:
    'npinput npinput npinput'
    'np7 np8 np9'
    'np4 np5 np6'
    'np3 np2 np1'
    'npC np0 npE'
	'npNFC npD npTICKET';
  grid-gap: 10px;
  // background-color: #2196F3;
  // padding: 1.8vh;
  // min-height: 95vh;
  // max-height: 95vh;
  overflow: hidden; 
  width: 100%;
  height: 100%;  
}

.grid-container > div {
  // background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  // padding: 20px 0;
  // font-size: 3vh;
}

.npi {
	width: 100% ;
	// width: -webkit-fill-available;
	// min-width: 100%;
    // max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    text-align: center;	
	// font-size: 80pt ;
	// font-size: 6vw;
	font-size: xx-large ;
	// font-size: -webkit-xxx-large;
	border-radius: 1vh ;
}
.npb {
	width: 100% ;
	// width: -webkit-fill-available;
	// height: -webkit-fill-available;
	// min-width: 100%;
    // max-width: 100%;
	min-height: 100%;
	max-height: 100%;
	// overflow: hidden;
	// font-size: 80pt ;
	// font-size: 6vw;
	font-size: xx-large ;
	// font-size: -webkit-xxx-large;
	background-color: #969593;
	color: white;
	border-color: #ccc;
	border-radius: 1vh ;
}
.npb-focus {
	background-color: #8e8e8e;
}
.npb-focus:hover {
	background-color: #ffffff !important;
	color: #333 !important;
	border-color: #adadad;
}
.npb-focus:active {
	background: yellow !important;
	color: blue !important;
}
.npbg {
	width: 100% ;
	// width: -webkit-fill-available;
	// height: -webkit-fill-available;
	// min-width: 100%;
    // max-width: 100%;
	min-height: 100%;
	max-height: 100%;
	// overflow: hidden;
	// font-size: 80pt ;
	// font-size: 6vw;
	font-size: xx-large ;
	// font-size: -webkit-xxx-large;
	background-color: darkgreen;
	color: white;
	border-color: #ccc;
	border-radius: 1vh ;
}
.npbg-focus {
	background-color: darkgreen;
}
.npbg-focus:hover {
	background-color: white !important;
	color: darkgreen !important;
	border-color: #adadad;
}
.npbg-focus:active {
	background: yellow !important;
	color: blue !important;
}
.npbr {
	width: 100% ;
	// width: -webkit-fill-available;
	// height: -webkit-fill-available;
	// min-width: 100%;
    // max-width: 100%;
	min-height: 100%;
	max-height: 100%;
	// overflow: hidden;
	// font-size: 80pt ;
	// font-size: 6vw;
	font-size: xx-large ;
	// font-size: -webkit-xxx-large;
	background-color: darkred;
	color: white;
	border-color: #ccc;
	border-radius: 1vh ;
}
.npbr-focus {
	background-color: darkred;
}
.npbr-focus:hover {
	background-color: white !important;
	color: darkred !important;
	border-color: #adadad;	
}
.npbr-focus:active {
	background: yellow !important;
	color: blue !important;
}
.npbr-disabled {
	opacity: 0.6;
}