/* html5-Definitionen, basierend auf boilerplate */
/* article, aside, details, figcaption, figure, footer, header, hgroup, section { display: block; }
 */
html
{	
	margin:0px;
	padding:0px;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body
{
  margin:0px;
  padding:0px;	
 margin: 0;
 font-size: 9pt;
 line-height: 1.231;
 background-color:#3c3c3c;
 height: 100%;
 background-repeat: no-repeat;
 background-image: linear-gradient(to right,#c9c7d1 0,#e5e5ea 6%,#fefefe 20%,#fefefe 80%,#e5e5ea 94%,#c9c7d1 100%);
 font-family: 'Roboto', sans-serif ;
  overflow:hidden;
 overflow-y: auto;
}


input, .form-control{
	font-size: 9pt !important;
}

@font-face {
    font-family: 'Grechen Fuemen';
    src: url('../fonts/GrechenFuemen-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body, button, input, select, textarea
{
 /* font-family: Questrial; */
 color: #222;
}
div{
	border-radius:4px;
}
a { color: #336699; }
img { border: 0;}
strong	{	font-weight:bold;	}
em	{	font-style:italic;	}

h1
{
 font-size: 16px;
 font-weight: bold;
}

h2
{
 font-size: 14px;
 font-weight: bold;
}

h3
{
 font-size: 13px;
 text-decoration: underline;
}

.glyphicon-zoom-in:before {
    font-size: 2em !important; /* Beispiel für Schriftgröße anpassen */
}

.glyphicon-zoom-out:before {
    font-size: 0.5em !important; /* Beispiel für Schriftgröße anpassen */
}

hr
{
 color:#c5d679;
	background-color:#c5d679;
	height:1px;
	border:none;
 margin-top:20px;
	margin-bottom:20px;
}

.btn.disabled, .btn[disabled] {
  pointer-events: none;
  opacity: 0.5; /* optisch auch „ausgegraut“ */
  cursor: not-allowed;
}

.tab-content .fade{
	opacity:1 !important;
}
.logo img{
	width:100%;
	position:relative;
	left:0px;
}

.modal-backdrop {
	position: relative;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	background-color: #000;
}
#patModal .modal-dialog, 
#waitModal .modal-dialog, 
#appointModal .modal-dialog, 
#mailModal .modal-dialog, 
#newEintragModal .modal-dialog, 
#newAppointmentModal .modal-dialog, 
#setupModal .modal-dialog, 
#DiaModal .modal-dialog, 
#infoModal .modal-dialog, 
#formModal .modal-dialog{
	-webkit-transform: translate(0, -1%);
	-ms-transform: translate(0, -1%);
	-o-transform: translate(0, -1%);
	transform: translate(0, -1%);
	width: 80vw;
    margin: 10px auto;
}
#patModal .modal-content, 
#waitModal .modal-content, 
#appointModal .modal-content, 
#mailModal .modal-content, 
#formModal .modal-content{
	border-right: 2px groove rgba(0,0,0,0.8) !important;
	border-left: 2px groove white !important;
	border-radius:6px;
}

#patModal .inhalt_opt{
	/* box-shadow: 0 9px 9px -6px; */
	height: 80vh;
	background: white !important;
}

/* // Einstellung mediDash */
#setupModal .modal-body{
	height: 80vh;
}
#setupModal .setupRow{
	padding: 0px 15px;
}
	/*  Seitenmenü */
#setupModal .subOption {
	min-height: 76vh;
	background: #e6e6e6;
	padding: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
}

/* // Indikationen mediDash */
#DiaModal .modal-body, #infoModal .modal-body, #formModal .modal-body{
	height: 80vh;
}
#DiaModal .diaRow{
	padding: 0px 15px;
}
	/*  Seitenmenü */
#DiaModal .subOption {
	min-height: 76vh;
	background: #e6e6e6;
	padding: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
}

#content-area {
	height: 76vh;
	
}
#info-content-area {
	height: 76vh;
	
}

.getPat, .getWait, .getAppoint, .getPMail{
	height: 150px;
}

.thumbnail {
	position: relative; /* Ermöglicht die Positionierung der kleineren Schaltfläche relativ zur größeren */
	display: inline-block; /* Stellt sicher, dass die Schaltflächen sich korrekt verhalten */
}

	.downList{
		height: 77px;
		  
	}
	.downList .thumbnail {
	border: 0px solid #ddd !important;
}
	.downList .col-sm-2 {
		margin: 0px 0px;
		height: 45px;
	}  
	.downList .col-sm-2 .thumbnail .btn{
		height: 50px;  
	  
	}	
	.downList .col-sm-2 .thumbnail .btn h1{
		margin-top: 8%;  
		  
	}

.getPat {
	position: relative;
	width: 100%;
	height: 160px;
	clip-path: polygon(100% 0px, 100% 80px, 100% 100%, 0px 100%, 0px 50px, 30% 0px);
	z-index: 1;
	cursor: default;
}
.getAppoint {
	position: relative;
	width: 100%;
	height: 160px;
	clip-path: polygon(70% 0px, 100% 50px, 100% 100%, 0px 100%, 0px 50px, 30% 0px);
	z-index: 1;
}
.getWait, .getAppoint, .getPMail {
	position: relative;
	width: 100%;
	height: 160px;
}
.getWait .table, .getAppoint .table {
	text-align: left;
	font-size: 9pt;
}

.input-error {
    border: 2px solid red;
    box-shadow: 0 0 5px red;
	transition: fade .5s all;
}

/* ----Schalfläche Patient------------------------- */
/* Patienten (links)*/
#patArea {
    overflow: visible;
}

#patArea .AddNewKL {
	position: absolute;
	top: 1px;
	left: 1px;
	z-index: 0;
	min-width: 80px;
	min-height: 80px;
	border-radius: 4px !important;
}


#patArea .AddNewKL .btn-info {
	height: 80px;
	border-radius: 4px;
	padding: 0px 28px 0px 0px;
	color: #fff;
	border-color: #eea236;
	border: 1px solid #bababa;
	border-right: 1px solid rgba(0,0,0,.7);
	transition: all 0.4s ease-in-out;
	position: relative;
	top: 0;	
}

#patArea .AddNewKL .btn-info:hover {
	top: -10px;
	height: 80px;
}


/* ----Schalfläche Termine----------------- */
/* Terminverwaltung (links)*/
#appoinArea .AddNewTerm {
	position: absolute;
	top: 1px;
	left: 1px;
	z-index: 0;
	min-width: 80px;
	min-height: 80px;
	border-radius: 4px !important;
	/* clip-path: polygon(0px 0px, 100% 0px,0% 100%); */
}
#appoinArea .AddNewTerm .btn-default {
	height: 80px;
	border-radius: 4px;
	padding: 0px 28px 0px 0px;
	color: rgb(191, 191, 191);
	/* background-color: #f0ad4ebf; */
	border-color: #eea236;
	border: 1px solid #bababa;
	border-right: 1px solid rgba(0,0,0,.7);
	transition: all 0.4s ease-in-out;
	position: relative;
	top: 0;	
}
#appoinArea .AddNewTerm .btn-default:hover {
	color: rgb(92, 184, 92);
	background-color: #ffffff;
	top: -10px;
}

#appoinArea .AddNewTerm:hover {
	background-color: #ec971f;
	border-right: #d58512;
	
}
/* Terminverwaltung (rechts)*/

#appoinArea .getTermData{
	position: absolute;
	top: 1px;
	right: 1px;
}
#appoinArea .getTermData .btn-success {
	min-height: 80px;
	border-radius: 4px;
	padding: 0px 28px 0px 0px;
	color: #fff;

	border-color: #eea236;
	border: 1px solid #bababa;
	border-right: 1px solid rgba(0,0,0,.7);
	transition: all 0.4s ease-in-out;
	width: 85px;
	position: relative;
	top: 0;	
}
#appoinArea .getTermData .btn-success:hover {
	top: -10px;	
}
#appoinArea .getTermData .btn-success .fa{
	position: relative;
	left: 33px;
}




.setPatWait-h, .setPatWait-m, .setPatWait-l {
	max-height: 34px;
	padding: 0px !important;
	padding-left: 0px !important;
	top: 0px;
}
.setPatWait-h .fa, .setPatWait-m .fa, .setPatWait-l .fa {
	top: 5px;
}
.downBtn .btn-info .col-nf-3{
	padding-left: 10px;
}

.calendar-table{
	width:100%;
}
.contPatCalender{
	float: right;
	max-height: 73vh;
	overflow: auto;
	margin-bottom: 27px;
}
.contPatCalender thead{
	background: gray;
	position: sticky;
	top: 0px !important;
	z-index: 1;
	color:white;
}
.contPatCalender td{
	background: transparent;
	padding:0px !important;
	border: 1px solid #d9d9d9 !important;
}
.contPatCalender .cell-content{
	background: transparent;
}
.contPatCalender .cell-content .add-button{
	display:none;
}

.contPatCalender .cell-content .time-slot {
	display: block;
	position: absolute;
	width: 100%;
	height: 10px;
	background-color: rgba(255, 255, 255, .3);
	left: 0;
	cursor: pointer;
	transition: background-color 0.3s ease;
	top: calc(10px * var(--slot));
	border-bottom: 1px dashed rgba(0,0,0,.1);
	border-radius: 0px;
}

/* Wenn die Maus über der Zelle ist, zeigen wir die Time-Slots */
.contPatCalender td:hover .time-slot {
    display: block;
}

/* Nur der Slot, über den die Maus schwebt, bekommt den Hover-Effekt */
.contPatCalender .time-slot:hover {
    background-color: rgba(0, 195, 255, 0.66);
}
.contPatCalender .inside-sprechzeiten {
	height: 60px !important;
	min-height: 60px !important;
}
/* --------------------------------- */
.tabs-header-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.tabs-header-wrap .nav-tabs {
	margin-bottom: 0;
}

.kartei{
	margin-top: -1%;
  /* min-height: 350px; */
  min-height: 27.5vw;
  position: relative;
}
.kartei .nav-tabs {
	border-bottom: 0px solid #ddd;
	position: sticky;
	top: 0px;
	height: 36px;
	background: white;
	border-radius: 4px;
}
.dbTickerRow input{
	height:25px;
	
}
.downList{
	position: relative;
	margin-top: -1%;
	
}

#all.active{
	color: #2f2f2f !important;
	background-color: #ffffff;
	text-shadow: 0px 0px 0px;
}

#all .entryList td{
	border:0px solid;
}
#all .entryList .allRow{
	border: 0px solid !important;
}
.waiting-item {
    display: inline-block;
    
    min-height: 42px; /* Höhe der Kachel */
	padding: 10px;
    margin: 5px 0px;
	display: inline-block;
    text-align: left;
    box-sizing: border-box;
    cursor: pointer;
    transition: ease-in-out 0.8s all ; /* Sanfte Übergänge für Animation */
	overflow: hidden;
	background: linear-gradient(270deg, rgba(254,254,254,1) 13%, rgba(230,230,230,1) 57%);
}

.waiting-item:hover {
	background: linear-gradient(270deg, rgba(254,254,254,1) 13%, rgba(0, 195, 255, 0.66) 57%);

}

.select-patient-radio {
	position: absolute;
	right: 1%;
	top: 1%;
	opacity:0;
}

.client-info {
    font-weight: 500;
    font-size: 100%;
}

.prio-icon  {
	height: 50px;
	display: table-row;
}

.prio-icon .fa-lg {
  line-height: 1.75;
}

.prio-icon i {
    font-size: large; 
/*     display: inline-block;
    margin-top: 10px;
	float:right; */
	width: 30px;
  height: 30px;
  line-height: 1.75;
}

.prio-container{
	/* top: -20px; */
	right: -35px;
	position: relative;
	opacity:.35;
}

/* Stil für das Dragging */
.waiting-item.dragging {
    opacity: 0.5; /* Halbtransparent während des Ziehens */
}
#waiting-list-table {
    table-layout: fixed;
    width: 100%;
}
#waiting-list-table thead{
	background: linear-gradient(90deg, rgba(254,254,254,1) 3%, rgba(179,179,179,1) 51%, rgba(255,255,255,1) 100%);
	border-right: 2px groove rgba(0,0,0,0.8);
}
#waiting-list-table thead th{
	border-right: 2px groove rgba(0,0,0,0.8);
}
#waiting-list-table tbody{
	background:white;
}

.behandler-column {
    vertical-align: top;
    text-align: center;
}

.waiting-list {
    list-style: none;
    padding: 0;
    min-height: 100px; /* Mindesthöhe für leere Spalten */
}
.waiting-list .drag-over {
    border-top: 8px solid #007bff;  /* Blaue Linie als visuelle Markierung */
    /* background-color: #f8f9fa; */     /* Helle Hintergrundfarbe */
	background-color: linear-gradient(0deg, rgba(254,254,254,1) 50%, rgba(0,123,255,1) 100%);
    transition: all 0.1s ease-in-out;
}
.drop-hover {
	border-top: 4px solid #007bff;
	/* background-color: #f8f9fa; */
	background: linear-gradient(0deg, rgba(254,254,254,1) 50%, rgb(255, 255, 255) 100%) !important;
	transition: all 0.3s ease-in-out;
	border-bottom: 4px solid #007bff;
}
.dragMenuRight {
	height: 95vh;
	float: right;
	right: 0%;
	padding: 0px 1vw;
	width: 31% !important;
}
.dragMenuRight .ui-droppable{
	height: 31vh;
	margin: 1vh 0px;
	background: rgba(0,0,0,.1);
  box-shadow: 0 0 4px, 0px 0px 160px 10px rgba(0,0,0,.1) inset;
  border-left: 2px groove white;
  border-right: 1px solid rgba(0,0,0,.7);
  overflow:hidden;
  overflow-y: auto;
}
.mediDash .optionDiv {

	background: rgba(0,0,0,.1);
  box-shadow: 0 0 4px, 0px 0px 160px 10px rgba(0,0,0,.1) inset;
  border-left: 1px groove white;
  border-right: 1px solid rgba(0,0,0,.7);

}
.dragMenuRight .ui-droppable:nth-child(1){
	margin: 0vh 0px;
}
.dragMenuRight .ui-droppable:nth-child(3){
	margin: 0vh 0px;
}
.dropped-content {
    transform: scale(1);
	font-size: 8pt !important;
	line-height: 1;
	width: 115%;
	margin-left: -30px;	
}
.dropped-content .form-control{
	height: auto;
	font-size: 8pt !important;
}
.dropped-content .waiting-item .col-sm-4{
	width: 100%;
}

.btn-osStyle{
	border-radius:4px !important;
	background: rgb(210, 210, 210);
	box-shadow: 0 0 4px, 0px 0px 160px 10px rgba(0,0,0,.2) inset;
	border: 1px groove rgba(0, 0, 0, 0);
		border-left: 1px groove white;
		border-right: 1px solid rgba(0,0,0,.7);
	color:white;
	transition: all 0.3s ease-in-out;
	padding:5px;
}
.btn-osStyle h1{
	color:white;
	text-shadow: -1px 0 2px rgba(0,0,0,.5);

}

#patArea .btn-osStyle:hover{
	background: rgb(191, 191, 191);
	box-shadow: 0 0 4px, 0px 0px 66px 8px rgba(0, 0, 0, 0.4) inset, 0 0 8px rgb(0, 197, 255) inset;
	border-left: 1px groove white;
	border-right: 1px solid rgba(0,0,0,.7);
	color:white;
	border: 1px groove rgb(0, 197, 255);
}

#waitArea .btn-osStyle:hover{
	background: rgb(191, 191, 191);
	box-shadow: 0 0 4px, 0px 0px 66px 8px rgba(0, 0, 0, 0.4) inset, 0 0 8px rgb(255, 150, 0) inset;
	border-left: 1px groove white;
	border-right: 1px solid rgba(0,0,0,.7);
	color:white;
	border: 1px groove rgb(255, 150, 0);
}

#appoinArea .btn-osStyle:hover{
	background: rgb(191, 191, 191);
	box-shadow: 0 0 4px, 0px 0px 66px 8px rgba(0, 0, 0, 0.4) inset, 0 0 8px rgb(0, 255, 0) inset;
	border-left: 1px groove white;
	border-right: 1px solid rgba(0,0,0,.7);
	color:white;
	border: 1px groove rgb(0, 255, 0);
}

#mailArea .btn-osStyle:hover{
	background: rgb(191, 191, 191);
	box-shadow: 0 0 4px, 0px 0px 66px 8px rgba(0, 0, 0, 0.4) inset, 0 0 8px rgb(249, 221, 0) inset;
	border-left: 1px groove white;
	border-right: 1px solid rgba(0,0,0,.7);
	color:white;
	border: 1px groove rgb(249, 221, 0);
}

#patArea .thumbnail, #waitArea .thumbnail, #appoinArea .thumbnail, #mailArea .thumbnail {
	padding: 0px;
	box-shadow: 0 14px 13px -13px rgba(0, 0, 0,.8);
	overflow: visible;
}

#patArea, #waitArea, #appoinArea 
 {
	padding-right: 0px;
}
#mailArea 
 {
	padding-right: 15px;
}

#AddEintrag, #AddNewKL, #AddAppoint{
position: absolute;
  top: 10px;
  left: 15px;
  min-height: 30px !important;

}
#AddEintrag .btn, #AddNewKL .btn, #AddAppoint .btn {
	min-height: 30px !important;
	padding: 0px !important;
	margin-bottom: 10px !important;
	width: 85px;
}
.modal-header {
	padding: 15px;
	border-bottom: 1px solid #e5e5e5;
	height: 70px;
}
#sendChat {
	color: #000;
	background-color: #e6ce10;
	border-color: #b7a40b;
}
#sendChat:hover {
	color: #000;
	background-color: #b7a40b;
	border-color: #e6ce10;
}

/* ------------------------------------------- */
    .prio-labels {
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
    }

    .prio-label {
        font-weight: bold;
    }
	
/* Basisstil für den Slider */
    #prioRange, #prioRangeApp {
		-webkit-appearance: none;
		width: 100%;
		height: auto;
		border-radius: 10px;
		transition: background 1.0s;
		padding: 0px;
    }

    /* Stil für den "Daumen" (den Schieberegler selbst) */
    #prioRange::-webkit-slider-thumb, #prioRangeApp::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: white;
        border: 2px solid black;
        border-radius: 50%;
        cursor: pointer;
    }

    #prioRange::-moz-range-thumb, #prioRangeApp::-moz-range-thumb {
		background: #ffffff8c;
		border: 1px solid gray;
		border-radius: 50%;		
		transition: background 0.3s;
		cursor: pointer;
    }

	
#behandler-buttons, #behandler-buttonsApp {
    display: flex;
    flex-wrap: wrap; /* Damit die Buttons umbrechen, falls sie zu lang sind */
    justify-content: space-between; /* Verteile die Schaltflächen gleichmäßig */
}
.listOfUsers{
	position: relative;
	top: -25px;
}

.behandler-btnDashboard {
    flex: 1; /* Sorgt dafür, dass jeder Button den gleichen Anteil an Breite bekommt */
    margin: 2px; /* Abstand zwischen den Buttons */
    text-align: center; /* Text zentrieren */
    white-space: nowrap; /* Verhindert, dass der Text umbricht */
	
	top: 0px;	
	color: #333;
	background-color: #e6e6e6;
	border-radius:4px;
	box-shadow: 0 7px 9px -6px rgba(0,0,0,.6);	
	border-color: #adadad;	
	transition: ease-in-out .3 all;
}
/* .behandler-btnDashboard:active {
	color:white;
	background-color: #337ab7;	
} */
.behandler-btnDashboard:first-child {
    border-radius: 0 4px 4px 20px;
}
.behandler-btnDashboard:last-child {
    border-radius: 4px 0 20px 4px;
}
.behandler-btnDashboard.active, .behandler-btnDashboard:hover {
	color:white !important;
	background-color: #337ab7 !important;	
	top: 2px;
	border-right: 1px solid white !important;
    box-shadow: none;
}

.behandler-btn {
    flex: 1; /* Sorgt dafür, dass jeder Button den gleichen Anteil an Breite bekommt */
    margin: 5px; /* Abstand zwischen den Buttons */
    text-align: center; /* Text zentrieren */
    white-space: nowrap; /* Verhindert, dass der Text umbricht */
}
.modal-body .dropdown .btn-default{
	width:100%;
}


/* ------------------------------------------- */
.scrollbar:hover > .logo img{
	width:70%;
	left:15px;
}


/* Zeilenhöhe manuell anpassen */
sup, sub
{
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
}

sup {	bottom: 1ex; }
sub {	top: .5ex; }

table {	margin-bottom:15px; }
table.tableCenter { margin:0px auto; }
th, td { vertical-align: top; padding: 3px; }

#landFlag {
	position: relative;
	bottom: 30px;
	width: 35px;
	overflow: hidden;
	border-radius: 4px;
	height: 24px;
	box-shadow: 3px 3px 5px rgba(0,0,0,.65);
}
#landFlag img {
	width: 100%;
	margin: -5px 0 0 0;
}
table.altColoredBG tr {	background-color:#c7c7c7; }
table.altColoredBG tr:nth-child(2n) {	background-color:#FBD58A; }

td.tdCenter { text-align: center; }
td.tdRight { text-align: right; }

::-webkit-input-placeholder { color: #999; }
:-moz-placeholder { color: #999; }

.imgCenter
{
 display: block;
 margin:0px auto;
 margin-bottom:25px;
 margin-top:10px;
}

.pRight { text-align: right; }
.pCenter { text-align: center; }

.divCenter
{
 display: block;
 margin:0px auto;
 text-align: center;
}

.clear { clear: both; }

.formRow {	clear: both; }
.formGrey { color: #999;}

.formColLeft
{
	height:30px;
	margin:0;
 margin-right: 1em;
 padding-left: 5px;
	float:left;
 text-align: right;
 width: 150px;
}

.formColRight
{
	height:30px;
	display:block;
	float:left;
	margin:0;
 text-align: left;
 
}

#rahmen
{
	/* width:100%; 
 margin:0 auto;*/
 margin-top: 10px;
 margin-bottom: 20px;
	background-color:#fff;
	border: 2px solid rgba(0,0,0,.3);
 padding: 12px 10px 10px 10px;
 border-radius:5px;
 margin-top: 10px;
 min-height: 90vh;
 background-image:url(../../images/nguide_menu_bg2.jpg);
 background-repeat:no-repeat;
}
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: white;
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

.login_container{
	box-shadow: 0 15px 10px -8px rgba(0,0,0,.4);
}
#content
{
 clear: both;
 margin: 10px;
}

#contentLeft
{
 width: 730px;
 padding-left: 10px;
 float: left;
}

#contentRight
{
 float: right;
 width: 200px;
 text-align: right;
}

#newFoodDialog, #modFoodDialog { padding-top: 20px; }
#modFoodDialog .formColLeft { width: 100px; }

#newCode { width: 100px; }
#modGruppe, #newGruppe { width: 376px; }
#modName, #newName { width: 370px; }

.gruppe .selectize-dropdown .active {
	background-color: #b9b9b9;
}


#valuesForm hr { width: 320px; }
/* #valuesForm { margin-left: 200px; } */

#valuesForm .subhead {
	background: #c5d679;
	color: white;
	z-index: 1;
	padding-left: 0px !important;
	height: 36px;
	margin-bottom: 15px;
	border-radius: 2px;
	padding-top: 0px;
	transform: rotate(90deg);
	position: absolute;
	left: -268px;
	top: 285px;
	text-align: left;
	width: 604px;
}

#valuesForm .subhead_vgl{

	background: #c5d679;
	color: white;
	z-index: 2;
	padding-left: 0px !important;
	height: 36px;
	margin-bottom: 15px;
	border-radius: 2px;
	padding-top: 0px;
	transform: rotate(90deg);
	position: absolute;
	left: -268px;
	top: 285px;
	text-align: left;
	width: 604px;
}
#valuesForm .subhead_sort {
	background: #c5d679;
	color: white;
	z-index: 1;
	padding-left: 0px !important;
	height: 36px;
	margin-bottom: 15px;
	border-radius: 2px;
	padding-top: 0px;
	transform: rotate(90deg);
	position: absolute;
	left: -167px;
	top: 182px;
	text-align: left;
	width: 400px;
}
.subheadVZ{
	height: 53.8px;
	background: #c5d679;
	color: white;
	margin-bottom: 15px;
	border-radius: 4px;
	padding-top: 10px;
	transform: rotate(0deg);
	position: absolute;
	left: 15px;
	top: 0;
	text-align: left;
	z-index: 1;
	padding-left: 2px !important;
	width: inherit;
}
.nrhead {
	height: 36px;
	width: 100%;
	border: 0px solid rgba(0,0,0,.3);
	background: lightgray;
	padding: 0;
	color: white;
	transform: rotate(90deg) !important;
	position: absolute;
	left: -289px;
	top: 289px;
	text-align: left;
	z-index: 1;
	padding-left: 13px;
	border-radius: 2px;
}
.produktDivSubhead,.produktDivSubhead2{
height: 36px;
background: #337ab7;
color: white;
margin-bottom: 15px;
border-radius: 4px;
border-left: 2px groove white !important;
padding-top: 0px;
padding-left: 19px;
transform: rotate(90deg);
position: absolute;
left: -288px;
top: 280px;
text-align: left;
width: 614px ;
}
/* toggle class */
.produktDivSubhead_sm {

	min-width: 614px !important;
	
}
#headerIst, #headerIstX{
	font-size: 14px;
	font-weight: bold;
	color:white !important;
}

.ui-widget-overlay
{
 opacity: 0.8 !important;
}

/* .thLeft { width:45%; }
.thCenter { width:10%; }
.thRight { width:45%; } */

#allergenSelectLeft, #allergenSelectRight, #zusatzSelectLeft, #zusatzSelectRight
{
width: 300px;
height: 250px;
}

.zusatzColCenter { padding-top: 90px; }
#zusatzSaveCancel { margin-left: 43px; }
#tdFilter { margin-left: 5px; }
#tdSortBy { margin-left: 87px; }

/* Kontaktdaten bearbeiten */
#modKontaktForm {display:none;}
#kontaktLand { width: 30px; }
#kontaktPlz { width: 70px; }

#adminDiv { 
float: left;
z-index: 10;
background: rgb(160, 160, 160);
min-height: 120px;
position: fixed;
right: -270px;
width: 320px;
-webkit-transition: all 500ms cubic-bezier(0.635, 0.000, 0.195, 1.330);
transition: all 500ms cubic-bezier(0.635, 0.000, 0.195, 1.330);
/*box-shadow: -3px 3px 6px rgba(0,0,0,.3);*/

    border: 1px solid rgba(0,0,0,.2);
	border-left: 2px groove white;
    box-shadow: 2px 2px 4px rgba(0,0,0,.35);
	}
#adminDiv:hover{
	right: -5px;
	z-index: 100;
}
.info{
transform: rotate(-90deg);
display: block;
position: relative;
top: -66px;
left: -133px;
color: rgba(255,255,255,0.5);
font-weight: 700;
font-size: 14pt;


}
/* #verInfo{
width: 250px;
height: 90px;
top: -19px;
right: 15px;
padding-top: 3px;
position: relative;
background: white;
} */
#verInfo {
	min-width: 250px;
	height: 94px;
	top: -19px;
	right: 15px;
	padding-top: 3px;
	position: relative;
	background: white;
}
/* -------------Verfügbare Lebensmittel---------------- */
.verf_Lebenmittel{
	top: 25px;
	padding: 0px 8px;
}
.verf_quellen{
	top: 20px;
	padding: 0px 8px;
}
.verf_Lebenmittel label, .verf_quellen label{
	padding-left: 19px ;
}

#LMGSelect { 
	background:white;
	border:none;
	width: 350px;
	height:30px;
	border-radius:4px;
	position: relative;
	top: -2px;	
	}
#LMGSelect:hover { 
	color:rgba(0,0,0,.75);
	}
/*Select Suche*/

.quelle{
	position: relative !important;	
	float: left;
	transition: ease-in-out all 1.3s;
	width: 100% !important;
	top: -3px !important;
	left: 0px !important;
}
#quellenauswahl{
	width:100%;
	position: relative !important;	
	top:5px ;
}
#quellenauswahl .dropdown-menu {
	position: absolute;
	top: 100%;
	left: 15px;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 80%;
	padding: 10px 0px;
	margin: -2px 0 0;
	font-size: 11px;
	text-align: left;
	list-style: none;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.btn-select{
	background: white;
	width: 100%;
	position: relative;
	top: 0px;
	left: 0px;
	min-height: 34px;
	text-align: left;
	font-size: 13px !important;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,.21);
}
/* .dropdown{
	font-family: inherit !important;
	display: block !important;
}
.dropdown-menu, .dropdown-menu.dropdown-menu-select, .dropdown-menu.show {
    position: absolute;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 355px;
    padding: 8px;
    margin: 2px 0 0;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-top: none;
    border-radius: 0px 0px 4px 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    font: 12px/30px Arial, sans-serif, regular;
    font-size: 14px;
    font-style: normal;
} */

#eLMport .dropdown-menu, #eLMport .dropdown-menu.dropdown-menu-select, #eLMport .dropdown-menu.show {
	position: absolute;
	top: -44px !important;
	left: -24px !important;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 329px !important;
	padding: 0px;
	margin: 2px 0 0 !important;
	text-align: left;
	list-style: none;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,.15);
	border-top: none;
	border-radius: 0px 0px 4px 4px;
	-webkit-box-shadow: 4px 13px 9px -5px rgba(0,0,0,.175);
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
	font: 12px/30px Arial, sans-serif, regular;
	font-size: 14px !important;
	font-style: normal !important;
	transform: translate3d(-2px, -3px, 0px);
}
#drop2::after{
	display:none;
}
.dropdown-menu .dropdown-menu-select{
	position: absolute;
	top: 100%;
	left: 16px !important;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 355px !important;
	padding: 8px;
	margin: 2px 0 0 !important;
	text-align: left;
	list-style: none;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,.15);
	border-top: none;
	border-radius: 0px 0px 4px 4px;
	-webkit-box-shadow: 4px 13px 9px -5px rgba(0,0,0,.175);
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
	font: 12px/30px Arial, sans-serif, regular;
	font-size: 14px !important;
	font-style: normal !important;
	transform: translate3d(-2px, 31px, 0px) !important;
}


.selectize-dropdown .optgroup-header {
    color: white !important;
    background: #00abff !important;
    cursor: default;
    font-weight: 700;
    font-size: 12pt !important;
}
.selectize-dropdown .active {
	color: #fff !important;
	background-color: #00bbbb;
	text-shadow: 0px 0px 0px;
}
.menubar-top{
	position: sticky;
	top: 0px;
	background: rgba(255,255,255,.75);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 65%,rgba(255,255,255,0) 100%);
	height: 100px;
	border-radius: 6px;
	width: 100% !important;
	border: 0px solid black;
	z-index:1000;
	padding-left:15px;
	padding-right:15px;
	padding-top:15px;
}
.col-xs-1{
	display:none;
}
#getcode{
	background: red;
height: 50px !important;
width: 100px !important;
display: block;
float: left;
}
.glyphicon-refresh {
	position: absolute;
	top: 9px;
	display: inline-block;
	font-family: "Glyphicons Halflings";
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: rgba(255,255,255,0.65);
	font-size: 24px;
	animation: spin 2s linear infinite;
	text-shadow: 0px 0px 4px rgba(0,0,0,.2);
	right: 10px;
}
.glyphicon {
	position: relative;
	top: 1px;
	display: inline-block;
	font-family: "Glyphicons Halflings";
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	left: -1px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* ---------preload icon----------- */
#loader {
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 50;
  width: 80px;
  height: 80px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #c5d679;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
      box-shadow: 0 0px 13px rgba(0,0,0,.45) inset, 0 0 13px rgba(0,0,0,.55);
    box-sizing: border-box; /* Hinzugefügtes box-sizing */
}
#blackout {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.55) !important;
	background: -webkit-linear-gradient(20deg, rgba(0, 0, 0, 0.95) 0%, rgba(176, 176, 176, 0.75) 100%);
	background: linear-gradient(20deg, rgba(0, 0, 0, 0.95) 0%, rgba(176, 176, 176, 0.75) 100%);
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 9999 !important;
}

#blackout svg {
    width: 80%;
    height: 200px;
}

#writing-text {
    font-family: "Grechen Fuemen", system-ui; /* Beispiel für Schreibschrift */
    font-size: 64px;
    fill: white; /* Jetzt wird der Text vollflächig ausgefüllt */
    stroke: white;
    stroke-width: 1;
    stroke-dasharray: 500; /* Setzt die Länge des Strichs */
    stroke-dashoffset: 500; /* Start bei vollem Offset */
    animation: draw 2s , fillIn .5s ; /* Animiert das Zeichnen und das Füllen */
}

@keyframes draw {
    to {
        stroke-dashoffset: 0; /* Die Umrisslinie wird gezeichnet */
    }
}

@keyframes fillIn {
    0% {
        fill: transparent; /* Der Text beginnt transparent */
    }
    100% {
        fill: white; /* Füllt den Text nach der Umrissanimation */
    }
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* ---------feedback icon----------- */
#feedback {
  display: none;
  position: absolute;
  top: 65%;
  right: 50px;
  transform: translateY(-50%);
  color: green;
  font-size: 18px;
  animation: fadeOut 3s ease-in-out;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:20px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:20px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}
.navbar {
    position: relative;
    max-height: 170px;
    margin-bottom: 5px;
    border: 1px solid transparent;
}
.navbar-brand{
	float:none !important;
}
 .navbar-brand > img {
    display: block;
    position: relative;
    top: -5px;
    left: 0px;
}
.navbar-nav {
    min-height: 50px !important;
	z-index:999;
}


/* -----buttons version 2-----*/

.caret{
	transform:rotate(-90deg);
	transition: ease-in-out all .01s;	
}
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 5px dashed;
    border-top: 5px solid\9;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
	right: 4px;
}
.nav .open > li > a:hover > .caret{
	transform:rotate(0deg) !important;
}
.qauswahl > .caret{
	transform:rotate(0deg);
	position:relative;
	top:8px;
}
.qauswahl:active > .caret, .qauswahl:focus > .caret{
	transform:rotate(180deg) !important;
}
.qauswahl .open > .dropdown-menu > .caret,
#quellenauswahl > .dropdown-menu > .caret{
	transform:rotate(180deg) !important;
}
/* .dropdown-menu {
    left: 20px;
} */

/* -----buttons ende-------- */
.LMscrollLI .form-group{
	top: 3px;
	left: 0px;
	padding: 0px 0px;
}

 #search{
	position:sticky;
	top:0;
	background: white;
	z-index:999;
	width:100%;
}


#collapseLM li:hover{
	background-color:#cccccc ;
}
#collapseLM a{
	text-decoration:none;
}
.inhaltstable{
	display: inline-table;
}
#rzpList .inhaltstable{
	display: inline-table;
	position: relative;
	top: 22px;
}

#produktTable{
	border-radius: 4px;
	/* max-height: 500px !important; */
}
#produktTable > thead{
	position: sticky;
	top:34px;
	background-color:#c5d679;
	color:white;
}

/* ---------------- */
.switch {
  position: relative;

  padding: 0 1rem;
 /*  font-family: verdana; */
  z-index: 0;
  top:2px;
  
}
.switch:before {
  content: "  ";
  position: absolute;
  left: 5px;  	
  top: 5px !important;
  z-index: -1;
  width: 100%;
  height: 30px;
  background: white;
  border-radius: 30px;
  border: 1px solid #ccc;

}
.switch__label {
	display: inline-block;
	width: 50px;
	padding: 5px;
	color: darkgray;
	text-align: center;
	cursor: pointer;
	transition: color 200ms ease-out;
	z-index: 50;
	position: inherit;
	font-size: 10pt;
}
.one{
	left:-11px;
	top: 7px;
	color:lightgray;
}
.two{
	left:23px;
	top: -25px;
	color: black;
}
.switch__label:hover {
  color: #57d355;
}
.switch__indicator {
  height: 25px;
  width: 25px;

 
  position: absolute;
  top: 8px !important;
  left: -42px;
  background: #337ab7 !important;

  transition: transform 1000ms cubic-bezier(0.02, 0.94, 0.09, 0.97), background 300ms cubic-bezier(0.17, 0.67, 0.14, 1.03);
  transform: translate3d(1rem, 0, 0); 
  border-radius: 0;
}
.switch input#radioSortAsc:checked ~ .switch__indicator {
	height: 24px;
	width: 42px;
	background-color: rgba(0,0,0,.75);
	border-radius: 20px;
	transform: translate3d(3.2rem, 0, 0);

}
.switch input#radioSortDesc:checked ~ .switch__indicator {
	height: 24px;
	width: 42px;
	background-color: lightgray;
	border-radius: 20px;
	left: -69px;
	transform: translate3d(7.8rem, 0, 0);

}

.switch input[type=radio]:not(:checked), .switch input[type=radio]:checked {
  display: none;
}
.switch {
	position:relative;
  top:0px;
}

.LM-list{
	margin-bottom: 0px !important;
	top: 160px;
	position: relative;
}

.LM-list h4{
	padding: 5px 15px 5px 15px;
}
.LM-list .btn, .relationshead{
	height: 79px;
	width: 100%;
}
.Inhaltst-list{
	margin-bottom: 0px !important;
	top: 0px;
	position: relative;
} 
.Inhaltst-list h4{
	padding: 5px 15px 5px 15px;
}
.Inhaltst-list .btn, .relationshead{
	height: 79px;
	width: 100%;
}
/* ----------Inhaltsstoffe/Verzehr collapse---------- */
.LM_werte{
	position: relative;
	top: 30px;
	background: white !important;
	height: 639px;
	min-width: 10% !important;
}
#records_table{
	border:1px solid black;
}
#LM_werte {
	position: relative;
	top: 0px;
	/* background: white !important; */
	background: rgba(255,255,255,.2);
	height: 92%;
	overflow-y: scroll;
	overflow-x: hidden;
}
#LM_werte .panel-body{
	background: white;
}
#LM_werte .panel-default{
	border: 1px solid rgba(0,0,0,.2);
	margin: 3px 0px;
	color: inherit;
	background: white;
	z-index: 10;
	position: relative;
	box-shadow: 0 5px 6px -4px rgba(0,0,0,.6);
}
#LM_werte .panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 13px;
    color: inherit;
}
.lmCenterList {
	position: relative;
	top: -7px;
	z-index: 0;
}

/* .LMscroll {
	margin-top: 15px !important;
	border: 1px solid rgba(0,0,0,.3);
	padding: 0px 15px;
} */
.modIStoffe li,.modPatient li{
	margin-top: 5px;
	transition:ease-in-out all 0.2s;
	
}
.modIStoffe li:hover,.modPatient li:hover {
	color: white  !important;
	background:rgba(0,0,0,.23) !important;


}

.nav .active{
	background: rgba(140, 140, 140, .9)!important;
	color: rgba(255,255,255,1)!important;
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,.4),2px 2px 4px -0px rgba(0,0,0,.7) inset;
	border-top: 1px solid rgba(0,0,0,.5);
	border-bottom: 1px solid rgba(255,255,255,.8);
	top:2px;
}

.active > li{
	color: white  !important;
	background:rgba(0,0,0,.4) !important;
	border:0px solid;
	padding-top: 20px;
	padding-bottom: 20px;
	/* font-weight: 700; */
}

.LMscrollLI{
	position: sticky;
	top: 0px;
	z-index: 999;
	background: white;
	height: 55px;
	box-shadow: 0 11px 12px -15px;	
}
#valuesForm .LmCollapse{
	background: white;
	border:0px solid rgba(0,0,0,.2);

	color:black;
	top: 40px; 
	padding-left: 0px;
	padding-right: 0px;
}
/* .IsCollapse .form-group input{
	width:100px;
	box-shadow: 0 11px 12px -11px;
} */
.IsCollapse .form-group {
	width: 196px;
}
.IsCollapse .form-group:nth-child(1){
	position:relative;
	left:0px;
	
}
.IsCollapse .form-group:nth-child(2){
	position:relative;
	left:0px;
}
.IsCollapse .form-group:nth-child(3){
	position:relative;
	left:25px;
}
.IsOuter{
	border: 0px solid rgba(0,0,0,.2);
	top: 0px;
	position: relative;
	padding-left: 66px;
	padding-right: 15px;
	 overflow-y: scroll;
	overflow-x: hidden;
	/*height: 825px; */
	height: 96vh;
	padding-top: 0px;
	background: rgba(50,150,70,.2);
	border-bottom: 10px solid rgba(50,150,70,.01);
	border-top: 5px solid rgba(50,150,70,.01);
	z-index: 0;
}
.vglOuter{
	top: -12px;

}
.IsOuter .inhalt_opt{
	position: sticky !important;
	left:0;
}
/* ----------Verzehr Tabs---------- */


.drag-handle {
	width: 10px;
	float: left;
	position: absolute;
	top: 8px;
	left: 4px;
	height: 30px;
	background: rgba(0,0,0,.3);
	background-color: rgba(0,0,0,.3); /* For browsers that do not support gradients */
	background-image: linear-gradient(to right, rgba(0,0,0,.3) , white);
	padding-top: 6px;
	color: rgba(0,0,0,.8);
	cursor: move;
	border-radius: 4px 0px 0px 4px;
	text-shadow: 0px 1px 0px white;
	width: 15px !important;
	padding-left: 2px;
}
#eptypeSel{
	/* padding-left: 19px; */
	border-left-width:10px;
}
#rzpList .drag-handle {
	width: 10px;
	float: left;
	position: absolute;
	left: 2px;
	height: 30px;
	background: rgba(0,0,0,.3);
	background-color: rgba(0,0,0,.3); /* For browsers that do not support gradients */
	background-image: linear-gradient(to right, rgba(0,0,0,.3) , white);
	padding-top: 6px;
	color: rgba(0,0,0,.8);
	cursor: move;
	border-radius: 4px 0px 0px 4px;
	text-shadow: 0px 1px 0px white;
	width: 15px !important;
	padding-left: 2px;
}
.drag-handle.dragging {
    /* CSS-Stile während des Ziehens hier */
    left: 0;
    width: 100%;
    background: rgba(0,0,0,.3);
    background-color: rgba(0,0,0,.3);
    background-image: linear-gradient(to right, rgba(0,0,0,.3) , white);
    padding-left: 0;
}

.IsOuterVZ{
	border: 0px solid rgba(0,0,0,.2);
	top: 0px;
	position: relative;
	padding-right: 15px;
/* 	overflow-y: scroll; */
	height: 96vh;
	padding-top: 0px;
	/* background: rgba(50,150,70,.2); */
	background: rgba(94, 94, 94, 0.25);
	
	border-bottom: 10px solid rgba(50,150,70,.01);
	border-top: 5px solid rgba(50,150,70,.01);
	z-index: 0;
}
.IsOuterMP{
	border: 0px solid rgba(0,0,0,.2);
	top: 0px;
	position: relative;
	padding-right: 15px;
/* 	overflow-y: scroll; */
	height: 825px;
	padding-top: 0px;
	/* background: rgba(50,150,70,.2); */
	background: rgba(50,50,50,.1);
	
	border-bottom: 10px solid rgba(50,150,70,.01);
	border-top: 5px solid rgba(50,150,70,.01);
	z-index: 0;
}


.IsOuterVZ .RP-list input, .IsOuterVZ .MP-list input, .IsOuterVZ .EP-list input, .dubTab input {
	width: 100%;
	border: 1px solid #ddd;
	background-color: white;
	padding: 5px;
	border-radius: 4px;
}
#menge,#unit,#code,#gpu,#quati {
	/* width: 213px; */
	width: -moz-available;
}
.auswertungVZ .nav-tabs .active {
	background: rgba(140, 140, 140, .9) !important;
	color: rgba(255,255,255,1) !important;
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,.4),2px 2px 4px -0px rgba(0,0,0,.7) inset;
	border-top: 0px solid rgba(0,0,0,.5);
	border-bottom: 0px solid rgba(255,255,255,.8);
	border-radius:4px 4px 0px 0px;
	top: 0px;
}
.auswertungVZ .nav-tabs li > a {
	color: black !important;
}
.auswertungVZ .tab-content > .active {
	color: black !important;
	background-color: transparent;
	text-shadow: 0px 0px 0px;
}
.IsOuterVZ .nav-tabs > li {
	float: left;
	margin-bottom: -4px;
}
.IsOuterVZ .nav-tabs > li.active > a {
	background: rgba(255, 255, 255, 1) !important;
	color: black !important;
	box-shadow: none;
	border-top: 0px solid rgba(0,0,0,.5);
	border-bottom: 0px solid rgba(255,255,255,.8);
	top: -1px;
	border-radius: 7px 7px 0 0 !important;
	padding-bottom: 12px !important;
}
.IsOuterVZ .nav .active{

	/* box-shadow: 0px 0px 0px 0px rgba(0,0,0,.4),2px 2px 4px -0px rgba(0,0,0,.7) inset; */
	border-top: 0px solid rgba(0,0,0,.5);
	border-bottom: 0px solid rgba(255,255,255,.8);
	top:0px;
	border-radius: 7px;
}
/* li.active:nth-child(2){
	top:4px !important;
} */
.nav > li > a:focus, .nav > li > a:hover {
	text-decoration: none;
	background-color: #eee;
	top: 0px;
	border-radius: 7px ;
}
.save-checkbox {
	top: -5px;
	position: relative;
}

.tooltip {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    padding: 15px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
}
.tooltipSaveBt {
	position: absolute;
	bottom: -2px;
	left: -40%;
	transform: translateX(-50%);
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	width: 116px;
	height: 49px;
}
.delete-button {
	background-color: red;
	border: none;
	padding: 0;
	width: 15px;
	height: 15px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	border: 1px solid #ccc;
	/* position: relative; */
	/* left: 17px; */
	padding-top: 3px;
}

/* Stil für das weiße "X" */
.delete-icon {
	color: white;
	font-weight: bold;
	position: relative;
	top: -0.5px;
	left: -0.5px;
}

/* Stil für den Löschbutton beim Hovern (Maus darüber bewegen) */
.delete-button:hover {
    background-color: darkred;
}


/* ---------- ---------- */
/* Klienten */
.klienteninfo .col-md-3, .klienteninfo .col-md-6 {
	margin-bottom: 10px;
}
.klienteninfo .form-check label {
	white-space: normal;
	margin-left: 4px;
	margin-top: 10px;
	margin-right: 10px;
}

/* Klientenberatung */
.current-day {
    background-color: #e8e8e8 !important; /* Gelbe Hervorhebung */
    font-weight: bold;
    color: #000;
}
/* Sticky-Container für Schaltflächen und Header */
#calendarContainer .sticky-container {
    position: sticky;
    top: 0;
    background-color: #fff; /* Hintergrundfarbe für den gesamten Container */
    z-index: 10; /* Damit dieser Container über dem Kalender-Body liegt */
    padding: 10px 0; /* Etwas Abstand für den Container */
    overflow: hidden; /* Verhindert, dass der Inhalt überläuft */
}

/* Fixierung des Kalender-Headers */
#calendarHeader {
    position: sticky;
    top: 50px; /* Der Header beginnt unterhalb der Schaltflächen */
    background-color: #fff; /* Hintergrundfarbe für den Header */
    z-index: 5; /* Der Header sollte hinter den Schaltflächen bleiben */
    font-weight: bold; /* Optional: Mach den Header fett */
}
.sticky-container div:nth-child(1) {
	box-shadow: 0 8px 10px -11px rgba(0,0,0,0.65) !important;
	margin-top: -13px !important;
}

/* Optionale Verbesserung der Darstellung */
#calendarContainer table {
    width: 100%;
    border-collapse: collapse;
}

#calendarContainer th, #calendarContainer td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
}

#calendarContainer .time-header {
    width: 100px; /* Gleiche Breite wie die Zeitspalte */
}

#calendarContainer th {
    text-align: center;
    padding: 10px;
    font-size: 12px; /* Schriftgröße für die Wochentage */
	width: 130px !important;
}

#calendarContainer th br {
    display: block;
    font-size: 8px !important; /* Kleinere Schriftgröße für das Datum */
    color: #777; /* Helle Farbe für das Datum */
}

#calendarContainer td {
    min-width: 145px ;
    height: 30px;
    min-height: 30px;
    vertical-align: top;
	box-shadow: 0 0 0px rgba(0,0,0,0);
	background: inherit;
	transition: linear .25s all;
	
}

/* Standard hover-Effekt */
#calendarContainer td:hover {
    box-shadow: 0 0px 5px #31b0d5 inset;
    background: rgb(206, 206, 206);
    /* min-height: 80px; */
	border-radius:4px;
	z-index:99;

}

/* Zustand nach dem Klick - größere Höhe und Anzeige des Buttons */
#calendarContainer td.clicked {
    height: 150px; /* Höhere Höhe */
    position: relative; /* Ermöglicht das Positionieren des Buttons */
}

/* Der "+"-Button, der im "clicked"-Zustand erscheint */
#calendarContainer td .add-event-button {
    position: absolute;
    bottom: 10px; /* Button am unteren Ende des td */
    left: 50%;
    transform: translateX(-50%); /* Zentriert den Button */
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: none; /* Startet unsichtbar */
    opacity: 0; /* Startet mit unsichtbarer Animation */
    transition: opacity 0.3s ease-in-out; /* Fade-in-Animation */
}

#calendarContainer td .add-button, #appoint-list-table td .add-button{
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius:50%;
	opacity:0;
	transform: scale(.5);
	transition: opacity 0.3s ease-in-out;
}

/* Hover-Effekt für den Button */
#calendarContainer td .add-event-button:hover, #appoint-list-table td .add-button:hover {
    background-color: #45a049;
}
#calendarContainer td:hover .add-button, #appoint-list-table td:hover .add-button {
   opacity: 1;
   transform: scale(1);
}

#calendarContainer .highlight-row td, #appoint-list-table .highlight-row td {
    background-color: rgba(185, 185, 185, 0.15); /* Farbe für die Zeile */
}

#calendarContainer .highlight-column, #appoint-list-table  .highlight-column {
    background-color: rgba(185, 185, 185, 0.15); /* Farbe für die Spalte */
}
#calendarContainer .highlight-row td, #calendarContainer .highlight-column, #appoint-list-table .highlight-row td, #appoint-list-table .highlight-column {
    transition: background-color 0.3s ease;
}


/* Style für Events */
/* #calendarContainer .event {
    
    color: white;
    border-radius: 5px;
    padding: 2px;
    text-align: center;
		width: 130px ;
} */
#calendarContainer .event, #appoint-list-table .event {
	/* background-color: #78c7f7; */
	color: white;
	border-radius: 0;
	padding: 2px;
	text-align: center;
	width: 130px;
	overflow: unset;
	min-height: 64px;
	position: absolute;
	border: 1px solid rgba(0,0,0,.1);
}

#calendarContainer .time-cell, #appoint-list-table .time-cell {
    background-color: white;
	width: 80px !important;
	font-size: 12pt;
	font-weight: 700;
	border-top: 2px solid #bdbdbd;	
}
#calendarContainer .time-cell:hover, #appoint-list-table .time-cell:hover {
    background-color: white;
	box-shadow: 0 0 0px rgba(0,0,0,0);
	height: 30px;
}

.time-cell.halftime {
	font-size: 7pt !important;
	padding-left: 30px;
	color: #959595;
	border-top: 2px dotted #dbdbdb !important;
	max-width: 50px !important;
	padding-top: 0px;
}
#calendarContainer .cell-content, #appoint-list-table .cell-content{
	height: 46px;
	overflow: visible; /* Wichtig für das Herauswachsen der Events */
}
.inside-sprechzeiten:nth-child(odd){
	border-top: 2px solid #bdbdbd;	
}
.inside-sprechzeiten:nth-child(even){
	border-top: 3px dotted #dbdbdb;	
}

.time-segment {
    width: 100%;
    height: 16.6%; /* 1/6 des 30-Minuten-Feldes */
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.time-segment:last-child {
    border-bottom: none;
}

.time-segment.hover-active {
    background-color: rgba(0, 123, 255, 0.3); /* Leichtes Blau für Hover */
}

/* Event Overlay, das dynamisch über die Zellen gelegt wird */
#calendarContainer .event-shape, #appoint-list-table .event-shape {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 123, 255, 0.7); /* Event-Farbe */
    z-index: 1; /* Event muss über den Zellen liegen */
    border-radius: 4px;
	/* width: 50%; */
	width: calc(50% - 10px); /* Platz für den Versatz */
	box-sizing: border-box;
    cursor: pointer;
    transition: z-index 0.2s ease, transform 0.2s ease;
	box-shadow: 0 0 0px rgba(0,0,0,0);
}
#calendarContainer .event-shape:hover, #appoint-list-table .event-shape:hover {
    transform: scale(1.02); /* Optional für einen Hover-Effekt */
	box-shadow: 0 0 6px rgba(0,0,0,.4);
}
#calendarContainer .event-shape .fa-regular, #appoint-list-table .event-shape .fa-regular {
    position: relative;
    top: -9px;
    left: 0;
}
#calendarContainer .event-shape .btn, #appoint-list-table .event-shape .btn {
    max-height:20px
}
#calendarContainer .event-shape .btn:active, #appoint-list-table .event-shape .btn:active {
    box-shadow: none;
}
#newEintragModal .modal-dialog, #appoint-list-table .modal-dialog, #newAppointmentModal .modal-dialog{
	width: 40vw;
}
#newEintragModal .terminFarbe{
	min-width:20px;
	min-height:20px;
	border-radius:50%;
}
#calendarContainer .overlap, #appoint-list-table .overlap{
    /* background-color: rgba(255, 0, 0, 0.5); */ /* Halbtransparentes Rot */   
	    left: 60px;
}


/* ---Kalender medidash----------------------------------------- */
.outside-sprechzeiten td {
	background-color: #f0f0f07d;
	max-height: 5px !important;
	color: #ccc;
	font-size: smaller;
	padding: 0px !important;
    padding-left: 0px;
	padding-left: 8px !important;
	display:none;
}
.outside-sprechzeiten td .add-button{   
    display: none;
}

.inside-sprechzeiten {
    height: 30px; /* Normale Höhe */
}

.time-header {
	position: sticky;
	background: #64646475;
	top: 0px;
	color: white;
}
/* Bereich 1 (links) */
.event-shape .left-area {
    flex: 1;
    text-align: left;
	padding: 10px;
}

/* Bereich 2 (rechts) - ist zunächst verborgen */
.event-shape .right-area {
    flex: 1;
    display: none; /* Anfangs unsichtbar */
    background-color: #ffffff;
	color: black;
    border-left: 2px solid #ddd;
	text-align: left;
	padding: 10px;
}

/* Vergrößerte Event-Shape */
.event-shape.expanded {
    min-width: 300px; /* Beispiel: Event vergrößern */

}

/* Style für den Bereich, wenn er sichtbar wird */
.event-shape.expanded .right-area {
    display: block; /* Sichtbar machen */
	
}
#karteiAll {
	overflow-y: auto;
	height: 46vh !important;
	background-color: #ffffff !important;
	color: black !important;
	position: relative;
	top: 0px;
}

#karteiAll table thead{
	position: sticky;
	top: 0px;
	background: white;
	z-index: 1;
	box-shadow: 0 9px 6px -9px black;
	border: 2px solid white;
}

#karteiAll table tbody .form-control {
	display: block;
	width: 100%;
	height: 26px; 
	padding: 4px 5px;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 0px solid #ccc;
	border-radius: 4px;
	box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}
#karteiAll table tbody .dbTickerRow {
	height: 26px !important; 
	padding: 4px 5px;	
}

#karteiAll .table .tab-content{
	padding:5px;
}


#entryList .disabledStyle {
	background-color: #eee !important;
	color: #666 !important;
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.6;
}


.lastCell .col-md-6{
	padding-left:1px;
	padding-right:1px;
}

#goaeSelect-container{
	flex: 1 1 40%; 
	position: relative;
}
#goaeSelect {
    display: block;
    width: 100%;
    padding: 4px 5px;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, .075);
    transition: max-height 0.3s ease;
    max-height: 100px;
    overflow-y: auto;
    height: 80px !important;	
}
#goaeSelect option {

  padding-left: 20px;
  text-indent: -10px;
}
#goaeSelect option:hover {
background:#85d7ff;
}
#goaeSelect option:disabled {
    color: #999;            
    background-color: #eee; 
    cursor: not-allowed;   
}

#goaeSelect-container:hover #goaeSelect {
    max-height: 300px;
}

#goaeSelect-container {
    position: relative;
}

#goaeAuswahlListe {
    /* list-style: none; */
    padding-left: 15px;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    min-height: 106px;
}


.kartei li .active {
	background: rgb(255, 255, 255) !important;
	color: rgb(0, 0, 0) !important;
	box-shadow: 0px -6px 8px -3px rgba(0,0,0,.4) !important;
	border-top: none !important;
	top: 0px;
	border-radius: 4px 4px 0px 0px !important;
}

.kartei .active > li{
	color: white  !important;
	background:rgba(0,0,0,.4) !important;
	border:0px solid !important;
	padding-top: 20px;
	padding-bottom: 20px;
}
.kartei .nav-tabs > li > a {
  margin-right: 0px !important;
}
.kartei .nav > li > a:focus, .nav > li > a:hover {
	text-decoration: none;
	background-color: #eee;
	top: 0px;
}
.kartei .nav-tabs > li > a:hover {
	border-color: none;
}


.karteiTab{
	margin-bottom: 0px !important;
	position: relative;
	top: 15px;
	margin-bottom: 0px !important;
}
#addKarteiRow {
	position: relative;
	top: 10px;
	box-shadow: 0 -7px 9px -8px rgba(0,0,0,.6);
	border-bottom: 0px solid;
	border-radius: 4px 4px 0px 0px;
}

.newRowKartei{
	background: rgba(0, 142, 122, 0.37);
}


select[disabled].behKartei, .form-control[name="behandler[]"] {
    appearance: none !important;
    background-color: #e9ecef !important;
    border: 1px solid #ced4da !important;
    pointer-events: none !important;
}


/* Bereich Dokumente */
#formModal .nav .active {
	background: rgb(255, 255, 255) !important;
	color: rgb(0, 0, 0) !important;
	box-shadow: 0px -6px 8px -3px rgba(0,0,0,.4) !important;
	border-top: none !important;
	top: 0px;
	border-radius: 4px 4px 0px 0px !important;
}
#formModal .active > li{
	color: white  !important;
	background:rgba(0,0,0,.4) !important;
	border:0px solid !important;
	padding-top: 20px;
	padding-bottom: 20px;
}
#formModal .nav-tabs > li > a {
  margin-right: 0px !important;
}
#formModal .nav > li > a:focus, .nav > li > a:hover {
	text-decoration: none;
	background-color: #eee;
	top: 0px;
}
#formModal .nav-tabs > li > a:hover {
	border-color: none;
}


#vorlagenListe .baustein,
#tab2-aufzeichnungen .baustein, 
#vorlagenListeTab2 .baustein,
#vorlagenListeTab3 .baustein,
#arztbriefeListeTab3 .baustein {
  background-color: #f0f0f0;
  padding: 6px;
  margin-bottom: 4px;
  border: 1px solid #bbb;
  border-radius: 4px;
  cursor: move;
}
#vorlagenListe .baustein:hover,
#tab2-aufzeichnungen .baustein:hover,
#vorlagenListeTab2 .baustein:hover,
#vorlagenListeTab3 .baustein:hover, 
#arztbriefeListeTab3 .baustein:hover {
  background-color: #e0e0e0;
}



/* Bereich Patienten */
#patModal .klienteninfo .col-md-2,#patModal .klienteninfo .col-md-5, #patModal .klienteninfo .col-md-3, #patModal .klienteninfo .col-md-1 {
	margin-top: 5px;
}

#patModal .klienteninfo .col-nf-3, #patModal .klienteninfo .col-nf-15, #patModal .klienteninfo .col-nf-7-5 {
	cursor: text !important;
	padding: 2px 5px 5px 2px;
	height: 25px;
	margin: 5px 0px;
}

#patModal .klienteninfo .selSex .form-check{
	border: 1px solid rgba(0,0,0,0.1);
	padding-left: calc(100% / 4);
}
#patModal .klienteninfo .row-nf{
	padding-left: 15px;
	padding-right: 15px;
	height: 75px;
	padding-top: 3px;
}
#patModal .klienteninfo .row-nf:nth-child(odd) {
    background: rgba(0, 0, 0, 0);
}

#patModal .klienteninfo > .row-nf:last-child {
    background: rgba(255, 255, 255, 1) !important;
}

/* halbes Grid	 */	
#patModal .col-nf-7-5 {
	flex: 0 0 calc(100% / 15 * 7.5) !important;
	max-width: calc(100% / 15 * 7.5) !important;
}

/* Neuen Patienten-Anlegefenster --------------------------------*/
/* #newClientModal .downBtn .btn {
	padding: 5px;
	padding-top: 15px;
	height: 50px;
	width:100%;
} 
#newClientModal .downBtn .btn .fa-lg{
	top:0px;
}
*/

#newClientModal .modal-body .selSex .form-check-label {
	white-space: normal;
	margin-left: 8px;
	top: 10px !important;
	position: relative !important;
	left: -5px !important;
}

#newClientForm .col-md-3 label {
	width: 200px;
	padding: 10px 0px 0px 0px;	
}
#newClientForm .col-md-6 label {
	width: 80px;
	padding: 10px 0px 0px 0px;	
}
#newClientForm .col-md-1 {
	height: 140px;	
}
#newClientForm .vertical-title h5 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    margin: 0; 
    white-space: nowrap; 
	position: relative;
	top: 25px;    
    display: flex;
    align-items: center; 
}
#newClientModal .modal-content {
    display: flex;
    flex-direction: column; 
	position: relative;
}
/* #newClientModal .modal-header {
	position: absolute;
	left: -40px;
	top: 58vh;
	transform: rotate(0deg);
	transform-origin: left top;
	white-space: nowrap;
	padding: 10px;
	height: auto;
	border-bottom: none;
	background: rgba(255,255,255,.6);
	width: 345px;
	
} */
#newClientModal .modal-header {
	position: absolute;
	transform: rotate(0deg);
	white-space: nowrap;
	padding: 10px;
	width: 100%;
	height: 60px;	
}

#newClientModal .modal-header h5 {
	font-weight: 700;
	color: #31b0d5;
	font-size: 12pt;
}

#newClientModal .modal-body { 
	margin-top: 40px;
}
/* #newClientModal .modal-footer {
	display: flex;
	flex-direction: column;
	position: absolute;
	right: -95px;
	top: 40%;
	transform: translateY(-50%);
	padding: 0px;
	height: 88vh;
	border: none;
	width: 120px;
	padding-top: 30%;
}
#newClientModal .modal-footer .btn{
	height: 100px;
	width: 120px;
	margin: 10px;
} */

#newClientModal .form-check {
	display: flex;
	align-items: flex-start;
	margin-bottom: 9px;
	border: 1px solid rgba(0,0,0,.17);
	padding: 0px 0px 8px 25px !important;
	top: 0px;
	position: relative;
}

#showPatienten {
	border: 1px solid rgba(0,0,0,.2);
	padding: 10px;
	z-index: 9999 !important;
display: flex;
position: fixed;
width: 12%;
left: 5.5%;
top: 16%;
float: left;
	background: white;
	box-shadow: 0 7px 7px -4px rgba(0,0,0,.8);
	transform: scaleY(0);
	transform-origin: top;
	max-height: 210px;
	overflow-y: auto;
	border-top: 0px;
	border-radius: 0px 0px 4px 4px;
	transition: transform 0.3s ease-out, max-height 0.3s ease-out;
}


#showPatienten.open {
    transform: scaleY(1);  /* Öffnen (auf volle Größe skalieren) */
    max-height: 210px;  /* Maximalhöhe aktivieren */
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rotate-icon {
    animation: rotate 1s linear infinite;
}

/* Sichtbarkeit der Zellen */
td {
    border: 1px solid #ccc;
    padding: 2px !important;
    text-align: left;
    position: relative;
}
#karteiAll select[name="behandler[]"], #karteiAll select[name="was[]"] {
    width: 75% !important;
	padding: 4px 5px 0px 12px !important;
}


/* Diese Divs erscheinen in den Zellen und ermöglichen eine 5-Minuten-Einteilung */
/* Time-Slots werden nur angezeigt, wenn der Benutzer mit der Maus über einer Zelle schwebt */
.cell-content .time-slot {
	display: block;
	position: absolute;
	width: 100%;
	height: 10px;
	background-color: rgba(255, 255, 255, 1);
	left: 0;
	cursor: pointer;
	transition: background-color 0.3s ease;
	top: calc(10px * var(--slot));
	border-bottom: 1px dashed rgba(0,0,0,.1);
	border-radius: 0px;
}

/* Wenn die Maus über der Zelle ist, zeigen wir die Time-Slots */
td:hover .time-slot {
    display: block;
}

/* Nur der Slot, über den die Maus schwebt, bekommt den Hover-Effekt */
.time-slot:hover {
    background-color: rgba(0, 150, 0, 0.4);
}

.exportBtn{
	display:none; 
}
/* Setup All */
#setupContent{
	background: white !important;
	border: 1px solid rgba(0,0,0,.2);
	height: 100%;
	padding: 10px;
	overflow-y: scroll;
}
#setupContent .form-group{
	background: #e6e6e6;
	border: 1px solid #bdbdbd;
	padding: 0px 15px 15px 15px;
	margin: 5px;
}
#setupContent .form-group .form-group{
	background: #e6e6e6;
	border: 0px solid #bdbdbd;
	padding: 8px 5px 8px 5px;
	margin: 0px;
}
#setupContent .Infotext {
	background: white !important;
	border-radius: 4px;
	padding: 0px 15px 0px 15px !important;
	min-height: 50px;
	margin-bottom: 0px;
}

#setupModal .subOption .btn.active, .btn:active {
	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
/*	min-width: 242px !important;
 	background: linear-gradient(270deg, rgba(254,254,254,1) 13%, rgba(212,212,212,1) 57%); */
}

/* Setup Timeslots */

#timeSlotOpt, #timeSlotOpt tfoot{ 
	background: white !important;
	border-radius: 6px !important;
}
#timeSlotOpt .typOpt, #timeSlotOpt .timeOpt, #timeSlotOpt .txtOpt{
	border: none !important;
	box-shadow: none !important;
	padding: 0px 0px 0px 0px !important;
	text-align: left !important;
	height: 30px;
	outline: none !important;
}

#timeSlotOpt td{
	box-shadow: none !important;
	padding: 0px 5px 0px 8px !important;
	text-align: left !important;	
}
#timeSlotOpt tr, #timeSlotOpt td, #timeSlotOpt select, #timeSlotOpt input{
	height: 25px !important;	
}
#timeSlotOpt .txtOpt{
	padding: 0px 0px;
	max-height:100px;
	min-height:30px;
}
#timeSlotOpt .btn{
	padding: 3px 3px;
	margin: 5px 5px 1px 1px;
	position: relative;
	bottom: 2px;
	right: 2px;
}
#timeSlotOpt .typOptWrapper .btn, #timeSlotOpt .typBtnList {
	padding: 3px 3px;
	margin: 5px 5px 1px 1px;
	position: relative;
	bottom: 2px;
	right: 2px;
	background: transparent;
	width: 32px;
	transition: ease-in-out .3s all;
}
#timeSlotOpt .typOptWrapper .btn:hover, #timeSlotOpt .typBtnList:hover {
	background: #00bbbb;

}


#timeblocks{
	min-height: 100px !important;
	
}
/* Popover Definitionen */
#timeblocks .popover, #setupModal .popover , #setupContent .popover {
	width: 100px;
	display: block;
}
#setupModal .popover, #setupContent .popover{
	background:white;
}
#timeblocks .popover[role="tooltip"], #setupModal .popover[role="tooltip"] {
    min-width: 100px;
    top: 20px;
    display: block;
    z-index: 99 !important;
}
#setupContent .popover[role="tooltip"] {
	padding: 0px;
	margin: 0;
	font-size: 14px;
	background-color: #f7f7f7;
	border-bottom: 1px solid #ebebeb;
	border-radius: 5px;
	max-width: 200px;
	min-width: fit-content;
}
#setupContent .popover-title {
	padding: 8px 14px;
	margin: 0;
	font-size: 14px;
	background-color: #f7f7f7;
	border-bottom: 1px solid #ebebeb;
	border-radius: 5px 5px 0 0;
	width: 100%;
}
#setupContent .popover-content {
	padding: 9px 14px;
	background-color: #ffffff;
}
#timeblocks .timeblock {
	width: 30px;
	top: 0;
	display: block;
	z-index:1 !important;
}

.timeblock-duration {
  position: absolute;
  bottom: 2px;
  left: 55%;
  padding: 0px !important;
  font-size: 14px;
  letter-spacing: -1px;
}

.timeblock-setting{
  font-size: 17px !important;
  font-weight: bold;
  position: absolute;
  bottom: -1px;
  left: 15%;
  z-index: -1;
  border-right: 2px groove black;
  padding-right: 5%;
  opacity: 1 !important;
  text-shadow: -1px -1px 2px black;
}
.timeblock-setting .fa {
	position: relative;
	left: -5px;
	font-size: 15px;
	width: 12px;
	top: 14px;
}

#patCalendar {
    border: 2px dashed #ccc;
    padding: 10px;
    position: relative;
}

#patCalendar .calendar-event {
    position: absolute;
}

#piktoPrax {
	position: absolute;
	transform: translate3d(0px, -229px, 0px);
	top: 0px;
	left: 0px;
	will-change: transform;
	max-height: 275px;
	overflow-y: auto;
}
#piktoOnline {
	position: absolute;
	transform: translate3d(0px, 14px, 0px) !important;
	top: 18px !important;
	left: 0px;
	will-change: transform;
	max-height: 275px;
	overflow-y: auto;
}

#setupContent .btn .fa {
	position: relative;
	display: table-cell;
	width: 22px;
	height: 22px;
	text-align: center;
	top: 2px;
	font-size: 20px;
}


#setupContent .dropdown-item .fa {
	position: relative;
	display: table-cell;
	width: 22px;
	height: 22px;
	text-align: center;
	top: 2px;
	font-size: 20px;
	padding-left: 10px;
    margin: 5px;
}
#setupContent .dropdown li {
	margin: 0px 0px;
	padding: 2px 0px 6px 6px;
}
#setupContent .show li:hover{
	color: #fff;
	background-color: #00bbbb;
	text-shadow: 0px 0px 0px;
}

.behandlerMailBtn .btn-filter{
	margin:2px;
}
.behandlerMailBtn .btn-filter.active{
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
}

#shortVorl {
	background:white !important; 
}
#shortVorl .btn {
	white-space: normal !important;
	text-align: left !important;
	padding: 0px;
	border: none;
	margin: 0px !important;
}

.delete-msg {
	background: red;
	color: white;
	border-radius: 4px;
	border: 0px solid;
	padding: 4px;
}

  /* Layout-Anpassungen */
  .mailModal-body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .mail-left,
  .mail-right {
    height: 75vh;
/*     overflow-y: auto; */
  }

  .mail-left {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

.template-box {
	flex: 1;
	border: 1px solid #ccc;
	padding: 10px;
	background-color: #f9f9f9;
	max-height: 400px !important;
	overflow-y: auto;
}

.mail-right {
	flex: 1 1 50%;
	border: 0px solid #ccc;
	background-color: white;
	padding: 10px;
	top: -14px;
	position: relative;
}

  .send-wrapper {
    display: flex;
    margin-top: auto;
    align-items: center;
    gap: 10px;
  }

  .message-input {
    flex: 1;
    resize: none;
	height: 130px !important;	
  }

  .sendChat {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    padding: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sendChat i {
    margin: 0;
  }

#chat-box {
	flex: 1 1 50%;
	border: 1px solid #ccc;
	background-color: white;
	padding: 10px;
    height: 73vh;
    overflow-y: auto;	
}

#mailPreview {
	background: white;
	color: rgba(0,0,0,.6);
	height: 100px;
	overflow: hidden;
	overflow-y: scroll;
	/* padding: 10px; */

	/* Ergänzungen für Zeilenumbruch */
	word-wrap: break-word;        /* bricht lange Wörter */
	overflow-wrap: break-word;    /* moderner Standard */
	white-space: normal;          /* erlaubt Zeilenumbruch generell */
}

.chat-date-divider {
	text-align: center;
	font-weight: bold;
	color: rgba(0,0,0,.3);
	margin: 10px 0 5px;
	padding: 0px;
	border-bottom: 1px solid #e6e6e6;
	font-size: 10px;
	border-radius: 0px !important;
}

.chat-preview-line {
    margin: 4px 0;
    word-wrap: break-word;
    white-space: normal;
}

.chat-time {
    color: #555;
/*     font-weight: bold; */
    margin-right: 0px;
    cursor: default;
}

.chat-preview-line {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin: 4px 0;
    padding: 4px 0;
    border-bottom: 1px solid #e6e6e6;
    word-wrap: break-word;
    white-space: normal;
}

.chat-preview-line span.chat-time,
.chat-preview-line .from-to,
.chat-preview-line .message-text {
    display: table-cell;
    vertical-align: top;
    padding: 0px 4px;
}

.chat-preview-line span.chat-time {
    width: 39px;
    color: #555;
    font-weight: bold;
    cursor: default;
}

.chat-preview-line .from-to {
    width: 40px;
    white-space: nowrap;
    color: #222;
}

.chat-preview-line .message-text {
    width: auto;
    word-break: break-word;
}


#mailPreview table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

#mailPreview th, #mailPreview td {
    padding: 1px 3px;
    border-bottom: 1px solid #ddd;
    /* word-break: break-word; */
}

#mailPreview tr:hover td {
    background-color: #f5f5f5;
}
#mailModal input[name="betreffOption"]{
	margin-top: 0px !important;
}

/* Diagnose */
.downList .inaktiv{
	background-color: #d2d2d2 !important;
	border-color: #959595 !important;
	cursor: not-allowed !important;
	pointer-events: none;
}


.diagnose-item {
	position: relative;
	font-size: 12px;
	overflow: hidden;
	display: block;
	height: 21px;
	padding: 2px;
	text-align: left;
	border: none;
	background-color: transparent;
	color: black;
	transition: height 0.7s ease, background-color 1.0s ease, color 0.2s ease, padding 0.7s ease;
}

.diagnose-item:hover {
	height: 9vh;
	background-color: #50a0f0 !important;
	color: white !important;
	cursor: pointer;
	white-space: normal;
	border-radius: 4px;
	margin: 4px 0px -4px 0px;
}
.diagnose-item:hover>h6 {
	color: white !important;
}

/* Innerer Wrapper für Text */
.diagnose-item .text-inner {
    opacity: 0;
    transform: translateY(20px);
    animation: slideUpFadeIn 0.3s ease forwards;
    animation-delay: 0.3s; /* nach der height-Transition */
}

.diagnose-item:hover .text-inner {
    /* Triggert die Animation */
    animation: slideUpFadeIn 0.3s ease forwards;
    animation-delay: 0.3s;
}

/* Keyframe für weich einfliegenden Text */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

.subListDia strong {
	padding: 5px 0px 0px 0px !important;
	display: inline-block;
	color: #08f;
}

#DiaModal #content-area {
	overflow-y:auto;
}

#DiaModal .loadingBar {
	width: 99%;
	background-color: #f3f3f3;
	position: relative;
	top: -4px;
	left: 1px;
	z-index: 9999;
}
#DiaModal textarea {
	display: block;
	width: 100%;
	height: 34px;
	line-height: 1.2;
	font-size: 14px;
	line-height: 1.2;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 0px solid #ccc;
	border-radius: 4px;
/* 	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); */
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	overflow:hidden;
}

#DiaModal .progressBar {
    height: 5px;
    background-color: #007bff;
    width: 0;
}

/* #DiaModal tbody .button-grid, #DiaModal tfoot .button-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 0px; 
  max-width: 40px; 
} */

#DiaModal tbody .button-grid, #DiaModal tfoot .button-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	width: auto;
	margin: 0 20px;
	padding: 3px 0px;
}

#DiaModal tbody .btn, #DiaModal tfoot .btn {
	padding: 0px 5px;
	background-color: #BFCEDF;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 11px;
}

#DiaModal tbody .btn:hover, #DiaModal tfoot .btn:hover {
  background-color: #0056b3;
}

#DiaModal tbody .btn.active, #DiaModal tfoot .btn.active {
  background-color: #0d6efd; 
  color: #fff;
}
#DiaModal tbody .btn-danger, #DiaModal tfoot .btn-danger {
	padding: 1px 5px;
	background-color: #ff0000;
	color: white;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 8px;
	margin: 1px;
}

#DiaModal tbody .delDia, #DiaModal tfoot .delDia {
	position: relative;
	display: table-cell;
	width: 50px;
	height: 20px;
	text-align: center;
	top: 3px;
	font-size: 15px;
	color: white;
}
#DiaModal tfoot {
	border-top: 15px double rgba(0,0,0,.1);
	position: relative;
}
#DiaModal tfoot tr{
	background: rgba(52, 198, 255, 0.1);
}

.font-size-increase {
	height: 18px;
	padding: 0px 6px !important;
}
.font-size-increase input[type="radio"] + span {
	display: inline-block;
	transform: rotate(-90deg);
	font-size: 19px !important;
	position: relative;
	top: -6px;
}
.unsortable th{
	text-align:center;
}
#diagnoseTabelle td{
	padding: 1px;
	line-height: 1.2;
	vertical-align: top;
	border-top: 1px solid #ddd;

}

#diagnoseTabelle .btn-outline-danger {
	background-color: #ff9595 !important;
	font-size: 10px !important;
	font-weight: bold;
}
#diagnoseTabelle .btn-outline-danger:hover {
	background-color: #f92424 !important;
}

#archivTabelle{
	background: rgb(247, 247, 247);
}
#diagnoseTabelle tbody, #diagnoseTabelle tfoot, #archivTabelle tbody{
	min-height: 100px;
}

.sortable-placeholder {
    background-color: #f8f9fa;
    border: 2px dashed #999;
    visibility: visible !important;
    min-height: 150px;
}


.result-area {
	background-color: #fff !important;
	padding-left:3px;
}
.result-area h5 {
	background-color: #e8e8e8 !important;
}
.ki-result-area {
	position: relative;
	top: 5%;
	padding-left: 3px;
	margin-top: 3% !important;
}
.ki-result-area h5 {
	background-color: #e8e8e8 !important;

}
.ki-result {
	background-color: #e0f3ff52 !important;
}



/* Infotexte */
#info-content-area {
	height: 40vh;
	border: 1px solid #ccc !important;
}
.infoRow{
	padding-right: 15px;
}
#infoQuellen {
	height: 74vh;
	background: #e6e6e6;
	overflow-y: auto;
}
#quellDia{
	padding-right: 15px;
	background: white;
	min-height: 85px;
	max-height: 85px;
	padding: 5px;
	border: 1px solid #ccc;
	overflow: hidden;
	overflow-y: auto;
}
#quellDia .btn {
	height: 25px;
	padding: 0px 0px 2px 0px;
	border: none;
}
.moreinfos {
    background-color: #ffc107; /* z. B. Bootstrap-Warnfarbe */
    border-color: #ffc107;
    color: #000;
    font-weight: bold;
}
.mAreaInfo{
	padding:0px;
	height: 450px;
	margin-bottom: 15px;
}
.mAreaInfo .row {
	padding: 0px 15px;
}
.mAreaInfo .row .col-md-12{
	background: white;
	border: 1px solid #ccc;
	height: 410px;
	padding: 10px;
	border-radius: 0px 0px 4px 4px;
}
.mAreaInfo .divHead{
	background: #f9f9f9;
	padding: 10px;
	border: 1px solid #ccc;
	border-bottom: 0px solid #ccc;
	border-radius: 4px 4px 0px 0px;
}

/* ---neu----------------------------------------- */

/* Bericht / Infotexte */
.mAreaInfo .checkbox input[type="checkbox"]{
	margin-top: 0px;
}
#vorlagenListeTab3, #arztbriefeListeTab3 {
	border: 1px solid #ccc;
	padding: 5px;
	height: 200px;
	overflow-y: auto;
	padding-bottom: 40px;
}

#vorlagenListeTab3 .strikethrough {
    text-decoration: line-through;
    color: red;
    opacity: 0.6;
}

#vorlagenListeTab3 .strikethrough input,
#vorlagenListeTab3 .strikethrough select,
#vorlagenListeTab3 .strikethrough textarea,
#vorlagenListeTab3 .strikethrough .textfeld[contenteditable="true"] {
    pointer-events: none; /* deaktiviert Klicks/Tippen */
    user-select: none;    /* verhindert Textauswahl */
    background-color: #f8d7da; /* leicht roter Hintergrund als Hinweis */
}
#vorlagenListeTab3 .upload-wrapper {
    display: flex;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    width: fit-content;
  }

#vorlagenListeTab3 .upload-label {
    padding: 6px 12px;
    background-color: #f8f9fa;
    cursor: pointer;
    white-space: nowrap;
  }

#vorlagenListeTab3 .upload-label:hover {
    background-color: #e2e6ea;
  }

#vorlagenListeTab3 .upload-button {
    padding: 6px 12px;
    background-color: #0d6efd;
    color: white;
    border: none;
    cursor: pointer;
  }

#vorlagenListeTab3 .upload-button:disabled {
    background-color: #999;
    cursor: not-allowed;
  }

#vorlagenListeTab3 .upload-button:hover:not(:disabled) {
    background-color: #0b5ed7;
  }

  #dateiUploadTab3 {
    display: none;
  }
  
#tab3 .btn-group {
	margin-top: -35px !important;
}  

#anhangBox {
  overflow-y: auto;
  height: 105px !important;
}
.anhangMail{

}

/* ---neu-ende---------------------------------------- */

.context-menu {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 9999;
}

.context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.context-menu ul li {
    padding: 8px 12px;
    cursor: pointer;
}

.context-menu ul li:hover {
    background-color: #f1f1f1;
}
.calendar-event {
    position: absolute;
    background-color: #4caf50;
    color: white;
    text-align: center;
    border-radius: 4px;
    z-index: 10;
}

.table-wrapper {
    position: relative;
}

#calendarTable tr {
    height: 30px; /* Höhe jeder Zeile, z. B. 30px */
    position: relative; /* Zeilen müssen relativ positioniert sein */
}
/* Wochenwechsel */
#calendarContainer {
    position: relative;
    overflow: hidden; /* Verhindert, dass Inhalte außerhalb des Containers sichtbar sind */
}

#calendarContent {
    display: flex; /* Ermöglicht horizontales Scrollen */
    transition: transform .8s ease-in-out; /* Smooth animation */
    width: 100%; /* Platz für zwei Wochen */
}

.calendar-week {
    flex: 0 0 100%; /* Jede Ansicht nimmt 100% Breite ein */
    width: 100%;
}
.calTable tbody{
	box-shadow: 0px 9px 10px -1px;
	border-top: 1px solid rgba(0,0,0,.2);
}



/* -------------------------- */
.LMscrollLI .BGdiv1{
	width:100%;
	height:40px;
	background:white;
	padding-left: 15px;
	position: relative;
	top: -5px;
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-right: 15px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: gray;
    background-image: none;
    border: 1px solid white;
    border-radius: 4px;
}
.keinInhalt p{
	display:block;
	width:100%;
	position: relative;	
	top:25%;
	
}
.keinInhalt {
	width: 89%;
	height: 72vh;
	background: white;
	position: relative;
	top: 155px;
	border: 1px solid rgba(0,0,0,.2);
}
.selectize-dropdown-content {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 400px !important;
    -webkit-overflow-scrolling: touch;
}
.optionDiv .popover{
	width: 200px !important;
	top: 20px;
}
.optionDiv .popover h3{
	width: 100% !important;
	left: 0px
}
.optionDiv .popovers .kontakt{
	color:red !important;
}
.optionDiv .popovers .kontakt:hover{
	color:rgba(0,160,250,1);
}
#opt_speichern, #new_speichern{
	position:relative;
	top:45px;
}
input[list=codelist]::-webkit-outer-spin-button,
input[list=codelist]::-webkit-inner-spin-button{
	/* Chrome, Safari, Edge, Opera */
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[list=codelist],
input[list=codelist]{
  -moz-appearance: textfield;
}

/* ----------Kopfzeile google charts---------- */
.nrhead{
	height: 53.8px;
	width: 100%;
	border: 0px solid rgba(0,0,0,.3);
	background: lightgray;
	padding: 10px 15px 5px 15px;
	color: white;
	transform: rotate(90deg) !important;
	position: absolute;
	left: -279px;
	top: 280px;
	text-align: left;
	z-index: 1;
	padding-left: 20px !important;
}
/* -------------google charts--------------- */
/* #gchart .outbox:nth-child(2n+1){
	position: relative;
	top: 40px;
	padding-top: 15px;
	
}
#gchart .barchart_vgl:nth-child(2n+1){
	box-shadow: 15px 12px 17px -22px;
}
#gchart .piechart_vgl:nth-child(2n){
	box-shadow: 0px 12px 17px -22px;
	position: relative;
	top: 20px;
	left: 56px;
}
#gchart h3 {
  font-size: 13px;
  text-decoration: none;
  position: relative;
  left: 40px;
  width: 80%;
  font-weight: bold;
} */

h3 {
  font-size: 13px;
  text-decoration: none;
  position: relative;
  left: 0px;
  width: 80%;
  font-weight: bold;
  color:rgba(0,160,250,1);
}
.vglChart{
	float: left;
	position: absolute;
	background: white;
	top: 10px;
	left: -3000px;
	z-index: 9999;
	overflow-y: scroll;
	width: 75%;
	height: 770px;
	box-shadow: 0 0 1000px black;
	transition: all 1000ms cubic-bezier(0.415, 0.155, 0.440, 0.945);
}
.einflug{
	position: absolute;
	top: 10px;
	left:10%;
}
.closeX{
	width: 40px;
	height: 43px;
	display: block;
	position:sticky;
	top:5px;
	right:5px;
	background: red;
	border-radius: 6px;
	color: white;
	font-size: 30px;
	font-weight: 600;
	z-index: 10;
}
.closeX:hover{
	background: darkred;
}

#gchart{
	border: 0px solid rgba(0,0,0,.3) !important;
	padding-left: 40px;
	padding-right: 0px;
	margin-top: 0px;
	height: 96vh;
	z-index: 0;
	width: 100%;
	background: rgba(0,0,0,.1) ;
	overflow: hidden ;
	position: relative;
	padding-top: 30px;
}
#vglPower #gchart{
	border: 0px solid rgba(0,0,0,.3) !important;
	padding-left: 40px;
	padding-right: 0px;
	margin-top: 0px;
	height: initial;
	z-index: 0;
	width: 100%;
	background: white !important;
	overflow: hidden ;
	position: relative;
	padding-top: 30px;
}
/*
 #gchart:hover {
    width: 550px !important;
} 
#piechart_div{
	z-index:0 !important;
}
#barchart_div{
	z-index:0 !important;
}*/
/* -------------Vergleich charts--------------- */

/* #myModal_vgl .modal-dialog {
	width: 60%;
	margin: 30px auto;
	height: 800px !important;
	overflow: scroll;
}
#myModal_vgl .modal-header {
	position:sticky;
	top:0px;
	background: white !important;
	z-index: 1;
} */

/* #myModal_vgl #gchart:hover {
  width: 100% !important;
}  */

/* -------------Vergleich--------------- */
/* .buttonList{
	position: fixed;
	right: 120px;
	bottom: 25%;
	height: 30vh;
	margin-top: 50%;

} */
.buttonList {
	position: fixed;
/* 	right: 3%;
	top: 50%;
	bottom: 25%; */
	left: 92.3%;
	top: 505px;
	height: 320px;
	/* margin-top: 50%; */
	background: #777;
	width: 50px;
	padding: 7px;
	border: 1px solid #444;
	box-shadow: 5px 6px 7px -4px;
	cursor: grab;
	z-index: 9999 !important;
    transform: scale(1);
    transition: ease-in-out transform 0.2s, ease-in-out box-shadow 0.2s !important; /* Transition für Transform und box-shadow hinzugefügt */
	display: flex; /* Setzt den Container auf Flexbox */
    flex-direction: column;
	border-left: 2px groove white !important;
}

.buttonList:active {
    transform: scale(1.1) !important;
	box-shadow: 9px 7px 7px -3px rgba(0,0,0,.4);
}

.btnInfo{
	padding-left:24px;
	text-align: left;
}
.btn-short {
	color: #fff !important;
	background-color: #ec30d7;
	border-color: #a70ab5;
}
.highlight{
	outline: 1px solid #00f3ff;
	box-shadow: 0 0 9px #00f3ff; 

}
.modal.highlight{
	outline: 0px solid #00f3ff;
}
.buttonList .btn{
	width: 37px;
	display: block  ;
	margin-bottom: 5px;
	border-radius: 4px !important;
	font-size: 14px;
	text-align: right;
	position:relative;
	left:0;
	overflow:hidden;
	transition: ease-in-out .3s all;
}
.buttonList .btn:hover{
	left: 0px !important;
	width: 163px;
}

#LMbtn{
	position: relative;
top: -34px;
z-index: 999;
width: 40px;
height: 34px;
left: 160px;
}
#StoreDel{
	position: relative;
top: -34px;
z-index: 999;
width: 40px;
height: 34px;
left: 160px;
}

.restoreDiv {
	/* cursor: pointer; */
	border-style: solid;
	border-radius: 0px !important;
	box-shadow: 11px 0 0px -3px rgb(57, 112, 242);
}


.lm > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 0px solid #ddd !important;
}
.lm{
	width:180px;
	border-right:1px solid rgb(220,220,220);
	transition: ease-in-out .3s all;
	background:white;
	}
.lm:hover{
	
	}

/* ---------------------Verzehr------------------------- */

    .google-visualization-chart-hAxis-title,
    .google-visualization-chart-vAxis-title {
        font-size: 12px; /* Hier können Sie die Schriftgröße anpassen */
        padding: 0; /* Dies entfernt den Standardabstand */
        margin: 0; /* Dies entfernt den Standardabstand */
    }
.DNsubhead{
	background: rgb(197, 214, 121);
  color: white;
  margin-top: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.2) !important;
}

#recipeForm td {
    padding-top: 22px; /* Hier können Sie die gewünschte Padding-Größe angeben */
}
#recipeForm .form-control {
	display: block;
	width: 80%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	font-size: inherit;
	padding: 4px;
	height: 25px;
	top: -1px;
	position: relative;
}
#recipeForm .delete-button {
	background-color: red;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 4px !important;
	width: 20px;
	height: 20px;
	position: relative;
	top: -2px;
}
	/* Neues Rezept */	
	#newRZP h2,#newMP h2{
		position: relative;
		top: -11px;
	}	

	#LMlist .btn-warning{
		height:45px;
		
		transition: ease-in-out .3s all !important;
	}
	#LMlist .btn-warning:hover{
		background-color: white !important;
	}
	#newMP .btn-warning:hover,#newEP .btn-warning:hover{
		background-color: #c48329 !important
	}
	#newEP h2{
		margin-top: 8px;
	}

	#Modal_nRZP, #Modal_nMP, #Modal_nEP  {
		position: fixed;
		top: 0%;
		left: 0%;
		transition: ease-in-out .3s all !important;
		background-color: rgba(0,0,0,.3);

	}
	#Modal_nRZP .modal-content, #Modal_nMP .modal-content, #Modal_nEP .modal-content {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 45%;
		height: 45%;
		background-color: white;
		border: 1px solid #ccc;
		z-index: 1;
		padding: 15px;
	}
	#dublModal .modal-content {
		padding:15px;
		width: 100%;
		
		
	}
	#recipeForm .btn-success{
		position: fixed;
		right: 15px;
		bottom: 15px;
		z-index: 999;
	}
	#recipeForm {
		top: 15px;
		position: relative;
	}
	#recipeForm table{
		overflow-y: scroll;
		height: 24em;
		background: white;
		display: block;
		font-size: 11px;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 4px;
	}
	
	.imgMod {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.8);
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
/*Rezeptbild*/
#rzpImg, #mpImg, #epImg{
	/* background:rgba(0,0,0,.1); */
	background:rgba(255,255,255,.5);
	border:1px solid darkgray; 
	width:260px;
	height:110px;
	position: absolute;
	float: right;
	top: 9px;
	right: 30px;
	overflow: hidden;
	display: block;
	padding: 0;
	box-shadow: 2px 2px 6px rgba(0,0,0,.6) inset;
	text-align: center;
}


	
	.imgMod .modal-content {
		position: relative;
	  max-width: 20%;
	  width: 100%;
	  text-align: center;
	  top: 10%;
	  left: 37%;
	  border-radius: 5px;
	  background: white;
	  padding: 10px;
	  padding-bottom: 50px;
	}

	/* Schließen-Symbol-Styling */
	.imgMod .close-modal {
		position: absolute;
		top: 10px;
		right: 10px;
		color: #fff;
		font-size: 24px;
		cursor: pointer;
		text-shadow: 0 1px 1px black;
		font-weight: 700;
		padding: 10px;
	}
	.imgMod form {
		position: relative;
		top: 45px;
	}	
	#uploadInput{
/* 		position: relative;
		top: 30px;
		width: 100%;
		
		background: whitesmoke;*/
		overflow: hidden;
		padding: 6px; 
	}
	/* Bild im Modalfenster anpassen */	
	.imgMod img {
		max-width: 100%;
		max-height: 100%;
	}
	/*Upload Bild*/
	#uploadButton{
/* 		position: absolute;
		left: 10px;
		bottom: 10px;
		padding: 6px; */
	}
	
.hide{
	transition: ease-in-out all 2s;
}	
/* Ende Neues Rezept */	
/* FeedbackDIV */
#feedbackDiv {
    display: block;
    position: absolute;
    top: 207px;
    right: -330px !important;
    transform: translateY(-50%);
    color: green;
    font-size: 13px;
    background: rgb(160, 160, 160);
    padding: 30px;
    border: 1px solid rgba(0,0,0,.2);
	border-left: 2px groove white;
    box-shadow: 2px 2px 4px rgba(0,0,0,.35);
    width: 380px !important;
    height: 140px;
    transition: all 500ms cubic-bezier(0.635, 0.000, 0.195, 1.330); 
	z-index:9900 !important; /*wegen blackout 10 unterhalb */
}

#feedbackDiv .info {
    transform: rotate(-90deg);
    display: block;
    position: relative;
    top: -78px;
    left: -162px;
    color: rgba(255,255,255,0.5);
    font-weight: 700;
    font-size: 14pt;
	
}

#feedbackDiv .pull-right {
    width: 300px;
	min-width: 300px;
    height: 88px;
    background: white;
    position: relative;
    top: -35px;
    left: 10px;
}

#feedbackDiv.show{
    right: -7px !important;
	z-index: 1 !important;
}
/* Papierkorb */
#wasteDiv {
    display: block;
    position: absolute;
    top: 354px;
    right: -330px !important;
    transform: translateY(-50%);
    color: green;
    font-size: 13px;
    background: rgb(160, 160, 160);
    padding: 30px;
    border: 1px solid rgba(0,0,0,.2);
	border-left: 2px groove white;
    box-shadow: 2px 2px 4px rgba(0,0,0,.35);
    width: 380px !important;
    height: 140px;
    transition: all 500ms cubic-bezier(0.635, 0.000, 0.195, 1.330); 
	z-index: 1 !important;
}

#wasteDiv .info {
	transform: rotate(-90deg);
	display: block;
	position: relative;
	top: 25px;
	left: -61px;
	color: rgba(255,255,255,0.5);
	font-weight: 700;
	font-size: 14pt;
	width: 115px;
	
}

#wasteDiv .pull-right {
    width: 300px;
	min-width: 300px;
    height: 88px;
    background: white;
    position: relative;
    top: -35px;
    left: 10px;
	overflow-y: scroll;
}
#wasteList {
    margin-left: -30px;
}

#wasteDiv:hover{
    right: -7px !important;
	
}

#wasteList .fa-lg{
    display: inline;
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-rendering: auto;
	position: relative;
	top: auto;
	color: rgba(60,60,60, .3);
}

.chartVision,.chartVision2{
	position: sticky;
	top: 15px;
	right: 0px;
	display: inline-flex;
	background: white;
	box-shadow: 0 5px 5px -3px;
	border: 6px solid white;
	border-radius: 4px;
	float: right;
}
.modal-style>.chartVision,.chartVision2{
	position: sticky;
	top: -22px;
}
#chart_div{
	transform: translateY(20px) !important;
}


#chart_div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(1) > g:nth-child(4) > g:nth-child(2) > g:nth-child(1) > rect:nth-child(12){
	width: 2px;
	fill: rgba(150,150,150,1);

}
#chart_div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(1) > g:nth-child(4) > g:nth-child(2) > g:nth-child(1) > rect:nth-child(6){
	width: 2px;
	fill: #adff2f;

}


/*#chart_div > svg text[text-anchor="middle"] {*/
#chart_div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(1) > g:nth-child(5) > g:nth-child(1) > text:nth-child(1) {
    fill: #f00;
	transform: translateY(-83.5%) !important;
}



.nullWert {
	font-weight: 500;
	top:8px;
}
.nullWert label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 5px;
	font-weight: 500;
	color: #23527c;
}

.resizable-div {
  resize: vertical;
  overflow: auto;
  overflow-x: hidden;
  height: 365px; /* Hier können Sie die Standardhöhe festlegen */
  min-height: 100px; /* Hier können Sie die minimale Höhe festlegen */
  max-height: 600px; /* Hier können Sie die maximale Höhe festlegen */
  background: white;
  border: 1px solid #ccc;
  border-top: 0px solid #ccc;
  user-select: text; /* Dies erzwingt die Textauswahl im Div */
  -webkit-user-select: text; /* Für ältere Webkit-basierte Browser */
  -moz-user-select: text; /* Für Firefox */
  -ms-user-select: text; /* Für den Internet Explorer */
  -o-user-select: text; /* Für Opera */
  position: relative;
  top: -4px;
}
#collapseLM {
	overflow-y: unset;
	width: 88%;
	max-height: 76vh !important;
	border: 1px solid rgba(0,0,0,.2);
	background: white;
	position: absolute;
	top: 0px;
	left: 25px;
	padding: 0px 15px;
}

#collapseZV {
	overflow-y: auto !important;
	width: 89%;
	max-height: 53vh !important;
	border: 1px solid rgba(0,0,0,.2);
	background: white;
	position: absolute;
	/* left: 25px; */
	padding: 8px;
} 


#collapse_eLM{
	overflow-y: auto !important;
	width: 93%;
	max-height: 79vh !important;
	border: 1px solid rgba(0,0,0,.2);
	background: white;
	position: relative;
}


#newrow{
	position: sticky;
	top: 0px;
	z-index: 99;
}

.modal-style {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 9999;
	background-color: white !important;
	border: 1px solid #ccc;
	box-shadow: 0 0 165px rgba(0,0,0,0.75) !important;
	border-left: 2px groove white;
	padding: 20px;
	max-width: 85% !important;
	max-height: 85% !important;
	overflow-y: auto;
	resize: both;
	overflow: auto;
	max-width: 90%;
	max-height: 90%;
	opacity: 1; /* Start with opacity 0 */
	transition: opacity 2s ease-in-out; /* Apply transition to opacity */
}

.close-div {
	cursor: default;
	color: rgba(0,0,0,.2);
	font-weight: bold;
	z-index: 1000;
}
.brand-div {
	cursor: default;
	color: rgba(255,255,255,.99);
	font-weight: bold;
	z-index: 1000;
	font-size: 30px;
	text-shadow: 1px 1px 4px rgba(0,0,0,.3);
	font-family: 'Grechen Fuemen', cursive;
}


.noteDiv {
	position: sticky;
	bottom: 10px;
	width: 322px !important;
	float: right !important;
}
/* CSS für deaktivierte Buttons */
/* .disabled {
    pointer-events: none; 
    opacity: 0.5; 
    cursor: not-allowed; 
} */
.rotate{
	transform: rotate(180deg);
	position: sticky !important;
	top: 0px;
}
.printCheck{
	width: 15px !important;
	margin: 5px;
	z-index: 2;	
	position: fixed;
	border:none !important;
}
.modal-style>.printCheck{
	position: sticky !important;
	top: 4px;
	
}
.enlarge-image{
	background:white;
	z-index: 1000;		
	}
.enlarge-image img{
	position: relative;
	top: -15px;
	z-index: 1;
		
	}
#pict{
	display:block;
}
/* ---------------------Ende Verzehr------------------------- */

.details {
  display: none;
}

.rzpGroup{
	cursor: pointer;
	background: rgba(0,0,0,.4) !important;
	color: white;
	border-bottom: 3px groove black;
}


/* diese zwei vorerst ausblenden kommt später */
/*#options > ul:nth-child(1) > li:nth-child(4){
	display:none !important;
}	
 #options > ul:nth-child(1) > li:nth-child(2){
	box-shadow: 0px -4px 3px rgba(0,0,0,.2) inset;
} */	

	
.lm .lmTabname{
position: relative;
    top: -39px;
    z-index: 0;
    width: 175px;
    left: 5px;
    font-size: 10.5px;
    text-shadow: 0px 0px 2px black;
    overflow-wrap: anywhere;
	}
.lm thead tr{
overflow: hidden;
display: table-row-group;
position: relative;
top: 40px;
	}

.inhaltstable > thead{
	position: sticky;
	top:6px;
	background-color:#c5d679;
	color:white;
	height:35px;
	z-index: 99;
}
.inhaltstable tbody td{
	border: 0px solid !important;
}	
.inhaltstable > thead > tr > th {
	vertical-align: bottom;
	border-bottom: 0px solid #ddd;
	position: relative;
	top: 5px;	
	}	

.inhaltstable_vgl > thead{
	position: sticky;
	top:0px;
	background-color:#c5d679;
	color:white;
	height:68px;
	z-index: 1;
}	
.inhaltstable_vgl > thead > tr > th {
	vertical-align: bottom;
	border-bottom: 0px solid #ddd;
	position: relative;
	top: 0px;	
	}
	
	
/* Sortliste -----------------------------------------*/	
.sorttable > thead{
	position: sticky;
	top: 0px;
	background-color:rgba(197, 214, 121,.75);
	color:white;
	height:35px;
	box-shadow:0 7px 5px -5px rgba(0,0,0,.5) inset;
}
.sorttable >  thead > tr > th, .sorttable >  tbody > tr > td {
	padding: 0px !important;
	padding-top: 7px !important;
	padding-bottom: 7px !important;
	}
.sorttable > thead > tr > th {
	vertical-align: bottom;
	border-bottom: 0px solid #ddd;
	padding-left:7px !important;
	}
.sort-panel{
	text-decoration:none;
	display:block; 
	background:rgba(0,0,0,.2); 
	margin-bottom: -2px;
}
.quellLable label{
display: block;
z-index: 1;
position: relative;
top: 19px;
background: rgba(0,0,0,0);
width: 150px;
padding: 5px;
text-align: center;

}

.sortQuell{
background: white;
z-index: 0;
width: 222px;
position: relative;
top: -25px;
	box-shadow:0 3px 5px rgba(0,0,0,0);
	transition: ease-in-out .3s all;
}

.sort-dropdown-menu {
	display: block;
	width: 190px !important;
	height: 22px;
	overflow-y: hidden;
	transition: ease-in-out .3s all;
	position: relative;
	left: 0;
	top: 0;
	z-index: 0;
	padding-left: 13px;

}
.sort-dropdown-menu:hover {
	height: 350px;

}
.quellLable:hover > .sort-dropdown-menu{
	height: 350px;
}
.sortQuell:hover{
	box-shadow:0 3px 5px rgba(0,0,0,.4) !important;

}
.sort-dropdown-menu li{
	list-style: none;
	margin-top: 9px;

}
.sort-dropdown-menu li:nth-child(0){
	list-style: none;
	margin-top: 18px;
}
.quell{
	display:none;
}
.chevron{
	margin-top: 6px;
	font-size:8pt;
}
#sortSuche{
	width:100%;
	border: 1px solid rgba(0,0,0,.19);
	border-radius: 4px;
}
.sortSucheDiv{
	width:300px;
	position:relative;
	top:-26px;
	margin-left:10px;
}
/* .sort-dropdown-menu li:nth-child(2){
	list-style: none;
	margin-top: 18px;
} */

/* --ende------------------------------------------------- */
input[name="minWert"]{
	width:60px;
	height:19px;
	border: 1px solid rgba(0,0,0,.1);
}
input[name="maxWert"]{
	width:60px;
	height:19px;
	border: 1px solid rgba(0,0,0,.1);
}	
.cTable {
	overflow: scroll;
	background: white;
	position: absolute;
	top: 70px;
	z-index: -1;
	width: 93%;
	padding:5px; 
	border-radius:4px;
	}
.toolt_vgl{
position: absolute;
    top: -3px;
    height: 0;
    color: white;
    left: -8px;
}
.popover__title {
  font-size: 24px;
  line-height: 36px;
  text-decoration: none;
  color: rgb(228, 68, 68);
  text-align: center;
  padding: 15px 0;
}




.popover__content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0px;
    transform: translate(0, 10px);
    background-color: #ddd;
    padding: 5px;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%);
    width: 155px;
    top: 35px;
    font-size: 9pt;
    color: rgba(0,0,0,.65);
    text-align: left !important;
    font-weight: 600;
    z-index: 99999 !important;
    overflow: hidden;
}
.popover__content:before {
  position: absolute;
  z-index: -1;
  content: "";
  right: calc(50% - 10px);
  top: -8px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #bfbfbf transparent;
  transition-duration: 0.3s;
  transition-property: transform;
}
.popover__wrapper:hover .popover__content {
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transform: translate(0, -20px);
  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.popover__message {
  text-align: left;
}



.list-group-item {
  padding: 10px 7px !important;
}

#LMlist {
	min-height: 67vh !important;
	max-height: 67vh !important;
	overflow: hidden;
	overflow-y: auto;
}

#LMlist .list-group-item {
	position: relative;
	display: block;
	padding: 5px 5px 5px 3px !important;
	margin-bottom: -1px;
	background-color: #fff;
	border: 1px solid #ddd;
	word-break: break-word;
	margin-right: -3px;
	height: max-content;
}
#LMlist2 a {
	display: block;
}

#allergenZusatzstoffList{
	font-weight: 300 !important;
	font-size: 9pt !important;
}

/*

@keyframes moveTicker{
		from{transform: translate3d(0%, 0%, 0px); left: 100%;}
		to{transform: translate3d(-100%, 0%, 0px); left: 0%;}
	} */
	
.checky {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
position: absolute !important;
z-index: 1 !important;
margin-top: -76px !important;

}	
.checky {
  position: absolute;
    z-index: 1 !important;
    margin-top: 23px !important;
    top: -51px;

}
.sortAusw {
	position: absolute;
	top: 50%;
	left: 1%;
	width: 60px;
	height: 60px;
	padding: 8px;
	z-index: 9999 !important;
	border: 8px solid white;
	/* box-shadow: 0px 0px 20px white; */
	box-shadow: inset 0 0 0 2px lightgray;
	transform: rotate(90deg);
}
.sortAusw:hover,
.sortAusw:active,
.sortAusw:link,
.sortAusw:focus,
.sortAusw:visited,
.sortAusw:active:hover {
	color:white;
	background: orange;
	border: 8px solid white;
	box-shadow: 0px 0px 20px white;
	box-shadow: inset 0 0 0 2px orange;

}
.btn.sortAusw:hover > .glyphicon-share {
	color:white !important;

}
.sortAusw span {
  color: orange;
  transform: rotate(-90deg);
  font-size: 19pt;
}

.vergleich_ausw{
	border: none;
	outline: none;
	position:absolute;
	left:-10000px;
	top:0px;
	transition:ease-in-out all .3s;
	margin-left: 98% !important;
}


#menu1 .hauptstoffe{
	background: rgba(179, 179, 179, 0.65);
	color: black;
	/* display:block; */
}
.fa-arrows-alt-h::before {
	content: "\f337";
	position: relative;
	top: 6px !important;
}



.hauptstoffe{
	background: rgba(0,0,0,.65);
	color:white;
	/* display:block; */
}
.nick{
	background: rgba(0,0,0,.65);
	color:black;
	/* display:block; */
}


#vglTab {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden; /* Scrollbalken über der Tabelle anzeigen */
    position: absolute;
    left: 348px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent black;
}

#vglTab tbody, .LmDaten tbody {
    background: white;
}

#vglTab .hauptstoffe, #inhaltsbody .nick .hauptstoffe {
    background: rgba(0,0,0,.65);
    color: black;
    /* display:block; */
}

#vglTab tr.hauptstoffe:nth-child(even) {
    background-color: #ffffff;
}

#vglTab tr.hauptstoffe:nth-child(odd) {
    background-color: #f9f9f9;
}

#scrollRight {
	position: absolute;
	right: 35px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: 24px;
	color: black;
	background-color: white;
	padding: 5px;
	z-index: 1;
	border-radius: 4px;
	box-shadow: 0 0 3px rgba(0,0,0,.3);
	width: 40px;
	text-align:center;
}
#scrollLeft {
    position: absolute;
    left: 54px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 24px;
    color: black;
    background-color: white;
    padding: 5px;
    z-index: 2; 
	border-radius: 4px;
	box-shadow: 0 0 3px rgba(0,0,0,.3);
	width: 40px;
	text-align:center;
}

.hinweisGhart{
	font-weight: 700;
	margin-top: 30vh;
	text-align: center;	
}

.ausgeblendet{
	display:none;
}


#dbStatus {
	width: 15px;
	height: 15px;
	background: gray;
	position: absolute;
	bottom: 15px !important;
	left: 15px;
	z-index: 9999;
	border: 2px groove #b9b9b9;
	box-shadow: -1px -1px 6px rgba(0,0,0,.6);
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(1, 35px);
    grid-template-rows: repeat(1, 20px);
    gap: 0px; /* optional: Abstand zwischen den Punkten */
    width: 38px; /* (3 Punkte * 35px) + (2 Abstände * 10px) */
	flex-grow: 1; /* Füllt den verbleibenden verfügbaren Platz vertikal aus */
    overflow-y: hidden !important;
	max-height: 60px ;
  position: relative;
  left: -2px;
  top: 20px;
  bottom: -19px !important;
  border-right: 1px groove white;
  border-left: 1px groove rgba(0,0,0,.2);
}

.grid-container::before {
    content: ''; /* leeres Inhaltsattribut für das Pseudoelement */
    grid-column: span 3;
    grid-row: span 3;
    background-image: radial-gradient(circle, rgba(255,255,255,.6) 0%, transparent 100%);
    background-size: 4px 4px; /* Durchmesser der Punkte anpassen */	
	overflow-y: hidden !important;
}

#gchart, .IsOuter, .produktDiv, .IsOuterVZ{
	border-right:2px groove white !important;
}



/* -------------Einstellungen---------------- */
    .slider-container, .slider-container2 {
      position: relative;
      width: 100%;
      height: 50px; /* Höhe anpassen, um Platz für den Bereich zu schaffen */
    }
    .slider,.slider2 {
      width: 100%;
      position: absolute;
      pointer-events: none; /* Ermöglicht Interaktion mit den Schiebereglern */
      z-index: 2;
      -webkit-appearance: none;
      appearance: none;
      height: 5px;
      background: transparent;
    }
    .slider::-webkit-slider-thumb,.slider2::-webkit-slider-thumb {
      pointer-events: all;
      position: relative;
      z-index: 3;
      width: 15px;
      height: 15px;
      background: #00bbbb;
      border-radius: 50%;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
    }
    .slider::-moz-range-thumb,.slider2::-moz-range-thumb {
      pointer-events: all;
      position: relative;
      z-index: 3;
      width: 15px;
      height: 15px;
      background: #00bbbb;
      border-radius: 50%;
      cursor: pointer;
    }
    .slider-range,.slider-range2 {
      position: absolute;
      width: 100%;
      height: 5px;
      background: #ddd;
      top: 2px;
      transform: translateY(-50%);
      z-index: 1;
    }
    .slider-range-fill,.slider-range-fill2 {
      position: absolute;
      height: 100%;
      background: #1ebf38;
      z-index: 1;
    }
	.inlineform {
		display: flex;
		align-items: center;
		gap: 7px;
	}
	.inlineform label,
	.inlineform input {
		margin: 0;
	}
	.inlineform .form-control {
		padding: 5px;
	}
.favList{
	border: 1px solid #ccc;
}
#selectedFeatures{
	background: white;
	min-height: 100px;
	padding: 15px;
	margin-top: 10px;
	overflow-y: auto;
	border: 1px solid #ccc;
}


/* Home screen*/
#homeTile {
    display: flex;
    flex-wrap: wrap;
    position: relative;
	top: 25px;
	left: 50px;

}

#homeTile.sortable {
    display: flex;
    flex-wrap: wrap;
	width: 90%;
}

#homeTile .ui-state-default {
    background: linear-gradient(45deg, rgba(3, 140, 95, 0.82), #ffffff);
    border: 2px groove #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin: 15px;
    padding: 10px;
    width: 300px; /* Festlegen der Breite */
    height: 150px; /* Festlegen der Höhe */
    transition: all 0.3s ease;
    list-style: none;
	
}

#homeTile .ui-state-default:hover {
    /* background: linear-gradient(45deg, rgba(3, 140, 95, 0.32), #ffffff) !important; */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
	border: 2px solid #06ff06;
}

/* Jedes Listenelement eine unterschiedliche Farbe zuweisen */
#homeTile .ui-state-default:nth-child(odd) {
    background: linear-gradient(45deg, rgba(255, 204, 204, 0.82), #ffffff); /* Beispiel-Farbe für ungerade Kacheln */
}

#homeTile .ui-state-default:nth-child(even) {
    background: linear-gradient(45deg, rgba(204, 204, 255, 0.47), #ffffff); /* Beispiel-Farbe für gerade Kacheln */
}

#homeTile .ui-icon {
    margin-right: 5px;
}
#homeTile a li{
    color: white;
	font-weight: 700;
	text-shadow: 0 2px 3px black;	
	cursor: grab;
}
#homeTile li:active {
  cursor: grabbing;
}
/* #InfoBlog {
	width: 100%;
	position: relative;
	left: 0px;
	top:180px !important;
	height: 200px;
	padding: 15px;
	top: 220px;

} */
	#InfoBlog {
		width: 100%;
		position: fixed;
		right: -45vw;
		bottom: -39vh;
		height: 200px;
		padding: 15px;
		display:none;

	}
.DEBInet h1{
	font-size: 40px;
	font-weight: bold;
	position: relative;
	top: 0px;
	left:105px;
	color: rgb(251, 251, 251);
	text-shadow: 0px -1px 3px rgba(0,0,0,.5);
}

#exBlock {
width: 45%;
  position: relative;
  left: 105px;
  height: 200px;
  padding: 15px;
  overflow-y: auto;
  border-radius: 4px;
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.65), rgba(0,0,0,0)) 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
  /* background: radial-gradient(farthest-side at center 350px, rgba(0,0,0,0.2) 10%, transparent 100%); */
  text-shadow: 15px 15px 20px rgba(0,0,0,.6);
}
#exBlock li{
	transition: all 1.5s ease-in-out;
}
#homeTile li {
  transition: all 2.0s ease-in-out;

}
.fullView {
	display: block;
	position: absolute;
	top: 431px;
	right: -100px ;
	padding: 0;
	transition: all 500ms cubic-bezier(0.635, 0.000, 0.195, 1.330);
	z-index: 1 !important;
	border: 1px solid rgba(0,0,0,.2);
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: rgba(0, 0, 0, 0.2);
	border-left: 2px groove white;
	box-shadow: 2px 2px 4px rgba(0,0,0,.35);
	width: 150px;
	height: 30px;
}
.fullView .btn{
	width: 185px;
	text-align: left;
	height: 30px !important;
	padding: 3px 0px 0px 14px;
}
.fullView:hover {
	display: block;
	position: absolute;
	top: 431px;
	right: -5px ;
	padding: 0;
	transition: all 500ms cubic-bezier(0.635, 0.000, 0.195, 1.330);
	z-index: 1 !important;
	border: 1px solid rgba(0,0,0,.2);
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: rgba(0, 0, 0, 0.2);
	border-left: 2px groove white;
	box-shadow: 2px 2px 4px rgba(0,0,0,.35);
	width: 150px;
	border-color: transparent !important;
}
.fullView:focus, .fullView a:focus {
	border-color: transparent !important;
}

/* .sideMenu {
	position: absolute;
	display: block;
	z-index: 999;
	right: -100px ;
	width: 150px;
	padding: 10px;
	transition: all 500ms cubic-bezier(0.635, 0.000, 0.195, 1.330);
	z-index: 1 !important;
	border: 1px solid rgba(0,0,0,.2);
	border-left: 2px groove white;
	box-shadow: 2px 2px 4px rgba(0,0,0,.35);
	font-size: 18px !important;
	padding-left: 15px;
	border-radius: 6px;
} */
#buttonList-side {
	position: absolute;
	display: block;
	z-index: 999;
	top: 504px;
	right: -100px;
	width: 150px;
	transition: all 500ms cubic-bezier(0.635, 0.000, 0.195, 1.330);
	z-index: 1 !important;
	font-size: 18px !important;
	height: max-content;
}
#buttonList-side .sideMenu {
	padding: 10px;
	transition: all 500ms cubic-bezier(0.635, 0.000, 0.195, 1.330);
	z-index: 1 !important;
	border: 1px solid rgba(0,0,0,.2);
	border-left: 2px groove white;
	box-shadow: 2px 2px 4px rgba(0,0,0,.35);
	font-size: 18px !important;
	padding-left: 15px;
	margin-bottom: 6px;
	position: relative;
	right:0px;
	min-width: 215px;

}
#buttonList-side .sideMenu div{
	min-width: 215px;	
	transition: all 500ms cubic-bezier(0.635, 0.000, 0.195, 1.330);	
}
#buttonList-side .sideMenu:hover {
	right: 160px !important;
	
}
#buttonList-side .btn {
	height: 30px !important;
	padding: 3px 15px 0px 15px !important;
	
}
#new_speichern {
	position: absolute;
	display: block;
	z-index: 999;	
	top: 468px;
	right: -100px ;
	width: 150px;
	padding: 3px 13px 6px 0px;
	transition: all 500ms cubic-bezier(0.635, 0.000, 0.195, 1.330);
	z-index: 1 !important;
	border: 1px solid rgba(0,0,0,.2);
	border-left: 2px groove white;
	box-shadow: 2px 2px 4px rgba(0,0,0,.35);
	font-size: 18px !important;
	padding-left: 15px;
	border-radius: 6px;
	height: 30px;
}
#new_speichern:hover {
	right: -5px !important;
}


#eLMport2 .dropdown-menu.show {
	width: 100%;
	overflow-y: scroll;
	height: 485px;
	position: absolute !important;
	transform: translate3d(0px, 12px, 0px);
top: -27px !important;
  left: -24px !important;
	will-change: transform;
	border-radius: 4px !important;
	border: 1px solid rgba(0,0,0,.3) !important;
	border-top: none !important;
}
#eLMdrop2 .glyphicon-chevron-down {
    font-size: 0.9em;
    color: rgba(0, 0, 0, 0.7);
}
#eLMdrop2::after, #eLMdrop::after {
    display: none !important;
}

/* #eLMdrop2 .dropdown-toggle::after {
	display: inline-block;
	margin-left: .255em;
	vertical-align: .255em;
	content: "";
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-bottom: 0;
	border-left: .3em solid transparent;
	right: 59px !important;
} */

/* saf3+, chrome1+ ---------------------------------------------------------------------------*/
@media screen and (-webkit-min-device-pixel-ratio:0) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: .001dpcm) {
     /*your rules for chrome*/
    .lm .lmTabname {
	position: relative;
	top: -20px;
	z-index: 0;
	width: 170px;
	left: 10px;
	font-size: 10.5px;
	text-shadow: 0px 0px 2px black;
	overflow-wrap: anywhere;
	}/* 
	.lm thead tr {
		overflow: hidden;
		display: table-row-group;
		position: relative;
		top: 40px;
	} */
	.lm thead tr {
		overflow: hidden;
		display: flex;
		position: sticky;
		top: 0px;
		margin-top: -2.5px !important;
	}
	.inhaltstable_vgl > thead {
		position: sticky;
		top: 0px;
		background-color: #c5d679;
		color: white;
		height: 68px;
	}
	.inhaltstable_vgl > thead > tr > th {
		vertical-align: bottom;
		border-bottom: 0px solid #ddd;
		position: relative;
		top: 40px;
		height:68px;
	}
	.inhaltstable_vgl > thead:first-of-type > tr > th {
		vertical-align: bottom;
		border-bottom: 0px solid #ddd;
		position: relative;
		top: 0px;
		height:68px;
	}
	.noteDiv {
		position: sticky;
		bottom: 10px;
		width: 160px !important;
		float: right !important;
	}	
	
}

/* 03.06.25 */


@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
#rahmenX{
	z-index:0;
}
#showTime {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 100px;
	height: 50px;
	background: gray;
	z-index: 9;
	color: white;
	display:none;
}
/* Progress-bar */
.progress {
  width: 22%;
  height: 20px;
  position: absolute;
  bottom: -7px;
  right: 15px;
  z-index: 9;
  transition: bottom 1.0s ease-in-out; /* Transition für die Position */
}

.progress-bar {
  height: 100%;
  transition: width 1.0s ease-in-out; /* Langsame Übergänge für die Breite */
}

.progress.move-down {
  width: 60%; /* Breite, wenn .brand nach unten geht */
  height: 12px; /* Höhe, wenn .brand nach unten geht */
  background-color: #e6e6e6; /* Hintergrundfarbe */
  position: absolute;
  bottom: 16px; /* Position */
  right: 15px; /* Position */
  z-index: 9; /* Z-Index */
}

.progress.move-down:hover {
  width: 22%; /* Breite zurücksetzen bei Hover */
  height: 20px; /* Höhe zurücksetzen bei Hover */
  background-color: initial; /* Ursprüngliche Hintergrundfarbe */
}

.elapsed-time {
  color: white;
  font-size: 14px;
  position: relative;
  top: 0px;
  transition: font-size 1.0s ease-in-out, top 1.0s ease-in-out; /* Transition für Schriftgröße und Position */
}

.elapsed-time.move-down {
  font-size: 11px; /* Schriftgröße, wenn .brand nach unten geht */
  position: relative;
  top: -2.5px;
}

/*----------------------*/

#progress {
  fill: none;
  stroke: #f77a52;
  stroke-width: 10px;
  transition: stroke-dashoffset 0.5s;
}

.logo {
	width:100%;
	max-height:50px;
	position:relative;
	left:0px;
	top:10px;
}
.logo img{
	width:100%;
	position:relative;
	left:0px;
}
.logo_img{
	/* background-image: url("../../images/logo_ng_horiz.png"); 
	
	background-repeat: no-repeat;
	width: 100%;
	height: 50px;
	background-size: 225px;*/
	
	background-image: url("../../images/nutriFlow_logo_rgb2.png");
	background-repeat: no-repeat;
	width: 100%;
	height: 66px;
	background-size: 193px;
	position: relative;
	left: 3px;
	top: 10px;
}

.settings {
  
  height:40px; 
  float:left;
  width:250px;
  margin:0px;
 text-align: center;
font-size:20px;
font-family: 'Strait', sans-serif;

}
.optionDiv{
/* 	padding-left: 45px !important;
	padding-right: 0px !important; */
	z-index:-1;
	background: rgba(0,160,250,.2);
	/* height: 825px; */
	margin-left:20px;
	overflow:hidden;
	padding-left: 40px;
	padding-right: 5px;
	padding-top: 10px;
	transition: ease all 1s;
	border-right: 2px groove white;
	height: 95vh;
}
/* toggle class */
.optionDiv_sm{
	box-shadow: -17px 0 10px -7px rgba(0,0,0,.6) inset;
	transition: ease all 1s;
	border-right:2px groove white;
}
.optionDiv_sm .inhalt_opt{
	width: 1000px !important;
	background: linear-gradient(90deg, rgb(254, 254, 254) 6%, rgba(204,204,204,0) 20%) !important;
	filter: blur(1px);
}
.optionDiv_sm .form-group{
	background: linear-gradient(90deg, rgb(254, 254, 254) 6%, rgba(204,204,204,0) 20%) !important;
	filter: blur(1px);
}
.optionDiv_sm .Infotext{
	width: 1000px !important;
	background: linear-gradient(90deg, rgb(254, 254, 254) 6%, rgba(204,204,204,0) 20%) !important;
	filter: blur(1px);

}
.optionDiv_sm .inhalt_opt div{
	background: linear-gradient(90deg, rgb(254, 254, 254) 6%, rgba(204,204,204,0) 20%) !important;
}
#optionList .LM-list {
	margin-bottom: 0px !important;
	top: 60px;
	position: absolute;
	left: 25px !important;
	width: 35%;
} 
.optionList{
/* 	padding-left: 45px !important;
	padding-right: 0px !important; */
	z-index:-1;
	background: rgba(0,160,250,.2);
	height: 95vh;
	margin-left:40px;
	overflow:hidden;
	padding-left: 65px;
	padding-right: 5px;
	padding-top: 10px;
	transition: ease all 1s;
	border-right: 2px groove white;
	box-shadow: -17px 0 10px -7px rgba(0,0,0,.6) inset;
}
.optionList .produktDivSubhead {
  position: relative;
  left: -353px;
  top: 270px;
  background: green;
  height: 36px;
  min-width: 614px;
  transform: rotate(90deg);
}
.optionList .Infotext {
	background: white;
	position: relative;
	top: -50px;
	left: 24px;
}

.optionList_sm {
	box-shadow: -17px 0 10px -7px rgba(0,0,0,0) inset;
	transition: ease all 1s;
	border-right:2px groove white;
	transition: ease all 1s;
}

.optionList .inhalt_opt,.optionList .inhalt_opt2, .optionList .Infotext, .optionList .LMscroll{
	width: 76vw ;
	background: linear-gradient(90deg, rgb(254, 254, 254) 6%, rgba(204,204,204,0) 20%) !important;
	filter: blur(1px) !important;
	transition: ease all 1s;
}
.optionList_sm .form-group, .optionList_sm .inhalt_opt,.optionList_sm .inhalt_opt2, .optionList_sm .Infotext, .optionList_sm .LMscroll{
	background: white !important;
	filter: blur(0px)!important;
	transition: ease all 1s;
}

#optionList .subOptions .buttonList{
	border-left:2px groove white !important;
}
.subOptions .buttonList{
	border-left:2px groove white !important;
}

.produktDiv {
	z-index: -1;
	background: rgba(0,160,250,.2);
	height: 96vh;
	margin-left: 25px;
	overflow: hidden;
	padding-left: 20px;
	padding-right: 0px;
}
.produktDivVZ{
/* 	padding-left: 45px !important;
	padding-right: 0px !important; */
	z-index:-1;
	background: rgba(50, 50, 50, 0.4);
	  height: 96vh;
	  margin-left: 40px;
	  overflow: hidden;
	  padding-left: 40px;
	  padding-right: 5px;
	  border-right: 2px groove;
}
.produktDivMP{
/* 	padding-left: 45px !important;
	padding-right: 0px !important; */
	z-index:-1;
	background: rgba(0, 160, 250, 0.4);
	  height: 825px;
	  margin-left: 40px;
	  overflow: hidden;
	  padding-left: 40px;
	  padding-right: 5px;
	  border-right: 2px groove;
}
.produktDiv:hover{
	/* z-index:2; */
}

.produktDiv h5{
	text-align:left;
}

/* ScrolBar  */
.scrollbar
{
z-index:100;
height: 90%;
width: 100%;
overflow-y: hidden;
overflow-x: hidden;
border-right: 0px solid rgba(255,255,255,.6);
}

.scrollbar:hover
{

height: 90%;
width: 100%;
/* overflow-y: scroll;  */
overflow-x: hidden;
/* border-right: 2px solid rgba(255,255,255,.6); */
}

/* Scrollbar Style */ 



#style-1::-webkit-scrollbar-track
{
border-radius: 2px;
}

#style-1::-webkit-scrollbar
{
width: 5px;
background-color: #F7F7F7;
}

#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #BFBFBF;
}
/* Scrollbar End */ 

.upstyle{
	box-shadow: 8px 0px 5px -5px rgba(0,0,0,.5), -2px 1px 5px 0px rgba(0,0,0,.2) inset;

}


.fa-lg {
font-size: 1em;
  
}
.fa {
position: relative;
display: table-cell;
width: 55px;
height: 36px;
text-align: center;
top:12px; 
font-size:20px;

}

.pwSlash {
  font-size: 14px;          /* oder was optisch zu deiner Eingabe passt */
  line-height: 1;            /* keine zusätzliche Vertikaleinfluss */
  display: inline-block;
  width: 100%;               /* Icon im Button horizontal zentrieren */
  text-align: center;
  vertical-align: middle;    /* Icon vertikal mittig im Button */
  padding: 9px;
}
/* .LMscroll {
	overflow-y: scroll;
	max-height: 79vh;
	min-height: 640px;
	width: 88%;
	border: none;
	background: white;
	position: absolute;
	left: 25px;
} */
.Klscroll {
	overflow-y: scroll;
	min-height: 66vh;
	width: 88%;
	border: none;
	background: white;
	position: absolute;
	left: 25px;
	margin-top: 15px;
}

.main-menu {
	background:#F7F7F7;
	position:fixed;
	top:0;
	bottom:0;
	height:100%;
	left:0;
	width:55px;
	overflow:hidden;
	-webkit-transition:width 0.4s linear;
	-webkit-transition: all 500ms cubic-bezier(0.635, 0.000, 0.195, 1.330);
	transition:width 0.4s linear;
	transition: all 500ms cubic-bezier(0.635, 0.000, 0.195, 1.330);
	-webkit-transform:translateZ(0) scale(1,1);
	box-shadow: 1px 0 15px rgba(0, 0, 0, 0.5);
	opacity:1;
	z-index:100;
}

/* .main-menu:hover, nav.main-menu.expanded {
	width:250px;
	overflow:hidden;
	opacity:1;
} */
/* Nur noch per Klasse steuern, NICHT per :hover */
.main-menu.delayed-hover,
nav.main-menu.expanded {
	width:250px;
	overflow:hidden;
	opacity:1;
}

.main-menu>ul {
margin:7px 0;

}
.main-menu .collapsing {
    -webkit-transition: ease-in-out all 500ms cubic-bezier(0.850, -0.225, 0.670, 0.465);
    transition: ease-in-out all 500ms cubic-bezier(0.850, -0.225, 0.670, 0.465);

}

.main-menu li {
	position:relative;
	display:block;
	width:250px;

}

.main-menu li>a {
	position:relative;
	width:255px;
	display:table;
	border-collapse:collapse;
	border-spacing:0;
	color:#606060;
	font-size: 13px;
	text-decoration:none;
	-webkit-transform:translateZ(0) scale(1,1);
	-webkit-transition:all .1s linear;
	transition:all .1s linear;
	font-family: 'Strait', sans-serif;
	border-top:1px solid #f2f2f2;
	border-top:0px solid rgba(255,255,255,.6);

/* text-shadow: 1px 1px 1px  #fff;   */
}
.lastLi{
	box-shadow: 0px -4px 3px rgba(0,0,0,.2) inset;
}
.oneLi{
	box-shadow: 2px 3px 3px rgba(0,0,0,.2) inset, 2px -3px 3px rgba(0,0,0,.2) inset;
}
.teamviewer{
	background: rgb(51, 153, 255);
	color: white;
	border-radius: 50%;
	height: 23px;
	width: 23px;
	position: initial;
	padding: 3px;
	padding-top: 4px;
	margin-left: 16px;
	margin-top: 7px;
	margin-bottom: 7px;
}
.fa-debinet{
background: white;
color: black;
border-radius: 50%;
height: 23px;
width: 23px;
position: initial;
margin-left: 16px;
margin-top: 7px;
margin-bottom: 7px;
font: unset;
font-size: 4pt !important;
font-weight: 700 !important;
display: block;
border: 2px solid gray;
padding: 5px 0px 5px 1px;
text-decoration: underline;
text-transform: none;
background-image:url('../../images/debinet.png');
background-repeat:no-repeat; 
background-size: 90%;
background-position: 50% 15%;
}
#accordion.panel-group .panel {
    margin-top: 0px !important;
	background-color: transparent !important;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0 !important;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: none;
}


/* Patientenverwaltung & mediDash ausblenden*/
/* li.panel:nth-child(3),li.panel:nth-child(5), #help li:nth-child(1), #help li:nth-child(2){ */
/* .klientMenu,.mdMenu{
	display:none !important;
} */

#rahmenX{
	filter: blur(0px);
}
#main-menu:hover > #rahmenX{
	filter: blur(2px) ;
}

.logout_btn a:hover{
	background-color: rgba(255,0,0,.9) !important;
}
.submenu {
	position: relative;
	width: 255px;
	display: block;
	border-collapse: collapse;
	border-spacing: 0;
	color: #8a8a8a;
	font-size: 13px;
	text-decoration: none;
	-webkit-transform: translateZ(0) scale(1,1);
	-webkit-transition: all .4s linear;
	transition: all .4s linear;
	font-family: 'Strait', sans-serif;
	border-top: 1px solid #f2f2f2;
	
}
.submenu li{
	background: rgba(0,0,0,.12);
	border-top: 1px solid rgba(0,0,0,.1);
}
.submenu .nav-text{
	position:relative;
	left: 8px;
	color: #00b1b0;
}
.submenu .nav-text:hover{
	color: white;
}
.submenu .fa {
    position: relative;
    display: table-cell;
    width: 55px;
    height: 36px;
    text-align: center;
    top: 12px;
    font-size: 20px;
    color: white;
	text-shadow: 1px 1px 1px darkgray;
}

.main-menu .nav-icon {
  
	position:relative;
	display:table-cell;
	width:55px;
	height:36px;
	text-align:center;
	vertical-align:middle;
	font-size:18px;

}

.main-menu .nav-text  {
   
	position:relative;
	display:table-cell;
	vertical-align:middle;
	width:190px;
	font-family: 'Titillium Web', sans-serif;
	font-weight:400;
}


.main-menu .share {
}



.main-menu .fb-like {

	left: 180px;
	position:absolute;
	top: 15px;
}

.main-menu>ul.logout {
	position:absolute;
	left:0;
	bottom:0;
  
}

.no-touch .scrollable.hover {
overflow-y:hidden;

}

.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
  
}


/* Logo Hover Property */


/* .settings:hover, settings:focus {   
	background:url( https://s17.postimg.org/74cl7s05b/logo_hover.jpg);
	-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
	-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
	-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
	transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 
}

.settings:active, settings:focus {   
	background:url( https://s3.postimg.org/bqfooag4z/startific.jpg);
	-webkit-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
	-moz-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
	-o-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
	transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; 
} */


a:hover,a:focus {
	text-decoration:none;
	border-left:0px solid #F7F7F7;



}

nav {
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
  
}

nav ul {
	outline:0;
	margin:0;
	padding:0;
	/* text-transform: uppercase; */
	font-weight:bold;
}nav li {
	outline:0;
	margin:0;
	padding:0;
	font-weight:400;
}




/* Darker element side menu Start*/


.darkerli
{
	background-color:#ededed;
	text-transform:capitalize;  
}

.darkerlishadow
{
background-color:#ededed;
text-transform:capitalize;  
-webkit-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
box-shadow:         inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
}


.darkerlishadowdown
{
background-color:#ededed;
text-transform:capitalize;  
-webkit-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
box-shadow:         inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
}

/* Darker element side menu End*/

/* .brand{
background: rgba(90,90,90,1);
width: 100%;
height: 50px;
color: white;
font-size: 15px;
padding-top: 15px;
position: absolute;
bottom: 0%;
text-align: center;
z-index: 1 !important;
} */
.brand {
	background: rgba(90,90,90,1);
	width: 35%;
	height: 50px;
	color: white;
	font-size: 15px;
	padding-top: 15px;
	position: fixed;
	bottom: 0px;
	text-align: left !important;
	z-index: 1 !important;
	float: right;
	border-radius: 20px 0 0 0;
	right: 0px;
	transition: bottom 1s ease-in-out;
}

.brand.shifted {
  bottom: -35px; /* Zielwert nach 15 Sekunden */
}

.brand:hover {
  bottom: 0px; /* Zurücksetzen auf 0px bei Hover */
}

.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#00bbbb;
text-shadow: 0px 0px 0px; 
box-shadow: 0px 8px 7px -10px rgba(0,0,0,.85) inset;
}
.main-menu .active{
	color: #fff !important;
	background-color: #00bbbb;
	text-shadow: 0px 0px 0px;
}

.main-menu .active2nd {
	color: #fff !important;
	background-color: #00e6e682;
	text-shadow: 0px 1px 6px #00000063;
}
.main-menu .active3nd{
	color: #fff !important;
	background-color: #cce6dd !important;
	text-shadow: 0px 0px 0px transparent;
}
.main-menu .submenu li a:hover {
	color: #fff !important;
	background-color: #c2e1d6;
	text-shadow: 0px 0px 0px transparent;
}

.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(../fonts/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
.favList{
	max-height: 65vh;
}
#opt_speichern {
    /* Andere Styles hier... */
    visibility: visible;
    opacity: 1;
}

#opt_speichern.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}
#preloadIcon {
	animation: spin 2s infinite linear;
	font-size:40pt;
	color:orange;
	position:relative;
	left:50%;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Mobil-Ansicht -------------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
	.logo img{
		width:85% ;
	}
	.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-right: 15px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: gray;
    background-image: none;
    border: 1px solid white;
    border-radius: 4px;
	}
	.noteDiv {
		position: sticky;
		bottom: 10px;
		width: 160px !important;
		float: right !important;
	}
	.optionDiv {
		z-index: -1;
		background: rgba(0,160,250,.2);
		margin-left: 17px;
		overflow: scroll;
		padding-left: 65px;
		padding-right: 18px;
		padding-top: 10px;
		transition: ease all 1s;
		border-right: 2px groove white;
		height: 95vh;
	}
	#inhalt_opt {
		box-shadow: 0 9px 9px -6px;
		height: 220vh !important;
		background: white !important;
	}	
	#verInfo {
		width: 250px;
		height: 94px;
		top: -19px;
		right: 15px;
		padding-top: 3px;
		position: relative;
		background: white;
	}
	#buttonList-side {
		position: absolute;
		display: block;
		z-index: 999;
		top: 535px;
		right: -100px;
		width: 150px;
		transition: all 500ms cubic-bezier(0.635, 0.000, 0.195, 1.330);
		z-index: 1 !important;
		font-size: 18px !important;
		height: max-content;
	}	
	#buttonList-side .sideMenu {
		padding: 10px;
		transition: all 500ms cubic-bezier(0.635, 0.000, 0.195, 1.330);
		z-index: 1 !important;
		border: 1px solid rgba(0,0,0,.2);
		border-left: 2px groove white;
		box-shadow: 2px 2px 4px rgba(0,0,0,.35);
		font-size: 14px !important;
		padding-left: 18px;
		margin-bottom: 6px;
		position: relative;
		right: 0px;
	}
	#new_speichern {
		position: absolute;
		display: block;
		z-index: 999;
		top: 486px;
		right: -100px;
		width: 150px;
		padding: 10px;
		transition: all 500ms cubic-bezier(0.635, 0.000, 0.195, 1.330);
		z-index: 1 !important;
		border: 1px solid rgba(0,0,0,.2);
		border-left: 2px groove white;
		box-shadow: 2px 2px 4px rgba(0,0,0,.35);
		font-size: 14px !important;
		padding-left: 0px;
		border-radius: 6px;
	}	
	#new_speichern .glyphicon {
		left: -6px;
	}
	.btn{
		border-radius: 4px !important;
	}
	
}


.hide {
    display: none !important; /* Wichtig, um sicherzustellen, dass die Regel nicht von anderen CSS-Regeln überschrieben wird */
}