html {
  width: 600px;
  max-width: 100%;
  background-color: var(--background-colour);
  background-image: var(--background-image);
  direction: __MSG_@@bidi_dir__;
}
body {
  margin: 0;
  color: var(--cr-primary-text-colour);
  font-family: Roboto,'Segoe UI',Arial,'Microsoft Yahei',sans-serif;
  font-size: 81.25%;
  border-top: var(--cr-separator-line);
}
select {
  align-items: center;
  display: inline-flex;
  -webkit-appearance: none;
  background: var(--image-arrow-down) calc(100% - 8px) center no-repeat;
  background-color: var(--md-select-bg-colour);
  background-size: 10px;
  border: none;
  border-radius: 4px;
  color: var(--cr-primary-text-colour);
  cursor: pointer;
  max-width: 100%;
  outline: none;
  padding: 6px 0;
  -webkit-padding-end: 21px;
  -webkit-padding-start: 8px;
  padding-inline-end: 21px;
  padding-inline-start: 8px;
  width: var(--md-select-width, 200px);
}
select:active {
  box-shadow: none;
}
select:focus {
  box-shadow: 0 0 0 2px var(--md-select-focus-shadow-colour);
}
optgroup, option {
  background-color: var(--md-select-option-bg-colour);
}
input[type=checkbox] {
  display: none;
}
.checkbox {
  cursor: pointer;
  width: 34px;
  position: relative;
}
.checkbox-bar {
  background-color: var(--cr-toggle-unchecked-bar-colour);
  border-radius: 8px;
  height: 12px;
  left: 3px;
  position: absolute;
  top: 2px;
  transition: background-color linear 80ms;
  width: 28px;
  z-index: 0;
}
input[type=checkbox]:checked + .checkbox .checkbox-bar {
  background-color: var(--cr-toggle-checked-bar-colour);
  opacity: .5;
}
.checkbox-knob {
  background-color: var(--cr-toggle-unchecked-button-colour);
  border-radius: 50%;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .4);
  display: block;
  height: 16px;
  position: relative;
  -webkit-margin-start: 0;
  margin-inline-start: 0;
  transition: -webkit-margin-start linear 80ms, margin-inline-start linear 80ms, background-color linear 80ms;
  width: 16px;
  z-index: 1;
}
input[type=checkbox]:checked + .checkbox .checkbox-knob {
  background-color: var(--cr-toggle-checked-button-colour);
  -webkit-margin-start: 18px;
  margin-inline-start: 18px;
}
.checkbox-knob .ink {
  color: var(--cr-toggle-unchecked-ink-colour);
  position: absolute;
  top: -12px;
  left: -12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  pointer-events: none;
  overflow: hidden;
  transition: color linear 80ms;
  transform: translate(0);
}
input[type=checkbox]:checked + .checkbox .checkbox-knob .ink {
  color: var(--cr-toggle-checked-ink-colour);
}
@keyframes zoom-on {
  0% { transform: scale(0) }
  38% { opacity: .15 }
  99% { transform: scale(1) }
  to { opacity: 0 }
}
@keyframes zoom-off {
  0% { transform: scale(0) }
  38% { opacity: .2 }
  99% { transform: scale(1) }
  to { opacity: 0 }
}
.checkbox-knob .ink .ripple {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: currentcolor;
  position: absolute;
  left: -8px;
  top: -8px;
  pointer-events: none;
  will-change: height, opacity, transform, width;
  animation: zoom-on 800ms cubic-bezier(.2, .9, .1, .9) forwards;
}
input[type=checkbox]:checked + .checkbox .checkbox-knob .ink .ripple {
  animation-name: zoom-off;
}
.line {
  border-top: var(--cr-separator-line);
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  line-height: 154%;
}
.toggle label {
  cursor: pointer;
  align-items: center;
  display: flex;
  width: 100%;
}
.select label {
  align-items: center;
}
.toggle label > div:first-child,
.select label {
  padding: 12px 0;
  -webkit-margin-end: 20px;
  margin-inline-end: 20px;
  flex: 1;
  flex-basis: 0.000000001px;
}
.toggle label > div:first-child > :not(:first-child),
.select label > :not(:first-child) {
  color: var(--cr-secondary-text-colour);
}
