src/moblab-ui/src/app/configuration/configuration.component.scss

.wrapper {
  display: block;
  width: 100%;
  padding: 1rem;

  .container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border: 1px solid #ebebeb;
    border-radius: 0.25rem;
    padding: 1rem;
    position: relative;

    &.outside {
      width: 60%;
      min-width: 50vw;
    }

    &.inside {
      width: 100%;
    }

    .title {
      font-size: 1.25rem;
      font-weight: 600;
    }

    .loading-overlay {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: #fafafa;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0.8;
      z-index: 1;
    }

    .row {
      width: 100%;
      margin: 0.75rem 0;
      display: flex;
      flex-direction: row;
      align-items: center;

      mat-form-field {
        width: 100%;
      }
    }
  }

  .expansion-panel {
    width: 60%;
    min-width: 50vw;
    border: 1px solid #ebebeb;
    border-radius: 0.25rem;

    mat-expansion-panel {
      box-shadow: none;
    }
  }

  .grey {
    color: grey;
  }
}

::ng-deep .mat-form-field-disabled .mat-mdc-form-field-subscript-wrapper {
  display: none;
}

a {
  color: -webkit-link;
  text-decoration: underline;
}

.input-box-container {
  mat-form-field {
    width: 100%;
  }

  &.without-border {
    > .mat-mdc-form-field {
      border: none;
    }

    > .mat-mdc-form-field.mat-form-field-invalid {
      border: none;
    }
  }

  .mat-mdc-form-field {
    height: 100%;
    padding: 0.25rem 0;
  }
}

::ng-deep .mat-expansion-indicator {
  &:after {
    border-color: rgba(0, 0, 0, 0.8);
  }
}