// .PopupContainer {
//   // padding: 20px;
// }


.buttonLayoutCancel {
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  margin-left: auto;
  float: right;
}


.HeaderInfo {
  font-size: 16px;
  margin-left: -5px;
}


.PopupContent {
  padding: 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: ;
  height: 100%; // 100% view height
  grid-template-rows: auto auto; // row relationships
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); // column relationship
  grid-column-gap: 15px;
  grid-template-areas:
    'field1 field2'
    'buttons buttons'
}

.buttons {
  grid-area: buttons;
  padding: 0;
  margin: 0;
  overflow: hidden;
  display: grid;
  height: 100%;
  grid-template-rows: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-column-gap: 30px;
  grid-template-areas:
    'empty1 btnsave btncancel empty2'
}


.btnSave {
  margin-top: 10px;
  grid-area: btnsave;
}

.btnCancel {
  margin-top: 10px;
  grid-area: btncancel;
}

.field1 {
  grid-area: field1;
}

.field2 {
  grid-area: field2;
}
