ConceptCreator/src/app/app.component.css

.full-height-container {
  height: 99vh;
  background-color: #2b2d30;
  width: 40px;

  border-right: #b9b9b9;
  border-right-style: solid;
  border-right-width: 1px;
}

.small-icon-button {
  width: 28px !important;
  height: 28px !important;
  padding: 0px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  margin-bottom: 10px;

  & > *[role=img] {
    width: 20px;
    height: 20px;
    font-size: 20px;

    svg {
      width: 20px;
      height: 20px;
    }
  }

  .mat-mdc-button-touch-target {
    width: 24px !important;
    height: 24px !important;
  }
}

.small-icon-button mat-icon {
  color: whitesmoke;
}

.selected {
  background-color: #4e5157;
}

.example-container {
  width: 100%;
  height: 100vh;
}

.example-sidenav-content {
  display: flex;
  height: 100%;
}

.example-sidenav {

}

.container {
  padding: 0;
  display: flex;
}

/* Adjust the vertical alignment of the icon within the button */
.mat-button-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: none;
  border-radius: 5px;
  padding-right: 12px;
}

.sidenav-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.close-sidenav-btn {
  margin-top: 5px;
  display: none;
}

.sidenav-header:hover + .close-sidenav-btn {
  display: block;
  color: red;
}

app-editor {
  width: 100%;
}

.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.example-full-width {
  width: 100%;
}