@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css);
body { font-family: Montserrat, sans-serif;margin: 0; background: #f4f4f4; }

/* logo css */
.Hr-container:before {
    content: "";
    background-image: var(--wpr-bg-198480f8-d158-47aa-828b-7a85e5ea216e);
    background-repeat: no-repeat;
    width: 120px;
    height: 60px;
    background-size: contain;
    display: inline-block;
    justify-content: center;
    margin: auto;
    display: block;}



/*--------Job Post Card-------*/

.job-card {
margin-bottom: 20px;
position: relative;
background: #a6714221;
padding: 20px;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, .1) 0 4px 6px -1px, rgba(0, 0, 0, .06) 0 2px 4px -1px;
transition: box-shadow 0.3s ease-in-out;

}

.job-card:hover {
box-shadow: rgba(0, 0, 0, 0.2) 0 6px 12px -2px, rgba(0, 0, 0, 0.08) 0 3px 6px -2px;
}

.job-card .job-title {
font-size: 20px;
text-transform: capitalize;
}

.job-card .job-posted,
.job-card .job-info {
font-size: 16px;
color: #757575;
margin-bottom: 5px;
}

.job-card .job-info i {
color: #aa7341;
}

.job-card .apply-btn {
background-color: #aa7341;
font-size: 14px;
font-weight: 500;
border-radius: 40px;
padding: 14px 40px;
color: #ffffff;
display: inline-block;
line-height: normal;
text-decoration: none;
transition: background-color 0.3s ease-in-out;
position: absolute;
right: 20px;
top: 42%;
}

.job-card .apply-btn:hover {
background-color: #e39b59;
}

/* Job Grid Layout */

.job-card .job-posted {
margin-bottom: 5px;
}

/*------------*/
@media screen and (max-width:767px) {

.job-card .apply-btn{
position: unset; 
margin-top: 20px;}


.job-grid {
display: block;}
}

@media screen and (min-width:768px) {

/* Job Description Hover Effect */
.job-card .job-description {

opacity: 0;
visibility: hidden;
max-height: 0;
overflow: hidden;
background: #ffffff;
font-size: 14px;
line-height: 26px;
padding: 0 15px; /* Padding adjusted for smooth transition */
border-radius: 10px;
color: #000000;
margin-top: 10px;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.job-card:hover .job-description {
opacity: 1;
visibility: visible;
max-height: 500px; /* Smooth expansion */
padding: 15px;
}

.job-card{
padding-right: 200px;}

}

/*----------Login------------*/

.Hr-login {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;}

.Hr-container {
max-width: 450px;
}


.Hr-container h2 {
font-size: 30px;
text-align: center;}


.Hr-container form input[type="text"], 
.Hr-container form input[type="password"] {
padding: 14px;
border-radius: 10px;
border: 1px solid #cccccc;
min-height: 28px;
line-height: normal;
height: auto;
width: 100%;
margin-bottom: 20px;}


.Hr-container input[type="submit"]:hover{
background-color: #e39b59;}


.Hr-container input[type="submit"] {
cursor: pointer;
color: #ffffff;
border: 1px solid #aa7341;
font-size: 14px;
font-weight: 500;
display: block;
width: 100%;
text-align: center;
padding: 20px;
border-radius: 12px;
background-color: #aa7341;
/* border: navajowhite; */
border-color: #aa7341;}


.Hr-container form{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;}


/*----------------------*/



.dashboard-container  {
display: flex;

}


.dashboard-container .sidebar h2 {
font-size: 20px;
text-align: center;
border-bottom: 2px solid #b9b9b963;
padding: 20px;
margin: 0px 0px 0px 0px;
color: #ffffff;
background-color: #4f2500;
}



.dashboard-container .sidebar {
background: #663000;
width: 300px;
height: 100vh;
overflow-y: auto;
}


.dashboard-container .sidebar a {
display: block;
font-size: 16px;
text-align: left;
padding: 20px 20px;
border-bottom: 1px solid #b9b9b963;
color: #ffffff;
text-decoration: none;
}

.dashboard-container .sidebar a:hover {
background: #eaeaea;
color: #aa7341;
}


.dashboard-container .content {
width: auto;
flex-grow: 1;
padding: 20px;
background-color: #f4f4f4;
}


.dashboard-container .content iframe {
width: 100%;
height: 100%;
border: none;
}


.dashboard-container .sidebar a::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 15px;
}


/* Add specific icons for each link */
.sidebar a[href*="add-job.php"]::before {
content: "\f055"; /* fa-plus-circle */
}

.sidebar a[href*="delete-job.php"]::before {
content: "\f2ed"; /* fa-trash-alt */
}

.sidebar a[href*="manage-jobs.php"]::before {
content: "\f0b1"; /* fa-briefcase */
}

.sidebar a[href*="notification.php"]::before {
content: "\f0f3"; /* fa-fa-bell */
}

.sidebar a[href*="application"]::before {
content: "\f0c6"; /* fa-file-alt (example icon) */
}


.sidebar a[href*="logout"]::before {
content: "\f2f5"; /* fa-sign-out-alt */
}





/*----------Add New Job--------------*/


.add-new-jobs {
display: flex;
align-items: center;
flex-wrap: wrap;
}


.add-new-jobs textarea {
min-height: 80px;
}

.add-new-jobs input[type="text"], 
.add-new-jobs textarea {
padding: 14px;
border-radius: 10px;
border: 1px solid #cccccc;
line-height: normal;
height: auto;
margin-bottom: 20px;
resize: none;
display: block;
width: 100%;
margin-top: 10px;
}



.add-new-jobs input[type="submit"] {
cursor: pointer;
color: #ffffff;
border: 1px solid #aa7341;
font-size: 15px;
font-weight: 500;
display: block;
width: 100%;
text-align: center;
padding: 13px 15px;
border-radius: 12px;
background-color: #aa7341;
border-color: #aa7341;
margin-top:10px;
}


.add-new-jobs input[type="submit"]:hover {
background-color: #e39b59;
}


/*------------------------*/


/*---------Delete Job and Job Applications--------------*/


.delete-job table,
.job-application table {
width: 100%;
color: #212529;
vertical-align: middle;
border-color: #dee2e6;
caption-side: bottom;
border-collapse: collapse;
}


.delete-job table>thead,
.job-application table>thead {
vertical-align: middle;
}


.delete-job,
.table-responsive {
overflow: auto;
background: #ffffff;
border-radius: 12px;
}


.delete-job table tbody tr:first-child,
.job-application table thead {
background: #dadada;

}

.delete-job table tbody tr:first-child th,
.job-application table thead th {
padding: 15px 20px;
text-align: left;
font-size: 14px;
}


.delete-job table tbody tr td,
.job-application table tbody tr td {
padding: 15px 20px;
border-bottom: 1px solid #e2e2e2;
font-size: 14px;
}



.job-application .btn-primary {
    background-color: #4cc64c !important;
}

.job-application .btn-primary:hover {
    background-color: #008000 !important;
}

.delete-job table .delete-btn {
    background-color: #fa0000 !important;
}


.delete-job table .delete-btn:hover{
    background-color: #cc0000 !important;
}



.delete-job table .delete-btn,
.form-container .delete-btn,
.job-application .btn-primary {
cursor: pointer;
color: #ffffff;
font-size: 13px;
font-weight: 500;
display: inline-block;
text-align: center;
padding: 11px 15px;
border-radius: 12px;
background-color: #aa7341;
border-color: #aa7341;
text-decoration: none;
border: 0 !important;
}


.delete-job table .delete-btn:hover,
.form-container .delete-btn:hover,
.job-application .btn-primary:hover{
background-color: #e39b59;}






.form-container {
text-align: center;
padding: 15px;
}


body {
margin: 0 !important;
}


/*------------------------*/
/*------Responsive------*/



@media screen and (max-width:767px) {


.dashboard-container {
height: auto;
display: block;
}

.dashboard-container .content iframe {
min-height: 500px;
}

.delete-job {
overflow-x: auto;
}



.dashboard-container .sidebar {
width: auto;
padding-top: 65px;
display: flex;
justify-content: flex-start;
overflow-x: auto;
height: auto;
overflow-y: unset;}

.dashboard-container .sidebar h2 {
color: #ffffff;
background-color: #947050;
position: fixed;
left: 0;
right: 0;
top: 0;}

.dashboard-container .sidebar a {
display: inline-block;
border-right: 1px solid #b9b9b9;
border-bottom: 0px;
color: #ffffff;
text-decoration: none;
white-space: nowrap;}


}
/*----------------------application form--------------------------*/

body.bg-job-application { 
margin: 0;
background: #a6714221;
font-family: cursive; }


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}


.form-banner {
background: #c39464;
min-height: 250px;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 100%);

}

.form-section {
max-width: 767px;
margin: auto;
background: #ffffff;
padding: 40px;
margin-top: -130px;
border-radius: 12px;
margin-bottom: 40px;
position: relative;
}




.form-section h1 {
font-size: 24px;
margin: 0 0 30px 0px;
}





.form-group small {
font-size: 12px;
color: #838080;
display: block;
margin-top: 8px;
}




.form-row-col {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.form-group {
flex: 1;

margin-bottom: 20px;
}

.form-label {
font-size: 15px;
display: block;
margin-bottom: 10px;
}


.form-section form {
margin: 0;
}

.form-check-input {
width: 17px;
height: 17px;
vertical-align: middle;
margin: 0px 0px 0px 0px;
cursor: pointer;
}


.form-check {
margin-bottom: 7px;
}

span.text-danger {
color: red;
font-size: 16px;
}


.form-check-label {
font-size: 13px;
}

.form-control {
resize: none;
display: block;
width: 100%;
padding: 14px;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: cursive;
border-radius: 12px;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn-submit {
display: block;
width: 100%;
padding: 16px;
border: 1px;
font-size: 15px;
border-radius: 12px;
cursor: pointer;
}


.btn-submit:hover {
background:#aa7341;
color: #ffffff;}

.form-group {
display: flex;
flex-wrap: wrap;}

.form-row-col-3 .form-group {
display: block;}



/*------Responsive------*/



@media screen and (max-width:767px) {


.form-row-col {
    gap: 0;
    display: block;}


.form-section {
padding: 20px;}

}

/*--------Application Message Successfully-------*/


@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.application-successfully {
    background-color: green;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    margin: auto;
    left: 0;
    right: 0;
    max-width: 570px;
    font-size: 36px;
    text-align: center;
    color: #ffffff;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, 
                rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.application-successfully:before {
    content: "☑";
    position: absolute;
    top: -28px;
    background: #ffffff;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    color: #008000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    animation: pulse 1.5s infinite ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, 
                rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}



.application-error {
    background-color: red;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    margin: auto;
    left: 0;
    right: 0;
    max-width: 570px;
    font-size: 36px;
    text-align: center;
    color: #ffffff;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, 
                rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.application-error:before {
    content: "⚠";
    position: absolute;
    top: -28px;
    background: #ffffff;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    color: #ff0000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    animation: pulse 1.5s infinite ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, 
                rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

/*--------Message Successfully-------*/

.message-successfully {
    background: #4CAF50;
    padding: 15px;
    border-radius: 12px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;}


.message-successfully a {
    border: 1px solid #cccccc;
    display: inline-block;
    font-size: 14px;
    padding: 7px 10px;
    border-radius: 12px;
    color: #ffffff;
    text-decoration: none;
    min-width: 100px;
    text-align: center;}


.message-successfully a:hover {
        background-color: #ffffff;
        color: #4caf50;}

/*--------New-CSS-1-7-2025----*/

.job-application td input[type="text"], 
.job-application td select,
.job-application select#filter {
    padding: 8px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    line-height: normal;
    height: auto;
    resize: none;
    font-size: 12px;
}


.job-application td button[type="submit"] {
    cursor: pointer;
    color: #ffffff;
    border: 1px solid #aa7341;
    font-size: 12px;
    font-weight: 500;
    display: block;
    text-align: center;
    padding: 8px 15px;
    border-radius: 12px;
    background-color: #aa7341;
    border-color: #aa7341;
}