/* CSS Document - SKYNETV7 C_MEDIA 2024 */
@font-face {font-family: vol; 		src: url(fonts/vol.woff);}
@font-face {font-family: vicreg; 	src: url(fonts/VIC-regular.woff);}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;	
	margin-bottom: 0px;
	/*background-color:#D2F4FF;*/
	background-image:linear-gradient(to bottom right, #D2F4FF, #8CE2FF);
}
a:link 		{color: #0fc4ff;}
a:visited 	{color: #0fc4ff;}
a:hover 	{color: #000000;}
a:active 	{color: #0fc4ff;}

#tbl td {border-bottom: 1px dashed #dadada;}

#tbl10 td {border-bottom: 1px dashed #dadada; font-size:10px;}
#tbl10 tr:hover {background-color:#CCCCCC; cursor:pointer;}


#tbl2 td {border-bottom: 1px dotted #999999; border-right: 1px dotted #CCCCCC; background-color:#FFFFFF;}
#tbl2 td:hover {background-color:#CCCCCC; cursor:pointer;}

.sticky {
position: sticky;
top: 134px;
}


.nv1 {
width:100%;
background-image:linear-gradient(to bottom right, #336699, #336699);
position:fixed;
top:80px;

z-index:88;
}
.nv1txt {
color:#FFFFFF;
font-family: 'vicreg', sans-serif;
font-size:14px;
padding:7px;
font-weight:400;
}
.nv1txt a:link {color: #336699;	text-decoration:none;}
.nv1txt a:visited {	color: #336699;	text-decoration:none;}
.nv1txt a:hover {	color: #000000;	text-decoration:none;
	/*text-shadow: 1px 1px 4px rgba(150, 150, 150, 1);*/
}
.nv1txt a:active {	color: #336699;	text-decoration:none;}



.nv2 {
width:100%;
height:80px;
background-image:linear-gradient(to bottom right, #0099cc, #0fc4ff);
color:#ffffff;
font-family: 'vicreg', sans-serif;
/*font-weight:300;*/
position:fixed;
z-index:90;
}
.nv2sub {
position:relative;
width:100%;
left:0%;
}
.nv2logo{
width:100px;
cursor:pointer;
font-size:36px;
font-family:'vol';
}
.nv2logo a:link {
	color: #ffffff;
	text-decoration:none;
}
.nv2logo a:visited {
	color: #ffffff;
	text-decoration:none;
}
.nv2logo a:hover {
	color: #ffffff;
	text-decoration:none;
}
.nv2logo a:active {
	color: #ffffff;
	text-decoration:none;
}
.nv2logo td {
border-bottom: 0px;
font-weight:bold;
}

.nv2menu{
float:left;
}


.nv2txt{
padding-top:29px;
padding-left:21px;
font-size:17px;
}
.nv2txt a:link {
	color: #ffffff;
	text-decoration:none;
}
.nv2txt a:visited {
	color: #ffffff;
	text-decoration:none;
}
.nv2txt a:hover {
	color: #ffffff;
	text-decoration:none;
	/*text-shadow: 1px 1px 4px rgba(150, 150, 150, 1);*/
}
.nv2txt a:active {
	color: #ffffff;
	text-decoration:none;
}


.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.blink_me2 {
  animation: blinker2 2s linear infinite;
}

@keyframes blinker2 {
  50% {
    opacity: 0;
  }
}


/*===================START OF DROPDOWN=================*/
.dropbtn {
  border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  background-color:#0099cc;
  /*margin-top:6px;*/
}
/* Links inside the dropdown */
.dropdown-content a {
  padding: 10px 13px;
  text-decoration: none;
  display: block;
  font-size:14px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #FFC300;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #FFC300;}
/*===================END OF DROPDOWN=================*/



.bcbuffer {
width:100%;
height:110px;
/*background-image:linear-gradient(to bottom right, #336699, #336699);*/
}
.bc {
width:100%;
/*background-image:linear-gradient(to bottom right, #336699, #336699);*/
margin-bottom:-10px;
}
.bctxt {
color:#000000;
font-family: 'vicreg', sans-serif;
font-size:11px;
padding:7px;
font-weight:400;
}
.bctxt a:link {
	color: #0099cc;
	text-decoration:none;
}
.bctxt a:visited {
	color: #0099cc;
	text-decoration:none;
}
.bctxt a:hover {
	color: #000000;
	text-decoration:none;
	/*text-shadow: 1px 1px 4px rgba(150, 150, 150, 1);*/
}
.bctxt a:active {
	color: #0099cc;
	text-decoration:none;
}





.content {
width:98%;
margin-left:1%;
z-index:-10;
}
.contentBOX {
background-color:#FFFFFF;
border-top: none;
border-left: none;
border-right: solid 1px #e8e8e8;
border-bottom: solid 1px #e8e8e8;
border-radius: 5px;
box-shadow: 1px 1px 2px #e8e8e8;
margin-left:3px;
margin-right:3px;
margin-top:3px;
margin-bottom:6px;
padding:10px;
}



.modal{
/*background-color:#278DE6;
height:100%;
width:100%;
opacity:1.0;*/
position:fixed;
top:120px;
left:10%;
height:80%;
width:80%;
border:solid 10px #336699;
padding:0px 8px 8px 8px;
background-color:#FFFFFF;
z-index:100;
}


h1 {
	font-family: 'vol';
	font-size: 60px;
	color: #0fc4ff;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:5px;
	font-weight:400;
}
.h1sub {
color:#336699;
}
.h1sub a:link {
	color: #336699;
	text-decoration:none;
}
.h1sub a:visited {
	color: #336699;
	text-decoration:none;
}
.h1sub a:hover {
	color: #0099cc;
	text-decoration:none;
	/*text-shadow: 1px 1px 4px rgba(150, 150, 150, 1);*/
}
.h1sub a:active {
	color: #336699;
	text-decoration:none;
}


h2 {
	font-family: 'vicreg';
	font-size: 20px;
	color: #000000;
	margin-top:0px;
	margin-bottom:0px;
	font-weight:bold;
}
h3 {
	font-family: 'vol';
	font-size: 24px;
	color: #0fc4ff;
	margin-top:10px;
	margin-bottom:-20px;
	margin-left:5px;
	font-weight:400;
}
p {
	font-family: 'vicreg';
	font-size: 13px;
	color:#333333;
	margin-top:3px;
	margin-bottom:3px;
	font-weight:400;
}

p td {
	font-family: 'vicreg';
	font-size: 13px;
	color:#333333;
	border-bottom: 1px dotted #CCCCCC;
}
td {
	font-family: 'vicreg';
	font-size: 13px;
	color:#333333;
}

form td {
border-bottom: 0px;
font-weight:bold;
}

button, input[type="button"], input[type="submit"] { 
color:#ffffff; 
font-family: 'vicreg';
font-size: 16px;
font-weight:300;
background-color:#0099cc; 
border-radius: 10px;
border:none;
padding-top:5px;
padding-left:7px;
padding-bottom:5px;
padding-right:7px;
margin-top:2px;
cursor:pointer;
} 
button:hover, input[type="button"]:hover, input[type="submit"]:hover {
background-color:#FFC300;
}

input[type=text], textarea, input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=time], select {
font-family: 'vicreg';
font-size: 15px;
color:#666666;
padding:5px;
border: solid 1px #CCCCCC;
/*border-left: none;
border-right: none;
border-top: none;
border-bottom: solid 1px #278DE6;*/
background-color:#e8e8e8;
width:100%;
box-sizing : border-box;
}




ul {
list-style: none;
margin-left: 0;
padding-left: 1.2em;
text-indent: -1.2em;
margin-top:10px;
font-family: 'vicreg';
font-size: 13px;
}

li:before {
content: ">";
display: block;
float: left;
width: 1.2em;
color: #0fc4ff;
font-weight:700;
font-family: 'vicreg';
font-size: 13px;
}
li {
margin-bottom:5px;
}



#calBOX {
list-style-type: none;
margin: 0px;
padding: 0px;
margin-top:10px;
}
#calBOX li {
position: relative;
float: left;
margin: 0px 1% 4px 0px;
width: 13.2%;
text-align: left;
border-radius: 6px;
overflow:hidden;
background-color:#e8e8e8;
}


/*=======================SWITCH BOXES=================================*/
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-image:linear-gradient(to bottom right, #0099cc, #0fc4ff);
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/*=======================SWITCH BOXES=================================*/






.status {
    color:#ffffff; 
	font-family: vicreg;
	font-size: 12px;
	border-radius: 15px;
	border:none;
	padding:6px;
	text-align:center;
	margin:1px;
}
.WHITETXT{
color:#FFFFFF;
}

.GREY {
    background-color:#CCCCCC; 
}
.CHARCOAL {
    background-color:#666666; 
}
.BRIGHTPINK {
    background-color:#FF245B; 
}
.PINK {
    background-color:#FF6699; 
}
.MAROON {
    background-color:#660033; 
}
.BLUE {
    background-color:#278DE6; 
}
.LIGHTBLUE {
    background-color:#33CCFF; 
}
.RED {
	background-color:#FF3366;
    /*background-color:#CC0033; */
}
.GREEN {
    background-color:#66CC66; 
}
.YELLOW {
    background-color:#FFCC00; 
}
.ORANGE {
    background-color:#FF6633; 
}
.PURPLE {
    background-color:#9966CC; 
}
.BLACK {
    background-color:#000000; 
}



.bento-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  height : 30px;
  width : 28px;
  cursor:pointer;
}

.bento-dot {
  width : 10px;
  height: 10px;
  border-radius: 999px;
  background:#C70039;
  overflow: hidden;
}



.grid7 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5%, 13.5%));
  gap: 6px;
  max-width: 100%;
  margin-inline: auto;
  padding-left:3px;
  margin-bottom:6px
}

.grid7 div {
  aspect-ratio: 1/2;
  overflow: auto;
  
background-color:#FFFFFF;
border-top: none;
border-left: none;
border-right: solid 1px #e8e8e8;
border-bottom: solid 1px #e8e8e8;
border-radius: 5px;
box-shadow: 1px 1px 3px #cccccc;
padding:10px;  
}



#grid7ul {
list-style-type: none;
margin: 0px;
padding: 0px;
margin-top:10px;
}
#grid7ul li {
position: relative;
float: left;
margin: 0px 0px 1px 0px;
width: 95%;
padding: 5px;
text-align: left;
vertical-align:middle;
cursor: pointer;
border-radius: 6px;
overflow:hidden;
font-size:12px;
}

/*.browser-message {
  background-color: rgb(230, 60, 60);
  color: white;
  padding: 16px;
  font-family: system-ui;
  font-weight: 600;
  position: fixed;
  top: 0;
}

 @supports(aspect-ratio: 1 / 1) {
   .browser-message {
      display: none;
   }
  }
*/



.grid8 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.4%, 10.4%));
  gap: 6px;
  max-width: 100%;
  margin-inline: auto;
  padding-left:3px;
  margin-bottom:6px
}

.grid8 div {
  aspect-ratio: 1/1.8;
  overflow: auto;
  
background-color:#FFFFFF;
border-top: none;
border-left: none;
border-right: solid 1px #e8e8e8;
border-bottom: solid 1px #e8e8e8;
border-radius: 5px;
box-shadow: 1px 1px 3px #cccccc;
padding:10px;  
}




.grid10 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19.5%, 19.5%));
  gap: 6px;
  max-width: 100%;
  margin-inline: auto;
  padding-left:3px;
  margin-bottom:6px
}

.grid10 div {
aspect-ratio: 2/1;
overflow: auto;
  
background-color:#FFFFFF;
border-top: none;
border-left: none;
border-right: solid 1px #e8e8e8;
border-bottom: solid 1px #e8e8e8;
border-radius: 5px;
box-shadow: 1px 1px 3px #cccccc;
padding:10px;  
}


.marqueeTARGET {
  overflow: hidden;
  display: flex;
}

.marqueeTARGET h1{
  font-size: 5em;
  white-space: nowrap;
  text-transform: uppercase
}

.TRGDEPT1 {
  overflow: hidden;
  width:700px;
}
.TRGDEPT1 div{
  white-space: nowrap;
}
.TRGDEPT2 {
  overflow: hidden;
  width:700px;
}
.TRGDEPT2 div{
  white-space: nowrap;
}
.TRGDEPT3 {
  overflow: hidden;
  width:700px;
}
.TRGDEPT3 div{
  white-space: nowrap;
}
.TRGDEPT4 {
  overflow: hidden;
  width:700px;
}
.TRGDEPT4 div{
  white-space: nowrap;
}
.TRGDEPT5 {
  overflow: hidden;
  width:700px;
}
.TRGDEPT5 div{
  white-space: nowrap;
}

/*=======================SWITCH BOXES=================================*/
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/*=======================SWITCH BOXES=================================*/




#cctvBOX {
list-style-type: none;
margin: 0px;
padding: 0px;
margin-top:10px;
}
#cctvBOX li {
position: relative;
float: left;
margin: 0px 4px 4px 0px;

padding: 2px;
text-align: left;
vertical-align:middle;
cursor: pointer;
border-radius: 0px;
overflow:hidden;
font-family: Quicksand;
font-size: 15px;
color:#666666;
/*border: solid 1px #e8e8e8;
background-color:#f5f5f5;
*/z-index:0;
}