:root {
  --product_height: calc(100vh / 12.5);
}

#admin-container {
  width: 95vw;
  height: calc(90vh - var(--nav-bar_height));

  position: absolute;
  left: 50%;
  top: calc(50% + var(--nav-bar_height) / 2);
  transform: translate(-50%, -50%);
}

#admin-container > div, #admin-container > form {
  display: inline-block;
  width: 40%;
  height: 100%;

  border: 1px solid var(--secColor);
  border-radius: calc((0.5vh + 0.5vw) / 2);
}

#admin-container > div > .header, #admin-container > form > .header {
  display: inline-block;
  text-align: center;


  position: relative;
}

span.header {
  width: 90%;
  height: 7.5%;

  font-size: calc((90vh - var(--nav-bar_height)) * 0.075 / 2);
  line-height: calc((90vh - var(--nav-bar_height)) * 0.075);
  color: #333;

  border-bottom: 1px solid var(--secColor);

  left: 50%;
  transform: translate(-50%, 0);
}

#product-beheer {
  margin-left: 5%;
  float: left;
}

.product-container > .product {
  display: inline-block;
  width: 80%;
  height: var(--product_height);
  margin: 0.75vh;

  border: 1px solid var(--secColor);
  border-radius: calc((0.5vh + 0.5vw) / 2);

  transition: all 0.2s;

  cursor: pointer;

  transform: scale(1.0);
}

.product-container > .product:first-of-type {
	margin-top: 2vh;
}

.product-container > .product:hover {
	transform: scale(1.015);
}

.product > img, .product > #img {
  display: inline-block;
  max-width: calc(var(--product_height) * 0.9);
  max-height: calc(var(--product_height) * 0.9);
  margin-left: 0.5%;
  margin-right: 1%;

  position: relative;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);

  float: left;
}

.product > #title {
  display: inline-block;
  width: calc(100% - var(--product_height) - 20%);
  height: calc(var(--product_height) / 4);

  overflow: hidden;

  text-align: left;
  font-size: calc(var(--product_height) / 5);
  line-height: calc(var(--product_height) / 4);
  color: #111;

  float: left;
}

.product > #price {
  display: inline-block;
  width: 17.5%;
  height: calc(var(--product_height) / 4);
  margin-right: 1%;

  overflow: hidden;

  text-align: right;
  font-size: calc(var(--product_height) / 5);
  line-height: calc(var(--product_height) / 4);
  color: #111;

	position: relative;

  float: left;
}

.product > #descr {
  display: inline-block;
  width: calc(100% - var(--product_height) - 1.5%);
  max-height: calc(var(--product_height) - var(--product_height) / 3);

  text-align: left;
  font-size: calc((var(--product_height) - var(--product_height) / 3) / 4.5);
  line-height: calc((var(--product_height) - var(--product_height) / 3) / 4);
  color: #333;
  word-break: break-all;
  line-break: normal;

  overflow: hidden;

  float: left;
}

.container {
  width: 100%;
  height: 82.5%;

  position: relative;
  left: 50%;
  transform: translate(-50%, 0);

  overflow-x: hidden;
  overflow-y: auto;

  text-align: center;
}

.product > input {
  display: block;
  border: none;
  resize: none;

  padding: none;
  margin: none;

  position: relative;

  border: 1px solid white;
  border-radius: calc((0.5vh + 0.5vw) / 2);
}
.product > input:hover {
  border-color: var(--secColor);
}
.product > input#img {
  width: calc(var(--product_height));
  height: calc(var(--product_height));
}
.product > #buttons {
  height: var(--product_height);

  position: absolute;
  right: 0;
  top: 0;
}
.product > #buttons > button {
  display: block;
  width: calc(var(--product_height) * 0.45);
  height: calc(var(--product_height) * 0.45);

  font-size: calc(var(--product_height) * 0.45 / 2);
  line-height: calc(var(--product_height) * 0.45);

  cursor: pointer;

  background: none;

  position: absolute;

  border: calc((0.15vw + 0.15vh) / 2) solid;
  border-left: none;
  border-radius: 0 calc(var(--product_height) * 0.045) calc(var(--product_height) * 0.045) 0;
}
.product > #buttons > #confirm {
  border-color: #27ae60;
  border-bottom-width: calc((0.25vw + 0.25vh) / 4);

  top: 0;

  color: #27ae60;
}
.product > #buttons > #cancel {
  border-color: var(--primColor);
  border-top-width: calc((0.25vw + 0.25vh) / 4);

  bottom: 0;

  color: var(--primColor);
}

.product > input#descr, .product > input#tags {
  display: block;
  width: calc(100% - var(--product_height) - 1.5%);
  height: calc((var(--product_height) - var(--product_height) / 3) / 2);
}

.admin-option.header {
  display: inline-block;
  width: 30%;
  height: 7%;
  margin-left: 2.5%;

  font-size: calc(40vw * 0.065 / 2);
  line-height: calc((90vh - var(--nav-bar_height)) * 0.07);
  color: white;

  cursor: pointer;

  float: left;

  border-radius: var(--border-radius);
  box-shadow: 0 0.75vh var(--secColor);
  background: var(--primColor);
}

.product.selected {
  transform: scale(1.015);
  box-shadow: 0 0 0.2vh 0.1vh var(--primColor);
  opacity: 0.8;
}

.admin-option.header:active {
  box-shadow: 0 0vh var(--secColor);
  bottom: -0.75vh;
}

#beheer2 {
  margin-right: 5%;
  float: right;
}

.msg-container {

}

.msg-container > .message {
  display: inline-block;
  width: 80%;
  min-height: calc(var(--product_height) * 2);
  margin: 0.75vh;
  border: 1px solid var(--secColor);
  border-radius: calc((0.5vh + 0.5vw) / 2);
  transition: all 0.2s;
  cursor: pointer;
  transform: scale(1.0);
}

.msg-container > .message:first-of-type {
	margin-top: 2vh;
}

.msg-container > .message:hover {
	transform: scale(1.015);
}

.message > img, .message > #img {
  display: inline-block;
  max-width: calc(var(--product_height) * 0.9);
  max-height: calc(var(--product_height) * 0.9);
  margin-left: 0.5%;
  margin-right: 1%;

  position: relative;

  float: left;
}

.message > #naam {
  display: inline-block;
  width: calc(100% - var(--product_height) - 60%);
  height: calc(var(--product_height) / 4);

  overflow: hidden;

  text-align: left;
  font-size: calc(var(--product_height) / 5);
  line-height: calc(var(--product_height) / 4);
  color: #111;

  float: left;
}

.message > #email {
  display: inline-block;
  width: 40%;
  height: calc(var(--product_height) / 4);

  overflow: hidden;

  text-align: left;
  font-size: calc(var(--product_height) / 5);
  line-height: calc(var(--product_height) / 4);
  color: #111;

  float: left;
}

.message > #datum {
  display: inline-block;
  width: 17.5%;
  height: calc(var(--product_height) / 4);
  margin-right: 1%;

  overflow: hidden;

  text-align: right;
  font-size: calc(var(--product_height) / 5);
  line-height: calc(var(--product_height) / 4);
  color: #111;

  position: relative;

  float: left;
}

.message > #bericht {
  display: inline-block;
  margin-top: 1vh;
  padding-top: 0.5vh;
  width: calc(100% - var(--product_height) - 1.5%);
  min-height: calc(var(--product_height) * 2 - var(--product_height) / 3);

  text-align: left;
  font-size: calc((var(--product_height) - var(--product_height) / 3) / 3.5);
  line-height: calc((var(--product_height) - var(--product_height) / 3) / 3);
  color: #333;
  word-break: break-all;
  line-break: normal;

  border-top: 1px solid var(--primColor);

  overflow: hidden;

  margin-bottom: 0.75vh;

  float: left;
}