html,
body {
  display: flex;
  flex-direction: column;

  margin: 0;
  padding: 0;

  background-color: #88e8fa;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 2vh;
  line-height: 1.5;
  overflow: hidden;
}

/**/
/**/
/**/
/**/
/**/
/* CONTAINERS */
#zyanthos_header_container {
  height: 15vh;
}
#zyanthos_content_container {
  height: 82.5vh;
}
#zyanthos_copyright_container {
  height: 2.5vh;
}
#zyanthos_error_container {
  display: none;
}

/**/
/**/
/**/
/**/
/**/
/* HEADER */
.zy01_header_background {
  background-image: linear-gradient(#b9f8f3 10.5vh, #88e8fa 11vh);
  display: flex;
  justify-content: left;
  align-items: center;
}
.zy01_logo_main {
  height: 15vh;
}

/**/
/**/
/**/
/**/
/**/
/* CONTENT*/
.zy01_content_container {
  display: flex;
  justify-content: space-between;

  margin: auto;
  margin-left: 1.5%;
  margin-right: 1.5%;
}
.zy01_content_body {
  width: 70vw;
  height: 82.5vh;
  margin-right: 1%;
  margin-right: 0.5%;
}
.zy01_content_menu {
  width: 30vw;
  height: 82.5vh;
  margin-right: 1%;
  margin-left: 0.5%;
}

.zy01_content_outline {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  border-radius: 10px 10px 0 0;
  border: 5px solid #668cff;
  background-color: #88e8fa;
  height: 100%;
}

.zy01_content_outline_title_box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;

  height: 5vh;
  background-color: #668cff;
}
.zy01_content_outline_title_left {
  flex-grow: 1;
  height: 5vh;
  font-size: clamp(1.2rem, 1.5rem, 75px);
  padding-left: clamp(2%, 5%, 10px);
}
.zy01_content_outline_title_right {
  display: flex;
  justify-content: center;
  align-self: center;
  margin: auto;

  height: 5vh;
  margin-right: 2%;
}

.zy01_content_outline_body_box {
  display: block;
  justify-content: center;
  overflow: auto;
  width: 100%;
  height: 100%;
}

/**/
/**/
/**/
/**/
/**/
/* COPYRIGHT */
.zy01_copyright {
  display: flex;
  justify-content: left;
  align-items: center;

  height: 2.5vh;
  margin: 0px 1.5% 0px;
  font-size: 60%;
  color: gray;
}

/**/
/**/
/**/
/**/
/**/
/* ZOOM FUNCTION */
/* Met deze functie kan het worksheet worden in en uitgezoomed */
.zyanthos_content_title_zoom_box {
  display: flex;
  justify-content: center;
  align-self: center;
  margin: auto;

  margin-right: 2%;
  width: clamp(5vw, 300px, 250px);
}
.zyanthos_workpage_zoom_btn {
  width: clamp(2.5vw, 1vw, 1vw);
  height: clamp(2.5vw, 1vw, 1vw);
  font-size: clamp(1vw, 1vw, 1vw);
  border-radius: 5px;
  border: 1px solid black;
  background-color: #6cf795;
}
.zyanthos_workpage_zoom_txt {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 20%;
  font-size: clamp(1vw, 1vw, 1vw);
  margin-left: clamp(5%, 15%, 100px);
  margin-right: clamp(5%, 15%, 100px);
}