* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.dropdown-menu {
    display: none; /* Initially hidden */
    position: absolute;
    top: 100%; /* Position below the icon */
    right: 10px;
    background-color: #fff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    overflow: hidden;
    z-index: 1000;
    min-width: 120px;
}

.dropdown-menu a {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
}

.dropdown-menu a:hover {
    background-color: #f1f1f1;
}

.login-container, .registration-container {
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 10px;
    min-height:100vh;
}


.login-logo, .registration-logo {
    position: relative;
    align-self:center;
}

h1.login-header{ 
    font-family: "Arial", Arial, sans-serif;
	font-size: 32px;
	font-style: normal;
	font-variant: normal;
	font-weight: 800;
	line-height: 35.2px;
}

h3.login-header{ 
    font-family: "Arial", Arial, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-variant: normal;
	font-weight: 700;
	line-height: 35.2px;
}

.logo img {
    height: 50px;
}

/* Login box styles */
.login-box {
    background-color: #007bff;
    padding: 0px 30px 30px 30px;
    border-radius: 10px;
    display: inline-block;
    color: white;
    width: 300px;
    box-shadow: 0px 2px 5px 5px #30303021;
}

.login-box form {
    display: flex;
    flex-direction: column;
}

.login-box label {
    margin-bottom: 5px;
    text-align: left;
}

.login-box input[type="email"], 
.login-box input[type="password"] {
    padding: 10px;
    margin-bottom: 15px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
}

/* Button styling */
.buttons {
    display: flex;
    justify-content: space-between;
}

.deny.submit-btn {
    background-color: darkred;
}
.deny.submit-btn:hover {
    background-color: rgb(173, 3, 3);
}
.approve.submit-btn {
    background-color: green;
}
.approve.submit-btn:hover {
    background-color: rgb(0, 179, 0);
}

.login-btn, .submit-btn {
    background-color: #003380;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size:16px;
    color: white;
    border: none;
    max-width:175px;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    flex: 1;
    white-space: nowrap;
}

.reset-btn.submit-btn {
    align-self:center;
}

.register-btn {
    background-color: #3a3a3a;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size:16px;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 400;
    cursor: pointer;
    flex: 1;
    text-decoration: none;
    margin-right: 10px;
}

.login-btn:hover, .register-btn:hover {
    opacity: 0.8;
}

label {
	font-family: "Arial Narrow", Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 20px;
}

blockquote {
	font-family: "Arial Narrow", Arial, sans-serif;
	font-size: 21px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 30px;
}

.forgot-password-link{
    font-family: "Arial Narrow", Arial, sans-serif;
    color: rgb(129, 129, 129);
    text-decoration: none;
    font-weight:600;
    font-size:12px;
}

h1.registration-header{
    font-family: "Arial", Arial, sans-serif;
	font-size: 25px;
	font-style: normal;
	font-variant: normal;
	font-weight: 800;
	line-height: 35.2px;
}

h3.registration-header{ 
    font-family: "Arial", Arial, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-variant: normal;
	font-weight: 700;
	line-height: 35.2px;
}
.register-box {
    background-color: #007bff;
    padding: 20px 30px 30px 30px;
    border-radius: 10px;
    display: inline-block;
    color: white;
    width: 300px;
    box-shadow: 0px 2px 5px 5px #30303021;
}

.register-box form {
    display: flex;
    flex-direction: column;
}

.register-box label {
    margin-bottom: 5px;
    text-align: left;
}

.register-box input {
    padding: 10px;
    margin-bottom: 15px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
}

.sidebar {
    font-family: "Arial", Arial, sans-serif;
    width: 250px;
    background: rgb(0,123,255);
    background: linear-gradient(90deg, rgba(0,123,255,1) 0%, rgba(0,77,255,1) 100%);
    color: #fff;
    position: sticky;
    top: 0;
    height: 100vh;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

.nav-menu ul {
    list-style-type: none;
    padding-left:10px;
    text-align:right;
}

.nav-menu li {
    margin: 30px 0;
}

.nav-menu a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s;
    border-radius: 20px 0px 0px 20px;
}

.nav-menu a:hover{
    background: #0069da;
    color: #ffffff;
    border-radius: 10px 0px 0px 10px;
    font-weight: 600;
    cursor: pointer;
}

.nav-menu a.active {
    background: #ffffff;
    color: #007bff;
    border-radius: 10px 0px 0px 10px;
    font-weight: 600;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sticky-header {
    height: 50px;
    background: #f8f9fa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    /*border-bottom: 1px solid #ddd;*/
    position: sticky;
    top: 0;
    z-index: 1000;
}

.user-icon {
    font-size: 1.5em;
    cursor: pointer;
    max-height:40px;
}
.user-icon img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.user-icon img:hover{
    opacity: 0.8;
}

.panel-content {
    padding: 40px;
    overflow-y: auto;
    height: calc(100vh - 50px); /* Adjust for header height */
}
.panel-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.bottom-shadow {
    margin: 0 auto;
    border-bottom: 1px solid #ccc; /* your border color */
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); /* adjust blur radius and color */
}

h1.admin-header {
    font-family: "Arial", Arial, sans-serif;
    font-weight:600;
    font-size:20px;
}

.search-box {
    padding: 10px;
    margin-bottom: 15px;
    border: solid;
    border-width: 1px;
    border-radius: 5px;
    font-size: 1rem;
}

.flex-container {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    align-items: start;
    align-content: start;
    gap: 10px 20px; /* row-gap column gap */
}

.client-info input{
    padding: 10px;
    margin-bottom: 15px;
    border: solid;
    border-width: 1px;
    border-radius: 5px;
    font-size: 1rem;
    width: 100%;
}

.client-list {
    display:block;
    padding: 10px
}
.client-list a{
    display: block;
    text-decoration: none;
    padding: 10px 10px 10px 10px;
    min-height: 30px;
    width: 80%;
    background-color: rgb(21, 97, 163);
    color:white;
    border-radius: 5px;
}
.client-list a:hover{
    font-weight: 800;
}
.spacer {
    min-height: 50px;
}

.noc-input {
    margin: 10px 0px 10px 10px;
    width: 70px !important;
}

.noc-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    gap: 10px 20px;
}

.delete-button {
    background: none;
    border: none;
    color: red;
    font-size: 20px;
    font-weight: 800;
    cursor: pointer;
    padding: 0;
    margin-left: 5px;
    line-height: 1;
}
.delete-button:hover {
    color: darkred;
}

.add-button {
    background-color: green;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size:16px;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    flex: 1;
    margin: 0 10px 20px 10px;
}
.add-button:hover {
    font-weight: 600;
}
.add-button.account{
    margin:0;
}
.file-link{
    margin-bottom: 15px;
    text-decoration:none;
    font-weight: 600;
    font-family: "Arial Narrow", Arial, sans-serif;
    color:#003380
}

.upload-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 2px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.upload-dialog h3 {
    margin-top: 0;
}

.upload-dialog button {
    margin-top: 10px;
    margin-right: 5px;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* translucent black */
    z-index: 1;
    overflow: hidden;
  }

.client-item, .job-item {
    margin: 15px 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    list-style-type: none;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    background-color: rgb(247, 247, 252);
}
.client-item h3, .job-item h3 {
    margin: 0;
}
.client-item p, .job-item p {
    margin: 5px 0;
}

.buttons-container{
    display:flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 10px 20px;
    margin-top:6px;
}
.buttons-container.account-info{
    flex-direction: row;
    justify-content: center;

}
.pending-client-list a,
.pending-client-list button {
    display: inline-block; /* Inline-block for side-by-side alignment */
    text-decoration: none;
    text-align: center;
    padding: 10px 20px; /* Adjust padding for consistent look */
    min-height: 30px;
    max-width: 150px;
    color: white;
    border-radius: 5px;
    font-weight: 600;
    font-size: 16px;
    font-family: "Arial Narrow", Arial, sans-serif;
    border: none; 
    cursor: pointer; 
    transition: background-color 0.3s ease;
    background-color: rgb(21, 97, 163);
}

.add-new {
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: 15px;
    background-color: rgb(21, 97, 163);
    color: white;
    font-weight: 600;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.add-new:hover {
    background-color: rgb(18, 85, 143);
}

.delete {
    background-color: darkred;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.delete:hover {
    background-color: #a80000;
}
.reset.submit-btn {
    background-color: rgb(0, 95, 87);
}
.reset.submit-btn:hover {
    background-color: rgb(1, 143, 131);
}

.client-item, .job-item {
    margin: 15px 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    list-style-type: none;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    background-color: rgb(247, 247, 252);
}
.client-item h3, .job-item h3 {
    margin: 0;
}
.client-item p, .job-item p {
    margin: 5px 0;
}

#add-job-form {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    background-color: rgb(247, 247, 252);
}

#add-job-form label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

#add-job-form input[type="text"],
#add-job-form textarea,
#add-job-form input[type="date"],
#add-job-form input[type="number"],
#add-job-form select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

#add-job-form button {
    display: inline-block;
    padding: 10px 20px;
    background-color: rgb(21, 97, 163);
    color: white;
    font-weight: 600;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

#add-job-form button[type="button"] {
    background-color: darkred;
}

#add-job-form button:hover {
    background-color: rgb(18, 85, 143);
}

#details{
    height:500px;
}
#noc input{
    height:30px
}

.dashboard-container {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    /* margin-top: 20px; */
    background-color: rgb(23, 91, 163);
    padding: 1%;
    min-height: 100vh;
}

.job-listing-container {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
    background-color: rgb(255, 255, 255);
    width:49%;
}

.job-details-container {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    background-color: rgb(247, 247, 252);
    width:49%;
    min-height: 80vh;
    position:fixed;
    right:1%;
}

p, h3, h1, h2{
    font-family: "Arial Narrow", Arial, sans-serif;
}
.job-listing {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    background-color: rgb(255, 255, 255);
    list-style-type: none;
}

.job-listing:hover {
    background-color: #f5f5f5;
    cursor:pointer;
}
.job-listing.active {
    background-color: #345eac;
    cursor:pointer;
    color:white;
}

.job-listing:active{
    background-color: #345eac;
    color:white;
    transition-duration: 300ms;
}

.apply-btn{
    background-color: #003380;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size:16px;
    color: white;
    border: none;
    max-width:150px;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    flex: 1;
    margin-right: 10px;
    text-decoration: none;
    margin-top:20px;
}
.apply-btn:hover {
    background-color: #0a4399;
    color: white;
}

.close-btn{
    display:none;
    font-weight:600;
    font-size:30px;
    font-family: "Arial Narrow", Arial, sans-serif;
    align-self: flex-end;
}

.client-info-management{
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #e9e9e9;
    padding:50px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.flex-container.client-info-container{
    align-content:center;
    margin-top: 50px;
}

.back-btn {
    text-decoration: none;
    color:#003380;
    font-weight:600;
    font-size:17px;
    font-family: "Arial Narrow", Arial, sans-serif;
    text-align: center;
}

.submit-btn.resume-btn{
    margin-left:10px;
    padding: 5px 10px;
}

.client-message {
    text-align:center;
    color: #dd0044;
    font-weight:600;
    font-size:14px;
    font-family: "Arial Narrow", Arial, sans-serif;
}
.sidebar-toggle {
    display:none;
}

.load-clients{
    color: white;
    background-color: rgb(21, 97, 163);
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Arial Narrow", Arial, sans-serif;
}

.load-clients:disabled{
    background-color: #222222;
}

.job-details {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    font-size: 14px;
}

.toggle-details {
    color: #144981;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    font-family: "Arial Narrow", Arial, sans-serif;
}

@media only screen and (max-width: 894px) {
    .job-listing-container {
        align-self: center;
        width: 96%;
        padding:4%;
    }
    .job-details-container {
        width: 90%;
        position: absolute;
        z-index: 9999;
        right: 5%;
        display:none;
        flex-direction:column;
        min-height:100px;
    }
    .dashboard-container{
        flex-direction: column;
    }
    .close-btn{
        display:inline;
        color:#a80000;
    }
    .sticky-header h2 {
        font-size:1.2em;    
    }
    .modal {
        background-color: rgba(0, 0, 0, 0.945);
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        display:none;
        align-items: center;
        justify-content: center;
        z-index: 9988;
    }
    .client-info-management {
        width:95%;
    }
    .submit-btn {
        white-space: wrap;
    }
    .submit-btn.resume-btn {
        margin-top:15px;
    }
    .noc-list {
        gap: 10px 50px;
    }
    .sidebar {
        position: absolute;
        top: 50px;
        left:-250px;
        height: calc(100vh - 50px);
        transition: left 0.3s ease-in-out;
    }
    .sidebar-toggle {
        position: absolute;
        top: 100px;
        left: 0;
        cursor: pointer;
        z-index: 9999;
        font-size: 25px;
        color: #ffffff;
        background-color: #2e2e2e;
        border:none;
        border-radius: 0 10px 10px 0;
        padding:5px;
        /* opacity: 0.5; */
        display:block;
        transition: left 0.3s ease-in-out;
    }
    .sidebar-toggle.open {
        left: 250px;
    }
    .sidebar.open {
        left: 0;
    }
    .client-list {
        padding: 0;
    }
    .client-list a {
        width: 100%;
    }
    .add-button.account {
        max-width: 110px;
        white-space: nowrap;
    }
}