.departmentDetailsContent{
// z-index: 10;
  // position: relative; //otherwise z-index is not working
  padding: 0 0 0 0; // no extra padding -> padding is calculated in the child comp
  margin: 0; // see above
  overflow: hidden; // overflow hidden => all "to big" child components are hidden
  display: grid; // we define a grid
  width: 100%; // 100 % view width (hardware screen)
  height: 100%; // 100% view height
  grid-column-gap: 8px;
  grid-template-columns: repeat(2, minmax(1px, 1fr)); // column relationship
  grid-template-rows: repeat(5, 1fr); // auto auto auto auto auto auto auto auto auto; //  row relationships
  grid-template-areas:
    "input-departmentName input-cost-centre"
    "input-departmentType input-headofDepartmentId"
    "input-executiveDirectorId input-managingDirectorId"
    "input-departmentNameFolder input-adGroupDepartmentName"
    "input-clientId input-isVirtual"
  ;
}


.input-departmentName{
    grid-area: input-departmentName;
}
.input-cost-centre{
    grid-area: input-cost-centre;
}
.input-departmentType{
    grid-area: input-departmentType;
}
.input-headofDepartmentId{
    grid-area: input-headofDepartmentId;
}
.input-executiveDirectorId{
    grid-area: input-executiveDirectorId;
}
.input-managingDirectorId{
    grid-area: input-managingDirectorId;
}
.input-departmentNameFolder{
    grid-area: input-departmentNameFolder;
}
.input-adGroupDepartmentName{
    grid-area: input-adGroupDepartmentName;
}
.input-clientId{
    grid-area: input-clientId;
}
.input-isVirtual{
    grid-area: input-isVirtual;
}
