/* Block Grid */
div.card_grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin-s);
	justify-content: flex-start;
	margin-bottom:var(--margin-l);
}	


/* Blocks */
.block {
	position:relative;
	display:block;
	border-radius:var(--radius-tight);
	background-color:var(--lighter);
	padding:var(--margin-s) 0px;
	margin-bottom:var(--margin-xs);
	transform:scale(100%);
	overflow:hidden;
	transition:.5s;
	box-shadow:var(--shadow-spread);
}
	
	.block.noshadow {
		box-shadow:none;
	}	
	
	.block:before {
		content:" ";
		text-transform:uppercase;
		color:var(--darker);
		font-size:11px;
		position:absolute;
		top:var(--margin-xs);
		left:var(--margin-xs);
		line-height:0px;
		opacity:70%;
	}
	
	a.block,
	label.block {
		cursor:pointer;
		box-shadow:var(--shadow), var(--shadow-spread);
	}
	
		a.block:hover,
		label.block:hover {
			transform:scale(106%);
			color:var(--darker) !important;
		}
		
		a.block.noscale:hover,
		label.block.noscale:hover {
			transform:scale(100%);
		}
		
		span.card_content {
			position:absolute;
			top:0px;
			left:0px;
			width:100%;
			height:100%;
			z-index:200000;
			border-radius:var(--radius-tight);
		}
		
		label.block.persona.card input[type="radio"] + .card_content {
			border:0px solid transparent;
			background-color:rgb(255,255,255,.25);
		}
		
		label.block.persona.card input[type="radio"]:checked + .card_content {
			border:2px solid var(--orange);
			background-color:transparent;
		}
	
	.block a {
		cursor:pointer;
		color:var(--darker);
	}
	
	.block span.close {
		background-color:rgb(0,0,0,.15);
		font-family:var(--font-logo);
		font-weight:900;
		text-align:center;
		background-color:rgb(0,0,0,.2);
		border-radius:var(--radius-tight);
		position:absolute;
		top:var(--margin-xxs);
		right:var(--margin-xxs);
		height:24px;
		width:24px;
		opacity:.5;
		z-index:3000;
		transition:.5s;
		cursor:pointer;
		}
		
	.block span.close:hover {
		opacity:1;
		color:var(--white);
		}
	
	.block h3 {
		width:100%;
		height:auto;
		display:block;
		position:relative;
		font-size:17px;
		line-height:20px;
		top:0px;
		left:0px;
		margin:0px;
		padding:0px var(--margin-xs);
		margin-bottom:var(--margin-xs);
		font-weight:600;
	}
	
	.block p {
		width:100%;
		height:auto;
		display:block;
		font-size:15px;
		line-height:18px;
		position:relative;
		top:0px;
		left:0px;
		margin:0px;
		padding:0px var(--margin-xs);
	}
	
	/* Block Types - Row */
	.block.row {
		min-height:var(--margin);
		width:100%;
		margin:0px;
		padding:0px;
		background-color:var(--white);
	}
		
		.block.row:before,
		.block.row span.close
		.block.row h3 {
			display:none;
		}
			
		div.block.row h3 {
			font-family:var(--font-body);
			font-size:14px;
			height:var(--margin);
			line-height:var(--margin);
			padding:0px;
			margin:0px;
			text-align:left;
			top:0px;
			left:55px;
			position:absolute;
		}
		
		.block.row span {
			display:block;
			position:relative;
			text-align:left;
			line-height:15px;
			padding:0px;
			margin:8px 0px;
			width:70%;
			left:var(--margin-xs);
			}
		
			div.block.row span.upper_line {
				font-weight:500;
				}
			
			div.block.row span.lower_line {
				font-size:14px;
				}
			
	.block.row img {
		position:absolute;
		height:var(--margin);
		width:var(--margin);
		z-index:1;
	}
	
	div.block.row a {
	}
	
		div.block.row div.poster {
			float:left;
			height:100%;
			width:var(--margin);
			opacity:80%;
		}
			div.poster {
				background-color:var(--purple);
			}
			
			div.poster.transcript {
				background-color:var(--darker);
			}
			
			div.block.row div.poster svg {
				color:var(--white) !important;
				position:relative;
				height:24px;
				width:24px;
				left:10px;
				top:10px;
				}
			
	
		div.block.row a.button {
			position:absolute;
			height:calc(var(--margin) - (var(--margin-xxs) * 2));
			top:var(--margin-xxs);
			right:var(--margin-xxs);
			line-height:calc(var(--margin) - (var(--margin-xxs) * 2));
			font-size:14px;
			font-weight:600;
			color:var(--white);
			outline-color:var(--color-medium) !important;
		}
	
		div.block.row a:not(.button) {
			height:32px;
			width:32px;
			border-radius:var(--radius-round);
			background-color:var(--blue);
			transition:.5s;
		}
		
		div.block.row a:hover:not(.button) {
			background-color:var(--green);
			filter:brightness(140%) saturate(200%);
		}

		div.block.row a svg {
			filter:brightness(500%);
			height:32px;
			width:32px;
			padding:8px;
		}
		
		div.block.row a.delete {
			background:none;
			opacity:.3;
		}
		
		div.block.row a.delete svg {
			filter:brightness(100%);
			height:32px;
			width:32px;
			padding:11px;
		}
			
		div.block.row a.delete:hover svg {
			filter:brightness(500%);
		}
			
		div.block.row a.delete:hover {
			filter:brightness(100%) saturate(100%);
			background:var(--red);
			opacity:1;
		}
			
		a.block.row p {
			width:100%;
			height:auto;
			display:inline-block;
			font-size:15px;
			line-height:17px;
			position:relative;
			top:-14px;
			left:0px;
			margin:0px;
			padding:0px var(--margin-xs);
		}
	
	
	
	
	
	.block.row {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--margin-xxs);
		min-height:var(--margin-xl);
	}
		
	div.block_text {
		font-size:15px;
		line-height:15px;
		flex-grow: 1;
		padding-right:120px;
	}
	
		.block.row div.block_text span {
			display:block;
			padding:0px;
			margin:8px 0px;
			width:100%;
		}
		
			div.block.row div.block_text span:nth-child(1) {
				font-weight:500;
				}
			
			div.block.row div.block_text span:nth-child(2) {
				font-size:14px;
				margin-bottom:0px;
				}

	div.block.row div.block_image {
		line-height:0px;
		flex-grow: 0;
		width:var(--margin-xl);
		background-color:var(--lighter);
	}
	
		div.block.row div.block_image img {
			height:var(--margin-xl);
			width:var(--margin-xl);
		}

	div.block.row div.block_buttons {
		flex-grow: 0;
		width:auto;
		text-align:right;
	}
	
	div.block.row a.button {
		height:calc(var(--margin) - (var(--margin-xxs) * 2));
		top:var(--margin-xxs);
		right:var(--margin-xxs);
		line-height:calc(var(--margin) - (var(--margin-xxs) * 2));
		font-size:14px;
		font-weight:600;
		color:var(--white);
	}











	
	/* Block Types - Card */
	.block.card {
		width:var(--card-width);
		height:var(--card-height);
		background-color:var(--white);
		padding:0px;
	}
	
		.block.card:before,
		.block.square.small:before {
			left:var(--margin-xs);
		}
	
		.block.card h3,
		.block.card p,
		.block.small h3,
		.block.small p {
			font-family:var(--font-body);
			font-size:13px;
			line-height:16px;
			padding:0px var(--margin-xxs);
			text-align:center;
			}
			
		.block.card h3 {
			margin-top:var(--margin-xs);
			margin-bottom:var(--margin-xs);
		}
	
		.block.card img,
		.block.card span.card_image_spacer {
			width:var(--card-width);
			height:var(--card-width);
			top:0px;
			left:0px;
			z-index:5000;
			display:block;
		}
		
		.block.card a.button.cancel {
			outline:none;
			position:absolute;
			width:calc(var(--card-width) - (var(--margin-xs) * 2));
			bottom:var(--margin-xs);
			color:var(--white);
			border:1px solid var(--white);
			opacity:70%;
			box-shadow:none;
			transition:.5s;
		}
			
		.block.card a.button.cancel:hover {
			background-color:var(--orange);
			filter:none;
			opacity:1;
			box-shadow:var(--shadow);
		}
		
		.block.card div.historical {
			position:absolute;
			top:calc(var(--card-width) - (var(--margin-s) / 2));
			left:var(--margin-s);
			width:calc(var(--card-width) - (var(--margin-s) * 2));
			height:var(--margin-s);
			background-color:var(--white);
			border-radius:var(--margin-s);
			color:var(--darkest);
			text-transform:uppercase;
			font-size: 14px;
			line-height:var(--margin-s);
			text-align:center;
		}
			.block.card div.historical span {
				font-size:9px;
				top:-5px;
			}
		
		
		.block.note {
			background-color:var(--lighter);
			box-shadow:none;
		}
		
		.block.help{
			background-color:var(--blue);
			box-shadow:var(--shadow);
			padding-top:var(--margin-m);
			border:1px solid var(--white);
			outline:2px solid var(--help);
		}
		
		.block.help:before {
			content:"Guide";
			color:var(--white);
		}
		
		.block.help h3,
		.block.help p {
			color:var(--white) !important;
		}
		.block.help p {
			margin-bottom:var(--margin-s);
		}
		.block.help p:last-child {
			margin-bottom:0px;
		}
		
	
	/* Block Types - Card - Without Image */
	.block.card.stripes,
	.block.card.coming_soon,
	.block.card.note,
	.block.card.hint {
		display: flex;
		justify-content: center;  /* horizontal center (optional) */
		align-items: center;      /* vertical center */
	}

	/* Block Types - Card - Generating */
	.block.card.stripes,
	.block.row.stripes {
		cursor:auto;
		box-shadow:none;
		background-color:var(--orange);
	}
	
	.generating.row,
	.generated.row {
		margin-bottom:var(--margin-s);
	}
	
		#generating {
			scroll-margin-top: 20vh; /* optional visual buffer for sticky headers */
		}
		
		.block.card.stripes h3,
		.block.row.stripes h3 {
			display:block;
			color:var(--white);
		}
	
	
		/* Block Card - Types - Coming Soon */
		.block.card.coming_soon {
			background-color:transparent;
			box-shadow:none;
			border:1px solid var(--lighter);
			outline:1px solid var(--white);
		}
		
		.block.card.coming_soon h3 {
			color:var(--orange);
			font-family:var(--font-logo);
		}
		
		
		
	
	/* Block Types - Square */
	.block.square {
		width:var(--square-width);
		height:var(--square-height);
	}
	
		.block.square h3 {
			margin-top:calc(var(--margin) * 2);
			color:var(--white);
		}
		
		.block.square.small {
			width:var(--small-square-width);
			height:var(--small-square-width);
		}
		
		.block.square.small h3 {
			margin-top:var(--margin-m);
			text-align:left;
		}
		
		.block.small.square p {
			text-align:left;
		}
		
		
	/* Block Category - Personas */
	.block.persona:before { 
		content:"Persona"; 
		color:var(--white); 
	}
	
	/* Block Category - Atributes */
	.block.attribute {
		background-color:var(--purple);
		width:31%;
	}
	
		.block.attribute h3 {
			padding-top:var(--margin-xxxs);
			font-size:16px;
			padding-bottom:var(--margin-xxxs);
			border-bottom:1px solid var(--purple-light);
		}
	
		.block.attribute:before {
			content:"Attribute";
			color:var(--white);
		}
		
		.block.attribute p,
		.block.attribute h3 {
			color:var(--white);
		}
		
		.block.attribute.secondary {
			background-color:var(--darker);
			width:22%;
		}
		
		.block.attribute.secondary h3 {
			border-bottom:1px solid var(--dark);
			font-family:var(--font-logo);
			font-size:14px;
			text-align:left;
		}
	
	

/* Report Building */
.block.report_step_complete {
	background-color:green !important;
}

	
	/* Block Category - Insights */
	.block.insights {
		background-color:var(--purple);
		height:200px;
		width:200px;
	}
	
		.block.insights:before {
			content:"Insights";
			color:var(--white);
		}
		
		.block.insights h3 {
			margin-top:40px;
			font-size:14px;
			color:var(--white);
		}
		
		.block.insights p {
			color:var(--white);
		}
		
		
		
	.block.message:before { content:"Message"; }
	
	div.block.note:before { content:" "; }
		


/* Block Category - Upgrade */
.block.upgrade:before { 
	content:"Upgrade"; 
}

	.block.upgrade {
		background-color:var(--white);
		border:1px solid var(--blue);
		outline:2px solid var(--white);
		box-shadow:var(--shadow-spread);
	}
	 
	.block.upgrade h3 {
		font:var(--font-body);
		font-weight:600;
		font-size:20px;
		color:var(--blue);
	}
	
	.block.upgrade p {
		color:var(--darkest);
	}
	
	.block.upgrade.best {
		border:1px solid var(--orange);
	}
	.block.upgrade.best h3 {
		color:var(--orange);
	}
	
	.block.upgrade div.upgrade_button {
		width:calc(100% - var(margin-2));
		margin:var(--margin-s);
		border-top:1px solid var(--lighter);
	}
	
		.block.upgrade div.upgrade_button button {
			float:right;
			color:var(--white);
			margin-top:var(--margin-s);
		}
		
		.block.upgrade div.upgrade_button button span {
			font-weight:300;
			opacity:.7;
			margin-left:8px;
			padding-left:8px;
			border-left:1px solid white;
		}
		
		
	.block.upgrade div.upgrade_button p {
		float:left;
		max-width:calc(100% - 250px);
		padding:0px;
		margin:0px;
			margin-top:var(--margin-xs);
	}
		



/* Block flip animation */
.flip-wrapper {
	display:block;
	position:relative;
	perspective: 1000px;
	position: relative;
	flex-shrink: 0; /* prevent cards from shrinking */
}
	.flip-wrapper.card {
		width:var(--card-width);
		height:var(--card-height);
		}
		
	.flip-wrapper.row {
		width:100%;
		height:var(--margin);
		}

.flip-inner {
	width: 100%;
	height: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

.face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}

.front {
	z-index: 2;
}

.back {
	transform: rotateY(180deg);
}

.row .back {
	transform: rotateX(180deg);
	backface-visibility: hidden;
}

.flip-wrapper.generated .flip-inner {
	transform: rotateY(180deg);
}

.flip-wrapper.generated.row .flip-inner {
	transform: rotateX(180deg);
}