/* Apply the sans-serif font globally */
body {
    font-family: 'Inter', sans-serif !important;
}

.page-name {
    margin-top: 0;
}

/* Tooltip container to trigger the tooltip on hover */
.tooltip-container {
    position: relative;
    /* Position the tooltip text absolutely within this container */
    display: block;
    /* Ensures that the tooltip appears near the input field */
}

/* Tooltip text (hidden by default) */
.tooltip-text {
    font-size: 0.87rem;
    opacity: 0;
    /* Make it fully opaque */
    visibility: hidden;
    /* Make the tooltip hidden initially */
    background-color: #000;
    /* Dark background color for the tooltip */
    color: #FFF;
    /* White text */
    border-radius: 6px;
    /* Rounded corners */
    padding: 10px;
    /* Padding around the text */
    position: absolute;
    /* Position it above the input field */
    z-index: 1;
    /* Ensure the tooltip is above the input field */
    top: 80%;
    /* Position above the input field */
    right: 0%;
    /* Center it horizontally */
    width: fit-content;
    /* Fixed width */
    transition: opacity 0.3s ease;
    /* Smooth fade-in effect */
}

/* Show tooltip when hovering over the container */
.tooltip-container:hover .tooltip-text {
    visibility: visible;
    /* Make it visible */
    opacity: 1;
    /* Make it fully opaque */
}

.tab-tooltip.show {
    visibility: visible;
    /* Make it visible */
    opacity: 1;
    /* Make it fully opaque */
}

/* Custom tooltip container */
.tooltip-container {
    position: relative;
    display: inline-block;
}

/* Style for the tooltip */
.tab-tooltip {
    font-size: 0.85rem;
    background-color: #000;
    /* Dark background */
    color: #FFF;
    /* White text */
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    top: 100%;
    /* Adjusted to be above the target */
    right: 0%;
    width: fit-content;
    max-width: 20vw;
    /* Set maximum width to limit line length */
    white-space: normal;
    /* Allows text wrapping */
    word-wrap: break-word;
    /* Ensures words wrap properly */
}

.tooltip-text:empty,
.tab-tooltip:empty {
    display: none !important;
    opacity: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* General button-like style for the links */
.sidebar-link {
    padding: 10px;
    padding-left: 20px;
    display: block;
    color: #7d7a7a;
    text-decoration: none;
    /* Remove underline */
    border-radius: 5px;
    /* Rounded corners */
    margin-bottom: 5px;
    /* Space between links */
    transition: background-color 0.3s ease;
    /* Smooth transition for background */
}

#link-industry-classification,
#link-crisis-response-analysis {
    width: 120%
}

/* Hover and Active link styling */
.sidebar-link:hover,
.sidebar-link.active {
    background-color: #efefef;
    color: #2b2b2b;
}

.sub-link-container {
    margin-left: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 10px;
    border-left: 2px solid #ddd;
    color: #7d7a7a;
    transition: background-color 0.3s ease;
    /* Smooth transition for background */
}

.sub-link {
    font-size: 0.9rem;
    color: #7d7a7a;
    display: block;
    text-decoration: none;
    border-radius: 5px;
    /* Rounded corners */
    margin: 10px 5px;
    /* Space between links */
}

.sub-link:hover {
    background-color: #efefef;
    color: #2b2b2b;
}

.sidebar {
    position: fixed;
    /* Fix the sidebar's position */
    top: 60px;
    /* Match the height of the app bar */
    left: 0;
    width: 250px;
    height: calc(100vh - 60px);
    /* Avoid overlapping the app bar */
    background-color: #f8f9fa;
    color: #fff;
    overflow: auto;
    transition: transform 0.3s ease-in-out;
    /* Smooth transition effect */
    transform: translateX(0);
    /* Sidebar visible */
    padding-top: 10px;
}

.sidebar-hidden {
    display: none;
    left: -100%
}

/* When the sidebar is hidden, disable pointer events */
.sidebar-hidden .sidebar-link {
    display: none;
}

.page-content {
    margin-top: 80px;
    /* Avoid overlap with app bar */
    margin-left: 270px;
    /* Sidebar width */
    margin-right: 20px;
    transition: margin-left 0.3s ease-in-out;
    /* Smooth transition effect */
}

.page-content-sidebar-hidden {
    margin-top: 80px;
    /* Avoid overlap with app bar */
    margin-left: 20px;
    /* Adjust content width when sidebar is hidden */
    margin-right: 20px;
    transition: margin-left 0.3s ease-in-out;
    /* Smooth transition effect */
}

.app-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 1000;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.dash-input {
    font-family: 'Inter', sans-serif;
    line-height: 34px;
    border-radius: 5px;
    font-size: 16px;
    border-color: #efefef;
}

.info-box {
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 2px solid;
    font-size: 0.87rem;
    text-align: justify;
    line-height: 1rem;
}

.download-btn {
    margin: 20px auto;
    display: block;
}

.logout-button {
    background-color: transparent !important;
    border: none !important;
    color: #FFF !important;
    /* Blue like a link */
    text-decoration: underline !important;
    cursor: pointer !important;
    font-size: inherit !important;
    /* Inherit font size */
    font-family: inherit !important;
    /* Inherit font family */
    padding: 0 !important;
}

.loader {
    color: #119DFF;
    font-size: 6px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    animation: mulShdSpin 1.3s infinite linear;
    transform: translateZ(0);
}

@keyframes mulShdSpin {

    0%,
    100% {
        box-shadow: 0 -3em 0 0.2em,
            2em -2em 0 0em, 3em 0 0 -1em,
            2em 2em 0 -1em, 0 3em 0 -1em,
            -2em 2em 0 -1em, -3em 0 0 -1em,
            -2em -2em 0 0;
    }

    12.5% {
        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
            3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
            -2em 2em 0 -1em, -3em 0 0 -1em,
            -2em -2em 0 -1em;
    }

    25% {
        box-shadow: 0 -3em 0 -0.5em,
            2em -2em 0 0, 3em 0 0 0.2em,
            2em 2em 0 0, 0 3em 0 -1em,
            -2em 2em 0 -1em, -3em 0 0 -1em,
            -2em -2em 0 -1em;
    }

    37.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
            3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
            -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    50% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
            3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
            -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }

    62.5% {
        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
            3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
            -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }

    75% {
        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
            3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
            -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
    }

    87.5% {
        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
            3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
            -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
}


.user-info-container {
    background: white;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 10px;
    max-width: 40vw;
    min-width: 400px;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
}

.section-title {
    font-size: 22px;
    color: #007bff;
    margin-top: 5px;
    text-align: center;
}

.user-info-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 16px;
}

.user-tag {
    padding-right: 2vw;
}

.user-value {
    font-weight: bold;
    color: #555;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.material-symbols-outlined {
    font-size: 22px;
    margin-right: 8px;
    color: #007bff;
}

.md-table table {
    border-collapse: collapse;
}

.md-table th,
.md-table td {
    border: 0.5px solid;
}

.about-page-container {
    padding: 40px 20px;
    max-width: 1000px;
    /* Adjust as needed */
    margin: 0 auto;
    /* Centers the div horizontally */
}

.center-container {
    justify-content: center;
    width: 100%;
}

.about-card {
    max-width: 1000px;
    background-color: #f9f9f9;
    padding: 25px;
    padding-top: 10px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    margin-bottom: 30px;
}

.about-text {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
}

.about-link {
    color: #007bff;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
}

.about-link:hover {
    text-decoration: underline;
}

.analysis-list {
    max-width: 1000px;
    padding-left: 20px;
    line-height: 1.6;
}

/* Ensure Bootstrap modal displays correctly */
.modal {
    display: flex !important;
    /* Force modal to be visible */
    opacity: 1 !important;
    /* Ensure modal is fully visible */
    visibility: visible !important;
    z-index: 1050 !important;
    /* Keep modal above other elements */
    border-radius: 5px;
    padding: 50px;
}

/* Ensure modal backdrop (background overlay) appears correctly */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5) !important;
    /* Semi-transparent black */
    z-index: 1040 !important;
    /* Keep it below the modal but above other elements */
}

/* Ensure modal content appears in the center of the screen */
.modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 900px;
    /* Adjust width if needed */
    width: 90%;
    z-index: 1051 !important;
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 10px;
}

/* Customize modal header */
.modal-header {
    background-color: #f8f9fa;
    /* Light gray background */
    border-bottom: 1px solid #dee2e6;
}

/* Customize modal footer */
.modal-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

/* Close button styling */
.modal-header .btn-close {
    position: absolute;
    right: 15px;
    top: 15px;
}

/* Ensure buttons inside the modal are visible */
.modal-footer .btn {
    background-color: #007bff;
    /* Bootstrap primary color */
    color: white;
    border-radius: 5px;
    padding: 5px 15px;
    border: none;
}

.modal-footer .btn:hover {
    background-color: #0056b3;
    /* Darker blue on hover */
}

/* Prevent scroll issues when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Optional: Add a smooth fade-in effect */
.modal.fade.show {
    animation: fadeIn 0.3s ease-in-out;
}