:root {
  --fc-event-bg-color: #78716c;
  --fc-event-border-color: var(--fc-event-bg-color);
  --fc-button-bg-color: var(--primary-color);
  --fc-button-border-color: var(--fc-button-bg-color);
  --fc-button-hover-bg-color: #7775da;
  --fc-button-hover-border-color: var(--fc-button-hover-bg-color);
}

.fc-daygrid-day-number {
  font-size: 16px;
  color: rgb(34, 34, 34);
  text-decoration: none;
}

/* .fc-day-blocking .fc-daygrid-day-number {
  text-decoration: line-through;
  color: rgb(113, 113, 113);
} */

.fc-day:not(.fc-day-other).fc-day-blocking .fc-daygrid-day-number:not(.fc-daygrid-month-start) {
  text-decoration: line-through;
  color: rgb(113, 113, 113);
}

.fc-day:not(.fc-day-other):not(.fc-day-blocking) .fc-daygrid-day-number.fc-daygrid-month-start:after {
  content: ' 1';
}

.fc-day:not(.fc-day-other).fc-day-blocking .fc-daygrid-day-number.fc-daygrid-month-start:after {
  text-decoration: line-through;
  color: rgb(113, 113, 113);
  content: ' 1';
}

.fc-day:not(.fc-day-other) .fc-day-blocking .fc-daygrid-day-number {
  opacity: 0.3;
}

.fc-day .fc-blocking {
  background: repeating-linear-gradient(
    45deg,
    #7e7f82a4,
    #7e7f82a4 10px,
    #cacacaa4 10px,
    #cacacaa4 20px
  )
}

.fc-day-past {
  background-color: rgb(222, 222, 222, 0.3);

  .fc-daygrid-day-number {
    color: rgb(113, 113, 113);
  }
}

.fc-daygrid-day-number {
  color: rgb(34, 34, 34);
}

.fc-col-header-cell a {
  color: rgb(113, 113, 113);
  text-decoration: none;
  font-weight: normal;
  font-size: 0.8em;
}

.fc-daygrid-event {
  border-radius: 100px;
  padding: 0 5px;
  font-weight: 600;
}

.fc-daygrid-day-events .fc-daygrid-event-harness:has(.fc-event-end) {
  min-width: 50px;
  margin-right: 35px;
  margin-left: -20px;
}

@media (min-width: 768px) {
  .fc-daygrid-day-events .fc-daygrid-event-harness:has(.fc-event-end) {
    margin-right: 50px;
  }
}

@media (min-width: 992px) {
  .fc-daygrid-day-events .fc-daygrid-event-harness:has(.fc-event-end) {
    margin-right: 75px;
  }
}

@media (min-width: 1200px) {
  .fc-daygrid-day-events .fc-daygrid-event-harness:has(.fc-event-end) {
    margin-right: 97px;
  }
}

@media (min-width: 1400px) {
  .fc-daygrid-day-events .fc-daygrid-event-harness:has(.fc-event-end) {
    margin-right: 115px;
  }
}

.fc-daygrid-day-events .fc-daygrid-event-harness:has(.fc-event-start) {
  margin-left: 30px;
}

.fc-event-title {
  visibility: hidden;
}

.fc-event-start .fc-event-title {
  visibility: visible;
}

.fc-daygrid-event-harness-abs {
  top: 0 !important;
}

.fc-daygrid-day-bottom {
  margin: 0 !important;
}

td.fc-day-today {
  background: none !important;
  > div {
    border: 2px solid black;
    border-radius: 10px;
  }
}

#occupancy-calendar {
  max-width: 800px;
  margin: auto;

  .fc-daygrid-day-frame:has(.occupancy) .fc-daygrid-day-events {
    display: none;
  }

  .occupancy {
    display: block;
    text-align: center;
    font-size: 2em;
  }

  .fc-day-disabled .occupancy {
    color: rgb(183, 183, 183);
  }
}
@keyframes highlight-ring {
  0% {
    @apply ring-0 ring-offset-0;
  }
  15% {
    @apply ring-2 ring-primary ring-offset-2;
  }
  85% {
    @apply ring-2 ring-primary ring-offset-2;
  }
  100% {
    @apply ring-0 ring-offset-0;
  }
}

.highlight-ring {
  animation: highlight-ring 5s ease-in-out forwards;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

@import "components/animations";

 .container {
  padding-top: 1.5rem;
 }

 .table.bookings {
  font-size: 0.8em;
 }

 .pagination {
  text-align: center;
  padding: 0.3em;
  cursor: default; }
  .pagination a, .pagination span, .pagination em {
    padding: 0.2em 0.5em; }
  .pagination .disabled {
    color: #aaaaaa; }
  .pagination .current {
    font-style: normal;
    font-weight: bold;
    color: #ff0084; }
  .pagination a {
    border: 1px solid #dddddd;
    color: #0063dc;
    text-decoration: none; }
    .pagination a:hover, .pagination a:focus {
      border-color: #003366;
      background: #0063dc;
      color: white; }
  .pagination .page_info {
    color: #aaaaaa;
    padding-top: 0.8em; }
  .pagination .previous_page, .pagination .next_page {
    border-width: 2px; }
  .pagination .previous_page {
    margin-right: 1em; }
  .pagination .next_page {
    margin-left: 1em; }


.occupancies-chart, .revenue-chart, .listings-chart, .occupancy-chart, .adr-chart {
  height: 250px;
  margin-top: 20px;
}

path.leaflet-interactive:focus {
  outline: none;
}

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.twitter-typeahead {
  display: block !important;
}

.tt-dropdown-menu, .tt-menu {
  z-index: 5040 !important;
  max-width: 422px;
  width: 100%;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-align: left;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 8px 20px;
  line-height: 24px;
  cursor: pointer;
  transition: background-color 0.2s ease;

  .subtitle {
    font-size: 14px;
    color: #535353;
  }
}

.tt-suggestion:hover,
.tt-suggestion.tt-is-under-cursor,
.tt-suggestion.tt-cursor {
  cursor: pointer;
  background-color: #f5f5f4;
}

.tt-suggestion p {
  margin: 0;
}

mark{
  background: transparent;
  color: black;
  font-weight: bold;
}