/* ====== HERO SECTION ====== */
	.occgov-hero__bg {
		background-color: rgba(17, 46, 81, 0.15);
		background-blend-mode: multiply;
		position: relative;
	}

	.occgov-hero__bg::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: radial-gradient(circle, rgba(27, 27, 27, 0) 0%, rgba(27, 27, 27, 0.3) 100%);
		pointer-events: none;
	}

	.occgov-hero__grid-container {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100%;
	}

	
		.intro {
          font-size: 23px;
            font-family: 'Merriweather Web';
               line-height: 38.4px;
         font-weight: normal;
        color: #5C5C5C;
       }	

	.show-block-tablet {
		display: none;
	}

	.usa-hero.occgov-hero__intro,
	.usa-hero.occgov-hero__section {
		min-height: 269.953px;
	}

	details,
	main {
		background-color: #fafafc;
	}

	
	/* ====== STAT BOXES ====== */
	.stat-box {
		padding: 24px;
		border-radius: 8px;
		text-align: center;
		color: white;
		min-height: 198px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #112E51;
		--tile-delay: 0s;
	}

	.grid-col-12:nth-child(1) .stat-box {
		--tile-delay: 0s;
	}

	.grid-col-12:nth-child(2) .stat-box {
		--tile-delay: 0.4s;
	}

	.grid-col-12:nth-child(3) .stat-box {
		--tile-delay: 0.8s;
	}

	.grid-col-12:nth-child(4) .stat-box {
		--tile-delay: 1.2s;
	}

	.stat-number {
		font-weight: 800;
		font-size: 64px;
		line-height: 52px;
		margin-bottom: 1.5rem;
		font-family: 'Merriweather Web', 'Merriweather', serif;
	}

	.stat-label {
		font-weight: 500;
		font-size: 18px;
		line-height: 26px;
		font-family: 'Merriweather Web', 'Merriweather', serif;
	}

	.stat-accent {
		height: 4px;
		background-color: #FFBE2E;
		margin-top: 16px;
		margin-left: 50%;
		margin-right: 50%;
		transition: all 0s;
	}

	.stat-number .char,
	.stat-label .char {
		display: inline-block;
		opacity: 0;
		transform: translateY(20px);
	}

	@keyframes expandBar {
		from {
			margin-left: 50%;
			margin-right: 50%;
		}
		to {
			margin-left: 32px;
			margin-right: 32px;
		}
	}

	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.stat-accent.animate {
		animation: expandBar 1.5s ease-out forwards;
		animation-delay: var(--tile-delay, 0s);
	}

	.stat-number.animate .char {
		animation: slideUp 1.2s ease-out forwards;
		animation-delay: calc(var(--tile-delay, 0s) + 0.14s + var(--char-delay, 0s));
	}

	.stat-label.animate .char {
		animation: slideUp 1.5s ease-out forwards;
		animation-delay: calc(var(--tile-delay, 0s) + 0.34s + var(--char-delay, 0s));
	}

	/* ====== DATA TABLES ====== */
	label {
		margin-right: 0.1rem;
	}

	div.dt-buttons {
		margin-bottom: 1rem;
		float: right;
	}

	.ap {
		padding: 0 24px;
		border: 1px solid #ADADAD;
		border-radius: 4px;
	}

	div.dataTables_wrapper {
		margin-bottom: 0;
	}

	.mmr-border {
		border: 1px solid #b2b2b2;
		padding: 1rem;
		border-radius: 8px;
	}

	option:disabled {
		background-color: #f5f5f5;
		color: #9ca3af;
	}

	button.dt-button,
	div.dt-button,
	a.dt-button,
	input.dt-button {
		background-color: #0071BC !important;
		color: white !important;
		border: none !important;
		padding: 10px 24px !important;
		font-weight: 600 !important;
		border-radius: 4px !important;
		cursor: pointer;
		font-size: 0.95rem !important;
		display: inline-block !important;
	}

	button.dt-button:hover,
	div.dt-button:hover,
	a.dt-button:hover,
	input.dt-button:hover {
		background-color: #005fa3 !important;
	}

	/* ====== CARD COMPONENT ====== */
	.apps-card {
		border: 1px solid #E6E6E6;
		border-radius: 4px;
		padding: 16px;
		margin-bottom: 16px;
		background: white;
		display: flex;
		gap: 16px;
		text-decoration: none;
		color: #205493;
		transition: all 0.2s ease;
		position: relative;
	}
      
       .apps-card:hover h3 {
		color: #112e51;
		text-decoration: underline;
	}

	.apps-card-overlay-link {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		text-decoration: none;
	}

	.apps-card:hover {
		border: 1px solid #adadad;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	.apps-card-icon {
		width: 40px;
		height: 40px;
		background-color: #20549333;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		transition: all 0.2s ease;
		pointer-events: none;
	}

	.apps-card:hover .apps-card-icon {
		background-color: #112E51;
	}

	.apps-card-icon img {
		width: 20px;
		transition: all 0.2s ease;
		position: relative;
		z-index: 2;
	}

	.apps-card:hover .apps-card-icon img {
		filter: brightness(0) invert(1);
	}

	.apps-card-content {
		display: flex;
		flex-direction: column;
		flex: 1;
		position: relative;
		z-index: 2;
		pointer-events: none;		
	}

	.apps-card h3 {
		margin: 0 0 8px 0;
		font-size: 1.125rem;
		font-weight: 400;
		font-family: 'Merriweather Web';
		transition: all 0.2s ease;
		}

	.apps-card:hover h3 {
		text-decoration: underline;
	}

	.apps-card p {
		margin: 0;
		font-size: 16px;
		line-height: 21px;
		color: #5C5C5C;
	}
#chartSummary {
		width: 100%;
		height: 500px;
	}

@media (max-width: 1365px) {
    .grid-row.margin-top-3.margin-bottom-4.gap-2 .desktop\:grid-col-3 {
        flex: 0 1 auto;
        width: 50%;
    }
}

@media (max-width: 650px) {
    .grid-row.margin-top-3.margin-bottom-4.gap-2 .desktop\:grid-col-3 {
        flex: 0 1 auto;
        width: 100%;
    }
}

/* Equal height cards in Additional Resources section */
.occgov-section__card-group .grid-col-12 {
    display: flex;
}

.apps-card {
    flex: 1;
}

.gold-accent-box {
    border-left: 2px solid #FFBE2E;
    padding-left: 16px;
    margin-left: 36px;
}

@media (min-width: 64em) {
    .grid-row.grid-gap>* {
        padding-left: 12px;
        padding-right: 12px;
    }
}

.usa-button--outline:hover {
    background-color: #205493;
    color: #fff;
}

@media (max-width: 1023px) {
    .gold-accent-box {
        margin-left: 0px;
    }
}