body, h1, p, button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8;
}

div#page-wrapper {
    width: 97%;
    padding: 5px;
}

.header-container {
    max-width: 1240px;
    margin: 20px auto;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

header img {
    height: 40px;
}

.header-buttons {
    display: flex;
    gap: 15px;
}

.header-buttons button {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.header-buttons button:hover {
    background-color: lightgrey;
    color: blue;
    border: 1px solid lightgrey;
}

.hamburger {
    display: none; /* Hidden by default for desktop */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: #333;
}

/* Risk Score Color Coding */
.low-risk {
    background-color: #98FB98 !important; /* Light Green */
    color: black !important;
}
.medium-risk {
    background-color: #FFD700 !important; /* Gold */
    color: black !important;
}
.high-risk {
    background-color: #FFA500 !important; /* Orange */
    color: black !important;
}
.extreme-risk {
    background-color: #FF4500 !important; /* Red */
    color: white !important;
}

.container, .pricing-content-container {
    display: flex;
	max-width: 1200px;
	margin: 20px auto;
	padding-top: 5px;
	padding: 20px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	flex-direction: row;
}

.hero-section {
    max-width: 1200px;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 80px 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hero-text {
    max-width: 50%;
    padding-right: 20px;
}

.hero-text h1 {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-text p {
    font-size: 1.2em;
    margin-bottom: 20px;
    color: #666;
}

.hero-button {
    padding: 15px 30px;
    font-size: 1em;
    color: #fff;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    animation: glow 2s infinite alternate;
}

@keyframes glow {
    0% {
        background-color: #FF4500; /* Orange */
        box-shadow: 0 0 10px #FF4500;
    }
    100% {
        background-color: #007BFF; /* Blue */
        box-shadow: 0 0 20px #007BFF;
    }
}

.hero-button:hover {
    background-color: #0056b3;
    animation: none; /* Stops the animation on hover */
}

.hero-image {
    max-width: 45%;
}

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.promo-video {
    text-align: center;
    margin: 40px auto;
}

.promo-video h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #333;
}

.promo-video .video-container {
    position: relative;
    width: 100%;
    max-width: 800px; /* Keep your desired max width */
    height: 450px;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}


.promo-video .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
}

.features-section {
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.features-section h2 {
    text-align: center;
    font-size: 2.0em;
    margin-bottom: 20px;
}

.feature-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0;
}

.feature-item {
    flex-basis: 30%;
    margin-bottom: 15px;
    background-color: #007BFF;
    color: white;
    padding: 10px 10px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.feature-item h3 {
    font-size: 1.1em;
    margin-left: 8px;
}

.feature-item i {
    font-size: 1.5em;
    margin-right: 10px;
}

.additional-features {
    text-align: center;
    margin-top: 40px;
}

.additional-feature-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-box {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.feature-box i {
    font-size: 2em;
    color: #007BFF;
}

.feature-box h3 {
    margin-top: 10px;
    font-size: 1.2em;
}

.feature-box p {
    font-size: 1em;
    margin-top: 10px;
}
.faq-section {
    margin-top: 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 100%;
}

.faq-question {
    font-size: 1.2em;
    font-weight: bold;
    background-color: #f1f1f1;
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-answer {
    display: none;
    font-size: 1em;
    padding: 15px;
    margin: 10px 0;
    background-color: #fff;
    border-left: 5px solid #007BFF;
    border-radius: 5px;
}

.faq-answer.show {
    display: block;
}

.faq-plus {
    font-size: 1.5em;
    color: #007BFF;
    font-weight: bold;
}

.subscription-info {
    text-align: center;
    font-size: 1.2em;
    color: #007BFF;
    margin-top: 0px;
    margin-bottom: 30px;
}

.subscription-form {
	flex: 1;
	background-color: #fff;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	text-align: left;
	max-width: 400px;
}

.subscription-form h1 {
	font-size: 2.5em;
	font-weight: bold;
	color: #007BFF;
	margin-bottom: 20px;
}

.subscription-form input[type="email"] {
	width: 100%;
	padding: 15px; /* Adjusted padding to match button height */
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 1.1em;
	box-sizing: border-box; /* Ensures padding does not affect width */
}

.subscription-form button {
	width: 100%;
	padding: 15px; /* Same padding as the input for alignment */
	font-size: 1.1em;
	color: white;
	background-color: #007BFF;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	box-sizing: border-box; /* Ensures padding does not affect width */
}

.submit-button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
}

.submit-button:hover {
    background-color: #0056b3;
}


.subscription-form button:hover {
	background-color: #0056b3;
}

.subscription-image {
	max-width: 600px;  /* Increased the width of the image container */
	display: flex;
	align-items: center;
}

.subscription-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	transform: scale(1.0);  /* Enlarges the image */
	margin: auto;
}

/* Terms and Conditions at the bottom of the page */
.terms-container {
	max-width: 1200px;
	margin: 100px auto 40px auto; /* Added 100-pixel gap above */
	padding: 0 300px; /* Add a 300-pixel margin on the sides */
	font-size: 0.75em; /* Smaller font size for terms and conditions */
	color: #555;
	text-align: center;
}

.terms-container a {
	color: #007BFF;
	text-decoration: none;
}

.terms-container a:hover {
	text-decoration: underline;
}

.terms-summary {
    width: 100%;
}

/* Flash message styling */
.flashes {
	list-style: none;
	padding: 10px;
	margin: 20px 0;
}

.flashes li {
	margin: 5px 0;
	padding: 10px;
	border-radius: 5px;
	color: white;
	background-color: #e74c3c;
}

.alert {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 16px;
	font-weight: bold;
}

.alert-success {
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
}

.alert-danger {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

.alert-info {
	color: #0c5460;
	background-color: #d1ecf1;
	border-color: #bee5eb;
}



/* Timeline styles */
.timeline-container {
	width: 100%;
	max-width: 1200px;
	margin: 30px auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.timeline-step {
	flex: 1;
	text-align: center;
	position: relative;
}

.timeline-step::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 4px;
	background-color: #ddd;
	z-index: -1;
	transform: translateX(-50%);
}

.timeline-step span {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 50px;
	background-color: #ddd;
	color: #555;
	font-weight: bold;
	transition: background-color 0.3s, color 0.3s;
}

.timeline-step.active span {
	background-color: #007BFF;
	color: white;
}

.timeline-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -50%;
	width: 100%;
	height: 4px;
	background-color: #ddd;
	z-index: -1;
}

.timeline-step.active ~ .timeline-step span {
	background-color: #ddd;
	color: #555;
}

/* Form box */
.mypw-container {
    max-width: 400px;
    margin: 40px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.mypw-container h1 {
    color: #007BFF;
    font-size: 1.8em;
    margin-bottom: 20px;
}

.mypw-container label {
    display: block;
    text-align: left;
    font-weight: bold;
    margin-bottom: 5px;
}

.mypw-container input[type="email"],
.mypw-container input[type="password"] {
    width: calc(100% - 20px); /* 20px smaller width */
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1.1em;
    display: block;
    margin-left: auto; /* Center the fields */
    margin-right: auto; /* Center the fields */
}




/* Plans Styles*/

.plan-box, .details-form {
	flex: 1;
}

.plan-box {
	background-color: #fff;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 400px;
	margin:0 10px;
}

.plan-box h2 {
	font-size: 2em;
	color: #007BFF;
	margin-bottom: 15px;
}

.plan-box p {
	font-size: 1.1em;
	color: #555;
	margin-bottom: 20px;
}

.plan-price {
	text-align: center;
	line-height: 1;
	margin-bottom: 20px;
}

.plan-price .from {
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 5px;
}

.plan-price .currency {
	font-size: 1.5em;
	vertical-align: top;
	margin-right: 2px;
	margin-top: 0.3em;
}

.plan-price .amount {
	font-size: 3em;
	font-weight: bold;
	color: black;
	line-height: 1;
}

.plan-price .details {
	font-size: 1.2em;
	line-height: 1.2em;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: -3px;
}

.plan-price .details .decimals {
	font-size: 0.9em;
}

.plan-price .details .per {
	color: #666;
	font-size: 0.9em;
}

.details-form {
	background-color: #fff;
	padding: 60px 50px 50px 50px;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	text-align: left;
	max-width: 470px;
}

.details-form h1 {
	font-size: 2em;
	font-weight: bold;
	color: #007BFF;
	margin-bottom: 15px;
}

.details-form label {
	font-size: 1.1em;
	margin-bottom: 10px;
	display: block;
}

.details-form input[type="text"],
.details-form input[type="email"],
.details-form input[type="tel"] {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 1.1em;
}

.details-form input[type="checkbox"] {
	margin-right: 10px;
	vertical-align: middle;
}

.details-form .checkbox-group {
	margin-bottom: 20px;
	display: flex;
	align-items: flex-start;
}

.details-form .checkbox-group label {
	display: inline-block;
	vertical-align: middle;
	font-size: 0.9em;
	line-height: 1.4em;
}

.details-form button {
	width: 100%;
	padding: 10px;
	font-size: 1.1em;
	color: white;
	background-color: #007BFF;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.details-form button:hover {
	background-color: #0056b3;
}

.subscription-image {
	max-width: 600px;
	display: flex;
	align-items: flex-start;
}

.subscription-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Terms and Conditions at the bottom of the page */
.terms-container {
	max-width: 1200px;
	margin: 100px auto 40px auto;
	padding: 0 300px;
	font-size: 0.75em;
	color: #555;
	text-align: center;
}

.terms-container a {
	color: #007BFF;
	text-decoration: none;
}

.terms-container a:hover {
	text-decoration: underline;
}

.content-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.content-container h1 {
    font-size: 2.5em;
    font-weight: bold;
    color: #333;
    margin-top: 20px;
}

.content-container h2 {
    font-size: 1.5em;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #007BFF;
}

.content-header {
    margin-bottom: 30px;
    text-align: center;
}

.content-header h1 {
    font-size: 2.5em;
    font-weight: bold;
    color: #333;
    margin-top: 20px;
}

.contact-section {
    padding: 20px;
    text-align: left;
    font-size: 1em;
    line-height: 1.6;
}

.contact-section h2 {
    font-size: 1.5em;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #007BFF;
}

.contact-section p {
    margin-bottom: 20px;
}

.contact-section a {
    color: #007BFF;
    text-decoration: none;
}

.contact-section a:hover {
    text-decoration: underline;
}

.contact-form {
    margin-top: 20px;
}

.container-login {
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* disclaimer */

.content-header {
    margin-bottom: 30px;
    text-align: center;
}

.content-header h1 {
    font-size: 2.5em;
    font-weight: bold;
    color: #333;
    margin-top: 20px;
}

.privacy-section {
    padding: 20px;
    text-align: left;
    font-size: 1em;
    line-height: 1.6;
}

.privacy-section h2 {
    font-size: 1.5em;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #007BFF;
}

.privacy-section p {
    margin-bottom: 20px;
}

.privacy-section ul {
    list-style-type: disc;
    margin-left: 20px;
}

.privacy-summary {
    font-size: 0.8em;
    color: #555;
    margin-top: 30px;
    text-align: center;
}

.privacy-summary a {
    color: #007BFF;
    text-decoration: none;
}

.privacy-summary a:hover {
    text-decoration: underline;
}


/* Payment form and promo code section */
.payment-form {
	flex: 1;
	margin-left: 40px;
	padding: 20px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.payment-form h2 {
	font-size: 1.8em;
	color: #007BFF;
	margin-bottom: 20px;
}

.payment-form label {
	display: block;
	text-align: left;
	font-weight: bold;
	margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="number"] {
	width: calc(100% - 20px);
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 1.1em;
}

#card-element {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	margin-bottom: 20px;
}

#card-errors {
	color: red;
	font-size: 0.9em;
}

input[type="email"],
input[type="password"] {
	width: calc(100% - 20px); /* 20px smaller width */
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 1.1em;
	display: block;
	
}

button {
/*	width: 100%; */
	padding: 10px;
	font-size: 1.1em;
	color: white;
	background-color: #007BFF;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}
.err-nrr-cell {
    text-align: center !important; 
    vertical-align: middle !important;
}

button:hover {
	background-color: #0056b3;
}

/* Promo Code Section */
.promo-code-section {
	margin-top: 20px;
}

.promo-code-section input {
	width: calc(100% - 20px);
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 1.1em;
}

.promo-code-section button {
	width: 100%;
	padding: 10px;
	background-color: #28a745;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.promo-code-section button:hover {
	background-color: #218838;
}

.promo-code-section #promo-code-error {
	color: red;
	display: none;
}

.promo-code-section #promo-code-success {
	color: green;
	display: none;
}

.page-title-container {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
}

.page-title-container h1 {
    font-size: 2.5em;
    color: #007BFF;
    font-weight: bold;
}


/* Smaller logos and center aligned */
.card-logos {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

.card-logos img {
	width: 30px;
	margin-right: 10px;
}

.stripe-powered {
	text-align: center;
	font-size: 0.8em;
	color: #666;
}

.stripe-powered a {
	color: #666;
	text-decoration: none;
}

.stripe-powered a:hover {
	text-decoration: underline;
}

/* Section styling */
.section {
    max-width: 1200px;
    margin: 60px auto;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.section img {
    max-width: 100%;
    height: auto;
}

.intro {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 60px;
}
.intro img {
    max-width: 45%; /* Ensures the image width matches the other sections */
    height: auto;
    border-radius: 10px;
}

.intro-text {
    max-width: 50%;
    padding-right: 20px;
}

.large-heading {
    font-size: 36px;
    font-weight: bold;
}

.paragraph {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}

.content-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 40px 0;
}

.content-section .text {
    max-width: 45%;
}

.content-section img {
    max-width: 45%;
}

/* Pricing */

.pricing-container {
    max-width: 1200px;
    margin: 40px auto;
    text-align: center;
}

.pricing-header {
    margin-bottom: 30px;
}

.pricing-header h1 {
    font-size: 2.5em;
    font-weight: bold;
    color: #333;
}

.plans {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.plan {
    flex: 1;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.plan:hover {
    transform: translateY(-5px);
}

.plan h2 {
    font-size: 2em;
    color: #007BFF;
    margin-bottom: 15px;
}

.plan p {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 20px;
    text-align: center;
}

.plan-price {
    text-align: center;
    line-height: 1;
    margin-bottom: 20px;
}

.plan-price .from {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 5px;
}

.plan-price .currency {
    font-size: 1.5em;
    vertical-align: top;
    margin-right: 2px;
    margin-top: 0.3em;
}

.plan-price .amount {
    font-size: 3em;
    font-weight: bold;
    color: black;
    line-height: 1;
}

.plan-price .details {
    font-size: 1.2em;
    line-height: 1.2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -3px;
}

.plan-price .details .decimals {
    font-size: 0.9em;
}

.plan-price .details .per {
    color: #666;
    font-size: 0.9em;
}

.features {
    text-align: left;
    font-size: 0.95em;
    margin-top: 20px;
    list-style: none;
    padding: 0;
}

.features li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
    text-align: left;
    flex-wrap: wrap;
}

.features li:before {
    content: '✓';
    color: #007BFF;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2em;
}

.features li b {
    font-weight: bold;
    margin-right: 5px;
    flex-basis: 100%;
}




.purchase-button {
    margin-top: 20px;
    display: inline-block;
    font-size: 1em;
    color: #fff;
    background-color: #007BFF;
    border: 1px solid #007BFF;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.purchase-button:hover {
    background-color: #0056b3;
}


/* Base styles remain the same */

/* Responsive styles for devices with screen width of 768px or less (tablets and phones) */
	/* Ensure the section and its contents adjust properly */

@media (max-width: 768px) {
	.header-info {
        position: absolute;
        left: 50%; /* Center horizontally */
        transform: translateX(130%); /* Adjust to true center */
        font-size: 12px; /* Adjust text size for mobile */
        white-space: nowrap; /* Prevent wrapping */
        color: black; /* Ensure visibility */
        z-index: 1; /* Keep it visible above other elements */
    }
        .header-info span:first-child, /* Hide the first <span> */
        .header-info span:nth-child(2) { /* Hide the second <span> (the pipe) */
            display: none;
        }
	
	header {
		flex-direction: row; /* Keep logo and hamburger in a row */
		align-items: center;
	}

	header img {
		height: auto;
		max-width: 80%; /* Fit logo to screen width */
		flex-shrink: 2;
	}

	.hamburger {
		display: flex; /* Show hamburger icon for small screens */
		margin-left: auto; /* Push hamburger to the right */
	}

	.header-buttons {
		display: none; /* Hide by default on small screens */
		flex-direction: column; /* Stack buttons vertically */
		width: 100%;
		position: absolute; /* Dropdown-style menu */
		top: 50px; /* Position below the header */
		left: 0;
		z-index: 1000; /* Ensure it appears above other content */
		background-color: white; /* Background for dropdown */
		padding: 10px 0; /* Add spacing for dropdown buttons */
	}

	.header-buttons.active {
		display: flex; /* Show when active */
	}

	.header-buttons button {
		width: 100%;
		text-align: center;
		margin: 5px 0; /* Add spacing between buttons */
	}

	.promo-video .video-container {
        max-width: 600px; /* Adjust max width for smaller screens */
        width: 100%;
        padding-bottom: 44%; /* Adjusted aspect ratio for a shorter height */
        height: 0;
        margin: 0 auto;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

	/* Adjust hero section for smaller screens */
	.hero-section {
		flex-direction: column;
		text-align: center;
	}

	.hero-text, .hero-image {
		max-width: 100%;
		padding: 0;
	}

	.hero-text h1 {
		font-size: 2em;
	}

	.hero-text p {
		font-size: 1em;
	}

	.feature-item {
		flex-basis: 100%;
		height: auto;
		margin-bottom: 20px;
	}

	.additional-feature-boxes {
		grid-template-columns: 1fr;
	}

	.intro, .content-section {
		flex-direction: column; /* Stack content vertically */
	}

	.intro-text, .text {
		max-width: 100%; /* Make the text take up full width */
		padding-right: 0; /* Remove extra padding */
	}

	.intro img, .content-section img {
		max-width: 100%; /* Make images take up full width */
		margin-top: 20px; /* Add spacing for readability */
	}

	.large-heading {
		font-size: 28px; /* Adjust heading size for smaller screens */
	}

	.paragraph {
		font-size: 14px; /* Adjust paragraph font size for readability on small screens */
	}

	/* Footer buttons adjustments */
	.footer-buttons {
		flex-direction: column;
		gap: 10px;
	}

	.footer-buttons button {
		width: 100%;
		text-align: center;
	}
	/* General styles for both pages */


    /* Styles for swms_promo_email.html */
    .subscription-image, 
    .plan-box {
        display: none; /* Hide these elements */
    }

    .subscription-form {
        margin-top: 20px; /* Adjust margin for better spacing */
    }

    .subscription-form form {
        width: 100%; /* Make the form full width */
        padding: 10px; /* Add some padding */
    }

    .subscription-form input,
    .subscription-form button {
        width: 100%; /* Make input and button full width */
        font-size: 16px; /* Improve readability */
    }

    /* Styles for swms_promo_enter_details.html */
    .subscription-image, 
    .plan-box {
        display: none; /* Hide these elements */
    }

    .details-form {
        margin-top: 20px; /* Adjust spacing for better alignment */
    }

    .details-form form {
        width: 100%; /* Make the form full width */
        padding: 10px; /* Add some padding */
    }

    .details-form input,
    .details-form button {
        width: 100%; /* Make input and button full width */
        font-size: 16px; /* Improve readability */
    }

    .container {
        text-align: center; /* Center the form for better presentation */
    }
	.details-form {
		background-color: #fff;
		padding: 60px 50px 40px 10px;
		border: 1px solid #ddd;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		text-align: left;
		max-width: 470px;
	}
	.checkbox-group {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start; /* Align labels and checkboxes to the left */
        padding: 10px 0; /* Add some spacing around the group */
        margin: 0; /* Reset any external margins */
        width: 100%; /* Ensure the group spans the full width */
        box-sizing: border-box; /* Include padding in width calculation */
    }

    .checkbox-group input[type="checkbox"] {
        margin-right: 10px; /* Add spacing between checkbox and label */
    }

    .checkbox-group label {
        font-size: 14px; /* Adjust label size for readability on smaller screens */
        line-height: 1.5; /* Improve spacing between lines */
        width: 100%; /* Ensure labels wrap properly within the container */
    }
	.plan-box {
		display: none; /* Hide the left plan box */
	}
	
	.payment-form {
		margin-top: 20px; /* Add spacing at the top */
		width: 100%; /* Ensure full width responsiveness */
		max-width: 95%; /* Limit maximum width for proper centering */
		padding: 15px; /* Add internal padding for spacing */
		box-sizing: border-box; /* Include padding and borders in the width */
		background-color: #fff; /* Ensure a clean background */
		border-radius: 8px; /* Add rounded corners */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
		margin-left: auto; /* Center the payment-form */
		margin-right: auto; /* Center the payment-form */
	}
	
	.container {
		display: flex;
		flex-direction: column; /* Stack items vertically */
		align-items: center; /* Center align all child elements */
		width: 100%; /* Full width for the container */
		padding: 0 10px; /* Add padding on left and right */
		box-sizing: border-box; /* Include padding in width */
	}
	.terms-container {
        margin-top: 20px; /* Add space above the terms container */
        padding: 10px; /* Add internal padding for readability */
        width: 90%; /* Ensure the container is responsive */
        max-width: 400px; /* Optional: Limit the width for consistency */
        box-sizing: border-box; /* Include padding in width */
        background-color: #f9f9f9; /* Optional: Add a light background for contrast */
        border-radius: 8px; /* Add rounded corners */
        text-align: left; /* Align text to the left */
        font-size: 14px; /* Adjust font size for smaller screens */
        line-height: 1.6; /* Improve readability */
        margin-left: auto; /* Center the container horizontally */
        margin-right: auto; /* Center the container horizontally */
    }
	.plans {
        display: flex;
        flex-direction: column; /* Stack the plans vertically */
        gap: 20px; /* Add spacing between plan boxes */
        align-items: center; /* Center align each plan box */
    }

    .plan {
        width: 90%; /* Reduce width for a cascading effect */
        max-width: 350px; /* Limit the maximum width */
        padding: 15px; /* Add padding inside each box */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for a cascading appearance */
        border-radius: 8px; /* Add rounded corners */
        background-color: #fff; /* Ensure a clean background */
        box-sizing: border-box; /* Include padding and border in the width */
        transform: translateY(10px); /* Slightly offset each box for cascading effect */
        transition: transform 0.3s ease; /* Smooth animation effect */
    }

    .plan:nth-child(2) {
        transform: translateY(20px); /* Offset second box slightly more */
    }

    .plan:nth-child(3) {
        transform: translateY(30px); /* Offset third box the most */
    }

    .plan:hover {
        transform: translateY(0); /* Bring hovered box to the same level */
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
    }
    .button-container {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center align the buttons */
        gap: 15px; /* Add spacing between buttons */
        padding: 10px; /* Add padding around the container */
    }

    .button-cell {
        width: 100%; /* Make the button cell take the full width of the container */
        max-width: 350px; /* Optional: Set a maximum width for buttons */
        box-sizing: border-box; /* Include padding and border in width */
    }

    .button-cell button {
        width: 100%; /* Make the button fill the width of the cell */
        font-size: 14px; /* Adjust font size for better readability */
        padding: 10px; /* Add padding for comfortable tap zones */
        background-color: #007BFF; /* Adjust button color as needed */
        color: #fff; /* Ensure text is readable on the button */
        border: none; /* Remove borders */
        border-radius: 8px; /* Add rounded corners for better aesthetics */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
        text-align: center; /* Center-align button text */
        cursor: pointer; /* Indicate clickable buttons */
    }

    .button-cell button:hover {
        background-color: #0056b3; /* Change button color on hover */
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
    }
    .swms-list-container {
        padding: 15px;
        margin: 10px auto;
        width: 100%; /* Full width for mobile */
        max-width: 100%; /* Remove the desktop max-width */
        border-radius: 6px; /* Smaller border radius */
    }

    .swms-list {
        width: 100%; /* Full width for the table on mobile */
    }

    .swms-list th, .swms-list td {
        padding: 10px; /* Smaller padding for table cells */
        font-size: 12px; /* Adjust font size for smaller screens */
    }

    .action-buttons {
        flex-direction: column; /* Stack buttons vertically on mobile */
        gap: 5px; /* Reduce gap between buttons */
    }

    .action-buttons button {
        padding: 8px; /* Smaller padding for buttons */
        font-size: 12px; /* Smaller font size for buttons */
    }
    .hero-buttons-container {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center buttons horizontally */
        gap: 30px; /* Add 30px spacing between buttons */
    }

    .hero-buttons-container .hero-button {
        width: 80%; /* Optional: Adjust width for better usability */
    }
	
	
    .signature-table-container {
        overflow-x: auto;
        width: 100%;
    }
    
    .signature-table {
        width: 900px; /* or any fixed width needed */
        max-width: none;
    }

	
}


	


/* Further responsive adjustments for very small devices (max width 480px) */
@media (max-width: 480px) {
    header img {
        max-width: 70%;
    }

    .header-buttons button {
        font-size: 12px; /* Reduce button font size */
        padding: 8px; /* Reduce button padding */
    }
	.promo-video .video-container {
        max-width: 360px; /* Adjust max width for smaller screens */
        width: 100%;
        padding-bottom: 44%; /* Adjusted aspect ratio for a shorter height */
        height: 0;
        margin: 0 auto;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
	/* General styles for both pages */

/* Hide elements and enhance layout on small screens (like iPhones) */

    /* Styles for sims_promo_email.html */
    .subscription-image, 
    .plan-box {
        display: none; /* Hide these elements */
    }

    .subscription-form {
        margin-top: 20px; /* Adjust margin for better spacing */
    }

    .subscription-form form {
        width: 100%; /* Make the form full width */
        padding: 10px; /* Add some padding */
    }

    .subscription-form input,
    .subscription-form button {
        width: 100%; /* Make input and button full width */
        font-size: 16px; /* Improve readability */
    }

    /* Styles for swms_promo_enter_details.html */
    .subscription-image, 
    .plan-box {
        display: none; /* Hide these elements */
    }

    .details-form {
        margin-top: 20px; /* Adjust spacing for better alignment */
    }

    .details-form form {
        width: 100%; /* Make the form full width */
        padding: 10px; /* Add some padding */
    }

    .details-form input,
    .details-form button {
        width: 100%; /* Make input and button full width */
        font-size: 16px; /* Improve readability */
    }

    .container {
        text-align: center; /* Center the form for better presentation */
    }
	.details-form {
		background-color: #fff;
		padding: 60px 50px 40px 10px;
		border: 1px solid #ddd;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		text-align: left;
		max-width: 470px;
	}
	.plan-box {
		display: none; /* Hide the left plan box */
	}
	
	.payment-form {
		margin-top: 20px; /* Add spacing at the top */
		width: 100%; /* Ensure full width responsiveness */
		max-width: 95%; /* Limit maximum width for proper centering */
		padding: 15px; /* Add internal padding for spacing */
		box-sizing: border-box; /* Include padding and borders in the width */
		background-color: #fff; /* Ensure a clean background */
		border-radius: 8px; /* Add rounded corners */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
		margin-left: auto; /* Center the payment-form */
		margin-right: auto; /* Center the payment-form */
	}
	
	.container {
		display: flex;
		flex-direction: column; /* Stack items vertically */
		align-items: center; /* Center align all child elements */
		width: 100%; /* Full width for the container */
		padding: 0 10px; /* Add padding on left and right */
		box-sizing: border-box; /* Include padding in width */
	}
	.terms-container {
        margin-top: 20px; /* Add spacing above the terms section */
        padding: 10px; /* Add internal padding for better readability */
        background-color: #f9f9f9; /* Optional: Light background for contrast */
        border-radius: 8px; /* Add rounded corners */
        width: 90%; /* Limit width to fit within the screen */
        box-sizing: border-box; /* Include padding in the width */
        text-align: center; /* Center-align the text */
        font-size: 14px; /* Adjust font size for smaller screens */
        line-height: 1.5; /* Improve readability */
        margin-left: auto; /* Center horizontally */
        margin-right: auto; /* Center horizontally */
    }
	.plans {
        display: flex;
        flex-direction: column; /* Stack the plans vertically */
        gap: 20px; /* Add spacing between plan boxes */
        align-items: center; /* Center align each plan box */
    }

    .plan {
        width: 90%; /* Reduce width for a cascading effect */
        max-width: 350px; /* Limit the maximum width */
        padding: 15px; /* Add padding inside each box */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for a cascading appearance */
        border-radius: 8px; /* Add rounded corners */
        background-color: #fff; /* Ensure a clean background */
        box-sizing: border-box; /* Include padding and border in the width */
        transform: translateY(10px); /* Slightly offset each box for cascading effect */
        transition: transform 0.3s ease; /* Smooth animation effect */
    }

    .plan:nth-child(2) {
        transform: translateY(20px); /* Offset second box slightly more */
    }

    .plan:nth-child(3) {
        transform: translateY(30px); /* Offset third box the most */
    }

    .plan:hover {
        transform: translateY(0); /* Bring hovered box to the same level */
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
    }
    .button-container {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center align the buttons */
        gap: 15px; /* Add spacing between buttons */
        padding: 10px; /* Add padding around the container */
    }

    .button-cell {
        width: 100%; /* Make the button cell take the full width of the container */
        max-width: 350px; /* Optional: Set a maximum width for buttons */
        box-sizing: border-box; /* Include padding and border in width */
    }

    .button-cell button {
        width: 100%; /* Make the button fill the width of the cell */
        font-size: 14px; /* Adjust font size for better readability */
        padding: 10px; /* Add padding for comfortable tap zones */
        background-color: #007BFF; /* Adjust button color as needed */
        color: #fff; /* Ensure text is readable on the button */
        border: none; /* Remove borders */
        border-radius: 8px; /* Add rounded corners for better aesthetics */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
        text-align: center; /* Center-align button text */
        cursor: pointer; /* Indicate clickable buttons */
    }

    .button-cell button:hover {
        background-color: #0056b3; /* Change button color on hover */
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
    }
    .swms-list-container {
        padding: 15px;
        margin: 10px auto;
        width: 100%; /* Full width for mobile */
        max-width: 100%; /* Remove the desktop max-width */
        border-radius: 6px; /* Smaller border radius */
    }

    .swms-list {
        width: 100%; /* Full width for the table on mobile */
    }

    .swms-list th, .swms-list td {
        padding: 10px; /* Smaller padding for table cells */
        font-size: 12px; /* Adjust font size for smaller screens */
    }

    .action-buttons {
        flex-direction: column; /* Stack buttons vertically on mobile */
        gap: 5px; /* Reduce gap between buttons */
    }

    .action-buttons button {
        padding: 8px; /* Smaller padding for buttons */
        font-size: 12px; /* Smaller font size for buttons */
    }
    .hero-buttons-container {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center buttons horizontally */
        gap: 30px; /* Add 30px spacing between buttons */
    }

    .hero-buttons-container .hero-button {
        width: 80%; /* Optional: Adjust width for better usability */
    }
    .signature-table-container {
        overflow-x: auto;
        width: 100%;
    }
    
    .signature-table {
        width: 900px; /* or any fixed width needed */
        max-width: none;
    }
}

.form-flash-messages {
    margin: 20px 0; /* Add spacing above the submit button */
    text-align: center; /* Center the messages */
}

.alert {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    border-radius: 5px;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}



.highlight-h3 {
    font-size: inherit;
    font-weight: bold; /* Adjust as necessary to match your global h3 styling */
    color: inherit; /* Ensures it keeps the color */
}

.form-group-row {
	display: flex;
	justify-content: flex-start; /* Align items to the start */
	margin-bottom: 20px;
	gap: 0px; /* Adjust the gap between the form groups */
	flex-wrap: nowrap; /* Prevent wrapping to the next line */
}

.form-group {
	flex: 0 0 18%; /* Adjust width to fit more elements on the same line */
	display: flex;
	flex-direction: column;
}

/* Adjust widths for each specific input */
#person_responsible_for_swms_reveiw,
#date_swms_to_be_reveiwed,
#principal_contractor,
#pc_email,
#date_swms_provided_to_pc {
	width: 100%;
}
/* Adjustments specifically for the first row */
.form-group-row.first-row {
	display: flex;
	justify-content: space-between;
	gap: 0px; /* Adjust gap as needed */
	flex-wrap: nowrap; /* Prevent inputs from wrapping to the next line */
}

.form-group.first-row-item {
	flex: 0 0 22%; /* Adjust percentage values for each input width */
}


/* Adjust widths for each specific input */
#works_supervisor {
	width: 100%;
}

#supervisor_phone {
	width: 100%;
}

#supervisor_email {
	width: 100%;
}

#date_swms_to_be_reveiwed {
	width: 100%;
}


.form-group-inline {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	flex: 1;
}

.form-group label,
.form-group-inline label {
	margin-bottom: 5px;
	font-weight: bold;
}

.form-group input,
.form-group textarea,
.form-group-inline input {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 18px;
}
/* Set specific widths for each input */
#works_supervisor {
	width: 250px; /* Adjust as needed */
}

#supervisor_phone {
	width: 250px; /* Adjust as needed */
}

#supervisor_email {
	width: 250px; /* Adjust as needed */
}

#direct_employer {
	width: 250px; /* Adjust as needed */
}

#person_responsible_for_swms_reveiw {
	width: 260px; /* Adjust as needed */
}

#date_swms_to_be_reveiwed {
	width: 150px; /* Adjust as needed */
}

#principal_contractor {
	width: 190px; /* Adjust as needed */
}

#pc_email {
	width: 200px; /* Adjust as needed */
}

#date_swms_provided_to_pc {
	width: 190px; /* Adjust as needed */
}

#site_locations {
	width: 80%; /* Full width of the container */
}

.form-group input,
.form-group textarea,
.form-group-inline input {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 18px;
	height: 18px; /* Set a fixed height for all input fields */
}

/* Ensure date inputs match the other input fields */
.form-group input[type="date"] {
	height: 18px; /* Same height as the text inputs */
	line-height: normal; /* Ensure vertical alignment */
}


h2 {
	font-size: 150%;
	margin-bottom: 20px;
}

.button-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 20px;
}

.container-dashboard h1 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 2.5em;
    color: #333;
}

.container-dashboard .button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
}

.container-dashboard .button-cell {
    flex: 1 1 30%; /* Each button takes up about 30% of the row */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.container-dashboard .button-cell button {
    width: 100%;
    padding: 15px 20px;
    background-color: #007BFF;
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    min-height: 70px; /* Ensures all buttons are of minimum height */
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}


.genswms-container {
    flex-wrap: wrap;
    display: block;
	flex-direction: column;
}

.genswms-container .form-group-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0px;
    flex-wrap: wrap;
/*    gap: 100px; */
}

.genswms-container .form-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.genswms-container .form-group-inline {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    flex: 1;
}

.genswms-container .form-group label,
.genswms-container .form-group-inline label {
    margin-bottom: 5px;
    font-weight: bold;
}


.genswms-container .form-group input,
.genswms-container .form-group textarea,
.genswms-container .form-group-inline input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 18px;
}

.genswms-container h2 {
    font-size: 150%;
    margin-bottom: 20px;
}

.genswms-container .button-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}


.risk-button {
	padding: 10px;
	border: none;
	border-radius: 4px;
	background-color: #007BFF;
	color: white;
	cursor: pointer;
	text-align: center;
	font-size: 20px;
}


.risk-button.selected {
	background-color: orange;
	color: black;
}

.image-container {
	text-align: center;
	    margin: 5px auto;
}

.image-container img {
	width: 10%;
	height: auto;
}



.risk-table,
.risk-table-container,
.signature-table,
.signature-table-container {
	width: 100%; /* Make the table take full width */
	border-collapse: collapse;
	margin-top: 20px;
}

.risk-table th,
.signature-table th {
	background-color: lightgrey;
}

.risk-table th,
.risk-table td,
.signature-table th,
.signature-table td {
	border: 1px solid #ccc;
	text-align: center;
	padding: 12px;
}

.risk-table .swms-title {
	background-color: orange;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	padding: 15px;

	/* 🔧 Add these for responsive wrapping */
	white-space: normal;          /* allow wrapping */
	word-break: break-word;       /* break long words */
	overflow-wrap: break-word;    /* better wrapping on all browsers */
	box-sizing: border-box;       /* include padding in width */
	width: 100%;                  /* force it to stay within the table */
}
.risk-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
	table-layout: fixed; /* <-- ADD THIS */
}


.signature-table input,
.risk-table input {
	width: 100%;
	padding: 0px;
	border: 1px solid #ccc;
	border-radius: 4px;
	text-align: center;
	font-size: 20px;
}

.submit-container {
	text-align: center;
	margin-top: 20px;
	margin: 0 auto;
}

.submit-container button {
	padding: 15px 30px;
	font-size: 20px;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	width: 200px;
    margin: 10px;
}

.save-png-button {
	background-color: blue;
}

.page-break {
	page-break-before: always;
}

/* Styles for the colored boxes with padding */
.table-container {
    width: 100%;
    margin: 20px auto;
}

.table-content {
	border: 3px solid black;
	border-radius: 8px;
	padding: 20px;
	color: white;
	font-weight: bold;
	text-align: left;
	margin: 0 auto;
    width: 80%;
}

.table-red {
	background-color: #007BFF;;
}

.table-orange {
	background-color: #007BFF;;
}

.table-green {
	background-color: #007BFF;;
}

/* Spinner Styles */
.spinner-overlay {
	display: none; /* Hidden by default */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
	z-index: 9999; /* Make sure it appears above other elements */
	justify-content: center;
	align-items: center;
}

.spinner {
    width: 300px; /* Adjust to fit your GIF size */
    height: auto;
    border: none; /* Remove border */
    border-radius: 0; /* No need for a circular spinner */
}


@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
/* Centered flash message styling */
.flash-message {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #d4edda;
	padding: 20px;
	border: 1px solid #c3e6cb;
	border-radius: 8px;
	z-index: 10000;
	text-align: center;
	font-size: 18px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.flash-message button {
	margin-top: 10px;
	padding: 5px 10px;
	font-size: 16px;
	cursor: pointer;
}


/* Add the container styles from dashboard.html */
.container-dashboard {
    display: block;
}

.pricing-content-container {
	flex-direction: column;
}

::placeholder {
	color: #cccccc; /* Light grey color for the placeholder */
	opacity: 1; /* Ensure the color applies across different browsers */
	font-style: italic; /* Optional: make the placeholder text italic */
}

:-ms-input-placeholder { /* For Internet Explorer 10-11 */
	color: #cccccc;
}

::-ms-input-placeholder { /* For Microsoft Edge */
	color: #cccccc;
}

.forgot-password {
	text-align: right;
	margin-top: -10px;
}

.forgot-password a {
	color: #007BFF;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s;
}

.forgot-password a:hover {
	color: #0056b3;
}

.swms-list-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center align all child elements */
    width: 100%; /* Full width for the container */
    padding: 0 10px; /* Add padding on left and right */
    box-sizing: border-box; /* Include padding in width */
    display: flex;
	max-width: 1240px;
	margin: 20px auto;
	padding-top: 5px;
	padding: 20px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	
}
.swms-list {
    width: 80%; /* Adjust table width as needed */
    border-collapse: collapse;
    margin: auto;
}
.swms-list th, .swms-list td {
    padding: 15px;
    border: 1px solid #ddd;
    text-align: center;
    vertical-align: middle;
}
.swms-list th {
    background-color: #f2f2f2;
}
.action-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.action-buttons button {
    padding: 10px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.action-buttons .download {
    background-color: green;
    color: white;
}
.action-buttons .delete {
    background-color: red;
    color: white;
}
.action-buttons .rename {
    background-color: blue;
    color: white;
}
.rename-form {
    display: none;
    margin-top: 10px;
}
.rename-form input {
    padding: 8px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.rename-form button {
    padding: 8px;
    font-size: 14px;
    border-radius: 4px;
    background-color: blue;
    color: white;
    cursor: pointer;
}


/* Admin Main Content Styles */
.container-admin {
    max-width: 1800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.container-admin table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.container-admin th, .container-admin td {
    padding: 0px;
    border: 1px solid #ddd;
    text-align: left;
}

.container-admin th {
    background-color: #f4f4f4;
}

.container-admin h1 {
    text-align: center;
    margin-bottom: 20px;
}




/* Updated CSS to match your design */

.security-question-table {
	width: 40%; /* Reduced width to 50% */
	margin-top: 10px;
	margin-left: 0; /* Align table to the left */
	border-collapse: collapse; /* Ensures borders are not double-lined */
	border: 1px solid #ddd; /* Add a border to the entire table */
}

.security-question-table td {
	padding: 10px;
	vertical-align: middle;
	border: 1px solid #ddd; /* Add border to all cells */
}

.option-label {
	width: 10%; /* Adjusted percentage after table size change */
	font-weight: bold;
	background-color: #f0f0f0;
	text-align: center;
	vertical-align: middle;
}

.option-answer {
	width: 70%; /* Adjusted width for the answer text */
	background-color: #e0f7fa;
	padding: 10px;
	vertical-align: middle;
}

.option-select {
	width: 10%; /* Adjusted width for the radio buttons */
	background-color: #f0f0f0;
	text-align: center;
	vertical-align: middle;
}

input[type="radio"] {
	transform: scale(1.2);
}

.option-answer:hover {
	background-color: #d0eff3;
}



.footer-container {
    max-width: 1240px;
    margin: 40px auto;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 20px 0;
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.footer-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.footer-buttons button {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.footer-buttons button:hover {
    background-color: lightgrey;
    color: blue;
    border: 1px solid lightgrey;
}

.footer-copy {
    text-align: center;
    font-size: 0.9em;
    color: #666;
}

.footer-copy p {
    margin: 0;
}

/* General table styles */
table {
    border-collapse: collapse;
    width: 100%;
}

/* Prevent rows from breaking across pages */
tr {
    page-break-inside: avoid; /* Prevent row splits inside tables */
}

/* Ensure individual cells are not split */
td, th {
    page-break-inside: avoid; /* Prevent cell splitting */
    page-break-before: auto; /* Prevent unnecessary page breaks before cells */
}

/* Specific rules for signature and risk tables */
.signature-table tr, 
.risk-table tr {
    page-break-inside: avoid; /* Prevent rows in signature and risk tables from being split */
}

/* Additional styles for better presentation in the PDF */
.signature-table td, 
.risk-table td {
    padding: 10px; /* Add padding for better readability */
    text-align: left; /* Align text to the left for better structure */
}

.signature-table th, 
.risk-table th {
    font-weight: bold; /* Bold headers for clarity */
    text-align: center; /* Center-align table headers */
}

/* Adjust table headers for signature and risk tables */
.signature-table th, 
.risk-table th {
    background-color: #f2f2f2; /* Light gray background for headers */
}
.ppe-table-container td {
    text-align: center !important;  
    vertical-align: middle !important;
}

.ppe-table-container td img {
    width: 75px !important;
    height: 115px !important;
    display: block !important;
    margin: auto !important;
}

.generate-swms-button {
    display: block;
    margin: 20px auto;
    padding: 10px 100px;
    background-color: #28a745; /* Green color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease;
}

.generate-swms-button:hover {
    background-color: #218838; /* Slightly darker green on hover */
}
.next-button {
    display: block;
    margin: 30px auto 0; /* Add margin on top to separate from other buttons */
    padding: 12px 100px;
    background-color: #28a745; /* Green color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease;
}

.next-button:hover {
    background-color: #218838; /* Slightly darker green on hover */
}