/****** Reset ******/
*, ::after, ::before {
    box-sizing: border-box;}
body,p,a,ul,li { margin: 0; padding: 0; text-decoration: none;}
html{ font-size:100%; }
body{ text-align: left; font-weight: 400;line-height: 1.5; height: 100%; margin: 0; font-size: 1rem; font-family: 'Myriad Pro', Helvetica, Arial, sans-serif; color: #212529; }
ul{ margin: 0; padding: 0; }
li{ list-style-type: none; }
img {
    vertical-align: middle;
    border-style: none;}
fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}    
::-webkit-input-placeholder { /* Edge */ color: #e4e1e1;}
:-ms-input-placeholder { /* Internet Explorer 10-11 */color: #e4e1e1;}
::placeholder {color: #e4e1e1;}
h3{margin: 0;}

a{
    color: #212529;
}
a:hover{
    color: #000;
    text-decoration: underline;
}
h2 {font-size: 20px;}
h2 a{
    color: #212529;
}
h2 a:hover{
    color: #212529;
}
h3 {font-size: 18px; line-height: 1.5;}
/****** End Reset ******/

div[disabled]
{
  pointer-events: none;
  opacity: 0.4;
}

ul li a {
    color: #aaa;
}

ul li a:hover {
    text-decoration: underline;
}

ul.normal li{
    padding-bottom: 10px;
    list-style: inside;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 70px auto auto;
}
.grid-item {
    background-color: #fff;
    position: relative;
    font-size: 25px;
    padding: 20px;
}
.grid-span4 {
    grid-row: span 4;
}
.grid-contact-info {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
}
.grid-payment-info {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
}
.grid-payment-method {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
}
.grid-alarm-info {
    display: grid;
    grid-gap: 5px;
}
.grid-alarm-info span:first-child{
    grid-column: 1 / 4;
}
.keyline {
    width: 100%;
    border-bottom: 1px solid #ccc;
    margin: 10px 0;
}

/****** Header ******/
.header{
    display: grid;
    grid-template-columns: 50px 50px 1fr 0.5fr;
    background-color: #f58025;
    color: #fff;
  }
.logo{
    padding: 10px 20px;
    background: #000;
}
.page-info{
    margin-top: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-desktop {
    display: none;
}
.user-icon{
    padding-top: 0px;
    text-align: end;
}

.user-info{
    font-size: 70%;
    text-align: right;
    margin-right: 20px;
    display: none;
}

.account-info{
    font-size: 70%;
    text-align: right;
    display: none;
}  
/****** End Header ******/

/****** Footer ******/
.footer{
    color: #333;
    background-color: #f9f9f9;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    font-size:12px;
    border-top: 1px solid #efefef;
    height: auto;
}
.footer .footer-item p {
    margin-bottom: 0;
}

.footer .footer-item h3{
    font-size: 18px;
    line-height: 1.5;
    padding-top: 0;
}
/****** End Footer ******/

/****** Signout Button ******/
#signout{
    font-size: 1rem;
    float: right;
    margin-top: 10px;
    width: 150px;
    height: 40px;
}

a button,button,input[type=button],input[type=reset],input[type=submit]{
    height: 30px;
    display:inline-block;
    padding:6px 12px;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    background: #f58025;
    border:0;
    border-radius:5px;
    box-sizing:border-box;
    cursor:pointer;
    color: #fff;
}

.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{
    background:#666;
}
/****** End Signout Button ******/


/****** Main Buttons ******/
.main-button{
    height: 40px;
    width: 100%;
    font-size: 100%;
    padding: 6px 25px;
    margin-bottom: 10px;
}
.main-button:first-of-type{
    margin-right: 10px;
}
.main-button.right{
    float: right;
}
/****** End Main Buttons ******/


/****** Side Navigation ******/
.side-nav {
    display: none;
}
/****** End Side Navigation ******/


/****** Homepage ******/
.hp-grid-container {
    display: grid;
    grid-template-areas:
    "hp-header"
    "hp-welcome"
    "hp-login"
    "hp-content-full"
    "hp-content-left"
    "hp-content-right"
    "hp-footer"       
}

.hp-header{
    grid-area: hp-header;
    background-color: #000;
    padding: 10px 20px;
}

.hp-welcome{
    grid-area: hp-welcome;
    margin: 20px;
}

.hp-content-full{
    grid-area: hp-content-full;
    margin: 20px;
}

.hp-content-left{
    grid-area: hp-content-left;
    margin: 20px;
}

.hp-content-left li{
    list-style-type: disc;
}

.hp-content-right{
    grid-area: hp-content-right;
    margin: 20px;
}

.hp-login{
    grid-area: hp-login;
    margin: 20px;
}

.hp-footer{
    grid-area: hp-footer;
    position: relative;
    padding-top: 30px;
}

.hp-plans-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.hp-plans {
    max-width: 200px;
    min-width: 155px;
    height: 255px;
    background: rgb(249, 249, 249);
    border: 1px solid #ccc;
    color: #333;
    font-size: 120%;
    text-align: center;
}

.hp-plans ul {
    padding-left: 0;
    font-size: 90%;
}

.plan-num{
    color: #fff;
    background: rgb(136, 130, 130);
    padding: 6px 0 9px 0;
}

.storage{
    padding-top: 10px;
}

.price {
    padding: 15px 0 30px 0;
    font-size: 180%;
    color: #f58025;
}
.details{
    color: #333;
    padding-left: 5px;
    font-size: 60%;
}

.device {
    padding-top: 10px;
    border-top: 1px solid #ccc;
    font-size: 90%;
}
/****** End Homepage ******/


/****** Dashboard ******/
.dashboard {
  display: grid;
  grid-template-columns: 50px 1fr;
  /*grid-auto-rows: minmax(50px, auto);*/
  grid-gap: 20px;
  font-size: 100%;
  font-weight: bold;
}

.circle-img {
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #f58025 ;
}

.circle-img img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}
/****** End Dashboard ******/


/****** Spotlight ******/
.spotlight{
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(150px, auto);
    grid-gap: 20px;
}

.box-btn {
    display: grid;
    grid-template-columns: 45px 15px 1fr;
    grid-gap: 5px;
    align-items: center;
    border: 2px solid #f58025 ;
    border-radius: 25px;
    padding: 5px 20px;
}

.box-sml {
    grid-column: span 3;
    border: 2px solid #f58025 ;
    border-radius: 25px;
    padding: 20px;
    font-size: 1rem;
}

.box-sml-grey {
    border: 1px solid #ccc ;
    border-radius: 20px;
    padding: 5px 15px;
    margin-top: 20px;
}

.box-sml h2{
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    display: inline;
}

.box-sml h3, .box-sml-grey h3{
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    margin-top: 15px;
}
/****** End Spotlight ******/


/******  Main Content Area ******/
.main-content{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}

.box-big {
    grid-column: span 3;
    border: 2px solid #f58025 ;
    border-radius: 25px;
    padding: 20px;
    font-size: 1rem;
}

.box-big h2{
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    display: inline;
    height: 20px;
}

.box-med {
    grid-column: span 3;
    border: 2px solid #f58025 ;
    border-radius: 25px;
    padding: 20px;
    font-size: 1rem;
}

.box-med h2{
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    display: inline;
    height: 20px;
}
/******  End Main Content Area ******/


/******  Logger Setup Content Tabs ******/
.content-tab-1, .content-tab-2, .content-tab-3, .content-tab-4, .content-tab-5, .content-tab-6 {
    width: 100%;
}
.table__col.logger-sample{
    overflow: inherit;
    text-overflow:inherit;
}
.logger-sample select{
    width: 60%;
}
.logger-sample input[type=text]{
    width: 60px;
}
/******  End Logger Setup Content Tabs ******/


/******  Main Loader ******/
.loader {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(65, 58, 58, 0.7);
    z-index:9999;
    display:none;
}
.number{
    position: absolute;
    top:37%;
    left:25%;
    right:25%;
    /*margin: -30px 0 0 -30px;*/
    font-size:40px;
    font-weight:800;
    color:#fff;
    text-align: center;
}
@-webkit-keyframes spin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

.loader::after {
    content:'';
    display:block;
    position:absolute;
    left:50%;
    top:40%;
    width:200px;height:200px;
    margin: -100px 0 0 -100px;
    border-style:solid;
    border-color:#f58025;
    border-top-color:transparent;
    border-width: 10px;
    border-radius:50%;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
.loader .msg{
    font-size: 20px;
    color: #fff;
    text-align: center;
    left: 30%;
    right: 30%;
    bottom: 10%;
    position: fixed;
}

.loader .msg::after{
    content: 'This might take several minutes.';
}
/******  End Main Loader ******/


/******  Small Loader ******/
.sml-loader::after {
    content:'';
    display:block;
    left:48%;top:40%;
    width:19px;height:19px;
    border-style:solid;
    border-color:#f58025;
    border-top-color:transparent;
    border-width: 5px;
    border-radius:50%;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
/******  End Small Loader ******/


.ind{
    padding-left: 20px;
}
.nav-links{
    display: none; padding: .25rem;
}
.nav-links a{
    text-decoration: none; color: #fff; padding:.25rem;
}
.hamburger{
    color: #fff;
    float: left;
    font-size: 30px;
    margin-right: 10px;
}
#menu-toggle{
    display: none;
}
#menu-toggle:checked ~ .nav-links{
    display: flex;
    flex-direction: column;
}    


/******  Tabbed Menu - expendable on mobile ******/ 
.menu {
	display:none;
	width:100%;
}
.menu a {
    text-decoration:none;
	color: #333;
}
.menu-down {
    padding: 5px 15px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;    
    /*cursor: pointer;*/
    width: 100%;    
}
.menu-arrow {
    float: right;
}
.menu-down a {
	text-decoration:none;
    color: #000;
    display: block;
}
li.tabs{
    background-color: #e4e4e4; 
    float: left;
    padding: 5px 15px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    cursor: pointer;
    width: 100%;
}
li.tabs:first-child{
    border-left: 1px solid #ccc;
}
li.tabs:hover{
	color: #fff;
    background-color: #333;
}
li.tabs a{
    display: block;
}   
li.tabs.active{
    display: none;  /*hides the active tab for mobile display to avoid having it show up twice*/
    background-color: #fff;
    pointer-events: none;
}
li.tabs.setup{
    cursor: default;
}
li.tabs.setup:hover{
    color: #333;
    background-color: #e4e4e4;  
}
li.hidden{
    display: none;
}
/****** End Tabbed Menu  ******/
    
/******  Main Flex Container  ******/   
.container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1230px;
    background-color: #f5e9da;
    border-bottom: 1px solid #ccc;
    margin: 0 auto 10px auto;
    padding: 0;
}
.container img{
    max-width:100%; /*height: auto;*/
}
/******  End Main Flex Container  ******/  

/******  Flex Container Items - Mobile  ******/
.bc{ /* Breadcrumb */
    color: #979595;
    margin-left:10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item{
    padding: 10px 0 0 10px;
    width: 100%;
}   
.item h3 {
    font-weight: normal;
} 
.item:nth-child(1){
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    padding-right: 10px;
}
.item:nth-child(2){
    border-bottom: 1px solid #ccc;
}
.item:nth-child(n+3):nth-child(-n+8){
    border-left: 1px solid #ccc;
    padding-bottom: 20px;
} 
/******  End Flex Container Items  ******/
    
/******  Tabbed Box  ******/
ul.tab-box a{
    text-decoration: none;
    color: #000;
}
li.tab-box{
    background-color: #e4e4e4; 
    float: left;
    padding: 5px 20px;
    border-left: 1px solid #ccc;
    /*border-right: 1px solid #ccc;*/
    border-top: 1px solid #ccc;
    cursor: pointer;
}
ul a:nth-child(1) > li{
    /*border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;*/
}
ul a:nth-child(2) > li{
    border-left: 1px solid #ccc; 
    border-right: 1px solid #ccc;
}
ul a:nth-child(3) > li{
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
ul a:nth-child(4) > li{
    border-left: 1px solid #ccc; 
    border-right: 1px solid #ccc;
}
li.tab-box:hover{
	color: #fff;
    background-color: #333;
} 
li.tab-box:last-child{
    border-right: 1px solid #ccc;
 }
li.tab-box.active{
    background-color: #fff;
    border-left: 1px solid #ccc;
    pointer-events: none;
}
.box{ /*sampling mode box*/
    width: 95%;
    height: auto;
    border: 1px solid #CACBCA;
    padding: 5px;
}    
/****** End Tabbed Box  ******/

/****** Main and Sub Controls Row  ******/
.icons{ /*main icons*/
    text-align: center;
    display: flex;
    justify-content: space-around;
    float: left;
    margin-bottom: 10px;
}
.icons li{
    display: inline;
    margin-right: 40px;
    cursor: pointer;
}
.headline{ /*main headline*/
    width: 100%;
    text-align: left;
    float: left;
    margin-bottom: 10px;
}
.com-port{ /*com port dropdown*/
    width: 100%;
    margin-bottom: 10px;
}        
.model-logo{ /*model logo*/
    width: 100%;
    margin-bottom: 10px;
    padding-right: 10px;
}
.plot{ /*plot dropdown*/
    width: 100%;
    margin-bottom: 10px;
}
.timer{ /*timer dropdown*/
    width: 100%;
    margin-bottom: 10px;
}
.column{
    float: left;
    padding-bottom: 5px;
}

.logger-row{ /*logger and battery*/
    width: 100%;
}
.logger-row::after{
    content: "";
    clear: both;
    display: table;
}
/****** End Main and Sub Controls Row  ******/

    
.button { /*all buttons*/
    font-size: 16px;
    color: #000;
    background-color: #C8C8C8;
    padding: 2px 10px;
    text-align: center;
    width: auto;
    border: 1px solid #6666; 
    border-radius: 5px;
    cursor: pointer;
}
.button:hover{
	color: #fff;
    background-color: #333;
}
.button:hover a{
    color: #fff;
    text-decoration: none;
}
.btn-big{
	width: 200px;
}
.btn-arrow{
    padding: 0;
}
.btn-nav{
    margin:0 10px 10px 0;
}
.btn-form-left{
    margin-bottom: 20px;
    float: left;
    min-width: 100px;
}
.btn-form-right{
    margin-left: 20px;
    float: right;
    min-width: 100px;
}
.btn-dis{
    background: #aaa;
    color: #333;
}
.file-box{
    width: 50%;
    padding: 5px 0;
    border: 1px solid #333;
    text-align: center;
}
.p-bar{ /*progress bar*/
    width: 80px;
    height: 20px;
    background: green;
}
.horizontal{ /*horizontal align*/
    text-align:center;
}
.vertical{ /*vertical align*/
    line-height: 40px;
}
.vertical img{ /*vertical align img*/
    vertical-align: middle;
    padding-bottom: 6px;
}
.floatLeft{
    float:left;
    margin:0 10px 0 0;
}  
.floatRight{
    float: none;
}    
.clearFloat{
    clear:both;
}
.hide{
    display: none;
}


/****** Form Elements ******/
label {
    font-size: 16px;
    margin-bottom: .1rem;
    display: inline-block;
}
label.error {
    font-size: 16px;
    color: red;
    margin-left: 5px;
}
input.error {
    border: 1px dashed #f58025;
    background-color: #fff5e6;
}
select.error{
    border: 1px dashed #f58025;
    background-color: #fff5e6;
}
div.error{
    font-size: 16px;
    color: red;
}
#uemailerror{
    margin-left: 5px;
}
.allrequired-errortxt{
    padding:10px;
    border: 1px solid #d3d3d3;
    background: #f9f9f9;
    display:none;
}
input:-webkit-autofill::first-line {
    font-size: 16px
}
input:focus-visible{
    outline-color: #f58025;
}
input[type=text], input[type=date], input[type=time], input[type=number], input[type=password], input[type=tel], input[type=email]{
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 5px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 4px 10px;
}
input[type=text].tbox-sml{
    width: 30px;
}
input[type=text].tbox-med{
    width: 100%;
}
input[type=text].tbox-big{
    width: 100%;
}
input[type=text].proj-name, input[type=text].ls-name{
    max-width: 85%;
    background-color: #FAF9F6;
    border: none;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0;
    text-overflow: ellipsis;
}
input[type=email].email-big{
    width: 100%;
}
input[type=text].stopped{
    background: red;
    color: #fff;
}
input[type=text].started{
    background: darkseagreen;
    color: #fff;
}
input[type=number] {
    width: 60px;
}
input[type=number].tbox-sml {
    width: 60px;
}
input[type=datetime-local]{
    line-height: 20px;
    margin-bottom: 2px;
    width: 250px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-left: 8px;
}
select {
    font-size: 16px;
    height: 30px;
    background: #fff;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 5px;
    padding-left: 8px;
}
select[multiple]{
    height: 92px;
    padding-top: 10px;
    cursor: pointer;
}
select:focus-visible{
    outline-color: #f58025;
}
select.sel-big{
    width: 100%;
}
select.sel-med{
    width: 100%;
    text-overflow: ellipsis;
}

#optAddress2 {
    margin-bottom: 20px;
}

#optAddress2 label {
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
}
/****** End Form Elements ******/   
    
.blank-container{
    background: #fff;
    padding: 10px;
    height: auto;
    min-height:  200px;
    overflow: auto;
    margin-right: 10px;
}
.graph-container{
    height:  auto;
    background: #e4e4e4;
    margin-right: 10px;
    padding: 10px;
}

/******  Tables ******/
.table-wrapper{width:97%;}
.table-wrapper thead th{background:#6D6F72;text-align:center;padding:4px;color:#fff;font-weight:bold;}
.table-wrapper thead th.white{background:#C8C8C8; color:#fff;text-align:left;}
.table-wrapper table{width:100%;border-collapse:collapse;border-spacing:0;}
.table-wrapper table.white{width:100%;border-collapse:collapse;border-spacing:0;border:1px solid #CACBCA;}
.table-wrapper th.drkgrey{background:#D7D8DD;}
.table-wrapper td{padding:4px;}
.table-wrapper td.silver{padding:4px;background:#C8C8C8;color:#7E8081;font-weight: bold;}
.table-wrapper td.white{border-top:1px solid #CACBCA;border-left:1px solid #CACBCA;padding:4px;background:#fff;color:#000;}
.table-wrapper td.grey{padding:4px;background:#eee;}
.table-wrapper td.drkgrey{background:#6D6F72;color:#fff;font-weight:bold;}
.table-wrapper td.hghlte{padding:4px;background:#FEF7F0;}
.table-wrapper td.black{padding:4px;background:#000;color:#fff;}
.table-wrapper td.center{text-align:center;}
.table-wrapper td.indent{padding-left:20px;}
.table-wrapper td.top{vertical-align: top;}
.table-wrapper td ul li{line-height:1;}
.table-wrapper th{padding:4px;text-align:left;background:#eee;}
/****** End Tables ******/

/******  Font Awesome ******/
@font-face {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("/css/fonts/fa-solid-900.eot");
    src: url("/css/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("/css/fonts/fa-solid-900.woff2") format("woff2"), url("/css/fonts/fa-solid-900.woff") format("woff"), url("/css/fonts/fa-solid-900.ttf") format("truetype"), url("/css/fonts/fa-solid-900.svg#fontawesome") format("svg");
}
@font-face {
    font-family: 'FontAwesome Normal';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/css/fonts/fa-regular-400.eot");
    src: url("/css/fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("/css/fonts/fa-regular-400.woff2") format("woff2"), url("/css/fonts/fa-regular-400.woff") format("woff"), url("/css/fonts/fa-regular-400.ttf") format("truetype"), url("/css/fonts/fa-regular-400.svg#fontawesome") format("svg");
}
.fa { 
    display:inline-block;
    font:normal normal normal 14px/1.2 FontAwesome, 'Myriad Pro', Helvetica, Arial, sans-serif;
    font-size:inherit;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.fa-regular {
    display:inline-block;
    font:normal normal normal 14px/1.2 FontAwesome Normal, 'Myriad Pro', Helvetica, Arial, sans-serif;
    font-size:inherit;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.fa-rotate-5 {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); 
}
.fa-rotate-10 {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg); 
}
.fa-rotate-350 {
    -webkit-transform: rotate(350deg);
    transform: rotate(350deg); 
}
.fa-rotate-355 {
    -webkit-transform: rotate(355deg);
    transform: rotate(355deg); 
}
.fa-1-5x {font-size: 1.2em;}
.fa-2x {font-size: 1.5em;}
.fa-sm {
    font-size: 0.875em;
    line-height: 0.07143em;
    vertical-align: 0.05357em; 
}
.fa-xs {
    font-size: 0.75em;
    line-height: 0.08333em;
    vertical-align: 0.125em; 
}
.fa-2xs {
    font-size: 0.625em;
    line-height: 0.1em;
    vertical-align: 0.225em;
}
.fa-stack {
    display: inline-block;
    height: 2em;
    line-height: 2em;
    position: relative;
    vertical-align: middle;
    width: 2.5em; 
}
.fa-stack-1x,
.fa-stack-2x {
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: var(--fa-stack-z-index, auto); 
}
.fa-stack-1x {
    line-height: inherit;
}
.fa-stack-2x {
    font-size: 2em;
}
.fa-inverse {
    color: var(--fa-inverse, #fff); 
}
.fa-search::before{content:"\f002";}
.fa-fa::before,
.fa-font-awesome::before{content:"\f2b4";}
.fa-angle-double-down::before{content:"\f103";}
.fa-angle-double-up::before{content:"\f102";}
.fa-long-arrow-left::before{content:"\f177";}
.fa-long-arrow-right::before{content:"\f178";}
.fa-check::before{content:"\f00c"; color: darkgreen;}
.fa-check-circle::before{content:"\f058"; color: darkgreen;}
.fa-times::before{content:"\f00d"; color: darkred;}
.fa-eye::before{content:"\f06e"; color: rgb(136, 136, 136);}
.fa-eye-slash::before{content:"\f070"; color: rgb(136, 136, 136);}
.fa-caret-right::before{content:"\f0da"; color: rgb(136, 136, 136); margin-right: 10px;}
.fa-caret-down::before{content:"\f0d7"; color: rgb(136, 136, 136); margin-right: 5px;}
.fa-user::before{content:"\f007"; color: rgb(136, 136, 136); margin-right: 5px;}
.white.fa-user::before {color: #fff;}
.fa-user-times::before{content:"\f235"; color: rgb(170, 6, 6); margin-right: 5px;}
/*.fa-project-diagram::before {content: "\f542"; margin-right: 5px; }*/
.fa-bell::before {content: "\f0f3"; color: rgb(136, 136, 136); margin-right: 5px;}

.fa-bell-on::before {content: "\f0f3"; color: red; margin-left:-3px; margin-right:-3px;}
.fa-bracket-round::before{content: "\28"; color: red; margin-left:-3px;}
.fa-bracket-round-right::before{content: "\29"; color: red; margin-right:-3px;}

td .fa-bell-on::before {margin: 0;}
td .fa-bracket-round::before {margin-left: 1px;}
td .fa-bracket-round-right::before {margin-right: 1px;}

#triggerList .fa-bell-on::before {margin: 0;}
#triggerList .fa-bracket-round::before {margin: 0;}
#triggerList .fa-bracket-round-right::before {margin: 0;}

.user-info .fa-bell-on::before {margin-left: 3px; margin-right: 3px !important;}
.user-info .fa-bracket-round::before {margin: 0; color: #fff;}
.user-info .fa-bracket-round-right::before {margin: 0; color: #fff;}

.table-wrapper .fa-bell-on::before {margin:-3px;}
.table-wrapper .fa-bracket-round::before {margin-left:-3px;}
.table-wrapper .fa-bracket-round-right::before {margin-right:-3px;}

.fa-bell-off::before {content: "\f0f3"; color: green; margin-right: 5px;}
.outline.fa-bell-on::before {  text-shadow:-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; margin-right: 5px;}
.fa-check::before {content: "\f00c"; color: green; margin-right: 5px; }
.fa-times::before {content: "\f00d"; color: red; margin-right: 5px; }
.fa-download::before{content:"\f019"; color: rgb(136, 136, 136); margin-right: 5px;}
.fa-download:hover::before{color:#f58025;}
.fa-cogs::before{content:"\f085"; color: rgb(136, 136, 136); margin-right: 5px;}
.fa-cogs:hover::before{color:#f58025;}
.fa-trash::before{content:"\f1f8"; color: rgb(136, 136, 136); margin-right: 5px;}
.fa-trash:hover::before{color:red;}
.fa-edit::before{content:"\f044"; color: rgb(136, 136, 136); margin-right: 5px;}
.fa-edit:hover::before{color:#f58025;}
.fa-question-circle::before{content:"\f059"; color: rgb(136, 136, 136); margin-right: 5px;}
.fa-question-circle:hover::before{color:#f58025;}
.fa-info-circle::before{content:"\f05a"; color: rgb(136, 136, 136); margin-right: 5px;}
.fa-info-circle:hover::before{color:#f58025;}
.fa-info-circle-orange::before{content:"\f05a"; color: #f58025; margin-right: 5px;}
.fa-info-circle-red::before{content:"\f05a"; color: red; margin-right: 5px;}
.outline.fa-info-circle-red::before {  text-shadow:-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;}
.fa-minus::before{content:"\f068"; color: rgb(136, 136, 136); margin-right: 5px;}
.fa-minus-circle::before{content:"\f056"; color: rgb(136, 136, 136); margin-right: 5px;}
.fa-minus-circle:hover::before{content:"\f056"; color: #f58025; margin-right: 5px;}
.fa-link::before{content:"\f0c1"; color: rgb(136, 136, 136); margin-right: 5px;}
.fa-link:hover::before{color:#f58025;}
.fa-exclamation-triangle::before{content:"\f071"; color: #f58025; margin-right: 5px;}

.fa-file-medical-alt::before{content:"\f478"; color: rgb(136, 136, 136); margin-right: 5px;}
.fa-file-medical-alt:hover::before{color:#f58025;}
.fa-chart-bar::before{content:"\f080"; color: rgb(136, 136, 136); margin-right: 5px;}
.fa-chart-bar:hover::before{color:#f58025;}

.fa-square-plus::before{content:"\f0fe";}
.fa-square-plus:hover::before{color:#f58025;cursor: pointer;}
.fa-square-minus::before{content:"\f146";cursor: pointer;}
.fa-square-minus:hover::before{color:#f58025;}


/* Date/Time Control */
.fa-calendar::before{content:"\f073";}
.fa-clock-o::before{content:"\f017";}
.fa.fa-clock-o{width: 12px;}
.fa-chevron-up::before{content:"\f077";}
.fa-chevron-down::before{content:"\f078";}
.fa-chevron-left::before{content:"\f053";}
.fa-chevron-right::before{content:"\f054";}
.fa-trash-o::before{content:"\f1f8";}
/* End Date/Time Control*/

.edit-icon {
    float: right;
}

.field-icon { /* puts 'eye' icon inside the password fileds*/
    float: right;
    margin-top: -32px;
    margin-right:15px;
    position: relative;
    z-index: 2;
}
.ls-icon {
    background-image: url("/9500/remote/images/ls-icon.jpg");
    background-repeat: no-repeat;
    padding-left: 20px;
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;}
.sr-only-focusable:active,
.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;}

.download-num{ /* number overlay for download icon */
    height: 16px;
    width: 16px;
    color: white;
    font-weight: bold;
    background-color: #f58025;
    border-radius: 50%;
    font-size: .75em;
    margin-left: 14px;
    margin-top: -4px;
}
/******  End Font Awesome ******/

/******  Responsive Table Layout ******/    
.double-col-wrapper{width:100%;}
.double-col-left{width:100%;}
.double-col-middle{width:100%;}
.double-col-right{width:100%;}    
/******  End Responsive Table Layout ******/    

.splash {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-column-gap: 10px;
    text-align: center;
}
.splash-col{
    display: block;
    justify-content: center;
    align-items: center;
    /*display: flex;*/
    margin-bottom: 20px;
}
.splash a p{
    font-size: 1.2em;
    line-height: 2.5;
    text-decoration: none;
    color: #333;
}
.splash-col:hover{color:rgba(102,102,102,1);background:#efefef;cursor:pointer;}

.txt-white{
    color: #fff;
    font-weight: bold;
}
.txt-orange{
    color: #f58025;
    font-weight: bold;
}
.txt-green{
    color: green;
    font-weight: bold;
}
.txt-red{
    color: red;
    font-weight: normal;
}
.txt-blue{
    color: blue;
    font-weight: normal;
}
.txt-left{
    text-align: left;
}
.txt-right{
    text-align: right;
}

/******  Help Tooltip ******/
[tooltip] {
    position: relative;
    white-space: normal;
  }
  
  [tooltip]::before,
  [tooltip]::after {
    text-transform: none;
    font-size: .9em;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
    margin-bottom: 5px;
    text-align: left;
  }
  [tooltip]::before {
    content: '';
    border: 5px solid transparent;
    z-index: 1001;
  }
  [tooltip]::after {
    content: attr(tooltip);
    width: 150px;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
    background: #f58025;
    color: #fff;
    z-index: 1000;
    line-height: 1.5;
  }
  
  /* Make the tooltips respond to hover */
  [tooltip]:hover::before,
  [tooltip]:hover::after {
    display: block;
  }
  
  /* Don't show empty tooltips */
  [tooltip='']::before,
  [tooltip='']::after {
    display: none !important;
  }
  
  /* Tooltip flow up */
  [tooltip]:not([flow])::before,
  [tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #f58025;
  }
  [tooltip]:not([flow])::after,
  [tooltip][flow^="up"]::after {
    bottom: calc(100% + 5px);
  }
  [tooltip]:not([flow])::before,
  [tooltip]:not([flow])::after,
  [tooltip][flow^="up"]::before,
  [tooltip][flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, -.5em);
  }
  
  /* Tooltip flow down */
  [tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: #333;
  }
  [tooltip][flow^="down"]::after {
    top: calc(100% + 5px);
  }
  [tooltip][flow^="down"]::before,
  [tooltip][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, .5em);
  }
  
  /* Tooltip flow left */
  [tooltip][flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: #333;
    left: calc(0em - 5px);
    transform: translate(-.5em, -50%);
  }
  [tooltip][flow^="left"]::after {
    top: 50%;
    right: calc(100% + 5px);
    transform: translate(-.5em, -50%);
  }
  
  /* Tooltip flow right */
  [tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: #333;
    right: calc(0em - 5px);
    transform: translate(.5em, -50%);
  }
  [tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em, -50%);
  }
  
  @keyframes tooltips-vert {
    to {
      opacity: .95;
      transform: translate(-50%, 0);
    }
  }
  
  @keyframes tooltips-horz {
    to {
      opacity: .95;
      transform: translate(0, -50%);
    }
  }
  
  [tooltip]:not([flow]):hover::before,
  [tooltip]:not([flow]):hover::after,
  [tooltip][flow^="up"]:hover::before,
  [tooltip][flow^="up"]:hover::after,
  [tooltip][flow^="down"]:hover::before,
  [tooltip][flow^="down"]:hover::after {
    animation: tooltips-vert 300ms ease-out forwards;
  }
  
  [tooltip][flow^="left"]:hover::before,
  [tooltip][flow^="left"]:hover::after,
  [tooltip][flow^="right"]:hover::before,
  [tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 300ms ease-out forwards;
  }
/******  End Help Tooltip ******/


/******  Show/hide view icons inside the password text field ******/
 .input-icon-container{
    display: flex;
    flex-direction: row;
    border: 1px solid #ccc;
    border-radius: 5px;
    background : #fff;
    align-items : center;
    overflow: hidden;
    width: 100%;
    background-color: #fff;
    font-size: 16px;
    line-height: 20px;
  }
  
  .input-icon-container input[type=password], .input-icon-container input[type=text] {
      border: none;
      background-color: #fff;
      margin-bottom: 0;
      width: 100%;
      outline: none;
  }
  
  .input-icon-container input:-webkit-autofill,
  .input-icon-container input:-webkit-autofill:hover, 
  .input-icon-container input:-webkit-autofill:focus, 
  .input-icon-container input:-webkit-autofill:active  {
      -webkit-box-shadow: 0 0 0 30px white inset !important;
  }
  
  .input-icon-container .fa{
    padding-right: 10px;
  }
/******  End Show/Hide   ******/


/******  Battery Status Indicator ******/
.battery {
    border: 3px solid #666;
    width: 24px;
    height: 48px;
    border-radius: 4px;
    position: relative;
    margin: auto;
}
.battery:before {
    content: "";
    height: 4px;
    width: 18px;
    background: #666;
    display: block;
    position: absolute;
    top: -6px;
    border-radius: 4px 4px 0 0;
}
.battery:after {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid #fff;
    border-radius: 2px;
}
.battery-level {
    background: #30b455;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
}
.battery-level.warn {
    background-color: #efaf13;
}
.battery-level.low {
    background-color: #e81309;
}
.battery-level.low:before {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%3E%3C%2Fg%3E%20%3Cpath%20fill%3D%22%23e81309%22%20d%3D%22M17.927%2012l2.68-10.28c0.040-0.126%200.060-0.261%200.060-0.4%200-0.726-0.587-1.32-1.314-1.32-0.413%200-0.78%200.187-1.019%200.487l-13.38%2017.353c-0.18%200.227-0.287%200.513-0.287%200.827%200%200.733%200.6%201.333%201.333%201.333h8.073l-2.68%2010.28c-0.041%200.127-0.060%200.261-0.060%200.4%200.001%200.727%200.587%201.32%201.314%201.32%200.413%200%200.78-0.186%201.020-0.487l13.379-17.353c0.181-0.227%200.287-0.513%200.287-0.827%200-0.733-0.6-1.333-1.333-1.333h-8.073z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: 18px;
    height: 18px;
    width: 18px;
    margin: -30px 0 0 -9px;
    content: "";
    display: inline-block;
    position: absolute;
}
/******  End Battery Status Indicator ******/

/******  LS Changes  ******/
.change__container {
    display: flex;
}
.change__item{
    display: inline-flex;
    width: auto;
    margin-right: auto;
    margin-top: auto;
}
.change__item:first-child{
    display: inline;
}
.change__item:last-child{
    margin-right: 20px;
}
.change__color{
    width: 19px;
    height: 19px;
    display:inline-block;
    border: 1px solid #ccc;
    border-radius: 50px;
    margin-right: 10px;
}
.change__color.green{
    background-color: darkseagreen;
}
.change__color.orange{
    background-color: orange;
}
/******  End LS Changes ******/

/******  Maps Error ******/
#maps-error-list{
    margin: 5px 0 0 40px;
}
#maps-error-list li{
    list-style-type: disc;
}
#maps-error-list li a{
    color: #212529;
}
/******  End Maps Error ******/

/******  Misc ******/
.levelsender-name{
    display:inline;
    line-height:1;
}

.terms li{
    list-style-type: disc;
}

.inline-link {
    text-decoration: underline;
    color: #f58025;
}

.normal-list li{
    margin: 5px 0 0 40px;
    list-style-type: disc;
}
/******  End Misc ******/


/********* DESKTOP *********/

@media screen and (min-width: 1024px) { 
    
    .floatRight{
        float:right;
        margin:0 0 0 10px;
    } 

    .grid-container {
        max-width: 1480px;
        margin: 0 auto;
        padding: 20px;
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-rows: 70px auto auto;
    }
    
    .grid-item {
        position: relative;
        padding: 10px 20px;
    }

    .grid-contact-info {
        grid-template-columns: 1.5fr 2fr 1.5fr 2fr;
    }

    .grid-payment-info {
        grid-template-columns: 1fr 1fr;
    }

    .grid-payment-method {
        grid-template-columns: 1fr 2fr;
    }
    
    .grid-alarm-info {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }
    .grid-alarm-info span:first-child{
        grid-column: 1;
    }
    .grid-alarm-info span:nth-of-type(1n+2){    
        white-space: nowrap;
        text-align: center;
    }

    /****** Side Navigation ******/
    .side-nav{
        display:block;
        grid-row: span 15;
        background-color: #000;
        padding: 0;
    }
    
    /* Search Box */
    form.search input[type=text] {
        padding: 5px;
        border: 1px solid #666;
        border-right: none;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        float: left;
        width: 65%;
        background: #444;
        margin: 0 0 15px 10px;
        line-height: normal;
        box-sizing: unset;
    }
    
    form.search button {
        float: left;
        width: 20%;
        padding: 5px;
        background: #444;
        color: white;
        border: 1px solid #666;
        border-left: none; /* Prevent double borders */
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        cursor: pointer;
    }
    
    form.search button:hover {
        background: rgb(90, 89, 89);
    }
    
    form.search::after {
        content: "";
        clear: both;
        display: table;
    }

    /*input:focus {
        outline: none;
    }*/
    /* End Search Box */
    
    
    .nav-heading {
        background-color: #444;
        border-top: 1px solid rgb(145, 139, 139);
        border-bottom: 1px solid rgb(145, 139, 139);
        font-size: 60%;
        color: #fff;
        padding: 5px 20px;
    }
    
    .nav-items {
        border: 1px solid #666;
        border-radius: 10px;
        margin: 10px;
        font-size: 60%;
        color: #aaa;
    }
    
    .nav-items ul{
        list-style-type: none;
        margin: 0;
        padding: 10px;
        line-height: 2;
    }
    
    .arrow-right {
        width: 0; 
        height: 0; 
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid #666;
        padding-right: 5px;
        display:inline-block;
    }
    
    .arrow-right-big {
        width: 0; 
        height: 0; 
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 15px solid #666;
        padding-right: 5px;
        display:inline-block;
    }
    
    .arrow-down {
        width: 0; 
        height: 0;
        margin-top: 5px;
        border-color: #fff transparent;
        border-style: solid;
        border-width: 5px 5px 0px 5px;
        display:inline-block;
        float: right;
    }
    /****** End Side Navigation ******/
    
    /****** Header ******/
    .header{
        grid-template-columns: 0px 0.2fr 1fr 1fr;
    }
    .page-info{
        margin-top: 7px;
    }
    .user-info{
        /*display: inline; */
    }
    
    .account-info{
        /*display: inline;*/
    }

    .user-desktop {
        display: inline;
    }
    .user-icon{
        display: none;
    }
    /****** End Header ******/

    /****** Footer ******/
    .footer{
        position: absolute;
        bottom: -150px;
        max-width: 1440px;
        width: 100%;
        padding-top: 30px;
        grid-template-columns: 180px 1fr 1fr 1fr;
    }
    .footer .footer-item {
        border-right: 1px solid #efefef;
    }
    .footer .footer-item:nth-child(4) {
        border-right: none;
    }
    /****** End Footer ******/    

    /****** Main Buttons ******/
    .main-button{
        width: auto;
    }
    /****** End Main Buttons ******/

    /****** Homepage ******/
    .hp-grid-container {
        display: grid;
        max-width: 1480px;
        margin: 0 auto;
        padding: 20px;
        grid-template-columns: 45% auto;
        grid-template-areas:
        "hp-header hp-header"
        "hp-welcome hp-welcome"
        "hp-content-full hp-content-full"
        "hp-content-left hp-content-right"
        "hp-login hp-content-right"
        "hp-footer hp-footer"       
    }

    .hp-content-right{
        border: 2px solid #f58025;
        border-radius: 25px;
        padding: 20px;
    }

    .hp-plans-container {
        grid-template-columns: 1fr 1fr 1fr;
    }
    /****** End Homepage ******/

    /****** Dashboard ******/
    .dashboard {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .circle-img {
        width: 50px;
        height: 50px;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        border: 2px solid #f58025 ;
    }
    
    .circle-img img {
        display: inline;
        margin: 0 auto;
        height: 100%;
        width: auto;
    }
    /****** End Dashboard ******/

    /****** Spotlight ******/
    .spotlight{
        grid-template-columns: 2fr 1fr;
    }
    .box-sml {
        grid-column: span 1;
    }
    .box-sml-grey {
        margin-top: 0;
    }
    .box-med {
        grid-column: span 2;
    }
    /****** End Spotlight ******/

    /******  Logger Setup Content Tabs ******/
    .content-tab-1, .content-tab-3, .content-tab-5{
        width: 39% !important;
        border-right: 0 !important;
    }
    .content-tab-2, .content-tab-4, .content-tab-6{
        width: 60% !important;
    }
    /******  End Logger Setup Content Tabs ******/


    /****** Form Elements ******/
    input[type=text], input[type=number], input[type=password], input[type=tel], input[type=email]{
        width: 130px;
        text-overflow: ellipsis;
    }
    input[type=text].tbox-big{
        max-width: 300px;
    }
    input[type=text].tbox-med{
        max-width: 250px;
    }
    input[type=tel].tbox-big{
        width: 170px;
    }
    input[type=text].proj-name, input[type=text].ls-name{
        width: 100%;
    }    
    input[type=email].email-big{
        max-width: 250px;
        text-overflow: ellipsis;
    }
    select {
        width: 138px;
        text-overflow: ellipsis;
    }
    select.sel-big{
        width: 300px;
        text-overflow: ellipsis;
    }
    select.sel-med{
        max-width: 250px;
        text-overflow: ellipsis;
    }
    .input-icon-container{
        width: 250px;
    }
    /****** End Form Elements ******/ 


    .container{
        margin: 0 0 10px 10px;
    }
    #menu-toggle, .hamburger {
        display: none;
    }
    .mburger {
        display: none !important;
    }
    .nav-links{
        display: flex;
        flex-flow: row wrap;
        white-space:nowrap;
    }
    .nav-links a{
        padding-right: 2rem;
        flex: 1 0;
    }
    .nav-links a:hover {
        color: #ccc;
    }

    /****** Tabbed Menu - Expendable on Mobile ******/
    .menu {
        display:block !important;
    }
    .menu a:last-child{
        border-right: 1px solid #ccc;
        display: inline-flex;
    }
    .menu a:nth-child(2){ /* double-border fix on diagnostic info page */
        border-right: 0;
    }
    .menu-down {
        display: none;
    }
    ul a:nth-child(2) > li{
        border-left: none !important;
    }
    ul a:nth-child(3) > li{
        border-left: none !important;
    }
    ul a:nth-child(4) > li{
        border-left: none !important; 
        border-right: none !important; 
    }
    li.tabs{
        width: auto;
        border-left: none;
    }
    li.tabs.active{
        display: block;
    }
    li.tabs.inactive{
        color: #000;
        background-color: #e4e4e4;
        cursor: default;
    }
    li.tabs.setup{
        cursor:default;
    }
    li.tabs.setup:hover{
        color: #333;
        background-color: #e4e4e4;  
    }
    /****** End Tabbed Menu - Expendable on Mobile ******/

    /****** Flex Container Items - Desktop ******/
    .bc{ /* Breadcrumb */
        margin-left:20px;
    }
    .item:nth-child(1){
        display: block;
    }  

    .item:nth-child(2){
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }
    .item:nth-child(3){
        width: 37%;
    } 
    .item:nth-child(n+4):nth-child(-n+8){
        width: 60%;
        border-right: 1px solid #ccc;
    }
    /****** End Flex Container Items ******/
    
    /****** Main Controls Row ******/
    /*.icons { main icons
        width: 40%;
    }*/
    .headline { /*main headline*/
        width: 40%;
    }
    .com-port{ /*com port dropdown */
        width: 37%;
        float: left;
    }
    .model-logo{ /*model logo*/
        width: 19%;
        float: right;
        padding-right: 10px;
    }
    .model-logo img {
    float: right;
    }
    .timer{ /*timer dropdown */
        width: 30%;
        float: left;
    }    
    .plot{ /*plot dropdown */
        width: 25%;
        float: right
    }
    /****** End Main Controls Row ******/
    
    /****** Responsive Table Layout ******/
    .double-col-wrapper{width:100%;}
    .double-col-left{width:48%;float:left;}
    .double-col-middle{width:4%;}
    .double-col-right{width:48%;float:right;}
    /****** End Responsive Table Layout ******/  

    .btn-nav{
        margin-right: 20px;
        float: right;
        min-width: 80px;
    }
}
/********* END DESKTOP *********/



/*********  CSS for the Side Navigation *********/
.navSidebar{background-position:top;background-repeat:no-repeat;font-family:'Myriad Pro', Helvetica, Arial, sans-serif;font-size:16px; grid-row:span 15;}
.navSidebar.user-guide{background-image:none;padding-top:0px;}
.navItem.parent{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAAA3NCSVQICAjb4U/gAAAAJFBMVEX///9mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmahSWycAAAADHRSTlMAESIzRFWZqrvM3f9baxSMAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABV0RVh0Q3JlYXRpb24gVGltZQA3LzEzLzE3dGI+eAAAACZJREFUCJljYEAB7ApginsphNo9GULtToRQOx2QeM1IKtkUkAwBAKDECo4qVmaiAAAAAElFTkSuQmCC");background-position:95% 14px;background-repeat:no-repeat;}
.navItem.parent.locked{border-top: 1px solid rgb(145, 139, 139);font-weight:normal;background-color: #444;}
/*.navItem.parent.locked:hover{background-color:inherit;background-color:#E1E1E1;}*/
.navItem.parent.locked.selected{}
.navItem.parent.locked .navItem a{color:#aaa;}
.navItem.parent.locked .navItem a:hover{color:#fff;}
.navItem{ /*width:100%;margin:0px;background-color:#444;border-bottom:1px solid #ccc;overflow:auto; */}
.navSidebar.user-guide .navItem{font-weight:normal;font-size:14px;}
.navItem.locked .navFlyout .navItem:hover{}
.navItem a{color:#fff;margin:8px 14px;text-decoration:none;display:block;}
.navItem a:hover{color:#ccc;margin:8px 14px;text-decoration:none;display:block;}
.navFlyout{display:none; border: 1px solid #666; border-radius: 10px;}
.navItem.locked .navFlyout{display:block;}
/*.navFlyout .navItem a{margin:8px 5px 8px 22px;}*/
.navItem.locked .navFlyout .navItem{font-weight:normal;font-size:16px;margin-left:4px;line-height: 1.3;}
.navFlyout .navItem{font-weight:normal;font-size:14px;}
/*.navFlyout .navItem:hover{background-color:#E1E1E1;}
.navFlyout .navItem .navFlyout .navItem a{margin:8px 5px 8px 25px;}*/
.navFlyout .navItem .navFlyout .navItem .navFlyout .navItem a{margin:8px 5px 8px 35px;}
.navRelated{background:#666;padding-top:4px;}
.navRelated .navItem{font-weight:normal;font-size:14px;}
.navRelated .navItem a{margin:8px 5px 8px 15px;}
/*.navItem.selected{background-color:#E1E1E1 !important;font-weight:normal;}*/
.navFlyout .navItem.selected{/*background-color:#D7D7D7 !important;*/ background-position:0% 4px; background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAAA3NCSVQICAjb4U/gAAAAJFBMVEX///9mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmahSWycAAAADHRSTlMAESIzRFWZqrvM3f9baxSMAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABV0RVh0Q3JlYXRpb24gVGltZQA3LzEzLzE3dGI+eAAAACZJREFUCJljYEAB7ApginsphNo9GULtToRQOx2QeM1IKtkUkAwBAKDECo4qVmaiAAAAAElFTkSuQmCC"); background-repeat:no-repeat;}
.navItem.parent.selected{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAAA3NCSVQICAjb4U/gAAAAJFBMVEX///9mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmahSWycAAAADHRSTlMAESIzRFWZqrvM3f9baxSMAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABV0RVh0Q3JlYXRpb24gVGltZQA3LzEzLzE3dGI+eAAAADVJREFUCJljYMAGsnfv3l3AwKC1e/cuBQYG1t27t4JEu3dPAFHWuw1AFNs2sFLGiRAtDgjdACsGDEH7yGN/AAAAAElFTkSuQmCC"); background-position:95% 14px; background-repeat:no-repeat;}
.navItem.parent.selected > .navFlyout{display:block;}
.navTitle{background-color:#ccc;overflow:auto;border-bottom:1px solid #666;}
.navText{color:#000;font-weight:bold;margin:8px 10px;}
.navHomeLink{background:#000;background-image:url(/Images/global/topshad200sand.gif);background-position:bottom;background-repeat:no-repeat;padding:5px 0px 10px 0px;}
.navHomeLink img{margin:0px 5px 0px 0px;}
.navHomeLink a{color:#F8F1E7;background:#000;font-weight:bold;text-decoration:none;display:block;margin:0px 5px;}
.navTOC{text-align:center;border-top:3px solid #ddd;}
.navTOC a{color:#000;display:block;text-decoration:none;margin:5px;background:#F9F2EA;font-size:14px;}
.navItem .item-num{float:left;margin:8px 3px;overflow:hidden;text-align:right;width:28px;}
.navItem .item-title{margin:8px 10px 5px 0px;float:right;width:160px;}
.navItem .item-num a,
.navItem .item-title a{margin:0px !important;}
.navFlyout .navItem .item-num{width:40px;}
.navFlyout .navItem .item-title{width:140px;}
.navFlyout .navFlyout {border: none;}    
.navFlyout .navFlyout .navItem .item-num{width:60px;}
.navFlyout .navFlyout .navItem .item-title{width:120px;}
.navFlyout .navFlyout .navFlyout .navItem .item-num{width:80px;}
.navFlyout .navFlyout .navFlyout .navItem .item-title{width:100px;}    
.navFlyout .navItem.parent {background-position: 95% 4px;}
.navFlyoutContainer{background-color: #000; padding: 10px; border-top: 1px solid rgb(145, 139, 139); margin-bottom: 10px;}
.navFlyout .navItem.parent .navFlyoutContainer {border-top: none; padding: 0 10px;}
/********* End of CSS for Side Navigation *********/


/*********  Responsive table used on the dashboard and data logs view *********/
.table__container {
    margin-left: auto;
    margin-right: auto;
}
.table__container a {
    color: #212529;
}
.table__container a:hover {
    color: #000;
}
.table__responsive li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}
.table__header {
}
.table__row {
    background-color: #ffffff;
}
.table__col{
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 5px;
}
.table__col:last-child{
    margin-right: 0;
}
.table__col--half{
    flex: 0.5;
}
.table__col--quarter{
    flex: 0.25;
}
.table__col--double{
    flex: 2;
}
.table__col--right{
    text-align: right;
    overflow: visible;
}
.table__col--center{
    text-align: center;
}
.table__col label.error{
    display: block;
}
/*********  End *********/

/*********  Responsive table used for historical alarms list  *********/
.table__responsive.alarms{
    background: #fff;
}
.table__responsive.alarms li {
    padding: 10px;
    margin-bottom: 0;
}
.table__responsive.alarms li:first-child {
    background: #ccc;
}
.table__responsive.alarms li:nth-child(even) {
    background: #efefef;
}
/*********  End *********/

/*********  Responsive table used in the invite box *********/
.table__invite li {
    display: flex;
    justify-content: space-between;
}
.table__invite .table__col{
    white-space: inherit;
}

  
@media all and (max-width: 767px) {
    .table__responsive .table__header {
        display: none;
    }
    .table-row{ 
    }
    .table__responsive li {
        display: block;
        border-bottom: 1px solid #ccc;
    }
    .table__invite li {
        display: block;
    }
    .table__col {
        /*display: flex;*/
        flex-basis: 100%;
        padding: 5px 0;
        white-space: unset;
        overflow: visible;
    }
    .table__invite .table__col{
        flex-basis: 100%;
        padding: 0;
    }
    .table__col:before {
        /*padding-right: 10px;*/
        content: attr(data-label);
        flex-basis: 40%;
        text-align: right;
        font-weight: bold;
    }
    [data-label]:before { 
        padding-right: 10px; 
    }
    .table__col--right{
        text-align: unset;
    }
    .table__col--center{
        text-align: unset;
    }
    .table__container .fa{
        /*font-size: 1.5rem;*/
        padding-right: 20px;
    }
}
/*********  End Responsive table *********/

/*!
 * mburger CSS v1.3.3
 * mmenujs.com/mburger
 *
 * Copyright (c) Fred Heusschen
 * www.frebsite.nl
 *
 * License: CC-BY-4.0
 * http://creativecommons.org/licenses/by/4.0/
 */
 :root{
    --mb-button-size:40px;
    --mb-bar-width:0.6;
    --mb-bar-height:4px;
    --mb-bar-spacing:8px;
    --mb-animate-timeout:0.4s
}
.mburger{
    background:0 0;border:none;border-radius:0;color:inherit;display:inline-block;position:relative;box-sizing:border-box;height:var(--mb-button-size);padding:0 0 0 var(--mb-button-size);margin:0;line-height:var(--mb-button-size);vertical-align:middle;appearance:none;outline:0;cursor:pointer;width:30px;height:40px;
}
a.mburger:hover{
    text-decoration: none; color: #fff;
}
.mburger b{
    display:block;position:absolute;left:calc(var(--mb-button-size) * ((1 - var(--mb-bar-width))/ 2));width:calc(var(--mb-button-size) * var(--mb-bar-width));height:var(--mb-bar-height);border-radius:calc(var(--mb-bar-height)/ 2);background:currentColor;color:inherit;opacity:1
}
.mburger b:nth-of-type(1){
    bottom:calc(50% + var(--mb-bar-spacing));transition:bottom .2s ease,transform .2s ease,width .2s ease
}
.mburger b:nth-of-type(2){
    top:calc(50% - (var(--mb-bar-height)/ 2));transition:opacity .2s ease
}
.mburger b:nth-of-type(3){
    top:calc(50% + var(--mb-bar-spacing));transition:top .2s ease,transform .2s ease,width .2s ease
}
.mm-wrapper_opened .mburger b:nth-of-type(1){
    bottom:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(45deg)
}
.mm-wrapper_opened .mburger b:nth-of-type(2){
    opacity:0;
}
.mm-wrapper_opened .mburger b:nth-of-type(3){
    top:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(-45deg)
}
.mburger--collapse b:nth-of-type(1){
    transition:bottom .2s ease,margin .2s ease,transform .2s ease;transition-delay:.2s,0s,0s
}
.mburger--collapse b:nth-of-type(2){
    transition:top .2s ease,opacity 0s ease;transition-delay:.3s,.3s
}
.mburger--collapse b:nth-of-type(3){
    transition:top .2s ease,transform .2s ease
}
.mm-wrapper_opened .mburger--collapse b:nth-of-type(1){
    bottom:calc(50% - var(--mb-bar-spacing) - var(--mb-bar-height));margin-bottom:calc(var(--mb-bar-spacing) + (var(--mb-bar-height)/ 2));transform:rotate(45deg);transition-delay:calc(var(--mb-animate-timeout) + .1s),calc(var(--mb-animate-timeout) + .3s),calc(var(--mb-animate-timeout) + .3s)
}
.mm-wrapper_opened .mburger--collapse b:nth-of-type(2){
    top:calc(50% + var(--mb-bar-spacing));opacity:0;transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .2s)
}
.mm-wrapper_opened .mburger--collapse b:nth-of-type(3){
    top:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(-45deg);transition-delay:calc(var(--mb-animate-timeout) + .3s),calc(var(--mb-animate-timeout) + .3s)
}
.mburger--spin b:nth-of-type(1){
    transition-delay:.2s,0s
}
.mburger--spin b:nth-of-type(2){
    transition-duration:0s;transition-delay:.2s
}
.mburger--spin b:nth-of-type(3){
    transition-delay:.2s,0s
}
.mm-wrapper_opened .mburger--spin b:nth-of-type(1){
    transform:rotate(135deg);transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .2s)
}
.mm-wrapper_opened .mburger--spin b:nth-of-type(2){
    transition-delay:calc(var(--mb-animate-timeout) + 0s)
}
.mm-wrapper_opened .mburger--spin b:nth-of-type(3){
    transform:rotate(225deg);transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .2s)
}
.mburger--squeeze b:nth-of-type(1){
    transition-delay:.1s,0s
}
.mburger--squeeze b:nth-of-type(2){
    transition-delay:.1s
}
.mburger--squeeze b:nth-of-type(3){
    transition-delay:.1s,0s
}
.mm-wrapper_opened .mburger--squeeze b:nth-of-type(1){
    transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .1s)
}
.mm-wrapper_opened .mburger--squeeze b:nth-of-type(2){
    transition-delay:calc(var(--mb-animate-timeout) + 0s)
}
.mm-wrapper_opened .mburger--squeeze b:nth-of-type(3){
    transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .1s)
}
.mburger--tornado b:nth-of-type(1){
    transition:bottom .2s ease,transform .2s ease;transition-delay:.2s
}
.mburger--tornado b:nth-of-type(2){
    transition:opacity 0s ease,transform .2s ease;transition-delay:.1s,.1s
}
.mburger--tornado b:nth-of-type(3){
    transition:top .2s ease,transform .2s ease;transition-delay:0s
}
.mm-wrapper_opened .mburger--tornado b:nth-of-type(1){
    transform:rotate(-135deg);transition-delay:calc(var(--mb-animate-timeout) + 0s)
}
.mm-wrapper_opened .mburger--tornado b:nth-of-type(2){
    opacity:0;transform:rotate(-135deg);transition-delay:calc(var(--mb-animate-timeout) + .4s),calc(var(--mb-animate-timeout) + .1s)
}
.mm-wrapper_opened .mburger--tornado b:nth-of-type(3){
    transform:rotate(-225deg);transition-delay:calc(var(--mb-animate-timeout) + .2s)
}

/*********  Project drop-down list used on members page  *********/
/* Style The Dropdown Button */
.dropbtn {
    background-color: #f58025;
    color: white;
    border: none;
    pointer-events: none;
    min-width: 110px;
}
  
/* The container <div> - needed to position the dropdown content */
.dropdown {
    display: inline-block;
    cursor: pointer;
}
  
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    padding: 10px;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #f1f1f1
}

/* 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: #666;
}
  /********* End of project drop-down list *********/


/********* Delete Project confirmation dialog *********/
#project-delete-dialog {
    font-size: 1rem;
    border: 1px solid #888;
    border-radius: 10px;
    box-shadow: 0px 0px 18px 0px #888;
}

#project-delete-dialog .dialog-title {
    font-weight: 600;
    padding-bottom: 4px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 1.0rem;
}

#project-delete-dialog p {
    margin-bottom: 0.8rem;
}

#project-delete-dialog .button {
    margin: 10px 0 0 0;
}

@media screen and (min-width: 1024px) {
    #project-delete-dialog .button {
        min-width: 100px;
        margin: 10px 0 0 10px;
    }
}

#project-delete-dialog .warn-text {
    font-weight: bold;
}

#project-delete-dialog .button.danger {
    background-color: rgba(200, 0, 0, 0.8);
    color: white;
    font-weight: bold;
}

#project-delete-dialog .button.danger:hover {
    background-color: rgba(77, 0, 0, 0.8);
}
/********* End of Delete Project confirmation dialog *********/