/* ------------------------- MODERNIZED UX (v2) ----------------------------- */

  /* static panels v2*/

  .static-panel {
    display: none;
    position: absolute;
  }

  .static-panel button {
    backdrop-filter: blur(3px);
    /*background: #ffffff77;*/
    background: radial-gradient(circle, #ffffff77 55%, #ffffff00 130%) !important;

    pointer-events: auto;
    padding: 7px;
    border-radius: 6px;
  }

  .static-panel button.more-btn {
    background: transparent !important;
  }

  .static-panel .navigator button {
    border-radius: 50%;
    fill: #0f97dba3 !important;
    /* background: radial-gradient(circle, #ffffff77 20%, #ffffff00 70%) !important; */
    width: 50px;
    /* margin-right: 30px !important; */
    border: 3px solid #ffffff33;
  }

  .static-panel .navigator button svg {
    margin: 10px;
  }

  .static-toolbar {
    position: absolute;
    top: 0;
    /* left: calc(50vw); */
    display: flex;
    pointer-events: none;
    transform-origin: left top;
  }

  .static-toolbar.center {
    left: calc(50vw);
  }

  .bottom-pad-layout button>p>span,
  .floating-pad-layout button>p>span {
    font-size: 14px;
    float: left;
    background-color: #0052A3;
    color: white;
    padding: 3px 5px;
    text-align: center;
    border-radius: 5px;
    margin-left: 1px;
    margin-top: 3px;
  }

  .bottom-pad-layout button:active,
  .floating-panel-body button:active {
    transform: translateY(2px);
  }

  .bottom-pad-layout button:hover,
  .floating-panel-body button:hover {
    background-color: #ccc;
    transition: 0.3s;
  }

  /* Style for the textarea (DISABLED)
  #frame-speech-editor textarea {
  border: 2px solid #cccccccc;
  border-radius: 8px;
  padding: 10px;
  font-size: 16px;
  rows: 4
  }*/

  .static-toolbar.horizontal {
    margin-top: 12px;
    height: auto;
  }

  .static-toolbar.vertical {
    margin-left: 5px;
    margin-right: 5px;
    width: auto;
  }

  .horizontal .toolbar-content {
    flex-direction: row;
  }

  .vertical .toolbar-content {
    flex-direction: column;
  }

  .toolbar-content.center {
    display: flex;
    /* Already applied */
    justify-content: center;
    align-items: center;
  }

  .toolbar-content.center svg.inner {
    min-width: 50px;
    margin-top: 30px;
    margin-right: -48px;
  }

  .toolbar-content.left {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }

  .toolbar-content.bottom {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }

  .toolbar-content.top {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
  }

  .toolbar-content {
    display: flex;
    justify-content: flex-start;
    /* pointer-events: none; */
  }

  .toolbar-button {
    backdrop-filter: blur(5px);
    background-color: rgba(14, 165, 233, 0.4);
    pointer-events: auto;
    margin: 0 5px;
    padding: 10px;
  }

  .cmd-spad button {
    height: 100%;
    width: 50px;
    border: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: auto;
  }

  .gap15 {
    gap: 15px;
  }

  .gap25 {
    gap: 25px;
  }


  .cmd-spad.f-row button {
    /* margin-right: 16px; */
  }

  .cmd-spad.f-column button {
    /* margin-bottom: 16px; */
  }

  #top-main-static-panel-slider button.activated,
  .cmd-spad button.activated {
    border: 3px solid #00cfff;
  }

  .cmd-spad button.warning {
    border: 4px solid red;
  }

  .cmd-spad button.disabled {
    /* stroke: grey; */
    fill: grey;
    background-color: #44444444;
    color: darkgrey;
  }

  #top-main-static-panel-slider {
    width: 100%;
    scale: 0.8;
    top: 24px;
  }

  #top-main-static-panel-slider button {
    width: 56px;
    height: 56px;
    border: 0;
    margin-left: 16px;
  }

  #tf-cbt-static-toolbar {
    top: calc(100dvh - 70px);
    left: calc(12vw);
  }

  @media(max-width: 800px) {
    #tf-cbt-static-toolbar {
      top: calc(100dvh - 130px);
      left: calc(25vw);
    }

    .forced-f-column-reverse {
      flex-direction: column-reverse !important;
    } 
  }

  #thermometer-static-toolbar {
    top: calc((20dvh* var(--toolbar-scale)));
    left: 80px;
    transform-origin: top left;
    height: 300px;
    width: 70px;
    /* scale: 1 !important; */
  }

  #thermometer-static-toolbar .c-range-slider {
    margin-top: 1em;
  }

  .c-range-slider.x2,
  .draggable.x2 {
    scale: 1.5
  }

  #top-ext-static-toolbar {
    top: calc((20dvh* var(--toolbar-scale)));
    left: 8px;
    transform-origin: top left;
  }

  #top-main-left-static-toolbar-body,
  #top-main-right-static-toolbar-body,
  #player-bottom-toolbar-body,
  #top-ext-static-toolbar-body {
    pointer-events: auto;
  }

  #top-ext-static-toolbar .toolbar-content {
    /*margin-top: calc(30dvh);*/
  }

  #gamifiers-settings {
    top: calc(100dvh - 160px);
  }

  #gamifiers-settings-slider input[type=range] {
    width: 400px;
  }

  #player-bottom-toolbar {
    top: calc(100dvh - 60px);
  }

  #palette-toolbar-body button {
    margin-right: 10px;
  }

  #frames-navigator {
    top: calc(100dvh - 60px - 80px);
    left: 8px;
    transform-origin: top left;
  }

  /* #frames-navigator-vert {
    top: calc(40dvh);
    left: 8px;
    transform-origin: top left;
  } */


  #frames-navigator-body {
    flex-wrap: wrap;
  }

  .static-panel .navigator.teleport button {
    fill: red;
  }

  #shapes-toolbar {
    top: calc(60dvh);
    left: 8px;
    transform-origin: top left;
  }

  #palette-toolbar {
    left: calc(100dvw - (16px) - (72px));
    top: calc((15dvh* var(--toolbar-scale)));
    transform-origin: left top;
  }

  /* draggable preview */
  .draggable {
    cursor: grab;
    user-select: none;
    pointer-events: auto;
    color: #444;
    text-align: left;
    font-size: 30px;
    transform-origin: left top;
  }

  .draggable div {
    width: 12px;
    height: 12px;
    flex: 0 0 calc(50% - 3px);
    background: radial-gradient(circle, #ffffff77 25%, #ffffff00 50%) !important;
    border: 1px solid #ccc;
    border-radius: 50%;
  }

  .horizontal .draggable {
    width: 50px;
    height: 50px;
    margin-right: 6px;
  }

  .vertical .draggable {
    width: 60px;
    height: 50px;
    margin-bottom: 6px;
    flex-direction: column;
    transform: rotate(-90deg) translate(-50px, 5px);
  }

  .preview {
    display: none;
    position: absolute;
    scale: 0.99;
    backdrop-filter: blur(10px);
    background-color: rgba(225, 225, 225, 0.6);
    border: 2px dashed #ccc;
    color: #444;
    text-align: center;
    font-size: 25px;
    line-height: 45px;
    margin: 4px 4px;
    pointer-events: none;
    transform-origin: left top;
    z-index: 110;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .preview.vertical {
    padding: 5px;
    writing-mode: vertical-lr;
    text-orientation: upright;
  }

  #toolbar-warning-bottom {
    position: relative;
    bottom: 190px;
    left: 100px;
    background-color: #ff5f00;
    color: white;
    border: solid 4px red;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px 10px;
    max-width: 290px;
    border-radius: 10px;
    max-height: 140px;
    font-size: 16px;
    z-index: 120;
  }

  #toolbar-warning {
    position: relative;
    top: 20px;
    left: 100px;
    background-color: #ff5f00;
    color: white;
    border: solid 4px red;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px 10px;
    max-width: 290px;
    border-radius: 10px;
    max-height: 140px;
    font-size: 16px;
    z-index: 120;
  }

  #effects-side-toolbar {
    position: absolute;
    bottom: 20px;
    right: 20px;
    transform-origin: bottom right;
    pointer-events: none;
    /* !! to not block drawing on canvas and pop button. effects has very special partial visibility
  logic for its cmd buttons */
  }

  /* Arrange the buttons from bottom-right to top-left in 3 rows */
  #effects-side-toolbar-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    /* 3 rows of 50px each => total height = 150px */
    height: 150px;
    width: 280px;
    /* Align the wrapped rows at the bottom,
  and push items to the right initially */
    align-content: flex-end;
    justify-content: flex-end;
  }

  /* Make each button (with its SVG) 50×50 so things line up neatly.
  You may already have these rules for .ripple-container or the <button> etc. */
  #effects-side-toolbar-body button {
    width: 50px;
    height: 50px;
    /* optional spacing between buttons */
    margin: 8px;
    /* ensure the SVG fits well */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* #effects-side-toolbar{
    left: calc(100dvw - 60px - 6px);
    top: calc(100dvh - (350px * var(--toolbar-scale)));
    width: 60px;
    transform-origin: top left;
    }

    #effects-side-toolbar-body{
    flex-wrap: wrap;
    height: 232px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end
    }

    #effects-side-toolbar-body.cmd-spad button{
    margin-bottom: 10px;
    height: 50px;
    } */

  #palette-content {
    pointer-events: auto;
    backdrop-filter: blur(3px);
  }

  #palette-content .scroll-wrapper {
    height: auto;
  }

  #palette-toolbar .range-slider {
    pointer-events: auto;
  }

  #palette-toolbar .range-slider .input-range {
    width: 120px;
    min-width: 120px;
    height: 50px;
    pointer-events: auto;
  }

  /* IRO color picker */
  #circle-color-picker {
    width: 260px;
  }

  .pick-color-handle {
    position: absolute;
    top: -46px;
    width: 40px;
    height: 40px;
    align-self: center;
    align-content: center;
    left: 123px;
    background: none;
    border: solid white 0px;
    border-radius: 20px 20px;
    color: white;
    background: #33333388
  }

  .IroColorPicker {
    margin-bottom: -8px;
  }

  /* color picker */
  #color-input {
    display: none;
  }

  .color-label-container {
    height: 50px;
    width: 100px;
  }

  .color-label {
    height: 50px;
    width: 100px;
    margin-left: 5px;
  }

  .color-picker {
    padding: 5px;
  }

  .color-picker .f-row {
    justify-content: space-between;
    gap: 5px;
  }

  .color-block,
  .color-strip :hover {
    cursor: crosshair;
  }

  /* ------------------------- LEGACY UX levels based (v1) ----------------------------- */
  /* pop panels */
  .pop-panel {
    display: none;
    background: #33333388;
    position: absolute;
    border-radius: 6px;
    border: 1px solid #4f4f4f;
  }

  .drag-area.drag-header {
    background: #444;
  }

  .drag-area .drag-header span {
    margin: 5px 0;
    font-size: 18px;
  }

  .drag-area {
    cursor: move;
  }

  .pop-panel-header {
    width: 100%;
    color: white;
    background: #444;
    position: relative;
    top: 0;
    border-radius: 6px 6px 0 0;
    text-align: center;
    height: 52px;
    cursor: move;
  }

  .pop-panel-header>span {
    margin: 6px 6px 6px 12px;
    font-size: 26px;
  }

  .pop-panel-btn {
    font-size: 20px;
    border: 0.7px solid white;
    padding: 2px;
    margin: 2px;
  }

  .pop-panel-header-btn {
    float: right;
    padding: 0;
    cursor: pointer;
    margin-top: -8px;
    font-size: 49px;
    background: transparent;
    border: 0;
    color: white;
  }

  .pop-panel-header-btn svg {
    width: 32px;
    height: 32px;
  }

  .pop-panel-close-btn {
    float: right;
    padding: 0;
    cursor: pointer;
    margin-top: -8px;
    font-size: 49px;
    background: transparent;
    border: 0;
    color: white;
  }

  .pop-panel-btn-block {
    float: left;
    cursor: pointer;
    padding-top: 6px;
    padding-right: 6px;
  }

  /* panels v1 */

  /* floating-pad */
  .floating-panel-body {
    width: 361px;
    min-height: 90px;
    min-width: 100px;
    max-height: none !important;
  }

  .floating-pad-layout .scroll-wrapper {
    height: 100%;
  }

  .floating-pad-layout .scroll-body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .floating-pad-layout tr.splitter {
    height: 25px;
  }

  .floating-pad-layout tr.splitter span {
    color: white;
  }

  .floating-pad-layout button>p.deletion {
    background-color: #ce80cf;
  }

  #floating-pad-layout-close-button {
    margin: 3px;
    padding: 2px;
    height: 44px;
    width: 44px;
  }

  .floating-panel-deactivate-btn {
    width: 45px !important;
    height: 42px !important;
    margin: 4px 4px 4px;
    border: none;
    padding: 3px;
  }

  .bottom-pad-layout button>p>span,
  .floating-pad-layout button>p>span {
    font-size: 14px;
    float: left;
    background-color: #0052A3;
    color: white;
    padding: 3px 5px;
    text-align: center;
    border-radius: 5px;
    margin-left: 1px;
    margin-top: 3px;
  }

  .bottom-pad-layout button:active,
  .floating-panel-body button:active {
    transform: translateY(2px);
  }

  .bottom-pad-layout button:hover,
  .floating-panel-body button:hover {
    background-color: #ccc;
    transition: 0.3s;
  }

  /* Style for the textarea */
  #frame-speech-editor textarea {
    border: 2px solid #cccccccc;
    border-radius: 8px;
    padding: 10px;
    font-size: 16px;
    rows: 4
  }

  .bottom-pad-layout {
    padding: 3px;
  }

  .bottom-panel-body {
    width: 100%;
    min-height: 176px;
  }

  /* vertical-tab-buttons (floating-panel related) */
  .vertical-tab-buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    background: #33333388;
  }

  .vertical-tab-buttons button {
    position: relative;
    left: 0px;
    width: 40px;
    height: auto;
    min-height: 112px;
    background: transparent;
    border: 0px;
    color: white;
    border-radius: 20px;
  }

  .vertical-tab-buttons button:hover {
    border: solid #00cfff 4px;
    border-top: solid gold 0px;
    border-bottom: solid gold 0px;
  }

  .vertical-tab-buttons button:hover .vertical-text {
    margin-top: -15px;
  }

  .only-rotate {
    inline-size: fit-content;
    transform: rotate(-90deg);
  }

  .vertical-text {
    transform: rotate(90deg);
    text-wrap: wrap;
  }

  /* overlay-icon (SVG badge 'New' related)*/
  .overlay-icon {
    position: absolute;
    top: 40px;
    right: -11px;
    width: 64px;
    scale: 0.9;
  }

  .select-container .overlay-icon {
    position: absolute;
    top: 30px;
    right: -21px;
    width: 64px;
    scale: 0.8;
  }

  #bottom-tools-panel .select-container .overlay-icon {
    position: absolute;
    top: 80px;
    right: -21px;
    scale: 0.8;
  }

  button.close {
    border: 0.5px solid #e46883;
    background: none;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 0.5;
    margin-bottom: 20px;
  }