/* ========================================================= Curaprox Admin overrides – Bootstrap 3 For admin pages with: Load AFTER bootstrap3 bundle Based on: curaprox-mini-design-system-bootstrap3.html ========================================================= */ :root{ --cp-blue:#003DA5; --cp-blue-hover:#002F7F; --cp-white:#FFFFFF; --cp-softSkyBlue:#8BB8E8; --cp-citrusGreen:#C4D600; --cp-vividYellow:#FCE300; --cp-tangerine:#FF8200; --cp-orchidPink:#F277C6; --cp-cerise:#E31C79; --cp-textGrey:#706F6F; --cp-lightGrey:#EDEDED; --cp-radius-ui:14px; --cp-radius-soft:18px; --cp-radius-pill:999px; --cp-shadow-soft:0 10px 30px rgba(0,0,0,.08); --cp-focus-ring:0 0 0 3px rgba(0,61,165,.25); /* extras */ --cp-chip-bg:rgba(0,61,165,.06); --cp-chip-border:rgba(0,61,165,.18); /* typography helpers */ --cp-font-body:"Info Display Pro","Helvetica Neue",Helvetica,Arial,sans-serif; --cp-font-head:"Futura LT Pro","Helvetica Neue",Helvetica,Arial,sans-serif; } /* ---------- Base ---------- */ .cp-admin{ color:var(--cp-textGrey); background:#fff; font-family:var(--cp-font-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .cp-admin p{ color:var(--cp-textGrey); } .cp-admin small,.cp-admin .small{ color:rgba(112,111,111,.85); } /* Keep Bootstrap contextual text colors when combined with .small */ .cp-admin small.text-muted, .cp-admin .small.text-muted, .cp-admin .text-muted.small{ color:#777 !important; } .cp-admin small.text-primary, .cp-admin .small.text-primary, .cp-admin .text-primary.small{ color:#337ab7 !important; } .cp-admin small.text-success, .cp-admin .small.text-success, .cp-admin .text-success.small{ color:#3c763d !important; } .cp-admin small.text-info, .cp-admin .small.text-info, .cp-admin .text-info.small{ color:#31708f !important; } .cp-admin small.text-warning, .cp-admin .small.text-warning, .cp-admin .text-warning.small{ color:#8a6d3b !important; } .cp-admin small.text-danger, .cp-admin .small.text-danger, .cp-admin .text-danger.small{ color:#a94442 !important; } /* Bootstrap 3 nested dropdowns for compact admin navigation */ .cp-admin .dropdown-submenu{ position:relative; } .cp-admin .dropdown-submenu > .dropdown-menu{ top:0; left:100%; margin-top:-6px; margin-left:-1px; } .cp-admin .dropdown-submenu:hover > .dropdown-menu, .cp-admin .dropdown-submenu:focus-within > .dropdown-menu{ display:block; } .cp-admin .dropdown-submenu > a:after{ display:block; content:" "; float:right; width:0; height:0; border-color:transparent; border-style:solid; border-width:5px 0 5px 5px; border-left-color:#ccc; margin-top:5px; margin-right:-10px; } .cp-admin .dropdown-submenu:hover > a:after, .cp-admin .dropdown-submenu:focus-within > a:after{ border-left-color:#fff; } @media (max-width: 767px){ .cp-admin .dropdown-submenu > .dropdown-menu{ position:static; float:none; margin:0; padding-left:15px; box-shadow:none; } .cp-admin .dropdown-submenu > a:after{ display:none; } } /* Curaprox brand labels (Bootstrap 3 .label) */ .cp-admin .label{ border-radius:var(--cp-radius-ui); font-family:var(--cp-font-head); text-transform:uppercase; letter-spacing:.02em; font-weight:700; padding:.3em .7em .35em; } .cp-admin .label-default{ background:var(--cp-lightGrey); color:var(--cp-textGrey); } .cp-admin .label-primary{ background:var(--cp-blue); color:#fff; } .cp-admin .label-success{ background:var(--cp-citrusGreen); color:#2b2b2b; } .cp-admin .label-info{ background:var(--cp-softSkyBlue); color:#0f2a4a; } .cp-admin .label-warning{ background:var(--cp-vividYellow); color:#2b2b2b; } .cp-admin .label-danger{ background:var(--cp-cerise); color:#fff; } .cp-admin a{ color:var(--cp-blue); text-decoration:none; } .cp-admin a:hover, .cp-admin a:focus{ color:var(--cp-blue-hover); text-decoration:underline; } /* Headings */ .cp-admin h1,.cp-admin h2,.cp-admin h3, .cp-admin .h1,.cp-admin .h2,.cp-admin .h3{ font-family:var(--cp-font-head); text-transform:uppercase; letter-spacing:.02em; color:var(--cp-blue); } .cp-admin h1{ margin:10px 0 20px; } /* Layout wrappers */ .cp-admin .twb-template-cotainer{ padding-bottom:40px; } .cp-admin .twb-template{ padding-top:10px; } /* ========================================================= DESIGN SYSTEM helpers (Bootstrap 3 friendly) - CTA: btn-cp-primary / secondary / promo - Alerts: alert-cp-info / success / warning / error - Cards: panel cp-panel ========================================================= */ /* Buttons (design-system classes, can be used anywhere) */ .cp-admin .btn-cp-primary{ background:var(--cp-blue) !important; border-color:var(--cp-blue) !important; color:#fff !important; border-radius:var(--cp-radius-pill) !important; font-weight:900; letter-spacing:.02em; } .cp-admin .btn-cp-primary:hover, .cp-admin .btn-cp-primary:focus{ background:var(--cp-blue-hover) !important; border-color:var(--cp-blue-hover) !important; color:#fff !important; text-decoration:none; } .cp-admin .btn-cp-secondary{ background:#fff !important; border-color:var(--cp-blue) !important; color:var(--cp-blue) !important; border-radius:var(--cp-radius-pill) !important; font-weight:900; letter-spacing:.02em; } .cp-admin .btn-cp-secondary:hover, .cp-admin .btn-cp-secondary:focus{ background:rgba(0,61,165,.06) !important; color:var(--cp-blue-hover) !important; border-color:var(--cp-blue-hover) !important; text-decoration:none; } .cp-admin .btn-cp-promo{ background:var(--cp-tangerine) !important; border-color:var(--cp-tangerine) !important; color:#2b2b2b !important; border-radius:var(--cp-radius-pill) !important; font-weight:900; letter-spacing:.02em; } .cp-admin .btn-cp-promo:hover, .cp-admin .btn-cp-promo:focus{ filter:brightness(.95); text-decoration:none; } /* Alerts (design-system classes) */ .cp-admin .alert{ border-radius:var(--cp-radius-ui); } .cp-admin .alert-cp-info{ background:rgba(139,184,232,.25); color:#0f2a4a; border:0; box-shadow:var(--cp-shadow-soft); } .cp-admin .alert-cp-success{ background:rgba(196,214,0,.22); color:#2b2b2b; border:0; box-shadow:var(--cp-shadow-soft); } .cp-admin .alert-cp-warning{ background:rgba(252,227,0,.25); color:#2b2b2b; border:0; box-shadow:var(--cp-shadow-soft); } .cp-admin .alert-cp-error{ background:rgba(227,28,121,.12); color:#7c0d42; border:0; box-shadow:var(--cp-shadow-soft); } /* Panels as cards */ .cp-admin .panel, .cp-admin .panel.cp-card{ border:1px solid var(--cp-lightGrey); border-radius:var(--cp-radius-soft); box-shadow:var(--cp-shadow-soft); overflow:hidden; } .cp-admin .panel > .panel-heading, .cp-admin .panel.cp-card > .panel-heading{ background:rgba(0,61,165,.06); border-color:var(--cp-lightGrey); color:var(--cp-blue); font-family:var(--cp-font-head); text-transform:uppercase; letter-spacing:.02em; } .cp-admin .panel > .panel-body, .cp-admin .panel.cp-card > .panel-body{ color:var(--cp-textGrey); } .cp-admin .panel > .panel-footer, .cp-admin .panel.cp-card > .panel-footer{ background:#fff; border-top:1px solid var(--cp-lightGrey); } /* ========================================================= NAVBAR – HARD OVERRIDE (CURAPROX BLUE) ========================================================= */ .cp-admin nav.navbar.navbar-inverse, .cp-admin .navbar.navbar-inverse, .cp-admin .navbar.navbar-inverse .container, .cp-admin .navbar.navbar-inverse .container-fluid, .cp-admin .navbar.navbar-inverse .navbar-header, .cp-admin .navbar.navbar-inverse .navbar-collapse{ background-color: var(--cp-blue) !important; background-image: none !important; border-color: var(--cp-blue) !important; box-shadow: var(--cp-shadow-soft); } /* brand */ .cp-admin .navbar.navbar-inverse .navbar-brand{ color:#fff !important; } /* top-level links */ .cp-admin .navbar.navbar-inverse .navbar-nav > li > a, .cp-admin .navbar.navbar-inverse .navbar-text{ color: rgba(255,255,255,.92) !important; } .cp-admin .navbar.navbar-inverse .navbar-nav > li > a:hover, .cp-admin .navbar.navbar-inverse .navbar-nav > li > a:focus{ color:#fff !important; background: rgba(255,255,255,.12) !important; text-decoration:none; } /* active/open */ .cp-admin .navbar.navbar-inverse .navbar-nav > .active > a, .cp-admin .navbar.navbar-inverse .navbar-nav > .active > a:hover, .cp-admin .navbar.navbar-inverse .navbar-nav > .active > a:focus, .cp-admin .navbar.navbar-inverse .navbar-nav > .open > a, .cp-admin .navbar.navbar-inverse .navbar-nav > .open > a:hover, .cp-admin .navbar.navbar-inverse .navbar-nav > .open > a:focus{ color:#fff !important; background: rgba(255,255,255,.16) !important; } /* caret + icons */ .cp-admin .navbar.navbar-inverse .navbar-nav > li > a .caret{ border-top-color: rgba(255,255,255,.92) !important; border-bottom-color: rgba(255,255,255,.92) !important; } /* top-level icon color (so it never ends white-on-white due to inherited styles) */ .cp-admin .navbar.navbar-inverse .navbar-nav > li > a i[class^="fa-"], .cp-admin .navbar.navbar-inverse .navbar-nav > li > a i[class*=" fa-"]{ color: rgba(255,255,255,.92) !important; } /* mobile toggle */ .cp-admin .navbar.navbar-inverse .navbar-toggle{ border-color: rgba(255,255,255,.35) !important; } .cp-admin .navbar.navbar-inverse .navbar-toggle:hover, .cp-admin .navbar.navbar-inverse .navbar-toggle:focus{ background: rgba(255,255,255,.12) !important; } .cp-admin .navbar.navbar-inverse .navbar-toggle .icon-bar{ background-color:#fff !important; } /* dropdown menu stays white */ .cp-admin .navbar.navbar-inverse .dropdown-menu{ background:#fff !important; border:1px solid var(--cp-lightGrey) !important; border-radius: var(--cp-radius-ui); box-shadow: var(--cp-shadow-soft); } .cp-admin .navbar.navbar-inverse .dropdown-menu > li > a{ color: var(--cp-textGrey) !important; } .cp-admin .navbar.navbar-inverse .dropdown-menu > li > a:hover, .cp-admin .navbar.navbar-inverse .dropdown-menu > li > a:focus{ background: rgba(0,61,165,.08) !important; color: var(--cp-blue) !important; } .cp-admin .navbar.navbar-inverse .dropdown-menu i{ color: var(--cp-blue) !important; } /* ---------- Navbar height + vertical align (Bootstrap 3) ---------- */ .cp-admin .navbar.navbar-inverse{ min-height:64px; } .cp-admin .navbar.navbar-inverse .navbar-brand{ height:64px; padding-top:10px; padding-bottom:10px; line-height:44px; display:flex; align-items:center; } /* default logo sizing */ .cp-admin .navbar.navbar-inverse .navbar-brand img{ height:38px; width:auto; display:block; } @media (min-width:768px){ .cp-admin .navbar.navbar-inverse .navbar-nav > li > a{ padding-top:22px; padding-bottom:22px; line-height:20px; } } @media (min-width:992px){ .cp-admin .navbar.navbar-inverse .container{ width:auto; max-width:none; padding-left:18px; padding-right:18px; } .cp-admin .navbar.navbar-inverse .navbar-brand{ max-width:340px; padding-left:12px; padding-right:12px; overflow:hidden; } .cp-admin .navbar.navbar-inverse .navbar-brand img{ max-width:none; } .cp-admin .navbar.navbar-inverse .navbar-nav > li > a{ padding-left:10px; padding-right:10px; white-space:nowrap; } .cp-admin .navbar.navbar-inverse .navbar-right > li > a{ max-width:240px; overflow:hidden; text-overflow:ellipsis; } } @media (min-width:1200px){ .cp-admin .navbar.navbar-inverse .navbar-brand{ max-width:360px; } .cp-admin .navbar.navbar-inverse .navbar-nav > li > a{ padding-left:12px; padding-right:12px; } } .cp-admin .navbar.navbar-inverse .navbar-toggle{ margin-top:15px; margin-bottom:15px; } @media (max-width:767px){ .cp-admin .navbar.navbar-inverse .navbar-collapse{ padding-top:8px; padding-bottom:8px; } .cp-admin .navbar.navbar-inverse .navbar-nav > li > a{ padding-top:12px; padding-bottom:12px; } } /* ---------- Buttons (bootstrap ones) ---------- */ .cp-admin .btn{ border-radius:var(--cp-radius-ui); font-weight:700; letter-spacing:.02em; transition:all .12s ease-in-out; } .cp-admin .btn:focus, .cp-admin .btn:active:focus, .cp-admin .btn.active:focus{ outline:none; box-shadow:var(--cp-focus-ring); } .cp-admin .btn-primary{ background:var(--cp-blue); border-color:var(--cp-blue); color:#fff; border-radius:var(--cp-radius-pill); font-weight:900; } .cp-admin .btn-primary:hover, .cp-admin .btn-primary:focus{ background:var(--cp-blue-hover); border-color:var(--cp-blue-hover); color:var(--cp-white); } .cp-admin .btn-default{ background:#fff; border-color:var(--cp-blue); color:var(--cp-blue); border-radius:var(--cp-radius-pill); font-weight:900; } .cp-admin .btn-default:hover, .cp-admin .btn-default:focus{ background:rgba(0,61,165,.06); border-color:var(--cp-blue-hover); color:var(--cp-blue-hover); } .cp-admin .btn-success{ background:var(--cp-citrusGreen); border-color:var(--cp-citrusGreen); color:#333; } .cp-admin .btn-info{ background:var(--cp-softSkyBlue); border-color:var(--cp-softSkyBlue); color:#0f2a4a; } .cp-admin .btn-warning{ background:var(--cp-vividYellow); border-color:var(--cp-vividYellow); color:#333; } .cp-admin .btn-danger{ background:var(--cp-cerise); border-color:var(--cp-cerise); color:#fff; } .cp-admin .btn-success:hover,.cp-admin .btn-success:focus, .cp-admin .btn-info:hover,.cp-admin .btn-info:focus, .cp-admin .btn-warning:hover,.cp-admin .btn-warning:focus, .cp-admin .btn-danger:hover,.cp-admin .btn-danger:focus{ filter:brightness(.95); } .cp-admin .btn-danger:hover,.cp-admin .btn-danger:focus{ color:var(--cp-white); } /* Big top CTA buttons (grid pages) */ .cp-admin .twb-template > .text-center .btn.btn-lg.btn-block{ border-radius:var(--cp-radius-soft); box-shadow:var(--cp-shadow-soft); font-weight:900; letter-spacing:.02em; } .cp-admin .twb-template > .text-center .btn.btn-lg.btn-block i{ opacity:.85; } /* ---------- Forms ---------- */ .cp-admin .form-control{ border-radius:var(--cp-radius-ui); border:1px solid var(--cp-lightGrey); box-shadow:none; color:var(--cp-textGrey); } .cp-admin .form-control:focus{ border-color:var(--cp-blue); box-shadow:var(--cp-focus-ring); outline:none; } .cp-admin .form-control[disabled], .cp-admin .form-control[readonly], .cp-admin fieldset[disabled] .form-control{ background:var(--cp-lightGrey); opacity:1; } /* Horizontal form label alignment */ .cp-admin .control-label{ color:#3a3a3a; font-weight:600; padding-top:0px; } .cp-admin label.required:after{ content:" *"; color:var(--cp-cerise); font-weight:700; } .cp-admin .form-group{ margin-bottom:14px; } /* Validation states */ .cp-admin .has-error .form-control{ border-color:var(--cp-cerise); } .cp-admin .has-error .form-control:focus{ box-shadow:0 0 0 3px rgba(227,28,121,.20); } .cp-admin .has-success .form-control{ border-color:var(--cp-citrusGreen); } .cp-admin .has-success .form-control:focus{ box-shadow:0 0 0 3px rgba(196,214,0,.25); } /* Form "card" look */ .cp-admin form.form-horizontal{ background:#fff; border:1px solid var(--cp-lightGrey); border-radius:var(--cp-radius-soft); box-shadow:var(--cp-shadow-soft); padding: 15px; } .cp-admin .form-horizontal-simple form.form-horizontal{ border:none; box-shadow:none; padding:0; } .cp-admin fieldset{ border:0; padding:0; margin:0 0 12px; } .cp-admin legend{ border:0; width:100%; margin:10px 0 16px; padding:10px 12px; border-radius:var(--cp-radius-ui); background:rgba(0,61,165,.06); color:var(--cp-blue); font-family:var(--cp-font-head); text-transform:uppercase; letter-spacing:.02em; font-size:13px; } /* Checkboxes */ .cp-admin .checkbox label{ font-weight:600; color:#3a3a3a; } .cp-admin .checkbox input[type="checkbox"]{ margin-top:3px; } /* Travel: provided meals by day */ .cp-admin .travel-daily-meals{ display:flex; flex-direction:column; gap:12px; } .cp-admin .travel-daily-meal-row{ display:flex; align-items:center; gap:20px; min-height:70px; padding:12px 16px; border:1px solid rgba(0,61,165,.14); border-left:5px solid var(--cp-blue); border-radius:var(--cp-radius-ui); background:rgba(0,61,165,.025); } .cp-admin .travel-daily-meal-date{ flex:0 0 120px; color:#303030; font-family:var(--cp-font-head); font-size:15px; font-weight:700; line-height:1.3; white-space:nowrap; } .cp-admin .travel-daily-meal-options{ display:flex; flex:1 1 auto; flex-wrap:wrap; gap:9px; } .cp-admin .travel-daily-meal-option{ position:relative; display:inline-flex; flex:0 1 155px; align-items:center; gap:9px; min-height:42px; margin:0; padding:8px 12px; border:1px solid rgba(0,61,165,.20); border-radius:var(--cp-radius-pill); background:#fff; color:#3a3a3a; cursor:pointer; font-weight:600; transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease; user-select:none; } .cp-admin .travel-daily-meal-option:hover{ border-color:var(--cp-blue); background:rgba(0,61,165,.04); } .cp-admin .travel-daily-meal-option.is-selected{ border-color:var(--cp-blue); background:rgba(0,61,165,.10); box-shadow:0 0 0 2px rgba(0,61,165,.08); color:var(--cp-blue); } .cp-admin .travel-daily-meal-option input[type="checkbox"]{ position:absolute; width:1px; height:1px; margin:0; opacity:0; } .cp-admin .travel-daily-meal-check{ position:relative; display:inline-block; flex:0 0 20px; width:20px; height:20px; border:2px solid #9aa4b2; border-radius:5px; background:#fff; } .cp-admin .travel-daily-meal-check:after{ position:absolute; top:1px; left:5px; width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; content:""; opacity:0; transform:rotate(45deg); } .cp-admin .travel-daily-meal-option input[type="checkbox"]:checked + .travel-daily-meal-check{ border-color:var(--cp-blue); background:var(--cp-blue); } .cp-admin .travel-daily-meal-option input[type="checkbox"]:checked + .travel-daily-meal-check:after{ opacity:1; } .cp-admin .travel-daily-meal-option input[type="checkbox"]:focus + .travel-daily-meal-check{ box-shadow:var(--cp-focus-ring); } @media (max-width:767px){ .cp-admin .travel-daily-meal-row{ align-items:stretch; flex-direction:column; gap:10px; } .cp-admin .travel-daily-meal-date{ flex-basis:auto; } .cp-admin .travel-daily-meal-option{ flex:1 1 105px; justify-content:center; } } @media (max-width:479px){ .cp-admin .travel-daily-meal-options{ flex-direction:column; } .cp-admin .travel-daily-meal-option{ flex-basis:auto; justify-content:flex-start; width:100%; } } /* ---------- Alerts / flashes ---------- */ .cp-admin #snippet-flashesControl-flashMessages .alert{ border:0; border-radius:var(--cp-radius-ui); box-shadow:var(--cp-shadow-soft); } .cp-admin #snippet-flashesControl-flashMessages .alert-info{ background:rgba(139,184,232,.25); color:#0f2a4a; } .cp-admin #snippet-flashesControl-flashMessages .alert-success{ background:rgba(196,214,0,.22); color:#2b2b2b; } .cp-admin #snippet-flashesControl-flashMessages .alert-warning{ background:rgba(252,227,0,.25); color:#2b2b2b; } .cp-admin #snippet-flashesControl-flashMessages .alert-danger{ background:rgba(227,28,121,.12); color:#7c0d42; } /* ========================================================= Bootstrap 3 .well as Curaprox admin card ========================================================= */ .cp-admin .well{ background:#fff; border:1px solid rgba(0,61,165,.10); border-top:4px solid var(--cp-blue); border-radius:var(--cp-radius-soft); box-shadow:0 10px 30px rgba(0,61,165,.06); color:var(--cp-textGrey); padding:22px 24px; margin-bottom:22px; } .cp-admin .well.well-sm{ padding:16px 18px; } .cp-admin .well.well-lg{ padding:28px 30px; } .cp-admin .well h1, .cp-admin .well h2, .cp-admin .well h3{ margin-top:0; color:var(--cp-blue); } .cp-admin .well .fa, .cp-admin .well i[class^="fa-"], .cp-admin .well i[class*=" fa-"]{ color:var(--cp-blue); opacity:.85; } .cp-admin .well strong, .cp-admin .well b{ color:#3a3a3a; } .cp-admin .well p{ margin-bottom:8px; } .cp-admin .well p:last-child{ margin-bottom:0; } /* ---------- Tom Select ---------- */ .cp-admin .ts-control, .cp-admin .ts-wrapper.single .ts-control{ border-radius:var(--cp-radius-ui); border:1px solid var(--cp-lightGrey); min-height:40px; box-shadow:none; } .cp-admin .ts-wrapper.focus .ts-control{ border-color:var(--cp-blue); box-shadow:var(--cp-focus-ring); } .cp-admin .ts-dropdown{ border-radius:var(--cp-radius-ui); border-color:var(--cp-lightGrey); box-shadow:var(--cp-shadow-soft); } /* ---------- intl-tel-input ---------- */ .cp-admin .iti__tel-input, .cp-admin .iti input[type="tel"]{ height:40px; border-radius:var(--cp-radius-ui); } /* ========================================================= Ublaboo Datagrid ========================================================= */ .cp-admin .datagrid{ background:#fff; border:1px solid var(--cp-lightGrey); border-radius:var(--cp-radius-soft); box-shadow:var(--cp-shadow-soft); overflow:visible; padding:0; } .cp-admin .datagrid .table{ margin-bottom:0; } .cp-admin .datagrid .table-bordered{ border-color:var(--cp-lightGrey); } .cp-admin .datagrid .table-bordered > thead > tr > th, .cp-admin .datagrid .table-bordered > tbody > tr > td, .cp-admin .datagrid .table-bordered > tfoot > tr > td{ border-color:var(--cp-lightGrey); } /* Toolbar row */ .cp-admin .datagrid .row-group-actions th{ background:#fff; border-bottom:1px solid var(--cp-lightGrey) !important; padding:10px 12px !important; } .cp-admin .datagrid .datagrid-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } /* Chip style exports */ .cp-admin .datagrid .datagrid-exports{ display:flex; gap:8px; flex-wrap:wrap; } .cp-admin .datagrid .datagrid-exports .btn{ background:var(--cp-chip-bg); border:1px solid var(--cp-chip-border); color:var(--cp-blue); border-radius:var(--cp-radius-pill); font-weight:900; padding:4px 10px; line-height:1.4; } .cp-admin .datagrid .datagrid-exports .btn:hover, .cp-admin .datagrid .datagrid-exports .btn:focus{ background:rgba(0,61,165,.10); border-color:rgba(0,61,165,.30); box-shadow:var(--cp-focus-ring); text-decoration:none; } /* gear */ .cp-admin .datagrid .datagrid-settings .btn{ border-radius:var(--cp-radius-ui); border-color:var(--cp-lightGrey); background:#fff; } .cp-admin .datagrid .datagrid-settings .btn:hover, .cp-admin .datagrid .datagrid-settings .btn:focus{ border-color:var(--cp-blue); box-shadow:var(--cp-focus-ring); } /* Header rows */ .cp-admin .datagrid table.table thead th{ vertical-align:middle; position:relative; } .cp-admin .datagrid table.table thead tr:not(.row-group-actions):first-of-type th{ background:rgba(0,61,165,.06); color:var(--cp-blue); font-family:var(--cp-font-head); text-transform:uppercase; letter-spacing:.02em; font-size:12px; padding-top:12px; padding-bottom:12px; } .cp-admin .datagrid table.table thead th a{ color:var(--cp-blue); text-decoration:none; } .cp-admin .datagrid table.table thead th a:hover, .cp-admin .datagrid table.table thead th a:focus{ color:var(--cp-blue-hover); text-decoration:underline; } .cp-admin .datagrid table.table thead th i.fa{ opacity:.75; } /* Column additions */ .cp-admin .datagrid .datagrid-column-header-additions .dropdown-toggle{ color:var(--cp-blue); opacity:.8; } .cp-admin .datagrid .datagrid-column-header-additions .dropdown-toggle:hover{ opacity:1; } /* Filter row */ .cp-admin .datagrid table.table thead tr:last-of-type th{ background:#fff; border-top:1px solid var(--cp-lightGrey); padding-top:10px; padding-bottom:10px; } .cp-admin .datagrid table.table thead tr:last-of-type .form-control{ height:34px; border-radius:var(--cp-radius-ui); border-color:var(--cp-lightGrey); } .cp-admin .datagrid table.table thead tr:last-of-type .form-control:focus{ border-color:var(--cp-blue); box-shadow:var(--cp-focus-ring); } .cp-admin .datagrid table.table thead tr:last-of-type .btn-group-multiselect, .cp-admin .datagrid table.table thead tr:last-of-type .multiselect-native-select{ display:block; width:100%; } .cp-admin .datagrid table.table thead tr:last-of-type .btn-group > .multiselect, .cp-admin .datagrid table.table thead tr:last-of-type .btn-group-multiselect > .multiselect{ width:100%; height:34px; min-height:34px; padding:6px 30px 6px 12px; border:1px solid var(--cp-lightGrey) !important; border-radius:var(--cp-radius-ui) !important; background:#fff !important; color:var(--cp-textGrey) !important; box-shadow:none !important; font-size:13px; font-weight:400; line-height:20px; text-align:left; } .cp-admin .datagrid table.table thead tr:last-of-type .btn-group > .multiselect:hover, .cp-admin .datagrid table.table thead tr:last-of-type .btn-group > .multiselect:focus, .cp-admin .datagrid table.table thead tr:last-of-type .btn-group-multiselect > .multiselect:hover, .cp-admin .datagrid table.table thead tr:last-of-type .btn-group-multiselect > .multiselect:focus{ border-color:#d5d5d5 !important; background:#fff !important; color:var(--cp-textGrey) !important; box-shadow:none !important; outline:none; } .cp-admin .datagrid table.table thead tr:last-of-type .btn-group > .multiselect .caret, .cp-admin .datagrid table.table thead tr:last-of-type .btn-group-multiselect > .multiselect .caret{ right:12px; } .cp-admin .datagrid table.table thead tr:last-of-type .multiselect-container.dropdown-menu{ z-index:3000; min-width:220px; border-color:var(--cp-lightGrey); border-radius:var(--cp-radius-ui); box-shadow:var(--cp-shadow-soft); } /* Body */ .cp-admin .datagrid table.table tbody td{ border-top:1px solid var(--cp-lightGrey); vertical-align:middle; } .cp-admin .datagrid .table-hover > tbody > tr:hover{ background:rgba(237,237,237,.55); } .cp-admin .datagrid .table-striped > tbody > tr:nth-of-type(odd){ background:rgba(237,237,237,.22); } /* Action buttons */ .cp-admin .datagrid .col-action .btn{ border-radius:var(--cp-radius-ui); font-weight:900; } /* Status dropdown */ .cp-admin .datagrid td .dropdown > .btn{ border-radius:var(--cp-radius-pill); font-weight:900; padding-left:12px; padding-right:12px; } .cp-admin .datagrid td .dropdown > .btn:focus{ box-shadow:var(--cp-focus-ring); } /* Bottom bar */ .cp-admin .datagrid tfoot .row-grid-bottom{ background:#fff; border-top:1px solid var(--cp-lightGrey); padding:10px 12px; } .cp-admin .datagrid .col-per-page .form-control{ display:inline-block; width:auto; height:34px; border-radius:var(--cp-radius-ui); border-color:var(--cp-lightGrey); } .cp-admin .datagrid .col-per-page .form-control:focus{ border-color:var(--cp-blue); box-shadow:var(--cp-focus-ring); } .cp-admin .datagrid .datagrid-per-page-submit.btn{ border-radius:var(--cp-radius-ui); margin-left:6px; border-color:var(--cp-blue); color:var(--cp-blue); background:#fff; font-weight:900; } .cp-admin .datagrid .datagrid-per-page-submit.btn:hover, .cp-admin .datagrid .datagrid-per-page-submit.btn:focus{ background:rgba(0,61,165,.06); box-shadow:var(--cp-focus-ring); } /* ========================================================= EXTRA: Sticky header for grid (scroll in .table-responsive) ========================================================= */ .cp-admin .table-responsive{ position:relative; overflow:auto; } .cp-admin .table-responsive .datagrid table.table thead th{ position:sticky; z-index:3; } .cp-admin .table-responsive .datagrid table.table thead tr:not(.row-group-actions):first-of-type th{ top:0; z-index:4; } .cp-admin .table-responsive .datagrid table.table thead tr:last-of-type th{ top:44px; z-index:3; } @supports selector(th:has(.btn-group.open)){ .cp-admin .table-responsive .datagrid table.table thead tr:last-of-type th:has(.btn-group.open), .cp-admin .table-responsive .datagrid table.table thead tr:last-of-type th:has(.btn-group-multiselect.open){ z-index:80; } } /* sticky toolbar */ .cp-admin .table-responsive .datagrid .row-group-actions th{ position:sticky; top:0; z-index:5; } .cp-admin .table-responsive .datagrid .row-group-actions + tr th{ top:52px; } .cp-admin .table-responsive .datagrid .row-group-actions + tr + tr th{ top:96px; } /* ========================================================= EXTRA: Highlight active filters ========================================================= */ @supports selector(th:has(input)){ .cp-admin .datagrid table.table thead tr:last-of-type th:has(input.form-control[value]:not([value=""])), .cp-admin .datagrid table.table thead tr:last-of-type th:has(select.form-control option:checked:not([value=""])) { background: rgba(0,61,165,.04); } } .cp-admin .datagrid table.table thead tr:last-of-type .form-control:focus{ border-color:var(--cp-blue); box-shadow:var(--cp-focus-ring); } /* Optional helper if you add this class server-side when filled */ .cp-admin .datagrid .is-active-filter{ border-color:var(--cp-blue) !important; background: rgba(0,61,165,.03); } /* Datagrid settings dropdown must stay above sticky filter row */ .cp-admin .datagrid .row-group-actions th{ overflow:visible; z-index:50; } .cp-admin .datagrid .datagrid-toolbar, .cp-admin .datagrid .datagrid-settings, .cp-admin .datagrid .column-settings-menu{ position:relative; z-index:60; } .cp-admin .datagrid .datagrid-settings .dropdown-menu, .cp-admin .datagrid .column-settings-menu .dropdown-menu{ right:0; left:auto; min-width:220px; padding:10px 12px; border:1px solid rgba(0,61,165,.12); border-radius:var(--cp-radius-ui); box-shadow:var(--cp-shadow-soft); background:#fff; z-index:2000; } .cp-admin .datagrid .datagrid-settings.open .dropdown-menu, .cp-admin .datagrid .column-settings-menu.open .dropdown-menu{ z-index:2000; } .cp-admin .datagrid .datagrid-settings .dropdown-menu > li > a, .cp-admin .datagrid .column-settings-menu .dropdown-menu > li > a{ display:flex; align-items:center; gap:8px; color:var(--cp-blue); font-weight:600; line-height:1.4; padding:5px 2px; white-space:normal; } .cp-admin .datagrid .datagrid-settings .dropdown-menu > li + li, .cp-admin .datagrid .column-settings-menu .dropdown-menu > li + li{ margin-top:2px; } .cp-admin .datagrid .datagrid-settings .dropdown-menu > li > a:hover, .cp-admin .datagrid .datagrid-settings .dropdown-menu > li > a:focus, .cp-admin .datagrid .column-settings-menu .dropdown-menu > li > a:hover, .cp-admin .datagrid .column-settings-menu .dropdown-menu > li > a:focus{ background:rgba(0,61,165,.06); border-radius:10px; text-decoration:none; } .cp-admin .datagrid .datagrid-settings .dropdown-menu input[type="checkbox"], .cp-admin .datagrid .column-settings-menu .dropdown-menu input[type="checkbox"]{ margin:0; float:none; position:static; flex:0 0 auto; } .cp-admin .datagrid .datagrid-settings .dropdown-menu .divider, .cp-admin .datagrid .column-settings-menu .dropdown-menu .divider{ margin:8px 0; } /* ========================================================= EXTRA: Minor polish ========================================================= */ .cp-admin .datagrid .column-settings-menu .dropdown-toggle{ padding:4px 8px; border-radius: var(--cp-radius-ui); } .cp-admin .datagrid .column-settings-menu .dropdown-toggle:hover, .cp-admin .datagrid .column-settings-menu .dropdown-toggle:focus{ background: rgba(0,61,165,.06); text-decoration:none; } /* ADMIN: dropdown menu text + icons */ .cp-admin .navbar-inverse .dropdown-menu > li > a{ color:#333; } .cp-admin .navbar-inverse .dropdown-menu > li > a:hover, .cp-admin .navbar-inverse .dropdown-menu > li > a:focus{ color:#111; } /* ========================================================= CP ADMIN – mobile navbar fix (Bootstrap 3) + FIX WIDE LOGO - problém: logo PNG obsahuje aj modrý text/tagline, ktorý na cp-blue splýva - CSS nevie selektívne "vymazať" časť PNG, preto to riešime: 1) zmenšením výšky headeru 2) obmedzením šírky brandu + overflow hidden (oreže pravú časť = tagline) ========================================================= */ @media (max-width: 767px){ /* zmenší výšku horného baru */ .cp-admin .navbar{ min-height:54px; } /* lepšie zarovnanie hlavičky */ .cp-admin .navbar-header{ position:relative; min-height:54px; } /* brand: nech nezaberá celý riadok (rezerva pre hamburger) */ .cp-admin .navbar-brand{ height:54px; padding:8px 12px; /* rezerva pre toggle vpravo */ max-width: calc(100% - 76px); overflow:hidden; /* dôležité: oreže pravú časť širokého PNG */ white-space:nowrap; } /* logo: trochu vyššie, ale hlavne obmedz šírku, aby sa "SHOP&TRAINING" odrezalo */ .cp-admin .navbar-brand img{ height:auto !important; width:auto; max-width:260px; /* PNG môže byť široké, toto zmenší lockup */ display:block; } /* hamburger: zarovnaj vertikálne do stredu headeru */ .cp-admin .navbar-toggle{ margin-top:10px; margin-right:12px; margin-bottom:10px; } /* aby sa rozbalené menu správalo “normálne” a malo pozadie */ .cp-admin .navbar-inverse .navbar-collapse{ border-color: rgba(255,255,255,.15); } .cp-admin .navbar-inverse .navbar-nav > li > a{ padding-top:12px; padding-bottom:12px; } /* dropdown v mobile: nech je čitateľný */ .cp-admin .navbar-inverse .open .dropdown-menu > li > a{ color:#333; padding-top:10px; padding-bottom:10px; } .cp-admin .navbar-inverse .open .dropdown-menu > li > a i[class^="fa-"], .cp-admin .navbar-inverse .open .dropdown-menu > li > a i[class*=" fa-"]{ color:inherit; margin-right:.5em; width:1.25em; text-align:center; } } /* ========================================================= PRINT (design-system hint) ========================================================= */ @media print{ .cp-admin .navbar, .cp-admin .navbar *{ display:none !important; } } /* ========================================================= SUMMERNOTE – copywriter friendly admin setup ========================================================= */ .cp-admin .note-editor.note-frame { border: 1px solid var(--cp-lightGrey); border-radius: var(--cp-radius-soft); box-shadow: none; overflow: hidden; background: #fff; } .cp-admin .note-editor .note-toolbar { background: rgba(0, 61, 165, .04); border-bottom: 1px solid var(--cp-lightGrey); padding: 12px 10px 8px; } .cp-admin .note-editor .note-btn { border-radius: 10px; } .cp-admin .note-editor .note-editing-area .note-editable { padding: 18px 20px; min-height: 260px; line-height: 1.65; color: #2b2b2b; } .cp-admin .note-editor .note-editing-area .note-editable h2, .cp-admin .note-editor .note-editing-area .note-editable h3 { text-align: left; } .cp-admin .note-editor .note-editing-area .note-editable p, .cp-admin .note-editor .note-editing-area .note-editable li, .cp-admin .note-editor .note-editing-area .note-editable blockquote { font-size: 15px; } .cp-admin .note-editor .note-editing-area .note-editable img { max-width: 100%; height: auto; } .cp-admin .note-editor .note-editing-area .note-editable img[style*="float: left"] { margin: 0 20px 15px 0; } .cp-admin .note-editor .note-editing-area .note-editable img[style*="float: right"] { margin: 0 0 15px 20px; } .cp-admin .note-editor .note-editing-area .note-editable img.note-image-centered, .cp-admin .note-editor .note-editing-area .note-editable img.note-image-lg, .cp-admin .note-editor .note-editing-area .note-editable img.note-image-md, .cp-admin .note-editor .note-editing-area .note-editable img.note-image-sm { display: block; margin: 0 auto 15px; } .cp-admin .note-editor-meta { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--cp-lightGrey); background: rgba(0, 61, 165, .03); color: var(--cp-textGrey); font-size: 12px; } .cp-admin .note-editor-tip { max-width: 70%; } .cp-admin .note-editor-metrics { white-space: nowrap; font-weight: 700; color: var(--cp-blue); } .cp-admin .note-btn-typography { min-width: 48px; font-weight: 700; } @media (max-width: 767px) { .cp-admin .note-editor-meta { display: block; } .cp-admin .note-editor-tip { max-width: none; margin-bottom: 8px; } .cp-admin .note-editor-metrics { white-space: normal; } } .cp-admin .note-btn-image-tool.note-btn-image-size { min-width: 48px; font-weight: 700; } .cp-admin .note-btn-structure-tool { min-width: 56px; font-weight: 700; } .cp-admin .note-btn-structure-tool.note-btn-structure-label { min-width: 72px; } /* ========================================================= Attendance ========================================================= */ .cp-admin .attendance-calendar { margin-bottom: 30px; } .cp-admin .attendance-calendar-weekdays, .cp-admin .attendance-calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; } .cp-admin .attendance-calendar-weekdays { margin-bottom: 8px; color: var(--cp-blue); font-family: var(--cp-font-head); font-size: 12px; font-weight: 700; text-align: center; text-transform: uppercase; } .cp-admin .attendance-calendar-week { margin-bottom: 14px; } .cp-admin .attendance-calendar-cell-empty { min-height: 1px; } .cp-admin .attendance-day-panel { min-height: 112px; margin-bottom: 0; overflow: hidden; border-color: rgba(0,61,165,.10); } .cp-admin .attendance-day-panel .panel-heading { min-height: 74px; border-bottom-color: rgba(0,61,165,.08); } .cp-admin .attendance-day-panel .panel-body { min-height: 86px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; } .cp-admin .attendance-day-filled { border-left: 5px solid var(--cp-citrusGreen); } .cp-admin .attendance-day-filled .panel-heading { background: rgba(196,214,0,.18); } .cp-admin .attendance-day-missing { border-left: 5px solid var(--cp-tangerine); } .cp-admin .attendance-day-missing .panel-heading { background: rgba(255,130,0,.14); } .cp-admin .attendance-day-free { border-left: 5px solid var(--cp-softSkyBlue); } .cp-admin .attendance-day-free .panel-heading { background: rgba(139,184,232,.16); } .cp-admin .attendance-day-weekday { display: block; margin-top: 2px; color: rgba(112,111,111,.9); font-family: var(--cp-font-body); font-size: 11px; font-weight: 700; text-transform: none; } .cp-admin .attendance-day-state { display: inline-flex; margin: 7px 4px 0 0; padding: 3px 8px; border-radius: var(--cp-radius-pill); font-family: var(--cp-font-head); font-size: 10px; font-weight: 700; line-height: 1.1; text-transform: uppercase; } .cp-admin .attendance-day-state-filled { background: var(--cp-citrusGreen); color: #405000; } .cp-admin .attendance-day-state-missing { background: var(--cp-tangerine); color: #fff; } .cp-admin .attendance-day-state-free { background: rgba(139,184,232,.55); color: var(--cp-blue); } .cp-admin .attendance-day-value { margin: 0 0 10px; color: var(--cp-blue); font-weight: 700; } .cp-admin .attendance-day-value-missing { color: #9a4a00; } .cp-admin .attendance-day-value-empty { color: rgba(112,111,111,.55); font-weight: 400; } .cp-admin .attendance-day-modal-summary { margin: 6px 0 0; } .cp-admin .attendance-day-form-wrap form.form-horizontal { border: 0; box-shadow: none; padding: 0; } .cp-admin .attendance-day-section, .cp-admin .attendance-item-section { margin-bottom: 18px; padding: 16px 16px 4px; border: 1px solid rgba(0,61,165,.12); border-radius: var(--cp-radius-ui); background: #fff; } .cp-admin .attendance-day-section { background: rgba(0,61,165,.03); } .cp-admin .attendance-item-section h5, .cp-admin .attendance-day-section h5 { margin: 0 0 14px; color: var(--cp-blue); font-family: var(--cp-font-head); font-size: 13px; font-weight: 700; text-transform: uppercase; } .cp-admin .attendance-form-actions { margin: 2px 0 14px; } .cp-admin .attendance-form-actions p { margin: 0; } .cp-admin .attendance-filter-form { margin-bottom: 18px; padding: 16px; border: 1px solid rgba(0,61,165,.12); border-radius: var(--cp-radius-ui); background: rgba(0,61,165,.03); } .cp-admin .attendance-filter-fields, .cp-admin .attendance-detail-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .cp-admin .attendance-filter-fields .form-group { min-width: 180px; margin-bottom: 0; } .cp-admin .attendance-filter-fields label { display: block; margin-bottom: 6px; } .cp-admin .attendance-filter-actions, .cp-admin .attendance-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cp-admin .attendance-detail-toolbar { margin-bottom: 18px; padding: 14px 16px; border: 1px solid rgba(0,61,165,.12); border-radius: var(--cp-radius-ui); background: #fff; } .cp-admin .attendance-overview-table { background: #fff; } .cp-admin .attendance-overview-table > thead > tr > th { color: var(--cp-blue); font-family: var(--cp-font-head); text-transform: uppercase; } .cp-admin .attendance-overview-table > tbody > tr > td.attendance-hours-cell { text-align: right; white-space: nowrap; } .cp-admin .attendance-overview-table > tbody > tr > td.attendance-hours-zero { color: #8a8f96; font-weight: 400; } .cp-admin .attendance-overview-table > tbody > tr > td.attendance-hours-filled { box-shadow: inset 0 0 0 1px rgba(0,61,165,.12); background: rgba(139,184,232,.18); color: var(--cp-blue); font-weight: 600; } .cp-admin .attendance-status-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 12px; border: 1px solid transparent; border-radius: var(--cp-radius-pill); font-family: var(--cp-font-head); font-size: 12px; font-weight: 700; line-height: 1.2; text-transform: uppercase; white-space: nowrap; } .cp-admin .attendance-status-draft { border-color: rgba(112,111,111,.28); background: var(--cp-lightGrey); color: var(--cp-textGrey); } .cp-admin .attendance-status-submitted { border-color: rgba(0,61,165,.22); background: rgba(139,184,232,.32); color: var(--cp-blue); } .cp-admin .attendance-status-approved { border-color: rgba(196,214,0,.45); background: rgba(196,214,0,.28); color: #405000; } .cp-admin .attendance-status-reopened { border-color: rgba(255,130,0,.38); background: rgba(255,130,0,.16); color: #9a4a00; } .cp-admin .attendance-comp-time-summary { margin: 18px 0 24px; padding: 14px 16px; border: 1px solid rgba(0,61,165,.12); border-radius: var(--cp-radius-ui); background: #fff; } .cp-admin .attendance-comp-time-summary h2 { margin-top: 0; font-size: 22px; } .cp-admin .attendance-comp-time-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 10px; } .cp-admin .attendance-comp-time-summary-grid > div { padding: 10px; border: 1px solid #e8eef6; border-radius: var(--cp-radius-ui); background: #f9fbfe; } .cp-admin .attendance-comp-time-summary-grid span { display: block; margin-bottom: 4px; color: #666; font-size: 12px; } .cp-admin .attendance-comp-time-summary-grid strong { color: var(--cp-blue); font-size: 18px; } .cp-admin .attendance-type-hours-summary-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .cp-admin .attendance-comp-time-form { margin-top: 12px; } .cp-admin .attendance-comp-time-table input.form-control { min-width: 90px; } @media (max-width: 991px) { .cp-admin .attendance-comp-time-summary-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); } .cp-admin .attendance-calendar-week { display: block; margin-bottom: 0; } .cp-admin .attendance-calendar-cell { float: left; width: 50%; padding: 0 7px 14px; } .cp-admin .attendance-calendar-cell-empty { display: none; } .cp-admin .attendance-calendar-week:before, .cp-admin .attendance-calendar-week:after { content: " "; display: table; } .cp-admin .attendance-calendar-week:after { clear: both; } } @media (max-width: 480px) { .cp-admin .attendance-comp-time-summary-grid { grid-template-columns: 1fr; } .cp-admin .attendance-calendar-cell { float: none; width: auto; padding: 0 0 14px; } } /* * Ublaboo Datagrid - zjednotenie filtrov v hlavičke tabuľky * Oprava dátumového filtra od/do: * - dátumové inputy majú rovnaký vizuálny štýl ako ostatné filtre * - zachová sa inline zobrazenie od - do * - ikona kalendára je súčasťou inputu, nie samostatný hranatý blok */ /* Základné zjednotenie filtrov v datagride */ .datagrid thead .form-control, .datagrid thead .form-control-sm, .datagrid thead .input-sm, .datagrid thead select.form-control, .datagrid thead select.form-control-sm { height: 34px; min-height: 34px; padding: 6px 12px; border: 1px solid #e5e5e5; border-radius: 14px; background-color: #fff; box-shadow: none; font-size: 13px; line-height: 20px; } .datagrid thead .form-control:focus, .datagrid thead .form-control-sm:focus, .datagrid thead .input-sm:focus { border-color: #d5d5d5; box-shadow: none; outline: none; } /* Wrapper dátumového rozsahu */ .datagrid-col-filter-date-range, .datagrid-col-filter-date-range.form-inline { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start; flex-wrap: nowrap !important; gap: 6px; width: auto !important; min-width: 190px; white-space: nowrap; } /* Každý dátumový input s ikonou */ .datagrid-col-filter-date-range .input-group, .datagrid-col-filter-date-range .input-group.input-group-sm { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 34px; margin: 0 !important; } /* Textová časť dátumového inputu */ .datagrid-col-filter-date-range .input-group > .form-control, .datagrid-col-filter-date-range .input-group > input.form-control, .datagrid-col-filter-date-range .input-group > .form-control-sm, .datagrid-col-filter-date-range .input-group > input.form-control-sm, .datagrid-col-filter-date-range .input-group > .input-sm, .datagrid-col-filter-date-range .input-group > input.input-sm { display: block !important; flex: 1 1 auto !important; width: 52px !important; min-width: 0 !important; max-width: none !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 6px 6px; border: 1px solid #e5e5e5 !important; border-right: 0 !important; border-radius: 14px 0 0 14px !important; background-color: #fff !important; box-shadow: none !important; font-size: 13px; line-height: 20px; } /* Wrapper ikony kalendára */ .datagrid-col-filter-date-range .input-group-append { display: flex !important; flex: 0 0 30px !important; width: 30px !important; height: 34px; margin: 0 !important; } /* Ikona kalendára ako pravá časť rovnakého inputu */ .datagrid-col-filter-date-range .input-group-text { display: flex !important; align-items: center; justify-content: center; flex: 0 0 30px !important; width: 30px !important; min-width: 30px !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #e5e5e5 !important; border-left: 0 !important; border-radius: 0 14px 14px 0 !important; background-color: #fff !important; color: #777; line-height: 1; box-shadow: none !important; cursor: pointer; } .datagrid-col-filter-date-range .input-group-text .fa, .datagrid-col-filter-date-range .input-group-text i { font-size: 12px; line-height: 1; } /* Pomlčka medzi od - do */ .datagrid-col-filter-date-range .datagrid-col-filter-datte-range-delimiter { display: inline-flex !important; flex: 0 0 auto !important; align-items: center; justify-content: center; width: auto !important; min-width: 8px; height: 34px; margin: 0 !important; padding: 0 2px !important; border: 0 !important; background: transparent !important; color: #333; font-size: 13px; line-height: 34px; } /* Bootstrap input-group reset iba vo vnútri dátumového filtra */ .datagrid-col-filter-date-range .input-group > .form-control:not(:last-child), .datagrid-col-filter-date-range .input-group > .form-control-sm:not(:last-child), .datagrid-col-filter-date-range .input-group > .input-sm:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .datagrid-col-filter-date-range .input-group-append .input-group-text { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* Zarovnanie v bunkách hlavičky */ .datagrid thead th .datagrid-col-filter-date-range { vertical-align: middle; } /* ========================================================= Manual module ========================================================= */ .cp-admin .manual-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; } .cp-admin .manual-card { display: flex; flex-direction: column; margin-bottom: 0; } .cp-admin .manual-card .panel-body { flex: 1 1 auto; } .cp-admin .manual-detail { max-width: 1100px; } .cp-admin .manual-updated-at { color: rgba(112,111,111,.85); font-size: 13px; } .cp-admin .manual-section { margin-top: 28px; } .cp-admin .manual-content { max-width: 980px; margin-top: 26px; line-height: 1.6; } .cp-admin .manual-workflow-section { margin: 0 0 32px; padding: 0 0 22px; border-bottom: 1px solid rgba(0,61,165,.10); } .cp-admin .manual-workflow-section:last-child { border-bottom: 0; } .cp-admin .manual-content p, .cp-admin .manual-content li { color: #3f3f3f; font-size: 15px; } .cp-admin .manual-content p { max-width: 900px; margin-bottom: 10px; } .cp-admin .manual-content strong { color: #202020; font-weight: 700; } .cp-admin .manual-content h2, .cp-admin .manual-content h3, .cp-admin .manual-content h4 { margin-top: 34px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,61,165,.14); text-align: left; } .cp-admin .manual-content h2 { padding: 14px 16px 12px; border: 0; border-left: 6px solid var(--cp-blue); border-radius: var(--cp-radius-ui); background: rgba(0,61,165,.06); font-size: 22px; } .cp-admin .manual-content h3 { font-size: 18px; } .cp-admin .manual-content h4 { font-size: 15px; } .cp-admin .manual-content .manual-image { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid #e5e5e5; border-radius: 6px; } .cp-admin .manual-content .manual-table { width: 100%; max-width: 100%; } .cp-admin .manual-content .manual-underline { text-decoration: underline; } .cp-admin .manual-content .manual-list { max-width: 900px; margin: 8px 0 18px 16px; padding: 0 0 0 20px; border-left: 3px solid rgba(0,61,165,.22); } .cp-admin .manual-content .manual-list li { margin-bottom: 6px; padding-left: 2px; } .cp-admin .manual-content .manual-list li:last-child { margin-bottom: 0; } .cp-admin .manual-content .manual-toc { max-width: 940px; margin: 0 0 30px; padding: 18px 20px; border: 1px solid rgba(0,61,165,.12); border-left: 6px solid var(--cp-blue); border-radius: var(--cp-radius-ui); background: #f9fbfe; box-shadow: 0 8px 22px rgba(0,61,165,.06); } .cp-admin .manual-content .manual-toc-title { margin-bottom: 12px; color: var(--cp-blue); font-size: 18px; font-weight: 700; } .cp-admin .manual-content .manual-toc-list { column-count: 2; column-gap: 28px; margin: 0; padding-left: 22px; } .cp-admin .manual-content .manual-toc-list li { break-inside: avoid; margin: 0 0 7px; padding-left: 2px; color: var(--cp-blue); font-size: 14px; } .cp-admin .manual-content .manual-toc-link { color: var(--cp-blue); font-weight: 600; text-decoration: none; } .cp-admin .manual-content .manual-toc-link:hover, .cp-admin .manual-content .manual-toc-link:focus { text-decoration: underline; } .cp-admin .manual-content .manual-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0 8px; } .cp-admin .manual-content .manual-contact-card { min-width: 0; padding: 16px 18px 14px; border: 1px solid rgba(0,61,165,.12); border-left: 5px solid var(--cp-blue); border-radius: var(--cp-radius-ui); background: #fff; box-shadow: 0 8px 22px rgba(0,61,165,.06); } .cp-admin .manual-content .manual-contact-name { margin-bottom: 4px; color: var(--cp-blue); line-height: 1.35; } .cp-admin .manual-content .manual-contact-name strong { color: var(--cp-blue); } .cp-admin .manual-content .manual-contact-email { color: var(--cp-blue); font-weight: 600; text-decoration: underline; overflow-wrap: anywhere; } .cp-admin .manual-content .manual-contact-phone { margin-bottom: 10px; color: #202020; font-size: 17px; font-weight: 700; } .cp-admin .manual-content .manual-contact-note { margin-bottom: 6px; color: #555; font-weight: 700; } .cp-admin .manual-content .manual-contact-card .manual-list { margin: 8px 0 0; padding-left: 20px; border-left: 0; } .cp-admin .manual-content .manual-contact-card .manual-list li { font-size: 14px; } .cp-admin .manual-content .manual-important { color: #b5282d; font-weight: 700; } .cp-admin .manual-content p.manual-important { max-width: 940px; padding: 12px 14px; border-left: 5px solid #b5282d; border-radius: var(--cp-radius-ui); background: rgba(181,40,45,.07); } .cp-admin .manual-content .manual-list li.manual-important { padding-left: 6px; } .cp-admin .manual-content .manual-emphasis { color: #202020; font-weight: 700; } .cp-admin .manual-content p.manual-emphasis { max-width: 940px; padding: 12px 14px; border-left: 5px solid rgba(0,61,165,.34); border-radius: var(--cp-radius-ui); background: rgba(0,61,165,.04); } .cp-admin .manual-content .manual-doc-image { max-width: 940px; margin: 18px 0 28px; padding: 12px; border: 1px solid rgba(0,61,165,.12); border-radius: var(--cp-radius-ui); background: #f9fbfe; box-shadow: 0 10px 28px rgba(0,61,165,.08); } @media (max-width: 767px) { .cp-admin .manual-card-grid, .cp-admin .manual-content .manual-contact-grid { grid-template-columns: 1fr; } .cp-admin .manual-content h2 { font-size: 19px; } .cp-admin .manual-content .manual-toc { padding: 15px 16px; } .cp-admin .manual-content .manual-toc-list { column-count: 1; } .cp-admin .manual-content .manual-contact-card { padding: 14px 15px 12px; } } .cp-admin .manual-file-list { margin-top: 18px; } .cp-admin .manual-file-list li { margin-bottom: 10px; } .cp-admin .manual-file-list a { display: inline-flex; align-items: center; gap: 8px; } .cp-admin .manual-screen { margin: 24px 0 34px; } .cp-admin .manual-screen img { border: 1px solid var(--cp-lightGrey); border-radius: var(--cp-radius-ui); box-shadow: 0 12px 32px rgba(0,61,165,.10); } .cp-admin .manual-screen figcaption { margin-top: 10px; color: rgba(112,111,111,.85); font-size: 13px; } .cp-admin .manual-steps { max-width: 900px; padding-left: 24px; } .cp-admin .manual-steps li { margin-bottom: 8px; } .cp-admin .manual-button-word { display: inline-block; padding: 1px 8px; border: 1px solid var(--cp-blue); border-radius: var(--cp-radius-pill); color: var(--cp-blue); font-weight: 700; white-space: nowrap; } .cp-admin .manual-note { max-width: 900px; margin: 20px 0; padding: 16px 18px; border-left: 6px solid var(--cp-citrusGreen); border-radius: var(--cp-radius-ui); background: rgba(0,61,165,.04); } .cp-admin .manual-policy { margin: 20px 0 34px; } .cp-admin .manual-policy-heading { margin: 0 0 14px; padding: 14px 18px; border-left: 6px solid var(--cp-blue); border-radius: var(--cp-radius-ui); background: rgba(0,61,165,.05); color: var(--cp-blue); } .cp-admin .manual-policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; } .cp-admin .manual-policy-grid > div, .cp-admin .manual-policy-note, .cp-admin .manual-policy-important { padding: 15px 17px; border: 1px solid rgba(0,61,165,.12); border-radius: var(--cp-radius-ui); background: rgba(0,61,165,.025); } .cp-admin .manual-policy-grid p, .cp-admin .manual-policy-note, .cp-admin .manual-policy-important, .cp-admin .manual-policy-signature { margin: 0; } .cp-admin .manual-policy-wide { grid-column: 1 / -1; } .cp-admin .manual-policy-note { margin-bottom: 12px; border-left: 6px solid var(--cp-citrusGreen); background: rgba(177,213,0,.10); } .cp-admin .manual-policy-important { margin-bottom: 12px; border-left: 6px solid #b5282d; background: rgba(181,40,45,.07); color: #8c1f23; font-weight: 700; } .cp-admin .manual-policy-signature { color: #202020; font-weight: 700; text-align: right; } .cp-admin .manual-status-grid, .cp-admin .manual-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 30px; } .cp-admin .manual-status-grid > div, .cp-admin .manual-checklist > div { padding: 14px 16px; border: 1px solid rgba(0,61,165,.12); border-radius: var(--cp-radius-ui); background: rgba(0,61,165,.03); } .cp-admin .manual-status-grid strong { display: block; margin-bottom: 4px; color: var(--cp-blue); } @media (max-width: 767px) { .cp-admin .manual-card-grid, .cp-admin .manual-policy-grid, .cp-admin .manual-status-grid, .cp-admin .manual-checklist { grid-template-columns: 1fr; } .cp-admin .manual-policy-wide { grid-column: auto; } }