:root {
    --max-width: 720px;
    --snackbar-padding: 10px;
    --dark-background: #323232;
    --table-cell-padding: 8px;
    --font-size-multiplier: 1;
    --mdl-major-color: rgb(255,110,64);
    --mdl-accent-color: rgb(255,193,7);

    /* Colors overridden in dark mode. */
    --background-color: white;
    --highlight-red: rgb(245, 150, 147);
    --highlight-red-50: rgb(245, 150, 147, .5);
    --highlight-yellow: rgb(250, 217, 120);
    --highlight-yellow-50: rgb(250, 217, 120, .5);
    --highlight-green: rgb(136, 227, 140);
    --highlight-green-50: rgb(136, 227, 140, .5);
    --highlight-blue: rgb(141, 188, 252);
    --highlight-blue-50: rgb(141, 188, 252, .5);
    --highlight-gray: rgb(201, 201, 201);
    --highlight-gray-50: rgb(201, 201, 201, .5);
    --highlight-purple: rgb(205, 134, 252);
    --highlight-purple-50: rgb(205, 134, 252, .5);
    --highlighted-commentary-indicator-red: var(--highlight-red);
    --highlighted-commentary-indicator-yellow: var(--highlight-yellow);
    --highlighted-commentary-indicator-green: var(--highlight-green);
    --highlighted-commentary-indicator-blue: var(--highlight-blue);
    --highlighted-commentary-indicator-gray: var(--highlight-gray);
    --text-color: var(--dark-background);
    --english-text-color: #555;
    --rashi-quotation-text-color: #aa3232;
    --snackbar-button-color: var(--mdl-accent-color);
    --snackbar-disabled-button-color: rgb(176, 133, 4) ;
    --snackbar-background-color: var(--text-color);
    --snackbar-text-color: var(--background-color);
    --modal-box-shadow-color: #888;
    --modal-button-color: var(--mdl-major-color);
    --mesorat-hashas-purple: rgb(136, 95, 250)
}

@media only screen and (min-width: 720px) {
    :root {
        --font-size-multiplier: 1.1;
    }
}

html {
    background-color: var(--background-color);
    color: var(--text-color);
}

html, body {
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

/* https://opensiddur.org/help/fonts/ */
@font-face{
    font-family: "Taamey David";
    src:url(/font/TaameyDavidCLM-Medium.ttf)
}
@font-face{
    font-family: "Taamey David";
    src:url(/font/TaameyDavidCLM-Bold.ttf);
    font-weight:700
}
@font-face{
    font-family: "Taamey David";
    src:url(/font/TaameyDavidCLM-MediumOblique.ttf);
    font-style:italic
}
@font-face{
    font-family: "Taamey David";
    src:url(/font/TaameyDavidCLM-BoldOblique.ttf);
    font-style:italic;
    font-weight:700
}

/* https://opensiddur.org/help/fonts/ */
@font-face{
    font-family: 'Fira Light';
    src:url(/font/FiraGO-Light.ttf)
}

.gemara-container .hebrew, .snackbar .hebrew {
    font-size: calc(1.5em * var(--font-size-multiplier));
    line-height: calc(1.5em * var(--font-size-multiplier));
}

.commentaryRow .hebrew, .hebrew .commentary_header {
    font-size: calc(1.1em * var(--font-size-multiplier));
}
.table-row {
    clear: both;
}
.table-cell {
    padding: 0px var(--table-cell-padding);
    float: left;
}

.highlighted-red {
    background: var(--highlight-red);
}
.highlighted-yellow {
    background: var(--highlight-yellow);
}
.highlighted-green {
    background: var(--highlight-green);
}
.highlighted-blue {
    background: var(--highlight-blue);
}
.highlighted-gray {
    background: var(--highlight-gray);
}

.hebrew .highlighted {
    padding: 5px 0px;
}
.english .highlighted {
    padding: 2px 0px;
}

.amudContainer:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.amudContainer .hebrew {
    width: calc(55% - 2 * var(--table-cell-padding));
}
.hebrew.siblingExpanded {
    padding-right: calc(2 * var(--table-cell-padding));
}

.fullRow {
    width: calc(100% - 2 * var(--table-cell-padding)) !important;
}

.lineClamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/*
.lineClamped:has(.foundTerm) {
    -webkit-box-orient: inherit;
    overflow: inherit;
}
*/
.english.lineClamped, .english.neverWrap {
    width: calc(45% - 2 * var(--table-cell-padding));
}
.english.translationWrapped {
    /* subtract for right padding */
    width: calc(100% - 2 * var(--table-cell-padding));

    float: none;
}
.commentary_header {
    text-decoration: underline;
    display: inline-block;
    user-select: none;
}

/* Unfortuantely there isn't a more direct way of referencing the parents of .commentary_header
items. */
.show-buttons > .table-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 0px 8px;
}

.highlighted-commentary-indicator-red {
    color: var(--highlighted-commentary-indicator-red);
    margin-inline-start: 4px;
}
.highlighted-commentary-indicator-yellow {
    color: var(--highlighted-commentary-indicator-yellow);
    margin-inline-start: 4px;
}
.highlighted-commentary-indicator-green {
    color: var(--highlighted-commentary-indicator-green);
    margin-inline-start: 4px;
}
.highlighted-commentary-indicator-blue {
    color: var(--highlighted-commentary-indicator-blue);
    margin-inline-start: 4px;
}
.highlighted-commentary-indicator-gray {
    color: var(--highlighted-commentary-indicator-gray);
    margin-inline-start: 4px;
}

.commentary_header.has-nested-commentaries::after {
    /* Draw over the parent's underline and effectively erase it */
    text-decoration: underline;
    text-decoration-color: var(--background-color);

    margin-inline-start: 2px;
    content: "+";
    font-size: smaller;
}

#main-contents {
    margin: auto;
    max-width: var(--max-width);
}
#inner-content {
    padding: 1em;
}

.hebrew {
    font-family: "Taamey David", "Times New Roman", serif;
    line-height: calc(1.7em * var(--font-size-multiplier));
}
.hebrew-emphasis, .commentaryRow .parenthesized {
    font-family: "Fira Light";
    font-size: 14px;
}

.rashi-quotation {
    color: var(--rashi-quotation-text-color);
}

.english {
    color: var(--english-text-color);
}
.english {
    padding-top: calc(1.25px * var(--font-size-multiplier));
}
.gemara-container .english {
    padding-top: calc(2.75px * var(--font-size-multiplier));
}
.navigation-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.navigation-button-container.next {
    margin-top: 32px;
}
.navigation-button:not(.edit-button) {
    position: relative;
    inset-inline-start: 16px;
}
.edit-button {
    position: relative;
    inset-inline-start: 24px;
}
*:focus {
    outline: none;
}

h1, h2 {
    text-align: center;
}

h1 {
    font-family: "Taamey David";
    font-size:  4em;
}
h2, .title, .titleHebrew {
    font-family: "Helvetica Neue";
    font-size: 2.5em;
    font-weight: 200;
}
.titleHebrew {
    font-family: "Taamey David";
    text-align: right;
    width: 100%;
    line-height: 36px;
}
.titleHebrew sub, .titleHebrew sup {
    font-size: 50%;
}
.segmentCount {
    font-size: .5em !important;
    color: #999;
}
.titleContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0px;
}
.removeSectionButton {
    margin-inline-start: 20px;
}

#snackbarHost {
    position: fixed;
    bottom: 0px;
    width: var(--max-width);
    transition: padding-top 200ms, padding-bottom 200ms;
}

.snackbarSelfPosition {
    position: fixed;
    bottom: -400px;
    width: calc(var(--max-width) - 2 * var(--snackbar-padding));
}

#snackbarHost, .snackbarSelfPosition {
    color: var(--snackbar-text-color);
    z-index: 3;
}

#snackbars, .snackbarSelfPosition {
    border-radius: 2px 2px 0 0;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, .5);
    background-color: var(--snackbar-background-color);
    padding: var(--snackbar-padding);
}

@media only screen and (max-width: 720px) {
    /* For mobile phones: */
    .snackbarSelfPosition {
        width: calc(100% - 2 * var(--snackbar-padding));
    }
    #snackbarHost {
        width: 100%;
    }
}

.snackbar > * {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
}

.snackbar p:last-of-type {
    margin-bottom: 0px;
}

.snackbar-buttons {
    display: flex;
    justify-content: space-between;
}

.commentary_header.psukim,
.commentary_header.mishna,
.commentary_header.tosefta,
.commentary_header.show-more,
.commentary_header.topics,
.commentary_header.expandedContext,
.commentary_header.comment-alternatives,
.commentary_header.comment-context,
.commentary_header.jastrow {
    color: gray;
}
.commentary_header.ein-mishpat,
.commentary_header.shulchan-arukh,
.commentary_header.mishnah-berura,
.commentary_header.mishneh-torah,
.commentary_header.raavad,
.commentary_header.kessef-mishneh,
.commentary_header.lechem-mishneh,
.commentary_header.peninei-halacha,
.commentary_header.sefer-hachinukh {
    color: rgb(68,138,255);
}
.commentary_header.mesorat-hashas,
.commentary_header.torah-temima,
.commentary_header.mishna-reference {
    color: var(--mesorat-hashas-purple);
}
.text-loading-spinner {
    display: block;
    margin: auto;
}
#initial-load-spinner {
    padding-top: 20px;
}
.mdl-button {
    text-transform: none;
}

.snackbar .mdl-button {
    min-height: 36px;
    line-height: unset;
    height: unset;
    color: var(--snackbar-button-color);
}

.snackbar .mdl-button--raised {
    background: rgba(158,158,158,.2);
}

.snackbar .mdl-button--raised:hover {
    background: rgba(200,200,200,.2);
}

.gemara-container, .table-row {
    /* Without this, the background color for swipeable posts doesn't work correctly.
     Explanation: https://stackoverflow.com/questions/944663/why-does-background-color-have-no-effect-on-this-div
   */
    overflow: hidden;
}
.segment-container::after {
    content: "";
    clear: both;
    display: block;
    height: 10px;
}
#main-contents {
    /* Provide space for the snackbar. */
    padding-bottom: 80px;
}

.modal-direction-button {
    min-width: 36px;
    padding: 0px;
}
.modal-container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgb(0, 0, 0, 0.3);
}

.modal {
    --margin: 10px;
    position: absolute;
    top: 25%;
    left: calc(50%);
    transform: translate(calc(-50% - var(--margin)), -50%);
    background-color: var(--background-color);
    margin: var(--margin);
    width: calc(100% - 2 * var(--margin));
    box-shadow: 0px 0px 10px 5px var(--modal-box-shadow-color);
    border-radius: 10px;
}
.modal .mdl-textfield:has(> textarea) {
    width: 100%;
}

.modal-direction-active {
    color: var(--modal-button-color);
}
.modal-direction {
    line-height: 36px;
    padding: 0px 4px;
}

.modal textarea[dir="ltr"] {
    text-align: left;
}
.modal textarea[dir="rtl"] {
    text-align: right;
}

@media only screen and (min-width: 720px) {
    .modal {
        min-width:  400px;
        width: initial;
    }
}

.modal-content {
    padding: 10px
}

.modal-content .mdl-button--accent {
    color: var(--modal-button-color);
}

.modal-cancel {
    color: var(--text-color) !important;
}

.segment-container:has(> .hadran) {
    padding-bottom: 80px;
}

.hidden-host {
    position: absolute;
    /* Setting left to 0 makes sure that the hidden host doesn't take the margin/padding of its
    parents and therefore push the width of the body beyond 100%. For consistency & clarify, top is
    also set though it doesn't have a practical effect. */
    top: 0;
    left: 0;

    opacity: 0;
    max-width: var(--max-width);
    width: 100%;

    /* Disable touch events so that the hidden host appears totally invisible to the user. */
    pointer-events: none;
}

.image-pointer {
    vertical-align: super;
    font-size: smaller;
    line-height: 0px; /* Makes sure that the line height is not modified */c
}

.image-ref-container {
    float: right;
    clear: right;
    --padding: 10px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.image-ref-text {
    float: right;
    padding-left: 10px;
}
.image-ref {
    float: left;
}

.personal-comment-bold {
    font-weight: 700;
}
.personal-comment-italic {
    font-style: italic;
}
.personal-comment-underline {
    text-decoration: underline;
}
.personal-comment-strikethrough {
    text-decoration: line-through;
}

.icon-highlight-red {
    color: var(--highlight-red);
}
.icon-highlight-yellow {
    color: var(--highlight-yellow);
}
.icon-highlight-green {
    color: var(--highlight-green);
}
.icon-highlight-blue {
    color: var(--highlight-blue);
}
.icon-highlight-gray {
    color: var(--highlight-gray);
}

.text-selection-divider {
    user-select: none;
}
.stacked_mdl_icons {
    position: relative;
    text-align: center;
}
.stacked_mdl_icons > * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.aseret-yimei-teshuva, .annenu {
    color: var(--highlight-gray);
    background: var(--mesorat-hashas-purple);
    display: inline-block; /* Creates better cross-line text bolding */
}

.aseret-yimei-teshuva-word {
    color: var(--highlight-gray);
    background: var(--mesorat-hashas-purple);
}

.tzizit-start {
    color: var(--highlight-blue);
    user-select: none;
}

.really-big-text {
    font-size: 32px;
    line-height: 48px;
}

#preferences-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--background-color);
    box-shadow: 5px 10px 30px #888888;
    z-index: 5;
}

#preferences-container button {
    margin: auto;
    padding: 20px;
}


#showSettings, #showSearch {
    color: var(--highlight-gray);
}

#showSettings {
    position: fixed;
    padding: 25px;
    top: 15px;
    left: 15px;
}

#showSearch {
    position: static;
    padding-bottom: 5px;
    padding-left: 8px;
}

@media only screen and (min-width: 720px) {
    #showSearch {
        position: fixed;
        bottom: 15px;
        left: 15px;
        padding: 0px;
    }
}

#showSearch > button {
    padding: 25px;
}

/* Important for multi-line preferences text */
.mdl-radio {
    vertical-align: baseline;
}
.directlyReferencedLine {
    background: var(--highlight-yellow-50);
}

@keyframes fadeInBackground {
  0%   {background: var(--highlight-yellow-50);}
  100% {background: none;}
}

.fadeInBackground {
    animation-name: fadeInBackground;
    animation-duration: 2s;
}

.material-icons {
    user-select: none;
}

.inPageSearchBar {
    flex-grow: 1;
}

.inPageSearchBar:empty::before {
    content: attr(placeholder);
    color: #aaa;
}

.foundTerm {
    padding: 0px 1px;
    margin: 0px -1px;
}

.foundTerm.yellow {
    background: var(--highlight-yellow-50);
    box-shadow: 0px 0px 4px var(--highlight-yellow);
}
.foundTerm.gray {
    background: var(--highlight-gray-50);
    box-shadow: 0px 0px 4px var(--highlight-gray);
}
.foundTerm.red {
    background: var(--highlight-red-50);
    box-shadow: 0px 0px 4px var(--highlight-red);
}
.foundTerm.green {
    background: var(--highlight-green-50);
    box-shadow: 0px 0px 4px var(--highlight-green);
}
.foundTerm.blue {
    background: var(--highlight-blue-50);
    box-shadow: 0px 0px 4px var(--highlight-blue);
}
.foundTerm.purple {
    background: var(--highlight-purple-50);
    box-shadow: 0px 0px 4px var(--highlight-purple);
}

.inPageSearch .mdl-button {
    padding: 0;
    margin: 0;
    min-width: 40px;
}

.searchMatchCounter {
    padding: 0 10px;
}

.keybindingSelectedRow {
    background: #0f03;
}

.keybindingSelectedButton {
    background: #0f06;
}

.steinsaltz-comments img {
    width: 300px;
    padding-bottom: 10px;
}

.steinsaltz-comments .hebrew img {
    float: left;
    padding-right: 10px;
}

.steinsaltz-comments .english img {
    float: right;
    padding-left: 10px;
}

#errors .lang-hebrew {
    text-align: right;
}

.depthIndicator {
    text-decoration: none !important;
    padding-left: .3em;
    /* backup in case its just a default commentary with no specified color */
    color: rgb(255, 110, 64);
}