/* Additional/External Fonts */
@font-face {
    font-family: OpenDyslexic;
    src: url(fonts/OpenDyslexic/OpenDyslexic3-Regular.ttf);
}
@font-face{
    font-family: OpenDyslexic-Bold;
    src: url(fonts/OpenDyslexic/OpenDyslexic3-Bold.ttf);
}

@font-face {
    font-family: Roboto;
    src: url(fonts/Roboto/Roboto-Regular.ttf);
}
@font-face{
    font-family: Roboto-Bold;
    src: url(fonts/Roboto/Roboto-Bold.ttf);
}

@font-face {
    font-family: Lato;
    src: url(fonts/Lato/Lato-Regular.ttf);
}
@font-face{
    font-family: Lato-Bold;
    src: url(fonts/Lato/Lato-Bold.ttf);
}

@font-face {
    font-family: NotoSansMono;
    src: url(fonts/NotoSansMono/NotoSansMono-Regular.ttf);
}
@font-face{
    font-family: NotoSansMono-Bold;
    src: url(fonts/NotoSansMono/NotoSansMono-Bold.ttf);
}

@font-face {
    font-family: Tinos;
    src: url(fonts/Tinos/Tinos-Regular.ttf);
}
@font-face{
    font-family: Tinos-Bold;
    src: url(fonts/Tinos/Tinos-Bold.ttf);
}

@font-face {
    font-family: NotoSans;
    src: url(fonts/NotoSans/NotoSans-Regular.ttf);
}
@font-face{
    font-family: NotoSans-Bold;
    src: url(fonts/NotoSans/NotoSans-Bold.ttf);
}

:root {
    --shared-color: 213, 65, 241;
}

/* Specific fix for line-height: 1px; issue */
span.lh1 {
    line-height: inherit;
}
/* The z-index is to ensure that the bookmark is accessible even if it's overlayed on a highlight/underline of some type */
.comment {
    background-image : url("/images/comment_clickable_icon.png");
    background-repeat : no-repeat;
    opacity : 0.5;
    z-index : 10;
}
.hover-comment {
    background-image : url("/images/comment_clickable_icon.png");
    background-repeat : no-repeat;
    opacity : 1.0;
    z-index : 10;
}

.bookmark {
    position : fixed;
    top : "0px";
    right : "0px";
    background-color: red;
}

.highlight-yellow {
    background-color: rgba(255, 255, 0, 0.4);
}

.hover-highlight-yellow {
    background-color: rgba(255, 255, 0, 0.6);
}

.highlight-green {
    background-color:rgba(149, 193, 31, 0.4);
}

.hover-highlight-green {
    background-color:rgba(149, 193, 31, 0.6);
}

.highlight-blue {
    background-color: rgba(72, 140, 203, 0.4);
}

.hover-highlight-blue {
    background-color: rgba(72, 140, 203, 0.6);
}

.highlight-shared {
    background-color: rgba(var(--shared-color), 0.4);
}

.hover-highlight-shared {
    background-color: rgba(var(--shared-color), 0.6);
}

.searchHighlight {
    background-color: rgba(255 , 0, 0, 0.4);
}

.hover-searchHighlight {
    background-color: rgba(255 , 0, 0, 0.4);
}

.questionHighlight {
    background-color: rgba(255, 0, 0, 0.4);
}

.hover-questionHighlight {
    background-color: rgba(255, 0, 0, 0.3);
}

.hover-questionHighlight.is-pin::after {
    content: '';
    display: block;
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24' viewBox='0 0 24 24' width='24'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cg/%3E%3Cg%3E%3Cg%3E%3Cpath d='M16.67,13.13C18.04,14.06,19,15.32,19,17v3h4v-3 C23,14.82,19.43,13.53,16.67,13.13z' fill-rule='evenodd'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='9' cy='8' fill-rule='evenodd' r='4'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M15,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4c-0.47,0-0.91,0.1-1.33,0.24 C14.5,5.27,15,6.58,15,8s-0.5,2.73-1.33,3.76C14.09,11.9,14.53,12,15,12z' fill-rule='evenodd'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M9,13c-2.67,0-8,1.34-8,4v3h16v-3C17,14.34,11.67,13,9,13z' fill-rule='evenodd'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    width: 12px;
    height: 10px;
    left: -6px;
    background-size: cover;
    top: -4px;
}

.underline-range {
    position: absolute;
}

.underline-range > .underline {
    position: relative;
    height: 15%;
    opacity: 0.2;
    background-color: red;
}

.underline-range > .hover-underline {
    position: relative;
    height: 15%;
    opacity: 0.4;
    background-color: red;
}

.underline-range > .transparent-part {
    position: relative;
    height: 85%;
    background-color: transparent;
}

.with-note::after {
    content: '';
    display: block;
    position: relative;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGgxMnYxMkgweiIvPjxwYXRoIGQ9Ik05IDJ2N0gzVjJoNm0xLTFIMnY5aDhWMXpNOCA1SDR2MWg0VjV6bTAgMkg0djFoNFY3em0wLTRINHYxaDRWM3oiLz48L3N2Zz4=);
    width: 12px;
    height: 10px;
    left: -6px;
    background-size: cover;
    top: -4px;
}

.with-note-white::after {
    content: '';
    display: block;
    position: relative;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTAgMGgxMnYxMkgweiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik05IDJ2N0gzVjJoNm0xLTFIMnY5aDhWMXpNOCA1SDR2MWg0VjV6bTAgMkg0djFoNFY3em0wLTRINHYxaDRWM3oiLz48L3N2Zz4=);
    width: 12px;
    height: 10px;
    left: -6px;
    background-size: cover;
    top: -4px;
}