body { font-family: sans-serif; }
h1, h2 { margin:0.3em 0; padding:0; }
h1 { font-size:1.8em; }
h2 { font-size:1.3em; }

[id^="SSappletshown_"] td { padding: 2px 0px; }
#caption1 { display: none }
#JSmolOuter { float:right; position:relative; margin:1em; width:600px; height:600px; border:1px dashed gray; background-color:#F4F8FA; }
#JSmolInner { width:100%; height:100%; }

#descriptions { border-bottom: 1px solid #cecece; }
#wtCaption, #mutCaption { color:#000; padding: 0.5ex; }

#icons { font-family:Arial, Helvetica, sans-serif; font-size:0.85em; color:#660033; margin-top:0.6em; min-width:15em; }
#icons td { text-align:center; vertical-align:top; width:95px; padding:2px; }

#iconsTable {
  font-size: 0.85em;
  line-height: 1em;
  color: #660033;
  display: inline-block;
  vertical-align: top;
}
#iconsTable > div {
  display:inline-block;
  text-align:center;
  vertical-align:top;
  width:80px;
}
#iconsTable img { margin:0.5ex; box-shadow:5px 2px 14px 0px rgba(0,0,0,0.75); width:48px; }

#mutButtons { float: right; margin: 0 0 0.5em 0.5em; visibility: hidden; }

#animMutBtn {
  margin:0 0.5ex;
  height:1.8em;
  vertical-align:middle;
  margin-left: 4ex;
  transform: rotate(90deg);
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

#symicons { float:left; padding-top:1em; width:46px; }
#symicons img { width:44px; visibility: hidden; }

#legendWT   { color: white; background-color: #DB6D00; border-radius:3px; padding:0 1ex; }
#legendMUTb { color: white; background-color: #24FF24; border-radius:3px; padding:0 1ex; }
#legendMUTp { color: white; background-color: #004949; border-radius:3px; padding:0 1ex; }
#legendMUTn { color: white; background-color: #b66dff; border-radius:3px; padding:0 1ex; }

input[type="text"] { width:6ex; margin-right:3ex; }
input { font: inherit; }

#buttonsForAll { padding:3px; text-align:right; }
#buttonsForAll input, #btnWT, #btnMT {
  border-radius:1ex;
  margin:0 0.3ex;
  font:inherit;
  box-shadow: 0px 1px 0px 0px #f0f7fa;
  font-weight:bold;
  border:1px solid #057fd0;
  cursor:pointer;
  border-radius:6px;
  padding:0.15em 0.4em;
}
#buttonsForAll input:active, #btnWT:active, #btnMT:active {
  position:relative;
  top:1px;
}
#buttonsForAll #legendWT { border-radius:1ex; border:3px dotted #DB6D00; background-color:white; color:black; margin-right:2ex; }
#btnWT, #btnMT {
  padding:0.4ex 0.8ex;
  color:black; background-color:#F0F0E0;
  background:linear-gradient(to bottom, #F4F4B0 5%, #D8D8AC 100%);
}
#btnWT:hover, #btnMT:hover {
  background:linear-gradient(to bottom, #D8D8AC 5%, #F4F4B0 100%);
}
.Any {
  color:black; background-color:#CCFFFF;
  background:linear-gradient(to bottom, #CCFFFF 5%, #99BFBF 100%);
}
.Any:hover {
  background:linear-gradient(to bottom, #99BFBF 5%, #CCFFFF 100%);
}
.Benign {
  color:black; background-color:#10EF10;
  background:linear-gradient(to bottom, #10EF10 5%, #0CB30C 100%);
}
.Benign:hover {
  background:linear-gradient(to bottom, #0CB30C 5%, #10EF10 100%);
}
.Pathogenic {
  color:white; background-color:#004949;
  background:linear-gradient(to bottom, #407676 5%, #004949 100%);
}
.Pathogenic:hover {
  background:linear-gradient(to bottom, #004949 5%, #407676 100%);
}
.NotReviewed {
  color:white; background-color:#B66DFF;
  background:linear-gradient(to bottom, #B66DFF 5%, #8852BF 100%);
}
.NotReviewed:hover {
  background:linear-gradient(to bottom, #8852BF 5%, #B66DFF 100%);
}

#tooltipClose {
  float:right;
  cursor:pointer;
  width:32px;
  height:32px;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAD5klEQVRYhe2WW0wcVRiAv7rFilLRBvFS1KpLbVBj4qUmNb4Z5cFL6AteYi0p2thq7BNujdjXNuiDdTUKZRbIgopINu2CtV6oDalUo01KJdFWo0ILEkLJsoFdd+f8PswwszAze6ntm3/yJ5udf873nXP+OTPwfxQYIrJKRGpF5GUR+dDMV0XkGRG55mKCa0Tka8kV6fS3Mp989kKCq0TkWE7wklCJ5PF/RqfW/1f4EyIy6xh8ZEzU0WFRvVEjB4dFnRxzWuj6fPqnU88Bl5wPvMYBjg6IrjWK0gLuGXpdVKRfJJVe7LH/m23A8kLgd4nInAWenhPV9r43eGm2B0VNxm2DZCqZbt7+WF4SIuITkeMWfCouemhX/nAzda1R1IQtoUbPnfGvKq7IuR0isnnRsrcHFw0MeEId19qDIsmUvRUtO/YCV2UX0PXTFrxnvwMAyKZHq1zhrtc+7rYn8/vkdPkVRXcDRV6zv9cqjic8AQuZzzWlBUTFEpbEz2/fsAtwP7AklWqwBAaHHbPMBCxkTrgWEHX4R3sVWp4eAO4EfA4BfXa+yyrs7nHdZzeJrHAtIKqryxbQdp8GHgFKHALq3Lx11KpOzbPZCoJrAVHhZlugs/NvYBNQ7hSYnD1iFXbty9rtBQm0fmALfNQ9BbwC3OwU+HPmC6swHPaEewl4SnR0ZG7BONAA3ObsgaGRoFV46LuC4Z4S0QFboLX6N+A1V4F0W1OdVTgRz/sxzCkxNmMJ9DasPQbsANY4BDZXr1uj4gn7HRBu9my+bI3p2YCxhL66pPgzYAtwvUMAWKnC4Yh1w9mYKyjb0+H4/2zMFghtHANagceBUjeB5e9tvaNaxRNJ66bvf/Xu7lw5NGLDp+fS99xSdhjYA9yHx3G8DFithx622/Z8JY6cyBxC/thb9gvwCfACUGGyXKMY2KD2bf9hkcTYTNazIfOZz2w6o/OfPAN8DuwGNgCXe8EXVuHaUp+vVtfqT8qSUH/NiIr0i2oPih5+V/SOd4xXdm9U1Ijzs0yF6sZL8X0FNAO1wHXZZm/1AsZzukW1lg+pWEJ3jJwjVCyhz7ZceQr4EmgD6gG/1967xQpgHVB/v78srFqeH5VUWuUFD9WNr68sPwocxOj6rUCVOWZBscK0rgX2rC1fGenb6T+hQnXjKtIXUwcGZtXBwbiK9MV07cWJQ2/4R24tKxk0Z/0p0AQ8BVQClxUKX4gijH170JxJE8aS9gBRoN/MqPlfG/AW8BLwEMaBk/eye8UyjM69EXgAqDEBO4FG4E3z9zZgo1lzk3lPzoYrVORSjA/LCoztud3MSlPwarPmgoIvWvwL5e7PJPPaUXgAAAAASUVORK5CYII=");
}

#seqCont { clear:both; width:95%; margin-left:0%; z-index:3; }
#seqSeq { overflow-x:auto; overflow-y:hidden; font-family:"Courier New", Courier, mono;
  padding:0.3em 0 0 3ex; height:4em; white-space:nowrap;
  z-index:3; border:1px solid gray;
}
#seqSeq .singleRes { position:relative; z-index:3; cursor:default;
  display:inline-block;
  text-align:center; width:3ex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#seqSeq .singleRes.noSeq { vertical-align:top; padding-top:1.5em; }
#seqSeq .singleRes.noSeq::before { content:"\22EF"; }
#seqSeq .singleRes.hasMut { cursor:pointer; }
#seqSeq .singleRes.hasMut:hover { background-color:#FFFF33; }
#seqSeq .singleRes.hasMutPatho { color:#004949; font-weight:bold; }
#seqSeq .singleRes.hasMutBenign { color:#20df20; font-weight:bold; }
#seqSeq .singleRes.hasMutMix { color:#904068; font-weight:bold; }
#seqSeq .singleRes.hasMutUnknown { color:#b66dff; font-weight:bold; }
#seqSeq .seqNr { font-family:Arial, Helvetica, sans-serif; color:#993300!important; background-color:white!important; font-weight:normal!important;
  font-size:0.7em; line-height:100%; white-space:normal; max-width:2ex; padding-top:2px;
  display:inline-block;
  border-top:4px solid transparent;
}
#seqSeq .seqNr.hasMutPatho { border-top:4px solid #004949; }
#seqSeq .seqNr.hasMutBenign { border-top:4px dotted #20df20; }
#seqSeq .seqNr.hasMutMix { border-top:4px double #904068; }
#seqSeq .seqNr.hasMutUnknown { border-top:4px double #b66dff; }
#seqSeq .exemMut { font-weight:normal; color:#F10000; line-height: 0.6em; }
#seqSeq .exemMut:before { content:'\2388'; }

#seqLegend { position:relative; top:-1.5em; left:8em; margin-bottom:-0.6em; }
#seqLegend span { margin-left:0.5em; }
#seqLegend span.exemMut { font-weight:normal; color:#F10000; }
#seqLegend span.hasMutPatho { color:#004949; font-weight:bold; border-bottom:4px solid #004949; }
#seqLegend span.hasMutBenign { color:#20df20; font-weight:bold; border-bottom:4px dotted #20df20; }
#seqLegend span.hasMutUnknown { color:#b66dff; font-weight:bold; border-bottom:4px double #b66dff; }

#resDropDwn {
  display:none;
  min-width:5ex; width:auto;
  min-height:4em;
  border:1px solid blue; background-color:white;
  position:absolute;
  z-index:10000;
  margin-top:1.3em; margin-left:0.4ex;
  padding: 0 0.8ex;
  border-radius:1ex;
  box-shadow:3px 3px 3px 0px rgba(0,0,0,0.25);
}
#resDropDwn::before { content:"▲"; position:relative; top:-0.7em; left:-1.1ex; color:blue; }
#resDropDwn option { padding:0.15em 1ex; }
#resDropDwn optgroup { font-weight:normal; font-style:normal; color:#6633FF; }
#resDropDwn option { color:black; }
#resDropDwn option:disabled { cursor:none; cursor:not-allowed; }

#buttonsForAll input { margin-right:5px; }

#mutDescription { overflow:scroll; max-height:400px; }

#mutDesc { border-collapse: collapse; width: 100%; }
#mutDesc tr:nth-child(even) { background-color: #f2f2f2; }
#mutDesc tr:hover { background-color: #ddd; }
#mutDesc td, #mutDesc th { border: 1px solid #ddd; }

[id^="controls1_"] input {
  background-color:#FFFFA0;
  background:linear-gradient(to bottom, #FFFFA0 5%, #DFDF8C 100%);
  border-radius:0.4em;
}
[id^="controls1_"] input:hover {
  background:linear-gradient(to bottom, #DFDF8C 5%, #FFFFA0 100%);
}