/* Default entities style */
html, body {
  height: 100%;
  background: none;
  -webkit-tap-highlight-color: rgba(0,0,0, 0);
  -ms-user-select: none;
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
  -webkit-perspective: 1000;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  color: #222;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden;

  -webkit-transition: background-color 1.2s ease-in-out;
  -moz-transition: background-color 1.2s ease-in-out;
  transition: background-color 1.2s ease-in-out;
}


/* Our main app */
.ClocketteApp {

}

/* Default entities style */
html, body {
  height: 100%;
  background: #433478;
  -webkit-tap-highlight-color: rgba(0,0,0, 0);
  -ms-user-select: none;
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
  -webkit-perspective: 1000;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden;

  -webkit-transition: background-color 1.2s ease-in-out;
  -moz-transition: background-color 1.2s ease-in-out;
  transition: background-color 1.2s ease-in-out;
}


/* Our main app */
#ClocketteApp {
  padding: 20px;
}

.hr {
  height: 1px;
  background: none;
  border-bottom: solid 1px rgba(255,255,255, .3);
}

Set app background color ; Add shared .hr class
Set app background color ; Add shared .hr class
