/*
    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%);
}
// scss-lint:enable all

@mixin hairline() {
    border: 0;
    border-bottom: 1px solid transparentize($primary-color, .8);
}

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

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

@mixin icon($icon) {
    content: $icon;
    font-family: 'FontAwesome';
    font-weight: normal;
}

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

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

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

    (100vw includes the scrollbar, 100% does not)
*/
html {
    @media not print {
        margin-left: calc(100vw - 100%);

        /* override the redactor style set on the body, which leads to
           jumpy modal dialogs
        */
        overflow: auto !important;
        padding-right: 0 !important;
    }
}

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

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

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

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

    h2 {
        margin-bottom: 13px;
    }

    * {
        font-size: 13px;
        line-height: 19px;
    }
}

/*
    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;
    border-bottom: $top-bar-border-size solid $primary-color;
    margin-bottom: .1rem;
}

.top-bar {

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

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

.alert-box {
    border-color: scale-color($primary-color, $lightness: $alert-function-factor);
    border-left: 3rem solid;
    padding: .5rem 1.5rem .875rem .875rem;
    vertical-align: middle;

    &::before {
        font-size: 1.5rem;
        line-height: .8;
        margin-left: -3.1rem;
        margin-top: 1rem;
        padding-right: 1.5rem;
        position: relative;
        top: .25rem;
    }

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

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

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

    // fix text wrapping to a seaprate new line in a label following a checkbox
    input[type="checkbox"] + label {
        max-width: 90%;
        vertical-align: text-top;
    }

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

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

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

/*
    links at the absoulte bottom
*/
.bottom-links {
    color: $bottom-links-color;
    list-style: none;
    margin-left: 0;

    a {
        color: $bottom-links-color;
        font-size: $bottom-links-size;

        &:hover {
            text-decoration: underline;
        }
    }

    li {
        color: $bottom-links-color;
        display: inline;
        font-size: $bottom-links-size;
    }

    li:after {
        content: '|';
    }

    li:last-child:after {
        content: '';
    }
}

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

/*
    homepage tiles
*/

.homepage-tile {
    line-height: 1rem;
    margin-bottom: 1.375em;
    overflow: hidden;
    text-overflow: ellipsis;

    h3 {
        font-size: 1rem;
        margin-bottom: 0;
    }

    .tile-sub-link {
        font-size: $bottom-links-size;
    }

    .tile-sub-link:hover {
        text-decoration: underline;
    }

    .tile-sub-link:after {
        color: transparentize($primary-color, .8);
        content: ' | ';
        display: inline-block;
        margin-left: .6ex;
        margin-right: .6ex;
    }

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

    .tile-image {
        @include smooth-edges;

        background-position: center center;
        background-size: cover;
        display: block;
        height: 5rem;
        width: 100%;
    }

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

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

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

/*
    panels
*/

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

.homepage-links-panel,
.page-content-panel {
    background-color: $topbar-bg-color;
    margin-bottom: 1.5em;
    padding: 1em;

    /* add dots for oveflowing links */
    a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    h2 {
        font-size: 1em;
        font-weight: normal;
        margin-top: 0;
    }

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

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

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

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

        }

        li {
            margin-bottom: .5em;
        }

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

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

    &.contact-panel {
        ul {
            list-style-type: none;
        }

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

        li {
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 0;
            min-height: 1rem;
        }
    }
}

/*
    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-subscribers: '\f0c0';
$new-daypass-icon: '\f145';
$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-reservation-icon: '\f271';
$new-room-icon: '\f015';
$paste-link-icon: '\f0ea';
$send-link-icon: '\f1d9';
$occupancy-link-icon: '\f022';

.edit-bar {
    background-color: $primary-color;
    margin-bottom: 2px;
    margin-top: -6px;

    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-subscribers:before { @include icon($manage-subscribers); }
    .new-daypass:before { @include icon($new-daypass-icon); }
    .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-reservation:before { @include icon($new-reservation-icon); }
    .new-room:before { @include icon($new-room-icon); }
    .paste-link:before { @include icon($paste-link-icon); }
    .send-link:before { @include icon($send-link-icon); }
    .occupancy-link::before { @include icon($occupancy-link-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"] {
        font-size: .875rem;
    }

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

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

/*
    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-top: -.5rem;
}

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

/*
    page text
*/

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

    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;

        // image subtitles
        span {
            background-color: $vapor;
            color: $monsoon;
            display: block;
            font-size: .875rem;
            padding: .25em .75em;
        }
    }

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

    li {
        line-height: 1rem;
    }
}

@media #{$small-only} {
    .breadcrumbs li {
        float: none;

        &::before {
            margin-left: 0;
        }
    }
}

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

/*
    sticky footer
*/

.footer {
    // 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 1rem;

    h2,
    div {
        color: $topbar-link-color;
        font-size: $topbar-link-font-size;
    }

    h2 {
        font-weight: bold;
    }

    .bottom-links {
        margin-bottom: .25rem;
        padding: .25rem 0;
        text-align: right;
    }

    .footer-links > div {
        padding-right: 0;
    }

    .footer-columns {
        background-color: $topbar-bg-color;
        padding-bottom: 1rem;
        padding-top: 1rem;
    }
}

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

/*
    news list
*/

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

    a h2,
    a h3 {
        color: $side-nav-link-color;
        font-size: $h3-font-size - $h3-font-reduction;
        margin-bottom: .5rem;
    }

    a:hover h2,
    a:hover h3 {
        color: $side-nav-link-color-hover;
    }

    .news-date {
        color: $monsoon;
        font-size: $bottom-links-size;
        margin-bottom: .5rem;
    }

    .news-lead,
    .news-continue {
        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: 1em;
}

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

/*
    hide the news in the topbar
*/

.top-bar-section li:last-child {
    display: none;
}

/*
    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 .1rem,
        $text-size: 1rem,
        $bg: $ticket-number-bg,
        $radius:4px
    );
    font-family: $font-family-monospace;
}

.ticket-date {
    color: $monsoon;
}

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

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

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

/*
    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);
    padding-right: .8ex;
}

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

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

.ticket-filter-all::before {
    @include icon($all-ticket-icon);
    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 {
        @incude 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 {
    border-radius: 3px;
    max-height: 400px;
    max-width: 275px;
    overflow-x: hidden;
    overflow-y: scroll;

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

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

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


/*
    Ticket counter in header
*/

.ticket-count {
    margin-bottom: .875rem;
    margin-top: .875rem;
    text-align: right;

    a:hover .text {
        text-decoration: underline;
    }

    * {
        color: $steel;
    }

    div,
    span {
        display: inline-block;
        font-size: .875rem;
        line-height: .875rem;
    }

    > div {
        margin-left: .25em;

        :first-child {
            margin-left: 0;
        }

        .number {
            background-color: $white-smoke;
            border-radius: 50px;
            height: 1.3em;
            line-height: 1.3em;
            min-width: 1.3em;
            padding: 0 4px;
            text-align: center;
        }
    }

    .ticket-count-open {
        &.highlight {
            .number {
                background-color: $alert-color;
                color: $white;
            }

            .text {
                color: $black;
            }
        }
    }

    .ticket-count-pending {
        &.highlight {
            .number {
                background-color: $blue-dark;
                color: $white;
            }

            .text {
                color: $black;
            }
        }
    }
}

@media #{$small-only} {
    .ticket-count {
        text-align: center;
    }
}

/*
    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;
        width: 80%;

        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,
            #666,
            #666 10px,
            #bbb 10px,
            #bbb 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: #ddd;
        }
    }

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

/*
    A box rendering the following structure as a calendar-like box:

    <h2 class="calendar-day-box">
        <span>Wednesday</span>
        <span class="day">11</span>
        <span>March</span>
    </h2>
*/
.calendar-day-box {
    width: 100%;

    @media #{$small-up} {
        font-weight: bold;
        padding: 0;

        span {
            font-size: 1.3rem;
        }
    }

    @media #{$large-up} {
        background-color: $white-smoke;
        font-weight: normal;
        padding: .5em 0;

        span {
            display: block;
            font-size: 1rem;
            text-align: center;

            &.dot {
                display: none;
            }

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

/*
    Events
*/

.occurrence {
    margin-bottom: 2rem;

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

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

.occurrence-tag {
    @include label(
        $bg: $secondary-color,
        $radius: 4px
    );

    &.active {
        @include label(
            $radius: 4px
        );
    }

    a {
        color: inherit;
    }
}

.date-range-selector-result {
    margin-bottom: 1em;

    span:first-child {
        font-size: 1.6em;
        font-weight: bold;
    }
}

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

.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-date {
    font-size: .8em;
}

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

    margin-bottom: 1.5em;

    h2 {
        font-size: 1rem;
    }
}

.occurrence-occurrences {
    h2 {
        font-size: 1rem;
    }
}

/*
    Popup Menu
*/
.popup {
    background-color: #fff;
    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: #fff;
            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: #fff;
            border-width: 7px;
        }

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

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

    .logged-in .searchbox {
        margin-top: 0;
    }
}

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

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

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

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

@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 {
    @include label(
        $bg: $secondary-color,
        $radius: 4px
    );
    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;
    }
}

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

    .page-content-panel {
        border: 1px solid $tuatara;
        border-radius: 3px;
    }

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

    // tickets status panel
    .page-content-panel {
        margin-bottom: .5rem;

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

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