/**
 * CSS for SelfService
 * VAS Style
 * 
 * 25.11.2010 JGA
 *
 * FuM Farben:
 * rot: #D4021D
 * dunkelgrau: #5B6166
 */

body {
   padding-left: 0;
   padding-right: 0;
}

.z-label {
   font-size: 24px;
}

.z-window-noborder,
.z-window-content,
.z-north-body, .z-south-body, .z-west-body, .z-center-body, .z-east-body {
   padding: 0px;
}

/********************************** Header **********************************/
.ias-header {
   height: 60px;
   display: flex;
   flex-direction: row;
   
}

.ias-header .z-label {
   font-size: 32px;
   padding-left: 15px;
}

.ias-headline {
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

.ias-boxheader {
	padding: 6px;
}

.ias-applogo {
   display: flex;
   align-items: center;
   justify-content: center;      
   width: 280px;
}

.ias-applogo img {
   max-height: 50px;
   max-width: 270px;
}

/********************************** Sidebar **********************************/
.selfservice-sidebar {
   width: 280px;
   display: flex;
   flex-direction: column;
   align-items: center;
}
.selfservice-sidebar-cnt,
.selfservice-sidebar-bottom,
.selfservice-sidebar-bottom-cnt,
.selfservice-sidebar-bottom-image {
   width: 100%;
}
.selfservice-sidebar-bottom-image {
   height: 60px;
   text-align: center;
}
.selfservice-sidebar .z-button {
   border: none;
   font-size: 24px;
   padding: 0px;
   width: 90%;
   overflow: hidden;
   margin: 15px 10px;
   line-height: 50px;
   min-height: 96px;
}

.selfservice-sidebar-cnt > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*------ Other ------*/
.z-north, .z-south, .z-west, .z-center, .z-east {
   border-width: 0;  
}

.z-loading-indicator {
	font-size: larger;
}
/********************************** Grid **********************************/
.z-grid-body .z-cell,
.z-row-content {
   padding: 6px 16px;
}

/********************************** Labelbox ******************************************/
.labelbox.z-textbox[disabled] {
    font-size: 24px;
    border-radius: 0;
}


/********************************** Listbox **********************************/
.z-listheader-content, .z-listcell-content, .z-listgroup-content, .z-listgroupfoot-content, .z-listfooter-content {
   font-size: 24px;
   padding: 16px;
}

.z-listbox-footer {
   border-top: 0px;
}

/* Notifications */
.notify {
   height: 100px;
   width: 100%;
}
.notify td {
   vertical-align: middle;
}
.notify .z-label {
   color: #FFFFFF;
}
.notify [class^="z-icon-"] {
   font-size: 80px;
   color: #FFFFFF;
   vertical-align: inherit;
   padding: 10px;
}


.selfservice-mainarea {
   display: flex;
   flex-direction: column;
   margin: 10px;
}

.z-textbox, .z-decimalbox, .z-intbox, .z-longbox, .z-doublebox {
   height: 50px;
}
.z-textbox, .z-decimalbox, .z-intbox, .z-longbox, .z-doublebox, .z-window-header {
   font-size: 32px;
   line-height: 32px;
}
.z-messagebox .z-label {
   font-size: 24px;
}



/*
.z-listbox-body {
   border-width: 0px 1px 1px;
   border-style: solid;
}
*/
/*  Paging  */

.z-paging ul {
    display: flex;
    align-items: center;
}
.z-paging, 
.z-listbox-autopaging .z-listcell-content {
   height: 75px;
}
.z-paging .z-paging-icon {
    font-size: 28px;
    line-height: 16px;
}
.z-paging-info {
   padding: 18px 0;
}
.z-paging-input,
.z-paging-info,
.z-paging-text {
   font-size: 24px;  
}

.z-paging-button {
   height: auto;
   padding: 20px;
   display: flex;
}

/* mold = OS */
.z-paging-os .z-paging-button {
   font-size: 23px;
   height: auto;
   padding: 15px 26px;
}

/********************************** keyboard buttons **********************************/
.numpadblock .z-button { 
   border: none;
   width: 120px; 
   height: 100px; 
   font-size: 32px;
   font-weight: bold;
   margin: 4px;
}

.keyboardbutton .z-button,
.numpadflat .z-button { 
   border: none;
   width: 72px; 
   height: 65px; 
   font-size: 26px;
   font-weight: bold;
   margin: 2px;
}

.keyboardbutton .z-button [class^="z-icon-"],
.numpadblock .z-button [class^="z-icon-"],
.numpadflat .z-button [class^="z-icon-"] {
    font-size: 50px;
}

@media screen and (min-width: 1600px) {
	.numpadblock .z-button { 
	   width: 150px; 
      height: 120px; 
      font-size: 46px;
	}
	.keyboardbutton .z-button,
	.numpadflat .z-button { 
	   width: 82px; 
	   height: 75px; 
	   font-size: 36px;
	}
}

/********************************** Language buttons **********************************/
.sblanguageselection {
   display: flex;
   justify-content: center;
}
.sblanguageselection .z-button {
   border: none;
   margin:5px;
   height: 80px;
}

/********************************** Button **********************************/
.z-button {
   border-radius: 6px;
   border: none;
   font-size: 24px;
}

.z-button [class^="z-icon-"] {
    font-size: 3em;
}
.z-button i {
    font-size: 18px;
    vertical-align: middle;
}
.z-button:has(> i) {
   text-align: center;
}

.center-body {
   display: flex;
   justify-content: center;
   align-items: center;
}
.selfservice-mainarea-body {
   display: flex;
   justify-content: center;
   align-items: center;
}
.langButtonSVG {
   width: 350px;
   height: 250px;
}

/********************************** Flex Styles **********************************/
.flex-center {
   display: flex;
   justify-content: center;
   align-items: center;
}

/********************************** Box Styles **********************************/
.boxstyle-1 {
   border-style: solid;
   border-width: 1px;
   border-radius: 6px;
   margin: 10px;
   padding: 30px;
}
.boxstyle-1.center {
   text-align: center;
}

/********************************** QR-Code *********************************/
.qrcode-1 .z-image {
   border-style: solid;
   border-width: 10px;
   border-radius: 30px;
}
.qrcode-2 .z-image {
   border-style: solid;
   border-width: 6px;
   border-radius: 15px;
}


/********************************** Hack for wrong ZK Icons *********************************
.statussuccess .z-icon-check-circle {
   font-family: FontAwesome;
   padding: 10px;
   font-size: 80px;
}
*/
/********************************** Button icons **********************************/

.selfservice-sidebar .z-button .z-icon-file {
	font-size: 2em;
}

/********************************** Panel specific styles **********************************/
/* RootPanel */

.sblanguageselectionbig {
   display: flex;
   place-content: space-around;
   align-items: center;
   justify-content: space-around;
   flex-wrap: wrap;
}

.sblanguageselectionbig img {
   max-width: 100%;
   max-height: 100%;
}

.sblanguageselectionbig .z-button {
   padding: 20px;
   width: 400px;
   height: 260px;
   margin: 6px;
}


/* SecurityInstructionsPanel */

.rule-container {
   height: inherit;
   padding-right: 5px;
   padding-left: 5px;
   padding-bottom: 5px;
   padding-top: 5px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   justify-content: flex-start;
   align-content: center;
   gap: 20px;
}

.rule-item {
   height: 18%;
   width: 40%;
   display: flex;
   align-items: center;
   margin: 10px;
   gap: 15px;
}

.selfservice-modal-error {
   color: #FFFFFF !important;
   background-color: #D4021D !important;
   border: 0 !important;
}

/* Workflow Instructions */

.wf-instructions .z-label {
	font-size: xx-large;
}

/* Finish Process Panel */

.ls-label-first {
   font-size: 30px;
}
.ticketapp-row {
	display: flex;
	gap: 30px;
	justify-content: space-between;
	margin-top: 100px;
	align-items: center;
}

.appstore-badge {
   display: flex;
   flex-direction: row;
   margin-top: 10px;
   gap: 16px;
}
.appstore-badge .lbl {
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.appstore-badge .l1 {
   font-size: 14px;
}
.appstore-badge .l2 {
   font-size: 26px;
}
.appstore-badge .z-image {
   height: 50px;
}

/* prevent scrollbars in canvas  */

audio,canvas,video{
   display:inherit;
}

/* Weighing Panel */
.weighing-area {
   display: flex;
}
.weighinginfo {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

/* Info / Error Message Panel */
.messagepanel .z-label{
   font-size: 30px;
}
@media screen and (min-width: 1600px) {
	.messagepanel .z-label{
		font-size: 42px;
	}
}