/*!
 Material Components for the web
 Copyright (c) 2017 Google Inc.
 License: Apache-2.0
*/
/**
 * The css property used for elevation. In most cases this should not be changed. It is exposed
 * as a variable for abstraction / easy use when needing to reference the property directly, for
 * example in a `will-change` rule.
 */
/**
 * The default duration value for elevation transitions.
 */
/**
 * The default easing value for elevation transitions.
 */
/**
 * Applies the correct css rules to an element to give it the elevation specified by $z-value.
 * The $z-value must be between 0 and 24.
 */
/**
 * Returns a string that can be used as the value for a `transition` property for elevation.
 * Calling this function directly is useful in situations where a component needs to transition
 * more than one property.
 *
 * ```scss
 * .foo {
 *   transition: mdc-elevation-transition-rule(), opacity 100ms ease;
 *   will-change: $mdc-elevation-property, opacity;
 * }
 * ```
 */
/**
 * Applies the correct css rules needed to have an element transition between elevations.
 * This mixin should be applied to elements whose elevation values will change depending on their
 * context (e.g. when active or disabled).
 */
.mdc-switch {
  display: inline-block;
  position: relative; }
  .mdc-switch__native-control {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 14px;
    opacity: 0;
    cursor: pointer;
    z-index: 2; }
  .mdc-switch__background {
    display: block;
    position: relative;
    width: 34px;
    height: 14px;
    border-radius: 7px;
    outline: none;
    background-color: transparent;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
    .mdc-switch--theme-dark .mdc-switch__background,
    .mdc-theme--dark .mdc-switch__background {
      background-color: transparent; }
    .mdc-switch__background::before {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      -webkit-transition: opacity 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
      transition: opacity 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 7px;
      background-color: #000;
      opacity: .38;
      content: ""; }
      .mdc-switch--theme-dark .mdc-switch__background::before,
      .mdc-theme--dark .mdc-switch__background::before {
        background-color: #fff;
        opacity: .3; }
    .mdc-switch__background .mdc-switch__knob {
      -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
              box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
      display: block;
      position: absolute;
      top: -3px;
      left: 0;
      width: 20px;
      height: 20px;
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
      transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
      transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
      transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 10px;
      background-color: #fafafa;
      z-index: 1; }
      .mdc-switch--theme-dark .mdc-switch__background .mdc-switch__knob,
      .mdc-theme--dark .mdc-switch__background .mdc-switch__knob {
        background-color: #bdbdbd; }
      .mdc-switch__background .mdc-switch__knob::before {
        position: absolute;
        top: -14px;
        left: -14px;
        width: 48px;
        height: 48px;
        -webkit-transform: scale(0);
                transform: scale(0);
        -webkit-transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 24px;
        background-color: transparent;
        opacity: .2;
        content: ""; }

.mdc-switch__native-control:focus ~ .mdc-switch__background .mdc-switch__knob::before {
  position: absolute;
  width: 48px;
  height: 48px;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 24px;
  background-color: #9e9e9e; }
  .mdc-switch--theme-dark .mdc-switch__native-control:focus ~ .mdc-switch__background .mdc-switch__knob::before,
  .mdc-theme--dark .mdc-switch__native-control:focus ~ .mdc-switch__background .mdc-switch__knob::before {
    background-color: #f1f1f1;
    opacity: .14; }

.mdc-switch__native-control:checked ~ .mdc-switch__background::before {
  /* @alternate */
  background-color: #3f51b5;
  background-color: var(--mdc-theme-primary, #3f51b5);
  opacity: .5; }

.mdc-switch__native-control:checked ~ .mdc-switch__background .mdc-switch__knob {
  /* @alternate */
  background-color: #3f51b5;
  background-color: var(--mdc-theme-primary, #3f51b5);
  -webkit-transform: translateX(14px);
          transform: translateX(14px);
  -webkit-transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1); }
  .mdc-switch__native-control:checked ~ .mdc-switch__background .mdc-switch__knob::before {
    /* @alternate */
    background-color: #3f51b5;
    background-color: var(--mdc-theme-primary, #3f51b5);
    opacity: .15; }
    .mdc-switch--theme-dark .mdc-switch__native-control:checked ~ .mdc-switch__background .mdc-switch__knob::before,
    .mdc-theme--dark .mdc-switch__native-control:checked ~ .mdc-switch__background .mdc-switch__knob::before {
      /* @alternate */
      background-color: #3f51b5;
      background-color: var(--mdc-theme-primary, #3f51b5); }

.mdc-switch__native-control:disabled {
  cursor: initial; }

.mdc-switch__native-control:disabled ~ .mdc-switch__background::before {
  background-color: #000;
  opacity: .12; }
  .mdc-switch--theme-dark .mdc-switch__native-control:disabled ~ .mdc-switch__background::before,
  .mdc-theme--dark .mdc-switch__native-control:disabled ~ .mdc-switch__background::before {
    background-color: #fff;
    opacity: .1; }

.mdc-switch__native-control:disabled ~ .mdc-switch__background .mdc-switch__knob {
  background-color: #bdbdbd; }
  .mdc-switch--theme-dark .mdc-switch__native-control:disabled ~ .mdc-switch__background .mdc-switch__knob,
  .mdc-theme--dark .mdc-switch__native-control:disabled ~ .mdc-switch__background .mdc-switch__knob {
    background-color: #424242; }