@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic);
/*@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext);*/
/*@import 'https://fonts.googleapis.com/css?family=Pattaya|Petit+Formal+Script';*/
/*@import 'https://fonts.googleapis.com/css?family=Pattaya|Courgette';*/
/*@import 'https://fonts.googleapis.com/css?family=Alex+Brush|Allura|Clicker+Script|Cormorant+Upright:400,700|Courgette|Great+Vibes|Italianno|Kaushan+Script|Lemonada:400,700|Lobster|Marck+Script|Mogra|Niconne|Oleo+Script+Swash+Caps:400,700|Pattaya|Petit+Formal+Script|Playball|Sacramento|Shrikhand';*/
@font-face {
  font-family: 'Charis SIL';
  src: url('../fonts/charis-sil/hinted-CharisSIL.eot');
  src: url('../fonts/charis-sil/hinted-CharisSIL.eot?#iefix') format('embedded-opentype'), url('../fonts/charis-sil/hinted-CharisSIL.woff2') format('woff2'), url('../fonts/charis-sil/hinted-CharisSIL.woff') format('woff'), url('../fonts/charis-sil/hinted-CharisSIL.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Charis SIL';
  src: url('../fonts/charis-sil/hinted-CharisSIL-Italic.eot');
  src: url('../fonts/charis-sil/hinted-CharisSIL-Italic.eot?#iefix') format('embedded-opentype'), url('../fonts/charis-sil/hinted-CharisSIL-Italic.woff2') format('woff2'), url('../fonts/charis-sil/hinted-CharisSIL-Italic.woff') format('woff'), url('../fonts/charis-sil/hinted-CharisSIL-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Charis SIL';
  src: url('../fonts/charis-sil/hinted-CharisSIL-BoldItalic.eot');
  src: url('../fonts/charis-sil/hinted-CharisSIL-BoldItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/charis-sil/hinted-CharisSIL-BoldItalic.woff2') format('woff2'), url('../fonts/charis-sil/hinted-CharisSIL-BoldItalic.woff') format('woff'), url('../fonts/charis-sil/hinted-CharisSIL-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Charis SIL';
  src: url('../fonts/charis-sil/hinted-CharisSIL-Bold.eot');
  src: url('../fonts/charis-sil/hinted-CharisSIL-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/charis-sil/hinted-CharisSIL-Bold.woff2') format('woff2'), url('../fonts/charis-sil/hinted-CharisSIL-Bold.woff') format('woff'), url('../fonts/charis-sil/hinted-CharisSIL-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
/*
 XXX: changes to this file only apply if we run the SelectPortalTheme.ps1 script
      which copies the source file to ITJakub.Colors-selected.less
TODO: maybe we could symlink instead?
*/
/* https://coolors.co/4c6b4b */
/* #6b4b6c */
html {
  font-size: 14px;
}
body,
.itj-notes {
  font-family: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: initial;
}
.form-control {
  height: 32px;
  color: #000;
  /*border: none;*/
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  border-radius: 0;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: initial;
  opacity: 1;
  background-color: #4c5b5b;
}
.btn-default,
.bootbox .btn-primary {
  border-color: initial;
  border: none;
  font-weight: bold;
  color: #fff;
  background-color: #4c5b5b;
  border-radius: 0;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default,
.btn-check:checked + .btn {
  color: #ffffff;
  background-color: #637676;
  border-color: initial;
}
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
  color: #ffffff;
  background-color: #637676;
  border-color: initial;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: #4c5b5b;
  border-color: initial;
  opacity: 0.65;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: initial;
  background-color: initial;
}
.nav-pills > li {
  /*
    margin-right: 1rem;
    margin-bottom: .5rem;
    */
  display: inline-block;
}
.nav-pills > li > a {
  border-radius: initial;
}
.nav-pills > li + li {
  margin-left: initial;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  /*color: initial;*/
  background-color: initial;
  /* opacity: .5; */
}
DISABLED.nav-pills > li.active > a > span:not([class]) {
  /*
     XXX: the dimmed appearance was (reported to be) ambiguous so let’s make it
          more obvious what tab (search type) we’re on
     XXX: now this is no longer used and will be removed
    */
  text-decoration: underline;
}
.navbar {
  margin: 0 auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
@media (min-width: 768px) {
  .navbar-header {
    float: initial;
  }
}
@media (min-width: 1240px) {
  .navbar-header {
    float: left;
  }
}
.navbar-collapse {
  position: absolute;
  top: 52px;
  background-color: #4c6b4b;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  width: 100%;
}
.navbar-collapse.in {
  overflow-y: initial;
}
@media (min-width: 768px) {
  .navbar-collapse {
    border-top: initial;
    overflow-x: visible;
  }
  .navbar-collapse.collapse {
    display: none !important;
    height: initial;
    padding-bottom: initial;
    overflow: initial;
  }
  .navbar-collapse.in {
    overflow-y: initial !important;
    display: block !important;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
  }
}
@media (min-width: 1240px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    position: static;
  }
  .navbar-collapse.collapse {
    display: inline-block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }
}
.navbar-toggle .icon-bar {
  border-radius: initial;
}
@media (min-width: 768px) {
  .navbar-toggle {
    display: initial;
  }
}
@media (min-width: 1240px) {
  .navbar-toggle {
    display: none;
  }
}
@media (min-width: 768px) {
  .navbar-right {
    margin-right: initial;
    display: initial;
  }
}
.navbar-inverse {
  background-color: #4c6b4b;
  border-color: initial;
  border: none;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: initial;
  border: none;
}
.pagination > li > a,
.pagination > li > span {
  color: #4c5b5b;
  border-color: #637676;
  border-color: #4c5b5b;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  border-top-left-radius: initial;
  border-bottom-left-radius: initial;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: initial;
  border-bottom-right-radius: initial;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: #637676;
  border-color: initial;
  opacity: 1;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  border-color: #637676;
  border-color: #4c5b5b;
  background-color: #4c5b5b;
}
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  opacity: 1;
  color: #fff;
  cursor: pointer;
  border-color: #637676;
  background-color: #637676;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  border-color: #4c5b5b;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-top-left-radius: initial;
  border-bottom-left-radius: initial;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-top-right-radius: initial;
  border-bottom-right-radius: initial;
}
.badge {
  color: #333;
  background-color: #fff;
}
.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
  color: #333;
}
.nav-pills > li > a > .badge {
  margin-left: 0.2rem;
  margin-top: -2px;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
  border-radius: 0;
}
.input-group > .input-group-btn > .btn {
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
}
.input-group > .input-group-btn > .btn:hover {
  background-color: #e6e6e6;
  border-color: #adadad;
}
.input-group > .input-group-btn > .btn.disabled:hover {
  background-color: #fff;
  border-color: #dedede;
  color: #8f8f8f;
}
.input-group-btn > .btn {
  height: 32px;
}
.input-sm {
  height: 30px;
}
.alert,
.panel,
.panel-group .panel {
  border-radius: 0;
}
.tab-content {
  padding-top: 1rem;
}
.popover {
  border-radius: 2px;
}
.popover-title {
  border-radius: 1px 1px 0 0;
}
.modal-content {
  border-radius: 2px;
}
.breadcrumb {
  border-radius: 0;
  background-color: #e6efe6;
}
.list-group-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.list-group-item:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: #4c6b4b;
  border-color: #4c6b4b;
}
.dropdown-menu {
  border-radius: 0;
}
/* XXX: perhaps Bootstrap should be updated or something but "user agents" (browsers)
        now add dotted underline with text-decoration, while Bootstrap adds it
        with a bottom border... (which allows it to use grey dots but...)
https://stackoverflow.com/questions/26276556/remove-underlining-caused-by-abbr-tag */
abbr[title] {
  /* Disable the Bootstrap-provided dots. XXX: Or keep them and ditch browser-provided
       dots which are too close to letters and black? Well, the bottom-border
       approach gets/puts the dots too far for a change... */
  border-bottom: 0;
  /* text-decoration: none; */
}
/* Don't underline abbrevs in tooltips at all since they cannot be hovered over
   (unless made to stay shown). */
div.tooltip abbr[title] {
  text-decoration: none;
}
/* Override Bootstrap's default white-on-black style. */
.tooltip-inner {
  background-color: white;
  color: black;
  border: 1px solid #388e3c;
}
.tooltip.in {
  opacity: 1;
}
.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.mt-3 {
  margin-top: 1rem !important;
}
.me-1 {
  margin-right: 0.25rem !important;
}
.me-2 {
  margin-right: 0.5rem !important;
}
.btn-check {
  display: none;
}
svg.bi {
  vertical-align: middle;
}
/*
 XXX: currently, regular text gets a relative 120% size, whereas headings get
      some absolute sizes from an old Bootstrap 3.x
TODO: after upgrading to Bootstrap 4.x and 5.x, which define default font size
      as 16px (different from 3.x) we might remove the 120% size increase on
      regular text and hopefully be able to drop even these adjustments – while
      somehow recalibrating the whole look to resemble the old (current) but
      hopefully with less custom code… right?
 XXX: error messages use h4 for some reason so let’s not apply bold to everything…
*/
.reader-text h4,
.text-content h4 {
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
}
.centered {
  align-content: center;
  vertical-align: middle;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.feedback-field-validation-error {
  margin: 5px 2px;
  font-weight: bold;
}
.style-button {
  border-radius: 0;
  background-color: #84CED7;
  color: white;
}
.error {
  color: #B84442;
}
.inline-alert {
  margin-bottom: 0;
  padding: 6px 12px;
}
.true-inline-alert {
  margin-bottom: 0;
  padding: 6px 12px;
  display: inline-block;
  margin: 0 10px 0 10px;
  vertical-align: bottom;
}
.alert h2 {
  margin-top: 0;
}
.static-text-container ul {
  display: block;
  list-style: disc;
  margin-left: 0;
  margin-top: 0;
  margin-right: 0;
}
.static-text-panel {
  float: right;
  margin-left: 10px;
  margin-bottom: 6px;
}
.loading {
  background: url(../images/loading.gif) no-repeat center;
}
.loading-small-inline,
.loading-small-button,
.loading-small-menu {
  width: 20px;
  display: inline-block;
}
.loading-small-inline::before,
.loading-small-button::before,
.loading-small-menu::before {
  content: "";
  display: inline-block;
}
.loading-small-inline {
  background: url(../images/small_trans_loading.gif) no-repeat center;
}
.loading-small-button {
  background: url(../images/small_brown_loading.gif) no-repeat center;
}
.loading-small-menu {
  background: url(../images/small_green_loading.gif) no-repeat center;
}
.version-info {
  margin-top: 30px;
  font-size: 80%;
}
.input-group-vertical .form-control {
  border-radius: 0;
}
.bottom-pagination {
  text-align: center;
}
.pagination-input input {
  border-color: #4c5b5b;
}
.pagination-input.input-group > .input-group-btn > .btn {
  border-color: #4c5b5b;
  background-color: #4c5b5b;
  color: white;
}
.pagination-input.input-group > .input-group-btn > .btn:hover {
  border-color: #637676;
  background-color: #637676;
}
.top-notification {
  position: fixed;
  top: 1px;
  z-index: 2000;
}
#loginForm input[type=checkbox] {
  margin-left: 0;
}
/* Hierarchical list (Bootstrap) using indent */
.list-group.list-group-root {
  padding: 0;
  overflow: hidden;
  min-height: 20px;
  margin-bottom: 20px;
  border: 1px solid #e3e3e3;
  border-radius: 0px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.list-group.list-group-root .list-group {
  margin-bottom: 0;
}
.list-group.list-group-root .list-group-item {
  border-radius: 0;
  border-width: 1px 0 0 0;
}
.list-group.list-group-root > .list-group-item:first-child {
  border-top-width: 0;
}
.list-group.list-group-root > .list-group > .list-group-item {
  padding-left: 35px;
}
.list-group.list-group-root > .list-group > .list-group > .list-group-item {
  padding-left: 55px;
}
/* Fix Dropzone default style */
.dropzone .dz-preview .dz-details img,
.dropzone-previews .dz-preview .dz-details img {
  position: absolute;
  top: 0;
  left: 0;
}
.dropzone .dz-preview .dz-details .dz-size,
.dropzone-previews .dz-preview .dz-details .dz-size {
  position: absolute;
  bottom: -28px;
  left: 3px;
}
.dropzone .dz-preview .dz-error-message,
.dropzone-previews .dz-preview .dz-error-message {
  position: absolute;
  top: -5px;
  left: -20px;
}
.light-border {
  border: 1px solid #ddd;
  padding: 1rem;
}
label input ~ * {
  font-weight: normal;
}
.form-group-section {
  margin-bottom: 20px;
}
.saving-form .form-group {
  margin-bottom: 5px;
}
.mirror-inverse {
  transform: rotateY(180deg);
}
.text-as-form-control {
  display: block;
  padding-top: 7px;
}
@media print {
  .pagination > .active > a {
    border-color: #d60000 !important;
  }
}
#main-plugins-menu span,
#main-plugins-menu a {
  margin: 0;
  padding: 0;
  position: relative;
  display: block;
}
#main-plugins-menu > ul > li > a > span {
  text-align: center;
  vertical-align: middle;
  /* XXX: does the navbar have to become higher on a Full HD screen? */
  height: 40px;
  display: table-cell;
}
@media screen and (max-width: 1570px) {
  #main-plugins-menu > ul > li > a > span {
    height: auto;
  }
}
#main-plugins-menu li {
  margin: 0;
  padding: 0;
  display: block;
  font-weight: 600;
}
#main-plugins-menu .has-sub {
  position: relative;
}
#main-plugins-menu .active {
  background-color: #60885e;
}
#main-plugins-menu {
  line-height: 1;
  display: inline-block;
  float: left;
  margin-left: 1rem;
}
@media screen and (max-width: 1570px) {
  #main-plugins-menu {
    margin-left: 0;
  }
}
#main-plugins-menu:after,
#main-plugins-menu ul:after {
  content: '';
  display: block;
  clear: both;
}
#main-plugins-menu a {
  color: black;
  display: block;
  padding: 5px 15px;
  text-decoration: none;
}
#main-plugins-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
#main-plugins-menu > ul > li {
  display: inline-block;
  float: left;
  margin: 0;
  height: 100%;
}
#main-plugins-menu.align-center {
  text-align: center;
}
#main-plugins-menu.align-center > ul > li {
  float: none;
}
#main-plugins-menu.align-center ul ul {
  text-align: left;
}
#main-plugins-menu.align-right > ul {
  float: right;
}
#main-plugins-menu.align-right ul ul {
  text-align: right;
}
#main-plugins-menu > ul > li > a {
  color: white;
  font-size: 16px;
  background-position: center bottom 0.1rem;
  background-repeat: no-repeat;
  background-size: 10px;
  vertical-align: middle;
  padding: 1.2rem 0.5rem;
}
@media screen and (max-width: 1570px) {
  #main-plugins-menu > ul > li > a {
    padding: 1.5rem 0.6rem;
  }
}
#main-plugins-menu > ul > li:hover:after,
#main-plugins-menu > ul > li.hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  margin-left: -10px;
}
#main-plugins-menu > ul > li.active > a,
#main-plugins-menu > ul > li.active:hover > a,
#main-plugins-menu > ul > li.active.hover > a {
  background-color: transparent;
}
#main-plugins-menu > ul > li:hover > a,
#main-plugins-menu > ul > li.hover > a {
  background-color: #60885e;
}
#main-plugins-menu > ul > li.has-sub:hover > a,
#main-plugins-menu > ul > li.has-sub.hover > a {
  background-image: url("../images/glyphs/glyphicons_chevron_white.png");
}
#main-plugins-menu > ul > li:hover,
#main-plugins-menu > ul > li.hover {
  z-index: 10;
}
#main-plugins-menu > ul > li > ul > li.active > a {
  /* TODO: rather use lighter background to indicate this is the page we’re on? */
  color: black;
}
#main-plugins-menu .has-sub:hover > ul,
#main-plugins-menu .has-sub.hover > ul {
  display: block;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
#main-plugins-menu .has-sub.active:hover > ul,
#main-plugins-menu .has-sub.active.hover > ul {
  display: block;
  border: none;
}
#main-plugins-menu .has-sub ul {
  display: none;
  position: absolute;
  width: 155px;
  top: 100%;
  left: 0;
}
#main-plugins-menu.align-right .has-sub ul {
  left: auto;
  right: 0;
}
#main-plugins-menu .has-sub ul li {
  *margin-bottom: -1px;
}
#main-plugins-menu .has-sub ul li a {
  background: #4c6b4b;
  background: #60885e;
  font-size: 14px;
  filter: none;
  display: block;
  line-height: 120%;
  padding: 8px 10px 8px 10px;
  color: #ffffff;
}
#main-plugins-menu .has-sub ul li:hover a {
  background: #415d41;
}
#main-plugins-menu ul ul li:hover > a {
  color: #ffffff;
}
#main-plugins-menu .has-sub .has-sub:hover > ul {
  display: block;
}
#main-plugins-menu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#main-plugins-menu.align-right .has-sub .has-sub ul,
#main-plugins-menu.align-right ul ul ul {
  left: auto;
  right: 100%;
}
#main-plugins-menu .has-sub .has-sub ul li a:hover {
  color: #0a6d98;
}
#main-plugins-menu ul ul li.last > a,
#main-plugins-menu ul ul li:last-child > a,
#main-plugins-menu ul ul ul li.last > a,
#main-plugins-menu ul ul ul li:last-child > a,
#main-plugins-menu .has-sub ul li:last-child > a,
#main-plugins-menu .has-sub ul li.last > a {
  border-bottom: 0;
}
#main-plugins-menu ul > li > ul {
  position: relative;
}
#main-plugins-menu ul > li > ul > li {
  position: relative;
}
#main-plugins-menu ul > li.active > ul > li a {
  background-color: #60885e;
}
#main-plugins-menu ul > li.active > ul > li:hover a {
  background: #4c6b4b;
}
.main_logo,
.second_logo {
  margin: 10px;
  margin-left: 0;
  margin-right: 5px;
  display: inline;
  display: inline-block;
}
a.second_logo_href,
a.main_logo_href {
  color: white;
  text-decoration: none;
  display: inline-block;
  padding-right: 1rem;
  padding-top: 2px;
  padding-bottom: 0;
}
a.second_logo_href.vw1_logo_href,
a.main_logo_href.vw1_logo_href {
  color: black;
}
a.second_logo_href img,
a.main_logo_href img {
  height: 3.5rem;
  width: auto;
  margin: 0.8rem 1rem;
  margin-right: 0;
  float: left;
}
@media screen and (max-width: 1570px) {
  a.second_logo_href img,
  a.main_logo_href img {
    height: 3rem;
    margin: 0.5rem;
    margin-right: 0;
    margin-left: 1rem;
  }
}
@media screen and (min-width: 1240px) {
  a.second_logo_href,
  a.main_logo_href {
    padding-top: 0;
    padding-bottom: 2px;
  }
}
@media screen and (min-width: 1415px) {
  a.second_logo_href,
  a.main_logo_href {
    padding-right: 0.5rem;
  }
}
@media screen and (min-width: calc(1570px + 1px)) {
  a.second_logo_href,
  a.main_logo_href {
    padding: 0.1rem 0;
    padding-right: 1.5rem;
  }
}
a.main_logo_href {
  float: left;
}
a.main_logo_href:hover {
  background-color: #60885e;
}
a.second_logo_href {
  float: right;
  background-color: #4c5b5b;
}
a.second_logo_href.vw1_logo_href {
  background-color: #eee9c6;
}
a.second_logo_href:hover:not(a.second_logo_href.vw1_logo_href) {
  background-color: #637676;
}
@media screen and (min-width: calc(1415px + 1px)) {
  a.second_logo_href + .tooltip,
  a.main_logo_href + .tooltip {
    display: none !important;
  }
}
@media screen and (min-width: calc(560px + 1px)) and (max-width: calc(1240px - 1px)) {
  a.second_logo_href + .tooltip,
  a.main_logo_href + .tooltip {
    display: none !important;
  }
}
.main_logo_text,
.second_logo_text {
  color: white;
  line-height: normal;
  display: none;
  margin: 0.85rem 0 0;
  margin-left: 0.75rem;
  font-weight: bold;
  max-width: 95px;
}
.main_logo_text.vw1_logo_text,
.second_logo_text.vw1_logo_text {
  color: black;
}
.main_logo_text h1,
.second_logo_text h1 {
  display: inline;
  display: block;
  font-size: 22px;
  font-weight: bold;
  margin: 0;
  font-family: 'Pattaya', sans-serif;
  font-family: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.main_logo_text h2,
.second_logo_text h2 {
  display: inline;
  display: block;
  font-size: 22px;
  font-weight: bold;
  margin: 0px 0 0;
  font-family: 'Courgette', cursive;
  font-family: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.main_logo_text.vw1_logo_text h2,
.second_logo_text.vw1_logo_text h2 {
  font-size: 16px;
}
@media screen and (max-width: 1570px) {
  .main_logo_text,
  .second_logo_text {
    margin: 0.65rem 0 0 0.75rem;
  }
  .main_logo_text h1,
  .second_logo_text h1 {
    font-size: 18px;
  }
  .main_logo_text h2,
  .second_logo_text h2 {
    font-size: 18px;
  }
  .main_logo_text.vw1_logo_text h2,
  .second_logo_text.vw1_logo_text h2 {
    font-size: 14px;
  }
}
@media screen and (min-width: 425px) {
  .main_logo_text {
    display: inline-block;
  }
}
@media screen and (min-width: 1240px) {
  .main_logo_text {
    display: none;
  }
}
@media screen and (min-width: 1325px) {
  .main_logo_text {
    display: inline-block;
  }
}
@media screen and (min-width: 560px) {
  .second_logo_text {
    display: inline-block;
  }
}
@media screen and (min-width: 1240px) {
  .second_logo_text {
    display: none;
  }
}
@media screen and (min-width: 1415px) {
  .second_logo_text {
    display: inline-block;
  }
}
.main-navbar-container {
  margin-bottom: -4px;
}
.main-navbar-container a {
  text-decoration: none;
}
.main-navbar-container .tooltip .tooltip-arrow,
.main-navbar-container .tooltip .tooltip-inner {
  color: white;
  border-radius: 0px;
}
.main-navbar-container .tooltip .tooltip-inner {
  background-color: #415d41;
  border: 1px solid white;
  box-shadow: 0.4em 0.4em 0.4em 0 rgba(0, 0, 0, 0.075);
}
.main-navbar-container .tooltip.in {
  opacity: 1;
}
.main-navbar-container .tooltip.right .tooltip-arrow {
  border-right-color: white;
}
.main-navbar-container .tooltip.left .tooltip-arrow {
  border-left-color: white;
}
.main-navbar-container .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #A9A9A9;
}
.main-navbar-container .tooltip.top .tooltip-arrow {
  border-top-color: white;
}
.navbar-header {
  display: block;
}
ul.navbar-login,
ul.navbar-language {
  margin: 2.1rem 1rem 0 0;
  float: right;
  font-size: 16px;
  font-weight: bold;
  padding-left: 2rem;
}
.navbar-login li,
.navbar-language li {
  display: inline-block;
  list-style: none;
}
@media screen and (max-width: 1570px) {
  .navbar-login li,
  .navbar-language li {
    display: block;
    position: relative;
  }
}
.navbar-login li a,
.navbar-language li a {
  padding: 2.1rem 0.5rem 1.75rem;
}
.secondary-navbar-toggle.language:hover,
ul.navbar-login li:hover a,
ul.navbar-language li:hover a {
  background: #60885e;
}
.navbar-login li a,
.navbar-login li a:visited,
.navbar-language li a,
.navbar-language li a:visited {
  color: white;
}
.navbar-login li a:hover,
.navbar-language li a:hover {
  color: white;
  opacity: 1;
}
.secondary-navbar-toggle {
  position: relative;
  float: right;
  background-color: transparent;
  background-image: none;
  border: none;
  font-size: 200%;
  color: white;
  cursor: pointer;
  /* the user icon */
}
.secondary-navbar-toggle > a span {
  margin: 0.55rem 0.95rem;
  padding: 4px 0px 0px 0px;
}
.secondary-navbar-toggle ul.navbar-login,
.secondary-navbar-toggle ul.navbar-language {
  display: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  z-index: 2;
  background-color: #4c6b4b;
  float: none;
  margin: 0;
  position: absolute;
  top: 100%;
  padding: 0;
  right: -14px;
  min-width: 135px;
  border: solid 1px #60885e;
}
.secondary-navbar-toggle .navbar-login li a,
.secondary-navbar-toggle .navbar-language li a {
  padding: 8px 10px 8px 10px;
  display: block;
}
.secondary-navbar-toggle .navbar-login li {
  margin: 0;
  padding: 0;
  display: inline-block;
}
.secondary-navbar-toggle .navbar-login li a {
  vertical-align: middle;
}
@media screen and (min-width: calc(1570px + 1px)) {
  .secondary-navbar-toggle .navbar-login li a span {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
  }
}
.secondary-navbar-toggle.login a {
  color: white;
}
@media screen and (max-width: 1570px) {
  .secondary-navbar-toggle.login:hover > a span,
  .secondary-navbar-toggle.login.hover > a span {
    opacity: 0.5;
  }
  .secondary-navbar-toggle.login .navbar-login li {
    width: 100%;
  }
}
@media screen and (min-width: calc(1570px + 1px)) {
  .secondary-navbar-toggle.login .navbar-login li {
    max-width: 100px;
  }
}
.secondary-navbar-toggle:focus {
  outline: none;
}
.secondary-navbar-toggle:not(.language):hover > span,
.secondary-navbar-toggle:not(.language).hover > span {
  opacity: 0.5;
}
.secondary-navbar-toggle:hover ul,
.secondary-navbar-toggle.hover ul {
  display: block;
}
@media screen and (min-width: calc(1570px + 1px)) {
  .secondary-navbar-toggle.login + .tooltip {
    display: none !important;
  }
}
a.main_logo_href .main_logo_text {
  /* XXX: the logo would only disappear in a small range of page widths…
        @media screen and (min-width: @medium-screen) {
            display: none;
        }
        */
}
@media screen and (min-width: 425px) {
  a.main_logo_href .main_logo_text {
    display: inline-block;
  }
}
@media screen and (min-width: 1325px) {
  a.main_logo_href .main_logo_text {
    display: inline-block;
  }
}
a.main_logo_href + .tooltip {
  display: block !important;
}
@media screen and (min-width: 425px) {
  a.main_logo_href + .tooltip {
    display: none !important;
  }
}
@media screen and (min-width: 1240px) {
  a.main_logo_href + .tooltip {
    display: block !important;
  }
}
@media screen and (min-width: 1325px) {
  a.main_logo_href + .tooltip {
    display: none !important;
  }
}
@media screen and (min-width: 560px) {
  a.second_logo_href .second_logo_text {
    display: inline-block;
  }
}
@media screen and (min-width: 1240px) {
  a.second_logo_href .second_logo_text {
    display: none;
  }
}
@media screen and (min-width: 1415px) {
  a.second_logo_href .second_logo_text {
    display: inline-block;
  }
}
a.second_logo_href + .tooltip {
  display: block !important;
}
@media screen and (min-width: 560px) {
  a.second_logo_href + .tooltip {
    display: none !important;
  }
}
@media screen and (min-width: 1240px) {
  a.second_logo_href + .tooltip {
    display: block !important;
  }
}
@media screen and (min-width: 1415px) {
  a.second_logo_href + .tooltip {
    display: none !important;
  }
}
.main-navbar-container .navbar-toggle + .tooltip {
  display: block !important;
}
@media screen and (min-width: 1240px) {
  .main-navbar-container .navbar-toggle + .tooltip {
    display: none !important;
  }
}
.main-navbar-container .navbar-toggle.toggled + .tooltip {
  display: none !important;
}
.secondary-navbar-toggle.login span {
  margin-right: 10px;
}
@media screen and (min-width: calc(1570px + 1px)) {
  .secondary-navbar-toggle.login span {
    display: none;
    margin-right: 0;
  }
  .secondary-navbar-toggle.login {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
  .secondary-navbar-toggle ul.navbar-login {
    display: block;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    border: none;
    width: 180px;
    z-index: 1;
    text-align: right;
    margin-right: 20px;
    /*
        TODO: move this to a mixin
        */
  }
  .secondary-navbar-toggle ul.navbar-login li a {
    padding: 2rem 0.5rem;
    display: inline-block;
    height: 74px;
  }
  /*
     XXX: copied from the ul.navbar-login rule above, which should become a mixin
          instead
    TODO: leave fine tuning of the link height (on all but HD screens) for
          another time, alongside other (necessary) work on responsiveness of
          the navbar (especially the premature hiding of the whole menu, which
          is now significantly reduced and should be shown in full for longer)
    */
  .secondary-navbar-toggle.language a {
    padding: 2rem 0.5rem;
    display: inline-block;
    height: 74px;
  }
  .secondary-navbar-toggle.language span {
    margin: 10px 0;
    margin-right: 20px;
  }
  .secondary-navbar-toggle ul.navbar-language li {
    display: block;
  }
}
/* XXX: can’t we rely more on Bootstrap? */
/* DONE: why does the parent div get 2 or even 8 extra px of height? */
.secondary-navbar-toggle.language {
  font-size: 16px;
  line-height: 0;
}
.navbar-language {
  line-height: 1;
}
/*
NOTE: current-language refers to a root of a menu that allowed to choose from
      multiple languages, if they existed, but so far there was only CZ and EN
NOTE: switch-language is just a simple link in the menu’s stead that switches
      to the other language
*/
.secondary-navbar-toggle.language .switch-language,
.secondary-navbar-toggle.language span.current-language {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  margin: 0;
  line-height: normal;
  /*
    NOTE: the separate .secondary-navbar-toggle.language rule is now responsible
          for the link height
    */
  /* XXX: does the navbar have to be(come) higher on a Full HD screen? */
  height: 74px;
  /*
    NOTE: .switch-language now contains a link to the other language
    */
}
.secondary-navbar-toggle.language .switch-language:not(.switch-language),
.secondary-navbar-toggle.language span.current-language:not(.switch-language) {
  padding: 2rem 0.5rem;
}
.secondary-navbar-toggle.language .switch-language a,
.secondary-navbar-toggle.language span.current-language a,
.secondary-navbar-toggle.language .switch-language span,
.secondary-navbar-toggle.language span.current-language span {
  display: table-cell;
  vertical-align: middle;
  color: white;
}
@media screen and (max-width: 1570px) {
  .secondary-navbar-toggle.language .switch-language,
  .secondary-navbar-toggle.language span.current-language {
    padding: 1.2rem 0.6rem;
    height: auto;
  }
  .secondary-navbar-toggle.language .switch-language span,
  .secondary-navbar-toggle.language span.current-language span {
    /* XXX: and only shrink when the window width is smaller? */
    height: auto;
  }
}
.navbar-toggle {
  border: none;
  margin: 0.55rem 1rem;
  padding: 4px 0px 0px 0px;
  font-size: 200%;
  color: white;
}
.navbar-toggle .icon-bar {
  height: 3px;
  width: 2rem;
}
.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 0.5rem;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background: transparent;
  border: none;
}
.navbar-inverse .navbar-toggle:hover {
  opacity: 0.5;
}
/*
TODO: make the footer stick to the bottom of the page if there is not enough
      content to fill up the space
*/
.footer {
  background-color: #4c6b4b;
  margin-top: 2rem;
  padding: 0.75rem 1rem 0;
  text-align: center;
}
.footer a.main_logo_href {
  display: inline-block;
  display: none;
}
.footer a.main_logo_href img {
  width: 50px;
  height: 50px;
  margin-top: -20px;
}
.footer ul {
  display: block;
}
.footer li {
  display: inline-block;
  padding-right: 1em;
}
.footer li:after {
  padding-left: 1em;
  content: "|";
  color: #fff;
  opacity: 0.5;
}
.footer li a {
  color: #fff;
}
.footer li.footer-first {
  padding-left: 0;
  background: none;
}
.footer li.footer-last {
  padding-right: 0;
}
.footer li.footer-last:after {
  content: "";
  padding-left: 0;
}
.footer-text {
  margin-top: 0.5em;
  margin-bottom: 0.3rem;
  color: #fff;
  opacity: 0.7;
}
.footer-logos a {
  display: inline-block;
  text-decoration: none;
  margin: 0 1rem;
}
.footer-logos a:hover {
  opacity: 0.7;
}
.footer-logos img {
  width: auto;
  max-height: 6rem;
}
.footer-logos .ujc img {
  padding: 0.8rem;
}
.footer-logos .av21 img {
  padding: 0.2rem 0;
}
.footer-logos .lindat img {
  height: 4rem;
}
.searchbar {
  margin-bottom: 1rem;
  display: table;
}
.searchbar-inputs {
  display: table-cell;
  width: 100%;
  vertical-align: top;
  padding-right: 10px;
}
.searchbar-input {
  border-radius: 0;
  margin: 0;
  width: 100%;
}
.searchbar-buttons {
  display: table-cell;
  white-space: nowrap;
  vertical-align: top;
}
@media screen and (max-width: 991px) {
  .searchbar-buttons {
    white-space: normal;
  }
  .searchbar-buttons .btn {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  .searchbar-buttons .btn {
    white-space: normal;
    width: 150px;
  }
}
.searchbar-button,
.styled-button {
  border-radius: 0;
  background-color: #4c5b5b;
  color: white;
}
.searchbar-button {
  margin-left: 4px;
}
@media screen and (min-width: 992px) {
  .searchbar-button.separated {
    margin-left: 12px;
  }
}
.list-search-div {
  float: left;
  width: calc(100% - 210px);
}
@media screen and (max-width: 991px) {
  .list-search-div {
    width: 100%;
    float: none;
  }
}
.list-results-header {
  float: right;
  text-align: right;
  width: calc(0% + 210px);
  margin-top: 0.25rem;
}
@media screen and (max-width: 991px) {
  .list-results-header {
    width: 100%;
    float: none;
    text-align: left;
  }
}
.list-results-header-div {
  margin-left: 1rem;
  display: inline-block;
}
#otherDropdownSelectDiv {
  display: inline-block;
}
@media screen and (max-width: 991px) {
  #otherDropdownSelectDiv {
    display: block;
    clear: both;
  }
}
.dropdown-select-div .search-areas-label {
  line-height: calc(22px + 1rem);
  margin-right: 0.5rem;
}
@media screen and (max-width: 991px) {
  .dropdown-select-div .search-areas-label {
    display: block;
  }
}
.dropdown-select-div .bootstrap-select {
  width: 280px !important;
}
.dropdown-select-div .bootstrap-select .btn-default {
  background-color: #4c6b4b;
  height: calc(22px + 1rem);
}
.dropdown-select-div .bootstrap-select .btn-default:hover {
  background-color: #60885e;
}
.label-favorite {
  font-size: 90%;
  display: inline-block;
  border: solid 1px black;
}
.label-favorite-container {
  margin-right: 3px;
  margin-bottom: 3px;
}
.favorite-label-popover-container {
  height: 110px;
  overflow-y: auto;
}
.popover hr {
  margin-top: 15px;
  margin-bottom: 7px;
}
.favorite-select-label {
  height: 200px;
  overflow-y: auto;
}
.favorite-select-label .favorite-select-label-item {
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 1px;
  padding-bottom: 1px;
  border-radius: 0.25em;
  color: white;
  border: solid 1px black;
}
.favorite-select-label .radio {
  padding-top: 3px;
}
.favorite-selected-label-info,
.favorite-selected-label-info-2 {
  margin-top: 6px;
}
.favorite-selected-label-info .label,
.favorite-selected-label-info-2 .label {
  font-size: 90%;
  display: inline-block;
  border: solid 1px black;
  margin-right: 3px;
}
.favorite-star .popover {
  width: 100%;
}
.favorite-star .btn {
  margin-top: 10px;
}
.favorite-star h6 {
  font-weight: bold;
}
.favorite-management label {
  margin-bottom: 0;
}
.favorite-management hr {
  margin-top: 7px;
  margin-bottom: 7px;
}
.favorite-label-management {
  border: solid 1px black;
  border-radius: 0.25em;
  padding: 2px 5px 2px 5px;
  margin-bottom: 4px;
}
.favorite-label-management.active {
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
div.favorite-label-management a {
  color: white;
}
div.favorite-label-management a:hover {
  color: whitesmoke;
}
.favorite-management-heading {
  font-weight: bold;
  line-height: 30px;
  margin-top: 20px;
  display: block;
}
.favorite-management-subheading {
  margin-bottom: 7px;
  line-height: 30px;
}
#favorite-item-container {
  min-height: 400px;
}
.favorite-query {
  background-color: white;
  padding: 10px;
  margin-bottom: 10px;
}
.favorite-query .label {
  border: solid 1px black;
  padding-bottom: 0.2em;
}
.favorite-query hr {
  margin-top: 7px;
  margin-bottom: 7px;
}
.favorite-query-header {
  line-height: 30px;
}
.favorite-query-header-label {
  display: block;
  float: left;
}
.favorite-query-list {
  min-height: 170px;
  max-height: 300px;
  overflow-y: auto;
}
.favorite-query-list a:hover,
.favorite-query-list a:focus {
  text-decoration: none;
}
.favorite-query-list a:hover {
  background-color: #F0F0F0;
  color: black;
}
.favorite-query-list-left {
  line-height: 1.6;
}
.favorite-query-label,
.favorite-query-item {
  display: block;
}
.favorite-query-list hr {
  margin-top: 3px;
  margin-bottom: 3px;
}
.favorite-query-item-header {
  line-height: 1.6;
}
.favorite-query-raw {
  font-size: 80%;
  color: black;
  padding-left: 5px;
}
.favorite-query-remove {
  padding: 5px;
  margin-left: 5px;
  margin-right: 5px;
  display: block;
  float: right;
}
.favorite-queries-pagination .pagination {
  margin-top: 2px;
  margin-bottom: 2px;
}
.favorite-query-filter-container {
  margin-left: 60px;
}
.favorite-book-select-button {
  background-color: transparent;
  border-style: none;
  width: 100%;
  height: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
}
.favorite-book-select-button:focus {
  outline: none;
}
.favorite-dropdown-item-label {
  display: inline-block;
  font-size: 90%;
  margin-bottom: 2px;
  border: solid 1px black;
}
.favorite-book-remove {
  margin-left: 7px;
}
.favorite-book-remove .glyphicon {
  top: 2px;
}
.favorite-book-select {
  margin-bottom: 0.7rem;
}
.favorite-book-select-body {
  padding-left: 20px;
  padding-right: 20px;
}
.favorite-book-select-body div {
  display: inline-block;
}
.favorite-book-select-body > div {
  margin-right: 3px;
}
.favorite-book-select-body > div:hover {
  background-color: whitesmoke;
}
.favorite-item {
  margin-bottom: 1px;
}
body div.eupopup-color-inverse {
  color: #fff;
  background-color: rgba(76, 107, 75, 0.85);
}
body div.eupopup-color-inverse .eupopup-head,
body div.eupopup-color-inverse .eupopup-body {
  color: #fff;
}
body a.eupopup-closebutton {
  color: #fff;
}
body a.eupopup-button_1 {
  color: #fff;
  font-size: 16px;
}
body a.eupopup-button_2 {
  color: #fff;
}
body .eupopup-button {
  color: #fff;
}
body .eupopup-button:hover,
body .eupopup-button:focus {
  color: #fff;
}
ol.tracks-list li::before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  top: -2px;
  left: -1.7rem;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  width: 1.7rem;
  margin-right: 8px;
  padding: 4px;
  border-top: 2px solid #4c6b4b;
  color: #fff;
  background: #4c6b4b;
  font-weight: bold;
  text-align: center;
}
ol.tracks-list > li {
  position: relative;
  margin: 0 0 0 1.7rem;
  padding: 4px 8px;
  list-style: none;
  border-top: 2px solid #4c6b4b;
  margin-bottom: 30px;
  font-weight: bold;
  font-family: 'Charis SIL', 'Times New Roman', Times, serif;
}
ol.tracks-list {
  counter-reset: li;
  padding: 0;
}
div.audio {
  margin-top: 20px;
  font-weight: normal;
  margin-left: -2.33rem;
  font-family: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div.audio audio {
  float: left;
}
.audio-download {
  display: inline-block;
  margin-left: 2rem;
  margin-top: 0.5rem;
}
.audio-length {
  display: inline-block;
  margin-left: 2rem;
  min-width: 130px;
  margin-top: 0.5rem;
}
.audio-length-value {
  display: inline-block;
  text-align: right;
  width: 50px;
}
.audio-text {
  margin-bottom: 20px;
  font-family: 'Charis SIL', 'Times New Roman', Times, serif;
}
ul.bib-listing li.list-item a.audio-download-href {
  border-radius: 5px 15px;
  border-radius: 5px;
  background: #4c5b5b;
  padding: 5px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-family: "Arial";
  margin-left: 0.25rem;
  margin-top: 0.25rem;
  display: inline-block;
}
ul.bib-listing li.list-item a.audio-download-href:hover {
  background-color: #637676;
  opacity: 1;
  cursor: pointer;
}
.bib-listing-books-div.loader {
  margin-top: 30vh;
}
.bib-listing-books-div:not(.loader) {
  min-height: 58vh;
}
.bib-listing-books-div.loader + .bib-listing-pagination-div {
  margin-top: 25vh;
}
.bib-listing-empty {
  font-size: 18px;
  text-align: center;
  padding-top: 20vh;
}
ul.first-level {
  list-style-type: disc;
}
ul.first-level li {
  margin-left: 25px;
}
ul.second-level {
  list-style-type: circle;
}
ul.second-level li {
  margin-left: 20px;
}
ul.bib-listing {
  padding: 0;
  list-style: none;
}
ul.bib-listing li.list-item {
  background-color: white;
  margin-top: 10px;
}
ul.bib-listing li.list-item a:not(.btn) {
  color: #84CED7;
}
ul.bib-listing li.list-item .heading a.name,
ul.bib-listing li.list-item .heading span.name {
  /* reset the above color in a heading */
  color: initial;
  /* font-weight: bold; */
  font-style: italic;
}
.tt-suggestion .name {
  font-style: italic;
}
ul.bib-listing li.list-item .visible-content {
  display: table;
  width: 100%;
}
ul.bib-listing li.list-item .visible-wrapper {
  display: table-row;
}
ul.bib-listing li.list-item .left-panel {
  float: none;
  width: 10px;
  padding: 2px;
  align-items: center;
  text-align: center;
  position: relative;
  display: table-cell;
}
ul.bib-listing li.list-item .middle-panel {
  padding: 10px 5px 10px 15px;
  padding: 1rem;
  display: table-cell;
}
ul.bib-listing li.list-item .middle-panel .short-info {
  color: darkgray;
  float: right;
}
ul.bib-listing li.list-item .middle-panel .favorites {
  float: right;
  max-width: 300px;
  margin-top: -2px;
  margin-left: 10px;
  margin-bottom: 0px;
  line-height: initial;
  text-align: right;
}
ul.bib-listing li.list-item .middle-panel .favorites .label {
  display: inline-block;
  margin-left: 2px;
  border: solid 1px black;
}
ul.bib-listing li.list-item .middle-panel .heading {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 5px;
  font-family: 'Charis SIL', 'Times New Roman', Times, serif;
}
ul.bib-listing li.list-item .middle-panel .body .sub {
  font-family: 'Charis SIL', 'Times New Roman', Times, serif;
}
ul.bib-listing li.list-item .middle-right-panel {
  padding: 1rem 0;
  display: table-cell;
  width: 50px;
  vertical-align: top;
}
ul.bib-listing li.list-item .middle-right-panel .body {
  padding: 0 0.7rem;
}
ul.bib-listing li.list-item .middle-right-panel .body img {
  width: 32px;
  height: 32px;
}
ul.bib-listing li.list-item .right-panel {
  float: none;
  width: 6rem;
  background-color: #4c6b4b;
  align-items: center;
  text-align: center;
  position: relative;
  min-width: 0;
  margin: 0;
  display: table-cell;
}
ul.bib-listing li.list-item .right-panel .content-button {
  position: absolute;
  bottom: 5px;
  left: 50%;
  margin-left: -20px;
  /* half size of button + padding*/
}
ul.bib-listing li.list-item .right-panel button,
ul.bib-listing li.list-item .right-panel .button {
  background-color: transparent;
  border: none;
  color: white;
  box-shadow: none !important;
}
ul.bib-listing li.list-item .right-panel button > span,
ul.bib-listing li.list-item .right-panel .button > span {
  font-size: 20px;
}
ul.bib-listing li.list-item .hidden-content {
  border-top: 1px solid #E5E5E5;
  clear: both;
  display: none;
  overflow-y: auto;
}
ul.bib-listing li.list-item .hidden-content .bottom-panel .body {
  padding: 1rem;
  margin-left: 10px;
  margin-right: 10px;
}
ul.bib-listing li.list-item .left-panel button,
ul.listing li.list-item .left-panel input {
  background-color: transparent;
  border: none;
  outline: none!important;
  box-shadow: none !important;
  padding: 0;
  margin: 2px 1px 1px 2px;
}
ul.bib-listing li.list-item .left-panel button > span {
  font-size: 14px;
  margin: 0;
  padding: 0;
}
ul.bib-listing li.list-item .table {
  display: table;
  width: 80%;
  line-height: 1.1;
  margin-bottom: 0;
}
ul.bib-listing li.list-item .bib-table-row {
  display: table-row;
}
ul.bib-listing li.list-item .bib-table-cell {
  display: table-cell;
  text-align: left;
  padding-left: 20px;
}
ul.bib-listing li.list-item .bib-label {
  font-weight: bold;
  font-size: 100%;
  color: black;
  padding-left: 0;
}
ul.bib-listing .source-abbr {
  font-variant: small-caps;
}
.bib-sortbar .sort-button {
  background-color: transparent;
  border: none;
  outline: none!important;
  box-shadow: none !important;
  padding-right: 0;
}
.bib-listing-pagination-div {
  text-align: center;
}
.search-context-match {
  background-color: yellow;
}
.result-hit div {
  display: inline;
}
.hits-results {
  display: inline-block;
}
.hits-count {
  float: left;
  margin-right: 120px;
  font-size: 18px;
  display: inline-block;
}
.results {
  display: inline-block;
  border-bottom: 1px solid lightgray;
  padding: 5px;
  margin-bottom: 10px;
  width: 100%;
}
.bib-alert {
  padding-top: 30px;
}
html,
body {
  height: 100%;
  margin: 0;
}
.reader {
  position: relative;
}
.reader-controls .ui-slider {
  background: #4c6b4b;
  width: 95%;
  width: calc(100% - 2rem);
  margin-top: 1rem;
  margin-left: 2.5%;
  margin-left: calc(0% + 1rem);
  margin-right: calc(0% + 1rem);
  border: none;
  height: 4px;
}
.reader-controls .ui-slider > .ui-slider-handle {
  background: #4c5b5b;
  border-radius: 50%;
  border: none;
  top: -0.5em;
}
.reader-controls span.ui-slider-handle:focus {
  outline: 0;
}
.reader-controls .slider-tip {
  opacity: 1;
  width: 100px;
  bottom: 120%;
  margin-left: -3.5em;
}
.reader-controls .tooltip.in {
  opacity: 1;
}
.reader-controls .tooltip-inner {
  background-color: #4c6b4b;
  color: white;
}
.reader-controls .tooltip-arrow {
  border-top-color: #4c6b4b !important;
  border-bottom-color: #4c6b4b !important;
}
.reader-controls .page-input-button {
  border-radius: 0;
  background-color: #4c5b5b;
  color: white;
  height: 32px;
  padding: 0.2rem 0.85rem;
}
.reader-controls .page-input-button:hover {
  background-color: #637676;
}
.reader-controls .page-input-text {
  height: 32px;
  padding: 0.2rem 0.7rem;
  border: none;
  outline: 0;
  margin-top: -5px;
}
.reader-controls .paging {
  margin-top: 10px;
  text-align: center;
}
.reader-controls .page-input {
  float: left;
  margin-top: 1rem;
  margin-left: 2.5%;
  margin-left: calc(0% + 1rem);
  margin-right: 1rem;
}
@media screen and (max-width: 767px) {
  .reader-controls .page-input {
    float: none;
    margin-top: 2rem;
  }
}
.reader-controls .page-navigation-container-helper {
  clear: both;
  padding: 1rem 0 0.5rem;
}
.reader-controls ul {
  display: inline;
}
.reader-controls ul.page-navigation-container.page-navigation-container-right {
  padding: 0;
  margin: 0 1rem 1rem 0;
}
.reader-controls ul.page-navigation-container.page-navigation-container-left {
  padding: 0;
  margin: 0 0 1rem 1rem;
}
.reader-controls ul.page-navigation-container > li {
  display: inline-block;
  padding: 0.3rem 0.1rem;
  margin: 0 0.3rem;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.reader-controls ul.page-navigation-container > li > a {
  font-weight: bold;
  color: #4c5b5b;
}
.reader-controls ul.page-navigation-container > li > a:hover {
  color: #637676;
  text-decoration: none;
  opacity: 1;
}
.reader-controls ul.page-navigation-container > li:first-of-type {
  padding-left: 0;
  margin-left: 0;
}
.reader-controls ul.page-navigation-container > li:last-of-type {
  padding-right: 0;
  margin-right: 0;
}
.reader-controls ul.pagination {
  margin-top: 0;
  margin-bottom: 0;
  margin: 0 1rem;
}
.reader-controls ul.pagination > li {
  min-width: 50px;
  padding: 0 5px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.reader-controls ul.pagination > li .page-navigation {
  padding: 5px;
  width: 20px;
}
.reader-controls ul.pagination > li > a {
  font-size: 15px;
  border: none;
  float: none;
}
.reader-controls ul.pagination > li > a:hover {
  background: none;
}
.reader-controls ul.pagination > li.page-navigation > a {
  font-weight: bold;
  padding-left: 2px;
  padding-right: 2px;
}
.reader-controls ul.pagination > li.page-active > a {
  font-weight: bold;
  font-size: 17px;
  color: #4c6b4b;
}
.reader-controls .buttons {
  float: right;
  margin-right: 2.5%;
  margin-right: calc(0% + 1rem);
  margin-top: 1rem;
  margin-left: 1rem;
}
@media screen and (max-width: 767px) {
  .reader-controls .buttons {
    float: none;
    margin-top: 2rem;
  }
}
.reader-controls .buttons button {
  color: #4c5b5b;
  background: none;
  border: none;
  outline: 0;
  padding: 0;
  text-align: center;
  width: auto;
  font-size: 0.9em;
  /* XXX: switches now have a matching font size too */
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  margin-left: 1rem;
}
.reader-controls .buttons button:first-of-type {
  margin-left: 0;
}
.reader-controls .buttons button:hover {
  color: #637676;
}
.reader-controls .buttons .button-text {
  color: #333;
  display: block;
}
.reader-controls .buttons span.glyphicon {
  font-size: 2em;
}
.reader-controls .bookmark {
  color: #FD4F31;
  z-index: 1;
  top: 4px;
  position: absolute;
  margin-left: -7px;
  cursor: pointer;
}
.reader-controls .bookmark:hover {
  z-index: 2;
}
.reader-controls .bookmark-multiple::after {
  position: absolute;
  left: 3px;
  color: white;
  font-size: 10px;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  width: 12px;
  text-align: center;
}
.reader-controls .bookmark-content-2::after {
  content: '2';
}
.reader-controls .bookmark-content-3::after {
  content: '3';
}
.reader-controls .bookmark-content-4::after {
  content: '4';
}
.reader-controls .bookmark-content-5::after {
  content: '5';
}
.reader-controls .bookmark-content-6::after {
  content: '6';
}
.reader-controls .bookmark-content-7::after {
  content: '7';
}
.reader-controls .bookmark-content-8::after {
  content: '8';
}
.reader-controls .bookmark-content-9::after {
  content: '9';
}
.reader-controls .bookmark-content-9plus::after {
  content: '9+';
}
.reader-body-container {
  width: auto;
  margin-bottom: 1px;
  display: block;
  padding: 0;
}
.title {
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  padding: 1rem 5% 2rem;
  padding: 1rem calc(0% + 4rem) 2rem;
  font-family: 'Charis SIL', 'Times New Roman', Times, serif;
}
/*TODO move stop cotrols div command change positioning*/
.reader .fullscreen-button {
  position: absolute;
  left: 95%;
  left: calc(100% - 4rem);
  background-color: transparent;
  font-size: 2em;
  border: none;
  outline: 0;
  padding: 1rem;
  width: 4rem;
  height: 4rem;
  text-align: center;
  vertical-align: middle;
  color: #4c5b5b;
}
.reader button.fullscreen-button:hover,
.fullscreen .fullscreen-close-button:hover {
  color: #637676;
}
.reader-text {
  height: auto;
  /* https://www.sitepoint.com/understanding-and-using-rem-units-in-css/ */
  max-width: 40rem;
  /* this was the first, off the top of my head, arbitrary width that I could come up with */
  margin-left: auto;
  margin-right: auto;
}
.fullscreen-body {
  overflow-y: hidden;
}
.fullscreen {
  position: fixed;
  margin-top: 0;
  padding-top: 0;
  top: 0;
  left: 0;
  z-index: 1035;
  background-color: #FAFAFA;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.fullscreen #ReaderBodyDiv {
  flex-grow: 1;
}
body .lm_dragProxy {
  z-index: 1065;
}
body .lm_dropTargetIndicator {
  z-index: 1060;
}
body .lm_header {
  z-index: unset;
}
.reader .fullscreen-close-button {
  display: none;
}
.fullscreen .fullscreen-close-button {
  float: right;
  color: lightgray;
  display: inline-block;
  background-color: white;
  border: none;
  outline: 0;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}
.reader-text .page {
  max-width: 100%;
  height: auto;
}
.reader-text .page.loading-page {
  padding-top: 2em;
  min-height: 100px;
}
.page.loading {
  background: url(../images/loading.gif) no-repeat center;
  margin: 0 auto;
}
.page.loading div {
  display: none;
}
.reader-left-panel {
  float: left;
  background-color: white;
  width: 250px;
  border-right: 1px solid #E5E5E5;
  height: 77vh;
}
@media screen and (max-width: 991px) {
  .reader-left-panel {
    float: none;
    width: auto;
    border-right: none;
    height: auto;
  }
}
.reader-left-panel-body {
  background-color: white;
  overflow-y: auto;
  width: 100%;
  height: calc(100% - 30px);
  padding: 5px;
}
@media screen and (max-width: 991px) {
  .reader-left-panel-body {
    height: auto;
  }
}
.reader-right-panel {
  width: auto;
  background-color: white;
  height: 77vh;
  min-width: 200px;
}
@media screen and (max-width: 991px) {
  .reader-right-panel {
    min-height: 0;
    min-width: 0;
  }
}
.reader-right-panel-body {
  background-color: white;
  width: 100%;
  height: calc(100% - 30px);
}
.both-pinned .reader-right-panel {
  width: 50%;
  display: inline-block;
}
.fullscreen .reader-right-panel,
.fullscreen .reader-left-panel {
  height: 77vh;
}
.reader-left-panel.ui-draggable,
.reader-right-panel.ui-draggable {
  position: absolute!important;
  border: 1px solid #E5E5E5;
  border-top: none;
  z-index: 9999;
  box-shadow: 5px 5px 5px #888888;
}
.reader-left-panel.ui-draggable-dragging,
.reader-right-panel.ui-draggable-dragging {
  z-index: 10000;
}
.reader-left-panel .glyphicon-pushpin,
.reader-right-panel .glyphicon-pushpin {
  -webkit-transform: rotate(-45deg) scale(0.9);
  -moz-transform: rotate(-45deg) scale(0.9);
  -o-transform: rotate(-45deg) scale(0.9);
  -ms-transform: rotate(-45deg) scale(0.9);
  transform: rotate(-45deg) scale(0.9);
}
.reader-left-panel.ui-draggable .glyphicon-pushpin,
.reader-right-panel.ui-draggable .glyphicon-pushpin {
  -webkit-transform: none;
  -moz-transform: none;
  -o-transform: none;
  -ms-transform: none;
  transform: none;
}
.reader-text-container {
  padding: 5px 30px 5px 30px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  width: auto;
}
.close-button,
.pin-button,
.new-window-button,
.print-button {
  float: right;
  color: #333;
  opacity: 0.6;
  display: inline-block;
  background-color: white;
  border: none;
  outline: 0;
  padding: 0;
  margin-left: 0.5rem;
  text-align: center;
  vertical-align: middle;
}
.close-button:hover,
.pin-button:hover,
.new-window-button:hover,
.print-button:hover {
  color: #4c5b5b;
  opacity: 1;
}
.reader-left-panel-header {
  padding: 0.5rem 1rem 0.5rem 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #E5E5E5;
  border-top: 1px solid #E5E5E5;
  width: 100%;
}
.reader-text-container .search-hit {
  background-color: yellow;
}
.reader-image-container {
  height: 100%;
  padding: 1rem;
  position: relative;
  width: auto;
  overflow-x: hidden;
  text-align: center;
  -webkit-box-shadow: -1px 0 0 #E5E5E5;
  -moz-box-shadow: -1px 0 0 #E5E5E5;
  box-shadow: -1px 0 0 #E5E5E5;
}
@media screen and (max-width: 991px) {
  .reader-image-container {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}
.reader-image-container .zoom {
  display: inline-block;
  width: auto;
  height: auto;
  text-align: center;
  max-width: 100%;
  max-height: 100%;
}
.reader-image-container a,
.reader-image-container a:hover {
  opacity: 1;
}
.reader-image-container .reader-image {
  max-width: 100%;
  max-height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.panel-header-name {
  color: #333;
  font-weight: bold;
  margin-left: 1rem;
  opacity: 0.6;
}
.both-pinned .reader-right-panel:last-child {
  border-left: 1px solid #E5E5E5;
}
.both-pinned .reader-left-panel.ui-draggable .pin-button {
  display: none;
}
.reader-text .dummy-page {
  margin-top: calc(100% - 50px);
  /* TODO: maybe rather? margin-top: ~"calc(100vh - 50px)"; */
}
.reader-left-panel-body .content-item-root-list,
.reader-left-panel-body .content-item-list {
  list-style: none;
  padding-left: 0;
}
.reader-left-panel-body .content-item a:hover {
  color: #84CED7;
}
.reader-left-panel-body .content-item-list li.content-item {
  padding-left: 15px;
}
.reader-settings-button {
  color: white;
  background: none;
  border: none;
  outline: 0;
  text-align: center;
  width: 72px;
  font-size: 1.5em;
  background-color: #4c6b4b;
  margin: 1px;
  height: 28px;
}
.reader-settings-button:hover {
  color: #EEE;
  background-color: #60885e;
}
.reader-settings-button[disabled] {
  color: white;
  background-color: gray;
  cursor: not-allowed;
}
.reader-settings-buttons-area {
  text-align: center;
}
.reader-settings-checkboxes-area {
  margin-top: 9px;
  /* XXX: there is also some style loaded from .../wwwroot/Areas/BookReader/css/readerStyle.css, is it the legacy reader? */
  vertical-align: top;
  /* XXX: match button font size (.buttons button) */
  font-size: 0.9em;
}
.reader-settings-checkboxes-area label {
  font-weight: normal;
}
.reader-settings-checkboxes-area div input[disabled] + label {
  cursor: not-allowed;
}
.reader-settings-checkboxes-area input {
  margin-right: 5px;
}
.reader-bookmarks-container {
  margin-top: 6px;
}
.reader-bookmarks-container .reader-bookmarks-head {
  text-align: center;
}
.reader-bookmarks-container .bookmark-toggles label {
  font-weight: normal;
}
.reader-bookmarks-container .bookmark-toggles .bookmark-ico-online {
  color: #FD4F31;
}
.reader-bookmarks-container .bookmark-toggles .bookmark-ico-offline {
  color: purple;
}
.reader-bookmarks-container .reader-bookmarks-pagination {
  text-align: center;
}
.reader-bookmarks-container .reader-bookmarks-content {
  margin-top: 12px;
}
.reader-bookmarks-container .reader-bookmarks-content-list {
  display: block;
  margin-top: 2px;
  margin-left: 12px;
  margin-right: 5px;
  padding-left: 0;
}
.reader-bookmarks-container .reader-bookmarks-content-list .reader-bookmarks-content-item {
  margin-bottom: 7px;
  width: 100%;
  display: inline-block;
  clear: both;
}
.reader-bookmarks-container .reader-bookmarks-content-list .reader-bookmarks-content-item .bookmark-remote-ico {
  color: gray;
  float: right;
}
.reader-bookmarks-container .reader-bookmarks-content-list .reader-bookmarks-content-item .bookmark-remote-ico:hover {
  color: black;
  text-decoration: none;
}
.reader-bookmarks-container .reader-bookmarks-content-list .reader-bookmarks-content-item .edit-button {
  color: lightgray;
}
.reader-bookmarks-container .reader-bookmarks-content-list .reader-bookmarks-content-item .bookmark-ico {
  margin-right: 4px;
}
.reader-bookmarks-container .reader-bookmarks-content-list .reader-bookmarks-content-item .reader-bookmarks-content-item-title-input.hide {
  display: none;
}
.reader-bookmarks-container .reader-bookmarks-content-list .reader-bookmarks-content-item .edit-button {
  display: none;
}
.reader-bookmarks-container .reader-bookmarks-content-list .reader-bookmarks-content-item.reader-bookmarks-content-item-local .bookmark-ico {
  color: purple;
}
.reader-bookmarks-container .reader-bookmarks-content-list .reader-bookmarks-content-item.reader-bookmarks-content-item-online .bookmark-ico {
  color: #FD4F31;
}
.reader-bookmarks-container .reader-bookmarks-content-list .reader-bookmarks-content-item:hover .edit-button {
  display: inline;
}
.reader-bookmarks-container .reader-bookmarks-content-list.hide {
  display: none;
}
.content-item {
  clear: both;
}
.content-item-page-name {
  float: right;
  margin-left: 5px;
}
.reader-text div.page-name {
  text-align: center;
  font-size: 1.1em;
  display: none;
}
.reader-text div.page.unloaded {
  display: block;
}
.reader-text-container.reader-text-show-page-names a.itj-pb {
  font-weight: bold;
  color: #4c6b4b;
}
.reader-text-container.reader-text-show-page-names a.itj-pb span {
  display: inline;
}
.reader-text-container.reader-text-show-page-names a.itj-pb[data-source-id^='ed'] {
  /* I cannot mistake this sort of a grey for the green */
  color: #999;
}
.reader-text-container a.itj-pb span {
  display: none;
}
.reader-text-container .itj-pb:hover {
  text-decoration: none;
}
/* XXX: this caused unwanted spacing between (especially) lines of verse (DalV)
.page-wrapper
{
    margin-bottom: 5px;
}
*/
.reader-text-container.reader-text-pages-separated div.page-wrapper {
  padding-bottom: 1em;
  margin-bottom: 2em;
  border-bottom: 2px solid #999;
}
.reader-text-container.reader-text-pages-separated div.page-name {
  margin-bottom: 0;
}
.reader-text a.note-ref,
sup.note-ref {
  font-weight: bold;
}
/* CSS block for hide/show notes in text */
.reader-text .itj-notes .itj-note {
  display: none;
}
.reader-text a.note-ref {
  display: none;
}
.reader-text.show-notes .page {
  display: inherit;
}
.reader-text.show-notes .itj-notes .itj-note {
  display: inherit;
  margin-bottom: 2px;
  margin-top: 2px;
}
.reader-text-container .footnotes-container {
  display: none;
}
.reader-text-container.show-notes .footnotes-container {
  display: block;
}
/*
 * This affects note numbering/refs in the BookReader module.
 *
 * However, selectors targeted .reader-text instead of .reader-text-container
 * which is where .show-notes is actually toggled.
 *
 * TODO: Resolve the duality.
 */
.reader-text-container.show-notes a.note-ref {
  display: inline;
  margin-left: 2px;
  margin-right: 2px;
  /* override the blue in scaffolding.less */
  color: #4c6b4b;
}
.reader-text div.itj-note {
  display: inherit;
  /*
  border-radius: 10px;
  background-color: #FFF380;
  */
  margin: 2px;
  padding: 5px;
}
/* border above a footnotes part of each page/folio,
   but only if there are any notes at all */
/* XXX: again, I was misled by rules above using .reader-text instead of .reader-text-container */
.reader-text-container.show-notes .itj-notes:not(:empty)::before {
  /* the class is now also .footnotes_container */
  content: '';
  border-top: 1px solid black;
  display: block;
  width: 30%;
}
/* XXX: <copied from tei4u> */
div.footnote {
  display: flex;
  /* NOPE: hopefully this margin makes column-spanning paragraphs live better
             in Firefox: even if not just one but two lines break across the two
             columns the last one’s line height is half of what it should be!
        XXX: again, it only improved a little in some cases; luckily, `break-inside:
             avoid-column` exists to save the day */
  /* margin-bottom: 3px; */
}
div.footnote p {
  margin: 0;
  text-indent: 0 !important;
  line-height: 1.2 !important;
  /* NOPE: the below margins (top + bottom) also seemed to help avoiding rendering
             text from a previous column over text in the right column but it looked
             like sorcery and proved to be unreliable; yep, the two “solutions”
             interfere and are case-dependent, ugh */
  /* margin: 1px 0 1px 0; */
  break-inside: avoid-column;
  /* only THIS solved the problem for good! */
  text-align: left;
}
div.footnote .note-ref-container {
  /* XXX: inline-block caused overflowing text from the left column paragraph
            to be positioned over a first paragraph in the right column */
  display: block;
  min-width: 2.5em;
  text-align: right;
  margin-right: 0.5em;
}
.note-ref-container a {
  color: #4c6b4b;
}
.footnotes-container {
  margin-bottom: 40px;
}
.footnotes-container::before {
  content: '';
  border-top: 1px solid black;
  display: block;
  width: 30%;
}
.footnotes {
  column-count: 2;
  column-fill: balance;
  margin-top: 10px;
  margin-bottom: 20px;
  gap: 30px;
}
.single-note {
  column-count: 1;
}
/* XXX: </copied from tei4u> */
/* paragraphs ending in an word split by a page break need a hyphen */
.show-notes .itj-page > .ends-with-incomplete-word::after {
  content: '-';
}
.show-notes .itj-page > .ends-with-incomplete-word.completed-paragraph::after {
  content: '';
}
/* also, why not indicate split paragraphs as well when loading… */
.itj-page > .incomplete-paragraph::after {
  content: '…';
}
/* but also hide this indication once they are complete */
.itj-page > .incomplete-paragraph.completed-paragraph::after {
  content: '';
}
/* and as well, advertise incompleteness also at the start of the paragraph
   (if it, itself, is a continuation) */
/* TODO: replace this obsolete marker with per-paragraph classes */
.itj-page[data-starts-with-continuation='true'] > p:first-child:before {
  content: '… ';
}
/* base rules for split paragraphs */
/* TODO: rather squash all continuations into a single page container in the end */
.itj-page > .continuation {
  display: none;
}
.page.continuation > .itj-page {
  display: none;
}
/* DONE: preface/foreword is a div, perhaps it should be (or include in it) a paragraph as well */
/*
TODO: lose the > so we could use divs to group related paragraphs?
TODO: lose/rename the .itj-page class? (we no longer need or rely on separate
      pages, there is only a sequence of paragraphs etc. that doesn’t need this
      wrapper)
*/
.itj-page > p {
  text-indent: 0.7cm;
  margin: 20px 0 10px 0;
  line-height: 1.3;
}
.itj-page > p.continuation,
.itj-page div.tooltip {
  text-indent: 0 !important;
}
h3 {
  margin-bottom: 0.7cm;
}
.reader-text-container.debug .itj-page > .incomplete-word,
.reader-text-container.debug .itj-page > .incomplete-paragraph {
  border-left: 2px solid green;
  padding-left: 1em;
}
.reader-text-container.debug .itj-page > .incomplete-paragraph {
  border-left: 2px solid brown;
}
.reader-text-container.debug.show-notes .itj-page > .continuation {
  border-right: 2px solid blue;
  padding-right: 1em;
}
.reader-text-container.debug span.continuation {
  text-decoration: underline blue;
}
/* Custom styles */
/* direct formatting: in footnotes (TEI @rend value), for instance */
.italic {
  font-style: italic;
}
/* also in footnotes: transcription */
.reg {
  font-style: italic;
}
/* in "main text": other (non-Czech) language */
.foreign {
  font-style: italic;
}
/* also main text: spacing between stanzas */
.vspace {
  padding-bottom: 1em;
  /* .vspace is currently converted into a span (not a div) because its TEI
       is <div rend="vspace"> ==> I thought @rend would signify an inline form,
       not a block */
  display: block;
}
/* in VW1 and TextReview: .interleaved,  */
.letter-spaced {
  letter-spacing: 2.5pt;
}
/* adapted from VW1 (.bible.book) */
.bibleBook {
  font-weight: bold;
  color: #696969;
}
/* adapted from VW1 (.bible.verse) */
/* XXX: the class is too generic and will be ambiguous! */
.verse {
  font-weight: bold;
  vertical-align: super;
  font-size: 70%;
}
/* .info, but not with .itj-pb */
.supplied:hover,
.apparatus:hover {
  /* dashed looks okay too, on Firefox; but let’s rather keep everything tidy/clean */
  /* text-decoration: underline dotted gray;  */
  background: #eee;
}
/* AsenM */
.strikethrough {
  text-decoration: line-through;
}
/* VW1 tooltips */
span.info span.tooltip,
a.collapseNotesTool span.tooltip {
  display: none;
}
/* Block-level / paragraph styles */
.addressee {
  color: #666;
}
.preface {
  /*
    padding-left: 1em;
    border-left: 2pt solid gray;
    */
  color: #666;
}
/* End of custom styles */
div.dummy-page {
  display: inherit!important;
}
.reader-search-result-match,
.match {
  /*
    TODO: use this color everywhere instead of `yellow`, which is just too much
    */
  background-color: #fff3cd;
}
.reader-search-result-item:hover {
  cursor: pointer;
  background-color: lightgray;
}
.reader-search-result-item {
  margin-bottom: 2px;
  margin-top: 2px;
}
.reader-search-result-items-div .no-results {
  margin-top: 0.5em;
  text-align: center;
}
.reader-search-result-name {
  font-weight: bold;
  margin-right: 5px;
}
.reader-search-result-name::before {
  content: "[";
}
.reader-search-result-name::after {
  content: "]";
}
.reader-search-result-paging {
  text-align: center;
}
/*testing class for displaying correct pages that contains search match */
/*.search-unloaded {
    background-color: palegoldenrod;
}*/
.reader .content-container {
  background-color: white;
  padding: 0;
  min-height: 0;
}
.reader .twitter-typeahead {
  width: initial!important;
}
.reader .tt-menu {
  width: 100%;
  margin-top: 2px;
  padding: 4px 0;
  background-color: white;
  border: 1px solid #cccccc;
  border-radius: 0px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  max-height: 300px;
  overflow-y: auto;
}
.reader-terms-result-div h2,
.reader-search-result-div h2,
.reader-bookmarks-container h2,
h2.reader-view-head {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 1rem auto;
}
.reader-terms-result-items-div,
.reader-terms-search-result-items-div {
  overflow-y: auto;
}
.reader-terms-result-items-div.loader,
.reader-terms-search-result-items-div.loader {
  overflow-y: initial;
}
.reader-terms-div {
  height: 90%;
}
@media screen and (max-width: 991px) {
  .reader-terms-div {
    height: auto;
  }
}
.reader-search-result-div {
  padding: 0 1rem;
}
@media screen and (max-width: 991px) {
  .reader-search-result-div {
    height: auto;
  }
}
.reader-terms-result-div {
  padding: 0 1rem;
}
@media screen and (max-width: 991px) {
  .reader-terms-result-div {
    height: auto;
  }
}
.reader-terms-result-items-div ol,
.reader-terms-search-result-items-div ol {
  list-style-type: none;
  padding: 0;
}
.reader-terms-result-items-div ol.no-items,
.reader-terms-search-result-items-div ol.no-items {
  padding: 0;
}
.reader-terms-result-items-div ol li a span,
.reader-terms-search-result-items-div ol li a span {
  display: inline-block;
}
.reader-terms-result-items-div ol li a span {
  white-space: nowrap;
  color: #4c6b4b;
}
.reader-terms-search-result-items-div ol li {
  display: inline;
  margin-right: 5px;
}
.reader-terms-search-result-items-div ol li a {
  text-decoration: none;
}
a.no-click-href {
  cursor: default;
}
/*.loading-background, .loading {
    background: @loading-gif-path no-repeat top;
}*/
.modal-text {
  margin-top: 10px;
}
.modal-text-center {
  text-align: center;
  display: block;
}
@media print {
  body {
    padding-top: 0 !important;
  }
  .header-content {
    min-height: 0;
    height: 0;
    overflow: hidden;
  }
  .container-header {
    display: none;
  }
  .container.module-content {
    margin-top: 0;
  }
  #SearchDiv {
    display: none;
  }
  .reader-controls.content-container {
    display: none;
  }
  .reader-left-panel-header {
    display: none;
  }
  .reader .fullscreen-button {
    display: none;
  }
  .reader-text-container {
    height: auto;
    overflow: visible;
  }
  .footer {
    display: none;
  }
  .modal {
    display: none;
  }
}
.dropdown-select-div {
  clear: both;
  margin-top: 0.5rem;
}
.dropdown-select {
  margin-right: 1rem;
  float: left;
  position: relative;
  max-width: 100%;
}
.books-select {
  min-width: 280px;
  margin-bottom: 1rem;
}
.dropdown-select-header {
  padding: 0.5rem 0.7rem;
  border-radius: 0;
  background-color: #4c6b4b;
  color: white;
  font-weight: bold;
}
.dropdown-select-body {
  display: none;
  padding: 0.5rem 0.7rem;
  background-color: white;
  z-index: 3;
  min-width: 100%;
  border-left: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  border-right: 1px solid #E5E5E5;
  overflow-x: auto;
  max-height: 450px;
}
.concrete-item {
  margin-top: 3px;
}
.concrete-item-name {
  margin-left: 5px;
}
.concrete-item-checkbox {
  float: left;
  margin-top: 3px!important;
}
/* override Bootstrap scaffolding.less */
a.source-link {
  text-decoration: underline;
}
.save-item {
  float: right;
  padding-left: 5px;
}
.delete-item {
  float: right;
  display: none;
  color: gold;
}
.dropdown-filter {
  margin-bottom: 1rem;
  background-color: white;
}
.dropdown-filter-input {
  margin-right: 5px;
  width: 90%;
}
.dropdown-clear-filter {
  cursor: pointer;
  width: 5%;
  color: #4c5b5b;
  top: 2px;
}
.dropdown-select-checkbox input {
  width: 1.1em;
  height: 1.1em;
}
.dropdown-select-text {
  margin-left: 5px;
  user-select: none;
}
.dropdown-select-more {
  font-size: 10px;
  float: right;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: auto;
}
.dropdown-select-header:hover {
  cursor: pointer;
}
.child-items {
  margin-left: 10px;
  display: none;
}
.child-items-visible {
  display: block;
}
.category-toggle-and-name {
  cursor: pointer;
}
label.book-checkbox-and-name {
  /* override bootstrap.css */
  margin-bottom: 0;
}
.concrete-item-more {
  font-size: 0.8em;
  margin-left: 2px;
  cursor: pointer;
}
.loading {
  margin: 0 auto;
  height: 48px;
  width: 150px;
}
.dropdown-select-text-loading {
  width: 70%;
  height: 18px;
  text-align: center;
  background-image: url(../images/small_green_loading.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}
.dropdown-description {
  height: 37px;
  color: black;
  opacity: 0.5;
  font-size: 80%;
  padding-top: 3px;
  display: inline-block;
  float: left;
  margin-right: 0.5rem;
  margin-bottom: 0.3rem;
}
.dropdown-cancel {
  padding-top: 3px;
  display: inline-block;
  float: left;
  margin-right: 2rem;
}
.dropdown-loader-color div:before {
  background-color: white !important;
}
.dropdown-align-loader {
  display: inline-block;
  margin-left: 40%;
}
.keyboard-component {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.keyboard-component .ui-draggable-handle {
  touch-action: auto;
}
.keyboard-component .keyboard_container {
  position: relative;
  display: none;
  border: 1px solid #888888;
  box-shadow: 5px 5px 5px #888888;
  padding: 10px;
  background-color: white;
  z-index: 999;
}
.keyboard-component ul.keyboard-tabs {
  margin-bottom: 10px;
}
.keyboard-component .keyboard-cell:hover {
  cursor: pointer;
  background-color: #EEE;
}
.keyboard-component .disabled-cell {
  background-color: #d8c9bc;
}
.keyboard-component .disabled-cell:hover {
  cursor: not-allowed;
  background-color: #d8c9bc;
}
.keyboard-component .second-button {
  float: right;
  margin-right: 8%;
  font-size: 80%;
  color: #6B6B6B;
}
.keyboard-component .default-button {
  font-size: 120%;
  float: left;
  margin-left: 30%;
  margin-top: 11px;
}
.keyboard-component .pin-button {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 8px;
  right: 10px;
  color: #000;
  opacity: 0.2;
}
.keyboard-component .pin-button:hover,
.keyboard-component .pin-button:focus {
  background-color: transparent;
  /*color: #808080*/
  opacity: 0.5;
}
.keyboard-component .tabs {
  line-height: 0;
}
.keyboard-component .tabs .nav-tabs {
  height: 42px;
  overflow: auto;
  width: 90%;
  margin-top: 0;
  display: inline;
}
.keyboard-component .tabs .nav-tabs > li > a {
  height: 42px;
}
.keyboard-component .tabs .tab-content {
  line-height: normal;
  padding-top: 0;
}
.keyboard-icon-img {
  width: 19px;
  height: 11px;
}
.keyboard-icon-img.disabled {
  opacity: 0.4;
  filter: alpha(opacity=40);
  /* For IE8 and earlier */
}
.keyboard-icon-img.disabled:hover {
  cursor: not-allowed;
}
.input_container {
  width: auto;
  height: auto;
  position: relative;
}
.input_container .keyboard-input {
  margin: 0;
  padding-right: 80px;
}
.input_container .keyboard-icon-img {
  position: absolute;
  top: 35%;
  right: 20px;
}
.regex-word-input-textbox .regexsearch-condition-input {
  margin-right: -60px;
}
.regex-word-input-textbox .keyboard-icon-img {
  position: relative;
  top: -1px;
}
.keyboard-icon-img:hover {
  cursor: pointer;
}
.reset {
  width: 100%;
  display: block;
  clear: both;
  position: relative;
}
.regexsearch-button-glyph {
  font-size: 10px;
  margin-left: 4px;
}
.regexsearch-button {
  border-radius: 0;
  background-color: #4c5b5b;
  color: white;
  margin-top: -3px;
}
.custom-glyphicon-keyboard {
  background: url("../images/glyphs/keyboard.gif") no-repeat center;
  opacity: 0.4;
}
.regexsearch-input-button:hover .custom-glyphicon-keyboard {
  opacity: 1;
}
.regexsearch-input-button[disabled] .custom-glyphicon-keyboard {
  opacity: 0.4;
}
.regexsearch-input-button:hover,
.regexsearch-input-button:focus {
  background-color: transparent;
}
.regexsearch-input-button {
  position: absolute;
  right: 15px;
  top: 0;
  width: 30px;
  background-color: transparent;
  border-style: none;
  color: #9A9A9A;
  outline: none;
  height: 32px;
  padding-left: 5px;
  padding-right: 5px;
}
.regexsearch-input-button:focus {
  outline: none;
}
.regexsearch-input-button:active {
  box-shadow: none;
}
.regexsearch-input-button[disabled]:hover {
  color: #9A9A9A;
}
.regexsearch-button .glyphicon {
  left: -1px;
}
.regexsearch-condition-input-button {
  width: 30px;
  height: 32px;
  margin-top: -3px;
  background-color: transparent;
  border-style: none;
  font-weight: bold;
  opacity: 0.5;
  padding-left: 5px;
  padding-right: 5px;
}
.regexsearch-condition-input-button:hover,
.regexsearch-condition-input-button:focus {
  background-color: transparent;
}
.regexsearch-condition-input-button .custom-glyphicon-keyboard {
  opacity: 0.8;
}
.regexsearch-condition-select,
.regexsearch-input {
  height: 24px;
}
.regexsearch-condition-type-div {
  float: left;
}
@media screen and (max-width: 667px) {
  .regexsearch-condition-type-div {
    float: none;
  }
}
.regexsearch-condition-select {
  width: 160px;
}
.regexsearch-condition-div {
  width: 200px;
  margin-left: 170px;
  margin-right: 50px;
}
.regexsearch-editor-button {
  width: 45%;
  margin: 0;
  margin-top: 3px;
  margin-right: 3px;
}
.regexsearch-input {
  width: 350px;
}
.regexsearch-command-buttons-div {
  text-align: right;
  margin-top: 30px;
}
.regexsearch-delimiter,
.regexsearch-or-delimiter,
.regexsearch-token-distance-or-delimiter {
  color: white;
  background-color: #9A9A9A;
  padding: 0 10px 0 10px;
  margin-bottom: 5px;
  height: 20px;
}
.regexsearch-dating-or-delimiter {
  color: white;
  background-color: #9A9A9A;
  padding: 0 10px 0 10px;
  margin-bottom: 70px;
}
.regexsearch-condition-list-div .regex-dating-condition:last-child .regexsearch-dating-or-delimiter {
  margin-bottom: 5px;
}
.regexsearch-destination-div {
  width: 170px;
}
.regexsearch-word-form-div {
  float: right;
  width: 170px;
}
.regexsearch-condition-list-div {
  margin-left: 30px;
  margin-right: 30px;
  padding-top: 5px;
}
@media screen and (max-width: 667px) {
  .regexsearch-condition-list-div {
    margin-left: 10px;
    margin-right: 10px;
  }
}
.regexsearch-upper-select-label {
  display: block;
  font-weight: bold;
  font-size: 90%;
}
.regexsearch-select {
  width: 100%;
}
.regexsearch-condition-input {
  width: 320px;
  border-radius: 0;
  display: inline-block;
  margin-right: -80px;
  padding-right: 66px;
  margin-left: 20px;
}
@media screen and (max-width: 667px) {
  .regexsearch-condition-input {
    margin-left: 0;
  }
}
@media screen and (max-width: 440px) {
  .regexsearch-condition-input {
    width: 220px;
  }
}
.regexsearch-condition-main-div {
  margin: 10px 0 20px 0;
}
input.regexsearch-checkbox {
  vertical-align: middle;
  margin: 3px;
}
.regexsearch-conditions-commands {
  margin-top: 5px;
  margin-bottom: 5px;
}
.regexsearch-editor-container {
  margin: 3px 15px 10px 10px;
}
.regexsearch-editor-title {
  font-size: 150%;
  display: block;
}
.regexsearch-delimiter-remove-button {
  float: right;
  font-size: 13px;
  border-radius: 0;
  color: white;
  background-color: transparent;
  border-style: none;
  margin-top: 2px;
}
.regexsearch-add-input-button {
  font-size: 0.8em;
  margin-left: 180px;
}
@media screen and (max-width: 667px) {
  .regexsearch-add-input-button {
    margin-left: 0;
  }
}
.regex-clickable-text:hover {
  cursor: pointer;
  opacity: 0.7;
}
.regex-search-button {
  float: right;
}
.regexsearch-regex-buttons-div {
  width: 200px;
  margin-left: 317px;
}
.regex-dating-condition-value-select {
  margin: 20px;
  padding: 10px 5px 10px 5px;
  background-color: white;
}
.regex-dating-condition .slider {
  display: inline-block;
}
.regex-dating-condition .ui-slider {
  background: #4c6b4b;
  height: 5px;
  width: 70%;
  margin-left: 2.5%;
  border: none;
}
@media screen and (max-width: 768px) {
  .regex-dating-condition .ui-slider {
    width: 65%;
  }
}
@media screen and (max-width: 560px) {
  .regex-dating-condition .ui-slider {
    width: 55%;
  }
}
@media screen and (max-width: 420px) {
  .regex-dating-condition .ui-slider {
    width: 40%;
  }
}
.regex-dating-condition .ui-slider > .ui-slider-handle {
  background: #4c5b5b;
  border-radius: 50%;
  border: none;
  top: -0.5em;
}
.regex-dating-condition span.ui-slider-handle:focus {
  outline: 0;
}
.regex-dating-condition .slider-tip {
  opacity: 1;
  width: 100px;
  bottom: 120%;
  margin-left: -3.5em;
}
.regex-dating-condition .tooltip-inner {
  background-color: #4c6b4b;
  color: white;
}
.regex-dating-condition .tooltip-arrow {
  border-top-color: #4c6b4b !important;
}
.regex-dating-condition .regex-dating-condition-selects {
  margin-top: -68px;
  margin-left: 200px;
  width: 500px;
}
@media screen and (max-width: 768px) {
  .regex-dating-condition .regex-dating-condition-selects {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 35px;
    width: auto;
  }
}
.regex-dating-condition-selects .regex-dating-condition-select {
  width: 200px;
  margin-left: 30px;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .regex-dating-condition-selects .regex-dating-condition-select {
    margin-left: 15px;
  }
}
.regex-slider-div {
  margin-top: 30px;
  margin-bottom: 15px;
}
.regex-dating-checkbox-div {
  width: 150px;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .regex-dating-checkbox-div {
    width: 120px;
  }
}
.regex-dating-condition-displayed-value {
  width: 65%;
  display: inline-block;
  text-align: center;
  font-size: 1.3em;
}
.regex-dating-precision-div {
  margin-top: 30px;
}
.regex-dating-input-span {
  margin-right: 10px;
}
.regexsearch-token-distance-condition-input-div {
  margin-left: 85px;
}
.regexsearch-token-distance-condition-input-div .regexsearch-condition-input {
  width: 80px;
  margin-right: -40px;
  padding-right: 0;
  margin-left: 20px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.regexsearch-token-distance-condition-input-text {
  font-weight: bold;
  font-size: 90%;
}
.searchbar-input:disabled {
  background-color: #E3E3E3 !important;
}
.searchbar-buttons button:disabled {
  background-color: #4c5b5b;
}
.regex-searchbar-inputs {
  display: table-cell;
  width: 100%;
  vertical-align: top;
  padding-right: 10px;
}
.regex-searchbar-inputs.no-advanced {
  margin-right: 80px;
}
.regex-search-buttons-bottom-area {
  margin-bottom: 1rem;
}
.regex-search-buttons-bottom-area::after {
  content: '';
  display: block;
  clear: both;
}
.regex-search-buttons-bottom-area button {
  margin-left: 1rem;
}
.tt-input,
.tt-hint {
  outline: none;
}
.tt-input {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.tt-hint {
  color: #999;
}
.tt-menu {
  width: 100%;
  margin-top: 2px;
  padding: 4px 0;
  background-color: white;
  border: 1px solid #ccc;
  /*border-radius: 4px;*/
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  max-height: 300px;
  overflow-y: scroll;
}
.tt-suggestion {
  color: #555;
  padding: 3px 12px;
  line-height: 20px;
}
.tt-suggestion:hover {
  background-color: #E5E5E5;
  color: black;
  cursor: default;
}
.twitter-typeahead {
  width: 100%;
}
.tt-suggestions-header {
  font-size: 120%;
  margin: 10px 12px 3px 12px;
  font-weight: bold;
  border-bottom: solid 1px #ccc;
}
.tt-cursor {
  background-color: #60885e;
  color: white;
}
.pagination-extra-small li a,
.pagination-extra-small li span {
  padding-left: 2px;
  padding-right: 2px;
  font-size: 80%;
  min-width: 17px;
}
.pagination-extra-small ul {
  margin-right: 0 !important;
}
.pagination-extra-small .pagination-input input,
.pagination-extra-small .pagination-input button {
  padding: 2px 10px !important;
  height: 28px !important;
}
ol.numbered {
  counter-reset: li;
  /* Initiate a counter */
  padding: 25px 5px 5px 25px;
}
ol.numbered > li {
  position: relative;
  /* Create a positioning context */
  margin-left: 15px;
  padding: 3px 8px 30px 15px;
  /* Add some spacing around the content */
  list-style: none;
  /* Disable the normal item numbering */
  width: 95%;
}
ol.numbered > li:before {
  content: counter(li);
  /* Use the counter as content */
  counter-increment: li;
  /* Increment the counter by 1 */
  /* Position and style the number */
  position: absolute;
  top: -2px;
  left: -2em;
  font-size: 15px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  width: 2em;
  /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
  margin-right: 8px;
  padding: 4px;
  color: white;
  background: #84CED7;
  font-weight: bold;
  text-align: center;
}
.loaderBaseThisBeforeAfter {
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.loaderBaseBefore {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loaderAfter {
  left: 3.5em;
}
.loaderBase {
  font-size: 10px;
  margin: 40px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loaderBaseBeforeAfter {
  content: '';
  position: absolute;
  top: 0;
}
.loaderWhite:before,
.loaderWhite:after,
.loaderWhite {
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7Bright 1.8s infinite ease-in-out;
  animation: load7Bright 1.8s infinite ease-in-out;
}
.loaderWhite {
  font-size: 10px;
  margin: 40px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loaderWhite:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loaderWhite:after {
  left: 3.5em;
}
.loaderWhite:before,
.loaderWhite:after {
  content: '';
  position: absolute;
  top: 0;
}
@-webkit-keyframes load7Bright {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em white;
  }
  40% {
    box-shadow: 0 2.5em 0 0 white;
  }
}
@keyframes load7Bright {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em white;
  }
  40% {
    box-shadow: 0 2.5em 0 0 white;
  }
}
.loader:before,
.loader:after,
.loader {
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  font-size: 10px;
  margin: 40px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em #4c5b5b;
  }
  40% {
    box-shadow: 0 2.5em 0 0 #4c5b5b;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em #4c5b5b;
  }
  40% {
    box-shadow: 0 2.5em 0 0 #4c5b5b;
  }
}
body {
  background-color: #FAFAFA;
  /*-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    -moz-text-shadow: 0 0 0;*/
  padding-top: 50px;
  padding-bottom: 20px;
}
.dl-horizontal dt {
  white-space: normal;
}
.page-body-content {
  margin: auto;
}
.module-content {
  margin: 0 auto 0;
  min-height: 68vh;
  background-color: white;
}
.container-header {
  margin-bottom: 20px;
  background-color: #e6efe6;
  margin-top: 0.3rem;
}
@media screen and (min-width: 1240px) {
  .container-header {
    margin-top: 0.6rem;
  }
}
@media screen and (min-width: 1571px) {
  .container-header {
    margin-top: 1.7rem;
  }
}
.container-header .breadcrumb {
  margin-bottom: 0;
  padding-left: 2px;
  padding-right: 2px;
}
/*
edition notes etc.
… but also the home page content (the guy and the news/updates)
DONE: not just that so maybe extract the new properties to an extra class
      (.text-content?) to avoid the extra conditions
*/
.content-container {
  background-color: white;
  padding: 15px;
  padding-top: 5px;
  min-height: 60vh;
}
/* borrowed from the editions viewer/reader and modified slightly */
.text-content {
  /*
     XXX: this doesn’t look good enough if we don’t also enable word breaking
    text-align: justify;
    */
  margin-left: auto;
  margin-right: auto;
  /*
     XXX: the Charis font (@serif-font-family) looks good to me only in italic
          style in titles (or maybe headings); it’s apparently not as light(weight)
          as Times but maybe that’s just me…
     XXX: let’s stick to/with Times for a while longer
    */
  font-family: 'Times New Roman', Times, serif;
  /*
    TODO: Bootstrap 4+ switches default font size from 14px to 16px so we’re
          basically there (14px times 120% is 16.8px, that’s close enough)
    */
  font-size: 120%;
  line-height: 1.3;
  /*
    TODO: consider https://github.com/mnater/Hyphenopoly (a successor to
          Hyphenator of the same author) for more control, possible multiple
          languages (HTML @lang only allows one), custom rules for Old Czech, …
    */
  hyphens: auto;
}
.text-content:not(#news-container) {
  max-width: 50rem;
}
.text-content .btn {
  font-family: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.content-container.top-offset-without-submenu {
  min-height: 80vh;
}
.text-content p {
  text-indent: 0.7cm;
  text-align: justify;
}
@media screen and (max-width: 560px) {
  .text-content p:not(#news-container) {
    text-align: left;
  }
}
.text-content :is(h1, h2, h3, h4) + p,
.text-content :is(h1, h2, h3, h4) p,
.text-content .no-indent p {
  text-indent: 0;
}
div.container {
  padding: 0;
}
@media (min-width: 1400px) {
  div.container {
    width: 1370px;
  }
}
@media (min-width: 1600px) {
  div.container {
    width: 1570px;
  }
}
@media screen and (max-width: 767px) {
  div.container {
    padding: 0 1rem;
  }
  .content-container {
    min-height: 0;
  }
  .module-content {
    min-height: 0;
  }
  .page-body-content > .container > .top-offset-main-site div[style*="height"] {
    height: auto!important;
  }
}
@media (max-width: 550px) {
  .events .calendar {
    display: none;
  }
}
@media (min-width: 550px) {
  .events .agenda {
    display: none;
  }
}
.events .responsive-iframe-container {
  position: relative;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  padding-bottom: 75%;
}
@media (min-width: 990px) {
  .events .responsive-iframe-container {
    padding-bottom: 65%;
  }
}
@media (min-width: 1200px) {
  .events .responsive-iframe-container {
    padding-bottom: 50%;
  }
}
.events .responsive-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.top-offset-without-submenu {
  /*
     XXX: #edition-note-content is a .content-container that sets margins: auto
          to center the content so let’s fiddle only with the top margin now
    */
  margin-top: -20px;
}
.validation-summary-valid {
  display: none;
}
.alert:empty,
.alert-holder:empty {
  display: none;
}
.no-bottom-margin {
  margin-bottom: 0;
}
a.url {
  hyphenate-character: '';
}

/*# sourceMappingURL=ITJakubStyle.css.map */