@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,100..1000,96,468,79,-203,738,514,712&display=swap');

html { background:  #000; }
body { background: none; color: #FFF; font-family: "Roboto Flex", sans-serif; }

.header-info { background: url('/img/events/2026-raid-train-bg.png') no-repeat center center fixed; background-size: cover; }

.info-bar { background-color: #000; color: #FFF; font-size: 28px; font-weight: 500; border-bottom: #FFF 1px solid; }
.info-bar .logo { height: 45px; margin-top: -6px; }

.info-bottom { background-color: #000; color: #FFF; font-size: 10pt; }
.info-bottom h3 { text-transform: uppercase; border-bottom: #FFF 1px solid; font-size: 12pt; padding-bottom: 5px; letter-spacing: 2px; font-weight: 300; }
.info-bottom h4 { text-transform: uppercase; letter-spacing: 2px; font-weight: 300; font-size: 10pt;}

.left-side { text-align:right; }

a { color: #2b87c0; text-decoration-style: dotted; }
a:hover { background-color: #2b87c0; color: #FFF; text-decoration: none; }

.channel-row h2 a { color: #FFF; text-decoration-style: dotted; font-weight: bold;}
.channel-row h2 a:hover { background-color: #2b87c0; color: #FFF; text-decoration: none; border-radius: 15px; }

.channel-row.active a { color: #2b87c0!important; }
.channel-row.active a:hover { background-color: #2b87c0!important; color: #FFF!important;}

footer a { color: #2b87c0 !important; }
footer a:hover { background-color: transparent!important; text-decoration: underline!important; text-decoration-style: dotted!important; }

.overall-container { }

.channel-row.active { background-color: #222; }

.card-img-overlay {
  background: rgba(0,0,0,0.8);
  font-size: 14pt;
}

.text-orange { color: #ffb400; }
.bg-orange { background-color: #ffb400; color: #000000; }
.btn-blue { color: #2b87c0; }
.bg-blue { background-color: #2b87c0; color: #FFF; }

.train-line-top:before {
  content: '';
  position: relative;
  height: 20px;
  margin-left: -80px;
  display: block;
  background: linear-gradient(to top, transparent 0%, #000000 100%);
}
.active .train-line-top:before { background: linear-gradient(to top, transparent 0%, #222 100%); }

.train-line-bottom:after {
  content: '';
  position: relative;
  height: 80px;
  margin-left: -80px;
  display: block;
  background: linear-gradient(to bottom, transparent 0%, #000000 100%);
}
.active .train-line-bottom:after { background: linear-gradient(to bottom, transparent 0%, #222 100%); }

.train-line {
  border-left: 55px solid #383839;
  margin-left: 20px;
}

.circle::before {  
  	content: "";
  	border-radius: 50%;
 	height: 45px;
	width: 45px;
	border-radius: 50%;
	border: 4px solid;
	position: absolute;
	background-color: #FFF;
	border-color: #FFF;
	z-index:10;
	left: -75px;
}

.circle {  
	position: relative;
	margin-left: 13px;
	margin-top: 22px;
}

/* .circle.start {  
	margin-top: -20px;
}

.circle.end {  
	margin-top: 40px;
} */

.circle.active::before {
	background-color: transparent!important;
	border: 0!important;
	border-radius: 0!important;
	animation: heartbeat 1s infinite;
	
	width: 65px;
	height: 65px;
	left: -85px;
	background-image: url('/img/heart-pink.png');
	background-repeat: no-repeat;
	background-size: 65px 65px;
/*
	aspect-ratio: 1;
	border-image: radial-gradient(#dc3545 69%, #0000 70%) 84.5%/50%;
	clip-path: polygon(-41% 0, 50% 91%, 141% 0);
*/
}

img.channel-picture {
	height: 100px;
	margin: 0px 20px 0px 0px;
}

.btn-pink { background-color: #2b87c0!important; color: #FFF!important; }
.btn-pink:hover { background-color: #720039!important; color: #FFF!important; }
.btn-red { background-color: #FB5366!important; color: #FFF!important; }
.btn-red:hover { background-color: #c24251!important; color: #FFF!important; }

.floatingchat-container-wrap { left: unset!important; right: 16px; }
.floating-chat-kofi-popup-iframe { left: unset!important; right: 16px; }

.desaturate {
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
}

.invert {
  filter: invert(1);
}

@keyframes heartbeat
{
  0%
  {
    transform: scale( .75 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( .75 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( .75 );
  }
  100%
  {
    transform: scale( .75 );
  }
}

@media (max-width: 575.98px) {
	.left-line { margin-left:30px; }
    .w-50 { width:100% !important; }
}