org.scss

/*
    useful mixins
*/

// sass-lint:disable-all
@mixin grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
            filter: grayscale(100%);
       -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
            filter: gray;
    -webkit-filter: grayscale(100%);
}

@mixin reset-filter {
       -moz-filter: none;
        -ms-filter: none;
         -o-filter: none;
            filter: none;
    -webkit-filter: none;
}
// sass-lint:enable-all

@mixin hairline {
    border: 0;
    border-bottom: 1px solid $gray;
}

@mixin smooth-edges {
    border-radius: 2px;
}

@mixin circle {
    border-radius: 1000px;
}

@mixin icon($icon) {
    content: $icon;
    display: inline-block;
    font-family: 'FontAwesome';
    font-weight: normal;
    width: 1.5ex;
}

@mixin prefix ($prop, $val) {
    // sass-lint:disable-block property-sort-order
    -webkit-#{$prop}: #{$val};
    -moz-#{$prop}: #{$val};
    -ms-#{$prop}: #{$val};
    #{$prop}: #{$val};
}

@mixin primary-color-background {
    background-color: $primary-color;
    color: $primary-fg-color;
}

/*
    Fixes a foundation js error
*/
.foundation-data-attribute-namespace {
    font-family: false;
}

/*
    The maximum width of a line relative to the font. This limits textblocks
    to a readable length.
*/
$max-line-width: 67ex;

.limit-line-width {
    max-width: $max-line-width;
}

/*
    The height of full-width banners
*/
$full-width-banner-height: 333px;

/*
    Zurb foundation uses this without !import, which causes IE11 to not
    apply the placeholder color.
*/
:-ms-input-placeholder {
    color: $input-placeholder-font-color !important;
}

/*
    Links without href and no role should not show the cursor
*/
a:not([href]):not([role]) {
    cursor: default;
}

.button,
.confirm,
.fc-event,
a[ic-verb],
a[onclick],
.partition-occupied {
    cursor: pointer !important;
}

/*
    Hyphenation for browsers which support it.
*/
p,
h1,
h2,
h3,
h4,
h5,
h6,
.page-text,
.page-lead,
.news-lead,
.newsletter-lead {
    @include prefix(hyphens, auto);
}

/*
    Disable hyphenation in e-mail links and make them breakable
*/
a[href^="mailto:"] {
    @include prefix(hyphens, none);
    @include prefix(word-break, break-all);

    // Non standard for WebKit
    word-break: break-word;
}

/*
    Get rid of the jump that is introduced when switching from a site with
    scrollbar to a site without (or vice versa)

    As a side-effect, this disables horizontal scrolling, but we don't have
    that anyway because of our mobile-first design.
*/
html {
    @media #{$medium-up} {
        overflow-x: hidden;
        width: 100vw;
    }
}

/*
    Our footer is kept at the bottom without being "sticky", thanks to this
    approach: https://dev.to/domysee/keeping-the-footer-at-the-bottom-with-css-flexbox-5h5f
*/
html,
body {
    height: 100%;
    width: 100%;
}

footer {
    margin-top: .5rem;
}

.ie-11-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
}

main {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

article {
    background: $white;
    flex-grow: 1;
}

header,
article,
footer {
    flex-shrink: 0;
}

/*
    Normalized body text
*/
.common-text {
    color: $body-font-color;
    font-size: 1rem;
    line-height: auto;
}

/*
    Small text
*/
.small-text {
    font-size: .875rem;
}

.tiny-text {
    font-size: .8rem;
}

/*
    Small atomic text particles whose white-space should not be wrapped
*/
.nowrap {
    white-space: nowrap;
}

/*
    Chrome shows a little up/down arrow on date fields which takes quite
    a bit of space, without being useful
*/
input[type="date"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

/*
    Apply on a row to flip the order of columns on mobile
*/
@media #{$small-only} {
    .reverse-on-mobile {
        display: flex;
        flex-direction: column-reverse;
    }
}

/*
    Heading sizes
*/
.h1-size { font-size: $h1-font-size - $h1-font-reduction; }

.h2-size { font-size: $h2-font-size - $h2-font-reduction; }

.h3-size { font-size: $h3-font-size - $h3-font-reduction; }

.h4-size { font-size: $h4-font-size - $h4-font-reduction; }

.h5-size { font-size: $h5-font-size - $h5-font-reduction; }

.h6-size { font-size: $h6-font-size - $h6-font-reduction; }

@media #{$medium-up} {
    .h1-size,
    .h2-size,
    .h3-size,
    .h4-size,
    .h5-size,
    .h6-size {
        line-height: $header-line-height;
    }

    .h1-size { font-size: $h1-font-size; }

    .h2-size { font-size: $h2-font-size; }

    .h3-size { font-size: $h3-font-size; }

    .h4-size { font-size: $h4-font-size; }

    .h5-size { font-size: $h5-font-size; }

    .h6-size { font-size: $h6-font-size; }
}

/*
    The global tools header
*/
$globals-margin: .75rem;
$globals-height: 2.5rem;

.globals {
    @include primary-color-background;
    margin-bottom: $globals-margin;
    min-height: $globals-height;
    width: 100%;

    .row > .columns {
        align-items: center;
        display: flex;
        justify-content: space-between;
    }

    .row > .columns > ul {
        list-style: none;
        margin: 0;

        > li {
            display: inline-block;
            float: right;

            &:hover {
                @include primary-color-background;
            }

            + li::after {
                color: $primary-fg-color;
                content: '|';
                display: inline-block;
                margin-right: 5px;
            }

            > a {
                color: $primary-fg-color;
                display: inline-block;
                font-size: .875rem;
                height: $globals-height;
                line-height: $globals-height;
                padding: 0 .5rem;

                &:hover {
                    @include primary-color-background;
                }
            }
        }
    }

    .f-dropdown a:hover {
        @include primary-color-background;
    }

    a::before {
        margin-right: 1ex;
        text-align: center;
    }

    .dashboard::before { @include icon('\f0e4'); }
    .login::before { @include icon('\f090'); }
    .logout::before { @include icon('\f08b'); }
    .register::before { @include icon('\f234'); }
    .user::before { @include icon('\f007'); }
    .users::before { @include icon('\f0c0'); }
    .payment::before { @include icon('\f09d'); }
    .payment-provider::before { @include icon('\f283'); }
    .profile::before { @include icon('\f2c3'); }
    .management::before { @include icon('\f013'); }
    .images::before { @include icon('\f03e'); }
    .files::before { @include icon('\f016'); }
    .text-modules::before { @include icon('\f249'); }
    .settings::before { @include icon('\f1de'); }
    .timeline::before { @include icon('\f017'); }
    .no-tickets::before { @include icon('\f145'); }
    .link-check::before { @include icon('\f0fa'); }
    .ticket-archive::before { @include icon('\f1c6'); }
    .forms::before { @include icon('\f15c'); }
    .surveys::before { @include icon('\f080'); }

    .with-count::before {
        border: 1px solid $primary-fg-color;
        border-radius: 1000px;
        box-shadow: 0 0 2px $primary-fg-color;
        box-sizing: content-box;
        content: attr(data-count);
        display: inline-block;
        font-size: .75rem;
        height: 22px;
        line-height: 22px;
        margin-right: 1ex;
        min-width: 15px;
        padding: 0 .25rem;
        position: relative;
        text-align: center;
        top: -1px;
    }

    .alert.with-count::before {
        background-color: $alert-color;
        color: $white;
    }

    .success.with-count::before {
        background-color: $success-color;
        color: $white;
    }

    .info.with-count::before {
        background-color: $info-color;
        color: $white;
    }

    .secondary.with-count::before {
        background-color: $secondary-color;
        color: $body-font-color;
    }
}

.header {
    // the header is fixed and the logo in it tries to fill it out
    // therefore an svg logo should be used!
    align-items: center;
    display: flex;
    height: 7em;
    justify-content: center;
    margin-bottom: $globals-margin;

    @media #{$small-only} {
        display: block;

        .logo {
            display: flex;
            justify-content: center;
            margin-bottom: $globals-margin;
        }

        .searchbox {
            margin-bottom: $globals-margin;
        }
    }

    img {
        height: 7em;
        object-fit: contain;
    }
}

#header_announcement {
    padding: 1rem;
    text-align: center;

    p {
        margin-bottom: 0;
    }
}

#redactor-modal-box footer {
    // the redactor also contains a footer which doesn't need a specific height
    height: auto;
}

/*
    Diffs
*/
ins {
    background: $green-pastel;
    text-decoration: none;
}

del {
    background: $red-pastel;
}

/*
    Login page
*/
#page-auth-login #content {

    $first-color: #ffc56c;
    $first-hover: darken($first-color, 10%);

    .alternatives {
        margin-top: 1.5rem;

        input[type="submit"].button {
            background: $first-color;
            color: $body-font-color;

            &:hover {
                background: $first-hover;
            }
        }
    }

    h2 {
        font-size: $h3-font-size;
    }

    input[type="submit"] {
        width: 100%;
    }

    a.button {
        display: block;
        width: 100%;

        p {
            margin: 0;
            padding: 0;
        }
    }

    .provider-login {
        @for $i from 1 through 4 {
            a:nth-child(#{$i}) {
                background: lighten($first-color, ($i - 1) * 5%);
                color: $body-font-color;

                &:hover {
                    background: lighten($first-hover, ($i - 1) * 5%);
                }
            }
        }
    }
}

/*
    blank (uncolored) labels
*/
.blank-label {
    @include label($bg: $white);
    border: 1px solid #cbcccc;
    font-size: .8rem;
    margin: 0 4px 7px 0;

    &.active {
        @include primary-color-background;
        border: 1px solid $primary-color;
    }

    a {
        color: inherit;
    }
}

/*
    Description for a blank (uncolored) label
*/
.blank-label-description {
    font-size: 1.0rem;
    display: block;
}

/*
    Click through
*/
.click-through {
    cursor: pointer;
}

// we need to use exact pixel measurements for the footer or we end up with
// incosistent results across browsers, which might mean the difference between
// showing a scrollbar and not showing one
$footer-header-color: $charcoal;
$footer-text-color: $steel;
$footer-font-size: 13px;
$footer-border-width: 0;

.footer-content {
    background-color: $topbar-bg-color;

    // accomplish the border with a box-shadow, as the border messes with
    // our fixed footer script height calculation
    box-shadow: 0 -2px 0 $primary-color;
    max-width: 100% !important;

    // please do not add a margin here, it will mess up the sticky footer!
    // instead add a margin-bottom to whatever is rendered before the footer.
    padding: 0;

    > .columns > .row {
        margin: 0 auto;
        max-width: $row-width;
    }

    * {
        background-color: $topbar-bg-color;
        color: $footer-text-color;
        font-size: $footer-font-size;
        line-height: 25px;
    }

    h2 {
        color: $footer-header-color;
        font-weight: 500;
        letter-spacing: 1px;
        margin-bottom: 13px;
        text-transform: uppercase;
    }

    h2.custom-links {
        text-transform: none;
    }

    .footer-columns {
        padding-bottom: .5rem;
        padding-top: 1.25rem;

        p {
            line-height: 1.5rem;
            margin-bottom: .5rem;
        }
    }

    .footer-links {
        padding: .5rem 0;
        position: relative;
        text-align: center;

        .columns {
            span + span::before {
                content: '•';
            }
        }
    }
}

@media #{$small-only} {
    .footer-columns > div {
        margin-bottom: 1rem;
    }
}

/*
    social media links in the footer
*/

@media #{$medium-up} {
    // ligns the footer values up with sidebar on the right (index)
    .footer-columns > div:last-child {
        padding-left: 1.3rem;
    }
}

.social-media-links {
    font-size: 1em;
    line-height: 1.5rem;
    list-style-type: none;
    margin: 0 0 1rem;
}

/*
    Links in simple text style (side by side)
*/
.text-links a:first-child::before {
    display: none;
}

.text-links a::before {
    color: $body-font-color;
    content: ' | ';
}

/*
    Dense lists
*/
.dense {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
    No margin bottom
*/
.no-margin-bottom {
    margin-bottom: 0;
}

/*
    Default Coat of Arms
*/
#coat-of-arms-left {
    fill: lighten($primary-color, 20%);
}

#coat-of-arms-right {
    fill: $primary-color;
}

/*
    Rounded corners for panels.
*/
.panel {
    @include smooth-edges;

    // Zurb lacks a separate color for callout panels.
    &.callout {
        border-color: $callout-panel-border-color;
    }
}

/*
    top navigation
*/

.main-navigation {
    background-color: $topbar-bg-color;
    margin-bottom: .1rem;
}

// breadcrumbs without top bar
.main-navigation.empty + nav ul {
    background: $topbar-bg-color;
    border-bottom: 0;
}

.top-bar {
    &.expanded {
        box-shadow: none;
    }

    ul li {
        a {
            color: $body-font-color;
            font-size: .8rem;
            font-weight: normal;
            text-transform: uppercase;

            @media #{$medium-up} {
                padding: .1rem 1.2rem !important;

                &:hover {
                    @include primary-color-background;
                }
            }
        }
    }
}

/*
    alert boxes
*/
$alert-icon: '\f06a';
$info-icon: '\f05a';
$success-icon: '\f058';
$warning-icon: '\f071';

.homepage-warning {
    background-color: $warning-color;
    display: flex;
    flex-direction: row;
    font-size: inherit;

    .icon {
        margin-right: .5rem;

        &::before {
            @include icon($info-icon);
        }
    }
}

.alert-box {
    border: 0;
    padding: .75rem 2rem .75rem .875rem;
    vertical-align: middle;

    .close {
        color: $white;
        opacity: 1;
        right: .5rem;
    }

    &::before {
        font-size: 1.3rem;
        line-height: .8;
        margin-right: .5rem;
        padding-right: .5rem;
        position: relative;
        top: -1px;
        vertical-align: middle;
    }

    &.alert::before { @include icon($alert-icon); }
    &.info::before { @include icon($info-icon); }
    &.success::before { @include icon($success-icon); }
    &.warning::before { @include icon($warning-icon); }
}

/*
    horizontal rules
*/
hr.hairline {
    @include hairline;
}

/*
    tables
*/
table {
    border-collapse: separate;

    td,
    th {
        border-bottom: 1px solid $table-border-color;
    }
}


/*
    form style customizations
*/
form {
    label {
        min-width: 75%;
    }

    label > ul,
    .upload-widget > ul,
    .group-label > ul {
        list-style: none;

        margin: 0;
        margin-bottom: .75rem;

        li input[type="checkbox"],
        li input[type="radio"] {
            margin: 0;
        }
    }

    .duration-widget label {
        display: inline-block;
        white-space: nowrap;
        margin-right: .5rem;

        input {
            display: inline-block;
            width: auto;
            margin-right: .25rem;
        }
    }

    .group-label > ul li {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;

        label {
            margin-top: .2rem;
        }

        input {
            flex-shrink: 0;
        }
    }

    .label-text,
    label > ul label {
        max-width: 90%;
    }

    .field-help {
        color: $steel;
        font-size: .8rem;
        margin-left: 1.25rem;
    }

    .long-field-help {
        p,
        li {
            color: $steel;
            font-size: .8rem;
        }

        p {
            margin: .25rem 0 .5rem;
        }
    }

    .group-label {
        color: $form-label-font-color;
        font-size: $form-label-font-size;
    }

    input[type="checkbox"],
    input[type="radio"] {
        display: inline-block;
        float: left;
        margin: .4rem .5rem 0 0 !important;

        + .label-text,
        + label {
            display: inline-block;
            margin-left: 0;
            vertical-align: text-top;
        }
    }

    input[type="radio"] {
        margin: .29rem .4rem 0 0 !important;
    }

    input.invalid,
    input.invalid:focus {
        border-color: $alert-color;
    }

    .redactor-editor {
        @include form-element;
        cursor: text;
        height: 100%;
        min-height: 250px;
    }

    .redactor-box {
        margin-bottom: .75rem;
    }

    // fixes redactor not working right in dependant field configurations
    label[style*="display: block;"] .redactor-editor:not([style]) + textarea[data-depends-on],
    label[style*="display: block;"] .redactor-editor[style*="block"] + textarea[data-depends-on] {
        display: none !important;
    }

    .formcode-select {
        @include form-element;
        height: 100%;
        min-height: 2.3125rem;

        input[type="checkbox"] {
            margin-top: .25rem !important;
        }
    }

    small.error {
        padding: .5rem;
        padding-left: .5rem;
    }

    .label-required {
        color: $primary-color;
        font-weight: bold;
    }

    .placeholder {
        color: $monsoon;
        font-size: .8rem;
        margin-bottom: .4rem;
    }

    .map-wrapper {
        margin-bottom: 1rem;
    }

    fieldset {
        border: 0;
        border-top: 1px solid $table-border-color;
        margin-bottom: 1rem;
        padding: 0;

        legend {
            color: $input-font-color;
            font-size: $input-font-size;
            margin-bottom: .75rem;
            padding: 0 .75rem;
            text-align: center;
        }

        &:focus-within {
            border-color: $body-font-color;
        }
    }

    .upload-widget.without-data {
        margin-bottom: .5rem;
    }

    .upload-widget {
        p {
            color: $success-color;
            font-size: $form-label-font-size;
            margin-bottom: 0;
        }

        .uploaded-image {
            background-image:
            linear-gradient(45deg, $gray 25%, transparent 25%),
            linear-gradient(135deg, $gray 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, $gray 75%),
            linear-gradient(135deg, transparent 75%, $gray 75%);

            // half of one side of the square
            background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0 12.5px;

            // must be a square
            background-size: 25px 25px;

            border-radius: 2px;
            margin: .75rem 0 .75rem 1.25rem;
            padding: 1.25rem ;
            text-align: center;
        }

    }

    .upload-widget.with-data input[type='file'] {
        margin-left: 2em;
    }

    /*
        One line checkboxes
    */
    .oneline-checkboxes {
        li {
            display: inline-block;
        }

        label {
            margin-left: 0;
            margin-right: .8rem;
        }
    }

    /*
        Some fields need extra margins
    */
    .cancel-button {
        margin-right: 1rem;
    }

    .field-type-booleanfield + .clearfix,
    .field-type-booleanfield:last-of-type > div {
        margin-bottom: .75rem;
    }

    .field-type-booleanfield + [class*="field-type"] {
        margin-top: .5rem;
    }

    .field-type-booleanfield + .field-type-htmlfield {
        margin-top: 1rem;
    }

    /*
        Ace code editor, which you don't want to touch. Huge pita to get to
        work right with custom styling (it'll look like it's working, but
        all the cursor measurements are off and the editing is werid).
    */

    .code-editor-wrapper {
        @include form-element;
        height: auto;
        margin-bottom: .75rem;
        padding: 0;

        // focused is a class because the wrapper doesn't get ':focus'
        &.focused {
            border-color: $input-focus-border-color;
        }
    }

    .error {
        .code-editor-wrapper {
            margin-bottom: 0;
            padding: 0;
        }

        input[type="checkbox"],
        input[type="radio"] {
            margin-bottom: inherit;
        }
    }

    .code-editor {
        &.read-only {
            background-color: $input-disabled-bg;
            color: $steel;
            cursor: $input-disabled-cursor;
        }
    }

    .ace_content {
        color: inherit;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
        font-size: 12px;
        line-height: 12px;
    }

    .ace_scroller {
        box-shadow: $input-box-shadow;
    }

    .focused .ace_scroller {
        background: $input-focus-bg-color;
    }

    .ace-syntax-error {
        background: $yellow-light;
        position: absolute;
    }

    .file-preview-wrapper {
        &:not(:empty) {
            border: 1px solid $input-border-color;
            padding: .5rem;
            margin-bottom: 1rem;
        }

        .row {
            /* FIXME:
                temporary to ensure a somewhat reasonable display
                within the form. Once this widget is more responsive
                we may be able to get away with displaying this
            */
            .columns:first-child {
                display: none;
            }

            .file-status {
                margin-left: 0;
                width: 66%;
            }

            .file-actions {
                width: 33%;
            }
        }

        .file-actions .button {
            padding: 0.85em .15em !important;
            margin-bottom: .5rem !important;

            &.delete {
                /* FIXME:
                    the delete button does not work well, since we
                    would need to remove the input after deletion
                    in order to not cause any issues.

                    All the actions assume a tabular layout, so
                    we either need to change the widget to adhere
                    to that layout or make the delete action more
                    flexible, so we can specify which elements
                    should be removed.

                    The rename button also has a small issue, in
                    that the name displayed above the file-preview-wrapper
                    will not be updated currently, so that should
                    be fixed as well, but it's not large enough of
                    an issue to hide that button as well...
                */
                display: none;
            }
        }
    }
    /*
    <--
    */
}

/*
    Hide the spam bot honeypot field
*/
.field-roboter_falle {
    display: none;
}

/*
    Hide hidden fields
*/
.field-hidden {
    display: none;
}

/*
    input buttons
*/
.input-with-button {
    .button {
        border-left: 0;
        padding: 0;

        // IE 9, 10 and 11 will put the link inside the button element because
        // Internet Explorer. Here we hide the result.
        a,
        .redactor-selection-marker {
            display: none;
        }
    }

    #redactor-modal-link-insert {
        > input,
        > label {
            display: none;
        }
    }
}

/*
    form display rendering
*/
.fieldset-display {
    margin-bottom: 1em;

    .thumbnail {
        border-radius: 5px;
        flex: 2;
        margin-right: 1rem;
        overflow: hidden;
        position: relative;

        & + div {
            flex: 10;
        }

        img {
            border-radius: 5px;
            max-height: 150px;
            object-fit: cover;
            vertical-align: top;
            width: 100%;
        }
    }
}

dl.field-display,
dl.field-display > dt {
    margin-bottom: 0;
}

.field-display {

    p.thumbnail {
        border-radius: 5px;
        padding: 0;

        img {
            border-radius: 5px;
            max-height: 150px;
            object-fit: cover;
            vertical-align: top;
        }
    }

    > dd,
    .field-display-data {
        margin-bottom: 1rem;

        img {
            margin-top: .5rem;
        }

        .marker-map {
            max-height: 300px;
            max-width: 500px;
        }

    }
}

.field-display-label {
    font-weight: bold;
}

.row.fieldset-display-submit form {
    display: inline-block;
    margin-right: .5em;
}

/*
    simple listed content
*/
.with-lead {
    li + li {
        margin-top: .5rem;
    }

    .list-title {
        font-weight: bold;
    }

    .list-lead,
    .list-hint {
        margin-bottom: .2em;
        max-width: $max-line-width;

        em {
            font-style: normal;
            font-weight: bold;
        }
    }

    .list-hint {
        border-bottom: 0 !important;
        border-top: 1px solid #e0e3e5;

        & > div {
            &.hint-stop::before {
                color: #b2232f;
            }

            &::before {
                margin-right: .5rem;
            }
        }
    }
}

/*
    the color picker field does not look right with zurb foundation
*/
input[type='color'] {
    background-color: transparent;
    border: 0;
    display: block;
    margin-bottom: 1rem;
    padding: 0;
}

/*
    homepage
*/

.homepage {
    small {
        display: block;
        font-size: .875em;
    }

    hr {
        margin-bottom: 2rem;
    }

    .newslist .news-list-item {
        a h2,
        a h3 {
            font-weight: normal;
        }

        .news-lead {
            font-size: .875rem;
        }
    }

    .newslist,
    .columns {
        > h2 {
            font-size: $h2-font-size - $h2-font-reduction;
            margin-bottom: .65rem;
        }

        > .panel-links > li > a {
            font-size: $h4-font-size - $h4-font-reduction;
            font-weight: normal;
            margin-bottom: .25rem;

            &.more-link {
                font-size: .875rem;
                font-weight: 500;
            }
        }

        > .panel-links li + li {
            margin-top: 1rem;
        }
    }
}

/*
    homepage tiles
*/

@media #{$large-up} {
    .homepage-tiles {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .homepage-tile {
            width: calc(50% - 1rem);
        }
    }
}

.homepage-tile {
    border: 1px solid $gray;
    display: block;
    margin-bottom: 2rem;
    overflow: hidden;
    text-overflow: ellipsis;

    h3 {
        font-size: 1rem;
        font-weight: 500;
        margin: 1rem;
    }

    .child-links {
        margin-top: -.5rem;
        padding: 0 1rem 1rem;
    }

    .tile-sub-link {
        font-size: .875rem;
    }

    .tile-sub-link::after {
        color: $body-font-color;
        content: ' / ';
        display: inline-block;
        margin-left: .7ex;
        margin-right: .7ex;
    }

    .tile-sub-link:last-child::after {
        content: '';
    }

    .tile-link:hover h3 {
        color: $anchor-font-color-hover;
    }

}

/*
    panels
*/

$more-link-icon: '\f105';

ul.panel-links {
    list-style: none;
    margin: 0;

    a {
        display: block;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;

        &.more-link {
            font-size: .875rem;
            font-weight: 500;

            &::before {
                @include icon($more-link-icon);
                font-size: .875rem;
            }
        }
    }

    small {
        display: block;
        font-size: .875rem;
    }

    li {
        margin-bottom: .5em;
    }

    li:last-child {
        margin-bottom: 0;
    }
}

.hidden {
    display: none;
}

.side-panel {
    border: 1px solid $gray;
    margin-bottom: 1rem;

    h2,
    h3 {
        border-bottom: 2px solid $primary-color;
        font-size: .875rem;
        margin-bottom: .25rem;
        margin-top: 0;
        padding: .75rem 1rem;
        text-transform: uppercase;

        + .location {
            margin-top: 1rem;
        }
    }

    > ul {
        list-style-type: none;
        margin: 0;

        &:first-of-type {
            padding: .5rem 1rem .75rem;
        }

        &.bulleted {
            list-style-type: disc;
            margin-left: 2rem;
        }

        li {
            font-size: .875rem;

            + li {
                margin-top: .25rem;
            }
        }

        &.fa-ul {
            margin-left: 1.25rem;

            .fa-li {
                margin-top: 1px;
            }
        }
    }

    .panel-links li + li {
        margin-top: .75rem;
    }

    a {
        display: block;
        font-size: .875rem;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    small {
        font-size: .875rem;
    }

    > .field-display {
        font-size: .875rem;
        margin-bottom: .5em;
        padding: 1rem 1.25rem 0;
    }

    .field-display-data,
    .field-display-data * {
        font-size: .875rem !important;
    }

    .marker-map {
        box-sizing: content-box;

        a {
            font-size: 10px;
        }
    }

    .location {
        font-size: .875rem;
        margin-bottom: 1rem;
        margin-left: 1rem;
        padding-right: 1rem;
        white-space: pre-line;
        word-break: break-all;
    }
}

.borderless-side-panel {
    margin-bottom: 1.5rem;

    h2 {
        border-bottom: 2px solid $primary-color;
        font-size: 1rem;
        margin-bottom: .6rem;
        padding-bottom: .5rem;
    }

    ul {
        list-style: none;
        margin: 0;

        li {
            font-size: .875rem;
            margin-bottom: .4rem;
        }
    }
}

.homepage .side-panel:first-child,
.side-panel.highlighted {
    background-color: $topbar-bg-color;
    border: 0;

    h2 {
        @include primary-color-background;
        border-bottom: 0;
        padding: .75rem 1rem;
        text-transform: uppercase;
    }

    &.without-title {
        > ul:first-of-type:not(.bulleted) {
            li:first-child {
                @include primary-color-background;
                margin: -.5rem -1rem 1rem;
                padding: .75rem 1rem;
                text-transform: uppercase;

                a {
                    color: $primary-fg-color;
                }
            }
        }

        > ul:not(.bulleted) {
            padding: 0 0 .25rem;

            li {
                min-height: .5rem;

                + li {
                    margin-top: .25rem;
                }
            }
        }

        > ul:last-of-type {
            padding: 0 0 1rem;
        }

        p {
            font-size: .875rem;
        }
    }
}

/*
    edit bar (and popup links)
*/
$accept-link-icon: '\f00c';
$cleanup-link-icon: '\f0d0';
$copy-link-icon: '\f0c5';
$delete-link-icon: '\f014';
$disabled-icon: '\f05e';
$edit-link-icon: '\f040';
$save-link-icon: '\f0c7';
$cancel-link-icon: '\f00d';
$export-link-icon: '\f019';
$file-link-icon: '\f0c6';
$image-link-icon: '\f03e';
$import-link-icon: '\f093';
$filters-link-icon: '\f02c';
$internal-link-icon: '\f0c1';
$manage-recipients: '\f003';
$manage-subscribers: '\f0c0';
$mark-as-paid: '\f058';
$mark-as-unpaid: '\f057';
$move-link-icon: '\f047';
$new-daypass-icon: '\f145';
$new-daily-item-icon: '\f02d';
$new-resource-link-icon: '\f0c1';
$new-directory-icon: '\f0e8';
$new-directory-entry-icon: '\f114';
$new-recipient: '\f1fa';
$new-form-icon: '\f044';
$new-document-form-icon: '\f15b';
$new-link-icon: '\f0c1';
$new-iframe-icon: '\f2d0';
$new-news-icon: '\f1ea';
$new-newsletter-icon: '\f003';
$new-note-icon: '\f24a';
$new-page-icon: '\f0f6';
$new-payment-icon: '\f09d';
$new-person-icon: '\f007';
$new-photo-album: '\f03e';
$new-registration-window: '\f067';
$new-reservation-icon: '\f271';
$new-room-icon: '\f015';
$new-datatrans-icon: '\f09d';
$new-stripe-connect-icon: '\f1f5';
$new-worldline-saferpay-icon: '\f09d';
$new-user-icon: '\f234';
$new-text-module-icon: '\f24a';
$paste-link-icon: '\f0ea';
$payment-capture-icon: '\f09d';
$payment-refund-icon: '\f0e2';
$payment-provider-icon: '\f283';
$payments-icon: '\f09d';
$rule-link-icon: '\f085';
$select-icon: '\f14a';
$send-link-icon: '\f1d9';
$sort-link-icon: '\f074';
$sync-icon: '\f021';
$subscribe-link-icon: '\f0c1';
$test-link-icon: '\f0e9';
$occupancy-link-icon: '\f022';
$upload-icon: '\f0ee';
$view-link: '\f06e';
$pdf-icon: '\f1c1';
$ticket-files-icon: '\f019';
$qr-code-icon: '\f029';
$envelope-icon: '\f0e0';
$results-icon: '\f080';
$editbar-bg-color: $topbar-link-bg-hover;

.edit-bar {
    background-color: $editbar-bg-color;
    margin-bottom: 2px;
    margin-top: -2px;

    .border {
        border-bottom: 1px dashed $iron;
    }

    .button,
    button {
        background-color: $editbar-bg-color;
        color: $body-font-color;
        padding-left: 1rem;
        padding-right: 1rem;

        &.dropdown {
            padding-right: 1.25rem;

            &::after {
                display: none;
            }

            &::before {
                @include icon('\f078');
                content: '\f078';
                margin-right: .75rem;
            }
        }

        &:hover {
            @include primary-color-background;
        }
    }

    // animation for intercooler buttons
    @keyframes oscillate-button {
        0% { opacity: .75; }
        50% { opacity: 0; }
        100% { opacity: .75; }
    }

    .button[ic-post-to].disabled::after {
        animation: oscillate-button 2s infinite linear;
        background-blend-mode: multiply;
        background-color: $primary-color;
        bottom: 0;
        content: '';
        height: 3px;
        left: 0;
        position: absolute;
        width: 100%;
    }

    button.tiny {
        font-size: .8rem;
        margin-bottom: 0;

        &.right-side {
            float: right;
        }
    }

    > a {
        margin-bottom: 0;
    }

    a.tiny {
        font-size: .8rem;
    }

    a::before,
    button::before {
        display: inline-block;
        margin-right: .8ex;
        text-align: center;
        width: 15px;
    }

    .accept-link::before { @include icon($accept-link-icon); }
    .cleanup-link::before { @include icon($cleanup-link-icon); }
    .copy-link::before { @include icon($copy-link-icon); }
    .delete-link::before { @include icon($delete-link-icon); }
    .edit-link::before { @include icon($edit-link-icon); }
    .save-link::before { @include icon($save-link-icon); }
    .cancel-link::before { @include icon($cancel-link-icon); }
    .export-link::before { @include icon($export-link-icon); }
    .envelope::before { @include icon($envelope-icon); }
    .move-link::before { @include icon($move-link-icon); }
    .file-url::before { @include icon($file-link-icon); }
    .image-url::before { @include icon($image-link-icon); }
    .import-link::before { @include icon($import-link-icon); }
    .filters-link::before { @include icon($filters-link-icon); }
    .manage-subscribers::before { @include icon($manage-subscribers); }
    .new-daypass::before { @include icon($new-daypass-icon); }
    .new-directory::before { @include icon($new-directory-icon); }
    .new-directory-entry::before { @include icon($new-directory-entry-icon); }
    .new-form::before { @include icon($new-form-icon); }
    .new-document-form::before { @include icon($new-document-form-icon); }
    .new-link::before { @include icon($new-link-icon); }
    .new-iframe::before { @include icon($new-iframe-icon); }
    .new-news::before { @include icon($new-news-icon); }
    .new-newsletter::before { @include icon($new-newsletter-icon); }
    .new-note::before { @include icon($new-note-icon); }
    .new-page::before { @include icon($new-page-icon); }
    .new-payment::before { @include icon($new-payment-icon); }
    .new-person::before { @include icon($new-person-icon); }
    .new-photo-album::before { @include icon($new-photo-album); }
    .new-recipient::before { @include icon($new-recipient); }
    .new-registration-window::before { @include icon($new-registration-window); }
    .new-reservation::before { @include icon($new-reservation-icon); }
    .new-room::before { @include icon($new-room-icon); }
    .new-datatrans::before { @include icon($new-datatrans-icon); }
    .new-stripe-connect::before { @include icon($new-stripe-connect-icon); }
    .new-worldline-saferpay::before { @include icon($new-worldline-saferpay-icon); }
    .new-user::before { @include icon($new-user-icon); }
    .new-text-module::before { @include icon($new-text-module-icon); }
    .occupancy-link::before { @include icon($occupancy-link-icon); }
    .paste-link::before { @include icon($paste-link-icon); }
    .payment-provider::before { @include icon($payment-provider-icon); }
    .payments::before { @include icon($payments-icon); }
    .select::before { @include icon($select-icon); }
    .send-link::before { @include icon($send-link-icon); }
    .sort-link::before { @include icon($sort-link-icon); }
    .subscribe-link::before { @include icon($subscribe-link-icon); }
    .test-link::before { @include icon($test-link-icon); }
    .rule-link::before { @include icon($rule-link-icon); }
    .sync::before { @include icon($sync-icon); }
    .upload::before { @include icon($upload-icon); }
    .view-link::before { @include icon($view-link); }
    .ticket-pdf::before { @include icon($pdf-icon); }
    .ticket-files::before { @include icon($ticket-files-icon); }
    .new-daily-item::before { @include icon($new-daily-item-icon); }
    .new-resource-link::before { @include icon($new-resource-link-icon); }
    .qr-code-link::before { @include icon($qr-code-icon); }
    .cancel::before { @include icon($disabled-icon); }
    .envelope::before { @include icon($envelope-icon); }
    .internal-link::before { @include icon($internal-link-icon); }
    .results-link::before { @include icon($results-icon); }
}

.mark-as-paid::before { @include icon($mark-as-paid); }
.mark-as-unpaid::before { @include icon($mark-as-unpaid); }
.payment-capture::before { @include icon($payment-capture-icon); }
.payment-refund::before { @include icon($payment-refund-icon); }

/*
    reservation actions popup
*/
.reservation-actions {
    h3 {
        font-size: .875rem;
        font-weight: bold;
        margin-top: 10px;
    }

    form {
        margin-bottom: .5rem;
    }

    input {
        margin-bottom: 0;
    }

    input[type="time"],
    input[type="text"] {
        height: 2rem;
    }

    input[type="radio"] {
        float: none;
        font-size: .875rem;
        position: relative;
        top: -2px;
    }

    .label-text {
        color: $form-label-font-color;
        display: inline-block;
        font-size: .875rem;
        margin-right: 1rem;
    }

    label {
        margin-right: .75rem;
    }

    button {
        margin: 10px 0 0;
        width: 100%;
    }

    .field {
        margin-bottom: .25rem;

        label:last-child {
            margin-right: 0;
        }
    }

    .split > div {
        display: inline-block;
        position: relative;
        width: 50%;

        &:first-child {
            padding-right: 10px;

            &::after {
                color: $form-label-font-color;
                content: '-';
                font-size: .875rem;
                position: absolute;
                right: -4px;
                top: 1.5rem;
            }
        }

        &:last-child {
            padding-left: 10px;
        }
    }
}

/*
    images
*/
.thumbnail {
    padding: .5em;
}

h2 + .image-grid {
    margin-top: .5rem;
}

/*
    imageset view
*/
.full-imageset {
    > p {
        margin-bottom: 2rem;
    }

    > p:first-child {
        margin-top: .5rem;
    }
}

/*
    image control elements
*/
.image-box {
    position: relative;

    .delete {
        background-color: $input-disabled-bg;
        border-radius: 15px;
        color: $button-font-color;
        height: 27px;
        left: -4px;
        position: absolute;
        text-align: center;
        top: -13px;
        width: 27px;
    }

    .delete:hover {
        background-color: $alert-color;
    }
}

/*
    richtext editor dropzone
*/
div#redactor-droparea {
    background-color: $topbar-bg-color;
    border: 1px dashed $primary-color;
    font-size: 1rem;

    input {
        display: inline;
        text-align: center;
    }
}

/*
    hide the "open in new tab" element in the redactor
*/

#redactor-modal-link-insert label:last-child,
#redactor-modal-image-edit input.redactor-image-link-option + label.redactor-image-link-option {
    display: none;
}

/*
    hide the "image position" options in the redactor
*/
#redactor-modal-image-edit {
    .redactor-image-position-option {
        display: none;
    }

    /*
        disable image alt text editor
    */
    :nth-child(1),
    :nth-child(2) {
        display: none;
    }

    :nth-child(3) {
        margin-top: -10px !important;
    }
}

/*
    make the file manager box a bit larger than it is by default
*/
#redactor-file-manager-box > ul {
    margin: 0 !important;
    max-height: 450px !important;
}

/*
    the redactor dropdown is a bit off
*/
.redactor-dropdown {
    margin-left: -15px;
}

/*
    dialog styling
*/
.dialog {

    h2 {
        font-size: $h3-font-size - $h3-font-reduction;
        font-weight: bold;
    }

    p {
        max-width: $max-line-width;
    }

    .button {
        margin: 1rem 1rem 0 0;
    }

}

/*
    main title
*/

.main-title {
    margin-bottom: 1rem;
    margin-top: -.5rem;

    .small {
        display: block;
        font-size: 1.5rem;
        font-weight: normal;
    }
}

/*
    page lead
*/
.page-lead {
    display: block;
    font-size: $h5-font-size;
    font-weight: 400;
    margin-bottom: 1rem;
    max-width: $max-line-width;
}

/*
    image subtitles
*/
.alt-text {
    background-color: $vapor;
    color: $monsoon;
    display: block;
    font-size: .875rem;
    padding: .25em .75em;
    transition: background .5s ease-in-out;
}

.alt-text-missing {
    background-color: $yellow-pastel;
    font-style: italic;
}

.alt-text-changed-success {
    background-color: $green-light;
}

.alt-text-changed-error {
    background-color: $red-light;
}

/*
    page text
*/

.page-text {
    margin-bottom: 2rem;

    blockquote {
        background-color: $topbar-bg-color;
        padding: .5rem 1rem;
    }

    hr {
        @include hairline;
    }

    img {
        border-radius: 2px;
        display: block;
    }

    p {
        max-width: $max-line-width;
    }

    pre {
        @include smooth-edges;

        background: $white-smoke;
        display: inline-block;
        font-size: .9rem;
        margin-bottom: 1rem;
        padding: .75rem 1rem;
    }

    .has-img,
    .has-video {
        max-width: none;
    }

    .has-video {
        background-color: $gray-pastel;
        cursor: pointer;
        display: block;
        min-height: 360px;
        position: relative;
        text-align: center;
        width: 100%;

        @media #{$medium-only} {
            min-height: 300px;
        }

        @media #{$small-only} {
            min-height: 200px;
        }
    }

    .video-wrapper {
        height: 0;
        padding-bottom: 56.25%; /* 16:9 */
        position: relative;

        iframe {
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }
    }
}

/*
    page links
*/

.page-links {
    li {
        margin-left: 0;
        margin-right: 1rem;

        a::after {
            color: transparentize($primary-color, .8);
            content: ' | ';
            display: inline-block;
            margin-left: 1rem;
        }

        &:last-child a::after {
            content: '';
        }
    }
}

/*
    breadcrumbs
*/

.breadcrumbs {
    @include hairline;
    font-style: italic;
    margin-bottom: 1rem;
    overflow: hidden;
    padding-bottom: .7rem;
    padding-left: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;

    li {
        display: inline;
        float: none;
        line-height: 1rem;

        // highlight the parent
        &:nth-last-child(2) {
            font-weight: bold;
        }
    }
}

@media #{$small-only} {
    .breadcrumbs {
        padding-left: 0;

        li {
            display: block;
            max-width: 100%;
            overflow: hidden;
            padding-left: 0;
            text-overflow: ellipsis;

            + li {
                margin-top: .5rem;
            }

            &::before {
                display: none;
            }
        }
    }
}

/*
    sidebar navigation
*/

.sidebar {
    ul {
        list-style: none;

        li .group-title {
            display: block;
            margin-bottom: .4rem;
        }

        .children {
            margin-left: 0;

            .new-content-placeholder,
            a {
                color: $oil;
                overflow: hidden;
                padding-left: 2rem;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .new-content-placeholder {
                display: none;
            }
        }
    }
}

/*
    Sidebar drag & drop
*/
.dragging {
    opacity: 1;

    &.sortable-ghost {
        opacity: 0;
    }
}

@keyframes flash-success {
    0% { color: transparent; }
    20% { color: $primary-color; }
    25% { color: $primary-color; }
    50% { color: lighten($primary-color, 20%); }
    75% { color: $primary-color; }
    80% { color: $primary-color; }
    100% { color: transparent; }
}

@keyframes flash-failure {
    0% { color: transparent; }
    20% { color: $alert-color; }
    25% { color: $alert-color; }
    50% { color: lighten($alert-color, 20%); }
    75% { color: $alert-color; }
    80% { color: $alert-color; }
    100% { color: transparent; }
}

.flash > a::after {
    @include prefix(animation-duration, .7s);
    @include prefix(animation-fill-mode, forwards);
    font-family: 'FontAwesome';
    margin-left: 5px;
}

.flash.success > a::after {
    @include prefix(animation-name, flash-success);
    color: $primary-color;
    content: ' \f0c7';
}

.flash.failure > a::after {
    @include prefix(animation-name, flash-failure);
    color: $alert-color;
    content: ' \f05e';
}

.sortable-chosen {
    background-color: $yellow-pastel;
}

/*
    content block
*/
.content {
    margin-bottom: 1rem;
}

/*
    settings
*/

.org-settings {
    font-size: 1rem;
    list-style: none;
    margin: 0;

    i.fa {
        border-radius: 50px;
        display: inline-block;
        height: 3ex;
        text-align: center;
        width: 3ex;
    }
}

.form-preview-widget .holidays {
    display: block;
    font-size: .875rem;
    list-style: none;
    margin: 0 0 1rem;
}

.danger-zone {
    margin: 0 1em 1em;
    padding: 8px;
}

.chat-settings {
    display: none;
}

/*
    news list
*/

.newslist .news-list-item {
    margin-bottom: .5rem;

    a h2,
    a h3 {
        color: $anchor-font-color;
        font-size: $h4-font-size - $h4-font-reduction;
        font-weight: bold;
        margin-bottom: .45rem;
    }

    a:hover h2,
    a:hover h3 {
        color: $anchor-font-color-hover;
    }

    .news-date {
        font-size: .875rem;
        margin-bottom: .25rem;
    }

    .news-lead {
        font-size: 1rem;
        margin-bottom: .5rem;
        max-width: $max-line-width;
    }
}

.news-years {
    list-style: none;
    margin-left: 0;
    padding: 0;

    li {
        display: inline;

        + li::before {
            content: '/';
        }

        &.active {
            font-weight: bold;
        }
    }
}

.news-tags {
    list-style: none;
    margin-left: 0;
    padding: 0;

    li {
        display: inline;

        ::before {
            content: '#';
        }

        &.active {
            font-weight: bold;
        }
    }
}

.all-news {
    font-size: .875rem;
    font-weight: 500;

    a {
        display: inline-block;

        + a::before {
            color: $body-font-color;
            content: '/ ';
            font-weight: normal;
        }
    }
}

.all-news::before {
    color: $primary-color;
    content: $more-link-icon;
    font-family: 'FontAwesome';
    font-size: .875rem;
    margin-right: .25ex;
}

/*
    Person card
*/
$person-website-icon: '\f0c1';
$person-phone-icon: '\f095';
$person-email-icon: '\f003';

.person-card {
    margin: 0 1em 1em 0;

    .person-card-portrait {
        @include circle;

        background: $topbar-bg-color;
        height: 9rem;
        overflow: hidden;
        width: 9rem;

        // this would be nicer with object-position and object-fit, but IE
        // doesn't support it at all and Safari only somewhat.
        .cover-image {
            background-position: center top;
            background-size: cover;
            height: 100%;
            width: 100%;
        }

        .fa-user {
            color: $white;
            font-size: 200px;
        }
    }

    ul {
        list-style: none;
        margin-bottom: 0;
        margin-left: 0;

        li::before {
            margin-right: .5ex;
        }
    }

    .person-card-function {
        margin-bottom: 1em;
    }

    .person-card-organisation {
        margin-bottom: 1em;

        span:not(:last-child)::after {
            content: ' -';
        }
    }

    .person-card-personal {
        margin-bottom: 1em;

        span:not(:last-child)::after {
            content: ',';
        }
    }

    .person-card-address {
        margin-bottom: 1em;

        span {
            white-space: pre-line;
        }
    }

    .person-card-notes {
        padding-top: 1em;

        span {
            white-space: pre-line;
        }
    }

    &.person-single-item {
        .person-card-website::before {
            @include icon($person-website-icon);
            color: $primary-color;
        }

        .person-card-phone::before,
        .person-card-phone-direct::before {
            @include icon($person-phone-icon);
            color: $primary-color;
        }

        .person-card-email::before {
            @include icon($person-email-icon);
            color: $primary-color;
        }
    }
}

@media #{$small-only} {
    .person-card {
        .person-card-portrait {
            float: none;
            height: calc(100vw - 3rem);
            margin-bottom: 1em;
            width: calc(100vw - 3rem);
        }
    }
}

/*
    Person card in lists
*/

.person-list-card {
    display: flex;

    .person-card-portrait {
        height: 5rem;
        margin-right: 1.2rem;
        position: relative;
        text-align: center;
        width: 5rem;

        .fa-user {
            font-size: 80px;
        }
    }

    > a {
        margin-right: 1em;
    }

    ul {
        > li {
            font-size: .875rem;
        }
    }

    .person-card-title {
        font-size: 1rem;
        font-weight: bold;
    }

    .person-card-function {
        margin-bottom: 0;
    }
}

/*
    Ticket
*/
$open-ticket-bg: $primary-color;
$pending-ticket-bg: $blue-light;
$closed-ticket-bg: $green-light;
$archived-ticket-bg: $brown-light;
$ticket-number-bg: $yellow-light;

.ticket-number-plain {
    color: $monsoon;
    font-family: $font-family-monospace;
    font-weight: bold;
}

.ticket-number {
    @include label(
        $padding: .25rem .5rem,
        $text-size: 1rem,
        $bg: $ticket-number-bg
    );
    font-family: $font-family-monospace;
}

.ticket-date {
    color: $monsoon;
}

.ticket-state-open {
    @include label(
        $padding: .25rem .5rem,
        $text-size: 1rem,
        $bg: $open-ticket-bg
    );
}

.ticket-state-pending {
    @include label(
        $padding: .25rem .5rem,
        $text-size: 1rem,
        $bg: $pending-ticket-bg
    );
}

.ticket-state-closed {
    @include label(
        $padding: .25rem .5rem,
        $text-size: 1rem,
        $bg: $closed-ticket-bg
    );
}

.ticket-state-archived {
    @include label(
        $padding: .25rem .5rem,
        $text-size: 1rem,
        $bg: $archived-ticket-bg
    );
}

.ticket-timeline .message .title {
    border: 0;
    height: 0;
    padding: 0;
}

.ticket-timeline .timeline-no-messages {
    margin-top: 1.25rem;
}

/*
    Tickets list
*/
$accept-ticket-icon: '\f1db';
$accept-ticket-icon-hover: '\f192';
$assign-ticket-icon: '\f2c0';
$assign-ticket-icon-hover: '\f007';
$close-ticket-icon: '\f1db';
$close-ticket-icon-hover: '\f05d';
$reopen-ticket-icon: '\f1db';
$reopen-ticket-icon-hover: '\f192';
$delete-ticket-icon: '\f1f8';
$delete-ticket-icon-active: '\f00c';
$all-handler-icon: '\f069';
$frm-handler-icon: '\f044';
$rsv-handler-icon: '\f073';
$evn-handler-icon: '\f133';
$dir-handler-icon: '\f114';
$my-ticket-icon: '\f2be';
$open-ticket-icon: '\f10c';
$pending-ticket-icon: '\f192';
$closed-ticket-icon: '\f05d';
$all-ticket-icon: '\f055';
$ticket-archive-icon: '\f1c6';
$ticket-filter-icon-mr: .5em;
$ticket-notification-enabled-icon: '\f0f3';
$ticket-notification-disabled-icon: '\f1f6';
$delete-ticket-icon: '\f1f8';
$archive-ticket-icon: '\f1c6';

.ticket-notifications {
    float: right;

    &::before {
        @include icon($ticket-notification-disabled-icon);
    }

    &.granted {
        &::before {
            @include icon($ticket-notification-enabled-icon);
        }
    }
}

.my-tickets::before {
    @include icon($my-ticket-icon);
    font-size: 1.25rem;
    height: 22px;
    line-height: 22px;
    margin-right: 6px !important;
    width: 25px;
}

.ticket-filter-my::before {
    @include icon($my-ticket-icon);
    margin-right: $ticket-filter-icon-mr;
}

.ticket-filter-open::before {
    @include icon($open-ticket-icon);
    margin-right: $ticket-filter-icon-mr;
}

.ticket-filter-pending::before {
    @include icon($pending-ticket-icon);
    margin-right: $ticket-filter-icon-mr;
}

.ticket-filter-closed::before {
    @include icon($closed-ticket-icon);
    margin-right: $ticket-filter-icon-mr;
}

.ticket-filter-all::before {
    @include icon($all-ticket-icon);
    margin-right: $ticket-filter-icon-mr;
}

.no-tickets {
    border: 0;
    height: 400px;
    padding-top: 150px;
    text-align: center;
}

.tickets-table {
    width: 100%;

    #action-box {
        align-items: flex-start;
        display: flex;
        flex-direction: column;

        input {
            margin-top: 1ex;
        }
    }

    #do-action {
        color: $sub-nav-font-color;

        &.ready {
            color: $alert-color;
            cursor: pointer;
            &::before { @include icon($delete-ticket-icon); }
        }

        &.delete {
            &::before {
                @include icon($delete-ticket-icon);
            }
        }

        &.archive {
            &::before {
                @include icon($ticket-archive-icon);
            }
        }
    }


    td {
        vertical-align: top;

        &.ticket-date,
        &.ticket-state,
        &.ticket-user {
            color: $monsoon;
            text-align: right;
        }

        &.ticket-user > div {
            display: inline-block;
        }

        // forces the ticket-title and group to break on newlines
        &.ticket-number-plain,
        &.ticket-date,
        &.ticket-action {
            white-space: nowrap;
        }

        &.ticket-group div:first-child {
            font-weight: bold;
        }
    }

    th {
        button,
        dl,
        input[type="checkbox"] {
            margin: 0;
        }

        dl dd {
            margin-left: 0;
        }

        dd + dd {
            margin-left: .75em;
        }

        dd + a {
            padding: .5rem;
        }

        button {
            float: right;
        }

        ul li {
            font-size: .8rem;
            font-weight: normal;
        }
    }
}

.ALL-link::before { @include icon($all-handler-icon); }
.FRM-link::before { @include icon($frm-handler-icon); }
.RSV-link::before { @include icon($rsv-handler-icon); }
.EVN-link::before { @include icon($evn-handler-icon); }
.DIR-link::before { @include icon($dir-handler-icon); }

.ALL-link::before,
.FRM-link::before,
.RSV-link::before,
.EVN-link::before,
.DIR-link::before {
    display: inline-block;
    margin-right: 1ex;
}

.ticket-handler-FRM td:first-child::before {
    @include icon($frm-handler-icon);
}

.ticket-handler-RSV td:first-child::before {
    @include icon($rsv-handler-icon);
}

.ticket-handler-EVN td:first-child::before {
    @include icon($evn-handler-icon);
    color: $monsoon;
}

.ticket-handler-DIR td:first-child::before {
    @include icon($dir-handler-icon);
}

tr.ticket:hover {
    background-color: $yellow-pastel;
}

.ticket-button {
    @include button(
        $padding: $button-tny,
        $bg: $success-color
    );
    font-size: 1em;
    margin: 0;
}

.new-note {
    float: right;
}

.ticket-accept {
    float: right;

    &::before {
        @include icon($accept-ticket-icon);
        margin-right: 1ex;
    }

    &:hover::before {
        content: $accept-ticket-icon-hover;
    }
}

.ticket-close {
    float: right;

    &::before {
        @include icon($close-ticket-icon);
        margin-right: 1ex;
    }

    &:hover::before {
        content: $close-ticket-icon-hover;
    }
}

.ticket-delete {
    float: right;

    &::before {
        @include icon($delete-ticket-icon);
        margin-right: 1ex;
    }

}

.ticket-reopen {
    float: right;

    &::before {
        @include icon($reopen-ticket-icon);
        margin-right: 1ex;
    }

    &:hover::before {
        content: $reopen-ticket-icon-hover;
    }
}

.ticket-assign {
    float: right;

    &::before {
        @include icon($assign-ticket-icon);
        margin-right: 1ex;
    }

    &:hover::before {
        content: $assign-ticket-icon-hover;
    }
}

.ticket-archive {
    &::before {
        @include icon($archive-ticket-icon);
        margin-right: 1ex;
    }
}


/*
    Tickets filter dropdown
*/

.ticket-filters button.dropdown.tiny {
    font-size: .8rem;
    overflow: hidden;
    padding: .5rem 2.25rem .5rem 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;

    &::after {
        right: .9rem;
    }
}

.f-dropdown {
    max-height: 400px;
    max-width: 275px;
    overflow-x: hidden;
    overflow-y: auto;

    li:hover {
        @include primary-color-background;
    }

    a {
        font-size: .875rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &:hover {
            color: $white;
        }

        ::before {
            font-weight: normal;
        }

        &.is-parent {
            margin-bottom: -.2rem;
        }

        &.ticket-group-filter {
            font-weight: normal;
            margin-left: 1.4rem;
            padding-bottom: .3rem;
            padding-top: .3rem;
        }
    }
}

button {
    .ALL-sub-link::before { @include icon($all-handler-icon); }
    .FRM-sub-link::before { @include icon($frm-handler-icon); }
    .RSV-sub-link::before { @include icon($rsv-handler-icon); }
    .EVN-sub-link::before { @include icon($evn-handler-icon); }

    .ALL-sub-link::before,
    .FRM-sub-link::before,
    .RSV-sub-link::before,
    .EVN-sub-link::before {
        display: inline-block;
        margin-right: 1ex;
    }
}

.selected-owner {
    margin-left: 1rem !important;

    &.secondary {
        ::before {
            @include icon($all-handler-icon);
            display: inline-block;
            margin-right: 1ex;
        }
    }
}

/*
    Sub navigation
*/
.sub-nav {
    // we slightly increase the padding in the org theme, if the line height
    // is not slightly increased at the same time, we see some weird overlap
    line-height: 1.7rem;
}

/*
    Reservations Form
*/
.reservation-form {
    h2 {
        font-size: $h3-font-size - $h3-font-reduction;
        font-weight: bold;
    }

    input.highlighted {
        background-color: $yellow-pastel;
    }

    .select-previous-time {
        padding-bottom: 1px;
        padding-top: 5px;

        &:hover {
            font-weight: bold;
            text-decoration: none;
        }

        i {
            display: inline-block;
            padding-right: .75ex;
        }
    }
}

/*
    Fullcalendar Integration
*/

@keyframes fadeout-box-shadow {
    to {box-shadow: none;}
}

.calendar {

    margin-bottom: 1.5rem;

    button:focus {
        // XXX fullcalendar focuses the buttons when they are clicked,
        // resulting in the chrome accessibility outline.. now this is
        // helpful in allmost all the cases (and should not be disabled)
        // however, the calendar is not accessible as it is, so we might
        // as well remove this otherwise very jaring looking outline
        // -> the fullcalendar needs an accessible alternative, it can't
        // really be made accessible because it's a huge blob of html
        // tables designed to show a calendar...
        outline: none;
    }

    .fc-content {
        // pass through pointer events to the background, where we have the
        // hover and javascript handling
        pointer-events: none;
    }

    .fc-toolbar {
        margin-bottom: 0;

        h2 {
            clear: both;
            display: block;
            float: none;
            margin-bottom: 1rem;
            text-align: left;
        }

        .fc-left {
            float: none;

            button {
                margin-bottom: 15px;
                margin-left: 0;
            }
        }
    }

    .partition-occupied {
        background: repeating-linear-gradient(
            45deg,
            $steel,
            $steel 10px,
            $iron 10px,
            $iron 20px
        );
    }

    .partition-free:hover {
        background: url('data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIyNnB4IiBoZWlnaHQ9IjI2cHgiIHZpZXdCb3g9IjAgMCAyNiAyNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPHBhdGggZD0iTTE3LjAzNDQ4MjgsOC45NjU1MTcyNCBMMTcuMDM0NDgyOCwwIEw4Ljk2NTUxNzI0LDAgTDguOTY1NTE3MjQsOC45NjU1MTcyNCBMMCw4Ljk2NTUxNzI0IEwwLDE3LjAzNDQ4MjggTDguOTY1NTE3MjQsMTcuMDM0NDgyOCBMOC45NjU1MTcyNCwyNiBMMTcuMDM0NDgyOCwyNiBMMTcuMDM0NDgyOCwxNy4wMzQ0ODI4IEwyNiwxNy4wMzQ0ODI4IEwyNiw4Ljk2NTUxNzI0IEwxNy4wMzQ0ODI4LDguOTY1NTE3MjQgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+DQogICAgPC9nPg0KPC9zdmc+');
        background-position: center;
        background-repeat: no-repeat;
    }

    .changing {
        .calendar-occupied {
            background: none;
        }
    }

    .fc-helper-skeleton *,
    .changing,
    .changing * {
        background-color: $primary-color !important;
    }

    .fc-month-view {
        .fc-day-number {
            font-size: .875rem;
            padding: .25rem .5rem;
        }
    }

    table {
        background-color: transparent;
        margin-bottom: 0;

        tr {
            background-color: transparent;
        }

        .fc-today {
            background: $yellow-pastel !important;

            &.fc-day {
                background: $yellow-pastel !important;
            }

            &.fc-day-top,
            &.fc-day-header {
                background: $yellow-light !important;
                opacity: 1;
            }
        }

        .event-in-past {
            filter: grayscale(1);
        }

        .fc-day-header,
        .fc-day-number {
            font-size: .9em;
        }

        .fc-event {
            border: 0;
            border-radius: 2px;
            margin: 0 0 2px;
            padding: 2px 4px;
        }

        .fc-bg {
            background: none;
        }

        .event-unavailable {
            background-color: $red;
        }

        .event-partly-available {
            background-color: $orange;
        }

        .event-available {
            background-color: $green;
        }

        // fix borders missing with zurb foundation
        tbody div.fc-content-skeleton td {
            border-color: $gainsboro;
        }
    }

    .fc-event {
        div.fc-time,
        span.fc-time {
            display: none;
        }

        .fc-title {
            font-size: .8rem;
            padding: 0;
        }

        &.fc-short .fc-title {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;

            br {
                display: none;
            }
        }

        &.highlight {
            @include prefix(animation-delay, 3s);
            @include prefix(animation-duration, 2s);
            @include prefix(animation-fill-mode, forwards);
            @include prefix(animation-iteration-count, 1);
            @include prefix(animation-name, fadeout-box-shadow);
            box-shadow: 0 5px 0 $yellow;
        }
    }

    .fc button,
    .fc-button {
        @include button(
            $padding: $button-tny,
            $bg: $smoke
        );
        background-image: none;
        box-shadow: none;
        font-size: .9rem;
        height: 2.25rem;
        text-shadow: none;

        &.fc-state-active,
        &.fc-state-disabled {
            background: $charcoal;
            color: $white;
            opacity: 1;
        }
    }
}

.calendar-footer {
    background: $white-smoke;
    border: 1px solid $gainsboro;
    color: $steel;
    font-size: .8rem;
    margin-bottom: 1.5rem;
    margin-top: calc(-1.5rem - 1px);
    padding: 2px 5px;
    text-align: center;
    width: 80%;
}

/*
    Fullcalendar responsive design
*/
@media #{$small-up} {
    .fc .fc-toolbar {
        width: 100%;
    }
}

@media #{$large-up} {
    .fc .fc-toolbar {
        width: 80%;
    }
}

@media (max-width: 850px) {
    .fc-center {
        display: block;
        width: 100%;
    }
}

@media (min-width: 850px) {
    .fc-center {
        display: inline-block;
        width: 40%;
    }
}

@media #{$small-only} {
    .calendar-footer {
        display: none !important;
    }
}

@media #{$medium-only} {
    .calendar-footer {
        width: 75%;
    }
}

/*
    Calendar day display
*/

// raise the importance a bit by double-selecting
.calendar-day.calendar-day {
    $border-radius: 4px;
    $icon-size: 3rem;

    background-color: $topbar-bg-color;
    border-radius: $border-radius $border-radius 0 0;
    font-size: .875rem;
    width: 100%;

    .calendar-day-thumbnail {
        background-position: center top;
        background-size: cover;
        border-radius: $border-radius $border-radius 0 0;
        display: block;
        padding-top: 75%;
        position: relative;
        width: 100%;

        .fa {
            bottom: 0;
            color: $iron;
            font-size: $icon-size;
            height: $icon-size;
            left: 0;
            margin: auto;
            position: absolute;
            right: 0;
            top: 0;
            width: $icon-size;
        }
    }

    .calendar-day-date {
        @include primary-color-background;
        border-radius: 0 0 $border-radius $border-radius;
        line-height: 2.25rem;

        > div {
            display: inline-block;
        }

        .weekday {
            background: $black;
            border-radius: 0 0 0 $border-radius;
            color: $white;
            padding: 0 .5rem;
            text-transform: uppercase;
        }

        .date {
            overflow: hidden;
            padding: 0 0 0 .5rem;
            position: absolute;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 60%;

            .long-month {
                display: inline;
            }

            .short-month {
                display: none;
            }
        }
    }
}

@media #{$small-only} {
    .occurrece {
        margin-bottom: 1rem !important;
    }

    .calendar-day {
        .calendar-day-date {
            font-size: .875rem;

            .date {
                .long-month {
                    display: none;
                }

                .short-month {
                    display: inline;
                }
            }
        }
    }

    .calendar-text-column {
        padding-left: 0;

        h3 {
            font-size: 1rem !important;
        }

        .occurrence-location,
        .occurrence-time {
            font-size: .875rem !important;
        }

        .occurrence-tags {
            display: none;
        }
    }
}


/*
    Leaflet customisation
*/
.leaflet-popup-content a {
    color: $anchor-font-color !important;

    &:hover {
        color: $anchor-font-color-hover !important;
    }
}

/*
    Events
*/
.imported-event-panel p {
    font-size: .875rem;
}

.imported-event {
    display: inline-block;
    font-family: $font-family-monospace;
    font-size: .8rem;
    margin-top: .5rem;
}

.calendar-export-list {
    a::before {
        @include icon('\f133');
        color: $body-font-color;
        margin-right: 1ex;
    }
}

// raise importance a bit by double-selecting
.occurrence.occurrence {
    margin-bottom: 2.25rem;

    h3 {
        font-size: $h4-font-size - $h4-font-reduction;
        font-weight: bold;
    }

    .occurrence-date {
        font-size: .875rem;
        margin-bottom: .5rem;
        margin-top: .75rem;
    }

    .occurrence-location,
    .occurrence-time {
        font-size: 1rem;
        margin-bottom: .25rem;
    }

    .occurrence-time {
        margin-bottom: .6rem;
    }
}

.event-preview {
    .occurrence {
        margin-bottom: 0;
    }

    .occurrence > div:first-child {
        margin-left: -($column-gutter / 2);
    }
}

.occurrence-map,
.occurrence-image {
    margin-bottom: 1.5rem;
}

.date-range-selector-results {
    border-bottom: 2px solid $primary-color;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
}

.occurrences-filter-panel {
    margin-bottom: 2rem;
}

.occurrences-filter-tags,
.date-range-selector {
    margin-bottom: .5em;
}

.occurrence-description {
    margin-bottom: 1.25em;
    margin-top: 1.25em;
    max-width: $max-line-width;
}

.filter-panel .accordion {
    margin-left: 0;

    .accordion-navigation {
        &> a {
            background: transparent;
            border: 1px solid #cbcccc;
            color: $aluminum;
            display: inline-block;
            font-size: .8rem;
            padding: .3rem .5rem;

            &:hover {
                color: $primary-color;
            }
        }

        &> .content.active {
            background: transparent;
            padding: 0;
        }

        & .more-items {

            i {
                border: 1px solid;
                border-radius: 100px;
                font-size: .5rem;
                padding: .2rem;
                margin-left: .2rem;
            }
        }

        &.active > .more-items {
            display: none;
        }
    }

}

.accordion .accordion-navigation .field-display {
    margin-bottom: 1rem;
}
.accordion .accordion-navigation .field-display dd a {
    padding: 0;
    display: inline;
}

/*
    Popup Menu
*/
.popup {
    background-color: $white;
    border: 1px solid $gainsboro;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
    padding: 15px 20px;
    position: relative;

    a {
        display: block;
        font-size: .875rem;

        &:hover {
            text-decoration: underline;
        }

        &:hover::before {
            display: inline-block;
            text-decoration: none;
        }

        &.disabled {
            color: $monsoon;

            &:hover {
                text-decoration: none;
            }

            &::before {
                @include icon($disabled-icon);
                color: $monsoon;
            }
        }
    }

    .close {
        border-radius: 50px;
        color: $oil;
        display: block;
        font-size: 20px;
        font-weight: bold;
        height: 24px;
        line-height: 17px;
        opacity: .3;
        position: absolute;
        right: 0;
        text-align: center;
        top: 2px;
        width: 24px;

        &:hover {
            opacity: .7;
            text-decoration: none;
        }
    }

    &::after,
    &::before {
        border: solid transparent;
        content: ' ';
        height: 0;
        pointer-events: none;
        position: absolute;
        width: 0;
    }

    &.right {
        &::after,
        &::before {
            right: 100%;
            top: 50%;
        }

        &::after {
            border-color: rgba(213, 213, 213, 0);
            border-right-color: $white;
            border-width: 7px;
            margin-top: -7px;
        }

        &::before {
            border-color: rgba(245, 24, 172, 0);
            border-right-color: $gainsboro;
            border-width: 8px;
            margin-top: -8px;
        }
    }

    &.top {
        &::after,
        &::before {
            right: 50%;
            top: 100%;
        }

        &::after {
            border-color: rgba(213, 213, 213, 0);
            border-top-color: $white;
            border-width: 7px;
        }

        &::before {
            border-color: rgba(245, 24, 172, 0);
            border-top-color: $gainsboro;
            border-width: 8px;
        }
    }

    &.error.top,
    &.error.right,
    &.error.left {
        background-color: $alert-color;
        border-color: $red-dark;
        color: $white;
        font-size: .8rem;
        padding: 4px 24px 5px 9px;

        .close {
            top: 4px;
        }

        &::after {
            border-top-color: $alert-color;
        }

        &::before {
            border-top-color: $red-dark;
        }
    }
}

// on smartphones, the popup becomes a modal dialog
@media #{$small-only} {
    .popup {
        bottom: 20%;
        left: 5%;
        position: fixed;
        right: 5%;
        top: 20%;
    }
}

/*
    Search box
*/
.searchbox {
    input {
        margin-bottom: 0;
    }

    button {
        margin-bottom: 0;
        padding: 0;
    }

    input[type="text"]:not(:valid) ~ .reset-button {
        display: none;
    }

    input::-ms-clear {
        display: none;
    }

    [data-typeahead-container] a {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .reset-button {
        $size: 1rem;

        background: transparent;
        color: $input-font-color;
        position: absolute;
        right: $size / 2;
        top: calc(50% - #{$size / 2});

        &::after {
            @include icon('\f057');
            display: block;
            height: $size;
            width: $size;
        }
    }
}

/*
    Search results
*/
ul.search-results {
    a {
        display: block;
        font-weight: bold;
    }

    ul {
        list-style-type: none;
        margin-left: 0;
    }

    > li {
        margin-bottom: 1em;
    }

    div.event-child-results > ul {

        list-style-type: disc;
        margin-left: 1em;

        > li {
            font-size: .9rem;
        }

        a {
            font-weight: normal;
        }
    }
}

.result-explanation li {
    background-color: $white-smoke;
    border-radius: 5px;
    color: $steel;
    display: inline-block;
    font-size: .8rem;
    padding: 0 3px;
}

/*
    Search result typeahead
*/
.typeahead {
    position: relative;

    ul {
        background-color: $white;
        border-width: 0 1px 1px;
        box-shadow: 0 0 5px $jumbo;
        left: 1em;
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: absolute;
        right: 1em;
        z-index: 1;
    }

    a {
        color: $input-font-color;
        display: block;
        font-size: $input-font-size;
    }

    li {
        padding: 0 5px;

        button {
            background: transparent;
            border: 0;
            color: $primary-color;
            text-align: left;
            width: 100%;

            &:hover {
                font-weight: bold;
            }
        }

        // highlight links with the active class
        &.active {
            background-color: $topbar-bg-color;

            a {
                color: $primary-color;
                font-weight: bold;
            }
        }

        // highlight links when hovering
        &:hover {
            background-color: $topbar-bg-color !important;

            a {
                color: $primary-color !important;
                font-weight: bold !important;
            }
        }
    }

    // do not highlight links with the active class when hovering (so we
    // get a different highlight when hovering)
    &:hover li.active {
        background-color: $white;

        a {
            color: $body-font-color;
            font-weight: normal;
        }
    }
}

/*
    People list
*/
.people-list li {
    list-style: none;
}

/*
    A-Z Blocks
*/

.atoz-block {
    h2 {
        border-bottom: 1px solid $gray-pastel;
    }

    ul {
        list-style: none;
        margin-left: 0;
    }
}

@media #{$large-only} {
    .atoz-block {
        h2 {
            max-width: 50%;
        }
    }
}

/*
    Datetime picker tweaks
*/
.xdsoft_datetimepicker {
    margin-left: -8px;
}

.button.datetimepicker {
    margin: 0;
    padding: 0;
}

.button.secondary.postfix {
    border-left: 0;
}

/*
    User Initials
*/
.user-initials-small,
.user-initials-medium,
.user-initials-large {
    background-color: $gainsboro;
    border-radius: 50px;
    color: $body-font-color;
    display: inline-block;
    text-align: center;
}

.user-initials-small {
    font-size: .7rem;
    height: 1.4rem;
    line-height: 1.4rem;
    width: 1.4rem;
}

.user-initials-medium {
    font-size: 1rem;
    height: 2rem;
    line-height: 2rem;
    width: 2rem;
}

.user-initials-large {
    font-size: 1.3rem;
    height: 2.6rem;
    line-height: 2.6rem;
    width: 2.6rem;
}

/*
    Newsletter
*/

.newsletter-lead {
    display: block;
    font-size: $h5-font-size;
    font-weight: 400;
    margin-bottom: 1rem;
    max-width: $max-line-width;
    white-space: pre-line;
}

.recommended {
    .date {
        color: $jumbo;
    }
}

.previous-recipients {
    background-color: $white-smoke;
    padding: 1em;

    * {
        color: $form-label-font-color;
        font-size: $form-label-font-size;
    }

    p {
        margin-bottom: .5em;
    }

    ul {
        margin-bottom: 0;
    }
}

.subscribers li:hover span {
    background-color: $yellow-pastel;
}

.newsletter-block > h2,
.newsletter-block .newslist h2 {
    font-size: $h3-font-size;
}

.newsletter-block + .newsletter-block {
    margin-top: 2rem;
}

.newsletter-publications-block {
    margin-bottom: 3.5rem;
}

.newsletter-layout {

    form .field-type-multicheckboxfield ul {
        @include form-element;
        height: auto;
        max-height: 500px;
        max-width: 100%;
        overflow-y: scroll;
    }
}

/*
    Reservation calendar
*/
.reservation-confirmation .reservation-selection .reservation-warning {
    display: none;
}

.reservation-selection {
    float: right;
    padding: 0 0 0 15px;

    p {
        font-size: .875rem;
    }

    ul,
    .prediction {
        font-size: .8rem;
        list-style: none;
        margin: 0;
    }

    li {
        display: block;
        margin: 10px 0;
    }

    .button {
        border-radius: 3px;
        display: block;
        margin: 0;
    }

    .failed {
        color: $alert-color;

        .reservation-date::before {
            background-color: transparentize($alert-color, .8);
            color: $alert-color;
        }
    }

    .reservation-warning {
        color: $warning-color;
        cursor: help;
        margin-left: 1ex;
    }

    .reservation-date {
        display: block;
        font-weight: bold;

        a {
            color: $body-font-color;
            display: inline-block;
            margin: 0;

            &:hover {
                color: $anchor-font-color-hover;
            }
        }

        &::before {
            background-color: transparentize($primary-color, .8);
            border-radius: 50px;
            color: $primary-color;
            content: attr(data-quota);
            display: inline-block;
            font-size: 12px;
            height: 15px;
            line-height: 15px;
            margin-right: 1ex;
            position: relative;
            text-align: center;
            width: 15px;
        }
    }

    a,
    .reservation-time,
    .reservation-price {
        display: block;
        margin-left: 1.4rem;
    }

    &.large {
        float: none;
        padding: 0;
        width: 100%;

        span {
            font-size: 1rem;
        }

        .reservation-date::before {
            font-size: 1rem;
            height: 24px;
            line-height: 24px;
            width: 24px;
        }

        .reservation-time,
        .reservation-price {
            margin-left: 2.3rem;
        }
    }

    .prediction {
        background-color: $smoke;
        margin-top: 1rem !important;
        padding: .2rem 0 .35rem .3rem;

        a {
            margin-left: .2rem;
            margin-top: .25rem;

            &::before {
                @include icon('\f0d0');
                color: $body-font-color;
                margin-right: 1ex;
            }
        }
    }

    .reservation-denied {
        border-left: 5px solid $red-pastel;
        color: $alert-color;
        font-size: .8rem;
        margin-bottom: 1rem;
        margin-left: .6rem;
        margin-top: .5rem;
        max-width: 23.25rem;
        padding-left: 1.4rem;

        ol {
            margin: .5rem 0 0;

            li {
                background: $red;
                border-radius: 3px;
                color: $white;
                display: inline-block;
                font-size: .8rem;
                font-weight: bold;
                margin: 0;
                padding: 1px 5px;
            }
        }
    }
}
/*
    Reservation selection responsive
*/

@media #{$medium-up} {
    .reservation-selection {
        float: right;
        width: 20%;
    }

    .fc-view-container,
    .reservation-list {
        display: inline-block;
        float: left;
        width: 80%;
    }
}

@media #{$medium-only} {
    .reservation-selection {
        width: 25%;

        .button {
            padding: 1rem 1.5rem;
        }
    }

    .fc-view-container,
    .reservation-list {
        width: 75%;
    }
}

@media #{$small-only} {
    .reservation-selection {
        float: none;
        padding: 0;
        width: 100%;
    }

    .fc-view-container,
    .reservation-list {
        display: block;
        width: 100%;
    }

    .fc .fc-toolbar {
        button,
        .fc-button-group {
            display: inline-block;
            font-size: .7rem;
        }

        .fc-right {
            left: -7px;
            margin-bottom: 1rem;
            position: relative;
        }
    }

    .fc-view {
        margin-bottom: 1rem;
    }

    .fc-scroller {
        overflow-y: auto;
    }
}

/*
    Ticket summary customisations
*/
.ticket-summary {
    margin-bottom: 1.5rem;

    > div {
        margin-bottom: 1rem;
    }

    h2 {
        font-size: $h3-font-size;
    }

    h3 {
        font-size: $h4-font-size;
    }

    h4 {
        font-size: $h5-font-size;
    }

    h6 {
        font-size: $h6-font-size;
    }

    dd {
        margin-bottom: .5rem;
    }

    .reservations {
        list-style: none;
        margin: 0;

        li {
            margin-bottom: .5rem;
        }
    }

    .occurrence.occurrence {
        margin-bottom: 0;
    }
}

/*
    Resources view
*/
.resource-group {
    font-size: 1rem;
    margin-bottom: 1rem;
}

/*
    Occupancy report
*/
.occupancy-block > .columns {
    @media #{$large-only} {
        margin-bottom: 1rem;
    }
}

.occupancy-entry {
    list-style: none;
    margin-left: 0;

    .date,
    .quota {
        font-weight: bold;
    }

    .title {
        margin-bottom: .5rem;
    }
}

/*
    Image select
*/

.image-select {
    .image-box {
        @include grayscale;

        &:hover {
            img {
                border-radius: 1px;
                box-shadow: 0 0 0 3px $gainsboro;
            }
        }

        &.selected {
            @include reset-filter;

            img {
                border-radius: 1px;
                box-shadow: 0 0 0 3px $primary-color;
            }
        }

        input[type="checkbox"] {
            height: 100%;
            left: 0;
            opacity: 0;
            position: absolute;
            top: 0;
            width: 100%;

            &:hover {
                cursor: pointer;
            }
        }
    }
}

/*
    Usermanagement
*/
.user-inactive td {
    color: lighten($body-font-color, 25%);
}

.usermanagement,
.user-groups {
    width: 100%;

    td:last-child {
        text-align: right;
        width: 1%;
    }

    td.text-links {
        white-space: nowrap;
    }

    .subheader td {
        border-color: $oil;

        &:first-child {
            font-weight: bold;
        }
    }

    tbody + tbody tr:first-child td {
        padding-top: 1.5rem;
    }
}

.yubikey {
    background-color: $smoke;
    border: 1px solid $iron;
    border-radius: 3px;
    color: $tuatara;
    display: inline-block;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    font-size: .8em;
    padding: 2px 4px;
}

.user-inactive .yubikey {
    background-color: $snow;
    border-color: $smoke;
    color: $base;
}

.userprofile-settings {
    .field-display-label {
        margin-bottom: .25rem;
    }
}

/*
    New account
*/

.no-account-yet span:last-child {
    display: inline-block;
    font-weight: bold;
    margin-bottom: .6rem;
}

/*
    Photoswipe Gallery
*/
.photoswipe img {
    cursor: pointer;
}

/*
    Resource recipients
*/

ul.recipients {
    h2 {
        font-size: 1.25rem;
        margin-bottom: 0;
    }

    div {
        font-size: .875rem;

        &:nth-child(2) {
            font-size: 1rem;
            font-weight: bold;
        }

        &:last-child {
            margin-top: .25rem;
        }
    }

    li + li {
        margin-top: 1rem;
    }
}

/*
    Homepage slider
*/
.orbit-container {
    margin-bottom: 1.75rem;

    .orbit-timer {
        display: none;
    }

    .orbit-prev,
    .orbit-next {
        display: none;
    }

    &:hover {
        .orbit-prev,
        .orbit-next {
            display: block;
        }
    }

    .slider .orbit-caption {
        background-color: rgba(50, 50, 50, .5);
    }
}

.slider {
    height: $full-width-banner-height;

    li {
        @include smooth-edges;

        background-position: center center !important;
        background-size: cover !important;

        height: $full-width-banner-height;
    }

    &.no-images {
        background-color: $tuatara;
        color: $white;
        margin-bottom: 1rem;
        padding: 1rem;
    }
}


/*
    Payments
*/
.payment-providers {
    list-style: none;
    margin: 0;

    li + li {
        margin-top: 1rem;
    }

    h2,
    span {
        color: $steel;
    }

    .payment-provider-default {
        h2,
        span {
            color: $body-font-color;
        }
    }

    h2 {
        font-size: 1rem;
        font-weight: bold;
        margin: 0 0 .5rem;
    }

    .payment-provider-stripe-connect h2::before {
        @include icon('\f1f5');
        margin-right: 1.5ex;
    }

    .payment-provider-datatrans h2::before {
        @include icon('\f09d');
        margin-right: 1.5ex;
    }

    .payment-provider-worldline-saferpay h2::before {
        @include icon('\f09d');
        margin-right: 1.5ex;
    }
}

/*
    Payment states
*/
.payment-state {
    background-color: $white;
    display: inline-block;
    padding: 2px 8px;

    &.payment-state-open {
        border: 1px solid $info-color;

        &::before {
            @include icon('\f059');
            color: $info-color;
            margin-right: .75ex;
        }
    }

    &.payment-state-paid {
        border: 1px solid $success-color;

        &::before {
            @include icon('\f058');
            color: $success-color;
            margin-right: .75ex;
        }
    }

    &.payment-state-failed {
        border: 1px solid $alert-color;

        &::before {
            @include icon('\f057');
            color: $alert-color;
            margin-right: .75ex;
        }
    }

    &.payment-state-cancelled {
        border: 1px solid $warning-color;

        &::before {
            @include icon('\f06a');
            color: $warning-color;
            margin-right: .75ex;
        }
    }
}

.tickets-table .payment-state {
    background: transparent;
    border: 0;
    font-size: .8rem;
    margin-top: .3ex;
    padding: 0;

    &::before {
        margin-right: .25ex;
    }

    &.payment-state-paid::before {
        color: $iron;
    }
}

/*
    Payments table
*/
.payments-table {
    width: 100%;

    td {
        padding-right: 5px;
        vertical-align: top;
    }
}

/*
    Checkout form
*/
.checkout {
    button + a.button,
    input.button + a.button {
        margin-left: .5rem;
    }
}

/*
    Userlinks view
*/
.linkgroup select {
    max-width: 300px;
}

/*
    Filter panels
*/
.filter-panel {
    margin-bottom: 1rem;

    .filter-title {
        border-bottom: 2px solid $primary-color;
        font-size: $h4-font-size - $h4-font-reduction;
        margin-bottom: 1rem;
        margin-top: 0;
        padding: 0 0 .75rem;
    }

    ul.tags {
        list-style: none;
        margin: 0 0 .75rem;
        padding: 0;

        li {
            display: inline-block;
            font-size: .875rem;
            margin-bottom: 8px;

            &:hover .blank-label {
                @include primary-color-background;
                border: 1px solid $primary-color;
            }
        }

        a {
            font-size: .8rem;
            line-height: .8rem;
            white-space: normal;
        }

        span {
            margin-bottom: 0;
            text-align: left;

            &.rounded {
                @include circle;
            }
        }
    }

    .filters ul + ul {
        margin-top: .5rem;
    }
}

/*
    Signup Link
*/
.signup-link {
    display: block;
    word-break: break-all;
}


/*
    Timeline Messages
*/
#page-timeline div.timeline,
h2 + div.timeline {
    margin-top: -.75rem;
}

#page-timeline .actions {
    display: none;
}

.messages {
    border-radius: 2px;
    list-style: none;
    margin: 0;

    li {
        position: relative;

        + li .title::before {
            border-right: 1px solid $gainsboro;
            content: '';
            display: block;
            height: 25px;
            left: 50%;
            position: absolute;
            top: -24px;
        }
    }

    .first-of-day .title::before {
        display: none !important;
    }

    .date {
        font-size: .875rem;
        margin-bottom: 1.25rem;
        text-align: center;

        &::after {
            border-right: 1px solid $gainsboro;
            content: '';
            display: block;
            height: 20px;
            left: 50%;
            position: absolute;
        }

        span {
            background-color: $silver;
            border-radius: 25px;
            display: inline-block;
            padding: 0 10px;
        }
    }
}

.message {
    background-color: $gray-pastel;
    border: 1px solid rgba(175, 150, 150, .25);
    border-radius: 2px;
    box-shadow: 3px 3px 3px rgba(220, 220, 220, .2);
    display: inline-block;
    font-size: .875rem;
    margin-bottom: 1.5rem;
    padding-right: 1em;
    position: relative;
    width: 100%;

    .hashtag {
        background: $white;
    }

    .identicon {
        left: .75rem;
        position: absolute;
    }

    .title {
        background-color: rgba(175, 150, 150, .1);
        border-bottom: 1px solid rgba(175, 150, 150, .15);
        margin-bottom: .5rem;
        padding: .25rem .5rem;
    }

    .text p {
        font-size: .875rem;
        margin-bottom: 0;

        + p {
            margin-top: .5rem;
        }
    }

    .title,
    .timestamp,
    .file {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .actions,
    .text,
    .file {
        margin-bottom: .5rem;
    }

    .file {
        background: rgba(255, 255, 255, .7);
        border-radius: 2px;
        box-shadow: 1px 1px 2px rgba(150, 150, 150, .3);
        display: inline-block;
        padding: 1px 6px;

        ::before {
            @include icon('\f0c6');
            margin-right: .5ex;
        }
    }

    .actions,
    .text,
    .timestamp,
    .file {
        margin-left: 4rem;
    }
}

/*
    Ticket types
*/
.message-reservation,
.message-payment,
.message-event,
.message-directory,
.message-submission {
    background: lighten($green-pastel, 2.5%);
}

.message-ticket_note {
    background: lighten($yellow-pastel, 2.5%);

    .text {
        max-width: $max-line-width;
        overflow: auto;
        text-overflow: clip;
        white-space: normal;
    }
}

.message-ticket_chat-internal {
    background: lighten($blue-pastel, 3%);
}

.message-ticket_chat-external {
    background: darken($blue-pastel, 3%);
}

.message-file {
    background: lighten($red-pastel, 2.5%);
}

/*
    Timeline Messages Fly-In
*/
.messages-enter .message {
    opacity: 0;
    transform: translate3d(0, -250px, 0);
}

.messages-enter.messages-enter-active .message {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 1s ease;
    transition-duration: 300ms;
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(.175, .665, .320, 1), linear;
}

/*
    Directories
*/

.directories-map {
    height: $full-width-banner-height;
    margin-bottom: 1.4rem;
}

.directory-list.row {
    list-style-type: none;
}

/*
    Directory thumbnails
*/
.with-thumbnails {
    list-style-type: none;
    margin: 0;

    li {
        display: flex;

        .thumbnail {
            border-radius: 5px;
            flex: 2;
            margin-right: 1rem;
            overflow: hidden;
            position: relative;

            & + div {
                flex: 10;
            }

            img {
                border-radius: 5px;
                max-height: 150px;
                object-fit: cover;
                vertical-align: top;
                width: 100%;
            }
        }
    }
}

/*
    Formcode Toolbar
*/

.formcode-toolbar {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    text-align: right;
}

.formcode-toolbar-element {
    color: $body-font-color;
    position: relative;

    > span {
        display: inline-block;
        padding: 4px 8px;

        &:hover {
            background-color: $blue;
            color: $white;
        }
    }
}

.formcode-snippets {
    background: $white;
    border: 1px solid $gainsboro;
    box-shadow: 0 1px 7px rgba(0, 0, 0, .25);
    color: $body-font-color;
    display: table;
    font-size: .875rem;
    min-width: 150px;
    padding: 4px;
    position: absolute;
    right: 0;
    top: 29px;
    z-index: 100000;
}

.formcode-snippet {
    display: table-row;

    &:hover {
        background: $silver;
    }

    > * {
        display: table-cell;
    }
}

.formcode-snippet-title + .formcode-snippet .formcode-snippet-name,
.formcode-snippet-title + .formcode-snippet .formcode-snippet-action {
    border-top: 1px solid $gainsboro;
}

.formcode-snippet-title {
    color: $monsoon;
    display: cell;
    font-weight: 400;
    margin-top: .5rem;
    padding-left: 6px;
    text-align: left;
    text-transform: uppercase;
}

.formcode-snippet-title:first-child {
    margin-top: 0;
}

.formcode-snippet-name {
    padding: 2px 6px;
    text-align: left;
    white-space: nowrap;
}

.formcode-snippet-actions > *:first-child {
    margin-right: 1ex;
}

.formcode-snippet-required,
.formcode-snippet-optional {
    padding: 4px 5px 5px;
    visibility: hidden;
}

.formcode-snippet-required:hover {
    background-color: $red-light;
    color: $red-dark;
    outline: 1px solid $red-dark;
}

.formcode-snippet-optional:hover {
    background-color: $green-light;
    color: $green-dark;
    outline: 1px solid $green-dark;
}

.formcode-snippet:hover {
    .formcode-snippet-optional,
    .formcode-snippet-required {
        visibility: visible;
    }
}

/*
    Print Styles
*/
@media print {
    .globals,
    .alert-box,
    .calendar-day .calendar-day-thumbnail,
    .date-range-selector,
    .date-range-selector-result,
    .edit-bar,
    footer,
    .occurrence-exports,
    .occurrences-filter-tags,
    .page-links,
    .searchbox,
    .side-nav,
    div.push,
    .counts,
    .top-bar,
    .flash-message {
        display: none !important;
    }

    .side-panel {
        border: 1px solid $tuatara;
        border-radius: 3px;
        margin-bottom: .5rem;

        .field-display-block {
            float: left;
            margin-right: 1.5rem;
        }
    }

    html,
    body {
        height: 99%; // avoids blank pages at the end
    }

    body {
        font-size: 12px !important;
    }

    .field-display-block .field-display-label,
    .field-display-block .field-display-data,
    .field-display-block .field-display-data * {
        background-color: transparent;
        color: $body-font-color !important;
        font-size: 12px !important;
        margin: 0 !important;
        padding: 0;
    }

    .side-panel .ticket-number {
        display: block !important;
        line-height: 1.5 !important;
    }

    .ticket-summary h2,
    .ticket-timeline h2 {
        font-weight: bold;
    }

    .ticket-submitter-notification-status {
        display: none;
    }

    .ticket-summary {
        margin-bottom: 0;

        * {
            font-size: 12px !important;
        }

        ul {
            margin-bottom: 0;
        }
    }

    .ticket-panel *,
    .ticket-timeline * {
        font-size: 12px !important;
    }

    .ticket-panel {
        background: $white !important;
        display: flex;
        flex-wrap: wrap;
        padding: 0 !important;

        > * {
            margin: 0 1rem 0 0 !important;
        }

        > h2 {
            flex: 0 0 100%;
            margin-bottom: .25rem !important;
        }
    }

    .ticket-panel .button {
        display: none !important;
    }

    .timeline {
        * {
            font-size: 12px !important;
        }

        .identicon {
            height: 30px;
            margin-right: -10px;
            visibility: hidden;
            width: 10px;
        }

        .title {
            margin-bottom: 2px;
        }

        .text {
            margin-bottom: 2px;
        }
    }

    .payment-state {
        background: none !important;
        border: 0 !important;
        padding: 0 !important;
    }

    h1 {
        font-size: 1.6rem;
    }

    h2 {
        @include hairline;
        font-size: 1.2rem;
        margin-bottom: .25rem;
    }

    h3 {
        font-size: 1.1rem;
        margin-bottom: .15rem;
    }

    h4,
    h5,
    h6 {
        font-size: 1rem;
    }

    .header {
        max-height: 50px;
    }

    .logo {
        max-height: 40px;

        img,
        svg {
            max-height: 45px;
            width: auto;
        }
    }

    ul.breadcrumbs {
        padding: 0 0 .25rem 1rem;

        * {
            font-size: 9px;
        }
    }

    .occupancy-block {
        h2 {
            font-weight: bold;
        }

        .occupancy-entry {
            .date,
            .quota {
                font-weight: normal;
            }
        }

        * {
            font-size: 12px;
        }

        > .columns {
            margin-bottom: 0;
        }
    }

    .calendar-day {
        border-bottom: 2px solid $body-font-color !important;
    }

    .calendar-day-date {
        background: $white !important;

    }

    .calendar-day .calendar-day-date > * {
        background: $white !important;
        color: $body-font-color !important;
        padding-left: 0 !important;
    }
}

/*
    Custom record submission
*/
.submit-yours {
    @include panel;
    @include smooth-edges;

    padding: 1rem;

    i.unpublished-hint::before {
        width: 2ex;
    }

    h2 {
        color: $primary-color;
        display: inline;
        font-size: 1rem;
        font-weight: bold;
    }
}


/*
    Tags input
*/
.tags-input {
    @include form-element;
    height: auto;
    max-width: 100%;
    padding-bottom: calc(.5rem - 6px);

    .tag {
        background: $silver;
        border-radius: 2px;
        color: $body-font-color;
        cursor: pointer;
        display: inline-flex;
        flex-wrap: wrap;
        font: inherit;
        margin: 0 6px 6px 0;

        outline: 1px solid $gainsboro;
        padding: 0 4px;
        transition: all 100ms ease;
        user-select: none;

        &.selected {
            background-color: $blue;
            border-radius: 0;
            color: $white;
            outline-color: $blue-dark;
        }

        &.dupe {
            transform: scale3d(1.2, 1.2, 1.2);
        }
    }

    input {
        appearance: none !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        display: inline-block !important;
        flex: 1;
        font: inherit !important;
        font-size: 100% !important;
        height: auto !important;
        margin: 0 !important;
        outline: none !important;
        padding: 0 6px 6px 0 !important;
        width: auto;
    }

    .selected ~ input {
        opacity: .3;
    }
}

/*
    Hints
*/
.hints {
    @include hairline;

    margin: 0 0 .5rem;
    padding: 0 0 .5rem;
    position: relative;

    .hint-date::before { @include icon('\f133'); }
    .hint-count::before { @include icon('\f2c0'); }
    .hint-stop::before { @include icon('\f05e'); }

    .hint {
        margin-left: 1.5rem;
        padding-bottom: .25rem;

        &::before {
            display: inline-block;
            left: 0;
            margin-right: 1ex;
            margin-top: -1px;
            position: absolute;
            text-align: center;
            width: 1rem;
        }
    }
}

.panel .hints { // scss-lint:disable MergeableSelector
    border: 0;
    margin: 0;
    padding: 0;

    .hint:last-child {
        padding-bottom: 0;
    }
}

.hint {
    font-size: .875rem;
    line-height: 1.4rem;
}

/*
    Files list
*/
.files {
    // used for better performance
    table-layout: fixed;
    width: 100%;

    th {
        padding-top: 2rem;
    }

    tr:first-child th {
        padding-top: 1rem;
    }

    tr:first-child th,
    tr:first-child td {
        // controls the width of all columns due to the fixed table layout
        &:nth-child(1) {
            width: 60%;
        }

        &:nth-child(2) {
            width: 2.5%;
        }

        &:nth-child(3) {
            width: 5%;
        }

        &:nth-child(4) {
            width: 15%;
        }
    }

    th:last-child {
        text-align: right;
    }

    th span {
        @include circle;
        @include label($bg: $white);
        @include primary-color-background;

        border: 1px solid $primary-color;
        font-size: .875rem;
        font-weight: bold;
        text-align: right;
    }

    .file-info {
        td:nth-child(1) {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        td:nth-child(2) {
            text-align: center;
        }

        td:nth-child(3) {
            color: $monsoon;
            text-transform: uppercase;
            width: 32px;

            span {
                display: inline-block;
                padding: 1px 6px;
            }
        }

        &.signed td:nth-child(3)::after {
            @include icon('\f023');
            display: inline;
        }

        td:nth-child(4) {
            text-align: right;
            white-space: nowrap;
        }
    }

    .file-info + tr {
        background-color: $white;

        td {
            border-top: 1px solid $white;
            position: relative;
            top: -1px;
        }

        img {
            margin: .5rem 0 1rem;
        }

        .columns:last-child {
            text-align: right;
        }
    }
}

.file-actions a {
    display: block;
    margin-bottom: .5rem;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

/*
    Pdf Preview
*/
.pdf-preview {
    background: $white;
    box-shadow: 4px 4px 10px rgba(100, 100, 100, .4);

    max-height: 256px;
    max-width: 256px;
}

/*
    Icon widget customisation
*/
.icon-widget {
    li:hover,
    li.active {
        background: $primary-color !important;
        border-color: $primary-fg-color !important;
        color: $primary-fg-color !important;
    }
}

/*
    Upload
*/
.dropzone {
    @include prefix(transition, border 100ms ease-out);

    border: 1px dashed $gainsboro;
    display: flex;
    flex-direction: column;
    height: 10rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    text-align: center;

    &.drag-over {
        border-color: $anchor-font-color;
    }
}

.upload-filelist-header {
    margin-bottom: 1.5rem;
}

.upload-progress {
    margin-bottom: 1.5rem;

    .progress {
        margin-left: 25%;
        width: 75%;

        &::before {
            content: attr(data-filename);
            font-size: .875rem;
            left: 1rem;
            overflow: hidden;
            position: absolute;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 22.5%;
        }

        &.alert::after {
            color: $white;
            content: attr(data-error);
            font-size: .8rem;
            margin-left: .75ex;
            margin-top: -1.2rem;
            position: absolute;
        }
    }
}

/*
    File Status
*/
.file-status {
    margin-left: -2.75rem;
    padding-top: .35rem;

    h3 {
        color: $steel;
        font-size: .875rem;
        line-height: 1rem;
        margin: 0 0 .3rem;
        text-transform: uppercase;
    }
}

.file-status-tag {
    font-size: .875rem;
    line-height: 1rem;
    margin: .3rem 2rem .75rem 0;

    .alert-box {
        margin-bottom: .5rem;
        padding: 5px 10px 5px 7px;
        width: 100%;

        &::before {
            font-size: .875rem;
            line-height: 1;
            margin-right: 2px;
        }

        .close {
            padding-right: 2px;
        }
    }

    .fa {
        @include prefix(transition-duration, .5s);
        @include prefix(filter, blur(0));
    }

    > * {
        border-radius: 5px;
        display: inline-block;
        padding: 3px 5px 3px 3px;

        &.is-published {
            background: $green-pastel;
            color: $green-dark;
        }

        &.is-not-published {
            background: $red-pastel;
            color: $red-dark;
        }

        &.is-a-publication {
            background: $blue-light;
            color: $blue-dark;
        }

        &.is-not-a-publication {
            background: $gray-pastel;
            color: $black-light;
        }

        &.is-signed {
            background: $yellow-pastel;
            color: darken($orange-dark, 20%);
        }

        &.is-not-signed {
            background: $gray-pastel;
            color: $black-light;
        }

        .show-on-hover {
            display: none;
        }

        .hide-on-hover {
            display: inline;
        }
    }

    > *:hover {
        .hide-on-hover {
            display: none;
        }

        .show-on-hover {
            display: inline;
        }
    }
}

/*
    Signature
*/
.signature {
    margin-bottom: 1rem;
    padding-top: .01rem;
}

.signature-status {
    display: inline-flex;
    padding: 3px 5px 3px 3px;

    span {
        line-height: 1.4;
    }

    &.is-not-signed span {
        padding-left: 2px;
    }

    i {
        padding: 2px 8px 3px 3px;
    }
}

/*
    Publication
*/
.publication {
    display: flex;
    margin-bottom: .5rem;

    .publication-settings {
        display: flex;
        flex-wrap: wrap;
        margin-top: -1rem;
        width: 77.5%;

        legend {
            font-size: .8rem;
            font-weight: normal;
            margin-bottom: .5rem;
            margin-left: .25rem;
            text-align: left;
        }

        form {
            width: 100%;
        }

        fieldset {
            border: 1px solid $silver;
            border-radius: 3px;

            &::focus-within {
                border-color: $silver;
            }
        }

        .publication-settings-input {
            display: flex;
            padding: 0 0 0 1rem;

            > div {
                flex: 2 0 40%;
            }

            > select {
                flex: 0 0 25%;

                margin-left: .5rem;
                margin-right: .5rem;
            }

            > a {
                display: block;
                font-size: 1rem !important;
                margin-right: 1rem;
                margin-top: .5rem;
            }
        }
    }
}

.publication-date-not-set .publication-settings-input > a {
    visibility: hidden;
}

/*
    Signature / Publication Animations
*/
.ic-transitioning .file-status-tag .fa {
    @include prefix(transform, scale(1.25));
    @include prefix(transition, transform .5s ease-in);

    color: $white;
}

@keyframes oscillate-color {
    0% { opacity: .25; }
    50% { opacity: 1; }
    100% { opacity: .25; }
}

.signing .fa {
    animation: oscillate-color 1.5s infinite linear;
}

/*
    Publications
*/
.publication-group {
    margin-bottom: 2rem;

    &:first-child {
        margin-top: 1.5rem;
    }
}

.publication-item {
    display: flex;
    margin-bottom: 1rem;

    .pdf-preview {
        max-height: 96px;
        width: 64px;
    }

    > a {
        flex: 1;

        img {
            margin-right: 1rem;
            margin-top: .4rem;
        }
    }

    > ul {
        flex: 8;

        span {
            font-size: .875rem;
        }
    }

    .publication-title {
        font-weight: bold;
    }

    .publication-stats span {
        color: $steel;
        font-size: .8rem;
    }
}

.is-logged-out {
    .publication-info {
        display: none;
    }
}

.publication-info * {
    font-size: .875rem;
}

/*
    Filedigest results
*/
.filedigest-results {
    .digest-result {
        border-radius: 5px;
        display: flex;
        margin-bottom: .5rem;
        overflow: hidden;
        padding: 3px 5px 3px 3px;
        text-overflow: ellipsis;

        i {
            margin: 2px 4px 3px 3px;
        }

        &.digest-is-known {
            background: $green-pastel;
            color: $green-dark;
        }

        &.digest-is-not-known {
            background: $red-pastel;
            color: $red-dark;
        }
    }
}

/*
    Multiple dates in form
*/

.field-button {
    height: 27px;
    padding: 5px;
    text-align: center;
    width: 27px;

    + .field-button {
        margin-left: 10px;
    }
}

.many-fields .date-error {
    margin-top: 1rem !important;
}

.many-fields a.button {
    margin-bottom: 0;
}

/*
    Custom daypicker styling (we ignore upstream completely)
*/
.DayPicker {
    * {
        @include prefix(user-select, none);
        font-size: .875rem;
    }

    *:focus {
        outline: none;
    }

    .DayPicker-Day--past {
        color: $base;
    }

    [role="rowgroup"] {
        width: 100%;
    }

    [role="row"] {
        display: flex;

        > div {
            flex: 1 0;
            font-size: .875rem;
            height: auto;
            line-height: 2.25;
            position: relative;
            text-align: center;
        }

        > div:nth-child(6),
        > div:nth-child(7) {
            background: $white-smoke;
        }

        > [aria-selected="true"] {
            font-weight: bold;
        }

        > [aria-selected="true"]::after {
            background-blend-mode: difference;
            border-bottom: 3px solid $primary-color;
            bottom: 0;
            color: $primary-fg-color;
            content: '';
            display: block;
            height: 1.75rem;
            left: 0;
            margin: auto;
            position: absolute;
            right: 0;
            top: 0;
            width: 1.75rem;
        }
    }

    [role="columnheader"] * {
        border: 0;
        cursor: default;
        text-decoration: none;
        text-transform: uppercase;
    }

    [role="heading"] {
        text-align: center;

        div {
            display: inline-block;
            margin-bottom: .4rem;
        }
    }
}

.DayPicker-NavBar [role="button"] {
    &:hover {
        cursor: pointer;

        &::before {
            color: $anchor-font-color-hover;
        }
    }

    &::before {
        color: $anchor-font-color;
        font-family: "FontAwesome";
        line-height: 1.7;
        position: absolute;
        text-align: center;
        width: 8%;
    }

    &:first-child::before {
        content: '\f104';
        left: 4%;
    }

    &:last-child::before {
        content: '\f105';
        right: 4%;
    }
}

.DayPicker-NavButton--interactionDisabled {
    display: none;
}

/*
    Allocation rules
*/

.allocation-rules {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;

    .allocation-rule {
        background: $snow;
        border-radius: 2px;
        flex: 0 0 32.66%;
        margin-bottom: 1rem;
        margin-right: 1%;
        position: relative;

        &:nth-child(3n) {
            margin-right: 0;
        }
    }

    @media #{$small-only} {
        .allocation-rule {
            flex: 0 0 100%;
            margin-right: 0;
        }
    }

    .allocation-rule-details > div:first-child .field-display:first-of-type {
        dt {
            display: none;
        }

        dd {
            background: $silver;
            border-radius: 2px 2px 0 0;
            font-size: 1rem;
            font-weight: bold;
            left: -.5rem ;
            margin-bottom: -.25rem;
            padding: 0 8rem .2rem .5rem;
            position: relative;
            top: -.5rem;
            width: calc(100% + 1rem);
        }
    }

    .allocation-rule-details {
        padding: .5rem .5rem 0;

        * {
            font-size: .8rem;
        }

        h2 {
            display: none;
        }

        dd {
            margin-bottom: .25rem;
        }
    }

    .allocation-rule-actions {
        font-size: .8rem;
        position: absolute;
        right: .5rem;
        top: .275rem;
    }
}

/*
    Reservation
*/

.reservation-pending {
    color: #999;

    .has-tip {
        font-size: .8rem;
        vertical-align: text-bottom;
    }
}

/*
    Ticket panels
*/
.ticket-panel {
    background: $white-smoke;
    border-radius: 2px;
    margin-bottom: 1rem;
    padding: 1rem;

    * {
        font-size: .875rem;
    }

    h2 {
        font-size: 1rem;
        font-weight: bold;
        margin-top: -1px;
    }

    .button {
        display: block;
        font-size: .875rem;
        margin: .5rem 0 0;

        &::before {
            width: 1.28571429em;
        }
    }

    .field-display-block + .field-display-block {
        margin-top: .5rem;
    }

    .field-display-block + .button {
        margin-top: 1rem;
    }
}

.ticket-submitter {
    .ticket-submitter-meta {
        max-width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &.ticket-submitter-muted .ticket-submitter-notification-status > i::before {
        color: $red;
    }

    .ticket-submitter-notification-status > span {
        display: inline-block;
        margin-bottom: .5rem;
    }

    .ticket-submitter-notification-status .prevent-text-overflow {
        white-space: normal;
        display: inline;
    }
}

/*
    Ticket status page message adjustments
*/
.status-chat {
    .title {
        // use this instead of visibility:hidden or display:none - we do not
        // want this to bread by screen-readers, but we also want the element
        // to stick around so the line defined by ::before stays
        border: 0;
        height: 0;
        padding: 0;
        width: 0;
    }
}

/*
    Ticket counts
*/
.counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    list-style: none;
    margin: .5rem 0 -.75rem -.25rem;
    text-align: center;
    width: calc(100% + .5rem);

    > li {
        border: .25rem solid #f5f5f5;
        display: inline-block;
        flex-basis: 0;
        flex-grow: 1;
        line-height: 1.3;
        margin: auto;
        padding: 1ex;
        text-align: center;
        white-space: nowrap;

        * {
            font-size: .8rem !important;
        }
    }

    .counts-value {
        border-radius: 50px;
        display: inline-block;
        font-weight: bold;
        margin-right: .5ex;
        min-height: 2.6ex;
        min-width: 2.6ex;
        padding: 0 2px;
        text-align: center;
    }

    > .counts-note .counts-value {
        background: $yellow-light;
        color: #333;
    }

    > .counts-external .counts-value {
        background: $blue-dark;
        color: $white;
    }

    > .counts-internal .counts-value {
        background: $blue-light;
        color: #333;
    }
}

/*
    Hashtags
*/

.hashtag {
    border-radius: 3px;
    box-shadow: 1px 1px 2px $gray;
    display: inline-block !important;
    font-size: .875rem;
    font-weight: bold;
    padding: 0 4px;
}

.hashtag:empty {
    display: none;
}

.page-lead .hashtag {
    font-size: 1rem;
}

/*
    Footer partner
*/
.footer-partner {
    margin: 0 auto;
    max-width: $row-width;
    padding: 0 $column-gutter / 2;

    ul {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;

        li {
            background-color: $white;
            border: 1px solid #efefef;
            margin-right: $column-gutter / 2;
            padding: $column-gutter / 2;
            width: calc(25% - #{$column-gutter} / 8 * 3);
        }

        li:last-child {
            margin-right: 0;
        }

        @media #{$small-only} {
            li {
                margin-bottom: $column-gutter / 2;
                margin-right: 0;
                width: 100%;
            }
        }

        li.empty {
            background: transparent;
            border-color: transparent;
            height: 0;
            margin-bottom: 0;
            padding: 0;
        }
    }

    a {
        background-color: $white;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        display: block;
        height: 0;
        padding-top: 50%;
        width: 100%;
    }
}

/*
    Access hints
*/
.field-access {
    input + label::before {
        margin-right: 1ex;
        text-align: center;
        width: 2ex;
    }

    input[value="public"] + label::before {
        @include icon('\f06e');
        color: $blue-dark;
    }

    input[value="secret"] + label::before {
        @include icon('\f21b');
        color: $yellow-dark;
    }

    input[value="private"] + label::before {
        @include icon('\f023');
        color: $red-dark;
    }

    input[value="member"] + label::before {
        @include icon('\f0c0');
        color: $blue-dark;
    }

    input[value="mtan"] + label::before {
        @include icon('\f10b');
        color: $blue-dark;
    }

    input[value="secret_mtan"] + label::before {
        @include icon('\f10b');
        color: $yellow-dark;
    }
}


.secret-hint::before,
.private-hint::before,
.member-hint::before,
.mtan-hint::before,
.secret-mtan-hint::before,
.unpublished-hint::before {
    font-style: normal;
}

.secret-hint::before {
    @include icon('\f21b');
    color: $yellow-dark;
}

.private-hint::before {
    @include icon('\f023');
    color: $red-dark;
}

.member-hint::before {
    @include icon('\f0c0');
    color: $blue-dark;
}

.mtan-hint::before {
    @include icon('\f10b');
    color: $blue-dark;
}

.secret-mtan-hint::before {
    @include icon('\f10b');
    color: $yellow-dark;
}

.unpublished-hint::before {
    @include icon('\f070');
    color: $orange-dark;
}

/*
    Dashboard
*/

.boardlet {
    background: $gray-pastel;
    border-top: 10px solid $green-light;
    margin-bottom: 1.5rem;
    padding: .5rem 1rem 1rem;

    h2 {
        font-size: 1.3rem;
        font-weight: bold;
        text-align: center;
        word-wrap: break-word;
    }

    table {
        margin-bottom: 0;
    }

    tr {
        font-size: .9rem;

        &.zero {
            color: $base;
        }

        .facts {
            border-collapse: collapse;
            table-layout: auto;
        }

        .fact-number,
        .fact-icon {
            padding: 0.5rem;
            text-align: right;
        }

        .fact-icon {
            text-align: center;
        }

        .fact-text {
            margin-left: .5rem;
            width: 100%;
        }
    }

    &.boardlet-warning {
        border-top-color: $yellow-light;
    }

    &.boardlet-failure {
        border-top-color: $red-light;
    }
}

@media #{$medium-only} {
    .boardlet {
        width: calc(50% - 1rem);
    }
}


@media #{$small-only} {
    .boardlet {
        width: 100%;
    }
}

/*
    Publications of Directories
*/

.publication-nav {

    a.active {
        background-color: $primary-color;
        color: $primary-fg-color;
    }

    button {
        text-align: left;
        width: 100%;
    }
}

/* Utils */

.no-click {
    pointer-events: none;
}

/* link checker */

$link-status-icon: '\f29c';
$link-status-ok-icon: '\f058';
$link-status-nok-icon: '\f06a';

.link-status {
    color: $monsoon;
    overflow-x: hidden;
    white-space: nowrap;

    &::before {
        @include icon($link-status-icon);
    }

    &.ok {
        color: $success-color;

        &::before {
            @include icon($link-status-ok-icon);
            margin-right: .25em;
        }
    }

    &.nok {
        color: $alert-color;

        &::before {
            @include icon($link-status-nok-icon);
        }
    }
}

table.link-check-results,
table.link-check-stats {
    width: 100%;
}

/* Modal QR */

.qr-image {
    align-items: center;
    display: flex;
    flex-direction: column;

    img.qr {
        border: 5px solid $black;
        box-sizing: border-box;
    }

    a.button.qr {
        margin-top: 1.5em;
    }
}

/*
    Styles for inline js form on tickets page
*/

#edit-ticket-amount {
    cursor: pointer;
    margin-left: .25em;
}

#confirm-ticket-amount {
    cursor: pointer;
    font-size: 120%;
    margin-left: .25em;
}

.ticket-payment-amount {
    input {
        display: inline-block;
        width: 50%;
    }
}

/*
    Styles for form macro inside modal
*/
.reveal-modal form {
    .columns {
        padding-left: 0 !important;
    }
}

$pageref-icon: '\f292';
$pageref-color: $topbar-link-bg-hover;
$pageref-color-hover: $iron;

.pageref {
    color: $pageref-color;
    cursor: pointer;
    display: inline-block;
    font-size: 70%;
    transition: color 250ms;
    z-index: 1;

    &:hover,
    &:focus {
        color: $pageref-color-hover;
    }

    &::after {
        @include icon($pageref-icon);
    };
}

/*
 Status field fixed to show temporary message
*/

.flash-message {
    background-color: $black-light;
    bottom: 0;
    color: $white;
    font-size: 80%;
    max-width: 200px;
    padding: .5rem 1rem;
    position: fixed;
    right: 0;
    text-align: center;
    white-space: nowrap;
}

/*
    Sort topics
*/
.sort-items {
    list-style: none;
    margin-left: 0;

    li {
        background: #f5f5f5;
        border: 1px dashed #ddd;
        cursor: grab;
        margin-bottom: 1em;
        padding: .25rem .5rem;

        &::before {
            color: #999;
            content: '\f0dc';
            display: inline-block;
            font-family: 'FontAwesome';
            font-weight: bold;
            width: 1.5ex;
        }
    }
}

/*
    External links
*/
a > i.fa-external-link-alt {
    margin-left: .3rem;
}

/*
    Accessibility
*/
.visually-hidden {
    @include element-invisible;
}

/*
    Reservation list
*/
a#results {
    display: block;
    position: relative;
    top: -7rem;
    visibility: hidden;
}

.reservation-list {

    /* HACK: Overflow clipping is broken in Chromium when scrolling
             for all the not-selected events due to the use of opacity
             and/or filter. So we use a filter on the container element
             to fix this. This is dumb, but this bug has been around for
             almost a decade and still hasn't been fixed... */
    filter: blur(0);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    position: relative;
    /* NOTE: Since we allow shift as a modifier key, text-selection would
             become annoying, rather than helpful. */
    user-select: none;

    table {
        margin-bottom: 0;

        tr {
            scroll-margin-top: 7rem;  // sass-lint:disable-line no-misspelled-properties
            scroll-snap-margin-top: 7rem;
        }

        th:first-child {
            background-color: #fff;
            left: 0;
            position: sticky;
            text-align: center;
            white-space: nowrap;
            width: 0;
            z-index: 1;
        }

        thead th:first-child {
            background-color: #f9f9f9;
        }

        tbody tr:nth-child(even) th:first-child {
            background-color: #f2f2f2;
        }

        .event {
            border: 0;
            border-radius: 2px;
            color: #fff;
            margin-bottom: 2px;
            padding: 2px 4px;
            white-space: nowrap;

            &:last-child {
                margin-bottom: 0;
            }

            &.selected {
                background-image: repeating-linear-gradient(
                    45deg,
                    rgba($steel, .25),
                    rgba($steel, .25) 10px,
                    rgba($iron, .25) 10px,
                    rgba($iron, .25) 20px
                );
                cursor: default;

                &.event-available.event-adjustable {
                    cursor: pointer;
                }
            }

            &.not-selected:not(:hover) {
                filter: grayscale(.75);
                opacity: .75;
            }
        }

        .event-unavailable {
            background-color: $red;
            cursor: not-allowed;
        }

        .event-partly-available {
            background-color: $orange;
            cursor: pointer;
        }

        .event-available {
            background-color: $green;
            cursor: pointer;
        }

        .event-adjustable::before {
            float: right;
            color: white;
            font-size: 1.5rem;
            @include icon($edit-link-icon);
        }
    }
}

.find-your-spot-link {
    border-bottom: 0 !important;
    margin-left: 1rem;

    i.fa-calendar {
        font-size: 1.8rem;
    }
}

#fieldset-header_links {
    .field-button {
        margin-top: 0 !important;
    }

    small.error {
        display: block !important;
        margin-top: .5rem;
    }
}

#fieldset-header-fixation {
    display: none;
}

#header_links {
    .toggle-topbar {
        left: 0;
        right: 0;

        span {
            color: #666 !important;
        }
    }

    .title-bar,
    button {
        color: $editbar-bg-color;
    }

    #quicklinks-submenu {
        li {
            border-left: 1px solid $editbar-bg-color;

            a {
                color: #666;
                padding: .5rem;
                text-transform: none;
            }
        }
    }

    & * {
        background: transparent;
    }
    @media #{$small-only} {
        ul.menu {
            display: block;
        }

        #quicklinks-submenu li {
            border-left: 0;
            border-top: 1px dashed $editbar-bg-color;
        }
    }
}

.page-image {
    padding-bottom: 1rem;
}

/* Hide page-image form field on topic-forms */
[id^="page-editor-edit-page"] .field-page_image,
[id^="page-editor-edit-link"] .field-page_image {
    display: none;
}

.videowrapper {
    position: relative;
    height: 0;
    padding-bottom: 45%;
}

.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.iframe-panel {
    border: 1px solid $gray;
    padding: 1rem;
}

.survey-definition {
    #formcode-snippet-date-and-time,
    #formcode-snippet-date,
    #formcode-snippet-time,
    #formcode-snippet-files,
    #formcode-snippet-image,
    #formcode-snippet-document,
    #formcode-snippet-extended,
    #formcode-snippet-iban,
    #formcode-snippet-swiss-social-security-number,
    #formcode-snippet-swiss-business-identifier,
    #formcode-snippet-swiss-vat-number,
    #formcode-snippet-markdown {
        display: none;
    }
}

.no-list-div {
    ul li {
        list-style: none;
    }
}


/*
    Code Block, Code Inline, Code

    <pre><code>...</code></pre>
*/

$code-background: #f5f5f5;
$code-border-radius: 4px;
$code-padding-block: 0.5rem;
$code-padding-inline: 0.125rem;
$code-block-margin-bottom: 0.8rem;

pre code,
.code-block,
.code-inline,
code {
    background: $code-background;
    border-radius: $code-border-radius;
}

pre code,
.code-block {
    padding: $code-padding-block;
    margin-bottom: $code-block-margin-bottom;
    display: block;
}

.code-inline,
code {
    padding: $code-padding-inline;
    display: inline;
}