body {
    font-family: Arial, sans-serif;
    background-color: #1e1e1e;
    color: #E8E8E8;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

h1 {
    font-size: 4em; /* Doubled the font size */
    color: #c89a0c; /* Darker shade of ochre yellow */
    margin-top: 40px;
    margin-bottom: 20px;
    position: fixed; /* Fixed at the top of the screen */
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000; /* Ensures it's above other content */
    cursor: pointer; /* Add pointer cursor for clickability */
}

h2 {
    font-size: 2.5em; /* Adjusted font size */
    color: #c89a0c; /* Darker shade of ochre yellow */
    margin-top: 160px; /* Adjust this value based on the actual height of h1 and desired spacing */
    text-align: center; /* Centers text horizontally */
    position: relative; /* or 'absolute' if you're positioning it within a specific container */
    z-index: 1000; /* Ensures it's above other content */
}

#camera-view {
    display: none; /* Hide video element */
}

#mobile-only-message {
    display: none; /* Keep this as is since you toggle display in JavaScript */
    position: fixed; /* Change position to fixed to keep it relative to the viewport */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust the position accurately to the center */
    text-align: center;
}

.btn-camera {
    margin-top: 20px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #c89a0c; /* Darker shade of ochre yellow */
    color: #333; /* Dark text */
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn {
    margin-top: 10px; /* Adjust margin */
    padding: 5px 10px; /* Adjust padding */
    border: none;
    border-radius: 4px;
    background-color: #c89a0c; /* Darker shade of ochre yellow */
    color: #333; /* Dark text */
    font-size: 14px; /* Adjust font size */
    cursor: pointer;
    transition: background-color 0.3s;
    position: fixed; /* Fixed position */
    top: 50px; /* Adjust distance from top */
}

.btn:hover {
    background-color: #a7840a; /* Slightly darker shade on hover */
}

.btn-admin-control {
    margin-top: 10px; /* Adjust margin */
    padding: 5px 10px; /* Adjust padding */
    border: none;
    border-radius: 4px;
    background-color: #c89a0c; /* Darker shade of ochre yellow */
    color: #333; /* Dark text */
    font-size: 18px; /* Adjust font size */
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-admin-control-active {
    background-color: #c89a0c; /* Change color for highlight */
    color: white; /* Change text color if needed */
    /* Add other styling properties as needed */
}

.btn-admin-control-side {
    margin-top: 10px; /* Adjust margin */
    padding: 5px 10px; /* Adjust padding */
    border: none;
    border-radius: 4px;
    background-color: #c89a0c; /* Darker shade of ochre yellow */
    color: #333; /* Dark text */
    font-size: 16px; /* Adjust font size */
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-admin-control-side-active {
    background-color: #c89a0c; /* Change color for highlight */
    color: white; /* Change text color if needed */
    /* Add other styling properties as needed */
}

.admin-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Take the full width of the body */
}

.admin-controls {
    display: flex;
    justify-content: center;
    gap: 20px; /* Add some space between buttons */
    margin-top: 20px; /* Space below the header */
}

.hap-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px; /* Space between items */
    border-radius: 4px; /* Rounded corners */
    background-color: #333; /* Dark color for item background */
    color: #E8E8E8; /* Light color for text */
    margin-top: 20px;
}

.organization-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px; /* Space between items */
    border-radius: 4px; /* Rounded corners */
    background-color: #333; /* Dark color for item background */
    color: #E8E8E8; /* Light color for text */
    margin-top: 20px;
}

.user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px; /* Space between items */
    border-radius: 4px; /* Rounded corners */
    background-color: #333; /* Dark color for item background */
    color: #E8E8E8; /* Light color for text */
    margin-top: 20px;
}

.hap-number, .hap-name, .hap-email {
    margin-right: 10px; /* Space between text elements */
    display: inline-block;
    white-space: nowrap; /* Prevent wrapping */
}

.hap-number {
    width: 20px; /* Fixed width */
}

.hap-name {
    width: 400px; /* Adjust based on your content */
}

.hap-email {
    width: 350px; /* Adjust based on your content */
}

.org-number, .org-name, .org-group {
    margin-right: 10px; /* Space between text elements */
    display: inline-block;
    white-space: nowrap; /* Prevent wrapping */
}

.org-number {
    width: 20px; /* Fixed width */
}

.org-name {
    width: 300px; /* Adjust based on your content */
}

.org-group {
    width: 250px; /* Adjust based on your content */
}

.usr-number, .usr-name, .usr-organization, .usr-group, .usr-email, .usr-rights {
    margin-right: 10px; /* Space between text elements */
    display: inline-block;
    white-space: nowrap; /* Prevent wrapping */
}

.usr-number {
    width: 20px; /* Fixed width */
}

.usr-name {
    width: 200px; /* Adjust based on your content */
}

.usr-organization {
    width: 250px; /* Adjust based on your content */
}

.usr-group {
    width: 200px; /* Adjust based on your content */
}

.usr-email {
    width: 275px; /* Adjust based on your content */
}

.usr-rights {
    width: 100px; /* Adjust based on your content */
}

.edit-btn {
    margin-left: auto; /* Push the button to the right */
    background-color: #c89a0c; /* Ochre yellow for the button */
    color: #333; /* Dark text */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px 10px;
    transition: background-color 0.3s;
}

.edit-btn:hover {
    background-color: #a7840a; /* Darker shade on hover */
}

.delete-btn {
    margin-left: 10px; /* Push the button to the right */
    background-color: #8b0000; /* Dark red */
    color: #333; /* Dark text */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px 10px;
    transition: background-color 0.3s;
}

.delete-btn:hover {
    background-color: #720000; /* Darker shade on hover */
}

.form-group {
    width: 450px;
    display: flex;
    align-items: center; /* This aligns items vertically in the middle, adjust as needed */
}

.form-group label {
    width: 200px; /* Adjust this value based on your needs */
    text-align: left; /* Aligns the text to the left */
    margin-right: 10px; /* Adds some space between the label and the input/select */
}

.form-group-drop-down {
    margin-top: 14px;
    width: 450px;
    display: flex;
    align-items: center; /* This aligns items vertically in the middle, adjust as needed */
}

.form-group-drop-down label {
    width: 200px; /* Adjust this value based on your needs */
    text-align: left; /* Aligns the text to the left */
    margin-right: 10px; /* Adds some space between the label and the input/select */
}

.swal2-input, .swal2-select {
    flex-grow: 1; /* Makes input/select fields take up the remaining space */
}


/* Hide the file input */
/* Center the "Open camera" button and ensure it stays centered */
#capture-btn {
    display: block;
    margin: auto; /* Center horizontally in the flex container */
    position: absolute; /* Positioning relative to the nearest positioned ancestor (body here) */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Offset the button by half its width and height to center it exactly */
    font-size: 20px; /* Adjust font size */
    padding: 15px 30px; /* Adjust padding */
    z-index: 1; /* Ensure it's above other content but below the popup */
}


/* Login button */
#login-btn {
    position: fixed; /* Fixed position */
    top: 20px; /* Adjust distance from top */
    right: 15px; /* Adjust distance from right */
    padding: 5px 10px;
}

#logged-in {
    display: none;
    position: absolute;
    top: 20px; /* Adjust distance from top */
    right: 15px;
    background-color: #8b0000; /* Dark red color */
    color: #E8E8E8; /* White text */
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer; /* Add pointer cursor for clickability */
}

#logged-in-info {
    display: block; /* Make sure it is visible */
    position: absolute;
    color: #E8E8E8;
    top: 30px; /* Adjust distance from top */
    left: 15px; /* Align to the left side of the screen */
}

#super-admin-btn {
    position: fixed; /* Fixed position */
    top: 20px; /* Adjust distance from top */
    right: 105px; /* Adjust distance from right */
}

#admin-btn {
    position: fixed; /* Fixed position */
    top: 20px; /* Adjust distance from top */
    right: 105px; /* Adjust distance from right */
}

.add-user-btn {
    display: block; /* Make it a block-level element */
    margin: 20px auto; /* Vertical margins as needed, horizontal margins set to auto */
    background-color: #c89a0c; /* Ochre yellow for the button */
    color: #333; /* Dark text */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px 10px;
    transition: background-color 0.3s;
}

.add-user-btn:hover {
    background-color: #a7840a; /* Darker shade on hover */
}

.add-hap-btn {
    display: block; /* Make it a block-level element */
    margin: 20px auto; /* Vertical margins as needed, horizontal margins set to auto */
    background-color: #c89a0c; /* Ochre yellow for the button */
    color: #333; /* Dark text */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px 10px;
    transition: background-color 0.3s;
}

.add-hap-btn:hover {
    background-color: #a7840a; /* Darker shade on hover */
}

.add-organization-btn {
    display: block; /* Make it a block-level element */
    margin: 20px auto; /* Vertical margins as needed, horizontal margins set to auto */
    background-color: #c89a0c; /* Ochre yellow for the button */
    color: #333; /* Dark text */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px 10px;
    transition: background-color 0.3s;
}

.add-organization-btn:hover {
    background-color: #a7840a; /* Darker shade on hover */
}

#email-settings-form .settings-label {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Align items to the start */
    width: 100%;
    margin-top: 40px; /* Adjust spacing between fields as needed */
    margin-bottom: -20px;
}

#email-settings-form .settings-label input {
    margin-left: 10px; /* Creates space between the label text and the input */
    flex-grow: 1; /* Allows input to take up remaining space */
    min-width: 240px;
    max-width: 240px;
}

#save-email-settings {
    align-self: center;
    margin-top: 40px;
    padding: 10px 20px;
    background-color: #c89a0c;
    color: #333;
    border: none;
    cursor: pointer;
}

#save-email-receive-settings {
    align-self: center;
    margin-top: 40px;
    padding: 10px 20px;
    background-color: #c89a0c;
    color: #333;
    border: none;
    cursor: pointer;
}

#org-settings-form .settings-label {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align items to the start */
    width: 100%;
    margin-top: 40px; /* Adjust spacing between fields as needed */
    margin-bottom: -20px;
}

#org-settings-form .settings-label input {
    margin-left: 100px; /* Creates space between the label text and the input */
    flex-grow: 1; /* Allows input to take up remaining space */
}

#save-org-settings {
    align-self: center;
    margin-top: 40px;
    padding: 10px 20px;
    background-color: #c89a0c;
    color: #333;
    border: none;
    cursor: pointer;
}

/* Style the SweetAlert2 modal */
.swal2-popup {
    font-size: 1em; /* Adjust font size */
    background-color: #333; /* Dark background color */
    color: #E8E8E8; /* Light text color */
}

.swal2-title {
    color: #c89a0c; /* Title color */
}

.swal2-input,
.swal2-textarea {
    background-color: #555; /* Input background color */
    color: #E8E8E8; /* Input text color */
    font-size: 0.8em; /* Adjust input font size */
    padding: 8px; /* Adjust input padding */
    border-radius: 4px; /* Adjust input border radius */
    border: 1px solid #555; /* Input border */
}

.swal2-input:focus,
.swal2-textarea:focus {
    border-color: #c89a0c; /* Input focus border color */
}

.swal2-confirm,
.swal2-cancel {
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.swal2-confirm {
    background-color: #c89a0c; /* Confirm button background color */
    color: #333; /* Confirm button text color */
}

.swal2-confirm:hover {
    background-color: #a7840a; /* Confirm button hover background color */
}

.swal2-cancel {
    background-color: #820000; /* Cancel button background color */
    color: #E8E8E8; /* Cancel button text color */
}

.swal2-cancel:hover {
    background-color: #5c0000; /* Cancel button hover background color */
}

.swal2-confirm.custom-confirm-button {
    background-color: #8b0000 !important;
    color: #E8E8E8 !important;
}

.swal2-cancel.custom-cancel-button {
    background-color: #c89a0c !important;
    color: #FFFFFF !important;
}