/* Dental Directory thumbnail override */
.table-style .listing-table td:first-child {
  text-align: center !important;
  vertical-align: middle;
}

.table-style .listing-table td:first-child img {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
  float: none !important;
}


/* Dental Directory: shrink the two CTA buttons */
a.but_hand_right.large-b.m-right10,
a.but_info.large-b{
  font-size: 14px !important;
  padding: 10px 18px !important;
  line-height: 18px !important;
  border-radius: 24px !important;
}

/* === PUBLIC PROFILE PHOTO MODERNIZATION (2026) === */
img.imgProfile,
img.imgProfile.thin-gray-border {
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  object-fit: cover;

  /* subtle “logged-in style” */
  border: 5px solid #fff !important;
  box-shadow: 0 2px 3px rgba(0,0,0,0.25) !important;
  background: #fff;
}

/* Mobile */
@media (max-width: 480px) {
  img.imgProfile,
  img.imgProfile.thin-gray-border {
    width: 120px !important;
    height: 120px !important;
  }
}


/* === PUBLIC PROFILE PHOTO FIX (selector correction) === */
img.thin-gray-border[id*="imgProfile"],
img.thin-gray-border[id*="_imgProfile"] {
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  object-fit: cover !important;

  border: 5px solid #fff !important;
  box-shadow: 0 2px 3px rgba(0,0,0,0.25) !important;
  background: #fff !important;
}

@media (max-width: 480px) {
  img.thin-gray-border[id*="imgProfile"],
  img.thin-gray-border[id*="_imgProfile"] {
    width: 120px !important;
    height: 120px !important;
  }
}


/* Dental Directory: make provider thumbnails circular with subtle shadow */
.table-style .listing-table td:first-child img[src*="/DentistryResporatory/ProfileImages/ThumbNails/"] {
  border-radius: 9999px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
  display: inline-block;
}

/* === ED: Dental Directory thumb circle + shadow (keep current size) === */
/* Targets thumbs rendered inside the directory listing table */
.listing-table td:first-child img,
.table-style .listing-table td:first-child img {
  display: inline-block !important;
  border-radius: 9999px !important;
  background: #fff !important;
  /* subtle shadow like publicprofile */
  box-shadow: 0 6px 14px rgba(0,0,0,0.14) !important;
  /* ensure the circle crops non-square logos */
  object-fit: cover !important;
}

/* Some rows use inline height/width; ensure we don't distort but still crop */
.listing-table td:first-child img {
  overflow: hidden !important;
}

/* Make sure the cell allows the shadow to be visible */
.listing-table td:first-child,
.table-style .listing-table td:first-child {
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* -------------------------------------------------
   Dental Directory — circular thumbnails + shadow
   Matches actual DOM: listing-table first column img
   ------------------------------------------------- */
table.listing-table td:first-child img {
  border-radius: 50% !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18) !important;
  object-fit: cover;
}


/* -------------------------------------------------
   Dental Directory — circular thumbnails + shadow
   Actual DOM: <table class="listing-table"> ... <td> <img ...>
   ------------------------------------------------- */
table.listing-table td:first-child img {
  border-radius: 50% !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18) !important;
  object-fit: cover;
}

/* 2026-02-24: mobile centering mend for public /dentaldirectory */
@media only screen and (max-width: 760px) {
  /* center the directory wrapper */
  .table-style {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    float: none;
    left: auto;
    right: auto;
    transform: none;
  }

  /* ensure the responsive wrapper isn't offset */
  .table-style .table-responsive {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  /* keep the table itself centered */
  .table-style .listing-table {
    margin-left: auto;
    margin-right: auto;
  }
}

/* 2026-02-24: /dentaldirectory mobile fix — neutralize injected responsive table padding */
@media only screen and (max-width: 760px){

  /* scope to public directory grid only */
  #subscribers-grid .table-responsive td{
    padding-left: 0 !important;
  }

  /* prevent the pseudo-label column from forcing a left gutter */
  #subscribers-grid .table-responsive td:before{
    width: auto !important;
    left: auto !important;
    padding-right: 0 !important;
    white-space: normal !important;
    display: block !important;
    position: relative !important;
    margin: 0 0 6px 0 !important;
  }
}

/* 2026-02-24: /dentaldirectory — override JS-injected mobile responsiveTableCss (padding-left:50%) */
@media only screen and (max-width: 760px){
  .table-responsive td{
    padding-left: 0 !important;      /* neutralize the push-right */
    text-align: center !important;   /* match the centered look you want */
  }
  .table-responsive td:before{
    position: static !important;     /* stop left:6px positioning */
    width: auto !important;          /* stop 45% label column */
    display: block !important;       /* label sits above value */
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

/* 2026-02-24: /dentaldirectory mobile fix — prevent any 50% width constraints (scoped) */
@media only screen and (max-width: 760px){
  #subscribers-grid,
  #subscribers-grid .table-style,
  #subscribers-grid .table-responsive,
  #subscribers-grid table.listing-table{
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 2026-02-24: /dentaldirectory mobile grid fix
   Neutralize JS-injected responsiveTableCss (padding-left:50%) AND keep full-width cards
*/
@media only screen and (max-width: 760px){

  /* this file is only loaded on /dentaldirectory, so it's safe to touch .table-style here */
  .table-style,
  .table-style .table-responsive,
  #subscribers-grid,
  #subscribers-grid .table-responsive,
  #subscribers-grid .table-responsive table.listing-table{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* kill the 50% left gutter so the “card” uses full width */
  #subscribers-grid .table-responsive td{
    padding-left: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* keep labels above values, but remove the left-positioned label column */
  #subscribers-grid .table-responsive td:before{
    position: static !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
    white-space: normal !important;
    display: block !important;
    text-align: center !important;
  }
}

/* 2026-02-24: /dentaldirectory mobile — force full-width “cards” after JS table->block transform */
@media only screen and (max-width: 760px){

  /* Force full width from wrapper -> table -> row -> cell */
  #subscribers-grid .table-responsive,
  #subscribers-grid .table-responsive table,
  #subscribers-grid .table-responsive thead,
  #subscribers-grid .table-responsive tbody,
  #subscribers-grid .table-responsive tr,
  #subscribers-grid .table-responsive th,
  #subscribers-grid .table-responsive td{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Some browsers need this to avoid shrink-to-fit behavior */
  #subscribers-grid .table-responsive table{
    table-layout: fixed !important;
  }

  /* Keep the content centered, kill the 50% gutter */
  #subscribers-grid .table-responsive td{
    padding-left: 0 !important;
    text-align: center !important;
  }

  /* Labels above values (no left label column) */
  #subscribers-grid .table-responsive td:before{
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    position: static !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
    white-space: normal !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

/* 2026-02-24: /dentaldirectory — fix narrow 300px grid on mobile */
@media only screen and (max-width: 760px){
  .table-style,
  #subscribers-grid.grid-view{
    width: 100% !important;
    max-width: 100% !important;
  }

  #subscribers-grid .table-responsive,
  #subscribers-grid .listing-table{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 2026-02-26: /dentaldirectory — defeat global 270px .container clamp (responsive-leyouts.css) */
@media only screen and (max-width: 760px){
  .container,
  .content_fullwidth{
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .container{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* 2026-02-26: /dentaldirectory — widen subscriber grid on mobile (scoped to #subscribers-grid only) */
@media only screen and (max-width: 760px){
  #subscribers-grid,
  #subscribers-grid.grid-view,
  #subscribers-grid .table-style,
  #subscribers-grid .table-responsive{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   ED Dental Directory — New Grid (Card View) v1
   Scoped ONLY to: .table-responsive > table.listing-table
   - Converts rows to cards
   - Larger circular photo (92px)
   - Single-line location (City, State, Zip)
   ========================================================= */

.table-responsive > table.listing-table thead { 
  display: none; 
}

/* Make tbody a responsive grid */
.table-responsive > table.listing-table tbody{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}

@media (max-width: 980px){
  .table-responsive > table.listing-table tbody{ 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
  }
}

@media (max-width: 640px){
  .table-responsive > table.listing-table tbody{ 
    grid-template-columns: 1fr; 
  }
}

/* Each row becomes a card */
.table-responsive > table.listing-table tbody tr{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:#fff;
  border:1px solid #e7e7ee;
  border-radius:14px;
  padding:16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}

/* Remove default table styling */
.table-responsive > table.listing-table tbody tr td{
  border:0 !important;
  padding:0 !important;
  vertical-align:top;
}

/* Larger circular profile image */
.table-responsive > table.listing-table tbody tr td:first-child img{
  width:92px !important;
  height:92px !important;
  border-radius:999px !important;
  object-fit:cover !important;
  background:#fff !important;
  border:3px solid #fff !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.10), 0 1px 0 rgba(0,0,0,.04) !important;
}

/* Main content column flexible */
.table-responsive > table.listing-table tbody tr td:nth-child(2){
  flex:1;
  min-width:0;
}

/* Emphasize name */
.table-responsive > table.listing-table tbody tr td:nth-child(2),
.table-responsive > table.listing-table tbody tr td:nth-child(2) a{
  font-weight:700;
}

/* Hide separate City / State / Zip columns */
.table-responsive > table.listing-table tbody tr td:nth-child(4),
.table-responsive > table.listing-table tbody tr td:nth-child(5),
.table-responsive > table.listing-table tbody tr td:nth-child(6){
  display:none !important;
}

/* Style View Profile button */
.table-responsive > table.listing-table tbody tr td:last-child a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid rgba(142,107,209,.35);
  background: rgba(142,107,209,.10);
  color:#3b2a63;
  font-weight:700;
  font-size:12px;
  letter-spacing:.2px;
  text-decoration:none;
}

.table-responsive > table.listing-table tbody tr td:last-child a:hover{
  background: rgba(142,107,209,.16);
  border-color: rgba(142,107,209,.45);
}


/* =========================================================
   ED Dental Directory — New Grid (Card View) v1 — Fine Tune
   Fixes:
   - Stop Name/Specialty/Phone from cramming into one line
   - Make a consistent 2-col card: Photo | Content
   - Style the existing "View Profile" link as a button
   ========================================================= */

.table-responsive > table.listing-table tbody tr{
  display:grid !important;
  grid-template-columns: 108px minmax(0, 1fr);
  column-gap:16px;
  align-items:center;
}

.table-responsive > table.listing-table tbody tr td{
  display:block !important;
  text-align:left !important;
  min-width:0;
}

/* Photo column */
.table-responsive > table.listing-table tbody tr td:first-child{
  grid-column:1;
}

/* Content column: Name, Specialty, Phone */
.table-responsive > table.listing-table tbody tr td:nth-child(2),
.table-responsive > table.listing-table tbody tr td:nth-child(3),
.table-responsive > table.listing-table tbody tr td:nth-child(7){
  grid-column:2;
}

/* Name cell */
.table-responsive > table.listing-table tbody tr td:nth-child(2){
  font-size:18px;
  line-height:1.2;
  font-weight:800;
  overflow-wrap:anywhere;
}

/* Specialty + Phone as supporting lines */
.table-responsive > table.listing-table tbody tr td:nth-child(3),
.table-responsive > table.listing-table tbody tr td:nth-child(7){
  margin-top:6px;
  font-size:12px;
  line-height:1.2;
  color:#6b6b7a;
  font-weight:600;
}

/* Turn the existing "View Profile" link inside the NAME cell into a button */
.table-responsive > table.listing-table tbody tr td:nth-child(2) a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 14px;
  margin-top:10px;
  border-radius:10px;
  border:1px solid rgba(142,107,209,.35);
  background: rgba(142,107,209,.10);
  color:#3b2a63 !important;
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
  text-decoration:none !important;
}

.table-responsive > table.listing-table tbody tr td:nth-child(2) a:hover{
  background: rgba(142,107,209,.16);
  border-color: rgba(142,107,209,.45);
}

/* Mobile tightening */
@media (max-width: 640px){
  .table-responsive > table.listing-table tbody tr{
    grid-template-columns: 96px minmax(0, 1fr);
    padding:14px;
  }

  .table-responsive > table.listing-table tbody tr td:first-child img{
    width:84px !important;
    height:84px !important;
  }

  .table-responsive > table.listing-table tbody tr td:nth-child(2){
    font-size:17px;
  }
}


/* =========================================================
   ED Dental Directory — New Grid (Card View) v1 — Cleanup
   Goal: Match New Grid HTML preview
   - Remove injected header labels inside cells (ex: "Name", "Specialty", "Phone", "N:")
   - Hide Phone column entirely
   - Show Specialty under Name
   - Show Location as one line: City, State Zip (using existing cells)
   ========================================================= */

/* 1) Kill “responsive table” label injection (the cause of Name/Specialty/Phone showing in-card) */
.table-responsive > table.listing-table tbody tr td:before,
.table-responsive > table.listing-table tbody tr td::before{
  content: none !important;
  display: none !important;
}

/* 2) Hide Phone column (matches your preview) */
.table-responsive > table.listing-table tbody tr td:nth-child(7){
  display: none !important;
}

/* 3) Ensure card layout is: Photo | Content (stacked lines) */
.table-responsive > table.listing-table tbody tr{
  display: grid !important;
  grid-template-columns: 108px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
}

/* Photo cell */
.table-responsive > table.listing-table tbody tr td:first-child{
  grid-column: 1;
}

/* Content column = Name + Specialty + Location + Button */
.table-responsive > table.listing-table tbody tr td:nth-child(2),
.table-responsive > table.listing-table tbody tr td:nth-child(3),
.table-responsive > table.listing-table tbody tr td:nth-child(4),
.table-responsive > table.listing-table tbody tr td:nth-child(5),
.table-responsive > table.listing-table tbody tr td:nth-child(6){
  grid-column: 2;
}

/* Name */
.table-responsive > table.listing-table tbody tr td:nth-child(2){
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  margin: 0;
  padding: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Specialty under name */
.table-responsive > table.listing-table tbody tr td:nth-child(3){
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #6b6b7a;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* 4) Location as ONE line: City, State Zip */
.table-responsive > table.listing-table tbody tr td:nth-child(4),
.table-responsive > table.listing-table tbody tr td:nth-child(5),
.table-responsive > table.listing-table tbody tr td:nth-child(6){
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px;
  line-height: 1.2;
  color: #525266;
  font-weight: 600;
}

.table-responsive > table.listing-table tbody tr td:nth-child(4){
  margin-top: 8px !important;
  display: inline-block !important; /* gives us the line break before location */
}

/* punctuation */
.table-responsive > table.listing-table tbody tr td:nth-child(4)::after{ content: ", "; }
.table-responsive > table.listing-table tbody tr td:nth-child(5)::after{ content: " "; }

/* 5) Style the existing "View Profile" link (inside the Name cell) as a button */
.table-responsive > table.listing-table tbody tr td:nth-child(2) a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid rgba(142,107,209,.35);
  background: rgba(142,107,209,.10);
  color: #3b2a63 !important;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
  text-decoration: none !important;
}

.table-responsive > table.listing-table tbody tr td:nth-child(2) a:hover{
  background: rgba(142,107,209,.16);
  border-color: rgba(142,107,209,.45);
}

/* Mobile tighten */
@media (max-width: 640px){
  .table-responsive > table.listing-table tbody tr{
    grid-template-columns: 96px minmax(0, 1fr);
    padding: 14px;
  }
  .table-responsive > table.listing-table tbody tr td:first-child img{
    width: 84px !important;
    height: 84px !important;
  }
  .table-responsive > table.listing-table tbody tr td:nth-child(2){
    font-size: 17px;
  }
}