@viewport
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype");
  width: 240px auto;
}

/* Main Page Layout */
body {
	font-family: Verdana, Arial, Helvetica;
	font-size:12px;
	background-color:#494343;
/* 	background-color:#494343; */
	color: rgb(255,255,255);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
       header {
            background-color: black; /* Set the background color for the header */
            color: black; /* Set the text color for the header */
            padding: 10px;
            text-align: center;
        }

        main {
            display: flex;
            justify-content: center;
        }

        #left, #center, #right {
            padding: 1px;
        }

        #left {
            width: 18%; /* Adjust the width as needed */
/*			background-color: black;  Set a background color for left.php container */
        }

        #center {
            flex: 1; /* Take the remaining space */
        }

        #right {
			width: 18%; /* Adjust the width as needed */
/*            background-color: black; Set a background color for right.php container */
        }
.fill-space {
/*        content: '.......................................................................................................................................................................................................................................'; /* Adjust the number of dots based on your needs */
        white-space: nowrap;
		border-bottom: 1px dotted #ccc;
        overflow: hidden;
        display: inline-block;
    }
/***************************/

a:link {
	color: rgb(255,255,255); 
}

a:visited {
	color: rgb(255,255,255); 
}
 
a:active {
	color: rgb(255,255,255);
}

a:hover {
	text-decoration: underline;
}

#logo {
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	font-size:36px;
	font-style:italic;
 }
#logos {
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	font-size:18px;
	font-style:italic;
 }
#logol {
    position: relative;
}
#logol img {
    position: absolute;
    top: 0px;
    left: 0px;
}
#logor {
    position: relative;
}
#logor img {
    position: absolute;
    top: 0px;
    right: 0px;
}

.password {
  	font-family: "Source Sans Pro";
	font-size:18px;
	font-variant-numeric: slashed-zero;
}
body.cc {background-color:#2d2d2d}
h1, h2, h3, h4, h5, h6 {
	font-family: Verdana, Arial, Helvetica;
	color: rgb(255,255,255);
}

h1.reverse {
	font-family: Verdana, Arial, Helvetica;
	color: rgb(142,0,119);
}

h2.reverse {
	font-family: Verdana, Arial, Helvetica;
	color: rgb(142,0,119);
}

h3.reverse {
	font-family: Verdana, Arial, Helvetica;
	color: rgb(142,0,119);
}

h4.reverse {
	font-family: Verdana, Arial, Helvetica;
	color: rgb(142,0,119);
}

h5.reverse {
	font-family: Verdana, Arial, Helvetica;
	color: rgb(142,0,119);
}

h6.reverse {
	font-family: Verdana, Arial, Helvetica;
	color: rgb(142,0,119);
}

table.reverse {
	color: black;
	background-color: rgb(255,255,255);
}
table.normal {
	background-color:gray;
	color: rgb(255,255,255);
}
a:link.reverse {
	color: blue;
}
a:active.reverse {
	color: blue;
}
a:visited.reverse {
	color: blue;
}
a:hover.reverse {
	text-decoration: underline;
}
tr.reverse {
/* 	color: black; */
	background-color: gray;}
tr.normal {
/* 	color: black; */
	background-color: lightgray;}

.reverset {
	color: lightgreen;
}
.normalt {
	color: lightgreen;
}
a.reverset {
	color: lightgreen;
}
a:link.reverset {
	text-decoration: none;
	}
a:active.reverset {
	text-decoration: none;
	}
a:visited.reverset {
	text-decoration: none;
	}
a:hover.reverset {
	text-decoration: underline;
	}
tr.reverset {
	background-color: gray;
	}
tr.normalt {
	background-color: gray;
	}
	
.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  color:black;
  position:relative;
  Top:50%
}
label {
display: inline;
}
.regular-checkbox {
display: none;
}
.regular-checkbox + label {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
}
.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.regular-checkbox:checked + label {
background-color: #e9ecee;
border: 1px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
color: #99a1a7;
}
.regular-checkbox:checked + label:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 0px;
left: 3px;
color: #99a1a7;
}
.big-checkbox + label {
padding: 18px;
}
.big-checkbox:checked + label:after {
font-size: 28px;
left: 6px;
}
.tag {
font-family: Arial, sans-serif;
width: 200px;
position: relative;
top: 5px;
font-weight: bold;
text-transform: uppercase;
display: block;
float: left;
}
.big-checkbox + label {
padding: 18px;
}
.big-checkbox:checked + label:after {
font-size: 28px;
left: 6px;
}
#rss {
	position:absolute;
	width:100%;
	top: -2px;
	font-family:Georgia, "Times New Roman", Times, serif;
}
.floating_element {
	width:450px;
}
.title-head {
	font-family:"Trebuchet MS";
	position:absolute;
	width: 100%;
	top: 1;
	alignment-adjust:middle;
	text-align:center;
	font-size:18px;
    font-weight:bold;
    background-color:#006699;
	color:#FFFFFF;
    padding:3px;
}
.marquee, .black_marquee div {
 height: 50px;	
 width: 100%;
 position: relative;
 color: white;
 font-family:"Trebuchet MS";
 font-size:24px;
 font-weight:bold;
}
.black_marquee {
 color: black;
 font-family:"Trebuchet MS";
 font-size:24px;
}
.no_marquee {
 height: 16px;	
 overflow: hidden;
 position: relative;
 color: black;
 align-items: center;
 align-content: center;
 align-self: center; 
 text-align: center;
	ali
 font-family:"Trebuchet MS";
 font-size:24px;
 font-weight:bold;
}
.marquee, .no_marquee {
	height: auto;
	width: 100%;
}
.marquee, .black_marquee {
 padding-left: 0%;
 position: absolute;
 width: 100%;
 height: auto;
 margin: 0 auto;
 line-height: 30px;
 text-align: center;
 white-space-collapse:collapse;
 white-space: wrap; 
 /*  Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */
 -moz-animation: scroll-left 10s linear infinite;
 -webkit-animation: scroll-left 10s linear infinite;
 animation: scroll-left 20s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); 
 -webkit-transform: translateX(100%); 
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); 
 -webkit-transform: translateX(-100%); 
 transform: translateX(-100%); 
 }
} 
.marquees {
 height: 16px;	
 overflow: hidden;
 position: relative;
 color: white;
 font-family:"Trebuchet MS";
 font-size:16px;
 font-weight:bold;
}
.marquees p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 16px;
 text-align: center;
 white-space: nowrap;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 10s linear infinite;
 -webkit-animation: scroll-left 10s linear infinite;
 animation: scroll-left 10s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}
tr.password:nth-child(odd) {background-color:black;}
tr.password:nth-child(even) {background-color:lightgray; color:black;}
tr.school:nth-child(3n) {background-color:lightgray; color:black;}
.button {
	width:70%;
    height:12px;
    -moz-box-shadow:inset 0 1px 0 0 #fff;
    -webkit-box-shadow:inset 0 1px 0 0 #fff;
    box-shadow:inset 0 1px 0 0 #fff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
    background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
    background-color:#fff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    font-size:12px;
    font-weight:700;
    padding:4px 14px;
    text-decoration:none;
    text-shadow:1px 1px 0 #fff
}
.button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
    background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
    background-color:#d1d1d1
}
.button:active {
    position:relative;
    top:1px
}


.bigbutton {
	width:90%;
    height:40px;
    -moz-box-shadow:inset 0 1px 0 0 #fff;
    -webkit-box-shadow:inset 0 1px 0 0 #fff;
    box-shadow:inset 0 1px 0 0 #fff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
    background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
    background-color:#fff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    font-size:28px;
    font-weight:700;
    padding:4px 14px;
    text-decoration:none;
    text-shadow:1px 1px 0 #fff
}
.bigbutton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
    background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
    background-color:#d1d1d1
}
.bigbutton:active {
    position:relative;
    top:1px
}
div.cat {
	width: 90%; 
	height: .8em; /* needed by NN6*/
	line-height: 1em;
	border-bottom: 2px dotted white;
	margin-top: .7em;
	font-size: 1em;
	font-weight: normal;
	text-wrap:supress;
}

div.subcat {
	width: 100%;
	w\idth: 93%;		/*conforming browser hack*/
	margin-left: 6%;  /* width and margin-left = 100% hack 99% for IE*/
	height: 1.1em;		/* needed by NN6*/
	border-bottom: 3px dotted white;
	margin-top: .4em;
	font-size: .8em;
	font-weight: bold;
	text-transform:capitalize;
}
.nl {
	text-decoration: none;
}

.itemname	{
	float: left;
	position: relative; /*needed by IE6*/
	top: 5px;
	padding-right: 6px;
	text-align: left;
	font-variant:normal;
	text-transform:capitalize;
}

div.cat>.itemname, div.subcat>.itemname	{
	position:static; /*IE5 Mac Bug, items are offset */
} 

.num	{
	float: right;
	position: relative; /* needed by IE6*/
	top: 0px;
	width: 64px;
	text-align: right;
	padding-left: 6px;
/*	font-family: "Courier New", monospace; */
	text-wrap:supress;
}
button {
    border: 0;
    padding: 0;
	display: inline;
    background: none;
	font-size:14px;
    text-decoration: underline;
    color: blue;
}
button:hover {
    cursor: pointer;
}

/* Left Column */
.l-container {
    display: flex;
	padding: 0px;
    padding-top: 15px;
	text-align: center;
}

.sidebar {
    width: 100%;
/*    background-color: #000; */
    border: 0px solid #000000;
    padding: 0px;
}

.l-content {
    width: 60%;
    background-color: #ffffff;
    border: 1px solid #000000;
    padding: 0px;
	color: lightgreen;
}

.l-header {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 2px;
	color: lightgreen;
	background-color: gray;
}

.search-form {
    margin-bottom: 10px;
}
.stats-container {
		width: 50%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 0px solid #ddd;
/*        border-bottom: 1px solid #ddd; */
        padding: 8px;
        margin: 8px 0;
    }
.stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 5px;
	color: lightgreen;
}

.stats-table-l {
    border: 0px solid #000000;
    padding: 0px;
    text-align: left;
    white-space: nowrap;	
}
.stats-table-r {
    border: 0px solid #000000;
    padding: 0px;
	padding-right: 5px;
    text-align: right;
    white-space: nowrap;
}
.stats-table-c {
    border-bottom: 1px dotted #ddd;
    padding: 0px;
	padding-right: 5px;
    text-align: center;
    white-space: nowrap;
}
.stats-table th {
    background-color: gray; 
}

.total-devices {
    font-weight: bold;
}
.stats-left {
        flex: 1;
    }

.stats-right {
        text-align: right;
    }


/* Right Column */
.r-container {
    width: 100%;
    display: flex;
    justify-content: center;
	padding: 0px;
    padding-top: 15px;
}

.r-content {
    width: 100%;
    border: 0px solid #000;
/*    background-color: #000; */
	color: lightgreen;
}

.r-header {
    display: flex;
	text-align: center;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 2px;
	color: lightgreen;
	background-color: gray;
}

.r-school-row {
    display: flex;
    justify-content: space-between;
    padding: 2px;
    border-bottom: 1px dotted #ccc;
}

.r-school-name {
    flex: 1;
	padding-left: 15px;
}

.r-school-count {
    flex: 1;
    text-align: right;
	padding-right: 15px;
}

.r-school-tech {
    flex: 1;
    text-align: right;
}

.r-footer {
    text-align: right;
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
	padding-right: 5px;
	border-bottom: 0px;
}

.m-table-container {
    margin: 5px auto;
    width: 98%;
    padding-top: 10px;
}

.m-table {
    display: flex;
    flex-direction: column;
    border: 0px solid #ddd;
}

.m-header,
.row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted #ddd;
}

.row > div {
    padding: 2px;
    text-align: left;
    flex: 1;
}

.row > div:first-child {
    flex: 0 1 3%; /* Adjust the width as needed */
}
.row > div:nth-child(2) {
    flex: 0 1 22%; /* Adjust the width as needed */
}
.row > div:nth-child(3) {
    flex: 0 1 30%; /* Adjust the width as needed */
}
.row > div:nth-child(4) {
    flex: 0 1 25%; /* Adjust the width as needed */
}
/* Add similar styles for other columns as needed */


.container {
			width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

.column {
/* A            width: calc(33.33% - 10px); djust the width and margin as needed */
            margin: 5px;
            box-sizing: border-box;
            border: 0px solid #ccc;
            padding: 5px;
        }

        /* Media Query for responsiveness */
@media (max-width: 767px) {
            .column {
                width: 100%;
            }
        }