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 {
  --color-calc-header-selected: #D2D2D2 !important;
  --color-calc-header-hover: #9FD5B7 !important;
  --color-text-calc-header-selected: #106802 !important;
  --color-doc-name-input-bg-hover: rgba(0, 0, 0, 0.2) !important;
}

[data-theme=dark] {
  --color-calc-header-selected: #646464 !important;
  --color-calc-header-hover: #217346 !important;
  --color-text-calc-header-selected: #fff !important;
  --color-doc-name-input-bg-hover: black !important;
}

:root {
  --column-row-highlight: #9FD5B7 !important;
}

[data-theme=dark] {
  --column-row-highlight: #9FD5B7 !important;
}

/*
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;
}

.ui-toolbar .unotoolbutton img {
  margin: 1px;
}

.logo {
  background-size: 100px;
  max-width: 24px;
  max-height: 31px;
  top: 0;
}

#toolbar-logo {
  width: 0px !important;
}

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

#toolbar-hamburger.menuwizard-opened {
  background-color: var(--co-color-background-dark) !important;
}

.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;
}

/*avoid scroll indicators to be above other items*/
#PermissionMode.status-readonly-mode {
  background-color: transparent;
  color: var(--co-color-text-lighter);
}

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

#toolbar-down .unotoolbutton.selected {
  border: 1px solid var(--co-primary-text) !important;
  background: linear-gradient(to right, #fff 20%, #fff0 20%) no-repeat, linear-gradient(to left, #fff 20%, #fff0 20%) no-repeat, linear-gradient(transparent 94%, var(--co-primary-element) 94%);
  background-color: transparent !important;
}

.spreadsheet-tab {
  padding-bottom: 4px !important;
  padding-top: 5px !important;
}

#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;
}

#lokit-version ~ p {
  margin: 0;
}

#about-dialog-header {
  flex-flow: column;
  align-items: center;
}

#about-dialog-logos {
  flex-basis: 62px;
  max-width: 168px;
}

#about-dialog-logos * {
  background-position: left top;
}

#product-logo {
  flex-grow: 0.8;
  background-position: center top !important;
}

#product-name {
  justify-content: center !important;
}

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