:root {
  --primary: #ab3537;
  --green: #00a751;
  --dark: #333;
}

@font-face {
	font-display: swap;
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 300;
	src: url('/sys/fonts/ubuntu-v20-latin-300.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	src: url('/sys/fonts/ubuntu-v20-latin-regular.woff2') format('woff2');
}


html,body {
	border: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	font-size: 1em;
	background: url('../img/bg.jpg') center center no-repeat;
	background-size: cover;
	background-attachment: fixed;
	
	color: #444;
}

* {
	box-sizing: border-box;
	font-family: 'Ubuntu';
	font-weight: 300;
	font-size: 1rem;
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/*
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	*/
}

.pageContent {
	* {
		color: rgba(0,0,0,0.9);
	}
}

b, strong, .fancybox-caption__body {
	font-weight: 400;
}

img {
	display: block;
}

.df {
	display: flex !important;
	
	&.column {
		flex-direction: column;
	}
	
	&.alignItemsFlexEnd {
		align-items: flex-end;
	}
	&.alignItemsFlexStart {
		align-items: flex-start;
	}
	&.alignItemsCenter {
		align-items: center;
	}
	
	&.flexWrap {
		flex-wrap: wrap;
	}
	
	&.spaceBetween {
		justify-content: space-between;
	}
	
	&.flexEnd {
		justify-content: flex-end;
	}
}

.grow1 {
	flex-grow: 1;
}

.shrink0 {
	flex-shrink: 0;
}

.noFlexWrap {
	flex-wrap: nowrap;
}

.file-item-wrap {
	padding: 5px;
	
	&:hover {
		border-radius: 5px;
		background-color: rgba(255,255,255,0.5);
	}
}

.row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 15px;
	margin-bottom: 20px;
}

.w200px {
	width: 200px;
}

.w10 {
	width: 10%;
}

.w15 {
	width: 15%;
}

.w20 {
	width: 20%;
}

.w25 {
	width: 25%;
}

.w30 {
	width: 30%;
}

.w33 {
	width: 33%;
}
.w40 {
	width: 40% !important;
}

.w50 {
	width: 50% !important;
}

.w80 {
	width: 80%;
}

.w100 {
	width: 100%;
}

.gap5 {
	gap: 5px;
}

.gap10 {
	gap: 10px;
}

.gap15 {
	gap: 15px;
}

.gap20 {
	gap: 20px;
}

.gap25 {
	gap: 25px;
}

.mt10 {
	margin-top: 10px !important;
}

.mt15 {
	margin-top: 15px !important;
}

.mt20 {
	margin-top: 20px !important;
}

.mt30 {
	margin-top: 30px !important;
}

.mb0 {
	margin-bottom: 0 !important;
}

.mb15 {
	margin-bottom: 15px !important
}

.pt0 {
	padding-top: 0 !important;
}

.pt10 {
	padding-top: 10px !important;
}

.p15 {
	padding: 15px;
}

.pb0 {
	padding-bottom: 0 !important;
}

.pb15 {
	padding-bottom: 15px !important;
}


.hide {
	display: none !important;
}

.alignLeft {
	text-align: left !important;
}

.todo {
	display: none;
}

.calculatedTime {
	display: block;
	white-space: nowrap;
	padding-top:20px;
}

.smallImage {
	width: 95px;
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	display: block;
	cursor: pointer;
	position: relative;
	background-color: #000;
	
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0.65;
		transition: all 0.3s;
	}
	
	&:hover {
		img {
			opacity: 0.8;
		}
	}
	
	&::after {
		content: '';
		position: absolute;
		display: block;
		top: 50%;
		left: 50%;
		background-color: #fff;
		transform: translate(-50%,-50%);
		width:30px;
		height:30px;
		mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800"><path d="M358.56,109.89c-137.33,0-248.67,111.33-248.67,248.67s111.33,248.67,248.67,248.67,248.67-111.33,248.67-248.67-111.33-248.67-248.67-248.67ZM27,358.56C27,175.44,175.44,27,358.56,27s331.56,148.44,331.56,331.56c0,76.62-25.99,147.17-69.63,203.31l140.38,140.38c16.18,16.18,16.18,42.43,0,58.61-16.18,16.18-42.43,16.18-58.61,0l-140.38-140.38c-56.14,43.64-126.69,69.63-203.31,69.63-183.11,0-331.56-148.44-331.56-331.56ZM358.56,192.78c22.89,0,41.44,18.56,41.44,41.44v82.89h82.89c22.89,0,41.44,18.55,41.44,41.44s-18.55,41.44-41.44,41.44h-82.89v82.89c0,22.89-18.55,41.44-41.44,41.44s-41.44-18.55-41.44-41.44v-82.89h-82.89c-22.89,0-41.44-18.55-41.44-41.44s18.56-41.44,41.44-41.44h82.89v-82.89c0-22.89,18.55-41.44,41.44-41.44Z"/></svg>');
	}
}

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 200px;
	height: 100dvh;
	background-color: var(--primary);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 30px 0 30px 30px;
	border-radius: 30px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-right: 15px solid var(--dark);
	
	.homeLink {
		width: calc(100% - 30px);
		height: auto;
		
		img {
			width: 80%;
			height: auto;
			margin: 0 auto;
		}
	}
	
	> ul {
		list-style: none;
		margin: 0;
		padding: 0;
		
		> li {
			position: relative;
			margin: 5px 0;
			
			> a {
				position: relative;
				display: block;
				text-decoration: none;
				color: rgba(255,255,255,0.8);
				font-size: 1.2rem;
				font-weight: 400;
				padding: 25px 30px 25px 0px;
				text-align: center;
				z-index: 10;
				
				svg {
					width: 25px;
					height: auto;
					fill: rgba(255,255,255,0.8);
				}
			}
			
			&::before {
				content: '';
				position: absolute;
				right: 0;
				top: 0;
				height: 100%;
				width: 0;
				background-color: var(--dark);
				border-top-left-radius: 20px;
				border-bottom-left-radius: 20px;
				
			}
			
			&:hover,
			&.current {
				> a {
					color: rgba(255,255,255,1);
					
					svg {
						fill: rgba(255,255,255,1);
					}
				}
			}
			
			&.current {		
				&::before {
					width: 100%;
				}
			}
		}
	}

	.user {
		color: rgba(255,255,255,0.7);
		text-align: center;
		width: calc(100% - 30px);
		
		b {
			color: #fff;
		}
	}
	
	.btnLogout {
		margin-top: 15px;
		padding: 10px;
		background-color: var(--dark);
	}
}

.openQRScanner {
	width: calc(100% - 30px);
	  aspect-ratio: 1;
	  background-color: var(--dark);
	  border: 0;
	  outline: 0;
	  appearance: none;
	  padding: 30px;
	  border-radius: 15px;
	  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25);
	  cursor: pointer;
	  
	  
	  img {
		  width: 100%;
		  height: auto;
	  }
}

.btn {
	display: block;
	width: 100%;
	border-radius: 20px;
	appearance: none;
	border: 0;
	padding: 25px 10px;
	background-color: var(--primary);
	color: #fff;
	text-decoration: none;
	text-align: center;
	font-weight: 400;
	cursor: pointer;
	position: relative;
	
	&.btnCancel {
		color: var(--primary);
		border: 2px solid var(--primary);
		background-color: transparent;
		padding: 15px 6px;
	}
	
	&.btnDetails,
	&.btnDelete,
	&.btnEdit,
	&.btnZoom,
	&.btnPDF,
	&.btnReminder,
	&.btnReturn,
	&.btnPause,
	&.btnPlay {
		text-indent: -9999px;
		overflow: hidden;
		width: 36px;
		height: 36px;
		border-radius: 5px;
		padding: 0;
		flex-shrink: 0;
		
		&:before {
			content:'';
			background-color:#fff;
			display:block;
			width:16px;
			height:16px;
			background-size:contain;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}
	
	&.btnClose {
		background-color: #666;
		color: #fff;
		position: relative;
		aspect-ratio: 1;
		
		&:before,
		&:after {
			content: '';
			position: absolute;
			display: block;
			top: 50%;
			left: 50%;
			width: 2px;
			height: 45%;
			background-color: #fff;
			transform: translate(-50%,-50%) rotate(45deg);
		}
		
		&:after {
			transform: translate(-50%,-50%) rotate(-45deg);
		}
	}
	
	&.btnPlay {
		&:before {
			width:20px;
			height:20px;
			mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800"><path id="play-_x5B__x23_1003_x5D_" d="M626.75,315.78L263.73,94.81c-60.78-36.97-136.41,9.81-136.41,84.23v441.92c0,74.54,75.63,121.2,136.41,84.23l363.02-220.86c61.23-37.26,61.23-131.3,0-168.56"/></svg>');
		}
	}

	
	&.btnPause {
		&:before {
			width:20px;
			height:20px;
			mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800"><path d="M666.67,166.67v466.67c0,55.23-44.77,100-100,100h-33.33c-55.23,0-100-44.77-100-100V166.67c0-55.23,44.77-100,100-100h33.33c55.23,0,100,44.77,100,100Z"/><path d="M266.67,66.67c55.23,0,100,44.77,100,100v466.67c0,55.23-44.77,100-100,100h-33.33c-55.23,0-100-44.77-100-100V166.67c0-55.23,44.77-100,100-100h33.33Z"/></svg>');
		}
	}


	
	&.btnReturn {
		&:before {
			width:20px;
			height:20px;
			mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800"><path d="M733.15,440.37c-5.17-132.54-117.28-240.37-249.92-240.37H190.11l48.25-41.36c13.98-11.98,15.6-33.02,3.62-47-11.98-13.98-33.02-15.6-47-3.61l-116.66,100c-.1.09-.2.18-.3.27-.24.21-.48.43-.72.65-.18.17-.36.34-.53.51-.22.22-.44.43-.66.66-.17.18-.35.36-.52.54-.21.23-.42.46-.63.7-.16.18-.31.36-.47.54-.22.26-.43.52-.64.79-.13.16-.26.32-.38.49-.24.31-.47.63-.69.95-.09.12-.18.24-.26.37-.28.41-.56.83-.82,1.26-.02.03-.04.07-.07.1-2.06,3.34-3.54,7.06-4.32,11.04,0,.03,0,.06-.01.08-.1.51-.19,1.03-.26,1.54-.02.14-.04.29-.05.43-.05.4-.1.81-.14,1.21-.02.23-.04.47-.05.7-.02.32-.05.65-.06.97,0,.07-.01.14-.01.22,0,.22,0,.43,0,.65,0,.21-.02.42-.02.63,0,.07,0,.14,0,.22,0,.29.01.58.02.87,0,.29.02.58.03.87.01.25.04.49.06.74.03.34.06.68.09,1.02.02.19.05.37.07.56.05.4.11.8.17,1.19.02.12.04.25.07.37.08.45.17.91.27,1.35.02.07.03.15.05.22.11.49.23.98.37,1.46.01.04.02.09.04.13.14.51.3,1.01.46,1.51.01.03.02.06.03.1.17.51.35,1,.54,1.5.01.04.03.07.04.11.19.48.39.96.61,1.44.02.05.05.1.07.15.21.45.42.9.65,1.34.04.07.08.15.11.22.21.41.44.82.67,1.22.06.1.11.2.17.3.22.37.44.73.68,1.1.08.12.15.24.23.37.22.33.45.66.68.98.1.14.2.28.3.42.22.3.46.6.69.9.12.15.23.3.35.44.24.29.49.58.74.86.12.14.23.28.36.41.35.39.71.76,1.07,1.13.03.03.05.05.08.08l116.66,116.67c6.51,6.51,15.04,9.76,23.57,9.76,8.53,0,17.06-3.26,23.57-9.76,13.02-13.02,13.02-34.12,0-47.14l-59.76-59.76h302.76c46.83,0,91.77,18.42,126.54,51.86,34.78,33.45,54.94,77.64,56.76,124.44.97,24.87-3.22,49.3-12.46,72.62-8.94,22.57-22.14,43.03-39.22,60.79-17.12,17.8-37.09,31.81-59.36,41.64-23,10.16-47.32,15.31-72.26,15.31H199.97c-18.41,0-33.33,14.92-33.33,33.33s14.92,33.33,33.33,33.33h283.26c34.28,0,67.65-7.06,99.19-20.99,30.25-13.36,57.32-32.34,80.48-56.42,23.12-24.04,41.01-51.78,53.15-82.46,12.67-32,18.43-65.57,17.09-99.77Z"/></svg>');
		}
	}
	
	&.btnReminder {
		&:before {
			width:20px;
			height:20px;
			mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800"><path d="M400,763.11c-91.89,0-178.27-35.78-243.24-100.75-64.97-64.97-100.76-151.36-100.76-243.25s35.78-178.27,100.76-243.24c64.97-64.97,151.36-100.75,243.24-100.75s178.27,35.78,243.24,100.75c64.97,64.97,100.76,151.36,100.76,243.24s-35.78,178.27-100.76,243.25c-64.97,64.97-151.36,100.75-243.24,100.75ZM400,151.56c-71.47,0-138.66,27.83-189.19,78.37-50.53,50.53-78.36,117.72-78.36,189.19s27.83,138.66,78.36,189.19c50.53,50.53,117.72,78.36,189.19,78.36s138.66-27.83,189.19-78.36c50.53-50.54,78.37-117.72,78.37-189.19s-27.83-138.65-78.37-189.19c-50.54-50.53-117.72-78.37-189.19-78.37ZM476.44,533.78c-9.78,0-19.56-3.73-27.03-11.2l-76.45-76.44c-7.17-7.17-11.19-16.89-11.19-27.03v-152.89c0-21.11,17.11-38.22,38.22-38.22s38.22,17.11,38.22,38.22v137.05l65.25,65.25c14.93,14.93,14.93,39.13,0,54.05-7.46,7.46-17.24,11.2-27.03,11.2ZM744,189.78c-9.78,0-19.56-3.73-27.03-11.2l-76.44-76.44c-14.93-14.93-14.93-39.13,0-54.05,14.93-14.93,39.13-14.93,54.05,0l76.44,76.44c14.93,14.93,14.93,39.13,0,54.06-7.46,7.46-17.24,11.2-27.03,11.2ZM56,189.78c-9.78,0-19.56-3.73-27.03-11.2-14.93-14.93-14.93-39.13,0-54.06L105.42,48.08c14.93-14.93,39.13-14.93,54.05,0,14.93,14.93,14.93,39.13,0,54.05l-76.44,76.44c-7.46,7.46-17.25,11.2-27.03,11.2Z"/></svg>');
		}
	}
	
	&.btnPDF {
		&:before {
			width:20px;
			height:20px;
			mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path d="M6,15c0-1.7-1.3-3-3-3H0v8h2v-2h1c1.7,0,3-1.3,3-3ZM3,16h-1v-2h1c.6,0,1,.4,1,1s-.4,1-1,1Z"/><path d="M14,16.8v-1.6c0-1.7-1.4-3.2-3-3.2h-4v8h4c1.6,0,3-1.5,3-3.2ZM12,16.8c0,.6-.5,1.2-1,1.2h-2v-4h2c.5,0,1,.6,1,1.2v1.6Z"/><polygon points="21 14 21 12 17 12 15 12 15 14 15 16 15 18 15 20 17 20 17 18 20 18 20 16 17 16 17 14 21 14"/><path d="M18.4,0H4v9h2V2h10v6h6v14H4v2h20V5.6L18.4,0ZM18,6v-3.6l3.6,3.6h-3.6Z"/></svg>');
		}
	}
	
	&.btnDetails {
		&:before {
			width:20px;
			height:20px;
			mask-image:url('data:image/svg+xml,<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 232.3C316.8 232.3 147.6 346 64.4 512 147.6 678 316.8 791.7 512 791.7S876.4 678 959.6 512C876.4 346 707.2 232.3 512 232.3z m220.7 148.3c52.6 33.5 97.1 78.5 130.6 131.4-33.5 52.9-78 97.8-130.6 131.4-66.1 42.2-142.4 64.4-220.7 64.4s-154.6-22.3-220.7-64.4c-52.6-33.5-97.1-78.5-130.6-131.4 33.5-52.9 78-97.8 130.6-131.4 3.4-2.2 6.9-4.3 10.4-6.4-8.7 23.9-13.5 49.7-13.5 76.6 0 123.6 100.2 223.8 223.8 223.8s223.8-100.2 223.8-223.8c0-26.9-4.8-52.7-13.5-76.6 3.5 2.1 6.9 4.2 10.4 6.4zM512 428.1c0 46.4-37.6 83.9-83.9 83.9s-83.9-37.6-83.9-83.9 37.6-83.9 83.9-83.9 83.9 37.5 83.9 83.9z"  /></svg>');
		}
	}
	
	&.btnEdit {
		&:before {
			mask-image:url('data:image/svg+xml,<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1013.5 128.2c3.1 7 5.6 15.2 7.6 24.6 1.9 9.4 2.9 19.1 2.9 29.2 0 10.1-1.9 20.3-5.8 30.4-3.9 10.1-10.1 19.9-18.6 29.3-9.3 9.4-17.7 17.6-25 24.6-7.4 7-13.8 13.3-19.2 18.7-6.2 6.2-12 11.7-17.5 16.4L720 82.6c9.3-8.6 20.4-18.9 33.2-31 12.8-12.1 23.5-21.7 32-28.7 10.9-8.6 22.1-14.6 33.8-18.1 11.7-3.5 23.1-5.1 34.4-4.7 11.3 0.4 22.1 2.1 32.6 5.3 10.5 3.1 19.6 6.6 27.4 10.5 16.3 8.6 34.4 23.6 54.2 45 19.7 21.5 35 43.9 45.9 67.3zM106.3 699.1c4.7-4.7 15.5-15.8 32.6-33.3 17.1-17.5 38.4-39.2 64.1-64.9l429.8-431.7 217.8 220-250.5 251.5-93.2 94.8c-31 30.4-59 58.3-83.8 83.6-24.8 25.4-45.4 46.2-61.7 62.6-16.3 16.4-26 25.8-29.1 28.1-7.8 7-16.7 14.4-26.8 22.2-10.1 7.8-20.6 14-31.5 18.7-10.9 5.5-26.8 12.1-47.7 19.9-21 7.8-42.9 15.4-65.8 22.8s-44.6 13.8-65.2 19.3-35.9 9-46 10.5c-21 2.3-34.9-0.8-41.9-9.4s-8.9-23-5.8-43.3c1.5-10.9 5.2-26.7 11.1-47.4 5.8-20.7 12-42.1 18.6-64.4 6.6-22.2 13-42.7 19.2-61.4 6.2-18.7 11.3-31.6 15.1-38.6 4.7-10.9 9.9-20.9 15.7-29.8 5.7-8.9 14.1-18.8 25-29.8z m0 0"  /></svg>');
		}
	}
	
	&.btnDelete {
		&:before {
			mask-image:url('data:image/svg+xml,<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M85.330963 255.992889H56.887309a56.887309 56.887309 0 0 1 0-113.774617h200.044221c2.247049-32.283548 8.390878-51.397683 18.06172-69.459404a129.219522 129.219522 0 0 1 53.758507-53.758507C351.933335 6.598928 376.793089 0 428.930307 0h166.110942c52.137218 0 76.996972 6.598928 100.17855 19.000361a129.219522 129.219522 0 0 1 53.758507 53.758507c9.670842 18.061721 15.814672 37.175856 18.061721 69.459404H967.084248a56.887309 56.887309 0 0 1 0 113.774617h-28.443655v476.260548c0 101.458515-10.552596 138.23616-30.406266 175.298242a206.785367 206.785367 0 0 1-86.013611 86.013611C785.158634 1013.447404 748.380989 1023.971556 646.922474 1023.971556h-269.873392c-101.458515 0-138.23616-10.552596-175.298242-30.406266a206.785367 206.785367 0 0 1-86.01361-86.013611C95.855115 870.489598 85.330963 833.711952 85.330963 732.253437V255.992889z m113.774617 0v508.344991c0 50.715036 5.29052 69.11808 15.188912 87.663342 9.926835 18.545263 24.461543 33.07997 43.006805 43.006806 18.545263 9.898392 36.948307 15.188911 87.663343 15.188911h334.042276c50.715036 0 69.11808-5.29052 87.663343-15.188911a103.392684 103.392684 0 0 0 43.006806-43.006806c9.898392-18.545263 15.188911-36.948307 15.188911-87.663342V255.992889H199.10558z m170.889476-113.774617h283.981445c-0.483542-6.940252-1.706619-10.410377-3.583901-13.880504a25.855282 25.855282 0 0 0-10.751701-10.751701c-4.636316-2.503042-9.215744-3.81145-21.901614-3.81145h-211.507014c-12.68587 0-17.265298 1.308408-21.901614 3.81145a25.855282 25.855282 0 0 0-10.751701 10.751701c-1.877281 3.470126-3.100358 6.940252-3.5839 13.880504zM625.760396 369.767506a56.887309 56.887309 0 0 1 56.887308 56.887309v312.880198a56.887309 56.887309 0 0 1-113.774617 0V426.654815a56.887309 56.887309 0 0 1 56.887309-56.887309z m-227.549235 0a56.887309 56.887309 0 0 1 56.887308 56.887309v312.880198a56.887309 56.887309 0 0 1-113.774617 0V426.654815a56.887309 56.887309 0 0 1 56.887309-56.887309z"  /></svg>');
		}
	}
	
	&.btnZoom {
		&:before {
			mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800"><path d="M358.56,109.89c-137.33,0-248.67,111.33-248.67,248.67s111.33,248.67,248.67,248.67,248.67-111.33,248.67-248.67-111.33-248.67-248.67-248.67ZM27,358.56C27,175.44,175.44,27,358.56,27s331.56,148.44,331.56,331.56c0,76.62-25.99,147.17-69.63,203.31l140.38,140.38c16.18,16.18,16.18,42.43,0,58.61-16.18,16.18-42.43,16.18-58.61,0l-140.38-140.38c-56.14,43.64-126.69,69.63-203.31,69.63-183.11,0-331.56-148.44-331.56-331.56ZM358.56,192.78c22.89,0,41.44,18.56,41.44,41.44v82.89h82.89c22.89,0,41.44,18.55,41.44,41.44s-18.55,41.44-41.44,41.44h-82.89v82.89c0,22.89-18.55,41.44-41.44,41.44s-41.44-18.55-41.44-41.44v-82.89h-82.89c-22.89,0-41.44-18.55-41.44-41.44s18.56-41.44,41.44-41.44h82.89v-82.89c0-22.89,18.55-41.44,41.44-41.44Z"/></svg>');
		}
	}

}

.pageContent {
	width: calc(100% - 250px);
	max-width: 100%;
	min-height: 100%;
	margin-left:250px;
}



.txtLabel,
.selectLabel {
	position: relative;
	display: block;
	padding-bottom: 15px;
	padding-top: 10px;
	
	input {
		display: block;
		width: 100%;
		border: none;
		border-radius: 0;
		outline: none !important;
		padding: 8px 5px;
		background-color: transparent;
		margin-top: 4px;
		background-color: rgba(0,0,0,0.05);
		border-radius: 5px;
	}
	
	input[type=number] {
	    -moz-appearance:textfield; /* Firefox */
	}
	
	select, textarea {
		display: block;
		width: 100%;
		border-radius: 8px;
		appearance: none;
		border: 0;
		padding: 8px 5px;
		margin-top: 4px;
		background-color: rgba(0,0,0,0.05);
		height: 36px;
		border-radius: 5px;
	}
	
	textarea {
		min-height: 120px;
		resize: none;
		overflow-y: hidden;
	}
	
	span {
		position: absolute;
		font-size: 0.8rem;
		top: -5px;
		transform-origin: left top;
		transition: all 0.2s;
		color: #444;
	}
}

.selectLabel {
	position: relative;
	
	&::after {
		content: '';
		width: 8px;
		height: 8px;
		border-right: 2px solid #444;
		border-bottom: 2px solid #444;
		position: absolute;
		
		right: 15px;
		top: 50%;
		
		transform: translateY(-75%) rotate(45deg);
	}
}


.selectLabelTab {
	background-color: #e0e0e0;
	padding: 30px 15px 0px 20px !important;
	border-top-left-radius: 20px;
	
	select {
		background-color: #fff !important;
	}
	
	span {
		top: 15px !important;
	}
	
	&::after {
		right: 30px !important;
		top: 73% !important;
	}
	
	&::before {
		content:'';
		position: absolute;
		left: 100%;
		top: 0;
		background-color: #e0e0e0;
		mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"><path d="M100,0c-32.26,0-40.85,7.56-50,36C41.89,61.19,26.46,100,0,100h100V0Z"/></svg>');
		display:block;
		height: 100%;
		aspect-ratio: 1;
		background-size: 100% 100%;
		transform: scaleX(-1);
	}
}

.selectLabelTab + .greyArea {
	border-top-left-radius: 0;
	min-height: 30px;
	background-color: #e0e0e0;
	padding: 0 !important;
	
	table {
		padding: 20px 0;
	}
}

.formLogin {
	width: 500px;
	max-width: 80%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: rgba(240,241,245,0.5);
	border-radius: 25px;
	padding: 40px;
	backdrop-filter: blur(10px);
}

.notification {
	position: absolute;
	left: 50%;
	top: 0px;
	z-index: 1000;
	max-width: 80%;
	padding: 20px;
	border-radius: 15px;
	transform: translate(-50%, -100%);
	color: #fff;
	transition: all 0.4s;
	backdrop-filter: blur(5px);
	
	&.visible {
		top: 20px;
		transform: translate(-50%, 0%);
	}
	
	&.success {
		background-color: rgba(1,168,82,0.65);
	}
	
	&.error {
		background-color: rgba(230,33,45,0.65);
	}
}

h1 {
	font-size: 2rem;
	font-weight: 400;
	color: #fff;
	margin: 0;
	padding: 20px 0;
}

.tabNav {
	list-style: none;
	display: flex;
	margin: 0;
	padding: 0;
	
	li {
		display: flex;
		margin-left: -45px;
		position: relative;
		z-index: 10;
		--bgColor: #ddd;
		
		&:nth-of-type(2) {
			z-index: 8;
			--bgColor: #ccc;
		}
		&:nth-of-type(3) {
			z-index: 6;
			--bgColor: #bbb;
		}
		&:nth-of-type(4) {
			z-index: 4;
			--bgColor: #aaa;
		}
		&:nth-of-type(5) {
			z-index: 2;
			--bgColor: #999;
		}
		
		&.current {
			z-index: 10;
			--bgColor: #fff;
		}
		
		&::before,
		&::after {
			content:'';
			background-color:var(--bgColor);
			mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"><path d="M100,0c-32.26,0-40.85,7.56-50,36C41.89,61.19,26.46,100,0,100h100V0Z"/></svg>');
			display:block;
			width:55px;
			height:55px;
			background-size:contain;
		}
		&::after {
			transform: scaleX(-1);
		}
		
		&:first-of-type {
			margin-left: 0;
			
			&::before {
				content: none;
			}
			a {
				padding-left: 45px;
				border-top-left-radius: 15px;
			}
		}
		
		a {
			display: block;
			text-decoration: none;
			background-color: var(--bgColor);
			color: var(--dark);
			padding: 18px 30px 0 30px;
			font-weight: 400;
			font-size: 1.2rem;	
		}
	}
}
.tabWrap {
	padding-top: 30px;
}

.tab {
	width: 100%;
	height: calc(100dvh - 120px);
	background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 1) 90%);
	backdrop-filter: blur(10px);
	border-bottom-left-radius: 30px;
	display: none;
	padding: 0 45px 45px 45px;
	position: relative;
	overflow: auto;
	
	&.current {
		display: block;
	}
	
	table {
		width: 100%;
		border-collapse: collapse;
		
		* {
			text-align: left;
		}
		
		th {
			font-weight: 400;
			background-color: #eee;
			padding: 8px 0px 8px 10px;
			color: rgba(0,0,0,0.3);
			
			&:first-of-type {
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
			}
			&:last-of-type {
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
			}
			
		}
		
		
		thead {
			position: sticky;
			top: 100px;
			z-index: 10;
			
			tr {
				background-color: #fff;
			}
		}
		
		td {
			
			padding: 10px;
			
			&.alignRight {
				text-align: right;
			}
			
			.itemButtonWrap {
				display: flex;
				gap: 5px;
				align-items: center;
				justify-content: flex-end;
			}
		}
		
		tr.bgColor {
			background-color: rgba(0,0,0,0.03);
		}
	}

}


.dataHead {
	position: sticky;
	z-index: 1;
	top: 0;
	height: 100px;
	padding: 30px 0;
	background-color: #fff;
	display: flex;
	gap: 15px;
	
	&:has(.searchTerm) {
		&::before {
			content: '';
			position: absolute;
			display: block;
			top: 50%;
			left: 22px;
			width: 22px;
			height: 22px;
			background-color: #444;
			transform: translate(-50%,-50%);
			mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800"><path d="M690.24,643.1l-112.91-112.91c35.1-45.15,56-101.9,56-163.52,0-147.28-119.39-266.67-266.67-266.67S100,219.39,100,366.67s119.39,266.67,266.67,266.67c61.62,0,118.37-20.9,163.52-56l112.91,112.91c13.02,13.02,34.12,13.02,47.14,0,13.02-13.02,13.02-34.12,0-47.14ZM366.67,566.67c-110.46,0-200-89.54-200-200s89.54-200,200-200,200,89.54,200,200-89.54,200-200,200Z"/></svg>');
		}
	}
	
	.searchTerm {
		padding: 8px 15px;
		border-radius: 20px;
		border: 1px solid rgba(0,0,0,0.2);
		width: 100%;
		padding-left: 45px;
	}
	
	.machineFilterWrap {
		position: relative;
		
		&::before {
			content: '';
			position: absolute;
			display: block;
			top: 50%;
			left: 22px;
			width: 22px;
			height: 22px;
			background-color: #444;
			transform: translate(-50%,-50%);
			mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800"><path d="M100,233.33c0-18.41,14.92-33.33,33.33-33.33h533.33c18.41,0,33.33,14.92,33.33,33.33s-14.92,33.33-33.33,33.33H133.33c-18.41,0-33.33-14.92-33.33-33.33ZM200,400c0-18.41,14.92-33.33,33.33-33.33h333.33c18.41,0,33.33,14.92,33.33,33.33s-14.92,33.33-33.33,33.33H233.33c-18.41,0-33.33-14.92-33.33-33.33ZM300,566.67c0-18.41,14.92-33.33,33.33-33.33h133.33c18.41,0,33.33,14.92,33.33,33.33s-14.92,33.33-33.33,33.33h-133.33c-18.41,0-33.33-14.92-33.33-33.33Z"/></svg>');
		}
	}
	
	.machineFilter {
		display: block;
		padding: 8px 15px;
		border-radius: 20px;
		appearance: none;
		border: 1px solid rgba(0,0,0,0.2);
		background-color: #fff;
		height: 40px;
		padding-left: 45px;
	}
	
	.btnCreate {
		border-radius: 20px;
		padding: 12px 10px;
		width: 350px;
	}
}

.submitWarning,
.submitAndSendWarning,
.closeWarning,
.returnForm,
.pauseForm,
.unpauseForm {
	display: none;
}

.returnForm,
.pauseForm {
	.popupModal {
		width: 700px !important;
		max-width: 95% !important;
	}
}

.popupWrap,
.qrPopupWrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 50;
	
	&:not(:has(~ .popupWrap)),
	&.closeWarning,
	&.submitWarning,
	&.submitAndSendWarning,
	&.returnForm,
	&.pauseForm,
	&.unpauseForm,
	&.popupWrapSignature {
		backdrop-filter: blur(10px);
		background-color: rgba(0,0,0,0.6);
	}
}

.qrPopupWrap {
	backdrop-filter: blur(10px);
	background-color: rgba(0,0,0,0.75);
}

.popup {
	position: relative;
	top: 100px;
	left: 50%;
	background-color: #fff;
	width: 1000px;
	max-width: 96%;
	border-radius: 25px;
	border-top-left-radius: 0;
	transform: translateX(-50%);
	
	&.popupQRScanner {
		width: 600px;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	&:has(.overflowYScroll) {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	
	.popupContentWrap {
		max-height: calc(100dvh - 130px);
	}
	
	.overflowYScroll {
		overflow-y: scroll;
	}
	
		
	p {
		line-height: 150%;
	}
	
	table {
		th {
			font-weight: 400;
			text-align: right;
		}
		
		th,
		td {
			padding:10px;
		}
		
		tr.even {
			background-color: rgba(0,0,0,0.03);
		}
	}
	
	&.popupModal {
		width: 500px;
		border-radius: 25px;
		border-top-left-radius: 0;
		top: 50%;
		transform: translate(-50%,-50%);
		
		form {
			overflow: auto;
		}
		
		p {
			margin: 0 0 35px 0;
		}
		
		button {
			padding: 15px 10px !important;
		}
	}
	
	&.popupSignature {
		width: 750px;
		border-radius: 25px;
		border-top-left-radius: 0;
		top: 50%;
		transform: translate(-50%,-50%);
		
	}
	
	table.dataTable {
		th {
			text-align: left;
		}
		
		.itemButtonWrap {
			justify-content: flex-end;
			padding: 0;
		}
		
		.buttonTH,
		.buttonTD {
			width: 50px;
		}
	}
	
	.popupContent {
		padding: 40px;
	}
	
	h2 {
		margin-top: 0;
		padding-bottom: 20px;
		font-size: 1.2rem;
		
		* {
			font-size: 1.2rem;
		}
		
		&.popupHeadline {
			position: absolute;
			bottom: 100%;
			left: 0;
			background-color: #fff;
			padding: 15px 0 20px 20px;
			border-top-left-radius: 15px;
			margin-bottom: 0;
			display: inline-block;
			height: 45px;
			font-weight: 400;

			
			&::after {
				content:'';
				position: absolute;
				left: 100%;
				top: 0;
				background-color: #fff;
				mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"><path d="M100,0c-32.26,0-40.85,7.56-50,36C41.89,61.19,26.46,100,0,100h100V0Z"/></svg>');
				display:block;
				height: 100%;
				aspect-ratio: 1;
				background-size: 100% 100%;
				transform: scaleX(-1);
			}
		}
	}
	
	.popupButtonWrap {
		position: absolute;
		bottom: 100%;
		right: 0;
		display: flex;
		gap: 15px;
		transform: translateY(-10px);
		
		button {
			padding: 10px 20px;
			width: auto;
			border-radius: 20px;
		}
	}
	
	
}

.fileLabelWrap {
	text-align: center;
	
	
	&.w50 {
		width: 49% !important;
	}
	
	&.df {
		align-items: center;
		gap: 20px;
		
		span {
			opacity: 0.5;
		}
	}
	
	
}

.fileLabel {
	display: inline-block;
	position: relative;
	height: 80px;
	width: 80px;
	border-radius: 8px;
	margin-bottom: 5px;
	overflow: hidden;
	margin-bottom: 0;
	flex-shrink: 0;
	background-color: rgba(0,0,0,0.1);
	
	&.w50 {
		width: 49% !important;
	}
	
	&::after {
		content: '';
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 30px;
		height: 30px;
		background-image: url(../img/iconCamera.png);
		background-size: 100% auto;
		background-position: center center;
		background-repeat: no-repeat;
		z-index: 50;
	}
	
	img {
		width: 100%;
		height: 100%;
		position: absolute;
		object-fit: cover;
		z-index: 25;
	}
	
	input {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		border: none;
		appearance: none;
		outline: none;
		padding: 0;
		margin: 0;
	}
	
	.imgPreviewWrap,
	.thumbnailWrap {
		height: 100%;
	}
	
	.imgPreviewWrap:has(img){
		background-color: #000;
		
		img {
			opacity: 0.65;
		}
	}
}

div.searchableItem {
	position: relative;
	display: flex;
	justify-content: space-between;
	/* padding: 15px; */
	background-color: rgba(255,255,255,0.5);
	border-radius: 15px;
	margin-bottom: 5px;
	border: 1px solid rgba(0,0,0,0.05);
	
	&:hover {
		background-color: rgba(255,255,255,1);
		
		.itemTextWrap,
		.itemTextWrap * {
			color: #000;
		}
	}
	
	.itemTextWrap {
		flex-grow: 1;
		padding: 15px;
		cursor: pointer;
	}
	
	h2 {
		font-weight: 400;
		margin: 0 0 5px 0;
	}
	
	p {
		margin: 0;
	}
	
	.serviceWrap {
		display: flex;
		gap: 15px;
		flex-direction: row-reverse;
		flex-grow: 0;
		padding-right: 30px;
		align-items: center;
		
		img {
			width: 40px;
			height: 40px;
		}
	}
	
	.itemButtonWrap {
		flex-grow: 0;
		display: flex;
		gap: 5px;
		align-items: center;
		padding: 15px;
		
		.btn {	
			display: block;
		}
	}
	
	&.available {
		border-left: 10px solid #32c896;
	}
	
	&.unavailable {
		border-left: 10px solid #963232;
	}
	
	&.runningProcess {
		border-left: 10px solid #ffcc33 !important;
	}
}

.itemButtonWrap {
	flex-grow: 0;
	display: flex;
	gap: 5px;
	align-items: center;
	padding: 15px;
	
	.btn {	
		display: block;
	}
}




.radioRow {
	
	padding-bottom: 15px;
	
	.radioWrap {
		margin-left: 0;
	}
	
	.radioRowHead {
		display: inline-flex;
	    align-items: center;
	    gap: 20px;
	    padding: 10px 0 5px 10px;
		border-top-left-radius: 25px;
		
	}
	
	.additionalInfos {
		position: relative;
		display: none;
		padding-top: 20px;
		border-radius: 15px;
		border-top-left-radius: 0;
		transition: all 0.3s;
		background-color: #f2f2f2;
		padding: 20px;
		
		.templateIncludeArea {
			display: flex;
			flex-wrap: wrap;
			
			.template {
				margin: 10px 10px 0 0 !important;
			}
		}
		
		&.open {
			display: block;
		}
	}
	
	&:has(.additionalInfos.open) {
		.radioRowHead {
			background-color: #f2f2f2;
			position: relative;
			
			&::after {
				content:'';
				position: absolute;
				left: 100%;
				top: 0;
				background-color: #f2f2f2;
				mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"><path d="M100,0c-32.26,0-40.85,7.56-50,36C41.89,61.19,26.46,100,0,100h100V0Z"/></svg>');
				display:block;
				height: 100%;
				aspect-ratio: 1;
				background-size: 100% 100%;
				transform: scaleX(-1);
			}
		}
	}
}

.greyArea {
	.radioRow {
		padding-top: 15px;
		padding-bottom: 0;
		
		
		&:has(.additionalInfos.open) {
			.radioRowHead {
				background-color: #fff;
				position: relative;
				
				&::after {
					content:'';
					position: absolute;
					left: 100%;
					top: 0;
					background-color: #fff;
					mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"><path d="M100,0c-32.26,0-40.85,7.56-50,36C41.89,61.19,26.46,100,0,100h100V0Z"/></svg>');
					display:block;
					height: 100%;
					aspect-ratio: 1;
					background-size: 100% 100%;
					transform: scaleX(-1);
				}
			}
		}
		
		.additionalInfos {
			background-color: #fff;
			
			.templateIncludeArea {
				.template {
					background-color: #f2f2f2;
				}
			}
		}
	}
}



.radioWrap {
	position: relative;
	height:45px;
	width: 100px;
	border-radius: 25px;
	background-color: #888;
	box-shadow: inset 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
	margin-left: 20px;
	
	& + span {
		font-weight: 400;
	}
	
	&::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		height: 85%;
		aspect-ratio: 1;
		border-radius: 50%;
		transform: translate(-50%,-50%);
		transition: all 0.3s;
	}
	
	&:has(input.negative:checked){
		&::before {
			left: 4%;
			transform: translate(0%,-50%);
			background-color: #963232;
			box-shadow: inset -5px -10px 5px -5px rgba(0, 0, 0, 0.15);
		}
	}
	
	&:has(input.positive:checked){
		&::before {
			left: 96%;
			transform: translate(-100%,-50%);
			background-color: #32c896;
			box-shadow: inset -5px -10px 5px -5px rgba(0, 0, 0, 0.15);
		}
	}
	
	label {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		aspect-ratio: 1;
		border-radius: 50%;
		cursor: pointer;

				
		&:has(.positive) {
			left: auto;
			right: 0;

			
			&::after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 30%;
				aspect-ratio: 1.9/1;
				border: 3px solid #ddd;
				border-width: 0 0 3px 3px;
				transform: translate(-52%,-80%) rotate(-45deg);
			}
			
			&:hover {
				&::before,
				&::after {
					border-color: #eee;
				}
			}
			
			&:has(input:checked){
				&::after {
					border-color: #fff;
				}
			}
		}
		
		&:has(.negative) {
			&::before,
			&::after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 37%;
				height: 3px;
				background-color: #ddd;
				transform: translate(-50%,-50%) rotate(-45deg);
			}
			&::after {
				transform: translate(-50%,-50%) rotate(45deg)
			}
			
			&:hover {
				&::before,
				&::after {
					background-color: #eee;
				}
			}
			
			&:has(input:checked){
				&::before,
				&::after {
					background-color: #fff;
				}
			}
		}
		
		&:has(input:checked){
			
		}
		
		input {
			/* visibility: hidden */
			position: relative;
			z-index: -1;
		}
	}
}

.ownerName,
.storageLocation {
  display: none;
}

.imageContainer {
	width: 120px;
	height: 120px;
	border-radius: 5px;
	overflow: hidden;
	display: block;
	
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}


.w50:has(.selectOwner select option:checked:is([value="1"])) + .w50 .ownerName {
  display: block;
}

.w50:has(.selectOwner select option:checked:is([value="2"])) + .w50 .storageLocation {
  display: block;
}

.schnellwechsler {
	display: none !important;
}

form:has(div label.maschinentyp select option:checked:is([value="2"])) .schnellwechsler {
	display: block !important;
}


h2:has(+.greyArea) {
	background-color: #f2f2f2;
	padding: 15px 0 20px 20px;
	border-top-left-radius: 15px;
	margin-bottom: 0;
	margin-top: 10px;
	display: inline-block;
	position: relative;
	height: 45px;
	font-weight: 400;
	
	&::after {
		content:'';
		position: absolute;
		left: 100%;
		top: 0;
		background-color: #f2f2f2;
		mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"><path d="M100,0c-32.26,0-40.85,7.56-50,36C41.89,61.19,26.46,100,0,100h100V0Z"/></svg>');
		display:block;
		height: 46px;
		aspect-ratio: 1;
		background-size: 100% 100%;
		transform: scaleX(-1);
	}
}

.greyArea {
	background-color: #f2f2f2;
	padding: 20px;
	border-radius: 15px;
	position: relative;
	min-height: 60px;
	margin-bottom: 25px;
	
	&:last-child {
		margin-bottom: 0;
	}
	
	table {
		width: 100%;
		
		th {
			width: 300px;
		}
		
		tr.even {
			background-color: rgba(255,255,255,0.75);
		}
	}
	
	&:has(.zebraTable) {
		padding: 20px 0;
		
		.tableSection + button {
			width: calc(100% - 40px);
			margin-left: 20px;
			margin-right: 20px;
		} 
	}
	
	.buttonWrap {
		display: flex;
		align-items: center;

	    border-top: 1px solid rgba(0,0,0,0.2);
	    padding-top: 15px;
	    margin-top: 15px;
	    
	    .radioWrap {
		    margin-left: 0;
		    margin-right: 20px;
	    }
	}
}

h2 + .greyArea {
	border-top-left-radius: 0;
}

.greyArea > :last-child:not(.btn, .template) {
	padding-bottom: 0;
}

.insertFromTemplate {
	position: absolute;
	bottom:100%;
	right: 0;
	padding: 10px 20px;
	width: auto;
	transform: translateY(-10px);
	border-radius: 20px;
}

.noEntries {
	opacity: 0.5;
	display: none;
	
	&:only-child {
		display: block;
	}
}

.template {
	position: relative;
	z-index: 1;
	padding: 10px;
	background-color: rgba(255, 255, 255,0.8);
	border-radius: 10px;
	margin-top: 10px;
	
	.txtLabel {
		padding-bottom: 0;
	}

	
	.btnDelete {
		
	}
}

.templateIncludeArea {
	.template:first-of-type {
		margin-top: 0;
	}
	
	&.df {
		.template:first-of-type {
			margin-top: 10px;
		}
	}
}

.onlyPrint {
	display: none;
}

.onlyScreen {
	display: block;
}

.qrCodeWrap {
	position: relative;
	padding: 20px;
	border-radius: 15px;
	background-color: #f2f2f2;
	
	.btn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: auto;
	}
}

.popupMachineDetails {
	.popupColRight {
		width:180px;
		flex-grow: 0;
		
		#generatedCode {
			width: 100%;
			height: auto;
			
			img,
			canvas {
				width: 100%;
				height: auto;
			}
			
			canvas {
				display: none;
			}
		}
		
		.btn {
			padding: 10px;
			margin-bottom: 20px;
			border-radius: 15px;
		}
	}

}

.machineStatus {
	border-radius: 15px;
	padding: 20px;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	align-items: center;
	/* box-shadow: inset -5px -5px 15px 0px rgba(0, 0, 0, 0.15), inset 5px 5px 15px 0px rgba(255, 255, 255, 0.5);*/
	
	
	p {
		font-weight: 400 !important;
		color: #fff;
		flex-grow: 2;
		margin: 0;
	}
	
	.btn {
		margin-bottom: 0 !important;
		width: auto;
		padding: 10px 20px;
	}
	
	&.available {
		background-color: #32c896;
		color: #fff;
		
		.btn {
			background-color: #fff;
			color: #32c896;
		}
	}
	
	&.unavailable {
		background-color: #eeaa00;
		color: #fff;
		
		.btn {
			background-color: #fff;
			color: #eeaa00;
		}
	}
	
	&.service {
		background-color: #963232;
		color: #fff;
		
		.btn {
			background-color: #fff;
			color: #963232;
		}
	}
}

.qrSectionWrap, .qrSection {
	display: block !important;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

#qrReader {
	border-radius: 20px;
	overflow: hidden;
}

.loaderWrap {
	backdrop-filter: blur(10px);
	background-color: rgba(0,0,0,0.6);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1500;
	display: none;
}

.loader {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-block;
  border-top: 3px solid #FFF;
  border-right: 3px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 



.partsTableWrap:not(:has(.partsTable .partsTR)) {
	display: none;
}

.popupWrapSignature,
.signaturePadWrap {
	display: none;
}

.signaturePreviewImage {
	width: 300px;
	max-width: 100%;
	height: auto;
	margin: 15px 0;
	border-bottom: 1px solid #ddd;
}

.signaturePreviewImageWrap {
	height: 175px;
}

.openSignature {
	padding: 10px 20px;
	width: 300px;
	max-width: 100%;
}

.signaturePad {
	position: relative;
	width: 670px;
  height: 250px;
}
.signaturePadCanvas {
	border: 1px solid rgba(0,0,0,0.15);
	border-radius: 15px;
	width: 670px;
  height: 250px;
}
.signaturePadCanvasClear {
	text-indent: -9999px;
	overflow: hidden;
	width: 46px;
	height: 46px;
	border-radius: 5px;
	padding: 0;
	display: block;
	position: absolute;
	right: 15px;
	top:15px;
	border: none;
	outline: none;
	background-color: transparent;
	
	&:before {
		content:'';
		background-color:#666;
		display:block;
		width:20px;
		height:20px;
		background-size:contain;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		mask-image:url('data:image/svg+xml,<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M85.330963 255.992889H56.887309a56.887309 56.887309 0 0 1 0-113.774617h200.044221c2.247049-32.283548 8.390878-51.397683 18.06172-69.459404a129.219522 129.219522 0 0 1 53.758507-53.758507C351.933335 6.598928 376.793089 0 428.930307 0h166.110942c52.137218 0 76.996972 6.598928 100.17855 19.000361a129.219522 129.219522 0 0 1 53.758507 53.758507c9.670842 18.061721 15.814672 37.175856 18.061721 69.459404H967.084248a56.887309 56.887309 0 0 1 0 113.774617h-28.443655v476.260548c0 101.458515-10.552596 138.23616-30.406266 175.298242a206.785367 206.785367 0 0 1-86.013611 86.013611C785.158634 1013.447404 748.380989 1023.971556 646.922474 1023.971556h-269.873392c-101.458515 0-138.23616-10.552596-175.298242-30.406266a206.785367 206.785367 0 0 1-86.01361-86.013611C95.855115 870.489598 85.330963 833.711952 85.330963 732.253437V255.992889z m113.774617 0v508.344991c0 50.715036 5.29052 69.11808 15.188912 87.663342 9.926835 18.545263 24.461543 33.07997 43.006805 43.006806 18.545263 9.898392 36.948307 15.188911 87.663343 15.188911h334.042276c50.715036 0 69.11808-5.29052 87.663343-15.188911a103.392684 103.392684 0 0 0 43.006806-43.006806c9.898392-18.545263 15.188911-36.948307 15.188911-87.663342V255.992889H199.10558z m170.889476-113.774617h283.981445c-0.483542-6.940252-1.706619-10.410377-3.583901-13.880504a25.855282 25.855282 0 0 0-10.751701-10.751701c-4.636316-2.503042-9.215744-3.81145-21.901614-3.81145h-211.507014c-12.68587 0-17.265298 1.308408-21.901614 3.81145a25.855282 25.855282 0 0 0-10.751701 10.751701c-1.877281 3.470126-3.100358 6.940252-3.5839 13.880504zM625.760396 369.767506a56.887309 56.887309 0 0 1 56.887308 56.887309v312.880198a56.887309 56.887309 0 0 1-113.774617 0V426.654815a56.887309 56.887309 0 0 1 56.887309-56.887309z m-227.549235 0a56.887309 56.887309 0 0 1 56.887308 56.887309v312.880198a56.887309 56.887309 0 0 1-113.774617 0V426.654815a56.887309 56.887309 0 0 1 56.887309-56.887309z"  /></svg>');
	}
}

.tab {
	table {
		table-layout: fixed;
	}
	td, th {
	  white-space: nowrap;   /* kein automatischer Zeilenumbruch */
	  overflow: hidden;      /* überstehender Inhalt ausblenden */
	  text-overflow: ellipsis; /* optional ... anzeigen */
	}
 }

.colAuftragsnr {
	width: 105px !important;
	letter-spacing: -0.5px;
}
.colSeriennr {
	width: 150px !important;
	letter-spacing: -0.5px;
}
.colAuftragsart {
	width: 105px !important;
	letter-spacing: -0.5px;
}
.colKunde {
	width: 140px !important;
	letter-spacing: -0.5px;
}
.colHersteller {
	width: 180px !important;
	letter-spacing: -0.5px;
}
.colTyp {
	width: 120px !important;
	letter-spacing: -0.5px;
}
.colStatus {
	width: 150px !important;
	letter-spacing: -0.5px;
	overflow: auto !important;
	white-space: normal !important;
}
.colAusfuehrung {
	width: 150px !important;
	letter-spacing: -0.5px;
}

.colUhrzeit {
	width: 80px !important;
	letter-spacing: -0.5px;
}

.colMonteur {
	width: 130px !important;
	letter-spacing: -0.5px;
}

.colKurzbeschreibung {
	width: auto !important;
	min-width: 100px;
	letter-spacing: -0.5px;
	overflow: auto !important;
	white-space: normal !important;
}

.colBtns {
	width: 145px !important;
	
	.itemButtonWrap {
		padding-left: 0;
		padding-right: 0;
	}
}


@media only screen and (max-width: 1300px) {
	html,body {
		font-size: 0.75em;
	}
	
	header {
		width: 120px;
		padding: 15px 0 10px 10px;
		
		.homeLink,
		.openQRScanner,
		.user {
			width: calc(100% - 15px);
		}
		
		.openQRScanner {
			padding: 20px;
		}
		
		 & > ul {
		    & > li {
		      & > a {
			      padding: 10px 15px 10px 0px;
			  }
		    }
		}
	}
	
	.pageContent {
		margin-left: 140px;
		width: calc(100% - 140px);
	}
	
	.tab {
		padding: 0 25px 45px 25px;
		
		table {
			td {
				padding: 5px;
			}
		}
	}
	.tabNav {
		& li {
			& a {
			  padding: 18px 10px 0 10px;
			}
			
			&:first-of-type {
		      & a {
			  	padding-left: 25px;
			  }
			}
		}
	}
	
	.colAuftragsnr {
	width: 80px !important;
	}
	.colSeriennr {
		width: auto !important;
	}
	.colAuftragsart {
		width: 70px !important;
	}
	.colKunde {
		width: 100px !important;
	}
	.colHersteller {
		width: 100px !important;
	}
	.colTyp {
		width: auto !important;
	}
	.colStatus {
		width: 100px !important;
	}
	.colAusfuehrung {
		width: 80px !important;
	}
	
	.colUhrzeit {
		width: 50px !important;
	}
	
	.colMonteur {
		width: 100px !important;
	}
	
	.colKurzbeschreibung {
		width: auto !important;
	}
	
	.colBtns {
		width: 110px !important;
	}
	
}

.stickyTable {
	position: sticky;
	top: 0px;
	z-index: 100;
	border-bottom: 2px solid #ddd;
	background-color: #fff;
	
	
	table {
		width: 100%;
		td {
			vertical-align: bottom;
			height: 120px;
			position: relative;
			padding: 10px;
			font-size: 0.85rem;
			font-weight: 400;
			
			div {
				font-size: 0.85rem;
				font-weight: 400;
			}
		}
	}
}

table.uvvTable {
	width: 100%;
	
	input[type="date"] {
		display: block;
		width: 100%;
		border: none;
		border-radius: 0;
		outline: none !important;
		padding: 8px 5px;
		background-color: transparent;
		margin-top: 4px;
		background-color: rgba(0,0,0,0.05);
		border-radius: 5px;
	}

	tr {
	
		th:first-child,
		td:first-child {
			width: 300px !important;
		}
		th:last-child,
		td:last-child {
			width: 300px !important;
		}
		
		.vertical {
			transform-origin: left bottom;
			transform: rotate(-90deg);
			position: absolute;
			left: 60%;
			bottom: 10px;
		}
	}
	.cbLabel {
		padding: 15px;
		
		input {
			width: 20px;
			height: 20px;
			border-radius: 3px;
		}
	}
	
	td:has(.cbLabel){
		padding: 0;
	}
}

.popupUVV {
	.sectionHeadline {
		font-weight: 400;
		padding-top: 20px;
		padding-bottom: 0;
	}
}


.dragDropArea {
	display: block;
	width:100%;
	padding: 65px 0px;
	text-align: center;
	border: 2px dotted #ccc;
	border-radius: 7px;
	
	position: relative;
	cursor: pointer;
	margin-bottom:0px;
	
	&.dragover {
		background-color: rgba(0,180,0,0.1);
	}
}
.dragDropArea span.label {
	position: absolute;
	top:50%;
	font-size: 20px;
	line-height:20px;
	width: 100%;
	left: 0;
	color: #aaa;
	transform:translateY(-50%);
}

#fileList {
	padding-top: 10px;
}

.file-item {
	padding: 5px;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	color: #444;
	display: block;
	text-decoration: none;
	
	span {
		display: inline-block;
		padding-right: 15px;
	}
	
	button {
		background-color: transparent;
		border: 0;
	}
	
	&:last-of-type {
		border-bottom: 0;
	}
}

#serviceTable,
#uvvTable,
#workshopTable {
	th {
		cursor: pointer;
		position: relative;
		padding-right: 20px;
		
		&.colBtns {
			padding-right: 0;
		}
		
		
		&.sorted-asc,
		&.sorted-desc {
			color: #555;
			
			&::after {
				content: '';
				border-width: 8px 6px 0px 6px;
				border-color: rgba(85, 85, 85, 1) transparent transparent transparent;
				border-style: solid;
				width: 0;
				height: 0;
				position: absolute;
				top:50%;
				right: 5px;
				transform: translate(-50%,-50%);
				
			}
			
		}
		
		&.sorted-asc {
			&::after {
				border-width: 0px 6px 8px 6px;
				border-color: transparent transparent rgba(85, 85, 85, 1) transparent;
				border-style: solid;
				width: 0;
				height: 0;

			}
		}
	}
	
	td, th, td b {
		font-size: 0.95rem
	}
	
	.paused {
		td {
			background-color: rgba(171, 53, 55, 0.15) !important;
		}
	}
}

tr.deleted {
	display: none;
}



@media print {
	* {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: auto !important;
		font-size: 11px !important;
	}
	
		
	table {
		td,
		th {
			border-bottom: 1px solid #444 !important;
			font-size: 11px !important;
			padding:0px 3px 3px 0 !important;
			text-align: left !important;
			
			* {
				font-size: 11px !important;
			}
		}
	}
	
	.overflowYScroll {
		overflow: auto !important;
	}
	
	.popupWrap {
		background-color: transparent !important;
		backdrop-filter: none !important;
		display: none;
	}
	
	.popupWrap:last-of-type {
		display: block;
	}
	
	.popupContent {
		border-radius: 0 !important;
	}
	
	.popup {
		overflow: auto !important;
		transform: none !important;
		border-radius: 0 !important;
		max-width: none !important;
		
		.popupContentWrap {
			max-height: none !important;
		}
		
	}
	
	h2 {
		font-size: 13px !important;
		padding: 0 !important;
		height: auto !important;
		transform: none !important;
		margin-bottom: 2px !important;
		margin-top: 4px !important;
		
		&.popupHeadline {
			font-size: 16px !important;
			
			&::after {
				content: none !important;
			}
			
		}

	}
	
	.greyArea {
		padding: 0 !important;
		margin-bottom: 10px !important;
		min-height: 0 !important;
		
		ul {
			padding-left: 10px !important;
		}
	}
	
	.greyArea table,
	.zebraTable.w100 {
		width: 100% !important;
	}
	
	.signaturePreviewImageWrap {
		.w30 {
			width: 200px !important;
			height: auto !important;
		}
	}
	
	.smallImage {
		border-radius: 0 !important;

		&::after {
			display: none !important
		}
	}
	
	.onlyPrint {
		display: block;
	}
	
	tr.onlyPrint {
		display: table-row;
	}
	.onlyScreen,
	header,
	.pageContent,
	.notification {
		display: none !important;
	}
	
	.popupMachineDetails {
		
		.popupColRight {
			width: 100%;
			background-color: transparent;
		}
		
		#generatedCode {
			text-align: center;
			max-width: 500px;
			margin: 0 auto;
			
			img {
				width: 40% !important;
				height: auto !important;
				margin-bottom: 15px !important;
				margin-left: auto !important;
				margin-right: auto !important;
			}
		}
		
	}
	
	.templateIncludeArea .template {
		padding: 5px 15px 5px 0px;
		border-bottom: 1px solid #aaa !important;
		border-radius: 0 !important;
		margin: 0 !important;
	}
	
	.printH2 {
		font-weight: bold !important;
	}
	
	* {
		color: #000 !important;
	}
}