/* Custom Style for Active Button */
.filter-btn.active {
    background-color: #ff8c00; /* Brighter red/orange color for visibility */
    border-color: #ff5733;     /* Matching border color */
    color: white;              /* White text for contrast */
    box-shadow: 0 0 10px rgba(255, 87, 51, 0.5); /* Adding a shadow effect */
}

/* Optional: Change background on hover */
.filter-btn.active:hover {
    background-color: #ff4511; /* Slightly darker on hover for interaction feedback */
    border-color: #ff4511;
    color: white; /* Ensure text remains readable */
}

 .bold-textarea {
        font-weight: bold;
        /* Add any other desired styles */
  }

.sidebar {
    width: 2rem !important; /* Use !important to override conflicting styles */
    min-width: 2rem; /* Set a minimum width */
    /*position: fixed;
    /*overflow-y: auto; /* Enable vertical scrolling */
    /*top: 0;
    /*z-index: 1000; /* adjust as needed */
    /*background-color: #f8f9fa;
    /*min-height: 100vh; /* Ensure sidebar fills entire viewport height */
    /*padding-top: 0px; /* Adjust as needed */
    /*padding-bottom: 0px; /* Adjust as needed */
}
.sidebar-menu {
    width: 2rem !important; /* Use !important to override conflicting styles */
    min-width: 2rem; /* Set a minimum width */
    font-size: 18px;
    color: white; /* text color should be defined using the 'color' property */
    margin-bottom: 0rem; /* 'mb-5' should be 'margin-bottom: 5px;' */
}

.content {
    /*margin: 0 auto;
    /*margin-left: 0.5rem; /* Adjust the margin to create space between the sidebar and content */
    margin-top: 0.25rem;
    margin-left: 0rem;
    margin-right: 0rem;
    margin-bottom: 0.0rem;
    /*margin-left: 0;
    /* You can adjust the value based on the width of your sidebar */
     /*padding-top: 0px; /* Adjust as needed */
    /*padding-bottom: 0px; /* Adjust as needed */
}

.nms_text_over_flow {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: calc(100% );
     display: block; /*inline-block;*/
}

.nms-page-header,
.nms-page-header-short{
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    width: 100%;
}


.nms-page-sub-header,
.nms-page-sub-header-short{
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    color: blue;
}

.comic-font{
    font-family: 'Comic Sans MS', cursive, sans-serif;
}

.nav-item a {
    padding: 5px; /* Adjust the padding as needed */
}

.default-font{
    font-size: 12px;
}
.nms-font-s{
    font-size: 12px;
}
.nms-font-m{
    font-size: 14px;
}
.nms-font-l{
    font-size: 16px;
}
.nms-font-xl{
    font-size: 18px;
}
.align-center {
        text-align: center;
}

.alert-error {
    background-color: #ffcccc; /* Your desired background color for error messages */
    /* Add any other styling you want */
}
.nms-page-header{
    display: inline;
}

.nms-page-header-short {
    display: none;
}
.nms-page-sub-header{
    display: inline;
}

.nms-page-sub-header-short {
    display: none;
}

.container-fluid.content {
    flex-grow: 1;
    padding: 20px 120px 20px 20px;
}
/* On small screens (e.g., iPhone), show the short name and hide the full name */
@media only screen and (max-width: 768px) {
    .nms-page-header{
        display: none;
    }
    .nms-page-header-short{
        display: inline;
    }
     .nms-page-sub-header{
        display: none;
    }
    .nms-page-sub-header-short{
        display: inline;
    }
    .container-fluid.content {
        padding: 20px; /* Reduce or adjust the padding as needed */
    }
}

@media only screen and (max-width: 486px) {
    .nms-page-header{
        display: none;
    }
    .nms-page-header-short{
        display: none;
    }
    .container-fluid.content {
        padding: 20px; /* Reduce or adjust the padding as needed */
    }
}

@media screen and (max-width: 768px) {
    .page_heading {
        display: none;
    }
}

/* Show full username on larger screens */
.username {
    display: inline-block;
}

/* On small screens, show only the first letter of the username */
@media (max-width: 768px) {

    .username {
        display: none; /* Hide the full username text */
    }
}