/* AnimGraph system styles: effects overlay, dialogs, UI windows/menus, loading keyframes, skins base */
.ag-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.ag-overlay.ag-overlay-top {
  z-index: 200000;
}

/* Dialog layer */
.ag-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 32000;
  pointer-events: none;
}

.ag-dialog-layer.ag-hidden {
  display: none;
}

.ag-modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ag-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  pointer-events: auto;
}

.ag-dialog {
  position: relative;
  width: 460px;
  max-width: calc(100% - 40px);
  background: #C0C0C0;
  color: #000;
  border: 1px solid #000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .25), inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

.ag-titlebar {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  background-image: linear-gradient(#1a31a2, #1a31a2), linear-gradient(#000080, #000080);
  background-size: 100% 50%, 100% 50%;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  color: #fff;
  border-bottom: 1px solid #404040;
  text-shadow: 1px 1px 0 #000;
  user-select: none;
}

.ag-title {
  flex: 1;
  font-weight: bold
}

.ag-body {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border-top: 1px solid #fff
}

.ag-content {
  flex: 1;
  min-width: 240px;
  max-height: 60vh;
  overflow: auto;
}

.ag-msg {
  white-space: pre-wrap;
}

.ag-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px;
  background: #C0C0C0;
  border-top: 1px solid #000
}

.ag-btn {
  height: 22px;
  padding: 0 12px;
  border: 1px solid #000;
  background: #C0C0C0;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
  cursor: pointer;
  font: 12px "MS Sans Serif", Tahoma, Arial, sans-serif;
}

.ag-btn:active {
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff
}

.ag-icon {
  width: 32px;
  height: 32px;
  margin-top: 2px;
  flex: none;
  background: #eaeaea;
  border: 1px solid #888;
}

.ag-icon-info {
  background: linear-gradient(#dff3ff, #a2d7ff);
  border-color: #3a84c3;
}

.ag-icon-warning {
  background: linear-gradient(#fff4d9, #ffd37a);
  border-color: #c38a3a;
}

.ag-icon-error {
  background: linear-gradient(#ffd9d9, #ff9a9a);
  border-color: #c33a3a;
}

.ag-icon-question {
  background: linear-gradient(#eee, #ddd);
  border-color: #666;
}

/* Busy cursor (opt-in) */
.ag-busy-cursor {
  cursor: wait !important;
}

/* Keyframes */
@keyframes ag-spin {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

@keyframes ag-panel-run {
  0% {
    transform: translateX(0%)
  }

  50% {
    transform: translateX(400%)
  }

  100% {
    transform: translateX(0%)
  }
}

@keyframes ag-marquee-slide {
  from {
    background-position: 0 0
  }

  to {
    background-position: 32px 0
  }
}

/* Effects helpers */
.ag-sparkle {
  will-change: transform, opacity;
  transform-origin: center center;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25));
}

.ag-ripple {
  will-change: transform, opacity;
  transform-origin: center center;
}

.ag-highlight,
.ag-glow {
  will-change: opacity;
  box-sizing: border-box;
}

.ag-scanflash {
  will-change: opacity;
}

.ag-tv,
.ag-tv-bar,
.ag-burst,
.ag-dot {}

/* Loading */
.ag-loading-overlay {}

.ag-loading-text {
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
}

/* marquee95 */
.ag-marquee95-track {
  background: #e6e6e6;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
  overflow: hidden;
}

.ag-marquee95-fill {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 8px, rgba(0, 0, 0, .12) 8px 16px);
  animation: ag-marquee-slide .6s linear infinite;
}

/* bytes */
.ag-bytes-line {
  margin: 2px 0;
}

.ag-bytes-bar {
  position: relative;
  height: 8px;
  margin-top: 6px;
  background: #e6e6e6;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}

.ag-bytes-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
}

/* System UI layer */
.ag-ui-layer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 31500;
  pointer-events: none;
}

/* Win95 window/menu base */
.ag-win {
  position: absolute;
  left: 120px;
  top: 120px;
  width: 480px;
  height: 260px;
  background: #C0C0C0;
  color: #000;
  border: 1px solid #000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .25), inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

.ag-win.ag-hidden {
  display: none !important;
}

.ag-win.ag-win-active {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

.ag-win-titlebar {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  background-image: linear-gradient(#1a31a2, #1a31a2), linear-gradient(#000080, #000080);
  background-size: 100% 50%, 100% 50%;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  color: #fff;
  border-bottom: 1px solid #404040;
  text-shadow: 1px 1px 0 #000;
  user-select: none;
  cursor: move;
}

.ag-win-title {
  flex: 1;
  font-weight: bold;
}

.ag-win-btn {
  width: 18px;
  height: 18px;
  background: #C0C0C0;
  color: #000;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer
}

.ag-win-btn:active {
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff
}

.ag-win-content {
  flex: 1;
  background: #fff;
  border-top: 1px solid #fff;
  overflow: auto;
  padding: 0;
}

/* Menu */
.ag-menu {
  position: absolute;
  min-width: 200px;
  background: #C0C0C0;
  color: #000;
  border: 1px solid #000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .25), inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
  pointer-events: auto;
  z-index: 32500;
}

.ag-menu.ag-submenu {
  position: fixed;
}

.ag-menu-sep {
  border-top: 1px solid #808080;
  border-bottom: 1px solid #fff;
  margin: 4px 2px;
}

.ag-menu-item {
  display: grid;
  grid-template-columns: 1fr auto 16px;
  gap: 8px;
  align-items: center;
  padding: 2px 8px;
  cursor: default;
  user-select: none;
}

.ag-menu-item:hover {
  background: #000080;
  color: #fff;
}

.ag-menu-item.disabled {
  opacity: .55;
  pointer-events: none;
}

.ag-mi-hk {
  opacity: .7
}

.ag-mi-arrow {
  text-align: right
}

/* Skin base flags */
.ag-skin-win95 {}

.ag-skin-xp-olive {}

.ag-skin-xp-blue {}

.ag-skin-xp-silver {}

/* Base for taskbar (skin provides look) */
.ag-taskbar {
  pointer-events: auto;
  user-select: none;
}