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

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

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

.jsRestrictBtn, .jsRestrictBtn:hover, .jsRestrictBtn:active, .jsRestrictBtn: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 {
    display: grid;
    justify-items: center;
}

.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 -1rem;
}

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

/*Jobseeker Dashboard Home*/

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

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

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

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

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

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

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

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

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

.noticeAdImg {
    width: 38rem !important;
    display: flex !important;
    margin: 0 auto !important;
}

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

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

    main .jsHomeInfo .jsAppliedJobs {
        padding: var(--mobile-padding);
    }

    main .jsHome .jsWelcomeMsg {
        padding: var(--mobile-padding);
    }

    main .jsHome .jsNoticeBoard {
        padding: var(--mobile-padding);
    }
}

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

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

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

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

    main .jsHomeInfo > div {
        display: grid;
        align-content: flex-start;
    }

    main .jsHomeInfo .jsBasicInfo {
        height: auto;
    }

    main .jsHomeInfo .jsAppliedJobs {
        height: auto;
    }

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

    main .jsHome > div {
        display: grid;
        align-content: flex-start;
    }

    main .jsHome .jsWelcomeMsg {
        height: auto;
    }

    main .jsHome .jsNoticeBoard {
        height: auto;
    }
}

/*Jobseeker Job Search*/

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

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

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

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

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

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

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

    main .jsJobSearch > div {
        display: grid;
    }

    main .jsJobSearch .searchJob {
        height: 100%;
    }
}

/*Jobseeker Job Search Result*/

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

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

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

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

.pubJobFlag {
    width: 3rem;
}

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

@media (max-width: 767px) {
    .pubLogoPic {
        margin-bottom: 1rem;
    }
}

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

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

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

    main .jsJobResult > div {
        display: grid;
    }

    main .jsJobResult .searchResultList {
        height: 100%;
    }
}

/*Job Description*/

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

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

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

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

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

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

    main .jobDescription > div {
        display: block;
    }
}

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

    main .jobDescription > div {
        display: grid;
    }

    main .jobDescription .jdContent {
        height: 100%;
    }
}

/*Jobseeker Profile*/

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

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

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

main .jsProfile .jsEditProfile {
    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;
}

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

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

    main .jsProfile .jsEditProfile {
        padding: var(--mobile-padding);
    }
}

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

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

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

    main .jsProfile > div {
        display: grid;
    }

    main .jsProfile .jsProfileContent {
        height: 100%;
    }

    main .jsProfile .jsEditProfile {
        height: 100%;
    }
}

/*Jobseeker Jobs Applied List*/

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

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

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

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

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

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

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

    main .jsJobStatus > div {
        display: grid;
    }

    main .jsJobStatus .appliedJobList {
        height: 100%;
    }
}

/*Jobseeker Privacy Settings*/

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

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

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

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

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

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

    main .jsPrivacy .privacyBlockResume {
        padding: var(--mobile-padding);
    }

    main .jsPrivacy .privacyHomeDisplay {
        padding: var(--mobile-padding);
    }
}

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

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

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

    main .jsPrivacy > div {
        display: grid;
    }

    main .jsPrivacy .privacyJobAlert {
        height: 100%;
    }

    main .jsPrivacy .privacyBlockResume {
        height: 100%;
    }

    main .jsPrivacy .privacyHomeDisplay {
        height: 100%;
    }
}

/*Jobseeker Notes*/

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

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

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

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

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

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

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

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

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

    main .jsNotes > div {
        display: grid;
    }

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

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

/*Jobseeker Comments*/

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

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

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

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

.commentList li {
    list-style: disc;
}

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

    main .jsComments .manageComments {
        padding: var(--mobile-padding);
    }
}

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

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

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

    main .jsComments > div {
        display: grid;
    }

    main .jsComments .addComments {
        height: 100%;
    }

    main .jsComments .manageComments {
        height: 100%;
    }
}

/*Jobseeker Change Password*/

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

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

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

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

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

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

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

    main .jsChangePWD > div {
        display: grid;
    }

    main .jsChangePWD .newPass {
        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;
}