/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 10px;
    padding-right: 10px;
}

/* Override Bootstrap default behavior: Allow text to wrap in horizontal description lists */
.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"] {
    max-width: 280px;
}

/* Style dropdowns separately */
select {
    max-width: 280px;
}

/* Style for buttons with navy blue background */
.button-navy {
    background-color: #000080; /* Adjust the color code as needed */
    color: #ffffff; /* Text color */
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

    .button-navy:hover {
        background-color: #000066;
    }

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 2px;
    }

    .body-content {
        padding: 10px;
    }
}

/* Mobile-Specific Styling */
@media screen and (max-width: 768px) {
    #Panel1 {
        width: 100% !important; /* Full width for mobile */
        position: fixed; /* Keeps it in place */
        left: -100%; /* Hide sidebar initially */
        transition: left 0.3s ease-in-out;
        height: 100vh; /* Full height */
        background-color: #fff; /* Prevents content overlap */
        z-index: 1000; /* Keeps sidebar on top */
    }

    .sidebar-open #Panel1 {
        left: 0; /* Show sidebar when toggled */
    }

    .main-content {
        width: 100% !important; /* Ensure content takes full width */
    }
}

/* Main Content Styling */
.main-content {
    flex: 1; /* Allow content to take remaining space */
    padding: 1%; /* Reduced padding for better layout */
    overflow-x: auto;
}

/* Form Control Styling */
.form-control {
    word-wrap: break-word; /* Allows text to break onto a new line */
    white-space: normal !important; /* Ensures text does not stay in a single line */
    overflow-wrap: break-word; /* Additional text wrapping support */
    min-height: auto; /* Ensures proper height */
    overflow-y: auto; /* Enables scrolling if needed */
    display: block;
}

/* Mobile-Friendly ListBox */
.mobile-listbox {
    width: 100% !important;
    height: auto !important;
    min-height: 150px;
    white-space: normal !important; /* Wraps text */
    overflow-y: auto;
    overflow-x: hidden; /* Prevents horizontal scrolling */
    word-wrap: break-word;
}

/* Responsive Layout for Containers */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Ensures spacing between items */
    gap: 10px;
}

/* Columns inside Flexbox */
.col {
    flex: 1 1 200px; /* Ensures columns resize correctly */
    min-width: 200px;
}