/* mobile style
breakpoint tablet 860px
breakpoint smartphone 460px */

/* smartphone and tablet portrait */
@media screen and (max-width: 860px) {
	:root {
		/* spacing */
		--padding: 1rem; /* 16px */
		--padding-small: 0.625rem; /* 10px */
		--padding-medium: 1rem; /* 16px */
		--padding-large: 1.875rem; /* 30px */
		--padding-xlarge: 1.875rem; /* 30px */
		--padding-remove: 0 !important;
		--margin: 1rem;
		--margin-small: 0.625rem;
		--margin-medium: 1rem;	
		--margin-large: 1.875rem;
		--margin-xlarge: 1.875rem;
		--margin-remove: 0 !important;
		--gap: 1rem; /* 16px */
		--gap-small: 0.625rem;
		--gap-medium: 1rem;

		/* font */
		--font-size-large: 1rem;
		--h1: 2.25rem;
		--h2: 1.75rem;
		--h3: 1.5rem;
		--h4: 1.25rem;
	}
}

/* BURGER MENU
------------------------------------------*/
.WebAppTabNavigatorController {
  /*position: fixed;
  top: 0px;
  right: 0px;*/
  z-index: 20;
  margin-right: 5px;	
}

/* Menü @desktop
------------------------------------------*/
.WebAppTabNavigator_Close,
.WebAppTabNavigator_User,
.WebAppTabNavigator_Logout{
	display: none;
}

/* smartphone and tablet portrait */
@media screen and (max-width: 860px) {
	
	/* NAVIGATION
	----------------------------------------------*/
  .WebAppTabNavigator {
    top: 0px !important;
    position: relative !important;
    float: left !important;
    height: 100% !important;
    left: auto !important;
    min-width: 100%;
    padding: 0px;
    padding-top: 56px;
    border: 0px;
  }
  .WebAppTabNavigator > ul.ui-tabs-nav {
    margin-bottom: 0px;
	padding: 15px;
  }
  .WebAppTabNavigator > ul {
    background: #fbfbfb !important;
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    left: 0;
    margin: 0;
    padding: 0;
  }
  .WebAppTabNavigator > .ui-tabs-nav li {
    width: 100%;
    margin: 0;
  }
  .WebAppTabNavigator > ul > li > a {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
  }
  .WebAppTabNavigator > ul > li > .ui-icon-close {
    float: right;
    position: absolute;
    right: 0;
    top: 50%;
  }
  .WebAppTabNavigator > ul > li > a > div > span {
    max-width: 400px;
  }
  .WebAppTabNavigator > ul {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
    -webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
    -ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
    transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
    -webkit-overflow-scrolling: touch;
    box-shadow: none;
    height: auto;
    max-width: 100%;
    overflow-y: auto;
    padding: 1rem;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
    width: auto;
  }
  .WebAppTabNavigator > ul.is-menu-visible {
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.2);
    visibility: visible;
	z-index: 999;
	min-width: 50%;
	width: 100%;
  }
	
/* Menü @media screen
------------------------------------------*/
	.WebAppTabNavigator_Close,
	.WebAppTabNavigator_User,
	.WebAppTabNavigator_Logout{
		display: block;
	}		
	.is-menu-visible .WebAppTabNavigator_Close{
		z-index: 999;
		position: absolute;
		right: 15px;
		top: 20px;
		width: 24px;
		height: 24px;
		content: "";
		background-image: url(../../images/tree/Abbrechen_Overlay_24.png);
		background-repeat: no-repeat;
		background-position: center;
	}
	.WebAppTabNavigator > ul > li:first-child{
		margin-top: 40px !important;
	}
	.WebAppTabNavigator_User{
		position: absolute;
		top: 20px;
		width: 100%;
		text-align: left;
		padding-right: 20px;
	}/*
	.WebAppTabNavigator_Logout{
		position: absolute;
		bottom: 15px;
		margin-left: 50%;
		transform: translateX(-55%);
		min-width: 150px;
    	width: 100%;
    	max-width: 200px;
   		min-height: 40px;
		background-color: #373e3f;
		border-color: #373e3f;
		color: #fbfbfb;
	}*/
	.WebAppTabNavigator_Logout{
		position: absolute;
		bottom: 15px;
		margin-right: 15px;
		min-width: 150px;
    	width: 100%;
		max-width: 200px;
    	max-width: -moz-available; /* mozilla */
		max-width: -webkit-fill-available; /* chrome */
		max-width: stretch;
   		min-height: 40px;
		background-color: #373e3f;
		border-color: #373e3f;
		color: #fbfbfb;
	}

	/* -----------------------------------------------
	------------------------------------------*/
	.BpWebApp.ui-tabs-panel {
		padding: 0;
	}
	.ui-dialog.ui-widget-content:not(.BpWebApp_LoadingDialog) {
		max-width: 90vw;
		min-width: 85vw;
	}
	.BpWebApp_Table .ui-jqgrid .ui-jqgrid-btable {
		/*table-layout: auto;*/
	}
	.ui-dialog .ui-jqgrid .ui-jqgrid-htable, .ui-dialog .ui-jqgrid .ui-jqgrid-bdiv {
		padding-right: .8em;
	}
	
	/* Tabelle
	-------------------------------------------------- */	
	.ui-jqgrid tr.jqgrow td {
		word-break: break-word;
	}
	
	/* DIALOG */
	.ui-dialog input:not([type="checkbox"]):not([type="radio"]), .ui-dialog textarea {
		width: 100% !important;		
		max-width: 100%;
	}
}


/* SMARTPHONE and smaller Screens */
@media screen and (max-width: 480px) {
	/* NAVIGATION
	----------------------------------------------*/
	#Navigator {
		margin-top: var(--margin);
	}
	#Navigator .ui-tabs {
		padding-bottom: var(--padding-small);
	}
	.Navigationsleiste {
		right: 0;
		top: 0;
	}
	body {
		padding: var(--padding-small);
	}	
	
	/* INPUT
	-------------------------------------------------- */
	/* Unterschriftenfeld */
	.input-canvas-signature-ubo {
		display: flex;
		display: -webkit-box;
   	 	display: -ms-flexbox;
	}
	.input-canvas-signature, .lower-canvas, .upper-canvas {
    	min-width: 100% !important;
    	width: 100% !important;
  	}
	.canvas-container {
		width: 100% !important;
	}
	
	/* combobox */
	.ui-combobox {
		width: 100%;
	}
	
	/* ACCORDION
	----------------------------------------------- */
	.ui-accordion, .BpWebApp_Container_TabNavigator_Compact_Header, .BpWebApp_Container_Accordion_Compact_Header {
		border: none;
	}
	.BpWebApp_Container_Accordion_Compact_Header {
		padding: 0;
		justify-content: space-between;
		margin-bottom: var(--margin-small);
	}
	.BpWebApp_Container_Accordion_Compact_Header button, .BpWebApp_Container_Accordion_Compact_Header button img {
		padding: 0;
	}
	.BpWebApp_Container_Accordion_Compact_Header > div {
		font-weight: 500;
	}
	.BpWebApp_Container_TabNavigator_Compact_Header > div {
		min-width: auto;
		margin: 0 var(--margin);
	}
	.BpWebApp_Container_TabNavigator_Compact_Header, .ui-accordion .ui-accordion-content .BpWebApp_Container_TabNavigator.ui-tabs .ui-tabs-panel {
		padding: 0;
	}
	.ui-accordion.WebAppTabelleSummary.margin-top {
		margin-top: 0;
	}
	.ui-accordion .ui-jqgrid .ui-jqgrid-htable {
		padding-top: 0;
	}
	.ui-accordion .ui-accordion-content {
		height: auto !important;
		padding: 0;
	}
	
	/* scrollable table on mobile device */
	.accordionParent, .BpWebApp_Container_Accordion {
		width: 95vw;
	}
}