html {
	--primary_old: #039cfd !important;
	--primary: #2181C6 !important;
	--brown: #a9875b !important;
	--light: #f1f5f7 !important;
	--orange: #fd7e14 !important;
	--fm: #2381c7 !important;
}

.bg-primary
{
	background-color: var(--primary) !important;
}

.bg-brown {
	background-color: #a9875b !important
}

.btn-outline-brown {
	color: var(--brown) !important;
	border-color: var(--brown) !important;
}

.btn-outline-brown:hover {
	color: white !important;
	background-color: var(--brown)!important;
}

.badge-outline-main {
	color: var(--primary) !important;
	border: 1px solid var(--primary) !important;
}

.badge-outline-brown {
	color: var(--brown) !important;
	border: 1px solid var(--brown) !important;
}

.badge-outline-orange {
	color: var(--orange) !important;
	border: 1px solid var(--orange) !important;
}

.badge-outline-primary {
	color: var(--primary) !important;
	border: 1px solid var(--primary) !important;
}

.border-orange {
	border-color: var(--orange) !important;
}

.text-orange {
	color: var(--orange) !important;
}

.badge-outline-fm {
	color: var(--fm) !important;
	border: 1px solid var(--fm) !important;
}

.border-fm {
	border-color: var(--fm) !important;
}

#sidebar-menu .menuitem-active .active {
	color: var(--primary)!important;
}

.btn-primary {
	background-color: var(--primary)!important;
	border-color: var(--primary)!important;
}

.btn-outline-primary {
	color: var(--primary) !important;
	border-color: var(--primary) !important;
}

.btn-outline-primary:hover {
	color: white !important;
	background-color: var(--primary)!important;
}

.page-item .active .page-link,
.form-check-input:checked{
	background-color: var(--primary) !important;
	border-color: var(--primary)!important;
}

.page-item.active .page-link {
	background-color: var(--primary) !important;
	border-color: var(--primary)!important;
}

.nav-bordered a.active {
	border-bottom: 2px solid var(--primary) !important;
}

#sidebar-menu>ul>li>a:active, #sidebar-menu>ul>li>a:focus, #sidebar-menu>ul>li>a:hover {
	color: var(--primary) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--primary) !important;
	border-color: var(--primary)!important;
}

#sidebar-menu .menuitem-active>a {
	color: var(--primary) !important;
}
.nav-second-level li a:hover{
	color: var(--primary) !important;
}

.timeline-sm .timeline-sm-item:after{
	border: 2px solid var(--primary) !important;
}

.text-primary {
	color: var(--primary) !important;
}

.badge-soft-primary {
	color: var(--primary) !important;
	background-color: rgba(3,156,253,.18);
}

.email-name, .email-msg {
	color: var(--secondary-color) !important;
}

hr {
	margin-top: 0!important;
	padding-top: 0!important;
	margin-bottom: 0!important;
	padding-bottom: 0!important;
}

.nav-top {
	border-bottom: 1px solid #eee !important;
	margin-bottom: 1em;
	padding-right: 0!important;
}

.nav-bottom {
	margin-top: 1em;
	border-top: 1px solid #eee !important;
	padding-right: 0!important;
}

.fr-wrapper div a:first-child {
	/*display: none !important;*/
}

.fr-second-toolbar a:first-child {
	/*display: none !important;*/
}

#meldung {
  width: 30%;
  position: fixed;
  left: 35%;
  top: 0;
  text-align: center;
  z-index: 99999;
}

#pageState {
	width: 30%;
	position: fixed;
	left: 35%;
	top: 0;
	text-align: center;
	z-index: 99999;
}

.datepicker table tr td.today {
	background-color: gray !important;
	color: white !important;
}

.datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active:active {
	background-color: red!important;
}
.input-group>.form-control, .input-group>.form-select{
	padding: 0 10px !important;
}

[data-tippy-root] {
	white-space: break-spaces!important;
}

.lt-body {
	background-color: lightgrey !important;
}



table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
	font-family: "FontAwesome";
	content: "\f105";
	color: gray;
	font-weight: bold;
	background: none;
	border: none;
	box-shadow: none;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
	font-family: "FontAwesome";
	content: "\f107";
	color: gray;
	font-weight: bold;
	background: none;
	border: none;
	box-shadow: none;
}

.select2-selection__rendered {
	line-height: 32px !important;
}
.select2-container .select2-selection--single {
	height: 36px !important;
}
.select2-selection__arrow {
	height: 34px !important;
}

.select-sm .select2-selection__rendered {
	line-height: 25px !important;
}
.select-sm .select2-container .select2-selection--single {
	height: 29px !important;
	border: 1px solid #ced4da;
	border-radius: .2rem;
}
.select-sm .select2-selection__arrow {
	height: 28px !important;
}

.contactInfo p {
	margin-bottom: 0;
}

#support button {
	position: fixed;
	z-index: 999;
	bottom: 15px;
	right: 15px;
}
@media (min-width: 600px){
	.dropdown-lg {
		min-width: 500px !important;
		position: absolute !important;
		left: -80% !important;
	}
}

.datepicker {
	padding: 7px 10px!important;
	animation: none;
	z-index: 9999!important;
}
.modal#ablaufNew{
	z-index: 1051 !important;
}
.modal#locationNew{
	z-index: 1052 !important;
}
.modal#ablaufEdit{
	z-index: 1051 !important;
}
.modal#locationEdit{
	z-index: 1052 !important;
}

#kuerzel-40{
	height: 40px;
	width: 40px;
	/*padding-left: auto;
	padding-right: auto;*/
	text-align: center;
	line-height: 40px;
	font-size: 1.3em;
	color: white;
	margin-right: 10px;
}

#kuerzel-120{
	height: 120px;
	width: 120px;
	padding-left: auto;
	padding-right: auto;
	text-align: center;
	line-height: 120px;
	font-size: 3em;
	color: white;
}

.dashCards {
	height: 336px; overflow: scroll;
}

.dataTables_wrapper .dataTables_length .select2-container {
	max-width: 100px!important;
}

#calview .select2-container {
	max-width: 150px!important;
}

#ergebnis, #ergebnis2 {
	z-index: 9999!important;
}

/* UPLOAD BUTTON */
.upload-wrapper {
   position: relative;
   display: inline-block;
   line-height: 1;
   margin: 0 0;
}

.upload-wrapper label {
	display: inline-block;
	padding: 0.75em 2em;
	height: 50px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	background: #999999;
	border-radius: 5px;
	-webkit-transition: background .3s;
	-moz-transition: background .3s;
	-o-transition: background .3s;
	transition: background .3s;
	cursor: pointer;
}

.upload-wrapper label::before {
	display: inline-block;
	position: relative;
	bottom: -2px;
	content: "";
	width: 20px;
	height: 20px;
	margin-right: 10px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath style='fill:%23ffffff' d='M7 9h2v-4h3l-4-4-4 4h3zM10 6.75v1.542l4.579 1.708-6.579 2.453-6.579-2.453 4.579-1.708v-1.542l-6 2.25v4l8 3 8-3v-4z'%3E%3C/path%3E%3C/svg%3E");
}

.upload-wrapper.file-waiting label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath style='fill:%23ffffff' d='m 9.1175377,0.03675904 v 0.35682939 q 0,2.13340637 -0.00868,4.26681367 c 0,0.7677234 0.3016834,1.066162 1.0683253,1.066162 h 4.61175 c 0.0069,0.108127 0.01725,0.2108546 0.01725,0.3103337 q 0,4.4517162 -0.0081,8.9045132 c 0,0.717984 -0.306009,1.022912 -1.016428,1.022912 H 2.1734224 c -0.7114952,0 -1.018585,-0.304928 -1.018585,-1.02183 q 0,-6.9419529 0,-13.8839041 c 0,-0.71906511 0.303846,-1.02291113 1.0175037,-1.02291113 H 9.1175377 Z M 7.9843343,10.279922 h 2.7605617 c 0.64878,0 0.660674,-0.01729 0.654186,-0.6736502 V 9.5781634 C 11.391557,9.2072763 11.319064,9.1348301 10.942774,9.1348301 H 5.2518873 c -0.698521,0 -0.7158213,0.018384 -0.698521,0.7125764 0.00972,0.3514235 0.088666,0.4325205 0.4433333,0.4325205 q 1.4943585,0.0022 2.9876347,0 z m 0.020549,2.27722 H 10.93521 c 0.388186,0 0.458471,-0.07136 0.463877,-0.464958 0,-0.06704 0,-0.133001 0,-0.19896 0,-0.41522 -0.06812,-0.481179 -0.475772,-0.481179 H 5.2345904 c -0.6736506,0 -0.6898696,0.01514 -0.6812195,0.676895 0,0.392511 0.077854,0.467121 0.4649598,0.468202 z M 7.9627089,8.0016214 h 3.0135871 c 0.33304,0 0.413056,-0.08326 0.421706,-0.4217067 0,-0.075689 0,-0.1513824 0,-0.2270736 0,-0.4325206 -0.06596,-0.4930728 -0.495235,-0.4930728 H 5.2194492 c -0.6563503,0 -0.6779757,0.022702 -0.6660818,0.6920322 0.00648,0.3719671 0.08326,0.4498209 0.454146,0.4509021 z'%3E%3C/path%3E%3Cpath style='fill:%23ffffff' d='M 10.252904,4.5587593 V 0.44981561 c 0.237887,0.0756889 3.771578,3.54774849 4.171659,4.10894369 z'%3E%3C/path%3E%3C/svg%3E");

}

.upload-wrapper:hover label {
	background: #95c11e;
}

.upload-wrapper input[type="file"] {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 50px;
	opacity: 0;
	z-index: 99;
	display: block !important;
	cursor: pointer;
}

.uploaded-file-name {
	position: relative;
	z-index: 999;
	display: inline-block;
}

.upload-remove {
	display: inline-block;
	content: "";
	z-index: 999;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath style='fill:%23dd3333' d='M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
	cursor: pointer;
	margin-left: 15px;
	top: 2px;
}

.accordion-button {
	background: var(--light)!important;
	color: #323a46!important;
}

.accordion-button.collapsed {
	background: var(--light)!important;
}

.accordion-button:not(.collapsed) {
	color: darkgray;
}

.handle {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 40px;
	padding: 38px 10px 0px 10px;
	background-color: lightgrey;
	font-size: 20px;
	cursor: move;
}

#right > li {
	padding-left: 50px;
}

#formFormular .select2-selection__rendered {
	line-height: 23px !important;
}
#formFormular .select2-container .select2-selection--single {
	height: 27px !important;
}
#formFormular .select2-selection__arrow {
	height: 26px !important;
}

[data-f-id] {
	display: none!important;
}

.signature-pad {
	width: 467px;
	height: 100px;
	border: 1px solid #ccc;
}

.iframe-container {
	padding-bottom: 50%;
	padding-top: 30px; height: 0; overflow: hidden;
	height: 78vh;
}

.iframe-container iframe,
.iframe-container object,
.iframe-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.select2-container--open {
	z-index: 9999999
}

.bootstrap-tagsinput .tag {
	background: var(--primary);
	padding: 4px;
	margin-top: 2px;
	margin-right: 2px;
	border-radius: 4px;
}
.bootstrap-tagsinput {
	width: 100% !important;
	min-height: 34px !important;
	border: 1px solid #ced4da !important;
	border-radius: .2rem !important;
}

@media only screen and (max-width: 1050px) {
	.top-fixed.scrolled {
		animation: fadeIn ease 20s;
		position: fixed;
		top: 90px;
		left: 240px;
		right: 0;
		margin: 0;
		z-index: 9999;
		width: 220px;
		box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.5);
		padding: 20px;
			/*background: rgba(255,255,255,.8);*/
	}
}

@media screen and (min-width: 1051px) {
	.detailPage.top-fixed.scrolled {
		animation: fadeIn ease 20s;
		position: fixed;
		top: 200px;
		left: 270px;
		right: 0;
		margin: 0;
		z-index: 9999;
		width: 15%;
		box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.5);
		padding: 20px;
		/*background: rgba(255,255,255,.8);*/
	}
	.top-fixed.scrolled {
		animation: fadeIn ease 20s;
		position: fixed;
		top: 90px;
		left: 270px;
		right: 0;
		margin: 0;
		z-index: 9999;
		width: 15%;
		box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.5);
		padding: 20px;
		/*background: rgba(255,255,255,.8);*/
	}

}

.btn-check:active+.btn-outline-primary, .btn-check:checked+.btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
	color: white;
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
}

.otc {
	position: relative;
	width: 250px;
	margin: 0 auto;
}

.otc fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.otc fieldset div {
	display: flex;
	align-items: center;
}

.otc legend {
	margin: 0 auto 1em;
	color: #5555FF;
}

input[type="number"]#otc-1,
input[type="number"]#otc-2,
input[type="number"]#otc-3,
input[type="number"]#otc-4,
input[type="number"]#otc-5,
input[type="number"]#otc-6,
input[type="number"]#otc-1d,
input[type="number"]#otc-2d,
input[type="number"]#otc-3d,
input[type="number"]#otc-4d,
input[type="number"]#otc-5d,
input[type="number"]#otc-6d{
	width: .82em;
	line-height: 1;
	margin: .1em;
	padding: 8px 0 4px;
	font-size: 2.65em;
	text-align: center;
	appearance: textfield;
	-webkit-appearance: textfield;
	border: 2px solid var(--primary);
	color: var(--primary);
	border-radius: 4px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* 2 group of 3 items */
input[type="number"]:nth-child(n+4) {
	order: 2;
}
.otc div::before {
	content: '';
	height: 2px;
	width: 24px;
	margin: 0 .25em;
	order: 1;
	background: var(--primary);
}

/* From: https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034 */
.otc label {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

.readonly {
	background-color: white !important;
}

.unread {
	font-weight: bold!important;
}

.form-wizard-header .nav-item .nav-link.active {
	background-color: var(--primary)!important;
}


element.style {
}
.bg-primary, .form-wizard-header .nav-item .nav-link.active {
	background-color: var(--primary)!important;
}

.form-wizard-header .nav-item .nav-link {
	background-color: rgba(3,156,253,.2);
	border: 1px solid rgba(3,156,253,.2);
}

.form-wizard-header .nav-item .nav-link .number {
	background-color: rgba(3,156,253,.2);
}

td a {
	color: var(--primary)!important;
}

.help-btn {
	font-size: 20px; position: fixed; left: 80px; bottom: 20px; z-index: 9999;
}

.smallImage {
	height: 40px !important;
	width: 40px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
}

.fr-popup {
	z-index: 9999 !important;
}

.border-signature {
	border: 3px dashed var(--primary) !important;
}

.img_center {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Standardmäßig keine Styles anwenden */
.responsive-styles {
	/* keine Styles */
}

/* Styles nur für Bildschirmgrößen ab col-md anwenden */
@media (max-width: 768px) {
	.responsive-styles {
		border-top: 1px solid gray;
	}
}
@media (min-width: 768px) {
	.responsive-styles {
		border-left: 1px solid gray;
		padding-left: 30px;
	}
}

.div_description .fr-view {
	padding: 10px;
	border: 1px solid #ced4da;
	border-radius: .2rem;
	overflow: scroll;
}

.blog-content {
	background-color: white;
}

.weather-compact {
	align-items: center;
	background-color: white;
	padding: 5px 5px;
	border-radius: 5px;
	font-size: 14px;
}

.weather-compact #weather-icon {
	margin-right: 5px;
	font-size: 20px;
}

.weather-compact #weather-temp {
	font-weight: bold;
	margin-right: 5px;
}

.weather-compact #weather-location {
	color: #666;
}

.time-picker-field {
	position: relative;
}

.time-picker-field .react-datepicker-wrapper {
	position: absolute;
	width: 0;
	height: 0;
	overflow: visible;
}

.time-picker-field .react-datepicker-popper {
	z-index: 9999;
}

.date-time-picker-input {
	background-color: white!important;
}

.fc-popover .fc-more-popover {
	z-index: 1!important;
}

.dataTable td, .dataTable th {
	white-space: normal !important;
	word-wrap: break-word;
	vertical-align: middle !important;
}

/*.dataTable {*/
/*	table-layout: fixed;*/
/*	width: 100% !important;*/
/*}*/

.last-past-project {
	border-bottom: 1px solid red !important;
}

.table-responsive {
	overflow-x: auto;
}

.dataTable {
	width: 100% !important;
}

.project-title, .project-date, .project-contact, .project-status, .project-category, .project-actions {
	white-space: normal;
	word-wrap: break-word;
}

.project-status {
	width: 100%;
}

@media screen and (max-width: 767px) {
	.dataTable {
		display: block;
		width: 100%;
		overflow-x: auto;
	}
}



.paginationButton {
	margin: 0 2px;
	padding: 1px 10px;
	border: 1px solid #ccc;
	background-color: #fff;
	cursor: pointer;
	border-radius: 50%;
}

.paginationButton.active {
	background-color: #4e80c3;
	color: white;
	border-color: #4e80c3;
}

.paginationButton:hover:not(.active) {
	background-color: #f0f0f0;
}

.paginationButton:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.tablePaginationButton {
	border: none;
	background-color: transparent;
}

.position-top-right-10 {
	position: absolute;
	top: 10px;
	right: 10px;
}

.pos-relative {
	position: relative;
}

.react-datepicker-wrapper {
	display: block!important;
	padding: 0;
	border: 0;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	color: #fff;
	background-color: #2280c6;
}

.send_e_invoice_icon > svg {
	position: relative;
	top: -1px;
}

.variables-dropdown {
    max-width: 350px !important;
    min-width: 300px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
}

.variables-dropdown .variable-search {
    font-size: 14px !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.variables-dropdown .variable-search:focus {
    border-color: #2196F3 !important;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
}

.variables-dropdown .variables-list {
    max-height: 300px !important;
    overflow-y: auto !important;
}

.variables-dropdown .variable-item {
    transition: background-color 0.2s ease !important;
    line-height: 1.4 !important;
}

.variables-dropdown .variable-item:hover {
    background-color: #f5f5f5 !important;
}

.variables-dropdown .variable-item:last-child {
    border-bottom: none !important;
}

.variables-dropdown .variable-item strong {
    font-weight: 600 !important;
    color: #333 !important;
}

.variables-dropdown .variable-item small {
    font-size: 12px !important;
    line-height: 1.3 !important;
    display: block !important;
    margin-top: 2px !important;
}

/* Scrollbar Styling für Webkit Browser */
.variables-dropdown .variables-list::-webkit-scrollbar {
    width: 6px;
}

.variables-dropdown .variables-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.variables-dropdown .variables-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.variables-dropdown .variables-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Variables Button in Toolbar */
.fr-toolbar .fr-command.fr-btn[data-cmd="variables"] {
    position: relative;
}

.fr-toolbar1 .fr-command.fr-btn[data-cmd="variables"]:after {
    content: "";
    font-size: 11px;
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: #2196F3;
    color: white;
    border-radius: 2px;
    padding: 1px 3px;
    line-height: 1;
}

/* Loading State */
.variables-dropdown.loading .variables-list {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    color: #666;
}

.variables-dropdown.loading .variables-list:before {
    content: "Lade Variablen...";
}

/* Empty State */
.variables-dropdown .variables-list:empty:before {
    content: "Keine Variablen verfügbar";
    display: block;
    text-align: center;
    padding: 20px;
    color: #999;
    font-style: italic;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .variables-dropdown {
        max-width: 280px !important;
        min-width: 250px !important;
    }

    .variables-dropdown .variable-item {
        padding: 10px !important;
    }

    .variables-dropdown .variable-search {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}