// Debug & Troubleshooting styles
@use 'debug';

// Grace period warning banner
.bublz-grace-warning-banner {
    position: relative;
    background-color: #dc2626; // red-600
    color: white;
    padding: 12px 16px;
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 4px;

    a {
        color: white;
        text-decoration: underline;
        font-weight: 600;

        &:hover {
            opacity: 0.9;
        }
    }
}

// Adjust WordPress admin notice margins on Bublz pages
body.bublz-alert-displayed {
    #update-nag,
    .update-nag {
        margin: 25px 20px 20px 2px;
    }
}

body.bublz-admin-page {
    .notice.notice-warning {
        margin-bottom: 20px;
    }

    button:focus,
    button:active,
    a.button:focus,
    a.button:active,
    input[type="button"]:focus,
    input[type="button"]:active,
    input[type="submit"]:focus,
    input[type="submit"]:active {
        outline: none;
        box-shadow: none;
    }
}

// Ticket not found page
.bublz-not-found-container {
    background: white;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bublz-not-found-content {
    text-align: center;

    p {
        font-size: 16px;
        margin-bottom: 10px;
        color: #333;
    }

    a {
        font-size: 16px;
        color: #2271b1;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

:root {
     --bublz-color-gray-50: #f9fafb;
     --bublz-color-gray-100: #f3f4f6;
     --bublz-color-gray-200: #e5e7eb;
     --bublz-color-gray-300: #d1d5db;
     --bublz-color-gray-400: #9ca3af;
     --bublz-color-gray-500: #6b7280;
     --bublz-color-gray-600: #4b5563;
     --bublz-color-gray-700: #374151;
     --bublz-color-gray-800: #1f2937;
     --bublz-color-gray-900: #111827;
     --bublz-color-gray-950: #030712;

     --bublz-color-sky-50: #f0f9ff;
     --bublz-color-sky-100: #e0f2fe;
     --bublz-color-sky-200: #bae6fd;
     --bublz-color-sky-300: #7dd3fc;
     --bublz-color-sky-400: #38bdf8;
     --bublz-color-sky-500: #0ea5e9;
     --bublz-color-sky-600: #0284c7;
     --bublz-color-sky-700: #0369a1;
     --bublz-color-sky-800: #075985;
     --bublz-color-sky-900: #0c4a6e;
     --bublz-color-sky-950: #082f49;

     --bublz-color-blue-50: #eff6ff;
     --bublz-color-blue-100: #dbeafe;
     --bublz-color-blue-200: #bfdbfe;
     --bublz-color-blue-300: #93c5fd;
     --bublz-color-blue-400: #60a5fa;
     --bublz-color-blue-500: #3b82f6;
     --bublz-color-blue-600: #2563eb;
     --bublz-color-blue-700: #1d4ed8;
     --bublz-color-blue-800: #1e40af;
     --bublz-color-blue-900: #1e3a8a;
     --bublz-color-blue-950: #172554;

     --bublz-color-indigo-50: #eef2ff;
     --bublz-color-indigo-100: #e0e7ff;
     --bublz-color-indigo-200: #c7d2fe;
     --bublz-color-indigo-300: #a5b4fc;
     --bublz-color-indigo-400: #818cf8;
     --bublz-color-indigo-500: #6366f1;
     --bublz-color-indigo-600: #4f46e5;
     --bublz-color-indigo-700: #4338ca;
     --bublz-color-indigo-800: #3730a3;
     --bublz-color-indigo-900: #312e81;
     --bublz-color-indigo-950: #1e1b4b;

     --bublz-color-violet-50: #f5f3ff;
     --bublz-color-violet-100: #ede9fe;
     --bublz-color-violet-200: #ddd6fe;
     --bublz-color-violet-300: #c4b5fd;
     --bublz-color-violet-400: #a78bfa;
     --bublz-color-violet-500: #8b5cf6;
     --bublz-color-violet-600: #7c3aed;
     --bublz-color-violet-700: #6d28d9;
     --bublz-color-violet-800: #5b21b6;
     --bublz-color-violet-900: #4c1d95;
     --bublz-color-violet-950: #2e1065;

     --bublz-color-purple-50: #faf5ff;
     --bublz-color-purple-100: #f3e8ff;
     --bublz-color-purple-200: #e9d5ff;
     --bublz-color-purple-300: #d8b4fe;
     --bublz-color-purple-400: #c084fc;
     --bublz-color-purple-500: #a855f7;
     --bublz-color-purple-600: #9333ea;
     --bublz-color-purple-700: #7e22ce;
     --bublz-color-purple-800: #6b21a8;
     --bublz-color-purple-900: #581c87;
     --bublz-color-purple-950: #3b0764;

     --bublz-color-fuchsia-50:  #fdf4ff;
     --bublz-color-fuchsia-100: #fae8ff;
     --bublz-color-fuchsia-200: #f5d0fe;
     --bublz-color-fuchsia-300: #f0abfc;
     --bublz-color-fuchsia-400: #e879f9;
     --bublz-color-fuchsia-500: #d946ef;
     --bublz-color-fuchsia-600: #c026d3;
     --bublz-color-fuchsia-700: #a21caf;
     --bublz-color-fuchsia-800: #86198f;
     --bublz-color-fuchsia-900: #701a75;
     --bublz-color-fuchsia-950: #4a044e;

     --bublz-color-pink-50:  #fdf2f8;
     --bublz-color-pink-100: #fce7f3;
     --bublz-color-pink-200: #fbcfe8;
     --bublz-color-pink-300: #f9a8d4;
     --bublz-color-pink-400: #f472b6;
     --bublz-color-pink-500: #ec4899;
     --bublz-color-pink-600: #db2777;
     --bublz-color-pink-700: #be185d;
     --bublz-color-pink-800: #9d174d;
     --bublz-color-pink-900: #831843;
     --bublz-color-pink-950: #500724;

     --bublz-color-rose-50:  #fff1f2;
     --bublz-color-rose-100: #ffe4e6;
     --bublz-color-rose-200: #fecdd3;
     --bublz-color-rose-300: #fda4af;
     --bublz-color-rose-400: #fb7185;
     --bublz-color-rose-500: #f43f5e;
     --bublz-color-rose-600: #e11d48;
     --bublz-color-rose-700: #e11d48;
     --bublz-color-rose-800: #be123c;
     --bublz-color-rose-900: #881337;
     --bublz-color-rose-950: #4c0519;

     --bublz-color-red-50: #fef2f2;
     --bublz-color-red-100: #fee2e2;
     --bublz-color-red-200: #fecaca;
     --bublz-color-red-300: #fca5a5;
     --bublz-color-red-400: #f87171;
     --bublz-color-red-500: #ef4444;
     --bublz-color-red-600: #dc2626;
     --bublz-color-red-700: #b91c1c;
     --bublz-color-red-800: #991b1b;
     --bublz-color-red-900: #7f1d1d;
     --bublz-color-red-950: #450a0a;

     --bublz-color-orange-50: #fff7ed;
     --bublz-color-orange-100: #ffedd5;
     --bublz-color-orange-200: #fed7aa;
     --bublz-color-orange-300: #fdba74;
     --bublz-color-orange-400: #fb923c;
     --bublz-color-orange-500: #f97316;
     --bublz-color-orange-600: #ea580c;
     --bublz-color-orange-700: #c2410c;
     --bublz-color-orange-800: #9a3412;
     --bublz-color-orange-900: #7c2d12;
     --bublz-color-orange-950: #431407;

     --bublz-color-amber-50:  #fffbeb;
     --bublz-color-amber-100: #fef3c7;
     --bublz-color-amber-200: #fde68a;
     --bublz-color-amber-300: #fcd34d;
     --bublz-color-amber-400: #fbbf24;
     --bublz-color-amber-500: #f59e0b;
     --bublz-color-amber-600: #d97706;
     --bublz-color-amber-700: #b45309;
     --bublz-color-amber-800: #92400e;
     --bublz-color-amber-900: #78350f;
     --bublz-color-amber-950: #451a03;

     --bublz-color-yellow-50: #fefce8;
     --bublz-color-yellow-100: #fef9c3;
     --bublz-color-yellow-200: #fef08a;
     --bublz-color-yellow-300: #fde047;
     --bublz-color-yellow-400: #facc15;
     --bublz-color-yellow-500: #eab308;
     --bublz-color-yellow-600: #ca8a04;
     --bublz-color-yellow-700: #a16207;
     --bublz-color-yellow-800: #854d0e;
     --bublz-color-yellow-900: #713f12;
     --bublz-color-yellow-950: #422006;

     --bublz-color-lime-50:  #f7fee7;
     --bublz-color-lime-100: #ecfccb;
     --bublz-color-lime-200: #d9f99d;
     --bublz-color-lime-300: #bef264;
     --bublz-color-lime-400: #a3e635;
     --bublz-color-lime-500: #84cc16;
     --bublz-color-lime-600: #65a30d;
     --bublz-color-lime-700: #4d7c0f;
     --bublz-color-lime-800: #3f6212;
     --bublz-color-lime-900: #365314;
     --bublz-color-lime-950: #1a2e05;

     --bublz-color-green-50: #f0fdf4;
     --bublz-color-green-100: #dcfce7;
     --bublz-color-green-200: #bbf7d0;
     --bublz-color-green-300: #6ee7b7;
     --bublz-color-green-400: #4ade80;
     --bublz-color-green-500: #22c55e;
     --bublz-color-green-600: #16a34a;
     --bublz-color-green-700: #15803d;
     --bublz-color-green-800: #166534;
     --bublz-color-green-900: #14532d;
     --bublz-color-green-950: #052e16;

     --bublz-color-emerald-50:  #ecfdf5;
     --bublz-color-emerald-100: #d1fae5;
     --bublz-color-emerald-200: #a7f3d0;
     --bublz-color-emerald-300: #6ee7b7;
     --bublz-color-emerald-400: #34d399;
     --bublz-color-emerald-500: #10b981;
     --bublz-color-emerald-600: #059669;
     --bublz-color-emerald-700: #047857;
     --bublz-color-emerald-800: #065f46;
     --bublz-color-emerald-900: #064e3b;
     --bublz-color-emerald-950: #022c22;

     --bublz-color-teal-50:  #f0fdfa;
     --bublz-color-teal-100: #ccfbf1;
     --bublz-color-teal-200: #99f6e4;
     --bublz-color-teal-300: #5eead4;
     --bublz-color-teal-400: #2dd4bf;
     --bublz-color-teal-500: #14b8a6;
     --bublz-color-teal-600: #0d9488;
     --bublz-color-teal-700: #0f766e;
     --bublz-color-teal-800: #115e59;
     --bublz-color-teal-900: #134e4a;
     --bublz-color-teal-950: #042f2e;

     --bublz-color-cyan-50:  #ecfeff;
     --bublz-color-cyan-100: #cffafe;
     --bublz-color-cyan-200: #a5f3fc;
     --bublz-color-cyan-300: #67e8f9;
     --bublz-color-cyan-400: #22d3ee;
     --bublz-color-cyan-500: #06b6d4;
     --bublz-color-cyan-600: #0891b2;
     --bublz-color-cyan-700: #0e7490;
     --bublz-color-cyan-800: #155e75;
     --bublz-color-cyan-900: #164e63;
     --bublz-color-cyan-950: #083344;

     --bublz-border-radius: 4px;
     --bublz-transition: all 250ms ease-in-out;
     --bublz-font-family-system: 'Inter', system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     --bublz-font-family-mono: 'Roboto Mono', monospace;
     --bublz-font-family-pixel: 'JetBrains Mono', monospace;
     --bublz-box-shadow: 1px 1px 1px rgba(0,0,0,.25);
     --wp-admin-bar-background-color: #1d2327;



}


body {
     background-color: #fff;
     *, *::before, *::after {
          box-sizing: border-box;
     }

     a.bublz-file-icon-link,
     a.bublz-file-icon-link:focus,
     a.bublz-file-icon-link:active {
          box-shadow: none!important;
          border: none!important;
     }


     &.warn {

          .bublz-breadcrumbs-title {
               color: var(--bublz-color-red-500)!important;
          }
     }

     &.toplevel_page_supernifty-bublz {

          h3 {
               font-size: 19px;
               user-select: none;
               font-weight: 700;
               margin: 32px auto 8px 0;
               display: flex;
               align-items: center;

               i {
                    font-size: 19px;
                    color: var(--bublz-color-gray-950)!important;
                    display: flex;
                    font-style: normal;
                    margin-right: 4px;
                    line-height: 2;

                    svg {
                         display: flex;
                         width: 18px;
                         height: 18px;
                         fill: var(--bublz-color-gray-950)!important;
                    }

               }

          }

     }

}

// Bublz Alert System
.bublz-alert {
     position: relative;
     z-index:9999;
     display: flex;
     max-height: 0;
     overflow: hidden;
     opacity: 0;
     transition: all 250ms ease-in-out;
     background: var(--bublz-color-gray-500);
     margin: 0;
     color: white;
     padding: 4px 16px;
     box-shadow: 1px 2px 3px rgba(0,0,0,.2);

     a,
     a:link,
     a:visited {
          color: #fff!important;
          transition: all 250ms ease-in-out;
     }

     a:hover,
     a:focus,
     a:active {
          color: #000!important;
     }

     .bublz-alert-content {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 0;
          width: 100%;

          h3 {
               font-size: 16px;
               margin: 0 32px 0 0;
               color: #fff;
          }

          p {
               margin: 0;
               padding: 0;
          }


          .bublz-alert-header {
               display: flex;
               align-items: center;
               padding: 4px 0;


          }

          .bublz-alert-body {
               display: flex;
               flex-direction: column;
               overflow: hidden;
               transition: all 250ms ease-in-out;
               opacity: 0;
               max-height: 0;

               p {
                    margin-bottom: 8px;

                    &:first-child {
                         margin-top: 8px;
                    }
               }

          }

     }

     &.active {

          .bublz-alert-content {

               .bublz-alert-body {

                    max-height: 500px;
                    opacity: 1;

               }
          }
     }

     .bublz-alert-actions {
          display: flex;
          margin-bottom: auto;
     }

     .bublz-alert-btns {
          display: flex;
          margin-top: 16px;

          .bublz-alert-btn:first-child {
               margin-right: 8px;
          }
     }

     .bublz-alert-btn {
          display: inline-flex;
          padding: 4px 12px;
          margin: 0;
          cursor: pointer;
          border: 1px solid white;
          color: white;
          text-decoration: none;
          background-color: transparent;
          border-radius: 4px;
          transition: all 250ms ease-in-out;
          outline: none;
          box-shadow: none;
          line-height: 2;
          user-select: none;
          white-space: nowrap;

          &:hover,
          &:active,
          &:focus {
               outline: none;
               box-shadow: none;
               color: var(--bublz-color-gray-950);
               border-color: var(--bublz-color-gray-950);
          }

          &.bublz-alert-dismiss {
               margin-left: 8px;
          }

     }

     &.bublz-alert-info {
          background: #FF0000;
     }

     &.bublz-alert-success {
          background: var(--bublz-color-green-400);
     }

     &.bublz-alert-error {
          background: var(--bublz-color-red-400);
     }
}

// Pro alert trigger button (inside breadcrumbs)
.bublz-pro-alert-trigger {
     display: inline-flex;
     align-items: center;
     padding: 6px 14px;
     margin-left: auto;
     background: #FF0000;
     color: #fff;
     font-size: 12px;
     font-weight: 600;
     font-family: var(--bublz-font-family-system);
     border: none;
     border-radius: 4px;
     cursor: pointer;
     white-space: nowrap;
     transition: opacity 250ms ease-in-out;

     &:hover {
          opacity: 0.85;
     }

     &:focus,
     &:active {
          outline: none;
          box-shadow: none;
     }
}

// Pro alert modal
.bublz-pro-alert-modal {
     display: none;
     position: fixed;
     inset: 0;
     z-index: 100000;
     align-items: center;
     justify-content: center;
     background: rgba(0, 0, 0, 0.6);

     .bublz-pro-alert-modal-content {
          position: relative;
          background: #fff;
          border-radius: 8px;
          padding: 32px;
          max-width: 480px;
          width: 90%;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

          h3 {
               margin: 0 0 16px;
               font-size: 18px;
               font-weight: 700;
               color: var(--bublz-color-gray-900);
          }

          p {
               margin: 0 0 12px;
               font-size: 14px;
               line-height: 1.5;
               color: var(--bublz-color-gray-700);

               a {
                    color: #FF0000;
                    text-decoration: underline;
               }
          }

          .bublz-alert-btns {
               display: flex;
               gap: 8px;
               margin-top: 20px;
          }

          .bublz-alert-btn {
               display: inline-flex;
               padding: 8px 16px;
               cursor: pointer;
               border: 1px solid var(--bublz-color-gray-300);
               color: var(--bublz-color-gray-700);
               background: #fff;
               border-radius: 4px;
               font-size: 13px;
               font-weight: 500;
               text-decoration: none !important;
               transition: all 150ms ease;
               line-height: 1.4;

               &:hover {
                    background: var(--bublz-color-gray-100);
                    border-color: var(--bublz-color-gray-400);
               }

               &#bublz-delete-orphaned-data {
                    color: #FF0000;
                    border-color: #FF0000;

                    &:hover {
                         background: #FF0000;
                         color: #fff;
                    }
               }

               &#bublz-activate-pro {
                    background: #FF0000;
                    border-color: #FF0000;
                    color: #fff;

                    &:hover {
                         background: #cc0000;
                         border-color: #cc0000;
                    }
               }
          }
     }

     .bublz-pro-alert-modal-close {
          position: absolute;
          top: 12px;
          right: 12px;
          background: none;
          border: none;
          font-size: 24px;
          line-height: 1;
          color: var(--bublz-color-gray-400);
          cursor: pointer;
          padding: 4px 8px;

          &:hover {
               color: var(--bublz-color-gray-700);
          }

          &:focus {
               outline: none;
               box-shadow: none;
          }
     }
}

// Spinner for button loading states
.bublz-spinner {
     display: inline-block;
     width: 16px;
     height: 16px;
     border: 2px solid rgba(255, 0, 0, 0.2);
     border-top-color: #FF0000;
     border-radius: 50%;
     animation: bublz-spin 0.6s linear infinite;
}

@keyframes bublz-spin {
     to { transform: rotate(360deg); }
}

// Inline license activation button in kanban filters and edit breadcrumbs
.bublz-activate-pro-btn {
     display: inline-flex;
     align-items: center;
     padding: 4px 12px;
     background: #FF0000;
     color: #fff !important;
     font-size: 12px;
     font-weight: 600;
     text-decoration: none !important;
     border-radius: 4px;
     white-space: nowrap;
     transition: opacity 250ms ease-in-out;

     &:hover,
     &:focus,
     &:active {
          opacity: 0.85;
          color: #fff !important;
          outline: none !important;
          box-shadow: none !important;
     }
}

// Show bublz alerts when present
body.bublz-alert-displayed .bublz-alert {
     display: flex;
     min-height: 60px;
     max-height: 200px;
     opacity: 1;
     transition: all 250ms ease-in-out;
}

#wpcontent {
     padding: 0!important;
}

.wrap {
     margin: 0;
}

.bublz-wrap {
     padding: 16px;
}

.text-xl {
     font-size: 32px!important;
     margin: 0!important;
}




body.bublz-ticket-settings-view ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu>li.current>a.current:after { border-right-color: #fff!important; }



.bublz-breadcrumbs {

     position: relative;
     z-index: 999;
     display: flex;
     align-items: center;
     width: 100%;
     font-family: var(--bublz-font-family-system);
     font-weight: 700;
     padding: 0 16px 4px 4px;
     color: var(--bublz-color-gray-800);
     transition: var(--bublz-transition);
     background-color: #1d2327;

     .bublz-logo-back,
     a.bublz-logo-back,
     a.bublz-logo-back:link,
     a.bublz-logo-back:visited {

          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          text-decoration: none;
          width: 50px;
          height: 70px;
          transition: var(--bublz-transition);
          user-select: none;
          margin: 6px 8px 2px 0;

          svg {
               position: absolute;
               inset: 0;
               transition: var(--bublz-transition);
               user-select: none;
               flex-shrink: 0;

               &.bublz-logo {
                    width: 50px;
                    height: 61px;
                    aspect-ratio: 73/87;
                    opacity:1;
                    margin-right: 6px;


                    .bublz-logo-outline {
                         fill: #fff!important;
                    }

                    .bublz-logo-bubble {
                         transition: var(--bublz-transition);
                         fill: #000;
                    }

                    .bublz-logo-priority {
                         fill: #f00;
                    }


               }

               &.bublz-arrow-back {
                    width: 30px;
                    height: 70px;
                    aspect-ratio: 1/1;
                    fill: #fff;
                    margin-left: 10px;
                    opacity: 0;
               }

          }




     }

     a.bublz-logo-back:hover,
     a.bublz-logo-back:focus,
     a.bublz-logo-back:active {
          outline: none;
          border: none;
          box-shadow: none;

          svg {
               &.bublz-logo {
                    opacity: 0;
               }

               &.bublz-arrow-back {
                    opacity: 1;
               }

          }

     }

     h1.bublz-breadcrumbs-title {
          display: flex!important;
          align-items: center;
          font-size: 36px;
          font-weight: 700;
          line-height: 1.1;
          margin: 0;
          padding: 0!important;
          color: #fff!important;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: calc(100vw - 200px);
     }

     .bublz-activate-pro-btn {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          margin-left: 12px;
          padding: 6px 14px;
          background: #FF0000;
          color: #fff;
          border: none;
          border-radius: 4px;
          font-size: 13px;
          font-weight: 600;
          cursor: pointer;
          white-space: nowrap;
          transition: background 0.15s;

          svg {
               width: 14px;
               height: 14px;
               fill: #fff;
          }

          &:hover {
               background: #cc0000;
          }

          &:focus,
          &:active {
               outline: none !important;
               box-shadow: none !important;
          }
     }

     .bublz-btn {
          margin: -4px 0 4px auto;
          padding: 10px 32px!important;
          background-color:transparent!important;
          border: 1px solid rgba(255,255,255,.75)!important;
          color: rgba(255,255,255,.75)!important;
          transition: var(--bublz-transition);

          &:hover {
               color: #fff!important;
               border: 1px solid #fff!important;
          }

          &.bublz-toggle-new-ticket-panel {
               &:before {
                    content: 'New Bubl';
               }
          }
     }

}

#bublz-kanban-filters-new {
     display: flex;
     align-items: center;
     margin: 0 0 0 auto;
     list-style: none;
     gap: 12px;

     li {
          margin: 0;
          padding: 0;
          display: flex;
          
          &.bublz-btn {
               // Ensure button styles apply to li elements
               display: inline-flex;
          }
     }



     .bublz-dropdown.bublz-user-filter {
          width: 200px !important;
          font-size: 14px !important;
          padding: 12px 32px 12px 12px !important;
          color: rgba(255,255,255,.75)!important;
          border: 1px solid rgba(255,255,255,.75);
          transition: all 250ms ease-in-out;
          background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22rgba(255,255,255,.75)%22%2F%3E%3C%2Fsvg%3E') no-repeat right 8px top 55%!important;
          appearance: none;

          &:hover {
               border: 1px solid #fff;
               color: #fff !important;
               background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fsvg%3E') no-repeat right 8px top 55%!important;
          }

          &:before {
               position: absolute;
               top: -16px;
               left: 0;
               font-size: 9px;
               text-transform: uppercase;
               font-weight: 400;
               content: 'Assigned';
          }

          &:after {
               content: attr(data-assigned_to) !important;
               font-size: 14px;
               font-weight: 400;
               text-transform: none;
               max-width: 400px;
          }

          ul {
               max-width: 400px;
               min-width: 100%;
               width: auto;

               li {
                    padding: 0 16px;
                    font-size: 13px;
                    font-weight: 400;

                    &:first-child {
                         padding-top: 2px;
                    }
                    &:last-child {
                         padding-bottom: 2px;
                    }
               }

          }
     }

}


// Card filtering animation
.bublz-card {
     transition: transform 0.3s ease;

     &.filtered {
          transform: scale(0);
          max-height: 0;
          max-width: 0;
          margin: 0;
          border-top: none!important;
          border-bottom: none!important;
     }
}


.bublz-info-wrap {

     position: relative;
     display: flex;

     .bublz-views-delete {
          position: absolute;
          bottom: 16px;
          right: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .bublz-views {
               display: flex;
               align-items: center;
               justify-content: flex-end;
               margin: 0 16px 0 auto;
               color: var(--bublz-color-gray-500)!important;
               user-select: none;
               background-color: var(--bublz-color-gray-100);
               border-radius: 16px;
               padding: 8px 16px;

               svg {
                    width: 16px;
                    height: 16px;
                    fill: var(--bublz-color-gray-500)!important;
                    flex-shrink: 0;
                    margin-right: 8px;
               }

               i {
                    font-style: normal;

               }

          }

          .bublz-destroy {

               &:before {
                    border-radius: 4px;
                    padding: 2px 8px;
                    font-size: 16px;
               }


          }



     }



     .bublz-info-row {
          display: flex;
          flex-direction: column;
          width: 100%!important;
          margin-bottom: 16px;

          .bublz-select-field {
               display: flex;
               flex-direction: column;
               margin: 0;

               label {
                    text-transform: uppercase;
                    color: var(--bublz-color-gray-950)!important;
                    font-size: 11px!important;
                    font-family: var(--bublz-font-family-system)!important;
                    margin: 0 0 6px 0;
                    line-height: 18px;
               }

               select {
                    background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22rgba(255,255,255,.5)%22%2F%3E%3C%2Fsvg%3E') no-repeat right 16px top 55%!important;
                    border-radius: 4px!important;
                    height: 48px!important;
                    max-width: revert;
                    outline: none!important;
                    box-shadow: none!important;
                    color: #FFF!important;
                    text-transform: uppercase;
                    padding-left: 12px!important;
                    border: none!important;

                    &:focus {
                         outline: none!important;
                         box-shadow: none!important;
                         border: none!important;
                    }
               }
          }

          .bublz-priority-reporter-wrap {
               display: flex;
               flex-direction: column;
               margin: 3px 0 30px 0;
          }

          .bublz-status-assigned-location-tools-wrap {
               display: flex;
               flex-direction: column;
               width: 100%;
          }

          .bublz-status-assigned-selects {
               display: flex;
               width: 100%;

               .bublz-select-field {
                    width: 100%;

                    &:first-child {
                         margin-right: 8px!important;

                    }

                    select {
                         width: 100%;
                    }
               }


          }

          .bublz-target-title-url-wrap {

               display: flex;
               flex-direction: column;
               margin: 26px 0 0 16px;

               .bublz-target-label {
                    text-transform: uppercase;
                    color: #000;
                    font-size: 11px!important;
                    font-family: var(--bublz-font-family-system)!important;
               }

               .bublz-target-title,
               .bublz-target-title a,
               .bublz-target-title a:link,
               .bublz-target-title a:visited, {

                    font-size: 14px!important;
                    font-weight: 700;
                    line-height: 1.25;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #000!important;
                    text-decoration: none!important;
                    transition: var(--bublz-transition)!important;
               }

               .bublz-target-url {

                    max-width: 200px!important;

                    a,
                    a:link,
                    a:visited, {
                         color: #000!important;
                         text-decoration: none!important;
                         transition: var(--bublz-transition)!important;
                         border-bottom: 1px solid transparent;
                         text-overflow: ellipsis;
                         white-space: nowrap;
                    }

                    a:hover,
                    a:focus,
                    a:active, {
                         border-bottom: 1px solid #000;
                    }

               }

          }


          @media (min-width: 640px) {  }
          @media (min-width: 768px) {  }

          @media (min-width: 1024px) {

               flex-direction: row;

               .bublz-ticket-priority {
                    min-width: 400px;
               }

               .bublz-priority-reporter-wrap {
                    margin: 9px 8px 0 0;
               }



          }
          @media (min-width: 1280px) {






          }
          @media (min-width: 1536px) {  }




     }























}

span.bublz-link-post-title,
a.bublz-link-post-title,
a.bublz-link-post-title:link,
a.bublz-link-post-title:visited
{
     display:flex;
     margin: 0 0 8px 0;
     font-size: 32px!important;
     font-weight: 900!important;
     color: var(--bublz-color-gray-600)!important;
     user-select: none;
     transition: var(--bublz-transition);
}

a.bublz-link-post-title:hover,
a.bublz-link-post-title:focus,
a.bublz-link-post-title:active
{
     color: var(--bublz-color-gray-950)!important;
}

a.bublz-link-post-url,
a.bublz-link-post-url:link,
a.bublz-link-post-url:visited
{
     display:flex;
     margin: 0;
     font-size: 14px!important;
     font-weight: 400!important;
     color: var(--bublz-color-blue-300)!important;
     user-select: none;
     transition: var(--bublz-transition);
}

a.bublz-link-post-url:hover,
a.bublz-link-post-url:focus,
a.bublz-link-post-url:active
{
     color: var(--bublz-color-blue-500)!important;
}

/* ==========================================================================
   Layout Components
   ========================================================================== */
.bublz-bottom-btns {
     display: flex;
     flex-direction: column;
     width: 100%;
     padding: 16px 0;

     .bublz-btn {
          margin-right: auto;
     }

}

.bublz-header {
     position: relative;
     z-index: 998;
     display: grid;
     grid-template-columns: 1fr 350px;
     grid-template-rows: auto;
     grid-column-gap: 16px;
     padding: 16px;
     background-color: #fff;

     a:hover,
     a:focus,
     a:active {
          transition: var(--bublz-transition);
          outline: none!important;
          box-shadow: none!important;
     }

     a#bublz-header-brand-nav,
     a#bublz-header-brand-nav:link,
     a#bublz-header-brand-nav:visited
     {
          display: flex;
          align-items: center;
          text-decoration: none;
          outline: none;
          box-shadow: none;
          color: var(--bublz-color-gray-600)!important;
          user-select: none;
          transition: var(--bublz-transition);
          max-width: calc(100vw - 650px);
          margin-bottom: -16px;
     }

     a#bublz-header-brand-nav:hover,
     a#bublz-header-brand-nav:focus,
     a#bublz-header-brand-nav:active {
          transition: var(--bublz-transition);
          outline: none!important;
          box-shadow: none!important;
     }

     a svg,
     a:link svg,
     a:visited svg {

          width: 150px;
          height: 45px;
          fill: var(--bublz-color-gray-800);
          transition: var(--bublz-transition);

     }

     a:hover svg,
     a:focus svg,
     a:active svg {
          outline: none!important;
          box-shadow: none!important;
     }

     i {
          display: flex;
          font-style: normal;
          font-size: 18px;
          font-weight: 700;
          color: var(--bublz-color-gray-600)!important;
          line-height: 1.75;
     }

     .bublz-separator {
          color: var(--bublz-color-gray-500)!important;
          margin: 0 4px;
     }

     i.bublz-ticket-title {
          font-style: normal;
          color: var(--bublz-color-gray-500)!important;
          overflow: hidden;
          text-overflow: ellipsis!important;
          max-width: 100%;
          white-space: nowrap;

     }


}









/* ==========================================================================
   Buttons
   ========================================================================== */
.bublz-btn,
.bublz-btn:link,
.bublz-btn:visited {
     display: inline-flex;
     align-items: center;
     text-align: center;
     background-color: #fff;
     border: 1px solid var(--bublz-color-gray-300)!important;
     color: var(--bublz-color-gray-400);
     font-weight: 400;
     font-size: 14px;
     text-transform: uppercase;
     padding: 8px 16px;
     border-radius: 3px;
     outline: none;
     box-shadow: none;
     text-decoration: none;
     white-space: nowrap;
     user-select: none;
     cursor: pointer;
     transition: var(--bublz-transition);
}

.bublz-btn:hover,
.bublz-btn:focus,
.bublz-btn:active {
     border-color: var(--bublz-color-gray-950)!important;
     color: var(--bublz-color-gray-950)!important;
     border: none;
     outline: none;
     box-shadow: none;
}

/* ==========================================================================
   Alerts
   ========================================================================== */
.bublz-saved-alert {
     background-color: #FF0000;
     border: none;
     border-radius: 3px;
     color: #fff;
     font-size: 11px;
     left: 50%;
     opacity: 0;
     padding: 2px 8px;
     position: fixed;
     text-transform: uppercase;
     top: 48px;
     transform: translateX(-50%) translateY(-10px);
     transition: var(--bublz-transition);
     z-index: 9999;
     user-select: none;
}

.bublz-saved-alert.show {
     opacity: 1;
     transform: translateX(-50%) translateY(0);
}

.bublz-kanban {
     position: relative;
     display: flex;
     flex-direction: column;
     width: auto;
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: none;
     margin-bottom: 16px;
     border-bottom: 2px solid var(--bublz-color-gray-200);

     &::-webkit-scrollbar {
          display: none;
     }


     .bublz-kanban-labels,
     .bublz-kanban-columns {
          position: relative;
          display: grid;
          grid-template-columns: repeat(5, minmax(250px, 1fr));
          grid-template-rows: auto;
          grid-row-gap: 16px;
          width: 100%;
     }

     .bublz-kanban-labels {

          .bublz-kanban-label {
               position: relative;
               color: #fff;
               content: attr(data-label);
               padding: 36px 12px 8px 0;
               width: calc(100% - 32px);
               font-size: 18px;
               font-weight: 700;
               display: inline-flex;
               align-items: center;
               text-transform: uppercase;
               pointer-events: none;
               user-select: none;
               border-bottom: 4px solid;
               margin-left: 16px;

               &:last-child {
                    padding: 36px 12px 8px 12px;
               }
          }
     }

     .bublz-kanban-columns {
          background-color: #fcfdfc;
     }

     .bublz-kanban-column {
          position: relative;
          height: 75vh;
          overflow-y: auto;
          -ms-overflow-style: none;
          scrollbar-width: none;
          padding: 24px 16px;
          border-right: 2px dashed var(--bublz-color-gray-200);

          &:last-child { border-right: none!important; }

          &::-webkit-scrollbar {
               display: none;
          }

     }

}

.bublz-card,
.bublz-new-ticket-form
{

     display: flex;
     position: relative;
     flex-direction: column;
     border-radius: 4px;
     background-color: #fff;
     margin-bottom: 24px;
     transition: var(--bublz-transition);
     cursor: pointer;
     user-select: none;
     color: var(--bublz-color-gray-700);

     .bublz-go-to-edit-view {
          padding: 0 16px 32px 16px;
     }

     &.warn {
          background-color: var(--bublz-color-red-100);
     }

     &.sortable-chosen {
          // transform: scale(1.05) rotate(-2deg)!important;
     }

     &.sortable-ghost {
     }

     &.sortable-drag * {
          opacity: .5!important;
     }

     .bublz-ticket-priority {
          margin: 0;
          width: 100%;

          &:after {
               top: 0;
               left: 0;
               width: 100%!important;
               height: 32px;
               border-radius: 4px 4px 0 0;
          }

     }

     .body {
          padding: 16px;
     }

     &.bublz-card {
          border: none!important;
          box-shadow: 0 0 5px 2px rgba(0,0,0,.1);
          &:hover {
               box-shadow: 0 0 6px 6px rgba(0,0,0,.1);
          }
     }

     .bublz-card-title {
          font-family: var(--bublz-font-family-system);
          font-size: 14px!important;
          font-weight: 600;
          margin: 4px 0 4px 0;
          overflow: hidden;
     }

     .bublz-card-reported-by {
          font-size: 13px!important;
          font-weight: 700;
          padding: 8px 0 0 40px;
          overflow: hidden;
          text-overflow: ellipsis;
     }

     .bublz-card-created {
          font-size: 11px!important;
          font-weight: 400;
          padding: 0 0 8px 40px;
          overflow: hidden;
          text-overflow: ellipsis;

          .bublz-local-time {
               white-space: nowrap;
               text-overflow: ellipsis;
          }
     }

     .bublz-card-description {
          font-family: var(--bublz-font-family-system);
          font-size: 12px!important;
          margin-bottom: 16px;
          overflow: hidden;
     }

     .d {
          position: relative;
          margin: 16px 0 32px 0;
     }

     .d:before {
          position: absolute;
          top: -16px;
          font-size: 9px;
          text-transform: uppercase;
     }

     .d.target:before {
          content: 'location';
     }

     .d.dscription:before {
          content: 'description';
     }

     .d.assigned_to:before {
          content: 'assigned to';
     }

     a.title,
     a.title:link,
     a.title:visited {
          padding: 18px 16px 16px 16px;
          font-size: 14px;
          font-weight: 600;
          text-decoration: none;
          color: var(--bublz-color-gray-600);
          transition: var(--bublz-transition);
          overflow: hidden;
          text-overflow: ellipsis;
     }

     a.title:hover,
     a.title:focus,
     a.title:active {
          outline: none;
          box-shadow: none;
          color: var(--bublz-color-blue-400);
     }

     .target a,
     .target a:link,
     .target a:visited {
          text-decoration: none;
     }

     .target a:hover,
     .target a:focus,
     .target a:active {
          outline: none;
          box-shadow: none;
     }

     .bublz-card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 8px 0 16px;
          width: 100%;

          svg {
               display: flex;
               width: 18px;
               height: 18px;
          }

     }

     .bublz-ticket-reported-by {
          position: relative;
          display: flex;
          align-items: center;
          margin: 8px 0!important;
          font-size: 12px!important;
          text-transform: uppercase;
          color: #000;
     }

     .bublz-ticket-reported-by img {
          width: 32px;
          height: 32px;
          margin-right: 4px;
     }

}

.bublz-new-ticket-form
{

     transform: scale(.25);
     transform-origin: top;

     .bublz-field.priority {
          position: relative;
          z-index: 99;
          padding: 24px 16px 13px 16px;

          .bublz-ticket-priority {
               margin: 0;
               width: 100%;

               &:after {
                    top: 0;
                    left: 0;
                    width: 100%!important;
                    height: 32px;
                    border-radius: 4px;
                    padding: 0 0 0 70px;
               }

               ul {
                    box-shadow: 0 0 3px rgba(0,0,0,.25);
               }

          }

     }

}



.bublz-card-actions {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     background-color: var(--bublz-color-gray-50);
     display: flex;
     align-items: flex-end;
     padding: 8px 12px;
     list-style: none;
     margin: 0;
     border-radius: 0 0 4px 4px;
     overflow: hidden;

     li {
          position: relative;
          display: flex;
          justify-content: center;
          margin: 0 8px 0 0;

          &:first-child {
               align-items: center;
          }

          &:last-child {
               margin: 0 0 0 auto;
          }

          &:after {
               position: relative;
               content: attr(data-count);
               color: var(--bublz-color-gray-500);
               display: flex;
               font-weight: 600;
               margin: 0 0 0 2px;
               font-size: 12px;
          }

          svg {
               fill: var(--bublz-color-gray-500);
               width: 16px;
               height: 16px;
               display: flex;
               flex-shrink: 0;
          }

          .bublz-destroy {

               width: 16px;
               height: 16px;

               &:before {
                    right: 24px!important;
               }

               svg.trash {
                    fill: var(--bublz-color-gray-500)!important;
               }

               &:hover {
                    svg.trash {
                         fill: var(--bublz-color-red-500)!important;
                    }
               }




          }



     }


     a:hover svg {
          fill: #333;
     }



}



.bublz-ticket-tools {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     grid-template-rows: auto;
     grid-column-gap: 16px;
     grid-row-gap: 16px;
}

@media (min-width: 640px) { .bublz-ticket-tools { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .bublz-ticket-tools { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .bublz-ticket-tools { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .bublz-ticket-tools { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1536px) { .bublz-ticket-tools { grid-template-columns: repeat(4, 1fr); } }




.bublz-ticket-target {
     padding: 0;
     color: var(--bublz-color-gray-500);
     border-radius: 0 0 4px 4px;
     display: flex;
     align-items: center;
     font-family: var(--bublz-font-family-mono);
     margin-bottom: 16px;
}

.bublz-ticket-target span,
.bublz-ticket-target a,
.bublz-ticket-target a:link,
.bublz-ticket-target a:visited {
     text-decoration: none!important;
     color: var(--bublz-color-blue-500);
     background-color: var(--bublz-color-gray-100);
     margin: 0;
     transition: var(--bublz-transition);
     line-height: 2.5;
     display: flex;
     width: 100%;
     padding: 0 16px;
     border-radius: 0 0 4px 4px;
}

.bublz-ticket-target span:hover,
.bublz-ticket-target a:hover,
.bublz-ticket-target a:focus,
.bublz-ticket-target a:active {
     outline:none!important;
     box-shadow: none!important;
     color: var(--bublz-color-blue-800);
     background-color: var(--bublz-color-blue-100);
}

.bublz-ticket-target span {
     pointer-events: none;
}



.bublz-ticket-target:before {
     content: 'TARGET:';
     font-family: var(--bublz-font-family-system);
     background-color: var(--bublz-color-blue-400);
     padding: 0 16px;
     color: #fff;
     border-radius: 0 0 0 4px;
     line-height: 2.5;
}



.bublz-fields {


     position: relative;
     display: flex;
     flex-direction: column;

     &.settings {
          display: flex;
          width: 100%;
          min-width: 300px;
     }

     label {
          position: absolute;
          top: 8px;
          left: 16px;
          display: flex;
          text-transform: uppercase;
          margin: 0 auto -16px 0;
          font-size: 11px;
          font-weight: 400;
          color: #000;
          z-index: 5;
     }

     .bublz-field {
          display: flex;
          flex-direction: column;
          width: 100%;

          input,
          textarea,
          [contenteditable]{
               border: none!important;
               outline: none!important;
               box-shadow: none!important;
               padding: 12px 16px 0 16px!important;
               font-size: 16px!important;
               width: 100%;
               transition: var(--bublz-transition)!important;
               font-family: var(--bublz-font-family-system);
               color: var(--bublz-color-gray-800)!important;
          }

          input:focus,
          textarea:focus,
          [contenteditable]:focus {
               color: var(--bublz-color-gray-950)!important;
          }

          select {
               border: none!important;
               outline: none!important;
               box-shadow: none!important;
               padding: 8px 16px!important;
               font-size: 14px!important;
               background-color: var(--bublz-color-gray-50);
               width: 100%;
               transition: var(--bublz-transition)!important;
          }

          &.title,
          &.description {
               display: flex;
               width: 100%;
               padding: 16px 16px 16px 0;
               background-color: var(--bublz-color-gray-50);
               margin-bottom: 16px;
               border-radius: 4px;
               border: 1px solid var(--bublz-color-gray-50);
               transition: var(--bublz-transition)!important;

               #title-contenteditable,
               #description-contenteditable {
                    padding: 20px 100px 0 16px!important;
                    font-size: 16px!important;
                    line-height: 1.5!important;

               }

               #description-contenteditable {
                    min-height: 200px;
               }

               &:focus-within {
                    border-color: var(--bublz-color-gray-950);

               }

               // Disable interaction and visual feedback for read-only fields
               &:has([aria-readonly="true"]) {
                    pointer-events: none;
                    cursor: default;

                    &:focus-within {
                         border-color: var(--bublz-color-gray-50);
                    }
               }

          }

          .tools {
               display: flex;
               justify-content:flex-end;
          }

          small {
               font-size: 12px;
               color: var(--bublz-color-gray-400);
               display: flex;
               justify-content: center;
               text-align: center;
               width: 100%;
               margin-top: 4px;
          }

          &.uploads {
               margin-bottom: 8px;
          }

          input,
          textarea
          {
               display: flex;
               width: 100%;
               margin: 0 0 8px 0;
               color: var(--bublz-color-blue-950)!important;
               font-size: 14px!important;

               &::placeholder,
               &::placeholder
               {
                    transition: var(--bublz-transition);
                    color: var(--bublz-color-gray-400)!important;
               }

               &:focus
               {
                    &::placeholder {
                         color: var(--bublz-color-blue-300)!important;
                    }

               }

          }

          textarea {
               min-height: 150px;
          }

     }

}




.bublz-panel,
.bublz-new-ticket-form
{
     position: fixed;
     top: -16px;
     right: 16px;
     z-index: 99998;
     width: 300px;
     max-width: calc(100vw - 100px);
     height: auto;
     display: flex;
     flex-direction: column;
     /* transition: var(--bublz-transition); */
     opacity: 0;
     pointer-events: none;
     background-color: #fff;
     box-shadow: 0 0 3px 3px rgba(0,0,0,.1);
     border-radius: 4px 6px 4px 4px;
     max-height: 100vh;

     .bublz-fields {
          max-height: calc(100vh - 200px);
          padding: 0;
          margin-bottom: 0;

          .bublz-field {

               input[type="text"],
               textarea {
                    padding: 8px!important;
                    border: 1px solid var(--bublz-color-gray-300)!important;
                    background-color: #fff!important;
                    border-radius: 4px!important;

                    &:focus {
                         border-color: var(--bublz-color-blue-300)!important;
                    }
               }
               
               &.title,
               &.description {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    padding: 0;

                    border: 1px solid transparent;
                    background-color: var(--bublz-color-gray-50)!important;

                    &:focus-within {
                         border-color: var(--bublz-color-gray-950)!important;
                    }
                    
                    label {
                         position: absolute;
                         top: 8px;
                         left: 8px;
                         display: flex;
                         text-transform: uppercase;
                         margin: 0 auto -16px 0;
                         font-size: 11px;
                         font-weight: 400;
                         color: var(--bublz-color-gray-950)!important;
                         z-index: 5;
                         pointer-events: none;
                    }
                    
                    .editor {
                         outline: none!important;
                         border-radius: 4px!important;
                         box-shadow: none!important;
                         background-color: transparent;
                         width: 100%;
                         margin: 0;
                         padding: 30px 8px 36px 8px!important;
                         font-family: var(--bublz-font-family-system);
                         font-size: 14px!important;
                         min-height: 36px;
                         
                         &:focus {
                              outline: none;
                              box-shadow: none;
                         }
                    }
                    
                    &.description .editor {
                         min-height: 120px;
                    }
                    
                    .mic {
                         position: absolute;
                         right: 8px;
                         bottom: 8px;
                         width: 18px;
                         height: 18px;
                    }
               }
          }
     }

     &.bublz-new-ticket-form {

          border: none!important;

          .bublz-card-reported-by {
               padding: 0 0 0 70px;

          }

          .bublz-card-created {
               padding: 0 0 8px 70px;
          }

          .bublz-fields {
               padding: 16px;

               .bublz-field label {
                    display: none;
               }

               .bublz-field .editor[contenteditable] {
                    position: relative;
                    padding-top: 8px!important;

                    &:empty::before {
                         content: attr(data-placeholder);
                         color: var(--bublz-color-gray-400);
                         pointer-events: none;
                    }
               }
          }

          .bublz-ticket-priority {}

          .bublz-dropzone {
               flex-direction: column;
               justify-content: center;
               align-items: center;
               border-radius: 4px;
               padding: 16px;
               margin-bottom: 8px;
               background-color: var(--bublz-color-gray-50);

               .bublz-dropzone-text {
                    align-items: center;
                    text-align: center;
                    font-size: 12px;
               }
          }


          .bublz-new-ticket-form-footer-tools {
               display: flex;
               justify-content: space-between;
               align-items: center;

               .bublz-close-all-panels {

                    cursor: pointer;
                    user-select: none;
                    text-transform: uppercase;
                    color: var(--bublz-color-gray-300);
                    border: 1px solid var(--bublz-color-gray-300);
                    font-size: 12px!important;
                    transition: var(--bublz-transition);
                    padding: 4px 12px;
                    border-radius: 3px;

                    &:hover,
                    &:focus,
                    &:active {
                         color: var(--bublz-color-gray-700);
                         border: 1px solid var(--bublz-color-gray-700);
                    }
               }
          }
          
          button[type="submit"] {
               font-family: var(--bublz-font-family-system);
               display: inline-flex;
               margin-left: auto;
               color: #fff;
               border: 1px solid #FF0000;
               background-color: #FF0000;
               border-radius: 3px;
               padding: 0 16px;
               line-height: 3;
               outline: none;
               box-shadow: none;
               cursor: pointer;
               user-select: none;
               transition: var(--bublz-transition);
               font-size: 14px;
               text-transform: uppercase;
          }

          button[type="submit"][disabled] {
               pointer-events: none;
               border: 1px solid var(--bublz-color-gray-300);
               background-color: transparent;
               color: var(--bublz-color-gray-300);
          }

     }


     &.bublz-panel {

          transform: scale(.1);
          transform-origin: top;
          border-radius: 4px;
          transition: all 250ms ease-in-out;

          .bublz-panel-list {

               display: flex;
               flex-direction: column;
               max-height: calc(100vh - 95px);
               overflow-y: scroll;
               -ms-overflow-style: none;
               scrollbar-width: none;
               padding: 24px 16px 0 16px;
               background-color: #fff;
               border-radius: 4px;

               &::-webkit-scrollbar {
                    display: none;
               }

               .bublz-card {
                    transition: opacity 500ms ease-in-out!important;

                    &.ticket-blur {
                         opacity: .1;

                         .bublz-ticket-priority,
                         .bublz-card-actions {
                              pointer-events: none;
                         }
                    }
               }

               .bublz-ticket-priority .bublz-ticket-id:before {
                    left: 0!important;
                    right: 1px!important;
               }

          }

     }

}



body.bublz-display-new-ticket-form {

     #wpadminbar #wp-toolbar.quicklinks ul.ab-top-menu #wp-admin-bar-bublz-group.menupop li#wp-admin-bar-bublz-new-ticket-toggle a.ab-item svg.bublz-logo-add {
          .bublz-logo-add-icon {
               display: none !important;
          }
          .bublz-logo-close-icon {
               display: block !important;
          }
     }


     .bublz-breadcrumbs {
          .bublz-btn {

               &.bublz-toggle-new-ticket-panel {
                    opacity: 0;
                    pointer-events: none;
               }

          }
     }

     &.bublz-display-bublz {
          .bublz-panel {
               opacity: 0!important;
               pointer-events: none!important;
          }
     }



     .bublz-new-ticket-form {
          top: 50px;
          opacity: 1;
          transform: scale(1);
          pointer-events: auto;

          &.bublz-dragging {
               cursor: grabbing;
               user-select: none;
               transition: none !important;
               
               * {
                    user-select: none;
               }
          }
          
          &.bublz-resizing {
               transition: none !important;
               
               * {
                    user-select: none;
               }
          }
          
          // Interactive elements should not show move cursor
          button,
          input,
          textarea,
          select,
          .editor[contenteditable],
          .bublz-dropzone,
          .bublz-ticket-priority,
          .bublz-close-all-panels,
          .mic {
               cursor: pointer;
          }
          
          .bublz-right-resize-handle {
               position: absolute;
               top: 0;
               right: 0;
               width: 8px;
               height: 100%;
               cursor: ew-resize;
               background: transparent;
               z-index: 10;
               
               &:hover {
                    background: rgba(0, 0, 0, 0.1);
               }
          }
     }

}





.bublz-btn[disabled],
button[type="submit"][disabled] {
     pointer-events: none;
}


#bublz-edit-ticket-form {

}


.bublz-body {

     padding: 16px 16px 0 16px;

}






.bublz-field.location {
     position: relative;
}

.bublz-field.location i,
.bublz-field.location a,
.bublz-field.location a:link,
.bublz-field.location a:visited
{
     display: flex;
     align-items: center;
     transition: all 250ms ease-in-out;
     max-width: 100%;
     overflow: hidden;
     border-radius: 4px;
     font-style: normal;
     font-size: 18px;
     color: var(--bublz-color-blue-400);
     text-decoration: none;
     line-height: 1.1;
     font-weight: 600;
}

.bublz-field.location:before {
     position: absolute;
     top: -14px;
     left: 0;
     font-size: 12px;
     content: attr(data-label);
     font-family: var(--bublz-font-family-system);
     font-weight:400;
     color: #333;
     text-transform: uppercase;
}

.bublz-field.location a span,
.bublz-field.location a:link span,
.bublz-field.location a:visited span
{
     display: flex;
     margin-right: 4px;
}

.bublz-field.location a svg,
.bublz-field.location a:link svg,
.bublz-field.location a:visited svg
{
     display: flex;
     width: 12px;
     fill: #ccc;
}

.bublz-field.location a:hover,
.bublz-field.location a:focus,
.bublz-field.location a:active
{
     color: var(--bublz-color-blue-500);
     outline: none;
     box-shadow: none;
}








.bublz-ticket-specs {
     display: flex;
     flex-direction: column;
     margin: 16px 0;
}

.bublz-ticket-specs li {
     position: relative;
     display: flex;
     font-size: 12px;
     line-height: 1.5;
     font-weight: 600;
     font-family: var(--bublz-font-family-system);
     margin: 0 0 32px 0;
}


.bublz-ticket-specs li:last-child {
     margin-right: 0;
}

.bublz-ticket-specs li a,
.bublz-ticket-specs li a:link,
.bublz-ticket-specs li a:visited
{
     text-decoration: none;
}

.bublz-ticket-specs li:before {
     position: absolute;
     top: -16px;
     left: 0;
     font-size: 12px;
     content: attr(data-label);
     font-family: var(--bublz-font-family-system);
     font-weight:400;
     color: #333;
     text-transform: uppercase;
}

.bublz-ticket-specs li[data-label='page'] {
     padding: 0!important;

}











.bublz-kanban-wrap.wrap[data-empty] .bublz-first-ticket-promo {
     opacity: 1!important;
}

.bublz-first-ticket-promo {
     position: absolute;
     inset: 16px;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 60vh;
     z-index: 99;
     opacity: 0;
     pointer-events: none;
     transition: var(--bublz-transition);

     h3 {

          margin: 0 auto 32px auto!important;
          text-align: center!important;
          color: var(--bublz-color-gray-200);
          font-size: 7.5vw!important;
          transform: rotate(-2deg);
          font-weight: 700;

     }


}



/* ==========================================================================
   Delete Buttons
   ========================================================================== */
a.bublz-delete,
a.bublz-delete:link,
a.bublz-delete:visited {
     display: flex;
     align-items: center;
     width: 25px;
     height: 25px;
     position: relative;
     box-shadow: none !important;
     outline: none !important;
}

a.bublz-delete svg,
a.bublz-delete:link svg,
a.bublz-delete:visited svg {
     position: absolute;
     inset: 0;
     fill: var(--bublz-table-row-color);
     opacity: 0;
     transition: var(--bublz-transition);
}

a.bublz-delete svg.trash,
a.bublz-delete:link svg.trash,
a.bublz-delete:visited svg.trash {
     opacity: 1;
}

a.bublz-delete:hover svg,
a.bublz-delete:focus svg,
a.bublz-delete:active svg {
     fill: var(--bublz-table-row-hover-color);
}

a.bublz-delete svg.destroy,
a.bublz-delete:link svg.destroy,
a.bublz-delete:visited svg.destroy {
     fill: var(--bublz-color-red-500) !important;
}









/* bublz priority */
.bublz-ticket-priority {
     position: relative;
     display: flex;
     align-items: center;
     padding: 0;
     border-radius: 4px;
     font-size: 24px;
     line-height: 1.5;
     margin: 0;
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
     font-weight: 600;
     width: 100%;
     height: 40px;

     &:after {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 24px;
          display: flex;
          align-items: center;
          color: #fff;
          text-transform: uppercase;
          font-weight:900;
          border-radius: 0 4px 4px 0;
          padding: 0 0 0 90px;
          content: attr(data-priority);
          font-size: 12px;
          line-height: 1.5;
          background: rgba(255,255,255,.1) url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22rgb(255,255,255)%22%2F%3E%3C%2Fsvg%3E') no-repeat right 8px top 55%!important;
          background-size: 16px!important;
     }

     &.bublz-disabled:after {
          background-size: 0!important;
     }

     &.new:before {
          content: 'NEW';
     }

     ul {
          position: absolute;
          top: 5px;
          left: 65px;
          z-index:5;
          padding: 0;
          margin: 0;
          background-color: #fff;
          box-shadow: 0 0 3px rgba(0,0,0,.25);
          border-radius: .25em;
          opacity: 0;
          pointer-events: none;
          transition: var(--bublz-transition);
          line-height: 2.25;
          font-size: 11px;
          font-weight: 400;
          overflow: hidden;
          width: calc(100% - 70px);

          li {
               display: flex;
               padding: 0 1.5em 0 .5em;
               margin: 0;
               transition: var(--bublz-transition);
               color: var(--bublz-color-gray-900);

               &:before {
                    display: flex;
                    width: .75em;
                    margin-right: 1em;
                    content: "";
                    font-weight: 900;
               }

               &[data-s] {
                    color: var(--bublz-color-gray-900);

                    &:before {
                         content: "\2713";
                    }
               }

               &:hover {
                    color: #fff;
                    background-color: var(--bublz-color-gray-900);
               }

          }

     }

     &.active ul {
          opacity: 1;
          pointer-events: auto;
     }


     &.xl {

          min-width: 350px;
          height: 80px;

          &:before {
               position: absolute;
               left: 100px;
               top: -8px;
               content: 'priority';
               color: var(--bublz-color-gray-950);
               font-size: 11px;
               text-transform: uppercase;
               font-weight: 400;
          }

          &:after {
               left: 0;
               top: 15px;
               width: 100%;
               height: 48px;
               padding: 0 0 0 60px;
               font-size: 24px;
               line-height: 1.5;
               background: rgba(255,255,255,.1) url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22rgb(255,255,255)%22%2F%3E%3C%2Fsvg%3E') no-repeat right 16px top 55%!important;
               background-size: 16px!important;
               border-radius: 4px;
          }

          &.bublz-disabled:after {
               background-size: 0!important;
          }

          ul {
               top: 24px;
               left: 110px;
               min-width: 200px;
               width: 100%;
               max-width: calc(100% - 150px);
               line-height: 2.25;
               font-size: 16px;

               li {
                    padding: 0 1.5em 0 .5em;

                    &:before {
                         width: .75em;
                         margin-right: 1em;
                    }

               }

          }

     }

}

.bublz-card .bublz-ticket-priority {

     &:after {
          padding: 0 0 0 60px;
          line-height: 1.75;
     }

     ul {
          left: 65px;
          min-width: 100px;
          width: 100%;
          max-width: calc(100% - 80px);
     }

}

.bublz-info-wrap .bublz-ticket-priority {

     &:after {
          padding: 0 0 0 100px;
          line-height: 1.75;
     }

     ul {
          left: 100px;
          min-width: 100px;
          width: 100%;
          max-width: calc(100% - 120px);
     }
}


.bublz-ticket-id {
     position: absolute;
     z-index: 99;
     display: flex;
     justify-content: center;
     align-items: center;
     color: transparent!important;
     font-family: var(--bublz-font-family-pixel)!important;
     font-weight: 800!important;
     padding: 0!important;
     transition: var(--bublz-transition)!important;

     .bublz-logo {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
     }

     .bublz-logo-outline {
          fill: #fff;
     }

     .bublz-logo-bubble {
          fill: #000;
     }

     .bublz-logo-priority {
          fill: transparent;
     }

     &:before {
          position: absolute;
          top: 0;
          left: 0;
          right: 2px;
          bottom: 6px;
          display: flex;
          justify-content: center;
          align-items: center;
          content: attr(data-ticket_name);
          color: #fff;
          font-weight: 800!important;
          font-family: var(--bublz-font-family-pixel)!important;
          transition: var(--bublz-transition)!important;
          z-index: 1;
     }

}

/* ticket card */
.bublz-card {

     .bublz-ticket-id {
          left: 4px;
          top: -11px;
          font-size: 12px;
          width: 50px;
          height: 61px;
          line-height: 2;

     }

}

/* ticket info wrap on the edit view */
.bublz-info-wrap {

     .bublz-ticket-id {
          left: 2px;
          top: -5px;
          font-size: 18px;
          width: 90px;
          height: 100px;
          line-height: 2;

          &:before {
               bottom: 11px;
               right: 5px;
               font-size: 18px;
          }

     }
}

#bublz-new-ticket-form {

     .bublz-ticket-id {

          left: 4px;
          top: -11px;
          font-size: 12px;
          width: 50px;
          height: 60px;
          line-height: 2;

     }



}

.bublz-drag-close {

     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 8px;
     background-color: var(--wp-admin-bar-background-color);
     border-radius: 4px 4px 0 0;
     cursor: move;

     .bublz-drag {
          width: 14px;
          height: 14px;
          fill: #fff;
     }

     .bublz-drag-close-actions {
          display: flex;
          align-items: center;
          gap: 8px;
     }

     .bublz-reset {
          width: 14px;
          height: 14px;
          fill: #fff;
          cursor: pointer;
          opacity: 0;
          pointer-events: none;
          transition: opacity 300ms ease-in-out, transform var(--bublz-transition);

          &.bublz-reset-visible {
               opacity: 1;
               pointer-events: auto;
          }

          &:hover {
               transform: rotate(-360deg);
          }
     }

     .bublz-close {
          width: 14px;
          height: 14px;
          fill: #fff;
          cursor: pointer;
          transition: var(--bublz-transition);

          &:hover {
               transform: rotate(360deg);
          }
     }
}





.bublz-dropdown {
     position: relative;
     display: flex;
     align-items: center;
     border-radius: 4px;
     font-size: 24px;
     line-height: 1.5;
     margin: 0;
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
     font-weight: 900;
     width: 100%;
     height: 40px;
     background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22rgb(255,255,255)%22%2F%3E%3C%2Fsvg%3E') no-repeat right 8px top 55%!important;
     background-size: 16px!important;
     color: #fff;
     padding: 24px 16px;

     &[data-status]:after {
          content: attr(data-status);
          text-transform: uppercase;
     }

     &[data-assigned_to]:after {
          content: attr(data-assigned_to);
          text-transform: uppercase;
     }


     ul {
          position: absolute;
          top: 8px;
          left: 8px;
          min-width: 100px;
          width: 100%;
          max-width: calc(100% - 50px);
          z-index:5;
          padding: 0;
          margin: 0;
          background-color: #fff;
          box-shadow: 0 0 3px rgba(0,0,0,.25);
          border-radius: .25em;
          opacity: 0;
          pointer-events: none;
          transition: var(--bublz-transition);
          line-height: 2.25;
          font-size: 16px;
          font-weight: 400;
          overflow: hidden;

          li {
               display: flex;
               padding: 0 1.5em 0 .5em;
               margin: 0;
               transition: var(--bublz-transition);
               color: var(--bublz-color-gray-900);

               &:before {
                    display: flex;
                    width: .75em;
                    margin-right: 1em;
                    content: "";
                    font-weight: 900;
               }

               &[data-s] {
                    color: var(--bublz-color-gray-900);

                    &:before {
                         content: "\2713";
                    }
               }

               &:hover {
                    color: #fff;
                    background-color: var(--bublz-color-gray-900);
               }

          }

     }

     &.active ul {
          opacity: 1;
          pointer-events: auto;
     }






}





.bublz-dropdown.readonly {
     cursor: default;
     background-image: none !important;
     
     ul {
          display: none !important;
     }
}

.bublz-destroy {
     position: relative;
     display: flex;
     align-items: center;
     padding: 0;
     font-size: 1em;
     line-height: 2;
     margin: 0 0 0 auto;
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
     height: 24px;
     width: 24px;


     &:before {
          position: absolute;
          right: 30px;
          background-color: var(--bublz-color-red-600)!important;
          color: #fff;
          font-size: 10px;
          content: attr(data-warning);
          padding: 4px 12px;
          line-height: 1.5;
          box-shadow: var(--bublz-box-shadow);
          font-weight: 600;
          opacity: 0;
          transform: translateX(10px);
          transition: var(--bublz-transition);
          pointer-events: none;
     }

     svg.trash,
     svg.destroy {
          position: absolute;
          right:0;
          top: 0;
          transition: var(--bublz-transition);
          pointer-events:none;
     }

     svg.trash {
          fill: var(--bublz-color-gray-500)!important;
     }

     &:hover svg.trash {
          fill: var(--bublz-color-red-500)!important;
     }

     svg.destroy {
          fill: var(--bublz-color-red-600)!important;
          opacity: 0;
          pointer-events: none;
          transform: scale(1.5);
     }

     &.warn:before {
          opacity: 1;
          transform: translateX(0);
          pointer-events: auto;
     }

     &.warn svg.trash {
          fill: var(--bublz-color-red-500)!important;
          opacity: 0;
          pointer-events: none;
     }

     &.warn svg.destroy {
          opacity: 1;
          pointer-events: auto;
     }





}








.comments-section {
     border-top: 2px solid var(--bublz-color-gray-100);
     margin-top: 32px;
}

.reported-by {
     display: flex;
     align-items: center;
}

.reported-by img {
     width: 32px;
     height: 32px;
     margin-right: 4px;
}

.reported-by.xl img {
     width: 64px;
     height: 64px;
}

.meta-data {
     position: relative;
     width: 100%;
     background-color: var(--bublz-color-gray-200);
     color: var(--bublz-color-gray-600);
     font-size: 12px;
     padding: 8px;
     border-radius: 4px;
}

.meta-data tr td {
     padding: 0 2px;
}

.meta-data tr td:first-child {
     color: var(--bublz-color-gray-800);
}

.bublz-reporter-wrap {
     display: flex;
     flex-direction: column;
     margin: 10px 0 0 100px;


     .bublz-reporter-label {
          text-transform: uppercase;
          color: #000;
          font-size: 11px !important;
          font-family: var(--bublz-font-family-system) !important;
     }

     .bublz-reporter-reported_by {
          font-size: 14px !important;
          font-weight: 700;
          line-height: 1.25;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #000 !important;
          text-decoration: none !important;
          transition: var(--bublz-transition) !important;

     }

     .bublz-reporter-created,
     .bublz-reporter-browser {
          color: #000;
          font-size: 11px !important;
          font-family: var(--bublz-font-family-system) !important;
     }

     .bublz-reporter-created {
          text-transform: uppercase;
     }

}






.bublz-user-avatar {
     width: 64px;
     height: 64px;
     aspect-ratio: 1/1;

     display: flex;
     justify-content: center;
     align-items: center;
     &.initial {
          background-color: var(--bublz-color-gray-300);
          color: #fff;
          border-radius: 100%;
          text-transform: uppercase;
          font-size: 28px;
          font-family: var(--bublz-font-family-system);
          font-style: normal;
          font-weight: 700;
          margin-right: 4px;
          &:before {
               content: attr(data-i);
          }

          &[data-i='A'] { background-color: var(--bublz-color-blue-500); }
          &[data-i='B'] { background-color: var(--bublz-color-blue-700); }
          &[data-i='C'] { background-color: var(--bublz-color-blue-800); }
          &[data-i='D'] { background-color: var(--bublz-color-violet-500); }
          &[data-i='E'] { background-color: var(--bublz-color-violet-700); }
          &[data-i='F'] { background-color: var(--bublz-color-violet-800); }
          &[data-i='G'] { background-color: var(--bublz-color-fuchsia-500); }
          &[data-i='H'] { background-color: var(--bublz-color-fuchsia-700); }
          &[data-i='I'] { background-color: var(--bublz-color-fuchsia-800); }
          &[data-i='J'] { background-color: var(--bublz-color-rose-500); }
          &[data-i='K'] { background-color: var(--bublz-color-rose-700); }
          &[data-i='L'] { background-color: var(--bublz-color-rose-800); }
          &[data-i='M'] { background-color: var(--bublz-color-orange-500); }
          &[data-i='N'] { background-color: var(--bublz-color-orange-700); }
          &[data-i='O'] { background-color: var(--bublz-color-orange-800); }
          &[data-i='P'] { background-color: var(--bublz-color-lime-500); }
          &[data-i='Q'] { background-color: var(--bublz-color-lime-700); }
          &[data-i='R'] { background-color: var(--bublz-color-lime-800); }
          &[data-i='S'] { background-color: var(--bublz-color-emerald-500); }
          &[data-i='T'] { background-color: var(--bublz-color-emerald-700); }
          &[data-i='U'] { background-color: var(--bublz-color-emerald-800); }
          &[data-i='V'] { background-color: var(--bublz-color-cyan-500); }
          &[data-i='W'] { background-color: var(--bublz-color-cyan-700); }
          &[data-i='X'] { background-color: var(--bublz-color-cyan-800); }
          &[data-i='Y'] { background-color: var(--bublz-color-indigo-500); }
          &[data-i='Z'] { background-color: var(--bublz-color-teal-700); }
     }

}

// Make all avatar images circular (custom uploads, gravatars)
img.bublz-user-avatar {
     border-radius: 100%;
}

.bublz-card .bublz-user-avatar {
     width: 36px;
     height: 36px;
     position: absolute;
     top: 48px;
     left: 10px;
     font-size: 16px;
     z-index: 99;

     &.initial {
          width: 27px;
          height: 27px;
          font-size: 12px;
          top: 50px;
          left: 14px;
     }

}

// Inline 20px assigned user avatar in card actions
.bublz-card-actions .bublz-assigned-user-inline .bublz-user-avatar {
     position: relative!important;
     top: revert;
     left: revert;
     width: 20px;
     height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 10px;
     border-radius: 50%;
}

.bublz-info-wrap .bublz-user-avatar {
     width: 65px;
     height: 65px;
     position: absolute;
     top: 84px;
     left: 12px;
     font-size: 32px;
     z-index: 99;

     &.initial {
          width: 49px;
          height: 49px;
          font-size: 24px;
          top: 90px;
          left: 20px;
     }

}

.bublz-user-avatar-info {

     display: flex;
     align-items: center;

     .bublz-user-avatar {
          width: 24px;
          height: 24px;
          font-size: 14px;
     }

     .bublz-user-info {

          display: flex;
          flex-direction: column;

          h5 {
               display: flex;
               align-items: center;
               font-size: 14px;
               font-weight: 600;
               margin: 0;
               white-space: nowrap;
          }

          .bublz-user-role {
               font-weight: 400;
               color: var(--bublz-color-gray-400);

          }

     }

}


.bublz-new-ticket-form {

     border: none!important;

     .bublz-user-avatar {
          position: absolute;
          top: 102px;
          left: 23px;
          width: 40px;
          height: 40px;
          font-size: 24px;
          z-index: 99;
     }

}

.bublz-actions-list {
     position: absolute;
     top: -18px;
     right: -18px;
     z-index: 99;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     width: 100%;
     font-size: 24px;
     padding: 0;
     transition: var(--bublz-transition);
     list-style: none;
     margin: 0;
     font-family: var(--bublz-font-family-system);

     li {
          margin: 0 0 0 2px;
          display: flex;
          align-items: center;
          cursor: pointer;
          user-select: none;
          padding: 0;
          transition: var(--bublz-transition);
          background-color: #fff;
          border: 2px solid #fff;
          width: 36px;
          height: 36px;
          border-radius: 32px;


          i.bublz-close {

               position: relative;
               display: flex;
               font-style: normal;
               transform: rotate(45deg);

               svg {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    fill: var(--bublz-color-gray-950);
                    transition: var(--bublz-transition);
               }

               &:hover {
                    transform: rotate(405deg);

               }
          }


     }

}


/* override all the wordpress stuff */

#wpadminbar {

     #wp-toolbar.quicklinks {

          ul.ab-top-menu {

               // Bublz admin bar group container
               #wp-admin-bar-bublz-group.menupop {
                    position: relative !important;
                    padding: 0 6px;

                    ul {
                         padding: 0!important;
                         li .ab-item {
                              min-width: revert!important;
                         }
                    }

                    #wp-admin-bar-bublz-group-default {
                         overflow: hidden;
                    }

                    // Hide the empty ab-item element completely
                    > .ab-item {
                         display: none !important;
                    }

                    // Force the submenu to display inline in the top bar
                    > .ab-sub-wrapper {
                         position: relative !important;
                         top: 0 !important;
                         left: 0 !important;
                         display: flex !important;
                         flex-direction: row !important;
                         align-items: center!important;
                         opacity: 1 !important;
                         visibility: visible !important;
                         pointer-events: auto !important;
                         transform: none !important;
                         box-shadow: none !important;
                         min-width: auto !important;
                         width: auto !important;
                         height: 32px !important;
                         margin: 0 !important;
                         padding: 0 8px!important;
                         border: none !important;
                         background-color: transparent!important;

                         > ul {
                              position: relative !important;
                              display: flex !important;
                              flex-direction: row !important;
                              align-items: center!important;
                              justify-content: center!important;
                              min-width: auto !important;
                              margin: 0 !important;
                              height: 32px !important;
                              background-color: transparent !important;

                              > li {
                                   position: relative !important;
                                   display: flex !important;
                                   align-items: center!important;
                                   justify-content: center!important;
                                   height: 32px !important;
                                   margin: 0 !important;
                                   background-color: transparent;
                                   transition: var(--bublz-transition)!important;

                                   > a {
                                        display: flex !important;
                                        align-items: center !important;
                                        justify-content: center!important;
                                        height: 32px !important;
                                        line-height: 32px !important;
                                   }
                              }
                         }
                    }

                    li#wp-admin-bar-bublz-new-ticket-toggle {
                         background-color: #32373c!important;
                         user-select: none;

                         a.ab-item {
                              padding-left: 3px!important;
                              padding-right: 3px!important;
                         }

                         &:hover,
                         &:active,
                         &:focus {
                              background-color: #3e4449!important;
                         }

                    }

                    li#wp-admin-bar-bublz-page-bublz-toggle {
                         background-color: #32373c!important;
                         position: relative;
                         z-index: 5;
                         user-select: none;

                         &:hover,
                         &:active,
                         &:focus {
                              background-color: #3e4449!important;
                         }

                    }

                    li#wp-admin-bar-bublz-kanban-link {
                         background-color: #32373c!important;
                         user-select: none;

                         a.ab-item {
                              padding-left: 3px!important;
                              padding-right: 3px!important;
                         }

                         .bublz-kanban-fill {
                              fill: rgba(240, 246, 252, 0.6);
                              transition: fill .1s ease-in-out;
                         }

                         &:hover,
                         &:active,
                         &:focus {
                              background-color: #3e4449!important;

                              .bublz-kanban-fill {
                                   fill: #fff;
                              }
                         }

                    }

                    &.bublz-has-bublz {

                         li#wp-admin-bar-bublz-page-bublz-toggle {

                              .bublz-count {
                                   background-color: #FF0000;
                                   border-radius: 999px;
                                   padding: 2px 8px!important;
                                   min-width: 20px;
                                   text-align: center;
                                   font-style: normal;
                                   font-size: 11px!important;
                                   font-weight: 600!important;
                                   line-height: 1.4!important;
                                   color: #fff!important;
                                   display: inline-block;
                              }

                              &:hover,
                              &:active,
                              &:focus {
                                   background-color: #3e4449!important;
                              }
                         }

                    }

               }

               // Bublz admin bar icons
               li#wp-admin-bar-bublz-kanban-link,
               li#wp-admin-bar-bublz-new-ticket-toggle,
               li#wp-admin-bar-bublz-page-bublz-toggle {

                    a.ab-item,
                    a.ab-item:link,
                    a.ab-item:visited,
                    a.ab-item:hover,
                    a.ab-item:focus,
                    a.ab-item:active {

                         height: 32px!important;
                         min-width: 30px!important;
                         padding-left: 6px!important;
                         padding-right: 6px!important;
                         justify-content: center!important;
                         opacity: 1!important;
                         color: #fff!important;

                         svg.bublz-logo {
                              width: 24px!important;
                              height: 24px!important;
                              min-width: revert!important;
                              margin: 0!important;
                              transition: var(--bublz-transition)!important;

                              .bublz-logo-outline {
                                   transition: var(--bublz-transition)!important;
                                   fill: rgba(255,255,255,1);
                              }

                              .bublz-logo-bubble {
                                   transition: var(--bublz-transition)!important;
                                   fill: #000;
                              }

                              .bublz-logo-priority {
                                   fill: #f00;
                              }

                              &:hover {
                                   opacity: 1;
                              }
                         }

                         &:hover,
                         &:active,
                         &:focus {

                              svg.bublz-logo {
                                   opacity: 1!important;

                                   .bublz-logo-priority {
                                        fill: #f00!important;
                                   }
                              }

                         }

                         i.bublz-count {
                              font-style: normal;
                              display: flex;
                              font-size: 16px!important;
                              color: #fff!important;
                              font-weight: 700!important;
                              margin: 0!important;
                              transition: var(--bublz-transition)!important;
                              line-height: 1!important;
                         }

                         &:hover i.bublz-count,
                         &:focus i.bublz-count,
                         &:active i.bublz-count
                         {

                         }

                         svg.bublz-logo-add {

                              .bublz-logo-add-icon {
                                   fill: #fff;
                              }

                              .bublz-logo-close-icon {
                                   fill: #fff;
                                   display: none;
                              }
                         }

                    }

               }

          }

     }

}










i {
     display: flex;
     font-style: normal;
     font-weight: 600;
     color: var(--bublz-color-gray-500);
     font-size: 16px;
     line-height: 1;
}

body.toplevel_page_supernifty-bublz h3 i.bublz-count-circle {
     background-color: var(--bublz-color-gray-800);
     color: #fff!important;
     min-width: 18px;
     height: 18px;
     border-radius: 18px;
     font-size: 12px!important;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0 8px;
}

body.toplevel_page_supernifty-bublz h3 i.bublz-count-circle:after {
     content: attr(data-item_count);
}

body.toplevel_page_supernifty-bublz h3 i.bublz-count-circle[data-item_count='0'] {
     display: none;
}

select { background: var(--bublz-color-gray-50) url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23232527%22%2F%3E%3C%2Fsvg%3E') no-repeat right 16px top 55%!important; }
select[name='status']{
     text-transform: uppercase;
}


#adminmenu ul.wp-submenu.wp-submenu-wrap .wp-first-item { display: none!important; }


#bublz-status-list,
#bublz-priority-list {
     list-style: none;
     padding: 0;
     display: flex;
     flex-direction: column;

     .bublz-status-item,
     .bublz-priority-item {
          display: flex;
          align-items: center;
          margin-bottom: 4px;
          border: none;
          border-left: 4px solid var(--bublz-color-gray-100);
          background-color: #fff;
          border-radius: 4px;
          padding: 0;
          margin-right: auto;
          transition: var(--bublz-transition);

          .bublz-sort-handle {
               cursor: grab;
               height: 14px;
               width: 32px;
               fill: var(--bublz-color-gray-300);
               transition: var(--bublz-transition);
          }

          .bublz-delete-item {
               height: 19px;
               width: 28px;
               fill: var(--bublz-color-gray-300);
               margin-left: 4px;
               border: none;
               outline: none;
               padding: 0;
               box-shadow: none;
               background-color: transparent;
               cursor: pointer;
               transition: var(--bublz-transition);
               &:focus {
                    outline: none;
                    padding: 0;
                    box-shadow: none;
               }

               &:hover {
                    transform: scale(1.25);
                    fill: var(--bublz-color-red-500);

               }

          }

          input[type='text']{
               border:none;
               outline: none;
               box-shadow: none;
               border-radius: 0;
               background-color: #fff;
               &:focus {
                    outline: none;
                    box-shadow: none;
                    background-color: var(--bublz-color-blue-100);
                    color: #000;
               }
          }

          input[type="color" i] {
               inline-size: 24px;
               block-size: 24px;
               padding: 2px;
               border-width: 1px;
               border-style: solid;
               border-color: var(--bublz-color-gray-50);
               border-radius: 100px;
               cursor: pointer;

               &:focus {
                    outline: none;
                    border: none;
                    box-shadow: none;
                    border-radius: 100px;
               }
          }

          input[type="color" i]::-webkit-color-swatch-wrapper {
               padding: 1px;
               border-radius: 100px;
          }
          input[type="color" i]::-webkit-color-swatch {
               border-radius: 100px;
          }
          input[type="color" i]::-moz-color-swatch {
               border-radius: 100px;
          }

          &:hover {
               border-color: var(--bublz-color-gray-400);

               .bublz-sort-handle {
                    fill: var(--bublz-color-gray-400);

                    &:hover {
                         fill: var(--bublz-color-gray-500);
                    }
               }
          }

     }

}

#bublz-add-priority,
#bublz-add-status {
     position: relative;
     border: none!important;
     background-color: transparent!important;
     padding: 0!important;
     outline: none;
     box-shadow: none;
     cursor: pointer;
     user-select: none;
     width: 24px;
     height: 24px;
     svg {
          width: 24px;
          height: 24px;
          fill: var(--bublz-color-gray-950)!important;
          transition: var(--bublz-transition);
     }

     &:hover,
     &:focus {
          outline: none;
          box-shadow: none;
          svg {
               transform: rotate(360deg);
          }
     }
}

.bublz-sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     border: 0;
}

.supernifty-bublz_page_supernifty-bublz-settings {

}

.supernifty-bublz_page_supernifty-bublz-preferences {

}




.bublz-settings-status-priority-row {
     position: relative;
     display: flex;
     flex-direction: column;
     width: 100%;

     .bublz_status_settings,
     .bublz_priority_settings {

          width: 100%;

     }




     @media (min-width: 640px) {}
     @media (min-width: 768px) {
          flex-direction: row;
          .bublz_priority_settings {
               margin-left: 16px;
          }
     }
     @media (min-width: 1024px) {}
     @media (min-width: 1280px) {}
     @media (min-width: 1536px) {}





}


// Tab bar for settings/avatar tabs
.bublz-settings-tabs {
     display: flex;
     border-bottom: 2px solid var(--bublz-color-gray-200, #e5e7eb);
     margin: 16px 16px 0 16px;
}

.bublz-tab {
     padding: 12px 24px;
     background: none;
     border: none;
     border-bottom: 2px solid transparent;
     margin-bottom: -2px;
     cursor: pointer;
     font-size: 14px;
     font-weight: 500;
     color: var(--bublz-color-gray-500, #6b7280);
     transition: color 0.15s, border-color 0.15s;

     &:hover {
          color: var(--bublz-color-gray-800, #1f2937);
     }

     &.active {
          color: var(--bublz-color-gray-800, #1f2937);
          border-bottom-color: #FF0000;
     }
}

.bublz-tab-panel {
     display: none;

     &.active {
          display: block;
     }
}

.bublz-settings-section {
     position: relative;
     margin-bottom: 24px;
}

// Single consolidated declaration for all section titles
body.bublz-settings-view .bublz-section-title,
body.bublz-preferences-view .bublz-section-title {
     font-size: 22px;
     margin-top: 0;
     margin-bottom: 16px;
     color: var(--bublz-color-gray-800);
     padding-bottom: 0;
     border-bottom: none;
}

// Grid layout for responsive settings sections
.bublz-settings-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px;
     margin-bottom: 12px;
     
     // Responsive breakpoints: 2 → 1 columns
     @media (max-width: 640px) {
          grid-template-columns: 1fr;
          gap: 16px;
     }
     
     .bublz-settings-section {
          margin-bottom: 0;
          background: var(--bublz-color-gray-50);
          border: none;
          border-radius: 8px;
          padding: 20px;

          .bublz-section-description {
               font-size: 14px;
               color: var(--bublz-color-gray-600);
               margin-bottom: 16px;
               line-height: 1.4;
          }
     }
}

// Full-width sections below grid
.bublz-settings-full-width {
     .bublz-settings-section {
          background: var(--bublz-color-gray-50);
          border: none;
          border-radius: 8px;
          padding: 24px;
          margin-bottom: 12px;

          .bublz-section-description {
               font-size: 14px;
               color: var(--bublz-color-gray-600);
               margin-bottom: 20px;
               line-height: 1.5;
          }
     }
}


.bublz-fresh-pro-install {
     display: flex;
     align-items: center;
     padding: 20px 16px;
     background: var(--bublz-color-green-500);
     color: #fff;
     margin: 16px;

     h5 {
          font-size: 18px;
          color: #fff;
          margin: 0;

     }
}


.bublz-pro-activator-wrap {

     display: flex;
     flex-direction: column;
     justify-content: space-between;
     background-color: var(--bublz-color-blue-100);
     border-radius: 8px;

     &.bublz-error_permissions,
     &.bublz-error_platform_request,
     &.bublz-error_license_key_empty,
     &.bublz-error_network_connection,
     &.bublz-error_api_timeout,
     &.bublz-error_api_500,
     &.bublz-error_no_api_token,
     &.bublz-error_domain_not_found,
     &.bublz-error_invalid_license_key,
     &.bublz-error_site_not_found,
     &.bublz-error_platform_response,
     &.bublz-error_platform_response_data,
     &.bublz-error_service_unavailable,
     &.bublz-error_unknown_status,
     &.bublz-error_pro_install_failed,
     // &.bublz-success_pro_active_missing_pro,
     &.bublz-success_pro_paused,
     &.bublz-success_pro_canceled_active,
     &.bublz-success_pro_canceled,
     &.bublz-success_pro_expired {
          background-color: var(--bublz-color-red-100);

          .bublz-pro-activator-result {
               h4 {
                    color: var(--bublz-color-red-500);
               }
          }

          .bublz-logo {
               .bublz-logo-outline,
               .bublz-logo-bubble {
                    fill: #000;
               }
               .bublz-logo-priority {
                    fill: #F00;
               }
          }



     }

     .bublz-logo {
          width: 60px;
          aspect-ratio: 73/87;
          margin: 50px auto 10px auto;

          .bublz-logo-outline {
               fill: var(--bublz-color-blue-500);
          }

          .bublz-logo-bubble {
               fill: #000;
          }

          .bublz-logo-priority {
               fill: var(--bublz-color-blue-500);
          }
     }


     .bublz-pro-activator-result {

          display: flex;
          flex-direction: column;
          justify-content: center;

          h4 {
               font-size: 18px;
               margin: 8px 0;
               text-align: center;
          }

          p {
               font-size: 14px;
               color: var(--bublz-color-gray-950);
               margin: 8px 0;
               text-align: center;
          }

     }

     .bublz-pro-form-wrap {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 20px;
          margin: 0 auto;
          max-width: 400px;

          .bublz-free-promo-wrap {
               display: flex;
               flex-direction: column;
               align-items: center;

               h2 {
                    font-size: 48px;
                    font-weight: 700;
                    line-height: .875;
                    margin: 0;
                    text-align: center;
               }

               p {
                    font-size: 16px;
               }

          }
     }

     a.bublz-get-a-pro-license-key,
     a.bublz-get-a-pro-license-key:link,
     a.bublz-get-a-pro-license-key:visited
     {
          display: flex;
          justify-content: center;
          align-items: flex-end;
          font-size: 15px;
          margin: 16px 0;
          text-decoration: none;
          color: var(--bublz-color-gray-950)!important;

          &:after {
               background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 -960 960 960'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z'/%3E%3C/svg%3E");
               content: '';
               background-repeat: no-repeat;
               background-position: center;
               width: 16px;
               height: 16px;

          }
     }

     a.bublz-get-a-pro-license-key:hover,
     a.bublz-get-a-pro-license-key:focus,
     a.bublz-get-a-pro-license-key:active
     {
          text-decoration: underline;
          outline: none;
          box-shadow: none;
     }



     ul.bublz-features {

          display: flex;
          flex-direction: column;
          gap: 25px;
          margin: 0;
          padding: 40px 20px;
          background-color: var(--bublz-color-blue-50);
          width: 100%;

          li {
               display: flex;
               padding: 0 25px;

               svg {
                    display: flex;
                    flex-shrink: 0;
                    width: 25px;
                    height: 25px;
                    fill: var(--bublz-color-blue-500);
                    margin-right: 16px;
               }

               .bublz-text {
                    display: flex;
                    flex-direction: column;
               }

          }

          h3 {
               font-size: 18px;
               font-weight: 700;
               margin: 0;
               line-height: 1;
               color: var(--bublz-color-blue-500);
          }

          p {
               font-size: 16px;
               max-width: 100%;
               margin: 2px 0 4px 0;
          }

     }


     #bublz-pro-form {
          display: flex;
          flex-direction: column;

          input#bublz_pro_license_key {
               outline: none!important;
               box-shadow: none!important;
               padding: 4px 8px!important;
               font-size: 14px!important;
               width: 100%;
               min-width: 325px;
               transition: var(--bublz-transition)!important;
               font-family: var(--bublz-font-family-mono);
               color: var(--bublz-color-gray-500)!important;
               border: 1px solid var(--bublz-color-gray-300)!important;
               margin: 16px auto 4px auto;
               border-radius: 4px;
               text-align: center;
               background-color: #fff;

               &:hover {
                    color: var(--bublz-color-gray-600)!important;
                    border-color: var(--bublz-color-gray-600)!important;
               }

               &:focus {
                    color: var(--bublz-color-blue-950)!important;
                    border-color: var(--bublz-color-blue-950)!important;
                    background-color: var(--bublz-color-yellow-100);
               }

          }

          button#bublz-pro-submit {
               border: none!important;
               background-color: var(--bublz-color-blue-500);
               color: #fff!important;
               text-transform: uppercase;
               font-size: 16px;
               padding: 8px 8px!important;
               width: 100%;
               font-weight: 600;
               border-radius: 4px;
               cursor: pointer;
               transition: var(--bublz-transition)!important;

               &:hover {
                    background-color: var(--bublz-color-blue-700);
               }

               &:disabled {
                    background-color: var(--bublz-color-blue-200);
                    color: var(--bublz-color-blue-400)!important;
               }
          }

     }




}


@media (min-width: 768px) {
     .bublz-pro-activator-wrap {

          ul.bublz-features {
               width: 50%;

               li {
                    p {
                         max-width: 500px;
                    }
               }

          }

          &.bublz-success_free {
               flex-direction: row;
          }


     }
}
















.bublz-footer {
     position: relative;
     display: flex;
     flex-direction: column;
     padding: 0 16px;

     ul.bublz-versions-url {
          position: relative;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          width: 100%;
          padding: 0;
          list-style: none;
          margin: 16px 0 0 0;

          li {

               display: flex;
               font-size: 12px;
               color: var(--bublz-color-gray-500);

               &:before {
                    content: '|';
                    padding: 0 4px;
               }

               &:first-child:before {
                    display: none;
               }

               a,
               a:link,
               a:visited {
                    color: var(--bublz-color-blue-400);
                    text-decoration: none;
                    transition: var(--bublz-transition);
               }

               a:hover,
               a:focus,
               a:active {
                    color: var(--bublz-color-blue-500);
                    outline:none;
                    box-shadow: none;
               }

               &.thanks {
                    &:after {
                         content: 'Thanks for using Bublz! |';
                    }

               }

               &.free:before {
                    content: 'Bublz v';
               }

               &.pro {
                    display: none;
               }

          }
     }


     &.bublz-pro {

          ul.bublz-versions-url {

               li {

                    &.pro {
                         display: flex;
                         &:before {
                              content: '& Bublz Pro: v';
                         }
                    }

                    &.thanks {

                         &:after {
                              content: 'Thanks for using Bublz Pro! | ';
                         }
                    }

               }
          }

     }


}









.bublz-settings-fields {

     .cb {
          display: flex;
          align-items: center;
          margin: 0 0 8px 0;

          label {
               margin: 0;
               display: flex;
          }

          input[type='number'] {
               width: 48px;
               margin: 0 8px 0 0;
               padding: 0 0 0 8px;
               min-height: revert;
               border: none;
               outline: none;
               box-shadow: none;
               background-color: var(--bublz-color-gray-50);
               &:focus {
                    background-color: var(--bublz-color-blue-100)!important;

               }
          }

          .language-select {
               border: none!important;
               outline: none!important;
               box-shadow: none!important;
               padding: 8px 16px!important;
               font-size: 12px!important;
               background-color: #fff!important;
               width: 100%;
               transition: var(--bublz-transition)!important;
          }






     }

}

.bublz-settings-form {

     .bublz-promo {
          display: none!important;
     }
}


.bublz-ticket-settings-form {

     .bublz-promo {
          display: flex;
     }

     #bublz-ticket-settings-form {
          pointer-events: none;
          opacity: .5;
          user-select: none;

          input[type='text'],
          input[type='number']
          {
               pointer-events: none;
               user-select: none;
          }

     }

}



/* Hide default checkbox */
.toggle-checkbox {
     display: none!important;
}

/* Switch container */
.toggle-switch {
     position: relative;
     display: inline-block;
     width: 32px;
     height: 16px;
     cursor: pointer;
     margin-right: 8px;
}

/* Slider background */
.toggle-switch::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: var(--bublz-color-gray-300);
     border-radius: 22px;
     transition: background-color 0.3s;
}

/* Slider knob */
.toggle-switch::after {
     content: '';
     position: absolute;
     width: 12px;
     height: 12px;
     left: 2px;
     bottom: 2px;
     background-color: white;
     border-radius: 50%;
     transition: transform 250ms;
}

/* Checked state */
.toggle-checkbox:checked + .toggle-switch::before {
     background-color: var(--bublz-color-blue-400);
}

.toggle-checkbox:checked + .toggle-switch::after {
     transform: translateX(16px);
}

/* Optional: Hover effect */
.toggle-switch:hover::before {
     background-color: var(--bublz-color-gray-400);
}

.toggle-checkbox:checked + .toggle-switch:hover::before {
     background-color: var(--bublz-color-blue-400);
}

// Avatar Preference Selector
.bublz-avatar-preference-selector {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;

     .bublz-avatar-option {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          padding: 12px 16px;
          border: 2px solid var(--bublz-color-gray-200);
          border-radius: 8px;
          background-color: #fff;
          transition: all 0.2s ease;
          min-width: 100px;
          position: relative;

          &:hover {
               border-color: var(--bublz-color-gray-300);
               background-color: var(--bublz-color-gray-50);
          }

          &.selected {
               border-color: var(--bublz-color-blue-500);
               background-color: var(--bublz-color-blue-50);
          }

          input[type="radio"] {
               display: none;
          }

          .bublz-avatar-preview {
               width: 48px;
               height: 48px;
               margin-bottom: 8px;
               display: flex;
               align-items: center;
               justify-content: center;

               .bublz-user-avatar {
                    width: 48px !important;
                    height: 48px !important;
                    font-size: 24px !important;
                    position: relative !important;
                    top: auto !important;
                    left: auto !important;
               }

               img.bublz-user-avatar {
                    border-radius: 50%;
               }
          }

          span {
               font-size: 13px;
               font-weight: 500;
               color: var(--bublz-color-gray-700);
          }

          .bublz-avatar-upload-icon {
               position: absolute;
               top: -1px;
               right: 3px;
               font-size: 24px;
               font-weight: 600;
               font-style: normal;
               line-height: 1;
               color: var(--bublz-color-gray-400);
               cursor: pointer;
               transition: color 0.2s ease;

               &:hover {
                    color: var(--bublz-color-blue-500);
               }
          }
     }
}

// Avatar Upload Placeholder (+ icon)
.bublz-avatar-upload-placeholder {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background-color: var(--bublz-color-gray-100);
     border: 2px dashed var(--bublz-color-gray-300);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     color: var(--bublz-color-gray-400);
     transition: all 0.2s ease;
}

.bublz-avatar-option:hover .bublz-avatar-upload-placeholder {
     border-color: var(--bublz-color-gray-400);
     color: var(--bublz-color-gray-500);
}

// Custom Avatar Upload Section
.bublz-custom-avatar-upload-section {
     margin-top: 20px;
     padding-top: 20px;
     border-top: 1px solid var(--bublz-color-gray-200);
     display: none;

     &.visible {
          display: block;
     }
}

.bublz-avatar-upload-controls {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;

     // Hide the file input - triggered programmatically via JS
     input[type="file"] {
          display: none;
     }
}

.bublz-avatar-upload-help {
     margin-top: 8px;
     font-size: 12px;
     color: var(--bublz-color-gray-500);
}

// Button Styles for Preferences
.bublz-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 8px 16px;
     font-size: 14px;
     font-weight: 500;
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.2s ease;
     border: 1px solid transparent;
}

.bublz-button-primary {
     background-color: var(--bublz-color-blue-500);
     border-color: var(--bublz-color-blue-500);
     color: #fff;

     &:hover {
          background-color: var(--bublz-color-blue-600);
          border-color: var(--bublz-color-blue-600);
     }

     &:focus {
          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
     }
}

@keyframes bublz-spin {
     to { transform: rotate(360deg); }
}

.bublz-btn-loading {
     pointer-events: none !important;
     color: transparent !important;
     position: relative;

     &::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 16px;
          height: 16px;
          margin: -8px 0 0 -8px;
          border: 2px solid rgba(255,255,255,0.3);
          border-top-color: #fff;
          border-radius: 50%;
          animation: bublz-spin 0.6s linear infinite;
     }
}

.bublz-button-secondary {
     background-color: #fff;
     border-color: var(--bublz-color-gray-300);
     color: var(--bublz-color-gray-700);

     &:hover {
          background-color: var(--bublz-color-gray-50);
          border-color: var(--bublz-color-gray-400);
     }

     &:focus {
          box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.25);
     }
}

.bublz-button-danger {
     background-color: #dc3545 !important;
     border-color: #dc3545 !important;
     color: #fff !important;

     &:hover {
          background-color: #c82333 !important;
          border-color: #bd2130 !important;
     }

     &:focus {
          box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
     }
}

// Modal Styles
.bublz-modal {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.6);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 100000;
     opacity: 1;
     transition: opacity 0.2s ease;

     &.hidden {
          display: none;
     }
}

.bublz-modal-content {
     background-color: #fff;
     border-radius: 8px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
     max-width: 90vw;
     max-height: 90vh;
     overflow: hidden;
     display: flex;
     flex-direction: column;
}

.bublz-modal-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
     border-bottom: 1px solid var(--bublz-color-gray-200);

     h3 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          color: var(--bublz-color-gray-900);
     }
}

.bublz-modal-close {
     background: none;
     border: none;
     font-size: 24px;
     line-height: 1;
     color: var(--bublz-color-gray-400);
     cursor: pointer;
     padding: 0;
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 4px;
     transition: all 0.2s ease;

     &:hover {
          color: var(--bublz-color-gray-600);
          background-color: var(--bublz-color-gray-100);
     }
}

.bublz-modal-body {
     padding: 20px;
     overflow: auto;
     flex: 1;
}

.bublz-modal-footer {
     display: flex;
     justify-content: flex-end;
     gap: 12px;
     padding: 16px 20px;
     border-top: 1px solid var(--bublz-color-gray-200);
     background-color: var(--bublz-color-gray-50);
}

// Avatar Cropper Specific Styles
.bublz-avatar-cropper-content {
     width: 500px;
     max-width: 90vw;
}

.bublz-cropper-container {
     width: 100%;
     height: 350px;
     background-color: var(--bublz-color-gray-100);
     display: flex;
     align-items: center;
     justify-content: center;

     img {
          max-width: 100%;
          max-height: 100%;
          display: block;
     }

     // Cropper.js Overrides for Circular Crop Preview
     .cropper-view-box,
     .cropper-face {
          border-radius: 50%;
     }

     .cropper-view-box {
          box-shadow: 0 0 0 1px #39f;
          outline: 0;
     }

     .cropper-face {
          background-color: inherit !important;
     }

     .cropper-dashed {
          display: none;
     }

     .cropper-center {
          display: none;
     }
}


// New logo default fills
.bublz-logo {
     .bublz-logo-outline {
          fill: #fff;
     }

     .bublz-logo-priority {
          fill: #f00;
     }

     .bublz-logo-bubble {
          fill: #000;
     }
}

// Plugin-specific priority indicator colors
body.bublz-free .bublz-logo .bublz-logo-priority {
     fill: #F00 !important;
}

body.bublz-pro .bublz-logo .bublz-logo-priority {
     fill: #F00 !important;
}

// Pro promo in Free plugin should show Pro branding (red)
body.bublz-free .bublz-pro-promo-wrap-logo .bublz-logo .bublz-logo-priority {
     fill: #F00 !important;
}

// Admin menu logo - all white
.bublz-logo-lnav {
     .bublz-logo-outline,
     .bublz-logo-bubble,
     .bublz-logo-priority {
          fill: #fff !important;
     }
}



.bublz-logo {
     display: flex;
     pointer-events: none;
     user-select: none;
     width: 100px;
     aspect-ratio: 325/136;

     .b { fill: var(--bublz-color-gray-950); }
     .t, .i { fill: #fff; }

     .p { fill: transparent; }
     &.pro {

          .b, .p {
               fill: var(--bublz-color-blue-950);
          }

          .t { fill: #fff; }
     }
}


// Custom error page styles (replacing wp_die)
#wpbody-content {

     position: relative;
     
     .bublz-fp-error {

          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 25vh 10vw;

          .bublz-logo {

               width: 50px;
               height: 50px;

               .bublz-logo-outline {
                    fill: var(--bublz-color-gray-100);
               }

               .bublz-logo-bubble {
                    fill: #000;
               }

               .bublz-logo-priority {
                    fill: #f00;
               }
          }

          h1 {
               text-align: center;
               
          }
          
          p {
               
               a {

                    text-align: center;

                    &:hover {
                         
                    }
                    
                    &:visited {
                         
                    }
               }
          }
     }
}




/* free only */
.bublz-pro-promo-wrap,
a.bublz-pro-promo-wrap,
a.bublz-pro-promo-wrap:link,
a.bublz-pro-promo-wrap:visited {

     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 4px;
     background-color: var(--bublz-color-gray-50);
     text-decoration: none!important;
     transition: all 250ms ease-in-out;
     color: var(--bublz-color-gray-950)!important;

     .bublz-pro-promo-wrap-text {
          display: flex;
          flex-direction: column;
          padding: 32px 16px;

          h2 {
               font-size: 24px;
               font-weight: 700;
               line-height: .875;
               margin: 0 0 16px 0;
               color: var(--bublz-color-gray-950);
               transition: var(--bublz-transition)!important;
          }

          ul {

               display: flex;
               flex-direction: column;
               padding: 0 0 0 8px;
               margin: 0 0 16px 0;

               li {
                    display: flex;
                    align-items: center;

                    svg {
                         display: flex;
                         width: 16px;
                         aspect-ratio: 1;
                         margin: 2px 4px 0 0;
                         fill: #F00;

                    }
               }
          }

     }

     .bublz-pro-promo-wrap-logo {
          display: flex;
          flex-direction: column;
          padding: 32px 16px;

          .bublz-logo {
               display: flex;
               pointer-events: none;
               user-select: none;
               width: 150px;
               aspect-ratio: 73/87;
               margin: auto;

               .bublz-logo-outline {
                    fill: #fff;
               }

               .bublz-logo-bubble {
                    transition: var(--bublz-transition);
                    fill: #000;
               }

               .bublz-logo-priority {
                    transition: var(--bublz-transition);
                    fill: #F00;
               }
          }

     }

     .bublz-form-error {
          background-color: var(--bublz-color-red-600);
          color :#fff;
          padding: 12px;
          border-radius: 4px;
          margin-bottom: 16px;

          h5 {
               color: #fff;
               font-size: 16px;
               font-weight: 700;
               margin: 0 0 4px 0;
          }

          p {
               font-size: 14px;
               color: #fff;
               margin: 0 0 4px 0;
          }
     }

     form {
          display: flex;
          flex-direction: column;

          label {
               display: block;
               margin: 0 0 16px 0;
          }

          input#license_key {
               outline: none!important;
               box-shadow: none!important;
               padding: 4px 8px!important;
               font-size: 14px!important;
               min-width: 325px;
               transition: var(--bublz-transition)!important;
               font-family: var(--bublz-font-family-mono);
               color: #000!important;
               border: 1px solid var(--bublz-color-gray-300)!important;
               margin: 0 auto 4px 0;
               border-radius: 4px;
               text-align: center;
               background-color: #fff;

               &::placeholder,
               &::placeholder {
                    transition: var(--bublz-transition);
                    color: var(--bublz-color-gray-300) !important;
               }

               &:hover {
                    color: #000!important;
                    border-color: var(--bublz-color-gray-600)!important;

                    &::placeholder,
                    &::placeholder {
                         color: var(--bublz-color-gray-400) !important;
                    }

               }

               &:focus {
                    color: #000!important;
                    border-color: #000!important;
                    background-color: var(--bublz-color-blue-50);

                    &::placeholder,
                    &::placeholder {
                         color: var(--bublz-color-gray-500) !important;
                    }

               }

          }

          .submit-cancel {
               display: flex;
          }

          input[type=submit],
          button.bublz-activate-license-btn {
               border: none!important;
               background-color: #000;
               color: #fff!important;
               text-transform: uppercase;
               font-size: 14px;
               padding: 8px 16px!important;
               font-weight: 600;
               border-radius: 4px;
               cursor: pointer;
               transition: var(--bublz-transition)!important;
               margin-right: 4px;

               &:hover {
                    background-color: #F00;
               }

               &:disabled {
                    background-color: var(--bublz-color-gray-300);
                    color: #FFF!important;
               }

          }

          button.bublz-activate-license-btn {
               display: inline-flex;
               align-items: center;
               gap: 8px;

               svg {
                    width: 20px;
                    height: 20px;
                    fill: #fff;
                    flex-shrink: 0;
               }
          }

          a.bublz-get-a-pro-license-key,
          a.bublz-get-a-pro-license-key:link,
          a.bublz-get-a-pro-license-key:visited {
               transition: var(--bublz-transition);
               color: #000!important;
               font-weight: 700;
          }

          a.bublz-get-a-pro-license-key:hover,
          a.bublz-get-a-pro-license-key:focus,
          a.bublz-get-a-pro-license-key:active {
               color: #F00!important;
          }


          a.bublz-cancel,
          a.bublz-cancel:link,
          a.bublz-cancel:visited {
               border: 1px solid var(--bublz-color-blue-400)!important;
               background-color: transparent;
               color: var(--bublz-color-blue-400)!important;
               text-transform: uppercase;
               text-decoration: none;
               font-size: 12px;
               padding: 8px 16px!important;
               font-weight: 400;
               border-radius: 4px;
               cursor: pointer;
               transition: var(--bublz-transition)!important;
          }

          a.bublz-cancel:hover,
          a.bublz-cancel:focus,
          a.bublz-cancel:active {
               border: 1px solid var(--bublz-color-blue-600)!important;
               color: var(--bublz-color-blue-600)!important;
               background-color: #fff;
          }

     }

}

.bublz-pro-promo-wrap:hover,
a.bublz-pro-promo-wrap:hover,
a.bublz-pro-promo-wrap:focus,
a.bublz-pro-promo-wrap:active {

     background-color: var(--bublz-color-gray-100);
     outline: none!important;
     box-shadow: none!important;

     h2 {
          color: #F00!important;
     }

     .bublz-pro-promo-wrap-logo {

          svg.bublz-logo {
               .bublz-logo-priority {

               }
          }

     }

     .bublz-get-a-pro-license-key {
          background-color: #F00!important;
     }



}


.bublz-get-a-pro-license-key,
a.bublz-get-a-pro-license-key,
a.bublz-get-a-pro-license-key:link,
a.bublz-get-a-pro-license-key:visited
{
     border: 0!important;
     background-color: #000!important;
     color: #fff!important;
     text-transform: uppercase;
     text-decoration: none;
     font-size: 12px;
     font-weight: 700;
     padding: 8px 16px!important;
     border-radius: 4px;
     cursor: pointer;
     transition: var(--bublz-transition)!important;
     margin-right: auto;
     display: inline-flex;
     align-items: center;
     gap: 12px;

     svg {
          width: 14px;
          height: 14px;
          fill: #fff;
          flex-shrink: 0;
     }
}

.bublz-get-a-pro-license-key:hover,
.bublz-get-a-pro-license-key:focus,
.bublz-get-a-pro-license-key:active,
a.bublz-get-a-pro-license-key:hover,
a.bublz-get-a-pro-license-key:focus,
a.bublz-get-a-pro-license-key:active
{
     background-color: #F00!important;
}




a.bublz-dashboard-link,
a.bublz-dashboard-link:link,
a.bublz-dashboard-link:visited {
     color: #F00!important;
     outline: none!important;
     box-shadow: none!important;
     font-weight: 700;
     display: inline-flex;
     align-items: center;
     gap: 4px;

     svg {
          width: 14px;
          height: 14px;
          fill: #F00;
          flex-shrink: 0;
     }
}


a.bublz-dashboard-link:hover,
a.bublz-dashboard-link:focus,
a.bublz-dashboard-link:active {
     color: #000!important;
     outline: none!important;
     box-shadow: none!important;

     svg {
          fill: #000;
     }
}




/**
 * Bublz Targeting Mode Styles
 * Enhanced with element-relative positioning support
 */



/* Container for all persistent markers */
.bublz-persistent-markers-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 99997;
     display: flex;
     justify-content: center;
     transition: background-color 250ms ease-in-out;
     padding: 50px 10px 10px 10px;

     .bublz-persistent-marker-cancel {
          position: fixed;
          left: 16px;
          bottom: -200px;
          display: flex;
          align-items: center;
          gap: 12px;
          z-index: 999;
          color: #fff;
          padding: 10px 14px;
          background-color: #FF0000;
          border: none;
          border-radius: 6px;
          transition: opacity 250ms ease, bottom 250ms ease;
          opacity: 0;
          pointer-events: none;
          user-select: none;
          cursor: pointer !important;

          &, & * {
               cursor: pointer !important;
          }

          .bublz-feedback-logo {
               width: 28px;
               height: 34px;
               flex-shrink: 0;
               pointer-events: none;
          }

          .bublz-feedback-text {
               display: flex;
               flex-direction: column;
               pointer-events: none;
               line-height: 1.2;
          }

          .bublz-feedback-title {
               font-size: 13px;
               font-weight: 700;
               letter-spacing: 0.5px;
               color: #fff;
          }

          .bublz-feedback-subtitle {
               font-size: 10px;
               font-weight: 500;
               letter-spacing: 0.5px;
               color: rgba(255, 255, 255, 0.7);
          }

          .bublz-cancel-x {
               margin-left: 4px;
               color: var(--color-gray-300);
               transition: color 250ms ease, transform 300ms ease;
               pointer-events: auto;
               flex-shrink: 0;

               &:hover {
                    color: #fff;
                    transform: rotate(360deg);
               }
          }

     }

}


body.bublz-targeting-mode::before,
body.bublz-display-bublz::before {
     content: '';
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0,.5);
     z-index: 99996;
     pointer-events: none;
}


body.bublz-targeting-mode {

     $bublz-cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="38" viewBox="0 0 419 502" opacity="0.75"><path fill="%23fff" stroke="%23555" stroke-width="8" d="M386.203,153.492c7.459,20.882 11.524,43.37 11.529,66.799c0.012,55.251 -22.557,105.265 -58.976,141.31l-139.923,139.652l-137.031,-137.031c-38.053,-36.242 -61.79,-87.384 -61.802,-144.018c-0.024,-109.757 89.065,-198.847 198.822,-198.822c22.919,0.005 44.939,3.896 65.436,11.048c15.844,-19.764 40.186,-32.429 67.463,-32.429c47.698,0 86.423,38.725 86.423,86.423c0,27.052 -12.456,51.218 -31.941,67.069Z"/><path fill="%23000" d="M332.066,172.845c4.962,14.389 7.658,29.83 7.662,45.893c0.009,39.161 -15.988,74.611 -41.802,100.16l-99.176,98.984l-97.127,-97.127c-26.972,-25.688 -43.796,-61.937 -43.805,-102.079c-0.017,-77.795 63.129,-140.941 140.924,-140.924c16.312,0.004 31.982,2.784 46.561,7.894c-0.002,0.259 -0.003,0.518 -0.003,0.777c0,47.698 38.725,86.423 86.423,86.423c0.115,-0 0.229,-0 0.344,-0.001Z"/><path fill="%23fff" d="M171.572,258.959l-56.25,0l0,-52.083l56.25,0l0,-56.25l52.083,-0l0,56.25l56.25,0l0,52.083l-56.25,0l-0,56.25l-52.083,0l0,-56.25Z"/><circle fill="%23F00" cx="331.722" cy="85.979" r="45.648"/></svg>') 4 35, crosshair;

     cursor: $bublz-cursor !important;

     * {
          cursor: $bublz-cursor !important;
          transition: outline-color 250ms ease, background-color 250ms ease;
          outline: 2px solid transparent;
     }

     #wpadminbar,
     #wpadminbar * {
          cursor: not-allowed !important;
     }

     #wpadminbar li#wp-admin-bar-bublz-new-ticket-toggle,
     #wpadminbar li#wp-admin-bar-bublz-new-ticket-toggle * {
          cursor: pointer !important;
     }

     #wpadminbar li#wp-admin-bar-bublz-new-ticket-toggle svg.bublz-logo-add {
          .bublz-logo-add-icon {
               display: none !important;
          }
          .bublz-logo-close-icon {
               display: block !important;
          }
     }

     .bublz-persistent-markers-container {

          .bublz-persistent-marker-cancel {
               opacity: 1;
               pointer-events: auto;
               bottom: 16px;
          }
     }

     .bublz-persistent-marker {
          opacity: 1;
          pointer-events: auto;
          cursor: pointer !important;

          * {
               cursor: pointer !important;
          }
     }

     .bublz-targeting-highlight {
          outline: 2px solid #FF0000 !important;
          outline-offset: -1px;
          background-color: rgba(255, 0, 0, 0.05) !important;
     }

     .bublz-new-ticket-form {
          pointer-events: none;

          .bublz-drag-close {
               pointer-events: auto;
          }
     }
}

body.bublz-display-bublz .bublz-targeting-highlight {
     outline: 2px solid #FF0000 !important;
     outline-offset: -1px;
     background-color: rgba(255, 0, 0, 0.05) !important;
}

/* Persistent marker containers */
.bublz-persistent-marker {
     position: absolute;
     z-index: 99999;
     pointer-events: none;
     transform: translate(-13px, -52px);
     opacity: 0;
     transition: opacity 250ms ease-in-out;
     cursor: pointer;

     .bublz-ticket-id {
          position: relative;
          z-index: 9999999;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0!important;
          width: 50px;
          height: 60px;
          .bublz-logo {
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
          }

          .bublz-logo-outline {
               fill: #fff;
          }

          .bublz-logo-bubble {
               fill: #000;
          }

          .bublz-logo-priority {
               fill: transparent;
          }

          &:before {
               position: absolute;
               top: 0;
               left: 0;
               right: 2px;
               bottom: 6px;
               display: flex;
               justify-content: center;
               align-items: center;
               content: attr(data-ticket_name);
               color: #fff;
               font-size: 12px;
               font-weight: 800!important;
               font-family: var(--bublz-font-family-pixel)!important;
               z-index: 1;
          }
     }


     * {
          pointer-events: none;
     }

     /* Visual indicator for positioning mode */
     &[data-positioning="absolute"]::after {
          content: "⚠";
          position: absolute;
          top: -20px;
          right: -20px;
          font-size: 12px;
          color: #ff9800;
          display: none;
     }

     @media (prefers-contrast: high) {
          .bublz-ticket-id {
               border-width: 3px;
          }
     }

     @media (prefers-reduced-motion: reduce) {
          .bublz-ticket-id {
               animation: none;
               transition: none !important;
          }
     }
}

/* Show panel and markers */
body.bublz-display-bublz {

     .bublz-panel {
          top: 48px;
          opacity: 1!important;
          pointer-events: auto!important;
          transform: scale(.85);
          transition: none!important;
          max-height: calc(100vh - 123px);
     }

     #wpadminbar #wp-toolbar.quicklinks ul.ab-top-menu #wp-admin-bar-bublz-group.menupop li#wp-admin-bar-bublz-new-ticket-toggle {
          transform: translateX(0);
     }

     .bublz-persistent-marker {
          opacity: 1;
          pointer-events: auto;
     }

     /* Update form display when pre-generated ID is present */
     #bublz-new-ticket-form .bublz-ticket-id[data-ticket_name]:not([data-ticket_name="NEW"]):before {
          content: attr(data-ticket_name) !important;
     }
}



.bublz-logo {

     .bublz-logo-outline {
          fill: #fff;
     }

     .bublz-logo-priority {
          fill: #fff;
     }
}