/**
 * Kolab core library
 *
 * This file contains Elastic skin styles for calendar plugin.
 *
 * @author Aleksander Machniak <machniak@kolabsys.com>
 *
 * Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */

.toolbarmenu.listing li {
    a.calendarlink:before {
        .font-icon-regular(@fa-var-calendar);
    }

    a.send:before {
        content: @fa-var-paper-plane;
    }
}

// Icon for resources in autocompletion list
.listing.iconized li.resource > i:before {
    content: @fa-var-cube;
}

a.button.today:before {
    .font-icon-regular(@fa-var-calendar);
}

.listing {
    li {
        & > div {
            &.calendar .calname:before {
                &:extend(.font-icon-class);
                content: @fa-var-calendar-alt;
            }

            &.calendar.cal---invitation--pending .calname:before,
            &.calendar.cal---invitation--declined .calname:before {
                .font-icon-regular(@fa-var-calendar-alt);
            }

            &.calendar.cal-__bdays__ .calname:before {
                content: @fa-var-birthday-cake;
            }

            &.calendar.cal---invitation--pending,
            &.calendar.cal---invitation--declined,
            &.calendar.cal-__bdays__ {
                font-style: italic;

                a.quickview {
                    padding-right: .25rem;
                }

                a.calname {
                    padding-right: 4em;
                }

                .count {
                    right: 5.5em;
                }
            }
        }

        // Calednars list element (color indicator) used in Larry
        span.handle {
            display: none;
        }
    }
}

#calendarcategories {
    .input-group:not(:last-child) {
        margin-bottom: .25rem;
    }
}

fieldset.categories .input-group {
    .minicolors-input {
        border-radius: 0;
    }

    .minicolors + .input-group-append {
        margin-left: 0;
    }

    a.button.create {
        &:before {
            &:extend(.font-icon-class);
            content: @fa-var-plus;
            line-height: 1;
        }
    }
}

.calendar-invitebox {
    & > i.icon:before {
        content: @fa-var-calendar !important;
    }
}

.calendar-agenda-preview {
    display: none;
    margin-top: .5rem;
    border-top: 1px solid #ddd;

    h3 {
        margin-top: .5rem;
    }

    .event-row {
        white-space: nowrap;
        .overflow-ellipsis;

        &.current {
            color: #333;
            font-weight: bold;
        }

        &.no-event {
            color: @color-black-shade-text;
            font-style: italic;
        }
    }

    .event-title {
        padding-left: .5rem;
    }

    .event-date {
    }
}

#calendar.content {
    overflow: hidden !important; // fullcalendar widget implements scrolling on its own
    position: relative;
}

.calendar-datepicker {
    // overwrite jQuery-UI datepicker styles
    .ui-datepicker {
        top: initial !important;
        left: initial !important;
        position: relative !important;
        transform: unset;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        width: auto;
        min-width: auto !important;
        font-size: .9rem;
        background-color: @color-black-shade-bg;

        td a {
            font-size: .9rem !important;
        }
    }

    .ui-datepicker-header {
        background-color: @color-black-shade-bg;
        border-top: 1px solid @color-layout-border;
    }
}

// Fullcalendar styles
@color-calendar-border: @color-layout-border;

.fc {
    flex: auto !important;

    .fc-header {
        tr {
            background-color: @color-black-shade-bg;
        }
    }

    .fc-header-left {
        width: 25%;

        span {
            display: none;
        }

    }

    .fc-header-center {
        text-align: center;

        h2 {
            margin: 0;
            color: @color-black-shade-text;
            white-space: nowrap;
        }
    }

    .fc-header-right {
        width: 25%;
        text-align: right;

        span {
            display: none;
        }
    }

    .btn-group {
        padding: .5rem;
    }

    .fc-header-title {
        h2 {
            font-size: 1.5rem;
            font-weight: bold;
        }
    }

    .fc-view {
        width: 100%;
        overflow: hidden;
    }

    // Cell Styles

    .fc-widget-header,    // <th>, usually
    .fc-widget-content {  // <td>, usually
        border: 1px solid @color-calendar-border;
    }

    .fc-cell-overlay { // semi-transparent rectangle while dragging
        background: #bce8f1;
        opacity: .3;
    }

    // Buttons

    .fc-button {
        position: relative;
        display: inline-block;
        padding: 0 .6em;
        overflow: hidden;
        height: 1.9em;
        line-height: 1.9em;
        white-space: nowrap;
        cursor: pointer;
    }


    // Button states
    // borrowed from twitter bootstrap (http://twitter.github.com/bootstrap/)

    .fc-state-highlight { // <td> today cell, TODO: add .fc-today to <th>
        background: tint(@color-main, 90%);
    }
/*
    .fc-state-default {
        border: 1px solid;
        background-color: #f5f5f5;
    }

    .fc-state-hover,
    .fc-state-down,
    .fc-state-active,
    .fc-state-disabled {
        color: #333333;
        background-color: #e6e6e6;
    }

    .fc-state-hover {
        color: #333333;
        text-decoration: none;
    }

    .fc-state-down,
    .fc-state-active {
        background-color: #cccccc;
        outline: 0;
    }

    .fc-state-disabled {
        cursor: default;
        background-image: none;
        opacity: 0.65;
    }
*/

    // Global Event Styles

    .fc-event-container {
        & > * {
            z-index: 8;
        }

        & > .ui-draggable-dragging,
        & > .ui-resizable-resizing {
            z-index: 9;
        }
    }

    .fc-event {
        border: 1px solid #3a87ad; // default BORDER color
        background-color: #3a87ad; // default BACKGROUND color
        color: #fff;               // default TEXT color
        font-size: .85em;
        cursor: default;

        &:focus {
            outline: 2px solid ActiveBorder;
        }

        .fc-rtl & {
            text-align: right;
        }
    }

    a.fc-event {
        text-decoration: none;
    }

    a.fc-event,
    .fc-event-draggable {
        cursor: pointer;
    }

    .fc-event-inner {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .fc-event-time,
    .fc-event-title {
        padding: 0 1px;
    }

    .ui-resizable-handle {
        z-index: 99999;
    }

    // Horizontal Events

    .fc-event-hori {
        border-width: 1px 0;
        margin-bottom: 1px;
    }

    .fc-ltr .fc-event-hori.fc-event-start,
    .fc-rtl .fc-event-hori.fc-event-end {
        border-left-width: 1px;
    }

    .fc-ltr .fc-event-hori.fc-event-end,
    .fc-rtl .fc-event-hori.fc-event-start {
        border-right-width: 1px;
    }

    // resizable

    .fc-event-hori {
        .ui-resizable-e {
            cursor: e-resize;
        }

        .ui-resizable-w {
            cursor: w-resize;
        }
    }

    // Reusable Separate-border Table

    .fc-border-separate {
        border-collapse: separate;

        th,
        td {
            border-width: 1px 0 0 1px;

            &.fc-last {
                border-right-width: 1px;
            }
        }

        tr.fc-last th,
        tr.fc-last td {
            border-bottom-width: 1px;
        }

        tbody tr.fc-first td,
        tbody tr.fc-first th {
            border-top-width: 0;
        }
    }

    .fc-event-date,
    .fc-event-time {
        white-space: nowrap;
    }

    // Month View, Basic Week View, Basic Day View

    .fc-week-number {
        width: 22px;
        text-align: center;

        div {
            padding: 0 2px;
        }
    }

    .fc-day {
        vertical-align: top;
    }

    .fc-grid {
        th {
            text-align: center;
        }

        .fc-day-number {
            float: right;
            padding: 0 2px;
        }

        .fc-other-month .fc-day-number {
            opacity: 0.3;
        }

        .fc-day-content {
            clear: both;
            padding: 2px 2px 1px; // distance between events and day edges
        }

        // event styles
        .fc-event-time {
            font-weight: bold;
            white-space: nowrap;
        }

        // right-to-left
        .fc-rtl & .fc-day-number {
            float: left;
        }

        .fc-rtl & .fc-event-time {
            float: right;
        }
    }

    .fc-more-link {
        font-size: 0.85em;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
        padding: 1px;
        color: @color-link !important;
    }

    // Agenda Week View, Agenda Day View

    .fc-agenda-days th {
        text-align: center;
    }

    .fc-agenda {
        table {
            border-collapse: separate;
        }

        .fc-agenda-axis {
            width: 50px;
            padding: 0 4px;
            vertical-align: middle;
            text-align: right;
            white-space: nowrap;
            font-weight: normal;
            font-size: .9rem;
            border-left: 0;
        }

        .fc-week-number {
            font-weight: bold;
        }

        .fc-day-content {
            padding: 2px 2px 1px;
        }
    }

    // make axis border take precedence

    .fc-agenda-days .fc-agenda-axis {
        border-right-width: 1px;
    }

    .fc-agenda-days .fc-col0 {
        border-left-width: 0;
    }

    // all-day area

    .fc-agenda-allday {
        th {
            border-width: 0 1px;
        }

        .fc-day-content {
            min-height: 34px;
        }
    }

    // divider (between all-day and slots)

    .fc-agenda-divider-inner {
        height: 1px;
        overflow: hidden;
    }

    // slot rows

    .fc-agenda-slots {
        th {
            border-width: 1px 1px 0;
        }

        td {
            border-width: 1px 0 0;
            background: none;
        }

        td div {
            height: 20px;
        }

        tr.fc-slot0 th,
        tr.fc-slot0 td {
            border-top-width: 0;
        }

        tr.fc-minor th,
        tr.fc-minor td {
            border-top-style: dotted;
        }
    }

    // Vertical Events

    .fc-event-vert {
        border-width: 0 1px;

        .fc-event-head,
        .fc-event-content {
            position: relative;
            z-index: 2;
            width: 100%;
            overflow: hidden;
        }

        &.fc-event-start {
            border-top-width: 1px;
        }

        &.fc-event-end {
            border-bottom-width: 1px;
        }

        .fc-event-time {
            white-space: nowrap;
            font-size: 10px;
            font-weight: bold;
        }

        .fc-event-inner {
            position: relative;
            z-index: 2;
        }

        .fc-event-bg { // makes the event lighter w/ a semi-transparent overlay
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            opacity: .25;
        }
    }

    // resizable

    .fc-event-vert .ui-resizable-s {
        bottom: 0        !important; // importants override pre jquery ui 1.7 styles
        width: 100%      !important;
        height: 8px      !important;
        overflow: hidden !important;
        line-height: 8px !important;
        font-size: 11px  !important;
        font-family: monospace;
        text-align: center;
        cursor: s-resize;
    }

    .fc-timeline {
        position: absolute;
        width: 100%;
        left: 0;
        margin: 0;
        padding: 0;
        border: none;
        border-top: 2px solid @color-success;
        z-index: 999;
    }

    // List view  (by bruederli@kolabsys.com)

    .fc-view-list,
    .fc-view-table {
        border-left: 0;
        border-bottom: 0;
        border-top: 1px solid @color-layout-border;
        width: auto;

        .fc-list-header,
        td.fc-list-header {
            border-width: 0;
            border-bottom-width: 1px;
            padding: 3px 5px;
            font-weight: bold;
        }

        .fc-event {
            font-size: 1rem;
        }
    }

    .fc-list-section {
        padding: 4px 2px;
        border-width: 0;
        border-bottom-width: 1px;
    }

    .fc-view-list .fc-last {
        border-bottom: 0;
    }

    .fc-list-section .fc-event {
        position: relative;
        margin: 1px 2px 3px 2px;
    }

    .fc-view-table {
        tr.fc-event {
            background: inherit;
            color: inherit;

            td {
                padding: 2px;
                border-bottom: 1px solid @color-calendar-border;
            }

            td.fc-event-handle {
                padding: 3px 8px 3px 3px;
            }
        }

        .fc-first td.fc-list-header {
            border-top-width: 0;
        }

        .fc-event-handle {
            .fc-event-inner {
                display: block;
                width: 8px;
                height: 10px;
            }
        }

        table {
            table-layout: fixed;
            width: 100%;
        }

        .fc-event-inner {
            border-color: inherit;
            background-color: inherit;
        }

        col.fc-event-handle {
            width: 18px;
        }

        col.fc-event-date {
            width: 7em;
            white-space: nowrap;
            padding-right: 1em;

            .fc-list-day & {
                width: 1px;
            }
        }

        col.fc-event-time {
            width: 9em;
            white-space: nowrap;
            padding-right: 1em;
        }
    }

    .fc-icon-alarms,
    .fc-icon-sensitive,
    .fc-icon-recurring {
        display: inline-block;
        width: 1em;
        height: 1em;
        margin-left: .25rem;

        &:before {
            &:extend(.font-icon-class);
            font-size: 1em;
            line-height: 1;
        }
    }

    .fc-icon-recurring:before {
        .font-icon-regular(@fa-var-clone);
    }

    .fc-icon-alarms:before {
        content: @fa-var-bell;
    }

    .fc-icon-sensitive:before {
        content: @fa-var-lock;
    }

    // remove redundant borders
    .fc-first tbody .fc-day-header,
    .fc-first .fc-day-header.fc-first,
    .fc-week .fc-first {
        border-left: 0;
    }

    .fc-agenda-days tbody .fc-last > *,
    .fc-agenda-slots tr:last-child td,
    .fc-week.fc-last .fc-day {
        border-bottom: 0;
    }
}

// fullcalendar style overrides for printing
.print-content {
    .fc-header {
        tr {
            background-color: #fff;
        }
    }

    .fc-header-center {
        width: 100%;
        h2 {
            color: #000;
            padding-bottom: .75rem;
            font-size: 1.5rem !important;
        }
    }

    .fc-agenda-gutter,
    .fc-header-left,
    .fc-header-right {
        display: none !important;
    }

    .fc-view {
        overflow: visible;
    }

    .fc-event-skin,
    .fc-event-inner .fc-event-skin {
        color: black;
        background-color: #fff !important;
    }

    .fc-event-title {
        font-weight: bold;
    }

    .fc-event-hori {
        .fc-event-title {
            font-weight: normal;
            white-space: nowrap;
        }

        .fc-event-time {
            white-space: nowrap;
            font-weight: normal !important;
            font-size: 10px;
            padding-right: 0.6em;
        }
    }

    .fc-grid .fc-event-time {
        font-weight: normal !important;
        padding-right: 0.3em;
    }

    .fc-event-cateories {
        font-style: italic;
    }

    .fc-event-location {
        font-size: 90%;
    }

    .fc-agenda-slots td div {
        height: 1.4em;
    }

    .fc-widget-header,
    .fc-mon, .fc-tue, .fc-wed, .fc-thu, .fc-fri {
        background-color: #fff;
    }

    .fc-widget-header, .fc-widget-content {
        border-color: @color-calendar-border;
    }

    .fc-view-list, .fc-view-table {
        border: 0;
    }

    .fc-view-list div.fc-list-header,
    .fc-view-table td.fc-list-header {
        padding: 0.3em;
        background: #fff;
        font-weight: bold;
        font-size: 1.2em;
        color: #333;
        border-color: @color-calendar-border;
        border-style: solid;
        border-width: 1px 0;
    }

    .fc-list-section .fc-event {
        cursor: auto;
    }

    .fc-view-table {
        tr.fc-event td,
        tr.fc-event td.fc-event-handle {
            border-color: @color-calendar-border;
            padding-top: 0.5em;
            padding-bottom: 0.5em;
        }

        tr.fc-last td {
            border: 0;
        }

        tr.fc-event .fc-event-description {
            padding-left: 2em;
            padding-top: 0em;
        }

        col.fc-event-location {
            width: 20%;
        }
    }

    .fc-event-vert .fc-event-description {
        font-size: 90%;
        font-style: italic;
    }

    .fc-view-month .fc-event-hori .fc-event-inner {
        background: #fff !important;
    }

    // add back borders removed in non-print view
    .fc-agenda .fc-agenda-axis,
    .fc-first .fc-day-header,
    .fc-week .fc-first {
        border-left: 1px solid @color-calendar-border;
    }

    .fc-agenda-days th:nth-last-child(2),
    .fc-agenda-allday td,
    .fc-agenda-slots td.fc-widget-content {
        border-right: 1px solid @color-calendar-border;
    }

    .fc-agenda-days tr.fc-last > *,
    .fc-week.fc-last .fc-day {
        border-bottom: 1px solid @color-calendar-border;
    }
}

body.task-calendar {
    #print-layout {
        #calendar-view-selector {
            float: right;
            padding-top: .25rem;
        }
    }

    @media screen and (min-width: (@screen-width-small + 1px)) {
        & > #layout > div.sidebar {
            flex: 2 !important;
            max-width: 400px;
        }
    }

    // improve datepicker
    .ui-datepicker {
        td {
            width: 12.5%;
        }

        .ui-datepicker-week-col {
            color: @color-black-shade-border;
            text-align: center;
        }
    }

    .ui-datepicker-inline {
        .ui-datepicker-week-col {
            color: @color-link;
            cursor: pointer;
        }

        .ui-datepicker-activerange {
            background-color: @color-list-selected-background;
        }
    }
}

#timezone-display {
    font-size: .9rem;
    color: @color-black-shade-text;
}

#agendaoptions {
    padding: 0 .5rem .5rem .5rem;
    display: flex;
    background-color: @color-black-shade-bg;

    .input-group {
        padding-right: .5rem;
        flex-wrap: nowrap;
        width: 50%;

        &:last-child {
            padding-right: 0;
        }
    }

    select {
        min-width: 7em;
    }

    .input-group-prepend {
        overflow: hidden;

        span {
            display: block;
            .overflow-ellipsis;
        }
    }
}

#eventshow {
    margin: 0;

    .event-title {
        font-size: 1.5rem;
        font-weight: bold;
    }

    .event-location {
        .overflow-ellipsis;
        white-space: nowrap;
    }

    .event-description {
        margin: 1rem 0;
    }

    .event-attendees {
        margin-bottom: 1rem;

        .attendee {
            margin-right: .25rem;
        }
    }

    .event-partstat {
        & > span {
            display: flex;
        }

        .rsvp-status {
            &:before {
                display: inline;
                float: none;
            }
        }

        .changersvp {
            cursor: pointer;
            font-size: 1.2rem;
            margin-left: 1em;

            &:before {
                &:extend(.font-icon-class);
                content: @fa-var-pen-square;
                float: none;
                display: inline;
                line-height: 1;
            }
        }

        .inner {
            display: none;
        }
    }

    .faded {
        color: @color-black-shade-text;
    }
}

#eventedit {
    .edit-attendees-table td {
        padding-top: .15rem;

        &.role {
            padding-left: 0;
            width: 9em;
        }
    }
}

#fish-eye-view {
    padding: 0;
    border-bottom: 1px solid @color-calendar-border;

    .fc-header {
        display: none;
    }

    .fc-view {
        position: initial !important;
    }

    .fc-agenda-days tr.fc-first th {
        border-top: 0;
    }

    .fc-agenda-divider + div {
        height: 100% !important;
        overflow: initial !important;
    }
}

@color-availability-unknown:        #bbb;           // Larry: #ddd;
@color-availability-free:           @color-success; // Larry: #abd640;
@color-availability-busy:           @color-error;   // Larry: #e26569;
@color-availability-tentative:      #8383fc;
@color-availability-out-of-office:  #fbaa68;

.availability {
    span {
        margin-right: .5rem;
        color: @color-black-shade-text;

        &:before {
            &:extend(.font-icon-class);
            content: @fa-var-square;
            display: inline;
            float: none;
        }

        &.legend:before {
            font-size: 1em;
        }

        &.loading:before {
            .animated-icon-class;
            content: @fa-var-circle-notch;
            display: block;
            line-height: 1;
        }

        &.unknown:before {
            color: @color-availability-unknown;
        }

        &.free:before {
            color: @color-availability-free;
        }

        &.busy:before {
            color: @color-availability-busy;
        }

        &.tentative:before {
            color: @color-availability-tentative;
        }

        &.out-of-office:before {
            color: @color-availability-out-of-office;
        }
    }
}

// fixes additional checkbox in Elastic's .datetime widget
.datetime {
    label {
        margin-left: 1em;
        line-height: 2.2;
        text-align: right;
        flex: 1;
    }

    input {
        width: 10em !important;
    }

    input[type=checkbox] {
        width: auto !important;
    }
}

.calendar-scheduler {
    .schedule-nav {
        position: absolute;
        right: 1rem;
        top: 1rem;

        button {
            padding: 0 1rem;
        }
    }

    .schedule-range {
        width: 50%;
        margin-top: 2rem;
    }

    .schedule-legend {
        .attendee {
            margin-right: .5rem;
        }
    }

    .schedule-find-buttons {
        margin-right: 1rem;
        float: left;

        button:first-child {
            margin-right: .5rem;
        }

        .prev-slot:before {
            content: @fa-var-chevron-left;
        }

        .next-slot:after {
            &:extend(.font-icon-class);
            content: @fa-var-chevron-right;
            display: inline-block;
            float: none;
            margin-right: 0;
        }
    }

    .schedule-options {
        line-height: 2.8;

        label {
            vertical-align: middle;
        }
    }

    .attendees-list {
        position: relative;

        a.attendee-role-toggle {
            position: absolute;
            left: 0;
            display: inline-block;
            width: 1em;
            cursor: pointer;
        }

        div.attendee {
            border-top: 1px solid @color-list-border;
            line-height: 1.7rem;
            height: 1.8rem;
        }

        .attendee {
            white-space: nowrap;

            &.spacer {
                height: 10px;
            }

            &.loading:before {
                .animated-icon-class;
                .font-icon-solid(@fa-var-circle-notch);
            }

            &.total {
                font-weight: bold;
            }

            &.total,
            &.spacer {
                &:before {
                    display: none;
                }
            }
        }
    }

    .schedule-table {
        table-layout: fixed;

        th {
            border-top: 0;
        }

        td.attendees {
            width: 25%;
            overflow: hidden;
            border-top: 0;

            .attendees-list {
                border-bottom: 1px solid @color-table-border;
            }
        }

        td.times {
            width: auto;
            border-top: 0;

            table {
                margin: 0;
            }

            td {
                height: 1.8rem;
                border-top: 1px solid @color-list-border;
            }
        }

        div.scroll {
            position: relative;
            overflow: auto;
        }

        .timesheader {
            height: 1.4rem;
            border-top: 1px solid @color-table-border;
        }

        .boxtitle {
            margin: 0;
            padding: 0;
            font-size: 1rem;
            font-weight: bold;
            padding-top: .5rem;
            line-height: 2;
        }

        td {
            padding: 4px;
        }

        tbody td {
            padding: 0;

            div {
                height: 100%;
            }
        }

        tr.spacer td {
            padding: 0;
            height: 10px;
        }

        tr.times td {
            cursor: pointer;
            min-width: 30px;
            font-size: .7rem;
            text-align: center;
            color: @color-link;
            height: 1.4rem;
            padding: 0 .25rem;
            vertical-align: middle;
            border-top: 1px solid @color-table-border;
            border-left: 1px solid @color-list-border;
        }

        .fbcontent {
            td {
                border-left: 1px solid @color-list-border;
            }

            &:last-child td {
                border-bottom: 1px solid @color-table-border;
            }
        }

        div.unknown {
            background-color: @color-availability-unknown;
        }

        div.free {
            background-color: @color-availability-free;
        }

        div.busy {
            background-color: @color-availability-busy;
        }

        div.tentative {
            background-color: @color-availability-tentative;
        }

        div.out-of-office {
            background-color: @color-availability-out-of-office;
        }

        div.all-busy,
        div.all-tentative,
        div.all-out-of-office {
            overflow: hidden;

            // This span imitates a slanting line across the parent element
            span {
                display: block;
                width: 200%;
                height: 200%;
                border: 1px solid #fff;
                background: darken(@color-availability-busy, 10%);
                transform: rotate(33deg) translate(10%);
            }

            &.w10 span {
                display: none;
            }

            &.w20 span,
            &.w25 span {
                transform: rotate(10deg) translate(10%);
            }

            &.w30 span {
                transform: rotate(15deg) translate(10%);
            }

            &.w40 span {
                transform: rotate(20deg) translate(10%);
            }

            &.w70 span,
            &.w75 span {
                transform: rotate(42deg) translate(13%);
            }

            &.w80 span {
                transform: rotate(48deg) translate(15%);
            }

            &.w90 span {
                transform: rotate(52deg) translate(18%);
            }

            &.w100 span {
                transform: rotate(55deg) translate(20%, 15%);
            }
        }

        div.all-tentative span {
            background: darken(@color-availability-tentative, 10%);
        }

        div.all-out-of-office span {
            background: darken(@color-availability-out-of-office, 10%);
        }
    }
}

#schedule-event-time {
    position: absolute;
    opacity: .75;
    border-radius: .3rem;
    cursor: move;
    border: 2px solid @color-black-shade-text;
    background-color: @color-black-shade-bg;
}

.resources-dialog {
    display: flex;
    height: 100%;

    .resource-selection {
        flex: 4;
        border: 1px solid @color-layout-border;
        min-width: 300px;
        justify-content: center;

        .header {
            border-bottom: 1px solid @color-layout-border;
            display: flex;
            background-color: @color-layout-header-background;
            font-size: @layout-header-font-size;
            font-weight: bold;
            line-height: @layout-header-height;
            height: @layout-header-height;
            min-height: @layout-header-height;
            padding: 0 .25em;
            position: relative; // for absolute positioning of searchbar
            overflow: hidden;
            white-space: nowrap;
        }
    }

    .resource-content {
        flex: 10;
        display: flex;
        flex-direction: column;
        margin-left: 1em;
    }

    .listing li.resource > a {
        color: @color-font;

        &:before {
            &:extend(.font-icon-class);
            content: @fa-var-cube;
        }
    }
}

.standalone-invitebox {
    margin: 0 auto;
    padding-top: 36vh;
    max-width: 500px;
    width: 95%;
    background: url(../../../../skins/elastic/images/watermark.jpg) center -20px no-repeat;
    background-size: auto 40%;

    .invitebox {
        border: 1px solid @color-layout-border !important;
    }
}

@media screen and (max-width: @screen-width-small) {
    .fc {
        .fc-header-left {
            display: block;
            width: 100%;
            padding: 0;

            button {
                flex: 1 1 auto;
                border-radius: 0;
            }

            .btn-group {
                padding: 0;
                display: flex;
            }
        }

        .fc-header-center,
        .fc-header-right {
            display: none;
        }
    }

    #agendaoptions {
        padding-top: .5rem;
    }

    .calendar-scheduler {
        .schedule-range {
            width: 100%;
        }
    }
}

@media screen and (min-width: (@screen-width-small + 1px)) and (max-width: 920px) {
    .fc {
        .fc-header {
            display: block;

            tr {
                display: flex;
            }
        }

        .fc-header-center {
            .overflow-ellipsis;
            flex: 1;

            h2 {
                font-size: 1rem;
                line-height: 1;
                padding-top: .75rem;
            }
        }

        .fc-header-left,
        .fc-header-right {
            width: auto;

            .btn {
                padding-left: .5rem;
                padding-right: .5rem;
            }
        }
    }
}

.header-title {
    position: relative;

    .tz {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        line-height: 2;
        font-size: .8rem;
        font-weight: normal;
        color: @color-black-shade-text;
    }
}