/**
 * The default transition, used when the element is visible
 * since the beginning of the animation
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The enter transition, used when the element is not visible on the screen
 * since the beginning of the animation and become visible
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The leave transition, used when the element is visible on the screen
 * since the beginning of the animation and is removed
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The stand transition, used when the element is going to accelerate,
 * like movements from bottom to top
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The out transition, used when the element is going to deaccelerate,
 * like movements from top to bottom
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The elevation transition duration
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The elevation transition duration
 * ---
 * @access private
 * @type transition
 * @group transition
 */
.md-button {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  border: 0;
  padding: 0;
  min-width: 88px;
  height: 36px;
  margin: 6px 8px;
  user-select: none;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--md-on-surface);
  background-color: transparent;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.md-button.md-primary {
  color: var(--md-primary);
}
.md-button.md-on-primary {
  color: var(--md-on-primary);
}
.md-button.md-accent {
  color: var(--md-secondary);
}
.md-button.md-on-accent {
  color: var(--md-on-secondary);
}
.md-button:active {
  outline: none;
}
.md-button[disabled] {
  cursor: default;
  pointer-events: none;
  color: var(--md-on-surface-disabled);
}
.md-button.md-dense {
  height: 32px;
  font-size: 13px;
}
.md-button + .md-button {
  margin-left: 0;
}
.md-button .md-ripple {
  padding: 0 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.md-button.md-stroked {
  border: 1px solid var(--md-outline);
}
.md-button.md-stroked.md-primary, .md-button.md-stroked.md-accent {
  border-color: currentcolor;
}

.md-button.md-flat {
  background-color: var(--md-surface);
}
.md-button.md-flat > .md-state-overlay {
  display: none;
}

.md-button.md-raised:not([disabled]) {
  background-color: var(--md-elevation-2);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.md-button.md-flat.md-primary,
.md-button.md-raised.md-primary {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
}
.md-button.md-flat.md-accent,
.md-button.md-raised.md-accent {
  background-color: var(--md-secondary);
  color: var(--md-on-secondary);
}
.md-button.md-flat:not(.md-primary, .md-accent)[disabled],
.md-button.md-raised:not(.md-primary, .md-accent)[disabled] {
  background-color: var(--md-outline);
  color: var(--md-on-surface-disabled);
}

.md-button.md-icon-button,
.md-button.md-fab {
  overflow: hidden;
  border-radius: 50%;
}
.md-button.md-icon-button::before,
.md-button.md-fab::before {
  border-radius: 50%;
}
.md-button.md-icon-button .md-ripple,
.md-button.md-fab .md-ripple {
  border-radius: 50%;
}

.md-button.md-icon-button .md-ripple-wave,
.md-button.md-fab.md-dense .md-ripple-wave {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

.md-button.md-icon-button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin: 0 6px;
}
.md-button.md-icon-button:not(.md-primary, .md-accent) {
  color: var(--md-on-surface-medium);
}
.md-button.md-icon-button:not(.md-primary, .md-accent).md-on-primary {
  color: var(--md-on-primary-medium);
}
.md-button.md-icon-button:not(.md-primary, .md-accent).md-on-accent {
  color: var(--md-on-secondary-medium);
}
.md-button.md-icon-button.md-dense {
  width: 32px;
  min-width: 32px;
  height: 32px;
}
.md-button.md-icon-button .md-ripple-enter-active {
  transition-duration: 1.2s;
}
.md-button.md-icon-button[disabled] {
  opacity: 0.38;
}

.md-button.md-fab {
  background-color: var(--md-elevation-6);
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  width: 56px;
  height: 56px;
  min-width: 0;
  overflow: hidden;
  color: var(--md-on-secondary);
  background-color: var(--md-secondary);
}
.md-button.md-fab.md-primary {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
}
.md-button.md-fab.md-mini, .md-button.md-fab.md-dense {
  width: 40px;
  height: 40px;
}
.md-button.md-fab.md-fab-top-right, .md-button.md-fab.md-fab-top-left {
  position: absolute;
  top: 24px;
}
.md-button.md-fab.md-fab-bottom-right, .md-button.md-fab.md-fab-bottom-left {
  position: absolute;
  bottom: 24px;
}
.md-button.md-fab.md-fab-top-center, .md-button.md-fab.md-fab-bottom-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.md-button.md-fab.md-fab-top-center {
  top: 24px;
}
.md-button.md-fab.md-fab-bottom-center {
  bottom: 24px;
}
.md-button.md-fab.md-fab-top-right, .md-button.md-fab.md-fab-bottom-right {
  right: 24px;
}
.md-button.md-fab.md-fab-top-left, .md-button.md-fab.md-fab-bottom-left {
  left: 24px;
}
.md-button.md-fab.md-fixed {
  position: fixed;
}
.md-button.md-fab .md-ripple {
  padding: 0;
}

.md-button.md-raised.md-primary .md-state-overlay, .md-button.md-raised.md-accent .md-state-overlay,
.md-button.md-flat.md-primary .md-state-overlay,
.md-button.md-flat.md-accent .md-state-overlay,
.md-button.md-fab.md-primary .md-state-overlay,
.md-button.md-fab.md-accent .md-state-overlay {
  background-color: #fff;
}
.md-button.md-raised.md-primary.md-disabled, .md-button.md-raised.md-primary[disabled], .md-button.md-raised.md-accent.md-disabled, .md-button.md-raised.md-accent[disabled],
.md-button.md-flat.md-primary.md-disabled,
.md-button.md-flat.md-primary[disabled],
.md-button.md-flat.md-accent.md-disabled,
.md-button.md-flat.md-accent[disabled],
.md-button.md-fab.md-primary.md-disabled,
.md-button.md-fab.md-primary[disabled],
.md-button.md-fab.md-accent.md-disabled,
.md-button.md-fab.md-accent[disabled] {
  opacity: 0.38;
}

.md-button-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.25px;
}
.md-button-content > .md-icon:not(:only-child),
.md-button-content > .md-spinner:not(:only-child) {
  font-size: 1.2em;
  margin-right: 6px;
}
.md-button-content > .md-icon:only-child,
.md-button-content > .md-spinner:only-child {
  font-size: 24px;
}