body{
	padding-top:50px;
	height: 100%;
}

html{
	height: 100%;
}

.navbar-brand{
	padding: .5em .1em 0;
	display:table;
}

.navbar-brand > span{
	color: white;
	font-size: 1.2em;
}


.navbar .nav > li > a{
  	color: #fff;
}

/*nav.navbar.navbar-default.navbar-static-top,*/
nav.navbar.navbar-default{
	border-color: #50449D;
	background-color:  #50449D;
	color: white;
}



.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
	/* background-color:  #50449D !important; */
	color: white;
}

.menu-opt {
	background-color: transparent !important;
}

.navbar-default .navbar-nav li a {
	background-color: transparent;
}

/* .dropdown-menu > .active > a{   */
.dropdown-menu .active li a {
  background-color: #50449D !important;
}


.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>li>a:active {
	background-color: #2c71b9 !important;
	color: white!important;
}

.navbar-default .navbar-toggle{
	background-color: white;
	border-color: #eee;
}
.navbar-default .navbar-toggle .icon-bar{
	background-color: #50449D;
}

.navbar-default .navbar-toggle:hover{
	background-color: #ddd;
	border-color: #ddd;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
	background-color: #50449D;
	color:white;
	text-decoration: underline;
}

li:not(.active) > a.menu-opt{
	opacity:.7;
}

/*Per disminuir els titols del menu de navegació.*/
a.menu-opt{
    	max-width: 195px;
   	overflow: hidden;
    	display: inline-block;
    	text-overflow: ellipsis;
    	white-space: nowrap;
	cursor: pointer;
}

legend{margin-bottom: 0px;font-size: .9em;}

div.collapse.navbar-collapse > ul > li.active.zone{/*margin-left: 3.1em;*/
	margin-left: 0;
}

/* quan el menu ha colapsad */
div.navbar-collapse.collapse.in > ul > li.active.zone{margin-left: 0;}

/** HOME **/
/*Custom css for Home periodes scroll*/
.scrollbar::-webkit-scrollbar{
	width: 8px;
	background-color: #F1F1F1;
	border-radius: 4px;
 	border: 2px solid #fff;
}

.scrollbar::-webkit-scrollbar-thumb {
	background-color: #cdcdcd;
	border-radius: 3px;
}

ul.nav.nav-pills.nav-stacked li:not(.active) a{
	cursor: pointer;
}

ul.nav.nav-pills.nav-stacked li.active a{
	cursor: text;
}


/** COLLAPSABLE SIDEBAR **/
#row-main {
	overflow-x: hidden; /* necessary to hide collapsed sidebar */
}

#content {
	-webkit-transition: width 0.3s ease;
  	-moz-transition: width 0.3s ease;
	-o-transition: width 0.3s ease;
    	transition: width 0.3s ease;
}

#content .btn-group {
	margin-bottom: 10px;
}

#sidebar {
	border-right: 5px solid #ddd;
   	-webkit-transition: margin 0.3s ease;
   	-moz-transition: margin 0.3s ease;
	-o-transition: margin 0.3s ease;
  	transition: margin 0.3s ease;
}

.collapsed-sidebar {
 	display: none; /* hide it for small displays */
}

/*Per a fixar a la dreta i q no es mogui amb el contingut del drawChart.blade*/
#sidebar {
	position: fixed;
    overflow-y: auto;
  	height: calc(100vh - 72px); /* el q mesura el menu horitzontal */
   
}

.btn-apply:hover {
	box-shadow: 0px 1px 4px rgba(92, 88, 73, 0.5);
	font-weight: bold;
}

.btn-apply {
	border: 2px solid #741882 !important;
	color: #741882 !important;
	background-color: #741882;
	width: 100%;
	color: white!important;
}

.extra {
	font-style: italic;
	padding-left: 5px;
	font-size: 11px;
}

/*** PANELS: LOGIN, REGISTER... ***/
.panel-default{
	border-color: #50449D;
}

.login-card {
	/* position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400px;  */
	box-shadow: 0px 1px 4px rgba(92, 88, 73, 0.4);
	border: 0!important;
	height: auto;
	margin-top: 30px;
  }

.panel-default>.panel-heading{
  	color: #fff;
	background-color: #50449D;
	border-color: #50449D;
}

.panel-avg{
        border-color: #6c2288;
    	margin-bottom: 1em;
        box-shadow: 1px 1px 1px rgba(22, 53, 80, 0.2)
}

.panel-avg>.panel-body{	
    	padding: 5px 10px;
}

.panel-avg>.panel-heading{
  	background-color: #6c2288;
    border-color: #6c2288;
	padding: 5px;
    text-align: center;
}

.panel-avg>.panel-heading label{
    	font-size: 10px;
    	font-weight: bold;
        overflow: hidden;
    	display: inline-block;
    	text-overflow: ellipsis;
    	white-space: nowrap;
        margin:0;
        vertical-align: middle;
        color:white;
        /*text-shadow: 1px 1px 0px rgba(0,0,0,.3);*/
}

.panel-avg span{
	font-size: 9px;
}

.avg-number{
    	color: #6f6f6f;
}

.panel-avg .avg-number{
    	color: #444;
}

.col-12 {
	flex: 0 0 100%;
	max-width: 100%;
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}

/** HOME **/
ul.menu-home{
	height: calc((100vh/3) - 73px); 
	overflow-y: auto;
}

/** En pantalles de <= 991px Quan el menu es plega un a sobre el altres (bootstrap, deixem que l'alçada es calculi sola) **/
@media (max-width: 992px) { 
	ul.menu-home{
		height: auto; 
	}
}

/* Les pantalles amb una resolució inferior a 1000px veuran les opcions de menú amb ample màxim més petit*/
@media (max-width: 999px) { 
	a.menu-opt{
    		max-width: 100px;
	}
}

@media (min-width: 992px) {
	.total-height {
		height: calc(100vh - 235px)!important;
		min-width: 100%;
	}
}

/* Les pantalles amb una resolució inferior a 992px el menú es farà el doble d'alt, per tant, cal incrementar el padding top del body per a que no tapi el contingut*/
/*@media (max-width: 991px) { 
	body{padding-top:120px;}
	
}*/

@media (max-width: 767px) { 
	#sidebar {
		position:relative;
	}
	
}


/*** FILTERS OPTIONS ***/
.filter-panel{
	font-size: .85em;
}

div.form-group.category.category{
	background-color: white;
	padding: 5px 10px;
	font-size: 1.1em;
	margin: 0 -30px 15px -30px;
    color: black;
	text-align: center;
	text-decoration: underline;
    /* text-shadow: 1px 1px 0px rgba(0,0,0,.3); */
}

div.form-group.category.first{
	margin: -15px -30px 15px -30px;
}

.filter-div span{
	/* font-weight: bold; */
	cursor: pointer;
    
}

.filter-div span:hover{
	color:#50449D;
}

.option-div{
	padding: .1em 1.1em;
}
.option-div:hover,
.option-div.active:hover {
	background-color: #ddd;
	border-radius: 3px; 
}

.option-div.active{
	background-color: #d9edf7;;
	border-radius: 3px;
	border: 1px solid #fff;
}

.option-div label, .option-div input[type="checkbox"] {
	cursor: pointer;
}


/** CHARTS **/
.chart-title{
	overflow: hidden;
    	max-width: 75%;
    	text-overflow: ellipsis;
    	white-space: nowrap;
	margin: 0;
}

#chart1{height:277px;}

#chart2{height:244px;}

#chart3, #chart5 {height: 260px;}

#chart4{height: 230px;}

#fVsVariable {   
    margin-bottom: 3px;
}

div#bases1, div#bases2{
    text-align: center;
}

span.no-data{line-height: 200px;}

/*** IMPORT CSV PAGE ***/
form#import-data{
	border-right: 1px dotted #ccc
}
.modal-header{
 	color: #fff;
	background-color: #50449D;
	border-bottom: 0;
}
.alert-small{
    padding-top: 4px;
    padding-bottom: 4px;
}
/*** EXPORT CHART  TO CSV ***/
.btn-export{
	box-shadow: 0px 0px 1px rgba(0,0,0,.1);
}

/* improves */
.skin-purple-dark {
	background: linear-gradient(to right, #741882 0%, #2c71b9 100%)!important;
	border-color: transparent !important;
}
.bg-gris {
	background: #777;
	padding: 15px 0;
	color: #fff;
  }
  
.bg-gris a {
color: #fff;
opacity: 0.8;
}

.bg-gris a:hover {
color: #fff;
opacity: 0.8;
}

.footer {
box-shadow: 0px 1px 20px rgba(92, 88, 73, 0.4);
/* position: absolute;
bottom: 0; */
width: 100%;
}

.container-footer {
font-size: 15px;
}

@media screen and (max-width: 992px){
	.footer {
		text-align: center!important;
	}
}

body footer {
border-top: none!important;
}

@media screen and (min-width: 768px) {
	.d-md-inline-block, .logo-d-md-inline-block {
		display: inline-block!important;
	}
	.text-md-right {
		text-align: right!important;
	}
	.mb-md-0 {
		margin-bottom: 0!important;
	}
	.text-md-center {
		text-align: center!important;
	}
	.text-md-left {
		text-align: left!important;
	}
	.d-md-none {
		display: none;
	}
	.d-md-block {
		display: block;
	}
}

@media screen and (max-width: 576px) {
	.margin-150 {
		margin-left: 0px!important;
	}
}

@media (min-width: 768px) and (max-width: 992px) {
	.total-height {
	  height: calc(100vh - 221px)!important;
	  min-width: 100%;
	}
  }

  @media (max-width: 768px) {
	.total-height {
	  height: calc(100vh - 273px)!important;
	  min-width: 100%;
	}
  }
  
.logos {
background-color: #eeeeee;
padding: 15px;
}

.margin-150 {
margin-left: 200px;
}

@media screen and (max-width: 768px) {
	.margin-150 {
		margin-left: 0px!important;
	}
	/* .footer-mb-1 {
		margin-bottom: .25rem!important;
	}
	.footer-mb-3 {
		margin-bottom: 1rem!important;
	} */
	
	.d-md-inline-block {
		display: none!important;
	}
	.text-md-right {
		text-align: center!important;
	}
	.text-md-center {
		text-align: center!important;
	}
	.text-md-left {
		text-align: center!important;
	}
	.d-md-none {
		display: block!important;
	}
	.d-md-block {
		display: none;
	}
}

@media screen and (min-width: 768px) and (max-width: 992px) {
	.margin-150 {
	margin-left: 100px!important;
	}
	.d-md-inline-block {
		display: none!important;
	}
	.text-md-right {
		text-align: center!important;
	}
	.text-md-center {
		text-align: center!important;
	}
	.text-md-left {
		text-align: center!important;
	}
}

.developed {
	margin-right: 55px;
	margin-bottom: -5px;
	color: white;
  }

.text-white {
	color: white;
}

.vl {
	border-left: 1px solid white;
	height: 90px;
  }

.mb-0 {
	margin-bottom: 0!important;
}

.mb-1 {
	margin-bottom: .25rem!important;
}

.mb-3 {
	margin-bottom: 1rem!important;
}

.text-center {
	text-align: center!important;
}

.py-3 {
	padding-top: 1rem!important;
	padding-bottom: 1rem!important;
}

.justify-content-center {
	-ms-flex-pack: center !important;
	justify-content: center !important;
}

.container-image {
	background-image: url('../img/slide_4.jpg');
	object-fit: cover;
	width: 100%;
}

.navbar-default .navbar-nav li a {
	background-color: transparent!important;
}