:root {
    --color-text: #212121;
    --color-link: #5e81ac;
    --color-link-hover: #49688e;
    --color-link-active: #49688e;
    --color-heading: #212121;
    --color-soft: #757575;
    --color-danger: var(--danger);
    --color-success: var(--success);
    --color-muted: rgba(0, 0, 0, .4);
    --color-light: #eeeeee;
    --font-size: 0.9rem;
    --space-between: 1rem;
    --space-between-s: .5rem;
    --space-between-l: 1.5rem;
    --space-between-xl: 2rem;
    --border-color: #eeeeee;
    --border-color-between: rgba(0, 0, 0, .03);
    --border-color-hover: rgba(0, 0, 0, .2);
    --border-color-active: #81a1c1;
    --border-width: 1px;
    --border-radius: 2px;
    --background-color: #ffffff;
    --background-color-odd: #fafafa;
    --background-color-behind: #eeeeee;
    --font-awesome: "Font Awesome 6 Pro", "Font Awesome 6 Duotone", "Font Awesome 6 Brands", "Font Awesome 6 Sharp";
    --emoji-font-families: "apple color emoji", "segoe ui emoji", "android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla", "segoe ui symbol", "noto color emoji";
}

body {
    font-size: var(--font-size);
    color: var(--color-text);
    font-family: "Open Sans", sans-serif, var(--emoji-font-families), var(--font-awesome);
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

a {
    color: var(--color-link);
}
a:hover {
    color: var(--color-link-hover);
    text-decoration: none;
}
a[href*="//"]:not(.nav-link):after {
    font-family: var(--font-awesome);
    font-size: 75%;
    content: "\f08e";
    margin-left: 6px;
    vertical-align: top;
    display: inline-block;
    padding-top: 4px;
}

address {
    margin-bottom: 0;
}

.unstyled {
    height: auto;
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    font-size: inherit;
    background-color: transparent;
    font: inherit;
    color: inherit;
}
button.unstyled {
    cursor: pointer;
}

.no-wrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.container-fluid {
    padding-left: var(--space-between-l);
    padding-right: var(--space-between-l);
}

.text-pre-wrap {
    white-space: pre-wrap;
}
.text-comment {
    color: var(--color-muted);
    display: block;
    margin-top: 4px;
    font-size: 90%;
}

.badge-soft {
    background-color: var(--background-color-behind);
    color: var(--color-soft);
    font-weight: 300;
}

.split {
    display: flex;
    position: relative;
}
.split > * {
    flex: 1;
}

.btn-link {
    color: var(--color-link);
}
.btn-link:hover {
    color: var(--color-link-hover);
    text-decoration: none;
}

.link-icon.link-icon-right,
.btn-icon.btn-icon-right {
    margin-left: 4px;
}
.btn-icon.btn-icon-left,
.link-icon.link-icon-left {
    margin-right: 4px;
}

.hidden {
    display: none;
}

.drag-over {
    position: relative;
}
.drag-over::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: #000000;
    opacity: 0.5;
}