button.mmf-button {
  background: none repeat scroll 0 0 transparent;
  border: medium none;
  border-radius: 0;
  border-spacing: 0;
  outline: 0;
  user-select: none;
  cursor: pointer;
  pointer-events: all;
  outline: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
  font-family: "Roboto";
  font-weight: 400;
  height: 36px;
  margin: 6px;
  padding: 0 16px;
  font-weight: medium;
  font-size: inherit;
  line-height: 1em;
  border-radius: 2px;
  color: #00c853;
  background-color: inherit;
  transition: background-color 0.25s linear; }
  button.mmf-button::-moz-focus-inner, button.mmf-button::-moz-focus-inner {
    border: 0;
    padding: 0; }
  button.mmf-button.is-enabled:hover, button.mmf-button.is-enabled:focus {
    background-color: #ECEFF1; }
  button.mmf-button.is-disabled {
    color: rgba(0, 200, 83, 0.38); }
    button.mmf-button.is-disabled:focus, button.mmf-button.is-disabled:hover {
      background-color: inherit;
      color: rgba(0, 200, 83, 0.38);
      cursor: default; }

button.mmf-button--raised {
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  color: #ECEFF1;
  background-color: #00c853; }
  button.mmf-button--raised.is-enabled:hover, button.mmf-button--raised.is-enabled:focus {
    background-color: #00953e; }
  button.mmf-button--raised.is-disabled {
    color: rgba(236, 239, 241, 0.38);
    background-color: rgba(0, 200, 83, 0.38); }
    button.mmf-button--raised.is-disabled:hover, button.mmf-button--raised.is-disabled:focus {
      background-color: rgba(0, 200, 83, 0.38);
      cursor: default; }

.mmf-icon {
  cursor: pointer;
  pointer-events: all;
  outline: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
  /* copy of styles set by .material-icons */
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  color: inherit;
  text-align: center;
  width: 48px;
  height: 48px;
  line-height: 48px;
  transition: color 0.1s linear; }
  .mmf-icon:hover {
    color: #00c853; }

div.mmf-select__wrapper {
  position: relative;
  display: inline-block; }
  div.mmf-select__wrapper:after {
    content: "keyboard_arrow_down";
    /* copy of styles set by .material-icons */
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    position: absolute;
    font-size: 1.25em;
    right: 0;
    bottom: 0;
    color: #000;
    transition: color 0.25s linear;
    pointer-events: none; }
  div.mmf-select__wrapper:hover:after, div.mmf-select__wrapper.has-focus:after {
    color: #81c784; }

select.mmf-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  border: medium none;
  font-size: inherit;
  color: rgba(0, 0, 0, 0.87);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.54);
  width: 100%;
  font-size: inherit;
  box-sizing: border-box;
  background: transparent;
  transform: translateZ(0);
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: border-color 0.25s linear;
  font-size: inherit;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding-top: 4px;
  padding-right: 28px;
  background-color: inherit; }
  select.mmf-select::-ms-expand {
    display: none; }
  select.mmf-select * {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    border: medium none;
    font-size: inherit; }
    select.mmf-select *::-ms-expand {
      display: none; }
  select.mmf-select:focus {
    border-color: #00c853; }
  select.mmf-select:hover {
    border-color: #00c853; }

select.mmf-select option {
  font-size: inherit;
  color: #000; }

.mmf-form--select label {
  padding-left: 16px;
  line-height: 29px; }

.mmf-form__error--warning {
  color: #F39C12; }

.mmf-form__error--error {
  color: #d50000; }

input.mmf-input {
  color: rgba(0, 0, 0, 0.87);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.54);
  width: 100%;
  font-size: inherit;
  box-sizing: border-box;
  background: transparent;
  transform: translateZ(0);
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: border-color 0.25s linear; }
  input.mmf-input:focus {
    border-color: #00c853; }
  input.mmf-input:hover {
    border-color: #00c853; }

input.mmf-checkbox {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  border: medium none;
  font-size: inherit;
  cursor: pointer;
  pointer-events: all;
  outline: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
  color: rgba(0, 0, 0, 0.87);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.54);
  width: 100%;
  font-size: inherit;
  box-sizing: border-box;
  background: transparent;
  transform: translateZ(0);
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: border-color 0.25s linear;
  position: relative;
  display: inline-block;
  font-size: 1.25em;
  width: 1em;
  height: 1em;
  border-bottom: none;
  transform: translateY(25%); }
  input.mmf-checkbox::-ms-expand {
    display: none; }
  input.mmf-checkbox:focus {
    border-color: #00c853; }
  input.mmf-checkbox:hover {
    border-color: #00c853; }
  input.mmf-checkbox:checked:after {
    content: "check_box"; }
  input.mmf-checkbox:after {
    cursor: pointer;
    pointer-events: all;
    outline: none !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    user-select: none;
    /* copy of styles set by .material-icons */
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    content: "check_box_outline_blank";
    position: absolute;
    color: rgba(0, 0, 0, 0.87);
    font-size: inherit;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: color 0.25s linear; }
  input.mmf-checkbox:focus:after, input.mmf-checkbox:hover:after {
    color: #00c853; }

.mmf-form--checkbox label {
  color: inherit;
  padding-left: 16px; }

/**
 * Default form styles, controlling label position by classnames. The Markup should look like
 *
 *  <my-form extends with-moving-label>
 *      <label>Moving Title</label>
 *      <input-type>
 *      ...
 * @param {string} input-type   - associated input selector
 */
.mmf-form--input input {
  padding: 1.1em 0 0 0; }

.mmf-form--input label.mmf-label {
  width: 100%;
  position: absolute;
  top: 0;
  display: inline-block;
  transition: all 0.2s ease-in-out;
  color: #000;
  opacity: 0.54;
  font-size: 0.8em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; }

.mmf-form--input.hasFocus label.mmf-label {
  color: #81c784;
  opacity: 0.87; }

.mmf-form--input.has-error select,
.mmf-form--input.has-error input {
  border-color: #d50000; }

.mmf-form--input.has-error.hasFocus label.mmf-label {
  color: #d50000; }

.mmf-form--input.has-warning select,
.mmf-form--input.has-warning input {
  border-color: #F39C12; }

.mmf-form--input.has-warning.hasFocus label.mmf-label {
  color: #F39C12; }

.mmf-form--input.isEmpty.hasNoFocus label.mmf-label {
  transform: translateY(1.1em);
  font-size: 1em; }

.mmf-label {
  color: inherit;
  font-size: inherit; }

.mmf-form .mmf-label:hover {
  cursor: pointer; }

textarea.mmf-textarea {
  color: rgba(0, 0, 0, 0.87);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.54);
  width: 100%;
  font-size: inherit;
  box-sizing: border-box;
  background: transparent;
  transform: translateZ(0);
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: border-color 0.25s linear;
  width: 100%;
  margin: 1.1em 0 0 0;
  resize: vertical; }
  textarea.mmf-textarea:focus {
    border-color: #00c853; }
  textarea.mmf-textarea:hover {
    border-color: #00c853; }
  textarea.mmf-textarea:focus {
    outline-style: none;
    outline-width: 0; }

.hasError textarea.mmf-textarea {
  border-color: #d50000; }

.mmf-form--textarea textarea {
  margin: 1.1em 0 0 0; }

.mmf-form--textarea label.mmf-label {
  width: 100%;
  position: absolute;
  top: 0;
  display: inline-block;
  transition: all 0.2s ease-in-out;
  color: #000;
  opacity: 0.54;
  font-size: 0.8em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; }

.mmf-form--textarea.hasFocus label.mmf-label {
  color: #81c784;
  opacity: 0.87; }

.mmf-form--textarea.has-error select,
.mmf-form--textarea.has-error input {
  border-color: #d50000; }

.mmf-form--textarea.has-error.hasFocus label.mmf-label {
  color: #d50000; }

.mmf-form--textarea.has-warning select,
.mmf-form--textarea.has-warning input {
  border-color: #F39C12; }

.mmf-form--textarea.has-warning.hasFocus label.mmf-label {
  color: #F39C12; }

.mmf-form--textarea.isEmpty.hasNoFocus label.mmf-label {
  transform: translateY(1.1em);
  font-size: 1em; }

.mmf-form--textarea textarea {
  width: 100%;
  resize: vertical;
  border-sizing: border-box;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.54);
  line-height: 1.4em;
  background: transparent;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  .mmf-form--textarea textarea:focus {
    border-color: #81c784; }

.mmf-card {
  z-index: 20;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  width: 100%;
  border-radius: 2px; }

/**
 * Default form styles, controlling label position by classnames. The Markup should look like
 *
 *  <my-form extends with-moving-label>
 *      <label>Moving Title</label>
 *      <input-type>
 *      ...
 * @param {string} input-type   - associated input selector
 */
.mmf-form {
  position: relative; }
  .mmf-form label {
    color: #000;
    opacity: 0.54; }
  .mmf-form .mmf-meta {
    margin-top: 4px; }

ul.mmf-form__errors {
  font-size: 0.8em;
  list-style: none;
  color: #d50000; }
  ul.mmf-form__errors li {
    margin-top: 4px; }

.mmf-meta {
  opacity: 0.54;
  font-style: italic;
  font-size: 0.8em; }

/**
 * Default form styles, controlling label position by classnames. The Markup should look like
 *
 *  <my-form extends with-moving-label>
 *      <label>Moving Title</label>
 *      <input-type>
 *      ...
 * @param {string} input-type   - associated input selector
 */
/**
 * Default form styles, controlling label position by classnames. The Markup should look like
 *
 *  <my-form extends with-moving-label>
 *      <label>Moving Title</label>
 *      <input-type>
 *      ...
 * @param {string} input-type   - associated input selector
 */
/**
 * Default form styles, controlling label position by classnames. The Markup should look like
 *
 *  <my-form extends with-moving-label>
 *      <label>Moving Title</label>
 *      <input-type>
 *      ...
 * @param {string} input-type   - associated input selector
 */
.editron-value {
  position: relative;
  padding: 16px;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px; }
  .editron-value label {
    color: #000;
    opacity: 0.54; }

.editron-container__child .editron-container__button--add {
  cursor: pointer;
  pointer-events: all;
  outline: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
  text-align: center; }
  .editron-container__child .editron-container__button--add .mmf-icon {
    color: rgba(255, 255, 255, 0.87);
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  .editron-container__child .editron-container__button--add:hover .mmf-icon {
    color: #fff;
    text-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }

.editron-container--array.has-add-disabled > .editron-container__header .mmf-icon--add {
  display: none; }

.editron-editor.has-remove-disabled > .editron-container > .editron-container__header .mmf-icon--delete {
  visibility: hidden; }

.editron-container__controls {
  list-style: none; }

.editron-item.with-index:before {
  content: attr(data-index);
  display: inline-block;
  position: absolute;
  left: -48px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.8em; }

.editron-container__header {
  display: flex; }
  .editron-container__header.noTitle.noActions {
    display: none; }
  .editron-container__header.noTitle .editron-container__title {
    display: none; }
  .editron-container__header.noActions .editron-container__actions {
    display: none; }
  .editron-container__header.withIcon .editron-container__title h2 {
    padding-left: 0; }
  .editron-container__header.withActions {
    padding-right: 0; }
  .editron-container__header .editron-container__title {
    display: flex;
    width: 100%; }
    .editron-container__header .editron-container__title h2 {
      margin: 0;
      flex-grow: 2;
      display: inline-block;
      align-self: center;
      padding: 16px; }

.editron-container__description {
  padding: 16px; }

.editron-container__errors {
  padding: 8px 16px;
  font-size: 0.8em;
  color: #d50000; }
  .editron-container__errors .is-warning {
    color: #F39C12; }
  .editron-container__errors .editron-error {
    display: flex;
    align-items: center; }
    .editron-container__errors .editron-error span {
      flex-grow: 1; }
    .editron-container__errors .editron-error a.mmf-icon {
      flex-shrink: 1;
      flex-grow: 0;
      padding: 0;
      padding-left: 8px;
      text-decoration: none;
      font-size: 2em;
      line-height: 1em;
      width: auto;
      height: auto; }

.editron-container.withAddButton .mmf-card {
  margin-bottom: 0; }

.editron-container__actions {
  display: flex; }

.editron-container__child {
  position: relative; }

.editron-container__controls--child {
  position: absolute;
  top: 0;
  right: -32px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 64px; }

.editron-container__header {
  color: inherit;
  line-height: 1em;
  text-transform: uppercase;
  padding-top: 0.1em;
  opacity: 0.87; }
  .editron-container__header .editron-container__title h2 {
    font-family: "Roboto";
    font-weight: 400;
    text-transform: inherit;
    font-size: inherit;
    line-height: inherit; }
  .editron-container__header .editron-container__title i.mmf-icon:hover {
    color: inherit;
    cursor: default; }

.editron-container {
  color: inherit; }

.editron-container__controls--child i.mmf-icon {
  color: rgba(255, 255, 255, 0.54);
  font-size: 18px;
  line-height: 1.5em;
  width: 24px;
  height: 24px; }
  .editron-container__controls--child i.mmf-icon:hover {
    color: rgba(255, 255, 255, 0.87); }

.ui-overlay {
  z-index: 1002;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 48px 8px;
  background: rgba(30, 30, 30, 0.5); }

.ui-overlay {
  display: flex;
  flex-direction: row;
  justify-content: center; }

.ui-overlay__card {
  z-index: 20;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  width: 100%;
  margin: 48px 16px 0px 0px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 240;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 30px 25px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  margin: 0;
  box-sizing: border-box;
  width: auto;
  align-self: center;
  max-width: 960px;
  min-height: 144px;
  max-height: 96vh; }
  .ui-overlay__card--fullscreen {
    width: 96vw;
    height: 96vh; }

.ui-overlay h1 {
  font-family: "Roboto";
  font-weight: 400;
  line-height: 1em;
  margin: 0; }

.ui-overlay .ui-card__header {
  padding: 24px; }

.ui-overlay .ui-card__content {
  position: relative;
  padding: 24px;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden; }

.ui-overlay .ui-card__footer {
  padding: 8px;
  text-align: right; }

.overlay__item--json {
  min-width: 50vw; }

.editron-form-tiles {
  max-width: 768px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center; }

.editron-form-box {
  box-sizing: border-box;
  cursor: pointer; }
  .editron-form-box:hover .editron-form-box__content {
    background-color: rgba(0, 200, 83, 0.38);
    z-index: 40;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }

.editron-form-box__content {
  border-radius: 2px;
  z-index: 20;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  box-sizing: border-box;
  margin: 8px;
  width: 176px;
  height: 176px;
  color: rgba(0, 0, 0, 0.87);
  background-color: #ECEFF1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background-color 0.1s linear; }

.editron-form-box__title {
  font-family: "Roboto";
  font-weight: 700;
  text-align: center;
  padding: 8px; }
  .editron-form-box__title .mmf-icon {
    width: auto;
    height: auto;
    line-height: inherit;
    font-size: 0.8rem;
    padding-right: 8px; }

.editron-form-box__description {
  font-family: "Roboto";
  font-weight: 400;
  font-size: 0.8em;
  line-height: 1.2em;
  text-align: center;
  margin: 8px;
  overflow-x: hidden;
  overflow-y: auto; }

/**
 * Default form styles, controlling label position by classnames. The Markup should look like
 *
 *  <my-form extends with-moving-label>
 *      <label>Moving Title</label>
 *      <input-type>
 *      ...
 * @param {string} input-type   - associated input selector
 */
.mmf-card {
  color: #000;
  margin-bottom: 48px;
  background-color: #ECEFF1; }
  .mmf-card .editron-container__header {
    opacity: 0.87;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px; }
    .mmf-card .editron-container__header h2 {
      color: #000; }
  .mmf-card .editron-container__title .mmf-icon:hover {
    color: #000;
    cursor: default; }

.mmf-card > .editron-container__header .mmf-icon {
  color: #000; }
  .mmf-card > .editron-container__header .mmf-icon:hover {
    color: black; }

.mmf-card .editron-container .editron-container__header {
  padding: 0; }
  .mmf-card .editron-container .editron-container__header h2 {
    font-family: "Roboto";
    font-weight: 400;
    text-transform: uppercase;
    padding: 16px;
    font-size: 0.8em;
    box-sizing: border-box;
    min-height: 48px;
    opacity: 0.54; }
  .mmf-card .editron-container .editron-container__header .mmf-icon {
    color: #000; }
    .mmf-card .editron-container .editron-container__header .mmf-icon:hover {
      color: black; }

.mmf-card .editron-container__button--add {
  position: relative; }
  .mmf-card .editron-container__button--add label {
    color: #000;
    opacity: 0.54; }
  .mmf-card .editron-container__button--add .mmf-icon {
    color: rgba(0, 0, 0, 0.54);
    text-shadow: none; }
  .mmf-card .editron-container__button--add:hover .mmf-icon {
    color: rgba(0, 0, 0, 0.87);
    text-shadow: none; }

.mmf-card .editron-container__children .editron-container__children > .editron-container__child .editron-container__header {
  box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.19), inset 0 6px 6px rgba(0, 0, 0, 0.23); }

.editron-container--oneof > .editron-value {
  margin-bottom: 48px; }

.mmf-card .editron-container--oneof > .editron-value {
  margin-bottom: 0; }

.ui-row > .editron-container__children {
  display: flex;
  flex-direction: row; }
  .ui-row > .editron-container__children > div {
    flex-grow: 1;
    min-width: 96px; }