@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");

/* @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"); */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap')


* {
  margin: 0;
  padding: 0;
}




/* https://stackoverflow.com/questions/18890053/php-conditions-depending-on-window-width-media-queries */


/* CHANGE ADMIN DASH */


body {
	background-color: #454d55;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: center;
    font-family: 'Roboto', Arial, Helvetica, Verdana, sans-serif;
	color: #fff;
}




#spinny	{
	color: #1c1c2c;
}

#spinny i { 
	color: #28a745;

}


/* CHANGE ADMIN DASH */





// WAS CUSTOM




.nodeNum {
    margin: 5px;
    cursor: pointer;
}

.nodeNum:hover {
    font-weight: bold;
    color: #ffc107;
}


#bubblechart {
    font-size: 1em;
}

#lsnodeschart {
    font-size: 9.5px;
}

#website {
    font-size: 9.5px;
}

#header {
    width: 100%;
    position: relative;
    margin: 1px 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-image: linear-gradient(to right, #0066cc,#3399ff,#003399);

/* Background definitions are in global.inc - Do not change here */
/*    background-color: blue; */
/*    background-image: url("background.jpg"); */
/*    height: 124px; */

}

#headerTitle {
    position: absolute;
    top: 20px;
    left: 10px;
    margin: 0px 0px;
    font-weight: normal;
    font-size: 2.5em;
    color: black;
    line-height: normal;
    letter-spacing: normal;
    font-family: "Roboto", Helvetica, Arial,  "Roboto", Helvetica, Arial, Verdana, sans-serif;
}

#headerTitle a:link {
    text-decoration: none;
    color: black;
}

#headerTitle a:visited {
    text-decoration: none;
    color: black;
}

#headerTitle a:hover {
    text-decoration: none;
    color: yellow;
}

#headerTag {
    position: absolute;
    top: 58px;
    left: 10px;
    margin: 0px 0px;
    color: white;
    font-weight: bold;
    font-size: 0.9em;
    line-height: normal;
    font-family: "Roboto", Helvetica, Arial,  "Roboto", Helvetica, Arial, Verdana, sans-serif;
    letter-spacing: normal;
}

#header2Tag {
    position: absolute;
    top: 70px;
    left: 10px;
    margin: 0px 0px;
    font-size: 0.9em;
    color: black;
    font-weight: normal;
    line-height: normal;
    font-family: "Roboto", Helvetica, Arial,  "Roboto", Helvetica, Arial, Verdana, sans-serif;
    letter-spacing: normal;
}

#header3Tag {
    position: absolute;
    top: 54px;
    left: 10px;
    margin: 0px 0px;
    font-size: 1.3em;
    color: lightgreen;
    font-weight: bold;
    line-height: normal;
    font-family: "Roboto", Helvetica, Arial,  "Roboto", Helvetica, Arial, Verdana, sans-serif;
    letter-spacing: normal;
}

#header4Tag {
    position: absolute;
    top: 74px;
    left: 10px;
    margin: 0px 0px;
    font-size: 1.3em;
    color: black;
    font-weight: normal;
    line-height: normal;
    font-family: "Roboto", Helvetica, Arial,  "Roboto", Helvetica, Arial, Verdana, sans-serif;
    letter-spacing: normal;
}

#headerImg {
    position: absolute;
    top: 9px;
    right: 12px;
}

#headerImg2{
    position: absolute;
    top: 9px;
    right: 212px;
}

#mytilepic {
    position: absolute;
    top: 4px;
    right: 128px;
}

#mytilepic2 {
    position: absolute;
    top: 4px;
    right: 228px;
}

#headerLogin {
    position: absolute;
    top: 95px;
    left: 11px;
    font-size: 14px;
    font-family: "Roboto", Helvetica, Arial, Verdana,Arial,sans-serif;
    color: white;
}

#headerLogin a:link {
    text-decoration: none;
    color: white;    
}

#headerLogin a:visited {
    text-decoration: none;
    color: white;
}

#headerLogin a:hover {
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    color: yellow;
}





#menu {
    // position: relative;
    // width: 100%;
    float: right;
    // padding: 0px 0px 0px 12px;
    box-sizing: border-box;
    //border-bottom-left-radius: 10px;
    //border-bottom-right-radius: 10px;
    // background-color: #003366;
    //font-size: .95em;
    //font-family: "Roboto", Helvetica, Arial, Verdana,Arial,sans-serif;
}

#menu a {
    display: block;
    padding: 0px 0px 0px 12px;
    text-decoration: none;
    // color: white;
}

#menu a:hover {
    // background: transparent;
    // font-weight: bold;
	// color: yellow;
}

#menu a:active {
}

#menu a.active {
    // color: yellow;
}

#menu ul {
    list-style-type: none;
    margin: 0;
    float: left;
    padding: 0px 0px 0px 0px;
    // background-color: #003366;
}

#menu li {
    float: left;
}

#menu li a, .dropbtn {
    display: inline-block;
    /** color: white; **/
    text-align: center;
    /** padding: 14px 16px; **/
    text-decoration: none;
}

#menu li a:active {
}

#menu li a.active {
    // color: white;
}

#menu li a:hover {
    // color: yellow;
}


#menu li.dropdown {
    display: inline-block;
}

#menu .dropdown-content {
    display: none;
    position: absolute;
	background-color: white;
    //background-color: #003366;
	//background: rgba(0,0,0,0.45);
	min-width: 160px;
    // box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 5;
}

#menu .dropdown-content a {
    color: yellow;
    // padding: 1px 4px 4px 4px;
    text-decoration: none;
    display: block;
    text-align: left;
}

#menu .dropdown-content a:hover {
    background-color: #003366;
    font-weight: bold;
}

#menu .dropdown:hover .dropdown-content {
    display: block;
}

#footer {
    font-size: 11px;
}







/* CHANGE ADMIN DASH */


table.rtcm {
    border-collapse: collapse;
    border: 1px solid black;
    padding: 5px;
    font-family: verdana,arial,sans-serif;
}

table.rtcm tr {
    font-size: 12px;
}

table.rtcm td {
    white-space: nowrap;
}

table.rtcm th {
    border: 1px solid black;
    font-size: 12px;
    padding: 5px;
    background-color: #dedede;
}

table.gridtable {
    font-family: 'Roboto',verdana,arial,sans-serif;
    font-size: 12px;
    color: black;
    padding: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: #6c757d;
    border-collapse: collapse;

}

table.gridtable th {
    border-width: 1px;
    padding: 4px;
    border-style: solid;
    border-color: #454d55;
    background-color: #24272a;
    font-size: 13px;
	text-transform: uppercase;
	color: #e0e0e0;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

table.gridtable td {
    border-width: 1px;
    padding: 5px;
    border-style: solid;
    border-color: #454d55;
    background-color: #31373d;
    font-size: 13px;
	color: #e0e0e0;
}

table.gridtable tr.rColor td {
    background-color: #28a745;
    font-weight: bold;
    color: #e0e0e0;
}

table.gridtable tr.cColor td {
    background-color: #dc3545;
    font-weight: bold;
    color: #28a745;
}

table.gridtable tr.bColor td {
    background-color: palegreen;
    font-weight: bold;
    color: black;
}

table.gridtable tr.gColor td {
    background-color: #2a2f33;
    font-weight: bold;
    color: lightgrey;
}

table.gridtable tr.tColor td {
    background-color: #24272a;
    font-weight: bold;
    color: #FFA122;
}

table.gridtable tr.lColor td {
    background-color: powderblue;
    font-weight: bold;
    color: black;
}

.disconnect {
    font-size: 14px;
    text-align: left;
}

.text {
    position: relative;
    margin: 0px 0px 0px 10px;
    width: 330px;
    font-size: 14px;
    text-align: left;
}

.barbox_a {
    position: absolute;
    top: 2px;
    left: 10px;
    margin: 0px 0px 0px 0px;
    width: 302px;
    height: 22px;
    background-color: black;
}

.bar {
    position: relative;
    top: 1px;
    left: 1px;
    margin: 0px 0px 0px 0px;
    width: 0px;
    height: 20px;
    background-color: #0099FF;
    text-align: center;
    color: white;
}

.per {
    position: absolute;
    top: 0px;
    font-size: 12px;
    left: 50%;
    height: 20px;
    margin: 0px 0px 0px 0px;
    background-color: #0099FF;
    color: white;
}

.blank {
    background-color: white;
    width: 300px;
}

#login {
    display: none;
}

#login-header {
    margin: 0 auto;
    position: absolute;
    right: 250px;
}

#login-link {
    position: absolute;
    top: 0px;
    right: 0px;
    display: block;
    background: #2a2a2a;
    padding: 5px 15px 5px 15px;
    color: #FFF;
}

#login-panel {
    position: absolute;
    top: 26px;
    right: 0px;
    width: 200px;
    padding: 10px 15px 5px 15px;
    background: #2a2a2a;
    font-size: 10pt;
    font-weight: bold;
    color: #FFF;
    display: none;
}

label {
    line-height: 1.8;
}

.clearer {
    clear: both;
	margin-top: 5px;
}

#cpMain {
    display: none;
}

.submit {
    background: lightgray;
    padding: 3px 4px 4px 4px 1px;
    color: black;
}

.submit:hover {
    background: darkblue;
    font-weight: bold;
    padding: 3px 4px 4px 4px 1px;
    color: yellow;
}

.submit2 {
    background: lightgray;
    padding: 3px 4px 4px 4px 1px;
    color: black;
}

.submit2:hover {
    background: yellow;
    font-weight: bold;
    padding: 3px 4px 4px 4px 1px;
    color: black;
}






#timecontainer	{
    overflow: hidden;
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	padding: 10px 30px 0px 30px;
	margin-bottom: 0px;
    background: rgba(0,0,0,0.85);

}


















/* https://www.w3schools.com/howto/howto_css_fixed_menu.asp */

/* Style the navbar */

#navbar {
    overflow: hidden;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */

    background-color: #24272a;
    font-weight: normal;
    font-size: 1em;
    background: rgba(0,0,0,0.85);
	color: #FFA122;
    line-height: normal;
    letter-spacing: normal;
    font-family: 'Roboto', Arial, Helvetica, Verdana, sans-serif;

}



#banner {
	background-color: #0a0c0d;
	color: #ffffff;
	z-index: 1;
	padding: 5px 5px;
	margin-top: -5px;
}


/* Navbar links */

#containerlogo {
	float: left;
	display: block;
	text-align: center;
	padding: 10px 10px 7px 0px;

}

#containertitle {
	float: left;
	display: block;
	color: #ffffff;
	text-align: center;
	padding: 17px 20px 17px 0px;

}



#containermenu {
	float: right;
	display: block;
    font-size: .9em;
	color: #ffffff;
	text-transform: uppercase;
	text-align: center;
	padding: 18px 10px 14px 10px;

}


#containermenupipe {
	float: right;
	display: block;
    font-size: .9em;
	color: #ffffff;
	text-transform: uppercase;
	text-align: center;
	padding: 18px 0px 14px 0px;

}

#containermenu a, #containertitle a {
	color: #ffffff;
	text-decoration: none;
}

#containermenu a:hover, #containertitle a:hover {
	color: #ffc107;
	text-decoration: none;
}





/* WAS CHANGE ADMIN DASH */







/* Page content */

.content {
    padding: 0 0 16px 0;

}



/* The sticky class is added to the navbar with JS when it reaches its scroll position */


.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}



/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
    padding-top: 60px;
}


/* CHANGE ADMIN DASH */

#footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	padding: 14px 0px;
	background-color: #24272a;
	font-weight: normal;
	font-size: .8em;
    line-height: normal;
    letter-spacing: normal;
    font-family: 'Roboto', Arial, Helvetica, Verdana, sans-serif;
	text-decoration: none;
	color: #ffffff;
    background: rgba(0,0,0,0.85);
}

#footer a {
	color: #FFFFFF;
	text-decoration: none;
}

#footer a:visited {
	color: #FFFFFF;
	text-decoration: none;
}

#footer a:hover {
	color: #ffc107;
	font-weight: bold;
	text-decoration: none;
}


/* WAS CHANGE ADMIN DASH */

/* https://www.freecodecamp.org/news/how-to-center-an-image-in-css/ */

#targetcontainer {
  	display: flex;
	justify-content: center;
  	align-items: center;
	height: 180px;
	background-position: center center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: auto;
}

#targetcontainer img {
	height: 140px;
}


#targetspacerpre {
	margin: 0px 0px 0px 0px;
	height: 53px;
}

#targetspacerpost {
	margin: 0px 0px 0px 0px;
	height: 20px;
}

#target {
	margin:0px 0px 0px 0px;
	padding: 0 0;
	height:180px;
	width: 100%;
	background-position: center center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover;
	color: #ffffff;
	font-family: 'Dancing Script', cursive;
	text-shadow: 2px 2px 4px #000000;
	font-size: 2em;
	background-position: center center;
}


/* https://stackoverflow.com/questions/15231812/random-background-images-css3 */



a {
	color: lightgray;
	text-decoration: underline;
}

a:visited {
	color: lightgray;
	text-decoration: none;
}

a:hover {
	color: #ffc107;
	font-weight: bold;
	text-decoration: none;
}






/ * TIME */


section.times {
	font-family: PT Sans Narrow, arial narrow, helvetica;
	font-weight: 700;
	display: flex;
	background-color: #;
	color: #ffffff;
	margin: 0px 0px 0px 5px;
	padding: 0px 0px;

}


section.times div {
	font-family: PT Sans Narrow, arial narrow, helvetica;
	font-weight: 700;
	line-height: .1em;
	padding: 10px 10px;
	margin: 0px 5px 10px 5px;
	display: flex;
    justify-content: space-between;
	border: 1px solid rgba(255,255,255, 0.1);
	font-size: 1em;
	border-radius: 3px;
	float: left;
	background: rgba(89,194,230, 0.1);
	box-shadow: inset 0 0 15px rgba(135, 135, 135, .1), 0 0 18px 3px rgba(0, 0, 0, .3);
}

section.times output {
	margin: 0 0 0 5px;
	font-weight: bold;
	display: flex;
	align-items: center;
}

section.times h4 {
	padding: 0px 0px;
	margin: 0px 0px;
}


section.times h4:before {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    background-color: #0033cc;
    border-solid: 1px #ffffff solid;
    border-radius: 50%;
    margin: 0 0.5em 0 0;
    vertical-align: -0.05em;
    transition: background-color 0.5s;
    
}

section.times div.open h4:before {
    background-color: #f3e25f;
}





.timecontainer {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 1em;
	grid-auto-rows: 50px;

}

.timecontainer > div {
	padding: 1em;
    background: rgba(89,194,230, 0.1);
}






<!-- NEWS SCROLLER -->



#news	{
	position: relative;
}
	

.news-ticker i {
	padding: 0 6px 0 0;
 	font-size: .9em;
	color: red;
}

.news-ticker {
	background: #31373d;
	box-sizing: content-box;
	overflow: hidden;
	padding: 5px 10px 10px 10px;
	text-align: center;
	height: 1.25em;
	color: #fff;
	border-bottom: 2px solid #31373d;
	border-top: 2px solid #31373d;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 10px 10px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

}

.news-ticker ul {
	padding: 0;
	margin: 0px 0px;
	list-style: none;
	animation: ticker 60s infinite;
	animation-timing-function: cubic-bezier(1,0,.5,0);
}



@keyframes ticker {
	0%	{
			margin-top: 0;
	}
	20%	{
			margin-top: -29px;
	}
	40%	{
			margin-top: -56px;
	}
	65%	{
			margin-top: -84px;
	}
	85%	{
			margin-top: -110px;
	}
	100%	{
			margin-top: 0;
	}
}


.news-ticker ul:hover {
	animation-play-state: paused;
}

.news-ticker ul li {
	font-family: PT Sans Narrow, arial narrow, helvetica;
	font-weight: 700;
	font-size: 1em;
	line-height: 27px;

	color: #fff;
}

.news-ticker a {
	color: #fff;
	text-decoration: none;
}



<!-- WAS NEWS SCROLLER -->




@media only screen and (max-width: 680px) {


	#container { padding: 0px 10px;}
	
	.notimp { display: none; }
	#notimp { display: none; }
	#tablet { display: none; }
	#mobile { display: none; }
	#large { display: none; }
	#tiny { display: none; }

}


@media only screen and (max-width: 879px) {


	#container { padding: 0px 10px;}
	
	.notimp { display: none; }
	#notimp { display: none; }
	#tablet { display: none; }
	#mobile { display: none; }
	#large { display: none; }

}


@media only screen and (min-width: 880px) and (max-width: 960px) {


	#container { padding: 0px 30px; }
	#tablet { display: none; }
	#large { display: none; }
}



/* WIDE */
@media (min-width: 961px) {

	#container	{ padding: 0px 50px; }
	#large { display: none; }
}