body { font-family: 'Nimbus Sans',Helvetica,Arial,sans-serif; font-size: 100%; }
form, a { outline: none; }

/* height = real page height for in-page scroll bars */
body:not(.path-admin) #page { display: flex; flex-direction: column; justify-content: space-between; height: 100vh; min-height: 720px; overflow-y: hidden; }  /* #page is outermost container which holds header, main, footer. thus sticky header/footer are controlled here; overflow needed to prevent overscrolling on touch devices */
header.header, footer  { flex-grow: 0; width: 100%; min-width: 1869px; }  /* this way #main-wrapper can grow/shrink as space permits and header/footer stay constant */
header .layout-container { position: relative; max-width: 100vw !important; min-width: 1860px; }  /* this targets header + #main-wrapper; position: rel needed for height control in chrome */
#main-wrapper.layout-container { min-width: 1850px; }
#main-wrapper.layout-container { margin: 10px 10px; flex-grow: 1; position: relative; max-width: 100vw !important; }
body:not(.path-admin) #main-wrapper.layout-container { overflow: hidden; }  /* prevent admin pages from not having a scroll bar */
body:not(.path-admin) #main { position: absolute; height: 100%; width: 100%; display: flex; margin: -5px 3px 0px 3px; padding: unset; }  /* position: abs needed for height control in chrome */
main#content { height: 100%; flex; order: 1; flex-grow: 1; padding: 0px 5px 0px 5px; margin-top: -3px; } /* padding: distance to fly in/out main menu; margin: proper distance between content area and main header; flex-grow: important to fill min-width space */
main#content section { height: 100%; padding: unset; }  /* proper distance between fly-out menu and main section */
main#content section .region-content { height: 100%; display: flex; flex-direction: column; }
.main-content h1 { margin: 5px 0; }

/* header */
#header { height: 70px; background: transparent url(/themes/contrib/bartik_eibpm/images/blue_header_bg.gif) repeat-x scroll left top; }
.header .region-header { height: 70px; padding: 0px 0px 0px 8px; }
#block-bartik-eibpm-branding { height: 70px; padding-left: 8px; margin-top: 0px; }
#block-bartik-eibpm-branding .branding-wrapper { position: absolute; height: 70px; width: 666px; }
#block-bartik-eibpm-branding .row-wrapper { position: absolute; top: 5px; display: flex; height: 58px; }
.eibpm { font-size: 3em; }
.ei { color: #e4e4e4; }
.bpm { color: #f75d5d; }
.separator { margin: -4px 0px 0px 8px; }
.site-branding__text { position: absolute; top: 16px; left: 175px; height: 40px; width: 666px; padding: unset; }
.site-branding__name { height: 21px; line-height: 28px; color: #e4e4e4; font-size: 1.6em; }
.site-branding__slogan { height: 13px; line-height: 16px; margin-top: 6px !important; color: #f75d5d; font-size: 1em; font-weight: bold; font-style: normal !important; }

nav#block-eibpm-useraccountmenu { padding-top: 2px; margin: auto; }
nav#block-eibpm-search { position: absolute; right: 110px; top: 10px; width: 20px; line-height: 26px; height: 20px; border: none; }
nav#block-eibpm-search a { width: 35px; height: 35px; padding: 0px 0px; margin-top: -7px; background-image: url(/themes/contrib/bartik_eibpm/images/icons/search.png); background-size: 25px 25px; background-repeat: no-repeat; background-repeat: no-repeat; background-position: 5px 5px; color: rgb(0,0,0,0); }
nav.menu--account { position: absolute; right: 0px; top: 4px; width: auto !important; border: none !important; }
nav.menu--account ul { text-align: right; }
nav.menu--account a { border: none !important; margin: 2px 10px -2px 0px; padding: 5px 7px 0px 6px !important; }

/* page title, action icons and meta data formatting */
#title-outer-wrapper { width: 100%; }  /* full width for search in righ most position */
#title-inner-wrapper { display: flex; }  /* actions icons in line with title */
.page-title.edit { font-style: italic; }  /* form page title formatting */
hr#node-meta { display: none; border: solid 1px #d0d0d0; margin: 8px 0px 0px 0px; }
.eibpm_meta hr#node-meta { margin-bottom: 10px !important; }  /* this covers tree node detail cases */
.title-unedit { display: none; }  /* initially hide from display to not have 2 icons flash in the ui */

#block-bartik-eibpm-page-title .content { display: flex; flex-direction: column; }
#title-outer-wrapper #title-actions { display: inline-flex; padding-left: 0px; }  /* needs to be 0px for x.1 */
#title-outer-wrapper #title-actions a { border-bottom: none; margin-right: 5px; }
#title-outer-wrapper #title-actions img { position: relative; left: 0px; top: 2px; height: 24px; }
#title-outer-wrapper #title-actions a.title-import img { left: -5px; top: 4px }
#title-outer-wrapper #title-actions a.title-revisions img { left: -5px; top: 3px }
#title-outer-wrapper #title-actions a.title-print img { top: 4px }
#title-outer-wrapper #title-actions a.title-occurences img { left: 1px; top: 4px }

form #edit-title-wrapper .js-form-item { margin-top: -5px !important; }  /* minimize distance to header */

/* accordion */
#block-eibpm-main-menu-block { display: none; }
.layout-sidebar-first .main-content { margin-left: 0 !important; }
#sidebar-first { display: flex; width: 200px; margin: -1px 10px 0px 0px !important; }
#sidebar-first .content { min-width: 200px; }  /* repeated width to prevent word-wrapping in accordion during fly out */
.sidebar .section { width: 100%; padding: 0px 0px 0 !important; }
.ui-accordion a { font-size: 95%; }
li a.ui-accordion-header:hover { filter: brightness(95%) contrast(125%); }
.region-sidebar-first .block { padding: 0px 0px !important; border: none !important; }
.region-sidebar-first .content .menu-item--expanded { list-style: none; }
.region-sidebar-first .content .ui-icon { background-image: none; }
.region-sidebar-first .content .ui-accordion-header { padding: 10px 2px 8px 23px; text-indent: -13px; }  /* left-padding & text-indent & implement hanging indent for overly long section titles like '4. Process, Data, Systems' */
.region-sidebar-first .content .ui-accordion .ui-accordion-content { padding: 12px 10px 4px 34px; text-indent: -24px;  /* left-padding & text-indent & implement hanging indent for overly long section titles like '1.9 Strategische Aktivitäten' */
                                                                     overflow: hidden !important; }  /* prevent tmp scroll bars on menu fly in/out */
.region-sidebar-first .content .ui-accordion-header-icon { display: none; }

.menu_toggle { position: relative; width: 15px; top: -5px; left: -1px; font-size: 1.5em; z-index: 10; color: grey; cursor: pointer; }
.menu_toggle img { height: 18px; }

ul.ui-accordion { padding-left: 0px; }
.region-sidebar-first .content .menu-item { padding-bottom: 5px; }
.region-sidebar-first .ui-accordion-header { background-image: url(/themes/contrib/bartik_eibpm/images/blue_block_bg.gif); background-size: 1px 55px; border-width: 0px !important; background-color: #415A7F !important; }  /* y-size needs to be a high value for coverage of multi-line text like 4... */
.region-sidebar-first a.ui-accordion-header { font-family: "NimbusSans-Bold",Helvetica,Arial,sans-serif; font-size: 100%; color: white !important; letter-spacing: .6px; font-weight: 600; }
.region-sidebar-first .ui-accordion-content { background-color: #f8f8f8; }
.region-sidebar-first .ui-accordion-content a, .region-sidebar-first .ui-accordion-content a.is-active{ color: #3667AB; !important; border-bottom: none; }
.region-sidebar-first .ui-accordion-content a:hover { color: #222222 !important; }

.accordion-open { padding-top: 5px; }  /* dynamically injected class, used to prevent accordion jumping on expand/collapse */

/* theme addition userAdministration button differently in the accordion */
a.user-administration-button { margin-top: 5px !important; filter: hue-rotate(492deg) brightness(120%); }
a.user-administration-button:hover { filter: hue-rotate(492deg) brightness(105%) contrast(135%); }

/* node and form view => '.region-content >' exclude tree views from theming here */
.node__content { font-size: 95%; }
.region-content > article.eibpm-node-view, .region-content > form.eibpm-node-form { max-width: 850px; margin-top: 5px; }  /* standard width for node forms, not applicable to visual models; inline scrolling for forms; margin/padding => scroll bar position */
.region-content > article.eibpm-node-view { margin-top: 1em; max-width: 800px; overflow: scroll; border: 2px solid #dedede; padding: 0px 8px 10px 20px; background-color: white; }  /* standard width for node views, not applicable to visual models */
article.eibpm-node-view .node__content { margin-top: 20px; } /* this way there is a gap between the upper border and the scroll content */
.region-content > form.eibpm-node-form { border: 2px solid #dedede; margin-top: 1em; overflow-y: scroll; background-color: #f8f8f8; padding: 10px 15px 0px 20px; }

article .field--name-field-appendix { margin-top: 25px; }

/* ckeditor areas in node view mode => form mode covered in ckeditor.css */
div.field--name-body p { margin: unset; }
.text-formatted { line-height: 1.65; }
.text-formatted p:empty { line-height: 10px !important; }  /* no br in node view for line breaks as in ckeditor form */
.text-formatted li { margin-top: 5px; margin-left: 10px; }
.text-formatted ol { margin: 0px; padding: 2px 0px 8px 20px; }
.text-formatted ul { margin: 0px; padding: 2px 0px 8px 7px; }
.text-formatted ul p, .text-formatted ol p { margin: 5px 0px 0px 0px; }
.text-formatted .cke_editable hr { color: #dedede; }
/* enhance list style to have e.g. 'a)' instead of 'a.'
   -> this works together with ckeditor/liststyle.js patch that dynamically adds/removes 'eibpm-suffix' as needed
   -> these rules need to be mirrored in eibpm_global.css to have the same effect in view mode
   -> different 8x8 background color needed though */
ol.eibpm-suffix > li:before { content: ')'; xposition: absolute;
     margin-left: -11px; margin-right: 5px; background-image: url('/themes/contrib/bartik_eibpm/images/8x8grey.png'); }
ol.eibpm-suffix > li { padding-left: 2px; }  /* distance adjustment between ')' and li text content */
a.missing-link-target { cursor: not-allowed; color: red; font-weight: bold; border: 2px solid red !important; padding: 0px 5px; }  /* visual clue for a elements with invalid href targets */

/* forms */
.text-summary-wrapper { display: none; }  /* prevents for forms the unused summary field to shortly being displayed */
input.error:focus { outline: none; }  /* prevent outline _and_ red border on input fields if validation failed  */

/* form attachements */
.tabledrag-toggle-weight-wrapper { display: none; }  /* hide 'show row weight' link */
.insert-button-wrapper { display: none; }  /* form: image insert button is hidden first => no visible position switch */
.image-widget .image-preview { display: none; }  /* form: hide image upload thumbnail since it doesn't show on initial node creation anyway  */

.field--widget-image-image thead tr th:nth-child(3), .field--widget-file-generic thead tr th:nth-child(3) { width: 40%; }  /* form: have file and image attachement tables have the same column width  */
.field--widget-image-image thead tr th:nth-child(3), .field--widget-image-image tbody tr td:nth-child(3) { text-align: center; }
.field--widget-file-generic thead tr th:nth-child(3), .field--widget-file-generic tbody tr td:nth-child(3) { text-align: center; }

.js-form-type-managed-file .description { display: none; }  /* hide file configuration details from user */
.field--type-image .handle, .field--type-file .handle { display: none; }  /* hide drag handle details from user */
.image-widget-data { margin: 5px 0px -10px 5px; }  /* position image file name */
.field--type-image td, .field--type-file td { height: 50px; }  /* proper height for actions buttons */
.file--image { background-image: unset; }  /* hide image preview / generic image icon */
.file { padding-left: unset; }  /* proper left padding after hiding .file--image */
span.file { background: unset; }  /* hide mime type icon */
xxspan.file a { margin-left: 20px; }  /* no overlap between mime type icon and link text => view and form */
span.file-size { display: none; }  /* we hide this for images to be consistent with files where it does not exist */
details[data-drupal-selector="edit-field-figures"] th, details[data-drupal-selector="edit-field-appendix"] th { background-color: #ec9b09; padding: 10px 0px 7px 12px; text-align: center; }
details[data-drupal-selector="edit-field-figures"] tbody tr:nth-child(2n) td, details[data-drupal-selector="edit-field-appendix"] tbody tr:nth-child(2n) td { background-color: #fbdeaa !important; }
details[data-drupal-selector="edit-field-figures"] tbody tr:nth-child(2n+1) td, details[data-drupal-selector="edit-field-appendix"] tbody tr:nth-child(2n+1) td { background-color: #ffce76 !important; }
details[data-drupal-selector="edit-field-figures"] tbody td:first-of-type, details[data-drupal-selector="edit-field-appendix"] td:first-of-type { width: 40%; }  /* make space for the 2 action icons to fit next to each other */
summary:focus { outline: none !important; }  /* prevent tab key triggered outline on summary elements */

/* form buttons */
.form-actions { display: flex; justify-content: flex-end; margin-top: 1em 0em; }  /* have form buttons on the right */
.form-actions a, .form-actions input { margin-left: 20px !important; }
.form-actions input { margin-top: unset; margin-bottom: unset; }  /* standard margin for save/cancel buttons increases height for outer div, which leads to higher delete button */
#edit-actions input { margin-right: 0em; }

[data-drupal-selector="edit-actions"] { margin-right: -5px; }  /* button all have right margin of 5px, which gives too much space for the rightmost button, which is corrected here */
.button, .button:focus { border-radius: 3px; margin-right: 5px !important; color: #fff; background-image: none; line-height: 2.2; letter-spacing: 0.15em; font-weight: 700; text-transform: uppercase; border: unset; outline: none; }
.button--primary, input#edit-submit { order: 2; background-color: #e4621c !important; }  /* save button always right-most */
.button--danger, .button--danger:focus { order: 0; background-color: #b33630; }  /* delete button between cancel and save */
.button[data-drupal-selector="edit-field-appendix-0-remove-button"] { background-color: #b33630; }  /* file attachement remove button does not have button--danger class */
.button:hover { color: #fff; background-color: black !important; border-bottom-style: none; }
.button:focus { color: #fff; }
.button.eibpm-cancel { order: 1; background-color: #808080; }  /* cancel button always left-most */
a.deleteReplacement { margin-right: 5px !important; }
input.delete.button { display: none; }  /* since we replace all delete buttons with a own ones we hide the original one per default */

/* form => hide vertical tabs for admin users */
.js-form-type-vertical-tabs { display: none; }

/* pop-up dialog settings, .e.g linkit */
body:not(.path-admin) .ui-dialog:not(.modal-tree-browser):not(.non-global-positioning) { left: 0; min-width: 500px; padding: 0 !important; position: fixed !important; border-radius: 10px !important; border: unset !important; }
.ui-dialog-titlebar { display: flex; justify-content: center; text-align: center; border-top-left-radius: 5px !important; border-top-right-radius: 5px !important; background-color: #3565a1 !important; border-bottom: 1px solid #5a5959 !important; }
.ui-dialog-titlebar img { position: relative; width: 45px; height: 45px; top: 2px; }
.ui-dialog-title, .timer { font-size: 1.5em; color: white; margin-top: 12px !important; }
button.ui-dialog-titlebar-close { display: none; }
.ui-dialog-content { display: none; padding: 0.5em 1em !important; text-align: center; font-size: 1.25em; margin: 20px 10px 15px 10px; }
.ui-dialog-content .bold { font-weight: bold; }
.ui-dialog-content img { align-self: center; height: 32px; width: 32px; padding-left: 5px; padding-right: 25px; }
.ui-dialog-content p { margin-bottom: unset; }
.ui-dialog-buttonpane { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding: 10px 15px 10px 25px !important }  /* e.g. department delete modal warning */
.ui-dialog-buttonset.processed { margin-bottom: 0px !important; }  /* this targets ckeditor modal link dialogs */
.ui-dialog-buttonset { width: 100%; justify-content: space-between; }
.ui-dialog-buttonset button { padding: 5px 15px 3px 15px !important; }
.ui-button { border-radius: 3px !important; margin-right: 0.25em !important; background-image: unset !important; line-height: 2.2 !important; letter-spacing: 0.15em !important; font-weight: 700 !important; border: none !important; color: white !important; }
.ui-dialog-buttonset button:nth-child(1) { float:left; }
.ui-dialog-buttonset button:nth-child(2) { float:right; }
.ui-dialog-buttonset button.right { float:right !important; }  /* simple warning dialog */
.ui-dialog button.cancel, .ui-dialog button.eibpm-cancel { background-color: #808080 !important; }
.ui-dialog button.danger { background-color: #b33630; !important; }
.ui-dialog button:hover { background-color: black !important; }

.ui-widget-overlay { z-index: 10000 !important; }  /* jstree sticky header has z-index of 600; maximized ckeditor has 9995 */
.ui-dialog { z-index: 10001 !important; }

/* global details formatting */
details { background-color: white; margin-bottom: 1.5em !important; }
details summary { margin-right: -1px; height: 22px; padding: 6px 0px 5px 12px !important; border-radius: 4px; color: white; text-shadow: none !important; font-size: 0.9em !important; font-weight: bold; background: url(/themes/contrib/bartik_eibpm/images/blue_block_bg.gif) repeat-x scroll left top; }
details[open] > summary { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }
details.description .details-wrapper { padding: 1.25em 1.5em 0.75em 1.5em; }
details details summary { background: url(/themes/contrib/bartik_eibpm/images/light_blue_block_bg.gif) repeat-x scroll left top; }  /* nested details header are a bit lighter in color */

/* global field and fieldset formatting */
fieldset .form-item { margin: unset; }
fieldset { padding: 0px 0px 0px 0px !important; background-color: white; }

fieldset legend { position: relative; width: 100%; margin-left: -1px; margin-bottom: -15px; padding: 10px 0px 4px 2px; border-top-left-radius: 4px; border-top-right-radius: 4px; background: url(/themes/contrib/bartik_eibpm/images/blue_block_bg.gif) repeat-x scroll left top; }  /* legend positioned within fieldset container */
.fieldset-legend { margin-left: 10px; }
.form-item legend { color: white; font-size: 95% !important; font-weight: bold; }
.fieldset-wrapper { padding: 2em 2em 0.25em 1em; font-size: 100% !important; }

.field--type-entity-reference .field__label { font-size: 100% !important; font-weight: bold; }
.form-composite > .fieldset-wrapper > .description, .form-item .description { font-size: unset; }  /* important to have 'description' font-size correct e.g. for compliance node details view

/* ckeditor link modal dialogs */
.ui-dialog.editor-link-dialog { width: 600px !important; max-width: unset !important; }
.editor-link-dialog .ui-dialog-titlebar { padding: 5px; height: 3.25em; }
.editor-link-dialog .ui-dialog-title { font-size: 1.5em; margin-top: 10px !important; }
.editor-link-dialog #drupal-modal { height: auto; max-height: 200px !important; margin: unset; overflow: hidden; }
.editor-link-dialog #drupal-modal label, .editor-link-dialog #drupal-modal label { display: none; }
.editor-link-dialog .linkit-editor-dialog-form { margin-top: -5px; }
.editor-link-dialog input { font-weight: normal; }
.editor-link-dialog .description { margin-top: 10px; margin-bottom: -15px; cursor: default; }
.editor-link-dialog li.linkit-result--group { display: none; }  /* hide 'content' */
.editor-link-dialog li.linkit-result { text-align: left; }
.editor-link-dialog .linkit-result--title { font-weight: normal; }
.editor-link-dialog .linkit-result--description { display: none; }
.linkit-ui-autocomplete { position: unset; height: 153px; width: 558px !important; }  /* autocomplete result list */
.linkit-ui-autocomplete.ui-widget {font-size: .9em; }
.editor-link-dialog li.linkit-result { padding: 2px 0px !important; font-size: 87.5%; line-height: 1.25em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor-link-dialog button, .editor-link-dialog button { font-size: 0.85em; margin: .25em .4em .25em 0em; line-height: 1.75 !important; }
.ui-dialog.editor-link-dialog .eibpm-cancel { order: unset !important; }
.ui-dialog.editor-link-dialog .ui-dialog-titlebar  { height: 45px !important; }
.ui-menu .linkit-result-line--group.ui-menu-divider { display: none; }  /* 'Content' header for autocomplete result set */
.linkit-result-line-wrapper { display: flex; }
.linkit-result-line--description { display: none; margin: 23px 0px 0px -43px; }  /* we simply hide 'No matching internal content found, link will be used as is.' since this works better with the 2 protocol suggestions */
.linkit-result-line--title { overflow: hidden; text-overflow: ellipsis; }

/* autocomplete: contextual tree search, entity_relation, linkit */
.ui-autocomplete { background-color: #f5f5f5 !important; border-radius: 3px; line-height: 23px; }
.ui-autocomplete .ui-menu-item { font-size: 87.5%; font-weight: bold; color: #3c5c84; }
.ui-autocomplete .ui-menu-item-wrapper { border: unset; padding: 1px 0.4em 1px 0.4em !important; background-color: #a0c5ff; color: #202020; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
li .ui-state-active:not(.ui-slider-handle) { color: #fff !important; font-weight: bold !important; background-color: #7d7d7d !important; border: none !important; margin: 0px !important; }  /* hover style */
input.unmatched { background-color: #fee1e1; }  /* ui indication that entered string can't be matched to server data */

/* better messages */
#better-messages-default.better-messages-overlay { width: 350px !important; background-color: rgba(255, 255, 255, 0); padding: 5px; border-radius: 3px; right: 4px !important; top: -4px !important; box-shadow: none !important; z-index: 50000; }
.better-messages-overlay .messages__wrapper { margin: 0px; padding: 10px 8px 0px 16px; }
.better-messages-content { padding: 0px; margin-bottom: 10px; }
.better-messages-overlay .messages { width: 280px; word-wrap: break-word; margin: 0px 0px 15px 0px; padding: 11px 20px 11px 32px; background-position: 9px 14px; border-radius: 5px; }
.better-messages-footer { border-top: none !important; padding: 0px !important; margin: 0px !important; }
.better-messages-close { color: rgb(0,0,0,0) !important; }
a.better-messages-close { position: absolute; top: 10px; right: 10px; }
.better-messages-close span { background: none !important; }
.better-messages-close span::before { content: '×'; color: #414141; font-size: 1.25em; font-weight: bold; }

/* footer */
footer { background: transparent url(/themes/contrib/bartik_eibpm/images/blue_header_bg.gif) repeat-x scroll left top; }
footer .wrapper { display: flex; flex-direction: column; justify-content: center; height: 50px;}
.copyright { font-size: 0.9em; color: #dedede; text-align: center; margin-bottom: -6px; }
.autosave-throbber { display: none; position: absolute; right: 10px; bottom: -78px; width: 30px; }

/* chosen widget */
.chosen-container-single .chosen-single:not(.chosen-default) span { margin-top: 2px; }  /* while default is y-centered, a selected value must be corrected */
.chosen-drop { border-top: 1px solid #aaa !important; }
.chosen-container .chosen-results { margin: 2px 4px 4px 0 !important; padding-top: 2px; }
.chosen-container .chosen-results li.active-result { padding-top: 10px; }

/* general node printing style -> html2canvs & jspdf in eibpmHelper.js */
#print-clone { background-color: white; }
#print-clone.portrait { width: 1280px; }
#print-clone.landscape { width: 1920px; }
#print-clone-header { display: flex; justify-content: space-between; padding: 15px 40px 0px 25px; }
#print-clone-header .ei { font-size: 1.5em; color: #3b3b3b; }
#print-clone .bpm { font-size: 1.5em; margin-left: -5px; }
#print-clone-header .separator { font-size: 1.5em; margin-top: -2px; }
#print-clone-header .site-branding__name { color: #3b3b3b; font-size: 1.5em; margin-top: -6px; margin-left: -83px; }
#print-clone-header .site-branding__name a { color: #3b3b3b !important; }
#print-clone .content { margin: 0px 50px 0px 50px; }  /* node header spacing */
#print-clone a { border-bottom: none; }
#print-clone .eibpm_meta { margin: 0px 0px 0px 0px; padding-bottom: 5px; color: #3b3b3b; }
#print-clone .cy-png-wrapper { width: 100%; height: calc(100% - 175px); display: flex; justify-content: center; align-items: center; }

/* article-specific node printing rules */
#print-clone > div.field--name-body { width: 92%; padding-left: 4%; padding-top: 20px; }
#print-clone details summary { height: 23px; font-size: 95% !important; }

/* needed to avoid having a mysterious numbered list, also details summary description markers can't be printed */
#print-clone details > summary { list-style: none; }
#print-clone details > summary::-webkit-details-marker { display: none; }

#print-clone details .sub-table { max-height: unset; }  /* prevent printing of scroll bars e.g. for large lists attribute lists in data_concept printing */
#print-clone details table#compliance td { padding: 7px 10px 5px 10px; }

/* slider formatting => e.g. position form */
.slider { height: 18px; margin: 1px 0px 0px 0px; }
.slider .custom-handle { width: 10px; height: 17px; top: -1px; text-align: center; padding-top: 1px; }
.ui-slider-handle.custom-handle, .ui-slider-handle.custom-handle.ui-state-active { color: white; border: 1px solid #c5c5c5; background-color: #f09d32; }
.ui-slider-handle.custom-handle.overflow { background: unset !important; background-color: #ff1800 !important; }
li.slider-wrapper { list-style-type: none; margin-left: 5px; }

/* style css, needs integration to above */
.page-title { font-size: 1.75em; font-weight: bold; line-height: 1.25em; color: #00649f; }

ul.tabs { padding-left: 0px !important; margin-bottom: -1px; }
.tabs ul.primary li a { border-top-left-radius: 2px; border-top-right-radius: 2px; border-color: #ededed; padding: 0.2em 1em !important; }
.tabs ul.primary li.is-active a { border: 1px solid #bbbbbb; border-bottom: 1px solid #fff; }

.filter-wrapper { display: none; } /* hide text format selector in node forms */
.cke_bottom { display: none !important; } /* hide empty bottom area in ckeditor */
.form-type-textarea label { display: none; } /* hide 'body' for text areas on node forms */

/*
   cy-area cases:
   a) macroTrends view, strategicActivities view, qvr => share same minimized settings
      => css class: cy-standard-view
   b) orgChart min view => no metadata in node_details and thus cy needs to be higher
      => css class: cy-orgchart-view
   c) macroTrends form, strategicActivities form => share same minimized settings, differs from a) due to space needed for form action buttons
      => css class: cy-standard-form
   d) macroTrends view/form, strategicActivities view/form, qvr, orgChart => all share same maximized setting (no minmized setting for processes supported)
      => css class: cy-maximized
   e) process view/edit => uses different macro structure and thus mostly can't share with above cases
      => css class: cy-process-maximized
=> merge into other cases!
*/

/* common cy styles */
#graphJSON { display: none; }
#cy { display: none; width: calc(100% - 3px); background-color: white; border: 2px solid #dedede; }  /* initially hide from display; width important for cy.resize() to work; height controlled in explorerView.js and eibpmHelper.js for resize */
#navigator, #navigator-process { display: none; width: 250px; height: 100px; position: absolute; right: 19px; border: 2px solid #ddd; overflow: hidden; background-color: #fafafa; }
#node-details article.cy, #node-details form.cy { overflow: hidden; width: calc(100% - 28px); min-width: unset !important; max-width: unset; }  /* hide scrollbar in cy view => cy class dynamically add/removed on mode switch; cy width should not be restricted as opposed to node view/form */

/* case a) macroTrends min view, strategicActivities min view */
body.cy-standard-view .node__content { height: calc(100% - 70px); }
xxxbody.cy-standard-view:not(.cy-orgchart-view) #cy { height: calc(100% - 85px) !important; margin-bottom: 15px; border-radius: 2px; }
body.cy-standard-view:not(.cy-orgchart-view) #cy { height: calc(100% - 16px) !important; margin-bottom: 15px; border-radius: 2px; }
body.cy-standard-view:not(.cy-maximized):not(.cy-orgchart-view) #navigator:not(.qvr) { bottom: 24px; }

/* case: qvr min view */
body.cy-standard-view #cy.qvr { height: calc(100% - 22px) !important; margin-bottom: 15px; border-radius: 2px; }
body.cy-standard-view:not(.cy-maximized) #navigator.qvr { bottom: 21px; }

/* case b) orgChart min view */
body.cy-orgchart-view .node__content { height: calc(100% - 70px); }
body.cy-orgchart-view article.cy #cy { margin-bottom: 15px; border: 2px solid #dedede; border-radius: 2px; height: calc(100% - 32px) }
body.cy-orgchart-view article.cy.complete-org-chart #cy { height: calc(100% - 8px) !important; }  /* complete orgChart has no meta information in node_details and thus needs to be higher */
body.cy-orgchart-view:not(.cy-maximized) #navigator { bottom: 29px; }

body.cy-process-landscape-view .node__content { height: calc(100% - 70px); }
body.cy-process-landscape-view article.cy.complete-process-landscape #cy { height: calc(100% - 14px) !important; }  /* complete processLandscape has no meta information in node_details and thus needs to be higher */
body.cy-process-landscape-view.cy-maximized article.cy.complete-process-landscape #cy { height: calc(100% - 4px) !important; }  /* height control for maximized process landscape view */
body.cy-process-landscape-view:not(.cy-maximized) #navigator { bottom: 21px; }


/* case c) macroTrends min form, strategicActivities min form */
body.cy-standard-form #cy-form-wrapper { height: calc(100% - 36px); overflow: hidden; display: flex; margin-top: -20px; }  /* height => leave space for form buttons; changed in heigh-calc need to be reflected in adjustCyDimensions() */
body.cy-standard-form #cy { flex-grow: 1; height: calc(100% - 7px) !important; }
body.cy-standard-form:not(.cy-maximized) #navigator { bottom: 75px; }

body.cy-standard-form .js-form-item-extendedtitle label { padding-bottom: 13px; font-size: 1.429em !important; color: #00649f; }

body.cy-standard-form .form-actions { padding: 15px 0px 10px 0px !important; }
body.cy-standard-form a.form-submit.button { margin-right: 1px; }

body.cy-standard-form #cy-form { display: none; position: absolute; width: 285px; top: 69px; right: -300px; border: solid 2px #dedede; background-color: #f8f8f8; z-index: 1000; }
body.cy-standard-form #cy-form .header { padding: 10px 0px 5px 0px; text-align: center; font-weight: bold; color: white; background-image: url(/themes/contrib/bartik_eibpm/images/blue_block_bg.gif); white-space: nowrap; }
body.cy-standard-form #cy-form .cy-form-button-wrapper a.button { width: 77%; }
body.cy-standard-form #cy-form .button { margin: 1em 1em 1em 1em; min-width: 150px; }
body.cy-standard-form #cy-form a#cancel.button { margin-top: 5px !important; }

/* case d) macroTrends max view/form, strategicActivities max view/form, qvr max, orgChart max */
body.cy-maximized #navigator { bottom: 10px; }
body.cy-maximized #block-bartik-eibpm-page-title,
  body.cy-maximized #tree,
  body.cy-maximized #sidebar-first,
  body.cy-maximized .menu_toggle,
  body.cy-maximized .eibpm_meta,
  body.cy-maximized .hoverCanvas { display: none; }
body.cy-maximized #main-wrapper,
  body.cy-maximized #main { margin: unset !important; }
body.cy-maximized .region-content > .js-form-item { height: 100% !important; margin: unset !important; }
body.cy-maximized #node-details { width: 100% !important; border: none; }
body.cy-maximized #details-wrapper { margin: unset; padding-left: unset !important; }
body.cy-maximized #details-wrapper header { padding-left: 12px; }
body.cy-maximized main#content { margin: unset; padding: unset; }
body.cy-maximized article,
  body.cy-maximized form { width: 100% !important; max-width: unset !important; }
body.cy-maximized article { height: calc(100vh - 128px) !important; margin-left: 0px !important; }
body.cy-maximized form { height: calc(100vh - 130px) !important; overflow: hidden !important; padding-top: unset !important; margin: 10px 0px 0px 0px !important; }
body.cy-maximized .node__content,
  body.cy-maximized .form-item-cy-form-element-wrapper { height: calc(100% - 40px) !important; }
body.cy-maximized #cy-form-wrapper { height: 100% !important; }
body.cy-maximized #cy { height: calc(100% - 5px) !important; }

body.cy-maximized .js-form-item-extendedtitle { display: flex; justify-content: space-between; margin: 0px 0px -2px 0px; }
body.cy-maximized .js-form-item-extendedtitle label { margin: 4px 0px -4px 0px; padding: 0px 0px 0px 10px; font-size: 1.429em !important; color: #00649f; }
body.cy-maximized .js-form-item-extendedtitle label hr { display: none; }
body.cy-maximized .js-form-item-extendedtitle .form-actions { margin: 2px 6px 0px 0px; }
body.cy-maximized .js-form-item-extendedtitle .form-actions a { height: 28px; padding: 0px 15px 3px 15px !important; font-style: normal; }

body.cy-maximized #cy-form { display: none; position: absolute; width: 285px; height: calc(100% - 47px); top: 42px; right: -300px; border: solid 2px #dedede; background-color: #f8f8f8; z-index: 1000; }
body.cy-maximized #cy-form .header { padding: 10px 0px 5px 0px; text-align: center; font-weight: bold; color: white; background-image: url(/themes/contrib/bartik_eibpm/images/blue_block_bg.gif); white-space: nowrap; }
body.cy-maximized #cy-form .cy-form-button-wrapper a.button { width: 77%; }
body.cy-maximized #cy-form .button { margin: 1em 1em 1em 1em; min-width: 150px; }
body.cy-maximized #cy-form a#cancel.button { margin-top: 5px !important; }

/* set dialog-specific width */
.ui-dialog[aria-describedby="leaveDirtyProcessModelConfirmationDialog"] { width: 550px !important; padding: 10px 15px 10px 25px !important; }
.ui-dialog[aria-describedby="deleteConfirmationDialog"] { width: 500px !important; padding: 10px 15px 10px 25px !important; }  /* generic dialog for node delete warnings, e.g. mission/values but not used for tree contents */
.ui-dialog[aria-describedby="lostNetworkConnectionDialog"] { width: 550px !important; padding: 10px 15px 10px 25px !important; }

/* scrollbar theming with webkit and ff-specfic approaches => styles are repeated in ckeditor.css */
/*
=> edge scrollbars too thin
#main-wrapper::-webkit-scrollbar { width: 7px; height: 7px; background: white; }
#main-wrapper::-webkit-scrollbar-thumb { background: #dedede; }
#main-wrapper::-webkit-scrollbar-corner { background: white; }
#main-wrapper::-webkit-scrollbar-thumb:hover { background: #b9b9b9; }
article, form:not(.views-exposed-form) { overflow-x: hidden; scrollbar-width: thin; }  => ff only
*/

/* general information data table formatting */
details.generalInformation { display: flex; margin-bottom: 1.5em !important; }
details.generalInformation .details-wrapper { padding: 10px 20px 10px 20px !important; }
table.general-information-table thead th { background-color: #ec9b09; }
table.general-information-table thead th .wrapper { margin: 2px 0px -1px 0px; }
table.general-information-table th, table.general-information-table td { text-align: center; }
table.general-information-table tbody tr:nth-child(2n+1) td { background-color: #fbdeaa; }
table.general-information-table tbody tr:nth-child(2n) td { background-color: #ffce76; }
table.general-information-table td.left { width: 50%; }
table.general-information-table td.right ul { padding-top: 5px; }
table.general-information-table td.right li { list-style-type: none; }
input[data-drupal-selector="edit-generalinformationcontainer"] { padding-right: 20px; }

/* remove thead display and give first row the initial thead colouring */
/* => test to minimize table, rolled back */
/*
table.general-information-table thead th { display: none; }
table.general-information-table tbody tr:nth-child(1) td { background-color: #ec9b09 !important; color: white; font-weight: bold; }
*/

/* needed for owner roles injected into general information containers */
.font-weight-normal { font-weight: normal; }

/* description details with ckeditor */
details[data-drupal-selector="edit-descriptioncontainer"] .node-form, details[data-drupal-selector="edit-descriptioncontainer"] .form-wrapper { margin-bottom: 1.5em; }
details[data-drupal-selector="edit-descriptioncontainer"] [data-drupal-selector="edit-field-appendix"] { margin-bottom: -10px !important; }

/* green background for checkboxes */
/* details.entity-relation input[type="checkbox"]:checked, input.eibpm-checkbox:checked { filter: invert(00%) hue-rotate(230deg) brightness(1.25); } */  /* while elegant this is not working for MS Edge */
details input[type="checkbox"], input.eibpm-checkbox
{
  cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;
  outline: 0; background: white; height: 16px; width: 17px; border-radius: 4px;
}
details input[type="checkbox"]:checked, input.eibpm-checkbox:checked { background: #65c162; }
details input[type="checkbox"]:hover, input.eibpm-checkbox:hover { xfilter: brightness(90%); }
details input[type="checkbox"]:disabled , input.eibpm-checkbox:disabled { background: #eaeaea; pointer-events: none; }
details input[type="checkbox"]:after, input.eibpm-checkbox:after
{
display:block;
  content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
details input[type="checkbox"], input.eibpm-checkbox { filter: brightness(95%); }
details input[type="checkbox"]:checked:after, input.eibpm-checkbox:checked:after { display: block; }
details input[type="checkbox"]:disabled:after, input.eibpm-checkbox:disabled:after { border-color: #7b7b7b; }

img.er-delete, img.data-concept-delete { height: 18px; width: 18px; max-width: unset; cursor: pointer; }

input:focus { outline: none; }  /* without this at least FF has a reddish input outline which resembles error indication, which we shut off here */

select { cursor: pointer; }

.bold { font-weight: bold; }

/* against colourful backgrounds the icon colour may not be well visible, thus we give these icons a small border => compliance, audit finding */
img.circle-border { position: relative; width: 10px; top: 2px; left: 2px; border: 1px solid #444; border-radius: 50%; }

/* node view edit button formatting */
hr.edit-button-separator { margin: 0px 8px 20px 0px; color: #dedede; }  /* needed for article, i.e. non-ajax settings */
.node-view-edit-button-wrapper { display: flex; justify-content: flex-end; margin-right: -4px; }
.section article .node-view-edit-button-wrapper { margin: 0px 3px -15px 0px; }  /* for article context we need some space to the scroll bar */

/* user page theming */
form.user-form #password-policy-status, form.user-form .password-suggestions { display: none !important; }
dd.user-page { display: none; margin: -5px 0px 0px 0px; }

/* revision page theming, borrowed from own changeLog */
table.node-revision-table { width: 100%; }  /* 100% => prerequisite for td ellipsis to work */
table.node-revision-table th { color: #3b3b3b !important; background-color: #e3e3e3 !important; font-size: 1.125em; text-align: center; }
table.node-revision-table tr { line-height: 1.95; }
table.node-revision-table tr:nth-child(even) { background-color: #f3f3f3; }
table.node-revision-table tr:nth-child(odd) { background-color: #fff; }
table.node-revision-table tr td, table.node-revision-table tr th { text-align: center !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 9px !important; }

/* appendix change log */
table.node-revision-table thead th { background-color: #ec9b09 !important; color: white !important; }
table.node-revision-table tbody tr:nth-child(2n) td { background-color: #ffce76; }
table.node-revision-table tbody tr:nth-child(2n+1) td { background-color: #fbdeaa; }
table.node-revision-table nav.pager { margin-top: -5px; }
a { border-bottom: none !important; }
table.node-revision-table revision-log { display: none; }