/* Mobile stylesheet for CSU Math homepage */

@media (max-width: 1024px) {
	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	#content-container,
	#content,
	#nr-content,
	.news-group,
	.nr {
		max-width: 100% !important;
		overflow-x: hidden;
	}

	#content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	body,
	input,
	button,
	select,
	textarea {
		font-size: 13px;
	}

	#main-header,
	#main-footer,
	#header-full,
	#footer-copyright,
	.home #content-container {
		min-width: 0 !important;
	}

	#main-header {
		height: 60px;
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	}

	#header-full,
	#header,
	#nav-container,
	#content,
	#footer-copyright-content {
		width: auto !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
		margin: 0 !important;
	}

	#header {
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		position: relative;
	}

	#logo {
		margin: 0;
		float: none;
		display: inline-flex;
		align-items: center;
		max-width: none;
		min-width: 0;
		flex: 1 1 auto;
	}

	#logo img {
		width: 220px;
		max-width: 100%;
		height: auto;
	}

	.open-menu,
	.close-menu {
		display: inline-flex !important;
		width: 42px;
		height: 42px;
		border-radius: 8px;
		align-items: center;
		justify-content: center;
		position: relative;
		text-decoration: none;
		flex-direction: column;
		gap: 4px;
		border: 1px solid #b8c7d8;
		background: #f8fafc;
		box-shadow: none;
		transition: background-color 0.2s ease, border-color 0.2s ease;
	}

	.open-menu {
		order: 2;
		background: #f8fafc;
		margin-left: auto;
		flex: 0 0 42px;
		z-index: 2101;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.open-menu:hover {
		background: #f2f6fb;
		border-color: #a8b9cc;
	}

	.open-menu:active {
		background: #eaf1f8;
	}

	#main-header .open-menu {
		display: inline-flex !important;
	}

	.close-menu {
		position: absolute;
		right: 12px;
		top: 12px;
		z-index: 3;
		background: rgba(255, 255, 255, 0.12);
		border-color: rgba(225, 236, 248, 0.4);
	}

	#header-full.small #header {
		height: 60px;
		display: flex;
		align-items: center;
	}

	#header-full.small #logo {
		margin: 0;
	}

	#header-full.small #logo img {
		position: static !important;
		left: auto !important;
		top: auto !important;
		width: 220px !important;
		height: auto !important;
	}

	.open-menu .icon-bar,
	.close-menu .icon-bar {
		width: 18px;
		height: 2px;
		background: #2f4964;
		display: block;
		border-radius: 999px;
		transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease, background-color 0.2s ease;
	}

	.open-menu .icon-bar:nth-child(2) {
		width: 14px;
	}

	body.menu-open .open-menu {
		background: #264a6e;
		border-color: #1d3c59;
		box-shadow: none;
	}

	body.menu-open .open-menu .icon-bar {
		background: #ffffff;
	}

	body.menu-open .open-menu .icon-bar:nth-child(1) {
		transform: translateY(5px) rotate(45deg);
	}

	body.menu-open .open-menu .icon-bar:nth-child(2) {
		opacity: 0;
	}

	body.menu-open .open-menu .icon-bar:nth-child(3) {
		width: 18px;
		transform: translateY(-5px) rotate(-45deg);
	}

	#nav {
		background: transparent;
		height: 0;
	}

	#nav-main {
		position: fixed;
		top: 0;
		right: 0;
		width: min(86vw, 360px);
		height: 100vh;
		height: 100dvh;
		background: linear-gradient(180deg, #12548b 0%, #0c3f6a 100%);
		z-index: 3000;
		overflow-y: auto;
		box-sizing: border-box;
		padding: 64px 0 24px;
		transform: translateX(100%);
		transition: transform 0.25s ease;
		will-change: transform;
		float: none;
	}

	#nav-main.active {
		transform: translateX(0);
	}

	body.menu-open {
		overflow: hidden;
	}

	#nav::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.35);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
		will-change: opacity;
		z-index: 2500;
	}

	body.menu-open #nav::before {
		opacity: 1;
		pointer-events: auto;
	}

	#nav-main,
	#nav-main li,
	#nav-main li a {
		float: none !important;
		width: 100%;
		height: auto;
	}

	#nav-main > li {
		position: relative;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	}

	#nav-main > li > a {
		display: block;
		box-sizing: border-box;
		padding: 14px 48px 14px 16px;
		color: #fff;
		font-size: 14px;
		line-height: 1.4;
		text-transform: none;
	}

	#nav-main > li > a:hover {
		background: rgba(255, 255, 255, 0.1);
	}

	#nav ul ul,
	#nav ul ul ul {
		position: static !important;
		left: auto;
		top: auto;
		display: none;
		width: 100%;
		background: rgba(255, 255, 255, 0.06);
		padding: 6px 0;
		box-shadow: none;
	}

	#nav-main ul,
	#nav-main ul li {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#nav-main ul li {
		display: block !important;
		float: none !important;
		width: 100% !important;
		clear: both;
	}

	#nav-main li.submenu-open > ul {
		display: block;
	}

	#nav #nav-main li:hover ul li a,
	#nav #nav-main li:hover ul li a:link,
	#nav #nav-main li:hover ul li a:visited {
		display: block;
		float: none !important;
		width: 100%;
		font-size: 13px;
		color: #d8e9ff;
		padding: 10px 16px 10px 30px;
		line-height: 1.45;
		text-align: left;
		white-space: normal;
		box-sizing: border-box;
	}

	.submenu-toggle {
		position: absolute;
		right: 8px;
		top: 9px;
		width: 32px;
		height: 32px;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.submenu-toggle::before,
	.submenu-toggle::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 10px;
		height: 2px;
		background: #e4f0ff;
		transform: translate(-50%, -50%);
		transition: transform 0.2s ease;
	}

	.submenu-toggle::after {
		transform: translate(-50%, -50%) rotate(90deg);
	}

	#nav-main li.submenu-open > .submenu-toggle::after {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	#img_bar_list {
		padding-top: 60px;
	}

	.swiper-slide img {
		height: 36vh !important;
		min-height: 180px;
		max-height: 300px;
		object-fit: cover;
	}

	#content-container {
		padding-top: 16px !important;
	}

	body:not(.home) #content-container {
		padding-top: 76px !important;
	}

	body:not(.home) #breadcrumbs {
		margin-top: 10px !important;
	}

	#main-content,
	#nr-content,
	.home #main-content,
	#sidebar,
	#news-slider,
	#news-list,
	.college-news-slider-wrap {
		width: 100% !important;
		float: none !important;
		max-width: 100% !important;
	}
.nr {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    font-size: 14px;
}
.nrTitle {
    font-size: 14px;
    color: #1f5781;
    font-weight: bold;
    text-align: center;
    
}
.nrContent{
   font-size: 12pt;
    background: #fff;
    padding: 6px;
    border-radius: 12px;
}
	#vsb_content_4 .v_news_content,
	#vsb_content_4 .v_news_content p,
	#vsb_content_4 .v_news_content div,
	#vsb_content_4 .v_news_content span,
	#vsb_content_4 .vsbcontent_start,
	#vsb_content_4 .vsbcontent_end,
	.nrContent,
	.nrContent p,
	.nrContent div,
	.nrContent span {
		font-size: 12pt !important;
	}
	#news-slider,
	#news-list {
		display: block !important;
		flex: none !important;
		clear: both !important;
	}

	#news-list {
		margin-top: 14px;
	}

	/* News list beautification for mobile pages */
	.news-group {
		background: transparent;
	}

	.lblist {
		margin-top: 8px;
		padding: 10px;
		border-radius: 16px;
		border: 1px solid #dfe8f1;
		background: linear-gradient(180deg, #f8fbff 0%, #f2f7fc 100%);
		box-shadow: 0 8px 24px rgba(18, 58, 97, 0.08);
	}

	.lblist > br {
		display: none;
	}

	.lblist .news-sidebar {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.lblist .news-sidebar > li {
		margin: 0 0 10px;
		padding: 12px 12px 10px;
		border-radius: 12px;
		border: 1px solid #e3ebf4;
		border-left: 1px solid #e3ebf4;
		background: #ffffff;
		box-shadow: 0 3px 12px rgba(10, 35, 68, 0.06);
	}

	.lblist .news-sidebar > li:last-child {
		margin-bottom: 0;
	}

	.lblist .news-sidebar h4 {
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.lblist .news-sidebar h4 a {
		display: block;
		font-size: 14px;
		line-height: 1.55;
		font-weight: 600;
		color: #1c2f43;
		text-decoration: none;
		word-break: break-word;
	}

	.lblist .news-sidebar h4 a:hover {
		color: #1c5f95;
	}

	.lblist .news-sidebar .fr {
		float: none !important;
		margin-right: 0 !important;
		display: inline-flex;
		align-self: flex-start;
		padding: 0;
		border-radius: 0;
		background: transparent;
		color: #365a7e;
		font-size: 11px;
		line-height: 1.45;
	}

	.lblist > div[align="center"] {
		margin-top: 12px;
		padding: 10px;
		border-radius: 12px;
		background: #f8fbff;
		border: 1px solid #dce8f5;
	}

	.lblist > div[align="center"] table {
		width: 100% !important;
	}

	.lblist > div[align="center"] td {
		display: block;
		width: 100% !important;
		padding: 4px 0;
		text-align: left !important;
		white-space: normal !important;
	}

	.lblist > div[align="center"] td > div {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
	}

	.lblist > div[align="center"] a,
	.lblist > div[align="center"] .PrevDisabled,
	.lblist > div[align="center"] .NextDisabled,
	.lblist > div[align="center"] .this-page {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		height: 28px !important;
		padding: 0 10px !important;
		border-radius: 8px;
		font-size: 12px !important;
		line-height: 1 !important;
	}

	.lblist > div[align="center"] .defaultButtonStyle,
	.lblist > div[align="center"] .defaultinputStyle,
	.lblist > div[align="center"] .defaultInputStyle {
		height: 28px !important;
		border-radius: 8px;
		font-size: 12px !important;
	}

	.lblist > div[align="center"] .defaultinputStyle,
	.lblist > div[align="center"] .defaultInputStyle {
		width: 42px;
		text-align: center;
	}

	#sidebar {
		display: none !important;
	}

	#main-content {
		padding-bottom: 24px;
	}

	.sidebar-homepage .widget-container,
	#main-content .sidebar-homepage .widget-container {
		margin-bottom: 18px !important;
		padding: 16px !important;
		border-radius: 10px;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	}

	.widget-title,
	#main-content .widget-title {
		font-size: 17px !important;
		margin-bottom: 12px !important;
		padding-bottom: 10px !important;
	}

	#news-slider {
		margin-bottom: 14px;
	}

	#news-slider .banner-z,
	#news-slider .slick-list {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		overflow: hidden;
	}

	#news-slider .slick-track {
		max-width: none !important;
	}

	#news-slider .slick-slide .img,
	#news-slider .slick-slide img {
		display: block;
		max-width: 100% !important;
		width: auto;
		height: auto !important;
	}

	.college-news-grid,
	.college-notice-grid {
		grid-template-columns: 1fr !important;
		gap: 10px;
	}

	.college-news-item,
	.college-notice-item {
		padding: 12px !important;
	}

	.college-news-item h4,
	.college-notice-item h4 {
		font-size: 14px;
		line-height: 1.45;
	}

	.date-news,
	.college-notice-item .date-news {
		font-size: 12px;
		margin-top: 8px;
	}

	.academic-info-item {
		min-width: 0;
		width: 100%;
		margin-bottom: 12px;
		padding: 12px !important;
	}

	.academic-info-container .event-date-widget {
		width: 54px;
		height: 64px !important;
		margin-right: 12px;
	}

	.sidebar-homepage .event-date-widget strong,
	#sidebar .event-date-widget strong {
		font-size: 24px;
		padding-top: 6px;
	}

	.academic-info-container .event-content-widget {
		width: calc(100% - 66px) !important;
	}

	.academic-info-container .event-content-widget h5 {
		font-size: 14px;
		line-height: 1.45;
	}

	.academic-info-container .academic-meta-item {
		align-items: center;
	}

	.academic-info-container .academic-meta-item span {
		font-size: 11px;
		line-height: 1.45;
	}

	.slick-prev,
	.slick-next {
		z-index: 2;
	}

	#main-footer,
	#footer-copyright {
		height: auto;
	}

	#footer-copyright-content {
		height: auto !important;
	}

	#footer-copyright {
		padding: 18px 0;
	}

	.footer-info-wrapper {
		flex-direction: column !important;
		gap: 14px !important;
	}

	.friend-links-section,
	.footer-logo-section {
		margin: 0 !important;
		width: 100%;
	}

	.footer-logo-section {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		margin-left: 0 !important;
		text-align: center;
	}

	#logo-footer {
		width: auto;
		height: auto;
		margin: 0 0 8px 0;
		float: none;
		display: inline-flex;
		justify-content: center;
	}

	#logo-footer img {
		width: auto;
		height: 64px;
		max-width: 100%;
	}

	.footer-address,
	.footer-address p,
	.text-address {
		text-align: center !important;
	}

	.footer-address {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#nav-footer {
		margin: 10px 0 0 0 !important;
	}

	#nav-footer li {
		height: auto !important;
	}

	#nav-footer > li {
		padding-left: 14px !important;
	}

	#nav-footer > li::before {
		color: #ffffff !important;
	}

	#nav-footer a,
	.footer-address p,
	.text-address {
		font-size: 12px !important;
		line-height: 1.55;
		margin: 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	#nav-main,
	#nav::before,
	.open-menu,
	.close-menu,
	.open-menu .icon-bar,
	.close-menu .icon-bar {
		transition: none !important;
	}
}

@media (max-width: 480px) {
	#header,
	#nav-container,
	#content,
	#footer-copyright-content {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	#logo img {
		width: 188px;
	}

	#nav-main {
		width: 90vw;
	}

	#nav-main > li > a {
		font-size: 13px;
	}

	#nav #nav-main li:hover ul li a,
	#nav #nav-main li:hover ul li a:link,
	#nav #nav-main li:hover ul li a:visited {
		font-size: 12px;
	}

	.widget-title,
	#main-content .widget-title {
		font-size: 16px !important;
	}

	.college-news-item h4,
	.college-notice-item h4,
	.academic-info-container .event-content-widget h5 {
		font-size: 13px;
	}

	.lblist {
		padding: 8px;
		border-radius: 12px;
	}

	.lblist .news-sidebar > li {
		padding: 10px;
		border-radius: 10px;
	}

	.lblist .news-sidebar h4 a {
		font-size: 13px;
		line-height: 1.5;
	}

	.lblist .news-sidebar .fr {
		font-size: 10px;
	}

	.lblist > div[align="center"] {
		padding: 8px;
	}

	.lblist > div[align="center"] td > div {
		gap: 5px;
	}

	.academic-info-container .event-date-widget {
		width: 48px;
		height: 58px !important;
		margin-right: 10px;
	}

	.sidebar-homepage .event-date-widget strong,
	#sidebar .event-date-widget strong {
		font-size: 20px;
	}

	.academic-info-container .event-content-widget {
		width: calc(100% - 58px) !important;
	}

	#logo-footer img {
		height: 58px;
	}
}