:root {
    --header-height: 50px;
    --header-background-color: #f0f0f0;
    --header-border-bottom: 2px solid #a0a0a0;

    --pane-padding: 1rem;
    --pane-closer-top: 4px;
    --pane-closer-right: 4px;
    --pane-closer-background-color: #f0f0f0;
    --pane-closer-background-color-onhover: #c0c0c0;
    --pane-closer-image: url('data:image/svg+xml;utf8,<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="23" height="23" fill="none" stroke="black" stroke-width="1"/><g transform="translate(3,3)"><line x1="4" y1="4" x2="14" y2="14" stroke="black" stroke-width="2" stroke-linecap="round"/><line x1="14" y1="4" x2="4" y2="14" stroke="black" stroke-width="2" stroke-linecap="round"/></g></svg>');

    --filterpane-border-left: 2px solid #a0a0a0;
    --filterpane-border-right: 2px solid #a0a0a0;
    --filterpane-max-width: 320px;
    --filterpane-background-color: 2px solid #a0a0a0;

    --filterpane-opener-background-color: #f0f0f0;
    --filterpane-opener-background-color-onhover: #c0c0c0;
    --filterpane-opener-background-image: url('data:image/svg+xml;utf8,<svg width="20px" height="20px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="23" height="23" fill="none" stroke="black" stroke-width="1"/><g transform="translate(3,3)"><path d="M2,3 L16,3 L11,10 L11,15 L7,17 L7,10 L2,3" fill="none" stroke="black" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/></g></svg>');
    --filterpane-opener-background-position: 4px 4px;
    --filterpane-opener-border-left: 2px solid #a0a0a0;
    --filterpane-opener-border-right: 2px solid #a0a0a0;

    --searchpane-border-left: 0;
    --searchpane-border-right: 2px solid #a0a0a0;
    --searchpane-max-width: 320px;
    --searchpane-background-color: 2px solid #a0a0a0;

    --searchpane-opener-background-color: #f0f0f0;
    --searchpane-opener-background-color-onhover: #c0c0c0;
    --searchpane-opener-background-image: url('data:image/svg+xml;utf8,<svg width="20px" height="20px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="23" height="23" fill="none" stroke="black" stroke-width="1"/><g transform="translate(3,3)"><circle cx="8" cy="8" r="6" fill="none" stroke="black" stroke-width="2"/><line x1="12.5" y1="12.5" x2="17" y2="17" stroke="black" stroke-width="2" stroke-linecap="round"/></g></svg>');
    --searchpane-opener-background-position: 4px 4px;
    --searchpane-opener-border-left: 0;
    --searchpane-opener-border-right: 2px solid #a0a0a0;

    --contentpane-border-left: 0;
    --contentpane-border-right: 2px solid #a0a0a0;
    --contentpane-max-width: 100%;
    --contentpane-background-color: 2px solid #a0a0a0;

    --infopane-border-left: 0;
    --infopane-border-right: 2px solid #a0a0a0;
    --infopane-max-width: 320px;
    --infopane-background-color: 2px solid #a0a0a0;

    --infopane-opener-background-color: #f0f0f0;
    --infopane-opener-background-color-onhover: #c0c0c0;
    --infopane-opener-background-image: url('data:image/svg+xml;utf8,<svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="23" height="23" fill="none" stroke="black" stroke-width="1"/><g transform="translate(3,3)"><circle cx="9" cy="9" r="7" fill="none" stroke="black" stroke-width="1.5"/><line x1="9" y1="8" x2="9" y2="14" stroke="black" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="5.5" r="0.75" fill="black"/></g></svg>');
    --infopane-opener-background-position: 4px 4px;
    --infopane-opener-border-left: 0;
    --infopane-opener-border-right: 2px solid #a0a0a0;

    --chatbotpopup-opener-background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40"><rect x="5" y="5" width="30" height="20" rx="4" ry="4" fill="%23007bff" stroke="%23ffffff" stroke-width="1"/><path d="M15 25 L20 30 L25 25 Z" fill="%23007bff"/><text x="20" y="15" text-anchor="middle" alignment-baseline="middle" fill="%23ffffff" font-size="12">?</text></svg>');
    --chatbotpopup-opener-background-position: 0px 0px;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.header {
    width: 100%;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    background-color: var(--header-background-color);
    border-bottom: var(--header-border-bottom);
}

.pane-container {
    display: flex;
    width: 100%;
    height: calc(100vh - var(--header-height) - 15px);
    margin: 0;
    padding: 0;
}

input[type="radio"] {
    display: none;
}

.radio-outside+label {
    display: block;
    margin: 0;
    cursor: pointer;
    /* height: 100vh; */
    width: 28px;
    background-repeat: no-repeat;
}

.radio-inside+label {
    position: absolute;
    display: block;
    cursor: pointer;
    top: var(--pane-closer-top);
    right: var(--pane-closer-right);
    margin: 0;
    width: 20px;
    height: 20px;
    background-color: var(--pane-closer-background-color);
    background-image: var(--pane-closer-image);
    background-repeat: no-repeat;
    /* background-image: url('data:image/svg+xml;utf8,<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="23" height="23" fill="none" stroke="black" stroke-width="1"/><g transform="translate(3,3)"><line x1="4" y1="4" x2="14" y2="14" stroke="black" stroke-width="2" stroke-linecap="round"/><line x1="14" y1="4" x2="4" y2="14" stroke="black" stroke-width="2" stroke-linecap="round"/></g></svg>'); */
}

.radio-inside+label:hover {
    background-color: var(--pane-closer-background-color-onhover);
}

#radio-filter-outside+label {
    background-image: var(--filterpane-opener-background-image);
    background-color: var(--filterpane-opener-background-color);
    background-position: var(--filterpane-opener-background-position);
    border-left: var(--filterpane-opener-border-left);
    border-right: var(--filterpane-opener-border-right);
}

#radio-filter-outside+label:hover {
    background-color: var(--filterpane-opener-background-color-onhover);
}

#radio-search-outside+label {
    background-image: var(--searchpane-opener-background-image);
    background-color: var(--searchpane-opener-background-color);
    background-position: var(--searchpane-opener-background-position);
    border-left: var(--searchpane-opener-border-left);
    border-right: var(--searchpane-opener-border-right);
}

#radio-search-outside+label:hover {
    background-color: var(--searchpane-opener-background-color-onhover);
}

#radio-info-outside+label {
    background-image: var(--infopane-opener-background-image);
    background-color: var(--infopane-opener-background-color);
    background-position: var(--infopane-opener-background-position);
    border-left: var(--infopane-opener-border-left);
    border-right: var(--infopane-opener-border-right);
}

#radio-info-outside+label:hover {
    background-color: var(--infopane-opener-background-color-onhover);
}

.radio-outside:checked+label {
    display: none;
}

.pane {
    padding: var(--pane-padding);
    margin: 0;
    position: relative;
    overflow: auto;
    /* height: 100vh; */
}

.collapsible {
    display: none;
}

.filterpane {
    flex: 1 1 0;
    max-width: var(--filterpane-max-width);
    background-color: var(--filterpane-background-color);
    border-left: var(--filterpane-border-left);
    border-right: var(--filterpane-border-right);
}

.searchpane {
    flex: 1 1 0;
    max-width: var(--searchpane-max-width);
    background-color: var(--searchpane-background-color);
    border-left: var(--searchpane-border-left);
    border-right: var(--searchpane-border-right);
}

.contentpane {
    flex: 1 1 0;
    max-width: var(--contentpane-max-width);
    background-color: var(--contentpane-background-color);
    border-left: var(--contentpane-border-left);
    border-right: var(--contentpane-border-right);
}

.infopane {
    flex: 1 1 0;
    max-width: var(--infopane-max-width);
    background-color: var(--infopane-background-color);
    border-left: var(--infopane-border-left);
    border-right: var(--infopane-border-right);
}

.radio-outside:checked+label+.collapsible {
    display: block;
}

.search-result {
    padding: 0.5rem;
    background-color: #f0f0f0;
    border-bottom: 1px solid #a0a0a0;
}

.search-result:hover {
    background-color: #e0e0e0;
}

.search-result-type {
    font-size: 0.6em;
    color: #606060;
    margin: 1px;
    text-decoration: none;
}

.search-result-title {
    font-size: 1.0em;
    font-weight: bold;
    margin: 4px;
}

.search-result-path {
    font-size: 0.6em;
    margin: 1px;
    text-decoration: none;
}

.search-result-date {
    font-size: 0.6em;
    margin: 1px;
    text-decoration: none;
}

.search-result-microcontent {
    margin: 2px;
}

.search-result-autosnippet {
    margin: 2px;
    background-color: #ddffdd;
}

.search-result-autosummary {
    margin: 2px;
    background-color: #ddddff;
}

.search-result-properties {
    display: none;
}

.chatbotpopup-anchor {
    position: fixed;
    bottom: 10px;
    right: 60px;
}

.chatbotpopup {
    width: 500px;
    min-height: 400px;
    max-height: 800px;
    overflow: auto;
    background-color: #f1f1f1;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 15px;
    z-index: 1000;
    transition: all 0.3s ease;
}

#radio-chatbot-outside+label {
    width: 50px;
    height: 50px;
    background-image: var(--chatbotpopup-opener-background-image);
    background-position: var(--chatbotpopup-opener-background-position);
    transform: scale(2);
}

#radio-chatbot-outside+label:hover {
    transform: scale(2.5);
}

.chatbot-description {
    font-size: 0.8em;
    color: #606060;
    margin: 4px;
}

.chatbot-prompt-info-validity {
    display: none;
    font-size: 0.6em;
    color: #606060;
    margin: 1px;
    text-decoration: none;
}

.chatbot-prompt-info-timestamp {
    display: none;
    font-size: 0.6em;
    margin: 1px;
    text-decoration: none;
}

.chatbot-prompt-info-prompt {
    width: 80%;
    font-size: 1.0em;
    margin-left: auto;
    margin: 4px;
    border: 1px solid #a0a0a0;
    border-radius: 10px;
}

.chatbot-prompt-info-response {
    width: 80%;
    font-size: 1.0em;
    margin: 4px;
    border: 1px solid #a0a0a0;
    border-radius: 10px;
}