$popupHeaderHeight: 59px;

.vlan-wrapper-config * {
  font-family: OpenSans-Regular, sans-serif;
}

.body-content-jsp {
  margin-top: 35px;
  margin-left: 201px;
  margin-right: 0px;
  background-color: white;
}

:host {
  height: 100%;
}
.form-wrapper{
  min-width: 75%;
  overflow: auto;
}
button {
  border-radius: 2px;
  font-size: 14px;
  line-height: 28px;
  height: 30px;
  &.blue {
    border: #0091c8 1px solid;
    background-color: #009fdb;
    color: white;
    &:hover {
      background-color: #1ec2ff;
      border-color: #0091c8;
    }
    &:active {
      background-color: #0091c7;
      border-color: #006186;
    }
    &[disabled] {
      background-color: rgba(5, 104, 174, 0.3);
      border-color: rgba(4, 113, 168, 0.3);
    }
  }
  &.grey {
    color: #009FDB;
    background-color: #ffffff;
    border: 1px solid #009FDB;
    &:hover {
      background-color: #f8f8f8;
      border-color: #009fdb;
    }
    &:active {
      background-color: #d8d8d8;
      border-color: #5a5a5a;
    }
    &[disabled] {
      background-color: #f8f8f8;
      border-color: #d8d8d8;
      color: #cdcdcd;
    }
  }
  &.white {
    border: #009fdb 1px solid;
    background-color: white;
    color: #009fdb;
  }
}

.vlan-wrapper-config {
  /*todo: remove. this a temporary fix for the sub-interface popup not showing as a page beside the sidebar. currently showing it in full screen.*/
  /*it is necessary inside the iframe (and not just in the angularjs - old app) angular app because in Firefox the iframe content isn't effected by the iframe size */
  width: 100vw;
  height: 100vh;
  position: fixed;
  /********************/
  .head {
    line-height: $popupHeaderHeight;
    height: $popupHeaderHeight;
    display: flex;
    background-color: #F8F8F8;
    border-bottom: 1px solid #D8D8D8;
    .title {
      font-size: 18px;
      margin-left: 56px;
      color: #5A5A5A;
    }
    .btn-wrapper {
      flex: 1;
      text-align: right;
      margin-right: 15px;
      button {
        width: 120px;
        &.delete-btn {
          margin-left: 13px;
        }
      }
    }
  }
  .content-wrapper {
    display: flex;
    .form {
      overflow-y: auto;
    }
    height: calc(100% - #{$popupHeaderHeight});
    .form {
      margin-top: 48px;

    }
    .content {
      .form-wrapper {

        margin: 0 auto;
      }
    }

  }

  span.error {
    color: #cf2a2a;
  }
  .content-wrapper .content .form-wrapper .instance-field {
    .ng-invalid-pattern {
      border-color: #cf2a2a;
      color: #cf2a2a;
    }
    margin-bottom: 25px;
    label {
      color: #191919;
      font-size: 13px;
    }
    input,
    select {
      border-color: #D2D2D2;
    }
    &.lcpRegionText,
    &.productFamily {
      display: none;
    }
  }

}

.sidebar-right {
  min-width: 25%;
  background-color: #F8F8F8;
  overflow-y: auto;
  .headline {
    font-family: OpenSans-Semibold;
    font-size: 12px;
     color: #009FDB;
     padding-bottom: 6px;
     padding-top: 20px
  }
  .seperator{
    background: #D2D2D2;
    height: 1px;
    margin-bottom: 10px;
  }
}

.left-side{
  min-width: 75%;
  overflow:auto;

}

.sidebar-right service-metadata .metadata-content {
  padding-bottom: 20px;
}