/* overwrites */
:root {
    --pb-color-primary: var(--jinks-color-primary);
    --pb-color-inverse: var(--jinks-color-inverse);
}

.fixed-layout > main {
    display: block;
}

.toolbar {
    justify-content: flex-start;
}

.toolbar ul {
    margin-left: 0;
    margin-right: 0;
    padding-right: 0;
}

.toolbar ul:not(:first-child) {
    padding-left: 0;
}

#authority-editor{
    height:auto;
}
#authority-editor main,
#authority-editor-side main{
    display:block;
    margin:0;
}
section.person{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
}

fx-fore .actions{
    text-align:right;
    padding:0.25rem 0.5rem;
}
fx-fore button{
    padding:0.5rem 1rem;

}
fx-fore fx-group{
    padding:1rem 0.5rem;
    width:100%;
}

fx-fore fx-case:last-child{
    margin-bottom:5rem;
}

body {
    --annotate-color-modify: #dc3848;
}

.toastify.on {
    right: 0;
    left: auto;
}

.annotation-editor iron-form {
    padding: 0 8px;
}

#authority-info {
    font-size: .9rem;
    max-height: 25vh;
    overflow: auto;
}

#authority-editor{
    /*max-height: 50vh;*/
    position: relative;
    /*overflow: auto;*/
    background:#efefef;
}
#authority-editor main,
#authority-editor button{
    font-size: 0.8rem;
}
#authority-editor main,
#authority-editor fx-group{
    margin:0 0 1rem 0;
    padding: 0;
    position: relative;
}

#authority-editor main{
    /*max-height: 50vh;*/
    position: relative;
    height: 100%;
    padding:0.5rem;
    overflow: auto;
    background: white;
}

fx-group#general{
    padding-top:2.5rem;
}

#authority-editor input.widget{
    width: calc(100% - 2rem);
}

#changes pb-code-highlight {
    margin-bottom: 10px;
}

fx-fore fx-group > section{
    overflow:hidden;
    position: relative;
}

fx-fore fx-group{
    display:grid;
    grid-template-rows:1fr;
    height:auto;
    animation: grow .6s forwards;

}
fx-fore fx-group[nonrelevant]{
    animation: shrink .6s forwards;
}

fx-group iron-form{
    padding:0.5rem;
}

#authority-editor fx-trigger{
    text-align: right;
}

fx-trigger.insert-auth-form{
    position: absolute;
    right: 0;
    top: 1.5rem;
}

fx-trigger:has(button) {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.annotation-editor {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto 1fr;
}

fx-group.search{
    /*max-height:30rem;*/
    overflow:auto;
}

fx-fore fx-group{
    padding:0.5rem;
    margin:0;
}

fx-fore > fx-group{
    border:thin solid #efefef;
    margin-bottom:1rem;
}


fx-fore textarea {
    width: calc(100% - 2rem);
}

#markupPanel{
    visibility: hidden;
}

#markupPanel > section {
    display: grid;
    grid-template-columns: 1fr 200px;
}

#markupPanel .preview-toolbar {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#markupPanel #html {
    margin: 0 10px;
    width: calc(100vw - 220px);
    border: 0;
}

#markupPanel.on{
    visibility: visible;
    position: fixed;
    left: -0.5rem;
    bottom: 0;
    height: 25vh;
    z-index: 10;
    background: white;
    margin-bottom: 0;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
    width: 100%;
}

fx-group[ref="authority"]{
    overflow: hidden;
}
fx-fore #markupPanel pb-tabs,
fx-fore #markupPanel .preview-toolbar {
    height: 25vh;
}

.text {
    overflow: auto;
    display: block;
    /* overflow: auto;
    display: flex;
    flex-direction: column; */
    max-width: var(--pb-view-max-width);
    margin: 0 auto;
}

pb-authority-lookup {
    max-height: 60vh;
    padding:0.5rem;
    position: relative;
    height: 100%;
    justify-content: flex-start;
}

pb-document{
    display: none;
}

aside .preview {
    overflow: auto;
    padding-bottom: 25vh;
}

pb-progress {
    position: absolute;
    bottom: 0;
}

pb-tabs {
    --paper-tabs-selection-bar-color: #607D8B;
    height: calc(100% - 40px);
}

pb-tabs::part(pages) {
    height: calc(100% - 62px);
}

pb-tabs [slot="page"] {
    height: 100%;
    overflow: auto;
}

pb-tabs pre {
    margin: 0;
}

pb-view, pb-view-annotate{
    margin-left:2rem;
    width: auto;
}

.preview header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.preview header .toolbar {
    flex-wrap: nowrap;
}


#output, #changes {
    font-size: .75em;
    --pb-code-highlight-white-space: pre-wrap;
}


#view1::part(content) {
    line-height: 2;
    padding-right: 1rem;
    padding-bottom: 25vh;
}

#form-save {
    float: right;
}

#view1::part(highlight) {
    border: 3px solid rgb(255, 174, 0);
    border-radius: 8px;
}

.occurrences {
    overflow: auto;
    margin-top: 16px;
    font-size: .85rem;
}

.occurrences h4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--pb-color-inverse);
}


.occurrences ul {
    list-style: none;
    margin: 0;
}
.occurrences p,
.occurrences ul
{
    padding: 0.5rem;
}

.occurrences li {
    margin-bottom: 0.5rem;
}

.occurrences .id-warning {
    border-bottom: 1px dotted #ff3333;
}

mark {
    padding: 2px 4px;
}

mark.incomplete {
    background: repeating-linear-gradient(
        315deg,
        mark,
        mark 5px,
        var(--pb-annotation-stripes-light) 5px,
        var(--pb-annotation-stripes-light) 10px
    );
}

mark.modify, .occurrences .id-warning mark {
    background-color: var(--annotate-color-modify);
    color: var(--pb-color-inverse);
}

.toc-toggle {
    display: none;
}

paper-icon-button[data-type="edit"] {
    background-color: var(--jinks-toolbar-background-color);
}

#ner-action {
    display: none; /* Hide initially, show later if NER is available */
    margin-left: 40px;
}

[nonrelevant]{
    visibility:hidden;
    display:block;
}

#commit[nonrelevant] {
    display: none;
}

#d-review {
    /* Lower the default z-index from pico (9999) to 99 so the paper-dialogs can overlap it */
    z-index: 99;
    --pico-border-radius: 0;
}

#d-review article {
    max-width: 85vw;
}

#d-review > article > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: var(--jinks-colors-200);
    color: var(--jinks-color-primary);
}

#d-review ul {
    overflow: auto;
}

#d-review ul li {
    display: flex;
}

#d-review footer {
    font-size: var(--pb-footnote-font-size);
    text-align: left;
}

/* ### authority editor */
fx-repeat{
    margin-right:1rem;
}
fx-fore .four-col fx-repeatitem{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 2rem;
    grid-gap:0;
    align-items:end;
}
fx-fore .two-col fx-repeatitem{
    display:grid;
    grid-template-columns:auto 2rem;
    align-items:center;
}

@keyframes grow {
    0% {
        grid-template-rows:0;
    }
    100% {
        grid-template-rows: 1fr;
    }
}
@keyframes shrink {
    0% {
        grid-template-rows:1fr;
    }
    100% {
        grid-template-rows: 0;
        height: 0;
        visibility: hidden;
    }
}

pb-leaflet-map {
    margin-top: 1rem;
    height: 256px;
}

jinn-xml-editor {
    font-size: 16px;
    overflow:hidden;
}

jinn-xml-editor [slot], jinn-epidoc-editor [slot] {
    display: flex;
    column-gap: 4px;
    align-items: center;
    overflow-x: auto;
    flex-wrap: wrap;
}

jinn-epidoc-editor [slot] *, jinn-xml-editor [slot] *, jinn-epidoc-editor::part(button) {
    font-size: .85rem;
    border: 1px solid transparent;
    background-color: inherit;
}

jinn-xml-editor [slot] > *:hover, jinn-epidoc-editor [slot] > *:hover, jinn-epidoc-editor::part(button):hover {
    border: 1px solid var(--pb-color-inverse);
}

/* Fore style overwrites for annotations  */

fx-group fx-control {
    padding-left: .5rem;
}

fx-control input, fx-control textarea, fx-control select {
    box-sizing: border-box;
    margin: 0 0 .5rem 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: var(--paper-input-container-input-color);
}

fx-control label {
    font-size: 1rem;
    margin-bottom: 5px;
    color: #333;
    /* Text color */
}

fx-control input[type="text"], fx-control textarea {
    width: calc(100% - 2rem);
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    /* Remove default focus outline */
    transition: border-color 0.2s ease;
}

fx-control input[type="text"]:focus, fx-control textarea:focus {
    border-color: #007bff;
    /* Change border color on focus */
}

fx-control select {
    width: calc(100% - 2rem);
    padding: 10px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    outline: none;
    /* Remove default focus outline */
    background-color: #fff;
    /* Background color */
    transition: outline 0.3s ease;
    /* Add transition effect for outline */
}

/* Apply hover and focus styles */
fx-control select:hover,
fx-control select:focus {
    outline: 2px solid #007bff;
    /* Increase outline width and change color on hover and focus */
}

/*!
 * Toastify js 1.11.0
 * https://github.com/apvarun/toastify-js
 * @license MIT licensed
 *
 * Copyright (C) 2018 Varun A P
 */

.toastify {
    padding: 12px 20px;
    color: #ffffff;
    display: inline-block;
    box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
    background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
    background: linear-gradient(135deg, #f8f8f9, #cfcfcf);
    position: fixed;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    max-width: calc(50% - 20px);
    z-index: 2147483647;
    font-weight: 300;
    color:black;
}

.toastify.on {
    opacity: 1;
}

.toast-close {
    opacity: 0.8;
    padding: 0 5px;
}

.toastify-right {
    right: 15px;
}
.toastify-right .toast-close {
    margin-right:-10px;
}

.toastify-left {
    left: 15px;
}
.toastify-left .toast-close{
    margin-left:-10px;
}

.toastify-top {
    top: -150px;
}

.toastify-bottom {
    bottom: -150px;
}

.toastify-rounded {
    border-radius: 25px;
}

.toastify-avatar {
    width: 1.5em;
    height: 1.5em;
    margin: -7px 5px;
    border-radius: 2px;
}

.toastify-center {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: fit-content;
    max-width: -moz-fit-content;
}

@media only screen and (max-width: 360px) {
    .toastify-right, .toastify-left {
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        max-width: fit-content;
    }
}

fx-control, label{
    display:block;
}