@import url('https://fonts.googleapis.com/css2?family=Russo+One&family=Roboto:wght@400;500;700&display=swap');

    :root {
      --bg-color: #F0EEE9;
      --header-bg: #1A472A;
      --line-color: #D1CFC8;
      --text-dark: #3D3D3D;
      --text-light: #FFFFFF;

      --color-mandated: #1A472A;
      --color-high-level: #677F6B;
      --color-gala: #4A7856;
      --color-host-country: #A3D2B2;
      --color-pavilion: #6EF29D;

      --hour-height: 50px;
    }

    .csspicker-agenda-container {
      background-color: var(--bg-color);
      padding: 20px;
      font-family: 'Roboto', sans-serif;
      color: var(--text-dark);
    }

    .csspicker-agenda-title {

      color: var(--text-light);
      font-family: 'Russo One', sans-serif;
      font-size: 40px;
      text-align: center;
      padding: 10px;
      letter-spacing: 2px;
      margin-bottom: 10px;
    }

    .csspicker-schedule-grid {
      display: grid;
      grid-template-columns: 60px 1fr 1fr 1fr 1fr;
      background-color: white;
      border: 1px solid var(--line-color);
    }

    .csspicker-grid-header {
      text-align: center;
      font-weight: 700;
      font-size: 12px;
      padding: 10px 5px;
      border-bottom: 1px solid var(--line-color);
    }

    .csspicker-header-time {
      background-color: #EAE8E3;
    }

    .csspicker-header-day {
      background-color: var(--header-bg);
      color: var(--text-light);
      font-size: 11px;
    }

    .csspicker-time-axis {
      grid-column: 1 / 2;
      background-image: repeating-linear-gradient(to bottom,
          transparent,
          transparent calc(var(--hour-height) - 1px),
          var(--line-color) calc(var(--hour-height) - 1px),
          var(--line-color) var(--hour-height));
      background-size: 100% var(--hour-height);
    }


    .csspicker-time-label {
      height: var(--hour-height);
      text-align: center;
      font-size: 12px;
      position: relative;
    }



    .csspicker-onwards-row {
      display: grid;
      grid-template-columns: 60px 1fr;
      align-items: center;
      grid-column: 1 / -1;
      margin-top: 4px;
      padding-bottom: 6px;
    }

    .onwards-label {
      font-weight: bold;
      font-size: 13px;
      text-align: center;
      padding-left: 5px;
      color: #000;
    }

    .dinner-event {
      background-color: var(--header-bg);
      border-radius: 5px;
      font-size: 14px;
      font-weight: 600;
      color: #F0EEE9;
      text-align: center;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }

    .csspicker-day-column {
      position: relative;
      border-left: 1px solid var(--line-color);
      background-image: repeating-linear-gradient(to bottom, transparent, transparent calc(var(--hour-height) - 1px), var(--line-color) calc(var(--hour-height) - 1px), var(--line-color) var(--hour-height));
      background-size: 100% var(--hour-height);
    }

    .csspicker-event-block {
      position: absolute;
      color: var(--text-light);
      border-radius: 12px;
      padding: 8px;
      font-size: 11px;
      font-weight: 500;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      overflow: hidden;
      line-height: 1.2;
    }

    .csspicker-event-block.vertical {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      padding: 12px 4px;
      font-size: 12px;
    }

    .csspicker-event-block.bg-mandated {
      background-color: var(--color-mandated);
    }

    .csspicker-event-block.bg-high-level {
      background-color: var(--color-high-level);
    }

    .csspicker-event-block.bg-gala {
      background-color: var(--color-gala);
    }

    .csspicker-event-block.bg-host-country {
      background-color: var(--color-host-country);
      color: var(--text-dark);
    }

    .csspicker-event-block.bg-pavilion {
      background-color: var(--color-pavilion);
      color: var(--text-dark);
    }

    .csspicker-legend-wrapper {
      margin-top: 20px;
      padding: 15px;
      background-color: #DFDCD5;
    }

    .csspicker-legend-title {
      background-color: var(--color-high-level);
      color: var(--text-light);
      text-align: center;
      padding: 8px;
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 15px;
    }

    .csspicker-legend-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px 20px;
      font-size: 11px;
    }

    .csspicker-legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .csspicker-legend-color-box {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
    }