body {
	background:#E9E9E9;
	padding:0;
	margin:0;
	font-family:Roboto, Arial, Helvetiva, sans-serif;
}


h1 {
	font-size:28px;
	font-weight:600;
	margin:15px 0 30px;
}

h2 {
	padding:0;
	margin:3px 0;
	font-size:120%;
	font-weight:bold;
}

table {
	border-spacing:1px;
}



td,th {
	padding:2px 5px;
	vertical-align:top;
	font-size:13px;
}

th {
	font-weight:bold;
	/* font-size:10.5px; */
}

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background:#00B3C73d;
}

.table_sessions .comment:hover {
	background:#fff;
	border: 1px solid rgb(77, 144, 254);
	margin: -1px;
}
.table_sessions .comment {
  cursor:pointer;	
  padding:3px;
}

.table_sessions td {
	padding: 5px;
}

tr.even,tr:nth-child(even) {background:#eee; }

/* a,a:link,a:hover,a:active,a:visited { */
	/* font-weight:bold; */
	/* text-decoration:none; */
	/* color:#33E; */
/* } */

/* a:hover { */
	/* color:#005; */
/* } */

a {
	color:#00a3b5;
	font-weight:500;
}

img {
	max-width:100%;
}

p {
	margin:2px 0 5px 0;
}

.navbar {
	border-radius:0;
}

.navbar-brand {
	width:62px;
	padding:5px 15px;
}

.project .col_project {
	display:none;
}

.btn-success {
	background-color:#50AA4C;
}

.btn-success.btn-outline {
	background-color:transparent;
	color:#50AA4C;
}

.btn-success.btn-outline:hover {
	background-color:#449d44;
	color:#fff;
}

.btn-warning {
	background-color:#ffa500;
	border-color:#ffa500;
}

.btn-warning:hover {
	background-color:#ffa500;
}

.btn-warning.btn-outline {
	background-color:transparent;
	color:#ffa500;
	border-color:#ffa500;
}

.btn-warning.btn-outline:hover {
	background-color:#ffa500;
	color:#fff;
}


table.tshow th {
	text-align:left;
}


table.tshow thead th {
	background:#00B3C7;
	color:#fff;
	border-bottom:none;
}

table.tshow thead th a {
	color:#fff;
}

table.tshow th.headline3,
table.tshow tr.headline3 th {
	font-size:75%;
	text-align:left;
	font-weight:bold;
}


table th.headline {
	font-size:120%;
	text-align:left;
	background:#00B3C7;
	color:#fff;
}

table th.headline2,
table tr.headline2 th {
	text-align:left;
	background:#00B3C7;
	
	color:#fff;
}


table.sortable>thead tr.headline2 th:hover:not([data-defaultsort=disabled]) {
	background: #00B3C7;
}

.table.table-small td,
.table.table-small th {
	padding:6px;
	font-size:0.8em;
}

#content .container {
	/* background:#fff; */
}

@media (min-width: 1400px) {
	.container {
		width: 1370px!important;
	}
}

@media (min-width: 1600px) {
	.container {
		width: 1570px!important;
	}
}


.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
	border-left:none;
}

.panel {
	box-shadow:0rem 0rem 30px rgba(0,0,0,0.12);
	border:none;
	border-radius:0;
}

.panel .panel {
	box-shadow:none;
	border:1px solid #ddd;
}

.panel.panel-sm {
	font-size:12px;
}


.legend-chart {
	font-size:10px;
}



.panel-sm .table td, .table th {
	font-size:11px;
}

.panel.panel-sm .panel-heading {
	padding:10px 5px 5px;
	font-weight:bold;
}

.panel .panel-heading.panel-alarm {
	color:#fff;
	background-color: #d9534f;
}


.panel.panel-sm .progress {
	height:10px;
	margin:3px 0 12px 0;
}

.panel.panel-sm .progress-label, .panel.panel-sm .progress-note {
	font-size:9px;
	font-weight:bold;
}

.panel.panel-sm [class^="col"] {
	padding-left:5px;
	padding-right:5px;
}

.circle-productivity {
	border-radius:10px;
	border:2px solid #50AA4C;
	text-align:center;
	font-size:1.1em;
	line-height:1.1;
	margin:0 -24px 12px 0;
	padding:4px 8px;
}

.circle-productivity-amount {
	font-size:2.4em;
}

.state {
	border: 1px solid #ddd;
    text-align: center;
    width: 40px;
    padding: 4px 2px 4px;
    border-radius: 3px;
    background: #fff;
    font-size: 0.9em;
	margin-left:4px;
	position:relative;
	height:24px;
	overflow:hidden;
}

.state-danger {
	background:#d9534f;
	color:#fff;
}

.state .fa {
	position:absolute;
	left:0;
	right:0;
	transition:all 0.3s ease;
	transform:translateX(0);
	top:5px;
}

.state .state-inner {
	font-size: 0.6em;
	opacity:0;
	margin-top:2px;
	position:absolute;
	left:0;
	right:0;
	transition:all 0.3s ease;
	transform:translateX(-20px);
	pointer-events:none;
}

.pointer {
	cursor:pointer;
}

.state:hover .fa {
	opacity:0;
	transform:translateX(20px);
}

.state:hover .state-inner {
	opacity:1;
	transform:translateX(0);
}

/* user test - state inner */

/* font-size: 0.6em;
    width: 32px;
    padding-top: 9px;
    border-radius: 20px;
    border: 1px solid #eee;
    display: inline-block;
    height: 32px;
    margin-right: 2px;
    left: 0;
    right: 0;
    transition: all 0.3s ease;
    pointer-events: none; */

.inactive, .inactive a {
	opacity:0.4;
	color:#333;
}

.box {
	border:1px #008 solid;

}

.alert.alert-time {
	padding:8px;
	background:#eee;
	font-size:0.8em;
}

.alert.alert-sm {
	font-size:0.8em;
	padding:8px;
	padding-left: 30px;
    	margin: 10px;
}

.alert.alert-default {
	background:#eee;
}

.label-date {
	background:#f8f8f8;
	color:#777;
	box-shadow:0 2px 6px rgba(0,0,0,0.1);
	font-size:inherit;
}

h1 > .label {
	border-radius:18px;
	font-size:small;
	display:inline-block;
	vertical-align:top;
	margin-top:2px;
	padding:.5em 1em .6em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	font-weight:normal;
}

h1 > .label-charge {
	color:#50AA4C;
	background:#fff;
	font-weight:bold;
}

.state_box {
	margin:10px;
}

.project_box {
	margin:20px;
	text-align:center;
}

#active_box {
	position:fixed;
	padding:8px;
	min-height:50px;
	bottom:0;
	right:20px;
	margin-bottom:0;
	border-radius:5px 5px 0 0;
	z-index:999;
	transition:all 0.3s ease;
}

#active_box.collapsed {
	transform:translateY(80%);
	transition:all 0.3s ease;
}

#active_box .close {
	position:absolute;
	right:0;
	top:4px;
	display:inline-block;
	color:#999;
	z-index:999;
	cursor:pointer;
	background:#fff;
	padding:12px;
	font-size:100%;
	opacity:1;
}

#active_box .minimize {
	position:absolute;
	right:32px;
	top:4px;
	display:inline-block;
	color:#999;
	z-index:999;
	cursor:pointer;
	background:#fff;
	padding:12px;
}

#active_box .minimize .far:after {
	content: "\f078";
}

#active_box.collapsed .minimize .far:after {
	content: "\f077";
}

#container {
	margin:auto;
	width:1000px;
	min-height:800px;
	border:#000080 1px solid;
	padding:0;
	margin-top:20px;
}

#container #top {
	background:#C8C8FF;
	margin:0;
	padding:10px;
	text-align:center;
}


#container #navbar {
	background:#005;
	min-height:15px;

}

#container #navbar #basic {
	float:right;
	text-align:right;
	color:white;
	font-weight:bold;
	font-size:12px;
	padding:3px 0px;
}


#container #navbar a,
#container #navbar a:link,
#container #navbar a:hover,
#container #navbar a:visited,
#container #navbar a:active {
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	padding:0 10px;
}

ul.inline {
	list-type:none;
	margin:0 20px;
}

ul.inline li {
	display:inline;
	margin-right:10px;
}

ul.navigation {
	list-type:none;
	padding:0;
	margin:0;
}

ul.navigation li {
	display:inline;
	/* border-left:#fff solid 1px;
	border-right:#fff solid 1px; */
	font-size:13px;
	padding:0px;
	margin:0;
}

#container #navbar ul.navigation li a.active:link,
#container #navbar ul.navigation li a.active:hover,
#container #navbar ul.navigation li a.active:visited,
#container #navbar ul.navigation li a.active:active {
	background:#fff;
	color:#000;
	border-top:1px solid #000055;
	border-left:1px solid #000055;
	border-right:1px solid #000055;

}

#container #navbar ul.navigation li a,
#container #navbar ul.navigation li a:link,
#container #navbar ul.navigation li a:hover,
#container #navbar ul.navigation li a:visited,
#container #navbar ul.navigation li a:active {
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	padding:3px 10px;
	display:inline-block;
}

/*** Hovering Navbar ***/
#container #navbar ul.navigation li a:hover {
	background:#fff;
	color:#005;
}

#container #navbar ul.navigation li:hover {
	border:#005 1px solid;
}
/*** Hovering finished ***/



#container #subnavbar {
    font-size:110%;
	min-height:12px;
	border-bottom:1px #000055 solid;
}

#container #subnavbar h4 {
	font-size:110%;
	font-weight:bold;
	padding:0 5px 0 5px;
	margin:0;
	display:inline;

}

#container #subnavbar ul {
	list-types:none;
	margin:0;
	padding:0;
	display:block;
}

#container #subnavbar ul li {
	display:inline-block;
	border-right:#000055 solid 1px;
	font-size:11px;
	margin:0;
}

#container #subnavbar ul li a,
#container #subnavbar ul li a:link,
#container #subnavbar ul li a:visited,
#container #subnavbar ul li a:hover,
#container #subnavbar ul li a:active {
	padding:5px 5px;
	display:inline-block;
	text-decoration:none;
	font-weight:bold;
}

#container #subnavbar ul li a:hover {
	color:#C8C8FF;
}


#container #content {
	padding:15px 10px;
}

/** Haupttitel **/
#container #content h1 {
	background: #000055;
	color:#fff;
	padding:5px 7px;
	margin:0 -10px 5px -10px;
}

/** Titelunterschriften **/
#container #content h2 {
	background: #C8C8FF;
	color:#000055;
	padding:0px 12px;
	border-bottom: 2px #000055 solid;
	margin:-5px -10px 5px -10px;
}


#container #content h3 {
	background: #000055;
	color:#fff;
	padding:0px 12px;
	margin:10px 0;
	border-bottom: 2px #000055 solid;
	font-size:170%;
}


/** Abwechselnd Verschiedene Farben für verschiedene Reihen **/
.tcolor0 {
	background:#C8C8FF;
}

.tcolor1 {
	background:#E8E8FF;
}

.table>tbody>tr>td {
	vertical-align:middle;
}

.active-task {
	background-color:rgba(230, 247, 235, 1)!important;
}

.active-task.paused {
	background-color:rgba(224, 104, 18, 0.1)!important;
}

div.active-task {
	padding:10px;
}

td.active-task:first-child, div.active-task {
	padding-left:32px;
	position:relative;
}

td.active-task:first-child:before, div.active-task:before {
    position:absolute;
    left: 8px;
    top: 0px;
    bottom: 0;
    margin: auto;
	content:" ";
	background:rgba(80, 170, 76, 0.5);
	box-shadow: 0 0 0 rgba(80, 170, 76, 0.3);
	border-radius:50%;
	width:12px;
	height:12px;
	animation-name: blink;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

td.active-task.paused:first-child:before, div.active-task.paused:before {
	background:rgba(224, 104, 18, 0.5)!important;
	box-shadow: 0 0 0 rgba(224, 104, 18, 0.3);
	animation-name: blinkpaused;
}

.accounting_nav {
	background: #ddd;
}

.accounting_nav a {
	display:block;
	padding: 5px;
	margin-left:-15px;
	margin-right:-15px;
}

.accounting_nav .active {
	margin-bottom:-1px;
	background:#fff;
}


@keyframes blink {
	0% {
		
		-webkit-box-shadow: 0 0 0 0 rgba(80, 170, 76, 0.3);
	}
	
	40% {

		-webkit-box-shadow: 0 0 0 10px rgba(80, 170, 76, 0);
	}

	100% {
		-webkit-box-shadow: 0 0 0 0 rgba(80, 170, 76, 0);
	}
}

@keyframes blinkpaused {
	0% {
		
		-webkit-box-shadow: 0 0 0 0 rgba(224, 104, 18, 0.3);
	}
	
	40% {

		-webkit-box-shadow: 0 0 0 10px rgba(224, 104, 18, 0);
	}

	100% {
		-webkit-box-shadow: 0 0 0 0 rgba(224, 104, 18, 0);
	}
}

.fav {
	position:relative;
	padding-left:28px;
	text-align:left;
	width:120px;
	display:inline-block;
}

.fav:hover {
	text-decoration:none;
}

.fav:after {
	font-family:"Font Awesome 5 Pro";
	content: " ";
}

.fav.fav-add:after {
	content: "\f005";
	font-weight:400;
	position:absolute;
	left:6px;
	top:6px;
	display:inline-block;
}

.fav.fav-add:hover:after {
	font-weight:900;
}

.fav.fav-remove:after {
	content: "\f005";
	font-weight:900;
	position:absolute;
	left:6px;
	top:6px;
	display:inline-block;
}

.fav.fav-remove:hover span {
	display:none;
}

.fav.fav-remove:hover:after {
	font-weight:400;
}

.fav.fav-remove:hover:before {
	content:"Entfernen";
	font-family:inherit;
}




.login {
	margin:auto;
	width:350px;
	padding:5px;
}

.login table {
	border-spacing:2px;
}

.login td {
}


.message_box {
	width:95%;
	margin:auto;
	margin-bottom:10px;
	padding:10px;
	background:#E2F0F7;
	border:1px solid #2D8EC1;
}

#container #content .error_box {
	width:95%;
	margin:auto;
}

.error_box {
	margin-bottom:10px;
	padding:10px;
	background:#FBB;
	border:1px solid #D00;
	
}

.info_box {
	margin:10px auto;
	padding:10px;
	background:#DDFFDD;
	color:#0A0;
	font-weight:bold;
	border:2px dotted #00CC00;	
}

#container #content .info_box {
	width:60%;
	min-height:60px;
}

#container #content .info_box h2 {
	margin-top:-10px;
	background:#00FF0B;
	border-bottom:2px solid #0A0;
}

.corner {
	float:right;
}

/** Spans **/
.dress, .dress a {
	color:#FB0;
	font-weight:bold;
}

.dress a:hover {
	color:#fff;
}

.big {
	font-size:200%!important;
}

.font90 {font-size:90%!important;}
.font100 {font-size:100%!important;}
.font105 {font-size:105%!important;}
.font110 {font-size:110%!important;}
.font120 {font-size:120%!important;}
.font130 {font-size:130%!important;}
.font140 {font-size:140%!important;}
.font150 {font-size:150%!important;}

.hover:hover {
	background-color:#eef5f6!important;
}

/* .info {
	margin:1px;
	padding:1px 1px 1px 10px;
	background:#E0E0EF;
	border:1px #C8C8FF dashed;
} */


#container .smallnavbar {
	border-bottom:1px #000055 solid;
	margin:-10px 0px 5px 0px;
	padding:0px 5px;

}

#container .smallnavbar ul {
	list-types:none;
	margin:0;
	padding:0;
	display:inline;
}

#container .smallnavbar ul li {
	display:inline;
	border-right:#000055 solid 1px;
	font-size:11px;
	margin:0;
	padding:0 5px;
	font-weight:bold;
}

#container .smallnavbar ul li a,
#container .smallnavbar ul li a:link,
#container .smallnavbar ul li a:visited,
#container .smallnavbar ul li a:hover,
#container .smallnavbar ul li a:active {
	text-decoration:none;
	font-weight:bold;
}

#container .smallnavbar ul li a:hover {
	color:#C8C8FF;
}

input:disabled,textarea:disabled {
  background:#bbc;
}

input[type=number],input.input-number {
	text-align:right;
	padding-right:24px;
}

.form-control-inline {
	width:auto;
	display:inline;
}

.form-sm .form-control,
.form-sm .control-label {
	font-size:12px;
	padding:5px 10px;
	height:auto;
	color:#000;
}

.chosen-container {
	width:100%!important;
}

#frequency_label {
	position:absolute;
	right:24px;
	top:30%;
	z-index:9;
}

.append {
	position:relative;
}

.append-inline {
	display:inline-block;
}

.append:before {
	position:absolute;
	right:8px;
	display:block;
	z-index:1;
	top:8px;
	opacity:0.8;
	font-size:0.9em;
}

.append-min:before {
	content:"min";
}

.append-percent:before {
	content:"%";
}

.append-std:before {
	content:"Std";
}

.append-h:before {
	content:"h";
}

.append-eur:before {
	content:"€";
}


.w40 {
	width:40%;
}

.datetimepicker {
    padding-left: 30px;
    font-size: 90%;
}

.datetimepicker.datetimepicker_2 {
    padding-left: 60px;
}

.datetimepicker-steps  {
	position:absolute;
	top:0px;
	height:34px;
	padding:6px 8px 0 8px;
	background:#f8f8f8;
	border:1px solid #ccc;
	color:#333;
	font-size:0.9em;
	text-align:center;
	line-height:1;
}

.datetimepicker-steps:hover {
	text-decoration:none;
	background-color:#ddd;
}

.datetimepicker-steps small {
	display:block;
}

.datetimepicker-steps span {
	font-size:0.8em;
}

#start_minus_15,
#stop_minus_15 {
	left:15px;
	border-radius:4px 0 0 4px;
}

#start_minus_5,
#stop_minus_5 {
	left:44px;
	border-radius:0px;
}


#start_plus_5,
#stop_plus_5 {
	right:44px;
	border-radius:0px;
}

#start_plus_15,
#stop_plus_15 {
	right:15px;
	border-radius:0 4px 4px 0;
}

.costtable {
  border-spacing: 0px;
  border-padding: 0px;
}

.costtable td {
  font-size:14px;
  font-weight:bold;
  text-align:center;
  border:1px solid #ddd;
  padding:3px;
}

.costtable .price_type,.costtable .link {
  font-size:10px;
  display:block;
}

.costtable .link a,.costtable .link a:link, .costtable .link a:active,.costtable .link a:visited,.costtable .link a:hover {
  color:#ddf;
}

.costtable .head {
  font-weight:bold;
  font-size:11px;
  display:block;
}

.costtable .cost_total {
  background: #c00;
  color: #fff;
}

.costtable .cost_user {
  background: #FF7F00;
  color: #fff;
}

.costtable .cost_custom {
  background: #FF7F00;
  color: #fff;
}

.costtable .price {
  background: #090;
  color:#fff;
}

.costtable .price {
  background: #090;
  color:#fff;
}

.costtable .price_type {
  color:#ff0;
}

.costtable .budget {
  background: #fff;
  color:#000;
}

.budget_container {
  white-space:nowrap;
  display:inline-block;
}

.costtable .payment {
  background: #090;
  color:#fff;
}

.costtable .payment_open {
  background: #c00;
  color:#fff;
}

.costtable .payment_received {
  background: #0a0;
  color:#fff;
}

#head {
	width:100%;
	height:50px;
	position: fixed;
	top:0px;
	left:0px;
	background:#cccccc;
	margin:0px;
	border-bottom:1px solid #666;
	padding:5px;
}

#head .tool {
	float:left;
	border-right:1px solid #666;
	padding:5px 10px;
}

#head .tool h3 {
	float:left;
	margin:0px 10px;
	font-size:150%;
}

#head .tool .tcontent {
	float:left;
	margin:0px 10px;
}

.day_el {
	margin:0px 3px;
	width:300px;
}
.list-element {
	margin: auto!important;
	padding-bottom:50px!important;
	border:1px solid #ccc!important;
	min-height:500px;
}

.list-element li {
	margin: 0 0px 5px 0px;
	padding: 5px;
	font-size:1.2em;
}

a.button {
	padding:2px 5px;
	margin:3px;
	border: 1px solid #666;
	background:#fff;
	color:blue;
	font-weight:bold;
	border-radius:5px;
	box-shadow: 2px 1px 4px #666;
}

.charging {
/*	display:none; */
}

.filter_hide,.charge_hide {
	display:none;
}

.row_summary {
	border: 1px solid #000;
}

.row_summary td {
	font-weight:bold;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

.row_summary td:first-child {
	border-left: 1px solid #000;
}

.row_summary td:last-child {
	border-right: 1px solid #000;
}

.pretty_table tr:hover td {
	background-color: #eee!important;
}

.pretty_table td,
.pretty_table th {
	font-size:12px;
	line-height:1.5em;
}

.pretty_table tr:nth-child(even) {
	background:#f2f2f2;
}

.size-80 {font-size:80%!important;}
.size-125 {font-size:120%!important;}
.size-150 {font-size:150%!important;}
.size-175 {font-size:175%!important;}
.size-200  {font-size:200%!important;}

.mt0 {margin-top:0px!important;}
.mt5 {margin-top:5px!important;}
.mt10 {margin-top:10px!important;}
.mt15 {margin-top:15px!important;}
.mt20 {margin-top:20px!important;}
.mt25 {margin-top:25px!important;}
.mt30 {margin-top:30px!important;}
.mt50 {margin-top:50px!important;}

.mb0 {margin-bottom:0px!important;}
.mb5 {margin-bottom:5px!important;}
.mb10 {margin-bottom:10px!important;}
.mb15 {margin-bottom:15px!important;}
.mb20 {margin-bottom:20px!important;}
.mb25 {margin-bottom:25px!important;}
.mb30 {margin-bottom:30px!important;}
.mb50 {margin-bottom:50px!important;}

.mr0 {margin-right:0px!important;}
.mr5 {margin-right:5px!important;}
.mr10 {margin-right:10px!important;}
.mr15 {margin-right:15px!important;}
.mr20 {margin-right:20px!important;}
.mr25 {margin-right:25px!important;}
.mr30 {margin-right:30px!important;}
.mr50 {margin-right:50px!important;}

.ml0 {margin-left:0px!important;}
.ml5 {margin-left:5!important;}
.ml10 {margin-left:10px!important;}
.ml15 {margin-left:15px!important;}
.ml20 {margin-left:20px!important;}
.ml25 {margin-left:25px!important;}
.ml30 {margin-left:30px!important;}
.ml50 {margin-left:50px!important;}

.m0 {margin:0px!important;}
.m5 {margin:5px!important;}
.m10 {margin:10px!important;}
.m15 {margin:15px!important;}
.m25 {margin:25px!important;}
.m30 {margin:30px!important;}
.m50 {margin:50px!important;}


.pt0 {padding-top:0px!important;}
.pt5 {padding-top:5px!important;}
.pt10 {padding-top:10px!important;}
.pt15 {padding-top:15px!important;}
.pt25 {padding-top:25px!important;}
.pt30 {padding-top:30px!important;}
.pt50 {padding-top:50px!important;}

.pb0 {padding-bottom:0px!important;}
.pb5 {padding-bottom:5px!important;}
.pb10 {padding-bottom:10px!important;}
.pb15 {padding-bottom:15px!important;}
.pb25 {padding-bottom:25px!important;}
.pb30 {padding-bottom:30px!important;}
.pb50 {padding-bottom:50px!important;}

.pr0 {padding-right:0px!important;}
.pr5 {padding-right:5px!important;}
.pr10 {padding-right:10px!important;}
.pr15 {padding-right:15px!important;}
.pr25 {padding-right:25px!important;}
.pr30 {padding-right:30px!important;}
.pr40 {padding-right:40px!important;}
.pr50 {padding-right:50px!important;}

.pl0 {padding-left:0px!important;}
.pl5 {padding-left:5px!important;}
.pl10 {padding-left:10px!important;}
.pl15 {padding-left:15px!important;}
.pl25 {padding-left:25px!important;}
.pl30 {padding-left:30px!important;}
.pl40 {padding-left:40px!important;}
.pl50 {padding-left:50px!important;}

.p0 {padding:0px!important;}
.p5 {padding:5px!important;}
.p10 {padding:10px!important;}
.p15 {padding:15px!important;}
.p25 {padding:25px!important;}
.p30 {padding:30px!important;}
.p50 {padding:50px!important;}


.h50 {height:50px!important;}
.h100 {height:100px!important;}



table.table-calc tr:last-child td,
table.table-calc tr:last-child th {
 border-bottom:2px solid #ddd;
}

table.table-calc tr td:last-child {
  text-align:right;
}

/* .project_list .state_5,
.task_list .state_5 {
  display:none;
} '/


td.icon-danger:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f071";
  font-weight: 900;
  display:inline-block;
  margin-left:3px;
}

*/

.legend-chart {
	position:absolute;
	right:10px;
	top:0;
	color:#777;
}

.legend-chart ul {
	list-style:none;
}

.legend-chart ul li {
	margin-bottom:3px;
}

.legend-square {
	width:11px;
	height:11px;
	display:inline-block;
	margin-right:3px;
	vertical-align: middle;
}

.nowrap, .nowrap td, .nowrap th {
  white-space:nowrap;
}

.block {
  display:block;
}


.vtop, .vtop td, .vtop th {
  vertical-align:top!important;
}

.small_cost {
	font-size:80%;
	color:#f00;
	font-weight:bold;
}

.smaller {
	font-size:66%;
}

.revenue_table td>span {
  display:block;
}

.periodic_revenue:before {
    font-family: "Font Awesome 5 Pro";
/*    content: "\f021 "; 
    font-size:30%;
    margin-right:3px; */

}

.col_custom_cost .tooltip-inner  {
  max-width: 400px;
  width: 400px;
}
.col_custom_cost .tooltip-inner span,
.col_custom_cost .tooltip-inner td {
	white-space: nowrap;
}

.accounting_table .tooltip-inner {
    max-width: 500px;
    /* If max-width does not work, try using width instead */
    width: 500px; 	
}

.month-container .tooltip-inner {
	max-width:200px;
	width: 200px;
}


#user_income_table .tooltip-inner,
.responsible_hours_table .tooltip-inner, 
.revenue_table .tooltip-inner {
    max-width: 750px;
    /* If max-width does not work, try using width instead */
    width: 750px; 
}

.tooltip-400 .tooltip-inner {
	max-width: 400px;
	width: 400px;
}
.tooltip-500 .tooltip-inner {
	max-width: 500px;
	width: 500px;
}

.tooltip-600 .tooltip-inner {
	max-width: 600px;
	width: 600px;
}

.tooltip-750 .tooltip-inner {
	max-width: 750px;
	width: 750px;
}

table.table_tooltip tr {
	background:transparent!important;
	color:inherit!important;
}

table.table_tooltip tr td {
	font-size:90%;
	height:auto;
	border:0px;
}


.bold {
	font-weight:bold!important;
}
.not-bold {
	font-weight:normal!important;
}

.italic {
	font-style:italic!important;
}

.border,tr.border td,tr.border th {
	border: 1px solid #666;
}

.border-right,tr.border-right td,tr.border-right th {
	border-right: 1px solid #666;
}

.border-top,tr.border-top td,tr.border-top th {
	border-top: 1px solid #666;
}

.border-bottom,tr.border-bottom td,tr.border-bottom th {
	border-bottom: 1px solid #666;
}

.border-left,tr.border-left td,tr.border-left th {
	border-left: 1px solid #666;
}

#calculator {
	position:absolute;
	width:200px;
	height:50px;
	bottom:30px;
	left:10px;
	background:#fff;
	border: 1px solid #000;
	padding:5px;
}


.table-cellpadding tr td {
	padding:20px 8px!important;
}

.action_fields {
	display:none;
}

.tr_session .category_invoice {
	font-weight:bold;
	padding:1px 2px;
	margin-bottom:10px;	
	background:#00B3C7;
	color:#fff;
}

.input-text {
	    background-color: #fff;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    color: #555555;
    display: block;
    height: 34px;
    overflow: hidden;
    line-height: 34px;
    padding: 0 0 0 8px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}


.notification_badge,
.proposal_notification {
	background-color: #fa3e3e;
	/*     background: #A82C3B; */
    border-radius: 2px;
    color: white;
    padding: 1px 3px;
    font-size: 10px;
    position: absolute; /* Position the badge within the relatively positioned button */
    top: 0;
    right: 0;
}

 

.selected_row {
  color: #666;
  background-color: #f5f5dc !important;
}

.inline-block {
	display:inline-block;
}

.block {
	display:block;
}

.inline-block-bordered {
	display:inline-block;
	margin-left:15px!important;
	margin-right:15px!important;
	padding-left:15px!important;
	padding-right:15px!important;
	border-left: 1px solid #666;
}

.box_pm,.box_am,.box_cm {border:1px solid #ccc;padding:0px 0.2em;display:inline-block;font-weight:bold;}
.box_pm {color:#38761D!important;background:#B6D7A8;border-color:#38761D;}
.box_am {color:#007D8A!important;background:#A2C4C9;border-color:#007D8A;}
.box_cm {color:#F1C232!important;background:#FFF2CC;border-color:#F1C232;}

.color-td {color:#00B3C7!important;}
.color-white {color: #fff!important;}
.color-black {color: #000!important;}
.color-td-warning {color:#e06812!important;}
.color-td-middle-grey {color:#a0a0a0!important;}
.color-td-cool-grey {color:#dddddd!important;}
.color-td-black {color:#000000!important;}
.color-td-dark-grey {color:#444444!important;}
.color-td-success {color:#50aa4c!important;}
.color-td-danger {color:#A82c3B!important;}
.color-td-bright-white {color:#f8f8f8!important;}
.color-td-10pt {color:#eef5f6!important;}


.bg-td {background-color:#00B3C7!important;}
.bg-td-warning {background-color:#e06812!important;}
.bg-td-cool-grey {background-color:#dddddd!important;}
.bg-td-cooler-grey {background-color:#eeeeee!important;}
.bg-td-middle-grey {background-color:#a0a0a0!important;}
.bg-td-black {background-color:#000000!important;}
.bg-td-dark-grey {background-color:#444444!important;}
.bg-td-success {background-color:#50aa4c!important;}
.bg-td-danger {background-color:#A82c3B!important;}
.bg-td-bright-white {background-color:#f8f8f8!important;}
.bg-td-10pt {background-color:#eef5f6!important;}
.bg-td-yellow {background-color:#ffe51e!important;}
.bg-white {background-color:#fff;}

/** Additional colors for progress bars */
.bg-td-bar-low {background-color:rgba(97, 73, 76, 0.8)!important;}
.bg-td-bar-low-grey {background-color:#a0a0a0!important;}
.bg-td-bar-orange {background-color:rgba(224, 104, 18, 0.8)!important;}


/* Dezente Farbpalette, 10% intensiver */
.bg-td-warning-light {
	background-color: #f3d6bb !important; /* 10% intensiverer Orange-Ton */
  }
  
  .bg-td-success-light {
	background-color: #d6edd6 !important; /* 10% intensiverer Grün-Ton */
  }
  
  .bg-td-danger-light {
	background-color: #edd6d9 !important; /* 10% intensiverer Rot-Ton */
  }

.bg-td-success-half {
	background: linear-gradient(
    to bottom right, 
    #ffffff 0%, 
    #ffffff 50%, 
    #50aa4c 50%, 
    #50aa4c 100%
  )!important;	
}

.border-td {border-color:#00B3C7!important;}
.border-td-warning {border-color:#e06812!important;}
.border-td-cool-grey {border-color:#dddddd!important;}
.border-td-middle-grey {border-color:#a0a0a0!important;}
.border-td-black {border-color:#000000!important;}
.border-td-dark-grey {border-color:#444444!important;}
.border-td-success {border-color:#50aa4c!important;}
.border-td-danger {border-color:#A82c3B!important;}
.border-td-bright-white {border-color:#f8f8f8!important;}
.border-td-10pt {border-color:#eef5f6!important;}

.btn-dark,.btn-dark:hover,.btn-dark:active,.btn-dark:visited {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

.btn-outline-dark:hover {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

.btn-outline-dark {
    color: #343a40;
    background-color: transparent;
    background-image: none;
    border-color: #343a40;
}



@media (min-width: 768px) {
	.modal-dialog { width:800px; }
}


table.highlight_col,table.highlight_row {
/*  overflow: hidden; */
}

table.highlight_row tr:hover {
  background-color: #d9d9d9!important;
}

table.highlight_col td,
table.highlight_col th {
  position: relative;
}

table.highlight_col td:hover::after,
table.highlight_col th:hover::after {
  content: "";
  position: absolute;
  background-color: #d9d9d9!important;
  left: 0;
  top: -5000px;
  z-index: -1;
}

table.highlight_col td:hover::after,
table.highlight_col th:hover::after {
  width: 100%;	
}


table.highlight_col td:hover::after,
table.highlight_col th:hover::after {
  height: 10000px;
}

.big {
	font-size:120%;
}

.hover_edit:hover:after {
	content: " \f044";
	font-size:66%;
	font-family: "Font Awesome 5 Pro";

}

.hide_invoiced {
	display:none!important;
}

td.highlight {
	border: 2px solid #E06812;
}

table.fixedheader > thead > tr > th {
  position: -webkit-sticky!important;
  position: sticky!important;
  top: 0!important;
  z-index: 2!important;
  background:#ddd;
}

table.fixedheader th[scope=row] {
  position: -webkit-sticky!important;
  position: sticky!important;
  top: 0!important;
  z-index: 1!important;
}

.toggle_edit {
	
}

.raci_accountable {
}

.toggle_edit, .modal_edit {
	min-height:20px;
}

.toggle_edit:hover .edit, .modal_edit:hover .edit {
	visibility:visible;
}

.toggle_edit .edit,.modal_edit .edit {
	visibility:hidden;
}

.raci_table tbody th, .raci_table tbody td {
	width:20%;
	height:55px;
	vertical-align: middle!important;
}

.videos {
  padding: 5px;
}


.btn-outline-danger {
    color: #d9534f;
    background-color: transparent;
    background-image: none;
    border-color: #d9534f;
}

.btn-outline-success {
    color: #50AA4C;
    background-color: transparent;
    background-image: none;
    border-color: #50AA4C;
}


.btn-outline-primary {
    color: #204d74;
    background-color: transparent;
    background-image: none;
    border-color: #204d74;
}



select.form-control.small {
	height:25px!important;
	padding:0px!important;
	font-size:85%!important;
}

input.form-control.small {
	height:25px!important;
	padding:0px!important;
	font-size:85%!important;
}


.fa-dollar-sign-clipped:before {
    content: "( \f155  )";
    font-size: 90%;
	color: #666;
}

table.no-bg tr {background:transparent!important;}


.container_billable_targets {
    padding: 0px 2px;
    font-size: 100%;
    position: relative;
	margin: 0 -24px 12px 0;
}

.container_worktime,.container_billable_targets,.container_billable_progress {
    margin: 0px -18px 13px 6px;
    text-align: center;
    border: 0px;
	border-radius: 10px;
	overflow:hidden;
}

.container_billable_progress {
	position:relative;
	overflow:visible;
}

.container_billable_progress .progress-emoji {
    position: absolute;
    right: -20px;
    top: 14px;	
}

.container_worktime {
    margin-top:-13px;
    background: #eee;
    padding: 3px;
    font-size: 80%;
    font-weight: bold;	
}

.label_billable_targets, .label_capacity_plan {
	width: 48%;
    margin: 0px;    

    text-align: center;
    padding: 2px;
    color: #fff;
    border: 0px;
	font-size:90%;
	display:inline-block;
}

.label_capacity_plan {
	
}



.pm_confirmed {
  background:rgba(230, 247, 235, 1)!important;
}


div.danger, span.danger {
	background:#f2dede;
}

div.success, span.success {
	background:#dff0d8;
}

.clear-right {
	clear:right;
}

.clear-left {
	clear:left;
}


.clear {
	clear:both;
}

.grid {
	display:grid;
}

.workday_box {
	padding:10px;
	border:1px solid #333;
	width:14%;
} 

.workday_box_small {
	width:13%;
	padding:2px;
	margin-right:1px;
	background: #eee;
	color: #a0a0a0;
	text-align:center;
	font-size: 75%;
	float:left;
	font-weight:bold;
}

.workday_container {
	margin-left:-5px;
}

small {
	font-size: 75%!important;
}


.text-center {
	text-align:center!important;
}

.sticky_navigation {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background-color: white; /* um sicherzustellen, dass der Inhalt darunter nicht durchscheint */
    z-index: 1000; /* damit die Navigation immer über anderen Inhalten angezeigt wird */
}

.anchor-offset {
    display: block;
    height: 0;
    visibility: hidden;
    position: relative;
    top: -130px;
}

.centered-div {
    display: grid;
    place-items: center;     /* Zentriert Inhalte sowohl vertikal als auch horizontal */
    flex-direction: column;	
}

.flex-height {
	display: flex;
}

.flex-height > div {
    display: flex;
    flex-direction: column;	

}


/* Excel Tabellenlayout */
.table-excel {
    width: 100%;
    border-collapse: collapse;
    background-color: #f3f3f3!important; /* Hintergrundfarbe für nicht bearbeitbare Zellen */
}

.table-excel th {
	text-align: center;
	font-size: 80%;
	background-color:#fff;
}

.table-excel td {
    border: 1px solid #ccc;
	border-bottom-color: #aaa;
    padding: 5px 10px;
    vertical-align: middle;
}

.table-excel .editable-cell {
    background-color: #fce5cd; /* Hintergrundfarbe für bearbeitbare Zellen */
	padding:0px!important;
}

.table-excel .editable-cell input,
.table-excel .editable-cell select,
.table-excel .editable-cell textarea,
.table-excel .editable-cell span
 {
	padding: 5px 10px;
 }

.table-excel .editable-cell input,
.table-excel .editable-cell select,
.table-excel .editable-cell textarea {
    width: 100%; /* Full width */
    box-sizing: border-box;
    border: none;
    background: transparent;
    outline: none;
    padding-right: 5px; /* Platz für die Einheit schaffen */
	cursor: pointer;
}

.table-excel .text-right input,
.table-excel .text-right select,
.table-excel .text-right textarea {
    text-align: right;
}
.table-excel .text-left input,
.table-excel .text-left select,
.table-excel .text-left textarea {
    text-align: left;
	box-sizing:border-box;

}

.table-excel .editable-cell .append input,
.table-excel .editable-cell .append select,
.table-excel .editable-cell .append textarea {
    padding-right: 20px; /* Platz für die Einheit schaffen */
    position: relative;
    z-index: 1;
}

.table-excel .editable-cell .chosen-single {
    position: relative;
    z-index: 1;
}

.table-excel .editable-cell textarea {
	height: 100%;     /* Sorgt dafür, dass die Textarea die gesamte Höhe ihrer umgebenden Zelle einnimmt */
    resize: none;     /* Verhindert, dass der Benutzer die Größe der Textarea ändert */
    overflow-y: auto; 
}

.table-excel .append {
    position: relative;
    width: 100%; /* Full width for the div */
    box-sizing: border-box;
}

.table-excel .append:before {
    position: absolute;
    right: 5px; /* Adjusted for the unit position */
    top: 50%;
    transform: translateY(-50%); /* Vertically center */
    display: block;
    z-index: 1;
    opacity: 1;
}

.table-excel .append-eur:before {
    content: "€";
	z-index:100;
}

.table-excel .append-percent:before {
    content: "%";
	z-index:100;
} 

.table-excel .append-h:before {
    content: "h";
	z-index:100;
}

.table-excel .append-bold:before {
	font-weight:bold;
}

.table-excel .append > span,
.table-excel input:is([readonly]),
.table-excel textarea:is([readonly]) {
    display: block;
    padding-right: 15px; /* Platz für die Einheit schaffen */
    background: #f3f3f3; /* gray background for non-editable values */
/* 	border: 2px solid #f3f3f3; */
	height:100%;
}

.table-excel td > div:not(:last-child) {
  border-bottom:1px solid #ccc;
}

.table-excel .border-right {
	border-right: 1px solid #666;
}

.table-excel .border-top {
	border-top: 1px solid #666;
}

.table-excel .border-bottom {
	border-bottom: 1px solid #666;
}

.table-excel .border-left {
	border-left: 1px solid #666;
}

.table-excel .supporters {
	font-size:75%;
}

.table-excel .supporters .div_supporter {
  height:25px;
/*  max-width:80px; */
}

.table-excel td input:focus-within,
.table-excel td select:focus-within,
.table-excel td textarea:focus-within,
.table-excel td .chosen-container:focus-within {
    border: 2px solid #0078d4; /* Blaue Randfarbe, ähnlich wie in Excel */
    box-shadow: 0 0 8px rgba(0, 120, 212, 0.5); /* Leichter Schatten für einen 3D-Effekt */
}

.table-excel td input:hover,
.table-excel td select:hover,
.table-excel td textarea:hover,
.table-excel td .chosen-container:hover {
    border: 1px solid #0078d4; /* Blaue Randfarbe, ähnlich wie in Excel */
}


/* Pfeile für den Number-Input in Chrome, Safari und Opera ausblenden */
.table-excel input[type="number"]::-webkit-inner-spin-button,
.table-excel input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Pfeile für den Number-Input in Firefox ausblenden */
.table-excel input[type="number"]::-moz-inner-spin-button,
.table-excel input[type="number"]::-moz-outer-spin-button {
    appearance: none;
    margin: 0;
}

.table-excel tbody td, .table-excel td > div.full-height {
	height:60px;
}

.table-excel td > div.half-height {
	height:30px;
/*	z-index:100; */
}

.table-excel .add-new-row {
    background-color: #f7f7f7;
}

.table-excel .add-new-row a {
    color: #333;
    text-decoration: none;
}

.table-excel .tag {
    position: absolute;
    font-size: 60%;
    font-weight: bold;
    padding: 1px 3px!important;
    display: inline-block!important;
    bottom: 0px;
    left: 0px;
    height: auto!important;
}

.table-excel .tag.multi-month-note {
    background: #1d7bce!important;
    color: #fff!important;
}

.table-excel .label-charge {
    color: #000;
    background: #ddd;
    font-weight: bold;
}

/* Für IE11 und Edge */
input[type="number"]::-ms-clear {
    display: none;
}

.table-excel .editable-cell input:invalid,.table-excel .editable-cell textarea:invalid,.table-excel .editable-cell select:invalid {
    border: 1px solid red;
}

.table-excel td {
    box-sizing: border-box; 
}

.table-excel .chosen-container {
	font-size:inherit!important;
}

.table-excel .chosen-single {
	background-color: transparent!important;
	border:inherit!important;
	height:inherit!important;
	line-height:inherit!important;
}

#userList {
	min-height:75px;
}

.month-nav > div {
	border-right:1px solid #ccc;
	padding:0px!important;
}

.month-nav a {
	display: block;
    padding: 5px;
    font-size: 13px;
    text-align: center;
}

.month-nav a:hover {
	background:#00B3C7;
	color:#fff;
}

.month-nav .month-link-container.active a {
	background:#00B3C7;
	color:#fff
}

.w50pct {
	width:50%!important;
	box-sizing:border-box!important;
	float:left;
}

.w50pct {
	height:100%!important;
	box-sizing:border-box!important;
}


#container-change-warning {
	width:100%;
	position:fixed;
	bottom: 10px;
	opacity:90%;
	font-weight:bold;
	background-color: #A00;
	z-index:100;
	padding:10px 20px;
}

/* Excel Tabellenlayout ende */




/** new Loader **/

/* Loader Styles */
.loader-container {
    display: flex;
    justify-content: center; 
    align-items: center;
    position: relative;
    height: 100%; 
	padding:25px;
}

.loader {
    border: 5px solid #f3f3f3; /* Hintergrundfarbe */
    border-top: 5px solid #00B3C7; /* Primäre Farbe */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

.inline-loader {
	border-width: 2px;
	border-top-width: 1px;
	width: 10px;
	height:10px;
	display:inline-block;
}



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

#container-back-to-top {
    display: none; /* Versteckt den Container zunächst */
    position: fixed; /* Macht den Container sticky */
    bottom: 10px; /* Positioniert ihn unten */
    left: 50%; /* Zentriert ihn horizontal */
    transform: translateX(-50%); /* Feinjustierung der Zentrierung */
	z-index:1001;
}

#container-back-to-top a {
	background:#fff;
}

#container-back-to-top a:hover {
	background:#00B3C7;
	color:#fff;
}

.table-excel .ctask_row.tr_supporter.ctask-row input, 
.table-excel tr.ctask_row.tr_supporter.ctask-row textarea, 
.table-excel tr.ctask_row.tr_supporter.ctask-row select {
    background: #ffefde;
}

.table-excel .multi-month {
	position: absolute; 
	top: 7px; 
	left: 4px;
	font-weight:bold;
	font-size:8px;
	height:15px;
	padding:2px 2px;
	border:1px solid #aaa;
	background:#ddd;
	text-align:center;
	z-index:2;
	display:block;
	color:#000;
}



.switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 24px;
  }
  
  .switch input { 
	opacity: 0;
	width: 0;
	height: 0;
  }
  
  .budget_slider {
	position: absolute; /* causes errors in session/split */
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #e06812;
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  .budget_slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 2px;
	bottom: 2px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  input:checked + .budget_slider {
	background-color: #00B3C7;
  }
  
  input:focus + .budget_slider {
	box-shadow: 0 0 1px #00B3C7;
  }
  
  input:checked + .budget_slider:before {
	-webkit-transform: translateX(16px);
	-ms-transform: translateX(16px);
	transform: translateX(16px);
  }

  input[type="checkbox"][readonly] {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: #888888;
  }
  
  /* Rounded sliders */
  .budget_slider.round {
	border-radius: 24px;
  }
  
  .budget_slider.round:before {
	border-radius: 50%;
  }


tr.small td, tr.small th {
	font-size:85%!important;
}


/* Für Pfeile nach unten links von der Zahl */
.append-arrow-down {
	position: relative; /* Um das Kind absolut zu positionieren */
  }
  
  .append-arrow-down::before {
	content: '';
	position: absolute; /* Absolut positioniert, um den Fluss der Zelle nicht zu stören */
	left: 3px; /* Abstand vom linken Rand */
	top: 50%; /* Vertikal zentriert */
	transform: translateY(-50%); /* Exakte vertikale Zentrierung */
	width: 0;
	height: 0;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 3px solid black; /* Farbe des Pfeils */
  }
  
  /* Für Pfeile nach oben links von der Zahl */
  .append-arrow-up {
	position: relative; /* Um das Kind absolut zu positionieren */
  }
  
  .append-arrow-up::before {
	content: '';
	position: absolute;
	left: 3px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-bottom: 3px solid black; /* Farbe des Pfeils */
  }
  
  /* Häkchen links von der Zahl */
  .append-check {
	position: relative; /* Um das Kind absolut zu positionieren */
  }
  
  .append-check::before {
	content: '\f00c'; /* Font Awesome Unicode für das Häkchen */
	font-family: 'Font Awesome 5 Pro';
	font-weight: 900;
	position: absolute;
	left: 3px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%); /* Vertikal zentriert */
	font-size: 0.5em; /* Halb so groß */
	color: black; /* Weiße Farbe für das Häkchen */
  }
  
  /* Text innerhalb der Zelle */
  .cell-text {
	padding-left: 15px; /* Platz für das Symbol links */
  }
  
  /* Legende */
  .color-legend {
	align-items: center;
	height: 20px; /* Höhe der Legende */
	font-size: 8px; /* Kleine Schriftgröße */
	color: black; /* Textfarbe */
	text-align: center; /* Zentriert den Text */
  }
  
  .color-legend-section {
	float:left;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	font-weight: bold;
  }
  
  .color-legend-full {
	width: 120px;
  }
  
  .color-legend-half {
	width: 60px;
  }