/* Algemene stijlen voor de site */
/* Algemene knoppenstijl */

/*
.color-theme {
    --bs-primary: #6ca4e8;
    --bs-secondary: #42a390;
    --bs-success: #4EC9B0;
    --bs-info: #42a390;
    --bs-warning: #e9d873;
    --bs-danger: #f58aec;
    --bs-light: #ffffff;
    --bs-dark: #1E1E1E;
}
*/

.frame-background-quaternary {
    --frame-link-color: #4EC9B0 !important;
    --frame-link-hover-color: var(--bs-secondary) !important;
}

.btn-primary,
.frame-type-felogin_login input[type="submit"] {
    --bs-btn-color: #ffffff;
    /* background-image: linear-gradient(#4EC9B0, #42a390); */
    background-color: var(--bs-primary);
    min-width: 10em;
}

/* Afbeeldingsstijl */
.image img {
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2) !important;
}



/* Linkstijl voor alle toestanden */
a {
    text-decoration: none !important;
}

a:hover:not(.nav-link) {
    text-decoration: underline !important;
}

/* ----------------------------------------------------------------------------- */
/* Tabelstijl voor de hele site */
/* Tabelkop met vaste positie */
.fixTableHead {
    overflow-y: auto;
    height: 70vh;
}

.fixTableHead thead th {
    position: sticky;
    top: 0;
}

/* Tabelstijl */
.table {
    border-color: #e8e8e8;
}

.table th {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 12px;
    font-weight: bold;
    background-color: var(--bs-primary);
    /* background-color: var(--bs-secondary); */
    color: white;
}

.table td {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 12px;
}

/* Unban header stijl */
.unbanHeader {
    margin: auto;
    height: 60px;
    background-color: #f0f0f0;
    padding-top: 12px;
}

/* Checkbox Toggle stijl */
.cbToggle {
    padding-top: 9px;
    padding-left: 9px;
    float: left;
}

/* Toevoegen button stijl */
.btnApply {
    margin-left: 50px;
}

/* Tabel container stijl */
.tabelContainer {
    overflow-x: auto;
}

/* Geselecteerde rijen stijl */
.checked td {
    background-color: #dfeceb;
}

.checked.disabled td {
    background-color: #eff5f5;
    color: #7fb3b2;
}

/* Verbergen stijl */
.hide {
    display: none;
}

/* Sorteerbare kolommen stijl */
table thead tr th:not(.no-sort) {
    cursor: pointer;
}

table thead tr th::after {
    position: absolute;
    right: 2px;
}

table thead tr th.sort-asc::after {
    content: "\25b4";
    /* Up arrow */
}

table thead tr th.sort-desc::after {
    content: "\25be";
    /* Down arrow */
}

/* ----------------------------------------------------------------------------- */

/* Tekstuitlijning stijl */
.text-justify {
    text-align: justify;
}

.centeralign {
    text-align: center;
}

.accordion-content-item.accordion-content-text {
    padding-left: 10px;
}

/* ========================================================================== */
/* Caption picture Home Page */
#c149.frame-space-after-extra-small,
#c149 {
    --frame-outer-spacing-after: 0;
}

#c149.frame-space-before-extra-small {
    --frame-outer-spacing-before: 0;
}

#c149 p {
    margin-top: 0;
    margin-bottom: 0;
}

#c149.frame {
    padding-top: 0;
    padding-bottom: 1em;
}

#c149 p.caption {
    padding-top: 0.25rem;
    font-size: 0.85rem;
    word-wrap: break-word;
    opacity: 0.7;
}

/* ========================================================================== */
/* Extension Code Highlight */
/*
    Code Highlighting CSS
    This CSS is used to style code blocks and inline code snippets.
    It is based on the Prism.js library.

    It provides syntax highlighting for various programming languages.
    The styles include colors for keywords, strings, comments, and other code elements.
    The code blocks are designed to be visually appealing and easy to read.
*/
.color {
    color: #f58aec;
    color: #4EC9B0;
    color: #e9d873;
    color: #9CDCFE;
    color: #D4D4D4;
    color: #1E1E1E;
}

code[class*=language-],
pre[class*=language-] {
    color: #d4d4d4;
    background: 0 0;
    text-shadow: 0 0px #fff;
    text-shadow: none;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.4;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    border-radius: var(--bs-border-radius);
}

code[class=language-pascal],
pre[class=language-pascal] {
    color: #4EC9B0;
    background: #2c2c2c;
    text-shadow: 0 0px #fff;
    text-shadow: none;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.4;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    border-radius: var(--bs-border-radius);
}

:not(pre)>code[class*=language-],
pre[class*=language-] {
    background: #2C2C2C;
}

:not(pre)>code[class*=language-] {
    padding: .1em;
    border-radius: var(--bs-border-radius);
    white-space: normal
}

.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
    color: #D4D4D4;
    font-style: italic;
    font-weight: normal;
    background: #2C2C2C;
}

.token.punctuation {
    opacity: 1;
    color: #d4d4d4;
    font-weight: bold;
}

.token.namespace {
    opacity: .7
}

.token.boolean,
.token.constant,
.token.deleted,
.token.number,
.token.property,
.token.symbol,
.token.tag {
    font-weight: normal;
    color: #9CDCFE;
    background: #2C2C2C
}

.token.operator {
    font-weight: normal;
    color: #f58aec;
    background: #2C2C2C
}

.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
    color: #9CDCFE !important;
    font-weight: normal;
}

/*
.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{
}
*/
.color.atrule,
.token.attr-value,
.token.keyword {
    color: #e9d873;
    font-weight: bold;
}

.token.class-name,
.token.function {
    color: #9CDCFE;
    font-weight: normal;
}

.token.important,
.token.regex,
.token.variable {
    color: #4EC9B0;
    font-weight: normal;
}

.token.bold,
.token.important {
    font-weight: 700
}

.token.italic {
    font-style: italic
}

.token.entity {
    cursor: help
}

pre.codeInTable {
    background-color: #eeeeee;
}

pre.codeInTable code {
    color: blue
}

/* ========================================================================== */
/* ke_search                                                                  */
/* ========================================================================== */

.kesearchbox {
    float: left;
    width: calc(100% - 11em);
    ;
}

.kesearch_searchbox .btn-primary {
    float: right;
    width: 10em;
}

/* Results */
#kesearch_num_results {
    margin-bottom: 1em;
}

#kesearch_results .result-list-item {
    margin-bottom: 2em;
    padding: 1em 2em 1em 2em;
    border: 1px silver solid;
    background-color: white;
    border-radius: var(--bs-border-radius);
}

#kesearch_results .result-list-item .result-number {
    font-size: 1em;
    color: var(--frame-link-color);
    color: var(--bs-primary);
}

/*
#kesearch_results .result-list-item .result-number,
#kesearch_results .result-list-item .result-title {
	font-size:1.2em;
}
*/

#kesearch_results .result-list-item .result-number a,
#kesearch_results .result-list-item .result-title a {
    color: var(--frame-color);
}

#kesearch_results .result-list-item .result-number a:hover,
#kesearch_results .result-list-item .result-title a:hover {
    color: var(--frame-link-hover-color);
}

/*
#kesearch_results {
	clear:both;
	margin-top:20px;
}
*/

/*
#kesearch_results .result-list-item .result-teaser {
#	color:#707070;
}
*/

/* .tx-kesearch-pi1 #kesearch_results .result-list-item-type-page { } */

.tx-kesearch-pi1 #kesearch_results .teaser_icon img {
    float: left;
    margin-top: 2px;
    margin-right: 5px;
}

.tx-kesearch-pi1 #kesearch_results .result-list-item .hit {
    color: white;
    background-color: var(--bs-primary);
}

.tx-kesearch-pi1 #kesearch_results .result-list-item .add-info {
    font-size: 80%;
    opacity: 50%;
}

/*
.tx-kesearch-pi1 #kesearch_results .result-list-item .scoreBar {
    border: 1px solid #D3D3D3;
    display: block;
    float: right;
    height: 10px;
    width: 48px;
}
*/

/*
.tx-kesearch-pi1 #kesearch_results .result-list-item .scoreBar .score {
    background-color: #D3D3D3;
    border: 1px solid #898989;
    display: block;
    height: 10px;
    margin: -1px 0 0 -1px;
}
*/

/* Query time */
.tx-kesearch-pi1 #kesearch_query_time {
    font-style: italic;
    text-align: center;
    font-size: 80%;
}

/* Page Browser */
.pages_total {
    margin-top: 1em;
    display: flex;
    justify-content: center;
    /* Horizontaal centreren */
    align-items: center;
    /* Verticaal centreren */
}

.kesearch_pagebrowser {
    margin-top: 0.5em;
    display: flex;
    justify-content: center;
    /* Horizontaal centreren */
    align-items: center;
    /* Verticaal centreren */
}

.result_txt {
    font-size: 80%;
    opacity: 50%;
}

#kesearch_query_time {
    opacity: 50%;
}

/* Vivino --------------------------------------------------------------------*/
/* ========================================================================== */
/*  
    bij background color --bs-secondary: 
    link color en link hover color in primary color (default = #ffffff) 
*/
.frame-background-secondary {
    --frame-link-color: var(--bs-primary);
    --frame-link-hover-color: var(--bs-primary);
}

.frame-background-quaternary {
    --frame-link-color: var(--bs-primary);
    --frame-link-hover-color: var(--bs-primary);
}

/* 
    Vul de middelste kolom met geheel met het gedefineerde content element en dus ook de 
    bijbehorende background-color
*/
div.section-column.footer-section-content-column.footer-section-content-column-middle {
    display: grid;
    grid-template-columns: auto-fit;
}

.vivino-widget div,
.vivino-widget span,
.vivino-widget applet,
.vivino-widget object,
.vivino-widget iframe,
.vivino-widget h1,
.vivino-widget h2,
.vivino-widget h3,
.vivino-widget h4,
.vivino-widget h5,
.vivino-widget h6,
.vivino-widget p,
.vivino-widget blockquote,
.vivino-widget pre,
.vivino-widget a,
.vivino-widget abbr,
.vivino-widget acronym,
.vivino-widget address,
.vivino-widget big,
.vivino-widget cite,
.vivino-widget code,
.vivino-widget del,
.vivino-widget dfn,
.vivino-widget em,
.vivino-widget img,
.vivino-widget ins,
.vivino-widget kbd,
.vivino-widget q,
.vivino-widget s,
.vivino-widget samp,
.vivino-widget small,
.vivino-widget strike,
.vivino-widget strong,
.vivino-widget sub,
.vivino-widget sup,
.vivino-widget tt,
.vivino-widget var,
.vivino-widget b,
.vivino-widget u,
.vivino-widget i,
.vivino-widget center,
.vivino-widget dl,
.vivino-widget dt,
.vivino-widget dd,
.vivino-widget ol,
.vivino-widget ul,
.vivino-widget li,
.vivino-widget fieldset,
.vivino-widget form,
.vivino-widget label,
.vivino-widget legend,
.vivino-widget table,
.vivino-widget caption,
.vivino-widget tbody,
.vivino-widget tfoot,
.vivino-widget thead,
.vivino-widget tr,
.vivino-widget th,
.vivino-widget td,
.vivino-widget article,
.vivino-widget aside,
.vivino-widget canvas,
.vivino-widget details,
.vivino-widget embed,
.vivino-widget figure,
.vivino-widget figcaption,
.vivino-widget footer,
.vivino-widget header,
.vivino-widget hgroup,
.vivino-widget menu,
.vivino-widget nav,
.vivino-widget output,
.vivino-widget ruby,
.vivino-widget section,
.vivino-widget summary,
.vivino-widget time,
.vivino-widget mark,
.vivino-widget audio,
.vivino-widget video {
    font-family: var(--bs-body-font-family) !important;
    font-weight: var(--bs-body-font-weight) !important;
    line-height: var(--bs-body-line-height) !important;
    text-align: var(--bs-body-text-align) !important;
    color: var(--frame-color) !important;
    background-color: var(--frame-background) !important;
    box-shadow: none !important;
}

.vivino-widget a {
    color: var(--frame-link-color) !important;
}

.vivino-widget a:hover {
    color: var(--frame-link-hover-color) !important;
}

.vivino-widget .vivino-widget-user .vivino-widget-logo {
    display: none !important;
}

.vivino-widget .vivino-widget-user.vivino-widget-user-compact .vivino-widget-user-header {
    padding: 12px 0px 12px 0px !important;
}

.vivino-widget .vivino-widget-user.vivino-widget-user-compact .vivino-widget-user-info {
    margin: 12px 0px 12px 0px !important;
    border-top: 1px solid var(--frame-color) !important;
}

.vivino-widget .vivino-widget-user.vivino-widget-user-compact .vivino-widget-user-info .vivino-widget-user-info-item-type {
    color: var(--frame-color) !important;
}

.vivino-widget .vivino-widget-user.vivino-widget-user-compact .vivino-widget-user-info {
    background: var(--frame-background) !important;
}

.vivino-widget .vivino-widget-user.vivino-widget-user-compact .vivino-widget-user-review {
    border-top: 1px solid var(--frame-color) !important;
}

.vivino-widget .vivino-widget-user .vivino-widget-user-powered-by {
    display: none !important;
}

.vivino-widget .vivino-widget-user.vivino-widget-user-compact .vivino-widget-user-review {
    padding: 6px 0px 0px 0px !important;
}

a:hover {
    text-decoration: underline;
}

/* ========================================================================== */
/* Last edited */
time {
    font-size: 80%;
    opacity: 0.5;
}

#page-footer time {
    display: none;
}

/* dailyverses =============================================================== */
.bibletext-frame {
    border-radius: var(--bs-border-radius) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2) !important;
}