/* COLOR CREATION */
:root {
    --NGorange: #f87910;
    --NGblue: #345077;
    --ULdarkgray: #808080;
    --ULlightgray: #d3d3d3;
    --ULred: #ee2f25;
    --ULlightred: #ee2f258c;
    --ImageOverlay: #ffffffb3;
    --opaqueblue: #3789b126;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --SMgreen: #26A96C;
    --SMbtn-green: #1a9568;
    --JNburgandy: #8B1E3F;
    --JNgray: #41434526;
    --JNopaqueburgandy: #8e244494;
    --JNdarkgray: #636465;
    --JNlightburgandy: #a5526b;
    --JNheaderburgandy: #8e2444b0;
    --SterlingGrey: #787878;
    --SterlingDarkGreen: #1e614a;
    --SterlingLightGreen: #178a54;
    --opaquegrey: #7878782e;
    --HeartNatBlue: #12235b;
    --HeartNatYellow: #faa926;
    --HeartNatOpaqueBlue: #12235bed;
    --HeartNatOpaqueYellow: #b4823beb;
    --HeartNatLightGrey: #a5a5a587;
    --HeartNatDarkYellow: #ffc107c4;
    --HeartNatGrey: #b9b9b93d;
    --HeartNatBlack: #000000d4;
    --CLLifeBlue: #005288;
    --CLLifeYellow: #f9c10c;
    --CLLifeLightYellow: #fee7a4;
    --YellowHover: #e1951b;
}

/* SHARED */
body, ul, li, a {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
body {
    display: flex;
    justify-content: center;/*
    align-items: center;*/
    height: 100vh; /* Full viewport height */
    margin: 0; /* Remove default margin */
    font-family: Arial, sans-serif;
    background-color: #f8f9fa; /* Optional: light background for better contrast */
}
.header {
    background-color: #203e96;
    color: white;
    position: fixed;
    width: 100%;
    height: 4.5em;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.header .container{
    max-width:100vw;
}
.bgImage {
    height: 100vh;
    width: 100vw;
    z-index: 2;
}
.overlay {
    background: 0 0 var(--ImageOverlay);
    z-index: 1;
    height: 100vh;
    width: 100vw;
    align-items: center;
    overflow-y: auto;
    scrollbar-width: none;
}

/*LOGIN PAGE*/
#loginPage, .bgImage {
    display: flex;
    min-height: 100vh;
    max-width: 100vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    scrollbar-width: none;
}
.drop-zone {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
    cursor: pointer;
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}
#mainUploadedSection {
    width: 100%;
}
#secondaryUploadSection {
    width: 100%;
}
#miscUploadSection {
    width: 100%;
}
@media (min-width: 1600px) {
    #loginPage, .bgImage {        
        background-size: 100% 100%;
    }
}
@media (max-width: 768px) {
    #loginPage, .bgImage {
        background-attachment: scroll;
        background-size: 100% 100%;
        min-height: 100vh;
    }
}
.login-container {
    width: 550px;
    margin: 7em auto;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0px 0px 15px rgb(0 0 0 / 79%);
    background-color: #ffffff;
    text-align: left;
    position: relative;
    opacity: 90%;
}
    .login-container h3 {
        text-align: center;
        margin-bottom: 20px;
        color: #333;
    }
#loginPage .container {
    width:100vw;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
}
.loginLogo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 1em;
}
#loginPage .logo-image {
    
}
.logo {
    flex: 1;
}
    .logo img {
        margin: -0.1em;
    }
.logo-image {
    height: 75px;
}
#Login {
    margin-top: 1em;
}
.greeting {
    font-size: 1.5em;
    text-align: left;
    margin-bottom: 0;
    font-weight: 600;
}
.intro {
    margin-bottom: 2.5em;
}
footer .container {
    max-width: 1600px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loginPageFooter, .footer {
    color: #fff;
    background-color: #000;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}
.forgotInfo {
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-decoration: none;
}
    .forgotInfo a, .intro a {
        border-radius: 4px;
        font-weight: 600;
        margin: 0.5em;
    }
.intro a {
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    padding: 3px 9px 4px;
}
.intro a:hover{
    color:white;
}
    .forgotInfo a {
        text-decoration: none !important;
    }
    .forgotInfo a:hover{
        color:white;
    }

/*FOR IMAGE/PDF VIEWER PAGES*/
#imagePage  {
    max-width: 1600px;
    padding: 0 20px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
#search {
    margin: 2em 1em 1em;
    display: flex;
    justify-content: center;
}
#pdfViewer {
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
}
    #pdfViewer div {
        background: lightyellow;
        width: fit-content;
        align-items: center;
        font-style: italic;
    }
#table .page-count {
    background-color: rgba(0, 0, 0, .05) !important;
}

    #table .page-count:hover {
        background-color: rgba(0, 0, 0, .05);
    }

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
}
.menu {
    display: flex;
    align-items: center; /* Centers the ul within the nav container */
    height: 100%; /* Ensure the nav fills the container */
}
    .menu ul {
        display: flex;
        align-items: flex-end; /* Align items to the bottom of the ul */
        list-style-type: none;
        padding: 0;
        margin: 0;
        height: 100%; /* Ensure ul fills the height of the nav */
    }
    .menu li {
        margin: .5em; /* Space between each menu item */
    }
        .menu li a, .menu li input {
            display: block;
            padding: 13px 15px; /* Add padding for better click area */
            color: white;
            text-decoration: none;
            border: none !important;
            background: none;
        }
            .menu li a:hover, .menu li input:hover {
                transform: scale(0.9);
            }
.menu-toggle {
    display: none;
    cursor: pointer;
    color: white;
    font-size: 24px;
}

.content {
    padding: 80px 20px 60px; /* Adjust for the fixed header height */
    flex: 1; /* Allows the content to expand and push the footer down */
}
.footer {
    color: white;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
}
.error-message {
    color: red;
    text-align: center;
    margin-bottom: 15px;
}

.form-group {
    margin-bottom: 1.2em; /* Space between form elements */
}
    .form-group label {
        display: block;
        margin-bottom: 0.5em;
        color: #555;
    }
.form-control {
    width: 100%; /* Full width of the parent container */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
    .form-control:focus {
        border-color: #007bff;
        outline: none;
    }
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
    .form-row div {
        min-width: 150px;
    }
    .form-row label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
        color: #333;
    }
    .form-row input[type="text"],
    .form-row select {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .form-row input[type="submit"] {
        padding: 5px 20px;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
        margin-right: 5px;
        width: auto;
    }
        .form-row input[type="submit"].btn-danger {
            background-color: red;
        }
        .form-row input[type="submit"]:hover {
            background-color: #345077;
        }
        .form-row input[type="submit"].btn-danger:hover {
            background-color: darkred;
        }
/*.btn-submit {
    width: 100%;  /*Full width of the button*/
/*padding: 12px; /*Increased padding for a larger button*/
/*background-color: #345077;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 1em;
}*/

.btn-submit, .footer-link {
    display: inline-block !important;
    width: 100%; /* Ensure the link/button takes the full width of its container */
    padding: 10px 15px; /* Adjust padding for larger click area */
    background-color: #203e96;
    color: white;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px 0; /* Add vertical spacing */
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .menu ul {
        display: none;
        flex-direction: column;
        background-color: #333;
        position: absolute;
        top: 60px;
        right: 0;
        width: 200px;
    }

        .menu ul li {
            margin: 0;
        }

            .menu ul li a {
                padding: 10px;
                text-align: left;
            }

    .menu-toggle {
        display: block;
    }

    .menu.open ul {
        display: flex;
    }
}
/* Container for the form and table */
.table-container {
    max-width: 1600px;
    min-width: 600px;
    margin: 1em auto 20px auto;
    padding: 20px;
    background-color: #fffffff2;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0px 0px 13px 10px rgb(0 0 0 / 16%);
    overflow-y: auto;
    scrollbar-width: none;
}
/* Styling the form */

thead, tbody {
    box-shadow: 0 0 1px 0px #000000db;
    background-color: #0032770a;
}
/* Table styling */
.table-responsive {
    overflow-x: auto;
    margin-top: 20px;
}
    .table-responsive input[type="text"] select {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
.table {
    border-collapse: separate;
    margin-top: 10px;
    border-spacing: 0 12px;
}

/* Add spacing between rows */
    .table tbody tr, .page-count {
        border: 1px solid #ddd; 
        overflow: hidden; 
        box-shadow: 0px 0 1px 0px #000000db;
    }

        /* Make sure each cell stays aligned within the table */
        .table tbody td,
        .table thead th {
            padding: 12px; /* Adjust padding for a balanced look */
            text-align: left;
            border: none; /* Remove default table borders */
        }

/* Alternate row colors for readability */
.table-striped tbody tr:nth-child(odd) {
    background-color: #e5e5e58a;
}
.table-striped tbody tr:nth-child(even) {
    background-color: #fff !important;
}
.table-striped tbody tr:nth-child(odd):hover {
    background-color: #d5d5d5f7;
}
.table-striped tbody tr:nth-child(even):hover {
    background-color: #d5d5d5f7 !important;
}

/* Optional: Ensure the last row (pagination) does not get affected */
.table tbody tr:last-child {
    margin-bottom: 0;
    box-shadow: none;
}
    .table th, .table td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ddd;
    }
    .table th {
        background-color: #f4f4f4;
        font-weight: bold;
    }
tbody .page-count td {
    text-align: right;
}
tbody .page-count .pagination-container {
    justify-items: center;
}
    .text-center {
        text-align: center;
    }

/* Button styles */
.btn-link {
    background: none;
    text-decoration: underline;
    border: none;
    cursor: pointer;
}
    .btn-link:hover {
        color: #0056b3 !important;
    }

/* Pagination and other details */
.d-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

/* Modal styling */
#warningModal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with transparency */
}
#modalContent {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 700px;
    text-align: left;
    border-radius: 5px;
}
#closeButton {
    padding: 8px 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}
    #closeButton:hover {
        background-color: #0056b3;
    }
.header-link {
    color: #333 !important;
    text-decoration: underline !important;
}