@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



.video_counter_container {
	float:left;
	width:59px;
    height: 105px;
    padding-top: 1px;
	top: -1px;
    left: 0px;
    position: relative;
    font-size: 13pt;
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
	margin-left: 2px;
    border-radius: 10px;
    border: 1px solid white;
	text-align: center;
}
.amberPanel{
	background: #6c4201;
	border: 2px solid #ffaa04 !important;
	color: #ffaa04;
}
.video_counter_container.amberPanel{
	height: 104px;
	width: 57px;
}
.mainvideo_counter_container.amberPanel{
	width: 57px !important;
    height: 36px !important;
}
.vid_counter_container:has(.redPanel) {
	
}
.redPanel{
	background: #350000;
	color: #bb0000;
	border: 2px solid #bb0000 !important;
}
.video_counter_container.redPanel{
	height: 104px;
	width: 57px;
}
.mainvideo_counter_container.redPanel{
	width: 57px !important;
    height: 36px !important;
}
.video_counter {
	font-size: 25pt;
}
.video_counter_sign {
	position: absolute;
    top: 43;
    left: 4;
}

.mainvid_counter_container:has(.redPanel) {
	
}
.mainvideo_counter_container {
	float:right;
	width:58px;
    height: 37px;
    padding-top: 1px;
	top: 0px;
    right: 107px;
    position: relative;
    font-size: 13pt;
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
	margin-left: 2px;
    border-radius: 6px;
	background-color: #000;
    border: 1px solid white;
	text-align: center;
}
.mainvideo_counter {
	position: relative;
    float: left;
    height: 10px;
	width: 20px;
    top: -8px;
    right: 11px;
	font-size: 25pt;
}
.mainVidLeft{
	float: left;
    top: 14px;
    right: 8px;
    height: 10px;
    position: relative;
    transform: rotate(-90deg);
    font-size: 8pt;
    font-weight: 200;
}
.mainVidRight{
	top: 3px;
    left: 34px;
    transform: rotate(90deg);
    position: relative;
    float: left;
    height: 10px;
    font-size: 8pt;
    font-weight: 200;
}
.main-update-LED{
	float:left;
    position: absolute;
	display: inline-block;
    height: 15px;
    width: 105px;
    top: 0px;
    right: 218px;
    padding-top: 2px;
	margin-left: 2px;
	margin-right: 1px;
    border-radius: 10px;
    border: 1px solid white;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0.04em;
	font-size:9pt;
	font-weight: 900;
	background-color:#000;
	color:#000;
	transition: color 100ms ease-in-out;
	transition: background-color 400ms linear;
}
.mainSubBar{
	float:left;
    position: absolute;
	display: inline-block;
    height: 15px;
    width: 105px;
    top: 20px;
    right: 218px;
    padding-top: 2px;
	margin-left: 2px;
	margin-right: 1px;
    border-radius: 10px;
    border: 1px solid white;
	background-color:#000;
	color:#000;
}
.update-LED{
	float:left;
    position: absolute;
	display: inline-block;
    height: 20px;
    width: 144px;
    top: 0px;
    right: 5px;
    padding-top: 2px;
	margin-left: 2px;
    border-radius: 10px;
    border: 1px solid white;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0.04em;
	font-weight: 900;
	color:#000;
	transition: color 100ms ease-in-out;
	transition: background-color 400ms linear;
}
.green_update{
	background-color: #00AA00;
	color: #000;
	transition: color 200ms ease-in-out;
	transition: background-color 400ms linear;
}
.red_update{
	background-color: #990000;
	color: #b4b3b1;
	transition: color 200ms ease-in-out;
	transition: background-color 400ms linear;
}
.amber_update{
	background-color: #FFA500;
	color: #484848;
	transition: color 200ms ease-in-out;
	transition: background-color 400ms linear;
}
.icon_bar svg{
	width: 15px;
	height: 15px;
	fill: #b4b3b1;
}
.mainSubBar svg{
	width: 12px;
	height: 12px;
	fill: #b4b3b1;
}
.icon_bar{
	border-radius: 10px;
    border: 1px solid white;
	padding:2px 4px;
    width: 18px;
    height: 102px;
    top: -1px;
    left: 129px;
	position:absolute;
}
.icon_bar_chat{
	top: 7px;
	left: 6px;
	position:absolute;
}
.icon_bar_commentary {
	top: 27px;
	left: 6px;
	position:absolute;
}

.icon_bar_vpn {
	top: 71px;
	left: 6px;
	position:absolute;
}
.icon_bar_vpn svg {
	fill: #545351 !important;
}

.icon_bar_vpn_active svg {
	fill: #e70000 !important;
}
.icon_bar_proxy {
	top: 49px;
	left: 6px;
	position:absolute;
}
.icon_bar_proxy svg {
	fill: #545351 !important;
}

.icon_bar_proxy_active svg {
	fill: #e70000 !important;
}

.icon_bar_commentary svg {
	fill: #545351 !important;
}
.icon_bar_commentary_active svg {
	fill: #e70000 !important;
}
.mainSubBar_chat{
	top: 2px;
	left: 10px;
	position:absolute;
}
.mainSubBar_commentary {
	top: 2px;
	left: 28px;
	position:absolute;
}

.mainSubBar_vpn {
	top: 2px;
	left: 68px;
	position:absolute;
}
.mainSubBar_vpn svg {
	fill: #545351 !important;
}

.mainSubBar_vpn_active svg {
	fill: #e70000 !important;
}

.mainSubBar_proxy {
	top: 2px;
	left: 48px;
	position:absolute;
}
.mainSubBar_proxy svg {
	fill: #545351 !important;
}

.mainSubBar_proxy_active svg {
	fill: #e70000 !important;
}

.mainSubBar_commentary svg {
	fill: #545351 !important;
}
.mainSubBar_commentary_active svg {
	fill: #e70000 !important;
}
.radar-controls{
	border-radius: 10px;
    border: 1px solid white;
	padding:2px 4px;
    width: 146px;
    height: 62px;
    top: 109px;
    left: 0px;
	position:absolute;
}
.radarUpdateTime{
	float:left;
	font-size:5pt;
	display: -webkit-inline-box;
	padding-right:12px;
}
#radarDataTime2 {
	float: left; 
}
#radarDataTime2 {
	float: left; 
	clear: left;
}
.radarDataTime {
	font-size:6pt;
	float:left;
	display:inline-flex;
}
.diag_box {
	width:142px;
	height:75px;
	top: 96px;
	right:5px;
	position:absolute;
	float:right;
    border-radius: 10px;
    border: 1px solid white;
	padding:2px 3px 2px 0px;
	text-align:center;
}
.diag_box svg {
	width: 35px;
	height: 35px;
	fill: #b4b3b1;
	position:absolute;
}
.main_diag_box {
	width:66px;
	height:34px;
    top: 0px;
    right: 388px;
	position:absolute;
	float:right;
	background-color: #000;
    border-radius: 10px;
    border: 1px solid white;
	padding:2px 3px 2px 0px;
	text-align:center;
}
.main_diag_box_title{
    transform: rotate(-90deg);
    width: 35px;
    position: relative;
    top: 9px;
    left: -8px;
    font-size: 10pt;
}
.main_diag_box svg {
	width: 17px;
	height: 17px;
	fill: #b4b3b1;
	position:absolute;
}
.main_diag_box_closure svg{
	top: 1px;
	left: 24px;
	position:absolute;
}
.main_diag_box_layout svg{
	top: 1px;
	left: 44px;
	position:absolute;
}
.main_diag_box_ticker svg{
	top: 20px;
	left: 24px;
	position:absolute;
}
.main_diag_box_note svg{
	top: 20px;
	left: 44px;
	position:absolute;
}
.diag_box_topleft svg{
	top: 22px;
	left: 5px;
	position:absolute;
}
.diag_box_topright svg{
	top: 22px;
	left: 43px;
	position:absolute;
}
.diag_box_bottomleft svg{
	top: 22px;
	left: 78px;
	position:absolute;
}
.diag_box_bottomright svg{
	top: 22px;
	left: 112px;
	position:absolute;
}
.miniClockDiv {
	float:right;
	position: absolute;
	top: 26px;
	right:5px;
	text-align: right;
	padding:6px 5px 5px 5px;
    border-radius: 10px;
    border: 1px solid white;
}
.miniClock{
	padding:0px 1px;
    width: 133px;
    line-height: 0.9em;
	font-size: 15pt;
	font-family: courier new;
	font-weight: bold;
	text-align: right;
}
.microClockDiv {
	float:right;
	/*position: absolute;
	top: 26px;
	right:5px;*/
	
	background-color:#000;
	
	width: 100px;
	height: 27px;
	text-align: right;
	padding:6px 0px 5px 10px;
    border-radius: 6px;
    border: 1px solid white;
}
.microClockLast{
	position: relative;
	top:-4px;
}
.microClockCur{
	position: relative;
	top:-12px;
}
.microClockNext{
	position: relative;
	top:-19px;
}
.microClock{
	padding:0px 1px;
    width: 133px;
	right:40px;
    line-height: 0.9em;
	font-size: 11pt;
	font-family: courier new;
	font-weight: bold;
	text-align: right;
}
.panelContainer{
	width:100%;
	height:100%;
	position:relative;
}
.mainPanel{
	position:relative;
	width:536px;
	float:right;
	right:3px
}
.mainTlight{
	position:relative;
	float:right;
	margin-right: 1px;
}
#tLightHrz{
	margin-left:2px;
	float:left;
	width: 103px;
	height: 38px;
	background: black;
	border: 1px solid white;
	position: relative;
	border-radius: 6px;
}
#tLightHrz:before{
	content:'';	
    display: block;
    height: 28px;
    width: 82px;
    border-radius: 10px;
    position: relative;
    top: 4px;
	border: 1px solid white;
    left: 13.5px;
    background: black;
}

#tLightLEDSHrz{
	width: 20px;
	height: 20px;
	background: #4b3000;
	position: absolute;
	top:9px;
	left:45px;
	border-radius: 50%;
}	
#tLightLEDSHrz:before{  
	content:'';	
	left:-22px;
	display: block;
	height: 20px;
	width: 20px;
	position: relative;
    background: #650000;
	border-radius: 50%;
}
#tLightLEDSHrz:after{  
	content:'';	
	top:-39px;
	left:22px;
	display: block;
	height: 20px;
	width: 20px;
	position: relative;
    background: #002400;
	border-radius: 50%;
}

#tLight{
	margin-left:2px;
	float:left;
	width: 60px;
	height: 105px;
	background: black;
	border: 1px solid white;
	position: relative;
	border-radius: 10px;
}
#tLight:before{
	content:'';	
    display: block;
    height: 75px;
    width: 34px;
    border-radius: 10px;
    position: relative;
    top: 10px;
	border: 1px solid white;
    left: 11.5px;
    background: black;
}

#tLightLEDS{
	width: 20px;
	height: 20px;
	background: #4b3000;
	position: absolute;
	top:40px;
	left:20px;
	border-radius: 50%;
}	
#tLightLEDS:before{  
	content:'';	
	top:-22px;
	display: block;
	height: 20px;
	width: 20px;
	position: relative;
    background: #650000;
	border-radius: 50%;
}
#tLightLEDS:after{  
	content:'';	
	top:-18px;
	display: block;
	height: 20px;
	width: 20px;
	position: relative;
    background: #002400;
	border-radius: 50%;
}
.CyclingRed:before{
	animation: redblinker 1.5s cubic-bezier(0,1,0,1) infinite;
}
.WaningRed:before{
	animation: redwane 1s linear infinite;
}
.ActiveRed:before{
	background: #ff0000 !important;
}
.CyclingAmber{
	animation: amberblinker 1.5s cubic-bezier(0,1,0,1) infinite;
}
.WaningAmber{
	animation: amberwane 1s linear infinite;
}
.ActiveAmber{
	background: #ffdc00 !important;
}
.CyclingGreen:after{
	animation: greenblinker 1.5s cubic-bezier(0,1,0,1) infinite;
}
.WaningGreen:after{
	animation: greenwane 2s linear infinite;
}
.ActiveGreen:after{
	background: #00CC00 !important;
}
.cycling {
  animation: blinker 1s linear infinite;
}
@keyframes redblinker {
  50% { background: #ff0000; }
}
@keyframes redwane {
  0% { background: #650000; }
  85% { background: #650000; }
  90% { background: #ff0000; }
}
@keyframes amberblinker {
  50% { background: #ffdc00; }
}
@keyframes amberwane{
  0% { background: #4b3000; }
  85% { background: #4b3000; }
  90% { background: #ffdc00; }
}
@keyframes greenblinker {
  50% { background: #00CC00; }
}
@keyframes greenwane {
  0% { background: #002400; }
  69% { background: #002400; }
  70% { background: #00CC00; }
}
/* .spaceXsvg{ */

div#tLight svg{
	top: 13px;
	left: 2px;
	position: relative;
	fill: white;
}
div#tLightHrz svg{
	transform: rotate(-90deg);
	width:36px;
	top: -14px;
	left: -10px;
	position: relative;
	fill: white;
}