/* Custom BidSlammer stylesheet to enhance and override Bootstrap 5 styles */

:root {
	font-size: 16px; /* Browser default is usually 16px */
}

@font-face {
	font-family: 'Neue Haas Grotesk';
	src: url('/fonts/NHaasGrotesk/NHaasGroteskTXPro-55Rg.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

/* general */
body {
	font-family: 'Neue Haas Grotesk', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
table tr td, th {
	border: 1px #ccc solid;
	padding: 5px 20px;
}

/* header dropdown menu for country selection */
.dropdown-item {
	padding-left: 38px;
}
.dropdown-menu {
	width: 230px;
}
.dropdown-toggle::after {
	display: none;
}
.dropdown-menu li {
	padding-left: 8px;
}

/* navbar */
.smaller-font {
	font-size: 14px;
}

/* image border & rounding */
.roundedImg {
	border: 1px #ccc solid;
	border-radius: 8px;
}
.imgBorder {
	border: 1px solid #ccc;
	border-radius: 4px; /* Added a valid value for border-radius */
}

/* signup & Login buttons */
.signupButton, #headerSignupButton {
	margin-top: 0px;
	padding-top: 7px;
	background-image: linear-gradient(to right, #444444, #FF0000); /* Gradient background */
	border: 2px solid #FF0000;
	color: #FFFFFF;
	font-weight: bold;
	border-radius: 25px;
	width: 200px;
	height: 50px;
	font-size: 16pt;
	cursor: pointer; /* Pointer cursor on hover */
}
#headerLoginButton {
	margin-top: 0px;
	padding-top: 7px;
	background-image: linear-gradient(to right, #444444, #4A90E2); /* Gradient background with toned-down blue */
	border: 2px solid #4A90E2;
	color: #FFFFFF;
	font-weight: bold;
	border-radius: 25px;
	width: 200px;
	height: 50px;
	font-size: 16pt;
	cursor: pointer; /* Pointer cursor on hover */
}
a.btn {
	background-color: #A03800;
	color: white;
	padding: 15px 30px;
	font-size: 18px;
}
/* /Signup & Login buttons */

/* slogan fadein */
.btn:active {
	animation: wiggle 0.2s ease-in-out;
}
@keyframes wiggle {
	0% { transform: translate(0, 0); }
	50% { transform: translate(5px, 5px); }
	100% { transform: translate(0, 0); }
}
.slogan {
	position: relative;
	animation: drop 0.5s ease-in-out forwards;
}
#slogan3 {
	animation-delay: 2s;
}
#slogan2 {
	animation-delay: 3s;
}
#slogan1 {
	animation-delay: 4s;
}
@keyframes drop {
	0% {
		top: -50px;
		opacity: 0;
	}
	100% {
		top: 0;
		opacity: 1;
	}
}
/* /slogan fadein */

/* help & faq */
.myquestion {
	padding-left: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	color: darkgreen;
}
.answer div {
	padding-top: 8px;
}
.myul {
	padding-top: 5px;
}
.myul li {
	padding-top: 5px;
}
/* help & faq */

/* signup page */
.thisPara p {
	font-size: 1.8em;
}
.btn-extra-large {
	padding: 20px 40px; /* Increase padding */
	font-size: 24px; /* Larger font size */
	border-radius: 10px; /* Rounded corners */
}
.shadow-lr {
	border-radius: 130px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Shadow to the lower right */
}
/* /signup */

/* support ticket */
.customerColor { 
	color: #0000ff !important; 
	background-color: #f5f5ff !important; 
}
.adminColor { 
	color: darkgreen !important; 
	background-color: #f5fff5 !important; 
}
/* /support ticket */

/* cool card */
.custom-card {
	border: 5px solid #fff; /* Light gray border color */
	background-color: #EFF2F4; /* Slightly off-white background color */
	border-radius: 0.5rem; /* Rounded corners */
	padding: 1.5rem; /* Padding for inner content */
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
/* /cool card */

/* slanting div on home page */
.slanted-bg {
	position: relative; /* Ensures proper positioning for the pseudo-element */
	overflow: hidden; /* Prevents overflow from skew effect */
	background-color: #EFF2F4; /* Background color of the slanted section */
	transform: skewY(-2deg); /* Apply slant */
	padding: 20px 0; /* Add padding to prevent clipping */
}
.slanted-bg .inner-content {
	transform: skewY(2deg); /* Counteract the slant */
}
/* Adjust the margins to extend past the page */
.slanted-bg:before {
	content: "";
	position: absolute;
	top: -20px; /* Adjust as needed to extend past the page */
	left: 0;
	width: 100%;
	height: 20px; /* Match the top margin */
	background-color: #BFE4F2; /* Background color of the slanted section */
}
/* /slanting */

/* clouds on home page */
.bg-clouds {
	background-image: url('/img/bg-clouds.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.bg-clouds-inverted {
	background-image: url('/img/bg-clouds.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.bg-circles {
	background-image: url('/img/bg-circles.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* /clouds */