.mdl-card__actions {
  display: flex;
}

.center {
  margin: 8px auto;
}

.mdl-spinner--x3 {
  width: 100px;
  height: 100px;
}

input {
  padding: 5px 10px 5px 0px;
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.f-12 { font-size: 12px; }
.f-14 { font-size: 14px; }
.f-20 { font-size: 20px; line-height: 28px; }
.f-28 { font-size: 28px; line-height: 36px; }

/*input[type=range][orient=vertical] {
  top: 50px;
  transform: rotate(270deg);
}*/
.turn {
  transform: rotate(270deg);
}

.volume-control {
  position: absolute;
  transform: rotate(90deg);
  transform-origin: top left;
  height: 40px;
  align-items: center;
  display: flex;
  flex-direction: row;
  background: rgb(244,67,54) !important;
  border: 1.5px solid transparent !important;
  border-radius: 4px; 
  text-align: center;
}

.volume-control--open {
  border: 1.5px solid white !important;
}
.volume-control:hover {
  border: 1.5px solid white !important;
}

.mdl-slider__container {
  transform: rotate(180deg);
}

.mdl-slider {
  margin: 0 0 0 30px;
}

.mdl-slider__background-flex {
  margin: 0 0 0 30px;
}

.mdl-slider__background-lower {
  background: white !important;
}

input[type=range]:not(.is-lowest-value)::-webkit-slider-thumb {
  background: white !important;
}
/*
.mdl-slider__background-lower {
  background: rgb(83,109,254) !important;
}

input[type=range]:not(.is-lowest-value)::-webkit-slider-thumb {
  background: rgb(83,109,254) !important;
}
*/