:root {
    /* Theme Colors */
    --theme-background-color: #1E2E3A;
    --theme-text-color: #ffffff;
    --theme-hover-color: #708090;

    /* Fonts */
    --font-primary: 'Montserrat', sans-serif;

    /* Sizes and Spacings */
    --font-size-base: 1rem; /* 16px */
    --font-size-small: 0.85rem; /* ~14px */
    --font-size-smaller: 0.75rem; /* For finer text details */
    --spacing-base: 1rem; /* 16px */
    --spacing-small: 0.5rem; /* 8px */
    --navbar-height: 30px; /* Adjust based on your navbar's actual height */
    --sidebar-top-space: -0.2rem; /* Space between the top navbar and sidebar */
}

body {
    font-family: var(--font-primary);
    background-color: #ffffff;
    color: #000; /* Default text color set to black for contrast */
    margin-top: var(--navbar-height);
    padding-left: 0;
    padding-top: var(--navbar-height); /* This should match the height of your navbar */
}

#sidebar, .sidebar {
    background-color: var(--theme-background-color);
    color: var(--theme-text-color);
    padding: var(--spacing-base);
    margin-top: calc(var(--navbar-height) + var(--sidebar-top-space));
    flex-grow: 1; /* Makes the sidebar grow to fill the container */
    min-height: 100vh; /* Ensures it is at least as tall as the viewport */
}

.sidebar-content {
    padding-top: 0; /* Reset any existing padding */
    margin-top: -2rem; /* Adjust this value to move the text up or down */
}

.sidebar::before {
    content: '';
    background-color: var(--theme-text-color);
    height: 4px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.sidebar h3 {
    margin-top: 0; /* Ensure the heading doesn't have extra margin */
    margin-bottom: 0.5rem; /* Adjust spacing below the heading */
}

.sidebar .nav-link {
    padding-top: 0.25rem; /* Adjust this value to move the text up or down */
    padding-bottom: 0.25rem; /* Adjust as needed */
    color: inherit; /* Ensure the text color is inherited */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
}

.sidebar .nav-link:hover {
    background-color: var(--theme-hover-color);
}

.badge {
    font-size: 0.85em;
    padding: 0.25em 0.6em;
}

.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
    background-color: #1E2E3A;
    color: white;
    font-size: var(--font-size-small); /* Adjusted to small font size for h3 */
}

h1.card-title {
    font-size: var(--font-size-base); /* Adjusted to base font size for h1 */
}

.card-header h3 {
    font-size: 1rem; /* Example size, adjust as needed */
}

.navbar {
    background-color: var(--theme-background-color);
    color: var(--theme-text-color);
}

.row.no-gutters {
    display: flex; /* This ensures that the sidebar and the content area are flex items */
    flex-wrap: nowrap; /* This ensures that the sidebar and the content do not wrap onto new lines */
    min-height: 100vh; /* This makes sure the row takes up at least the height of the viewport */
}

.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
    color: var(--theme-text-color) !important;
}

.form-container,
.table-responsive {
    max-width: calc(100% - 2 * var(--spacing-base));
    margin: auto;
    padding: 0 var(--spacing-base);
}

.navbar-profile, .navbar-profile img, .navbar-profile-text {
    display: flex;
    align-items: center;
    justify-content: start;
}

#navbarDropdownProfile::after,
#navbarDropdownNotifications::after {
    content: none !important;
}

.navbar-profile-text div, .navbar-profile-text .name, .navbar-profile-text .position {
    font-size: 0.7rem;
    color: var(--theme-text-color);
    margin-left: var(--spacing-small);
}

.custom-btn, .btn-primary {
    background-color: var(--theme-background-color);
    color: var(--theme-text-color);
    border: none;
}

.custom-btn:hover, .btn-primary:hover {
    background-color: var(--theme-hover-color);
}

.text-white {
    color: var(--theme-text-color) !important;
}

.bg-primary {
    background-color: var(--theme-background-color) !important;
}

.table th, .table td {
    background-color: #ffffff;
    padding: var(--spacing-small);
    vertical-align: middle;
    text-align: center;
    font-size: var(--font-size-small);
    font-weight: normal;
}

.table tbody tr {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 992px) {
    .navbar-profile-text .name, .navbar-profile-text .position, .custom-btn, .table-responsive {
        font-size: var(--font-size-smaller);
    }

    .chart-container, .form-container {
        margin-bottom: var(--spacing-base);
    }
}

input[type="text"], select, .form-control {
    font-size: var(--font-size-small);
    margin: var(--spacing-small) 0;
}

.dashboard-box {
    margin-bottom: 2rem;
}

.dashboard-box .card-header {
    background-color: #1E2E3A;
    color: white;
}

.dashboard-box .card-body {
    background-color: #f8f9fa;
}

.modal-lg {
    max-width: 80%; /* Make the modal wider if necessary */
}

/* Ensure the alert does not overlay the content */
.alert-dismissible .close {
    position: absolute;
    right: 0;
    top: 0;
    color: inherit;
}

/* Adjusting table styles for consistency */
.table {
    margin-bottom: 0; /* Remove extra margin from the bottom of tables */
}

.table tr th {
    font-weight: bold;
}

.timeline-container {
    position: relative;
    height: auto; /* Set to auto to expand as needed based on children */
    min-height: 40px; /* Minimum height to fit at least one bar */
    margin-bottom: 20px;
}

.action-lifespan {
    position: absolute;
    background-color: #646e6e !important; /* Bar color */
    border-right: 2px solid white; /* White separation line for all but the last bar */
    z-index: 2;
    display: flex; /* Use flexbox to center the title */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    overflow: hidden; /* Ensures text doesn't overflow the bar's width */
}

.action-separator {
    border-right: 2px solid white; /* White separation line */
}

.action-title {
    color: white; /* Title color */
    font-size: smaller; /* Adjust the font size if needed */
    white-space: nowrap; /* Prevents the text from wrapping */
    overflow: hidden; /* Hide text that doesn't fit */
    text-overflow: ellipsis; /* Add an ellipsis for text that doesn't fit */
    padding-right: 4px; /* Padding to not overlap the white separator */
}

.action-tooltip {
    display: none; /* Hide by default */
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 5px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 3;
}

.action-lifespan:hover .action-tooltip {
    display: block; /* Show tooltip on hover */
}

.arrow-badge:after {
    content: '→'; /* Unicode arrow */
    display: inline-block;
    margin-left: 5px; /* Space between title and arrow */
    color: #fff; /* Color of the arrow */
}

/* Custom CSS for policy page */
.policy-section {
    margin-bottom: 30px; /* Add some bottom margin to create space between sections */
}

.policy-header {
    font-size: 24px; /* Reduce the font size of policy headers */
}

.separator-line {
    border-top: 2px solid #333; /* Add a solid line above the main content */
    margin-top: 20px; /* Add some top margin to create space between the line and the content */
    margin-bottom: 20px; /* Add some bottom margin to create space between the line and the content */
}

/* Custom Badge Colors */
.badge-owner {
    background-color: #1E2E3A;
    color: white;
}

.badge-version {
    background-color: #708090;
    color: white;
}

.badge-likelihood {
    background-color: #5bc0de; /* Custom blue color */
    color: white;
}

.badge-impact {
    background-color: #d9534f; /* Custom red color */
    color: white;
}

/* Ensuring list items are visible */
.list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff; /* Ensuring a visible background color */
    color: #000; /* Ensuring text is black for visibility */
    position: relative;
}
.bpmn-thumbnail {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.bpmn-thumbnail:hover {
    transform: scale(1.05);
}

.dropdown-menu .dropdown-item {
    font-size: 0.9rem; /* Adjust the font size as needed */
}