.material-symbols-outlined {
				font-variation-settings:
				'FILL' 0,
				'wght' 0,
				'GRAD' 0,
				'opsz' NaN
			}

			.material-symbols-outlined.md-70 { 
				font-size: 70px;
			}

			.material-symbols-outlined.md-48 { 
				font-size: 48px;
			}

			.material-symbols-outlined.blue-color { 
				color:#006fe9;
			}

			.banner-section {
				padding-top: 120px;
				padding-bottom:20px;
			}

			.banner-content {
				text-align: center;
			}

			.banner-img {
				margin-top:-15px;
			}

			.feathering {
				-webkit-mask-image: 
					linear-gradient(to right, transparent, black 7%),
					linear-gradient(to left, transparent, black 7%),
					linear-gradient(to top, transparent, black 7%);
				-webkit-mask-repeat: no-repeat;
				-webkit-mask-composite: intersect;
				mask-image: 
					linear-gradient(to right, transparent, black 7%),
					linear-gradient(to left, transparent, black 7%),
					linear-gradient(to top, transparent, black 7%);
				mask-repeat: no-repeat;
				mask-composite: intersect;
			}

			.center-container {
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100px;
				width: 100%;
				text-align: center;
			}

			.section-features, .work-section {
				padding-top:20px;
				padding-bottom:0px;
				margin-top: 0px;
				margin-bottom:0px;
			}

			.section-header {
				margin-bottom:20px;
			}

			.feature-box {
				margin: 0px;
				padding: 0px;
			}

			.workflow-step {
				margin-bottom: 5px;
			}

			.specialities-section-one {
				padding-top:40px;
				padding-bottom:40px;
			}

			.btn-primary {
				background-color: #0088f2;
				border-color: #0088f2;
			}

			.user-selection .btn-success {
				background-color: #3a7bd5; 
				border-color: #3a7bd5;
			}

			.footer-top {
				padding-top: 0px;
				padding-bottom: 0px;
			}

			.footer-logo {
				width:123px;
				height:25px;
			}

			section + section {
				margin-top: 0;
			}

			/* --- Login Section Styling --- */

.registration-container {
    /* Add some padding if needed */
    padding: 20px 15px; /* Example */
}

.login-prompt {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 20px;
}

/* --- Sleek Checkbox Styling --- */
.doctor-checkbox-container {
    display: flex;          /* Use flexbox for alignment */
    justify-content: center; /* Center horizontally */
    align-items: center;    /* Center vertically */
    margin-bottom: 25px;    /* Space below checkbox */
}

/* Hide the default checkbox */
#isDoctorCheckbox {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute; /* Take out of layout flow */
}

/* Style the label to be clickable */
.doctor-label {
    display: inline-flex; /* Use flex for internal alignment */
    align-items: center;
    cursor: pointer;
    font-size: 1rem; /* Adjust as needed */
    color: #333;
    position: relative; /* Needed for absolute positioning if used */
    user-select: none; /* Prevent text selection on click */
    font-weight: 500; /* Slightly bolder text */
}

/* Style the custom checkbox appearance */
.doctor-label .custom-checkbox {
    display: inline-block;
    width: 20px;         /* Size of the box */
    height: 20px;
    border: 2px solid #0d6efd; /* Use your primary color */
    border-radius: 4px;  /* Slightly rounded corners */
    margin-right: 10px;  /* Space between box and text */
    background-color: #fff;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    position: relative; /* For the checkmark */
}

/* Style the checkmark using ::after pseudo-element */
.doctor-label .custom-checkbox::after {
    content: '';
    display: block;
    width: 5px;
    height: 10px;
    border: solid white; /* Checkmark color */
    border-width: 0 3px 3px 0;
    transform: rotate(45deg) translate(-50%, -50%); /* Position and rotate */
    position: absolute;
    left: 50%;
    top: 45%; /* Adjust fine positioning */
    opacity: 0; /* Hide by default */
    transition: opacity 0.2s ease-in-out;
}

/* Show checkmark and change background when checked */
#isDoctorCheckbox:checked + .doctor-label .custom-checkbox {
    background-color: #0d6efd; /* Use your primary color */
    border-color: #0d6efd;
}

#isDoctorCheckbox:checked + .doctor-label .custom-checkbox::after {
    opacity: 1; /* Show the checkmark */
}

/* Optional: Focus style for accessibility */
#isDoctorCheckbox:focus + .doctor-label .custom-checkbox {
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25); /* Example focus ring */
}


/* --- Google Sign-In Button Container Styling --- */
.google-signin-container {
	padding-top: 0.1rem;
    padding-right: 0.1rem;
    padding-bottom: 0.1rem;
    padding-left: 0.1rem;
    font-size: 1.25rem;
	/*border: 0.5px solid #09e5ab;*/
    /* -- Optional: Styling for the container ITSELF -- */
    /* If you want the container to have a border/background, keep these */
    /* but they style the AREA AROUND the button, not the button */
    border-radius: 5px; 
    background: white; 
    border: thin solid #006fe9;
    box-shadow: 0.5px 0.5px 0.5px grey;  
}

/* Optional: Target the rendered Google button if more specific styling needed */
/* You might need to inspect the element Google renders to get the exact class 
.google-signin-container > div {*/
   /* Styles for the Google button itself if needed 
}*/