/* Native-size vector artwork: depth without compositing the text into a 3D layer. */
.permissions-illustration { position: relative; isolation: isolate; min-width: 0; width: 100%; margin: 0; }
.permissions-halo { position: absolute; z-index: -1; left: 4%; top: -5%; width: 92%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #e3eafa; background: #f0f4ff; }
.permissions-halo::before { content: ''; position: absolute; inset: 27px; border: 1px solid #e0e8fa; border-radius: inherit; }
.permissions-halo::after { content: ''; position: absolute; width: 9px; height: 9px; right: 12%; top: 14%; border: 2px solid var(--canvas); border-radius: 50%; background: #adc4f7; }
.permissions-stage { position: relative; }
.permissions-vector { display: block; width: 100%; height: 526px; overflow: visible; font-family: Inter, Arial, sans-serif; font-optical-sizing: none; text-rendering: geometricPrecision; }
.permissions-vector text { fill: #7384a0; font-size: 11px; font-weight: 400; }
.permissions-vector .vector-icon { fill: none; stroke: #7291c3; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.permission-surface { width: calc(100% - 40px); stroke-width: 1px; }
.permission-back-layer { fill: #f1f5ff; stroke: #dce6fa; }
.permission-middle-layer { fill: #e4edff; stroke: #ccdaf5; }
.permission-front-layer { fill: #fff; stroke: #cbd9f2; }
.permission-title-tile { fill: #edf2ff; stroke: #dbe5ff; stroke-width: 1px; }
.permissions-pose > .vector-icon { stroke: var(--blue); }
.permissions-vector .permission-panel-title { fill: var(--ink); font-size: 15px; font-weight: 500; }
.permissions-vector .permission-rules text { font-size: 10px; fill: #7087ad; }
.permission-rules .vector-icon { stroke: #8599b9; }
.permission-divider { width: calc(100% - 88px); fill: #e5ebf7; }
.permission-row-tile { fill: #f8faff; stroke: #e7edfa; stroke-width: 1px; }
.permissions-vector .permission-row-title { fill: var(--ink); font-size: 13px; font-weight: 500; }
.permission-toggle { pointer-events: none; }
.permission-toggle > rect { fill: #e0e5ef; }
.permission-toggle.is-on > rect { fill: var(--blue); }
.permission-toggle > circle { fill: #fff; }
.permission-summary-surface { width: calc(100% - 88px); fill: #f2f6ff; stroke: #e0e8fa; stroke-width: 1px; }
.permission-status-dot { fill: #258d72; }
.permissions-vector #permission-summary text { font-size: 10px; fill: #6f84a9; }
.permission-summary-narrow { display: none; }
.permissions-vector .permission-vector-note { font-size: 10px; fill: #8796ad; }
.permission-seal-shadow { fill: #e4ebf7; }
.permission-seal-surface { fill: var(--pale); stroke: #cfddf7; stroke-width: 1px; }
.permission-seal-icon { fill: var(--blue); }
.permission-vector-seal .vector-icon { stroke: #fff; }
.permission-vector-seal .vector-icon:last-child { stroke: #459378; }
.permissions-vector .permission-seal-title { fill: #253e68; font-size: 12px; font-weight: 500; }
.permissions-vector .permission-seal-description { fill: #7086a6; font-size: 9px; }
@media (max-width: 1199px) and (min-width: 768px) {
  .permissions-vector .permission-panel-title { font-size: 13px; }
  .permissions-vector .permission-panel-subtitle { font-size: 10px; }
  .permissions-vector .permission-row-title { font-size: 12px; }
  .permissions-vector .permission-row-description { font-size: 10px; }
  .permission-summary-wide { display: none; }
  .permission-summary-narrow { display: inline; }
}
@media (max-width: 767px) {
  .permissions-illustration { max-width: 520px; justify-self: center; }
  .permissions-vector .permission-panel-title { font-size: 13px; }
  .permissions-vector .permission-panel-subtitle { font-size: 10px; }
  .permissions-vector .permission-row-title { font-size: 12px; }
  .permissions-vector .permission-row-description { font-size: 10px; }
  .permission-rules text { display: none; }
  .permission-rules .vector-icon { x: -72px; }
  .permission-summary-wide { display: none; }
  .permission-summary-narrow { display: inline; }
  .permissions-vector .permission-vector-note { font-size: 9px; }
}
@media (max-width: 374px) {
  .permissions-illustration { width: calc(100% + 24px); }
  .permissions-vector .permission-panel-title { font-size: 12px; }
  .permissions-vector .permission-row-title { font-size: 11px; }
  .permissions-vector .permission-row-description { font-size: 9px; }
}