/*
    useful mixins
*/

// scss-lint:disable all
// the scss linter completely looses it with this one
@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;
}
// scss-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;
    font-family: 'FontAwesome';
    font-weight: normal;
    width: 1.5ex;
    display: inline-block;
}

@mixin prefix ($prop, $val) {
    -webkit-#{$prop}: #{$val};
    -moz-#{$prop}: #{$val};
    -ms-#{$prop}: #{$val};
    #{$prop}: #{$val};
}

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

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

/*
    Zurb foundation uses this without !import, which causes IE11 to not
    apply the placeholder color.
*/
:-ms-input-placeholder {
   color: $input-placeholder-font-color !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);
}

/*
    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 sticky, which is no easy feat, since variable length
    sticky footers don't work with anything but the latest browsers (flex)

    however, sticky footers work just fine if you know the height of the footer

    since we have semi-variable content in the footer (it can change, but not
    often), we read the height of the footer if the settings page is open
    and write the footer height into the custom theme variables

    see common.js for the oneliner that does that (look for footer_height)
*/

html,
body {
    height: 100%;
}

/*
    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;
}

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

#global-tools {
    @include primary-color-background;
    margin-bottom: $global-tools-margin;
    min-height: $global-tools-height;
    width: 100%;

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

        > 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: $global-tools-height;
                line-height: $global-tools-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;
    }

    .login:before { @include icon('\f090'); }
    .logout:before { @include icon('\f08b'); }
    .register:before { @include icon('\f234'); }
    .user:before { @include icon('\f2bd'); }
    .users:before { @include icon('\f0c0'); }
    .profile:before { @include icon('\f2c3'); }
    .management:before { @include icon('\f013'); }
    .images:before { @include icon('\f03e'); }
    .files:before { @include icon('\f016'); }
    .settings:before { @include icon('\f1de'); }
    .no-tickets:before { @include icon('\f145'); }

    .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;
    }
}

#inner-body {
    margin: 0 auto -$footer-height;

    @media not print {
      min-height: 100%;
    }
}

.header {
    // the header is fixed and the logo in it tries to fill it out
    // therefore an svg logo should be used!
    height: 7em;
    margin-bottom: $global-tools-margin;

    img {
        height: 7em;
    }
}

@media not print {
    footer,
    .push {
        @include prefix(animation-duration, 3s);
        height: $footer-height; /* .push must be the same height as .footer */
    }
}

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

/*
    blank (uncolored) labels
*/
.blank-label {
    @include label($bg: $white);
    border: 1px solid $gray;
    margin: 0 4px 6px 0;

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

    a {
        color: inherit;
    }
}

// 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 {
    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;
    }

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

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

@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;
    list-style-type: none;
    margin: 0;
}

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

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

/*
    Dense lists
*/
.dense {
    list-style: none;
    margin: 0;
    padding: 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;
}

.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';

.alert-box {
    border: 0;
    padding: .75rem 1.5rem .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 > ul,
    .upload-widget > ul,
    .group-label > ul {
        list-style: none;

        margin: 0;
        margin-bottom: 1rem;

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

    > input[type="submit"] {
        margin-top: .4rem;
    }

    .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-bottom: .2rem;
            margin-left: 0;
            max-width: 75%;
            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;
    }

    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: 1rem;
            padding: 0 .75rem;
            text-align: center;
        }
    }

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

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

    .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;
        }
    }

    /*
        Password quality meter
    */
    meter {
        -webkit-appearance: none;
        background: $input-border-color !important;
        border: 0;
        height: 10px;
        position: relative;
        top: -1.55rem;
        width: 100%;
    }

    label.error > meter {
        top: -.55rem;
    }

    meter::-webkit-meter-bar {
        background: $input-border-color !important;
        border: 0;
    }

    meter::-webkit-meter-optimum-value {
        background: $success-color;
    }

    meter::-webkit-meter-suboptimum-value {
        background: $warning-color;
    }

    /*
        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: 1em;
        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-syntax-error {
        background: $yellow-light;
        position: absolute;
    }
    /*
    <--
    */
}

/*
    homepage tiles images
*/

#homepage-tile-1 .tile-image { background-image: url(#{$tile-image-1});}
#homepage-tile-2 .tile-image { background-image: url(#{$tile-image-2});}
#homepage-tile-3 .tile-image { background-image: url(#{$tile-image-3});}
#homepage-tile-4 .tile-image { background-image: url(#{$tile-image-4});}
#homepage-tile-5 .tile-image { background-image: url(#{$tile-image-5});}
#homepage-tile-6 .tile-image { background-image: url(#{$tile-image-6});}

/*
    Hide the spam bot honeypot field
*/
.field-roboter_falle {
    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;
}

.field-display {
    margin-bottom: .5em;

    .field-display-data {
        margin-bottom: 1rem;
    }
}

.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 {
        margin-bottom: .2em;
        max-width: $max-line-width;
    }
}

/*
    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
*/

.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-image {
        background-position: center center;
        background-size: cover;
        display: block;
        height: 7rem;
        width: 100%;
    }

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

    .tile-link:hover .tile-image {
        @include grayscale;
    }
}

/*
    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;
    }
}

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

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

        + .marker-map {
            margin: 1rem 1rem 0;
        }

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

    > ul {
        list-style-type: none;
        margin: 0;
        padding: .5rem 1rem .75rem;

        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 {
        border-bottom: 1rem solid $white;
        box-sizing: content-box;
        margin: -1rem 1rem 1rem;

        a {
            font-size: 10px;
        }
    }

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

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

    .marker-map {
        border-bottom: 1rem solid $topbar-bg-color;
    }

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

    &.without-title {
        > ul {
            padding: 0 0 1rem;

            li:first-child {
                @include primary-color-background;
                margin-bottom: 1rem;
                padding: .75rem 1rem;
                text-transform: uppercase;
            }

            li {
                min-height: .5rem;
                padding: 0 1rem;

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

/*
    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';
$export-link-icon: '\f019';
$file-link-icon: '\f0c6';
$image-link-icon: '\f03e';
$internal-link-icon: '\f0c1';
$manage-recipients: '\f003';
$manage-subscribers: '\f0c0';
$new-daypass-icon: '\f145';
$new-recipient: '\f1fa';
$new-form-icon: '\f044';
$new-link-icon: '\f0c1';
$new-news-icon: '\f1ea';
$new-newsletter-icon: '\f003';
$new-page-icon: '\f0f6';
$new-person-icon: '\f007';
$new-photo-album: '\f03e';
$new-reservation-icon: '\f271';
$new-room-icon: '\f015';
$new-user-icon: '\f234';
$paste-link-icon: '\f0ea';
$select-icon: '\f14a';
$send-link-icon: '\f1d9';
$occupancy-link-icon: '\f022';
$upload-icon: '\f0ee';

$editbar-bg-color: $topbar-link-bg-hover;

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

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

        &.dropdown {
            padding-right: 2rem;

            &::after {
                border-color: $body-font-color transparent transparent;
                right: .875rem;
            }
        }

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

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

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

    > a {
        margin-bottom: 0;
    }

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

    a:before {
        display: inline-block;
        margin-right: 5px;
        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); }
    .export-link:before { @include icon($export-link-icon); }
    .file-url:before { @include icon($file-link-icon); }
    .image-url:before { @include icon($image-link-icon); }
    .internal-url:before { @include icon($internal-link-icon); }
    .manage-recipients:before { @include icon($manage-recipients); }
    .manage-subscribers:before { @include icon($manage-subscribers); }
    .new-daypass:before { @include icon($new-daypass-icon); }
    .new-recipient:before { @include icon($new-recipient); }
    .new-form:before { @include icon($new-form-icon); }
    .new-link:before { @include icon($new-link-icon); }
    .new-news:before { @include icon($new-news-icon); }
    .new-newsletter:before { @include icon($new-newsletter-icon); }
    .new-page:before { @include icon($new-page-icon); }
    .new-person:before { @include icon($new-person-icon); }
    .new-photo-album:before { @include icon($new-photo-album); }
    .new-reservation:before { @include icon($new-reservation-icon); }
    .new-room:before { @include icon($new-room-icon); }
    .new-user:before { @include icon($new-user-icon); }
    .paste-link:before { @include icon($paste-link-icon); }
    .select:before { @include icon($select-icon); }
    .send-link:before { @include icon($send-link-icon); }
    .occupancy-link::before { @include icon($occupancy-link-icon); }
    .upload::before { @include icon($upload-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;
}

/*
    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;
    }
}

/*
    dropzone styling
*/
.dropzone {
    background-color: $topbar-bg-color;
    border: 1px dashed $primary-color;
    margin-bottom: 1rem;
    padding: 1rem;

    .dz-message {
        margin-bottom: 1em;
    }

    .dz-preview {
        float: left;
        margin-right: 1rem;
    }

    .dz-success-mark,
    .dz-error-mark {
        display: none;
    }

    .dz-progress {
        display: block;
        height: 5px;
        width: 100%;

        > span {
            background-color: $info-color;
            display: block;
            height: 5px;
        }
    }

    .dz-success {
        .dz-progress span {
            background-color: $success-color;
        }

        .dz-size::after {
            content: ' \f00c';
            font-family: 'FontAwesome';
        }
    }

    .dz-error {
        .dz-progress span {
            background-color: $alert-color;
        }

        .dz-size::after {
            content: ' \f071';
            font-family: 'FontAwesome';
        }
    }

    .dz-error-message {
        color: $steel;
        font-size: rem-calc(12);
        margin: 1em 0;
    }

    .dz-filename {
        font-size: rem-calc(12);
        margin-bottom: .5em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 125px;
    }

    > div:last-child {
        margin-bottom: 0;
    }
}

/*
    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;
}

/*
    confirm dialog styling
*/
.confirm-modal .button {
    margin-right: 1rem;
    margin-top: 1rem;
}

/*
    main title
*/

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

/*
    page lead
*/
.page-lead {
    display: block;
    font-size: $h5-font-size;
    font-weight: 300;
    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;
    }

    .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;
    padding-bottom: .7rem;
    padding-left: 1rem;

    li {
        line-height: 1rem;
    }
}

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

        li {
            float: none;
            padding-left: 0;

            + 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: 3px;
}

.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;
}

/*
    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: '/';
        }
    }
}

.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;
}

/*
    the icon hinting at pages being hidden from the public
*/
$hidden-page-icon: '\f070';

.hidden-from-public-hint:before {
    @include icon($hidden-page-icon);
    color: $alert-color;
}

/*
    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-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 {
            @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;
            margin-bottom: 1em;
        }
    }
}

/*
    Person card in lists
*/

.person-list-card {
    .person-card-portrait {
        @include circle;

        height: 5rem; // enough to show three lines of text
        text-align: center;
        width: 5rem;

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

    > a {
        float: left;
        margin-right: 1em;
    }

    ul {
        float: left;

        > 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;
$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 .25rem,
        $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
    );
}

/*
    Tickets list
*/
$accept-ticket-icon: '\f1db';
$accept-ticket-icon-hover: '\f192';
$close-ticket-icon: '\f1db';
$close-ticket-icon-hover: '\f05d';
$reopen-ticket-icon: '\f1db';
$reopen-ticket-icon-hover: '\f192';
$all-handler-icon: '\f069';
$frm-handler-icon: '\f044';
$rsv-handler-icon: '\f073';
$evn-handler-icon: '\f133';
$open-ticket-icon: '\f10c';
$pending-ticket-icon: '\f192';
$closed-ticket-icon: '\f05d';
$all-ticket-icon: '\f055';

.ticket-filter-open::before {
    @include icon($open-ticket-icon);
    margin-right: 1ex;
    padding-right: .8ex;
}

.ticket-filter-pending::before {
    @include icon($pending-ticket-icon);
    margin-right: 1ex;
    padding-right: .8ex;
}

.ticket-filter-closed::before {
    @include icon($closed-ticket-icon);
    margin-right: 1ex;
    padding-right: .8ex;
}

.ticket-filter-all::before {
    @include icon($all-ticket-icon);
    margin-right: 1ex;
    padding-right: .8ex;
}

.tickets-table {
    width: 100%;

    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 {
            margin: 0;
        }

        dl dd {
            margin-left: 0;
        }

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

        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); }

.ALL-link::before,
.FRM-link::before,
.RSV-link::before,
.EVN-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;
}

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

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

.ticket-accept {
    float: right;

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

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

.ticket-close {
    float: right;

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

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

.ticket-reopen {
    float: right;

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

    &:hover::before {
        @include icon($reopen-ticket-icon-hover);
        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;
    }

    // extra space for the last row in each week-row, improves the auto-height
    // based rendering of the calendar
    .fc-row .fc-content-skeleton tbody tr:last-child a {
        margin-bottom: .75rem;
    }

    .fc-event-container:last-child {
        margin-bottom: .5rem;
    }

    .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;
        }

        .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;
        }

        &.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;
        }
    }
}

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

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

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

    .fc-view-container {
        margin-bottom: 0;
    }
}

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

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

/*
    Calendar day display
*/
.calendar-day {
    background-color: $topbar-bg-color;
    padding: .75rem 0 0;
    width: 100%;

    > div {
        text-align: center;
    }

    .day {
        font-size: 2.75rem;
        font-weight: bold;
    }

    .month {
        font-size: .875rem;
        padding: .5rem 0 1rem;
    }

    .weekday {
        @include primary-color-background;
        font-size: .7rem;
        padding: .5rem 0;
        text-transform: uppercase;
    }
}

/*
    Events
*/

.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;
    }
}

.occurrence-map {
    margin-bottom: 2rem;
}

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

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

.occurrences-add-box {
    @include panel;
    @include smooth-edges;

    margin-top: 2em;
    padding: 1rem 1rem .5rem;

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

.occurrence-tags,
.occurrence-description {
    margin-bottom: 1.25em;
}

.occurrence-description {
    max-width: $max-line-width;
}

.occurrence-exports {
    @include panel;
    @include smooth-edges;

    margin-bottom: 1.5em;

    h2 {
        display: block;
        font-size: .875rem;
        margin-bottom: .875rem;
    }
}

.occurrence-occurrences {
    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;
        }
    }
}

/*
    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 {
    margin-bottom: 1rem;

    input {
        margin-bottom: 0;
    }

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

@media #{$medium-up} {
    .header .searchbox {
        margin-top: 2.25rem;
    }
}

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

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

    > li {
        margin-bottom: 1em;
    }
}

.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;

        // 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;
        }
    }
}

/*
    The list of people on the form view can swell to a large number. For now
    we limit the size of this list. In the future we might replace it with
    a better way of doing this.
*/
#fieldset-people > div {
    border: 1px solid $iron;
    border-color: $iron;
    border-style: solid;
    border-width: 1px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 1em;
}

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

/*
    A-Z Blocks
*/

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

@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: 300;
    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;
}

/*
    Reservation calendar
*/
.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-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 {
        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 {
            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 selection responsive
*/

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

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

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

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

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

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

    .fc-view-container {
        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;
    }
}

/*
    Reservations list in ticket summary
*/
.ticket-summary .reservations {
    list-style: none;
    margin: 0;

    li {
        margin-bottom: 1.5rem;
    }
}

/*
    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;
            }
        }
    }
}

/*
    Print Styles
*/
@media print {
    #global-tools,
    .alert-box,
    .date-range-selector,
    .date-range-selector-result,
    .edit-bar,
    .footer,
    .occurrence-exports,
    .occurrences-day-date,
    .occurrences-filter-tags,
    .page-links,
    .searchbox,
    .side-nav,
    div.push,
    .top-bar {
        display: none;
    }

    .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 * {
        background-color: transparent;
        color: $body-font-color;
        font-size: 12px;
        margin: 0 !important;
        padding: 0;
    }

    .ticket-summary {
        * {
            font-size: 12px;
        }

        ul {
            margin-bottom: 0;
        }
    }

    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;
        }
    }
}

/*
    Usermanagement
*/

.user-inactive td {
    color: $base;
}

.usermanagement {
    .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: 333px;

    li {
        @include smooth-edges;

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

        height: 333px;
    }

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