/* the :root pseudo-class, which applies globally across the document. */
:root
{
    /*
        A variable that holds the "h" of the hsl colors defined below and elsewhere, so that the site has a consistent hue.
        Use var(--hsl-hue) to access it.
    */
    --hsl-hue: 180;
}

body
{
    background-color: hsl(180, 100%, 95%);
    background-color: hsl(var(--hsl-hue), 100%, 95%);
}

.ernots_SiteHeader
{
    background-color: hsl(180, 100%, 90%);
    background-color: hsl(var(--hsl-hue), 100%, 90%);
}

.ernots_App textarea
{
    width: min(100%, 100ch);
    height: 250px;
}

.ernots_App label
{
    display: block;
    font-size: 125%;
}

.ernots_App p
{
    margin-block-start: .5em;
    margin-block-end: .5em;
}

.ernots_App fieldset
{
    margin: 0.1em;
    margin-top: 0.2em;
    margin-bottom: 0.5em;
    padding: 0.2em;
}

.ernots_CenteredCell
{
    text-align: center;
}

.ernots_HorizontalLine
{
    border-top-width: 3px;
    border-top-color: rgba(0, 0, 0, .5);
    border-top-style: solid;

}

.ernots_HorizontalLine2
{
    height: 2px;
    background-color: rgba(0, 0, 0, .5);
}

.ernots_Warning
{
    color: red;
}

.ernots_Notice
{
    color: green;
}

.ernots_InfoTrigger
{
    color: blue;
}
.ernots_SiteHeader .ernots_SiteName
{
    text-align: center;
    font-weight: bold;
    font-size: xx-large;
}

.ernots_SiteHeader .ernots_SiteSubtitle
{
    text-align: center;
    font-size: large;
    padding-bottom: .5em;
}

.ernots_SiteHeader .ernots_NavWrapper
{
    width: 100%;
    display: flex;
    white-space: pre;
}

.ernots_SiteHeader .ernots_NavWrapperExpander
{
    flex-grow: 1;
}

.ernots_SiteHeader .ernots_BackendUnreachableMsg
{
    color: red;
}
.ernots_PresetTable td
{
     text-align: center;
}
.ernots_BookUnsavedChanges
{
    position: sticky;
    top: 0px;
    border: 1px solid red;
    background-color: yellow;
}

.ernots_RenderSentence
{
    width: 100%;
}

.ernots_RenderSentence_Left
{
    width: 0%;
    vertical-align: top;
}

.ernots_RenderSentence[data-bookmarked=true]
{
    background-color: hsl(var(--hsl-hue), 100%, 85%);
}

.ernots_SelectedWord
{
    background-color: hsl(var(--hsl-hue), 100%, 75%);
}
.ernots_EWRSetBookmarkButton_Success
{
    background-color: green;
}

.ernots_EWRSetBookmarkButton_Error
{
    background-color: red;
}

.ernots_EWRSetBookmarkButton_Pending
{
    background-color: yellow;
}

.ernots_EWRSentenceTranslationEditor textarea
{
    width: 100%;
    height: 4em;
}
.ernots_TranslationLanguagesEdit select
{
    width: 25ch;
    height: 6em;
}
.ernots_BookTranslationEdit
{
    border: 1px solid;
    width: 510px;
    margin-bottom: 0.25em;
    border-color: hsl(var(--hsl-hue), 100%, 75%);
}

.ernots_InfoPopupOverlay
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.ernots_InfoPopup
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: white;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    max-width: 90%; /* Ensure it fits smaller screens */
    word-wrap: break-word; /* Prevent long words from overflowing */
}

.ernots_InfoTrigger
{
    cursor: pointer;
    font-size: 125%;
}

label .ernots_InfoTrigger
{
    cursor: pointer;
    font-size: 100%;
}

/*# sourceMappingURL=main.a9558c0a.css.map*/