:root {
    --primary-color: #35383c;
    --primary-light-color: rgba(53, 56, 60, .5);
    --footer-color: #35383c;
    --highlight-color: #a975b7;
    --header-padding: 60px;
    --disabled-text-color: #555;
    --disabled-background-color: #ccc;
    --text-color: #212529;
    --body-text-color: #212529;
    --body-background-color: white;
    --border-color: rgba(53, 56, 60, .5);
    --heading-background-color: #a975b7;
    --heading-text-color: white;
}


/* bootstrap 5 overrides */

body {
    /*  background-color: #F5EEFD; FAC light purple */
    background-color: var(--footer-color);
    padding-top: var(--header-padding);
}

main {
    color: var(--text-color);
    background-color: white;
    padding-bottom: 3rem;
}

b, strong { font-weight: 600; }

a {
    color: #4F226C;
    text-decoration: none;
}

a:hover, a:focus, a:active {
    color: #4F226C;
    text-decoration: underline;
}

a:not([href]):is(:active, :focus, :hover) {
    color: #4F226C !important;
    text-decoration: underline !important;
}

h1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.75rem;
}

h1, h2, h3, h4 {
    color: var(--primary-color);
    font-weight: normal;
}

h1 small, h2 small {
    font-size: 65%;
}

h2 { font-size: 1.5rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.15rem; }
h5 { font-size: 1.10rem; }

.navbar {
    background-color: white; /*#4F226C;*/
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .1);
}

.navbar #logo {
    font-size: 1.25rem;
}

.navbar-brand:hover, .navbar-brand:focus, .navbar-brand:active {
    text-decoration: none;
}

.navbar .nav-link {
    color: #35383c;
}

.navbar .btn-primary {
    background-color: white; /*#4F226C;*/
    border-color: #35383c;
}

.breadcrumb {
    padding-top: 0.5rem;
    margin-bottom: 0;
}

footer {
    color: #e8e8e8;
    padding: 1rem 0;
}

footer a {
    color: #e8e8e8;
    margin: 0 .5rem;
}

footer a:hover, footer a:focus, footer a:active {
    color: #fff;
}

.copyright {
    margin-left: .5rem;
}

.form-control, .form-select {
    border: 1px solid var(--primary-light-color); /*#4F226C;*/
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border: 1px solid var(--primary-color); /*#4F226C;*/
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(79, 34, 108, .25);
}

.btn-check:focus + .btn, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(79, 34, 108, .25);
}

.btn-fixed {
    border: 1px solid #aaa !important;
    color: #999;
}

.btn-primary {
    background-color: var(--primary-color); /*#BAA5C9;*/
    border: 1px solid var(--primary-color); /*#BAA5C9;*/
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--highlight-color); /*#4F226C;*/
    border: 1px solid var(--highlight-color); /*#4F226C;*/
}

.btn-primary.disabled, .btn-primary:disabled {
    cursor: not-allowed;
    color: var(--disabled-text-color); /*#4F226C;*/
    background-color: var(--disabled-background-color); /*#4F226C;*/
    border: 1px solid var(--disabled-background-color); /*#4F226C;*/
}

.btn-secondary {
    color: var(--text-color);
    background-color: transparent;; /*#BAA5C9;*/
    border: 1px solid var(--primary-color); /*#BAA5C9;*/
    box-shadow: 1px 1px #aaa;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: var(--highlight-color); /*#4F226C;*/
    border: 1px solid var(--highlight-color); /*#4F226C;*/
}

.btn-clear {
    border: 1px solid #ddd;
    box-shadow: 1px 1px #e8e8e8;
}

.btn-clear:hover, .btn-clear:focus, .btn-clear:active {
    color: white;
    background-color: var(--highlight-color); /*#4F226C;*/
    border: 1px solid var(--highlight-color); /*#4F226C;*/
}

.btn-outline-secondary {
    border: 1px solid var(--primary-light-color);
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
    color: white;
    background-color: var(--highlight-color); /*#4F226C;*/
    border: 1px solid var(--highlight-color); /*#4F226C;*/
}

:is(a.btn, a.btn-primary, a.btn-secondary, a.btn-clear, a.btn-outline-secondary):is(:active, :focus, :hover) {
    text-decoration: none;
}

.btn-marked {
    border: 1px solid #777;
}

.btn-small, .btn-short {
    font-size: .9rem;
    padding: .15rem .3rem;
}

.btn-tiny {
    font-size: .7rem;
    padding: .05rem .4rem;
}

.btn-info-popup {
    color: white;
    background-color: #0d6efd !important;
    border-radius: 50%;
    font-weight: bold;
    font-size: .9rem;
    padding: .15rem .5rem;
    margin-bottom: 3px;
}
.btn-info-popup:hover, .btn-info-popup:active, .btn-info-popup:focus {
    color: yellow;
    border: 1px solid yellow;
}

.btn-icon {
    color: var(--body-text-color);
    margin: 0;
    padding: 0;
}
button.btn-icon:where(:active, :focus, :hover) {
    color: var(--body-text-color);
}

.accordion-button {
    border-color: var(--highlight-color); /*#BAA5C9;*/
}

.accordion-button:not(.collapsed) {
    color: white;
    background-color: var(--highlight-color); /*#BAA5C9;*/
}

.accordion-button:focus {
    outline: 0;
    /*  box-shadow: 0 0 0 0.25rem rgb(79 34 108 / 25%); */
    box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%4F226C'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.list-group-item-action:focus, .list-group-item-action:hover {
    color: white;
    background-color: var(--highlight-color);
}

/* bootstrap 5 - change old style button down arrow to chevron like HTML select element */
.dropdown-toggle::after {
    all: unset;
}
.dropdown-toggle {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 13'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 11px;
    padding-right: 2.25rem;
}
.dropdown-toggle:hover, .dropdown-toggle:active, .dropdown-toggle:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 13'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked {
    background-color: var(--highlight-color);
    border-color: var(--highlight-color);
}

/* tinymce classes */
.tinymce-no-border .tox-tinymce { /* .tinymce-no-border class must be in the container of the textarea */
    border: 0 !important;
}
.tox-tinymce {
    border: 1px solid var(--primary-light-color) !important;
    border-radius: .25rem !important;
}


/* sortable classes */
.sortable-handle {
    display: inline-block;
    padding-right: .5rem;
    cursor: pointer;
}

.sortable-edit {
    display: inline-block;
    padding-right: .5rem;
}

.sortable-remove {
    display: inline-block;
    padding-right: 1rem;
}


/* site specific classes */

.alert-text {
    color: red;
    font-size: 85%
}

.edit-page-header {
    padding: 0.75rem 0;
}

.list_table, .list-table {
    position: relative;
    border-collapse: collapse;
    width: 100%;
}

.list_table tr, .list-table tr {
    background-color: white;
}

.list_table tr:hover, .list-table tr:hover {
    background-color: #f0f0f0;
}

.list_table tr.link:hover, .list-table tr.link:hover {
    cursor: pointer;
}

.list_table th, .list-table th {
    position: sticky;
    top: var(--header-padding);
    z-index: 1;
    padding: .25rem .5rem;
    background-color: #ddd;
    text-align: left;
    /*  border-bottom: 1px solid #999; */
    vertical-align: bottom;
    font-weight: normal;
}

.list_table th:first-of-type, .list-table th:first-of-type {
    border-top-left-radius: .25rem;
}

.list_table th:last-of-type, .list-table th:last-of-type {
    border-top-right-radius: .35rem;
}

.list_table td, .list-table td {
    padding: .25rem .5rem;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.list_table_action_button, .list-table-action-button {
    margin-right: .5rem;
    padding: .25rem .5rem;
}

.list_table_action_button:last-child, .list-table-action-button:last-child {
    margin-right: 0;
}

.edit_table, .edit-table {
    border-collapse: collapse;
    //width: 100%;
    margin: 1rem 0;
}

.edit_table tr, .edit-table tr {
    background-color: white;
}

.edit_table th, .edit-table th {
    padding: .5rem .5rem .2rem .4rem;
    text-align: right;
    font-weight: normal;
    /*  border-top: 1px solid #ccc; */
    vertical-align: top;
    white-space: nowrap;
}

.edit_table td, .edit-table td {
    padding: .25rem .5rem;
    /*  border-top: 1px solid #ccc; */
    vertical-align: top;
    //width: 100%;
}

.edit_table td.text, .edit-table td.text {
    padding-top: 0.5rem;
}

/* dialog pop-up */
dialog {
    border: 0;
    border-radius: .5rem;
    padding: 0;
    color: var(--body-text-color);
    background-color: var(--body-background-color);
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
@media (prefers-color-scheme: dark) {
    dialog::backdrop {
        background-color: #999;
        opacity: .6;
    }
}
dialog > header {
    /* color: var(--selected-text-background-color); - if desired */
    /* background-color: #eee; - specify a header background if desired */
    /* border-bottom: 1px solid var(--border-color); - if desired */
    font-size: 1.3rem;
    padding: 0.5rem 0.75rem;
}
dialog > header button {
    border: 0;
    background-color: transparent;
    color: var(--body-text-color);
    float: right;
    font-size: 100%;
    margin-right: -.5rem;
}
dialog > header button:hover {
    font-size: 120%;
}
dialog > div {
    padding: 1rem;
}
body:has(dialog[open]) { /* hide body scroll bar when dialog is open */
    overflow: hidden;
}
.boxed-area {
    border: 1px solid #ddd;
    border-radius: .5rem;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}
.boxed-area > p:last-child {
    margin-bottom: 0;
}

/* Sweet Alerts */
.swal2-confirm {
    background-color: var(--highlight-color) !important;
}

.swal2-cancel {
    background-color: var(--disabled-text-color) !important;
}

.swal2-icon {
    color: var(--highlight-color) !important;
    border-color: var(--highlight-color) !important;
}

/* SORT LIST STYLES */
.sort-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.sort-list > li {
    /*  display: flex; */
    padding: .5rem;
    border: 1px solid #aaa;
}
.sort-list > li::before { /* create a drag-drop handle */
    content: '\22EE\22EE';
    margin: .25rem .75rem 0 0;
}
/* SORT LIST DRAG-AND-DROP SUBJECT */
.sort-list > li.subject {
    background: #f6f6f6;
}
/* SORT LIST DRAG-AND-DROP HINT */
.sort-list > li.hint {
    border: 1px solid #e5fbe5;
    background: #e5fbe5;
}
.sort-list > li.hint * {
    pointer-events: none; /* this prevents buttons, spans, etc from removing the "active" class when mouse hovers over a child element of the li */
}
/* SORT LIST DRAG-AND-DROP TARGET */
.sort-list > li.active {
    border: 1px solid #feffb4;
    background: #feffb4;
}


/* pop-open section (accordion) */
.details-group { }
.details-group details {
    border: 1px solid var(--border-color);
    margin-top: -1px;
}
.details-group details:first-child, .details-group details:first-child summary {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}
.details-group details:last-child {
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}
.details-group details summary {
    padding: 1rem;
/*    transition: color .5s; */
    transition: background-color .5s;
    color: black;
    font-size: 130%;
    line-height: 130%;
    /*    list-style-type: '▽ '; set left-side marker symbol (when closed) */
    /*    list-style-type: ''; no marker */
}
.details-group details summary:hover {
    cursor: pointer;
}
.details-group details summary::marker {
    color: var(--heading-background-color);
    font-size: 75%;
}
.details-group details[open] > summary::marker {
    color: var(--heading-text-color);
}
.details-group > details[open] > summary {
    color: var(--heading-text-color);
    background-color: var(--heading-background-color);
    /*    list-style-type: '△ '; set left-side marker symbol (when open) */
    /*    list-style-type: ''; no marker */
}
@media (prefers-color-scheme: dark) {
    .details-group > details[open] > summary {
        opacity: 1;
    }
}
.details-group > details[open] > summary h3 {
    color: var(--heading-text-color);
}
.details-group details summary h3 {
    display: inline;
    font-weight: normal;
}
.details-group details > div {
    padding: 1rem;
}

/* Table Sorting Specific CSS */
.header-sortable {
    cursor: pointer;
    vertical-align: center;
    height: 35px;
    position: relative;
    padding: 0 10px;
}

.header-sortable.th-sort-asc::after {
    content: "\25b4";
    font-size: 1.5rem;
    text-align: center;
    position: absolute;
    top: 0;
    right: 5px;
}

.header-sortable.th-sort-desc::after {
    content: "\25be";
    font-size: 1.5rem;
    text-align: center;
    position: absolute;
    top: 0;
    right: 5px;
}

.header-sortable.th-sort-asc::after,
.header-sortable.th-sort-desc::after {
    margin-left: 5px;
}

.header-sortable.th-sort-asc,
.header-sortable.th-sort-desc {
    opacity: 1;
}