/**
 * MDL Replacement CSS
 * Static CSS replacing Material Design Lite framework
 * Preserves all MDL class names for JS compatibility
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
  /* Primary palette - Blue Grey */
  --mdl-blue-grey-50: #ECEFF1;
  --mdl-blue-grey-100: #CFD8DC;
  --mdl-blue-grey-200: #B0BEC5;
  --mdl-blue-grey-300: #90A4AE;
  --mdl-blue-grey-400: #78909C;
  --mdl-blue-grey-500: #607D8B;
  --mdl-blue-grey-600: #546E7A;
  --mdl-blue-grey-700: #455A64;
  --mdl-blue-grey-800: #37474F;
  --mdl-blue-grey-900: #263238;

  /* Accent palette - Light Green */
  --mdl-light-green-50: #F1F8E9;
  --mdl-light-green-100: #DCEDC8;
  --mdl-light-green-200: #C5E1A5;
  --mdl-light-green-300: #AED581;
  --mdl-light-green-400: #9CCC65;
  --mdl-light-green-500: #8BC34A;
  --mdl-light-green-600: #7CB342;
  --mdl-light-green-700: #689F38;
  --mdl-light-green-800: #558B2F;
  --mdl-light-green-900: #33691E;

  /* Grey palette */
  --mdl-grey-50: #FAFAFA;
  --mdl-grey-100: #F5F5F5;
  --mdl-grey-200: #EEEEEE;
  --mdl-grey-300: #E0E0E0;
  --mdl-grey-400: #BDBDBD;
  --mdl-grey-500: #9E9E9E;
  --mdl-grey-600: #757575;
  --mdl-grey-700: #616161;
  --mdl-grey-800: #424242;
  --mdl-grey-900: #212121;

  /* Other colors */
  --mdl-white: #FFFFFF;
  --mdl-black: #000000;
  --mdl-cyan: #00BCD4;
  --mdl-teal: #009688;
  --mdl-orange: #FF9800;
  --mdl-pink: #E91E63;
  --mdl-amber: #FFC107;

  /* Semantic colors */
  --mdl-primary: var(--mdl-blue-grey-500);
  --mdl-accent: #8BC34A;

  /* Typography */
  --mdl-font-family: 'Nunito', 'Roboto', 'Helvetica', 'Arial', sans-serif;

  /* Transitions */
  --mdl-animation-default: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --mdl-animation-fast: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Base Reset & Layout
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

.mdl-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

.mdl-layout.mdl-js-layout {
  display: flex;
}

.mdl-layout--fixed-header > .mdl-layout__content {
  margin-top: 0;
}

.mdl-layout--fixed-drawer > .mdl-layout__drawer {
  transform: translateX(0);
}

/* ==========================================================================
   Header
   ========================================================================== */
.mdl-layout__header {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 64px;
  z-index: 3;
  background-color: var(--mdl-blue-grey-500);
  color: var(--mdl-white);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
              0 3px 1px -2px rgba(0, 0, 0, 0.2),
              0 1px 5px 0 rgba(0, 0, 0, 0.12);
  transition: box-shadow var(--mdl-animation-default);
}

.mdl-layout__header--scroll {
  position: relative;
}

.mdl-layout__header--waterfall {
  position: relative;
}

.mdl-layout__header--transparent {
  background-color: transparent;
  box-shadow: none;
}

.mdl-layout__header-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: center;
  min-height: 64px;
  padding: 0 40px 0 80px;
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .mdl-layout__header-row {
    padding: 0 16px 0 72px;
  }
}

.mdl-layout__title,
.mdl-layout-title {
  display: block;
  font-family: var(--mdl-font-family);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Drawer
   ========================================================================== */
.mdl-layout__drawer {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 240px;
  height: 100%;
  max-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: visible;
  overflow-y: auto;
  z-index: 5;
  background: var(--mdl-white);
  border-right: 1px solid var(--mdl-grey-300);
  transform: translateX(-250px);
  transition: transform var(--mdl-animation-default);
}

.mdl-layout__drawer.is-visible {
  transform: translateX(0);
}

.mdl-layout__drawer-button {
  display: block;
  position: absolute;
  height: 48px;
  width: 48px;
  left: 16px;
  top: 8px;
  z-index: 4;
  cursor: pointer;
  line-height: 56px;
  text-align: center;
}

@media screen and (min-width: 1025px) {
  .mdl-layout--fixed-drawer > .mdl-layout__drawer {
    transform: translateX(0);
  }

  .mdl-layout--fixed-drawer > .mdl-layout__content {
    margin-left: 240px;
  }

  .mdl-layout--fixed-drawer > .mdl-layout__header .mdl-layout__header-row {
    padding-left: 40px;
  }

  .mdl-layout__drawer-button {
    display: none;
  }
}

.mdl-layout__obfuscator {
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 4;
  visibility: hidden;
}

.mdl-layout__obfuscator.is-visible {
  background-color: rgba(0, 0, 0, 0.5);
  visibility: visible;
}

/* ==========================================================================
   Content
   ========================================================================== */
.mdl-layout__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.mdl-navigation {
  display: flex;
  flex-wrap: nowrap;
}

.mdl-layout__header .mdl-navigation {
  flex-direction: row;
}

.mdl-layout__drawer .mdl-navigation {
  flex-direction: column;
  padding-top: 16px;
}

.mdl-navigation__link {
  display: block;
  padding: 16px 40px;
  font-family: var(--mdl-font-family);
  font-size: 14px;
  font-weight: 500;
  color: var(--mdl-grey-600);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--mdl-animation-fast);
}

.mdl-navigation__link:hover {
  background-color: var(--mdl-grey-200);
}

.mdl-layout__drawer .mdl-navigation__link {
  padding: 16px 40px;
}

/* ==========================================================================
   Tabs
   ========================================================================== */
.mdl-layout__tab-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  height: 48px;
  padding: 0;
  margin: 0;
  background-color: var(--mdl-primary);
}

.mdl-layout__tab {
  font-family: var(--mdl-font-family);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 48px;
  padding: 0 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  display: block;
}

.mdl-layout__tab:hover {
  color: rgba(255, 255, 255, 0.8);
}

.mdl-layout__tab.is-active {
  color: var(--mdl-white);
}

.mdl-layout__tab.is-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--mdl-accent);
}

.mdl-layout__tab-panel {
  display: none;
}

.mdl-layout__tab-panel.is-active {
  display: block;
}

/* ==========================================================================
   Grid System
   ========================================================================== */
.mdl-grid {
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto;
  align-items: stretch;
  padding: 8px;
}

.mdl-grid--no-spacing {
  padding: 0;
}

.mdl-grid--no-spacing > .mdl-cell {
  margin: 0;
}

.mdl-cell {
  box-sizing: border-box;
  margin: 8px;
}

/* Default 12 column grid */
.mdl-cell--1-col { width: calc(8.3333% - 16px); }
.mdl-cell--2-col { width: calc(16.6666% - 16px); }
.mdl-cell--3-col { width: calc(25% - 16px); }
.mdl-cell--4-col { width: calc(33.3333% - 16px); }
.mdl-cell--5-col { width: calc(41.6666% - 16px); }
.mdl-cell--6-col { width: calc(50% - 16px); }
.mdl-cell--7-col { width: calc(58.3333% - 16px); }
.mdl-cell--8-col { width: calc(66.6666% - 16px); }
.mdl-cell--9-col { width: calc(75% - 16px); }
.mdl-cell--10-col { width: calc(83.3333% - 16px); }
.mdl-cell--11-col { width: calc(91.6666% - 16px); }
.mdl-cell--12-col { width: calc(100% - 16px); }

/* Offset classes */
.mdl-cell--1-offset { margin-left: calc(8.3333% + 8px); }
.mdl-cell--2-offset { margin-left: calc(16.6666% + 8px); }
.mdl-cell--3-offset { margin-left: calc(25% + 8px); }
.mdl-cell--4-offset { margin-left: calc(33.3333% + 8px); }
.mdl-cell--5-offset { margin-left: calc(41.6666% + 8px); }
.mdl-cell--6-offset { margin-left: calc(50% + 8px); }

/* Tablet (8 column grid) */
@media screen and (min-width: 480px) and (max-width: 839px) {
  .mdl-cell--1-col-tablet { width: calc(12.5% - 16px); }
  .mdl-cell--2-col-tablet { width: calc(25% - 16px); }
  .mdl-cell--3-col-tablet { width: calc(37.5% - 16px); }
  .mdl-cell--4-col-tablet { width: calc(50% - 16px); }
  .mdl-cell--5-col-tablet { width: calc(62.5% - 16px); }
  .mdl-cell--6-col-tablet { width: calc(75% - 16px); }
  .mdl-cell--7-col-tablet { width: calc(87.5% - 16px); }
  .mdl-cell--8-col-tablet { width: calc(100% - 16px); }
}

/* Phone (4 column grid) */
@media screen and (max-width: 479px) {
  .mdl-cell--1-col-phone { width: calc(25% - 16px); }
  .mdl-cell--2-col-phone { width: calc(50% - 16px); }
  .mdl-cell--3-col-phone { width: calc(75% - 16px); }
  .mdl-cell--4-col-phone,
  .mdl-cell--8-col-phone,
  .mdl-cell--12-col-phone { width: calc(100% - 16px); }

  .mdl-cell { width: calc(100% - 16px); }
}

/* Large screen only */
@media screen and (min-width: 840px) {
  .mdl-layout--large-screen-only {
    display: block;
  }
}

@media screen and (max-width: 839px) {
  .mdl-layout--large-screen-only {
    display: none !important;
  }
}

/* ==========================================================================
   Typography
   ========================================================================== */
.mdl-typography--display-4,
.mdl-typography--display-4-color-contrast {
  font-family: var(--mdl-font-family);
  font-size: 112px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
}

.mdl-typography--display-3,
.mdl-typography--display-3-color-contrast {
  font-family: var(--mdl-font-family);
  font-size: 56px;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.mdl-typography--display-2,
.mdl-typography--display-2-color-contrast {
  font-family: var(--mdl-font-family);
  font-size: 45px;
  font-weight: 300;
  line-height: 48px;
}

.mdl-typography--display-1,
.mdl-typography--display-1-color-contrast {
  font-family: var(--mdl-font-family);
  font-size: 34px;
  font-weight: 300;
  line-height: 40px;
}

.mdl-typography--headline,
.mdl-typography--headline-color-contrast {
  font-family: var(--mdl-font-family);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}

.mdl-typography--title,
.mdl-typography--title-color-contrast {
  font-family: var(--mdl-font-family);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

.mdl-typography--subhead,
.mdl-typography--subhead-color-contrast {
  font-family: var(--mdl-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em;
}

.mdl-typography--body-2,
.mdl-typography--body-2-force-preferred-font,
.mdl-typography--body-2-color-contrast,
.mdl-typography--body-2-force-preferred-font-color-contrast {
  font-family: var(--mdl-font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
}

.mdl-typography--body-1,
.mdl-typography--body-1-force-preferred-font,
.mdl-typography--body-1-color-contrast,
.mdl-typography--body-1-force-preferred-font-color-contrast {
  font-family: var(--mdl-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

.mdl-typography--caption,
.mdl-typography--caption-force-preferred-font,
.mdl-typography--caption-color-contrast,
.mdl-typography--caption-force-preferred-font-color-contrast {
  font-family: var(--mdl-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.mdl-typography--menu,
.mdl-typography--menu-color-contrast {
  font-family: var(--mdl-font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.mdl-typography--button,
.mdl-typography--button-color-contrast {
  font-family: var(--mdl-font-family);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0;
}

.mdl-typography--text-left { text-align: left; }
.mdl-typography--text-right { text-align: right; }
.mdl-typography--text-center { text-align: center; }
.mdl-typography--text-justify { text-align: justify; }
.mdl-typography--text-nowrap { white-space: nowrap; }
.mdl-typography--text-lowercase { text-transform: lowercase; }
.mdl-typography--text-uppercase { text-transform: uppercase; }
.mdl-typography--text-capitalize { text-transform: capitalize; }

/* Color contrast variants */
.mdl-typography--display-4-color-contrast,
.mdl-typography--display-3-color-contrast,
.mdl-typography--display-2-color-contrast,
.mdl-typography--display-1-color-contrast,
.mdl-typography--headline-color-contrast,
.mdl-typography--title-color-contrast,
.mdl-typography--subhead-color-contrast,
.mdl-typography--body-2-color-contrast,
.mdl-typography--body-1-color-contrast,
.mdl-typography--body-color-contrast,
.mdl-typography--caption-color-contrast {
  opacity: 0.87;
}

/* ==========================================================================
   Color Classes - Background
   ========================================================================== */
.mdl-color--primary { background-color: var(--mdl-primary) !important; }
.mdl-color--accent { background-color: var(--mdl-accent) !important; }
.mdl-color--white { background-color: var(--mdl-white) !important; }
.mdl-color--black { background-color: var(--mdl-black) !important; }

/* Blue Grey */
.mdl-color--blue-grey { background-color: var(--mdl-blue-grey-500) !important; }
.mdl-color--blue-grey-50 { background-color: var(--mdl-blue-grey-50) !important; }
.mdl-color--blue-grey-100 { background-color: var(--mdl-blue-grey-100) !important; }
.mdl-color--blue-grey-200 { background-color: var(--mdl-blue-grey-200) !important; }
.mdl-color--blue-grey-300 { background-color: var(--mdl-blue-grey-300) !important; }
.mdl-color--blue-grey-400 { background-color: var(--mdl-blue-grey-400) !important; }
.mdl-color--blue-grey-500 { background-color: var(--mdl-blue-grey-500) !important; }
.mdl-color--blue-grey-600 { background-color: var(--mdl-blue-grey-600) !important; }
.mdl-color--blue-grey-700 { background-color: var(--mdl-blue-grey-700) !important; }
.mdl-color--blue-grey-800 { background-color: var(--mdl-blue-grey-800) !important; }
.mdl-color--blue-grey-900 { background-color: var(--mdl-blue-grey-900) !important; }

/* Light Green */
.mdl-color--light-green { background-color: var(--mdl-light-green-500) !important; }
.mdl-color--light-green-50 { background-color: var(--mdl-light-green-50) !important; }
.mdl-color--light-green-100 { background-color: var(--mdl-light-green-100) !important; }
.mdl-color--light-green-200 { background-color: var(--mdl-light-green-200) !important; }
.mdl-color--light-green-300 { background-color: var(--mdl-light-green-300) !important; }
.mdl-color--light-green-400 { background-color: var(--mdl-light-green-400) !important; }
.mdl-color--light-green-500 { background-color: var(--mdl-light-green-500) !important; }
.mdl-color--light-green-600 { background-color: var(--mdl-light-green-600) !important; }
.mdl-color--light-green-700 { background-color: var(--mdl-light-green-700) !important; }
.mdl-color--light-green-800 { background-color: var(--mdl-light-green-800) !important; }
.mdl-color--light-green-900 { background-color: var(--mdl-light-green-900) !important; }

/* Grey */
.mdl-color--grey { background-color: var(--mdl-grey-500) !important; }
.mdl-color--grey-50 { background-color: var(--mdl-grey-50) !important; }
.mdl-color--grey-100 { background-color: var(--mdl-grey-100) !important; }
.mdl-color--grey-200 { background-color: var(--mdl-grey-200) !important; }
.mdl-color--grey-300 { background-color: var(--mdl-grey-300) !important; }
.mdl-color--grey-400 { background-color: var(--mdl-grey-400) !important; }
.mdl-color--grey-500 { background-color: var(--mdl-grey-500) !important; }
.mdl-color--grey-600 { background-color: var(--mdl-grey-600) !important; }
.mdl-color--grey-700 { background-color: var(--mdl-grey-700) !important; }
.mdl-color--grey-800 { background-color: var(--mdl-grey-800) !important; }
.mdl-color--grey-900 { background-color: var(--mdl-grey-900) !important; }

/* Other colors */
.mdl-color--cyan { background-color: var(--mdl-cyan) !important; }
.mdl-color--teal { background-color: var(--mdl-teal) !important; }
.mdl-color--orange { background-color: var(--mdl-orange) !important; }
.mdl-color--pink { background-color: var(--mdl-pink) !important; }
.mdl-color--amber { background-color: var(--mdl-amber) !important; }

/* ==========================================================================
   Color Classes - Text
   ========================================================================== */
.mdl-color-text--primary { color: var(--mdl-primary) !important; }
.mdl-color-text--accent { color: var(--mdl-accent) !important; }
.mdl-color-text--white { color: var(--mdl-white) !important; }
.mdl-color-text--black { color: var(--mdl-black) !important; }

/* Blue Grey Text */
.mdl-color-text--blue-grey { color: var(--mdl-blue-grey-500) !important; }
.mdl-color-text--blue-grey-50 { color: var(--mdl-blue-grey-50) !important; }
.mdl-color-text--blue-grey-100 { color: var(--mdl-blue-grey-100) !important; }
.mdl-color-text--blue-grey-200 { color: var(--mdl-blue-grey-200) !important; }
.mdl-color-text--blue-grey-300 { color: var(--mdl-blue-grey-300) !important; }
.mdl-color-text--blue-grey-400 { color: var(--mdl-blue-grey-400) !important; }
.mdl-color-text--blue-grey-500 { color: var(--mdl-blue-grey-500) !important; }
.mdl-color-text--blue-grey-600 { color: var(--mdl-blue-grey-600) !important; }
.mdl-color-text--blue-grey-700 { color: var(--mdl-blue-grey-700) !important; }
.mdl-color-text--blue-grey-800 { color: var(--mdl-blue-grey-800) !important; }
.mdl-color-text--blue-grey-900 { color: var(--mdl-blue-grey-900) !important; }

/* Light Green Text */
.mdl-color-text--light-green { color: var(--mdl-light-green-500) !important; }
.mdl-color-text--light-green-50 { color: var(--mdl-light-green-50) !important; }
.mdl-color-text--light-green-100 { color: var(--mdl-light-green-100) !important; }
.mdl-color-text--light-green-200 { color: var(--mdl-light-green-200) !important; }
.mdl-color-text--light-green-300 { color: var(--mdl-light-green-300) !important; }
.mdl-color-text--light-green-400 { color: var(--mdl-light-green-400) !important; }
.mdl-color-text--light-green-500 { color: var(--mdl-light-green-500) !important; }
.mdl-color-text--light-green-600 { color: var(--mdl-light-green-600) !important; }
.mdl-color-text--light-green-700 { color: var(--mdl-light-green-700) !important; }
.mdl-color-text--light-green-800 { color: var(--mdl-light-green-800) !important; }
.mdl-color-text--light-green-900 { color: var(--mdl-light-green-900) !important; }

/* Grey Text */
.mdl-color-text--grey { color: var(--mdl-grey-500) !important; }
.mdl-color-text--grey-50 { color: var(--mdl-grey-50) !important; }
.mdl-color-text--grey-100 { color: var(--mdl-grey-100) !important; }
.mdl-color-text--grey-200 { color: var(--mdl-grey-200) !important; }
.mdl-color-text--grey-300 { color: var(--mdl-grey-300) !important; }
.mdl-color-text--grey-400 { color: var(--mdl-grey-400) !important; }
.mdl-color-text--grey-500 { color: var(--mdl-grey-500) !important; }
.mdl-color-text--grey-600 { color: var(--mdl-grey-600) !important; }
.mdl-color-text--grey-700 { color: var(--mdl-grey-700) !important; }
.mdl-color-text--grey-800 { color: var(--mdl-grey-800) !important; }
.mdl-color-text--grey-900 { color: var(--mdl-grey-900) !important; }

/* Amber text (used for premium badge) */
.mdl-color-text-amber { color: var(--mdl-amber) !important; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.mdl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 36px;
  padding: 0 16px;
  margin: 0;
  border: none;
  border-radius: 2px;
  background: transparent;
  font-family: var(--mdl-font-family);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  letter-spacing: 0;
  color: var(--mdl-grey-900);
  cursor: pointer;
  overflow: hidden;
  outline: none;
  position: relative;
  vertical-align: middle;
  transition: background-color var(--mdl-animation-fast),
              box-shadow var(--mdl-animation-default);
}

.mdl-button:hover {
  background-color: rgba(158, 158, 158, 0.2);
}

.mdl-button:focus:not(:active) {
  background-color: rgba(0, 0, 0, 0.12);
}

.mdl-button:active {
  background-color: rgba(158, 158, 158, 0.4);
}

.mdl-button[disabled],
.mdl-button.mdl-button--disabled {
  color: rgba(0, 0, 0, 0.26);
  cursor: default;
  background-color: transparent;
}

/* Raised button */
.mdl-button--raised {
  background-color: var(--mdl-grey-300);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
              0 3px 1px -2px rgba(0, 0, 0, 0.2),
              0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.mdl-button--raised:hover {
  background-color: var(--mdl-grey-400);
}

.mdl-button--raised:active {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
              0 1px 10px 0 rgba(0, 0, 0, 0.12),
              0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.mdl-button--raised[disabled],
.mdl-button--raised.mdl-button--disabled {
  background-color: rgba(0, 0, 0, 0.12);
  box-shadow: none;
}

/* Colored button */
.mdl-button--colored {
  color: var(--mdl-accent);
}

.mdl-button--raised.mdl-button--colored {
  background-color: var(--mdl-accent);
  color: var(--mdl-white);
}

/* FAB button */
.mdl-button--fab {
  width: 56px;
  height: 56px;
  min-width: 56px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--mdl-accent);
  color: var(--mdl-white);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
              0 3px 1px -2px rgba(0, 0, 0, 0.2),
              0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.mdl-button--fab:hover {
  background-color: var(--mdl-accent);
}

.mdl-button--fab:active {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
              0 1px 10px 0 rgba(0, 0, 0, 0.12),
              0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.mdl-button--fab.mdl-button--mini-fab {
  width: 40px;
  height: 40px;
  min-width: 40px;
}

/* Icon button */
.mdl-button--icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 50%;
  background-color: transparent;
  color: inherit;
  line-height: 32px;
}

.mdl-button--icon:hover {
  background-color: rgba(158, 158, 158, 0.2);
}

.mdl-button--icon .material-icons {
  font-size: 24px;
  line-height: 32px;
}

/* Flat button */
.mdl-button--flat {
  background-color: transparent;
}

/* Ripple container (no animation, just for compatibility) */
.mdl-button__ripple-container {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  border-radius: inherit;
}

.mdl-js-ripple-effect {
  /* Class for JS ripple - no CSS animation needed */
}

/* ==========================================================================
   Textfield / Form Inputs
   ========================================================================== */
.mdl-textfield {
  display: inline-block;
  position: relative;
  font-size: 16px;
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 20px 0;
}

.mdl-textfield__input {
  display: block;
  width: 100%;
  padding: 4px 0;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  background: none;
  font-family: var(--mdl-font-family);
  font-size: 16px;
  text-align: left;
  color: inherit;
  outline: none;
}

.mdl-textfield__input:focus {
  outline: none;
}

.mdl-textfield__label {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.26);
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  transition: all var(--mdl-animation-fast);
}

.mdl-textfield__label::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mdl-accent);
  visibility: hidden;
  transform: scaleX(0);
  transition: all var(--mdl-animation-fast);
}

/* Floating label states */
.mdl-textfield--floating-label .mdl-textfield__label {
  bottom: 20px;
}

.mdl-textfield.is-focused .mdl-textfield__label,
.mdl-textfield.is-dirty .mdl-textfield__label,
.mdl-textfield--floating-label.is-focused .mdl-textfield__label,
.mdl-textfield--floating-label.is-dirty .mdl-textfield__label,
.mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
  color: var(--mdl-accent);
  font-size: 12px;
  bottom: auto;
  top: 4px;
}

.mdl-textfield.is-dirty .mdl-textfield__label {
  color: rgba(0, 0, 0, 0.26);
}

.mdl-textfield.is-focused .mdl-textfield__label {
  color: var(--mdl-accent);
}

.mdl-textfield.is-focused .mdl-textfield__input {
  border-bottom-color: var(--mdl-accent);
}

/* Underline effect */
.mdl-textfield::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--mdl-accent);
  transition: left var(--mdl-animation-fast), right var(--mdl-animation-fast);
}

.mdl-textfield.is-focused::after {
  left: 0;
  right: 0;
}

/* Expandable textfield */
.mdl-textfield--expandable {
  min-width: 32px;
  min-height: 32px;
  width: auto;
}

.mdl-textfield__expandable-holder {
  display: inline-block;
  position: relative;
  max-width: 0.1px;
  transition: max-width var(--mdl-animation-default);
}

.mdl-textfield.is-focused .mdl-textfield__expandable-holder,
.mdl-textfield.is-dirty .mdl-textfield__expandable-holder {
  max-width: 600px;
}

/* ==========================================================================
   Checkbox
   ========================================================================== */
.mdl-checkbox {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-family: var(--mdl-font-family);
  font-size: 16px;
  user-select: none;
  padding-left: 24px;
  min-height: 24px;
}

.mdl-checkbox__input {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.mdl-checkbox__box-outline {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.54);
  border-radius: 2px;
  transition: all var(--mdl-animation-fast);
}

.mdl-checkbox__tick-outline {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: transparent;
}

.mdl-checkbox.is-checked .mdl-checkbox__box-outline {
  border-color: var(--mdl-accent);
}

.mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
  background: var(--mdl-accent) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K");
  border-radius: 2px;
}

.mdl-checkbox__label {
  margin-left: 8px;
  cursor: pointer;
}

.mdl-checkbox__ripple-container {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
}

/* ==========================================================================
   Switch
   ========================================================================== */
.mdl-switch {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-family: var(--mdl-font-family);
  font-size: 16px;
  user-select: none;
  padding-left: 40px;
  min-height: 24px;
}

.mdl-switch__input {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.mdl-switch__track {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 14px;
  background: rgba(0, 0, 0, 0.26);
  border-radius: 7px;
  transition: background var(--mdl-animation-fast);
}

.mdl-switch__thumb {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: var(--mdl-grey-50);
  border-radius: 50%;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
              0 3px 1px -2px rgba(0, 0, 0, 0.2),
              0 1px 5px 0 rgba(0, 0, 0, 0.12);
  transition: left var(--mdl-animation-fast), background var(--mdl-animation-fast);
}

.mdl-switch.is-checked .mdl-switch__track {
  background: var(--mdl-light-green-100);
}

.mdl-switch.is-checked .mdl-switch__thumb {
  left: 16px;
  background: var(--mdl-accent);
}

.mdl-switch__label {
  margin-left: 8px;
  cursor: pointer;
}

.mdl-switch__ripple-container {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
}

/* ==========================================================================
   Menu
   ========================================================================== */
.mdl-menu__container {
  display: block;
  margin: 0;
  padding: 0;
  position: absolute;
  overflow: visible;
  z-index: 100;
}

.mdl-menu__outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--mdl-white);
  border-radius: 2px;
  opacity: 0;
  transform: scale(0);
  transform-origin: top left;
  transition: transform var(--mdl-animation-default),
              opacity var(--mdl-animation-default);
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.07),
              0 11px 15px -7px rgba(0, 0, 0, 0.06),
              0 24px 38px 3px rgba(0, 0, 0, 0.05);
  z-index: -1;
}

.mdl-menu__container.is-visible .mdl-menu__outline {
  opacity: 1;
  transform: scale(1);
}

.mdl-menu {
  display: none;
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: var(--mdl-white);
  border-radius: 2px;
  min-width: 124px;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
              0 4px 5px 0 rgba(0, 0, 0, 0.14),
              0 1px 10px 0 rgba(0, 0, 0, 0.12);
  z-index: 101;
}

.mdl-menu.is-visible {
  display: block;
}

.mdl-menu--bottom-left {
  top: 100%;
  left: 0;
}

.mdl-menu--bottom-right {
  top: 100%;
  right: 0;
}

.mdl-menu--top-left {
  bottom: 100%;
  left: 0;
}

.mdl-menu--top-right {
  bottom: 100%;
  right: 0;
}

.mdl-menu__item {
  display: block;
  padding: 16px;
  font-family: var(--mdl-font-family);
  font-size: 14px;
  color: rgba(0, 0, 0, 0.87);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--mdl-animation-fast);
}

.mdl-menu__item:hover {
  background-color: var(--mdl-grey-200);
}

.mdl-menu__item--full-bleed-divider {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   Dialog
   ========================================================================== */
.mdl-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80%;
  padding: 24px;
  background: var(--mdl-white);
  border: none;
  border-radius: 2px;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14),
              0 11px 15px -7px rgba(0, 0, 0, 0.12),
              0 24px 38px 3px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.mdl-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.mdl-dialog__title {
  margin: 0;
  padding: 0 0 24px 0;
  font-family: var(--mdl-font-family);
  font-size: 20px;
  font-weight: 500;
}

.mdl-dialog__content {
  margin: 0;
  padding: 0;
  font-family: var(--mdl-font-family);
  font-size: 16px;
  color: rgba(0, 0, 0, 0.54);
}

.mdl-dialog__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  padding: 0;
}

.mdl-dialog__actions > * {
  margin-left: 8px;
}

/* ==========================================================================
   Snackbar
   ========================================================================== */
.mdl-snackbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  min-width: 288px;
  max-width: 568px;
  padding: 14px 24px;
  background-color: #37474F;
  border-radius: 2px;
  font-family: var(--mdl-font-family);
  z-index: 1100;
  transition: transform var(--mdl-animation-default);
}

.mdl-snackbar.is-active {
  transform: translateX(-50%) translateY(0);
}

.mdl-snackbar__text {
  color: var(--mdl-white);
  font-size: 14px;
  font-weight: 500;
  padding-right: 24px;
}

.mdl-snackbar__action {
  background: transparent;
  border: none;
  color: var(--mdl-accent);
  font-family: var(--mdl-font-family);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0;
  cursor: pointer;
  overflow: visible;
}

/* ==========================================================================
   Tooltip
   ========================================================================== */
.mdl-tooltip {
  position: absolute;
  padding: 8px;
  background: rgba(97, 97, 97, 0.9);
  border-radius: 2px;
  font-family: var(--mdl-font-family);
  font-size: 10px;
  font-weight: 500;
  color: var(--mdl-white);
  text-transform: none;
  transform: scale(0);
  transform-origin: top center;
  opacity: 0;
  z-index: 999;
  transition: transform var(--mdl-animation-default),
              opacity var(--mdl-animation-default);
  pointer-events: none;
}

.mdl-tooltip.is-active {
  transform: scale(1);
  opacity: 1;
}

.mdl-tooltip--large {
  font-size: 14px;
  padding: 16px;
}

/* ==========================================================================
   List
   ========================================================================== */
.mdl-list {
  display: block;
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

.mdl-list__item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  font-family: var(--mdl-font-family);
  font-size: 16px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.87);
  cursor: default;
}

.mdl-list__item-primary-content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  flex-grow: 1;
  order: 0;
}

.mdl-list__item-secondary-content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-left: 16px;
  order: 1;
}

.mdl-list__item-secondary-action {
  cursor: pointer;
}

.mdl-list__item-icon {
  margin-right: 32px;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.54);
}

.mdl-list__item-avatar {
  width: 40px;
  height: 40px;
  margin-right: 16px;
  border-radius: 50%;
  background-size: cover;
}

/* Two line list item */
.mdl-list__item--two-line {
  min-height: 72px;
}

.mdl-list__item--two-line .mdl-list__item-primary-content {
  flex-direction: column;
  align-items: flex-start;
}

.mdl-list__item-sub-header {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.54);
}

/* ==========================================================================
   Accordion (Custom MDL Extension)
   ========================================================================== */
.mdl-accordion {
  display: block;
  margin: 8px 0;
  background: var(--mdl-white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.mdl-accordion__button {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  padding: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--mdl-font-family);
  font-size: 16px;
  text-align: left;
}

.mdl-accordion__icon {
  transition: transform var(--mdl-animation-default);
}

.mdl-accordion.mdl-accordion--opened .mdl-accordion__icon {
  transform: rotate(180deg);
}

.mdl-accordion__content-wrapper {
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  transition: opacity var(--mdl-animation-default),
              max-height var(--mdl-animation-default);
}

.mdl-accordion.mdl-accordion--opened .mdl-accordion__content-wrapper {
  opacity: 1;
  max-height: 2000px;
  overflow: visible;
  border-top: 1px solid #e8e8e8;
}

.mdl-accordion__content {
  padding: 16px;
  transition: margin-top var(--mdl-animation-default);
}

.mdl-accordion.mdl-accordion--opened .mdl-accordion__content {
  margin-top: 0 !important;
}

.mdl-accordion + .mdl-accordion {
  margin-top: 0;
  border-top: none;
}

.mdl-accordion.mdl-accordion--opened + .mdl-accordion.mdl-accordion--opened {
  border-top: none;
}

/* Animation helper */
.mdl-animation--default {
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Shadow Classes
   ========================================================================== */
.mdl-shadow--2dp {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
              0 3px 1px -2px rgba(0, 0, 0, 0.2),
              0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.mdl-shadow--3dp {
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
              0 3px 3px -2px rgba(0, 0, 0, 0.2),
              0 1px 8px 0 rgba(0, 0, 0, 0.12);
}

.mdl-shadow--4dp {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
              0 1px 10px 0 rgba(0, 0, 0, 0.12),
              0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.mdl-shadow--6dp {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
              0 1px 18px 0 rgba(0, 0, 0, 0.12),
              0 3px 5px -1px rgba(0, 0, 0, 0.2);
}

.mdl-shadow--8dp {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12),
              0 5px 5px -3px rgba(0, 0, 0, 0.2);
}

.mdl-shadow--16dp {
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
              0 6px 30px 5px rgba(0, 0, 0, 0.12),
              0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.mdl-shadow--24dp {
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14),
              0 11px 15px -7px rgba(0, 0, 0, 0.12),
              0 24px 38px 3px rgba(0, 0, 0, 0.2);
}

/* Custom sslexpire shadow */
.mdl-shadow--ssl-expire {
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.07),
              0 11px 15px -7px rgba(0, 0, 0, 0.06),
              0 24px 38px 3px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Progress / Spinner (basic support)
   ========================================================================== */
.mdl-progress {
  display: block;
  position: relative;
  height: 4px;
  width: 100%;
  background-color: var(--mdl-light-green-100);
}

.mdl-progress > .progressbar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: var(--mdl-accent);
  transition: width var(--mdl-animation-default);
}

.mdl-progress > .bufferbar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
                    linear-gradient(to right, var(--mdl-accent), var(--mdl-accent));
}

.mdl-progress.mdl-progress--indeterminate > .bar1 {
  animation: indeterminate-bar1 2s infinite;
  background-color: var(--mdl-accent);
}

@keyframes indeterminate-bar1 {
  0% { left: 0; width: 0; }
  50% { left: 25%; width: 75%; }
  75% { left: 100%; width: 0; }
}

/* ==========================================================================
   Ripple Effect (minimal visual feedback)
   ========================================================================== */
.mdl-ripple {
  background: var(--mdl-accent);
  border-radius: 50%;
  height: 50px;
  width: 50px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%) scale(0);
}

/* ==========================================================================
   Card (basic support)
   ========================================================================== */
.mdl-card {
  display: flex;
  flex-direction: column;
  background: var(--mdl-white);
  border-radius: 2px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
              0 3px 1px -2px rgba(0, 0, 0, 0.2),
              0 1px 5px 0 rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.mdl-card__title {
  display: flex;
  align-items: center;
  padding: 16px;
}

.mdl-card__title-text {
  font-family: var(--mdl-font-family);
  font-size: 24px;
  font-weight: 300;
  margin: 0;
}

.mdl-card__subtitle-text {
  font-family: var(--mdl-font-family);
  font-size: 14px;
  color: rgba(0, 0, 0, 0.54);
  margin: 0;
}

.mdl-card__supporting-text {
  padding: 16px;
  font-family: var(--mdl-font-family);
  font-size: 14px;
  color: rgba(0, 0, 0, 0.54);
}

.mdl-card__actions {
  display: flex;
  padding: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.mdl-card__menu {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* ==========================================================================
   Badge (basic support)
   ========================================================================== */
.mdl-badge {
  position: relative;
}

.mdl-badge[data-badge]::after {
  content: attr(data-badge);
  position: absolute;
  top: -11px;
  right: -24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--mdl-accent);
  border-radius: 50%;
  font-family: var(--mdl-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--mdl-white);
}

.mdl-badge.mdl-badge--no-background[data-badge]::after {
  background: transparent;
  color: var(--mdl-accent);
}

/* ==========================================================================
   Chip
   ========================================================================== */
.mdl-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  background: var(--mdl-grey-300);
  border-radius: 16px;
  font-family: var(--mdl-font-family);
  font-size: 13px;
  color: rgba(0, 0, 0, 0.87);
}

.mdl-chip__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: -12px;
  margin-right: 8px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--mdl-white);
}

.mdl-chip__text {
  vertical-align: middle;
}

.mdl-chip__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 4px;
  margin-right: -8px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.54;
}

.mdl-chip__action:hover {
  opacity: 0.87;
}

.mdl-chip--deletable {
  padding-right: 4px;
}

/* ==========================================================================
   Data Table (basic support)
   ========================================================================== */
.mdl-data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--mdl-white);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  font-family: var(--mdl-font-family);
  font-size: 13px;
}

.mdl-data-table th {
  padding: 12px 18px;
  text-align: left;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.54);
  vertical-align: bottom;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.mdl-data-table td {
  padding: 12px 18px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.mdl-data-table tbody tr:hover {
  background: var(--mdl-grey-100);
}

.mdl-data-table__cell--non-numeric {
  text-align: left;
}

/* ==========================================================================
   Radio (basic support)
   ========================================================================== */
.mdl-radio {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-family: var(--mdl-font-family);
  font-size: 16px;
  user-select: none;
  padding-left: 28px;
  min-height: 24px;
}

.mdl-radio__button {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.mdl-radio__outer-circle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.54);
  border-radius: 50%;
  transition: all var(--mdl-animation-fast);
}

.mdl-radio__inner-circle {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: transparent;
  border-radius: 50%;
  transition: all var(--mdl-animation-fast);
}

.mdl-radio.is-checked .mdl-radio__outer-circle {
  border-color: var(--mdl-accent);
}

.mdl-radio.is-checked .mdl-radio__inner-circle {
  background: var(--mdl-accent);
}

.mdl-radio__label {
  margin-left: 8px;
  cursor: pointer;
}

.mdl-radio__ripple-container {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
}

/* ==========================================================================
   Slider (basic support)
   ========================================================================== */
.mdl-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--mdl-grey-400);
  outline: none;
  cursor: pointer;
}

.mdl-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mdl-accent);
  cursor: pointer;
}

.mdl-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mdl-accent);
  cursor: pointer;
  border: none;
}

.mdl-slider.is-upgraded {
  color: var(--mdl-accent);
}

/* ==========================================================================
   Icon Toggle (basic support)
   ========================================================================== */
.mdl-icon-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.mdl-icon-toggle__input {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.mdl-icon-toggle__label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.54);
  transition: color var(--mdl-animation-fast);
}

.mdl-icon-toggle.is-checked .mdl-icon-toggle__label {
  color: var(--mdl-accent);
}

/* ==========================================================================
   Tab Bars (separate from layout tabs)
   ========================================================================== */
.mdl-tabs {
  display: block;
  width: 100%;
}

.mdl-tabs__tab-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  height: 48px;
  padding: 0;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.mdl-tabs__tab {
  display: inline-block;
  padding: 0 24px;
  height: 48px;
  line-height: 48px;
  font-family: var(--mdl-font-family);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.54);
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.mdl-tabs__tab:hover {
  color: rgba(0, 0, 0, 0.87);
}

.mdl-tabs__tab.is-active {
  color: var(--mdl-accent);
}

.mdl-tabs__tab.is-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mdl-accent);
}

.mdl-tabs__panel {
  display: none;
}

.mdl-tabs__panel.is-active {
  display: block;
}

.mdl-tabs__ripple-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}