:root{
  --blue-600: #2368ff;
  --blue-700: #004aad;
  --bg-start: #dbe8ff;
  --bg-end: #f4f7ff;
  --card-shadow: 0 8px 20px rgba(0,0,0,0.06);
  --muted: #6c6c78;
  --danger: #d40000;
  --radius: 12px;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}

/* Page background */
body{
  background: linear-gradient(135deg,var(--bg-start),var(--bg-end));
  color:#222;
  padding:18px;
}

/* Common containers */
.container.fullwidth{max-width:1100px;margin:auto;background:#fff;padding:18px;border-radius:14px;box-shadow:var(--card-shadow)}

/* Login */
.login-wrapper{height:100vh;display:flex;align-items:center;justify-content:center}
.login-box{width:360px;background:#fff;padding:32px;border-radius:14px;box-shadow:0 10px 30px rgba(3,27,89,0.06);text-align:center}
.login-box h2{color:var(--blue-700);margin:0 0 6px}
.login-sub{color:var(--muted);margin-bottom:18px}
.login-box input{width:90%;max-width:420px;padding:12px;margin:10px 0;border-radius:10px;border:1.5px solid #c7d6ff;background:#f8faff}
.login-box button{width:95%;padding:12px;border-radius:10px;border:none;background:var(--blue-600);color:#fff;font-weight:700;cursor:pointer}
.login-box button:hover{background:var(--blue-700)}

/* Layout */
.layout{display:flex;gap:18px;align-items:stretch}

/* Sidebar (user light) */
.sidebar{width:230px;background:linear-gradient(180deg,#fff,#f6f9ff);border-radius:var(--radius);padding:14px;box-shadow:0 6px 18px rgba(0,0,0,0.04);flex-shrink:0}
.sidebar-profile{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.profile-initial{width:44px;height:44px;border-radius:50%;background:var(--blue-600);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
#sidebarUsername{font-weight:700}
.sidebar-tabs{display:flex;flex-direction:column;gap:8px}
.sidebar-tab{padding:10px;border-radius:10px;border:none;background:#eef6ff;cursor:pointer;font-weight:600;text-align:left}
.sidebar-tab.active{background:var(--blue-700);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(2,30,100,0.12)}

/* Admin full-screen layout */
.admin-wrapper{display:flex;height:100vh;margin:0;padding:0;overflow:hidden}
.admin-sidebar{width:260px;background:linear-gradient(180deg,#0f4fe2,#0b3e9a);color:#fff;padding:20px;box-shadow:4px 0 20px rgba(3,27,89,0.12);display:flex;flex-direction:column;justify-content:space-between;border-radius:12px}
.admin-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.brand-logo{width:48px;height:48px;border-radius:10px;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-weight:700}
.brand-text{font-weight:700}
.admin-nav{display:flex;flex-direction:column;gap:8px}
.admin-tab{padding:10px;border-radius:10px;border:none;background:transparent;color:rgba(255,255,255,0.95);text-align:left;font-weight:700;cursor:pointer}
.admin-tab:hover{background:rgba(255,255,255,0.06);transform:translateX(6px)}
.admin-tab.active{background:rgba(255,255,255,0.12);box-shadow:0 10px 24px rgba(2,30,100,0.12)}
.admin-bottom{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.admin-user{display:flex;align-items:center;gap:10px}
.admin-user-initial{width:44px;height:44px;border-radius:8px;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-weight:700}
.admin-main{flex:1;padding:28px;overflow:auto;background:linear-gradient(180deg,#f6f9ff,#ffffff);border-radius:12px}

/* admin content & cards */
.admin-content{max-width:1100px;margin:0 auto}
.stats-grid{display:flex;flex-wrap:wrap;gap:12px}
.stat-card{background:#fff;padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(3,27,89,0.06);flex:1 1 160px;min-width:140px}
.stat-title{color:#3b5fb7;font-weight:800;margin-bottom:8px}
.stat-value{font-size:22px;font-weight:800;color:#072b6e}

/* General content styles */
.content{flex:1;background:transparent;min-height:420px}
.user-card{background:#fffdf8;padding:14px;border-radius:12px;border-left:6px solid var(--blue-600);box-shadow:0 6px 18px rgba(3,27,89,0.04)}
.form-column{display:flex;flex-direction:column;gap:5px;max-width:520px}
.form-column input, .form-column textarea, .form-column select{max-width:420px}

/* Task cards */
.task-box{background:#fff;padding:14px;border-radius:12px;margin:12px 0;box-shadow:0 6px 18px rgba(3,27,89,0.04);border-left:6px solid #007bff}
.task-box p{margin:8px 0}
.status-completed{border-left-color:#0cb300;background:#ebffec}
.status-progress{border-left-color:#ff9e01;background:#fff7e6}
.status-notstarted{border-left-color:#8a8a8a;background:#f6f7f9}

/* tables: rounded & neat */
.user-task-table{width:100%;border-collapse:separate;border-spacing:0;margin-top:8px;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 18px rgba(3,27,89,0.04)}
.user-task-table th{background:var(--blue-700);color:#fff;padding:12px;text-align:left}
.user-task-table td{padding:12px;border-bottom:1px solid #f0f4ff}

/* buttons small */
.view-tasks-btn, .delete-user-btn, .back-btn{padding:8px 12px;border-radius:8px;border:none;cursor:pointer}
.view-tasks-btn{background:#0077cc;color:#fff}
.delete-user-btn{background:#e60000;color:#fff}
.back-btn{background:#575757;color:#fff;margin-top: 12px;}
.task-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.update-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.update-delete-btn {
  padding: 6px 10px;
  font-size: 13px;
}
.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.update-delete-btn {
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
}
.history-section {
  margin-top: 20px;
  padding: 15px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 400px;
  overflow-y: auto;
  transition: all 0.3s ease;
}

.history-section h3 {
  margin-bottom: 10px;
  font-size: 18px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
}

.history-table thead th {
  background-color: #007bff;
  color: #fff;
  padding: 10px;
  text-align: left;
  font-weight: 600;
}

.history-table tbody tr {
  transition: transform 0.2s, background-color 0.2s;
}

.history-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.history-table tbody tr:hover {
  background-color: #e6f0ff;
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.history-table td {
  padding: 10px;
  vertical-align: middle;
}

.history-table button {
  padding: 5px 10px;
  font-size: 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s ease;
}

.history-table .btn-delete-user {
  background-color: #28a745;
}

.history-table .btn-delete-task {
  background-color: #007bff;
}

.history-table .btn-delete-update {
  background-color: #fd7e14;
}

.history-table button:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* ==============================
   RESPONSIVE – KEEP SAME LOOK
============================== */
/* ======================================================
      MOBILE RESPONSIVE WITH SLIDING MENU
====================================================== */

/* Top bar on mobile */
.mobile-topbar {
  display: none;
  background: #0f4fe2;
  color: #fff;
  padding: 12px 16px;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  margin-bottom: 10px;
}

.hamburger-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  font-size: 26px;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.mobile-title {
  font-size: 18px;
  font-weight: 700;
}

/* ---------------------------------------------
      MOBILE SIDEBAR SLIDE
---------------------------------------------- */
@media (max-width: 900px) {

  /* Show top bar */
  .mobile-topbar {
    display: flex;
  }

  /* Sidebar hidden by default */
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: -260px; /* hidden */
    height: 100vh;
    width: 260px;
    z-index: 999;
    transition: 0.35s ease;
    border-radius: 0;
  }

  /* When menu opened */
  .admin-sidebar.active {
    left: 0;
  }

  /* dark overlay */
  .menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    z-index: 998;
  }
  .menu-overlay.active {
    display: block;
  }

  /* Push main content slightly */
  .admin-main {
    padding: 14px;
  }

  /* improve text readability on mobile */
  body, .admin-main, .admin-tab, .stat-card, .task-box, .user-card {
    font-size: 17px;        /* BIGGER TEXT */
  }

  .stat-title {
    font-size: 17px;
  }

  .stat-value {
    font-size: 24px;
  }

  .btn, .btn-small {
    font-size: 16px;
    padding: 10px 16px;
  }

  input, textarea, select {
    font-size: 17px !important;
    padding: 14px !important;
  }

  th, td {
    font-size: 16px;
  }

}

/* upto here mobile responsive*/

.user-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-info-buttons {
  display: flex;
  gap: 8px;
}

/* ============================================================
   UNIVERSAL BUTTON SYSTEM (9 required buttons only)
============================================================ */

/* Base button style */
.btn {
  padding: 10px 16px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  transition: 0.22s ease;
  box-shadow: 0 6px 18px rgba(3,27,89,0.08);
}

/* Hover effect */
.btn:hover {
  transform: translateY(-2px);
}

/* -----------------------------
   1. Logout Button
----------------------------- */
.btn-logout {
  background: var(--danger);
  color: #fff;
}
.btn-logout:hover {
  background: #a80000;
}

/* -----------------------------
   2 & 8. View Tasks (User & Admin)
----------------------------- */
.btn-view,
.btn-view2 {
  background: var(--blue-600);
  color: #fff;
}
.btn-view:hover,
.btn-view2:hover {
  background: var(--blue-700);
}

/* -----------------------------
   3. Open Button
----------------------------- */
.btn-open {
  background: #575757;
  color: #fff;
}
.btn-open:hover {
  background: #333;
}

/* -----------------------------
   4. Save Description Button
----------------------------- */
.btn-save {
  background: #0077cc;
  color: #fff;
}
.btn-save:hover {
  background: #005fa3;
}

/* -----------------------------
   5. Post Button
----------------------------- */
.btn-post {
  background: #0a7cff;
  color: #fff;
}
.btn-post:hover {
  background: #005fcc;
}

/* -----------------------------
   6. Create User Button
----------------------------- */
.btn-create {
  background: var(--blue-600);
  color: #fff;
}
.btn-create:hover {
  background: var(--blue-700);
}

/* -----------------------------
   7. Assign Task Button
----------------------------- */
.btn-assign {
  background: #0f4fe2;
  color: #fff;
}
.btn-assign:hover {
  background: #0839a8;
}

/* -----------------------------
   9. Delete Button
----------------------------- */
.btn-delete {
  background: var(--danger);
  color: #fff;
}
.btn-delete:hover {
  background: #a80000;
  
}

/* Small fixed buttons */
.btn-small {
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 8px;
  font-weight: 600;
}
/* ============================================================
   UNIVERSAL INPUT FIELD STYLING (Admin + User)
   (Safe Add — does NOT overwrite existing designs)
============================================================ */

.admin-content input,
.admin-content textarea,
.admin-content select,
.user-tab-content input,
.user-tab-content textarea,
.user-tab-content select {
  width: 100%;
  max-width: 420px;
  padding: 12px;
  margin: 8px 0 14px;
  border-radius: 10px;
  border: 1.8px solid #c7d6ff;
  background: #f8faff;
  font-size: 15px;
  transition: 0.25s ease;
  display: block;
}

/* Focus effect */
.admin-content input:focus,
.admin-content textarea:focus,
.admin-content select:focus,
.user-tab-content input:focus,
.user-tab-content textarea:focus,
.user-tab-content select:focus {
  outline: none;
  border-color: var(--blue-700);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(35, 104, 255, 0.15);
}

/* Textarea */
.admin-content textarea,
.user-tab-content textarea {
  resize: vertical;
  min-height: 110px;
}

/* Task note boxes (user tasks) */
#userTasks textarea {
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  padding: 12px;
}

/* Update select dropdown (user) */
#updateTaskSelect {
  max-width: 420px;
}
/* --------------------------------------------------
   CLEAN CHAT UI — FINAL UPDATED VERSION
---------------------------------------------------*/

/* Main chat container inside admin/user layout */
.chat-container {
  width: 100%;
  height: 72vh;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  border: 1px solid #e5e8ef;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;               /* fixes layout squeeze */
}

/* Header */
.chat-header {
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  background: rgba(255,255,255,0.9);
  border-bottom: 1px solid #e3e6ee;
  backdrop-filter: blur(6px);
}

/* Messages Section */
.chat-messages {
  flex: 1;
  padding: 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Scrollbar */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: #c8ceda;
  border-radius: 6px;
}

/* Message wrapper */
.chat-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 80%;
}

/* Avatar */
.chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0b57ff;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Message bubble */
.chat-bubble {
  padding: 12px 16px;
  background: #f5f7fb;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* System message (SYS) bubble */
.chat-bubble.sys {
  background: #e7f2ff;
  color: #004a85;
  border-left: 4px solid #3aa0ff;
  padding: 12px 16px;
  font-weight: 500;
}

/* User message (right aligned) */
.chat-msg.me {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.chat-msg.me .chat-bubble {
  background: #e9efff;
  border-right: 4px solid #4d7dff;
}

/* Input Area */
.chat-input {
  padding: 10px 14px;
  background: #ffffff;
  border-top: 1px solid #dce1eb;
  display: flex;
  gap: 10px;
}

/* Textarea — reduced height */
/* FIX CHAT INPUT OVERRIDES */
.chat-input input#chatInputUser {
  padding: 6px 12px !important;
  margin: 0 !important;
  height: 38px !important;
  border-radius: 10px !important;
  border: 1.6px solid #d6dcec !important;
  background: #f7f9fc !important;
  display: flex !important;
  flex: 1 !important;
}
.chat-input input#chatInputAdmin {
  padding: 6px 12px !important;
  margin: 0 !important;
  height: 38px !important;
  border-radius: 10px !important;
  border: 1.6px solid #d6dcec !important;
  background: #f7f9fc !important;
  display: flex !important;
  flex: 1 !important;
}

.chat-input textarea:focus {
  border-color: #2978ff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(41,120,255,0.15);
}

/* Send button — reduced height */
.chat-send-btn {
  background: #2978ff;
  color: #ffffff;
  border: none;
  padding: 0 18px;
  height: 38px;          /* smaller */
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.chat-send-btn:hover {
  background: #0f5de0;
}



/**new updatew of admin chat page /
/*==================================
  ADMIN CHAT LAYOUT – BEAUTIFIED
==================================*/
.chat-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 18px;
}

/* ---------- LEFT: USER LIST PANEL ---------- */
.chat-users {
  position: relative;
  background: radial-gradient(circle at top left, #eef3ff 0, #f9fafb 38%, #ffffff 100%);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 14px 12px 12px;
  max-height: 72vh;
  overflow-y: auto;
  backdrop-filter: blur(14px);
}

/* soft "Users" title inside the card */
.chat-users::before {
  content: "Users";
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 4px 4px 10px;
}

/* user cards (your existing .task-box) */
.chat-users .task-box {
  margin: 0 2px 10px;
  border-radius: 14px;
  padding: 10px 11px;
  border-left-width: 3px;
  border-right-width: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  border-style: solid;
  border-color: transparent;
  background: linear-gradient(135deg, #ffffff, #f4f5ff);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    opacity 0.16s ease;
}

.chat-users .task-box strong {
  font-size: 14px;
  color: #111827;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* small online dot next to name (always green; you can toggle via extra class in JS later) */
.chat-users .task-box strong::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
}

.chat-users .task-box small {
  font-size: 11px;
  color: #6b7280;
}

/* hover state */
.chat-users .task-box:hover {
  transform: translateY(-1px) translateX(1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
  border-left-color: var(--blue-600, #2563eb);
  background: linear-gradient(135deg, #e0edff, #ffffff);
}

/* "active / selected" user (add .active in JS if you want) */
.chat-users .task-box.active {
  border-left-color: #4f46e5;
  background: linear-gradient(145deg, #e0e7ff, #ffffff);
  box-shadow: 0 16px 32px rgba(79, 70, 229, 0.28);
}

/* custom thin scrollbar */
.chat-users::-webkit-scrollbar {
  width: 6px;
}
.chat-users::-webkit-scrollbar-track {
  background: transparent;
}
.chat-users::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.8);
  border-radius: 999px;
}

/* ---------- RIGHT: MAIN CHAT CARD ---------- */
.chat-main {
  background: radial-gradient(circle at top left, #eff6ff 0, #ffffff 45%, #f9fafb 100%);
  border-radius: 22px;
  box-shadow: 0 22px 45px rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(148, 163, 184, 0.4);
  display: flex;
  flex-direction: column;
  height: 72vh;
  overflow: hidden;
  position: relative;
}

/* subtle pattern behind messages */
.chat-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 0, rgba(59, 130, 246, 0.09) 0, transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(129, 140, 248, 0.12) 0, transparent 50%);
  opacity: 0.6;
  pointer-events: none;
}

/* ensure inner content is above pattern */
.chat-main > * {
  position: relative;
}

/* header re-style */
.chat-main .chat-header {
  flex: 0 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(120deg, #0f172a, #111827, #1d2435);
  color: #e5e7eb;
}

.chat-main .chat-header .title {
  display: flex;
  flex-direction: column;
}
.chat-main .chat-header .title span:first-child {
  font-size: 14px;
  font-weight: 600;
}
.chat-main .chat-header .title span:last-child {
  font-size: 11px;
  opacity: 0.8;
}

/* messages area */
.chat-main .chat-messages {
  flex: 1 1 auto;
  padding: 14px 16px;
  overflow-y: auto;
}

/* input area */
.chat-main .chat-input {
  flex: 0 0 auto;
  padding: 10px 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), #ffffff);
}

/* make textarea + button a bit nicer if you use them */
.chat-main .chat-input textarea,
.chat-main .chat-input input[type="text"] {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  padding: 8px 14px;
  font-size: 13px;
  outline: none;
  width: 100%;
  resize: none;
  background: rgba(255, 255, 255, 0.9);
}
.chat-main .chat-input textarea:focus,
.chat-main .chat-input input[type="text"]:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

/* if your send button has a class like .btn, we give it a pill look */
.chat-main .chat-input button {
  border-radius: 999px;
  border: none;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.4);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.chat-main .chat-input button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.55);
}
.chat-main .chat-input button:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.45);
  opacity: 0.92;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .chat-layout {
    grid-template-columns: 1fr;
  }

  .chat-main {
    order: 1;
    height: auto;
    min-height: 340px;
  }

  .chat-users {
    order: 2;
    max-height: 220px;
  }
}