:root {
    --c-text: #333;
    --c-primary: #15b3b3;
    /* --c-primary-light: rgba(21,179,179,0.1); */
    --c-primary-light: #eaf7f7;
    --c-danger: indianred;
}
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: 'Ubuntu';
    font-style: normal;
    font-size: 17px;
    line-height: 1.5;
}
h1, h2, h3 {
    color: var(--c-primary);
}
h1 {
    font-size: 2.75rem;
}
h3.question {
    font-style: italic;
    font-size: 1.15rem;
}
#app {
    position: relative;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;    
}
#header {
    position: fixed;
    display: block;
    background-color: #fff;
    z-index: 10;
    width: 100%;
    top: 0;
    left: 0;
    box-shadow: 0 7px 10px var(--c-primary-light);
}
#entries_header {
    position: relative;
    margin-top: 4rem;
    background-color: var(--c-primary-light);
    color: var(--c-primary);
}
#list_entries {
    position: relative;    
}
#msg_no_entries {
    margin: 2rem;
    font-style: italic;
    color: var(--c-primary);
    display: none;
}
.entry {
    position: relative;    
    /* border-top: 1px solid #efefef; */
    border-top: 1px solid var(--c-primary-light);
}
.entry:last-child {
    /* border-bottom: 1px solid #efefef; */
    border-bottom: 1px solid var(--c-primary-light);
}
.entry .bi-star-fill {
    display: none;
}
.entry .bi-star {
    display: block;
}
.entry.is_star .bi-star {
    display: none;
}
.entry.is_star .bi-star-fill {
    display: block;
    color: var(--c-primary);
}

.entry_link {
    display: block;
    /* color: var(--c-primary); */
    color: var(--c-text);
    text-decoration: none;
    padding: .5rem;
}
.entry_link:hover, .entry_link:focus {
    color: var(--c-primary);
}
.entry_title {
    font-size: 1.15rem;
    font-size: .85rem;
    margin-bottom: 0;
}
.entry_excerpt {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 0.5rem;
}
.flex-grow-10 {
    flex-grow: 10;
}
.text-overflow-ellipsis-hack {
    min-width: 0;
}
.btn-primary {
    background-color: var(--c-primary-light);
    border-color: var(--c-primary);
    color: var(--c-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff
}
#btn_new {
    position: fixed;
    z-index: 100;
    right: 1rem;
    bottom: 1rem;
    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%);
    padding: 0;
}
#btn_entry_save, #btn_info_close {
    border-radius: 50%;
    border-width: 3px;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
}
#btn_info {
    padding: 0;
}
#btn_entry_star {
    padding: 0;
    color: var(--c-primary) !important;
}
#btn_entry_star .bi-star-fill {
    display: none;
}
#btn_entry_star .bi-star {
    display: block;
}
#btn_entry_star.is_star .bi-star-fill {
    display: block;
}
#btn_entry_star.is_star .bi-star {
    display: none;
}

#btn_filter_star {
    padding: 0;
    display: none;
}
#btn_filter_star.is_star {
    color: var(--c-primary);
}
#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-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);
}
.btn-link {
    color: var(--c-text);
}
.btn-link:hover, .btn-link:focus {
    color: var(--c-primary);
}
.btn-link.entry_del:hover, .btn-link.entry_del:focus {
    color: var(--c-danger);
}
.modal-backdrop {
    background-color: var(--c-primary);
}
.modal-header {
    border-bottom: 0;
    padding: .75rem;
}
.modal-body {
    padding: .75rem;
}
.modal-footer {
    border-top: 0;
    padding: .75rem;
}
.modal-header h2, .modal-header h3 {
    margin-bottom: 0;
}
.modal-header h2 {
    font-size: 1.5rem;
}
.modal-header h3 {
    font-size: 1.25rem;
}
textarea.autoresize {
    resize: none;
}
.entry_answer {
    font-size: 1.15rem;
    padding: 0.5rem;    
    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);    
}

#list_entries {
    position: relative;
}
#list_entries.is_star .entry:not(.is_star) {
    display: none;
}
.modal.fadeUp {
    transition: all .25s ease-out;
}
.modal.fadeUp:not(.show) {
    transform: translateY(100%);
    /* transform: translateX(-100%); */
    opacity: 0;
}
.modal.fadeUp.show {
    transform: translateY(0);
    /* transform: translateX(0); */
}

@media (min-width: 720px) {
    .modal-header {
        padding: 1rem;
    }
    .modal-body {
        padding: 1rem;
    }
    .modal-footer {
        padding: 1rem;
    }
    h3.question {
        font-size: 1.5rem;
    }
    .entry_answer {
        font-size: 1.25rem;
    }
}