/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Copyright (C) 2011-2026 Electronic Study Bible.                           */
/* All rights reserved.  Void where prohibited.                              */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@charset "UTF-8";

/* TODO: Drop shadow on buttons, table */


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* #Title */

#Title .text-sm {
  display: inline-block !important;
}

#Title .text-lg {
  display: none !important;
}

@media only screen and (min-width: 320px) {
  #Title .text-sm {
    display: none !important;
  }
  
  #Title .text-lg {
    display: inline-block !important;
  }
}

#Title .subtitle {
  margin-top: 10px;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* table */

/*
.table-wrapper {
  border-radius: 10px;
  margin: 0;
  padding: 0;
}
*/

table {
  width: 100%;
  table-layout: fixed;
  margin: 0;
  background-color: var(--table-bg-color);
/*
  border: none;
  border-collapse: separate; *//* required for rounded corners *//*
*/
  border-spacing: 0;
  /* box-shadow: var(--box-shadow); */
}

/* cell */

table th {
  text-align: left;
  padding: 5px;
  color: var(--th-fg-color);
  /* background-color: var(--th-bg-color); */
  border: var(--th-bd-width) var(--th-bd-style);
  border-color: transparent var(--th-bd-color) var(--th-bd-color) transparent;
}

/* /_x_|_x_|_x_\ */
/* |_x_|_x_|_x_| */
/* |_x_|_x_|_x_| */
/* |___________| */
/* |_x_|_x_|_x_| */
/* |_x_|_x_|_x_| */
/* \_x_|_x_|_x_/ */
table thead tr,
table tfoot tr {
  color: var(--th-fg-color);
  background-color: var(--th-bg-color);
}

/* OUT: table tfoot tr th {} */

/* /___|___|___\ */
/* |___|___|___| */
/* |_x___x___x_| */
/* |_x___x___x_| */
/* |_x___x___x_| */
/* |___|___|___| */
/* \___|___|___/ */
table tbody tr {
  background-color: var(--d-bg-color);
}

table td {
  vertical-align: top;
  padding: 5px;
  font-size: var(--td-font-size, inherit);
  color: var(--td-fg-color);
  /* background-color: var(--td-bg-color); */
  border: var(--td-bd-width) var(--td-bd-style);
  border-color: transparent var(--td-bd-color) var(--td-bd-color) transparent;
}

td:has(.buttons) {
  padding: 0;
}


/* columns */

table.scrolls1 th,
table.scrolls1 td {
  width: calc(100% / 1);
}

table.scrolls2 th,
table.scrolls2 td {
  width: calc(100% / 2);
}

table.scrolls3 th,
table.scrolls3 td {
  width: calc(100% / 3);
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Borders */

/* table top/bottom row -- for fade */

/*  ___________  */
/* /_x_|_x_|_x_\ */
/* |___|___|___| */
/* |___|___|___| */
/* |           | */
/* TEMP: Reducing redundancy to try to let bar bg shine through table tr:fist-child. */
/*
table thead tr:first-child th {
  color: var(--th-fg-color);
  background-color: var(--th-bg-color);
}
*/

/* |___________| */
/* |___|___|___| */
/* |___|___|___| */
/* \_x_|_x_|_x_/ */
/* TEMP: Reducing redundancy to try to let bar bg shine through table tr:fist-child. */
/*
table tfoot tr:last-child th {
  color: var(--th-fg-color);
  background-color: var(--th-bg-color);
}
*/

/*  ___________  */
/* /xxxxxxxxxxx\ */
/* |___|___|___| */
/* |___________| */
/* TEMP: Reducing redundancy to try to let bar bg shine through table tr:fist-child. */
/*
table thead tr:first-child {
  color: var(--th-fg-color);
  background-color: var(--th-bg-color);
  background-image: var(--th-bg-image);
}
*/

/* |___________| */
/* |___|___|___| */
/* \xxxxxxxxxxx/ */
/* TEMP: Reducing redundancy to try to let bar bg shine through table tr:fist-child. */
/*
table tfoot tr:last-child {
  color: var(--th-fg-color);
  background-color: var(--th-bg-color);
  background-image: var(--th-bg-image);
}
*/

/* interior */

/*  ___________  */
/* /___|___|___\ */
/* |___|_x_|___| */
/* |___|___|___| */
/* |           | */
table.scrolls1 thead tr:not(:first-child):not(:last-child) th:not(:first-child):not(:last-child) {
/*
  border-left: var(--th-bd-width) var(--th-bd-style) var(--th-bd-color);
  border-right: var(--th-bd-width) var(--th-bd-style) var(--th-bd-color);
*/
}

/* |___________| */
/* |___|___|___| */
/* |___|_x_|___| */
/* \___|___|___/ */
table.scrolls1 tfoot tr:not(:first-child):not(:last-child) th:not(:first-child):not(:last-child) {
/*
  border-left: var(--th-bd-width) var(--th-bd-style) var(--th-bd-color);
  border-right: var(--th-bd-width) var(--th-bd-style) var(--th-bd-color);
*/
}

/* |___________| */
/* |_x_|_x_|_x_| */
/* |           | */
table tbody tr.last:not(.bar) + tr.bar th {
  border-top: var(--th-bd-width) var(--th-bd-style) var(--th-bd-color);
}

table tbody tr th {
  border-bottom: var(--th-bd-width) var(--th-bd-style) var(--th-bd-color);
}

/* |_x___x___x_| */
/* |___|___|___| */
/* |           | */
/*#MultiVerse*/ table tbody tr.last:not(.bar) td { /* TODO: Check */
/*
  border-bottom-width: var(--td-bd-width);
  border-bottom-style: var(--td-bd-style);
*/
  border-bottom-color: transparent;
}

/* |___________| */
/* |___|___|___| */
/* | x   x   x | */
table tbody tr.first:not(.bar) th {
  border-top: var(--th-bd-width) var(--th-bd-style) transparent;
}

/*#MultiVerse*//* table tbody tr.first:not(.bar) td {
  border-top-color: var(--td-bg-color);
}
*/

/* top row */

/*  ___________  */
/* /_x_|_x_|_x_\ */
/* |___|___|___| */
/* |___|___|___| */
/* |           | */
table thead tr:first-child th { /* TODO: Use .bar.first? */
  /* background-color: var(--th-bg-color); */
  border-top: var(--table-bd-width) var(--table-bd-style) var(--table-bd-color);
}

/* top/bottom body row */

/*  ___________  */
/* /___|___|___\ */
/* |___|___|___| */
/* | x   x   x | */
/* |           | */
table tbody tr:first-child th,
table tbody tr:first-child td {
  border-top-color: transparent;
}

/* |           | */
/* |_x___x___x_| */
/* |___|___|___| */
/* \___|___|___/ */
table tbody tr:last-child td {
  border-bottom-color: transparent;
}

/* corners */

/*  ___________  */
/* /_x_|___|___\ */
/* |___|___|___| */
/* |___|___|___} */
/* |           | */
table thead tr:first-child th:first-child {
  border-top-left-radius: 10px;
  border-left: var(--table-bd-style) var(--table-bd-width) var(--table-bd-color);
}

/*  ___________  */
/* /___|___|_x_\ */
/* |___|___|___| */
/* |___|___|___} */
/* |           | */
table thead tr:first-child th:last-child {
  border-top-right-radius: 10px;
  border-right: var(--table-bd-style) var(--table-bd-width) var(--table-bd-color);
}

/* |___________| */
/* |___|___|___| */
/* |___|___|___| */
/* \_x_|___|___/ */
table tfoot tr:last-child th:first-child {
  /* padding-left: 10px; */
  border-bottom-left-radius: 10px;
}

/* |___________| */
/* |___|___|___| */
/* |___|___|___| */
/* \___|___|_x_/ */
table tfoot tr:last-child th:last-child {
  /* padding-right: 10px; */
  border-bottom-right-radius: 10px;
}

/* thead/tfoot inner border */

/*  ___________  */
/* /___|___|___\ */
/* |___|___|___| */
/* |_x_|_x_|_x_| */
/* |           | */
/* Note: Does not apply to SingleVerse and MultiVerse  */
#Help table thead tr:last-child th {
  border-bottom: var(--th-bd-width) var(--th-bd-style) var(--th-bd-color);
}

/* |___________| */
/* |_x_|_x_|_x_| */
/* |___|___|___| */
/* \___|___|___/ */
table tfoot tr:first-child th {
  border-top: var(--th-bd-width) var(--th-bd-style) var(--th-bd-color);
}

/* sides */

/*  ___________  */
/* /_x_|___|___\ */
/* |_x_|___|___| */
/* |_x_|___|___| */
/* |           | */
table th:first-child:not(:last-child) {
  border-left: var(--table-bd-width) var(--table-bd-style) var(--table-bd-color);
}

/*  ___________  */
/* /___|___|_x_\ */
/* |___|___|_x_| */
/* |___|___|_x_| */
/* |           | */
table th:last-child:not(:first-child) {
  border-right: var(--table-bd-width) var(--table-bd-style) var(--table-bd-color);
}

/*  ___________  */
/* /_____x_____\ */
/* |_____x_____| */
/* |_____x_____| */
/* |           | */
table th:first-child:last-child {
  border-left: var(--table-bd-width) var(--table-bd-style) var(--table-bd-color);
  border-right: var(--table-bd-style) var(--table-bd-width) var(--table-bd-color);
}

/*  ___________  */
/* /___|___|___\ */
/* |___|___|___| */
/* |     x     | */
/* |     x     | */
table td:first-child:not(:last-child) {
  border-left: var(--table-bd-width) var(--table-bd-style) var(--table-bd-color);
}

/*  ___________  */
/* /___|___|___\ */
/* |___|___|___| */
/* |         x | */
/* |         x | */
table td:last-child:not(:first-child) {
  border-right: var(--table-bd-width) var(--table-bd-style) var(--table-bd-color);
}

/*  ___________  */
/* /___|___|___\ */
/* |___|___|___| */
/* | x   x   x | */
/* | x   x   x | */
table td:last-child:first-child {
  border-left: var(--table-bd-width) var(--table-bd-style) var(--table-bd-color);
  border-right: var(--table-bd-width) var(--table-bd-style) var(--table-bd-color);
}

/* Only applies to SingleVerse for now, wherein relevect shares space with controls */
#SingleVerse table .relevect { /* TODO: TODO */
/*  width: calc(400px - (56px * 2)); */
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* BARS  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

table tr.bar:not(.first):not(.last),
table tr.bar.first,
table tr.bar.last {
  text-align: center; /* TEMP: Can make it left to show errors? */
  font-family: var(--bar-font-family);
  font-size: var(--bar-font-size);
  font-weight: var(--bar-font-weight);
  color: var(--bar-fg-color);
  background-color: var(--bar-bg-color);
}

/*
tr.bar:not(.first):not(.last):has(th.title),
tr.bar.first:has(th.title),
tr.bar.last:has(th.title),
*/
table th.title,
table th:has(.title) {
  text-align: center;
  font-family: var(--bar-title-font-family);
  font-size: var(--bar-title-font-size);
  font-weight: var(--bar-title-font-weight, bold);
}

table tr.bar:not(.first):not(.last) {
  background-image: var(--bar-bg-image);
}

table tr.bar.first {
  background-image: var(--hbar-bg-image);
}

table tr.bar.first th {
  padding: 15px 10px 10px 10px;
}

table tr.bar.last {
  background-image: var(--fbar-bg-image);
}

table tr.bar.last th {
  padding: 5px 10px 15px 10px;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Help */

#Help td {

}

#Help td:first-child {
  font-weight: bold;
}

/* .text-lg, .text-sm */

.text-lg,
.text-sm {
  text-wrap: balance;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* .relevect */

.relevect {
  margin: 0;
  padding: 0;
  text-align: center;
}

.relevect a[href].cbutton,
.relevect .cbutton.disabled {
  display: inline-block;
  vertical-align: middle;
  height: 30px;
  line-height: 30px;
  margin: 0;
  padding: 2px 2px;
  overflow: hidden;
  border-radius: 0;
}

.relevect a[href].cbutton {
  &, &:visited {
    outline: var(--cbutton-outline-width) var(--cbutton-outline-style1) var(--cbutton-outline-color1);
  }
  &:hover, &:focus {
    border: var(--cbutton-bd-width) var(--cbutton-bd-style2) var(--cbutton-bd-color2);
    outline: var(--cbutton-outline-width) var(--cbutton-outline-style2) var(--cbutton-outline-color2);
  }
  &:active {
    border: var(--cbutton-bd-width) var(--cbutton-bd-style3) var(--cbutton-bd-color3);
    outline: var(--cbutton-outline-width) var(--cbutton-outline-style3) var(--cbutton-outline-color3);
  }
}

.relevect a[href].cbutton .text {
  &, &:visited, &.disabled {
    text-decoration: none;
    color: var(--cbutton-fg-color1);
    background-color: var(--cbutton-bg-color1);
    border: var(--cbutton-bd-width) var(--cbutton-bd-style1) var(--cbutton-bd-color1);
  }
  &:hover, &:focus {
    text-decoration: none;
    color: var(--cbutton-fg-color2);
    background-color: var(--cbutton-bg-color2);
  }
  &:active {
    text-decoration: none;
    color: var(--cbutton-fg-color3);
    background-color: var(--cbutton-bg-color3);
  }
}

.relevect .cbutton.disabled {
  cursor: default;
}

/*
.relevect a[href].cbutton > div,
.relevect a[href].cbutton.disabled > div {
  vertical-align: middle;
}
*/

.relevect a[href].cbutton.prevC {
  border-radius: var(--cbutton-bd-radius-sm) 0 0 var(--cbutton-bd-radius-sm);
}

.relevect a[href].cbutton.nextC {
  border-radius: 0 var(--cbutton-bd-radius-sm) var(--cbutton-bd-radius-sm) 0;
}

/*
.relevect a[href].cbutton.changeB {
  border-radius: 0;
}

.relevect a[href].cbutton.changeC {
  border-radius: 0;
}
*/

.relevect .text-sm {
  display: inline-block !important;
}

.relevect .text-lg {
  display: none !important;
}

@media only screen and (max-width: 275px) {
  .relevect a[href].cbutton.changeB {
    display: none;
  }
}

@media only screen and (min-width: 400px) {
  .relevect a[href].cbutton.prevC {
    border-radius: var(--cbutton-bd-radius-lg) 0 0 var(--cbutton-bd-radius-lg);
  }
  .relevect a[href].cbutton.nextC {
    border-radius: 0 var(--cbutton-bd-radius-lg) var(--cbutton-bd-radius-lg) 0;
  }
  .relevect .text-sm {
    display: none !important;
  }
  .relevect .text-lg {
    display: inline-block !important;
  }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Control Buttons */

th.ctrl {
  height: 31px;
  line-height: 31px;
  margin: 0;
}

div.ctrl {
  display: inline-block;
  vertical-align: middle;
  height: var(--fbutton-height);
  line-height: var(--fbutton-height);
  width: var(--ctrl-width);
  padding: 0;
  margin: 0;
}

div.lctrl {
  float: left;
  text-align: left;
}

div.rctrl {
  float: right;
  text-align: right;
}

/* .fbutton */

a[href].fbutton,
a[href].fbutton:visited {
  display: inline-block;
  vertical-align: middle;
  height: var(--fbutton-height);
  line-height: var(--fbutton-height);
  width: var(--fbutton-width);
  margin: 0;
  padding: 0;
  text-align: center;
  text-decoration: none;
  font-size: var(--fbutton-font-size);
  font-weight: 900;
  color: var(--fbutton-fg-color1);
  background-color: var(--fbutton-bg-color1);
  border-width: var(--fbutton-bd-width);
  border-style: var(--fbutton-bd-style1);
  border-color: var(--fbutton-bd-color1);
  border-radius: var(--fbutton-bd-radius-sm);
  &:hover, &:focus {
    text-decoration: none;
    color: var(--fbutton-fg-color2);
    background-color: var(--fbutton-bg-color2);
    border-style: var(--fbutton-bd-style2);
    border-color: var(--fbutton-bd-color2);
  }
  &:active {
    text-decoration: none;
    color: var(--fbutton-fg-color3);
    background-color: var(--fbutton-bg-color3);
    border-style: var(--fbutton-bd-style3);
    border-color: var(--fbutton-bd-color3);
  }
  & > .icon,
  &:visited > .icon {
    color: var(--fbutton-fg-color1);
  }
  & > .icon:hover,
  & > .icon:focus {
    color: var(--fbutton-fg-color2);
  }
  & > .icon:active {
    color: var(--fbutton-fg-color2);
  }
}

a[href].fbutton.move {
  cursor: ew-resize;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* .buttons */

.vcenter,
a[href].vcenter {
  display: block; /* Note: Override div.vcenter from page.css */
}

#Choose .buttons {
  width: 100%;
  display: grid;
  gap: 0;
}

/*
div.buttons {
  border: none;
*//*
  border-left: var(--sbutton-group-bd-width) var(--sbutton-group-bd-style) var(--sbutton-group-bd-color);
  border-right: var(--sbutton-group-bd-width) var(--sbutton-group-bd-style) var(--sbutton-group-bd-color);
*//*
}
*/

/*
#Choose.scrolls .buttons.scrolls {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

#Choose.scroll .buttons {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

#Choose.book .buttons {
  grid-template-columns: repeat(auto-fit, minmax(100px, 150px));
}
*/

#Choose .buttons.scrolls,
#Choose .buttons.books {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

#Choose .buttons.notes {
  grid-template-columns: repeat(auto-fit, minmax(100px, 150px));
}

#Choose .buttons.chapters,
#Choose .buttons.pages {
  grid-template-columns: repeat(auto-fit, minmax(50px, 50px));
}

#Choose .buttons.notfound {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* .sbutton */

.sbutton {
  display: block;
  width: 100%;
  box-sizing: border-box;
  justify-self: left;
  overflow: hidden;
  margin: 0;
  padding: 2px;
  text-align: center;
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: var(--sbutton-font-size);
  font-weight: bold;
  border-radius: var(--sbutton-bd-radius);
}

a[href].sbutton {
  &, &:visited {
    text-decoration: none;
    text-decoration-line: none;
    color: var(--sbutton-fg-color1);
    background-color: var(--sbutton-bg-color1);
    background-image: var(--sbutton-bg-image1);
    border-width: var(--sbutton-bd-width);
    border-style: var(--sbutton-bd-style1);
    border-color: var(--sbutton-bd-color1);
    border-image: var(--sbutton-bd-image1);
  }
  &:hover, &:focus {
    text-decoration: none;
    text-decoration-line: none;
    color: var(--sbutton-fg-color2);
    background-color: var(--sbutton-bg-color2);
    background-image: var(--sbutton-bg-image2);
    border-color: var(--sbutton-bd-color2);
    border-style: var(--sbutton-bd-style2);
    border-image: var(--sbutton-bd-image2);
  }
  &:active {
    text-decoration: none;
    text-decoration-line: none;
    color: var(--sbutton-fg-color3);
    background-color: var(--sbutton-bg-color3);
    border-color: var(--sbutton-bd-color3);
    border-style: var(--sbutton-bd-style3);
    border-image: var(--sbutton-bd-image3);
  }
  &.greyed {
    color: var(--sbutton-fg-color01);
    background-color: var(--sbutton-bg-color01);
    background-image: var(--sbutton-bg-image01);
    border-style: var(--sbutton-bd-style01);
    border-color: var(--sbutton-bd-color01);
    border-image: var(--sbutton-bd-image01);
  }
  &.greyed:hover,
  &.greyed:focus {
    color: var(--sbutton-color02);
    background-color: var(--sbutton-bg-color02);
    background-image: var(--sbutton-bg-image02);
    border-style: var(--sbutton-bd-style02);
    border-color: var(--sbutton-bd-color02);
    border-image: var(--sbutton-bd-image02);
  }
  &.greyed:active {
    color: var(--sbutton-fg-color03);
    background-color: var(--sbutton-bg-color03);
    background-image: var(--sbutton-bg-image03);
    border-style: var(--sbutton-bd-style03);
    border-color: var(--sbutton-bd-color03);
    border-image: var(--sbutton-bd-image03);
  }
  &.active, &.active:visited {
    color: var(--sbutton-fg-color-active1);
    background-color: var(--sbutton-bg-color-active1);
    background-image: var(--sbutton-bg-image-active1);
    border-style: var(--sbutton-bd-style-active1);
    border-color: var(--sbutton-bd-color-active1);
    border-image: var(--sbutton-bd-image-active1);
  }
  &.active:hover, &.active:focus {
    color: var(--sbutton-fg-color-active2);
    background-color: var(--sbutton-bg-color-active2);
    background-image: var(--sbutton-bg-image-active2);
    border-style: var(--sbutton-bd-style-active2);
    border-color: var(--sbutton-bd-color-active2);
    border-image: var(--sbutton-bd-image-active2);
  }
  &.active:active {
    color: var(--sbutton-fg-color-active3);
    background-color: var(--sbutton-bg-color-active3);
    background-image: var(--sbutton-bg-image-active3);
    border-style: var(--sbutton-bd-style-active3);
    border-color: var(--sbutton-bd-color-active3);
    border-image: var(--sbutton-bd-image-active3);
  }

  & .outline {
    height: 100%;
    width: 100%;
    text-decoration: none;
  }
  & .outline:focus,
  &.active .outline:focus {
    text-decoration: none;
    outline: var(--sbutton-outline-width) var(--sbutton-outline-style1) var(--sbutton-outline-color1);
  }

  /* a[href].sbutton .text */
  & .text, & .text:visited {
    padding: 5px;
    text-decoration: none;
    color: var(--sbutton-fg-color1);
  }
  & .text:hover, & .text:focus {
    text-decoration: none;
    color: var(--sbutton-fg-color2);
  }
  & .text:active {
    text-decoration: none;
    color: var(--sbutton-fg-color3);
  }

  /* a[href].sbutton.greyed .text */
  &.greyed .text,
  &.greyed:visited .text {
    text-decoration: none;
    color: var(--sbutton-fg-color01);
  }
  &.greyed .text:hover,
  &.greyed .text:focus {
    text-decoration: none;
    color: var(--sbutton-fg-color02);
  }
  &.greyed .text:active {
    text-decoration: none;
    color: var(--sbutton-fg-color03);
  }
}

.sbutton.disabled {
  color: var(--sbutton-fg-color0);
  background-color: var(--sbutton-bg-color0);
  background-image: var(--sbutton-bg-image0);
}


/* .sbutton height */

#Choose .buttons.scrolls .sbutton,
#Choose .buttons.books .sbutton,
#Choose .buttons.notes .sbutton {
  height: 100px;
}

#Choose .buttons.chapters .sbutton,
#Choose .buttons.pages .sbutton {
  height: 50px;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* TODO: Make sure notes get lang justification */
table.note {
/*  width: 100%; */
  padding: 5px;
  overflow-x: auto;
}

table.note h2 {
  text-align: center;
}

table p:first-of-type {
  margin-top: 0;
}

table p:last-child {
  margin-bottom: 0;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Verse */

#SingleVerse table.scroll:not(.note):not(.book):not(.search) td:not(.nocols) {
  column-width: 420px;
  column-rule: var(--v-column-rule-width) var(--v-column-rule-style) var(--v-column-rule-color);
  column-fill: balance;
  break-inside: avoid;
}

table.scroll td {
  line-height: 1.3em; /* var(--v-line-height); */
  font-size: var(--v-font-size);
  font-weight: var(--v-font-weight);
  cursor: url('/app/img/cursor/yad.png'), pointer;
  overflow-wrap: break-word;
  color: var(--v-text-fg-color);
  background-color: var(--td-bg-color, transparent);
}

table.scroll td:lang(he) {
  text-align: right;
  direction: rtl;
}

table.scroll td:lang(am) {
  text-align: right;
  direction: rtl;
}

table.scroll td v {
  display: inline;
}

table.scroll td v w  {
  display: inline;
  white-space: nowrap;
}

/* TEMP: Test */
table.scroll td:not(.breaker) v {
  white-space: pre-wrap;
  hyphens: auto;
}

table.scroll td:not(.breaker) v w:first-child {
  white-space: nowrap;
}

table.scroll td:not(.breaker) v w:not(:first-child) {
  white-space: pre-wrap;
  hyphens: auto;
}

table.scroll tbody tr td v > w > n,
table.scroll tbody tr td v > n {
  display: inline-block;
  line-height: 1em;
  vertical-align: super;
  padding: 0 2px;
/*
  text-align: left;
  direction: ltr;
*/
  font-family: initial;
  font-size: var(--v-num-font-size);
  font-weight: normal;
  white-space: nowrap;
  text-decoration: none;
  color: var(--v-num-fg-color);
}

/* section */

table.scroll td .sect {
  display: block;
  width: 100%;
  padding: 10px;
  text-align: center;
  font-size: var(--v-sect-font-size, 1em);
  font-weight: var(--v-sect-font-weight, bold);
  color: var(--v-sect-fg-color, inherit);
}

/* selection */

table.scroll td ::selection {
  color: var(--v-select-fg-color);
  background: var(--v-select-bg-color);
}

/* variation */

var1 {
  color: var(--v-var1-fg-color);
  background-color: var(--v-var1-bg-color);
}

var2 {
  color: var(--v-var2-fg-color);
  background-color: var(--v-var2-bg-color);
}

/* highlight */

table.scroll td v h {
  font-weight: var(--v-highlight-font-weight);
  color: var(--v-highlight-fg-color);
  background-color: var(--v-highlight-bg-color);
}

/* verse notes/footnotes */

table tr.footnotes > td > div {
  max-height: 200px;
  overflow-y: scroll;
}

table v a[href]:has(note),
table v a[href]:has(note):visited {
  display: inline;
  vertical-align: super;
  font-size: var(--info-link-font-size);
  font-weight: var(--info-link-font-weight);
  color: var(--info-link-fg-color1);
  text-decoration: none !important;
}

table v a[href]:has(note):hover,
table v a[href]:has(note):focus {
  color: var(--info-link-fg-color2);
  background-color: var(--info-link-bg-color2);
  text-decoration: none !important;
}

table v a[href]:has(note):active {
  color: var(--info-link-fg-color3);
  background-color: var(--info-link-bg-color3);
  text-decoration: none !important;
}

table tr.footnotes a[href]:has(note),
table tr.footnotes a[href]:has(note):visited {
  color: var(--footnote-link-fg-color1);
  font-weight: var(--footnote-link-font-weight);
  text-decoration: none !important;
}

table tr.footnotes a[href]:has(note):hover,
table tr.footnotes a[href]:has(note):focus {
  color: var(--footnote-link-fg-color2);
  text-decoration: none !important;
}

table tr.footnotes a[href]:has(note):active {
  color: var(--footnote-link-fg-color3);
  text-decoration: none !important;
}

table .relevect,
table v.sect,
table v,
table tr.footnotes note {
  scroll-margin-top: 1.5rem;
}

table .hifade {
/* table .relevect.hifade { */
  animation: hifade-relevect 2.5s ease-out;
}

@keyframes hifade-relevect {
  0%   { background-color: var(--relevect-hifade-bg-color); }
  100% { background-color: transparent; }
}

table v.sect.hifade {
  animation: hifade-note 3.5s ease-out;
}

@keyframes hifade-sect {
  0%   { background-color: var(--v-sect-hifade-bg-color); }
  100% { background-color: var(--v-bg-color); }
}

table v.hifade:not(.sect) {
  animation: hifade-verse 3.5s ease-out;
}

@keyframes hifade-verse {
  0%   { background-color: var(--v-hifade-bg-color); }
  100% { background-color: var(--v-bg-color); }
}

table tr.footnotes note.hifade {
  animation: hifade-note 3.5s ease-out;
}

@keyframes hifade-note {
  0%   { background-color: var(--note-hifade-bg-color); }
  100% { background-color: var(--v-bg-color); }
}

/* grammar, morph, dict */

table.scroll v g,
table.scroll v m,
table.scroll v d {
  display: inline;
  vertical-align: super;
  margin-left: 2px;
}

table.scroll v g::before,
table.scroll v m::before,
table.scroll v d::before {
  content: "[";
}

table.scroll v g::before,
table.scroll v m::after,
table.scroll v d::after {
  content: "]";
}

table.scroll v g {
  font-size: var(--v-grammar-font-size);
  font-weight: var(--v-grammar-font-weight);
  color: var(--v-grammar-fg-color);
  background-color: var(--v-grammar-bg-color);
}

table.scroll v m {
  font-size: var(--v-morph-font-size);
  font-weight: var(--v-morph-font-weight);
  color: var(--v-morph-fg-color);
  background-color: var(--v-morph-bg-color);
}

table.scroll v d {
  font-size: var(--v-dict-font-size);
  font-weight: var(--v-dict-font-weight);
  color: var(--v-dict-fg-color);
  background-color: var(--v-dict-bg-color);
}


/* small-caps */

sc {
  font-variant: small-caps;
}


/* hide */

x {
  display: none;
}


/* Flex  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

div.buttons .text-sm,
table .text-sm {
  display: inline-block !important;
}

div.buttons .text-lg,
table .text-lg {
  display: none !important;
}

@media only screen and (min-width: 400px) {
  div.buttons .text-sm,
  table .text-sm {
    display: none !important;
  }
  
  div.buttons .text-lg,
  table .text-lg {
    display: inline-block !important;
  }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Audio */

audio {
  display: block;
  margin: 5px auto;
  color: var(--audio-fg-color);
  background-color: var(--audio-bg-color);
  border: var(--audio-bd-color);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Embed */

.embed_disclaim {
  font-size: 0.9em;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* EOF */