// @file
//
// CSS declarations for all parts of a WordPress site in which the All-in-One
// Calendar plugin is active. Mostly the bare minimum required for proper
// styling of widgets.
//

/*!
 * Based on Bootstrap 3.0 (https://getbootstrap.com) | Copyright 2013 Twitter, Inc. | Apache License 2.0
 */

// ==========
// = Mixins =
// ==========
//
// Begin with Bootstrap and custom mixins.
@import "bootstrap/mixins.less";
@import "timely-mixins.less";

// =========
// = Icons =
// =========

@import "osec-icons.less";

// =============
// = Bootstrap =
// =============

// Ai1EC is based on Twitter Bootstrap. Whenever Bootstrap is upgraded, its
// .less files are preprocessed by the included script (bootstrap-prepare.sh),
// which adds 'ai1ec-' to all Bootstrap-defined classes. Still, some Bootstrap
// .less files broadly reference HTML elements, and need to be surrounded by the
// .timely namespace so as not to inflict undesirable styling upon non-Ai1EC
// portions of the markup.

// Reset
.timely { @import "bootstrap/normalize.less"; }
.timely { @import "bootstrap/print.less"; }

// Core CSS
.timely { @import "bootstrap/scaffolding.less"; }
@import "bootstrap/grid.less";
.timely { @import "bootstrap/forms.less"; }
.timely { @import "bootstrap/buttons.less"; }
.timely { @import "bootstrap/type.less"; }

// Components
@import "bootstrap/component-animations.less";
@import "bootstrap/dropdowns.less";
@import "bootstrap/button-groups.less";
.timely { @import "bootstrap/navs.less"; }
@import "bootstrap/thumbnails.less";
@import "bootstrap/alerts.less";
@import "bootstrap/wells.less";
.timely { @import "bootstrap/close.less"; }

// Components w/ JavaScript
@import "bootstrap/modals.less";
@import "bootstrap/tooltip.less";
@import "bootstrap/popovers.less";

// Utility classes
@import "bootstrap/utilities.less";
@import "bootstrap/responsive-utilities.less";

// ===========
// = Plugins =
// ===========

@import "plugins/select2.less";
@import "plugins/fileupload.less";
@import "plugins/datepicker3.less";
@import "plugins/timepicker.less";

// ==================
// = Common widgets =
// ==================
@import "common-widgets.less";

// ==========================
// = Unnamespaced overrides =
// ==========================

//
// Bootstrap
//

// Position toolbar buttons properly.
.ai1ec-btn-toolbar {
  margin: 0;
}
.ai1ec-btn-group {
  .ai1ec-btn-toolbar & {
    margin-bottom: 6px;
    &.ai1ec-btn-group-xs {
      margin-top: 5px;
    }
  }
  > .ai1ec-btn-primary {
    z-index: 3;
  }
  // Until we upgrade Bootstrap, must manually apply these styles to override
  // any applied by themes based on more recent Bootstrap.
  > .ai1ec-btn,
  > .ai1ec-dropdown-menu,
  > .ai1ec-popover {
    font-size: @font-size-base; // redeclare as part 2 of font-size inline-block hack
  }
  // Reset fonts for other sizes
  > .ai1ec-btn-xs {
    font-size: .84 * @font-size-base;
  }
  > .ai1ec-btn-sm {
    font-size: .92 * @font-size-small;
  }
  > .ai1ec-btn-lg {
    font-size: 1.15 * @font-size-base;
  }
  // For HTML4 compatibility: Force natural button height in buttons that
  // contain only an icon, by inserting a narrow space character:
  > .ai1ec-btn:after {
    content: '\200A';
    margin-right: -0.25em;
  }
}
.ai1ec-btn-primary {
  color: @btn-primary-color !important;
}
// Fix cursor on dropdowns.
.ai1ec-dropdown-toggle {
  cursor: pointer;
}
// Fix styling on dropdowns.
.ai1ec-dropdown-menu,
ul.ai1ec-dropdown-menu {
  margin: 0;
  text-align: left;
  list-style: none;
  li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}
// Dropdowns - port to div structure
//
// The following block is adapted from bootstrap/dropdowns.less; ports default
// <ul>/<li> structure of navs to <div>/<div> structure to reduce theme
// conflicts. Only the parts used by the plugin is ported to reduce bloat.
//
// NOTICE: This MUST be synced/updated whenever Bootstrap is upgraded.
.ai1ec-dropdown-menu > div > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: @line-height-base;
  color: @dropdown-link-color;
  white-space: nowrap; // prevent links from randomly breaking onto new lines
  &:hover,
  &:focus {
    text-decoration: none;
    color: @dropdown-link-hover-color;
    background-color: @dropdown-link-hover-bg;
  }
}

// Specific theme conflict fix for dropdowns, adapted from Dave Jampole's
// contribution.
.ai1ec-dropdown {
  overflow: visible !important;
  background-image: none !important;
}
.ai1ec-modal-footer {
  margin-top: 0;
}
// Tooltips
.ai1ec-tooltip {
  margin: 0 !important;
}

// Responsive utilities.
span.ai1ec-hidden-xs {
  display: inline !important;
  @media ( max-width: @screen-xs-max ) {
    display: none !important;
  }
}

//
// Select2
//

.select2-container {
  input[type="text"]:focus {
    .ai1ec-box-shadow( none );
  }
}
.entry-content .select2-choices {
  padding: inherit !important;
  line-height: inherit !important;
  list-style-type: none !important;
}
.select2-container-multi .select2-choices {
  background-color: @input-bg;
  background-image: none;
  border-color: @input-border;
  border-radius: @input-border-radius;
  .ai1ec-box-shadow( inset 0 1px 1px rgba(0,0,0,0.075) );
  .select2-dropdown-open& {
    border-bottom-color: #fff;
    border-radius: @input-border-radius @input-border-radius 0 0;
    .select2-drop-above& {
      border-bottom-color: @input-border;
      border-top-color: #fff;
      border-radius: 0 0 @input-border-radius @input-border-radius;
    }
  }
  .select2-search-field input {
    color: @input-color;
    margin: 0;
    padding: 6px 12px 4px;
    &.select2-default {
      color: @input-color-placeholder !important;
    }
  }
  .select2-search-choice {
    margin: 4px 0 0 8px;
  }
}
.select2-drop-mask {
  z-index: @zindex-dropdown - 1;
  .ai1ec-modal-open &,
  .ai1ec-has-affixed-toolbar & {
    z-index: @zindex-dropdown + @zindex-dropdown - 1;
  }
}
.select2-drop {
  background-color: @body-bg;
  border-color: @input-border-focus;
  color: @text-color;
  font-family: @font-family-base;
  font-size: @font-size-base;
  line-height: @line-height-base;
  z-index: @zindex-dropdown;
  .ai1ec-modal-open &,
  .ai1ec-has-affixed-toolbar & {
    z-index: @zindex-dropdown + @zindex-dropdown;
  }
}
.select2-results {
  margin: 4px 0;
  padding: 0;
  .select2-highlighted {
    color: @dropdown-link-color;
    background-color: @dropdown-link-hover-bg;
  }
  .select2-no-results,
  .select2-searching,
  .select2-selection-limit {
    background-color: mix( @text-color, @body-bg, 10% );
  }
}
.timely a.select2-search-choice-close {
  .ai1ec-transition( none );
  background: url('@{imgdir_default}/select2.png') right top no-repeat;
  left: 5px;
  top: 3px;
}
.select2-container,
.select2-drop {
  .ai1ec-color-swatch,
  .ai1ec-color-swatch-empty {
    width: 7px;
    height: 7px;
  }
}
// Placeholder icons for icon-bearing Select2 widgets (categories, tags, custom
// filter groups).
.ai1ec-s2-with-icon {
  position: relative;
  > i {
    font-size: 1.25em;
    left: 10px;
    line-height: 1em;
    position: absolute;
    top: 8px;
  }
  .select2-choices {
    padding-left: 1.8em;
  }
}

//
// Datepicker & timepicker
//

input.ai1ec-datepicker[readonly],
input.ai1ec-timepicker[readonly] {
  cursor: pointer;
}
.ai1ec-datepicker {
  @datepicker-font-size: @font-size-base * 0.85;
  font-size: @datepicker-font-size;
  padding: @datepicker-font-size * 0.5;
  margin-left: 5px;
  &.ai1ec-right-aligned {
    margin-left: 0;
    &:before {
      left: auto;
      right: 6px;
    }
    &:after {
      left: auto;
      right: 7px;
    }
  }
  table {
    th,
    td {
      padding: 0;
      vertical-align: middle;
    }
    tr td {
      &.ai1ec-today,
      &.ai1ec-today:hover,
      &.ai1ec-today.ai1ec-disabled,
      &.ai1ec-today.ai1ec-disabled:hover {
        background: mix( @today-color, @text-color, 95% );
      }
      &.ai1ec-active {
        &.ai1ec-active,
        &.ai1ec-active:hover,
        &.ai1ec-active.ai1ec-disabled,
        &.ai1ec-active.ai1ec-disabled:hover {
          background: @dropdown-link-active-bg;
          color: @dropdown-link-active-color;
          text-shadow: none;
        }
      }
      &.ai1ec-day {
        &:hover,
        &.ai1ec-focused {
          background-color: @dropdown-link-hover-bg;
        }
      }
      &.ai1ec-old,
      &.ai1ec-new {
        color: mix( @text-color, @body-bg, 60% );
      }
      &.ai1ec-disabled,
      &.ai1ec-disabled:hover {
        background: none;
        color: mix( @text-color, @body-bg, 30% );
      }
      span {
        &:hover {
          background-color: @dropdown-link-hover-bg;
        }
        &.ai1ec-old {
          color: mix( @text-color, @body-bg, 60% );
        }
        &.ai1ec-disabled,
        &.ai1ec-disabled:hover {
          background: none;
          color: mix( @text-color, @body-bg, 30% );
        }
        &.ai1ec-active,
        &.ai1ec-active:hover,
        &.ai1ec-active.ai1ec-disabled,
        &.ai1ec-active.ai1ec-disabled:hover {
          background-color: @dropdown-link-hover-bg;
          .ai1ec-box-shadow( none );
          color: @dropdown-link-color;
          text-shadow: none;
        }
      }
    }
  }
  th {
    font-weight: bold;
  }
  thead tr:first-child th,
  tfoot tr:first-child th {
    &:hover {
      background-color: @dropdown-link-hover-bg;
    }
    // Override unusual and buggy hiding of today button.
    &.today {
      display: table-cell !important;
      filter: alpha(opacity=100) !important;
      margin: 0 !important;
      overflow: visible !important;
      opacity: 1 !important;
      padding: 0 !important;
      height: @datepicker-font-size * 2 !important;
      width: @datepicker-font-size * 2.2 !important;
    }
  }
  td {
  }
}
.ai1ec-bootstrap-timepicker table {
  border: none;
  td {
    height: auto;
    a:hover {
      background-color: @dropdown-link-hover-bg;
      border: none;
    }
  }
}
.ai1ec-datepicker,
.ai1ec-bootstrap-timepicker.ai1ec-dropdown-menu {
  &:before {
    border-bottom-color: @dropdown-border;
  }
  &:after {
    border-bottom-color: @dropdown-bg;
  }
}
.ai1ec-collapse.ai1ec-in.ai1ec-timepicker-visible {
  overflow: visible;
}

// Fileupload

.ai1ec-fileupload {
  margin-bottom: 0;
}

// ===============
// = Hard resets =
// ===============
//
// Reset some elements that are aggressively styled by poorly written themes.
// Required for modals, anchors, images, other elements. We need to include
// #osec-container below to give extra priority at times.
.timely,
#osec-container {
  a,
  a:link,
  a:visited,
  a:active,
  a:hover {
    font-weight: normal;
    text-decoration: none !important;
  }
  img {
    background: none;
    border: none;
    border-radius: 0;
    .ai1ec-box-shadow( none );
    max-width: none;
    margin: 0;
    padding: 0;
  }
  // Restore some WP styling for embedded images in Agenda view.
  .alignleft,
  &.alignleft {
    float: left;
    margin: 0 16px 8px 0;
  }
  .alignright,
  &.alignright {
    float: right;
    margin: 0 0 8px 16px;
  }
  small {
    margin: 0 !important;
  }
  table {
    line-height: inherit;
  }
  tr,
  th,
  td {
    background: none;
    border: 0;
    padding: 0;
  }
  .ai1ec-pagination {
    a.ai1ec-prev-page i,
    a.ai1ec-next-page i {
      font-size: inherit !important;
    }
  }
}

// ========================
// = Calendar width       =
// ========================
// The calendar sets no width of its own: like a block, it takes the width of where it is placed (the theme's layout,
// the page template, the block's alignment, the alignment class of the calendar page and shortcode). It adds only:
// - the agenda limit: the agenda's list stays within the Theme Option "Agenda maximum width", unless
//   --osec-agenda-max-width is set above the calendar (Additional CSS, a page, a block's Custom CSS). Filters and
//   toolbar keep the calendar's width, as in month, week and day, so they do not move on a view switch.
// - edge padding at full width: has-global-padding in block themes (WordPress' root padding), this class elsewhere.
#osec-container .ai1ec-agenda-view {
  max-width: var(--osec-agenda-max-width, @agenda-max-width);
  margin-left: auto;
  margin-right: auto;
  @media (min-width: @screen-sm) {
    padding-bottom: var(--wp--preset--spacing--50, 2em);
    & > .ai1ec-date:first-of-type {
      margin-top: var(--wp--preset--spacing--50, 2em);
    }
  }
  @media print {
    max-width: none;
  }
}

// On the inner box: themes reset the padding of .alignfull (Kadence: `.entry-content .alignfull`). The class sits on a
// block's wrapper or on the shortcode's and calendar page's #osec-container.
.osec-edge-padding #ai1ec-calendar {
  padding-left: 1em;
  padding-right: 1em;
}

.timely {
  //
  // Extra Resets
  //

  // Copied from scaffolding body reset, with additions; needed to apply to
  // .timely, not body.
  margin: 0;
  font-family: @font-family-base;
  font-size: @font-size-base;
  // font-size: var(--wp--preset--font-size--small);
  // line-height: 1.55;
  line-height: @line-height-base;
  color: @text-color;
  word-wrap: break-word;

  a {
    border: none;
  }


  //
  // Forms
  //

  form {
    margin: 0;
  }
  .ai1ec-placeholder {
    color: @input-color-placeholder;
  }
  .ai1ec-form-control[disabled],
  .ai1ec-form-control[readonly] {
    border-color: mix( @input-border, @body-bg, 75% );
    cursor: auto;
  }
  .ai1ec-form-control[readonly] {
    background-color: @input-bg;
    border-color: @input-border;
  }
  input[type="radio"],
  input[type="checkbox"] {
    margin-top: 3px;
  }
  textarea.ai1ec-form-control {
    height: auto;
  }
  .ai1ec-help-block {
    margin-top: 2px;
    margin-bottom: 5px;
  }
  .ai1ec-form-group {
    margin-bottom: 10px;
  }
  label {
    font-weight: normal;
  }

  //
  // Close
  //
  button.ai1ec-close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
  }
}

// =======================================================================
// = Modal open status tracking (adapted from earlier ver. of Bootstrap) =
// =======================================================================
.ai1ec-modal-open {
  // Set the body as static when the modal is open.
  position: static;
  // Recalculate z-index where appropriate.
  .ai1ec-dropdown-menu {
    z-index: @zindex-dropdown + @zindex-modal-background !important;
  }
  .ai1ec-dropdown.ai1ec-open {
    *z-index: @zindex-dropdown + @zindex-modal-background !important;
  }
  .ai1ec-popover {
    z-index: @zindex-popover  + @zindex-modal-background !important;
  }
  .ai1ec-tooltip {
    z-index: @zindex-tooltip  + @zindex-modal-background !important;
  }
}

// ==============================
// = AI1EC General declarations =
// ==============================

// General AJAX.
.ai1ec-loading {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('@{imgdir}/ajax-loader.gif') no-repeat center center;
  background-color: fade( @body-bg, 50% );
  display: none;
  #osec-calendar-view-container & {
    background-color: transparent;
    background-position: center 150px;
  }
  .ai1ec-modal > & {
    border-radius: 5px;
  }
}
.timely-widget {
  min-height: 62px;
  position: relative;
}
.ai1ec-widget-loading {
  position: absolute;
  z-index: 2;
  width: 100%;
  > small {
    border-radius: @border-radius-base;
    background: @body-bg;
    color: @text-color !important;
    display: inline-block;
    .ai1ec-opacity( 0.8 );
    padding: 0.5em;
  }
}

// Field label styling.
.ai1ec-field-label {
  font-size: @event-font-size * 0.85em;
  font-weight: bold;
  color: @field-label-color;
  text-transform: uppercase;
  text-align: right;
  @media (max-width: @screen-xs-max) {
    text-align: left;
  }
}

// All-day badges
.ai1ec-allday-badge {
  background: @allday-badge-color;
  border-radius: 0.9em;
  color: @event-stub-allday-text;
  display: inline-block;
  font-size: 0.85em;
  font-weight: normal;
  margin: 0 0 1px;
  .ai1ec-opacity( 0.9 );
  padding: 0 0.7em 0.05em;
  vertical-align: middle;
}

// No results styling.
.ai1ec-no-results {
  color: @text-muted;
}

// Special formatting for paragraph text (as opposed to most application UI).
.ai1ec-centered {
  text-align: center;
}
.ai1ec-prose {
  p, ul, ol, li {
    font-size: @font-size-base * 1.08;
    line-height: @line-height-base * 1.2;
  }
  p, ul, ol {
    margin-bottom: @line-height-computed * 0.6;
  }
}

// ==============
// = Categories =
// ==============
.ai1ec-category {
  border-radius: 4px;
  .ai1ec-box-shadow( inset 0 0 1px fade( @dropdown-link-hover-color, 50% ) );
  cursor: pointer;
  display: inline-block;
  font-size: 0.9em;
  line-height: 2em !important;
  margin: 1px 0;
  padding: 0 0.5em !important;
  text-transform: uppercase;
  white-space: nowrap;
  .ai1ec-listItem();
}
.ai1ec-category:hover,
.ai1ec-active > .ai1ec-category {
  .ai1ec-listItemActive();
}

// Category colors.
.ai1ec-color-swatch,
.ai1ec-color-swatch-empty {
  display: inline-block;
  height: 8px;
  margin: 0 1px;
  padding: 1px;
  width: 8px;
}
.ai1ec-color-swatch {
  border-radius: 5px;
  border-color: rgba(0,0,0,0.5);
  .ai1ec-opacity( 0.8 );
}

// ========
// = Tags =
// ========
.ai1ec-tag {
  border-radius: 4px;
  color: @link-color;
  cursor: pointer;
  display: inline-block !important;
  line-height: 1.7em !important;
  margin: 1px 0 0;
  padding: 0 4px !important;
  white-space: nowrap;
  i {
    padding-right: 3px;
  }
}
a.ai1ec-custom-filter {
  .ai1ec-category;
}
.ai1ec-tag:hover,
.ai1ec-active > .ai1ec-tag {
  .ai1ec-listItemActive();
}

// =================
// = Event avatars =
// =================

.ai1ec-event-avatar {
  .ai1ec-avatar( natural );
}

// ======================
// = Agenda view =
// ======================

// Elements in common with Agenda view
.ai1ec-agenda-widget-view,
.ai1ec-agenda-view {
  .ai1ec-date-title {
    display: none;
    @media (min-width: 30rem) {
      display: block;
      border: 1px solid mix( @text-color, @agenda-date-title-bg, 30% );
      border-top: none;
      border-radius: 5px;
      .ai1ec-box-shadow( 0 2px 2px rgba(0,0,0,0.08) );
      .ai1ec-box-sizing( border-box );
      color: mix( @text-color, @agenda-date-title-bg, 85% );
      float: left;
      font-weight: bold !important;
      #gradient > .ai1ec-vertical-three-colors(
              @agenda-date-title-bg,
              @agenda-date-title-bg,
              1em,
              mix(@agenda-date-title-bg, @text-color, 88%)
      );
      filter: none; // IE8 doesn't get how to do this gradient for some reason
      line-height: 1.2em;
      margin: (@font-size-base / 2) 0.75em;
      overflow: hidden;
      text-align: center;
      text-shadow: 0 1px 0 @text-emboss;
      width: 4em;
      &:hover {
        color: @text-color !important;
      }
    }
  }
  .ai1ec-month {
    background: @agenda-date-title-border;
    border-radius: 4px 4px 0 0;
    color: @agenda-date-title-bg;
    font-size: 0.8em;
    letter-spacing: 0.2em;
    padding: 0 0.2em;
    text-transform: uppercase;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  }
  .ai1ec-day {
    font-size: 2em;
    padding: 0.35em 0 0.22em;
  }
  .ai1ec-weekday {
    font-size: 0.8em;
    padding: 0 0 0.2em;
  }
  .ai1ec-year {
    background-color: mix( @text-color, @agenda-date-title-bg, 13% );
    .ai1ec-box-shadow( inset 0 3px 3px fade( #000, 8% ) );
    font-size: 0.7em;
    letter-spacing: 0.2em;
    padding: 0 0.2em;
  }
  .ai1ec-date {
    border-top: 1px solid darken( @agenda-date-bg, 5% );
    #gradient > .ai1ec-vertical-three-colors-replace(
      @agenda-date-bg,
      @agenda-date-bg,
      1em,
      @body-bg
    );
    &.ai1ec-today {
      border-top: 1px solid darken( @agenda-today-bg, 5% );
      #gradient > .ai1ec-vertical-three-colors-replace(
        @agenda-today-bg,
        @agenda-today-bg,
        1em,
        @body-bg
      );
    }
  }
  .ai1ec-event-description img {
    max-width: 100% !important;
  }
}

// Agenda widget view only
.ai1ec-agenda-widget-view {
  max-width: 500px;
  .ai1ec-date-events {
    margin: 0 0.5em 0 0;
  }
  .ai1ec-date {
    float: left;
    width: 100%;
  }
  .ai1ec-date-title {
    font-size: 0.9em;
  }

  // Agenda widget view events.
  .ai1ec-event {
    clear: right;
    margin: (@font-size-base / 2) 0 @font-size-base / 2 4.8em;
    padding: 0;
    position: relative;
    > a {
      color: @event-default-color;
      display: block;
      background: @event-bg;
      border: 1px solid @event-border;
      border-radius: 0.4em;
      padding: 0.2em 0.4em;
      &:hover {
        border-color: @event-hover-border;
        color: @event-default-hover-color;
      }
    }
    .ai1ec-event-time {
      font-weight: bold;
    }
    .ai1ec-event-title {
      font-weight: normal;
    }
    .ai1ec-allday-badge {
      vertical-align: bottom;
    }
  }
}

// Subscription dropdown.
.ai1ec-subscribe-dropdown {
  padding: 0 !important;
  > .ai1ec-subscribe {
    display: inline-block;
    padding: 5px 10px;
  }
  &.ai1ec-btn-xs > .ai1ec-subscribe {
    padding: 1px 5px;
  }
}

// Event popovers appended to body tag.

.ai1ec-popover.ai1ec-popup {
  text-align: left;
  border-color: @event-border;
  width: 170px;

  .ai1ec-popover-content {
    background: @event-bg;
    color: inherit;
    font-size: @font-size-base;
    font-weight: normal;
    padding: 5px 8px;
    position: relative;
    z-index: 2;
  }
  .ai1ec-event-time {
    background: @event-time-bg;
    font-size: @font-size-base * 0.85;
    font-weight: bold;
    margin: 2px -8px 0;
    padding: 1px 8px;
  }

  .ai1ec-event-avatar {
    margin: @line-height-computed / 3 auto;
    position: relative;
    img {
      width: 100%;
    }
  }
  .ai1ec-color-swatches {
    float: right;
    font-size: 0.9em;
  }
  .ai1ec-color-swatch {
    padding: 1px;
  }
  .post-edit-link {
    font-size: 11px;
    margin-left: 2px;
    white-space: nowrap;
    i {
      font-size: 13px;
    }
  }

  &.ai1ec-left.ai1ec-popup-in-oneday-view {
    margin-left: 49px;
  }

  // Week/day popover above or below the event (anchor_popover in calendar.js): a transparent strip as tall as the
  // arrow's overhang belongs to the popover, so the pointer moving from the event to the popover never crosses an
  // empty gap that closes it, also away from the arrow. calendar.js sets --osec-popover-bridge to the measured overhang.
  &.ai1ec-top::before,
  &.ai1ec-bottom::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: var(--osec-popover-bridge, 0);
  }
  &.ai1ec-top::before {
    top: 100%;
  }
  &.ai1ec-bottom::before {
    bottom: 100%;
  }
}

.ai1ec-popup-title {
  font-size: @font-size-base * 0.95;
  font-weight: bold;
  line-height: @line-height-base;
  background: none;
  border-bottom: none;
  padding: 0;
  a {
    font-weight: bold !important;
    &.ai1ec-buy-tickets {
      font-weight: normal !important;
    }
  }
}

.ai1ec-popup-excerpt {
  font-size: @font-size-base * 0.85;
  margin-top: 2px;
}

img[data-ai1ec-hidden] {
  display: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px !important;
  clip: rect(0, 0, 0, 0) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}