:root {
 --gap: 0.8rem;
}
html,
body {
 height: 100%;
 margin: 0;
 font-size: clamp(12px, 2vw, 14px);
 min-width: 1280px;
 min-height: 720px;
 background: #f8f8f8;
}
.container-fluid {
 display: flex;
 gap: var(--gap);
 height: 100%;
 padding: var(--gap);
 box-sizing: border-box;
}
.column {
 display: flex;
 flex-direction: column;
 gap: var(--gap);
 height: 100%;
 min-height: 0;
}
#col1 {
 flex: 1 1 0;
}
#col2 {
 flex: 0 0 50%;
 max-width: 50%;
}
.card {
 margin: 0;
 border: 0;
 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.12);
}
#col3CardA {
 border-radius: 7px;
}
#col1CardA,
#col1CardB,
#col3CardB {
 background-color: transparent !important;
}
.card-15 {
 flex: 0 0 15%;
}
.card-25 {
 flex: 0 0 25%;
}
.card-auto {
 flex: 1 0 0;
}
.row-15 {
 height: 10vh;
 overflow: hidden;
}
.row-85 {
 height: 90vh;
 overflow: hidden;
}
iframe {
 border-radius: 7px;
}
#col1CardA iframe,
#col1CardB iframe,
#col3CardB iframe {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 width: 100%;
 height: 100%;
 border: none;
}
#talkingViewerHolder {
 color: #f0f0f0;
 background-color: #111111;
}
#talkingViewerHolder ol,
#talkingViewerHolder ul {
 margin-left: 1vw;
}
#talkingViewerHolder li {
 padding: 1vw;
}
#talkingViewerHolder .mon-talk {
 position: absolute;
 display: contents;
 top: 0px;
}
#talkingViewerHolder .mon-talk span {
 display: inline-block;
 vertical-align: middle;
 line-height: normal;
}
#talkingViewerHolder .mon-talk h1 {
 width: 95%;
 height: 100%;
 line-height: 100%;
 margin: 0 auto;
 word-wrap: break-word;
 overflow-wrap: break-word;
 align-content: center;
}
#talkingViewerHolder .mon-talk h1 span {
 font-family: 'Inter Tight', sans-serif;
 font-optical-sizing: auto;
 font-weight: 400;
 font-style: normal;
 visibility: hidden;
 opacity: 0;
 transition: opacity 0.5s ease-in-out;
}
#noteViewerHolder {
 background-color: rgba(0, 0, 0, 0.09);
 color: #111;
 border-radius: 7px;
}
#noteViewerHolder .mon-note {
 position: absolute;
 display: contents;
 top: 0;
}
#noteViewerHolder .mon-note span {
 display: inline-block;
 vertical-align: middle;
 line-height: normal;
}
#noteViewerHolder .mon-note h1 {
 width: 95%;
 height: 100%;
 line-height: 100%;
 margin: 0 auto;
 word-wrap: break-word;
 overflow-wrap: break-word;
 align-content: center;
 text-align: center;
}
#noteViewerHolder .mon-note h1 span {
 font-family: 'Lexend', sans-serif;
 font-optical-sizing: auto;
 font-weight: 500;
 font-style: normal;
 text-transform: uppercase;
 letter-spacing: -2px;
 visibility: hidden;
 transform: translateY(100vh);
 opacity: 0;
 transition: opacity 0.5s ease-in-out, transform 0.8s cubic-bezier(0.9, -0.1, 0.1, 1.1);
}
#noteViewerHolder {
 box-shadow: none;
 border-radius: 7px;
}
@keyframes borderFlash {
 0% {
  box-shadow: 0 0 0 0 rgba(254, 44, 85, 0.15);
 }
 10% {
  box-shadow: 0 0 8px 1px rgba(254, 44, 85, 0.55);
 }
 90% {
  box-shadow: 0 0 8px 1px rgba(254, 44, 85, 0.25);
 }
 100% {
  box-shadow: 0 0 0 0 rgba(254, 44, 85, 0);
 }
}
#noteViewerHolder.flash-border {
 animation: borderFlash 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
/* HOST STATS */
#col3CardA {
 background: linear-gradient(to bottom, #52348a 0% 56%, #353a3d 56% 100%);
 max-height: 105px;
}
#col3CardA .card-body {
 align-content: center;
}
#statsContainer {
 display: flex;
 flex-direction: column;
 gap: 1rem;
}
.stat-row {
 display: flex;
 justify-content: space-evenly;
 gap: 2rem;
 flex-wrap: wrap;
}
.stat-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}
.stat-value {
 font-family: 'Lexend', sans-serif;
 font-optical-sizing: auto;
 font-weight: 500;
 font-style: normal;
 line-height: 1;
 font-size: 1.5rem;
 color: #f3f3f3;
}
.stat-title {
 font-family: 'Inter Tight', sans-serif;
 font-optical-sizing: auto;
 font-weight: 400;
 font-style: normal;
 font-size: 1rem;
 line-height: 1.1;
 color: #afafaf;
}
.stat-row.row-1 .stat-value {
 font-family: 'Lexend', sans-serif;
 font-optical-sizing: auto;
 font-weight: 500;
 font-style: normal;
 line-height: 1.1;
 font-size: 2rem;
 color: #f3f3f3;
}
.stat-row.row-1 .stat-title {
 font-family: 'Inter Tight', sans-serif;
 font-optical-sizing: auto;
 font-weight: 400;
 font-style: normal;
 font-size: 1rem;
 color: #afafaf;
}
.stat-row.row-2 .stat-value {
 font-family: 'Lexend', sans-serif;
 font-optical-sizing: auto;
 font-weight: 500;
 font-style: normal;
 line-height: 1.1;
 font-size: 1.3rem;
 color: #f3f3f3;
}
.stat-row.row-2 .stat-title {
 font-family: 'Inter Tight', sans-serif;
 font-optical-sizing: auto;
 font-weight: 400;
 font-style: normal;
 font-size: 0.8rem;
 color: #afafaf;
}