body {
    font-family: Arial, sans-serif;
    background-color: #e0e0e0; /* Uncertain grey background */
    color: black; /* Black text */
}

.site-header {
    background-color: tan;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.radio-record {
    background-color: #e0e0e0; /* Uncertain grey background */
    padding: 20px;
    border-radius: 10px;
}
.talkgroup-dropdowns .dropdown {
    float: left;
    width: 25%; /* Each dropdown takes up a quarter of the width */
    padding: 5px;
    box-sizing: border-box; /* Include padding in the width */
}
/* Adjust table layout */
#groupTable {
    table-layout: auto;
    width: auto;
}

/* Style save and delete buttons */
.save-button {
    background-color: blue;
    color: white;
    border: none;
    cursor: pointer;
}

.flash-message {
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    margin-bottom: 15px;
}

.flash-error {
    padding: 10px;
    background-color: #f44336;
    color: white;
    margin-bottom: 15px;
}

.delete-button {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
}

.talkgroup-dropdowns select {
    width: 100%;
    padding: 5px;
    margin-bottom: 10px; /* Space between rows */
}

     .new-centered-table {
            margin-left: auto;
            margin-right: auto;
        }

        .new-gray-table {
            background-color: lightgray;
            border: 2px solid black;
        }

        .new-gray-table th, .gray-table td {
            text-align: left;
            border: 1px solid black;
        }

        .new-label-above {
            font-weight: bold;
            font-size: smaller;
        }

.clear {
    clear: both;
}



        .history-table {
            background-color: white;
            margin: 20px;
            border-collapse: collapse;
            width: 100%;
        }
        .history-table th, .history-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .history-blue-button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            font-size: 18px;
            display: inline-block;
            margin: 20px;
        }
.green-button {
    background-color: green;
    color: white;
    /* Other button styles as needed */
}

.radio-table {
    width: auto; /* Table width as per content */
    margin-left: auto; /* Margins auto for centering */
    margin-right: auto;
    border-collapse: collapse;
    table-layout: auto; /* Allows cells to grow as per content */
}

.blue-history-button {
    background-color: #007bff;
    color: white;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    /* Add more styles as needed for the 'cute' aspect */
}

.radio-table td, .radio-table th {
    padding: 8px;
    border: 1px solid #ccc;
    text-align: left; /* Left-align text within cells */
    white-space: nowrap; /* Optional, prevents text wrapping */
}

.history-button {
    margin: 5px 0; /* Add some space between buttons */
    text-align: center; /* Center align the buttons */
}

.edit-button {
    /* Styling for edit buttons */
    background-color: blue;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.edit-button:hover {
    background-color: darkblue;
}


.header-title {
    margin: 0;
    font-size: 24px;
}

.header-nav {
    display: flex;
    gap: 10px; /* Space between buttons */
}

.action-buttons {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust the space between buttons */
}

/* Ensure that the form inside action-buttons is also displayed inline */
.action-buttons form {
    margin: 0;
    display: flex;
}

.button {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
}

.head-button {
    background-color: blue;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
}

.head-button-selected {
    background-color: lightgray;
    color: black;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
}

.main-button {
    background-color: blue;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
	display: inline-block; /* Makes the button respect text-align */
    margin: 0 auto; /* Center alignment for block elements */
}

.head-button:hover {
    background-color: darkblue;
}
.head-button-selected:hover {
    background-color: darkgrey;
}

.main-button:hover {
    background-color: darkblue;
}


.blue-button {
    background-color: #007bff;
    color: white;
}
.red-button {
    background-color: #dc3545;
    color: white;
}
.table-container {
    margin: 20px;
    background-color: white;
    border-radius: 5px;
    padding: 20px;
}

.user-profile {
    position: absolute;
    bottom: 10px;
    right: 20px;
}

.head-user-profile a {
    color: black;
    text-decoration: none;
}

.profile-button {
    background-color: darktan; /* Adjust the color to match your design */
    color: #e0e0e0; /* Uncertain grey color for the text */
    font-weight: bold; /* Make the text bold */
    border-radius: 5px;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
}

.profile-button:hover {
    background-color: #b8860b; /* Slightly darker tan for hover effect */
}

.main-content {
    width: 80%; /* Adjust width as needed */
    margin: 0 auto; /* Center the div */
    padding: 20px; /* Optional: Add some padding */
    background-color: #e0e0e0; /* Uncertain grey background */
    border-radius: 10px; /* Optional: Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add some shadow for depth */
	text-align: center; /* Center-aligns text */
}

.file-management-container {
    width: 80%; /* Adjust width as needed */
    margin: 0 auto; /* Center the div */
    padding: 20px; /* Optional: Add some padding */
    background-color: #e0e0e0; /* Uncertain grey background */
    border-radius: 10px; /* Optional: Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add some shadow for depth */
	text-align: center; /* Center-aligns text */
}

table {
    width: 100%;
    border-collapse: collapse;
	background-color: #e0e0e0; /* Uncertain grey background */
}
table, th, td {
    border: 1px solid black;
	background-color: #e0e0e0; /* Uncertain grey background */
}
th, td {
    padding: 10px;
    text-align: left;
	background-color: #e0e0e0; /* Uncertain grey background */
}
select {
    padding: 5px;
    margin-right: 10px;
	background-color: #e0e0e0; /* Uncertain grey background */
}