@font-face {
  font-family: 'Inter Light';
  src: url(font/Inter/Inter-Light.ttf);
}
@font-face {
  font-family: 'Inter Medium';
  src: url(font/Inter/Inter-Medium.ttf);
}
@font-face {
  font-family: 'Inter Regular';
  src: url(font/Inter/Inter-Regular.ttf);
}
@font-face {
  font-family: 'Inter Bold';
  src: url(font/Inter/Inter-Bold.ttf);
}
@font-face {
  font-family: 'Inter Variable';
  src: url(font/Inter/Inter-VariableFont_slnt,wght.ttf);
}

.dropdown {
  border: 1px solid var(--exsyn-dark-blue) !important;
}

b.exsyn-instruction {
    background-color: var(--exsyn-dark-blue);
    font-size: 15px;
    color: #ffffff;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-weight: bold;
}

a {
	font-family: 'Inter Bold';
    color: var(--link-color); 
}

b {
	font-family: 'Inter Bold';
}

strong {
	font-family: 'Inter Bold';
}
	
:root {
	
  --exsyn-dark-blue: #002C6B;
  --exsyn-light-blue: #0592AE;
  --exsyn-hover-blue: #0592AE;
  --exsyn-hover-blue2: #0592AE66; /*Transparacy added to "--exsyn-hover-blue"*/
  --exsyn-dark-gray: #3E3A39;
  --exsyn-light-gray: #A6A6A6;
  --exsyn-error: #942E16;
  --exsyn-success: #169477;
  
  --knime-porcelain: #FFFFFF;
  
  --link-color: var(--exsyn-dark-blue);
  
  /* Accent colors */
  /* Theme accent color is used for the menu bar on top, such as "Monitoring" and "Administration" */
  --theme-accent-color: var(--exsyn-light-gray);
  --theme-accent-color-hover: var(--exsyn-light-blue); 
  --theme-accent-color-focus: var(--exsyn-dark-blue);
  
  /* Header */
  --theme-header-background-color: white;
  --theme-header-foreground-color: var(--exsyn-dark-blue);
  --theme-header-font-family: 'Inter Bold';
  --theme-header-nav-link-current-border-bottom: 4px solid var(--exsyn-dark-blue);
  --knime-silver-sand-semi: #f8f9fa;
  --knime-yellow: var(--exsyn-dark-blue);

  /* Logo */
  --theme-logo-width: 400px;
  --theme-logo-height: auto;

  /* Login logo */
  --theme-login-logo-width: 300px;
  --theme-login-logo-height: auto;

  /* Login page */
  --theme-login-background-color: var(--exsyn-dark-blue);
  --theme-login-text-font-family: 'Inter Light';
  --theme-login-text-color: var(--exsyn-dark-blue);
  --theme-login-title-font-family: 'Inter Bold';
  --theme-login-title-color: white;
  --theme-login-title-font-weight: 500;
  --theme-login-hero-text-font-family: 'Inter Light';
  --theme-login-hero-text-color: white;

  /* Headlines */
  --theme-headlines-font-family: 'Inter Bold';
  --theme-headlines-color: var(--exsyn-dark-blue);
  --theme-headlines-font-weight: 600;

  /* Text */
  --theme-text-normal-font-family: 'Inter Light';
  --theme-text-normal-color: #3E3A39;
  --theme-text-medium-font-family: 'Inter Medium';
  --theme-text-medium-color: #6E6E6E;
  --theme-text-bold-font-family: 'Inter Bold';
  --theme-text-bold-color: var(--exsyn-light-blue);

  /* Default Button */
  --theme-button-background-color: var(--exsyn-dark-blue);
  --theme-button-background-color-hover: var(--exsyn-hover-blue);
  --theme-button-background-color-focus: var(--exsyn-light-blue);
  --theme-button-foreground-color: white;
  --theme-button-foreground-color-hover: white;
  --theme-button-foreground-color-focus: white;
  --theme-button-border-radius: 0;
  --theme-button-border-color: transparent;
  --theme-button-border-color-hover: transparent;
  --theme-button-border-color-focus: transparent;

  /* Small Button */
  --theme-button-small-background-color: var(--exsyn-dark-blue);
  --theme-button-small-background-color-hover: var(--exsyn-hover-blue);
  --theme-button-small-background-color-focus: var(--exsyn-light-blue); 
  --theme-button-small-foreground-color: white;
  --theme-button-small-foreground-color-hover: white;
  --theme-button-small-foreground-color-focus: white;
  --theme-button-small-border-radius: 0;
  --theme-button-small-border-color: var(--exsyn-dark-blue); /* trans */
  --theme-button-small-border-color-hover: var(--exsyn-light-blue);/* trans */
  --theme-button-small-border-color-focus: var(--exsyn-light-blue);/* trans */

  /* Split Button */
  --theme-button-split-background-color: var(--exsyn-dark-blue);
  --theme-button-split-background-color-hover: var(--exsyn-hover-blue);
  --theme-button-split-background-color-focus: var(--exsyn-light-blue); 
  --theme-button-split-foreground-color: white;
  --theme-button-split-foreground-color-hover: white;
  --theme-button-split-foreground-color-focus: white;
  --theme-button-split-border-radius: 0;
  --theme-button-split-border-color: transparent;
  --theme-button-split-border-color-hover: transparent;
  --theme-button-split-border-color-focus: transparent;
  --theme-button-split-divider-color: white;

  /* Function button */
  --theme-button-function-border-radius: 0;
  --theme-button-function-background-color: transparent;
  --theme-button-function-background-color-hover: var(--exsyn-hover-blue);
  --theme-button-function-background-color-focus: var(--exsyn-light-blue); 
  --theme-button-function-background-color-active: var(--exsyn-light-blue); 
  --theme-button-function-foreground-color: 
  --theme-button-function-foreground-color-hover: 
  --theme-button-function-foreground-color-focus: 
  --theme-button-function-foreground-color-active: white;

  /*The below sections include widget node layout:
  - Dropdown
  - Text Links
  - Tooltip
  - Checkbox
  - Selection List
  - Radio buttons
  - Slider
  */
  
  /* Dropdown (global) */
  --theme-dropdown-background-color: white;
  --theme-dropdown-background-color-focus: var(--exsyn-light-blue);
  --theme-dropdown-background-color-hover: var(--exsyn-hover-blue2);
  --theme-dropdown-background-color-selected: var(--exsyn-light-blue);
  --theme-dropdown-foreground-color: var(--exsyn-dark-blue);
  --theme-dropdown-foreground-color-focus: white; 
  --theme-dropdown-foreground-color-hover: white; 
  --theme-dropdown-foreground-color-selected: white;

  /* Text links */
  --theme-text-link-background-color: var(--exsyn-dark-blue);
  --theme-text-link-background-color-hover: var(--exsyn-hover-blue);
  --theme-text-link-background-color-focus: var(--exsyn-light-blue);
  --theme-text-link-foreground-color: white;
  --theme-text-link-foreground-color-hover: white;
  --theme-text-link-foreground-color-focus: white;
  --theme-text-link-text-decoration: none;
  --theme-text-link-text-decoration-hover: none;
  --theme-text-link-text-decoration-focus: none;

  /* Tooltip */
  --theme-tooltip-background-color: var(--exsyn-dark-blue);
  --theme-tooltip-foreground-color: white;

  /* Checkbox */
  --theme-checkbox-border-color: var(--exsyn-light-blue);
  --theme-checkbox-border-color-focus: var(--exsyn-light-blue);
  --theme-checkbox-border-color-hover: var(--exsyn-hover-blue);
  --theme-checkbox-border-color-selected: var(--exsyn-light-blue);
  --theme-checkbox-border-color-selected-focus: var(--exsyn-light-blue);
  --theme-checkbox-border-color-selected-hover: var(--exsyn-hover-blue);
  --theme-checkbox-background-color: white;
  --theme-checkbox-background-color-focus: white;
  --theme-checkbox-background-color-hover: white;
  --theme-checkbox-background-color-selected: var(--exsyn-light-blue);
  --theme-checkbox-background-color-selected-focus: var(--exsyn-light-blue);
  --theme-checkbox-background-color-selected-hover: var(--exsyn-hover-blue);
  --theme-checkbox-foreground-color-selected: white;
  --theme-checkbox-foreground-color-selected-focus: white;
  --theme-checkbox-foreground-color-selected-hover: white;
  
  /* Selection List */
  --theme-select-control-background-color: var(--exsyn-light-blue);
  --theme-select-control-background-color-hover: var(--exsyn-hover-blue2);
  --theme-select-control-background-color-focus: var(--exsyn-light-blue);
  --theme-select-control-foreground-color: white;
  --theme-select-control-foreground-color-hover: white;
  --theme-select-control-foreground-color-focus: white;

  /* Radio buttons */
  --theme-radio-border-color: var(--exsyn-light-blue);
  --theme-radio-border-color-hover: var(--exsyn-hover-blue);
  --theme-radio-border-color-selected: var(--exsyn-light-blue);
  --theme-radio-border-color-selected-hover: var(--exsyn-hover-blue);
  --theme-radio-background-color: white;
  --theme-radio-background-color-hover: white;
  --theme-radio-background-color-selected: var(--exsyn-light-blue);
  --theme-radio-background-color-selected-hover: var(--exsyn-hover-blue);
  --theme-radio-foreground-color-selected: white;
  --theme-radio-foreground-color-selected-hover: white;

  /* Slider */
  --theme-slider-border-radius: 1;
  --theme-slider-border-color: var(--exsyn-dark-blue);
  --theme-slider-border-color-hover: var(--exsyn-dark-blue);
  --theme-slider-border-color-focus: var(--exsyn-dark-blue);
  --theme-slider-foreground-color: var(--exsyn-dark-blue);
  --theme-slider-foreground-color-hover: var(--exsyn-dark-blue);
  --theme-slider-foreground-color-focus: var(--exsyn-dark-blue);
  --theme-slider-bar-radius: 5px;
  --theme-slider-background-color: var(--exsyn-light-blue);

  /* Error Toast */
  /* E.g. used when a "Job" has erros during execution */
  --theme-color-error: var(--exsyn-error);

  /* Sucess Toast */
  /* E.g. used when a "Job" is executed succesfully */
  --theme-color-success: var(--exsyn-success)
}