.icon {
	margin: 5px;
}
.lg-icon {
	font-size: 1.5rem;
}
.xl-icon {
	font-size: 2.5rem;
}

.tab-icon {
	display: block !important;
}

.tutorials-container,
.topic-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	text-align: center;
}

.tutorial-link {
	flex: 1;
	height: 100px;
	width: 162px;
	padding: 10px !important;
}

.no-width {
	width: inherit;
}

.no-height {
	height: inherit;
}

.responsive-card {
	flex: 0 32%;
}

.tabbed-labels label {
	text-align: center;
	font-size: 20px;
}

.tabbed-content {
	padding: 0 12px 0 16px;
	border: 2px solid var(--md-default-fg-color--lightest);
	border-top: none;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	background-color: var(--md-code-bg-color);
}

.tabbed-content .tabbed-block code {
	background-color: var(--md-default-bg-color);
}

.tabbed-content .tabbed-block .unstyle-tabbed-code code {
	background-color: inherit;
}

.tabbed-content .tabbed-block .tabbed-content {
	padding: 0;
	border: none;
	border-radius: 0;
}

.do-not-break-line {
	white-space: nowrap;
}

/* intro */

.card {
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
	border: 1px solid var(--md-primary-fg-color);
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 10px;
}

.card-title {
	font-size: 18px;
	vertical-align: middle;
	vertical-align: -webkit-baseline-middle;
}

.card-action-button {
	width: 75%;
	margin-top: 5px;
}

/* Styles for mobile devices */
@media screen and (max-width: 480px) {
	.responsive-card {
		flex: 0 100% !important;
	}
}

/* Styles for tablets in portrait orientation */
@media screen and (min-width: 481px) and (max-width: 768px) {
	.responsive-card {
		flex: 0 100% !important;
	}
}