.container-graphs-file {
    width:100%;
}

.page-content {
    position:relative;
}

.container-graphs-size {
	container-name:container-graph;
	container-type:inline-size;
	width:100%;
}

@container container-graph (max-width: 750px) {
	.container-graphs-file {
		overflow:hidden;
	}

	.container-graphs-file:before {
		width:100px;
		height:100%;
		content:"";
		display:block;
		position:absolute;
		right:0;
		top:0;
		pointer-events:none;
		background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.8) 100%);
		z-index:2;
	}
}


.head-graph-file,
.panel-item.level-1 {
	min-width: 750px;
}

.container-graphs-file {
	overflow-x:auto	
}


.head-graph-file {
	border-bottom:1px solid;
	margin-bottom:14px;
	padding-bottom:14px;
	display:flex;
	flex-wrap:nowrap;
	color:var(--wp--preset--color--dark-grey);
	font-weight:700;
	font-size:13px;
	line-height:16px;
	align-items:center;
	/* border:1px solid red; */
	width:100%;
	box-sizing:border-box;
	/* min-height: 80px; */
	padding-top: 30px;
}

.col-partida {
	width:35%;
	padding:0 0 0 60px;
	box-sizing:border-box;
}

.col-quantitat {
	width: 35%;
	padding:0 10px;
	box-sizing:border-box;
}

.col-evolucio {
	width: 12.5%;
	padding: 0px;
	box-sizing:border-box;
}

.col-percentage {
	width: 17.5%;
	/* border:1px solid; */
	padding:0 10px;
	box-sizing:border-box;
}

.pie {
	--w: 30px;
	width: var(--w);
	min-width: var(--w);
	aspect-ratio: 1;
	display: inline-grid;
	place-content: center;
	margin: 0 10px 2px 0px;
	font-size: 25px;
	font-weight: bold;
	font-family: inherit;
	background-color:#BCDEDC;
	border-radius:50px;
	line-height:1;
	position:relative;
}
.pie:before{
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: conic-gradient(#00B7AC calc(var(--p)*1%),#0000 0);
}
.head-panel-evolucio {
	display:flex;
	flex-wrap:nowrap
}

.arrow-percentage {
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 15px 9px;
border-color: transparent transparent #000 transparent;
	margin-left:3px;
}
.arrow-up, .no-arrow{
    color:var(--wp--preset--color--power-blue)
}

.arrow-down{
	color:#FF1F00;
}

.no-arrow .arrow-percentage {
	display: none;;
}

.arrow-up .arrow-percentage{
	border-color:transparent transparent var(--wp--preset--color--power-blue) transparent;
    color:var(--wp--preset--color--power-blue)
}

.arrow-down .arrow-percentage{
	border-color:transparent transparent #FF1F00 transparent;
	transform:rotate(180deg);
}

.panel-item {
    margin-bottom: 20px;
}

.panel-item.level-2 .panel-item {
    margin-bottom: 5px;
}
.head-panel-title {
	display:flex;
	flex-wrap:nowrap;
	align-items: center;
}

[data-children=""] .panel-icon{
	display:none;
}

[data-children="1"] .panel-icon{
	display:flex;
	width:20px;
	min-width:20px;
	height:20px;
	background-color:#00B7AC;
	border-radius:4px;
	margin-right:20px;
	margin-top:-2px;
	position:relative;
	align-items:center;
	justify-content:center;
	
}

.panel-icon:after, .panel-icon:before {
	width:2px;
	height:8px;
	background-color:var(--wp--preset--color--white);
	content:"";
	position:absolute;
	transition:all ease .4s;
}

.panel-icon:before {
	transform:rotate(90deg)
}

[data-children="1"].active .panel-icon:after {
	transform:rotate(90deg);
	transition:all ease .4s;
}
.panel-item.level-2 .panel-item:last-child,
.panel-item.level-2 .panel-item:last-child,
.panel-item:last-child {
    margin-bottom:0;
}

.panel-item.level-1 > .body-nested-levels {
	padding:28px 25px;
	margin-bottom:20px;
    background-color: rgba(255, 255, 255, .09);
}

.panel-item.level-2 .body-nested-levels {
	padding:15px;
    background-color: var(--wp--preset--color--white);
}

.panel-item.level-3 .body-nested-levels {
    padding-bottom:0;
}

[data-children="1"].head-level {
	cursor:pointer;
}

.body-nested-levels {
	display:none;
}

.body-nested-levels.active {
	display:block;
}

.head-level {
	background-color:rgba(99, 169, 164, 0.09);
	display:flex;
	padding:18px 10px;
	list-style:none;
	margin:0 0 0 0;
	align-items: center;
}

.panel-item.level-3 .head-level {
    background-color: rgba(178, 227, 224, 0.16);
}

.head-level li {
	padding:0 10px;
	font-size:15px;
	font-weight:800;
	font-family:inherit;
}

.head-total-title {
	display:flex;
	flex-wrap:wrap;
	white-space:nowrap;
}

/*.head-panel-habitant {
	padding-right:5px;
}*/

.head-level li.head-panel-title {
	width:35%;
	font-size:14px;
	font-weight:500;
}
.head-level li.head-panel-total{
	width:35%;
	display: flex;
	/*flex-wrap: wrap;*/
	align-items:center
}

[data-evolucio=""][data-percentagem=""].head-level .head-panel-total {
	width:60%;
	justify-content:space-between;
}
[data-evolucio=""][data-percentagem=""].head-level .head-total-title {
	width:35%
}

[data-evolucio=""][data-percentagem=""].head-level .head-panel-bar {
	width:65%;
	max-width:65%
}

.head-level li.head-panel-total span{
	font-weight:500;
}
.head-level li.head-panel-evolucio{
	width:12.5%
}
.head-level li.head-panel-percentagem{
	width:12.5%;
	display:flex;
	align-items:center;
}

head-level li.head-panel-url {
	width:5%;
	min-width:50px;
}

.head-level .head-panel-bar {
	width:100%;
	max-width:100px;
	background-color:var(--wp--preset--color--white);
	display:flex;
	justify-content:flex-start;
	padding:0;
	height:20px;
	margin-left:10px;
	align-items:center
}


.despeses-content-container {
	display:flex;
	flex-wrap:wrap;
}

.despeses-content {
	width:66%;
	border-right:1px solid var(--wp--preset--color--light-gray);
}

.despeses-content {
	display:flex;
	flex-wrap:wrap;
	padding-right:20px;
	align-items:flex-end
}

.despeses-text {
	width:50%;
	padding-right:20px;
}

.despeses-text h3 {
	font-size:24px;
	line-height:1.25;
	margin-bottom:26px;
	margin-top:0;
}

.despeses-text p {
	margin:0;
}

.despeses-img {
	width:50%;
}

.despeses-img img {
	max-width:100%;
	height:auto;
	margin:0 auto;
	display:block;
	width:100%;
}

.despeses-filter {
	width:34%;
	padding:20px;
}

.despeses-filter h4 {
	font-size:18px;
	font-weight:400;
	margin: 0px 0px 20px 0px
}

.depeses-grafics-container {
	padding:20px 30px;
	background-color: var(--wp--preset--color--light-green);
	border-radius:20px;
	margin-top: 40px
}

.container-grafics {
	width:100%;
	position: relative;
}


/*.container-grafics.container-block-graph{
	height:auto!Important;
}

.depeses-grafics-container .container-graphs-size.graph-block-item{
}*/

@media (max-width:781px) {
	.order-mobile-first {order:-1;}
}