.content-container {
    display: flex; /* Enable flex layout */
    flex: 1; /* Take up all available space after the top bar */
    overflow: auto; /* Prevent content from overflowing */
}

.main-content {
    flex: 1; /* Take the remaining space */
    overflow-y: auto; /* Add scroll for long content */
    height: 100%;
}

.sidebar {
    width: fit-content;
    background-color: #f4f4f4; /* Light grey background */
    transition: 2s;
}

.sidebar ul {
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.sidebar ul li {
    /* Styling for each list item */
    border-bottom: 1px solid #ddd; /* Light grey border for each item */
}

.sidebar ul li a {
    display: block; /* Make the link fill the entire list item */
    padding: 0.8em 1em; /* Add some padding for spacing */
    text-decoration: none; /* Remove underline from links */
    color: #333; /* Dark grey text color */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.sidebar ul li a:hover {
    background-color: #ddd; /* Light grey background on hover */
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.save-cancel #selected-count {
  margin: 0;
  margin-bottom: 0.25em;
}

.breadcrumbs .model-type.StructuralElement::before {
  content: "Structural element";
}

.breadcrumbs .model-type.Specimen::before {
  content: "Specimen";
}

.breadcrumbs .model-type.Specimens\:\:Cylinder::before {
  content: "Cylinder";
}

.breadcrumbs .model-type.Specimens\:\:Core::before {
  content: "Core";
}

.breadcrumbs .model-type.Specimens\:\:Powder::before {
  content: "Powder";
}

.breadcrumbs .model-type[class*="LabTests::"]::before {
  content: "Lab test";
}