/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
@media (max-width: 577px) {
	:root {
		--product-row-height: 4.5rem;
		--product-row-width: 7vw;
		--product-column-offset: 1.5vw;
		--navlink: calc(1em * var(--eighthstep));
	}

	.custom-hero {
		height: 12vh; /* Even shorter for mobile screens */
	}
	.custom-hero h2 {
		padding: 0;
		margin: 0;
	}
	.tabs-div-ul {
		margin: 0 18px;
	}
	.flex-list {
		position: relative;
		overflow: hidden;
		padding: 0 0;
		font-size: 0.85em;
	}
	.flex-list-tab {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: start;
		margin-left: 0;
		list-style: none;
		padding: 0;
		margin-bottom: 2vw;
		margin-left: 0.5rem;
	}
	.flex-list-tab li {
		flex-grow: 1;
		flex-basis: auto;
		text-align: start;
		border-right: 0px solid #ccc;
		border-left: 0px solid #ccc;
		background-color: #fff;
		margin: 4px 8px;
	}
	.product-title {
		margin-left: 0;
		margin-bottom: 0;
	}
	.product-content h1 {
		font-size: 22px;
	}
	.flex-list-tab li:first-child {
		border-right: 0px solid #ccc;
		border-left: 0;
	}
	.flex-list-tab li:last-child {
		border-left: 0px solid #ccc;
		border-right: 0;
	}
	.product-content {
		margin: 16px 6%;
	}
	.tabs-content {
		margin-top: 0;
	}
	h3 {
		font-size: 1.2em;
	}
	h2 {
		font-size: 1.35em;
	}
	h1 {
		font-size: 1.7em;
	}
	.product-content h2 {
		font-size: 1.4em;
	}
	.col200 {
		width: 100px;
		min-width: 100px;
	}
	.toc {
		background-color: #f4f4f6;
		width: auto;
	}
	.page2a-tiles {
		max-width: 85vw;
		min-width: 85vw;
	}
	.news-container {
		text-align: center;
		padding: 0 1vw;
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-moz-column-count: 1; /* Firefox */
		column-count: 1;
		-webkit-column-gap: 0.2rem; /* Chrome, Safari, Opera */
		-moz-column-gap: 0.2rem; /* Firefox */
		column-gap: 0.2rem;
	}
	.news-item {
		width: calc(95% / 1);
		margin-bottom: 8px;

		padding: 3px 0;
		text-wrap: balance;
		page-break-inside: avoid;
	}
	.page2a-tiles-container {
		min-height: fit-content;
	}
	.main-content {
		padding: 0 1rem;
		margin: 2vw 0;
	}
	.phase-table-product-col {
		/* width: 20%;
		max-width: 180px; */
		padding-left: 6px;
		padding-right: 6px;
	}
	.phase-table-phases-col {
		width: 2%;
		max-width: 25px;
		padding-left: 6px;
		padding-right: 6px;
	}
	.left-toc {
		border-left: 1px solid #dee2e6;
	}
	.product-inner-content {
		max-width: 100vw;
		margin-left: 1rem !important;
		margin-right: 0 !important;
	}
	.page2a-panel-inner {
		width: 100%;
		margin: 0;
		margin-bottom: 1.2rem;
	}
	.product-table-phase-label {
		font-size: 0.85rem;
	}
	.product-table-header {
		width: 100%;
	}
	.product-table-body {
		width: 100%;
	}
	.product-table-cell {
		width: 45%;
	}
	.product-table-phases-container {
		left: -45%;
	}
	.product-table-subject {
		--product-row-height: 3.25rem;
		--product-row-width: 6.25vw;
		--product-column-offset: 0vw;
	}
	.tiles-layout {
		border: 1px solid #5d5d5d;
		border-left: 6px solid #6f358a;
		padding: 1.5vw;
		margin: 0.5rem;
		background-color: #f3f3f3;
		width: 229px;
		height: 154px;
		/* flex: 1 1 0 !important; */
	}
	.link-button-dark {
		border: 1px solid #333334;
		padding: 2px 12px;
		width: 90px;
		border-radius: 36px;
		margin-bottom: 0.2rem;
	}

	.page2a-subpanellink-left .fa {
		width: 12px;
		font-size: 8px;
		text-align: center;
		text-decoration: none;
		margin-right: -14px;
	}
	.page2a-subpanellink-left {
		font-size: 10px;
	}
	div:has(> .tiles-layout){
		justify-items: center;
	}
	.sublink.two-columns{
		columns: 1;
		-webkit-columns: 1;
		-moz-columns: 1;
	}
	.right-border{
		border-right: none;
		margin-right: 0;
	}
	.nav-link{
		padding: 0.25rem 0;
		margin: 0;
		font-size: var(--navlink);
	}
	.navbar{
		padding: 0 var(--lg);
	}	
	.navbar-nav {		
		padding-bottom: var(--lg);
	}
	.nav-item.dropdown{
		padding-top: var(--xs);
		padding-bottom:var(--xs);
	}
	.sublink{
		padding-left:0;
	}
	.nav-mega .dropdown-menu.mega-menu>li {
		padding: var(--sm) var(--md);
	}
	.sublink li{
		margin: var(--sm);
	}
	.footer-bottom-right {
		text-align: center;		
	}
}