/* Main website background and text color */
body {
    background-color: #020817; /* Dark background for the whole page */
    color: #f8fafc; /* Light text color for contrast */
}

h1, h2, p {
    color: #f8fafc; /* Ensuring headings and paragraphs are also styled */
}

/* Hide the up/down arrows from input number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* Adjust the width of input fields */
.narrow-form-control {
    max-width: 200px; /* Adjust this width as needed */
}

/* Custom style for fixed width on table headers */
.fixed-width {
    width: 120px; /* Set your desired width */
}

/* You might also want to reduce the font size for the table to make it more compact */
.table-sm {
    font-size: 0.875rem; /* Adjust font size as needed */
}

/* Form and input elements styling */
.form-control, .form-control:focus, .form-control:active, select, select:focus, select:active {
  background-color: #020817;
  color: #f8fafc;
  border: 1px solid #f8fafc;
}

/* Label styling */
label {
  color: #f8fafc;
}

/* Button styling */
.btn-primary {
  background-color: #ff8000;
  border-color: #ff8000;
  color: #f8fafc;
}

/* Button hover state */
.btn-primary:hover {
  background-color: #b35900; /* A slightly darker shade for the hover state */
  border-color: #b35900;
}

/* Custom style for narrow form controls */
.narrow-form-control {
  max-width: 200px; /* Adjust this width as needed */
}

/* Adjustments for the form column background */
.col-md-3.d-flex {
  background-color: #020817;
  padding: 45px; /* Add some padding around the form */
}

/* Additional styles to ensure the form looks good */
.form-group {
  max-width: 200px;
}

.custom-margin-bottom {
    margin-bottom: 10px; /* Adjust this value as needed */
}

/* Table styles */
.table {
    background-color: #020817;
    color: #f8fafc;
    border-color: #f8fafc;
}

.table th, .table td {
    border-color: #f8fafc; /* Ensuring borders are visible */
}

.table thead th {
    background-color: #7a7875;
}

/* Styles for table rows and cells to make them more compact */
.table-sm th, .table-sm td {
    padding: 0.18rem; /* Compact padding */
    /*padding: 0.115rem; /* Compact padding */
}
.table-sm th.align-middle, .table-sm td.align-middle {
    vertical-align: middle; /* Keep content vertically centered */
}

/* Logo basic styling */
.logo {
    width: auto; /* Let the logo size be determined by the actual image size and max-width */
    max-width: 230px; /* Maximum size */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 20px; /* Adjust based on your layout */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .logo {
        max-width: 150px; /* Smaller logo for narrow viewports, adjust as needed */
        margin-bottom: 10px;
    }
}

.flex-container {
    display: flex;
    align-items: flex-start;
    position: relative; /* Ensure the parent container is positioned */
}

.hover-container {
    cursor: pointer; /* Optional: Changes the cursor on hover for better UX */
}

.hover-image {
    display: none;
    position: absolute;
    bottom: 100%; /* Positions the image above the container */
    left: 10%; /* Centers the image horizontally */
    z-index: 10; /* Ensures the image is displayed on top of other content */
}

.hover-container:hover .hover-image {
    display: block;
}

.hover-text {
    color: #007bff; /* Bootstrap default link color */
    text-decoration: underline; /* Mimic link appearance */
    cursor: pointer; /* Changes cursor to the pointer to indicate interactivity */
}

/* On larger screens, enable hover functionality */
@media (min-width: 768px) { /* Adjust breakpoint as needed */
    .hover-text:hover + .hover-image {
        display: block;
    }
}

@media (max-width: 768px) { /* Adjusting for very small devices */
  .narrow-form-control {
    max-width: 200px; /* Override to full width on smaller screens */
  }
}

/* Model styling */

/* Modal content general styling */
.modal-content {
    background-color: #020817; /* Dark background for modal content */
    color: #f8fafc; /* Light text color for contrast */
    border-color: #f8fafc; /* Border color for modal */
}

/* Modal header styling */
.modal-header {
    border-bottom: 1px solid #f8fafc; /* Light colored border for the bottom of the header */
    display: flex;
    justify-content: center; /* Aligns children (like the title) in the center */
    align-items: center; /* Vertically centers the title in case of taller headers */
}

/* Styling for the modal title */
.modal-title {
    margin-bottom: 0; /* Removes default bottom margin */
    flex-grow: 1; /* Allows the title to fill available space */
    text-align: center; /* Centers the text */
}

/* Custom dimensions for the modal dialog */
.modal-dialog {
    width: 800px; /* Custom width for the modal */
    max-width: 100%; /* Ensures responsiveness */
    height: auto; /* Height will adjust to content by default */
    margin: 30px auto; /* Centers the modal vertically and horizontally */
}

/* Modal footer styling */
.modal-footer {
    border-top: 1px solid #f8fafc; /* Light colored border for the top of the footer */
}

/* Close button styling */
.close {
    color: #f8fafc; /* Light color for close button */
    position: absolute;
    right: 1rem; /* Positions close button with some padding from the right edge */
    top: 0.5rem; /* Positions close button with some padding from the top edge */
}

/* Close button hover and focus styling */
.close:hover, .close:focus {
    color: #b35900; /* Darker shade when hovered or focused */
    text-decoration: none;
    opacity: 0.75;
}

/* Modal buttons styling */
.modal-footer .btn {
    background-color: #ff8000; /* Primary button color */
    border-color: #ff8000; /* Border color matches the background */
    color: #f8fafc; /* Text color for buttons */
}

/* Button hover state */
.modal-footer .btn:hover {
    background-color: #b35900; /* A slightly darker shade for the hover state */
    border-color: #b35900;
}