/**
 * 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
 */
.md-list-item-expand {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: border 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: border;
}
.md-list-item-expand.md-active > .md-list-item-content > .md-list-expand-icon {
  perspective: 1000px;
  perspective-origin: 50% 50%;
  transform: rotateX(180deg);
}
.md-list-item-expand.md-active .md-list-expand {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.md-list-item-expand .md-list-expand {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translate3d(0, -24px, 0);
  transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-property: transform, opacity;
  will-change: transform, opacity;
}
.md-list-item-expand .md-list-expand-icon {
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}

/**
 * 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
 */
.md-list-item {
  height: auto;
  position: relative;
  z-index: 2;
}
.md-list-item.md-inset .md-list-item-content {
  padding-left: 72px;
}
.md-list-item .md-icon {
  font-size: 24px;
  margin: 0;
  transition-property: color, margin-right;
  color: var(--md-on-surface-medium);
}
.md-list-item .md-icon.md-primary {
  color: var(--md-primary);
}
.md-list-item .md-icon.md-accent {
  color: var(--md-secondary);
}

.md-list-item-container {
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  text-transform: none;
}
.md-list-item-container:not(.md-list-item-default, [disabled]) > .md-list-item-content {
  user-select: none;
  cursor: pointer;
}
.md-list-item-container.md-button-clean {
  padding: 0;
  background-color: transparent;
}
.md-list-item-container.md-button-clean:hover {
  opacity: 1;
  text-decoration: none;
}

button.md-list-item-button {
  border: 0;
  color: var(--md-on-surface);
}

a.md-list-item-link {
  position: relative;
  display: block;
}

a.md-list-item-container {
  position: relative;
  display: block;
  color: var(--md-on-surface);
}

.md-list-item-content {
  min-height: 48px;
  padding: 4px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: padding 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: padding;
}
.md-list.md-dense .md-list-item-content {
  min-height: 40px;
  font-size: 13px;
}
.md-list.md-dense .md-list-item-content > .md-avatar {
  margin-top: 0;
  margin-bottom: 0;
}
.md-list.md-dense .md-list-item-content > .md-avatar:not(.md-small) {
  width: 36px;
  min-width: 36px;
  height: 36px;
}
.md-list.md-dense .md-list-item-content > .md-avatar:first-child {
  margin-right: 20px;
}
.md-list.md-double-line .md-list-item-content {
  min-height: 72px;
}
.md-list.md-double-line.md-dense .md-list-item-content {
  min-height: 60px;
}
.md-list.md-triple-line .md-list-item-content {
  min-height: 88px;
}
.md-list.md-triple-line.md-dense .md-list-item-content {
  min-height: 76px;
}
.md-list-item-content .md-list-action {
  margin: 0 -10px 0 0;
}
.md-list-item-content .md-list-action:last-of-type {
  margin: 0 -10px 0 16px;
}
.md-list.md-triple-line .md-list-item-content .md-list-action:last-of-type {
  align-self: flex-start;
}
.md-list-item-content > .md-icon:first-child {
  margin-right: 32px;
}
.md-list-item-content > .md-icon:last-child {
  margin-left: 16px;
}
.md-list-item-content > .md-checkbox,
.md-list-item-content > .md-radio {
  margin: 0;
}
.md-list-item-content > .md-checkbox:first-child,
.md-list-item-content > .md-radio:first-child {
  margin-right: 36px;
}
.md-list-item-content > .md-switch {
  margin: 0;
}
.md-list-item-content > .md-switch:first-child {
  margin-right: 22px;
}
.md-list-item-content > .md-avatar {
  margin: 4px 0;
}
.md-list-item-content > .md-avatar:first-child {
  margin-right: 16px;
}

.md-list-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  line-height: 1.25em;
  white-space: nowrap;
}
.md-list.md-dense .md-list-item-text {
  font-size: 13px;
}
.md-list-item-text * {
  width: 100%;
  margin: 0;
  overflow: hidden;
  line-height: 1.25em;
  text-overflow: ellipsis;
}
.md-list-item-text :nth-child(2),
.md-list-item-text :nth-child(3) {
  font-size: 14px;
}
.md-list.md-dense .md-list-item-text * {
  font-size: 13px;
}

.md-list {
  margin: 0;
  padding: 8px 0;
  display: flex;
  flex-flow: column nowrap;
  position: relative;
  list-style: none;
}
.md-list.md-dense {
  padding: 4px 0;
}
.md-list .md-divider {
  margin-top: -1px;
}
.md-list .md-subheader.md-inset {
  padding-left: 72px;
}
.md-list > .md-subheader:first-of-type {
  margin-top: -8px;
}
.md-list.md-double-line .md-list-item-text :nth-child(2) {
  color: var(--md-text-accent);
}
.md-list.md-triple-line .md-list-item-text :nth-child(3) {
  color: var(--md-text-accent);
}
.md-list [disabled] {
  color: var(--md-on-surface-disabled);
}
.md-list .md-selected .md-list-item-content,
.md-list .router-active .md-list-item-content {
  color: var(--md-primary);
}
.md-list .md-list-item-expand.md-active {
  border-color: var(--md-outline);
}
.md-list .md-list-item-expand:not(.md-list-item-default, [disabled]) > .md-list-item-content:hover {
  background-color: var(--md-outline);
  color: var(--md-on-surface);
}