html {
  font-size: 14px;
}

/*for  mobile*/
@media (max-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
  nav {
    max-height: 120px !important;
  }

  .logo-image {
    max-height: 60px;   /* keeps it inside navbar height */
    width: auto;        /* scale proportionally */
  }

  .navbar-nav {
    background-color: #0d6efd !important;
    
  }
  
  .nav-link {
    padding-left: 15px;
  }
  .navbar .nav-link {
    color: #ffffff !important;
  }
}


@media screen and (max-width: 767px) {
  .search-button{
    height: 64px;
    width: 100% !important;
    margin-top: 10px;
  }

  .search-container {
    padding-bottom: 0;
    padding-top: 0;
    margin-left: 2px;
    margin-right: 2px;
  }

  .mobile-specific{
    margin: 0px;
    padding:0px;
  }
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
  
  nav li {
    display: inline-block;
    border-right: 1px solid #ccc;
    padding: 0 .25em;
  }

  /*nav li:last-child { border: 0; } !* remove the pipe from the last list item *!*/
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.form-control-textarea{
  width: 80% !important;
}

.height100{
  height: 100% !important;
}

.padding-right-10 {
  padding-right: 10px;
}

.search-box {
  border: 1px solid #5c636a;
  border-radius: 6px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 20px;
}

.search-textbox{
  height: 50px; !important;
  border:none;
  width:90%;
  font-size: 22px;
}

.thankyou-text{
  font-size: 18px;
}

.search-textbox-focus{
  border : 1px solid #0d6efd !important;
  box-shadow : 0 0 10px #719ECE !important;
}

.search-textbox:focus {
  outline: none;
}

.search-button{
  height: 64px;
  width: 150px;
}

.rounded-div{
  border : 1px solid lightgray;
  border-radius: 6px;
  /*box-shadow : 0 0 5px #719ECE;*/
  min-height: 50px;
  margin: 8px;
  margin-top: 4px !important;
  padding: 10px;
  box-shadow: 3px 3px 3px lightgray;
}

.job-detail-anchor{
    text-decoration: inherit;
    color: inherit;
    cursor: pointer;  
}

.job-container:hover { 
  background: #f7fbfd !important;
}

.display-none{
  display: none;
}

pre {
  white-space: pre-wrap;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.quillEditor {
  font-size: inherit !important;
  border: 1px solid #ccc;
  border-radius: 0.375rem;
  padding: 1rem;
  min-height: 150px;
}

.quillEditor-readonly {
  font-size: inherit !important;
  border: none !important;
  
}

/* Optional: Add some padding for the Quill content */
.ql-editor {
  padding: 0.5rem;
}

/* Make sure the label appears inside the editor when focused or filled */
.form-floating label {
  pointer-events: none;  /* Prevents the label from blocking the editor */
}

[role=toolbar] {
  display: flex;
  justify-content: flex-end; /* Right-align using flexbox */
  gap: 5px; /* Optional: add some space between the items */}

.shortView {
  max-height: 150px;
  overflow: hidden;
}

.resume {
  min-height: 250px;
}

.nav-item-selected {
  
}

.text-left {
  text-align: left !important;
}


/*Dollar sign*/
.dollar-sign {
  font-size: 24px;
}

input[type=checkbox] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

.checkbox-label {
  display: block;
}


.job-item {
  padding: 12px 14px;
  border: 1px solid #ddd; /* light border */
  border-radius: 4px;
  margin-bottom: 8px; /* spacing between jobs */
  cursor: pointer;
  background-color: #fff;
}

.job-item.active,
.job-item:hover {
  background: #f6f8ff;
  border-color: #b3c7ff; /* subtle blue highlight */
}

.job-list-container {
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox hide scrollbar */
}

.job-list-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari hide scrollbar */
}


.sticky-header-container {
  position: sticky;
  top: 0;
  background: #fff;
  padding-top: 12px;  /* safe to keep now */
  z-index: 5;
}


.job-details-panel {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  padding-top: 0px;
  background-color: #ffffff;
}

#searchSplit .col-md-5 {
  border-right: none; /* remove the dividing line */
}

.full-width-hr {
  width: 100vw;              /* span the viewport */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;        /* pull out of any parent padding */
  margin-right: -50vw;  
}

.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020; /* stays above content */
}

.job-details-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffff
}

/* if you have a column wrapper for the panel */
.is-mobile #detailsCol { display: none; }
/* or if you’re hiding just the panel: */
.is-mobile #detailsPanel { display: none; }


/* mobile: disable inner scrolling so the page scrolls first */
@media (max-width: 767.98px) {
  .job-list-container {        /* your left column */
    max-height: none !important;
    overflow: visible !important;
  }
}


/* Prevent grid children from forcing horizontal scroll */
.container, .container-fluid, .row, [class*="col-"] { min-width: 0; }

/* Let long text wrap so the table fits */
#jobsTable th, #jobsTable td { white-space: normal; word-break: break-word; }

/* Slightly tighter on very small phones */
@media (max-width: 576px) {
  #jobsTable { font-size: .95rem; }
  #jobsTable th, #jobsTable td { padding: .55rem .6rem; }
}


#jobsTable th:nth-child(5),
#jobsTable td:nth-child(5) {
  min-width: 120px; /* adjust to what looks good */
  text-align: center;
}

@media (max-width: 768px) {
  div.dt-length {
    display: none !important;
  }
}


@media (min-width: 992px) { /* Desktop breakpoint */
  #jobsTable th:nth-child(5),
  #jobsTable td:nth-child(5) {
    min-width: 130px;   /* adjust as needed */
    width: 120px;
  }
}


/* Prevent grid parents from forcing horizontal scroll */
.container, .container-fluid, .row, [class*="col-"] { min-width: 0; }

/* Let long cells wrap so the table fits */
#applicantsTable th, #applicantsTable td {
  white-space: normal;
  word-break: break-word;     /* wraps long emails/phones gracefully */
}

/* Slightly tighter on very small phones */
@media (max-width: 576px) {
  #applicantsTable { font-size: .95rem; }
  #applicantsTable th, #applicantsTable td { padding: .55rem .6rem; }
}

/* Hide entries-per-page on mobile via CSS as well (belt & suspenders) */
@media (max-width: 768px) {
  div.dataTables_length { display: none !important; }
}

/* Mobile: only 3 columns visible AND they fill 100% */
@media (max-width: 767.98px) {
  #applicantsTable {
    table-layout: fixed;      /* distribute widths evenly based on our rules */
    width: 100%;
  }
  #applicantsTable th,
  #applicantsTable td {
    white-space: normal;      /* allow wrapping */
    word-break: break-word;
    padding: .55rem .6rem;
    font-size: .95rem;
  }
}



/* Make sure the mobile 3-column table uses the full width nicely */
#applicantsMobile {
  table-layout: fixed;
}
#applicantsMobile th, #applicantsMobile td {
  white-space: normal;
  word-break: break-word;
  padding: .55rem .6rem;
  font-size: .95rem;
}

/* For when employer is logged in and on main search page, we show a banner.  This is styling it for mobile. */
.alert[aria-label="Employer shortcut"] { font-size: .95rem; }
@media (max-width: 576px) {
  .alert[aria-label="Employer shortcut"] { padding-top: .5rem; padding-bottom: .5rem; }
}

/* Keep the header compact and make the logo scale */
.navbar { padding-top: .5rem; padding-bottom: .5rem; }

/* Let the image shrink with the container and never exceed a sensible height */
.navbar-brand img.logo-image {
  max-height: 48px;   /* tune this */
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Slightly larger on tablets/desktop */
@media (min-width: 768px) {
  .navbar-brand img.logo-image { max-height: 60px; }
}

/* Prevent flex overflow issues on tight widths */
.navbar-brand { min-width: 0; }


/* Keep navbar compact */
.navbar { padding-top: .5rem; padding-bottom: .5rem; }

/* Responsive logo */
.navbar-brand img.logo-image {
  max-height: 48px; /* adjust if you want a taller header */
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
@media (min-width: 768px) {
  .navbar-brand img.logo-image { max-height: 60px; }
}

/* Make offcanvas act like normal inline nav at lg+ */
@media (min-width: 992px) {
  .navbar .offcanvas { visibility: visible; position: static; transform: none; }
  .offcanvas-backdrop { display: none; }
  .offcanvas .offcanvas-header { display: none; }
  .offcanvas .offcanvas-body { display: flex; align-items: center; padding: 0; }
}


/* ---- Navbar Offcanvas Fix ---- */
@media (min-width: 992px) {
  .navbar .offcanvas {
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: none !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .navbar .offcanvas-header { display: none !important; }
  .navbar .offcanvas-body {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    gap: .5rem;
  }
  .offcanvas-backdrop { display: none !important; }
}

/* Logo responsiveness */
.navbar-brand img.logo-image {
  max-height: 60px;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 991.98px) {
  .navbar-brand img.logo-image { max-height: 48px; }
}


/* Make the inline offcanvas fill the row so left/right can align */
@media (min-width: 992px) {
  .navbar .offcanvas {
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    flex: 1 1 auto !important;       /* ← key: let it grow next to the brand */
    width: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .navbar .offcanvas-body {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;          /* ← ensures full width for alignment */
    padding: 0 !important;
    gap: .5rem;
  }

  /* Push the UL (Job Postings + Applicants) to the left */
  .navbar .offcanvas-body > ul.navbar-nav {
    margin-right: auto !important;
  }

  /* Keep the auth/contact block on the far right */
  .navbar .offcanvas-body > .ms-lg-auto {
    margin-left: auto !important;
  }

  /* Neutralize your generic 'nav li' rule that can fight Bootstrap */
  .navbar .navbar-nav > .nav-item {
    display: flex;                   /* behave like normal navbar items */
    border-right: 0;                 /* avoid squeezing width */
    padding: 0 .5rem;
  }
}

@media (min-width: 992px) {
  .navbar .d-lg-flex.flex-nowrap {
    flex-wrap: nowrap;         /* keep in one line */
    white-space: nowrap;       /* stop text wrapping */
  }
  .navbar .d-lg-flex a,
  .navbar .d-lg-flex .nav-link {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.badge {
  color: #000000 !important;
}



.plan-card {
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border .25s ease;
  height: 100%;             /* equal heights */
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

/* Hover lift */
.plan-card:hover {
  transform: translateY(-5px);
}

/* Selected state */
.plan-card.selected {
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px var(--bs-primary), 0 12px 24px rgba(0,0,0,.3);
  transform: translateY(-8px);
}

/* Gradient backgrounds */
.basic-flair {
  background: linear-gradient(135deg, #43cea2, #185a9d);
}
.pro-flair {
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
}
.premium-flair {
  background: linear-gradient(135deg, #4776e6, #8e54e9);
}

.card-body {
  flex-grow: 1;  /* make bodies equal height */
}

ul li {
  margin: .5rem 0;
}