/* Remove yellow background on autofilled inputs */
      input:-webkit-autofill,
      input:-webkit-autofill:hover,
      input:-webkit-autofill:focus,
      input:-webkit-autofill:active {
          -webkit-background-clip: text !important;
          transition: background-color 5000s ease-in-out 0s !important;
          box-shadow: inset 0 0 20px 20px var(--color-blur) !important;
      }

      input:-webkit-autofill {
          -webkit-text-fill-color: var(--color-text) !important;
      }

      /* Backdrop */
      .custom-modal-backdrop {
          position: fixed;
          inset: 0;
          background-color: var(--color-blur);
          display: flex;
          align-items: flex-start;
          justify-content: center;
          z-index: 9999;
      }

      /* Modal Container */
      .custom-modal-container {
          background-color: var(--color-fourth);
          border-radius: 4px;
          box-shadow: var(--color-box-shadow);
          max-width: 400px;
          width: 100%;
          padding: var(--spacing-md);
          padding-top: 1.25rem;
          padding-bottom: var(--spacing-md);
          padding-right: var(--spacing-md);
          font-family: var(--font-family);
          color: var(--color-text);
          display: flex;
          flex-direction: column;
          gap: var(--spacing-md);
          border: 1px solid var(--color-border-hover);
          border-top: 8px solid var(--color-border-hover);
          margin: 30vh 0 0 20px;
      }

      @keyframes pulseBorder {

          0%,
          100% {
              border-color: #cc3633;
          }

          50% {
              border-color: var(--color-border-hover);
          }
      }

      .alert-flash .custom-modal-container {
          animation: pulseBorder 1s ease-out 0s 3;
      }

      /* Header (Optional) */
      .custom-modal-header {
          display: none;
          /* Hide unless you add a close icon or title */
          /* height: 10px;
          background-color: var(--color-border-hover); */
      }

      /* Content Text */
      .custom-modal-content {
          font-size: var(--font-size-sm);
          color: var(--color-text);
          text-align: left;
          margin-left: 5px;
          font-weight: 500;
      }

      .custom-modal-content a {
          color: var(--color-href);
          text-decoration: underline;
      }

      .custom-modal-content a:visited {
          color: var(--color-href-visited);
      }

      .custom-modal-content a:hover {
          color: var(--color-href);
      }

      /* Make content a flex row */
      .custom-modal-content {
          display: flex;
          gap: 0.5rem;
      }

      /* Let the text span fill the rest, and wrap inside its box */
      .custom-modal-content span {
          flex: 1 1 auto;
      }

      .modal-icon {
          font-size: 1.2rem;
          margin-right: 0rem;
          vertical-align: middle;
          flex: 0 0 auto;
          position: relative;
          top: 1px;
      }

      /* ⚠️ alert */
      .modal-alert .modal-icon {
          color: orange;
      }

      /* ❓ confirm */
      .modal-confirm .modal-icon {
          color: #cc3633
      }

      /* ✏️ prompt */
      .modal-prompt .modal-icon {
          color: #1e90ff;
      }

      /* Prompt Input Field */
      .custom-modal-input {
          background-color: var(--color-fourth);
          border: 1px solid var(--color-border-color);
          border-radius: 4px;
          padding: var(--spacing-sm) var(--spacing-md);
          font-size: var(--font-size-sm);
          color: var(--color-note-text);
          outline: none;
          width: 100%;
          box-sizing: border-box;
      }

      .custom-modal-input:focus {
          border-color: var(--color-border-hover);
          /* box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1); */
          color: var(--color-text);
      }

      /* Button Group */
      .custom-modal-buttons {
          display: flex;
          justify-content: flex-end;
          gap: var(--spacing-sm);
          margin-top: var(--spacing-md);
      }

      /* Buttons */
      .custom-modal-button {
          padding: var(--spacing-sm) var(--spacing-md);
          border-radius: 4px;
          font-size: var(--font-size-xsm);
          font-family: var(--font-family);
          cursor: pointer;
          border: none;
          font-weight: 600;
          transition: background-color 0.2s ease;
      }

      /* Confirm Button */
      .custom-modal-button:first-child {
          background-color: var(--color-accent2);
          color: var(--color-accent2-text);
      }

      .custom-modal-button:first-child:hover {
          background-color: var(--color-accent2-hover);
          color: var(--color-accent2-text);
      }

      /* Cancel Button or First Button */
      .custom-modal-button:last-child {
          background-color: var(--color-fifth);
          color: var(--color-text);
      }

      .custom-modal-button:last-child:hover {
          background-color: var(--color-border-hover);
          color: var(--color-textHilight);
      }






      :root {
          --notification-info-color: var(--color-href);
          --notification-success-color: var(--color-accent2);
          --notification-warning-color: #ff9800;
          --notification-error-color: #cc3633;
          --notification-bg: var(--color-fourth);
          --notification-text: var(--color-text);
      }

      /* Modern Notification System */
      .notification-wrapper {
          position: fixed;
          bottom: var(--notification-spacing);
          right: 6px;
          display: flex;
          flex-direction: column;
          gap: var(--spacing-sm);
          z-index: 99999;
          pointer-events: none;
          /* Allow clicking through the wrapper */
      }

      .notification {
          display: flex;
          align-items: center;
          background: var(--notification-bg);
          padding: 0.75rem var(--spacing-sm);
          border-radius: 4px;
          box-shadow: var(--color-box-shadow);
          min-width: 280px;
          max-width: 380px;
          font-family: var(--font-family);
          color: var(--notification-text);
          backdrop-filter: blur(8px);
          border: 1px solid var(--color-border-hover);
          pointer-events: auto;
          /* Make the notification clickable */
          transform-origin: right;
          opacity: 0;
          transform: translateX(50px);
          position: relative;
          overflow: hidden;
      }

      .notification-content {
          display: flex;
          align-items: center;
          flex-grow: 1;
      }

      .notification i {
          margin-right: var(--spacing-md);
          font-size: var(--font-size-md);
      }

      .notification-message {
          font-size: var(--font-size-sm);
          flex-grow: 1;
          margin-right: var(--spacing-md);
      }

      .notification code {
          font-size: 0.8rem;
          color: var(--color-textHilight);
          font-weight: 500;
          padding: .2em .4em;
          margin: 0;
          background-color: var(--color-fifth);
          border-radius: 6px;
      }

      .notification-progress {
          position: absolute;
          top: 0;
          left: 0;
          height: 3px;
          background: red;
          border-radius: 0 0 0 var(--border-radius);
          transform-origin: left;
          width: 100%;
          will-change: transform;

          transform: scaleX(1);
      }

      .notification-close {
          background: none;
          border: none;
          color: var(--color-text) !important;
          opacity: 0.7;
          font-size: var(--font-size-md);
          cursor: pointer;
          padding: var(--spacing-xsm);
          display: flex;
          align-items: center;
          width: 20px;
          justify-content: center;
          transition: opacity 0.2s ease;
          margin-left: var(--spacing-sm);
      }

      .notification-close:hover {
          color: var(--color-textHilight) !important;
          opacity: 1;
          background: none;
      }

      /* Type-specific styles */
      .notification-info {
          /* border-left: 4px solid var(--notification-info-color); */
      }

      .notification-info i {
          color: var(--notification-info-color);
      }

      .notification-info .notification-progress {
          background: var(--notification-info-color);
      }

      .notification-success {
          /* border-left: 4px solid var(--notification-success-color); */
      }

      .notification i:not(.notification-close i) {
          font-size: var(--font-size-lg);
      }

      .notification-success i:not(.notification-close i, .notification-message i) {
          color: var(--notification-success-color);
      }

      .notification-success .notification-progress {
          background: var(--notification-success-color);
      }

      .notification-warning {
          /* border-left: 4px solid var(--notification-warning-color); */
      }

      .notification-warning i:not(.notification-close i, .notification-message i) {
          color: var(--notification-warning-color);
      }

      .notification-warning .notification-progress {
          background: var(--notification-warning-color);
      }

      .notification-error {
          /* border-left: 4px solid var(--notification-error-color); */
      }

      .notification-error i:not(.notification-close i, .notification-message i) {
          color: var(--notification-error-color);
      }

      .notification-error .notification-progress {
          background: var(--notification-error-color);
      }

      /* Animations */
      @keyframes slideIn {
          from {
              opacity: 0;
              transform: translateX(50px);
          }

          to {
              opacity: 1;
              transform: translateX(0);
          }
      }

      @keyframes slideOut {
          from {
              opacity: 1;
              transform: translateX(0);
          }

          to {
              opacity: 0;
              transform: translateX(50px);
          }
      }

      @keyframes progress {
          from {
              transform: scaleX(1);
          }

          to {
              transform: scaleX(0);
          }
      }

      /* Mobile responsiveness */
      @media (max-width: 480px) {
          .notification-wrapper {
              bottom: 0;
              right: 0;
              left: 0;
              padding: var(--spacing-sm);
          }

          .notification {
              width: 100%;
              max-width: none;
              border-radius: var(--border-radius) var(--border-radius) 0 0;
          }
      }



      /* AUTH MODAL */

      .auth-container {
          width: 100%;
          max-width: 420px;
          /* Constrains container width */
          background: var(--color-third);
          padding: 1rem;
          border-radius: var(--border-radius);
          border: 1px solid var(--color-border-color);
          margin: 0 auto;
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
          /* box-shadow:  var(--color-box-shadow); */
      }

      .auth-header {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: var(--spacing-sm);
          margin-bottom: var(--spacing-md);
          padding-left: 105px;
      }

      .auth-header i {
          font-size: 32px;
          color: var(--color-text);
      }

      .auth-header span {
          font-size: 1.4rem;
          /* slightly larger than var(--font-size-md) */
          font-weight: 600;
          color: var(--color-text);
          font-family: var(--font-family), 'Noto Color Emoji', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;

      }

      .auth-header i.close-auth-btn {
          font-size: var(--font-size-lg);
          background-color: var(--color-fifth);
          padding: 5px;
          border-radius: 50%;
          margin-left: auto;
          cursor: pointer;
      }

      .auth-header i.close-auth-btn:hover {
          background-color: var(--color-border-hover);

      }

      .auth-separator {
          text-align: center;
          margin: 1.1rem 0;
          color: var(--color-text);
          position: relative;
      }

      .auth-separator::before,
      .auth-separator::after {
          content: "";
          position: absolute;
          top: 50%;
          width: 40%;
          height: 1px;
          background: var(--color-textHilight);
          opacity: 0.25;
      }

      .auth-separator::before {
          left: 0;
      }

      .auth-separator::after {
          right: 0;
      }

      .auth-note {
          text-align: left;
          margin-bottom: var(--spacing-md);
          color: var(--color-text);
          opacity: 0.5;
          font-size: var(--font-size-sm);
      }

      .auth-container .input-group {
          position: relative;
          margin-bottom: var(--spacing-md);
      }

      .auth-container .input-group input {
          width: 100%;
          padding: 12px 40px;
          /* padding for left & right icons */
          border: 1px solid var(--color-border-hover);
          border-radius: 8px;
          font-size: var(--font-size-sm);
          color: var(--color-text);
          background: var(--color-auth);
          outline: none;
          box-sizing: border-box;
      }

      .auth-container .input-group input:focus {
          outline: 2px solid var(--color-accent2);
      }

      /* Left icon (mail/lock) */
      .auth-container .input-group i:first-of-type {
          position: absolute;
          left: 12px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 18px;
          color: var(--color-text);
          opacity: 0.4;
          pointer-events: none;
          /* Not clickable */
      }

      /* Eye toggle icon */
      .toggle-password {
          position: absolute;
          top: 50%;
          right: 12px;
          transform: translateY(-50%);
          width: 24px;
          /* restrict clickable area */
          height: 24px;
          /* restrict clickable area */
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          color: var(--color-text);
          cursor: pointer;
          opacity: 0.5;
          transition: opacity 0.2s ease;
      }

      .toggle-password:hover {
          opacity: 0.8;
          background-color: var(--color-fifth);
          border-radius: 8px;
      }

      .auth-checkbox {
          display: flex;
          align-items: center;
          font-size: var(--font-size-xsm);
          color: var(--color-text);
          /* margin-bottom: 0; */
          margin-bottom: var(--spacing-md);
          margin-top: var(--spacing-md);
      }

      .auth-checkbox input {
          margin-right: var(--spacing-md);
          cursor: pointer;
      }

      .auth-checkbox a {
          color: var(--color-href);
          text-decoration: none;
      }

      .auth-checkbox a:hover {
          text-decoration: underline;
      }

      /* Treat this as a horizontal flex row */
      .auth-checkbox.recaptcha-disclaimer {
          display: flex;
          display: none;
          align-items: center;
          /* Vertically center everything */
          /* Space between icon and text */
          font-size: var(--font-size-xsm);
          color: var(--color-note-text);
          margin-bottom: var(--spacing-md);
          margin-top: var(--spacing-md);
          /* background-color: var(--color-light-blue); */
          border-radius: var(--border-radius);
      }

      /* Optional: slightly adjust icon size/spacing */
      .recaptcha-icon-wrapper {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: calc(var(--spacing-md) - 4px);
      }

      .recaptcha-icon {
          color: var(--color-href) !important;
          font-size: 1rem;
          margin-left: 4px;
      }

      .auth-button {
          width: 100%;
          padding: 10px;
          font-size: var(--font-size-md);
          background: var(--color-accent);
          color: var(--color-accent-text);
          border: none;
          border-radius: 4px;
          cursor: pointer;
          transition: background 0.3s ease;
      }

      .auth-button:hover {
          background: var(--color-accent-hover);
      }

      .auth-footer {
          display: flex;
          justify-content: space-between;
          font-size: var(--font-size-sm);
          margin: var(--spacing-md) 0;
      }

      .auth-footer a {
          color: var(--color-href);
          text-decoration: none;
      }

      .auth-footer a:hover {
          text-decoration: underline;
      }

      .auth-google-button {
          width: 100%;
          padding: 10px;
          font-size: var(--font-size-md);
          background: var(--color-accent);
          color: var(--color-accent-text);
          border: 1px solid transparent;
          border-radius: 4px;
          cursor: pointer;
          transition: filter 0.3s ease;
          margin-top: 0.5rem;
      }

      .auth-google-button:hover {
          background: var(--color-accent-hover);
          /* filter: brightness(0.9); */
          outline: 2px solid var(--color-accent2)
      }

      .google-icon {
          width: 16px;
          height: 16px;
          margin-right: 7px;
      }

      .auth-backdrop {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: var(--color-blur);
          z-index: 999;
          display: flex;
          justify-content: center;
          align-items: center;
          backdrop-filter: blur(8px);
          /* Add backdrop blur effect */
      }


      /* =========================================================
   Notification Centre overrides (scoped)
   ========================================================= */

      /* Widen + center the modal when used as a notification centre */
      .custom-modal-container.notif-centre-container {
          max-width: 520px;
          /* a bit wider for avatar/list */
          margin: 15vh auto 0 auto;
          /* centered horizontally */
          padding-top: 0;
          /* align with rest of app spacing */
          border-top-width: 12px;
          /* keep your accent bar */
          padding-left: 0;
          padding-right: 0;
      }

      /* Reset the inline icon+text flex row layout that .custom-modal-content had */
      .custom-modal-content.notif-centre-wrapper {
          display: flex;
          flex-direction: column;
          align-items: stretch;
          /* gap: var(--spacing-md); */
          margin-left: 0;
          /* kill the offset that pushed left */
          text-align: left;
          /* default; header will center itself */
          font-weight: 400;
          /* slightly lighter than alert text */
          font-size: var(--font-size-sm);
          /* border-top: 1px solid var(--color-border-hover); */
          font-family: var(--font-family), "Noto Color Emoji";
      }

      /* Centre the heading text */
      .notif-centre-wrapper .notif-centre-title {
          width: 100%;
          text-align: left;
          font-size: 1.0rem;
          font-weight: 600;
          margin: 0;
          padding: 0.75rem 0;
          padding-bottom: 0.25rem;
          /* border-bottom: 1px solid var(--color-border-hover); */
      }

      .notif-centre-wrapper .notif-centre-icon {
          font-size: 1.1rem;
          color: var(--color-text);
          position: relative;
          top: 1px;
          margin: 0 var(--spacing-md);
          margin-right: var(--spacing-sm);
      }

      /* Scroll area */
      .notif-centre-wrapper .notif-centre-list {
          max-height: 60vh;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          /* gap: var(--spacing-sm); */
          margin: 0;
          /* we’re managing spacing via wrapper gap */

          /* show scrollbar without overlap */
          border-top: 1px solid var(--color-border-hover);
          border-bottom: 1px solid var(--color-border-hover);
      }

      /* Empty state */
      .notif-centre-wrapper .notif-centre-empty {
          padding: 1.5rem 0;
          text-align: center;
          color: var(--color-note-text);
          opacity: 0.8;
      }

      /* Rows ------------------------------------------------------- */
      .notif-centre-wrapper .notif-row {
          display: flex;
          gap: var(--spacing-sm);
          padding: 1.25rem var(--spacing-md);
          /* padding-left: 1.3rem; */
          padding-bottom: var(--spacing-md);
          /* border-radius: var(--border-radius-button); */
          background: var(--color-fourth);
          /* border: 1px solid var(--color-border-color); */
          border-left: none;
          border-right: none;
          border-top: none;
          transition: background-color 0.15s ease, border-color 0.15s ease;
      }

      .notif-centre-wrapper .notif-row:first-of-type {
          border-top: none;
      }

      .notif-centre-wrapper .notif-row:last-of-type {
          border-bottom: none;
      }

      .notif-centre-wrapper .notif-row:hover {
          background: var(--color-fifth);
          border-color: var(--color-border-hover);
      }

      /* Unread indicator */
      .notif-centre-wrapper .notif-row.notif-unread {
          border-color: var(--color-selected);
          background-color: rgba(37, 85, 149, 0.2);
      }

      .notif-centre-wrapper .notif-row.notif-unread:hover {
          background-color: var(--color-selected);
      }

      .notif-row-context {
          /* font-style: italic; */
          color: var(--color-note-text);
          /* font-size: 0.8rem; */
      }

      .notif-row-username {
          font-style: normal;
          color: var(--color-textHilight);
          font-weight: 700;
      }

      .notif-centre-wrapper .notif-row .notif-project-name {
          text-decoration: none;
          font-style: normal;
          color: var(--color-text);
          font-weight: 600;
      }

      .notif-centre-wrapper .notif-row .notif-project-name:hover {
          text-decoration: underline;
          color: var(--color-href);
      }

      .notif-centre-wrapper .notif-row .notif-action {}

      /* Avatar */
      .notif-centre-wrapper .notif-row-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          padding: 0;
          border: none;
          background: none;
          cursor: pointer;
          /* overflow: hidden; */
          flex-shrink: 0;
          position: relative;
          border: 1px solid var(--color-border-color);
          margin-right: var(--spacing-md);
      }

      .notif-centre-wrapper .notif-row-avatar img {
          border-radius: 50%;
      }

      .custom-modal-container.notif-centre-container .custom-modal-buttons {
          padding: 0 var(--spacing-md);
          margin-top: 0
      }

      .notif-centre-wrapper .notif-row-avatar img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .notif-centre-wrapper .notif-row-avatar-fallback {
          display: grid;
          place-items: center;
          width: 100%;
          height: 100%;
          font-weight: 600;
          border-radius: 50%;
          background: var(--color-third);
          color: var(--color-text);
          font-size: var(--font-size-sm);
      }

      /* Badge with notif type icon */
      .notif-centre-wrapper .notif-row-type-icon {
          position: absolute;
          bottom: -10px;
          right: -10px;
          font-size: 1rem;
          background: var(--color-accent2);
          color: var(--color-accent2-text);
          border-radius: 50%;
          line-height: 1;
          padding: 3px;
          pointer-events: none;
          border: 2px solid var(--color-fifth);
      }

      .notif-row-type-icon.notif-icon-comment {
          background: var(--color-accent2);
          color: var(--color-accent2-text);
      }

      .notif-row-type-icon.notif-icon-like {
          background-color: var(--color-error);
          color: #fff;
      }

      .notif-row-type-icon.notif-follow {
          background-color: var(--color-success);
          color: #fff;
      }

      .notif-row-type-icon.notif-reply {
          background-color: var(--color-debug);
          color: #fff;
      }

      /* Body */
      .notif-centre-wrapper .notif-row-body {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: .25rem;
      }

      /* Username / handle row */
      .notif-centre-wrapper .notif-row-header {
          display: flex;
          align-items: baseline;
          /* gap: .25rem; */
          flex-wrap: wrap;
          display: none;
      }

      .notif-row-username,
      .notif-row-handle,
      .notif-row-project,
      .notif-row-avatar {
          text-decoration: underline;
          color: var(--color-href);
          cursor: pointer;
          font: inherit;
          background: none;
          border: none;
          padding: 0;
          margin: 0;
      }

      .notif-row-username,
      .notif-row-handle {
          text-decoration: none !important;
          color: var(--color-text) !important;
      }

      .notif-row-username:hover,
      .notif-row-handle:hover {
          text-decoration: underline !important;
          color: var(--color-href) !important;
      }

      .notif-row-username {
          font-weight: 600;
      }

      .notif-row-handle {
          opacity: 0.8;
          font-size: 0.85em;
      }

      .notif-row-avatar {
          display: block;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          /* overflow: hidden; */
          flex-shrink: 0;
          position: relative;
      }


      .notif-centre-wrapper .notif-row-username {
          font-weight: 600;
      }

      .notif-centre-wrapper .notif-row-handle {
          opacity: .8;
          font-size: .85em;
      }

      .notif-row-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 0.25rem;
          gap: 1rem;
      }

      .notif-centre-wrapper .notif-row-project {
          text-decoration: none;
          align-self: flex-start;
          font-size: .85em;
          margin-top: .25rem;
          margin-bottom: .25rem;
          padding: var(--spacing-sm) var(--spacing-md);
          border-radius: 4px;
          font-size: var(--font-size-xsm);
          font-family: var(--font-family);
          cursor: pointer;
          border: thin solid var(--color-border-color);
          font-weight: 600;
          background-color: transparent;
          color: var(--color-text) !important;
          margin-left: auto;
      }

      .notif-centre-wrapper .notif-row-project:hover {
          background-color: var(--color-accent2);
          color: var(--color-accent2-text) !important;
          border-color: transparent !important;
      }

      .notif-centre-wrapper .notif-row:hover .notif-row-project {
          border: thin solid var(--color-border-hover);

      }

      /* Message text (respect your link colors) */
      .notif-centre-wrapper .notif-row-msg {
          line-height: 1.5;
          /* margin-bottom: var(--spacing-xsm) */
          padding-right: var(--spacing-xsm);
      }

      .notif-centre-wrapper .notif-row-msg a {
          color: var(--color-href);
          text-decoration: underline;
      }

      .notif-centre-wrapper .notif-row-msg a:visited {
          color: var(--color-href-visited);
      }

      /* Timestamp */
      .notif-centre-wrapper .notif-row-time {
          font-size: var(--font-size-md);
          color: var(--color-note-text);
          opacity: 0.8;
          /* margin-left: auto; */
          margin-top: 0.5rem;
      }



      .confirm-header {
          font-size: var(--font-size-lg);
          font-weight: 500;
          margin: 0 0 6px;
          color: var(--color-textHilight);
      }

      .confirm-body {}

      .confirm-body .confirm-note {}

      .name-chip {
          display: inline-block;
          padding: 0px 2px;
          border-radius: 4px;
          border: thin solid var(--color-border-hover);
          background: var(--color-fifth);
          font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
          font-size: var(--font-size-sm);
          line-height: 1.6;
          white-space: nowrap;
          color: var(--color-text);
      }

      .more-count {
          opacity: .8;
          /* color: var(--color-textHilight); */
          font-style: italic;
          padding: 0px 4px;
      }