@charset "utf-8"; @import url//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); div.main{ background: #0264d6; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #0264d6 1%, #1c2b5a 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#0264d6), color-stop(100%,#1c2b5a)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #0264d6 1%,#1c2b5a 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #0264d6 1%,#1c2b5a 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #0264d6 1%,#1c2b5a 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #0264d6 1%,#1c2b5a 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0264d6', endColorstr='#1c2b5a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ height:calc(100vh); width:100%; } [class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; } /* ---------- GENERAL ---------- */ * { box-sizing: border-box; margin:0px auto; &:before, &:after { box-sizing: border-box; } } body { color: #606468; font: 87.5%/1.5em 'Open Sans', sans-serif; margin: 0; } a { color: #eee; text-decoration: none; } a:hover { text-decoration: underline; } input { border: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 1.5em; padding: 0; -webkit-appearance: none; } p { line-height: 1.5em; } .clearfix { *zoom: 1; &:before, &:after { content: ' '; display: table; } &:after { clear: both; } } .container { left: 50%; position: fixed; top: 50%; transform: translate(-50%, -50%); } /* ---------- LOGIN ---------- */ #login form{ width: 250px; } #login, .logo{ display:inline-block; width:40%; } #login{ border-right:1px solid #fff; padding: 0px 22px; width: 59%; } .logo{ color:#fff; font-size:50px; line-height: 125px; } #login form span.fa { background-color: #fff; border-radius: 3px 0px 0px 3px; color: #000; display: block; float: left; height: 50px; font-size:24px; line-height: 50px; text-align: center; width: 50px; } #login form input { height: 50px; } fieldset{ padding:0; border:0; margin: 0; } #login form input[type="text"], input[type="password"] { background-color: #fff; border-radius: 0px 3px 3px 0px; color: #000; margin-bottom: 1em; padding: 0 16px; width: 200px; } #login form input[type="submit"] { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #000000; color: #eee; font-weight: bold; /* margin-bottom: 2em; */ text-transform: uppercase; padding: 5px 10px; height: 30px; } #login form input[type="submit"]:hover { background-color: #d44179; } #login > p { text-align: center; } #login > p span { padding-left: 5px; } .middle { display: flex; width: 600px; } /* ========================================================= Modern-kompaktes Layout für die Zeiterfassung Nur aktiv auf , damit Login unverändert bleibt. ========================================================= */ .zt-app { --zt-bg: #f4f7fb; --zt-card: rgba(255,255,255,0.94); --zt-border: #dbe4f0; --zt-text: #1f2937; --zt-muted: #6b7280; --zt-primary: #2563eb; --zt-primary-dark: #1d4ed8; --zt-radius: 14px; --zt-shadow: 0 8px 24px rgba(15, 23, 42, 0.07); background: linear-gradient(135deg, #eef4ff 0%, #f8fafc 45%, #eef8f2 100%); color: var(--zt-text); font: 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; min-height: 100vh; } .zt-app *, .zt-app *::before, .zt-app *::after { box-sizing: border-box; } .zt-app > .container-fluid { max-width: 1880px; padding: 10px 12px; margin: 0 auto; } .zt-app .row { --bs-gutter-x: .65rem; } .zt-app .sticky-top { top: 10px; } .zt-app .container, .zt-app .container-fluid { margin-left: 0; margin-right: 0; } .zt-app .container-fluid.border, .zt-app .col-sm-7 > .container-fluid, .zt-app .col-sm-2 .container-fluid { background: var(--zt-card) !important; border: 1px solid var(--zt-border) !important; border-radius: var(--zt-radius) !important; box-shadow: var(--zt-shadow); } .zt-app form > .container-fluid.border, .zt-app .col-sm-2 .container-fluid { padding: 9px 10px; margin-bottom: 8px; } .zt-app .col-sm-7 > .container-fluid.border { padding: 8px; max-height: calc(100vh - 22px); overflow: auto; } .zt-app .container-fluid.border .row:first-child .col-sm-12, .zt-app .container-fluid.border .row:first-child .col-sm-1, .zt-app .container-fluid.border .row:first-child .col-sm-3 { font-weight: 700; color: #111827; letter-spacing: .01em; } .zt-app label, .zt-app .form-label, .zt-app .small, .zt-app .text-muted { color: var(--zt-muted) !important; } .zt-app .form-control, .zt-app .form-select, .zt-app .bootstrap-select > .dropdown-toggle { min-height: 29px; height: 29px; padding: 3px 8px; border-radius: 9px; border: 1px solid #d4deea; background: #fff; font-size: 12.5px; box-shadow: none; } .zt-app .form-control:focus, .zt-app .bootstrap-select > .dropdown-toggle:focus { border-color: #93b4f7; box-shadow: 0 0 0 .14rem rgba(37, 99, 235, .12); } .zt-app .form-check-input { width: .9rem; height: .9rem; margin-top: .15rem; border-color: #bcc8d9; } .zt-app .form-check-label { font-size: 12.5px; color: #374151; } .zt-app .btn, .zt-app .btn-sm { --bs-btn-padding-y: .20rem; --bs-btn-padding-x: .48rem; --bs-btn-font-size: .76rem; border-radius: 9px; font-weight: 650; letter-spacing: .01em; box-shadow: 0 1px 2px rgba(15,23,42,.05); } .zt-app .btn-primary { background: var(--zt-primary); border-color: var(--zt-primary); } .zt-app .btn-primary:hover { background: var(--zt-primary-dark); border-color: var(--zt-primary-dark); } .zt-app .btn-success { background: #10b981; border-color: #10b981; } .zt-app .btn-danger { background: #ef4444; border-color: #ef4444; } .zt-app .btn-delete-day { padding: .10rem .32rem !important; font-size: .68rem !important; border-radius: 8px !important; } .zt-app table.table { margin-bottom: 0; border-collapse: separate !important; border-spacing: 0; overflow: hidden; font-size: 12.4px; } .zt-app table.table thead th { position: sticky; top: 0; z-index: 5; background: #172033; color: #fff; border-color: #26364f; padding: 6px 7px; font-weight: 700; white-space: nowrap; } .zt-app table.table tbody td { padding: 4px 7px; vertical-align: middle; border-color: #e5edf6; } .zt-app table.table tbody tr:not(.collapse):hover > td { filter: brightness(.985); } .zt-app .collapse.row1 > td { background: #f8fafc !important; padding: 6px 8px; } .zt-app .collapse.row1 form { background: #fff; border: 1px solid #e3ebf5; border-radius: 12px; padding: 6px 8px; margin-bottom: 5px; } .zt-app .collapse.row1 .form-control-sm { min-height: 27px; height: 27px; padding: 2px 7px; font-size: 12px; } .zt-app .zt-diff-positive { background-color: #e8f7ee !important; color: #126236 !important; font-weight: 700; } .zt-app .zt-diff-negative { background-color: #fde8ea !important; color: #991b1b !important; font-weight: 700; } .zt-app .zt-row-open > td { background-color: #fbeced !important; } .zt-app .zt-week-even > td { background-color: #f6f8fb; } .zt-app .zt-week-odd > td:first-child, .zt-app .zt-week-even > td:first-child { border-left-width: 5px; border-left-style: solid; border-left-color: #cbd8ec; text-align: center; } .zt-app .zt-row-feiertag > td { background-color: #e4f1fb !important; } .zt-app .zt-row-urlaub > td { background-color: #e7f5dd !important; } .zt-app .zt-row-kalk > td { background-color: #efe4fb !important; } .zt-app .zt-row-ausgleich > td { background-color: #fff4d2 !important; } .zt-app .col-sm-2 .container-fluid .row { padding: 1px 0; align-items: center; } .zt-app .col-sm-2 .container-fluid .col-sm-5, .zt-app .col-sm-2 .container-fluid .col-sm-7 { font-size: 12.2px; } .zt-app .modal-content { border: 0; border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 23, 42, .22); } @media (max-width: 1199px) { .zt-app .sticky-top { position: static; } .zt-app .col-sm-3, .zt-app .col-sm-7, .zt-app .col-sm-2 { width: 100%; } .zt-app .col-sm-7 > .container-fluid.border { max-height: none; } } /* ========================================================= Sidebar-Layout Fix: links/rechts als echte Sidebars, Tabelle bleibt im mittleren Bereich und wird nicht überdeckt. ========================================================= */ .zt-app > .container-fluid.zt-shell { max-width: none; width: 100%; padding: 10px; margin: 0; } .zt-app .container, .zt-app .container-fluid, .zt-app .sticky-top { position: static !important; left: auto !important; top: auto !important; transform: none !important; width: auto; max-width: none; } .zt-app .zt-layout { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(300px, 340px); gap: 8px; align-items: start; min-height: calc(100vh - 20px); } .zt-app .zt-sidebar { position: sticky; top: 10px; height: calc(100vh - 20px); overflow: hidden; z-index: 2; } .zt-app .zt-sidebar-scroll { height: 100%; overflow-y: auto; padding-right: 2px; } .zt-app .zt-main { min-width: 0; width: 100%; } .zt-app .zt-main > .container-fluid.border { max-height: calc(100vh - 20px); overflow: auto; padding: 8px; } .zt-app .zt-sidebar-left form > .container-fluid.border, .zt-app .zt-sidebar-right .container-fluid.border { margin-bottom: 8px; } .zt-app .zt-sidebar-right .row { --bs-gutter-x: .4rem; } .zt-app .zt-sidebar-right .col-sm-5 { width: 56%; flex: 0 0 56%; } .zt-app .zt-sidebar-right .col-sm-7 { width: 44%; flex: 0 0 44%; } .zt-app .zt-sidebar-right .col-sm-1, .zt-app .zt-sidebar-right .col-sm-11, .zt-app .zt-sidebar-right .col-sm-12 { width: 100%; flex: 0 0 100%; } .zt-app .zt-sidebar-left .btn, .zt-app .zt-sidebar-right .btn { white-space: nowrap; } @media (max-width: 1350px) { .zt-app .zt-layout { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); } .zt-app .zt-sidebar-right { grid-column: 1 / -1; position: static; height: auto; } .zt-app .zt-sidebar-right .zt-sidebar-scroll { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } @media (max-width: 900px) { .zt-app .zt-layout { display: block; } .zt-app .zt-sidebar, .zt-app .zt-main > .container-fluid.border { position: static; height: auto; max-height: none; overflow: visible; margin-bottom: 10px; } .zt-app .zt-sidebar-scroll, .zt-app .zt-sidebar-right .zt-sidebar-scroll { height: auto; overflow: visible; display: block; } } /* ========================================================= Kompaktere linke Sidebar + stabiler Sticky-Tabellenkopf ========================================================= */ .zt-app .zt-sidebar-left { width: 100%; } .zt-app .zt-sidebar-left form > .container-fluid.border { padding: 6px 7px !important; margin-bottom: 6px !important; } .zt-app .zt-sidebar-left .row[style] { margin-top: 4px !important; margin-bottom: 4px !important; } .zt-app .zt-sidebar-left .row { --bs-gutter-x: .35rem; } .zt-app .zt-sidebar-left .col-sm-12, .zt-app .zt-sidebar-left .col-sm-9, .zt-app .zt-sidebar-left .col-sm-6, .zt-app .zt-sidebar-left .col-sm-5, .zt-app .zt-sidebar-left .col-sm-4, .zt-app .zt-sidebar-left .col-sm-3, .zt-app .zt-sidebar-left .col-sm-2, .zt-app .zt-sidebar-left .col-sm { padding-left: 3px !important; padding-right: 3px !important; } .zt-app .zt-sidebar-left .btn, .zt-app .zt-sidebar-left .btn-sm { padding: .11rem .34rem !important; font-size: .68rem !important; line-height: 1.15 !important; min-height: 22px !important; border-radius: 7px !important; } .zt-app .zt-sidebar-left .form-control, .zt-app .zt-sidebar-left .bootstrap-select > .dropdown-toggle { min-height: 25px !important; height: 25px !important; padding: 2px 6px !important; font-size: 11.5px !important; border-radius: 7px !important; } .zt-app .zt-sidebar-left .form-check-input { width: .78rem !important; height: .78rem !important; margin-top: .18rem !important; } .zt-app .zt-sidebar-left .form-check-label, .zt-app .zt-sidebar-left label, .zt-app .zt-sidebar-left div { font-size: 11.6px; } .zt-app .zt-sidebar-left .dropdown-menu { font-size: 11.5px; } .zt-app .zt-main > .container-fluid.border { height: calc(100vh - 20px); max-height: calc(100vh - 20px); overflow: auto !important; position: relative; } .zt-app .zt-main table.table thead th, .zt-app table.table thead th { position: sticky !important; top: 0 !important; z-index: 30 !important; background: #172033 !important; color: #ffffff !important; box-shadow: 0 2px 0 rgba(15,23,42,.18); } .zt-app .zt-main table.table { border-collapse: separate !important; border-spacing: 0 !important; } .zt-app .zt-main table.table thead { position: sticky; top: 0; z-index: 29; } /* ========================================================= Sticky Header Fix final Der Scroll liegt jetzt explizit auf .zt-table-scroll. Dadurch bleibt der Tabellenkopf beim Scrollen im mittleren Bereich stehen. ========================================================= */ .zt-app .zt-main > .zt-table-card { height: calc(100vh - 20px) !important; max-height: calc(100vh - 20px) !important; overflow: hidden !important; padding: 0 !important; display: flex; flex-direction: column; } .zt-app .zt-table-scroll { height: 100%; max-height: 100%; overflow: auto !important; position: relative; padding: 8px; } .zt-app .zt-time-table { width: 100%; min-width: 980px; border-collapse: separate !important; border-spacing: 0 !important; } .zt-app .zt-time-table thead { position: sticky !important; top: 0 !important; z-index: 100 !important; } .zt-app .zt-time-table thead th { position: sticky !important; top: 0 !important; z-index: 101 !important; background: #172033 !important; color: #fff !important; box-shadow: 0 2px 4px rgba(15, 23, 42, .22) !important; } .zt-app .zt-time-table thead th:first-child { border-top-left-radius: 10px; } .zt-app .zt-time-table thead th:last-child { border-top-right-radius: 10px; } /* ========================================================= Sticky Header Fix robust Ein geklonter Header liegt absolut über dem Scrollbereich. Dadurch bleibt der Tabellenkopf sichtbar, auch wenn Browser/CSS Sticky innerhalb von Tabellen nicht zuverlässig greift. ========================================================= */ .zt-app .zt-table-card { position: relative !important; } .zt-app .zt-table-scroll { position: relative !important; overflow: auto !important; } .zt-app .zt-sticky-header-clone { position: absolute; top: 0; left: 0; right: 0; z-index: 5000; overflow: hidden; pointer-events: none; padding: 8px 8px 0 8px; } .zt-app .zt-sticky-header-clone table { margin: 0; border-collapse: separate !important; border-spacing: 0 !important; table-layout: fixed; min-width: 980px; width: 100%; } .zt-app .zt-sticky-header-clone th { background: #172033 !important; color: #ffffff !important; border-color: #26364f !important; padding: 6px 7px !important; font-weight: 700 !important; white-space: nowrap !important; box-shadow: 0 2px 4px rgba(15, 23, 42, .22) !important; } .zt-app .zt-sticky-header-clone th:first-child { border-top-left-radius: 10px; } .zt-app .zt-sticky-header-clone th:last-child { border-top-right-radius: 10px; } /* ========================================================= Header/Table width alignment fix Header-Klon und echte Tabelle nutzen dieselbe volle Breite des mittleren Tabellencontainers. ========================================================= */ .zt-app .zt-table-card, .zt-app .zt-table-scroll { width: 100% !important; max-width: 100% !important; } .zt-app .zt-table-scroll { padding: 8px !important; } .zt-app .zt-time-table, .zt-app .zt-sticky-header-clone table { width: 100% !important; min-width: 1180px !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; table-layout: fixed !important; } .zt-app .zt-time-table th, .zt-app .zt-time-table td, .zt-app .zt-sticky-header-clone th { overflow: hidden; text-overflow: ellipsis; } .zt-app .zt-sticky-header-clone { left: 0 !important; right: 0 !important; width: 100% !important; padding: 8px 8px 0 8px !important; } /* Oberste Sidebar-Card: kompakter Jahreswechsel ohne Überlaufen */ .zt-app .zt-top-card { padding: 10px !important; } .zt-app .zt-top-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .zt-app .zt-card-title { font-weight: 800; font-size: 13px; color: #111827; min-width: 0; } .zt-app .zt-year-switch { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px; align-items: center; margin-bottom: 7px; } .zt-app .zt-field-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px; align-items: center; margin-top: 6px; } .zt-app .zt-field-label { margin: 0; font-size: 11.5px; font-weight: 700; color: #4b5563 !important; white-space: nowrap; } .zt-app .zt-btn-compact { padding: .16rem .42rem !important; font-size: .70rem !important; line-height: 1.15 !important; border-radius: 8px !important; } .zt-app .zt-top-card .form-control { min-width: 0; width: 100%; } @media (max-width: 900px) { .zt-app .zt-year-switch, .zt-app .zt-field-row { grid-template-columns: 1fr; } } /* ========================================================= Untere Sidebar-Cards: moderner, kompakter, kein Überlaufen ========================================================= */ .zt-app .zt-sidebar-left .zt-side-card { padding: 8px !important; margin-bottom: 7px !important; border-radius: 12px !important; box-shadow: 0 5px 16px rgba(15, 23, 42, .055) !important; } .zt-app .zt-side-card-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; color: #111827; font-size: 12.3px; font-weight: 800; letter-spacing: .01em; } .zt-app .zt-side-card-title::after { content: ""; flex: 1; height: 1px; margin-left: 8px; background: linear-gradient(90deg, #dbe4f0, transparent); } .zt-app .zt-button-grid, .zt-app .zt-mini-grid, .zt-app .zt-date-range-grid, .zt-app .zt-download-grid { display: grid; gap: 6px; width: 100%; } .zt-app .zt-button-grid-2, .zt-app .zt-download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zt-app .zt-mini-grid-3, .zt-app .zt-date-range-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .zt-app .zt-download-grid a:first-child { grid-column: span 2; } .zt-app .zt-card-actions { display: flex; justify-content: flex-end; margin-top: 7px; gap: 5px; } .zt-app .zt-card-actions .btn, .zt-app .zt-download-grid .btn, .zt-app .zt-button-grid .btn { width: 100%; min-width: 0; padding: .15rem .34rem !important; font-size: .68rem !important; } .zt-app .zt-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 7px; } .zt-app .zt-check-pill { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 6px; margin: 0; border: 1px solid #dbe4f0; border-radius: 9px; background: #f8fafc; color: #374151 !important; font-size: 11.3px !important; font-weight: 650; line-height: 1.1; cursor: pointer; } .zt-app .zt-check-pill-wide { grid-column: span 2; } .zt-app .zt-check-pill .form-check-input { margin: 0 !important; flex: 0 0 auto; } .zt-app .zt-card-hint { margin-top: 6px; padding: 5px 6px; border-radius: 8px; background: #f8fafc; color: #6b7280; font-size: 10.8px; line-height: 1.25; } .zt-app .zt-field-row-filter { grid-template-columns: 52px minmax(0, 1fr); margin: 0 0 6px 0; } .zt-app .zt-filter-tags { margin-top: 4px; } .zt-app .zt-filter-tags .bootstrap-select, .zt-app .zt-filter-tags .dropdown-toggle { width: 100% !important; } .zt-app .zt-side-card input.form-control, .zt-app .zt-side-card .bootstrap-select > .dropdown-toggle { width: 100% !important; min-width: 0; } @media (max-width: 900px) { .zt-app .zt-mini-grid-3, .zt-app .zt-date-range-grid { grid-template-columns: 1fr; } } /* Datepicker-Popup: erst durch JS anzeigen, über Cards/Sidebars legen */ .zt-app .datepicker.dropdown-menu { z-index: 3000 !important; } /* Eingabefelder: Platzhalter heller, echte Eingaben fett */ input::placeholder, textarea::placeholder { color: #c8cdd3 !important; opacity: 1; font-weight: 400; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #c8cdd3 !important; font-weight: 400; } input::-moz-placeholder, textarea::-moz-placeholder { color: #c8cdd3 !important; opacity: 1; font-weight: 400; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #c8cdd3 !important; font-weight: 400; } .form-control, .form-select, select, textarea, input[type="text"], input[type="number"], input[type="date"], input[type="time"] { font-weight: 700; } select:invalid, .form-select:invalid { color: #c8cdd3 !important; font-weight: 400; } /* ========================================================= Trackansicht: kompakte Aktionsbuttons passend zur Sidebar ========================================================= */ .zt-app .zt-track-form { margin: 0 !important; padding: 5px 6px !important; border-radius: 10px !important; } .zt-app .zt-track-form .col-sm-2, .zt-app .zt-track-form .col-sm-3, .zt-app .zt-track-form .col-sm-1 { padding-left: 3px !important; padding-right: 3px !important; } .zt-app .zt-track-form .form-label { font-size: 10.5px !important; line-height: 1.05 !important; } .zt-app .zt-track-form .form-control-sm { min-height: 24px !important; height: 24px !important; padding: 1px 6px !important; font-size: 11.4px !important; border-radius: 7px !important; } .zt-app .zt-track-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px !important; align-self: end; padding-bottom: 0 !important; } .zt-app .zt-track-btn { width: 100%; min-height: 23px !important; padding: .12rem .26rem !important; font-size: .66rem !important; line-height: 1.05 !important; border-radius: 7px !important; white-space: nowrap; } .zt-app .zt-track-actions .btn-outline-danger { color: #b4232c; border-color: #f0b8be; background: #fff7f8; } .zt-app .zt-track-actions .btn-outline-danger:hover { color: #fff; background: #dc3545; border-color: #dc3545; } @media (max-width: 1200px) { .zt-app .zt-track-actions { grid-template-columns: 1fr; } } /* Rechte Sidebar etwas breiter und dichter, damit weniger Leerraum neben Tabelle/Rand entsteht */ .zt-app .zt-sidebar-right { min-width: 300px; } .zt-app .zt-sidebar-right .container-fluid.border { width: 100%; } .zt-app .zt-sidebar-right .row { align-items: center; } .zt-app .zt-sidebar-right .col-sm-5, .zt-app .zt-sidebar-right .col-sm-7 { padding-left: 4px !important; padding-right: 4px !important; } /* ------------------------------------------------------------ Fix Tag-Dropdown in der linken Sidebar Grund: bootstrap-select erzeugt einen eigenen Button. Der originale select darf daher NICHT zusätzlich als form-control gestylt werden, sonst wirkt es wie zwei übereinanderliegende Felder. ------------------------------------------------------------ */ #tag2{ display: none !important; } .bootstrap-select.tag-select-control, .bootstrap-select.tag-select-control:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){ width: 100% !important; } .bootstrap-select.tag-select-control > .dropdown-toggle, .zt-selectpicker-btn{ width: 100% !important; height: 28px !important; min-height: 28px !important; padding: 3px 10px !important; border: 1px solid #cfd8e3 !important; border-radius: 8px !important; background: #ffffff !important; color: #1f2937 !important; font-size: 0.78rem !important; font-weight: 700 !important; line-height: 1.2 !important; box-shadow: none !important; display: flex !important; align-items: center !important; } .bootstrap-select.tag-select-control > .dropdown-toggle .filter-option{ display: flex !important; align-items: center !important; height: 100% !important; } .bootstrap-select.tag-select-control > .dropdown-toggle .filter-option-inner-inner{ color: #9ca3af !important; font-weight: 700 !important; } .bootstrap-select.tag-select-control .dropdown-menu{ z-index: 5000 !important; border-radius: 10px !important; font-size: 0.8rem !important; } .bootstrap-select.tag-select-control .dropdown-toggle::after{ margin-left: auto !important; } /* Felder in der Kommen/Gehen-Card */ .zt-punch-fields{ display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px 0; } .zt-punch-fields .zt-field-row{ margin: 0; } /* Track hinzufügen direkt in der aufgeklappten Tagesansicht */ .zt-track-add-row td{ background: #f8fafc; padding: 8px 10px !important; } .zt-track-add-form{ margin: 0; } .zt-track-add-grid{ display: grid; grid-template-columns: 110px 80px 80px 130px minmax(150px, 1fr) auto; gap: 8px; align-items: end; width: 100%; } .zt-track-add-title{ font-size: 0.78rem; font-weight: 800; color: #334155; padding-bottom: 5px; white-space: nowrap; } .zt-track-add-grid label{ display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: 0.68rem; font-weight: 700; color: #64748b; } .zt-track-add-grid .form-control{ height: 28px; min-height: 28px; padding: 3px 7px; font-size: 0.76rem; } .zt-btn-compact{ height: 28px; padding: 3px 10px !important; font-size: 0.74rem !important; line-height: 1.1 !important; border-radius: 7px !important; white-space: nowrap; } @media (max-width: 1200px){ .zt-track-add-grid{ grid-template-columns: 1fr 1fr 1fr; } .zt-track-summary-field, .zt-track-add-title{ grid-column: 1 / -1; } } /* ------------------------------------------------------------ Sichtbare Tabellenzeilen / Tabellenstruktur ------------------------------------------------------------ */ .zt-table-card table, .zt-table-scroll table, table.table{ width: 100%; border-collapse: separate; border-spacing: 0; } .zt-table-card table thead th, .zt-table-scroll table thead th, table.table thead th{ border-bottom: 2px solid #cbd5e1 !important; } .zt-table-card table tbody tr, .zt-table-scroll table tbody tr, table.table tbody tr{ border-bottom: 1px solid #dbe3ee !important; } .zt-table-card table tbody td, .zt-table-card table thead th, .zt-table-scroll table tbody td, .zt-table-scroll table thead th, table.table tbody td, table.table thead th{ border-right: 1px solid #e2e8f0 !important; border-bottom: 1px solid #dbe3ee !important; } .zt-table-card table tbody td:last-child, .zt-table-card table thead th:last-child, .zt-table-scroll table tbody td:last-child, .zt-table-scroll table thead th:last-child, table.table tbody td:last-child, table.table thead th:last-child{ border-right: none !important; } .zt-table-card table tbody tr:hover, .zt-table-scroll table tbody tr:hover, table.table tbody tr:hover{ outline: 1px solid #cbd5e1; outline-offset: -1px; } .zt-track-add-row td, tr.collapse td{ border-top: 1px dashed #cbd5e1 !important; border-bottom: 1px solid #dbe3ee !important; }