:root {
	--main-purple: #B300EF;
	--main-blue: #0d86e8;
	--middle-purple: #7136ec;
}

.text-blue {
	color: var(--main-blue);
}

.bg-blue {
	background-color: var(--main-blue);
}

.bg-purple {
	background-color: var(--middle-purple);
}

main {
	min-height: 85vh;
}

body {
	/*background: #e8e7e6;*/
	background: white;
}

.site-header .navbar-nav .nav-link {
	color: #fafafa;
/*  7/22 Lob Banner*/
/*  background-image: linear-gradient(89.98deg,#0091fb,#fb4da4 50%,#ffa755);*/
}

.site-header .navbar-nav .nav-link:hover {
	color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
	font-weight: 500;
}

.content-section {
	background: #ffffff;
	padding: 10px 20px;
	border: 1px solid #dddddd;
	border-radius: 3px;
	margin-bottom: 20px;
}

.rounded-img {
	border-radius: 30px;
}

.bronze {
	background-color: #b08d57;
}

.silver {
	background-color: #C0C0C0;
}

.gold {
	background-color: goldenrod;
}

.bronze:hover, .silver:hover, .gold:hover {
	background-image: linear-gradient(rgb(0 0 0/20%) 0 0);
}

.small-text {
	font-size: 0.9rem;
}


.navbar-bg {
	background: linear-gradient(to right, var(--main-purple), var(--main-blue));
}

/* Toggle Switch */

.toggle {
	position: relative;
	display: inline-block;
	width: 45px;
	height: 25px;
}

.toggle input { 
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 25px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 21px;
	width: 21px;
	left: 2px;
	bottom: 2px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 50%;
}

input:checked + .slider {
	background-color: var(--middle-purple);
}

input:focus + .slider {
	box-shadow: 0 0 1px var(--middle-purple);
}

input:checked + .slider:before {
	-webkit-transform: translateX(19px);
	-ms-transform: translateX(19px);
	transform: translateX(19px);
}

/* End Toggle Switch */

/* Tilt Card */

.tilt-card {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 20px;
	height: 400px;
	width: 680px;

	position: relative;

	transform:
		perspective(5000px)
		rotateY(var(--rotateY))
		rotateX(var(--rotateX));

	transform-style: preserve-3d;
	background-color: #9b4d00;
	background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #9b4d00 35px ), repeating-linear-gradient( #DC8E4155, #DC8E41 );
	transition: transform 0.25s ease-out;
}

.tilt-card.mouse-out {
	transition: transform 0.7s ease-out 0.5s;
}

.tilt-card > p {
	font-size: 100px;
	font-weight: 700;
	margin: 0;
}

.tilt-card::before {
	content: '';
	position: absolute;
	inset: 7px;
	box-shadow: inset 0 0 0 2px white; /* Inset border */
	pointer-events: none;
	border-radius: 17px;
	}

.tilt-card::after {
	content: '';
	position: absolute;
	z-index: -1; /* Ensure the shadow is behind the card */
	top: 5px;
	left: 5px;
	right: -5px;
	bottom: -5px;
	box-shadow: 0 10px 15px rgba(0, 0, 0); /* Customize as needed */
	border-radius: inherit; /* Match the card's border radius */
	filter: blur(20px);
}

.parallax-text {
	transform: translateZ(60px);
}

.tilt-card-logo {
	top: -50%; /* Adjust as needed */
	left: -50%; /* Adjust to partially hide the image */
	width: 200%; /* To take up about a third of the card */
	height: 200%; /* Adjust as needed */
	background-image: url('/static/img/large-logo-white-transparent.png');
	background-size: cover; /* Or 'contain' based on your preference */
	background-repeat: no-repeat;
	background-position: center;
	z-index: -1; /* To ensure it's behind the card content */
	opacity: 0.5; /* Adjust for desired visibility */
}

.custom-sidebar-width {
	/* Since sidebar is now fixed, this div should take up no space */
	width: 0;
	padding: 0;
	margin: 0;
}


.after-sidebar-width {
	/* Main content area needs left margin to account for fixed sidebar */
	margin-left: 220px; /* Match the sidebar width */
	width: calc(100% - 220px); /* Take remaining width */
}

/* Mobile responsiveness - on small screens, no margin needed since sidebar is hidden */
@media (max-width: 768px) {
	.after-sidebar-width {
		margin-left: 0;
		width: 100%;
	}
}


/* Legacy sidebar styles - now handled in sidebar.html */
.nav-item {
	padding-left: 15px; /* Move icons away from the edge */
	padding-top: 10px; /* Space at the top of each item */
	padding-bottom: 10px; /* Space at the bottom of each item */
}

.nav-link {
	display: flex;
	align-items: center;
	color: white; /* Ensure text color is white */
}

.nav-link:hover {
	color: #ccc; /* Change hover color if needed */
}

.icon {
	width: 20px; /* All icons have the same width */
	text-align: center;
}

.icon + span {
	margin-left: 0.5rem; /* Consistent spacing between icon and text */
}


.user-profile {
	color: white;
	margin-left: 0.4rem;
}

.profile-circle {
	width: 32px; /* Size of the circle */
	height: 32px; /* Size of the circle */
	border-radius: 50%; /* Makes it a circle */
	background-color: var(--main-purple); /* The purple background color */
	color: white; /* Initials color */
	font-weight: bold; /* Makes the initials bold */
}

.user-info {
	display: flex;
	flex-direction: column;
}

.user-name {
	font-size: 0.9rem; /* Adjust size as needed */
}

.user-biz {
	font-size: 0.8rem; /* Adjust size as needed */
}

.logout-link {
	font-size: 0.8rem; /* Adjust size as needed */
	color: white; /* or any other color you prefer */
	text-decoration: none; /* Removes underline from the link */
}

.logout-link:hover {
	color: #ccc; /* Hover color */
}




.dashboard-card {
	border: solid 2px black;
}

.dashboard-card .stat-label {
	color: #636363;
}

.dashboard-card .stat-icon {
	font-size: 2.4rem;
/*  color: grey;*/
}

#mailers-ordered-card {
	border-color: var(--middle-purple);
}

#mailers-ordered-card .stat-value {
	color: var(--middle-purple);
}

#mailers-ordered-card .dashboard-card-footer {
	background: linear-gradient(to right, var(--middle-purple), rgba(113, 54, 236, 0.7));
}

#tracking-calls-card {
	border-color: rgb(253, 148, 102);
}

#tracking-calls-card .stat-value {
	color: rgb(253, 148, 102);
}

#tracking-calls-card .dashboard-card-footer {
	background: linear-gradient(to right, rgb(253, 148, 102), rgba(253, 148, 102, 0.7));
}

#qr-scans-card {
	border-color: rgb(0, 172, 174);
}

#qr-scans-card .stat-value {
	color: rgb(0, 172, 174);
}

#qr-scans-card .dashboard-card-footer {
	background: linear-gradient(to right, rgb(0, 172, 174), rgba(0, 172, 174, 0.7));
}

#credits-card {
	border-color: rgb(26, 150, 108);
}

#credits-card .stat-value {
	color: rgb(26, 150, 108);
}

#credits-card .dashboard-card-footer {
	background: linear-gradient(to right, rgb(26, 150, 108), rgba(26, 150, 108, 0.7));
}

.map { 
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
}


.btn-homepage {
	color: white;
	background: linear-gradient(90deg, #FF9A46 3%, #F94F53 99%);
	border-color: #FF9A46;
	border-radius: 25px;
	font-weight: bold;
	box-shadow: 0px 10px 29px 0px #FC741C69;
	font-size: 1.5rem;
}

.btn-homepage:hover {
	color: white;
}