body {
    font-family: 'Courier New', Courier, monospace; /* Monospaced font for console look */
    background-color: #282c34; /* Dark background */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    color: #abb2bf; /* Light text color */
}

.container { /* Original container for other pages */
    background-color: #3a404d; /* Slightly lighter dark background */
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.console-container { /* New container for dashboard and modals */
    background-color: #21252b; /* Even darker background for console */
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    width: 90%; /* Wider */
    max-width: 900px; /* Max width for larger screens */
    text-align: left; /* Align text left for console feel */
    border: 1px solid #61afef; /* Blue border */
}

.console-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #5c6370;
}

.console-header h2, .console-header h3 {
    color: #61afef; /* Blue for headers */
    margin: 0;
}

.console-section {
    margin-bottom: 25px;
    padding: 15px;
    background-color: #282c34; /* Slightly lighter section background */
    border-radius: 5px;
    border: 1px solid #3e4451;
}

.console-section h3 {
    color: #98c379; /* Green for sub-headers */
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px dashed #5c6370;
    padding-bottom: 5px;
}

.console-form .form-group {
    margin-bottom: 15px;
    text-align: left;
}

.console-form label {
    display: block;
    margin-bottom: 5px;
    color: #e06c75; /* Reddish for labels */
}

.console-input {
    width: calc(100% - 22px); /* Account for padding and border */
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #5c6370;
    border-radius: 4px;
    background-color: #3e4451; /* Input background */
    color: #abb2bf; /* Input text color */
    font-family: 'Courier New', Courier, monospace;
}

.console-button {
    background-color: #61afef; /* Blue button */
    color: #21252b; /* Dark text on button */
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: auto; /* Auto width for buttons */
    min-width: 120px;
    margin-right: 10px;
    font-family: 'Courier New', Courier, monospace;
    transition: background-color 0.3s ease;
}

.console-button:hover {
    background-color: #56b6c2; /* Lighter blue on hover */
}

.console-output {
    background-color: #282c34;
    border: 1px solid #3e4451;
    padding: 10px;
    border-radius: 4px;
    min-height: 50px;
    max-height: 300px;
    overflow-y: auto;
    color: #abb2bf;
}

.bot-item {
    background-color: #3a404d;
    border: 1px solid #5c6370;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.bot-item h4 {
    color: #e5c07b; /* Yellowish for bot names */
    margin-top: 0;
    margin-bottom: 5px;
}

.bot-item p {
    margin-bottom: 10px;
}

p {
    margin-top: 15px;
    color: #abb2bf;
}

a {
    color: #61afef;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.error {
    color: #e06c75; /* Red for errors */
    margin-top: 10px;
}

.success {
    color: #98c379; /* Green for success */
    margin-top: 10px;
}

hr {
    border: none;
    border-top: 1px dashed #5c6370;
    margin: 15px 0;
}

/* General form group for other pages */
.form-group {
    margin-bottom: 15px;
    text-align: left;
}

/* General input for other pages */
input[type="text"],
input[type="password"],
input[type="url"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
}

/* General button for other pages */
button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}

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

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
    padding-top: 60px;
}

.modal-content {
    margin: 5% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 700px;
    position: relative;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: #e06c75;
    text-decoration: none;
    cursor: pointer;
}

/* Context Menu Styles */
.context-menu {
    display: none;
    position: absolute;
    background-color: #21252b;
    border: 1px solid #61afef;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    z-index: 1000;
    padding: 5px 0;
}

.context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.context-menu ul li {
    padding: 8px 15px;
    cursor: pointer;
    color: #abb2bf;
}

.context-menu ul li:hover {
    background-color: #3e4451;
    color: #61afef;
}

/* Flowchart.js specific styles to make it fit the theme */
.flowchart-link, .flowchart-label {
    fill: #abb2bf !important;
    stroke: #61afef !important;
    color: #abb2bf !important;
}

.flowchart-text {
    fill: #abb2bf !important;
}

.flowchart-element {
    fill: #282c34 !important;
    stroke: #61afef !important;
}

.flowchart-element.selected {
    fill: #3e4451 !important;
    stroke: #98c379 !important;
}

.flowchart-element.hover {
    fill: #3e4451 !important;
}

.flowchart-element.active {
    fill: #56b6c2 !important;
}

.flowchart-element.past {
    fill: #3e4451 !important;
}

.flowchart-element.current {
    fill: #98c379 !important;
    color: #21252b !important;
}

.flowchart-element.future {
    fill: #5c6370 !important;
}

.flowchart-element.request {
    fill: #e06c75 !important;
}

.flowchart-element.invalid {
    fill: #e06c75 !important;
}

.flowchart-element.approved {
    fill: #98c379 !important;
}

.flowchart-element.rejected {
    fill: #e06c75 !important;
}

.flowchart-element.operation {
    fill: #282c34 !important;
    stroke: #61afef !important;
}

.flowchart-element.start {
    fill: #98c379 !important;
    stroke: #98c379 !important;
}

.flowchart-element.end {
    fill: #e06c75 !important;
    stroke: #e06c75 !important;
}

.flowchart-element.condition {
    fill: #e5c07b !important;
    stroke: #e5c07b !important;
}

.flowchart-element.inputoutput {
    fill: #c678dd !important;
    stroke: #c678dd !important;
}

.flowchart-element.subroutine {
    fill: #56b6c2 !important;
    stroke: #56b6c2 !important;
}

.flowchart-element.parallel {
    fill: #a9b8c6 !important;
    stroke: #a9b8c6 !important;
}

.flowchart-element.comment {
    fill: #5c6370 !important;
    stroke: #5c6370 !important;
}

.flowchart-element.decision {
    fill: #e5c07b !important;
    stroke: #e5c07b !important;
}

.flowchart-element.connector {
    fill: #abb2bf !important;
    stroke: #abb2bf !important;
}

.flowchart-element.group {
    fill: #3e4451 !important;
    stroke: #3e4451 !important;
}

.flowchart-element.terminator {
    fill: #e06c75 !important;
    stroke: #e06c75 !important;
}

.flowchart-element.document {
    fill: #c678dd !important;
    stroke: #c678dd !important;
}

.flowchart-element.database {
    fill: #61afef !important;
    stroke: #61afef !important;
}

.flowchart-element.manualinput {
    fill: #98c379 !important;
    stroke: #98c379 !important;
}

.flowchart-element.manualoperation {
    fill: #56b6c2 !important;
    stroke: #56b6c2 !important;
}

.flowchart-element.delay {
    fill: #e5c07b !important;
    stroke: #e5c07b !important;
}

.flowchart-element.display {
    fill: #c678dd !important;
    stroke: #c678dd !important;
}

.flowchart-element.storeddata {
    fill: #61afef !important;
    stroke: #61afef !important;
}

.flowchart-element.predefinedprocess {
    fill: #a9b8c6 !important;
    stroke: #a9b8c6 !important;
}

.flowchart-element.preparation {
    fill: #98c379 !important;
    stroke: #98c379 !important;
}

.flowchart-element.merge {
    fill: #e06c75 !important;
    stroke: #e06c75 !important;
}

.flowchart-element.extract {
    fill: #c678dd !important;
    stroke: #c678dd !important;
}

.flowchart-element.or {
    fill: #e5c07b !important;
    stroke: #e5c07b !important;
}

.flowchart-element.summation {
    fill: #61afef !important;
    stroke: #61afef !important;
}

.flowchart-element.offpageconnector {
    fill: #abb2bf !important;
    stroke: #abb2bf !important;
}

.flowchart-element.sort {
    fill: #a9b8c6 !important;
    stroke: #a9b8c6 !important;
}

.flowchart-element.collate {
    fill: #56b6c2 !important;
    stroke: #56b6c2 !important;
}

.flowchart-element.arrow {
    fill: #61afef !important;
    stroke: #61afef !important;
}

.flowchart-element.start-arrow {
    fill: #98c379 !important;
    stroke: #98c379 !important;
}

.flowchart-element.end-arrow {
    fill: #e06c75 !important;
    stroke: #e06c75 !important;
}

.flowchart-element.condition-arrow {
    fill: #e5c07b !important;
    stroke: #e5c07b !important;
}

.flowchart-element.inputoutput-arrow {
    fill: #c678dd !important;
    stroke: #c678dd !important;
}

.flowchart-element.subroutine-arrow {
    fill: #56b6c2 !important;
    stroke: #56b6c2 !important;
}

.flowchart-element.parallel-arrow {
    fill: #a9b8c6 !important;
    stroke: #a9b8c6 !important;
}

.flowchart-element.comment-arrow {
    fill: #5c6370 !important;
    stroke: #5c6370 !important;
}

.flowchart-element.decision-arrow {
    fill: #e5c07b !important;
    stroke: #e5c07b !important;
}

.flowchart-element.connector-arrow {
    fill: #abb2bf !important;
    stroke: #abb2bf !important;
}

.flowchart-element.group-arrow {
    fill: #3e4451 !important;
    stroke: #3e4451 !important;
}

.flowchart-element.terminator-arrow {
    fill: #e06c75 !important;
    stroke: #e06c75 !important;
}

.flowchart-element.document-arrow {
    fill: #c678dd !important;
    stroke: #c678dd !important;
}

.flowchart-element.database-arrow {
    fill: #61afef !important;
    stroke: #61afef !important;
}

.flowchart-element.manualinput-arrow {
    fill: #98c379 !important;
    stroke: #98c379 !important;
}

.flowchart-element.manualoperation-arrow {
    fill: #56b6c2 !important;
    stroke: #56b6c2 !important;
}

.flowchart-element.delay-arrow {
    fill: #e5c07b !important;
    stroke: #e5c07b !important;
}

.flowchart-element.display-arrow {
    fill: #c678dd !important;
    stroke: #c678dd !important;
}

.flowchart-element.storeddata-arrow {
    fill: #61afef !important;
    stroke: #61afef !important;
}

.flowchart-element.predefinedprocess-arrow {
    fill: #a9b8c6 !important;
    stroke: #a9b8c6 !important;
}

.flowchart-element.preparation-arrow {
    fill: #98c379 !important;
    stroke: #98c379 !important;
}

.flowchart-element.merge-arrow {
    fill: #e06c75 !important;
    stroke: #e06c75 !important;
}

.flowchart-element.extract-arrow {
    fill: #c678dd !important;
    stroke: #c678dd !important;
}

.flowchart-element.or-arrow {
    fill: #e5c07b !important;
    stroke: #e5c07b !important;
}

.flowchart-element.summation-arrow {
    fill: #61afef !important;
    stroke: #61afef !important;
}

.flowchart-element.offpageconnector-arrow {
    fill: #abb2bf !important;
    stroke: #abb2bf !important;
}

.flowchart-element.sort-arrow {
    fill: #a9b8c6 !important;
    stroke: #a9b8c6 !important;
}

.flowchart-element.collate-arrow {
    fill: #56b6c2 !important;
    stroke: #56b6c2 !important;
}

.flowchart-element.arrow-head {
    fill: #61afef !important;
    stroke: #61afef !important;
}

.flowchart-element.start-arrow-head {
    fill: #98c379 !important;
    stroke: #98c379 !important;
}

.flowchart-element.end-arrow-head {
    fill: #e06c75 !important;
    stroke: #e06c75 !important;
}

.flowchart-element.condition-arrow-head {
    fill: #e5c07b !important;
    stroke: #e5c07b !important;
}

.flowchart-element.inputoutput-arrow-head {
    fill: #c678dd !important;
    stroke: #c678dd !important;
}

.flowchart-element.subroutine-arrow-head {
    fill: #56b6c2 !important;
    stroke: #56b6c2 !important;
}

.flowchart-element.parallel-arrow-head {
    fill: #a9b8c6 !important;
    stroke: #a9b8c6 !important;
}

.flowchart-element.comment-arrow-head {
    fill: #5c6370 !important;
    stroke: #5c6370 !important;
}

.flowchart-element.decision-arrow-head {
    fill: #e5c07b !important;
    stroke: #e5c07b !important;
}

.flowchart-element.connector-arrow-head {
    fill: #abb2bf !important;
    stroke: #abb2bf !important;
}

.flowchart-element.group-arrow-head {
    fill: #3e4451 !important;
    stroke: #3e4451 !important;
}

.flowchart-element.terminator-arrow-head {
    fill: #e06c75 !important;
    stroke: #e06c75 !important;
}

.flowchart-element.document-arrow-head {
    fill: #c678dd !important;
    stroke: #c678dd !important;
}

.flowchart-element.database-arrow-head {
    fill: #61afef !important;
    stroke: #61afef !important;
}

.flowchart-element.manualinput-arrow-head {
    fill: #98c379 !important;
    stroke: #98c379 !important;
}

.flowchart-element.manualoperation-arrow-head {
    fill: #56b6c2 !important;
    stroke: #56b6c2 !important;
}

.flowchart-element.delay-arrow-head {
    fill: #e5c07b !important;
    stroke: #e5c07b !important;
}

.flowchart-element.display-arrow-head {
    fill: #c678dd !important;
    stroke: #c678dd !important;
}

.flowchart-element.storeddata-arrow-head {
    fill: #61afef !important;
    stroke: #61afef !important;
}

.flowchart-element.predefinedprocess-arrow-head {
    fill: #a9b8c6 !important;
    stroke: #a9b8c6 !important;
}

.flowchart-element.preparation-arrow-head {
    fill: #98c379 !important;
    stroke: #98c379 !important;
}

.flowchart-element.merge-arrow-head {
    fill: #e06c75 !important;
    stroke: #e06c75 !important;
}

.flowchart-element.extract-arrow-head {
    fill: #c678dd !important;
    stroke: #c678dd !important;
}

.flowchart-element.or-arrow-head {
    fill: #e5c07b !important;
    stroke: #e5c07b !important;
}

.flowchart-element.summation-arrow-head {
    fill: #61afef !important;
    stroke: #61afef !important;
}

.flowchart-element.offpageconnector-arrow-head {
    fill: #abb2bf !important;
    stroke: #abb2bf !important;
}

.flowchart-element.sort-arrow-head {
    fill: #a9b8c6 !important;
    stroke: #a9b8c6 !important;
}

.flowchart-element.collate-arrow-head {
    fill: #56b6c2 !important;
    stroke: #56b6c2 !important;
}

/* Table styles for console theme */
.console-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    color: #abb2bf;
    font-family: 'Courier New', Courier, monospace;
}

.console-table th, .console-table td {
    border: 1px solid #3e4451;
    padding: 8px;
    text-align: left;
}

.console-table th {
    background-color: #3a404d;
    color: #61afef;
}

.console-table tbody tr:nth-child(even) {
    background-color: #282c34;
}

.console-table tbody tr:hover {
    background-color: #3e4451;
}