/* File purpose (v27.08.11.5.241): Documents styles for the notification center unified page/module. CSS has no application functions; selectors and responsive rules control presentation only. Documentation only; selector behavior and values are unchanged. */

/* v27.08.11.5.119 - Notification Center Container Redesign
   Approved container-only UI. Existing Houston Doctors navigation is untouched. */

body[data-page="doctor-notifications"] .landing-main,
body[data-page="staff-notifications"] .landing-main{
  background:linear-gradient(180deg,#f8fbff 0%,#eff7ff 100%) !important;
  padding-top:24px !important;
  padding-bottom:34px !important;
}

.notification-center-page{
  width:100%;
}

.notification-center-shell{
  width:min(1500px,calc(100% - 38px)) !important;
  max-width:1500px !important;
  margin:0 auto !important;
  padding:0 !important;
}

/* Header */
.notification-center-heading{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:32px !important;
  margin:0 0 24px !important;
}

.notification-center-title-wrap{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  min-width:0;
}

.notification-center-title-icon{
  width:66px !important;
  height:66px !important;
  flex:0 0 66px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  color:#0a6cf2 !important;
  background:#e4f0ff !important;
}

.notification-center-title-icon svg{
  width:32px !important;
  height:32px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.notification-center-title-wrap h1{
  margin:0 !important;
  color:#10213d !important;
  font-size:30px !important;
  line-height:1.08 !important;
  font-weight:800 !important;
  letter-spacing:-.7px !important;
}

.notification-center-title-wrap p{
  margin:7px 0 0 !important;
  color:#657792 !important;
  font-size:12px !important;
  line-height:1.4 !important;
}

/* Summary */
.notification-center-summary{
  display:grid !important;
  grid-template-columns:repeat(3,165px) !important;
  gap:14px !important;
  flex:0 0 auto;
}

.notification-center-summary article{
  width:auto !important;
  height:78px !important;
  min-height:78px !important;
  margin:0 !important;
  padding:11px 14px !important;
  display:grid !important;
  grid-template-columns:42px 1fr !important;
  grid-template-rows:1fr 1fr !important;
  column-gap:11px !important;
  align-items:center !important;
  border:1px solid #dce6f1 !important;
  border-radius:13px !important;
  background:#fff !important;
  box-shadow:0 8px 24px rgba(42,78,117,.06) !important;
}

.notification-center-summary .summary-icon{
  grid-row:1/3 !important;
  width:40px !important;
  height:40px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:11px !important;
}

.notification-center-summary .summary-icon svg{
  width:21px !important;
  height:21px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.notification-summary-card--unread .summary-icon{
  color:#0d70f4 !important;
  background:#edf5ff !important;
}
.notification-summary-card--telecare .summary-icon{
  color:#7250dd !important;
  background:#f0eaff !important;
}
.notification-summary-card--critical .summary-icon{
  color:#df4b58 !important;
  background:#fff0f2 !important;
}
.notification-summary-card--today .summary-icon{
  color:#149359 !important;
  background:#eaf7f0 !important;
}

.notification-center-summary strong{
  align-self:end !important;
  color:#10213d !important;
  font-size:22px !important;
  line-height:1 !important;
  font-weight:800 !important;
}
.notification-center-summary small{
  align-self:start !important;
  color:#687a93 !important;
  font-size:10px !important;
  line-height:1.2 !important;
}

/* Main container */
.notification-center-card{
  overflow:hidden !important;
  border:1px solid #dce6f1 !important;
  border-radius:15px !important;
  background:#fff !important;
  box-shadow:0 11px 30px rgba(45,81,120,.06) !important;
}

/* Toolbar */
.notification-center-toolbar{
  min-height:92px !important;
  padding:20px 20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  flex-wrap:wrap !important;
  background:#fff !important;
  border-bottom:0 !important;
}

.notification-center-tabs{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  flex-wrap:wrap !important;
}

.notification-center-tabs button{
  min-width:0 !important;
  height:40px !important;
  padding:0 14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  border:1px solid #d5e1ed !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#465e7d !important;
  font-size:11px !important;
  font-weight:700 !important;
  line-height:1 !important;
  box-shadow:none !important;
}

.notification-center-tabs button:hover{
  border-color:#a3c2f4 !important;
  background:#f9fbff !important;
}

.notification-center-tabs button.active{
  color:#fff !important;
  border-color:#0d6cf3 !important;
  background:linear-gradient(180deg,#2580ff 0%,#0a68ef 100%) !important;
  box-shadow:0 6px 14px rgba(13,108,243,.22) !important;
}

.notification-filter-icon{
  width:17px;
  height:17px;
  display:inline-grid;
  place-items:center;
  flex:0 0 17px;
}
.notification-filter-icon svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.notification-center-tools{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  margin-left:auto;
}

.notification-center-search{
  width:290px !important;
  min-width:290px !important;
  height:40px !important;
  padding:0 12px !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  border:1px solid #d5e1ed !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#68809e !important;
}

.notification-center-search:focus-within{
  border-color:#86aff2 !important;
  box-shadow:0 0 0 3px rgba(13,108,243,.07) !important;
}

.notification-search-icon{
  width:16px;
  height:16px;
  display:grid;
  place-items:center;
  flex:0 0 16px;
}
.notification-search-icon svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
}

.notification-center-search input{
  width:100% !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:#273e5d !important;
  font-size:11px !important;
}

.notification-center-mark-all{
  height:40px !important;
  padding:0 15px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  border:1px solid #0b6cf2 !important;
  border-radius:8px !important;
  background:linear-gradient(180deg,#247eff,#0968ef) !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:800 !important;
  box-shadow:0 5px 13px rgba(13,108,243,.17) !important;
}
.notification-center-mark-all:disabled{
  opacity:.48 !important;
  box-shadow:none !important;
}
.notification-button-icon{
  width:15px;
  height:15px;
  display:grid;
  place-items:center;
}
.notification-button-icon svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Inner framed table */
.notification-center-table-frame{
  margin:0 18px !important;
  overflow:hidden !important;
  border:1px solid #dce6f0 !important;
  border-radius:9px !important;
  background:#fff !important;
}

.notification-center-table-wrap{
  overflow:auto !important;
}

.notification-center-table{
  width:100% !important;
  min-width:1040px !important;
  border-collapse:collapse !important;
}

.notification-center-table th{
  height:43px !important;
  padding:0 16px !important;
  vertical-align:middle !important;
  background:#f4f8fd !important;
  border-bottom:1px solid #dce6f0 !important;
  color:#526580 !important;
  text-align:left !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.045em !important;
  text-transform:uppercase !important;
}

.notification-center-table td{
  height:66px !important;
  padding:10px 16px !important;
  vertical-align:middle !important;
  border-bottom:1px solid #e6edf5 !important;
  background:#fff !important;
  color:#263c59 !important;
  font-size:11px !important;
}

.notification-center-table tbody tr:last-child td{
  border-bottom:0 !important;
}
.notification-center-table tbody tr:hover td{
  background:#fafcff !important;
}
.notification-center-table tbody tr.is-unread td{
  background:#fcfdff !important;
}

/* Unread dot */
.notification-center-table tbody tr.is-unread td:first-child{
  position:relative !important;
}
.notification-center-table tbody tr.is-unread td:first-child::before{
  content:"" !important;
  position:absolute !important;
  left:9px !important;
  top:50% !important;
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  background:#0b70f5 !important;
  transform:translateY(-50%) !important;
}

/* Better column proportions */
.notification-center-table th:nth-child(1),
.notification-center-table td:nth-child(1){width:9% !important}
.notification-center-table th:nth-child(2),
.notification-center-table td:nth-child(2){width:34% !important}
.notification-center-table th:nth-child(3),
.notification-center-table td:nth-child(3){width:20% !important}
.notification-center-table th:nth-child(4),
.notification-center-table td:nth-child(4){width:10% !important}
.notification-center-table th:nth-child(5),
.notification-center-table td:nth-child(5){width:12% !important}
.notification-center-table th:nth-child(6),
.notification-center-table td:nth-child(6){width:15% !important}

/* Type icons */
.staff-notification-type,
.doctor-notification-type{
  padding-left:8px !important;
}
.staff-notification-type-icon,
.doctor-notification-type-icon{
  width:38px !important;
  height:38px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
}
.staff-notification-type-icon svg,
.doctor-notification-type-icon svg{
  width:18px !important;
  height:18px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.staff-notification-type-icon.telecare{color:#7450de !important;background:#f0eaff !important}
.staff-notification-type-icon.nurse{color:#148e57 !important;background:#e9f7ef !important}
.staff-notification-type-icon.patient{color:#0c70f3 !important;background:#eaf3ff !important}
.staff-notification-type-icon.system{color:#61738b !important;background:#f1f4f8 !important}
.doctor-notification-type-icon.message{color:#0c70f3 !important;background:#eaf3ff !important}
.doctor-notification-type-icon.order{color:#d17a1f !important;background:#fff3e5 !important}
.doctor-notification-type-icon.sbar{color:#7450de !important;background:#f0eaff !important}
.doctor-notification-type-icon.symptom,
.doctor-notification-type-icon.clinical{color:#d54a57 !important;background:#fff0f2 !important}
.doctor-notification-type-icon.fall{color:#d17a1f !important;background:#fff3e5 !important}

/* Typography */
.staff-notification-copy strong,
.doctor-notification-copy strong{
  display:block !important;
  color:#112743 !important;
  font-size:11.7px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}
.staff-notification-copy small,
.doctor-notification-copy small{
  display:block !important;
  margin-top:4px !important;
  max-width:470px !important;
  color:#647793 !important;
  font-size:10.5px !important;
  line-height:1.35 !important;
}
.staff-notification-source strong,
.doctor-notification-source strong{
  display:block !important;
  color:#15304e !important;
  font-size:11.5px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}
.staff-notification-source small,
.doctor-notification-source small{
  display:block !important;
  margin-top:3px !important;
  color:#70819a !important;
  font-size:10px !important;
  line-height:1.2 !important;
}

/* Status pills */
.staff-notification-pill,
.doctor-notification-pill{
  min-height:26px !important;
  padding:4px 9px !important;
  display:inline-flex !important;
  align-items:center !important;
  border-radius:6px !important;
  font-size:9.8px !important;
  font-weight:800 !important;
}
.staff-notification-pill.unread,
.doctor-notification-pill.unread{color:#0870f4 !important;background:#e8f2ff !important}
.staff-notification-pill.read,
.doctor-notification-pill.read{color:#168c50 !important;background:#e8f7ee !important}

/* Actions */
.staff-notification-actions,
.doctor-notification-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.staff-notification-open,
.doctor-notification-open{
  width:136px !important;
  min-width:136px !important;
  max-width:136px !important;
  flex:0 0 136px !important;
  height:34px !important;
  padding:0 10px !important;
  border:1px solid #80adf6 !important;
  border-radius:7px !important;
  background:#fff !important;
  color:#096df3 !important;
  font-size:10px !important;
  font-weight:800 !important;
}
.staff-notification-read,
.doctor-notification-read{
  width:34px !important;
  height:34px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid #dae4ee !important;
  border-radius:7px !important;
  background:#fff !important;
  color:#55708f !important;
}
.staff-notification-read svg,
.doctor-notification-read svg{
  width:16px !important;
  height:16px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.staff-notification-read:disabled,
.doctor-notification-read:disabled{
  opacity:.32 !important;
}

/* Footer exactly as approved: left count / centered pager / right selector */
.notification-center-footer{
  min-height:62px !important;
  padding:11px 18px 13px !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  gap:16px !important;
  background:#fff !important;
  color:#6d7f98 !important;
  font-size:10.5px !important;
}

.notification-center-result-count{
  justify-self:start !important;
}
.notification-center-pagination{
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}

.staff-notification-page-button,
.doctor-notification-page-button{
  min-width:31px !important;
  height:31px !important;
  padding:0 8px !important;
  border:1px solid #d7e2ed !important;
  border-radius:6px !important;
  background:#fff !important;
  color:#556b87 !important;
  font-size:10px !important;
}
.staff-notification-page-button.active,
.doctor-notification-page-button.active{
  color:#fff !important;
  border-color:#0b6df4 !important;
  background:linear-gradient(180deg,#247eff,#0968ef) !important;
  box-shadow:0 4px 10px rgba(13,108,243,.16) !important;
}

.notification-center-per-page{
  position:relative !important;
  justify-self:end !important;
  display:block !important;
}
.notification-center-per-page select{
  width:108px !important;
  height:32px !important;
  padding:0 28px 0 11px !important;
  border:1px solid #d7e2ed !important;
  border-radius:7px !important;
  background:#fff !important;
  color:#5e718b !important;
  font-size:10px !important;
  outline:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
.notification-center-per-page select:focus{
  border-color:#8bb3f2 !important;
  box-shadow:0 0 0 3px rgba(13,108,243,.06) !important;
}
.notification-center-select-chevron{
  position:absolute;
  right:10px;
  top:50%;
  color:#71849c;
  font-size:13px;
  line-height:1;
  pointer-events:none;
  transform:translateY(-55%);
}

@media(max-width:1150px){
  .notification-center-heading{
    align-items:flex-start !important;
    flex-direction:column !important;
  }
  .notification-center-summary{
    width:100% !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .notification-center-tools{
    width:100% !important;
  }
  .notification-center-search{
    flex:1 !important;
  }
}

@media(max-width:760px){
  .notification-center-shell{
    width:calc(100% - 20px) !important;
  }
  .notification-center-title-icon{
    width:54px !important;
    height:54px !important;
    flex-basis:54px !important;
  }
  .notification-center-title-wrap h1{
    font-size:24px !important;
  }
  .notification-center-summary{
    grid-template-columns:1fr !important;
  }
  .notification-center-summary article{
    height:68px !important;
    min-height:68px !important;
  }
  .notification-center-toolbar{
    padding:14px !important;
  }
  .notification-center-tabs{
    width:100% !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
  }
  .notification-center-tabs button{
    flex:0 0 auto !important;
  }
  .notification-center-tools{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  .notification-center-search{
    width:100% !important;
    min-width:0 !important;
  }
  .notification-center-table-frame{
    margin:0 10px !important;
  }
  .notification-center-footer{
    grid-template-columns:1fr !important;
    justify-items:center !important;
  }
  .notification-center-result-count,
  .notification-center-pagination,
  .notification-center-per-page{
    justify-self:center !important;
  }
}

/* v27.08.11.5.120 - centered Notification Center row check icon */
.staff-notification-read,
.doctor-notification-read{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  line-height:0 !important;
  text-align:center !important;
}

.staff-notification-read svg,
.doctor-notification-read svg{
  display:block !important;
  width:17px !important;
  height:17px !important;
  margin:0 !important;
  padding:0 !important;
  position:static !important;
  transform:none !important;
  flex:0 0 17px !important;
  overflow:visible !important;
}

.staff-notification-read svg path,
.doctor-notification-read svg path{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.1 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* v27.08.11.5.121 - Notification toolbar icon/alignment fix */

/* Remove legacy pseudo-icons from v5.117/v5.118.
   v5.119 already renders proper inline SVG icons in the markup. */
body[data-page="doctor-notifications"] .doctor-notification-tabs button::before,
body[data-page="staff-notifications"] .staff-notification-tabs button::before,
.notification-center-tabs button::before{
  content:none !important;
  display:none !important;
}

/* Keep each inline SVG icon to exactly one icon slot. */
.notification-center-tabs .notification-filter-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
  flex:0 0 17px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
}

.notification-center-tabs .notification-filter-icon svg{
  display:block !important;
  width:16px !important;
  height:16px !important;
  margin:0 !important;
  padding:0 !important;
  position:static !important;
  transform:none !important;
}

/* Force the complete toolbar onto a shared vertical center line. */
.notification-center-toolbar{
  display:flex !important;
  align-items:center !important;
}

.notification-center-tabs,
.notification-center-tools{
  align-items:center !important;
}

/* Exact control sizing for filters, search, and Mark All. */
.notification-center-tabs button,
.notification-center-search,
.notification-center-mark-all{
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  box-sizing:border-box !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Search box: eliminate inherited label/input baseline offsets. */
.notification-center-search{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:1 !important;
  vertical-align:middle !important;
}

.notification-center-search .notification-search-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  flex:0 0 16px !important;
  line-height:0 !important;
  margin:0 !important;
}

.notification-center-search .notification-search-icon svg{
  display:block !important;
  width:15px !important;
  height:15px !important;
  margin:0 !important;
  position:static !important;
  transform:none !important;
}

.notification-center-search input{
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  line-height:38px !important;
  vertical-align:middle !important;
}

/* Mark All contents centered to the same 40px control box. */
.notification-center-mark-all{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:1 !important;
}

.notification-center-mark-all .notification-button-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:0 !important;
  margin:0 !important;
}

.notification-center-mark-all .notification-button-icon svg{
  display:block !important;
  margin:0 !important;
  position:static !important;
  transform:none !important;
}

/* Prevent browser default label spacing from pushing the search control. */
label.notification-center-search{
  margin:0 !important;
}

/* Same baseline on narrower layouts. */
@media(max-width:1150px){
  .notification-center-tools{
    align-items:center !important;
  }
}

/* =====================================================================
   v27.09.05.64 - Full-width white Notification Center workspace
   UI-only. Applies to every shared Houston Notification Center page:
   Doctor Notification Center + Nurse/QAPI Staff Notification Center.
   No notification routes, APIs, filters, read state, or actions changed.
   ===================================================================== */
body[data-page="doctor-notifications"] .landing-main,
body[data-page="staff-notifications"] .landing-main {
  width: 100% !important;
  max-width: none !important;
  padding: 24px 0 36px !important;
  background: linear-gradient(180deg, #f6fbff 0%, #eaf6ff 100%) !important;
}

body[data-page="doctor-notifications"] .notification-center-page,
body[data-page="staff-notifications"] .notification-center-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-page="doctor-notifications"] .notification-center-shell,
body[data-page="staff-notifications"] .notification-center-shell {
  box-sizing: border-box !important;
  width: calc(100% - 26px) !important;
  max-width: 1840px !important;
  margin: 0 auto 28px !important;
  padding: 26px 26px 18px !important;
  border: 1px solid #d8e5f1 !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(39, 77, 116, .05) !important;
}

body[data-page="doctor-notifications"] .notification-center-heading,
body[data-page="staff-notifications"] .notification-center-heading {
  margin: 0 0 22px !important;
}

/* The inner notification card remains the existing functional toolbar/table
   container. This only reduces the double-card visual weight inside the new
   full-width white workspace. */
body[data-page="doctor-notifications"] .notification-center-card,
body[data-page="staff-notifications"] .notification-center-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  body[data-page="doctor-notifications"] .landing-main,
  body[data-page="staff-notifications"] .landing-main {
    padding: 12px 0 24px !important;
  }

  body[data-page="doctor-notifications"] .notification-center-shell,
  body[data-page="staff-notifications"] .notification-center-shell {
    width: calc(100% - 16px) !important;
    padding: 18px 12px 14px !important;
    border-radius: 12px !important;
  }

  body[data-page="doctor-notifications"] .notification-center-heading,
  body[data-page="staff-notifications"] .notification-center-heading {
    margin-bottom: 16px !important;
  }
}


/* =====================================================================
   v27.09.05.65 - Notification Center action-state + equal-width buttons
   Shared by Doctor, Nurse, QAPI, and Administrator conference notifications.
   ===================================================================== */
.staff-notification-open:disabled,
.doctor-notification-open:disabled,
.staff-notification-open[aria-disabled="true"],
.doctor-notification-open[aria-disabled="true"]{
  opacity:1 !important;
  border-color:#dbe4ed !important;
  background:#f2f5f8 !important;
  color:#a3afbd !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
  pointer-events:none !important;
}

@media (max-width:700px){
  .staff-notification-open,
  .doctor-notification-open{
    width:136px !important;
    min-width:136px !important;
    max-width:136px !important;
    flex-basis:136px !important;
  }
}