#inputdiv {
  /*display: none;*/
}

#variant_input_boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
  align-content: center;
  justify-content: center;
}

#input_submit {
  cursor: pointer;
  width: 90px;
  height: 90px;
  padding: 9px;
  border: white 2px solid;
  border-radius: 10px;
  background-color: #4a82b9;
  color: white;
  font-family: "Sans";
  font-weight: bold;
  text-transform: uppercase;
  margin-left: 5px;
  transition: .2s ease background-color;
}

#input_submit:hover {
  background-color: #6EA7D0;
  transition: .2s ease background-color;
}

.two_col {
  grid-column: span 2;
  align-content: center;
}

.coordinate-input {
  max-width: 8em;
}

.hgvs-input {
}

.input-examples {
  float: right;
}

.input-example-small {
  outline: 1px solid #053252;
  border-radius: 12px;
  color: #053252;
  cursor: pointer;
  padding: 2px 4px;
  transition: none;
  font-family: 'Trebuchet MS', 'DejaVu Sans', sans-serif;
}

.input-example-small:hover {
  outline: 1px solid lightblue;
  background-color: rgba(255, 255, 255, .6);
}

.bold-placeholder::placeholder {
  font-family: 'source-sans-pro-bold';
}

.header_btn {
  width: 60px;
  cursor: pointer;
  margin-left: 20px;
  margin-right: 20px;
}

.detaildiv.singlevariantpage {
}

.singlevariantpage .detailcontainerwrapdiv {
  padding-bottom: 10px;
}

.singlevariantpage .detailcontentdiv {
  background-color: #f0f0f0;
  border-radius: 10px;
  padding-left: 5px;
  overflow: auto;
}
.singlevariantpage .detailcontentdiv {
  background-color: #f0f0f0;
  border-radius: 10px;
  padding-left: 5px;
  overflow: auto;
}
.singlevariantpage .detailcontentdiv td {
  vertical-align: top;
}

.singlevariantpage .detailwidget {
  padding-bottom: 1rem;
  padding-left: 0px;
}

.singlevariantpage .detailwidget.nodata {
  color: #cccccc;
}

.singlevariantpage .detailwidgettitle {
  background: none;
}

.singlevariantpage .detailwidget-closebutton {
  display: none;
}

.singlevariantpage .detailwidgetpinbutton {
  display: none;
}

.singlevariantpage .detailwidget-camerabutton {
  display: none;
}

.container_titlediv {
  font-family: "source-sans-pro-bold";
  font-size: 30px;
  font-weight: 800;
  padding-left: 5px;
  background-color: white;
  color: black;
}

.singlevariantpage.widgettitle {
  font-size: 16px;
}

.container .header {
  position: relative;
  background-color: white;
  padding-top: 1vw;
  padding-left: 3vw;
  padding-right: 3vw;
  line-height: 1.5;
}
.container .content {
  display: none;
  padding: 5px;
}
#body {
  display: flex;
  flex-direction: column;
}

#bottom-div {
  display: none;
  grid-template-columns: minmax(0, 17rem) 1fr;
  margin: 0;
  padding: 0;
  background-color: white;
}

#logodiv {
  background-color: white;
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  margin: 0;
  background-size: 100% 100%;
  width: 100%;
  border-bottom: 3px solid #90cce7;
}

#logodiv * {
  font-family: 'Inter', 'Fira Sans', sans-serif;
  line-height: 2em;
  font-size: 14px;
}

#logodiv > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#variant-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  visibility: hidden;
  text-align: center;
}

#current-input {
  font-weight: 500;
}

#logodiv .single-variant-label {
  font-size: 18px;
  font-weight: 500;
}

.header-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  border: none;
  border-bottom: 1px dotted darkgray;
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
  color: black;
}
.header-button:hover {
  outline: 1px dashed darkgray;
  margin-bottom: 1px;
  border-bottom: none;
}

.alternate-allele {
  color: #006bff;
  font-family: 'Inter', 'Fira Sans', sans-serif;
  margin-left: 1em;
}

.logo {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48cGF0aCBmaWxsPSIjMDE2YmZmIiBkPSJNOS40IDIzMy40Yy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM2wxOTIgMTkyYzEyLjUgMTIuNSAzMi44IDEyLjUgNDUuMyAwczEyLjUtMzIuOCAwLTQ1LjNMNzcuMyAyNTYgMjQ2LjYgODYuNmMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMGwtMTkyIDE5MnoiLz48L3N2Zz4=');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  width: 1em;
  height: 1em;
  margin-right: .2em;
}

.back-search {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48cGF0aCBmaWxsPSIjMDE2YmZmIiBkPSJNOS40IDIzMy40Yy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM2wxOTIgMTkyYzEyLjUgMTIuNSAzMi44IDEyLjUgNDUuMyAwczEyLjUtMzIuOCAwLTQ1LjNMNzcuMyAyNTYgMjQ2LjYgODYuNmMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMGwtMTkyIDE5MnoiLz48L3N2Zz4=');
}

.help {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjMDE2YmZmIiBkPSJNNDY0IDI1NkEyMDggMjA4IDAgMSAwIDQ4IDI1NmEyMDggMjA4IDAgMSAwIDQxNiAwek0wIDI1NmEyNTYgMjU2IDAgMSAxIDUxMiAwQTI1NiAyNTYgMCAxIDEgMCAyNTZ6bTE2OS44LTkwLjdjNy45LTIyLjMgMjkuMS0zNy4zIDUyLjgtMzcuM2w1OC4zIDBjMzQuOSAwIDYzLjEgMjguMyA2My4xIDYzLjFjMCAyMi42LTEyLjEgNDMuNS0zMS43IDU0LjhMMjgwIDI2NC40Yy0uMiAxMy0xMC45IDIzLjYtMjQgMjMuNmMtMTMuMyAwLTI0LTEwLjctMjQtMjRsMC0xMy41YzAtOC42IDQuNi0xNi41IDEyLjEtMjAuOGw0NC4zLTI1LjRjNC43LTIuNyA3LjYtNy43IDcuNi0xMy4xYzAtOC40LTYuOC0xNS4xLTE1LjEtMTUuMWwtNTguMyAwYy0zLjQgMC02LjQgMi4xLTcuNSA1LjNsLS40IDEuMmMtNC40IDEyLjUtMTguMiAxOS0zMC42IDE0LjZzLTE5LTE4LjItMTQuNi0zMC42bC40LTEuMnpNMjI0IDM1MmEzMiAzMiAwIDEgMSA2NCAwIDMyIDMyIDAgMSAxIC02NCAweiIvPjwvc3ZnPg==');
  width: 1.2em;
  height: 1.2em;
}

#detaildiv_variant {
  position: relative;
  background-color: white;
}

#spinnerdiv {
  opacity: 0.5;
  width: calc(100vw - 240px);  /* 240px is side nav width */
  height: calc(100vh - 124px); /* 125px is tob bar height */
  background-color: white;
  align-items: center;
  justify-content: center;
  position: fixed;
}

#pagetitle {
  font-size: clamp(22px, 4vw, 66px);
  margin: 0px;
  color: white;
  font-family: "source-sans-pro-bold";
  border-radius: 10px;
  text-shadow: 0 0 6px #000;
  position: absolute;
}

#alternate-variants {
  font-family: 'Inter', 'Fira Sans', sans-serif;
  margin: 2em 1em;
  border: 1px solid #006bff;
  color: #006bff;
  padding: 1em;
  display: none;
}

#search_btn {
  width: 4.5vw;
  position: absolute;
  left: 17vw;
  top: 1vw;
}

#inputdiv {
  font-size: 12px;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  /*transition: 1s ease-out;*/
}

#inputdiv br {
  width: 100%;
  content: "";
}

#varinfo br {
  width: 100%;
  content: "";
}

#helpimg {
  width: 7vw;
  height: 5vh;
  cursor: pointer;
  position: relative;
  top: 23px;
}

#question_btn {
  width: 1vw;
  position: absolute;
  right: 6vw;
  top: 1.4vw;
}

#mtblogo {
  width: 4vw;
  position: absolute;
  right: 1vw;
}

#wglollipop_legend > div {
  margin-right: 10px;
  margin-bottom: 6px;
}

#wglollipop_legend span {
  font-size: 16px;
  vertical-align: middle;
}

#wglollipop_legend .circle {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  display: inline-block;
  border: 1px black solid;
}

.detailcontentdiv th {
  font-size: 18px;
}

.hidden {
  display: none;
}

dl {
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

dl > div {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: grid;
  grid-template-columns: 12rem auto;
}

#contdiv_prediction dl > div {
  grid-template-columns: 16rem auto;
} 


dt {
  line-height: 1.25rem;
  font-weight: 500;
  color: rgb(32 32, 32);
  padding-right: 1rem;
  word-break: break-word;
}

dd {
  color: rgba(17, 24, 39, 1);
}

@media (max-width: 800px) {
  dl > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  dt {
    grid-column: span 1 / span 1;
  }

  dd {
    grid-column: span 2 / span 2;
  }
}

.cgl_class {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-weight: 500;
  border-radius: 9999px;
}

.cgl_oncogene {
  color: rgba(153, 27, 27, 1);
  background-color: rgba(254, 226, 226, 1);
}

.cgl_tsg {
  color: rgba(6, 95, 70, 1);
  background-color: rgba(209, 250, 229, 1);
}

.dialdiv {
  display: grid;
  grid-template-columns: 7rem 1fr;
}

.dialdiv > div {
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
}

.dialdiv > div > div:first-child {
  font-size: 0.75rem;
}

.dialdiv > div > div:nth-child(2) {
  font-size: 1.25rem;
}

.dialdiv2 {
  display: grid;
  grid-template-columns: 7rem 1fr;
}

.dialdiv2 > div {
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
}

.dialdiv2 > div > div:first-child {
  font-size: 0.8rem;
  font-weight: bolder;
}

.preddiv {
  font-size: 1.15rem;
  text-align: center;
  vertical-align: middle;
}

.contentdiv > div {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.contentdiv > div > div:first-child {
  font-size: 0.75rem;
}

.contentdiv > div > div:nth-child(2) {
  font-size: 1.25rem;
}

.basediv > div {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.basediv > div > div:first-child {
  font-size: 0.75rem;
  text-align: center;
  font-weight: 700;
}

.basediv > div > div:nth-child(2) {
  font-size: 1.25rem;
  text-align: center;
  word-break: break-word;
  width: 235px;
}
#basetable {
  border: none;
}
.clinvar_traitname {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-radius: 9999px;
  border: 1px solid #bbbbbb;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: white;
}
.omim {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-radius: 9999px;
  border: 1px solid #bbbbbb;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: rgba(152, 216, 233, 1);
}
.cardiovascular {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-radius: 10px;
  border: 1px solid #bbbbbb;
  margin-bottom: 0.5rem;
  background-color: white;
}
.cardio {
  font-size: 20px;
  color: black;
}

.sidenav {
  background-color: rgb(73 134 189);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  height: 88vh;
  width: 11vw;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 20px;
  overflow-y: scroll;
  min-width: 15rem;
  max-width: 200px;
}

.sidenav a {
  padding: 10px 8px 6px 16px;
  font-size: 17px;
  font-family: "open-sans-300";
  color: white;
  display: block;
  border-bottom: 0.5px solid white;
  display: inline-block;
  text-decoration: none;
  height: 13%;
  text-align: left;
  vertical-align: middle;
}

.sidenav a:hover {
  color: rgb(32, 32, 32);
  background-color: white;
}

.activeclass {
  background-color: thistle;
}

.main {
  overflow: auto;
  height: 91vh;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .sidenav {
    display: none;
  }
  #bottom-div {
    grid-template-columns: unset;
  }
}

#material-icons {
  width: 150px;
  position: absolute;
  top: 20px;
  padding-left: 2vw;
}
.arrow_pharm {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid white;
  display: inline-block;
  position: relative;
  left: 10px;
}
.triangle-right {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-left: 8px solid white;
  border-bottom: 8px solid transparent;
  display: inline-block;
  position: relative;
  left: 10px;
  top: 2px;
}

.triangle-down {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid white;
  display: inline-block;
  position: relative;
  left: 10px;
  top: 5px;
}

.logoHover {
  opacity: 1;
  /*transition: 0.5s ease-in-out;*/
}

.sidenav-header {
  background: #f0f0f0;
  margin-top: 0px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#logo {
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 5px;
  display: block;
}
h3 {
  display: block;
  font-size: 2rem;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  color: rgb(73 134 189);
  font-family: "open-sans-300";
}
#OC-title {
  text-align: center;
}

#newtable th {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 5px;
  text-align: left;
  background-color: rgb(73 134 189);
  color: white;
  height: 2vw;
  position: sticky;
  top: 0;
}

#newtable {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#newtable td {
  border: 1px solid #ddd;
  padding: 5px;
}

#newtable tr:nth-child(odd) {
  background-color: white;
}

#newtable tr:hover {
  background-color: #ddd;
}

#pred th {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 5px;
  text-align: center;
  background-color: rgb(73 134 189);
  color: white;
  height: 10px;
  position: sticky;
  top: 0;
  pointer-events: none;
  
}

.th_tooltip::after {
  content: "?";
  display: inline-block;
  font-family: sans-serif;
  font-weight: 400;
  text-align: center;
  width: 1.8ex;
  height: 1.8ex;
  font-size: 12px;
  border-radius: 18.2ex;
  padding: 2px;
  color: white;
  background: transparent;
  border: 1px solid white;
  text-decoration: none;
  margin-left: 4px;
  vertical-align: center;
  cursor: pointer;
  pointer-events: all;
}

.show_tooltip { 
  display: block;
}

.hide_tooltip {
  display: none;
}

#benign_info {
  position: absolute;
  left: 57%;
  z-index: 3;
  background-color: white;
  padding: 10px;
  width: 250px;
  box-shadow: 4px 4px 4px gray;
  border: 1px dashed gray;
  word-break: normal;
}

#pathogenic_info {
  position: absolute;
  left: 75%;
  z-index: 3;
  background-color: white;
  padding: 10px;
  width: 250px;
  box-shadow: 4px 4px 4px gray;
  border: 1px dashed gray;
  word-break: normal;
}

#score_info {
  position: absolute;
  left: 41%;
  z-index: 3;
  background-color: white;
  padding: 10px;
  width: 250px;
  box-shadow: 4px 4px 4px gray;
  border: 1px dashed gray;
  word-break: normal;
}

#pred {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  background-color: white;
  border-radius: 9px;
}
#segway {
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid gray;
  width: 100%;
  padding: 10px;
}
.pred_class {
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  top: 35px;
  color: black;
  font-size: 1.25rem;
}
.pred_damaging {
  color: rgba(153, 27, 27, 1);
  position: relative;
}
.pred_benign {
  color: rgb(27, 54, 153);
  position: relative;
}
.pred_tol {
  color: rgba(6, 95, 70, 1);
  position: relative;
}

.pred_uncertain {
  color: black;
  position: relative;
}
.pred_tol {
  color: rgba(6, 95, 70, 1);
  position: relative;
}
.pred_noanno {
  color: darkgrey;
  position: relative;
  font-size: 1rem;
  text-align: center;
}
.pred_score {
  background-color: white;
  color: black;
  position: relative;
}
#pred td {
  padding-bottom: 15px;
  padding-top: 15px;
  vertical-align: middle;
}
#pred tr {
  border: 1px solid #ddd;
  padding: 15px;
}
#phylop {
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid gray;
  width: 100%;
}
.logos_short {
  vertical-align: middle;
  margin-left: -14px;
  width: 13%;
  height: 30px;
  filter: brightness(0) invert(1);
  padding-bottom: 0px;
}
.logos_tall {
  vertical-align: middle;
  margin-left: -14px;
  width: 10%;
  height: 30px;
  filter: brightness(0) invert(1);
  padding-bottom: 0px;
}
.sidenav a:hover .logos_short {
  color: rgb(32, 32, 32);
  background-color: white;
  filter: brightness(1);
}
.sidenav a:hover .logos_tall {
  color: rgb(32, 32, 32);
  background-color: white;
  filter: brightness(1);
}
.linkclass {
  text-decoration: none;
  color: rgb(73 134 189);
  font-family: "Cabin", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.linkclass:hover {
  text-decoration: underline;
  color: rgb(73 134 189);
}

#directions {
  width: 100px;
  display: none;
  position: absolute;
  top: 3rem;
  left: 9.5vw;
  z-index: 3;
  background-color: white;
  padding: 20px;
  width: 250px;
  box-shadow: 4px 4px 4px gray;
  border: 1px dashed gray;
}

#questionMark::after {
  content: "?";
  display: inline-block;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  width: 1.8ex;
  height: 1.8ex;
  font-size: 1.6ex;
  border-radius: 18.2ex;
  padding: 1px;
  color: black;
  background: transparent;
  border: 1px solid black;
  text-decoration: none;
  margin-left: 4px;
  vertical-align: center;
  cursor: pointer;
}

#questionMark:active + #directions {
  display: block;
}

.infoimg {
  position: relative;
  top: 3px;
  width: 16px;
  cursor: pointer;
  text-decoration: none;
  color: rgb(73 134 189);
  font-family: "Cabin", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.clinbutton {
  background-color: rgb(73 134 189);
  color: white;
  width: 220px;
  font-size: 17px;
  border-radius: 9999px;
  padding: 5px;
  margin-bottom: 20px;
}

.ndexbutton {
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 2px;
  font-family: "roboto-medium";
  color: #ffffff;
  background: #c5af8d;
  text-decoration: none;
  border-style: none;
  margin-left: 1px;
  margin-right: 1px;
  cursor: pointer;
  width: 100px;
  border-radius: 10px;
  height: 50px;
}

#tooltipdiv {
  position: absolute;
  display: none;
  width: 300px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 10px 0;
  border: 1px solid rgb(73 134 189);
  z-index: 1;
  padding: 12px;
  text-align: left;
}

#tooltipdiv > div > div {
  margin-top: 6px;
}

#tooltipdiv.show {
  display: block;
}

.showflex {
  display: flex;
}

.moduledetaildiv {
  position: fixed;
  width: 80%;
  height: 80%;
  margin: auto;
  z-index: 300;
  background-color: white;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 6px;
  padding: 10px;
  padding-bottom: 23px;
  border: 1px solid black;
  box-shadow: 0px 0px 20px;
  display: none;
}

.moduledetaildiv.show {
  display: block;
}

.moduledetail-output-table {
  border-spacing: 12px;
}

.moduledetail-output-table thead td {
  border-bottom: 1px dotted #aaaaaa;
}

#moduledetaildiv-infodiv {
  height: 100%;
  overflow: auto;
  line-height: 18px;
}

#moduledetaildiv-infodiv > div {
  margin-top: 12px;
}

.barDiv {
  height: 25px;
  border-color: gray;
  text-align: center;
  line-height: 25px;
  color: black;
  white-space: nowrap;
}

.barDivTitle {
  width: 250px;
  background-color: white;
  border: 0.75px solid black;
  overflow: hidden;
}

.arrow {
  display: flex;
  flex-grow: 15;
}

.line {
  margin-top: 8px;
  min-width: 155px;
  display: flex;
  flex-grow: 2;
  background: #bfbfbf;
  height: 1.5px;
  float: left;
  margin-left: 5px;
}

.point {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #bfbfbf;
  float: right;
  margin-top: 3px;
  margin-right: 2px;
}

.pointRight {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 14px solid #bfbfbf;
  margin-top: 1px;
}

.basepaneldiv {
  background-color: #98d8e926;
  border: 1px solid black;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.barWidget {
  display: "flex";
  flex-direction: "column";
  width: "fit-content";
}

.barWidget span {
  font-size: 0.8rem;
}

.maxSpan {
  display: "flex";
  justify-content: "flex-end";
  flex: "auto";
  font-size: "12px";
}

#detaildiv_documentation {
  width: 100%;
}

#annotation_errors {
  border: 1px solid darkred;
  color: darkred;
  margin: 1em;
  padding: 1em;
  text-align: center;
}

#detaildiv_documentation > p {
  margin-block-end: 1.5em;
  text-align: justify;
  text-justify: inter-word;
  font-family: 'Trebuchet MS', 'DejaVu Sans', sans-serif;
}

#detaildiv_documentation > h1 {
  margin-block-end: 1em;
  font-family: 'Trebuchet MS', 'DejaVu Sans', sans-serif;
}

#detaildiv_documentation > ul {
  list-style-type: none;
  padding: 0;
}

#detaildiv_documentation > ul > li > a {
  font-family: 'Trebuchet MS', 'DejaVu Sans', sans-serif;
}

.prediction {
  overflow: auto;
  padding-left: 1.5rem;
  padding-right: 1rem;
  display: flex;
  flex-direction: column;
}

.prediction canvas {
  max-height: 203px;
}
.prediction span{
  background-color: white;
  padding: 5px;
  border: 1px solid black;
  max-width: 192px;
  display: flex;
  justify-content: center;
  margin-top: 15px;
  font-size: 15px;
}