/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIButton.css

 *

 * PURPOSE:          CSS style definitions for UIButton component

 *

 * Author:           psager

 *

 * Created on:       April 12, 2017

 *

 *****************************************************************************/


.uiButton 

{

  background: #347199;

  border-radius: 3px;

  font-family: Arial;

  color: #ffffff;

  font-size: 16px;

  padding: 8px 16px 8px 16px;

  text-decoration: none;

  cursor: pointer;

  -moz-user-select: none;

  user-select: none; 

  width:60px;

  display: block;

  text-align: center;

  overflow:hidden;

  flex-shrink: 0;

}


.uiButton:hover 

{

  background: #3cb0fd;

  text-decoration: none;

}


/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIForm.css

 *

 * PURPOSE:          CSS style definitions for UIForm component

 *

 * Author:           psager

 *

 * Created on:       April 12, 2017

 *

 *****************************************************************************/


.uiFormContainer

{

  display: block;  

}


.uiForm

{

  display: grid;

  grid-template-columns: 1fr 2fr 2fr;

  grid-auto-rows: auto;

  grid-column-gap: 10px;

  grid-row-gap: 10px;

  justify-content: space-evenly;

  padding: 5px;  

}


.uiFormField

{

  display: contents;

}


.uiFormLabel

{

  display: flex;

  align-items: center;

  justify-content: center;

  color: darkgrey;

  font-family: Arial;

  font-size: 16px;

  user-select: none;

  -moz-user-select: none;

  -webkit-user-select: none;

}


.uiFormInput

{

  display: flex;

  align-items: center;

  justify-content: center;

  color: darkgrey;

  font-family: Arial;

  font-size: 16px;

  user-select: none;

  -moz-user-select: none;

  -webkit-user-select: none;

}


.uiFormInput > .uiButton,

.uiFormInput > input,

.uiFormInput > select

{

  width: 100%;

  padding: 4px 4px 4px 4px;

  margin: 4px 4px 4px 4px;

  border-width: 2px 2px 2px 2px;

  align-self: center;

}

.uiFormInput > input[type='checkbox']

{

  color: red;

  background-color: blueviolet;

  

  align-self: center;

  justify-self: center;

}

.uiFormInput > .uiButton

{

  width: 100px;

  max-width: 150px;

  border-width: 0px 0px 0px 0px;

}

.uiFormInput > textarea

{

  padding: 4px 4px 4px 4px;

  margin: 4px 4px 4px 4px;

  border-width: 2px 2px 2px 2px;

  align-self: center;

}


.uiFormHint

{

  display: flex;

  align-items: center;

  justify-content: center;

  color: darkgreen;

  font-family: Arial;

  font-size: 12px;

  user-select: none;

  padding: 5px;

}

.uiFormError

{

  color: orangered;

}


/* The wrapper for the separator */

.uiFormSeparator {

    grid-column: 1 / span 3; /* Spanned to 3 to cover Label, Input, and Hint columns */

    width: 100%;

    margin: 25px 0 10px 0; /* Increased top margin for better section breathing */

    border-bottom: 1px solid #dcdde1;

    display: flex;

    align-items: center;

}


/* The actual text within the separator */

.uiFormSeparator span {

    font-weight: bold;

    color: #2c3e50; /* Slightly darker for better readability */

    font-size: 0.85em;

    text-transform: uppercase;

    /* If your form container has a background color, change 'white' to match it */

    background-color: #ffffff; 

    padding-right: 15px;

    letter-spacing: 1.2px;

}

/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIFrame.css

 *

 * PURPOSE:          CSS style definitions for UIFrame component

 *

 * Author:           psager

 *

 * Created on:       April 12, 2017

 *

 *****************************************************************************/


div.uiframe

{

    position: absolute;

    top: 0px;

    left: 0px;

    right: 0px;

    bottom: 0px;

    background-color: #e0e0e0;

    border:3px solid #505050;

    margin: 0 auto;

    display:flex;

    flex-direction:column;

    align-items:stretch;

}


div.uiframe-header

{

    border-bottom: 3px solid #505050;

    background-color: #c0c0c0;

    color: #505050;

    text-align:center;

}


div.uiframe-content-pane

{

    width: 100%;

    height: 100%;

    /*align-self: stretch;*/

    background-color: #ffffff;

    color: #0000ff;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    overflow: hidden;

}

/*

div.uiframe-content-pane:last-child

{

    margin-bottom:auto;

}

*/

/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIImageButton.css

 *

 * PURPOSE:          CSS style definitions for UIImageButton component

 *

 * Author:           psager

 *

 * Created on:       April 12, 2017

 *

 *****************************************************************************/


.uiImageButton 

{

  cursor: pointer;

  display:flex;

  

}

.uiImageButton > img

{

  margin: auto;

  align-self: center;

}


.uiImageButton:hover 

{

}


/******************************************************************************

 *

 * Copyright 2021 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UISplitButtonDropdown.css

 *

 * PURPOSE:          CSS style definitions for UISplitButtonDoprdown component

 *

 * Author:           psager

 *

 * Created on:       March 6, 2021

 *

 *****************************************************************************/


.uiSBDropdown

{

  display: block;

}


.uiSBDropdown-button

{

  background-color: #2196F3;

  color: white;

  padding: 16px;

  font-size: 16px;

  border: none;

  outline: none;

  cursor: pointer;

  user-select: none;

  width: 150px;

  height: 50px;

}


.uiSBDropdown-dropdown {

  position: absolute;

  display: inline-block;

}


.uiSBDropdown-caret-button

{

  background-color: #2196F3;

  color: white;

  padding: 16px;

  font-size: 16px;

  border: none;

  border-left:1px solid navy;

  outline: none;

  cursor: pointer;

  user-select: none;

  height: 50px;

}


/* Dropdown Content (Hidden by Default) */

.uiSBDropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 160px;

  z-index: 1;

}


/* Links inside the dropdown */

.uiSBDropdown-content a {

  color: black;

  padding: 4px 16px;

  text-decoration: none;

  display: block;

}


/* Change color of dropdown links on hover */

.uiSBDropdown-content a:hover {background-color: #ddd}


/* Show the dropdown menu on hover */

.uiSBDropdown-dropdown:hover .uiSBDropdown-content {

  display: block;

}


/* Change the background color of the dropdown button when the dropdown content is shown */

.uiSBDropdown-button:hover, .uiSBDropdown-dropdown:hover .uiSBDropdown-button  {

  background-color: #0b7dda;

}

/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UILabel.css

 *

 * PURPOSE:          CSS style definitions for UILabel component

 *

 * Author:           psager

 *

 * Created on:       April 12, 2017

 *

 *****************************************************************************/


div.uilabel

{

    position: relative;

    /*display:inline-block;*/

    width: 200px;

    /*overflow:hidden;*/

    /*white-space: nowrap;*/ 

    text-overflow: ellipsis;

}


/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIMenu.css

 *

 * PURPOSE:          CSS style definitions for UIMenu and UIMenuItem components

 *

 * Author:           psager

 *

 * Created on:       April 12, 2017

 *

 *****************************************************************************/


ul.UIMenu {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background-color: #333;

    min-height: 45px;

}


li.ui-menuitem {

    float: left;

    display: block;

    color: white;

    border-right: 1px solid #bbb;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

    cursor: pointer;

}


li.ui-menuitem:last-child {

    border-right: none;

}


li.ui-menuitem:hover:not(.active) {

    background-color: #111;

}


li.ui-menuitem.active {

    background-color: deepskyblue;

}


.uiMenuDDC {

    display: none;

    position: absolute;

    background-color: #444;

    min-width: 160px;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index: 1;

}


.uiMenuDDC span {

    color: white;

    padding: 12px 16px;

    text-decoration: none;

    display: block;

    text-align: left;

}


.uiMenuDDC span:hover {background-color: #111}


.uiMenuDD:hover .uiMenuDDC {

    display: block;

}


.UIMenu > .uiMenuDD:last-child .uiMenuDDC {

    right:16px;

}


.uiMenuLabel {

    display: flex;

    flex-direction: row;

    align-items: center;

    text-align: center;

}

/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIPOpUpMenu.css

 *

 * PURPOSE:          CSS style definitions for UIPopUpMenu component

 *

 * Author:           psager

 *

 * Created on:       May 14, 2017

 *

 *****************************************************************************/


div.uiPopUpMenu

{

    position: absolute;

    /*top: 0px;

    left: 0px;

    right: 0px;

    bottom: 0px; */

    /*width: 95%;*/

    /*height: 95%;*/

    background-color: grey;

    border:1px solid black;

    margin: 0 auto;

    

    /*

    display:flex;

    flex-direction:column;

    align-items:stretch;

    */

}


div.uiPopUpMenuContentPane

{

    width: auto;

    max-width: 400px;

    height: auto;

    overflow: hidden;

    /*align-self: stretch;*/

    background-color: grey;

    color: black;

    /*

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    */

}


.uiPopUpMenuContentPane ul

{

    list-style-type: none;

    margin: 0;

    padding: 0;

    width: 200px;

    overflow:hidden;

}


li.uiPopUpMenuItem {

    /*float: left; */

    display: block;

    color: black;

    text-align: left;

    padding: 10px 10px;

    text-decoration: none;

    cursor: pointer;

}


li.uiPopUpMenuItem:hover {

    background-color: #aaa;

}

/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIDialog.css

 *

 * PURPOSE:          CSS style definitions for UIDialog component

 *

 * Author:           psager

 *

 * Created on:       May 17, 2017

 *

 *****************************************************************************/


div.uiDialog

{

    position: absolute;

    /*top: 0px;

    left: 0px;

    right: 0px;

    bottom: 0px; */

    /*width: 200px;

    height: 200px; */

    background-color: grey;

    border:1px solid #404040;

    margin: 0 auto;

    

    /*display: inline-block;*/

    

    /*

    display:flex;

    flex-direction:column;

    align-items:stretch;

    */

}


div.uiDialogPanel

{

    /*

    width: 100%;

    height: 100%; */

    /*display: inline-block;*/

    overflow: hidden;

    background-color:lightgrey;

    color: black;

}


/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIOptionDialog.css

 *

 * PURPOSE:          CSS style definitions for UIOptionDialog component

 *

 * Author:           psager

 *

 * Created on:       May 22, 2017

 *

 *****************************************************************************/


div.uiOptionDialog

{

    /*

    position: absolute;

    /*top: 0px;

    left: 0px;

    right: 0px;

    bottom: 0px; */

    /*width: 200px;

    height: 200px; */

    

    background-color: lightgrey;

    border:1px solid grey;

    margin: auto;

    

    border-radius: 5px;

    

    /*display: inline-block;*/

    

    /*

    display:flex;

    flex-direction:column;

    align-items:stretch;

    */

}


div.uiOptionDialogPane

{

    /*margin: 5px; */

    padding:5px;

    overflow: hidden;

    background-color:lightgrey;

    color: black;

    

    display:flex;

    flex-direction:column;

    justify-content:space-around;

    align-items: center;

}

div.uiOptionDialogIcon

{

    margin: 5px;

}

div.uiOptionDialogText

{

    margin: 5px;

}

div.uiOptionDialogButtons

{

    width:80%;

    margin:5px;

    display:flex;

    flex-direction:row;

    justify-content:space-around;

    align-items: center;

}



.uiOptionDialogButton 

{

  margin: 5px;

  background: #888888;

  border-radius: 3px;

  font-family: Arial;

  color: #000000;

  font-size: 16px;

  padding: 8px 16px 8px 16px;

  text-decoration: none;

  cursor: pointer;

  -moz-user-select: none;

  user-select: none; 

  width:60px;

  display: block;

  text-align: center;

  overflow:hidden;

}


.uiOptionDialogButton:hover 

{

  background: #aaaaaa;

  text-decoration: none;

}

/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIPanel.css

 *

 * PURPOSE:          CSS style definitions for UIPanel component

 *

 * Author:           psager

 *

 * Created on:       April 12, 2017

 *

 *****************************************************************************/


div.uipanel

{

    width: 100%;

    height: 100%;

    background-color: #ffffff;

    color: #0000ff;

    text-align:center;   

    display:flex;

    flex-direction:column;

    align-items:stretch; 

    overflow: hidden;

}

/******************************************************************************

 *

 * Copyright 2020 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UITextField.css

 *

 * PURPOSE:          CSS style definitions for UITextField component

 *

 * Author:           psager

 *

 * Created on:       June 15th, 2020

 *

 *****************************************************************************/


.uiTextField > input

{

    position: relative;

    margin: 2px;

    background-color:black;

    color: greenyellow;

    /*display:inline-block;*/

    width: 200px;

    overflow:hidden;

    text-align: left;

    text-overflow: clip;

    white-space: pre;

    cursor:text;

    font-family:monospace;

    font-size: 15px;

}

.uiTextFieldPH > input

{

    color: #5c9900;

}

/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIFancyTextField.css

 *

 * PURPOSE:          CSS style definitions for UIFancyTextField component

 *

 * Author:           psager

 *

 * Created on:       April 12, 2017

 *

 *****************************************************************************/


div.uiFancyTextField

{

    position: relative;

    margin: 2px;

    background-color:black;

    color: greenyellow;

    /*display:inline-block;*/

    width: 200px;

    overflow:hidden;

    text-align: left;

    text-overflow: clip;

    white-space: pre;

    cursor:text;

    font-family:monospace;

    font-size: 15px;

    caret-color: transparent;

}

div.uiFancyTextFieldPH

{

    color: #5c9900;

}


@keyframes cursor_blink {

    /*

    0%   {filter: invert(100%);}

    50%  {filter: invert(0%);  } */

    /* 100% {filter: invert(100%);} */

    0%   {background-color: greenyellow; color:black; }

    50%  {background-color: black; color:greenyellow; }

    /*

    100% {background-color: foreground; color: background;}

    */

}


div.uiFancyTextField > mark

{

    background-color: greenyellow;

    color: black;   

    animation: cursor_blink 1s step-end infinite;

}

/******************************************************************************

 *

 * Copyright 2026 by      Sager Systems GmbH            Hannover, Germany

 *

 * All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UITextEditor.css

 *

 * PURPOSE:          Modern "Paper-style" Editor for Sager Wiki.

 * Matches the professional UIText.css for WYSIWYG consistency.

 *

 * Author:           psager

 *

 *****************************************************************************/


div.uiTextEditor {

    display: flex;

    flex-direction: column; /* Stack toolbar on top of edit pane */

    height: 100%;           /* Or a fixed height like 600px */

    overflow: hidden;       /* Prevent the wrapper itself from scrolling */

    border: 1px solid #d1d5da; /* Optional: defines the editor boundary */

}


.uiTeToolbar {

    flex: 0 0 auto; /* Do not grow, do not shrink */

    /* ... existing styles ... */

}


/* The main editing pane */

div.uiTeEditPane

{

    position: relative;

    padding: 40px;

    margin: 0;

    background-color: #ffffff;

    color: #24292e;

    display: block;

    overflow-y: auto;

    overflow-x: hidden;


    height: 100%;              /* Take up the full height of the parent container */

    max-height: 100%;          /* Ensure it doesn't push past the parent boundaries */

    box-sizing: border-box;    /* Ensures padding doesn't add to the total height */


    text-align: left;

    word-break: break-word;

    cursor: text;

    

    /* Modern System Font Stack */

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    font-size: 16px;

    line-height: 1.6;

    white-space: break-spaces;

    min-height: 500px;

}


/* Placeholder text color */

div.uiTeEditPanePH

{

    color: #a0a0a0;

}


/* Paragraph handling inside the editor */

div.uiTeEditPane > p

{

    background-color: transparent;

    color: #24292e;

    margin-bottom: 16px;

    min-height: 1.6em; /* Ensures empty lines are clickable */

}


/* --- The Blinking Cursor (Dark for Light Theme) --- */

@keyframes texteditor_cursor_blink {

    0%   { background-color: #005a9c; color: white; }

    50%  { background-color: transparent; color: inherit; }

}


div.uiTeEditPane > mark

{

    background-color: #005a9c;

    color: white;   

    animation: texteditor_cursor_blink 1s step-end infinite;

    padding: 1px 0;

}


/* --- Inline Formatting --- */

div.uiTeEditPane span.strong {

    font-weight: 700;

    color: #000;

}

div.uiTeEditPane span.italic {

    font-style: italic;

}

div.uiTeEditPane span.underline {

    text-decoration: underline;

    text-underline-offset: 2px;

}

div.uiTeEditPane span.strikethrough {

    text-decoration: line-through;

}


/* Code Span */

.uiTeEditPane span.code {

    font-family: "Consolas", "Monaco", monospace;

    background-color: #f6f8fa;

    color: #d73a49;

    padding: 2px 4px;

    border-radius: 3px;

    border: 1px solid #eaecef;

    font-size: 0.9em;

}


/* Links */

.uiTeEditPane a {

    cursor: text; /* Makes it clear you are editing, not browsing */

    color: #0645ad;

}


/* Unless it's hovered with the Ctrl key! */

.uiTeEditPane span a:hover {

    text-decoration: underline;

}


.teEditLink {

    color: #0645ad;

    text-decoration: underline;

    cursor: text; /* Ensures the I-beam cursor shows up */

}


/* --- Headers (Professional Wiki Blue) --- */

.uiTeEditPane h1, .uiTeEditPane h2, .uiTeEditPane h3 {

    display: block;

    color: #005a9c;

    background-color: transparent;

    text-align: left;

    margin: 24px 0 16px 0;

    font-weight: 600;

    line-height: 1.25;

}


.uiTeEditPane h1 { font-size: 1.8em; border-bottom: 1px solid #eaecef; padding-bottom: 5px; }

.uiTeEditPane h2 { font-size: 1.5em; border-bottom: 1px solid #eaecef; }

.uiTeEditPane h3 { font-size: 1.25em; }


.uiTeEditPane h1.doc-title {

    display: block;

    font-size: 2.0em;

    font-weight: 700;

    color: #005a9c;

    margin-bottom: 0.5em;

    padding-bottom: 0.2em;

    border-bottom: 2px solid #eaecef;

    line-height: 1.2;

    /* This makes it stand out as the anchor of the page */

}


/* Ensure the editor doesn't allow weird styling inside the title */

.uiTeEditPane h1.doc-title span {

    font-size: inherit;

    font-family: inherit;

    /* Optional: override any inherited green colors here too */

}


/* --- Lists --- */

/*

.uiTeEditPane ul {

    margin: 10px 0 10px 25px;

    padding: 0;

    list-style-type: disc;

}

.uiTeEditPane li {

    color: #24292e;

    margin-bottom: 5px;

}

*/

/* --- Global List Defaults --- */

.uiTeEditPane ul, 

.uiTeEditPane ol {

    margin: 10px 0;

    padding: 0;

    color: #24292e;

}


.uiTeEditPane li {

    margin-bottom: 5px;

    line-height: 1.5;

}


/* --- Bullet Lists (Standard Behavior) --- */

.uiTeEditPane ul {

    list-style-type: disc;

    margin-left: 25px; /* Standard indent for bullets */

}


.uiTeEditPane ul li {

    display: list-item;

}


/* --- Numbered Lists (Gutter Approach) --- */

.uiTeEditPane ol.teNumberedList {

    counter-reset: level0;

    list-style-type: none !important;

    margin-left: 0;

    padding-left: 0;

}


.uiTeEditPane ol.teNumberedList li {

    list-style-type: none !important;

    display: block;

    position: relative;

    /* We create a 3em wide gutter for the number to sit in */

    padding-left: 3em !important; 

    margin-bottom: 5px;

}


/* --- The Number Placement Logic --- */

.uiTeEditPane ol.teNumberedList li::before {

    position: absolute;

    /* Anchor to the left of the LI's internal space */

    left: 0; 

    /* The width of the number container must be less than the LI's padding-left */

    width: 2.5em; 

    text-align: right;

    font-weight: bold;

    color: #0366d6;

    pointer-events: none;

}


/* Level Content Logic (Keep your existing level selectors) */

.uiTeEditPane ol.teNumberedList li[style*="margin-left: 0px"] { counter-increment: level0; counter-reset: level1; }

.uiTeEditPane ol.teNumberedList li[style*="margin-left: 0px"]::before { content: counter(level0) ". "; }


.uiTeEditPane ol.teNumberedList li[style*="margin-left: 25px"],

.uiTeEditPane ol.teNumberedList li[style*="margin-left: 30px"] { counter-increment: level1; counter-reset: level2; }

.uiTeEditPane ol.teNumberedList li[style*="margin-left: 25px"]::before,

.uiTeEditPane ol.teNumberedList li[style*="margin-left: 30px"]::before { 

    content: counter(level1, lower-alpha) ") "; 

    font-weight: normal;

}


.uiTeEditPane ol.teNumberedList li[style*="margin-left: 50px"],

.uiTeEditPane ol.teNumberedList li[style*="margin-left: 60px"] { counter-increment: level2; }

.uiTeEditPane ol.teNumberedList li[style*="margin-left: 50px"]::before,

.uiTeEditPane ol.teNumberedList li[style*="margin-left: 60px"]::before { 

    content: counter(level2, lower-roman) ". "; 

    font-weight: normal;

}


/* Catch-all for Level 3 and deeper: stick with bullets */

.uiTeEditPane ol.teNumberedList li[style*="margin-left: 75px"],

.uiTeEditPane ol.teNumberedList li[style*="margin-left: 100px"] {

    counter-increment: level2; /* Just keep incrementing the last level */

}


.uiTeEditPane ol.teNumberedList li[style*="margin-left: 75px"]::before,

.uiTeEditPane ol.teNumberedList li[style*="margin-left: 100px"]::before {

    content: "• "; /* Or counter(level2, lower-roman) */

    font-weight: bold;

}



/* --- Toolbar Styling (Dark Grey VS Code Style) --- */

.uiTeToolbar {

    display: flex;

    flex-direction: row;

    align-items: center;

    background-color: #f6f8fa; /* Light grey toolbar to contrast with white page */

    padding: 4px 8px;

    height: 36px;

    border-bottom: 1px solid #d1d5da;

    box-sizing: border-box;

    gap: 4px;

}


.teSelect {

    background-color: #ffffff;

    color: #24292e;

    border: 1px solid #d1d5da;

    border-radius: 3px;

    font-size: 12px;

    padding: 2px 4px;

    height: 24px;

    outline: none;

}


.teSeparator {

    width: 1px;

    height: 20px;

    background-color: #d1d5da;

    margin: 0 4px;

}


/* Toolbar Buttons */

.teBtn {

    width: 28px;

    height: 28px;

    background-size: 18px 18px;

    background-repeat: no-repeat;

    background-position: center;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    border: 1px solid transparent;

    border-radius: 3px;

    transition: all 0.1s;

}


.teBtn:hover {

    background-color: #e1e4e8;

    border-color: #d1d5da;

}


.teBtn.active {

    background-color: #71afdc; 

    border-color: #004a80;

    /*filter: invert(1); /* Inverts icon color for dark active state if icons are black */

}


.teBtn[id$=":bold"] {

    font-weight: bold;

}

.teBtn[id$=":italic"] {

    font-style: italic;

}

.teBtn[id$=":underline"] {

    text-decoration: underline;

}

.teBtn[id$=":strikethrough"] {

    text-decoration:line-through;

}

.teBtn[id$=":code"] {

    font-family: monospace;

    font-weight: bold;

    font-size: 11px;

}

.teBtn[id$=":clear"] {

    font-family: serif;

    font-weight: normal;

    color: #ff4444; /* Give it a subtle red tint to show it's "destructive" */

}


/* Ensure Alignment icons are visible */

.teBtn[id$=":alignleft"]    { background-image: url('img/Alignleft.png'); }

.teBtn[id$=":aligncenter"]  { background-image: url('img/Aligncenter.png'); }

.teBtn[id$=":alignright"]   { background-image: url('img/Alignright.png'); }

.teBtn[id$=":alignjustify"] { background-image: url('img/Justify.png'); }


/* Indent icons */

.teBtn[id$=":outdent"] { background-image: url('icons/16/outdent-16.png'); }

.teBtn[id$=":indent"] { background-image: url('icons/16/indent-16.png'); }


/* Insert link icon */

.teBtn[id$=":link"] { background-image: url('icons/16/Link.png'); }/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UISplitPane.css

 *

 * PURPOSE:          CSS style definitions for UISplitPane component

 *

 * Author:           psager

 *

 * Created on:       April 12, 2017

 *

 *****************************************************************************/


.UISplitPaneH

{

  display: flex;

  flex-direction: row;

  height: 100%;

  width: 100%;

  border: 1px solid silver;

  overflow: hidden;

  /* avoid browser level touch actions */

  xtouch-action: none;

}


.UISplitPaneV

{

  display: flex;

  flex-direction: column;

  height: 100%;

  border: 1px solid silver;

  overflow: hidden;

}


.UISplitPaneLeft 

{

  flex: 0 0 auto;

  /* only manually resize */

  /* padding: 10px; */

  width: 50%;             /* only initial width */

  text-align: left;

  min-height: 200px;

  min-width: 150px;

  white-space: nowrap;

  background: #838383;

  color: white;

}

.UISplitPaneRight 

{

  flex: 1 1 auto; /* resizable */

  /* mpadding: 10px; */

  /*width: 100%;*/

  min-height: 200px;

  min-width: 200px;

  background: #eee;

}

.UISplitPaneSplitterV 

{

  flex: 0 0 auto;

  width: 5px;  

  border: 1px solid black;

  border-style: none solid none solid;

  background: url(img/vsizegrip.png) center center no-repeat #c0c0c0;

/*  background: #c0c0c0; */

  min-height: 200px;

  cursor: e-resize;  

}


.UISplitPaneTop

{

  flex: 0 0 auto;  /* only manually resize */

  /* padding: 10px; */

  text-align: left;

  min-height: 200px;

  width: 100%;

  white-space: nowrap;

  background: #838383;

  color: white;

}

.UISplitPaneBottom

{

  flex: 1 1 auto;  /* resizable */

  /* padding: 10px; */

  width: 100%;

  min-height: 200px;

  background: #eee;

}

.UISplitPaneSplitterH 

{

  flex: 0 0 auto;

  height: 5px;

  border: 1px solid black;

  border-style: solid none solid none;

  background: url(img/hsizegrip.png) center center no-repeat #c0c0c0;

  /*background: #c0c0c0;*/

  cursor: row-resize;

}

/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UITabbedPane.css

 *

 * PURPOSE:          CSS style definitions for UITabbedPane components

 *

 * Author:           psager

 *

 * Created on:       April 18, 2017

 *

 *****************************************************************************/


div.UITabbedPane

{

    width: 100%;

    height: 100%;

    background-color: #ffffff;

    color: #0000ff;

    text-align:center;   

    display:flex;

    flex-direction:column;

    align-items:stretch;  

    overflow: hidden;

} 


ul.UITabbedPaneMenu {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background-color: #ccc;

    min-height: 30px;

}


.UITabbedPaneMenu > li.ui-menuitem {

    float: left;

    display: block;

    color: black;

    background-color: #aaa;

    background-image: linear-gradient(to top, #aaa 0%, #ddd 100%);

    border-right: 1px solid #666;

    border-left: 1px solid #666;

    border-top: 1px solid #666;

    border-bottom: 1px solid #666;

    border-top-left-radius: 4px;

    border-top-right-radius: 4px;

    text-align: center;

    padding: 8px 16px;

    text-decoration: none;

    cursor: pointer;

}


.UITabbedPaneMenu > li.ui-menuitem:last-child {

    /*border-right: none; */

}


.UITabbedPaneMenu > li.ui-menuitem:hover:not(.active) {

    background-color: #bbb;    

}


.UITabbedPaneMenu > li.ui-menuitem.active {

    background-color: #ddd;

    background-image: none;

    border-bottom: 1px solid #ddd;

}




/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UITable.css

 *

 * PURPOSE:          CSS style definitions for UITable component

 *

 * Author:           psager

 *

 * Created on:       April 12, 2017

 *

 *****************************************************************************/


/*

table.uiSimpleTable, table.uiSimpleTable td, table.uiSimpleTable th

{

    border: 1px solid black;

}

*/


div.uiTableContainer

{

    /*height: 800px;*/

    overflow-y: auto;

    overflow-x: auto;

    /*height: 100%; */

}


table.uiTable 

{

    border-collapse: collapse;

    width: 100%;

    background-color: white;

    color: black;

}


table.uiTable tr:nth-child(even)

{

    background-color: #f2f2f2

}


table.uiTable tr:hover:not(.active) 

{

    background-color: #808080;

}


table.uiTable tr.active 

{

    background-color: deepskyblue;

}



table.uiTable td, table.uiTable th

{

    text-align: left;

    padding: 8px;

}


table.uiTable  th 

{

    background-color:cornflowerblue;

    color: white;

}

/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UITablePaginator.css

 *

 * PURPOSE:          CSS style definitions for UITablePaginator component

 *

 * Author:           psager

 *

 * Created on:       April 12, 2017

 *

 *****************************************************************************/


div.uiTablePaginator

{

    background-color:cornflowerblue;

    color: white;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

}


div.uiTablePaginatorStatus

{

    width: 30%;

    margin: 10px;

}


div.uiTablePaginatorInfo

{

    width: 30%;

    margin: 10px;

}


.uiTablePaginatorNav

{

    width: 30%;

    margin: 10px;

    background: none;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

}


.uiTablePaginatorDB

{

    margin: 0px;

    padding: 8px 8px 8px 8px;

    background:none; 

    cursor: pointer;

    -moz-user-select: none;

    user-select: none;

}

.uiTablePaginatorDB:hover 

{

  background:lightblue;

  text-decoration: none;

}


div.uiTablePaginatorDB.active

{

    color: white;

    background:blue;

}


/******************************************************************************

 *

 * Copyright 2019 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIText.css

 *

 * PURPOSE:          CSS style definitions for UIText component

 *

 * Author:           psager

 *

 * Created on:       Feb 23, 2019

 * Revised on:       Jan 11, 2026

 *

 *****************************************************************************/


/******************************************************************************

 * FILE:             UIText.css

 * PURPOSE:          Clean, professional "Paper" style for Wiki Page View

 *****************************************************************************/


div.uitext {

    padding: 40px 60px;

    margin: 0;

    /* System font stack for maximum readability */

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    font-size: 16px;

    line-height: 1.6;

    color: #24292e;

    background: #ffffff;

    max-width: 900px; /* Limits width for optimal reading line-length */

    margin: 0 auto;

    overflow-y: auto;


    /* Force the "Paper" to fill the horizontal space */

    display: block;          

    width: 100%;             /* Occupy the full width of the parent UIPanel */

    min-height: 100%;        /* Ensure the white background goes to the bottom */

    box-sizing: border-box;  /* Includes padding in the 100% width calculation */


    /* Optional: Centered professional document look */

    max-width: 1000px;       /* Limits the text width for readability */

    margin: 0 auto;          /* Centers the "Paper" if the screen is very wide */


    /* Shadow gives it a subtle "page" feel against the background */

    box-shadow: 0 0 10px rgba(0,0,0,0.05);

}


/* --- Headers --- */

div.uitext h1, div.uitext h2, div.uitext h3 {

    color: #005a9c;

    font-weight: 600;

    margin-top: 24px;

    margin-bottom: 16px;

    line-height: 1.25;

    border-bottom: 1px solid #eaecef;

    padding-bottom: 0.3em;

}


div.uitext h1 { font-size: 1.8em; }

div.uitext h2 { font-size: 1.5em; }

div.uitext h3 { font-size: 1.25em; }


div.uitext h1.doc-title {

    display: block;

    font-size: 2.0em;

    font-weight: 700;

    color: #005a9c;

    margin-bottom: 0.5em;

    padding-bottom: 0.2em;

    border-bottom: 2px solid #eaecef;

    line-height: 1.2;

    /* This makes it stand out as the anchor of the page */

}


/* Ensure the editor doesn't allow weird styling inside the title */

div.uitext h1.doc-title span {

    font-size: inherit;

    font-family: inherit;

    /* Optional: override any inherited green colors here too */

}


/* --- Paragraphs & Spacing --- */

div.uitext p {

    color: #24292e;

    margin-top: 0;

    margin-bottom: 16px;

    word-wrap: break-word;

}


/* --- Inline Formatting (The spans generated by DocHtmlRenderer) --- */


/* Ensure spans inside our container also follow the theme */

div.uitext span {

    color: inherit; /* Tells the span to take the color from the P tag */

}


div.uitext span.strong {

    font-weight: 700;

    color: #000;

}


div.uitext span.italic {

    font-style: italic;

}


div.uitext span.underline {

    text-decoration: underline;

    text-underline-offset: 2px;

}


div.uitext span.strikethrough {

    text-decoration: line-through;

}


/* --- Special handling for multiple formats --- */

div.uitext span.strong.italic { font-weight: bold; font-style: italic; }


/* --- Line breaks --- */

/* Ensure the base line height is identical */

div.uitext {

    line-height: 1.6; /* Or 1.5, whichever you prefer */

}


/* Reset the br tag in the view mode */

div.uitext br {

    display: inline; /* Ensure it doesn't act like a block element */

    content: none;   /* Remove any 'content' hacks we tried earlier */

    margin: 0;

    padding: 0;

}


/* Ensure spans don't add extra height */

div.uitext p span {

    line-height: inherit;

    display: inline; 

}


/* --- Global List Defaults --- */

div.uitext ul, 

div.uitext ol {

    margin: 10px 0;

    padding: 0;

    color: #24292e;

}


div.uitext li {

    margin-bottom: 5px;

    line-height: 1.5;

}


/* --- Bullet Lists (Standard Behavior) --- */

div.uitext ul {

    list-style-type: disc;

    margin-left: 25px; /* Standard indent for bullets */

}


div.uitext ul li {

    display: list-item;

}


/* --- Numbered Lists (Gutter Approach) --- */

div.uitext ol.teNumberedList {

    counter-reset: level0;

    list-style-type: none !important;

    margin-left: 0;

    padding-left: 0;

}


div.uitext ol.teNumberedList li {

    list-style-type: none !important;

    display: block;

    position: relative;

    /* We create a 3em wide gutter for the number to sit in */

    padding-left: 3em !important; 

    margin-bottom: 5px;

}


/* --- The Number Placement Logic --- */

div.uitext ol.teNumberedList li::before {

    position: absolute;

    /* Anchor to the left of the LI's internal space */

    left: 0; 

    /* The width of the number container must be less than the LI's padding-left */

    width: 2.5em; 

    text-align: right;

    font-weight: bold;

    color: #0366d6;

    pointer-events: none;

}


/* Level Content Logic (Keep your existing level selectors) */

div.uitext ol.teNumberedList li[style*="margin-left: 0px"] { counter-increment: level0; counter-reset: level1; }

div.uitext ol.teNumberedList li[style*="margin-left: 0px"]::before { content: counter(level0) ". "; }


div.uitext ol.teNumberedList li[style*="margin-left: 25px"],

div.uitext ol.teNumberedList li[style*="margin-left: 30px"] { counter-increment: level1; counter-reset: level2; }

div.uitext ol.teNumberedList li[style*="margin-left: 25px"]::before,

div.uitext ol.teNumberedList li[style*="margin-left: 30px"]::before { 

    content: counter(level1, lower-alpha) ") "; 

    font-weight: normal;

}


div.uitext ol.teNumberedList li[style*="margin-left: 50px"],

div.uitext ol.teNumberedList li[style*="margin-left: 60px"] { counter-increment: level2; }

div.uitext ol.teNumberedList li[style*="margin-left: 50px"]::before,

div.uitext ol.teNumberedList li[style*="margin-left: 60px"]::before { 

    content: counter(level2, lower-roman) ". "; 

    font-weight: normal;

}


/* Catch-all for Level 3 and deeper: stick with bullets */

div.uitext ol.teNumberedList li[style*="margin-left: 75px"],

div.uitext ol.teNumberedList li[style*="margin-left: 100px"] {

    counter-increment: level2; /* Just keep incrementing the last level */

}


div.uitext ol.teNumberedList li[style*="margin-left: 75px"]::before,

div.uitext ol.teNumberedList li[style*="margin-left: 100px"]::before {

    content: "• "; /* Or counter(level2, lower-roman) */

    font-weight: bold;

}

/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UITreeView.css

 *

 * PURPOSE:          CSS style definitions for UITreeView component

 *                    and sub-components

 *

 * Author:           psager

 *

 * Created on:       April 12, 2017

 *

 *****************************************************************************/


.uiTreeViewContainer {

  overflow: auto;

}


.uiTreeView {

font: normal 14px "Segoe UI", Arial, Sans-serif;

    -moz-user-select: none;

    -webkit-user-select: none;

    user-select: none;

}

    

.uiTreeView,

.uiTreeView ul {

  margin:0 0 0 1em; /* indentation */

  padding:0;

  list-style:none;

  /*color:white;*/

  position:relative;

}


.uiTreeView ul {margin-left:.5em} /* (indentation/2) */


/* commented out to remove lines ps

.uiTreeView:before,

.uiTreeView ul:before {

  content:"";

  display:block;

  width:0;

  position:absolute;

  top:0;

  bottom:0;

  left:0;

  border-left:1px solid;

}

*/


.uiTreeView li {

  margin:0;

  padding:0 0.5em; /* indentation + .5em */

  line-height:2em; /* default list item's `line-height` */

  /*font-weight:bold;*/

  position:relative;

}


.uiTreeView li:before {

  content:"";

  display:block;

  width:10px; /* same with indentation */

  height:0;

  /*border-top:1px solid;  commented out ps */

  /*margin-top:-1px; commented out ps */ /* border top width */

  position:absolute;

  top:1em; /* (line-height/2) */

  left:0;

}


.uiTreeView li:last-child:before {

  /*background:#838383;*/ /* same with body background */

  height:auto;

  top:1em; /* (line-height/2) */

  bottom:0;

}


.uiTreeViewNode span {

    display: flex;

    align-items: center;

    cursor: pointer;

}

.uiTreeViewNode span.active {

    background-color: #c0c0c0;

}

.uiTreeViewNode_S {

    height:16px;

    width:16px;

    align-self: center;

    flex-shrink: 0;

}

.uiTreeViewNode_M {

    height:16px;

    width:16px;

    background: url("icons/folderplusminus.png") no-repeat;

    background-position: 0 -16px;

    align-self: center;

    flex-shrink: 0;

}

.uiTreeViewNode_P {

    height:16px;

    width:16px;

    background: url("icons/folderplusminus.png") no-repeat;

    background-position: 0 -32px;

    align-self: center;

    flex-shrink: 0;

}

.uiTreeViewNode_T {

    margin-left: 10px;

    align-self: center;

    overflow: hidden;

    text-overflow: ellipsis;

}

.uiTreeViewNode_I {

    display: flex;

}

.uiTreeViewNode_I img {

    margin: auto;

}

/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIWindow.css

 *

 * PURPOSE:          CSS style definitions for UIWindow component

 *

 * Author:           psager

 *

 * Created on:       April 12, 2017

 *

 *****************************************************************************/


div.uiWindow

{

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background-color: grey;

    border:2px solid #505050;

    margin: 0 auto; 

    display:flex;

    flex-direction:column;

    align-items:stretch;

}


div.uiWindowHeader

{

    border-bottom: 2px solid #505050;

    background-color: #c0c0c0;

    color: #505050;

    text-align:center;

    display:flex;

    flex-direction:row;

    flex-wrap: nowrap;

    align-items:center;

    justify-content: space-between;

}

div.uiWindowTitle

{

    margin: auto;

}

div.uiWindowCloseButton

{

    align-self: center;

    /*margin-left: auto;*/

    margin-right: 2px;

}

div.uiWindowContentPane

{

    width: 100%;

    height: 100%;

    overflow: hidden;

    /*align-self: stretch;*/

    background-color: grey;

    color: black;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:stretch;

}

/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIStatusBar.css

 *

 * PURPOSE:          CSS style definitions for UIStatusBar component

 *

 * Author:           psager

 *

 * Created on:       April 20, 2017

 *

 *****************************************************************************/


.UIStatusBar

{

    height: 48px;

    background-color: lightgrey;

    color: black;

    text-align:center;

    display:flex;

    flex-direction:row;

    align-items:center; 

    justify-content: space-between;

}


.UIStatusBarText

{

    order: -1;

    margin-right: auto;

}/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UICylon.css

 *

 * PURPOSE:          CSS style definitions for UICylon component

 *

 * Author:           psager

 *

 * Created on:       April 20, 2017

 *

 *****************************************************************************/


.UICylon

{

    position: relative;

    /*display:inline-block;*/

    height: 32px;

    width: 32px;

    

    background-image: url("icons/cylon.png");

    

    margin-left: auto;

    order: 100;

}


.UICylon > div

{

    height: 3px;

    width: 2px;

    position: relative;

    top: 16px;

    left: 15px;

    background-color: orangered;

}

/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIClock.css

 *

 * PURPOSE:          CSS style definitions for UIClock component

 *

 * Author:           psager

 *

 * Created on:       somewhen, 2017

 *

 *****************************************************************************/


.UIClock

{

    position: relative;

    display: flex;

    height: 100%;

    width: 100%;

        

    /*margin-left: auto;

    order: 100; */

}

/******************************************************************************

 *

 * Copyright 2018 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIQRCode.css

 *

 * PURPOSE:          CSS style definitions for UIQRCode component

 *

 * Author:           psager

 *

 * Created on:       Oct, 2018

 *

 *****************************************************************************/


.UIQRCode

{

    position: relative;

    display:block;

    height: 100%;

    width: 100%;

        

    /*margin-left: auto;

    order: 100; */

}

/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIPieChart.css

 *

 * PURPOSE:          CSS style definitions for UIPieChart component

 *

 * Author:           psager

 *

 * Created on:       somewhen, 2017

 *

 *****************************************************************************/


.UIPieChart

{

    position: relative;

    display:block;

    height: 100%;

    width: 100%;

    /* width: 32px; */


    /*

    margin-left: auto;

    order: 100;

    */

}

/******************************************************************************

 *

 * Copyright 2017 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UILineChart.css

 *

 * PURPOSE:          CSS style definitions for UILineChart component

 *

 * Author:           psager

 *

 * Created on:       somewhen, 2017

 *

 *****************************************************************************/


.UILineChart

{

    position: relative;

    display:block;

    height: 100%;

    width: 100%;

    /* width: 32px; */


    /*

    margin-left: auto;

    order: 100;

    */

}

/******************************************************************************

 *

 * Copyright 2019 by      Sager Systems GmbH            Hannover, Germany

 *

 *                        All Rights Reserved

 *

 ******************************************************************************

 *

 * FILE:             UIIconEdit.css

 *

 * PURPOSE:          CSS style definitions for UIIconEdit component

 *

 * Author:           psager

 *

 * Created on:       April 2019

 *

 *****************************************************************************/


.UIIconEdit

{

    position: relative;

    display:block;

    height: 100%;

    width: 100%;

    overflow:hidden;

}