FORBION

/*
Any of these can be used either by omitting the prefix (it will default to --co)
or by setting a different prefix by passing it and 2nd argument
*/
/**
	* Use this mixin to DECLARE a set of CSS Custom Properties in the :root element.
	* The variables in $css_variables will be properly prefixed.
	* The use of this mixin is encoraged to keep a good scalability.
	* @include set-cssvars((
	*  primary-color: #504999,
	*  secondary-color: #38257a,
	* ), (
	*  primary-color: #38257a,
	*  secondary-color: #504999,
	* ));
	* result in:
	* root {
	*  --co-primary-color: #504999;
	*  --co-secondary-color: #38257a;
	* }
	* [data-theme="dark"] {
	*  --co-primary-color: #38257a;
	*  --co-secondary-color: #504999;
	* }
*/
/**
	* ASSIGN a css variable value with prefix
	* .selector {
	*   color: get-cssvar(primary-color);
	* }
	*
	* result in:
	* .selector {
	*    color: var(--co-primary-color);
	* }
 */
/**
	* ASSIGN a css variable value with prefix
*.btn-primary {
*   height: cssvar(button-height);
*   &--big {
*     // rewrite height for btn-primary--big
*     @include update-cssvar(button-height, 56px);
*  }
*}
 */
:root {
  --nc-color-primary-element: var(--nc-light-color-primary-element, var(--co-primary-element));
  --nc-color-primary-element-text: var(--nc-light-color-primary-element-text, var(--co-primary-light));
  --nc-color-primary-element-light: var(--nc-light-color-primary-element-light, var(--co-primary-light));
  --nc-color-primary-element-hover: var(--nc-light-color-primary-element-hover);
  --nc-color-primary-element-light-hover: var(--nc-light-color-primary-element-light-hover);
  --nc-primary-invert-if-bright: var(--nc-light-primary-invert-if-bright);
  --nc-background-invert-if-bright: var(--nc-light-background-invert-if-bright);
  --nc-background-invert-if-dark: var(--nc-light-background-invert-if-dark);
  --nc-primary-invert-if-dark: var(--nc-light-primary-invert-if-dark, var(--co-primary-invert-if-dark));
  --native-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Cantarell, Roboto, Oxygen-Sans, Ubuntu, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  --background-notebookbar: #fff;
  --opacity-icon: 1;
  --opacity-icon-hover: 1;
  --opacity-icon-active: 1;
  --opacity-icon-disabled: 0.5;
  --blue1-txt-primary-color: 3, 105, 163;
  --green0-txt-primary-color: 16, 104, 2;
  /*green1 lacks contrast against white*/
  --orange1-txt-primary-color: 163, 62, 3;
  --yellow0-txt-primary-color: 135, 105, 0;
  /*yellow1 lacks contrast against white*/
  --gray-light-txt--color: #696969;
  --gray-light-bg-color: #EFEFEF;
  --gray-color: #b6b6b6;
  --color-main-text: #333333;
  --color-text-dark: #333333;
  /* select */
  --color-text-darker: #000;
  /* hover */
  --color-text-lighter: #696969;
  --color-background-dark: #F7F7F7;
  /* select */
  --color-background-darker: #e4e4e4;
  /* hover */
  --color-primary: var(--co-primary-element);
  --color-primary-text: var(--co-primary-text);
  --color-primary-dark: var(--co-color-primary-element-text-dark);
  --color-primary-darker: var(--co-primary-element);
  --color-primary-lighter: var(--co-primary-element-light);
  --color-border: #b6b6b6;
  --color-border-dark: #555;
  /* select */
  --color-border-lighter: #b6b6b6;
  --color-error: #e9322d;
  --color-warning: #eca700;
  --color-success: #46ba61;
  --cool-font: var(--native-font-stack);
  --mobile-font: var(--native-font-stack);
  --jquery-ui-font: var(--native-font-stack);
  --docs-font: var(--native-font-stack);
  --docs--pre-font: "Consolas","Menlo","Lucida Console","Courier New",monospace;
  --default-font-size: 15px;
  --header-font-size: 15px;
  --border-radius: 3px;
  --border-radius-large: 10px;
  --header-height: 49px;
  --co-color-background-light: var(--color-main-background) !important;
  --co-image-logo: url("images/toolbar-bg-logo.svg");
  --co-color-background-hover: #e4e4e4 !important;
  --co-primary-element-light: var(--nc-color-primary-element) !important;
  --co-primary-text: var(--nc-color-primary-element-text) !important;
  --ruler-height: 14px;
  --co-primary-invert-if-dark: invert(1);
}

:root [data-doctype=text] {
  --doc-type: 24, 90, 189;
  --doc-type-darker: 15, 58, 121;
}

:root [data-doctype=spreadsheet] {
  --doc-type: 16, 124, 65;
  --doc-type-darker: 7, 56, 29;
}

:root [data-doctype=presentation] {
  --doc-type: 196, 62, 28;
  --doc-type-darker: 129, 41, 18;
}

:root [data-doctype=drawing] {
  --doc-type: 142, 115, 16;
  --doc-type-darker: 73, 59, 8;
}

:root .writer-icon-img {
  background-image: url("images/x-office-document.svg");
}

:root .calc-icon-img {
  background-image: url("images/x-office-spreadsheet.svg");
}

:root .impress-icon-img {
  background-image: url("images/x-office-presentation.svg");
}

:root .draw-icon-img {
  background-image: url("images/x-office-drawing.svg");
}

[data-theme=dark] {
  --nc-color-primary-element: var(--nc-dark-color-primary-element, var(--co-primary-element));
  --nc-color-primary-element-text: var(--nc-light-color-primary-element-text, var(--co-primary-light));
  --nc-color-primary-element-light: var(--nc-dark-color-primary-element-light, var(--co-primary-element-light));
  --nc-color-primary-element-hover: var(--nc-dark-color-primary-element-hover);
  --nc-color-primary-element-light-hover: var(--nc-dark-color-primary-element-light-hover);
  --nc-primary-invert-if-bright: var(--nc-dark-primary-invert-if-bright);
  --nc-background-invert-if-bright: var(--nc-dark-background-invert-if-bright);
  --nc-background-invert-if-dark: var(--nc-dark-background-invert-if-dark);
  --nc-primary-invert-if-dark: var(--nc-dark-primary-invert-if-dark, var(--co-primary-invert-if-dark));
  --background-notebookbar: #101010;
  --opacity-icon: 0.8;
  --opacity-icon-hover: 1;
  --opacity-icon-active: 1;
  --color-main-text: #fff;
  --color-text-dark: #ddd;
  /* select */
  --color-text-darker: #ccc;
  /* hover */
  --color-text-lighter: #ddd;
  --color-canvas: #171717;
  --color-main-background: #171717;
  --color-background-dark: #444;
  /* select */
  --color-background-darker: #555;
  /* hover */
  --color-background-lighter: #333;
  --color-primary: var(--co-primary-element);
  --color-primary-text: var(--co-primary-text);
  --color-primary-dark: var(--co-color-primary-element-text-dark);
  --color-primary-darker: var(--co-primary-element);
  --color-primary-lighter: var(--co-primary-element-light);
  --color-border: #696969;
  --color-border-dark: #959595;
  /* select */
  --color-border-lighter: #f1f1f1;
  --co-body-bg: var(--color-canvas) !important;
  --co-color-background-light: var(--color-main-background) !important;
  --co-color-main-text: #fff !important;
  --co-color-background-hover: #444 !important;
  --co-color-background-dark: #111 !important;
}

input[type=checkbox].autofilter, .jsdialog input[type=checkbox] {
  border: none !important;
}

.jsdialog-window.modalpopup[role=dialog] {
  border-color: transparent !important;
}

[id^=modal-dialog].jsdialog-window.modalpopup[role=dialog] {
  border: none !important;
  border-radius: var(--border-radius-large) !important;
  box-shadow: 0 0 25px var(--color-box-shadow) !important;
}

[id^=modal-dialog].jsdialog-window.modalpopup[role=dialog] button {
  border-radius: 100px !important;
  cursor: pointer;
}

[id^=modal-dialog].jsdialog-window.modalpopup[role=dialog] button.ui-pushbutton:not(.button-primary, [id^=modal-dialog-][id$=yesbutton]) {
  border: none !important;
  background-color: var(--nc-color-primary-element-light) !important;
}

[id^=modal-dialog].jsdialog-window.modalpopup[role=dialog] button.button-primary, [id^=modal-dialog].jsdialog-window.modalpopup[role=dialog] button[id^=modal-dialog-][id$=yesbutton] {
  border: none !important;
  color: var(--color-primary-text) !important;
  background-color: var(--nc-color-primary-element) !important;
}

[id^=modal-dialog].jsdialog-window.modalpopup[role=dialog] button.button-primary:hover, [id^=modal-dialog].jsdialog-window.modalpopup[role=dialog] button[id^=modal-dialog-][id$=yesbutton]:hover {
  background-color: var(--nc-color-primary-element-hover) !important;
  color: var(--nc-color-primary-element-text) !important;
}

.jsdialog-window:not(.modalpopup) .jsdialog-container.ui-dialog.lokdialog_container {
  border-radius: var(--border-radius-large) !important;
  box-shadow: 0 0 25px var(--color-border) !important;
  border: none !important;
  overflow: hidden !important;
}

.jsdialog-window:not(.modalpopup) .jsdialog-container.ui-dialog.lokdialog_container .ui-dialog-titlebar {
  padding: 0;
  min-height: 44px;
}

.jsdialog-window:not(.modalpopup) .jsdialog-container.ui-dialog.lokdialog_container .ui-dialog-titlebar .ui-dialog-title {
  border: none;
  box-sizing: border-box;
  padding: 13px;
  background-color: var(--color-main-background);
  background-image: none;
  color: var(--color-main-text);
  font-weight: bold;
  text-transform: none;
  font-family: var(--cool-font);
}

.jsdialog-window:not(.modalpopup) .jsdialog-container.ui-dialog.lokdialog_container .ui-dialog-titlebar button.ui-dialog-titlebar-close {
  width: 34px;
  height: 34px;
  margin: 5px;
  top: 0;
}

.jsdialog-window:not(.modalpopup) .jsdialog-container.ui-dialog.lokdialog_container .ui-dialog-titlebar button.ui-dialog-titlebar-close:hover {
  background-image: none;
  background-color: var(--color-background-darker);
  border-radius: 8px !important;
}

.jsdialog-window:not(.modalpopup) .jsdialog-container.ui-dialog.lokdialog_container .ui-dialog-titlebar button.ui-dialog-titlebar-close:hover .ui-icon-closethick {
  background-image: url("images/closedoc.svg");
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  background-size: 24px;
}

.jsdialog-window:not(.modalpopup) .jsdialog-container.ui-dialog.lokdialog_container .ui-dialog-titlebar button.ui-dialog-titlebar-close .ui-icon-closethick {
  background-image: url("images/closedoc.svg");
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  background-size: 24px;
}

[data-theme=dark] .jsdialog-window:not(.modalpopup) .jsdialog-container.ui-dialog.lokdialog_container .ui-dialog-titlebar button.ui-dialog-titlebar-close .ui-icon-closethick {
  filter: invert(1) !important;
}

.jsdialog-window:not(.modalpopup) .jsdialog-container.ui-dialog.lokdialog_container .ui-tab {
  border-radius: var(--border-radius-large);
}

.jsdialog-window:not(.modalpopup) .jsdialog-container.ui-dialog.lokdialog_container .ui-toggle.checked button,
.jsdialog-window:not(.modalpopup) .jsdialog-container.ui-dialog.lokdialog_container .ui-tab.selected.jsdialog {
  box-shadow: none !important;
  background-color: var(--nc-color-primary-element) !important;
  color: var(--nc-color-primary-element-text) !important;
}

.jsdialog-window:not(.modalpopup) .jsdialog-container.ui-dialog.lokdialog_container button:not(.menubutton):not(.ui-toggle button) {
  border-radius: 100px !important;
  cursor: pointer;
}

.jsdialog-window:not(.modalpopup) .jsdialog-container.ui-dialog.lokdialog_container button:not(.menubutton):not(.ui-toggle button).button-primary {
  color: var(--color-primary-text);
  background-color: var(--nc-color-primary-element);
}

.jsdialog-window:not(.modalpopup) .jsdialog-container.ui-dialog.lokdialog_container button:not(.menubutton):not(.ui-toggle button).button-primary:hover {
  background-color: var(--nc-color-primary-element-hover);
  color: var(--nc-color-primary-element-text);
}

.jsdialog-window:not(.modalpopup) .jsdialog-container.ui-dialog.lokdialog_container button:not(.menubutton):not(.ui-toggle button).ui-pushbutton:not(.button-primary) {
  border: none !important;
  background-color: var(--nc-color-primary-element-light) !important;
}

.jsdialog-window:not(.modalpopup) .jsdialog-container.ui-dialog.lokdialog_container button:not(.menubutton):not(.ui-toggle button)[id^=remove].ui-pushbutton.has-img {
  background-color: transparent !important;
}

.ui-toggle button {
  border-radius: 100px !important;
}

.sidebar.has-dropdown--color .ui-content.unobutton:not(.disabled):not(.selected):hover,
.sidebar.has-dropdown--color:hover .ui-content.unobutton:not(.disabled):not(.selected) {
  opacity: var(--opacity-icon-hover);
}

.sidebar.ui-expander-label {
  font-size: var(--default-font-size);
  font-weight: normal;
}

.sidebar.ui-expander-container {
  margin-bottom: 20px;
}

.jsdialog.ui-expander {
  border: none !important;
  box-shadow: none !important;
}

#closebuttonwrapper {
  top: 3px;
  width: 34px;
  height: 34px !important;
}

[data-theme=dark] #closebuttonwrapper #closebutton {
  filter: invert(1) !important;
}

#closebuttonwrapper #closebutton:hover {
  background-color: transparent !important;
}

#closebuttonwrapper:hover {
  border-radius: 8px;
  background-color: var(--color-background-darker);
  cursor: pointer;
  opacity: var(--opacity-icon-hover);
}

html body {
  background-color: var(--color-canvas) !important;
}

body #document-header {
  margin: 0;
  border: none;
  display: inline-flex;
  width: 46px;
  padding-inline-start: 12px;
  border: none !important;
  background: none !important;
  border-radius: 0;
}

body #document-header .document-logo {
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  width: 40px !important;
  height: 20px !important;
}

body #document-header {
  padding-inline: 7px 0px;
}

#document-name-input,
#document-name-input.editable,
#document-name-input.editable:not(:focus) #document-name-input.editable:focus {
  text-align: center !important;
  font-weight: bold;
  font-size: var(--default-font-size) !important;
  color: var(--co-color-main-text);
  animation: none !important;
  box-shadow: none !important;
  background: transparent !important;
  height: 100% !important;
  border-radius: 10px !important;
  /* For older NC  */
  border-radius: var(--vs-border-radius, var(--border-radius-large)) !important;
  border: 1px solid transparent !important;
}

#document-name-input.editable:not(:focus) {
  color: var(--color-text-lighter);
  text-align: left;
  font-size: var(--default-font-size) !important;
}

#document-name-input.editable:hover {
  color: var(--color-text-lighter);
  border-color: var(--color-border) !important;
  flex: none;
}

#document-name-input.editable:focus {
  color: var(--co-color-main-text);
  flex: none;
  border: 1px solid var(--color-border-darker);
}

nav:not(.hasnotebookbar) {
  /** Menu */
}

nav:not(.hasnotebookbar).main-nav {
  background-color: var(--color-main-background);
  height: 44px;
  padding: 0;
  align-items: center;
  /** Document name input */
}

@media screen and (min-width: 1250px) {
  nav:not(.hasnotebookbar).main-nav #document-titlebar {
    position: absolute;
    width: auto;
    left: 50%;
    z-index: 1200;
  }
}
@media screen and (max-width: 1045px) {
  nav:not(.hasnotebookbar).main-nav #document-titlebar {
    display: none;
  }
}
nav:not(.hasnotebookbar) .lo-menu > li > a, nav:not(.hasnotebookbar) .lo-menu > li > a.has-submenu {
  border-radius: 0;
  border-bottom: 0;
  border: none;
}

nav:not(.hasnotebookbar) .lo-menu li:last-child .separator {
  display: none;
}

nav:not(.hasnotebookbar) .lo-menu:not(#main-menu) a:not(.separator), nav:not(.hasnotebookbar) .lo-menu:not(#main-menu) a:not(.separator):hover {
  padding: 12px 22px;
}

nav:not(.hasnotebookbar) #main-menu {
  width: 100%;
  height: auto;
  display: flex;
}

nav:not(.hasnotebookbar) #main-menu .sm-nowrap {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

nav:not(.hasnotebookbar) #main-menu > li > a {
  padding: 8px !important;
}

nav:not(.hasnotebookbar) #main-menu-state:not(:checked) ~ #main-menu {
  display: flex !important;
}

nav:not(.hasnotebookbar) #menu-last-mod {
  opacity: 0.7;
}

@media screen and (min-width: 1250px) {
  nav:not(.hasnotebookbar) #menu-last-mod {
    text-align: right;
    display: flex;
    justify-content: end;
    flex-grow: 1;
  }
}
nav:not(.hasnotebookbar) #menu-last-mod > a, nav:not(.hasnotebookbar) #menu-last-mod > a span {
  text-decoration: none;
  color: var(--color-text-lighter);
}

nav:not(.hasnotebookbar) #menu-last-mod > a:hover, nav:not(.hasnotebookbar) #menu-last-mod > a:hover span {
  text-decoration: none;
  background-color: transparent;
  color: var(--co-color-text);
}

/** Icon toolbar */
#toolbar-wrapper:not(.hasnotebookbar) {
  background-color: var(--color-main-background);
}

#toolbar-up {
  top: 0px;
}

#toolbar-up .checked.over {
  border: 0 !important;
  box-shadow: none !important;
}

html:not([data-theme=dark]) #toolbar-down .unobutton.over * {
  color: #444 !important;
}

#toolbar-down .ui-separator {
  opacity: 0.2;
}

.ui-content .unobutton.selected ~ .arrowbackground .unoarrow {
  border-top-color: var(--color-main-text) !important;
}

.arrowbackground:hover .unoarrow,
.arrowbackground .unoarrow:hover {
  border-top-color: --color-text-darker !important;
}

#toolbar-wrapper .ui-scroll-left,
#toolbar-wrapper .ui-scroll-right {
  background-origin: padding-box;
  background-clip: border-box;
  background-image: url("images/scroll-double-dark.svg"), linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, white 30%, white 100%);
  background-position: 3px center, center center;
  width: 44px;
  background-size: 24px, cover;
  top: 0px;
  right: 0px;
  margin: 0px;
  padding: 0px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: none;
  background-color: transparent;
}

[data-theme=dark] #toolbar-wrapper .ui-scroll-left,
[data-theme=dark] #toolbar-wrapper .ui-scroll-right {
  background-image: url("images/scroll-double-dark.svg"), linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, black 30%, black 100%);
}

#document-titlebar > .document-title {
  gap: 0;
}

.unotoolbutton:hover * {
  cursor: pointer;
}

#document-container:not(.mobile) + #sidebar-dock-wrapper {
  width: auto;
  max-width: 380px;
}

#document-container.notebookbar-active + #sidebar-dock-wrapper,
#navigation-sidebar {
  box-shadow: none;
  outline: none;
  padding: 13px;
}

#navigation-sidebar {
  padding: 5px;
}

#navigator-dock-wrapper {
  border: none;
}

#navigator-floating-icon {
  background: transparent !important;
}

[data-theme=dark] #navigator-dock-wrapper img {
  filter: invert(1) hue-rotate(180deg) !important;
}

#document-container.notebookbar-active + #sidebar-dock-wrapper .deck:not([id=NavigatorDeck]) {
  padding-top: 13px;
}

.jsdialog.ui-listbox {
  border: 1px solid var(--co-border);
  background-color: var(--color-main-background);
}

#sidebar-panel td.jsdialog .jsdialog.cell.sidebar {
  padding: 4px 1px;
  width: auto;
}

.arrowbackground,
.arrowbackground:hover {
  border: 0;
}

/** Required since regular branding overwrites those with high specifity */
#tb_editbar_item_linespacing > div > table, #tb_editbar_item_insertshapes > div > table, #tb_editbar_item_fontcolor > div > table, #tb_editbar_item_backcolor > div > table, #tb_editbar_item_inserttable > div > table,
#tb_editbar_item_linespacing > div > .checked, #tb_editbar_item_insertshapes > div > .checked, #tb_editbar_item_fontcolor > div > .checked, #tb_editbar_item_backcolor > div > .checked, #tb_editbar_item_inserttable > div > .checked {
  border: 0 !important;
}

/** Hide the menu bar folding icon */
#tb_editbar_item_fold {
  display: none;
}

#clearFormatting:hover {
  border-color: var(--co-border) !important;
}

/** Fromulabar */
#formulabar > div > div {
  grid-gap: 4px;
}

/** Notebook bar */
#toolbar-wrapper.hasnotebookbar {
  border-collapse: initial;
  border-radius: 5px;
  margin: 0 10px;
  width: calc(100vw - 20px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background-color: var(--background-notebookbar);
  border-color: transparent;
}

[data-theme=dark] #toolbar-wrapper.hasnotebookbar {
  box-shadow: 0 2px 1px black;
}

#toolbar-wrapper.hasnotebookbar.spreadsheet {
  margin-bottom: 10px;
}

#toolbar-wrapper.hasnotebookbar.spreadsheet #formulabar {
  padding: 2px;
  border-radius: 5px;
  border-color: transparent;
}

#toolbar-wrapper.hasnotebookbar .ui-content.unotoolbutton:not(.formulabar):focus, #toolbar-wrapper.hasnotebookbar .ui-content.unotoolbutton:not(.formulabar):focus-visible {
  outline: 2px solid var(--color-primary) !important;
}

#toolbar-wrapper.hasnotebookbar .has-dropdown--color .ui-content.unobutton:not(.disabled):not(.selected):hover,
#toolbar-wrapper.hasnotebookbar .has-dropdown--color:hover .ui-content.unobutton:not(.disabled):not(.selected) {
  opacity: var(--opacity-icon-hover);
}

#toolbar-wrapper.hasnotebookbar .ui-content.unotoolbutton:not(.disabled):hover .unolabel {
  color: var(--color-main-text);
}

#toolbar-wrapper.hasnotebookbar .unotoolbutton.notebookbar {
  margin-inline-end: 0 !important;
}

#toolbar-wrapper.hasnotebookbar .unotoolbutton.notebookbar .unolabel {
  font-size: var(--default-font-size);
}

#toolbar-wrapper.hasnotebookbar .unotoolbutton.notebookbar.disabled, #toolbar-wrapper.hasnotebookbar .unotoolbutton.notebookbar.disabled button {
  cursor: not-allowed;
}

#toolbar-wrapper.hasnotebookbar .unotoolbutton.notebookbar.disabled img, #toolbar-wrapper.hasnotebookbar .unotoolbutton.notebookbar.disabled button img {
  opacity: var(--opacity-icon-disabled);
}

#toolbar-wrapper.hasnotebookbar .unotoolbutton.notebookbar.selected:hover {
  border-color: rgb(var(--doc-type)) !important;
}

#toolbar-wrapper.hasnotebookbar #stylesview {
  padding: 2px;
}

#toolbar-wrapper.hasnotebookbar #stylesview-btn div {
  padding: 0px 2px !important;
}

[data-theme=dark] .hasnotebookbar .ui-content.unotoolbutton.selected:not(.has-label):not(.inline) {
  border-color: rgb(var(--doc-type));
}

.navigator-btn-wrapper:hover {
  background-color: var(--co-color-background-hover) !important;
}

.notebookbar .ui-content.unobutton:hover, .jsdialog .ui-content.unobutton:hover {
  background-color: transparent;
}

.ui-treeview-entry.selected,
.ui-listview-entry.selected {
  background-color: var(--nc-color-primary-element-light);
}

nav.main-nav {
  border-top: 8px solid rgb(var(--doc-type));
  background-color: var(--color-canvas) !important;
}

nav.main-nav #save::after {
  font-size: 12px !important;
}

nav.main-nav #main-menu.readonly {
  flex-grow: 1;
}

nav.main-nav #main-menu.readonly.lo-menu > li > a, nav.main-nav #main-menu.readonly .lo-menu > li > a.has-submenu {
  border-color: transparent !important;
}

nav.main-nav .notebookbar-tabs-container {
  margin-left: 5px;
  flex-grow: 1;
  flex-shrink: 1;
  background-image: none;
}

nav.main-nav .notebookbar-tabs-container::before, nav.main-nav .notebookbar-tabs-container::after {
  display: none;
}

nav.main-nav .ui-tabs.notebookbar {
  background-color: transparent;
  border-radius: 0;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

nav.main-nav .ui-tab.selected {
  display: grid !important;
}

nav.main-nav {
  height: 47px;
}

nav.main-nav .ui-tab.notebookbar {
  height: 47px;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

nav.main-nav.main-nav.hasnotebookbar #document-header {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

nav.main-nav .notebookbar-options-section {
  right: 44px !important;
  height: auto !important;
}

nav.main-nav #table-shortcutstoolbox {
  display: none;
}

nav.main-nav.main-nav.hasnotebookbar .ui-tab.notebookbar {
  color: var(--color-text-lighter);
  background-color: transparent !important;
  text-shadow: none;
  padding-top: 3px;
  padding-bottom: 2px;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr auto auto;
  align-content: center;
}

nav.main-nav.main-nav.hasnotebookbar .ui-tab.notebookbar::after {
  content: "";
  height: 2px;
  background-color: transparent;
}

nav.main-nav.main-nav.hasnotebookbar .ui-tab.notebookbar.selected {
  grid-auto-flow: row;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--co-color-main-text);
  background-color: transparent;
  font-weight: bold;
}

nav.main-nav.main-nav.hasnotebookbar .ui-tab.notebookbar.selected::after {
  content: "";
  height: 2px;
  background-color: rgb(var(--doc-type));
  grid-column: 1/4;
}

nav.main-nav.main-nav.hasnotebookbar .ui-tab.notebookbar:hover {
  color: var(--co-color-main-text);
  background-color: transparent;
}

@media screen and (max-width: 1072px) {
  nav.main-nav #document-titlebar {
    display: none !important;
  }
}
.spreadsheet-tabs-container .spreadsheet-tab {
  font: var(--default-font-size) var(--cool-font) !important;
}

.spreadsheet-header-row,
.spreadsheet-header-column {
  border-color: transparent;
}

/** UI Widget */
.lokdialog_container.ui-dialog.ui-widget-content {
  box-shadow: 0 0 3px rgba(77, 77, 77, 0.5);
}

.ui-dialog .ui-dialog-titlebar {
  padding: 0;
}

.ui-dialog .ui-dialog-titlebar .ui-dialog-title {
  border: none;
  box-sizing: border-box;
  padding: 13px;
  background-color: var(--color-main-background);
  background-image: none;
  color: var(--color-main-text);
  font-weight: bold;
  text-transform: none;
  font-family: var(--cool-font);
}

.ui-dialog .ui-dialog-titlebar button.ui-dialog-titlebar-close {
  width: 34px;
  height: 34px;
  margin: 5px;
  top: 0;
}

.ui-dialog .ui-dialog-titlebar button.ui-dialog-titlebar-close:hover {
  background-image: none;
  background-color: var(--color-background-darker);
  border-radius: 8px;
}

.ui-dialog .ui-dialog-titlebar button.ui-dialog-titlebar-close:hover .ui-icon-closethick {
  background-image: url("images/closedoc.svg");
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  background-size: 24px;
}

.ui-dialog .ui-dialog-titlebar button.ui-dialog-titlebar-close .ui-icon-closethick {
  background-image: url("images/closedoc.svg");
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  background-size: 24px;
}

[data-theme=dark] .ui-dialog .ui-dialog-titlebar button.ui-dialog-titlebar-close .ui-icon-closethick {
  filter: invert(1) !important;
}

/** Global menu styling */
.sm-nowrap {
  border-radius: 5px;
  border: 0;
  box-shadow: 0 0 3px rgba(77, 77, 77, 0.5);
}

.lo-menu a:hover:not(.disabled), .lo-menu a:focus, .lo-menu a:active, .lo-menu a.highlighted {
  background-color: var(--co-color-background-hover);
  color: var(--color-main-text);
}

.lo-menu:not(#main-menu) a:not(.separator):hover {
  background-color: var(--co-border);
  color: var(--color-main-text);
  border-radius: 4px;
}

.main-nav:not(.spreadsheet-color-indicator) ~ .context-menu-list {
  margin: 0;
}

.context-menu-list {
  border-radius: 3px;
  padding: 0;
}

.context-menu-list .context-menu-item:not(.context-menu-separator) {
  padding: 8px 14px;
  font-size: var(--default-font-size);
}

.context-menu-list .context-menu-icon::before {
  visibility: hidden;
}

.context-menu-list .context-menu-item.context-menu-icon-radio {
  background-color: var(--co-primary-element-light);
}

.context-menu-list .context-menu-item.context-menu-icon-radio a {
  color: var(--co-primary-light);
}

.context-menu-list .context-menu-item.context-menu-icon-radio.context-menu-hover {
  background-color: var(--co-primary-element-light) !important;
  box-shadow: inset 0 0 0 25px rgba(0, 0, 0, 0.1);
  /* Adjust the alpha value to control the darkness */
}

/** Cursor style */
.leaflet-cursor-container .leaflet-cursor-header {
  font-family: var(--cool-font);
  font-size: 13px;
  border-radius: 3px;
  margin-left: -3px;
  margin-top: -18px;
  padding: 3px 5px;
  height: 15px;
}

/** Inactive document modal style */
#inactive_user_message::before {
  background-image: url("images/lc_watch_later_branding.svg");
  display: block;
  content: "";
  width: 3rem;
  height: 3rem;
  background-size: cover;
  margin: 0 auto 20px;
  opacity: var(--opacity-icon);
}

#inactive_user_message {
  color: var(--co-color-main-text) !important;
  padding: 1em;
  box-sizing: border-box;
}

/** About Dialog **/
#integrator-logo {
  flex-grow: 1 !important;
  background: url("images/toolbar-bg-logo.svg") no-repeat center/128px;
  width: 128px;
}

#product-name {
  justify-content: left !important;
  color: var(--color-primary) !important;
}

#product-logo, #lokit-logo {
  background-position: center !important;
  flex-grow: 1;
}

#product-logo {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iMzkiCiAgIGhlaWdodD0iMzkiCiAgIHZpZXdCb3g9IjAgMCA4LjAgMTAuMzE4NzUiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzY0MTciCiAgIGlua3NjYXBlOnZlcnNpb249IjAuOTIuMiAoNWMzZTgwZCwgMjAxNy0wOC0wNikiCiAgIHNvZGlwb2RpOmRvY25hbWU9InRvb2xiYXItYmctZm9udC5zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM2NDExIiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBpZD0iYmFzZSIKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMS4wIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp6b29tPSIxMS4yIgogICAgIGlua3NjYXBlOmN4PSIzNy4xMTYwNzIiCiAgICAgaW5rc2NhcGU6Y3k9IjM3LjExNjA3MiIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0icHgiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICB1bml0cz0icHgiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9ImZhbHNlIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTk4MiIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxOTgyIgogICAgIGlua3NjYXBlOndpbmRvdy14PSItOCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iLTgiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIgLz4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE2NDE0Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZwogICAgIGlua3NjYXBlOmxhYmVsPSJMYXllciAxIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgICAgaWQ9ImxheWVyMSIKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLC0yODYuNjgxMjMpIj4KICAgIDxwb2x5Z29uCiAgICAgICBpZD0icG9seWdvbjE0IgogICAgICAgcG9pbnRzPSIxNy45MTQsNDQuODkzIDE3LjM1OCw0NC4zODYgMTcuMjU4LDIwLjcxOCAxNy43NzIsMjAuMTcyIDMwLjk1OCwzMi41OTkgIgogICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZiIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDAuMjIxNzgzNDgsMCwwLDAuMjIxNzgzNDgsLTMuODAxODIyOSwyODQuNjI1ODEpIiAvPgogICAgPHBvbHlnb24KICAgICAgIHN0eWxlPSJmaWxsOiM1YzI5ODM7ZmlsbC1vcGFjaXR5OjEiCiAgICAgICBpZD0icG9seWdvbjE2IgogICAgICAgcG9pbnRzPSIzMC45NTgsMzIuNTk5IDMwLjM3OSwzMy4xNDUgMTcuOTE0LDQ0Ljg5MyAyOC42NTQsNTUuNjM4IDUxLjc0MiwzMi41NSAyOC41NjEsOS4zNjIgMTcuNzYzLDIwLjE2MiAxNy43NzIsMjAuMTcyIDMwLjM3OSwzMi4wNTMgIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMC4yMjE3ODM0OCwwLDAsMC4yMjE3ODM0OCwtMy44MDE4MjI5LDI4NC42MjU4MSkiIC8+CiAgICA8cG9seWdvbgogICAgICAgaWQ9InBvbHlnb24xOCIKICAgICAgIHBvaW50cz0iMjkuODY0LDMyLjU5OSAxNy4zNTgsNDQuMzg2IDE3LjI1OCwyMC43MTggIgogICAgICAgc3R5bGU9ImZpbGw6I2M4YzhjOCIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDAuMjIxNzgzNDgsMCwwLDAuMjIxNzgzNDgsLTMuODAxODIyOSwyODQuNjI1ODEpIiAvPgogICAgPHBvbHlnb24KICAgICAgIHN0eWxlPSJmaWxsOiMyZDBiNDc7ZmlsbC1vcGFjaXR5OjEiCiAgICAgICBpZD0icG9seWdvbjIwIgogICAgICAgcG9pbnRzPSIzMS44NDcsNDEuNDgzIDI3Ljc0MywzNS42MjggMTguODA3LDQ0LjA1MiAiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjIyMTc4MzQ4LDAsMCwwLjIyMTc4MzQ4LC0zLjgwMTgyMjksMjg0LjYyNTgxKSIgLz4KICA8L2c+Cgo8IS0tIChDKSBDb2xsYWJvcmEgUHJvZHVjdGl2aXR5IDIwMjAsIEFsbCBSaWdodHMgUmVzZXJ2ZWQgLS0+Cjwvc3ZnPg==") !important;
}

#integrator-logo, #about-dialog-logos {
  flex-basis: 256px;
  max-width: 256px;
}

.leaflet-progress-spinner::before {
  background-position: center !important;
  height: 94px !important;
}

#mobile-wizard.menuwizard {
  z-index: 1003;
}

#toolbar-wrapper.mobile > tbody > tr {
  height: 100%;
}

#toolbar-down #search-input {
  border-color: var(--color-border) !important;
}

#toolbar-down #search-input:hover {
  border-color: var(--color-border-dark) !important;
}

#shareas .unolabel {
  color: var(--color-text-lighter);
}

/*
Any of these can be used either by omitting the prefix (it will default to --co)
or by setting a different prefix by passing it and 2nd argument
*/
/**
	* Use this mixin to DECLARE a set of CSS Custom Properties in the :root element.
	* The variables in $css_variables will be properly prefixed.
	* The use of this mixin is encoraged to keep a good scalability.
	* @include set-cssvars((
	*  primary-color: #504999,
	*  secondary-color: #38257a,
	* ), (
	*  primary-color: #38257a,
	*  secondary-color: #504999,
	* ));
	* result in:
	* root {
	*  --co-primary-color: #504999;
	*  --co-secondary-color: #38257a;
	* }
	* [data-theme="dark"] {
	*  --co-primary-color: #38257a;
	*  --co-secondary-color: #504999;
	* }
*/
/**
	* ASSIGN a css variable value with prefix
	* .selector {
	*   color: get-cssvar(primary-color);
	* }
	*
	* result in:
	* .selector {
	*    color: var(--co-primary-color);
	* }
 */
/**
	* ASSIGN a css variable value with prefix
*.btn-primary {
*   height: cssvar(button-height);
*   &--big {
*     // rewrite height for btn-primary--big
*     @include update-cssvar(button-height, 56px);
*  }
*}
 */
:root {
  --co-color-main-text: #212121 ;
  --co-color-background-hover: #f5f5f5 ;
  --co-color-background-dark: #ededed ;
  --co-body-bg: #ffffff ;
  --co-text-accent: #38257a ;
  --co-primary-element: #4c566a ;
  --co-primary-elment-rgb: 76, 86, 106 ;
  --co-primary-element-light: #eaecf0 ;
  --co-primary-text: #ffffff ;
  --co-border-radius: 3px ;
  --co-color-border-dark: #b0b4bd ;
  --co-color-text-lighter: #636363 ;
  --co-color-warning: #eca700 ;
  --co-color-main-background-translucent: transparent ;
  --co-color-background-light: #f1f1f1 ;
  --co-color-text-nb-tab: #fff ;
  --co-color-bg-nb-tab: rgba(255, 255, 255, 0.15) ;
  --co-settings-btn-primary: #00679e ;
  --co-settings-btn-primary-text: #ffffff ;
  --co-settings-btn-light: #e5eff5 ;
  --co-settings-btn-light-text: #00293f ;
  --co-settings-border: #ededed ;
  --co-settings-border-contrast: #dbdbdb ;
  --co-settings-text: #222222 ;
  --co-settings-text-maxcontrast: #6b6b6b ;
  --co-settings-background: #ffffff ;
  --co-settings-background-hover: #f5f5f5 ;
}

[data-theme=dark] {
  --co-color-main-text: #ededed ;
  --co-color-background-hover: #262626 ;
  --co-color-background-dark: #1E1E1E ;
  --co-body-bg: #262626 ;
  --co-text-accent: #83beec ;
  --co-primary-element: #0b87e7 ;
  --co-primary-element-light: #83beec ;
  --co-primary-text: #000 ;
  --co-color-border-dark: #1E1E1E ;
  --co-color-text-lighter: #fff ;
  --co-color-warning: #eca700 ;
  --co-color-main-background-translucent: transparent ;
  --co-color-background-light: #363636 ;
  --co-color-bg-nb-tab: rgba(255, 255, 255, 0.05) ;
  --co-settings-btn-primary: #0091f2 ;
  --co-settings-btn-primary-text: #000000 ;
  --co-settings-btn-light: #14232c ;
  --co-settings-btn-light-text: #99d3f9 ;
  --co-settings-border: #292929 ;
  --co-settings-border-contrast: #3b3b3b ;
  --co-settings-text: #ebebeb ;
  --co-settings-text-maxcontrast: #999999 ;
  --co-settings-background: #171717 ;
  --co-settings-background-hover: #212121 ;
}

:root {
  --settings-btn-primary: var(--co-settings-btn-primary) !important;
  --settings-btn-primary-text: var(--co-settings-btn-primary-text) !important;
  --settings-btn-light: var(--co-settings-btn-light) !important;
  --settings-btn-light-text: var(--co-settings-btn-light-text) !important;
  --settings-border: var(--co-settings-border) !important;
  --settings-border-contrast: var(--co-settings-border-contrast) !important;
  --settings-text: var(--co-settings-text) !important;
  --settings-text-maxcontrast: var(--co-settings-text-maxcontrast) !important;
  --settings-background: var(--co-settings-background) !important;
  --settings-background-hover: var(--co-settings-background-hover) !important;
}

#toolbar-up .ui-toolbar {
  padding-top: 5px !important;
}

/*avoid scroll indicators to be above other items*/
.ui-tab.notebookbar {
  line-height: normal;
  padding: 2px 12px 2px 12px;
}

.ui-tabs.notebookbar {
  height: auto !important;
  border-radius: 8px;
  box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.15);
}

.notebookbar-tabs-container {
  align-self: auto !important;
}

.main-nav.hasnotebookbar .ui-tab.selected.notebookbar {
  text-shadow: none;
  background-color: white;
}

.ui-tab.selected.notebookbar {
  box-shadow: none;
  border-radius: 8px !important;
  box-shadow: inset 0 0 0px 1px #dbdbdb, 0 0 3px 0px #00000012;
  -moz-box-shadow: inset 0 0 0px 1px #dbdbdb, 0 0 3px 0px #00000012;
  -webkit-box-shadow: inset 0 0 0px 1px #dbdbdb, 0 0 3px 0px #00000012;
}

.ui-tabs.notebookbar .ui-tab {
  height: auto !important;
  background-color: transparent;
  color: var(--co-color-text-lighter);
}

.main-nav:not(.hasnotebookbar) {
  margin-right: 0px;
  box-shadow: 0px 4px 2px -2px #adadad;
}

.ui-toolbar {
  padding-top: 2px;
}

.ui-scroll-left, .ui-scroll-right {
  box-shadow: 4px 0 13px 2px var(--co-primary-element), -6px 0 6px 6px var(--co-primary-element) !important;
}

#mobile-edit-button {
  background-color: var(--co-primary-element) !important;
}

.leaflet-selection-marker-end {
  margin-left: -4px;
  background-size: 12px;
  background-repeat: no-repeat;
  background-image: url("images/ios_handle_end.svg");
  margin-top: -24px;
}

.leaflet-selection-marker-start {
  margin-left: -8px;
  background-size: 12px;
  background-repeat: no-repeat;
  background-image: url("images/ios_handle_start.svg");
  margin-top: -34px;
}

.leaflet-cursor-handler {
  display: none;
}

/*porting some changes from iOSapp made by @tml and adjusting*/
.cool-context-toolbar {
  top: -32px;
}

#mobile-wizard button,
#mobile-wizard #FontworkSameLetterHeights {
  color: var(--co-primary-text);
  background-color: var(--co-primary-element);
  border: 1px solid var(--co-primary-element);
}

#mobile-wizard-titlebar {
  color: var(--co-color-text-lighter);
}

.ui-tab.selected.mobile-wizard {
  color: var(--co-primary-element);
  border-bottom: 1px solid var(--co-primary-element);
}

.ui-tab.mobile-wizard {
  color: var(--co-color-text-lighter);
}

div#mobile-wizard-content .spinfieldcontainer {
  border: 1px solid var(--co-color-border-dark);
  border-radius: var(--co-border-radius);
}

.spinfieldcontrols {
  background-color: var(--co-color-background-dark);
  border-left: 1px solid var(--co-color-border-dark);
}

.plus {
  border-left: 1px solid var(--co-color-border-dark);
  color: var(--co-color-text-lighter) !important;
}

.minus {
  border-right: 1px solid var(--co-color-border-dark);
  color: var(--co-color-text-lighter) !important;
}

.spinfieldunit {
  color: var(--co-color-text-lighter) !important;
}

.colors-container-selected-basic-color {
  box-shadow: 0 2px 3px -2px var(--co-primary-element);
  border-radius: var(--co-border-radius);
}

.color-sample-small {
  border-color: var(--co-body-bg);
}

.color-sample-big {
  box-shadow: 0px 0px 0px 1px var(--co-color-background-dark), 1px 1px 0 3px var(--co-body-bg);
}

.menu-entry-icon {
  background: var(--co-color-main-background-translucent);
}

#mobile-wizard-content #commands.selected {
  border-color: var(--co-primary-element);
}

#mobile-wizard .cool-annotation-reply-count {
  margin-inline-end: 32px !important;
}

#mobile-wizard .ui-content.unobutton.selected {
  box-shadow: 0 0 0px 6px var(--color-background-darker) !important;
  background-color: var(--color-background-darker) !important;
}