/* Adjust the sidebar width to accommodate larger text */
#sidebar {
    width: 18rem; /* Adjust the width as needed */
}

/* Ensure the sidebar content can scroll if necessary */
#sidebar .sidebar-sticky {
    overflow-y: auto;
}

/* Adjust the padding to provide space for larger text */
#sidebar .nav-link {
    padding: 10px 15px; /* Adjust padding as needed */
}
#forms{
    max-width: 250px;
    margin: auto;
}
#forms2{
    margin: auto;
    min-width: 400px
}
#forms3{
    margin: 30px;
    max-width: 600px
}
#settingsForm{
    margin: auto;
    max-width: 400px
}
#apisForm{
    margin: 20px;
    max-width: 1200px;
}
/* Default font sizes */
/* Default font size */
:root {
    --base-font-size: 14px; /* Define the base font size */
}

/* Apply adjusted font size to all elements */

/* @media screen and (max-width: 600px) {
    * {
        font-size: 12px;
    }
} */
#chartButtons .btn {
   width: 100px;
}

#buttonForms .btn { 
    width: 50px;
}
#updateForm .btn {
    width: 120px;
}
.buttonForms input[type="submit"],
.buttonForms a.btn {
    flex: 1; /* Each button will take up an equal amount of space */
    margin-right: 10px; /* Add margin between buttons */
    width: 80px;
}

.card-header
{
    padding: 0.5rem 1rem; /* Adjust the top and bottom padding */
    margin-bottom: 0; /* Remove any bottom margin */
    font-size: 1rem; /* Adjust the font size */
}

.nav-item.logout:hover a {
    color: #ffffff;
    background-color: #cc0000; 
}

.settings-link {
    text-decoration: none; 
    color: inherit; 
}
.loading-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* Adjust height as needed */
}

#progress-bar-container {
    width: 300px; /* Adjust width as needed */
    height: 20px; /* Adjust height as needed */
    background-color: #ddd;
    border-radius: 5px;
    position: relative;
}

#progress-bar {
    width: 0%;
    height: 100%;
    background-color: #007bff; /* Change color as needed */
    border-radius: 5px;
}

#progress-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #333;
}