* {
  box-sizing: inherit;
}
html {
  height: 100%;
  box-sizing: border-box;
  background: #cecece;
}
body {
  min-height: 99%;
  height: 99%;
  font: 1.2em roboto;
  background: #ecf0f1;
  display: grid;
  grid-template-rows: 1fr;
}
dialog::backdrop {
	backdrop-filter: blur(3px) brightness(60%) sepia(10%) !important;
}
nav {
	 min-height: 20px;
	 grid-column: 1/4;
	 grid-row: 1;
}
main {
	min-height: 100%;
	grid-column: 2;
	grid-row: 2;
}
textarea {
	min-width: 100%;
	min-height: 100%;
}
footer {
  min-height: 20px;
  background: linear-gradient(#ecf0f1, #bdc3c7);
  color: black;
  grid-column: 1/4;
	grid-row: 3;
}
/* SEE: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav ul li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #ecf0f1;
}
table td, table th {
    text-align: left;
    font-size: 90%;
  }
.wrapper {
  grid-row: 1;
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr 8fr 1fr;
  grid-template-rows: 1fr 8fr 1fr;
}
.menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  background: linear-gradient(#bdc3c7, #ecf0f1);
  border-color: #bdc3c7 transparent #ecf0f1 transparent;
  color: black;
  padding: 5px;
}
.navli_right {
  float: right;
  grid-column: 2;
  grid-row: 1;
}
.navli_left {
  float: left;
  grid-column: 1;
  grid-row: 1;
}
.dlg_on {
	min-height: 50vh;
	min-width: 70%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 8fr 1fr;
}
.dlg_off {
	display: none;
}
.dlg_header {
	min-height: 80px;
}
/* Variable font size for dialogs */
.dlg_div {
	min-height: 80%;
  max-height: 90%;
  container-type: inline-size;
}
.dlg_txt {
  font-size: 0.6em;
}
.dlg_ref {
  white-space: pre-wrap;
  font-size: 0.4em;
}
.dlg_btn {
	min-height: 5px;
}
@container (width < 900px) {
  .dlg_txt {
    font-size: 0.5em;
  }
  .dlg_ref {
    font-size: 0.4em;
  }
}
@container (height < 900px) {
  .dlg_txt {
    font-size: 0.5em;
  }
  .dlg_ref {
    font-size: 0.4em;
  }
}
.link_target_chembl {
  text-decoration: none;
  color: #3e857b;
}
#dwnld_btn {
  margin: 0 0 0 1vw;
  padding: 0.5vw;
  background: #bdd1dbff;
}
#dwnld_btn:hover {
  margin: 0 0 0 1vw;
  padding: 0.5vw;
  background: #879ba4;
}
#main_container{
	height: 100%;
	width: 100%;
	min-height: 100%;
	min-width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 0.25fr 10fr 0.25fr 1fr 1fr;
}
#main_container_result{
  height: 100%;
  width: 100%;
  min-height: 100%;
  min-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 3fr 1fr 1fr 1 fr;
}
#container_appicability {
  grid-row: 2;
}
#applicability {
  position: relative;
  top: 30%;
}
#container_svg {
  grid-row: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
#spacer_rslt_1 {
  grid-row: 3;
  min-height: 5px;
}
#container_table {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 4;
  max-height: 80%;
}
#container_download {
  grid-row: 5;
}
#spacer_rslt_btm {
  grid-row: 6;
  min-height: 15px;
}
#spacer_1 {
  grid-row: 1;
  min-height: 5px;
}
#mi_label_container {
  grid-row: 2;
  min-height: 5vh;
}
#spacer_2 {
  grid-row: 3;
  min-height: 12.5px;
}
#mi_container {
	min-height: 100%;
	min-width: 100%;
  grid-row: 4;
}
#spacer_3 {
  grid-row: 5;
  min-height: 2.5px;
}
#mi_btn_container {
  grid-row: 6;
  min-height: 12.5px;
}
#spacer_3 {
  grid-row: 7;
  min-height: 5px;
}
#footer_txt {
	text-align: center;
  font-size: 90%;
}
#container_inner {
  grid-row: 2;
  min-height: 12.5px;
}