/*---Estructura general de la ventana INFO---*/

svg .legend text {
	/*color: #FFF;*/
	font-weight: normal !important;
}

svg .legend_subtitle {
	/*color: #FFF;*/
	font-weight: normal !important;
}


svg .legend_title {
	/*color: #FFF;*/
	font-weight: normal !important;
}


.margenVentana {
	/*padding: var(--gap);*/
	overflow-x: hidden;
	z-index: 12;

	& i {
		color: white
	}
}

.ventanaInfo {
	display: flex;
	height: calc(100% - 8px);
	min-width: 330px;
	min-height: 600px;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background: var(--clr-vent);
	backdrop-filter: blur(10px);
	border-top: 1px solid rgba(130, 130, 130, 0.5);

	& .btn-info {
		padding: 6px 0;

		& div:nth-child(1) {
			margin: 0 8px;
		}

		& div:nth-child(2) {}
	}
}

#abrirCerrar {
	width: 36px;
	height: 40px;
	border-radius: 6px 0 0 6px;
	clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
	border: 0;
	position: absolute;
	top: 20px;
	/* right: -18px; */
	z-index: 1;
	background-color: var(--clr-princ-2);
	cursor: pointer;
	transition: right .3s ease, background-color .3s ease;

	&:hover {
		background-color: var(--clr-princ-3);
	}

	& i {
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		position: absolute;
		left: 6px;
    		top: 13px;
	}

	&.cerrada {
		right: -18px;
	}

	&.semiabierta {
		right: calc(var(--anchoColapsado) - 18px);
	}

	&.abierta {
		right: calc(100% - 40px);
	}
}

#expandirColapsar {
	position: absolute;
	top: 26px;
	right: 5px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	z-index: 3;
	display: none;
	background: rgba(33, 43, 53, 0.8);
	cursor: pointer;
	transition: transform 0.3s ease;

	&:hover {
		filter: brightness(1.5);
	}
}

#compartir,
#reporte {
	position: absolute;
	top: 26px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	z-index: 4;
	display: none;
	background: rgba(33, 43, 53, 0.4);
	cursor: pointer;

	&:hover {
		filter: brightness(1.5);
	}
}

#compartir {
	right: 46px;
}

#reporte {
	right: 88px;
}

#solapa {
	position: absolute;
	top: 4px;
	min-width: 350px;
	max-width: calc(100% - 22px);
	transition: width 0.3s ease, right 0.3s ease;
	z-index: 2;
	display: none;

	&.cerrada {
		/*right: calc(-100vw);*/
		width: var(--anchoColapsado) !important;
		right: calc(var(--anchoColapsado)* -1) !important;
	}

	&.semiabierta {
		width: var(--anchoColapsado);
		right: 0 !important;
		/*right: calc((100% - var(--anchoColapsado)) * -1) !important;*/
	}

	&.abierta {
		width: calc(100% - 0px);
		right: 0 !important;
	}
}

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


/*---Elementos internos---*/

#superior {
	grid-area: superior;

	width: calc(100% - 110px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 40px;
	line-height: 40px;
	transition: width 0.3s ease;
	/*background: #ff000011;*/
}

.superior-corto {
	width: calc(var(--anchoColapsado) - 80px) !important;
}

#columnas {
	width: 100%;
	height: 100%;
	padding: var(--gap);
	display: grid;
	/*grid-template-columns: repeat(12, 1fr);*/
	grid-template-rows: calc(var(--superior-alto) + var(--gap)) auto;
	gap: var(--gap);
}

#columnas.colapsado {
	/*-- Calculo de la grilla (cada columna) en base a anchoColapsado, tomando 20px de la fleha cerrar,
			  2 gap del padding y 3 gaps... equivale a *8 gap ... dividio las 4 columnas --*/
	--celda: calc((var(--anchoColapsado) - (7 * var(--gap))) / 4);

	grid-template-columns: 16px repeat(4, 1fr) 16px;
	grid-template-rows: auto repeat(4, 1fr);
	grid-template-areas:
		"superior superior superior superior superior superior"
		"prev c1f1 c1f1 c3f1 c3f1 next"
		"prev c1f1 c1f1 c3f1 c3f1 next"
		"prev c3f2 c3f2 c3f2 c3f2 next"
		"prev c3f2 c3f2 c3f2 c3f2 next";

	& #c3f1>div:nth-child(2) {
		display: none;
	}

	& .centrar_mapa {
	    /*height: auto;*/
	}
}

#columnas.abierto {
	grid-template-columns: 16px repeat(12, 1fr) 16px;
	grid-template-rows: calc(var(--superior-alto) + var(--gap)) repeat(4, 1fr);
	grid-template-areas:
		"superior superior superior superior superior superior superior superior superior superior superior superior superior superior"
		"prev c1f1 c1f1 c1f1 c1f1 c2f1 c2f1 c2f1 c2f1 c3f1 c3f1 c3f1 c3f1 next"
		"prev c1f1 c1f1 c1f1 c1f1 c2f1 c2f1 c2f1 c2f1 c3f1 c3f1 c3f1 c3f1 next"
		"prev c1f2 c1f2 c1f2 c1f2 c2f2 c2f2 c2f2 c2f2 c3f2 c3f2 c3f2 c3f2 next"
		"prev c1f2 c1f2 c1f2 c1f2 c2f2 c2f2 c2f2 c2f2 c3f2 c3f2 c3f2 c3f2 next";

	& {
		/*display: grid;*/
		/* grid-template-columns: subgrid; */
		/* grid-template-columns: 1fr 1fr;
	  gap: var(--gap);*/
	}
}



#columnas.colapsado #c1f2,
#columnas.colapsado #c2f1,
#columnas.colapsado #c2f2 {
	display: none;
}

#c1f1 {
	grid-area: c1f1;
}

#c1f2 {
	grid-area: c1f2;
}

#c2f1 {
	grid-area: c2f1;
}

#c2f2 {
	grid-area: c2f2;
}

#c3f1 {
	grid-area: c3f1;
}

#c3f2 {
	grid-area: c3f2;
}

#prev {
	grid-area: prev;
	transform: scaleX(-1);
}
#next {
	grid-area: next;
}

#prev, #next {
	display: flex;
	padding: 2px;
	font-size: .7rem;
	border-radius: 3px;
	justify-content: center;
	display: none;
	
	&.active {
		display: flex;
		cursor:pointer;
		align-items: center;
		background: #fff1;
		
		& i {
			color: var(--clr-princ-2);
		}
		
		&:hover {
			background: #fff2;
			& i {
				color: var(--clr-princ-4);
			}
		}
	}
}

#pos-slide {
	display:none;
	
	&.active {
		top: 10px;
		left: 50%;
		height: 10px;
		transform: translateX(-50%);
		background: #fff2;
		position: absolute;
		padding: 3px 6px;
		display: flex;
		align-items: center;
		gap: 6px;
		border-radius: 5px;
		overflow: hidden;
		& i {
			color: var(--clr-princ-2);
			font-size: 2rem;
	
			&.active {
				color: white;
			}
			
			&:not(.active):hover {
				color: var(--clr-princ-4);
				cursor: pointer;
			}
		}
	}
}

#cluster_distribucion,
#single_cluster_distribucion,
#shape_distribucion {
	width: 90%;
}

.cluster_especializacion {
	display: block;
	position: relative;
	float: left;
	width: 100%;
	height: 100%;

}

.cmap .stats-info-brief {
	background-color: #0b243c80;
	/*flex: 1;*/
	/*position: absolute;*/
	/*top: 0;*/
	/*width: 150px;*/
    backdrop-filter: blur(7px);
}

.popover-body {

		& .topic {
			/*max-width: 70px;*/
			overflow: hidden;
			text-wrap-mode: nowrap;
			font-weight: 600;
		}

		.section-cluster-extras {
			max-height: 500px;
			transition: max-height 1s ease-out;
			transition-delay: 1.8s;
			overflow: hidden;
		}

		.section-cluster-extras.hiddenx {
			max-height: 0px;
			transition: max-height 3s ease;
			overflow: hidden;
		}

		& .section-cluster .item-info:first-child {

			border-bottom: initial;
			border-radius: 4px;
			padding-block: 6px;
			background: #0000004d;
			
			& .datos {

				position: relative;
				
				& div:nth-child(2) {
					font-size: 1.4rem;
					text-align: right;
					position: absolute;
					right: 0;
					bottom: 3px;
					opacity: .4;
					line-height: 1rem;
				}
			}

			& .value {
				font-size: 1.3rem;
				font-weight: bold;
				color: white;
			}
		}

		& .item-info {

			color: #fff;
			width: 100%;
			padding: 3px 8px;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			border-bottom: 1px solid #fff1;
			line-height: 1rem;
			
			& .label {
				color: #999;
				font-size: .72rem;
            	line-height: .8rem;
			}
			

			& > div:first-child {
				text-align: center;
			}
		}

		& .datos {

			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: flex-end;
			gap: 6px;
			width: 100%;
			color: #bbb;
			position: relative;
			justify-content: space-between;

			& .value {
				font-weight: bold;
			}
		}

		& .datos div:nth-child(1) {
			color: #cbcbcb;
			font-size: 0.8rem;
			margin-bottom: 0px;
			line-height: 1rem;
		}

		& .datos div:nth-child(2) {
			font-size: 1.0rem;
			text-align: right;
			flex: 1;
			position: absolute;
			bottom: 0;
			right: 0;
			opacity: .6;
		}
}

.elemento-info {
	height: 100%;
	background-image: linear-gradient(135deg, rgb(96 115 135 / 11%), rgb(12 18 24 / 27%));
	border-radius: 8px;
	min-height: 150px;
	position: relative;
	animation: fadein 1s forwards;
	border: 1px solid #fff1;

	&:before {
		content: url(https://mapdev.geoecon.info/img/Logos2023/logo.png);
		position: absolute;
		transform-origin: top left;
		transform: scale(0.13);
		top: 8px;
		left: 14px;
		filter: contrast(0.2) brightness(1.7);
		opacity: 0.3;
	}
	
	& .lupa {
		color: white;
		position: absolute;
		top: 5px;
		right: 8px;
		cursor: pointer;
		opacity: 0;
		z-index: 999;
		transition: opacity .2s ease;
		
		&:hover {
			opacity:1 !important;
		}
	}

	&.maximizar {
		grid-row-start: 2 !important;
		grid-row-end: -1 !important;
		grid-column-start: 2 !important;
		grid-column-end: -2 !important;
		z-index: 20;
		background: #02111f;
		animation: fadein2 .2s forwards;

		& .stats-info-brief {
			transform: scale(1.8);
		}
	}
	
	& .icono-info {
	    position: absolute;
	    opacity: 0;
	    transition: opacity 0.2s ease-in-out;
	    bottom: 2px;
	    right: 3px;
	    cursor: pointer;
	    font-size: 1.2rem !important;
	    color: white;
	    z-index: 1000;
	    transition: transform .2s ease , opacity .2s ease;
		
		&:hover {
			opacity:1;
		}
	}
	
	&:hover .lupa,
	&:hover .icono-info {
		opacity: .7;
	}


	& .stats-info-brief {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 0px;
		width: 180px;
		padding: 8px 0;
		border-radius: 8px 0 0 8px;
		position: absolute;
		right: 0;
		top: 15%;
		transform-origin: top right;
		background-image: linear-gradient(180deg, #1f2b3f5c, #2f3b4f94);
		user-select: none;
		transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease;
		cursor:pointer;

		
		

		& .item-info {
			color: #fff;
			width: 100%;
			padding: 3px 10px 3px 6px;
			display: flex;
			gap: 10px;
			align-items: center;
			border-bottom: 1px solid #fff1;

			&:first-child {
				border-top: 1px solid #fff1;
				background: #ffffff14;
				font-weight: bold;
				
				& .datos {
					position: relative;
					min-height: 40px;
					
					& div:nth-child(2) {
						font-size: 1.4rem;
						text-align: right;
						position: absolute;
						right: 0;
						bottom: 3px;
						opacity: .4;
						line-height: 1rem;
					}
				}
			}
			& > div:first-child {
				text-align: center;
			}

			& > div:last-child {
				width:100%;
			}
		}

		& .datos {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: flex-start;
			gap: 3px;
			position: relative;
           		min-height: 27px;
		}

		& .datos div:nth-child(1) {
			color: #cbcbcb;
			font-size: 0.8rem;
			margin-bottom: 0px;
			line-height: 1rem;
		}

		& .datos div:nth-child(2) {
			font-size: 1.0rem;
			text-align: right;
			flex: 1;
			position: absolute;
			bottom: 0;
			right: 0;
			opacity: .6;
		}

		& .icono-40 {
			width:40px;
			height:40px;
		}

		& .icono-30 {
			width:30px;
			height:30px;
		}

		& .icono {
			width:26px;
			height:26px;
		}
	}
	
	& .stats-point-info-brief {
		top: 219px;
	}

	&.info-cluster-table table {
		padding: 6px;
	}

	& .aglomeraciones_y_gemelos {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8px;
		font-size: 0.8rem;
		width: 100%;
		padding: 0 28px;
		position: absolute;
		bottom: 0;
		user-select: none;
		transition: opacity .3s ease, transform .3s ease;

		& .distritos-info {
			display: flex;
    			justify-content: center;
			transform: translateY(30px);
			z-index: 1;
			opacity: 0;
			transition: transform .3s ease, opacity .3s ease;
			pointer-events: none;
			
			& .district {
				cursor: pointer;
				border-width: 1px 1px 3px 1px !important;
				border-radius: 6px !important;
                		padding: 2px !important;
				display: flex;
				justify-content: center;
				flex-direction: row;
				align-items: center;
				font-size: 0.7rem;
			}
			& .district:hover {
				filter:brightness(2.0);			
			}
			& .sector_label {
				display: none;			
			}
		}
		
		& .item-info {
			color: #fff;
			width: 100%;
			overflow: hidden;
			gap: 10px;
			align-items: center;		
		}

		& .graph_button {
			border-radius: 4px;
			padding: 2px 0px !important;
			margin: 0px !important;
			box-shadow: -2px -2px 1px rgba(0, 0, 0, 0.2), 1px 1px 1px rgb(255 255 255 / 20%);
		}

		& img.icono.icono-30 {
			width: 30px;
			margin-inline: 2px;
		}

		& .valor {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			gap: 6px;
			padding-bottom: 1px;
		}

	}

	& .ocu-vs-uni {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		gap: 4px;
		width: 100%;
		/*padding: 0px 0px 4px 0px;*/
		border-radius: 4px;
		user-select: none;
		transition: opacity .3s ease, transform .3s ease;

		& .graph_button {
			color: white;
			text-align: center;
			padding: 2px !important;
			margin-bottom: 5px !important;
			flex: 1;
			border-radius: 4px;
			
			&.selected {
				background: #06121f;
				/*background: linear-gradient(0deg, #ffffff00 0%, #ffffff11 30%) !important;*/
		                color: white;
				font-weight: 900;
		                border-radius: 5px 5px 0 0;
				margin-bottom: 0 !important;
		                box-shadow: inset 0px 1px 2px #ffffff75;
				cursor: inherit;
			}
		}

		& .item-info {
			color: #fff;
			width: 100%;
			gap: 10px;
			align-items: center;
			border-bottom: 1px solid #fff1;			
		}

		& .icono {
			width:28px;
			height:28px;			
		}

		& .ocupados-info {
			padding-block: 0;
    			flex: 1;
		}
	}

	
}

.ocultable {
	&:after {
		content: '\f04b'; /*"▶";*/
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		position: absolute;
		top: 2px;
		left: 4px;
		font-size: 0.3rem;
		transition: transform .4s ease;
		opacity: .2;
	}
	
	&:hover {
		box-shadow: -2px 0 0 #fff5;
		transform: translateX(6px);
		
		&:after {
			opacity: 1;
		}
	}
	
	&.ocultado {
		transform: translateX(calc(100% - 12px));
		
		&:after {
			transform: scaleX(-1);
		}
		&:hover {
		    transform: translateX(calc(100% - 22px));
		}
	}
}

.maximizar .ocultable.ocultado {
	transform: translateX(calc(93% * 1.8)) scale(1.8);
}



/*lupa - solo cuando esta semiabierta*/
/*.semiabierta .maximizar {
	grid-column-end: -9 !important;
}*/

.ventanaInfo table {
	
	& thead {
		position: sticky;
		top: 0;
		background: #081320;
		text-align: center;
	}

	& tbody tr:first-child {
		& td {
			background: hsl(0deg 0% 100% / 20%);
			/*color: #044255 !important;*/
			color: #ffffff !important;
			font-weight: 700;
			height: 3rem;
			padding-top: 8px !important;
			padding-bottom: 8px !important;
			border-radius: 4px !important;
		}
	}

	& tr {
		background: #00000000;

		&:first-child td {}

		&:not(:first-child):nth-child(odd) {
			background: #00000029;
		}
		&:nth-child(even) {
			background: #81808012;
		}
	}

	& tr:not(.nombre_clusters) td:nth-last-child(-n+2) {
	    width: 0;
	}
}


/* Datos en el SVG SPIDER ocultar/mostrar */
.elemento-info svg.spider_radar {
	transform: translateY(-10px);
	
	& g:first-child {
	    transform: translateY(-40px);
		
		& circle:nth-child(3) {
			z-index: 1000;
			opacity: .6;
			stroke: #ffffff;
			stroke-width: 2px;
            		stroke-dasharray: 2;
		}
	}
	
	& text:nth-child(1),
	& text:nth-child(2) {
		transform:translateY(12px;)
	}
	
	& text:not(.centro) {
		font-weight: bold;
		font-size: .9rem;
		/*opacity:.8;*/
	}
	& text.label {
		opacity: 0;
		transition: opacity .3s ease, filter .3s ease;
		fill: white;
		font-weight: normal;
		font-size: .7rem;
		pointer-events: none;
	}
	& .centro {
		filter: drop-shadow(6px 6px 4px #000a);
		
		& .icono {
			opacity: .8;
			filter: invert(0);
		}
		& .sector_letra {
			display: none;
		}
		& .sector_label {
			text-transform: uppercase;
			font-size: 0.8rem;
            		font-weight: normal;
		}
		& .sector_valor {
			font-size: .9rem;
			font-weight: normal;
			opacity: .8;
		}
	}
	
	/* transparentar circulos y lineas */
	& line,
	& circle {
		opacity: .2;
	}
	
	& g.axisLabelSector circle {
		opacity: 1;
		fill-opacity: 0.2;
	}
	
	/* ocultar el circulo exterior */
	& circle:nth-child(5) {
		display:none;
	}
	
	& path {
		opacity: 1;
		stroke-opacity: .8;
		fill-opacity: .2;
		stroke-width: 2;
		cursor: initial;
	}

	& .spider_sector_legend_sobres circle,
	.spider_sector_legend_sobres image,
	.spider_sector_legend_subes circle,
	.spider_sector_legend_subes image {
		transform-origin: 20px 20px;
	}
}

.maximizar svg.spider_radar text.label {
	font-size: .6rem !important;
}

.spider_sector_legend_sobres circle,
spider_sector_legend_subes circle {
	opacity: 1 !important;
}


/* GRAFICO SPIDER hover en todo */
.elemento-info.maximizar:hover svg.spider_radar g.axisLabelSector text.label {
	opacity: 1;
	filter: brightness(0.8);
}

/* Cambio de diámetro del círculo y label al hacer hover sobre la letra (grupo) */

.spider_radar g:hover .axisLabelSector {
   opacity: 0.5;
}

.elemento-info svg.spider_radar g.axisLabelSector:hover {
	opacity: 1;
	& circle {
		/*r: 13;*/
		stroke-width: 4;
        	fill-opacity: 0 !important;
	}
	& text {
		opacity: 1 !important;
		color: white;
	}
}


.spider_radar g:first-child {
	/* desplazar solo la gráfica hacia abajo*/
	/*transform: translateY(20px) scale(.9) translateX(20px);*/
}

/* elemento legend en spider, treemap ... */

.infoClus,
.spider_radar, 
.treemap  {
	& .legend {
	
		& .legend_title {
	        	font-size: 13px !important;
		}
		/*
		& rect:nth-child(2) {
		}
		& rect:nth-child(3) {
		}
		& rect:nth-child(4) {
		}
		*/
		& text {
			font-size: 12px !important;
		}
		/*
		& text:nth-child(5) {
		}
		& text:nth-child(6) {
		}
		& text:nth-child(7) {
		}
		*/
	}
}

.spider_radar .legend .legend_title {
	/*transform: translate(0px, 73px);*/
}

g.spider_sector_legend_subes *,
g.spider_sector_legend_sobres *,
g.treemap_legend * {
    transition: transform .2s cubic-bezier(0.28, -0.02, 0.31, 1.71);
}

g.treemap_legend:hover circle, 
g.treemap_legend:hover .icono,
g.spider_sector_legend_subes:hover circle,
g.spider_sector_legend_subes:hover .icono,
g.spider_sector_legend_sobres:hover circle,
g.spider_sector_legend_sobres:hover .icono {
    transform: scale(1.1);
}

#c1f1,
#c2f1,
#c3f1,
#c1f2, 
#c2f2, 
#c3f2 {
	display: flex;
	justify-content: center;
	/*align-items: center;*/
	position: relative;
	overflow: hidden;

	&:hover .stats-info-briefX {
		opacity: 0;
		transform: translateY(-20px);
		pointer-events: none;
	}

	& #clusterDraw,
	& #shapeDraw {
		opacity: .8;
		transition: opacity .3s ease;
		width: 100%;
        	height: auto;

		& g.legend {
			/*transform: translate(70%, 70%);*/
		}
	}

	&:hover #clusterDraw,
	&:hover #shapeDraw {
		opacity: 1;
	}	
	
}

#c1f2, 
#c2f2 {
	&.fila2expandida {
		display: none;
	}
}

#c3f2 {
	&.fila2expandida {
		grid-row-start: 4;
		grid-row-end: -1;
		grid-column-start: 2;
		grid-column-end: -2;
		z-index: 10;

		& .info_cluster_card {
			animation: fadein .5s ease-out;
		}
	}
}


/* achica solo el gráfico derecho cuando se abre Winfo */
.abierto #c3f1 #shapeDraw svg g:first-child {
	transform: scale(0.8);
    	transform-origin: top;
}

/*tablas clusters sin valor de clusters*/
.ventanaInfo.semiabierta .nombre_clusters,
.ventanaInfo.semiabierta .nombre_valor_med,
.ventanaInfo.semiabierta .nombre_valor_high,
.ventanaInfo.semiabierta .nombre_valor_low,

.ventanaInfo.semiabierta .nombre_valor_Estatal,
.ventanaInfo.semiabierta .nombre_valor_Privado,
.ventanaInfo.semiabierta .nombre_valor_Otros,

.ventanaInfo.semiabierta .nombre_valor_estatal,
.ventanaInfo.semiabierta .nombre_valor_privado,
.ventanaInfo.semiabierta .nombre_valor_otros,

.ventanaInfo.semiabierta .nombre_topic,
.ventanaInfo.semiabierta .nombre_grafico,
.ventanaInfo.semiabierta .nombre_reporte,
.ventanaInfo.semiabierta .nombre_tabla {
	display: none;
}

.ventanaInfo td.valor
 {
	text-align: right !important;
}

.ventanaInfo .colapsado .winfo-cluster-card .stats-info-brief {
	/*position: absolute;
    	bottom: 0px;*/
}

.winfo-shape-card:hover .distritos-info {
	transform: translateY(0px);
	opacity: 1;
	pointer-events: auto;
}



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

#ge_layout_windowinfo {
	padding: 18px;
	box-sizing: border-box;
	color: var(--clr-neutro-9);
	background: #0300143a;
	background-clip: padding-box;
	border: solid 1px #ffffff40;
	border-color: rgba(255, 255, 255, 0.4) rgba(126, 126, 126, 0.4) rgba(0, 0, 0, 0.4);
	border-radius: 10px;
	height: calc(100vh - 100px);
	right: 20px;
	display: flex;
	position: absolute;
	top: 15px;
	z-index: 2;
	min-width: 520px;
	transition: width 1s;
	flex-direction: column;
}


#ge_layout_windowinfo.expanded-mode .winfo-body-col2 .info_cluster_card {
	width: 100%;
}

#ge_layout_windowinfo.expanded-mode .winfo-body-col2 .info_shape_card {
	display: none !important;
}

#ge_layout_windowinfo.expanded-mode .winfo-body-col3 .info_shape_card {
	display: block;
}

.info_cluster_card .winfo-cluster-table {
	width: 100%;
}

/*
#ge_layout_windowinfo_collapse {
  width: 27px;
     left: -20px;
     top: 35px;
}
*/
#ge_layout_windowinfo_collapse {
	width: 30px;
	height: 30px;
	padding: 15px;
	background: #0000009c;
	border-radius: 50%;
	display: flex;
	left: -22px;
	top: 36px;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}


#ge_layout_windowinfo_collapse .fa-info {
	margin-left: 4px;
	display: none;
}

#ge_layout_windowinfo .field_label {
	font-size: 15px;
}

/* .gedi #ge_layout_windowinfo .field_label img {
	filter: invert();
} */

#ge_layout_windowinfo .field {
	font-size: 15px;
}

#ge_layout_windowinfo .stats .badge {
	font-size: 15px;
}

#ge_layout_windowinfo #ei_shape,
#ge_layout_windowinfo #ei_cluster,
#ge_layout_windowinfo #ei_clusterDraw {
	display: none;
}


.collapsed-column-mode {
	width: 0%;
	min-width: auto !important;
	padding: 0px !important;
	border: none !important;
	/*right: 10px !important;*/
}

#ge_layout_windowinfo.collapsed-column-mode {
	right: 10px !important;
}

.expanded-column-mode {
	width: 30%;
}

.expanded-column-mode.collapsed-mode {
	width: 560px;

}

#ge_layout_windowinfo.expanded-column-mode.expanded-mode {
	/*-width: 97.5%;*/
	width: calc(100vw - 40px);
}