@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

:root {
  /* 
  DO NOT MODIFY
  */
  --kup-gray-color-0: #ffffff;
  --kup-gray-color-10: #f4f4f4;
  --kup-gray-color-20: #e0e0e0;
  --kup-gray-color-30: #c6c6c6;
  --kup-gray-color-40: #a8a8a8;
  --kup-gray-color-50: #8d8d8d;
  --kup-gray-color-60: #6f6f6f;
  --kup-gray-color-70: #525252;
  --kup-gray-color-80: #393939;
  --kup-gray-color-90: #262626;
  --kup-gray-color-0-hover: #e8e8e8;
  --kup-gray-color-10-hover: #e8e8e8;
  --kup-gray-color-20-hover: #d1d1d1;
  --kup-gray-color-30-hover: #b5b5b5;
  --kup-gray-color-40-hover: #999999;
  --kup-gray-color-50-hover: #7a7a7a;
  --kup-gray-color-60-hover: #5e5e5e;
  --kup-gray-color-70-hover: #5b5b5b;
  --kup-gray-color-80-hover: #474747;
  --kup-gray-color-90-hover: #333333;

  /* KUP   */
  /* Note: these variables are included because in some pages there are no KetchUP components, so the theme manager can't initialize. */
  --kup-primary-color: #888888;
  --kup-primary-color-0: #ffffff;
  --kup-primary-color-10: #cfcfcf;
  --kup-primary-color-20: #b8b8b8;
  --kup-primary-color-30: #a0a0a0;
  --kup-primary-color-40: #949494;
  --kup-primary-color-50: #888888;
  --kup-primary-color-60: #6d6d6d;
  --kup-primary-color-70: #5f5f5f;
  --kup-primary-color-80: #444444;
  --kup-primary-color-90: #292929;
  --kup-secondary-color: #d91e18;
  --kup-font-family: "IBM Plex Sans", consolas;
  --kup-font-family-monospace: "IBM Plex Mono", consolas, monospace;
  --kup-obj-cursor: inherit;
  --kup-ascending-icon: url(/ketchup-showcase/assets/svg/arrow_drop_up.svg)
    no-repeat center;
  --kup-descending-icon: url(/ketchup-showcase/assets/svg/arrow_drop_down.svg)
    no-repeat center;
  --kup-expanded-icon: url(/ketchup-showcase/assets/svg/arrow_drop_down.svg)
    no-repeat center;
  --kup-collapsed-icon: url(/ketchup-showcase/assets/svg/menu-right.svg)
    no-repeat center;
  --kup-clear-icon: url(/ketchup-showcase/assets/svg/cancel.svg) no-repeat
    center;
  --kup-filter-remove-icon: url(/ketchup-showcase/assets/svg/filter-remove.svg)
    no-repeat center;

  /*  U. I.  */
  /* Specific - CABLED Redesign Color.  */

  --kup-navbar-background-color: #535353;

  /* CHART COLOR */

  /* --kup-chart-color-1: red;
  --kup-chart-color-2: blue;
  --kup-chart-color-3: orange;
  --kup-chart-color-4: green;
  --kup-chart-color-5: yellow;
  --kup-chart-color-6: cyan;
  --kup-chart-color-7: brown;
  --kup-chart-color-8: magenta;
  --kup-chart-color-9: grey;
  --kup-chart-color-10: indigo;
  --kup-chart-color-1-rgb: 255,0,0;
  --kup-chart-color-2-rgb: 0,0,255;
  --kup-chart-color-3-rgb: 255,165,0;
  --kup-chart-color-4-rgb: 0,128,0;
  --kup-chart-color-5-rgb: 255,255,0;
  --kup-chart-color-6-rgb: 0,255,255;
  --kup-chart-color-7-rgb: 165,42,42;
  --kup-chart-color-8-rgb: 255,0,255;
  --kup-chart-color-9-rgb: 128,128,128;
  --kup-chart-color-10-rgb: 75,0,130; */

  --kup-chart-color-1: #925699;
  --kup-chart-color-2: #08bdba;
  --kup-chart-color-3: #d4bbff;
  --kup-chart-color-4: #525669;

  /* Custom color per redesign - Only OctaneTheme */

  --kup-background-textfield: var(--kup-gray-color-10);

  /* Colori fissi */
  --main-blue: #446cb3;
  --main-blue-light: #6a8fd1;
  --main-blue-dark: #1d4793;
  --main-green: var(--kup-success-color-40);
  --main-green-light: #39ae6f;
  --main-green-dark: #1d623c;
  --main-yellow: var(--kup-warning-color-50);
  --main-yellow-light: #ffd454;
  --main-yellow-dark: #f5a10f;
  --main-orange: #f89406;
  --main-orange-light: #f4ab42;
  --main-orange-dark: #d76f00;
  --main-red: var(--kup-danger-color-60);
  --main-red-light: #f0423c;
  --main-red-dark: #ae130e;

  /* Colore principale */
  --main-color: var(--kup-primary-color);
  --main-color-light: var(--kup-primary-color-50);
  --main-color-lighter: var(--kup-primary-color-40);
  --main-color-lightest: var(--kup-primary-color-30);
  --main-color-dark: var(--kup-primary-color-70);
  --main-color-darkest: var(--kup-primary-color-80);

  /* Colore secondario */
  --second-color: var(--kup-secondary-color);
  --second-color-light: rgba(var(--kup-secondary-color-rgb), 0.8);
  --second-color-dark: rgba(var(--kup-secondary-color-rgb), 1.2);
  --kup-text-secondary: var(var(--kup-gray-color-70));

  /* Finestre e pannelli */
  --body-background-color: var(
    --kup-gray-color-0
  ); /* Colore di sfondo della pagina di WebUP e dello sfondo dei titoli (dialog, ecc.) */
  --title-background-color: var(
    --kup-gray-color-10
  ); /* Colore di sfondo dei titoli delle finestre */
  --main-background-color: var(
    --kup-gray-color-0
  ); /* Colore di sfondo per schede, pannelli, ecc. */
  --right-click-panel-background-color: var(
    --kup-gray-color-0
  ); /* Colore pannello dinamismi */
  --main-border-color: var(
    --kup-gray-color-30
  ); /* Colore distanziatori, bordi, ecc. */
  --main-border-color-hover: var(
    --kup-gray-color-40
  ); /* Colore distanziatori, bordi, ecc. all'hover */
  --main-border-stronger-color: var(
    --kup-border-strong
  ); /* Colore più marcato per distanziatori, bordi, ecc. (i.e.: in footer, header, ecc.) */
  --main-box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5); /* Box shadow principale finestre e widget */
  --main-transition: 0.25s ease-in-out; /* Solo per Ketchup attualmente */

  /* Testi e icone */
  --main-font-size: var(--kup-font-size); /* Solo per Ketchup attualmente */
  --main-font-family: var(--kup-font-family); /* Font dei caratteri */
  --main-border-radius: 0px; /* Border radius principale dei campi */
  --main-icon-color: var(--kup-text-secondary); /* Colore delle icone */
  --main-icon-color-hover: var(
    --kup-text-primary
  ); /* Colore delle icone all'hover */
  --main-text-color: var(--kup-gray-color-70); /* Colore del testo */
  --kup-title-color: var(--main-text-color);
  --main-text-lighter-color: rgba(
    var(--kup-text-secondary-rgb),
    0.8
  ); /* Colore del testo più leggero, i.e.: etichette nella form di login */
  --main-text-stronger-color: var(
    --kup-text-secondary
  ); /* Colore del testo più marcato */
  --disabled-text-color: var(
    --kup-text-disabled
  ); /* Colore del testo disabilitato */
  --disabled-background-color: var(
    --kup-gray-color-0
  ); /* Colore di sfondo per campi input disabilitati */
  --tags-background-color: var(--kup-gray-color-20); /* Colore dei tag */
  --input-background-color: var(
    --kup-gray-color-10
  ); /* Colore di sfondo dei campi di input */
  --hover-background-color: var(
    --kup-gray-color-0-hover
  ); /* Colore di sfondo elementi selezionati con hover */
  --hover-color: var(
    --kup-hover-color
  ); /* Colore elementi selezionati con hover */
  --text-on-main: var(
    --kup-gray-color-0
  ); /* Colore testo su sfondo main color */
  --text-on-main-light: var(
    --kup-gray-color-0
  ); /* Colore testo su sfondo main color */
  --text-on-second: var(
    --kup-text-on-secondary-color
  ); /* Colore testo su sfondo secondary color */
  --text-on-blue: white; /* Colore testo su sfondo blu */
  --text-on-green: white; /* Colore testo su sfondo verde */
  --text-on-yellow: white; /* Colore testo su sfondo giallo */
  --text-on-orange: white; /* Colore testo su sfondo arancione */
  --text-on-red: white; /* Colore testo su sfondo rosso */
  --section-title-color: var(--kup-gray-color-70, #525252);
  /*  H E A D E R  */

  /* Principali */
  --header-background-color: var(
    --kup-navbar-background-color
  ); /* Colore sfondo */
  --kup-navbar-background-color: #262626;
  --header-color: #fff; /* Colore testo */
  --header-box-shadow: 0 1px 2px rgba(150, 150, 150, 0.5); /* Ombreggiatura */

  /* Icone */
  --header-icons-color: #fff; /* Colore icone */
  --header-icons-activated-color: var(
    --second-color
  ); /* Colore icone attivate */
  --header-icons-disabled-color: var(
    --kup-text-disabled
  ); /* Colore icone disattivate */
  --header-icons-badge-background-color: var(
    --second-color
  ); /* Colore sfondo badge icone */
  --header-icons-badge-color: var(
    --kup-gray-color-0
  ); /* Colore testo badge icone */

  /* Spotlight */
  --header-spotlight-background-color: #ffffff; /* Colore sfondo spotlight */
  --header-spotlight-color: var(
    --kup-gray-color-0
  ); /* Colore testo spotlight */
  --header-spotlight-icons-color: var(
    --kup-gray-color-0
  ); /* Colore icone spotlight */
  --header-spotlight-icons-when-focused-color: var(
    --kup-gray-color-10-hover
  ); /* Colore icone spotlight, quando quest'ultimo è attivo */
  --header-spotlight-icons-when-focused-color-hover: var(
    --kup-gray-color-10-hover
  ); /* Colore icone spotlight, quando quest'ultimo è attivo, all'hover */

  /*  S I D E B A R   &   T O P B A R */

  /* Principali */
  --sidebar-background-color: var(
    --header-background-color
  ); /* Colore sfondo sidebar = headerbar  */
  --topbar-background-color: var(
    --kup-gray-color-10
  ); /* Colore sfondo della topbar / cambio oggetto */
  --sidebar-box-shadow: none; /* Ombreggiatura */
  --topbar-icons-color: var(--kup-gray-color-70);

  /* Icone */
  --sidebar-icons-color: white; /* Colore icone */
  --sidebar-icons-border-color: var(
    --sidebar-background-color
  ); /* Bordo icone */
  --sidebar-icons-hover-color: var(
    --kup-text-primary
  ); /* Colore icone all'hover */
  --sidebar-icons-hover-border-color: var(
    --second-color
  ); /* Bordo icone all'hover */
  --sidebar-icons-hover-background-color: var(
    --hover-background-color
  ); /* Sfondo icone all'hover */
  --sidebar-icons-activated-color: var(
    --second-color
  ); /* Colore icone attivate */
  --sidebar-icons-badge-background-color: var(
    --second-color
  ); /* Colore sfondo badge icone */
  --sidebar-icons-badge-color: var(
    --kup-text-on-primary-color
  ); /* Colore testo badge icone */

  /*  B U T T O N S  */

  /* Utility buttons (come il Back To Top) */
  --button-utility-background-color: var(
    --kup-primary-color
  ); /* Colore sfondo */
  --button-utility-color: var(--kup-text-on-primary-color); /* Colore testo */
  --button-utility-size: 42px; /* Dimensione bottone */
  --button-utility-font-size: 34px; /* Dimensione icona bottone */
  /* Primary buttons */
  --button-primary-background-color: var(
    --kup-primary-color-60
  ); /* Colore sfondo */
  --button-primary-hover-background-color: var(
    --kup-primary-color-70
  ); /* Colore sfondo all'hover */
  /* Success/Submit buttons */
  --button-success-background-color: var(
    --kup-success-color-60
  ); /* Colore sfondo */
  --button-success-hover-background-color: var(
    --kup-success-color-70
  ); /* Colore sfondo all'hover */
  /* Warning buttons */
  --button-warning-background-color: var(
    --kup-warning-color-50
  ); /* Colore sfondo */
  --button-warning-hover-background-color: var(
    --kup-warning-color-70
  ); /* Colore sfondo all'hover */
  /* Danger/Delete buttons */
  --button-delete-background-color: var(
    --kup-danger-color-60
  ); /* Colore sfondo */
  --button-delete-hover-background-color: var(
    --kup-danger-color-70
  ); /* Colore sfondo all'hover */
  /* Info buttons */
  --button-info-background-color: var(--kup-info-color-50); /* Colore sfondo */
  --button-info-hover-background-color: var(
    --kup-info-color-70
  ); /* Colore sfondo all'hover */
  /* Popup buttons */
  --button-popup-color: var(--kup-gray-color-40); /* Colore testo */
  --button-popup-hover-color: var(
    --kup-gray-color-70
  ); /* Colore testo all'hover */
  /* Right-click-gear buttons */
  --button-right-click-color: var(--kup-text-secondary); /* Colore */
  --button-right-click-hover-color: var(
    --kup-text-primary
  ); /* Colore all'hover */
  /* Bottoniere */
  --button-one-many-background-color: var(
    --kup-gray-color-10
  ); /* Colore sfondo */
  --button-one-many-hover-background-color: var(
    --kup-gray-color-10-hover
  ); /* Colore sfondo all'hover */
  --button-one-many-color: var(--kup-gray-color-70); /* Colore */
  --button-one-many-hover-color: var(
    var(--kup-gray-color-70-hover)
  ); /* Colore all'hover */

  /*  S P I N N E R S  */

  --spinner-primary-color: var(--kup-spinner-color); /* Colore primario */
  --spinner-secondary-color: var(
    --main-color-light
  ); /* Colore secondario (per transizioni) */
  --spinner-complete-color: var(
    --main-green
  ); /* Colore spinner al completamento (solo barre v2 e v3) */
}

html[kup-theme="graphite"] {
  .input.ui-inputfield {
    background-color: var(--kup-gray-color-10);
    border: none;
    border-bottom: 1px solid var(--kup-gray-color-50);
  }
  #login label {
    font-weight: 400 !important;
  }
}