@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://b.zccdn.cn/511/p/font/IBMPlexMonoMod-SemiBold.otf") format("opentype");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://b.zccdn.cn/511/p/font/Inter-Light.woff2") format("opentype");
}

.zzr.zpage {
  padding: 10px;
  overflow: hidden;
  color: rgb(212, 212, 212);
  background-color: black;
  font-size: 14px;
  --C1: rgb(31, 31, 31);
  --C2: rgb(82, 82, 82);
  --C3: rgb(163, 163, 163);
  min-height: 100vh;
  box-sizing: border-box;
}

.gap {
  margin: 12px auto;
}

.zzr a {
  color: silver;
}


.zmodal {
  background: var(--C1);
  color: white;
  border: 1px solid var(--C2);
}

.icon {
  background-repeat: no-repeat;
  display: inline-block;
  cursor: pointer;
}

.pop {
  position: absolute;
  top: 0px;
  padding: 4px;
  z-index: 9;
  border-radius: 0.25rem;
  background-color: black;
  border: 0.6px solid var(--C2);
}

.zmask {
  background: rgba(0, 0, 0, 0.8);
}

.fullscreen .viewer {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  border: none;
  z-index: 9;
  margin: 0px;
}

.progress {
  position: absolute;
  width: 100%;
  bottom: 0px;
}

.viewer .progress {
  height: 8%;
  background-color: var(--C1);
}

.timeline .progress {
  height: 0.25rem;
}

.progress .green,
.progress .yellow,
.progress .red {
  background-color: rgb(34, 197, 93);
  height: 100%;
  position: absolute;
  right: 0px;
  width: 100%;
}

.progress .yellow {
  background-color: rgb(245, 158, 12);
}

.progress .red {
  background-color: rgb(239, 68, 68);
}

.viewer .cursor {
  background-image: url("https://b.zccdn.cn/511/p/icon/cursor.svg");
  left: -11px;
  height: 100%;
  width: 26px;
  cursor: default;
  position: absolute;
  transition: left 1s linear 0s;
  z-index: 9;
}

.icon.close {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'><g fill='silver'><path d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'/></g></svg>");
  width: 16px;
  height: 16px;
}

.zmodal label span {
  width: 80px;
  display: inline-block;
  color: var(--C3);
}

.viewer {
  border-radius: 0.25rem;
  box-sizing: border-box;
  border: 2px solid var(--C1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background-image: url("https://b.zccdn.cn/511/p/bg/1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.viewer .name,
.viewer .speaker {
  flex-basis: 13%;
  color: rgb(56, 189, 248);
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.viewer .time {
  flex-basis: 62%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono";
  font-weight: 600;
  color: white;
  white-space: nowrap;
}

.has-msg.viewer .time {
  flex-basis: 23%;
}

.timeline {
  background-color: var(--C1);
  border-radius: 0.25rem;
  position: relative;
  height: 34px;
  overflow: hidden;
  border: 1px solid var(--C2);
}

.timeslice {
  width: 20%;
  height: 100%;
  position: absolute;
  font-size: 0.75rem;
  color: rgb(115, 115, 115);
  padding-left: 0.25rem;
  cursor: default;
  border-left: 1px solid var(--C2);
}

.timeline .cursor {
  background-size: cover;
  top: 0px;
  background-image: url("https://b.zccdn.cn/511/p/icon/playhead.svg");
  left: -9px;
  width: 16px;
  height: 100%;
  position: absolute;
  transition: left 1s linear 0s;
  z-index: 1;
}

.transport {
  display: flex;
  justify-content: center;
}

.transport .btn {
  flex: 1 1 auto;
  max-width: 100px;
  height: 2.25rem;
}

.transport .icon {
  width: 0.875em;
  height: 1em;
}

.transport .next .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='rgb(212, 212, 212)'><path d='M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z'/></g></svg>");
}

.transport .btn.start {
  max-width: none;
}

.dropdown {
  width: 30px;
  height: 2.25rem;
  position: relative;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.transport .btn.left,
.transport .btn.right {
  display: flex;
}

.left .dropdown {
  border-right: 0.6px solid var(--C2);
}

.right .dropdown {
  border-left: 0.6px solid var(--C2);
}

.auto {
  flex: 1 1 auto;
}

.move-time {
  top: 38px;
  left: 0px;
  width: 65px;
  padding: 4px;
  text-align: right;
}

.right .move-time {
  left: auto;
  right: 0px;
}

.clock {
  width: 1em;
  height: 1em;
  margin-right: 8px;
  font-size: 0.75em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g fill='rgb(212, 212, 212)'><path d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/></g></svg>");
}

.devices {
  padding: 0px 0.5rem;
  background-color: var(--C1);
  border-radius: 0.25rem;
}

.device {
  display: flex;
  align-items: center;
  padding: 0.5rem 0px;
  border-top: 0.6px solid var(--C2);
}

.devices .header {
  padding: 0.5rem 0px;
}

.btn.links {
  background-color: rgb(6, 95, 70);
  font-size: 0.8em;
  line-height: 1.25rem;
  padding: 1px 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  float: right;
}

.icon.link {
  width: 1.25em;
  height: 1em;
  font-size: 0.75em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g fill='rgb(212, 212, 212)'><path d='M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z'/></g></svg>");
}

.device .idx {
  width: 1.75rem;
  text-align: center;
}

.device .avatar {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  border: 0.5px solid rgb(115, 115, 115);
}

.role {
  font-size: 0.75rem;
  background-color: rgb(64, 64, 64);
  font-family: "IBM Plex Mono";
  font-weight: 400;
  border-radius: 0.25rem;
  padding: 0px 0.25rem;
}

.role .dot {
  width: 0.25rem;
  height: 0.25rem;
  margin-right: 0.25rem;
  border-radius: 50%;
  background-color: rgb(34, 197, 94);
}

.more {
  width: 2rem;
  height: 2rem;
  position: relative;
}

.dropdown .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><g fill='rgb(212, 212, 212)'><path d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/></g></svg>");
}

.agenda .dropdown {
  height: 1rem;
  margin-left: 7px;
}

.blackout .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'><g fill='rgb(212, 212, 212)'><path d='M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z'/></g></svg>");
}

.btn {
  border-radius: 0.25rem;
  border: 0.6px solid var(--C2);
  background-color: black;
  cursor: pointer;
  position: relative;
  font-size: 14px;
  line-height: 1.25rem;
  min-width: 2rem;
  text-align: center;
}

.btn:hover {
  border: 0.6px solid var(--C3);
}

.btn+.btn {
  margin-left: 8px;
}

.handler .icon {
  width: 1.25em;
  height: 1em;
  display: none;
  cursor: grab;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g fill='white'><path d='M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z'/></g></svg>");
}

.handler:hover .icon {
  display: block;
}

.handler:hover .idx {
  display: none;
}

.text-xs {
  font-size: 0.7rem;
  color: var(--C3);
}

.timer .center {
  font-family: "IBM Plex Mono";
}

.timer .center,
.timer .title {
  line-height: 1.25rem;
  font-weight: 600;
  color: white;
  padding: 2px 0px;
}

.timer .btns {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.reset .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='rgb(212, 212, 212)'><path d='M64 468V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v176.4l195.5-181C352.1 22.3 384 36.6 384 64v384c0 27.4-31.9 41.7-52.5 24.6L136 292.7V468c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12z'/></g></svg>");
}

.add {
  width: 110px;
  padding: 5px 0px;
  background-color: var(--C1);
}

.add .icon {
  width: 0.875em;
  height: 1em;
  margin: 3px 5px;
  vertical-align: bottom;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='rgb(212, 212, 212)'><path d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/></g></svg>");
}

.start:hover {
  background-color: rgb(22, 163, 74);
}

.start.running .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='rgb(220 38 38)'><path d='M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z'/></g></svg>");
}

.start.running:hover .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='white'><path d='M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z'/></g></svg>");
}

.timer .start-time,
.timer .duration,
.timer .auto {
  width: 5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.select .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='rgb(212, 212, 212)'><path d='M432 304c0 114.9-93.1 208-208 208S16 418.9 16 304c0-104 76.3-190.2 176-205.5V64h-28c-6.6 0-12-5.4-12-12V12c0-6.6 5.4-12 12-12h120c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-28v34.5c37.5 5.8 71.7 21.6 99.7 44.6l27.5-27.5c4.7-4.7 12.3-4.7 17 0l28.3 28.3c4.7 4.7 4.7 12.3 0 17l-29.4 29.4-.6.6C419.7 223.3 432 262.2 432 304zm-176 36V188.5c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12V340c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z'/></g></svg>");
}

.agenda .header .icon,
.message .header .icon {
  width: 0.875em;
  height: 1em;
  font-size: 0.75em;
}

.agenda .header,
.message .header {
  display: flex;
  align-items: center;
}

.timer .connect {
  background-color: var(--C2);
  position: absolute;
  left: 3rem;
  top: -19px;
  width: 4px;
  bottom: 87%;
  border: 4px solid black;
  border-radius: 9999px;
}


.zzr textarea {
  font-family: "IBM Plex Mono";
  min-height: 53px;
  color: white;
  margin: 4px;
  background-color: black;
  resize: vertical;
  height: 56px;
  width: calc(100% - 13px);
  display: block;
  border-radius: 0.25rem;
  border-color: black;
}

.timer .handler,
.msg .handler {
  cursor: grab;
  width: 2rem;
}

.msg .foot {
  margin: 4px;
  display: flex;
  justify-content: space-between;
}

.msg .btn {
  padding: 2px 9px;
  height: 20px;
}

.del {
  position: absolute;
  left: 0px;
  bottom: 0px;
  padding: 8px 12px;
  cursor: pointer;
  display: none;
}

.del .icon {
  width: 8px;
  height: 9px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='rgb(212, 212, 212)'><path d='M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z'/></g></svg>");
}

.msg:hover .del {
  display: block;
}

.msg-btns {
  display: flex;
}

.msg-btns button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  height: 25px;
  position: relative;
}

.msg-btns .icon {
  width: 11px;
  height: 12px;
  display: block;
}

.msg-btns .white .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='white'><path d='M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z'/></g></svg>");
}

.msg-btns .green .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='rgb(34 197 94)'><path d='M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z'/></g></svg>");
}

.msg-btns .red .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='rgb(239 68 68)'><path d='M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z'/></g></svg>");
}

.msg-btns .bold .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='white'><path d='M333.49 238a122 122 0 0 0 27-65.21C367.87 96.49 308 32 233.42 32H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h31.87v288H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h209.32c70.8 0 134.14-51.75 141-122.4 4.74-48.45-16.39-92.06-50.83-119.6zM145.66 112h87.76a48 48 0 0 1 0 96h-87.76zm87.76 288h-87.76V288h87.76a56 56 0 0 1 0 112z'/></g></svg>");
}

.msg-btns .white.active .under {
  background-color: white;
}

.msg-btns .green.active .under {
  background-color: rgb(34, 197, 94);
}

.msg-btns .red.active .under {
  background-color: rgb(239, 68, 68);
}

.msg-btns .bold.active .under {
  background-color: white;
}

.msg-btns .under {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 2px;
  width: 16px;
  height: 2px;
  background-color: black;
}

.msg-btns button:hover .under {
  background-color: var(--C2);
}

.header .logo {
  width: 20px;
  height: 20px;
}

.header .title {
  font-weight: 600;
  font-size: 1.5rem;
  color: white;
  white-space: nowrap;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.aside .line {
  width: 1rem;
  margin: 0px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.hovline {
  cursor: pointer;
  padding-bottom: 0.1em;
  border-bottom: 1px dashed rgb(53, 53, 53);
}

.hovline:hover {
  border-color: white;
}

.timer .hovshow {
  opacity: 0;
}

.timer:hover .hovshow {
  opacity: 1;
}

.start-time .text-xs {
  height: 1rem;
}

.zmodal label .switch span {
  margin: 0px 9px;
  width: 30px;
}

.zmodal label {
  margin: 9px 0px;
}

.duration input {
  width: 80px;
  text-align: center;
}

.duration .col {
  margin: 0px 9px;
}

.zmodal input,
.zmodal select {
  background-color: var(--C1);
  color: white;
  flex: 1 1 auto;
  border-color: var(--C2);
}

.zmodal .btn {
  color: var(--C3);
  padding: 5px 15px;
}

.zmodal .btn.save {
  color: rgb(34, 197, 94);
}

.zmodal label .switch {
  width: 128px;
}

.more .pop {
  width: 77px;
  right: 32px;
}

.more>.icon {
  width: 0.8rem;
  height: 0.8rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g fill='silver'><path d='M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z'/></g></svg>");
}

.more .pop .icon {
  margin-right: 9px;
}

.edit .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g fill='silver'><path d='M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z'/></g></svg>");
}

.clone .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g fill='silver'><path d='M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z'/></g></svg>");
}

.pop>div {
  padding: 2px 9px;
  cursor: pointer;
  border-radius: 0.25rem;
}

.pop>div:hover {
  background-color: rgb(64, 64, 64);
}

.delete .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g fill='silver'><path d='M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z'/></g></svg>");
}

.start .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='rgb(22, 163, 74)'><path d='M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z'/></g></svg>");
}

.start:hover .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='white'><path d='M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z'/></g></svg>");
}

.start.running:hover {
  background-color: rgb(127, 29, 29);
}

.viewer .max {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='rgb(212, 212, 212)'><path d='M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z'/></g></svg>");
}

.viewer .min {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='rgb(212, 212, 212)'><path d='M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z'/></g></svg>");
}

body:not(.fullscreen) .viewer:hover .max,
.fullscreen .viewer:hover .min {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 9px;
  right: 9px;
}

.timer.active {
  background-color: rgb(29, 78, 216);
}

.timer.running {
  background-color: rgb(185, 28, 28);
}

.viewer.running {
  border-color: rgb(185, 28, 28);
}

.progress-mask {
  position: absolute;
  left: 0%;
  right: 100%;
  height: 100%;
  transition: right 1s linear 0s;
}

.progress .progress-mask {
  background-color: var(--C1);
}

.timeline .progress-mask {
  background-color: var(--C2);
}

.timer .progress-mask {
  background-color: rgba(0, 0, 0, 0.2);
}

.active .hovline {
  border: none;
}

.countdown,
.curTime {
  font-family: "IBM Plex Mono";
  font-weight: 100;
  text-align: center;
}

.hintline {
  position: absolute;
  left: 0px;
  height: 100%;
  display: none;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.countdown .txt:last-child,
.hinting .countdown .txt:first-child {
  display: none;
}

.hinting .countdown .txt:last-child {
  display: block;
}

.hinting .hintline {
  display: block;
}

.device.me {
  color: white;
}

.device.me .avatar {
       border-width: 1px;
  border-color: white;
}

.time.red {
  color: rgb(239, 68, 68);
}

.time.yellow {
  color: rgb(245, 158, 12);
}

.viewer .blackout {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 11;
}

.blackout.active .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'><g fill='red'><path d='M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z'/></g></svg>");
}

.flash {
  animation: 2s linear 0s infinite normal none running flash;
}

.flash-btn .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'><g fill='rgb(212, 212, 212)'><path d='M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z'/></g></svg>");
}

.timer,
.msgs .msg {
  display: flex;
  border-radius: 0.25rem;
  position: relative;
  background-color: var(--C1);
  min-height: 4.5rem;
  max-height: 90px;
}

.msgs .msg {
  min-height: 6rem;
}

.viewer .msg {
  padding: 0px 5%;
  flex-basis: 40%;
  font-size: 30px;
  white-space: pre-wrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.blackout.active {
  border-color: rgb(185, 28, 28);
}

.msg.active {
  background-color: rgb(185, 28, 28);
}

.viewer .from {
  align-self: end;
}

.timer:nth-child(1) .connect {
  display: none;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 20px;
  position: fixed;
  width: 100%;
  bottom: 0px;
  padding: 5px;
  box-sizing: border-box;
  background-color: black;
}

.total {
  position: relative;
  display: flex;
  flex-grow: 1;
}

.total .item {
  height: 6px;
  border: 2px solid var(--C1);
  background-color: var(--C2);
  border-radius: 3px;
}

.total .cur {
  position: absolute;
  top: -2.8px;
  left: -8px;
  background-color: rgb(37, 99, 235);
  border: 3px solid white;
  border-radius: 50%;
  width: 0.6rem;
  height: 0.6rem;
  transition: left 1s linear 0s;
}

.link .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g fill='rgb(212, 212, 212)'><path d='M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z'/></g></svg>");
}

.timer .btn {
  width: 2.25rem;
  height: 2.25rem;
}

.timer .icon,
.links .icon {
  width: 1em;
  height: 1em;
}

.copy .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='rgb(212, 212, 212)'><path d='M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z'/></g></svg>");
}

.qr .icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><g fill='rgb(212, 212, 212)'><path d='M0 224h192V32H0v192zM64 96h64v64H64V96zm192-64v192h192V32H256zm128 128h-64V96h64v64zM0 480h192V288H0v192zm64-128h64v64H64v-64zm352-64h32v128h-96v-32h-32v96h-64V288h96v32h64v-32zm0 160h32v32h-32v-32zm-64 0h32v32h-32v-32z'/></g></svg>");
}

.links .btn {
  padding: 7px 5px 3px;
}

.links input {
  width: 420px;
  margin: 0px 9px;
}

.qrcode {
  padding: 19px;
  background: white;
  display: inline-block;
  position: relative;
}

.agenda .pop {
  top: 25px;
  width: 150px;
}

textarea::-webkit-scrollbar,
.agenda::-webkit-scrollbar,
.message::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

textarea::-webkit-scrollbar-thumb,
.agenda::-webkit-scrollbar-thumb,
.message::-webkit-scrollbar-thumb {
  background: silver;
  border-radius: 2px;
}

page .doc {
  opacity: 0;
}


@media (min-width: 1024px) {
  .main {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  .aside {
    width: 400px;
    height: calc(100vh - 80px);
  }

  .agenda,
  .message {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: calc(100vh - 74px);
  }
}

@keyframes flash {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}