section .centered.form form.live_form{
  background:#fff;
  border:1px solid #e6e8ee;
  border-radius:14px;
  padding:30px 34px;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}

/* -------------------------
   LIVE FORM CONTROLS
   ------------------------- */
.live_form .form-control{
  height:52px;
  padding:13px 15px;
  background:#fff;
  border:1px solid #d7dbe3;
  border-radius:12px;
  color:#111827;
  font-size:15px;
  line-height:1.4;
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  box-sizing:border-box;
}

.live_form .form-control::placeholder{
  color:#98a2b3;
  opacity:1;
}

.live_form .form-control:hover{
  border-color:#bcc4d1;
}

.live_form .form-control:focus{
  border-color:#1f84ff;
  box-shadow:0 0 0 4px rgba(31,132,255,.12);
  outline:none;
}

.live_form input[type="hidden"].form-control{
  display:none;
}

.live_form input[type="checkbox"]{
  width:18px !important;
  height:18px !important;
  accent-color:#1f84ff;
  cursor:pointer;
  transform:translateY(3px);
}

.live_form .btn.btn-secondary.btn-mg.btn-round{
  min-width:132px;
  height:44px;
  padding:0 20px;
  border:none;
  border-radius:999px;
  background:linear-gradient(180deg,#2490ff 0%,#167cff 100%);
  color:#fff;
  font-size:15px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(22,124,255,.22);
  transition:transform .15s ease, box-shadow .18s ease, opacity .18s ease;
}

.live_form .btn.btn-secondary.btn-mg.btn-round:hover,
.live_form .btn.btn-secondary.btn-mg.btn-round:focus{
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(22,124,255,.28);
}

.live_form .btn.btn-secondary.btn-mg.btn-round:active{
  transform:translateY(0);
}

/* -------------------------
   GLOBAL RESET FOR BROKEN OFFSETS
   ------------------------- */
#generate input,
#generate select,
#generate textarea,
#main-form input,
#main-form select,
#main-form textarea,
.input-group .form-control,
.form-control,
.chosen-container,
.chosen-container-single .chosen-single{
  margin-left:0 !important;
}

/* -------------------------
   GENERATOR / DASHBOARD FIELDS
   ------------------------- */
#generate.main-content.panel.panel-default,
#main-form{
  border-radius:14px;
}



#generate input[type="text"],
#generate input[type="password"],
#generate input[type="url"],
#generate input[type="email"],
#generate input[type="search"],
#generate input[type="number"],
#generate input[type="color"],
#generate textarea,
#generate select,
#main-form input[type="text"],
#main-form input[type="password"],
#main-form input[type="url"],
#main-form input[type="email"],
#main-form input[type="search"],
#main-form input[type="number"],
#main-form textarea,
#main-form select,
#generate .form-control,
#main-form .form-control{
  width:100%;
  background:#fff;
  border:1px solid #d7dbe3;
  border-radius:12px;
  color:#111827;
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  box-sizing:border-box;
}

#generate input[type="text"],
#generate input[type="password"],
#generate input[type="url"],
#generate input[type="email"],
#generate input[type="search"],
#generate input[type="number"],
#generate select,
#main-form input[type="text"],
#main-form input[type="password"],
#main-form input[type="url"],
#main-form input[type="email"],
#main-form input[type="search"],
#main-form input[type="number"],
#main-form select,
#generate .form-control,
#main-form .form-control{
  min-height:44px;
  padding:10px 14px;
  font-size:14px;
  line-height:1.4;
}

#generate textarea,
#main-form textarea{
  min-height:110px;
  padding:12px 14px;
  font-size:14px;
  line-height:1.5;
  resize:vertical;
}

#generate input::placeholder,
#generate textarea::placeholder,
#main-form input::placeholder,
#main-form textarea::placeholder{
  color:#98a2b3;
  opacity:1;
}

#generate input:hover,
#generate textarea:hover,
#generate select:hover,
#main-form input:hover,
#main-form textarea:hover,
#main-form select:hover,
#generate .form-control:hover,
#main-form .form-control:hover{
  border-color:#bcc4d1;
}

#generate input:focus,
#generate textarea:focus,
#generate select:focus,
#main-form input:focus,
#main-form textarea:focus,
#main-form select:focus,
#generate .form-control:focus,
#main-form .form-control:focus{
  border-color:#1f84ff;
  box-shadow:0 0 0 4px rgba(31,132,255,.12);
  outline:none;
}

#generate input[type="hidden"],
#main-form input[type="hidden"]{
  display:none !important;
}

#generate input[type="color"]{
  min-height:36px;
  padding:2px;
  cursor:pointer;
}


/* -------------------------
   INPUT GROUPS
   main fix: make #main-form behave like .toolbox
   ------------------------- */
#main-form .input-group,
#generate .input-group,
.input-group{
  display:table;
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}

#main-form .input-group-addon,
#generate .input-group-addon,
.input-group-addon{
  display:table-cell;
  width:52px;
  min-width:52px;
  padding:0;
  text-align:center;
  vertical-align:middle;
  background:#f8fafc;
  border:1px solid #d7dbe3;
  border-right:none;
  border-radius:12px 0 0 12px;
  color:#667085;
  height:44px;
  box-sizing:border-box;
}


/* grouped controls only */
#main-form .input-group > .input-group-addon + .form-control,
#generate .input-group > .input-group-addon + .form-control,
.input-group > .input-group-addon + .form-control{
  display:table-cell;
  width:100%;
  height:44px;
  min-height:44px;
  padding:10px 14px;
  border:1px solid #d7dbe3;
  border-left:none !important;
  border-radius:0 12px 12px 0 !important;
  box-shadow:none;
  box-sizing:border-box;
  float:none !important;
  margin:0 !important;
  position:relative;
  z-index:1;
}

/* standalone input-group with no addon */
#main-form .input-group > .form-control:only-child,
#generate .input-group > .form-control:only-child,
.input-group > .form-control:only-child{
  display:table-cell;
  width:100%;
  height:44px;
  min-height:44px;
  padding:10px 14px 10px 16px !important;
  border:1px solid #d7dbe3 !important;
  border-radius:12px !important;
  box-shadow:none;
  box-sizing:border-box;
  float:none !important;
  margin:0 !important;
  position:relative;
  z-index:1;
}

/* prevent generic grouped input collisions */
#main-form .input-group .form-control,
#generate .input-group .form-control,
.input-group .form-control{
  box-shadow:none;
}

/* unified hover/focus */
#main-form .input-group:hover .input-group-addon,
#generate .input-group:hover .input-group-addon,
.input-group:hover .input-group-addon{
  border-color:#bcc4d1;
}

#main-form .input-group:hover > .input-group-addon + .form-control,
#main-form .input-group:hover > .form-control:only-child,
#generate .input-group:hover > .input-group-addon + .form-control,
#generate .input-group:hover > .form-control:only-child,
.input-group:hover > .input-group-addon + .form-control,
.input-group:hover > .form-control:only-child{
  border-color:#bcc4d1;
}

#main-form .input-group:focus-within .input-group-addon,
#generate .input-group:focus-within .input-group-addon,
.input-group:focus-within .input-group-addon{
  border-color:#1f84ff;
}

#main-form .input-group:focus-within > .input-group-addon + .form-control,
#main-form .input-group:focus-within > .form-control:only-child,
#generate .input-group:focus-within > .input-group-addon + .form-control,
#generate .input-group:focus-within > .form-control:only-child,
.input-group:focus-within > .input-group-addon + .form-control,
.input-group:focus-within > .form-control:only-child{
  border-color:#1f84ff;
}


/* -------------------------
   GLOBAL INPUTS
   exclude grouped controls so they do not fight input-group layout
   ------------------------- */
input[type="text"]:not(.input-group .form-control),
input[type="password"]:not(.input-group .form-control),
input[type="email"]:not(.input-group .form-control),
input[type="url"]:not(.input-group .form-control),
input[type="search"]:not(.input-group .form-control),
input[type="number"]:not(.input-group .form-control),
textarea,
select:not(.input-group select),
.form-control:not(.input-group .form-control){
  background:#ffffff;
  border:1px solid #d7dbe3;
  border-radius:12px;
  color:#111827;
  box-shadow:none;
  padding:10px 14px;
  min-height:44px;
  font-size:14px;
  transition:border-color .18s ease, box-shadow .18s ease;
  box-sizing:border-box;
}

textarea{
  min-height:110px;
  resize:vertical;
}

input::placeholder,
textarea::placeholder{
  color:#98a2b3;
  opacity:1;
}

input:hover,
textarea:hover,
select:hover{
  border-color:#bcc4d1;
}

input:focus,
textarea:focus,
select:focus{
  border-color:#1f84ff;
  box-shadow:0 0 0 4px rgba(31,132,255,.12);
  outline:none;
}



/* -------------------------
   SELECTS
   Make single selects look consistent
   ------------------------- */
#generate select:not([multiple]),
#main-form select:not([multiple]),
select:not([multiple]){
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:40px;
}

/* when select is inside input-group, keep arrow spacing */
#generate .input-group select.form-control:not([multiple]),
#main-form .input-group select.form-control:not([multiple]),
.input-group select.form-control:not([multiple]){
  border-left:none !important;
  border-radius:0 12px 12px 0 !important;
  padding-right:42px;
}

/* -------------------------
   MULTIPLE SELECT
   Makes Tracking Pixels visually consistent with Custom Page
   while preserving multiple behavior
   ------------------------- */
#generate select[multiple],
#main-form select[multiple],
select[multiple]{
  min-height:44px;
  height:44px;
  padding-top:10px;
  padding-bottom:10px;
  overflow:hidden;
  resize:none;
  background-image:none !important;
}

/* grouped multiple select should align with addon exactly */
#generate .input-group select[multiple].form-control,
#main-form .input-group select[multiple].form-control,
.input-group select[multiple].form-control{
  border-left:none !important;
  border-radius:0 12px 12px 0 !important;
}

/* hide native extra scrollbar look where possible */
#generate select[multiple]::-webkit-scrollbar,
#main-form select[multiple]::-webkit-scrollbar,
select[multiple]::-webkit-scrollbar{
  width:0;
  height:0;
}

/* -------------------------
   FILE INPUT FIX
   centered with 20% margins left/right
   ------------------------- */
input[type="file"],
#generate input[type="file"],
#main-form input[type="file"]{
  display:block;
  width:60%;
  max-width:60%;
  min-height:52px;
  margin:0 auto !important;
  padding:10px 12px;
  background:#fff;
  border:1px dashed #cfd5df;
  border-radius:16px;
  color:#475467;
  box-shadow:none;
  overflow:hidden;
  box-sizing:border-box;
  font-size:14px;
  line-height:1.3;
}

input[type="file"]:hover,
#generate input[type="file"]:hover,
#main-form input[type="file"]:hover{
  border-color:#98a2b3;
}

input[type="file"]:focus,
#generate input[type="file"]:focus,
#main-form input[type="file"]:focus{
  outline:none;
  border-color:#1f84ff;
  box-shadow:0 0 0 4px rgba(31,132,255,.10);
}

input[type="file"]::-webkit-file-upload-button{
  margin-right:12px;
  padding:10px 16px;
  border:1px solid #d7dbe3;
  border-radius:12px;
  background:#f8fafc;
  color:#111827;
  font-weight:600;
  cursor:pointer;
}

input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:10px 16px;
  border:1px solid #d7dbe3;
  border-radius:12px;
  background:#f8fafc;
  color:#111827;
  font-weight:600;
  cursor:pointer;
}

input[type="file"]::-webkit-file-upload-button:hover{
  background:#f1f5f9;
  border-color:#bcc4d1;
}

input[type="file"]::file-selector-button:hover{
  background:#f1f5f9;
  border-color:#bcc4d1;
}

.upload-container,
.upload-container-video,
.upload-container-svg,
.upload-container-portal,
.upload-container-facefilter,
.upload-container-3dmodel,
.upload-container-capture,
.upload-container-splat{
  width:100%;
  max-width:100%;
  overflow:hidden;
  box-sizing:border-box;
  text-align:center;
}

/* -------------------------
   CHECKBOX / RADIO / RANGE
   ------------------------- */
input[type="checkbox"],
input[type="radio"],
#generate input[type="checkbox"],
#generate input[type="radio"],
#main-form input[type="checkbox"],
#main-form input[type="radio"]{
  accent-color:#1f84ff;
  cursor:pointer;
}

input[type="range"],
#generate input[type="range"],
#main-form input[type="range"]{
  width:100%;
  margin:0 !important;
  accent-color:#1f84ff;
}

.slider{
  width:100%;
  max-width:220px;
  margin:0 auto 18px;
}

.slider > span{
  display:inline-block;
  font-size:14px;
  line-height:1.3;
  color:#111827;
  margin-bottom:8px;
}

.slider > span:first-child{
  font-weight:600;
}

.slider > span:nth-child(2){
  margin-left:4px;
  font-weight:700;
}

.slider input[type="range"]{
  display:block;
  width:100%;
  margin:0 !important;
  accent-color:#1f84ff;
}

@media (max-width:767px){
  .slider{
    max-width:100%;
    margin-bottom:16px;
  }
}

/* -------------------------
   CHOSEN
   ------------------------- */
.chosen-container{
  width:100% !important;
  font-size:14px;
  vertical-align:top;
}

.chosen-container-single .chosen-single{
  display:block;
  width:100%;
  height:44px;
  line-height:42px;
  padding:0 40px 0 14px;
  background:#fff;
  border:1px solid #d7dbe3;
  border-radius:12px;
  color:#111827;
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.chosen-container-single .chosen-single span{
  color:#111827;
}

.chosen-container-single .chosen-single:hover{
  border-color:#bcc4d1;
}

.chosen-container-active .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single{
  border-color:#1f84ff;
  box-shadow:0 0 0 4px rgba(31,132,255,.12);
}

.chosen-container-single .chosen-single div{
  position:absolute;
  top:0;
  right:12px;
  width:18px;
  height:100%;
}

.chosen-container-single .chosen-single div b{
  position:absolute;
  top:50%;
  right:0;
  width:8px;
  height:8px;
  margin-top:-6px;
  background:none !important;
  border:solid #6b7280;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
  padding:0;
}

.chosen-container .chosen-drop{
  width:100%;
  margin-top:6px;
  border:1px solid #d7dbe3;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  overflow:hidden;
}

.chosen-container-single.chosen-container-single-nosearch .chosen-search{
  display:none;
}

.chosen-container .chosen-search{
  padding:10px;
}

.chosen-container .chosen-search input{
  width:100%;
  margin:0 !important;
  padding:8px 10px;
  border:1px solid #d7dbe3;
  border-radius:10px;
  background:#fff;
  box-shadow:none;
}

.chosen-container .chosen-results{
  margin:0;
  padding:6px;
}

.chosen-container .chosen-results li{
  padding:10px 12px;
  border-radius:10px;
  color:#111827;
  line-height:1.4;
}

.chosen-container .chosen-results li.highlighted{
  background:#1f84ff;
  color:#fff;
}

.chosen-container .chosen-results li.result-selected{
  color:#6b7280;
  background:transparent;
}

/* -------------------------
   TOOLBOX SEARCH / FILTER FIX
   ------------------------- */
.toolbox .input-group{
  display:table;
  width:100%;
}

.toolbox .input-group-addon{
  width:52px;
  min-width:52px;
  background:#fff;
  border:1px solid #d7dbe3;
  border-right:none;
  border-radius:12px 0 0 12px;
  vertical-align:middle;
}

.toolbox .input-group .form-control{
  height:44px;
  border-left:none;
  border-radius:0 12px 12px 0;
}

.toolbox select.filter,
.toolbox .filter{
  width:100%;
  min-height:44px;
  padding:10px 40px 10px 14px;
  border:1px solid #d7dbe3;
  border-radius:12px;
  background:#fff;
  color:#111827;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* -------------------------
   COLOR INPUT FIX
------------------------- */

input[type="color"],
#generate input[type="color"],
#main-form input[type="color"]{
  width:150px;
  max-width:100%;
  height:22px;

  padding:0;                /* remove inner gap */
  border:1px solid #d7dbe3;
  border-radius:14px;

  background:transparent;   /* prevent white showing */
  box-shadow:none;

  cursor:pointer;
  box-sizing:border-box;

  appearance:none;
  -webkit-appearance:none;

  overflow:hidden;          /* hides inner browser edges */
}

/* wrapper */
input[type="color"]::-webkit-color-swatch-wrapper{
  padding:0;
}

/* actual color */
input[type="color"]::-webkit-color-swatch{
  border:none;
  border-radius:12px; /* slightly smaller than parent */
}

/* firefox */
input[type="color"]::-moz-color-swatch{
  border:none;
  border-radius:12px;
}

#generate p {
  color: #798394;
}

section .content .url-list ul.toggle li a, section .content .url-list ul.toggle li span {
margin: 0;
font-size: 12px;
font-weight: 700;
padding: 8px 8px;
color: #798394;
}
/* Modern style for Tracking Pixels (Chosen multi-select) */

#pixels .chosen-container{
  width:100% !important;
  font-size:14px;
}

#pixels .chosen-container-multi .chosen-choices{
  display:flex;
  flex-wrap:wrap;
  align-items:center;

  min-height:42px;
  padding:6px 10px;

  border:1px solid #d7dbe3;
  border-radius:12px;
  background:#fff;

  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}

/* hover like your other inputs */
#pixels .chosen-container-multi .chosen-choices:hover{
  border-color:#bcc4d1;
}

/* focus like your other inputs */
#pixels .chosen-container-active .chosen-choices{
  border-color:#1f84ff;
  box-shadow:0 0 0 4px rgba(31,132,255,.12);
}

/* selected tags */
#pixels .chosen-container-multi .chosen-choices li.search-choice{
  margin:4px 6px 4px 0;
  padding:6px 26px 6px 10px;

  border:1px solid #d7dbe3;
  border-radius:999px;

  background:#f8fafc;
  color:#111827;
  font-size:13px;

  box-shadow:none;
}

/* tag close icon */
#pixels .chosen-container-multi .chosen-choices li.search-choice .search-choice-close{
  top:50%;
  right:8px;
  transform:translateY(-50%);
}

/* search input inside field */
#pixels .chosen-container-multi .chosen-choices li.search-field input{
  height:32px;
  padding:0 6px;
  border:0;
  background:transparent;
  box-shadow:none;
  font-size:14px;
  color:#111827;
}

/* dropdown */
#pixels .chosen-container .chosen-drop{
  margin-top:6px;

  border:1px solid #d7dbe3;
  border-radius:12px;

  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.08);

  overflow:hidden;
}

/* dropdown items */
#pixels .chosen-container .chosen-results li{
  padding:10px 12px;
  border-radius:10px;
}

/* highlighted option */
#pixels .chosen-container .chosen-results li.highlighted{
  background:#1f84ff;
  color:#fff;
}

.panel,
.panel-body,
.panel-heading {
  border-radius: 14px !important;
}


.box {
  border-radius: 14px !important;
}


.main-content.panel.panel-default {
  border-radius: 14px;
}

.panel.panel-default.panel-body {
  border-radius: 14px;
}

.main-input::placeholder {
  color: #888;
  opacity: 1;
}

.main-input::-webkit-input-placeholder {
  color: #888;
}

.main-input:-ms-input-placeholder {
  color: #888;
}
/* -------------------------
   MOBILE
   ------------------------- */
@media (max-width:767px){
  #generate input[type="text"],
  #generate input[type="password"],
  #generate input[type="url"],
  #generate input[type="email"],
  #generate textarea,
  #generate select,
  #main-form input[type="text"],
  #main-form input[type="password"],
  #main-form input[type="url"],
  #main-form input[type="email"],
  #main-form textarea,
  #main-form select,
  #generate .form-control,
  #main-form .form-control,
  .chosen-container-single .chosen-single,
  input[type="file"]{
    font-size:16px;
  }

  input[type="file"],
  #generate input[type="file"],
  #main-form input[type="file"]{
    width:100%;
    max-width:100%;
  }

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