:root {
  /* Colori Primari e Secondari */
  --primary-color: #e51c73; /* magenta */
  --primary-color-alpha: #e51c7344; /* magenta trasparente */
  --primary-color-focus: #941c1c; /* colore focus del primario */
  --secondary-color: #ffffff; /* bianco */
  --secondary-color-focus: #000000; /* nero come focus del secondario */
  --separator: #ececec; /* separatore */
  
  /* Testo */
  --primary-text: #000000; /* testo primario */
  --secondary-text: #bebebe; /* testo secondario */
  --disabled-text: #a1a1a1; /* testo disabilitato */
  
  /* Colori Specifici */
  --dinamo-color-1: #e51c73; /* magenta primario */
  --dinamo-color-2: #f29100; /* giallo */
  --dinamo-color-3: #e53329; /* arancione */
  --dinamo-color-4: #941c80; /* viola */
  --dinamo-color-5: #941c80; /* bordò */
  
  /* Background */
  --background-color: #ffffff; /* sfondo bianco */
  --background-color-2: #ffffff; /* sfondo alternativo bianco */
  --background-color-3: #ffffff; /* sfondo alternativo bianco */
  --grid-background-color: #bebebe; /* sfondo griglia */
  --grid-text-color: #ffffff; /* testo griglia */
  
  /* Nero */
  --black: #000000; /* nero puro */

  /* Stati dei Pulsanti Primari */
  --primary-color-hover: #d01964;
  --primary-color-active: #c1155b;
  --primary-color-disabled: #e8a5c2;

  /* Stati dei Pulsanti Secondari */
  --secondary-color-hover: #f5f5f5;
  --secondary-color-active: #dcdcdc;
  --secondary-color-disabled: #f2f2f2;

  /* Stati dei Pulsanti Terziari */
  --tertiary-color: #bebebe; /* colore base terziario */
  --tertiary-color-hover: #d4d4d4;
  --tertiary-color-active: #c8c8c8;
  --tertiary-color-disabled: #e0e0e0;
}


p,
h1,
h2,
h3,
h4 {
  color: var(--primary-text);
}

.label {
  color: var(--secondary-text);
}

.box {
  border-color: var(--separator) !important;
}
.box-header {
  border-color: var(--separator) !important;
}

kendo-label {
  color: var(--primary-text);
}

kendo-label > div {
  color: var(--primary-text);
}

.list-steps{
  color: var(--primary-text);
}

.k-radio-label{
  color: var(--primary-text);
}

.label-small,
small {
  color: var(--primary-text);
}

.text-small {
  color: var(--primary-text);
}

/* Provide sufficient contrast against white background */
a {
  color: var(--primary-color);
}

code {
  color: var(--primary-color);
}

input:focus,
input:hover,
.k-textbox:focus-within,
.k-picker-wrap:focus-within,
.k-autocomplete:focus-within,
.k-textarea:focus-within,
.k-combobox:focus-within,
.k-dropdown-wrap:focus-within,
.k-textarea:focus,
.k-textarea.k-state-focus,
.k-textarea.k-state-focused {
  border-color: var(--primary-color) !important;
}

.k-state-focused,
.k-textbox:focus-within {
  box-shadow: 0 0 0 0.25rem rgb(229 28 115 / 25%) !important;
}

.with-shadow {
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.16) !important;
}

/* BUTTON - START */
.btn-primary {
  background-color: var(--primary-color) !important;
  border: none !important;
  width: auto;
  padding: 0px 20px;
  font-weight: 600;
}

.btn-primary:disabled {
  background-color: var(--primary-color) !important;
  opacity: 0.5 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary-color-focus) !important;
  color: var(--white) !important;
  box-shadow: 0 0 0 0.05rem rgb(148 28 28 / 50%) !important;
}

.btn-primary:active:focus {
  box-shadow: 0 0 0 0.25rem rgb(148 28 28 / 50%) !important;
}

.btn-secondary {
  background-color: var(--background-color-3);
  color: var(--primary-text) !important;
  border: 2px solid var(--black) !important;
  padding: 0px 10px;
  font-weight: 600;
}

.btn-secondary:disabled {
  background-color: var(--background-color);
  color: var(--primary-text) !important;
  opacity: 0.5 !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--black) !important;
  color: var(--secondary-text) !important;
  box-shadow: 0 0 0 0.05rem rgb(0 0 0 / 50%) !important;
}
/* BUTTON - END */

hr.h-separator {
  color: var(--separator);
}

.v-separator {
  border-left: 2px solid var(--separator);
  border-color: var(--separator);
}

.k-tilelayout-item:nth-child(6n + 1) .k-tilelayout-item-header,
.k-tilelayout-item:nth-child(6n + 5) .k-tilelayout-item-header {
  background-color: var(--dinamo-color-1);
}

.k-tilelayout-item:nth-child(6n + 2) .k-tilelayout-item-header,
.k-tilelayout-item:nth-child(6n + 4) .k-tilelayout-item-header {
  background-color: var(--dinamo-color-2);
}

.k-tilelayout-item:nth-child(6n + 3) .k-tilelayout-item-header {
  background-color: var(--dinamo-color-3);
}

.k-tilelayout-item:nth-child(6n + 6) .k-tilelayout-item-header {
  background-color: var(--dinamo-color-4);
}
.k-tilelayout {
  background-color: var(--background-color) !important;
}

.k-tilelayout-item-body {
  background-color: var(--background-color-2) !important;
}

/* TOAST START */

.toast-error.swal2-icon-error {
  background-color: rgb(229, 51, 41, 0.97) !important;
}

.toast-warning.swal2-icon-warning {
  background-color: rgb(242, 145, 0, 0.97) !important;
}

.toast-success.swal2-icon-success {
  background-color: rgb(229, 28, 115, 0.97) !important;
}

.swal2-icon.swal2-warning {
  color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
}

.custom-toast .swal2-title {
  color: var(--primary-text);
}

.custom-toast .swal2-close {
  color: var(--primary-text);
}

.custom-toast .swal2-html-container {
  color: var(--primary-text);
}
/* TOAST END*/

/*TOAST MODALE START*/
.swal2-styled.swal2-confirm {
  background-color: var(--primary-color) !important;
  border: none !important;
}

.swal2-styled.swal2-confirm:hover,
.swal2-styled.swal2-confirm:focus,
.swal2-styled.swal2-confirm:active {
  background-color: var(--primary-color-focus) !important;
  border: none !important;
  box-shadow: 0 0 0 0.05rem rgb(148 28 28 / 50%) !important;
}

.swal2-styled.swal2-cancel {
  background-color: var(--background-color-3) !important;
  border: 2px solid var(--black) !important;
  color: var(--primary-text) !important;
}

.swal2-styled.swal2-cancel:hover,
.swal2-styled.swal2-cancel:focus,
.swal2-styled.swal2-cancel:active {
  background-color: var(--black) !important;
  border: 2px solid var(--black) !important;
  color: white !important;
  box-shadow: 0 0 0 0.05rem rgb(0 0 0 / 50%) !important;
}

.modal-swal2-warning > .swal2-icon.swal2-warning,
.modal-swal2-success > .swal2-icon.swal2-success,
.swal2-icon.swal2-success .swal2-success-ring {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.swal2-popup {
  background: var(--background-color-2) !important;
  color: var(--primary-text) !important;
}
/*TOAST MODALE END*/

/* GRID - START */
.k-grid-header {
  border-color: var(--secondary-text) !important;
  /*background-color: #bbb !important;*/
}

/*non metto !important. delego all'headerStyle di kendo grid per eventuali override dello stile griglia. NB: l'override non funziona se uso headerClass = "nomeClasse" dove "nomeClass" è dichiarato nel css specifico del componente...*/
.k-grid th,
.k-grid th:first-child {
  background-color: var(--primary-text);
  color: var(--primary-text)!important;
}
/*Style griglia colonne END*/
.k-grid-header .k-grid-filter.k-state-active,
.k-grid-header .k-header-column-menu.k-state-active,
.k-grid-header .k-hierarchy-cell .k-icon.k-state-active {
  color: var(--primary-text)!important;
  background-color: var(--primary-color) !important;
}


.k-grid th,
.k-grid th:first-child {
  background-color: var(--separator);
  color: var(--grid-text-color);
}

/* quando clicco su una testata di colonna per applicare l'ordinamento */
.k-grid th.k-sorted {
  color:white!important;
  background-color: var(--primary-color) !important;
}

/* GRID - END */

/* SCROLL BAR - START */
/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
/* SCROLL BAR - END */

/*utilizzato per esempio nel selected del dropdown menu*/
.k-state-selected {
  color: var(--secondary-color);
  background-color: var(--primary-color-alpha) !important; /* NB !important -> mi sovrascrive lo style della progressBar*/
}

/* colore selezione con mouse ecc */
::-moz-selection {
  /* Code for Firefox */
  color: var(--secondary-color);
  background: var(--primary-color) !important;
}

::selection {
  color: var(--secondary-color);
  background: var(--primary-color) !important;
}

.box-header-icon {
  color: var(--secondary-text);
}

.box-header-icon-right {
  color: var(--secondary-text);
}

.box-header-titolo {
  color: var(--primary-text);
}

.box {
  border-color: var(--separator) !important;
  background-color: var(--secondary-color) !important;
}

.box-header {
  border-color: var(--separator) !important;
}

.toggle-filtri {
  color: var(--secondary-text);
}

.text-magenta {
  color: var(--primary-color);
}

/* SPINNER - START spinner index e overlay-spinner-index-theme-transition */
.overlay-spinner-index {
  background-color: var(--background-color);
  /*background-color: rgba(0, 0, 0, 0.85);*/
  /*background-color: none !important;*/
}

.overlay-spinner-index-theme-transition {
  background-color: var(--background-color) !important;
  -moz-transition: background-color 1s linear;
  -o-transition: background-color 1s linear;
  -webkit-transition: background-color 1s linear;
}
/* SPINNER - END */

.top-menu {
  background-color: var(--background-color) !important;
}

.box-body,
.box-body-grid,
.box-header {
  background-color: var(--background-color-2) !important;
}

.bottom-bar {
  background-color: var(--background-color) !important;
  border: 1px solid var(--background-color) !important;
}

/* MATERIAL - START */
.mat-drawer-content {
  background-color: var(--background-color) !important;
}

.mat-drawer {
  background-color: var(--background-color) !important;
  color: var(--primary-text);
}

.k-drawer-item:hover {
  background-color: var(--secondary-color-hover)!important;
}

/* MATERIAL - END */

.formhint {
  color: var(--secondary-text);
}

/* button-action-box component START*/
.button-action-box-container {
  background-color: var(--background-color) !important;
}
.button-action-box-content {
  background-color: var(--background-color) !important;
  color: var(--primary-text);
}
/* button-action-box component END*/

.text-red {
  color: red;
}

/* GANT style*/
.k-task {
  border-radius: 15px !important;
  background-color: #e51c7366 !important;
  border-color: #e51c7366 !important;
}

.k-task-milestone {
  background-color: #e51c7366 !important;
  border-color: #e51c7366 !important;
  border-radius: 15px !important;
}

/* CONTROLLI OBBLIGATORI */

kendo-textbox.k-input-solid.ng-invalid.dinamo-invalid {
  border: 1px solid red !important;
}

kendo-combobox.k-input-solid.ng-invalid.dinamo-invalid {
  border: 1px solid red !important;
}

kendo-datepicker.k-input-solid.ng-invalid.dinamo-invalid {
  border: 1px solid red !important;
}

.dinamo-grid-icon {
  color: var(--secondary-text);
}