:root {
  --frame-width: 1280;
  --frame-height: 720;
  --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
    "Source Han Sans CN", sans-serif;
  --running-text-duration: 34s;
  --role-gubernur-accent: #f5bd02;
  --role-gubernur-soft: #ddedfc;
  --role-wagub-accent: #ec899a;
  --role-wagub-soft: #faecf6;
  --role-setda-accent: #8265ea;
  --role-setda-soft: #e9e1f8;
  --role-lainnya-accent: #103578;
  --role-lainnya-soft: #ddedfc;
}

/* ── Responsive scale wrapper ── */
html, body {
  margin: 0;
  padding: 0;
  background: #000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-height: 100dvh;
}

.scale-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--frame-width) * 1px);
  height: calc(var(--frame-height) * 1px);
  transform-origin: center center;
  will-change: transform;
}

.main-container {
  overflow: hidden;
  width: calc(var(--frame-width) * 1px);
  height: calc(var(--frame-height) * 1px);
}

.main-container,
.main-container * {
  box-sizing: border-box;
}

input,
select,
textarea,
button {
  outline: 0;
}

.main-container {
  position: relative;
  width: calc(var(--frame-width) * 1px);
  height: calc(var(--frame-height) * 1px);
  margin: 0 auto;
  background: #ffffff;
  overflow: hidden;
}
.background {
  position: absolute;
  width: calc(var(--frame-width) * 1px);
  height: calc(var(--frame-height) * 1px);
  top: 0;
  left: 0;
  background: url('img/background_new3.png') no-repeat center;
  background-size: cover;
}
.page-layout {
  position: absolute;
  width: calc(var(--frame-width) * 1px);
  height: 695px;
  top: 12px;
  left: 0;
  z-index: 109;
}
.header-bar {
  position: relative;
  width: 1279px;
  height: 64px;
  margin: 107px 0 0 0;
  background: #103578;
  z-index: 106;
}
  .title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    top: -100px;
    left: 0;
    z-index: 110;
    pointer-events: none;
  }
  .icon {
  position: absolute;
    width: 67px;
    height: 50px;
    top: 5px;
    left: 960px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    line-height: 1;
  z-index: 113;
}
.celsius {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 44px;
  top: 10px;
  left: 1024px;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 36px;
  font-weight: 400;
  line-height: 43.568px;
  text-align: left;
  white-space: nowrap;
  z-index: 112;
}
.location {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 39px;
  top: 13px;
  left: 1146px;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 32px;
  font-weight: 400;
  line-height: 38.727px;
  text-align: left;
  white-space: nowrap;
  z-index: 111;
}
.date {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 29px;
  top: 18px;
  left: 36px;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 24px;
  font-weight: 700;
  line-height: 29px;
  text-align: left;
  white-space: nowrap;
  z-index: 110;
}
.logo-papuatengah {
  position: absolute;
  width: 73px;
  height: 97px;
  top: -110px;
  left: 36px;
  background: url('img/logo_pemprov_papuatengah.png')
    no-repeat center;
  background-size: cover;
  z-index: 114;
  cursor: pointer;
  pointer-events: auto;
}
.governor-activities {
  display: flex;
  align-items: flex-start;
  justify-content: center;
    position: relative;
  width: 738px;
  height: 58px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 48px;
  font-weight: 700;
  line-height: 58px;
  text-align: center;
  white-space: nowrap;
  z-index: 108;
}
.papua-tengah {
  display: flex;
  align-items: flex-start;
  justify-content: center;
    position: relative;
  width: 310px;
  height: 29px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 24px;
  font-weight: 700;
  line-height: 29px;
  text-align: center;
  white-space: nowrap;
  z-index: 109;
}
.rectangle-1 {
  position: absolute;
  width: 209px;
  height: 59px;
  top: 180px;
  left: 940px;
  background: #103578;
  z-index: 10;
  border-radius: 8px;
}
.other-agenda {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  width: 190px;
  height: 31.119px;
  top: 6.336px;
  left: 12px;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 13px;
  font-weight: 700;
  line-height: 15.733px;
  text-align: left;
  text-overflow: initial;
  z-index: 12;
  overflow: hidden;
}
.today-activities {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 334px;
  height: 44px;
  top: 182px;
  left: 292px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 36px;
  font-weight: 700;
  line-height: 43.568px;
  text-align: center;
  white-space: nowrap;
  z-index: 103;
}
.rectangle-2 {
  position: absolute;
  width: 331px;
  height: 433px;
  top: 208px;
  left: 940px;
  background: #bbd7ff;
  border: 1px solid #103578;
  z-index: 11;
  border-radius: 8px;
}
.rectangle-3 {
  position: relative;
  width: 309px;
  height: 58px;
  margin: 18px 0 0 11px;
  background: #ffffff;
  border: 1px solid #ffffff;
  z-index: 55;
  border-radius: 7px;
}
.rectangle-4 {
  position: absolute;
  width: 49.247px;
  height: 58px;
  top: -1px;
  left: -1px;
  background: #f5bd02;
  border: 1px solid #ffffff;
  z-index: 56;
  border-radius: 7px;
}
.rectangle-5 {
  position: relative;
  width: 43.453px;
  height: 58px;
  margin: 0 0 0 5.794px;
  font-size: 0px;
  background: #ddedfc;
  border: 1px solid #ffffff;
  z-index: 57;
  overflow: visible auto;
}
.time {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 35.728px;
  height: 16px;
  margin: 16px 0 0 1.931px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 11px;
  font-weight: 700;
  line-height: 13.313px;
  text-align: center;
  white-space: nowrap;
  z-index: 58;
}
.timezone {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 22.209px;
  height: 10px;
  margin: 1px 0 0 8.69px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
  text-align: center;
  white-space: nowrap;
  z-index: 61;
}
.flex-column-fa {
  position: absolute;
  width: 250.097px;
  height: 49.095px;
  top: 4px;
  left: 52.109px;
  font-size: 0px;
  z-index: 60;
}
.coordination-meeting {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  width: 250.097px;
  height: 35px;
  margin: 0 0 0 0;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 13px;
  font-weight: 700;
  line-height: 15.733px;
  text-align: left;
  z-index: 59;
}
.date-time {
  display: block;
  position: relative;
  height: 14px;
  margin: 0.09px 0 0 0;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 11px;
  font-weight: 700;
  line-height: 13.313px;
  text-align: left;
  white-space: nowrap;
  z-index: 60;
}
.rectangle-6 {
  position: relative;
  width: 309px;
  height: 58px;
  margin: 11px 0 0 11px;
  background: #ffffff;
  border: 1px solid #ffffff;
  z-index: 47;
  border-radius: 7px;
}
.rectangle-7 {
  position: absolute;
  width: 49.247px;
  height: 58px;
  top: -1px;
  left: -1px;
  background: #ec899a;
  border: 1px solid #ffffff;
  z-index: 48;
  border-radius: 7px;
}
.rectangle-8 {
  position: relative;
  width: 43.453px;
  height: 58px;
  margin: 0 0 0 5.794px;
  font-size: 0px;
  background: #faecf6;
  border: 1px solid #ffffff;
  z-index: 49;
  overflow: visible auto;
}
.time-9 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 35.728px;
  height: 16px;
  margin: 16px 0 0 1.931px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 11px;
  font-weight: 700;
  line-height: 13.313px;
  text-align: center;
  white-space: nowrap;
  z-index: 50;
}
.timezone-a {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 22.209px;
  height: 10px;
  margin: 1px 0 0 8.69px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
  text-align: center;
  white-space: nowrap;
  z-index: 52;
}
.flex-column {
  position: absolute;
  width: 250.097px;
  height: 49.095px;
  top: 4px;
  left: 52.109px;
  font-size: 0px;
  z-index: 53;
}
.audience-related {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  width: 250.097px;
  height: 35px;
  margin: 0 0 0 0;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 13px;
  font-weight: 700;
  line-height: 15.733px;
  text-align: left;
  z-index: 51;
}
.date-time-b {
  display: block;
  position: relative;
  height: 14px;
  margin: 0.09px 0 0 0;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 11px;
  font-weight: 700;
  line-height: 13.313px;
  text-align: left;
  white-space: nowrap;
  z-index: 53;
}
.rectangle-c {
  position: relative;
  width: 309px;
  height: 58px;
  margin: 11px 0 0 11px;
  background: #ffffff;
  border: 1px solid #ffffff;
  z-index: 39;
  border-radius: 7px;
}
.rectangle-d {
  position: absolute;
  width: 49.247px;
  height: 58px;
  top: -1px;
  left: -1px;
  background: #8265ea;
  border: 1px solid #ffffff;
  z-index: 40;
  border-radius: 7px;
}
.rectangle-e {
  position: relative;
  width: 43.453px;
  height: 58px;
  margin: 0 0 0 5.794px;
  font-size: 0px;
  background: #e9e1f8;
  border: 1px solid #ffffff;
  z-index: 41;
  overflow: visible auto;
}
.time-f {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 35.728px;
  height: 16px;
  margin: 16px 0 0 1.931px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 11px;
  font-weight: 700;
  line-height: 13.313px;
  text-align: center;
  white-space: nowrap;
  z-index: 42;
}
.timezone-10 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 22.209px;
  height: 10px;
  margin: 1px 0 0 8.69px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
  text-align: center;
  white-space: nowrap;
  z-index: 44;
}
.flex-column-11 {
  position: absolute;
  width: 250.097px;
  height: 49.095px;
  top: 4px;
  left: 52.109px;
  font-size: 0px;
  z-index: 45;
}
.operation-launch {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  width: 250.097px;
  height: 35px;
  margin: 0 0 0 0;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 13px;
  font-weight: 700;
  line-height: 15.733px;
  text-align: left;
  z-index: 43;
}
.date-time-12 {
  display: block;
  position: relative;
  height: 14px;
  margin: 0.09px 0 0 0;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 11px;
  font-weight: 700;
  line-height: 13.313px;
  text-align: left;
  white-space: nowrap;
  z-index: 45;
}
.rectangle-13 {
  position: relative;
  width: 309px;
  height: 58px;
  margin: 11px 0 0 11px;
  background: #ffffff;
  border: 1px solid #ffffff;
  z-index: 31;
  border-radius: 7px;
}
.rectangle-14 {
  position: absolute;
  width: 49.247px;
  height: 58px;
  top: -1px;
  left: -1px;
  background: #f5bd02;
  border: 1px solid #ffffff;
  z-index: 32;
  border-radius: 7px;
}
.rectangle-15 {
  position: relative;
  width: 43.453px;
  height: 58px;
  margin: 0 0 0 5.794px;
  font-size: 0px;
  background: #ddedfc;
  border: 1px solid #ffffff;
  z-index: 33;
  overflow: visible auto;
}
.time-16 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 35.728px;
  height: 16px;
  margin: 16px 0 0 1.931px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 11px;
  font-weight: 700;
  line-height: 13.313px;
  text-align: center;
  white-space: nowrap;
  z-index: 34;
}
.timezone-17 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 22.209px;
  height: 10px;
  margin: 1px 0 0 8.69px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
  text-align: center;
  white-space: nowrap;
  z-index: 36;
}
.flex-column-b-18 {
  position: absolute;
  width: 250.097px;
  height: 49.095px;
  top: 4px;
  left: 52.109px;
  font-size: 0px;
  z-index: 37;
}
.pembukaan-bimbingan-teknis {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  width: 250.097px;
  height: 35px;
  margin: 0 0 0 0;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 13px;
  font-weight: 700;
  line-height: 15.733px;
  text-align: left;
  z-index: 35;
}
.date-19 {
  display: block;
  position: relative;
  height: 14px;
  margin: 0.09px 0 0 0;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 11px;
  font-weight: 700;
  line-height: 13.313px;
  text-align: left;
  white-space: nowrap;
  z-index: 37;
}
.rectangle-1a {
  position: relative;
  width: 309px;
  height: 58px;
  margin: 11px 0 0 11px;
  background: #ffffff;
  border: 1px solid #ffffff;
  z-index: 23;
  border-radius: 7px;
}
.rectangle-1b {
  position: absolute;
  width: 49.247px;
  height: 58px;
  top: -1px;
  left: -1px;
  background: #f5bd02;
  border: 1px solid #ffffff;
  z-index: 24;
  border-radius: 7px;
}
.rectangle-1c {
  position: relative;
  width: 43.453px;
  height: 58px;
  margin: 0 0 0 5.794px;
  font-size: 0px;
  background: #ddedfc;
  border: 1px solid #ffffff;
  z-index: 25;
  overflow: visible auto;
}
.time-1d {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 35.728px;
  height: 16px;
  margin: 16px 0 0 1.931px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 11px;
  font-weight: 700;
  line-height: 13.313px;
  text-align: center;
  white-space: nowrap;
  z-index: 26;
}
.wit {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 22.209px;
  height: 10px;
  margin: 1px 0 0 8.69px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
  text-align: center;
  white-space: nowrap;
  z-index: 28;
}
.flex-column-1e {
  position: absolute;
  width: 250.097px;
  height: 49.095px;
  top: 4px;
  left: 52.109px;
  font-size: 0px;
  z-index: 29;
}
.pembukaan-bimbingan-teknis-1f {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  width: 250.097px;
  height: 35px;
  margin: 0 0 0 0;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 13px;
  font-weight: 700;
  line-height: 15.733px;
  text-align: left;
  z-index: 27;
}
.date-20 {
  display: block;
  position: relative;
  height: 14px;
  margin: 0.09px 0 0 0;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 11px;
  font-weight: 700;
  line-height: 13.313px;
  text-align: left;
  white-space: nowrap;
  z-index: 29;
}
.rectangle-21 {
  position: relative;
  width: 309px;
  height: 58px;
  margin: 11px 0 0 11px;
  background: #ffffff;
  border: 1px solid #ffffff;
  z-index: 15;
  border-radius: 7px;
}
.rectangle-22 {
  position: absolute;
  width: 49.247px;
  height: 58px;
  top: -1px;
  left: -1px;
  background: #f5bd02;
  border: 1px solid #ffffff;
  z-index: 16;
  border-radius: 7px;
}
.rectangle-23 {
  position: relative;
  width: 43.453px;
  height: 58px;
  margin: 0 0 0 5.794px;
  font-size: 0px;
  background: #ddedfc;
  border: 1px solid #ffffff;
  z-index: 17;
  overflow: visible auto;
}
.empty {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 35.728px;
  height: 16px;
  margin: 16px 0 0 1.931px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 11px;
  font-weight: 700;
  line-height: 13.313px;
  text-align: center;
  white-space: nowrap;
  z-index: 18;
}
.wit-24 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 22.209px;
  height: 10px;
  margin: 1px 0 0 8.69px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
  text-align: center;
  white-space: nowrap;
  z-index: 20;
}
.flex-column-d {
  position: absolute;
  width: 250.097px;
  height: 49.095px;
  top: 4px;
  left: 52.109px;
  font-size: 0px;
  z-index: 21;
}
.kegiatan-lainnya {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  width: 250.097px;
  height: 35px;
  margin: 0 0 0 0;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 13px;
  font-weight: 700;
  line-height: 15.733px;
  text-align: left;
  z-index: 19;
}
.empty-25 {
  display: block;
  position: relative;
  height: 14px;
  margin: 0.09px 0 0 0;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 11px;
  font-weight: 700;
  line-height: 13.313px;
  text-align: left;
  white-space: nowrap;
  z-index: 21;
}
.line {
  position: absolute;
  width: 497px;
  height: 4.108px;
  top: 222px;
  left: 211px;
  background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2026-03-27/ZLRgJG7bsw.png)
    no-repeat center;
  background-size: cover;
  z-index: 104;
}
.rectangle-26 {
  position: absolute;
  width: 1279px;
  height: 64px;
  top: 644px;
  left: 0;
  background: #032a54;
  z-index: 2;
}
.rectangle-27 {
  position: relative;
  width: 212px;
  height: 64px;
  margin: 0 0 0 -1px;
  background: #f5bd02;
  z-index: 6;
}
.time-28 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 122px;
  height: 35px;
  top: 15px;
  left: 44px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 40px;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
  white-space: nowrap;
  z-index: 8;
}
.vector {
  position: absolute;
  width: 21.23%;
  height: 70.31%;
  top: 15.63%;
  left: 7.08%;
  background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2026-03-27/N71AQbGhRe.png)
    no-repeat center;
  background-size: 100% 100%;
  z-index: 7;
}
/* ── Running text (marquee) container ── */
.realtime-info-wrap {
  position: absolute;
  height: 90px;
  top: 10px;
  left: 220px;
  width: calc(1279px - 220px);
  overflow: hidden;
  z-index: 4;
}

.realtime-info {
  display: inline-block;
  width: max-content;
  white-space: nowrap;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 32px;
  font-weight: 700;
  line-height: 38.727px;
  text-align: left;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: marquee-scroll var(--running-text-duration, 34s) linear infinite;
}

@keyframes marquee-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.today-activities-section {
  position: absolute;
  width: 897px;
  height: 344px;
  top: 180px;
  left: 23px;
  z-index: 91;
}

.today-activities-section .rectangle-2 {
  position: absolute;
  width: 897px;
  height: 461px;
  top: 0;
  left: 0;
  background: #ffffff00;
  border: 1px solid #cccccc00;
  z-index: 91;
  border-radius: 8px;
  overflow: hidden !important;
}

.activity-panel {
  overflow: hidden;
}

.upcoming-list {
  position: absolute;
  inset: 0;
  overflow: hidden;
  scroll-behavior: auto;
}

#upcomingActivityContainer {
  display: block;
  will-change: transform;
}

#upcomingActivityContainer .activity-day-divider {
  position: relative;
  width: 309px;
  margin: 12px 0 8px 11px;
  text-align: center;
}

#upcomingActivityContainer .activity-day-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px solid rgba(16, 53, 120, 0.28);
}

#upcomingActivityContainer .activity-day-divider-label {
  position: relative;
  display: inline-block;
  padding: 0 8px;
  color: #103578;
  background: #bbd7ff;
  font-family: Inter, var(--default-font-family);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#upcomingActivityContainer .activity-meta {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  min-width: 0;
}

#upcomingActivityContainer .activity-meta .date-time,
#upcomingActivityContainer .activity-meta .date-time-b,
#upcomingActivityContainer .activity-meta .date-time-12,
#upcomingActivityContainer .activity-meta .date-19,
#upcomingActivityContainer .activity-meta .date-20,
#upcomingActivityContainer .activity-meta .empty-25 {
  display: inline-block;
  height: auto;
  margin: 0;
  flex: 0 0 auto;
}

#upcomingActivityContainer .activity-attendee {
  display: inline-block;
  position: relative;
  margin: 0;
  padding-left: 10px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
  text-align: left;
  white-space: nowrap;
  opacity: 0.9;
}

#upcomingActivityContainer .activity-attendee:empty {
  display: none;
}

#upcomingActivityContainer .activity-role-gubernur .activity-side-outer {
  background: var(--role-gubernur-accent);
}

#upcomingActivityContainer .activity-role-gubernur .activity-side-inner {
  background: var(--role-gubernur-soft);
}

#upcomingActivityContainer .activity-role-wagub .activity-side-outer {
  background: var(--role-wagub-accent);
}

#upcomingActivityContainer .activity-role-wagub .activity-side-inner {
  background: var(--role-wagub-soft);
}

#upcomingActivityContainer .activity-role-setda .activity-side-outer {
  background: var(--role-setda-accent);
}

#upcomingActivityContainer .activity-role-setda .activity-side-inner {
  background: var(--role-setda-soft);
}

#upcomingActivityContainer .activity-role-lainnya .activity-side-outer {
  background: var(--role-lainnya-accent);
}

#upcomingActivityContainer .activity-role-lainnya .activity-side-inner {
  background: var(--role-lainnya-soft);
}

#upcomingActivityContainer .activity-role-empty .activity-side-outer {
  background: #a3aab4;
}

#upcomingActivityContainer .activity-role-empty .activity-side-inner {
  background: #e5e7eb;
}
.rectangle-2a {
  position: relative;
  width: 897px;
  height: 107px;
  margin: 0 0 0 0;
  background: #ffffff;
  border: 1px solid #ffffff;
  z-index: 91;
  border-radius: 10px;
}
.rectangle-2b {
  position: absolute;
  width: 103px;
  height: 107px;
  top: -1px;
  left: -1px;
  background: #f5bd02;
  border: 1px solid #ffffff;
  z-index: 92;
  border-radius: 10px;
}
.rectangle-2c {
  position: relative;
  width: 87px;
  height: 107px;
  margin: 0 0 0 16px;
  font-size: 0px;
  background: #ddedfc;
  border: 1px solid #ffffff;
  z-index: 93;
  overflow: visible auto;
}
.time-2d {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 71px;
  height: 29px;
  margin: 24px 0 0 6px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 24px;
  font-weight: 700;
  line-height: 29px;
  text-align: center;
  white-space: nowrap;
  z-index: 94;
}
.time-zone {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 32px;
  height: 19px;
  margin: 1px 0 0 25px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  white-space: nowrap;
  z-index: 99;
}
.flex-column-a {
  position: absolute;
  width: 86.62%;
  height: 80.03%;
  top: 7.48%;
  left: 12.37%;
  font-size: 0px;
  z-index: 102;
}
.executive-report {
  display: block;
  position: relative;
  height: 24px;
  margin: 0 0 0 0;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
  z-index: 95;
}
.attendees {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 24px;
  top: 31px;
  left: 318px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
  z-index: 98;
}
.event-date {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 24px;
  top: 32px;
  left: 30px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
  z-index: 97;
}
.vector-2e {
  position: absolute;
  width: 2.06%;
  height: 20.98%;
  top: 39.4%;
  left: 37.07%;
  background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2026-03-27/jD171aGoid.png)
    no-repeat center;
  background-size: 100% 100%;
  z-index: 102;
}
.vector-2f {
  position: absolute;
  width: 2.06%;
  height: 20.98%;
  top: 40.57%;
  left: 0;
  background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2026-03-27/2za6EUOZSG.png)
    no-repeat center;
  background-size: 100% 100%;
  z-index: 100;
}
.bpkp-pt {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 24px;
  top: 65px;
  left: 30px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
  z-index: 96;
}
.vector-30 {
  position: absolute;
  width: 2.06%;
  height: 22.14%;
  top: 77.86%;
  left: 0;
  background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2026-03-27/SPQjWTaWPb.png)
    no-repeat center;
  background-size: 100% 100%;
  z-index: 101;
}
.rectangle-31 {
  position: relative;
  width: 897px;
  height: 107px;
  margin: 12px 0 0 0;
  background: #ffffff;
  border: 1px solid #ffffff;
  z-index: 78;
  border-radius: 10px;
}
.rectangle-32 {
  position: absolute;
  width: 103px;
  height: 107px;
  top: -1px;
  left: -1px;
  background: #ec899a;
  border: 1px solid #ffffff;
  z-index: 79;
  border-radius: 10px;
}
.rectangle-33 {
  position: relative;
  width: 87px;
  height: 107px;
  margin: 0 0 0 16px;
  font-size: 0px;
  background: #faecf6;
  border: 1px solid #ffffff;
  z-index: 80;
  overflow: visible auto;
}
.time-34 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 68px;
  height: 29px;
  margin: 29px 0 0 9px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 24px;
  font-weight: 700;
  line-height: 29px;
  text-align: center;
  white-space: nowrap;
  z-index: 81;
}
.time-zone-35 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 32px;
  height: 19px;
  margin: 1px 0 0 27px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  white-space: nowrap;
  z-index: 82;
}
.flex-column-36 {
  position: absolute;
  width: 86.62%;
  height: 79.79%;
  top: 7.48%;
  left: 12.37%;
  font-size: 0px;
  z-index: 89;
}
.audiensi-terkait-perpanjangan {
  display: block;
  position: relative;
  height: 24px;
  margin: 0 0 0 0;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
  z-index: 83;
}
.yang-menghadiri {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 24px;
  top: 31px;
  left: 318px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
  z-index: 86;
}
.jumat-maret {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 24px;
  top: 32px;
  left: 30px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
  z-index: 85;
}
.vector-37 {
  position: absolute;
  width: 2.06%;
  height: 21.04%;
  top: 39.22%;
  left: 37.07%;
  background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2026-03-27/Kx43GeSVun.png)
    no-repeat center;
  background-size: 100% 100%;
  z-index: 89;
}
.vector-38 {
  position: absolute;
  width: 2.06%;
  height: 21.04%;
  top: 40.39%;
  left: 0;
  background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2026-03-27/zYEV4buhGo.png)
    no-repeat center;
  background-size: 100% 100%;
  z-index: 87;
}
.ptfi-di-distrik {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 24px;
  top: 65px;
  left: 30px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
  z-index: 84;
}
.vector-39 {
  position: absolute;
  width: 2.06%;
  height: 22.21%;
  top: 77.79%;
  left: 0;
  background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2026-03-27/ADCr2Vd7SS.png)
    no-repeat center;
  background-size: 100% 100%;
  z-index: 88;
}
.rectangle-3a {
  position: relative;
  width: 897px;
  height: 107px;
  margin: 11px 0 0 0;
  background: #ffffff;
  border: 1px solid #ffffff;
  z-index: 65;
  border-radius: 10px;
}
.rectangle-3b {
  position: absolute;
  width: 103px;
  height: 107px;
  top: -1px;
  left: -1px;
  background: #8265ea;
  border: 1px solid #ffffff;
  z-index: 66;
  border-radius: 10px;
}
.rectangle-3c {
  position: relative;
  width: 87px;
  height: 107px;
  margin: 0 0 0 16px;
  font-size: 0px;
  background: #e9e1f8;
  border: 1px solid #ffffff;
  z-index: 67;
  overflow: visible auto;
}
.time-3d {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 63px;
  height: 29px;
  margin: 30px 0 0 12px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 24px;
  font-weight: 700;
  line-height: 29px;
  text-align: center;
  white-space: nowrap;
  z-index: 68;
}
.wit-3e {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 32px;
  height: 19px;
  margin: 1px 0 0 27px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  white-space: nowrap;
  z-index: 69;
}
.flex-column-e {
  position: absolute;
  width: 86.62%;
  height: 79.56%;
  top: 7.48%;
  left: 12.37%;
  font-size: 0px;
  z-index: 76;
}
.kunjungan-kerja-nabire {
  display: block;
  position: relative;
  height: 24px;
  margin: 0 0 0 0;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
  z-index: 70;
}
.yang-menghadiri-3f {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 24px;
  top: 31px;
  left: 318px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
  z-index: 73;
}
.jumat-maret-40 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 24px;
  top: 32px;
  left: 30px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
  z-index: 72;
}
.vector-41 {
  position: absolute;
  width: 2.06%;
  height: 21.1%;
  top: 39.04%;
  left: 37.07%;
  background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2026-03-27/05xLE5XVa7.png)
    no-repeat center;
  background-size: 100% 100%;
  z-index: 76;
}
.vector-42 {
  position: absolute;
  width: 2.06%;
  height: 21.1%;
  top: 40.22%;
  left: 0;
  background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2026-03-27/3NunGg10Wy.png)
    no-repeat center;
  background-size: 100% 100%;
  z-index: 74;
}
.setda-provinsi-papua {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 24px;
  top: 65px;
  left: 30px;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
  z-index: 71;
}
.vector-43 {
  position: absolute;
  width: 2.06%;
  height: 22.27%;
  top: 77.73%;
  left: 0;
  background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2026-03-27/tgOorQDRWc.png)
    no-repeat center;
  background-size: 100% 100%;
  z-index: 75;
}

/* ── Auto-scroll for KEGIATAN HARI INI list ── */
.rectangle-2 {
  overflow: hidden !important;
}

.activity-scroll-inner {
  display: flex;
  flex-direction: column;
  --event-loop-distance: 50%;
  will-change: transform;
}

.activity-scroll-inner:hover {
  cursor: default;
}

@keyframes activity-autoscroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(calc(-1 * var(--event-loop-distance))); }
}

#fullscreen-btn {
  position: absolute;
  top: -80px;
  right: 36px;
  z-index: 114;
  background: #103578;
  color: #ffffff;
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 5px;
}

#fullscreen-btn:hover {
  background: #032a54;
}

.event-loop-separator {
  width: 100%;
  height: 4px;
  background: #103578;
  margin: 8px 0;
  z-index: 94;
}

#todayEventContainer {
  position: relative;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1), transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
  box-sizing: border-box;
  padding: 4px 0 0 0;
  backface-visibility: hidden;
}

#todayEventContainer .event-cycle-item {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-height: 98px;
  height: auto;
  margin: 0 0 10px 0 !important;
  padding-right: 10px;
  box-shadow: 0 8px 18px rgba(16, 53, 120, 0.08);
  overflow: hidden;
}

#todayEventContainer .event-cycle-item:last-child {
  margin-bottom: 0 !important;
}

#todayEventContainer .event-cycle-item .rectangle-2b {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 103px;
  height: auto;
  min-height: 98px;
}

#todayEventContainer .event-cycle-item .rectangle-2c {
  height: 100%;
  min-height: 98px;
  margin: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#todayEventContainer .event-cycle-item .flex-column-a,
#todayEventContainer .event-cycle-item .flex-column-36,
#todayEventContainer .event-cycle-item .flex-column-e {
  position: relative;
  box-sizing: border-box;
  inset: auto;
  width: auto;
  height: auto;
  flex: 1;
  padding: 12px 12px 12px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

#todayEventContainer .event-cycle-item .executive-report,
#todayEventContainer .event-cycle-item .audiensi-terkait-perpanjangan,
#todayEventContainer .event-cycle-item .kunjungan-kerja-nabire {
  display: block;
  height: auto;
  margin: 0;
  padding-right: 0;
  white-space: normal;
  line-height: 1.3;
}

/* Left color block represents who attends the event. */
#todayEventContainer .event-cycle-item.event-role-gubernur .rectangle-2b {
  background: var(--role-gubernur-accent);
}

#todayEventContainer .event-cycle-item.event-role-gubernur .rectangle-2c {
  background: var(--role-gubernur-soft);
}

#todayEventContainer .event-cycle-item.event-role-wagub .rectangle-2b {
  background: var(--role-wagub-accent);
}

#todayEventContainer .event-cycle-item.event-role-wagub .rectangle-2c {
  background: var(--role-wagub-soft);
}

#todayEventContainer .event-cycle-item.event-role-setda .rectangle-2b {
  background: var(--role-setda-accent);
}

#todayEventContainer .event-cycle-item.event-role-setda .rectangle-2c {
  background: var(--role-setda-soft);
}

#todayEventContainer .event-cycle-item.event-role-lainnya .rectangle-2b,
#todayEventContainer .event-cycle-item.event-role-default .rectangle-2b {
  background: var(--role-lainnya-accent);
}

#todayEventContainer .event-cycle-item.event-role-lainnya .rectangle-2c,
#todayEventContainer .event-cycle-item.event-role-default .rectangle-2c {
  background: var(--role-lainnya-soft);
}

/* Typography hierarchy: keep titles bold, make detail fields lighter */
#upcomingActivityContainer [class^="flex-column"] > span:first-child,
#todayEventContainer .event-cycle-item [class^="flex-column"] > span:first-child {
  font-weight: 700 !important;
}

#upcomingActivityContainer [class^="flex-column"] > span:last-child,
#todayEventContainer .event-cycle-item [class^="flex-column"] > span:nth-of-type(2),
#todayEventContainer .event-cycle-item [class^="flex-column"] > span:nth-of-type(3),
#todayEventContainer .event-cycle-item [class^="flex-column"] > span:nth-of-type(4) {
  font-weight: 500 !important;
}

#todayEventContainer.event-window-exit {
  opacity: 0;
  transform: translate3d(0, -10px, 0) scale(0.995);
}

#todayEventContainer.event-window-enter {
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.995);
}

#todayEventContainer.event-window-enter.event-window-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Typography hierarchy: keep titles bold, make detail fields lighter. */
#upcomingActivityContainer .coordination-meeting,
#upcomingActivityContainer .audience-related,
#upcomingActivityContainer .operation-launch,
#upcomingActivityContainer .pembukaan-bimbingan-teknis,
#upcomingActivityContainer .pembukaan-bimbingan-teknis-1f,
#upcomingActivityContainer .kegiatan-lainnya,
#todayEventContainer .executive-report,
#todayEventContainer .audiensi-terkait-perpanjangan,
#todayEventContainer .kunjungan-kerja-nabire {
  font-weight: 700 !important;
}

#upcomingActivityContainer .date-time,
#upcomingActivityContainer .date-time-b,
#upcomingActivityContainer .date-time-12,
#upcomingActivityContainer .date-19,
#upcomingActivityContainer .date-20,
#upcomingActivityContainer .empty-25,
#todayEventContainer .event-date,
#todayEventContainer .jumat-maret,
#todayEventContainer .jumat-maret-40,
#todayEventContainer .attendees,
#todayEventContainer .yang-menghadiri,
#todayEventContainer .yang-menghadiri-3f,
#todayEventContainer .bpkp-pt,
#todayEventContainer .ptfi-di-distrik,
#todayEventContainer .setda-provinsi-papua {
  font-weight: 400 !important;
}

#todayEventContainer .event-card-meta-list {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  flex-wrap: nowrap;
}

#todayEventContainer .event-card-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  background: transparent;
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}

#todayEventContainer .event-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  color: #103578;
  margin-top: 1px;
}

#todayEventContainer .event-meta-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

#todayEventContainer .event-meta-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#todayEventContainer .vector-2e,
#todayEventContainer .vector-2f,
#todayEventContainer .vector-30 {
  display: none !important;
}

.activity-empty-state {
  margin: 18px 12px 0;
  padding: 18px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px dashed rgba(16, 53, 120, 0.35);
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}

.event-greeting-popup-wrapper {
  width: 100%;
  min-height: 344px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  animation: greetingWrapperFade 900ms ease-out both;
}

.event-greeting-popup {
  width: min(640px, 100%);
  border-radius: 14px;
  background: linear-gradient(145deg, #ffffff, #eef5ff);
  border: 2px solid #103578;
  box-shadow: 0 12px 30px rgba(16, 53, 120, 0.22);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: greetingCardFloat 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.event-greeting-title {
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.event-greeting-subtitle {
  color: #103578;
  font-family: Inter, var(--default-font-family);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.event-greeting-meta {
  margin-top: 4px;
  color: rgba(16, 53, 120, 0.72);
  font-family: Inter, var(--default-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

@keyframes greetingWrapperFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes greetingCardFloat {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scale(1.002);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}