md-expansion-panel {
  background: #FFF; }
  md-expansion-panel md-expansion-panel-collapsed,
  md-expansion-panel .md-expansion-panel-footer-container,
  md-expansion-panel .md-expansion-panel-header-container {
    background: #FFF; }
    md-expansion-panel md-expansion-panel-collapsed .md-title,
    md-expansion-panel md-expansion-panel-collapsed .md-summary,
    md-expansion-panel .md-expansion-panel-footer-container .md-title,
    md-expansion-panel .md-expansion-panel-footer-container .md-summary,
    md-expansion-panel .md-expansion-panel-header-container .md-title,
    md-expansion-panel .md-expansion-panel-header-container .md-summary {
      color: #333; }
  md-expansion-panel md-expansion-panel-footer .md-expansion-panel-footer-container,
  md-expansion-panel md-expansion-panel-header .md-expansion-panel-header-container {
    border-color: #DDD; }
  md-expansion-panel .md-expansion-panel-icon svg {
    fill: #999; }
  md-expansion-panel[disabled] md-expansion-panel-collapsed .md-title,
  md-expansion-panel[disabled] md-expansion-panel-collapsed .md-summary {
    color: #DDD; }
  md-expansion-panel[disabled] .md-expansion-panel-icon svg {
    fill: #DDD; }
  md-expansion-panel:not(.md-open):not([disabled]):focus,
  md-expansion-panel:not(.md-open):not([disabled]):focus md-expansion-panel-collapsed {
    background: #EEE; }

.layout-padding > md-expansion-panel-group {
  padding: 0; }

/* --- Expansion Panel --- */
md-expansion-panel {
  display: block;
  position: relative;
  outline: none;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24); }
  md-expansion-panel.md-open {
    margin-top: 16px;
    margin-bottom: 16px; }
    md-expansion-panel.md-open:first-of-type {
      margin-top: 0; }
  md-expansion-panel.md-close {
    overflow: hidden; }
  md-expansion-panel:not(.md-no-animation).md-open {
    -webkit-transition: margin-top 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), margin-bottom 0.12s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: margin-top 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), margin-bottom 0.12s cubic-bezier(0.25, 0.8, 0.25, 1); }
  md-expansion-panel:not(.md-no-animation).md-close {
    -webkit-transition: margin-top 0.08s cubic-bezier(0.25, 0.8, 0.25, 1), margin-bottom 0.08s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: margin-top 0.08s cubic-bezier(0.25, 0.8, 0.25, 1), margin-bottom 0.08s cubic-bezier(0.25, 0.8, 0.25, 1); }

md-expansion-panel-collapsed .md-title,
md-expansion-panel-header .md-title {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 16px;
  font-weight: 600;
  min-width: 80px;
  max-width: 184px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  white-space: nowrap; }

md-expansion-panel-collapsed .md-summary,
md-expansion-panel-header .md-summary {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  white-space: nowrap; }

/* --- Expansion Panel Collapsed ---- */
md-expansion-panel md-expansion-panel-collapsed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 48px;
  line-height: 48px;
  padding: 0 24px;
  opacity: 1;
  z-index: 2;
  box-sizing: border-box; }
  md-expansion-panel md-expansion-panel-collapsed.md-absolute {
    position: absolute; }
  md-expansion-panel md-expansion-panel-collapsed.md-hide {
    opacity: 0; }

md-expansion-panel:not(.md-no-animation) md-expansion-panel-collapsed.md-show {
  -webkit-transition: opacity 0.03s linear;
  transition: opacity 0.03s linear; }

md-expansion-panel:not(.md-no-animation) md-expansion-panel-collapsed.md-hide {
  -webkit-transition: opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1); }

/* --- Expansion Panel Expanded --- */
md-expansion-panel md-expansion-panel-expanded {
  display: none;
  min-height: 48px; }
  md-expansion-panel md-expansion-panel-expanded.md-show, md-expansion-panel md-expansion-panel-expanded.md-hide {
    display: block; }
  md-expansion-panel md-expansion-panel-expanded.md-scroll-y {
    overflow-y: auto; }
  md-expansion-panel md-expansion-panel-expanded.md-overflow {
    overflow: hidden; }
  md-expansion-panel md-expansion-panel-expanded md-expansion-panel-content {
    display: block;
    padding: 16px 24px; }

md-expansion-panel:not(.md-no-animation) md-expansion-panel-expanded.md-show {
  -webkit-transition: max-height 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.12s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: max-height 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.12s cubic-bezier(0.25, 0.8, 0.25, 1); }

md-expansion-panel:not(.md-no-animation) md-expansion-panel-expanded.md-hide {
  -webkit-transition: max-height 0.06s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.06s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: max-height 0.06s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.06s cubic-bezier(0.25, 0.8, 0.25, 1); }

/* --- Expansion Panel Header --- */
md-expansion-panel-header {
  display: block;
  position: relative;
  outline: none; }
  md-expansion-panel-header .md-expansion-panel-header-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 48px;
    line-height: 48px;
    padding: 0 24px;
    box-sizing: border-box;
    border-bottom: 1px solid;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  md-expansion-panel-header.md-stick .md-expansion-panel-header-container {
    position: fixed;
    z-index: 2;
    -webkit-animation: panelBodyHeaderStickyHoverIn 0.3s ease-out both;
            animation: panelBodyHeaderStickyHoverIn 0.3s ease-out both; }
  md-expansion-panel-header.md-no-stick .md-expansion-panel-header-container {
    -webkit-animation: panelBodyHeaderStickyHoverOut 0.3s ease-out both;
            animation: panelBodyHeaderStickyHoverOut 0.3s ease-out both; }

/* --- Expansion Panel Footer --- */
md-expansion-panel-footer {
  display: block;
  position: relative; }
  md-expansion-panel-footer.md-show, md-expansion-panel-footer.md-hide {
    display: block; }
  md-expansion-panel-footer .md-expansion-panel-footer-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 48px;
    line-height: 48px;
    padding: 0 24px;
    border-top: 1px solid;
    box-sizing: border-box; }
  md-expansion-panel-footer.md-stick .md-expansion-panel-footer-container {
    position: fixed;
    z-index: 2; }

/* --- expand icon --- */
md-expansion-panel:not(.md-no-animation) .md-expansion-panel-icon {
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); }

md-expansion-panel .md-expansion-panel-icon {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg); }
  md-expansion-panel .md-expansion-panel-icon:first-child {
    margin-right: 18px; }

md-expansion-panel.md-open > md-expansion-panel-expanded > md-expansion-panel-header .md-expansion-panel-header-container .md-expansion-panel-icon {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg); }

md-expansion-panel.md-open > md-expansion-panel.md-open > md-expansion-panel-collapsed .md-expansion-panel-icon {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg); }

@-webkit-keyframes panelBodyHeaderStickyHoverIn {
  0% {
    box-shadow: 0 0 0 0 transparent; }
  100% {
    box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.16); } }

@keyframes panelBodyHeaderStickyHoverIn {
  0% {
    box-shadow: 0 0 0 0 transparent; }
  100% {
    box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.16); } }

@-webkit-keyframes panelBodyHeaderStickyHoverOut {
  0% {
    box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.16); }
  100% {
    box-shadow: 0 0 0 0 transparent; } }

@keyframes panelBodyHeaderStickyHoverOut {
  0% {
    box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.16); }
  100% {
    box-shadow: 0 0 0 0 transparent; } }
