:root,
html.no-touchevents {
  --ck-color-engine-placeholder-text: #5b5b5b;

  --ck-color-widget-editable-focus-background: transparent;
  --ck-color-table-column-resizer-hover: #ffc83d;
  --ck-focus-ring: 2px solid #ffc83d;

  --ck-align-right-width: 50%;
  --ck-align-left-width: 50%;
  --ck-align-center-width: 80%;

  --ck-base-unit:24px;
}

:root {
  /******** GLOBALS VARIABLES *******/
  --ot-ckedtior5-base: #f5f5f5;
  --ot-ckedtior5-base-con: #292929;
  --ot-ckedtior5-base-link: #227bff;

  --ot-ckedtior5-base-alt: #272727;
  --ot-ckedtior5-base-alt-con: #ffffff;
  --ot-ckedtior5-base-alt-link: #9bc0f8;
  --ot-ckedtior5-base-alt-placeholder-con: #ededed;


  /******** QUOTEBOX VARIABLES *******/
  --ot-quotebox-padding: 24px;
  --ot-quotebox-gap: 24px;
  --ot-quotebox-background: transparent;
  --ot-quotebox-background-con: black;
  --ot-quotebox-border: 2px solid var(--ot-ckedtior5-base);

  --ot-quotebox-content-size: 1rem;
  --ot-quotebox-content-line-height: 1.4em;
  --ot-quotebox-content-weight:400;

  --ot-quotebox-caption-size: 0.9rem;
  --ot-quotebox-caption-line-height: 1.2em;
  --ot-quotebox-caption-weight: 300;

  /******** COLUMNBOX VARIABLES *******/
  --ot-columnbox-background: transparent;
  --ot-columnbox-color: black;
  --ot-columnbox-border-color: var(--ot-ckedtior5-base);

  --ot-columnbox-padding: 24px;
  --ot-columnbox-gap: 48px;

  --ot-columnbox-border: 1px solid var(--ot-columnbox-border-color);

  /******** FACTBOX VARIABLES *******/
  --ot-factbox-background:var(--ot-ckedtior5-base);
  --ot-factbox-color:var(--ot-ckedtior5-base-con);

  --ot-factbox-link-color: var(--ot-ckedtior5-base-link);
  --ot-factbox-link-hover-color: var(--ot-ckedtior5-base-link);

  --ot-factbox-margin:24px;
  --ot-factbox-padding:24px;

  --ot-factbox-title-size:2rem;
  --ot-factbox-title-line-height:1.1em;
  --ot-factbox-title-weight:500;

  --ot-factbox-content-size:1rem;
  --ot-factbox-content-line-height: 1.4em;

  --ot-factbox-caption-size:0.9rem;
  --ot-factbox-caption-line-height: 1.2em;
  --ot-factbox-caption-weight:400;

  --ot-factbox-collapse-button: var(--ot-ckedtior5-base-con);
  --ot-factbox-collapse-button-color: var(--ot-ckedtior5-base);

  --ot-factbox-collapsed-height: 150px;

  /* Set to 1 for true (Mobile only) || set 0 for false (Always collapsible) */
  --ot-factbox-collapsed-mobile-only: 0;

  /* Set to 1 for true (Remove after click) || set 0 for false (Keep button) */
  --ot-factbox-display-button-after-click: 0;

  /******** SECTIONBOX VARIABLES *******/
  --ot-sectionbox-background: transparent;
  --ot-sectionbox-color: black;

  --ot-sectionbox-oversize: 24px;

  --ot-sectionbox-padding: 0;

  /******** ACCORDION VARIABLES *******/

  --ot-accordion-container-gap: 12px;

  /* Toggle btn */
  --ot-accordion-toggle-btn-border: 1px solid #000000;
  --ot-accordion-toggle-btn-background: transparent;
  --ot-accordion-toggle-btn-con: var(--ot-ckedtior5-base-con);

  --ot-accordion-toggle-btn-border-hover: 1px solid #000000;
  --ot-accordion-toggle-btn-background-hover: var(--ot-ckedtior5-base-alt);
  --ot-accordion-toggle-btn-con-hover: var(--ot-ckedtior5-base-alt-con);


  /* Accordion title */
  --ot-accordion-title-size: 1.4rem;
  --ot-accordion-title-line-height: 1.2em; 
  --ot-accordion-title-font-weight: 400;
  --ot-accordion-title-padding: 12px;
  --ot-accordion-title-gap: 24px;
  --ot-accordion-title-color: var(--ot-ckedtior5-base);
  --ot-accordion-title-color-con: var(--ot-ckedtior5-base-con);
  --ot-accordion-title-color-hover: var(--ot-ckedtior5-base-alt);
  --ot-accordion-title-color-con-hover: var(--ot-ckedtior5-base-alt-con);

  --ot-accordion-number-color: black;
  --ot-accordion-number-color-con: white;
  --ot-accordion-number-color-hover: white;
  --ot-accordion-number-color-con-hover: black;
  --ot-accordion-number-font-size: 0.6em;
  --ot-accordion-number-line-height: 1em;

  --ot-accordion-title-border-width: 0px; 
  --ot-accordion-title-border-style: solid;
  --ot-accordion-title-border-color: black;

  /* Accordion content */
  --ot-accordion-content-padding: 12px;

  --ot-accordion-content-size: inherit;
  --ot-accordion-content-line-height: inherit;

  --ot-accordion-content-color: transparent;
  --ot-accordion-content-color-con: var(--ot-ckedtior5-base-con);
  --ot-accordion-content-border-color: black;

  --ot-accordion-content-border-width: 0px;
  --ot-accordion-content-border-style: solid;
  --ot-accordion-content-border-color: black; 

}


/******** Toolbar *******/
.ck.ck-dropdown.ck-list-styles-dropdown,
.ck.ck-dropdown .ck-button.ck-dropdown__button {
  border: 1px solid var(--ck-color-base-border);
}

/******** Styles *******/

/* Styles */
.ot-style-factbox-contrast {
  --ot-factbox-background:var(--ot-ckedtior5-base-alt);
  --ot-factbox-color:var(--ot-ckedtior5-base-alt-con);

  --ot-factbox-link-color: var(--ot-ckedtior5-base-alt-link);
  --ot-factbox-link-hover-color: var(--ot-ckedtior5-base-alt-link);

  --ot-factbox-collapse-button: var(--ot-ckedtior5-base-alt-con);
  --ot-factbox-collapse-button-color: var(--ot-ckedtior5-base-alt);

  --ck-color-engine-placeholder-text: var(--ot-ckedtior5-base-alt-placeholder-con);
}

/* Section box */
.ot-style-sectionbox-contrast {
  --ot-sectionbox-background: var(--ot-ckedtior5-base);
  --ot-sectionbox-color: var(--ot-ckedtior5-base-con);
  --ot-sectionbox-padding: 24px;
}

/* Section box */
.ot-style-quotebox-contrast {
  --ot-quotebox-background: transparent;
  --ot-quotebox-background-con: black;
  --ot-quotebox-border: 2px solid var(--ot-ckedtior5-base-alt);
}

/* Column box */
.ot-style-columnbox-contrast {
  --ot-columnbox-background: var(--ot-ckedtior5-base);
  --ot-columnbox-color: var(--ot-ckedtior5-base-con);
  --ot-columnbox-border-color: var(--ot-ckedtior5-base-con);
}
