/** Add custom styles here. These will override any bootstrap styles. **/

#userDropdown:hover {
    background-color: #f8f9fa !important;
    border-color: #f8f9fa !important;
}

main {
margin-top: 8em;
}

#hero{}
#hero h1{
	background: rgba(42,168,222,0.5);
	display: inline-block;
	color: rgb(255,255,255);
    font-size: 6.5rem;
    font-weight: 800;
    padding: 1rem;
}
#hero h2{
	background: rgba(237,44,147,0.5);
	display: inline-block;
	color: rgb(255,255,255);
    font-size: 3.5rem;
    font-weight: 800;
    padding: 1rem;
}

@media (max-width: 767.98px) {
	#hero h1{
		font-size: 4rem;
	}
	#hero h2{
		font-size: 2.5rem;
	}
}

/* Brand Theme Colors */

.navbar{
	padding: 1em;
}

.navbar-brand-blue {
    background-color: #104d81;
}


.btn{
	border-radius: 2em;
	padding: 0.5em 1.5em;
	text-transform: uppercase;
	font-family: "Poppins" !default;
}
.btn-brand-pink {
    background-color: #ed2c93;
    border-color: #ed2c93;
    color: white;
}

.btn-brand-pink:hover {
    background-color: #db2777;
    border-color: #db2777;
    color: white;
}

.btn-brand-blue {
    background-color: #104d81;
    border-color: #104d81;
    color: white;
}

.btn-brand-blue:hover {
    background-color: #1e40af;
    border-color: #1e40af;
    color: white;
}

.card{
	border-color: rgba(42,168,222,1);
}
.card-header{
	background: rgba(42,168,222,1);
	color: white;	
}

.card-brand-blue {
    background-color: #104d81;
}

.card-brand-light-blue {
    background-color: #3b82f6;
}

.card-brand-teal {
    background-color: #0d9488;
}

.btn-brand-teal {
    background-color: #0d9488;
    border-color: #0d9488;
    color: white;
}

.btn-brand-teal:hover {
    background-color: #0f766e;
    border-color: #0f766e;
    color: white;
}

/* Background utility classes */
.bg-brand-pink {
    background-color: #ed2c93;
}

.bg-brand-blue {
    background-color: #104d81;
}

.bg-brand-teal {
    background-color: #0d9488;
}

/* Text color utilities */
.text-brand-pink {
    color: #ed2c93;
}

.text-brand-blue {
    color: #104d81;
}

.text-brand-teal {
    color: #0d9488;
}

/* QR Code Styles */
.qr-form-container {
    margin-top: 3em;
    margin-bottom: 3em;
}
.qr_input_field {
    padding: 10px;
    width: 100%;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    opacity: 0;
    position: absolute;
    left: -9999px; /* Move it off-screen to ensure it's not visible */
}
.qr-scan-message {
    text-align: center;
    padding: 30px;
    background-color: rgba(42,168,222,0.11);
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.scan-icon {
    font-size: 48px;
    margin-bottom: 15px;
    color: #4a90e2;
}
.qr-message {
    margin-top: 20px;
    padding: 20px;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s ease;
}
.qr-success-message {
    background-color: #dff0d8;
    color: #3c763d;
}
.qr-error-message {
    background-color: #f2dede;
    color: #a94442;
}
.qr-reminder-message {
    background-color: #ffe9da;
    color: #ff9650;
}
/* End of QR Code Styles */