@-webkit-keyframes shake {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake {
    -webkit-animation-name: shake;
    -webkit-animation-duration: 1s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
}
.shake {
    display:inline-block
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

.pulse {
  animation: pulse 1s ease-in-out infinite;
}
@keyframes highlight {
  0%   { background-color: rgba(255, 255, 0, 0.8); }
  100% { background-color: transparent; }
}

.highlight {
  animation: highlight 0.8s ease-out;
}

@keyframes innerOuterGlow {
  0% {
    box-shadow:
      0 0 0 rgba(255, 230, 100, 0),
      0 0 5px rgba(255, 230, 100, 0.2),
      0 0 0 0 rgba(255, 230, 100, 0);
  }
  50% {
    box-shadow:
      0 0 20px rgba(255, 230, 100, 0.8),
      0 0 40px rgba(255, 230, 100, 0.6),
      0 0 0 4px rgba(255, 255, 255, 0.2) inset;
  }
  100% {
    box-shadow:
      0 0 0 rgba(255, 230, 100, 0),
      0 0 5px rgba(255, 230, 100, 0.2),
      0 0 0 0 rgba(255, 230, 100, 0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
  40%, 43% { transform: translateY(-10px); }
  70% { transform: translateY(-5px); }
  90% { transform: translateY(-2px); }
}

.glow-bounce-breath {
  animation:
    innerOuterGlow 2.4s ease-in-out infinite,
    bounce 1.2s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
  border-radius: 8px;
  transition: box-shadow 0.4s ease-out;
  position: relative;
  z-index: 3;
}


html {
  overscroll-behavior-x: none;
} 
body {
  overscroll-behavior-x: none;
}
@charset "UTF-8";
.context-menu {
  border-radius: 4px;
  min-width: 130px;
  font-size: 15px;
  z-index: 10;
  background: #FFF;
  color: #4e4e4e; }
  .context-menu.dark, .context-menu.dark .submenu {
    background: #1d1d1d;
    color: #969696;
    box-shadow: 2px 3px 8px black; }
  .context-menu.dark li:not(.disabled) button:hover {
    background-color: #2f2f2f; }
  .context-menu.dark ul {
    border-top: 1px solid #676767; }
  .context-menu.light, .context-menu.light .submenu {
    background: #ffffff;
    color: #4e4e4e;
    box-shadow: 2px 3px 6px #545454; }
  .context-menu.light li:not(.disabled) button:hover {
    background-color: #efefef; }
  .context-menu.light ul {
    border-top: 1px solid #eaeaea; }
  .context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding: 4px 0; }
    .context-menu ul:first-child {
      border-top: 0; }
  .context-menu li.disabled {
    opacity: .5; }
  .context-menu button {
    background: none;
    border: none;
    border-radius: 0;
    padding: 3px 2px 3px 7px;
    width: 100%;
    color: inherit;
    display: flex;
    align-items: center;
    font-size: inherit;
    outline: none; }
    .context-menu button span.label {
      flex-grow: 1;
      text-align: left; }
    .context-menu button span.label.sublabel {
      font-size: 70%;
      opacity: 0.8;
      margin-left: 30px;
      margin-right: 10px;
      text-align: right; }
    .context-menu button i.submenu-expand {
      display: inline-block;
      font: normal normal normal 14px/1 sans-serif;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased; }
      .context-menu button i.submenu-expand:after {
        content: '⏵'; }


.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

.form-range-warning::-webkit-slider-thumb {
    background-color: #b08912;
}
.form-range-warning::-moz-range-thumb {
    background-color: #b08912;
    border: none;
}
.form-range-warning::-ms-thumb {
    background-color: #b08912;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.palette{
  margin-left: 0px;
  
}


.xaxis path{
  stroke: black; 
}
.xaxis line{
  stroke: black; 
}
.xaxis text {
      /* for lines and ticks */
  fill: black;       /* for text */
}
.palette .color {
  width: 20px;
  height: 20px;
  border-radius: 1px;
  background: red;
  margin-top: 4.8px;

  margin-left: 4.8px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  border: 1px solid #B8B8c7;
  box-shadow: 2.4px 2.4px 0 0 rgba(0, 0, 0, 0.2);
}
.palette .color:hover {
  border-color: #ffffff;
}

.palette .color.dark:after {
  color: #fff;
}

svg {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.floating-panel {
    position: fixed;
    top: 100px;
    left: 100px;
    width: 520px;
    background: #EFF2F5;
    border: 1px solid #1e1e2d;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 1000;
    user-select: none;
    font-family: inherit;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #1e1e2d;
    border-bottom: 1px solid #ddd;
    cursor: move;
    border-radius: 6px 6px 0 0;
}

.panel-title { font-size: 0.85rem;  color:#b8b8c7 }

.panel-controls { display: flex; gap: 4px; }

.panel-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    color: #555;
}

.panel-btn:hover { background: rgba(0,0,0,0.08); }

.panel-body { padding: 10px; }

.panel-toolbar {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    align-items: center;
}

.panel-sig-select {
    flex: 1;
    height: 26px;
    font-size: 13px;
}

.panel-plot {
    border: 1px solid #eee;
    background: white;
    display: block;
    margin-bottom: 10px;
}

.panel-controls-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.floating-panel.minimized .panel-body { display: none; }

.panel-toolbar-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    font-size: 11px;
}

.panel-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.ctrl-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.ctrl {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ctrl label {
    font-size: 10px;
    color: #555;
    margin: 0;
    line-height: 1;
}

.ctrl-pair {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ctrl-num {
    height: 20px;
    width: 50px;
    font-size: 11px;
    padding: 0 4px;
}

.ctrl-range {
    width: 80px;
    height: 16px;
}

.ctrl-select {
    height: 22px;
    width: 180px;
    font-size: 11px;
    padding: 0 4px;
}
.ctrl-medium {
    height: 22px;
    width: 90px;
    font-size: 11px;
    padding: 0 4px;
}


.ctrl-select-sm {
    height: 22px;
    width: 70px;
    font-size: 11px;
    padding: 0 4px;
}

.btn-xs {
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.2;
}

#loop_table td {
    padding: 0px;
    vertical-align: middle;
     height: 22px;
}
#loop_table input, #loop_table select {
    height: 22px;
    padding: 1px 3px;
    font-size: 11px;
    box-sizing: border-box;
}
.toolbar-section {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 12px;
}
.toolbar-section > label {
    margin: 0 4px 0 0;
    color: #555;
}
.toolbar-btn {
    height: 30px;
    padding: 0 6px !important;  /* override Bootstrap */
    font-size: 11px;
    line-height: 1;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.toolbar-btn i {
    font-size: 12px;
}
.toolbar-btn .caret {
    margin-left: 4px;
    width: 8px;
    height: 8px;
}
.toolbar-icon-btn {
    height: 30px;
    width: 30px;
    padding: 0px !important;  /* override Bootstrap */
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.toolbar-icon-btn i { font-size: 14px; }
.toolbar-switch {
    display: inline-flex;
    align-items: center;
    margin: 0 2px;
}
.toolbar-switch .form-check-input {
    height: 14px;
    width: 24px;
    margin: 0;
}
.toolbar-switch {
    display: inline-flex;
    align-items: center;
    margin: 0 2px;
    padding-left: 2em; /* Bootstrap form-switch needs room for the track */
    min-height: auto;
}
.toolbar-switch .form-check-input {
    height: 18px;
    width: 28px;
    margin: 0;
    margin-left: -2.0em;
}
.toolbar-input-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e6e1e1;
    border-radius: 2px;
    height: 30px;
    margin: 0 2px;
}
.toolbar-input-group .toolbar-icon-btn {
    border: none !important;
    border-right: 1px solid #e6e1e1; !important;
    border-radius: 0;
    height: 28px;
    margin: 0;
}
.toolbar-input-group .toolbar-switch {
    padding: 0 8px 0 2.4em;
    margin: 0;
    height: 28px;
}
.toolbar-switch .form-check-input:checked {
    background-color: #ebc334;  /* muted grey */
    border-color: #ebc334;
}

.settings-section { margin-bottom: 0px; }
  .settings-section-title { color: #9ca3af; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: px; }
  .settings-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-bottom: 6px; }
  .settings-row label { color: #f8f9fa; font-size: 13px; }
  .settings-row .controls { display: flex; align-items: center; gap: 6px; }
  .settings-unit { color: #9ca3af; font-size: 12px; }


.go-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: #000;          /* shows through as the bars */
  /* !important: in interactive mode #stage carries an inline display:none
     (DragHandles.js); fullscreen has to show it anyway */
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.go-fullscreen canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;       /* preserve aspect ratio */
}
tags.tagify .tagify__input {
    min-width: 60px !important;
    flex-grow: 1 !important;
}
tags.tagify .tagify__tag,
tags.tagify .tagify__tag * {
    -webkit-user-select: none !important;
    user-select: none !important;
}


body.is-fullscreen,
body.is-fullscreen #alltherest,
body.is-fullscreen #stage {
  opacity: 1 !important;
}
/* The cursor: the arrow everywhere, except where text is typed (text and number inputs, text
   areas, editable text, the tag boxes). With the browser left to choose ("auto"), it showed the
   text cursor over the timeline wherever selectable text lay under it (the asset panel's).
   What sets its own cursor (a clip's edges, the crosshair, buttons, links) keeps it. */
body { cursor: default; }
input:not([type]), input[type="text"], input[type="number"], input[type="search"], input[type="email"],
input[type="password"], input[type="url"], input[type="tel"], textarea, [contenteditable=""],
[contenteditable="true"], .tagify__input { cursor: text; }