button#home-button {

  background-color: transparent;

  border: none;

  width: 95px;

  height: 95px;

  outline: none;

}



button#home-button:active {

  /* TODO: check that active status is working correclty on the real device */

  -webkit-tap-highlight-color: transparent;

  -webkit-touch-callout: none;

  cursor: pointer;

}



button#home-button:active .background-selected {

  opacity: 1;

}



button#home-button:focus {

  outline: none;

}



/* Stato iniziale (step 0) */

button#home-button[data-current-step="0"] .steps path.active {

  opacity: 0;

}



button#home-button[data-current-step="0"] .steps path.past {

  opacity: 0;

}



button#home-button[data-current-step="0"] .steps path.not-active {

  opacity: 1;

}



/* Generated steps from 1 through 9 */

button#home-button[data-current-step="1"] .steps [data-step="1"] path.active {

  opacity: 1;

}



button#home-button[data-current-step="1"] .steps [data-step="1"] path.past {

  opacity: 0;

}



button#home-button[data-current-step="1"]

  .steps

  [data-step="1"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="2"] .steps [data-step="1"] path.active {

  opacity: 0;

}



button#home-button[data-current-step="2"] .steps [data-step="1"] path.past {

  opacity: 1;

}



button#home-button[data-current-step="2"]

  .steps

  [data-step="1"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="2"] .steps [data-step="2"] path.active {

  opacity: 1;

}



button#home-button[data-current-step="2"] .steps [data-step="2"] path.past {

  opacity: 0;

}



button#home-button[data-current-step="2"]

  .steps

  [data-step="2"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="3"] .steps [data-step="1"] path.active {

  opacity: 0;

}



button#home-button[data-current-step="3"] .steps [data-step="1"] path.past {

  opacity: 1;

}



button#home-button[data-current-step="3"]

  .steps

  [data-step="1"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="3"] .steps [data-step="2"] path.active {

  opacity: 0;

}



button#home-button[data-current-step="3"] .steps [data-step="2"] path.past {

  opacity: 1;

}



button#home-button[data-current-step="3"]

  .steps

  [data-step="2"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="3"] .steps [data-step="3"] path.active {

  opacity: 1;

}



button#home-button[data-current-step="3"] .steps [data-step="3"] path.past {

  opacity: 0;

}



button#home-button[data-current-step="3"]

  .steps

  [data-step="3"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="4"] .steps [data-step="1"] path.active,

button#home-button[data-current-step="4"] .steps [data-step="2"] path.active,

button#home-button[data-current-step="4"] .steps [data-step="3"] path.active {

  opacity: 0;

}



button#home-button[data-current-step="4"] .steps [data-step="1"] path.past,

button#home-button[data-current-step="4"] .steps [data-step="2"] path.past,

button#home-button[data-current-step="4"] .steps [data-step="3"] path.past {

  opacity: 1;

}



button#home-button[data-current-step="4"]

  .steps

  [data-step="1"]

  path.not-active,

button#home-button[data-current-step="4"]

  .steps

  [data-step="2"]

  path.not-active,

button#home-button[data-current-step="4"]

  .steps

  [data-step="3"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="4"] .steps [data-step="4"] path.active {

  opacity: 1;

}



button#home-button[data-current-step="4"] .steps [data-step="4"] path.past {

  opacity: 0;

}



button#home-button[data-current-step="4"]

  .steps

  [data-step="4"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="5"] .steps [data-step="1"] path.active,

button#home-button[data-current-step="5"] .steps [data-step="2"] path.active,

button#home-button[data-current-step="5"] .steps [data-step="3"] path.active,

button#home-button[data-current-step="5"] .steps [data-step="4"] path.active {

  opacity: 0;

}



button#home-button[data-current-step="5"] .steps [data-step="1"] path.past,

button#home-button[data-current-step="5"] .steps [data-step="2"] path.past,

button#home-button[data-current-step="5"] .steps [data-step="3"] path.past,

button#home-button[data-current-step="5"] .steps [data-step="4"] path.past {

  opacity: 1;

}



button#home-button[data-current-step="5"]

  .steps

  [data-step="1"]

  path.not-active,

button#home-button[data-current-step="5"]

  .steps

  [data-step="2"]

  path.not-active,

button#home-button[data-current-step="5"]

  .steps

  [data-step="3"]

  path.not-active,

button#home-button[data-current-step="5"]

  .steps

  [data-step="4"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="5"] .steps [data-step="5"] path.active {

  opacity: 1;

}



button#home-button[data-current-step="5"] .steps [data-step="5"] path.past {

  opacity: 0;

}



button#home-button[data-current-step="5"]

  .steps

  [data-step="5"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="6"] .steps [data-step="1"] path.active,

button#home-button[data-current-step="6"] .steps [data-step="2"] path.active,

button#home-button[data-current-step="6"] .steps [data-step="3"] path.active,

button#home-button[data-current-step="6"] .steps [data-step="4"] path.active,

button#home-button[data-current-step="6"] .steps [data-step="5"] path.active {

  opacity: 0;

}



button#home-button[data-current-step="6"] .steps [data-step="1"] path.past,

button#home-button[data-current-step="6"] .steps [data-step="2"] path.past,

button#home-button[data-current-step="6"] .steps [data-step="3"] path.past,

button#home-button[data-current-step="6"] .steps [data-step="4"] path.past,

button#home-button[data-current-step="6"] .steps [data-step="5"] path.past {

  opacity: 1;

}



button#home-button[data-current-step="6"]

  .steps

  [data-step="1"]

  path.not-active,

button#home-button[data-current-step="6"]

  .steps

  [data-step="2"]

  path.not-active,

button#home-button[data-current-step="6"]

  .steps

  [data-step="3"]

  path.not-active,

button#home-button[data-current-step="6"]

  .steps

  [data-step="4"]

  path.not-active,

button#home-button[data-current-step="6"]

  .steps

  [data-step="5"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="6"] .steps [data-step="6"] path.active {

  opacity: 1;

}



button#home-button[data-current-step="6"] .steps [data-step="6"] path.past {

  opacity: 0;

}



button#home-button[data-current-step="6"]

  .steps

  [data-step="6"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="7"] .steps [data-step="1"] path.active,

button#home-button[data-current-step="7"] .steps [data-step="2"] path.active,

button#home-button[data-current-step="7"] .steps [data-step="3"] path.active,

button#home-button[data-current-step="7"] .steps [data-step="4"] path.active,

button#home-button[data-current-step="7"] .steps [data-step="5"] path.active,

button#home-button[data-current-step="7"] .steps [data-step="6"] path.active {

  opacity: 0;

}



button#home-button[data-current-step="7"] .steps [data-step="1"] path.past,

button#home-button[data-current-step="7"] .steps [data-step="2"] path.past,

button#home-button[data-current-step="7"] .steps [data-step="3"] path.past,

button#home-button[data-current-step="7"] .steps [data-step="4"] path.past,

button#home-button[data-current-step="7"] .steps [data-step="5"] path.past,

button#home-button[data-current-step="7"] .steps [data-step="6"] path.past {

  opacity: 1;

}



button#home-button[data-current-step="7"]

  .steps

  [data-step="1"]

  path.not-active,

button#home-button[data-current-step="7"]

  .steps

  [data-step="2"]

  path.not-active,

button#home-button[data-current-step="7"]

  .steps

  [data-step="3"]

  path.not-active,

button#home-button[data-current-step="7"]

  .steps

  [data-step="4"]

  path.not-active,

button#home-button[data-current-step="7"]

  .steps

  [data-step="5"]

  path.not-active,

button#home-button[data-current-step="7"]

  .steps

  [data-step="6"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="7"] .steps [data-step="7"] path.active {

  opacity: 1;

}



button#home-button[data-current-step="7"] .steps [data-step="7"] path.past {

  opacity: 0;

}



button#home-button[data-current-step="7"]

  .steps

  [data-step="7"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="8"] .steps [data-step="1"] path.active,

button#home-button[data-current-step="8"] .steps [data-step="2"] path.active,

button#home-button[data-current-step="8"] .steps [data-step="3"] path.active,

button#home-button[data-current-step="8"] .steps [data-step="4"] path.active,

button#home-button[data-current-step="8"] .steps [data-step="5"] path.active,

button#home-button[data-current-step="8"] .steps [data-step="6"] path.active,

button#home-button[data-current-step="8"] .steps [data-step="7"] path.active {

  opacity: 0;

}



button#home-button[data-current-step="8"] .steps [data-step="1"] path.past,

button#home-button[data-current-step="8"] .steps [data-step="2"] path.past,

button#home-button[data-current-step="8"] .steps [data-step="3"] path.past,

button#home-button[data-current-step="8"] .steps [data-step="4"] path.past,

button#home-button[data-current-step="8"] .steps [data-step="5"] path.past,

button#home-button[data-current-step="8"] .steps [data-step="6"] path.past,

button#home-button[data-current-step="8"] .steps [data-step="7"] path.past {

  opacity: 1;

}



button#home-button[data-current-step="8"]

  .steps

  [data-step="1"]

  path.not-active,

button#home-button[data-current-step="8"]

  .steps

  [data-step="2"]

  path.not-active,

button#home-button[data-current-step="8"]

  .steps

  [data-step="3"]

  path.not-active,

button#home-button[data-current-step="8"]

  .steps

  [data-step="4"]

  path.not-active,

button#home-button[data-current-step="8"]

  .steps

  [data-step="5"]

  path.not-active,

button#home-button[data-current-step="8"]

  .steps

  [data-step="6"]

  path.not-active,

button#home-button[data-current-step="8"]

  .steps

  [data-step="7"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="8"] .steps [data-step="8"] path.active {

  opacity: 1;

}



button#home-button[data-current-step="8"] .steps [data-step="8"] path.past {

  opacity: 0;

}



button#home-button[data-current-step="8"]

  .steps

  [data-step="8"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="9"] .steps [data-step="1"] path.active,

button#home-button[data-current-step="9"] .steps [data-step="2"] path.active,

button#home-button[data-current-step="9"] .steps [data-step="3"] path.active,

button#home-button[data-current-step="9"] .steps [data-step="4"] path.active,

button#home-button[data-current-step="9"] .steps [data-step="5"] path.active,

button#home-button[data-current-step="9"] .steps [data-step="6"] path.active,

button#home-button[data-current-step="9"] .steps [data-step="7"] path.active,

button#home-button[data-current-step="9"] .steps [data-step="8"] path.active {

  opacity: 0;

}



button#home-button[data-current-step="9"] .steps [data-step="1"] path.past,

button#home-button[data-current-step="9"] .steps [data-step="2"] path.past,

button#home-button[data-current-step="9"] .steps [data-step="3"] path.past,

button#home-button[data-current-step="9"] .steps [data-step="4"] path.past,

button#home-button[data-current-step="9"] .steps [data-step="5"] path.past,

button#home-button[data-current-step="9"] .steps [data-step="6"] path.past,

button#home-button[data-current-step="9"] .steps [data-step="7"] path.past,

button#home-button[data-current-step="9"] .steps [data-step="8"] path.past {

  opacity: 1;

}



button#home-button[data-current-step="9"]

  .steps

  [data-step="1"]

  path.not-active,

button#home-button[data-current-step="9"]

  .steps

  [data-step="2"]

  path.not-active,

button#home-button[data-current-step="9"]

  .steps

  [data-step="3"]

  path.not-active,

button#home-button[data-current-step="9"]

  .steps

  [data-step="4"]

  path.not-active,

button#home-button[data-current-step="9"]

  .steps

  [data-step="5"]

  path.not-active,

button#home-button[data-current-step="9"]

  .steps

  [data-step="6"]

  path.not-active,

button#home-button[data-current-step="9"]

  .steps

  [data-step="7"]

  path.not-active,

button#home-button[data-current-step="9"]

  .steps

  [data-step="8"]

  path.not-active {

  opacity: 0;

}



button#home-button[data-current-step="9"] .steps [data-step="9"] path.active {

  opacity: 1;

}



button#home-button[data-current-step="9"] .steps [data-step="9"] path.past {

  opacity: 0;

}



button#home-button[data-current-step="9"]

  .steps

  [data-step="9"]

  path.not-active {

  opacity: 0;

}



button#home-button svg {

  width: 100%;

  height: 100%;

}



button#home-button svg .background-selected {

  opacity: 0;

  transition: all 0.3s ease;

}



button#home-button svg .steps path {

  transition: all 0.8s ease;

}



button#home-button svg .steps path.active,

button#home-button svg .steps path.past {

  opacity: 0;

}