/* ==========================================================================
   Main Styles - Complete Layout System
   ========================================================================== */
/*==============================================================
  TABLE OF CONTENTS
  1. Reset Default Styles and Box Model
  2. Main Container Structure
  3. Form Elements and Controls
  4. Message System
  5. Navigation Elements
  6. Animation Keyframes
  7. Document Navigation
  8. Modal Styling
  9. Custom Elements
  10. Responsive Design
  11. Micellaneous
==============================================================*/

/* ==========================================================================
   1. Reset Default Styles and Box Model
   ========================================================================== */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}
/* ==========================================================================
   2. Main Container Structure
   ========================================================================== */
.container-fluid,
.container {
    padding-top: 10px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
}
.form-container {
 width: 800px;  /* Adjust as needed */
    height: 300px; /* Adjust as needed */
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* ==========================================================================
   3. Form Elements and Controls
   ========================================================================== */
.form-header {
    margin-bottom: 20px;
}
/* Add this to your CSS file */
.form-control {
    max-width: 300px;
}
.input-field {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
/* Button Styles */
.primary-button {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.secondary-link {
    color: #007bff;
    text-decoration: none;
    margin-top: 10px;
    display: block;
}
/* ==========================================================================
   4. Message System
   ========================================================================== */
   .message-container {
    display: none; /* Hidden by default */
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.message-container.show {
    display: block;
}

/* Error message styling */
.error-message {
    background-color: #fff3f3;
    border: 1px solid #ffcdd2;
    color: #d32f2f;
}

/* Success message styling */
.success-message {
    background-color: #f1f8e9;
    border: 1px solid #c5e1a5;
    color: #689f38;
}
/* ==========================================================================
   5. Navigation Elements
   ========================================================================== */
   .document-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 10px; /* Adjust as needed */
}

.nav-button {
    flex-basis: 48%; /* Adjust the button width as needed */
    /* Add any additional styling for your buttons here */
}

.nav-button.left {
    text-align: left;
}

.nav-button.right {
    text-align: right;
}
/* ==========================================================================
   6. Animation Keyframes
   ========================================================================== */
   @keyframes flash1 {
    0%, 50%, 100% {
         background-color: green;
    }
    25%, 75% {
        background-color: #60805F;
    }
}

.flash1 {
 background-color: green;
    animation: flash1 3s infinite;
}
/* make folder link flash on importance 
@keyframes flash {
    0%, 50%, 100% {
         background-color: yellow;
    }
    25%, 75% {
        background-color: orange;
    }
}

.flash {
 background-color: orange;
    animation: flash 3s infinite;
}*/

/* ==========================================================================
   7. Document Navigation
   ========================================================================== */
   
#documentCarousel .modal-content {
    width: 100%;
}
.modal-content {
    width: 100%;
}
/* ==========================================================================
   8. Modal Styling
   ========================================================================== */
   .custom-hr {
    position: relative;
    border: none;
    height: 4px; /* Adjust the total height of the lines */
    background: transparent;
    margin: 20px 0; /* Adjust spacing around the HR */
}

.custom-hr:before, .custom-hr:after {
    content: '';
    position: absolute;
    left: 15%; /* This creates the 30% total reduction */
    right: 15%; /* Adjust these percentages to control the length */
    height: 2px; /* Height of each line */
    background-color: #808080; /* Color of the lines */
}

.custom-hr:after {
    top: 2px; /* Adjust the vertical spacing between the lines */
}
/* ==========================================================================
   9. Custom Elements
   ========================================================================== */
h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

/* Styles for labels and input fields */
label {
    display: block;
    margin-bottom: 10px;
}

/* Styles for feedback messages */
.feedback {
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
}
/* ==========================================================================
   10. Responsive Design
   ========================================================================== */
   @media (max-width: 768px) {
    .form-container {
        width: 95%;
        height: auto;
    }
    
    .nav-button {
        flex-basis: 100%;
        margin-bottom: 10px;
    }
}
 /* ==========================================================================
   11. Micellaneous
   ========================================================================== */
/* Folder view specific content container */
.folder-content {
    width: 100%;
    max-width: 1600px;  /* Match container width */
    margin: 0 auto;
    padding: 20px;
}

/* Table container in folder view */
.table-container {
    width: 100%;
    overflow-x: auto;  /* Allows horizontal scroll on small screens */
}