/*
    useful mixins
*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
    The bank settings are hidden by default, they are currently only used
    for onegov.feriennet and should probably replaced by something feriennet
    specific.
*/
#page-settings #fieldset-payment {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .row > .columns > 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: $globals-height;
                line-height: $globals-height;
                padding: 0 .5rem;

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

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

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

    .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'); }
    .payment::before { @include icon('\f09d'); }
    .payment-provider::before { @include icon('\f283'); }
    .profile::before { @include icon('\f2c3'); }
    .management::before { @include icon('\f013'); }
    .images::before { @include icon('\f03e'); }
    .files::before { @include icon('\f016'); }
    .settings::before { @include icon('\f1de'); }
    .timeline::before { @include icon('\f017'); }
    .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!
    align-items: center;
    display: flex;
    height: 7em;
    justify-content: center;
    margin-bottom: $globals-margin;

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

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

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

    img {
        height: 7em;
    }
}

@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;
    font-size: .8rem;
    margin: 0 4px 7px 0;

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

    a {
        color: inherit;
    }
}

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

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

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

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

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

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

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

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

    .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 0 1rem;
}

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

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

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

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

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

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

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

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

/*
    top navigation
*/

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

.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: .75rem;

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


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

        label {
            margin-top: .2rem;
        }

        input {
            flex-shrink: 0;
        }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .cancel-button {
        margin-right: 1rem;
    }

    /*
        Some fields need extra margins
    */
    .field-type-booleanfield + .clearfix,
    .field-type-booleanfield:last-of-type > div {
        margin-bottom: .75rem;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        img {
            margin-top: .5rem;
        }

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

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

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

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

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

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

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

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

/*
    homepage
*/

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

    hr {
        margin-bottom: 2rem;
    }

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

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

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

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

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

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

/*
    homepage tiles
*/

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

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

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

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

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

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

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

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

    .tile-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;
        padding-right: 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';
$import-link-icon: '\f093';
$internal-link-icon: '\f0c1';
$manage-recipients: '\f003';
$manage-subscribers: '\f0c0';
$mark-as-paid: '\f058';
$mark-as-unpaid: '\f057';
$mute: '\f131';
$new-daypass-icon: '\f145';
$new-directory-icon: '\f0e8';
$new-directory-entry-icon: '\f114';
$new-recipient: '\f1fa';
$new-form-icon: '\f044';
$new-link-icon: '\f0c1';
$new-news-icon: '\f1ea';
$new-newsletter-icon: '\f003';
$new-note-icon: '\f24a';
$new-page-icon: '\f0f6';
$new-payment-icon: '\f09d';
$new-person-icon: '\f007';
$new-photo-album: '\f03e';
$new-registration-window: '\f067';
$new-reservation-icon: '\f271';
$new-room-icon: '\f015';
$new-stripe-connect-icon: '\f1f5';
$new-user-icon: '\f234';
$paste-link-icon: '\f0ea';
$payment-capture-icon: '\f09d';
$payment-refund-icon: '\f0e2';
$payment-provider-icon: '\f283';
$payments-icon: '\f09d';
$select-icon: '\f14a';
$send-link-icon: '\f1d9';
$sync-icon: '\f021';
$test-link-icon: '\f0e9';
$occupancy-link-icon: '\f022';
$unmute: '\f130';
$upload-icon: '\f0ee';
$view-link: '\f06e';

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

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

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

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

        &.dropdown {
            padding-right: 1.25rem;

            &::after {
                display: none;
            }

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

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

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

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

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

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

    > a {
        margin-bottom: 0;
    }

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

    a::before {
        display: inline-block;
        margin-right: 1.5ex;
        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); }
    .import-link::before { @include icon($import-link-icon); }
    .internal-url::before { @include icon($internal-link-icon); }
    .manage-recipients::before { @include icon($manage-recipients); }
    .manage-subscribers::before { @include icon($manage-subscribers); }
    .mark-as-paid::before { @include icon($mark-as-paid); }
    .mark-as-unpaid::before { @include icon($mark-as-unpaid); }
    .mute::before { @include icon($mute); }
    .new-daypass::before { @include icon($new-daypass-icon); }
    .new-directory::before { @include icon($new-directory-icon); }
    .new-directory-entry::before { @include icon($new-directory-entry-icon); }
    .new-form::before { @include icon($new-form-icon); }
    .new-link::before { @include icon($new-link-icon); }
    .new-news::before { @include icon($new-news-icon); }
    .new-newsletter::before { @include icon($new-newsletter-icon); }
    .new-note::before { @include icon($new-note-icon); }
    .new-page::before { @include icon($new-page-icon); }
    .new-payment::before { @include icon($new-payment-icon); }
    .new-person::before { @include icon($new-person-icon); }
    .new-photo-album::before { @include icon($new-photo-album); }
    .new-recipient::before { @include icon($new-recipient); }
    .new-registration-window::before { @include icon($new-registration-window); }
    .new-reservation::before { @include icon($new-reservation-icon); }
    .new-room::before { @include icon($new-room-icon); }
    .new-stripe-connect::before { @include icon($new-stripe-connect-icon); }
    .new-user::before { @include icon($new-user-icon); }
    .occupancy-link::before { @include icon($occupancy-link-icon); }
    .paste-link::before { @include icon($paste-link-icon); }
    .payment-capture::before { @include icon($payment-capture-icon); }
    .payment-provider::before { @include icon($payment-provider-icon); }
    .payment-refund::before { @include icon($payment-refund-icon); }
    .payments::before { @include icon($payments-icon); }
    .select::before { @include icon($select-icon); }
    .send-link::before { @include icon($send-link-icon); }
    .test-link::before { @include icon($test-link-icon); }
    .sync::before { @include icon($sync-icon); }
    .unmute::before { @include icon($unmute); }
    .upload::before { @include icon($upload-icon); }
    .view-link::before { @include icon($view-link); }
}

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

    form {
        margin-bottom: .5rem;
    }

    input {
        margin-bottom: 0;
    }

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

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

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

    label {
        margin-right: .75rem;
    }

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

    .field {
        margin-bottom: .25rem;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
    dialog styling
*/
.dialog {

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

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

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

}

/*
    main title
*/

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

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

    pre {
        @include smooth-edges;

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

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

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

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

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

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

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

/*
    page links
*/

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

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

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

/*
    breadcrumbs
*/

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

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

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

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

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

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

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

/*
    sidebar navigation
*/

.sidebar {
    ul {
        list-style: none;

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

        .children {
            margin-left: 0;

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

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

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

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

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

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

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

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

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

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

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

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

.ticket-date {
    color: $monsoon;
}

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

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

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

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

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

/*
    Tickets list
*/
$accept-ticket-icon: '\f1db';
$accept-ticket-icon-hover: '\f192';
$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';
$dir-handler-icon: '\f114';
$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;
}

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

.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); }
.DIR-link::before { @include icon($dir-handler-icon); }

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

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

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

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

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

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

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

.new-note,
.mute,
.unmute {
    float: right;
}

.ticket-accept {
    float: right;

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

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

.ticket-close {
    float: right;

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

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

.ticket-reopen {
    float: right;

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

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

/*
    Tickets filter dropdown
*/

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

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

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

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

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

        &:hover {
            color: $white;
        }

        ::before {
            font-weight: normal;
        }

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

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

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

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

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

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

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

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

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

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

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

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

/*
    Fullcalendar Integration
*/

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

.calendar {

    margin-bottom: 1.5rem;

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

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

    .fc-toolbar {
        margin-bottom: 0;

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

        .fc-left {
            float: none;

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

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

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

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

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

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

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

        tr {
            background-color: transparent;
        }

        .fc-today {
            background: $yellow-pastel;
        }

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

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

        .fc-bg {
            background: none;
        }

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

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

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

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

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

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

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

            br {
                display: none;
            }
        }

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

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

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

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

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

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

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

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

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

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

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

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

    .reset-button {
        $size: 1rem;

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

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

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

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

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

.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,
    .reservation-price {
        display: block;
        margin-left: 1.4rem;
    }

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

        span {
            font-size: 1rem;
        }

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

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

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

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

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

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

/*
    Ticket summary customisations
*/
.ticket-summary {
    h2 {
        font-size: $h3-font-size;
    }

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

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

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

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

/*
    Usermanagement
*/

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

.usermanagement {
    width: 100%;

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

    .subheader td {
        border-color: $oil;

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

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

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

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

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

/*
    New account
*/

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

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

/*
    Resource recipients
*/

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

    div {
        font-size: .875rem;

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

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

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

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

    .orbit-timer {
        display: none;
    }

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

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

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

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

    li {
        @include smooth-edges;

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

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

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


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

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

    h2,
    span {
        color: $steel;
    }

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

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

        &::before {
            @include icon('\f1f5');
            margin-right: 1.5ex;
        }
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

            &.rounded {
                @include circle;
            }
        }
    }

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

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


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

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

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

    li {
        position: relative;

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

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

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

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

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

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

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

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

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

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

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

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

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

.message-ticket_note {
    background: $yellow-pastel;

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

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

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

/*
    Directories
*/

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

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

    li {
        display: flex;

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

            & + div {
                flex: 10;
            }

            img {
                border-radius: 5px;
                max-height: 125px;
                vertical-align: top;
                width: 100%;
            }
        }
    }
}

/*
    Formcode Toolbar
*/

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

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

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

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

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

.formcode-snippet {
    display: table-row;

    &:hover {
        background: $silver;
    }

    > * {
        display: table-cell;
    }
}

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

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

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

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

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

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

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

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

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

/*
    Print Styles
*/
@media print {
    .globals,
    .alert-box,
    .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 .field-display-label,
    .field-display-block .field-display-data,
    .field-display-block .field-display-data * {
        background-color: transparent;
        color: $body-font-color !important;
        font-size: 12px !important;
        margin: 0 !important;
        padding: 0;
    }

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

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

        ul {
            margin-bottom: 0;
        }
    }

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

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

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

        .title {
            margin-bottom: 2px;
        }

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

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

    h1 {
        font-size: 1.6rem;
    }

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

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

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

    .header {
        max-height: 50px;
    }

    .logo {
        max-height: 40px;

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

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

        * {
            font-size: 9px;
        }
    }

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

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

        * {
            font-size: 12px;
        }

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

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

    padding: 1rem 1rem .5rem;

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


/*
    Tags input
*/
.tags-input {
    @include form-element;
    height: auto;
    max-width: 100%;

    .tag {
        background: $silver;
        border-radius: 2px;
        color: $body-font-color;
        cursor: pointer;
        display: inline-block;
        font: inherit;
        margin-right: 8px;
        outline: 1px solid $gainsboro;
        padding: 0 4px;
        transition: all 100ms ease;
        user-select: none;

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

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

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

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

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

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

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

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

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

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

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

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

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

    th {
        padding-top: 2rem;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
    Upload
*/
.upload-dropzone {
    border: 1px dashed $gainsboro;
    display: flex;
    flex-direction: column;
    height: 10rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    text-align: center;
}

.upload-filelist-header {
    margin-bottom: 1.5rem;
}

.upload-progress {
    margin-bottom: 1.5rem;

    .progress {
        margin-left: 25%;
        width: 75%;

        &::before {
            content: attr(data-filename);
            font-size: .875rem;
            left: 1rem;
            overflow: hidden;
            position: absolute;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 22.5%;
        }

        &.alert::after {
            color: $white;
            content: attr(data-error);
            font-size: .8rem;
            margin-left: .75ex;
            margin-top: -1.2rem;
            position: absolute;
        }
    }
}

/*
    Publication
*/
.publication {
    display: flex;
    margin-left: -2.75rem;
    padding-top: .35rem;

    .publication-tag {
        font-size: .875rem;
        line-height: 1rem;
        margin: .3rem 2rem .75rem 0;

        .fa {
            @include prefix(transition-duration, .5s);
            @include prefix(filter, blur(0));
        }

        a {
            border-radius: 5px;
            display: inline-block;
            padding: 2px 4px 2px 2px;

            &.is-published {
                background: $green-pastel;
                color: $green-dark;
            }

            &.is-not-published {
                background: $red-pastel;
                color: $red-dark;
            }
        }
    }

    .publication-settings {
        display: flex;
        flex-wrap: wrap;
        margin-top: -1.5rem;
        width: 77.5%;

        legend {
            font-size: .8rem;
            font-weight: normal;
            margin-bottom: .5rem;
            margin-left: .25rem;
            text-align: left;
        }

        form {
            width: 100%;
        }

        fieldset {
            border: 1px solid $silver;
            border-radius: 3px;

            &::focus-within {
                border-color: $silver;
            }
        }

        .publication-settings-input {
            display: flex;
            padding: 0 0 0 1rem;

            > div {
                flex: 2 0 40%;
            }

            > select {
                flex: 0 0 25%;

                margin-left: .5rem;
                margin-right: .5rem;
            }

            > a {
                display: block;
                font-size: 1rem !important;
                margin-top: .5rem;
                margin-right: 1rem;
            }
        }
    }
}

.publication-date-not-set .publication-settings-input > a {
    visibility: hidden;
}

.ic-transitioning .publication-tag .fa {
    @include prefix(transform, scale(1.25));
    @include prefix(transition, transform .5s ease-in);

    color: $white;
}
