@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600|Material+Icons');

/* GLOBAL */
	html, body {
		height: 100%;
	}

	html * {
		outline: none;
	}

	html,body, text {
		font-family: 'Montserrat' !important;
		font-size: 14px;
		font-weight: 500;
		margin: 15px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}

	body {
		background: #f9f9f9;
	}

/* STANDARD */
	.hidden {
		display: none !important;
	}

	.clear {
		clear: both;
	}

	.a_center {
		text-align: center;
	}

	.container, .container-fluid, .row {
		margin: 0px;
		padding: 0px;
	}
	
	/* ICONS */
		.btn_edit, .btn_delete {
			display: inline-block;
			width: 16px;
			height: 16px;
		}
	
		/* EDIT */
			.btn_edit {
				background: url('../img/btn_edit.png') 0px 0px;
			}
			
			.btn_edit:hover {
				background-position: 0px -18px !important;
			}
		
		/* DELETE */
			.btn_delete {
				background: url('../img/btn_delete.png') 0px 0px;
			}
			
			.btn_delete:hover {
				background-position: 0px -18px !important;
			}
					
	/* LOADING */
		.img_loader {
			position: absolute;
			bottom: 10px;
			left: 10px;
		}
		
	/* QUESTION YES/NO */
		#question_delete h3 {
			font-size: 24px;
			font-weight: 600;
			text-align: center;
		}
		
		#question_delete div {
			padding: 20px 0px 0px 0px;
			text-align: center;
		}
		
		#question_delete button {
			width: 45%;
			margin: 0px auto;
			outline: none;
		}
		
	/* GOOGLE MAPS MAP */
		#googleMap {
			width: 400px;
			height: 400px;
		}
		
	/* DATATABLES */
		.dataTables_filter, .dataTables_filter label {
			width: 100%;
		}
		
		.dataTables_filter input[type="search"] {
			border-color: #ccc;
			border-radius: 4px;
			border-style: solid;
			border-width: 1px;
			box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
			color: #555;
			float: none;
			padding: 6px 12px;
			width: 100%;
			margin-top: 5px;
			margin-bottom: 5px;
			background-image: url("../img/icon_search.png");
			background-repeat: no-repeat;
			background-position: right 10px center;
		}

/* BREADCRUMBS */
	.breadcrumbs {
		margin: 36px 0px 20px 0px;
		padding: 0px 0px 0px 0px;
		border-bottom: 1px solid #d4d4d4;
	}
	
	.breadcrumbs div {
		padding: 10px 0px 20px 0px;
	}

/* NAVBAR TOP */
	.navbar-fixed-top {
		clear: both;
		margin: 0px;
		background: #fff;
		-webkit-box-shadow:0px 1px 5px #999;
		-moz-box-shadow:0px 1px 5px #999;
		box-shadow:0px 1px 5px #999;
		z-index: 9999;
	}
	
	.navbar-top-left, .navbar-top-mid {
		float: left;
		padding: 10px 0px 0px 15px;
	}
	
	.navbar-top-right {
		float: right;
		padding: 15px;
	}
	
	.navbar-top-left {
		width: 250px;
		/*background: #f00;*/
	}
	
	.navbar-top-left h1 {
		margin: 0px;
		padding: 0px;
		font-weight: 600;
		font-size: 24px;
	}
	
	.navbar-top-left h1 a {
		color: #333;
		text-decoration: none;
	}
	
	.navbar-top-left h1 a:hover {
		color: #666;
	}
	
	.navbar-top-mid {
		
	}
	
	.navbar-top-right {
		text-align: right;
	}
	
	.navbar-top-right-button {
		display: none;
	}
	
	.navbar-top-right-items {
		display: inline-block;
	}
	
	.navbar-top-right-items div {
		display: inline;
	}
	
/* SECTION: MENU LEFT */
	#menu-left {
		position: fixed;
		width: 250px;
		top: 50px;
		bottom: 0;
		left: 0;
		z-index: 1000;
		display: block;
		padding: 50px 0px 0px 0px;
		overflow-x: hidden;
		overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
		background: #2f6886;
		background: -webkit-linear-gradient(#2f6886, #4486a0); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#2f6886, #4486a0); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#2f6886, #4486a0); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#2f6886, #4486a0); /* Standard syntax */
	}
	
	.nav-sidebar {
		margin: 0px;
	}
	
	.nav-sidebar, .nav-sidebar li {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}
	
	.nav-sidebar li {
		margin-left: 3px;
	}
	
	.nav-sidebar li.active {
		margin-left: 0px;
	}
	
	.nav-sidebar li a {
		display: block;
		width: 100%;
		color: #fff;
		padding: 10px 0px 10px 10px;
	}
	
	.nav-sidebar li a:hover {
		color: #333;
		background: #f9f9f9;
		text-decoration: none;
	}
	
	.nav-sidebar li.active a {
		background: #2e6382;
		border-left: 3px solid #ecffbf;
	}
	
	.nav-sidebar li a i {
		display: inline-block;
		text-align: center;
		width: 15px;
		margin-right: 10px;
	}
	
/* SECTION: CONTENT */
	#content {
		margin: 0px 0px 0px 250px;
		width: calc(100% - 250px);
		padding: 0px 30px;
		background: #f9f9f9;
	}
	
	/* FORMS */
		label, .div_label {
			display: inline-block;
			width: 200px;
		}
		
		.div_radio {
			display: inline-block;
		}
	
		input[type="text"], input[type="password"] {
			border: 1px solid #ccc;
			border-radius: 5px;
			padding: 4px 5px;
			margin-bottom: 4px;
		}
		
		.div_radio label {
			width: auto;
			padding: 0px 20px 0px 2px;
		}
		
		/* EDIT ACCOUNT > TIC ACCOUNTS */
			.tabs .add_contact {
				margin: 5px 0px 15px !important;
			}
	
	/* TABS */
		.page {
			background: #fff;
			padding: 40px 20px 20px;
			margin-top: 20px;
			border-radius: 5px;
			box-shadow: 0px 0px 3px #ccc;
		}
	
		.tabs {
		}
		
		.tabs > div {
			padding: 10px;
			border: 1px solid #ccc;
			margin-top: 14px !important;
		}
	
		.tabs ul li {
		}
		
		.tabs ul, .tabs ul li {
			list-style-type: none;
			display: inline-block;
			margin: 0px;
			padding: 0px;
		}
		
		.tabs ul li a {
			padding: 15px;
			outline: none;
			margin: 0px !important;
			border-bottom: 1px solid #ccc;
		}
		
		.tabs ul li a:hover {
			text-decoration: none;
		}
		
		.tabs ul li.ui-state-active a {
			border-left: 1px solid #ccc;
			border-right: 1px solid #ccc;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #fff;
			text-decoration: none;			
			background: #fff;
			background: -moz-linear-gradient(top, #207cca 0%, #207cca 5%, #fff 5%, #fff 30%, #fff 100%);
			background: -webkit-linear-gradient(top, #207cca 0%,#207cca 5%,#fff 5%,#fff 30%,#fff 100%);
			background: linear-gradient(to bottom, #207cca 0%,#207cca 5%,#fff 5%,#fff 30%,#fff 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207cca', endColorstr='#fff',GradientType=0 );
		}
	
	/* WIDGETS */
		.widgets {
			margin-bottom: 20px;
			padding: 0px;
			/*background: #f00;*/
		}
		
		.grid-stack-item-content {
			color: #2c3e50;
			background-color: #fff;
			border: 1px solid #e0e2e1;
			border-radius: 5px;
			box-shadow: 0px 0px 3px #ccc;
		}
		
		.grid-stack-item-content h3 {
			font-size: 18px;
			background: #fff;
			border-bottom: 1px solid #ddd;
			margin: 20px 20px 0px 20px;
			padding: 0px 0px 0px 0px;
			width: calc(100% - 40px) !important;
		}
		
		.grid-stack-item-content div.content {
			padding: 20px;
			overflow: hidden;
		}
		
		.grid-stack-item-content div.content p {
			margin-top: 0px;
		}
		
		.grid-stack-item-content .widget_options_settings {
			position: absolute;
			top: 18px;
			right: 45px;
		}
		
		.grid-stack-item-content .widget_options {
			position: absolute;
			top: 18px;
			right: 20px;
		}
		
		/* WIDGET GRID-STACK ICONS */
			.material-icons {
				color: #eee;
			}
			
			.grid-stack-item:hover .material-icons {
				color: #ccc;
			}
			
			.material-icons:hover, .grid-stack-item:hover .material-icons:hover {
				color: #f66;
			}
			
			.widget_options_settings i:hover {
				color: #369 !important;
			}
			
		/**/
			#tabs-dashboard .grid-stack-item-content h3 {
				border: none;
				margin: 10px;
				font-size: 14px;
			}
			
			#tabs-dashboard .grid-stack-item-content div.content {
				padding: 0px;
			}
			
		/* ADD WIDGET */
			.add_widget {
				position: absolute;
				right: 30px;
				top: 70px;
			}
			
			#btn_add_widget {
				background: #fff;
				border: 1px solid #ddd;
				color: #666;
			}
			
			#btn_add_widget i {
				font-size: 12px;
			}
			
			#btn_add_widget:hover {
				color: #333;
				border-color: #ccc;
			}
			
			#widget_to_add {
				border-radius: 5px;
				padding: 5px;
				width: 100%;
			}
			
			.add-widget-settings {
				padding: 20px 0px;
			}
		
		#fileupload .container {
			margin: 0px 0px 0px 250px;
		}
		
		/* WIDGET SHORTCUTS */
			.grid-stack-item .shortcuts ul {
			}
			
			.grid-stack-item .shortcuts ul, .grid-stack-item .shortcuts ul li {
				list-style-type: none;
				text-align: center;
				margin: 0px;
				padding: 0px;
			}
			
			.grid-stack-item .shortcuts ul li {
				display: inline-block;
				margin: 0px 5px 10px;
			}
			
			.grid-stack-item .shortcuts ul li a {
				display: block;
				background: #fff;
				border: 1px solid #e0e2e1;
				border-radius: 5px;
				box-shadow: 0px 0px 3px #ccc;
				text-align: center;
				padding: 10px;
				font-size: 12px;
				width: 105px;
				height: 100px;
				overflow: hidden;
			}
			
			.grid-stack-item .shortcuts ul li a:hover {
				text-decoration: none;
			}
			
			.grid-stack-item .shortcuts ul li a i.fas {
				font-size: 36px;
				margin-bottom: 10px;
			}
			
		/* WIDGET - SETTINGS */
			.widget_settings label {
				font-weight: normal;
			}
		
/* METERS */
	/* GAUGE 2 */
		.gauge2 {
			display: block;
			width: 100%;
			height: 200px;
			text-align: center;
			border-bottom: 1px solid #ccc;
			margin-bottom: 25px;
		}

		#gauge2pin {
			position: absolute;
			bottom: -120px;
		}
		
.speech-bubble {
   position: absolute;
   z-index: 15;
   width: 60px;
   height: 40px;
   line-height: 40px;
   color: #fff;
   font-weight: bold;
   text-align: center;
   padding: 0;
  left: 285px;
  top: 20px;
   background: #333;
   border-radius: 3px;
}
/*
.speech-bubble:after {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 5px 5px 0;
   border-color: #333 transparent;
   display: block;
   width: 0;
   z-index: 1;
   bottom: -5px;
   left: 25px;
}*/



meter,
progress {
  width: 100%;
}

.styled progress {
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 100%;
  height: 30px;

  /* Firefox */
  border: none;
  background: #eee;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
}

.styled progress::-webkit-progress-bar {
  background: #eee;
  box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
  border-radius: 3px;
}

.styled progress::-webkit-progress-value {
  background-color: #c00;
  border-radius: 3px;
}

.styled progress::-moz-progress-bar {
  background-color: #c00;
  border-radius: 3px;
}




.styled meter {
	/* Reset the default appearance */
	/*-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;*/

	width: 100%;
	height: 30px;

	/* For Firefox */
	background: #eee;
	box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
	border-radius: 3px;
}

	/* WebKit */
	.styled meter::-webkit-meter-bar {
	  background: #eee;
	  box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
	  border-radius: 3px;
	}

	.styled meter::-webkit-meter-optimum-value,
	.styled meter::-webkit-meter-suboptimum-value,
	.styled meter::-webkit-meter-even-less-good-value {
	  border-radius: 3px;
	}

	.styled meter::-webkit-meter-optimum-value {
	  background: #86cc00;
	}

	.styled meter::-webkit-meter-suboptimum-value {
	  background: #ffdb1a;
	}

	.styled meter::-webkit-meter-even-less-good-value  {
	  background: #cc4600;
	}


	/* Firefox */
	.styled meter::-moz-meter-bar {
	  border-radius: 3px;
	}

	.styled meter:-moz-meter-optimum::-moz-meter-bar {
	  background: #86cc00;
	}

	.styled meter:-moz-meter-sub-optimum::-moz-meter-bar {
	  background: #ffdb1a;
	}

	.styled meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
	  background: #cc4600;
	}
	
/* GAUGE 3 */
	#RangeCircularGauge {
		width: 100%;
	}
	
	.gauge3 select {
		width: 100%;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 5px;
	}
	
	.gauge3QTY {
		font-size: 20px;
		text-align: center;
	}
	
	.eac-square input {
		width: 100%;
		background-image: url("../img/icon_search.png");
		background-repeat: no-repeat;
		background-position: right 10px center;
	}

		
/* MAGNIFIC POPUP */
	.white-popup {
		background: #fff;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		width: auto;
		max-width: 50%;
		min-height: 500px;
		margin: 10px auto;
		position: relative;
		padding: 20px;
	}
	
	.white-popup-block {
		background: #fff;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		width: auto;
		max-width: 500px;
		margin: 10px auto;
		position: relative;
		padding: 20px;
	}
	
	/* ANIMATIONS */
		/* overlay at start */
		.mfp-fade.mfp-bg {
		  opacity: 0;

		  -webkit-transition: all 0.15s ease-out;
		  -moz-transition: all 0.15s ease-out;
		  transition: all 0.15s ease-out;
		}
		/* overlay animate in */
		.mfp-fade.mfp-bg.mfp-ready {
		  opacity: 0.8;
		}
		/* overlay animate out */
		.mfp-fade.mfp-bg.mfp-removing {
		  opacity: 0;
		}

		/* content at start */
		.mfp-fade.mfp-wrap .mfp-content {
		  opacity: 0;

		  -webkit-transition: all 0.15s ease-out;
		  -moz-transition: all 0.15s ease-out;
		  transition: all 0.15s ease-out;
		}
		/* content animate it */
		.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
		  opacity: 1;
		}
		/* content animate out */
		.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
		  opacity: 0;
		}
		
/* PAGES */
	/* CRM/HRM */
		#page_support label {
			width: auto;
		}

	/* COMPANIES */
		/* VIEW */
			.page_company_left {
				float: left;
			}
			
			.page_company_right {
				float: right;
			}

	/* STATISTICS */
		#container_stats_body {
			padding-top: 20px;
		}
	
		.container_stats_header_search, .container_stats_header_export {
			float: left;
		}
		
		.container_stats_header_search {
			width: calc(100% - 180px);
		}
		.container_stats_header_export {
			width: 180px;
			text-align: right;
		}
		
		#container_stats_body .grid-stack-item-content {
			/*background: #0f0;*/
		}
		
		#container_stats_body .grid-stack-item-content h3 {
			border-bottom: none !important;
			margin: 20px 0px 0px 0px;
			padding: 0px 0px 0px 0px;
			height: auto;
			width: auto !important;
			text-align: center;
			font-size: 18px;
			/*background: #00f;*/
		}
		
		#container_stats_body .grid-stack-item-content .content {
			font-size: 24px;
			text-align: center;
			overflow: hidden;
			/*background: #f00;*/
			min-height: 100px;
		}
		
		.percDelta {
			font-size: 16px;
			color: #666;
			padding-top: 10px;
		}
		
		/* CHART BRANDS MARKET SHARE, SEASON SHARE */
			#chartBrandsMarketShare, #chartBrandsSeasonShare {
				height: 300px !important;
			}
			
			.chartBrandsMarketShareMark {
				font-size: 12px;
				font-style: italic;
				color: #ccc;
				position: absolute;
				left: 10px;
				bottom: 10px;
			}
			
		/* QTY DEVELOPMENT */
			#chartQTYDevelopment {
				height: 220px !important;
			}
			
		/* FA */
			.percDelta .fa-chevron-circle-down {
				color: #900;
				font-size: 16px;
			}
			
			.percDelta .fa-chevron-circle-up {
				color: #090;
				font-size: 16px;
			}
			
	/* EDIT ACCOUNT */
		/* TIC ACCOUNTS */
			#add-tic-account input[type="text"], #add-tic-account input[type="password"] {
				width: calc(100% - 204px);
			}
			
		/* DASHBOARD - WIDGETS */
			#tabs-dashboard .user-active-widgets {
				display: inline-block;
				width: calc(100% - 212px);
				border-right: 1px solid #eee;
			}
			
			#tabs-dashboard .user-available-widgets {
				display: inline-block;
				position: absolute;
				width: 200px;
				top: 242px;
				right: 61px;
			}
			
			#tabs-dashboard .user-available-widgets h3 {
				margin: 5px 0px 20px 0px;
				padding: 0px;
				font-size: 18px;
			}
			
			#tabs-dashboard .widget-grid-stack-item {
				margin-bottom: 5px;
			}
			
			#tabs-dashboard .grid-stack-item-content {
				padding: 10px;
			}
	
@media screen and (max-width: 768px) {
	/*.navbar-top-left {
		width: 50px;
	}*/
	
	/* NAVIGATION */
		#menu-left {
			width: 50px;
		}
		
		#menu-left li a span {
			display: none;
		}
			
		.navbar-top-right-button {
			display: inline-block;
		}
		
		.navbar-top-right-button a {
			border: 1px solid #ccc;
			border-radius: 4px;
			padding: 5px;
			color: #ccc;
			-webkit-tap-highlight-color: #eee;
			text-decoration: none;
		}
		
		.navbar-top-right-button a:hover {
		}
		
		.navbar-top-right-items {
			display: none;
			position: absolute;
			/*left: -75vw;*/
			/*width: 100vw;*/
			/*top: 0px;*/
			background: #fff;
			left: -5px;
		}
		
		.navbar-top-right-items div {
			display: block;
			width: 100%;
			text-align: center;
		}
		
		.navbar-top-right-items:first-child {
			padding: 5px !important;
			background: #0f0;
		}
		
		.navbar-top-right-items div.mnu_separator {
			display: none;
		}
		
		.navbar-top-right-items a {
			display: block;
			padding: 5px !important;
			width: 100% !important;
			text-align: center;
			border-bottom: 1px solid #ccc;
		}

	/* SECTION:CONTENT */
		#content {
			margin: 0px 0px 0px 50px;
			width: calc(100% - 50px);
		}
	}
}