@charset "UTF-8";

@font-face {
    font-family: 'BrandonBoldItalic';
    src: url('/fonts/brandon_grotesque/brandon_bld_it-webfont.eot');
    src: url('/fonts/brandon_grotesque/brandon_bld_it-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/brandon_grotesque/brandon_bld_it-webfont.woff2') format('woff2'),
         url('/fonts/brandon_grotesque/brandon_bld_it-webfont.woff') format('woff'),
         url('/fonts/brandon_grotesque/brandon_bld_it-webfont.ttf') format('truetype'),
         url('/fonts/brandon_grotesque/brandon_bld_it-webfont.svg#brandon_grotesquebold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'BrandonBold';
    src: url('/fonts/brandon_grotesque/brandon_bld-webfont.eot');
    src: url('/fonts/brandon_grotesque/brandon_bld-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/brandon_grotesque/brandon_bld-webfont.woff2') format('woff2'),
         url('/fonts/brandon_grotesque/brandon_bld-webfont.woff') format('woff'),
         url('/fonts/brandon_grotesque/brandon_bld-webfont.ttf') format('truetype'),
         url('/fonts/brandon_grotesque/brandon_bld-webfont.svg#brandon_grotesquebold') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'BrandonBlackItalic';
    src: url('/fonts/brandon_grotesque/brandon_blk_it-webfont.eot');
    src: url('/fonts/brandon_grotesque/brandon_blk_it-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/brandon_grotesque/brandon_blk_it-webfont.woff2') format('woff2'),
         url('/fonts/brandon_grotesque/brandon_blk_it-webfont.woff') format('woff'),
         url('/fonts/brandon_grotesque/brandon_blk_it-webfont.ttf') format('truetype'),
         url('/fonts/brandpon_grotesque/brandon_blk_it-webfont.svg#brandon_grotesqueblack_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'BrandonBlack';
    src: url('/fonts/brandon_grotesque/brandon_blk-webfont.eot');
    src: url('/fonts/brandon_grotesque/brandon_blk-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/brandon_grotesque/brandon_blk-webfont.woff2') format('woff2'),
         url('/fonts/brandon_grotesque/brandon_blk-webfont.woff') format('woff'),
         url('/fonts/brandon_grotesque/brandon_blk-webfont.ttf') format('truetype'),
         url('/fonts/brandon_grotesque/brandon_blk-webfont.svg#brandon_grotesqueblack') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'BrandonLightItalic';
    src: url('/fonts/brandon_grotesque/brandon_light_it-webfont.eot');
    src: url('/fonts/brandon_grotesque/brandon_light_it-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/brandon_grotesque/brandon_light_it-webfont.woff2') format('woff2'),
         url('/fonts/brandon_grotesque/brandon_light_it-webfont.woff') format('woff'),
         url('/fonts/brandon_grotesque/brandon_light_it-webfont.ttf') format('truetype'),
         url('/fonts/brandon_grotesque/brandon_light_it-webfont.svg#brandon_grotesquelight_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'BrandonLight';
    src: url('/fonts/brandon_grotesque/brandon_light-webfont.eot');
    src: url('/fonts/brandon_grotesque/brandon_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/brandon_grotesque/brandon_light-webfont.woff2') format('woff2'),
         url('/fonts/brandon_grotesque/brandon_light-webfont.woff') format('woff'),
         url('/fonts/brandon_grotesque/brandon_light-webfont.ttf') format('truetype'),
         url('/fonts/brandon_grotesque/brandon_light-webfont.svg#brandon_grotesquelight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'BrandonMediumItalic';
    src: url('/fonts/brandon_grotesque/brandon_med_it-webfont.eot');
    src: url('/fonts/brandon_grotesque/brandon_med_it-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/brandon_grotesque/brandon_med_it-webfont.woff2') format('woff2'),
         url('/fonts/brandon_grotesque/brandon_med_it-webfont.woff') format('woff'),
         url('/fonts/brandon_grotesque/brandon_med_it-webfont.ttf') format('truetype'),
         url('/fonts/brandon_grotesque/brandon_med_it-webfont.svg#brandon_grotesqueMdIt') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'BrandonMedium';
    src: url('/fonts/brandon_grotesque/brandon_med-webfont.eot');
    src: url('/fonts/brandon_grotesque/brandon_med-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/brandon_grotesque/brandon_med-webfont.woff2') format('woff2'),
         url('/fonts/brandon_grotesque/brandon_med-webfont.woff') format('woff'),
         url('/fonts/brandon_grotesque/brandon_med-webfont.ttf') format('truetype'),
         url('/fonts/brandon_grotesque/brandon_med-webfont.svg#brandon_grotesquemedium') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'BrandonRegularItalic';
    src: url('/fonts/brandon_grotesque/brandon_reg_it-webfont.eot');
    src: url('/fonts/brandon_grotesque/brandon_reg_it-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/brandon_grotesque/brandon_reg_it-webfont.woff2') format('woff2'),
         url('/fonts/brandon_grotesque/brandon_reg_it-webfont.woff') format('woff'),
         url('/fonts/brandon_grotesque/brandon_reg_it-webfont.ttf') format('truetype'),
         url('/fonts/brandon_grotesque/brandon_reg_it-webfont.svg#brandon_grotesqueRgIt') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'BrandonRegular';
    src: url('/fonts/brandon_grotesque/brandon_reg-webfont.eot');
    src: url('/fonts/brandon_grotesque/brandon_reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/brandon_grotesque/brandon_reg-webfont.woff2') format('woff2'),
         url('/fonts/brandon_grotesque/brandon_reg-webfont.woff') format('woff'),
         url('/fonts/brandon_grotesque/brandon_reg-webfont.ttf') format('truetype'),
         url('/fonts/brandon_grotesque/brandon_reg-webfont.svg#brandon_grotesque_regularRg') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'BrandonThinItalic';
    src: url('/fonts/brandon_grotesque/brandon_thin_it-webfont.eot');
    src: url('/fonts/brandon_grotesque/brandon_thin_it-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/brandon_grotesque/brandon_thin_it-webfont.woff2') format('woff2'),
         url('/fonts/brandon_grotesque/brandon_thin_it-webfont.woff') format('woff'),
         url('/fonts/brandon_grotesque/brandon_thin_it-webfont.ttf') format('truetype'),
         url('/fonts/brandon_grotesque/brandon_thin_it-webfont.svg#brandon_grotesquethin_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'BrandonThin';
    src: url('/fonts/brandon_grotesque/brandon_thin-webfont.eot');
    src: url('/fonts/brandon_grotesque/brandon_thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/brandon_grotesque/brandon_thin-webfont.woff2') format('woff2'),
         url('/fonts/brandon_grotesque/brandon_thin-webfont.woff') format('woff'),
         url('/fonts/brandon_grotesque/brandon_thin-webfont.ttf') format('truetype'),
         url('/fonts/brandon_grotesque/brandon_thin-webfont.svg#brandon_grotesquethin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SFProText';
    src: url('/fonts/SFProText/SFProText-Light.woff2') format('woff2'),
        url('/fonts/SFProText/SFProText-Light.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'SFProText';
    src: url('/fonts/SFProText/SFProText-Medium.woff2') format('woff2'),
        url('/fonts/SFProText/SFProText-Medium.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'SFProText';
    src: url('/fonts/SFProText/SFProText-Semibold.woff2') format('woff2'),
        url('/fonts/SFProText/SFProText-Semibold.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}


/* Icons */

/*

@font-face {
  font-family: "icons";
  src:url("/fonts/icons.eot");
  src:url("/fonts/icons.eot?#iefix") format("embedded-opentype"),
    url("/fonts/icons.woff") format("woff"),
    url("/fonts/icons.ttf") format("truetype"),
    url("/fonts/icons.svg#icons") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "icons" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-envelope-o:before {
  content: "\62";
}
.icon-facebook-official:before {
  content: "\61";
}
.icon-instagram:before {
  content: "\63";
}
.icon-linkedin-square:before {
  content: "\64";
}
.icon-download:before {
  content: "\65";
}
.icon-external-link:before {
  content: "\66";
}
.icon-heart:before {
  content: "\67";
}
.icon-heart-o:before {
  content: "\68";
}
.icon-zoom:before {
  content: "\69";
}


*/











html {
  height: 100%;
  overflow-y: scroll;
}

body {
  margin: 0;
  height: 100%;
  font-family: 'SFProText';
  font-weight: 200;
}

body.loading {
    overflow: hidden;
    background: rgba(255,255,255,0.75);
}

body.loading #loading {
    display: block;
	position: absolute;
	top: 80px;
	background: rgba(255,255,255,0.75);
}

.fixed
 {
    position: fixed;
 }

body.color {
    background: rgb(27,163,201);
    background: linear-gradient(355deg, rgba(27,163,201,1) 0%, rgba(0,215,146,1) 100%);
}

a:link,
a:visited,
a:active,
a:hover {
	color: #222;
	text-decoration: underline;
}

a:hover {
	color: #222;
	text-decoration: none;
}

a.plain, a.plain:hover {
  text-decoration: none;
  color: #000;
}

img, a {
  border: none;
  outline: none;
}







.col-1-12 { width: 8.33% }
.col-2-12 { width: 16.66% }
.col-3-12 { width: 25% }
.col-4-12 { width: 33.33%;}
.col-5-12 { width: 41.66% }
.col-6-12 { width: 50% }
.header-6-12 { width: 50% }
.col-7-12 { width: 58.33% }
.col-8-12 { width: 66.66% }
.col-9-12 { width: 75% }
.col-10-12 { width: 83.33% }
.col-11-12 { width: 91.66% }
.col-12-12 { width: 100% }

[class*="col-"] {
	float: left;
	position: relative;
}

.col-12-12.full {
	width: 95%;
	width: calc(100% - 20px);
}


.bold {
    font-family: 'SFProText', sans-serif;
    font-style: normal;
    font-weight: 400;
}

.small {
    font-size: 0.6em;
    color: #aaa;
    text-transform: uppercase;
    font-family: 'SFProText', sans-serif;
    font-weight: 300;
    font-style: normal;
}

.small.black {
    color: #000;
}

.tiny {
    font-size: 0.7em;
}

.grey {
    color: #bbb;
}

.large {
    font-size: 1.2em;
}

.red {
    color: red;
}

.label {
    color: #fff;
    font-size: 0.8em;
    font-family: 'SFProText', sans-serif;
    font-weight: 300;
    font-style: normal;
    padding: 0 3px;
    border-radius: 2px;
    position: relative;
    top: -1px;
}

.label.grey {
    background-color: #999;
}

.label.red {
    background-color: #D7283C;
}






#login {
  width: 100%;
  height: 100%;
  background-color: #233b75;
  background-color: #fff;
  color: #222;
  text-align: center;
  /*display:table;*/
  z-index: 999999999;

	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

#top-container {
	background-color: #fff;
	height: 60px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	
	font-size: 1.5em;
	color: #111;
    
    background: rgb(27,163,201);
    background: linear-gradient(355deg, rgba(27,163,201,1) 0%, rgba(0,215,146,1) 100%);
    color: #fff;
	
	/*border-bottom: 1px solid #01d396;*/
}

#top {
  width: 100%;
  line-height: 50px;
  margin: 0px 12px;
}

#top ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

#top ul li {
  font-family: 'SFProText', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #222;
  display: inline-block;
  padding: 0;
  margin: 0;
  padding-left: 20px;
  text-transform: uppercase;
}

#top .fa {
	margin-right: 5px;
}

#top ul li a {
  text-decoration: none;
  color: #222;
}

#top ul li a:hover {
  color: #222;
  text-decoration: underline;
}



#top img.userImage {
    float: right;
	width: 40px;
	height: 40px;
	position: relative;
    top: -10px;
    right: 30px;
    
    object-fit: cover;
    border-radius: 50%;

}

#top img.userImage:hover {
    cursor: pointer;
}

#area-container {
  width: 100%;
  height: 40px;
  background-color: #4ac6e3;
  background-color: #888;
  padding: 0;
  margin: 0;
}

#area {
  width: 80%;
  max-width: 1200px;
  margin: auto;
  line-height: 40px;
}

#area ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

#area ul li {
  font-family: 'SFProText', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  display: inline-block;
  line-height: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
}

#area ul li a.inactive {
  background-color: #4ac6e3;
  background-color: #888;
  color: #fff;
  text-decoration: none;
  display: block;
  height: 100%;
  padding: 0px 10px 0px 10px;
  margin: 0;
  line-height: 40px;
}

#area ul li a.inactive:hover {
  background-color: #a4e2f1;
  background-color: #999;
  color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  margin: 0;
}

#area ul li a.active {
  background-color: #fff;
  color: #888;
  text-decoration: none;
  display: block;
  height: 100%;
  padding: 0px 10px 0px 10px;
  line-height: 40px;
  margin: 0;
}

#content-container, #footer-container {
  width: 100%;
  overflow: hidden;
}

.content-container {
	width: 100%;
	margin: auto;
	/*position: relative;*/
}

#timeMenu,
#gelcoatMenu,
#moldingMenu,
#assemblingMenu,
#errorMenu,
#logisticsMenu,
#crmMenu,
#newsMenu,
#phonebookMenu,

#timeMenuMobile,
#gelcoatMenuMobile,
#moldingMenuMobile,
#assemblingMenuMobile,
#errorMenuMobile,
#logisticsMenuMobile,
#crmMenuMobile,
#newsMenuMobile,
#phonebookMenuMobile,

#staffMenu,
#stationsMenu,
#machinesMenu,
#productsMenu,
#generalMenu,

#staffMenuMobile,
#stationsMenuMobile,
#machinesMenuMobile,
#productsMenuMobile,
#generalMenuMobile {
	display: none;
}

.nav-container,
.user-container {
    width: 100%;
	/*background-color: #333;*/
	padding: 20px 20px 100px 20px;
	height: 100%;
	position: fixed;
	top: 60px;
	left: 0;
	z-index: 99999;
	
	overflow: auto;
	
	background: rgb(27,163,201);
    background: linear-gradient(355deg, rgba(27,163,201,1) 0%, rgba(0,215,146,1) 100%);
    
    display: none;
    
    -webkit-overflow-scrolling: touch;

}


.nav, .user {
	width: 100%;
	text-align: left;
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
}


/*
.nav-container .fa,
.nav-container-mobile .fa {
	font-size: 1.2em;
	margin: 0; padding: 0;
	position: relative;
	top: -2px;
}
*/

.closeNav {
	position: absolute;
	color: #fff;
	left: 190px;
	top: 40px;
	z-index: 9000000000;
	display: block;
}

.closeNav a {
	color: #fff;
}


.header {
	position: fixed;
	top: 0;
	left: 20px;
	z-index: 3;
}

.nav {
	/*padding-top: 60px;*/
}

.nav ul, .user ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.nav ul li,
.nav ul li a,
.user ul li,
.user ul li a {
	font-family: 'BrandonBold', sans-serif;
	color: #fff;
	font-size: 1.2em;
	text-decoration: none;
	text-transform: uppercase;
}

.nav ul li a:hover, .user ul li a:hover {
	text-decoration: none;
}

.nav ul li, .user ul li {
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
}

.nav ul li.space, .user ul li.space {
	margin-top: 30px;
	border-top: 1px solid #2b2b2b;
}

.nav ul.sub, .user ul.sub {
	margin-top: 10px;
	margin-bottom: 4px;
	margin-left: 26px;
}

.nav ul.sub li, .user ul.sub li {
	/*font-family: 'Muli', sans-serif;*/
	border: none;
	margin: 0;
	padding: 3px 0px 3px 0px;
	text-transform: none;
}

.nav ul.sub li a,
.user ul.sub li a {
	font-family: 'SFProText', sans-serif;
	text-transform: none;
    font-size: 0.9em;
    font-weight: 300;
}

.nav .fa {
	/*
	margin-right: 10px;
	*/
}

.navIcon {
	width: 26px;
	float: left;
	position: relative;
	bottom: -3px;
}

#footer-container {
  background-color: #233b75;
  background-color: #eee;
  background-color: rgba(0,0,0,0.15);
  color: #222;
  overflow: hidden;
  position: fixed; bottom: 0; left: 0;
  margin-top: 200px;
}

#content, #footer {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

#footer p {
  font-size: 10px;
  color: rgba(0,0,0,0.4);;
}

#content-page {
  width: 100%;
  /*margin-left: 234px;*/
  padding: 30px;
  margin-top: 40px;
  overflow: hidden;
  /*position: relative;*/
}

#login-container {  
  width: 320px;
  /*background-color: #fff;*/
  margin: auto;
  
  /*-webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;*/
}

#login-top {
  width: 100%;
  height: 140px;
  background-image: url('/admin/pics/login-top-bg-18.png');
  line-height: 40px;
  text-align: center;
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

#login-middle {
  padding: 20px 0px 20px 0px;
  text-align: center;
}

h1 {
  font-family: 'BrandonBlack', sans-serif;
  font-size: 2em;
  text-align: left;
  text-transform: uppercase;
  font-weight: normal;
    padding: 0 0 30px 0;
    margin: 0;
    padding-top: 50px;
}

h1.first {
    padding-top: 0;
}

h1.center {
    text-align: center;
}

h2 {
  font-family: 'SFProText', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding: 0;
  margin: 0;
  padding-top: 30px;
  padding-bottom: 20px;
}

h2.breadcrumbs {
  margin: 0;
  padding: 0px 0px 50px 0px;
  font-size: 14px;
  color: #222;
  font-family: 'SFProText';
  text-transform: uppercase;
  font-weight: 400;
  font-style: normal;
}

.playsmall {
  font-size: 10px;
  position: relative;
  top: 0px;
  padding: 0px 5px 0px 5px;
}

p {
  font-family: 'SFProText', sans-serif;
    font-weight: 200;
    font-style: normal;
  font-size: 15px;
  color: #555;
}

p.login {
  font-size: 1.2em;
  margin: 0;
  padding: 0;
  color: #fff;
    font-family: 'SFProText';
}

p.formHeader {
  font-weight: bold;
  padding-bottom: 0;
  margin-bottom: 3px;
  padding-top: 10px;
}

table.list, table.list-photo, table.time, table.calendar, table.crm {
  width: 100%;
  /*width: calc(100% - 40px);*/
}

table.logistics {
    display: inline-block;
}

table.nomargin {
  margin: 0;
}

table.list tr:first-child, table.list-photo tr:first-child, table.time tr:first-child {
  /*font-weight: bold;*/
}

table.list tr:hover, table.list-photo tr:hover, table.time tr:hover {
  /*background-color: #f1f9fa;*/
}

table.list tr:first-child:hover, table.list-photo tr:first-child:hover, table.time tr:first-child:hover {
  background-color: #fff;
}

table.list tr.noBg:hover {
	background: none;
}

table.list tr td,
table.list-photo tr td,
table.crm tr td {
  text-align: left;
  font-family: 'SFProText', sans-serif;
  /*padding: 5px 0px 5px 30px;*/
  padding: 20px 0;
  border-bottom: 1px solid #e9f1f2;
  font-size: 1.2em;
  font-weight: 300;
  font-style: normal;
}

table.list tr:first-child td,
table.list-photo tr:first-child td,
tabble.crm tr:first-child td {
  font-family: 'SFProText', sans-serif;
  text-transform: uppercase;
  font-size: 1em;
  font-weight: 400;
  font-style: normal;
  padding: 2px 0;
}

table.crm.tight tr td {
  padding: 6px 0;
  border: none;
}

table.calendar tr td {
    padding: 10px;
}

table.calendar tr {
    border: 1px solid #ddd;
}


table.calendar tr td.date {
    background: #fff;
    font-family: 'SFProText', sans-serif;
    font-style: normal;
    font-weight: 300;
    text-align: center;
    width: 80px;
    vertical-align: top;
}

table.calendar tr td.date.yellow,
table.calendar tr td.yellow {
    background: #FFFFD9;
}

table.calendar-content {
    font-family: 'SFProText', sans-serif;
    font-style: normal;
    font-weight: 300;
    width: 100%;
}

.hidden {
    display: none;
}

.show:hover {
    cursor: pointer;
}

table.calendar-content tr td {
    padding: 10px;
    position: relative;
}

table.calendar-content tr td span.icon-confirm,
table.calendar-content tr td span.icon-reload {
    position: absolute;
    bottom: 3px;
    right: 3px;
    color: #4EBC8A;
    font-size: 2em;
}

table.calendar-content tr td span.icon-hide,
table.calendar-content tr td span.icon-bin {
    position: relative;
    top: 3px;
    left: 0px;
    color: #fff;
    font-size: 2em;
}

table.calendar-content tr td span.icon-reload {
    color: #fff;
}

table.calendar-content tr td.green {
    background: #4EBC8A;
    color: #B7E4D0;
}

table.calendar-content tr td.red {
    background: #D7273C;
    color: #fff;
}


table.calendar-content .title {
    font-size: 1.4em;
}

table.calendar-content .company {
    font-size: 1em;
    font-family: 'SFProText', sans-serif;
    text-transform: uppercase;
    display: block;
}

table.calendar-content .notes {
    display: block;
    font-family: 'SFProText', sans-serif;
    margin-top: 10px;
}

table.time tr td  {
  text-align: left;
  font-family: 'SFProText', sans-serif;
  padding: 2px 0px 2px 0px;
  /*border-bottom: 1px solid #e9f1f2;*/
}

table.time tr.standard:nth-child(even) {
  border-top: 1px solid #e9f1f2;
  border-bottom: 1px solid #e9f1f2;
}

    table.time tr.red:nth-child(even) {
      border-top: 1px solid #dd9192;
      border-bottom: 1px solid #dd9192;
    }

    table.time tr.orange:nth-child(even) {
      border-top: 1px solid #f2c891;
      border-bottom: 1px solid #f2c891;
    }

    table.time tr.yellow:nth-child(even) {
      border-top: 1px solid #f2ee91;
      border-bottom: 1px solid #f2ee91;
    }

    table.time tr.green:nth-child(even) {
      border-top: 1px solid #9de291;
      border-bottom: 1px solid #9de291;
    }
    
    table.time tr.overtime:nth-child(even) {
      border-top: 1px solid #abc7e0;
      border-bottom: 1px solid #abc7e0;
    }
    
    .greystandard { color: #ccc }
    .greyred { color: #bc6b6d }
    .greyorange { color: #d5a66f }
    .greyyellow { color: #d2c671 }
    .greygreen { color: #80bd6d }
    .greyovertime { color: #8ca0b5 }
    
    .editstandard { color: #428bca }
	.editstandard { color: #555 }
    .editred { color: #701f20 }
    .editorange { color: #85561f }
    .edityellow { color: #857c1f }
    .editgreen { color: #30701f }
    .editovertime { color: #3e556d }

table.time tr:nth-last-child(-n+2) {
  border: 0;
}

table.time tr:nth-last-child(-n+2):hover {
  background-color: #fff;
  border: 0;
}

table.time tr:nth-last-child(3) {
  border-bottom: 1px solid #e9f1f2;
}

table.time tr.standard {
  background-color: none;
}

    table.time tr.red {
      background-color: #eb999a;
      color: #701f20;
    }
    
    table.time tr.red:hover {
      background-color: #f5cccd;
      background-color: #f1f9fa;
      border-color: #e9f1f2;
      color: #000;
    }

    table.time tr.orange {
      background-color: #ffd099;
      color: #85561f;
    }
    
    table.time tr.orange:hover {
      background-color: #ffe8cc;
      background-color: #f1f9fa;
      border-color: #e9f1f2;
      color: #000;
    }
    
    table.time tr.red:hover .greyred,
    table.time tr.orange:hover .greyorange,
    table.time tr.yellow:hover .greyyellow,
    table.time tr.green:hover .greygreen,
    table.time tr.overtime:hover .greyovertime {
      color: #ccc;
    }
    
    table.time tr.red:hover .editred,
    table.time tr.orange:hover .editorange,
    table.time tr.yellow:hover .edityellow,
    table.time tr.green:hover .editgreen,
    table.time tr.overtime:hover .editovertime {
      color: #428bca;
    }

    table.time tr.yellow {
      background-color: #fff799;
      color: #857c1f;
    }
    
    table.time tr.yellow:hover {
      background-color: #fffbcc;
      background-color: #f1f9fa;
      border-color: #e9f1f2;
      color: #000;
    }

    table.time tr.green {
      background-color: #b5eda6;
      color: #30701f;
    }
    
    table.time tr.green:hover {
      background-color: #d5f5cc;
      background-color: #f1f9fa;
      border-color: #e9f1f2;
      color: #000;
    }
    
    table.time tr.overtime {
      background-color: #b9d0e7;
      color: #3e556d;
    }
    
    table.time tr.overtime:hover {
      background-color: #cce3ff;
      background-color: #f1f9fa;
      border-color: #e9f1f2;
      color: #000;
    }

table.list-photo tr td  {
  padding: 2px 0px 2px 30px;
}

table.list tr td:first-child, table.list-photo tr td:first-child, table.time tr td:first-child {
  /*padding-left: 15px;*/
}

table.logistics tr:last-child td {
  /*border-bottom: 1px solid #e9f1f2;*/
}

table.report tr td {
  font-family: Consolas;
  font-size: 12px;
  padding: 2px 20px 2px 2px;
  border: 1px solid #eee;
}

table.report tr:first-child td, table.report tr:nth-child(2) td  {
  font-weight: bold;
}


input[type=text], input[type=text].large, input[type=password], select, textarea {
  text-align: left;
  font-family: 'SFProText', sans-serif;
  font-size: 15px;
  font-weight: 300;
  font-style: normal;
  color: #000;
  padding: 2px 0 2px 4px;
  
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  
  border: 1px solid #ccc;
    
    width: 98%;
    width: calc(100% - 20px);
}

input[type=text].large {
    font-size: 1.5em;
    font-family: 'SFProText', sans-serif;
    font-weight: 300;
    width: auto;
}

input[type=text]:focus {
    outline: none;
    background-color: #F2F2F2;
}

select, select.edit {
    font-family: 'SFProText';
    font-weight: 300;
    font-style: normal;
    width: 98%;
    width: calc(100% - 20px);
    padding: 2px 0 2px 4px;
    
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #ccc;
    /*box-shadow: 0 1px 0 1px rgba(0,0,0,.04);*/
    border-radius: 1px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    
    color: #000;
    
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23AAAAAA%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #fff 0%,#fff 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}

select.edit {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23AAAAAA%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #fdffbf 0%,#fdffbf 100%);
}

select:focus, select.edit:focus {
    outline: none;
    background-color: #F2F2F2;
}



/*
.checkbox {
  width: 6px;
  height: 6px;
  position: relative;
  top: 3px;
}

.checkbox:after {
  content: '\00D7';
  display: block;
  background: white;

  background-image: url('/pics/check-neg.png');
  pointer-events: none;
  position: absolute;
  top: -4px;
  left: -2px;
  height: 20px;
  width: 20px;
  color: transparent;
  transition: .25s all ease-in-out;
  border-radius: 1px;
  line-height: 20px;
    background-color: #eee;
  background-position: 0 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;

}

.checkbox:checked:after {
  background-color: #4EBC8A;
  background-position: 0 0;
}
.checkbox:hover:after {
}

checkbox:focus {
    outline: none;
}
*/

input[type=checkbox].moldingReport {
    -webkit-appearance: none;
    display: inline-block;
    border: none;
    width: 25px;
    height: 25px;
    background: #ddd;
    border-radius: 0;
    position: relative;
    top: 14px;
}

input[type=checkbox].moldingReport:checked {
    background: #4EBC8A;
}

input[type=checkbox].moldingReport:checked:after {
	/*content: '\2714';*/
	font-size: 14px;
	position: absolute;
	top: 0px;
	left: 0px;
	color: #fff;
}

input[type=checkbox]:focus {
    outline: none;
}

input[type=checkbox]:hover {
    cursor: pointer;
}



#pm-mold,
#pm-assem {
    font-size: 20px;
    padding: 0;
    position: relative;
    top: 12px;
}

#pm-assem {
    font-size: 30px;
    top: 0;
}

#pm-mold:hover,
#pm-assem:hover {
    cursor: pointer;
}

input#qty-mold,
input#qty-assem {
    width: 28px;
    border: 0;
    padding: 0;
    font-family: 'SFProText', sans-serif;
    font-size: 24px;
    font-weight: 300;
    font-style: normal;
    text-align: center;
    position: relative;
    top: 12px;
}

input#qty-assem {
    font-size: 40px;
    width: 50px;
    top: 0;
}



label {
  text-align: left;
  font-family: 'SFProText', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: #555;
  padding-right: 5px;
  padding-left: 15px;
  
  position: relative;
  bottom: 1px;
}


input.login {
  width: 100%;
  max-width: 250px;
  margin: auto;
  margin-top: 6px;
  text-align: center;
  font-family: 'SFProText';
  font-size: 1.6em;
  font-weight: 300;
  color: #555;
  padding: 8px 0px 8px 0px;
  
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  
  border: 1px solid #ccc;
    border: none;
}

input.login:focus {
	outline: none;
}

input[type=image]:focus {
	outline: none;
}

button[type=submit],
button[type=button],
button.delete,
a.button {
  background-color: #222;
  text-align: center;
  font-family: 'SFProText', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2em;
  color: #fff;
  padding: 10px;
  margin-top: 60px;
    
  border: none;
  
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
    
  text-transform: uppercase;
  text-decoration: none;
}

button[type=submit]:focus,
button[type=button]:focus,
button.delete:focus,
a.button:focus {
    outline: none;
}

button[type=submit]:hover,
button[type=button]:hover,
button.delete:hover,
a.button:hover {
    cursor: pointer;
}

button[type=submit] {
    background-color: #4EBC8A;
}

button[type=button].red,
a.button.red {
    background-color: #D7283C;
}

a.button.abort,
a.button.proceed {
    background-color: #D7283C;
    font-size: 0.9em;
    text-transform: uppercase;
    padding: 3px 6px;
    margin-right: 20px;
}

a.button.proceed {
    margin-right: 0;
    background-color: #4EBC8A;
}

button.login {
  background-color: #233b75;
  background-color: #222;
  width: 252px;
  margin: auto;
  text-align: center;
  font-family: 'SFProText', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  padding: 10px 0px 10px 0px;
  margin-top: 30px;
  
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  
  border: 1px solid #222;
  
  outline: none;
  
  cursor: pointer;
}

button.delete {
	background: #cc0000;
	border: 1px solid #cc0000;
}

button:hover, button.delete:hover {
    /*
  background-color: #777;
  border-color: #777;
  -webkit-transition: 0.1s;
  transition: 0.1s;
    */
}

button.delete:hover {
	background-color: #d94040;
	border: 1px solid #d94040;
    -webkit-transition: 0.1s;
    transition: 0.1s;
}

button:active {
  position: relative;
  top: -1px;
}

img.increment {
  position: relative;
  top: -2px;
  cursor: pointer;
  touch-action: manipulation;
}

img.minus{
  padding-right: 10px;
}

img.plus{
  padding-left: 10px;
}





/* ******************** NOTIFY ******************** */

.message {
  width: 100%;
  overflow: hidden;
  text-align: left;
  padding: 20px;
  margin-top: 20px;
}

.message p {
  color: #fff;
  font-family: 'SFProText', sans-serif;
  font-size: 15px;
  font-weight: 400;
  padding: 0;
  margin: 0;
}

.error {
  background-color: #c31515;
}

.success {
  background-color: #31a331;
}

#notify-container,
#vlsNotify-container {
  width: 100%;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5000;
  overflow: hidden;
  display: none;
  text-align: center;
}

#vlsNotify-container {
	display: block;
}

#notify-container p,
#vlsNotify-container p {
  font-family: 'SFProText', sans-serif;
  font-size: 15px;
  font-weight: 400;
  padding: 0;
  margin: 0;
  color: #fff;
  line-height: 40px;
}

#vlsNotify-container .error p,
#vlsNotify-container .success p{
  font-family: 'SFProText', sans-serif;
  font-size: 15px;
  font-weight: 400;
  padding: 0;
  margin: 0;
  color: #fff;
  line-height: 40px;
}

#notify-container .glyphicon,
#vlsNotify-container .glyphicon {
  padding: 0;
  margin: 0;
  padding-right: 10px;
}

.button {
  padding-right: 10px;
}


#notify-container .success,
#notify-container .error,
#vlsNotify-container .success,
#vlsNotify-container .error {
  display: none;
  overflow: hidden;
  padding: 10px;
  height: 100%;
}

#vlsNotify-container .success,
#vlsNotify-container .error {
  display: block;
}


#notify-container .success,
#vlsNotify-container .success {
  background-color: #00b27e;
}

#notify-container .error,
#vlsNotify-container .error {
  background-color: #c31515;
}

#notify-container-small {
  width: 100%;
  padding: 20px;
  overflow: hidden;
}

#notify-container-small .success {
  background-color: #31a331;
}

.highlight {
  background-color: #fdffbf;
}

.highlight-off {
  background-color: #fff;
}

#field { margin-left: .5em; float: left; }
#field { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
br { clear: both; }
input.error { border: 1px solid red; outline: none; }


#loading {
  width: 100%;
  height: 100%;
  top: 150px;
  position: absolute;
  display: none;
  background-color: #fff;
  z-index: 99;
  text-align: center;
  /*margin-left: 234px;*/
}

#loading-image {
  position: absolute;
  top: 20%;
  left: 50%;
  margin-left: -27px;
  z-index: 100;
}

/* ---------- ANALYTICS ---------- */

#analytics-container {
  width: 100%;
  overflow: hidden;
  margin: auto;
}

#analytics-left, #analytics-right {
  width: 50%;
  float: left;
}

#analytics-container p {
  font-size: 18px;
  font-weight: bold;
}

#analytics-dev {
  padding: 20px;
}
#analytics-dev p {
  font-family: Consolas;
  font-weight: normal;
  font-size: 12px;
  padding: 0;
  margin: 0;
}

#analytics-station-header {
    width: 100%;
    margin: 0;
    padding: 16px;
    font-family: 'BrandonBold', sans-serif;
    font-size: 30px;
    text-align: center;
    background-color: #fff;
    color: rgba(0,0,0,0.2);
    position: relative;
    padding-left: 40px;
}

#analytics-station-summary {
  width: 100%;
  margin: 0;
  padding: 10px;
  font-family: 'SFProText', sans-serif;
  font-weight: 400;
  font-size: 30px;
  text-align: center;
  color: #222;
    margin-top: 30px;
}

/*
.numberCircle {
  margin: 0 25px;

  background: #fff;
  text-align: center;
  
  font-family: 'SFProText', sans-serif;
  font-size: 32px;
  color: #32c2a8;
  font-weight: 400;
}

.numberTitle {
  font-family: 'SFProText', sans-serif;
  font-size: 20px;
  color: #fff;
  position: relative;
  top: -6px;
  text-transform: uppercase;
  font-weight: 400;
}
*/



#analytics-machine-container {
  overflow: hidden;
  text-align: center;
  padding: 10px;
  padding-top: 30px;
}

#analytics-machine {
  display: inline-block;
  margin: 0 10px;
}

#analytics-machine-abb {
  font-family: 'SFProText', sans-serif;
  font-size: 14px;
  color: #fff;
  padding: 5px 10px 5px 10px;
    font-weight: 300;
}

#analytics-machine-abb .length {
  font-size: 14px;
  position: relative;
  top: -1px;
  margin-left: 3px;
  color: rgba(0,0,0,0.35);
}

#analytics-week-container {
  overflow: hidden;
  text-align: center;
  padding: 20px;
  padding-bottom: 0;
}

#analytics-week {
  text-align: center;
  display: inline-block;
  margin-right: 20px;
}

#analytics-week-day-container {
  display: inline-block;
  text-align: center;
  padding: 10px;
}

#analytics-week-day-date {
  clear: both;
}

#analytics-week h1, #analytics-week h2, #analytics-week h3 {
  font-family: 'SFProText', sans-serif;
  color: #000;
  font-size: 40px;
  padding: 0;
  margin: 0;
  letter-spacing: -2px;
  line-height: 28px;
  font-weight: 400;
}

#analytics-week h1 {
  font-family: 'BrandonBold', sans-serif;
}

#analytics-week h2 {
  font-size: 14px;
  letter-spacing: 0px;
}

#analytics-week h3 {
  font-size: 24px;
  letter-spacing: 0px;
}

#analytics-week-target-container {
  width: 100%;
  text-align: center;
    font-family: 'SFProText';
    font-weight: 300;
}

#analytics-week-target {
  display: inline-block;
}

#analytics-week-target-col {
  float: left;
  margin-bottom: 10px;
  color: #fff;
  font-weight: 300;
}

#analytics-container table {
  width: 70%;
  margin-top: 10px;
}

#analytics-container table tr td {
  text-align: left;
  padding: 3px 0px 3px 20px;
  /*border-bottom: 1px solid rgba(255,255,255,0.3);*/
  font-family: 'SFProText', sans-serif;
  font-weight: 200;
  font-size: 18px;
  color: #fff;
}

#analytics-container table tr:first-child td {
  font-family: 'SFProText', sans-serif;
  font-weight: 400;
}

#analytics-container table.logistics {
  width: 100%;
  margin-top: 60px;
}

#analytics-container table.logistics tr:first-child td {
  font-family: 'SFProText', sans-serif;
}

#analytics-container table.logistics tr td {
  text-align: left;
  padding: 3px 0px 23px 20px;
  /*border-bottom: 1px solid rgba(0,0,0,0.05);*/
  font-family: 'SFProText', sans-serif;
  font-size: 30px;
  color: #000;
}


#dashboard-container, #dashboard-container p, #dashboard-container p.header, .news-date {
  font-family: 'BrandonMedium', sans-serif;
  font-size: 1em;
  color: #000;
}

.news-date {
  font-size: 12px;
  color: #bbb;
}

#dashboard-container p, #dashboard-container p.header {
  padding: 0;
  margin: 0;
  padding-bottom: 10px;
}

#dashboard-container p.header {
  font-family: 'BrandonBold', sans-serif;
  font-size: 20px;
}

.content {
	padding: 30px;
	/*margin-left: 234px;*/
	overflow: hidden;
	position: relative;
}

#note, #message {
  width: 100%;
  padding: 12px;
  background-color: #fdffbf;
  border: 1px solid #fdef9b;
  margin-bottom: 8px;
  
  -webkit-border-radius:  3px;
  -moz-border-radius:     3px;
  border-radius:          3px;
  
  position: relative;
    
  font-family: 'SFProText'; sans-serif;
  font-weight: 300;
}

#message {
  background-color: #e3f7ff;
  border: 1px solid #ceebf7;
}

#note-trash {
  position: absolute;
  bottom: 0px;
  right: 0px;
  /*background-color: #e2b349;*/
  background-color: #fdef9b;
  padding: 4px 3px 0px 3px;
  color: #e2b349;
}

#note-trash a, #note-trash a:hover {
  color: #e2b349;
  text-decoration: none;
}

#news {
	margin-bottom: 40px;
}

#logistics {
	clear: both;
}

#news-container {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #000;
  opacity: 0.5;
  filter: alpha(opacity=40);
  z-index: 10000;
}

.news-box {
  display: none;
  position: absolute;
  width: 600px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -200px;
  background-color: #fff;
  z-index: 10001;
  padding: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.news-box-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.news-box p, .news-box h1 {
  margin: 0;
  padding: 0;
}

.news-box h1 {
  padding-bottom: 10px;
}

.news-box p {
  padding-bottom: 5px;
}

.news-box p.published {
  position: absolute;
  bottom: 10px;
  padding-top: 30px;
  color: #aaa;
  font-size: 11px;
}

input[type=text],
input[type=password] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}


table.logistics tr td {
	font-family: 'SFProText';
	font-weight: 300;
}


.dashboard-col-100,
.dashboard-col-50,
.dashboard-col-33 {
	float: left;
	overflow: hidden;
}

.dashboard-col-100 {
	width: 100%;
	clear: both;
	text-align: center;
	padding: 0 20px 80px 20px;
}

img.vlsProcess,
img.vlsProcessDashboard {
	width: 100%;
	border: none;
	max-width: 800px;
	height: auto;
	padding-top: 10px;
}

img.vlsProcess {
	margin-top: 50px;
}

.vlsProcessMobile {
	display: none;
	width: 100%;
}

.dashboard-col-50 {
	width: 50%;
}

.dashboard-col-33 {
	width: 33.3%;
}



.col {
    display: inline-block;
}

.col.margin {
    margin: 0 20px;
}





@media screen and (max-width: 1230px) {
	
	.dashboard-col-50 {
		width: 100%;
		clear: both;
	}
	
	.dashboard-col-33 {
		width: 50%;
	}
	
	.dashboard-col-50.montering {
		margin-top: 80px;
	}
	
	.dashboard-col-33.anteckningar {
		clear: both;
		margin-top: 80px;
	}
	
	/*#logistics,
	#news {
		clear: none;
		float: left;
		width: 50%;
	}
	*/
	#news p {
		width: 100%;
		text-align: center;
	}
}

@media screen and (max-width: 1090px) {
	img.vlsProcess {
		display: none;
	}
	.vlsProcessMobile {
		display: block;
	}
}


@media screen and (max-width: 1024px) {
	

	.content,
	#content-page,
	#loading {
		margin: 0px;
		padding: 20px;
		width: 100%;
		margin-top: 60px;
	}
}


@media screen and (max-width: 800px) {
	.dashboard-col-33 {
		width: 100%;
	}
	
	.dashboard-col-33.nyheter {
		margin-top: 80px;
	}
}



/* -------------------------------------------------- VLS -------------------------------------------------- */

h1.vlsHeader {
	text-align: left;
	padding: 0; margin: 0;
	margin-bottom: 20px;
	font-size: 2em;
}

img.vlsUserPhoto {
	width: 40px;
	height: auto;
	/*border: 1px solid #eee;*/
	position: relative;
	top: -5px;
	margin-right: 10px;
}

#vlsNewFolder,
#vlsNewDocument {
	margin-bottom: 30px;
	margin-left: 2px;
}

input[type=text].vlsNewItem {
	font-weight: bold;
	height: 30px;
	padding: 5px;
	}

input[type=text].vlsDocEdit {
	font-weight: bold;
	width: 100%;
	border-radius: 0;
}

.vlsButtonContainer {
	width: 300px;
	width: 100%;
	margin: 10px 0;
	text-align: center;
}

img.vlsArrow {
	width: 30px;
	height: auto;
	margin-top: 20px;
}

img.vlsArrow.top {
	position: relative;
	top: -1px;
	margin-top: 0;
	margin-bottom: 20px;
}

button.vlsButton {
	font-family: 'BrandonMedium';
	text-transform: uppercase;
	font-size: 1.5em;
	border: none;
	background-color: #1aa4c8;
	border-radius: 2px;
	color: #fff;
	padding: 10px 0;
	margin: 5px 0;
	width: 100%;
}

button.vlsButton:hover {
  border: none;
}

button.vlsButton.green { background-color: #01cb96; }
button.vlsButton.blue { background-color: #20a5b7; }
button.vlsButton.red { background-color: #c02d60; }
button.vlsButton.yellow { background-color: #c1bf5e; }

button.vlsButton.green:hover { background-color: #34d5ab; }
button.vlsButton.blue:hover { background-color: #4db7c5; }
button.vlsButton.red:hover { background-color: #cd5780; }
button.vlsButton.yellow:hover { background-color: #cdcc7e; }

ul.vlsNav {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-bottom: 30px;
}

ul.vlsNav.history {
	margin-top: 30px;
}

ul.vlsNav li {
	display: inline;
	margin-right: 10px;
}

ul.vlsNav li.navButton, button.vlsSubmit {
	background-color: #20a5b7;
	border-radius: 20px;
	color: #fff;
	padding: 6px 12px;
	font-family: 'SFProText';
	text-transform: uppercase;
	font-size: 0.9em;
	border: none;
    font-weight: 300;
}

ul.vlsNav li.navButton a,
ul.vlsNav li.navButton a:hover {
	color: #fff;
	text-decoration: none;
}

input[type=text].vlsTextForm {
	height: 28px;
	padding: 5px;
	position: relative;
	top: 1px;
}

button.vlsSubmit:focus {
	outline: none;
}

button.vlsSubmit.red {
	background-color: #c02d60;
}

button.vlsSubmit.red:hover {
	background-color: #cd5780;
}

ul.vlsNav li.navButton:hover, button.vlsSubmit:hover {
	background-color: #4db7c5;
	cursor: pointer;
}

img.vlsIconBtn,
img.vlsIconList {
	height: 16px;
	width: auto;
	position: relative;
	top: -1px;
	margin-right: 10px;
}

img.vlsIconList {
	top: -2px;
}

.vlsTable,
.vlsLog {
	width: 100%;
}

.vlsTable tr td,
.vlsLog tr td {
	padding: 5px;
	border-bottom: 1px solid #e9f1f2;
}

.vlsTable tr:first-child td,
.vlsLog tr:first-child td {
	border-top: 1px solid #e9f1f2;
}

.vlsLog tr:first-child td {
	background-color: #f1f9fa;
	font-weight: 700;
}

.vlsTable tr td a,
.vlsTable tr td a:hover,
.vlsLog tr td a,
.vlsLog tr td a:hover {
	text-decoration: none;
}

.vlsTable tr td a:hover,
.vlsLog tr td a:hover {
	text-decoration: underline;
}

.vlsTable tr:hover,
.vlsLog tr:hover {
	background-color: #f1f9fa;
}

.vlsTable tr td:first-child,
.vlsLog tr td:first-child {
	padding-left: 10px;
}

.vlsTable tr td:nth-child(2),
.vlsTable.Controls tr td:first-child {
	padding-right: 50px;
	font-weight: bold;
}

.vlsTable.Controls tr td:nth-child(2) {
	padding-right: 0px;
	font-weight: 300;
}

.vlsTable.Controls tr:first-child td {
	font-weight: bold;
}

table tr.toggleRows:hover {
	cursor: pointer;
}

table tr.hiddenRow {
	display: none;
}

table.vlsTable.Controls tr td.indent {
	padding-left: 26px;
}

table.vlsTable.Controls tr td.indent.space {
	padding-left: 26px;
	padding-top: 20px;
	padding-bottom: 20px;
}

table.vlsTable.Controls tr td.space {
	padding-left: 0px;
	padding-top: 20px;
	padding-bottom: 20px;
}




table.vlsTable.Controls input[type=checkbox] {
	margin-right: 10px;
	top: 3px;
}

table.vlsTable.Controls input[type=checkbox]:focus {
	outline: none;
}

table.vlsTable.Controls input[type=checkbox]:hover {
	cursor: pointer;
}




table.vlsTable.Controls input[type=text],
table.vlsTable.Controls input[type=text].note {
	width: 100%;
	display: block;
	margin: 8px 0 3px 0;
}

table.vlsTable.Controls input[type=text].note {
	display: none;
	clear: both;
}

table.submitControl {
	margin-top: 25px;
	width: 100%;
}

table.submitControl input {
	width: 100%;
	display: block;
	margin: 15px 0 0 0;
	text-align: center;
}

table.submitControl input[type=submit]:focus {
	outline: none;
}

table.submitControl input[type=submit] {
	background: #20a5b7;
	color: #fff;
	font-family: 'SFProText', sans-serif;
	text-transform: uppercase;
	border: none;
	padding: 10px 0;
    font-weight: 300;
}

table.vlsTable.Controls tr:first-child td {
	background-color: #f1f9fa;
}

table.vlsTable img.iconStatus,
table.vlsLog img.iconStatus {
	width: 18px;
	height: auto;
	position: relative;
	top: -1px;
	margin-right: 5px;
}

table.vlsTable img.iconStatus.right,
table.vlsLog img.iconStatus.right {
	margin-right: 0px;
	margin-left: 5px;
}

@media screen and (max-width: 460px) {
	.vlsTable tr td:nth-child(2) {
		padding-right: 20px;
		width: 100px;
		height: 100px;
	}
}

@media screen and (max-width: 700px) {
	table.vlsTable.Controls tr td:nth-child(2) {
		display: none;
	}
	table.vlsTable.Controls tr td {
		padding-right: 0;
	}
}

@media screen and (max-width: 600px) {
	table.vlsTable.Controls tr td:nth-child(3) {
		display: none;
	}
}

@media screen and (max-width: 400px) {
	table.vlsTable.Controls tr td:nth-child(4) {
		display: none;
	}
	table.vlsTable.Controls tr td {
		font-size: 1.3em;
		padding: 10px;
	}
}

.vlsTable .glyphicon {
	padding: 0px 10px;
}

.vlsTable .tableDate {
	font-size: 0.9em;
	text-align: center;
}

table.vlsTable.history {
	margin-top: 30px;
}

table.vlsTable.history tr:first-child td {
	font-weight: bold;
	border-top: 0;
}

table.vlsTable.history tr td:nth-child(3),
table.vlsTable.history tr td:nth-child(4){
	text-align: center;
}

img.vlsHeaderLogo {
	width: 200px;
	height: auto;
	padding: 50px 0 30px 0;
}


table.vlsHeader {
	border: 2px solid #000;
	width: 100%;
}

table.vlsHeader p.vlsDocHeaderAttribute,
table.vlsDocument p.vlsDocHeaderAttribute {
	font-family: 'SFProText', sans-serif;
	font-size: 10px;
	margin: 0; padding: 0;
}

table.vlsDocument p.vlsDocHeaderAttribute {
	font-size: 12px;
}

		table.vlsHeader p.vlsDocHeaderValue {
			font-family: 'SFProText', sans-serif;
			font-size: 14px;
			font-weight: 400;
			margin: 0; padding: 0;
		}
		table.vlsHeader {
			border: 2px solid #000;
			width: 100%;
			border-collapse: collapse;
		}
		
		table.vlsHeader .glyphicon {
			font-size: 11px;
			position: relative;
			padding: 0 4px;
		}

		table.vlsHeader tr td {
			border: 1px solid #000;
			padding: 8px;
		}

		table.vlsDocument {
			width: 100%;
			border: 1px solid #ddd;
			margin-top: 30px;
		}

		table.vlsDocument tr td {
			padding: 20px;
		}

		
		table.vlsDocument tr td h1 {
			font-family: 'SFProText', sans-serif;
			font-size: 36px;
			text-align: left;
			text-transform: uppercase;
			margin: 0; padding: 0 0 40px 0;
            font-weight: 200;
		}
		
		table.vlsDocument tr td h2 {
			font-family: 'SFProText', sans-serif;
			font-size: 20px;
			text-align: left;
			margin: 0; padding: 10px 0 5px 0;
            font-weight: 300;
		}
		
		table.vlsDocument tr td p, table.vlsDocument tr td ul, table.vlsDocument tr td ol {
			font-family: 'SFProText', sans-serif;
			font-size: 16px;
			margin: 0; padding: 0;
			margin-bottom: 20px;
		}
		
		table.vlsDocument tr td ul, table.vlsDocument tr td ol {
			margin-left: 40px;
		}



table.vlsDocument tr td.center {
	text-align: center;
}

table.vlsDocument textarea {
	width: 100%;
}

table.vlsDocument img.vlsResponsive {
	max-width: 100%;
	height: auto;
}

.vlsVersion {
	color: #bbb;
	margin-left: 7px;
}

area,
area a,
area:focus,
area a:focus {
	border: none;
	outline: none;
}

table.vlsDocument table,
table.vlsDocument table tr td {
	font-family: 'SFProText', sans-serif;
	border: 1px solid #ddd;
	vertical-align: text-top;
	font-size: 16px;
	padding: 10px;
}

table.vlsDocument a {
	font-family: 'SFProText', sans-serif;
	color: #20a5b7;
	text-decoration: underline;
	font-weight: 400;
}

table.vlsDocument table tr td ul {
	font-family: 'SFProText', sans-serif;
	margin-top: 0; margin-bottom: 0;
	margin-left: 20px;
}

table.vlsDocument table.StandardList tr td {
	text-align: right;
}

table.vlsDocument table.StandardList tr td:first-child {
	text-align: left;
}

table.vlsDocument table.StandardList tr:first-child td {
	text-align: center;
}

table.vlsDocument table.compact tr td {
	font-size: 12px;
	padding: 3px;
	margin: 0;
}

table.vlsDocument table.compact tr:hover td {
	background-color: #eee;
}

table.vlsTable tr td.narrowCol {
	width: 50px;
	text-align: center;
}

table.vlsTable .glyphicon {
	color: #20a5b7;
}

.showTip {
	width: 200px;
	position: absolute;
	display: none;
	z-index: 999999999999999999;
}

.tipText {
	padding: 12px;
	background-color: #000;
	color: #fff;
	font-family: 'SFProText', sans-serif;
	border-radius: 3px;
}

.tipArrow {
	text-align: center;
}

.tipArrow img {
	width: 20px;
	height: auto;
	margin: 0; padding: 0;
	position: relative;
	top: 5px;
	left: 8px;
}

a.showToolTip:hover {
	cursor: pointer;
}

.vlsSearch {
	position: relative;
	width: 80%;
	margin: auto;
}

#vlsSearchBtn {
	position: absolute;
	bottom: 10px;
	right: 0;
	width: 25px;
	height: auto;
}

#vlsForm {
	border: none;
	border-bottom: 1px solid #c7e8ed;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-radius: 0;
	font-size: 1.5em;
	text-align: center;
	color: #20a5b7;
}

#vlsForm:focus {
	outline: none;
	border-bottom: 1px solid #20a5b7;
}

::-webkit-input-placeholder {
	color: #aaa;
    font-family: 'SFProText', sans-serif;
    font-weight: 200;
    font-style: normal;
}
::-moz-placeholder {
	color: #aaa;
    font-family: 'SFProText', sans-serif;
    font-weight: 200;
    font-style: normal;
}
:-ms-input-placeholder {
	color: #aaa;
    font-family: 'SFProText', sans-serif;
    font-weight: 200;
    font-style: normal;
}
:-moz-placeholder {
	color: #aaa;
    font-family: 'SFProText', sans-serif;
    font-weight: 200;
    font-style: normal;
}

a.vlsDocLink:link,
a.vlsDocLink:visited,
a.vlsDocLink:active,
a.vlsDocLink:hover {
	border-radius: 3px;
	color: #20a5b7;
	padding: 2px 6px;
	border: 1px solid #20a5b7;
	font-weight: 700;
	text-decoration: none;
	margin-left: 2px;
}

a.vlsDocLink:hover {
	background: #20a5b7;
	color: #fff;
}

.confirm {
	width: 100%;
	padding: 20px;
	background: #fffccc;
	color: #a89841;
	font-weight: 400;
	border: 1px solid #e4df8e;
    position: absolute;
    z-index: 10;
}

.confirm.success {
	background: #00b27e;
	color: #fff;
	border: 1px solid #00b27e;
}

.confirm.error {
	background: #c31515;
	color: #fff;
	border: 1px solid #c31515;
}

.confirm a.btn {
	color: #fff;
	font-weight: 400;
	text-align: center;
	padding: 5px 20px;
	border-radius: 20px;
	margin-right: 10px;
	text-decoration: none;
}

.confirm a.btn.ok {
	background: #29c089;
}

.confirm a.btn.ok:hover {
	background: #fff;
	color: #29c089;
}

.confirm a.btn.cancel {
	background: #dc181e;
}

.confirm a.btn.cancel:hover {
	background: #fff;
	color: #dc181e;
}

p.action {
    font-family: 'SFProText', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.2em;
    color: #555;
    
    width: 100%;
    padding: 20px;
    background: #fffccc;
    color: #a89841;
    border: 1px solid #e4df8e;
}

select:hover {
	cursor: pointer;
}





/* ========== Hamburger Icon ========== */
#hamburger-icon {
  width: 26px;
  height: 20px;
  position: relative;
  top: 21px;
  left: 8px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  cursor: pointer;
}

#hamburger-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  /*background: rgb(27,163,201);
  background: linear-gradient(337deg, rgba(27,163,201,1) 0%, rgba(0,215,146,1) 58%);*/
    
  background: #fff;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .15s ease-in-out;
  -moz-transition: .15s ease-in-out;
  -o-transition: .15s ease-in-out;
  transition: .15s ease-in-out;
}


#hamburger-icon span:nth-child(1) {
  top: 0px;  
  background: rgb(27,163,201);
  background: linear-gradient(300deg, rgba(27,163,201,1) 0%, rgba(0,215,146,1) 50%);
    
  background: #fff;
}

#hamburger-icon span:nth-child(2),#hamburger-icon span:nth-child(3) {
  top: 7px; 
  background: rgb(27,163,201);
  background: linear-gradient(300deg, rgba(27,163,201,1) 0%, rgba(0,215,146,1) 75%);
    
  background: #fff;
}

#hamburger-icon span:nth-child(4) {
  top: 14px;
  background: rgb(27,163,201);
  background: linear-gradient(300deg, rgba(27,163,201,1) 0%, rgba(0,215,146,1) 100%);
    
  background: #fff;
}

#hamburger-icon.open span:nth-child(1) {
  top: 8px;
  width: 0%;
  left: 50%;
}

#hamburger-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#hamburger-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#hamburger-icon.open span:nth-child(4) {
  top: 8px;
  width: 0%;
  left: 50%;
}



@media screen and (max-width: 1100px) {
    .col-6-12 {
        width: 100%;
    }
    .col-4-12 {
        width: 50%;
    }
    h1.center {
        text-align: left;
    }
}

@media screen and (max-width: 700px) {
    .col-4-12 {
        width: 100%;
    }
}


/* ICON SPECIFIC */
[class^="icon-"], [class*=" icon-"] {
  font-size: 1.5em;
}


.icon-switch-off {
    color: #D7283C;
}
.icon-switch-on {
    color: #4EBC8A;
}

h2.breadcrumbs .icon-arrow-right {
    position: relative;
    top: 4px;
}

.icon-switch-on, .icon-switch-off {
    font-size: 2.2em;
}


.add-container {
    position: absolute;
    top: 60px;
    right: 10px;
}

.add-container > span,
.add-container > a > span {
    color: #4EBC8A;
    font-size: 4em;
}

.icon-progress-1,
.icon-progress-2,
.icon-progress-3,
.icon-progress-4,
.icon-progress-5,
.icon-progress-6,
.icon-progress-7,
.icon-progress-8 {
    position: relative;
    top: 4px;
    margin-right: 8px;
}

[class^="icon-circle"], [class*=" icon-circle"] {
    font-size: 4em;
    color: #4EBC8A;
}

.searchField {
    margin-bottom: 40px;
}

.searchField input[type=text] {
    width: 100%;
    background: url('/pics/icon-filter-solid-15.png') no-repeat 4px 4px;
    background-size: 20px 20px;
    padding: 4px 4px 2px 30px;
}


.break_small, .break_medium {
    display: none;
    margin-top: 20px;
}

@media screen and (max-width: 1360px) {
    .break_medium {
        display: block;
    }
}

@media screen and (max-width: 780px) {
    .break_small {
        display: block;
    }
}

textarea:focus {
    outline: none;
}


table.productionCost {
	width: 100%;
}

table.productionCost tr td {
	font-family: 'SFProText';
	font-weight: 200;
	font-style: normal;
	padding: 3px 0;
	border-bottom: 1px solid #eee;
}

table.productionCost tr:first-child td {
	font-weight: 400;
	border-bottom: 1px solid #555;
}

table.productionCost tr:last-child td {
	font-weight: 400;
	border-bottom: none;
}

table.productionCost tr:nth-last-child(2) td {
	border-bottom: 1px solid #555;
}

table.productionCost.summary {
	width: auto;
	margin-top: 40px;
}

table.productionCost.summary tr td {
	font-size: 1.4em;
	border-bottom: none;
	font-weight: 200;
}

table.productionCost.summary tr:first-child td {
	font-size: 1.1em;
	font-weight: 300;
}

table.productionCost.summary tr td:first-child {
	padding-right: 30px;
}

table.productionCost.summary tr td.bold {
	font-weight: 300;
}


#productionCost {
	width: 120px;
	margin: 0px 10px;
	text-align: center;
}

.cartLoader {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #fff;
}


input.report,
select.report,
textarea.report {
	width: 100%;
	font-size: 1.1em;
	padding: 10px;
}

textarea.report {
	height: 200px;
}

table.time.incident tr td {
	max-width: 200px;
	padding: 6px 20px 6px 6px;
	vertical-align: top;
	border: none;
	border-bottom: 1px solid #e9f1f2;
}

table.time.incident tr:first-child td {
	font-weight: 400;
}