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

@charset "UTF-8";

@import url('debug.css');

* {
  --drop-shadow: drop-shadow(0 2px 4px var(--drop-shadow-color));
  box-sizing: border-box;
}

html, body {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  color: var(--window-fg-color);
  font-size: var(--window-font-size, 18px);
  font-family: var(--window-font-family, var(--font-family-serif, 'Times New Roman', 'Times', serif));
  background-color: var(--window-bg-color);
  background-image: var(--window-bg-image);
}

/* Layout */

@media only screen and (min-width: 900px) {
  header, footer, main {
    max-width: 90%;
    margin: 0 auto;
  }
}

/* header */

header {
  padding: 5px;
  text-align: center;
  color: var(--header-fg-color);
  background-color: var(--header-bg-color);
  border: none;
/*
  border-width: var(--header-bd-width);
  border-style: var(--header-bd-style);
*/
  border-bottom: var(--header-bd-width) var(--header-bd-style) var(--header-bd-color);
  border-left: var(--header-bd-width) var(--header-bd-style) var(--header-bd-color);
  border-right: var(--header-bd-width) var(--header-bd-style) var(--header-bd-color);
  filter: var(--drop-shadow);
}

footer {
  padding: 15px 5px 5px 5px;
  font-size: var(--footer-font-size);
  font-weight: var(--footer-font-weight);
  color: var(--footer-fg-color);
  background-color: var(--footer-bg-color);
  border: none;
/*
  border-width: var(--footer-bd-width);
  border-style: var(--footer-bd-style);
*/
  border-top: var(--footer-bd-width) var(--footer-bd-style) var(--footer-bd-color);
  border-left: var(--footer-bd-width) var(--footer-bd-style) var(--footer-bd-color);
  border-right: var(--footer-bd-width) var(--footer-bd-style) var(--footer-bd-color);
  filter: var(--drop-shadow);
}

main {
  padding: 10px 10px 20px 10px;
  color: var(--main-fg-color);
  background-color: var(--main-bg-color);
  border: none;
/*
  border-width: var(--main-bd-width);
  border-style: var(--main-bd-style);
*/
  border-left: var(--main-bd-width) var(--main-bd-style) var(--main-bd-color);
  border-right: var(--main-bd-width) var(--main-bd-style) var(--main-bd-color);
  filter: var(--drop-shadow);
}


/* link */
/* NOTE: link, visited > hover, focus > active */

a {
  font-kerning: none;
  font-variant-ligatures: none;
}

a[href] {
  &, &:visited {
    color: var(--link-fg-color1);
    background-color: var(--link-bg-color1);
    text-decoration-line: var(--link-decoration-line1);
    text-decoration-style: var(--link-decoration-style1);
    text-decoration-color: var(--link-decoration-color1);
    text-decoration-thickness: var(--link-decoration-thickness1);
  }
  &:hover, &:focus {
    color: var(--link-fg-color2);
    text-decoration-line: var(--link-decoration-line2);
    text-decoration-style: var(--link-decoration-style2);
    text-decoration-color: var(--link-decoration-color2);
    text-decoration-thickness: var(--link-decoration-thickness2);
  }
  &:active {
    color: var(--link-fg-color3);
    text-decoration-line: var(--link-decoration-line3);
    text-decoration-style: var(--link-decoration-style3);
    text-decoration-color: var(--link-decoration-color3);
    text-decoration-thickness: var(--link-decoration-thickness3);
  }
}

/* external link */

a[href][rel~="external"] {
  text-decoration: none;
  /* text-decoration-line: none; */
  /* ::after */
  &::after, &:visited::after {
    content: " \260D"; /* o-o */
    color: var(--link-fg-color1);
  }
  &:hover::after, &:focus::after {
    color: var(--link-fg-color2);
  }
  &:active::after {
    color: var(--link-fg-color3);
  }
  /* child .text */
  & .text,
  &:visited .text {
    color: var(--link-fg-color1);
    text-decoration-color: var(--link-decoration-color1);
  }
  & .text:hover,
  & .text:focus {
    color: var(--link-fg-color2);
    text-decoration-color: var(--link-decoration-color2);
  }
  & .text:active {
    color: var(--link-fg-color);
    text-decoration-color: var(--link-decoration-color3);
  }
}

/* window link */

header a[href] {
  &, &:visited .text {
    color: var(--header-link-fg-color1);
    text-decoration-color: var(--link-decoration-fg-color1);
  }
  & .text:hover, & .text:focus {
    color: var(--header-link-fg-color2);
    text-decoration-color: var(--link-decoration-fg-color2);
  }
  & .text:active {
    color: var(--header-link-fg-color3);
    text-decoration-color: var(--header-link-fg-color3);
  }
}

footer a[href] {
  & .text, &:visited .text {
    color: var(--footer-link-fg-color1);
    text-decoration-color: var(--footer-link-fg-color1);
  }
  & .text:hover, & .text:focus {
    color: var(--footer-link-fg-color2);
    text-decoration-color: var(--footer-link-fg-color2);
  }
  & .text:active {
    color: var(--footer-link-fg-color3);
    text-decoration-color: var(--footer-link-fg-color3);
  }
}

main a[href] {
  & .text, & .text:visited {
    color: var(--main-link-fg-color1);
    text-decoration-line: var(--link-decoration-line1);
    text-decoration-style: var(--link-decoration-style1);
    text-decoration-color: var(--main-link-fg-color1);
    text-decoration-thickness: var(--link-decoration-thickness1);
  }
  & .text:hover, & .text:focus {
    color: var(--main-link-fg-color2);
    text-decoration-line: var(--link-decoration-line2);
    text-decoration-style: var(--link-decoration-style2);
    text-decoration-color: var(--main-link-fg-color2);
    text-decoration-thickness: var(--link-decoration-thickness2);
  }
  & .text:active {
    color: var(--main-link-fg-color3);
    text-decoration-line: var(--link-decoration-line3);
    text-decoration-style: var(--link-decoration-style3);
    text-decoration-color: var(--main-link-fg-color3);
    text-decoration-thickness: var(--link-decoration-thickness3);
  }
}

/* .badgeGrp links (due to black background) */

footer .badgeGrp a[href] {
  &::after {
    content: "";
  }
  & .text, &:visited .text {
    text-decoration: none;
  }
  & .text:hover, & .text:focus {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--verses-link-fg-color2);
  }
  & .text:active {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--verses-link-fg-color3);
  }
}


/* link buttons */

a[href] > div
a[href] > img {
  text-decoration: none !important;
}

/* input */

input,
button,
/* select, */
textarea {
  color: var(--input-fg-color1);
  background-color: var(--input-bg-color1);
/*
  padding: 5px;
  border-width: var(--input-bd-width);
  border-style: var(--input-bd-style);
  border-color:
    var(--input-bd-color-lo1),
    var(--input-bd-color-hi1),
    var(--input-bd-color-hi1),
    var(--input-bd-color-lo1);
*/
}

input:hover, input:focus,
button:hover, button:focus,
/* select:hover, select:focus, */
textarea:hover, textarea:focus {
  color: var(--input-fg-color2);
  background-color: var(--input-bg-color2);
/*
  border-color:
    var(--input-bd-color-hi2),
    var(--input-bd-color-lo2),
    var(--input-bd-color-lo2),
    var(--input-bd-color-hi2);
*/
}

input:active,
button:active,
/* select:active, */
textarea:active {
  color: var(--input-fg-color3);
  background-color: var(--input-bg-color3);
/*
  border-color:
    var(--input-bd-color-hi3),
    var(--input-bd-color-lo3),
    var(--input-bd-color-lo3),
    var(--input-bd-color-hi3);
*/
}

select {
  background-color: transparent;
/*
  color: var(--select-fg-color1);
  background-color: var(--select-bg-color1);
  border-color: var(--select-bd-color1);
*/
/*  outline-color: transparent; */
}

select:hover,
select:focus,
select:active {
/*
  color: var(--select-fg-color2);
  background-color: var(--select-bg-color2);
  border-color: var(--select-bd-color2);
*/
}

option {
/*
  color: var(--option-fg-color1);
*/
/*  background-color: var(--option-bg-color1); */
}

option:hover,
option:focus,
option:active {
/*
  color: var(--option-fg-color2);
*/
/*  background-color: var(--option-bg-color2); */
}

option[selected=selected] {
/*
  color: var(--option-selected-fg-color1);
*/
/*  background-color: var(--option-selected-bg-color1); */
}

option[selected=selected]:hover,
option[selected=selected]:focus,
option[selected=selected]:active {
/*
  color: var(--option-selected-fg-color2);
*/
/*  background-color: var(--option-selected-bg-color2); */
}

/* Pseudo-buttons */

.vcenter, a[href].vcenter {
  display: inline-block;
  vertical-align: middle;
}

/*
.vcenter, a[href].vcenter {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  padding: 0;
}
*/

.vcenter .text,
a[href].vcenter .text {
  display: block;
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}


/* header, footer content */

footer .info {
  height: 120px;
  width: 100%;
  padding: 0;
  margin: 0;
  margin-bottom: 20px;
  text-align: center;
}

footer .info > div {
  display: inline-block;
  width: 48%;
  margin: 0 auto;
}

footer #navgrp {
  margin: 10px auto;
  text-align: center;
  font-variant: small-caps;
}

footer .copyright {
  text-align: left;
}

/* #Construction */

#Construction {
  max-width: fit-content;
  margin: 5px auto;
  padding: 10px;
  font-size: 0.8rem;
  text-align: center;
  font-weight: 900;
  color: var(--title-fg-color1);
  background-color: var(--title-bg-color1);
  border: var(--title-bd-width) var(--title-bd-style1) var(--title-bd-color1);
  border-radius: var(--title-bd-radius);
  filter: var(--drop-shadow);
}

.alert_icon {
  color: var(--alert-icon-color);
  text-shadow: 1px 1px 2px var(--alert-icon-shadow-color);
}

/* header bars */

/* TODO: Change to .first/.last */
div.bar:not(.first):not(.last),
div.bar.first,
div.bar.last {
  margin-top: 0;
  margin-bottom: 0;
  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);
  border-radius: 0;
}

div.bar:not(.first):not(.last) {
  padding: 5px;
  background-image: var(--bar-bg-image);
  border-width: var(--bar-bd-width);
  border-style: var(--bar-bd-style);
  border-color: var(--bar-bd-color);
}

div.bar.first {
  padding: 15px 10px 5px 10px;
  color: var(--bar-fg-color);
  background-image: var(--hbar-bg-image);
  border-width: var(--hbar-bd-width);
  border-style: var(--hbar-bd-style);
  border-color: var(--hbar-bd-color);
  border-radius: 10px 10px 0 0;
}

div.bar.last {
  margin: 0;
  padding: 5px 10px 15px 10px;
  background-image: var(--fbar-bg-image);
  border-width: var(--fbar-bd-width);
  border-style: var(--fbar-bd-style);
  border-color: var(--fbar-bd-color);
  border-radius: 0 0 10px 10px;
  filter: var(--drop-shadow);
}

div.bar:not(.first):not(.last) .title,
div.bar.first .title,
div.bar.last .title {
  text-align: center;
  font-family: var(--bar-title-font-family);
  font-size: var(--bar-title-font-size);
  font-weight: bold;
}

/* .title */

/*
.title {
a[href].title {
  display: inline-block;
  padding: 5px 5px;
  text-decoration: none;
  color: var(--header-title-fg-color1);
  background-color: var(--header-title-bg-color1);
  border: 2px outset var(--header-title-bd-color1);
  border-radius: 10px;
}

.title:hover,
.title:focus,
.title:active,
a[href].title:hover,
a[href].title:focus,
a[href].title:active {
  text-decoration: none;
  color: var(--header-title-fg-color2);
  background-color: var(--header-title-bg-color2);
  border: 2px inset var(--header-title-bd-color2);
}
*/

/* a[href].cbutton */

a[href].cbutton,
a[href].cbutton:visited,
a[href].disabled {
  display: inline-block;
  padding: 5px 10px;
  text-decoration: none;
  text-decoration-line: 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);
  border-radius: var(--cbutton-bd-radius-sm);
  outline: var(--cbutton-outline-width) var(--cbutton-outline-style1) var(--cbutton-outline-color1);
}

a[href].cbutton:hover,
a[href].cbutton:focus {
  text-decoration: none;
  text-decoration-line: none;
  color: var(--cbutton-fg-color2);
  background-color: var(--cbutton-bg-color2);
  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);
}

a[href].cbutton:active {
  text-decoration: none;
  text-decoration-line: none;
  color: var(--cbutton-fg-color3);
  background-color: var(--cbutton-bg-color3);
  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);
}

@media only screen and (min-width: 350px) {
  a[href].cbutton {
    border-radius: var(--cbutton-bd-radius-lg);
  }
}


/* User */

#userCtrl {
  display: block;
  float: right;
  height: 20px;
  width: 20px;
  padding: 2px;
/*  border: 1px solid red; */
}

#userCtrl .button {
  color: var(--header-bg-color);
}


/* #Search */

#Search {
  display: inline-block;
  max-width: 300px;
  height: 37px;
  margin: 0;
  padding: 0;
  text-align: center;
}

#Search > form {
  display: inline;
}

#Search .ctrlGroup {
  height: 37px;
  max-width: 400px;
  min-width: 300px;
  margin: 0 auto;
  padding: 0;
  border: var(--search-bd-width) var(--search-bd-style) var(--search-bd-color);
}

#Search .ctrlGroup input[name="r"],
#Search .ctrlGroup input[type=submit] {
  box-sizing: border-box;
  vertical-align: top;
  margin: 0;
  padding: 5px;
  font-family: var(--search-sub-font-family);
  font-weight: var(--search-sub-font-weight);
  font-size: var(--search-sub-font-size);
  border: var(--search-sub-bd-width) var(--search-sub-bd-style) var(--search-sub-bd-color);
  outline: var(--search-sub-outline-width) var(--search-sub-outline-style1) var(--search-sub-outline-color1);
}

/* #Search input */

#Search .ctrlGroup input[name="r"] {
  height: 37px;
  width: calc(100% - 37px);
/**/
  padding-left: 30px;
  color: var(--search-sub-fg-color1);
  background-color: var(--search-sub-bg-color1);
  background-image: var(--search-ref-bg-image);
  background-position: 7px center;
  background-size: 15px 15px;
  background-repeat: no-repeat;
/**/
  caret-color: var(--search-ref-caret-color);
  border: var(--search-sub-bd-width) var(--search-sub-bd-style1) var(--search-sub-bd-color1);
  border-right-color: transparent;
  border-radius: var(--search-bd-radius-sm) 0 0 var(--search-bd-radius-sm);
}

#Search .ctrlGroup input[name="r"]:hover,
#Search .ctrlGroup input[name="r"]:focus,
#Search .ctrlGroup input[name="r"]:active {
  caret-color: var(--search-ref-caret-color);
  color: var(--search-sub-fg-color2);
  background-color: var(--search-sub-bg-color2);
  border: var(--search-sub-bd-width) var(--search-sub-bd-style2) var(--search-sub-bd-color2);
  outline: var(--search-sub-outline-width) var(--search-sub-outline-style2) var(--search-sub-outline-color2);
}

#Search .ctrlGroup input[name="r"]:-webkit-autofill,
#Search .ctrlGroup input[name="r"]:-webkit-autofill:hover,
#Search .ctrlGroup input[name="r"]:-webkit-autofill:focus,
#Search .ctrlGroup input[name="r"]:-webkit-autofill:active {
/*
  caret-color: var(--search-ref-caret-color);
  color: var(--search-sub-fg-color2);
*/
  background-image: var(--search-ref-bg-image);
  /* -webkit-text-fill-color: var(--search-sub-fg-color2); */
  -webkit-text-fill-color: var(--search-sub-fg-color2);
  box-shadow: 0 0 0 1000px var(--search-sub-bg-color2) inset;
  transition: background-color 9999s ease-out;
}

#Search .ctrlGroup input[name="r"]::placeholder {
  font-weight: normal;
  color: var(--search-ref-placeholder-fg-color);
  z-index: 100;
}

/* #Search submit */

#Search .ctrlGroup input[type=submit] {
  height: 37px;
  line-height: 25px;
  width: 37px;
/*  padding-bottom: 10px; */
  color: var(--search-sub-fg-color1);
  background-color: var(--search-sub-bg-color1);
  border-radius: 0 var(--search-bd-radius-sm) var(--search-bd-radius-sm) 0;
  border: var(--search-sub-bd-width) var(--search-sub-bd-style1) var(--search-sub-bd-color1);
  border-left-color: transparent;
}

#Search .ctrlGroup input[type=submit]:hover,
#Search .ctrlGroup input[type=submit]:focus {
  color: var(--search-sub-fg-color2);
  background-color: var(--search-sub-bg-color2);
  border: var(--search-sub-bd-width) var(--search-sub-bd-style2) var(--search-sub-bd-color2);
  outline-color: var(--search-ref-outline-color2);
}

#Search .ctrlGroup input[type=submit]:active {
  border: var(--search-sub-bd-width) var(--search-sub-bd-style3) var(--search-sub-bd-color3);
}

/*
#Search .ctrlGroup input[name="r"]:hover,
#Search .ctrlGroup input[name="r"]:focus,
#Search .ctrlGroup input[name="r"]:active {

}

#Search .ctrlGroup input[type=submit]:hover,
#Search .ctrlGroup input[type=submit]:focus,
#Search .ctrlGroup input[type=submit]:active {

}

#Search .ctrlGroup input[name="r"]:focus,
#Search .ctrlGroup input[name="r"]:active,
#Search .ctrlGroup input[type=submit]:active,
#Search .ctrlGroup input[type=submit]:focus {

}
*/

@media only screen and (min-width: 430px) {
  #Search .ctrlGroup input[name="r"] {
    width: calc(100% - 37px);
/*
    padding-left: 30px;
    background-image: var(--search-ref-bg-image);
    background-position: 7px center;
    background-size: 15px 15px;
    background-repeat: no-repeat;
*/
    border-radius: var(--search-bd-radius-lg) 0 0 var(--search-bd-radius-lg);
  }
  #Search .ctrlGroup input[type=submit] {
    border-radius: 0 var(--search-bd-radius-lg) var(--search-bd-radius-lg) 0;
  }
}


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

#Title {
  width: fit-content;
  margin: 10px auto 10px auto;
  padding: 10px;
  font-family: var(--title-font-family);
  font-size: var(--title-font-size);
  font-weight: bold;
  text-align: center;
  filter: var(--drop-shadow);
}

/* TODO: Merge with cbutton? */

#Title a,
#Title a:visited {
  display: block;
  text-decoration: none;
  padding: 5px;
  color: var(--title-fg-color1);
  background-color: var(--title-bg-color1);
  border-width: var(--title-bd-width);
  border-style: var(--title-bd-style1);
  border-color: var(--title-bd-color1);
  border-radius: var(--title-bd-radius);
  outline: var(--cbutton-outline-width) var(--cbutton-outline-style1) var(--cbutton-outline-color1);
}

#Title a:hover,
#Title a:focus {
  color: var(--title-fg-color2);
  background-color: var(--title-bg-color2);
  border-style: var(--title-bd-style2);
  border-color: var(--title-bd-color2);
  outline: var(--cbutton-outline-width) var(--cbutton-outline-style2) var(--cbutton-outline-color2);
}

#Title a:active {
  color: var(--title-fg-color3);
  background-color: var(--title-bg-color3);
  border-style: var(--title-bd-style3);
  border-color: var(--title-bd-color3);
  outline: var(--cbutton-outline-width) var(--cbutton-outline-style3) var(--cbutton-outline-color3);
}

#Title .subtitle {
  width: calc(100% - 50px);
  margin: 10px auto;
  padding: 5px;
  color: var(--subtitle-fg-color);
  background-color: var(--subtitle-bg-color);
  border-width: var(--subtitle-bd-width);
  border-style: var(--subtitle-bd-style);
  border-color: var(--subtitle-bd-color);
  border-radius: var(--subtitle-bd-radius);
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Shared */

@media only screen and (min-width: 485px) {
  :root {
    --fbutton-height: var(--fbutton-height-lg);
    --fbutton-width: var(--fbutton-width-lg);
    --ctrl-width: var(--ctrl-width-lg);
  }
}

/* Notes:
 * caret-color
 * accent-fg-color: checkbox, radio, range, <progress>
 */

#fails {
  display: block;
  min-height: 100px;
  max-width: 600px;
  min-width: 320px;
  line-height: 1.2em;
  margin: 10px auto 20px auto;
  padding: 10px;
  font-size: var(--fails-font-size);
  font-weight: bold;
  color: var(--fails-fg-color);
  background-color: var(--fails-bg-color);
  border: var(--fails-bd-width) var(--fails-bd-style) var(--fails-bd-color);
  border-radius: 5px;
}

#fails .head {
  text-align: center;
}

#fail > .head {

}

#fail > .body {

}

#fail > .head > .alert_icon {
  color: yellow;
  font-weight: bold;
  font-size: 1.2em;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Top Button */

a > #TopButton,
a > #TopButton:visited {
  position: fixed;
  right: 15px;
  bottom: 0;
  width: 25px;
  height: 25px;
  padding: 2px 1px 1px 1px;
  margin: 0;
  text-align: center;
  line-height: 25px;
  font-size: var(--topbutton-font-size);
  color: var(--topbutton-fg-color1);
  background-color: var(--topbutton-bg-color1);
  border: var(--topbutton-bd-width) var(--topbutton-bd-style1) var(--topbutton-bd-color1);
  border-bottom: var(--topbutton-bd-width) solid var(--topbutton-bg-color1);
  border-radius: 10px 10px 0 0;
}

a > #TopButton:hover,
a > #TopButton:focus {
  color: var(--topbutton-fg-color2);
  background-color: var(--topbutton-bg-color2);
  border: var(--topbutton-bd-width) var(--topbutton-bd-style2) var(--topbutton-bd-color2);
  border-bottom: var(--topbutton-bd-width) solid var(--topbutton-bg-color2);
}

a > #TopButton:active {
  color: var(--topbutton-fg-color3);
  background-color: var(--topbutton-bg-color3);
  border: var(--topbutton-bd-width) var(--topbutton-bd-style3) var(--topbutton-bd-color3);
  border-bottom: var(--topbutton-bd-width) solid var(--topbutton-bg-color3);
}


/* .badgeGrp */

.badgeGrp {
  text-align: center;
  font-variant: small-caps;
}

.badgeGrp > div {
  display: inline-block;
  width: 48%;
}

#Counter,
#Verses {
  display: inline-block;
  vertical-align: middle;
  width: fit-content;
  padding: 5px;
  text-align: center;
  color: #DDD;
  background-color: black;
  border: 1px solid black;
  border-radius: 5px;
  filter: var(--drop-shadow);
}

#Counter:hover,
#Counter:focus,
#Counter:active,
#Verses:hover,
#Verses:focus,
#Verses:active {
  outline: 1px solid var(--bd-color-lo3);
}

#Counter img,
#Verses img {
  border: none;
  text-decoration: none;
  border-radius: 5px;
}

#Verses > a,
#Verses > a:visited {
  height: 100%;
  width: 100%;
  color: var(--verses-link-fg-color1);
}

#Verses > a:hover,
#Verses > a:focus {
  color: var(--verses-link-fg-color2);
}

#Verses > a:active {
  color: var(--verses-link-fg-color3);
}

/* #Compare */

#Compare {

}

.has {
	font-weight: bold;
	font-size: 1.2em;
	text-align: center;
}

.yes {
	color: green;
}

.no {
	color: red;
}

/* earmark */

.sbutton.earmark {
  position: relative;
}

.sbutton.earmark::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;

  width: 14px;
  height: 14px;
  background: red;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  pointer-events: none;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Scrollbars */

/* Firefox */

html, div, textarea {
/*
  scrollbar-width: var(--scrollbar-width, auto);
  scrollbar-color: var(--scrollbar-fg-color) var(--scrollbar-bg-color);
*/
}

/* Chrome, Edge, and Safari */

/* scrollbar */
/* NOTE: Do not set to unset or initial. Must set variable hard code, else scrollbar */
/* disappears. */
html::-webkit-scrollbar,
div::-webkit-scrollbar,
textarea::-webkit-scrollbar {
/*
  width: var(--scrollbar-width) !important;
*/
}

/* scrollbar button */
html::-webkit-scrollbar-button,
div::-webkit-scrollbar-button,
textarea::-webkit-scrollbar-button {
/*
  background-color: var(--scrollbar-button-bg-color1);
  border-width: var(--scrollbar-button-bd-width);
  border-style: var(--scrollbar-button-bd-style);
  border-color: var(--scrollbar-button-bd-color1);
  border-radius: var(--scrollbar-button-bd-radius);
  box-shadow: var(--scrollbar-box-shadow);
*/
}

html::-webkit-scrollbar-button:hover,
div::-webkit-scrollbar-button:hover,
textarea::-webkit-scrollbar-button:hover {
/*
  background-color: var(--scrollbar-button-bg-color2);
  border-width: var(--scrollbar-button-bd-width);
  border-style: var(--scrollbar-button-bd-style2);
  border-color: var(--scrollbar-button-bd-color2);
  border-radius: var(--scrollbar-button-bd-radius2);
*/
}

/* scrollbar thumb */
html::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
/*
  background-color: var(--scrollbar-thumb-bg-color1);
  border-width: var(--scrollbar-thumb-bd-width);
  border-style: var(--scrollbar-thumb-bd-style);
  border-color: var(--scrollbar-thumb-bd-color1);
  border-radius: var(--scrollbar-thumb-bd-radius);
  box-shadow: var(--scrollbar-box-shadow);
*/
}

html::-webkit-scrollbar-thumb:hover,
div::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover {
/*
  background-color: var(--scrollbar-thumb-bg-color2);
  border-width: var(--scrollbar-thumb-bd-width);
  border-style: var(--scrollbar-thumb-bd-style2);
  border-color: var(--scrollbar-thumb-bd-color2);
  border-radius: var(--scrollbar-thumb-bd-radius2);
*/
}

/* scrollbar track */
html::-webkit-scrollbar-track,
div::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
/*
  background-color: var(--scrollbar-track-bg-color1);
  border-width: var(--scrollbar-track-bd-width);
  border-style: var(--scrollbar-track-bd-style);
  border-color: var(--scrollbar-track-bd-color1);
  border-radius: var(--scrollbar-track-bd-radius);
  box-shadow: var(--scrollbar-box-shadow);
*/
}

html::-webkit-scrollbar-track:hover,
div::-webkit-scrollbar-track:hover,
textarea::-webkit-scrollbar-track:hover {
/*
  background-color: var(--scrollbar-track-bg-color2);
  border-width: var(--scrollbar-track-bd-width);
  border-style: var(--scrollbar-track-bd-style2);
  border-color: var(--scrollbar-track-bd-color2);
  border-radius: var(--scrollbar-track-bd-radius2);
*/
}

/* scrollbar track piece */
html::-webkit-scrollbar-track-piece,
div::-webkit-scrollbar-track-piece,
textarea::-webkit-scrollbar-track-piece {
/*
  background-color: var(--scrollbar-track-piece-bg-color1);
  border-width: var(--scrollbar-track-piece-bd-width);
  border-style: var(--scrollbar-track-piece-bd-style);
  border-color: var(--scrollbar-track-piece-bd-color1);
  border-radius: var(--scrollbar-track-piece-bd-radius);
  box-shadow: var(--scrollbar-box-shadow);
*/
}

html::-webkit-scrollbar-track-piece:hover,
div::-webkit-scrollbar-track-piece:hover,
textarea::-webkit-scrollbar-track-piece:hover {
/*
  background-color: var(--scrollbar-track-piece-bg-color2);
  border-width: var(--scrollbar-track-piece-bd-width);
  border-style: var(--scrollbar-track-piece-bd-style2);
  border-color: var(--scrollbar-track-piece-bd-color2);
  border-radius: var(--scrollbar-track-piece-bd-radius2);
*/
}

/* scrollbar corner */
html::-webkit-scrollbar-corner,
div::-webkit-scrollbar-corner,
textarea::-webkit-scrollbar-corner {
/*
  background-color: var(--scrollbar-corner-bg-color1);
  border-width: var(--scrollbar-corner-bd-width);
  border-style: var(--scrollbar-corner-bd-style);
  border-color: var(--scrollbar-corner-bd-color1);
  box-shadow: var(--scrollbar-box-shadow);
*/
}

html::-webkit-scrollbar-corner:hover,
div::-webkit-scrollbar-corner:hover,
textarea::-webkit-scrollbar-corner:hover {
/*
  background-color: var(--scrollbar-corner-bg-color2);
  border-width: var(--scrollbar-corner-bd-width);
  border-style: var(--scrollbar-corner-bd-style);
  border-color: var(--scrollbar-corner-bd-color2);
*/
}

/* textarea resizer */
textarea::-webkit-resizer {
/*
  background-color: var(--resizer-bg-color1);
  border-width: var(--resizer-bd-width);
  border-style: var(--resizer-bd-style);
  border-color: var(--resizer-bd-color1);
  border-radius: var(--resizer-bd-radius);
  box-shadow: var(--resizer-box-shadow);
*/
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Misc */

.shadow {
  filter: var(--drop-shadow);
}

.center {
  text-align: center;
}

.clear {
  clear: both;
}

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

/* Mobile Phones */

/*
  [class="col-"] {
    width: 100%;
  }
*/

/* Special */

/* Used width, e.g. Mechanical Translation, to force-break long words */
.breaker {
  word-break: break-all;
}

/* Misc */

.textured {
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,.06) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(0,0,0,.12) 0 1px, transparent 2px),
    #111;
  background-size: 18px 18px, 22px 22px, 26px 26px;
  background-position: 0 0, 6px 9px, 11px 3px;
}

.info-pop {
  position: absolute;
  max-width: 20em;
  padding: 0.5em 0.75em;
  background: var(--bg);
  color: var(--fg);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  z-index: 10;
}

.info-pop[hidden] {
  display: none;
}

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