/* Site.css */

:root {
    --background-color: white;
    --topbar-color: gray;
    --footer-color: black;
    --header-title: "Default Title";
    --color-gray: #e2e2e2;
    --color-white: #fff;
    --color-black: #000;
    --signin-border-color: #042136;
    --our-button-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    --our-button-hover: 0 0.75rem 1rem 0 rgba(0, 0, 0, 0.24), 0 1rem 3.125rem 0 rgba(0, 0, 0, 0.19);
    --our-box-shadow: 0 4px 8px 0 rgba(23, 22, 61, 0.2), 0 6px 20px 0 rgba(23, 22, 61, 0.19);
    --our-error-code: red;
    --our-button-red: #CB4A4A;
    --our-color-red: red;
    --our-success-code: green;
    --our-button-green: #0c750c;
    --our-color-green: green;
    --our-button-close: #8b005f;
    --footer-hover-color: rgb(251, 255, 0);
    --nav-box-shadow: 0 2px 2px 2px rgba(9, 9, 9, 0.23);
    --dropdown-color: rgb(251, 251, 251);
    --dropdown-hover-color: #f2f2f2;
    --dropdown-box-shadow: 0 10px 15px -3px rgba(46, 41, 51, 0.08), 0 4px 6px -2px rgba(71, 63, 79, 0.16);
    --topbar-background: linear-gradient(45deg, #10214f, #3E6D9C);
    --nexus-topbar-background: linear-gradient(45deg, #10214f, #3E6D9C);
    --nexus-button-color: #1E496D;
}

/* Nexus* #10214f */
.nexus {
    --main-nexus-color: #10214f;
    --main-nexus-light-color: #A3B9C8;
}

.superuser-portal {
    --main-color: #10214f;
    --main-light-color: #A3B9C8;
}

/* Employee Dashboard */
.emp-portal {
    --main-color: #3e6d9c;
    --main-light-color: #A0AEC1;
}

/* Supervisor Portal */
.sup-portal {
    --main-color: #166337;
    --main-light-color: #A3C8A9;
}

/* HR Portal */
.hr-portal {
    --main-color: #fd841e;
    --main-light-color: #E8C97D;
}

/* admin Portal */
.admin-portal {
    --main-color: #1e496d;
    --main-light-color: #A3C4CC;
}


/* PAPlus */
.aplus {
    --main-color: #4A768C;
    --main-light-color: #A3C4CC;
}

/* Jobs PLus */
.jobsplus {
    --main-color: #8B7A9F;
    --main-light-color: #CAB7D4;
}

/* Market Plus  */
.marketplus {
    --main-color: #4A6B5B;
    --main-light-color: #A0B8A4;
}

/* SVPro subset of JobsPlus */
.svpro {
    --main-color: #5F2D3E;
    --main-light-color: #C58B99;
}

/****************** GENERAL ******************/

.page-container {
    display: flex;
    height: 100vh; /* Full height of the viewport */
}

.page-color {
    color: var(--main-color);
}

.page-margin {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

.page-m-b {
    margin-bottom: 3rem;
}

.t-pad-b, .page-pad-b {
    padding-bottom: 4rem;
}

.ptag {
    color: var(--color-black);
    font-size: 1rem;
    margin: 0;
}

h2, h3, h4, h5, h6 {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.left-aligned {
    text-align: left;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

.error-code {
   color: var(--our-error-code);
}

.sm-margin {
    margin-top: 1rem
}

.md-margin {
    margin-left: 1.25rem;
    margin-bottom: 0.5rem;
}


.bot-marg {
   margin-bottom: 1rem;
}

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

.login-page-margin {
    margin-bottom: 3rem;
}

.emp-wording-color {
    color: #10214f;
}

.our-warning {
   color: var(--our-button-red);
}


/****************** BUTTONS ******************/

.button-container-across {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 0.8rem;
    padding-left: 0;
    padding-right: 0;
}

.button {
    display: inline-block;
    background-color: var(--main-color);
    color: var(--color-white);
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 0.225rem;
    margin-right: 0.625rem;
    margin-bottom: 0.625rem;
    text-decoration: none;
    text-align: center;
    font-family: "Montserrat", serif;
    white-space: normal; /* Allows wrapping */
}
    .button:hover {
        color: white;
        box-shadow: var(--our-button-hover)
    }

.b-type {
    font-family: "Montserrat", serif;
    padding: 0.3rem 0.5rem;
    height: auto;
    line-height: 1.2;
    font-size: .9rem;
}

.b-sm {
    width: 9rem;
}

.b-md {
   width: 10rem;

}

.b-lg {
    width: 11rem;
}

.b-exlg {
    width: 13rem;
}

/* Shared styles */
.b-format,
.b-format-exsm,
.b-format-sm {
    border: none;
    color: var(--color-white);
    padding: 0.3rem;
    margin-left: auto;
    cursor: pointer;
    border-radius: 0.5rem;
}

.b-format-exsm {
    margin-left: 0.5rem;
    margin-top: 0.5rem;
}
    /* Specific differences */

.b-format {
    font-size: 0.9rem;
}

.b-format-exsm {
    font-size: 0.6rem;
}

.b-format-sm {
    font-size: 0.8rem;
}

    .b-format:hover {
        box-shadow: 0 0.75rem 1rem 0 rgba(0, 0, 0, 0.24), 0 1rem 3.125rem 0 rgba(0, 0, 0, 0.19);
    }

.b-size-exsm {
    width: 2.5rem;
}


.b-size-sm {
    width: 4rem;
}

.b-size-md {
    width: 7rem;
}

.b-size-lg {
    width: 9rem;
}

.b-size-exlg {
    width: 11rem;
}

.b-pad {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

.b-pad-sm {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

.b-textcolor {
    color: var(--color-white);
}
.b-save, .b-start, .b-edit, .b-confirm, .b-process, .b-add {
    background-color: var(--our-button-green);
}

.b-cancel, .b-warning, .b-delete {
    background-color: var(--our-button-red);
}

.b-info {
    background-color: var(--main-color);
}

.b-info-nexus {
    background-color: var(--nexus-button-color);
}

.b-close {
    background-color: var(--our-button-close);
    color: var(--color-white);
    border: none;
    padding: 0.3rem;
    margin-left: auto;
    cursor: pointer;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    width: 4rem;
}
    .b-close:hover {
        background-color: #72004e;
        box-shadow: var(--our-button-hover);
    }

.b-close-bot-m {
    margin-bottom: 0.625rem;
}

.b-close-lg {
    width: auto;
}

.b-close-bot-m {
    margin-bottom: 0.625rem;
}


/****************** SPACING ******************/
.sp-m-t-sm {
    margin-top: 0.5rem;
}
.sp-m-t {
    margin-top: 1rem;
}

.sp-m-t-smmd {
    margin-top: 1.875rem;
}

.sp-m-t-md {
    margin-top: 2.5rem;
}

.sp-m-t-lg {
    margin-top: 4rem;
}

.sp-m-b-sm {
    margin-bottom: 0.5rem;
}

.sp-m-b {
    margin-bottom: 1rem;
}

.sp-m-b-md {
    margin-bottom: 2.5rem;
}

.sp-m-b-lg {
    margin-bottom: 4rem;
}


.sp-m-l {
    margin-left: 1rem;
}

.sp-m-lb {
    margin-left: 1.25rem;
    margin-bottom: 1rem;
}

.sp-push {
    margin-left: 1rem;
    margin-top: 1rem;
}

.sp-jf-push {
    margin-left: 3rem;
    margin-top: 1rem;
}

.sp-pg-m {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

.b-spacer {
    margin-right: 0.3rem;
}

.sp-box-pad {
    padding: 0.5rem 1rem 0 1rem;
}

.m-b-sm {
    margin-bottom: 0.5rem;
}

.sp-m-t-lg {
    margin-top: 2rem;
}


.move-cuz-if {
    margin-top: 0.5rem;
    margin-left: 0.5rem;
}

/****************** TABS ******************/
.tab-container {
    display: flex;
    gap: 0;
}

.tab-button {
    background-color: var(--main-color);
    color: var(--color-white);
    font-family: "Montserrat", serif;
    font-size: 1rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid white;
    border-bottom: none;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}

    .tab-button:hover {
        box-shadow: var(--our-button-hover);
    }

    .tab-button:focus {
        outline: none;
    }

/****************** POPUPS ******************/
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
}

/****************** POPUP FOR DISPLAY ******************/

.popup-details {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Shared styles */
.large-popup-overlay,
.small-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2.125rem;
}

.large-popup-overlay {
    z-index: 5000;
}

.small-popup-overlay {
    z-index: 1000;
}

/* Shared styles */
.large-popup-box,
.small-popup-box {
    background-color: white;
    border-radius: 0.625rem;
    box-shadow: 0px 0px 0.9375rem rgba(0, 0, 0, 0.3);
    margin-left: 1.25rem;
}

/* Large popup specific styles */
.large-popup-box {
    padding: 1.25rem;
    width: 31.25rem;
    max-height: 87vh;
    overflow-y: auto;
    text-align: left;
    z-index: 5000;
}

/* Small popup specific styles */
.small-popup-box {
    padding: 0.9375rem;
    width: 20rem;
    text-align: center;
}


/****************** GRID FOR DASHBOARD ******************/

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(13, 1fr); /* 13 equal-width columns */
    grid-template-rows: repeat(13, 2.5rem); /* 13 equal-height rows (40px -> 2.5rem) */
    gap: 2rem 1rem; /* row-gap (top/bottom) is 2rem, column-gap (left/right) is 3rem */
}

.dashboard-box {
    /*position: relative;*/ /* Allow relative positioning for child elements */
    background-color: var(--color-white);
    border: 0.0625rem solid #d2d2d2;
    box-shadow: var(--our-box-shadow);
    border-radius: 0.5rem;
    padding: 0; /* Remove padding; we'll manage it in child elements */
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden; /* Prevent overflow issues for the header */
}

.dashboard-box-header {
    background-color: var(--main-color);
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.2rem 0.6rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    text-align: left;
    /*z-index: 1;*/ /* Ensure it stays above the content */
}

.dashboard-box-content {
    padding: 0.9rem; /* Add padding inside the scrollable area */
    overflow-y: auto; /* Enable vertical scrolling */
    flex-grow: 1; /* Allow the content area to take up remaining space */
}

.reminders-box {
    grid-row: 1 / span 9;
    grid-column: 5 / span 8;
}

.quickjump-box {
    grid-row: 1 / span 3;
    grid-column: 1 / span 4;
}

.announce-box {
    grid-row: 4 / span 3;
    grid-column: 1 / span 4;

}
.announce-box-sup {
    grid-row: 1 / span 5;
    grid-column: 1 / span 4;
}

.announce-box-emp {
    grid-row: 1 / span 4;
    grid-column: 1 / span 4;
}

.news-box {
    grid-row: 7 / span 4;
    grid-column: 1 / span 4;
}

.news-box-emp {
    grid-row: 1 / span 4;
    grid-column: 5 / span 4;
}
.reminders-container {
    display: flex;
    align-items: flex-start;
}

/* Adjust layout for screen smaller than 1400px across 
@media screen and (max-width: 1400px) {
    .reminders-box {
        grid-column: 1 / span 4;
    }
    .quickjump-box {
        grid-column: 5 / span 4;
    }
    .news-box {
        grid-column: 9 / span 4;
    }
    .announce-box {
        grid-column: 1 / span 4;
    }

}*/

ul {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    list-style-type: none;
    margin-top: 0;
}

    ul li {
        list-style-type: none;
        margin-bottom: 0.5rem;
    }

.dashboard-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
}

.reminders-text {
    flex-grow: 1;
}

.quickjump-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Dynamically adjust columns */
    gap: 0.5rem;
}

.quickjump-button {
    font-family: "Montserrat", serif;
    margin: 0px;
    display: inline-block;
    background-color: var(--main-color);
    color: var(--color-white);
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    width: auto;
    max-width: 13rem;
    height: auto;
    border-radius: 0.225rem;
    margin-right: 0.3rem;
    margin-bottom: 0.625rem;
    text-decoration: none;
    text-align: center;
    white-space: normal;
    padding: 0.2rem 0.2rem;
    font-size: 0.9rem;
    line-height: 1.2;
}

.button-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Flexible grid for buttons */
    gap: 0.3rem;
}


.news-box a {
    text-decoration: none;
    color: black;
    display: flex;
    align-items: center;
}

    .news-box a:hover .news-link-text {
        text-decoration: underline;
    }

.news-link {
    text-decoration: none;
    color: black;
    display: flex;
    align-items: center;
}

.news-divider {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}


/******************  MISC **********************/
.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* spinner for any button for submitting something */
.spinner-save {
    height: 0.75rem;
    width: 2.625rem;
}

.dash-font {
    font-size: 0.9rem;
}


/*********************** DISTRICT LOGO DISPLAY NOT IN USE YET ********************/
.logo-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end; /* Align bottom */
    margin: 0 3.125rem;
}

.district-logo {
    width: 6.25rem;
    height: auto;
    margin: 0 1rem;
}

.logo-wrapper {
    text-align: center;
    margin-bottom: 1.25rem;
}

.district-name {
    font-size: 0.75rem;
    color: black;
    margin-top: 0.625rem;
    font-weight: bold;
}

/******************  TABLES **********************/

.scrollable-table-container {
    width: calc(100% - 2rem); /* Ensure table container takes up all but 1rem margin on each side */
    margin: 0 1rem; /* Adds 1rem margin on left and right */
    display: flex;
    justify-content: center; /* Center the contents horizontally */
    overflow-y: auto;
}

.table-container {
    width: calc(100% - 2rem);
    margin: 0 1rem;
}

.table-container-exwide {
    display: flex;
    align-items: flex-start;
    justify-content: left;
    flex-direction: column;
    max-width: 70rem;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    margin-top: 1.25rem;
    text-align: left;
    gap: 1rem;
}

.table-container-wide-site {
    display: flex;
    align-items: flex-start;
    justify-content: left;
    flex-direction: column;
    max-width: 70rem;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    margin-top: 1.25rem;
    text-align: left;
}

.table-box-wide {
    flex: 1;
    background-color: white;
    padding: 1.25rem;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    box-shadow: var(--our-box-shadow);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    border-radius: 0.5rem;
    width: calc(100% - 2.5rem);
    box-sizing: border-box;
    max-height: 75vh;
}


.table-header {
    overflow: hidden;
    scrollbar-gutter: stable; /* reserves space for the scrollbar */
}


.table-body {
    max-height: 25rem;
    overflow-y: scroll;
    scrollbar-gutter: stable; /* reserves space for the scrollbar */
}

.table-body-med {
    max-height: 20rem;
    overflow-y: scroll;
    scrollbar-gutter: stable; /* reserves space for the scrollbar */
}

/* Common table styles */
.table-data {
    width: 100%;
    border-collapse: collapse;
}

    .table-data th {
        text-align: left;
        font-weight: normal;
    }

    .table-data td {
        text-align: left;
        white-space: normal; /* allow wrapping */
        word-wrap: break-word; /* for older browsers */
    }

.sm-table-data {
    width: 50%;
   
}

    .sm-table-data th {
        text-align: left;
        font-weight: normal;
    }

    .sm-table-data td {
        text-align: left;
        white-space: normal; /* allow wrapping */
        word-wrap: break-word; /* for older browsers */
    }

.table-header table,
.table-body table {
    table-layout: fixed;
    text-align: left;
}

.table-data td {
    text-align: left;
}
.table-border {
    border: 0.1rem solid var(--main-color);
}


.table-wrap {
    white-space: pre-wrap;
}

.mybutton-icons img {
    width: 15px; 
    height: 15px;
    cursor: pointer;
}

/* Shared properties for all these classes */
.table-data-edit-sm,
.table-data-edit-md,
.ticon-1,
.ticon-2,
.table-data-edit-2,
.ticon-3,
.ticon-4 {
    white-space: nowrap;
    padding: 0.3125rem; /* Padding around icons */
}

/* Specific widths */
.table-data-edit-sm {
    width: 3%;
}

.table-data-edit-md {
    width: 15%;
}

.ticon-1 {
    width: 8%;
}

.ticon-1a {
    width: 6%;
}

.ticon-2,
.table-data-edit-2 {
    width: 10%;
}

.ticon-3 {
    width: 12%;
}

.ticon-4 {
    width: 14%;
}

.table-col {
    width: auto;
    text-align: left;
    padding: 0.3125rem;
    font-size: 1rem;
    font-weight: normal;
}

.fixed-header {
    position: sticky;
    top: 0;
    background-color: var(--main-color);
    color: var(--color-white);
    border: 0.0625rem solid var(--main-color);
    z-index: 100; /* Ensure it appears above other elements */
}

.not-fixed-header {
    background-color: var(--main-color);
    color: var(--color-white);
    border: 0.0625rem solid var(--main-color);
}

.th-fm {
    background-color: var(--main-color);
    border: 0.0625rem solid var(--main-color);
    color: var(--color-white);
}

.header-placement-left {
    text-align: left;
}



.table-data tr:nth-child(odd) {
    background-color: var(--color-white);
}

.table-data tr:nth-child(even) {
    background-color: #D4D1D1;
}


.table-container-scrollable {
    width: calc(100% - 2rem);
    margin: 0 1rem;
    overflow: hidden;
}

.table-data-wide-scroll-sm {
    max-height: 12rem;
    overflow-y: auto; /* Enables vertical scrolling */
    display: block; /* Ensures it behaves like a block element */
}

.table-data-wide-scroll-lg {
    max-height: 20rem;
    overflow-y: auto; /* Enables vertical scrolling */
    display: block; /* Ensures it behaves like a block element */
}


/* Container for the entire search section */
.search-section {
    margin-top: 1.5rem; /* Adjust spacing as needed */
}

/* Title styling */
.search-section h2 {
    margin-bottom: 0.5rem;
}

.radio-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    margin-left: 1.25rem;
    margin-right: 2rem;
}

    .radio-group label {
        display: flex;
        align-items: center;
    }

.search-table-container {
    height: 20rem; 
    overflow-y: auto; /* Vertical scrollbar when content overflows */
    border: 1px solid #ccc; 
    padding: 0.5rem;
}


.col-1 {
    width: 2%;
}

.col-1a {
    width: 3%;
}

.col-2 {
    width: 5%;
}

.col-2a {
    width: 7%;
}

.col-2b {
    width: 9%;
}



.col-3 {
    width: 12%;
}

.col-3a {
    width: 16%;
}

.col-4 {
    width: 18%;
}

.col-4 {
    width:22%;
}

.col-5 {
    width: 28%;

}

.col-5a {
    width: 35%;
}

.col-6 {
    width: 50%;

}

.col-auto {
    width: auto;
}


.no-wrapping {
    white-space: nowrap;
}

/*********************** FORMS ********************/
/* Shared styles for both containers */
.form-container,
.form-container-wide {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 1.25rem;
    text-align: left;
}

/* Specific styles for .form-container */
.form-container {
    justify-content: flex-start;
    max-width: 25rem;
    margin-left: 2rem;
    gap: 5.625rem;
}

/* Specific styles for .form-container-wide */
.form-container-wide {

    justify-content: flex-start;
    max-width: 45rem;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    gap: 1rem;
}

.form-container-exwide {
    display: flex;
    align-items: flex-start;
    justify-content: left;
    flex-direction: column;
    max-width: 60rem;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    margin-top: 1.25rem;
    text-align: left;
    gap: 1rem;
}

.form-container-full {
    display: flex;
    align-items: flex-start;
    justify-content: left;
    flex-direction: column;
    max-width: auto;
    /*    margin-left: 0.5rem;
    margin-right: 0.5rem;*/
    margin-top: 0.5rem;
    text-align: left;
    gap: 1rem;
}
.my-width {
    width: 100%;
}

.add-label {
    width: 12rem;
    font-size: 0.8rem;
    text-align: left;
    padding-right: 0.625rem;
    font-weight: bold;
}

.form-box,
.form-box-wide {
    flex: 1;
    background-color: white;
    padding: 1.25rem;
    box-shadow: var(--our-box-shadow);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    border-radius: 0.5rem;
}

.form-box-wide {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    width: calc(100% - 2.5rem);
    box-sizing: border-box;
}

.form-box-exwide {
    flex: 1;
    background-color: white;
    padding: 0.8rem;
    box-shadow: var(--our-box-shadow);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    border-radius: 0.5rem;
    box-sizing: border-box;
    gap: 0;
    width:100%;
}

.form-title {
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.input-container {
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
    justify-content: flex-start;
    margin-left: 0;
    padding-left: 0;
    width: 450px;
}

.input-container-full-width {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0.625rem;
}


.form-input {
    width: 22rem;
    padding: 0.5rem;
    border: 2px solid var(--main-nexus-color);
    border-radius: 0.8rem;
}

.input-value {
    background: var(--color-white);
    border: 0.2rem solid var(--main-color);
    color: var(--color-black);
    padding: 0.625rem 1.25rem;
    font-weight: bold;
    margin-left: auto;
    border-radius: 0.5rem;    
    background: var(--color-white);
    border: 0.2rem solid var(--main-color);
    color: var(--color-black);
    padding: 0.625rem 1.25rem;
    font-weight: bold;
    border-radius: 0.5rem;
    width: 375px;
}

.input-value-wide {
    font-family: "Montserrat", serif;
    margin: 0px;
    background: var(--color-white);
    border: 0.1rem solid var(--main-color);
    color: var(--color-black);
    padding: 0.3rem 0.3rem;
    font-weight: bold;
    border-radius: 0.25rem;
    width: 100%;
}

.form-submit-container-right {
    margin-top: 0.625rem;
    margin-left: auto;
    text-align: right; /* Align the content to the right */
}

.form-submit-container-left {
    margin-top: 0.625rem;
    margin-left: auto;
    text-align: left; /* Align the content to the left */
}

/* specifics for client and employee forms */
*,
*:before,
*:after {
    box-sizing: border-box;
}

.input-value-wide {
    font-family: "Montserrat", serif;
    margin: 0px;
    background: var(--color-white);
    border: 0.1rem solid var(--main-color);
    color: var(--color-black);
    padding: 0.3rem 0.3rem;
    font-weight: bold;
    border-radius: 0.25rem;
    width: 100%;
}

.color-blue-sm {
    font-size: 0.875rem;
    color: blue;
}

.input-dropdown {
    background: var(--color-white);
    border: 0.1rem solid var(--main-color);
    color: var(--color-black);
    padding: 0.3rem 0.3rem;
    font-weight: bold;
    border-radius: 0.25rem;
    width: 28rem;
    font-size: 0.85rem;
}



.add-label-small {
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
    text-align: left;
    font-weight: bold;
}

.input-row {
    display: flex;
    gap: 1.2rem;
    width: 100%;
}

.input-container-largerinput,
.input-container-smallinput {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.625rem;
    box-sizing: border-box;
}

.input-container-largerinput {
    flex: 2;
}

.input-container-smallinput {
    flex: 1;
}


/* Popup Form */
.popup-form {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 50%;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

    .popup-form .form-header h3 {
        margin: 0;
        font-size: 18px;
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
    }

    .popup-form .form-body label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .popup-form .form-body input,
    .popup-form .form-body textarea {
        width: 100%;
        margin-bottom: 15px;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-family: Arial, sans-serif;
        font-size: 14px;
    }

    .popup-form .form-footer {
        text-align: right;
    }

    .popup-form button {
        margin-left: 10px;
    }

/****************** EMPLOYEES AND APPRAISALS DISPLAY CSS  ******************/


/* Outlined box for employee details */
.employee-details-box {
    border: 2px solid var(--main-nexus-color);
    padding: 1rem;
    margin-bottom: 1rem;
    margin: 0 1.25rem 1rem 1.25rem
}

/* Flex container for columns */
.flex-container {
    display: flex;
}

/* For a 50% width column */
.col-50 {
    width: 50%;
}

/* A row for a label and its value */
.info-row {
    display: flex;
    margin-bottom: 0.5rem;
}

/* Left column label (40% width) */
.label-40 {
    width: 40%;
    text-align: right;
    font-weight: bold;
}

/* Left column value (60% width) */
.value-60 {
    width: 60%;
    text-align: left;
}

/* Right column label (50% width) */
.label-50 {
    width: 50%;
    text-align: right;
    font-weight: bold;
}

/* Right column value (50% width) */
.value-50 {
    width: 50%;
    text-align: left;
}

/* APPRAISAL CSS */

/* Outer wrapper with blue background */
.evaluation-form-wrapper {
    border: 0.125rem solid var(--main-nexus-color);
    border-radius: 0.5rem;
    margin: 0 1.25rem; /* 1.25rem margin on left/right sides */
    padding: 1rem; /* 1rem padding inside the border */
    box-sizing: border-box;
    background-color: #BFC7D1; /* Pale Grayish Blue */
}

/* Header container set to relative so the logo can be absolutely positioned */
.header-container {
    position: relative;
    text-align: center;
    margin-bottom: 1rem;
}

    .header-container h1 {
        font-size: 2rem; /* Make text large (adjust to your preference) */
        display: inline-block; /* Keeps the entire heading inline for centered text */
        margin: 0;
    }

/* Absolutely positioned logo: stays 1.25rem from the left border of the wrapper */
.header-logo {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4.375rem;
    height: auto;
}


/* Header text centered */
.header-text {
    margin: 0;
    font-size: 2rem;
}


/* Existing employee info container */
.employee-info-container {
    border: 0.125rem solid var(--main-nexus-color);
    /*    margin: 1rem 0;*/
    width: 100%;
    box-sizing: border-box;
}

/* Header band across the employee info boxes */
.employee-info-header {
    background-color: var(--main-nexus-color);
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 0.5rem;
    font-size: 1.2rem;
    border-bottom: 0.125rem solid var(--main-nexus-color);
}


/* Grid for the 3 rows x 2 columns layout */
.employee-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /*gap: 0.5rem; */
}


/* Each box in the grid */
.employee-info-box {
    border: 0.0625rem solid var(--main-nexus-color);
    padding-left: 0.2rem;
    background-color: var(--color-white);
    padding: 0.3rem 0.4rem 0.2rem 0.4rem;
}


/* Title inside each box */
.employee-info-title {
    color: var(--main-nexus-color);
    font-weight: bold;
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}

.employee-info-comment {
    color: var(--main-nexus-color);
    font-weight: bold;
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
    margin-top: 0.4rem;
}


/* Value text inside each box */
.employee-info-value {
    color: black;
    padding-left: 0.4rem;
    padding-bottom: 0.2rem;
    font-size: 0.8rem;
}

.employee-info-value-header {
    color: black;
    padding-left: 0.4rem;
    padding-bottom: 0.2rem;
    font-size: 1rem;
}

.header-row {
    background-color: var(--main-nexus-color);
    color: white;
    font-weight: bold;
    display: flex;
    margin-top: 0.1rem;
    font-size: 1rem;
}
    .header-row div {
        text-align: center;
    }

/* Each row in the Job Functions grid: 3 boxes across */
.three-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 0.3rem; /* Spacing between rows */
}

.two-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 0.3rem;
}

.flex-row {
    display: flex;
    margin-bottom: 0.3rem;
}

.box-25 {
    width: 25%;
}

.box-50 {
    width: 50%;
}

.rating-left {
    flex: 1;
}

.rating-container {
    font-size: 0.8rem;
}

.rating-right {
    flex: 1;
    text-align: left;
    padding-right: 0.5rem; /* Adjust spacing as needed */
    font-size: 0.8rem;
}

.rating-item {
    display: flex;
    align-items: center;
}

.rating-label {
    font-size: 0.8rem;
}

.rating-item input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 0.125rem solid var(--main-nexus-color);
    border-radius: 4px;
    background: white;
    position: relative;
    cursor: pointer;
}

    /*     When checked, show a blue fill */
    .rating-item input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--main-nexus-color);
        border-radius: 0.25rem;
    }

    /*     For disabled checkboxes, override default opacity and cursor */
    .rating-item input[type="checkbox"]:disabled {
        cursor: not-allowed;
        opacity: 1; /*Remove default gray-out*/
    }

/* Value text inside each box */
.comment-sig-info-value {
    color: black;
    padding: 0.4rem;
    font-size: 0.8rem;
}

/* Two columns: left for rating + desc, right for function text/comment */
.two-col {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Box styling */
.rating-box,
.function-box {
    border: 1px solid var(--main-nexus-color);
    padding: 0.5rem;
    background: var(--color-white);
}

    /* Dropdown full width */
    .rating-box select {
        width: 100%;
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }

/* Description text */
.rating-desc {
    font-size: 0.8rem;

    color: #333;
}

.rating-box .rating-desc {
    margin-top: 0.9rem;
}

.rating-box select {
    margin-bottom: 0.9rem;
}

.rating-name {
    font-size: 0.8rem;
    font-weight: bold;
}

/****************** TERMS AND PRIVACY PAGES ******************/
.emsprivacy-content {
    padding-left: 2rem;
    padding-right: 2rem;
}

.emsprivacytitle {
    color: var(--main-color);
    font-weight: bold;
}

.emsprivacyheader {
    font-weight: bold;
}

/****************** CHECKBOX STYLING ******************/

.checkbox-horizontal-container {
    display: flex; 
    gap: 1rem; 
    align-items: center; 
    justify-content: flex-start; 
    width: auto; 
    margin-bottom: 0.8rem; 
}

.checkbox-option {
    display: flex;
    align-items: flex-start;
}

.checkbox-label {
    margin-left: 0.5rem;
    font-size: 1rem;
}

/*New Additions Enosis*/
.center-text {
    text-align: center;
}

.center-flex-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.spinner {
    border: 8px solid #FFFFFF; /* White */
    border-top: 8px solid #333333; /* Dark Gray */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.ml-2-rem {
    margin-left: 2rem;
}

.ml-1-rem {
    margin-left: 1rem;
}

.ml-pt5-rem {
    margin-left: 0.5rem;
}

.ml-0 {
    margin-left: 0;
}

.mt-1-rem {
    margin-top: 1rem;
}

.mt-03 {
    margin-top: 0.3rem;
}

.mh-60 {
    min-height: 60px;
}

.mb-0{
    margin-bottom: 0;
}

.mb-08rem{
    margin-bottom: 0.8rem;
}

.fw-b{
    font-weight: bold;
}

.reconciliation-popup-details {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.pdf-popup-box {
    background-color: white;
    width: 80%;
    overflow-y: auto;
    box-shadow: 0px 0px 0.9375rem rgba(0, 0, 0, 0.3);
    border-radius: 0.625rem;
    text-align: center;
    margin-left: 1.25rem;
    z-index: 5000;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.pdf-preview-size {
    height: 90%;
    width: 90%;
}

.width-auto {
    width: auto;
}

.background-red {
    background-color: var(--our-button-red);
}

.paginator-box {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 2rem);
    margin: 0 1rem;
}

.paginator-items {
    display: flex;
    gap: 5px;
}

.paginator-button {
    background: transparent;
    border-style: none;
    cursor: pointer;
    font-size: x-large;
}

.page-size-options {
    margin: 0 1rem 0.625rem 1rem;
}

.page-size-selector {
    font-size: .85rem;
    padding: .3rem;
    border: 0.1rem solid var(--main-color);
}

.form-full-width {
    width: 100%;
}

.font-weight-normal {
    font-weight: normal;
}

.input-max-width-50
{
    max-width: calc(50% - .5rem);
}

.radio-horizontal-container {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    margin-top: 0.25rem;
    margin-bottom: 0.15rem;
}

.radio-option {
    display: flex;
    align-items: center;
}

.radio-label {
    margin-left: 0.5rem;
    font-size: 1rem;
}


.mb-2 {
    margin-bottom: 2px;
}

.mb-50 {
    margin-bottom: 50px;
}

.w-45 {
    width: 45rem;
}

.mw-15rem {
    max-width: 15rem;
}

.background-main-color {
    background-color: var(--main-color) !important;
}

/****************** NEWS ITEMS ******************/
.news-item-recipients input[type="radio"].valid.modified {
    outline: none;
}

.checkbox-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(10, auto);
    gap: 0.2rem;
}

.news-items .table-data td {
    text-align: justify;
    padding-right: 20px;
}

.news-story {
    display: flex;
    align-items: start;
    gap: 15px;
    padding: 5px;
}

.news-delete-icon img {
    width: 16px;
    height: 16px;
    margin-top: 4px;
    cursor: pointer;
}

.ta-justify {
    text-align: justify;
}

.w-22{
    width: 22rem;
}

/****************** JOB DESCRIPTIONS ******************/

.job-title-spacing {
    margin-top: 2rem;
}


.job-description-box {
    border: 2px solid var(--main-color);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    background-color: var(--color-white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.job-title-tag {
    position: absolute;
    top: -1rem;
    left: 1rem;
    background-color: var(--main-color);
    color: var(--color-white);
    font-weight: bold;
    padding: 0 0.5rem;
    border-radius: 2px;
    text-transform: uppercase;
    font-size: 1rem;
}

.job-content ul li {
    list-style-type: disc;
    margin-left: 1.5rem;
/*    padding-left: 1.5rem;*/
}

.editable-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.editable-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.jd-text {
    flex: 1;
    display: block;
}

.jd-text-lt {
    flex: 1;
    display: block;
    opacity: 0.5;
}

.b-jdsave {
    background-color: #993366;
}

.myJDbutton-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    padding: 0.25rem;
}

.button-row {
    margin: 1.5rem 0 0.5rem 0;
}

/* generic text container: two-column grid */
.comp-text {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem; /* space between the icon and the text */
    align-items: start; /* top-align both cells */
}

.comp-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.comp-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* vertical spacing between property / original / suggested */
}

.icon-group {
    display: flex;
    gap: 0;
}

.label-value {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.25rem; /* small space between label & value */
}

    .label-value > strong {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .label-value .jd-text,
    .label-value .jd-text-lt,
    .label-value .diff-inline {
        flex: 1 1 0;
        min-width: 0;
        white-space: normal;
    }

.invisible-icon {
    visibility: hidden;
}

.edit-data-area {
    margin-top: 1rem;
    margin-bottom: 2.5rem;
}


/* container for each FunctionText + Status */
.edit-func .form-group,
.editable-item .form-group {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem; 
}


    .edit-func .form-group > :first-child,
    .editable-item .form-group > :first-child {
        flex: 1 1 auto; /* grow/shrink across full width */
    }


.edit-func .status-label,
.editable-item .status-label {
    flex: 0 0 auto; 
    margin-left: auto; 
}

.edit-func select,
.editable-item select {
    margin-left: 0.5rem;
}


/****************** MICROSOFT CHATBOT OVERWRITES ******************/

img.chatclient-button {
    bottom: 20px !important;
}

/****************** SVPro CSS ******************/

.sv-ptag {
    color: black;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    font-size: 1rem;
}

.sv-icon {
    width: 15px;
    height: 15px;
    margin-right: 0.1rem;
    vertical-align: middle;
}

.sv-borderbox,
.sv-borderbox-bold {
    flex: 1;
    width: 75%;
    padding: 1.875rem;
    margin: 0 auto; /* Center horizontally */
    box-sizing: border-box;
    border-radius: 0.5rem;
    margin-bottom: 4rem;
    font-weight: inherit;
}

.sv-borderbox {
    border: 0.1875rem solid var(--main-color);
}

.sv-borderbox-bold {
    border: 0.4rem solid var(--main-color);
}

.sv-strong {
    font-weight: bold;
    background-color: var(--main-color);
    color: white
}
.sv-edit-color {
    color: var(--our-color-red);
}

.sv-edit-entry-comment {
    padding-left: 2rem;
    padding-top: 1rem;
}

.entry-indent {
    padding-left: 1rem;
}

.dd-indent {
    margin-left: 2rem;
}

.dd-push {
    padding-right: 2rem;
}

.pr-05rem {
    padding-right: 0.5rem;
}

.pt-5px {
    padding-top: 5px;
}

.error-message {
    color: var(--our-error-code);
    white-space: nowrap;
}

.vertical-align-top {
    vertical-align: top;
}

.mh-10rem {
    max-height: 10rem !important;
}

.mh-20rem {
    max-height: 20rem !important;
}

.tab-buttons {
    display: flex;
    border-bottom: 2px solid #ccc;
    margin-bottom: 1rem;
}

    .tab-buttons button {
        background: none;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        font-weight: 600;
        color: #555;
        border-bottom: 3px solid transparent;
        transition: border-color 0.3s ease, color 0.3s ease;
    }

        .tab-buttons button:hover {
            color: #0078d7;
        }

        .tab-buttons button.active {
            color: #0078d7;
            border-bottom-color: #0078d7;
            font-weight: 700;
        }

.tab-content {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fafafa;
}

.mw-500 {
    min-width: 500px;
}

.p-15 {
    padding: 15px;
}

.makesupervisor-modal .table-data td {
    padding-right: 5px !important;
}


.normal-whitespace {
    white-space: normal !important;
}