/*Fonts*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

/*Root Variables*/

:root {
    --color-primary: #669933;
    --color-danger: #ff7782;
    --color-success: #41f1b6;
    --color-warning: #ffbb55;
    --color-white: #fff;
    --color-info-dark: #7d8da1;
    --color-info-light: #dce1eb;
    --color-dark: #363949;
    --color-light: rgba (0, 0, 0, 0.15);
    --color-grey: #dfdfdf;
    --color-link: #5598fb;
    --color-danger: #dd4b39;
    --color-primary-variant: #111e88;
    --color-dark-variant: #677483;
    --color-background: #f9f9f9;
    --color-background-light: #f5f5f5;
    --card-border-radius: 2rem;
    --border-radius-1: 0.4rem;
    --border-radius-2: 0.8rem;
    --border-radius-3: 1.2rem;
    --card-padding: 1rem;
    --card-padding-1: 1.25rem;
    --card-padding-2: 2rem;
    --padding-1: 1.2rem;
    --padding-2: 0.75rem;
    --mobile-padding: 1.25rem 0.75rem;
    --box-shadow: 0 2rem 3rem var(--color-light);
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    appearance: none;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

html {
    font-size: 15px;
}

body {
    font-family: Poppins, sans-serif;
    font-size: 15px;
    background: var(--color-background);
    overflow-x: hidden;
    min-height: 100vh;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

h1 {
    font-weight: 800;
    font-size: 1.8rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 0.95rem;
}

h4 {
    font-size: 0.8rem;
}

h5 {
    font-size: 0.77rem;
}

label {
    font-weight: 500;
    font-size: 0.95rem;
}

.form-control {
    line-height: 2;
}

input[type="radio" i], input[type="checkbox" i] {
    background-color: initial;
    cursor: default;
    appearance: auto;
    box-sizing: border-box;
    margin: 0px 7px 0px 0px;
    padding: initial;
    border: initial;
    scale: 1.2;
    vertical-align: middle;
}

.customPopup {
    width: 100%;
    height: 100%;
    display: flex;
    background: rgba(0, 0, 0, 0.8);
}

small {
    font-size: 0.75rem;
}

.text-muted {
    color: var(--color-info-dark);
}

p {
    color: var(--color-dark-variant);
}

b {
    color: var(--color-dark);
}

.primary {
    color: var(--color-primary);
}

.danger {
    color: var(--color-danger);
}

.success {
    color: var(--color-success);
}

.warning {
    color: var(--color-warning);
}

.white {
    color: var(--color-white);
}

.light {
    color: var(--color-light);
}

.dark {
    color: var(--color-dark);
}

nav {
    top: 0;
    background: var(--color-white);
    box-shadow: var(--box-shadow);
}

.dashContainer {
    display: grid;
    width: 100%;
    max-width: 96%;
    margin: 2rem auto;
    gap: 1.8rem;
}

.navbar, .sidebar, .footer {
    border-color: #e0e0e0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.dashboardBtn, .dashboardBtn:hover, .dashboardBtn:active, .dashboardBtn:focus {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 10pt;
    gap: 0.5rem;
    display: flex;
    align-items: center;
}

.dashboardCancelBtn, .dashboardCancelBtn:hover, .dashboardCancelBtn:active, .dashboardCancelBtn:focus {
    background: var(--color-info-dark);
    color: var(--color-white);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 10pt;
    gap: 0.5rem;
    display: flex;
    align-items: center;
}

.logoutBtn, .logoutBtn:hover, .logoutBtn:active, .logoutBtn:focus {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 10pt;
    gap: 0.5rem;
    display: flex;
    align-items: center;
}

@media (max-width: 475px) {
    .dashContainer {
        display: block;
        max-width: 100%;
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }
}

@media (max-width: 575px) {
    .mobileCard {
        padding: 1.25rem 0.5rem !important;
    }
}

@media (max-width: 767px) {
    .logoutBtn {
        display: none;
    }
}

@media (min-width: 768px) {
    .logoutBtn {
        display: flex;
        align-items: center;
    }
}

/*Sidebar Menu*/

.sidebar {
    position: fixed;
    top: 70px; /* height of navbar */
    bottom: 0;
    left: 0;
    overflow-y: auto;
    background-color: var(--color-white);
    border-right: 1px solid #e0e0e0;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.03);
}

.sidebar .nav-link {
    display: flex;
    color: var(--color-dark);
    gap: 1rem;
    align-items: center;
    position: relative;
    height: 3rem;
    transition: all 300ms ease;
    text-decoration: none;
}

.sidebar .collapse-inner .nav-link {
    padding-left: 2rem;
    font-size: 0.9rem;
    height: 2rem;
}

.sidebar h3 {
    font-weight: 500;
    margin-bottom: 0;
}

.sidebar .nav-link i {
    font-size: 1.6rem;
    transition: all 300ms ease;
}

.sidebar .nav-link:hover:after {
    content: '';
    width: 6px;
    height: 100%;
    background: var(--color-primary);
}

.menuAlign {
    width: 100%;
    justify-items: center;
}

@media (max-width: 767px) {
    .sidebar .collapse-inner .nav-link {
        font-size: 0.85rem;
        padding-left: 1.5rem;
    }

    .sidebar {
        width: 250px;
        z-index: 1;
    }
}

@media (max-width: 1199px) {
    .sidebar .nav-link {
        padding-left: 0;
        padding-right: 0;
    }
}

.profilePic img, .profilePic input {
    width: 10rem;
    height: 10rem;
    background: var(--color-info-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    object-fit: cover;
    object-position: 0rem 0rem;
}

@media (min-width: 768px) and (max-width: 991px) {
    .sidebar {
        width: 27% !important;
    }
}

@media (min-width: 992px) and (max-width: 1399px) {
    .sidebar {
        width: 20% !important;
    }
}

@media (min-width: 1400px) and (max-width: 1650px) {
    .sidebar {
        width: 17% !important;
    }
}

@media (min-width: 1651px) {
    .sidebar {
        width: 15% !important;
    }
}

/*Main*/

main {
    min-height: 100vh;
}

main table {
    /*text-align: center;*/
    width: 100%;
}

main table td {
    height: 2.8rem;
}

@media (max-width: 475px) {
    main table td, main table th {
        font-size: 8pt;
    }
}

@media (min-width: 767) {
    main table {
        table-layout: fixed;
    }
}

@media (min-width: 768) {
    main table {
        table-layout: auto;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    main {
        width: 73% !important;
    }
}

@media (min-width: 992px) and (max-width: 1399px) {
    main {
        width: 80% !important;
    }
}

@media (min-width: 1400px) and (max-width: 1650px) {
    main {
        width: 83% !important;
    }
}

@media (min-width: 1651px) {
    main {
        width: 85% !important;
    }
}

.selectBtnCol {
    display: flex;
}

.actionBtnCol {
    display: flex;
}

@media (max-width: 575px) {
    .selectBtnCol {
        justify-content: space-between;
    }

    .actionBtnCol {
        justify-content: space-between;
    }
}

@media (min-width: 576px) {
    .selectBtnCol {
        justify-content: start;
    }

    .actionBtnCol {
        justify-content: end;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .selectBtnCol button {
        padding: 8px 25px;
        margin-right: 1rem;
    }

    .selectBtnCol button:last-child {
        margin-right: 0;
    }

    .actionBtnCol button {
        padding: 8px 25px;
        margin-right: 1rem;
    }

    .actionBtnCol button:last-child {
        margin-right: 0;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .selectBtnCol button {
        padding: 8px 15px;
        margin-right: 0.75rem;
    }

    .actionBtnCol button {
        padding: 8px 15px;
        margin-right: 0.75rem;
    }

    .selectBtnCol button:last-child {
        margin-right: 0;
    }

    .actionBtnCol button:last-child {
        margin-right: 0;
    }
}

@media (min-width: 991px) {
    .selectBtnCol button {
        margin-right: 1rem;
    }

    .actionBtnCol button {
        margin-right: 1rem;
    }

    .selectBtnCol button:last-child {
        margin-right: 0;
    }

    .actionBtnCol button:last-child {
        margin-right: 0;
    }
}

/*Dashboard*/

main .insights > div {
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .insights > div:hover {
    box-shadow: none;
}

main .insights .jobs {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .insights .candidates {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .insights .recruiters {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .insights .business {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

@media (max-width: 575px) {
    main .insights .jobs {
        padding: var(--mobile-padding);
    }

    main .insights .candidates {
        padding: var(--mobile-padding);
    }

    main .insights .recruiters {
        padding: var(--mobile-padding);
    }

    main .insights .business {
        padding: var(--mobile-padding);
    }
}

@media (max-width: 991px) {
    main .insights {
        display: block;
    }

    main .insights > div {
        display: block;
        margin-bottom: 3rem;
    }
}

@media (min-width: 992px) {
    main .insights {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 2rem;
    }

    main .insights > div {
        display: grid;
    }

    main .insights .jobs {
        height: 100%;
    }

    main .insights .candidates {
        height: 100%;
    }

    main .insights .recruiters {
        height: 100%;
    }

    main .insights .business {
        height: 100%;
    }
}

/*Admin Jobs Management*/

main .admJobs > div {
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .admJobs > div:hover {
    box-shadow: none;
}

main .admJobs .jobCatSelect {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admJobs .jobList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admJobs .moveJobs {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admJobs .manageJobsSelect {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admJobs .manageJobList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

.admJobsBtn, .admJobsBtn:hover, .admJobsBtn:active, .admJobsBtn:focus {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 10pt;
    gap: 0.5rem;
    text-align: right;
}

.admJobsCancelBtn, .admJobsCancelBtn:hover, .admJobsCancelBtn:active, .admJobsCancelBtn:focus {
    background: var(--color-info-dark);
    color: var(--color-white);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 10pt;
    gap: 0.5rem;
    display: flex;
    align-items: center;
}

main .admJobs .responseJobsSelect {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admJobs .responseJobList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admJobs .jobListSearch {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admJobs .jobSharingList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

.jobDivide {
    border-bottom: 1px solid var(--color-info-light);
}

.jobDivide:last-child {
    border-bottom: none;
}

main .admJobs .searchJobSource {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admJobs .searchJobSourceResult {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admJobs .addJobSource {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admJobs .jobSourceInfoView {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admJobs .jdApproval {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admJobs .admJobPosting {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admJobs .admJobFilter {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admJobs .jpPacks {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

.multiCheckOpt {
    height: 11.5em;
    border: solid 1px #c0c0c0;
    overflow: auto;
    padding: 10px 0;
    background: var(--color-white);
}

main .multiCheckOpt > table {
    text-align: left !important;
}

main .multiCheckOpt > table td {
    height: auto !important;
}
 
.multiCheckOpt label {
    /*display: block;*/
    line-height: 1.7;
    color: #333;
    margin-bottom: 0.5rem;
}

.multiCheckOpt input {
    margin: 0 10px !important;
    /*width: 7%;*/
    scale: 1.5;
}

.jpCardGrid > div {
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

.jpCardGrid > div:hover {
    box-shadow: none;
}

.jpCardGrid .jpFreeUse {
    background: var(--color-white);
    padding: var(--padding-2);
    border-radius: var(--border-radius-1);
}

.jpCardGrid .jpBoostedUse {
    background: var(--color-white);
    padding: var(--padding-2);
    border-radius: var(--border-radius-1);
}

.jpCardGrid .jpPremiumUse {
    background: var(--color-white);
    padding: var(--padding-2);
    border-radius: var(--border-radius-1);
}

.jpCardGrid .jpManagedUse {
    background: var(--color-white);
    padding: var(--padding-2);
    border-radius: var(--card-border-radius);
}

.jpPackRadio {
    scale: 1.5 !important;
    vertical-align: baseline !important;
}

.jpPackList {
    list-style: none;
}

.jobPType {
    float: right;
    width: 90px;
}

@media (max-width: 575px) {
    main .admJobs .jobCatSelect {
        padding: var(--mobile-padding);
    }

    main .admJobs .jobList {
        padding: var(--mobile-padding);
    }

    main .admJobs .moveJobs {
        padding: var(--mobile-padding);
    }

    main .admJobs .manageJobsSelect {
        padding: var(--mobile-padding);
    }

    main .admJobs .manageJobList {
        padding: var(--mobile-padding);
    }

    main .admJobs .responseJobsSelect {
        padding: var(--mobile-padding);
    }

    main .admJobs .responseJobList {
        padding: var(--mobile-padding);
    }

    main .admJobs .jobListSearch {
        padding: var(--mobile-padding);
    }

    main .admJobs .jobSharingList {
        padding: var(--mobile-padding);
    }

    main .admJobs .searchJobSource {
        padding: var(--mobile-padding);
    }

    main .admJobs .searchJobSourceResult {
        padding: var(--mobile-padding);
    }

    main .admJobs .addJobSource {
        padding: var(--mobile-padding);
    }

    main .admJobs .jobSourceInfoView {
        padding: var(--mobile-padding);
    }

    main .admJobs .jdApproval {
        padding: var(--mobile-padding);
    }

    main .admJobs .admJobPosting {
        padding: var(--mobile-padding);
    }

    main .admJobs .admJobFilter {
        padding: var(--mobile-padding);
    }

    main .admJobs .jpPacks {
        padding: var(--mobile-padding);
    }

    .jpCardGrid .jpFreeUse {
        padding: var(--padding-1);
    }

    .jpCardGrid .jpBoostedUse {
        padding: var(--padding-1);
    }

    .jpCardGrid .jpPremiumUse {
        padding: var(--padding-1);
    }

    .jpCardGrid .jpManagedUse {
        padding: var(--padding-1);
    }

    main .admJobs .jobList table td,
    main .admJobs .jobList table th {
        padding: 0.25rem 0.1rem;
        font-size: 5pt;
    }

    main .admJobs .manageJobList table td,
    main .admJobs .manageJobList table th {
        padding: 0.25rem 0.1rem;
        font-size: 5pt;
    }

    main .admJobs .responseJobList table td,
    main .admJobs .responseJobList table th {
        padding: 0.25rem 0.1rem;
        font-size: 5pt;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    main .admJobs .jobList table td,
    main .admJobs .jobList table th {
        padding: 0.5rem 0.25rem;
        font-size: 7pt;
    }

    main .admJobs .manageJobList table td,
    main .admJobs .manageJobList table th {
        padding: 0.5rem 0.25rem;
        font-size: 7pt;
    }

    main .admJobs .responseJobList table td,
    main .admJobs .responseJobList table th {
        padding: 0.5rem 0.25rem;
        font-size: 7pt;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    main .admJobs .jobList table td,
    main .admJobs .jobList table th {
        padding: 0.2rem 0.1rem;
        font-size: 7pt;
    }

    main .admJobs .manageJobList table td,
    main .admJobs .manageJobList table th {
        padding: 0.2rem 0.1rem;
        font-size: 7pt;
    }

    main .admJobs .responseJobList table td,
    main .admJobs .responseJobList table th {
        padding: 0.2rem 0.1rem;
        font-size: 7pt;
    }
}

@media (max-width: 991px) {
    main .admJobs {
        display: block;
    }

    main .admJobs > div {
        display: block;
        margin-bottom: 3rem;
    }

    .jpCardGrid {
        display: block;
    }

    .jpCardGrid > div {
        display: block;
        margin-bottom: 3rem;
    }
}

@media (min-width: 992px) {
    main .admJobs {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 2rem;
    }

    main .admJobs > div {
        display: grid;
    }

    main .admJobs .jobCatSelect {
        height: 100%;
    }

    main .admJobs .jobList {
        height: 100%;
    }

    main .admJobs .moveJobs {
        height: 100%;
    }

    main .admJobs .manageJobsSelect {
        height: 100%;
    }

    main .admJobs .manageJobList {
        height: 100%;
    }

    main .admJobs .responseJobsSelect {
        height: 100%;
    }

    main .admJobs .responseJobList {
        height: 100%;
    }

    main .admJobs .jobListSearch {
        height: 100%;
    }

    main .admJobs .jobSharingList {
        height: 100%;
    }

    main .admJobs .searchJobSource {
        height: 100%;
    }

    main .admJobs .searchJobSourceResult {
        height: 100%;
    }

    main .admJobs .addJobSource {
        height: 100%;
    }

    main .admJobs .jobSourceInfoView {
        height: 100%;
    }

    main .admJobs .jdApproval {
        height: 100%;
    }

    main .admJobs .admJobPosting {
        height: 100%;
    }

    main .admJobs .admJobFilter {
        height: 100%;
    }

    main .admJobs .jpPacks {
        height: 100%;
    }

    .jpCardGrid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 2rem;
    }

    .jpCardGrid .jpFreeUse {
        height: 100%;
    }

    .jpCardGrid .jpBoostedUse {
        height: 100%;
    }

    .jpCardGrid .jpPremiumUse {
        height: 100%;
    }

    .jpCardGrid .jpManagedUse {
        height: 100%;
    }
}

/*Admin Products*/

main .admProducts > div {
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .admProducts > div:hover {
    box-shadow: none;
}

main .admProducts .newProduct {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admProducts .manageProduct {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admProducts .productList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

@media (max-width: 375px) {
    main .admProducts .productList table td,
    main .admProducts .productList table th {
        padding: 0.25rem 0.1rem;
        font-size: 5pt;
    }
}

@media (max-width: 575px) {
    main .admProducts .newProduct {
        padding: var(--mobile-padding);
    }

    main .admProducts .manageProduct {
        padding: var(--mobile-padding);
    }

    main .admProducts .productList {
        padding: var(--mobile-padding);
    }
}

@media (max-width: 991px) {
    main .admProducts {
        display: block;
    }

    main .admProducts > div {
        display: block;
        margin-bottom: 3rem;
    }
}

@media (min-width: 992px) {
    main .admProducts {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 2rem;
    }

    main .admProducts > div {
        display: grid;
    }

    main .admProducts .newProduct {
        height: 100%;
    }

    main .admProducts .manageProduct {
        height: 100%;
    }

    main .admProducts .productList {
        height: 100%;
    }
}

/*Admin Candidates*/

main .jobseekers > div {
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .jobseekers > div:hover {
    box-shadow: none;
}

main .jobseekers .candidateDataStats {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .jobseekers .candidateAccStats {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .jobseekers .candidateInfo {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .jobseekers .lapseCanSearch {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .jobseekers .manageLapseList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

.admCanBtn, .admCanBtn:hover, .admCanBtn:active, .admCanBtn:focus {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 10pt;
    gap: 0.5rem;
}

.admCanCancelBtn, .admCanCancelBtn:hover, .admCanCancelBtn:active, .admCanCancelBtn:focus {
    background: var(--color-info-dark);
    color: var(--color-white);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 10pt;
    gap: 0.5rem;
    display: flex;
    align-items: center;
}

.admPMDeleteBtn, .admPMDeleteBtn:hover, .admPMDeleteBtn:active, .admPMDeleteBtn:focus {
    background: var(--color-info-dark);
    color: var(--color-white);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 10pt;
    gap: 0.5rem;
    display: flex;
    align-items: center;
}

main .jobseekers .pmPricing {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .jobseekers .pmActivate {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .jobseekers .managePMList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .jobseekers .admCanChangeMail {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

.jobseekers .canProfileView {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

.canProfilePic img, .canProfilePic input {
    width: 10rem;
    height: 10rem;
    background: var(--color-info-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    object-fit: cover;
    object-position: 0rem 0rem;
}

@media (max-width: 575px) {
    main .jobseekers .candidateDataStats {
        padding: var(--mobile-padding);
    }

    main .jobseekers .candidateAccStats {
        padding: var(--mobile-padding);
    }

    main .jobseekers .candidateInfo {
        padding: var(--mobile-padding);
    }

    main .jobseekers .lapseCanSearch {
        padding: var(--mobile-padding);
    }

    main .jobseekers .manageLapseList {
        padding: var(--mobile-padding);
    }

    main .jobseekers .pmPricing {
        padding: var(--mobile-padding);
    }

    main .jobseekers .pmActivate {
        padding: var(--mobile-padding);
    }

    main .jobseekers .managePMList {
        padding: var(--mobile-padding);
    }

    main .jobseekers .admCanChangeMail {
        padding: var(--mobile-padding);
    }

    .jobseekers .canProfileView {
        padding: var(--card-padding);
    }

    main .jobseekers .manageLapseList table td,
    main .jobseekers .manageLapseList table th {
        padding: 0.15rem 0.1rem;
        font-size: 4pt;
    }

    .testimonialNav {
        margin-bottom: 1.5rem;
    }

    .admCanBtn {
        margin-bottom: 1rem;
        padding: 6px 25px;
        font-size: 10pt;
    }

    .admCanCancelBtn {
        margin-bottom: 1rem;
        padding: 6px 25px;
        font-size: 10pt;
    }

    main .jobseekers .manageLapseList table td > input[type="checkbox" i] {
        scale: 0.7;
        margin: 0;
    }
}

@media (max-width: 991px) {
    main .jobseekers {
        display: block;
    }

    main .jobseekers > div {
        display: block;
        margin-bottom: 3rem;
    }

    .jobseekers .canProfileView p {
        margin-bottom: 1rem;
    }
}

@media (min-width: 992px) {
    main .jobseekers {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 2rem;
    }

    main .jobseekers > div {
        display: grid;
    }

    main .jobseekers .candidateDataStats {
        height: 100%;
    }

    main .jobseekers .candidateAccStats {
        height: 100%;
    }

    main .jobseekers .candidateInfo {
        height: 100%;
    }

    main .jobseekers .lapseCanSearch {
        height: 100%;
    }

    main .jobseekers .manageLapseList {
        height: 100%;
    }

    main .jobseekers .pmPricing {
        height: 100%;
    }

    main .jobseekers .pmActivate {
        height: 100%;
    }

    main .jobseekers .managePMList {
        height: 100%;
    }

    main .jobseekers .admCanChangeMail {
        height: 100%;
    }

    .jobseekers .canProfileView {
        height: 100%;
    }

    .jobseekers .canProfileView p {
        margin-bottom: 0;
    }
}

/*Admin Clients*/

main .clients > div {
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .clients > div:hover {
    box-shadow: none;
}

main .clients .clientPrdtSearch {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .clientPrdtList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .clientDisplay {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .clientList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

.clientSearchBtn, .clientSearchBtn:hover, .clientSearchBtn:active, .clientSearchBtn:focus {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 8px 32px;
    font-size: 10pt;
    gap: 0.5rem;
    display: flex;
    align-items: center;
}

.clientFilterBtn, .clientFilterBtn:hover, .clientFilterBtn:active, .clientFilterBtn:focus {
    background: var(--color-grey);
    color: var(--color-dark);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 10pt;
    gap: 0.5rem;
    transition: 0.3s;
}

main .clients .clientUnsub {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .clientPendingPay {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .clientInvoice {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .clientInvoiceList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

.clients .clientViewPrdt {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

.clients .clientViewPrdt p {
    color: var(--color-dark);
}

main .clients .clientViewSearch {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .clientViewList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

.clientBtn, .clientBtn:hover, .clientBtn:active, .clientBtn:focus {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 10pt;
    gap: 0.5rem;
    text-align: right;
}

.clientCancelBtn, .clientCancelBtn:hover, .clientCancelBtn:active, .clientCancelBtn:focus {
    background: var(--color-info-dark);
    color: var(--color-white);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 10pt;
    gap: 0.5rem;
    display: flex;
    align-items: center;
}

main .clients .addClientProduct {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .clientPrdtPay {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .viewClientInfo {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .viewClientInfo p {
    color: var(--color-dark);
}

main .clients .viewClientUsers {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .viewClientPrdt {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .viewClientJobs {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .viewClientInvoice {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .editClientInfo {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .editClientContact {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .addClientBasicInfo {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .addClientPrdtInfo {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .clients .addClientPaymentInfo {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

.addClientNav, .addClientNav:hover, .addClientNav:active, .addClientNav:focus {
    background: var(--color-grey);
    color: var(--color-dark);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 9pt;
    gap: 0.5rem;
    transition: 0.3s;
}

.addClientTab, .addClientTab:hover, .addClientTab:active, .addClientTab:focus {
    background: var(--color-dark);
    color: var(--color-white);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 9pt;
    gap: 0.5rem;
    transition: 0.3s;
}

main .clients .manageClientInfo {
    display: none;
}

main .clients #clientBasicInfo {
    display: grid;
}

main .clients .clientPayUpdate {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

@media (max-width: 575px) {
    main .clients .clientPrdtSearch {
        padding: var(--mobile-padding);
    }

    main .clients .clientPrdtList {
        padding: var(--mobile-padding);
    }

    main .clients .clientDisplay {
        padding: var(--mobile-padding);
    }

    main .clients .clientList {
        padding: var(--mobile-padding);
    }

    main .clients .clientUnsub {
        padding: var(--mobile-padding);
    }

    main .clients .clientPendingPay {
        padding: var(--mobile-padding);
    }

    main .clients .clientInvoice {
        padding: var(--mobile-padding);
    }

    main .clients .clientInvoiceList {
        padding: var(--mobile-padding);
    }

    .clients .clientViewPrdt {
        background: var(--color-white);
        padding: var(--card-padding);
        border-radius: var(--card-border-radius);
    }

    main .clients .clientViewSearch {
        padding: var(--mobile-padding);
    }

    main .clients .clientViewList {
        padding: var(--mobile-padding);
    }

    main .clients .addClientProduct {
        padding: var(--mobile-padding);
    }

    main .clients .clientPrdtPay {
        padding: var(--mobile-padding);
    }

    main .clients .viewClientInfo {
        padding: var(--mobile-padding);
    }

    main .clients .viewClientUsers {
        padding: var(--mobile-padding);
    }

    main .clients .viewClientPrdt {
        padding: var(--mobile-padding);
    }

    main .clients .viewClientJobs {
        padding: var(--mobile-padding);
    }

    main .clients .viewClientInvoice {
        padding: var(--mobile-padding);
    }

    main .clients .editClientInfo {
        padding: var(--mobile-padding);
    }

    main .clients .editClientContact {
        padding: var(--mobile-padding);
    }

    main .clients .addClientBasicInfo {
        padding: var(--mobile-padding);
    }

    main .clients .addClientPrdtInfo {
        padding: var(--mobile-padding);
    }

    main .clients .addClientPaymentInfo {
        padding: var(--mobile-padding);
    }

    main .clients .clientPayUpdate {
        padding: var(--mobile-padding);
    }
}

@media (max-width: 991px) {
    main .clients {
        display: block;
    }

    main .clients > div {
        display: block;
        margin-bottom: 3rem;
    }
}

@media (min-width: 992px) {
    main .clients {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 2rem;
    }

    main .clients > div {
        display: grid;
    }

    main .clients .clientDisplay {
        height: 100%;
    }

    main .clients .clientList {
        height: 100%;
    }

    main .clients .clientPrdtSearch {
        height: 100%;
    }

    main .clients .clientPrdtList {
        height: 100%;
    }

    main .clients .clientUnsub {
        height: 100%;
    }

    main .clients .clientPendingPay {
        height: 100%;
    }

    main .clients .clientInvoice {
        height: 100%;
    }

    main .clients .clientInvoiceList {
        height: 100%;
    }

    .clients .clientViewPrdt {
        height: 100%;
    }

    main .clients .clientViewSearch {
        height: 100%;
    }

    main .clients .clientViewList {
        height: 100%;
    }

    main .clients .addClientProduct {
        height: 100%;
    }

    main .clients .clientPrdtPay {
        height: 100%;
    }

    main .clients .viewClientInfo {
        height: 100%;
    }

    main .clients .viewClientUsers {
        height: 100%;
    }

    main .clients .viewClientPrdt {
        height: 100%;
    }

    main .clients .viewClientJobs {
        height: 100%;
    }

    main .clients .viewClientInvoice {
        height: 100%;
    }

    main .clients .editClientInfo {
        height: 100%;
    }

    main .clients .editClientContact {
        height: 100%;
    }

    main .clients .addClientBasicInfo {
        height: 100%;
    }

    main .clients .addClientPrdtInfo {
        height: 100%;
    }

    main .clients .addClientPaymentInfo {
        height: 100%;
    }

    main .clients .clientPayUpdate {
        height: 100%;
    }
}

/*Admin Manage Resources*/

main .manageResource > div {
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .manageResource > div:hover {
    box-shadow: none;
}

main .manageResource .articleStatList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .manageResource .articleList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .manageResource .newArticle {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .manageResource .addPoll {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .manageResource .managePoll {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .manageResource .categoryList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .manageResource .testimonialList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

.testimonialNav, .testimonialNav:hover, .testimonialNav:active, .testimonialNav:focus {
    background: var(--color-grey);
    color: var(--color-dark);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 9pt;
    gap: 0.5rem;
    transition: 0.3s;
}

.currentTab, .currentTab:hover, .currentTab:active, .currentTab:focus {
    background: var(--color-dark);
    color: var(--color-white);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 9pt;
    gap: 0.5rem;
    transition: 0.3s;
}

.testimonialBtn, .testimonialBtn:hover, .testimonialBtn:active, .testimonialBtn:focus {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 10pt;
    gap: 0.5rem;
    text-align: right;
}

main .manageResource .manageTestimonial {
    display: none;
}

main .manageResource #recrTestimonial {
    display: grid;
}

main .manageResource .manageAds {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .manageResource .addNewAds {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .manageResource .adsList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

@media (max-width: 575px) {
    main .manageResource .articleStatList {
        padding: var(--mobile-padding);
    }

    main .manageResource .articleList {
        padding: var(--mobile-padding);
    }

    main .manageResource .newArticle {
        padding: var(--mobile-padding);
    }

    main .manageResource .addPoll {
        padding: var(--mobile-padding);
    }

    main .manageResource .managePoll {
        padding: var(--mobile-padding);
    }

    main .manageResource .categoryList {
        padding: var(--mobile-padding);
    }

    main .manageResource .testimonialList {
        padding: var(--mobile-padding);
    }

    main .manageResource .manageAds {
        padding: var(--mobile-padding);
    }

    main .manageResource .addNewAds {
        padding: var(--mobile-padding);
    }

    main .manageResource .adsList {
        padding: var(--mobile-padding);
    }

    main .manageResource .articleList table td,
    main .manageResource .articleList table th {
        padding: 0.25rem 0.1rem;
        font-size: 5pt;
    }

    .testimonialNav {
        margin-bottom: 1.5rem;
    }

    .testimonialBtn {
        margin-bottom: 1rem;
        padding: 6px 15px;
        font-size: 7pt;
    }

    main .manageResource .testimonialList table td,
    main .manageResource .testimonialList table th {
        padding: 0.25rem 0.1rem;
        font-size: 4.5pt;
    }

    main .manageResource .testimonialList table td > input[type="checkbox" i] {
        scale: 0.8;
        margin: 0;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    main .manageResource .articleList table {
        font-size: 8pt;
    }

    main .manageResource .articleList table td,
    main .manageResource .articleList table th {
        padding: 0.25rem 0.25rem;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .testimonialBtn {
        padding: 8px 20px;
    }
}

@media (max-width: 991px) {
    main .manageResource {
        display: block;
    }

    main .manageResource > div {
        display: block;
        margin-bottom: 3rem;
    }
}

@media (min-width: 992px) {
    main .manageResource {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 2rem;
    }

    main .manageResource > div {
        display: grid;
    }

    main .manageResource .articleStatList {
        height: 100%;
    }

    main .manageResource .articleList {
        height: 100%;
    }

    main .manageResource .newArticle {
        height: 100%;
    }

    main .manageResource .addPoll {
        height: 100%;
    }

    main .manageResource .managePoll {
        height: 100%;
    }

    main .manageResource .categoryList {
        height: 100%;
    }

    main .manageResource .testimonialList {
        height: 100%;
    }

    main .manageResource .manageAds {
        height: 100%;
    }

    main .manageResource .addNewAds {
        height: 100%;
    }

    main .manageResource .adsList {
        height: 100%;
    }
}

/*Admin Consultants*/

main .consultants > div {
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .consultants > div:hover {
    box-shadow: none;
}

main .consultants .consultantDisplay {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .consultants .consultantList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

.addConsultant {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

.consultSearchBtn, .consultSearchBtn:hover, .consultSearchBtn:active, .consultSearchBtn:focus {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 8px 32px;
    font-size: 10pt;
    gap: 0.5rem;
    display: flex;
    align-items: center;
}

.consultFilterBtn, .consultFilterBtn:hover, .consultFilterBtn:active, .consultFilterBtn:focus {
    background: var(--color-grey);
    color: var(--color-dark);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 10pt;
    gap: 0.5rem;
    transition: 0.3s;
}

@media (max-width: 575px) {
    main .consultants .consultantDisplay {
        padding: var(--mobile-padding);
    }

    main .consultants .consultantList {
        padding: var(--mobile-padding);
    }
}

@media (max-width: 991px) {
    main .consultants {
        display: block;
    }

    main .consultants > div {
        display: block;
        margin-bottom: 3rem;
    }
}

@media (min-width: 992px) {
    main .consultants {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 2rem;
    }

    main .consultants > div {
        display: grid;
    }

    main .consultants .consultantDisplay {
        height: 100%;
    }

    main .consultants .consultantList {
        height: 100%;
    }

    .addConsultant {
        height: 100%;
    }
}

/*Admin Reports*/

main .reports > div {
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .reports > div:hover {
    box-shadow: none;
}

main .reports .emailReport {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .reports .unsubscribeReport {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .reports .jobseekerReport {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .reports .jsSectorReport {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .reports .jobsReport {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .reports .candidateReport {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .reports .recruiterReport {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .reports .businessReport {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .reports .usageReport {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .reports .onlineCategoryList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .reports .onlineReport {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

@media (max-width: 575px) {
    main .reports .emailReport {
        padding: var(--mobile-padding);
    }

    main .reports .unsubscribeReport {
        padding: var(--mobile-padding);
    }

    main .reports .jobseekerReport {
        padding: var(--mobile-padding);
    }

    main .reports .jsSectorReport {
        padding: var(--mobile-padding);
    }

    main .reports .jobsReport {
        padding: var(--mobile-padding);
    }

    main .reports .candidateReport {
        padding: var(--mobile-padding);
    }

    main .reports .recruiterReport {
        padding: var(--mobile-padding);
    }

    main .reports .businessReport {
        padding: var(--mobile-padding);
    }

    main .reports .usageReport {
        padding: var(--mobile-padding);
    }

    main .reports .onlineCategoryList {
        padding: var(--mobile-padding);
    }

    main .reports .onlineReport {
        padding: var(--mobile-padding);
    }
}

@media (max-width: 991px) {
    main .reports {
        display: block;
    }

    main .reports > div {
        display: block;
        margin-bottom: 3rem;
    }
}

@media (min-width: 992px) {
    main .reports {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 2rem;
    }

    main .reports > div {
        display: grid;
    }

    main .reports .emailReport {
        height: 100%;
    }

    main .reports .unsubscribeReport {
        height: 100%;
    }

    main .reports .jobseekerReport {
        height: 100%;
    }

    main .reports .jsSectorReport {
        height: 100%;
    }

    main .reports .jobsReport {
        height: 100%;
    }

    main .reports .candidateReport {
        height: 100%;
    }

    main .reports .recruiterReport {
        height: 100%;
    }

    main .reports .businessReport {
        height: 100%;
    }

    main .reports .usageReport {
        height: 100%;
    }

    main .reports .onlineCategoryList {
        height: 100%;
    }

    main .reports .onlineReport {
        height: 100%;
    }
}

/*Admin Master Pages*/

main .masterPages > div {
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .masterPages > div:hover {
    box-shadow: none;
}

main .masterPages .countryStatList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .masterPages .countryList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .masterPages .qualStatList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .masterPages .qualList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .masterPages .catStatList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .masterPages .categoryList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

@media (max-width: 575px) {
    main .masterPages .countryStatList {
        padding: var(--mobile-padding);
    }

    main .masterPages .countryList {
        padding: var(--mobile-padding);
    }

    main .masterPages .qualStatList {
        padding: var(--mobile-padding);
    }

    main .masterPages .qualList {
        padding: var(--mobile-padding);
    }

    main .masterPages .catStatList {
        padding: var(--mobile-padding);
    }

    main .masterPages .categoryList {
        padding: var(--mobile-padding);
    }
}

@media (max-width: 991px) {
    main .masterPages {
        display: block;
    }

    main .masterPages > div {
        display: block;
        margin-bottom: 3rem;
    }
}

@media (min-width: 992px) {
    main .masterPages {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 2rem;
    }

    main .masterPages > div {
        display: grid;
    }

    main .masterPages .countryStatList {
        height: 100%;
    }

    main .masterPages .countryList {
        height: 100%;
    }

    main .masterPages .qualStatList {
        height: 100%;
    }

    main .masterPages .qualList {
        height: 100%;
    }

    main .masterPages .catStatList {
        height: 100%;
    }

    main .masterPages .categoryList {
        height: 100%;
    }
}

/*Admin Create Pages*/

main .createPage > div {
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .createPage > div:hover {
    box-shadow: none;
}

main .createPage .pageContent {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

.addPageNav, .addPageNav:hover, .addPageNav:active, .addPageNav:focus {
    background: var(--color-grey);
    color: var(--color-dark);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 9pt;
    gap: 0.5rem;
    transition: 0.3s;
}

.addPageTab, .addPageTab:hover, .addPageTab:active, .addPageTab:focus {
    background: var(--color-dark);
    color: var(--color-white);
    border-radius: 20px;
    padding: 8px 32px;
    font-size: 9pt;
    gap: 0.5rem;
    transition: 0.3s;
}

main .createPage .managePageInfo {
    display: none;
}

main .createPage #aboutPageInfo {
    display: grid;
}

@media (max-width: 575px) {
    main .createPage .pageContent {
        padding: var(--mobile-padding);
    }
}

@media (max-width: 991px) {
    main .createPage {
        display: block;
    }

    main .createPage > div {
        display: block;
        margin-bottom: 3rem;
    }
}

@media (min-width: 992px) {
    main .createPage {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 2rem;
    }

    main .createPage > div {
        display: grid;
    }

    main .createPage .pageContent {
        height: 100%;
    }
}

/*Admin User Add & Edit*/

.admNewUser > div {
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

.admNewUser > div:hover {
    box-shadow: none;
}

.admNewUser .newUser {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

@media (max-width: 575px) {
    .admNewUser .newUser {
        padding: var(--card-padding);
    }
}

@media (max-width: 991px) {
    .admNewUser {
        display: block;
    }

    .admNewUser > div {
        display: block;
        margin-bottom: 3rem;
    }
}

@media (min-width: 992px) {
    .admNewUser {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 2rem;
    }

    .admNewUser > div {
        display: grid;
    }

    .admNewUser .newUser {
        height: 100%;
    }
}

/*Admin User Privilege*/

main .admUserAccess > div {
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .admUserAccess > div:hover {
    box-shadow: none;
}

main .admUserAccess .staffList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .admUserAccess .accessList {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

@media (max-width: 575px) {
    main .admUserAccess .staffList {
        padding: var(--mobile-padding);
    }

    main .admUserAccess .accessList {
        padding: var(--mobile-padding);
    }
}

@media (max-width: 991px) {
    main .admUserAccess {
        display: block;
    }

    main .admUserAccess > div {
        display: block;
        margin-bottom: 3rem;
    }
}

@media (min-width: 992px) {
    main .admUserAccess {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 2rem;
    }

    main .admUserAccess > div {
        display: grid;
    }

    main .admUserAccess .newUser {
        height: 100%;
    }
}

/*Admin User Info*/

main .admUserInfo > div {
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .admUserInfo > div:hover {
    box-shadow: none;
}

main .admUserInfo .userInfo {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

@media (max-width: 575px) {
    main .admUserInfo .userInfo {
        padding: var(--mobile-padding);
    }
}

@media (max-width: 991px) {
    main .admUserInfo {
        display: block;
    }

    main .admUserInfo > div {
        display: block;
        margin-bottom: 3rem;
    }
}

@media (min-width: 992px) {
    main .admUserInfo {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 2rem;
    }

    main .admUserInfo > div {
        display: grid;
    }

    main .admUserInfo .userInfo {
        height: 100%;
    }
}

/*Admin Change Password*/

main .changePWD > div {
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .changePWD > div:hover {
    box-shadow: none;
}

main .changePWD .newPass {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

@media (max-width: 575px) {
    main .changePWD .newPass {
        padding: var(--mobile-padding);
    }
}

@media (max-width: 991px) {
    main .changePWD {
        display: block;
    }

    main .changePWD > div {
        display: block;
        margin-bottom: 3rem;
    }
}

@media (min-width: 992px) {
    main .changePWD {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 2rem;
    }

    main .changePWD > div {
        display: grid;
    }

    main .changePWD .newPass {
        height: 100%;
    }
}

/*Admin Notes*/

main .notes > div {
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .notes > div:hover {
    box-shadow: none;
}

main .notes .addNotes {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

main .notes .manageNotes {
    background: var(--color-white);
    padding: var(--card-padding-1);
    border-radius: var(--card-border-radius);
}

@media (max-width: 575px) {
    main .notes .addNotes {
        padding: var(--mobile-padding);
    }

    main .notes .manageNotes {
        padding: var(--mobile-padding);
    }
}

@media (max-width: 991px) {
    main .notes {
        display: block;
    }

    main .notes > div {
        display: block;
        margin-bottom: 3rem;
    }
}

@media (min-width: 992px) {
    main .notes {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 2rem;
    }

    main .notes > div {
        display: grid;
    }

    main .notes .addNotes {
        height: 100%;
    }

    main .notes .manageNotes {
        height: 100%;
    }
}

/*Footer*/

footer {
    background: var(--color-white) !important;
    padding: 1rem !important;
    border-top: 1px solid #e0e0e0 !important;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05);
    border-bottom: none !important;
    display: block !important;
}