/* #jsfiddle-example,
iframe[src*="jsfiddle.net"] {
	display: none;
} */

#main {
	padding-top: 2em;
}

li {
	padding: 0;
	margin: 0;
}

pre {
	white-space: normal;
	margin-bottom: 0;
}

code,
pre code {
	padding: 1em;
	/* margin: -2.5em 0 -1em 0; */
	display: block;
	border-radius: 1em;
}

/* tabla claim */

.header-code {
	max-width: fit-content;
	padding: 0.5em;
	margin: 0 0 2em 0;
	display: block;
	background-color: #2b2b2b;
	border-radius: 0.3em;
}

.hcode0 {
	color: #f8f8f2;
}

.hcode1 {
	color: #f92672;
}

.hcode2 {
	color: #a6e22e;
}

.hcode3 {
	color: #66d9ef;
}

.header-code .hcode2 {
	padding: 0 0.3em 0 0.3em;
}

/* tabla de explicación */

.explanation {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	margin: 2em 0 2em 0;
}

.col-left {
	flex: 1;
	padding: 0.5em;
}

.col-right {
	flex: 1;
	padding: 0.5em;
}

/* tabla de output */

.output-blob img {
	max-width: 128px;
	max-height: 128px;
}

/* tabla de loading urls */

.loading-urls-blob .col-left,
.loading-urls-blob .col-right {
	display: flex;
	justify-content: space-evenly;
	flex-direction: column;
}

.loading-urls-blob .col-left {
	text-align: center;
	text-align: -webkit-center;
}

.loading-urls-blob .col-left code {
	border-radius: 0.3em;
	padding: 0.3em;
	font-size: 0.77em;
	background: #2b2b2b;
    color: #f8f8f2;
    min-height: 3em;
}

.loading-urls-blob .col-right code {
	padding: 0;
	display: inline-block;
	border-radius: 0;
	padding: 0 0.3em;
	line-height: initial;
}
.loading-urls-blob .col-right > pre > code,
.loading-urls-blob .col-left div:nth-child(2) > code {
	border-radius: 0.5em 0.5em 0 0;
}

.loading-urls-blob .greyarea {
	text-align: left;
	text-align: -webkit-left;
	font-size: 0.77em;
	padding: 0.5em;
	display: block;
	background-color: #f5f5f5;
	border-radius: 0 0 0.5em 0.5em;
}

/* comparación de licencias */

.licenses {
	display: flex;
	flex-direction: column;
	width: max-content;
	/* margin-bottom: 5em; */
}

.license-type,
.basic,
.export,
.load,
.Advanced {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid black;
}

.license-type {
	border: none;
}

.row {
	display: flex;
	flex-direction: row;
}

.type-col,
.feature-col,
.demo-col,
.full-col {
	min-width: 10em;
	margin: 0.2em;
	padding: 0.2em 1em;
	background-color: #f5f5f5;
	display: flex;
    justify-content: center;
    align-items: center;
}

.license-type > div > div {
	background-color: #3b5998;
	color: white;
	height: 3em;
}

.license-type > div > div.type-col,
.basic > div:nth-child(1) > div.type-col {
	background-color: white;
}

/* Media Queries */

@media only screen and (max-width: 600px) {
	.explanation {
		flex-direction: column;
		align-items: center;
	}
	.output-blob {
		flex-direction: column-reverse;
	}
	.output-blob img {
		width: 20%;
	}
	.type-col {
		display: none;
	}
	.type-col, .demo-col, .full-col {
		min-width: 5em !important;
		padding: initial;
	}
	.feature-col {
		min-width: 9em !important;
		padding: initial;
	}
}