/* targeted classes
-----------------------------------------------------*/
.headfont {font-family: var(--mainheadfont);}

/* base layout
-----------------------------------------------------*/
body {
	background-color: var(--background);
	font-family: var(--bodyfont);
}
body::before {
	content: '';
	width: 210px;
	position: fixed;
	height: 100vh;
	background-color: var(--sidenavback);
}
a {color: var(--primary);}
input[type=radio],
input[type=checkbox],
label {cursor: pointer;}
.style-link {
	text-decoration: none;
    background-image: linear-gradient(var(--secondary), var(--secondary));
    background-image: linear-gradient(rgba(108, 202, 251, 1), rgba(108, 202, 251, 1));
    background-size: 100% 2px;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: all .25s;
    color: var(--primary);
}
.style-link:hover {
	background-size: 100% 100%;
	background-image: linear-gradient(rgba(108, 202, 251, .5), rgba(108, 202, 251, .5));
}
.h2,
.h1,
h2,
h1 {
	font-family: var(--mainheadfont);
}
.plan-card h5,
.plan-card h3{
	font-family: var(--bodyfont);
}
h2,
h1 {
	color: var(--primary) !important;
}
p small {color: var(--textlight);}

/* button
-----------------------------------------------------*/
.btn-container {
	display: inline-block;
}
.btn.btn-arrow {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
	.btn.btn-arrow::after {
		font-family: var(--iconfont);
		content:var(--iconarrow);
	}

/* navigation
-----------------------------------------------------*/
nav.navbar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	z-index: 10;
}
	div.nav-logo {
		height:50px;
		padding-left: 10px;
	}
		div.nav-logo a {
			position: relative;
			display: block;
			width: 100%;
			height: 100%;
		}
			div.nav-logo a img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: contain;
				object-position: left;
			}
			img.logo-light {display: none;}
	ul.nav-list {
		list-style: none;
		padding:0 20px 0 0;
		margin: 0;
		display: flex;
	}
		nav ul.nav-list li.nav-item {
			position: relative;
		}
		nav ul.nav-list li.nav-item::before {
			background-color: var(--topnavhoverback);
			content: '';
			position: absolute;
			top: -5%;
			left: -5%;
			width: 110%;
			height: 110%;
			box-shadow: var(--box-shadow);
			border-radius: var(--bs-border-radius-sm);
			opacity: 0;
			transition: all .25s;
			z-index: -1;
		}
		nav ul.nav-list li.nav-item:hover::before {
			opacity: 1;
		}
			ul.nav-list a {
				display: black;
				position: relative;
				text-decoration: none;
				transition: all .25s;
			}
			ul.nav-list a.nav-item-link {
				padding-left: 1.5rem;				
			}
			ul.nav-list a.nav-item-link::before {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				font-family: var(--iconfont);
			}
			ul.nav-list a.nav-item-sub-link {
				white-space: nowrap;
			}
		ul.nav-list li.nav-messages {}
			ul.nav-list li.nav-messages span.badge {
				padding-left: 10px;
				padding-right: 10px;
				margin-left: 10px;
			}
			ul.dropdown-menu span.badge {
				display: flex;
				align-items: center;
				justify-content: center;
			}
	nav ul.nav-list {
		flex-direction: row;
		grid-column-gap: .5rem;
	}
		nav ul.dropdown-menu {
			padding: 1rem;
			display: flex;
			flex-direction: column;
			grid-row-gap: .5rem;
			transform: scale(1,0);
			transform-origin: top center;
			transition: all .25s;
		}
		nav li:hover ul.dropdown-menu {
			transform: scale(1,1);
		}
			nav ul.dropdown-menu li {
				display: flex;
				flex-direction: row;
				grid-column-gap: .5rem;
			}
aside {
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	overflow: auto;
	width: 210px;
}
	aside ul.nav-list {
		flex-direction: column;
		grid-row-gap: .5rem;
		padding: 0;
		width: calc(100% - 5px) ;
	}
		aside ul li {
			position: relative;
			padding: 0 20px;
		}
		aside ul li.side-nav-item::before {
			content: '';
			position: absolute;
			top: 50%;
			right: 0;
			border: 15px solid var(--background);
			border-top-color: transparent;
			border-left-color: transparent;
			border-bottom-color: transparent;
			opacity: 0;
			transform: translateY(-50%);
			z-index: 100;
		}
		aside ul li.side-nav-item.active::before {
			opacity: 1;
		}
			aside ul.nav-list a {
				color: var(--sidenavlinks);
				position: relative;
				z-index: 1;
				display: block;
			}
				aside ul.nav-list li::after {
					content: '';
					width: 0;
					height: 100%;
					position: absolute;
					top:0;
					left: 0;
					background-color: var(--sidenavlinkhoverback);
					transition: all .25s;
					z-index: 0;
				}
				aside ul.nav-list li:hover::after {
					width: 100%;
				}
			aside ul.nav-list a:hover {
				color: var(--sidenavback);
			}
				.nav-address a.nav-item-link::before {content:var(--iconhome);}
				.nav-shop a.nav-item-link::before {content:var(--iconcart);}
				.nav-renew a.nav-item-link::before {content:var(--iconrenew);}
				.nav-usage a.nav-item-link::before {content:var(--iconusage);}
				.nav-refer a.nav-item-link::before {content:var(--iconrefer);}
				.nav-alerts a.nav-item-link::before {content:var(--iconalerts);}
				.nav-outage a.nav-item-link::before {content:var(--iconoutage);}
				.nav-billing a.nav-item-link::before {content:var(--iconbilling);}
				.nav-messages a.nav-item-link::before {content:var(--iconmessages);}
				.nav-contact a.nav-item-link::before {content:var(--iconcontact);}
				.nav-faqs a.nav-item-link::before {content:var(--iconfaq);}
				.nav-logout a.nav-item-link::before {content:var(--iconlogout);}
			
/* body
-----------------------------------------------------*/
main {}
	.message {}
		.message-unread h4 {
			color: var(--primary);
		}
		.message-read h4 {
			color: var(--textlight);
		}
		.message-read p {
			color: var(--textlight);
		}
	.grid-card {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas: 'planBrand planTitle planTitle planTitle planAction'
		'planBrand planInfoContainer planInfoContainer planInfoContainer planInfoContainer'
		;
	}
		.planInfoContainer {
			grid-area: planInfoContainer;
			display: flex;
			flex-direction: row;
			grid-column-gap: 1rem;
			justify-content: space-between;
		}
		.planBrand {grid-area: planBrand;}
		.planTitle {grid-area: planTitle;}
		.planStatus {grid-area: planStatus;}
		.planTerm {grid-area: planTerm;}
		.planOrder {grid-area: planOrder;}
		.planEnd {grid-area: planEnd;}
		.planPrice {grid-area: planPrice;}
			.planPrice em {
				font-style: normal;
				color: var(--textlight);
				font-size:var(--fontsm);
				align-self: flex-end;
			}
		.planAction {grid-area: planAction;}
		.planBrand {
			position: relative;
		}
			.plan-expired h5 {
				color: var(--alert);
			}
			.planBrand img {
				position: absolute;
				top: 0;
				left: 0;
				object-fit: contain;
				width: 90%;
				height: 90%;
			}
			.plan-element small {
				color: var(--textlight);
			}
			.plan-element span {
				display: flex;
				flex-direction: row;
			}
		.planTitle {grid-area: planTitle;}
		.planBill {grid-area: planBill;}
		.planCall {grid-area: planCall;}
		.planRatings {grid-area: planRatings;}

	.grid-card h1, .grid-card h2, .grid-card h3, .grid-card h4, .grid-card h5, .grid-card h6 {
		padding: 0;
		margin: 0;
	}
	.routing-section h5 {
		color: var(--primary);
	}
		.routing-section .card span.material-symbols-outlined {
			position: absolute;
			bottom: 0;
			right: 0;
			z-index: 1;
			color: var(--secondary);
			font-size: var(--iconfontsizelarge);
			opacity: .25;
		}
		.routing-section .card-body {
			position: relative;
			z-index: 10;
		}
	.card .table {
		border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
		overflow: hidden;
		margin-bottom: 0;
	}
		.card .table thead {
			background-color: var(--tableheadback);
			color: var(--tableheadtext);
			overflow: hidden;
		}
			.card .table thead th {
				font-weight: 300;
				font-size: var(--fontsm);
			}
			.card .table tbody tr:last-of-type td {border-bottom: none}
	.address-information a {
		display:flex;
		flex-direction: row;
		grid-column-gap: .5rem;
		align-items: center;
	}
		.address-information span.material-symbols-outlined {
			font-size: 90%;
			color: var(--primary);
		}
	.details-container {
		display: flex;
		flex-direction: row;
		grid-column-gap: .5rem;
		list-style: none;
		padding: 0;
		margin: 0;
	}
/* recommended plan
-----------------------------------------------------*/
.plan-card.featured-card {
}
	.plan-card.featured-card .plan-brand-container {}
		.plan-card.featured-card .plan-brand-container .planRatings,
		.plan-card.featured-card .plan-brand-container .planBrand {
			width: 100%;
			padding-top: 50%;
			position: relative;
		}
			.plan-card.featured-card .plan-brand-container .planBrand img {
				width: 100%;
			}
		.plan-card.featured-card .plan-brand-container .planRatings {
		}
			.plan-card.featured-card .planRatings .planAward .company-award,
			.plan-card.featured-card .planRatings .planAward {
				position: absolute;
				width: 100%;
				height: 100%;
				top:0;
				left: 0;
			}
					.plan-card.featured-card .planRatings .planAward .company-rating,
					.plan-card.featured-card .plan-brand-container .planRatings img {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translateX(-50%) translateY(-50%);
					}
					.plan-card.featured-card .plan-brand-container .planRatings img {
						height: 90%;
						width: 90%;						
					}
			.plan-card.featured-card .planRatings .planAward .company-rating {
				width: 100%;
				border-radius: var(--bs-border-radius);
				position: relative;
			}
			.plan-card.featured-card .planRatings .planAward .company-rating.hasAward {
				background-color: var(--starscontainerback);
				box-shadow: var(--box-shadow);
			}
				.plan-card.featured-card .planRatings .stars-container {
					width: 100%;
					display: grid;
					grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   				}
   				.plan-info-container span.btn-unfold-plandetails {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					grid-column-gap: 5px;
					text-indent: 0;
					color: var(--primary);
					background-color: var(--secondarypale);
					border-color:var(--secondarypale);
					border-width: 2px;
   				}
   				.plan-info-container span.btn-unfold-plandetails:hover {background-color: transparent;}
	.plan-card.featured-card .plan-action-price {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.plan-card.featured-card .plan-info-element {}
	.plan-card.featured-card .plan-action-container {
		display: flex;
		flex-direction: column;
		grid-row-gap: .5rem;
	}
		.plan-card.featured-card .plan-action-element {
			justify-content: center;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
			.plan-card.featured-card .plan-action-element .price-content {
				display: flex;
				flex-direction: row;
			}
				.plan-card.featured-card .plan-info-element small,
				.plan-card.featured-card .plan-action-element small {
					color: var(--textlight);
					display: flex;
					flex-direction: row;
					align-items: center;
				}
				.plan-card.featured-card .plan-action-element h5 {
					font-size: var(--fontlg);
					color: var(--secondary);
					line-height: 100%;
					padding: 0;
					margin: 0;
					display: flex;
					flex-direction: row;
					align-items: flex-start;
				}
					.plan-card.featured-card .plan-action-element h5 sup {
						margin: 0;
						top: 0;
						line-height: 100%;
					}
				.plan-card.featured-card .plan-action-element em {
					font-size: var(--fontsm);
					color: var(--textlight);
				}
		.plan-card.featured-card .plan-action-container .planAction a.btn {
			font-size: var(--fontmdlg);
		}
		.plan-card.featured-card .plan-action-container .planCall a {
			color: var(--button);
			text-decoration: none;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			font-size: var(--fontmdlg);
			grid-column-gap: .25rem;
		}
	.accordion-item h4 {
		margin-bottom: 0;
	}
	.act-msg-unread {}
		.act-msg-unread h4 {
			--bs-heading-color: var(--primary);
		}
	.act-msg-read {}
		.act-msg-read h4 {
			--bs-heading-color: var(--textlight);
		}
		.act-msg-read .accordion-button:not(.collapsed) h4 {
			--bs-heading-color: var(--primary);

		}
@media (min-width:768px){
	aside {
		padding: 80px 0 0 0;
	}
	main {
		padding: 80px 20px 20px 260px;
		padding-left: 210px;
		padding-right: 20px;
	}
	.nav-logo {
		width: 240px;
	}
	img.logo-light {display: block;}
	img.logo-dark {display: none;}
	th span {display: none;}
	.featured-card .plan-brand-container {
		display: flex;
		flex-direction: column;
	}
	.featured-card .plan-info-container {
		display: flex;
		flex-direction: column;
	}
	.featured-card .plan-action-container {
	}
}
@media (min-width:992px){
	th span {display: inline;}
}
@media (min-width:1200px){
}
@media (min-width:1400px){
}

/* Log In 
-----------------------------------------------------*/
.bg-light-blue{
	background-color: var(--background);
}
.log-in-page {
	background-color: var(--topnavhoverback);
}
	body.log-in-page::before {
		display: none;
	}
		.log-in-page header{
			box-shadow:0 0 .5rem rgba(9, 27, 80, .125);
		}
		.log-in-page .bg-image {
			background-size: cover;
			border-radius: 5px;
		}
		.log-in-page .small-note{
			color: var(--light-gray-500);
			font-size: 14px;
		}
.btn{
	font-weight: bold;
}
.btn.btn-login{
	background: var(--secondary);
	border-color: var(--secondary);
	color: var(--black);
}
	.btn.btn-login:hover{
		background: var(--primary);
		border-color: var(--primary);
		color: var(--tableheadtext);
	}
main{
	min-height: 83vh;
}
@media (max-width:1200px){
	.log-in-page .bg-image {
		height:300px;
	}
}
@media (max-width:768px){
	.log-in-page div.nav-logo a img {
		position: static;
	}
	.log-in-page .container .w-75{
		width: 100% !important;
	}
}

/* footer
-----------------------------------------------------*/
footer{
	margin-top:50px;
}

/* devices layout 
-----------------------------------------------------*/
@media (max-width:1200px){
	a:hover {
		--bs-link-color-rgb: transform;
	}
	body::before,
	aside ul li.side-nav-item::before,
	aside ul li.side-nav-item::after,
	aside ul.nav-list a.nav-item-link::before,
	.m-d-none,
	nav ul.nav-list li.nav-item::before,
	.navbar .nav-logo a img.logo-light{
		display: none;
	}
	.navbar .nav-logo a img,
	nav.navbar,
	aside{
		position: static;
	}
	.navbar .nav-logo a img.logo-dark {
		display: block;
	}
	main{
		min-height: 60vh;
        padding: 0;
        padding-left: 0;
        padding-right: 0;
    }
	.m-small-font h1, 
	.m-small-font h2{
		font-size: 20px;
		margin-bottom: 0;
		width: 100px;
	}
	.m-small-font button{
		font-size: 16px;
	}
	#street-view, #terrain, #satellite{
		width: 100% !important;
	}
	/* navigation */
	aside.left-nav {
		height: auto;
		width: auto;
		overflow-x: auto;            /* enable horizontal scroll */
    	-webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
        margin-bottom: 30px;
	}
		aside.left-nav .nav-list {
			flex-direction: row;
			gap: 10px;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch; 
			padding: 10px;
			scrollbar-width: none; 
			display: flex;        
			width: 500px;        
			min-width: 500px;
		}
		/* aside.left-nav .nav-list {
			flex-direction: row;
			gap: 10px;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch; 
			padding: 10px;
			scrollbar-width: none; 
			display: flex;        
			width: 100%;   
			justify-content: center; 
		}*/
		/* Chrome, Safari, Edge */
		aside.left-nav::-webkit-scrollbar {
			height: 6px; /* thinner for a sleek look */
		}
		aside.left-nav::-webkit-scrollbar-thumb {
			background: linear-gradient(90deg, var(--secondary), var(--secondary)); /* gradient blue */
			border-radius: 10px; 
		}
		aside.left-nav::-webkit-scrollbar-thumb:hover {
			background: linear-gradient(90deg, var(--secondary), var(--skyblue)); /* darker on hover */
		}
		aside.left-nav::-webkit-scrollbar-track {
			background: var(--white-500); /* lighter, subtle track */
			border-radius: 10px;
		}
		/* Firefox */
		aside.left-nav {
			scrollbar-width: thin;
			scrollbar-color: var(--skyblue) var(--white-500);
		}
		  
		/* Items */
		aside.left-nav .nav-list li{
			padding:0;
		}
		aside.left-nav .nav-list a {
			flex: 0 0 auto; /* prevent shrinking */
			padding: 8px 16px;
			border-radius: 20px;
			background: var(--topnavhoverback);
			text-decoration: none;
			color: var(--black);
			font-weight: 500;
			white-space: nowrap; /* prevent text wrap */
		}
		aside.left-nav .nav-list a{
			background-color: var(--topnavhoverback);
			color:var(--black);
			box-shadow: 0 0 .3rem rgba(9, 27, 80, .125);;
		}
	.navbar .nav-top-menu{
		width: 100%;
	}
	.navbar .nav-top-menu .nav-list{
		display: grid;
		grid-template-columns: 100px 1fr 30px 30px;
		width: auto;
		padding:0 10px;
	}
	.navbar .nav-top-menu .nav-list .dropdown-menu {
		z-index: 2100;
	}
	.navbar .nav-logo{
		position: absolute !important;
		top: 5px;
		left: 50%;
		transform: translateX(-50%);
		height: auto !important;
		width: 150px;
		z-index: 2000;
	}
	ul.nav-list a.nav-item-link::before {
		font-size: 30px;
	}

	/* grid card */
	.grid-card {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas: 'planBrand planTitle planTitle'
		'planInfoContainer planInfoContainer planInfoContainer'
		'planAction . .';
	}
		.grid-card .planBrand img{
			position: static;
			width: 100px;
			padding: 0 0 0 10px;
		}
		.grid-card .planTitle{
			display: flex;
			align-items: center;
		}
		.grid-card .planTitle .h4{
			font-size: 18px;
		}
		.grid-card .planBrand,
		.grid-card .planTitle{
			border-bottom: 1px solid var(--light-gray-300);
		}
		.grid-card .planAction {
			/*position: absolute;
			right: 10px;
			top: 50%;*/
			display: flex;
			align-items: center;
		}
		.grid-card .planInfoContainer{
			display: block;
			padding: 10px;
			
		}
		.grid-card .planInfoContainer .plan-element{
			float: left;
			width: 33%;
		}
		.grid-card .planAction{
			margin-left: 10px;
			margin-bottom: 20px;
		}
}
@media (max-width: 768px) {
	.table-wrapper {
	  overflow-x: auto;
	  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
	}
  
	.table-wrapper .table {
	  width: 550px;  /* fixed table width */
	  min-width: 550px;
	}
  }

/* RAF 
-----------------------------------------------------*/
/*<<< Theme >>>*/
.layout-2025 .bg-bs-gray-300{
	background-color: var(--bs-gray-300);
}
.layout-2025 .text-success{
	color:var(--success);
}
.layout-2025 .bs-font-sans-serif{
    font-family: var(--bs-font-sans-serif);
}
.layout-2025 .icon-size-large{
	font-size: 45px;
	line-height: 0;
}
.layout-2025{}
	.layout-2025 .background-black-opt-9 {
		background: rgba(0, 0, 0, 0.8);
	}
	.layout-2025 .bg-secondarypale {
		background: var(--secondarypale);
	}
	.layout-2025 .border-custom-1{
		border-radius: 10px 10px 0 10px;
	}
	.layout-2025 .border-custom-2{
		border-radius: 10px 10px 10px 0;
	}
	.layout-2025 .raf-summary{
		width: 70%;
		padding: 20px;
		margin-top:20px;
		float:right;
		text-align: right;
	}
		.layout-2025 .raf-summary .h3{
			font-size: 2.5rem;
		}
	.layout-2025 .raf-code-wrapper{
		border:2px dashed var(--secondary);
		padding:20px;
	}
		.layout-2025 .raf-code-wrapper #code-snippet{
			word-wrap: break-word;
		}
	.layout-2025  .draft-email-wrapper{
		border:1px dashed var(--black);
		background-color: var(--white);
	}
	.layout-2025 .btn.btn-share{
		--bs-btn-padding-y: 0.2rem;
		background-color: var(--secondary);
		border-color: var(--secondary);
		color: var(--primary);
		text-transform: uppercase;
		position:absolute;
		right: 5px;
		top: 10%;
	}
		.layout-2025 .btn.btn-share:hover{
			background-color: var(--secondarypale);
			border-color: var(--secondarypale);
			color: var(--bs-btn-color);
		}
	.layout-2025 .btn.btn-social{
		background-color: var(--secondary);
		border-color: var(--secondary);
		color: var(--black);
		text-transform: uppercase;
		display: flex;
		align-items: center;
		height: 100%;
	}
		.layout-2025 .btn.btn-social img{
			width:30px;
			border-right: 1px solid var(--black);
			margin-right: 10px;
			padding-right: 10px;
			
		}
		.layout-2025 .btn.btn-social:hover{
			background-color: var(--primary);
			border-color: var(--primary);
			color: var(--tableheadtext);
		}
	
	.layout-2025  .two-col-grid{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10px;
	}
	.layout-2025  .share-list{
		list-style-type: none;

	}

/* RAF Tab
-----------------------------------------------*/
.layout-2025 .content-tab-wrapper {
	position: relative;
	margin-top:100px;
}
	.layout-2025 .content-tab-wrapper .tab-cts {
		display: flex;
		position: absolute;
		top: -45px;
		left: 0;
		right: 0;
		z-index: 10;
		font-weight: bold;
	}
	.layout-2025 .content-tab-wrapper .tab {
		padding: 12px 20px 12px;
		cursor: pointer;
		border: 0;
		background-color: transparent;
		transition: background-color 0.3s ease, transform 0.2s ease;
		position: relative;
		display: flex;
		align-items: center;
	}
	.layout-2025 .content-tab-wrapper .tab::before {
		content: "";
		width: 14px;
		height: 14px;
		border-radius: 50%;
		margin-right: 10px;
		background-color: transparent;
		position: absolute;
		left: 20px;
	}
	.layout-2025 .content-tab-wrapper .tab.active {
		border-radius: 5px 5px 0 0;
		transform: translateY(-2px);
		background-color: var(--secondarypale);
		color: var(--black);
	}
	.layout-2025 .content-tab-wrapper .tab-ct-content {
		background-color: var(--secondarypale);
		padding: 40px 20px;
		margin-top: 42px;
		border-radius: 0 5px 5px 5px;
	}
	.layout-2025 .content-tab-wrapper .content {
		display: none;
	}
	.layout-2025 .content-tab-wrapper .content.active {
		display: block;
	}
	.layout-2025 .content-tab-wrapper tr:nth-child(even){
		background-color: var(--background);
	}

	.layout-2025 .content-tab-wrapper tr th{
		font-size: 1.1rem;
		background-color: var(--tableheadback);
	}
/* table
-----------------------------------------------*/
.layout-2025 #referred-table{
}
	.layout-2025 #referred-table tr th:not(:first-child),
	.layout-2025 #referred-table tr td:not(:first-child) {
		text-align: center;
	}
	.layout-2025 #referred-table tr td:nth-child(3) {
		width: 150px;
	}
@media (max-width:768px){
	.layout-2025 #referred-table tr td:nth-child(3) {
		width: auto;
	}
	.layout-2025 .btn.btn-social{
		text-align: left;
		font-size: 14px;
	}
	.layout-2025 .col-12:has(.raf-summary){
		margin-top: 100px;
	}
		.layout-2025 .raf-summary{
			position: absolute;
			top: -170px;
			width: 100%;
			text-align: center;
		}
		.layout-2025 .raf-summary .h3{
			font-size: 30px;
			display: block;
		}
		.layout-2025 .card:has(#referred-table) {
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
		  }
		
		  .layout-2025 #referred-table {
			min-width: 1000px;  /* adjust if you want more/less */
		  }
		 
}
@media (max-width:320px){
	.layout-2025 .btn.btn-social{
		font-size: 12px;
	}
}