/* Search */
.ttt-search-wrap{display:flex;justify-content:flex-end;margin-bottom:12px}
.ttt-search{padding:10px 12px;border-radius:10px;border:none;box-shadow:0 2px 8px rgba(0,0,0,.08);width:260px; margin:0px 3px;}

/* Table */
.ttt-table{width:100%;border-collapse:separate;border-spacing:0 10px;font-family:Raleway;}
.ttt-row{background:#227171;color:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.ttt-row td{padding:0px;vertical-align:middle;border-radius:12px;}

/* Icon-only button (first column) */
.ttt-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:#79d3c1;text-decoration:none;transition:transform .08s ease, opacity .08s ease}
.ttt-icon-btn:hover{transform:translateY(-1px);opacity:.95}
.ttt-icon-btn img{max-width:24px;max-height:24px;display:block}

/* Number pill */
.ttt-num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:#144f4c;color:#fff;font-weight:700}

/* Title & description */
.ttt-title h3{font-size:20px !important;line-height:1.3; color:#fff!important;font-weight:500;}
.ttt-desc h4{color:#d5fffb!important;font-size:16px !important;line-height:1.3; }

/* Visibility: show only one button based on login */
.logged-in-only,.logged-out-only{display:none}
body.logged-in .logged-in-only{display:inline-flex !important}
body:not(.logged-in) .logged-out-only{display:inline-flex !important}




/* give each row block its own rounded container */
.ttt-table tr > td[colspan="4"] {
  padding: 0; /* remove table padding so the card fits edge-to-edge */
}

.ttt-card {
  background: #1f7a76;            /* your teal tone */
  border-radius: 10px;            /* nice rounded edges */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 0px 0px;
  overflow: hidden;
  transition: transform 0.2s ease, background 0.25s ease;
  display: block;
}

.ttt-card:hover {
  background: #238c88;            /* lighter teal on hover */
  transform: translateY(-1px);
}

/* spacing between each row card */
.ttt-table tr {
  display: table-row;
  height: auto;
  margin-bottom: 12px;
}


/* inner layout stays flexible */
.ttt-inner-table {
  width: 100%;
  border-collapse: collapse;
}

.ttt-inner-table td {
  padding: 10px 14px;
  vertical-align: middle;
  color: #fff;
}

/* scroll behaviour on mobile */
.ttt-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Align all columns on the same horizontal line */
.ttt-inner-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* ensures even column alignment */
}

/* Force each column to align vertically */
.ttt-inner-table td {
  vertical-align: middle;
  text-align: left;
  white-space: normal;
  color: #fff;
  padding: 12px 14px;
}

/* Define consistent column widths */
.ttt-inner-table td:nth-child(1) {  /* Icon */
  width: 60px;
}

.ttt-inner-table td:nth-child(2) {  /* Number */
  width: 60px;
}

.ttt-inner-table td:nth-child(3) {  /* Title */
  width: 50%; /* takes up most of the space */
}

.ttt-inner-table td:nth-child(4) {  /* Description */
  width: 35%;
}

/* Icon button */
.ttt-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #79d3c1;
  text-decoration: none;
  transition: transform .08s ease, opacity .08s ease;
}
.ttt-icon-btn:hover {
  transform: translateY(-1px);
  opacity: .95;
	background: #f7cb39;
}
.ttt-icon-btn img {
  max-width: 24px;
  max-height: 24px;
  display: block;
}

/* Number badge */
.ttt-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #144f4c;
  color: #fff;
  font-weight: 700;
}

/* Text cells */
.ttt-title {
  font-size: 16px;
  font-weight: 500;
}
.ttt-desc {
  font-size: 15px;
  color: #d5fffb;
}

/* Card wrapper */
.ttt-card {
  background: #1f7a76;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  overflow: hidden;
  transition: transform 0.2s ease, background 0.2s ease;
	border: 1px solid #63bfac;
	margin:0px;
}
.ttt-card:hover {
  background: #238c88;
  transform: translateY(-2px);
	border: 1px solid #63bfac;
}

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

.ttt-icon-btn:hover svg path {
  stroke: #0a3d39; /* your preferred hover color */
  fill: #0a3d39;
}




.ttt-icon-btn .hover-icon {
 display:none;
}

.ttt-icon-btn:hover .default-icon {
  display:none;

}

.ttt-icon-btn:hover .hover-icon {
  display:block;
 
}



/* Mobile */
@media(max-width:768px){
/*   .ttt-table,.ttt-table tbody,.ttt-table tr,.ttt-table td{display:block;width:100%} */
  .ttt-row{padding:10px}
  .ttt-row td{padding:8px 6px}
  .ttt-title{font-size:17px;margin-top:4px}
	
	/* Enable sideways scrolling on mobile */
.ttt-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
}

.ttt-table {
  width: 100%;
  min-width: 800px; /* ensures the table can scroll sideways */

}

/* Keep nice rounded rows */
.ttt-row td {
 
  vertical-align: middle;
}

/* Optional: prevent wrapping inside cells */
.ttt-row td {
  white-space: nowrap;
}

/* Allow wrapping on specific cells if needed */
.ttt-title,
.ttt-desc {
  white-space: normal;
}

	
	
	
	
	
}