html 
{
    /* prevent page content jumping when scrollbar appears */
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

div.postSignature,
div.getSignature,
div.deleteSignature,
div.putSignature
{
    --bs-alert-bg: var(--bs-success-bg-subtle);
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: var(--bs-success-text-emphasis);
    --bs-alert-border-color: var(--bs-success-border-subtle);
    --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
    --bs-alert-border-radius: var(--bs-border-radius);
    --bs-alert-link-color: var(--bs-success-text-emphasis);
    position: relative;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius);
    cursor: pointer;
    outline: 1px solid transparent;

    &:hover
    {
      outline-color: var(--bs-alert-border-color);
    }

    & > div 
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;

        & span 
        {
            flex-grow: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        & span:first-of-type 
        {
            width: 60px;
            min-width: 60px;
            flex-grow: 0;
            opacity: 0.5;
            user-select:none;
        }

        & span:last-of-type 
        {
            font-size: 0.8rem;
            flex-grow: 0;
            user-select:none;
        }
    }
}

div.getSignature 
{
    --bs-alert-color: var(--bs-primary-text-emphasis);
    --bs-alert-bg: var(--bs-primary-bg-subtle);
    --bs-alert-border-color: var(--bs-primary-border-subtle);
    --bs-alert-link-color: var(--bs-primary-text-emphasis);
}

div.putSignature
{
    --bs-alert-color: var(--bs-info-text-emphasis);
    --bs-alert-bg: var(--bs-info-bg-subtle);
    --bs-alert-border-color: var(--bs-info-border-subtle);
    --bs-alert-link-color: var(--bs-info-text-emphasis);
}

div.deleteSignature
{
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
    --bs-alert-link-color: var(--bs-danger-text-emphasis);
}

pre 
{
    background: var(--bs-secondary-bg-subtle);
    border: solid 1px var(--bs-secondary-bg-subtle);
    border-radius: var(--bs-border-radius);
    padding: 1rem;
    margin-top: 1rem;
}

/* basic typography */
#mainContent    { margin-top: 2rem; }
.body-content   { margin-top: 1rem; }
h2, .row>h2     { margin-top: 2rem; }
h3              { color: var(--bs-secondary) }
.collapse       { margin-bottom: 2rem; }
.table          { margin-bottom: 2rem; }