/* =========================================================
   MSSL v2 Styling
   Namespace: mssl2-*
   ========================================================= */

.mssl2-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 16px 40px;
}

.mssl2-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}

@media (min-width: 920px){
  .mssl2-grid--top{
	grid-template-columns: 1.25fr .75fr;
	align-items: start;
  }
  .mssl2-grid--mid{
	grid-template-columns: 1fr;
  }
}

.mssl2-card{
  background:#fff;
  border:1px solid #231f20;
  border-radius:14px;
  box-shadow: none;
  overflow:hidden;
}

.mssl2-card__hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid #275e96;
  background: #275e96;
}

.mssl2-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: "Outfit", sans-serif;
  letter-spacing:.04em;
  font-weight:600; /* lighter per request */
  margin:0;
  font-size: 18px;
  text-transform: uppercase;
  color:#fff;
}

.mssl2-title-b{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: "Outfit", sans-serif;
  letter-spacing:.04em;
  font-weight:300; /* lighter per request */
  margin:0;
  font-size: 18px;
  text-transform: uppercase;
  color:#231f20;
}

.mssl2-ico{
  display:inline-block;
  width:18px;
  text-align:center;
}
.mssl2-ico::before{
  font-family: "Font Awesome 7 Pro", "Font Awesome 7 Free";
  font-weight:900;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak:never;
  content:"";
}
.mssl2-ico[data-ico="team"]::before{ content:"\e6d7"; }
.mssl2-ico[data-ico="pay"]::before{ content:"\f09d"; }
.mssl2-ico[data-ico="waiver"]::before{ content:"\f56c"; }
.mssl2-ico[data-ico="tools"]::before{ content:"\e533"; }
.mssl2-ico[data-ico="phone"]::before{ content:"\f3cd"; }
.mssl2-ico[data-ico="email"]::before{ content:"\e10c"; }
.mssl2-ico[data-ico="x"]::before{ content:"\f00d"; }
.mssl2-ico[data-ico="download"]::before{ content:"\f56f"; }
.mssl2-ico[data-ico="users"]::before{ content:"\f00d"; }
.mssl2-ico[data-ico="plus"]::before{ content:"\e7ab"; }
.mssl2-ico[data-ico="search"]::before{ content:"\f002"; }
.mssl2-ico[data-ico="play-on"]::before{ content:"\f70c"; }

.mssl2-card__bd{ padding: 14px 16px; }

.mssl2-kv{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  padding:8px 0;
}
.mssl2-kv + .mssl2-kv{ border-top:1px dashed rgba(0,0,0,.10); }

.mssl2-k{ color: rgba(0,0,0,.65); font-size:15px; }
.mssl2-v{ color: rgba(0,0,0,.85); font-weight:600; font-size:15px; }

.mssl2-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.mssl2-pill--good{ background: rgba(46,125,50,.12); color:#2e7d32; }
.mssl2-pill--bad{ background: rgba(183,28,28,.10); color:#b71c1c; }
.mssl2-pill--info{ background: rgba(24,98,175,.12); color:#1a63af; }

.mssl2-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  font-weight:400;
  letter-spacing:.03em;
  text-decoration:none !important;
  white-space:nowrap;
}
.mssl2-btn:link,.mssl2-btn:visited{ color:#fff; }

.mssl2-btn--blue{ 
	background:#1a63af; 
	color:#fff !important; 
	font-family: "Outfit", sans-serif;
    font-weight: 700;
	font-size: 20px;
	text-transform: uppercase;
}

.mssl2-btn--blue:hover{ background: #231f20; }

.mssl2-btn--danger{ 
	background:#8b2d2d; 
	color:#fff !important; 
	font-family: "Outfit", sans-serif;
	font-size: 20px;
	text-transform: uppercase;
}

.mssl2-btn--danger:hover{ filter:brightness(.95) !important; }

.mssl2-btn--good{ 
  background:#2e7d32; 
  color:#fff !important; 
  font-family: "Outfit", sans-serif;
  font-size: 20px;
  text-transform: uppercase;
}

.mssl2-btn--good:hover{ filter:brightness(.95) !important; }

.mssl2-btn--ghost{
  background: rgba(24,98,175,.08);
  color:#1a63af !important;
  border:1px solid rgba(24,98,175,.28);
}
.mssl2-btn--ghost:hover{ background: rgba(24,98,175,.12) !important; }

.mssl2-btn--wide{ width:100%; }

.mssl2-input{
  width:100%;
  padding:12px 12px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:12px;
  font-weight:700;
  text-align:center;
}

.mssl2-actions{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  margin-top:12px;
}

.mssl2-actions--2{
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 480px){
  .mssl2-actions--2{ grid-template-columns: 1fr; }
}

.mssl2-note{
  margin-top:10px;
  color: rgba(0,0,0,.65);
  font-size:15px;
  line-height:1.35;
}

.mssl2-headerCard .mssl2-card__bd{
  display:grid;
  gap:10px;
}
.mssl2-teamName{
  font-family: "Outfit", sans-serif;
  font-size:22px;
  letter-spacing:.02em;
  margin:0;
  color:#0b2238;
}
.mssl2-leagueLine{
  margin: 0px 0px !important;
  color: rgba(0,0,0,.70);
  font-size:14px;
}

/* =========================================================
   Roster + Payments Table (modern responsive)
   - Desktop: real table
   - Mobile: row cards
   ========================================================= */

.mssl2-tableWrap{ overflow:auto; }
.mssl2-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width: 760px;
}
.mssl2-table thead th{
  text-align:center;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: rgba(255,255,255,.92);
  background:#1a63af;
  padding:12px 12px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.mssl2-table thead .mssl2-tableTitle th{
  text-align:center;
  font-family: "Outfit", sans-serif;
  font-size:18px;
  font-weight: 500;
  padding:14px 12px;
  border-bottom: 3px solid #fff;
  border-radius: 14px;
}
.mssl2-table tbody td{
  padding:12px 7px;
  border-bottom:1px solid rgba(0,0,0,.08);
  vertical-align:top;
  font-size:14px;
}
.mssl2-table tbody tr:hover td{ background: rgba(24,98,175,.04); }

.mssl2-payCell{
  display:grid;
  gap:4px;
  font-size:13px;
}
.mssl2-payLine{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.mssl2-payLabel{ font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:11px; }
.mssl2-payAmt{ font-weight:800; }
.mssl2-payCell.is-good .mssl2-payLabel{ color:#2e7d32; }
.mssl2-payCell.is-bad  .mssl2-payLabel{ color:#b71c1c; }
.mssl2-paySub{ color: rgba(0,0,0,.65); font-size:12px; }

.mssl2-removeBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(183,28,28,.35);
  background: rgba(183,28,28,.08);
  color:#b71c1c;
  cursor:pointer;
}
.mssl2-removeBtn:hover{ background: rgba(183,28,28,.12); }

/* Mobile row cards */
@media (max-width: 860px){
  .mssl2-table{
	min-width: 0;
  }
  .mssl2-table thead{ display:none; }
  .mssl2-table, .mssl2-table tbody, .mssl2-table tr, .mssl2-table td{
	display:block;
	width:100%;
  }
  .mssl2-table tbody tr{
	border:1px solid rgba(0,0,0,.10);
	border-radius:14px;
	overflow:hidden;
	margin-bottom:12px;
	background:#fff;
	box-shadow: 0 6px 18px rgba(0,0,0,.06);
  }
  .mssl2-table tbody td{
	border-bottom:1px solid rgba(0,0,0,.08);
	padding:12px 12px;
  }
  .mssl2-table tbody td:last-child{ border-bottom:0; }

  .mssl2-mRow{
	display:grid;
	grid-template-columns: 22px 1fr;
	gap:10px;
	align-items:start;
  }
  .mssl2-mLabel{
	padding-top:2px;
  }
  .mssl2-mVal{
	font-weight:700;
	color: rgba(0,0,0,.82);
	word-break:break-word;
  }
  .mssl2-mSub{
	margin-top:4px;
	font-size:12px;
	font-weight:600;
	color: rgba(0,0,0,.65);
  }
  .mssl2-actionsCell{
	display:flex;
	justify-content:flex-end;
  }
}

.mssl2-roster-title{ display:none; }
  
  @media (max-width: 640px){
	.mssl2-roster-title{
	  display:block;
	  margin: 10px 0 8px;
	  font-family:"Outfit", sans-serif;
	  text-transform:uppercase;
	  text-align: center;
	  letter-spacing:.06em;
	  font-size:18px;
	  font-weight: 500;
	  background-color: #1a63af;
	  color: #fff;
	  border-radius: 3px;
	  padding: 10px 0px;
	}
  }
  
  .mssl2-paySepWrap{
	position: relative;
	margin: 14px 0 10px;
	text-align: center;
  }
  
  .mssl2-paySepWrap:before{
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:50%;
	height:1px;
	background: rgba(0,0,0,.12);
	transform: translateY(-50%);
  }
  
  .mssl2-paySepWrap span{
	position: relative;
	display:inline-block;
	padding: 0 10px;
	background: #fff; /* assumes your card body is white */
	font-size: 16px;
	color: rgba(0,0,0,.72);
  }
  
  /* =========================================================
	 MSSL2 – Add Players / Import Roster (override legacy)
	 Scope: only inside the new template wrapper
	 ========================================================= */
  
  /* ---------- Add Players form (kill legacy widths/padding) ---------- */
  .mssl2-wrap #add-players-form .player-input-wrapper{
	padding: 0 !important;
	display: flex !important;
	gap: 10px !important;
	align-items: center !important;
	margin-top: 10px !important;
  }
  
  .mssl2-wrap #add-players-form .player-input-wrapper input{
	width: auto !important;      /* overrides legacy 50% */
	flex: 1 1 auto !important;
	min-width: 0 !important;
  }
  
  .mssl2-wrap #add-players-form .player-input-wrapper .remove-line{
	cursor: pointer !important;
	font-weight: 300 !important;
	font-size: 18px !important;
	margin-left: 0 !important;
	text-decoration: none !important;
	line-height: 1 !important;
	width: 32px !important;
	height: 32px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 8px !important;
	color: rgba(0,0,0,.65) !important;
	background: rgba(0,0,0,.06) !important;
  }
  
  .mssl2-wrap #add-players-form .player-input-wrapper .remove-line:hover{
	background: rgba(0,0,0,.10) !important;
	color: rgba(0,0,0,.85) !important;
  }
  
  .mssl2-wrap #add-players-form #add-player-button{
	margin: 0 !important; /* legacy adds 15px 0; we control spacing via mssl2-actions */
  }
  
  /* If legacy wrappers exist, neutralize spacing */
  .mssl2-wrap #add-players-form .submit-players-wrapper{
	padding: 0 !important;
  }
  
  
  /* ---------- Import Old Roster (override legacy ID rules) ---------- */
  
  /* Wrapper should just behave like a normal block inside card */
  .mssl2-wrap #previous_rosters_wrapper{
	margin-top: 0 !important;
	transition: none !important;
	user-select: none !important;
  }
  
  /* Legacy toggles wrapper styles via .in_view — keep class, change visuals */
  .mssl2-wrap #previous_rosters_wrapper.in_view{
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
  }
  
  /* Your new template uses a real button now.
	 Override the old "blue pill" ID styles so it matches mssl2 buttons. */
  .mssl2-wrap #toggle_previous_rosters{
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
  
	padding: 12px 14px !important;
	border-radius: 10px !important;
  
	background: #1a63af !important; /* brand */
	color: #fff !important;
  
	font-family: "Outfit", sans-serif !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
	font-size: 13px !important;
  
	border: 0 !important;
	cursor: pointer !important;
  }
  
  .mssl2-wrap #toggle_previous_rosters:hover{
	background: #0B4A75 !important; /* brand dark */
	color: #fff !important;
  }
  
  /* The span swap logic stays the same; just ensure it doesn't get weird spacing */
  .mssl2-wrap #toggle_previous_rosters span{
	display: inline !important;
  }
  
  /* Roster list container */
  .mssl2-wrap #previous_rosters{
	display: none; /* JS will show */
	margin-top: 12px !important;
  }
  
  /* Individual previous team tiles: make them "cards" */
  .mssl2-wrap #previous_rosters .previous_team{
	display: block !important; /* override legacy inline-block tiles */
	margin: 0 0 10px 0 !important;
	padding: 12px !important;
  
	border-radius: 12px !important;
	border: 1px solid rgba(0,0,0,.12) !important;
  
	background: #fff !important;
	color: #231f20 !important;
  
	text-align: left !important;
	cursor: pointer !important;
  }
  
  .mssl2-wrap #previous_rosters .previous_team:hover{
	border-color: rgba(24,98,175,.55) !important;
	background: rgba(24,98,175,.06) !important;
  }
  
  /* Typography inside tile */
  .mssl2-wrap #previous_rosters .previous_team .team_name{
	font-family: "Outfit", sans-serif !important;
	text-transform: uppercase !important;
	font-size: 14px !important;
	letter-spacing: .06em !important;
  }
  
  .mssl2-wrap #previous_rosters .previous_team .team_league{
	margin-top: 4px !important;
	font-size: 11px !important;
	opacity: .75 !important;
	font-family: 'Open Sans', serif;
  }
  
  /* Mobile: keep inputs full width and tiles comfortable */
  @media (max-width: 640px){
	.mssl2-wrap #add-players-form .player-input-wrapper{
	  gap: 8px !important;
	}
  }
  
  /* =========================================================
	 Import roster toggle button label swap (v2)
	 ========================================================= */
  
  /* Default state: show "Import", hide "Close" */
  #previous_rosters_wrapper #toggle_previous_rosters .not_in_view{
	display: inline !important;
  }
  #previous_rosters_wrapper #toggle_previous_rosters .in_view{
	display: none !important;
  }
  
  /* Open state (.in_view on wrapper): show "Close", hide "Import" */
  #previous_rosters_wrapper.in_view #toggle_previous_rosters .not_in_view{
	display: none !important;
  }
  #previous_rosters_wrapper.in_view #toggle_previous_rosters .in_view{
	display: inline !important;
  }
  
  /* =========================================================
   Simplified Roster View on Mobile (Add Players + Single League)
   ========================================================= */
  
  @media (max-width: 640px){
  
	/* Hide headers */
	.mssl2-table thead{
	  display:none !important;
	}
  
	/* Each row becomes a 2-row grid */
	.mssl2-table tbody tr{
	  display:grid !important;
	  grid-template-columns: 1fr auto;
	  grid-template-areas:
		"name status"
		"email status";
	  gap: 6px 10px;
	  padding: 12px 10px;
	  border: 1px solid rgba(0,0,0,.12);
	  border-radius: 12px;
	  margin-bottom: 10px;
	  background: #fff;
	}
  
	/* Remove “table cell” feel */
	.mssl2-table tbody td{
	  border: 0 !important;
	  padding: 0 !important;
	}
  
	.mssl2-roster-td--name{
	  grid-area: name;
	  font-weight: 600;
	  line-height: 1.2;
	}
  
	.mssl2-roster-td--email{
	  grid-area: email;
	  font-size: 13px;
	  opacity: .75;
	  line-height: 1.2;
	}
  
	.mssl2-roster-td--status{
	  grid-area: status;
	  align-self: center;
	  justify-self: end;
	  white-space: nowrap;
	}
  
	/* Optional: prevent long emails from wrecking layout */
	.mssl2-roster-td--email a{
	  display:inline-block;
	  max-width: 100%;
	  overflow:hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	}
  }
  
  /* My Teams card grid */
  .mssl2-grid--teams{
    display:grid;
    grid-template-columns: 1fr;
    gap:12px;
  }
  
  @media (min-width: 720px){
    .mssl2-grid--teams{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  
  @media (min-width: 1024px){
    .mssl2-grid--teams{
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  
  /* =========================================================
     MSSL2 – My Teams Widget (MINI)
     Small reference block for registration page
     ========================================================= */
  
  .mssl2-myTeamsWidget--mini{
    max-width: 1100px;
    margin: 0 auto 14px;
    padding: 8px 10px;
    border: 1px solid #231f20;
    border-radius: 12px;
    background: rgba(255,255,255,.86);
  }
  
  .mssl2-miniSection + .mssl2-miniSection{
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0,0,0,.12);
  }
  
  .mssl2-miniSection__hd{
    display:flex;
    align-items:center;
    gap:8px;
    font-family: "Outfit", sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
    font-weight: 300;
    color: rgba(0,0,0,.70);
    margin: 0 0 6px;
  }
  
  .mssl2-miniGrid{
    display:grid;
    grid-template-columns: 1fr;
    gap:6px;
  }
  
  @media (min-width: 860px){
    .mssl2-miniGrid{
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap:8px;
    }
  }
  
  .mssl2-miniTeam{
    border: 1px solid #231f20;
    border-radius: 10px;
    background:#fff;
    padding: 8px 10px;
  }
  
  .mssl2-miniTeam__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  
  .mssl2-miniTeam__name{
    font-family: "Outfit", sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 300;
    color: rgba(0,0,0,.85);
    line-height: 1.2;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  
  .mssl2-miniTeam__meta{
    display:flex;
    align-items:center;
    gap:8px;
    flex: 0 0 auto;
  }
  
  .mssl2-miniTeam__sub{
    margin-top: 4px;
    font-size: 11px;
    color: rgba(0,0,0,.62);
    line-height: 1.2;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .mssl2-miniTeam__link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-decoration: none !important;
    color: #1a63af;
    font-weight: 700;
  }
  
  .mssl2-miniTeam__link:hover{
    color:#0B4A75;
  }
  
  /* Make pills smaller inside mini widget */
  .mssl2-myTeamsWidget--mini .mssl2-pill{
    padding: 4px 8px;
    font-size: 10px;
    letter-spacing: .06em;
  }
  
  /* Mini button variant (used in My Teams widget) */
  .mssl2-btn--mini{
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 11px;
    letter-spacing: .06em;
    font-weight: 400;
    text-transform: uppercase;
  }
  
  .mssl2-myTeamsWidget--mini .mssl2-card__bd{
    padding: 10px 12px;
  }
  
  .mssl2-pillMob { display:none; }
  
  @media (max-width: 640px){
    .mssl2-pillDesk { display:none; }
    .mssl2-pillMob  { display:inline; text-align: center; }
    }
  }
  
  /* =========================================================
   IN-LINE ROSTER EDITING ON TEAM DETAILS
   ========================================================= */
  .mssl2-rosterInline .mssl2-rosterInline__removeBtn{ opacity:.35; pointer-events:none; }
  
  .mssl2-rosterInline.is-editing .mssl2-rosterInline__removeBtn{ opacity:1; pointer-events:auto; }
  
  /* =========================================================
     Import Previous Team card visibility fix (scoped)
     ========================================================= */
  
  #mssl2-previous_rosters .mssl2-previous_team{
   background: #1a63af !important;
   color: #fff !important;
  }
  
#mssl2-previous_rosters .mssl2-previous_team:hover{
   background: #231f20 !important;
   color: #fff !important;
  }
  
/* Remove buttons should NOT look clickable unless edit mode is active */
  .mssl2-rosterInline .mssl2-rosterInline__removeBtn {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
  }
  
  /* When editing, enable */
  .mssl2-rosterInline.is-editing .mssl2-rosterInline__removeBtn {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
  }
  
  /* Optional: kill any hover effects while not editing */
  .mssl2-rosterInline .mssl2-rosterInline__removeBtn:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .mssl2-rosterInline.is-editing .mssl2-rosterInline__removeBtn:hover {
    /* let your normal hover styling apply, or remove this block entirely */
  }
  
  /* =========================================================
   "SAVING" styles
   ========================================================= */
  
  .mssl2-btn.is-saving,
  .mssl2-btn:disabled{
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
  }
  
  .mssl2-btn.is-saving::after{
    content: " ";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: mssl2spin .8s linear infinite;
  }
  
  @keyframes mssl2spin{
    to { transform: rotate(360deg); }
  }
  
  /* =========================================================
   IN-LINE EDIT STATUS BAR
   ========================================================= */
  
  .mssl2-rosterInline__status {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
  }
  
  .mssl2-rosterInline__status.is-good {
    background: #e8f5ee;
    color: #1b6e3c;
  }
  
  .mssl2-rosterInline__status.is-bad {
    background: #fdeaea;
    color: #8a1f1f;
  }
  
  .mssl2-rosterInline__status.is-info {
    background: #eef3f9;
    color: #274b7a;
  }
  
  /* =========================================================
   NOT ACTIVE ROSTER STATUS
   ========================================================= */
  
  /* Inactive/removed roster row */
  .mssl2-row--inactive {
    opacity: 0.72;
  }
  
  .mssl2-row--inactive td {
    color: rgba(0,0,0,.55);
  }
  
  /* Optional: keep links readable but muted */
  .mssl2-row--inactive a {
    color: inherit;
    pointer-events: none; /* remove if you still want mailto/tel clickable */
    text-decoration: none;
  }
  
  /* Yellow REMOVED pill */
  .mssl2-statusPill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .06em;
    font-size: 12px;
    line-height: 1;
    margin-top: 6px;
    text-transform: uppercase;
  }
  
  .mssl2-statusPill--inactive {
    background: rgba(245, 158, 11, 0.18); /* yellow-ish */
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: rgba(120, 53, 15, 0.95);       /* brown text */
  }
  
  .mssl2-pill--warn{
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: rgba(120, 53, 15, 0.95);
  }