@CHARSET "UTF-8";


:root {
	--info: #e0f2f1;
    --bg: #4db6ac;
	--bg-sorted: #009688;
	--bg-hover: #b2dfdb;
	--bg-hover-selected: #00695c ;
	--color-dark-bg: white;
}

#foo {
    color: var(--main-color);
}

input
{
	color: black;
	background-color: whitesmoke; 
	border-radius: 5px;	
	-moz-border-radius: 5px;	
	-webkit-border-radius: 5px;	

}

input.medium
{
	width: 180px;
}

i
{
	  font: 10px arial, sans-serif;
}

html {
	height: 100%;
}
 
 body {

 	height: 98%;
 } 
 
 caption {
	border: thin solid silver;
 	background: whitesmoke;
 	color: silver;
 }
 
 .split {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     overflow-y: auto;
     overflow-x: auto;
 	
 	 width:100%;
     height:100%;
 	
 	
 }
 
 .content {
     border: none; /*1px solid #C0C0C0;*/
     box-shadow: inset 0 1px 2px #e4e4e4;
     background-color: #fff;
 	
 	 display: flex;
 	/*
     justify-items: center;
     align-items: center;
 	 */	 
 	 width: 100%;
     height: 100%; 	
 }
 
 .gutter {
     background-color: #eee;
     background-repeat: no-repeat;
     background-position: 50%;
 }
 
 .gutter.gutter-horizontal {
     cursor: col-resize;
     background-image: url('/lib/splitjs/grips/vertical.png');
 }
 
 .gutter.gutter-vertical {
     cursor: row-resize;
     background-image: url('/lib/splitjs/grips/horizontal.png');
 }
 
 .split.split-horizontal,
 .gutter.gutter-horizontal {
     height: 100%;
     float: left;
 }
 
 /*--------------- Blinkender Text ----------------------------------------------------*/
 
.blinken { 
    border-radius: 0.2em;
    padding: 0.2em;

    animation-name: animation_blink_5s;
    animation-timing-function: ease-in;
    animation-duration: 2s; 
    animation-iteration-count: 6;   
    animation-fill-mode: both;
}

@keyframes animation_blink_5s {
    0% {  
        background-color: white;
		color: black;
    }
    50% {  
        background-color: red;
		color: white;
    }
    100% {  
        background-color: white;
		color: black;
    }
}
 
 /* --------------- MATERIALIZE -------------------------------------------------------*/
input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 2px solid #26a69a;
  -webkit-box-shadow: 0 1px 0 0 #26a69a;
          box-shadow: 0 1px 0 0 #26a69a;
}


/** Search Pane in Splitliste muss über die Splitliste hinaus sichtbar sein */
div.dt-button-collection
{
	position: fixed !important;
	margin-top: 0px !important;
	top: 35px !important;
	left: 60px !important;
	width:90% !important;
	overflow: auto !important;
	max-height: 90% !important;
}

/** new Button Class tiny **/
.btn-tiny {
  
  height: 22px !important;
	
  line-height: 22px !important;
  font-size: 10px !important;
   
}


 /*----------------- Datatable definitionen----------------------------------------------*/

table.dataTable tbody tr.selected {

    background-color: var(--bg-hover-selected)  !important;
}

table.dataTable tbody tr.selected {
  background-color: teal !important;
}


table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected {
  background-color:  var(--bg) !important;
}
table.dataTable.stripe tbody > tr.odd.selected,
table.dataTable.stripe tbody > tr.odd > .selected, table.dataTable.display tbody > tr.odd.selected,
table.dataTable.display tbody > tr.odd > .selected {
  background-color:var(--bg) !important;
}
table.dataTable.hover tbody > tr.selected:hover,
table.dataTable.hover tbody > tr > .selected:hover, table.dataTable.display tbody > tr.selected:hover,
table.dataTable.display tbody > tr > .selected:hover {
  background-color:var(--bg) !important;
}
table.dataTable.order-column tbody > tr.selected > .sorting_1,
table.dataTable.order-column tbody > tr.selected > .sorting_2,
table.dataTable.order-column tbody > tr.selected > .sorting_3,
table.dataTable.order-column tbody > tr > .selected, table.dataTable.display tbody > tr.selected > .sorting_1,
table.dataTable.display tbody > tr.selected > .sorting_2,
table.dataTable.display tbody > tr.selected > .sorting_3,
table.dataTable.display tbody > tr > .selected {
    background-color:var(--bg-sorted) !important;
}
table.dataTable.display tbody > tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_1 {

}
table.dataTable.display tbody > tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_2 {

}
table.dataTable.display tbody > tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_3 {
  background-color: var(--bg-hover-selected)   !important;
}
table.dataTable.display tbody > tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_1 {

}
table.dataTable.display tbody > tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_2 {
  background-color: var(--bg-hover-selected)   !important;
}
table.dataTable.display tbody > tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_3 {
  background-color: var(--bg-hover) !important;
}
table.dataTable.display tbody > tr.odd > .selected, table.dataTable.order-column.stripe tbody > tr.odd > .selected {
 
}
table.dataTable.display tbody > tr.even > .selected, table.dataTable.order-column.stripe tbody > tr.even > .selected {
  background-color: var(--bg-hover) !important;
}
table.dataTable.display tbody > tr.selected:hover > .sorting_1, table.dataTable.order-column.hover tbody > tr.selected:hover > .sorting_1 {
  background-color: var(--bg-hover) !important;
}
table.dataTable.display tbody > tr.selected:hover > .sorting_2, table.dataTable.order-column.hover tbody > tr.selected:hover > .sorting_2 {
  background-color: var(--bg-hover) !important;
}
table.dataTable.display tbody > tr.selected:hover > .sorting_3, table.dataTable.order-column.hover tbody > tr.selected:hover > .sorting_3 {
  background-color: var(--bg-hover) !important;;
}
table.dataTable.display tbody > tr:hover > .selected,
table.dataTable.display tbody > tr > .selected:hover, table.dataTable.order-column.hover tbody > tr:hover > .selected,
table.dataTable.order-column.hover tbody > tr > .selected:hover {
  background-color:  var(--bg-hover-selected) !important;
  color:			var(--color-dark-bg) !important;
}


table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
  background-color: var(--bg-hover) !important;
}

table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected {
  background-color: var(--bg-hover-selected) !important;
	  color:			var(--color-dark-bg) !important;
}

table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
  background-color: var(--bg-hover) !important;
}
table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
  background-color: var(--bg-hover) !important;
}
table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
  background-color: var(--bg-hover) !important;
}
table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
  background-color: var(--bg-hover-selected) !important;
	  color:			var(--color-dark-bg) !important;
}
table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
  background-color: var(--bg-hover-selected) !important;
	  color:			var(--color-dark-bg) !important;
}
table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
  background-color: var(--bg-hover-selected) !important;
	  color:			var(--color-dark-bg) !important;
}

/* EJ 17.08.2023 - checkbox in Liste anpassen - hängt zu hoch*/
table.dataTable.compact > tbody > tr > td.select-checkbox:before,
table.dataTable.compact > tbody > tr > th.select-checkbox:before {
  margin-top: -5px !important; 
}

.material-tooltip
{

}

td.menu:hover
{
  background-color: rgba(242, 242, 242, 0.5);
  cursor: pointer;
  font-weight: bold;
	
  background-color: #666666;
  text-shadow: 1px 4px 4px #555;
  -webkit-background-clip: text;
    -moz-background-clip: text;
}


a.tooltips {
    position: relative;
    display: inline;
}
a.tooltips span {
    position: absolute;
    width:140px;
    color: #ffffff;
    background: #000000;
    height: 30px;
    line-height: 30px;
    text-align: center;
    visibility: hidden;
    border-radius: 6px;
}
a.tooltips span:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0; height: 0;
    border-top: 8px solid #000000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}
a:hover.tooltips span {
    visibility: visible;
    opacity: 0.8;
    bottom: 30px;
    left: 50%;
    margin-left: -76px;
    z-index: 999;
}


/* MATERIALIAZE UPDATEs */
/*
 * damit kann die Badge Dropdownliste beim Ausklappen größer sein, als der Button, auf den man klickt
 */
ul.select-dropdown,
ul.dropdown-content {
  width: auto !important;
  max-height: 650px !important;
	
  li > span {
    white-space: nowrap;
	padding: 0px !important;
	margin: 0px !important;
	/*
	color: red !important;
	background-color: blue !important;
	*/
  }
}

/*
* Mindesthöhe bei leerem Select Element
*/
ul.dropdown-content li{
    min-height: 25px;
}

/*
* Select Inhalte im Dropdown
*/
ul.dropdown-content li span{
    white-space: nowrap;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
		margin: 0px !important;
/*
	padding-left: 15px !important;
	padding-top: 1px !important;
	padding-bottom: 1px !important;
	padding-right: 10px !important;
	margin: 0px !important;
*/	
}

/** NAV BAR Materialize **/

nav ul li a i
{
	color:#4db6ac;
}

div.xnav-wrapper
{
  background-color: #e0f2f1;
}

nav ul li a:hover {
   background-color: #e0f2f1 !important;
   color: white;
}

nav ul li a.active{
  background-color: teal !important;
}

.tabs .tab a:focus, .tabs .tab a:focus.active {
  background-color: #4db6ac !important;
  outline: none;

}

.tabs .indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: #e0f2f1;
  will-change: left, right;
}

nav ul li a.active i{
  color: white;
}


/*
* Buttons, Feldauswahl in den Datatables
*/

.dt-button.buttons-columnVisibility
{
	width: 150px !important;

	float:left !important;
}
.dt-button-collection
{

}


/*
 * COLUMNS und ROWS ohne Abstand
 */
/*
.col 
{
	margin: 10px;
	padding: 0px;
}
*/

.row
{
	
	/*margin: 5px !important;*/
	padding: 5px !important;	
}


/*
 * Breite der Select Liste in den Datatables
 */
.dataTables_length
{
	width: 60px !important;
}

/*
* Drowdown für autocomplete
*/

ul.autocomplete-content li span
{
	font-size: 12px;
}

/*
* x bei INPUT Felders
*/
i.postfix, span.postfix 
{
	position: absolute; 
	top: 15px; 
	right:5px; 
	cursor:default;
}

/*
* Contextmenü 
*/


/*
 * CARD FLIP
 */

.scene {
	/*
  width: 200px;
  height: 260px;
  */
	width: 100%;
	height: 100%;
	padding: 0px;

  perspective: 600px;
	/*
 border: thin solid red;
 */ 
	margin: 0px;
}

.xscene--card
	{
		/*
	margin: 0px;
	postion: absolute;
		top: 0px;
		background: orange;
		*/
}

.card {
  margin: 0px;
  width: 100%;
  height: 100%;
	
	/*
  position: relative;
  */
  transition: transform 1s;
  transform-style: preserve-3d;
  /*
	border: thin solid blue;
  */
}

.card__face {	
  position: absolute;   
  height: 100%;  
  width: 100%;  
  backface-visibility: hidden;
  
}

.card__face--front {
	/*
   background: red;
   */ 
}

.card__face--back {
  background: white;
  transform: rotateY( 180deg );
}

.card.is-flipped {
  transform: rotateY(180deg);
}

.card { transform-origin: center right; }

.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

/*
 * Image Magnifier-----------------------------------------
 */


/*
 * HTML5 Elemente
 */

/* spin materialize icon */
i.spin
{
    animation: spin-animation 2s infinite;
    animation-timing-function: linear;
    display: inline-block;
}

@keyframes spin-animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

i.error
{
	
}

/*
 * Überschrift 90 Grad gedreht
 */

div.sideheader
 {	 
  margin-top: 35px;
  		
  //height: 30px;
  //width: 30px;
  background: blue-grey;
  text-align:center;
  color: teal;
  rotate: 270deg;
}