html,
body {
    font-family: "Helvetica Neue", Helvetica, Arial, Roboto, sans-serif;
    color: #000;
    display: flex;
    font-weight: 400;
    font-size: 14px;
    min-height: 100vh;
    flex-direction: column;
    background-color: #fff;

}

header {
    background: #eee;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

footer {
    background: #eee;
    /* padding-bottom: 1.25rem; */
}

footer#footer-widget #footer-bottom {
    text-align: center;
    padding-bottom: 1.25rem;
    padding-top: 1.25rem;
    color: #5f5f5f
}

footer#footer-widget #footer-bottom ul {
    padding-left: 0;
    margin-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    line-height: 2.125rem;
}

footer#footer-widget #footer-bottom ul li {
    display: inline;
    padding: 0 0.625rem;
    white-space: nowrap
}

footer#footer-widget #footer-bottom ul li a {
    color: inherit;
    text-decoration: none;
}

footer#footer-widget #footer-bottom .copyright {
    font-size: 0.875rem;
    margin-bottom: 0;
}

footer#footer-widget #footer-bottom .copyright span.rights {
    white-space: nowrap
}


.min-vh-80 {
    min-height: 80vh !important;
}

.costco-logo {
    max-width: 150px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img,
svg {
    vertical-align: sub !important;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #005DAB;
    --bs-btn-border-color: #005DAB;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #005DAB;
    --bs-btn-disabled-border-color: #005DAB;
    border-radius: 3px;
    font-size: 16px;
    font-weight: 500;
}

.passkey-container {
    max-width: 510px;
    /* min-width: 510px; */
    margin: 0 auto;
    padding: 0 30px 30px 30px;
    background-color: white;
    /* border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); */
}

.passkey-registrations {
    min-width: 450px;
    text-align: left;
}

@media only screen and (max-device-width : 450px) {
    .passkey-registrations {
        min-width: 350px;
        text-align: left;
    }
}

.h1{
    font-weight: 700;
    font-style: normal;
}

.h2{
    font-weight: 700;
    font-style: normal;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    z-index: 1000;
    padding: 8px;
    background: #000;
    color: #fff;
    text-decoration: none;
}

.skip-link:focus {
    top: 6px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.text-start {
    text-align: left;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    /* border: 1px solid #dee2e6; */
    border-radius: 8px;
    margin-bottom: 15px;
}

.feature-icon {
    margin-right: 12px;
    background-color: #F5F5F5;
    border-radius: 18px;
    border: 2px solid #CCCCCC;
    width: 36px;
    height: 36px;
    padding: 4px;
    flex-shrink: 0;
}

/* Container styling */
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 20px 20px;
    gap: 20px;
    /* Space between images */
}

/* Individual image styling */
.image-container img {
    gap: 20px;
}

/* Wrapper for each image for consistent sizing */
.image-wrapper {
    flex: 1;
    max-width: calc(33.333% - 14px);
}

.accordion-button {
    font-size: 16px;
    font-weight:700;
}

.accordion-item {
    border: 0px;
}

.accordion-header {
    border-top: 1px solid #CCCCCC;
}

.accordion-button:not(.collapsed) {
    color: #343a40;
    background-color: #f8f9fa;
    font-weight: 700;
}

.accordion-button:focus {
    /* border-color: rgba(0, 123, 255, 0.25); */
    /* box-shadow: none; */
    font-weight: 700;
    outline-offset: 2px;
    outline: '2px solid Highlight';
    outline: '2px solid -webkit-focus-ring-color';
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .image-container {
        flex-direction: row;
    }

    .image-wrapper {
        max-width: 100%;
        margin-bottom: 20px;
    }
}

/* Accessibility and Loading Indicators */
/* Screen reader only class - visually hidden but available to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus indicators for keyboard navigation */
*:focus {
    outline-offset: 2px;
    outline: '2px solid Highlight';
    outline: '2px solid -webkit-focus-ring-color';
}

/* Loading spinner */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100px;
    color: #333;
    margin: 15px 0;
}

.spinner-animation {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #3498db;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Modal */

.modal-header {
    border: none !important;
}

.modal-footer {
    border: none !important;
}

.modal-title{
    font-size: 500;
    font-weight: 400;
    color: #333333;
    line-height: 130%;
}

.form-check-input[type=checkbox] {
    outline-color: #e0e0e0;
    border: 2px solid #0060a9;
}

.form-check {
    padding-left: 45px !important;
}

.form-check-label {
    font-size: 16px;
}

.canvas-label {
    font-size: 22px;
    font-weight: 400;
}

.checkbox-feedback {
    color: #C13533;
    font-size: 16px;
    margin-top: 5px;
    display: none;
    padding-left: 25px;
}

.checkbox-error {
    border: 2px solid #C13533 !important;
}

.checkbox-error.form-check-input:focus {
    border: 2px solid #C13533;
    box-shadow: none;
}

.btn-primary {
    background-color: #3071a9;
    border: 0;
    font-size: 1rem;
    padding: 0.625rem 1rem;
    color: #fff;
    /* height: 2.5rem; */
    width: 100%;
    border-radius: 3px;
}

.btn-primary:hover {
    background-color: #2a6293;
}

.btn-secondary {
    padding-top: 0.594rem;
    padding-bottom: 0.594rem;
    display: block;
    background-color: #fff;
    border: 0;
    font-size: 1rem;
    color: #0060a9;
    /* height: 2.5rem; */
    text-align: center;
    width: 100%;
    border: 1px solid;
    border-radius: 3px;
}

.btn-secondary:hover {
    background-color: #d9d9d9;
}

.feedback-message {
    padding: 15px 20px;
    border-radius: 5px;
    margin-bottom: 15px;
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically align items */
    justify-content: space-between; /* Space between content and close button */
    gap: 15px; /* Space between flex items */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.feedback-message.fade-out {
    opacity: 0;
}


.feedback-message {
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.3s ease-in-out;
}

.feedback-content {
    display: flex;
    gap: 10px; /* Space between icon and text */
    flex-grow: 1; /* Allows content to take up available space */
}

.feedback-text {
    flex-grow: 1; /* Allows text to take up remaining space */
    line-height: 1.4;
}

.feedback-icon .icon-error {
    display: inline-block;
    width: 24px;
    height: 24px;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.1244 4.98294H8.87496V12.0907H11.1244V4.98294ZM9.99996 15.6896C10.7618 15.6896 11.3794 15.072 11.3794 14.3102C11.3794 13.5483 10.7618 12.9307 9.99996 12.9307C9.23811 12.9307 8.62052 13.5483 8.62052 14.3102C8.62052 15.072 9.23811 15.6896 9.99996 15.6896ZM9.99996 1.84961C5.39718 1.84961 1.66663 5.58072 1.66663 10.1829C1.66663 14.7857 5.39718 18.5163 9.99996 18.5163C14.6027 18.5163 18.3333 14.7857 18.3333 10.1829C18.3333 5.58072 14.6027 1.84961 9.99996 1.84961ZM9.99996 16.9541C6.2594 16.9541 3.2294 13.9218 3.2294 10.1829C3.2294 6.4435 6.2594 3.41239 9.99996 3.41239C13.74 3.41239 16.7694 6.4435 16.7694 10.1829C16.7694 13.9218 13.74 16.9541 9.99996 16.9541Z' fill='%23333333'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Error messages */

.error-message {
    color: #000;
    background-color: #FDD6D6;
    border: 2px solid #C13533;
    border-radius: 3px;
    padding: 10px;
    margin: 10px 0;
    text-align: left;
}

.success-message {
    color: #000;
    background-color: #DFF0D8;
    border: 2px solid #008000;
    border-radius: 3px;
    padding: 10px;
    margin: 10px 0;
    text-align: left;
}

.feedback-close-button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: inherit; /* Inherit color from parent (.feedback-message) */
    padding: 0;
    margin-left: 10px; /* Space from message text */
    line-height: 1; /* Ensures 'x' is centered vertically */
    flex-shrink: 0; /* Prevents button from shrinking */
}

.feedback-close-button:hover {
    opacity: 0.7;
}

.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.deleting {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}



.help-link {
    position: absolute;
    top: 10px;
    right: 10px;
}

.help-link a {
    color: #005ca9;
    text-decoration: none;
    border: 1px solid #005ca9;
    border-radius: 5px;
    padding: 5px 10px;
}

.help-link a:hover {
    background-color: #f0f8ff;
}

.empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: #6c757d;
}

.table th {
    font-weight: 600;
    color: #495057;
    border-top: none;
}

.btn-delete {
    color: #000;
    /* background-color: rgba(220, 53, 69, 0.1); */
    border: none;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

/* .btn-delete:hover {
    background-color: rgba(220, 53, 69, 0.2);
    color: #dc3545;
} */

.btn-delete.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.list-group {
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.30);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.text-muted {
    color: #333333 !important;
}

.list-row {
    transition: all 0.3s ease;
}

.list-row:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Loading Manager */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.loading-overlay.fade-out {
    opacity: 0;
}

.loading-container {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.loading-message {
    margin-top: 1rem;
    font-weight: 500;
}

button.loading {
    cursor: not-allowed;
    opacity: 0.8;
}

.loading-active {
    overflow: hidden;
}

.spinner-border {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

/* High contrast mode support */
@media (forced-colors: active) {
    .spinner-animation {
        border-color: CanvasText;
        border-top-color: Highlight;
    }

    .error-message {
        border: 1px solid CanvasText;
    }
}