body {
	background-image: url('../media/TeamSpan-Ticketing-Portal-BG.png');
	background-size: cover; /* Stretch the image to cover the entire background area || stretch */
	background-repeat: repeat;
  padding: 20px;
}
.login {
	border: 2px solid #ef4d25;
	padding: 60px;
	border-radius: 50px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	margin: 100px auto;
	max-width: 400px;	/* 250px; */
}
.login img {
	max-width: 100%;
	max-height: 130px;
}
.login-form-title {
	font-family: 'Quicksand', Arial, sans-serif;
	font-size: 11px;
	margin-bottom: 10px;
}
.login-form-link {
	font-family: 'Quicksand', Arial, sans-serif;
	font-size: 11px;
	padding: 0 30px; /* Add padding topdown & leftright */
	margin-bottom: 20px;
	text-align: left; /* Align text to the left */
}
.login-form-button {
	width: 100%;
	height: 50px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	background-color: #ef4d25;
	border-radius: 90px;
	border: none; /* Remove the button border */
    cursor: pointer; /* Change cursor to a pointer hand when hovering */
}
.login form input[type="text"],
.login form input[type="password"] {
	text-align: center; /* Center the text horizontally */
	padding: 10px 20px; /* Add padding topdown & leftright */
	border-radius: 10px;
	width: 100%;
	margin-bottom: 10px;
}
.registration {
	border: 2px solid #ef4d25;
	padding: 10px 30px; /* Add padding topdown & leftright */
	border-radius: 50px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	margin: 80px auto;
	max-width: 400px;	/* 250px; */
}
.registration-form {
	font-family: 'Quicksand', Arial, sans-serif;
	font-size: 50px;
	padding: 0 20px; /* Add padding topdown & leftright */
	margin-bottom: 50px;
}
.registration form input[type="text"],
.registration form input[type="password"],
.registration form input[type="email"] {
	text-align: center; /* Center the text horizontally */
	padding: 10px 20px; /* Add padding topdown & leftright */
	border-radius: 10px;
	width: 100%;
	margin-top: 10px;
}
.registration-form-button {
	width: 100%;
	height: 50px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	background-color: #ef4d25;
	border-radius: 90px;
	border: none; /* Remove the button border */
    cursor: pointer; /* Change cursor to a pointer hand when hovering */
	margin-bottom: 10px;
}

/* Apply styles to the orange bar */
.orange-bar {
    position: fixed;    		/* Fixed position at the top of the viewport */
    top: 0;             		/* Stick it to the top */
    left: 0;            		/* Stick it to the left */
    width: 100%;        		/* Full width of the viewport */
    height: 40px;       		/* Set the desired height for the orange bar */
    background-color: #ef4d25; 	/* Orange color */
    z-index: 5000;      		/* Ensure it's above other content */
}


/* Input placeholder text display */
::placeholder {
	margin-right: -25px;
  color: black;
  font-weight: bold;
}
.error-placeholder::placeholder {
	margin-right: -25px;
  color: red;
  font-size: 11px;
}

/* Footer */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 30px;
    font-size: 13px;
    z-index: 11; /* Place the overlay above the background */
}

.counter {
    position: fixed;
    bottom: -5px;
    left: 0;
    right: 0;
    text-align: center;
    padding: 10px;
    font-size: 8px;
}

/* Custom CSS for changing link colors */
.navbar {
	background-color: #ef4d25;
	border-radius: 30px;
}
.navbar-dark .navbar-nav .nav-link {
	color: black;
}
.navbar-light .navbar-nav .nav-link {
	color: black; /* Non-active link text color */
}
.navbar-light .navbar-nav .nav-link.active {
	color: white; /* Active link text color */
}

.white-row {
	background-color: white;
	border: 1px solid lightgray;
	border-radius: 5px;
}
.gray-row {
	background-color: lightgray;
	border: 1px solid gray;
	border-radius: 5px;
}

.ticket {
	padding: 10px;
	margin-bottom: 10px;
}
.compressed-line {
	margin-bottom: 3px;
	line-height: 1;
}

.profile-image-container {
  text-align: center; /* Center align its children */
}
.profile-image {
  display: block; /* Make the image a block-level element */
  margin: 0 auto; /* Center horizontally */
  max-width: 100%; /* Ensure the image doesn't exceed its container's width */
}


/* Containers */
.loginbox, .registerbox, .forgotbox {
	border: 2px solid #ef4d25;
	padding: 60px;
	border-radius: 50px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	margin: 100px auto;
	max-width: 275px;	/* 250px; */
}

/* Forms */
.loginbox-form, .registerbox-form, .forgotbox-form {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Inputs */
.loginbox-input, .registerbox-input, .forgotbox-input {
	width: 230px;
	border: 1px solid;
	border-radius: 10px;
	text-align: center; /* Center the text horizontally */
	padding: 10px 10px; /* Add padding topdown & leftright */
	margin-bottom: 10px;
	box-sizing: border-box;
}

/* inputbox icon settings */
.email-icon, .password-icon, .fullname-icon {
  background-size: 20px; /* Adjust size of the icon */
  background-position: 10px center; /* Position the icon */
  background-repeat: no-repeat; /* Prevent repeating the icon */
  padding: 10px 10px; /* Adjust padding to accommodate icon */
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: transparent; /* Set transparent background */
}
/* inputbox icon images */
.email-icon {
  background-image: url('../media/email.png');
}
.password-icon {
  background-image: url('../media/paswd.png');
}
.fullname-icon {
  background-image: url('../media/user.png');
}

/* Buttons */
.loginbox-button, .registerbox-register, .forgotbox-reset {
    width: 230px;
    height: 37px;
    color: white;
    font-weight: bold;
    font-size: 14px;
    background-color: #ef4d25;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.registerbox-cancel, .forgotbox-cancel {
    width: 150px;
    height: 37px;
    color: white;
    font-weight: bold;
    font-size: 14px;
    background-color: gray;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    text-align: center;
    margin-left: -75px;
    box-sizing: border-box;
}

/* Labels */
.loginbox-label, .loginbox-label2, .loginbox-label3 {
    font-family: 'Quicksand', Arial, sans-serif;
    font-size: 11px;
    text-align: center;
    padding: 10px;
    display: inline-block;
}

.loginbox-label {
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.loginbox-label2 {
    margin-top: 11px;
    margin-bottom: -5px;
}

.loginbox-label3 {
    margin-left: 20px;
    margin-top: 10px;
}

.forgotbox-label {
    font-family: 'Quicksand', Arial, sans-serif;
    font-size: 25px;
    margin: auto;
    text-align: center;
    padding: 10px;
    display: inline-block;
}

.forgotbox-label2 {
    font-size: 15px;
    margin-left: 20px;
    margin-top: -10px;
}

.registerbox-label {
    font-size: 20px;
    margin-left: 130px;
    margin-top: -20px;
    margin-bottom: 10px;
}

.registerbox-cancel, .forgotbox-cancel {
	margin: auto;
}

/* Media Queries */
@media screen and (max-width: 412px) {
	.input-group input[type="text"],
	.input-group input[type="password"] {
		font-size: 24px;
		padding: 10px 20px;
	}
	.linebox {
		border: 2px solid #ef4d25;
		padding: 10px;
		border-radius: 50px;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
		margin: 100px auto;
		max-width: 100%; /* 400px; */
		margin-top: 20px;
}