body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
}

.main-header .logo {
    font-size: 14px !IMPORTANT;   
}

.box-header > .fa, .box-header > .glyphicon, .box-header > .ion, .box-header .box-title {
    color: #617f9b;
    font-size: 18px;
    margin: 0;
    padding: 0;
    font-weight: 400;
    margin: 0;
    padding: 0;
    display: inline;
}

.description-block > .description-header {
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 24px;
}
.chart {
  width: 100%; 
  min-height: 450px;
}
.chosen-container-single .chosen-single {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0 0 0 8px;
    height: 36px inherit;
    border: 1px solid #aaa;
    border-radius: 5px;
    background-color: #fff;
    background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#fff),color-stop(50%,#f6f6f6),color-stop(52%,#eee),color-stop(100%,#f4f4f4));
    background: -webkit-linear-gradient(top,#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);
    background: -moz-linear-gradient(top,#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);
    background: -o-linear-gradient(top,#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);
    background: linear-gradient(top,#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);
    background-clip: padding-box;
    box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0,0,0,.1);
    color: #444;
    text-decoration: none;
    white-space: nowrap;
    line-height: 36px inherit;
}

/* Wizard */
.stepwizard-step p {
    margin-top: 10px;
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;

}

.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

  .remove-to-do {
    display: block;
    float: right;
    width: 20px;
    height: 20px;
    font-family: sans-serif;
    color: rgb(139, 97, 93);
    text-decoration: none;
    text-align: right;
    padding: 0px 5px 8px 0px;
    border-radius: 50%;
    transition: background 1s;
    cursor: pointer;
  }
  
  .remove-to-do:hover {
    background: rgb(139, 97, 93);
    color: #fff;
  }
.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 34px !IMPORTANT;
    user-select: none;
    -webkit-user-select: none;
}
.select2-container{
 width: 100%!IMPORTANT;
}
 .select2-search--dropdown .select2-search__field {
 width: 98%;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #617f9b !IMPORTANT;
}

.carousel-control.left,
.carousel-control.right {
    background-image: none !IMPORTANT;
}
.input-lg {
	border-radius: 0 !IMPORTANT;
}
@media (max-width: 767px)
.skin-blue .main-header .navbar .dropdown-menu li a {
    color: #777;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 400 !IMPORTANT;
}
.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.user-panel > .image > img {
    width: 100%;
    max-width: 40px !IMPORTANT;
    height: auto;
}
.bootstrap-timepicker table td a {
    border: 1px solid transparent;
	background-color: #617f9b !IMPORTANT;
    display: inline-block;
    margin: 0;
    outline: 0 none;
    padding: 8px 0;
    width: 3em;
}
.info-box-content {
    padding: 10px 25px !IMPORTANT;   
	margin-left:: 70px !IMPORTANT;   
}
/* --- Invoiz-Style Rechnungsformular --- */

/* Haupt-Container ("Das Blatt Papier") */
.invoiz-box {
    max-width: 900px;
    margin: 20px auto;
    background: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    padding: 40px;
    border: none !important;
}

/* Kopf-Inputs (Nummer, Datum, Zahlungsart) */
.invoiz-input {
    border: none !important;
    border-bottom: 1px solid #eee !important;
    background: transparent !important;
    text-align: right;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.invoiz-input:focus {
    border-bottom-color: #3c8dbc !important;
    box-shadow: none !important;
}

/* Tabellen-Zellen Styling */
.item-row:hover {
    background-color: #fcfcfc;
}

.item-row input, 
.item-row select, 
.item-row textarea {
    border: 1px solid transparent !important;
    background: transparent !important;
    transition: all 0.2s;
}

.item-row input:hover, 
.item-row input:focus,
.item-row textarea:hover,
.item-row textarea:focus {
    border-bottom: 1px solid #3c8dbc !important;
    background: #fff !important;
    outline: none !important;
}

/* Spezifisch für numerische Zellen */
.invoiz-input-cell {
    text-align: right;
}

/* Drag & Drop Handle */
.drag-handle {
    cursor: move;
    color: #ccc;
    padding-top: 10px !important;
}

.item-row:hover .drag-handle {
    color: #333;
}

/* Select2 Anpassungen für den Invoiz-Look */
.select2-container--default .select2-selection--single {
    border: none !important;
    border-bottom: 1px solid #eee !important;
    border-radius: 0 !important;
    height: 40px !important;
    padding-top: 5px !important;
    background-color: transparent !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-bottom: 1px solid #3c8dbc !important;
}

/* Hilfsklassen */
.no-border td {
    border: none !important;
}

.payment-info {
    color: #3c8dbc;
    font-size: 11px;
    margin-top: 5px;
}

/* ==========================================================================
   AdminLTE 2 Sidebar im AdminLTE 4 Stil (Overlay + Hover Expand + Vertikale Menüs)
   ========================================================================== */

@media (min-width: 768px) {
    /* 1. LOGO FIXIEREN: Bleibt immer oben links stehen */
    .main-header .logo {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 230px !important;
        z-index: 850 !important;
    }

    /* 2. INHALT RECHTS POSITIONIEREN: Kalender & Navbar bleiben starr an Ort und Stelle */
    .main-header .navbar,
    .content-wrapper, 
    .main-footer {
        margin-left: 230px !important;
        transition: none !important; /* Verhindert das Ruckeln oder Verschieben des Inhalts */
    }

    /* 3. SIDEBAR ALS SCHWEBENDES OVERLAY DEFINIEREN */
    .main-sidebar {
        position: fixed !important;
        top: 0px; /* Höhe des oberen Headers */
        bottom: 0;
        left: 0;
        width: 230px !important;
        z-index: 840 !important;
        overflow-x: hidden;
        overflow-y: auto; /* Erlaubt Scrollen im Menü, falls es sehr lang ist */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.15), 0 4px 25px rgba(0, 0, 0, 0.1) !important;
        transition: width 0.25s ease-in-out, box-shadow 0.25s ease-in-out !important;
    }

    /* ==========================================================================
       VERHALTEN BEI COLLAPSE (EINGEKLAPPTEM ZUSTAND)
       ========================================================================== */

    /* Standard-Zustand (Eingeklappt): Nur 60px breit für die Icons, kein Schatten */
    .sidebar-mini.sidebar-collapse .main-sidebar {
        width: 60px !important;
        box-shadow: none !important;
    }

    /* HOVER-EFFEKT: Sidebar schiebt sich fließend ÜBER den stehenden Inhalt */
    .sidebar-mini.sidebar-collapse .main-sidebar:hover {
        width: 230px !important;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2), 10px 0 30px rgba(0, 0, 0, 0.15) !important; /* AdminLTE 4 Schatten */
    }

    /* 4. ELEMENTE IM EINGEKLAPPTEN ZUSTAND AUSBLENDEN */
    .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
    .sidebar-mini.sidebar-collapse .sidebar-menu > li .pull-right-container,
    .sidebar-mini.sidebar-collapse .user-panel > .info,
    .sidebar-mini.sidebar-collapse .sidebar-menu .treeview-menu {
        display: none !important;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
    }

    /* 5. ELEMENTE BEIM HOVERN UNTEREINANDER EINBLENDEN */
    .sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar-menu > li > a > span,
    .sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar-menu > li .pull-right-container,
    .sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel > .info {
        display: inline !important;
        opacity: 1;
    }

    /* Untermenüs (Treeviews) beim Hovern wieder untereinander erlauben */
    .sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar-menu .treeview-menu {
        display: block !important;
        opacity: 1;
    }
    
    /* Überschreibt das originale AdminLTE 2 Absolut-Popout für Menüpunkte */
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container),
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: auto !important;
        box-shadow: none !important;
    }
}
/* ==========================================================================
   SCROLLBAR & SIDEBAR HINTERGRUND-ANPASSUNG (Dunkelblau statt Weiß)
   ========================================================================== */

/* 2. Modernen Scrollbalken (Schiebregler) für Webkit-Browser (Chrome, Edge, Safari) anpassen */
.main-sidebar::-webkit-scrollbar {
    width: 6px !important; /* Breite des Schiebreglers */
    background-color: #0c346a !important; /* Hintergrund der Scroll-Spur (Blau statt Weiß) */
}

.main-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2) !important; /* Der bewegliche Greifer (dezent weiß/transparent) */
    border-radius: 3px !important;
}

.main-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4) !important; /* Greifer wird beim Drüberfahren heller */
}

/* 3. Scrollbalken-Anpassung für Firefox */
@supports (scrollbar-color: auto) {
    .main-sidebar {
        scrollbar-width: thin !important;
        scrollbar-color: rgba(255, 255, 255, 0.2) #0c346a !important; /* Greifer-Farbe + Hintergrund-Farbe */
    }
}

/* ==========================================================================
   UNIVERSELLER LOGO FIX: Über den Body gesteuert (AdminLTE 2 & 4 kompatibel)
   ========================================================================== */

@media (min-width: 768px) {
    /* 1. START-ZUSTAND (Sidebar ist ganz normal GEÖFFNET) */
    .main-header .logo {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 230px !important;
        height: 50px !important;
        line-height: 50px !important;
        z-index: 850 !important;
        overflow: hidden;
        background-color: #0c346a !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: width 0.25s ease-in-out !important; /* Ermöglicht weiches Schieben */
    }

    /* Mini-Logo standardmäßig ausblenden */
    .main-header .logo .logo-mini {
        display: none !important;
    }
    .main-header .logo span:not(.logo-mini) {
        display: inline-block !important;
    }

    /* ==========================================================================
       ZUSTAND: COLLAPSE (Wenn die Sidebar eingeklappt ist)
       ========================================================================== */

    /* Zwingt das Logo auf 60px, sobald die Collapse-Klasse am Body aktiv ist */
    body.sidebar-collapse .main-header .logo {
        width: 60px !important;
    }

    /* Im 60px-Zustand: Großen Text verstecken, "CT+" zentriert anzeigen */
    body.sidebar-collapse .main-header .logo span:not(.logo-mini) {
        display: none !important;
    }
    body.sidebar-collapse .main-header .logo .logo-mini {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* ==========================================================================
       ZUSTAND: HOVER (Wenn die Maus über die eingeklappte Sidebar fährt)
       ========================================================================== */

    /* Unabhängig vom HTML-Baum: Sobald die Sidebar gehovert wird, 
       weiten wir das Logo über den gemeinsamen Body-Käfig wieder auf 230px aus */
    body.sidebar-collapse .wrapper:hover .main-header .logo,
    body.sidebar-collapse .main-sidebar:hover + .main-header .logo,
    body.sidebar-collapse .main-sidebar:hover .main-header .logo,
    body.sidebar-collapse .main-header .logo:hover {
        width: 230px !important;
    }

    /* Beim Hovern: Mini-Logo wieder weg, großen Text einblenden */
    body.sidebar-collapse .wrapper:hover .main-header .logo .logo-mini,
    body.sidebar-collapse .main-header .logo:hover .logo-mini {
        display: none !important;
    }
    body.sidebar-collapse .wrapper:hover .main-header .logo span:not(.logo-mini),
    body.sidebar-collapse .main-header .logo:hover span:not(.logo-mini) {
        display: inline-block !important;
    }
}
/* ==========================================================================
   HOVER-FIX FÜR DAS LOGO: Text bleibt weiß, kein Farbkonflikt
   ========================================================================== */

@media (min-width: 768px) {
    /* Erzwingt, dass der Text im Logo immer weiß ist – auch im Hover-Zustand */
    .main-header .logo,
    .main-header .logo:hover,
    .main-header .logo:focus,
    .main-header .logo:active {
        background-color: #0c346a !important; /* Dein exaktes Sidebar-Blau */
        color: #ffffff !important;            /* Textfarbe bleibt knallweiß */
        text-decoration: none !important;     /* Verhindert Unterstreichungen */
    }

    /* Stellt sicher, dass auch alle verschachtelten spans (wie logo-lg oder logo-mini) weiß bleiben */
    .main-header .logo span,
    .main-header .logo:hover span {
        color: #ffffff !important;
    }
}


/* ==========================================================================
   FULLCALENDAR: Mehr Freiraum für die Tageszahlen
   ========================================================================== */

/* Gibt den Datumszahlen in den Monatsfeldern ein sauberes Padding */
.fc-day-number {
    padding: 6px 10px !important;
    font-weight: 600 !important;      /* Macht die Zahlen etwas griffiger */
    color: #444444 !important;        /* Ein angenehmes, dunkles Grau */
}

/* Falls du eine neuere FullCalendar-Version nutzt (v4/v5/v6) greift dieser Selektor: */
.fc-daygrid-day-number {
    padding: 6px 10px !important;
    font-weight: 600 !important;
    color: #444444 !important;
}
/* ==========================================================================
   1. DER TEXT-BUTTON (Jetzt im edlen Blau & mit größerer Schrift)
   ========================================================================== */
/* ==========================================================================
   1. DER TEXT-BUTTON (Jetzt mit Abstand zum Nachbar-Button)
   ========================================================================== */
.custom-pulse-rect-btn.btn-report {
    height: 42px !important;
    padding: 0 22px !important; 
    border-radius: 8px !important; 
    
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: none !important;
    color: #ffffff !important;
    
    font-weight: 700 !important; 
    font-size: 1.1rem !important; 
    letter-spacing: 0.5px;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important; 
    
    /* HIER NEU: Sorgt für 12px Abstand, falls Buttons nebeneinander stehen */
    margin: 0 0 0 12px !important; 
    
    cursor: pointer !important;
    text-decoration: none !important;
    
    animation: sexyBluePulse 2s infinite;
    transition: all 0.25s ease-in-out !important;
}

/* Das Icon im blauen Button */
.custom-pulse-rect-btn.btn-report i {
    color: #ffffff !important;
    font-size: 1.25rem !important; /* Icon dezent mit vergrößert */
    line-height: 1 !important;
}

/* Hover-Effekt für den blauen Button */
.custom-pulse-rect-btn.btn-report:hover {
    transform: translateY(-2px) scale(1.02) !important;
    animation: none !important;
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.7) !important;
}

/* Klick-Effekt */
.custom-pulse-rect-btn.btn-report:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Blauer Puls-Effekt */
@keyframes sexyBluePulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* ==========================================================================
   2. HEADER-AUSRICHTUNG (Für die perfekte Linie)
   ========================================================================== */
.pdocrud-header .row, 
.pdocrud-top-actions,
.pdocrud-actions-btn {
    display: flex !important;
    align-items: center !important; 
    justify-content: flex-end;
    gap: 10px;
}

.pdocrud-top-actions .custom-pulse-rect-btn {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center !important;
}

/* ==========================================================================
   3. PDF-BUTTONS IN DEN AKTIONEN (Gezielt auf das Icon fixiert -> ROT!)
   ========================================================================== */

/* Sucht nun explizit nach dem PDF-Icon-Typen, egal an welcher Stelle es generiert wird */
.pdocrud-table td a i.fa-file-pdf-o, 
.pdocrud-table td a i.fa-file-pdf,
.pdocrud-table td a i.fa-file-text-o { 
    background: linear-gradient(135deg, #ff3333 0%, #cc0000 100%) !important; /* Knalliges Adobe-Rot */
    color: #ffffff !important; 
    padding: 7px 11px !important; 
    border-radius: 6px !important; 
    font-size: 1rem !important; 
    box-shadow: 0 3px 8px rgba(204, 0, 0, 0.25) !important; 
    transition: all 0.2s ease-in-out !important;
    display: inline-block !important;
    text-decoration: none !important;
}

/* Hover-Effekt für das rote PDF-Icon */
.pdocrud-table td a:hover i.fa-file-pdf-o,
.pdocrud-table td a:hover i.fa-file-pdf,
.pdocrud-table td a:hover i.fa-file-text-o {
    transform: translateY(-1.5px) !important; 
    background: linear-gradient(135deg, #cc0000 0%, #990000 100%) !important; 
    box-shadow: 0 5px 12px rgba(204, 0, 0, 0.45) !important; 
}