/* =========================================================
   RN RECHTERMUISMENU
   ========================================================= */

:root {
  --rn-context-bg-rgb: 255, 228, 203;
  --rn-context-bg-opacity: 0.82;
  --rn-context-blur: 10px;

  --rn-context-text: #262626;
  --rn-context-orange: #ee7202;
  --rn-context-border: #262626;

  --rn-context-radius: 5px;
  --rn-context-padding-x: 10px;

  --rn-context-shadow:
    0 10px 28px rgba(38, 38, 38, 0.14),
    0 3px 8px rgba(38, 38, 38, 0.08);
}

.rn-context-menu {
  position: fixed !important;
  z-index: 2147483002 !important;
  display: block !important;
  visibility: hidden;
  pointer-events: none;

  width: max-content;
  min-width: 0;
  max-width: min(360px, calc(100vw - 20px));

  padding: 6px var(--rn-context-padding-x) !important;

  background: rgba(var(--rn-context-bg-rgb), var(--rn-context-bg-opacity)) !important;
  background-color: rgba(var(--rn-context-bg-rgb), var(--rn-context-bg-opacity)) !important;

  backdrop-filter: blur(var(--rn-context-blur)) !important;
  -webkit-backdrop-filter: blur(var(--rn-context-blur)) !important;

  border: 1px solid var(--rn-context-border) !important;
  border-radius: var(--rn-context-radius) !important;
  box-shadow: var(--rn-context-shadow) !important;

  font-family: "Cabin-Regular", Cabin-Regular, Cabin, sans-serif !important;
  font-size: 1.1em !important;
  font-weight: 100 !important;
  line-height: 1.2 !important;
  color: var(--rn-context-text) !important;

  box-sizing: border-box !important;
  transform-origin: top center !important;
  transform: scaleY(0) !important;
  opacity: 0 !important;
  transition:
    transform 500ms cubic-bezier(.2,.8,.2,1),
    opacity 160ms ease,
    visibility 0s linear 500ms !important;
}

.rn-context-menu.is-open {
  visibility: visible !important;
  pointer-events: auto !important;
  transform: scaleY(1) !important;
  opacity: 1 !important;
  transition:
    transform 500ms cubic-bezier(.2,.8,.2,1),
    opacity 160ms ease,
    visibility 0s linear 0s !important;
}

.rn-context-menu.is-positioning {
  transition: none !important;
  transform: scaleY(1) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.rn-context-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;

  margin: 5px 0 !important;
  padding: 3px 26px 3px 0 !important;

  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--rn-context-text) !important;

  font-family: "Cabin-Regular", Cabin-Regular, Cabin, sans-serif !important;
  font-size: 1em !important;
  font-weight: 100 !important;
  line-height: 1.2 !important;

  text-align: left !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;

  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.rn-context-item:hover,
.rn-context-item:focus {
  color: var(--rn-context-orange) !important;
  background: transparent !important;
  background-color: transparent !important;
}

.rn-context-item[href="https://adobeusergroup.com/auteursrechtverklaring/"],
.rn-context-item[href="https://adobeusergroup.com/contact/#project-bespreken"],
.rn-context-item[href="https://adobeusergroup.com/en/copyright-notice/"],
.rn-context-item[href="https://adobeusergroup.com/en/contact-en/#discuss-project"] {
  font-family: "Cabin-Bold", Cabin-Bold, Cabin, sans-serif !important;
  font-weight: 100 !important;
}

.rn-context-separator {
  width: 100% !important;
  height: 0 !important;
  margin: 7px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(38, 38, 38, 0.5) !important;
}

.rn-context-has-submenu {
  position: relative !important;
}

.rn-context-has-submenu > .rn-context-item::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  transform: translateY(-50%) !important;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 9px solid var(--rn-context-orange) !important;
}

.rn-context-has-submenu > .rn-context-item:hover::after,
.rn-context-has-submenu > .rn-context-item:focus::after {
  border-left-color: #262626 !important;
}

.rn-context-submenu {
  position: fixed !important;
  z-index: 2147483003 !important;
  display: none !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(360px, calc(100vw - 20px)) !important;

  padding: 6px var(--rn-context-padding-x) !important;
  background: rgba(var(--rn-context-bg-rgb), var(--rn-context-bg-opacity)) !important;
  background-color: rgba(var(--rn-context-bg-rgb), var(--rn-context-bg-opacity)) !important;
  backdrop-filter: blur(var(--rn-context-blur)) !important;
  -webkit-backdrop-filter: blur(var(--rn-context-blur)) !important;
  border: 1px solid var(--rn-context-border) !important;
  border-radius: var(--rn-context-radius) !important;
  box-shadow: var(--rn-context-shadow) !important;

  overflow: visible !important;
  box-sizing: border-box !important;
  font-family: "Cabin-Regular", Cabin-Regular, Cabin, sans-serif !important;
  font-size: 1.1em !important;
  font-weight: 100 !important;
  line-height: 1.2 !important;
  color: var(--rn-context-text) !important;
}

.rn-context-submenu.is-open {
  display: block !important;
}

.rn-context-submenu .rn-context-item {
  width: 100% !important;
  font-size: 1em !important;
}

.rn-context-toast {
  position: fixed !important;
  z-index: 2147483004 !important;
  left: 50% !important;
  bottom: 30px !important;
  transform: translateX(-50%) !important;
  padding: 8px 14px !important;
  background: rgba(var(--rn-context-bg-rgb), 0.92) !important;
  backdrop-filter: blur(var(--rn-context-blur)) !important;
  -webkit-backdrop-filter: blur(var(--rn-context-blur)) !important;
  border: 1px solid var(--rn-context-border) !important;
  border-radius: 999px !important;
  box-shadow: var(--rn-context-shadow) !important;
  color: var(--rn-context-text) !important;
  font-family: "Cabin-Regular", Cabin-Regular, Cabin, sans-serif !important;
  font-size: 1em !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease !important;
}

.rn-context-toast.is-visible {
  opacity: 1 !important;
}