html, body {
    /* prevent horizontal scroll bar */
    max-width: 100%;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex; 
    flex-direction: column;
}

a, a:visited, a:hover, a:active {
    text-decoration: none;
}

a:not(.btn):not(nav a):not(footer a),
a:not(.btn):not(nav a):not(footer a):visited,
a:not(.btn):not(nav a):not(footer a):active {
    color: #713985;
}

a:hover {
    border-color: #0a57cabe;
}

nav.navbar a.navbar-brand {
    color: #ffffff;
    font-weight: 600;
}

.articlebox:hover {
    border-color: #0a57cabe; /*var(--bs-link-hover-color-rgb)*/
    background-color: #0a57ca07;
}


.row-full {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    margin-bottom: 16px;
    left: 50%;
}

@media (min-width: 569px) {
    .a5 {
        width: 570px; /*like long side of A5 paper*/
    }
}

@media (min-width: 779px) {
    .a4 {
        width: 780px; /*like long side of A5 paper*/
    }
}

@media (min-width: 1079px) {
    .a3 {
        width: 1080px; /*like long side of A4 paper*/
    }
}

.htmleditor{
    white-space: pre;
    overflow: auto;
    margin-top: 0;
    margin-bottom: 1rem;
    unicode-bidi: isolate;
}

.markdownrenderpreview {
    background-color: rgba(0, 0, 0, 0.050);
}
  
.markdownrender p {
    white-space:pre-wrap;
}

.markdownrender img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.markdownrender a {
    font-weight: bold;
}

.markdownrender blockquote {
    border-left: 3px solid black;
    padding-left: 14px;
}

.recordlist {
    max-height: 100vh;
    min-width: min-content;
    padding-right: 0.5rem;
    margin-right: 0.5rem;
    overflow: scroll;
    overflow-x: hidden;
}

.recordbox {
    min-width: min-content;
}

.recordbox-selected {
    background-color: #edeef0;
    color: #713985;
}

.recordbox .card-link {
    text-wrap: nowrap;
}

.recordpreviewbox {
    overflow-x: auto;
}

.recordpreview {
    max-height: calc(100vh - 2rem);
    overflow-y: scroll;
}

.recorddetails {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 0.5rem;
}