.inline-form {
    display: inline-block;
    margin-right: 10px;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: Tahoma, Arial, sans-serif;
    color: #ffffff;
    background-color: #222222;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    background-color: #000000;
    text-align: center;
    text-color: #ffffff;
}

footer {
    margin-top: 20px;
    width: 100%;
    text-color: #000000;
    text-align: center;
    padding: 10px 0;
}

.totp-error {
    color: red;
    text-align: center;
}

.totp-success {
    color: green;
    text-align: center;
}

.login-error {
    color: red;
}

.login-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

.login-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

td.login-label {
    padding: 20px;
    border-radius: 5px;
    margin-top: 20px;
    align-items: right;
    text-align: right;
    text-color: #ffffff;
    background-color: #222222;
    white-space: nowrap;
}

td.login-input {
    padding: 20px;
    border-radius: 5px;
    margin-top: 20px;
    align-items: left;
    text-align: left;
    text-color: #ffffff;
    background-color: #222222;
}

.prevurl {
    text-align: left;
}

.prevurl a, .nexturl a {
    text-decoration: none;
}

.nexturl {
    text-align: right;
}

table {
    width: 90%;
    border-collapse: collapse;
}

th {
    text-align: center;
    padding: 10px;
}

.info-table tr:nth-child(even):not(.th) {
  background-color: #484848;
}

.info-table tr:nth-child(odd):not(:last-child):not(.th) {
  background-color: #222222;
}

/* tr:nth-child(even):not(.th) {
    background-color: #484848;
}

tr:nth-child(odd):not(:last-child):not(.th) {
    background-color: #222222;
}
*/

td {
    padding: 10px;
}

.button {
    text-align: center;
    align-items: center;
}

td.name {
    white-space: nowrap;
}

td.phone-number {
    white-space: nowrap;
}

td.action {
    white-space: nowrap;
    align-items: right;
}

th.role {
    width: 100px;
}

td.created {
    white-space: nowrap;
}

h1, p, a {
    color: #ffffff;
}

h2 {
    text-align: center;
    color: #ffffff;
}

a {
    text-decoration: none;
    color: #50D2E9; 
}

a:hover {
    color: #33CCFF;
}

button, .submit-button {
    font-size: 16px;
    color: #FFFFFF;
    background-color: #4CAF50;
    border: none;
    padding: 10px 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
}

button, .edit-button {
    font-size: 16px;
    color: #FFFFFF;
    background-color: #4CAF50;
    border: none;
    padding: 10px 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
}

button, .delete-button {
    font-size: 16px;
    color: #FFFFFF;
    background-color: #FF0000;
    border: none;
    padding: 10px 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
}

button, .add-button {
    font-size: 16px;
    color: #FFFFFF;
    background-color: #4CAF50;
    border: none;
    padding: 10px 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
}

button:hover, .submit-button:hover {
    background-color: #45a049;
}

header {
    background-color: #f2f2f2;
    text-color: #000000;
    padding: 10px;
    text-align: center;
}

header nav a {
    margin: 0 10px;
    text-decoration: none;
    color: #333;
}

.system-log {
    background-color: #800080;
}

.system {
    background-color: #872126;
}

.assistant {
    background-color: #364285;
}

.user {
    background-color: #236A1C;
}

.function {
    background-color: #CD00C4;
}