.adp-ar-labels-container {
    /* Need to be kept here since should appear inside AR iframe, and gets there. Model-compiled css is on page level only, and have no effect in the iframes... */
  pointer-events: all!important;
  .adp-ar-label {
  }

  .adp-ar-label-text {
    font-size: 80%;
    max-width: 60%;

    .event-ar-label {
      pointer-events: all;
      position: relative;
      background-color: yellow;
      border-radius: 5px;
      border: 1px solid var(--blk);
      color: #333;
      padding:5px 7px;
      /*   display: block;
         grid-template-columns: auto 1fr;
         grid-template-areas: "icon title" "icon date" "dst dst";
         gap: 5px;
        */
      .event-icon{
        grid-area: icon;
        width: 50px;
        height: 50px;
        float: left;
        margin: 5px 5px 0 0;
        background-color: var(--light-gray);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        aspect-ratio: 1;
      }
      .event-title{
        grid-area: title;
      }
      .event-date{
        font-size: 90%;
        grid-area: date;
      }
      .event-dst{
        font-size: 90%;
        grid-area: dst;
      }

      .adp-ar-labels-container.mode-list & {
        position: static;
      }
    }
  }

  .appearance-mode-button {
    top: 5px;
    bottom: auto;
    height: 22px;
    pointer-events: all;
    z-index: 3000000;
    /*  weirdness to fix clicks
    touch-action: manipulation;
     -webkit-tap-highlight-color: rgba(0,0,0,0.1);
     -webkit-touch-callout: none;
     */
  }

  /*  weirdness to fix clicks*/

}

.tile-name-header .ix-calendar-header {
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--main-color);
  background-color: var(--light-nav-color);
  gap: 0.75em;
  
  .ix-buttons {
        margin: 0 .5em;
        a {
            width: 22px;
        }
    }
}