html, body { /* ensures page is height of screen and body is height of page */
    background-color: #E0E0E0;
    height: 100%;
    margin: 0;
}

p {
    text-align: center;
}

.banner {
    background-color: lightblue;
    width: 100%;
    height: 75px;
    display: table;
    margin: 0px 0px;
}

.page-title {
    display: table-cell;
    text-align: left;
    vertical-align: top;
    color: maroon;
}

.banner form {
    display: table-cell;
}

.search-buttons {
    width: 100%;
    height: 150px;
    display: table;
}

.srch-btn {
    margin: 0 auto;
    display: block;
}

.passages {
    width: 100%;
}

.wrapper { /* placed in body to ensure footer remains at bottom of screen */
    min-height: 100%;
    margin-bottom: -150px;
}

/* The positive footer height is the same magnitude as the negative
   margin-bottom of the .wrapper.  This ensures that the footer remains at the
   bottom of the screen.  However, content of the .wrapper will flow over the
   negative margin and encroach on the footer unless there is an element to
   "push" the content up.
*/
.footer,
.push {
    height: 150px;
    color: maroon;
}

.footer {
    background-color: lightblue;
}

a.ref-table-btn:link,
a.ref-table-btn:visited,
a.ref-table-btn:hover,
a.ref-table-btn:active
{
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    color: black;
    background-color: transparent;
    text-align: left;
    text-decoration:none;
    font-family: Tahoma;
    font-size: 16px;
    cursor: default;
}

td {
    padding: 10px;
}

.MSExplanDiv {
    display: inline-block;
}

.MSExplanPopupDiv {
  position: relative;
  display: inline-block;
}

.MSExplanPopupDiv .MSExplanPopup {
  visibility: hidden;
  width: 400px;
  background-color: #555;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px 8px;
  position: absolute;
  z-index: 1;
  top: 125%;
  left: 50%;
  margin-left: -200px;
}

.MSExplanPopupDiv .show {
  visibility: visible;
}

.mainTab {
  overflow: hidden;
  border: 1px solid #CCC;
  background-color: #E0E0E0;
}

.mainTab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 14px;
  font-family: Tahoma, Geneva, sans-serif;
}

.mainTab button:hover {
  background-color: #F7F7F7;
}

.mainTab button.active {
  background-color: #ccc;
}

#textMenu {
    display: none;
    width: 100%;
    height: 600px;
}

.menuTextArea {
    display: block;
    white-space: pre;
    margin: 25px auto 25px auto;
    width: 90%;
    height: 75%;
    resize: none;
}

.menuTextInput {
    display: block;
    margin: 25px auto 25px auto;
    width: 90%;
}

.guiDisplay {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.guiFieldSetClass {
    height: 100%;
    width: 100%;
    border-color: black;
}

.guiLeftDiv {
    display: flex;
    flex-direction: column;
    margin: 25px 10px;
    padding: 10px;
    height: 100%;
    width: 50%;
}

.guiUpperLeftDiv {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 250px;
    margin: 10px 5px;
}

.guiLowerLeftDiv {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 250px;
    margin: 10px 5px;
}

.guiRefDiv {
    display: flex;
    flex-direction: column;
    margin: 5px;
    width: 30%;
    height: 100%;
}

.guiTblDivClass {
    width: 100%;
    height: 87%;
}

.guiInpDivClass {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 7%;
    margin-top: 5px;
}

.guiJSTChkDivClass {
    height: 100%;
    width: 15%;
    padding-top: 3px;
    font-size: 13px;
}

.guiJSTlblClass {
    height: 100%;
    width: 15%;
    padding-top: 7px;
}

.tblRefBodyClass  {
    width: 100%;
}

.tblRefBodyClass TD {
    width: 100%;
}

.guiCfTableDiv {
    display: flex;
    flex-direction: column;
    margin: 5px;
    width: 20%;
    height: 100%;
}

.guiButtonsDiv {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: 20%;
    height: 100%;
}

.guiCheckBoxDiv {
    display: flex;
    flex-direction: row;
    justify-content: left;
    margin: 5px;
}

.tblRefClass {
    display: block;
    margin: 5px;
    height: 100%;
    width: 100%;
    font-size: 10px;
    font-family: Tahoma;
    background-color: white;
    border: 1px solid black;
    overflow: auto;
}

.tblRefClass TD {
    margin: 0px;
    padding: 5px;
}

.tblRefVisClass {
    user-select: none;
}

.tblRefHidClass {
    display: none;
}

.tblRefHilitClass {
    background-color: #FFEEAD
}

.guiRefInput {
    margin: 5px;
    height: 100%;
    width: 70%;
}

.cfTableLabelDiv {
    display: block;
    height: 10%;
    margin: 0 5px;
    padding: 0px;
}

.cfTableClass {
    display: block;
    margin: 5px;
    padding: 0;
    height: 83%;
    width: 100%;
    background-color: white;
    border: 1px solid black;
    font-size: 12px;
    overflow: auto;
}

.cfCol1Class {
    cursor: pointer;
    user-select: none;
}

.cfCol2Class {
    display: none;
}

.cfTableInput {
    margin: 5px;
    height: 7%;
    width: 95%;
}

.cfTableClass TD {
    margin: 0px;
    padding: 0px;
}


.refBtnsClass {
    display: block;
    margin: 5px;
    font-size: 12px;
}

.guiRefCBClass {
    display: block;
    font-size: 13px;
    margin: 5px;
    height: 100%;
}

.refXrefsDivClass {
    display: flex;
    flex-direction: column;
    width: 40%;
    height: 100%;
    margin: 0 0 0 5px;
    padding: 0;
}

.XrefLabelDiv {
    display: block;
    height: 10%;
    margin: 0 5px;
    padding: 0;
}

.XrefsULClass {
    display: block;
    height: 83%;
    width: 97%;
    margin: 5px 5px;
    background-color: white;
    border: 1px solid black;
    font-size: 12px;
    padding-left: 5px;
    overflow: auto;
}

#notesUL {
    cursor: pointer;
    user-select: none;
}

.notesULSelected {
    background-color: #337AFF;
    color: white;
}

.XRTier0Class {
    list-style-position: inside;
}

.XRTier0Class UL {
    padding-left: 20px;
    margin-left: 0px;
}

.XRTier1ULClass {
    list-style-type: none;
}

.XRTier1ExpandClass {
    cursor: pointer;
    user-select: none;
}

.XRTier1SpanClass {
    cursor: pointer;
    user-select: none;
}

.XRT2HiddenClass {
    display: none;
}

.XRTier2SpanClass {
    cursor: pointer;
    user-select: none;
}

#notesUL li {
    padding-bottom: 1em;
}

#noteButtonsDiv {
    margin: 0 -5px 0 5px;
}

.XrefRadBtnDiv {
    display: flex;
    flex-direction: row;
    height: 7%;
    margin: 0 5px;
}

.guiRightDiv {
    display: flex;
    flex-direction: column;
    margin: 25px 10px 0 10px;
    padding: 10px 30px 10px 10px;
    height: 100%;
    width: 50%;
}

.guiUpperRightDiv {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 350px;
    margin: 10px 5px;
}

.grpLabelClass {
    display: block;
    height: 7%;
    width: 100%;
    margin: 0 10px;
    padding: 0;
}

.guiGroupsContainClass {
    display: flex;
    flex-direction: row;
    height: 75%;
    width: 100%;
    margin: 5px auto;
    overflow: hidden;
}

.guiGrpEditTable {
    display: block;
    height: 97%;
    width: 60%;
    margin: 5px 10px;
    background-color: white;
    border: 1px solid black;
    border-collapse: collapse;
    font-size: 12px;
    overflow: auto;
}

.guiGrpEditTable TD {
    margin: 0;
    padding: 0;
}

.grpRowSelected {
    background-color: #337AFF;
    color: white;
}

.grpCol1Class {
    cursor: pointer;
    user-select: none;
    border-top: 1px solid grey;
    border-right: none;
    border-bottom: 1px solid grey;
    border-left: 1px solid grey;
}

.grpCol2Class {
    cursor: pointer;
    user-select: none;
    border-top: 1px solid grey;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
    border-left: none;
    width: 100%
}

.grpColHidClass {
    display: none;
}

.grpRefsTableClass {
    display: block;
    height: 97%;
    width: 30%;
    margin: 5px 10px;
    background-color: white;
    border: 1px solid black;
    font-size: 12px;
    overflow: auto;
}

.grpRefsTableClass TD {
    margin: 0;
    padding: 0;
}

.grpRefsVisClass {
    cursor: pointer;
    user-select: none;
}

.grpRefsHidClass {
    display: none;
}

.guiGrpTAandBtnsContainClass {
    display: flex;
    flex-direction: row;
    height: 20%;
    width: 100%;
    margin: 5px auto;
}

.grpTAClass {
    display: block;
    height: 100%;
    width: 70%;
    margin: 5px 0 5px 10px;
    background-color: white;
    border: 1px solid black;
    font-size: 12px;
    resize: none;
}

.guiGrpBtnsContainClass {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 25%;
    margin: 5px auto;
}

.guiGrpBtnClass {
    display: block;
    width: 75%;
    font-size: 12px;
    margin: 5px 25px;
}

.guiLowerRightDiv {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 150px;
    margin: 10px 5px;
}

.ntLabelClass {
    display: block;
    height: 7%;
    width: 50%;
    margin: 0 10px;
    padding: 5px;
}

.ntDivClass {
    display: flex;
    flex-direction: row;
    height: 93%;
    width: 100%;
}

.ntTAClass {
    display: block;
    height: 100%;
    width: 70%;
    margin: 5px 10px;
    background-color: white;
    border: 1px solid black;
    resize: none;
}

.ntBtnContainClass {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 25%;
    margin: 5px auto;
}

.guiNtBtnClass {
    display: block;
    width: 75%;
    font-size: 12px;
    margin: 5px 25px;
    position: relative;
    top: 30%;
}

.potentialParallelClass {
    border-bottom: 2px solid red;
}

.parallelClass {
    border-bottom: 2px solid green;
}