/* targeted classes
-----------------------------------------------------*/
.headfont {font-family: var(--mainheadfont);}
:root{
	--black: #000000;
	--ter-skyblue: #D6F3FF;
	--bs-danger: #dc3545;
}

/* 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: 5px 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 {
	}
	.myaccount-layout div.nav-logo a {
		width: 90% !important;
	}
}
@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: 30px 0 10px;
			scrollbar-width: none; 
			display: flex;        
			width: 800px;        
			min-width: 800px;
		}
		/* 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: 60%;
		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);
	}
	.step-by-step .row span {
    border: 1px solid var(--si-gray-300);
    border-radius: 50px;
    padding: 10px 18px;
}
.myaccount-layout .step-by-step .row span {
    border: 1px solid #e2e5f1;
    border-radius: 50px;
    padding: 10px 18px;
	background-color: #00aeef;
}
.myaccount-layout .raf-banner{
	background-color: #FFEDA5;
	background-image: url('/images/banners/raf-happy-girl-w-gift-card-copy-3.png');
	background-position:right bottom;
	background-repeat: no-repeat;
	background-size: contain;
    min-height: 410px;

}
	.myaccount-layout .raf-credit-holder{
		background-color:#044E77;
		box-shadow: 0 0 .5rem rgba(9, 27, 80, .125);
		border: 1px solid #e7e7e7;
		color:#fff;
	}
		.myaccount-layout .raf-credit{
			font-size: 3rem;
			line-height: 100%;
			font-weight: bold;
			color: #67BA4B;
		}
@media (min-width:980px){
	.myaccount-layout .raf-banner h1{
		font-size: 3.5rem;
		color: var(--black) !important;
	}
}
@media (min-width:768px){
	.myaccount-layout .raf-divider{
		border-left: 1px solid #cdab45;
	}
}
@media (max-width:980px){
	.myaccount-layout .raf-banner{
		background-size: 40%;
		min-height: 500px;
	}
	.myaccount-layout .raf-banner h1{
		font-size: 45px;
	}
	.myaccount-layout .raf-credit-holder .h5{
		font-size: 18px !important;
	}
}
@media (max-width:768px){
	.myaccount-layout .raf-banner{
		background-image: none;
		background-size: 80%;
		min-height: 500px;
	
	}
}
/* 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;
	}
}


/* new dashboard
-----------------------------------------------------*/
.bg-ter-skyblue{
	background-color: var(--ter-skyblue);
}
.myaccount-layout .autopilot-logo{
	width:340px;
}
.myaccount-layout h1,
.myaccount-layout h2{
	color: var(--black) !important;
}
.myaccount-layout p{
	line-height: 150%;
}
.dashboard-card .card{
	min-height: 260px;
	position: relative;
}
.dashboard-card .card .card-btn{
	position: absolute;
	bottom:30px;
}
.dashboard-card .card .material-symbols-outlined {
    font-size: 35px;
	color:var(--darkback);
}
.myaccount-layout .form-control,
.myaccount-layout .form-select {
    border: var(--bs-border-width) solid #c2c2c2;
}
/* Button */
.myaccount-layout .card-btn,
.myaccount-layout #contact-form .btn-success{
	background: #f4a940;
	padding: 0.5rem 1rem;
	display: flex;
	align-items: center;
	border:0;
	color:#000;
	font-size: 1rem !important;
  }
  .myaccount-layout .card-btn:hover,
  .myaccount-layout #contact-form .btn-success:hover {
	background: #044E77;
	color:#fff;
  }
  .myaccount-layout .card-btn .material-symbols-outlined {
	font-size: 25px;
	color:var(--black);
  }
  .myaccount-layout .card-btn:hover .material-symbols-outlined {
	color:var(--white);
  }
@media (min-width: 1200px) {
    .myaccount-layout .contact-form-container{
		width:800px;
	}
}
@media (max-width: 1200px) {
    .dashboard-card .card{
		min-height: 280px;
	}
	.myaccount-layout .autopilot-logo{
		width:150px;
	}
}
@media (max-width: 768px) {
    .dashboard-card .card{
		min-height: auto;
	}
	.dashboard-card .card .card-btn{
		position: static;
	}
}
/* autopilot
-----------------------------------------------------*/
:root {
    --iconauto: '\e539';
	--green-autopilot: #67BA4B;
}
.autopilot-container{
	min-height: 90vh;
}
h2, h3, h4{
	font-family: var(--bs-body-font-family);
}
.autopilot-container .banner-bullet {
    list-style-type: none;
    padding: 0;
}
	.autopilot-container .banner-bullet li {
		position: relative;
		padding-left: 35px;
		margin-bottom: 10px;
		font-size: 16px;
	}
	.autopilot-container .banner-bullet li::before {
		content: '';
		position: absolute;
		left: 0;
		top: -2px;
		width: 24px;
		height: 24px;
		display: block;
		background-image: url(/images/icons/skyblue-checked-icon.svg);
		background-size: contain;
	}
.step-by-step span {
    background-color: #000000;
	color: #fff;
    border-radius: 50px;
    padding: 10px 15px;
}
.nav-autopilot a.nav-item-link::before {
    content: var(--iconauto);
}
.autopilot-container .autopilot-box {
  max-width: 700px;
}
/* Toggle switch */

.autopilot-container .custom-switch .form-check-input {
  width: 70px;
  height: 36px;
  background-color:#fff;
  border:1px solid #999;
  cursor: pointer;
}
.autopilot-container .custom-switch .off-confirmation {
	background-color:var(--bs-danger);
}
	
.autopilot-container .custom-switch .form-check-input:checked {
  background-color: var(--green-autopilot);
  border-color:#67BA4B;
}
.autopilot-container .autopilot-box:has(#autopilotToggle:checked) .default-off {
  display: none;
}
.autopilot-container .autopilot-box:has(#autopilotToggle:checked) .on {
  display: block !important;
}
.autopilot-container .autopilot-box:has(#autopilotToggle:not(:checked)) .submit-btn-after-on{
  display: flex !important;
}
.off-confirmation
.autopilot-container .custom-switch .form-check-input::before {
  content: '';
}
#autopilotToggle:checked::before{
	content: 'ON';
	display: block;
	font-weight: bold;
	color: #fff;
    margin-left: 0.6rem;
    margin-top: 0.3rem;

}
/* Checkbox */
.autopilot-container .custom-checkbox .form-check-input {
  width: 28px;
  height: 28px;
  border: 1px solid #999;
}
.autopilot-container .custom-checkbox label {
  font-size: 1rem !important;
}

/* Button */
.autopilot-container .submit-btn {
  background: #f4a940;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
}
.autopilot-container .submit-btn:hover {
  background: #044E77;
  color:#fff;
}
.autopilot-container .material-symbols-outlined {
  font-size: 28px;
}
.count-down{
	width:400px;
}
.countdown-number{
	font-size: 90px;
	background:rgba(855, 855, 855, 1);
}
@media (max-width: 768px) {
    .count-down{
		margin:0 auto;
	}
}