/*!****************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/shader-editor/scss/index.scss ***!
  \****************************************************************************************************************************/
@charset "UTF-8";
/* ---------- THEME VARIABLES ---------- */
.text-muted {
  color: #9ca3af;
}

/* ===== BG / SURFACE COLORS ===== */
.bg-base {
  background: #1e1e1e;
}

.bg-panel {
  background: #252526;
}

.bg-hover {
  background: rgb(47.73, 47.73, 49.02);
}

.border {
  border: 1px solid rgba(255, 255, 255, 0.363);
}

.border-top {
  border-top: 1px solid rgba(255, 255, 255, 0.363);
}

.border-bottom {
  border-bottom: 1px solid rgba(255, 255, 255, 0.363);
}

/* 🎨 Backgrounds and Colors */
.bg-dark {
  background: #252526;
}

.text-light {
  color: #fff;
}

/* 🧭 Borders and Outline */
.border-light {
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.border-subtle {
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.border-bottom-light {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* ⚠️ Alerts and States */
.outline-alert {
  outline: 2px dashed #ff4d4d !important;
}

.bg-hover-panel {
  background: rgb(184.2067039106, 189.2122905028, 197.7932960894);
}

/* ===========================================
   GLOBAL UTILITY CLASS SYSTEM
   Inspired by Tailwind / Chakra / Bootstrap Utility Mix

  Utility Class	                                        Purpose
  flex, flex-col, flex-row	                            Layout control
  items-center, justify-between, justify-center	        Alignment
  gap-md, gap-sm	                                      Spacing
  w-full, h-full, min-h-0, min-w-0	                    Dimension stability
  bg-base, bg-panel, text-contrast, text-muted	        Theming
  border, border-b, border-base	                        Subtle borders
  p-xs, p-sm, p-md	                                    Padding
  outline-alert	                                        Error state border
  cursor-col-resize, cursor-row-resize	                Draggable UI indicators
   =========================================== */
/* Spacing Scale */
/* Border Radius Scale */
/* ====== FLEXBOX ====== */
.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-1 {
  flex: 1 1 auto;
}

.flex-none {
  flex: none;
}

.flex-auto {
  flex: auto;
}

/* Alignment */
.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

/* Center Helpers */
.center-both {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-x {
  display: flex;
  justify-content: center;
}

.center-y {
  display: flex;
  align-items: center;
}

/* ====== SPACING UTILITIES ====== */
.p-0 {
  padding: 0;
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.pt-0 {
  padding-top: 0;
}

.pr-0 {
  padding-right: 0;
}

.pb-0 {
  padding-bottom: 0;
}

.pl-0 {
  padding-left: 0;
}

.m-0 {
  margin: 0;
}

.mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.mt-0 {
  margin-top: 0;
}

.mr-0 {
  margin-right: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.ml-0 {
  margin-left: 0;
}

.p-1 {
  padding: 4px;
}

.px-1 {
  padding-left: 4px;
  padding-right: 4px;
}

.py-1 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.pt-1 {
  padding-top: 4px;
}

.pr-1 {
  padding-right: 4px;
}

.pb-1 {
  padding-bottom: 4px;
}

.pl-1 {
  padding-left: 4px;
}

.m-1 {
  margin: 4px;
}

.mx-1 {
  margin-left: 4px;
  margin-right: 4px;
}

.my-1 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.mt-1 {
  margin-top: 4px;
}

.mr-1 {
  margin-right: 4px;
}

.mb-1 {
  margin-bottom: 4px;
}

.ml-1 {
  margin-left: 4px;
}

.p-2 {
  padding: 8px;
}

.px-2 {
  padding-left: 8px;
  padding-right: 8px;
}

.py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.pt-2 {
  padding-top: 8px;
}

.pr-2 {
  padding-right: 8px;
}

.pb-2 {
  padding-bottom: 8px;
}

.pl-2 {
  padding-left: 8px;
}

.m-2 {
  margin: 8px;
}

.mx-2 {
  margin-left: 8px;
  margin-right: 8px;
}

.my-2 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.mt-2 {
  margin-top: 8px;
}

.mr-2 {
  margin-right: 8px;
}

.mb-2 {
  margin-bottom: 8px;
}

.ml-2 {
  margin-left: 8px;
}

.p-3 {
  padding: 12px;
}

.px-3 {
  padding-left: 12px;
  padding-right: 12px;
}

.py-3 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.pt-3 {
  padding-top: 12px;
}

.pr-3 {
  padding-right: 12px;
}

.pb-3 {
  padding-bottom: 12px;
}

.pl-3 {
  padding-left: 12px;
}

.m-3 {
  margin: 12px;
}

.mx-3 {
  margin-left: 12px;
  margin-right: 12px;
}

.my-3 {
  margin-top: 12px;
  margin-bottom: 12px;
}

.mt-3 {
  margin-top: 12px;
}

.mr-3 {
  margin-right: 12px;
}

.mb-3 {
  margin-bottom: 12px;
}

.ml-3 {
  margin-left: 12px;
}

.p-4 {
  padding: 16px;
}

.px-4 {
  padding-left: 16px;
  padding-right: 16px;
}

.py-4 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.pt-4 {
  padding-top: 16px;
}

.pr-4 {
  padding-right: 16px;
}

.pb-4 {
  padding-bottom: 16px;
}

.pl-4 {
  padding-left: 16px;
}

.m-4 {
  margin: 16px;
}

.mx-4 {
  margin-left: 16px;
  margin-right: 16px;
}

.my-4 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.mt-4 {
  margin-top: 16px;
}

.mr-4 {
  margin-right: 16px;
}

.mb-4 {
  margin-bottom: 16px;
}

.ml-4 {
  margin-left: 16px;
}

.p-5 {
  padding: 20px;
}

.px-5 {
  padding-left: 20px;
  padding-right: 20px;
}

.py-5 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.pt-5 {
  padding-top: 20px;
}

.pr-5 {
  padding-right: 20px;
}

.pb-5 {
  padding-bottom: 20px;
}

.pl-5 {
  padding-left: 20px;
}

.m-5 {
  margin: 20px;
}

.mx-5 {
  margin-left: 20px;
  margin-right: 20px;
}

.my-5 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.mt-5 {
  margin-top: 20px;
}

.mr-5 {
  margin-right: 20px;
}

.mb-5 {
  margin-bottom: 20px;
}

.ml-5 {
  margin-left: 20px;
}

.p-6 {
  padding: 24px;
}

.px-6 {
  padding-left: 24px;
  padding-right: 24px;
}

.py-6 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.pt-6 {
  padding-top: 24px;
}

.pr-6 {
  padding-right: 24px;
}

.pb-6 {
  padding-bottom: 24px;
}

.pl-6 {
  padding-left: 24px;
}

.m-6 {
  margin: 24px;
}

.mx-6 {
  margin-left: 24px;
  margin-right: 24px;
}

.my-6 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.mt-6 {
  margin-top: 24px;
}

.mr-6 {
  margin-right: 24px;
}

.mb-6 {
  margin-bottom: 24px;
}

.ml-6 {
  margin-left: 24px;
}

.p-8 {
  padding: 32px;
}

.px-8 {
  padding-left: 32px;
  padding-right: 32px;
}

.py-8 {
  padding-top: 32px;
  padding-bottom: 32px;
}

.pt-8 {
  padding-top: 32px;
}

.pr-8 {
  padding-right: 32px;
}

.pb-8 {
  padding-bottom: 32px;
}

.pl-8 {
  padding-left: 32px;
}

.m-8 {
  margin: 32px;
}

.mx-8 {
  margin-left: 32px;
  margin-right: 32px;
}

.my-8 {
  margin-top: 32px;
  margin-bottom: 32px;
}

.mt-8 {
  margin-top: 32px;
}

.mr-8 {
  margin-right: 32px;
}

.mb-8 {
  margin-bottom: 32px;
}

.ml-8 {
  margin-left: 32px;
}

.p-10 {
  padding: 40px;
}

.px-10 {
  padding-left: 40px;
  padding-right: 40px;
}

.py-10 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.pt-10 {
  padding-top: 40px;
}

.pr-10 {
  padding-right: 40px;
}

.pb-10 {
  padding-bottom: 40px;
}

.pl-10 {
  padding-left: 40px;
}

.m-10 {
  margin: 40px;
}

.mx-10 {
  margin-left: 40px;
  margin-right: 40px;
}

.my-10 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.mt-10 {
  margin-top: 40px;
}

.mr-10 {
  margin-right: 40px;
}

.mb-10 {
  margin-bottom: 40px;
}

.ml-10 {
  margin-left: 40px;
}

/* ====== SIZE UTILITIES ====== */
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

/* ====== BORDER RADIUS UTILITIES ====== */
.rounded-sm {
  border-radius: 4px;
}

.rounded-md {
  border-radius: 6px;
}

.rounded-lg {
  border-radius: 10px;
}

.rounded-xl {
  border-radius: 16px;
}

/* ===== TEXT ===== */
.text-sm {
  font-size: 12px;
}

.text-md {
  font-size: 14px;
}

.text-lg {
  font-size: 18px;
}

.text-xl {
  font-size: 22px;
}

/* ===== HOVER EFFECTS ===== */
.hover-scale:hover {
  transform: scale(1.02);
}

.hover-highlight:hover {
  background: rgba(255, 255, 255, 0.08);
}

/*
//How to Use It
//Horizontal row layout
<div class="flex flex-row items-center gap-8">
  <button>A</button>
  <button>B</button>
  <button>C</button>
</div>

//Vertical stack layout
<div class="flex flex-col gap-6">
  <div>Line 1</div>
  <div>Line 2</div>
</div>

//Center content
<div class="center-both h-full w-full">
  <p>Centered!</p>
</div>

//Flex split panels
<div class="flex flex-row h-full">
  <div class="flex-1">Left</div>
  <div class="flex-1">Right</div>
</div>

*/
/* ================================
   🔧 IDE UTILITY EXTENSIONS
   ================================ */
/* 🧭 Cursor Types */
.cursor-pointer {
  cursor: pointer;
}

.cursor-col-resize {
  cursor: col-resize;
}

.cursor-row-resize {
  cursor: row-resize;
}

.cursor-default {
  cursor: default;
}

.cursor-text {
  cursor: text;
}

/* 🧱 Display & Flex */
.gap-xs {
  gap: 4px;
}

.gap-sm {
  gap: 8px;
}

.gap-md, .ide-header {
  gap: 12px;
}

/* 🧩 Size Helpers */
.min-w-0, .panel {
  min-width: 0;
}

.min-h-0, .panel {
  min-height: 0;
}

/* 🧭 Borders and Outline */
.rounded-sm {
  border-radius: 3px;
}

.rounded {
  border-radius: 4px;
}

.rounded-md {
  border-radius: 6px;
}

/* 🚫 User Select */
.no-select, .placeholder {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* 🧩 Dividers */
.divider-vertical {
  width: 6px;
  flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
}

.divider-horizontal {
  height: 6px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
}

/* 🔤 Typography */
.text-sm, .placeholder {
  font-size: 13px;
}

.font-sans {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* 🧱 Panels */
.panel {
  overflow: hidden;
  box-sizing: border-box;
}

/* 🔳 Placeholder Style */
/* 🧠 Header Utility */
.ide-header {
  padding: 8px;
}

.ru-ide-resizable-root {
  position: relative;
  width: 100%;
  height: 100%;
}

.ru-ide-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  height: 400px;
  background: #1d1f23;
  border: 1px solid #555;
  display: flex;
  flex-direction: column;
}

.ru-title-bar {
  height: 32px;
  background: #2b2d33;
  cursor: move;
  display: flex;
  align-items: center;
  padding-left: 10px;
  color: #ddd;
  user-select: none;
  border-bottom: 1px solid #444;
}

/* Resize Handles */
.resize-handle {
  position: absolute;
  background: transparent;
}

.resize-handle.right {
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
}

.resize-handle.left {
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
}

.resize-handle.bottom {
  bottom: 0;
  left: 0;
  height: 6px;
  width: 100%;
  cursor: ns-resize;
}

.resize-handle.top {
  top: 0;
  left: 0;
  height: 6px;
  width: 100%;
  cursor: ns-resize;
}

/* Prevent accidental text selection during drag */
body.resizing {
  user-select: none !important;
  cursor: row-resize !important;
}

.ide-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.2s ease-in-out;
}
.ide-popup-overlay .ide-popup-content {
  background: #1f1f1f;
  border: 1px solid #333;
  border-radius: 8px;
  width: 80%;
  max-width: 900px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  animation: scaleIn 0.2s ease-out;
}
.ide-popup-overlay .ide-popup-content .ide-popup-body {
  padding: 16px;
  overflow-y: auto;
}
.ide-popup-overlay .ide-popup-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  color: #ccc;
  cursor: pointer;
  transition: color 0.2s ease;
}
.ide-popup-overlay .ide-popup-close:hover {
  color: #fff;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0.8;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* shader-ide.scss - drop this in your plugin/theme and compile to css or use raw if your setup supports scss import */
.ru-ide-root-php-template {
  position: relative; /* bounding container */
}

.ru-ide-workspace {
  position: relative; /* bounding container */
  /* Can be a flex environment or standalone container */
  overflow: hidden; /* prevent IDE window from escaping */
  background: var(--ru-base-1);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Basic reset for this component */
.ru-shader-ide-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%; /* IMPORTANT: fill the parent container */
  background: #1e1e1e;
  color: #fff;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.ru-horizontal {
  flex-direction: row;
}

.ru-vertical {
  flex-direction: column;
}

/* header */
.ru-ide-header {
  display: flex;
  align-items: left;
  justify-content: space-between;
  padding: 8px;
  background: #252526;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  gap: 12px;
  box-sizing: border-box;
}

.ru-shader-name {
  min-width: 180px;
  max-width: 50%;
  flex: 1 1 auto;
  background: #2d2d2d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 6px 8px;
  color: #fff;
  outline: none;
  box-sizing: border-box;
}

.ru-shader-name::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* toolbar */
.ru-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.ru-btn {
  background: #3a3d41;
  border: none;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.ru-btn:hover {
  background: #444;
}

.ru-stack-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  font-size: 13px;
  cursor: pointer;
}

.ru-stack-toggle input {
  cursor: pointer;
}

/* body (split area) */
.ru-ide-body {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  min-height: 0; /* allow child overflow to work inside flex */
}

/* split (side-by-side) */
.ru-ide-body.ru-split {
  flex-direction: row;
}

/* stacked (top-bottom) */
.ru-ide-body.ru-stacked {
  flex-direction: column;
}

/* panels */
.ru-panel {
  background: #1e1e1e;
  display: flex;
  flex-direction: column; /* ✅ REQUIRED */
  flex: 1 1 auto;
  min-width: 0; /* ✅ Prevents horizontal overflow */
  min-height: 0; /* ✅ Prevents vertical infinite growth */
  overflow: hidden; /* ✅ STOP Monaco from pushing panel */
  box-sizing: border-box;
}

.ru-panel-first {
  background: transparent; /* first panel gets explicit size via inline style from react */
}

.ru-panel-second {
  flex: 1 1 auto;
}

/* placeholders */
.ru-placeholder {
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: start;
  justify-content: center;
  color: #9ca3af;
  font-size: 13px;
  user-select: none;
}

/* divider for vertical (side-by-side) */
.ru-divider.ru-divider-vertical {
  width: 6px;
  cursor: col-resize;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  display: block;
  flex: 0 0 auto;
}
.ru-divider.ru-divider-vertical:hover {
  background: #555;
}

/* divider for horizontal (stacked) */
.ru-divider.ru-divider-horizontal {
  height: 6px;
  cursor: row-resize;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  display: block;
  flex: 0 0 auto;
}
.ru-divider.ru-divider-horizontal:hover {
  background: #555;
}

/* Prevent text selection while dragging */
.ru-no-select {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* small visual polish */
.ru-shader-ide-root .ru-panel,
.ru-shader-ide-root .ru-ide-header {
  border-radius: 3px;
}

.ru-alert-border {
  outline: 2px dashed #ff4d4d !important;
}

/* optional debug borders (uncomment while debugging) */
/*
.ru-shader-ide-root { outline: 1px dashed rgba(255,0,0,0.08); }
.ru-panel { outline: 1px dashed rgba(0,255,0,0.03); }
.ru-divider { outline: 1px solid rgba(255,255,255,0.02); }
*/
.shader-editor-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%; /* Ensure this wrapper takes full height */
}
.shader-editor-wrapper .shader-panels-header-controls {
  background: #252525;
  padding: 6px 10px;
  display: flex;
  gap: 10px;
  border-bottom: 1px solid #333;
  flex-shrink: 0; /* Prevents the header from shrinking */
}
.shader-editor-wrapper .shader-panels-header-controls .control-toggle-btn {
  background: #3a3a3a;
  color: #ddd;
  border: 1px solid #4a4a4a;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.85rem;
  transition: background 0.2s, border-color 0.2s;
  user-select: none;
}
.shader-editor-wrapper .shader-panels-header-controls .control-toggle-btn:hover {
  background: #454545;
}
.shader-editor-wrapper .shader-panels-header-controls .control-toggle-btn.active {
  background: #4caf50; /* Green for active */
  border-color: #66bb6a;
  color: #fff;
}
.shader-editor-wrapper .shader-panels-header-controls .control-toggle-btn.active:hover {
  background: #5cb860;
}
.shader-editor-wrapper .shader-panels-container {
  display: flex;
  flex: 1; /* This is crucial: allows the panels container to take the remaining height */
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #181818;
  color: #ddd;
}
.shader-editor-wrapper .shader-panels-container.hidden {
  opacity: 0;
  pointer-events: none;
}
.shader-editor-wrapper .shader-panels-container.stacked {
  flex-direction: column;
}
.shader-editor-wrapper .shader-panels-container.stacked .divider {
  height: 5px;
  cursor: row-resize;
  transition: background 0.2s;
  flex-shrink: 0;
  background: #444;
  /* &.hidden-but-present {
    opacity: 0;
    pointer-events: none; // Makes it unclickable

    // Ensure the divider has *some* size,
    // but the cursor changes and interaction are blocked.
    // Setting width/height to 0 when not needed is also an option,
    // but opacity: 0 with pointer-events: none often works better with flex.
    // For a cleaner look when hidden:
    &.stacked {
      height: 0px;
    }
    &.side-by-side {
      width: 0px;
    }
  } */
}
.shader-editor-wrapper .shader-panels-container.stacked .divider:hover {
  background: #555;
}
.shader-editor-wrapper .shader-panels-container.stacked .divider {
  /* &.faded {
    opacity: 0;
    pointer-events: none;
  } */
}
.shader-editor-wrapper .shader-panels-container.side-by-side {
  flex-direction: row;
}
.shader-editor-wrapper .shader-panels-container.side-by-side .divider {
  width: 5px;
  cursor: col-resize;
  background: #333;
  transition: background 0.2s, opacity 0.25s ease;
  flex: 0 0 auto;
}
.shader-editor-wrapper .shader-panels-container.side-by-side .divider:hover {
  background: #555;
}
.shader-editor-wrapper .shader-panels-container .shader-panel {
  display: flex;
  flex-direction: column;
  background: #202020;
  border: 1px solid #2c2c2c;
  overflow: hidden;
  position: relative;
  transition: flex-basis 0.25s ease, opacity 0.25s ease;
  flex: 1 1 auto;
}
.shader-editor-wrapper .shader-panels-container .shader-panel.hidden {
  opacity: 0;
  pointer-events: none;
  flex-basis: 0 !important;
}
.shader-editor-wrapper .shader-panels-container .shader-panel .shader-panel-header {
  display: flex; /* Added to align title and button */
  justify-content: space-between; /* Added to push button to the side */
  align-items: center; /* Added for vertical alignment */
  background: #2b2b2b;
  padding: 8px 12px;
  font-weight: 500;
  font-size: 0.9rem;
  border-bottom: 1px solid #383838;
  user-select: none;
}
.shader-editor-wrapper .shader-panels-container .shader-panel .shader-panel-header .panel-toggle-btn {
  /* New styles for the toggle button */
  /*display: none; // Hiding the old button*/
  background: none;
  border: none;
  color: #ddd;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.2s;
}
.shader-editor-wrapper .shader-panels-container .shader-panel .shader-panel-header .panel-toggle-btn:hover {
  color: #fff;
}
.shader-editor-wrapper .shader-panels-container .shader-panel .shader-panel-body {
  flex: 1;
  display: flex;
  min-height: 0; /* ❤️ important: prevents infinite growth */
  overflow: hidden;
  padding: 10px;
  font-family: monospace;
  font-size: 0.85rem;
}
.shader-editor-wrapper .shader-panels-container .divider {
  flex-shrink: 0;
  background: #444;
  transition: background 0.2s, opacity 0.25s ease;
}
.shader-editor-wrapper .shader-panels-container .divider:hover {
  background: #666;
}
.shader-editor-wrapper .shader-panels-container .divider.faded {
  opacity: 0;
  pointer-events: none;
  /* The width/height will be set to a fixed small size (5px) or 0 by the JS style or flex-shrink: 0, 
     but setting it small is better to maintain the flow, and letting the JS hide it completely */
}

.ide-tab-view-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%; /* Ensure this wrapper takes full height */
  box-sizing: border-box;
  border-radius: 6px;
  overflow: hidden;
}
.ide-tab-view-container .ide-tab-header {
  display: flex;
  gap: 2px;
  background: var(--ru-base-3);
  padding: 4px;
  user-select: none;
  overflow-x: auto;
  /* auto wrap if not enough width */
  flex-wrap: wrap;
}
.ide-tab-view-container .ide-tab-btn {
  padding: 6px 14px;
  background: var(--ru-base-4);
  color: var(--ru-contrast-2);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.2s, color 0.2s;
}
.ide-tab-view-container .ide-tab-btn:hover, .ide-tab-view-container .ide-tab-btn:focus-visible {
  background: var(--ru-base-3);
  color: var(--ru-contrast);
  outline: none;
}
.ide-tab-view-container .ide-tab-btn.active {
  background: var(--ru-highlight);
  color: var(--ru-accent);
  font-weight: 600;
}
.ide-tab-view-container .ide-tab-content {
  flex: 1;
  display: flex;
  min-height: 0; /* important: prevents infinite growth */
  overflow: hidden;
  color: var(--ru-contrast);
  font-family: monospace;
}
.ide-tab-view-container .ide-tab-content .tab-content-wrapper {
  height: 100%; /* Ensure the content wrapper takes up full height */
  width: 100%;
  flex: 1;
  display: flex;
  min-height: 0; /* important: prevents infinite growth */
  overflow: hidden;
}
.ide-tab-view-container .ide-tab-view-error {
  padding: 16px;
  color: #ff6347;
  background-color: #3e2a2a;
}

/*
.ide-tab-view-container {
    width: 100%;
    height: 100%;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    background-color: #2e2e35; // Dark background 
    border: 1px solid #4a4a58;
    border-radius: 6px;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}
.ide-tab-header {
    display: flex;
    padding: 0 4px;
    background-color: #34343b; // Slightly lighter header background 
    border-bottom: 1px solid #4a4a58;
    flex-shrink: 0;
}
.ide-tab-btn {
    padding: 8px 16px;
    margin-top: 1px;
    border: none;
    background: transparent;
    color: #b2b2be; // Secondary text color 
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px 4px 0 0;
    margin-right: 2px;
}
.ide-tab-btn:hover:not(.active) {
    background-color: #4a4a58;
    color: #dadada; // Primary text color on hover
}
.ide-tab-btn.active {
    background-color: #2e2e35; // Matches content background
    color: #e4aa48;  // Accent color for active tab
    font-weight: 600;
    border-bottom: 3px solid #e4aa48;
    transform: translateY(-1px);
}
.ide-tab-content {
    flex-grow: 1;
    padding: 16px;
    overflow-y: auto;
    color: #dadada;
}
.ide-tab-view-error {
    padding: 16px;
    color: #ff6347;
    background-color: #3e2a2a;
}
*/
.shader-gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: sans-serif;
  color: #ddd;
}
.shader-gallery .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background: #1e1e1e;
  padding: 1rem;
  border-radius: 8px;
}
.shader-gallery .filters .filter {
  display: flex;
  flex-direction: column;
}
.shader-gallery .filters .filter label {
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}
.shader-gallery .filters .filter select {
  background: #2a2a2a;
  color: white;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 0.4rem;
  min-width: 150px;
}
.shader-gallery .filters button {
  align-self: flex-end;
  background: #0078ff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.shader-gallery .filters button:hover {
  background: #0060cc;
}
.shader-gallery .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.shader-gallery .gallery-grid .shader-card {
  background: #2a2a2a;
  border-radius: 8px;
  overflow: hidden;
  padding: 0.5rem;
  text-align: center;
}
.shader-gallery .gallery-grid .shader-card .preview {
  width: 100%;
  aspect-ratio: 16/9;
  background: #111;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}
.shader-gallery .gallery-grid .shader-card .preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.ide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  font-family: inherit;
  font-weight: 500;
  color: var(--ru-contrast, #e0e0e0);
  background: transparent;
  line-height: 1;
  position: relative;
}
.ide-btn:focus-visible {
  outline: 2px solid var(--ru-accent, #e4aa48);
  outline-offset: 2px;
  z-index: 5;
}
.ide-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ide-btn {
  /* === Sizes === */
}
.ide-btn.small {
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 4px;
  gap: 4px;
}
.ide-btn.small.icon-only {
  padding: 4px;
  min-width: 28px;
  min-height: 28px;
}
.ide-btn.medium {
  font-size: 0.9rem;
  padding: 6px 14px;
  border-radius: 6px;
  gap: 6px;
}
.ide-btn.medium.icon-only {
  padding: 6px;
  min-width: 34px;
  min-height: 34px;
}
.ide-btn.large {
  font-size: 1rem;
  padding: 8px 18px;
  border-radius: 8px;
  gap: 8px;
}
.ide-btn.large.icon-only {
  padding: 8px;
  min-width: 40px;
  min-height: 40px;
}
.ide-btn {
  /* === Primary === */
}
.ide-btn.primary {
  background: var(--ru-accent, #e4aa48);
  border-color: var(--ru-accent, #e4aa48);
  color: var(--ru-base, #181818);
}
.ide-btn.primary:hover:not(.disabled) {
  filter: brightness(1.1);
}
.ide-btn.primary.active {
  background: var(--ru-highlight, #fde9e5);
  color: var(--ru-base-4, #2e2e35);
}
.ide-btn.primary.disabled {
  background: var(--ru-border, #555);
  border-color: var(--ru-border, #555);
  color: #999;
}
.ide-btn {
  /* === Secondary === */
}
.ide-btn.secondary {
  background: var(--ru-base-3, #2a2a2a);
  border-color: var(--ru-border, #3a3a3a);
  color: var(--ru-contrast, #ddd);
}
.ide-btn.secondary:hover:not(.disabled) {
  background: var(--ru-base-4, #333);
}
.ide-btn.secondary.active {
  background: var(--ru-border, #e4aa48);
  color: var(--ru-base, #181818);
  border-color: var(--ru-border, #e4aa48);
}
.ide-btn.secondary.disabled {
  background: var(--ru-base-4, #333);
  color: #777;
  border-color: #444;
}
.ide-btn {
  /* === Icon-only mode === */
}
.ide-btn.icon-only .ide-btn-label {
  display: none;
}
.ide-btn.icon-only .ide-btn-icon {
  font-size: 1.1em;
}
.ide-btn .ide-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ide-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--ru-contrast);
  transition: stroke 0.2s ease, transform 0.15s ease;
}

.ide-btn:hover svg {
  stroke: var(--ru-accent);
  transform: translateY(-1px);
}

.ide-btn:active svg {
  transform: scale(0.92);
}

.ide-btn.disabled svg {
  stroke: var(--ru-contrast-3);
  opacity: 0.6;
  pointer-events: none;
}

.ide-button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ide-button-group.horizontal {
  flex-direction: row;
}
.ide-button-group.vertical {
  flex-direction: column;
  flex-wrap: nowrap;
}
.ide-button-group.compact button {
  padding: 4px 8px;
  font-size: 0.8rem;
}
.ide-button-group {
  /* Optional: Make grouped buttons look visually connected */
}
.ide-button-group .ide-btn {
  border-radius: 0;
  border-right: none;
}
.ide-button-group .ide-btn:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.ide-button-group .ide-btn:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-right: 1px solid var(--ru-border, #444);
}

.ide-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: #1e1e1e;
  padding: 6px 10px;
  border-bottom: 1px solid #2c2c2c;
  user-select: none;
  gap: 12px;
}
.ide-toolbar.dense {
  padding: 4px 6px;
  gap: 8px;
}
.ide-toolbar .toolbar-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ide-toolbar .toolbar-section .toolbar-section-title {
  color: #bbb;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 6px;
  user-select: none;
  white-space: nowrap;
}
.ide-toolbar .toolbar-divider {
  width: 1px;
  height: 22px;
  background: #333;
  margin: 0 6px;
  flex-shrink: 0;
}

.ide-dropdown {
  position: relative;
  display: inline-block;
  font-family: inherit;
  min-width: 160px;
}
.ide-dropdown.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.ide-dropdown .ide-dropdown-label {
  font-size: 13px;
  color: var(--ru-contrast);
  text-transform: uppercase;
  font-weight: 500;
}
.ide-dropdown .ide-dropdown-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--ru-border);
  background: var(--ru-base-3);
  color: var(--ru-contrast);
  cursor: pointer;
  transition: all 0.2s ease;
}
.ide-dropdown .ide-dropdown-toggle:hover {
  background: var(--ru-base-4);
  border-color: var(--ru-accent);
  color: var(--ru-accent);
}
.ide-dropdown .ide-dropdown-toggle:focus {
  outline: 2px solid var(--ru-accent);
  outline-offset: 2px;
}
.ide-dropdown .ide-dropdown-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ide-dropdown .ide-dropdown-arrow {
  font-size: 0.8rem;
  opacity: 0.7;
}
.ide-dropdown .ide-dropdown-menu {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--ru-base-3);
  border: 1px solid var(--ru-border);
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
  animation: dropdownFadeIn 0.15s ease;
  list-style-type: none;
}
.ide-dropdown .ide-dropdown-menu .ide-dropdown-item {
  padding: 3px 3px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ru-contrast);
  transition: background 0.15s ease, color 0.15s ease;
}
.ide-dropdown .ide-dropdown-menu .ide-dropdown-item:hover, .ide-dropdown .ide-dropdown-menu .ide-dropdown-item:focus {
  background: var(--ru-highlight);
  color: var(--ru-accent);
}
.ide-dropdown .ide-dropdown-menu .ide-dropdown-item.selected {
  background: var(--ru-accent);
  color: var(--ru-base);
  font-weight: 500;
}
.ide-dropdown .ide-dropdown-menu .ide-dropdown-item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ide-dropdown .ide-dropdown-menu .ide-dropdown-item + .ide-dropdown-item {
  border-top: 1px solid var(--ru-border);
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.shader-editor-root {
  font-family: Arial, sans-serif;
  width: 100%;
}

.menu-bar {
  background-color: #333;
  color: #fff;
  padding: 10px;
  display: flex;
}

.menu-item {
  margin-right: 15px;
  cursor: pointer;
}

.project-name input {
  font-size: 16px;
  width: 100%;
  padding: 5px;
  margin: 10px 0;
}

.editor-container {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.editor-section {
  flex: 1;
}

.tabs button {
  padding: 10px;
  cursor: pointer;
}

.output-section {
  width: 300px;
  border-left: 1px solid #ccc;
}

.output-header {
  background-color: #f4f4f4;
  padding: 10px;
}

.output-window {
  padding: 10px;
}

.uniform-popup {
  position: absolute;
  top: 50px;
  left: 20px;
  background: #fff;
  padding: 20px;
  border: 1px solid #ccc;
}

.uniform-popup .uniform-item {
  display: flex;
  margin-bottom: 10px;
}

.show-output-button {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

.category-post-item-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid hsl(var(--border-c));
  background-color: hsl(var(--btn1-c), 0.12);
}
.category-post-item-container .item-label {
  font-weight: 600;
  margin-right: 8px;
  color: hsl(var(--txt1-c));
}

.category-post-panel-app {
  font-family: sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: center;
}
.category-post-panel-app .filter-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
.category-post-panel-app .filter-container .available-slot {
  background-color: hsl(var(--highlight-c));
}
.category-post-panel-app #category-list {
  padding: 5px;
}
.category-post-panel-app .sport-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.category-post-panel-app .sport-list a {
  text-decoration: none;
  color: hsl(var(--txt1-c));
  background-color: transparent;
}
.category-post-panel-app .sport-list a:link, .category-post-panel-app .sport-list a:visited, .category-post-panel-app .sport-list a:hover {
  text-decoration: none;
}
.category-post-panel-app .sport-list a:link:active, .category-post-panel-app .sport-list a:visited:active {
  text-decoration: none;
}

.section-break {
  border: none;
  border-top: 1px solid var(--ru-highlight);
  margin: 1.5rem 0;
}

.uniform-heading {
  text-align: left;
}

.clearfix {
  clear: both;
}

.height-fit-content {
  height: fit-content;
}

.rounded-border {
  height: fit-content;
  border: solid var(--ru-border);
  border-width: 3px 3px 3px 3px;
  border-radius: 12px;
  padding: 12px;
}

.primary-color-theme {
  height: fit-content;
}

.canvas-style {
  position: relative;
  width: 100%;
  height: 100%;
}

/* My descriptions */
.edit-description {
  font-size: 0.9rem;
  background-color: var(--ru-base-3);
  padding: 8px 16px;
  display: inline-block;
  margin-top: 12px;
  margin-right: 7px;
  border-radius: 4px;
  cursor: pointer;
}

@media (min-width: 635px) {
  .edit-description {
    position: relative;
    top: -12px;
  }
}

.edit-description:hover {
  background-color: var(--ru-highlight);
}

.update-description {
  visibility: hidden;
}

.update-description--visible {
  visibility: visible;
}

.description-body-field {
  font-family: "Roboto", sans-serif;
  display: block;
  line-height: 1.65;
  font-size: 1.15rem;
  padding: 7px;
  border: 1px solid transparent;
  outline: none;
  width: 98%;
  min-width: 300px;
  height: 25%;
  overflow: auto;
}

.description-active-field {
  border: 1px solid #ddd;
  animation: pulseBorder 0.75s alternate infinite;
}

@keyframes pulseBorder {
  0% {
    border: 1px solid #fff;
  }
  100% {
    border: 1px solid #ccc;
  }
}
/* Reveal and Hide Fade Transitions */
#my-descriptions {
  position: relative;
  height: 100%;
  width: 100%;
}

#my-descriptions div {
  transition: all 0.4s ease-out;
  opacity: 1;
}

#my-descriptions div.fade-out {
  height: 0px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0.5;
}

#my-descriptions div.fade-in-calc {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 1;
  height: 100%;
  width: 100%;
}

.toast-notification-color {
  background-color: var(--ru-base-3);
  border: 3px solid var(--ru-border);
  color: hsl(var(--txt1-c));
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#id-toast-notification {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#id-toast-notification.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
@-webkit-keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
.sidepanel {
  width: 0;
  position: fixed;
  z-index: 102;
  height: 250px;
  color: hsl(var(--txt1-c));
  background: var(--ru-base-4) !important;
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  scroll-behavior: smooth;
}

.sidepanel-left-align {
  top: 0;
  left: 0;
}

.sidepanel-right-align {
  top: 0;
  right: 0;
}

.sidepanel a {
  margin-top: 9px;
  padding: 0px 8px 0px 8px;
  text-decoration: none;
  font-size: 25px;
  background-color: var(--ru-base-3);
  border-radius: 9px;
  display: block;
  transition: 0.3s;
}

.sidepanel a:hover {
  color: var(--ru-highlight);
}

.sidepanel .closebtn-right {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  color: var(--ru-highlight);
}

.sidepanel .closebtn-left {
  position: absolute;
  top: 0;
  left: 25px;
  font-size: 36px;
  color: var(--ru-highlight);
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

.ListContainer {
  display: block;
}

.multi-column-list {
  height: 69vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

.multi-column-list-item {
  background-color: transparent !important;
  border: 3px solid var(--ru-border);
  padding: 3px;
  width: 25vw;
  text-align: left;
  margin: 3px;
}

.multi-column-list-item a {
  background-color: transparent !important;
}

.backBtn {
  position: absolute;
  left: 9px;
  top: 50vh;
}

.nextBtn {
  position: absolute;
  right: 9px;
  top: 50vh;
}

/*
Note: editor keeps expanding infinitely issue fixed.

Why min-height: 0 is Crucial

Flexbox defaults treat children's content as more important than the box size.
min-height: auto (default) means “grow to show all content” → overflow / expansion.

By setting:

min-height: 0;


you tell the editor container:

"You may shrink and stay inside the layout."

This allows Monaco’s automatic layout to behave properly.
*/
.code-editor-wrapper {
  flex: 1;
  min-height: 0; /* prevents stretch overflow */
  min-width: 0;
  overflow: hidden; /* keeps editor inside bounds */
  display: flex;
}

.confirm-box {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.message-box {
  background: var(--ru-base-3);
  text-align: center;
  font-family: arial;
  font-size: 16px;
  line-height: 1.5;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.button-box {
  margin-top: 30px;
}

.yes-button,
.no-button {
  padding: 10px 20px;
  font-size: 16px;
  margin: 0 20px;
  border-radius: 5px;
  cursor: pointer;
}

.yes-button {
  background: green;
  color: #fff;
}

.no-button {
  background: red;
  color: #fff;
}

/*# sourceMappingURL=index_shader_editor.css.map*/