html {
  box-sizing: border-box;
}

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

body,
html {
  font: 400 16px/55px 'Roboto', Arial, sans-serif;
  height: 100%;
  width: 100%;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.creators-sidenav {
  background: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.creators-sidenav__item {
  color: rgba(0,0,0,.87);
  display: block;
  padding: 0 20px 0 40px;
  text-transform: none;
  white-space: normal;
  text-decoration: none;
  transition: background-color .3s ease-out;
}

.creators-sidenav__item--isActive {
  background-color: #f1f1f1;
}

.creators-sidenav__item:hover {
  background-color: #f1f1f1;
}

.creators-sidenav__item:visited {
  color: inherit;
}

[dir="rtl"] .creators-sidenav__item {
  text-align: right;
  padding: 0 40px 0 20px;
}