/* 2020 */

* {font-family: 'Roboto', sans-serif;}
body {margin:2rem; background: #f2f2f2}
h5 {text-transform: uppercase; font-size: 14px;}
hr {border-top: 1px solid #ccc;}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {color: #fff;}


/* gestió administrativa */
.btn {padding: 6px 12px;}
.btn-success {border-radius: 0px; padding: 6px 12px; margin: 0px 0px 20px 0px; border: 1px solid #45b157;}
.btn-warning {border-radius: 0px; padding: 6px 12px; margin: 0px 0px 20px 0px; border: 1px solid #c7a311; color: #6d5a0d;}

/* ################################ LEFT NAVBAR ################################ */

.bg-primary {
	background: #f4f4f4!important;
	-webkit-box-shadow: 9px 0px 25px -13px rgba(173,170,173,1);
	-moz-box-shadow: 9px 0px 25px -13px rgba(173,170,173,1);
	box-shadow: 9px 0px 25px -13px rgba(173,170,173,1);}

.rounded-circle {border-radius: 0px!important; }

.intranet-title {padding-bottom: 20px;}


.separator {margin: 60px 0px;}

/* username right */
.top-nav .username {display: inline-block; float: left;}
.top-nav .nav .caret {display: inline-block; float: right; margin-left: 5px; transform: translateY(-2px);}
.dropdown-menu.extended.logout > li.eborder-top {border-top: 0px!important;}
.dropdown-menu.extended.logout > li:last-child > a {background-color: #fc8181!important;}
.dropdown-menu.extended.logout > li:last-child > a:hover {background-color: #e40000!important;}
/* end username right */




/* hide burger menu */


@media (min-width: 992px) {

	#sideNav {
		text-align: center;
		position: fixed;
		top: 0;
		left: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 17rem;
		height: 100vh;}

	#sideNav .navbar-brand {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: auto auto;
		padding: 0.5rem;}

	#sideNav .navbar-brand .img-profile {max-width: 10rem; max-height: 10rem;}

	#sideNav .navbar-collapse {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		-webkit-box-flex: 0;
		-ms-flex-positive: 0;
		flex-grow: 0;
		width: 100%;
		margin-bottom: auto;}

	#sideNav .navbar-collapse .navbar-nav {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 100%;}


}

/* ################################ MASONRY ################################ */

.menu-container {padding-left: 17rem; padding-top: 20vh; padding-bottom: 20vh;}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
	.card-columns {column-count: 2;}
	.menu-container {padding-top: 8vh; padding-bottom: 2vh;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.card-columns {column-count: 2;}

}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
	.card-columns {column-count: 3;} 
}

/* Extra large devices (large desktops, 1600px and up) */
@media (min-width: 1600px) {  
	.card-columns {column-count: 4;} 
}

/* Extra large devices (large desktops, 1900px and up) */
@media (min-width: 1900px) {  
	.card-columns {column-count: 5;} 
	.container {max-width: 1600px;}
}

@media (max-width: 991px) {
	 .menu-container {padding-left: 0rem;}
}

/* ############################################################### */

/*card*/
.card-title {margin:0px; padding: .75rem 1.25rem;}
.card-body {padding: 0px;}
.btn-menu {
	color: #888888; 
	background: #fff; 
	border-radius: 3px; 
	width: 100%; 
	text-align: left; 
	padding: 0.7rem 1.25rem;
}
.btn-menu:hover {background: #eaeaea;}

.btn.focus, .btn:focus {outline: 0; box-shadow: 0 0 0 0.0rem rgb(173, 162, 84);}


/*modal card*/
.close {font-weight: 300; font-size: 40px;}
.modal-content {
	border: 1px solid rgba(0,0,0,.2);
	border-radius: .2rem;
}

.btn-primary, .btn-info {
	margin: 0px 0px 20px 0px;
	color: #a99e4c;
	background-color: #fff;
	border-color: #a99e4c;
	border-radius: 0px!important;
}

.btn-primary:hover, .btn-info:hover {background-color: #a99e4c; border-color: #a99e4c; color: #fff;}


.badge-primary {background: #a99e4c; font-size: 14px; font-weight: 300;}




/* #################### SCROLLBAR ######################## */
/* https://codepen.io/devstreak/pen/dMYgeO */

.scrollbar {float: left; overflow-y: scroll;}

/**  STYLE 2 */

#style-1::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px #F5F5F5;
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar {
	width: 8px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: #a99e4c;
}



/* end 2020 */



/*general*/
header.header {background: #f2f3f2; padding-right: 55px;}
body {font-family: 'Roboto'!important; }
.btn-primary {border-radius: 3px;}
.form-control {border-bottom: 1px solid #dfe7f1; background: #f7f9fc;}
.card-fcri {margin: 20px;}
#main-content {padding-left: 20px; background: #f2f3f2; min-height: 100vh; max-width: 1200px; margin: auto; margin-left: calc(320px + 0px);}

/*nav nom usuary*/
.nav {padding-right: 0px;}
.top-nav ul.top-menu > li .dropdown-menu.logout {transform: translateX(-100px);}
.log-arrow-up {right:0px;}

/* login.asp */
.login-wrap {
	background: #fff; 
	border-radius: 5px; 
	border: 1px solid #ccc; 
	padding: 19px;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.1);}
.pull-right {text-align: center!important;}

.login-img-mod {display:block; text-align:center; margin-bottom:10px;}
.login-img-mod img {margin-bottom: 20px;}

.login-footer {margin: 30px 0px 56px 0px;}
.login-footer a:hover {text-decoration: underline;}

/* login 2 */
.logado .input-group nav {display: none;}
.logado .input-group  {width: 100%;}
.logado {
	min-height: 400px;
	background: #fff; 
	border-radius: 5px; 
	border: 1px solid #ccc; 
	padding: 40px;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.1);}

.username_lg {color: #afa44c; font-family: 'Roboto', sans-serif; font-weight: 100; font-size: 26px; margin: 40px 0px;}




.navbar-default {background: none;}
.btn-fcri {color: #afa44c; border: 1px solid #afa44c; background: none;}
.btn-fcri:hover {background: #afa44c; color: #fff; color: #fff!important; border: 1px solid #afa44c;}


/*sidebar menu*/
#sidebar {min-width: 320px; padding: 10px 40px; background: #eee;}
ul.sidebar-menu {margin-top: 236px;}
ul.sidebar-menu li a {border-bottom: 0px solid #fff; border-right: 0px solid #fff;}
ul.sidebar-menu li a:hover {background: #fff; border: none; border-radius: 4px;}
ul.sidebar-menu li.active a, ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus, ul.sidebar-menu li a:hover i, ul.sidebar-menu li a:focus i {color: inherit;}
ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus {border-bottom: none;}
ul.sidebar-menu li.active a i {color: inherit;}

ul.sidebar-menu li ul.sub li a:hover, ul.sidebar-menu li ul.sub li.active a {color: #111;}

/*Breadcrumb*/
.breadcrumb {margin: 20px 0px; padding: 8px; border-radius: 4px; box-shadow: 1px 1px 5px rgba(0,0,0,0.1);}
.breadcrumb a {padding: 5px 10px; border-radius: 4px;}
.breadcrumb a:hover {color:#afa44c; background: #f5f5f5;}

/* Title section*/
.panel-default > .panel-heading, .project-team, .panel-title, .progress-panel {background-color: transparent;  padding-left: 0px;}
i.icon-building {font-size: 26px; margin-right: 10px;}
.input-group-addon > i.icon-building {font-size: 26px; margin-right: 0px;}
.panel-title > a {font-weight: 500; font-size: 26px; color: #444;}

/*home*/
.panel {
	background: transparent;
	border: 0px!important;
	min-height: 400px;
}

.panel-group .panel {padding: 0px; background: transparent; border: none; box-shadow: none;}

.panel-a {
	background: transparent;
	border: 0px solid transparent;
	min-height: 400px;
	max-width: 1200px;
	margin: 0px auto 40px auto;
}


/* PENJAR FITXER PLANTILLA */
.alta-fitxer {max-width: 600px; margin: 0 auto; background: #fff; margin-top: 80px; padding: 40px;}
.alta-fitxer input {display: inline-block; width: auto; margin: 0px;}
.alta-fitxer input.form-control {min-width: 80%;}


/* ALTA */
.panel-alta {max-width: 900px; display: block; margin: auto; margin-top: 40px;}

table {width: 100%;}

.form-control {
	height: auto;
	background: transparent;
	color: #888;
	border: 1px solid #a89e4b;
	border-radius: 0px;
}

textarea.form-control {
	height: auto;
	background: transparent;
	color: #888;
	border: 0px;
	border-bottom: 1px solid #a89e4b;
	border-radius: 0px;
}







.btn-fcri-w {
	margin: 10px 0px;
	width: 100%;
	background: #ffffffab; 
	color: #888; 
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	-webkit-box-shadow: 0px 0px 20px -28px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 20px -28px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 20px -28px rgba(0,0,0,0.75);
	border: 0px solid #111;
	padding: 10px; 
	text-align: left;
	padding: 20px;
	border-radius: 5px!important;
}


.btn-fcri-w img {width: 80px; margin-right: 20px;}

.btn-fcri-w:hover, .btn-fcri-w:active, .btn-fcri-w:focus {
	background: #fff; color: #888;
	transform: scale(1.03,1.03);
	-webkit-box-shadow: 0px 0px 40px -28px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 40px -28px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 40px -28px rgba(0,0,0,0.75);}

/* adbase */
.wrapper {padding: 35px;}


/* USER SIDEBAR*/


header{display: none;}


a.logo img {margin: auto; height: 35px; width: auto;}

a.logo img {
	height: 160px;
	width: 160px;
	margin: 40px;
	background: #fff;
	border: 1px solid #eaeaea;
	padding: 30px;
	border-radius: 100%;
}

.user-section {border-top: 1px solid #ccc; margin-top: 20px;}
.left-user {margin-top: 20px;}

a.logout {
	background-color: #fc8181; color: #fff!important; 
	border-radius: 4px; padding: 10px;
	width: 100%; display: block; text-align: center;
}
a.logout:hover {background-color: #e40000!important; color: #fff!important;}


p .menu-arrow  {right: 0; position: absolute;}

#main-content > section > div > div > table > tbody > tr > td > object {
	max-width: 800px; height: 75vh; margin: auto; display: block;
}

/* PHONE */
@media (max-width: 768px){
	header{display: block;}
	header.header {padding-right: 10px;}
	.toggle-nav {float: right;}

	#sidebar {width: 100%; border-bottom: 1px solid #ccc; padding-top: 66px;}
	#sidebar > ul > li {margin: 5px 0px;}
	#sidebar ul > li > a .menu-arrow {right: 0; position: absolute; margin-right: 60px; margin-top: 0px;}

	ul.sidebar-menu {margin-top: 25px; margin-bottom: 25px;}
	a.logo img {
		height: 35px;
		width: auto;
		margin: 0px;
		background: transparent;
		border: none;
		padding: 0px;
		border-radius: 0%;
	}

	.panel-a {margin: 0px; margin-top: 20px;}
	#main-content {padding: 0px 10px;}

	body {width: 99%; height: 99%; margin: auto;}

	.wrapper {padding: 10px;}

	.btn-fcri-w img {margin-right: 10px;}
	.btn-fcri-w {border-radius: 14px!important;}

	/*
	#main-content > section > div.col-lg-12, #main-content > section > div.col-lg-12 > section > div {
		padding: 0px; margin-bottom: 60px;}
	*/
	.separator {margin: 20px 0px 50px 0px;}

	.panel-a {margin-top: 70px;}

	
}

@media (min-width: 780px) and (max-width: 1200px) {
	.btn-fcri-w img {margin-right: 10px;}
	.panel-a {margin: 20px auto 40px auto;}
	.btn-fcri-w {font-size: 13px;}
	.panel-a > div > div {padding-left: 0px;}
	.separator {margin: 60px 0px 40px 0px;}
}

@media (min-width: 580px) and (max-height: 721px) {
	.btn-fcri-w img {margin-right: 10px;}
	.panel-a {margin: 0px auto 40px auto;}
	.btn-fcri-w {font-size: 13px;}
	.panel-a > div > div {padding-left: 0px;}
	.separator {margin: 60px 0px 40px 0px;}
}


/* ############## ANIMATIONS ############### */

.fade-in {
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
		-moz-animation: fadein 1s; /* Firefox < 16 */
		-ms-animation: fadein 1s; /* Internet Explorer */
		 -o-animation: fadein 1s; /* Opera < 12.1 */
			animation: fadein 1s;
}

/* ANIMATIONS */
@keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}