body { font-family:helvetica; font-size:14px; background-color:#fafafa; background-size:cover; background-attachment:fixed; background-position:center center; -webkit-text-size-adjust:100%!important; }
#topBody { margin:0; padding:0; overflow:hidden; background:#EEE; }

svg.panelLeftToggle { margin-left:2px; border-radius:5px; }
svg.panelLeftToggle:hover { background:#0000000f; box-shadow:1px 1px 5px grey; }
#panelLeft { position:absolute; left:0; left:calc(0px + env(safe-area-inset-left)); top:0; width:44px; height:100%; z-index:10000; background-color:#EEE; background: linear-gradient(to bottom right, #eeeeee, #ffffff); border-right:grey 2px solid; transition: all 0.5s; font-size:11px; }
#panelLeft.opened{ width:240px; box-shadow: 10px 0 10px -10px grey; }
#panelLeftTopMenuContainer { position:absolute; left:0; top:0; padding:5px 0 0 5px; width:90%; width:calc(100% - 5px); overflow:hidden; }
#panelLeftBottomMenuContainer { position:absolute; left:0; bottom:0; padding:5px 0 0 0; width:90%; width:calc(100% - 5px); overflow:hidden; }
#panelLeftSearchContainer { position:absolute; left:45px; top:10px; transition: all 0.5s; }
#panelLeftSearchContainer input { width:130px; transition: all 0.5s; }
#panelLeftSearchContainer button { height: 21px; width:25px; line-height:1em; border:1px solid grey; border-radius:2px; }
#panelLeftMenuContainer{ position:absolute; left:0; top:50px; padding:0 0 0 5px; height:100%; height:calc(100% - 50px); width:90%; width:calc(100% - 5px); overflow-x:hidden; overflow-y:auto; scrollbar-width:none; }
#panelLeftMenuContainer::-webkit-scrollbar{ width: 0px; }
#panelLeftMenuTopSpacer{ height:0px; transition: all 0.4s; }
#panelLeft #rdeOpen { position:absolute; left:205px; transition: all 0.5s; }
#panelLeft .menuGroup{ position: relative; z-index: 0; background:white; box-shadow: 0px 0px 5px grey; border-radius:9px 0 0 0; padding:0px 0px 8px 0px; margin:-5px 0px 0px 0px; }
#panelLeftMenu .menuGroup::after{ content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to bottom right, transparent, #ffffff85); pointer-events: none;}
#panelLeft .menuGroup.hidden{ display:none; }
#panelLeft .menuGroup.groupOnlyInternal{ display: none; }
body.internal #panelLeft .menuGroup.groupOnlyInternal{ display: block; }
#panelLeft .menuGroup.last{ padding-bottom:3px; }
#panelLeft .menuGroup .heading{ font-weight:bold; cursor:pointer;}
#panelLeft .menuGroup .menuSmall{ position: absolute; width: 36px; overflow: hidden; white-space: nowrap; padding: 0px 0px 0px 3px; }
#panelLeft .menuGroup .menuSmall.heading{ padding: 3px 0px 0px 3px; }
#panelLeft .menuGroup .menuBig{ position: relative; left: 39px; margin-right: 39px; overflow: hidden; white-space: nowrap; padding: 0px 3px 0px 0px; }
#panelLeft .menuGroup .menuBig.heading{ padding: 3px 3px 0px 0px; }
#panelLeft .menuGroup hr{ margin:1px 0px; }
#panelLeft .menuItem{ text-decoration:none; line-height:1.1em; transition:line-height 0.4s, opacity 0.3s; }
#panelLeft .menuItem .favoriteIcon{ text-decoration:none; font-size:smaller; color:#cc1; text-shadow: 0 0 2px black; }
#panelLeft .menuItem.showMore{ line-height:0.4em; cursor:pointer; }
#panelLeft .menuItem.highlite{ border:1px dashed white; }
#panelLeft .menuItem.highlite::after{ content:"\21B5"; color:white; position:absolute; right:5px; margin-top:-11px; font-size:large; transition:all 0.5s;}
#panelLeft .menuItem.hidden{ line-height:0em; opacity:0; }
#panelLeft .menuGroup.collapsed .menuItem{ line-height:0em !important; }
#panelLeft .menuGroup:not(.expanded) div.menuHeading { padding-bottom:5px; margin-bottom:-5px; }
#panelLeft .menuHeading:hover { background:#0000000f; }
#panelLeft a { color:#00002b; display:block; }
#panelLeft a:hover { background:#0000000f; }

#panelTop { position:absolute; left:0; top:-41px; width:100%; height:39px; z-index:10000; background-color:#EEE; background: linear-gradient(to bottom right, #eeeeee, #ffffff); border-bottom:grey 2px solid; transition: all 0.5s; font-size:11px; }

#main{ position:absolute; left:45px; left:calc(45px + env(safe-area-inset-left)); top:0; width: 100%; width:calc(100% - 45px); width:calc(100% - calc(45px + env(safe-area-inset-left))); height:100%; padding:0; margin:0; overflow:hidden; transition: all 0.5s; background-color:#fafafa; }
#mainPage{ width:100%; height:100%; border:none; box-sizing:border-box; }

.popup{ position:fixed; left:0; top:0; width:100%; height:100%; background:#0000004f; overflow:hidden; z-index:10000; display:none; }
.popup.noBackground { background:transparent; pointer-events:none; }
.popup.opened{ display:block; }
.popupWindow{ position:relative; top:5%; left:5%; max-width:90%; max-height:90%; border:2px solid grey; border-radius:6px; box-shadow: 1px 1px 5px #5f5f5f; background:white; display:flex; flex-direction:column; }
.popup.max .popupWindow { width:90%; height:90%; }
.popup.maxWidth .popupWindow { max-width:750px; max-width:min(750px, 90%); }
.popupHeader { padding:5px; background:#4472C4; color:white; font-size:large; font-weight:bold; box-shadow: 0 0 3px grey; }
.popupMain { padding:5px; flex:1; overflow-y:auto; scrollbar-width:thin; }
.popupFooter { bottom:0; padding:5px; width:100%; }

.popup.calculator .popupWindow { width:90%; height:90%; max-height:575px; max-width:540px; }

#headerUsername { font-size:12px; color:grey; }
#watermark { display:none; background: darkred; color: white; font-weight: bold; margin-top:10px; padding: 3px; box-shadow: 1px 1px 5px grey;}

#footerContainer { float:right; margin-top:-3px; margin-right:5px; text-align:right; max-width:80%; max-height:2.6em; } 
.footerContent {font-size:smaller; color:#202020; text-shadow: 0 0 3px white, 0 0 20px grey; margin-left:15px; }
.largeFont {font-size: larger; }


.small { font-size:smaller; }
.cave { color:red; }
.dose { color:#2452B9; }
.rate { color:orange; }
.drug { color:#2452B9; }
.block { position: relative; left: 1em; }
.whiteGlow { text-shadow: 0 0 10px white; }
.blur { backdrop-filter: blur(5px); }
.badge { background: darkseagreen; border-radius: 5px; padding: 1px 3px; }


.edit { cursor:pointer; display:none; }
.searchHighlight { background:yellow; }

.blurBox { backdrop-filter: blur(5px); box-sizing:border-box; border-radius:10px; border: 1px solid #9f9f9f; box-shadow: 1px 1px 5px grey; background:#FFFFFF20; width:100%; padding:5px; overflow: hidden; }
.blurBox:hover{ backdrop-filter: blur(10px); background:#FFFFFF40; }
.blurBox.maxWidth { max-width:750px; }
.contentBox { position:relative; z-index:1; box-sizing:border-box; border-radius:10px; border:1px solid grey; box-shadow: 1px 1px 5px grey; background:#FFF; width:100%; padding:5px; overflow: hidden;}
.contentBox.maxWidth { max-width:750px; }
.contentBox .contentBoxHead { position:relative; z-index:1; box-sizing: border-box; left: 0; top: 0; width: calc(100% + 10px); min-height: 4em; background: red; margin: -10px 0 0 -5px; padding: 5px 5px 0.1px 5px; box-shadow: 1px 1px 7px grey; }
.contentBox table, .blurBox table, .contentBox textarea, .blurBox textarea { border-radius: 10px; }
.contentBox:after, .contentBoxHead:after  { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to bottom right, #ffffff00, #ffffff1c); pointer-events: none; }

.innerBorderTable { width: 100%; border-collapse: collapse; }
.innerBorderTable td, .innerBorderTable th { border: 1px solid grey; }
.innerBorderTable tr:first-child td, .innerBorderTable tr:first-child th { border-top: 0; }
.innerBorderTable tr td:first-child, .innerBorderTable tr th:first-child { border-left: 0; }
.innerBorderTable tr:last-child td, .innerBorderTable tr:last-child th { border-bottom: 0; }
.innerBorderTable tr td:last-child, .innerBorderTable tr th:last-child { border-right: 0; }

.jsonTableDiv { flex:1: overflow:auto; box-shadow: 1px 1px 5px grey; }
.jsonTable { width:100%; max-width:3000px; text-align:left; border-collapse:collapse; }
.jsonTable th, .jsonTable td { vertical-align:top; }
.jsonTable tbody tr { background:#FCFCFCF9; box-shadow: 1px 1px 5px grey; }
.jsonTable tbody tr:first-child td { padding-top:4px; }
.jsonTable tbody th, .jsonTable tbody td  { border:1px solid #8EAADB; }
.jsonTable tbody tr.hidden { display:none; }
.jsonTable tbody tr:hover { background:#E6E6E6FC; }
.jsonTable tbody tr:nth-child(even of :not(.hidden)) { background:#D9E2F3F9; }
.jsonTable tbody tr:nth-child(even of :not(.hidden)):hover { background:#C9D2E3FC; }
.jsonTable thead tr, .jsonTable thead tr:hover { background: #4472C4FC; box-shadow: 1px 1px 5px grey; color: white;}
.jsonTable thead tr { border:1px solid #8EAADB; position:sticky; top:3px; z-index:10; }
.jsonTable .jsonTable thead tr { z-index:1; }
.jsonTable ul { margin:0; padding-left:20px;}

.infusionTable { width:100%; max-width:750px; text-align:left; border-collapse:collapse; }
.infusionTable tbody tr { border:2px solid black; background:lightgrey; box-shadow: 1px 1px 5px grey; }
.infusionTable tbody tr th, .infusionTable tbody tr td { padding: 5px 0px; }

.jsonEditorContainer { padding-bottom: 9px; margin-bottom: 10px; box-shadow: 2px 2px 4px grey; }
.jsonEditor.collapsible { width: calc(100% - 10px); margin:10px 0 -10px 0; padding:5px 0px 10px 10px; border-bottom:2px solid grey; box-shadow:-1px -2px 2px 1px grey; transition:all 0.25s; overflow:hidden; }
.jsonEditor.collapsible > .jsonEditor.elementHover { position:relative; box-sizing:content-box; height:45px; margin:-5px 0px -40px -10px; clear:both; cursor:pointer; }
.jsonEditor.collapsible > .jsonEditor.elementHover:hover { background:#0000000f; box-shadow:0 0 7px 1px #0000000f; }
.jsonEditor.collapsible h3 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jsonEditor.collapsible.arrayElement h3 { margin-right:100px; }
.jsonEditor.collapsible.collapsed { color:grey; transition:all 0.25s; max-height:2.8em; }
.jsonEditor.element { margin-bottom:5px; padding: 0 5px 0 0; cursor:default; clear: both; }
.jsonEditor.collapsible + .jsonEditor.element { margin-top: 25px; }
.jsonEditor.input:not(.checkbox):not(.select):not(.html):not(.objectKey) { box-sizing:border-box; width:100%; border:1px solid black; border-radius:2px; background:white; padding:3px; margin:0 0 5px 0; min-height:20px; overflow:auto; }
.jsonEditor.input.html { box-sizing:border-box; width:100%; resize:vertical; border:1px solid black; border-radius:2px; background:white; padding:3px; margin:0 0 5px 0; min-height:20px; overflow:auto; }
.jsonEditor.input[readonly] { background:#ffffff70 !important; color: grey !important;}
.jsonEditor.input[type="checkbox"] { transform:translateY(3px); }
.jsonEditor.input input.validationError { border:1px solid red; color:red; }
.jsonEditor.text.objectKey { background:transparent; border:1px solid grey; position:relative; }
.jsonEditor.element .text.objectKey { margin: 5px 0 -1px 0; }
.jsonEditor.elementButton { float:right; position:relative; top:-2.8em; right:5px; width:24px; height:24px; }
.jsonEditor.itemButton { float:right; position:relative; top:0px; right:0px; width:24px; height:24px; }
.jsonEditor.elementButton.delete, .jsonEditor.itemButton.delete { color:red; }
.jsonEditor.array .jsonEditor.arrayElement:first-of-type .jsonEditor.elementButton.up { opacity:0.5; }
.jsonEditor.array .jsonEditor.arrayElement:last-child .jsonEditor.elementButton.down { opacity:0.5; }
.jsonEditor.element .tox-tinymce { border: 1px solid black; border-radius: 2px; }
.jsonEditor.element .tox .tox-edit-area { border: 1px solid lightgrey; margin:0 -1px; }

.toolButton { position:relative; box-sizing: border-box; width: 25px; height: 25px; padding-top: 6px; border-radius: 50%; background: lightgrey; box-shadow: 0 0 3px 1px grey; text-align: center; cursor:pointer; line-height:1em; color:black; margin:2px; }
.toolButton:hover { background:#dedede; }
.toolButton.wide { width: 38px; border-radius: 13px; }
.toolButton.inline { width: unset; border-radius: 13px; padding-left: 5px; padding-right: 5px; display: inline-block;}
.toolButton.inline.maxWidth { width: 100%; max-width: 735px;}
.toolButton.inline.halfMaxWidth { width: 100%; max-width: 365px;}
.toolButton.left, .toolButtonGroup.left { left: 5px; float:left; margin-right: 3px;}
.toolButton.right, .toolButtonGroup.right { right: 5px; float:right; margin-left: 3px;}
.toolButton.bottom, .toolButtonGroup.bottom { bottom: 5px; }
.toolButton.top, .toolButtonGroup.top { top: 5px; }
.toolButton.fixed, .toolButtonGroup.fixed { position: fixed; }

div#toolbar { position:sticky; top:0; background:white; margin: -10px -5px 0 -10px; padding: 5px 5px 0 10px; z-index:100; }

.fileManagerContainer { max-width: 2000px; margin: 0 auto; }
.fileList { margin-top: 20px; }
.fileListItem { margin-bottom:10px !important; border-bottom: 1px solid grey !important; }
.fileListItem:hover { background:lightgrey; }
.fileItem { display: flex; justify-content: space-between; align-items: center; padding: 10px; border: 1px solid #ccc; margin-bottom: 5px; }
.fileItem:hover { background:#eee; }
.fileItem a { color: black; text-decoration:none; }
.fileIcon { width:24px; margin: 0 10px 0 0; }
.upload-dropzone { border: 2px dashed #aaa; padding: 10px; margin: 2px 0; max-width: 200px; cursor: pointer; text-align: center; background: #fafafa; }
.upload-dropzone.dragover { border-color: #007bff; background: #eef5ff; }
.upload-preview { margin-top: 5px; font-size: 12px; }

div.login {	max-width: 400px; background: white; box-shadow: 0 0 9px 0 rgba(0,0,0,0.3); margin: 100px auto; }
div.login h2 { text-align: center; color:#444; font-size: 24px;	padding: 0 0 20px 0; border-bottom: 1px solid #dee0e4; }
.loginForm { display: flex; flex-wrap: wrap; justify-content: center; padding-top: 20px; }
.loginForm label { font-size:24px; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background-color: #3274d6; color: #ffffff; }
.loginForm input[type="password"], .loginForm input[type="text"] { font-size: 24px; width: 100%; max-width: 300px; height: 50px; border: 1px solid #dee0e4; margin-bottom: 20px; padding: 0 15px; }
.loginForm input[type="button"] { width: calc(100% + 10px); padding: 15px; margin: 20px -5px -5px -5px; background-color: #3274d6; border: 0; cursor: pointer; font-weight: bold; color: #ffffff; transition: background-color 0.2s; }
.loginForm input[type="button"]:hover { background-color: #2868c7; transition: background-color 0.2s; }

img.inline { height:1.3em; margin-top:-2px; vertical-align:middle; }
img { max-width: 100%; }
img.aspectRatio { height: auto; }

hr { background: grey !important; }

.resizeHandle { position:absolute; right:0; bottom:0; width:15px; height:15px; background-image:url('icons/resize-handle.svg'); background-size: contain; cursor: nwse-resize; }

button, input[type="button"] { text-align:center; padding: 3px; }
button.clear { height: 21px; width:25px; line-height:1em; border:1px solid grey; border-radius:2px; }

.lightgreen { background:#adffad; }
.lightgreen:hover { background:#8dff8d; }
.lightyellow { background:#ffffad; }
.lightyellow:hover { background:#ffff7a; }
.lightred { background:#ffadad; }
.lightred:hover { background:#ef9f9f; }

.redFlash { animation: redFlashing 1500ms infinite; }
@keyframes redFlashing {
	0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
	50% { background-color: #FF0000; box-shadow: 0 0 10px #FF0000; }
	100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

.highlight-fade { animation: highlightFade 4s ease-out; }
@keyframes highlightFade {
  from { background-color: yellow; }
  to { background-color: transparent; }
}

.infiniteProgress { background-image: repeating-linear-gradient(90deg, transparent, transparent 75%, #9198e5, transparent); animation: ininiteProgressing 1000ms infinite; background-size: 250% 100%; }
@keyframes ininiteProgressing {
	0% { background-position: 0% 0%; }
	100% { background-position: -100% 0%; }
}

@media only screen and (max-width: 1000px) { /* Größe wird auch in viewer.php in der Funktion fileIframeResize() berücksichtigt */
	#viewerBody { margin:-10px 2px 0 2px; zoom:0.8; /* transform: scale(0.8) translate(-12.5%, -12.5%); width:125%; */ }
	#footerContainer, #footer, #documentControl { font-size:xx-small; }
}
@media only screen and (max-width: 600px) {
	#panelLeft { left:-46px; font-size:14px; }
	#panelLeft.opened{ left:0; left:calc(0px + env(safe-area-inset-left)); width:310px; }
	#panelLeftSearchContainer { left:60px; }
	#panelLeftSearchContainer input { width:185px; }
	#panelLeft .menuItem{ line-height:1.4em; }
	#panelLeft .menuItem.highlite::after{ margin-top:-18px; }
	#panelLeft .menuGroup .menuSmall{ width: 50px; }
	#panelLeft .menuGroup .menuBig{    left: 53px; margin-right: 53px; }
	#panelLeft #calculatorOpen { left:-46px; transition: all 0.5s; }
	#panelLeft #rdeOpen { left:275px; transition: all 0.5s; }
	#panelLeft.opened #calculatorOpen { left:5px; }
	#panelTop { top:0; font-size:11px; }
	body.panelLeftOpened #panelTop { left:calc(0px + env(safe-area-inset-left)); }
	#main { left:0; top:41px; width:100%; height:calc(100% - 40px); }
	body.panelLeftOpened #main { left:calc(0px + env(safe-area-inset-left)); }
}
@media print {
	@page { margin: 5mm; }
	body { font-size: 10px; }
	#panelTop, #panelLeft { display:none; }
	#main, #mainPage { left:0 !important; top:0 !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; border:0 !important; box-shadow:none !important; overflow-y: visible !important; }
	body { background:white !important; background-image:unset !important; }
	#calculatorOpen { display:none; }
	thead tr { position:unset !important; }
	.noPrint { display:none !important; }
	.printPage { display:none !important; }
	.contentBox, tr, .blurBox { break-inside: avoid; }
	h1, h2, h3, h4, h5, h6, h7, h8, h9 { break-after: avoid; }
	.blurBox { background:white !important; box-shadow:none !important; }
	.jsonTableDiv { box-shadow:none !important; }
}

/* ++++++++++ Loader ++++++++++ */ 
#loader {
	display:none;
	-webkit-user-select: none !important;
	   -moz-user-select: none !important; 
	        user-select: none !important;
	-webkit-touch-callout: none !important;
	border: 16px solid #484848; /* Light grey */
	border-top: 16px solid #059; /* Blue */
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
			border-radius: 50%;
	width: 80px;
	height: 80px;
	animation: loaderSpin 3s linear infinite;
	position: fixed;
	top: 50%;
	left: 50%;
	left: calc(50% - 16px);
	margin-top:-40px;
	margin-left:-40px;
	z-index: 9999;
} @keyframes loaderSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}