@import 'hr-core-consts';


.btn-question-picture {
  width: 160px;
  height: 50px;
  background-color: white;
  color: $hrColor-DarkBlue;
}

.webcam-grid {
  height: 100%;
  width: 100%;
  display: grid;
  position: relative;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: 0px auto minmax(0, 1fr);
  grid-template-areas:
    ". webcam-container snapshot ."
    ". arrow-take-picture btn-delete .";
  grid-gap: 15px;
}



.no-photo-icon {
  // font-size: 250px;
  opacity: 20%;
}

.snapshot {
  margin-left: 35px;
  grid-area: snapshot;
}

.webcam_button_icons{
  padding-right: 5px;
}


.webcam-container {
  grid-area: webcam-container;
}

.btn-delete {
  margin-left: 35px;
  grid-area: btn-delete;
  width: 160px;
  height: 50px;
  background-color: white;
  color: $hrColor-DarkBlue;
}

.snapshot,
.webcam-container {
  padding: 2px;
  // margin-left: 4px;
}

.arrow-take-picture {
  grid-area: arrow-take-picture;
  width: 160px;
  height: 50px;
  background-color: white;
  color: $hrColor-DarkBlue;
}

.DeleteButton {
  // color: $hrColor-Green;
  // color: $hrColor-DarkBlue;
  // position: absolute;
  // top: 0px;
  // left: 100%;
  // transform: translate(-40px);
  position: absolute;
  top: 12px;
  right: 20px;
}

.DeleteIcon {
  font-size: 40px;
  color: white;
}
