.calendar {
  position: relative;
  overflow: auto; }
  .calendar.loading .mbsc-schedule-wrapper:before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: black;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    animation: loading 1s ease-out infinite; }
  .calendar.loading.force-loading .mbsc-schedule-event {
    opacity: 0.7; }
  .calendar a.simple-picker {
    background: none !important; }
    .calendar a.simple-picker * {
      color: black !important; }
  .calendar .mbsc-schedule-column, .calendar .mbsc-schedule-time-cont-inner {
    padding: 0 !important; }
    .calendar .mbsc-schedule-column .mbsc-schedule-events, .calendar .mbsc-schedule-time-cont-inner .mbsc-schedule-events {
      margin: 0;
      right: 1em; }
  .calendar .mbsc-schedule-color {
    background: rgba(0, 0, 0, 0.15) !important; }
  .calendar .mbsc-schedule-date-header, .calendar .mbsc-timeline-header-date {
    display: none; }
  .calendar .mbsc-schedule-time-wrapper,
  .calendar .mbsc-schedule-item {
    height: 3.5em; }
  .calendar .mbsc-timeline-header-column, .calendar .mbsc-timeline-column {
    width: 6em; }
  .calendar .mbsc-calendar-header {
    display: none; }
  .calendar .calendar-title {
    font-size: 1.4em;
    padding-left: 0.5em;
    font-weight: 400; }
  .calendar .mbsc-timeline-resource {
    padding-left: 0 !important;
    padding: 0 0 0 1em !important; }
    .calendar .mbsc-timeline-resource .mbsc-timeline-resource-title {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 !important;
      font-weight: 300; }
    .calendar .mbsc-timeline-resource .mbsc-timeline-resource-icon {
      height: 100%;
      padding: 0 !important;
      margin: 0 0.5em 0 0 !important;
      padding: 0 !important; }
      .calendar .mbsc-timeline-resource .mbsc-timeline-resource-icon svg {
        height: 100% !important; }
    .calendar .mbsc-timeline-resource .resource {
      display: flex;
      align-items: center;
      gap: 0.8em; }
      .calendar .mbsc-timeline-resource .resource .resource-name {
        flex-grow: 1;
        order: 2;
        white-space: nowrap; }
  .calendar .mbsc-schedule-event {
    padding: 0 0;
    margin: 0;
    transition: all ease-in-out 0.1s; }
    .calendar .mbsc-schedule-event .event-content {
      flex-grow: 1;
      color: white;
      height: 100%;
      position: relative;
      transition: all ease-in-out 0.1s;
      overflow: hidden;
      background: #3e67ba; }
      .calendar .mbsc-schedule-event .event-content .event-content-inner {
        position: relative;
        font-size: 13px;
        line-height: 14px;
        padding: 6px;
        padding-left: 9px;
        display: flex;
        flex-direction: column; }
        .calendar .mbsc-schedule-event .event-content .event-content-inner .event-title {
          font-weight: 600; }
        .calendar .mbsc-schedule-event .event-content .event-content-inner .event-time {
          opacity: 0.5;
          margin-top: 0.2em;
          font-family: monospace; }
      .calendar .mbsc-schedule-event .event-content.dc-4[data-status='Slot'] {
        background-color: #6c977d; }
        .calendar .mbsc-schedule-event .event-content.dc-4[data-status='Slot'][data-status='Confirmed'] {
          opacity: 0.5 !important; }
      .calendar .mbsc-schedule-event .event-content.dc-4:not([data-status='Slot']) {
        opacity: 0.4; }
      .calendar .mbsc-schedule-event .event-content.dc-5 {
        padding: 0; }
        .calendar .mbsc-schedule-event .event-content.dc-5 .event-content-inner {
          padding: 5px;
          text-align: center; }
        .calendar .mbsc-schedule-event .event-content.dc-5:before {
          display: none; }
        .calendar .mbsc-schedule-event .event-content.dc-5 .event-time {
          display: none; }
        .calendar .mbsc-schedule-event .event-content.dc-5 .event-title {
          font-size: 10px;
          line-height: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          hyphens: auto; }
          .calendar .mbsc-schedule-event .event-content.dc-5 .event-title > * {
            display: inline-block; }
        .calendar .mbsc-schedule-event .event-content.dc-5 .event-tags {
          right: 4px;
          bottom: 4px; }
          .calendar .mbsc-schedule-event .event-content.dc-5 .event-tags *:before {
            font-size: 10px; }
      .calendar .mbsc-schedule-event .event-content .event-tags {
        position: absolute;
        right: 6px;
        bottom: 6px;
        display: flex;
        z-index: 99999 !important;
        align-items: center;
        justify-content: center;
        gap: 0.25em; }
        .calendar .mbsc-schedule-event .event-content .event-tags .tag {
          width: 16px;
          height: 16px;
          position: relative;
          background: white;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          color: black;
          font-size: 10px;
          border-radius: 100% !important; }
          .calendar .mbsc-schedule-event .event-content .event-tags .tag.tag-icon {
            font-size: 16px;
            line-height: 16px;
            border: none;
            background: none;
            color: white;
            display: inline-flex;
            align-items: center;
            gap: 0.35em; }
            .calendar .mbsc-schedule-event .event-content .event-tags .tag.tag-icon:before {
              font-family: 'FontAwesome';
              color: white; }
            .calendar .mbsc-schedule-event .event-content .event-tags .tag.tag-icon.has-html {
              width: unset;
              height: unset; }
              .calendar .mbsc-schedule-event .event-content .event-tags .tag.tag-icon.has-html span {
                font-weight: 200;
                font-size: 0.8em;
                order: 1;
                opacity: 0.8; }
              .calendar .mbsc-schedule-event .event-content .event-tags .tag.tag-icon.has-html:before {
                order: 2; }
          .calendar .mbsc-schedule-event .event-content .event-tags .tag img {
            width: 100%;
            height: 100%;
            object-fit: cover; }
          .calendar .mbsc-schedule-event .event-content .event-tags .tag[data-type='info'] {
            background: white !important;
            font-size: 14px; }
            .calendar .mbsc-schedule-event .event-content .event-tags .tag[data-type='info']:before {
              color: black; }
          .calendar .mbsc-schedule-event .event-content .event-tags .tag[data-type='pending'] > * {
            display: none; }
          .calendar .mbsc-schedule-event .event-content .event-tags .tag[data-type='pending']:hover > * {
            display: block; }
      .calendar .mbsc-schedule-event .event-content:before, .calendar .mbsc-schedule-event .event-content:after {
        transition: all ease-in-out 0.4s; }
      .calendar .mbsc-schedule-event .event-content[data-status='Pending'] {
        opacity: 0.4; }
      .calendar .mbsc-schedule-event .event-content.new .event-title-outer {
        animation: pulse 2s ease-in-out infinite; }
      .calendar .mbsc-schedule-event .event-content.old {
        opacity: 0.7; }
      .calendar .mbsc-schedule-event .event-content.now {
        background: #6d8396; }
      .calendar .mbsc-schedule-event .event-content.warning {
        background: #a78f4f; }
      .calendar .mbsc-schedule-event .event-content.available .tag:before, .calendar .mbsc-schedule-event .event-content.unavailable .tag:before {
        color: black; }
      .calendar .mbsc-schedule-event .event-content.available {
        background: white;
        color: black; }
      .calendar .mbsc-schedule-event .event-content.unavailable {
        background: #697179; }
    .calendar .mbsc-schedule-event.selected {
      z-index: 100 !important; }
      .calendar .mbsc-schedule-event.selected .event-content {
        opacity: 1 !important;
        border: solid 3px black; }
    .calendar .mbsc-schedule-event.bookingsection .event-time > *:not(:first-child) {
      display: none; }
    .calendar .mbsc-schedule-event:hover .event-content {
      opacity: 1 !important; }
      .calendar .mbsc-schedule-event:hover .event-content:before {
        background-color: black; }
    .calendar .mbsc-schedule-event .mbsc-schedule-event-buffer,
    .calendar .mbsc-schedule-event .mbsc-timeline-event-buffer {
      border-radius: 0;
      padding: 0;
      margin: -2px 0 0 -2px;
      width: 100%;
      border: solid 1px white;
      font-family: monospace; }
      .calendar .mbsc-schedule-event .mbsc-schedule-event-buffer .mbsc-schedule-event-buffer-bg,
      .calendar .mbsc-schedule-event .mbsc-timeline-event-buffer .mbsc-schedule-event-buffer-bg {
        width: 100%;
        height: 100%;
        background: #D9D9D9; }
      .calendar .mbsc-schedule-event .mbsc-schedule-event-buffer .mbsc-schedule-event-buffer-time,
      .calendar .mbsc-schedule-event .mbsc-timeline-event-buffer .mbsc-schedule-event-buffer-time {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 12px; }
  .calendar .event-content.show-diff {
    position: relative; }
    .calendar .event-content.show-diff:before, .calendar .event-content.show-diff:after {
      content: '';
      position: absolute;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 4px; }
    .calendar .event-content.show-diff:before {
      left: 0;
      right: 0;
      bottom: 100%;
      height: var(--end-diff); }
    .calendar .event-content.show-diff:after {
      left: 0;
      right: 0;
      top: 100%;
      height: var(--end-diff); }
  .calendar .mbsc-timeline .event-content:before, .calendar .mbsc-timeline .event-content:after {
    width: var(--start-diff);
    height: 100%; }
  .calendar .mbsc-timeline .event-content:before {
    left: calc(var(--start-diff) * -1);
    right: unset;
    top: 0; }
  .calendar .mbsc-timeline .event-content:after {
    left: unset;
    right: calc(var(--end-diff) * -1);
    top: 0; }
  .calendar .mbsc-schedule-invalid {
    background: #697179; }
  .calendar .x-toolbar .x-btn {
    user-select: none;
    font-size: 1.2em; }
    .calendar .x-toolbar .x-btn.x-btn-pressed {
      opacity: 0.4; }
    .calendar .x-toolbar .x-btn .x-form-trigger-wrap {
      opacity: unset; }
    .calendar .x-toolbar .x-btn .x-btn-icon-el {
      margin-top: 2px; }
  .calendar .x-toolbar .x-tip {
    pointer-events: none; }
  .calendar .mbsc-schedule-item:hover {
    background: rgba(62, 103, 186, 0.05); }
  .calendar .mbsc-schedule-item.contextvisible {
    background: rgba(62, 103, 186, 0.25); }

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  30% {
    box-shadow: 0 0 0 6px rgba(167, 143, 79, 0.4); }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

@keyframes loading {
  from {
    width: 0%; }
  to {
    width: 100%; } }

.shiftplan .x-grid-cell, .shiftplan .x-column-header {
  border-right: solid 1px rgba(0, 0, 0, 0.1) !important; }

.shiftplan .x-column-header .x-column-header-text {
  overflow: visible !important; }

.shiftplan .grid-col-header {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 15px; }
  .shiftplan .grid-col-header > * {
    white-space: nowrap; }
  .shiftplan .grid-col-header .day-number {
    font-weight: bold; }
  .shiftplan .grid-col-header .day-name {
    opacity: 0.5;
    text-transform: uppercase;
    font-size: 0.8em; }

.shiftplan .x-grid-cell[data-columnid*='shiftplancolumn'] .x-grid-cell-inner {
  display: flex !important;
  align-items: center;
  padding: 0 !important;
  height: 31px !important; }

.shiftplan .shiftplan-column-editor {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column; }
  .shiftplan .shiftplan-column-editor > div {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    font-size: 0.7em;
    line-height: 1em;
    flex-grow: 1;
    white-space: break-spaces;
    color: rgba(255, 255, 255, 0.8); }

.shiftplan .shiftplan-column-summary {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-around;
  font-weight: 400; }
  .shiftplan .shiftplan-column-summary > div {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    height: 31px;
    flex-grow: 1;
    color: white; }
    .shiftplan .shiftplan-column-summary > div[data-status='missing'] {
      background: #d42424; }
    .shiftplan .shiftplan-column-summary > div[data-status='valid'] {
      background: #4a8104; }
    .shiftplan .shiftplan-column-summary > div:hover {
      opacity: 0.9; }