/*@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css");

@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:100,400");

$background-color: #0f2027;

$accent-color: #006633;*/

/*.gauge {

	&-chart {

		width: 20rem;

	}

	&-text {

		text-anchor: middle;

		fill: $accent-color;

		font-weight: 100;

		font-size: 25%;

	}

}



html {

	font-size: 1.5rem;

}*/



.gauge {

	overflow: hidden;

}



.gauge-chart {

	float: left;

	margin: 10px;

	overflow: hidden;

	width: 45%;

}



.gauge-text {

	text-anchor: middle;

	/*fill: $accent-color;*/

	font-weight: 400;

	font-size: 70%;

}



/*body {

	background: $background-color;

	color: $accent-color;

	font-family: "Josefin Sans", sans-serif;

	font-weight: 100;

	display: flex;

	align-items: center;

	margin: 0px; 

	padding: 0px; 

	width: 100%; 

}*/



p {

	text-align: center;

}



body {

	background: #EEF2F2;

	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

	margin: 0px; 

	padding: 0px; 

	height: 100%; 

	width: 100%; 

}



select {

	margin: 3px; padding: 0.5em;

}



select[id=reports] {

	padding: 1em; font-family: 'Verdana'; font-size: 1em;

}



select[id=reports] options {

	padding: 1em;

}



input {

	float: left;

	padding: 0.5em;

	width: 100%;

}



input[type=SUBMIT] {

	background: #339999;

	color: #ccc;

	cursor: pointer;

	float: right;

	width: 20%;

}





input[type=date]::-webkit-calendar-picker-indicator { display: show }



input[type=date]::-webkit-inner-spin-button, 

input[type=date]::-webkit-outer-spin-button { 

  -webkit-appearance: none; 

  margin: 0; 

}



input.largerCheckbox {

    width: 33px;

    height: 33px;

}



#showmore {

	float: left;

	list-style: none;

	margin: 10px;

	overflow: hidden;

	padding: 0; 

	width: 93%;

}



#showmore li { 

	background: #fff;

	color: #000;

	margin: 0;

  	padding: 0.4em;

  	overflow: hidden; 

  	width: 100%;

}



#showmore li a { color: inherit; display: block; }



#showmore li:nth-child(odd) { background: #eee; }



#showmore li:hover { background: #ccc; color: #fff; }







#sortlink {

	color: inherit;

}



.button {

	cursor: pointer;

}



.container {

	background: #E7EBEB;

	overflow: hidden;

	width: 100%;

}



.header {

	background: #45A2B1;

	color: #192727;

	height: 10%;

	overflow: hidden;

	text-align: right;

	width: 100%;

}



.header span {

	margin: 2em 1.8em 1em 1em;

	overflow: hidden;

	padding: 1em;

}



.login {

	background: #E7EBEB;

	float: right;

	margin: 2em;

	overflow: hidden;

	width: 30%;

}



.main {

	background: #E7EBEB;

	float: left;

	margin: 10px 1em;

	overflow: hidden;

	width: 100%;

}



.content { 

	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);

	float: left;

	margin: 3.5em 10px 5px 5px;

	overflow: hidden;

	width: 95%;

}


.widget {
	border-bottom: 2px solid #333; 
	float: left; 
	margin: 10px auto; 
	overflow: hidden; 
	text-align: center; 
	width: 95%;
}



.coa {

	color: #91A8A8;

	float: left;

	margin: 10px;

	overflow: hidden;

	text-align: center;

	width: 100%;

}



.coa ul {

	list-style: none;

  	margin: 0;

  	padding: 0;

	text-align: left;

}



.coa li {

	border-bottom: 1px solid #EEF2F2;

	color: #91A8A8;

	cursor: pointer;

	font: 200 20px/1.5 Helvetica, Verdana, sans-serif;

	padding: 0.2em;

}



.coa li:last-child {

 	 border: none;

}



.coa li:hover {

	background: #E7EBEB;

	color: #192727;

}

 

.coa li a {

  	text-decoration: none;

 	color: #E7EBEB;

  	display: block;

 	width: 200px;

 

  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;

  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;

  -o-transition: font-size 0.3s ease, background-color 0.3s ease;

  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;

  transition: font-size 0.3s ease, background-color 0.3s ease;

}

 

.coa li a:hover {

 	font-size: 20px;

  	color: #192727;

}



.status {

	background: #000;

	padding: 0 5px 0 5px;

	position: fixed;

	bottom: 0;

	width: 300px;

}



/* The message box is shown when the user clicks on the password field */

#message {

	display:none;

  	background: #f1f1f1;

  	color: #000;

  	position: relative;

  	padding: 20px;

  	margin-top: 10px;



}



#message p {

	padding: 10px 35px;

  	font-size: 18px;

  	text-align: left;

}



/* Add a green text color and a checkmark when the requirements are right */

.valid {

	color: green;

}



.valid:after {

	position: relative;

  	left: -35px;

  	content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0 ✔";

}



/* Add a red text color and an "x" when the requirements are wrong */

.invalid {

	color: red;

}



.invalid:after {

	position: relative;

  	left: -35px;

  	content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0 ✖";

}



.orderqty:invalid+span:after {

  content: '✖';

  padding-left: 5px;

}



.orderqty:valid+span:after {

  content: '✓';

  padding-left: 5px;

}



nav {
    display: flex;
    flex-direction: column;
    float:  left;
    margin: 30px;
    max-height: 100px;
    /*overflow: hidden;*/
    position: sticky;
    top: 0;

}

nav a {
    text-decoration: none;
}

nav ul {
    position: sticky;
    top: 0;
    background: #91A8A8;
    list-style: none;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}

nav li {
    background: #bbb;
    border-bottom: 1px solid #EEF2F2;
    color: #fff;
    float: left;
    font: 200 14px/1.5 Helvetica, Verdana, sans-serif;
    position: relative;
    text-decoration: none;
    transition-duration: 0.5s;
    width: 100%;
}

nav li span {
    text-decoration: none;
    color: #E7EBEB;
    display: block;
    padding: 0.5em;
    width: 95%;
}

nav li span:hover {
    background: #E7EBEB;
    color: #192727;
    cursor: pointer;
}

nav ul li ul {
    background: #91A8A8;
    visibility: hidden;
    opacity: 0;
    min-width: 5rem;
    position: absolute;
    text-align: left;
    transition: all 0.5s ease;
    top: 100%;
    left: 0;
    display: none;
    width: 100%;
    z-index: 1;
}

nav ul li:hover > ul,
nav ul li ul:hover {
    visibility: visible;
    opacity: 1;
    display: block;
}

nav ul li ul li {
    background: #91A8A8;
    border-bottom: 1px solid #EEF2F2;
    clear: both;
    color: #EEF2F2;
    width: 100%;
}

nav ul li ul li span {
    color: #E7EBEB;
}

.caret {
    width: 0;
    height: 0;
    display: inline-block;
    border: 5px solid transparent;
}

.down {
    border-top-color: black;
    position: relative;
    top: 10px; /* Add 'px' to specify units */
}

nav li span:hover + .down {
    border-top-color: #FF6600;
}

.down:hover {
    border-top-color: #FF6600;
}

.icon {
    /* ... Your icon styles ... */
}

.icon:hover {
    box-shadow: 1px 1px #888888;
}




.sidemenu {

	background: transparent;

	float: right;

	overflow: hidden;

	position: fixed;

	top: 9%;

	right: 0;

	text-align: center;

	width: 100%;

	z-index: 1;

}



.sidemenu ul {

	background: #91A8A8;

	list-style-type: none;

  	margin: 0;

  	overflow: hidden;

  	padding: 0;

	text-align: left;

}



.sidemenu li {

	border-bottom: 1px solid #EEF2F2;

	color: #EEF2F2;

	cursor: pointer;

	font: 200 16px/1.5 Helvetica, Verdana, sans-serif;

	padding: 0.2em;

}



.sidemenu li:last-child {

 	border: none;

}



.sidemenu li:hover {

	background: #E7EBEB;

	color: #192727;

}

 

.sidemenu li a {

  	text-decoration: none;

 	color: #E7EBEB;

  	display: block;

 	width: 100%;

 

  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;

  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;

  -o-transition: font-size 0.3s ease, background-color 0.3s ease;

  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;

  transition: font-size 0.3s ease, background-color 0.3s ease;

}

 

.sidemenu li a:hover {

 	font-size: 20px;

  	color: #192727;

}



.sidemenu .menuinner {

  clear: both;

  max-height: 0;

  transition: max-height .2s ease-out;

}



.sidemenu .menu-icon {

  cursor: pointer;

  display: inline-block;

  float: right;

  padding: 40px 10px;

  position: relative;

  scale: 2;

  right: 10px; 

  user-select: none;

}



.sidemenu .menu-icon .navicon {

  background: #333;

  display: block;

  height: 2px;

  position: relative;

  transition: background .2s ease-out;

  width: 18px;

}



.sidemenu .menu-icon .navicon:before,

.sidemenu .menu-icon .navicon:after {

  background: #333;

  content: '';

  display: block;

  height: 100%;

  position: absolute;

  transition: all .2s ease-out;

  width: 100%;

}



.sidemenu .menu-icon .navicon:before {

  top: 5px;

}



.sidemenu .menu-icon .navicon:after {

  top: -5px;

}



.sidemenu .menu-btn {

  display: none;

}



.sidemenu .menu-btn:checked ~ .menuinner {

  max-height: 100%;

}



.sidemenu .menu-btn:checked ~ .menu-icon .navicon {

  background: transparent;

}



.sidemenu .menu-btn:checked ~ .menu-icon .navicon:before {

  transform: rotate(-45deg);

}



.sidemenu .menu-btn:checked ~ .menu-icon .navicon:after {

  transform: rotate(45deg);

}



.sidemenu .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,

.sidemenu .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {

  top: 0;

}



/* This container is needed to position the front and back side */

.menuinner {

  position: relative;

  width: 100%;

  height: 100%;

  text-align: center;

  transition: transform 0.8s;

  transform-style: preserve-3d;

}



/* Do an horizontal flip when you move the mouse over the flip box container */

.menuinner {

	/*transform: rotateY(180deg);*/

}



.on {

    -webkit-transform: rotateY(-180deg);

}



.off {

    -webkit-transform: rotateY(0deg);

}



/* Position the front and back side */

.menu-front, .menu-back {

	position: relative;

  	width: 100%;

  	height: 100%;

  	backface-visibility: hidden;

}



/* Style the front side (fallback if image is missing) */

.menu-front {

  background-color: #bbb;

  color: black;

}



/* Style the back side */

.menu-back {

	position: fixed;

	background: transparent;

	color: white;

	top: 0;

	transform: rotateY(180deg);

}



/* reorder button flasher */

.notification-alert {

	background-color: red;

	border-radius: 4px; cursor: pointer; 

	color: #fff;

	display: inline-block;

	font-size: 12px;

	padding: 5px;

	position: relative;

	width: 80%;

	animation: blinker 1.5s linear infinite;

}



@keyframes blinker {

	50% {

	    background-color: #45A2B1;

	}

}


/* When webpage is fullsize */

@media (min-width: 970px) and (orientation: landscape) and (pointer: fine) {

	.content {
		
		margin: 0.15em 10px 5px 5px;

		width: 80%; 

	}

	.sidemenu {

		background: #91A8A8;

		top: 12%;

    	width: 210px;

  	}



  	.sidemenu li {

   		float: left;

  	}



  	.sidemenu li a {

   		width: 200px;

  	}



  	.sidemenu .menuinner {

    	clear: none;

    	float: right;

    	max-height: none;

  	}



  	.sidemenu .menu-icon {

    	display: none;

  	}

}



.act {

	background: #E7EBEB;

	color: #192727;

} 

.act a:visited {

	color: #192727;

}



.footer {

	color: #192727;

	height: 20%;

	overflow: hidden;

	text-align: center;

	width: 100%;

}



.footer span {

	color: #879191;

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 40px;

	overflow: hidden;

}



	/* ============================================================

	  Tabbed pages

	============================================================ */



	.tabbed > input {

		display : none;

	}

	

	.tabbed > input:not(:checked) + section > div {

		display : none;

	}

	

	.tabbed > section > h1 {

		float : left;

		box-sizing  : border-box;

  		margin      : 0;

  		padding     : 0.5em 0.5em 0;

  		overflow    : hidden;

  		font-size   : 1em;

  		font-weight : normal;

	}

	

	.tabbed > section > div {

		color: #333;

		float  : right;

		width  : 100%;

		margin : 2.8em 0 0 -100%;

		min-height: 300px;

		box-sizing    : border-box;

		padding       : 0.5em 0.75em;

		border        : 1px solid #aaa;

		border-radius : 4px;

		box-shadow    : 0 0 0.5em rgba(0,0,0,0.0625);

		background    : #fff;

		position : relative;

  		z-index  : 1;

	}

	

	.tabbed {

		border-radius : 4px;

		width : 100%;

	}

	

	.tabbed > section > h1 > label {

		color: #FF6600;

	  	cursor: pointer;

		font-size:16px;

		-moz-user-select : none;

		-ms-user-select : none;

	  	-webkit-user-select : none;

		display                 : block;

  		padding                 : 0.25em 0.75em;

  		border                  : 1px solid #aaa;

 		border-bottom           : none;

  		border-top-left-radius  : 4px;

  		border-top-right-radius : 4px;

  		box-shadow              : 0 0 0.5em rgba(0,0,0,0.0625);

  		background              : #fff;

	}

	

	.tabbed > input:first-child + section > h1 {

	  	padding-left : 1em;

	}

	

	.tabbed > input:checked + section > h1 > label {

		color: #45A2B1;

	  	position : relative;

	  	z-index  : 2;

  		border-bottom: 2px solid #45A2B1;



	}

/* Styles for tabs */
.tablinks {  
    background-color: #3FA19F; /*Dark Green*/
    
    border: none; 
    margin: 0 5px 0 0; 
    
    cursor: pointer;  
    color: #fff;
    overflow: hidden;
    transition: background-color 0.3s ease;
    margin-bottom: -1px;
    z-index: 2;
}

.tablinks.active {
    background-color: #fff; 
    border: 1px solid #3FA19F; /*Dark Green*/
    border-bottom: 1px solid #fff;
    color: #F57649; /*Orange*/
}    

.tabcontent {
    /*display: none;*/
    float:  left;
    overflow: hidden;
    width: 100%;
}

.tabcontent.active {
    display: block;
    float:  left;
    overflow: hidden;
    width:  100%;
}

	/* ============================================================

	  COMMON Toggle switch

	============================================================ */

	.switchwrap {

		float: right; 

		overflow: hidden; 

	}

	

	.switch {

		display: inline-block;

		margin: 0;

	}

	

	.switch:hover {

		opacity: 0.5;

	}

	

	.toggle {

		position: absolute;

	  	margin-left: -9999px;

	  	visibility: hidden;

	}

	

	.toggle + label {

		display: block;

		position: relative;

		cursor: pointer;

		outline: none;

		-webkit-user-select: none;

		-moz-user-select: none;

		-ms-user-select: none;

		user-select: none;

	}



	.closedd {

		display: none;

	}



	.openn{

	  	display: block;

	}

	

	/* ============================================================

	  SWITCH - YES NO

	============================================================ */

	input.toggle-yes-no + label {

		padding: 2px;

	  	width: 80px;

	  	height: 40px;

	}

	

	input.toggle-yes-no + label:before, input.toggle-yes-no + label:after {

		display: block;

	  	position: absolute;

	  	top: 0;

	  	left: 0;

	  	bottom: 0;

	  	right: 0;

	  	color: #006633;

	  	font-family: "Roboto Slab", serif;

	  	font-size: 12px;

	  	text-align: center;

	  	line-height: 45px;

		border-radius: 4px;

	}

	

	input.toggle-yes-no + label:after {

		color: #000;

	}

	

	input.toggle-yes-no + label:before {

		/*background-color: #333; /* background: #0099cc */

	  	content: attr(data-off);

	  	-webkit-transition: -webkit-transform 0.5s;

	  	-moz-transition: -moz-transform 0.5s;

	  	-o-transition: -o-transform 0.5s;

	  	transition: transform 0.5s;

	  	-webkit-backface-visibility: hidden;

	  	-moz-backface-visibility: hidden;

	  	-ms-backface-visibility: hidden;

	  	-o-backface-visibility: hidden;

	  	backface-visibility: hidden;

	}

	

	input.toggle-yes-no + label:after {

		/*background-color: #009933;*/

	  	content: attr(data-on);

	  	-webkit-transition: -webkit-transform 0.5s;

	  	-moz-transition: -moz-transform 0.5s;

	  	-o-transition: -o-transform 0.5s;

	  	transition: transform 0.5s;

	  	-webkit-transform: rotateY(180deg);

	  	-moz-transform: rotateY(180deg);

	  	-ms-transform: rotateY(180deg);

	  	-o-transform: rotateY(180deg);

	  	transform: rotateY(180deg);

	  	-webkit-backface-visibility: hidden;

	  	-moz-backface-visibility: hidden;

	  	-ms-backface-visibility: hidden;

	  	-o-backface-visibility: hidden;

	  	backface-visibility: hidden;

	}

	

	input.activate + label:before {

		background-color: #0099cc;

	  	content: attr(data-off);

	  	-webkit-transition: -webkit-transform 0.5s;

	  	-moz-transition: -moz-transform 0.5s;

	  	-o-transition: -o-transform 0.5s;

	  	transition: transform 0.5s;

	  	-webkit-backface-visibility: hidden;

	  	-moz-backface-visibility: hidden;

	  	-ms-backface-visibility: hidden;

	  	-o-backface-visibility: hidden;

	  	backface-visibility: hidden;

	}

	

	input.activate + label:after {

		background-color: #009933;

	  	content: attr(data-on);

	  	-webkit-transition: -webkit-transform 0.5s;

	  	-moz-transition: -moz-transform 0.5s;

	  	-o-transition: -o-transform 0.5s;

	  	transition: transform 0.5s;

	  	-webkit-transform: rotateY(180deg);

	  	-moz-transform: rotateY(180deg);

	  	-ms-transform: rotateY(180deg);

	  	-o-transform: rotateY(180deg);

	  	transform: rotateY(180deg);

	  	-webkit-backface-visibility: hidden;

	  	-moz-backface-visibility: hidden;

	  	-ms-backface-visibility: hidden;

	  	-o-backface-visibility: hidden;

	  	backface-visibility: hidden;

	}

	

	input.toggle-yes-no:checked + label:before {

		-webkit-transform: rotateY(180deg);

	  	-moz-transform: rotateY(180deg);

	  	-ms-transform: rotateY(180deg);

	  	-o-transform: rotateY(180deg);

	  	transform: rotateY(180deg);

	}

	

	input.toggle-yes-no:checked + label:after {

		-webkit-transform: rotateY(0);

	 	-moz-transform: rotateY(0);

	 	-ms-transform: rotateY(0);

	 	-o-transform: rotateY(0);

	  	transform: rotateY(0);

	}



/*Upload Styles*/

#drop-area {

  border: 2px dashed #ccc;

  border-radius: 20px;

  width: 95%;

  font-family: sans-serif;

  margin: 10px auto;

  padding: 20px;

  text-align: center;

}

#drop-area.highlight {

  border-color: purple;

}

#drag_upload_file {

    width:50%;

    margin:0 auto;

}

#drag_upload_file p {

    text-align: center;

}

#drag_upload_file #selectfile {

    display: none;

}

p {

  margin-top: 0;

}

.my-form {

  margin-bottom: 10px;

}

#gallery {

  margin-top: 10px;

  width: 90%;

}

#gallery img {

  width: 150px;

  margin-bottom: 10px;

  margin-right: 10px;

  vertical-align: middle;

}

.button {

  display: inline-block;

  padding: 10px;

  background: #ccc;

  cursor: pointer;

  border-radius: 5px;

  border: 1px solid #ccc;

  width: 150px;

}

.button:hover {

  background: #ddd;

}

#fileElem {

  display: none;

}