#mbmcookie {position: fixed; bottom: 0; left: 0; right: 0; background: #eee; padding: 20px; font-size: 14px; font-family: verdana;}
#mbmcookie a.button {cursor: pointer; background: #ccc; padding: 8px 20px; margin-left: 10px; border-radius: 5px; font-weight: bold; float: right;}
#mbmcookie a.button:hover {background-color: #aaa;}
#mbmcookie p.cookiemessage {display: block; padding: 0; margin: 0;}

/* Icon Wobble Horizontal */
@-webkit-keyframes hvr-icon-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  33.3% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes hvr-icon-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  33.3% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.hvr-icon-wobble-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  padding-right: 2.2em;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-icon-wobble-horizontal:before {
  content: ">";
  position: absolute;
  right: 1em;
  padding: 0 1px;
  font-family: Verdana;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.hvr-icon-wobble-horizontal:hover:before, .hvr-icon-wobble-horizontal:focus:before, .hvr-icon-wobble-horizontal:active:before {
  -webkit-animation-name: hvr-icon-wobble-horizontal;
  animation-name: hvr-icon-wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Icon Wobble Vertical */
@-webkit-keyframes hvr-icon-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
  33.3% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes hvr-icon-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
  33.3% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.hvr-icon-wobble-vertical {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  padding-right: 2.2em;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-icon-wobble-vertical:before {
  content: "^";
  position: absolute;
  right: 0.5em;
  padding: 0 1px;
  font-family: Verdana;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.hvr-icon-wobble-vertical:hover:before, .hvr-icon-wobble-vertical:focus:before, .hvr-icon-wobble-vertical:active:before {
  -webkit-animation-name: hvr-icon-wobble-vertical;
  animation-name: hvr-icon-wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}


/************************************/


.changer figure {        /* wird erst per JS aktiviert */
  position: absolute;
	bottom: 20px;
	padding:5px;
	border: 1px solid gray;
	margin: 20px;
	background: #fff;
	opacity: 0.8;
	cursor: pointer;
	-moz-box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #898989;
	-webkit-box-shadow: -1px -1px 1px #ccc inset,5px 5px 8px #898989;
	box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #898989;
	opacity: 0;
	visibility: visible;
}

.changer figcaption {
  position: absolute;
  font-weight: bold;
  left: 2em;
  bottom: 2em;
  color: white;
}

/*******************************************/

    #runner {
		width:8px; height: 8px; border: 3px solid blue; background-color: red; border-radius:90%; position:absolute; top:100px; left:100px; z-index:5000;
    }


/******************************* DB ******************************/

 #fragment-18 td { border:1px solid black; background-color:white; }
 #fragment-18 table { margin: 20px; }


/*************/



	table.legend_table {
      font-size: 11px;
      border-width:1px;
      border-color:#d3d3d3;
      border-style:solid;
    }
    table.legend_table {
      border-width:1px;
      border-color:#d3d3d3;
      border-style:solid;
      padding: 2px;
    }
    div.table_content {
      width:80px;
      text-align:center;
    }
    div.table_description {
      width:100px;
    }
	/******************************/

	#progressbar { position:absolute; top: 500px; left: 600px; width: 300px; z-index: 2000;}

	/************************/

	#config, #configModel, #configAddVIS { position:absolute; top:60px; left: 40px; background: white; width: 540px; z-index: 1000; }

    #operation, #ideas_operation, #books_operation, #isotope-operation {
      font-size:20px; padding:15px; margin: 0.6em;
    }

    #network-popUp, #IsotopeButtonTitle-popUp, #ideas_network-popUp, #books_network-popUp{
      display:none;
      font-family: Verdana;
      position:absolute;
      top:110px;
      left:170px;
      z-index:999;
      width:400px;
      background-color: #f9f9f9;
      border-style:solid;
      border-width:1px;
      border-color: #5394ed;
      text-align: left;
	  background-image: linear-gradient( to bottom, hsla(200, 100%, 50%, 0), hsla(200, 100%, 50%, 0.1) );
	  border-radius:2%;
	  overflow-x: hidden; overflow-y: hidden;
    }

	#network-popUp, #ideas_network-popUp, #books_network-popUp { height:700px; } /* was 660px */

	#IsotopeButtonTitle-popUp { height:340px; }

	table#popup, table#ideas_popup, table#books_popup { margin:5px; padding:10px; }

	#node-title, #node-image, #ideas_node-title, #ideas_node-image, #books_node-title, #books_node-image { float:left; max-height:240px; max-width: 260px; font-size: 0.8em; }

	#isotope-button-title { float:left; min-height:80px; max-height:80px; max-width: 260px; font-size: 0.8em; }

	div#node-id, div#ideas_node-id, div#books_node-id   { float:left; width: 30px;}

	#node-group, #ideas_node-group, #books_node-group  { float:left; padding: 5px; margin-left: 15px; }

	label[for="node-group"], label[for="ideas_node-group"], label[for="books_node-group"]   { float:left; font-size: 12px; }

	select {float:left;  width: 60px; }

	.buttongroup, #isotope-button-label, #isotope-button-title, #saveButtonIsotope, #cancelButtonIsotope { float:left; padding: 5px; margin-left:20px;}


   /*********************************/

	#dialog-node-delete, #dialog-saveText, #dialog-delete, #dialog-setAccChapter, #dialog-setNewChapter, #dialog-saveHeader, #dialog-deleteNotice, #dialog-confirm-delete, #dialog-confirm, #dialog-integrate, #dialog-saveWebsite  {  z-index: 1999;  } /* war 999 */

	.ui-button { font-size:0.8em !important;}



	#mynetwork, #ideas_mynetwork, #books_mynetwork  {
	  top: 30px;
      width: 100%; /*2000px;*/
      height: 100%;/*1600px; */
      border: 1px solid lightgray;
    }

	#mynetwork2, #ideas_mynetwork2, #books_mynetwork2  {
	  position:absolute;
	  top: 30px;
      width: 100%; /*2000px;*/
      height: 100%;/*1600px; */
      border: 1px solid lightgray;
	  z-index: 200;
    }

	canvas { position:absolute; top: 30px; left: 10px;  z-index: 0;}


	#nodeContent2, #ideas_nodeContent2, #books_nodeContent2 {

	  font-family: Verdana;
	  font-size:0.75em;
	}

	div.verweise, div.ideas_verweise, div.books_verweise {
      position: fixed;
	  background-color: #fafafa;
      border: 1px solid lightgray;
	  font-family: Verdana;
	  font-size:0.75em;
	  width: 300px;
	  overflow-y: auto;
	  top: 50px;
	  right: 70px;
      margin: 10px;
      padding: 10px;
	  z-index:499;
	  opacity: 0.94;

	  box-shadow: 0 10px 20px rgba(0,0,0,0.5);

	  -webkit-transform: translate(2500px, 0px);
	  -webkit-transition: -webkit-transform 1000ms cubic-bezier(0.465, 0, 0.0153, 1);

	  transform: translate(2500px, 0px);
	  transition: transform 1000ms cubic-bezier(0.465, 0, 0.0153, 1);

	  will-change: transform;
    }

	div.verweise a, div.ideas_verweise a , div.books_verweise a {

		font-size:1.2em;
	}


	.hoeheBegrenzen { height: 90%; }


	 .verweise.move, .ideas_verweise.move, .books_verweise.move {
		 -webkit-transform: translate(300px, 0px);
		 transform: translate(300px, 0px);
	   }

     .verweise.moveIn, .ideas_verweise.moveIn, .books_verweise.moveIn {
		 -webkit-transform: translate(0px, 0px);
		 transform: translate(0px, 0px);
	   }

	 #DraggableExperim { clear:both; float:left; width: 96%; height: 100%;  z-index:90; }


	 #accordion { position: absolute; margin-top: 30px; width:310px; height:100%; left:20px; margin-left: 0px; margin-right: 0px; z-index:5; }

	 #accordion .ui-accordion-content, #accordion .ui-accordion-header { font-size: 10px; }

	 #accordion .ui-accordion-content { height: 150px; overflow-y: auto; overscroll-behavior: contain; }


	 #inhVergroessern, #inhVerkleinern {position: fixed; top: 45px; left: 6px; width:24px;}




	/****************/

	#button-file, .x-button {
		color: #fff;
		position: relative;
		top: -14px;
		left:-18px;
		font-weight: bold;
		border: 1px #999 solid;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#bb0000ff', EndColorStr='#990000ff');
		background: -webkit-gradient(linear, 0 0, 0 bottom, from(#b00), to(#900));
		background: -webkit-linear-gradient(top, #b00, #900);
		background: -moz-linear-gradient(top, #b00, #900);
		background: -ms-linear-gradient(top, #b00, #900);
		background: -o-linear-gradient(top, #b00, #900);
		background: linear-gradient(top, #b00, #900);
		padding: 10px 15px;
		margin: 20px;
		z-index:11;
	}
	#button-file:active, .x-button:active {
		filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#990000ff', EndColorStr='#bb0000ff');
		background: -webkit-gradient(linear, 0 0, 0 bottom, from(#900), to(#b00));
		background: -webkit-linear-gradient(top, #900, #b00);
		background: -moz-linear-gradient(top, #900, #b00);
		background: -ms-linear-gradient(top, #900, #b00);
		background: -o-linear-gradient(top, #900, #b00);
		background: linear-gradient(top, #900, #b00);
	}
	#button-file:hover, .x-button:hover {
		cursor: pointer;
	}
	/*************************/

	 /* WordCloud */
	.small-button {
		color: #fff;
		font-size:10px !important;
		position: relative;
		top: -6px;
		left:-6px;
		border: 1px #999 solid;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#0000eeff', EndColorStr='#000099ff');
		background: -webkit-gradient(linear, 0 0, 0 bottom, from(#00e), to(#009));
		background: -webkit-linear-gradient(top, #00e, #009);
		background: -moz-linear-gradient(top, #00e, #009);
		background: -ms-linear-gradient(top, #00e, #009);
		background: -o-linear-gradient(top, #00e, #009);
		background: linear-gradient(top, #00e, #009);
		padding: 4px 6px;
		margin: 10px;
		opacity: 0.7;
		z-index:11;
	}
	.small-button:active {
		filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#000099ff', EndColorStr='#0000eeff');
		background: -webkit-gradient(linear, 0 0, 0 bottom, from(#009), to(#00e));
		background: -webkit-linear-gradient(top, #009, #00e);
		background: -moz-linear-gradient(top, #009, #00e);
		background: -ms-linear-gradient(top, #009, #00e);
		background: -o-linear-gradient(top,  #009, #00e);
		background: linear-gradient(top,  #009, #00e);
	}

	.button-gray {
		color: #fff;
		font-size:10px !important;
		position: relative;
		top: -6px;
		left:-6px;
		border: 1px #999 solid;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		border-radius: 3px;
		filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#eeeeeeff', EndColorStr='#999999ff');
		background: -webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#999));
		background: -webkit-linear-gradient(top, #eee, #999);
		background: -moz-linear-gradient(top, #eee, #999);
		background: -ms-linear-gradient(top,  #eee, #999);
		background: -o-linear-gradient(top,  #eee, #999);
		background: linear-gradient(top, #eee, #999);
		padding: 4px 6px;
		margin: 10px;
		opacity: 0.7;
		z-index:11;
	}

	 #go.small-button:hover {
		cursor: pointer;
	}


	#wordcloudPanel {
		font-size: 0.7em;
		position:relative;
		top: -620px;
		left:1050px;
		height: 480px;
		width:250px;
		padding: 30px;
		background-image: linear-gradient( to bottom, hsla(200, 100%, 50%, 0.07), hsla(200, 100%, 50%, 0.2) );
		z-index: 0;
		opacity: 0.2;
	}

	#wordcloudPanel:hover { opacity: 1; }

	#angles { float: left; margin:10px; width: 250px;}

	#viewAngle { position:relative; top: 20px; z-index: 1;}

	#angle-count, #max { width: 50px; margin: 10px; }

	#fragment-2 #wordcloudPanel input {
	  border: 1px solid transparent;
	  background-color: #f1f1f1;
	  padding: 6px;
	  font-size: 14px;

	}
	#fragment-2 #wordcloudPanel input[type=text] {
	  background-color: #f1f1f1;
	  width: 80%;
	  border: 1px solid gray;
	}

	#angle-from, #angle-to {
	  background-color: #f1f1f1;
	  width: 50px;
	  padding: 6px;
	  font-size: 14px;
	  border: 1px solid gray;
	}

	#fragment-2 .autocomplete-items {
	  position: absolute;
	  border: 1px solid #d4d4d4;
	  border-bottom: none;
	  border-top: none;
	  z-index: 99;
	  width: 63%;
	  /*position the autocomplete items to be the same width as the container:*/
	  top: 58%;
	  left: 30px;
	  right: 0;
	}
	#fragment-2 .autocomplete-items div {
	  padding: 6px;
	  cursor: pointer;
	  background-color: #fff;
	  border-bottom: 1px solid #d4d4d4;
	}
	#fragment-2 .autocomplete-items div:hover {
	  /*when hovering an item:*/
	  background-color: #e9e9e9;
	}
	#fragment-2 .autocomplete-active {
	  /*when navigating through the items using the arrow keys:*/
	  background-color: DodgerBlue !important;
	  color: #ffffff;
	}




	/************************************/

	#textmobil .ui-icon-gripsmall-diagonal-se, #greatPinwand .ui-icon-gripsmall-diagonal-se { right: -4px;
    bottom: -18px; }

  .ui-icon-gripsmall-diagonal-se { cursor:nwse-resize !important; }

	#arrowUpDRAG { position:absolute; top: -10px; left:300px;  width:30px; z-index: 310;}
	#iconView { position:absolute; top: -10px; left:340px; opacity:0.8; z-index: 310;}

	#imageResize  {  position:absolute; border: 1px solid #000; padding: 25px; background: #fff; font-size:1em; color: gray; width: 878px; height: 65%; min-height:560px; margin: 0px; z-index: 1301; opacity: 1;}

	#DeleteAusw {  position:relative;  top:-8px; left:5px; width:14px; }


	#select {
		position:absolute;
		top: 40px;
		left: 41px;
	}

	#imageResMessageDrag  {
		position:absolute;
		top: 10px;
		left: 480px;
		font-family: Verdana;
		color: gray;
		font-size: 12px;
	}

	#imgMenu {
		position:absolute;
		top: 80px;
		left: 540px;
	}

	#sliderImg {
		position:absolute;
		top: 90px;
		left:150px;
		width: 300px;
	}

	#slidertext {
		font-family: Verdana, sans-serif;
		font-size: 12px;
		position:absolute;
		top: 90px;
		left:10px;}

	#amount { width: 20px; }

	#rahmen {
		position:absolute;
		top: 140px;
		border:1px solid blue;
		width:420px;
		height:420px;
		z-index: 312;
	}

	#imgResizeBackground {
		position:absolute;
		top: 140px;
		left:20px;
		width:422px;
		height:422px;
		background-color: #efefef;
		z-index: 0;
	}

	#views {
		position:absolute;
		top: 140px;
		left: 500px;
	}

	#canvasBackup {

 		position:relative;
 		top: 30px;
		right: 0px;
		z-index: 30;
	}

	#canvasOriginal {

 		position:absolute;
 		top: 72px;
		left: 870px;
		z-index: 30;
	}

	#width_height {
		float:left;
		width: 200px;
		margin: 10px;
		padding:5px;
		border: none;
		z-index: 320;
	}

	#width_height_of_resized_img {
		position:absolute;
		width: 280px;
		margin: 5px;
		padding:5px;
		top: -32px;
		left: 2px;
		font-size:0.9em;
		border: none;
		z-index: 320;
	}

	#preview { position:absolute; top: 142px; left: 27px; z-index:1 }

	#fullscreenForImgResize {
	  position:absolute;
		top: 4px;
		right: 4px;
		width: 16px;
	}

	 .tArea img {
		margin: 20px;
		margin-left: 0px;
		width: 8em;
		height: auto;
	 }



	 #accordion .meineLupe  { display:none; }

	 #fragment-1 #saveOrderOfTextelems { display:none; }

	 #DraggableExperim span, #DraggableExperim > div {
			 font-family: 'Verdana', 'sans-serif';
	 }

 	 /****************************/



	 @media (min-width: 900px) {

		 #characters, #characters2 { position: fixed; top: 62px; left: 110px; width: 500px;  }

		 #replaceDiv { position: fixed; top: 112px; left: 110px; width: 500px; z-index: 400; }

		 #ErwSuche {  position: fixed; top: 62px; left:30px; z-index: 210;  }
	 }

	 @media (max-width: 899px) {

		 #characters, #characters2 { position: fixed; top: 100px; left: 110px; width: 500px;  }

		 #replaceDiv { position: fixed; top: 150px; left: 110px; width: 500px; z-index: 400; }

		 #ErwSuche { position: fixed; top: 100px;  left:30px; z-index: 210;  }

		 #rahmenX { display:none; }
	 }


	 .ui-state-default { padding:2px; }
	 .looking, .ending, .replaceButton { padding:11.5px; margin: 2px !important; border: 0px solid lightgray !important; border-radius: 1px !important; box-shadow: 0.01em .04em 0.01em 0.01em #aaa;}

	 .ui-icon { cursor: pointer; }

	 .hiliteSuche { color: blue; font-size:1em; font-weight: bold; letter-spacing: 0.1em; }
	 .hiliteSuche:hover { border: 0.1px solid blue; z-index:20;}

	 div.hiliteSucheBox	{

			border: 2px solid lime;

		    -moz-box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #664400;
			-webkit-box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #664400;
			box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #664400;
		}

	 div.bigShadow	{
		    -moz-box-shadow: -1px -1px 1px #ccc inset, 10px 10px 14px #664400;
			-webkit-box-shadow: -1px -1px 1px #ccc inset, 10px 10px 14px #664400;
			box-shadow: -1px -1px 1px #ccc inset, 10px 10px 14px #664400;
		}

	img.bigShadow	{
		    -moz-box-shadow: -1px -1px 1px #ccc inset, 10px 10px 14px #664400;
			-webkit-box-shadow: -1px -1px 1px #ccc inset, 10px 10px 14px #664400;
			box-shadow: -1px -1px 1px #ccc inset, 10px 10px 14px #664400;
		}

	div.blueShadow {
		    -moz-box-shadow: -1px -1px 1px #ccc inset, 10px 10px 14px #4444dd;
			-webkit-box-shadow: -1px -1px 1px #ccc inset, 10px 10px 14px #4444dd;
			box-shadow: -1px -1px 1px #ccc inset, 10px 10px 14px #4444dd;
		}

	div.orangeShadow {
		    -moz-box-shadow: -1px -1px 1px #ccc inset, 10px 10px 14px rgba(250,146,10,1);
			-webkit-box-shadow: -1px -1px 1px #ccc inset, 10px 10px 14px rgba(250,146,10,1);
			box-shadow: -1px -1px 1px #ccc inset, 10px 10px 14px rgba(250,146,10,1);
		}

	 .btn {
		border: 0px solid black;
		box-shadow: 0.01em .04em 0.01em 0.01em #aaa;
		background-image: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.82), hsla(206, 100%, 97%, 0.8) );
		font-family: 'Roboto', "Helvetica Neue", Helvetica, sans-serif !important;
		color: gray;
		padding: 11px 9px 11px;
		font-size: 4px;
		cursor: pointer;
		border-radius: 1px;
	 }

	 .default {
		border-color: #e7e7e7;
		color: gray;
	 }

	 .default:hover {
		background-image: linear-gradient( to bottom, hsla(206, 50%, 95%, 0.82), hsla(206, 80%, 97%, 0.8) );
	 }


	 input#autocomplete[type=text],input#autocompleteErweitert[type=text] {
		width: 300px;
		border: none;
		font-size: 16px;
		font-family: 'Roboto', "Helvetica Neue", Helvetica, sans-serif;
		color: gray;
		background-color: white;
		z-index: 323;
		background-image: url('../tecImg/searchicon2.png'), linear-gradient( to right, hsla(200, 10%, 95%, 0.72), hsla(206, 100%, 97%, 1) );
		background-position: 10px 10px, center;
		background-repeat: no-repeat, round;
		background-blend-mode: normal;
		padding: 12px 20px 12px 40px;
		box-shadow: 0.01em .04em 0.01em 0.01em #aaa;
	 }

	 input#replaceIt[type=text] {
		width: 300px;
		border: none;
		font-size: 16px;
		font-family: 'Roboto', "Helvetica Neue", Helvetica, sans-serif;
		color: gray;
		background-color: white;
		z-index: 323;
		background-image: url('../tecImg/find-and-replace-24.png'), linear-gradient( to right, hsla(200, 10%, 95%, 0.72), hsla(206, 100%, 97%, 1) );
		background-position: 10px 10px, center;
		background-repeat: no-repeat, round;
		background-blend-mode: normal;
		padding: 12px 20px 12px 40px;
		box-shadow: 0.01em .04em 0.01em 0.01em #aaa;
	 }

	 #result_block {

		 position:absolute;
		 top: 100px;
		 left:100px;
		 padding: 10px;
		 font-family: 'Arsenal', 'sans-serif';
		 border: 1px solid lightgray;
		 min-width: 300px;
		 min-height: 300px;
		 background-color: white;
		 background-image: linear-gradient( to bottom, hsla(200, 100%, 50%, 0.07), hsla(200, 100%, 50%, 0.2) );
		 z-index: 500;
	 }


	 /*************************
	 #dropboxButtonContainer { position:fixed; top:280px; left: 25px; z-index: 319; } ***/

	 #dropboxChooserbutton {
		width: 20px;
	 }

	 #placeForFilename { position:fixed;  top:0px; left: 0px; z-index: 319; }

	 #placeForFilename:after {
		display: inline-block;
		content: '"' attr(actfilename) '"';
		font-family: 'Tangerine';
		font-size: 2.4em;
		color: #c6c6d8;
		position: fixed;
		left:600px;
		top: 63px;

	  }


	 #slider { position:fixed; width: 50px; top:180px; left: 30px; z-index: 319; }

	 #slider .ui-state-default { padding:2px; }

	 #custom-handle {
		width: 2em;
		height: 1.4em;
		top: 50%;
		margin-top: -.8em;
		text-align: center;
		font-size: 0.7em;
		line-height: 1.6em;
		z-index: 320;
	  }



	 .ui-sortable-placeholder {
		 height: 60px !important;
		 visibility: visible !important;
		 margin: 5 5 -10px 5;
		 padding: 4px;
		 background-image: url("../tecImg/hintergrund/holz2.png");
     }

	 .mylinklist {
		line-height: 150%;
	}

	 #stateOfSuccessionMessage {
		position:absolute;
		top:10px;
		left: 80px;
		font-size: 12px;
		border: 0.5px solid lightgray;
		color: gray;
		margin: 2px;
	  padding: 7px;
		margin-left: 0px;
		/* z-index: 20; */
	}

	.normalBackground { background: white; }

	.backgroundCoral { background: #fff5f5; }

	#stateOfSuccInfo, #stateOfSuccInfoAtSortable {
		position:relative;
		width: 12px;
	}


	#BigEditor { position: fixed; top: 60px; left: 302px; z-index: 3; overscroll-behavior: contain; }
	 /* for 'width': see at code: draggable_weitereFunkt, changeEditorSkin()  */


	div.tox-fullscreen {
		margin-top: 39px;
		/*height: 94%;*/
	}

   #dialogFootNote { z-index:1300 !important; }

  #textmobil { border:1px solid white; width:600px; min-height:300px; max-height:1200px; color: white; font-size:1em; padding: 6px;
     z-index: 2;
     background-image: url("../tecImg/kork.jpg");
  }

	 .posSpecial { left:940px; top:208px; }

	 .posSpecialNearAccordion { left:380px; top:208px; }

	 .a_bit_smaller {
 		 -webkit-transform:  translate(200px, -200px) scale(0.4);
		 transform: translate(200px, -200px) scale(0.4);
	 }

	 #textmobil .ui-sortable-placeholder {

		background-image: url("../tecImg/korkdark.png");
     	z-index: auto;
   }

   	#pinwallArrowLeft, #pinwallArrowRight {
		position:relative;
		top:0px;
		left:12px;
		width: 68px;
		cursor:pointer;
	}

	#zoomLupe {
			position:relative;
			top:0px;
			left:0px;
			width: 100px;
			cursor:pointer;
	}

	#myZoomDiv { position:relative;
			top: 208px;
			left: 580px;
			width: 1px;
			height: 1px;
		}

	/****************/

  .closeItStatistics {
    position: relative;
    top: -540px;
    left: -263px;
  }

	#wordcount {
    border: 1px solid gray;
    font-size: 0.9em;
    min-width: 200px;
    max-width: 300px;
    height: 80%;
    padding: 10px;
    line-height: 140%;
  }

	#statistics {
     position:fixed;
     right: 300px;
     top: 100px;
     height:80%;
     min-width:200px;
     max-width: 300px;

	   z-index: 399;

	  -webkit-transform: translate(0px, -2000px);
	  -webkit-transition: -webkit-transform 1000ms cubic-bezier(0.465, 0, 0.0153, 1);

	  transform: translate(0px, -2000px);
	  transition: transform 1000ms cubic-bezier(0.465, 0, 0.0153, 1);

	  will-change: transform;
	}


	 #statistics.moveX {
		 -webkit-transform: translate(400px, 0%);
		 transform: translate(400px, 0%);
	   }

    #statistics.moveInX {
		 -webkit-transform: translate(0px, 0px);
		 transform: translate(0px, 0px);
	   }


	#StatisticstoLeftX, #StatisticstoRightX  { float:left; position:relative; right: 10px; top: 10px; width:20px; height:20px; background-color: white; border: 1px solid; color: lightgray; padding: 5px; border-radius:50%;}

	/****************/


 	#greatPinwand  .ui-sortable-placeholder {
		
		background-image: url("../tecImg/korkdark.png");
		display: inline-block;
  	} 

	 #greatPinwand { position:absolute;/*  float:left;  */top:50px; left:30px; border:1px solid white; width:46%; height:100%; /* overflow-y: auto;  */color: white; z-index:0; font-size:1em; padding: 6px; background-image: url("../tecImg/kork.jpg"); }

	 #verbindungenTextFeld1 { display:none; overflow-y: auto; border:1px solid white; left:940px; top:90px; width:291px; height:85px; color: white; font-size:0.7em; padding: 6px; background-image: url("../tecImg/kork.jpg");}

	 #verbindungenTextFeld2 { display:none; overflow-y: auto; border:1px solid white; left:1249px; top:90px; width:291px; height:85px; color: white; font-size:0.7em; padding: 6px; background-image: url("../tecImg/kork.jpg"); }

	 #verbindungenX { display:none; border:1px solid white; left:940px; top:40px; width:600px; height:30px; color: white; font-size:0.8em; padding: 6px; background-image: url("../tecImg/kork.jpg");}

	 .hinweis_To_FROM { color:blue; background:#fefeff; background-image: linear-gradient( to bottom, hsla(200, 100%, 50%, 0), hsla(200, 100%, 50%, 0.2) ); padding: 10px; border-radius: 6px; }



	 .shadow {
			-moz-box-shadow: 1px 3px 3px 3px #aa6644;
			-webkit-box-shadow:	1px 3px 3px 3px #aa6644;
			box-shadow: 1px 3px 3px 3px #aa6644; }

	 .verbindungen { height:20px; width: 1px; z-index: 99; position:relative; top: 0px; left: 5px; color: green;  }

	 .ausXTextArea, .ausXScribble, .dragHand { width: 14px; height: 14px; z-index: 99;  position:relative; top: 2px; left: 2px;  }

	 .copyTag { position:relative; height: 20px; top: -22px; right:-30px; }

	 .texticonsdiv { position:relative; top: 4px; left: 0px; background-color: white; padding:4px; width: 160px;
	 		-moz-box-shadow: -1px -1px 1px #ccc inset, 2px 2px 3px #898989;
			-webkit-box-shadow: -1px -1px 1px #ccc inset, 2px 2px 3px #898989;
			box-shadow: -1px -1px 1px #ccc inset, 2px 2px 3px #898989;}



	 .tArea h1 { font-size:12px;  }

	 .tArea { border:1px solid white; font-size:12px; background-color: white; color:#474747; width: 100%;
      height: 100%; max-height: 200px; overflow-x: hidden; overflow-y: auto; padding: 10px; display:block; cursor:move;
			-moz-box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #664400;
			-webkit-box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #664400;
			box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #664400;
    }

	 .tAreaWrite { color:#474747; font-size:1em; padding: 10px; margin-bottom: 14px; width:84%; max-width:84%;
			-moz-box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #664400;
			-webkit-box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #664400;
			box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #664400;
    }

	 .Scribble { z-index:99;  margin-bottom: 20px; max-width: 1100px; display:inline-block; }

	 .none { display:inline-block;
           margin-bottom: 60px;
           margin-right: 30px;
           max-height: 200px;
           max-width: 500px;
           min-width: 200px;
           min-height: 100px;
           z-index: 441;
        }


 	 .smaller {
		 -webkit-transform: translate(1200px, -200px) scale(0.3);
		 transform: translate(1200px, -200px) scale(0.3);
	 }



	 .group { font-size:0.7em; }

	 .PosClass, .PosClassFloat  {
			background-color: #f4f4f4;
		}

	.light { color: #282828;  }

	.dark { color: #f9f9f9; }

	.yellowBorder { border: 2px solid yellow; }

	.redBorder { border: 2px solid red; }

	.blueBorder { border: 2px solid blue; }

	.normalShadow {
			border: 2px solid transparent;
			-moz-box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2);
			-webkit-box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2);
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	}




	#draggablex {  font-size:0.5em;
			-moz-box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #898989;
			-webkit-box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #898989;
			box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #898989;
		}



/* 	.meineLupe  {
		margin:1px;
		padding-left: 1px;
		width:12px;
	}


	div.pidtrack .tools {
		width: 60px;
		height: 20px;
		display:block;

	} */

	div.pidtrack .tools {
		position:relative;
		top:0px;
		left:50px;
		width: 0px;
		height: 0px;
	}

	div.pidtrack .visibleTools  {
		position:relative;
		top:0px;
		left:50px;
		width: 0px;
		height: 0px;

	}

	div.scaleElemsSMALL .meineLupe  {
		position:relative;
		top:0px;
		left:0px;
		width:30px;
	}

	div.scaleElemsSMALL .myRemovalSign {
		position:relative;
		top:20px;
		left: 11px;
		width: 12px;
		padding: 4px;
	}


	div.GreaterClass .meineLupe  {
		position:relative;
		top:0px;
		left:148px;
		width:30px;
	}

	div.GreaterClass .myRemovalSign {
		position:relative;
		left: 149px;
		padding: 6px;
	}

	div.ChangeClass .meineLupe  {
		position:relative;
		top:0px;
		left:30px;
		width:30px;
	}

	div.ChangeClass .myRemovalSign {
		position:relative;
		top: 42px;
		left: 36px;
		padding: 4px;
	}


	.myNotice {
		position:relative;
		padding: 1px;
		cursor:pointer;
	}

	.myNoticeAtTextArea {
		position:relative;
		top:5px;
		left:5px;
		width: 18px;
		cursor:pointer;
	}


	div.scaleElemsSMALL .myNotice {
		top: 56px;
		left: -53px;
		width: 14px;
		height: 20px;
	}

	div.ChangeClass .myNotice {
		top: 81px;
		left: -56px;
		width: 18px;
		height: 25px;
	}

	div.GreaterClass .myNotice {
		top: 384px;
		left: -61px;
		width: 18px;
		height: 25px;
	}


	.textbeginn { overflow-x: hidden; overflow-y: hidden;}


	div.scaleElemsSMALL:hover, div.ChangeClass:hover { overflow-x: visible; overflow-y: visible; }

	div.scaleElemsSMALL .Textstart{ overflow-x: hidden; overflow-y: hidden;}


 	#fragment-13 div.pidtrack:hover { cursor: default;/*  overflow-x: hidden; overflow-y: hidden; */}

	#cloneElem .textbeginn { overflow-x: visible; overflow-y: visible;}

	#cloneElem div.pidtrack:hover, #cloneElem .myNotice:hover { cursor: default; }

	div.clone { font-size: 1.6em; }

	#tab_content { max-width: 90%; }

	.tools:hover {
		cursor:pointer;
	}



	div.pidtrack.GreaterClass .tools {
		left:60px;
	}

	.removalOpac { /* sign of the removal of a chapter from download */
		opacity: 0.6;
	}

	 sup.footnote {

		 margin-left: -0.4em;
		 cursor: default;
	 }

	 .hiliteFootNote {
		 color:red;
		 font-weight:bold;
	 }

	 #accordion .colorRed {
     position:relative;top:0px; left:0px;
     color:red;
     font-weight:bold;
		 padding: 2px 2px 2px 2px; border: 1px solid gray; background-color:#efefef; 
		 border-radius:50%;
   }

	 ol.orderedList li {  /* Annotations */
		margin-top: 1.4em;
		font-size: 0.9em;
		line-height: 120%;
	 }

   ol.orderedList p {
 	   margin: 4px;
     line-height: 100%;
   }

	hr.anmerkHR {
		margin-top: 30px;
	}

	div#page hr.anmerkHR {
		margin-top: 80px;
	}

	.linkText {
		margin: 0px;
	}

	/* #HTMLToSideViewID a, */

	div.pidtrack > a, .InhaltContainer a, .Text a, #pagetext a, .Textstart a, .mylinklist a, .ui-dialog-content a, .ui-tabs-panel a  { font-family: 'Verdana', 'sans-serif'; background-color: #cce6ff; text-decoration:none; cursor:pointer;}
	
	#fragment-16 .ui-tabs-panel a { font-family: 'Verdana', 'sans-serif'; background-color:#78a2ca;/* geändert am 24.12.2020: #cce6ff;*/ text-decoration:none; cursor:pointer;}
	
	div.pidtrack > a:hover, #HTMLToSideViewID a:hover, .InhaltContainer a:hover, .Text a:hover, #pagetext a:hover, .Textstart a:hover, .mylinklist a:hover, .ui-dialog-content a:hover, .ui-tabs-panel a:hover { background-color: #ffebcc; opacity: 1;}

	#HTMLToSideViewID ul.mylinklist a.linkInText, a.linkInText {
		background-color: lightgreen;
	}

	div.pidtrack > a { font-size: 1em; padding: 0.2em; }

	.PosClass { position: absolute; }

	.PosClassFloat { float: left; }

	.PosFixed { position:fixed; z-index: 100; }

	.PosClassAbsolute { position: absolute; }

  /* li { margin: inherit; } */

	.deeperShadow {
		-moz-box-shadow: 5px 5px 8px #898989;
		-webkit-box-shadow: 5px 5px 8px #898989;
		box-shadow: 5px 5px 8px #898989;
	}



	.WideClass {  font-size:0.6em;  overflow-x: hidden; overflow-y: hidden;  width: 120px; height: 200px; padding: 6px; margin: 2px; border-radius: 1px; }

	.ChangeClass {  font-size:0.6em;  overflow-y: hidden; overflow-x: hidden; width: 80px; height: 100px; padding: 6px; margin: 6px;  border-radius: 2px; cursor: move;  }


    .GreaterClass {  width: 240px; height: 400px; padding: 14px; margin: 6px; font-size: 0.8em; cursor: move; overflow-x: hidden; overflow-y: auto; border-radius: 4px; z-index:99;
		-webkit-transition: width 0.4s, height 0.4s ease-in-out;
		transition: width 0.4s, height 0.4s ease-in-out;
	}


	.scaleElemsSMALL{ width: 60px; height: 75px;  padding: 2px; margin: 8px; font-size: 0.5em; overflow-x: hidden; overflow-y: hidden; border-radius: 1px;
	}

	#draggablex, .cursorIsMove { cursor: move; }

	.cursorIsLupe { cursor: zoom-in; }

	.Abteilungzxz { font-family: Verdana,'sans-serif'; font-size:0.4em; overflow-y: hidden; width: 120px; z-index: 220; }

	div.Abteilungzxz:hover { overflow-y:auto; }


	.opac { opacity: 0.4; }
	.opac_02 { opacity: 0.2; }

    #modul{ width:20px; height:20px; margin:4px; }

    #myWahlToMove { width: 20px;}

	#myWahlToMove, aside {  border: 1px solid blue; box-shadow: 1px 1px 3px 0; padding: 6px; background-color: #fff; border-radius: 3px;}


	#PageMenue { position: fixed; right: 10px; top:62px; width: 40px; z-index: 299; }

	#PageMenue .button { margin-bottom: 5px; padding: 4px; }


	button.GroupIconImg, button.GroupIcon, button.ideas_GroupIcon, button.books_GroupIcon { width:30px; height:30px; margin:2px 0px 0px 6px; font-size: 0.8em; border-radius:50%}


	.tooltipMenueContainer {
	  position: relative;
	  display: block;
	}

	#community_ideas_books_Table { display:none; position:fixed; top: 2px; right:40px; z-index:399; }

	.tooltipMenueContainer:hover #community_ideas_books_Table { display:block; }

	#community_ideas_books_Table td  { border:0.5px solid blue; background: white; }

	#table_click_community, #table_click_ideas, #table_click_books { display: block; width:24px; padding: 3px; }



	#effect {
		position:fixed; left: 50%; top: 35%;
		border: 1px solid blue;
		padding: 30px;
		width: 120px;
		height: 250px;
		font-family: Verdana;
		font-size:0.7em;
		border-radius: 3px;
		overflow: hidden;
		z-index: 210;
	}

	#delText p {
		color: gray;
	    font-size:10px;
		padding: 8px;
		margin: 30px 10px 20px 10px;
	}

	#undoDelete {
		font-weight: bold;
		padding: 12px;
		border: 0.5px solid lightgray;
		margin: 20px 10px 20px 10px;
		width: 70px;
		cursor:pointer;
	}


  .ui-dialog-content {
  		padding: 1em !important;
  		line-height: 130% !important;
  	}


	 .SearchForNotice {
		 border: 2px solid lime;
	 }



	#messageVIS, #messageVISDelete, #ideas_message, #books_message { position:fixed; right: 140px; border: 1px solid #000; padding: 15px; background: #8e9ed7; font-size:0.7em; color: #fff; width: 150px; z-index: 210; opacity: 1;}

	#UndoContentChangeMessage, #messageDoubleClick, #messageAbteilung1, #messageEscape  { position:fixed; left: 340px; border: 1px solid #000; padding: 15px; background: #8e9ed7; font-size:0.7em; color: #fff; width: 150px; z-index: 210; opacity: 1;}

	#ideas_message, #books_message, #UndoContentChangeMessage, #messageDoubleClick, #messageEscape { top: 200px; }

  #messageDoubleClick img { padding: 4px; }

	#messageAbteilung1 { top: 60px; }

	#message, #messageTextOverflow  { position:fixed; top:30px; right: 180px; border: 1px solid #000; padding: 15px; background: #8e9ed7; font-size:0.7em; color: #fff; width: 150px; z-index: 999; opacity: 1;}



	#messageVIS, #messageVISDelete { top: 300px; }

	#messageVIS_CLICK_ACTION { position:fixed; left: -280px; top: 20%; border: 1px solid #000; padding: 25px; background: #8e9ed7; font-size:1em; color: #ffffff; width: 300px; margin: 20px; z-index: 1210; opacity: 1;}


	div.themessage {

	  -webkit-transform: translate(-300px, 0px);
	  -webkit-transition: -webkit-transform 1000ms cubic-bezier(0.465, 0, 0.0153, 1);

	  transform: translate(-300px, 0px);
	  transition: transform 1000ms cubic-bezier(0.465, 0, 0.0153, 1);

	  will-change: transform;
	}

	.themessage.move {
		 -webkit-transform: translate(800px, 0px);
		 transform: translate(800px, 0px);
	   }

    .themessage.moveIn {
		 -webkit-transform: translate(0px, 0px) scale(0.8);
		 transform: translate(0px, 0px) scale(0.8);
	   }


	/******* jsDiff ********/


	#myDiffTable table {
		position: relative;
		top: 10px;
		width: 100%;
		text-align: center;
	}
	#myDiffTable td {
		text-align: center;
		padding: 3px 4px;
		border: 1px solid transparent;
		vertical-align: top;
		font-size: 12px;
		white-space: pre-wrap;
	}

	#myDiffTable td.middle {
		text-align: center;
		width: 16%;
	}

	#myDiffTable .match1 {
		width: 42%;
		background-color: #dce8db;
		padding: 20px;
		vertical-align: middle;
		text-align: center;
		border: 0.1pt solid #efefef;
		border-style: outset;
	}

	#myDiffTable .match0 {
		width: 16%;
		text-align: center;
		vertical-align: middle;
		background-color: #f0f7ef;
		font-family: 'Verdana';
		font-size: 1.1em;
		letter-spacing: 0.1em;
		line-height: 120%;
		color: white;
		text-shadow: 2px 2px 4px #000000;
		position: relative;
	}

	#myDiffTable .noMatch {
		width: 42%;
		background-color:  #f5e7d2;
		padding: 8px;
		vertical-align: middle;
		text-align: center;
		border: 0.1pt solid #efefef;
		border-style: outset;
	}


	/***************/

	#InhaltContainer {
		
		height: 80%;
	}


	#InhaltTextBereich { 
	
		position: relative; 
		border: 1px solid #000; 
		padding: 40px; 
		font-size: 11pt; 
		font-family: Verdana,'sans-serif'; 
		color: #484848; 
		background-color: #fff; 
		width: 700px; 
		height:600px; 
		z-index: 199; 
		overflow-y: auto;
	}


	#Inhalt { position:fixed; left: 200px; top: 50px; max-height:80%;

	  z-index: 401;

	  -webkit-transform: translate(0px, -2000px);
	  -webkit-transition: -webkit-transform 1000ms cubic-bezier(0.465, 0, 0.0153, 1);

	  transform: translate(0px, -2000px);
	  transition: transform 1000ms cubic-bezier(0.465, 0, 0.0153, 1);

	  will-change: transform;
	}


	#Inhalt.moveX {
		 -webkit-transform: translate(-960px, 0%);
		 transform: translate(-960px, 0%);
	   }

    #Inhalt.moveInX {
		 -webkit-transform: translate(0px, 0px);
		 transform: translate(0px, 0px);
	   }

	#InhAusX  { float:right; position:relative; left: 45px; top: -680px; width:20px; height:20px; background-color: white; border: 1px solid; color: lightgray; padding: 5px; border-radius:50%; }

	#InhtoLeftX, #InhtoRightX  { float:right; position:relative; left: 77px; top: -640px;width:20px; height:20px; background-color: white; border: 1px solid; color: lightgray; padding: 5px; border-radius:50%;}



	.ausX:hover , .NoticeAusX:hover, .ausXTextArea:hover, .ausXScribble:hover, .add:hover, .dragHand:hover, .button:hover, .hoverbutton:hover, .verkleinern:hover, img.pageArrows:hover, #historyArrow:hover {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
	}

	.TextIcon:hover, #community:hover,  #ideas_community:hover,  #books_community:hover, #hinzufueg:hover, .undoIcon:hover, #arrowUpDRAG:hover {
		-webkit-transform: scale(1.6);
		transform: scale(1.6);
		}


	.ausX, .NoticeAusX { float:right; z-index: 99;}

	.NoticeAusX { width:25px; height: 25px; }

	.button { padding: 5px; }

	.wasteNormal {  border: 1px solid; color: white; padding: 5px; border-radius:50%; }
	.wastealert { border: 3px dotted; color: #bf4053; padding: 12px; border-radius:50%; }
	#waste {  width: 18px; height: 18px; }


	#trash { 	position:fixed;
				width: 550px;
				height: 750px;
				margin: 5em 3em;
				background-image: url("../tecImg/trash_bins.svg");
				background-repeat: no-repeat;
				background-position: center;
				opacity:0.1;
				z-index: 0;
			}


	.tooltip { font-size: 10px; }



	/************** .Textstart is 'Übersicht' (Draggableexperim) and 'Sortieren' (Sortable) ******************/

	.Textstart img { padding: 6px; margin: 6px; max-width: 8em; height: auto; float:left; border: 1px solid lightgray; }

  .Textstart img.urlImg {
		max-width: 8em;
    height: auto;
	}

    .Textstart table, #InhaltTextBereich table {
      border: none;
    }

    .Textstart td, #InhaltTextBereich td {
        border-bottom: 0.2px solid lightgray;
    }
	/************** .Text is Accordion ******************/

	.Text img { padding: 2px; margin: 2px; max-width: 8em; height: auto; }

  /* .Text img.urlImg {
		max-width: 8em;
    height: auto;
	} */

  .Text table {
      border: none;
    }

  .Text td {
      border-bottom: 0.2px solid lightgray;
    }

	#fragment-2 div.Abteilungywy h3 { cursor: pointer; }

 	#fragment-2 div.Abteilungywy:after {
			content: attr(title);
			color: gray;
			position: relative;
			top: -10px;
			left: 18px;
	}

	.topolNormal:after {
		display: inline-block;
		content: 'Normal';
		font-family: 'Roboto', "Helvetica Neue", Helvetica, sans-serif;
		font-size: 1.4em;
		color: gray;
		position: relative;
		top: 0px;
		left: 5px;
	}
	
	.topolSmall:after {
		display: inline-block;
		content: 'Klein';
		font-family: 'Roboto', "Helvetica Neue", Helvetica, sans-serif;
		font-size: 1.4em;
		color: gray;
		position: relative;
		top: 0px;
		left: 5px;
	}

	#InhaltTextBereich img.showThatNetworkTopology {  padding: 6px; margin: 6px; max-width:400px; height: auto; }	

	.myTopologyView { width: 720px; }

	.showThatNetworkTopology, .deleteNetworkTopology { cursor: pointer; }

	.deleteNetworkTopology { float:right; }

	#InhaltTextBereich img, #InhaltTextBereich figure.image { padding: 6px; margin: 6px; max-width: 14em; height: auto; }

 	#InhaltTextBereich img.urlImg {
		max-width: 14em;
    	height: auto;
	}


	 #myWahlToMove img { padding: 4px; }

   textarea { padding: 10px; border-radius: 2px; z-index: 199; }

   .initParent { display: none; }

   #parent {
  	float:left;
      background-color: #efefef;
  	/* overflow-x: hidden; */
  	z-index:220;
  }


  .positionable {
     position:absolute;
	   z-index: 220;
  }

/******************************************/

	#HeadlineContainer {
		width: 80%;
		color: #454545;
	}

	#StatusContainer {
		font-size:0.7em;
		color: gray;
	}

   #myTextAreaToMove {
	   top: 50px;
		max-width: 500px;
		min-height: 300px;
		width: 80%;
		height: 70%;
		font-size:1em;
		z-index: 999;
		opacity: 0.95;
  }

	#myTextAreaToMove:focus {
		background: #FFC;
	}


	/* Save Button */
	#TextForNoticeButton {
	  background-color: lightgray;
	  color: white;
	  padding: 14px 20px;
	  margin: 8px 0;
	  border: none;
	  cursor: pointer;
	  width: 140px;
	}


	/* back */
	#BackNoticeButton {
	  background-color: CornflowerBlue;
	  color: white;
	  padding: 14px 20px;
	  margin: 8px 0;
	  border: none;
	  cursor: pointer;
	  width: 100px;
	}


	/* Add a hover effect for buttons */
	#TextForNoticeButton:hover, #BackNoticeButton:hover, #ForwardNoticeButton:hover , #DeleteNoticePageButton:hover {
	  opacity: 0.8;
	}

	#ForwardNoticeButton {

	  background-color: lightgray;
	  color: white;
	  padding: 14px 20px;
	  margin: 8px 0;
	  border: none;
	  cursor: pointer;
	  width: 100px;
	}

	#DeleteNoticePageButton {

	  background-color: #AF4C50;
	  color: white;
	  padding: 14px 20px;
	  margin: 8px 0;
	  border: none;
	  cursor: pointer;
	  width: 100px;
	}

	.noticeHeadline {
		font-family: Verdana, 'Courier New', Courier, monospace;
		font-variant: small-caps;
		font-size:15px;
		word-spacing: 0.2em;
		color: lightgray;
		position: relative;
	    left: 65%;
	    top: 300px;
	    -webkit-transform: rotate(-90deg);
	    -ms-transform: rotate(-90deg);
	    transform: rotate(-90deg);
	}

	/* The Modal (background) */
	.modal {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 9999; /* Sit on top */
	  left: 0px;
	  top: 0px;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	  padding-top: 20px;
	}


	#relax {
		width:100%;
		z-index: 9997;
		cursor: wait;
	}

	#loading:after {
	  display: inline-block;
	  content: 'Laden und einrichten...';
	  font-family: 'Roboto', "Helvetica Neue", Helvetica, sans-serif;
	  font-size: 5em;
	  color: white;
	  position: fixed;
	  width:800px;
      left: calc(50% - 400px);
      top: calc(50% - 100px);
	  text-shadow: 2px 2px gray;
	  z-index: 9998;
	}

	/* Modal Content/Box */
	#TextForNoticeContainer {
	  background-color: #fefefe;
	  padding: 16px;
	  margin: 5px auto; /* 15% from the top and centered */
	  border: 1px solid #888;
	  width: 40%; /* Could be more or less, depending on screen size */
	  height: 85%;
	}

  #xvis svg {
    position:relative;
    top:0px;
    left:0px;
  }

	#closeWordCloudCanvas {
		position:relative;
		top:20px;
		left:30px;
	}

	#closeWordCloudPanel {
		position:relative;
		top:-30px;
		left:30px;
	}

	/* The Close Button */
	.close, #closeWordCloudPanel, #closeWordCloudCanvas {
	  /* Position it in the top right corner outside of the modal */
	  float:right;
	  color: #000;
	  font-size: 45px;
	  font-weight: bold;
	  margin: 0px 14px 0px 0px;
	}

	/* Close button on hover */
	.close:hover,
	.close:focus,
	#closeWordCloudPanel:hover,
	#closeWordCloudPanel:focus,
	#closeWordCloudCanvas:hover,
	#closeWordCloudCanvas:focus {
	  color: red;
	  cursor: pointer;
	}
/*********************************************/

  #innertabs, #ideas_innertabs, #books_innertabs  { background-color: #fcfcfc; /* height: 800px; overflow-y:scroll; */}

  #innertabs > .ui-tabs-anchor, #ideas_innertabs > .ui-tabs-anchor, #books_innertabs > .ui-tabs-anchor { font-size:0.6em; width:330px; }

  #innertabs  .ui-tabs-anchor, #ideas_innertabs  .ui-tabs-anchor, #books_innertabs  .ui-tabs-anchor { font-size:0.8em;}

  #tabs { background-image: url("../tecImg/hintergrund/whitebricks2.png");  background-repeat: round; }

  #tabs { position:absolute; top: 30px; left: 0px; width: 100%; height: 8000px; }

  #tabs li .ui-icon-close { float:left; margin: 0.4em 0.2em 0 0; cursor: pointer; }

  #tabsx a { font-size: 1em; font-family: 'Arsenal','sans-serif' }

   a#ui-id-8, a#ui-id-10, a#ui-id-12, a#ui-id-18 { padding: 2px !important; font-size: 0.78em !important; font-family: 'Arsenal','sans-serif'; }

 /************** Topologie ************/

 
 #fragment-12 #slidersAtTopology { 
	position:absolute;     
	top: 100px;
	left: 40px; 
	width: 100px;

 }

 #fragment-12 #sliderForFontSize, #fragment-12 #sliderForGravity, #fragment-12 #sliderForX, #fragment-12 #sliderForY  { 
	margin: 16px;
    padding: 2px;
    width: 20px;
	height: 120px;
	z-index: 319; 
}

#fragment-12 #sliderForFontSize:after {
	  content: 'Labelgröße';
	  display:inline-block;
	  font-family: 'Verdana';
	  font-size: 1em;
	  color: gray;
	  position: absolute;
	  left: 10px;
	  top: 44px;
	  -webkit-transform: rotate(-90deg);
	  -ms-transform: rotate(-90deg);
	  transform: rotate(-90deg);
}

#fragment-12 #sliderForGravity:after {
	  content: 'Abstand zueinander';
	  display:inline-block;

	  font-family: 'Verdana';
	  font-size: 1em;
	  color: gray;
	  position: absolute;
	  left: 22px;
	  top: 34px;	  
	  -webkit-transform: rotate(-90deg);
	  -ms-transform: rotate(-90deg);
	  transform: rotate(-90deg);
}

#fragment-12 #sliderForFontSize .ui-state-default, #fragment-12 #sliderForGravity .ui-state-default  { padding:2px; }

#fragment-12 #custom-handleForFontSize,  #fragment-12 #custom-handleForGravity,  #fragment-12 #custom-handleX,  #fragment-12 #custom-handleForY {
   width: 2.8em;
   height: 1.4em;
   left: -6px;
   margin-top: -.8em;
   text-align: center;
   font-size: 0.7em;
   line-height: 1.6em;
   z-index: 320;
  }

  /******** Theme ********/

  #fragment-14 li { margin-top: 8px; }

  #fragment-14 {font-size: 1.3em; font-family: 'Amatic SC'; }

  #fragment-14 #hGrund fieldset {
        position: relative;
        margin: 2em 0;
        padding: 1.8em 0;
        border: 1px solid lightgray;
    }


  #fragment-14 #hGrund label {
        float:left;
        display: block;
        left: 0;
        top: 0;
        width: 7em;
		    height: 7em;
        padding: .5em;
		    margin: 20px;
        background-color: transparent;
        border: 1px solid lightgray;
        text-align: center;
    }

   #fragment-14 #hGrund  :checked + label {
		border: 1px solid #c32e04;
		-moz-box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #898989;
		-webkit-box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #898989;
		box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #898989;
	}



   #fragment-14  label[for="whitebricks2"] {
         background-image: url("../tecImg/hintergrund/whitebricks2.png");  background-size: cover;  background-repeat: no-repeat;
    }
   #fragment-14  label[for="school1"] {
        background-image: url("../tecImg/hintergrund/school1.png");  background-size: cover;  background-repeat: no-repeat;
    }
   #fragment-14  label[for="school2"] {
         background-image: url("../tecImg/hintergrund/school2.png");  background-size: cover;  background-repeat: no-repeat;
    }
   #fragment-14  label[for="school3"] {
         background-image: url("../tecImg/hintergrund/school3.png"); background-size: cover;  background-repeat: no-repeat;
    }
   #fragment-14  label[for="holz1"] {
		background-image: url("../tecImg/hintergrund/holz1.png"); background-size: cover;  background-repeat: no-repeat;
	}
	#fragment-14  label[for="holz2"] {
		background-image: url("../tecImg/hintergrund/holz2.png"); background-size: cover;  background-repeat: no-repeat;
	}
	#fragment-14  label[for="photography"] {
		background-image: url("../tecImg/hintergrund/photography.png"); background-size: cover;  background-repeat: no-repeat;
	}
	#fragment-14  label[for="white"] {
         background-image: url("../tecImg/hintergrund/white.png");  background-size: cover;  background-repeat: no-repeat;
    }
	#fragment-14  label[for="concrete_seamless"] {
		background-image: url("../tecImg/hintergrund/concrete_seamless.png");  background-size: cover;  background-repeat: no-repeat;
	}
	#fragment-14  label[for="geometry2"] {
		background-image: url("../tecImg/hintergrund/geometry2.png");   background-size: cover;  background-repeat: no-repeat;
	}
	#fragment-14  label[for="hell02"] {
		background-image: url("../tecImg/hintergrund/hell02.png");  background-size: cover;  background-repeat: no-repeat; /*  background-repeat: round; */
	}
	#fragment-14  label[for="network_hell"] {
		background-image: url("../tecImg/hintergrund/network_hell.png");   background-size: contain; background-repeat: no-repeat;
	}
	#fragment-14  label[for="bluewhite"] {
		background-image: url("../tecImg/hintergrund/bluewhite.png");   background-size: contain; background-repeat: no-repeat;
	}
	#fragment-14  label[for="transparent"] {
		background: "#fafafa";
	}


   #fragment-14 #hGrund input {
        display: none;
    }

	#fragment-14 .widget label {
        float:left;
        display: block;
		    width: 160px;
		    height: 30px;
		    margin: 20px;
    }

	#fragment-14 .widget2 label {
      float:left;
      display: block;
		  width: 260px;
		  height: 30px;
		  margin: 20px;
		  margin-bottom: 160px;
    }


   #fragment-14 button {
        display: block;
		      padding: 10px;
    }


	#fragment-14 .widget3 #colorsFromList {
	    float:left;
      display: block;
	}
	#fragment-14 .mycolors { float:left; width: 100px; height: 100px; margin: 10px; cursor:move;}

  /*********************colorpicker input autocomplete ****************************/


	#fragment-14 #entercolorDIV {
	  /*the container must be positioned relative:*/
	  position: relative;
	  display: inline-block;
	}
	#fragment-14 input {
	  border: 1px solid transparent;
	  background-color: #f1f1f1;
	  padding: 10px;
	  font-size: 24px;

	}
	#fragment-14 input[type=text] {
	  background-color: #f1f1f1;
	  width: 80%;
	  border: 1px solid gray;

	}

	#fragment-14 .autocomplete-items {
	  position: absolute;
	  border: 1px solid #d4d4d4;
	  border-bottom: none;
	  border-top: none;
	  z-index: 99;
	  width: 80%;
	  /*position the autocomplete items to be the same width as the container:*/
	  top: 60%;
	  left: 20px;
	  right: 0;
	}
	#fragment-14 .autocomplete-items div {
	  padding: 10px;
	  cursor: pointer;
	  background-color: #fff;
	  border-bottom: 1px solid #d4d4d4;
	}
	#fragment-14 .autocomplete-items div:hover {
	  /*when hovering an item:*/
	  background-color: #e9e9e9;
	}
	#fragment-14 .autocomplete-active {
	  /*when navigating through the items using the arrow keys:*/
	  background-color: DodgerBlue !important;
	  color: #ffffff;
	}


  /************** Tab 'Text' *****************/

  #noSequenceChoosen {
		  display:block;
		  font-family:'Verdana';
		  font-size: 1.8em;
		  letter-spacing: 0.1em;
		  line-height: 180%;
		  color: white;
		  text-shadow: 2px 2px 4px #000000;
		  position: relative;
		  left:100px;
		  top: 0px;
		  -webkit-transform: rotate(-15deg);
		  -ms-transform: rotate(-15deg);
		  transform: rotate(-15deg);
	}

  .pageArrows { cursor: pointer; }

  .myTitleOfAbt { word-spacing: 0.2em; color: #aaa; }

  @media screen {

	  	#fragment-5 #sideView  {
			position:fixed;
			top: 99px;
		}

	    #fragment-5 #sideView #HTMLToSideViewID {

			background: #fff;
			position:absolute;
			/* top: -84px; */
			left: 1240px;
			width: 430px;
      		height: 800px;
			/* height: 900px; */
			font-family: 'Verdana';
			font-size: 0.4em;
			word-spacing: 0.1em;
			line-height: 160%;
			border: 1px solid lightgray;
			overflow-y: auto;
			z-index: 0;
		}

		#fragment-5 #sideView #startOfPage {
			height: 80px;
		}

		#fragment-5 #sideView .pagetext {
			color: #888888;
			width: 400px;
			margin-left: 10px;
		}

    #fragment-5 #sideView  ol.orderedList li {  /* Annotations */
 		margin-top: 1.4em;
 		font-size: 0.9em;
 		line-height: 120%;
 	 }


    #fragment-5 #sideView ol.orderedList p, #fragment-5 #sideView .literaturClass p {
  	  /* margin: 4px; */
      line-height: 100%;
    }

    #fragment-5 #sideView .literaturClass td {
  	  vertical-align: top;
    }

		#fragment-5 #sideView .bigDirectory {
			font-size: 1.2em;
		}

    #fragment-5 .headerLine { vertical-align:top; width: 60px; }

		#fragment-5 #sideView a.hrefHeader {
			font-size: 1.2em;
		}

    #fragment-5 #sideView td.bigDirHeader {
      max-width:340px;
    }

		#fragment-5 #sideView .chapterNumber, #fragment-5 #sideView .headL {
			margin-left: 10px;
		}

		#fragment-5 #sideView .headL {
			display: inline-block;
			background-color: #eee;
			cursor: pointer;
		}

		#fragment-5 #sideView .umbruch { height: 10px; }

		#fragment-5 #sideView img  {
			display: block;
      padding: 14px;
		}

		#fragment-5 #sideView .mylinklist {
			margin-left: 20px;
			font-size: 1.2em;
			width: 120px;
		}

    #fragment-5 #sideView figure figcaption {
      font-size: 1em;
      line-height: 200%;
    }

		/*********************************/


		#fragment-5 #page {

			position:absolute;
			top: 70px;
			left: 60px;
			width: 1200px;
			height: 8000px;
			font-family: 'Verdana';
			font-size: 0.9em;
			background-color: #fff;
			word-spacing: 0.1em;
			line-height: 160%;
			z-index: 0;
		}


		#fragment-5  .headerL {
			display: none;
			color: #888888;
			position:absolute;
			top: 180px;
			left: 200px;
			background-color: #eee;
			cursor: pointer;
		}

		#fragment-5 #pagetext {
			display: none;
			color: #888888;
			position:absolute;
			top: 280px;
			left: 200px;
			width: 900px;
			min-height: 1400px;
		}

    #fragment-5 #pagetext  ol.orderedList li {  /* Annotations */
 		margin-top: 1.4em;
 		font-size: 0.9em;
 		line-height: 140%;
 	 }

    #fragment-5 #pagetext ol.orderedList p, #fragment-5 #pagetext .literaturClass p {
  	  /* margin: 4px; */
      line-height: 100%;
    }

    #fragment-5 #pagetext .literaturClass td {
  	  vertical-align: top;
    }

		#fragment-5 .headerL.removed:after {
			  display:inline-block;
			  content: 'Entfernt';
			  font-family: 'Verdana';
			  font-size: 2em;
			  color: #e6e6e6;
			  position: absolute;
			  left: 220px;
			  top: 30px;
			  -webkit-transform: rotate(-45deg);
			  -ms-transform: rotate(-45deg);
			  transform: rotate(-45deg);
		}

		#fragment-5 #chapterNumber {
			position:absolute;
			font-size: 12px;
			left: 200px;
			top: 100px;
	    }

		#fragment-5 .sideArrows   {
			position: fixed;
			top: 200px;
			left: 80px;
	    }

		#fragment-5  #historyArrow {
			position:fixed;
			top: 110px;
			left:70px;
			padding:10px;
			cursor: pointer;
		}

		#fragment-5  #printButton, #printAllButton, #printAllButtonWithoutLinks, #ShowSideview, #HideSideview {
			color: lightgray;
			font-family: 'Arsenal', 'sans-serif';
			background-color: #fefefe;
			text-decoration:none;
			cursor:pointer;
			z-index:100;
		}



		#fragment-5  #downloadButton {
			position:relative;
			top: 3px;
			margin-left: 8px;
			width: 20px;
			z-index:100;
		}

		#fname-html {
			color: gray;
			text-align: right;
		}

		#fragment-5 input#fname-html {
			color: gray;
			position:relative;
			top: -13px;
			width: 170px;		
			z-index:100;
		}



		#fragment-5 #dotHTML {
			position:relative;
			top: -12px;
			color: lightgray;
			font-size: 14px;
			z-index:100;
		}


		#fragment-5  #pagetext .ui-wrapper {
			padding: 15px 22px 25px 10px;
			max-width: 900px;
			border: 1px solid lightgray;
		}

    #fragment-5  #pagetext .imgWrap {
      padding: 8px 10px 8px 6px;
      margin: 5px;
      border: 1px solid lightgray;
      width: fit-content;
    }

  }

	@media print {

  		#tabsx, .sideArrows, #historyArrow,  div.button-groupX,  button.buttonX,  div#rahmenX, #printButton,  #printAllButton, #printAllButtonWithoutLinks, #ShowSideview, #HideSideview, #downloadButton, #sideView, #HTMLToSideViewID, #buttonmenu { display:none; }

  		#fragment-5 #page {

  			position:absolute;
  			top: 70px;
  			left: 60px;
  			min-width: 900px;
  			min-height: 2000px;
  			font-family: 'Verdana';
  			font-size: 16px;
  			background-color: #fff;
  			word-spacing: 0.1em;
  			line-height: 160%;
  			z-index: 0;
  		}


  		#fragment-5  h3 {

  			color: #888888;
  			position:absolute;
  			top: 200px;
  			left: 100px;
  		}

  		#fragment-5 #pagetext {

  			color: #888888;
  			position:absolute;
  			top: 320px;
  			left: 100px;
  			width: 900px;
  			min-height: 1400px;
  		}

  		#fragment-5 #chapterNumber {
  			position:absolute;
  			font-size: 12px;
  			left: 100px;
  			top: 100px;
  	    }

  		a {
  			color: gray;
  			font-family: 'Verdana', 'sans-serif';
  			background-color: #fefefe;
  			text-decoration:none;
  		}

  		#fragment-5 img {
  			position:relative;
        display: inline-block;
        padding: 8px
  		}

    }

    #fragment-5 figure.image  {
			border: 1px solid lightgray;
			background: #fff;
      min-width: 20em;
		}

    #fragment-5  #sideView figure.image  {
      border: 1px solid lightgray;
      background: #fff;
    }

  	figure.align-left {
  		float: left;
  	}

  	figure.align-right {
  		float: right;
  	}

    figure {
      display: table;
      margin-inline-start: 3em;
      margin-inline-end: 3em;
    }

    #fragment-5 figure figcaption {
        font-size: 0.9em;
    }

    figure figcaption {
       float: none;
       color: #999;
       margin: .25rem;
       margin-left: auto;
       margin-right: auto;
       padding: .5rem;
       background-color: white; /* for Textelements and their diff colors, better view with background white. */
    }

  #gallery figure figcaption {
     background-color: transparent;
  }


   #fragment-5 #pagetext figure figcaption {
      float: none;
      color: #999;
      margin: .25rem;
      max-width: 20rem;
      min-width: 14rem;
      margin-left: auto;
      margin-right: auto;
      padding: .5rem;
    }

  #fragment-5 #sideView figure figcaption {
      float: none;
      color: #999;
      margin: .25rem;
      max-width: 25rem;
      margin-left: auto;
      margin-right: auto;
      padding: .5rem;
    }


  figure.image img {
      margin: 10px;
      display: block;
  }

  #fragment-5 img  {
    display: inline-block;
    padding: 4px 5px 5px 8px;
    margin: 5px;
  }

  .flexed {
    margin-left: 140px;
    margin-top: 70px;
    margin-right: 30px;
    width: 1020px;
    height: 26px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index:100;
    background-color: white;
    -webkit-transition:  0.4s ease-in-out;
    transition:  0.4s ease-in-out;
    font-size: 0.7em;
  }

  .flexitem {
    /* margin: auto; */
    z-index:100;
  }


  .sticky {
    position: fixed;
    margin-top: 36px;
    top: 0;
  }

  /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
  .sticky + #page {
    padding-top: 30px;
  }

  #thisselection {
  	position: relative;
      top: 0px;
      left: 0px;
      background-color: #fff;
      border-color: #ccc;
      border-radius: 3px;
      border-style: solid;
      border-width: 1px;
      box-shadow: none;
      box-sizing: border-box;
      color: #222f3e;
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
      font-size: 16px;
      line-height: 24px;
      margin: 0;
      outline: 0;
      padding: 5px 4.75px;
      resize: none;
      width: 100%;
  }




	#fragment-5 #page .mylinklist {
		position:fixed;
		top: 350px;
		left: 45px;
		font-size: 0.7em;
		width: 120px;
		overflow-y: auto;
	}

	#arrow {
		border-right:1px solid black;
		border-bottom:1px solid black;
		width:5px;
		height:5px;
		transform: rotate(-45deg);
		margin-top:20px;
	}

	hr.StartOfLinkList {

		margin-top: 30px;
	}

	ul.mylinklist li {
	  position: relative;
		padding-bottom: 8px;
	}

	ul.mylinklist {
	  list-style: none;
	}

	ul.mylinklist li:before{
	   content: '';
	   position: absolute;
	   border-right:2px solid black;
	   border-bottom:2px solid black;
	   width:5px;
	   height:5px;
	   top: calc(50% - 4px);
	   left: -20px;
	   transform: translateY(-50%) rotate(-45deg);
	}

	ul.mylinklist a.linkInText, a.linkInText {
		background-color: lightgreen;
	}


  /*******************************/

/*************  Persons-, Ideas-, Books- tabs: label as popup *********/
  #fragment-6 img, #fragment-8 img , #fragment-10 img   {
    display: inline-block;
    max-width: 8em;
    height: auto;
    padding:4px;
  }


 	#fragment-16 img, #fragment-15 img 	{
	 margin:10px; padding:5px;
	 border: 2px solid #c32e04;
		-moz-box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #898989;
		-webkit-box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #898989;
		box-shadow: -1px -1px 1px #ccc inset, 5px 5px 8px #898989;
	}

	#fragment-16 .icon { margin:1px; padding:0px; border:0px; }

	#fragment-16 p, #fragment-16 h1 { font-family: 'Roboto'; color: #fff;
		text-shadow: 0px 2px 3px #555; margin:10px; padding:10px; width: 650px;} 

	#fragment-16 p { font-size: 1.4em;  line-height: 130%; }

	#fragment-16 #tabs-3 li, #fragment-16 #tabs-3 ul, #fragment-16 #tabs-3 a { font-family: 'Amatic SC'; font-size: 24px; line-height: 150%; color: #f7f7f7; }

	#fragment-15 p, #fragment-15 h1 { font-family: 'Amatic SC'; font-size: 24px; line-height: 150%; }

    #fragment-16 .openTab5, #fragment-16 #openTab12 { cursor:pointer; text-decoration: underline; }

  /* #fragment-16 a { font-size:12px; } */

	#fragment-16 #tabs-1,	#fragment-16 #tabs-2,	#fragment-16 #tabs-3  li {  line-height: 150%;  }

  #fragment-16 .ui-tabs .ui-tabs-panel { background-color: #83868a; }

  #fragment-16 .einleitung {  color: #fff;
    text-shadow: 0px 2px 3px #555; width:80%;font-family:Roboto; margin:50px; margin-bottom:80px;}

	/******************** Optionen ******************/

	#fragment-15 p { font-size: 1.5em; }

	#fragment-15 #sliderForPageLength { width: 250px; left: 15px; z-index: 319; }

	#fragment-15 #sliderForPageLength .ui-state-default { padding:2px; }

	#fragment-15 #custom-handleForPageLength {
		width: 2.8em;
		height: 1.4em;
		top: 50%;
		margin-top: -.8em;
		text-align: center;
		font-size: 0.7em;
		line-height: 1.6em;
		z-index: 320;
	  }


	#fragment-15 #savePreferences {
	  background-color: CornflowerBlue;
	}

	#fragment-15 #deletePreferences {
	  background-color: #ff6666;
	}

	#fragment-15 #savePreferences, #deletePreferences {
	  top: 5px;
	  color: white;
	  margin: 8px;
	  border: none;
	  cursor: pointer;
	  width: 200px;
	  height: 80px;
	}

	#fragment-15 #savePreferences:hover, #deletePreferences:hover {
	  opacity: 0.8;
	}



 /*******************************/

	#mynetworkModel, #mynetworkModelSmall {
            width: 2000px;
            height:4000px;
    }

	 #ScaleOfTopology {
      position: absolute;
	  top: 10px;
	  left: 10px;
	  width: 250px;
	  height: 60px;
	  color:cornflowerblue;
	  font-family:'Verdana';
	  font-size: 20px;
	  padding: 26px;
	  z-index: 10;
	}
	
    /* #configModelSmall {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 500px;
      height: 500px;
      background: cadetblue;
      padding: 26px;
    }

    div.vis-configuration-wrapper {
      width: 500px;
    } */

 /*********************************/

	#fragment-17 #pageImpressum {

			position:absolute;
			top: 70px;
			left: 60px;
			min-width: 1200px;
			height: 5000px;
			font-family: 'Verdana';
			font-size: 16px;
			background-color: #fff;
			word-spacing: 0.1em;
			line-height: 180%;
			z-index: 0;
		}

	#fragment-17 #pagetextImpressum {

			color: #444444;
			position:absolute;
			top: 120px;
			left: 100px;
			width: 900px;

		}

 	#fragment-17  h2, #fragment-17 dt {
		   font-family: Verdana;
		   text-align: left;
		   color: #804000;
		   min-height: 30px;
		  }

	#fragment-17  dd { min-height: 40px; }

	#fragment-17  #comment {

		padding: 100px;
		position:absolute;
		top: 4200px;
		left: 100px;
	}


	

 /********************************/
  	#innerfragment-1:after {
		  display:inline-block;
		  content: 'Charaktere / Orte';
		  font-family: 'Tangerine';
		  font-size: 4em;
		  color: #e6e6e6;
		  position: fixed;
		  right: -60px;
		  top: 400px;
		  -webkit-transform: rotate(90deg);
		  -ms-transform: rotate(90deg);
		  transform: rotate(90deg);
	}


  .uebersichtTAB { font-size: 1.8em; }

  .ui-tabs-vertical { width:100%; }
  .ui-tabs-vertical > .ui-tabs-nav { font-size: 0.8em; padding: .2em .2em .2em .2em; float: left; width: 28em; }
  .ui-tabs-vertical > .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
  .ui-tabs-vertical > .ui-tabs-nav li a { display:block; }
  .ui-tabs-vertical > .ui-tabs-nav li.ui-tabs-active { padding-bottom: .1em ; padding-right: .1em; border-right-width: 1px; margin-bottom: 0.2em; }
  .ui-tabs-vertical > .ui-tabs-panel { padding: 1em; float:left; width: 60%;}

  .innerInnerTabs .ui-tabs-panel { padding: 1em; float:left; width: 98%;}


  .CharactEinleitungheader, .CharactEinleitung, .CharactEinleitungMerkmale, .CharactEinleitungNotizen, .CharactEinleitungInner { cursor: pointer; }
  .innerInnerTabs textarea { max-width: 500px; }

  .tabcontentCharacters { padding: 10px; margin: 20px; float: left; width: 80%; }

  .tabsCharacterInner { height:100%; width: 100%}

  #innerfragment-1 {  font-size: 0.7em; font-family: 'Arsenal','sans-serif'; margin-left:20px; }
  #innerfragment-1  a { padding:2px; margin-left:5px;  border: 0.2px solid #aaa;}
  .CharacterDiv { border:0.1px solid lightgray; padding: 5px; background-color:#fdfafa; }
  .CharacterDivOtherCharact { border:0.1px solid lightgray; padding: 15px; background-color:#fafafd; margin:5px; }
  .zurChrUebersicht {position:relative; top: 5px;}

  .ToAddToTextArea { font-size: 10px; font-family:Verdana;  padding: 4px; color:gray; }
  .ToAddToTextArea_OtherChars { font-size: 14px; font-family:Verdana;  padding: 4px; color:gray; }

 .clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}



/** ideas **/


	#ideas_innerfragment-1:after {
		  display:inline-block;
		  content: 'Ideen';
		  font-family: 'Tangerine';
		  font-size: 4em;
		  color: #e6e6e6;
		  position: fixed;
		  right: 40px;
		  top: 400px;
		  -webkit-transform: rotate(90deg);
		  -ms-transform: rotate(90deg);
		  transform: rotate(90deg);
	}

  .ideas_innerInnerTabs .ui-tabs-panel { padding: 1em; float:left; width: 98%;}


  .ideas_CharactEinleitungheader, .ideas_CharactEinleitung, .ideas_CharactEinleitungMerkmale, .ideas_CharactEinleitungNotizen, .ideas_CharactEinleitungInner { cursor: pointer; }
  .ideas_innerInnerTabs textarea { max-width: 500px; }

  .ideas_tabcontentCharacters { padding: 10px; margin: 20px; float: left; width: 80%; }

  .ideas_tabsCharacterInner { height:100%; width: 100%}

  #ideas_innerfragment-1 {  font-size: 0.7em; font-family: 'Arsenal','sans-serif'; margin-left:20px;}
  #ideas_innerfragment-1  a { padding:2px; margin-left:5px;  border: 0.2px solid #aaa;}
  .ideas_CharacterDiv { border:0.1px solid lightgray; padding: 5px; background-color:#fdfafa; }
  .ideas_CharacterDivOtherCharact { border:0.1px solid lightgray; padding: 15px; background-color:#fafafd; margin:5px; }
  .ideas_zurChrUebersicht {position:relative; top: 5px;}

  .ideas_ToAddToTextArea { font-size: 10px; font-family:Verdana;  padding: 4px; color:gray; }
  .ideas_ToAddToTextArea_OtherChars { font-size: 14px; font-family:Verdana;  padding: 4px; color:gray; }

/** ideas **/

/** books **/

	#books_innerfragment-1:after {
		  display:inline-block;
		  content: 'Bücher';
		  font-family: 'Tangerine';
		  font-size: 4em;
		  color: #e6e6e6;
		  position: fixed;
		  right: 20px;
		  top: 400px;
		  -webkit-transform: rotate(90deg);
		  -ms-transform: rotate(90deg);
		  transform: rotate(90deg);
	}

  .books_innerInnerTabs .ui-tabs-panel { padding: 1em; float:left; width: 98%;}


  .books_CharactEinleitungheader, .books_CharactEinleitung, .books_CharactEinleitungMerkmale, .books_CharactEinleitungNotizen, .books_CharactEinleitungInner { cursor: pointer; }
  .books_innerInnerTabs textarea { max-width: 500px; }

  .books_tabcontentCharacters { padding: 10px; margin: 20px; float: left; width: 80%; }

  .books_tabsCharacterInner { height:100%; width: 100%}

  #books_innerfragment-1 {  font-size: 0.7em; font-family: 'Arsenal','sans-serif'; margin-left:20px;}
  #books_innerfragment-1  a { padding:2px; margin-left:5px;  border: 0.2px solid #aaa;}
  .books_CharacterDiv { border:0.1px solid lightgray; padding: 5px; background-color:#fdfafa; }
  .books_CharacterDivOtherCharact { border:0.1px solid lightgray; padding: 15px; background-color:#fafafd; margin:5px; }
  .books_zurChrUebersicht {position:relative; top: 5px;}

  .books_ToAddToTextArea { font-size: 10px; font-family:Verdana;  padding: 4px; color:gray; }
  .books_ToAddToTextArea_OtherChars { font-size: 14px; font-family:Verdana;  padding: 4px; color:gray; }

/** books **/


#button-title {

	margin: 2px;
	padding: 7px;
	height: 120px;
}
 

#rahmenX {
		font-size: 10px;
		border: 0.5px solid lightgray;
		background: white;
		color: gray;
		margin: 2px;
	    padding: 7px;
		margin-left: 0px;
		z-index: 20;
}

#rahmenX.messageButtonsHover:after {
	  display:inline-block;
	  content: 'Schattiert: Alle Textelemente, die bewegt werden; Oranger Schatten: Bewegung bei Klick auf diesen Button ' "'" attr(button0) "'" '. Zusätzlich hat der Rahmen dieser Textelemente hier die Farbe dieses Zustandes: ' "'" attr(button0) "'" ;
	  font-family: 'Verdana';
	  font-size: 1.4em;
	  color: #bbb;
	  position: absolute;
	  width:380px;
	  right: 350px;
	  top: -35px;
	  text-shadow: 0 2px white;

}

#rahmenX.messageButtonsHoverFULL:after {
	  display:inline-block;
	  content: 'Schattiert: Alle Textelemente, die bewegt werden; Blau und orange schattiert: Bewegung bei Klick auf diesen Button (blauer Schatten: Bewegungen zwischen den Zuständen ' "'" attr(button1) "'" ' und ' "'" attr(button0) "'" ' werden nachgeholt); Oranger Schatten: nur die von diesem Button ' "'" attr(button0) "'" ' allein bewegten Elemente.';
	  font-family: 'Verdana';
	  font-size: 1.4em;
	  color: #bbb;
	  position: absolute;
	  width:380px;
	  right: 350px;
	  top: -50px;
	  text-shadow: 0 2px white;

}


#rahmenX.message:after {
	  display:inline-block;
	  content: 'Für das Verschieben von Textelementen klicken Sie bitte auf den letzten Button: (' "'" attr(button0) "'" ')';
	  font-family: 'Verdana';
	  font-size: 1.5em;
	  color: #bbb;
	  position: absolute;
	  width:400px;
	  right: 320px;
	  top: -20px;
	  text-shadow: 0 2px white;

}

#rahmenX.messageNoMoreButtons:after {
	  display:inline-block;
	  content: 'Maximale Anzahl von Zuständen (sieben) erreicht mit Button ' "'" attr(button0) "'" '. Ihre weiteren Änderungen können nicht mehr gespeichert werden.';
	  font-family: 'Verdana';
	  font-size: 1.5em;
	  color: #e76175;
	  position: absolute;
	  width:400px;
	  right: 320px;
	  top: -20px;
	  text-shadow: 0 2px white;

}

#rahmenX.messageDraggablex:after {
	  display:inline-block;
	  content: 'Für das Einfügen eines Abteilungstrenners klicken Sie bitte auf den letzten Button: (' "'" attr(button0) "'" ')';
	  font-family: 'Verdana';
	  font-size: 1.5em;
	  color: #bbb;
	  position: absolute;
	  width:400px;
	  right: 320px;
	  top: -20px;
	  text-shadow: 0 2px white;

}

button.buttonX, button.buttonXImg {

  
  padding: 0.5em 1.0em;
  margin-bottom: 1px;
  margin-left: 0px;
  margin-right: 1px;
  background: #EEE;
  border: none;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
  color: #222;
  font-family: sans-serif;
  font-size: 1em;
  text-shadow: 0 1px white;
  cursor: pointer;
  float:left;
  -moz-box-shadow: -1px -1px 1px #ccc inset;
  -webkit-box-shadow: -1px -1px 1px #ccc inset;
  box-shadow: -1px -1px 1px #ccc inset;
}

.buttonX:hover {
  background-color: #8CF;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.buttonX:active,
.buttonX.is-checked {
  background-color: #28F;
}

.buttonX.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.buttonX:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

.buttonXImg.is-marked {
  background-color: #28F;
}

.buttonXImg.is-marked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}






/* ---- button-group ---- */

 @media only screen and (min-width: 900px) {

	#rahmenX {
		position:fixed;
		top: 91px;
		right: 67px;
	}

 }

 /* ---- button-group ---- */

 @media (max-width: 899px) {

	#rahmenX {
		position:fixed;
		top: 141px;
		right: 67px;
	}

 }

 @media only screen and (min-width: 1400px) {

	#tabsx { position:fixed; z-index: 221; top: 0px; height: 30px; width: 100%; font-size:13px; }
  	#tabsx .ui-tabs-tab { height: 30px;  }

	.button-groupX {
	  position:fixed;
	  top:62px;
	  right: 172px;
	}

	#rahmenX {
		position:fixed;
		top: 91px;
		right: 180px;
	}
 }



 @media (max-width: 1399px) {

	#tabsx { position:fixed; z-index: 221; top: 0px; width: 100%; font-size:11px; }
	#tabsx .ui-tabs-tab { height: 26px;  }

	.button-groupX {
	  position:fixed;
	  top:62px;
	  right: 60px;
	}

	#rahmenX {
		position:fixed;
		top: 91px;
		right: 67px;
	}

 }

	.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
		padding: .56em 1em !important;
	}

	.button-groupX:after, .button-groupXImage:after {
	  content: '';
	  display: inline-block;
	  clear: both;
	}


 	.button-groupX, .button-groupXImage {
	  display: inline-block;
	  font-size: 10px;
	  max-width: 60%;
	  z-index: 90;
	  margin-left: 10px;
	  margin-right: 10px;
	  padding: 2px;
	  background: #eee;
	  box-shadow: 0 0 2px rgba(0,0,0, .4);
	  border-radius: 1px;
	  -moz-border-radius: 1px;
	  -webkit-border-radius: 1px;
	  border-top: 1px solid #EEE;
	  border-left: 1px solid #EEE;
	  border-right: 1px solid #AAA;
	  border-bottom: 1px solid #AAA;
	}

 .button-groupX .buttonX:first-child, .button-groupXImage .buttonXImg:first-child { border-radius: 0.3em 0 0 0.3em; }
 .button-groupX .buttonX:last-child, .button-groupXImage .buttonXImg:last-child { border-radius: 0 0.3em 0.3em 0; }
 .button-groupX .buttonX:only-child, .button-groupXImage .buttonXImg:only-child { border-radius: 0.3em 0.3em 0.3em 0.3em; }



  /*********** ColorPicker ***********/

.selectedcolor {
    border:1px solid #e3e3e3;
    width: 80px;
    height: 60px;
    margin: 20px auto;
}
#divpreview {
    border:1px solid #e3e3e3;
    width:80px;
    height:20px;
    margin:auto;
    visibility:hidden;
}
.colorTable, #colorhexDIV, #colorrgbDIV, #colorhslDIV, #colornamDIV {
    font-family:Consolas, 'Courier New', Courier, monospace; font-size:10px;
}
#colorhexDIV, #colorrgbDIV, #colorhslDIV, #colornamDIV {
    font-size:10px;
}
#wronginputDIV {
    text-align:left;
	float: left;
	height: 30px;
	top: 2px;
    margin:4px 4px;
    color:#a94442;
    display:none;
}
.has-error input{
    border:1px solid red;
}
#entercolorDIV input, #entercolorDIV button{
    height:20px;
	font-family: 'Amatic SC';
	font-size: 1em;
	text-align:center;

}
#entercolorDIV input{
    width:80%;
    border:1px solid #d3d3d3;
}

/*************** checkboxes for #textmobil: Pinwall *******/

/* Customize the label (the container) */
.containerPinwall {
  display: block;
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  cursor: pointer;
  /* font-size: 22px; */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.containerPinwall input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarkPinwall {
  position: absolute;
  top: 0;
  left: 0;
  height: 12px;
  width: 12px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.containerPinwall:hover input ~ .checkmarkPinwall {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerPinwall input:checked ~ .checkmarkPinwall {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkPinwall:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containerPinwall input:checked ~ .checkmarkPinwall:after {
  display: block;
}

/* Style the checkmark/indicator */
.containerPinwall .checkmarkPinwall:after {
  left: 4px;
  top: 1px;
  width: 3px;
  height: 6px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/***************checkbox-style******************************/

/* Customize the label (the container) */
#fragment-15 .container {
  display: block;
  position: relative;
  padding-left: 40px;
  margin-bottom: 12px;
  cursor: pointer;
  /* font-size: 22px; */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div.tox-sidebar__pane .container {
  display: block;
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  cursor: pointer;
  /* font-size: 22px; */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div.tox-sidebar__pane .container2 {
  display: inline-block;
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
  cursor: pointer;
  /* font-size: 22px; */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input, div.tox-sidebar__pane .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  margin:5px;
  height: 25px;
  width: 25px;
  background-color: #ddd;
}

div.tox-sidebar__pane .container2 input {
  position: absolute;
  height: 0px;
  opacity: 0;
  cursor: pointer;
}

 div.tox-sidebar__pane .checkmark, div.tox-sidebar__pane .checkmark2 {
  /*display:inline-block;*/
  position: absolute;
  top: 0;
  left: 0;
  height: 12px;
  width: 12px;
  margin:3px;
  background-color: #ddd;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark,  div.tox-sidebar__pane .container:hover input ~ .checkmark,  div.tox-sidebar__pane .container2:hover input ~ .checkmark2 {
  display:inline-block;
  background-color: #bbb;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark, div.tox-sidebar__pane .container input:checked ~ .checkmark, div.tox-sidebar__pane .container2 input:checked ~ .checkmark2 {
  display:inline-block;
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after, div.tox-sidebar__pane .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

div.tox-sidebar__pane .checkmark2:after {
  content: "";
  position: relative;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after, div.tox-sidebar__pane .container input:checked ~ .checkmark:after, div.tox-sidebar__pane .container2 input:checked ~ .checkmark2:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

div.tox-sidebar__pane  .container .checkmark:after,  div.tox-sidebar__pane  .container2 .checkmark2:after  {
  left: 4px;
  top: 1px;
  width: 3px;
  height: 6px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.literaturClass p, .literaturClass h1, .literaturClass h2, .literaturClass h3, .literaturClass h4, .literaturClass h5, .literaturClass h6, .literaturClass span, .literaturClass li {
  font-size: 0.8em;
}

.literaturClass td {
  vertical-align: top;
}


/*********************************************/



/* Bounce To Right */
.hvr-bounce-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
  color: white;
}
.hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Border Fade */
.hvr-border-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 2px #e1e1e1, 0 0 1px transparent;
  /* Hack to improve aliasing on mobile/tablet devices */
}
.hvr-border-fade:hover, .hvr-border-fade:focus, .hvr-border-fade:active {
  box-shadow: inset 0 0 0 2px #2098D1, 0 0 1px transparent;
  /* Hack to improve aliasing on mobile/tablet devices */
}



/* Bob */
@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
.hvr-bob {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

/********************************************/

.magictime {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}


.perspectiveUpReturn {
  -webkit-animation-name: perspectiveUpReturn;
  animation-name: perspectiveUpReturn; }

@-webkit-keyframes perspectiveUpReturn {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
    transform: perspective(800px) rotateX(180deg); }
  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg);
    transform: perspective(800px) rotateX(0deg); } }

@keyframes perspectiveUpReturn {
  0% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
    transform: perspective(800px) rotateX(180deg); }
  100% {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: perspective(800px) rotateX(0deg);
	transform: perspective(800px) rotateX(0deg); } }
	

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 100px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 100px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 100px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 100px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

/***********************************/

.swap {
  -webkit-animation-name: swap;
          animation-name: swap;
}
@-webkit-keyframes swap {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) translate(-700px, 0px);
            transform: scale(0, 0) translate(-700px, 0px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(0px, 0px);
            transform: scale(1, 1) translate(0px, 0px);
  }
}
@keyframes swap {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(0, 0) translate(-700px, 0px);
            transform: scale(0, 0) translate(-700px, 0px);
  }

  100% {
    opacity: 1;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(0px, 0px);
            transform: scale(1, 1) translate(0px, 0px);
  }
}

/**********************************/
.magictimeSlow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.slideUpReturn {
  -webkit-animation-name: slideUpReturn;
          animation-name: slideUpReturn;
}
@-webkit-keyframes slideUpReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes slideUpReturn {
  0% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }

  100% {
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

/******** spinnerBoxes *********/




      #loading-animation {
        left: calc(50% - 160px);
        position: absolute;
        top: calc(35% - 100px);
		    z-index:9999;
      }


      .spinnerBoxes {
        margin: 0 auto;
        width: 160px;
        height: 100px;
        text-align: center;
        font-size: 20px;
      }

      .spinnerBoxes > div {
        background-color: #ccc;
        height: 100%;
        width: 16px;
        display: inline-block;

		-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
        animation: sk-stretchdelay 1.2s infinite ease-in-out;
      }

/*
      .spinnerBoxes {
        margin: 0 auto;
        width: 50px;
        height: 40px;
        text-align: center;
        font-size: 10px;
      }

      .spinnerBoxes > div {
        background-color: #ccc;
        height: 100%;
        width: 6px;
        display: inline-block;

        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
        animation: sk-stretchdelay 1.2s infinite ease-in-out;
      }
*/
      .spinnerBoxes .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
      }

      .spinnerBoxes .rect3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
      }

      .spinnerBoxes .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
      }

      .spinnerBoxes .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
      }

      @-webkit-keyframes sk-stretchdelay {
        0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
        20% { -webkit-transform: scaleY(1.0) }
      }

      @keyframes sk-stretchdelay {
        0%, 40%, 100% {
          transform: scaleY(0.4);
          -webkit-transform: scaleY(0.4);
        }  20% {
          transform: scaleY(1.0);
          -webkit-transform: scaleY(1.0);
        }
      }

	/************************************/


  div.tox-sidebar__pane {
    display:block !important;
		background-color: #e5edfd !important;
		font-family: 'Verdana','sans-serif';
    overflow-y: auto;
	}

  .widthOfSidebar {
    width: 350px !important;
  }

  .widthOfSidebarBigger {
    width: 500px !important;
  }

	div.tox-sidebar__pane h1 {
	   font-size: 14pt;
     font-weight: bold;
     display: none;
	}

	div.tox-sidebar__pane h4 {
	   font-size: 10pt;
     font-weight: bold;
	}

	div.tox-sidebar__pane h1, div.tox-sidebar__pane h2, div.tox-sidebar__pane h3, div.tox-sidebar__pane h4, div.tox-sidebar__pane ol, div.tox-sidebar__pane li, div.tox-sidebar__pane table/*, div.tox-sidebar__pane tr */ {

		margin-top: 10px;
		margin-right: 4%;
		margin-left: 2%;
    margin-bottom: 10px;
	  line-height: 140%;

	}

  div.tox-sidebar__pane table {
    /* border: 0.2px solid gray; */
    min-width: 100%;
  }

	div.tox-sidebar__pane li {
		font-size: 9pt;
	}

  div.tox-sidebar__pane img {
		max-width: 5em;
    height: auto;
    margin: 5px;
	}

  div.tox-sidebar__pane .labelClass {
    max-width: 80px;
  }



  div.tox-sidebar__pane td {
    border-bottom: 1px solid lightgray;
		vertical-align: top;
    padding: 5px;
    font-size: 10px;
	}

  div.tox-sidebar__pane  .ui-accordion-content { max-height: 30em; overflow-y: auto; }


  div.tox-sidebar__pane  b {
    font-weight: bold;
  }

  div.tox-sidebar__pane  i {
    font-style: italic;
  }

  button#uncheckAll{
    width: 60px;
    height: 22px;
  }

  button#uncheckAll:after {
      display:inline-block;
      content: 'Auswaehlen fuer Anmerkung';
      font-family: 'Verdana';
      font-size: 1.1em;
      color: #887e7e;
      position: relative;
      right: 0px;
      top: 7px;
      width: 250px;
      letter-spacing: 0.2em;

  }


  #myPseudoLitVerz {
      position:absolute;
      top: 2000px;
      /* width:100px;
      height: 100px; */
    }