/**
 * 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 layout system breakpoints
 * ---
 * @access private
 * @type layout
 * @group layout
 */
/**
 * The available gutter sizes
 * ---
 * @access private
 * @type layout
 * @group layout
 */
/**
 * Breakpoint
 */
/**
 * Base
 */
/**
 * Layout Item
 */
/**
 * Hide Element
 */
.md-toolbar,
.md-toolbar-row {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  align-content: center;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: opacity, background-color, box-shadow, transform, color, min-height;
  will-change: opacity, background-color, box-shadow, transform, color, min-height;
}
@media (max-width: 960px) {
  .md-toolbar,
.md-toolbar-row {
    min-height: 48px;
  }
}
@media (max-width: 600px) {
  .md-toolbar,
.md-toolbar-row {
    min-height: 56px;
  }
}

.md-toolbar {
  padding: 0 16px;
  flex-flow: row wrap;
  position: relative;
  z-index: 2;
}
@media (max-width: 960px) {
  .md-toolbar {
    padding: 0 8px;
  }
}
.md-toolbar.md-primary {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
}
.md-toolbar.md-accent {
  background-color: var(--md-secondary);
  color: var(--md-on-secondary);
}
.md-toolbar.md-transparent {
  background-color: transparent;
}
.md-toolbar.md-dense {
  min-height: 48px;
}
.md-toolbar.md-medium .md-toolbar-row, .md-toolbar.md-large .md-toolbar-row {
  min-height: 64px;
}
.md-toolbar.md-medium {
  min-height: 88px;
}
.md-toolbar.md-large {
  min-height: 128px;
  align-content: inherit;
}
.md-toolbar.md-large.md-dense {
  min-height: 96px;
}
.md-toolbar.md-large.md-dense .md-toolbar-row + .md-toolbar-row {
  min-height: 32px;
}
.md-toolbar .md-toolbar-offset {
  margin-left: 56px;
}
@media (max-width: 960px) {
  .md-toolbar .md-toolbar-offset {
    margin-left: 48px;
  }
}
.md-toolbar .md-button,
.md-toolbar .md-icon {
  z-index: 1;
}
.md-toolbar .md-button ~ .md-title,
.md-toolbar .md-icon ~ .md-title {
  margin-left: 24px;
}
@media (max-width: 960px) {
  .md-toolbar .md-button ~ .md-title,
.md-toolbar .md-icon ~ .md-title {
    margin-left: 16px;
  }
}
.md-toolbar .md-button:last-child {
  margin-right: 0;
}
.md-toolbar .md-button:first-child {
  margin-left: 0;
}
.md-toolbar .md-display-2,
.md-toolbar .md-display-1,
.md-toolbar .md-title {
  margin: 0;
  margin-left: 8px;
  overflow: hidden;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}
.md-toolbar .md-display-1 {
  padding: 12px 0;
}
.md-toolbar .md-field {
  margin-top: 2px;
  margin-bottom: 14px;
  padding-top: 16px;
}

.md-toolbar-row {
  align-self: flex-start;
}

.md-toolbar-section-start,
.md-toolbar-section-end {
  display: flex;
  align-items: center;
  flex: 1;
}

.md-toolbar-section-start {
  justify-content: flex-start;
  order: 0;
}

.md-toolbar-section-end {
  justify-content: flex-end;
  order: 10;
}