@font-face {
    font-family: 'proxima-light';
    src: url('/fonts/ProximaNova-Light.otf');
}
@font-face {
    font-family: 'proxima-bold';
    src: url('/fonts/ProximaNova-Bold.otf');
}
@font-face {
    font-family: 'proxima-boldlt';
    src: url('/fonts/ProximaNova-Boldlt.otf');
}
@font-face {
    font-family: 'proxima-semibold';
    src: url('/fonts/ProximaNova-Semibold.otf');
}
@font-face {
    font-family: 'proxima-extrabold';
    src: url('/fonts/ProximaNova-Extrabold.otf');
}
@font-face {
    font-family: 'proxima-regular';
    src: url('/fonts/ProximaNova-Regular.otf');
}
@font-face {
    font-family: 'proxima-black';
    src: url('/fonts/ProximaNova-Black.otf');
}
.proxima-regular {font-family:'proxima-regular';}
.proxima-bold {font-family:'proxima-bold';}
.proxima-boldlt {font-family:'proxima-boldlt';}
.proxima-semibold {font-family:'proxima-semibold';}
.proxima-extrabold {font-family:'proxima-extrabold';}
.proxima-light {font-family:'proxima-light';}
.proxima-black {font-family:'proxima-black';}
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}
#ms-custom-headers{
  display: flex !important;
}
.ms-selectable, .ms-selection{
  flex: 1 !important;
}
.ms-list{
  
  overflow: auto !important;
  max-height: 70dvh;
}

.ms-list::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}

.ms-list::-webkit-scrollbar-thumb {
  background: #eaeaea; 
}
h6{
    font-weight: normal;
    font-size:8vmin;
}
.yellow{
    background-color:yellow; 
}

textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}

.collapsible {
    margin-top: 20px;
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
  }
  
  .active, .collapsible:hover {
    background-color: #555;
  }
  
  .collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  .active:after {
    content: "";
  }
  
  .online {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
    margin-bottom:20px;
  }
  .online p+p{
      margin-top:0.3em;
  }
  /* .content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
  } */

  .circle {
    width: .4em;
    height: 0.4em;
    line-height: 1.65;
    border-radius: 50%; /* the magic */
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    text-align: center;
    color: white;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 8px;
    display:inline-block;
  }
  
  .blue > .circle {
    background-color: #3498db;  
  }
  .green > .circle{
    background-color: #16a085;
  }
  .red > .circle{
    background-color: #e74c3c;
  }


.zui-table{
    
    /* table-layout: fixed; */
}

  .zui-table, .zui-table2, .zui-table3 {
      background: white;
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th, .zui-table2 tbody td:first-child, .zui-table3 thead th, .zui-table3 tbody td:first-child {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
font-size: 0.8rem;
    text-wrap-style: balance;
    white-space: normal;
    padding: 10px;
    text-align: center;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table td, .zui-table3 td, .zui-table2 tbody tr td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
text-align: center;
vertical-align: middle;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table3 {
  width: 100%
}
.zui-table2 {
    font-size: 1.5em;
    width: 100%
}

.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
	/* font-family: Georgia, "Times New Roman", Times, serif; */
	background: rgba(255,255,255,.1);
	border: none;
	border-radius: 4px;
	font-size: 15px;
	margin: 0;
	outline: 0;
    width: 100%;
	box-sizing: border-box; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	/* background-color: #e8eeef; 
	color:#8a97a0; */
	-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
	box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus{
	background: #d2d9dd;
}
.form-style-5 select{
	-webkit-appearance: menulist-button;
	height:35px;
}
.form-style-5 .number {
	background: #1abc9c;
	color: #fff;
	height: 30px;
	width: 30px;
	display: inline-block;
	font-size: 0.8em;
	margin-right: 4px;
	line-height: 30px;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255,255,255,0.2);
	border-radius: 15px 15px 15px 0px;
}

.form-style-5 input[type="submit"],
.form-style-5 input[type="button"]
{
	position: relative;
	display: block;
	/* padding: 19px 39px 18px 39px; */
	color: #FFF;
	margin: 0 auto;
	background: #1abc9c;
	font-size: 18px;
	text-align: center;
	font-style: normal;
	width: 100%;
	border: 1px solid #16a085;
	border-width: 1px 1px 3px;
	margin-bottom: 10px;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover
{
	background: #109177;
}

.buttonr {
    border-radius: 2px;
    cursor: pointer;
    display: block;
    /* height: 60px; */
    line-height: 60px;
    padding: 0 30px 0 25px;
    position: relative;
    transition: all .3s;
    border: 2px solid #fff;
    font-size: 1.3em;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 0;
    margin: 0 auto 60px auto;
    color: #fff;
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    background:#db3490 !important;
    background:-moz-linear-gradient(45deg, #db3490 0%, #b6597d 100%) fixed !important;
    background:-webkit-linear-gradient(45deg, #db3490 0%, #b6597d 100%) fixed !important;
    -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out; }
 
  .buttonr:hover {
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background: #fff;
    color: #000; }
*{
  box-sizing: border-box;
}
button{
	position: relative;
	display: inline-block;
	padding: 2px 39px 2px 39px;
	color: #FFF;
	background: #1a73bc;
	font-size: 1rem;
	text-align: center;
	font-style: normal;
	border: 1px solid #1a53bc;
	border-width: 1px 1px 3px;
  cursor: pointer;

  height: 60px; 
     margin: 10px 0; 
     border-radius: 8px;
}
button:hover
{
	background: #154399;
}

button:disabled {
color:#1E1E1E;
	background: #556c7e;
  cursor:not-allowed;
}

#panel > button {
padding:0;
     height: unset; 
     margin: unset; 
     border-radius: unset;
}

.form-style-6 input[type="text"],
.form-style-6 input[type="date"],
.form-style-6 input[type="datetime"],
.form-style-6 input[type="email"],
.form-style-6 input[type="number"],
.form-style-6 input[type="search"],
.form-style-6 input[type="time"],
.form-style-6 input[type="url"],
.form-style-6 textarea,
.form-style-6 select {
	font-family: Georgia, "Times New Roman", Times, serif;
	background: rgba(255,255,255,.1);
	border: none;
	border-radius: 4px;
	font-size: 15px;
	margin: 0;
	outline: 0;
	width: 40%;
	box-sizing: border-box; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	background-color: #e8eeef; 
	color:#8a97a0;
	-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
	box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
}
.form-style-6 input[type="text"]:focus,
.form-style-6 input[type="date"]:focus,
.form-style-6 input[type="datetime"]:focus,
.form-style-6 input[type="email"]:focus,
.form-style-6 input[type="number"]:focus,
.form-style-6 input[type="search"]:focus,
.form-style-6 input[type="time"]:focus,
.form-style-6 input[type="url"]:focus,
.form-style-6 textarea:focus,
.form-style-6 select:focus{
	background: #d2d9dd;
}
.form-style-6 select{
	-webkit-appearance: menulist-button;
	height:35px;
}
.form-style-6 .number {
	background: #1abc9c;
	color: #fff;
	height: 30px;
	width: 30px;
	display: inline-block;
	font-size: 0.8em;
	margin-right: 4px;
	line-height: 30px;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255,255,255,0.2);
	border-radius: 15px 15px 15px 0px;
}
h2 {
    text-align: center
}
.form-style-6 input[type="submit"],
.form-style-6 input[type="button"]
{
	position: relative;
	display: block;
	padding: 19px 39px 18px 39px;
	color: #FFF;
	margin: 0 auto;
	background: #1abc9c;
	font-size: 18px;
	text-align: center;
	font-style: normal;
	width: 100%;
	border: 1px solid #16a085;
	border-width: 1px 1px 3px;
	margin-bottom: 10px;
}
.form-style-6 input[type="submit"]:hover,
.form-style-6 input[type="button"]:hover
{
	background: #109177;
}


.play {
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 60px solid #2c3e50;
    margin: 100px auto 50px auto;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    left: 10px;
  }
  .play:before {
    content: '';
    position: absolute;
    top: -75px;
    left: -115px;
    bottom: -75px;
    right: -35px;
    border-radius: 50%;
    border: 10px solid #2c3e50;
    z-index: 2;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
  }
  .play:after {
    content: '';
    opacity: 0;
    transition: opacity 0.6s;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
  }
  .play:hover:before, .play:focus:before {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
  }
  .play.active {
    border-color: transparent;
    border-left: 60px hidden #2c3e50;
  }
  .play.active:after {
    content: '';
    opacity: 1;
    width: 50px;
    height: 80px;
    background: #2c3e50;
    position: absolute;
    right: 5px;
    top: -40px;
    border-left: 20px solid #2c3e50;
    box-shadow: inset 30px 0 0 0 #f9f9f9;
  }

input:disabled{
    -webkit-text-fill-color:#880000; /* Override iOS / Android font color change */
-webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
color:#880000; /* Override IE font color change */
padding:0 10px;
background: whitesmoke;
}
/*Decorative background */

input{
    padding:0 10px;
}
/*Basic button styling */
.button {
    border-radius: 2px;
    cursor: pointer;
    display: block;
    /* height: 60px; */
    /* line-height: 30px; */
    padding: 15px;
    position: relative;
    transition: all .3s;
    border: 2px solid #fff;
    font-size: 1.1em;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 0;
    margin: 30px auto;
    color: #fff;
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    background:#61b2d8;
    background:-moz-linear-gradient(45deg, #3498db 0%, #59b69a 100%) fixed;
    background:-webkit-linear-gradient(45deg, #3498db 0%, #59b69a 100%) fixed;
    -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out; }
 
  .button:hover {
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background: #fff;
    color: #000; }

   

a:-webkit-any-link {
    cursor: pointer;
}

html,body { margin: 0; padding: 0; border: 0; word-wrap:break-word;  background-color:aliceblue; height:100%}
html { font-size: 100%; -webkit-touch-callout:none; -webkit-text-size-adjust:none;font-family:'proxima-regular';
 -ms-text-size-adjust:100%;}
 article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, 
section { display:block; }
.body-fd {opacity:0.2;transition:all .15s;}
/*login*/
#body,#create-user-body {background:radial-gradient(gray,rgba(50,50,50,1));}
tr.hands:nth-child(odd){background-color: #f2f2f2}
#myTable {
    min-width: 100%;
    white-space:nowrap;
}
#login {background:white;width:100%;margin:0 auto;height:100% !important;}

#login img {display:block;position:relative;top:90px;width:116px;height:40px;margin:0 auto;}
#login .form-w-i {width:100%;position:relative;top:40px; background: white; padding-bottom:40px;}
#login .form-group {width:86%;margin-left:7%;margin-bottom:30px;}
#login input {width:100%;border:1px solid silver;height:55px;}
#loginInTimeTable {width:90%;text-align:center;}
#loginInTimeTable th {background:#1ebebe;color:white;}
.c-pw #login {height:650px;}
a.sign-link {text-decoration:none;width:100%;text-align:center;}
.sign-link-w {width:100%;text-align:center;padding:10px;}
#oops .alert {width:90%;margin-left:5%;line-height:21px;font-size:18px;}

.menu_button, .menu_button_collapsed {display:none;}

::-webkit-input-placeholder {color: silver;padding-left:25px;}
:-moz-placeholder {color: silver;}
::-moz-placeholder {color: white;}
:-ms-input-placeholder {color: silver;}
input[type="radio" i] {
    margin: 0;
}
#login button {cursor:pointer;width:80%;margin-left:10%;height:45px;color:white;background:#1ebebe;border:none;}  
select {width:50%;height:40px;}

.nav-w {
    width: 100%;
    height: 10dvh;
    min-height:60px;
    position: absolute;
    top:0;
    background: #157EBF;
}
.nav-i {width:1280px;text-align:left;margin:0 auto;padding-top:12px;position:relative;}
.nav-i a {display:block;position:absolute;top:20px;right:30px;text-decoration:none;color:white;}
#header-top {
    background: #157EBF;
}
.f-nav-w {width: 100%;
    
    height: 10dvh;
    position: relative;
    background: rgba(50,50,50,1);
    clear:both;
   }
.f-nav-i {width:1280px;margin:0 auto;padding-top:12px;position:relative;text-align:center;color:white;}
.f-nav-i a {text-decoration:none;color:white;}
.container {width:100%;display:absolute;max-height:90dvh; }
.left_nav {width:24vw;float:left;background: #1E1E1E;}
.main_content {
height:90dvh;
  padding-top: 2vh;
  padding-left: 5vw;
  padding-right:5vw;
  padding-bottom:5vh;
  /* padding: 5vw; */
  /* padding-bottom:10dvh; */
  background-color: aliceblue;float:left;width:100vw;display:block; }
.left_nav {text-align:left; min-height:90dvh; overflow-y: auto; height:100%;

}

.left_nav ul li a { padding:2% 0;padding-left:70px;text-decoration:none;color:white;font-size:22px;display:block;}
.left_nav ul li span a  {font-size:2em;padding:15px 0;display:block;color:white;border-bottom:1px solid white;margin-bottom:15px;text-align: center;}
p.seperator {width:100%;text-align:center;padding:2% 0;background:black;color:white;}

.left_nav ul li {
    border-bottom: 1px dashed #333; /* PX for Opera */
  }
  
  .left_nav ul:last-child li:last-child {
    border: none;
  }

  .left_nav ul li:first-child {
    
    background: rgb(50, 50, 50);
  }


  .container {
    display: table;
    width: 100%;
  }
  .main_content {
    height: 100%;
  }
  .f-nav-w {
  }
  /*====== Ignore section below ======*/
  /* Basic Style*/
  * {
    margin: 0;
    padding: 0;
  }
   .container {
    height: auto;
  }



/*profile*/
.app_fields {padding:1% 10px; font-weight: bold;}
.field-val {padding:0.5%;}
.submitted_field {background: #33FFA8 !important;
    padding:1% 10px;}
.orange {background:#FFE933;}
.section_ttl {font-size:24px;width:100%;background:black;color:white;padding:2% 0;}
.profile-i {margin-left:10%;}

/* Sign Up */
.create-user-body {background: radial-gradient(rgba(250,250,250,0.8),black) no-repeat;}
.create-msg {width:100%;text-align:center;font-size:20px;}

/*new customer form*/
#new-customer-form h1 {width:100%;text-align:center;}
#new-customer-form {width:100%;text-align:center;}
.new-customer-form p {width:100%;text-align:center;font-size:23px;}
#new-customer-form p.sub-txt {font-size:18px;text-transform:capitilize;width:70%;margin-left:15%;}
#sig-w {text-align:center;}

#submit, #clear, #confirm {
    width: 50%;
    margin: 25px 0 0 0;
    padding: 15px 0px;
    text-align: center;
    cursor: pointer;
    background: #1ebebe;
    border: none;
    color: white;}

#clear, #confirm {margin-left:25%;cursor:pointer;}
fieldset {width:80%;margin-left:10%;padding-top:3%;}
fieldset div {width:25%;float:left;}
/*signature*/
.wrapper {
 position: relative;width: 400px;height: 200px;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;
-ms-user-select: none;
}
.wrapper img {position:relative;left:285px;}
.signature-pad {border:1px solid black;position: absolute;left: 285px;top: 0;width:400px;height:200px;}

/*admin*/
.admin table {width:100%;}
.pointer {cursor:pointer;}
.pointer:hover {color:#1ebebe;transition:all 0.25s;}

/*CPANEL*/
header {width:100%;
    position:relative;background:rgba(50,50,50,1);}
header img {width:116px;height:40px;display:block;position:absolute;top:14px;left:60px;}
/* header div:nth-child(2),header div:nth-child(3) {position:absolute;background:black;color:white;top:12px;height:20px;
right:60px;padding:14px 40px;} */
header div:nth-child(2) a,header div:nth-child(3) a {text-decoration:none;color:white;}
header div:nth-child(2) {right:210px;}

header div {
    
    min-height:60px;
    height:10dvh;
}

.lNav,.rNav, .lNav_create_cc {float:left;}
.lNav {width:16%;background:rgba(50,50,50,1);min-height:1000px;padding-bottom:2%;}
.rNav {width:84%;background:rgba(230,230,230,1);height:auto;padding-bottom:2%;}
.lNav_create_cc  {width:16%;background:rgba(50,50,50,1);min-height:1200px;padding-bottom:2%;}

.l-list, .l-list-contract {width:94%;margin-bottom:2px;font-family:'proxima-bold';position:relative;
padding:19px 0px 19px 6%;cursor:pointer;font-size:14px;background:rgba(70,70,70,1);color:white;}

.l-list-contract img {display:block;position:absolute;top:20px;right:30px;}
.l-list-main img {display:block;position:absolute;top:20px;right:30px;}
.l-list img {display:block;position:absolute;top:20px;right:30px;}
.seriesUl {display:none;}
ul {list-style:none;}
ul.seriesUl li {cursor:pointer;padding-left:8%;padding-bottom:2%;cursor:pointer;font-size: 14px;
color:rgba(250,250,250,0.9);font-family: 'proxima-regular';width:92%;}
.r-nav-u {display:none;}
ul.seriesUl li.screen-sizes, ul.seriesUl li.color-list {padding:5px;width:80%;text-align:left;}
ul.seriesUl li.color-list {border:none;}
ul.seriesUl li.color-list img {width:20px;}

.frame-omega {width:86%;margin: 2% 0 0 7%;}
.frame-omega h1 {color:black;font-family:'proxima-light';}
.frame-i {width:100%;background:white;height:50px;position:relative;cursor:pointer;}
#imei-search-form {opacity:0;height:0px;position:absolute;width:100%;top:53px;display:none;}
.frame-head {background:rgba(200,200,200,1);width:98%;height:35px;padding:19px 0 0 2%;transition:all 0.6s;color:black;font-family:'proxima-bold';font-size:17px;}
.frame-head:hover {background:#1ebebe;}

.lsel,.rsel {width:70%;float:left;position:relative;}
.rsel {width:25%;padding-left:1%;}
.frame-i .lsel textarea {margin:9px 0 0 1%;width:100%;}
.frame-i .rsel button {width:50%;margin-left:25%;position:absolute;top:50px;
padding:15px 15px;text-align:center;cursor:pointer;
background:#1ebebe;border:none;color:white;}



.o,.m {color:#1ebebe;font-size:17px;font-family:'proxima-bold';margin-bottom:20px;}

.showcase {width:100%;background:white;height:600px;width:86%;margin:2% 0 0 7%;padding-bottom:3%;overflow-y:auto;}
.showcase h2 {padding:2% 0 0 2%;}
#payload {padding:1% 2% 0 2%}
table
{
border-collapse: collapse;
border-spacing: 0px;
}
table, th, td
{
padding: 0.5%;
border: 1px solid black;
}
td {width:300px;}

td {text-align:center;}
table#admin-user-view {width:100%;}
table#admin-user-view th {background:rgba(50,50,50,1);color:white;}
.tr-blue {background:#1ebebe;color:white;}

/*footer*/
p {font-size:17px;}
footer {width:100%;background:black;text-align:center;margin-top:3%;}
footer a {text-decoration:none;color:white;}
#core_footer {color:white;padding:10px 0;}
#core_footer p {font-size:13px;}

.secondary-report {position:fixed;top:0;width:50%;right:-1000px;background:rgba(30, 30, 30, 0.99);height:900px;
box-shadow: 10px 25px 25px rgba(50,50,50,0.5) 
}
.secondary-report h2 {padding-left:4%;color:white;}
#sec-payload {padding:4%;color:white;max-height:700px;overflow-y:auto;}
#sec-payload table, #sec-payload th, #sec-payload td
{
padding: 4%;
border: 1px solid white;
}
.td-model {cursor:pointer;}
.td-model:hover {color:#1ebebe;}
.closeX-w {width:100%;position:relative;}
.closeX {position:absolute;top:50px;right:100px;z-index:99;color:white;cursor:pointer;}

.report-by {position:absolute;top:110px;right:20%;color:white;opacity:0;}
.report-by ul li {padding:20px 25px;border:1px solid white;color:white;cursor:pointer;}
.report-by ul li:first-child {border:none;padding:25px 25px;background:#1ebebe; }
.report-by ul li:hover {background:#1ebebe;}
#suggestions ul li, #city-suggestions ul li{color:white;}

.payload-fl {float:left;width:50%;}
.payload-fl table {width:100%;}
.payload-fl div {width:80%;margin-left:10%;color:white;background:#1ebebe;text-align:center;padding:2% 0;margin-bottom:3%;cursor:pointer;}

/* Date Range */
.dateRange select {float:left;}
#start-month,#end-month {width:30%;}
#start-day,#end-day {width:20%;}
#start-year,#end-year {width:30%;}
ul.act-orders {margin-left:-30px;}
.submit-act-orders {background:#1ebebe;color:white;padding:3% 5%;width:50%;text-align:center;transition:all 0.3s;}
.submit-act-orders:hover {background:rgba(250,200,0,0.8);}

.activationsByCustomerCode span {display:inline-block;width:200px;text-align:center;font-size:19px;}
.activationsByCustomerCode-w ul {margin-left:-40px;display:none;opacity:0;}
.activationsByCustomerCode-w span {display:inline-block;width:200px;text-align:center;font-size:19px;}
.activationsByCustomerCode span.model, .activationsByCustomerCode-w span.model {width:400px;text-align:left;}
.activationsByCustomerCode-w li span {display:inline-block;width:200px;text-align:center;font-size:19px;}
.activationsByCustomerCode-w li span.subgroup-ttl {text-align:left;width:400px;}
.activationsByCustomerCode span.model, .activationsByCustomerCode-w span.model {width:400px;text-align:left;padding-left:7px;}
.act-back {background:#1ebebe;color:white;}
.model-ttl {height:35px;background:rgba(200,200,200,0.5);color:white;}
.act-back {background:#1ebebe;color:white;padding:1% 0;margin:10px 0;cursor:pointer;transition:all 0.6s;}
.act-back:hover {background:silver;}
.countAdj {padding-left:9px;}
.subsetTot {color:rgba(200,200,200,0.6)}
.values {cursor:pointer;}
.screen-sizes a {text-decoration:none;color:white;}
.heatMap-w {margin-left:-40px;}

.navList-w a {text-decoration:none;color:white;}
#c_idKey span {text-transform:uppercase;}

/* Model loop */
.lNav-series,.rNav-series {float:left;}
.lNav-series {width:10%;background:rgba(50,50,50,1);min-height:1000px;padding-bottom:2%;}
.rNav-series {width:90%;background:rgba(230,230,230,1);height:auto;padding-bottom:2%;}
.showcase-series {width:100%;background:white;min-height:600px;margin:2% 0 0 0;padding-bottom:3%;overflow-y:auto;}
.showcase-series h2 {padding:0 0 0 2%;}
.model-w {float: left;width: 33%;margin: 2% 0;text-align: center; min-height: 410px;position:relative;}
.forecast-device {position:absolute;top:-20px;right:90px;text-align:left;cursor:pointer;}
.device-status {position:absolute;top:-20px;left:90px;text-align:right;}
.model-w figure {min-width:350px;position:relative;}
.model-w .table-w {display:none;}
#forecastSlide {width:80%;min-height:900px;background-color:rgba(50,50,50,1);z-index:99999;position:fixed;top:0px;right:-1990px;color:white;
overflow-y:auto;}
#forecast-map {width:100%;}
#forecastSlide h1 {width:90%;margin-left:5%;}

table.slideout-table {width:90%;margin:3% 0 0 5%;}
table.slideout-table tr {width:100%;}
table.slideout-table, table.slideout-table th, table.slideout-table td {padding:8px 0;}
table.slideout-table td {padding:8px;width:150px;} 
table.slideout-table td.variant-desc-td {width:250px;}
table.slideout-table th:nth-child(odd) {background:#1ebebe;}
table.slideout-table td:nth-child(odd) {background:white;color:black;}
.slideout-title {width:90%;margin-left:5%;}
.variant-w input {width:95%;margin-left:2.5%;}
.slideout-specs-w {margin-top:35px;}
.slideout-img {float:left;width:50%;text-align:center;}
.slideout-specs {float:left;width:50%;text-align:left;}
#seriesSelections li {padding:5px 0;}
a.submit-forecast {text-decoration:none;padding:6px 0;width:250px;text-align:center;background:#1ebebe;color:white;display:block;}
a.submit-forecast:hover {background:gray;}
a.close-forecast {text-decoration:none;padding:6px 0;width:250px;text-align:center;background:black;color:white;display:block;}
a.close-forecast:hover {background:gray;}
/*create user*/
.form-group {width:100%;text-align:center;}
.form-group label {display:block;}

.form-group input, select.create_cc {width:50%; 
    padding: 0px;}
select.create_cc {cursor:pointer;}
.form-group input {height:40px;border:1px solid silver;}
.form-group label {font-size:20px;padding:20px 0;}
.create_cc h2 {width:100%;text-align:center;padding-top:25px;}
#create-w {background:white;width:86%;margin:2% 0 0 7%;padding-bottom:3%;}
.form-group button {width:200px;background:#1ebebe;color:white;text-align:center;padding:10px 0;border:none;cursor:pointer;}
.create_cc_sbm {padding:20px 0;}
.create_cc_sbm a {text-decoration:none;color:black;}
#signature_check {border:1px solid black;width:150px;text-align:left;padding-left:0px;margin-left:0px;}

/*admin*/
.adminCP h2 span, .adminCP h2 {font-size:13px;}


@media (max-width: 1320px) { 
    
nav-w {
    width: 100%;
    height: 10dvh;
    min-height:60px;
    position: relative;
    background: rgba(50,50,50,1);
}
.nav-i {width:1026px;text-align:left;margin:0 auto;padding-top:12px;position:relative;}
.nav-i a {display:block;position:absolute;top:20px;right:30px;text-decoration:none;color:white;}

.f-nav-w {
    width: 100%;
    height: 10dvh;
    position: relative;
    background: rgba(50,50,50,1);
    /* margin-top:5%; */
    }
.f-nav-i {width:1026px;margin:0 auto;padding-top:12px;position:relative;text-align:center;color:white;}
.f-nav-i a {text-decoration:none;color:white;}
.container {width:100%;}
.left_nav {width:19vw;float:left;}
.main_content {

height:90dvh;
  padding-top: 2vh;
  padding-left: 5vw;
  padding-right:5vw;
  padding-bottom:5vh;
  /* padding:5vw;padding-bottom:10dvh; */
  background-color: aliceblue;float:left;width:100vw;display:block;}
.left_nav {text-align:left; overflow: auto;}
.left_nav ul {margin-left:0px;}
.left_nav ul li a { font-size:1em;padding:2% 0;padding-left:30px;text-decoration:none;color:white;display:block;}
.left_nav ul li span a {font-size:1.5em;padding:15px 0;display:block;color:white;border-bottom:1px solid white;margin-bottom:15px;text-align: center;}
p.seperator {width:100%;text-align:center;padding:2% 0;background:black;color:white;}

.left_nav ul li {
    border-bottom: 1px dashed #333; /* PX for Opera */
  }
  
  .left_nav ul:last-child li:last-child {
    border: none;
  }

  .left_nav ul li:first-child {
    
    background: rgb(50, 50, 50);
  }
  
td {text-align:center;}
/*profile*/
.app_fields {padding:1% 0;}
.field-val {padding:0.5%;}
.submitted_field {background: #33FFA8 !important;}
.section_ttl {font-size:24px;width:100%;background:black;color:white;padding:2% 0;}
.profile-i {width:80%;margin-left:10%;}

/* Sign Up */
.create-user-body {background: radial-gradient(rgba(250,250,250,0.8),black) no-repeat;}
.create-msg {width:100%;text-align:center;font-size:20px;}

/*new customer form*/
#new-customer-form h1 {width:100%;text-align:center;}
#new-customer-form {width:100%;text-align:center;}
.new-customer-form p {width:100%;text-align:center;font-size:23px;}
#new-customer-form p.sub-txt {font-size:18px;text-transform:capitalize;width:70%;margin-left:15%;}
#sig-w {text-align:center;}

#submit, #clear, #confirm {
    width: 50%;
    margin: 25px 0 0 0;
    padding: 15px 0px;
    text-align: center;
    cursor: pointer;
    background: #1ebebe;
    border: none;
    color: white;}

#clear, #confirm {margin-left:25%;cursor:pointer;}
fieldset {width:80%;margin-left:10%;padding-top:3%;}
fieldset div {width:25%;float:left;}
/*signature*/
.wrapper {
 position: relative;width: 400px;height: 200px;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;
-ms-user-select: none;
}
.wrapper img {position:relative;left:285px;}
.signature-pad {border:1px solid black;position: absolute;left: 285px;top: 0;width:400px;height:200px;}

/*admin*/
.admin table {width:100%;}
.pointer {cursor:pointer;}
.pointer:hover {color:#1ebebe;transition:all 0.25s;}


}

@media (max-width: 3026px) { 
.nav-w {
    width: 100%;
    height: 10dvh;
    min-height:60px;
    position: relative;
    background: rgba(50,50,50,1);
    display:none;
}
.nav-i {width:799px;text-align:left;margin:0 auto;padding-top:12px;position:relative;}
.nav-i a {display:block;position:absolute;top:20px;right:30px;text-decoration:none;color:white;}

.f-nav-w {width: 100%;
    
    height: 10dvh;
    position: relative;
    background: rgba(50,50,50,1);
   }
.f-nav-i {width:799px;margin:0 auto;padding-top:12px;position:relative;text-align:center;color:white;}
.f-nav-i a {text-decoration:none;color:white;}
.container {width:100%;}
.menu_button {
    display:block;
}
.menu_button_collapsed {
    display:none;
}
.left_nav {width:100%;float:none; 
    display:none;
} 
header{display:block;}
.main_content {height: 75vh;

height:90dvh;
  padding-top: 2vh;
  padding-left: 5vw;
  padding-right:5vw;
  padding-bottom:5vh;
  /* padding:5vw;padding-bottom:10dvh; */
  background-color: aliceblue;float:left;width:100vw;display:block;}
.main_content h2 {font-size:1.3em;padding:0; text-align: center}
.left_nav {text-align:center;}
.left_nav ul {margin-left:0px;margin-left:-40px;}
.left_nav ul li a {text-decoration:none;color:black;font-size:22px;padding:1% 0;display:block;}
.left_nav ul li span a {font-size:27px;padding:15px 0;display:block;border-bottom:1px solid black;margin-bottom:15px;}
p.seperator {width:100%;text-align:center;padding:2% 0;background:black;color:white;}


/*profile*/
.app_fields {padding:1% 0;}
.field-val {padding:0.5%;}
.submitted_field {background: #33FFA8 !important;}
.section_ttl {font-size:24px;width:100%;background:black;color:white;padding:2% 0;}
.profile-i {width:80%;margin-left:10%;}
.mob-tbl {display:none;}
td {text-align:center;}
table, th, td {padding:2% 0;}
/* Sign Up */
.create-user-body {background: radial-gradient(rgba(250,250,250,0.8),black) no-repeat;}
.create-msg {width:100%;text-align:center;font-size:20px;}

/*new customer form*/
#new-customer-form h1 {width:100%;text-align:center;}
#new-customer-form {width:100%;text-align:center;}
.new-customer-form p {width:100%;text-align:center;font-size:23px;}
#new-customer-form p.sub-txt {font-size:18px;text-transform:capitalize;width:70%;margin-left:15%;}
#sig-w {text-align:center;}

#submit, #clear, #confirm {
    width: 50%;
    margin: 25px 0 0 0;
    padding: 15px 0px;
    text-align: center;
    cursor: pointer;
    background: #1ebebe;
    border: none;
    color: white;}

#clear, #confirm {margin-left:25%;cursor:pointer;}
fieldset {width:80%;margin-left:10%;padding-top:3%;}
fieldset div {width:25%;float:left;}
/*signature*/
.wrapper {
 position: relative;width: 400px;height: 200px;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;
-ms-user-select: none;
}
.wrapper img {position:relative;left:285px;}
.signature-pad {border:1px solid black;position: absolute;left: 285px;top: 0;width:400px;height:200px;}

/*admin*/
.admin table {width:100%;}
.pointer {cursor:pointer;}
.pointer:hover {color:#1ebebe;transition:all 0.25s;}


}


@media (max-width: 797px) {
    
    .nav-w {
    width: 100%;
    height: 10dvh;
    min-height:60px;
    position: relative;
    background: rgba(50,50,50,1);
    display:none;
}
header{display:block;}
.nav-i {width:400px;text-align:left;margin:0 auto;padding-top:12px;position:relative;}
.nav-i button {display:block;position:absolute;top:20px;right:10px;text-decoration:none;color:black;}

.f-nav-w {width: 100%;
    
    height: 10dvh;
    position: relative;
    background: rgba(50,50,50,1);
    }
.f-nav-i {width:400px;margin:0 auto;padding-top:12px;position:relative;text-align:center;color:white;}
.f-nav-i a {text-decoration:none;color:white;}
.container {width:100%;}
.menu_button {
    display:block;
}
.menu_button_collapsed {
    display:none;
}
.left_nav {width:100%;float:none; 
     display:none;
} 
.tablespan {
width:100%;
}
.main_content {height: 80dvh;
height:90dvh;
  padding-top: 2vh;
  padding-left: 5vw;
  padding-right:5vw;
  padding-bottom:5vh;
  /* padding: 5vw;padding-bottom:10dvh; */
  background-color: aliceblue;float:left;width:100vw;display:block;}
.left_nav {text-align:center;}
.left_nav ul {margin-left:0px;margin-left:-40px;}
.left_nav ul li a {text-decoration:none;color:black;font-size:22px;padding:1% 0;display:block;}
.left_nav ul li span a {font-size:27px;padding:15px 0;display:block;border-bottom:1px solid black;margin-bottom:15px;}
p.seperator {width:100%;text-align:center;padding:2% 0;background:black;color:white;}


/*profile*/
.app_fields {padding:1% 0;}
.field-val {padding:0.5%;}
.submitted_field {background: #33FFA8 !important;}
.section_ttl {font-size:24px;width:100%;background:black;color:white;padding:2% 0;}
.profile-i {width:80%;margin-left:10%;}


/* Sign Up */
.create-user-body {background: radial-gradient(rgba(250,250,250,0.8),black) no-repeat;}
.create-msg {width:100%;text-align:center;font-size:20px;}

/*new customer form*/
#new-customer-form h1 {width:100%;text-align:center;}
#new-customer-form {width:100%;text-align:center;}
.new-customer-form p {width:100%;text-align:center;font-size:23px;}
#new-customer-form p.sub-txt {font-size:18px;text-transform:capitalize;width:70%;margin-left:15%;}
#sig-w {text-align:center;}

#submit, #clear, #confirm {
    width: 50%;
    margin: 25px 0 0 0;
    padding: 15px 0px;
    text-align: center;
    cursor: pointer;
    background: #1ebebe;
    border: none;
    color: white;}

#clear, #confirm {margin-left:25%;cursor:pointer;}
fieldset {width:80%;margin-left:10%;padding-top:3%;}
fieldset div {width:25%;float:left;}
/*signature*/
.wrapper {
 position: relative;width: 400px;height: 200px;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;
-ms-user-select: none;
}
.wrapper img {position:relative;left:285px;}
.signature-pad {border:1px solid black;position: absolute;left: 285px;top: 0;width:400px;height:200px;}

/*admin*/
.admin table {width:100%;}
.pointer {cursor:pointer;}
.pointer:hover {color:#1ebebe;transition:all 0.25s;}
     
}

@media (max-width: 600px) {
}













.myButton2 {
  width:100% !important;
-moz-box-shadow: 3px 4px 0px 0px #7a218a;
-webkit-box-shadow: 3px 4px 0px 0px #7a218a;
box-shadow: 3px 4px 0px 0px #7a218a;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24437',GradientType=0);
background-color:hsl(271, 73%, 45%);
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #9018d0;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:7px 25px;
text-decoration:none;
text-shadow:0px 1px 0px #810e05;
}



.myButton {
  width:100% !important;
-moz-box-shadow: 3px 4px 0px 0px #8a2a21;
-webkit-box-shadow: 3px 4px 0px 0px #8a2a21;
box-shadow: 3px 4px 0px 0px #8a2a21;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24437));
background:-moz-linear-gradient(top, #c62d1f 5%, #f24437 100%);
background:-webkit-linear-gradient(top, #c62d1f 5%, #f24437 100%);
background:-o-linear-gradient(top, #c62d1f 5%, #f24437 100%);
background:-ms-linear-gradient(top, #c62d1f 5%, #f24437 100%);
background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24437',GradientType=0);
background-color:#c62d1f;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #d02718;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:7px 25px;
text-decoration:none;
text-shadow:0px 1px 0px #810e05;
}
.scrollbar{
  overflow:auto !important;
}

.scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background: #f8f8f8;  /* or add it to the track */
}

.scrollbar::-webkit-scrollbar-thumb {
  background: #e1e1e1; 
}

.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24437), color-stop(1, #c62d1f));
background:-moz-linear-gradient(top, #f24437 5%, #c62d1f 100%);
background:-webkit-linear-gradient(top, #f24437 5%, #c62d1f 100%);
background:-o-linear-gradient(top, #f24437 5%, #c62d1f 100%);
background:-ms-linear-gradient(top, #f24437 5%, #c62d1f 100%);
background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24437', endColorstr='#c62d1f',GradientType=0);
background-color:#f24437;
}
.myButton:active {
position:relative;
top:1px;
}

.myButtong {
  width: 100% !important;
-moz-box-shadow: 3px 4px 0px 0px #3dc21b;
-webkit-box-shadow: 3px 4px 0px 0px #3dc21b;
box-shadow: 3px 4px 0px 0px #3dc21b;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #44c767), color-stop(1, #5cbf2a));
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#44c767', endColorstr='#5cbf2a',GradientType=0);
background-color:#44c767;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:7px 25px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
button.myButtong:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cbf2a', endColorstr='#44c767',GradientType=0);
background-color:#5cbf2a;
}
button.myButtong:active {
position:relative;
top:1px;
}