html, body {
      font-family: Arial, sans-serif;
      background-color: #f7f9fc;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    /* Adjust styles for smaller screens using media queries */
    /*@media (max-width: 1900px) {*/
    /* Adjust styles for smaller screens using media queries */
    @media (max-width: 768px) {
      /* Mobile-specific styles */
      .RoundedShadow25 {
        width: 97%;
        margin-left: 1.5%;
        margin-right: 1.5%;
        margin-top: 10px;
        height: auto; /* Allow height to adjust based on content */
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .RoundedShadow50, .RoundedShadow50b {
        width: 97%;
        margin-left: 1.5%;
        margin-right: 1.5%;
        height: auto;
        padding-top: 10px;
      }

      .buttons button {
        width: auto;
        padding: .5rem .75rem;
      }
    }

    #layout {
      position: absolute;
      width: 100%;
      top: 0px;
      bottom: 0px;
    }

      #layout > div {
        position: absolute !important;
      }


    .w2ui-form .w2ui-tabs .w2ui-tab.active {
      color: #ffffff;
      background-color: #3b7cb6;
      border: 1px solid #c0c0c0;
      border-bottom: 1px solid transparent;
    }


    .w2ui-group {
      margin: 5px;
      padding: 5px
    }

    p1 {
      font-size: 100%;
      padding: 0;
      margin: 0;
      line-height: 20px;
    }

    p2 {
      font-size: 80%;
      padding: 0;
      margin: 0;
      line-height: 20px;
    }

    /* Desktop styles, now applied to a wider range of screens */
    @media (min-width: 1024px) {
      .RoundedShadow25 {
        display: inline-block;
        width: 23.5%;
        height: 60px;
        margin-left: 1%;
        margin-top: 20px;
        padding-top: 15px;
        font-family: Arial, sans-serif;
        background-color: white;
        border-radius: 10px;
        box-shadow: 1px 1px 10px 1px lightgrey;
      }
    }

    .RoundedShadow50 {
      display: inline-block;
      width: 97%;
      height: 97%;
      margin-left: 2%;
      padding-top: 10px;
      font-family: Arial, sans-serif;
      background-color: white;
      border-radius: 10px;
      box-shadow: 1px 1px 10px 1px lightgrey;
    }

    .RoundedShadow50b {
      display: inline-block;
      width: 97%;
      height: 97%;
      margin-left: 1%;
      padding-top: 10px;
      font-family: Arial, sans-serif;
      background-color: white;
      border-radius: 10px;
      box-shadow: 1px 1px 10px 1px lightgrey;
    }

    .buttons {
      margin-bottom: 10px;
      display: inline-flex;
      flex-wrap: wrap; /* Added for better wrapping on small screens */
      justify-content: center; /* Center buttons on mobile */
    }

      .buttons button {
        background-color: #f3f3f3;
        color: #333333;
        border: 1px solid #cccccc;
        padding: .5rem 1rem;
        width: 80px;
        font-size: 14px;
        cursor: pointer;
        margin-right: 1px;
        transition: all 0.2s;
        box-sizing: border-box;
      }

        .buttons button.selected {
          background-color: #e5e5e5;
          border-color: #cccccc;
        }

        .buttons button:first-child {
          border-top-left-radius: 30px;
          border-bottom-left-radius: 30px;
        }

        .buttons button:last-child {
          border-top-right-radius: 30px;
          border-bottom-right-radius: 30px;
        }

        .buttons button:hover {
          background-color: #ffe794dd;
          border-color: #ffce18;
        }

        .buttons button:active {
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }


    /* context menu icons */
    .icon:before {
      position: absolute;
      margin-left: 0px;
      margin-top: 3px;
      width: 14px;
      height: 14px;
      content: '';
    }

    .icon-blue:before {
      background-color: #3d85c6;
    }

    .icon-green:before {
      background-color: #6aa84f;
    }

    .icon-orange:before {
      background-color: #e69138;
    }

    .icon-red:before {
      background-color: #cc4125;
    }

    body .calendar_default_event_inner {
      border-radius: 10px;
    }

    body .month_default_event_inner {
      border-radius: 10px;
    }


    /* Utility Class */
    .repair-hidden {
      display: none !important; /* Ensures the element is always hidden when this class is applied */
    }

    /* App Container */
    #repair-app-container {
      max-width: 800px;
      margin: 10px auto;
      padding: 20px 30px;
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

    /* Headings and Text */
    .repair-header-title {
      font-size: 1.875rem; /* 3xl */
      font-weight: 800; /* extrabold */
      margin-bottom: 1rem;
      color: #1f2937; /* gray-900 */
      text-align: center; /* Center the title */
    }

    .repair-header-subtitle {
      margin-bottom: 1.5rem;
      color: #4b5563; /* gray-600 */
      text-align: center; /* Center the subtitle */
    }

    /* Form Styling */
    .repair-form-container {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 1rem;
      border: 1px solid #e5e7eb; /* gray-200 */
      border-radius: 8px;
    }

    .repair-form-fields {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    /* Desktop/Tablet: Use a row layout for better space utilization */
    @media (min-width: 640px) {
      .repair-form-fields {
        flex-direction: row;
      }
    }

    .repair-form-group {
      flex: 1; /* Ensures equal width distribution among fields */
    }

    .repair-form-label {
      display: block;
      font-size: 0.875rem; /* sm */
      font-weight: 500; /* medium */
      color: #374151; /* gray-700 */
      margin-bottom: 0.25rem;
    }

    .repair-form-input {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid #d1d5db; /* gray-300 */
      border-radius: 6px;
      box-sizing: border-box;
    }

      .repair-form-input:focus {
        outline: none;
        border-color: #2563eb; /* blue-600 */
        box-shadow: 0 0 0 1px #2563eb;
      }

    /* Button Styling */
    .repair-button-wrapper {
      padding-top: 0.5rem;
      text-align: center; /* Center the button horizontally */
    }

    .repair-search-button {
      width: 100%;
      padding: 0.75rem 1.5rem;
      background-color: #2563eb; /* Blue-600 */
      color: white;
      font-weight: 600;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: background-color 0.15s ease-in-out;
    }

    @media (min-width: 640px) {
      .repair-search-button {
        width: auto;
      }
    }

    .repair-search-button:hover {
      background-color: #1d4ed8; /* Blue-700 */
    }
    /* Added styling for disabled state */
    .repair-search-button:disabled {
      background-color: #93c5fd; /* Light blue when disabled */
      cursor: not-allowed;
      box-shadow: none;
    }

    /* --- ACTION BUTTONS (Print and Email) --- */
    /* New Actions Wrapper to hold Print and Email */
    #repair-actions-wrapper {
      display: flex; /* Use flexbox */
      flex-direction: column;
      gap: 1rem; /* Space between buttons */
      justify-content: center; /* Center buttons horizontally */
      align-items: center; /* Center buttons vertically */
      margin-top: 1rem;
      margin-bottom: 1.5rem;
    }

    @media (min-width: 640px) {
      #repair-actions-wrapper {
        flex-direction: row; /* Side-by-side on desktop */
      }
    }

    /* Base style for action buttons (used to size them equally) */
    .repair-action-button {
      width: 100%; /* Full width on mobile */
      max-width: 300px; /* Max width on desktop */
    }

    @media (min-width: 640px) {
      .repair-action-button {
        flex-grow: 1; /* Allows buttons to take up equal space */
      }
    }

    /* Print Button Specific Style */
    #repair-print-button {
      background-color: #059669; /* Green-600 */
    }

      #repair-print-button:hover {
        background-color: #047857; /* Green-700 */
      }

    /* Email Button Specific Style */
    #repair-email-button {
      background-color: #ea580c; /* Orange-700 */
    }

      #repair-email-button:hover {
        background-color: #c2410c; /* Orange-800 */
      }


    /* Results Area */
    .repair-results-section {
      margin-top: 2rem;
    }

    .repair-results-title {
      font-size: 1.25rem; /* xl */
      font-weight: 600;
      margin-bottom: 0.75rem;
      color: #1f2937; /* gray-800 */
    }

    .repair-results-area {
      min-height: 200px;
      padding: 1rem;
      background-color: #f9fafb; /* gray-50 */
      border: 1px solid #e5e7eb; /* gray-200 */
      border-radius: 8px;
    }

    .repair-initial-message {
      color: #6b7280; /* gray-500 */
    }

    /* Loading Spinner Wrapper (handles padding and alignment) */
    .repair-loading-indicator-wrapper {
      text-align: center;
      padding: 2rem 0;
    }

    /* Loading Spinner */
    .repair-loading-spinner {
      border: 4px solid rgba(0, 0, 0, 0.1);
      border-left-color: #3b82f6; /* Blue-500 */
      border-radius: 50%;
      width: 32px;
      height: 32px;
      animation: spin 1s linear infinite;
      margin: 0 auto;
    }

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

    .repair-loading-text {
      color: #2563eb; /* blue-600 */
      margin-top: 0.5rem;
    }

    /* Error Message */
    .repair-error-message {
      color: #dc2626; /* red-600 */
    }

    .repair-warning-message {
      color: #f97316; /* orange-500 */
    }

    /* Sources List */
    .repair-sources-list-container {
      margin-top: 1rem;
      border-top: 1px solid #e5e7eb;
      padding-top: 0.75rem;
    }

    .repair-sources-header {
      font-weight: 600;
      font-size: 0.875rem;
      color: #374151;
      margin-bottom: 0.5rem;
    }

    .repair-sources-list {
      list-style-type: disc;
      list-style-position: inside;
      padding-left: 0;
      margin-top: 0;
      color: #4b5563;
      font-size: 0.875rem;
    }

      .repair-sources-list li {
        margin-bottom: 0.25rem;
      }

    /* Links in Sources List */
    .repair-source-link {
      color: #2563eb; /* blue-600 */
      text-decoration: none;
    }

      .repair-source-link:hover {
        text-decoration: underline;
      }
    /* Video links retain special color/bolding, but the icon CSS is removed */
    .repair-video-source-link {
      color: #dc2626; /* red-600 */
      font-weight: 700;
      text-decoration: none;
    }

      .repair-video-source-link:hover {
        text-decoration: underline;
      }
    /* The .repair-video-icon CSS rule has been removed */
    .repair-video-tag {
      font-size: 0.75rem; /* xs */
      color: #ef4444; /* red-500 */
      margin-left: 0.25rem;
    }

    /* --- PRINT STYLES (Used by the new print function in the pop-up window) --- */
    @media print {
      body {
        margin: 0;
        padding: 0;
      }

      .repair-print-container {
        padding: 20px;
      }

      .repair-print-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        border-bottom: 2px solid #374151;
        padding-bottom: 5px;
      }
      /* Ensure text is black for printing */
      #repair-ai-response, #repair-sources-list {
        color: #000 !important;
      }
    }

    /* Define colors */
    :root {
        --appblue-default: #1976D2;
        --appblue-dark: #0D47A1;
        --appblue-light: #42A5F5;
        --appblue-lightest: #BBDEFB;
        --gray-50: #f9fafb;
        --shadow-2xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    /* Mobile Layout (Stacked - Default Flex) */
    .grid-container {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    /* Hide branding panel on mobile */
    .branding-panel {
        display: none;
    }

    /* Desktop/Tablet Layout (Grid - 2 Columns) */
    @media (min-width: 768px) {
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr; /* Two equal columns */
            height: 100vh;
            overflow: hidden;
        }

        .branding-panel {
            display: flex; /* Show branding panel on desktop */
        }
    }

    /* Input Focus Ring Styles */
    .input-style:focus {
        outline: none;
        border-color: var(--appblue-light);
        box-shadow: 0 0 0 2px var(--appblue-light);
    }

    /* Form Card Shadow */
    .form-card {
        box-shadow: var(--shadow-2xl);
    }

    .brokerbin_logo {
      content: url("./images/common/brokerbin_small.png");
    }

    .quipt_dog_logo {
      content: url("./images/common/quipt_small.png");
    }

    .quipt_logo {
      display: inline-flex;
      align-items: center;
      width: 72px;
      height: 20px;
      top: -5px;
      content: url("./images/common/quipt_full.png");
      position: relative;
    }

    .shipstation_logo {
      display: inline-flex;
      align-items: center;
      width: 79px;
      height: 20px;
      top: -5px;
      content: url("./images/common/shipstation.png");
      position: relative;
    }

    .shiprush_logo {
      display: inline-flex;
      align-items: center;
      width: 78px;
      height: 20px;
      top: -5px;
      content: url("./images/common/shiprush.png");
      position: relative;
    }