body {
    font-family: 'Roboto', sans-serif;
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

.pull-right {
    float: right !important;
}

img.logo-img {
    width: 110px;
    height: 120px;
    object-fit: cover;
    margin-top: -28px;
}

.btn-white {
    color: #B3BC8F !important;
}

.btn-black {
    color: black !important;
}

.btn-logout {
    color: #C06014;
    margin-right: 15px;
}

    .btn-logout:hover {
        color: #EDDBCD;
    }

.btn-theme {
    background-color: #4b646f;
}

.btn-basic {
    color: #C06014;
}

    .btn-basic:hover {
        color: #EDDBCD;
    }

.btn-basicSearch {
    color: #007bff;
}

.btn-basicEdit {
    color: #ffc107;
}

.btn-basicDetail {
    color: #17a2b8;
}

.btn-basicDelete {
    color: #dc3545;
}

.btn-basicDownload {
    color: #28a745;
}

.btn-resourceControl:hover {
    color: #C06014;
}

.logo-theme {
    color: #C06014;
    font-weight: bold;
    /*color: #d33724;*/
}



/* pagination*/
.pagination .page-item.active .page-link {
    background-color: #004d00;
    border-color: #004d00;
    color: white;
}

.pagination .page-link {
    color: #004d00;
    border: 1px solid #ddd;
    margin: 0 2px;
    border-radius: 0; /* Optional: make sharp edges */
}

    .pagination .page-link:hover {
        background-color: #004d00;
        color: white;
    }

    /*search*/

#searchHerdInput {
    display: block !important;
    width: 100% !important;
    padding: 8px;
    margin-bottom: 10px;
}

/* Green style for "Select" */
.btn-select {
    background-color: #28a745; /* Bootstrap success green */
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

/* Red style for "Remove" */
.btn-remove {
    background-color: #dc3545; /* Bootstrap danger red */
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

/* Optional: hover effect */
.btn-select:hover {
    background-color: #218838;
}

.btn-remove:hover {
    background-color: #c82333;
}




/*Control Padding-Margin*/
.bottom-margn-10px {
    margin-bottom: 10px;
}

.left-margn-15px {
    margin-left: 15px;
}

.left-margn-10px {
    margin-left: 10px !important;
}

.margin-1-percent {
    margin: 1%;
}


.no-top-margin {
    margin-top: 0px !important;
}

/*Control Text-Align*/
.text-align-off {
    text-align: initial !important;
}

/*Categories Hierachical Structure*/
.just-padding {
    padding: 15px;
}

.list-group.list-group-root {
    padding: 0;
    overflow: hidden;
}

    .list-group.list-group-root .list-group {
        margin-bottom: 0;
    }

    .list-group.list-group-root .list-group-item {
        border-radius: 0;
        border-width: 1px 0 0 0;
    }

    .list-group.list-group-root > .list-group-item:first-child {
        border-top-width: 0;
    }

    .list-group.list-group-root > .list-group > .list-group-item {
        padding-left: 30px;
    }

    .list-group.list-group-root > .list-group > .list-group > .list-group-item {
        padding-left: 45px;
    }

.list-group-item .glyphicon {
    margin-right: 5px;
}

/*Custom Select*/
.custom-select-page {
    display: inline-block;
    width: 40% !important;
}

.custom-select {
    display: inline-block;
    width: 55% !important;
}

/*Menu*/
.menu-icon {
    display: inline-block;
    margin-left: 10px !important;
}

/*Dashboard*/
.border-shadow-left-bottom {
    -webkit-box-shadow: -8px 3px 25px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: -8px 3px 25px 1px rgba(0,0,0,0.75);
    box-shadow: -8px 3px 25px 1px rgba(0,0,0,0.75);
}

.border-shadow-right-bottom {
    -webkit-box-shadow: 8px 3px 25px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 8px 3px 25px 1px rgba(0,0,0,0.75);
    box-shadow: 8px 3px 25px 1px rgba(0,0,0,0.75);
}

/*Search Page*/
.width-constant {
    width: 96px !important;
}

/*Edit-Create Page*/
.width-double-constant {
    width: 192px !important;
}

/*Bootstrap Label*/
.medium-lable {
    font-size: medium;
}

.large-lable {
    font-size: large;
}

.pageTitle {
    text-align: left;
    vertical-align: top;
    padding: 0;
    font-size: xx-large;
}

.projectTitle {
    color: #ebeaea;
    margin: 8px 0px 0px 8px;
    text-align: left;
}

p.projectText {
    text-overflow: ellipsis;
    max-width: 200px;
}

.menuItemSelectable {
    cursor: pointer;
}
/*
 * DASHBOARD ANIMATIONS
 * Quick animation intro: https://www.w3schools.com/css/css3_animations.asp
 * Google's Material Design animation guide: https://material.io/guidelines/motion/duration-easing.html#duration-easing-speed
 */
@keyframes grow {
    to {
        transform: scale(1.01);
    }
}

@keyframes slideDown {
    from {
        display: none;
        transform: translate(0, -10%);
    }

    to {
        display: initial;
        transform: none;
    }
}

@keyframes slideLeft {
    from {
        display: none;
        transform: translate(-2%, 0);
    }

    to {
        display: initial;
        transform: none;
    }
}

@keyframes slideRight {
    from {
        display: none;
        transform: translate(5%, 0);
    }

    to {
        display: initial;
        transform: none;
    }
}

@keyframes slideUp {
    from {
        display: none;
        transform: translate(0, 10%);
    }

    to {
        display: initial;
        transform: none;
    }
}

.anim-slideLeft {
    animation: slideLeft 0.5s;
}

.anim-slideDown {
    animation: slideDown 0.5s;
}

.anim-slideUp {
    animation: slideUp 0.5s;
}

.anim-slideRight {
    animation: slideRight 0.5s;
}
/* On mouse over, apply grow animation */
.anim-grow:hover {
    animation: grow 0.1s forwards;
    -webkit-animation: grow 0.1s forwards; /* for less modern browsers */
}
/* On mouse click, go back to "pre-animation" state
 * NOTE, :hover must come before :active
 * @menuItemSelectable: defined in Content/index.css
 */
.menuItemSelectable.anim-grow:active {
    animation: none !important;
    -webkit-animation: none !important;
}

.label-pending {
    background-color: orange;
    color: orange;
}

.container {
    padding: 5px;
    margin-top: 20px;
    background-color: white;
    width: 100%;
}

.form-litssa-1-col-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 1 columns */
    gap: 10px; /* Adds space between grid items */
    padding: 20px;
   /* border: 1px solid #ddd;  Light gray border */
    border-radius: 0px; /* Rounded corners for a smoother look */

  /*  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for a lifted effect */
}

.form-litssa-2-col-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
    gap: 10px; /* Adds space between grid items */
    padding: 20px;
   /* border: 0px solid #ddd; /* Light gray border */
    border-radius: 0px; /* Rounded corners for a smoother look */
  
   /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for a lifted effect */
}

.form-litssa-3-col-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 5px;
    padding: 20px;
    
    border-radius: 0px; /* Rounded corners for a smoother look */
}
   
.form-litssa-4-col-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 3 equal columns */
    gap: 10px; /* Adds space between grid items */
    padding: 20px;
    border: 0px solid #ddd; /* Light gray border */
    border-radius: 0px; /* Rounded corners for a smoother look */
}

.form-litssa-5-col-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 3 equal columns */
    gap: 10px; /* Adds space between grid items */
    padding: 20px;
    border: 0px solid #ddd; /* Light gray border */
    border-radius: 0px; /* Rounded corners for a smoother look */
}

.form-litssa-6-col-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 3 equal columns */
    gap: 10px; /* Adds space between grid items */
    padding: 20px;
    border: 0px solid #ddd; /* Light gray border */
    border-radius: 0px; /* Rounded corners for a smoother look */
}

.form-litssa-box-grid-item {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 1 columns */
    gap: 30px; /* Adds space between grid items */
    padding: 20px;

}

.form-grid-item {
    display: flex;
    flex-direction: column;
}

.form-grid-inline-item {
    display: flex;
    flex-direction: row; /* Align children inline */
    align-items: center; /* Vertically align items if needed */
    margin-bottom: 10px; /* Optional: space between items */
}

.form-grid-item label {
    font-weight: bold; /* Makes the text bold */
    text-align: left; /* Aligns text to the left */
    margin-bottom: 5px; /* Adds space between the label and the input */
    display: block; /* Ensures the label spans the full width above the input */
    font-size: 16px; /* Adjusts the font size for better readability */
    color: #333; /* Sets a neutral dark gray color */
    line-height: 1.5; /* Improves readability with balanced spacing */
}

    /* Optional: Add focus styles for better accessibility */
    .form-grid-item label:focus {
        color: #007bff; /* Changes color on focus (e.g., Bootstrap primary color) */
        outline: 1px dotted #007bff; /* Adds a focus outline */
        outline-offset: 2px;
    }


.form-grid-item input {
    width: 100% !important; /* Ensures the input takes up the remaining space */
    max-width: 300px !important; /* Optional: limit input width */
    background-color: white !important; /* Set background color to white */
    border: 1px solid #ccc !important; /* Optional: add a border */
    padding: 8px; /* Optional: add padding to the input */
    box-sizing: border-box; /* Ensures padding is included in width calculation */
}

/* Styling for individual grid items */
.form-inline-grid-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem; /* Spacing between elements in the column */
}

.form-grid-inline-item label {
    margin-right: 5px; /* Space between label and input */
}

.form-inline-grid-item input {
    width: 100% !important; /* Ensures the input takes up the remaining space */
    max-width: 300px !important; /* Optional: limit input width */
    background-color: white !important; /* Set background color to white */
    border: 1px solid #ccc !important; /* Optional: add a border */
    padding: 8px; /* Optional: add padding to the input */
    box-sizing: border-box; /* Ensures padding is included in width calculation */
}

.form-control {
    display: block; /* Ensures block-level layout for input */
    width: 100%; /* Makes the input take the full width of its container */
    padding: 0.375rem 0.75rem; /* Adds comfortable padding inside the input */
    font-size: 1rem; /* Sets a readable font size */
    font-weight: 400; /* Sets a normal font weight */
    line-height: 1.5; /* Ensures proper line height for text inside */
    color: #495057; /* Default text color */
    background-color: #fff; /* White background */
    background-clip: padding-box; /* Ensures background doesn’t bleed into borders */
    border: 1px solid #ced4da; /* Light gray border */
    border-radius: 0.25rem; /* Slightly rounded corners */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Smooth transition for focus state */
}

    .form-control:focus {
        color: #495057; /* Keeps text color unchanged on focus */
        background-color: #fff; /* Keeps background color unchanged */
        border-color: #80bdff; /* Blue border on focus */
        outline: 0; /* Removes the default browser outline */
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Subtle blue shadow for focus */
    }

    .form-control::placeholder {
        color: #6c757d; /* Gray color for placeholder text */
        opacity: 1; /* Ensures full opacity for placeholders */
    }

    .form-control:disabled,
    .form-control[readonly] {
        background-color: #e9ecef; /* Light gray background for disabled/readonly inputs */
        opacity: 1; /* Ensures consistent appearance */
    }

    .form-control.is-invalid {
        border-color: #dc3545; /* Red border for invalid inputs */
        padding-right: calc(1.5em + 0.75rem); /* Adjust padding for validation icons */
        background-color: #fff5f5; /* Light red background for invalid state */
    }

        .form-control.is-invalid:focus {
            border-color: #dc3545; /* Red border when invalid and focused */
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Red shadow for invalid focus */
        }

    .form-control.is-valid {
        border-color: #28a745; /* Green border for valid inputs */
        padding-right: calc(1.5em + 0.75rem); /* Adjust padding for validation icons */
    }

        .form-control.is-valid:focus {
            border-color: #28a745; /* Green border when valid and focused */
            box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); /* Green shadow for valid focus */
        }


.hidden-line {
    display: none; /* Hides the hr completely */
}

.readonly-dropdown {
    background-color: #f5f5f5 !important;
    color: #666 !important;
    pointer-events: none;
    cursor: not-allowed;
}

.custom-dropdown {
    width: 100%; /* Full width for mobile devices */
    max-width: 400px; /* Set a max-width for larger screens */
    padding: 2px 10px; /* Inner padding for better usability */
    margin: 5px auto 22px auto; /* Center the dropdown on small screens */
    border: 1px solid #004d40; /* Green border for DALRRD branding */
    display: block; /* Ensures block display for alignment */
    background: #f9f9f9; /* Light background for professional look */
    border-radius: 4px; /* Rounded corners for a clean design */
    height: 40px; /* Fixed height for consistency */
    font-size: 14px; /* Standard font size */
    color: #004d40; /* Text color reflecting DALRRD's theme */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle inner shadow */
    font-family: "Arial", sans-serif; /* Professional and clean font */
    transition: all 0.3s ease; /* Smooth hover and focus transitions */
}

    .custom-dropdown:hover {
        background: #e8f5e9; /* Light greenish background on hover */
        border-color: #00796b; /* Darker green border for hover effect */
        cursor: pointer; /* Indicate interactivity */
    }

    .custom-dropdown:focus {
        outline: none; /* Remove default focus outline */
        border-color: #00796b; /* Emphasized border on focus */
        box-shadow: 0 0 5px rgba(0, 121, 107, 0.5); /* Focus glow effect */
    }

/* Media Queries for Responsive Design */
@media (max-width: 768px) { /* Tablets and smaller screens */
    .custom-dropdown {
        width: 90%; /* Take up most of the screen width */
        max-width: none; /* Remove max-width to use full available space */
        font-size: 13px; /* Slightly smaller font size for smaller screens */
    }
}

@media (max-width: 480px) { /* Small phones */
    .custom-dropdown {
        width: 100%; /* Full width for very small screens */
        height: 45px; /* Slightly larger height for better usability */
        font-size: 12px; /* Smaller font size for limited space */
    }
}



.litssa-textarea {
    width: 100%; /* Full width */
    padding: 10px; /* Space inside the textarea */
    border: 1px solid #4CAF50; /* DALRRD green for the border */
    border-radius: 4px; /* Rounded corners */
    background: #ffffff !important; /* Clean white background */
    font-size: 16px; /* Standard font size */
    color: #333333; /* Neutral text color for readability */
    resize: vertical; /* Allow resizing only vertically */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle inner shadow */
    height: 70px; /* Initial height */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

    .litssa-textarea:focus {
        border-color: #1E7D22; /* Darker green for focus */
        box-shadow: 0 0 5px rgba(30, 125, 34, 0.5); /* Green glow on focus */
        outline: none; /* Remove default outline */
    }

    .litssa-textarea::placeholder {
        color: #888888; /* Subtle placeholder text */
        font-style: italic; /* Slightly italic for differentiation */
    }

.litssa-textarea::placeholder {
    color: #888888; /* Subtle placeholder text */
    font-style: italic; /* Slightly italic for differentiation */
}

@media (max-width: 768px) {
    .litssa-textarea {
        font-size: 14px; /* Adjust font size for smaller screens */
        padding: 8px; /* Adjust padding for mobile */
        height: auto; /* Let height adjust naturally */
    }
}

@media (prefers-color-scheme: dark) {
    .litssa-textarea {
        background: #2c2c2c !important; /* Dark background for dark mode */
        color: #ffffff; /* Light text for readability */
        border: 1px solid #4CAF50; /* Consistent branding */
    }

        .litssa-textarea::placeholder {
            color: #777777; /* Adjust placeholder color for dark mode */
        }
}

#cover-spin {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.7);
    z-index: 9999;
    display: none;
}

    #cover-spin .spinner {
        width: 50px; /* Size of the spinner */
        height: 50px; /* Size of the spinner */
        border: 4px solid #f3f3f3; /* Light grey border */
        border-top: 4px solid #3498db; /* Blue border at the top for a spinning effect */
        border-radius: 50%; /* Circular shape */
        animation: spin 1s linear infinite; /* Spin animation */
    }

    #cover-spin .loading-text {
        font-size: 16px; /* Text size */
        color: #333; /* Text color */
        margin-top: 10px; /* Space between the spinner and the text */
    }

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#cover-spin::after {
    content: '';
    display: block;
    position: absolute;
    left: 48%;
    top: 40%;
    width: 40px;
    height: 40px;
    border-style: solid;
    border-color: black;
    border-top-color: transparent;
    border-width: 4px;
    border-radius: 50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

#loading-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.7);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
}

    #loading-spinner .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid #f3f3f3;
        border-top: 5px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    #loading-spinner .loading-text {
        margin-top: 10px;
        font-size: 16px;
        color: #333;
    }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.form-group-box {
    border: 1px solid #ddd; /* Adds a light border around the fieldset */
    padding: 15px; /* Adds padding inside the fieldset */
    border-radius: 8px; /* Rounds the corners of the fieldset */
    margin-bottom: 20px; /* Adds space below the fieldset */
}

    .form-group-box legend {
        font-weight: bold; /* Makes the legend text bold */
        padding: 0 10px; /* Adds padding around the legend text */
        color: #333; /* Sets the text color */
    }
.form-row {
    display: flex; /* Enable Flexbox on the container */
    gap: 20px; /* Space between items */
    align-items: center; /* Align items vertically */
    justify-content: space-between; /* Distributes space between items */
    flex-wrap: wrap; /* Allows wrapping if the space is too small */
}

.form-grid-item {
    flex: 1; 
    min-width: 200px; 
    max-width: 100%; 
    display: flex;
    flex-direction: column; 
}

.custom-file-upload {
    display: flex;
    flex-direction: column; /* Stacks file input and label vertically */
}

.form-control, .litssa-textarea {
    width: 100%; /* Ensures the inputs take the full width of their container */
    box-sizing: border-box; /* Includes padding and border in the element's total width */
}

.form-group-box {
    border: 1px solid #ddd; /* Adds a light border */
    padding: 15px; /* Adds padding inside the fieldset */
    border-radius: 8px; /* Rounds the corners */
    margin-top: 20px; /* Adds space above the fieldset */
}

    .form-group-box legend {
        font-weight: bold; /* Makes legend text bold */
        padding: 0 10px; /* Adds padding around the legend text */
        color: #333; /* Sets the text color */
    }

.custom-file-upload {
    display: flex; /* Use flexbox to align items */
    align-items: center; /* Vertically centers items */
    gap: 8px; /* Space between the icon and text */
    cursor: pointer; /* Indicates clickable area */
}

.custom-file-label {
    display: flex; /* Make label a flex container */
    align-items: center; /* Center items vertically within the label */
    background-color: #f8f9fa; /* Light background to differentiate */
    padding: 10px 15px; /* Add some padding for better appearance */
    border: 1px solid #ddd; /* Light border around the label */
    border-radius: 4px; /* Rounds the corners */
}

.custom-file-upload input[type="file"] {
    display: none; /* Hide the actual file input */
}

.custom-file-label i {
    margin-right: 8px; /* Space between icon and text */
    font-size: 16px; /* Adjust icon size */
    color: #007bff; /* Icon color */
}

.form-actions {
    display: flex; /* Align buttons horizontally */
    gap: 10px; /* Space between the buttons */
    margin-top: 20px; /* Add some space above the buttons */
    text-align: left;
}

.btn {
    display: inline-flex; /* Align icon and text */
    align-items: center; /* Vertically center items */
    padding: 10px 20px; /* Padding around the text */
    font-size: 16px; /* Font size for readability */
    border: none; /* Remove default button borders */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor for interactivity */
    transition: background-color 0.3s; /* Smooth color change on hover */
}

    .btn i {
        margin-right: 8px; /* Space between icon and text */
    }

/* Button Styling */
.btn-submit {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff !important; /* White text */
    background-color: #007bff !important; /* Primary blue color */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

    /* Hover and Focus States */
    .btn-submit:hover,
    .btn-submit:focus {
        background-color: #0056b3; /* Darker blue on hover */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow */
        outline: none;
    }

    /* Disabled State */
    .btn-submit:disabled {
        background-color: #6c757d; /* Gray for disabled */
        cursor: not-allowed;
        opacity: 0.7;
    }

    /* Active State */
    .btn-submit:active {
        background-color: #004085; /* Even darker blue for active */
        box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    }


/* Cancel Button Styling */
.btn-cancel {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #6c757d !important; /* Gray text */
    background-color: #f8f9fa !important; /* Light background */
    border: 1px solid #6c757d !important; /* Gray border */
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

    /* Hover and Focus States */
    .btn-cancel:hover,
    .btn-cancel:focus {
        background-color: #e2e6ea; /* Slightly darker gray on hover */
        color: #5a6268; /* Darker text */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        outline: none;
    }

    /* Disabled State */
    .btn-cancel:disabled {
        background-color: #f8f9fa; /* Same as default background */
        color: #adb5bd; /* Lighter gray for disabled */
        border-color: #adb5bd; /* Match border to text color */
        cursor: not-allowed;
        opacity: 0.7;
    }

    /* Active State */
    .btn-cancel:active {
        background-color: #dae0e5; /* Darker gray for active */
        box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2);
    }

.btn i {
    margin-right: 8px; /* Space between icon and text */
    font-family: "Font Awesome 5 Free"; /* Ensure Font Awesome is used */
    font-weight: 900; /* For solid icons */
}

.required {
    color: red;
    font-size: medium; /* Adjust the size as needed */
    margin-left: 5px;
    vertical-align: middle; /* Adjusts the vertical alignment of the asterisk */
}

.error {
    color: red;
    font-size: medium
}

.text-danger {
    display: none; /* Hidden by default */
}

.field-validation-error {
    display: inline-block; /* Show only when there's an error */
    color: #e74c3c;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 5px;
    background-color: #fce4e4;
    border-radius: 4px;
    margin-top: 5px;
}

.field-validation-valid {
    display: none; /* Ensure no styles when valid */
}

.text-danger:hover {
   background-color: #f5c6c6; /* Slightly darker background on hover */
   transition: background-color 0.3s ease-in-out; /* Smooth transition */
 }


.required {
    color: red;
    font-weight: bold;
    margin-left: 2px; /* Optional: adjust space between text and asterisk */
}

/* Additional styling for a more formal appearance */
.menu-container h2 {
    color: #004b87;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}


h2 {
    font-size: 24px; /* Adjusts the size of the font */
    color: #000000; /* Sets the text color to white for contrast */
    /*background-color: #F2F3F4;  Sets the background color */
    margin: 20px 0; /* Adds space above and below the header */
    text-align: center; /* Centers the text */
    font-weight: bold; /* Makes the text bold */
    text-transform: uppercase; /* Converts the text to uppercase */
    letter-spacing: 1px; /* Adds spacing between letters */
    line-height: 1.4; /* Adjusts the line height */
    padding: 10px 15px; /* Adds space inside the header */
    border-radius: 5px; /* Rounds the corners of the background */
}

#rsaIdentificationDiv {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates two equal-width columns */
    gap: 20px; /* Adds spacing between the items */
}

input[type="file"] {
    padding-top: 10px;
}

.form-control, .litssa-textarea1 {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
}

.fa-passwd-reset > .fa-lock, .fa-passwd-reset > .fa-key {
    font-size: 0.85rem;
}

a.my-class:link {
    color: red
}

a {
    z-index: 1000;
    position: relative;
}

/* Style for the fieldset */
fieldset {
    border: 2px solid #007bff; /* Bootstrap's primary blue */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Soft shadow for a polished look */
    background-color: #f9f9f9; /* Light background */
}

/* Style for the legend */
legend {
    font-size: 1.2rem;
    font-weight: bold;
    color: #007bff; /* Match the border color */
    padding: 0 10px; /* Spacing around the text */
    border-radius: 4px;
    background-color: #ffffff; /* White background to overlap the fieldset border */
    border: 2px solid #007bff;
}

/* Responsive tweaks for small screens */
@media (max-width: 768px) {
    fieldset {
        padding: 15px;
    }

    legend {
        font-size: 1.1rem;
    }
}

/* Full-width input fields */
/*input[type=text], input[type=password], input[type=email], input[type=number] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}

    input[type=text]:focus, input[type=password]:focus {
        background-color: white;
        outline: none;
    }*/

#confirmPasswordHintMessage {
    display: none; /* Hidden by default */
    font-size: 0.9rem; /* Smaller font size */
    margin-top: 5px; /* Space above the hint */
    padding: 8px; /* Padding around the hint */
    border-radius: 4px; /* Rounded corners */
    transition: all 0.3s ease; /* Smooth transition */
}

    /* Style for matching passwords */
    #confirmPasswordHintMessage.match {
        color: #28a745; /* Green color for success */
        background-color: #d4edda; /* Light green background */
        border: 1px solid #c3e6cb; /* Green border */
    }

    /* Style for non-matching passwords */
    #confirmPasswordHintMessage.not-match {
        color: #dc3545; /* Red color for error */
        background-color: #f8d7da; /* Light red background */
        border: 1px solid #f5c6cb; /* Red border */
    }

.field-validation-success {
    display: inline-block; /* Show only when there's success */
    color: green; /* Use green for success */
    font-size: 0.9rem;
    font-weight: bold;
    padding: 5px;
    background-color: #d4edda; /* Light green background */
    border-radius: 4px;
    margin-top: 5px;
}

/* Style for the search icon */
.search-icon {
    font-size: 24px; /* Adjust font size */
    cursor: pointer; /* Pointer cursor to indicate clickable */
    background-color: #007bff; /* Background color (blue) */
    color: white; /* Icon color */
    padding: 10px; /* Padding around the icon */
    display: inline-flex; /* Make the icon behave like a button */
    align-items: center; /* Center the icon inside the button */
    justify-content: center; /* Center the icon inside the button */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    margin-left: 10px; /* Space between icon and other elements */
    width: 40px; /* Explicit width to control the size */
    height: 40px; /* Explicit height to keep it circular */
}

    /* Hover effect */
    .search-icon:hover {
        background-color: #0056b3; /* Darker blue when hovering */
        transform: scale(1.1); /* Slightly enlarge the icon */
    }

    /* Optional: Add focus styles for accessibility */
    .search-icon:focus {
        outline: none; /* Remove default outline */
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Focus ring */
    }




.custom-checkbox {
    width: 20px; /* Set the width */
    height: 20px; /* Set the height */
    cursor: pointer; /* Pointer cursor when hovered */
    accent-color: teal; /* Set the checkbox color (modern browsers) */
    margin: 0 auto; /* Center horizontally */
    border: 2px solid #007bff; /* Add a border color */
    border-radius: 4px; /* Rounded corners for the checkbox */
    background-color: white; /* Background color */
    transition: all 0.3s ease; /* Smooth transition for hover and checked states */
}

    .custom-checkbox:checked {
        background-color: #007bff; /* Change background color when checked */
        border-color: #0056b3; /* Change border color when checked */
    }

        .custom-checkbox:checked::before {
            content: '\2713'; /* Unicode checkmark symbol */
            font-size: 14px; /* Size of the checkmark */
            color: white; /* Color of the checkmark */
            position: absolute;
            top: 2px; /* Adjust position */
            left: 4px; /* Adjust position */
        }

    /* Optional: Hover effect */
    .custom-checkbox:hover {
        background-color: #f0f8ff; /* Light blue background when hovered */
        border-color: #0056b3; /* Change border on hover */
    }

    /* Optional: Focus effect (when the checkbox is focused) */
    .custom-checkbox:focus {
        outline: 2px solid #ff9800; /* Focus border */
        outline-offset: 2px; /* Offset the outline */
    }

/* Style for the entire popup */
.swal-custom-popup {
    background-color: #f9fafb; /* Light gray background for a neutral, professional tone */
    border-radius: 10px; /* Rounded corners */
    border: 2px solid #006837; /* DALRRD green border */
    padding: 20px; /* Padding inside the popup */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    max-width: 500px; /* Max width for responsiveness */
    width: 100%; /* Full width on smaller screens */
    text-align: center; /* Center-align text */
}

/* Style for the title */
.swal-custom-title {
    color: #006837; /* DALRRD green text */
    font-family: 'Arial', sans-serif;
    font-size: 24px; /* Slightly larger for prominence */
    font-weight: bold; /* Bold text for emphasis */
    margin-bottom: 15px; /* Space below the title */
}

/* Style for the content (message text) */
.swal-custom-content {
    color: #333; /* Dark gray text for readability */
    font-family: 'Verdana', sans-serif;
    font-size: 16px; /* Readable font size */
    margin-top: 10px; /* Space above the content */
    line-height: 1.6; /* Improved line height for readability */
}

/* Style for the confirm button */
.swal-custom-button {
    background-color: #f8b600; /* DALRRD yellow/gold background */
    color: #fff; /* White text */
    font-family: 'Tahoma', sans-serif;
    font-size: 16px; /* Larger text for buttons */
    font-weight: bold;
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    padding: 12px 25px; /* Spacious padding for better clickability */
    cursor: pointer; /* Pointer cursor for buttons */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effect */
}

    .swal-custom-button:hover {
        background-color: #e6a700; /* Slightly darker yellow on hover */
        transform: scale(1.05); /* Slightly enlarge the button */
    }

/* Style for the cancel button */
.swal-custom-cancel {
    background-color: #b22222; /* South African flag red background */
    color: #fff; /* White text */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    padding: 12px 25px; /* Spacious padding */
    font-size: 16px; /* Consistent font size with the confirm button */
    cursor: pointer; /* Pointer cursor */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effect */
}

    .swal-custom-cancel:hover {
        background-color: #8b0000; /* Darker red on hover */
        transform: scale(1.05); /* Slightly enlarge the cancel button */
    }

/* Ensure the buttons are displayed next to each other */
.swal-custom-popup .swal-button-container {
    display: flex;
    justify-content: space-between; /* Spread buttons apart */
    gap: 15px; /* Space between buttons */
}

.spacer {
    height: 140px; /* Equivalent of 7 <br> tags */
}

.litssa-spacer-3 {
    height: 60px; /* Equivalent of 3 <br> tags */
}

.litssa-spacer-2 {
    height: 40px; /* Equivalent of 2 <br> tags */
}

.litssa-spacer-1 {
    height: 20px; /* Equivalent of 1 <br> tag */
}

.litssa-spacer-4 {
    height: 80px; /* Equivalent of 3 <br> tags */
}




/* Style for all radio buttons */
.form-check-input {
    width: 20px; /* Adjust size */
    height: 20px; /* Adjust size */
    accent-color: #007bff; /* Change the color of the radio button */
    cursor: pointer; /* Show pointer on hover */
    border: 2px solid #007bff; /* Optional border styling */
    border-radius: 50%; /* Make it circular */
}

    /* Add hover effect */
    .form-check-input:hover {
        box-shadow: 0 0 5px #007bff;
    }

    /* For checked state */
    .form-check-input:checked {
        background-color: #007bff; /* Background color when checked */
        border-color: #0056b3; /* Border color when checked */
    }

.form-border {
    border: 1px solid #ccc;
}

.form-grid-litssa-search-inline {
    display: flex;
    align-items: center; /* Vertically aligns the items in the center */
    justify-content: flex-start; /* Ensures the items start from the left */
    gap: 20px; /* Optional: Space between items */
}

    .form-grid-litssa-search-inline label {
        margin-right: 10px; /* Adds some space between label and input field */
    }
.custom-dropdown-search,
.form-control {
    width: auto; /* Ensures the width of dropdown and input is based on content */
    min-width: 150px; /* Optional: sets a minimum width */
}

/* Optional styling for radio buttons */
.form-check-input {
    cursor: pointer;
}

/* Base Styling for Anchor Tag */
a {
    color: #007bff; /* Bootstrap's primary blue color */
    text-decoration: none; /* Remove underline by default */
    font-size: 16px; /* Adjust font size */
    font-weight: 500; /* Semi-bold for better visibility */
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

    /* Hover State */
    a:hover {
        color: #0056b3; /* Darker shade of blue for hover */
        text-decoration: underline; /* Add underline on hover */
    }

    /* Focus State */
    a:focus {
        color: #0056b3; /* Match hover color */
        text-decoration: underline;
        outline: 2px dashed #007bff; /* Optional focus outline for accessibility */
        outline-offset: 2px;
    }

    /* Active State */
    a:active {
        color: #003865; /* Even darker shade for active state */
        text-decoration: underline;
    }

    /* Visited State */
    a:visited {
        color: #6f42c1; /* Optional: Change color for visited links (e.g., purple) */
    }

    /* Disabled State */
    a[disabled] {
        color: #adb5bd; /* Light gray for disabled links */
        pointer-events: none; /* Prevent interaction */
        cursor: not-allowed;
    }

/* Full CSS for form-control */
.litssa-form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem; /* Adjust for better padding */
    font-size: 1rem;
    line-height: 1.5;
    color: #495057; /* Dark gray for text */
    background-color: #fff; /* White background */
    background-clip: padding-box;
    border: 1px solid #ced4da; /* Light gray border */
    border-radius: 0.25rem; /* Slightly rounded corners */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .litssa-form-control:focus {
        color: #495057; /* Keep text color consistent */
        background-color: #fff; /* Ensure focus background remains white */
        border-color: #80bdff; /* Blue border on focus */
        outline: none; /* Remove default outline */
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add subtle shadow */
    }

    .litssa-form-control::placeholder {
        color: #6c757d; /* Light gray placeholder text */
        opacity: 1; /* Ensure visibility */
    }

    .litssa-form-control:disabled,
    .litssa-form-control[readonly] {
        background-color: #e9ecef; /* Light gray background for disabled/readonly */
        opacity: 1;
    }

textarea.litssa-form-control {
    height: auto; /* Ensure textarea adjusts to content */
    resize: vertical; /* Allow vertical resizing */
}

select.litssa-form-control {
    appearance: none; /* Remove native dropdown styling */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zM2 5L0 3h4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 8px 10px;
}

.litssa-form-control:invalid {
    border-color: #dc3545; /* Red border for invalid inputs */
}

.litssa-form-control.is-valid {
    border-color: #28a745; /* Green border for valid inputs */
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.litssa-form-control.is-invalid {
    border-color: #dc3545; /* Red border for invalid inputs */
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Full CSS for form-group */
.litssa-form-group {
    margin-bottom: 1.5rem; /* Space between form groups for better layout */
    position: relative; /* For positioning validation feedback or icons */
}

    .litssa-form-group label {
        display: block; /* Ensure labels stack above inputs */
        font-weight: 500; /* Medium weight for better readability */
        margin-bottom: 0.5rem; /* Spacing between label and input */
        color: #212529; /* Dark gray for professional look */
        font-size: 0.95rem; /* Slightly smaller than default font size */
    }

    .litssa-form-group .form-control {
        margin-bottom: 0.25rem; /* Slight spacing between input and feedback messages */
    }

    .litssa-form-group .required {
        color: #dc3545; /* Red for required indicators */
        font-weight: bold; /* Bold emphasis */
        margin-left: 0.25rem; /* Slight space after label text */
    }

    .litssa-form-group .text-danger {
        color: #dc3545; /* Red text for errors */
        font-size: 0.875rem; /* Smaller font size for feedback messages */
        margin-top: 0.25rem; /* Space between input and feedback */
        display: block;
    }

    .litssa-form-group .text-success {
        color: #28a745; /* Green text for success feedback */
        font-size: 0.875rem; /* Match error feedback size */
        margin-top: 0.25rem;
        display: block;
    }

    .litssa-form-group input[type="checkbox"],
    .litssa-form-group input[type="radio"] {
        display: inline-block; /* Inline for radio and checkbox inputs */
        margin-right: 0.5rem; /* Space between input and label */
    }

    .litssa-form-group .form-check {
        display: flex; /* Flex for better alignment */
        align-items: center; /* Center input and label vertically */
        gap: 0.5rem; /* Space between the checkbox or radio and the label */
        margin-bottom: 0.5rem; /* Add spacing for each check item */
    }

        .litssa-form-group .form-check input {
            margin: 0; /* Remove default browser margin for checkboxes/radios */
        }

        .litssa-form-group .form-check label {
            margin: 0; /* Remove unnecessary margin for inline labels */
        }

    .litssa-form-group .tooltip {
        position: absolute; /* Position tooltips near their related inputs */
        top: 50%; /* Center vertically */
        right: -1.5rem; /* Position near the input field */
        transform: translateY(-50%);
        font-size: 0.875rem;
        color: #fff;
        background-color: #000;
        padding: 0.5rem;
        border-radius: 0.25rem;
        display: none; /* Hide by default */
    }

    .litssa-form-group:hover .tooltip {
        display: block; /* Show tooltips on hover */
    }

/* Professional input styling */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
    width: 100%; /* Full-width to adapt to container */
    padding: 10px 15px; /* Balanced padding for better spacing */
    margin-bottom: 1rem; /* Consistent vertical spacing between inputs */
    display: block; /* Ensure each input starts on a new line */
    border: 1px solid #ced4da; /* Subtle border for structure */
    border-radius: 4px; /* Rounded corners for a modern look */
    background-color: #f8f9fa; /* Light gray for a clean, muted background */
    font-size: 1rem; /* Comfortable text size */
    font-family: inherit; /* Use the font of the parent element */
    color: #495057; /* Dark gray for input text */
    box-sizing: border-box; /* Prevent padding from affecting width */
    transition: border-color 0.3s ease, background-color 0.3s ease; /* Smooth interaction feedback */
}

    /* Focus state for better accessibility */
    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus {
        background-color: #ffffff; /* Bright white background for focus */
        border-color: #80bdff; /* Highlighted blue border */
        outline: none; /* Remove default browser outline */
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.25); /* Soft glow effect */
    }

    /* Disabled state styling */
    input[type="text"]:disabled,
    input[type="password"]:disabled,
    input[type="email"]:disabled,
    input[type="number"]:disabled {
        background-color: #e9ecef; /* Subtle gray to indicate non-editable fields */
        color: #6c757d; /* Muted text for readability */
        cursor: not-allowed; /* Change cursor to show it's uneditable */
        opacity: 0.65; /* Lower opacity for better contrast */
    }

    /* Error state styling */
    input[type="text"].is-invalid,
    input[type="password"].is-invalid,
    input[type="email"].is-invalid,
    input[type="number"].is-invalid {
        border-color: #dc3545; /* Red border for errors */
        background-color: #f8d7da; /* Light red background for errors */
        color: #721c24; /* Dark red text for readability */
    }

    /* Success state styling */
    input[type="text"].is-valid,
    input[type="password"].is-valid,
    input[type="email"].is-valid,
    input[type="number"].is-valid {
        border-color: #28a745; /* Green border for valid input */
        background-color: #d4edda; /* Light green background */
        color: #155724; /* Dark green text */
    }



.autocomplete-results {
    border: 1px solid #ccc;
    margin-top: 5px;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
}

    .autocomplete-results div {
        padding: 5px;
        cursor: pointer;
        border-bottom: 1px solid #ddd;
    }

        .autocomplete-results div:hover {
            background-color: #f0f0f0;
        }


/* Owner Details Container */
.owner-details-container {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    background-color: #f9f9f9;
    margin-top: 16px;
}

/* Title */
.owner-details-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 12px;
    text-align: center;
    color: #333;
}

.autocomplete {
    position: relative;
}

.ui-autocomplete {
    overflow: auto;
    max-height: 500px;
}

.nav-link.active {
    color: #006400; /* DALRRD green */
    text-decoration: underline; /* Underline the active link */
}

.label-spacing {
    margin-left: 10px; /* Adjust spacing as needed */
}

#leftTableSearch {
    margin-bottom: 15px;
    width: 100%;
}

/* Style for the Remove button */
.remove-row-btn {
    background-color: #dc3545; /* Bootstrap Danger Color */
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

    /* Add hover effect */
    .remove-row-btn:hover {
        background-color: #c82333; /* Darker Red */
        transform: scale(1.05); /* Slight zoom effect */
    }

    /* Add focus effect */
    .remove-row-btn:focus {
        outline: none;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }

/* Error Message Box */
.error-message {
    background-color: #ffdddd !important; /* Light Red */
    color: #a94442; /* Dark Red */
    border-left: 5px solid #d9534f !important; /* Bootstrap Danger Color */
    padding: 15px;
    margin: 20px auto;
    max-width: 600px;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Approve Button - Green */
.btn-approve {
    background-color: #28a745 !important; /* Bootstrap Success Green */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

    .btn-approve:hover {
        background-color: #218838 !important;
        transform: scale(1.05);
    }

/* Reject Button - Red */
.btn-reject {
    background-color: #dc3545 !important; /* Bootstrap Danger Red */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

    .btn-reject:hover {
        background-color: #c82333 !important;
        transform: scale(1.05);
    }

/* Suspend Button - Orange */
.btn-suspend {
    background-color: #ffc107 !important; /* Bootstrap Warning Yellow */
    color: black;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

    .btn-suspend:hover {
        background-color: #e0a800 !important;
        transform: scale(1.05);
    }

.input-container {
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin-bottom: 10px;
    width: 100%; /* Ensures responsiveness */
    max-width: 400px; /* Restricts width for compact look */
}

.small-input {
    width: 100%;
    max-width: 250px; /* Controls input size */
    padding: 5px;
    font-size: 14px;
}

.custom-alert {
    background-color: #e0f7fa; /* Light blue color */
    border-left: 4px solid #00796b; /* Accent color */
    font-family: 'Arial', sans-serif; /* Professional font */
    padding: 15px;
    display: flex;
    align-items: center;
    border-radius: 4px;
}

    .custom-alert .alert-icon {
        margin-right: 10px;
        font-size: 20px;
        color: #00796b;
    }

    .custom-alert .alert-content {
        font-size: 16px;
        color: #004d40; /* Darker text for clarity */
    }

.user-menu {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Ensure space between user details and log out link */
    padding: 10px;
}

    .user-menu .dropdown-item {
        display: flex;
        align-items: center;
        padding: 8px 15px;
    }

.user-details {
    flex: 1; /* Makes the user details take up available space */
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
}

    .dropdown-item i {
        margin-right: 8px;
        font-size: 18px;
    }

.disabled {
    color: #6c757d !important; /* Grey out the user details */
    font-weight: 400;
}
/* ADD before </style> */
.ke-mode-bar {
    background: #fff;
    border-bottom: 1.5px solid #e0e0e0;
    padding: 14px 20px 10px;
    margin-bottom: 0;
}
.ke-mode-bar-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #555;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.acting-mode-select-wrapper {
    position: relative;
    max-width: 400px;
}
.acting-mode-select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 9px 42px 9px 42px;
    border: 1.5px solid #ced4da;
    border-radius: 6px;
    font-size: 0.93rem;
    background-color: #fff;
    cursor: pointer;
    color: #333;
    transition: border-color 0.2s;
}
.acting-mode-select-wrapper select:focus {
    outline: none;
    border-color: #006400;
    box-shadow: 0 0 0 3px rgba(0,100,0,0.1);
}
.acting-mode-select-wrapper .select-left-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #5a6a5a;
    pointer-events: none;
}
.acting-mode-select-wrapper .select-arrow {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #5a6a5a;
    pointer-events: none;
}
.ke-mode-hint {
    font-size: 0.79rem;
    color: #6c757d;
    margin-top: 4px;
}
.logout-link {
    color: #D32F2F; /* Professional Logout Red */
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    transition: color 0.3s ease, background-color 0.3s ease, width 0.3s ease;
    width: 40px;
    overflow: hidden;
    white-space: nowrap;
}

    .logout-link i {
        font-size: 18px;
        transition: margin-right 0.3s ease;
    }

    .logout-link:hover {
        color: #FFFFFF; /* White icon on hover */
        background-color: #B71C1C; /* Darker Red */
        width: 120px; /* Expand width to fit text */
    }

    .logout-link::after {
        content: " Log Out";
        font-size: 16px;
        font-weight: 500;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .logout-link:hover::after {
        opacity: 1;
    }

.warning-message {
    background-color: #fff3cd;
    color: #856404;
    padding: 12px 16px;
    border: 1px solid #ffeeba;
    border-radius: 6px;
    font-weight: 500;
    margin-bottom: 20px;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.hidden {
    opacity: 0;
    pointer-events: none;
}

.input-error {
    border: 2px solid red;
    background-color: #ffe6e6;
}

.scrollable-content {
    max-height: 80vh; /* or any fixed px height, like 600px */
    overflow-y: auto;
    padding-right: 10px;
}

    /* Optional: Hide scrollbars in WebKit browsers */
    .scrollable-content::-webkit-scrollbar {
        width: 8px;
    }

    .scrollable-content::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.access-denied-container {
    max-width: 600px;
    margin: 4rem auto;
    padding: 2rem;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.6s ease-in-out;
}

.access-denied-icon {
    font-size: 3.5rem;
    color: #dc3545;
    margin-bottom: 1rem;
}

.access-denied-heading {
    font-size: 2rem;
    font-weight: 600;
    color: #721c24;
}

.access-denied-text {
    font-size: 1.1rem;
    color: #6c757d;
}

.core-operations-body {
    background-color: #e9e4d4;
}

.unstyled-fieldset {
    all: unset; /* Resets all default browser styles */
    background-color: #e9e4d4;
    /* Reapply necessary layout properties after unset */
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    /* Extra safeguards */
    border: none;
    outline: none;
    box-shadow: none;
}

.required::after {
    content: "*";
    color: red;
    margin-left: 4px;
}

.uniform-dropdown {
    width: 150px;
}

.label-wide {
    display: inline-block;
    min-width: 140px; /* Adjust until they line up nicely */
    text-align: right; /* Keeps the text right-aligned like your current design */
}

.litssa-section-title {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
    color: #000 !important;
}


.litssa-header-title-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.litssa-section-subtitle {
    padding-left: 15px;
    border-left: 2px solid #ced4da !important;
    color: #495057 !important;
}