body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    text-align: center;
}
body.asd {
    background-color: #fafafa;
}

header {
    box-sizing: border-box;
    background-color: #333;
    color: #ddd;
    padding: 10px;
    text-align: center;
    min-height: 200px;
}
footer {
    box-sizing: border-box;
    background-color: #747070;
    color: #d9d9d9;
    padding-top: 20px;
    text-align: center;
    min-height: 50px;
    font-size: 12px;
    text-transform: uppercase;
    border-top: 1px solid #494949;
}

div.index-container {
    display: flex;
    margin: 0;
    box-sizing: border-box;
    min-height: calc(100vh - 250px);
    max-width: 1400px;
    margin: auto;
    justify-content: center;
}
div.index-container .right {
    margin-left: 60px;
}

ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
}

ul.scenario-list {
    text-align: left;
}

ul.header-menu {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

ul.header-menu a {
    display: block;
    padding: 10px 20px;
    color: #f0eded;
    text-decoration: none;
    background-color: #b74ed5;
    margin: 0 5px;
    border-radius: 5px;
    transition: all 0.3s;
}
ul.header-menu a:hover {
    background-color: #cd54f0;
    color: #fff;
}

li {
    margin-bottom: 10px;
}

h1 {
    margin-top: 50px;
}

form {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

label {
    margin-bottom: 10px;
    font-weight: bold;
}

select,
input {
    padding: 8px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 300px;
    box-sizing: border-box;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 10px;
}

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

a {
    text-decoration: none;
    color: #007bff;
    display: inline-block;
}

a:hover {
    text-decoration: underline;
}

.error-message {
    color: red;
    margin-top: 10px;
}

.asd-table {
    color: #333;
    border-collapse: collapse;
    width: calc(100% - 60px);
    margin: 30px;
}
.asd-table th,
.asd-table td {
    color: #444444;
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    max-width: 600px;
    overflow: hidden;
}
.filter-container {
    background-color: #fff;
    border: 1px solid #ddd;
    max-width: 1400px;
    margin: auto;
    margin-top: 10px;
    border-radius: 5px;
}
.filter-container form {
    display: flex;
    flex-direction: row;
    padding: 10px;
}
div.stats {
    flex-grow: 1;
    text-align: left;
    color: #aaa;
    margin-bottom: 20px;
    margin-left: 400px;
}
.filter-container button {
    margin-bottom: 20px;
    margin-left: 10px;
}
.filter-container select {
    margin-left: 10px;
}
.clear-btn {
    margin: 20px;
    margin-top: 0;
}
.button {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 6px;
    padding: 6px 12px;
    font-size: 90%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.button:hover {
    background-color: #0056b3;
    text-decoration: none;
}
.assertion {
    background-color: #fff;
    border-radius: 3px;
    color: #1acf3b;
    margin: 2px;
    padding: 2px;
    display: inline-block;
    border: 1px solid #ddd;
    font-family: monospace;
}
.reason,
.context,
.role {
    background-color: #fff;
    border-radius: 3px;
    color: #dfa915;
    margin: 2px;
    padding: 2px;
    display: inline-block;
    border: 1px solid #ddd;
    font-family: monospace;
}
.reason a,
.context a,
.role a {
    color: inherit;
}
.assertion.wait {
    color: #a512cb;
}
.assertion.delay {
    color: #00acc1;
}
.assertion.click {
    color: #f4511e;
}
.reason.POPULAR_SITE {
    color: #17b94d;
}
.reason.IFRAME_SITE {
    color: #f78ad8;
}
.reason.CUSTOMER_ISSUE {
    color: #e53935;
}
.reason.NO_FORM {
    color: #d81b60;
}
.reason.NO_USERNAME {
    color: #8e24aa;
}
.reason.NO_PASSWORD {
    color: #5e35b1;
}
.reason.TOTP {
    color: #3949ab;
}
.reason.MULTI_PAGE {
    color: #1e88e5;
}
.reason.CHANGE_PASSWORD {
    color: #db1ee5;
}
.reason.SINGLE_PAGE {
    color: #1ee5db;
}
.reason.NEWS_MEDIA {
    color: #577c93;
}
.reason.FEDERATED_LOGIN {
    color: #039be5;
}
.reason.SHADOW_DOM {
    color: #00acc1;
}
.reason.CAPTCHA {
    color: #00897b;
}
.reason.SERVER_SIDE {
    color: #43a047;
}
.reason.SPA {
    color: #7cb342;
}
.reason.BASE_CASE {
    color: #c0ca33;
}
.reason.NON_ENGLISH {
    color: #fdd835;
}
.reason.FALSE_POSITIVE {
    color: #ffb300;
}
.reason.RELIES_ON_NAME {
    color: #fb8c00;
}
.reason.RELIES_ON_ID {
    color: #f4511e;
}
.reason.RELIES_ON_CLASS {
    color: #6d4c41;
}
.reason.RELIES_ON_TEXT {
    color: #757575;
}
.reason.RELIES_ON_LABEL {
    color: #546e7a;
}
.reason.RELIES_ON_AUTOCOMPLETE {
    color: #26a69a;
}
.reason.RELIES_ON_PLACEHOLDER {
    color: #42a5f5;
}
.reason.RELIES_ON_ARIA_LABEL {
    color: #7e57c2;
}
.reason.SAML_LOGIN {
    color: #086223;
}

.role.AUTOFILL {
    color: #2f7ab7;
}
.role.AUTOSUBMIT {
    color: #1acf3b;
}
.role.SAVE_CREDENTIALS {
    color: #e8d630;
}
.role.UPDATE_CREDENTIALS {
    color: #ff8a0e;
}

.context.All {
    color: #333;
}
.context.Unit {
    color: #37c510;
}
.context.E2E {
    color: #ae0fac;
}
.context.Manual {
    color: #a51114;
}
.unit-test-status,
.e2e-test-status {
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
    text-transform: uppercase;
}

.unit-test-status a,
.e2e-test-status a {
    color: inherit;
    text-decoration: none;
    font-weight: bold;
}

.unit-test-status a:hover,
.e2e-test-status a:hover {
    text-decoration: underline;
}

.unit-test-status.PASSED,
.e2e-test-status.PASSED {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.unit-test-status.FAILED,
.e2e-test-status.FAILED {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Pass Rates page */
.passrate {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}
.passrate-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 24px 48px;
    min-width: 240px;
}
.passrate-card h2 {
    margin: 0 0 12px;
    color: #555;
    font-size: 1.1em;
}
.passrate-card .rate {
    font-size: 2.4em;
    font-weight: bold;
    color: #1a7fcf;
    margin: 8px 0;
}
.passrate-card .detail {
    color: #444;
    margin: 4px 0;
}
.passrate-card .meta {
    color: #aaa;
    font-size: 0.85em;
    margin: 2px 0;
}
.passrate-card .nodata {
    color: #aaa;
    margin: 12px 0;
}