/*
 * Material Belt Stylesheet (Addons to material.css)
 * @author André Bunse (aburai@github.com) <andre.bunse@gmail.com>
 */
@charset "UTF-8";

/* Google Material Design Typography Basics */
html,
body {
  color: rgba(0, 0, 0, 0.87);
  font-size: 16px;
  font-family: "Roboto","Helvetica","Arial",sans-serif;
  font-weight: normal;
  text-rendering: optimizelegibility;
  line-height: 1.6;
}

body {
  color: rgba(0, 0, 0, 0.87);
  font-size: 0.8125rem;
}

.mdl--canvas {
  background-color: #BDC1C6;
}

.mdl-list__item-avatar, .mdl-list__item-avatar.material-icons {
  background-color: #F1F3F4;
  color: rgba(0, 0, 0, 0.87);
}
.mdl-list .mdl-list__item-secondary-action .material-icons {
  color: rgba(0, 0, 0, 0.87);
}

.material-belt__select {
  font-size: 15px;
  border: 0 none;
  color: rgba(0, 0, 0, 0.54);
}

.mdl--shadow,
.material-belt--shadow {
  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--left,
.material-belt--left {
  float: left;
}
.mdl--right,
.material-belt--right {
  float: right;
}

/* Textfield Additions */
.mdl-textfield__input:focus {
  outline: 0 none;
}
.mdl-textfield .mdl-textfield__input {
  font-family: "Roboto","Helvetica","Arial",sans-serif;
  font-size: 16px;
  font-weight: 500;
}
.mdl-textfield .mdl-textfield__label {
  font-family: "Roboto","Helvetica","Arial",sans-serif;
  font-size: 12px;
  font-weight: 500;
  top: 4px;
}
.mdl-textfield--date .mdl-textfield__input {
  width: calc(100% - 32px);
}
.mdl-textfield.mdl-textfield--date.is-focused .mdl-textfield__label:after {
  width: calc(100% - 32px);
}
.mdl-textfield__datepicker {
  right: 0;
  color: rgb(63, 81, 181);
}
.mdl-textfield.is-invalid .mdl-textfield__datepicker {
  color: #D93025;
}

/*
 * Material Checkbox
 */
.mdl-checkbox__label {
  font-weight: 500;
}

/*
 * Material Toggle / Switch
 */
.mdl-switch__label {
  color: rgba(0, 0, 0, 0.87);
}
.mdl-switch__help {
  padding-left: 54px;
  font-size: 90%;
  font-style: italic;
  margin-bottom: 10px;
}

/*
 * Material Labels
 */
.mdl-label {
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
}

/*
 * Material Menu
 */
.mdl-menu__item {
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
}

.mdl-menu__item select {
  height: 36px;
  margin: 6px 0;
  font-size: 14px;
  font-weight: 600;
  border: 0 none;
}
.mdl-menu__item[disabled] select {
  color: #BDBDBD;
}

/*
 * Login Dialog
 */
.mdl-login > h4 {
  margin: 0 0 10px;
  font-size: 14px;
  text-align: center;
}

.mdl-login__options {
  height: 24px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.mdl-login__language,
.mdl-login__remember {
  width: 50%;
}
.mdl-login__language {
  height: 22px;
  font-size: 14px;
}
.mdl-login__remember-switch {
  width: auto;
  margin-top: 8px;
}
.mdl-login__remember-switch .mdl-switch__label,
.mdl-login__remember .mdl-checkbox__label {
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.54);
  white-space: nowrap;
}
.mdl-login__preamble {
  margin-top: 10px;
  margin-bottom: 20px;
  text-align: center;
}
.mdl-login__preamble-text {
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-style: italic;
  color: rgba(0,0,0,0.54);
}
.mdl-login__message {
  display: none;
  margin-top: 10px;
}
.mdl-login__message-text {
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #D93025;
}
.mdl-login__message .material-icons {
  font-size: 20px;
  padding-left: 15px;
  color: #D93025;
  vertical-align: text-bottom;
}
.mdl-login__tou {
  min-height: 24px;
  padding-right: 6px;
}
.mdl-login__toulink {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.54);
  text-decoration: underline;
  margin-left: 6px;
}

.mdl-list__item:focus {
  outline: 0;
  background-color: #eee;
}
.mdl-list__item:hover {
  outline: 0;
  background-color: #ddd;
}

.mdl-radio__label {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

.mdl-textfield.is-disabled.mdl-textfield--display-only {
  padding-bottom: 8px;
}
.mdl-textfield.is-disabled.mdl-textfield--display-only .mdl-textfield__input {
  border-bottom: none;
  color: rgba(0, 0, 0, 0.87);
}
.mdl-textfield.is-disabled.mdl-textfield--display-only .mdl-textfield__label {
  color: rgba(0, 0, 0, 0.6);
}

/* Positioning fix polyfill */
dialog.mdl-dialog--polyfill {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
}

/*
 * Helper Material Dialog
 */
.mdl-dialog > .mdl-dialog__title {
  font-size: 24px;
  font-weight: 500;
}
.mdl-dialog__title img.centered {
  display: block;
  margin: 0 auto;
  width: 150px;
}

/*
 * Helper Material Tree
 */
.jstree .jstree-checkbox {
  text-decoration: none;
}
.jstree-material .jstree .jstree-checkbox {
  width: 36px;
  height: 36px;
}
.jstree-material .jstree .jstree-checkbox > .mdl-checkbox {
  margin-left: 6px;
}
.jstree-material .jstree-undetermined > a > .jstree-checkbox .mdl-checkbox__tick-outline {
  -webkit-mask-image: none;
  mask-image: none;
}
.jstree-material .jstree-icon .mdi {
  position: relative;
  top: -3px;
  margin: 0 5px;
}

/*
 * Material Chips
 */
.mdl-chips__wrapper {
  padding-bottom: 20px;
}
.mdl-chips__wrapper .mdl-chip {
  margin-right: 8px;
}
.mdl-chip__input {
  height: 28px;
  width: 80px;
  border: none;
  background: transparent;
}

/*
 * Material Slider
 */
.mdl-slider__wrapper {
  height: 30px;
}
.mdl-slider__scala {
  display: flex;
  justify-content: space-between;
}
.mdl-slider__scala > span {
  width: 10px;
  font-size: 9px;
  font-weight: 400;
  text-align: right;
}

/*
 * Helper Material Tabs
 */
.mdl-layout {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}
.mdl-layout__tab-bar--fullwidth .mdl-layout__tab {
  -moz-flex-grow: 1;
  flex-grow: 1;
}
.mdl-layout__tab > .material-icons {
  line-height: 48px;
}

/*
 * Material Actionbar
 */
.mdl-actionbar {
  width: 100%;
  height: 48px;
  padding: 0 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.mdl-actionbar--vertical {
  width: 48px;
  height: 100%;
  padding: 0;
}
.mdl-actionbar__scroll {
  height: 100%;
}
.mdl-actionbar__fixed {
  height: 100%;
  border-left: 1px solid #444;
}
.mdl-actionbar__group {
  position: relative;
  display: flex;
}
.mdl-actionbar--vertical .mdl-actionbar__group {
  flex-direction: column;
}

.mdl-actionbar__item {
  position: relative;
  display: block;
  margin: 8px;
}
.mdl-actionbar--tight .mdl-actionbar__item {
  margin-left: 4px;
  margin-right: 4px;
}
/* Label Button height = 32 + (2x8) = 48px */
.mdl-actionbar__item.mdl-actionbar__item-label-button {
  height: 32px;/* make same height as icon buttons to align icons */
  padding: 0 4px;
  margin: 8px;
  white-space: nowrap;
}
/* Checkbox height = 24 + (2x12) = 48px */
.mdl-actionbar__item.mdl-checkbox {
  margin: 12px;
}
/* Toggle height = 24 + (2x12) = 48px */
.mdl-actionbar__item.mdl-switch {
  margin: 12px 8px;
}

.mdl-actionbar__item select {
  height: 32px;
  border-bottom: none;
  border-radius: 2px;
}
.mdl-actionbar__item select:focus,
.mdl-actionbar__item select:active {
  outline: 0 none;
}
.mdl-actionbar__item-select-button .mdl-textfield {
  border-radius: 2px;
}
.mdl-actionbar__item-select-button .mdl-select.is-open .mdl-textfield {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.mdl-actionbar__item-select-button .mdl-textfield.mdl-textfield--no-radius-right {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.mdl-actionbar__item select ~ button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.mdl-actionbar__item-select-button .mdl-select .mdl-textfield__input {
  height: 20px;
  border-bottom: 0 none;
}

.mdl-actionbar__item-select-button .mdl-textfield--floating-label.is-dirty .mdl-textfield__label {
  top: -8px;
}

.mdl-textfield.is-focused label,
.mdl-textfield.is-dirty label {
  color: #02A191;
	visibility: visible !important;
}

.mdl-actionbar__label {
  max-width: 420px;
  font-size: 16px;
  font-weight: 500;
  line-height: 48px;
  padding: 0 24px 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mdl-actionbar__item-badge {
  height: 20px;
  border-radius: 50%;
  background: gold;
  color: #000;
  padding: 2px 8px;
  margin-top: 4px;
  margin-left: -16px;
  font-weight: bold;
  z-index: 9;
}
.mdl-actionbar__item-badge:last-child {
  margin-right: 8px;
}
.mdl-button__icon-left {
  margin-top: -4px;
  margin-right: 8px;
}

.mdl-actionbar__item.mdl-button:focus:not(:active) {
  background-color: rgba(2, 161, 145, 0.50);
}

.mdl-actionbar__more-button .mdi {
  position: relative;
  top: 3px;
  left: 10px;
  padding-top: 8px;
  border-radius: 4px;
}

.mdl-actionbar__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: gold;
  opacity: 0.4;
}

.mdl-actionbar__item--text {
  font-size: 14px;
}

.mdl-actionbar__more-select select {
  background: #FFFFFF;
}

/*
   Color Themes
 */
/* Light Theme */
.mdl-actionbar.mdl-actionbar--light {
  background-color: rgba(255, 255, 255, 0.8);
}
.mdl-actionbar.mdl-actionbar--light .mdl-actionbar__item {
  color: rgba(0, 0, 0, 0.87);
}
.mdl-actionbar.mdl-actionbar--light .mdl-actionbar__item[disabled] {
  color: rgba(0, 0, 0, 0.38);
}
.mdl-actionbar.mdl-actionbar--light .mdl-actionbar__item.mdl-button--colored {
  color: gold;
}
.mdl-actionbar.mdl-actionbar--light .mdl-actionbar__item.mdl-button--active {
  background-color: rgba(144, 144, 144, 0.7);
}

.mdl-actionbar.mdl-actionbar--light .mdl-actionbar__fixed {
  border-left: 1px solid #CCC;
}
.mdl-actionbar.mdl-actionbar--light .mdl-actionbar__item.mdl-button.is-active:not(:focus) {
  background-color: rgba(64, 64, 64, 0.35);
}
.mdl-actionbar.mdl-actionbar--light .mdl-actionbar__item.mdl-button:focus:not(:active) {
  background-color: rgba(64, 64, 64, 0.50);
}

/* border for separation in light theme only for more menu button */
.mdl-actionbar.mdl-actionbar--light .mdl-actionbar__group.mdl--right {
  border-left: 1px solid #CCC;
}

/* Dark Theme */
.mdl-actionbar.mdl-actionbar--dark {
  background-color: rgba(32, 32, 32, 1);
}
.mdl-actionbar.mdl-actionbar--dark .mdl-actionbar__item {
  color: rgba(255, 255, 255, 1);
}
.mdl-actionbar.mdl-actionbar--dark .mdl-actionbar__item[disabled] {
  color: rgba(255, 255, 255, 0.3);
}
.mdl-actionbar.mdl-actionbar--dark .mdl-actionbar__item.mdl-button--colored {
  color: gold;
}
.mdl-actionbar.mdl-actionbar--dark .mdl-actionbar__item select {
  background-color: rgba(255, 255, 255, 1);
}
.mdl-actionbar.mdl-actionbar--dark .mdl-actionbar__item select[disabled] {
  background-color: rgba(255, 255, 255, 0.3);
}
.mdl-actionbar.mdl-actionbar--dark .mdl-actionbar__item select ~ button {
  background-color: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 1);
}
.mdl-actionbar.mdl-actionbar--dark .mdl-actionbar__item select ~ button[disabled] {
  background-color: rgba(255, 255, 255, 0.3);
  color: rgba(0, 0, 0, 0.3);
}
.mdl-actionbar.mdl-actionbar--dark .mdl-actionbar__item select ~ button:focus {
  background-color: rgba(2, 161, 145, 0.30);
}

.mdl-actionbar.mdl-actionbar--dark .mdl-actionbar__item .mdl-select--disabled .mdl-textfield {
  background-color: rgba(255, 255, 255, 0.3);
  color: rgba(0, 0, 0, 0.3);
}
.mdl-actionbar.mdl-actionbar--dark .mdl-actionbar__textfield .mdl-textfield__input {
  color: rgba(255, 255, 255, 1);
}
.mdl-actionbar.mdl-actionbar--dark .mdl-actionbar__label {
  color: rgba(255, 255, 255, 0.70);
}
.mdl-actionbar.mdl-actionbar--dark .mdl-actionbar__label.disabled {
  color: rgba(255, 255, 255, 0.50);
}
.mdl-actionbar.mdl-actionbar--dark .ui-layout-pane {
  background-color: #222222;
}
.mdl-actionbar.mdl-actionbar--dark .mdl-actionbar__group {
  border-left: 1px solid #444;
}
.mdl-actionbar.mdl-actionbar--dark.mdl-actionbar--vertical .mdl-actionbar__group {
  border-left: 0 none;
  border-bottom: 1px solid #444;
}
.mdl-actionbar.mdl-actionbar--dark .mdl-checkbox__box-outline {
  border-color: rgba(255, 255, 255, 1);
}
.mdl-actionbar.mdl-actionbar--dark .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
  background-color: rgba(255, 255, 255, 0.9);
}
.mdl-actionbar.mdl-actionbar--dark .mdl-switch__label {
  color: rgba(255, 255, 255, 0.7);
}
.mdl-actionbar.mdl-actionbar--dark .mdl-switch__track {
  background: rgba(255, 255, 255, 0.9);
}
.mdl-actionbar.mdl-actionbar--dark .mdl-textfield {
  background: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 1);
}
.mdl-actionbar.mdl-actionbar--dark .mdl-select__arrow {
  color: rgba(0, 0, 0, 1);
}

/* Inverted Icons for MDI package */
.mdl-actionbar.mdl-actionbar--dark .mdi-dark-invert .mdi {
  background: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 1);
}
.mdl-actionbar.mdl-actionbar--dark .mdl-actionbar__item[disabled].mdi-dark-invert .mdi {
  color: rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.3);
}

.mdl-menu .mdl-menu__item.mdi-dark-invert .mdi {
  background: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
}
.mdl-menu .mdl-menu__item[disabled].mdi-dark-invert .mdi {
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.3);
}

/*
 * Select
 */
.mdl-select {
  position: relative;
  display: inline-block;
}
.mdl-select.mdl-select--notpadded {
  float: left;
}
.mdl-select.mdl-select--notpadded .mdl-textfield__input {
  border-bottom: 0;
}
.mdl-select .mdl-textfield,
.mdl-select .mdl-textfield__input {
  cursor: pointer;
}
.mdl-select .mdl-textfield__input {
  font-size: 14px;
}
.mdl-select .mdl-textfield__input::-ms-clear {
  display: none;
}
.mdl-select.mdl-select--disabled .mdl-textfield,
.mdl-select.mdl-select--singleoption .mdl-textfield {
  cursor: default;
  pointer-events: none;
}
.mdl-select.mdl-select--notpadded .mdl-textfield {
  padding: 4px 2px 0 8px; /* padding left as buttons in dropdown menu */
}

.mdl-select__dropdown {
  display: none;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 300px;
  background: #FFFFFF;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.mdl-select__dropdown.mdl-select--maxheight {
  max-height: 300px;
/*  max-width: 100px;*/
}

.mdl-select__dropdown.is-visible {
  display: block;
  opacity: 1;
  z-index: 9999;
}
.mdl-select__options {
  padding: 0;
  margin: 0;
  list-style: none;
}
.mdl-select__options > li.is-selected {
  background-color: rgba(158, 158, 158, 0.20);
}
.mdl-select__options > li.is-hovered {
  background-color: rgba(158, 158, 158, 0.40);
}

.mdl-select__options .mdl-button {
  width: 100%;
  height: 32px; /* set to same height as textfield */
  padding-left: 8px; /* see padding left from textfield */
  padding-right: 8px;
  font-size: 14px;
  text-align: left;
  text-transform: none;
  white-space:nowrap
}

.mdl-select__options .material-select-option-item {
  width: 100%;
}
.mdl-select__arrow {
  position: absolute;
  top: 20px;
  right: 4px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.mdl-select.mdl-select--notpadded .mdl-select__arrow {
  top: 6px;
}
.mdl-select.mdl-select--disabled .mdl-select__arrow {
  color: rgba(0, 0, 0, 0.3);
}
.mdl-select__dropdown.is-visible ~ .mdl-select__arrow,
.mdl-select.is-open .mdl-select__arrow {
  transform: rotate(180deg);
}

/* prevent bar animation */
.mdl-select .mdl-textfield.is-focused .mdl-textfield__label:after {
  visibility: hidden;
}

/* Material Design Dropdown */
.mdl-dropdown {
  display: none;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  background: #FFFFFF;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.mdl-dropdown.mdl-dropdown--maxheight {
  max-height: 300px;
}
.mdl-dropdown.is-visible {
  display: block;
  opacity: 1;
}
.mdl-dropdown__items {
  padding: 0;
  margin: 0;
  list-style: none;
}
.mdl-dropdown__items > li.is-selected {
  background-color: #f2f2f2;
}
.mdl-dropdown__items .mdl-button {
  width: 100%;
  text-align: left;
  text-transform: none;
}

/*
 * Search Dialog
 *
 * [ Select ] [ Input ] [ Button ]
 */
.mdl-search,
.mdl-search *,
.mdl-search *:before,
.mdl-search *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.mdl-search {
  display: inline-block;
  min-width: 430px; /* 18x (x=24px) */
  height: 36px; /* 1.5x */
  overflow: hidden;
}
.mdl-search .mdl-search__select {
  min-width: 96px; /* 4x */
  height: 36px;
  font-size: 14px;
  font-weight: 600;
  border: 0 none;
  float: left;
  background: #EEEEEE;
  color: rgba(0, 0, 0, 0.87);
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.mdl-search .mdl-textfield {
  width: 298px;
  padding: 0;
  float: left;
}
.mdl-search .mdl-search__input {
  width: 298px;
  height: 36px;
  padding: 6px 12px;
  border: 0;
  background: white;
  color: rgba(0, 0, 0, 0.87);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.mdl-search .mdl-search__input:focus,
.mdl-search .mdl-search__input:active {
  outline: 0 none;
}
.mdl-search__button {
  min-width: 36px;
  padding: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  float: left;
}

.mdl-search__dropdown {
  position: absolute;
  min-height: 20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Material Pagination */
.mdl-pagination-step {
  display: none;
}
/*.mdl-pagination-step.mdl-pagination-prev {*/
  /*top: -100%;*/
/*}*/
/*.mdl-pagination-step.mdl-pagination-next {*/
  /*top: 100%;*/
/*}*/
.mdl-pagination-step.mdl-pagination-curr {
  display: block;
}

/* Material List Helper */
.mdl-list__item.is-active {
  background-color: #EEE;
}
.mdl-list__item-secondary-action .material-icons {
  color: lightgray;
}
.mdl-list__item-secondary-action.mdl-list__item-secondary-action--highlighted .material-icons {
  color: gold;
}

.material-belt-article-ribbon {
  width: 100%;
  height: 40vh;
  background-color: #3F51B5;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
}

.material-belt-article-main {
  margin-top: -35vh;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
}

.material-belt-article-header .mdl-layout__header-row {
  padding-left: 40px;
}

.material-belt-article-container {
  max-width: 1600px;
  width: calc(100% - 16px);
  margin: 0 auto;
}

.material-belt-article-content {
  border-radius: 2px;
  padding: 20px 56px;
  margin-bottom: 80px;
}
.material-belt-article-content h2 {
  font-size: 28px;
  line-height: 40px;
  text-align: center;
}

.material-belt-article-layout.is-small-screen .material-belt-article-content {
  padding: 40px 28px;
}

.mdl-data-table--wrap {
  white-space: normal;
}

.mdl-data-table td,
.mdl-data-table th {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

.mdl-data-table .mdl-data-table__cell--icon-center {
  text-align: center;
}

/* Material Button */
.mdl-button__label {
  display: inline-block;
  line-height: 1;
  width: 90%;
}
.mdl-button__file-upload {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: 9999;
  cursor: pointer;
}

.mdl-expansion-panels {
  width: 100%;
  min-height: 96px;
  background-color: rgb(255, 255, 255);
}
.mdl-expansion-panels ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mdl-expansion-panels__list {
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.mdl-expansion-panels__panel {
  display: block;
  height: 48px;
  padding: 0 24px;
}
.mdl-expansion-panels__panel:hover {
  background-color: rgb(238, 238, 238);
  cursor: pointer;
}
.mdl-expansion-panels__collapsed {
}
.mdl-expansion-panels__collapsed-label {
  width: 120px;
  line-height: 48px;
  color: rgba(0, 0, 0, 0.87);
}
.mdl-expansion-panels__collapsed-descr {
  line-height: 48px;
  color: rgba(0, 0, 0, 0.54);
}
.mdl-expansion-panels__collapsed-icon {
  width: 24px;
  padding-left: 16px;
  margin: 12px 0;
  color: rgba(0, 0, 0, 0.38);
}

.mdl-expansion-panels__expanded {
  min-height: 96px;
}

.mdl-expansion-panels__list > li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.mdl-expansion-panels__list-item-heading {
  display: block;
  width: 100%;
  line-height: 32px;
  margin: 0;
  padding: 8px 16px 0;
  text-align: left;
  color: rgba(255, 255, 255, 0.54);
}

.mdl-expansion-panels__list-item {

}
.mdl-expansion-panels__list-item h2 {
  font-size: 16px;
  font-weight: 400;
}


/**
 * CONTENTS
 *
 * #Introduction........Naming conventions used throughout the code.
 *
 * #SETTINGS
 * Variables............Globally-available variables and config.
 *
 * #TOOLS
 * Mixins...............Useful mixins.
 *
 * #GENERIC
 * Demo styles..........Styles for demo only (consider removing these).
 *
 * #BASE
 * Raw styles...........The very basic component wrapper.
 * Modifiers............The basic styles dependant on component placement.
 * Debuggers............The basic styles dependant on component placement.
 *
 * #BUTTONS
 * Base..................Wrapping and constraining every button.
 * Modifiers.............Styles that depends on state and settings.
 * Animations............Main animations of the component.
 * Debuggers.............Styles for development.
 *
 * #LABELS
 * Base..................Wrapping and constraining every label.
 * Modifiers.............Styles that depends on state and settings.
 * Debuggers.............Styles for development.
 *
 * #DEVELOPMENT
 * In development........These styles are in development and not yet finalised
 * Debuggers.............Helper styles and flags for development.
 */
/*------------------------------------*\
    #Introduction
\*------------------------------------*/
/**
 * The code AND the comments use naming conventions to refer to each part of
 * the UI put in place by this component. If you see that somewhere they are
 * not followed please consider a Pull Request. The naming conventions are:
 *
 * "Component" : the widget itself as a whole. This is the last time it will be
 *               called anything different than "component". So, stay away from
 *               "widget", "button" or anything else when referring to the
 *               Component in general.
 *
 * "Main Button" : the button that is always in view. Hovering or clicking on it
 *                 will reveal the child buttons.
 *
 * "Child buttons" : if you've read the previous point you know what they are.
 *                   Did you read the previous point? :)
 *
 * "Label(s)" : the tooltip that fades in when hovering over a button.

/*------------------------------------*\
    #SETTINGS | Variables
\*------------------------------------*/
/**
 * These variables are the default styles that serve as fallback and can be
 * easily customised at compile time.
 * Consider overriding them in your own style sheets rather than editing them
 * here. Refer to the docs for more info.
 */
/* COLORS ----------------------------*/
/* EFFECTS ---------------------------*/
/* SPEEDS ----------------------------*/
/* SIZES -----------------------------*/
/* SPACING ---------------------------*/
/* OTHER VARIABLES -------------------*/
/*------------------------------------*\
    #BASE | Raw styles
\*------------------------------------*/
/**
 * The very core styling of the button.
 * These styles are shared by every instance of the button.
 * Styles placed here should NOT care about placement in the screen,
 * options chosen by the user or state of the button.
 */
.mfb-component--tl, .mfb-component--tr, .mfb-component--bl, .mfb-component--br {
  box-sizing: border-box;
  margin: 25px;
  position: fixed;
  white-space: nowrap;
  z-index: 30;
  padding-left: 0;
  list-style: none; }
.mfb-component--tl *, .mfb-component--tr *, .mfb-component--bl *, .mfb-component--br *, .mfb-component--tl *:before, .mfb-component--tr *:before, .mfb-component--bl *:before, .mfb-component--br *:before, .mfb-component--tl *:after, .mfb-component--tr *:after, .mfb-component--bl *:after, .mfb-component--br *:after {
  box-sizing: inherit; }

/*------------------------------------*\
    #BASE | Modifiers
\*------------------------------------*/
/**
 * These styles depends on the placement of the button.
 * Styles can be:
 * 1. Top-left:  modified by the " --tl " suffix.
 * 2. Top-right: modified by the " --tr " suffix.
 * 3. Bottom-left:  modified by the " --bl " suffix.
 * 4. Bottom-right: modified by the " --br " suffix.
 */
.mfb-component--tl {
  left: 0;
  top: 0; }

.mfb-component--tr {
  right: 0;
  top: 0; }

.mfb-component--bl {
  left: 0;
  bottom: 0; }

.mfb-component--br {
  right: 0;
  bottom: 0; }

/*------------------------------------*\
    #BUTTONS | Base
\*------------------------------------*/
.mfb-component__button--main,
.mfb-component__button--child {
  background-color: #E40A5D;
  display: inline-block;
  position: relative;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  outline: none;
  padding: 0;
  position: relative;
  -webkit-user-drag: none;
  color: #f1f1f1;
  text-decoration: none;
}
/* don't let link color change icon */
.mfb-component__button--main:hover,
.mfb-component__button--child:hover,
.mfb-component__button--main:focus,
.mfb-component__button--child:focus,
.mfb-component__button--main:active,
.mfb-component__button--child:active,
.mfb-component__button--main:visited,
.mfb-component__button--child:visited {
  color: #f1f1f1;
  text-decoration: none;
}

/**
 * This is the unordered list for the list items that contain
 * the child buttons.
 *
 */
.mfb-component__list {
  list-style: none;
  margin: 0;
  padding: 0; }
.mfb-component__list > li {
  display: block;
  position: absolute;
  top: 0;
  right: 1px;
  padding: 10px 0;
  margin: -10px 0; }

/**
 * These are the basic styles for all the icons inside the main button
 */
.mfb-component__icon, .mfb-component__main-icon--active,
.mfb-component__main-icon--resting, .mfb-component__child-icon {
  position: absolute;
  font-size: 18px;
  text-align: center;
  line-height: 56px;
  width: 100%; }

.mfb-component__wrap {
  padding: 25px;
  margin: -25px; }

[data-mfb-toggle="hover"]:hover .mfb-component__icon, [data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active,
[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting, [data-mfb-toggle="hover"]:hover .mfb-component__child-icon,
[data-mfb-state="open"] .mfb-component__icon,
[data-mfb-state="open"] .mfb-component__main-icon--active,
[data-mfb-state="open"] .mfb-component__main-icon--resting,
[data-mfb-state="open"] .mfb-component__child-icon {
  -webkit-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg); }

/*------------------------------------*\
    #BUTTONS | Modifiers
\*------------------------------------*/
.mfb-component__button--main {
  height: 56px;
  width: 56px;
  z-index: 20; }

.mfb-component__button--main > .material-icons {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-12px,-12px);
  transform: translate(-12px,-12px);
  line-height: 24px;
  width: 24px;
}

.mfb-component__button--child {
  height: 56px;
  width: 56px; }

.mfb-component__main-icon--active,
.mfb-component__main-icon--resting {
  -webkit-transform: scale(1) rotate(360deg);
  transform: scale(1) rotate(360deg);
  -webkit-transition: -webkit-transform 150ms cubic-bezier(0.4, 0, 1, 1);
  transition: transform 150ms cubic-bezier(0.4, 0, 1, 1); }

.mfb-component__child-icon,
.mfb-component__child-icon {
  line-height: 56px;
  font-size: 18px; }

.mfb-component__main-icon--active {
  opacity: 0; }

[data-mfb-toggle="hover"]:hover .mfb-component__main-icon,
[data-mfb-state="open"] .mfb-component__main-icon {
  -webkit-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg); }
[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting,
[data-mfb-state="open"] .mfb-component__main-icon--resting {
  opacity: 0;
  position: absolute !important; }
[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active,
[data-mfb-state="open"] .mfb-component__main-icon--active {
  opacity: 1; }

/*------------------------------------*\
    #BUTTONS | Animations
\*------------------------------------*/
/**
 * SLIDE IN + FADE
 * When hovering the main button, the child buttons slide out from beneath
 * the main button while transitioning from transparent to opaque.
 *
 */
.mfb-component--tl.mfb-slidein .mfb-component__list li,
.mfb-component--tr.mfb-slidein .mfb-component__list li {
  opacity: 0;
  transition: all 0.5s; }
.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li,
.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li,
.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li {
  opacity: 1; }
.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(70px);
  transform: translateY(70px); }
.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(140px);
  transform: translateY(140px); }
.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(210px);
  transform: translateY(210px); }
.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(280px);
  transform: translateY(280px); }

.mfb-component--bl.mfb-slidein .mfb-component__list li,
.mfb-component--br.mfb-slidein .mfb-component__list li {
  opacity: 0;
  transition: all 0.5s; }
.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li,
.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li,
.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li {
  opacity: 1; }
.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(-70px);
  transform: translateY(-70px); }
.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(-140px);
  transform: translateY(-140px); }
.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(-210px);
  transform: translateY(-210px); }
.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(-280px);
  transform: translateY(-280px); }

/**
 * SLIDE IN SPRING
 * Same as slide-in but with a springy animation.
 *
 */
.mfb-component--tl.mfb-slidein-spring .mfb-component__list li,
.mfb-component--tr.mfb-slidein-spring .mfb-component__list li {
  opacity: 0;
  transition: all 0.5s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(1) {
  transition-delay: 0.05s; }
.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(2) {
  transition-delay: 0.1s; }
.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(3) {
  transition-delay: 0.15s; }
.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(4) {
  transition-delay: 0.2s; }
.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li,
.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li,
.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li {
  opacity: 1; }
.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
  transition-delay: 0.05s;
  -webkit-transform: translateY(70px);
  transform: translateY(70px); }
.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
  transition-delay: 0.1s;
  -webkit-transform: translateY(140px);
  transform: translateY(140px); }
.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
  transition-delay: 0.15s;
  -webkit-transform: translateY(210px);
  transform: translateY(210px); }
.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
  transition-delay: 0.2s;
  -webkit-transform: translateY(280px);
  transform: translateY(280px); }

.mfb-component--bl.mfb-slidein-spring .mfb-component__list li,
.mfb-component--br.mfb-slidein-spring .mfb-component__list li {
  opacity: 0;
  transition: all 0.5s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(1) {
  transition-delay: 0.05s; }
.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(2) {
  transition-delay: 0.1s; }
.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(3) {
  transition-delay: 0.15s; }
.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(4) {
  transition-delay: 0.2s; }
.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li,
.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li,
.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li {
  opacity: 1; }
.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
  transition-delay: 0.05s;
  -webkit-transform: translateY(-70px);
  transform: translateY(-70px); }
.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
  transition-delay: 0.1s;
  -webkit-transform: translateY(-140px);
  transform: translateY(-140px); }
.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
  transition-delay: 0.15s;
  -webkit-transform: translateY(-210px);
  transform: translateY(-210px); }
.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
  transition-delay: 0.2s;
  -webkit-transform: translateY(-280px);
  transform: translateY(-280px); }

/**
 * ZOOM-IN
 * When hovering the main button, the child buttons grow
 * from zero to normal size.
 *
 */
.mfb-component--tl.mfb-zoomin .mfb-component__list li,
.mfb-component--tr.mfb-zoomin .mfb-component__list li {
  -webkit-transform: scale(0);
  transform: scale(0); }
.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(70px) scale(0);
  transform: translateY(70px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.15s; }
.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(140px) scale(0);
  transform: translateY(140px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.1s; }
.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(210px) scale(0);
  transform: translateY(210px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.05s; }
.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(280px) scale(0);
  transform: translateY(280px) scale(0);
  transition: all 0.5s;
  transition-delay: 0s; }
.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(70px) scale(1);
  transform: translateY(70px) scale(1);
  transition-delay: 0.05s; }
.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(140px) scale(1);
  transform: translateY(140px) scale(1);
  transition-delay: 0.1s; }
.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(210px) scale(1);
  transform: translateY(210px) scale(1);
  transition-delay: 0.15s; }
.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(280px) scale(1);
  transform: translateY(280px) scale(1);
  transition-delay: 0.2s; }

.mfb-component--bl.mfb-zoomin .mfb-component__list li,
.mfb-component--br.mfb-zoomin .mfb-component__list li {
  -webkit-transform: scale(0);
  transform: scale(0); }
.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(-70px) scale(0);
  transform: translateY(-70px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.15s; }
.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(-140px) scale(0);
  transform: translateY(-140px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.1s; }
.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(-210px) scale(0);
  transform: translateY(-210px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.05s; }
.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(-280px) scale(0);
  transform: translateY(-280px) scale(0);
  transition: all 0.5s;
  transition-delay: 0s; }
.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(-70px) scale(1);
  transform: translateY(-70px) scale(1);
  transition-delay: 0.05s; }
.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(-140px) scale(1);
  transform: translateY(-140px) scale(1);
  transition-delay: 0.1s; }
.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(-210px) scale(1);
  transform: translateY(-210px) scale(1);
  transition-delay: 0.15s; }
.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(-280px) scale(1);
  transform: translateY(-280px) scale(1);
  transition-delay: 0.2s; }

/**
 * FOUNTAIN
 * When hovering the main button the child buttons
 * jump into view from outside the viewport
 */
.mfb-component--tl.mfb-fountain .mfb-component__list li,
.mfb-component--tr.mfb-fountain .mfb-component__list li {
  -webkit-transform: scale(0);
  transform: scale(0); }
.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(-70px) scale(0);
  transform: translateY(-70px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.15s; }
.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(-140px) scale(0);
  transform: translateY(-140px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.1s; }
.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(-210px) scale(0);
  transform: translateY(-210px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.05s; }
.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(-280px) scale(0);
  transform: translateY(-280px) scale(0);
  transition: all 0.5s;
  transition-delay: 0s; }
.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(70px) scale(1);
  transform: translateY(70px) scale(1);
  transition-delay: 0.05s; }
.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(140px) scale(1);
  transform: translateY(140px) scale(1);
  transition-delay: 0.1s; }
.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(210px) scale(1);
  transform: translateY(210px) scale(1);
  transition-delay: 0.15s; }
.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(280px) scale(1);
  transform: translateY(280px) scale(1);
  transition-delay: 0.2s; }

.mfb-component--bl.mfb-fountain .mfb-component__list li,
.mfb-component--br.mfb-fountain .mfb-component__list li {
  -webkit-transform: scale(0);
  transform: scale(0); }
.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(70px) scale(0);
  transform: translateY(70px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.15s; }
.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(140px) scale(0);
  transform: translateY(140px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.1s; }
.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(210px) scale(0);
  transform: translateY(210px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.05s; }
.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(280px) scale(0);
  transform: translateY(280px) scale(0);
  transition: all 0.5s;
  transition-delay: 0s; }
.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(-70px) scale(1);
  transform: translateY(-70px) scale(1);
  transition-delay: 0.05s; }
.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(-140px) scale(1);
  transform: translateY(-140px) scale(1);
  transition-delay: 0.1s; }
.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(-210px) scale(1);
  transform: translateY(-210px) scale(1);
  transition-delay: 0.15s; }
.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(-280px) scale(1);
  transform: translateY(-280px) scale(1);
  transition-delay: 0.2s; }

/*------------------------------------*\
    #LABELS | base
\*------------------------------------*/
/**
 * These are the labels associated to each button,
 * exposed only when hovering the related button.
 * They are called labels but are in fact data-attributes of
 * each button (an anchor tag).
 */
[data-mfb-label]:after {
  content: attr(data-mfb-label);
  opacity: 0;
  transition: all 0.5s;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: normal;
  pointer-events: none;
  line-height: normal;
  position: absolute;
  top: 50%;
  margin-top: -11px;
  transition: all 0.5s; }

[data-mfb-toggle="hover"] [data-mfb-label]:hover:after,
[data-mfb-state="open"] [data-mfb-label]:after {
  content: attr(data-mfb-label);
  opacity: 1;
  transition: all 0.3s; }

/*------------------------------------*\
    #LABELS | Modifiers
\*------------------------------------*/
.mfb-component--br [data-mfb-label]:after, .mfb-component--tr [data-mfb-label]:after {
  content: attr(data-mfb-label);
  right: 70px; }

.mfb-component--br .mfb-component__list [data-mfb-label]:after, .mfb-component--tr .mfb-component__list [data-mfb-label]:after {
  content: attr(data-mfb-label);
  right: 70px; }

.mfb-component--tl [data-mfb-label]:after, .mfb-component--bl [data-mfb-label]:after {
  content: attr(data-mfb-label);
  left: 70px; }

.mfb-component--tl .mfb-component__list [data-mfb-label]:after, .mfb-component--bl .mfb-component__list [data-mfb-label]:after {
  content: attr(data-mfb-label);
  left: 70px; }

/* Scrollbar */
.noscroll {
  overflow: hidden !important;
}
.scrollable,
.scrollable-y {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.scrollable-x {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
.scrollable-both {
  overflow: auto !important;
}

/* Hidden Helper Classes */
.hidden { display: none !important; }
.avail-hidden { position: absolute !important; top: -2000px; left: -2000px; visibility: hidden !important; }
.invisible { visibility: hidden !important; }
.hidden-force { display: none !important; visibility: hidden !important; }