/* Style widoku HTML. Nie należy tu ustawiać position ani marginesów */
.htmlview {
    counter-reset: main;
    font-size: 16px;
    font-family: "Georgia", "Times New Roman", serif;
    line-height: 1.5em;
    padding: 3em 3em 3em 45px;
    overflow-y: scroll;
    overflow-x: auto;


    #caret {
        display: inline-block;
        width: 2px;
        height: 1em;
        overflow: hidden;
        margin-left:-1px;
        margin-right: -1px;

        textarea {
            border: none;
            background: #888;

            &:focus {
                background: red;
            }
        }
    }
}

.htmlview[data-tag-names-visible] {
    padding-left: 90px;
}

.htmlview *[x-node = 'RDF'][x-ns = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#'] {
    display: none;
}

.htmlview * {
    position: relative;
}

.htmlview div {
    max-width: 36em;
}


// unused?
.htmlview #toc {
    display: none;
}

// where is it used, if any?
.htmlview a {
    color: blue;
    text-decoration: none;
}

.htmlview a:hover {
    text-decoration: none;
}

// unused?
.htmlview p {
    margin: 0;
}

.htmlview pre {
	overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */ /*
	width: 99%; */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}

/* ============= */
/* = Numbering = */
/* ============= */
.htmlview .anchor {
    position: relative;
    margin: 0;
    left: -2.2em;
    color: #777;
    font-size: 12px;
    width: 2em;
    text-align: center;
    padding: 0.25em 0.7em;
    line-height: 1.5em;
}

.htmlview .anchor:hover, .htmlview .anchor:active {
    color: #FFF;
    background-color: #CCC;
}

/* =================== */
/* = Custom elements = */
/* =================== */

.htmlview .strofa {
    margin: 1.5em 0 0.5em auto;
}

/* wersy */
.htmlview *[x-verse]:after {
    content: "\feff";
}

.htmlview .strofa .wers_wciety, .htmlview .strofa .wers_wciety[x-a-wl-typ='1'] {
    margin-left: 1em;
}

.htmlview .strofa .wers_wciety[x-a-wl-typ='2'], .htmlview .strofa .wers_cd {
    margin-left: 2em;
}

.htmlview .strofa .wers_wciety[x-a-wl-typ='3'] {
    margin-left: 3em;
}

.htmlview .strofa .wers_wciety[x-a-wl-typ='4'] {
    margin-left: 4em;
}

.htmlview .strofa .wers_wciety[x-a-wl-typ='5'] {
    margin-left: 5em;
}

.htmlview .strofa .wers_wciety[x-a-wl-typ='6'] {
    margin-left: 6em;
}

/* błędne wersy */
.htmlview *:not([x-node='strofa']) > *[x-verse]::after {
    content: "Ten wers znajduje się poza strofą.";
    display: inline;
    background: red;
    font-size: 8pt;
    border: 1px solid black;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 1px 1em;
    margin-left: 1em;
    vertical-align: super;
}

.htmlview .kwestia .strofa {
    margin: 0;
}


.htmlview div.ramka {
    border: 1px darkgray solid;
}


.htmlview hr.sekcja_asterysk {
    border: none;
    padding: 0;
    margin: 1.5em 0;
    text-align: center;
}

.htmlview div.lista_osob ol {
    list-style: none;
    padding: 0 0 0 1.5em;
}

.htmlview .ilustr img {
    max-width: 100%;
}

.htmlview .parse-warning {
    display: block;
    font-size: 10pt;
    background: #C0C0C0;
    margin: 1em;
}

.parse-warning .message {
    color: purple;
    font-weight: bold;
}

/* Uwaga/Extra */
.htmlview .uwaga {
    background-color: #96e0e4;
    border: 1px solid black;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    display: block;
    font-size: 10pt;
    line-height: 12pt;
    padding: 2px 1em;
    float: right;
    max-width: 20%;
    max-height: 24pt;
    margin-left: 0.5em;
    z-index: 500;
}

div[x-node] > .uwaga {
    float: none;
    padding: 0.5em 1em;
    margin: 1em;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid black;
}

.htmlview .uwaga:hover {
    max-height: 100%;
}

.htmlview .annotation-inline-box .uwaga {
    max-height: 100%;
}

/* Motywy */
/* ======================== */
/* = Footnotes and themes = */
/* ======================== */
.htmlview .begin, .htmlview .end {
    background: green;
}

.htmlview [x-node='motyw'] {
    /* position: absolute; */
    float: right;
    left: auto;
    clear: right;
    width: 10em;

    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;

    font-size: 13px;
    line-height: 18px;
    background-color: #fff;
    /*    border: 1px solid gray;

     border-right: none;
     */
    z-index: 1;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    user-select: none;
    margin-right: -12em;
    text-align: left;
    color: #999;
}

.htmlview .canon {
    color: black;
}

.htmlview .noncanon {
    color: #d00;
}

.htmlview .motyw[x-editable] {
    border-left: 4px solid #DDD;
    padding: 0.2em 0.2em 0.2em 0.5em;
    margin-top: 0.2em;
}

/*
 * Przypisy
 */
/* Znaczniki w tekście */
.annotation {
    font-style: normal;
}

.htmlview .annotation:before {
    content: "[" counter(main) "]";
    counter-increment: main;
	vertical-align: super;
    text-decoration: none;
	font-size: 66%;
}

.htmlview .annotation:hover {
    background-color: #ffcccc;
}
.htmlview .pe .annotation:hover {
    background-color: #96e0e4;
}
*.htmlview *.annotation-inline-box {
    position: static;
}

/*
 * Przypisy w tekście
 */
 
.htmlview .annotation-inline-box {
    &:hover > span[x-annotation-box] {
        display: block;
    }

    > span[x-annotation-box] {
        display: none;
        width: 300px;
        font-size: 10pt;
        line-height: 12pt;
        font-weight: normal;
        font-style: normal;
        background: #fffe93;
        border: 1px solid black;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        padding: 3px 5px;
        text-decoration: none;
        z-index: 600;

        position: absolute;
        left: 0;
        top: 1em;

        &.editing {
            display: block;
            background: #93ff93;
        }
    }
    
}

/*
 * EDITABLE ELEMENTS
 */
.htmlview *[x-editable] {
    position: relative;
    padding: 2px;
    margin-left: 0;
    border: 1px solid transparent;
}

/* focused editable element */
.htmlview *[x-editable]:hover {
    z-index: 900;
}

.htmlview *[x-editable][x-open] {
    visibility: hidden;
}

.active-block-button, .delete-button, .accept-button, .tytul-button, .wyroznienie-button, .slowo-button, .znak-button {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 16px;
    line-height: 1.5;
    position: absolute;
    top: -28px;
    left: -1px;
    width: 72px;
    height: 28px;
    display: block;
    /*    margin: 4px 0 2px 0;*/
    padding: 5px 5px 2px 5px;
    background-color: #FAFAFA;
    /*    z-index: 3000;*/
    /*    color: #FFF;
     z-index: 1500;
     */
    border: 1px solid #DDD;
    border-bottom: none;
}

.delete-button {
    left: 70px;
}

.tytul-button {
    left:150px;
    width:100px;
}

.wyroznienie-button {
    left:250px;
    width:100px;
}
.slowo-button {
    left:350px;
    width:100px;
}
.znak-button {
    left:450px;
    width:100px;
}
.uwaga-button {
    right: 0;
    left: auto;
}

.active-block-button:hover, .active-block-button:active,
.delete-button:hover, .delete-button:active,
.accept-button:hover, .accept-button:active,
.tytul-button:hover, .tytul-button:active,
.wyroznienie-button:hover, .wyroznienie-button:active,
.slowo-button:hover, .slowo-button:active,
.znak-button:hover, .znak-button:active {
    /*    color: #FFF;*/
    background-color: #999;
    color: #FFF;
}

/*
 * VISIBILITY RULES
 */
.default-menu {
    visibility: inherit;
    opacity: 0.2;
}

.default-menu:hover {
    opacity: 1;
    z-index: 5000;
}

.htmlview *[x-annotation-box] > .default-menu {
    opacity: 1;
}

.htmlview *[x-editable][x-open] > .default-menu {
    visibility: hidden;
}

.htmlview *[x-editable][x-open] *[x-annotation-box] > .default-menu {
    visibility: hidden;
}

.htmlview *[x-editable] > .edit-menu {
    visibility: hidden;
}

.htmlview *[x-editable] *[x-annotation-box] > .edit-menu {
    visibility: hidden;
}

.htmlview *[x-editable][x-open] > .edit-menu {
    visibility: visible;
}

.htmlview *[x-editable][x-open] *[x-annotation-box] > .edit-menu {
    visibility: visible;
}

.html-editarea {
    border: 0;
    background-color: gray;
    padding: 1px;
    z-index: 2000;
    position: absolute;
    text-align: left;
}

.html-editarea textarea {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    font-size: 10pt;
    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    line-height: 1.25;
    /*    background-color: ivory;*/
}

.htmlview .out-of-flow-text {
    display: block;
    font-family: monospace;
    border: 2px solid red !important;
    white-space: pre-line;
}

.htmlview .out-of-flow-text::before {
    content: "Tekst w tej ramce nie jest otagowany!";
    background-color: #ff6c6c;
    color: black;
    font-size: 10pt;
    line-height: 12pt;
    border: 1px solid black;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 5px 1em;
    margin: 0 0 0 1em;
    text-align: justify;
    display: inline;
    float: right;
    max-width: 25%;
}

.unknown-tag {
    background-color: yellow;
    margin: -0.25em;
    padding: 0.25em;
    border: 1px solid orange;
}

.alien {
    color: red;
}

/* specialChars */
#specialCharsContainer {
    text-align: center; 
    width: 640px; 
    height: 400px;
    padding:20px; 
    background-color: gray; 
    position: absolute; 
    top: 20px; 
    right: 20px; 
    z-index:10000;
    overflow:auto;
}
#specialCharsContainer a {
    color: white;
    font-weight: bold;
} 

#tableSpecialChars td input {
    background-color: transparent;
    border:0;
    color: white;
} 

#tableSpecialChars td input.recentSymbol {
    background-color: white;
    border:0;
    color: black;
} 


#media-chooser {
    img {
        border: 3px solid transparent;
        &.active {
            border-color: green;
        }
    }
}