/*

# Show rules based on screensize:

.someClass{
	width: 100px;
	.screen-xs({ // Make it 50px on mobile.
		width: 50px;
	})
}

// ------------------------------------------- */
/* -------------------------------------------

# Generate margins based on screensize.

.someClass{
	.xs-margin() = margin: 6px on Mobile;
	.sm-margin(1) = margin: 12px on Tablets;
}

// ------------------------------------------- */
/* -------------------------------------------

# Generate paddings based on screensize.

.someClass{
	.xs-padding() = padding: 6px on Mobile;
	.sm-padding(1) = padding: 12px on Tablets;
}

// ------------------------------------------- */
/* -------------------------------------------

# Complicated mixin / loop for generating all css for margins / paddings.

// ------------------------------------------- */
/* This should be removed, force to use -xs, -md etc instead. */
/**/
/* From Bootstrap 3.3.2 */
.paper {
  display: block;
  position: relative;
  color: inherit;
  background-color: #ffffff;
}
.paper.paper-link {
  text-decoration: none;
}
.paper.paper-link:hover {
  color: inherit;
  text-decoration: none;
}
.paper.paper-tur,
.paper.paper-neutral {
  -webkit-border-radius: 12px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 12px;
  -moz-background-clip: padding;
  border-radius: 12px;
  background-clip: padding-box;
}
.paper.paper-sport {
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
}
.paper.paper-flat {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.paper.paper-outlined {
  border: 1px solid #e1e1e5;
}
.paper-link-hover-support:hover {
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.24)) drop-shadow(0 14px 22px rgba(0, 0, 0, 0.24)) !important;
}
.paper-link[aria-disabled=true] {
  opacity: 0.5;
}

.elevation-auto-raise {
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), filter 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.elevation-100 {
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
.elevation-200 {
  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);
}
.elevation-300 {
  box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
}
.elevation-400 {
  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);
}
.elevation-600 {
  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);
}
.elevation-800 {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.elevation-1200 {
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
}
.elevation-1600 {
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
}
.elevation-2400 {
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
}
.elevation-100-filter {
  filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.04)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.04)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.24)) drop-shadow(0 2px 0 rgba(0, 0, 0, 0.1));
}
.elevation-200-filter {
  filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.06)) drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.06)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.14)) drop-shadow(0 3px 1px rgba(0, 0, 0, 0.15));
}
.elevation-300-filter {
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.06)) drop-shadow(-1px 1px 2px rgba(0, 0, 0, 0.06)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.06)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.15));
}
.elevation-400-filter {
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(-1px 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.06)) drop-shadow(0 3px 1px rgba(0, 0, 0, 0.19));
}
.elevation-600-filter {
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.06)) drop-shadow(-1px 1px 2px rgba(0, 0, 0, 0.06)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.16)) drop-shadow(0 3px 1px rgba(0, 0, 0, 0.19));
}
.elevation-800-filter {
  filter: drop-shadow(3px 1px 3px rgba(0, 0, 0, 0.06)) drop-shadow(-3px 1px 3px rgba(0, 0, 0, 0.06)) drop-shadow(0 7px 4px rgba(0, 0, 0, 0.16)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.29));
}
.elevation-1200-filter {
  filter: drop-shadow(11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(-11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(0 20px 8px rgba(0, 0, 0, 0.12)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.19));
}
.elevation-1600-filter {
  filter: drop-shadow(11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(-11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(0 16px 12px rgba(0, 0, 0, 0.19)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.29));
}
.elevation-2400-filter {
  filter: drop-shadow(11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(-11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(0 18px 18px rgba(0, 0, 0, 0.22)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.29));
}
@media (pointer: fine) {
  .elevation-100.elevation-auto-raise {
    will-change: box-shadow;
  }
  .elevation-100.elevation-auto-raise:hover {
    cursor: pointer;
    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);
  }
  .elevation-100.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
  }
  .elevation-100-filter.elevation-auto-raise {
    will-change: filter;
  }
  .elevation-100-filter.elevation-auto-raise:hover {
    cursor: pointer;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.06)) drop-shadow(-1px 1px 2px rgba(0, 0, 0, 0.06)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.16)) drop-shadow(0 3px 1px rgba(0, 0, 0, 0.19));
  }
  .elevation-100-filter.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.04)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.04)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.24)) drop-shadow(0 2px 0 rgba(0, 0, 0, 0.1));
  }
  .elevation-200.elevation-auto-raise {
    will-change: box-shadow;
  }
  .elevation-200.elevation-auto-raise:hover {
    cursor: pointer;
    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);
  }
  .elevation-200.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    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);
  }
  .elevation-200-filter.elevation-auto-raise {
    will-change: filter;
  }
  .elevation-200-filter.elevation-auto-raise:hover {
    cursor: pointer;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.06)) drop-shadow(-1px 1px 2px rgba(0, 0, 0, 0.06)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.16)) drop-shadow(0 3px 1px rgba(0, 0, 0, 0.19));
  }
  .elevation-200-filter.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.06)) drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.06)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.14)) drop-shadow(0 3px 1px rgba(0, 0, 0, 0.15));
  }
  .elevation-300.elevation-auto-raise {
    will-change: box-shadow;
  }
  .elevation-300.elevation-auto-raise:hover {
    cursor: pointer;
    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);
  }
  .elevation-300.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
  }
  .elevation-300-filter.elevation-auto-raise {
    will-change: filter;
  }
  .elevation-300-filter.elevation-auto-raise:hover {
    cursor: pointer;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.06)) drop-shadow(-1px 1px 2px rgba(0, 0, 0, 0.06)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.16)) drop-shadow(0 3px 1px rgba(0, 0, 0, 0.19));
  }
  .elevation-300-filter.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.06)) drop-shadow(-1px 1px 2px rgba(0, 0, 0, 0.06)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.06)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.15));
  }
  .elevation-400.elevation-auto-raise:hover {
    cursor: pointer;
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
  }
  .elevation-400.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    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);
  }
  .elevation-400-filter.elevation-auto-raise:hover {
    cursor: pointer;
    filter: drop-shadow(11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(-11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(0 16px 12px rgba(0, 0, 0, 0.19)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.29));
  }
  .elevation-400-filter.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(-1px 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.06)) drop-shadow(0 3px 1px rgba(0, 0, 0, 0.19));
  }
  .elevation-600.elevation-auto-raise {
    will-change: box-shadow;
  }
  .elevation-600.elevation-auto-raise:hover {
    cursor: pointer;
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
  }
  .elevation-600.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    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);
  }
  .elevation-600-filter.elevation-auto-raise {
    will-change: filter;
  }
  .elevation-600-filter.elevation-auto-raise:hover {
    cursor: pointer;
    filter: drop-shadow(11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(-11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(0 16px 12px rgba(0, 0, 0, 0.19)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.29));
  }
  .elevation-600-filter.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.06)) drop-shadow(-1px 1px 2px rgba(0, 0, 0, 0.06)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.16)) drop-shadow(0 3px 1px rgba(0, 0, 0, 0.19));
  }
  .elevation-800.elevation-auto-raise {
    will-change: box-shadow;
  }
  .elevation-800.elevation-auto-raise:hover {
    cursor: pointer;
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
  }
  .elevation-800.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
  .elevation-800-filter.elevation-auto-raise {
    will-change: filter;
  }
  .elevation-800-filter.elevation-auto-raise:hover {
    cursor: pointer;
    filter: drop-shadow(11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(-11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(0 16px 12px rgba(0, 0, 0, 0.19)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.29));
  }
  .elevation-800-filter.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    filter: drop-shadow(3px 1px 3px rgba(0, 0, 0, 0.06)) drop-shadow(-3px 1px 3px rgba(0, 0, 0, 0.06)) drop-shadow(0 7px 4px rgba(0, 0, 0, 0.16)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.29));
  }
  .elevation-1200.elevation-auto-raise {
    will-change: box-shadow;
  }
  .elevation-1200.elevation-auto-raise:hover {
    cursor: pointer;
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
  }
  .elevation-1200.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
  }
  .elevation-1200-filter.elevation-auto-raise {
    will-change: filter;
  }
  .elevation-1200-filter.elevation-auto-raise:hover {
    cursor: pointer;
    filter: drop-shadow(11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(-11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(0 18px 18px rgba(0, 0, 0, 0.22)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.29));
  }
  .elevation-1200-filter.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    filter: drop-shadow(11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(-11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(0 20px 8px rgba(0, 0, 0, 0.12)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.19));
  }
  .elevation-1600.elevation-auto-raise {
    will-change: box-shadow;
  }
  .elevation-1600.elevation-auto-raise:hover {
    cursor: pointer;
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
  }
  .elevation-1600.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
  }
  .elevation-1600-filter.elevation-auto-raise {
    will-change: filter;
  }
  .elevation-1600-filter.elevation-auto-raise:hover {
    cursor: pointer;
    filter: drop-shadow(11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(-11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(0 18px 18px rgba(0, 0, 0, 0.22)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.29));
  }
  .elevation-1600-filter.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    filter: drop-shadow(11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(-11px 2px 4px rgba(0, 0, 0, 0.06)) drop-shadow(0 16px 12px rgba(0, 0, 0, 0.19)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.29));
  }
  .elevation-2400.elevation-auto-raise {
    will-change: box-shadow;
  }
  .elevation-2400.elevation-auto-raise:hover {
    cursor: pointer;
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
  }
  .elevation-2400.elevation-auto-raise[aria-disabled=true]:hover {
    cursor: not-allowed;
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
  }
}

.dialog-contextual-items {
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 140;
}
.dialog-contextual-items.dialog-contextual-items-closed {
  pointer-events: none;
}
.dialog-contextual-item {
  background: #ffffff;
  width: 100%;
  max-width: 296px;
}
.dialog-contextual-item .arrow,
.dialog-contextual-item .arrow::before {
  position: absolute;
  width: 24px;
  height: 24px;
  z-index: -1;
}
.dialog-contextual-item .arrow::before {
  content: '';
  transform: rotate(45deg);
  background: white;
}
.dialog-contextual-item[data-popper-placement^='top'] > .arrow {
  bottom: -12px;
}
.dialog-contextual-item[data-popper-placement^='bottom'] > .arrow {
  top: -12px;
}
.dialog-contextual-item[data-popper-placement^='left'] > .arrow {
  right: -12px;
}
.dialog-contextual-item[data-popper-placement^='right'] > .arrow {
  left: -12px;
}
@media only screen and (min-width: 480px) {
  .dialog-contextual-item {
    min-width: 480px;
    max-width: 560px;
  }
}
.dialog-branding-navy {
  background: #001932;
}
.dialog-branding-navy .dialog-button {
  background: #001932;
  color: #ffffff;
}
.dialog-branding-navy .dialog-button:hover {
  background: #003265;
}
.dialog-branding-navy .dialog-icon .icon {
  color: #ffffff;
}
.dialog-branding-navy .dialog-text {
  color: #ffffff;
}
.dialog-branding-navy .arrow::before {
  background: #001932;
}