@charset "UTF-8"; 
/* CSS Document */ 
/* z-Index Layers	Overlay Navigation - 99999	Search Navigation -  99998  	Header - 99997    search_form---*/

/* Type Face --------------------------------------------------------------------*/ 

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:500italic,400italic,100,300);
@import url(https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;400;600&display=swap);
@font-face {
 font-family: 'subpro2D-Regular';
 src: url('../fonts/subpro2D-Regular.eot');
 src: url('../fonts/subpro2D-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/subpro2D-Regular.svg#subpro2D-Regular') format('svg'), url('../fonts/subpro2D-Regular.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
} 

/* Global Vailues --------------------------------------------------------------------*/ 

html {
 height: 100%;
}

body {
 background-color: #f1f1f1;
 padding: 0;
 margin: 0;
 height: 100%;
}

textarea, input, button, submit {
 border: none;
 outline: none;
}

input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus input:-webkit-autofill, 
textarea:-webkit-autofill, 
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, 
select:-webkit-autofill, select:-webkit-autofill:hover, 
select:-webkit-autofill:focus {
 border: none !important;
 -webkit-text-fill-color: inherit !important;
 -webkit-box-shadow: 0 0 0px 1000px #ccc inset;
 box-shadow: 0 0 0px 1000px #ccc inset;
 transition: background-color 5000s ease-in-out 0s;
} 

/*  Correct Colors -------------------- */ /*  var(--subpro);  */
:root {
 --approve: #76ff03;
 --approvehover: #b0ff57;
 --approvetxt: ;
 --caution: #ff9500;
 --cautionhover: #ffaa00;
 --cautiontxt: ;
 --highlight: #b0ff57;
 --highlighthover: #9BE448;
 --highlighttxt: ;
 --subpro: #08f;
 --subprohover: #3BB0FF;
 --subprotxt: #fff;
 --shipping: #ce93d8;
 --shippinghover: ;
 --shippingtxt: #4a148c;
 --shipped: #5000CC;
 --subdue: #666;
 --subduehover: #888;
 --warningLate: #ffb6b6; /*chage late orders index*/
 --warninghoverLate: #ff9696;
 --warningtxtLate: #fff;
 --warning: #ff0000;
 --warninghover: #ff4646;
 --warningtxt: #fff;
} 

/* Google Icons --------------------------------------------------------------------*/ 

.material-icons.LogOut {
 font-size: 16px;
 vertical-align: bottom;
 margin-right: 3px;
 margin-bottom: -1px;
}
.material-icons.md-16 {
 font-size: 16px;
 vertical-align: bottom;
 margin-right: 3px;
}
.material-icons.md-20 {
 font-size: 20px;
 vertical-align: bottom;
}
.material-icons.md-22 {
 font-size: 22px;
 vertical-align: bottom;
}
.material-icons.md-landing {
 font-size: 20px;
 vertical-align: bottom;
} 

/* Buttons --------------------------------------------------------------------*/ 

.jobbtn_default {
 background-color: var(--subpro);
 color: #FFF;
 font-family: 'Lato';
 font-size: 10px;
 font-weight: 700;
 padding: 10px 20px;
 text-transform: uppercase;
}

.jobbtn_default a {
  color: white;
  text-decoration: none;
}
.jb_setwidth {
 width: 200px;
}
.jb_setwidthlrg {
 width: 400px;
}
.jb_approve {
 color: #424242;
 background-color: var(--highlight);
}
.jb_approve:hover {
 background-color: var(--highlighthover);
}
.jb_caution {
  color: #424242;
  background-color: var(--caution);
}
 .jb_caution:hover {
  background-color: var(--cautionhover);
}
.jb_change {
 background-color: var(--warning);
}
.jb_change:hover {
 background-color: var(--warninghover);
}
.jb_cancel {
 background-color: var(--warning);
}
.jb_cancel:hover {
 background-color: var(--warninghover);
}
.jb_subdue {
 background-color: var(--subdue);
}
.jb_subdue:hover {
 background-color: var(--subduehover);
}
.jb_subpro {
 color: #fff;
 background-color: var(--subpro);
}
.jb_subpro:hover {
 background-color: var(--subprohover);
}
.jb_blank {
 color: #222;
 background-color: transparent;
}
.jb_blank:hover {
 color: #333;
}
.filter_active {
 color: var(--subpro);
} 

/* Breakpoint Phone 767 -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 

@media screen and (max-width: 767px), only screen and (min--moz-device-pixel-ratio: 2) and 
(max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and 
(max-width: 767px), only screen and (min-device-pixel-ratio: 2) and 
(max-width: 767px), only screen and (min-resolution: 192dpi) and 
(max-width: 767px), only screen and (min-resolution: 2dppx) and 
(max-width: 767px) {
  
 .jobbtn_default {
  font-size: 90%;
  font-weight: 700;
  margin: 1px auto;
  padding: 15px 25px;
  width: 95%;
 }
 .material-icons.LogOut {
  font-size: 160%;
  margin-bottom: -1px;
 }
 .material-icons.md-16 {
  font-size: 160%;
  margin-bottom: -2px;
 }
 .material-icons.md-20 {
  font-size: 90%;
 }
 .material-icons.md-22 {
  font-size: 200%;
 }
 .material-icons.md-landing {
  font-size: 20px;
 }
} 

/*  Mobile End  */ /* New Site Head Menu --------------------------------------------------------------------*/ 

#sitehead_headmenu {
 background: #222527;
 position: fixed;
 margin: 0;
 height: 35px;
 width: 100%;
 z-index: 99997;
}
.login_status {
 color: #FFF;
 font-family: 'Lato';
 font-size: 11px;
 position: fixed;
 right: 12px;
 top: 9px;
}
.login_status a {
 color: #FFF;
 text-decoration: none;
}
.sitehead_spicon {
 right: 50px;
 position: absolute;
 top: 9px;
 width: 75px;
 z-index: 99997;
}
.sitehead_filter {
 position: absolute;
 color: #fff;
 right: 136px;
 top: 5px;
 z-index: 99997;
}
.sitehead_filter a {
 color: #fff;
 text-decoration: none;
}

.sitehead_apifilter {
  position: absolute;
  color: #fff;
  right: 166px;
  top: 5px;
  z-index: 99997;
 }
 .sitehead_apifilter a {
  color: #fff;
  text-decoration: none;
 }

.no_search {
 left: 60px;
} 


/* Breakpoint Phone 767 -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 
@media screen and (max-width: 767px), only screen and (min--moz-device-pixel-ratio: 2) and 
(max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and 
(max-width: 767px), only screen and (min-device-pixel-ratio: 2) and 
(max-width: 767px), only screen and (min-resolution: 192dpi) and 
(max-width: 767px), only screen and (min-resolution: 2dppx) and 
(max-width: 767px) {

 .login_status {
  font-size: 85%;
  right: 5%;
  top: 17px;
 }
 #sitehead_headmenu {
  position: fixed;
  height: 50px;
  z-index: 99998;
 }
 .sitehead_spicon {
  left: 50%;
  margin-left: -50px;
  top: 15px;
  width: 100px;
 }
 .sitehead_filter {
  right: 75px;
  top: 16px;
 }

 .sitehead_apifilter {
  right: 130px;
  top: 16px;
 }

} /*  Mobile End  */ 

/* NEW Search Form --------------------------------------------------------------------*/ 
.search_wrapper {
 background-color: #D5DAE1;
 display: inline-block;
 margin: 0;
 padding: 0;
 position: fixed;
 text-align: right;
 left: 40px;
 width: 180px;
 z-index: 99997;
}
.search_form {
 background-color: #D5DAE1;
 border: 0px;
 color: #222;
 display: inline-block;
 font-family: 'Lato';
 font-weight: 400;
 font-size: 12px;
 height: 35px;
 margin: 0;
 outline: 0;
 padding: 0 0 0 0;
 text-decoration: none;
 width: 95%;
 -webkit-appearance: none;
}
.searchgo {
 background-color: var(--subpro);
 background-image: linear-gradient(var(--subpro), -subproblueLt);
 border: 0px;
 border-radius: 0 !important;
 color: #FFF;
 display: none;
 font-family: 'Lato';
 font-weight: 400;
 font-size: 12px;
 margin: 0;
 padding: 0;
 visibility: hidden;
}
.advansch_wrapper {
 color: #fff;
 font-size: 11px;
 left: 235px;
 position: fixed;
 text-transform: uppercase;
 top: 11px;
 z-index: 99997;
}
.advansch_wrapper a {
 color: #fff;
 text-decoration: none;
}
.advansch_wrapper a:hover {
 color: var(--subpro);
} 

/* Breakpoint Phone 767 -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 
@media screen and (max-width: 767px), only screen and (min--moz-device-pixel-ratio: 2) and 
(max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and 
(max-width: 767px), only screen and (min-device-pixel-ratio: 2) and 
(max-width: 767px), only screen and (min-resolution: 192dpi) and 
(max-width: 767px), only screen and (min-resolution: 2dppx) and 
(max-width: 767px) {

 .search_wrapper {
  background-color: #D5DAE1;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 250px;
  width: 100%;
  z-index: 1059;
 }
 .search_min {
  top: 170px;
 }
 .search_remove {
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: -160px;
  width: 100%;
 }
 .search_form {
  background-color: #D5DAE1;
  display: inline;
  float: left;
  font-size: 16px;
  margin-left: 20px;
  padding: 30px 0 26px;
  width: 40%;
 }
 .searchgo {
  display: inline;
  font-size: 105%;
  margin: 0;
  padding: 20px 35px;
  visibility: visible;
 }
 .advansch_wrapper {
  display: none;
 }
} /*  Mobile End  */ 


/* New Site Head Dash --------------------------------------------------------------------*/ 
#sitehead_wrapper {
 background: linear-gradient(to bottom right, #000 0%, #151D2D 60%);
 height: 170px;
 width: 100%;
 z-index: 99996;
}
#sitehead_wrappermin {
 background: linear-gradient(to bottom right, #000 0%, #151D2D 60%);
 height: 170px;
 width: 100%;
 z-index: 99996;
}
#sitehead_wrapperminns {
 background: linear-gradient(to bottom right, #000 0%, #151D2D 60%);
 height: 170px;
 width: 100%;
 z-index: 99996;
}
#sitehead_wrapperwt {
 background-color: #f1f1f1;
 height: 130px;
 width: 100%;
 z-index: 99996;
}
.sitehead_container {
 margin: 0 auto;
 max-width: 900px;
 padding-top: 95px;
}
.sitehead_location {
 color: #FFF;
 display: inline-block;
 font-family: 'Nunito Sans';
 font-size: 42px;
 font-weight: 400;
 line-height: 26px;
 margin: 0;
 padding: 0;
 text-align: left;
 vertical-align: top;
 width: 70%;
}
.sitehead_locationwt {
 color: #222;
 display: inline-block;
 font-family: 'Nunito Sans';
 font-size: 36px;
 font-weight: 400;
 line-height: 26px;
 margin: 0;
 padding: 0;
 text-align: center;
 vertical-align: top;
 width: 100%;
}
.sitehead_customer {
 color: #FFF;
 display: inline-block;
 font-family: 'Roboto';
 font-size: 33px;
 font-weight: 300;
 line-height: 30px;
 margin: 0;
 padding-left: 15px;
 text-align: left;
 vertical-align: top;
 width: 70%;
}
.sitehead_locationtotal {
 color: #FFF;
 display: block;
 font-family: 'Lato';
 padding: 0;
 margin: 0;
 width: 100%;
}
.sitehead_locationtotal_wrapper {
 color: #FFF;
 display: inline-block;
 font-family: 'Lato';
 font-size: 50px;
 font-weight: 300;
 line-height: 29px;
 margin: 0;
 padding: 0;
 text-align: right;
 vertical-align: top;
 width: 29%;
}
.sitehead_piecesin {
 color: #555;
 display: block;
 font-family: 'Lato';
 font-size: 10px;
 font-weight: 500;
 padding: 0;
 margin: 0;
 width: 100%;
}
.sitehead_schedule {
 color: #FFF;
 display: block;
 font-family: 'Lato';
 font-size: 11px;
 font-weight: 500;
}
.sitehead_schedule a {
 color: #FFF;
 text-decoration: none;
}
.sitehead_schedule a:hover {
 color: #09D;
} 

/* Breakpoint PC Desktop -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 

@media only screen and (max-width : 1000px) {
 .sitehead_container {
  flex-direction: row;
  width: 90%;
 }
 .sitehead_locationtotal {
  font-size: 40px;
 }
 .sitehead_location {
  font-size: 34px;
  font-weight: 400;
  line-height: 23px;
  width: 70%;
 }
 .sitehead_customer {
  font-size: 30px;
  font-weight: 400;
  line-height: 23px;
  width: 70%;
 }
} 

/* Breakpoint Phone 767 -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 
@media screen and (max-width: 767px), only screen and 
(min--moz-device-pixel-ratio: 2) and 
(max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and 
(max-width: 767px), only screen and (min-device-pixel-ratio: 2) and 
(max-width: 767px), only screen and (min-resolution: 192dpi) and 
(max-width: 767px), only screen and (min-resolution: 2dppx) and 
(max-width: 767px) {

 #sitehead_wrapper {
  background: linear-gradient(to bottom right, #000 0%, #001727 60%);
  height: 310px;
 }
 .sitehead_container {
  max-width: 100%;
  padding-top: 90px;
 }
 #sitehead_wrappermin {
  height: 230px;
 }
 #sitehead_wrapperminns {
  height: 160px;
 }
 #sitehead_wrapperwt {
  height: 150px;
 }
 .sitehead_location {
  display: block;
  font-size: 220%;
  text-align: center;
  line-height: normal;
  width: 100%;
 }
 .sitehead_locationwt {
  display: block;
  font-size: 220%;
  text-align: center;
  line-height: normal;
  width: 100%;
 }
 .sitehead_customer {
  display: block;
  font-size: 150%;
  text-align: center;
  line-height: normal;
  width: 100%;
 }
 .sitehead_schedule {
  display: none;
  font-size: 0;
 }
 .sitehead_locationtotal {
  font-size: 120%;
  line-height: 50px;
  margin-top: 25px;
  text-align: center;
  width: 100%;
 }
 .sitehead_locationtotal_wrapper {
  text-align: center;
  width: 100%;
 }
 .sitehead_piecesin {
  color: #888;
  font-size: 25%;
 }
} /*  Mobile End  */ 


/* Job Panels ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 
.controls {
 border: 0px;
 background-color: #F5F5F5;
 margin-bottom: 0;
}
.collapse-group {
 border: 0px;
 margin: 20px auto 0;
 max-width: 900px;
 padding: 0;
 width: 90%;
}
.panel {
 border: 0px;
 margin: 0;
 padding: 0;
 background-color: transparent;
}
.panel-body {
 border: 0;
 margin: 0 0 10px;
 padding: 0 0 12px;
 display: flex;
 justify-content: center;
 flex-direction: column;
}

.panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 0 0 5px 5px;
}
.panel > .panel-heading {
 background-image: none;
 background-color: #424242;
 border-radius: 0;
 padding: 10px 15px;
 color: #fff;
}
.panel > .panel-heading a {
 text-decoration: none;
}
.panel-title .trigger:before {
 text-decoration: none;
 content: '\E5CF';
 font-family: 'Material Icons';
 float: right;
 vertical-align: text-bottom;
 margin-top: 3px;
}
.panel-title .trigger.collapsed:before {
 content: '\E5CE';
}


/* Job View Option -------------*/ 
.panelJV {
 border: 0px;
 margin: 0;
 padding: 0;
 background-color: white;
 border: 1px solid #ddd;
 border-radius: 0;
}
.panel-headingJV {
 border-bottom: 1px solid #ddd;
 background-image: none;
 background-color: white;
 border-radius: 0;
 padding: 10px 15px;
 color: #333;
}
.panel-headingJV a {
 text-decoration: none;
} 

/* Breakpoint Mobile - Phone ------------------------------------------------------------*/ 
@media screen and 
(max-width: 767px), only screen and (min--moz-device-pixel-ratio: 2) and 
(max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and 
(max-width: 767px), only screen and (min-device-pixel-ratio: 2) and 
(max-width: 767px), only screen and (min-resolution: 192dpi) and 
(max-width: 767px), only screen and (min-resolution: 2dppx) and 
(max-width: 767px) {

 .collapse-group {
  width: 95%;
 }
 .panel-title {
  font-size: 110%;
  font-weight: 300;
 }
 .panel > .panel-heading {
  padding: 15px;
 }

 .panel-title .trigger:before {
  margin-top: 0;
 }

} /*  Mobile End  */ 


/* Order Lists all pages -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* No Orders In Default   ---------------------------------------------*/
.joblist_none {
 color: #444;
 font-size: 13px;
 font-weight: 500;
 margin: 0 auto;
 padding: 20px 0;
 text-align: center;
 width: 100%;
}

.joblist_none span {
 font-size: 11px;
}

.joblist_cancel {
 margin: 0 auto;
 max-width: 900px;
 padding: 10px 0 20px;
 text-align: center;
 width: 100%;
}

.joblist_fullWidth {
 margin: 0 auto;
 max-width: 900px;
 padding: 10px 0 20px;
 text-align: center;
 width: 100%;
}

.joblist_cancelbtn {
 width: 100%;
} 

/* Dash View - Due Date Spacer  ----------------------------------*/ 

.joblist_duedate {
 background-color: #555;
 color: white;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 2px;
 padding: 15px 0 20px 25px;`
 text-align: left;
 text-transform: uppercase;
 margin: 0;
}

.joblist_dayBreak {
  height: 45px;
 } 


/* Dash View - Column Each ----------------------------------------*/ 

.joblist {
 display: flex;
 font-size: 10px;
 text-transform: uppercase;
font-weight: 700;
 flex-wrap: nowrap;
 flex-direction: row;
 align-items: center;
 margin: 20 auto;
 padding: 15px 0;
 width: 100%;
}


.joblist a {
 text-decoration: none;
}
.joblist:hover {
 text-decoration: none;
}

.joblist_first {
 min-width: 95px;
 text-align: center;
 font-weight: 700;
}
.joblist_col2 {
 display: flex;
 flex-grow: 1;
 flex-wrap: nowrap;
 overflow: hidden;
 align-content: flex-start;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.joblist_col3 {
 min-width: 150px;
 overflow: hidden;
 text-align: left;
 text-overflow: ellipsis;
}
.joblist_col4 {
 min-width: 125px;
 overflow: hidden;
 text-align: left;
 text-overflow: ellipsis;
}
.joblist_col5 {
 max-width: 290px;
 overflow: hidden;
 text-align: left;
 text-overflow: ellipsis;
}

.joblist_col6 {
 width: 35px;
 text-align: center;
}

.joblist_last {
 text-align: center;
 min-width: 110px;
}

.joblist_hdbrk {
 display: none;
} 


/* Approvals / Production Notes - Column Each ----------------*/ 
.jbvw {
 display: flex;
 font-size: 11px;
 flex-wrap: nowrap;
 flex-direction: row;
 align-items: center;
 margin: 10px auto 0;
 padding: 14px 0;
 width: 95%;
}

.jbvw a {
 text-decoration: none;
}

.jbvw:hover {
 text-decoration: none;
}

.jbvw_first {
 align-self: center;
 min-width: 80px;
 text-align: center;
}
.jbvw_col2 {
 display: flex;
 flex-direction: row;
 flex-grow: 1;
 min-width: 1;
 text-align: left;
}
.jbvw_col2dsk {
 visibility: visible;
}
.jbvw_col3 {
 align-self: center;
 flex-basis: 10%;
 min-width: 110px;
 overflow: hidden;
 text-align: center;
 text-overflow: ellipsis;
}
.jbvw_col4 {
 align-self: center;
 flex-basis: 12%;
 margin: 0 7px;
 min-width: 180px;
 overflow: hidden;
 text-align: left;
 text-overflow: ellipsis;
}
.jbvw_last {
 text-align: center;
 min-width: 200px;
}
.jbvw_mhder {
 display: none;
 margin: 0;
 padding: 0;
 width: 0;
} 




/* List Styles  -------------------------------------------------------------*/
.jlheader {
 color: white;
 background-color: #555;
 border-top: 0;
 font-size: 9px;
 font-weight: 700;
 text-transform: uppercase;
 padding: 10px 0;
}

.jvheader {
 border: 0;
 font-size: 10px;
 display: flex;
 text-transform: uppercase;
 background-color: #f5f5f5;
 flex-direction: row;
 justify-content: space-between;
 align-items: flex-start;
 flex-wrap: nowrap;
 padding: 8px 0;
 width: 95%;
}

.jlnormal {
 background-color: #FFF;
 color: #555;
 margin: 1px auto 0;
}
.jlnormal:hover {
 background-color: #EEE;
}
.jldanger {
 background-color: var(--warning);
 color: #222;
 margin: 1px 0 0;
}
.jldanger:hover {
 background-color: var(--warninghover);
 color: #5D0506;
}
.jlrush {
 background-color: var(--highlight);
 color: #555;
 margin: 1px 0 0;
}
.jlrush:hover {
 background-color: var(--highlighthover);
}

.jlcaution {
  background-color: var(--caution);
  color: #222;
  margin: 1px 0 0;
 }
 .jlcaution:hover {
  color: #222;
  background-color: var(--cautionhover);
 }

.jlnormal:last-child {
 border-bottom: 0px solid #fff;
 color: #555;
} 

/* Breakpoint Phone 767 -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 

@media screen and 
(max-width: 767px), only screen and 
(min--moz-device-pixel-ratio: 2) and 
(max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and 
(max-width: 767px), only screen and (min-device-pixel-ratio: 2) and 
(max-width: 767px), only screen and (min-resolution: 192dpi) and 
(max-width: 767px), only screen and (min-resolution: 2dppx) and 
(max-width: 767px) {
  
 .joblist_none {
  color: #444;
  font-size: 14px;
  font-weight: 500;
  margin: 0 auto;
  padding: 20px 0;
  text-align: center;
  width: 100%;
 }
 
 .joblist_none span {
  font-size: 12px;
 }
 
 
 /* Dash View - Column Each -----------------------------------------*/ 
 
 .joblist {
  font-size: 95%;
  font-weight: 400;
  padding: 18px 0;
 }

 .joblist_first {
  min-width: 90px;
  text-align: center;
 }

 .joblist_col2 {
  flex-direction: column;
 }

 .joblist_col3 {
  display: inline;
  font-weight: bold;
  text-align: left;
  width: 100%;
 }
 .joblist_col4 {
  display: none;
 }
 .joblist_col5 {
  text-align: left;
 }
 .joblist_col6 {
  text-align: center;
  min-width: 100px;
  width: 100px;
 }
 .joblist_last {
  min-width: 110px;
 }
 .joblist_hdnst {
  display: none;
 }
 .joblist_hdbrk {
  display: block;

 } 
 

 /* Dash View - Column Each -----------------------------------------*/

 .jbvw {
  font-size: 90%;
  flex-direction: row;
  margin: 0 auto;
  width: 100%;
 }
 .jbvw_first {
  text-align: left;
 }
 .jbvw_col2 {
  display: block;
  flex-direction: column;
  text-align: left;
  height: 100%;
  padding-left: 20px; /* Mobile fix center */
 }
 .jbvw_col2dsk {
  display: none;
  margin: 0;
  padding: 0;
  visibility: hidden;
 }
 .jbvw_col3 {
  font-weight: bold;
  text-align: left;
 }
 .jbvw_col4 {
  margin: 0;
  text-align: left;
 }
 .jbvw_last {
  text-align: center;
  min-width: 75px;
 }
 .jbvw_mhder {
  display: block;
  margin: 0 auto;
  padding: 0;
  text-transform: uppercase;
  text-align: left;
  width: 93%;
 } 
 
 /* Mobile List Styles ----------------------------------------------------*/ 

 .jlheader {
  font-size: 80%;
  padding: 12px 0;
 }
} /*  Mobile End  */ 

/* New Push Job Status -----------------------------------------------------------------------------------------------------------------------*/ /* cbpushjob pages */ 

.status_current1 {
 color: #fff;
 display: block;
 font-size: 11px;
 text-transform: uppercase;
 padding: 10px 0;
 text-align: center;
 width: 100%;
}
.status_msgText {
 color: #222;
 font-family: 'Lato';
 font-size: 13px;
 text-transform: uppercase;
}
.status_btn1 {
 width: 200px;
}
.status_wrapper1 {
 text-align: center;
 max-width: 900px;
 margin: 60px auto 10px;
}
.statusMovement {
 display: flex;
 align-items: flex-start;
 flex-wrap: nowrap;
 justify-content: center;
 align-items: center;
 height: 100%;
}
.status_number1 {
 background-color: #f1f1f1;
 font-family: 'Lato';
 font-size: 55px;
 font-weight: 300;
 text-align: center;
 width: 215px;
}
.btn_move {
 color: #222;
 text-align: center;
 width: 190px;
 cursor: pointer;
}
.btn_move:hover {
 color: #08f;
 text-align: center;
 width: 190px;
 transition: 0.2s ease;
}
.pushto_approval {
 margin: 15px 0;
 text-align: center;
 width: 100%;
}
.pushto_header {
 border-bottom: #ccc solid 1px;
 font-size: 11px;
 margin: 10px auto 15px;
 padding: 10px 0;
 text-align: center;
 text-transform: uppercase;
 width: 50%;
} 

/* Push Status Bar ----------------------------------------------------*/ 
.pushjob_wrapper {
 width: 100%;
}
.pushjob {
 background-color: var(--subpro);
 background-image: linear-gradient(var(--subpro), #08f);
 border-style: none;
 color: #FFF;
 font-family: 'Lato';
 font-size: 12px;
 letter-spacing: 0.1em;
 margin: 0;
 padding: 14px 0px;
 width: 100%;
 -webkit-appearance: none;
}
.pushjob:hover {
 background: var(--subprohover);
 color: #FFF;
 text-decoration: none;
} 

/* Desktops and laptops ----------------------------- */
@media only screen and (max-width :1000px) {
 .pushjob {
  font-size: 11px;
  padding: 8px 0px;
 }
} 

/* Breakpoint Phone 767 -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 

@media screen and (max-width: 767px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 767px), only screen and (min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min-resolution: 192dpi) and (max-width: 767px), only screen and (min-resolution: 2dppx) and (max-width: 767px) {
 .pushjob {
  display: none;
 }
} /*  Mobile End  */ 

/* New Site Navigation - -------------------------------------------------------------------------------------------------------------------------------------------------------------*/  
.openbtn {
 background-color: var(--subpro);
 color: white;
 cursor: pointer;
 left: 0;
 margin: 0;
 padding: 6.5px 9px;
 position: fixed;
 top: 0px;
 z-index: 99998;
}
.overlay .closebtn {
 color: white;
 display: block;
 float: right;
 font-size: 23px;
 margin: 10px 25px 0 0;
 text-decoration: none;
}
.overlay {
 height: 100%;
 background-color: rgb(0, 0, 0);
 background-color: rgba(0, 0, 0, 0.4);
 left: 0;
 right: 0;
 bottom: 0;
 top: 0;
 position: fixed;
 overflow: hidden;
 transition: 0.2s;
 width: 0;
 z-index: 99999;
}
#nav_wrapper {
 height: 100%;
 left: 0;
 margin: 0;
 overflow: hidden;
 padding: 0;
 position: absolute;
 top: 0;
 width: 25%;
 z-index: 99999;
}
.nav_container {
 background-color: #222;
 font-family: 'Nunito Sans';
 font-size: 12px;
 font-weight: 300;
 height: 100%;
 overflow-x: hidden;
 overflow-y: hidden;
 width: 100%;
 z-index: 99999;
}
.nav_bcontent {
 height: 100%;
 overflow: auto;
}
.nav_container a {
 text-decoration: none;
}
.nav_head {
 background-color: #222;
 border-bottom: 1px solid #111;
 color: #fff;
 font-size: 13px;
 font-weight: 500;
 font-family: Arial;
 letter-spacing: .02em;
 height: 100px;
 margin: 0;
 padding: 35px 20px;
 text-align: left;
 vertical-align: baseline;
 width: 100%;
}
.n_contain {
 border-bottom: 1px solid #333;
 font-family: 'Nunito Sans';
 text-transform: uppercase;
 letter-spacing: .05em;
 display: flex;
 justify-content: space-between;
 padding: 12px 0;
 width: 100%;
}
.n_list {
 color: #fff;
 font-family: 'Lato';
 font-size: 11px;
 font-weight: 500;
 margin: 0 auto;
 width: 80%;
}
.n_list a {
 color: #fff;
 text-decoration: none;
}
.n_list a:hover {
 text-decoration: none;
}
.n_list-light {
 background-color: #333;
}
.n_list-light:hover {
 background-color: #222;
 text-decoration: none;
}
.n_list-dark {
 background-color: #222;
}
.n_list-dark:hover {
 background-color: #111;
}
.n_listwarning {
 background-color: var(--warning);
}
.n_listwarning:hover {
 background-color: var(--warninghover);
}
.n_alertw {
 border-radius: 6px;
 font-family: 'Lato';
 font-size: 11px;
 font-weight: 500;
 float: right;
 margin-top: -2px;
 padding: 2px 0;
 text-align: center;
 width: 50px;


} /* Breakpoint Phone 767 -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 767px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 767px), only screen and (min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min-resolution: 192dpi) and (max-width: 767px), only screen and (min-resolution: 2dppx) and (max-width: 767px) {
 .openbtn {
  padding: 11px 15px;
  z-index: 99999;
 }
 .overlay .closebtn {
  margin: 25px 35px 0 0;
  padding: 0;
 }
 .nav_head {
  font-size: 90%;
  height: 150px;
  padding: 40px;
  width: 100%;
 }
 .nav_container {
  font-size: 120%;
  overflow-y: scroll;
  width: 100%;
 }
 #nav_wrapper {
  width: 100%;
 }
 .nav_menu {
  font-size: 100%;
  margin: 0;
  padding: 0;
 }
 .n_contain {
  padding: 12px 0;
 }
 .n_list {
  font-size: 90%;
  font-weight: 300;
  width: 80%;
 }
 .n_alertw {
  font-size: 85%;
  font-weight: 500;
  margin-right: 0px;
  margin-top: -2px;
  padding: 2px 0;
  width: 50px;
 }
} /*  Mobile End  */ 

/* Alerts ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 

.cnfm_wrapper {
 font-family: 'Lato';
 font-size: 12px;
 font-weight: 500;
 border-radius: 0;
 margin: 20px auto;
 max-width: 900px;
 padding: 12px 20px;
 text-transform: uppercase;
 width: 90%;
}

.cnfm_wrapper a {
 color: inherit;
 text-decoration: none;
}
.cnfm-approve {
 background-color: var(--approve);
 color: var(--approvetxt);
}
.cnfm-danger {
 background-color: var(--warning);
 color: var(--warningtxt);
}
.cnfm-rush {
 background-color: var(--approve);
 color: var(--approvetxt);
}
.cnfm-subpro {
 background-color: var(--subpro);
 color: var(--subprotxt);
}
.cnfm-shipped {
 background-color: var(--shipping);
 color: var(--shippingtxt);

} /* Breakpoint Phone 767 -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 


@media screen and (max-width: 767px), only screen and (min--moz-device-pixel-ratio: 2) and 
  (max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and 
  (max-width: 767px), only screen and (min-device-pixel-ratio: 2) and 
  (max-width: 767px), only screen and (min-resolution: 192dpi) and 
  (max-width: 767px), only screen and (min-resolution: 2dppx) and 
  (max-width: 767px) {

 .cnfm_wrapper {
  font-size: 90%;
  border-radius: 0;
  padding: 16px 28px;
  width: 95%;
 }
} /*  Mobile End  */ 


/* Footer ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 

#body_container {
 min-height: 100%;
 position: relative;
 -webkit-font-smoothing: antialiased;
}
#footerpush {
 margin: 0;
 padding-bottom: 400px;
}
#footer {
 background: linear-gradient(to bottom right, #000 0%, #2B3B4C 60%);
 bottom: 0;
 height: 350px;
 left: 0;
 margin: 100px 0 0;
 padding: 40px 0;
 position: absolute;
 width: 100%;
}
#f_wrapper {
 display: flex;
 justify-content: center;
 align-items: flex-end;
 flex-flow: row nowrap;
 color: #FFF;
 font-family: "lato";
 font-size: 12px;
 font-weight: 500;
 letter-spacing: .2em;
 margin: 0 auto;
 max-width: 1400px;
 width: 100%;
}
.f_column1 {
 font-size: 12px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 height: 200px;
 padding: 0;
 min-width: 300px;
 text-align: center;
 width: 100%;
}
.f_dotCom {
 letter-spacing: .0em;
}
.f_logo {
 margin: 20px 0 10px;
 color: white;
 width: 150px;
} /* Breakpoint Phone 767 -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 767px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 767px), only screen and (min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min-resolution: 192dpi) and (max-width: 767px), only screen and (min-resolution: 2dppx) and (max-width: 767px) {
 #footerpush {
  margin: 0;
  padding-bottom: 280px;
 }
 #footer {
  height: 240px;
  margin: 0;
  padding: 20px 0;
 }
 #f_wrapper {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
 }
 .f_column1 {
  padding: 0;
  margin: 0 0 20px;
  width: 100%;
 }
 .f_column1 ul {
  width: 100%;
 }
} /*  Mobile End  */ 

/* New Job View -----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 

/* Job View API - List Items ----------------------------------------------------*/ 
.apiitemList_wrapper {
 display: flex;
 flex-direction: column;
 flex-wrap: nowrap;
 font-size: 11px;
 justify-content: center;
 align-items: flex-start;
 margin: 20px 0;
 width: 100%;
}
.apiitemList_header {
 border: 1px solid #ddd;
 display: flex;
 text-transform: uppercase;
 background-color: #f5f5f5;
 flex-direction: row;
 font-size: 10px;
 justify-content: space-between;
 align-items: flex-start;
 flex-wrap: nowrap;
 padding: 8px 0;
 width: 100%;
}

.apiitemList {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: flex-start;
 flex-wrap: nowrap;
 text-transform: uppercase;
 text-overflow: ellipsis;
 overflow: hidden;
 padding: 15px 0;
 margin: 0 auto;
 border-bottom: .5px solid #ccc;
 width: 100%;
 min-width: 1;
 white-space: nowrap;
}
.apilistItem1 {
 padding-left: 20px;
 flex-basis: 0;
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
}
.apilistItem2 {
 flex-basis: 30%;
 overflow: hidden;
 text-overflow: ellipsis;
}
.apilistItem3 {
 text-align: left;
 flex-grow: 1;
 flex-basis: 50%;
}
.apilistItem4 {
 text-align: center;
 width: 65px;
}
.apilistItem5 {
 text-align: center;
 width: 65px;
}

/* Breakpoint Phone 767 -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 767px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 767px), only screen and (min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min-resolution: 192dpi) and (max-width: 767px), only screen and (min-resolution: 2dppx) and (max-width: 767px) {
    
    .apilistItem1 {
     display: none;
     width: 0px;
    }
    .apilistItem2 {
     flex-basis: 40%;
     padding-left: 20px;
    }
}



/* Job View Status  - Normal ----------------------------------------------------*/ 

.jobinfo_wrap-tools {
 margin: 10px auto 20px auto;
 text-align: center;
 width: 100%;
}
.jobinfo_container {
 margin: 15px auto;
 max-width: 850px;
 width: 80%;
}
.jobinfo_wrap-status {
 display: flex;
 width: 100%;
}
.jobinfo_status {
 font-size: 40px;
 font-weight: 300;
 text-align: left;
 text-transform: uppercase;
 vertical-align: middle;
 width: 50%;
}
.jobinfo_dates {
 text-align: right;
 padding-top: 10px;
 width: 50%;
}
.jobinfo_dates li {
 font-size: 13px;
 list-style: none;
 margin: 0;
 padding: 0;
}
.jobinfo_dates span {
 color: var(--subpro);
 font-size: 13px;
 font-weight: 700;
}
.jobinfo_wrap-info {
 margin: 15px auto;
 width: 95%;
}
.jobinfo_wrap-info li {
 font-size: 13px;
 list-style: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.jobinfo_wrap-info li span {
 font-size: 13px;
 font-weight: 700;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.jb_headerwrap {
 display: flex;
 font-size: 12px;
 margin: 0 auto;
 padding: 14px 0;
 width: 100%;
}
.jbheader {
 color: #444;
 background-color: #ccc;
 border-bottom: 1px solid #FFF;
 padding: 6px 0;
}
.jbprod_tools {
 display: flex;
 font-size: 12px;
 margin: 0 auto;
 padding: 14px 0;
 width: 100%;
}
.jbprod_tools a {
 text-decoration: none;
}
.jbprod_tools:hover {
 text-decoration: none;
} /* Job View Status  - Shipped ----------------------------------------------------*/ .ship_wrapper {
 background-image: linear-gradient(#333, #222);
 border-bottom: solid var(--subpro) 3px;
 width: 100%;
}
.ship_container {
 display: flex;
 max-width: 850px;
 margin: 0 auto;
 padding: 20px 0;
 width: 80%;
}
.ship_status {
 color: #FFF;
 font-size: 40px;
 font-weight: 300;
 text-align: left;
 vertical-align: middle;
 width: 50%;
}
.ship_dates {
 text-align: right;
 padding-top: 10px;
 width: 50%;
}
.ship_dates li {
 color: #FFF;
 font-size: 11px;
 list-style: none;
 padding: 0;
 margin-top: -9px;
}
.ship_tracking a {
 color: #fff;
 display: block;
 font-family: 'Roboto';
 font-size: 20px;
 font-weight: 300;
 margin: -7px 0 7px 0;
}
.ship_tracking a:hover {
 color: #ccc;
 text-decoration: none;
}
.ship_tracklib {
 color: #666;
 font-size: 10px;
} /* Job View Sweet Alerts ----------------------------------------------------*/ .jobtbl_date {
 margin-left: 20px;
 width: 10%;
}
.jobtbl_usr {
 width: 20%;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.jobtbl_notes {
 width: 60%;
}
.jobtbl_x {
 text-align: center;
 margin: 0;
 width: 8%;
}
.jobtbl_x:hover {
 color: #F00;
}
.jobtbl_xclose {
 background-color: inherit;
 text-align: center;
 margin: 0;
 padding: 0;
 width: 8%;
}
.jobtbl_xclose:hover {
 color: #F00;
} /* Job View - Section Basic Text ----------------------------------------------------*/ .jobapp_date {
 margin-left: 20px;
 width: 10%;
}
.jobapp_status {
 width: 12%;
}
.jobapp_usr {
 text-overflow: ellipsis;
 width: 20%;
}
.jobapp_notes {
 width: 54%;
}
.jobinfo_basictext {
 display: block;
 font-size: 12px;
 padding: 10px 0;
 margin: 0 auto;
 text-align: center;
 width: 100%;
}
.jobinfo_basictext span {
 display: block;
 font-weight: bold;

} /* Job View - Production Notes  ----------------------------------------------------*/ 

.jobinfo_prdnotecontainer {
 display: inline-block;
 max-width: 900px;
 padding: 30px 0px 35px;
 text-align: center;
 width: 100%;
}

#jobinfo_prdnote {
 background-color: #DDD;
 border-radius: 0;
 font-size: 11px;
 padding: 15px 14px 13px;
 width: 70%;
}

#jobinfo_prdsubmit {
 background-color: var(--subpro);
 color: #FFF;
 font-family: 'Lato';
 font-size: 11px;
 font-weight: 700px;
 letter-spacing: .1em;
 margin-left: -10px;
 padding: 14px 0;
 width: 10%;
} /* Breakpoint Phone 767 -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 

@media screen and 
(max-width: 767px), only screen and (min--moz-device-pixel-ratio: 2) and 
(max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and 
(max-width: 767px), only screen and (min-device-pixel-ratio: 2) and 
(max-width: 767px), only screen and (min-resolution: 192dpi) and 
(max-width: 767px), only screen and (min-resolution: 2dppx) and 
(max-width: 767px) {

 .jobinfo_wrap-status {
  display: inline;
  width: 100%;
 }
 .jobinfo_status {
  display: block;
  font-size: 40px;
  text-align: center;
  width: 100%;
 }
 .jobinfo_dates {
  display: block;
  text-align: center;
  padding-top: 10px;
  width: 100%;
 }
 .jobinfo_wrap-info {
  width: 90%;
 }
 .jb_headerwrap {
  display: none;
  margin: 0;
  padding: 0;
 }
 .jbheader {
  display: none;
  padding: 0;
  visibility: hidden;
 }
 .jbprod_tools {
  display: inline-block;
  font-size: 100%;
  margin: 0 auto;
  padding: 14px 0;
  vertical-align: top;
  width: 100%;
 }
 .jobtbl_date {
  display: block;
  margin-left: 20px;
  width: 80%;
 }
 .jobtbl_usr {
  display: none;
  width: 10%;
 }
 .jobtbl_notes {
  margin-left: 20px;
  width: 80%;
 }
 .jobtbl_x {
  float: right;
  margin-top: -32px;
  width: 10%;
 }
 .jobtbl_xclose {
  float: right;
  margin-top: -32px;
  width: 10%;
 }
 #jobinfo_prdnote {
  font-size: 110%;
  margin-bottom: 10px;
  padding: 15px 25px;
  width: 100%;
 }
 #jobinfo_prdsubmit {
  font-size: 90%;
  font-weight: 700;
  margin-left: 0;
  padding: 15px 0;
  width: 100%;
 }
 .jobinfo_basictext {
  font-size: 14px;
  width: 90%;
 }
 .jobapp_date {
  margin-left: 20px;
  width: 90%;
 }
 .jobapp_status {
  font-weight: bold;
  margin-left: 20px;
  width: 90%;
 }
 .jobapp_usr {
  display: none;
  width: 0%;
 }
 .jobapp_notes {
  margin-left: 20px;
  width: 90%;
 }
 .ship_container {
  display: block;
  max-width: 100%;
  padding: 15px 0;
  width: 100%;
 }
 .ship_status {
  display: block;
  font-size: 40px;
  padding: 20px 0 0 0;
  text-align: center;
  width: 100%;
 }
 .ship_dates {
  display: block;
  text-align: center;
  padding-top: 10px;
  margin-top: 0;
  width: 100%;
 }
 .ship_dates li {
  color: #FFF;
  font-size: 100%;
  list-style: none;
  padding: 0 0 30px 0;
 }
 .ship_tracking a {
  font-size: 240%;
  margin: 0;
 }

 .jobinfo_prdnotecontainer {
  padding: 35px 15px 35px;
 }

} /*  Mobile End  */ 


/* Edit Order Page  -----------------------------------------------------------------------------------------------------------*/ 


.jobedit_formWrapper {
 display: inline-block;
 margin: 10px 10px 0 0;
 text-align: left;
 width: 400px;
}
.jobedit_formTitle {
 color: #666;
 display: block;
 font-size: 10px;
}
.jobedit_form1 {
 border-bottom: 1px #ddd solid;
 border-radius: 0;
 color: #222;
 font-weight: bold;
 font-size: 14px;
 padding: 8px;
 width: inherit;
 -webkit-border-radius: 0;
}
.jobedit_formbreaksm {
 padding-left: 20px;
 text-align: left;
 width: 100%;
}
.plus_space5px {
 margin: 10px 0 0 0;
}
.jobedit_formbreakmd {
 padding: 10px 0;
 text-align: right;
 width: 100%;
}

.jobedit_formbreaklg {
  padding: 20px 0;
  text-align: right;
  max-width: 900px;
  width: 100%;
 }

.jobedit_select {
 background-image: url(../img/roll.png);
 background-repeat: no-repeat;
 background-position: right;
 background-size: 20px;
 border-radius: 0;
 color: #222;
 font-weight: bold;
 font-size: 14px;
 padding: 8px;
 width: inherit;
 border: none;
 background-color: transparent;
 -webkit-appearance: none;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none !important;
 border-bottom: 1px #ddd solid;
}
.jobedit_select:focus {
 outline-width: 0;
}
#selectedFileAttach {
 display: none;
}
.jobedit_required {
 background-color: #FF9294;
 border-bottom: 0px #FFF solid;
 color: #FFF;
}
.jobedit_required::placeholder {
 color: #FFF;
} /* Check Box ----------------------------------------- */ 

.check_placement {
 margin: 0 auto;
 width: 180px;
}

.container {
 display: flex;
 justify-content: right;
 position: relative;
 padding-left: 35px;
 margin: 0px;
 cursor: pointer;
 font-size: 14px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.container input {
 position: absolute;
 top: 0;
 opacity: 0;
 cursor: pointer;
} /* Checkmark STANDARD */ .checkmark {
 border: 1px solid #ccc;
 position: absolute;
 top: -3px;
 left: 0;
 height: 25px;
 width: 25px;
 background-color: #fff;
} 

/* On mouse-over, add a grey background color */ 
.container:hover input ~ 

.checkmark {
 background-color: #ccc;
    
} /* When the checkbox is checked, add a blue background */ 
.container input:checked ~ 

.checkmark {
 background-color: var(--highlight);
} 

/* Create the checkmark/indicator (hidden when not checked) */ 
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
} 

/* Create the checkmark/indicator (hidden when not checked) */ 
.checkmark_danger:after {
 content: "";
 position: absolute;
 display: none;
} 

/* Show the checkmark when checked */ 
.container input:checked ~ 

.checkmark:after {
 display: block;
} 

/* Style the checkmark/indicator */ 
.container .checkmark:after {
 left: 8px;
 top: 4px;
 width: 6px;
 height: 12px;
 border: solid #444;
 border-width: 0 1px 1px 0;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
} /* Checkmark DANGER */ /* Create the checkmark/indicator (hidden when not checked) */ .checkmark_danger:after {
 content: "";
 position: absolute;
 display: none;
}
.checkmark_danger {
 border: 1px solid #ccc;
 position: absolute;
 top: -3px;
 left: 0;
 height: 25px;
 width: 25px;
 background-color: #fff;
} 

/* On mouse-over, add a grey background color */ .container:hover input ~ .checkmark_danger {
 background-color: #ccc;
} /* When the checkbox is checked, add a blue background */ .container input:checked ~ .checkmark_danger {
 background-color: var(--subpro);
} /* Show the checkmark when checked */ .container input:checked ~ .checkmark_danger:after {
 display: block;
} /* Style the checkmark/indicator */ .container .checkmark_danger:after {
 left: 8px;
 top: 4px;
 width: 6px;
 height: 12px;
 border: solid #fff;
 border-width: 0 1px 1px 0;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
} 

/* Checkmark FILTER */ /* Create the checkmark/indicator (hidden when not checked) */ 
.checkmark {
 border: 1px solid #ccc;
 position: absolute;
 top: -3px;
 left: 0;
 height: 25px;
 width: 25px;
 background-color: #fff;
}

.checkmark_filter:after {
 content: "";
 position: absolute;
 display: none;
}

.checkmark_filter {
 border: 0px solid #ccc;
 position: absolute;
 top: 0;
 left: 0;
 height: 15px;
 width: 15px;
 background-color: #ccc;
}

/* On mouse-over, add a grey background color */ 
.container:hover input ~ .checkmark_filter {
 background-color: #ccc;
} /* When the checkbox is checked, add a blue background */ 

.container input:checked ~ .checkmark_filter {
 background-color: var(--subpro);
} 

/* Show the checkmark when checked */ 
.container input:checked ~ .checkmark_filter:after {
 display: block;
} 

/* Style the checkmark/indicator */ 
.container .checkmark_filter:after {
 left: 5px;
 top: 2px;
 width: 4px;
 height: 9px;
 border: solid #fff;
 border-width: 0 1px 1px 0;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
} /* Desktops and laptops ----------------------------- */ @media only screen and (max-width :1000px) {
 .jobedit_formWrapper {
  width: 100%;
 }
} /* Breakpoint Phone 767 -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 767px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 767px), only screen and (min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min-resolution: 192dpi) and (max-width: 767px), only screen and (min-resolution: 2dppx) and (max-width: 767px) {
 .jobedit_formWrapper {
  display: block;
  margin: 10px auto;
  width: 95%;
 }
 .jobedit_formTitle {
  font-size: 10px;
 }
 .jobedit_form1 {
  font-size: 14px;
  padding: 8px;
 }
 .jobedit_formbreaksm {
  text-align: center;
  padding-left: 0;
 }
 .jobedit_formbreakmd {
  margin: 10px auto;
  text-align: center;
  width: 100%;
 }
} /*  Mobile End  */ /* Roster Builder ------------------------------------------------------------*/ .dropzone {
 border: dashed 1px #CCC;
 border-radius: 5px;
 font-size: 12px;
 padding: 45px 0;
 margin: 0 auto;
 text-align: center;
 width: 100%;
}
.dropzone a {
 color: #08f;
}
.progress_wrapper {
 font-size: 12px;
 margin: 15px 0 90px 0;
 text-align: left;
}
.progress-bar {
 background-color: #08f;
}
.progress_message {
 font-size: 11px;
 font-weight: bold;
 margin: -15px 0 0;
}
.perror {
 color: #F00;
}
.pcomplete a {
 color: #F00;
}
.progress_option {
 display: flex;
 flex-direction: row;
 margin-top: -11px;
 padding: 0;
}
.progress_rosoptions {
 border-radius: 3px 0px 3px 3px;
 color: #444;
 font-weight: normal;
 font-size: 11px;
 margin: 0 5px 0 0;
 padding: 4px 0 4px 12px;
 flex-basis: 16%;
 border: none;
 background-color: #CCC;
 -webkit-appearance: none;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none !important;
}
.progress_rosoptions:hover {
 background-color: #DDD;
}
.progress_rossubmit {
 border-radius: 3px;
 color: #444;
 float: right;
 font-weight: normal;
 font-size: 11px;
 padding: 4px;
 width: 15%;
 border: none;
 background-color: #CCC;
}
.progress_rossubmit:hover {
 color: #fff;
 background-color: var(--subpro);
} 

/* User Prefs -----------------------------------------------------------*/ 
.form_wrapper {
 display: flex;
 margin: 10px 10px 0 0;
 width: 100%;
}
.form_title {
 color: #666;
 display: block;
 font-size: 10px;
}
.form_select {
 background-image: url(../img/roll.png);
 background-repeat: no-repeat;
 background-position: right;
 background-size: 20px;
 border-radius: 0;
 color: #222;
 font-weight: 300;
 font-size: 12px;
 padding: 8px;
 width: inherit;
 border: none;
 background-color: transparent;
 -webkit-appearance: none;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none !important;
 border-bottom: 1px #ddd solid;
}
.usrpref_wrapper {
 margin: 0 auto;
 padding: 11px 0;
 width: 100%;
 border-bottom: 1px #ddd solid;
}
.usrpref_contain {
 display: flex;
 background-color: transparent;
 align-items: center;
 margin: 0 auto;
 flex-wrap: nowrap;
 flex-direction: row;
 width: 95%;
 font-size: 11px;
 font-weight: 500;
}
.up_styleB {
 color: #222;
 font-weight: bold;
 font-size: 14px;
}
.usrpref_selectsm {
 background-image: url(../img/roll.png);
 background-repeat: no-repeat;
 background-position: right;
 background-size: 20px;
 border-radius: 0;
 display: flex;
 flex-basis: 10%;
 margin-right: 15px;
 min-width: 85px;
 padding: 8px 0;
 border: none;
 background-color: transparent;
 -webkit-appearance: none;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none !important;
}
.usrpref_selectlg {
 background-image: url(../img/roll.png);
 background-repeat: no-repeat;
 background-position: right;
 background-size: 20px;
 border-radius: 0;
 display: flex;
 flex-basis: 20%;
 margin-right: 15px;
 min-width: 200px;
 padding: 8px;
 border: none;
 background-color: transparent;
 -webkit-appearance: none;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none !important;
}
.jobedit_select:focus {
 outline-width: 0;
}
.usrpref_first {
 margin-right: 15px;
 padding: 0;
 flex-basis: 20%;
 text-align: left;
}
.usrpref_form1 {
 flex-basis: 15%;
 overflow: hidden;
 text-align: left;
}
.usrpref_form2 {
 flex-basis: 15%;
 text-align: left;
}
.usrpref_form3 {
 flex-basis: 30%;
 text-align: left;
}
.usrpref_form4 {
 flex-basis: 15%;
 text-align: left;
}
.usrpref_last {
 flex-grow: 1;
 text-align: right;
 min-width: 110px;
}
.usrpref_usrfirst {
 padding: 0;
 margin: 0 3px;
 min-width: 10px;
 flex-basis: 20%;
 text-align: left;
}
.usrpref_usr1 {
 padding: 0;
 margin: 0 3px;
 min-width: 10px;
 flex-basis: 20%;
 text-align: left;
}
.usrpref_usr2 {
 padding: 0;
 margin: 0 3px;
 min-width: 10px;
 flex-basis: 25%;
 text-align: left;
}
.usrpref_usr3 {
 padding: 0;
 margin: 0 3px;
 min-width: 10px;
 flex-basis: 10%;
 text-align: center;
}
.usrpref_usr4 {
 padding: 0;
 margin: 0 3px;
 min-width: 10px;
 flex-basis: 10%;
 text-align: center;
}
.usrpref_usrlast {
 padding: 0;
 margin: 0 3px;
 flex-basis: 20%;
 text-align: right;
 min-width: 110px;
} 

.usrpref_bl {
  border: 0px;
  margin: 20px auto 0;
  max-width: 900px;
  padding: 0;
  width: 90%;
}

input[type="file"] {
  display: none;
}

.custom-file-upload {
    background-color: #fff; 
    color: #ccc;
    border: none;
    padding: 5px;
    margin: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.custom-file-upload:hover {
  color: #222;
  background-color: #ccc;
  text-decoration: none;
}

 .usrpref_imgcontain{
  display: flex;
  justify-content: center;
  padding: 10px 0;
  width: 100%
 }


/* Change Status  ----------------------------------------------------------*/ 

.status_wrapper {
 text-align: center;
 max-width: 900px;
 margin: 0 auto;
}
.status_ordernumber {
 margin: 20px 0;
 text-align: center;
 width: 100%;
}
.status_number {
 display: block;
 font-family: 'Lato';
 font-size: 55px;
 font-weight: 300;
 margin: 10px 0;
 text-align: center;
 width: 100%;
}
.status_current {
 color: #fff;
 display: block;
 font-size: 11px;
 text-transform: uppercase;
 padding: 10px 0;
 text-align: center;
 width: 100%;
}
.status_btn {
 width: 200px;
} 


/* Landing Page ----------------------------------------------------------*/ 


/* Login  Page ----------------------------------------------------------*/ 

.landing_background {
 align-content: center;
 padding: 0;
 margin: 0;
 height: 100%;
 width: 100%;
}
.login_contain {
 color: white;
 font-family: Helvetica, Arial, "sans-serif";
 display: flex;
 font-weight: 100;
 font-size: 12px;
 flex-direction: column;
 justify-content: center;
 margin: 0 auto;
 height: 70%;
 width: 40%;
 text-align: center;
}
.login_contain a {
 color: #fff;
 font-weight: 500;
 text-decoration: none;
}
.loginLogo {
 text-align: center;
 padding: 20px 0;
 width: 100%;
}
.login_splogo {
 width: 110px;
}
.login_hdText {
 font-size: 24px;
 font-weight: 100;
 margin-bottom: 0;
}
.login_msgText {
 margin: 8px 0;
}
.login_form {
 background-color: rgba(0, 0, 0, 0.1);
 color: #fff;
 border: .5px solid #FFF;
 font-size: 12px;
 display: flex;
 margin: 5px auto;
 padding: 10px;
 opacity: 0.8;
 width: 80%;
}
.login_button {
 background-color: #08f;
 color: #fff;
 display: flex;
 font-size: 12px;
 letter-spacing: .1em;
 margin: 5px auto;
 padding: 12px;
 width: 80%;
 text-align: center;
 border: none;
 outline: none;
 -webkit-border-radius: 0 !important;
 -moz-border-radius: 0 !important;
 border-radius: 0 !important;
}
.login_button:hover {
 background-color: #0AF;
 text-decoration: none;
}
.login_icon {
 color: #fff;
 font-size: 14px;
 font-weight: 500;
 font-family: 'Lato';
 text-transform: uppercase;
 position: fixed;
 top: 18px;
 right: 30px;
}
.login_icon a {
 color: #fff;
 text-decoration: none;
}
.landing_icon {
 top: 11px;
 left: 50%;
 margin-left: -50px;
 width: 90px;
} 

/* Breakpoint PC Desktop -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ 

@media only screen and (max-width : 1000px) {} /* Breakpoint Phone 767 -------------------------------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 767px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 767px), only screen and (min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min-resolution: 192dpi) and (max-width: 767px), only screen and (min-resolution: 2dppx) and (max-width: 767px) {
 .login_contain {
  font-size: 90%;
  text-align: center;
  width: 90%;
 }
 .login_hdText {
  font-size: 195%;
  font-weight: 300;
  letter-spacing: .1em;
  margin-bottom: 10px;
 }
 .login_form {
  border-radius: 0px;
  border: .5px solid #FFF;
  font-size: 130%;
  margin: 5px auto;
  padding: 13px 20px;
  width: 95%;
 }
 .login_button {
  font-size: 130%;
  margin: 5px auto 10px;
  padding: 13px 20px;
  width: 95%;
 }
 .landing_main {
  flex-direction: column;
 }
 .landing_appContent {
  font-size: 105%;
  width: 100%;
 }
 .landing_nfwrapper {
  flex-direction: column;
  justify-content: center;
  max-width: 2000px;
  width: 90%;
 }
 .landing_nfcontainer {
  height: 200px;
  margin: 0 0 8px 0;
  width: 100%;
 }
} /* Tracking and Push Job Styles --- NEW PUSH TO DEFAULT SUBPRO.NET --------------------------------------------------------------------*/ .push_wrapper {
 display: flex;
 justify-content: center;
 flex-direction: column;
 margin: 0 auto 60px;
 width: 90%;
}
.push_container {
 display: flex;
 flex-direction: column;
 justify-content: center;
 margin: 15px auto;
 max-width: 500px;
 text-align: center;
 width: 100%;
}
.push_order {
 border: 1px solid #ccc;
 display: flex;
 font-family: 'Lato';
 font-size: 16px;
 font-weight: 700;
 margin: 20px auto;
 max-width: 500px;
 padding: 10px;
 text-align: center;
 width: 100%;
}
.push_orderStatus {
 margin: 9px auto;
}
.push_order:focus {
 border: 1px solid #08f;
}
.push_number {
 border: 1px solid #ccc;
 display: flex;
 font-family: 'Lato';
 font-size: 16px;
 font-weight: 700;
 margin: 20px auto;
 max-width: 500px;
 padding: 10px;
 text-align: center;
 width: 100%;
}
.push_number:focus {
 border: 1px solid #08f;
}
.push_message {
 color: #222;
 font-family: 'Lato';
 font-size: 16px;
 font-weight: 700;
 margin: 20px 0;
}
.push_messagedetial {
 color: #222;
 font-family: 'Lato';
 font-size: 12px;
 font-weight: 500;
} 

/* Filter View -------------------------------------------------------------------*/ 

.filter_list1 {
 text-align: left;
 padding-left: 20px;
 min-width: 60px;
 flex-basis: 5%;
}
.filter_list2 {
 text-align: left;
 display: flex;
 flex-grow: 1;
 margin: 5px 0;
} 

/* User Prefs - Company  -------------------------------------------------------------------*/ 


.usrpref_comFirst {
 margin-left: 5px;
 padding: 0;
 min-width: 140px;
 text-align: left;
}
.usrpref_comcheck {
 margin-right: 0;
 padding: 0;
 min-width: 120px;
 text-align: center;
 width: 40px;
}
.usrpref_com2 {
 flex-basis: 15%;
 min-width: 120px;
 overflow: hidden;
 text-align: left;
 text-overflow: ellipsis;
}
.usrpref_com3 {
 text-align: left;
 flex-grow: 1;
}

.usrpref_comLast {
 text-align: center;
 min-width: 80px;
 max-width: 120px;
}

.usrpref_comLast button {
  background-color: transparent;
  text-transform: uppercase;
  font-size: 10px;
  border: none;
  outline: none;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
  text-decoration: none;
}




.usrpref_add {
 background-color: transparent;
 flex-basis: 100%;
 text-align: center;
}

.usrpref_logo {
 height: 50px;
}
.usrpref_logowrapper {
 display: flex;
 padding: 10px 0 20px;
 flex-direction: column;
 align-items: center;
 width: 100%;
} 

/* New Order / Edit Order Pages -------------------------------------------------------------------*/ 

.apilistEdit {
 display: flex;
 flex-direction: column;
 border: 1px #ccc solid;
 background-color: #eee;
 justify-content: center;
 font-size: 11px;
 font-weight: bold;
 padding: 10px 15px;
 margin: 20px 0;
 text-transform: uppercase;
 width: 100%;
}
.apilistEdit_line {
 display: flex;
 flex-direction: row;
 align-content: center;
 padding: 7px 0;
 width: 100%;
}
.apilistEdit li {
 list-style: none;
 padding: 4px;
 width: 50%;
}
.apilistEdit input {
 padding: 6px 10px;
 text-align: left;
 width: 100%;
}
.apilistEdit_select {
 background-image: url(../img/roll.png);
 background-repeat: no-repeat;
 background-position: right;
 background-size: 20px;
 border-radius: 0;
 padding: 6px 10px;
 width: 100%;
 border: none;
 background-color: white;
 -webkit-appearance: none;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none !important;
 border-bottom: 1px #ddd solid;
 text-align: left;
 outline: hidden;
 color: #222;
}
.apilistEdit_select:focus {
 outline-width: 0;
 outline: hidden;
 outline-style: hidden;
}
.rushCheck {

}

.apilistEdit button {
 color: white;
 background-color: #FA6969;
 padding: 5px 10px;
 width: 35%;
}
.apiHead li:first-child {
 text-align: left;
 width: 50%;
}
.apiHead li:last-child {
 text-align: right;
}


#myInput {
  background-image: url('/css/searchicon.png'); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 12px; /* Increase font-size */
  padding: 12px 20px 12px 20px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#myUL {
  /* Remove default list styling */
  padding: 0;
  margin: 0;
}

#myUL span{
  padding-left: 30px;
}

#myUL li {
  list-style-type: none;
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #F1F1F1; /* Grey background color */
  padding: 12px 20px 10px 20px; /* Add some padding */
  font-size: 12px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
}

#myUL li:hover:not(.header) {
  background-color: #eee; /* Add a hover effect to all links, except for headers */
}



/* Formlisting -------------------------------------------------------------------*/ 

.frmListEdit {
  display: flex;
  flex-direction: column;
  border: 1px #ccc solid;
  background-color: #eee;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  padding: 10px 20px;
  margin: 20px 0 0;
  text-transform: uppercase;
  width: 100%;
}

.frmListEdit_line {
  display: flex;
  align-content: center;
  margin-bottom: 10px;
  width: 100%;
}

.frmListEdit_sub {
  display: flex;
  font-size: 8px;
  margin: 10px 0 3px;
  width: 100%;
}

.frmListEdit li {
  list-style: none;
  margin-right: 5px;
}

.frmWd50 li {
  width: 50%;
}

.frmWd33 li {
  width: 33.33%;
}

.frmWd12 li {
  width: 12.5%;
  text-align: left;
}

.frmListEdit input {
  padding: 10px;
  text-align: left;
  width: 100%;
}

.frmListEdit_select {
  background-image: url(../img/roll.png);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 20px;
  border-radius: 0;
  padding: 15px 20px;
  width: 100%;
  border: none;
  background-color: white;
  -webkit-appearance: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none !important;
  border-bottom: 1px #ddd solid;
  text-align: left;
  outline: hidden;
  color: #222;
  }

  .frmListEdit_select:focus {
  outline-width: 0;
  outline: hidden;
  outline-style: hidden;
}