*
{
  box-sizing:border-box; 
}

.support-form .field
{
	margin:5px 0px;
}
:root{
  --bg:#f9f9f9;
  --border:#ddd;
  --field:#ccc;
  --brand:#0073e6;
  --brand-hover:#005bb5;
  --radius:12px;
  --gap:12px;
}

/* Container */
.custom-form-container {
  max-width: 880px;
  width: min(92%, 880px);
  margin: 24px auto;
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.custom-form-container h2 {
  text-align: center;
  margin: 0 0 18px 0;
  font-size: clamp(20px, 2.8vw, 28px);
}

/* Grid utility */
.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 640px){
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* Labels & fields */
.field { display: grid; gap: 6px; }
label { font-weight: 600; font-size: 16px; margin-top:10px; margin-bottom: 10px;  }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 12px 12px;
  border: 1px solid var(--field);
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 15px;
  line-height: 1.35;
}
textarea { min_height: 120px; }

/* Button */
.btn {
  background-color: var(--brand);
  color: #fff;
  padding: 14px 18px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  margin-top: 20px;
}
.btn:hover,
.btn:focus-visible { background-color: var(--brand-hover); }

/* Section spacing */
.stack { display: grid; gap: 16px; }
.stack-lg { gap: 20px; }

/* Small devices refinements */
@media (max-width: 399px){
  .custom-form-container { padding: 16px; }
  .btn { padding: 13px 16px; }
}

/* Larger screens – tighten line-length and spacing */
@media (min-width: 1024px){
  .custom-form-container { padding: 28px; }
}

.kcs-panel{ border:1px solid #e6e6e6; border-radius:12px; padding:14px; max-width:420px; background:#fff; }
.kcs-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; }
.kcs-row + .kcs-row{ border-top:1px solid #f0f0f0; }
.kcs-label{ color:#666; font-size:13px; }
.kcs-value{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.kcs-pill{ display:inline-block; font-size:12px; padding:4px 10px; border-radius:999px; line-height:1; font-weight:600; border:1px solid transparent; }
.pill-yellow{ background:#fff7cc; color:#7a6400; border-color:#f0e3a2; }
.pill-blue{ background:#eaf3ff; color:#0b52a1; border-color:#cfe2ff; }
.pill-gray{ background:#f2f2f2; color:#555; border-color:#e5e5e5; }
.pill-green{ background:#e8f7e9; color:#1a7f37; border-color:#ccefd0; }
.kcs-select{ min-width:160px; padding:6px 8px; font-size:13px; border:1px solid #ddd; border-radius:8px; background:#fff; }
.kcs-datetime{ font-size:13px; color:#222; }
.kcs-feedback{ margin-top:8px; font-size:12px; min-height:16px; }
.kcs-feedback.ok{ color:#1a7f37; }
.kcs-feedback.bad{ color:#a11212; }
.kcs-loader{ width:18px; height:18px; border-radius:50%; border:2px solid #ddd; border-top-color:#333; animation:kcs-spin .8s linear infinite; margin-left:auto; margin-top:6px; }
@keyframes kcs-spin{ to{ transform:rotate(360deg); } }

h3.ticket-title {
    color: #017e7b;
}
.ticket-assignee img {
   
    margin-right: 5px;
   
}