/* global custom.css Variablen */
:root {
    --primary-color: #98C61B;
    --secondary-color: #597D22;
    --main-bg-color: #3d3d3d;
    --main-text-color: #fff;
    --main-content-bg-color: #F5F9EB;
    --sidebar-primary-bg-color: #3d3d3d;
    --sidebar-secondary-bg-color: #969696;
    --navbar-bg-color: #212121;
    --navbar-height: 20px;
    hyphens: auto;
    --so-intense: linear-gradient(
        to right,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    ) 0 0/5000% 100%;
}

@keyframes rainbow {
    to {background-position: -5000% 0}
}
@keyframes rainbow-img {
    0%{filter: hue-rotate(30deg) drop-shadow(2px 2px 4px #98C61B)}
    33%{filter: hue-rotate(150deg) drop-shadow(2px 2px 4px #491bc6)}
    67%{filter: hue-rotate(270deg) drop-shadow(2px 2px 4px #c6321b)}
    100%{filter: hue-rotate(390deg) drop-shadow(2px 2px 4px #98C61B)}
}

input[type="date"].form-control,
.input-icon.right > select.form-control,
select.form-control {
    padding-left: 8px;
}

.page-header.navbar {
    background-color: var(--navbar-bg-color) !important;
}

.page-sidebar, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover {
    background-color: var(--sidebar-primary-bg-color);
}

.page-header.navbar > ul > li:hover {
    background-color: var(--sidebar-primary-bg-color);
}
/* Anpassung Seitenmenü */
ul.page-sidebar-menu > li.active > a {
    background: none repeat scroll 0 0 var(--main-bg-color) !important;
}
ul.page-sidebar-menu > li > a {
    border-top: 1px solid #5c5c5c !important;
    color: var(--main-text-color);
}
.page-sidebar .page-sidebar-menu.page-sidebar-menu-light > li.open > a,
.page-sidebar .page-sidebar-menu.page-sidebar-menu-light > li:hover > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-light > li.open > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-light > li:hover > a {
    background: #302f2f;
}
.page-sidebar .page-sidebar-menu.page-sidebar-menu-light > li.open > a span,
.page-sidebar .page-sidebar-menu.page-sidebar-menu-light > li:hover > a span,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-light > li.open > a span,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-light > li:hover > a span {
    color: #eee !important;
}
.page-sidebar .page-sidebar-menu > li > a > i, .page-sidebar .page-sidebar-menu > li > a > i[class*="icon-"], .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > i {
    color: var(--sidebar-secondary-bg-color);
}
.page-sidebar .page-sidebar-menu.page-sidebar-menu-light > li .sub-menu {
    background: var(--sidebar-primary-bg-color);
}
.page-sidebar-menu-hover-submenu li:hover > .sub-menu {
    background: var(--sidebar-primary-bg-color) !important;
}
/*Pfeil wenn Untermenü offen*/
.page-sidebar-menu-hover-submenu li:hover > a > .arrow {
    border-right: 12px solid var(--sidebar-primary-bg-color);
}
/*Hover-Farbe Untermenüs*/
.page-sidebar .page-sidebar-menu.page-sidebar-menu-light > li .sub-menu > li:hover > a {
    background: #302f2f !important; /*--navbar-bg-color*/
}
/*Aktiv-Farbe Untermenüs*/
.page-sidebar .page-sidebar-menu.page-sidebar-menu-light > li .sub-menu > li.active > a {
    background: transparent !important;
    border: 1px solid var(--main-content-bg-color);
}
.page-sidebar-menu.page-sidebar-menu-hover-submenu li .sub-menu > li > a {
    margin: 0;
}
/*Offenes-Untermenü-Pfeil Positionsanpassung*/
.page-sidebar-menu.page-sidebar-menu-hover-submenu li a > .arrow-open {
    transform: translate(0px, 2px);
}
/*Offenes-Unter-Untermenü-Pfeil Positionsanpassung*/
.page-sidebar-menu.page-sidebar-menu-hover-submenu li a > .arrow-open-sub {
    transform: translate(0px, -2px);
}
/*Menü-Pfeil Positionierung (Wiederverwendung von .arrow)*/
.page-sidebar-menu.page-sidebar-menu-hover-submenu li a > .arrow-right {
    display: block;
    transform: translate(177px, 9.5px) rotate(-180deg);
}
/* Wenn das Untermenü offen ist (also der Menüpunkt gehovered wird), muss dieser Pfeil versteckt werden */
.page-sidebar-menu.page-sidebar-menu-hover-submenu li:hover a > .arrow-right {
    display: none;
}
/*Untermenü-Pfeil Positionierung (Wiederverwendung von .arrow)*/
.page-sidebar-menu.page-sidebar-menu-hover-submenu li a > .arrow-right-sub {
    display: block;
    transform: translate(144px, 6px) rotate(-180deg);
}
/*Menü-Pfeil Farbe*/
.page-sidebar-menu.page-sidebar-menu-hover-submenu li a > .arrow-right:before {
    color: var(--main-text-color) !important;
}
/*Untermenü-Pfeil Farbe*/
.page-sidebar-menu.page-sidebar-menu-hover-submenu li a > .arrow-right-sub:before {
    color: var(--main-text-color) !important;
}
/*Text im Untermenü*/
.page-sidebar .page-sidebar-menu .sub-menu > li > a {
    color: var(--main-text-color);
}
/*Kein Schatten für Untermenüs*/
.page-sidebar-menu.page-sidebar-menu-hover-submenu > li:hover > .sub-menu {
    box-shadow: none;
}
/*Anpassung der Positionierung von Unter-Untermenüs usw.*/
.page-sidebar-menu.page-sidebar-menu-hover-submenu > li:hover > .sub-menu > li .sub-menu {
    margin-top: -37px !important;
}

.page-header.navbar ul > li > a[class="dropdown-toggle"] {
    background: var(--navbar-bg-color) !important;
}

.page-header.navbar ul > li:hover > a[class="dropdown-toggle"] {
    background: var(--sidebar-primary-bg-color) !important;
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover > span {
    color: var(--secondary-color) !important;
}
/* Schrift im Header ezwas fetter, damit sie zu erkennen ist, auch wenn der Kontrast nicht sehr hoch ist */
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle > .username {
    font-weight: 600;
}

.page-header.navbar .page-logo > .logo-image, .page-header.navbar .page-logo > a {
    float: none;
    color: var(--main-text-color);
    font-size: 20px;
    padding-top: 8px;
}

a.btn.form-row {
    margin-top: 26px;
}

/* Überschreiben der Portlet-Regeln, damit sie wie die aus der Metronic v4.0.2 aussehen */
.portlet.box {
    border: none !important;
}

.portlet {
    box-shadow: 0 2px 5px 2px rgba(0, 0, 0, .1);
}

.ueberschrift {
    font-weight: bold;
}

.infozeile {
    color: var(--main-text-color);
    float: left;
    font-size: 16px;
    margin: 2px 0 2px 20px;
    height: 42px;
    display: flex;
    align-items: center;
}

/* Login */
body, .login {
    background-color: var(--main-bg-color) !important;
}

.login .copyright {
    color: var(--secondary-color);
}

.login .content h3 {
    color: var(--secondary-color);
}

.login .content .form-control {
    background: #dde3ec;
    border: 1px solid #dde3ec;
}

.btn-success,
.btn-success:active,
.btn-success:focus,
.btn-success:active:hover,
.btn-success:focus:active {
    background: var(--secondary-color);
    border: 1px solid var(--primary-color);
}

.btn-success:hover {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.page-sidebar .page-sidebar-menu.page-sidebar-menu-light > li.active > a {
    border-left: 4px solid var(--main-content-bg-color) !important;
    border-top: 1px solid var(--main-content-bg-color) !important;
    border-bottom: 1px solid var(--main-content-bg-color) !important;
    background: none repeat scroll 0 0 transparent !important;
}

/* Überschreiben von anderen css für "richtige" Buttonfarbe */
.btn.green, .portlet.green, .portlet > .portlet-body.green, .portlet.box.green > .portlet-title {
    background-color: #86bd34 !important;
}

.btn.green.active, .btn.green.disabled, .btn.green:active, .btn.green:focus, .btn.green:hover, .btn.green[disabled] {
    background-color: #7daa2f !important;
}

.page-container.loading .page-sidebar .page-sidebar-menu > li.active > a > .selected,
.page-container.loading .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a > .selected {
    border-right-color: #B3B3B3;
}

/* Overlay für Ladeanimationen (zb zum switch zwischen Archive / Aktiv */
#loading-overlay {
    position: fixed;
    margin-left: -20px;
    margin-top: -25px;
    display: none;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.3;
    z-index: 2;
    cursor: wait;
}

.page-container.loading #loading-overlay {
    display: block;
}

/* Scrollable Portlets! Siehe Leistungsnachweise */
.portlet-scrollable .portlet-body {
    overflow-y: scroll;
}

/* Zahlen gehören rechtsbündig */
th.number,
td.number,
input.number,
select.number {
    text-align: right;
}

table.dataTable thead tr.column-filters th {
    padding-left: 5px;
    padding-right: 5px;
}
table.dataTable thead tr.column-filters th > input,
table.dataTable thead tr.column-filters th > select {
    height: 2em;
    padding-top: 1px;
}

select.form-control.dropdown-compressed {
    height: 2em;
    padding-top: 2px;
}

table.dataTable thead tr.column-filters .form-control {
    width: 100%;
}

table.dataTable thead tr.column-filters .form-control.year,
table.dataTable thead tr.column-filters .form-control.month {
    width: 50%;
}

table.dataTable.time-sheets td.no-order {
    background: #ffb3b3 !important;
}
/* ------------------ Content-abhängige Hervorhebungen in td (table-data) -------------------------- */
table.dataTable td.vario-order,
table.dataTable td.vario-order a {
    color: red;
}

table.dataTable.time-sheets td.signed i {
    color: var(--primary-color);
}

.time-sheets .select2-container--default .select2-selection--single.blue,
.time-sheets .select2-container--default.select2-container--disabled .select2-selection--single.blue {
    background: #ccccff;
    border-color: #4766c4
}
.time-sheets .select2-container--default .select2-selection--single.yellow,
.time-sheets .select2-container--default.select2-container--disabled .select2-selection--single.yellow {
    background: #ffffcc;
    border-color: #c49f47
}

.form-control.yellow {
    background: #ffffcc;
    border-color: #ffcb7c;
}

.form-control.orange {
    background: #ffe5bf;
    border-color: #ffad7a;
}

.form-control.red {
    background: #ffcccc;
    border-color: #ff8787;
}

.form-control.blue {
    background: #cce7ff;
    border-color: #6dd1ff;
}

.form-control.green {
    background: #d0ffbf;
    border-color: #77ff6d;
}

/* Select2 Anpassung damit die Breite immer 100% ist wie beim Standard-Input */
.select2.select2-container.select2-container--default {
    width: 100% !important;
}

/* Select2 Anpassung, damit es die selbe Höhe wie ein Standard-Input hat */
.select2-selection__rendered {
    line-height: 31px !important;
}

.select2-container .select2-selection--single {
    height: 34px !important;
}

.select2-selection__arrow {
    height: 34px !important;
}

/* Monatsanzeige/Eingabe in der Zeitentabelle in der Mitarbeiterübersicht */
input.month-input.btn:not(.md-skip) {
    box-shadow: none;
    cursor: text;
    animation: none;
    font-weight: bolder;
    font-size: 1vw;
    padding: 5px 0;
    text-transform: none;
}

/* Transformative Eingabefelder */
.input-commutable {
    background: none;
    border: none;
    width: 100%;
}

/* Transformative Eingabefelder Aktiv*/
.input-commutable-active {
    border: 1px solid;
    border-radius: 4px;
}

.input-commutable-active:hover {
    cursor: text;
}

/* dichter zusammengerückte Elemente (vor allem Buttons) */
.no-margin {
    margin: 0 !important;
}

.no-margin-top {
    margin-top: 0 !important;
}
.no-margin-bottom {
    margin-bottom: 0 !important;
}
.no-margin-left {
    margin-left: 0 !important;
}
.no-margin-right {
    margin-right: 0 !important;
}

/* Flacher Button */
.btn-flat {
    max-height: 2.2em;
    padding-top: 5px !important;
    margin-right: 0;
}

/* Flacher Dynamischer Button */
.btn-flat-dynamic {
    max-width: 3vw;
    max-height: 2.2em;
    padding-top: 5px !important;
    padding-left: 0.85vw !important;
    margin-right: 0;
}

/* Schmaler Button */
.btn-slim {
    max-width: 2em;
}

/* Kleiner Button */
.btn-small {
    max-width: 2em;
    max-height: 2em;
    padding-top: 5px !important;
    padding-left: 4px !important;
    margin-right: 0;
}

/* Kleinerer/Schmalerer Rand */
.padding-slim {
    padding: 4px 50% 50%;
}

/* Farb-Auswahl */
input[type=color].form-control {
    padding: 1px 2px;
    width: 100%;
}

input[type=color].form-control.noedit {
    pointer-events: none;
}

/* readonly ohne ausgrauen */
input.noedit {
    pointer-events: none;
}

/* modal caption shouldn't prevent dragging */
.modal-draggable .caption {
    pointer-events: none;
}

/* Notification Icons */
div.label.label-sm.label-icon {
    border-radius: 100% !important;
    width: 30px !important;
    height: 30px !important;
}

div.label.label-sm.label-icon > i {
    margin-top: 16%;
    margin-right: 14%;
}

li.external {
    padding-top: 2% !important;
    padding-bottom: 2% !important;
    height: 2.66em;
}

/* Notification Text */
.notification-text {
    width: 90%;
    padding-left: 5%;
    padding-right: 8%;
}

/* Notification Button */
.notification-button {
    position: relative;
    width: 0;
    height: 0;
}

.notification-button > button {
    position: absolute;
    left: 16.75em;
    top: 0.33em;
}

/* Notification (Flex-)Box */
.notification-box {
    display: flex;
    align-items: center;
}

/* Notification Footer */
.notification-footer {
    text-align: center;
    padding: 5px;
}

.notification-footer > span {
    font-size: small;
    color: #888;
}

.scroll {
    overflow: auto;
    /*overflow-x: hidden;*/
}
.dropdown-menu.scroll-parent {
    width: 400px !important;
    max-width: 400px !important;
}

.close {
    height: 21px;
    width: 21px;
}
.close::after {
    content: "\f00d";
    font: normal normal normal 21px/1 FontAwesome;
    color: #000;
}

/* Customized Customized Bootstrap Close Icon */
.close2 {
    display: inline-block;
    margin-top: 0;
    margin-right: 0;
    width: 9px;
    height: 9px;
    background-repeat: no-repeat !important;
    text-indent: -10000px;
    outline: none;
    background-image: url("../img/remove-icon-small.png") !important;
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.2;
    filter: alpha(opacity=20);
}

.close2:hover, .close2:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

button.close2 {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}

/* Zeiten-Inputs in Mitarbeiterverwaltung */
.timecell {
    margin-left: 5px;
    max-width: 120px;
}

/* Text-Ausgabefelder */
.textout-fixed {
    display: inline;
    margin-left: 5px;
    margin-right: 5px;
    max-width: 110px;
    background-color: rgba(0, 0, 0, 0.06);
    border: none;
    text-align: center;
    pointer-events: none;
}
.textout-fixed.red {
    background-color: rgba(255, 0, 0, 0.09);
}
.textout-flexable {
    background-color: rgba(0, 0, 0, 0.06);
    text-align: center;
    height: fit-content;
    line-height: 22px;
    min-height: 34px;
    border: 1px solid #d9d9d9;
}
.textout-flexable.align-left {
    text-align: left;
}
.textout-flexable.align-right {
    text-align: right;
}
.textout-flexable + .input-group-addon {
    background-color: rgba(0, 0, 0, 0.06);
    border-right: 1px solid #d9d9d9;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    border-left: unset;
}
.textout-flexable + .input-group-addon.middle-element {
    border-right: 1px solid rgba(0, 0, 0, 0.12);
}
.textout-flexable.red {
    background-color: rgba(255, 0, 0, 0.09);
}
.textout-flexable.has-border {
    border-color: #000000;
    border-width: 3px;
    border-style: ridge;
}

.line-height-smaller,
.line-height-smaller > .textout-flexable,
.line-height-smaller > .input-group-addon {
    line-height: 15px;
}
.input-height-smaller,
.input-height-smaller > .textout-flexable,
.input-height-smaller > .input-group-addon {
    min-height: 27px;
    height: 27px;
}

/* Radio-Buttons */
.radio-sm {
    height: 0.9em;
    width: 0.9em;
}
.radio-md {
    height: 1.15em;
    width: 1.15em;
}

.radio-lg {
    height: 1.5em;
    width: 1.5em;
}

/* Input Elements */
.width-5 {
    width: 5% !important;
}
.width-10 {
    width: 10% !important;
}
.width-11 {
    width: 11% !important;
}
.width-12 {
    width: 12% !important;
}
.width-13 {
    width: 13% !important;
}
.width-14 {
    width: 14% !important;
}
.width-15 {
    width: 15% !important;
}
.width-20 {
    width: 20% !important;
}
.width-25 {
    width: 25% !important;
}
.width-33 {
    width: 33% !important;
}
.width-50 {
    width: 50% !important;
}
.width-55 {
    width: 55% !important;
}
.width-60 {
    width: 60% !important;
}
.width-65 {
    width: 65% !important;
}
.width-66 {
    width: 66% !important;
}
.width-70 {
    width: 70% !important;
}
.width-75 {
    width: 75% !important;
}
.max-width-75 {
    max-width: 75% !important;
}
.width-80 {
    width: 80% !important;
}
.width-90 {
    width: 90% !important;
}
.width-100 {
    width: 100% !important;
}
.width-125 {
    width: 125% !important;
}
.width-150 {
    width: 150% !important;
}
.width-200 {
    width: 200% !important;
}

/* Smaller font for Buttons */
a.btn.font-smaller {
    font-size: 11px;
}
a.font-large,
td.font.large {
    font-size: 16px;
}
a.font-larger,
td.font-larger {
    font-size: 20px;
}

/* no space below portlet */
.portlet.no-margin {
    margin-bottom: 1px;
}

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 405;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0 !important;
    max-height: 60rem;
    overflow: auto;
}

.autocomplete-items div {
    padding: 7px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
}

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}

/* Smooth-scrolling im portlet-body (Hauptsächlich für die Positionsvergabe in den Leistungsnachweisen) */
/*.portlet-body {
    scroll-behavior: smooth;
}*/
html {
    scroll-behavior: smooth !important;
}

/*-------------------------------------------------- Festgelegte Standards für das Portal laut NKL 26-02-2022 ------------------------ */
/*-----------   Haupt background ------*/
.page-content {
    background-color: var(--main-content-bg-color);
}

/*--------------------------------------------   Boxen  (Eingabemasken)   -------------------------------------------------------------*/
/*--------------------------box-norm --------*/
.portlet.box.box-norm > .portlet-title {
    background-color: #5e738b;
    color: var(--main-content-bg-color);
}
.portlet.box.box-norm > .portlet-title .modal {
    color: initial;
}

.portlet.box.all > .portlet-title {
    color: #000;
}

.portlet.box.box-norm > .portlet-body {
    background-color: #EDF0F7;
}
.portlet.box.red > .portlet-body {
    background-color: #f7eded;
}
.portlet.box.green > .portlet-body {
    background-color: #eef7ed;
}
.portlet.box.yellow > .portlet-body {
    background-color: #f7f5ed;
}

.portlet.box.box-norm > .portlet-body thead,
.modal .modal-body thead {
    background-color: #D6DCE4;
    color: #2F75B5;
}
.modal.modal-clean .modal-body thead {
    background-color: #e6ecf3;
    color: #405a78;
}

.modal .portlet-title .caption {
    padding: 14px 0 9px !important;
}

.modal .portlet-title .actions {
    padding: 0 0 5px;
}

/*--------------------------box-sub ----------*/
.portlet.box.box-sub > .portlet-title,
.panel.box-sub > .panel-heading,
.modal.box-sub > .modal-dialog > .modal-content > .modal-header {
    background-color: #CEDDE9;
    color: #5E738B;
}

.portlet.box.box-sub > .portlet-body,
.panel.box-sub .panel-body,
.modal.box-sub > .modal-dialog > .modal-content > .modal-body,
.modal.box-sub > .modal-dialog > .modal-content > .modal-footer {
    background-color: #F8F9FD;
}

/*--------------------------box-sub-sub ------*/
.portlet.box.box-sub-sub > .portlet-title,
.panel.box-sub-sub > .panel-heading,
.modal.box-sub-sub > .modal-dialog > .modal-content > .modal-header {
    background-color: #EEF5FB;
    color: #5E738B;
}

.portlet.box.box-sub-sub > .portlet-body,
.panel.box-sub-sub .panel-body,
.modal.box-sub-sub > .modal-dialog > .modal-content > .modal-body,
.modal.box-sub-sub > .modal-dialog > .modal-content > .modal-footer {
    background-color: #F8F9FD;
}

/*--------------------------box-blank ---------*/
.portlet.box.box-blank > .portlet-title,
.panel.box-blank > .panel-heading,
.modal.box-blank > .modal-dialog > .modal-content > .modal-header {
    background-color: var(--main-content-bg-color);
    color: #2f4e00;
}
.modal.box-blank > .modal-dialog > .modal-content > .modal-header .caption {
    font-weight: bold;
}

.portlet.box.box-blank > .portlet-body,
.panel.box-blank .panel-body,
.modal.box-blank > .modal-dialog > .modal-content > .modal-body,
.modal.box-blank > .modal-dialog > .modal-content > .modal-footer {
    background-color: var(--main-content-bg-color);
}

.portlet.box > .portlet-body table .odd {
    background-color: #ffffff;
}

.portlet.box > .portlet-body table .even {
    background-color: #fafafa;
}

/*-------------------------------------------   Boxen - Ende ------------------------------------------------------------------------------*/

/*-------------------------------------------   Inputs Form-control -----------------------------------------------------------------------*/
.form-control.inp-norm {
    border-color: #C3C3C3;
    color: #000000;
}

.form-control.inp-dim {
    border-color: #E1E1E1;
    color: #787878;
}

.form-control.inp-big {
    border-color: #3598dc;
    font-size: 130%;
}

.form-control.inp-bold {
    border-color: #c49f47;
    font-weight: bold;
}

.form-control.inp-inv1 {
    background-color: #98C61B;
    color: #fff;
}

.form-control.inp-inv2 {
    background-color: #5e738b;
    color: #fff;
}

/*------------------------------------------    Inputs - Ende --------------------------------------------------------------------------------*/

/*==========================================    Label-Definitionen ============================================================================*/
/*---normales Label---*/
.control-label.lab-norm1 {
    color: #1F4E78;
}

/*---normal Label farblich etwas anders als normal ---*/
.control-label.lab-norm2 {
    color: #806000;
}

/*---Label abgedimmt---*/
.control-label.lab-dim {
    color: #3e5871;
}

/*---Label vergrößert---*/
.control-label.lab-big {
    color: #1F4E78;
    font-size: 130%;
    padding-top: 0;
}

/*---Label hervorgehoben mit bold---*/
.control-label.lab-bold {
    /*color: #1F4E78;*/
    font-weight: bold;
}

/*---Label verkleinerte Schrift---*/
.control-label.lab-small {
    color: #1F4E78;
    font-size: 80%;
}

/*---Label für ACHTUNG! bzw ganz wichtig (meist rot) ---*/
.control-label.lab-att {
    color: #C00000;
    font-weight: bold;
}

/*---Label kursiv ---*/
.control-label.lab-italic {
    font-style: italic;
}

/*============================================== Standardbuttons def ==================================================*/

/*--------------------------------- Hinzufügen (Datensätze hinzufügen/neuanlegen)-------------------------------------*/
.btn-col-hzfg {
    color: #F2F2F2;
    background: #2F75B5;
}
/* Weiß, Farbe bei Mouseover */
.btn.btn-inv.btn-col-hzfg {
    border-color: #2F75B5;
    color: #2F75B5;
    background: 0 0;
}
.btn.btn-inv.btn-col-hzfg:hover {
    border-color: #2F75B5;
    color: #F2F2F2;
    background-color: #2F75B5;
}

/*---------------------------------------- Bearbeiten (Datensätze bearbeiten)-----------------------------------------*/
.btn-col-bear {
    color: #F2F2F2;
    background: #BF8F00;
}
/* Weiß, Farbe bei Mouseover */
.btn.btn-inv.btn-col-bear {
    border-color: #BF8F00;
    color: #BF8F00;
    background: 0 0;
}
.btn.btn-inv.btn-col-bear:hover {
    border-color: #BF8F00;
    color: #F2F2F2;
    background-color: #BF8F00;
}

/*---------------------------- Speichern (Datensatz speichern oder Speichern und verlassen) --------------------------*/
.btn-col-rec {
    color: #F2F2F2;
    background: #548235;
}
/* Weiß, Farbe bei Mouseover */
.btn.btn-inv.btn-col-rec {
    border-color: #548235;
    color: #548235;
    background: 0 0;
}
.btn.btn-inv.btn-col-rec:hover {
    border-color: #548235;
    color: #F2F2F2;
    background-color: #548235;
}

/*--------------------------------------------- Löschen (Löschbutton) ------------------------------------------------*/
.btn-col-del {
    color: #F2F2F2;
    background: #C00000;
}
/* Weiß, Farbe bei Mouseover */
.btn.btn-inv.btn-col-del {
    border-color: #C00000;
    color: #C00000;
    background: 0 0;
}
.btn.btn-inv.btn-col-del:hover {
    border-color: #C00000;
    color: #F2F2F2;
    background-color: #C00000;
}

/*------------------------------------ Zurück (Maske verlassen ohne Speichern) ---------------------------------------*/
.btn-col-bck {
    color: #375623;
    background: #d9cec6;
}

/*----------------------------------------- Ansehen (Datensatz anzeigen) ---------------------------------------------*/
.btn-col-view {
    color: #F2F2F2;
    background: #6f7e9e;
}
/* Weiß, Farbe bei Mouseover */
.btn.btn-inv.btn-col-view {
    border-color: #6f7e9e;
    color: #6f7e9e;
    background: 0 0;
}
.btn.btn-inv.btn-col-view:hover {
    border-color: #6f7e9e;
    color: #F2F2F2;
    background-color: #6f7e9e;
}

/*-------------------------------------------------- Drucken ---------------------------------------------------------*/
.btn-col-prt {
    color: #F2F2F2;
    background: #833C0C;
}
/* Weiß, Farbe bei Mouseover */
.btn.btn-inv.btn-col-prt {
    border-color: #833C0C;
    color: #833C0C;
    background: 0 0;
}
.btn.btn-inv.btn-col-prt:hover {
    border-color: #833C0C;
    color: #F2F2F2;
    background-color: #833C0C;
}

/*--------------------------------------------------- Mail -----------------------------------------------------------*/
.btn-col-mail {
    color: #F2F2F2;
    background: #e0c076;
}
/* Weiß, Farbe bei Mouseover */
.btn.btn-inv.btn-col-mail {
    border-color: #e0c076;
    color: #e0c076;
    background: 0 0;
}
.btn.btn-inv.btn-col-mail:hover {
    border-color: #e0c076;
    color: #F2F2F2;
    background-color: #e0c076;
}

/*------------------------------------------- Toggle / Umschalten ----------------------------------------------------*/
.btn-col-tog {
    color: #1F4E78;
    background: #EDF0F7;
}

/*----------------------------------------------- Navigation ---------------------------------------------------------*/
.btn-col-nav {
    color: #F2F2F2;
    background: #4B77BE;
}
/* Weiß, Farbe bei Mouseover */
.btn.btn-inv.btn-col-nav {
    border-color: #4B77BE;
    color: #4B77BE;
    background: 0 0;
}
.btn.btn-inv.btn-col-nav:hover {
    border-color: #4B77BE;
    color: #F2F2F2;
    background-color: #4B77BE;
}

/*--------------------------------------------------- Info -----------------------------------------------------------*/
.btn-col-info {
    color: #F2F2F2;
    background: #36a0e7;
}
/* Weiß, Farbe bei Mouseover */
.btn.btn-inv.btn-col-info {
    border-color: #36a0e7;
    color: #36a0e7;
    background: 0 0;
}
.btn.btn-inv.btn-col-info:hover {
    border-color: #36a0e7;
    color: #F2F2F2;
    background-color: #36a0e7;
}
/*--------------------------------------------------- Sonderfarben ---------------------------------------------------*/
.btn-col-orange {
    color: #F2F2F2;
    background: #ff8c2f;
}
/* Weiß, Farbe bei Mouseover */
.btn.btn-inv.btn-col-orange {
    border-color: #ff8c2f;
    color: #ff8c2f;
    background: 0 0;
}
.btn.btn-inv.btn-col-orange:hover {
    border-color: #ff8c2f;
    color: #F2F2F2;
    background-color: #ff8c2f;
}
.btn-col-purple {
    color: #F2F2F2;
    background: #d635fa;
}
/* Weiß, Farbe bei Mouseover */
.btn.btn-inv.btn-col-purple {
    border-color: #d635fa;
    color: #d635fa;
    background: 0 0;
}
.btn.btn-inv.btn-col-purple:hover {
    border-color: #d635fa;
    color: #F2F2F2;
    background-color: #d635fa;
}
/*--------------------------------------------- ENDE Buttons def -----------------------------------------------------*/

/*---------------------- Beginn Kennzeichnung / Hervorhebung von Input-Feldern meist Contentabhängig) ----------------*/
.col-grn-ok {
    color: #F2F2F2 !important;
    background: #548235 !important;
}
.col_bl_ok {
    color: #F2F2F2 !important;
    background: #2F75B5;
}
.col_ws_ok {
    color: #548235 !important;
    background: #F2E2E2;
}
.col_warn_low {
    color: #F2F2F2 !important;
    background: #BF8F00;
}
.col_warn_strong {
    color: #F2F2F2 !important;
    background: #C00000;
}
.col-alarm {
    color: #000000 !important;
    background: #FA4C38 !important;
}
.col-alarm-low {
    color: #000000 !important;
    background: #ffa49b !important;
}
.col-panic {
    color: #EA0F0F !important;
    background: #FFFF00;
}
.col_exclude {
    color: #F2F2F2 !important;
    background: #5c5c5c;
}
/*------------------------ ENDE Kennzeichnung / Hervorhebung von Input-Feldern meist Contentabhängig) ----------------*/

/* Label-Farbe für andere Elemente (z.B. alleinstehende div zum anzeigen von Text) */
.col-label {
    color: #004893;
}

/* Portlet with small bottom margin */
div.portlet-body > .form-body > table {
    margin-bottom: 5px;
}

/* float in table head */
table.portlet > thead > tr > th {
    float: left;
}

/* disabled soll wirklich disablen */
.disabled {
    pointer-events: none;
    filter: brightness(90%);
}
option.disabled {
    background-color: #c4c4c4;
}

/* Wenn im Hintergrund etwas lädt, und das Element solange nicht zur Interaktion bereit ist
 (z.B. wenn gewartet werden muss, bis der aktuelle Ladevorgang abgeschlossen ist)
 (muss durch JS ergänzt werden, da pointer-events: none und hover nicht zusammen funktionieren) */
.loading:hover {
    cursor: wait;
}
button.loading {
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
button.loading:hover {
    box-shadow: none !important;
    color: unset !important;
}

/* CSS-Colors */
.color-transparent {
    color: transparent !important;
}

.color-black {
    color: black !important;
}
.color-black a {
    color: black !important;
}
a.color-black:hover {
    color: dimgrey;
}
a > i.color-black:hover {
    color: dimgrey;
}
.border-color-black {
    border-color: black !important;
}

.color-grey {
    color: grey;
}
.bg-color-grey {
    background-color: grey;
}
.color-lightgrey {
    color: #e3e3e3;
}
.bg-color-lightgrey {
    background-color: #e3e3e3;
}
.color-darkgrey {
    color: darkgrey !important;
}
.bg-color-darkgrey {
    background-color: darkgrey !important;
}
.border-darkgrey {
    border-color: darkgrey !important;
}

.border-lightgrey {
    border-color: #ddd !important;
}

.color-white {
    color: white;
}
.bg-color-white {
    background-color: white;
}
.border-color-white {
    border: solid white !important;
}
a.color-white:hover {
    color: darkgrey;
}
a > i.color-white:hover {
    color: darkgrey;
}

.color-red {
    color: red;
}
.inp-norm.color-red {
    color: red;
}
.bg-color-red {
    background-color: red;
}
.border-color-red {
    border: 1px solid red !important;
}
input[type="checkbox"].border-color-red {
    box-shadow: 0 0 2px 1px red !important;
}
.color-indianred {
    color: indianred !important;
}
.bg-color-indianred {
    background-color: indianred !important;
}
.color-darkred {
    color: darkred;
}
.color-portletred {
    color: #e7505a;
}
.color-palered {
    color: #ffa2a6 !important;
}
.bg-color-palered {
    background-color: #ffa2a6 !important;
}
.color-verypalered {
    color: #ffd0d0;
}
.bg-color-verypalered {
    background-color: #ffd0d0;
}
a.color-portletred:hover {
    color: #e7505a;
    filter: brightness(85%);
}
.bg-color-portletred {
    background-color: #e7505a;
}

.color-dodgerblue {
    color: dodgerblue;
}
.bg-color-dodgerblue {
    background-color: dodgerblue;
}
.color-blue {
    color: blue;
}
.bg-color-blue {
    background-color: blue;
}
a.color-blue:hover {
    color: darkblue;
}
a > i.color-blue:hover {
    color: darkblue;
}
.color-darkblue {
    color: darkblue;
}
.bg-color-darkblue {
    background-color: darkblue;
}
a.color-darkblue:hover {
    color: #000032;
}
a > i.color-darkblue:hover {
    color: #000032;
}
.color-lightblue {
    color: lightblue;
}
.bg-color-lightblue {
    background-color: lightblue;
}
.bg-color-lightblue-important {
    background-color: lightblue !important;
}
a.color-lightblue:hover {
    color: #8caeba;
}
a > i.color-lightblue:hover {
    color: #8caeba;
}
.color-paleblue {
    color: #e1ecef;
}
.bg-color-paleblue {
    background-color: #e1ecef;
}
.bg-color-paleblue-important {
    background-color: #e1ecef !important;
}
a.color-paleblue:hover {
    color: #d2dee2;
}
a > i.color-paleblue:hover {
    color: #d2dee2;
}

.color-yellow {
    color: yellow;
}
.bg-color-yellow {
    background-color: yellow;
}
.color-paleyellow {
    color: #ffff9f;
}
.bg-color-paleyellow {
    background-color: #ffff9f;
}
.color-darkyellow {
    color: #e2c821;
}
.bg-color-darkyellow {
    background-color: #e2c821;
}
.color-goldenrod {
    color: goldenrod;
}
.bg-color-goldenrod {
    background-color: goldenrod;
}
.bg-color-portletyellow {
    background-color: #c49f47;
}
a.color-portletyellow:hover {
    color: #c49f47;
    filter: brightness(85%);
}

.color-orange {
    color: orange;
}
.bg-color-orange {
    background-color: orange;
}
.border-color-orange {
    border: solid orange !important;
}
.color-paleorange {
    color: #ffc99f;
}
.bg-color-paleorange {
    background-color: #ffc99f;
}
.page-header.navbar .top-menu .navbar-nav>li.dropdown-extended .dropdown-menu .dropdown-menu-list>li>a.border-color-orange {
    border-bottom: solid orange !important;
}
.color-darkorange {
    color: darkorange;
}
.bg-color-darkorange {
    background-color: darkorange;
}

.color-green {
    color: green !important;
}
.bg-color-green {
    background-color: green;
}
a.color-green:hover {
    color: darkgreen;
}
a > i.color-green:hover {
    color: darkgreen;
}
.color-lightgreen {
    color: #33c733 !important;
}
.bg-color-lightgreen {
    background-color: #33c733;
}
.color-palegreen {
    color: #ceffce !important;
}
.bg-color-palegreen {
    background-color: #ceffce !important;
}
.color-darkgreen {
    color: darkgreen !important;
}
.bg-color-darkgreen {
    background-color: darkgreen;
}
a.color-darkgreen:hover {
    color: #003100;
}
a > i.color-darkgreen:hover {
    color: #003100;
}
.color-portletgreen {
    color: #86bd34;
}
a.color-portletgreen:hover {
    color: #86bd34;
    filter: brightness(85%);
}
.bg-color-portletgreen {
    background-color: #86bd34;
}

.color-darkcyan {
    color: darkcyan  !important;
}
.color-darkcyan a {
    color: darkcyan  !important;
}
.bg-color-darkcyan {
    background-color: darkcyan  !important;
}

.color-blueviolet {
    color: blueviolet  !important;
}
.color-blueviolet a {
    color: blueviolet  !important;
}
.bg-color-blueviolet {
    background-color: blueviolet  !important;
}

.color-paleviolet {
    color: #A070A0  !important;
}
.color-paleviolet a {
    color: #A070A0  !important;
}
.bg-color-paleviolet {
    background-color: #A070A0  !important;
}

.margin-left-1 {
    margin-left: 1% !important;
}
.margin-left-2 {
    margin-left: 2% !important;
}
.margin-left-3 {
    margin-left: 3% !important;
}
.margin-left-4 {
    margin-left: 4% !important;
}
.margin-left-5 {
    margin-left: 5% !important;
}
.margin-left-6 {
    margin-left: 6% !important;
}
.margin-left-6-5 {
    margin-left: 6.5% !important;
}
.margin-left-7 {
    margin-left: 7% !important;
}
.margin-left-8 {
    margin-left: 8% !important;
}
.margin-left-9 {
    margin-left: 9% !important;
}
.margin-left-10 {
    margin-left: 10% !important;
}
.margin-left-15 {
    margin-left: 15% !important;
}
.margin-left-20 {
    margin-left: 20% !important;
}
.margin-left-25 {
    margin-left: 25% !important;
}
.margin-left-45 {
    margin-left: 45% !important;
}
.margin-left-46 {
    margin-left: 46% !important;
}
.margin-left-47 {
    margin-left: 47% !important;
}
.margin-left-48 {
    margin-left: 48% !important;
}
.margin-left-49 {
    margin-left: 49% !important;
}
.margin-left-50 {
    margin-left: 50% !important;
}
.margin-left-60 {
    margin-left: 60% !important;
}
.margin-left-70 {
    margin-left: 70% !important;
}
.margin-left-80 {
    margin-left: 80% !important;
}
.margin-left-90 {
    margin-left: 90% !important;
}
.margin-left-100{
    margin-left: 100% !important;
}

.margin-left-1px {
    margin-left: 1px;
}
.margin-left-2px {
    margin-left: 2px;
}
.margin-left-3px {
    margin-left: 3px;
}
.margin-left-4px {
    margin-left: 4px;
}
.margin-left-5px {
    margin-left: 5px;
}
.margin-left-10px {
    margin-left: 10px;
}
.margin-left-14px {
    margin-left: 14px;
}
.margin-left-15px {
    margin-left: 15px;
}

.margin-right-0 {
    margin-right: 0;
}
.margin-right-1 {
    margin-right: 1%;
}
.margin-right-2 {
    margin-right: 2%;
}
.margin-right-3 {
    margin-right: 3%;
}
.margin-right-10 {
    margin-right: 10%;
}
.margin-right-15 {
    margin-right: 15%;
}
.margin-right-20 {
    margin-right: 20%;
}

.margin-right-5px {
    margin-right: 5px;
}
.margin-right-10px {
    margin-right: 10px;
}
.margin-right-20px {
    margin-right: 20px;
}
.margin-right-30px {
    margin-right: 30px;
}

.margin-bottom-5px {
    margin-bottom: 5px;
}
.margin-bottom-10px {
    margin-bottom: 10px;
}
.margin-bottom-20px {
    margin-bottom: 20px;
}
.margin-bottom-30px {
    margin-bottom: 30px;
}

.padding-left-1 {
    padding-left: 1%;
}
.padding-left-2 {
    padding-left: 2%;
}
.padding-left-3 {
    padding-left: 3%;
}
.padding-left-4 {
    padding-left: 4%;
}
.padding-left-5 {
    padding-left: 5%;
}
.padding-left-6 {
    padding-left: 6%;
}
.padding-left-7 {
    padding-left: 7%;
}
.padding-left-8 {
    padding-left: 8%;
}
.padding-left-9 {
    padding-left: 9%;
}
.padding-left-10 {
    padding-left: 10%;
}

.padding-left-1px {
    padding-left: 1px !important;
}
.padding-left-2px {
    padding-left: 2px !important;
}
.padding-left-3px {
    padding-left: 3px !important;
}
.padding-left-4px {
    padding-left: 4px !important;
}
.padding-left-5px {
    padding-left: 5px !important;
}
.padding-left-6px {
    padding-left: 6px !important;
}
.padding-left-7px {
    padding-left: 7px !important;
}
.padding-left-8px {
    padding-left: 8px !important;
}
.padding-left-9px {
    padding-left: 9px !important;
}
.padding-left-10px {
    padding-left: 10px !important;
}
.padding-left-15px {
    padding-left: 15px !important;
}
.padding-left-20px {
    padding-left: 20px !important;
}
.padding-left-25px {
    padding-left: 25px !important;
}
.padding-left-30px {
    padding-left: 30px !important;
}
.padding-left-35px {
    padding-left: 35px !important;
}

.padding-right-1 {
    padding-right: 1%;
}
.padding-right-2 {
    padding-right: 2%;
}
.padding-right-3 {
    padding-right: 3%;
}
.padding-right-4 {
    padding-right: 4%;
}
.padding-right-5 {
    padding-right: 5%;
}
.padding-right-6 {
    padding-right: 6%;
}
.padding-right-7 {
    padding-right: 7%;
}
.padding-right-8 {
    padding-right: 8%;
}
.padding-right-9 {
    padding-right: 9%;
}
.padding-right-10 {
    padding-right: 10%;
}
.padding-right-15 {
    padding-right: 15%;
}
.padding-right-16 {
    padding-right: 16%;
}
.padding-right-17 {
    padding-right: 17%;
}
.padding-right-18 {
    padding-right: 18%;
}
.padding-right-19 {
    padding-right: 19%;
}
.padding-right-20 {
    padding-right: 20%;
}
.padding-right-21 {
    padding-right: 21%;
}
.padding-right-22 {
    padding-right: 22%;
}
.padding-right-23 {
    padding-right: 23%;
}
.padding-right-24 {
    padding-right: 24%;
}
.padding-right-25 {
    padding-right: 25%;
}

.padding-right-1px {
    padding-right: 1px !important;
}
.padding-right-2px {
    padding-right: 2px !important;
}
.padding-right-3px {
    padding-right: 3px !important;
}
.padding-right-4px {
    padding-right: 4px !important;
}
.padding-right-5px {
    padding-right: 5px !important;
}
.padding-right-10px {
    padding-right: 10px !important;
}
.padding-right-12px {
    padding-right: 12px !important;
}
.padding-right-15px {
    padding-right: 15px !important;
}
.padding-right-27px {
    padding-right: 27px !important;
}

.padding-top-1 {
    padding-top: 1% !important;
}
.padding-top-1-5 {
    padding-top: 1.5%;
}
.padding-top-2 {
    padding-top: 2% !important;
}
.padding-top-3 {
    padding-top: 3%;
}
.padding-top-4 {
    padding-top: 4%;
}
.padding-top-5 {
    padding-top: 5%;
}

.padding-top-1px {
    padding-top: 1px !important;
}
.padding-top-2px {
    padding-top: 2px !important;
}
.padding-top-3px {
    padding-top: 3px !important;
}
.padding-top-5px {
    padding-top: 5px !important;
}
.padding-top-7px {
    padding-top: 7px !important;
}
.padding-top-10px {
    padding-top: 10px !important;
}

.padding-bottom-1px {
    padding-bottom: 1px !important;
}
.padding-bottom-2px {
    padding-bottom: 2px !important;
}
.padding-bottom-3px {
    padding-bottom: 3px !important;
}
.padding-bottom-5px {
    padding-bottom: 5px !important;
}
.padding-bottom-7px {
    padding-bottom: 7px !important;
}
.padding-bottom-10px {
    padding-bottom: 10px !important;
}

.padding-1 {
    padding: 1%;
}
.padding-2 {
    padding: 2%;
}
.padding-3 {
    padding: 3%;
}
.padding-4 {
    padding: 4%;
}
.padding-5 {
    padding: 5%;
}

td.padding-small {
    padding-left: 1em;
    padding-right: 1em;
}

/* no padding inside input addons */
.no-padding {
    padding: unset !important;
}
.no-padding-top {
    padding-top: 0 !important;
}
.no-padding-bottom {
    padding-bottom: 0 !important;
}
.no-padding-right {
    padding-right: 0 !important;
}
.no-padding-left {
    padding-left: 0 !important;
}

.margin-top-4 {
    margin-top: 4% !important;
}

.margin-top-1px {
    margin-top: 1px !important;
}
.margin-top-2px {
    margin-top: 2px !important;
}
.margin-top-3px {
    margin-top: 3px !important;
}
.margin-top-4px {
    margin-top: 4px !important;
}
.margin-top-5px {
    margin-top: 5px !important;
}
.margin-top-100px {
    margin-top: 100px !important;
}

/* textarea size restrictions */
textarea.textfield-position-size-restrictions {
    width: 100% !important;
    min-height: 4em;
}

/* Hintergrundfarbe jeder zweiten Position leicht verdunkeln um Positionen leichter unterscheiden zu können */
.time-sheets .position:nth-child(2n) {
    background-color: #e9e8e4;
}

/* dark portlet expand/collapse arrow for more contrast on lighter backgrounds */
.portlet.box>.portlet-title>.tools>a.dark {
    filter: brightness(0.33);
}

/* prevent whitespace from allowing a string to wrap */
.nowrap {
    white-space: nowrap;
}

/* horizontal rule color */
hr {
    border-color: #aaa;
}

/* hide an element without removing it from the document flow */
.hide-keep-space {
    visibility: hidden;
}

/* 2022-04-21 NKL: Wir brauchen mehr Platz */
.form-group {
    margin-bottom: 6px;
}

/* Label linksbündig machen */
label.pull-left {
    text-align: left !important;
}

/* height fix for modal */
.height-fix {
    min-height: 50em !important;
}

/* show modals when positioned outside of parent element? (WIP) */
.modal .modal {
    overflow: visible !important;
}

/* move-cursor for draggable modals */
.modal .modal-draggable .modal-header,
.modal .modal-draggable .modal-footer,
.modal .modal-draggable .portlet-title,
.portlet-sortable:not(.portlet-fullscreen) > .portlet-title
/*.modal .modal-draggable *:not(div.ck-content) h1,
.modal .modal-draggable *:not(div.ck-content) h2,
.modal .modal-draggable *:not(div.ck-content) h3,
.modal .modal-draggable *:not(div.ck-content) h4,
.modal .modal-draggable *:not(div.ck-content) h5,
.modal .modal-draggable *:not(div.ck-content) p,
.modal .modal-draggable *:not(div.ck-content) i,
.modal .modal-draggable *:not(div.ck-content) b,
.modal .modal-draggable *:not(div.ck-content) strong*/
{
    cursor: move;
}
.ck, .ck * {
    cursor: initial;
}
/* different pointer for modals that can only be dragged up and down instead of in all directions */
.modal .modal-draggable .modal-full > div > div > .modal-header,
.portlet-sortable:not(.portlet-fullscreen)>.portlet-title {
    cursor: ns-resize;
}
/* Für akkurates Drag and Drop Verhalten muss das Modal position absolute haben */
.modal .modal-draggable.dragged {
    position: absolute;
    margin: 0;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 10rem);
}
@media (max-width: 480px) {
    .modal-dialog-centered {
        min-height: 100%;
    }
}

.modal-dialog {
    margin-top: 50px;
}

/* only allow textareas to resize vertically (currently only used for LNs) */
textarea {
    resize: vertical;
}

/* Textarea als Anzeigefeld */
textarea.textview {
    padding-top: 0.5%;
    overflow: hidden;
    line-height: 140%;
    border: unset !important;
    background-color: #e2f3ff !important;
    color: #898989;
}

/*.faketextarea {
    overflow: auto;
    resize: vertical;
    height: 4em;
    padding: 6px 12px;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
}*/
.faketextarea:focus-visible, .faketextarea .input:focus-visible {
    outline: 0 solid transparent;
}
.faketextarea .input {
    overflow: auto;
    resize: vertical;
    height: 4em;
    padding: 6px 12px;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    color: rgba(0, 0, 0, 0);
    width: 100%;
    top: 0;
    left: 0;
}
.faketextarea .input::selection {
    color: rgba(0, 0, 0, 1);
}
.faketextarea .display {
    overflow: hidden;
    position: absolute;
    width: 97%;
    height: 99%;
    top: 0.5%;
    left: 0;
    padding: 6px 29px;
    pointer-events: none;
}
.faketextarea-test-display {
    resize: vertical;
    overflow: auto;
    height: 4em;
    padding: 6px 12px;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    pointer-events: none;
}
@keyframes blinking {
    0% {
        opacity: 100;
    }
    50% {
        opacity: 100;
    }
    51% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes forceVisible {
    0% {
        opacity: 100;
    }
    100% {
        opacity: 100;
    }
}
.faketextarea .caret {
    position: absolute;
    width: 1px;
    height: 19px;
    padding: unset;
    border: unset;
    background-color: #242424;
}
.faketextarea .caret:not(.force-visible) {
    animation: blinking 1.1s linear 0s infinite;
}

.perma-hidden {
    display: none !important;
}
/*--------------------------------------------------------*/

/* Links in contenteditable sollen nicht klickbar aussehen, wenn sie es nicht sind */
div[contenteditable=true] a {
    cursor:text;
    text-decoration: none;
}
div[contenteditable=true] a:hover {
    color: #337ab7;
}

/* Buttons im Addon sollen die gleiche Höhe wie das Input-Element haben */
span > .btn:not(.btn-sm):not(.btn-lg) {
    line-height: unset;
}

/* Bugfix vom Template: Inputs werden an den falschen Ecken gerundet, wenn Icons und Buttons in Verwendung sind */
.input-group .input-icon.right > .form-control {
    border-radius: 4px 0 0 4px;
}
.input-group .input-icon.left > .form-control {
    border-radius: 0 4px 4px 0;
}

.input-group.input-icon .form-control:not(:first-child):not(:last-child) {
    border-radius: 4px 0 0 4px;
}

/* damit mehrere inputs in einer input-group sich den Platz teilen und es nicht zum Zeilenumbruch kommt */
.input-group.multi-inp {
    display: flex;
}

/* double icons in input */
i.secondary-icon-right {
    left: 93%;
}
.input-icon.left .secondary-icon-right {
    left: 93%;
}
i.secondary-icon-right-btn {
    left: 87%;
}
.input-icon.left .secondary-icon-right-btn {
    left: 87%;
}

i.padding-sides-1-space {
    padding-left: 1.5px;
    padding-right: 1.5px;
}

/* ----- Hide arrows for number-inputs ----- */
/* Chrome, Safari, Edge, Opera */
input[type=number].noarrows::-webkit-outer-spin-button,
input[type=number].noarrows::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number].noarrows {
    -moz-appearance: textfield;
}
/* ----------------------------------------- */

/* Checkboxen in Tabellen */
input[type=checkbox].item-tick {
    transform: scale(2.4);
    vertical-align: middle;
    margin: 0 14px 0 14px;
}

/* Verhindern, dass die Datepicker über Modals gerendert werden */
.modal-open input.datepicker {
    z-index: unset !important;
}

/* Datepicker innerhalb (über) Modals rendern, wenn sich input im Modal befindet */
.modal-datepicker.input.datepicker {
    /* TODO */
    z-index: 20000 !important;
}

/* Mehr Platz zwischen Action-Bttons und Tools im Portlet-Titel */
.portlet-title > .tools {
    margin-left: 1em;
}

table.dataTable th.sorting_asc,
table.dataTable th.sorting_desc,
table.dataTable td.sorting_1 {
    filter: brightness(92%);
}
table.dataTable th.sorting_asc input,
table.dataTable th.sorting_desc input,
table.dataTable td.sorting_1 input {
    filter: brightness(92%);
}

.text-underline {
    text-decoration: underline;
}

.table.table-slim > tbody > tr > td {
    padding-top: 2px;
    padding-bottom: 2px;
}

.table > tbody > tr > td {
    align-content: center;
    /*text-align: center;*/
}

.fa.fa-1x5 > i, .btn.fa.fa-1x5 > i, i.fa.fa-1x5 {
    font-size: 1.5em;
    margin-top: 2px;
    /*margin-bottom: 9px;*/
}
.fa.fa-1x25 > i, .btn.fa.fa-1x25 > i, i.fa.fa-1x25 {
    font-size: 1.25em;
    /*margin-top: 2px;
    margin-bottom: 9px;*/
}

/* no margin or padding for portlets within tables */
td.portlet-container {
    margin: 0;
    padding: 0 !important;
}
tr .portlet {
    margin: 0;
}
tr .portlet.box {
    position: relative;
}
.portlet-title.portlet-title-slim {
    min-height: 20px;
}
.portlet-title.portlet-title-slim > .caption {
    padding: 2px !important;
    font-size: medium;
}

/* Möglichkeit, Checkboxen auf eine einheitliche Größe festzulegen */
input[type="checkbox"].fixed-size-100 {
    width: 34px;
}
input[type="checkbox"].fixed-size-66 {
    width: 23px;
}
input[type="checkbox"].fixed-size-50 {
    width: 17px;
}
input[type="checkbox"].fixed-size-33 {
    width: 11px;
}

/* Box zum anzeigen von visuellem Feedback z.B. während und/oder nach asynchronen Ladevorgängen */
.msg-box {
    min-width: 100px;
    max-width: 80vw;
    width: fit-content;
    min-height: 50px;
    height: fit-content;

    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--primary-color);/* #cedde9; */
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    color: #ffffff; /* #5e738b; */
    box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.1);

    text-align: center;
    font-weight: bold;
}
.msg-box.fade-out, .fade-out {
    visibility: hidden;
    opacity: 0 !important;
    transition: visibility 0s 0.5s, opacity 0.5s linear;
}
.msg-box > i {
    color: #ffffff; /* #5e738b; */
}

table.table-bordered-side {
    border: 1px solid lightgrey;
}

/* Inputs bekommen beim Focus durch Bootstrap einen z-index von 3 */
.input-icon i.fa-spin {
    z-index: 4;
}

/* Klicks sollen nicht vom Label aud das Eingabeelement übertragen werden */
.control-label {
    pointer-events: none;
}
.control-label > input {
    pointer-events: initial;
}
.control-label > .copy-tooltip {
    pointer-events: initial;
}

/* Mehr Dreh-Optionen für Icons */
i.fa-rotate-45 {
    transform: rotate(45deg);
}

/*
i.fa-layer-group:before {
    content: "\f5fd";
}*/

/* customizable borders */
.border-top {
    border-top: 1px solid red;
}
.border-bottom {
    border-bottom: 1px solid red;
}
.border-left {
    border-left: 1px solid red;
}
.border-right {
    border-right: 1px solid red;
}
.border-thick {
    border-width: 3px;
}
.border-rounded {
    border-radius: 5px;
}
.border-radius-0 {
    border-radius: 0;
}
.border-top-radius-0 {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
.border-bottom-radius-0 {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.border-left-radius-0 {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.border-right-radius-0 {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.page-header.navbar .menu-toggler {
    background-image: none;
}

/* Hamburger-Menü ersetzen, da Bild-Pfade sich mit gulp ändern */
.page-header.navbar .menu-toggler::before {
    content: "☰";
    color: var(--primary-color);
    font-size: 2.5em;
    line-height: 0.5;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle > i,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > .username,
.page-header.navbar .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle > i {
    color: var(--primary-color);
    opacity: .7;
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle {
    padding: 12px 6px 12px 8px;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle:hover > .username,
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover > i {
    opacity: 1;
    color: var(--primary-color);
}

.page-header.navbar .top-menu .navbar-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
}

/* positionieren der Buttons im Header */
.nav-button > .btn {
    margin-right: 10px;
}

@media (max-width: 480px) {
    /* mobil */
    .nav-button > .btn, .nav-button > .textout-flexable {
        display: none;
    }
}
@media (max-width: 1000px) {
    /* verstecken der oberen Pagination, wenn die Breite des Viewports zu klein ist */
    .dt-container .dt-paging:first-child {
        display: none;
    }
}
.input-height {
    height: 34px;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.input-height.no-flex {
    vertical-align: middle;
    display: initial;
}
.input-height > a {
    font-weight: bold;
}

.input-height > .telephone {
    align-self: start;
}

.portlet.box > .portlet-title > .tools {
    padding: 7px 0;
}
.portlet.box > .portlet-title a.collapse {
    background-image: none;
    font-size: 20px;
    color: #fff;
}

/* Korrektes positionieren der Pfeil-Icons für klappbare Portlets */
a.collapse > i, a.expand > i, .portlet > .tools > i {
    position: relative;
    right: 6px;
    text-shadow: 0 1px 3px #555;
}
a.expand > i {
    right: 5px;
}

.copy-to-clipboard {
    cursor: copy;
}
.copy-tooltip {
    position: relative;
    display: inline-block;
}
.copy-tooltip .copy-tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 999999;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: medium;
}
.copy-tooltip .copy-tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
.copy-tooltip:hover .copy-tooltiptext {
    visibility: visible;
    opacity: 1;
}
.copy-to-clipboard > i {
    margin-left: 1px;
    vertical-align: text-bottom;
    font-size: 12px;
}

/* Eingabefelder, die größer werden, wenn man die Maus darüber bewegt */
.size-dynamic-input-300 {
    position: relative;
    z-index: 1;
    width: 100%;
    transition: width 0.25s;
}
.size-dynamic-input-300:hover {
    width: 300%;
}
.size-dynamic-input-300:focus {
    width: 300%;
}
.size-dynamic-input-200 {
    position: relative;
    z-index: 1;
    width: 100%;
    transition: width 0.33s;
}
.size-dynamic-input-200:hover {
    width: 200%;
}
.size-dynamic-input-200:focus {
    width: 200%;
}

.foreground-modal {
    z-index: 10060;
}

/* Kein margin über Checkboxen in in Formularen, damit sie keinen extra-Platz zwischen den Reihen erzeugen */
.form-group input[type=checkbox] {
    margin-top: 0;
}

.alert.alert, .alert .blink {
    animation: blink 1.5s ease-in-out 0.5s;
}

/* Auffällige Notifications */
.badge.annoy {
    --xShift: -4000%;
    --yShift: 2500%;
    --scale: 40;

    animation: reset 0.75s linear 0s, blink 1.5s ease-in-out 0.85s;
}
@keyframes reset { /* translate: f(x) = - 0.25x^2 + 50x | scale: f(x) = 0.005x^2 */
    0% {
        transform: translate(var(--xShift), var(--yShift)) scale(var(--scale));
    }
    30% {
        transform: translate(var(--xShift), var(--yShift)) scale(var(--scale));
    }
    37% {
        transform: translate(calc(var(--xShift) * 0.99), calc(var(--yShift) * 0.99)) scale(calc((var(--scale) * 0.81) + 0.1));
    }
    44% {
        transform: translate(calc(var(--xShift) * 0.96), calc(var(--yShift) * 0.96)) scale(calc((var(--scale) * 0.64) + 0.2));
    }
    51% {
        transform: translate(calc(var(--xShift) * 0.91), calc(var(--yShift) * 0.91)) scale(calc((var(--scale) * 0.49) + 0.3));
    }
    58% {
        transform: translate(calc(var(--xShift) * 0.84), calc(var(--yShift) * 0.84)) scale(calc((var(--scale) * 0.36) + 0.4));
    }
    65% {
        transform: translate(calc(var(--xShift) * 0.75), calc(var(--yShift) * 0.75)) scale(calc((var(--scale) * 0.25) + 0.5));
    }
    72% {
        transform: translate(calc(var(--xShift) * 0.64), calc(var(--yShift) * 0.64)) scale(calc((var(--scale) * 0.16) + 0.6));
    }
    79% {
        transform: translate(calc(var(--xShift) * 0.51), calc(var(--yShift) * 0.51)) scale(calc((var(--scale) * 0.09) + 0.7));
    }
    86% {
        transform: translate(calc(var(--xShift) * 0.36), calc(var(--yShift) * 0.36)) scale(calc((var(--scale) * 0.04) + 0.8));
    }
    93% {
        transform: translate(calc(var(--xShift) * 0.19), calc(var(--yShift) * 0.19)) scale(calc((var(--scale) * 0.01) + 0.9));
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}
@keyframes blink {
    0% {
        filter: brightness(100%);
    }
    17% {
        filter: brightness(200%);
    }
    33% {
        filter: brightness(100%);
    }
    50% {
        filter: brightness(200%);
    }
    67% {
        filter: brightness(100%);
    }
    83% {
        filter: brightness(200%);
    }
    100% {
        filter: brightness(100%);
    }
}

/* Platz-Einsparungen bei Tooltips in Inputs */
.input-icon.right > .form-control {
    padding-right: 24px;
}
.input-icon.left > .form-control {
    padding-left: 24px;
}

.input-icon > i {
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
}
.input-icon.right > i {
    right: 5px;
}
.input-icon.left > i {
    left: 5px;
}

.no-tooltips .input-icon.right > .form-control {
    padding-right: 12px;
}
.no-tooltips .input-icon.left > .form-control {
    padding-left: 12px;
}
.no-tooltips .input-icon > i {
    display: none;
}

.text-align-center, .form-horizontal .control-label.text-align-center {
    text-align: center;
}
.text-align-left {
    text-align: left;
}
.text-align-left-imp {
    text-align: left !important;
}
.text-align-right {
    text-align: right;
}

.align-top {
    vertical-align: top;
}
.align-middle {
    vertical-align: middle;
}
div > table.table-striped td, td > table.table-striped td {
    border: 1px solid lightgrey;
}

/* Anpassungen für kleine Bildschirmgrößen */
@media (max-width: 480px) {
    /* 480px */
    /* Fixed header for mobile */
    .page-header-fixed.page-header-fixed-mobile .page-header.navbar {
        height: 46px;
    }
    .page-header-fixed.page-header-fixed-mobile .page-header.navbar .top-menu {
        display: contents;
    }
    .page-header-fixed.page-header-fixed-mobile .page-header.navbar .menu-toggler {
        float: right;
    }
    .page-header-fixed.page-header-fixed-mobile .page-container {
        margin-top: 10% !important;
    }
}
/* 500px */
/* Fixed header for mobile */
@media (max-height: 500px), (max-width: 500px) {
    html, body, .page-container, .page-content-wrapper, .page-content {
        height: auto !important;
    }
    .page-header-fixed.page-header-fixed-mobile .page-header.navbar {
        height: 92px;
    }
    .page-header-fixed.page-header-fixed-mobile .page-header.navbar .top-menu {
        display: block;
    }
    .page-header-fixed.page-header-fixed-mobile .page-header.navbar .menu-toggler {
        float: right;
    }
    .page-content-wrapper .page-content {
        padding-top: 5px !important;
    }
    .page-header-fixed.page-header-fixed-mobile .page-container {
        margin-top: 0 !important;
    }
}

@media(max-width:991px) {
    .page-header-fixed.page-header-fixed-mobile .navbar-fixed-top {
        position: sticky;
    }
    .page-header-fixed.page-header-fixed-mobile .page-container {
        margin-top: 0 !important;
    }
}

.justify-content-left {
    display: flex;
    justify-content: left;
}
.justify-content-right {
    display: flex;
    justify-content: right;
}
.justify-content-center, .justify-center {
    display: flex;
    justify-content: center;
}
.justify-align-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.align-content-stretch {
    flex-wrap: wrap;
    align-content: stretch;
}

/* In-Input-Links */
input[type="tel"] {
    color: #337ab7;
    text-decoration: initial;
}
input[type="tel"]:hover {
    color: #23527c;
    text-decoration: underline;
    /*cursor: pointer;*/
}

.modal.always-on-top {
    z-index: 999998 !important;
}
.page-header.navbar {
    z-index: 999999 !important;
}
#case_modal {
    z-index: 999999 !important;
}

.portlet-modal .modal-header, .portlet-modal .portlet-title {
    padding: 0;
    height: 0;
    border-radius: 4px;
}
.portlet-modal .portlet-title .caption {
    padding-top: 11px !important;
}
.portlet-modal .modal-body {
    padding: 0;
    border-radius: 4px;
}
.portlet-modal .modal-body .actions button {
    margin-left: 9px;
    margin-top: 3px;
}

/* Breitere Tooltips */
.tooltip.extra-width {
    width: 120%;
}
#calendar .tooltip-inner {
    width: max-content;
    max-width: 300px;
    white-space: pre-wrap;
}

.font-big {
    font-size: large !important;
}

.font-dim {
    color: #7d7d7d;
}

/* Verlinkungen */
a i.fa-arrow-circle-right {
    transform: rotate(-45deg) translate(2px, 2px);
}


.pdf-thumbnail-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
}
.pdf-thumbnail-container {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 22.5%;
    max-height: 350px;
    padding: 5px;
    margin: 10px;
    background-color: #c7c7c7;
    border-radius: 5px;
}
.pdf-thumbnail-container.expanded {
    z-index: 1;
}

.pdf-title {
    line-break: anywhere;
}
.pdf-thumbnail {
    cursor: pointer;
}
.btn.pdf-expand {
    position: absolute;
    top: 3rem;
    left: 6.8rem;
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 50%;
    background-color: #323639;
    color: #e3e3e3;
    box-shadow: none;
}
.btn.pdf-delete {
    color: #e3e3e3;
    box-shadow: none;
}
.btn.pdf-expand:hover, .btn.pdf-delete:hover {
    filter: brightness(125%);
    box-shadow: none;
}
.btn.pdf-expand > i, .btn.pdf-delete > i {
    margin-top: 3px;
    margin-right: 0;
    margin-left: 0;
}

/* Dropdown-Checklist (Angepasst von https://stackoverflow.com/questions/19206919/how-to-create-checkbox-inside-dropdown#19207528) */
.dropdown-check-list {
    display: inline-block;
}
.dropdown-check-list * {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.dropdown-check-list .anchor {
    position: relative;
    display: inline-block;
    width: 100%;
    pointer-events: none;
}
.dropdown-check-list .anchor:after {
    position: absolute;
    content: "";
    border-left: 4px solid #555;
    border-top: 4px solid #555;
    padding: 5px;
    right: -10px;
    top: 2px;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg) scale(0.5);
}
.dropdown-check-list .anchor:active:after {
    right: 8px;
    top: 21%;
}
.dropdown-check-list ul.items {
    position: absolute;
    display: none;
    z-index: 2;
    width: 90%;
    top: 103%;
    left: 0;
    padding: 0;
    margin: 0 0 0 15px;
    border: 1px solid #888;
    border-top: none;
    background-color: white;
    box-shadow: 0 0 5px 0 #555;
}
.dropdown-check-list ul.items li {
    list-style: none;
    padding-left: 10px;
}
.dropdown-check-list.visible .items {
    display: block;
}

/* Überschreiben des Pfads für das switch.png vom Multi-Select */
.ms-container {
    background: transparent url(/assets/dist/switch.png) no-repeat 50% 50%;
}

.contents-align-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.modal-75.modal-dialog {
    width: 75%;
}

div.dataTables_wrapper div.dataTables_filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    text-align: unset;
}

.kunart-scope-filter {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;

    margin-left: 15px;
    margin-right: 15px;
    background-color: white;
    height: 100%;
    width: 14%;
    border: 2px solid #cecece;
    border-radius: 3px;
}
.kunart-scope-filter-inner {
    font-weight: bold;
}

.kunart-date-filter {
    white-space: nowrap;
    width: 32%;
}
.kunart-date-filter input {
    width: 35% !important;
}

.kunart-selection-filter {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
    margin-right: 10px;
}

/* blinken von Elementen, z.B. wenn eine neue Position hinzugefügt wurde */
@keyframes flashOnce {
    0% {
        background: #f8f9fd;
    }
    25% {
        background: #2F75B5;
    }
    100% {
        background: #f8f9fd;
    }
}
.flashOnce {
    animation: flashOnce 1s ease-in-out 0s;
}

.modal .scroll {
    max-height: 80rem;
}
.modal .scroll ul.columns-2 {
    columns: 2;
}

table.dataTable td.dt-middle {
    vertical-align: middle;
}

.modal {
    z-index: 1050;
}

.nav.button {
    height: 100%;
}

.display-flex {
    display: flex;
}
.justify-content-space-between {
    justify-content: space-between;
}

.fc-event-main {
    padding-left: 5% !important;
}

.width-fit-content {
    width: fit-content;
}

.temporary-row {
    animation: blinker 2s linear infinite;
    color: #0064ff;
}

@-webkit-keyframes blinker {
    50% {
        opacity: 0.25;
    }
}

.scale-150 {
    scale: 150%;
}

.no-filter {
    filter: none !important;
}
.no-filter:hover {
    filter: none !important;
    box-shadow: none;
}

.top-menu-divider {
    background-color: var(--sidebar-primary-bg-color);
    width: 6px;
    height: 3em;
}

.navbar-nav.pull-left .dropdown-menu {
    left: -78px
}

/* Bilder-Upload über Bild selbst */
img.img-upload:hover {
    cursor: pointer;
}

.responsive {
    width: 100%;
    height: auto;
}

select.bold {
    font-weight: bold;
}

.button-version-update {
    margin-right: auto;
}

.gruppenzuordnung-icon-wrapper {
    text-align: center;
}

.gruppenzuordnung-icon {
    width: 34px;
    height: 34px;
}

.right .autocomplete-items div {
    text-align: left;
}
/* Markierungen in Liste für Teilnehmerbuchungen in Events */
.mitglied.added {
    background-color: #C1FFC1;
}
.mitglied.removed {
    background-color: #FFC1C1;
}

.mitgliedanmeldung .antragsteller {
    margin-top: 30px;
}

.mitgliedanmeldung .mitglied {
    margin-top: 30px;
}

.eventanmeldung .teilnehmer {
    margin-top: 30px;
}

.newsletteranmeldung p {
    color: #333;
    font-family: "Open Sans",sans-serif;
    direction: ltr;
    font-size: 14px;
}

.deny-verification-portlet p {
    color: #333;
    font-family: "Open Sans",sans-serif;
    direction: ltr;
    font-size: 14px;
}

.kontakt-warnung p {
    color: #333;
    font-family: "Open Sans",sans-serif;
    direction: ltr;
    font-size: 16px;
}

/* Tabellen scrollbar machen */
.dataTables_wrapper {
    overflow-x: auto;
}

.heading-buttons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.url-wrap {
    word-wrap: break-word;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.font-monospace {
    font-family: monospace, serif;
}

/* Readonly selects nicht interagierbar machen */
select[readonly]
{
    pointer-events: none;
}

th.sorting.disabled,
th.sorting.disabled.sorting_asc,
th.sorting.disabled.sorting_desc {
    filter: grayscale(90%);
}
/*th.sorting.disabled:hover,
th.sorting.disabled.sorting_asc:hover,
th.sorting.disabled.sorting_desc:hover {
    color: red;
}*/
th.sorting.disabled:active,
th.sorting.disabled.sorting_asc:active,
th.sorting.disabled.sorting_desc:active {
    pointer-events: none;
}
th > input.disabled:active {
    pointer-events: none;
    filter: grayscale(90%) brightness(90%);
}

.dropdown-menu.dropdown-three-dots {
    margin-top: 5px;
    right: 0px;
    left: auto;
    border: 1px solid #cccccc !important;
    border-radius: 6px !important;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1) !important;
}

.dropdown-three-dots-content {
    display: flex;
    flex-direction: column;
}

.dropdown-three-dots-item {
    display: flex;
    border-top: 1px solid #cccccc;
}

.dropdown-three-dots-item > a {
    width: 100%;
    padding: 7px;
}

.dropdown-three-dots-item:has(.hide-keep-space) {
    display: none;
}

.dropdown-three-dots-item:has(.hidden) {
    display: none;
}

.dropdown-three-dots-item > a:hover {
    background-color: #f2f2f2;
    text-decoration: none;
}

.dropdown-three-dots-content > a {
    display: flex;
}

.three-dots-marker {
    display: inline-block;
}

.dropzone {
    background: white;
    border-radius: 5px;
    border: 2px dashed rgb(135, 135, 135) !important;
    border-image: none;
}

.img-bordered {
    border-radius: 5px;
    border: 2px solid rgb(135, 135, 135) !important;
    border-image: none;
}

.autocomplete-items > .disabled {
    background-color: #ddd;
}

/* Markierung des aktuellen Tages im Kalender deutlicher machen */
.fc .fc-daygrid-day.fc-day-today {
    background-color: rgba(255, 220, 40, 0.88);
}

select.dropdown-extra-big {
    text-wrap: initial;
    height: 60px;
}

.ck-editor .ck-read-only {
    filter: brightness(90%);
}

.form-group .ck.ck-editor {
    margin-right: 15px;
}

div.dataTables_wrapper div.dataTables_filter label {
    margin-bottom: 0;
}
/* Die drei Punkte Dropdowns sollen kein scrollen der Tabelle verursachen, sondern darüber hinaus gehen dürfen.
 Die Regel war vorher: overflow-x: hidden - Warum, gilt es noch herauszufinden... */
div.dataTables_wrapper {
    overflow-x: visible;
}

/* ----- neues Design für Modals ----- */
.modal .modal-header h1,
.modal .modal-header h2,
.modal .modal-header h3,
.modal .modal-header h4,
.modal .modal-header h5,
.modal .modal-header h6 {
    font-weight: bold;
}
.modal.topic-main .modal-dialog .modal-content .modal-header {
    color: #cfc92a;
    background-color: #295514;
}
.modal.topic-sub .modal-dialog .modal-content .modal-header {
    color: #295514;
    background-color: #cfc92a;
}
.modal.topic-sub2 .modal-dialog .modal-content .modal-header {
    color: #8a5804;
    background-color: #eee96d;
}
.modal.topic-sub3 .modal-dialog .modal-content .modal-header {
    color: #505033;
    background-color: #d3d4bc;
}
.modal.topic-warn .modal-dialog .modal-content .modal-header,
.modal.topic-warn .modal-dialog .modal-content .modal-header > h4 {
    color: #ffffff;
    background-color: #b14141;
}
.modal.topic-main:not(.modal-clean) .modal-dialog .modal-content .modal-body,
.modal.topic-main:not(.modal-clean) .modal-dialog .modal-content .modal-footer,
.modal.topic-sub:not(.modal-clean) .modal-dialog .modal-content .modal-body,
.modal.topic-sub:not(.modal-clean) .modal-dialog .modal-content .modal-footer,
.modal.topic-sub3:not(.modal-clean) .modal-dialog .modal-content .modal-body,
.modal.topic-sub3:not(.modal-clean) .modal-dialog .modal-content .modal-footer,
.modal.topic-warn:not(.modal-clean) .modal-dialog .modal-content .modal-body,
.modal.topic-warn:not(.modal-clean) .modal-dialog .modal-content .modal-footer {
    background-color: #dadfec;
}
.modal.topic-sub2:not(.modal-clean) .modal-dialog .modal-content .modal-body,
.modal.topic-sub2:not(.modal-clean) .modal-dialog .modal-content .modal-footer {
    background-color: #d5ddf1;
}
.modal table .even {
    background-color: #fafafa;
}
.modal table .odd {
    background-color: #ffffff;
}
.modal .modal-header {
    border-radius: 2px
}
.modal > .modal-larger {
    width: 1500px;
}
@media (max-width: 1500px) {
    .modal > .modal-larger {
        width: 100%;
    }

}
/* ---- /neues Design für Modals ----- */

.line-height-32px {
    line-height: 32px;
}

/* flachere Buttons in Portlet-Titeln */
.portlet > .portlet-title > .actions > .btn {
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.5;
}

.line-height-small {
    line-height: 17px;
}

progress {
    height: 2.5vh;
    width: 25vw;
    /*background-color: var(--main-text-color)*/
}

.ck.ck-content > p {
    margin-bottom: 0;
}

/* --- Farbdefinitionen für automatische Gruppenfärbung für beliebige Nummern anhand einer berechneten Zahl */
.gruppenfarbe-1 {
    color: #000;
    background-color: #FFE699;
}
.gruppenfarbe-2 {
    color: #000;
    background-color: #C6E0B4;
}
.gruppenfarbe-3 {
    color: #000;
    background-color: #9BC2E6;
}
.gruppenfarbe-4 {
    color: #000;
    background-color: #8497B0;
}
.gruppenfarbe-5 {
    color: #000;
    background-color: #FCE4D6;
}
.gruppenfarbe-6 {
    color: #000;
    background-color: #00B0F0;
}
.gruppenfarbe-7 {
    color: #fff;
    background-color: #305496;
}
.gruppenfarbe-8 {
    color: #000;
    background-color: #548235;
}
.gruppenfarbe-9 {
    color: #000;
    background-color: #F4B084;
}
.gruppenfarbe-10 {
    color: #000;
    background-color: #8497B0;
}
.gruppenfarbe-11 {
    color: #000;
    background-color: #E986FA;
}
.gruppenfarbe-12 {
    color: #fff;
    background-color: #333F4F;
}
.gruppenfarbe-13 {
    color: #000;
    background-color: #A9D08E;
}
.gruppenfarbe-14 {
    color: #000;
    background-color: #FFFFFF;
}
.gruppenfarbe-15 {
    color: #000;
    background-color: #D0CECE;
}
.gruppenfarbe-16 {
    color: #000;
    background-color: #F8CBAD;
}
.gruppenfarbe-17 {
    color: #000;
    background-color: #FFD966;
}
.gruppenfarbe-18 {
    color: #fff;
    background-color: #C65911;
}
.gruppenfarbe-19 {
    color: #000;
    background-color: #E2EFDA;
}
.gruppenfarbe-20 {
    color: #000;
    background-color: #00B050;
}

.header-nowrap .dt-column-title {
    white-space: nowrap;
}
table.dataTable.table-condensed > thead > tr:not(.column-filters) > th {
    padding-right: 25px;
}

@media (min-width: 560px) and (max-width: 1000px) {
    .page-content-wrapper .page-content {
        padding: 10px 10px 10px 10px !important;
    }
}

.fa.top-left.out {
    transform: translate(-8px, -7px) rotate(-45deg);
}
.fa.top-right.out {
    transform: translate(-6px, -7px) rotate(45deg);
}
.fa.bottom-left.out {
    transform: translate(-30px, 7px) rotate(45deg);
}
.fa.bottom-right.out {
    transform: translate(-27.5px, 7px) rotate(-45deg);
}

.fa.top-left.in {
    transform: translate(-7px, -6px) rotate(-45deg);
}
.fa.top-right.in {
    transform: translate(-6px, -6px) rotate(45deg);
}
.fa.bottom-left.in {
    transform: translate(-30px, 7px) rotate(45deg);
}
.fa.bottom-right.in {
    transform: translate(-28px, 7px) rotate(-45deg);
}