/*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;
}

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);
}

.recDashboardBtn, .recDashboardBtn:hover, .recDashboardBtn:active, .recDashboardBtn: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;
    justify-content: center;
}

.recDashboardCancelBtn, .recDashboardCancelBtn:hover, .recDashboardCancelBtn:active, .recDashboardCancelBtn: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;
}

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

.logoutBtn {
    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;
    }
}

/*Recruiter Dashboard Home*/

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

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

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

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

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

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

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

.recCompLogoPic {
    width: 10rem;
    overflow: hidden;
    background: var(--color-info-light);
}

.noticeAdImg {
    width: 25rem;
    display: flex;
    margin: 0 auto;
}

.bg-recrHome {
    background: var(--color-primary);
}

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

    main .recHome .recWelcomeMsg {
        padding: var(--mobile-padding);
    }

    main .recHome .recNoticeBoard {
        padding: var(--mobile-padding);
    }

    .recCompLogoPic {
        margin-bottom: 1rem;
    }
}

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

    main .recHomeInfo > div {
        display: block;
        margin-bottom: 1rem;
    }

    main .recHome {
        display: block;
    }

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

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

    main .recHomeInfo > div {
        display: grid;
        align-content: center;
    }

    main .recHomeInfo .recBasicInfo {
        height: auto;
    }

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

    main .recHome > div {
        display: grid;
        align-content: space-between;
    }

    main .recHome .recWelcomeMsg {
        height: auto;
    }

    main .recHome .recNoticeBoard {
        height: auto;
    }
}

/*Recruiter Job Posting*/

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

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

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

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

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

.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(--border-radius-1);
}

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

.jpPackList {
    list-style: none;
}

.jpCardGrid h2 {
    font-size: 1.3rem;
    display: flex;
    line-height: 1.5;
    align-items: center;
}

.jpCardGrid p {
    font-size: 11pt;
}

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

    main .recJobs .recJobFilter {
        padding: var(--mobile-padding);
    }

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

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

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

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

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

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

    #pubContainer .recJobs > div {
        display: block;
        margin-bottom: 3rem;
    }
}

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

    #pubContainer .recJobs > div {
        display: grid;
    }

    #pubContainer .recJobs .recAddFolder {
        height: 100%;
    }

    #pubContainer .recJobs .recJobFilter {
        height: 100%;
    }
}

@media (max-width: 1199px) {
    .jpCardGrid {
        display: block;
    }

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

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

    .jpCardGrid .jpFreeUse {
        height: 100%;
    }

    .jpCardGrid .jpBoostedUse {
        height: 100%;
    }

    .jpCardGrid .jpPremiumUse {
        height: 100%;
    }

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

/*Recruiter My Jobs*/

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

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

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

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

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

    main .recMyJobs .viewMyJobs {
        padding: var(--mobile-padding);
    }
}

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

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

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

    main .recMyJobs > div {
        display: grid;
    }

    main .recMyJobs .viewMyJobsType {
        height: 100%;
    }

    main .recMyJobs .viewMyJobs {
        height: 100%;
    }
}

/*Recruiter Premium Candidate List*/

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

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

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

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

.pmCanPic {
    width: auto;
    height: 6.5rem;
    padding: 1rem;
}

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

    main .recPMCandidate .pmList {
        padding: var(--mobile-padding);
    }
}

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

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

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

    main .recPMCandidate > div {
        display: grid;
    }

    main .recPMCandidate .pmListFilter {
        height: 100%;
    }

    main .recPMCandidate .pmList {
        height: 100%;
    }
}

/*Resume Search*/

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

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

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

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

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

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

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

    main .recJSSearch > div {
        display: grid;
    }

    main .recJSSearch .recJSSearchForm {
        height: 100%;
    }
}

/*Recruiter Folders*/

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

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

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

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

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

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

    main .recFolders .recManageFolder {
        padding: var(--mobile-padding);
    }

    main .recFolders .recFolderInfo {
        padding: var(--mobile-padding);
    }
}

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

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

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

    main .recFolders > div {
        display: grid;
    }

    main .recFolders .recAddFolder {
        height: 100%;
    }

    main .recFolders .recManageFolder {
        height: 100%;
    }

    main .recFolders .recFolderInfo {
        height: 100%;
    }
}

/*Recruiter Email Template*/

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

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

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

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

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

    main .recMailTemp .manageMailTemp {
        padding: var(--mobile-padding);
    }
}

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

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

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

    main .recMailTemp > div {
        display: grid;
    }

    main .recMailTemp .editMailTemp {
        height: 100%;
    }

    main .recMailTemp .manageMailTemp {
        height: 100%;
    }
}

/*Recruitment Solutions*/

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

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

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

.rsImg {
    width: 8rem;
}

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

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

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

    .serviceGrid {
        display: block;
    }

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

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

    main .recServices > div {
        display: grid;
    }

    main .recServices .recServicesList {
        height: 100%;
    }

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

    .serviceGrid > div {
        display: grid;
        align-content: space-between;
    }
}

/*Recruiter User List*/

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

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

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

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

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

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

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

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

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

    main .recUsers > div {
        display: grid;
    }

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

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

/*Recruiter User Privilige*/

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

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

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

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

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

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

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

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

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

    main .recUserAccess > div {
        display: grid;
    }

    main .recUserAccess .staffList {
        height: 100%;
    }

    main .recUserAccess .accessList {
        height: 100%;
    }
}

/*Recruiter Company Info*/

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

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

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

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

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

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

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

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

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

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

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

    main .recCompInfo > div {
        display: grid;
    }

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

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

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

/*Recruiter Change Password*/

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

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

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

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

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

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

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

    main .recChangePWD > div {
        display: grid;
    }

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

/*Recruiter Contact Us*/

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

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

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

.captchaImg {
    display: flex;
    width: 10rem;
    margin-bottom: 1rem;
}

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

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

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

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

    main .recHelp > div {
        display: grid;
    }

    main .recHelp .recHelpForm {
        height: 100%;
    }
}

/*Recruiter Testimonial*/

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

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

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

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

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

    main .recTestimonial .manageRecTestimonial {
        padding: var(--mobile-padding);
    }
}

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

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

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

    main .recTestimonial > div {
        display: grid;
    }

    main .recTestimonial .recTestContent {
        height: 100%;
    }

    main .recTestimonial .manageRecTestimonial {
        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;
}