html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html {
    scroll-padding-top: 3.5rem;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary:enabled {
    background-color: #1b6ec2;
    border-color: #1861ac;
    color: #fff;
}

.btn-primary:enabled:hover {
    background-color: #0b5eb2;
    border-color: #08519c;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    color: white;
    padding: 1rem 1rem 1rem 3.7rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

body {
    background: #000000;
    color: #9d9d9d;
}

.loading-progress {
    display: block;
    height: 8rem;
    margin: 20vh auto 1rem auto;
    position: relative;
    width: 8rem;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    position: absolute;
    text-align: center;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

code {
    color: #c02d76;
}

main {
    background: #000000; /* fallback for old browsers */
    background: linear-gradient(to bottom, #000000, #333333);
    color: #9d9d9d;
}

/* Apply these styles to your form elements */

.form-group {
    align-items: center; /* Vertically center labels and input fields */
    display: flex;
    justify-content: flex-start; /* Align the form to the left */
    margin-bottom: 12px;
}

label {
    flex: 1; /* Labels take up equal space */
    margin-right: 10px; /* Add some spacing between label and input */
    max-width: 250px; /* Set maximum width for labels */
    text-align: right; /* Align labels to the right */
}

input {
    border: 1px solid #ccc; /* Add a border for input fields */
    flex: 2; /* Input fields take up more space */
    max-width: 500px; /* Set maximum width for input fields */
    padding: 5px; /* Add padding for a cleaner look */
}

select {
    padding: 5px; /* Add padding for a cleaner look */
}

.form-field-text {
    margin: 0;
    padding: 5px;
}

/* Style read-only input fields, only text fields or fields without type explicitly specified */

input[type="text"]:read-only, input:not([type]):read-only {
    background-color: #f0f0f0; /* Light gray background */
    color: #777; /* Dark gray text color */
    cursor: not-allowed; /* Show a "not-allowed" cursor */
}

.center-button {
    display: flex;
    justify-content: flex-start; /* Horizontally center the content */
    margin-top: 10px; /* Add some spacing between input fields and button */
}

.label-column {
    flex: 1;
    max-width: 250px;
}

.input-column {
    flex: 2;
    max-width: 500px;
}

.save-button {
    cursor: pointer;
    padding: 10px 20px;
}

footer {
    bottom: 0;
    left: 0;
    padding: 10px;
    text-align: center;
    width: 100%;
}

footer p {
    color: #808080;
    font-size: 90%;
    margin: 0;
}

footer a {
    color: #808080;
}

/* Home */

.home-container {
    max-width: 1200px;
}

.home-container > img {
    height: auto;
    margin-bottom: 8px;
    max-width: 100%; /* Prevent images from being scaled larger than their original size */
    width: auto; /* Ensure all images are displayed at their original size */
}

.image-container {
    align-items: flex-start;
    display: flex;
    margin-bottom: 20px;
}

.image-container img {
    height: auto;
    margin-right: 16px;
    width: auto; /* Ensure the image is displayed at its original size */
}

.image-container .text {
    flex: 1;
}

/* New Game */

.player-row {
    align-items: center;
    display: flex;
    margin-bottom: 1rem;
}

.player-row div {
    margin-right: 1rem;
}

/* Exception to the above rule */

.player-row .validation-message {
    margin-right: 0;
}

.player-row .player-name {
    min-width: 150px;
}

/* Table styles */

.table-container {
    background-color: black;
    border: 2px solid #333;
    color: #9d9d9d;
    font-family: Arial, sans-serif;
    padding: 10px;
}

.table-container .table-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.table-container .table-row:nth-child(odd) {
    background-color: #222;
    transition: background-color 0.3s, color 0.3s;
}

.table-container .table-row:hover, .table-container .table-row:nth-child(odd):hover {
    background-color: #3a0647;
    cursor: pointer;
}

.table-container .table-row.no-hover:hover {
    background-color: black;
    cursor: default;
}

.table-container .table-row.no-hover:nth-child(odd):hover {
    background-color: #222;
    cursor: default;
}

.table-container .header {
    background-color: #333;
    font-weight: bold;
}

.table-container .table-cell {
    flex: 1;
    padding-left: 8px;
}

/* Game UI table */

/* table based */

.game-ui-table table {
    border-collapse: collapse;
    margin: 4px 0;
    width: 100%;
}

.game-ui-table th, .game-ui-table td {
    color: #000000;
    padding: 8px;
    text-align: left;
}

.game-ui-table tr:nth-child(even) {
    background-color: #8c8c8c;
}

.game-ui-table thead tr {
    background-color: #8c8c8c !important;
}

.game-ui-table tr:nth-child(odd) {
    background-color: #656565;
}

.game-ui-table tr.selected {
    background-color: #005555;
}

/* div based */

.game-ui-table {
    color: #000000;
    margin: 4px 0;
    width: 100%;
}

.game-ui-table .table-row {
    display: flex;
}

.game-ui-table .header-row {
    font-weight: bold;
}

.game-ui-table .table-row:nth-child(even) {
    background-color: #8c8c8c;
}

.game-ui-table .table-row:nth-child(odd) {
    background-color: #656565;
}

.game-ui-table div.table-cell {
    flex: 1;
    padding: 8px 8px;
}

.game-ui-table div.crafts-table-wider-cell {
    flex: 1.8;
}

.game-ui-table .checkbox-cell {
    max-width: 25px;
}

.game-ui-table .link-row:hover {
    background-color: #3a0647;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

/* Note dark-text animation-delay link-row on the same element, must not be separated by space! */

.game-ui-table .dark-text.link-row:hover {
    background-color: #730C8D;
}

/* Galaxy map */

.galaxy-map {
    -webkit-user-select: none;
    height: 700px;
    position: relative;
    user-select: none;
    width: 700px;
}

.galaxy-map-width {
    width: 700px;
}

.map-data-container {
    display: flex;
}

.right-side-panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: auto;
}

.left-side-panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    max-width: 700px;
    width: 700px;
}

.overview-panel {
    display: flex;
    flex-direction: column;
}

.overview-fleets-panel, .overview-colonies-panel, .overview-planets-panel {
    max-width: 700px;
    min-width: 500px;
    padding: 8px;
    width: 100%;
}

.planets-panel {
    max-width: 700px;
    min-width: 500px;
    width: 100%;
}

.overview-fleets-panel p, .overview-planets-panel p {
    padding-left: 4px;
}

.overview-fleets-panel td, .overview-planets-panel td, .overview-fleets-panel th, .overview-planets-panel th {
    padding: 8px 8px;
}

.tabrow {
    display: flex;
    padding: 0 0 0 12px;
}

.tab {
    border: #656565 solid 1px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    margin-top: 4px;
    padding: 8px 24px;
}

.selected-tab {
    background-color: #333333;
    border: #888888 solid 2px;
    margin-top: 0;
    padding-top: 12px;
}

.content-panels {
    padding: 8px;
}

.tabbed-panel {
    display: none;
}

.selected-tab-panel {
    display: flex;
}

.fleet-crafts-panel {
    display: flex;
    flex-direction: column;
    max-width: 700px;
    min-width: 520px;
    padding: 0 8px;
    width: 100%;
}

.fleet-crafts-panel p {
    margin: 12px 0 4px 0;
}

.hover-table-container {
    margin: 4px 0;
    min-height: 88px;
}

.bottom-button-panel button {
    margin-right: 8px;
}

.fleet-orders-panel {
    display: flex;
}

.fleet-orders-panel button {
    margin-right: 8px;
}

.overlay-panel {
    background-color: rgba(0, 0, 0, 0.8); /* Black background with opacity */
    bottom: 0;
    cursor: pointer; /* Add a pointer cursor on hover */
    display: none; /* Hidden by default */
    height: 100%; /* Full height (cover the whole page) */
    left: 0;
    position: fixed; /* Sit on top of the page content */
    right: 0;
    top: 0;
    width: 100%; /* Full width (cover the whole page) */
    z-index: 2; /* Specify a stack order (higher than other elements) */
}

.overlay-panel-visible {
    display: block;
}

.overlay-panel-contents {
    background-color: black;
    border: 1px solid #656565;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    left: 50%;
    padding: 20px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.overlay-panel-contents p {
    margin: 8px 0 4px 0;
}

.overlay-content-div {
    max-width: 700px;
    min-width: 600px;
    padding: 8px;
    width: 90%;
}

.overlay-content-buttons {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}

.overlay-content-buttons button {
    margin: 0 4px;
}

.fix-width {
    min-width: 80px;
}

.error-text {
    color: red;
    display: inline;
}

.colony-name-form {
    align-items: center;
    display: flex;
    justify-content: flex-start;
}

.colony-name-form label {
    flex: 0;
    margin-right: 10px;
    min-width: 100px;
    text-align: left;
}

/* Colony panel */

.colony-panel-container {
    display: flex;
    flex-direction: column;
    padding: 8px;
}

.colony-population-panel {
    height: 240px;
    position: relative;
    width: 550px;
}

.colony-build-container {
    display: flex;
    flex-direction: row;
    width: 700px;
}

.colony-build-left-panel {
    border: #656565 solid 2px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    width: 34%;
}

.colony-build-right-panel {
    display: flex;
    flex-direction: column;
    width: 66%;
}

.build-list-title {
    font-weight: bold;
}

.colony-buildings, .colony-buildables {
    padding-bottom: 12px;
}

.colony-stats {
    padding: 4px 0;
}

.colony-buildable {
    color: #D68F23;
    cursor: pointer;
}

.buildable-building {
    color: #43BD17;
}

.buildable-craft {
    color: #234DD6;
}

.buildable-info {
    border: #656565 solid 2px;
    height: 200px;
    padding: 8px;
}

.game-ui-table td.game-ui-action-td {
    font-size: 85%;
    padding: 8px 0;
}

.game-ui-table td.game-ui-action-td div {
    cursor: pointer;
    display: inline-block;
}

.game-ui-delete-div {
    color: darkred;
}

/* Research */

.science-container {
    -webkit-user-select: none;
    display: flex;
    flex-direction: column;
    padding: 8px 8px 8px 4px;
    user-select: none; /* Prevent content from being highlighted on shift-click */
}

.science-row {
    border: #444 solid 2px;
    display: flex;
    flex-direction: row;
    height: 120px;
    padding: 4px;
}

.tech-item {
    background-color: #330000;
    border: #888888 solid 2px;
    color: #666666;
    display: flex;
    flex-direction: column;
    height: 108px;
    padding: 4px;
    width: 300px;
}

.tech-item.tech-item-researced {
    background-color: #003300;
}

.tech-item.tech-item-available, .tech-item.science-header {
    background-color: unset;
    color: inherit;
}

.tech-item-available:hover {
    background-color: #222222;
}

.tech-item.science-header:hover {
    background-color: unset;
}

.tech-item-header {
    background-color: #333333;
    display: flex;
    flex-direction: row;
    padding: 0 4px;
    width: 100%;
}

.tech-cost {
    text-align: right;
    width: 100px;
}

.tech-name {
    width: 180px;
}

.tech-item-available .applied-tech-item-available:hover {
    background-color: #3a0647;
    cursor: pointer;
}

.tech-info-container {
    display: flex;
    flex-direction: row;
    padding: 8px 8px 8px 4px;
}

.tech-info, .research-queue-container {
    border: #444 solid 2px;
    height: 250px;
    max-height: 250px;
    overflow-y: auto;
    padding: 8px;
    width: 550px;
}

.tech-info-row {
    display: flex;
    flex-direction: row;
    padding: 0 4px;
}

.tech-info-header {
    min-width: 100px;
    width: 100px;
}

.applied-tech-item-row {
    display: flex;
    flex-direction: row;
    padding: 0 4px;
}

.applied-tech-item-researched {
    background-color: #009900;
    cursor: default;
}

.applied-tech-item-row.in-queue {
    background-color: #005555;
}

.applied-tech-item {
    width: 265px;
}

/* Summary panel in nav bar */

.vertical-space {
    height: 16px;
}

.summary-panel {
    font-size: 90%;
    margin: 8px;
}

.summary-row {
    margin: 8px 0;
}

.summary-label {
    font-weight: bold;
}

@keyframes pulse-keyframes {
    0% {
        color: #dd0000; /* Red */
    }

    50% {
        color: #dd7f00; /* Orange */
    }

    100% {
        color: #dd0000; /* Red */
    }
}

.attention-pulse {
    animation: pulse-keyframes 3s infinite;
}

/* Diplomacy summary */

.diplomacy-container {
    padding: 8px 8px 8px 4px;
}

.race-section {
    border: 3px solid;
    border-radius: 8px;
    box-sizing: border-box;
    cursor: pointer;
    margin-bottom: 8px;
    padding: 8px;
    transition: background-color 0.3s, color 0.3s;
}

.race-section:hover {
    background-color: #3a0647;
    color: white;
}

.race-section h4 {
    margin-bottom: 4px;
    margin-top: 4px;
}

.race-section .game-ui-table th {
    width: 44%
}

.race-section .game-ui-table td {
    width: 56%
}

.race-columns {
    display: flex;
    justify-content: space-between;
}

.race-column {
    flex: 1;
    margin: 0 8px;
}

.race-section p {
    margin: 4px 0;
}

/* Diplomacy detail */

.details-section {
    border: 3px solid;
    border-radius: 8px;
    display: flex;
    justify-content: left;
    margin-bottom: 8px;
    margin-bottom: 16px;
    max-width: 1280px;
    padding: 8px;
}

.details-column {
    flex: 1;
    margin-right: 30px;
    max-width: 580px;
}

.details-column:last-child {
    margin-right: 0;
}

.details-panel .game-ui-table th {
    width: 40%
}

.details-panel .game-ui-table td {
    width: 60%
}

/* Rules of engagement component */

.rules-section {
    margin-top: 8px;
}

.rules-section h5 {
    margin-bottom: 8px;
    margin-top: 16px;
}

.rules-section div {
    align-items: center;
    display: flex;
    margin-bottom: 8px;
    padding-left: 8px; /* Indentation for checkboxes */
}

.rules-section input[type="checkbox"] {
    cursor: pointer;
    flex: 0 0 24px;
    height: 24px;
    width: 24px;
}

.rules-section input[type="checkbox"]:checked {
    background-color: #fff;
    color: #000;
}

.rules-section label {
    flex: 1;
    font-size: 18px;
    line-height: 24px;
    margin-left: 8px;
    text-align: left;
}

/* Reports panel */

.reports-panel-container {
    display: flex;
    flex-direction: column;
    padding: 8px;
}

.reports-list {
    margin-top: 12px;
}

.reports-list li {
    margin-bottom: 4px;
    padding: 4px;
}

.clickable-report:hover {
    background-color: #3a0647;
    cursor: pointer;
}

/* Space craft design page */

.craftdesign-container {
    max-width: 1280px;
    padding: 8px 8px 8px 4px;
}

.spacecraft-list {
    display: flex;
    flex-wrap: wrap;
}

.spacecraft-item {
    border: 1px solid #656565;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    margin: 4px;
    outline: 1px solid transparent; /* Transparent outline to maintain size */
    padding: 10px;
    width: 24%; /* 4 items per row */
}

.spacecraft-item-title {
    font-weight: bold;
    position: relative; /* Needed for z-index to have any effect */
    z-index: 2; /* Higher z-index to ensure it appears on top */
}

.spacecraft-item-new-model {
    color: #e9890d;
}

.spacecraft-item:hover {
    background-color: #3a0647;
    border: 1px solid #888888;
    outline: 1px solid #888888;
}

.spacecraft-item-selected {
    background-color: #005555;
    border: 1px solid #cccccc;
    outline: 1px solid #cccccc;
}

.spacecraft-item-state-mark {
    position: relative;
}

.spacecraft-item-state-mark::after {
    border-radius: 0 3px 0 5px;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 4px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1; /* Lower z-index to ensure it appears below the title */
}

.spacecraft-item-locked::after {
    background-color: #888888;
    color: #000000;
    content: "LOCKED";
}

.spacecraft-item-changed::after {
    background-color: #3333aa;
    color: #cccccc;
    content: "CHANGED";
}

.spacecraft-item-created::after {
    background-color: #009900;
    color: #cccccc;
    content: "NEW";
}

.spacecraft-item-deleted::after {
    background-color: #aa0000;
    color: #cccccc;
    content: "DELETED";
}

.spacecraft-item-production-mark {
    position: relative;
}

.spacecraft-item-production-mark::before {
    background-color: #888888;
    border-radius: 5px 0 3px 0;
    bottom: 0;
    color: #000000;
    content: "IN PRODUCTION";
    font-size: 12px;
    font-weight: bold;
    padding: 2px 4px;
    position: absolute;
    right: 0;
    z-index: 1; /* Lower z-index to ensure it appears below the title */
}

.craftdesign-details {
    margin-top: 20px;
}

.craftdesign-details label {
    display: block;
    margin-top: 12px;
    text-align: left;
}

.craftdesign-details input,
.craftdesign-details select {
    box-sizing: border-box;
    margin-bottom: 12px;
    margin-top: 4px;
    padding: 4px;
}

.craftdesign-details .form-row {
    display: flex;
    flex-direction: row;
}

.craftdesign-details .form-item {
    margin: 0 20px 0 0;
}

.craftdesign-details .title-label {
    margin-bottom: 4px;
}

.craftdesign-details .game-ui-table {
    margin-bottom: 20px;
}

.craftdesign-modal-overlay {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;
}

.craftdesign-overlay-table {
    min-width: 700px;
}

.craftdesign-bottom-buttons {
    padding-top: 16px;
}

.craftdesign-bottom-buttons button {
    margin: 0 8px;
}

.small-button {
    padding: 0 4px;
}

.w150 {
    width: 150px;
}

.user-container {
    max-width: 700px;
}

.craft-details-weapon-column {
    min-width: 28%;
}

.craft-details-modifiers-column {
    min-width: 20%;
}

.newgame-invitationcodehelp {
    display: flex;
    margin: 24px 0;
}

.newgame-invitationcodehelp .invitationcodehelp-text {
    padding: 4px 8px;
}

/* Replaces overlay-panel-contents for combat reports, needs to be scrollable */
.combat-report-container {
    display: flex;
    flex-direction: column;
    margin: 5% auto;
    padding: 20px;
    width: 86%;
    max-height: 80%;
    background-color: black;
    border: 1px solid #656565;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: #9d9d9d;
}

.combat-report-container .game-ui-table {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    color: #9d9d9d;
}

.combat-report-container .game-ui-table .header-row {
    padding-right: 16px;
}

.combat-report-scrollable-container {
    overflow-y: scroll;
    flex-grow: 1;
    min-height: 0; /* Ensures it doesn't overflow the parent */
}

/* WebKit (Chrome, Edge, Safari) */
.combat-report-scrollable-container::-webkit-scrollbar {
    width: 16px;
}

.combat-report-scrollable-container::-webkit-scrollbar-track {
    background: #222;
    border-radius: 8px;
}

.combat-report-scrollable-container::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 8px;
    border: 2px solid #222; /* creates padding around thumb */
}

.combat-report-container .game-ui-table .table-row:nth-child(even) {
    background-color: #343434;
}

.combat-report-container .game-ui-table .table-row:nth-child(odd) {
    background-color: #121212;
}

.combat-report-container button {
    margin: 10px auto 0 auto;
    display: block;
    padding: 6px 30px;
}

.combat-events-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.combat-event-row {
    display: flex;
    gap: 10px;
    padding: 6px;
    border-bottom: 1px solid #ccc;
}

.cell {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}