/* 16:9 schedule template master layout and variants. */

.schedule.ratio-16-9 {
  width: 1920px;
  height: 1080px;
  font-family: var(--template-blue-font);
}

.ratio-16-9 {
  --template-main-text: #202024;
  --template-sub-text: #164a76;
  --template-date-text: #194d84;
  --template-day-text: #1e1f25;
  --template-light-text: #ffffff;
  --template-social-text: #1d4e83;
  --template-week-arrow: #6da9de;
  --template-bg: url("assets/template-16x9-blue/background.png");
  --template-stream-wide-bg: url("assets/template-16x9-blue/stream-card-wide.png");
  --template-stream-half-bg: url("assets/template-16x9-blue/stream-card-half.png");
  --template-offline-bg: url("assets/template-16x9-blue/offline-card.png");
  --template-date-box-bg: url("assets/template-16x9-blue/date-box.png");
  --template-time-bg: url("assets/template-16x9-blue/time-box.png");
  --template-credit-bg: url("assets/template-16x9-blue/credit-box.png");
  --template-week-month-bg: url("assets/template-16x9-blue/week-month.png");
  --template-week-date-bg: url("assets/template-16x9-blue/week-date.png");
  --template-social-x-bg: url("assets/template-16x9-blue/social-x.png");
  --template-social-youtube-bg: url("assets/template-16x9-blue/social-youtube.png");
  --template-social-twitch-bg: url("assets/template-16x9-blue/social-twitch.png");
  --template-social-instagram-bg: url("assets/template-16x9-blue/social-instagram.png");
  --template-social-hashtag-bg: url("assets/template-16x9-blue/social-hashtag.png");
}

.ratio-16-9.variant-pink {
  --template-main-text: #552938;
  --template-sub-text: #e86a80;
  --template-date-text: #552938;
  --template-day-text: #e86a80;
  --template-social-text: #552938;
  --template-week-arrow: #e86a80;
  --template-bg: url("assets/template-16x9-pink/background.png");
  --template-stream-wide-bg: url("assets/template-16x9-pink/stream-card-wide.png");
  --template-stream-half-bg: url("assets/template-16x9-pink/stream-card-half.png");
  --template-offline-bg: url("assets/template-16x9-pink/offline-card.png");
  --template-date-box-bg: url("assets/template-16x9-pink/date-box.png");
  --template-time-bg: url("assets/template-16x9-pink/time-box.png");
  --template-credit-bg: url("assets/template-16x9-pink/credit-box.png");
  --template-week-month-bg: url("assets/template-16x9-pink/week-month.png");
  --template-week-date-bg: url("assets/template-16x9-pink/week-date.png");
  --template-social-x-bg: url("assets/template-16x9-pink/social-x.png");
  --template-social-youtube-bg: url("assets/template-16x9-pink/social-youtube.png");
  --template-social-twitch-bg: url("assets/template-16x9-pink/social-twitch.png");
  --template-social-instagram-bg: url("assets/template-16x9-pink/social-instagram.png");
  --template-social-hashtag-bg: url("assets/template-16x9-pink/social-hashtag.png");
}

.ratio-16-9.variant-green {
  --template-main-text: #2e2e2c;
  --template-sub-text: #586224;
  --template-date-text: #586224;
  --template-day-text: #2e2e2c;
  --template-social-text: #586224;
  --template-week-arrow: #586224;
  --template-bg: url("assets/template-16x9-green/background.png");
  --template-stream-wide-bg: url("assets/template-16x9-green/stream-card-wide.png");
  --template-stream-half-bg: url("assets/template-16x9-green/stream-card-half.png");
  --template-offline-bg: url("assets/template-16x9-green/offline-card.png");
  --template-date-box-bg: url("assets/template-16x9-green/date-box.png");
  --template-time-bg: url("assets/template-16x9-green/time-box.png");
  --template-credit-bg: url("assets/template-16x9-green/credit-box.png");
  --template-week-month-bg: url("assets/template-16x9-green/week-month.png");
  --template-week-date-bg: url("assets/template-16x9-green/week-date.png");
  --template-social-x-bg: url("assets/template-16x9-green/social-x.png");
  --template-social-youtube-bg: url("assets/template-16x9-green/social-youtube.png");
  --template-social-twitch-bg: url("assets/template-16x9-green/social-twitch.png");
  --template-social-instagram-bg: url("assets/template-16x9-green/social-instagram.png");
  --template-social-hashtag-bg: url("assets/template-16x9-green/social-hashtag.png");
}

.ratio-16-9.variant-brown {
  --template-main-text: #702e17;
  --template-sub-text: #b5632e;
  --template-date-text: #9b4c3b;
  --template-day-text: #702e17;
  --template-social-text: #9b4c3b;
  --template-week-arrow: #b5632e;
  --template-bg: url("assets/template-16x9-brown/background.png");
  --template-stream-wide-bg: url("assets/template-16x9-brown/stream-card-wide.png");
  --template-stream-half-bg: url("assets/template-16x9-brown/stream-card-half.png");
  --template-offline-bg: url("assets/template-16x9-brown/offline-card.png");
  --template-date-box-bg: url("assets/template-16x9-brown/date-box.png");
  --template-time-bg: url("assets/template-16x9-brown/time-box.png");
  --template-credit-bg: url("assets/template-16x9-brown/credit-box.png");
  --template-week-month-bg: url("assets/template-16x9-brown/week-month.png");
  --template-week-date-bg: url("assets/template-16x9-brown/week-date.png");
  --template-social-x-bg: url("assets/template-16x9-brown/social-x.png");
  --template-social-youtube-bg: url("assets/template-16x9-brown/social-youtube.png");
  --template-social-twitch-bg: url("assets/template-16x9-brown/social-twitch.png");
  --template-social-instagram-bg: url("assets/template-16x9-brown/social-instagram.png");
  --template-social-hashtag-bg: url("assets/template-16x9-brown/social-hashtag.png");
}

.ratio-16-9.variant-red {
  --template-main-text: #5a1f1b;
  --template-sub-text: #cf3217;
  --template-date-text: #8f2418;
  --template-day-text: #5a1f1b;
  --template-social-text: #8f2418;
  --template-week-arrow: #cf3217;
  --template-bg: url("assets/template-16x9-red/background.png");
  --template-stream-wide-bg: url("assets/template-16x9-red/stream-card-wide.png");
  --template-stream-half-bg: url("assets/template-16x9-red/stream-card-half.png");
  --template-offline-bg: url("assets/template-16x9-red/offline-card.png");
  --template-date-box-bg: url("assets/template-16x9-red/date-box.png");
  --template-time-bg: url("assets/template-16x9-red/time-box.png");
  --template-credit-bg: url("assets/template-16x9-red/credit-box.png");
  --template-week-month-bg: url("assets/template-16x9-red/week-month.png");
  --template-week-date-bg: url("assets/template-16x9-red/week-date.png");
  --template-social-x-bg: url("assets/template-16x9-red/social-x.png");
  --template-social-youtube-bg: url("assets/template-16x9-red/social-youtube.png");
  --template-social-twitch-bg: url("assets/template-16x9-red/social-twitch.png");
  --template-social-instagram-bg: url("assets/template-16x9-red/social-instagram.png");
  --template-social-hashtag-bg: url("assets/template-16x9-red/social-hashtag.png");
}

.ratio-16-9.variant-purple {
  --template-main-text: #4b254f;
  --template-sub-text: #b25bd0;
  --template-date-text: #6b3d84;
  --template-day-text: #4b254f;
  --template-social-text: #6b3d84;
  --template-week-arrow: #b25bd0;
  --template-bg: url("assets/template-16x9-purple/background.png");
  --template-stream-wide-bg: url("assets/template-16x9-purple/stream-card-wide.png");
  --template-stream-half-bg: url("assets/template-16x9-purple/stream-card-half.png");
  --template-offline-bg: url("assets/template-16x9-purple/offline-card.png");
  --template-date-box-bg: url("assets/template-16x9-purple/date-box.png");
  --template-time-bg: url("assets/template-16x9-purple/time-box.png");
  --template-credit-bg: url("assets/template-16x9-purple/credit-box.png");
  --template-week-month-bg: url("assets/template-16x9-purple/week-month.png");
  --template-week-date-bg: url("assets/template-16x9-purple/week-date.png");
  --template-social-x-bg: url("assets/template-16x9-purple/social-x.png");
  --template-social-youtube-bg: url("assets/template-16x9-purple/social-youtube.png");
  --template-social-twitch-bg: url("assets/template-16x9-purple/social-twitch.png");
  --template-social-instagram-bg: url("assets/template-16x9-purple/social-instagram.png");
  --template-social-hashtag-bg: url("assets/template-16x9-purple/social-hashtag.png");
}

.ratio-16-9 .background-layer { background-image: var(--template-bg); }
.ratio-16-9 .stream-row.single .stream-card { background-image: var(--template-stream-wide-bg); }
.ratio-16-9 .stream-row.two-stream .stream-card { background-image: var(--template-stream-half-bg); }
.ratio-16-9 .stream-card.offline { background-image: var(--template-offline-bg); }
.ratio-16-9 .date-box { background-image: var(--template-date-box-bg); }
.ratio-16-9 .time { background-image: var(--template-time-bg); }
.ratio-16-9 .credit { background-image: var(--template-credit-bg); }

.ratio-16-9 .illustration {
  inset: 0;
  width: 1920px;
  height: 1080px;
  right: auto;
  top: 0;
}

.ratio-16-9 .left-list {
  width: 930px;
  padding-top: 28px;
  padding-left: 112px;
}

.ratio-16-9 .stream-card {
  height: 112px;
  margin: 0 0 26px 0;
  padding-left: 65px;
  color: var(--template-main-text);
}

.ratio-16-9 .stream-row.single .stream-card,
.ratio-16-9 .stream-row.offline-row .stream-card { width: 812.5px; }

.ratio-16-9 .stream-row.two-stream .stream-card {
  width: 423px;
  height: 112.5px;
  padding-left: 70px;
}

.ratio-16-9 .stream-row.two-stream {
  column-gap: 10px;
  margin-bottom: 28px;
}

.ratio-16-9 .stream-row.two-stream .stream-card { margin-bottom: 0; }
.ratio-16-9 .stream-row.two-stream .stream-card + .stream-card { padding-left: 24px; }
.ratio-16-9 .stream-text { transform: translateY(-4.5px); }
.ratio-16-9 .two-stream .stream-text { transform: translateY(-4px); }

.ratio-16-9 .date-box {
  left: -45px;
  top: 11.75px;
  width: 88.5px;
  height: 88.5px;
  font-family: var(--template-blue-display-font);
}

.ratio-16-9 .date-box .day {
  font-size: 45px;
  line-height: 29px;
  font-weight: 700;
  color: var(--template-date-text);
}

.ratio-16-9 .date-box .mon {
  margin-top: 1px;
  font-size: 22px;
  line-height: 22px;
  font-weight: 600;
  color: var(--template-day-text);
}

.ratio-16-9 .title {
  font-size: 28px;
  max-width: 640px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--template-main-text);
}

.ratio-16-9 .two-stream .title {
  font-size: 25px;
  line-height: 1.05;
  max-width: 300px;
}

.ratio-16-9 .subtitle {
  margin-top: 13px;
  font-size: 24px;
  line-height: 0;
  font-weight: 700;
  max-width: 600px;
  color: var(--template-sub-text);
}

.ratio-16-9 .two-stream .subtitle {
  margin-top: 14px;
  font-size: 21px;
  line-height: 0;
  max-width: 300px;
}

.ratio-16-9 .time {
  right: 54px;
  bottom: -16px;
  width: 176.5px;
  height: 39.5px;
  padding: 0 17.5px;
  justify-content: flex-start;
  gap: 16px;
  font-size: 22px;
  font-weight: 800;
  color: var(--template-light-text);
}

.ratio-16-9 .two-stream .time {
  right: 30px;
  bottom: -16px;
  width: 176.5px;
  height: 39.5px;
  font-size: 22px;
}

.ratio-16-9 .time-zone {
  width: 55px;
  text-align: center;
  transform: translateY(1px);
}

.ratio-16-9 .time-zone.is-long { font-size: 20px; }

.ratio-16-9 .time-value {
  width: 68px;
  text-align: center;
  transform: translateY(1px);
}

.ratio-16-9 .two-stream .time-zone,
.ratio-16-9 .two-stream .time-value { transform: translateY(1px); }

.ratio-16-9 .offline {
  font-size: 60px;
  font-weight: 900;
  color: var(--template-light-text);
}

.ratio-16-9 .offline-text {
  letter-spacing: 0;
  transform: translateY(4px);
}

.ratio-16-9 .week {
  left: 1087px;
  bottom: 130px;
  width: 370px;
  height: 150px;
  display: grid;
  grid-template-columns: 131.5px 44px 131.5px;
  grid-template-rows: 122px;
  gap: 0 10px;
  align-items: start;
  font-weight: 900;
}

.ratio-16-9 .week .label { display: none; }

.ratio-16-9 .week .date-range {
  width: 131.5px;
  height: 122px;
  padding: 0;
  position: relative;
  display: block;
  background-image: none;
  color: var(--template-date-text);
}

.ratio-16-9 .week-month {
  position: absolute;
  left: -10px;
  top: 0;
  z-index: 2;
  width: 63px;
  height: 39.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--template-week-month-bg) center / 100% 100% no-repeat;
  color: var(--template-light-text);
  font-family: var(--template-blue-font);
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}

.ratio-16-9 .week-day {
  position: absolute;
  left: 0;
  top: 20px;
  z-index: 1;
  width: 131.5px;
  height: 91px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--template-week-date-bg) center / 100% 100% no-repeat;
  color: var(--template-date-text);
  font-family: var(--template-blue-display-font);
  font-size: 86px;
  line-height: 1;
  font-weight: 600;
}

.ratio-16-9 #weekStart {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.ratio-16-9 .week .arrow {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  justify-self: center;
  margin-top: 30px;
  font-size: 40px;
  color: var(--template-week-arrow);
  transform: none;
}

.ratio-16-9 #weekEnd {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.ratio-16-9 .credit {
  left: 1452px;
  bottom: 10.5px;
  width: 412.5px;
  height: 57px;
  padding: 0 20px 0 104px;
  gap: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--template-social-text);
}

.ratio-16-9 .credit div {
  max-width: 270px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(3px);
}

.ratio-16-9 .credit span { display: none; }

.ratio-16-9 .socials {
  left: 44px;
  bottom: 15px;
  gap: 34px;
}

.ratio-16-9 .social-item {
  width: 229px;
  height: 45px;
  padding: 0 20px 0 66px;
  display: flex;
  align-items: center;
  color: var(--template-social-text);
  font-size: 16px;
  font-weight: 900;
}

.ratio-16-9 .social-item.platform-x { background-image: var(--template-social-x-bg); }
.ratio-16-9 .social-item.platform-youtube { background-image: var(--template-social-youtube-bg); }
.ratio-16-9 .social-item.platform-twitch { background-image: var(--template-social-twitch-bg); }
.ratio-16-9 .social-item.platform-instagram { background-image: var(--template-social-instagram-bg); }
.ratio-16-9 .social-item.platform-hashtag { background-image: var(--template-social-hashtag-bg); }
.ratio-16-9 .social-item .social-icon { display: none; }

.ratio-16-9 .social-item strong {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}