/* Global font-size */
:root {
    --font-size-base: .875rem;
}

body {
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size-base);
    letter-spacing: .2px;
    color: var(--body-color);
}

input, textarea, .form-control, .input-group-text {
    font-size: var(--font-size-base) !important;
}

.btn {
    font-size: var(--font-size-base) !important;
}

h1 {
    font-size: calc(var(--font-size-base) * 2.0) !important;
    font-weight: 300;
}

h2 {
    font-size: calc(var(--font-size-base) * 1.8) !important;
    font-weight: 300;
}

h3 {
    font-size: calc(var(--font-size-base) * 1.6) !important;
    font-weight: 300;
}

h4 {
    font-size: calc(var(--font-size-base) * 1.4) !important;
    font-weight: 400;
}

h5 {
    font-size: calc(var(--font-size-base) * 1.2) !important;
    font-weight: 400;
}

h6 {
    font-size: calc(var(--font-size-base) * 1.1) !important;
    font-weight: 500;
}

.nav-link {
    font-size: calc(var(--font-size-base) * 1.0) !important;
}

nav .nav-link {
    font-size: calc(var(--font-size-base) * 1.125) !important;
}

.dropdown-item {
    font-size: calc(var(--font-size-base) * 1.0) !important;
}

.dropdown-header {
    font-size: calc(var(--font-size-base) * 1.0) !important;
}

.media {
    font-size: calc(var(--font-size-base) * 1.0) !important;
}

    .media .text-white.mr-2 {
        margin-left: 1rem;
        margin-top: calc(var(--font-size-base) * 0.25);
    }

    .media .media-body {
        font-size: calc(var(--font-size-base) * 0.95) !important;
        font-weight: 400;
        color: var(--media-bg);
    }

        .media .media-body strong {
            font-size: calc(var(--font-size-base) * 0.95) !important;
            font-weight: 700;
            color: var(--media-bg-strong);
        }

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--border-bottom-color);
}

/* Diffs (textual diffs generated server-side into the history) */
code-diff {
    font-family: var(--font-family-monospace);
    font-size: 87.5%;
    word-break: break-word;
    white-space: normal;
}

ins {
    background-color: var(--diff-ins);
    text-decoration: none;
}

del {
    color: var(--diff-del);
    background-color: var(--diff-del-bg);
}

/* Abbrevations on mobile */
abbr[title] {
    text-decoration: none;
}

/*@media screen and (max-width: 991px) {
    abbr[title]:after {
        color: dimgray;
        content: " (" attr(title) ")";
    }
}*/

/* Disabled links (don't do it, but needed to disable bootstrap-generated links) */
a.disabled {
    color: var(--link-disabled);
    text-decoration: none;
    cursor: default;
    pointer-events: none;
}

    a.disabled:hover,
    a.disabled:focus {
        color: var(--link-disabled);
    }

@media (min-width: 992px) {
    main.has-page .navigation-menu {
    }

        main.has-page .navigation-menu .menu-item {
            display: inline-block;
            min-width: 250px;
            max-width: 250px;
        }
}

/* Tooltips */
label[data-toggle="tooltip"] {
    text-decoration: underline dotted;
    cursor: help;
}

/* Dropdowns for page-titles */
h4.dropdown-toggle {
    display: inline-block;
}

    h4.dropdown-toggle:hover,
    h4.dropdown-toggle:focus {
        cursor: pointer;
        color: var(--primary);
    }

/* Text colors */
.text-secondary {
    color: var(--secondary) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-black-50 {
    color: var(--gray) !important;
}

.text-bold {
    font-weight: bold;
}

/* Inbox */
tr.text-bold .message .message-title {
    font-size: 105%;
}

tr .message .message-content {
    font-weight: normal;
    color: var(--grid-content-selector-hover);
    white-space: normal;
    text-wrap: normal;
    overflow-wrap: break-word;
    max-width: 50vw;
}

    tr .message .message-content div,
    tr .message .message-content p {
        display: inline;
    }

    tr .message .message-content b,
    tr .message .message-content strong {
        font-weight: normal;
    }