body {
    color: darkblue;
    font-family: "Open Sans", sans-serif;
}

.bd-callout {
    --bs-link-color-rgb: var(--bd-callout-link);
    --bs-code-color: var(--bd-callout-code-color);
    padding: 0.5rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--bd-callout-color, inherit);
    background-color: var(--bd-callout-bg, var(--bs-gray-100));
    border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300));
}

.bd-callout-danger {
    --bd-callout-color: var(--bs-danger-text-emphasis);
    --bd-callout-bg: var(--bs-danger-bg-subtle);
    --bd-callout-border: var(--bs-danger-border-subtle);
}

.bd-callout-info {
    --bd-callout-color: var(--bs-info-text-emphasis);
    --bd-callout-bg: var(--bs-info-bg-subtle);
    --bd-callout-border: var(--bs-info-border-subtle);
}

em.highlight {
    background-color: var(--bs-yellow);
}

input#query::placeholder {
    color: #ccc;
    font-style: italic;
}

#erase-query {
    cursor: pointer;
    margin-top: 7px;
    right: 50px;
    z-index: 10 !important;
}

div.total {
    text-align: right;
}

div.total {
    color: var(--bs-gray-600, gray);
}

div.pages {
    color: var(--bs-gray-600, gray);
}

/* Results */
ul.results {
    list-style: none;
}

ul.help-list li {
    margin-bottom: 0.2rem;
}

.result-container {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.result .image {
    align-self: flex-start;
}

.result .image img {
    width: 100px;
}

.result .description {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100vw;
}

.close {
    position: absolute;
    top: 1px;
    font-weight: bold;
    cursor: pointer;
    background-color: white;
    width: calc( 100% - 35px );
    text-align: right;
    padding-right: 10px;
}

.erase-query {
    cursor: pointer;
    margin-top: 7px;
    right: 45px
}

span.code {
    display: inline-block;
    padding: 2px 10px;
    background-color: lightyellow;
    border: 1px solid mediumblue;
    border-radius: 14px;
    cursor: pointer;
}

.description {
    cursor: pointer;
}
.description span.reference {
    color: var(--bs-gray-600, gray);
}

.description span.titre {
    font-weight: 700;
    text-transform: uppercase;
}



.highlights ul {
    padding: 0 !important;
}
li.hightlight {
    list-style: none;
    margin-bottom: 1rem;
    text-align: justify;
    color: var(--bs-gray-900, gray);
}

.score {
    text-align: right;
    margin-bottom: 2rem;
    border-bottom: 1px lightgray dotted;
}

span.score {
    color: var(--bs-gray-500, lightgray);
}

div.pages {
    text-align: center;
}

div.pages .page-number {
    display: inline-block;
    margin: 0 0.5rem;
}

div.pages .page-number.active {
    color: var(--bs-blue, blue);
    cursor: pointer;
    height: 32px;
    Width: 32px;
    border: 1px solid var(--bs-blue, blue);
    padding: 2px;
}

div.pages .page-number.disabled {
    font-weight: 600;
}

/** Contenu **/
div#fond {
    background: var(--bs-white);
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    top: 0;
    left: 0;
    opacity: 0.7;
}

div#wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-content: space-around;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 110;
    background: transparent;
    width: 100vw;
    height: 100vh;
    top: 0;
}

div#container {
    background-color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-around;
    align-items: center;
    position: relative !important;
}


#container iframe {
    border: 1px solid gray;
    box-shadow: 5px 5px 5px gray;
    width: 100vw;
    flex-grow: 1;
    max-height: 905px;
    height: 100vh;
}


div#container.oc {
    max-width: 610px;
    width: 100%;
}

div#container.extracts,
div#container.izvor {
    max-width: 600px;
    width: 100%;
}

div#container.videlina {
    max-width: 700px;
    width: 100%;
}

div#container.pq {
    max-width: 600px;
    width: 100%;
    scrollbar-gutter: auto;
    margin: 2rem;
}

.image_reference {
    top: 28px;
    position: absolute;
    font-size: 10px;
    left: 25px;
    color: #7338A1;
    font-weight: bold;
}

span.input-group-text.search {
    cursor: pointer;
}