.w-32 {
  width: 8rem;
}
.h-32 {
  height: 8rem;
}
.w-12 {
  width: 3rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.left-2 {
  left: 0.5rem;
}
.top-3{
	top: 1.2rem;
}
.h-12 {
  height: 3rem;
}
.w-\[--sidebar-width\] {
  width: 16rem;
}
sapn.required{
	color:red;
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.border-none {
  border-style: none;
}
.border-slate-200\/60 {
  border-color: rgb(226 232 240 / 0.6);
}
.border-b {
  border-bottom-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.mr-1 {
  margin-right: 0.25rem;
}
.gap-1 {
  gap: 0.25rem;
}
.opacity-10 {
  opacity: 0.1;
}
.bg-opacity-20 {
  --tw-bg-opacity: 0.2;
}
.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.from-blue-100 {
  background: #dbeafe;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.pt-0{
    padding-top: 0 !important;
}
.items-start {
  align-items: flex-start;
}
li[type="text"], li[type="email"], li[type="number"]{
	border:none;
}
.translate-x-8 {
  --tw-translate-x: 2rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-8 {
  --tw-translate-y: -2rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
input.border,select.border, textarea.border {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

/*///////////////////////////////
//////////////////////////////////
/////////////////////////////////
/////////////////////////////////*/
.form-wrap.form-builder {
  gap: 6px;
}
.frmb.stage-wrap{
  border: 3px dashed #ccc;
  margin-right:10px;
  padding:10px;
}
/* Toolbox container */
.cb-wrap.sticky-controls {
  padding: 8px;
  background: #fff;
  border: 2px solid #d1d5db;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Field buttons (li) */
.cb-wrap.sticky-controls ul li {
  display: inline-flex;
  align-items: center;                /* space between icon & text */
  padding: 0 12px;
  height: 35px;                 /* fixed height */
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px !important;
  margin-bottom:5px !important;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: grab;
  transition: all 0.2s ease;
  list-style: none;
  user-select: none;
  white-space: nowrap;
  width:100%
}

/* If .control-icon exists, use it */
.cb-wrap.sticky-controls ul li .control-icon {
  font-size: 14px;
  color: #3b82f6;
  margin-right: 4px;
}

/* Hover effect */
.cb-wrap.sticky-controls ul li:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}

/* Active drag */
.cb-wrap.sticky-controls ul li:active {
  transform: scale(0.97);
  background: #dbeafe;
  border-color: #2563eb;
}