/* =========================================================
   mySkilltower – new_design.css (GLOBAL)
   Target: look like your reference screenshot
   - Keep current font
   - Dark blue ONLY for table headers
   - Lime ONLY for primary actions (button-add, current pagination)
   - Radius everywhere
   - Shadows a bit more subtle
   - Bootstrap may be overridden
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* surfaces */
  --st-bg: #f6f9ff;
  --st-card: #ffffff;

  /* text */
  --st-text: #0b1b33;
  --st-muted: #5b6b84;

  /* borders & radii */
  --st-border: rgba(16, 24, 40, .10);
  --st-radius: 18px;
  --st-radius-sm: 12px;
  --st-radius-xs: 10px;

  /* shadows (decent, not too “glowy”) */
  --st-shadow: 0 10px 28px rgba(15, 23, 42, .08);
  --st-shadow-soft: 0 6px 16px rgba(15, 23, 42, .06);

  /* brand */
  --st-table-head: #022467;          /* dark blue: tables only */
  --st-table-head-text: #ffffff;

  --st-primary: #DDEE0C;             /* lime: primary actions only */
  --st-primary-text: #022467;

  /* status */
  --st-red: #E53935;

  /* hover */
  --st-hover: rgba(2,36,103,.03);
}

/* ---------- Global helpers ---------- */
*{ box-sizing: border-box; }
a{ text-decoration: none; }
img{ max-width: 100%; height: auto; }

/* ---------- Page shell ---------- */
.employee-page{
  background: var(--st-bg);
  border-radius: var(--st-radius);
  padding: 18px;
}

/* header row */
.employee-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.employee-title{
  margin:0;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--st-text);
}

.employee-sub{
  margin:6px 0 0 0;
  color: var(--st-muted);
  font-size: .95rem;
}

.employee-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

/* ---------- Cards ---------- */
.employee-card{
  background: var(--st-card);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  box-shadow: var(--st-shadow);
  overflow: hidden;
  margin-bottom: 16px;
}

.employee-card-head{
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  border-bottom: 1px solid var(--st-border);
  background: #fff;
}

.employee-card-head .hint{
  color: var(--st-muted);
  font-size: .92rem;
  font-weight: 800;
}

.employee-card-body{
  padding: 16px;
}

/* ---------- Alerts ---------- */
.alert,
.alert-danger, .alert-warning{
  border-radius: var(--st-radius-sm);
  padding: 12px 14px;
  font-weight: 800;
  border: 1px solid rgba(239,68,68,.25);
  background: rgba(239,68,68,.08);
  color: #7f1d1d;
}

/* ---------- Buttons (Primary vs Secondary) ---------- */
/* Base button style */
.button-add, .button-link, .button-cancel, .button-delete, .button-edit,
.toggle-btn, .btn-secondary{
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  display:inline-flex !important;
  align-items:center !important;
  gap: 10px !important;
  border: 1px solid var(--st-border) !important;
  background: #fff !important;
  color: var(--st-text) !important;
  box-shadow: var(--st-shadow-soft);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}

.button-add:hover, .button-link:hover, .button-cancel:hover, .button-delete:hover, .button-edit:hover,
.toggle-btn:hover, .btn-secondary:hover{
  transform: translateY(-1px);
  box-shadow: var(--st-shadow);
  border-color: rgba(2,36,103,.22) !important;
}

/* Primary action (lime) */
.button-add{
  background: var(--st-primary) !important;
  border-color: rgba(214,240,0,.70) !important;
  color: var(--st-primary-text) !important;
}

/* Secondary actions (neutral + dark blue text) */
.button-link,
.button-cancel,
.btn-secondary{
  background: #fff !important;
  border-color: rgba(2,36,103,.35) !important;
  color: var(--st-table-head) !important;
}

/* Destructive */
.button-delete{
  background: var(--st-red) !important;
  border-color: var(--st-red) !important;
  color: #fff !important;
}

/* ---------- Forms / Inputs ---------- */
.control,
.form-control,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  width: 100%;
  border-radius: var(--st-radius-xs) !important;
  border: 1px solid rgba(16,24,40,.12) !important;
  padding: 8px 10px !important;
  outline: none;
  background: #fff !important;
  color: var(--st-text);
  font-weight: 800;
  box-shadow: none !important;
}

.control:focus,
.form-control:focus,
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{
  border-color: rgba(2,36,103,.28) !important;
  box-shadow: 0 0 0 4px rgba(2,36,103,.10) !important;
}

.control[readonly]{
  opacity: .75;
  cursor: not-allowed;
}

.section-note{
  color: var(--st-muted);
  font-weight: 800;
  font-size: .92rem;
}

.field-errors{
  margin: 6px 0 10px 0;
  color: #7f1d1d;
  font-weight: 800;
}

/* Form “table” layout (editCompany.html) */
.form-table{
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.form-table td{
  border-top: 1px solid rgba(16,24,40,.10);
  border-bottom: 1px solid rgba(16,24,40,.10);
  padding: 14px 16px;
  vertical-align: top;
  background: #fff;
}

.form-table tr td:first-child{
  width: 260px;
  border-left: 1px solid rgba(16,24,40,.10);
  border-top-left-radius: var(--st-radius-xs);
  border-bottom-left-radius: var(--st-radius-xs);
  font-weight: 900;
  color: var(--st-text);
}

.form-table tr td:last-child{
  border-right: 1px solid rgba(16,24,40,.10);
  border-top-right-radius: var(--st-radius-xs);
  border-bottom-right-radius: var(--st-radius-xs);
}

/* ---------- Badges / Pills ---------- */
.badge-soft, .pill, .brick-level{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16,24,40,.12);
  background: rgba(2,36,103,.04);
  color: var(--st-table-head);
  font-weight: 800;
  font-size: .85rem;
  white-space: nowrap;
  box-shadow: none;
}

.badge-muted{
  background: rgba(16,24,40,.04);
  color: var(--st-muted);
}

.badge-green{
  border-color: rgba(16,185,129,.22);
  background: rgba(16,185,129,.10);
  color: #0f7a58;
}

.badge-red{
  border-color: rgba(239,68,68,.22);
  background: rgba(239,68,68,.10);
  color: #991b1b;
}

/* ---------- Avatars / thumbnails ---------- */
.avatar{
  width: 44px; height: 44px;
  border-radius: var(--st-radius-sm);
  overflow: hidden;
  border: 1px solid rgba(16,24,40,.10);
  background: #eef2ff;
  flex: 0 0 auto;
}

.avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.thumb{
  width: 52px;
  height: 52px;
  border-radius: var(--st-radius-sm);
  overflow: hidden;
  border: 1px solid rgba(16,24,40,.10);
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* ---------- Links ---------- */
.course-link{
  font-weight: 900;
  color: #1639b8;
  text-decoration: none;
}
.course-link:hover{ text-decoration: underline; }

/* ---------- Description toggle (listCourses.html) ---------- */
.desc-wrap{ max-width: 520px; }
.desc-full{ display:none; white-space: pre-wrap; }

/* ---------- Icon buttons (actions column) ---------- */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 38px;
  height: 38px;
  border-radius: var(--st-radius-sm);
  border: 1px solid rgba(16,24,40,.10);
  background: transparent;
  box-shadow: none;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
  text-decoration: none;
  cursor: pointer;
}
.icon-btn:hover{
  background: rgba(2,36,103,.05);
  border-color: rgba(2,36,103,.22);
  transform: translateY(-1px);
}
.icon-btn img{
  width: 20px;
  height: 20px;
  display:block;
}

/* ---------- TABLES (Bootstrap + DataTables) ---------- */
/* The screenshot look: no floating gaps, dark header, white rows */
.table,
table.dataTable{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

/* header only for tables */
.table thead th,
table.dataTable thead th{
  background: var(--st-table-head) !important;
  color: var(--st-table-head-text) !important;
  border-bottom: none !important;
  font-weight: 900 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 14px 14px !important;
  vertical-align: middle !important;
}

/* radius on header corners */
.table thead th:first-child,
table.dataTable thead th:first-child{
  border-top-left-radius: var(--st-radius-xs);
}
.table thead th:last-child,
table.dataTable thead th:last-child{
  border-top-right-radius: var(--st-radius-xs);
}

/* body cells */
.table tbody td,
table.dataTable tbody td{
  background: #fff !important;
  border-top: 1px solid rgba(16,24,40,.10) !important;
  border-bottom: 1px solid rgba(16,24,40,.10) !important;
  padding: 16px 14px !important;
  vertical-align: middle !important;
  color: var(--st-text);
}

/* remove alternating backgrounds from any previous versions */
table.dataTable tbody tr:nth-child(odd) td,
table.dataTable tbody tr:nth-child(even) td{
  background: #fff !important;
}

/* subtle hover */
table.dataTable tbody tr:hover td{
  background: var(--st-hover) !important;
  border-color: rgba(2,36,103,.18) !important;
}

/* ---------- DataTables top controls ---------- */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label{
  color: var(--st-table-head);
  font-weight: 800;
}

.dataTables_wrapper .dataTables_filter input{
  width: 240px !important;
}

/* ---------- DataTables pagination: lime only for current ---------- */
.dataTables_wrapper .dataTables_paginate{
  padding-top: 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius: 8px !important;
  border: 1px solid rgba(16,24,40,.12) !important;
  background: #fff !important;
  color: var(--st-table-head) !important;
  box-shadow: none !important;
  margin: 0 3px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background: rgba(2,36,103,.05) !important;
  border-color: rgba(2,36,103,.22) !important;
  color: var(--st-table-head) !important;
}

/* current page = primary action lime */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background: var(--st-primary) !important;
  border-color: rgba(214,240,0,.75) !important;
  color: var(--st-primary-text) !important;
}

/* ---------- Modals (Bootstrap) ---------- */
.modal-content{
  border-radius: var(--st-radius);
  border: 1px solid var(--st-border);
  box-shadow: 0 18px 55px rgba(15, 23, 42, .16);
}

.modal-header{
  border-bottom: 1px solid var(--st-border);
  background: #fff;
}

.modal-footer{
  border-top: 1px solid var(--st-border);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .employee-header{ flex-direction: column; }
  .employee-actions{ justify-content:flex-start; }
  .form-table tr td:first-child{ width: 160px; }
  .desc-wrap{ max-width: 100%; }
  .dataTables_wrapper .dataTables_filter input{ width: 100% !important; }
}

/* =========================================================
   Fix #1: No "bubbles" inside table cells (listEmployees)
   ========================================================= */

/* Turn badges/pills into plain text WHEN they appear inside tables */
table.table .badge-soft,
table.table .pill,
table.table .brick-level,
table.dataTable .badge-soft,
table.dataTable .pill,
table.dataTable .brick-level{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--st-text) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  display: inline !important;
}

/* Links that currently wrap a badge (Peers) should look like normal links */
table.table td.links a,
table.dataTable td.links a{
  font-weight: 600;
  color: #1639b8;
  text-decoration: none;
}
table.table td.links a:hover,
table.dataTable td.links a:hover{
  text-decoration: underline;
}

/* Optional: created/last_login currently wrapped in badge-muted -> also plain */
table.table .badge-muted,
table.dataTable .badge-muted{
  color: var(--st-text) !important;
  font-weight: 500 !important;
}

/* =========================================================
   Fix #2: Make buttons more rectangular (like better_design)
   ========================================================= */

.button-add, .button-link, .button-cancel, .button-delete, .button-edit,
.toggle-btn, .btn-secondary{
  border-radius: 10px !important;  /* was: 999px */
  padding: 10px 14px !important;
}

/* Icon buttons dürfen rund bleiben – wirkt wie in deiner Vorlage */
.icon-btn{
  border-radius: 12px !important;
}


/* Optional: KPI pills in header become subtle text */
.employee-card-head .pill{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--st-muted) !important;
  font-weight: 700 !important;
}
.employee-card-head .dot{ display: none !important; } /* optional */


.badge-amber{
  border-color: rgba(245,158,11,.22);
  background: rgba(245,158,11,.10);
  color: #92400e;
}

/* =========================================================
   FINAL OVERRIDES: remove "bubbles" in tables + KPI header
   ========================================================= */

/* 1) No "bubbles" (badges/pills) inside tables -> plain text */
table.table .badge-soft,
table.table .pill,
table.table .brick-level,
table.table .badge-muted,
table.table .badge-green,
table.table .badge-red,
table.table .badge-amber,
table.dataTable .badge-soft,
table.dataTable .pill,
table.dataTable .brick-level,
table.dataTable .badge-muted,
table.dataTable .badge-green,
table.dataTable .badge-red,
table.dataTable .badge-amber{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--st-text) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  display: inline !important;
}

/* Table links (e.g., "3 Peers") should look like normal links */
table.table td.links a,
table.dataTable td.links a{
  font-weight: 600;
  color: #1639b8;
  text-decoration: none;
}
table.table td.links a:hover,
table.dataTable td.links a:hover{
  text-decoration: underline;
}

/* 2) KPI chips in header (employee-card-head) -> plain text */
.employee-card-head .pill,
.employee-card-head .badge-soft,
.employee-card-head .badge-muted,
.employee-card-head .badge-green,
.employee-card-head .badge-red,
.employee-card-head .badge-amber{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--st-muted) !important;
  font-weight: 700 !important;
  display: inline !important;
}

/* Optional: remove decorative dots next to KPI pills */
.employee-card-head .dot,
.employee-card-head .dot-lime{
  display: none !important;
}

/* 3) Buttons more rectangular (like better_design) */
.button-add, .button-link, .button-cancel, .button-delete, .button-edit,
.toggle-btn, .btn-secondary{
  border-radius: 10px !important; /* was pill (999px) */
  padding: 10px 14px !important;
}

/* keep action icon buttons slightly rounded */
.icon-btn{
  border-radius: 12px !important;
}

/* 4) If you still use amber elsewhere (outside tables) */
.badge-amber{
  border-color: rgba(245,158,11,.22);
  background: rgba(245,158,11,.10);
  color: #92400e;
}

/* =========================================================
   Header / Toolbar buttons (employee-actions)
   -> less bubble, more rectangular, subtle
   ========================================================= */

.employee-actions .button-add,
.employee-actions .button-link{
  border-radius: 8px !important;          /* eckiger */
  padding: 8px 12px !important;
  font-weight: 700 !important;

  box-shadow: none !important;            /* kein Floating */
  background: #fff !important;            /* ruhig */
  color: var(--st-table-head) !important;

  border: 1px solid rgba(2,36,103,.35) !important;
}

/* Primary action in toolbar: still lime, but NOT bubbly */
.employee-actions .button-add{
  background: var(--st-primary) !important;
  color: var(--st-primary-text) !important;
  border-color: rgba(214,240,0,.75) !important;
}

/* Hover: minimal, kein „Abheben“ */
.employee-actions .button-add:hover,
.employee-actions .button-link:hover{
  transform: none !important;
  box-shadow: none !important;
  background: rgba(2,36,103,.05) !important;
}

/* Disabled / limit-reached variant */
.employee-a


/* =========================================================
   Softer, more rectangular button system (GLOBAL)
   ========================================================= */

/* Make all buttons a bit more rectangular and less "poppy" */
.button-add, .button-link, .button-cancel, .button-delete, .button-edit,
.toggle-btn, .btn-secondary,
.narrow-button-add, .narrow-button-edit, .narrow-button-delete{
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Reduce hover "lift" everywhere */
.button-add:hover, .button-link:hover, .button-cancel:hover, .button-delete:hover, .button-edit:hover,
.toggle-btn:hover, .btn-secondary:hover,
.narrow-button-add:hover, .narrow-button-edit:hover, .narrow-button-delete:hover{
  transform: none !important;
  box-shadow: none !important;
}

/* =========================================================
   Rolelevels: subtle in-cell controls (NOT loud)
   ========================================================= */

.narrow-button-add,
.narrow-button-edit,
.narrow-button-delete{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px !important;
  font-size: .9rem;
  font-weight: 700;
  border: 1px solid rgba(2,36,103,.25) !important;
  background: rgba(2,36,103,.04) !important;  /* subtle blue tint */
  color: var(--st-table-head) !important;
}

/* Delete should read as delete, but not scream */
.narrow-button-delete{
  border-color: rgba(239,68,68,.25) !important;
  background: rgba(239,68,68,.06) !important;
  color: #991b1b !important;
}

/* Hover stays subtle */
.narrow-button-add:hover,
.narrow-button-edit:hover{
  background: rgba(2,36,103,.07) !important;
  border-color: rgba(2,36,103,.30) !important;
}

.narrow-button-delete:hover{
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.30) !important;
}

/* =========================================================
   In tables: danger buttons are softer (still obvious)
   ========================================================= */

table.table .button-delete,
table.dataTable .button-delete{
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.35) !important;
  color: #991b1b !important;
}

table.table .button-delete:hover,
table.dataTable .button-delete:hover{
  background: rgba(239,68,68,.14) !important;
  border-color: rgba(239,68,68,.45) !important;
}

.narrow-button-edit,
.button-edit{
  font-size: 0 !important;
}
.narrow-button-edit::before,
.button-edit::before{
  content: "✎";
  font-size: 16px;
}

.narrow-button-delete,
.button-delete{
  font-size: 0 !important;
}
.narrow-button-delete::before,
.button-delete::before{
  content: "🗑";
  font-size: 16px;
}


/* =========================================================
   listEmployees: Email smaller + secondary
   ========================================================= */

.emp .mail{
  font-size: 0.85rem;          /* kleiner als Name */
  line-height: 1.25;
  color: var(--st-muted);      /* visuell sekundär */
  font-weight: 500;
  margin-top: 2px;
  word-break: break-all;       /* lange Mails brechen sauber */
}
.emp .name{
  font-size: 1rem;
  font-weight: 800;
  color: var(--st-text);
}

/* =========================================================
   Requested button changes
   - button-link: lime background #DDEE0C
   - button-delete: like button-add, but background #EEB6B6
   ========================================================= */

.button-link{
  background: #DDEE0C !important;
  border-color: rgba(214,240,0,.75) !important;
  color: var(--st-primary-text) !important;
}

/* also for toolbar override (employee-actions), because it set button-link to white */
.employee-actions .button-link{
  background: #DDEE0C !important;
  border-color: rgba(214,240,0,.75) !important;
  color: var(--st-primary-text) !important;
}

/* delete like add (not red), but with soft red/pink background */
.button-delete{
  background: #EEB6B6 !important;
  border-color: rgba(238,182,182,.95) !important;
  color: var(--st-primary-text) !important;
}



/* Delete like Add, but with soft red/pink background (ALL delete buttons) */
.button-delete,
.narrow-button-delete{
  background: #EEB6B6 !important;
  border-color: rgba(238,182,182,.95) !important;
  color: var(--st-primary-text) !important;
}

/* Ensure table-specific overrides don't force the old red tint */
table.table .button-delete,
table.dataTable .button-delete{
  background: #EEB6B6 !important;
  border-color: rgba(238,182,182,.95) !important;
  color: var(--st-primary-text) !important;
}

table.table .button-delete:hover,
table.dataTable .button-delete:hover{
  background: rgba(238,182,182,.85) !important;
  border-color: rgba(238,182,182,1) !important;
}

/* Restore text visibility (was font-size:0 for icon-only buttons) */
.button-delete,
.narrow-button-delete,
.button-edit,
.narrow-button-edit{
  font-size: inherit !important;
}

/* Remove the forced emoji icons that replaced the text */
.button-delete::before,
.narrow-button-delete::before,
.button-edit::before,
.narrow-button-edit::before{
  content: none !important;
}


.button-delete,
.narrow-button-delete,
.button-cancel{
  background: #EEB6B6 !important;
  border-color: rgba(238,182,182,.95) !important;
  color: var(--st-primary-text) !important;
}

/* Ensure table-specific overrides don't re-introduce other delete colors */
table.table .button-delete,
table.dataTable .button-delete{
  background: #EEB6B6 !important;
  border-color: rgba(238,182,182,.95) !important;
  color: var(--st-primary-text) !important;
}

/* Make sure text is not hidden (there was a font-size:0 icon-only rule earlier) */
.button-delete,
.narrow-button-delete{
  font-size: inherit !important;
}
.button-delete::before,
.narrow-button-delete::before{
  content: none !important;
}


/* remove alternating backgrounds from any previous versions */
table.dataTable tbody tr:nth-child(odd) td,
table.dataTable tbody tr:nth-child(even) td{
  background: #fff !important;
}

/* subtle hover */
table.dataTable tbody tr:hover td{
  background: var(--st-hover) !important;
  border-color: rgba(2,36,103,.18) !important;
}

/* =========================================================
   Subtle zebra rows (very light gray) for better readability
   ========================================================= */

/* Bootstrap tables */
.table tbody tr:nth-child(even) td{
  background: rgba(16,24,40,.02) !important; /* very subtle gray */
}

/* DataTables (must come AFTER the "odd/even = white" reset above) */
table.dataTable tbody tr:nth-child(even) td{
  background: rgba(16,24,40,.02) !important; /* very subtle gray */
}

/* keep hover stronger than zebra */
table.dataTable tbody tr:hover td,
.table tbody tr:hover td{
  background: var(--st-hover) !important;
}


/* =========================================================
   Requested: button-edit background #55D8FE
   ========================================================= */

.button-edit,
.narrow-button-edit{
  background: #55D8FE !important;
  border-color: rgba(85,216,254,.95) !important;
  color: var(--st-primary-text) !important;
}

/* make sure hover doesn't turn it back to something else */
.button-edit:hover,
.narrow-button-edit:hover{
  background: rgba(85,216,254,.85) !important;
  border-color: rgba(85,216,254,1) !important;
}

/* if edit was previously icon-only, keep text visible */
.button-edit,
.narrow-button-edit{
  font-size: inherit !important;
}
.button-edit::before,
.narrow-button-edit::before{
  content: none !important;
}