/* ----------------------------------------
  ✦ Global Reset & Base Styles
------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Varela Round", sans-serif;
}

body {
  background: #F3F3F5 !important;
}

/* ----------------------------------------
  ✦ Layout Structure: Main Containers
------------------------------------------- */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
}

.main {
  flex: 1;
  transition: all 0.3s ease;
}

/* ----------------------------------------
  ✦ Sidebar Styling
------------------------------------------- */
.sidebar {
  background-color: #123A6B;
  color: white;
  width: 15%;
  min-width: 200px;
  padding: 20px;
  padding-right: 0;
  transition: transform 0.5s ease;
  height: 100vh;
  position: sticky;
  top: 0;
}

.sidebar.hidden {
  display: none;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 20px;
}

.sidebar-header img {
    width: 108px;
}
.sidebar-link a span img {
    height: 25px;
}
.close-btn {
  font-size: 20px;
  cursor: pointer;
  color: white;
  margin-top: -6px;
}

.sidebar-link {
    margin-top: 31px;
}
.sidebar h2, .sidebar a {
    color: #ffffff99;
    margin: 20px 0;
    text-decoration: none;
    display: flex !important;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    margin-top: 0px !important;
}
.sidebar-left-side-auto-content {
    height: 550px;
    overflow: auto;
}

.sidebar-left-side-auto-content::-webkit-scrollbar {
  width: 5px; 
  height: 5px; 
}

.sidebar-left-side-auto-content::-webkit-scrollbar-track {
  background: transparent; 
}

.sidebar-left-side-auto-content::-webkit-scrollbar-thumb {
  background-color: #c9c9c9; 
  border-radius: 10px; 
}

.user-profile-wrapper {
  position: relative;
  cursor: pointer;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-profile p {
    margin: 0;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    width: 190px;
    display: none;
    flex-direction: column;
    z-index: 1000;
}

.dropdown-menu a {
  padding: 10px 16px;
  text-decoration: none;
  color: #1e293b;
  font-size: 14px;
  transition: background 0.2s ease;
}

.dropdown-menu a:hover {
  background-color: #f1f5f9;
}

a.gap span {
    display: flex;
    align-items: center;
}

/* Active and logout styling */
a.gap {
  margin-bottom: 30px !important;
}

.space {
  margin-left: 5px !important;
  gap: 9px !important;
}



.active {
  background: #ffffff3a;
  padding: 7px 10px;
  border-radius: 30px 0 0 30px;
}

a.gap.space.parent-active{
    background: #ffffff3a;
  padding: 5px 10px;
  border-radius: 30px 0 0 30px;
}

a.gap.space.parent-active {
    margin-bottom: 20px !important;
}

.logout {
  background: #1B70BB;
  padding: 7px 14px;
  border-radius: 30px 0 0 30px;
  padding-left: 19px;
  width: -webkit-fill-available;
}

/* ----------------------------------------
  ✦ Navbar (Top Bar)
------------------------------------------- */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
   padding: 10px 42px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 888;
}


.logo img {
  width: 145px;
}

.right img {
  width: 28px;
}

.navbar .right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  color: black;
}

.hamburger {
  cursor: pointer;
  font-size: 20px;
}

/* ----------------------------------------
  ✦ Dashboard Container
------------------------------------------- */
.dashboard {
  margin: 20px;
  padding-top: 5px;
}

.dashboard h3 {
  font-size: 20px;
  color: #020215;
}

h3.dashboard-text {
    font-weight: 600;
    font-size: 22px;
    margin-top: 0px;
    margin-bottom: 0;
}

.user-bg.user-box-text h3 {
    font-weight: 600;
}

/* ----------------------------------------
  ✦ Dashboard Grid Layout
------------------------------------------- */
.dashboard-grid {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  grid-column-gap: 20px;
}

/* ----------------------------------------
  ✦ Welcome Card (User Intro)
------------------------------------------- */

.card-column-container a {
    text-decoration: none;
}
.card-first-part {
  background: #c9e6ff !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  padding-bottom: 0;
  border-radius: 20px 20px 0 0;
  margin-top: 26px;
}

.hr-image img {
  width: 132px;
  margin-bottom: -6px;
}

.active.x-active {
    background: #218FEC;
}

.user-bg {
  margin-top: -40px;
}

.user-bg h3 {
  color: #175e9d;
  margin-bottom: 10px;
  font-size: 23px;
}

.user-bg p {
  color: #175E9D;
  font-size: 15px;
}

.user-profile-content h4 {
    font-weight: 600;
    margin-top: 13px !important;
}
.profile-small-card.text_resize h4 {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 0;
    margin-top: 5px !important;
}

.profile-small-card.text_resize p {
    margin-bottom: 11px;
}
.logout-last-text p {
    margin: 0;
}
.flex-text.logout-last-text {
    margin-top: 0;
    position: relative;
    bottom: 3px;
}

.flex-text.logout-last-text p {
    font-size: 15px;
    position: relative;
    bottom: 2px;
}
.text_bold h3 {
    font-weight: 600;
    margin-top: 13px;
}
h2.notification-text {
    font-weight: 600;
    font-size: 22px;
    margin-top: 0px;
}
/* ----------------------------------------
  ✦ Profile Information Section
------------------------------------------- */
.middle-content-of-profile {
  background: white !important;
  padding: 20px;
  padding-top: 0;
  border-radius: 0 0 20px 20px;
}
.profile-info-grid.x {
    gap: 20px;
}
.profile-info-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 30px;
}

/* Profile avatar and name */
.profile-content.profile-image {
  margin-top: -41px;
  text-align: center;
}

.profile-content.profile-image img {
    width: 75px;
    margin-top: 0px;
    height: 75px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #77cbff;
}

.user-profile > img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 2px solid #256dc6ad;
}

.user-bg.user-box-text p {
    font-size: 14px;
}
.profile-content.profile-image.user-profile-content h4 {
    font-size: 15px;
}
.profile-content.profile-image h4 {
  font-size: 17px;
  margin: 8px 0;
}

.profile-content.profile-image span {
  font-size: 12px;
  font-weight: 500;
  background: #C9E6FF;
  padding: 5px 8px;
  color: #1d83de;
  border-radius: 28px;
  display: inline-block;
}

/* Leave balance / task cards */
.profile-small-card {
    text-align: center;
    margin-top: 20px;
}

.profile-small-card img {
  width: 48px;
}

.profile-small-card h4 {
  padding: 8px;
}

.profile-small-card p {
  color: #A9A9A9;
  font-weight: 300;
  font-size: 12.1px;
}

/* Last login message */
.flex-text {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  margin-top: 20px;
}

.flex-text img {
  width: 30px;
  position: relative;
  bottom: 2px;
}

.flex-text p {
  color: #1B70BB;
}

/* ----------------------------------------
  ✦ HR Management Cards
------------------------------------------- */
.hr-management-card,
.second-row-for-hr-management-card {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 17px;
  margin-top: 10px;
}

.middle-content-of-profile.x {
    padding: 5px 20px;
}

.hr-management-card {
  margin-top: 26px;
}

/* Individual HR card style */
.hr-card-item {
    text-align: center;
    padding: 20px 15px;
    background: white !important;
    border-radius: 20px;
    height: 146px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 8px;
    transition: .3s ease-in-out;
}

.hr-card-item:hover {
  background: #f5faff !important;
  transform: scale(1.1);
}

.hr-card-item img {
    width: 50px;
    margin-bottom: 1px;
}

.hr-card-item h3 {
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 21px;
    color: #494949;
}

/* ----------------------------------------
  ✦ Notification Section
------------------------------------------- */
.notification-section {
  margin: 20px;
  padding-top: 10px;
}

.notifications {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 20px;
  margin-top: 26px;
}

.notification-item {
  text-align: center;
  padding: 27px 20px;
  background: white !important;
  border-radius: 10px;
}



.notification-item h4 {
    font-size: 20px;
    color: #123A6B;
    font-weight: 600;
}

.notification-item img {
  height: 138px;
  margin: 30px 0;
}

.notification-item a {
  width: 100%;
  background: #4B97D9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px;
  text-decoration: none;
  color: white;
  border-radius: 13px;
}

.notification-item a:hover {
  transition: .3s ease-in-out;
  background: #123A6B;
}
.half-section.remove-space-zero {
    padding: 0;
}
.custom-container.background-change.add-color-blue {
    background: #e3f3ff;
    border: 1px solid #a9daff;
}

.bg-none {
    background: none !important;
}

.custom-container.background-change.add-color-orange {
    background: #ff4e250d !important;
    border: 1px solid #a42e135e !important;
}
.add-red-color {
    background: #FFF4F4 !important;
    border: 1px solid #d58c8c;
}
/* ----------------------------------------
  ✦ Responsive Styles (≤ 990px)
------------------------------------------- */
@media only screen and (max-width: 990px) {
  .pmsdashboard__approver {
    flex-direction: column;
    gap: 13px;
}
  .pmsdashboard__panel-header-title, .pmsdashboard__panel-title-alt {
    font-size: 14px !important;
}
.pmsdashboard__panel-header-btn {

    font-size: 10px !important
   
}
  .pmsdashboard__approver {
    flex: 1 1 66px !important;
  
}
  .max-width{
    max-width: 1200px !important;
  }
  
  .top_level_application_header_section_area {

    padding: 2rem !important;
   
}
          .main_page_header_display_title_text {
    font-size: 19px !important;
  
}
  .login-form form {
    width: 100% !important;
    padding: 25px !important;
}



.login-container span {
    font-size: 15px;
    margin-top: 18px !important;
    display: block;
}
.login-form form {
    margin-left: 0 !important;
}
  .login-container {
grid-template-columns: repeat(1, 1fr) !important;
}
.login-bg img {
    height: 100%;
    object-position: right;
    width: 100%;
    object-fit: contain;
    display: none;
}
.login-form {

    height: 100vh !important;
}
.login-form h4 {
    font-size: 20px;
}
  .border-section {
    padding: 9px !important;
    border-radius: 10px;
    padding-top: 6px !important;
    border: 1px solid #8080803b;
}

  .emplyee-info-bg-change span {

    width: 100% !important;
    padding: 7px;
}
  .payroll-grid-container {
    grid-template-columns: repeat(1, 1fr) !important;
   
}
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;       /* fixed width for mobile */
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    z-index: 9999;
    background-color: #003371;
    border-radius: 0 !important;
    padding-right: 0;
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .main {
    width: 100% !important;
    transition: margin-left 0.5s ease;
  }
   .main.sidebar-open {
    margin-left: 250px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    grid-row-gap: 20px;
  }

  .hr-image img {
    width: 90px;
    margin-bottom: -3px;
  }

  .hr-management-card,
  .second-row-for-hr-management-card {
    grid-template-columns: repeat(2, 1fr);
  }

  .notifications {
    grid-template-columns: repeat(1, 1fr);
    grid-row-gap: 20px;
  }

  .profile-content.profile-image {
    text-align: center;
    margin-top: 20px;
  }

  .profile-content.profile-image h4 {
    font-size: 15px;
  }

  .profile-content.profile-image span {
    font-size: 10px;
    padding: 6px 6px;
  }

  .profile-info-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 10px;
  }

  .middle-content-of-profile {
    padding: 20px 10px;
  }

  .flex-text p br {
    display: none;
  }

  .user-bg h3 {
    font-size: 19px;
    margin-bottom: 5px;
  }

  .right p {
    display: none;
  }

  .hr-image img {
    width: 147px !important;
    margin-bottom: -3px;
  }
  .custom-row {
    gap: 0;
    flex-direction: column;
}
.half-section {
    width: 100% !important;
    padding: 10px;
}

.custom-container {
    margin: 10px !important;
}
.half-section {
    padding: 15px !important;
 
}

.custom-section-title {
    font-size: 20px !important;
}

.info-label img {
    height: 20px !important;
}
.info-label {
    gap: 8px !important;
}
.info-label span {
    font-size: 14px;
}
.info-value {
    color: #334155;
    font-size: 13px !important;
    flex-basis: 60%;
    margin-top: 5px;
    padding-left: 72px;
}

.info-label {
    width: 61%;
}
.right-side-container {
    width: 100% !important;
}
.height-management {
    height: 100% !important;
}
.section-title {
    margin-bottom: 65px !important;
}
.section-title img {
    position: absolute;
    width: 55px;
    margin-top: 26px !important;
    margin-left: -32px !important;
}
.custom-section {
    padding: 15px !important;
 ;
}
.summary-header .summary-cell {
    background-color: #123a6b;
    color: white;
    font-weight: 600;
    font-size: 15px !important;
    text-align: center;
    display: flex;
    align-items: center;
    line-height: 23px;
}
.summary-cell {
    display: flex;
    align-items: center;
}
.more-info-for-dashboard{
  grid-template-columns: repeat(1, 1fr) !important;
  grid-row-gap: 20px !important;

}
}



/* leave request page css */

.custom-container {
  display: flex;
  flex-direction: column;
  margin: 32px;
}
.spacing-hide {
    padding-bottom: 18px !important;
    padding-top: 0;
}
.background-change {
    background: white;
    padding: 32px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
.custom-row {
  display: flex;
  gap: 32px;
  align-items: stretch;
}
.row-customize {
    margin: 30px;
}
.half-section {
    width: 50%;
    display: flex;
    flex-direction: column;
    background: white;
    padding: 27px 28px;
    border-radius: 12px;
    transition: all 0.3s ease;
}


.height-management {
    height: 600px;
  display: flex;
  flex-direction: column;
  background: white;
  padding: 32px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  transition: all 0.3s ease;
}
.leave-request-submission{
    background: white;
  padding: 32px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  transition: all 0.3s ease;
  margin-top: 30px;
  
}

.section-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    position: relative;
    margin-bottom: 50px;
}

.leave-request-submission a {
    display: block;
    text-align: center;
    background: #123A6B;
    color: white;
    padding: 17px;
    border-radius: 13px;
    text-decoration: none;
    margin-top: 10px;
}
.section-title img {
    position: absolute;
    width: 55px;
    margin-top: 10px;
    margin-left: 17px;
}
.half-section:hover {
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.12);
}
.right-side-container {
    width: 50%;
}
.custom-section {
  background: white;
  padding: 32px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  transition: all 0.3s ease;
}
.custom-section:hover {
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.12);
}
.custom-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    border-bottom: 1px solid #cbd5e1;
   padding-bottom: 12px !important;
}

/* Info rows for employee/leave request */
.custom-info-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.info-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 0;
    border-bottom: 1px solid #cbd5e1;
    gap: 0px;
}
.info-value input {
    border: 1px solid #cccccc;
    padding: 6px;
    border-radius: 5px;
    position: relative;
    bottom: 1px;
}
.bg-row-color span {
    background: linear-gradient(45deg, #0000000f, #0000001f);
    width: 272px;
    padding: 10px 12px;
}
.bg-row-color > .info-row {
    padding: 7px 0;
}

.bg-row-color > .info-row > .info-value {
    padding-left: 0 !important;
    margin-left: 32px;
    border: 2px solid #80808052;
    margin-top: 0;
    padding: 7px !important;
    padding-top: 11px !important;
}

.bg-row-color span {
    background: linear-gradient(45deg, #0000000f, #0000001f);
    width: 272px;
    padding: 12px;
}

/*  */


.emplyee-info-bg-change span {
    background: linear-gradient(45deg, #00000005, #0000001f);
    width: 240px;
    padding: 11px;
}

.emplyee-info-bg-change > .info-row {
  padding: 5px;
}

.emplyee-info-bg-change > .info-row > .info-value {
    padding-left: 0 !important;
    margin-left: 25px;
    border: 2px solid #80808052;
    margin-top: 0;
    padding: 9px !important;
    align-items: center;
    display: flex;
}



/*  */


.info-label {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
}
.info-label img {
    height: 28px;
}
.info-value {
    color: #334155;
    font-size: 14px;
    flex-basis: 60%;
    margin-top: 5px;
    padding-left: 72px;
}

/* Leave Summary table */
.summary-table {
  display: flex;
  flex-direction: column;
  border: 1px solid #cbd5e1;
  font-size: 15px;
}
.summary-row {
  display: flex;
  border-top: 1px solid #cbd5e1;
}
.summary-row:first-child {
  border-top: none;
}
.summary-cell {
  flex: 1;
  padding: 16px;
  border-right: 1px solid #cbd5e1;
  color: #334155;
}
.summary-cell:last-child {
  border-right: none;
}
.summary-header .summary-cell {
  background-color: #123a6b;
  color: white;
  font-weight: 600;
}

/* Approve button */
.approve-button {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
  padding: 14px 28px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}
.approve-button:hover {
  background: linear-gradient(135deg, #1e3a8a, #1e40af);
  transform: scale(1.02);
}

/* .leave-management-chart-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 33px;
grid-row-gap: 0px;
} */


/* new css */
.carousel {
    background: white;
    padding: 32px 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px;
}
.custom-section-title.edit-more {
    font-size: 20px !important;
    font-weight: 700;
    color: #0f172a;
    border-bottom: 1px solid #cbd5e1;
    padding-bottom: 18px;
    margin-bottom: 16px;
}

.space-close{
  margin: 0 !important;
}
.carousel-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 0px;
}

.carousel {
    margin-top: 33px;
}

.leave-box p strong {
    display: block;
    font-size: 15px;
    text-align: center;
}

.leave-box {
    text-align: center;
    padding: 20px 5px;
    border-radius: 10px;
    background: #ffffff;
    flex-shrink: 0;
    background-color: #f5faff;
    border: 1px solid #8080801f;
    margin-top: 5px;
}
.chart-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 15px auto 10px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 28px;
}

.total-chart-value {
    display: flex;
    justify-content: center;
    width: 100% ;
    gap: 12px;
    margin-bottom: 7px;
    margin-top: 20px !important;
}

.total-chart-value p {

    color: #767676;
}
.total-chart-value span {
    width: 14px;
    height: 14px;
    background: #007DFF;
    display: inline-block;
    border-radius: 50%;
}
.total-chart-value p {
    display: flex;
    align-items: center;
    gap: 5px !important;
    margin-top: 5px;
    font-size: 15px;
    color: #545454;
}


    .center-label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    span.dark-blue {
    background: #003371 !important;
}
.center-label {
    background: #007dff2e;
    padding: 6px 8px;
    color: #007dff;
    font-size: 11px;
    letter-spacing: 1px;
    border-radius: 15px;
    font-weight: 600;
}



/*  */

 .table {
      border-collapse: separate;
      border-spacing: 0 8px;
    }
  
    .table td, .table th {
      vertical-align: middle;
      border-top: none;
    }

.table thead th {
    background-color: #C9E6FF !important;
    color: #0f172a;
    font-weight: 600;
    border: none;
    font-size: 14px;
}
    .view-icon {
      cursor: pointer;
      font-size: 1.2rem;
      color: #0d6efd;
    }
.rounded-container {
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    background: white;
    margin: 45px 20px;
}
.rounded-container h4 {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 15px !important;
}
    .table-responsive {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .table-responsive::-webkit-scrollbar {
      width: 6px;
        height: 4px !important; 

    }
    
    .table-responsive::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 50px;
    }
    .height-management-item {
    height: 400px;
    overflow: auto;
}
   

    table.table.align-middle td {
    font-size: 14px;
    font-weight: 500;
    color: #454545;
}

.carousel-gap {
    padding: 20px 25px !important;
}

.text-spacing-remove {
    font-size: 21px !important;
    font-weight: 700;
    color: #0f172a;
    border-bottom: 1px solid #cbd5e1;
    padding-bottom: 15px !important;
    margin-bottom: 14px !important;
}

.popup-chart {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 10px auto 0px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.valuless {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 12px;
    margin-bottom: 0px;
    margin-top: 8px !important;
}

.carousel.carousel-gap {
    margin-top: 22px;
}
#leaveModalLabel {
    font-weight: 700;
    font-size: 24px;
}

.bottom-side-padding {
    padding: 10px;
    padding-bottom: 0;
    margin-top: 0;
}

.bill-management {
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 20px;
}
.flex-end-text {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}
.flex-end-text h4 {
    font-size: 15px;
    color: #4B97D9;
}
.flex-end-text h4 span {
    background: #4b97d92b;
    padding: 10px 15px;
    border-radius: 20px;
    font-weight: 400;
}
.table-responsive td span {
    background: #4c8edf4a;
    padding-top: 6px !important;
    font-weight: 600;
    font-size: 12px; padding: 4px;
    width: 100px;
    display: inline-block;
    border-radius: 26px;
    color: #4c8edf;
    border:none
}

span.color-one {
    background: #f77f0029 !important;
    color: #F77F00 !important;
   
}

span.color-two {
    background: #d8315b42 !important;
    color: #D8315B !important;
}

span.color-four {
    background: #80008033 !important;
    color: purple !important;
}

table.table.align-middle td {
    text-transform: capitalize;
}
.modal-fullscreen {
    width: 90vw !important;
    max-width: none;
    height: 100%;
    margin: 0;
    left: 5%;
}

.right-form-form {
    width: 50%;
    background: white;
    padding: 20px 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
}
.absolute-change {
    position: absolute;
    font-size: 15px;
    font-weight: 600;
    color: #123A6B;
    margin-top: -16px;
}
img.payroll-images {
    height: 32px !important;
}
.position-change-for-absolute {
    width: 200px;
}
.bt-for-status {
    text-decoration: none;
    background: #244CC0;
    color: white;
    border-radius: 6px;
    padding: 2px;
    line-height: 20px;
     &:hover{
      background-color: #1d83de;
    }
}
p.position-change-for-absolute {
    width: 200px;
    position: absolute;
    right: 0;
    margin: 0;
    margin-top: -15px;
}

.border-section {

    padding: 18px !important;
    border-radius: 10px;
    padding-top: 7px !important;
    border: 1px solid #8080803b;
}


.leave-form-field p {
    margin-bottom: 0;
}
.leave-form-field {
    margin: 10px 0 !important;
}
.leave-form-field select, .leave-form-field input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #cdcdcd;
    border-radius: 6px;
    font-size: 14px;
    margin-top: 6px;
}
.leave-form-field.w-full.spacing {
margin-top: 0 !important;
}

.total-chart-value.space-none {
    margin: 0 !important;
}
.leave-box.pb-0 {
    padding-top: 12px;
}

button.view-more {
    background: #208AE7;
    padding: 4px 8px;
    border: 1px solid #208AE7;
    color: white;
    border-radius: 14px;
    padding-top: 5px;
    &:hover{
       background: #1672c1;
        border: 1px solid #1672c1;
    }
}
.leave-form-field.pt-5 {
    padding-top: 5px;
}
.flex-date {
    display: flex;
    gap: 18px;
}
.spacing {
    margin: 1px 0;
}
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--bs-modal-padding);
    background: #F3F3F5;
    padding: 26px !important;
}
.leave-form-field textarea {
    height: 100px;
    width: 100%;
     border: 1px solid #cdcdcd;
    border-radius: 6px;
}

.button-flex button {
    padding: 12px 44px;
    border: 1px solid;
    background: #007DFF;
    color: white;
    border-radius: 6px;
    &:hover{
      background: #003371;
     border: 1px solid;
    }
}

.dark-color{
    background:  #003371 !important;
    color: white;
    border-radius: 6px;
    &:hover{
      background: #007DFF !important;
     border: 1px solid;
    }
}

.total-chart-value p {
    font-size: 13px;
    font-weight: 500;
}
button.button {
    background: #123A6B;
    padding: 13px;
    color: white;
    border: 1px solid;
    border-radius: 6px;
    &:hover{
      background: #007DFF !important;
    }
}
button.button.alert-color {
    background: #a20000;
}

.leave-request-container {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
      overflow-x: auto;
      padding: 32px;
      margin-top: 50px;
    }

.leave-request-title {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 20px;
    background: #00337114;
    color: #003371;
    padding: 10px 14px;
    border-left: 6px solid #003371;
    border-radius: 6px;
}

    .leave-request-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 960px;
    }

    .leave-request-table th,
    .leave-request-table td {
      text-align: center;
      padding: 12px 10px;
      font-size: 14px;
    }

    span.leave-td {
    background: #a28df826 !important;
    width: 210px !important;
    color: #a28df8 !important;
}

.leave-form-field {
    margin: 14px 0 !important;
}

small.small {
    background: #f77f0029 !important;
    color: #F77F00 !important;
    display: inline-block;
    padding: 5px 25px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 22px;
}
    .leave-request-table thead th {
      background-color: #007acc;
      color: white;
    }

    th.left-radius {
    border-radius: 10px 0px 0px 10px;
}

   th.right-radius {
    border-radius: 0px 10px 10px 0px;
}

    .leave-request-table tbody td {
      background-color: #ffffff;
      border-bottom: 1px solid #e0e0e0;
    }

    .leave-request-table tbody tr:hover td {
      background-color: #f0f8ff;
    }

    .leave-status-badge {
      display: inline-block;
      padding: 4px 10px;
      font-size: 13px;
      border-radius: 20px;
      font-weight: 500;
    }

    .leave-status-hr {
      background-color: #e6ffe6;
      color: #2e7d32;
      border: 1px solid #b9f6ca;
    }

    .leave-status-approver {
      background-color: #fff3cd;
      color: #856404;
      border: 1px solid #ffeeba;
    }

    .gap_ {
    margin-top: 32px;
}

    @media (max-width: 768px) {
      .emplyee-info-bg-change > .info-row > .info-value {
    padding-left: 0 !important;
    margin-left: 0 !important; 
    border: 2px solid #80808052;
    margin-top: 0;
    padding: 9px !important;
}
.info-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-top: 0;
    border-bottom: 1px solid #cbd5e1;
    gap: 0px;
    flex-direction: column;
    gap: 14px;
    padding: 16px !important;
}
      .bt-for-status {
    font-size: 11px;
}

p.position-change-for-absolute {
    width: 160px !important;
    position: absolute;
    right: 0;
    margin: 0;
    margin-top: -15px;
}
      p.absolute-change {
    font-size: 13px;
  
    margin-top: -16px;
}
      .leave-request-table {
        font-size: 13px;
        min-width: 900px;
      }
      .leave-request-table th,
      .leave-request-table td {
        padding: 10px 8px;
      }
      .carousel-track {
    grid-template-columns: repeat(1, 1fr);
  
    grid-row-gap: 20px;
}
button.button {
    font-size: 11px;
    width: 100%
}
.leave-request-table tbody td {
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    width: 81px !important;
}

.leave-request-title {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 20px;
    background: #00337100 !important;
    color: #003371;
    padding: 1px 14px !important;
    border-left: 6px solid #003371;
    border-radius: 6px;
    width: 100%;
}

.right-form-form {
    width: 100% !important
}
    }


/*new leave management css */

  /* Category: Leave Summary */

 .leave-summary-container {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 26px;
    width: 100%;
}

    .right-side-chart-and-table-container {
    width: 50%;
}

    .leave-summary-header {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 22px;
      color: #2d2d2d;
      border-left: 5px solid #4e73df;
      padding-left: 12px;
      letter-spacing: 0.5px;
    }

    .leave-summary-table {
      width: 100%;
      border-collapse: collapse;
      border-radius: 14px;
      overflow: hidden;
    }

    .leave-summary-table thead {
      background: linear-gradient(135deg, #4e73df, #224abe);
      color: #fff;
    }

    .leave-summary-table thead th {
      padding:10px 15px;
      font-size: 15px;
      font-weight: 500;
      text-align: left;
      letter-spacing: 0.5px;
    }

    
    .leave-summary-table tbody tr {
      background: #ffffff;
      transition: background 0.3s ease;
    }

    .leave-summary-table tbody tr:nth-child(even) {
      background: #f3f5fa;
    }

    .leave-summary-table tbody tr:hover {
      background: #e9ecf7;
    }

  .leave-summary-table tbody td {
    padding: 8px 15px;
    font-size: 14px;
    color: #444;
    border-bottom: 1px solid #e4e7f2;
}

    .leave-summary-badge {
      display: inline-block;
      padding: 7px 12px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 10px;
      background: #eef1fb;
      color: #4e73df;
    }

    .leave-summary-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 6px;
    overflow: hidden;
}

/* Badge styles */
.leave-summary-badge {
  display: inline-block;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
}

.badge-earned {
  background: #eef1fb;
  color: #4e73df;
}

.badge-used {
    background: #ffe6ee;
    color: #ff3d7b;
}

.badge-balance {
    background: #a28df833;
    color: #6f4cff;
}

.flex___item{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 15px;
grid-row-gap: 0px;
margin: 10px 0;
}
.checked{

    background: #3acb8a33 !important;
    padding: 10px 15px;
    border-radius: 20px;
    font-weight: 400;

}
.checked a{
    color: #128b55 !important;

}
.bill-check {
    padding: 10px 15px;
    border-radius: 20px;
    font-weight: 400;
    color: #a56bff !important;
    background: #a56bff2b !important;
}
.bill-check a{
    color: #a56bff !important;
}

    /* Responsive Design */
    @media (max-width: 700px) {
.profile-content.profile-image {
    margin-top: 9px !important;
    margin-bottom: 20px !important;
}
      .rounded-container {

    margin: 0 !important;
}

      .flex___item{
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 6px;
margin: 10px 0;
}
      .background-change {
    background: white;
    padding: 15px;

}

.info-label {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    width: 100%;
}

.info-value {

    padding-left: 5px !important;
}

.custom-row {
    gap: 15px !important;
}

.row-customize {
    margin: 20px 10px !important;
}
.flex-date {
    flex-direction: column;
}

.right-side-chart-and-table-container {
    width: 100%;
    margin: 20px 0;
}
.leave-summary-table tbody tr:nth-child(even) {
    background: beige;
}

.leave-summary-table tr {
  
    border: 1px solid #80808057;
}

.modal-body {
    padding: 12px !important;
}
      .notifications {
    grid-template-columns: repeat(1, 1fr);

}
      .leave-summary-table thead {
        display: none; /* hide table head on mobile */
      }

      .leave-summary-table, 
      .leave-summary-table tbody, 
      .leave-summary-table tr, 
      .leave-summary-table td {
        display: block;
        width: 100%;
      }

      .leave-summary-table tr {
        margin-bottom: 20px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        padding: 15px;
      }

      .leave-summary-table td {
        text-align: right;
        padding: 10px;
        border: none;
        position: relative;
      }

      .leave-summary-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        font-weight: 600;
        color: #333;
        font-size: 14px;
        text-align: left;
      }

      .leave-summary-badge {
        margin-top: 4px;
      }
    }



















/*  */

/* profile page  */

.profile-layout-gap{
    margin-top: 0px;
}

.w-full{
  width: 100%;
}

.more-info-for-dashboard {
display: grid;
grid-template-columns: 1fr 0.9fr 0.5fr;
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 0px;
margin-top: 22px;

}

.width-customization {
    width: 98.5%;
}

/*  */


.progress-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.progress-title {
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 24px;
    padding-top: 9px;
    padding-bottom: 18px;
    border-bottom: 1px solid #cbd5e1;
}
.timeline {
    position: relative;
    margin-left: 20px;
    border-left: 2px solid #d2d2d2;
    padding-left: 20px;
    margin-bottom: 20px;
}
    .timeline-step {
      position: relative;
      margin-bottom: 24px;
      font-size: 14px;
      color: #333;
    }

    .timeline-step.completed.ongoing::before{
   background: #ffae3c;
    border: 2px solid #ffae3c;
          background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17l-3.88-3.88-1.41 1.41L9 19 20.29 7.71 18.88 6.29z"/></svg>');

    }

    .timeline-step.completed.completed-green::before{
      background:  #00d072;
    border: 2px solid  #00d072;
          background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17l-3.88-3.88-1.41 1.41L9 19 20.29 7.71 18.88 6.29z"/></svg>');

     
    }

    .timeline-step::before {
      content: "";
      position: absolute;
      left: -30px;
      top: 0;
      width: 16px;
      height: 16px;
      border: 2px solid #3ca4ff;
      background: white;
      border-radius: 50%;
    }

    .timeline-step.completed::before {
      background: #3ca4ff;
      background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17l-3.88-3.88-1.41 1.41L9 19 20.29 7.71 18.88 6.29z"/></svg>');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 12px 12px;
    }

    .status-section {
      border-top: 1px solid #cbd5e1;
      padding-top: 14px;
    }

    .status-section p {
      margin: 4px 0;
      font-size: 14px;
    }

    .status-section .label {
      font-weight: 500;
      color: #666;
    }

    .status-section .value {
      font-weight: 500;
    }

    .in-progress {
      color: #3ca4ff;
    }

    /*  */

    


    /* payroll css */

    .payroll-heading h3 {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    border-bottom: 1px solid #cbd5e1;
    padding-bottom: 10px
}

.payroll-heading img {
    height: 60px;
    margin-right: 9px;
    
}

.payroll-container {
    background: white;
    padding: 26px;
    border-radius: 18px;
    padding-top: 13px;
}

.payroll-grid-container{
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 0px;
}

.common-card {
    background: #80808069;
    padding: 13px;
    margin-top: 18px;
    display: flex;
    gap: 12px;
    padding-bottom: 23px;
    border-radius: 10px;
    transition: .3s ease-in-out;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
}
.common-card:hover {
   padding: 14px;

}

.common-card h4 {
    font-size: 17px;
    letter-spacing: 1px;
    margin-top: 10px;
}

.common-card img {
    width: 52px;
}
.add-color-1 h4 {
    color: #1B70BB;
}

.add-color-1 {
    background: #4b97d90d;
    border: 2px solid #C9E6FF;
}


.add-color-2 h4 {
    color: #ff8560;
}

.add-color-2 {
    background: #ffa48921;
    border: 2px solid #FFA589;
}
.add-color-3 h4 {
    color: #ffa44a;
}

.add-color-3 {
    background: #fedebf24;
    border: 2px solid #FEDFBF;
}


.add-color-4 h4 {
    color: #0576D9;
}

.add-color-4 {
    background: #d7e9ff7a;
    border: 2px solid #4B97D9;
}
.add-color-5 {
    background: #ffbbbc2b;
    border: 2px solid #ff4444be;
}
.add-color-5 h4 {
    color: #cb3334;}



/* income Tax Deduction */

 .cards-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;    
      margin-top: 30px;
      
    }
.salary-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 12px 10px;
    text-align: center;
    font-weight: 600;
    position: relative;
    color: #123A6B;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: all 0.4s ease;
    min-height: 130px;
    border: 1px solid #00000024;
}

.salary-and-deduction-card-container h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    border-bottom: 1px solid #cbd5e1;
    padding-bottom: 20px;
    width: 99%;
    margin: 0 auto;
}


    .salary-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 28px rgba(0,0,0,0.15);
    }

    .salary-card h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      z-index: 1;
      position: relative;
    }

    .salary-card p {
      margin: 10px 0 0;
      font-size: 16px;
      font-weight: 500;
      color: #1B70BB;
      z-index: 1;
      position: relative;
    }

    .salary-card .month-icon {
      font-size: 20px;
      margin-bottom: 6px;
      color: #1B70BB;
    }

    /* Individual Colors */
    .july { border-top: 4px solid #123A6B; }
    .august { border-top: 4px solid #1B70BB; }
    .september { border-top: 4px solid #16A085; }
    .october { border-top: 4px solid #E67E22; }
    .november { border-top: 4px solid #9B59B6; }
    .december { border-top: 4px solid #2C3E50; }
    .january { border-top: 4px solid #2980B9; }
    .february { border-top: 4px solid #C0392B; }
    .march { border-top: 4px solid #27AE60; }
    .april { border-top: 4px solid #F39C12; }
    .may { border-top: 4px solid #8E44AD; }
    .june { border-top: 4px solid #34495E; }

.leave-form-field.w-75 {
    width: 88%;
}

.one-input-flex {
    display: flex;
    align-items: center;
    gap: 10px;
}

button.dark-color.top-spacing {
    margin-top: 30px;
    padding: 17px 47px;
    width: 100%;
}

.salary-card::after {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    background: rgb(27 112 187 / 27%);
    border-radius: 50%;
    z-index: 0;
}

.salary-and-deduction-card-container {
    background: white;
    padding: 27px;
    border-radius: 10px;
    margin: 28px 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}


/* tax slip css */


 .tax-container {
 
      background: white;
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      margin-top: 30px;
    }


    td.zero {
    color: #a0aec0;
    font-weight: 500;
    text-align: center;
}
    .tax-container table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      color: #2d3748;
    }
    

    .tax-container thead tr {
      background: #1770D1;
      color: #fff;
    }

    .tax-container th, .tax-container td {
      padding: 18px 20px;
      font-size: 15px;
    }

    .tax-container th:first-child,
    .tax-container td:first-child {
      text-align: left;
      padding-left: 30px;
    }

    .tax-container tbody tr {
      background-color: #f9fbfd;
      transition: all 0.2s ease;
    }

     .tax-container tbody tr:nth-child(even) {
      background-color: #f1f4f9;
    }

   .tax-container tbody tr:hover {
      background-color: #dbe7f3;
    }

    .tax-container tfoot {
      background: #0c5fb1;
      color: white;
      font-weight: 600;
    }

    td.zero {
      color: #a0aec0;
      font-weight: 500;
    }

    .tax-container th:first-child {
      border-top-left-radius: 20px;
    }

    .tax-container th:last-child {
      border-top-right-radius: 20px;
    }

    .tax-container tfoot td:first-child {
      border-bottom-left-radius: 20px;
    }

   .tax-container tfoot td:last-child {
      border-bottom-right-radius: 20px;
    }


    /* more design */


    .tax-slip-second-table-container {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(8px);
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      margin-top: 30px;
    }

    .modern-table {
      width: 100%;
      border-collapse: collapse;
    }

    .header-cell {
      background: #4C35AE;
      color: white;
      text-align: center;
      padding: 14px;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    .cell {
      text-align: center;
      padding: 12px 14px;
      background-color: #ffffff;
      color: #333;
      font-size: 14px;
      border-bottom: 1px solid #e0e0e0;
      transition: background-color 0.3s;
    }

    .cell.bold {
      font-weight: 700;
      color: #4C35AE;
    }

    .modern-table tbody tr:hover .cell {
      background-color: #f1f6fb;
    }


    /* tax-summery container */

     .tax-summary-container {
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      padding: 30px;
      padding-top: 15px !important;
      margin-top: 30px;
    }

  .section-title {
    font-size: 16px;
    font-weight: 700;
    color: #004e92;
    border-bottom: 2px solid #cecece6d;
    padding-bottom: 15px;
    margin-top: 15px;
    margin-bottom: 8px;
}

    .tax-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 16px;
    }

    .tax-table td {
      padding: 14px 12px;
      border-bottom: 1px solid #eaeaea;
      vertical-align: middle;
    }

    .tax-table td.label {
      font-weight: 500;
      color: #333;
      width: 75%;
      font-size: 15px;
    }

.tax-table td.value {
    font-weight: 700;
    text-align: right;
    color: #0a58ca;
    width: 25%;
    font-size: 15px;
}

    .sub-label {
      padding-left: 24px;
      color: #555;
      font-weight: 400;
    }

    .empty-row td {
      border: none;
      padding: 10px 0;
    }

    @media (max-width: 768px) {
  .tax-summary-container,
  .tax-slip-second-table-container {
    padding: 20px;
    width: 95%;
    box-sizing: border-box;
  }

  .modern-table,
  .tax-table {
    font-size: 13px;
  }

  .modern-table .header-cell,
  .modern-table .cell,
  .tax-table td {
    padding: 10px 8px;
  }

  .modern-table .header-cell {
    font-size: 14px;
  }

  .tax-table td.label,
  .tax-table td.sub-label {
    font-size: 13px;
  }

  .tax-table td.value {
    font-size: 13px;
  }
}


/* login css */

.login-container {
display: grid;
grid-template-columns: 1.2fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.login-bg img {
    height: 100vh;
    object-position: right;
    width: 100%;
    object-fit: contain;
}

.login-form {
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-form form {
    width: 600px;
    background: linear-gradient(45deg, #f8f8f86b, transparent),url(../image/Ve.png)no-repeat;
    background-size: contain;
    background-position: left;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 60px;
    border: 1px solid #80808046;
    margin-left: 145px;
    border-radius: 10px;
    padding-top: 75px;
    position: relative;
    padding-bottom: 75px;
}
.footer-item {
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    padding: 10px 0;
    border-top: 1px solid #8080803d;
}
img.proedge0logo {
    background: white;
    height: 65px !important;
    padding: 12px 0;
    border-radius: 31px;
    border: 2px solid #8080803d;
    margin-top: -66px;
    z-index: 99;
    position: relative;
}
.avatar__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    margin-top: -61px;
}



.avatar__img img {
    height: 120px;
}
.input-item p {
    font-size: 11px;
    margin-bottom: 6px;
    margin-top: 13px;
    text-transform: uppercase;
    font-weight: 600;
    color: #3a3a3a;
    letter-spacing: 0.5px;
}

.input-item input {
    width: 100%;
    padding: 10px;
    border: 1px solid #80808098;
    outline: none;
    border-radius: 5px;

}

.login-form button {
    width: 100%;
    background: #0a7bff;
    padding: 10px;
    border: 1px solid #0a7bff;
    color: white;
    margin-top: 20px;
    border-radius: 5px;
}

.login-form h4 {
    font-size: 20px;
    margin-bottom: 26px;
    font-weight: 600;
}

.login-container span {
    display: block;
    margin-top: 17px;
    font-size: 14px;
}
.login-container {
 
    height: 94vh;
}




/* all leave management */

.leave-container {
      background: #fff;
      padding: 25px;
      border-radius: 20px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    }

    /* Header */
    .leave-header {
      font-size: 1.6rem;
      font-weight: 600;
      color: #2d3e50;
      margin-bottom: 20px;
      border-left: 6px solid #4a90e2;
      padding-left: 12px;
    }

    /* Table */
    .leave-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 12px;
    }

    .leave-table thead {
      background: #4a90e2;
      color: white;
    }

    .leave-table th {
      padding: 14px 16px;
      text-align: left;
      font-weight: 500;
      font-size: 0.95rem;
    }

    .leave-table tbody tr {
      background: #fff;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
      transition: transform 0.2s ease;
    }

    .leave-table tbody tr:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    }

    .leave-table td {
      padding: 14px 16px;
      font-size: 0.9rem;
      border-top: 1px solid #f0f0f0;
    }

    .leave-table td:first-child,
    .leave-table th:first-child {
      border-radius: 12px 0 0 12px;
    }

    .leave-table td:last-child,
    .leave-table th:last-child {
      border-radius: 0 12px 12px 0;
    }

    /* Status Highlight */
    .earned { color: #28a745; font-weight: 600; }
    .used { color: #e67e22; font-weight: 600; }
    .balance { color: #4a90e2; font-weight: 600; }

    /* Responsive */
    @media (max-width: 992px) {
      .hr-management-card, .second-row-for-hr-management-card {
  
    grid-column-gap: 10px !important;
   
}
      .dashboard-grid {
   
    grid-template-columns: repeat(1, 1fr) !important;
}
      .attendance-correction-form-group {
    flex: 1 1 00px !important;
    margin-right: 20px;
    margin-bottom: 15px;
}
          .employee-dashboard-main-container {

      width: 100% !important;
      
    }
      .employee-dashboard-grid-layout-body {
        grid-template-columns: repeat(1, 1fr) !important;
}
      .leave-table thead { display: none; }
      .leave-table, .leave-table tbody, .leave-table tr, .leave-table td {
        display: block;
        width: 100%;
      }
      .leave-table tr { margin-bottom: 15px; }
      .leave-table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
      }
      .leave-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 16px;
        width: 45%;
        font-weight: 600;
        text-align: left;
        color: #555;
      }
    }

    #lottie-container {
      width: 80%;   /* set your preferred size */
      height: 100%;
      margin: auto;
    }


    /* dashboard main page css change */
    .dashboard-grid.x{
    grid-template-columns: 0.4fr 1fr;
    grid-column-gap: 20px;
}
.dashboard-grid {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    grid-column-gap: 20px;
}
.hr-image.hr-image-customize img {
    width: 80px;
}

.card-first-part.top-part {
    padding-top: 38px;
}

.card-first-part.top-part h3 {
    font-size: 20px;
}

/* dashboard css */

 .employee-selection-container {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.employee-selection-header {
    background: linear-gradient(135deg, #4a6cf7, #6d9dfc);
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    font-size: 18px;
    margin-bottom: 15px;
}
.employee-search-input {
  width: 95%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.employee-id-badge {
  background: #4a6cf7 !important;
  color: #fff !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  font-size: 13px ;
  font-weight: 600;
  text-align: center;
  width: auto !important;
}
.employee-dashboard-link {
  background: linear-gradient(135deg, #4a6cf7, #6d9dfc);
  color: #fff;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
}
.employee-selection-container table {
  width: 100%;
  border-collapse: collapse;
}
.employee-selection-container th, .employee-selection-container td {
    padding: 12px 0;
    border-bottom: 1px solid #e5e9f2;
    font-size: 14px;
    text-align: justify;
}
.employee-selection-container tr:hover {
  background: #f3f6fb;
}


/* dashboard profile css */

    .employee-dashboard-main-container {
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
      overflow: hidden;
      width: 70%;
      margin: 0 auto;
    }

    .employee-dashboard-top-header {
      padding: 24px 30px;
      background: #128df9;
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-align: center;
    }

    .employee-dashboard-grid-layout-body {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 30px;
      padding: 30px;
      align-items: start;
    }

    /* Profile Card */
    .employee-dashboard-profile-card-wrapper {
      background: linear-gradient(145deg, #f9f9ff, #eef0ff);
      border-radius: 14px;
      padding: 20px;
      text-align: center;
      box-shadow: inset 2px 2px 6px rgba(0,0,0,0.05),
                  inset -2px -2px 6px rgba(255,255,255,0.8);
    }

    

.employee-dashboard-profile-image-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #ccd8ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    margin: 0 auto 15px;
}

    .employee-dashboard-profile-fullname-text {
      font-size: 16px;
      font-weight: 600;
      margin: 8px 0;
    }

    .employee-dashboard-profile-department-text {
      font-size: 14px;
      color: #555;
    }

    /* Employee Info */
.employee-dashboard-detailed-info-container {
    background: #fafbff;
    border-radius: 14px;
    padding: 20px 25px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
    border: 1px solid #80808028;
    padding-bottom: 0 !important;
}

.employee-dashboard-detailed-info-container h3 {
    margin-bottom: 11px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px dashed #80808028;;
    padding-bottom: 16px;
}


    .employee-dashboard-detailed-info-container p {
      font-size: 14.5px;
      margin: 10px 0;
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px dashed #ddd;
    }

    .employee-dashboard-detailed-info-container p:last-child {
      border-bottom: none;
    }

    .employee-dashboard-detailed-info-container span {
      font-weight: 600;
      color: #222;
    }

    .futuristic-employee-multiline-paragraph-block span {
    font-weight: 600;
    color: #1976d2;
}

    /* Footer Tiles */
    .employee-dashboard-footer-grid-section {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 20px;
      padding: 25px;
      background: #f9faff;
      border-top: 1px solid #eee;
    }

    .employee-dashboard-footer-single-tile {
      background: #fff;
      border-radius: 14px;
      padding: 22px 15px;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: #333;
      text-decoration: none;
      box-shadow: 0 6px 18px rgba(0,0,0,0.08);
      transition: all 0.3s ease;
    }

    .employee-dashboard-footer-single-tile .employee-dashboard-tile-emoji-icon {
      font-size: 26px;
      display: block;
      margin-bottom: 8px;
    }

    .employee-dashboard-footer-single-tile:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(15, 127, 255, 0.3);
      background: #007DFF;
      color: #fff;
    }

    .employee-dashboard-footer-single-tile:hover .employee-dashboard-tile-emoji-icon {
      transform: scale(1.2);
    }


    .employee-dashboard-profile-image-circle img {
    height: 100px;
}

/* personal page  */


.futuristic-employee-card-container-wrapper {
      display: flex;
      justify-content: center;
    }

    .futuristic-employee-card-core-box {
      width: 100%;
      background: #ffffff;
      border-radius: 18px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
      padding: 35px 40px;
    }
.futuristic-employee-card-section-heading {
    font-size: 20px;
    font-weight: 600;
    color: #373737;
    border-left: 4px solid #1976d2;
    padding-left: 12px;
    margin-bottom: 25px;
}



    .futuristic-employee-info-multigrid-layout {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px 30px;
      margin-bottom: 35px;
    }

.futuristic-employee-info-item-container {
    background: #f5f8ff;
    padding: 12px 16px;
    border-left: 4px solid #1976d2;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
    border: 1px solid #d18dff30;
}



 .futuristic-employee-info-item-label-text {
    font-size: 15px;
    font-weight: 600;
    color: #4a4a4a;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}


    
    .futuristic-employee-info-item-value-text {
      font-size: 14.5px;
      font-weight: 500;
      color: #222;
    }

    .futuristic-employee-multiline-paragraph-block {
      font-size: 14.5px;
      background: #f8f9fa;
      padding: 16px 18px;
      border-left: 4px solid #1976d2 !important;
      border-radius: 10px;
      margin-bottom: 25px;
      line-height: 1.7;
        border: 1px solid #1976d21e;

    }

    .futuristic-employee-multiline-paragraph-block p {
      margin-bottom: 8px;
    }

.custom-info-group.emplyee-info-bg-change.span-five-hundred span {
    background: linear-gradient(45deg, #00000005, #0000001f);
    width: 500px;
    padding: 11px;
}


/* organogram page css */

    .modern-organogram-layout-wrapper {
      background: #ffffff;
      border-radius: 22px;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
      padding: 45px 50px;
      position: relative;
    }

    .modern-organogram-header-title-block {
      font-size: 15px;
      font-weight: 700;
      color: #ffffff;
      background: linear-gradient(90deg, #0d47a1, #1976d2);
      padding: 18px 26px;
      border-radius: 14px;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 40px;
    }

    .modern-organogram-avatar-box {
      text-align: center;
      margin-bottom: 30px;
    }
    .modern-organogram-avatar-box h3 {
      font-size: 15px;
      margin-top: 14px;
      color: #0d47a1;
      font-weight: 700;
    }

    .modern-organogram-avatar-box h3 small {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: #546e7a;
      margin-top: 3px;
    }

.modern-organogram-connection-line {
    height: 24px;
    width: 4px;
    background: #2196f3;
    margin: 0 auto 35px;
    border-radius: 14px;
}
    .modern-organogram-hierarchy-visual {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 30px;
    }

    .modern-organogram-role-card h4 {
      font-size: 14.5px;
      margin-bottom: 10px;
      color: #0d47a1;
      font-weight: 700;
    }

    .modern-organogram-role-card p {
      font-size: 14px;
      color: #333;
      margin: 6px 0;
    }



    .modern-organogram-role-card {
    flex: 1 1 30%;
    background: #f3faff;
    border-left: 4px solid #2196F4 !important;
    padding: 24px;
    border-radius: 14px;
    min-width: 250px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.03);
    border: 1px solid #1b70bb28;
}






.modern-organogram-avatar-box img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #845aff82;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}


/* leave page css */

 .full-width-page-wrapper-container {
      background: #ffffff;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    }

    .leave-summary-main-header-box {
      background: #123A6B;
      color: #fff;
      padding: 20px;
      border-radius: 10px;
      text-align: center;
      margin-bottom: 25px;
    }

   .leave-summary-main-header-box h2 {
    margin: 0;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 1px;
}

    .employee-information-flex-section {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 30px;
    }

    .individual-employee-information-box {
      flex: 1;
      min-width: 200px;
      background: #e9eef7;
      padding: 15px;
      border-radius: 8px;
    }

    .individual-employee-information-box strong {
      display: block;
      margin-bottom: 6px;
      font-weight: 600;
      color: #1a2d5a;
    }

    

.table-title-heading-section-text {
    font-weight: 600;
    margin: 25px 0 10px;
    color: #2c3e50;
    font-size: 20px;
    margin-bottom: 23px;
}

    .modern-clean-data-table-style {
      width: 100%;
      border-collapse: collapse;
      border-radius: 8px;
      overflow: hidden;
      background: #ffffff;
      margin-bottom: 30px;
    }

 .modern-clean-data-table-style thead {
    background: #1b70bb;
    color: #fff;
}

    .modern-clean-data-table-style thead th {
      padding: 12px;
      font-weight: 600;
      text-align: left;
    }

    .modern-clean-data-table-style tbody tr:nth-child(even) {
      border-top: 1px solid #bbbbbb40;
      border-bottom: 1px solid #bbbbbb40;

    }

      .modern-clean-data-table-style tbody tr:nth-last-child(odd) {
      border-top: 1px solid #bbbbbb40;
      border-bottom: 1px solid #bbbbbb40;

    }

    .modern-clean-data-table-style td {
    padding: 10px;
    font-size: 13px;
    color:#767676
}

    .leave-type-label-with-background {
      background: #3498db !important;
      color: #fff !important;
      padding: 6px 12px !important;
      border-radius: 20px !important;
      display: inline-block !important;
      font-weight: 500 !important;
      font-size: 14px !important;
      width: auto !important;
    }

    .used-leave-days-highlight-tag {
      background-color: #fff2e6 !important;
      padding: 4px 10px !important;
      border-radius: 20px !important;
      font-weight: 600 !important;
      color: #b35900 !important;
      display: inline-block !important;
      font-size: 12px !important;
      width: auto !important;
    }

    .pending-request-warning-message-box {
      background: #ffe8e5;
      padding: 15px;
      border-left: 4px solid #e74c3c;
      border-radius: 6px;
      margin-bottom: 20px;
      font-weight: 500;
      color: #c0392b;
    }

/*  */


/* dashboard attendence page */
.btn-inside-padding{

    margin-top: 38px !important;
    padding: 15px 47px !important;
    width: 100%;

}

.attendance-records-container-wrapper {
      max-width: 100%;
      overflow-x: auto;
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(0,0,0,0.08);
      background: white;
      margin-top: 30px;
    }

    .attendance-records-beautiful-table {
      border-collapse: collapse;
      width: 100%;
      min-width: 1000px;
    }

    .attendance-records-beautiful-table thead {
      background: #1B70BB;
      color: white;
    }

    .attendance-records-beautiful-table thead th {
      padding: 14px;
      text-align: left;
      font-weight: 600;
      font-size: 15px;
      white-space: nowrap;
    }

    .attendance-records-beautiful-table tbody td {
      padding: 12px;
      border-top: 1px solid #e1e7f0;
      font-size: 14px;
    }

    .attendance-records-beautiful-table tbody tr:nth-child(even) {
      background: #f7f9fc;
    }

    .attendance-records-beautiful-table tbody tr:hover {
      background: #edf2fb;
    }

    .attendance-status-badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 16px;
      background: #e8f0fe;
      color: #2b65d9;
      font-size: 13px;
      font-weight: 500;
    }

    .geo-location-small-badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 16px;
      background: #d1f4e0;
      color: #1e8144;
      font-size: 13px;
      font-weight: 500;
    }

    /* @media (max-width: 600px) {
      .attendance-records-beautiful-table thead {
        display: none;
      }
      .attendance-records-beautiful-table, 
      .attendance-records-beautiful-table tbody, 
      .attendance-records-beautiful-table tr, 
      .attendance-records-beautiful-table td {
        display: block;
        width: 100%;
      }
      .attendance-records-beautiful-table tr {
        margin-bottom: 15px;
        border-bottom: 2px solid #ccc;
      }
      .attendance-records-beautiful-table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
      }
      .attendance-records-beautiful-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        width: 45%;
        padding-right: 10px;
        font-weight: bold;
        text-align: left;
      }
    } */
/*/  */


/*  */






    @media (max-width: 990px) {
      .login-form form {
    width: 100% !important;
    padding-top: 75px !important;
}
      .login-bg {
    display: none;
}
          .dashboard-grid.x{
    grid-template-columns: 1fr !important;
   
}
      .futuristic-employee-card-core-box {
        padding: 25px 20px;
      }
      .responsive-horizontal-scroll-wrapper {
  width: 100% !important;
 
}





.modern-clean-data-table-style {
  width: 100% !important;
  min-width: 700px !important;
  border-collapse: collapse;
   overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.employee-selection-container table {
    width: 1200px;
    border-collapse: collapse;
}


    }



    /* attendence main page css */

    .work-portal-dashboard-main-wrapper {
      padding: 40px;
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05);
      padding-top: 25px;
    }

  .work-portal-dashboard-header-logo {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 38px;
    color: #2b2b2b;
    border-bottom: 1px solid #80808054;
    padding-bottom: 24px;
}

    .work-portal-dashboard-card-section {
      display: flex;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
    }

.work-portal-dashboard-single-icon-card {
    background: #edf1ff;
    border-radius: 20px;
    width: 240px;
    height:160px;
    text-align: center;
    padding: 20px 15px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #8080804a;
}
    .work-portal-dashboard-single-icon-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
    }

    .work-portal-dashboard-card-emoji-icon {
      font-size: 50px;
      margin-bottom: 18px;
    }

    .work-portal-dashboard-card-text-title {
      color: #2e2e2e;
      font-weight: 600;
      font-size: 17px;
    }

    

    @media (max-width: 600px) {
      .work-portal-dashboard-single-icon-card {
        width: 100%;
      }
    }

    

    /* modern card page */

  .wrapper-container-timecard-section {
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    overflow: hidden;
    padding: 30px 30px !important;
    margin-top: 30px;
}

    .title-header-timecard-bar {
      background-color: #2c3e50;
      color: #fff;
      padding: 20px;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
    }

    .employee-section-info-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 20px;
      row-gap: 15px;
    }

    .employee-single-detail-box {
      width: 48%;
      font-size: 15px;
      line-height: 1.6;
    }

    .employee-single-detail-box span {
      font-weight: bold;
      color: #555;
    }

  .timecard-scrollable-table-wrapper {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #00000026;
}

    .responsive-modern-timecard-table {
      width: 100%;
      border-collapse: collapse;
    }

    .responsive-modern-timecard-table thead {
      background-color: #1e3a8a;
      color: #fff;
      font-weight: 600;
    }

    .responsive-modern-timecard-table th,
    .responsive-modern-timecard-table td {
      padding: 12px 15px;
      text-align: center;
      font-size: 13.5px;
      border: none;
    }

    .responsive-modern-timecard-table tbody tr {
      border-bottom: 1px solid #d6d9e0;
    }

    

   

    .footer-status-summary-boxes {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      padding: 20px;
      font-size: 14px;
    }

    .info-indicator-single-status-box {
      background-color: #f0f4f8;
      padding: 10px 15px;
      border-radius: 8px;
      font-weight: 500;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .info-indicator-single-status-box span {
      font-weight: bold;
      color: #1e3a8a;
    }

.legend-description-badge-bar {
    font-size: 13px;
    background-color: #1b70bb;
    padding: 12px 20px;
    border-radius: 0 0 12px 12px;
    color: #444;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
    .each-legend-badge-item {
      background-color: #dbeafe;
      padding: 5px 10px;
      border-radius: 8px;
      font-size: 13px;
      display: inline-block;
      color: #1e3a8a;
      font-weight: 600;
    }

    @media (max-width: 768px) {
      .employee-single-detail-box {
        width: 100%;
      }

      .info-indicator-single-status-box {

    width: 115px !important;
}
    }


    /* Attendance Correction Request */

 .attendance-correction-main-container {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
      padding: 30px;
    }
 .attendance-correction-section-heading {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 14px;
}
    .attendance-correction-form-row {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }
    .attendance-correction-form-group {
      flex: 1 1 300px;
      margin-right: 20px;
      margin-bottom: 15px;
    }
       .attendance-correction-form-group  label {
      display: block;
      margin-bottom: 6px;
      font-size: 14px;
      font-weight: 500;
    }
       .attendance-correction-form-group input[type="date"],
       .attendance-correction-form-group input[type="time"],
       .attendance-correction-form-group textarea,
       .attendance-correction-form-group select {
      width: 100%;
      padding: 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-family: inherit;
      font-size: 14px;
      margin-top: 10px;
    }
    .attendance-correction-reason-options-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 10px;
      margin-bottom: 20px;
    }
.attendance-correction-reason-option-box {
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 18px;
    border: 1px solid #8080804f;
    margin-top: 5px;
    cursor: pointer;
}

.attendance-correction-reason-option-box:hover{
  background: #007bff1d;
}
    .attendance-correction-reason-option-box input {
      margin-right: 8px;
    }
    .attendance-correction-submit-button {
      background: #3498db;
      color: white;
      border: none;
      padding: 10px 20px;
      font-size: 15px;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    .attendance-correction-submit-button:hover {
      background: #2980b9;
    }
    .attendance-correction-table-wrapper {
      margin-top: 30px;
      overflow-x: auto;
    }
       .attendance-correction-form-group  table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      font-size: 14px;
    }
       .attendance-correction-form-group  thead {
      background: #3498db;
      color: white;
    }
      .attendance-correction-form-group th,
      .attendance-correction-form-group td {
      padding: 10px;
      text-align: left;
      border-bottom: 1px solid #ddd;
      white-space: nowrap;
    }
    /* tbody tr:hover {
      background: #f1f1f1;
    } */


    .attendance-correction-table-wrapper {
  margin-top: 30px;
  overflow-x: auto;
}

.attendance-correction-section-heading {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 5px;
}

 .attendance-correction-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
}

 .attendance-correction-table-wrapper thead {
  background: #3498db;
  color: white;
}

 .attendance-correction-table-wrapper th,
 .attendance-correction-table-wrapper td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
}

 .attendance-correction-table-wrapper tbody tr:hover {
  background: #f1f1f1;
}

.badgex {
  display: inline-block;
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 20px;
  font-weight: 500;
  border: 1px solid transparent;
}

/* Correction Type Badges */
.badge-correction-type-out {
  background-color: #e8f4fd;
  color: #007acc;
  border-color: #cce4f7;
}

.badge-correction-type-in {
  background-color: #e9fbe5;
  color: #2d7d36;
  border-color: #c4e7b9;
}

/* Status Badges */
.badge-status-pending-approval {
  background-color: #fff5e5;
  color: #c57f17;
  border-color: #ffe0b3;
}

.badge-status-approved-successfully {
  background-color: #e7f9f0;
  color: #1c8f61;
  border-color: #bdf0d9;
}

.badge-status-rejected-by-admin {
  background-color: #fdecea;
  color: #c0392b;
  border-color: #f5c6c3;
}


    @media(max-width:600px) {
      .attendance-correction-form-row {
        flex-direction: column;
      }
      .attendance-correction-form-group {
        margin-right: 0;
      }
    }


    /* pf membership css */
    .epfpage-shellcontainer-ux2025 {
  width:100%;
  max-width:1100px;
  margin: 0 auto;
}

/* Breadcrumb row */
.epfpage-breadcrumbrow-ux2025 {
  background: transparent;
  padding:10px 12px;
  margin-bottom:18px;
  color:#64748b;
  border-radius:10px;
  display:flex;
  gap:8px;
  align-items:center;
  font-size:13.5px;
  user-select:none;
}
.epfpage-breadcrumblink-ux2025 {
  color:#64748b;
  text-decoration:none;
  opacity:0.95;
}
.epfpage-breadcrumbactive-ux2025 {
  color:#0b1220;
  font-weight:600;
}

/* Main CTA card */
.epfpage-ctacardwrap-ux2025 {
  background: rgba(255,255,255,0.88);
  border-radius: 20px; /* 14px + 6px */
  box-shadow: 0 12px 40px rgba(15,23,42,0.08);
  padding:22px;
  border:1px solid rgba(12,20,40,0.04);
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:20px;
  align-items:center;
  overflow:hidden;
  backdrop-filter: blur(6px) saturate(120%);
}

/* left column */
.epfpage-leftcontent-ux2025 {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  min-height:120px;
}

.epfpage-ctawrapper-ux2025 {
  width:100%;
  display:flex;
  justify-content:center;
}

.epfpage-cta-button-ux2025 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(90deg,#003574, #003574);
    color: white;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 14px 36px rgba(91,126,240,0.18);
    transform: translateZ(0);
    transition: transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .16s ease, filter .16s ease;
    font-size: 15px;
    width: 305px;
}
.epfpage-cta-button-ux2025:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 26px 60px rgba(91,126,240,0.26);
  filter:brightness(1.03);
}

.epfpage-ctawrapper-ux2025 h2 {
    line-height: 35px;
    color: #232323;
}

/* small CTA icon inside button */
.epfpage-ctaicon-ux2025 {
  display:inline-grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:8px;
  background: rgba(255,255,255,0.12);
  font-size:18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Right column */
.epfpage-rightillustration-ux2025 {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}
.epfpage-rightsvg-ux2025 {
  width:100%;
  max-width:340px;
  height:auto;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(245,249,255,0.95), rgba(240,245,255,0.85));
  padding:14px;
  box-shadow: 0 10px 28px rgba(12,20,40,0.05);
}

/* caption */
.epfpage-cardcaption-ux2025 {
  margin-top:12px;
  text-align:center;
  color:#64748b;
  font-size:13px;
}
.epfpage-ctawrapper-ux2025 {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 25px;
}
/* responsive */
@media (max-width:980px){
  .epfpage-ctacardwrap-ux2025 { grid-template-columns: 1fr; padding:18px; gap:12px; }
  .epfpage-rightillustration-ux2025 { order: -1; }
  .epfpage-leftcontent-ux2025 { padding:8px; }
}



/* pf member details page css */
.pfmembership-container-ux2025 {
    font-family: 'Varela Round', sans-serif;
    font-size: 15px;
    margin: 0px auto;
    background-color: #f9fbfd;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.1);
    color: #2a2a2a;
    line-height: 1.5;
    padding: 20px;
}

  .pfmembership-breadcrumbs-ux2025 {
    font-size: 13px;
    color: #6b7a8f;
    margin-bottom: 20px;
    user-select: none;
  }
  .pfmembership-breadcrumbs-ux2025 a {
    text-decoration: none;
    color: #6b7a8f;
    transition: color 0.2s ease;
  }
  .pfmembership-breadcrumbs-ux2025 a:hover {
    color: #3f51b5;
  }
  .pfmembership-breadcrumbs-separator-ux2025 {
    margin: 0 8px;
    user-select: none;
  }

  /* Form header section */
.pfmembership-headersection-ux2025 {
    background: #e9f0ff;
    border-radius: 12px;
    padding: 33px 20px;
    margin-bottom: 24px;
    box-shadow: inset 0 1px 4px rgb(68 105 255 / 0.15);
    text-align: center;
    font-weight: 600;
    color: #374151;
    border: 6px solid #4ca5f35c;
}
  .pfmembership-headersection-ux2025 p {
    margin: 6px 0;
    font-weight: 400;
    font-size: 14px;
    color: #555;
  }

  /* Main description text */
  .pfmembership-descriptiontext-ux2025 {
    margin-bottom: 28px;
    color: #444;
    font-weight: 400;
  }
  .pfmembership-descriptiontext-ux2025 strong {
    font-weight: 600;
  }

  /* Nomination form explanation */
.pfmembership-nominationintro-ux2025 {
    margin-bottom: 18px;
    font-style: italic;
    color: #555;
    font-size: 14px;
    border-left: 4px solid #3f51b5;
    background: #add8e675;
    padding: 16px;
}
.pfmembership-nominationinput-textarea-ux2025, .pfmembership-nominationinput-text-ux2025 {
    font-family: 'Varela Round', sans-serif;
    font-size: 15px;
    border-radius: 6px;
    border: 1.6px solid #ccd4f6 !important;
    padding: 9px 11px !important;
    width: 100%;
    box-sizing: border-box;
    color: #222;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    resize: vertical;
}

  /* Table wrapper for responsiveness */
.pfmembership-tablewrapper-ux2025 {
    overflow-x: auto;
    box-shadow: none;
    border-radius: 12px;
    background: white;
    border: 1px solid #80808036;
}
section.pfmembership-headersection-ux2025 strong {
    font-size: 20px;
}
.proedge-text img {
    width: 110px;
}
.proedge-text {
 
    padding: 14px 0;
}
.proedge-text img {
    width: 100px;
    border: 1.8px solid #77cfff;
    border-radius: 20px;
    padding: 3px;
}
.proedge-text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
  /* Table styles */
  .pfmembership-nominationtable-ux2025 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
  }

  /* Table header */
.pfmembership-nominationtable-ux2025 thead tr {
    background: #123A6B;
    color: white;
}
  .pfmembership-nominationtable-ux2025 th {
    padding: 14px 16px;
    font-weight: 700;
    text-align: center;
    border-right: 1px solid rgba(255 255 255 / 0.3);
    vertical-align: middle;
    white-space: nowrap;
  }
  .pfmembership-nominationtable-ux2025 th:last-child {
    border-right: none;
  }
  .pfmembership-nominationtable-ux2025 th span.bengali-text-ux2025 {
    display: block;
    font-weight: 600;
    margin-top: 6px;
    font-size: 13px;
    color: #d1dbff;
  }

  /* Table body rows */
  .pfmembership-nominationtable-ux2025 tbody tr {
    border-bottom: 1px solid #eee;
    transition: background-color 0.25s ease;
  }
  .pfmembership-nominationtable-ux2025 tbody tr:hover {
    background-color: #f3f7ff;
  }

  /* Table body cells */
  .pfmembership-nominationtable-ux2025 td {
    padding: 12px 14px;
    border-right: 1px solid #ddd;
    vertical-align: middle;
    text-align: center;
  }
  .pfmembership-nominationtable-ux2025 td:last-child {
    border-right: none;
  }

  /* Number column */
  .pfmembership-nominationtable-ux2025 td.pfmembership-rownumbercell-ux2025 {
    font-weight: 600;
    color: #5c74f5;
    user-select: none;
  }

  /* Input fields */
  .pfmembership-nominationinput-textarea-ux2025,
  .pfmembership-nominationinput-text-ux2025 {
    font-family: 'Varela Round', sans-serif;
    font-size: 15px;
    border-radius: 8px;
    border: 1.8px solid #ccd4f6;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
    color: #222;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    resize: vertical;
  }
  .pfmembership-nominationinput-textarea-ux2025 {
    min-height: 40px;
    max-height: 80px;
  }
  .pfmembership-nominationinput-text-ux2025 {
    height: 36px;
  }

  /* Date input wrapper */
  .pfmembership-nominationinput-datewrapper-ux2025 {
    position: relative;
  }
  .pfmembership-nominationinput-date-ux2025 {
    font-family: 'Varela Round', sans-serif;
    font-size: 15px;
    border-radius: 8px;
    border: 1.8px solid #ccd4f6;
    padding: 6px 10px;
    width: 100%;
    box-sizing: border-box;
    color: #222;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  /* Focus style */
  .pfmembership-nominationinput-textarea-ux2025:focus,
  .pfmembership-nominationinput-text-ux2025:focus,
  .pfmembership-nominationinput-date-ux2025:focus {
    outline: none;
    border-color: #3f51b5;
    box-shadow: 0 0 8px rgb(63 81 181 / 0.4);
  }

  /* Submit button */
 .pfmembership-submitbutton-ux2025 {
    margin-top: 28px;
    background: #299bff;
    color: white;
    font-weight: 600;
    padding: 12px 30px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    letter-spacing: 0.4px;
    box-shadow: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
    display: inline-block;
}
  .pfmembership-submitbutton-ux2025:hover {
    background: #1B70BB;
  }

  /* Responsive for smaller screens */
  @media (max-width: 720px) {
    .pfmembership-nominationtable-ux2025 {
      min-width: 600px;
      font-size: 13px;
    }
    .pfmembership-nominationtable-ux2025 thead tr {
      font-size: 12px;
    }
    .pfmembership-nominationinput-textarea-ux2025,
    .pfmembership-nominationinput-text-ux2025,
    .pfmembership-nominationinput-date-ux2025 {
      font-size: 14px;
    }
  }

  /* bill management */
   .bill-filter-section-container {
      background: #ffffff;
      border-radius: 14px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.06);
      padding: 20px;
    }

    .bill-filter-title-text {
      font-size: 23px;
      font-weight: bold;
      color: #2d2d2d;
      margin-bottom: 15px;
    }

    .bill-filter-flex-row {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      align-items: center;
    }

    .bill-filter-dropdown-select,
    .bill-filter-input-field {
      padding: 10px 14px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 14px;
      flex: 1;
      min-width: 160px;
      background-color: #fff;
      transition: all 0.3s ease;
    }

    .bill-filter-dropdown-select:focus,
    .bill-filter-input-field:focus {
      border-color: #4a90e2;
      box-shadow: 0 0 0 3px rgba(74,144,226,0.2);
      outline: none;
    }

    .bill-filter-button-next,
    .bill-filter-button-submit {
      padding: 10px 18px;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
      font-weight: bold;
      transition: background 0.3s ease;
    }

    .bill-filter-button-next {
      background-color: #004ca8;
      color: #fff;
    }

   .bill-filter-button-next:hover {
    background-color: #268eff;
}

    .bill-filter-button-submit {
      background-color:  #268eff;
      color: #fff;
    }

    .bill-filter-button-submit:hover {
      background-color:  #004ca8;
    }

    /* Table Styles */
    .modern-bill-table-container {
      margin-top: 25px;
      overflow-x: auto;
      background: #ffffff;
      border-radius: 14px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    }

    .modern-bill-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 900px;
    }

.modern-bill-table thead {
    background: #123A6B;
    color: #ffffff;
}
    .modern-bill-table thead th {
      padding: 12px 15px;
      font-size: 14px;
      font-weight: bold;
      text-align: left;
    }

.modern-bill-table tbody td {
    padding: 12px 15px;
    border-top: 1px solid #f0f0f0;
    color: #444;
    font-size: 13px;
    font-weight: 500;
}

    .modern-bill-table tbody tr:hover {
      background-color: #f9f9f9;
    }

    @media (max-width: 768px) {
      .bill-filter-flex-row {
        flex-direction: column;
        align-items: stretch;
      }
    }

    /* progration page css */
    .probationer-progress-title-text {
      font-size: 20px;
      font-weight: bold;
      color: #222;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .probationer-info-card-container {
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.06);
      padding: 25px;
      border: 1px solid #eee;
    }

    .probationer-info-grid-layout {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 15px;
      margin-bottom: 20px;
    }

.probationer-info-item-block {
    background-color: #f1f5ff52;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid;
    transition: all 0.3s ease;
    border-color: #dfdfdf;
}


    .probationer-info-label {
      font-weight: bold;
      color: #444;
      margin-bottom: 5px;
      display: block;
    }

    .probationer-info-value {
      color: #555;
    }

    .probationer-section-title {
      font-weight: bold;
      color: #2d2d2d;
      margin: 18px 0 8px 0;
      font-size: 15px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

.probationer-section-text {
    background: #f1f5ff52;
    border: 1px solid #dfdfdf;
    padding: 14px;
    border-radius: 12px;
    color: #555;
    line-height: 1.6;
    transition: background 0.3s ease;
    font-size: 14px;
}

    .probationer-section-text:hover {
      background-color: #f5f7ff;
    }
.probationer-status-banner {
    background: white;
    color: #313131;
    text-align: center;
    padding: 15px;
    font-weight: bold;
    border-radius: 12px;
    margin-top: 20px;
    font-size: 15px;
    border: 6px solid #007acc57;
    text-transform: uppercase;
    font-weight: 700;
}


    @media (max-width: 768px) {
      .probationer-info-grid-layout {
        grid-template-columns: 1fr;
      }
    }


    /* requitment */

    .modernjobform__container {
  background: transparent;
}

.modernjobform__breadcrumbs {
  color: #8e95a9;
  font-size: 14px;
  margin-bottom: 25px;
  letter-spacing: .3px;
  padding-left: 6px;
}
.modernjobform__breadcrumbs--active {
  color: #393e70;
  font-weight: 700;
}

.modernjobform__card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 22px 0 rgba(43, 59, 93, 0.11);
  margin-bottom: 35px;
  padding: 34px 32px 30px 32px;
}

.modernjobform__header {
  border-bottom: 1px solid #f1f2f9;
  margin-bottom: 25px;
  padding-bottom: 12px;
}
.modernjobform__title {
  font-size: 20px;
  font-weight: 700;
  color: #1a194d;
  letter-spacing: .2px;
}

.modernjobform__form {
  margin-top: 18px;
}

.modernjobform__form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 25px;
}

.modernjobform__form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.modernjobform__form-group--full {
  grid-column: 1 / -1;
}

.modernjobform__label {
  font-size: 15px;
  color: #44456b;
  font-weight: 500;
}

.modernjobform__input,
.modernjobform__select,
.modernjobform__textarea {
  padding: 10px 13px;
  border: 1.5px solid #eaecf3;
  border-radius: 7px;
  font-size: 15px;
  background: #fbfcff;
  color: #232639;
  transition: border 0.2s;
  outline: none;
  font-family: 'Varela Round', Arial, sans-serif;
}
.modernjobform__textarea {
  resize: vertical;
  min-height: 48px;
  line-height: 1.6;
}
.modernjobform__input:focus,
.modernjobform__select:focus,
.modernjobform__textarea:focus {
  border-color: #6c63ff;
}

.modernjobform__location-checkboxes {
  margin-top: 2px;
}
.modernjobform__checkbox-scrollbox {
  background: #fafbff;
  border: 1.5px solid #ececf2;
  border-radius: 7px;
  height: 128px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px 10px;
  padding: 12px 10px;
  box-shadow: 0 1.5px 5px rgba(76,99,177,0.06);
}
.modernjobform__checkbox-label {
  font-size: 14px;
  color: #38425c;
  font-family: 'Varela Round', Arial, sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.modernjobform__checkbox {
  accent-color: #6c63ff;
  width: 16px;
  height: 16px;
}

.modernjobform__submit-btn {
  margin-top: 27px;
  background:#007DFF;
  color: #fff;
  font-size: 16px;
  padding: 12px 32px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .2px;
  transition: background .22s, box-shadow .19s;
  box-shadow: 0 1px 6px 0 rgba(43, 59, 93, 0.13);
}
.modernjobform__submit-btn:hover {
  background: #007acc;
}

.modernjobform__table-section {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 20px rgba(43, 59, 93, 0.08);
  padding: 25px 20px 20px 20px;
}

.modernjobform__table-header {
    font-size: 20px;
    color: #1a194d;
    font-weight: 600;
    margin-bottom: 17px;
    letter-spacing: .12px;
    text-align: left;
    padding-bottom: 12px;
    border-bottom: 1px solid #80808033;
}
.modernjobform__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  background: #fff;
  font-family: 'Varela Round', Arial, sans-serif;
}
.modernjobform__table thead {
    background: #c8deff;
}
.modernjobform__table th, .modernjobform__table td {
    padding: 9px 10px;
    text-align: left;
    border-bottom: 1px solid #edf0f5;
    font-size: 14px;
}

.modernjobform__status-badge--new {
  display: inline-block;
  background: #cff9e5;
  color: #327d4c;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 12px;
}

.modernjobform__dropdown {
  position: relative;
  display: inline-block;
}
.modernjobform__dropdown-btn {
  background: #e9e7fc;
  color: #5c51ca;
  font-size: 14.5px;
  font-family: 'Varela Round', Arial, sans-serif;
  border: none;
  border-radius: 6px;
  padding: 6px 18px 6px 10px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 .5px 1.5px #b6b8df40;
  outline: none;
  position: relative;
  transition: background .16s, color .15s;
}
.modernjobform__dropdown-btn:hover,
.modernjobform__dropdown-btn:focus {
  background: #dbd7fa;
  color: #433abe;
}
.modernjobform__dropdown-content {
  display: none;
  position: absolute;
  background: #fff;
  box-shadow: 0 6px 25px 0 #5f56780e;
  border-radius: 7px;
  min-width: 120px;
  z-index: 1;
  right: 0;
  top: 103%;
  padding: 7px 0;
}
.modernjobform__dropdown:hover .modernjobform__dropdown-content,
.modernjobform__dropdown:focus-within .modernjobform__dropdown-content {
  display: block;
}
.modernjobform__dropdown-item {
  font-family: 'Varela Round', Arial, sans-serif;
  font-size: 14px;
  color: #53525a;
  padding: 8px 19px;
  text-decoration: none;
  display: block;
  border: none;
  background: none;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.modernjobform__dropdown-item:hover {
  background: #f7f9fe;
  color: #5c51ca;
}

@media (max-width: 820px) {
  .modernjobform__container { max-width: 99vw; }
  .modernjobform__card, .modernjobform__table-section { padding: 12px 2vw 15px 2vw; }
  .modernjobform__card { margin-bottom: 17px;}
  .modernjobform__table-header { font-size: 17px;}
  .modernjobform__title { font-size: 19px;}
  .modernjobform__form-grid {
    grid-template-columns: 1fr;
  }
  .modernjobform__submit-btn { width: 100%; }
  .modernjobform__checkbox-scrollbox {
    grid-template-columns: repeat(2, 1fr);
    height: 130px;
  }
}


/* file cabinet css */

.personalfilesection__container {
 
  padding: 0 12px;
}

.personalfilesection__breadcrumbs {
  font-size: 15px;
  color: #a0a7c1;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 3px;
  letter-spacing: .25px;
}

.personalfilesection__breadcrumbs-item--active {
  color: #224488;
  font-weight: 600;
}

.personalfilesection__card {
  background: #fff;
  border-radius: 17px;
  box-shadow: 0 2px 17px 0 rgba(43, 59, 93, 0.11);
  padding: 32px 30px 24px 30px;
  margin-bottom: 35px;
}

.personalfilesection__card-header {
  background: #224488;
  padding: 18px 22px;
  border-radius: 11px 11px 0 0;
  margin: -32px -30px 20px -30px;
  color: #fff;
  font-size: 20px;
  font-family: 'Varela Round', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .3px;
  box-shadow: 0 6px 22px -6px rgba(34,34,68,0.09);
  border-bottom: 1px solid #e3e7f1;
}

.personalfilesection__card-title {
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  letter-spacing: .1px;
}

.personalfilesection__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  font-size: 15px;
  font-family: 'Varela Round', Arial, sans-serif;
}

.personalfilesection__table-th {
  padding: 12px 8px;
  background: #edf1f5;
  color: #385273;
  font-weight: 700;
  font-size: 15px;
  text-align: left;
  border-bottom: 2px solid #f1f3fa;
  border-top: none;
  letter-spacing: .08px;
}

.personalfilesection__table-td {
  padding: 13px 8px 13px 8px;
  border-bottom: 1.2px solid #f5f7fc;
  color: #2a2e48;
  font-size: 15px;
  background: #fff;
}

.personalfilesection__table-td--empty {
    padding: 42px 0;
    text-align: center;
    font-style: italic;
    color: #a0aec8;
    border-bottom: none;
    background: none;
}

.personalfilesection__table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.personalfilesection__table-empty-icon {
  font-size: 35px;
  opacity: 0.52;
  margin-bottom: 6px;
}

.personalfilesection__table-empty-text {
  font-size: 15px;
  color: #8490a7;
  letter-spacing: .2px;
}

@media (max-width: 600px) {
  .personalfilesection__container {
    max-width: 99vw;
    padding: 0 2vw;
  }
  .personalfilesection__card-header,
  .personalfilesection__card {
    padding: 13px 7px 7px 7px;
  }
  .personalfilesection__card-header {
    margin: -13px -7px 12px -7px;
    font-size: 18px;
  }
  .personalfilesection__card-title { font-size: 17px; }
  .personalfilesection__table-th, .personalfilesection__table-td {
    font-size: 14px;
    padding: 10px 4px;
  }
  .personalfilesection__table-td--empty {
    padding: 18px 0;
  }
}

/* pms page css */


    /* Breadcrumbs */
    .pmsdashboard__breadcrumbs {
      font-size: 14px;
      color: #8e95a9;
      margin-bottom: 20px;
      user-select: none;
    }
    .pmsdashboard__breadcrumbs strong {
      font-weight: 600;
      color: #393e70;
      cursor: default;
    }

    /* Approvers Section */
.pmsdashboard__approvers {
    display: flex;
    gap: 27px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
    .pmsdashboard__approver {
    flex: 1 1 320px;
    background: rgb(255, 255, 255);
    padding: 11px 16px;
    border-radius: 10px;
    box-shadow: rgba(43, 59, 93, 0.12) 0px 3px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: rgb(73, 86, 112);
    font-size: 16px;
    user-select: none;
}
.pmsdashboard__approver span {
    background: #e2e9ff;
    color: #3e57f2;
    padding: 6px 16px;
    border-radius: 18px;
    font-weight: 700;
    white-space: nowrap;
    font-size: 15px;
    border: 1px solid #3e57f294;
}
    /* Grid Layout for Panels */
    .pmsdashboard__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 28px 28px;
    }

    /* Each Panel Card */
    .pmsdashboard__panel {
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 3px 18px rgba(43, 59, 93, 0.12);
      padding: 26px 24px 32px 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
    }

    /* Panel top border accent for color identity */
    .pmsdashboard__panel--blue {
      border-top: 6px solid #5e82ff;
    }
    .pmsdashboard__panel--navy {
      border-top: 6px solid #295ae4;
    }
   .pmsdashboard__panel--green {
    border-top: 6px solid #73C33C;
}

    /* Panel Header */
    .pmsdashboard__panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
.pmsdashboard__panel-header-title {
    font-weight: 600;
    font-size: 18px;
    color: #0f2459;
    letter-spacing: 0;
    user-select: none;
}
.pmsdashboard__panel-header-btn {
    background: linear-gradient(90deg, #5e82ff 0%, #295ae4 100%);
    border: none;
    color: white;
    font-family: 'Varela Round', Arial, sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 17px;
    border-radius: 7px;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.22s ease;
    user-select: none;
}
    .pmsdashboard__panel-header-btn:hover {
      background: linear-gradient(90deg, #295ae4 0%, #5e82ff 100%);
    }

    /* Panel title alternate style (for 360 Feedback and EDP) */
    .pmsdashboard__panel-title-alt {
      font-weight: 700;
      font-size: 20px;
      color: #1b3259;
      margin-bottom: 10px;
      user-select: none;
    }

    /* Card inside panel */
    .pmsdashboard__card {
      background: #fafcff;
    }
.pmsdashboard__card-title {
    font-weight: 600;
    font-size: 16px;
    color: #233a5c;
    margin-bottom: 20px;
    text-align: start;
}
 .pmsdashboard__card-dates {
    font-weight: 400;
    font-size: 13.5px;
    color: #8493b4;
    margin-left: 0;
    white-space: nowrap;
    display: block;
    margin-top: 12px;
}

    /* Action buttons inside card */
 .pmsdashboard__action-btn {
    padding: 8px 26px;
    font-size: 14px;
    font-family: 'Varela Round', Arial, sans-serif;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: filter 0.22s ease;
    user-select: none;
    max-width: max-content;
    width: fit-content;
       background: #73c33c;
    color: #fff;
    box-shadow: none;
}

    .pmsdashboard__action-btn:hover {
      filter: brightness(0.93);
    }

    /* Responsive Adjustments */
    @media (max-width: 960px) {
      .pmsdashboard__approvers {
        flex-direction: column;
        gap: 24px;
      }
      .pmsdashboard__grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
    }

    @media (max-width: 990px) {
      body {
        font-size: 14px;
      }
      .pmsdashboard__container {
        padding: 0 16px 40px 16px;
      }
      .pmsdashboard__approver {
        font-size: 15px;
        padding: 16px 20px;
      }
      .pmsdashboard__action-btn {
        width: 100%;
        max-width: 100%;
        text-align: center;
      }
      .pmsdashboard__card-title {
        font-size: 15px;
      }
      .pmsdashboard__panel-header-title,
      .pmsdashboard__panel-title-alt {
        font-size: 18px;
      }
    }


    /* Annual Rating Matrix css */
    .arm-container-main {
    max-width: 900px;
    margin: 40px auto;
    box-sizing: border-box;
    padding: 0 32px;
    margin-top: 0;
}

    .arm-header-main {
      margin-bottom: 28px;
    }

    .arm-breadcrumb-text {
      font-size: 14px;
      color: #7a89a1;
      display: block;
      margin-bottom: 3px;
    }

.arm-title-year-bar {
    background: #123A6B;
    padding: 16px;
    font-size: 15px;
    border-radius: 7px;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 0;
    margin-top: 20px;
}

    .arm-title-year {
    font-weight: bold;
    color: #ffffff;
    margin-left: 4px;
}

    .arm-card-matrix {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .arm-section-card {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(60, 97, 157, 0.09);
      padding: 28px 22px;
      margin-bottom: 0;
    }

    .arm-section-title {
      font-size: 20px;
      font-weight: bold;
      color: #374a67;
      letter-spacing: 0.5px;
      margin-bottom: 18px;
    }

    .arm-rating-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 15px;
    }

 .arm-table-header {
    background: #d3ecff;
    color: #3483fa;
    padding: 10px 6px;
    font-weight: bold;
    text-align: left;
    font-size: 15px;
    border-bottom: 2px solid #dde6ef;
}

    .arm-table-cell,
    .arm-table-cell-footer {
      padding: 9px 7px;
      color: #132644;
      background: #f8fafc;
    }

    .arm-table-cell-footer {
      font-weight: bold;
      background: #f1f5fc;
      border-top: 2px solid #dde6ef;
    }

    .arm-table-cell:not(:last-child),
    .arm-table-header:not(:last-child) {
      border-right: 1px solid #e0e7ef;
    }

    tfoot .arm-table-cell-footer {
      color: #2196f3;
    }

    .arm-section-card:last-child {
      margin-bottom: 0;
    }

    /* Responsive */
    @media (max-width: 900px) {
      .arm-container-main {
        padding: 0 10px;
      }
      .arm-card-matrix {
        gap: 18px;
      }
    }

/* start - po */

/* Container */
    .po-container-main {
      max-width: 100%;
      background-color: #fff;
      padding: 36px 44px;
      border-radius: 12px;
      box-shadow: 0 6px 15px rgba(0, 80, 230, 0.1);
      box-sizing: border-box;
    }

    /* Title */
  .po-title-main {
    font-size: 22px !important;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: left;
    color: #020215;
    letter-spacing: 0.6px;
    user-select: none;
}

    /* Scroll container for table */
    .po-table-scroll-container {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 32px;
      -ms-overflow-style: scrollbar; /* scrollbar on IE */
      scrollbar-width: thin; /* Firefox */
    }

    /* Table */
    table.po-table-main {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 16px;
      font-size: 14px;
      table-layout: fixed;
      min-width: 900px;
    }

    /* Table Head */
    .po-thead-main th {
      background-color: #e6f0ff;
      color: #123A6B;
      font-weight: 600;
      padding: 12px 8px;
      text-align: left;
      user-select: none;
      white-space: nowrap;
      border-radius: 0;
    }

    /* Table Body */
    .po-tbody-main td {
      background-color: #f7faff;
      padding: 10px 12px;
      vertical-align: top;
      border-radius: 8px;
      box-sizing: border-box;
      word-break: break-word;
      white-space: normal;
      color: #123A6B;
    }

    /* Column widths */
    .po-col-performance-measures {
      width: 35%;
      min-width: 220px;
    }
    .po-col-target {
      width: 25%;
      min-width: 170px;
    }
    .po-col-resources-required {
      width: 25%;
      min-width: 170px;
    }
    .po-col-action-plan {
      width: 10%;
      min-width: 140px;
      white-space: nowrap;
    }
    .po-col-wtg {
      width: 5%;
      min-width: 80px;
      white-space: nowrap;
    }

    /* Inputs and Textareas */
    textarea.po-textarea-input {
      width: 100%;
      min-height: 70px;
      padding: 10px 12px;
      font-size: 14px;
      font-family: 'Varela Round', Arial, sans-serif;
      border: 1px solid #a3b1d1;
      border-radius: 8px;
      resize: vertical;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
      background-color: #fafbff;
      color: #12204c;
      box-sizing: border-box;
    }
    textarea.po-textarea-input:focus {
      border-color: #2a53f9;
      box-shadow: 0 0 8px rgba(42, 83, 249, 0.35);
      outline: none;
      background-color: #fff;
      color: #12204c;
    }

    input.po-date-input,
    input.po-wtg-input {
      width: 100%;
      padding: 10px 12px;
      font-size: 14px;
      font-family: 'Varela Round', Arial, sans-serif;
      border: 1px solid #a3b1d1;
      border-radius: 8px;
      box-sizing: border-box;
      background-color: #fafbff;
      color: #767676;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
      text-align: center;
      white-space: nowrap;
    }
    input.po-date-input:focus,
    input.po-wtg-input:focus {
      border-color: #2a53f9;
      box-shadow: 0 0 8px rgba(42, 83, 249, 0.35);
      outline: none;
      background-color: #fff;
      color: #12204c;
    }

    /* Action Plan and Wtg input widths */
    input.po-date-input {
      max-width: 150px;
    }
    input.po-wtg-input {
      max-width: 80px;
    }

    /* Checkpoint input */
    .po-checkpoint-text input[type="text"] {
      width: 100%;
      padding: 12px 15px;
      font-size: 14px;
      font-family: 'Varela Round', Arial, sans-serif;
      border: 1px solid #a3b1d1;
      border-radius: 8px;
      box-sizing: border-box;
      background-color: #fafbff;
      color: #12204c;
      margin-top: 15px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .po-checkpoint-text input[type="text"]:focus {
      border-color: #2a53f9;
      box-shadow: 0 0 8px rgba(42, 83, 249, 0.35);
      outline: none;
      background-color: #fff;
      color: #12204c;
    }

    /* Checkpoint text */
    .po-checkpoint-text {
      font-size: 14px;
      font-weight: 600;
      color: #003574;
      margin-top: 20px;
      user-select: none;
      line-height: 1.4;
    }

    /* Checkpoint button */
    .po-checkpoint-text button {
      margin-top: 16px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      color: white;
      padding: 12px 28px;
      border-radius: 8px;
      border: none;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.2s ease;
    }
    .po-checkpoint-text button:hover,
    .po-checkpoint-text button:focus {
      background: linear-gradient(135deg, #1e3a8a, #1e40af);
      transform: scale(1.05);
      outline: none;
    }

    /* Responsive */
    @media (max-width: 920px) {
      .po-container-main {
        padding: 24px 20px;
      }
      .po-table-main {
        font-size: 13px;
        border-spacing: 0 12px;
      }
      input.po-date-input,
      input.po-wtg-input {
        max-width: 100%;
      }
      .po-col-action-plan {
        width: 20%;
      }
      .po-col-wtg {
        width: 15%;
      }
    }


/* Training & Development Plan */


.application_wide_main_layout_container_wrapper {
    background-color: #ffffff;
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    width: 100%;
    box-sizing: border-box;
}
        /* Significantly Enhanced Top Header Styles */
      .top_level_application_header_section_area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    padding: 2.5rem 3rem;
    background: linear-gradient(135deg, #123A6B, #2e6ebc);
    border-radius: 1.5rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    border: none;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    text-align: left;
    transition: all 0.3s ease-in-out;
}

        .top_level_application_header_section_area::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.05); /* Subtle overlay for texture */
            pointer-events: none;
            border-radius: 1.5rem;
        }
.main_page_header_display_title_text {
    font-size: 20px;
    font-weight: 700;
    color: rgb(255, 255, 255);
    margin-bottom: 0.8rem;
    text-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px;
    line-height: 1.2;
    text-transform: capitalize;
}

        .header_date_information_range_details {
            font-size: 16px; /* Slightly larger body font for date info */
            color: #e0e0ff; /* Lighter accent color for date text */
            text-align: left;
            line-height: 1.5;
            opacity: 0.9;
        }

        @media (min-width: 640px) { /* Adjust for larger screens */
  
            .top_level_application_header_section_area {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }
            .main_page_header_display_title_text {
                margin-bottom: 0;
            }
            .header_date_information_range_details {
                text-align: right;
            }
        }


        .content_area_section_block_wrapper {
            background-color: #f7f9fc; /* Lighter background for sections */
            border-radius: 1rem;
            padding: 1.5rem;
            margin-bottom: 1.8rem; /* Increased spacing between sections */
            border: 1px solid #e9edf2;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); /* Subtle shadow for sections */
        }

        .section_content_area_heading_title {
            font-size: 20px; /* Section title font size */
            font-weight: 600;
            color: #4a4a4a;
            margin-bottom: 1.2rem;
            padding-bottom: 0.8rem;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
        }

    .section_content_area_heading_title::before {
    content: counter(section-counter) ". ";
    counter-increment: section-counter;
    color: #0a9fff;
    font-weight: 700;
    margin-right: 0.5rem;
    font-size: 20px;
}

        .form_input_fields_grid_layout {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .form_single_input_group_element {
            display: flex;
            flex-direction: column;
        }

        .form_input_label_description_text {
            font-size: 14px; /* Body font size */
            color: #555555;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        .form_input_text_data_field,
        .form_dropdown_selection_field,
        .form_multi_line_text_area_input {
            width: 100%;
            padding: 0.8rem 1rem;
            border: 1px solid #d0d0d0;
            border-radius: 0.6rem; /* Slightly more rounded inputs */
            font-size: 15px; /* Body font size */
            color: #333333;
            background-color: #ffffff;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        .form_input_text_data_field:focus,
        .form_dropdown_selection_field:focus,
        .form_multi_line_text_area_input:focus {
            border-color: #6a6aff; /* Accent color on focus */
            box-shadow: 0 0 0 3px rgba(106, 106, 255, 0.2);
            outline: none;
        }

        .form_multi_line_text_area_input {
            min-height: 80px;
            resize: vertical;
        }

        .data_display_table_structure_layout {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background-color: #ffffff;
            border-radius: 0.8rem;
            overflow: hidden; /* Ensures rounded corners on table */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .data_display_table_structure_layout {
    width: 100%; 
    min-width: 100%; 
}

        .data_display_table_structure_layout th,
        .data_display_table_structure_layout td {
            padding: 1rem 1.2rem;
            text-align: left;
            font-size: 14px; /* Body font size */
            color: #444444;
              white-space: nowrap;
        }
        

     .data_display_table_structure_layout th {
    background-color: #123A6B;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 13px;
}

        .data_display_table_structure_layout tbody tr {
            border-bottom: 1px solid #f5f5f5;
        }

        .data_display_table_structure_layout tbody tr:last-child {
            border-bottom: none;
        }

        .data_display_table_structure_layout tbody tr:hover {
            background-color: #f9fbff; /* Hover effect for rows */
        }

       .action_trigger_submit_button_style {
    background-color: #1B70BB;
    color: #ffffff;
    padding: 0.9rem 2rem;
    border: none;
    border-radius: 0.7rem;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 1.5rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 5px 15px rgb(106 178 255 / 30%);
}

        .action_trigger_submit_button_style:hover {
            background-color: #39a2ff;
            transform: translateY(-2px);
        }

        .action_trigger_submit_button_style:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(106, 106, 255, 0.4);
        }
    

        .responsive_table_container {
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    border-radius: 0.8rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); 
}


/* Mobile bill css */
.layout-container-place{
 
          
    
            box-sizing: border-box;
}


.page_layout_main_wrapper_container {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 20px;
    width: 100%;
   
   
}


        .page_main_header_section_content {
            display: flex;
            flex-direction: column; /* Stack elements for better mobile responsiveness */
            align-items: flex-start; /* Align title and date to start */
            margin-bottom: 2.5rem; /* More space below header */
            padding: 2.5rem 3rem; /* Generous padding for a premium feel */
            background: linear-gradient(135deg, #123A6B, #1B70BB); /* New dark blue gradient */
            border-radius: 1.5rem; /* Match main container radius */
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); /* Stronger, deeper shadow */
            border: none; /* No border for a seamless gradient look */
            position: relative;
            overflow: hidden;
            color: #ffffff; /* White text for contrast */
            text-align: left;
            transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
        }

        .page_main_header_section_content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.05); /* Subtle overlay for texture */
            pointer-events: none;
            border-radius: 1.5rem;
        }

        .page_main_header_title_text {
            font-size: 28px; /* Larger title for major impact */
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 0; /* No margin below title as it's the only element for now */
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* More noticeable text shadow */
            line-height: 1.2;
        }


        /* Section block styling (for form and table) */
 .content_section_block_element {
    background-color: transparent;
    border-radius: 0;
    margin-bottom: 1.8rem;
    position: relative;
    overflow: hidden;
    padding: 6px;
}

        /* Styling for the section headers (e.g., "Mobile Bill Adjustment Form") */
        .section_primary_heading_title {
            font-size: 20px;
            font-weight: 600;
            color: #4a4a4a;
            margin-bottom: 1.2rem;
            padding-bottom: 0.8rem;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            text-align: left;
            background-color: transparent;
            box-shadow: none;
            border-radius: 0;
            padding-left: 0;
            padding-right: 0;
        }


        .form_field_row_layout {
     display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 17px;
grid-row-gap: 25px;
margin-top: 6px;
        }


        .form_field_single_group_wrapper {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        /* Make the Required Limit field span full width */
        .form_field_single_group_wrapper.full_width_input {
            grid-column: 1 / -1;
        }

        .form_field_label_text {
            font-size: 14px;
            color: #555555;
            margin-bottom: 0.5rem;
            font-weight: 500;
            flex-shrink: 0;
        }

        .form_field_value_display_text {
            font-size: 15px;
            color: #333333;
            padding: 0.8rem 0;
            line-height: 1.5;
        }

        .form_input_text_field,
        .form_textarea_multi_line_input {
            width: 100%;
            padding: 0.8rem 1rem;
            border: 1px solid #d0d0d0;
            border-radius: 0.6rem;
            font-size: 15px;
            color: #333333;
            background-color: #ffffff;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        /* Input focus state - Updated Theme Color */
        .form_input_text_field:focus,
        .form_textarea_multi_line_input:focus {
            border-color: #1B70BB; /* New accent blue on focus */
            box-shadow: 0 0 0 3px rgba(27, 112, 187, 0.2); /* New accent blue shadow */
            outline: none;
        }

        .form_textarea_multi_line_input {
            min-height: 100px;
            resize: vertical;
        }

        /* Submit Button - Updated Theme Color */
    .action_submit_button_element {
    background-color: #1B70BB;
    color: #ffffff;
    padding: 0.9rem 2rem;
    border: none;
    border-radius: 0.7rem;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 1.5rem;
    display: block;
    box-shadow: none;
}

        .action_submit_button_element:hover {
            background-color: #0f5a9e; /* Darker blue on hover */
            transform: translateY(-2px);
        }

        .action_submit_button_element:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(27, 112, 187, 0.4);
        }

        /* Responsive Table Container */
        .table_responsive_display_wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border-radius: 0.8rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-top: 1.5rem;
        }

        .data_table_display_structure {
            width: 100%;
            min-width: 800px;
            border-collapse: separate;
            border-spacing: 0;
            background-color: #ffffff;
        }

        .data_table_display_structure th,
        .data_table_display_structure td {
            padding: 1rem 1.2rem;
            text-align: left;
            font-size: 14px;
            color: #444444;
            white-space: nowrap;
        }

        /* Table header - Updated Theme Color */
        .data_table_display_structure th {
    background-color: #123A6B;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 13px;
    border-bottom: 1px solid #d8e6f3;
}

        .data_table_display_structure tbody tr {
            border-bottom: 1px solid #f5f5f5;
        }

        .data_table_display_structure tbody tr:last-child {
            border-bottom: none;
        }

        .data_table_display_structure tbody tr:hover {
            background-color: #f9fbff;
        }

        /* Highlighted table row - Enhanced for deep border and dark text */
        .highlighted_table_row_item {
            background-color: #f0f7fc; /* Light background */
            font-weight: 500;
            border: 1px solid #123A6B; /* Deep border color */
            box-shadow: 0 2px 5px rgba(18, 58, 107, 0.1); /* Subtle shadow for depth */
            transition: all 0.2s ease-in-out; /* Smooth transition for hover effects */
        }

        .highlighted_table_row_item td {
            color: #123A6B; /* Dark text color */
        }

        /* Status Button Styling */
        .status_button_base_style {
            display: inline-block;
            padding: 0.4rem 0.8rem;
            border-radius: 0.5rem;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
            color: #ffffff;
            min-width: 70px; /* Ensure consistent width for buttons */
        }

        .status_approved_button_style {
            background-color: #28a745; /* Green for Approved */
        }

        .status_pending_button_style {
            background-color: #ffc107; /* Amber for Pending */
            color: #333333; /* Darker text for better contrast on light background */
        }

        .status_rejected_button_style {
            background-color: #dc3545; /* Red for Rejected */
        }


        .grid-change{
       
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  
        }


        /* launch page css */

.launchpage-root-container {
    font-family: 'Varela Round', sans-serif;
    background-color: #ffffff;
    padding: 22px;
    color: #213040;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: 7px;
    border-radius: 19px;
    border: 1px solid #8080802e;
}

/* ---------- Section Card (subtle border, no shadow) ---------- */
.launchpage-root-container .launchpage-section-card {
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid rgba(24,80,149,0.12);
  padding: 18px;
  margin-bottom: 18px;
}

.launchpage-root-container .launchpage-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-direction: column;
}

.launchpage-root-container .launchpage-section-title {
  font-size: 18px;
  font-weight: 600;
  color: #185095; /* replaced --launchpage-primary */
  display: flex;
  align-items: center;
  gap: 10px;
}

.launchpage-root-container .launchpage-timeover-pill {
  padding: 14px 18px;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid rgba(24,80,149,0.12); /* replaced --launchpage-border */
  color: #d32f2f;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
}

/* ---------- Table Wrapper (responsive) ---------- */
.launchpage-root-container .launchpage-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 8px;
}

.launchpage-root-container .launchpage-table {
  width: 100%;
  min-width: 820px; /* keep structure on large desks; small screens will scroll */
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(24,80,149,0.12); /* replaced --launchpage-border */
}

.launchpage-root-container .launchpage-table thead th {
  background-color: #185095; /* replaced --launchpage-primary */
  color: #ffffff;
  font-weight: 600;
  font-size: 13.5px;
  padding: 12px 14px;
  text-align: center;
}

.launchpage-root-container .launchpage-table thead th:last-child {
  border-right: none;
}

.launchpage-root-container .launchpage-table tbody td {
  padding: 12px 14px;
  font-size: 14px;
  color: #2b3a45;
  text-align: center;
  border-top: 1px solid rgba(24,80,149,0.12); /* replaced --launchpage-border */
}

.launchpage-root-container .launchpage-table tbody tr:nth-child(even) td {
  background-color: rgba(24,80,149,0.06); /* replaced --launchpage-soft */
}

.launchpage-root-container .launchpage-table tbody tr:hover td {
  background-color: rgba(24,80,149,0.03);
}

/* Status badges */
.launchpage-root-container .launchpage-status-badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #0f2733;
  border: 1px solid rgba(24,80,149,0.12); /* replaced --launchpage-border */
  background-color: #fff;
}

.launchpage-root-container .launchpage-status-approved {
  color: #155724;
  border-color: rgba(21,87,36,0.12);
  background-color: rgba(21,87,36,0.04);
}

.launchpage-root-container .launchpage-status-pending {
  color: #856404;
  border-color: rgba(133,100,4,0.12);
  background-color: rgba(133,100,4,0.04);
}
div#launchpage-title-2 h2, #launchpage-title-1 h2  {
    font-size: 20px;
    font-weight: 600;
    color: black;
    margin-bottom: 15px;
}

.launchpage-root-container .launchpage-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 26px 0;
}

/* Small devices adjustments */
@media (max-width: 880px) {
 
  .launchpage-root-container .launchpage-section-title {
    font-size: 16px;
  }
  .launchpage-root-container .launchpage-table {
    min-width: 700px;
  }
}

@media (max-width: 520px) {
  .launchpage-root-container {
    padding: 14px;
  }
  .launchpage-root-container .launchpage-table {
    min-width: 640px;
  }
  .launchpage-root-container .launchpage-timeover-pill {
    max-width: 100%;
  }
}


/* file cabinet design */
   
    .filecabinetpage__page-heading-title-text {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 25px;
    }

    .filecabinetpage__search-and-actions-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .filecabinetpage__search-input-textfield {
        flex: 1;
        min-width: 250px;
        padding: 10px 15px;
        font-size: 14px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        outline: none;
        background-color: #ffffff;
        transition: border-color 0.2s ease;
    }
    .filecabinetpage__search-input-textfield:focus {
        border-color: #2563eb;
    }

    .filecabinetpage__button-add-new-file {
        background-color: #2563eb;
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        padding: 10px 18px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    .filecabinetpage__button-add-new-file:hover {
        background-color: #1d4ed8;
    }

    .filecabinetpage__files-listing-grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 20px;
    }

    .filecabinetpage__single-file-card-container {
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: 0px 1px 2px rgba(0,0,0,0.04);
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
    .filecabinetpage__single-file-card-container:hover {
        box-shadow: 0px 3px 6px rgba(0,0,0,0.08);
        transform: translateY(-2px);
    }

    .filecabinetpage__file-icon-thumbnail {
        width: 48px;
        height: 48px;
        background-color: #f1f5f9;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #64748b;
    }

    .filecabinetpage__file-name-text {
        font-size: 15px;
        font-weight: 600;
        color: #1e293b;
    }

    .filecabinetpage__file-meta-info {
        font-size: 13px;
        color: #64748b;
    }

    .filecabinetpage__file-action-buttons-container {
        margin-top: auto;
        display: flex;
        gap: 10px;
    }

    .filecabinetpage__file-button-download,
    .filecabinetpage__file-button-delete {
        flex: 1;
        font-size: 13px;
        font-weight: 600;
        padding: 8px 0;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

   .filecabinetpage__file-button-download {
    background-color: #1B70BB;
    color: #ffffff;
}
    .filecabinetpage__file-button-download:hover {
        background-color: #1792ff;
    }

    .filecabinetpage__file-button-delete {
        background-color: #ef4444;
        color: #ffffff;
    }
    .filecabinetpage__file-button-delete:hover {
        background-color: #dc2626;
    }



/*  */

.modern-assessment-root-container {
    padding: 24px;
    color: #213040;
    background: white;
    margin: 20px;
}
    /* Header */
    .modern-assessment-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }
    .modern-assessment-title {
      font-size: 20px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .modern-assessment-breadcrumb {
      font-size: 14px;
      color: #6c757d;
    }

    /* Period Info */
    .modern-assessment-period {
      background: #e6f0ff;
      padding: 10px 15px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 14px;
    }
    .modern-assessment-period strong {
      color: #2a4d8f;
    }

    /* Employee Info Card */
    .modern-assessment-employee-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: #fff8e1;
      border: 1px solid #f0d78c;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;
      gap: 10px;
      font-size: 14px;
    }
    .modern-assessment-employee-card div {
      display: flex;
      flex-direction: column;
    }
    .modern-assessment-employee-card label {
      font-weight: 600;
      color: #555;
    }

    /* Main Scoring Section */
    .modern-assessment-main-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 20px;
      margin-bottom: 20px;
    }

    .modern-assessment-table {
      width: 100%;
      border-collapse: collapse;
      background: white;
      border-radius: 8px;
      overflow: hidden;
    }
    .modern-assessment-table th, 
    .modern-assessment-table td {
      border: 1px solid #e0e0e0;
      padding: 10px;
      text-align: left;
      font-size: 14px;
    }
    .modern-assessment-table th {
      background: #e8f5e9;
      font-weight: 700;
    }
    .modern-assessment-table select {
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
    }

    /* Scoring Scale */
    .modern-assessment-scale-table th {
      background: #e0f7fa;
    }

    /* Submit Button */
    .modern-assessment-submit {
      background: #1b70bb;
      color: white;
      border: none;
      padding: 12px 20px;
      font-size: 15px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    .modern-assessment-submit:hover {
      background: #123A6B;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .modern-assessment-main-grid {
        grid-template-columns: 1fr;
      }
      .modern-assessment-employee-card {
        grid-template-columns: 1fr;
      }
    }


    /* 360 page css */

    .assessment-360-root-container {
      background: #ffff;
      color: #213040;
      padding: 20px;
      box-sizing: border-box;
      font-size: 14.5px; 
      border-radius: 10px;
    }
.assessment-360-page-header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .assessment-360-header-title-text {
      font-size: 21.5px; /* title 20-22px */
      font-weight: 700;
      color: #152238;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .assessment-360-breadcrumb-text {
      color: #6b7280;
      font-size: 13px;
    }

    /* period card */
    .assessment-360-period-card {
      background: linear-gradient(180deg, rgba(58,112,255,0.06), rgba(58,112,255,0.03));
      border-radius: 10px;
      padding: 12px 14px;
      border: 1px solid rgba(58,112,255,0.12);
      margin-bottom: 18px;
      color: #153864;
    }
    .assessment-360-period-card strong { color: #0e3a66; }

    /* main card */
    .assessment-360-main-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 18px;
      border: 1px solid #e6eef8;
      box-shadow: 0 8px 30px rgba(25,42,66,0.04);
    }

    .assessment-360-note-box {
      background:#fff7f0;
      border-radius:8px;
      border:1px solid #ffe5d0;
      padding:10px 12px;
      color:#7a4a16;
      margin-bottom:12px;
      font-size:13px;
    }

    /* employee grid */
    .assessment-360-employee-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }
    .assessment-360-employee-item {
      background: #fafcff;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid #eef6ff;
      display:flex;
      flex-direction:column;
    }
    .assessment-360-employee-label { font-weight:600; color:#374151; margin-bottom:6px; font-size:13px; }
    .assessment-360-employee-value { color:#234; font-size:14px; }

    /* scoring grid */
    .assessment-360-scoring-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 18px;
    }

    /* table card & horizontal scroll wrapper */
    .assessment-360-table-card {
      background: #fff;
      border-radius: 10px;
      border: 1px solid #eef2f7;
      overflow: hidden;
      display:flex;
      flex-direction:column;
    }

    .assessment-360-table-header {
      background: linear-gradient(90deg,#f3e8ff,#f7f3ff);
      padding: 12px 14px;
      font-weight:700;
      color:#3b2b5a;
      display:flex;
      align-items:center;
      gap:10px;
    }

    /* New: scroll wrapper to enable horizontal scrolling */
    .assessment-360-table-scroll-wrapper {
      overflow-x: auto;              /* horizontal scroll */
      -webkit-overflow-scrolling: touch;
      padding: 12px;                 /* inner spacing */
    }

    .assessment-360-table {
      width: 1200px;                 /* ensure table has intrinsic wide width */
      max-width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size:14px;
    }

    .assessment-360-table thead th {
      text-align: left;
      padding: 10px 12px;
      background: #f8f9fb;
      font-weight:700;
      color:#374151;
      border-bottom:1px solid #eef2f7;
      white-space: nowrap;
    }

    .assessment-360-table tbody td {
      padding: 10px 12px;
      border-bottom:1px solid #f1f5f9;
      vertical-align: middle;
      color:#2b3b45;
    }

    .assessment-360-objective-row {
      background: linear-gradient(90deg, #eafaf1, #f6fff8);
      color: #14532d;
      font-weight:600;
    }
    .assessment-360-kpi-row {
      background: linear-gradient(90deg,#fff7ed,#fffcf6);
      color:#92400e;
      font-weight:600;
    }

    .assessment-360-select-rating {
      width: 100%;
      max-width: 140px;
      padding: 6px 8px;
      border-radius: 6px;
      border: 1px solid #d1d5db;
      background: #fff;
      font-size: 14px;
    }

    /* scale card */
    .assessment-360-scale-card {
      background: #fff;
      border-radius: 10px;
      border: 1px solid #eef2f7;
      padding: 12px;
      height: fit-content;
    }
    .assessment-360-scale-header { font-weight:700; margin-bottom:8px; color:#164e63; }
    .assessment-360-scale-table { width:100%; border-collapse: collapse; font-size:14px; }
    .assessment-360-scale-table td { padding:8px 10px; border-bottom:1px dashed #eef2f7; }

    /* footer */
    .assessment-360-footer-row {
      margin-top: 16px;
      display:flex;
      justify-content:flex-end;
      gap:10px;
      align-items:center;
    }
    .assessment-360-submit-button {
      background:#0ea5a3;
      color:#fff;
      padding: 10px 18px;
      border-radius:8px;
      border: none;
      font-weight:700;
      cursor:pointer;
      font-size:15px;
      transition: background .18s ease, transform .08s ease;
    }
    .assessment-360-submit-button:hover { background:#0b8f8d; transform: translateY(-2px); }

    /* small screen adjustments */
 @media only screen and (max-width: 990px) {
      .assessment-360-scoring-grid { grid-template-columns: 1fr; }
      .assessment-360-employee-grid { grid-template-columns: 1fr; }
      .assessment-360-table thead th:nth-child(3){
        display: none !important;
      }
      
      .assessment-360-table tbody td:nth-child(3) 
      { display:none !important; }
      .assessment-360-table { width: 1200px; } /* ensure still scrollable */
      .assessment-360-page-header-row {
   
    flex-direction: column;
}

.assessment-360-footer-row {
    justify-content: flex-start;
  
}
    }


    /* corporate page css */

     .view-pmd-main-container {
      background: #ffff;
      padding: 20px;
      color: #1e293b;
      border-radius: 10px;
    }

    .view-pmd-header {
      margin-bottom: 20px;
    }

    .view-pmd-title {
      font-size: 20px;
      font-weight: 700;
      color: #334155;
    }

    .view-pmd-meta {
      font-size: 14px;
      color: #64748b;
      margin-top: 5px;
    }

    .view-pmd-table-wrapper {
      overflow-x: auto;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      background: white;
    }

    .view-pmd-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 900px;
    }

    .view-pmd-table th, .view-pmd-table td {
      padding: 10px;
      border: 1px solid #e2e8f0;
      text-align: center;
      font-size: 14px;
    }

    .view-pmd-table th {
      background: #e0f2fe;
      font-weight: 700;
      color: #0369a1;
    }

    .view-pmd-section-title {
      background: #f1f5f9;
      font-weight: 600;
      text-align: left;
    }
.view-pmd-sub-table th,
.view-pmd-sub-table td {
  padding: 8px;
  font-size: 13px;
  border: none; 
  border-bottom: 1px solid #e2e8f0; }
    

    .view-pmd-sub-table th {
      background: #dcfce7;
      font-size: 13px;
    }

    .view-pmd-buttons {
      display: flex;
      gap: 10px;
      margin-top: 15px;
    }

.view-pmd-btn-red {
    border: none;
    padding: 10px 18px;
    color: white;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    background: #58a3ff63;
    color: #123A6B;
}

    .view-pmd-btn-red:hover {
      background: #004e92;
      color: white;
    }

.view-pmd-btn-green {
    background: #1B70BB;
    border: none;
    padding: 10px 18px;
    color: white;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

    .view-pmd-btn-green:hover {
      background: #004ca8;
    }

    .view-pmd-comments {
      margin-top: 20px;
    }

    .view-pmd-comments h3 {
      background: #dbeafe;
      padding: 8px;
      border-radius: 6px;
      font-size: 16px;
      font-weight: 700;
      color: #1e3a8a;
    }

    .view-pmd-comments-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 8px;
    }

    .view-pmd-comments-table th,
    .view-pmd-comments-table td {
      padding: 10px;
      border: 1px solid #e2e8f0;
      text-align: center;
      font-size: 14px;
    }

    .view-pmd-comments-table th {
      background: #e0f2fe;
    }



    /* Feedback As Suppervisor page css */

     .modern-appraisal-main-container-2025 {
        margin: auto;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.06);
        overflow: hidden;
    }

    .modern-appraisal-main-title-header-2025 {
        background: linear-gradient(90deg, #4cafef, #6cc1ff);
        color: white;
        font-size: 20px;
        padding: 16px 24px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }
      /* overflow-x: auto; */  

      .supervisor{
              overflow-x: auto;

      }
    .modern-appraisal-data-table-2025 {
      width: 100%;
      border-collapse: collapse;
    }

    .modern-appraisal-data-table-2025 thead {
        background-color: #eef5ff;
    }
.modern-appraisal-data-table-2025 th {
    padding: 16px 18px;
    font-weight: 600;
    text-align: left;
    color: #444;
    border-bottom: 2px solid #e3ebf6;
    font-size: 14px;
}

 .modern-appraisal-data-table-2025 td {
    padding: 14px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    font-size: 14px;
}

    .modern-appraisal-kpi-section-row-2025 {
        background-color: #e8f7f1;
        font-weight: bold;
        color: #2a6f55;
        font-size: 15px;
    }

    .modern-appraisal-rating-number-2025 {
       color: #007acc;
       font-weight: 600;
    }

    .modern-appraisal-rating-checkmark-2025 {
        text-align: center;
        color: #4caf50;
        font-size: 16px;
        font-weight: bold;
    }

    .modern-appraisal-final-rating-row-2025 {
        font-weight: bold;
        background-color: #f1f5fb;
        text-align: center;
    }

    /* Hover effect */
    .modern-appraisal-data-table-2025 tr:hover td {
        background-color: #fafcff;
    }

    /* Responsive */
    @media (max-width: 990px) {
       
          .modern-appraisal-data-table-2025 {
      width: 100%;
      border-collapse: collapse;
      min-width: 900px !important;
    }

   
    
    }


    /* new css */



     /* Outer container for the table to provide padding, background, and handle horizontal scrolling for mobile devices */
        .financial-summary-table-container-modern-design {
            width: 100%;
            overflow-x: auto; /* This is the key property for horizontal scrolling on mobile */
            background-color: #ffffff;
            border-radius: 12px;
            padding: 20px;
            margin-top: 25px; 
        }

        /* Main table styling */
        .yearly-financial-data-presentation-table-for-dashboard {
            width: 100%;
            border-collapse: separate; 
            border-spacing: 0;
            text-align: center;
            font-size: 0.95em;
            min-width: 900px; /* Ensures the table is wide enough to trigger scrolling on small screens */
        }

        /* Table header styling */
        .table-header-section-for-monthly-data-display .table-header-row-for-all-financial-periods {
            background-color: #e6ffe6; 
            color: #333;
            font-weight: 600;
            border-radius: 8px 8px 0 0; 
            overflow: hidden; 
        }

        .table-header-cell-for-month-year-data {
            padding: 15px 10px;
            border-bottom: 2px solid #d4ffd4; 
            position: sticky;
            top: 0;
            background-color: #e6ffe6;
            z-index: 10;
        }

        /* Border radius for first and last header cells */
        .table-header-cell-for-month-year-data:first-child {
            border-top-left-radius: 8px;
        }
        .table-header-cell-for-month-year-data:last-child {
            border-top-right-radius: 8px;
        }

        /* Table body and data cell styling */
        .table-body-section-for-detailed-values .table-data-row-for-specific-financial-amounts {
            background-color: #fff;
            transition: background-color 0.3s ease;
        }

        .table-body-section-for-detailed-values .table-data-row-for-specific-financial-amounts:hover {
            background-color: #778bff0f; 
        }

        .table-data-cell-for-individual-monthly-value {
            padding: 12px 10px;
            border-bottom: 1px solid #eee; 
            color: #555;
        }

        /* Special styling for the first data cell */
        .table-data-cell-for-individual-monthly-value:first-child {
            font-weight: bold;
            color: #2c3e50; 
        }

        /* Ensure the bottom border radius for the last row */
        .table-body-section-for-detailed-values .table-data-row-for-specific-financial-amounts:last-child .table-data-cell-for-individual-monthly-value:first-child {
            border-bottom-left-radius: 8px;
        }
        .table-body-section-for-detailed-values .table-data-row-for-specific-financial-amounts:last-child .table-data-cell-for-individual-monthly-value:last-child {
            border-bottom-right-radius: 8px;
        }

        .table-header-cell-for-month-year-data {
    padding: 15px 10px;
    border-bottom: 2px solid #d4ffd400;
    position: sticky;
    top: 0;
    background-color: #007dff;
    z-index: 10;
    color: white;
    font-size: 15px;
    font-weight: 500;
}

.add-yellow-bg {
    background: #FFFAF6;
    border: 1.5px solid #ffc34f;
}
     

        /* Icon styling to match the image's calendar/money icons */
        .svg_icon_base_style {
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  
  /* Add any other default styles like padding or background */
}
.submenu.active-sub-menu {
    margin-left: 20px;
    max-height: 500px;
    background: #ffffff12;
    padding: 10px;
    padding-left: 0;
    padding-bottom: 0;
    margin-bottom: 19px;
    border-radius: 13px;
}

.submenu.active-sub-menu a {
    margin-bottom: 18px !important;
}


.submenu.active-sub-menu a img {
    height: 28px !important;
}



 /* The long class name for the paragraph, as you requested */
        .the_big_and_long_class_name_for_this_paragraph_of_text_for_webpage {
            font-size: 16px; 
            line-height: 1.5;
            color: #555;
        }

        /* --- Beautiful Loader Styles --- */

        /* Full-page container for the loader */
        .page-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
            opacity: 1;
            visibility: visible;
        }

        /* The spinning ring animation */
        .loader-ring {
            width: 80px;
            height: 80px;
            border: 8px solid #ddd;
            border-top-color: #007DFF; 
            border-radius: 50%;
            animation: ring-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        }

        /* The animation keyframes */
        @keyframes ring-spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        /* This class hides the loader after the page loads */
        .page-loader.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* modal css */

.salary-orange-color {
    background: #F3EAEA;
    border: 1px solid #a42e135e !important;
}



/* pagination css */

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 10px;
}

.pagination-container button {
    background-color: transparent;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.pagination-container button:hover {
  background-color: #e9e9e9;
  border-color: #999;
}

.pagination-container button.active {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
  cursor: default;
}

.pagination-container button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination-container .page-info {
  font-weight: 600;
  color: #555;
}

/* table even and odd color */


/* .even-and-odd-color tr td span:nth-child(odd) {
      background: #4c8edf4a;
          color: #4c8edf;
  padding-top: 6px !important;
    font-weight: 600;
    font-size: 12px;
    padding: 4px;
    width: 100px;
    display: inline-block;
    border-radius: 26px;
    color: #4c8edf;
    border: none;

}

.even-and-odd-color tr td span:nth-child(even) {
      background: #f77f0029 !important;
    color: #F77F00 !important;
      padding-top: 6px !important;
    font-weight: 600;
    font-size: 12px;
    padding: 4px;
    width: 100px;
    display: inline-block;
    border-radius: 26px;
    color: #4c8edf;
    border: none;
} */


.submenu.active-sub-menu {
  
    padding-right: 0;
}
button#screenshotBtn {
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #218EEB;
    color: white;
    font-weight: 200;
    border: 1px solid #218EEB;
    border-radius: 8px;
   cursor: pointer;
   &:hover{
    background-color: #004ca8;
    border: 1px solid #004ca8;
   }
}

.personalfilesection__breadcrumbs {
    display: flex;
    align-items: center;
} 

.employment-information{
  height: 45px;
}
.employment-information span{
    background: linear-gradient(45deg, #00000005, #0000001f);
    width: 240px;
    padding: 7px;
}