body {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 14px;
		line-height: 1.42857143;
		color: #222;
		padding-top: 70px;
	}

	html, body {
		/*overflow-x: hidden;*/ /* Prevent scroll on narrow devices */
		background-color: #eee;
		height:100%;
	}

	a {
		color: #ff931e;
		text-decoration: none;
	}

	a:hover,a:focus{color:#222;text-decoration:underline}

	h4, .h4 {
		font-size: 14px;
	}

	footer {
		padding: 30px 0;
	}

	.checkbox{
		margin-left: 18px !important;
	}

	#chek{
		line-height: 30px !important;
		padding-left: 5px !important;
	}

	/* --------- Format checbox present on login page ---------*/
	input[type='checkbox'] {
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeSpeed;
		width: 17px;
		height: 17px;
		margin: 0;
		margin-right: 1px;
		margin-top: 5px;
		margin-left: -18px;
		display: block;
		float: left;
		position: relative;
	}

	input[type='checkbox']:after {
		content:"";
		vertical-align: middle;
		text-align: center;
		line-height: 17px;
		position: absolute;
		height: 17px;
		width: 17px;
		left:0px;
		top:0px;
		font-size:12px;
		-webkit-box-shadow: inset 1px 1px 3px #000, 1px 1px 3px #444;
		-moz-box-shadow: inset 1px 1px 3px #000, 1px 1px 3px #444;
		box-shadow: inset 1px 1px 3px #000, 1px 1px 3px #444;
		background: white;
	}

	input[type='checkbox']:checked:after {
		background: white;
		content:'\2714';
		color: black;
	}

	input[type="checkbox"]:disabled:after{
		background: grey;
	}
	
	
	/* works only in firefox, if chrome browser, runs css rule above */
	@-moz-document url-prefix(){
		input[type=checkbox]{
			-moz-transform: scale(1.5);
			margin-left: -18px !important;
		}
	}
	
	/*---------------------------------------------------------------*/

	.text-center{
		text-align: center;
		left: 50%;
		left-margin: -75px;
		padding-top: 26px;
	}

	.navbar-brand {
		font-family: 'Montserrat', Arial, Helvetica, sans-serif;
		font-weight:400;
		text-transform:uppercase;
		margin-left: 0;
		float: left;
		padding: 18px 15px 0 15px;
		font-size: 16px;
		line-height: 20px;
		height: 50px;
	}

	.navbar-brand > img{
		display: inline !important;
	}

	.logo-top { margin-top:-12px;}

	.navbar-inverse {
		background-color: #222222;
		border-color:  rgba(51,51,51,0);
	}
	
	.navbar-inverse .navbar-brand {
		color: #fff;
	}
	
	.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
		color: #ff931e;
		background-color: transparent
	}
	
	.nav>li>a:hover, .nav>li>a:focus {
		color: #ff931e;
		text-decoration: none;
		background-color: rgba(0, 0, 0, .09);
	}

	.breadcrumb {
		padding: 8px 15px;
		margin-bottom: 20px;
		list-style: none;
		background-color: #fff;
		border-radius: 4px;
	}
	.panel {
		margin-bottom: 20px;
		background-color: transparent;
		border: 1px solid transparent;
		border-radius: 4px;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.panel-default {
		border-color: transparent;
	}
	.panel-default>.panel-heading {
		background-color: #ffffff;
	}
	.panel-title{
		color: inherit;
		font-size: 20px;
		line-height: 25px !important;
		text-decoration: none;
	}
	.panel-title:hover{
		text-decoration: none;
	}

	.panel-title>a {
		color: inherit;
		font-size: 1.2em;
	}
	.panel-title>a:hover {
		text-decoration: none;
	}
	.panel-title a:hover .glyphicon {
		color: #ff931e;
	}

	#btnvalida {
		color: #fff;
		background-color: #ff931e;
		border-color: #de7d17;
	}

	.mii {
		text-align: center;
		padding: 0px 10px 0px 10px; /*15*/	
		font-family: 'Montserrat', Arial, Helvetica, sans-serif;
		font-weight: 100;
	}


	@media (max-width: 520px) {
		.mii h4 { font-size: 11px;}
	}

	@media (max-width: 350px)
	{
		.mii h4 { font-size: 9px;}
	}

	.mii a {
		display: block;
		height: 100%;
		color: #222;
		border-radius: 4px;
		-webkit-transition: -webkit-filter;
		-moz-transition: filter;
		transition: filter;
	}

	.mii a:hover {
		text-decoration: none;
	}
	
	.mii a:active {
		-webkit-filter: grayscale(100%);
		filter: grayscale(100%);
	}
	
	.device {
		text-align: center;
		min-height: 90px;
		border-radius: 4px;
		font-family: 'Montserrat', Arial, Helvetica, sans-serif;
		font-weight: 100;
		margin-bottom: 5px;
	}


	.device_reduce {
		min-height: 45px;
	}

	.device p { font-size:14px;}

	.device > a {
		padding-top: 13px;
		display: block;
		height: 100%;
		color: #222;
		border-radius:4px;
		-webkit-transition: background 0.2s;
		-moz-transition: background 0.2s;
		transition: background 0.2s;
	}

	.device > a:hover {
		background-color: #222;
		color: #fff;
		text-decoration: none;
	}

	.device span.device_on_off { display:block; border-radius: 4px;}

	.device_on_h90 {
		color: #fff;
		min-height: 90px;
		background-color: #099441;
		padding-top:10px;
	}
	.device_off_h90 {
		color:#fff;
		min-height: 90px;
		background-color:#CF0800;
		padding-top:10px;
	}

	.device_on_off {
		min-height: 90px;
		background-color:#fff;
		padding-top:10px;
	}

	.device_on_off > a {
		padding:5px 10px;
		display: inline;
	}

	span.bg_on_off {
		position: absolute;
		right: 25px;
		top:44px;
		display: inline-block;
	}

	.device span.device_on_off_2 { display:block; border-radius: 4px; line-height: 25px;}

	.device_on_off_2 {
		min-height: 55px;
		background-color:#fff;
		padding-top:5px;
	}

	span.bg_on_off_2 {
		position: absolute;
		right: 25px;
		top:10px;
		display: inline-block;
	}


	.slider.slider-horizontal {
		width: 100px;
		height: 20px;
	}

	.slider-track-customized {
		width: 97% !important;
	}

	.slider-expandable {
		float: left;
		width: 72% !important;
		margin-left: 7px;
	}

	.device .glyphicon { color:#ff931e !important; }

	.device a:hover span.glyphicon { color:#ff931e !important; }

	.btn {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:bold;}

	.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
		outline: none !important;
	}
	
	.btn-def-devices:hover {background-color: #fff !important;}

	.btn-default:active, 
	.btn-default.active, 
	.btn-default.active:focus,
	.btn-default.active:hover {
		color: #222;
		background-color: #ff931e;
		border-color: #fff;
	}

	/* For video-doorphone and video-surveillance */
	.btn-fixed-size {
		padding: 8px 14px !important;
	}

	.btn-default-video:active, 
	.btn-default-video.active {
		background-color: #ff931e !important;
		outline: 0;
	}

	.btn-default-video,
	.btn-default-video:focus,
	.btn-default-video:hover {
		background-color: #fff;
		outline: 0;
		border-color: #ccc;
	}
	
	
	/*
	.btn-default-video.focus,
	.btn-default-video:focus {
		background-color: #fff;
		border-color: #ccc;
		outline: 0;
	}
*/

	/* ancient rule -> .badge { background: #ff931e; font-size:0.9em; font-weight: 400; border-radius: 20px; padding:6px; line-height:0.9em; position: absolute; right: 25px;}*/
	.badge { background: transparent; font-size:0.9em; font-weight: 400; border-radius: 20px; padding:6px; line-height:0.9em; position: absolute; right: 25px; color: #ff931e;}

	h3.badge { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size:1.8em; font-weight: 400;  line-height:1.8em; border-radius: 44px; padding:12px;  background: #ff931e; }

	/* Multimedia */


	.btn-multimedia:hover, .btn-alarms:hover, .btn-multimedia:focus, .btn-alarms:focus, .btn-multimedia.focus, .btn-alarms.focus {
		background-color: #fff !important;
	}

	.btn-multimedia.active:hover, .btn-multimedia.active:focus {
			background-color: #ff931e !important;
	}

	.btn-mult-shuffle.active:hover, .btn-mult-shuffle.active:focus {
		background-color: #fff !important;
		color: #000 !important;
	}
	/* ------------------------ */


	.multimedia a:hover span.glyphicon { color:#ff931e; }

	.multimedia .slider.slider-horizontal {
		width: 100% !important;
		height: 60px;
	}

	.multimedia #ex6CurrentSliderValLabel { font-size: 2em; }

	.multimedia .slider.slider-horizontal .slider-handle {
		margin-left: -10px;
		margin-top: -15px;
	}

	.multimedia .slider-handle { height:40px}

	.multimedia .slider-handle.round {
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
	}


	/* Video-Doorphone */

	.footer{
		position: relative;
		text-align: center;
		width: 640px;
		left: 51%;
		margin-left: -320px;
		margin-top: -49px !important;
	}

	@media (max-width: 520px){
		.footer{
			text-align: center;
			top: -20px;
		}
	}

	@media (min-width: 992px) and (max-width: 1199px)
	{
		.footer{
			left: 40% !important;
		}
	}


	/* Multimedia */

	#img-radio{
		width: auto !important;
		height: 350px;
		margin-top: 20px !important;
		margin-bottom: 20px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		display: block !important;
	}
	
	.box-slider {
		margin-top: 22px;
		margin-left: auto;
		margin-right: auto;
		height: 310px !important;
	}

	.slider.slider-vertical{
		top: 0px;
		margin-left: 45%;
		height: 292px !important;
		width: auto !important;
	}

	.btn-volume {
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 5px;
	}

	
	@media(max-width: 400px) {
		#img-radio { height: 200px !important;}
		.box-slider { height: 176px !important; }	
		.slider.slider-vertical { height: 157px !important; }
		.btn-volume { margin-left: -18px; }
		.text-center {margin-left: -6px;}
	}
	
	@media(min-width: 400px) and (max-width: 760px)
	{
		.btn-volume{margin-left: -10px;}
	}
	
	
	@media(min-width: 1800px) and (max-width: 2000px)
	{
		.btn-volume{margin-left: 20px;}
	}
	

	/* Changes to the slider handle size */

	.slider-handle{
		width: 25px !important;
		height: 25px !important;
		margin-top: -7px !important;
		margin-left: -11px !important;
	}

	.slider-handle-multimedia {margin-left: -6px !important;}


	.device2 {
		text-align: center;
		min-height: 35px;
		border-radius: 4px;
		font-family: 'Montserrat', Arial, Helvetica, sans-serif;
		font-weight:100;
		margin-bottom:10px;
		cursor: pointer;
		max-height: 80px !important;
	}

	.device_on_off_2 {
		min-height: 50px;
		background-color:#fff;
		padding-top:10px;
	}

	.device_on_off_2 > a {
		padding:5px 10px;
		display: inline;
	}

	.device2 span.device_on_off_2 { display:block; border-radius: 4px;}

	.align-right{
		width: 80%;
		text-align: right;
		margin-top: -40px;
	}

	#bodyWarning, #bodyWarningLicensed{
		font-family: 'Montserrat', Arial, Helvetica, sans-serif;
		background-color: black;
		padding: 40px;
		color: red;
		margin-top: auto !important;
	}

	#ie-meteo-warning, #ie-energy-warning {
		font-family: 'Montserrat', Arial, Helvetica, sans-serif;
		background-color: black;
		padding: 40px;
		color: red;
		text-align: center;
	}
	
	#warnNoFloorMulti{
		font-family: 'Montserrat', Arial, Helvetica, sans-serif;
		background-color: black;
		padding: 40px;
		color: red;
		margin-top: 15% !important;
		margin-left: 10%;
		margin-right: 10%;
		text-align: center;
	}

	#warnNoFloorDevices{
		font-family: 'Montserrat', Arial, Helvetica, sans-serif;
		background-color: black;
		padding: 40px;
		color: red;
		margin-top: 15% !important;
		margin-left: 10%;
		margin-right: 10%;
		text-align: center;
	}

	#username{
		margin-left: 88px !important;
		color: #FF931E !important;
		padding-top: 1px !important;
		font-weight: bold !important;
	}

	.btn-primary.disabled
	{
		background-color: #C8C8C8  !important;
		border-color: #C8C8C8  !important;
		color: #404040 !important;
	}

	/*only affects the inputs in disabled state*/
	input[disabled="true"]{
		background-color: #C8C8C8  !important;
		border-color: #C8C8C8  !important;
	}

	/*only affects the inputs in disabled state*/
	select[disabled="true"]
	{
		background-color: #C8C8C8  !important;
		border-color: #C8C8C8  !important;
	}

	@media(max-width: 400px)
	{
		#username{
			float: right;
			font-size: 10px;
			margin-right: 5px;
			line-height: 19px;
			margin-left: 0px !important;
		}
	}

	@media(max-width: 320px)
	{
		#btnMP3, #btnRadio, #btnCH1, #btnCH2{
			padding:7px 9px !important;
			font-size:90% !important;
			line-height: 1.2 !important;
		}
	}

	.emapLabel{
		font-family: 'Montserrat', Arial, Helvetica, sans-serif;
		font-weight: 100;
	}

	.btn-toolbar{
		display: inline-block !important;
	}

	.close {
		color: #fff;
		opacity: 0.5;
	}

	/*
	* Hide the lower case, upper case and reset buttons "A++/A+/A" from navbar
	* in viewports with width superior to 767px
	*/
	@media(min-width: 650px) /* min-width: 521px */
	{
		#menuFontSize {display: none;}
	}

	@media(max-width: 374px)
	{
		.funcs-title {
			font-size: 18px !important;
		}
	}


	/* Radios search operations CSS */
	#form-search-box {
		width: 77%; /*94%*/
		float: left;
		position: absolute;
		left: 21%; /*1%*/
		top: 82px;
		margin-right: 5%;
	}

	@media(max-width: 1200px) {
		#form-search-box {
			margin-right: 5%;
			width: 98%;
			left: 1%;
		}
	}

	@media(min-width: 1201px) and (max-width: 1339px)
	{
		#form-search-box {
			margin-right: 5%;
			width: 77%; /*90%*/
			left: 21%; /*6%*/
		}
	}

	@media(min-width: 1500px)
	{
		#form-search-box {
			/*
			margin-right: 5%;
			width: 95%;
			left: 3%;
			*/
			
			margin-right: 5%;
			width: 78%;
			left: 21%;
			
		}
	}

	#input-search {
		background-color: #ffffff; 
		border-radius: 0px; 
		box-shadow: none; 
		border-left: none;
		border-right: none;
		border-top: none;
		outline: none;
		cursor: pointer;
		font-size: 16px;
	}

	#input-search:focus { border-bottom-color: #ccc !important; }
	
	#temp-data {
		font-size: 12px;
	}
	
	
	@media(max-width: 500px) {
		#myCarousel {
			width: 100% !important;
		}
	}
	
	
	#mask-container {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 2000;
		background-color: rgba(0,0,0,0.7);
		color: #ff931e;
		display: none;
	}
		
	#mask-container-message {
		margin-left: auto;
		margin-right: auto;
		padding: 20px;
	}
	
	#mask-container-message p {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		text-align: center;
		margin-top: 15px;
		font-family: 'Montserrat', Arial, Helvetica, sans-serif;
		font-size: 16px;
	}
	
	.loader {
		border: 10px solid #ffffff; /* Light grey */
		border-top: 10px solid #ff931e; /* Blue */
		border-radius: 50%;
		width: 60px;
		height: 60px;
		margin-left: auto;
		margin-right: auto;
		animation: spin 2s linear infinite;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	/* modal meteorology date */
	@media (min-width: 300px) and (max-width: 320px)
	{
		.col-xxs-4{
			padding-right: 15px !important;
			padding-left: 15px;
			width: 100%;
		}
		
		.col-xxs-5 {
			padding-right: 15px !important;
			padding-left: 15px !important;
			margin-top: 5px;
			width: 100%;
		}
		
		.col-xxs-3 {
			padding-right: 15px;
			padding-left: 15px !important;
			margin-top: 5px;
			width: 100% !important;
		}
		
		.col-xs-3 {
			width: 33.33333333%;
		}
	}