/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
input,
select,
textarea {
    color: #222;
}

html, body
{
  height: 100%;
  
}

body
{
  font-size: 1em;
  line-height: 1.4;
}

.xl_container{
	font-family:arial;
	
	/* margin:10px 0pt 15px; */
	font-size: 8pt;
	text-align: left;
    /*table-layout: fixed; - Used to be this but testing auto */
	table-layout: auto; /* Let the browser determine the column width */
	width: 90%;
	margin-left: auto;
    margin-right: auto;
}

.l_container{
	font-family:arial;

	/* margin:10px 0pt 15px; */
	font-size: 8pt;
	text-align: left;
    /*table-layout: fixed; - Used to be this but testing auto */
	table-layout: auto; /* Let the browser determine the column width */
	width: 70%;
	margin-left: auto;
    margin-right: auto;
}

.m_container{
	font-family:arial;
	
	/* margin:10px 0pt 15px; */
	font-size: 8pt;
	text-align: left;
    /*table-layout: fixed; - Used to be this but testing auto */
	table-layout: auto; /* Let the browser determine the column width */
	width: 50%;
	margin-left: auto;
    margin-right: auto;
}


::-moz-selection {
   /* background: #b3d4fc;*/
    text-shadow: none;
}

::selection {
    /* background: #b3d4fc;*/
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #fcbf18;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.side-menu {
  position: fixed;
  right: -300px;
  
  /* margin-top: -2.5em; */
  border-radius: 18px 0px 0px 18px;
	width: 350px;
	color: white;
	padding: 14px 15px;
	
	transition-duration: 2s;
	font-family: 'Lato', sans-serif;
	font-size: 24px;
	font-weight: 300;
	line-height: 36px;
	margin: -20px 0 36px 0px;
	z-index: 50;	
}





#side-menu-eco{
	top: 34%;
	background-color: #2295f0;	
}

#side-menu-eco:hover {
	right: 0px;
	transition-duration: 2s;
	top: 34%;
	background-color: #2295f0;	
}

#side-menu-phish{
	top: 42%;
	background-color: #48ae51;	
}

#side-menu-phish:hover {
	right: 0px;
	transition-duration: 2s;
	top: 42%;
	background-color: #48ae51;	
}

#side-menu-cost-analysis{
	top: 50%;
	background-color: #fcbf18;	
}

#side-menu-cost-analysis:hover {
	right: 0px;
	transition-duration: 2s;
	top: 50%;
	background-color: #fcbf18;	
}
#side-menu-contact {
	top: 58%;
	background-color: #9d29ae;	
}
#side-menu-contact:hover {
	right: 0px;
	transition-duration: 2s;
	top: 58%;
	background-color: #9d29ae;	
}
#side-menu-disaster {
	top: 66%;
	background-color: #e60000;	
}
#side-menu-disaster:hover {
	right: 0px;
	transition-duration: 2s;
	top: 66%;
	background-color: #e60000;	
}



#second-contact{
	text-align: left;
}

#contact-modal div{
	border-radius: 18px 18px 18px 18px;
}

.modal-heading{
	  border-radius: 18px 18px 0px 0px;
	  width: 100%;
	  color: white;
	  padding: 14px 20px;
	  background-color: #9d29ae;
	  font-family: 'Lato', sans-serif; 
      font-size: 34px; 
	  font-weight: 300; 
	  line-height: 36px; 
	  margin: -26px 0 36px 0px; 
	  text-align: center;

}
/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
    font: 16px/26px Helvetica, Helvetica Neue, Arial;
}


#ca_sample_data tr, #ca_sample_data td{
	width:100%;
	border:1px solid #ccc;
}
#ca_sample_data td{
	background-color: #fff;
	width: 11.11%;
}

.wrapper {
    width: 90%;
    margin: 0 5%;
}

.header-container {
    border-bottom: 20px solid #fcbf18;
}

.footer-container{
    border-top: 20px solid #fcbf18;
}

.header-container,
.footer-container,
.main aside {
    background: #fff;
}

.title {
    color: #000;
}

.headerlogo
{
  margin-top: 10px;
}

.undertable{
	text-align: right;
	margin-top: -20px;
	color: #008000;
	width: 100%;
	font-size:xx-small;
} 
/* ==============
    MOBILE: adjustment
   ============== */
   
	#navadalogo{
      max-width: 100%;
	}
	
	ul {
	padding: 0;
	margin: 0;
	}
	

/* ==============
    MOBILE: Menu
   ============== */

nav ul {
    margin-right: 1px;
    padding: 11px 10px 11px 10px;
}

nav a {
    display: block;
    border-radius: 10px 10px 10px 10px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
	margin-right: 1px;
	padding-bottom: 3px;
    color:#666;
    background: #fcbf18;
/* 	-webkit-box-shadow: 0 1px 3px #a7e5f9;
    -moz-box-shadow: 0 1px 3px #a7e5f9;
    box-shadow: 0 1px 3px #a7e5f9; */
}

nav a:hover,
nav a:visited {
    color:#666;
}

nav a:hover {
    display: block;

    color:#000;
    background: #eee;
}

/* ==============
    MOBILE: Main
   ============== */

#container
{
  min-height:100%;
}

#absolute-content
{
  overflow: auto;
  padding-bottom:50px;
}

.main 
{
  padding: 30px 0;
}

/* .main article h1 {
   color: #1E90FF; 
   font-family: 'Lato', sans-serif; 
   font-size: 42px; 
   font-weight: 300; 
   line-height: 44px; 
   margin: 0 0 14px; 
}
 */


.main aside {
    color: #999;
    /* padding: 0px 5% 10px;*/
	border-radius: 18px 18px 0px 0px;
}
.main aside p{
   margin:15px;
   padding-bottom:15px;
   
}

.main aside a:link
{
 color: #000;
}

.main aside a:visited
{
 color: #000;
}

section p{
	
	background-color: #fcfdfc;
	padding: 10px;
	border-radius: 7px 7px 7px 7px;
	
	
}
header p{
	
	background-color: #fcfdfc;
	padding: 10px;
	border-radius: 7px 7px 7px 7px;
	
	
}

.footer-container footer
{
  color: #999;
  padding: 10px 0;
}

#absolute-footer
{
  position: relative;
  margin-top: -50px; /* negative value of footer height */
  height: 50px;
  clear:both;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.data-one,
.data-two,
.data-three,
.data-four,
.data-five,
.data-six,
.data-seven{
  float: left;
  display: inline;
  margin-left:0px;
}

.circliful {
    position: relative; 
}

.circle-text, .circle-info, .circle-text-half, .circle-info-half {
    width: 100%;
    position: absolute;
    text-align: center;
    display: inline-block;
}

.circle-info {
	color: #999;
}

.circliful .fa {
	margin: -10px 3px 0 3px;
	position: relative;
	bottom: 4px;
}

.stage {
        border-bottom: 3px solid #444;
        display: flex;
        height: 330px;
        width: 100%;
}
.box {
        align-self: flex-end;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        background-color: #73bb02;
        height: 30px;
        
		text-align: center;
      
        transform-origin: bottom;
        width: 180px;
		-webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
}
.bounce-new {
        animation-name: bounce-new;
        animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}
    @keyframes bounce-new {
        0%   { transform: scale(1,1)      translateY(0); }
        10%  { transform: scale(1.1,.9)   translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-10px); }
        50%  { transform: scale(1.05,.95) translateY(0); }
        57%  { transform: scale(1,1)      translateY(-7px); }
        64%  { transform: scale(1,1)      translateY(0); }
        100% { transform: scale(1,1)      translateY(0); }
}

.mustard-button {
  background-color: white; 
  color: #cbda3c; 
  border: 2px solid #cbda3c;
}

.mustard-button:hover {
  background-color: #cbda3c;
  color: white;
}
/* in progress */
.status-button-mustard{
  background-color: #cbda3c;
   font-size: large;
  color: white;
}
.bold{
 font-size: 15px;
 font-weight: 700;
}

/* Completed */
.status-button-green {

  background-color: #73bb02;
   font-size: large;
  color: white;
}
/* other */
.status-button-blue {
  background-color: #04bad2;
   font-size: large;
  color: white;
}
/* clicked link || False - did not report*/
.status-button-red {
  background-color: #f32300;
   font-size: large;
  color: white;
}
.purple-button{
 background-color: white; 
  color: #9d29ae; 
  border: 2px solid #9d29ae;
}
.purple-button:hover{
background-color: #9d29ae;
  color: white;	
}
.icon-button
{
  height: 15px;
  width: 15px;
  border: 0;
  outline: 0;
  background-color: inherit;
  padding-right: 5px;
  padding-bottom: 1px;
  padding-left: 2px;

 
}
.icon-button:hover
{
  background-color: inherit;
}
.edit-button, .save-button, .delete-button
{
  float: right;
}
.services-table tbody
{
  width: 100%;
  
  font-family:arial;
	background-color: #CDCDCD;
	font-size: 7pt;
}

#donutcenter{
   
    top: -75px;
    left:120px;
    text-align: center;
    color: red;
	z-index: 10;
    
}
#campaigns li{
	list-style-type: none;
}
#templates ul li{
 list-style-type: none;
 }

.select-css {
	display: inline-block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .4em 1.1em .4em .7em;
	width: 20%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .35em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	/*background-color: #fff;*/
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto,100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	/*box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;*/
	color: #222;
	outline: none;
}
.select-css option {
	font-weight:normal;
}


/* ==========================================================================
   Login Modal
   ========================================================================== */
body {font-family: Arial, Helvetica, sans-serif;}

/* Full-width input fields */
input[type="text"], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  line-height: 2.5em;
  height: 2.5em;
}

/* Set a style for all buttons */
/*main button 100% width*/
button {
  padding: 10px !important;
  margin: 3px 3px !important;
  /* border: none; */
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  display: inline-block;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;  
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}


button:hover {
  opacity: 0.8;
} 

buttonsmall {
  padding: 10px !important;
  margin: 3px 3px !important;
  /* border: none; */
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  width: 200px !important;
  display: inline-block;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;  
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
buttonsmall:hover {
  opacity: 0.8;
} 
buttontiny {
  padding: 10px !important;
  margin: 3px 3px !important;
  /* border: none; */
  font-size: 12px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  width: 120px;
  display: inline-block;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;  
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
buttontiny:hover {
  opacity: 0.8;
} 
.campaignstart{
	 color: white;
}
.buttonlook {
  padding: 5px 8px;
  text-align: center;
  font-size: 16px;
  margin: 2px 2px; 
  min-width: 130px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px; 
  display: inline-block;

}
.blue-button {
  background-color: white; 
  color: #008CBA; 
  border: 2px solid #008CBA;
   text-decoration: none;
}
.blue-button:hover {
  background-color: #008CBA;
  color: white;
   text-decoration: none;
}

.red-button {
  background-color: white; 
  color: #f62600; 
  border: 2px solid #f62600;
   text-decoration: none;
}
.red-button:hover {
  background-color: #fc5c3d;
  color: white;
   text-decoration: none;
}

.orange-button {
  background-color: white; 
  color: #fcbf18;
  border: 2px solid #fcbf18;
   text-decoration: none;
}
.orange-button:hover {
  background-color: #fcbf18;
  color: white;
   text-decoration: none;
}


.green-button {
  background-color: white; 
  color: #4fd402;
  border: 2px solid #4fd402;
   text-decoration: none;
}
.green-button:hover {
	/* old green #73bb02 new green #4fd402 */
  background-color: #4fd402;
  color: white;
   text-decoration: none;
}

.quote {
  background-color: white; 
  color: #4fd402;
  border: 2px solid #4fd402;
   text-decoration: none;
}
.quote:hover {
	/* old green #73bb02 new green #4fd402 */
  background-color: #4fd402;
  color: white;
   text-decoration: none;
}

#phish {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
  border-radius: 10px 10px 10px 10px;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.modal-container {
	background-color:#f1f1f1;
	font-size: large !important;
  padding: 16px;
  border-radius: 0px 0px 18px 18px;
  text-align:center;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 30px;
  
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
 /* border: 1px solid #888;*/
  width: 90%; /* Could be more or less, depending on screen size */
  border-radius: 18px 18px 18px 18px;
}
.modal-content input{
	border-radius: 5px 5px 5px 5px;
	font-size: large;
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 10px;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}


#cost-analysis{
	width: 90%;
}
#cost-analysis input[type=number]{
	min-width: 120px;
	max-width: 120px;
}
/* Chrome, Safari, Edge, Opera */
/* to get rid of the updown arrow for number*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  padding: 6px 6px;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  line-height: 2.5em;
  height: 2.5em;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
  padding: 6px 6px;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  line-height: 2.5em;
  height: 2.5em;
}



/* ==========================================================================
   Admin Headings
   ========================================================================== */
.headingcapture{
	width: 560px;
}


#tabheading{
  font: normal normal normal 20px/1 Helvetica, arial, sans-serif;
  background:#04bad2;
  color:#fff;
  display:inline-block;
  line-height: 30px;
  margin:-10px 0px 10px 30px;
  padding: 7px 25px 5px 25px;
  border-radius: 7px 7px 0 0;
}
#tabheadingunder{ /* the line under tabheading: solid under the tab, then feathers out to nothing by 80% of the width */
  display:block;
  width:100%;
  height:3px;
  position:relative;
  top:-10px;
  content: " ";
  background: #04bad2; /* fallback */
  background: linear-gradient(to right, rgba(4,186,210,0) 0, #04bad2 30px, #04bad2 20%, rgba(4,186,210,0) 80%);
  margin-bottom: 15px;
}



/* ==========================================================================
   Table sorter
   ========================================================================== */

/* Zebra-striped version of your tablesorter CSS */
table.tablesorter {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

table.tablesorter thead th:first-child {
    border-top-left-radius: 8px;
}
        
table.tablesorter thead th:last-child {
    border-top-right-radius: 8px;
}

table.tablesorter thead tr th, 
table.tablesorter tfoot tr td {
    background-color: #4a89dc;
    color: white;
    border: none;
    font-size: 1.3em;
    padding: 12px 16px;
    font-weight: 500;
    text-align: left;
}

table.tablesorter thead tr .header {
    background-image: url('data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==');
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 6px 8px;
    background-color: #FFF;
    vertical-align: top;
    position: relative;
    font-size: 1.3em;
    border-bottom: 1px solid #e9ecef;
}

table.tablesorter tbody tr:last-child td {
    border-bottom: none;
}

table.tablesorter tbody td:focus-within {
    border-style: solid;
    border-color: green;
}

table.tablesorter tbody tr.odd td {
    background-color: #f8f9fa;
}

table.tablesorter tbody tr:hover td {
    background-color: #e6f0ff;
}

table.tablesorter thead tr .headerSortUp {
    background-image: url('data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7');
}

table.tablesorter thead tr .headerSortDown {
    background-image: url('data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7');
}

table.tablesorter thead tr .headerSortDown, 
table.tablesorter thead tr .headerSortUp {
    background-color: #3a79c4; /* Slightly darker blue for active sort */
}

/* Optional: Add rounded corners to bottom of table */
table.tablesorter tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

table.tablesorter tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

#device-table
{
	font-family:arial;

	margin:10px 0pt 15px;
	font-size: 9pt;
	text-align: left;
    table-layout: fixed;
	width: 100%;
    margin-right:auto;
    margin-left:auto;
   
	
        
}
.invisible{
	display: none;
	visibility: hidden;
}
#task-table 
{
	font-family:arial;

	margin:10px 0pt 15px;
	font-size: 9pt;
	text-align: left;
    /* table-layout: fixed; */
	width: 100%;
    margin-right:auto;
    margin-left:auto;
      
}
#av-table, #offline-table
{
	font-family:arial;
	
	margin:10px 0pt 15px;
	font-size: 9pt;
	text-align: left;
    /* table-layout: fixed; */
	width: 100%;
    margin-right:auto;
    margin-left:auto;
	
}
#tasktype{
	max-width:50px;
}
#taskdevicename{
	min-width:150px;
}	

#software-table 
{
	font-family:arial;
	
	margin:10px 0pt 15px;
	font-size: 9pt;
	text-align: left;
    table-layout: fixed;
	width: 100%;
    margin-right:auto;
    margin-left:auto;
   
	
        
}

@-webkit-keyframes fade-out {
from {transform: scale(1)} 
  to {transform: scale(0)}
}

@keyframes fade-out {
  from {transform: scale(1)} 
  to {transform: scale(0)}
}

.fade-out {
    -webkit-animation: fade-out 0.6s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation: fade-out 0.6s
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* hard drive reports */

.drive-info {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.drive-header      { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.drive-title       { font-size: 15px; font-weight: 500; }
.drive-meta        { font-size: 12px; color: var(--color-text-secondary); }
.drive-divider     { border: none; border-top: 0.5px solid var(--color-border-tertiary); margin: 10px 0; }
.drive-attribute   { margin-bottom: 12px; }
.attr-label        { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 5px; }
.attr-value        { font-size: 12px; color: var(--color-text-secondary); }
.progress-row      { display: flex; align-items: center; gap: 10px; }
.progress-track    { flex: 1; height: 6px; background: var(--color-background-secondary); border-radius: 3px; overflow: hidden; }
.progress-fill     { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.smart-row         { display: flex; align-items: center; gap: 8px; }
.smart-dot         { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.part-title        { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.last-updated      { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 1.25rem; }
.no-data           { font-size: 13px; color: var(--color-text-secondary); }

/* Internal Components of Systems on summary page */
.internals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.internal-card {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.internal-icon      { color: var(--color-text-secondary); opacity: 0.85; }
.internal-icon svg  { display: block; }
.internal-label     { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
.internal-value     { font-size: 13px; color: var(--color-text-primary); line-height: 1.5; }

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {

} 
@media only screen and (max-width: 769px) {
	/* ============
       MOBILE VIEW
       ============ 
   for mobile devices */

.select-css {
	width: 80%;
}	
/* .catalogue-table table thead tbody th td tr { 
		display: block; 
		margin: 0 auto;
	}  */
	
#side-menu-eco{
	top: 22%;
	background-color: #2295f0;	
}

#side-menu-eco:hover {
	right: 0px;
	transition-duration: 2s;
	top: 22%;
	background-color: #2295f0;	
}

#side-menu-phish{
	top: 39%;
	background-color: #48ae51;	
}

#side-menu-phish:hover {
	right: 0px;
	transition-duration: 2s;
	top: 39%;
	background-color: #48ae51;	
}

#side-menu-cost-analysis{
	top: 56%;
	background-color: #fcbf18;	
}

#side-menu-cost-analysis:hover {
	right: 0px;
	transition-duration: 2s;
	top: 56%;
	background-color: #fcbf18;	
}
#side-menu-contact {
	top: 73%;
	background-color: #9d29ae;	
}
#side-menu-contact:hover {
	right: 0px;
	transition-duration: 2s;
	top: 73%;
	background-color: #9d29ae;	
}
#side-menu-disaster {
	top: 90%;
	background-color: #e60000;	
}
#side-menu-disaster:hover {
	right: 0px;
	transition-duration: 2s;
	top: 90%;
	background-color: #e60000;	
}	
	
#display-table tbody tr td{
	display: block; 
	margin: 0 auto;
}
#catalogue-table tbody tr td{
	display: block; 
	margin: 0 auto;
}

#task-table	thead {
  display: none;
}	
#task-table	tbody tr td{
  display: block;
}
#tasktype{
	max-width: 100%;
}
#device-table tbody tr td{
	display: block; 
	margin: 0 auto;
}
#device-table tbody tr td img{
	 display: block; 
	  margin-left: auto;
      margin-right: 15px;
	  max-width: auto;
	  max-height: auto;
}
#software-table tbody tr td{
	display: block; 
	margin: 0 auto;
}
#software-table tbody tr td img{
	 display: block; 
	  margin-left: auto;
      margin-right: 15px;
	  max-width: auto;
	  max-height: auto;
}



.invisible{
	display: none !important;
	visibility: hidden !important;
}
.mobileview{
       display: none !important;
	   visibility: hidden !important;
}	

	

.modal-content {
	  background-color: #fefefe;
	  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
	  border: 1px solid #888;
	  width: 90%; /* Could be more or less, depending on screen size */
}
.button {
  padding: 5px 0px;
  margin: 2px 1px;
	}





ReportTable{
	
} 
ReportTableUpdates{
	
}



	/* gets rid of the lines in orgchart when viewing on small screen render */
.google-visualization-orgchart-connrow-small{
	display: none;
}
.google-visualization-orgchart-linenode{
	display: none;
} 
.google-visualization-orgchart-linebottom{
	display: none;
}
.google-visualization-orgchart-space-small{
	display: none;
}
.google-visualization-orgchart-table{

	
}
.google-visualization-orgchart-node{
	

} 
.google-visualization-orgchart-node-small{
	min-height: 100px;
	
	
}
/* ------------------------------------- */

   	
}


	
	

@media only screen and (min-width: 769px) {
/* generally full desktop screen */

	
/* Network map accross full screen */
#network_map{
  /* width: 80vw;
  position: relative;
  left: calc(10vw + -30%);
  overflow: auto; */
}
#org_network_map{
  position: relative;
  resize: both;
  width: 100%;
margin-left: 10px;
margin-right: 10px;
}
/* (the old #floor_plan iframe box was removed: floor plan styles are in the floor plan block below) */
	
.google-visualization-orgchart-table{
	overflow: auto;
	max-width: 400px;
}	
	
/* ====================
    WIDE: CSS3 Effects
   ==================== */

    .header-container{

	}
   

	
	
	
	

/* ============
    WIDE: Menu
   ============ 
   this allows the nav buttons on top to slide to the right when on PC and centre on mobile
   */

     .title {
        float: left;
    }

    nav {
        float: right;
        width: 38%;
    }
	
	#navadalogo{
      max-width: 62%;
	}	
	 

/* ============
    WIDE: Main
   ============ 

 article {       
       width: 57%;
 }


    .main aside {
        float: right;
        width: 33%;
		margin-top: 100px;
		
    } */
	
	
	


 	ul {
	padding: 0;
	margin: 0;
	}
	  #device-table{
	  width: 100%;
	  margin: 0;
      padding: 0;
      }
	  #software-table{
	  width: 100%;
	  margin: 0;
      padding: 0;
	  }
	
	
}

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

    .wrapper {
        width: 1200px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }
		
	.modal-content {
	  background-color: #fefefe;
	  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
	  border: 1px solid #888;
	  width: 40%; /* Could be more or less, depending on screen size */
}


}

/* ==========================================================================
   Asset map + replacement schedule (d3-org-chart)
   ========================================================================== */

/* assetmap.css - styles for assetmap.js.
   Every class starts with am- so nothing here can clash with the site's own CSS. */

/* ---------- toolbar and canvas (report page) ---------- */
.am-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0;
              font-family: Arial, Helvetica, sans-serif; }
/* !important: the site's own button / input styles can make these full width, one per line */
.am-toolbar input[type=search] { width: 240px !important; flex: 0 0 auto !important; margin: 0 !important;
              padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; background: #fff; }
.am-btn, .am-toolbar .am-btn { display: inline-block !important; width: auto !important; min-width: 0 !important;
          flex: 0 0 auto !important; float: none !important; margin: 0 !important;
          padding: 6px 12px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff;
          color: #1f2937; font-size: 13px; line-height: 1.3; cursor: pointer; }
.am-btn:hover { background: #f3f4f6; }
.am-legend { margin-left: auto; display: flex; gap: 14px; font-size: 12px; color: #6b7280; }
.am-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
               margin-right: 5px; vertical-align: -1px; }
.am-canvas { width: 100%; height: 72vh; min-height: 520px; background: #fff;
             border: 1px solid #e5e7eb; border-radius: 10px; }
.am-empty { padding: 40px; text-align: center; color: #6b7280; font: 14px Arial, Helvetica, sans-serif; }

/* ---------- device card ---------- */
.am-card, .am-card * { box-sizing: border-box; }
.am-card { width: 100%; height: 100%; background: #fff; border: 1px solid #d9dee5; border-radius: 10px;
           overflow: hidden; box-shadow: 0 1px 3px rgba(16, 24, 40, .10);
           display: flex; flex-direction: column; font-family: Arial, Helvetica, sans-serif;
           text-align: left; line-height: normal; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.am-card.am-hl    { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .35); }
.am-card.am-focus { background: #fffbe0; }
.am-bar  { height: 6px; flex: none; }
.am-body { display: flex; gap: 10px; padding: 10px 12px 4px; flex: 1; min-height: 0; }
.am-avatar { flex: none; width: 44px; height: 44px; border-radius: 10px; display: flex;
             align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
             color: #fff; overflow: hidden; }
.am-avatar img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.am-meta { min-width: 0; flex: 1; }
.am-name  { font-size: 14px; font-weight: 700; text-transform: uppercase; color: #2267d6;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-model { font-size: 11px; color: #1f2937; min-height: 14px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-small { font-size: 10px; color: #6b7280; line-height: 1.5; min-height: 15px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-life  { padding: 0 12px 10px; }
.am-life-row { display: flex; justify-content: space-between; font-size: 9.5px; color: #6b7280; margin-bottom: 3px; }
.am-track { height: 5px; border-radius: 3px; background: #e5e7eb; overflow: hidden; }
.am-fill  { height: 100%; border-radius: 3px; }
.am-exp   { margin: 10px auto 0; width: fit-content; color: #4b5563; border-radius: 12px; padding: 2px 9px;
            font: 11px Arial, sans-serif; background: #fff; border: 1px solid #c9d1da; }

.am-exp-open { width: 20px; height: 20px; padding: 0; line-height: 18px; text-align: center; border-radius: 50%; }

/* the top box that groups devices with no parent: just the client name */
.am-card.am-virtual { background: #f8fafc; }
.am-vbody { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 14px; }
.am-vname { font-size: 15px; font-weight: 700; text-transform: uppercase; color: #2267d6;
            text-align: center; line-height: 1.25; overflow: hidden; word-break: break-word; }

/* ---- replacement schedule ---- */
.rs-wrap { margin: 24px auto; text-align: left; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1e293b; }
.rs-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 12px; }
.rs-title { font-size: 20px; font-weight: 700; margin: 0; }
.rs-sub { font-size: 13px; color: #64748b; }
.rs-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.rs-tile { background: #fff; border: 1px solid #e2e8f0; border-top: 4px solid var(--c); border-radius: 8px; padding: 10px 14px; }
.rs-num { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--c); }
.rs-lbl { font-size: 12px; color: #64748b; margin-top: 2px; }
.rs-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; max-height: 440px; overflow: auto; }
.rs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rs-table th, table.rs-table thead tr th { position: sticky; top: 0; z-index: 3; background: #4a89dc; text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #fff; padding: 10px 12px; border-bottom: 0; }
.rs-table td { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.rs-table tr:last-child td { border-bottom: 0; }
.rs-table tr:hover td { background: #f8fafc; }
.rs-dev { font-weight: 600; }
.rs-type { color: #64748b; }
.rs-track { width: 90px; height: 6px; border-radius: 3px; background: #e2e8f0; overflow: hidden; display: inline-block; vertical-align: middle; }
.rs-fill { display: block; height: 100%; border-radius: 3px; }
.rs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 9px; min-width: 128px; border-radius: 16px; font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; color: var(--c); background: var(--bg); border: 1px solid var(--c); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.rs-chip::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.rs-chip.rs-over { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z' clip-rule='evenodd'/%3E%3C/svg%3E"); }
.rs-chip.rs-soon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 6a.75.75 0 00-1.5 0v6c0 .414.336.75.75.75h4.5a.75.75 0 000-1.5h-3.75V6z' clip-rule='evenodd'/%3E%3C/svg%3E"); }
.rs-chip.rs-later { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z' clip-rule='evenodd'/%3E%3C/svg%3E"); }
.rs-chip.rs-ok { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z' clip-rule='evenodd'/%3E%3C/svg%3E"); }
.rs-chip.rs-none { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z' clip-rule='evenodd'/%3E%3C/svg%3E"); }
.rs-chip.rs-year { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z' clip-rule='evenodd'/%3E%3C/svg%3E"); }
.rs-empty { padding: 24px; text-align: center; color: #64748b; }
@media (max-width: 700px) { .rs-tiles { grid-template-columns: repeat(2, 1fr); } }

/* beat the site's #org_network_map rule (resize/margins) so the new chart fills its box */
#orgchart-wrap #org_network_map { resize: none; margin: 0; width: 100%; box-sizing: border-box; }

/* ---- dashboard (index.php) tables share the schedule look ---- */
.rs-box { margin-bottom: 8px; }
.rs-box + .rs-box { margin-top: 12px; }
.rs-icon { max-height: 28px; max-width: 40px; vertical-align: middle; }
.rs-table { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1e293b; background: #fff; }
.rs-table td { text-align: left; }
#task-table.rs-table, #av-table.rs-table, #offline-table.rs-table { font-size: 13px; margin: 0; width: 100%; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.rs-table th.header, .rs-table th.tablesorter-header { cursor: pointer; }
.rs-table th.header::after, .rs-table th.tablesorter-header::after { content: "\2195"; color: #cfe0f7; margin-left: 6px; font-size: 11px; }
.rs-table th.headerSortUp::after { content: "\25B2"; color: #fff; }
.rs-table th.headerSortDown::after { content: "\25BC"; color: #fff; }
button.rs-btn { width: auto !important; display: inline-block !important; padding: 5px 12px !important; margin: 0 !important; font-size: 12px; white-space: nowrap; }
/* backup table: date and time stay on one line, long notes wrap */
#task-table.rs-table th:first-child, #task-table.rs-table td#taskdate { white-space: nowrap; width: 1%; }
#task-table.rs-table td#taskdate { font-size: 14px; }
#task-table.rs-table td#notes { white-space: normal; word-break: break-word; min-width: 220px; }
@media (max-width: 769px) {
  .rs-table thead { display: table-header-group !important; }
  .rs-table td, .rs-table th { white-space: nowrap; }
  #task-table.rs-table tbody tr td { display: table-cell; }
  #task-table.rs-table thead { display: table-header-group; }
}

/* ===== Floor plan and switch ports (floorplan.js) ================================================= */
.fp-root { margin: 18px 0; }
.fp-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
.fp-bar input[type=search] { width:220px !important; margin:0 !important; padding:6px 10px; border:1px solid rgba(128,128,128,.5); border-radius:6px; font-size:13px; }
.fp-bar select, .rk-move select { width:auto !important; max-width:260px; margin:0 !important; padding:6px 10px; border:1px solid rgba(128,128,128,.5); border-radius:6px; font-size:13px; }
/* !important: the site's own button style makes every button full width */
.fp-btn, .fp-card button, .rk-move button { display:inline-block !important; width:auto !important; min-width:0 !important; margin:0 !important; padding:6px 14px !important; border:1px solid rgba(128,128,128,.5); border-radius:6px; background:transparent; font-size:13px; line-height:1.3; cursor:pointer; color:inherit; }
.fp-card button { padding:4px 10px !important; font-size:12px; margin-top:6px !important; }
.fp-btn:hover { border-color:#4a89dc; color:#4a89dc; }
.fp-hide { display:none !important; }
.fp-btn[disabled] { opacity:.5; cursor:default; }
.fp-editlbl { display:inline-flex; align-items:center; gap:6px; margin:0; } .fp-editlbl input { margin:0; }
/* Move devices / Save positions sit on the right, next to the key */
.fp-bar .fp-editlbl { position:static !important; float:none !important; margin-left:auto !important; }
.fp-editlbl ~ .fp-grow { margin-left:0; }
.fp-msg { font-size:12px; color:#27ae60; } .fp-msg.bad { color:#e74c3c; }
.fp-grow { margin-left:auto; display:flex; gap:12px; align-items:center; font-size:12px; opacity:.75; }
.fp-key i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:-1px; }
.fp-wrap { display:flex; gap:12px; align-items:stretch; }
.fp-map { flex:1; height:70vh; min-height:420px; border:1px solid rgba(128,128,128,.5); border-radius:10px; background:rgba(128,128,128,.15); }
.fp-side { width:230px; border:1px solid rgba(128,128,128,.5); border-radius:10px; padding:10px; max-height:70vh; overflow:auto; text-align:left; }
.fp-side h3 { margin:0 0 6px; font-size:13px; } .fp-side .hint { font-size:12px; opacity:.75; margin-bottom:8px; }
.fp-unfilter { width:100% !important; box-sizing:border-box; margin:0 0 8px !important; padding:5px 8px; border:1px solid rgba(128,128,128,.5); border-radius:6px; font-size:12px; }
.fp-card button + button { margin-left:6px !important; }
.fp-un { padding:6px 8px; border:1px dashed rgba(128,128,128,.7); border-radius:6px; margin-bottom:6px; cursor:grab; font-size:12px; background:rgba(128,128,128,.12); } .fp-un span { opacity:.75; }
.fp-fail { padding:30px; text-align:center; opacity:.75; }
.fp-pin { width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; background:var(--c); color:#fff; font:700 10px/26px Arial,sans-serif; text-align:center; border:3px solid var(--ring); box-shadow:0 1px 4px rgba(0,0,0,.35); }
.fp-pin.st-ok { --ring:#22a06b; } .fp-pin.st-overdue { --ring:#f0a30a; } .fp-pin.st-unknown { --ring:#94a3b8; }
.fp-lbl { position:absolute; left:18px; top:-10px; white-space:nowrap; background:rgba(255,255,255,.95); border:1px solid #cbd5e1; border-radius:4px; padding:1px 6px; font:600 11px/16px Arial,sans-serif; color:#2267d6; text-transform:uppercase; pointer-events:none; }
.fp-map:not(.fp-zoomed) .fp-lbl { display:none; }
.fp-hl .fp-pin { outline:4px solid rgba(245,158,11,.6); }
.fp-map.leaflet-container { font-family:inherit; }
.fp-card { text-align:left; } .fp-card b { text-transform:uppercase; color:#2267d6; } .fp-card small { opacity:.75; display:block; }
.fp-card .trk { height:5px; background:#e5e7eb; border-radius:3px; margin:6px 0 2px; overflow:hidden; } .fp-card .trk i { display:block; height:100%; }
.rk-title { font-size:14px; }
.rk-wrap { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; text-align:left; }
.rk-rack { position:relative; flex:1 1 640px; border:1px solid rgba(128,128,128,.5); border-radius:10px; padding:14px; }
.rk-unit { background:#1f2937; border-radius:6px; padding:8px 10px 10px; margin-bottom:12px; color:#e5e7eb; } .rk-unit.patch { background:#374151; }
.rk-name { font:600 12px Arial,sans-serif; margin-bottom:6px; display:flex; justify-content:space-between; gap:10px; } .rk-name span { color:#9ca3af; font-weight:400; }
.rk-ports { display:grid; grid-template-columns:repeat(12,1fr); gap:6px; }
.rk-port { height:34px; border-radius:4px; border:2px solid #4b5563; background:#111827; font:10px/1.1 Arial,sans-serif; color:#9ca3af; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; position:relative; }
.rk-port.used { border-color:#22a06b; color:#d1fae5; } .rk-port.fault { border-color:#dc3545; color:#fecaca; }
.rk-port.sel { background:#1d4ed8; border-color:#93c5fd; color:#fff; } .rk-port.peer { background:#7c3aed; border-color:#ddd6fe; color:#fff; }
.rk-port em { font-style:normal; font-size:8px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 2px; }
.rk-lines { position:absolute; inset:0; pointer-events:none; width:100%; height:100%; }
.rk-info { flex:0 0 300px; border:1px solid rgba(128,128,128,.5); border-radius:10px; padding:12px; font-size:13px; min-height:120px; }
.rk-info ol { padding-left:18px; margin:6px 0; } .rk-info li { margin-bottom:4px; } .rk-info a { color:#4a89dc; cursor:pointer; text-decoration:underline; }
.rk-info small { display:block; opacity:.75; }
.rk-move { margin-top:12px; padding-top:10px; border-top:1px solid rgba(128,128,128,.5); } .rk-move select { margin:6px 6px 6px 0 !important; max-width:100%; }
.rk-mmsg { font-size:12px; color:#27ae60; margin-top:4px; } .rk-mmsg.bad { color:#e74c3c; }
@media (max-width: 760px) { .fp-wrap { flex-direction:column; } .fp-side { width:auto; } .rk-ports { grid-template-columns:repeat(8,1fr); } .rk-info { flex-basis:100%; } .fp-grow { margin-left:0; } }
/* ===== end floor plan ============================================================================= */

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden !important;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
.ui-datepicker-calendar {
    display: none;
    }

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ==========================================================================
   Documents and articles (documentlist.php, article.php, document.php)
   New rules only: every class starts with doc- so nothing above is affected.
   ========================================================================== */

/* document list: sits inside an rs-box / rs-table */
.doc-list a { color: #2267d6; text-decoration: none; font-weight: 600; }
.doc-list a:hover { text-decoration: underline; }
.doc-list i { color: #4a89dc; margin-right: 8px; }

/* article steps: a button that opens a panel */
.doc-steps { list-style: none; display: block; width: 100%; max-width: 900px; margin: 0 0 20px; padding: 0; text-align: left; }
.doc-steps br { display: none; }
button.doc-step { display: block; width: 100%; margin: 10px 0 0 !important; padding: 14px 18px !important; background: #fff; color: #1e293b; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); font: 600 16px/1.3 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; text-align: left; cursor: pointer; outline: none; }
button.doc-step i { display: inline-block; margin-right: 10px; color: #4a89dc; width: 16px; text-align: center; }
button.doc-step:hover { background: #f1f6fe; border-color: #4a89dc; opacity: 1; }
button.doc-step.active { background: #4a89dc; color: #fff; border-color: #4a89dc; border-radius: 8px 8px 0 0; }
button.doc-step.active i { color: #fff; }
section.doc-panel { display: none; width: 100%; box-sizing: border-box; background: #fff; border: 1px solid #e2e8f0; border-top: 0; border-radius: 0 0 8px 8px; padding: 6px 20px 18px; font: 14px/1.6 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #334155; overflow: hidden; }
section.doc-panel img { max-width: 100%; height: auto; border-radius: 6px; }

/* review box on the document page */
section.doc-review { max-width: 900px; box-sizing: border-box; margin-top: 12px; padding: 16px 18px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
section.doc-review form { margin: 0; }
section.doc-review br { display: none; }
section.doc-review p { background: transparent; padding: 0; }
section.doc-review input[type=range] { width: 240px; max-width: 70%; vertical-align: middle; accent-color: #4a89dc; }
section.doc-review textarea { display: block; width: 100%; box-sizing: border-box; margin: 12px 0; padding: 10px 12px; border: 1px solid #ccc; border-radius: 5px; font: 14px/1.5 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
section.doc-review textarea:focus { border-color: #4a89dc; outline: none; box-shadow: 0 0 0 3px rgba(74, 137, 220, .2); }
.doc-msg { margin-left: 10px; font-size: 13px; color: #27ae60; }

/* ==========================================================================
   Cost analysis page (cost_analysis.php)
   New rules only: every class starts with ca- so nothing above is affected.
   ========================================================================== */
.ca-card { max-width: 1000px; box-sizing: border-box; margin-bottom: 18px; padding: 16px 20px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); font: 14px/1.6 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #334155; }
.ca-card p { margin: 0 0 10px; }
.ca-h { margin: 0 0 8px; font-size: 16px; color: #1e293b; }
.ca-img { max-width: 100%; height: auto; margin: 6px 0 14px; border-radius: 6px; }
/* three boxes side by side with plain widths (no flex) */
.ca-form { max-width: 1000px; margin: 6px 0 12px; }

.ca-form label { display: inline-block; vertical-align: top; width: 31%; margin: 0 2% 12px 0; box-sizing: border-box; font: 600 13px 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #334155; }
#cost-analysis .ca-form input { display: block; width: 100%; min-width: 0; max-width: none; margin: 4px 0 0; }
.ca-msg { min-height: 18px; margin-bottom: 8px; font-size: 13px; color: #b91c1c; }
.ca-chart { width: 100%; max-width: 1000px; height: 480px; margin: 10px 0; }
/* tables: undo the old #ca_sample_data borders and tighten the number boxes */
table#ca_sample_data.ca-table th, table#ca_sample_data.ca-table td { width: auto; border: 0; }
table#ca_sample_data.ca-table td { border-bottom: 1px solid #f1f5f9; }
.ca-table th.ca-num, .ca-table td.ca-num { text-align: right; }
.ca-table th { white-space: nowrap; }
#ca-table-wrap { max-width: 1000px; }
.ca-table td.ca-total { font-weight: 700; }
#cost-analysis .ca-table input[type=number] { width: 100%; min-width: 70px; max-width: 110px; height: 2em; margin: 0; padding: 4px 6px; line-height: normal; text-align: right; }
/* the site's rule for number-box spinner arrows draws them as extra bordered boxes: hide the arrows on this page */
#cost-analysis input[type=number]::-webkit-inner-spin-button, #cost-analysis input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; display: none; margin: 0; padding: 0; border: 0; height: 0; }
#cost-analysis input[type=number] { -moz-appearance: textfield; appearance: textfield; }
#ca-summary { max-width: 1000px; margin-top: 14px; }
#ca-summary .rs-tiles { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { #ca-summary .rs-tiles { grid-template-columns: 1fr; } .ca-form label { width: 100%; margin-right: 0; } }

/* cost analysis form v2: plain divs and spans (no label element), floated three across, !important so other site rules cannot stack them */
.ca-form .ca-field { float: left !important; position: static !important; display: block !important; width: 31% !important; margin: 0 2% 12px 0 !important; padding: 0 !important; box-sizing: border-box; }
.ca-form .ca-lbl { display: block !important; position: static !important; margin: 0 0 4px !important; font: 600 13px 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #334155; line-height: 1.3; }
#cost-analysis .ca-form .ca-field input { display: block !important; position: static !important; float: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 2.5em; margin: 0 !important; box-sizing: border-box; }
.ca-form .ca-clear { clear: both; height: 0; overflow: hidden; }
@media (max-width: 700px) { .ca-form .ca-field { float: none !important; width: 100% !important; margin-right: 0 !important; } }

/* cost analysis: device type select and lifespan display */
.ca-form .ca-field select { display: block !important; width: 100% !important; box-sizing: border-box; margin: 0 !important; }
.ca-form .ca-life { display: block; padding: 8px 0; font: 700 16px 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #1e293b; }
#ca-summary .rs-tiles { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) { #ca-summary .rs-tiles { grid-template-columns: 1fr; } }