body {	
    font-family: 'roc-grotesk', sans-serif;
	background-color: #231F20;
	font-size:14px;
	font-weight:400;
	height:100%;
	color:#000;
}

html{
    min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative;
}

select {
	background-color: #FFF;
}

strong {
	font-weight: 900;
}

a {
	text-decoration: none;
	color: #6AA2B8;	
}

a:hover {
	text-decoration:underline;
	color: #252122;
}

a:active {
	text-decoration: none;
	color: #3497B7;
	outline:0;
}

h1,h2, h3, h4, h5, h6 {
	font-weight:700;
	line-height:1.1em;
	margin: 0 0 16px;
	font-family: 'roc-grotesk', sans-serif;
}

h1 {
	color: #6ba2b8;	
}

h3 {	
	color: #4F6F82;
}

h4 {	
    letter-spacing: -.7px;
}

input {
	outline: 0;	
}

img:hover {
	cursor: default;
}

hr {
	border-top-width: 0px;
	display: block;
	margin: 24px 0px 24px;
	width: 100%;
	border-bottom-width: 2px;
	border-bottom-style: dotted;
	border-bottom-color: #8E908F;
}

.disabled {
	opacity: 0.5; /* Safari, Opera */
	-moz-opacity:0.5; /* FireFox */
	filter: alpha(opacity=50); /* IE */	
}

a, a:hover,a:focus,a:active, footer a.text-link:hover, strike, .post-meta span a:hover, footer a.text-link, 
ul.meta-post li a:hover, ul.cat li a:hover, ul.recent li h6 a:hover, ul.portfolio-categ li.active a, ul.portfolio-categ li.active a:hover, ul.portfolio-categ li a:hover,ul.related-post li h4 a:hover, span.highlight,article .post-heading h3 a:hover,
.navbar .nav > .active > a,.navbar .nav > .active > a:hover,.navbar .nav > li > a:hover,.navbar .nav > li > a:focus,.navbar .nav > .active > a:focus, .validation  { 
	color:#6AA2B8;
}

.navbar-brand span{
    color: #6AA2B8;
}
header .nav li a.dropdown-toggle,
header .nav li a.dropdown-toggle:visited {
    letter-spacing:-.7px;
	color:#FFF;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
	color:#6AA2B8;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
	color:#6AA2B8;
}	
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
	color:#6AA2B8;
}

.dropdown-menu>li>a {   
    color: #6AA2B8;
}

.dropdown-menu>li>a.selected {   
    background-color: #D8E9F1;
    border-left: 6px solid #6aa2b8; 
    padding-left: 6px;
}

/* MENU UNDERLINE EFFECT */
@media (min-width: 768px) {
	.navbar-nav .dropdown-deselected {		
		border-bottom: 0px solid transparent;  
		display:inline-block;
	}
	
	.navbar-nav .dropdown-deselected:not(.profile):after {
		content: '';
		display: block;
		margin: auto;
		height: 3px;
		width: 0px;
		background: transparent;
		transition: width .5s ease, background-color .5s ease;
	}
	.navbar-nav .dropdown-deselected:hover:after {
		width: 100%;
		background: #6aa2b8;
	}
	
	.navbar-nav .dropdown-selected {  
		border-bottom: 3px solid #6aa2b8;
		display:inline-block;
	}	
    
    .navbar-nav .dropdown-deselected.profile {		
		border: 2px solid #6aa2b8;
        line-height: 90%;        
        padding: 10px 15px 10px 15px;
        color: #6aa2b8;
        background-color: #231F20;                     
        position: relative;
        bottom: 5px;
	}
    
    .navbar-nav .dropdown-deselected.profile:hover {
        color: #231F20;
        background-color: #6aa2b8;
	}
    
    .mobile-filter{
        display: none;
    }
}

.alert-none {
    padding-top: 100px;
    padding-bottom: 100px;
    text-align: center;
}

.alert-none svg {
    font-size: 64px;
    margin-bottom: 30px;
}

.alert-none div:nth-of-type(1) {
   font-size: 133%;
   font-weight: bold;
   margin-bottom: 10px;
}

.dropdown {
	color:#FFF;
}
/* === background color === */

.custom-carousel-nav.right:hover, .custom-carousel-nav.left:hover, 
.dropdown-menu li:hover,
.dropdown-menu li a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a, 
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover,
.pagination ul > .active > a:hover,
.pagination ul > .active > a,
.pagination ul > .active > span,
.flex-control-nav li a:hover, 
.flex-control-nav li a.active {
  background-color: #6AA2B8;
}

.breadcrumb {
  background-color: #4F6F82;
}

/* === border color === */
.pagination ul > li.active > a,
.pagination ul > li.active > span, a.thumbnail:hover, input[type="text"].search-form:focus {
	border:1px solid #6AA2B8;
}

.btn { 
  	border-radius: 0px;
	font-size:14px;
	font-weight: 700;
	text-transform: uppercase;
	padding:10px 20px;
	text-decoration:none;
	line-height: inherit;
}

.flex-container {
  display: flex;
  flex-wrap: nowrap; 
}

.uppercase {
	text-transform:uppercase;
}

.opacity-25 {
	filter: opacity(0.25);
}

.opacity-50 {
	filter: opacity(0.50);
}

.opacity-75 {
	filter: opacity(0.75);
}

.float-none {
    float: none !important;
}

/* portfolio */
.item-thumbs .hover-wrap .overlay-img-thumb {
	background: #6AA2B8;	
}

/* footer */
footer{
	padding:20px 0 0 0;
	background:#231F20;
}

footer a:link {
	color:#fff;
}

footer a:visited {
	color:#fff;
}

footer a:hover {
	color:#eee;
}

/*Attaches header to top of page */
.fixed-header {
    position: fixed;
    top:0; left:0;
    width: 100%; 
	opacity:.95;
}

.smc-blue {
    color: #0084C9;
}

.ja_body .smc-blue {
    letter-spacing: -.6px;
    font-weight: 700;
    font-size: 115%;
}

thead {
	display: table-header-group;
}

tfoot {
	display: table-header-group;
}

kbd2 {
	font-weight: 600;
	font-size: 80%;
	line-height: 100%;
    padding: 1px 8px;
    color: #999;
    background-color: #fff;
	border: #999 solid 1px;
    border-radius: 2px;
}

kbd3 {
	font-weight: 600;
	font-size: 80%;
	line-height: 100%;
    padding: 1px 8px;
    color: #4F6F82;
    background-color: #fff;
	border: #4F6F82 solid 1px;
    border-radius: 2px;
}

kbdred {
	font-weight: 600;
	font-size: 80%;
    line-height: 100%;
    padding: 1px 6px;
    color: #FFF;
    background-color: red;
    border-radius: 2px;
}

kbdsmc,
.kbdsmc {
	font-weight: 600;
	font-size: 90%;	
    padding: 3px 6px;
    color: #FFF;
    background-color: #0084C9;
    border-radius: 2px;
	line-height: 100%;
}

.ttip {
	border-bottom: 1px dotted;
}

.text-underline {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: auto;
}

.text-bold {
   font-weight: 900!important;  
}

.text-blur {	 
	filter: blur(3px);
	-webkit-filter: blur(3px);      
}

.text-highlight {
	background-color: #FFFFA0;
}

.bottom-dotted {
    text-decoration-line: underline;
	text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.bottom-dotted:hover {
	border-bottom: none;
}

.smc-edit {
	display: none; 
}

.uppercase {
	text-transform: uppercase;
}

.nowrap {
	white-space:nowrap;
}

.no-margin {
    margin: 0px!important;
}

.highlight { background-color: yellow }

.content-block {
	background-color: #EDF0F5;
	border: 1px solid #d6d8dc;
	padding: 20px;
    letter-spacing: -.5px;
}

.bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
}  

.hide-on-screen {
	display: none;
}

.smc-legend {	
	font-size: 12px;
	letter-spacing:-.3px;
	position: fixed;
	top: 150px;
	right: 2px;
	padding: 12px;
	width: 200px;
	background-color: rgba(100,100,100,.75);  
	z-index: 1;
	color: #FFF; 
	display: none;
	border-radius: 2px;    
	font-weight: 300;
	line-height: 100%;
}

@media (max-width: 1200px) {
  .xsmc-legend {
    display: none !important;
  }
} 

.smc-legend [filter]{
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	line-height: 100%;
	font-size: 90%;
	background-color: transparent;
	border: solid 2px #FFF;
	color: #fff;
	text-align: center;
	float: none !important;
	display:table-cell !important;
}

.smc-legend [filter]:hover {
	cursor: pointer;
}

.smc-legend [subfilter]{
	margin-top: 8px;
	font-size: 95%;
	display: none;
}

.smc-legend-move,
.smc-legend-close {
	font-size: 120%;
	font-weight: 900;
	padding-bottom: 10px;
} 

.smc-legend-move:hover {
	cursor: move;
}

.smc-legend-close:hover {
	cursor: pointer;
	color: red;
}

/*spacing between checkbox and filter label */
.smc-legend-filters table  {  
	margin-right: 5px;
}

/*vertical spacing between filters */
.smc-legend-filters  {  
	border-spacing: 0px 3px;
    border-collapse: separate;
}

.smc-legend-filters tr:last-child {	
	color: #000;
}

.smc-legend-spacer td  { 	
	/*border-bottom: #808080 solid 1px;*/
   height: 4px;
}

[customer-detail]:hover,
[inventory-detail]:hover,
[item-detail]:hover,
[order-detail]:hover {
	cursor: pointer;
}

.more-item1 {
	position: relative;
}

.more-item2 {
    letter-spacing:-.7px;
	text-align: center;
	background-color: rgba(255,255,255,0.95);
	border: 2px solid #6AA2B8;	
	vertical-align: middle;
	transition: .1s ease;
}

.more-item2 a:link {
	text-decoration: none;
}

.more-item2:hover {
	border-width: 4px;
	transition: .1s ease;
}

.more-item2 div {
	line-height: normal;
}

.more-button {
    margin:1px 1px; 
    padding: 5px 25px 5px 32px;
    position:relative; 
    background-image: url('https://apps.smcpackaging.com/Assets/arrow_right_white_16x16.png'); 
    background-repeat:no-repeat; 
    background-position:left 7px center; 
    font-weight:600!important;
}

.blur {
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
	width: 100px;
	height: 100px;
	background-color: #ccc;
}

 .centered {
    display: flex;
    justify-content: center;      
     height: 100%;
 } 

.popup-window {
	border: 5px solid #0084C9;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;	
	background-color: #FFF;
	z-index: 105;
	display:none;
	position:absolute; 
	width: 98%;
	max-width: 1024px;
	height: auto;
	padding: 15px 35px 35px 35px;
	-webkit-box-shadow: 0px 0px 16px 5px rgba(0,0,0,0.60);
	-moz-box-shadow: 0px 0px 16px 5px rgba(0,0,0,0.606);
	box-shadow: 0px 0px 16px 5px rgba(0,0,0,0.60);
}

.popup-title {
	font-family: "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;    
	font-size: x-large;
	color: #0084C9;
	font-weight: 900;
	top:8px; 
	position: absolute;
	width: 85%;
}

.popup-title span {
	font-size: 60%; 
	font-weight: 200; 
	background-color:#0084C9; 
	padding:1px 8px;
	color: #FFF;
	border-radius: 2px;
	margin-right: 10px;
	white-space: nowrap;
}

.popup-title a {
	color:#0084C9;
	text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.popup-title a:hover {
	text-decoration-style: solid;
}

.popup-text {
	color: #000;	
}

.popup-close {
	position:relative; 
	bottom:15px; 
	right:-35px;
} 

.popup-x {
	font-size:16px;
	background-color:#0084C9; 
	color:#FFF; 
	width:35px;
	height:35px; 
	text-decoration: none;
	text-align: center;
	line-height: 35px;
	cursor: pointer;
	font-weight: 900;
}

.popup-x:hover {
	background-color:#e81123;
	cursor: pointer;
	text-decoration: none;
}

.popup-x a:link {
	color: #FFF;
	text-decoration: none;
}

@media (max-width: 767px) {   
        
    .popup-window {      
        padding: 15px;       
    }
    
    .popup-text {
		height: auto;
		overflow-x: auto;
	}	
    
    .form-field-label {
		-moz-appearance: none;
		-webkit-appearance: none;
	}
	
	.form-field:not(select) {
		-moz-appearance: none;
		-webkit-appearance: none;
	}    
}


@media (max-width: 768px) {
    
    #smc-tooltip {
        display: none!important;
    }
    
    .popup-window {	
		padding: 10px;	
		width: 100%;
	}

	.popup-close {
		position:relative; 
		bottom:10px; 
		right:-10px;	
	}

	.popup-x {
		width:45px;
		height:45px; 
		line-height: 45px;
	}	
    
	.smc-legend {
		font-size: 18px;
		position: fixed;
        top: 2%;
		right: 5%;
        padding: 18px;
        width: 90%;
		margin: auto;
		line-height: 150%;
		z-index: 1000;
		background-color: rgba(90,90,90,.95);
		max-height: 94vh;
		overflow-y: scroll;
    }
	
	.smc-legend [filter] {
		border: solid 3px #FFF;
		width: 27px;
		height: 27px;
		min-width: 27px;
		min-height: 27px;
	}    
	
	/* scroll to top */
	.scrollup{	
		font-size: 24px;		
		width:48px!important;
		height:48px!important;
		bottom:57px!important;
		right:4px!important;
        display: none;
	}

	.mobile-filter{	
		font-size: 18px;
		width:48px!important;
		height:48px!important;
		bottom:5px!important;
		right:4px!important;
		line-height: 100%;		
	}
	
	.mobile-filter svg {
		margin-top: 10px;
	}    
}

/*DISABLE BUTTONS */
.not-active {
   	pointer-events: none;
   	cursor: default;
	opacity: 0.5; /* Safari, Opera */
	-moz-opacity:0.5; /* FireFox */
	filter: alpha(opacity=50); /* IE */	
}

.bg-light-green {
	background-color: #D8F3E5; 
}

.bg-light-red {
	background-color: #F8D7DA; 	
}

.add-button {
	min-width: 150px;
}

.cookies-consent {
    padding: 25px;
    border: solid 1px #231F20;
    font-size: 105%;
    background-color: #FFF;
    position: fixed;
    width: 100%;
    bottom: 2px;
}

.cookies-consent button {
    padding: 5px 75px;
    margin-top: 15px; 
}

.cookie-consent-heading {
    font-weight: 700;
    font-size: 135%;
    margin-bottom: 5px;
}

.smc-button {
  	font-size:14px;
	font-weight: 700;
	text-transform: uppercase;
	border:1px solid #0084c9;
	padding:9px 18px;
	text-align: center;
	text-decoration:none;
	background-color: rgba(0,132,201,1);	
	color:#fff;
	display:inline-block; 
	margin-right: 2px;
	border-radius: 2px;	
	cursor: pointer;
	white-space: nowrap;
}

.smc-button:link,
.smc-button a:link {	
	color: #fff;	
}

.smc-button:hover,
.smc-button:focus,
.smc-button:visited,
.smc-button:active {
	 color: #fff;
 	 background-color: rgba(0,132,201,.8);
	text-decoration:none;
}

.smc-button:disabled,
.smc-button.a:disabled {
 	opacity: 0.5; /* Safari, Opera */
	-moz-opacity:0.5; /* FireFox */
	filter: alpha(opacity=50); /* IE */
}

.smc-button-white,
.smc-button-white:visited {
  	font-size:14px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	border:1px solid #0084C9;
	padding:9px 18px;
	text-decoration:none;
	background-color: #FFF;	
	color:#0084C9;
	display:inline-block; 
	margin-right: 2px;
	border-radius: 2px;	
	cursor: pointer;
	white-space: nowrap;
}

.smc-button-white:link,
.smc-button-white a:link {	
	color:#0084C9;	
}

.smc-button-white:visited:hover,
.smc-button-white:hover,
.smc-button-white:focus,
.smc-button-white:active {
	color:#FFF;
 	background-color: #0084C9;
	text-decoration:none;
}

.smc-button-white:disabled {
 	opacity: 0.5; /* Safari, Opera */
	-moz-opacity:0.5; /* FireFox */
	filter: alpha(opacity=50); /* IE */	
}

.smc-button-white-red {
  	font-size:14px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	border:1px solid #BD0101;
	padding:9px 18px;
	text-decoration:none;
	background-color: #FFF;	
	color:#BD0101;
	display:inline-block; 
	margin-right: 2px;
	border-radius: 2px;	
	cursor: pointer;
	white-space: nowrap;
}

.smc-button-white-red:link,
.smc-button-white-red a:link {	
	color: #BD0101;	
}

.smc-button-white-red:hover,
.smc-button-white-red:focus,
.smc-button-white-red:visited,
.smc-button-white-red:active {
	color:#FFF;
 	background-color: #BD0101;
	text-decoration:none;
}

.smc-button-white-red:disabled {
 	opacity: 0.5; /* Safari, Opera */
	-moz-opacity:0.5; /* FireFox */
	filter: alpha(opacity=50); /* IE */	
}


.smc-button-white-green {
  	font-size:14px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	border:1px solid #4cae4c;
	padding:9px 18px;
	text-decoration:none;
	background-color: #FFF;	
	color:#4cae4c;
	display:inline-block; 
	margin-right: 2px;
	border-radius: 2px;	
	cursor: pointer;
	white-space: nowrap;
}

.smc-button-white-green:link,
.smc-button-white-green a:link {	
	color:#4cae4c;	
}

.smc-button-white-green:hover,
.smc-button-white-green:focus,
.smc-button-white-green:active {
	color:#fff;
 	background-color: #4cae4c;
	text-decoration:none;
}


.smc-button-white-green:disabled {
 	opacity: 0.5; /* Safari, Opera */
	-moz-opacity:0.5; /* FireFox */
	filter: alpha(opacity=50); /* IE */	
}

.smc-button-white-brown,
.smc-button-white-brown:visited {
  	font-size:14px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	border:1px solid #93663F;
	padding:9px 18px;
	text-decoration:none;
	background-color: #FFF;	
	color:#93663F;
	display:inline-block; 
	margin-right: 2px;
	border-radius: 2px;	
	cursor: pointer;
	white-space: nowrap;
}

.smc-button-white-brown:link,
.smc-button-white-brown a:link {	
	color:#93663F;	
}

.smc-button-white-brown:visited:hover,
.smc-button-white-brown:hover,
.smc-button-white-brown:focus,
.smc-button-white-brown:active {
	color:#FFF;
 	background-color: #93663F;
	text-decoration:none;
}

.smc-button-white-brown:disabled {
 	opacity: 0.5; /* Safari, Opera */
	-moz-opacity:0.5; /* FireFox */
	filter: alpha(opacity=50); /* IE */	
}

.smc-button-red {
  	font-size:14px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	border:1px solid #CA1929;
	padding:9px 18px;
	text-decoration:none;
	background-color: #CA1929;	
	color:#fff;
	display:inline-block; 
	margin-right: 2px;
	border-radius: 2px;	
	cursor: pointer;
	white-space: nowrap;
}

.smc-button-red:link,
.smc-button-red a:link {	
	color: #fff;	
}

.smc-button-red:hover,
.smc-button-red:focus,
.smc-button-red:visited,
.smc-button-red:active {
	color: #fff;
 	background-color: #e94957;
	text-decoration:none;
}

.smc-button-red:disabled {
 	opacity: 0.5; /* Safari, Opera */
	-moz-opacity:0.5; /* FireFox */
	filter: alpha(opacity=50); /* IE */	
}


.smc-button-green {
  	font-size:14px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	border:1px solid #0D7F39;
	padding:9px 18px;
	text-decoration:none;
	background-color: #0D7F39;	
	color:#fff;
	display:inline-block; 
	margin-right: 2px;
	border-radius: 2px;	
	cursor: pointer;
	white-space: nowrap;
}

.smc-button-green:link,
.smc-button-green a:link {	
	color: #fff;	
}

.smc-button-green:hover,
.smc-button-green:focus,
.smc-button-green:visited,
.smc-button-green:active {
	color: #fff;
 	background-color: #11a248;
	border:1px solid #11a248;
	text-decoration:none;
}

.smc-button-green:disabled {
	opacity: 0.5; /* Safari, Opera */
	-moz-opacity:0.5; /* FireFox */
	filter: alpha(opacity=50); /* IE */	
}

.smc-button-green:disabled {
 	opacity: 0.5; /* Safari, Opera */
	-moz-opacity:0.5; /* FireFox */
	filter: alpha(opacity=50); /* IE */
}

.smc-button-sm {
	font-size:10px;	
	padding:4px 18px;
	font-weight: 500;
}

.smc-button-md {
	font-size:12px;	
	padding: 5px 24px;	
	font-weight: 600;
}

.smc-button-lg {
	font-size:18px;	
	padding: 4px 27px;	
	font-weight: 600;
}

.form-item {
    margin-bottom: 24px;
}

.form-item .row {
    margin-bottom: 0px;
}

.form-label {
	color:#000;
	font-weight: 800;
	font-size: 13px;
	padding-bottom: 3px;
    line-height: 100%;
	letter-spacing: -.6px;
    text-transform: uppercase;
    white-space: nowrap;
}

.form-label svg {
	font-size: 90%;	
} 

.form-field-label {
	font-size: 13px;
	font-weight: normal;
	color: #595959;
	border: 2px solid #d9d9d9;
	border-radius: 0;
	margin-left: 2px;
	background-color: #d9d9d9;
	padding: 8px 15px; 	
	letter-spacing: -.5px;
}

.form-field-label:focus {
	border-color: #D9D9D9;	
	outline: 0;	
}

.form-field-label::-webkit-input-placeholder {
   color: #FFFFA0;
}

.form-field-label::-moz-placeholder {  /* Firefox 19+ */
   color: #FFFFA0;  
}

.form-field-label:-ms-input-placeholder {  
   color: #FFFFA0;  
}

.form-field-label-blue {
	font-size: 11px;
	font-weight:700;
	color: #0084C9;
	border: 1px solid #0084C9;
	border-radius: 0;
	margin-left: 2px;
	background-color: #FFF;
	text-transform:uppercase;
	padding: 8px 8px 8px 15px; 
}

.form-field {
	font-size: 13px;
	color: #000000;
	background-color: #FFF;
	border: 2px solid #9ea3a9;
	border-radius: 0px;
	font-weight: normal;
	margin: 0px;
	padding: 8px;
}

.form-field:disabled {
	opacity: 0.5; /* Safari, Opera */
	-moz-opacity:0.5; /* FireFox */
	filter: alpha(opacity=50); /* IE */	
}

.form-field:focus {
	border-color: #0084C9;	
	outline: 0;	
}

.form-field-focus {
	background-color: #f2f2f2!important;
}

.form-field-focus:focus {
	background-color: #e8f3fd!important;
	color: #08375e!important;
	font-weight: 700;
}

.form-field-green {
	font-size: 13px;
	color:#309760;
	background-color: #FFF;
	border: 2px solid #309760;
	font-weight: normal;
	margin: 0px;
	padding: 8px 5px;	
}

.form-field-green::-webkit-input-placeholder {
   color:rgba(48,151,96,1.0);
   font-weight:bold;
}
.form-field-green:focus::-webkit-input-placeholder {
 color:rgba(48,151,96,.5);
}

.form-field-green:-moz-placeholder {
    color:rgba(48,151,96,1.0);
	 font-weight:bold;
}
.form-field-green:focus:-moz-placeholder {
  color:rgba(48,151,96,.5);
}

.form-field-green::-moz-placeholder {
  color:rgba(48,151,96,1.0);
   font-weight:bold;
}
.form-field-green:focus::-moz-placeholder {
  color:rgba(48,151,96,.5);
}

.form-field-green:-ms-input-placeholder {
   color:rgba(48,151,96,1.0);
    font-weight:bold;
}
.form-field-green:focus:-ms-input-placeholder {
  color:rgba(48,151,96,.5);
}

.form-field-green-check {
	background: url("https://apps.smcpackaging.com/Assets/green_check_16x16.png") right no-repeat;
	background-color:#FFF;
}

.form-field-calendar {
	background: url("https://apps.smcpackaging.com/Assets/calendar_input_box_icon.png") right no-repeat;
	background-color:#FFF;
	font-size: 13px;
	color: #000000;
	border: 2px solid #9ea3a9;
	border-radius: 0px;
	margin: 0px;
	padding: 8px 20px 8px 8px;	
	text-align: center;
}

 @media (max-width: 768px) {  
	.form-field-calendar {
		min-width: 125px;
	}
}

.form-field-calendar:disabled {
	opacity: 0.5; /* Safari, Opera */
	-moz-opacity:0.5; /* FireFox */
	filter: alpha(opacity=50); /* IE */	
}

.form-field-calendar:focus {
	border-color: #0084C9;	
	background: url(https://apps.smcpackaging.com/Assets/calendar_input_box_icon_blue.png) right no-repeat;
	background-color:#FFF;
} 


.form-fields-clock {
	background: url(https://apps.smcpackaging.com/Assets/clock_input_box_icon.png) right no-repeat;
	background-color:#FFF;
	font-size: 13px;
	color: #000000;
	border: 2px solid #9ea3a9;
	border-radius: 0px;
	padding: 8px 20px 8px 8px;	
	margin: 0px;
}

.form-field-clock:focus {
	border-color: #0084C9;	
	background: url(https://apps.smcpackaging.com/Assets/clock_input_box_icon_blue.png) right no-repeat;
	background-color:#FFF;
} 

.form-field-user {
	background: url(https://apps.smcpackaging.com/Assets/user_icon.png) no-repeat;
	background-position: right 5px center; 
	background-color:#FFF;
	font-size: 13px;
	color: #000000;
	border: 2px solid #9ea3a9;
	border-radius:2px;
	margin: 0px;
	padding: 12px 20px 12px 8px;	
}

.form-field-pw {
	background: url(https://apps.smcpackaging.com/Assets/pw_icon.png) no-repeat;
	background-position: right 5px center; 
	background-color:#FFF;
	font-size: 13px;
	color: #000000;
	border: 2px solid #9ea3a9;
	border-radius:2px;
	margin: 0px;
	padding: 12px 20px 12px 8px;	
}

.form-field-search {
	background: url(https://apps.smcpackaging.com/Assets/search_box.png) right no-repeat;
	background-color:#FFF;
	font-size: 13px;
	color: #000000;
	border: 2px solid #9ea3a9;
	border-radius: 0px;
	padding: 8px 28px 8px 8px;	
	margin: 0px;
}

.form-field-search:focus {
	border-color: #0084C9;	
	background: url(https://apps.smcpackaging.com/Assets/search_box_blue.png) right no-repeat;
	background-color:#FFF; 
} 

.form-field-email {
	background: url(https://apps.smcpackaging.com/Assets/email_icon.png) no-repeat;
	background-position: right 5px center; 
	background-color:#FFF;
	font-size: 13px;
	color: #000000;
	border: 2px solid #9ea3a9;
	border-radius:2px;
	margin: 0px;
	padding: 12px 20px 12px 8px;	
}

.form-field-email:focus {
	border-color: #0084C9;	
	background: url(https://apps.smcpackaging.com/Assets/email_icon_blue.png) right no-repeat;
    background-position: right 5px center; 
	background-color:#FFF; 
} 


.search-expand {	
	background: url(https://apps.smcpackaging.com/Assets/search_box.png) no-repeat 9px center;
	background-color:#FFF; 
	font-size: 13px;
	color: transparent;
	border: 2px solid #9ea3a9;
	padding: 6px;	
	margin: 0px;	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;	
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
	width: 36px;
}

.search-expand:focus {
	color: #000;
	border-color: #0084C9;	
	background: url(https://apps.smcpackaging.com/Assets/search_box_blue.png) no-repeat;
	background-position: 7px 9px; 
	padding: 7px 7px 7px 28px;	
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
	width: 100%;
} 

.search-expand::-webkit-input-placeholder { /* Chrome/Opera/Safari */
     color:transparent;
}
.search-expand::-moz-placeholder { /* Firefox 19+ */
     color:transparent;
}
.search-expand:-ms-input-placeholder { /* IE 10+ */
     color:transparent;
}
.search-expand:-moz-placeholder { /* Firefox 18- */
     color:transparent;
}

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
	top: -33%;
	bottom: 10px;
	left: 10px;
	font-size: 80%;
	font-weight: 700;
	color: #000;
	text-transform: uppercase;
	opacity: 1; 
}


.floating-label {
	position: absolute;
	pointer-events: none;
	left: 10px;
	top: 25%;
	bottom: 25%;
	color: #999;	
	transition: 0.2s ease all;
}

.oe-placeholder::-webkit-input-placeholder {
   color: #33b8ff;
}

.oe-placeholder:-moz-placeholder {  /* Firefox 19+ */
   color: #33b8ff;  
}

.oe-placeholder:-ms-input-placeholder {  
   color: #33b8ff;  
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
   color:rgba(153,153,153,1.0);
}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
 color:rgba(153,153,153,.5);
}

input:-moz-placeholder, textarea:-moz-placeholder {
    color:rgba(153,153,153,1.0);
}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {
  color:rgba(153,153,153,.5);
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color:rgba(153,153,153,1.0);
}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
  color:rgba(153,153,153,.5);
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
   color:rgba(153,153,153,1.0);
}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
  color:rgba(153,153,153,.5);
}

select.form-field {	
	padding: 6px 5px 5px 5px;
}

.heading {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: -.4px;
	color: #000;
	background-color: #CEE3ED;
	text-align: center;	
	padding: 0 auto;
	position: relative;
}

.heading .fa-sort-up {
	position: absolute;
	color: #0084C9;
	font-size: 14px;
	top: 12px;
	right: 7px;		
}

.heading .fa-sort-down {
	position: absolute;
	color: #0084C9;
	font-size: 14px;
	bottom: 12px;
	right: 7px;		
}

.heading[order]:hover,
.heading [order]:hover {
	cursor: pointer;
}

.sub-heading {
	font-size: 16px;
	text-transform: uppercase;
	font-style: normal;
	color: #000;
	text-align: left;
	font-weight: 900;
}

.sub-heading-blue {
	font-size: 18px;
	font-style: normal;
	color: #0084c9;
	text-align: left;
	padding-top: 6px;
	padding-bottom: 6px;
	font-weight: 900;
}

.text-red,
.text-red a {
	color: #FF0000!important;	
}

.light-blue-border {
	border: 2px solid #C1DAE6;
}

.hfr-R {
	color: #68DE7C!important;
}

.hfr-H {
	color: #F2d675 !important;
}

.hfr-F {
	color: #ffabaf !important;
}

.error-message-box {
	font-size: 11px;
	color: #000000;
	border: 1px solid #000000;
	text-align: left;
	background-color: #FFFFCC;
	padding: 10px;	
}


.black-border {
	border: 1px solid #000000;
}

.loading {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px; 
	border-radius: 8px;
	background-color: rgba(51,51,51,0.90);
	position:absolute;
	border: 0px;
	z-index: 1003;
	width: 150px;
	height: 150px;
	line-height:150px;
	display: none;
	text-align: center;	
	color: #FFF;	
	font-size: 14px;
  	font-weight: normal;
}

.loading span {
	display: inline-block;
	vertical-align: middle;    
	line-height: normal;
	font-size: 26px;
	font-weight: 900;	
}

.loading span div {
	padding-top: 5px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	white-space: normal;
    margin-top: 10px;
}

.text-smallest {
	font-size: 9px;
}

.text-smaller {
	font-size: 11px;
}

.text-small {
	font-size: 12px;
	line-height: 1.1em;
}

.text-medium {
	font-size: 14px;
}

.text-large {
	font-size: 18px;
}

.text-larger {
	font-size: 22px;
}

.text-largest {
	font-size: 26px;
}

.error-message {		
	background-color: #0084C9;
	font-size: 18px;
	letter-spacing: -.4px;
	border: 0px;
	padding: 15px;
	margin-bottom: 0px;
	color: #fff;
	font-weight: 100;
	text-align: center;
	display: none; 
	position: fixed;
	z-index: 1001;
	width: 100%;
	top: 0px;
}

.error-message a:link,
.error-message a:visited,
.error-message a:active {
	color: #f2f2f2;
	text-decoration: underline;	
}

.error-close {
	background-color: #FFF;
	color: #0084C9;
	font-weight: 600;
	font-size: 70%;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center; 
	border-radius: 50%;
	cursor: pointer;
	display: inline-block;
	position: fixed;
	top: 12px;
	right: 24px;
	z-index: 1002;
}

.error-close:hover {
	opacity: .8;
}

.ui-draggable:hover {
	cursor: grab;
}

.fields-left {
	font-size: 13px;
	font-weight: 600;
	color: #000000;
	background-color: #cee3ed;
	padding: 8px;
	text-align: right;
    letter-spacing:-.7px;
}

.fields-right {
	font-size: 13px;
	font-weight: normal;
	color: #000000;
	background-color: #E9EBEE;
	padding: 8px;	
}

.clickable    {
    cursor: pointer;
}

.un-clickable    {
    cursor: default!important;
}

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;  
  line-height: 100%;   
}

.row.gutters-5 {
  margin-right: 0;
  margin-left: 0;
}
.row.gutters-5 > [class^="col-"],
.row.gutters-5 > [class*=" col-"] {
  padding-right: 5px;
  padding-left: 5px;
   padding-bottom: 5px;  
  line-height: 100%;   
}

.row.gutters-2 {
  margin-right: 0;
  margin-left: 0;    
}
.row.gutters-2 > [class^="col-"],
.row.gutters-2 > [class*=" col-"] {
  padding-right: 2px;
  padding-left: 2px;
  padding-bottom: 2px;  
  line-height: 100%;  
}

.toggle-s {
	font-size: 14px;
	font-weight:300;
	text-transform:uppercase;
	color: #FFF;
	background-color: #0084C9;
	padding: 8px;
	margin:0; 
	border-right: 2px solid #FFF;
	text-align:center;
	line-height:24px;
	display: inline-block;
	white-space:nowrap;
	letter-spacing: -.5px;
}

.toggle-s:link {	
	color: #FFF !important;	
}

.toggle-s:link:hover {	
	text-decoration: none;	
}

.toggle-s .badge {
	font-size: 80%;
	background-color: #FFF;
	color: #0084C9;
	padding: 3px 6px;
	border-radius: 2px;
	margin-left: 8px;
	font-weight: 400;
}

.toggle-us {
	font-size: 14px; 
	font-weight:300;
	text-transform:uppercase;
	color: #FFF;
	background-color: #9ea3a9;
	padding: 8px;
	margin:0; 
	border-right: 2px solid #FFF;	
	text-align:center;
	line-height:24px;
	display: inline-block;
	white-space:nowrap;
	cursor: pointer;
	letter-spacing: -.5px;
}

.toggle-us:hover {
	cursor:pointer; 
	opacity: 0.8; /* Safari, Opera */
	-moz-opacity:0.8; /* FireFox */
	filter: alpha(opacity=80); /* IE */
	text-decoration: none;
	color: #FFF;
}

.toggle-us:link {	
	color: #FFF;	
}
.toggle-us a:link {	
	color: #FFF;	
}

.toggle-us:link:hover {	
	text-decoration: none;	
}

.toggle-us .badge {
	font-size: 80%;
	background-color: #FFF;
	color: #9ea3a9;
	padding: 3px 6px;
	border-radius: 2px;
	margin-left: 8px;
	font-weight: 400;
}

.toggle2-s {
	font-size: 12px;
	font-weight:300;
	text-transform:uppercase;
	color: #FFF;
	background-color: #231F20;
	padding: 4px;
	margin:0; 
	border-right: 2px solid #FFF;
	text-align:center;
	line-height:24px;
	display: inline-block;
	white-space:nowrap;
}

.toggle2-s:link {	
	color: #FFF !important;	
}

.toggle2-s:link:hover {	
	text-decoration: none;	
}

.toggle2-s .badge {
	font-size: 80%;
	background-color: #FFF;
	color: #231F20;
	padding: 3px 6px;
	border-radius: 2px;
	margin-left: 8px;
	font-weight: 300;
}

.toggle2-us {
	font-size: 12px; 
	font-weight:300;
	text-transform:uppercase;
	color: #FFF;
	background-color: #737373;
	padding: 4px;
	margin:0; 
	border-right: 2px solid #FFF;	
	text-align:center;
	line-height:24px;
	display: inline-block;
	white-space:nowrap;
	cursor: pointer;
}

.toggle2-us:hover {
	cursor:pointer; 
	opacity: 0.8; /* Safari, Opera */
	-moz-opacity:0.8; /* FireFox */
	filter: alpha(opacity=80); /* IE */
	text-decoration: none;
	color: #FFF;
}

.toggle2-us:link {	
	color: #FFF;	
}
.toggle2-us a:link {	
	color: #FFF;	
}

.toggle2-us:link:hover {	
	text-decoration: none;	
}

.toggle2-us .badge {
	font-size: 80%;
	background-color: #FFF;
	color: #9ea3a9;
	padding: 3px 6px;
	border-radius: 2px;
	margin-left: 8px;
	font-weight: 500;
}

.smc-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    min-width: 10px;
    position: absolute;
    padding: 3px 7px;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #ff3b30; /* iOS-style red */
    border-radius: 999px; /* Fully rounded */
    font-size: 85%;
    font-weight: 600;
    z-index: 1;
}

.smc-badge-xs {
	font-size: 8px;
	font-weight: 100;
	padding: 2px !important;
    line-height: 100%;
	min-width: 13px;
	min-height: 13px;
    top:-4px; 
    right:-4px;
}

.smc-badge-sm {
	font-size: 10px;
	font-weight: 400;	
	padding: 2px !important;
	min-width: 13px;
	min-height: 13px;  
    top:-7px; 
    right:-7px;
}

.smc-badge-md {
	font-size: 12px;
	font-weight: 600;
    padding: 2px !important;
	min-width: 16px;
	min-height: 16px; 
    top:-8px; 
    right:-8px;
}

.smc-badge-lg {
	font-size: 16px;
	font-weight: 800;
	padding: 6px !important;	
	min-width: 28px;
	min-height: 28px;
}

.smc-badge-blue {
	background-color: #6AA2B8!important;	
}

.smc-badge-white {
	background-color: #FFF!important;
	color: #359BED!important;
}

.smc-badge-black {
	background-color: #000!important;	
}

.smc-badge-red {	
	background-color: #FE0405!important;	   
}

.instructions {
	margin-bottom: 20px;
}

.meter { 
	height: 55px;  /* Can be anything */
	width:95vw;
	max-width:400px;
	display: none;
	position: absolute;
	background: #555;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
	-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
	box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
	opacity: .80; /* Safari, Opera */
	-moz-opacity:0.80; /* FireFox */
	filter: alpha(opacity=80); /* IE */
	z-index:110;
}

.meter-progress {
	display: block;
	height: 100%;
	border-radius: 4px;
	background-color: #0084c9;
	position: relative;
	overflow: hidden;
	z-index:111;
}

.meter-text {
	position: absolute;
	display: none;
	color:#FFF;
	text-align:center;
	font-weight: 500px;
	font-size: 14px;
	z-index:112;
}

.desc-count {
	margin: auto; 
	position: absolute; 
	top: 2px; 
	right: 3px; 
	white-space:nowrap; 
	font-size: 80%; 
	color: darkgrey;
}

.hidden-file,
.hidden {
	display:none;
}

.hidden-file2 {
	position: absolute;
  	left: -55px;
	height:30px;
	opacity: 0; /* Safari, Opera */
	-moz-opacity:0; /* FireFox */
	filter: alpha(opacity=0); /* IE */ 	
}
 
.textarea {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    display:block;/*reset from inline*/
    width:100%!important;
    overflow-y:auto;/*resets IE*/
    overflow-x:hidden;/*resets IE*/
}

.smc-tag {
	font-size: 14px;
	text-align:center;
	color: #FFF;
	background-color: #359BED;
	padding: 4px 12px;
	margin: 0 2px 2px 0;
	white-space: nowrap;
	display: inline-block;
}

.smc-tag:hover {
	-webkit-filter: brightness(90%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
	color: #FFF;
	text-decoration: none;
}

.smc-tag span {
	font-size: 90% !important;
	cursor: pointer;
	margin-left: 10px;
	font-weight: 900;	
}

.smc-tag span:hover,
.smc-tag a:hover,
.smc-tag svg:hover {
	-webkit-filter: brightness(80%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
	color: #FFF;
	text-decoration: none;
}

.smc-tag a:link,
.smc-tag a:visited,
.smc-tag a:active {
	color: #FFF;
	text-decoration: none;	
}

.smc-tag-sm {
    border-radius: 2px;
    font-size: 12px;
	padding: 2px 6px;
    line-height: 95%;
}

.smc-tag-sm span {
	margin-left: 6px;
	font-weight: 900;	
}

.tag-green {	
	background-color:  #28a745;
}

.tag-orange {
	background-color:  #ffc107;	
}

.tag-red {	
	background-color:  #dc3545;
}

.tag-black {	
	background-color:  #000;
}

.tag-file {
	color: #4F6F82;
	background-color: #CEE0ED;
	border-radius: 2px;
	font-size: 12px;
	text-align:center;
	padding: 4px 8px;
	margin: 0 2px 2px 0;
	white-space: nowrap;
	display: inline-block;
}

.tag-file:hover {
	opacity: .80; /* Safari, Opera */
	-moz-opacity:0.80; /* FireFox */
	filter: alpha(opacity=80); /* IE */	
	color: #4F6F82;
	text-decoration: none;
}

.tag-file span {
	font-size: 12px !important;
	cursor: pointer;
	margin-left: 10px;
	font-weight: 900;	
}

.tag-file span:hover,
.tag-file a:hover {
	opacity: .80; /* Safari, Opera */
	-moz-opacity:0.80; /* FireFox */
	filter: alpha(opacity=80); /* IE */	
	color: #4F6F82;
	text-decoration: none;
}

.tag-file a:link,
.tag-file a:visited,
.tag-file a:active {
	color: #4F6F82;
	text-decoration: none;	
}


.tag-item {
	font-size: 14px;
	text-align:center;
	padding: 8px 10px;
	margin: 0 2px 2px 0;
	white-space: nowrap;
	display: inline-block;
	color: #75522C;
	font-weight: 300;
	background-color: #FFF;
	border: 1px dashed #75522C ;
	margin-right: 5px;
} 

.smc-box {
	border: #E3B07B solid 2px;
	border-radius: 2px;
}

.smc-box-score {
	border-bottom: #E3B07B dashed 2px;
	padding: 0;
	margin: 0;
}

.name-oval {	
    font-weight: normal;
    color: #FFF;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    background: #BDBDBD;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.name-oval-xs {
	font-size: 12px;
	width: 24px;
	line-height: 24px;
	-moz-border-radius: 13px / 12px;
	-webkit-border-radius: 13px / 12px;
	border-radius: 13px / 12px;    
}

.name-oval-sm {
	font-size: 18px;
	width: 48px;
	line-height: 48px;	
	-moz-border-radius: 25px / 24px;
	-webkit-border-radius: 25px / 24px;
	border-radius: 25px / 24px;
}

.name-oval-md {
	font-size: 20px;
	width: 72px;
	line-height: 72px;
	-moz-border-radius: 37px / 36px;
	-webkit-border-radius: 37px / 36px;
	border-radius: 37px / 36px;
}

.name-oval-lg {
	font-size: 22px;
	width: 96px;
	line-height: 96px;
	-moz-border-radius: 49px / 48px;
	-webkit-border-radius: 49px / 48px;
	border-radius: 49px / 48px;   
}

.name-oval-xl {
	font-size: 24px;
	width: 144px;
	line-height: 144px;
	-moz-border-radius: 73px / 72px;
	-webkit-border-radius: 73px / 72px;
	border-radius: 73px / 72px;
}

.search-box {
	position: absolute;
	margin: 0px 0px 0px 0px;
	width: 200px;
	padding:0px;
	background-color: #FFF;
	border: 1px solid #9ea3a9;	
	color: #000;
	z-index:998;
	-moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    display:block;/*reset from inline*/
    overflow-x:hidden;/*resets IE*/
	overflow-y:auto;
	-webkit-box-shadow: 0px 5px 15px -7px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 5px 15px -7px rgba(0,0,0,0.6);
	box-shadow: 0px 5px 15px -7px rgba(0,0,0,0.6);
}

.search-list {
	margin: 0px;
	padding: 0px;
}

.search-list ul {	
	font-size:11px;
	color:#000;
	letter-spacing: -.6px;
	padding:0;
	margin:0;
}

.search-list ul li {
	list-style:none;
	margin: 0px;
	padding: 4px 8px;
	border-bottom:1px dotted #d6d9db;
	cursor: pointer;
}

.search-list ul li:last-child {	
	border: none;
}

.search-list ul span {
	color:#9ea3a9; 
	font-weight: 100;
	font-size: 80%;
	letter-spacing: -.3px;
} 

.search-list ul li:hover {
	background-color: #0084C9;
	color:#FFF;
}

.search-list li:hover span {
	color: #000;
}

.search-list ul strong {
	font-weight: 900;
    display: inline-block;
} 

.search-list-more {
	background-color: #0084C9; 
	text-align: center;
	color:#FFF;
}

x {
	display: none;
}

.selected-option {
	background-color: #0084C9;
	color:#FFF;
}

.selected-option span {
	color:#000 !important;
}

.box-size {
	font-size: 12px;
    line-height: 1.1em;
	padding: 2px 8px; 
	color: #000; 
	background-color: #FDBA00;
	letter-spacing: -.4px;
}

.list-tag {
	color: #FFF!important;
	background-color: rgba(0,0,0,1.0); 
    letter-spacing: -.05rem;
	margin: 0 1px;
	float: right;
	white-space: nowrap;
	vertical-align: middle;	
	text-align: center;
	display: inline-block;
    cursor: pointer;
	overflow: visible; 	
}

.list-tag:link,
.list-tag a:link {	
	color: #FFF;	
}

.list-tag:hover,
.list-tag:focus,
.list-tag:visited,
.list-tag:active {
	color: #FFF;
	text-decoration:none;
}

.list-tag:hover {
	opacity: .75;
}

.list-tag-sample {
	background-color: #AA00FF !important;
}

.list-tag-graphics {
	background-color: #FF00AA !important;
}

.list-tag-header {
	background-color: #75522C !important;
}

.list-tag-tooling {
	background-color: #585958 !important;
}

.list-tag-misc {
	background-color: #435ABB !important;
}

.list-tag-spec {
	background-color: #A9AAAD !important;
    float:none; 
    width: auto; 
    padding-right: 10px; 
    padding-left: 10px; 
    border-radius: 4px
}

.list-tag-pc {
    background-color: #E5258B !important;
    float:none; 
    width: auto; 
    padding-right: 10px; 
    padding-left: 10px; 
    border-radius: 4px
}

.list-tag-sheet {
	background-color: #309760 !important;
	border: 1px solid #309760;
	color: #FFF !important;
}

.list-tag-estimate {
	background-color: #2DBAA4 !important;
}

.list-tag-order {
	background-color: #44A23F !important;
}

.list-tag-quote {
	background-color: #309760 !important;
}

.list-tag-packet {
	border-radius: 2px;
	background-color: #0084c9 !important;
}

.list-tag-pricelist {
	border-radius: 2px;
	background-color: #B11611 !important;
}

.list-tag-item {
	background-color: #DC9C14 !important;
} 

.list-tag-resale {
	background-color: #5B9139 !important;
} 

.list-tag-makeup {
	background-color: #ff9900 !important;
}

.list-tag-project {	
	background-color: #0161F8 !important;
	float:none;
	width: auto !important;
	padding: 1px 6px;
	border-radius: 2px;
}

.list-tag-project svg {
	font-size: 80%;
}

.list-tag-red {	
	background-color: #BD0101 !important;
}

.list-tag-green {	
	background-color: #056A04 !important;
}

.list-tag-smc {	
	background-color: #0084C9 !important;
}

.list-tag-xs {
	font-size: 10px !important;
	font-weight: 200;
	height: 16px;	
	min-width: 16px;
	line-height: 16px;
}

.list-tag-sm {
	font-size: 12px !important;
	font-weight: 500;
	height: 18px;
	min-width: 18px;
	line-height: 18px;
}

.list-tag-md {
	font-size: 16px !important;
	font-weight: 600;
	height: 27px;
	min-width: 27px;
	line-height: 27px;
}

.list-tag-lg {
	font-size: 22px !important;
	font-weight: 600;
	height: 39px;
	min-width: 39px;
	line-height: 39px;
}

.list-tag-xl {
	font-size: 30px !important;
	font-weight: 600;
	height: 53px;
	min-width: 53px;
	line-height: 53px;
}

.status-bar {
	text-transform: uppercase;
	color: #FFF;
	background-color: #DCDCDC;
	margin: 0px 1px;
	text-align: center;
	line-height: 12px;
	white-space: nowrap;
}

.is-table-row {
	display: table;
	width: 100%;
}

.is-table-cell  {
	float: none;
	display: table-cell;
}

.row.match-my-cols {
    overflow: visible; 
}

.row.match-my-cols [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

.text-small-gray {
	color: #999;
	font-size: 11px;
}

.text-gray {
	color: #999;
}

.red-bg {
	background-color: #F2DEDE;
}	

.red-border {
	border-color: red;
}	
	
													   
.green-bg {
	background-color: #DFF0D8;		 										   
 }

.smc-list{
	margin-top: 10px;
	letter-spacing: -.3px;
}

.smc-list tr.heading:first-child > td,
.smc-list tr:first-child > td.heading {
	background-color: #CEE3ED;
	height: 32px;	
	position: sticky;
	top: 0;	
}

.smc-list:not(.ignore) tr:not(.heading):not(.text-small):not(.ignore) {
	height: 45px;
	text-align: center;
}

.smc-list:not(.ignore) td:not(.heading) {	
	padding: 6px 9px;
}

.smc-list-buttons {
	display:none; 
	right:4px; 
	top: 4px; 
	position: absolute; 
	white-space: nowrap;
}

.spec-file {
	font-size: 75%; 
	border-radius: 4px; 
	background-color: #A9AAAD; 
	color: #FFF;
	padding: 2px 10px;
}

.spec-file-pc {
	font-size: 75%; 
	border-radius: 4px; 
	background-color: #E5258B; 
	color: #FFF;
	padding: 2px 10px;
}

.inventory-detail {
    background-color: #93663F; 
    color: #FFF; 
    border-color: #93663F;
    cursor: pointer;
}

.invalid-email,
.invalid-email:focus {
    color:#C60001;
    border-color: #C60001;
}

.cal-red-text {
	color: red!important;
	border: red 1px solid!important;
}

.cal-brown-text {
	border: #75522C 1px solid!important;
	color:#75522C!important;
}

.cal-green-text {
	border: #00FF00 1px solid!important;
	color:#00FF00!important;
}

.cal-blue-text {
	border: #01FDFE 1px solid!important;
	color: #01FDFE!important;
}

.cal-bob-text {
	border: #0084c9 2px solid!important;
	color: #0084C9!important;
}

.cal-orange {
	color: #F77000!important;
}

.orange-box {
	font-size: 14px;	
	text-transform:uppercase;
	color: #000;
	padding: 6px 9px; 
	background-color:#FFBB00;	
    display:block;/*reset from inline*/
    width:100%;
    overflow-y:visible;/*resets IE*/
    overflow-x:visible;/*resets IE*/
}

/* scroll to top */
.scrollup{
	color: #FFF;
    position:fixed;
	width:32px;
	height:32px;
    bottom:1px;
    right:20px;
	padding-top: 7px;
	font-weight: 900;
	background-color: rgba(79,111,130,0.9);
    opacity:.9;
    border: solid 1px #FFF;
    border-right: none;
    display: none;
}

a.scrollup {
    color: #FFF;
	outline:0;
	text-align: center;
}

a.scrollup:hover,a.scrollup:active,a.scrollup:focus {
    color: #FFF;
	opacity:1;
	text-decoration:none;
}
a.scrollup svg {
	color: #FFF;
}
a.scrollup i:hover {
	text-decoration:none;
	color: #FFF;
	opacity:1;
}

.mobile-filter{
	color: #FFF;
    position:fixed;
	width:32px;
	height:32px;
    bottom:35px;
    right:20px;
	padding-top: 7px;
	font-weight: 900;
	background-color: rgba(79,111,130,0.9);
    opacity:.9;
    border: solid 1px #FFF;
    border-right: none;
}

a.mobile-filter {
    color: #FFF;
	outline:0;
	text-align: center;
}

a.mobile-filter:hover,a.mobile-filter:active,a.mobile-filter:focus {
    color: #FFF;
	opacity:1;
	text-decoration:none;
}
a.mobile-filter i {
	margin-top: 10px;
	color: #fff;
}
a.mobile-filter i:hover {
	text-decoration:none;
	color: #FFF;
	opacity:1;
}

.cb-container {
	color: #000;
	display: block;
	position: relative;
	padding-left: 25px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.cb-container input[type='checkbox'],
.cb-container input[type='radio'] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    left: 81px;
    bottom: 1px;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 2px;
	left: 0;
	height: 16px;
	width: 16px;
	background-color: #D9D9D9;
}

/* On mouse-over, add a grey background color */
.cb-container:hover input ~ .checkmark {
  	background-color: #ccc;
}

.cb-container input:checked:disabled ~ .checkmark {
 	background-color: #D9D9D9;
	opacity: 0.7; /* Safari, Opera */
	-moz-opacity:0.7; /* FireFox */
	filter: alpha(opacity=70); /* IE */
}

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

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

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

/* Style the checkmark/indicator */
.cb-container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

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

.cb-container-black input:checked ~ .checkmark {
 	 background-color: #000;
}

.checkmark-sm {
	height: 14px;
	width: 14px;
}

.cb-container .checkmark-sm:after {
  left: 5px;
  width: 5px;
  height: 8px;
}

.checkmark-md-lg {
	height: 20px;
	width: 20px;
}

.cb-container .checkmark-md-lg:after {
  left: 7px;
  width: 7px;
  height: 12px;
}

.checkmark-lg {
	height: 24px;
	width: 24px;
}

.cb-container .checkmark-lg:after {
  top: 3px;
  left: 8px;
  width: 8px;
  height: 14px;
}

/* Create a custom checkbox */
.radiobutton {
	position: absolute;
	top: -1px;
	left: 2px;
	height: 16px;
	width: 16px;
	margin-top: 2px;
	background-color: #D9D9D9;
	border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.cb-container:hover input ~ .radiobutton {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.cb-container input:checked ~ .radiobutton {
  background-color: #0084C8;
}

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

/* Show the radiobutton when checked */
.cb-container input:checked ~ .radiobutton:after {
  display: block;
}

/* Style the radiobutton/indicator */
.cb-container .radiobutton:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.contact-card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin: auto;
    font-family: arial;
    position: relative;
    color: #000;
    background-color: #E9EBEE;
    border-radius: 16px;    
    width: 100%;
    height: 200px;
    margin-top: 20px;
    z-index: 105;
    text-align: right;
    padding: 10px 15px;
    border: 2px #333 solid;
    letter-spacing: -.7px;
}
	
.contact-card-close {
	position: absolute; 
	border-radius: 50%;
	background-color: #FFF;
    right: 0px;
    top: 10px; 
	line-height: 100%;
    font-size: 22px;
	z-index: 106;
}		
   
.contact-image {
    border-radius: 50%;
    border: 4px solid #333;
    height: 200px;
    width: 200px;
    position: absolute;
    overflow: visible;
    top: 25px;
    left: 41px;
    z-index: 107;
    background-size: 100%!important;
    background: #999B9D;
    display: inline-block; 
    padding-top: 60px;
    font-size: 50px;
    font-weight: 900;
    text-align: center;
    vertical-align: middle;
    color: #FFF;
}
    
.contact-image a:link {
    color: #FFF;
}
    

.contact-border {
    border-radius: 50%;
    border: 4px solid #333;
    height: 250px;
    width: 250px;
    position: absolute;
    overflow: visible;
    top: 0px;
    left: 16px;
    z-index: 107;
    background-size: 100%!important;
    background: #6AA2B8;
    display: inline-block;    
} 
	
.contact-name {
    font-size: 167%;
    font-weight: 900;
	margin-bottom: 10px;
} 	
	
.contact-dept {
    font-size: 95%;
    color:#999;
    letter-spacing: -.8px;
}  	
    
.contact-title {
    color:#337AB7;
    letter-spacing: -.8px;
	margin-bottom: 6px;		
}

.contact-yos {   
	margin-bottom: 6px;
} 	
	
.contact-boss {
    font-size: 95%;
    letter-spacing: -.8px;
	margin-top: 10px;
}
	
.contact-employees {
    font-size: 95%;
    letter-spacing: -.8px;
}	
    
 @media (max-width: 768px) {      

    .contact-card {  
        border-radius: 4px;
        margin-top: 10px;
        z-index: 105;
        text-align: right;
        padding-top: 25px;
        border: 1px #6AA2B8 solid;
        letter-spacing: -.7px;
    }
	 
	 .contact-card-close {		
		right: 0px;
		top: 0px;
	}	

    .contact-shift {
        margin-bottom: 5px;
    } 
     
	.contact-image {
        border-radius: 50%;
        border: 4px solid #333;
        height: 140px;
        width: 140px;       
        top: 25px;
        left: 15px;
        z-index: 107;
        background-size: 100%!important;
        background: #999B9D;
        display: inline-block; 
        padding-top: 40px;
        font-size: 30px;
        color: #FFF;
    }
     
    .contact-border {
       display: none;
    } 
} 

.resize-font-largest {
   font-size: 21px !important;
}

.resize-font-larger {
   font-size: 19.75px !important;
}

.resize-font-large {
   font-size: 18.5px !important;
}
.resize-font-medium-large {
   font-size: 17.25px !important;
}

.resize-font-medium {
   font-size: 16px !important;
}

.resize-font-small-medium {
   font-size: 14.75px !important;
}

.resize-font-small {
   font-size: 13.25px !important;
}

.resize-font-smaller {
   font-size: 12px !important;
}

.resize-font-smallest {
   font-size: 10.75px !important;
}

.alert{ 
  border-width: 0 0 0 8px!important; 
  border-radius: 1px;
}

.alert-small {
   padding: 8px; 
   padding-left: 12px;
   font-size: 90%;
}

.alert-info { 
  border-color: #31708f;
}

.alert-warning { 
  border-color: #8a6d3b;
}

.alert-danger { 
  border-color: #a94442;
}

.alert-success { 
  border-color: #3c763d;
}

.alert-none { 
  border-left: none;
}

.app-icon {
	font-size: 3vw;
}

@media (max-width: 2000px) {		
	.app-icon {
		font-size: 4vw;
	}
}

@media (max-width: 1200px) {
	.app-icon {
		font-size: 6vw;
	}
}

@media (max-width: 992px) {	
	.app-icon {
		font-size: 8vw;
	}   
}

@media (max-width: 768px) {	
	.app-icon {
		font-size: 16vw;
	}	
}

/*ADDED TO ALLOW AUTO COMPLETE WHEN TYPING*/
.allowalphaonly {}
.allownumericwithoutdecimal {}
.allownumericwithdecimal {}
.allownumericwithdecimalfraction {}
.allownumericwithnegative {}
.allowdate{}
.customerno {}
.itemno {}
.nospace {}
.nodoublespace {}
.email-address {}

.pw-container {
    position: relative;
    width: 100%;    
}

.pw-container input {
    padding-right: 30px; /* Add some padding to the right to make room for the icon */
}

.pw-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.pw-toggle img {
    width: 18px;
    height: 18px;
}

#note-list {
    position: relative;
    background-color: #F5F3C1;
    border-top: 8px solid #f5e089;
    color: #000; 
    padding: 12px 12px 8px 12px;  
}

#note-list:hover {
    cursor: pointer;
}

#sub-footer{
	background:#231F20;
    color: #FFF;
}

#smc-content {
	position:absolute;
	width:100%;
	margin:0;	
	padding:0;
}

#smc-print {
	display:none;
}

#smc-body {
	min-height:800px;
}

#inner-headline ul.breadcrumb {
	margin-top:16px;
}

#inner-headline .row {	
	margin-bottom:16px;
}

#smc-more-menu {	
	z-index: 1001;
	display:none;
	position:absolute;
	width: 100%;
	height: auto;
	padding: 35px;	
	opacity: 80%;
	letter-spacing: -.5px;
	font-weight: 600;
}

#smc-more-menu svg {
	margin-bottom: 20px;
	font-size: 300%;
}

#smc-tooltip {
    font-weight: 100;
	background-color: rgba(51, 51, 51, 0.9);
	border:1px solid #CCC;
	border-radius: 2px;
	padding: 6px 12px;
	max-width:350px;
	display: inline; 
	color:#fff; 
	text-align:center;
	font-size:13px;
	-moz-box-shadow:0 0 10px #000;
	-webkit-box-shadow:0 0 10px #000;
	box-shadow: 0px 0px 10px #000; 
	z-index: 999;
	position: absolute;
	letter-spacing: -.4px;
}

#smc-tooltip span {
	background-color:#FFF;	
	color:#000;
	border-radius: 2px;
	font-size: 11px;
	line-height: 100%;
	padding: 0px 5px;
	font-weight: 500;
}

#smc-tooltip span2 {
	background-color:#000;	
	color:#FFF;
	border-radius: 2px;
	font-size: 85%;
	padding: 0px 5px;
	font-weight: 100;
	letter-spacing: -.5px;
}

#smc-tooltip a {
	color:#FFF;
}
 
#contact-container {
    display:none;
	position:absolute;
	width: 98%;
	max-width: 550px;
    font-size: 12px;
    height: 250px;
    border: 0px solid;
}    

#contact-container svg {
	font-size: 90%; 
}

#content {
	min-height:80vh;
}

#divSave {	
	position: fixed;
	bottom: 2px;
	padding: 7px;
	width: 1160px;	
	font-weight: bold;
	color: #FFF;
	z-index: 999;
	background-color: rgba(0,0,0,0.85);
}

#divMore {
     letter-spacing:-.7px;
}

/*----------------------------
    The file upload form
-----------------------------*/

#upload{
   font-family: 'PT Sans Narrow', sans-serif;
	background-color: #373a3d;
	background-image: -webkit-linear-gradient(top, #373a3d, #313437);
	background-image: -moz-linear-gradient(top, #373a3d, #313437);
	background-image: linear-gradient(top, #373a3d, #313437);
	width: 100%;
	padding: 30px;
	border-radius: 3px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	margin: 15px auto 15px;
}

#drop{
    background-color: #2E3134;
    padding: 25px 25px;
    margin-bottom: 30px;
    border: 2px dashed #7f858a;
    border-radius: 3px;
    text-align: center;
    font-size:18px;
    font-weight:700;
    color:#7f858a;
}

#drop input{
    display:none;
}

#upload ul{
    list-style:none;
    margin:0 -30px;
    border-top:1px solid #2b2e31;
    border-bottom:1px solid #3d4043;
}

#upload ul li{
    background-color:#333639;
    background-image:-webkit-linear-gradient(top, #333639, #303335);
    background-image:-moz-linear-gradient(top, #333639, #303335);
    background-image:linear-gradient(top, #333639, #303335);
    border-top:1px solid #3d4043;
    border-bottom:1px solid #2b2e31;
    padding:15px;
    height: 74px;
    position: relative;
}

#upload ul li input{
    display: none;
}

#upload ul li p{
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    color: #EEE;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    top: 20px;
    left: 100px;
}

#upload ul li i{
    font-weight: normal;
    font-style:normal;
    color:#7f7f7f; 
    display:block;
}

#upload ul li canvas{
    top: 15px;
    left: 32px;
    position: absolute;
}

#upload ul li span{
    width: 15px;
    height: 12px;
    background: url('https://apps.smcpackaging.com/css/img/icons.png') no-repeat;
    position: absolute;
    top: 34px;
    right: 33px;
    cursor:pointer;
}

#upload ul li.working span{
    height: 16px;
    background-position: 0 -12px;
}

#upload ul li.error p{
    color:red;
}