:root {
    --c-text: #444;
    --c-primary: #7F59B3;
    /* --c-primary-light: #d7cce6; */
    /* --c-primary-light: #bfacda; */
    /* --c-primary-light: #777; */
    --c-primary-light: var(--bs-gray-500);
    /* --c-primary-lighter: #dfd6ec; */
    --c-primary-lighter: #e5e1ec;
    --c-primary-lighter: var(--bs-gray-200);
    --c-danger: indianred;

    --c-primary-dark: #64748b;
    --c-primary-light: #94a3b8;
    --c-primary-lighter: #e2e8f0;
    --c-primary-lightest: #f1f5f9;
    --c-text: #334155;

    --c-entry-blue: #9ec5fe;
    --c-entry-indigo: #c29ffa;
    --c-entry-purple: #c5b3e6;
    --c-entry-pink: #efadce;
    --c-entry-red: #f1aeb5;
    --c-entry-orange: #fecba1;
    --c-entry-yellow: #ffe69c;
    --c-entry-green: #a3cfbb;
    --c-entry-teal: #a6e9d5;
    --c-entry-cyan: #9eeaf9;
    --c-entry-gray: #e9ecef;

    --c-entry-blue: #6ea8fe;
    --c-entry-indigo: #a370f7;
    --c-entry-purple: #a98eda;
    --c-entry-pink: #e685b5;
    --c-entry-red: #ea868f;
    --c-entry-orange: #feb272;
    --c-entry-yellow: #ffda6a;
    --c-entry-green: #75b798;
    --c-entry-teal: #79dfc1;
    --c-entry-cyan: #6edff6;
    --c-entry-gray: #e9ecef;

    /* --c-entry-pin: forestgreen; */
    --c-entry-pin: var(--c-entry-green);
    /* --c-entry-power: deepskyblue; */
    --c-entry-power: var(--c-entry-blue);
    /* --c-entry-power: var(--c-entry-purple); */
    /* --c-entry-heart: mediumpurple; */
    --c-entry-heart: var(--c-entry-purple);
    /* --c-entry-heart: var(--c-entry-pink); */
    --c-entry-heart: var(--c-entry-indigo);
    /* --c-entry-star: gold; */
    --c-entry-warning: var(--c-entry-red);
    /* --c-entry-warning: var(--c-entry-orange); */
    --c-entry-date: var(--c-entry-pink);
    --c-entry-star: var(--c-entry-yellow);
    /* --c-entry-lock: indianred; */
    --c-entry-lock: var(--c-entry-red);
}
html, body {
    position: relative;
    /* height: 100%;*/
    width: 100%;
    overflow-x: hidden;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;    
}
html {
    margin: 0;
    padding: 0;
}
body {    
    margin: 0;
    padding: 0;    
    background-color: #fff;
    color: var(--c-text);
    font-family: 'PT sans';
    font-style: normal;
    font-size: 16px;
    line-height: 1.5;
}
html.modal-open, body.modal-open {
    /* position: fixed; */
    overflow: hidden;
    overflow-y: hidden;
    height: 100vh;
    overflow: scroll; 
    -webkit-overflow-scrolling: touch;
}
body.modal-open .modal.show, body.modal-open .modal.show .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
h1, h2, h3, blockquote * {
    /* color: var(--c-primary); */
    color: var(--c-text);
    font-family: 'PT Serif';
    font-style: italic;
    line-height: 1.5;
}
blockquote * {
    color: var(--c-primary);
}
blockquote {
    border-left: 5px solid var(--c-primary);
    padding-left: 1.25rem;
}
code {
    color: var(--c-entry-blue);
}
h1 {
    font-size: 2.25rem;
    line-height: 1;
}
h3.question {
    font-style: italic;
    font-size: 1.15rem;
}
.entry_cnt h1 {
    font-size: 2rem;
}
.entry_cnt h2 {
    font-size: 1.75rem;
    margin-bottom: .25rem;
}
.entry_cnt h3 {
    font-size: 1.5rem;
    margin-bottom: .25rem;
}
.entry_cnt_row[data-num="2"] {
    color: var(--c-primary-light);
    /* border-top: 2px solid var(--c-primary-lighter); */
    margin: 0;
    margin-top: 1rem;
    background-color: var(--c-primary-lightest);
    border-radius: .5rem;
}
.entry_cnt_row[data-num="2"] > .col {
    padding: 0;
}
h4 {
    font-size: 1.25rem;
}
.small, small {
    font-size: .85rem;
}
.text-muted {
    color: var(--c-primary-light) !important;
}
span.bull {
    display: inline-block;
    font-size: 1em;
    margin-right: 0.5em;
    margin-left: 0.25em;
    font-weight: bold;
}
span.checkbox {
    display: inline-block;
    font-size: 1em;
    margin-right: 0.5em;
    margin-left: 0.1em;
    font-family: monospace;
    font-weight: bold;
    color: var(--c-primary-light);
}
span.checkbox_checked {
    display: inline-block;
    font-size: 1em;
    margin-right: 0.75em;
    margin-left: 0.1em;
    font-family: monospace;
    font-weight: bold;
    color: var(--c-primary-light);
}
.btn-link {
    color: var(--c-primary-light);
    text-decoration: none;
}
.btn-link:hover, .btn-link:focus {
    color: var(--c-primary);
}
#app {
    position: relative;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;    
    opacity: 1;
    transition-property: all;
    transition-duration: 1s;
}
#app.loading {
    opacity: 0.25;
}
#header {
    position: fixed;
    display: block;
    background-color: #fff;
    z-index: 10;
    width: 100%;
    top: 0;
    left: 0;
    padding: 0;
    /* box-shadow: 0 7px 10px var(--c-primary-light); */
}
#header .btns .btn {
    padding: .25rem .1rem;
    /* color: var(--c-primary); */
    color: var(--c-primary-light);
}
#header .btns .btn:hover, #header .btns .btn:focus, #header .btns .btn:active {
    color: var(--c-primary);
    color: var(--c-text);
}
#entries_header {
    position: relative;
    /* margin-top: 4.15rem; */
    background-color: var(--c-primary-light);
    /* color: var(--c-primary); */
    color: #fff;
}
#header_tags {
    display: none;
    background-color: var(--c-text);
    border-bottom: 1px solid #fff;
}
#header_tags .btn-link {
    /* color: var(--c-primary-light); */
    color: #fff;
    opacity: .5;
}
#header_tags .btn-link:hover, #header_tags .btn-link:focus {
    /* color: var(--c-primary); */
    color: #fff;
    opacity: 1;
}
#entries_pin, #entries_warning, #entries_date, #entries_star, #entries_power, #entries_heart, #entries_color, #entries_tags, #entries_search {
    display: flex;
    margin-left: .25rem;
}
#entries_color {
    display: none;
}
#entries_search {
    font-size: 1rem;
    display: none;
}
#tags_selected, #entries_tag {
    flex-grow: 7;
}
#tags_selected .tag_count {
    color: #fff;
    opacity: .5; 
    margin-left: 1rem;
    margin-right: 1rem;
}
#tags_selected .tag_name {
    color: #fff;
    cursor: pointer;
    opacity: .5; 
    margin-right: 1rem;
}
#tags_selected .tag_name:hover {
    color: #fff;
    opacity: 1; 
}
#entries_tag_name {
    /* color: var(--c-primary-light); */
    /* color: var(--c-text); */
    color: #fff;
    cursor: pointer;
    opacity: .5;
}
#entries_tag_name:hover {
    /* color: var(--c-primary); */
    color: #fff;
    opacity: 1;
}
.entries_other {
    flex-grow: 4;
}
.entries_other .btn-link {
    color: #fff;
    /* color: var(--c-primary-light); */
    text-decoration: none;
    padding: 0;
    display: flex;
    align-items: center;
    opacity: .5;
}
.entries_other .btn-link:hover, .entries_other .btn-link:focus {
    color: #fff;
    opacity: 1;
}
#list_entries {
    position: relative;    
}
#msg_no_entries {
    display: none;
    margin: 1rem;
    padding-top: 1rem;
}
#msg_no_entries h3 {
    font-style: italic;
    /* font-size: 1.25rem; */
    color: var(--c-primary);
}
.entry {
    position: relative;    
    /* border-top: 1px solid #efefef; */
    /* border-bottom: 1px solid var(--c-primary-lighter); */
    border-bottom: 1px solid var(--bs-gray-200);
    background-color: #fff;
    transition-property: all;
    transition-duration: 500ms;
}
.entry.selected {
    background-color: lightyellow !important;
}
.entry.highlight {
    background-color: lightgoldenrodyellow !important;
}
.entry .btn_props {
    float: right;
    visibility: hidden;
    padding: .5rem 1rem;
    color: var(--c-primary-light);
}

.entry:first-child {
    /* border-bottom: 1px solid #efefef; */
    /* border-top: 1px solid var(--c-primary-lighter); */
    border-top: 1px solid var(--bs-gray-200);
}
.entry.selected .entry_link .entry_excerpt {
    /* outline: 1px dashed var(--c-primary-light); */
    color: var(--c-primary);
}
.entry.is_pin {
    background-color: var(--c-primary-lightest);
    border-bottom: 1px solid rgba(255,255,255,.5);
    border-bottom: 1px solid var(--bs-gray-300);
}
.entry .bi-pin-fill, .entry .bi-pin-angle-fill {
    display: none;
}
.entry.is_pin .bi-pin-fill, .entry.is_pin .bi-pin-angle-fill {
    display: inline-block;
}

.entry .bi-exclamation-triangle-fill {
    display: none;
}
.entry .bi-exclamation-triangle {
    display: inline-block;
}
.entry.is_warning .bi-exclamation-triangle {
    display: none;
}
.entry.is_warning .bi-exclamation-triangle-fill {
    display: inline-block;
}

.entry .bi-calendar-date-fill {
    display: none;
}
.entry .bi-calendar-date {
    display: inline-block;
    display: none;
}
.entry.is_date .bi-calendar-date {
    display: inline-block;
}
.entry.is_date .bi-calendar-date-fill {
    display: none;
}

.entry .bi-star-fill {
    display: none;
}
.entry .bi-star {
    display: inline-block;
}
.entry.is_star .bi-star {
    display: none;
}
.entry.is_star .bi-star-fill {
    display: inline-block;
}
.entry .bi-lightning-fill {
    display: none;
}
.entry .bi-lightning {
    display: inline-block;
}
.entry.is_power .bi-lightning {
    display: none;
}
.entry.is_power .bi-lightning-fill {
    display: inline-block;
    /* color: var(--c-primary); */
    /* color: var(--c-primary-light); */
}
.entry .bi-lock-fill {
    display: none;
}
.entry .bi-lock, .entry .bi-unlock {
    display: block;
}
.entry.is_lock .bi-lock, .entry.is_lock .bi-unlock {
    display: none;
}
.entry.is_lock .bi-lock-fill {
    display: inline-block;
    /* color: var(--c-primary); */
}

.entry .bi-suit-heart-fill {
    display: none;
}
.entry .bi-suit-heart {
    display: inline-block;
}
.entry.is_heart .bi-suit-heart {
    display: none;
}
.entry.is_heart .bi-suit-heart-fill {
    display: inline-block;
    /* color: var(--c-primary); */
}
/* .entry.entry_color_blue .icon_color {
    color: var(--c-entry-blue);
}
.entry.entry_color_indigo .icon_color {
    color: var(--c-entry-indigo);
}
.entry.entry_color_purple .icon_color {
    color: var(--c-entry-purple);
}
.entry.entry_color_pink .icon_color {
    color: var(--c-entry-pink);
} */

.entry {
    border-left-color: #fff;
    /* border-left-width: .5rem; */
    border-left-width: 0;
    border-left-style: solid;
}
.entry.is_pin {
    border-left-color: var(--c-primary-lighter);    
}
.entry.entry_color_blue {
    border-left-color: var(--c-entry-blue);
}
.entry.entry_color_indigo {
    border-left-color: var(--c-entry-indigo);
}
.entry.entry_color_purple {
    border-left-color: var(--c-entry-purple);
}
.entry.entry_color_pink {
    border-left-color: var(--c-entry-pink);
}
.entry.entry_color_red {
    border-left-color: var(--c-entry-red);
}
.entry.entry_color_orange {
    border-left-color: var(--c-entry-orange);
}
.entry.entry_color_yellow {
    border-left-color: var(--c-entry-yellow);
}
.entry.entry_color_green {
    border-left-color: var(--c-entry-green);
}
.entry.entry_color_teal {
    border-left-color: var(--c-entry-teal);
}
.entry.entry_color_cyan {
    border-left-color: var(--c-entry-cyan);
}
.entry.entry_color_gray {
    border-left-color: var(--c-entry-gray);
}

.entry_icon.icon_pin svg {
    fill: var(--c-primary-light);
}
.entry_icon.icon_power {
    color: var(--c-entry-power);
}
.entry_icon.icon_warning {
    color: var(--c-entry-warning);
}
.entry_icon.icon_date {
    color: var(--c-primary-light);
}
.entry_icon.icon_date.due {
    color: var(--c-entry-red);
}
.entry_icon.icon_star {
    color: var(--c-entry-star);
}
.entry_icon.icon_heart {
    color: var(--c-entry-heart);
}
.entry_icon.icon_lock {
    color: var(--c-entry-lock);
}


.entry .bi-droplet-fill {
    display: none;
}
.entry .bi-droplet {
    display: inline-block;
}
.entry.is_color .bi-droplet-fill {
    display: inline-block;
}
.entry.is_color .bi-droplet {
    display: none;
}

.entry.is_lock .entry_excerpt .asterisk {
    /* visibility: hidden; */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.25rem;
    line-height: 1.25;
    margin-top: .25rem;
    float: left;
    display: inline-block;
}
.entry_excerpt .small {
    color: var(--c-primary-light);
}

.entry .btns {
    /* width: 74px;
    text-align: left; */
    /* width: 44px;
    text-align: center; */
    height: 100%;
}
.entry .btns .btn-link {
    color: var(--c-primary-light);
    display: block;
}
.entry .btns .entry_link {
    color: var(--c-primary-light);
    text-align: left;
    display: block;
    height: 100%;
}
.entry .btns .entry_link:hover, .entry .btns .entry_link:focus {
    color: var(--c-primary);
}

.entry_link {
    display: block;
    /* color: var(--c-primary); */
    color: var(--c-text);
    text-decoration: none;
    padding: .5rem 0;
}
.entry_link:hover, .entry_link:focus {
    color: var(--c-primary);
}
.entry_title {
    /* font-size: 1.15rem; */
    font-size: .85rem;
    margin-bottom: 0;
    /* color: var(--c-primary); */
    display: none;
}
.entry_excerpt {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 0;
}
.entry_refs {
    float: left;
    margin-right: .5rem;
    margin-bottom: 0;
    font-size: .85rem;
    color: var(--c-primary-light);
    display: none;
}
.entry_audio {
    float: left;
    margin-right: .5rem;
    margin-bottom: 0;
    font-size: .85rem;
    color: var(--c-primary-light);
    display: none;
}
.entry_photo {
    float: left;
    margin-right: .5rem;
    margin-bottom: 0;
    font-size: .85rem;
    color: var(--c-primary-light);
    display: none;
}
.entry_date {
    float: left;
    margin-right: .5rem;
    margin-bottom: 0;
    font-size: .85rem;
    color: var(--c-primary-light);
    display: inline-block;
    font-weight: bold;
    border: 1px solid;
    border-top-width: 2px;
    border-radius: 0.25rem;    
    padding: 0 .25rem;
    margin-bottom: .25rem;
}
.entry_date.due {
    color: var(--c-entry-red);
}
.entry .entry_date:empty {
    display: none;
}
#cnt_entry * {
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
#cnt_entry hr {
    margin: 1.25rem 0;
    color: var(--c-primary-light);    
    border-top: 3px solid var(--c-primary-light);
}
#cnt_entry p + ul {
    margin-top: -.5em;
}
#cnt_entry details {
    margin-bottom: 1rem;
    border: 1px solid var(--c-primary-lighter);
    border-radius: .5rem;
    padding: 0.25rem 1rem;
}
#cnt_entry li p {
    margin-bottom: 0;
}
details summary {
    /* padding-left: 1rem; */
    position: relative;  
}
details summary::after {
    content: "+";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    color: var(--c-primary-light);
    font-size: 1.5rem;
    line-height: 1.2;
    /* font-weight: bold; */
}
details summary > * {
    margin: 0;
}
details[open] > summary::after {
    content: "-";
}
details[open] > summary {
    margin-bottom: .5rem;
    /* font-weight: bold; */
}
details summary::marker {
    display: none !important;
    content: '';
}
details summary:focus {
    outline: none;
}
details summary::-webkit-details-marker {
    display: none;
}
/* details summary::marker {
    color: var(--c-primary-light);
}
details[open] > summary::marker {
    color: var(--c-text);
}

details[open] > summary ~ * {
    animation: sweep .25s ease-in-out;
    animation-fill-mode: both;
}
@keyframes sweep {
    0% {
        opacity: 0; 
        margin-top: -10px;
    }
    100%  {
        opacity: 1; 
        margin-top: 0px
    }
} */
#cnt_entry .c_collapse {
    position: relative;
    display: block;
    border: 1px solid var(--c-primary-lighter);
    border-radius: .5rem;    
    padding: .5rem .75rem;
    margin-bottom: 1rem;
}
#cnt_entry .c_collapse .c_title {    
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#cnt_entry .c_collapse .c_title > * {
    margin-bottom: 0;
}
#cnt_entry .c_collapse .c_title::after {
    content: "+";
    /* position: absolute; */
    /* top: 0; */
    /* right: 0; */
    display: block;
    color: var(--c-primary-light);
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: normal;
}
#cnt_entry .c_collapse .c_title.is_open {
    font-weight: bold;
}
#cnt_entry .c_collapse .c_title.is_open::after {
    content: "-";
}
#cnt_entry .c_collapse .c_title ~ .c_body {
    display: block;
    /* display: none; */
    /* visibility: hidden; */
    max-height: 0;
    overflow: hidden;
    transition-property: all;
    transition-duration: 350ms;
    transition-timing-function: ease;
    padding-top: 0;
    opacity: 0;
    /* margin-top: .5rem; */
    /* padding-top: .5rem; */
    
}
#cnt_entry .c_collapse .c_title.is_open ~ .c_body, #cnt_entry .c_collapse.is_open .c_body {
    /* display: block; */
    /* visibility: visible; */
    /* height: auto; */
    /* max-height: 99999px; */
    max-height: var(--max-height);
    padding-top: .5rem;
    opacity: 1;
}
#cnt_entry .c_collapse .c_title.is_open ~ .c_body :last-child, #cnt_entry .c_collapse.is_open .c_body :last-child {
    margin-bottom: 0;
}

#cnt_entry_date {

}
#entry_date {
    max-width: 150px;
    margin-left: 0.5rem;
    border: 1px solid var(--c-primary-light);
    padding: 0.15rem 0.35rem;    
}
#cnt_entry_audio {

}
#cnt_entry_audio:empty {
    display: none;
}
#cnt_entry_audio:not(:empty) {
    margin-bottom: 1rem;
}
#cnt_entry .entry_cnt {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}
.entry_audio:not(:empty) {
    /* display: inline-block; */
    display: flex;
    align-items: center;
    gap: .5rem;
}
.entry_photo:not(:empty) {
    /* display: inline-block; */
    display: flex;
    align-items: center;
    gap: .5rem;
}
.entry_audio_file {
    margin-bottom: .5rem;
}
.mejs__container {
    width: 100% !important;
    background-color: var(--c-primary-light);
    border-radius: .5rem;
}
.mejs__horizontal-volume-total {
    background: var(--c-primary-light);
}
.mejs__controls:not([style*="display: none"]) {
    background: none !important;
}

.entry_tags {
    font-size: .85rem;
    color: var(--c-primary);
    margin-bottom: 0;
}
.entry_tags:not(:empty) {
    margin-bottom: .15rem;
}
.entry_tags a:link, .entry_tags a:visited, #all_tags a:link, #all_tags a:visited, #cnt_entry a:link, #cnt_entry a:visited {
    color: var(--c-primary-light);
    text-decoration: none;
}
.entry_tags a:hover, .entry_tags a:focus, #all_tags a:hover, #all_tags a:focus, #cnt_entry a:hover, #cnt_entry a:focus {
    color: var(--c-primary);
    text-decoration: underline;
}
#all_tags {
    margin-left: -.5rem;
    margin-right: -.5rem;
}
#all_tags a {
    padding: .25rem .25rem;
    display: inline-block;
}

#dropdown_tags_menu {
    max-height: 70vh;
    overflow: auto;
}

.flex-grow-8 {
    flex-grow: 8;
}
.flex-grow-9 {
    flex-grow: 9;
}
.flex-grow-10 {
    flex-grow: 10;
}
.text-overflow-ellipsis-hack {
    min-width: 0;
}
/* .text-muted {
    color: var(--c-primary-lighter) !important;
} */
button.btn {
    cursor: pointer;
}
.btn {
    padding: .5rem .75rem;
    border-radius: .5rem;
}
.btn-primary {
    background-color: var(--c-primary-lighter);
    border-color: var(--c-primary);
    /* color: var(--c-primary); */
    /* color: var(--c-text); */
    color: var(--c-primary-light);
    font-size: 1.25rem;
    border-width: 0 !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff
}
.btn-secondary {
    background-color: var(--c-primary-lighter);  
    border-color: var(--c-primary-lighter); 
    color: var(--c-primary);
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff
}
.accordion-button:not(.collapsed) {
    background-color: var(--c-primary-lighter);  
    color: var(--c-primary);
}
.accordion-button {
    font-size: 1.25rem;
    font-weight: normal;
    color: var(--c-text);
    padding: 1rem;
}
.accordion-button:hover {
    color: var(--c-primary);
}
.accordion-button::after, .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%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");
}
#bg_footer_actions {
    position: fixed;
    z-index: 90;    
    bottom: 0;
    left: 0;
    right: 0;
    height: 3.5rem;
    height: 4.5rem;
    background-color: var(--c-primary-lighter);
    display: none;
}
#btn_new {
    position: fixed;
    z-index: 100;
    right: .5rem;
    bottom: .5rem;
    border-radius: 50%;
    border-width: 3px;
    width: 3.5rem;
    height: 3.5rem;
    /* font-size: 48px; */
    line-height: 1;
    text-align: center;
    vertical-align: top;    
    /* box-shadow: 1px 2px 12px rgb(0 0 0 / 30%); */
    box-shadow: none;
    background-color: var(--c-primary);
    color: rgba(255,255,255,.75);
    padding: 0;
}
#btn_new:hover, #btn_new:focus {
    color: #fff;
    transform: scale(1.1);
}
#btn_search {
    position: fixed;
    z-index: 100;
    border-radius: 50%;
    border-width: 3px;
    /* border-radius: 0; */
    left: 0.5rem;
    bottom: 0.5rem;
    width: 3.5rem;
    height: 3.5rem;
    /* font-size: 48px; */
    line-height: 1;
    text-align: center;
    vertical-align: top;    
    /* box-shadow: 1px 2px 12px rgb(0 0 0 / 30%); */
    box-shadow: none;
    border: 0;
    /* color: #fff; */
    background-color: var(--c-primary-lighter);
    padding: 0;
}
#btn_search:hover {
    background-color: var(--c-primary);
    color: #fff;    
}
#btn_search.active {
    background-color: transparent;
    color: var(--c-text);
}
#search {
    position: fixed;
    z-index: 100;
    left: 4rem;
    right: 4.5rem;
    bottom: 0.5rem;
    padding: .5rem;
    /* background-color: var(--c-primary-light); */
    /* border-radius: 5px; */
    display: none;
}
#search_count {
    position: absolute;
    right: -1.25rem;
    top: 0.75rem;
    font-size: 1.25rem;
    color: #fff;
    display: none;
}
#i_search {
    font-size: 1.25rem;
    padding: .25rem .5rem;
}
#i_search:focus {
    box-shadow: none;
    /* border-color: var(--c-primary); */
    border: 0;
    border-width: 0;
    outline: 2px solid var(--c-primary);
}
#btn_entry_save, #btn_entry_edit, #btn_info_close, #btn_ref_menu, #btn_audio_record, #btn_photo, #btn_entry_close, #btn_modal_confirm_cancel, #btn_modal_confirm_ok, #btn_modal_alert_ok {
    border-radius: 50%;
    border-width: 3px;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    /* position: absolute; */
    /* bottom: .5rem; */
    margin: 0;
    line-height: 1;
}
#btn_entry_close {
    display: none;
    background-color: transparent;
}
#btn_photo {
    line-height: 3.25rem;
    vertical-align: middle;
    text-align: center;
}
#btn_entry_save {
    background-color: var(--c-primary);
    color: rgba(255,255,255,0.75);
}
#btn_entry_save:hover, #btn_entry_save:focus {
    color: #fff;
    background-color: var(--c-primary);
    transform: scale(1.1);
}
#btn_ref_menu, #btn_audio_record, #btn_photo, #btn_entry_edit {
    background-color: transparent;
}
#btn_ref_menu:hover, #btn_audio_record:hover, #btn_photo:hover, #btn_entry_edit:hover, #btn_ref_menu:focus, #btn_audio_record:focus, #btn_photo:focus, #btn_entry_edit:focus {
    background-color: var(--c-primary);
    color: #fff;
}
#btn_info {
    padding: 0;
}
#btn_order {
    text-decoration: none;
}
#dropdown_order {
    max-width: 64px;
    min-width: 2rem;
}
#btn_order svg {
    display: none;
}
#btn_order.order_t_c svg.bi-sort-numeric-down-alt {
    display: inline-block;
}
#btn_order.order_t_u svg.bi-clock {
    display: inline-block;
}
#btn_order.order_az svg.bi-sort-alpha-down {
    display: inline-block;
}
#btn_order.order_za svg.bi-sort-alpha-down-alt {
    display: inline-block;
}

#modal_history {

}
#modal_history_list {

}
.item_history {
    border-bottom: 1px solid var(--c-primary-lighter);
}
.item_history_details {
    padding: .25rem;
}
a.link_history:link, a.link_history:visited {
    padding: .25rem;
    color: var(--c-primary-light);
}
a.link_history:focus, a.link_history:active {
    color: var(--c-primary);
}

#modal_props .modal-body {
    padding: 1rem 0.5rem;
}
#modal_props .modal_btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

#btn_props_clone, #btn_props_delete {
    color: var(--c-primary-light);
}
#btn_props_clone:hover, #btn_props_clone:focus {
    color: var(--c-primary);
}
#btn_props_delete:hover, #btn_props_delete:focus {
    color: var(--c-danger);
}

#btn_entry_pin, #btn_props_pin {
    /* padding: 0; */
    /* color: var(--c-primary) !important; */
}
#btn_entry_pin.is_pin, #btn_props_pin.is_pin {
    color: var(--c-primary) !important;
    /* color: #fff !important; */
}
#btn_entry_pin .bi-pin-fill, #btn_entry_pin .bi-pin-angle-fill, #btn_props_pin .bi-pin-fill, #btn_props_pin .bi-pin-angle-fill {
    display: none;
}
#btn_entry_pin .bi-pin, #btn_entry_pin .bi-pin-angle, #btn_props_pin .bi-pin, #btn_props_pin .bi-pin-angle {
    display: block;
}
#btn_entry_pin.is_pin .bi-pin-fill, #btn_entry_pin.is_pin .bi-pin-angle-fill, #btn_props_pin.is_pin .bi-pin-fill, #btn_props_pin.is_pin .bi-pin-angle-fill {
    display: block;
}
#btn_entry_pin.is_pin .bi-pin, #btn_entry_pin.is_pin .bi-pin-angle, #btn_props_pin.is_pin .bi-pin, #btn_props_pin.is_pin .bi-pin-angle {
    display: none;
}
svg.bi-pin-angle, svg.bi-pin-angle-fill {
    transform: rotate(-15deg);
}

#btn_entry_warning, #btn_props_warning {
    /* padding: 0; */
    /* color: var(--c-primary) !important; */
}
#btn_entry_warning.is_warning, #btn_props_warning.is_warning {
    color: var(--c-primary) !important;
    /* color: #fff !important; */
}
#btn_entry_warning .bi-exclamation-triangle-fill, #btn_props_warning .bi-exclamation-triangle-fill {
    display: none;
}
#btn_entry_warning .bi-exclamation-triangle, #btn_props_warning .bi-exclamation-triangle {
    display: block;
}
#btn_entry_warning.is_warning .bi-exclamation-triangle-fill, #btn_props_warning.is_warning .bi-exclamation-triangle-fill {
    display: block;
}
#btn_entry_warning.is_warning .bi-exclamation-triangle, #btn_props_warning.is_warning .bi-exclamation-triangle {
    display: none;
}

#btn_entry_date, #btn_props_date {
    /* padding: 0; */
    /* color: var(--c-primary) !important; */
}
#btn_entry_date.is_date, #btn_props_date.is_date {
    color: var(--c-primary) !important;
    /* color: #fff !important; */
}
#btn_entry_date .bi-calendar-date-fill, #btn_props_date .bi-calendar-date-fill {
    display: none;
}
#btn_entry_date .bi-calendar-date, #btn_props_date .bi-calendar-date {
    display: block;
}
#btn_entry_date.is_date .bi-calendar-date-fill, #btn_props_date.is_date .bi-calendar-date-fill {
    display: block;
}
#btn_entry_date.is_date .bi-calendar-date, #btn_props_date.is_date .bi-calendar-date {
    display: none;
}

#btn_entry_star, #btn_props_star {
    /* padding: 0; */
    /* color: var(--c-primary) !important; */
}
#btn_entry_star.is_star, #btn_props_star.is_star {
    color: var(--c-primary) !important;
    /* color: #fff !important; */
}
#btn_entry_star .bi-star-fill, #btn_props_star .bi-star-fill {
    display: none;
}
#btn_entry_star .bi-star, #btn_props_star .bi-star {
    display: block;
}
#btn_entry_star.is_star .bi-star-fill, #btn_props_star.is_star .bi-star-fill {
    display: block;
}
#btn_entry_star.is_star .bi-star, #btn_props_star.is_star .bi-star {
    display: none;
}

#btn_entry_power, #btn_props_power {
    /* padding: 0; */
    /* color: var(--c-primary) !important; */
}
#btn_entry_power.is_power, #btn_props_power.is_power {
    color: var(--c-primary) !important;
    /* color: #fff !important; */
}
#btn_entry_power .bi-lightning-fill, #btn_props_power .bi-lightning-fill {
    display: none;
}
#btn_entry_power .bi-lightning, #btn_props_power .bi-lightning {
    display: block;
}
#btn_entry_power.is_power .bi-lightning-fill, #btn_props_power.is_power .bi-lightning-fill {
    display: block;
}
#btn_entry_power.is_power .bi-lightning, #btn_props_power.is_power .bi-lightning {
    display: none;
}

#btn_entry_color, #btn_props_color {
    
}
#btn_entry_color .bi-circle-fill, #btn_entry_color .bi-droplet-fill, #btn_props_color .bi-circle-fill, #btn_props_color .bi-droplet-fill {
    display: none;
}
#btn_entry_color .bi-circle, #btn_entry_color .bi-droplet, #btn_props_color .bi-circle, #btn_props_color .bi-droplet {
    display: block;
}
#btn_entry_color.is_color .bi-circle-fill, #btn_entry_color.is_color .bi-droplet-fill, #btn_props_color.is_color .bi-circle-fill, #btn_props_color.is_color .bi-droplet-fill {
    display: block;
}
#btn_entry_color.is_color .bi-circle, #btn_entry_color.is_color .bi-droplet, #btn_props_color.is_color .bi-circle, #btn_props_color.is_color .bi-droplet {
    display: none;
}
.popover {
    z-index: 99999;
}
.popover_color {
    
}
.popover_color .popover-body, .popover_filter_color .popover-body {
    padding: .25rem;
}
.popover_color .popover-body div.entry_color, .popover_filter_color .popover-body div.entry_color {
    display: block;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 12px;
    cursor: pointer;
    margin: .25rem;
}
.popover_color .popover-body div.entry_color.entry_color_blue, .popover_filter_color .popover-body div.entry_color.entry_color_blue {
    background-color: var(--c-entry-blue);
}
.popover_color .popover-body div.entry_color.entry_color_indigo, .popover_filter_color .popover-body div.entry_color.entry_color_indigo {
    background-color: var(--c-entry-indigo);
}
.popover_color .popover-body div.entry_color.entry_color_purple, .popover_filter_color .popover-body div.entry_color.entry_color_purple {
    background-color: var(--c-entry-purple);
}
.popover_color .popover-body div.entry_color.entry_color_pink, .popover_filter_color .popover-body div.entry_color.entry_color_pink {
    background-color: var(--c-entry-pink);
}
.popover_color .popover-body div.entry_color.entry_color_red, .popover_filter_color .popover-body div.entry_color.entry_color_red {
    background-color: var(--c-entry-red);
}
.popover_color .popover-body div.entry_color.entry_color_orange, .popover_filter_color .popover-body div.entry_color.entry_color_orange {
    background-color: var(--c-entry-orange);
}
.popover_color .popover-body div.entry_color.entry_color_yellow, .popover_filter_color .popover-body div.entry_color.entry_color_yellow {
    background-color: var(--c-entry-yellow);
}
.popover_color .popover-body div.entry_color.entry_color_green, .popover_filter_color .popover-body div.entry_color.entry_color_green {
    background-color: var(--c-entry-green);
}
.popover_color .popover-body div.entry_color.entry_color_teal, .popover_filter_color .popover-body div.entry_color.entry_color_teal {
    background-color: var(--c-entry-teal);
}
.popover_color .popover-body div.entry_color.entry_color_cyan, .popover_filter_color .popover-body div.entry_color.entry_color_cyan {
    background-color: var(--c-entry-cyan);
}
.popover_color .popover-body div.entry_color.entry_color_gray, .popover_filter_color .popover-body div.entry_color.entry_color_gray {
    background-color: var(--c-entry-gray);
}

#modal_entry.is_color.entry_color_blue .modal-header {
    background-color: var(--c-entry-blue);
}
#modal_entry.is_color.entry_color_indigo .modal-header {
    background-color: var(--c-entry-indigo);
}
#modal_entry.is_color.entry_color_purple .modal-header {
    background-color: var(--c-entry-purple);
}
#modal_entry.is_color.entry_color_pink .modal-header {
    background-color: var(--c-entry-pink);
}
#modal_entry.is_color.entry_color_red .modal-header {
    background-color: var(--c-entry-red);
}
#modal_entry.is_color.entry_color_orange .modal-header {
    background-color: var(--c-entry-orange);
}
#modal_entry.is_color.entry_color_yellow .modal-header {
    background-color: var(--c-entry-yellow);
}
#modal_entry.is_color.entry_color_green .modal-header {
    background-color: var(--c-entry-green);
}
#modal_entry.is_color.entry_color_teal .modal-header {
    background-color: var(--c-entry-teal);
}
#modal_entry.is_color.entry_color_cyan .modal-header {
    background-color: var(--c-entry-cyan);
}
#modal_entry.is_color.entry_color_gray .modal-header {
    background-color: var(--c-entry-gray);
}
.entry_color.entry_color_transparent{
    background-color: #fff;
    border: 1px solid var(--c-primary-light);
}

#btn_entry_lock, #btn_props_lock {
    
}
#btn_entry_lock.is_lock, #btn_props_lock.is_lock {
    color: var(--c-primary) !important;
    /* color: #fff !important; */
}
#btn_entry_lock .bi-lock-fill, #btn_props_lock .bi-lock-fill {
    display: none;
}
#btn_entry_lock .bi-lock, #btn_entry_lock .bi-unlock, #btn_props_lock .bi-lock, #btn_props_lock .bi-unlock {
    display: block;
}
#btn_entry_lock.is_lock .bi-lock-fill, #btn_props_lock.is_lock .bi-lock-fill {
    display: block;
}
#btn_entry_lock.is_lock .bi-lock, #btn_entry_lock.is_lock .bi-unlock, #btn_props_lock.is_lock .bi-lock, #btn_props_lock.is_lock .bi-unlock {
    display: none;
}

#btn_entry_heart, #btn_props_heart {
    /* padding: 0; */
    /* color: var(--c-primary) !important; */
}
#btn_entry_heart.is_heart, #btn_props_heart.is_heart {
    color: var(--c-primary) !important;
    /* color: #fff !important; */
}
#btn_entry_heart .bi-suit-heart-fill, #btn_props_heart .bi-suit-heart-fill {
    display: none;
}
#btn_entry_heart .bi-suit-heart, #btn_props_heart .bi-suit-heart {
    display: inline-block;
}
#btn_entry_heart.is_heart .bi-suit-heart-fill, #btn_props_heart.is_heart .bi-suit-heart-fill {
    display: inline-block;
}
#btn_entry_heart.is_heart .bi-suit-heart, #btn_props_heart.is_heart .bi-suit-heart {
    display: none;
}

#btn_filter_all {
    padding: 0;
    text-decoration: none;
    color: #fff;
    /* color: var(--c-primary-light); */
    opacity: .5;
    display: flex;
    align-items: center;
}
#btn_filter_all:hover, #btn_filter_all:focus {
    color: #fff;
    opacity: 1;
}

#btn_filter_pin {
    padding: 0;
    display: none;
}
#btn_filter_pin.is_pin {
    /* color: var(--c-primary) !important; */
    color: #fff !important;
    opacity: 1;
}
#btn_filter_pin .bi-pin-fill, #btn_filter_pin .bi-pin-angle-fill {
    display: none;
}
#btn_filter_pin .bi-pin, #btn_filter_pin .bi-pin-angle {
    display: inline-block;
}
#btn_filter_pin.is_pin .bi-pin-fill, #btn_filter_pin.is_pin .bi-pin-angle-fill {
    display: inline-block;
}
#btn_filter_pin.is_pin .bi-pin, #btn_filter_pin.is_pin .bi-pin-angle {
    display: none;
}

#btn_filter_warning {
    padding: 0;
    display: none;
}
#btn_filter_warning.is_warning {
    /* color: var(--c-primary) !important; */
    color: #fff !important;
    opacity: 1;
}
#btn_filter_warning .bi-exclamation-triangle-fill {
    display: none;
}
#btn_filter_warning .bi-exclamation-triangle {
    display: inline-block;
}
#btn_filter_warning.is_warning .bi-exclamation-triangle-fill {
    display: inline-block;
}
#btn_filter_warning.is_warning .bi-exclamation-triangle {
    display: none;
}

#btn_filter_date {
    padding: 0;
    display: none;
}
#btn_filter_date.is_date {
    /* color: var(--c-primary) !important; */
    color: #fff !important;
    opacity: 1;
}
#btn_filter_date .bi-calendar-date-fill {
    display: none;
}
#btn_filter_date .bi-calendar-date {
    display: inline-block;
}
#btn_filter_date.is_date .bi-calendar-date-fill {
    display: inline-block;
}
#btn_filter_date.is_date .bi-calendar-date {
    display: none;
}

#btn_filter_star {
    padding: 0;
    display: none;
}
#btn_filter_star.is_star {
    /* color: var(--c-primary) !important; */
    color: #fff !important;
    opacity: 1;
}
#btn_filter_star .bi-star-fill {
    display: none;
}
#btn_filter_star .bi-star {
    display: inline-block;
}
#btn_filter_star.is_star .bi-star-fill {
    display: inline-block;
}
#btn_filter_star.is_star .bi-star {
    display: none;
}

#btn_filter_power {
    padding: 0;
    display: none;
}
#btn_filter_power.is_power {
    /* color: var(--c-primary) !important; */
    color: #fff !important;
    opacity: 1;
}
#btn_filter_power .bi-lightning-fill {
    display: none;
}
#btn_filter_power .bi-lightning {
    display: inline-block;
}
#btn_filter_power.is_power .bi-lightning-fill {
    display: inline-block;
}
#btn_filter_power.is_power .bi-lightning {
    display: none;
}

#btn_filter_lock {
    padding: 0;
    display: none;
}
#btn_filter_lock.is_lock {
    /* color: var(--c-primary) !important; */
    color: #fff !important;
    opacity: 1;
}
#btn_filter_lock .bi-lock-fill {
    display: none;
}
#btn_filter_lock .bi-lock, #btn_filter_lock .bi-unlock {
    display: inline-block;
}
#btn_filter_lock.is_lock .bi-lock-fill {
    display: inline-block;
}
#btn_filter_lock.is_lock .bi-lock, #btn_filter_lock.is_lock .bi-unlock {
    display: none;
}

#btn_filter_tag {
    padding: 0;
    /* display: none; */
}
#btn_filter_tag.is_tag {
    /* color: var(--c-primary) !important; */
    color: #fff !important;
    opacity: 1;
}
#btn_filter_tag .bi-tags-fill, #btn_filter_tag .bi-tag-fill {
    display: none;
}
#btn_filter_tag .bi-tags, #btn_filter_tag .bi-tag {
    display: inline-block;
}
#btn_filter_tag.is_tag .bi-tags-fill, #btn_filter_tag.is_tag .bi-tag-fill {
    display: inline-block;
}
#btn_filter_tag.is_tag .bi-tags, #btn_filter_tag.is_tag .bi-tag {
    display: none;
}


#btn_filter_heart {
    /* padding: 0;
    display: none; */
}
#btn_filter_heart.is_heart {
    /* color: var(--c-primary); */
    color: #fff !important;
    opacity: 1;
}
#btn_filter_heart .bi-suit-heart-fill {
    display: none;
}
#btn_filter_heart .bi-suit-heart {
    display: inline-block;
}
#btn_filter_heart.is_heart .bi-suit-heart-fill {
    display: inline-block;
}
#btn_filter_heart.is_heart .bi-suit-heart {
    display: none;
}

#btn_filter_color {
    /* padding: 0;
    display: none; */
}
#btn_filter_color.is_color {
    /* color: var(--c-primary); */
    color: #fff !important;
    opacity: 1;
}
#btn_filter_color .bi-droplet-fill {
    display: none;
}
#btn_filter_color .bi-droplet {
    display: inline-block;
}
#btn_filter_color.is_color .bi-droplet-fill {
    display: inline-block;
}
#btn_filter_color.is_color .bi-droplet {
    display: none;
}

#modal_entry.is_color #btn_entry_pin.is_pin, #modal_entry.is_color #btn_entry_warning.is_warning, #modal_entry.is_color #btn_entry_date.is_date, #modal_entry.is_color #btn_entry_star.is_star
#modal_entry.is_color #btn_entry_power.is_power, #modal_entry.is_color #btn_entry_heart.is_heart,
#modal_entry.is_color #btn_entry_lock.is_lock, #modal_entry.is_color #btn_entry_color.is_color {
    color: #fff !important;
    /* color: var(--c-text) !important; */
}  

#btn_audio_record {
    /* border-width: 3px;
    border-radius: 50%;
    width: 3.5rem;
    height: 3.5rem;
    line-height: 1;
    text-align: center;
    padding: 0; */
    left: .5rem;
    z-index: 10;
}
#audio_record_progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: -1rem;
    height: 8px;
    z-index: 10;
    display: none;
}
#audio_record_progress .progress-bar {
    background-color: var(--c-danger);
}
#btn_photo {
    left: 4.5rem;
    z-index: 10;
}
#btn_audio_record .bi-mic-fill {
    display: none;
}
#btn_audio_record.active .bi-mic-fill {
    display: inline-block;
}
#btn_audio_record.active .bi-mic {
    display: none;
}
#btn_audio_record {
    outline-style: solid;
    outline-width: 0px;
    outline-color: var(--c-danger);

    /* transition: outline 1s ease; */
    animation-name: none;
    animation-duration: 750ms;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-direction: alternate;
}
#btn_audio_record.active {
    background-color: var(--c-danger);
    /* border-color: var(--c-danger); */
    border-color: #fff;
    animation-name: btn_recording;    
}

@keyframes btn_recording {
    0% {
        /* outline-width: 0px; */
        border-width: 0px;
        /* border-radius: 50px !important; */
    }
    100% {
        /* outline-width: 10px; */
        border-width: 5px;
        /* border-radius: 50px !important; */
    }
}

.btn_delete_photo {
    position: absolute;
    top:0;
    right:0;
    z-index: 10;
    width: auto;
    padding: 1em;
    background: var(--c-danger) !important;
    color: #fff !important;
    width: 44px !important;
    min-width: 44px !important;
}

#input_photo {
	position: absolute;
    width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	z-index: -1;
}
#entry_photos {
    position: relative;
}
.entry_photo_file, .entry_photo_canvas {
    position: relative;
}
#entry_photos .img_canvas, #entry_photos .img_block {
    position: relative;
}
#entry_photos img, #entry_photos canvas {
    max-width: 100%;
}
.entry_photo_del {
    position: absolute;
    top: -.75rem;
    right: 0rem;
    background-color: var(--c-text);
    color: rgba(255,255,255,.75) !important;
    border-radius: 50%;
    line-height: 1;
    padding: .5rem;
    width: 2.5rem;
    height: 2.5rem;
}
.entry_photo_del:hover, .entry_photo_del:focus {
    background-color: var(--c-danger);
    color: #fff !important;
}

.btn-close {
    background: none;
    width: 1.5rem;
    height: 1.5rem;    
    opacity: 1;
}
.btn-close:hover, .btn-close:focus {
    transform: scale(1.25);
}
.btn-close svg {
    /* fill: var(--c-primary-light); */
}
.btn-close:hover svg, .btn-close:focus svg {
    /* fill: var(--c-primary); */
}
.btn-link {
    color: var(--c-text);
    margin: 0;
}
.btn-link:hover, .btn-link:focus {
    color: var(--c-primary);
    /* color: #fff; */
    /* opacity: 1; */
}
.btn-link.entry_del:hover, .btn-link.entry_del:focus, .btn-link.entry_audio_del:hover, .btn-link.entry_audio_del:focus, #btn_entry_delete:hover, #btn_entry_delete:focus {
    color: var(--c-danger);
}
.entry_audio_del {
    padding: .5rem .25rem;
    color: var(--c-primary-light);
}

#ref_menu {
    transition: transform .5s ease-in-out;
    border-right: 0;
    max-width: 100%;
}
#ref_menu_title {
    margin: 0;
}
.offcanvas-header {
    padding-bottom: 0;
}
.offcanvas-header .btn-close {
    margin-bottom: 0;
    color: var(--c-primary-light) !important;
}
.offcanvas-header .btn-close:hover, .offcanvas-header .btn-close:focus {
    color: var(--c-text);
}
.offcanvas-body {
    padding: 1rem 0;
}
#ref_list {
    background-color: var(--c-primary-lighter);
}
.ref_note {
    border-bottom: 1px solid var(--c-primary-lightest);
    display: flex;
    align-items: start;
    justify-content: space-between;    
}
.ref_note .handle {
    color: var(--c-primary-light);
    padding: .25rem .5rem;
    cursor: grab;
}
#ref_list .sortable-ghost {
    background-color: var(--c-entry-yellow);
    opacity: .5;
}
#ref_list .sortable-drag {
    background-color: #fff;
    opacity: 1;
}
.ref_note a:link, .ref_note a:visited {
    color: var(--c-text);
    text-decoration: none;
    padding: .25rem .5rem;
    display: block;
    flex-grow: 1;
}
.ref_note a:hover, .ref_note a:focus {
    color: var(--c-primary);
}
.ref_note .btn_ref_remove {
    color: var(--c-primary-light);
    padding: .25rem .5rem;
}
.ref_note .btn_ref_remove:hover, .ref_note .btn_ref_remove:focus {
    color: var(--c-danger);
}
#btn_collapse_ref_list_wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
}
#btn_collapse_ref_list_all {
    display: block;
    border: 1px solid var(--c-primary-light);
    font-size: 1rem;
}
#ref_list, #ref_list_all {
    padding-left: 0;
    border-top: 1px solid var(--c-primary-lighter);
}
.ref_list_item {
    border-bottom: 1px solid var(--c-primary-lighter);
}
.ref_list_item.hidden {
    display: none;
}
.ref_list_item::marker {
    color: var(--c-primary-light);
}
.ref_list_item a:link, .ref_list_item a:visited {
    color: var(--c-primary-light);
    text-decoration: none;
    padding: .25rem 1rem;
    display: block;
}
.ref_list_item a:hover, .ref_list_item a:focus {
    color: var(--c-primary);
}
#btn_ref_menu_count {
    font-size: 1rem;
}

.modal-content {
    border-radius: .75rem;
    overflow: hidden;
    border: 0;
}
.modal-backdrop {
    /* background-color: var(--c-primary); */
    background-color: var(--c-primary-light);
}
.offcanvas-backdrop {
    background-color: var(--c-primary-light);
}
.modal-header {
    border-bottom: 0;
    border-bottom: 1px solid var(--c-primary-lighter);
    padding: .75rem;
}
.modal-body {
    padding: .75rem;
}
.modal-footer {
    border-top: 0;
    /* border-top: 1px solid var(--c-primary-lighter); */
    padding: .25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-footer > * {
    margin: 0;
}
.modal-header h2, .modal-header h3 {
    margin-bottom: 0;
    color: var(--c-text);
}
.modal-header h2 {
    font-size: 1.5rem;
}
.modal-header h3 {
    font-size: 1.25rem;
    flex-grow: 2;
    color: var(--c-text);
}
.modal-header .modal_btns {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.modal-header .modal_btns .btn, .modal-header .modal_btns .btn-close {
    padding: .25rem .25rem;
    color: var(--c-primary-light);
}
.modal-body .modal_btns .btn, .modal-body .modal_btns .btn-close {
    padding: .25rem .25rem;
    color: var(--c-primary-light);
}
.modal-header .modal_btns .btn:hover, .modal-header .modal_btns .btn:focus,
.modal-header .modal_btns .btn-close:hover, .modal-header .modal_btns .btn-close:focus {
    /* color: var(--c-primary); */
    color: var(--c-text);
}
#modal_entry.is_color .modal-header .modal_btns .btn, #modal_entry.is_color .modal-header .modal_btns .btn-close {
    color: #fff !important;
    /* color: var(--c-text); */
    opacity: .75;
}
#modal_entry.is_color .modal-header .modal_btns .btn:hover, #modal_entry.is_color .modal-header .modal_btns .btn:focus,
#modal_entry.is_color .modal-header .modal_btns .btn-close:hover, #modal_entry.is_color .modal-header .modal_btns .btn-close:focus{
    color: #fff;
    /* color: var(--c-text); */
    opacity: 1;
}
#btn_entry_actions::after {
    margin-left: 0;
    vertical-align: 0.2em;
    content: "";
    border-top: 0.5em solid;
    border-right: 0.5em solid transparent;
    border-bottom: 0;
    border-left: 0.5em solid transparent;    
}
#dropdown_entry_actions {
    max-width: 56px;
    min-width: 56px;
}
#modal_entry #dropdown_entry_actions .btn-link.dropdown-item {
    color: var(--c-text) !important;
    text-align: center;
    padding: .5rem;
}

.modal-header .btn-close {
    padding: 0;
    margin: 0;
    width: 1.75rem;
    height: auto;
}
#modal_entry .dropdown-menu {
    z-index: 100000;
}
#modal_entry_title {
    font-family: 'PT Sans';
    font-style: normal;
    font-size: .85rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
#modal_entry_updated_at_msg {
    position: absolute;
    left: 4rem;
    right: 4rem;
    bottom: .75rem;
    font-size: .85rem;
    text-align: center;
    /* color: var(--c-primary-light); */
    display: none;
}
#modal_entry .modal-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#cnt_entry, #form_entry {
    flex-grow: 1;
}
#form_entry {

}
textarea.autoresize {
    resize: none;
}
#entry_answer_0 {
    font-family: 'PT Serif';
    font-style: italic;
}
.entry_answer {
    font-size: 1.15rem;
    padding: 0.5rem;    
    color: var(--c-text);
    /* margin-left: -.5rem;
    margin-right: -.5rem; */
    border: 0;
}
.entry_answer_alt, .entry_answer_alt:focus {
    /* color: var(--c-primary); */
    color: var(--c-text);
}
.entry_answer.form-control:focus {
    border-color: var(--c-primary);
    outline: 0;
    /* box-shadow: 0 0 0 0.25rem var(--c-primary-light);     */
    box-shadow: 0 0 7px 0 var(--c-primary);
    border-width: 0;
    background-color: var(--c-primary-lightest);
    background-color: transparent;
}
.entry_answer[data-num="2"].form-control:focus {
    background-color: var(--c-primary-lightest);
}
.entry_answer[data-num="2"] {
    color: var(--c-primary-dark);
    background-color: var(--c-primary-lightest);
    margin-top: 2rem;
}
#dropdown_tags {
    position: fixed;
    top: 80px;
    right: .5rem;
    z-index: 10;
}
.dropdown-menu {
    padding: 0;
}
.dropdown-item {
    color: var(--c-primary-light);
    padding: .25rem .75rem;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: var(--c-primary);
    background-color: var(--c-primary-lighter);
}
#btn_dropdown_tags {
    color: var(--c-primary-light);
}
#btn_dropdown_tags:hover, #btn_dropdown_tags:focus {
    color: var(--c-primary);
}
h3.entry_cnt {
    font-size: 1.25rem;
}
div.entry_cnt {
    font-size: 1.15rem;
}
.entry_cnt ul, .entry_cnt ol {
    padding-left: 1.5rem !important;
    /* padding-left: 100px; */
}
.entry_cnt ul li, .entry_cnt ol li {
    padding-left: .5em;
}
.entry_cnt ul li::marker, .entry_cnt ol li::marker {
    font-size: 1em;
    color: var(--c-primary-light);
    line-height: 1;
    font-weight: bold;
    /* font-family: Verdana; */
}
.entry_cnt del {
    color: var(--c-primary-light);
    font-style: italic;
}
#list_entries {
    position: relative;
    padding-bottom: 5rem;
    min-height: 75vh;
    /* background-color: var(--c-primary-light); */
}
#list_entries.is_pin .entry:not(.is_pin) {
    display: none;
}
#list_entries.is_warning .entry:not(.is_warning) {
    display: none;
}
#list_entries.is_date .entry:not(.is_date) {
    display: none;
}
#list_entries.is_star .entry:not(.is_star) {
    display: none;
}
#list_entries.is_power .entry:not(.is_power) {
    display: none;
}
#list_entries.is_lock .entry:not(.is_lock) {
    display: none;
}
#list_entries.is_heart .entry:not(.is_heart) {
    display: none;
}
#list_entries.is_color .entry:not(.is_color) {
    display: none;
}
#list_entries.is_color.entry_color_blue .entry:not(.is_color.entry_color_blue) {
    display: none;
}
#list_entries.is_color.entry_color_indigo .entry:not(.is_color.entry_color_indigo) {
    display: none;
}
#list_entries.is_color.entry_color_purple .entry:not(.is_color.entry_color_purple) {
    display: none;
}
#list_entries.is_color.entry_color_pink .entry:not(.is_color.entry_color_pink) {
    display: none;
}
#list_entries.is_color.entry_color_red .entry:not(.is_color.entry_color_red) {
    display: none;
}
#list_entries.is_color.entry_color_orange .entry:not(.is_color.entry_color_orange) {
    display: none;
}
#list_entries.is_color.entry_color_yellow .entry:not(.is_color.entry_color_yellow) {
    display: none;
}
#list_entries.is_color.entry_color_green .entry:not(.is_color.entry_color_green) {
    display: none;
}
#list_entries.is_color.entry_color_teal .entry:not(.is_color.entry_color_teal) {
    display: none;
}
#list_entries.is_color.entry_color_cyan .entry:not(.is_color.entry_color_cyan) {
    display: none;
}
#list_entries.is_search .entry:not(.is_search) {
    display: none;
}
#list_entries .entry .btns .btn-link {
    padding: .25rem;
}
.entry .btns .btn-link.entry_warning:hover, .entry .btns .btn-link.entry_warning:focus {
    color: var(--c-primary);
}
.entry .btns .btn-link.entry_star:hover, .entry .btns .btn-link.entry_star:focus {
    color: var(--c-primary);
}
.entry .btns .btn-link.entry_power:hover, .entry .btns .btn-link.entry_power:focus {
    color: var(--c-primary);
}
.entry .btns .btn-link.entry_lock:hover, .entry .btns .btn-link.entry_lock:focus {
    color: var(--c-primary);
}
.entry .btns .btn-link.entry_heart:hover, .entry .btns .btn-link.entry_heart:focus {
    color: var(--c-primary);
}
.entry .entry_num {
    position: absolute;
    top: .75rem;
    right: 1rem;
    color: var(--c-primary-light);
}
#list_entries.is_tag .entry:not(.is_tag) {
    display: none;
}
.modal.fadeUp {
    /* transition: all .25s ease-out; */
    transition: all .3s ease-out;
}
.modal.fadeUp:not(.show) {
    transform: translateY(100%);
    /* transform: translateX(-100%); */
    opacity: 0;
}
.modal.fadeUp.show {
    transform: translateY(0);
    /* transform: translateX(0); */
}
.modal-backdrop.show {
    /* opacity: .95; */
    opacity: .5;
}
.offcanvas-backdrop.show {
    /* opacity: .95; */
    opacity: .5;
}

.input-group-text {
    /* background-color: var(--c-primary-lighter); */
    background-color: #fff;
    color: var(--c-primary);
}
#imagebox {
    background-color: #000;
}
#imagebox .ib-content .ib-topbar .ib-buttons .ib-button {
    background-color: transparent;
}
#imagebox .ib-content .ib-topbar .ib-buttons .ib-button.ib-close {
    opacity: .5;
    padding: 1.5rem;
    transform: scale(1.1);
}
#imagebox .ib-content .ib-topbar .ib-buttons .ib-button.ib-close:hover {
    background-color: transparent;
    opacity: 1;
    transform: scale(1.25);
}
#imagebox .ib-content .ib-topbar .ib-indexes {
    opacity: .5;
    font-size: 1rem;
}
#imagebox .ib-content .ib-control div {
    bottom: 0;
    top: unset;
    background-color: transparent;
    transform: none;
    box-shadow: none !important;
}
#imagebox .ib-content .ib-control div[disabled] {
    background-color: transparent;
    opacity: .25;
}
#imagebox .ib-content .ib-image-wrapper img.ib-image {
    max-width: 90vw;
    max-height: 90vh;
}

.text-gradient {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    background-image: linear-gradient(39deg, rgba(127,89,179,1) 0%, rgba(139,92,246,1) 26%, rgba(59,130,246,1) 46%, rgba(36, 75, 206, 1) 63%, rgba(31,162,191,1) 81%, rgba(107,70,193,1) 100%);
    background-size: 250% 100%;
    animation: h-gradient-bg-pos 22s linear infinite;
    animation-fill-mode: both;
    animation-direction: alternate;
    background-repeat: no-repeat;
}
@keyframes h-gradient-bg-pos {
    0% {
        background-position: 0% 50%;
    }
    /* 50% {
        background-position: 100% 50%;
    } */
    100% {
        background-position: 100% 50%;
    }
}

#entries_header {
    /* background-image: linear-gradient(86deg, rgba(127,89,179,1) 0%, rgba(37,156,212,1) 20%, rgba(36, 75, 206, 1) 40%,rgba(127,89,179,1) 50%, rgba(59,130,246,1) 60%, rgba(139,92,246,1) 80%, rgba(107,70,193,1) 100%); */
    /* background-size: 250% 100%; */
    /* animation: h-gradient-bg-pos 33s linear infinite; */
    /* animation-fill-mode: both; */
    /* animation-direction: alternate; */
    /* background-repeat: no-repeat;     */
    background-color: var(--c-text);
}
#btn_new, #btn_entry_save {
    /* background-image: linear-gradient(222deg, rgba(127,89,179,1) 0%, rgba(37,156,212,1) 20%, rgba(36, 75, 206, 1) 40%,rgba(59,130,246,1) 60%, rgba(139,92,246,1) 80%, rgba(107,70,193,1) 100%);
    background-size: 250% 100%;
    animation: h-gradient-bg-pos 5s linear infinite;
    animation-fill-mode: both;
    animation-direction: alternate;
    background-repeat: no-repeat;    */
    background-color: var(--c-text); 
}
#btn_new:hover, #btn_new:focus {
    background-color: var(--c-primary);
}

#modal_alert_msg {
    font-size: 1.25rem;
}

.mark, mark {
    padding: 0;
    background-color: transparent;
}

#cnt_entry .red {
    color: var(--bs-red);
}
#cnt_entry .blue {
    color: var(--bs-blue);
}
#cnt_entry .indigo {
    color: var(--bs-indigo);
}
#cnt_entry .purple {
    color: var(--bs-purple);
}
#cnt_entry .pink {
    color: var(--bs-pink);
}
#cnt_entry .orange {
    color: var(--bs-orange);
}
#cnt_entry .green {
    color: var(--bs-green);
}
#cnt_entry .teal {
    color: var(--bs-teal);
}
#cnt_entry .cyan {
    color: var(--bs-cyan);
}
#cnt_entry .yellow {
    color: var(--bs-yellow);
}
#cnt_entry .gray, #cnt_entry .grey {
    /* color: var(--bs-gray); */
    color: var(--c-primary-light);
}
#cnt_entry .warning {
    color: var(--bs-warning);
}
#cnt_entry .danger {
    color: var(--bs-danger);
}
#cnt_entry .dark {
    color: var(--bs-dark);
}
#cnt_entry .gray-dark {
    color: var(--bs-gray-dark);
}

.entry_audio_created {
    font-size: .85rem;
    color: var(--c-primary-light);
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: var(--c-primary-light);
    font-style: italic;
}
::-moz-placeholder { /* Firefox 19+ */

    color: var(--c-primary-light);
    font-style: italic;
}
:-ms-input-placeholder { /* IE 10+ */
    color: var(--c-primary-light);
    font-style: italic;
}
:-moz-placeholder { /* Firefox 18- */
    color: var(--c-primary-light);
    font-style: italic;
}
::placeholder {
    color: var(--c-primary-light);
    font-style: italic;
}


#loader {
	position: fixed;
    display: block;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	opacity: 1;
	-webkit-animation: loading 1s infinite ease-in-out;
	animation: loading 1s infinite ease-in-out;
    animation-fill-mode: both;
    animation-direction: alternate;
    margin: 20px auto;
    z-index: 10000;
    /* color: var(--c-text); */
    color: var(--c-primary);
    width: 48px;
    height: 48px;
    background-color: transparent;
	transform-origin: left;    
}
#loader svg {
    display: block;

}
#app.loading ~ #loader {
    display: block;
}
@-webkit-keyframes loading {
	0% { 
        opacity: .5; 
        transform: scale(.75) translate(-50%, -50%);
    }
	/* 33% { 
        opacity: 0.25; 
        transform: scale(1) translate(-50%, -50%);
    }
	66% { 
        opacity: 0.75; 
        transform: scale(1.5) translate(-50%, -50%);
    } */
	50% { 
        opacity: 1; 
        transform: scale(1.3) translate(-50%, -50%);
    } 
	100% { 
        opacity: .75; 
        transform: scale(1) translate(-50%, -50%);
    }
}


@media (min-width: 576px) {
    h3.entry_cnt {
        font-size: 1.35rem;
    }
    .entry_answer_alt {
        font-size: 1.25rem;
    }    
    div.entry_cnt {
        font-size: 1.15rem;
    }    
    .modal-body {
        padding: .75rem 1rem;
    }
    .modal-footer {
        padding: .5rem;
    }
    .modal-sm {
        max-width: 480px;
    }    
    /* #btn_audio_record {
        left: .75rem;
    }
    #btn_photo {
        left: 5rem;
    }
    #btn_search {
        left: .75rem;
    }
    #btn_new {
        right: .75rem;
    } */

    #header .btns .btn {
        padding: .75rem 0.25rem;
    }
    #all_tags {
        margin-left: 0;
        margin-right: 0;
    }
    #entries_pin, #entries_warning, #entries_date, #entries_star, #entries_power, #entries_heart, #entries_color, #entries_tags, #entries_search { 
        margin-left: .25rem;
    }    
    .modal-header .modal_btns .btn, .modal-header .modal_btns .btn-close {
        padding: .25rem .5rem;
    }    
    .modal-body .modal_btns .btn, .modal-body .modal_btns .btn-close {
        padding: .25rem .5rem;
    }
}
@media (min-width: 720px) {
    body {
        font-size: 17px;
    }
    h1 {
        font-size: 2.5rem;
    }
    .modal-header {
        padding: .75rem;
    }
    .modal-body {
        padding: 1rem 1.5rem;
    }
    .modal-footer {
        padding: .5rem .75rem;
    }
    #btn_audio_record {
        left: 1rem;
    }
    #btn_photo {
        left: 5.25rem;
    }
    /* #btn_search {
        left: 1rem;
    }
    #btn_new {
        right: 1rem;
    } */
    /* #btn_entry_save, #btn_entry_edit, #btn_info_close, #btn_audio_record, #btn_photo, #btn_search, #btn_new {
        bottom: 1rem;
    }         */
    .entry {
        padding-left: 0;
        padding-right: .5rem;
    }
    h3.question {
        font-size: 1.5rem;
    }
    .entry_answer {
        font-size: 1.1rem;
    }
    h3.entry_cnt {
        font-size: 1.5rem;
    }
    .entry_answer_alt {
        font-size: 1.5rem;
    }    
    div.entry_cnt {
        font-size: 1.1rem;
    }    
    #entries_pin, #entries_warning, #entries_date, #entries_star, #entries_power, #entries_heart, #entries_color, #entries_tags, #entries_search { 
        margin-left: .5rem;
    }
    .modal-header .modal_btns .btn, .modal-header .modal_btns .btn-close {
        padding: .25rem .75rem;
    }
    .modal-body .modal_btns .btn, .modal-body .modal_btns .btn-close {
        padding: .25rem .75rem;
    }    
    #entry_date {
        max-width: 180px;
    }
}
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
    h3.entry_cnt {
        font-size: 1.5rem;
    }
    .entry_answer_alt {
        font-size: 1.5rem;
    }    
    div.entry_cnt {
        font-size: 1.15rem;
    }    
    #all_tags a {
        font-size: 1.25rem;
        padding: .5rem;
    }    
    /* .entry .btns {
        width: 76px;
    } */
    #entries_pin, #entries_date, #entries_date, #entries_star, #entries_power, #entries_heart, #entries_color, #entries_lock, #entries_tags, #entries_search { 
        margin-left: 1rem;
    }
    .entry_excerpt {
        font-size: 1.15rem;
    }
}
@media (min-width: 992px) {
    body {
        font-size: 20px;
    }
    h3.entry_cnt {
        font-size: 2rem;
    }
    div.entry_cnt, .entry_answer {
        font-size: 1.25rem;
    }    
    .entry_answer_alt {
        font-size: 2rem;
    }
    .modal-footer {
        padding: .75rem;
    }
    #all_tags a {
        font-size: 1.5rem;
        padding: .75rem;
    }
    .entry_excerpt {
        font-size: 1.25rem;
    }            
}
@media (max-width: 575px) {
    #entries_header, #entries_header .btn-link span {
        font-size: .7rem;
        margin-left: 0 !important;
        margin-top: 0.15rem;        
    }
    #entries_header .btn-link {
        flex-direction: column;
    }
    #btn_entry_close {
        display: inline-block;
    }
}
@media (max-width: 400px) {
    h1 {
        font-size: 2rem;
    }
    h3.entry_cnt {
        font-size: 1.25rem;
    }
    .entry_cnt h1 {
        font-size: 1.5rem;
    }
    .entry_cnt h2 {
        font-size: 1.25rem;
    }
    .entry_cnt h3 {
        font-size: 1.15rem;
    }    
    .entry_answer_alt {
        font-size: 1.25rem;
    }    
    .entry_answer {
        font-size: 1.1rem;
    }
    div.entry_cnt {
        font-size: 1.1rem;        
    }      
    #entries_pin, #entries_warning, #entries_date, #entries_star, #entries_power, #entries_heart, #entries_color, #entries_tags, #entries_search { 
        margin-left: .15rem;
    }
    .entries_other .btn-link {
        flex-direction: column;
    }
    .modal-header {
        padding: .5rem .25rem;
    }
    #btn_filter_all, #entries_search {
        display: flex;
        flex-direction: column;
    }
    #entries_search {
        display: none;
    }
    #total_entries {
        margin-left: 0 !important;
    }
    .modal-header .modal_btns .btn, .modal-header .modal_btns .btn-close {
        padding: .3rem;
    }
    .modal-body .modal_btns .btn, .modal-body .modal_btns .btn-close {
        padding: .3rem;
    }
}
@media (max-width: 374px) {
    
    /* #header {
        justify-content: center;
        flex-direction: column;
        flex-wrap: wrap;
        padding-bottom: 0 !important;
    } */
    #header .btns .btn {
        padding: .25rem;
    }
    #header .btns {
        transform-origin: center;
    }
    #header .btns {
        transform: scale(.85);
        transform-origin: right;
    }      
    /* #entries_header { */
        /* margin-top: 88px;
        margin-top: 50px; */
    /* } */

    h3.entry_cnt {
        font-size: 1.25rem;
    }
    .entry_answer_alt {
        font-size: 1rem;
    }    
    .entry_answer {
        font-size: 1rem;
    }    
}

@media (hover: hover) and (pointer: fine) {
    .entry:hover .btn_props {
        visibility: visible;
    }   
    .entry .btn_props:hover {
        color: var(--c-primary);
    }
    #cnt_entry .c_collapse:hover {
        border-color: var(--c-primary-light);
    }
    #cnt_entry .c_collapse .c_title:hover {
        color: var(--c-primary);
    }
    #cnt_entry .c_collapse .c_title:hover::after {
        color: var(--c-primary);
    }

}