p {
  
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.pageglobal {
/*  font-family: "Verdana", "Arial", sans-serif;*/
/*  font-family: "Georgia", serif;*/
  font-family: "Noto Sans", sans-serif;
/*  background-color: #FFCC88;*/
/*  background-color: #CCEEFF;
  background-color: #AABBFF;*/
/*  background-color: #CCEEFF;*/
  background-color: #C3E4FF;
  color: #000000;
  padding: 0;
  margin: 0;
  
/*  background-image: url("images/bg.png");
  background-repeat: repeat;*/
/*  margin: 1em auto 1em auto;
  display: table;
  border: 2px solid black; */
  
/*  display: flex;
  justify-content: center;*/
}

.pagemain {
  padding: 8px;
  margin: 0 auto 0 auto;
/*  max-width: 1320px;*/
/*  width: 1320px;*/
  max-width: 1280px;
/*  border: 1px solid black;*/
  
/*  border: 1px solid rgba(0, 0, 0, 0.5);
  background-color: #CCEEFF;
  border-radius: 16px;*/
/*  margin: 1em auto 1em auto;
  display: table;
  border: 2px dotted black; */
}

.pagemain-wide {
  padding: 8px;
  margin: 0 auto 0 auto;
/*  border: 1px solid black;*/
}

.pagemain-wide-nowide {
  margin: 0 auto 0 auto;
  max-width: 1280px;
/*  border: 1px solid black;*/
}

.basic-table {
  border: 1px solid black;
  border-collapse: collapse;
  margin: 8px;
}

.basic-table td {
  border: 1px solid black;
  padding: 0.2em;
}

.basic-form {
  margin: 4px;
  padding: 16px;
/*  border: 4px solid rgba(255, 255, 255, 0.0);*/
  border: 1px solid rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 0.37);
  border-radius: 16px;
}

.basic-form label {
  margin: 4px;
}

.basic-form-label {
  font-weight: bold;
}

.basic-form-subtext {
  font-size: 90%;
  margin-left: 0.5em;
}

.basic-form input {
  margin: 4px;
}

.std-flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}

.std-baseline-flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: baseline;
  align-content: space-between;
}

.std-top-flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: space-between;
}

.std-bottom-flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-end;
  align-content: space-between;
}

.std-vertical-flex {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}

.generic-flex-item {
  margin: 0.5em 1em 0.5em 1em;
}

.form-flex-item {
  max-width: 320px;
  margin: 1em;
}

.top-nav {
  display: flex;
  justify-content: center;
}

.top-nav-join-flex {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-flow: row nowrap;
  max-width: 640px;
}

.top-nav-logo-box {
  margin: 0em 0.2em;
}

.top-nav-all-outer-outer {
  margin: 0em 0.2em;
}

.top-nav-all-outer {
  flex: 1 1 auto;
}

/*.top-nav-all-outer {
  display: table;
  margin: 0 auto 0 auto;
  background-color: #2288CC;
  border: 4px solid #2288CC;
  border-radius: 8px;
}*/

.top-nav-flex-outer {
/*  background-color: #2288CC;
  border: 4px solid #2288CC;
  border-radius: 8px;
  display: inline-block;*/
}

.top-nav-flex {
/*  margin: 0 auto 8px auto;*/
/*  background-color: #44CCFF;*/
/*  padding: 4px;*/
/*  background-color: rgba(68, 204, 255, 0.33);*/
  background-color: rgba(68, 204, 255, 0.50);
  padding: 4px;
  border-radius: 16px;
  
  display: flex;
  flex-flow: row wrap;
  
/*  justify-content: center;
  align-items: center;*/
  justify-content: flex-start;
  align-items: flex-end;
  
  align-content: space-between;
  
/*  align-content: flex-end;
  min-height: 64px;*/
  
/*  flex: 1 1 auto;*/
  
/*  background-color: #2288CC;
  padding: 4px 0 4px 0;
  border: 4px solid #2288CC;
  border-radius: 8px;*/
/*  border-bottom: 2px solid rgba(0, 0, 0, 0.5);*/
}

.top-nav-flex-item-outer {
  margin: 0.2em;
}

.top-nav-flex-item {
  padding: 3px 8px 3px 8px;
  width: 64px;
/*  background-color: #88FFBB;
  border: 4px solid rgba(127, 255, 187, 1.0);*/
/*  background-color: rgba(255, 255, 255, 0.75);
  border: 4px solid rgba(127, 216, 127, 1.0);
  border-radius: 4px;*/
/*  border-left: 4px solid rgba(64, 64, 216, 0.66);
  border-right: 4px solid rgba(64, 64, 216, 0.66);*/
  border: 2px solid rgba(64, 64, 216, 0.66);
  border-radius: 16px;
  
/*  background-color: rgba(128, 224, 255, 1.0);*/
  background-color: rgba(255, 255, 255, 1.0);
  color: rgba(64, 64, 192, 1.0);
  
  font-family: "Arial", sans-serif;
  font-weight: bold;
  font-size: 10pt;
  text-align: center;
}

.top-nav-flex-item:hover {
  background-color: #FF88FF;
  color: #000000;
}

.top-nav-a {
  text-decoration: none;
/*  color: rgba(0, 0, 128, 0.8);*/
  color: #4444FF;
}

.proj-nav {
  margin: 8px auto 8px auto;
  padding: 6px 16px 6px 16px;
  max-width: 480px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  display: table;
}

.proj-nav-flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}

.proj-nav-flex-item-outer {
  margin: 0.2em 0.7em;
}

.proj-nav-flex-item {
  font-size: 9pt;
  text-align: center;
  max-width: 80px;
}

.proj-nav-a {
  text-decoration: none;
  color: #4444FF;
}

.proj-nav-a:hover {
  text-decoration: underline;
}

.proj-nav-no-a {
  text-decoration: none;
  color: #000000;
}

.basic-menu {
  list-style-type: none;
  display: inline-block;
  padding-left: 24px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.basic-menu a {
  text-decoration: none;
  color: #2222FF;
}

.basic-menu li {
  margin: 6px;
  padding: 2px 8px 2px 8px;
  background-color: rgba(255, 255, 255, 1.0);
  border-left: 4px solid rgba(64, 64, 216, 0.66);
  border-radius: 8px;
}

.basic-menu ul {
  padding-left: 24px;
}

.basic-menu ul li {
  border: none;
/*  background-color: rgba(255, 255, 255, 0.66);
  border-left: 2px solid rgba(64, 64, 216, 0.66);*/
}

.simple-menu {
  list-style-type: none;
  padding-left: 24px;
}

.fakepre {
  font-family: monospace;
  white-space: pre-wrap;
}

.main-index-box {
  display: flex;
  justify-content: center;
}

.main-index-box-content {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 0.1em 1.0em 1.0em 1.0em;
  margin: 1.0em;
  max-width: 768px;
}

.proj-overview-box {
  display: flex;
  justify-content: center;
}

.proj-overview-box-content {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 0.1em 1.0em 1.0em 1.0em;
  margin: 1.0em;
  max-width: 800px;
}

.proj-toc {
/*  border: 1px solid black;*/
  margin: 0 auto 0 auto;
  background-color: rgba(255, 255, 255, 1.0);
  border-radius: 8px;
  padding: 16px;
  display: table;
}

.proj-toc a {
  text-decoration: none;
  color: #2222FF;
}

.proj-toc-table {
/*  border: 1px solid black;*/
  border-collapse: collapse;
  margin: 8px;
}

.proj-toc-header-td {
  font-size: 150%;
  font-weight: bold;
}

.proj-toc-header-td-center {
  font-size: 150%;
  font-weight: bold;
  text-align: center;
}

.proj-toc td {
/*  border: 1px solid black;*/
  padding: 0.2em 0.5em 0.2em 0.5em;
  border-top: 1px dotted black;
  border-bottom: 1px dotted black;
}

.proj-toc-overall-td {
/*  min-width: 6px;*/
/*  font-size: 130%;*/
  font-weight: bold;
}

.proj-toc-bookname-td {
/*  min-width: 6px;*/
/*  font-size: 120%;
  font-weight: bold;*/
  max-width: 192px;
}

.proj-toc-chaptername-td {
/*  min-width: 6px;*/
/*  font-size: 110%;*/
  max-width: 192px;
}

.proj-toc-pagename-td {
/*  min-width: 6px;*/
  max-width: 192px;
}

.proj-toc-bookrate-td {
/*  min-width: 16px;*/
  text-align: right;
}

.proj-toc-chapterrate-td {
/*  min-width: 16px;*/
  text-align: right;
}

.proj-toc-pagerate-td {
/*  min-width: 16px;*/
  text-align: right;
}

.proj-toc-total-td {
  min-width: 64px;
  text-align: right;
}

.proj-toc-detail-td {
/*  min-width: 128px;*/
}

.strcontent-completionrate-empty {
  color: red;
  font-weight: bold;
}

.strcontent-completionrate-full {
  color: green;
  font-weight: bold;
}

.strcontent-completionrate-mid {
  color: red;
  font-weight: bold;
}

.lang-search-form {
  display: flex;
  justify-content: center;
  font-size: 90%;
}

.lang-search-form-interior {
  max-width: 640px;
/*  max-width: 800px;*/
}

.lang-history-form {
  display: flex;
  justify-content: center;
  font-size: 90%;
}

.lang-history-form-interior {
  max-width: 640px;
/*  max-width: 800px;*/
}

.lang-history-list-container {
  width: 1024px;
  background-color: white;
  border-radius: 16px;
  padding: 12px;
  box-sizing: border-box;
  
  margin: 0 auto;
}

.lang-history-list-outer {
  
}

.lang-history-list {
  margin: 0.2em;
}

.lang-history-list li {
  
}

.lang-history-pagination {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

.lang-history-pagination a {
  color: #2222FF;
  text-decoration: none;
}

.lang-history-pagination a:visited {
  color: #2222FF;
}

.history-pagination-label {
/*  padding: 0.3em 0.6em 0.3em 0.3em;*/
  padding: 0.3em;
}

.history-pagination-entry {
  margin: 0.15em;
  padding: 0.15em 0.3em;
/*  background-color: rgba(0, 0, 255, 0.2);*/
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.history-pagination-selected-entry {
  font-weight: bold;
  background-color: rgba(0, 0, 255, 0.2);
/*  border: 1px solid rgba(0, 0, 255, 0.0);*/
}

.viewer-section-header a {
  text-decoration: none;
  color: #1111FF;
}

.viewer-section-header a:visited {
/*  color: #2222FF;*/
  color: #1111FF;
}

.viewer-section-header a:hover {
  text-decoration: underline;
}

/*=============================
  Toolbar and translation memory
  =============================*/

/*.str-viewer-toolbar {
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 1;
  width: 100%;
  background-color: #FFCCCC;
  display: flex;
  justify-content: center;
}*/

.str-viewer-bottom-overlay {
  position: fixed;
  z-index: 3;
/*  bottom: 0px;*/
  top: 0px;
  left: 0vw;
  width: 100vw;
  display: flex;
  justify-content: center;
/*  background-color: #CCFFFF;
  background-color: rgba(204, 255, 255, 0.8);*/
}

.str-viewer-toolbar {
  
}

.str-viewer-toolbar-interior {
  width: 100vw;
/*  background-color: #CCFFCC;
  background-color: #CCFFCC;*/
/*  background-color: #CCFFCC;*/
  background-color: rgba(192, 192, 255, 1.0);
  
/*  border-top: 1px solid black;*/
  box-sizing: border-box;
/*  background-color: rgba(204, 255, 204, 0.9);*/
  display: flex;
  justify-content: center;
/*  border-bottom: 1px solid rgba(128, 128, 192, 1.0);*/
  border-bottom: 1px solid rgba(96, 96, 160, 1.0);
}

/*.str-viewer-toolbar-content {
  padding: 2px 4px 2px 4px;
  height: 24px;
  width: 80vw;
  max-width: 1280px;
  font-size: 90%;
}*/

.str-viewer-toolbar-content {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: space-between;
  width: 95vw;
  max-width: 1280px;
}

.str-viewer-toolbar-menu-base {
  vertical-align: top;
/*  width: 160px;*/
  cursor: default;
  font-size: 90%;
/*  background-color: rgba(255, 255, 255, 1.0);*/
/*  background-color: #EEFFEE;*/
/*  background-color: rgba(255, 255, 255, 0.6);*/
  background-color: rgba(224, 224, 255, 1.0);
  
/*  border: 1px dotted black;
  margin: 1px;*/
  border-left: 1px dotted black;
  border-right: 1px dotted black;
  
  min-height: 100%;
  display: flex;
  align-items: center;
  
  box-sizing: border-box;
  user-select: none;
}

.str-viewer-toolbar-menu-sub {
  position: relative;
/*  display: block;*/
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  padding: 0px 4px;
  min-height: 24px;
  
/*  width: 100%;
  height: 100%;*/
}

.str-viewer-toolbar-menu-label {
  
}

.str-viewer-toolbar-menu-base:hover, .str-viewer-toolbar-menu-base-active {
  background-color: #000000;
}

.str-viewer-toolbar-menu-base:hover .str-viewer-toolbar-menu-label, .str-viewer-toolbar-menu-base-active .str-viewer-toolbar-menu-label {
  color: #FFFFFF;
}

.str-viewer-toolbar-menu-view-content {
  display: none;
  position: absolute;
/*  min-width: 100%;*/
  z-index: 2;
/*  bottom: 21px;*/
  top: 24px;
  left: -3px;
/*  width: max-content;
  min-width: 100%;*/
  min-width: 160px;
  min-width: max-content;
  margin: 0px;
  
  box-sizing: border-box;
  border: 1px solid black;
/*  background-color: #CCFFCC;*/
  background-color: rgba(224, 224, 255, 1.0);
  border-radius: 8px;
  padding: 2px;
}

.str-viewer-toolbar-menu-view-content-interior {
  display: flex;
/*  flex-flow: column-reverse wrap;*/
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: space-between;
  /* NOTE: this does not work as desired due to browsers not implementing
     "correct" rules for horizontally expanding a flex that wraps in column mode.
     it "works", but the menu border won't expand around the buttons.
     don't squish your screen to an unreasonably tiny vertical resolution. */
  max-height: 95vh;
/*  max-height: 128px;*/
/*  background-color: #CCFFCC;*/
}

/*.str-viewer-toolbar-menu-base:hover .str-viewer-toolbar-menu-view-content {
  display: block;
}*/

.str-viewer-toolbar-menu-item {
/*  background-color: #CCFFCC;*/
  background-color: rgba(224, 224, 255, 1.0);
  padding: 2px 4px;
  width: 100%;
  
  box-sizing: border-box;
/*  border-bottom: 1px dotted black;*/
/*  border: 1px solid black;*/
  border-radius: 8px;
  user-select: none;
}

.str-viewer-toolbar-menu-item:hover {
  background-color: #000000;
  color: #FFFFFF;
}

.menu-explanation-label {
  font-size: 80%;
  font-style: italic;
/*  color: #222222;*/
  color: #444444;
  padding-left: 8px;
/*  padding-right: 8px;*/
  box-sizing: border-box;
}

.str-viewer-toolbar-menu-item:hover .menu-explanation-label {
  color: #CCCCCC;
}

.viewer-shortcut-key-label {
  font-size: 90%;
  color: #444444;
  font-weight: normal;
}

.viewer-menuopt-pair {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
/*  align-content: space-between;*/
/*  min-width: 160px;*/
}

.viewer-menuopt-namelabel {
  flex: 1 1 auto;
/*  min-width: 112px;*/
}

.viewer-menuopt-statelabel {
/*  font-size: 90%;
  color: #444444;*/
  
/*  flex: 1 1 auto;*/
/*  min-width: 80px;*/
  
  font-size: 90%;
  font-weight: bold;
}

.str-viewer-toolbar-menu-item:hover .viewer-shortcut-key-label {
  color: #CCCCCC;
}

/*.str-viewer-toolbar-menu-item:hover .viewer-menuopt-statelabel {
  color: #CCCCCC;
}*/

.viewer-menuopt-pair-view {
  width: 220px;
}

.viewer-menuopt-pair-tmem {
  width: 240px;
}

.viewer-menuopt-pair-manage {
  width: 240px;
}

.viewer-menuopt-pair-dict {
  width: 240px;
}

.str-viewer-toolbar-quicksearch-box {
  vertical-align: top;
/*  width: 160px;*/
  cursor: default;
/*  background-color: rgba(224, 224, 255, 1.0);*/
  
/*  border-left: 1px dotted black;
  border-right: 1px dotted black;*/
  
  min-height: 100%;
  display: flex;
  align-items: center;
/*  align-items: flex-end;*/
  justify-content: right;
  
  box-sizing: border-box;
  user-select: none;
  flex: 1 1 auto;
}

.quicksearch-search-button {
  box-sizing: border-box;
  border: 1px solid #888888;
  border-radius: 6px;
  font-size: 90%;
/*  color: #1111FF;*/
  
  background-color: rgba(255, 255, 255, 0.8);
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  margin: 0px 2px 1px 2px;
  padding: 0px 6px 0px 6px;
}

.quicksearch-search-button-link {
  text-decoration: none;
/*  color: #1111FF;*/
  color: #000000;
}

.quicksearch-search-button-link:hover {
/*  text-decoration: underline;*/
}

.quicksearch-search-button:hover {
/*  cursor: pointer;*/
  background-color: rgba(224, 224, 224, 0.8);
}

.quicksearch-search-input {
/*  font-size: 95%;*/
  padding: 0px;
  margin: 0px 2px 1px 2px;
}

/*.str-viewer-tmem {
  padding: 2px 4px 2px 4px;
  height: 160px;
  width: 80vw;
  max-width: 1280px;
  background-color: #CCCCFF;
  font-size: 90%;
}*/

.str-viewer-tmem-outer {
  display: flex;
  justify-content: center;
}

/*.str-viewer-tmem-fillerblock {
  flex: 1 1 auto;
}*/

.str-viewer-tmem {
  display: none;
  
  position: fixed;
  z-index: 1;
/*  bottom: 28px;*/
  bottom: 3px;
/*  left: 10vw;*/
/*  width: 80vw;*/
  width: 100%;
/*  max-width: 1024px;*/
  max-width: 1200px;
/*  height: 186px;*/
  height: 132px;
/*  background-color: #CCCCFF;*/
  background-color: rgba(204, 204, 255, 0.8);
  padding: 0px 4px;
  
  box-sizing: border-box;
/*  border: 1px solid black;*/
  border: 1px solid rgba(96, 96, 96, 0.8);
  border-radius: 4px;
}

.str-viewer-tmem:hover {
  background-color: rgba(204, 204, 255, 1.0);
  border: 1px solid rgba(96, 96, 96, 1.0);
}

.str-viewer-tmem:hover .str-viewer-tmem-view-pane {
  border-top: 1px solid rgba(96, 96, 96, 1.0);
}

.str-viewer-tmem-select-pane {
/*  height: 112px;*/
  height: 56px;
  padding: 2px;
  overflow-y: auto;
}

.str-viewer-tmem-select-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
  align-items: flex-start;
  align-content: space-between;
}

.str-viewer-tmem-select-list-item {
  margin: 1px 2px;
  padding: 2px 5px;
/*  min-width: 128px;*/
  height: 48px;
  display: flex;
  align-items: center;
  overflow: clip;
/*  border: 1px solid rgba(0, 0, 0, 0.0);*/
  border: 1px solid #888888;
  border-radius: 4px;
  background-color: #FFCCCC;
  cursor: default;
  user-select: none;
}

.str-viewer-tmem-select-list-item:hover {
  background-color: #FFFFCC;
}

.str-viewer-tmem-select-list-item-selected {
  background-color: #CCFFCC;
  border: 1px solid black;
}

.str-viewer-tmem-select-list-item-selected:hover {
  background-color: #CCFFCC;
}

.str-viewer-tmem-select-list-item-term {
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
  align-items: flex-start;
  align-content: space-between;
}

.str-viewer-tmem-select-list-item-term-num {
  font-weight: bold;
  font-size: 80%;
  min-width: 4px;
  margin-right: 4px;
/*  text-align: center;*/
}

.str-viewer-tmem-select-list-item-term-text {
  font-weight: bold;
/*  font-size: 110%;*/
}

.str-viewer-tmem-select-list-item-def {
  font-size: 90%;
  margin-left: 4px;
}

.str-viewer-tmem-view-pane {
  box-sizing: border-box;
/*  border-top: 1px solid black;*/
  border-top: 1px solid rgba(96, 96, 96, 0.8);
  height: 64px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: left;
  align-items: flex-start;
  align-content: space-between;
  padding: 2px;
}

.str-viewer-tmem-view-pane-notes {
  box-sizing: border-box;
  height: inherit;
  width: 50%;
  flex: 1 1 auto;
  font-size: 90%;
  overflow-y: auto;
  padding: 0px 5px;
  margin: 0px 4px 0px 0px;
  
/*  border: 1px solid rgba(0, 0, 0, 0.0);*/
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.7);
/*  padding: 0px 6px;*/
}

/*.str-viewer-tmem-view-pane-notes:hover {
  border: 1px solid black;
}*/

#tmem-insert-shortcut-label {
  visibility: hidden;
}

.str-viewer-tmem-view-pane-entryopt {
  box-sizing: border-box;
  height: inherit;
/*  width: 20%;*/
  font-size: 75%;
/*  padding: 0px 4px;*/
  padding: 0px 0px;
/*  border-left: 1px dashed black;*/
/*  border-left: 1px dashed rgba(96, 96, 96, 0.8);*/
  
/*  display: flex;
  align-items: center;*/
/*  max-width: 100px;*/
/*  max-width: min-content;*/
  max-width: 84px;
  
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.str-viewer-entryopt-button-link:link {
  color: white;
  text-decoration: none;
  margin: 2px;
}

.str-viewer-tmem-view-pane-entryopt-button {
  text-align: center;
  box-sizing: border-box;
  width: 80px;
  border: 1px solid rgba(0,0,0,0.0);
  padding: 3px;
  border-radius: 8px;
  font-weight: bold;
}

#str-viewer-tmem-view-pane-entryopt-button-edit {
/*  background-color: rgba(255, 255, 255, 0.8);*/
/*  background-color: #0000CC;
  background-color: #2222EE;*/
  background-color: #0077FF;
}

#str-viewer-tmem-view-pane-entryopt-button-edit:hover {
  background-color: #44BBFF;
  border: 1px solid black;
  color: #FFFF00;
}

#str-viewer-tmem-view-pane-entryopt-button-delete {
/*  background-color: #AA0000;
  background-color: #CC2222;*/
  background-color: #BB0022;
}

#str-viewer-tmem-view-pane-entryopt-button-delete:hover {
  background-color: #FF4466;
  border: 1px solid black;
  color: #FFFF00;
}

#str-viewer-tmem-view-pane-entryopt-button-new {
/*  background-color: #008800;
  background-color: #22AA22;*/
  background-color: #118800;
}

#str-viewer-tmem-view-pane-entryopt-button-new:hover {
  background-color: #55CC44;
  border: 1px solid black;
  color: #FFFF00;
}

#str-viewer-tmem-view-pane-entryopt-button-viewlist {
  background-color: #000000;
}

#str-viewer-tmem-view-pane-entryopt-button-viewlist:hover {
  background-color: #444444;
  border: 1px solid black;
  color: #FFFF00;
}

.str-viewer-tmem-view-pane-entryopt:hover {
/*  border-left: 1px dashed rgba(96, 96, 96, 1.0);*/
}

.str-viewer-tmem-view-pane-entryopt-list {
  height: inherit;
  display: flex;
  /* so let me get this straight:
     flexboxes don't expand horizontally when they automatically wrap in
     column mode...but this is actually a bug and not the intended behavior...
     but EVERY SINGLE BROWSER HAS THE SAME ISSUE.
     what?? */
/*  flex-flow: column wrap;*/
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
/*  align-content: flex-start;*/
  align-content: center;
}

/*.str-viewer-tmem-view-pane-entryopt-list > div {
  margin: 1px 6px;
  min-width: 60px;
}*/

/*.str-viewer-tmem-view-pane-entryopt-list a {
  text-decoration: none;
}*/

.str-viewer-tmem-view-pane-tmemsettings {
  box-sizing: border-box;
  height: inherit;
/*  width: 30%;*/
  font-size: 75%;
  padding: 0px 4px;
/*  border-left: 1px dashed black;*/
/*  border-left: 1px dashed rgba(96, 96, 96, 0.8);*/
  overflow: auto;
}

.str-viewer-tmem-view-pane-tmemsettings:hover {
/*  border-left: 1px dashed rgba(96, 96, 96, 1.0);*/
}

.str-viewer-tmem-view-pane-tmemsettings-list {
  height: inherit;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
/*  align-content: space-between;*/
  
/*  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 0px 6px;*/
}

.str-viewer-tmem-view-pane-tmemsettings-inner {
}

.str-viewer-tmem-entry-link {
/*  color: #4444FF;*/
  color: #2222FF;
  text-decoration: none;
  font-weight: bold;
}

.str-viewer-tmem-entry-link:hover {
  text-decoration: underline;
}

/* allows room for the translation status dropdown to fit without making
   the user scroll down after the page auto-expands */
.str-viewer-bottom-extraheightblock-status-dropdown {
  display: block;
  height: 128px;
}

.str-viewer-bottom-extraheightblock-toolbar {
  display: block;
  height: 24px;
}

.str-viewer-bottom-extraheightblock-tmem {
  display: none;
/*  height: 184px;*/
  height: 128px;
}

.tmemsettings-function-label {
  min-width: 64px;
}

/*=============================
  String viewer: dictionary
  =============================*/

.str-viewer-dict-outer {
  display: flex;
  justify-content: center;
}

/*.str-viewer-tmem-fillerblock {
  flex: 1 1 auto;
}*/

.str-viewer-dict {
  display: none;
  
  flex-flow: column nowrap;
  
  position: fixed;
  z-index: 1;
/*  bottom: 28px;*/
/*  bottom: 10vw;*/
  top: 28px;
  left: 3px;
/*  width: 80vw;
  width: 100%;*/
/*  width: 288px;*/
  width: 320px;
  max-height: calc(100vh - 31px);
/*  min-height: 256px;*/
/*  background-color: #CCCCFF;*/
/*  background-color: rgba(204, 204, 255, 0.8);*/
/*  background-color: rgba(192, 76, 0, 0.8);*/
/*  background-color: rgba(184, 104, 48, 0.90);*/
/*  background-color: rgba(216, 136, 80, 0.90);*/
/*  background-color: rgba(224, 144, 88, 0.75);*/
/*  background-color: rgba(224, 144, 88, 1.0);*/
/*  background-color: rgba(232, 160, 104, 1.0);*/
/*  background-color: rgba(232, 176, 120, 1.0);*/
  background-color: rgba(240, 192, 128, 1.0);
  opacity: 95%;
/*  padding: 0px 4px;*/
  
  box-sizing: border-box;
/*  border: 1px solid black;*/
/*  border: 1px solid rgba(96, 96, 96, 0.75);*/
  border: 1px solid rgba(96, 96, 96, 1.0);
  border-radius: 4px;
}

.str-viewer-dict:hover {
/*  background-color: rgba(224, 144, 88, 1.0);
  border: 1px solid rgba(96, 96, 96, 1.0);*/
  opacity: 100%;
}

.str-viewer-dict:hover .str-viewer-dict-srcwin {
/*  background-color: rgba(255, 255, 255, 1.0);*/
/*  background-color: rgba(0, 0, 0, 1.0);*/
/*  border: 1px solid rgba(96, 96, 96, 1.0);
  background-color: rgba(204, 255, 255, 1.0);*/
}

.str-viewer-dict:hover .str-viewer-dict-resultpane {
/*  border: 1px solid rgba(96, 96, 96, 1.0);
  background-color: rgba(255, 255, 255, 1.0);*/
}

.str-viewer-dict-srcwin {
  display: block;
  
  font-size: 90%;
  
/*  width: 90%;
  max-width: 256px;*/
  min-height: 160px;
  
/*  background-color: rgba(255, 255, 255, 0.90);*/
/*  background-color: rgba(0, 0, 0, 1.0);
  color: #FFFFFF;*/
  background-color: rgba(204, 255, 255, 1.0);
  
  padding: 3px;
  margin: 3px 3px 1px 3px;
  
  overflow-y: scroll;
  
  box-sizing: border-box;
  border: 1px solid rgba(96, 96, 96, 1.0);
  border-radius: 4px;
}

.str-viewer-dict-srcwin-texttype-none {
  margin-left: 1px;
  margin-right: 1px;
}

.str-viewer-dict-srcwin-texttypematch {
  margin-left: 1px;
  margin-right: 1px;
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 6px;
}

.str-viewer-dict-srcwin-texttype-partial {
  background-color: #EEEE00;
}

.str-viewer-dict-srcwin-texttype-complete {
  background-color: #00EE00;
}

.str-viewer-dict-srcwin-texttype-grammatical {
  background-color: #00DDFF;
}

.str-viewer-dict-srcwin-lookup-link {
  text-decoration: none;
  font-weight: bold;
  color: black;
}

/*.str-viewer-dict-srcwin-lookup-link:hover {
  text-decoration: underline;
}*/

.str-viewer-dict-searchbar {
  display: flex;
  padding: 1px 3px 1px 3px;
}

.str-viewer-dict-search-input {
  flex: 1 1 auto;
  font-size: 80%;
}

.str-viewer-dict-search-button {
  margin: 0px 2px 0px 2px;
  font-size: 80%;
}

.str-viewer-dict-clear-button {
  margin: 0px 0px 0px 0px;
  font-size: 80%;
}

.str-viewer-dict-resultpane {
  display: flex;
  flex-flow: column wrap;
  
  font-size: 90%;
  
  flex: 1 1 auto;
  
  background-color: rgba(255, 255, 255, 1.0);
  
  padding: 3px;
  margin: 1px 3px 3px 3px;
  
/*  overflow-y: scroll;*/
  
  box-sizing: border-box;
  border: 1px solid rgba(96, 96, 96, 1.0);
  border-radius: 4px;
}

.str-viewer-dict-search-resultstat {
  display: flex;
  font-size: 80%;
  margin: 1px 3px 1px 3px;
  
  
/*  justify-content: center;
  align-items: flex-start;
  align-content: space-between;*/
}

.str-viewer-dict-result-list {
  
}

.str-viewer-dict-search-result-count-panel {
  flex: 1 1 auto;
  width: 136px;
}

.str-viewer-dict-search-result-page-current-panel {
  flex: 1 1 auto;
  width: 44px;
}

.str-viewer-dict-search-result-page-prev-panel {
/*  box-sizing: border-box;
  border: 1px solid black;*/
  margin: 0px 2px 0px 2px;
}

.str-viewer-dict-search-result-page-next-panel {
/*  box-sizing: border-box;
  border: 1px solid black;*/
  margin: 0px 2px 0px 2px;
}

.str-viewer-dict-result-list {
  overflow-y: scroll;
  /* FIXME: i have no idea why this works!! */
/*  height: 1px;*/
  /* TODO: set this dynamically via javascript?
     seems to be the best option, sadly */
/*  max-height: calc(100vh - 400px);*/
  flex: 1 1 auto;
}

.str-viewer-dict-result-entry {
/*  padding: 1px 3px 1px 3px;
  margin: 1px 0px 6px 0px;*/
  padding: 2px 3px 2px 3px;
  margin: 2px 0px 2px 0px;
/*  border-top: 1px solid #888888;*/
}

.str-viewer-dict-result-entry-divider {
/*  padding: 1px 3px 1px 3px;
  margin: 1px 0px 6px 0px;*/
  border-top: 1px solid #888888;
}

.str-viewer-dict-result-headword-panel {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

.str-viewer-dict-result-headword-panel-sub {
/*  float: left;*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  margin: 0px 6px 0px 6px;
/*  min-width: max-content;*/
}

.str-viewer-dict-result-headword-panel-misc {
/*  float: left;*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  margin: 0px 6px 0px 6px;
/*  width: 64px;*/
/*  min-width: max-content;*/
}

.str-viewer-dict-result-headword {
  font-size: 140%;
  font-weight: bold;
  line-height: 140%;
}

.str-viewer-dict-result-reading {
  font-size: 85%;
  margin: 0px 6px 3px 6px;
  line-height: 120%;
}

.str-viewer-dict-result-definition {
/*  line-height: 140%;*/
  font-size: 92%;
  margin-left: 1em;
/*  text-indent: 1em;*/
}

.str-viewer-dict-result-panel-misc {
  margin-left: 0px;
/*  line-height: 120%;*/
  font-size: 80%;
}

.str-viewer-dict-result-common-span {
  font-style: italic;
  color: #555555;
}

.str-viewer-dict-result-pos {
  font-size: 80%;
  font-weight: bold;
  line-height: 140%;
  color: #555555;
}

.str-viewer-dict-result-subspan {
  margin-left: 4px;
}

.str-viewer-dict-result-stag-span {
  font-size: 85%;
  color: #555555;
}

.str-viewer-dict-result-termfield-span {
  font-size: 85%;
  color: #555555;
}

.str-viewer-dict-result-termmisc-span {
  font-size: 85%;
  color: #555555;
}

.str-viewer-dict-result-termdial-span {
  font-size: 85%;
  color: #555555;
}

.str-viewer-dict-result-termsinf-span {
  font-size: 85%;
  color: #555555;
}

.str-viewer-dict-result-otherforms-panel {
  padding: 2px 4px 2px 4px;
  line-height: 120%;
}

.str-viewer-dict-result-otherforms-span {
  font-size: 85%;
/*  font-weight: bold;*/
  color: #555555;
}

.str-viewer-dict-result-otherforms-list-item {
  font-weight: bold;
  color: #333333;
/*  margin-left: 2px;
  margin-right: 2px;*/
}

.str-viewer-dict-result-otherforms-inf {
  
}

/*=============================
  String viewer
  =============================*/

.string-viewers-outer {
  display: flex;
  justify-content: center;
}

.string-viewers {
  display: table;
}

.str-viewer {
  margin: 0px auto;
/*  padding: 1px 2px;*/
  display: table;
  
  border-radius: 16px;
  padding: 4px 8px;
}

.str-viewer-unselected {
/*  background-color: #DDDDDD;*/
  border: 1px solid hidden;
  box-sizing: border-box;
/*  border-radius: 4px;*/
}

.str-viewer-selected {
/*  background-color: #DDFFFF;*/
  border: 1px solid hidden;
  box-sizing: border-box;
/*  border-radius: 4px;*/
  
  background-color: #FFFFCC;
}
  
.str-viewer-table-outer {
/*  background-color: #AADDFF;*/
/*  background-color: #EEFFFF;*/
/*  background-color: #BBEEFF;*/
/*  background-color: #AAEEFF;*/
/*  background-color: #D8F2FF;*/
  background-color: #DFF4FF;
  border-radius: 16px;
  padding: 6px;
  box-sizing: border-box;
/*  border: 1px solid #888888;*/
  border: 2px groove #AAAAAA;
}

.str-viewer-selected .str-viewer-table-outer {
/*  background-color: #BBEEFF;*/
/*  background-color: #FFFFFF;*/
/*  background-color: #EEFFFF;*/
/*  border: 3px solid #888888;
  padding: 6px;*/
/*  background-color: #F6FDFF;*/
/*  background-color: #F4FCFF;*/
/*  background-color: #FCFCFC;*/
/*  border: 4px groove #AAAAAA;*/
  background-color: #F4FCFF;
  border: 4px groove #CCCC88;
  padding: 4px;
}

/*.str-viewer-selected .str-viewer-info-div {
  background-color: #FFCCFF;
}*/

.str-viewer-table {
  max-width: 1280px;
  border-collapse: collapse;
/*  background-color: white;*/
/*  height: 192px;*/
  height: 100%;
}

/*.str-viewer > td {
  padding: 2px;
}*/

/*.str-viewer-table > td {
  padding: 2px;
}*/

/*=====================
  String viewer: info
  =====================*/

.str-viewer-info-td {
  vertical-align: top;
  height: 100%;
/*  padding-right: 2px;
  border-right: 1px solid #666666;*/
/*  padding: 1px 2px;*/
}

/*.str-viewer-info-table {
  border-collapse: collapse;
}

.str-viewer-info-table td {
  width: 192px;
}*/

.str-viewer-info-div {
  max-width: 160px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
  align-content: space-between;
  height: 100%;
  
  margin: 0px 2px;
  border-right: 1px solid #666666;
  padding-right: 6px;
  
/*  background-color: #99DDFF;
  border-radius: 16px;
  padding: 8px;
  box-sizing: border-box;*/
  
  /* underscores are not treated as a breakable character, which is
     unfortunate because it's sometimes convenient for string IDs to use
     those rather than hyphens.
     to avoid having long IDs overflow, allow arbitrary word breaking
     in this area. */
  overflow-wrap: anywhere;
}

  /*=====
    String viewer info: id
    =====*/

  .str-viewer-info-table-strid-td {
    vertical-align: top;
    padding: 1px;
    max-width: inherit;
  }

  .str-viewer-info-table-strid-area {
    font-weight: bold;
    font-size: 80%;
  }

  .str-viewer-info-table-strid-area a {
    text-decoration: none;
  }
  
  .str-viewer-info-table-strid-area a:link,
  .str-viewer-info-table-strid-area a:visited,
  .str-viewer-info-table-strid-area a:hover,
  .str-viewer-info-table-strid-area a:active {
    color: #1111FF;
  }

  .str-viewer-info-table-strid-area a:hover {
    text-decoration: underline;
  }

  /*=====
    String viewer info: src notes
    =====*/

  .str-viewer-info-table-notes-td {
    vertical-align: top;
    flex: 1 1 auto;
    padding: 1px;
  }

  .str-viewer-info-table-notes-area {
    display: block;
    overflow-y: auto;
    font-size: 90%;
/*    min-height: 116px;*/
    min-height: 100%;
  }

  /*=====
    String viewer info: pending save display
    =====*/

  .str-viewer-info-table-pending-td {
    vertical-align: top;
    padding: 1px;
    height: 40px;
    width: 100%;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
  }

  .str-viewer-info-table-save-state-box {
    font-size: 70%;
  }

  .str-viewer-info-table-pending-area {
    color: #CC2222;
    
/*    text-align: center;*/
/*    color: #FF7700;*/
  }

  .str-viewer-info-table-saving-area {
    font-weight: bold;
    color: #888800;
  }

  .str-viewer-info-table-saved-area {
    font-weight: bold;
    color: #00AA00;
  }

  .str-viewer-info-table-server-modified-area {
    font-weight: bold;
    color: #00AAAA;
  }
  
/*  .str-viewer-info-table-pending-link {
    margin-right: 1.0em;
  }
  
  .str-viewer-info-table-pending-link:link,
  .str-viewer-info-table-pending-link:visited,
  .str-viewer-info-table-pending-link:hover,
  .str-viewer-info-table-pending-link:active {
    color: #2222CC;
  }*/
  
  .str-viewer-info-table-pending-linkbuttons {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
/*    align-content: space-between;*/
  }
  
  .str-viewer-info-table-pending-link:link {
    color: white;
    text-decoration: none;
    margin: 2px;
    user-select: none;
  }

  .str-viewer-info-table-pending-button {
    text-align: center;
    box-sizing: border-box;
    width: 60px;
    border: 1px solid rgba(0,0,0,0.0);
    padding: 0px 3px;
    border-radius: 8px;
    font-weight: bold;
  }

  .str-viewer-info-table-pending-button:hover {
    color: #FFFF00;
    border: 1px solid #000000;
  }

  .str-viewer-info-table-pending-button-save {
  /*  background-color: rgba(255, 255, 255, 0.8);*/
  /*  background-color: #0000CC;
    background-color: #2222EE;*/
    background-color: #0077FF;
  }

  .str-viewer-info-table-pending-button-save:hover {
    background-color: #44BBFF;
  }

  .str-viewer-info-table-pending-button-cancel {
/*    background-color: #FF7700;*/
    background-color: #CC2222;
  }

  .str-viewer-info-table-pending-button-cancel:hover {
/*    background-color: #FFBB44;*/
    background-color: #FF6666;
  }

  /*=====
    String viewer info: status
    =====*/

  .str-viewer-info-table-status-td {
    vertical-align: top;
    width: 160px;
    padding: 1px;
  }

  .str-viewer-info-table-status-td:hover {
/*    background-color: #222222;*/
  }

  .str-viewer-info-table-status-area {
    position: relative;
    display: block;
  }
  
  .str-viewer-info-table-status-dropdown-content {
    display: none;
    position: absolute;
    min-width: 100%;
    z-index: 2;
  }
  
  .str-viewer-info-table-status-dropdown-content-interior {
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: space-between;
    max-height: 128px;
    
/*    border: 1px solid #888888;*/
    border-radius: 4px;
/*    background-color: #AAAAAA;*/
    background-color: rgba(0, 0, 0, 0.3);
    padding: 1px;
  }

  .str-viewer-info-table-status-td:hover .str-viewer-info-table-status-dropdown-content {
    display: block;
  }

  .str-viewer-info-table-status-td:hover .str-viewer-status-item {
    border: 1px solid white;
    background-color: #444444;
    color: white;
  }
  
  .str-viewer-status-dropdown-item:hover {
    border: 1px solid white;
    background-color: #CCCCCC;
    color: black;
  }
  
  .str-viewer-nodisp {
    display: none;
  }
  
  .str-viewer-info-table-status-area-untranslated {
    font-weight: bold;
    background-color: #FFCCCC;
    padding: 3px 5px;
    border: 1px dotted black;
    cursor: default;
    box-sizing: border-box;
    width: 100%;
    border-radius: 4px;
    user-select: none;
  }
  
  .str-viewer-info-table-status-area-translated {
    font-weight: bold;
    background-color: #CCFFCC;
    padding: 3px 5px;
    border: 1px dotted black;
    cursor: default;
    box-sizing: border-box;
    width: 100%;
    border-radius: 4px;
    user-select: none;
  }
  
  .str-viewer-info-table-status-area-review {
    font-weight: bold;
    background-color: #FFCC88;
    padding: 3px 5px;
    border: 1px dotted black;
    cursor: default;
    box-sizing: border-box;
    width: 100%;
    border-radius: 4px;
    user-select: none;
  }
  
  .str-viewer-info-table-status-area-duplicate {
    font-weight: bold;
    background-color: #CCFFFF;
    padding: 3px 5px;
    border: 1px dotted black;
    cursor: default;
    box-sizing: border-box;
    width: 100%;
    border-radius: 4px;
    user-select: none;
  }

/*=====================
  String viewer: prefix
  =====================*/

.str-viewer-prefix-td {
  width: 96px;
  height: 100%;
}

/*.str-viewer-prefix-table {
  height: 100%;
}*/

.str-viewer-prefix-div {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
  align-content: space-between;
  height: 100%;
  margin: 0px 2px;
}

  /*=====
    String viewer prefix: src
    =====*/

  .str-viewer-prefix-table-src-td {
    vertical-align: bottom;
    padding: 1px;
    min-height: 104px;
  }

  .str-viewer-prefix-table-src-area {
    overflow-y: auto;
    font-size: 90%;
/*    min-height: 96px;*/
    min-height: 28px;
    
/*    margin: 0px 2px;
    padding: 2px 5px;
    border: 1px solid #777777;
    box-sizing: border-box;
    background-color: #EFFAFF;
    border-radius: 4px;*/
    
    white-space: pre-wrap;
  }

  /*=====
    String viewer prefix: dst
    =====*/

  .str-viewer-prefix-table-dst-td {
    vertical-align: top;
    padding: 1px;
    flex: 1 1 auto;
  }

  .str-viewer-prefix-table-dst-area {
    resize: none;
    height: 96px;
    width: 96px;
  }

/*=====================
  String viewer: suffix
  =====================*/

.str-viewer-suffix-td {
  width: 32px;
  height: 100%;
}

/*.str-viewer-suffix-table {
  height: 100%;
}*/

.str-viewer-suffix-div {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
  align-content: space-between;
  height: 100%;
  margin: 0px 2px;
}

  /*=====
    String viewer suffix: src
    =====*/

  .str-viewer-suffix-table-src-td {
    vertical-align: bottom;
    padding: 1px;
    min-height: 104px;
  }

  .str-viewer-suffix-table-src-area {
    overflow-y: auto;
    font-size: 90%;
/*    min-height: 96px;*/
    min-height: 28px;
    
/*    margin: 0px 2px;
    padding: 2px 5px;
    border: 1px solid #777777;
    box-sizing: border-box;
    background-color: #EFFAFF;
    border-radius: 4px;*/
    
    white-space: pre-wrap;
  }

  /*=====
    String viewer suffix: dst
    =====*/

  .str-viewer-suffix-table-dst-td {
    vertical-align: top;
    padding: 1px;
    flex: 1 1 auto;
  }

  .str-viewer-suffix-table-dst-area {
    resize: none;
    height: 96px;
    width: 32px;
  }

/*=====================
  String viewer: content
  =====================*/

.str-viewer-content-td {
  width: 320px;
  height: 100%;
}

.str-viewer-content-div {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
  align-content: space-between;
  height: 100%;
  margin: 0px 2px;
}

  /*=====
    String viewer content: src
    =====*/

  .str-viewer-content-table-src-td {
    vertical-align: bottom;
    padding: 1px;
    min-height: 104px;
  }

  .str-viewer-content-table-src-area {
    overflow-y: auto;
    font-size: 90%;
    width: 320px;
/*    min-height: 96px;*/
    min-height: 20px;
    
    margin: 0px 2px;
    padding: 4px 5px;
    border: 1px solid #777777;
    box-sizing: border-box;
/*    background-color: #EFFAFF;*/
/*    background-color: #CFFAFF;*/
/*    background-color: #BFFAFF;*/
    background-color: #CCFFFF;
    border-radius: 4px;
    
    white-space: pre-wrap;
  }

  /*=====
    String viewer content: dst
    =====*/

  .str-viewer-content-table-dst-td {
    vertical-align: top;
    padding: 1px;
    flex: 1 1 auto;
  }

  .str-viewer-content-table-dst-area {
    resize: none;
    height: 96px;
/*    max-height: 80vh;*/
    width: 320px;
  }

/*=====================
  String viewer: preview
  =====================*/

.str-viewer-preview-td {
  width: 340px;
  height: 100%;
  vertical-align: top;
}

.str-viewer-preview-div {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
  align-content: space-between;
/*  height: 100%;*/
    height: 100%;
  margin: 0px 2px;
}

  /*=====
    String viewer preview: content
    =====*/

  .str-viewer-preview-table-td {
    vertical-align: top;
    flex: 1 1 auto;
    padding: 1px;
  }

  .str-viewer-preview-table-area {
/*    white-space: nowrap;*/
/*    overflow-x: scroll;*/
    overflow-y: auto;
    font-size: 90%;
/*    height: 192px;*/
/*    background-color: black;
    color: white;
    font-weight: bold;*/
    
    /* oh, a property that would solve my problem?
       not implemented, naturally */
/*    min-height: 1lh;*/
/*    height: 100%;*/
    min-height: 20px;
    width: 340px;
    margin: 0px 2px;
    padding: 4px 5px;
    border: 1px solid #777777;
    box-sizing: border-box;
/*    background-color: rgba(255, 255, 255, 0.5);*/
/*    background-color: #EFFAFF;*/
/*    background-color: #DFFFF4;*/
    background-color: #CCFFCC;
    border-radius: 4px;
/*    color: #222222;*/
    
    white-space: pre-wrap;
  }

/*=====================
  String viewer: notes
  =====================*/

.str-viewer-notes-td {
  width: 256px;
  height: 100%;
}

.str-viewer-notes-div {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
  align-content: space-between;
  height: 100%;
  
  margin: 0px 2px;
  border-left: 1px solid #666666;
  padding-left: 6px;
}

  /*=====
    String viewer notes: note
    =====*/

  .str-viewer-notes-table-note-td {
    vertical-align: top;
    padding: 1px;
    flex: 1 1 auto;
  }

  .str-viewer-notes-table-note-area {
/*    min-height: 160px;*/
    min-height: 100%;
/*    max-height: 160px;*/
/*    height: 180px;*/
    width: 256px;
    overflow-y: auto;
    font-size: 85%;
  }

  /*=====
    String viewer notes: toolbar
    =====*/

  .str-viewer-notes-table-tool-td {
    vertical-align: top;
    padding: 1px;
  }

  .str-viewer-notes-table-tool-area {
    font-size: 70%;
/*    height: 24px;*/
/*    visibility: hidden;*/
    display: none;
  }
  
  .str-viewer-tool-entry {
    margin-left: 4px;
    margin-right: 4px;
  }

/*.test {
  height: 96px;
  display: block;
  overflow-wrap: normal;
  overflow-x: scroll;
  white-space: nowrap;
}*/

.std-modal-bg {
  display: none;
  position: fixed;
  z-index: 4;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.std-modal-interior {
  background-color: #FFFFFF;
/*  margin: 15vh auto;*/
  padding: 24px;
  border: 1px solid #888;
/*  width: 80%;*/
  max-width: 640px;
/*  height: 70%;*/
  border-radius: 10px;
}



.modal-msg {
/*  display: flex;*/
  justify-content: center;
  align-items: center;
}

.modal-msg-interior {
/*  background-color: #FFFFFF;
  padding: 24px;
  border: 1px solid #888;
  max-width: 640px;
  max-height: 70%;
  border-radius: 10px;*/
  
  background-color: #FFFFFF;
  padding: 16px 32px 0px 32px;
  border: 1px solid #888;
  max-width: 640px;
  max-height: 70%;
  border-radius: 10px;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}

.modal-msg-content {
  overflow: auto;
/*  height: 95%;*/
  width: 100%;
  padding: 0px 0px;
  flex: 1 1 auto;
}

.modal-msg-close {
  margin: 8px 0px;
  display: flex;
  justify-content: center;
}



.modal-confirm {
/*  display: flex;*/
  justify-content: center;
  align-items: center;
}

.modal-confirm-interior {
/*  background-color: #FFFFFF;
  margin: 15vh auto;
  padding: 24px;
  border: 1px solid #888;
  width: 40%;
  max-width: 640px;
  height: 70%;
  border-radius: 10px;*/
  
  background-color: #FFFFFF;
  padding: 16px 32px 0px 32px;
  border: 1px solid #888;
  max-width: 640px;
  max-height: 70%;
  border-radius: 10px;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}

.modal-confirm-content {
  overflow: auto;
/*  height: 95%;*/
  width: 100%;
  padding: 0px 0px;
  flex: 1 1 auto;
}

.modal-confirm-yes-link:link {
  color: #DDDDFF;
  text-decoration: none;
}

.modal-confirm-yes {
  font-weight: bold;
  background-color: #0000CC;
  padding: 4px 16px;
  border-radius: 8px;
  
  margin: 2px;
}

.modal-confirm-actionlist {
  margin: 8px 0px;
}



.modal-dupeedit {
/*  display: flex;*/
  justify-content: center;
  align-items: center;
}

.modal-dupeedit-interior {
  background-color: #FFFFFF;
/*  margin: 15vh auto;*/
  padding: 4px 16px;
  border: 1px solid #888;
/*  width: 40%;*/
  max-width: 480px;
/*  max-width: 40%;*/
/*  height: 70%;*/
  max-height: 80%;
  border-radius: 10px;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}

.modal-dupeedit-content {
  overflow: auto;
/*  height: 95%;*/
  width: 100%;
  flex: 1 1 auto;
}

.modal-dupeedit-content h2 {
  margin: 16px 16px 8px 16px;
}

.modal-dupeedit-content h3 {
  margin: 16px 16px 8px 16px;
}

.modal-dupeedit-save-link:link {
  color: #DDDDFF;
  text-decoration: none;
}

.modal-dupeedit-save {
  font-weight: bold;
  background-color: #0000CC;
  padding: 4px 16px;
  border-radius: 8px;
  
  margin: 2px;
}

.modal-dupeedit-form-subsection {
  margin: 0px 24px;
}

.modal-dupeedit-actionlist {
  margin: 8px 0px;
}



.modal-notesedit {
/*  display: flex;*/
  justify-content: center;
  align-items: center;
}

.modal-notesedit-interior {
  background-color: #FFFFFF;
/*  margin: 25vh auto;*/
  padding: 4px 32px;
  border: 1px solid #888;
  max-width: 800px;
  max-width: 70%;
  max-height: 80%;
  border-radius: 10px;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}

.modal-notesedit-content {
  overflow: auto;
/*  height: 95%;*/
/*  width: 100%;*/
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.modal-notesedit-content h2 {
/*  display: flex;
  justify-content: center;*/
}

.modal-notesedit-save-link:link {
  color: #DDDDFF;
  text-decoration: none;
}

.modal-notesedit-save {
  font-weight: bold;
  background-color: #0000CC;
  padding: 4px 16px;
  border-radius: 8px;
  
  margin: 2px;
}

.modal-notesedit-area {
  resize: none;
  height: 320px;
  width: 480px;
  max-width: 70vw;
  margin: 16px;
}

.modal-notesedit-actionlist {
  margin: 8px 0px;
}



.modal-history {
/*  display: flex;*/
  justify-content: center;
  align-items: center;
}

.modal-history-interior {
  background-color: #FFFFFF;
/*  margin: 15vh auto;*/
  padding: 4px 32px;
  border: 1px solid #888;
/*  width: 40%;*/
  width: 640px;
/*  height: 70%;*/
  max-width: 70%;
/*  min-height: 480px;*/
  height: 70%;
  border-radius: 10px;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}

.modal-history-content {
  overflow: auto;
/*  height: 85%;*/
  width: 100%;
  padding: 0px 24px;
  flex: 1 1 auto;
}

.modal-history-actionlist {
  margin: 8px 0px;
}



.modal-tmemupdate {
/*  display: flex;*/
  justify-content: center;
  align-items: center;
}

.modal-tmemupdate-interior {
  background-color: #FFFFFF;
/*  margin: 15vh auto;*/
  padding: 16px 32px 0px 32px;
  border: 1px solid #888;
/*  width: 40%;*/
/*  width: 640px;*/
/*  height: 70%;*/
  max-height: 80%;
  border-radius: 10px;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}

.modal-tmemupdate-content {
  overflow: auto;
/*  height: 95%;*/
  width: 100%;
  padding: 0px 0px;
  flex: 1 1 auto;
  max-width: 480px;
}

.modal-tmemupdate-save-link:link {
  color: #DDDDFF;
  text-decoration: none;
}

.modal-tmemupdate-save {
  font-weight: bold;
  background-color: #0000CC;
  padding: 4px 16px;
  border-radius: 8px;
  
  margin: 2px;
}

.modal-tmemupdate-form-subsection {
  margin: 0px 24px;
}

.tmemupdate-notes-area {
  resize: none;
  height: 160px;
  width: 400px;
  max-width: 70vw;
}

.modal-tmemupdate-actionlist {
  margin: 8px 0px;
}



.modal-tmemcontents {
/*  display: flex;*/
  justify-content: center;
  align-items: center;
}

.modal-tmemcontents-interior {
/*  background-color: #FFFFFF;
  margin: 5vh auto;
  padding: 24px;
  border: 1px solid #888;
  width: 70%;
  height: 80vh;
  border-radius: 10px;*/
  
  background-color: #FFFFFF;
/*  margin: 15vh auto;*/
  padding: 4px 32px 0px 32px;
  border: 1px solid #888;
  min-width: 480px;
/*  max-width: 800px;*/
/*  width: 70%;*/
  height: 80%;
  border-radius: 10px;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}

.modal-tmemcontents-content {
  overflow: auto;
/*  height: 95%;*/
  width: 100%;
/*  padding: 0px 0px;*/
  flex: 1 1 auto;
}

.modal-tmemcontents-add-link:link {
/*  color: #DDDDFF;*/
  color: white;
  text-decoration: none;
}

.modal-tmemcontents-add {
  font-weight: bold;
  background-color: #008800;
  padding: 4px 16px;
  border-radius: 8px;
  
  box-sizing: border-box;
/*  border: 1px solid black;*/
  
  margin: 2px;
}

.modal-tmemcontents-edit-link:link {
/*  color: #DDDDFF;*/
  color: white;
  text-decoration: none;
}

.modal-tmemcontents-edit {
  font-weight: bold;
  background-color: #0000CC;
  padding: 4px 16px;
  border-radius: 8px;
  
  box-sizing: border-box;
/*  border: 1px solid black;*/
  
  margin: 2px;
}

.modal-tmemcontents-delete-link:link {
/*  color: #DDDDFF;*/
  color: white;
  text-decoration: none;
}

.modal-tmemcontents-delete {
  font-weight: bold;
  background-color: #AA0000;
  padding: 4px 16px;
  border-radius: 8px;
  
  box-sizing: border-box;
/*  border: 1px solid black;*/
  
  margin: 2px;
}

.modal-tmemcontents-actionlist {
  margin: 8px 0px;
}

.modal-tmemcontents-form-subsection {
  margin: 0px 24px;
}

.modal-tmemcontents-entry-table {
  margin: 0 auto;
  border-collapse: collapse;
}

.modal-tmemcontents-entry-table td {
  padding: 4px;
  border: 1px solid black;
}

.modal-tmemcontents-term-cell {
  max-width: 200px;
}

.modal-tmemcontents-def-cell {
  max-width: 200px;
}

.modal-tmemcontents-notes-cell {
  max-width: 400px;
}



.modal-editwrapprops {
/*  display: flex;*/
  justify-content: center;
  align-items: center;
}

.modal-editwrapprops-interior {
  background-color: #FFFFFF;
/*  margin: 15vh auto;*/
  padding: 16px 16px 0px 16px;
  border: 1px solid #888;
/*  width: 40%;*/
/*  width: 640px;*/
/*  height: 70%;*/
  max-height: 90%;
  border-radius: 10px;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}

.modal-editwrapprops-content {
  overflow: auto;
/*  height: 95%;*/
  width: 100%;
  padding: 0px 32px;
  flex: 1 1 auto;
  max-width: 640px;
}

.modal-editwrapprops-save-link:link {
  color: #DDDDFF;
  text-decoration: none;
}

.modal-editwrapprops-save {
  font-weight: bold;
  background-color: #0000CC;
  padding: 4px 16px;
  border-radius: 8px;
  
  margin: 2px;
}

.modal-editwrapprops-form-subsection {
  margin: 0px 24px;
}

.modal-editwrapprops-actionlist {
  margin: 8px 0px;
}

.bg-transparent-on-hover {
  background-color: black;
  color: black;
}

.bg-transparent-on-hover:hover {
  background-color: rgba(0,0,0,0.0);
}