.inline-schema-dialog .md-tab {
  text-transform: none;
}

apim-assembler {

  apic-mapper-schema button.material-icons {
    font-size: 16px;
    min-height: 24px;
    line-height: 24px;
    vertical-align: middle;
  }

  apic-mapper-schema .object .title > button.material-icons,
  apic-mapper-schema .array .title > button.material-icons,
  apic-mapper-schema .primitive > button.material-icons {
    display: none;
  }

  apic-mapper-schema .object .title:hover > button.material-icons,
  apic-mapper-schema .array .title:hover > button.material-icons,
  apic-mapper-schema .primitive:hover > button.material-icons {
    display: inline;
  }

  /* mapper-schema */
  .json-schema-view,
  apic-mapper-schema {
    font-family: inherit;
    font-size: 0;
    display: table-cell;
    width: 100%;
  }

  apic-mapper-schema.array-container,
  apic-mapper-schema.object-container {
    display: block;
  }

  apic-mapper-schema,
  .json-schema-view {

    .description,
    .enums,
    .format,
    .range,
    .uniqueItems {
      display: none;
    }

    > * {
      font-size: 14px;
      line-height: 24px;
    }

    .toggle-handle:after {
      content: "-";
      font-size: 14px;
      margin: 0px 1px 0px 2px;
    }

    &.collapsed .toggle-handle:after {
      content: "+";
      font-size: 14px;
      margin: 0px;
    }

    .toggle-handle,
    .toggle-handle:hover {
      text-decoration: none;
      color: #333;
      padding-right: 2px;
    }

    .description {
      color: gray;
      font-style: italic;
    }

    .title {
      font-weight: normal;
      cursor: inherit;
      display: inline-table;
    }

    .title,
    .title:hover {
      text-decoration: none;
      color: #333;
    }

    .property {
      font-size: 0;
      display: block;
      width: 100%;

      > * {
        font-size: 14px;
        padding: 0;
      }
    }

    .name {
      color: inherit;
      display: table-cell;
      vertical-align: top;
      white-space: nowrap;
      padding-right: 5px;
    }

    .primitive .name {
      display: inline;
    }

    .primitive {
      line-height: 25px;
    }

    .primitive:before {
      content: ' ';
      margin-right: 17px;
    }

    .unnamed.name {
      font-style: italic;
    }

    .primitive > .title > .name {
      padding-left: 15px;
    }

    .bracket {
      display: table-cell;
    }

    .extender {
      margin-right: 5px;
    }

    .addProperty,
    .type,
    .extender,
    .xOf,
    .range {
      color: grey;
      vertical-align: top;
    }

    .required {
      color: #F00;
      .inner {
        padding-left: 18px;
      }
    }

    .inner {
      padding-left: 10px;
    }
    
    .discriminator {
      margin-left: 17px;
      md-select {
        margin: 0;
      }
    }

    &.collapsed.description,
    &.collapsed.property {
      display: none;
    }

    .brace {
      vertical-align: top;
    }

    &.collapsed.closing.brace {
      display: inline-block;
    }

    &.collapsed.toggler {
      transform: rotate(-90deg);
    }
  }
  /* end mapper-schema */

  .mapper-inputs,
  .mapper-outputs {
    flex: 1;
    max-width: calc(50% - 100px);
  }

  .mapper-inputs-container,
  .mapper-outputs-container {
    height: calc(100% - 40px);
    overflow: auto;
    padding: 0px 5px;
  }

  .mapper-inputs .discriminator {
    display: none;
  }

  .mapperEditIcon {
    margin: 6px 12px 6px 6px;
    color: white !important;
    float: right;
  }

  .mapObject {
    display: flex;
    margin: 10px 0px;

    > .halfWidth {
      flex: 0.5;
    }

    > .thirdWidth {
      flex: 0.33;
    }
  }

  .schema-block {
    padding: 5px 0px;
  }

  .mapper-inputs .mapper-header,
  .mapper-outputs .mapper-header {
    background-color: #B4B4B4;
  }

  .mapper-transformation {
    overflow: hidden;
  }
  
  .mapper-transformation .mapper-header {
    background-color: #A0A0A0;
  }

  .mapper-header {
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: white;
    font-size: 1.5em;
  }

  .mapper-container {
    display: flex;
    margin: 0 auto;
    position: absolute;
    width: 100%;
    height: calc(100% - 60px);
  }

  .mapper-canvas {
    width: 200px;
    height: calc(100vh - 40px);
    background-color: #FAFAFA;

    .mapper-line,
    .collapsed-mapper-line {
      stroke-width: 2;
      fill: none;
      pointer-events: none;
    }

    .mapper-line {
      stroke: #1BB000;
    }

    .collapsed-mapper-line {
      stroke: #DDD;
    }

    .mapper-group-selected .function-node,
    .mapper-group:hover .function-node {
      fill: black;
    }

    .mapper-function-icon {
      cursor: pointer;
    }

    .click-zone-input,
    .click-zone-output {
      opacity: 0;
      cursor: pointer;
    }

    circle {
      &.collapsed-input-node,
      &.collapsed-output-node {
        stroke: #DDD;
        fill: #DDD;
        stroke-width: 2;
      }

      &.input-node,
      &.output-node,
      &.function-node {
        stroke: #999;
        fill: #DDD;
        stroke-width: 2;
        cursor: pointer;
      }

      &.output-node.mapped {
        stroke: #1BB000;
        fill: #66DD06;
      }

      &.input-node:hover,
      &.output-node:hover {
        fill: #999;
      }

      &.output-node.mapped:hover {
        fill: #1BB000;
      }
    }
  }

  .mapper-unmappable div,
  .mapper-mappable div,
  .mapper-untargetable div,
  .mapper-target div {
    display: inline-block;
    vertical-align: middle;
  }

  .mapper-mappable .mapper-icon {
    float: right;
  }

  .mapper-type-array .mapper-icon {
    background-image: url('../images/types/array.png');
    width: 20px;
    height: 20px;
  }

  .mapper-type-array-start .mapper-icon {
    background-image: url('../images/types/array-start.png');
    width: 10px;
    height: 16px;
    margin: 2px;
  }

  .mapper-type-array-end .mapper-icon {
    background-image: url('../images/types/array-end.png');
    width: 10px;
    height: 16px;
    margin: 2px;
  }

  .mapper-type-at .mapper-icon {
    background-image: url('../images/types/at.png');
    width: 20px;
    height: 20px;
  }

  .mapper-type-binary .mapper-icon {
    background-image: url('../images/types/binary.png');
    width: 20px;
    height: 20px;
  }

  .mapper-type-boolean .mapper-icon {
    background-image: url('../images/types/boolean.png');
    width: 20px;
    height: 20px;
  }

  .mapper-type-object .mapper-icon {
    background-image: url('../images/types/object.png');
    width: 16px;
    height: 16px;
    margin: 2px;
  }

  .mapper-type-object-start .mapper-icon {
    background-image: url('../images/types/object-start.png');
    width: 10px;
    height: 16px;
    margin: 2px;
  }

  .mapper-type-object-end .mapper-icon {
    background-image: url('../images/types/object-end.png');
    width: 10px;
    height: 16px;
    margin: 2px;
  }

  .mapper-type-complex .mapper-icon {
    background-image: url('../images/types/complex.png');
    width: 20px;
    height: 20px;
  }

  .mapper-type-date .mapper-icon {
    background-image: url('../images/types/date.png');
    width: 20px;
    height: 20px;
  }

  .mapper-type-integer .mapper-icon {
    background-image: url('../images/types/integer.png');
    width: 20px;
    height: 20px;
  }

  .mapper-type-number .mapper-icon {
    background-image: url('../images/types/number.png');
    width: 20px;
    height: 20px;
  }

  .mapper-type-string .mapper-icon {
    background-image: url('../images/types/string.png');
    width: 20px;
    height: 20px;
  }

  .mapper-type-null .mapper-icon {
    background-image: url('../images/types/unknown.png');
    width: 20px;
    height: 20px;
  }

  .assemblyInfo .map .policyPartial {
    padding: 0;
  }
}