/*
 * Care4 branding for the Microsoft RD Web Client (v2.x).
 * Injected into the web client's index.html by an IIS URL Rewrite outbound rule (see README.md).
 * The texts, logos, links and notices are added by care4-branding.js; this file only styles.
 *
 * The web client is a compiled Fluent UI app, so only its readable class names are targeted.
 * Fluent injects its own styles at runtime after this file, hence !important on overridden properties.
 */
:root {
  --c4-orange: #f36f21;         /* brand accent: borders, icons, links on dark */
  --c4-orange-strong: #c04f0c;  /* button fill / links on light: white text on it is 4.8:1 */
  --c4-orange-stronger: #a8450a;
  --c4-muted: #605e5c;
  --c4-divider: rgba(138, 136, 134, 0.6);
  --c4-tooltip-background: #fff;  /* tooltip values copied from the web client's own (Fluent UI) tooltips */
  --c4-tooltip-beak: #fff;
  --c4-tooltip-text: #323130;
  --c4-tooltip-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
  --c4-card-background: #fff;   /* cards view */
  --c4-card-hover-background: #faf9f8;
  --c4-card-border: #e1dfdd;
  --c4-badge-desktop-background: rgba(0, 100, 165, 0.1);  /* Care4iT blue */
  --c4-badge-desktop-text: #0064a5;
  --c4-badge-touch-background: rgba(243, 111, 33, 0.13);
  --c4-badge-touch-text: #a8450a;
  --c4-badge-product-border: #c8c6c4;
  --c4-badge-product-text: #484644;
  --c4-panel-background: #fff;  /* notices panel, as the web client's Settings panel */
}

body.dark {
  --c4-muted: #c8c6c4;
  --c4-tooltip-background: #292827;
  --c4-tooltip-beak: #323130;
  --c4-tooltip-text: #faf9f8;
  --c4-tooltip-shadow: 0 6.4px 14.4px 0 #000, 0 1.2px 3.6px 0 #000;
  --c4-card-background: #252423;
  --c4-card-hover-background: #2d2c2b;
  --c4-card-border: #3b3a39;
  --c4-badge-desktop-background: rgba(71, 158, 245, 0.16);
  --c4-badge-desktop-text: #79bdf5;
  --c4-badge-touch-background: rgba(243, 111, 33, 0.18);
  --c4-badge-touch-text: #ff9d61;
  --c4-badge-product-border: #605e5c;
  --c4-badge-product-text: #d2d0ce;
  --c4-panel-background: #1b1a19;
}

/* ---- Tooltips on our links and logos (added by care4-branding.js), like the web client's own ---- */

.c4-tooltip {
  position: fixed;
  z-index: 1000001; /* above Fluent's layers: dialogs and panels */
  pointer-events: none;
  animation: c4-tooltip-fade-in 0.267s cubic-bezier(0.1, 0.25, 0.75, 0.9) both;
}

@keyframes c4-tooltip-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c4-tooltip {
    animation: none;
  }
}

.c4-tooltip-beak {
  position: absolute;
  top: -8px;
  width: 16px;
  height: 16px;
  background: var(--c4-tooltip-beak);
  box-shadow: var(--c4-tooltip-shadow);
  transform: rotate(45deg);
}

.c4-tooltip-text {
  position: relative; /* covers the lower half of the beak */
  max-width: 364px;
  padding: 8px;
  border-radius: 2px;
  background: var(--c4-tooltip-background);
  box-shadow: var(--c4-tooltip-shadow);
  color: var(--c4-tooltip-text);
  font-size: 12px;
  line-height: 16px;
}

/* ---- Logos (each one links to its website) ---- */

.c4-logos {
  display: flex;
  align-items: center;
}

.c4-logo {
  display: flex;
  border-radius: 2px;
}

.c4-logo img {
  display: block;
  width: auto;
}

.c4-logo:hover {
  opacity: 0.8;
}

.c4-logo:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.c4-logo-divider {
  width: 1px;
  background: var(--c4-divider);
}

/* ---- Nav bar: title and logos after the home button, links before the icons ---- */

.c4-brand {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0 16px 0 4px;
  color: var(--navbar-icon-color);
}

.c4-brand-title {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.c4-brand .c4-logos::before {
  content: "";
  width: 1px;
  height: 16px;
  margin: 0 16px;
  background: var(--c4-divider);
}

.c4-brand .c4-logo img {
  height: 21px;
}

.c4-brand .c4-logo-divider {
  height: 12px;
  margin: 0 8px;
}

@media (max-width: 640px) {
  .c4-brand .c4-logos {
    display: none;
  }
}

/* Links look like the bar's own icon buttons: its theme variables, full height, hover block */
.c4-nav-links {
  display: flex;
  flex: none;
  align-self: stretch;
  margin-right: 8px;
  white-space: nowrap;
}

.c4-nav-links a {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--navbar-icon-color);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}

.c4-nav-links a:hover {
  background-color: var(--navbar-icon-hover-background-color);
}

.c4-nav-links a:focus-visible {
  outline: 1px solid var(--navbar-icon-color);
  outline-offset: -3px;
}

/* Our links' icons: line icons like the bar's own, in the link's colour */
.c4-link-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.c4-nav-links .c4-link-icon {
  margin-right: 8px;
}

.c4-menu-item .ms-ContextualMenu-icon .c4-link-icon {
  display: block;
  margin: auto;
}

/* No room in the bar: then care4-branding.js puts the links in the bar's "..." menu */
@media (max-width: 1100px) {
  .c4-nav-links {
    display: none;
  }
}

.c4-menu-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--c4-card-border);
}

/* The login name next to the avatar (care4-branding.js), inside its button; avatar only below 1280 px, where
   the bar has no room for it. The web client gives the button and its containers fixed widths. */
.c4-user-name {
  display: none;
}

@media (min-width: 1280px) {
  .navbar-extras-container:has(.c4-user-name),
  .navbar-extras-container-account:has(.c4-user-name) {
    width: auto !important;
  }

  .persona-button:has(.c4-user-name) {
    width: auto !important;
    padding: 0 12px 0 16px !important;
  }

  /* care4-branding.js shows our tooltip, centred under the wider button, instead of the web client's */
  html.c4-account-tip .ms-Layer:has(.ms-Tooltip) {
    display: none;
  }

  .c4-user-name {
    display: block;
    max-width: 240px;
    margin-right: 10px;
    overflow: hidden;
    color: var(--navbar-icon-color);
    font-size: 14px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ---- Sign-in dialog: logos, title and instructions on top, links in the footer ---- */

.rdweb-credentials-modal > .ms-Overlay {
  background:
    radial-gradient(60vw 60vh at 10% 5%, rgba(243, 111, 33, 0.18), transparent 70%),
    radial-gradient(50vw 50vh at 95% 100%, rgba(120, 120, 120, 0.2), transparent 70%),
    #f4f2f0 !important;
}

body.dark .rdweb-credentials-modal > .ms-Overlay {
  background:
    radial-gradient(60vw 60vh at 10% 5%, rgba(243, 111, 33, 0.22), transparent 70%),
    radial-gradient(50vw 50vh at 95% 100%, rgba(120, 120, 120, 0.22), transparent 70%),
    #141312 !important;
}

.rdweb-credentials-modal .ms-Dialog-lgHeader {
  border-top-color: var(--c4-orange) !important;
}

/* Microsoft's "Sign in" title gives way to ours, but stays for screen readers: it names the dialog */
.rdweb-credentials-modal .ms-Dialog-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap;
}

.c4-signin-head {
  padding: 24px 24px 20px;
}

.c4-signin-head .c4-logo img {
  height: 32px;
}

.c4-signin-head .c4-logo-divider {
  height: 18px;
  margin: 0 12px;
}

.c4-signin-title {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

.c4-signin-text {
  margin-top: 4px;
  color: var(--c4-muted);
  font-size: 14px;
  line-height: 20px;
}

/* Our links replace Microsoft's privacy statement link, left of the Sign in button. Only that one: the link to
   change an expired password (in the sign-in error) has the class action-item__privacy-link too, but not --external. */
.rdweb-credentials-modal .action-item__privacy-link--external {
  display: none !important;
}

/* Sign-in error for an expired password (or one that must be changed): our notice with a button to the account page
   (care4-branding.js) instead of Microsoft's red message and its link. The notice looks like our other notices. */
.rdweb-credentials-modal-container__error-log:has(.c4-expired-box) .message-container,
.rdweb-credentials-modal-container__error-log:has(.c4-expired-box) .action-item__privacy-link:not(.c4-expired-button) {
  display: none !important;
}

.c4-expired-box {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
  background: #fff3cd;
  color: #856404;
  font-size: 13px;
  line-height: 1.45;
}

.c4-expired-title {
  margin-bottom: 2px;
  color: #b45309;
  font-weight: 600;
}

body.dark .c4-expired-box {
  border-color: #5c4a1e;
  background: #2e2616;
  color: #f1e3b8;
}

body.dark .c4-expired-title {
  color: #ffb86b;
}

.c4-expired-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 16px;
  border-radius: 2px;
  background: var(--c4-orange-strong);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none !important;
}

.c4-expired-button:hover,
.c4-expired-button:active {
  background: var(--c4-orange-stronger);
}

.c4-expired-button:focus-visible {
  outline: 2px solid var(--c4-orange);
  outline-offset: 2px;
}

.c4-expired-button .c4-link-icon {
  width: 15px;
  height: 15px;
}

.c4-signin-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 auto 0 4px;
  font-size: 14px;
}

.c4-signin-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c4-muted);
  text-decoration: none;
}

.c4-signin-links .c4-link-icon {
  width: 15px;
  height: 15px;
}

.c4-signin-links a:hover,
.c4-signin-links a:focus-visible {
  color: var(--c4-orange-strong);
  text-decoration: underline;
}

body.dark .c4-signin-links a:hover,
body.dark .c4-signin-links a:focus-visible {
  color: var(--c4-orange);
}

/* Phones: the dialog uses the screen width (it was ~290 px, too narrow for the logos, which caused a horizontal
   scrollbar), the logos shrink to fit one row, and Sign in gets a full-width row with our links under it (they
   squeezed it onto two lines) */
@media (max-width: 480px) {
  .rdweb-credentials-modal .rdweb-credentials-modal-container {
    width: calc(100vw - 32px) !important;
  }

  .c4-signin-head {
    padding: 20px 20px 16px;
  }

  /* Together the logos are 10.3 times as wide as they are high, plus two dividers of 17 px */
  .c4-signin-head .c4-logo img {
    height: min(32px, calc((100vw - 32px - 40px - 34px) / 10.3));
  }

  .c4-signin-head .c4-logo-divider {
    margin: 0 8px;
  }

  .rdweb-credentials-modal-container__footer {
    flex-wrap: wrap;
    margin-right: 0 !important;
  }

  .rdweb-credentials-modal-container__footer .ms-Dialog-action:has(.action-item__submit-button) {
    order: 1;
    flex: 1 0 100%;
    margin: 0 !important;
  }

  .rdweb-credentials-modal .action-item__submit-button {
    width: 100%;
    height: 40px;
  }

  .rdweb-credentials-modal-container__footer .c4-signin-links {
    order: 2;
    justify-content: center;
    width: 100%;
    margin: 14px 0 2px;
    gap: 4px 24px;
  }
}

/* Sign-in notices: a card above the dialog (the modal centres a column instead of a row) */
.rdweb-credentials-modal {
  flex-direction: column !important;
  justify-content: safe center !important;
  overflow-y: auto !important;
}

.rdweb-credentials-modal > .c4-notices {
  position: relative; /* above the overlay */
  width: 560px;
  max-width: calc(100vw - 32px);
  margin: 16px 0 12px;
}

.rdweb-credentials-modal > .c4-notices .c4-notice {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.rdweb-credentials-modal > .c4-notices .c4-notice:last-child {
  margin-bottom: 0;
}

.rdweb-credentials-modal .ms-TextField.is-active .ms-TextField-fieldGroup::after {
  border-color: var(--c4-orange) !important;
}

.rdweb-credentials-modal .action-item__submit-button:not(.is-disabled) {
  background-color: var(--c4-orange-strong) !important;
  border-color: var(--c4-orange-strong) !important;
  color: #fff !important;
}

.rdweb-credentials-modal .action-item__submit-button:not(.is-disabled):hover,
.rdweb-credentials-modal .action-item__submit-button:not(.is-disabled):active {
  background-color: var(--c4-orange-stronger) !important;
  border-color: var(--c4-orange-stronger) !important;
}

.rdweb-credentials-modal .ms-Link {
  color: var(--c4-orange-strong) !important;
}

body.dark .rdweb-credentials-modal .ms-Link {
  color: var(--c4-orange) !important;
}

/* ---- Apps page ---- */

/* After signing in, the web client focuses its hidden keyboard input, which sits below the apps list, so the
   browser scrolled to the bottom of the page. Pinned to the top of the window, focusing it scrolls nothing. */
.webclient > input.visually-hidden {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
}

.tenant-header {
  box-shadow: inset 3px 0 0 var(--c4-orange);
}

.resources-controls-icon-selected {
  color: var(--c4-orange) !important;
}

/* List view: as many columns as fit (the web client always uses 3) and lower rows. The tile view is untouched. */
.tenant-resources .ms-List-page:has(> .ms-List-cell .list-view) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  column-gap: 8px;
}

.tenant-resources .list-view {
  width: auto !important;
  min-height: 0 !important;
  float: none !important;
  padding: 6px 10px !important;
}

/* Tile view: the web client squeezes names into 65 px and two lines, breaking inside words. Slightly wider
   tiles (as many as fit), names over the full width on up to three lines, icons aligned at the top. The tiles
   get a fixed height instead of Microsoft's square: on narrow screens the columns widen, and square tiles
   became tall and mostly empty. */
.tenant-resources .ms-List-page:has(> .ms-List-cell .tile-view) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
}

.tenant-resources .tile-view {
  width: auto !important;
  float: none !important;
}

.tenant-resources .tile-view .tenant-resources-sizer {
  height: 132px;
  padding-bottom: 0 !important;
}

.tenant-resources .tile-view .tenant-resources-btn-container {
  justify-content: flex-start !important;
  padding-top: 24px;
}

.tenant-resources .tile-view-label-container {
  width: 100%;
  height: auto !important;
  padding: 10px 8px 0 !important;
}

.tenant-resources .tile-view-label {
  width: auto !important;
  height: auto !important;
  max-height: 4.5em;
  -webkit-line-clamp: 3 !important;
  hyphens: manual !important;
}

/* Cards view: our third view button (care4-branding.js) sets html.c4-cards and switches the web client to its
   tile view, which is restyled here as cards: icon, name and badges side by side. The web client's own label
   gives way to ours (name without the badge parts) only once ours is there. */
html.c4-cards .tenant-resources .ms-List-page:has(> .ms-List-cell .tile-view) {
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 10px;
  padding: 6px 0;
}

html.c4-cards .tenant-resources .tile-view .tenant-resources-sizer {
  position: relative;
  height: 72px;
  padding-bottom: 0 !important;
}

html.c4-cards .tenant-resources .tile-view .tenant-resources-btn {
  border: 1px solid var(--c4-card-border);
  border-radius: 8px;
  background: var(--c4-card-background);
  transition: border-color 0.15s, background-color 0.15s, transform 0.15s;
}

html.c4-cards .tenant-resources .tile-view .tenant-resources-btn:hover {
  border-color: var(--c4-orange);
  background: var(--c4-card-hover-background);
  transform: translateY(-1px);
}

html.c4-cards .tenant-resources .tile-view .tenant-resources-btn-container {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px;
  width: 100%;
  padding: 0 14px;
  box-sizing: border-box;
}

html.c4-cards .tenant-resources .tile-view .tile-view-thumbnail {
  flex: none;
}

html.c4-cards .tenant-resources .tile-view-label-container {
  flex: 1;
  width: auto;
  min-width: 0;
  padding: 0 !important;
}

html.c4-cards .tenant-resources .tile-view-label-container:has(> .c4-card-text) > .tile-view-label {
  display: none !important;
}

.c4-card-text {
  display: none;
}

html.c4-cards .c4-card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  text-align: left;
}

.c4-card-name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--allresources-resource-font-color);
  font-size: 14px;
  line-height: 18px;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.c4-badges {
  display: flex;
  gap: 6px;
}

/* No badges inside a folder (Configuratie: Windows tools, not our apps) */
div:has(> .tenant-header .tenant-breadcrumb) .c4-badges {
  display: none;
}

.c4-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 7px;
  box-sizing: border-box;
  border-radius: 9px;
  background: var(--c4-badge-desktop-background);
  color: var(--c4-badge-desktop-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

.c4-badge svg {
  width: 12px;
  height: 12px;
}

.c4-badge-touch {
  background: var(--c4-badge-touch-background);
  color: var(--c4-badge-touch-text);
}

.c4-badge-product {
  border: 1px solid var(--c4-badge-product-border);
  background: transparent;
  color: var(--c4-badge-product-text);
  font-weight: 400;
}

/* In the cards view our button is the selected one, not Microsoft's tile button */
html.c4-cards .resources-controls-icon-btn:not(.c4-cards-btn) .resources-controls-icon-selected {
  color: var(--allresources-controls-icon-color) !important;
}

html.c4-cards .resources-controls-icon-btn:not(.c4-cards-btn):hover .resources-controls-icon-selected {
  color: var(--allresources-controls-icon-color-hovered) !important;
}

/* Search (added by care4-branding.js for accounts with many apps): left of the view buttons */
.c4-search {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: min(240px, calc(100% - 140px));
  height: 32px;
  margin-right: 14px;
  border: 1px solid var(--c4-card-border);
  border-radius: 4px;
  background: var(--c4-card-background);
}

.c4-search:hover {
  border-color: #8a8886;
}

.c4-search:focus-within {
  border-color: var(--c4-orange);
  box-shadow: 0 0 0 1px var(--c4-orange);
}

.c4-search-icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0 8px 0 10px;
  color: var(--c4-muted);
}

.c4-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: #323130;
  font: inherit;
  font-size: 14px;
}

body.dark .c4-search-input {
  color: #faf9f8;
}

.c4-search-input::placeholder {
  color: var(--c4-muted);
  opacity: 1;
}

.c4-search-input::-webkit-search-cancel-button {
  display: none; /* our own clear button */
}

.c4-search-count {
  flex: none;
  margin: 0 4px 0 8px;
  color: var(--c4-muted);
  font-size: 12px;
  white-space: nowrap;
}

.c4-search-clear {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 1px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--c4-muted);
  cursor: pointer;
}

.c4-search-clear:hover,
.c4-search-clear:focus-visible {
  background: rgba(138, 136, 134, 0.18);
}

.c4-search-clear[hidden] {
  display: none;
}

.c4-search-clear svg {
  width: 10px;
  height: 10px;
}

.tenant-resources .ms-List-cell.c4-search-miss {
  display: none !important;
}

.c4-search-empty {
  padding: 20px 4px;
  color: var(--c4-muted);
  font-size: 14px;
}

/* An app from a folder among the results: its folder under the name (tiles, list), or as a badge (cards) */
.c4-search-where {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 2px;
  color: var(--c4-muted);
  font-size: 11px;
  line-height: 14px;
}

.c4-search-where svg {
  flex: none;
  width: 12px;
  height: 12px;
}

.list-view .c4-search-where {
  justify-content: flex-start;
  margin: 0 0 0 10px;
}

html.c4-cards .c4-search-where {
  display: none;
}

/* Notices from notices.xml, above the apps */
.c4-notices:empty {
  display: none;
}

.tenants-container > .c4-notices {
  margin: 4px 0 12px;
}

.c4-notice {
  position: relative;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
  background: #fff3cd;
  color: #856404;
  font-size: 13px;
  line-height: 1.45;
}

.c4-notice-title {
  margin-bottom: 2px;
  color: #b45309;
  font-size: 13px;
  font-weight: 600;
}

.c4-notice-time {
  color: #d63384;
  font-weight: 600;
}

.c4-notice a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

body.dark .c4-notice {
  border-color: #5c4a1e;
  background: #2e2616;
  color: #f1e3b8;
}

body.dark .c4-notice-title {
  color: #ffb86b;
}

body.dark .c4-notice-time {
  color: #ff8fc7;
}

/* ---- Closable notices (data-dismiss="yes"): marked read with the button top right ---- */

.c4-notice-closable {
  padding-right: 40px;
}

.c4-notice-close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
}

.c4-notice-close:hover,
.c4-notice-close:focus-visible {
  background: rgba(128, 128, 128, 0.18);
  opacity: 1;
}

.c4-notice-close:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: -1px;
}

.c4-notice-close svg {
  width: 12px;
  height: 12px;
}

/* ---- Megaphone in the nav bar (all notices), like the bar's icon buttons, with the number of unread ones ---- */

.c4-notices-button {
  position: relative;
  display: flex;
  flex: none;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  width: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navbar-icon-color);
  cursor: pointer;
}

.c4-notices-button[hidden],
.c4-notices-count[hidden] {
  display: none;
}

.c4-notices-button:hover {
  background-color: var(--navbar-icon-hover-background-color);
}

.c4-notices-button:focus-visible {
  outline: 1px solid var(--navbar-icon-color);
  outline-offset: -3px;
}

.c4-notices-button svg {
  width: 18px;
  height: 18px;
}

.c4-notices-count {
  position: absolute;
  top: 9px;
  right: 7px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--c4-orange-strong);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

/* ---- Notices panel from the right, like the web client's Settings panel ---- */

.c4-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
}

.c4-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000000;
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: 100vw;
  background: var(--c4-panel-background);
  box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
  color: var(--allresources-resource-font-color);
  animation: c4-panel-in 0.367s cubic-bezier(0.1, 0.9, 0.2, 1) both;
}

@keyframes c4-panel-in {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c4-panel {
    animation: none;
  }
}

.c4-panel-head {
  display: flex;
  align-items: flex-start;
  padding: 18px 14px 0 24px;
}

.c4-panel-title {
  flex: 1;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 27px;
}

.c4-panel-close {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.c4-panel-close:hover {
  background: rgba(128, 128, 128, 0.18);
}

.c4-panel-close:focus-visible {
  outline: 1px solid currentColor;
}

.c4-panel-close svg {
  width: 14px;
  height: 14px;
}

.c4-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px 20px;
}

.c4-panel-section {
  margin: 20px 0 8px;
  font-size: 14px;
  font-weight: 600;
}

.c4-panel-section:first-child {
  margin-top: 4px;
}

.c4-panel-empty {
  margin: 4px 0;
  font-size: 14px;
}

.c4-notice-earlier {
  opacity: 0.7;
}

.c4-notice-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 6px;
  font-size: 12px;
}

.c4-notice-tag {
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 9px;
  font-size: 11px;
  line-height: 16px;
}

.c4-notice-tag-new {
  border-color: transparent;
  background: var(--c4-orange-strong);
  color: #fff;
  font-weight: 600;
}

.c4-notice-again {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.c4-notice-period {
  opacity: 0.85;
}