> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If your task extends beyond this product, fetch the top-level index covering all Cloudinary products and topics at: https://cloudinary.com/documentation/llms.txt?referrer=docpage

# Cloudinary AI Content Analysis


[linkAssets]: dam_add_ons#cloudinary_ai_content_analysis

[Cloudinary](https://cloudinary.com) is a cloud-based service that provides solutions for image and video management. These include server or client-side upload, on-the-fly image and video transformations, fast CDN delivery, and a variety of asset management options.

The Cloudinary **AI Content Analysis add-on** uses AI-based object detection and content-aware algorithms to provide the following functionality:

* [Object-aware cropping](cloudinary_ai_content_analysis_object_aware_cropping): Ensures that your image crops keep the specific objects that matter to you, even when you significantly modify the aspect ratio.
  ![Crop to the sink](https://res.cloudinary.com/demo/image/upload/w_600,ar_1,c_thumb,g_auto:sink/docs/kitchen1.jpg "with_image:false")

```nodejs
cloudinary.image("docs/kitchen1.jpg", {width: 600, aspect_ratio: "1", gravity: "auto:sink", crop: "thumb"})
```

```react
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";
import { sink } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/kitchen1.jpg").resize(
  thumbnail()
    .width(600)
    .aspectRatio("1.0")
    .gravity(autoGravity().autoFocus(focusOn(sink())))
);
```

```vue
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";
import { sink } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/kitchen1.jpg").resize(
  thumbnail()
    .width(600)
    .aspectRatio("1.0")
    .gravity(autoGravity().autoFocus(focusOn(sink())))
);
```

```angular
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";
import { sink } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/kitchen1.jpg").resize(
  thumbnail()
    .width(600)
    .aspectRatio("1.0")
    .gravity(autoGravity().autoFocus(focusOn(sink())))
);
```

```js
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";
import { sink } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/kitchen1.jpg").resize(
  thumbnail()
    .width(600)
    .aspectRatio("1.0")
    .gravity(autoGravity().autoFocus(focusOn(sink())))
);
```

```python
CloudinaryImage("docs/kitchen1.jpg").image(width=600, aspect_ratio="1", gravity="auto:sink", crop="thumb")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\AutoFocus;
use Cloudinary\Transformation\FocusOn;

(new ImageTag('docs/kitchen1.jpg'))
	->resize(Resize::thumbnail()->width(600)
->aspectRatio(1.0)
	->gravity(
	Gravity::autoGravity()
	->autoFocus(
	AutoFocus::focusOn(
	FocusOn::sink()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation().width(600).aspectRatio("1").gravity("auto:sink").crop("thumb")).imageTag("docs/kitchen1.jpg");
```

```ruby
cl_image_tag("docs/kitchen1.jpg", width: 600, aspect_ratio: "1", gravity: "auto:sink", crop: "thumb")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(600).AspectRatio("1").Gravity("auto:sink").Crop("thumb")).BuildImageTag("docs/kitchen1.jpg")
```

```dart
cloudinary.image('docs/kitchen1.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(600)
.aspectRatio('1.0')
	.gravity(
	Gravity.autoGravity()
	.autoFocus(
	AutoFocus.focusOn(
	FocusOn.sink()))
	)
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(600).setAspectRatio("1").setGravity("auto:sink").setCrop("thumb")).generate("docs/kitchen1.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().width(600).aspectRatio("1").gravity("auto:sink").crop("thumb")).generate("docs/kitchen1.jpg");
```

```flutter
cloudinary.image('docs/kitchen1.jpg').transformation(Transformation()
	.resize(Resize.thumbnail().width(600)
.aspectRatio('1.0')
	.gravity(
	Gravity.autoGravity()
	.autoFocus(
	AutoFocus.focusOn(
	FocusOn.sink()))
	)
	));
```

```kotlin
cloudinary.image {
	publicId("docs/kitchen1.jpg")
	 resize(Resize.thumbnail() { width(600)
 aspectRatio(1.0F)
	 gravity(
	Gravity.autoGravity() {
	 autoFocus(
	AutoFocus.focusOn(
	FocusOn.sink()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/kitchen1.jpg", {width: 600, aspect_ratio: "1", gravity: "auto:sink", crop: "thumb"})
```

```react_native
import { thumbnail } from "@cloudinary/url-gen/actions/resize";
import { autoGravity } from "@cloudinary/url-gen/qualifiers/gravity";
import { focusOn } from "@cloudinary/url-gen/qualifiers/autoFocus";
import { sink } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("docs/kitchen1.jpg").resize(
  thumbnail()
    .width(600)
    .aspectRatio("1.0")
    .gravity(autoGravity().autoFocus(focusOn(sink())))
);
```

    
    
    

    
    
    Original
    

    
    
    Crop to the sink
    

    
    
     

    > **INFO**:
>
> By default, delivery URLs that use this add-on either need to be [signed](cloudinary_ai_content_analysis_object_aware_cropping#signed_urls) or [eagerly generated](eager_and_incoming_transformations#eager_transformations). You can optionally remove this requirement by selecting this add-on in the **Allow unsigned add-on transformations** section of the **Security** page in the Console Settings.
> (For simplicity, most of the examples on this page show eagerly generated URLs without signatures.)
* [Automatic image tagging](cloudinary_ai_content_analysis_automatic_tagging): Adds tags to your images based on objects or abstract concepts detected by the content-aware detection models specified on upload, or when invoked on images already stored in your product environment. 

    ```multi
    |ruby
    Cloudinary::Uploader.upload("winter_fashion.jpg", 
      detection: "cld-fashion", auto_tagging: 0.6)

    |php_2
    $cloudinary->uploadApi()->upload("winter_fashion.jpg", 
      ["detection" => "cld-fashion", "auto_tagging" => 0.6]);

    |python
    cloudinary.uploader.upload("winter_fashion.jpg",
      detection = "cld-fashion", auto_tagging = 0.6)

    |nodejs
    cloudinary.v2.uploader
    .upload("winter_fashion.jpg", 
      { detection: "cld-fashion", 
        auto_tagging: 0.6 })
    .then(result=>console.log(result)); 

    |java
    cloudinary.uploader().upload("winter_fashion.jpg", ObjectUtils.asMap(
      "detection", "cld-fashion", "auto_tagging", "0.6"));

    |csharp
    var uploadParams = new ImageUploadParams() 
    {
      File = new FileDescription(@"winter_fashion.jpg"),
      Detection = "cld-fashion",
      AutoTagging = 0.6
    };
    var uploadResult = cloudinary.Upload(uploadParams);  

    |go
    resp, err := cld.Upload.Upload(ctx, "winter_fashion.jpg", uploader.UploadParams{
        Detection:   "cld-fashion",
        AutoTagging: 0.6})

    |android
    MediaManager.get().upload("winter_fashion.jpg")
      .option("detection", "cld-fashion")
      .option("auto_tagging", "0.6").dispatch();

    |swift
    let params = CLDUploadRequestParams()
      .setDetection("cld-fashion")
      .setAutoTagging(0.6)
    var mySig = MyFunction(params)  // your own function that returns a signature generated on your backend
    params.setSignature(CLDSignature(signature: mySig.signature, timestamp: mySig.timestamp))
    let request = cloudinary.createUploader().signedUpload(
      url: "winter_fashion.jpg", params: params) 

    |cli
    cld uploader upload "winter_fashion.jpg" detection="cld-fashion" auto_tagging=0.6

    |curl
    curl https://api.cloudinary.com/v1_1/demo/image/upload -X POST -F 'file=@/path/to/winter_fashion.jpg' -F 'detection=cld-fashion' -F 'auto_tagging=0.6' -F 'timestamp=173719931' -F 'api_key=436464676' -F 'signature=a781d61f86a6f818af'
    ```

![Woman in winter with bounding boxes](https://res.cloudinary.com/demo/image/upload/docs/winter-fashion-with-tags.jpg "with_code: false, with_url: false, thumb: c_scale,w_300")

* [Image quality analysis](cloudinary_ai_content_analysis_image_analysis#image_quality_analysis): Analyzes the quality of an image.

    ```multi
    |ruby
    Cloudinary::Uploader.upload("winter_fashion.jpg", 
      detection: "iqa")

    |php_2
    $cloudinary->uploadApi()->upload("winter_fashion.jpg", 
      ["detection" => "iqa"]);

    |python
    cloudinary.uploader.upload("winter_fashion.jpg",
      detection = "iqa")

    |nodejs
    cloudinary.v2.uploader
    .upload("winter_fashion.jpg", 
      { detection: "iqa" })
    .then(result=>console.log(result)); 

    |java
    cloudinary.uploader().upload("winter_fashion.jpg", ObjectUtils.asMap(
      "detection", "iqa"));

    |csharp
    var uploadParams = new ImageUploadParams() 
    {
      File = new FileDescription(@"winter_fashion.jpg"),
      Detection = "iqa"
    };
    var uploadResult = cloudinary.Upload(uploadParams); 

    |go
    resp, err := cld.Upload.Upload(ctx, "winter_fashion.jpg", uploader.UploadParams{
        Detection: "iqa"})

    |android
    MediaManager.get().upload("winter_fashion.jpg")
      .option("detection", "iqa").dispatch();

    |swift
    let params = CLDUploadRequestParams().setDetection("iqa")
    var mySig = MyFunction(params)  // your own function that returns a signature generated on your backend
    params.setSignature(CLDSignature(signature: mySig.signature, timestamp: mySig.timestamp))
    let request = cloudinary.createUploader().signedUpload(
      url: "winter_fashion.jpg", params: params) 

    |cli
    cld uploader upload "winter_fashion.jpg" detection="iqa"

    |curl
    curl https://api.cloudinary.com/v1_1/demo/image/upload -X POST -F 'file=@/path/to/winter_fashion.jpg' -F 'detection=iqa' -F 'timestamp=173719931' -F 'api_key=436464676' -F 'signature=a781d61f86a6f818af'
    ```

    The response includes the `iqa-analysis` field:

    ```json
      "info": {
        "detection": {
          "object_detection": {
            "status": "complete",
            "data": {
              "iqa": {
                "model_name": "iqa",
                "model_version": 1,
                "schema_version": 1,
                "tags": {
                  "iqa-analysis": [
                    {
                      "attributes": {
                        "quality": "medium",
                        "score": 0.4521875
                      },
                      "categories": [],
                      "confidence": 1.0
                    }
                  ]
                }
              }
            }
          }
        }
      },
    ```
* [Watermark detection](cloudinary_ai_content_analysis_image_analysis#watermark_detection): Detects banners and watermarks in images.

    ```multi
    |ruby
    Cloudinary::Uploader.upload("roses-ban.jpg", 
      detection: "watermark-detection")

    |php_2
    $cloudinary->uploadApi()->upload("roses-ban.jpg", 
      ["detection" => "watermark-detection"]);

    |python
    cloudinary.uploader.upload("roses-ban.jpg",
      detection = "watermark-detection")

    |nodejs
    cloudinary.v2.uploader
    .upload("roses-ban.jpg", 
      { detection: "watermark-detection" })
    .then(result=>console.log(result)); 

    |java
    cloudinary.uploader().upload("roses-ban.jpg", ObjectUtils.asMap(
      "detection", "watermark-detection"));

    |csharp
    var uploadParams = new ImageUploadParams() 
    {
      File = new FileDescription(@"roses-ban.jpg"),
      Detection = "watermark-detection"
    };
    var uploadResult = cloudinary.Upload(uploadParams); 

    |go
    resp, err := cld.Upload.Upload(ctx, "roses-ban.jpg", uploader.UploadParams{
        Detection: "watermark-detection"})

    |android
    MediaManager.get().upload("roses-ban.jpg")
      .option("detection", "watermark-detection").dispatch();

    |swift
    let params = CLDUploadRequestParams().setDetection("watermark-detection")
    var mySig = MyFunction(params)  // your own function that returns a signature generated on your backend
    params.setSignature(CLDSignature(signature: mySig.signature, timestamp: mySig.timestamp))
    let request = cloudinary.createUploader().signedUpload(
      url: "roses-ban.jpg", params: params) 

    |cli
    cld uploader upload "roses-ban.jpg" detection="watermark-detection"

    |curl
    curl https://api.cloudinary.com/v1_1/demo/image/upload -X POST -F 'file=@/path/to/roses-ban.jpg' -F 'detection=watermark-detection' -F 'timestamp=173719931' -F 'api_key=436464676' -F 'signature=a781d61f86a6f818af'
    ```

    
    
    

    
    
    Banner detected
    

    
    
    Watermark detected
    

    
    
     

* [AI-based image captioning](cloudinary_ai_content_analysis_image_analysis#ai_based_image_captioning): Analyzes an image and suggests a caption to use appropriate to the image's contents.

    ```multi
    |ruby
    Cloudinary::Uploader.upload("kids_sport.jpg", 
      detection: "captioning")

    |php_2
    $cloudinary->uploadApi()->upload("kids_sport.jpg", 
      ["detection" => "captioning"]);

    |python
    cloudinary.uploader.upload("kids_sport.jpg",
      detection = "captioning")

    |nodejs
    cloudinary.v2.uploader
    .upload("kids_sport.jpg", 
      { detection: "captioning" })
    .then(result=>console.log(result)); 

    |java
    cloudinary.uploader().upload("kids_sport.jpg", ObjectUtils.asMap(
      "detection", "captioning"));

    |csharp
    var uploadParams = new ImageUploadParams() 
    {
      File = new FileDescription(@"kids_sport.jpg"),
      Detection = "captioning"
    };
    var uploadResult = cloudinary.Upload(uploadParams); 

    |go
    resp, err := cld.Upload.Upload(ctx, "kids_sport.jpg", uploader.UploadParams{
        Detection: "captioning"})

    |android
    MediaManager.get().upload("kids_sport.jpg")
      .option("detection", "captioning").dispatch();

    |swift
    let params = CLDUploadRequestParams().setDetection("captioning")
    var mySig = MyFunction(params)  // your own function that returns a signature generated on your backend
    params.setSignature(CLDSignature(signature: mySig.signature, timestamp: mySig.timestamp))
    let request = cloudinary.createUploader().signedUpload(
      url: "kids_sport.jpg", params: params) 

    |cli
    cld uploader upload "kids_sport.jpg" detection="captioning"

    |curl
    curl https://api.cloudinary.com/v1_1/demo/image/upload -X POST -F 'file=@/path/to/kids_sport.jpg' -F 'detection=captioning' -F 'timestamp=173719931' -F 'api_key=436464676' -F 'signature=a781d61f86a6f818af'
    ```

  ![A group of young children playing soccer on a soccer field with a goal post in the foreground and a goal post in the background](https://res.cloudinary.com/demo/image/upload/cap_sport.jpg "with_url:false, with_code:false, thumb: c_scale,w_300, caption: A group of young children playing soccer on a soccer field with a goal post in the foreground and a goal post in the background")

> **TIP**: This page describes how to use the Cloudinary AI Content Analysis add-on programmatically, but that you can also use the add-on for DAM use cases in Assets. For more information, see [Cloudinary AI Content Analysis][linkAssets] in the Assets user guide.#### Getting started

Before you can use the Cloudinary AI Content Analysis add-on:

* You must have a Cloudinary account. If you don't already have one, you can [sign up](https://cloudinary.com/users/register_free) for a free account. 

* Register for the add-on: make sure you're logged in to your account and then go to the [Add-ons](https://console.cloudinary.com/app/settings/addons) page. For more information about add-on registrations, see [Registering for add-ons](cloudinary_add_ons#registering_for_add_ons).

* Keep in mind that many of the examples on this page use our SDKs. For SDK installation and configuration details, see the relevant [SDK](cloudinary_sdks) guide.
  
* If you're new to Cloudinary, you may want to take a look at the [Developer Kickstart](dev_kickstart) for a hands-on, step-by-step introduction to a variety of features.

> **TIP**: You can also request analysis using the [Analyze API](analyze_api_guide) (Beta) which also accepts external assets to analyze.

## Supported content-aware detection models

The Cloudinary AI Content Analysis add-on supports a number of built-in content-aware detection models, each supporting a specific set of categories and objects. You can specify which version of each model to invoke for each use of the add-on.  

Cloudinary currently supports the following models:

Model | Description
--|--
coco | The [Common Objects in Context](https://cocodataset.org/) model contains just 80 common objects. 
cld-fashion | Cloudinary's fashion model is specifically dedicated to items of clothing. Used with automatic image tagging, the response includes attributes of the clothing identified, for example whether the garment contains pockets, its material and the fastenings used.
lvis | The [Large Vocabulary Instance Segmentation](https://www.lvisdataset.org/) model contains thousands of general objects. 
unidet | The [UniDet](https://github.com/xingyizhou/UniDet) model is a unified model, combining a number of object models, including [Objects365](https://www.objects365.org/overview.html), which focuses on diverse objects in the wild.
human-anatomy | Cloudinary's human anatomy model identifies parts of the human body in an image. It works best when the majority of a human body is detected in the image.
cld-text | Cloudinary's text model tells you if your image includes text, and where it's located. Used with automatic image tagging, you can then search for images that contain blocks of text. Used with object-aware cropping, you can choose to keep only the text part, or specify a crop that avoids the text.
shop-classifier | Cloudinary's shop classifier model detects if the image is a product image taken in a studio, or if it's a natural image.
image-type | Cloudinary's image type model detects generic properties about a photographic image, for example, photographic style, setting and time of the photo.
captioning | Cloudinary's captioning model is used to describe the contents of an image. See [AI-based image captioning](cloudinary_ai_content_analysis_image_analysis#ai_based_image_captioning).
watermark-detection | Cloudinary's watermark detection model identifies if the image contains different types of watermark.  See [Watermark detection](cloudinary_ai_content_analysis_image_analysis#watermark_detection).
iqa | The Image Quality Analysis (IQA) model can predict the quality of a given image on a scale from 0 to 1 and provides a general quality estimation, categorized as 'low', 'medium', or 'high'. See [Image quality analysis](cloudinary_ai_content_analysis_image_analysis#image_quality_analysis).

### Model capabilities

This table shows the capabilities of each supported version of each model:

* **Default version** is the version of the model that is invoked if left unspecified.
* **Version** indicates support for a particular version of the model - different versions have different accuracies.
* **Default confidence** shows the confidence level used when [auto_tagging](cloudinary_ai_content_analysis_automatic_tagging#adding_tags_to_images) is set to `default`.
* **Tag** indicates support for returning tags. This is a required capability for [automatic image tagging](cloudinary_ai_content_analysis_automatic_tagging).
* **Confidence** indicates support for returning confidence levels.
* **Bounding Box** indicates support for returning bounding boxes. This is a required capability for [object-aware cropping](cloudinary_ai_content_analysis_object_aware_cropping).
* **Attributes** indicates support for returning attributes for each tag in a (key,value) list.

> **NOTES**:
>
> * If you are using our [Asia Pacific data center](admin_api#alternative_data_centers_and_endpoints_premium_feature), currently you can use only the COCO and Open Images models.

> * If you have difficulty accessing any of the models, please [contact support](https://support.cloudinary.com/hc/en-us/requests/new).

### Supported objects and categories

Start typing the name of an object or category to see if it's supported by one of the built-in models.

* For [object-aware cropping](cloudinary_ai_content_analysis_object_aware_cropping):
  * The **Full URL Syntax** column shows the syntax to use to detect a specific object or category in a particular version of a model (e.g. `coco_v2_tie`). You can also omit the version (e.g. `coco_tie`), or both the model and version (e.g. `tie`).

* For [automatic image tagging](cloudinary_ai_content_analysis_automatic_tagging): 
  * You can specify the model and version (e.g. `coco_v2`), or only the model (e.g. `coco`).

### Private models

If you have your own content-aware detection models that you would like to use, these can be integrated as private models that work only on your product environment. This service is provided for customers on [Enterprise](https://cloudinary.com/pricing) plans through [Professional Services](https://cloudinary.com/pricing/customer-success#professional-services). [Contact our Enterprise support and sales team](https://cloudinary.com/contact?plan=enterprise) or your CSM to find out more. 

## Object detection demo

This demo lets you choose one of the content-aware detection models, and shows up to twenty objects that are detected by that model in an image of your choice. 

> **TIP**: To see a full list of all the detected objects and other information returned by the model, expand the JSON that appears under the image after upload.

[Automatic image tagging](cloudinary_ai_content_analysis_automatic_tagging) is requested on upload, and the response provides the necessary information to overlay bounding boxes around the detected objects, together with the confidence level.



1   
Select a model:

  lvis
  coco
  unidet
  cld-fashion
  cld-text
  human-anatomy

2   
  or  

3   
See the detected objects:

Click the image to open it full size in a new tab.

<pre class="jsonpre" id="objectinformation">

> **Learn more**:
>
> * [Read this blog](https://cloudinary.com/blog/unboxing_images_to_discover_their_content) to discover all the Cloudinary features in this demo.

> **READING**:
>
> * [Object-aware cropping](cloudinary_ai_content_analysis_object_aware_cropping)

> * [Automatic image tagging](cloudinary_ai_content_analysis_automatic_tagging)

> * [Image analysis](cloudinary_ai_content_analysis_image_analysis)

.select-wrapper {
    position: relative;
    width: 200px;
    margin-bottom: 20px;
}
.custom-select {
    position: relative;
    width: 100%;
}
.select-selected {
    background-color: var(--dropdown-menu-bg-color);
    padding: 10px 35px 10px 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}
.select-selected::after {
    content: '\25BC';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
}
.select-items {
    position: absolute;
    background-color: var(--dropdown-menu-bg-color);
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}
.select-item {
    padding: 10px;
    cursor: pointer;
}
.select-item:hover {
    background-color: var(--dropdown-background-active-color);
}
.language-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
}
select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 10px 35px 10px 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: var(--dropdown-menu-bg-color);
    cursor: pointer;
}
.select-wrapper::after {
    content: '\25BC';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
}

/*
.custom-select {
    position: relative;
    width: 200px;
}
.select-selected {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
}
.select-selected:after {
    content: "\25BC";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}
.select-items {
    position: absolute;
    background-color: #fff;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
}
.select-hide {
    display: none;
}
.select-items div {
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.select-items div:hover {
    background-color: #f1f1f1;
}
.language-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}
*/

.select-css-pocs {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #3448c5;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; /* useful when width is set to anything other than 100% */
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
		for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference

	*/

	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%233448c5%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');

	background-repeat: no-repeat, repeat;

	/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
	background-position: right .7em top 50%, 0 0;
	/* icon size, then gradient */
	background-size: .65em auto, 100%;
}

/* CSS for demos */

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #FF5050;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; /* useful when width is set to anything other than 100% */
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
		for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference

	*/

	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FF5050%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');

	background-repeat: no-repeat, repeat;

	/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
	background-position: right .7em top 50%, 0 0;
	/* icon size, then gradient */
	background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
	display: none;
}
/* Hover style */
.select-css:hover {
	border-color: #888;
}
/* Focus style */
.select-css:focus {
	border-color: #FF5050;
	/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
	box-shadow: 0 0 1px 3px rgba(255, 80, 80, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #FF5050; 
	outline: none;
}

/* Set options to normal weight */
.select-css option {
	font-weight:normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
	background-position: left .7em top 50%, 0 0;
	padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
	color: graytext;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

.select-css:disabled:hover, .select-css[aria-disabled=true] {
	border-color: #aaa;

}

table{
    table-layout: fixed;
}

.time_warn{
  color: #FF0000;
  font-size:12px;
}

.instructions{
font-family: Tahoma;
text-align: center;
padding-left: 10%;
padding-right: 10%;
  color: #0c163b;
}

.instructions-large{
  font-family: Tahoma;
  text-align: center;
  font-size:20px;
  padding-left: 10%;
  padding-right: 10%;
  color: #0c163b;
  }

.selectcontainer {
   color: #FF5050;
   font-weight: bold;
   font-size:90%;
}

.selectcontainer-padleft {
  color: #FF5050;
  font-weight: bold;
  font-size:90%;
  padding-left: 15%;
}

.size_value{
  color: #FF5050;
  font-weight: bold;
}

.thumb-img {
  border: solid 6px #aaa;
  border-radius: 6px;
  opacity: 0.5;
}

.thumb-img:hover {
  border: solid 6px #FF8383;
  border-radius: 6px;
  cursor: pointer;
  opacity: 1;
}

.thumb-img.active {
  border: solid 6px #FF5050;
  border-radius: 6px;
  opacity: 1;
}

.art-img, .photo-img  {
  border: solid 6px #aaa;
  border-radius: 6px;
  opacity: 0.5;
}

.art-img:hover,  .photo-img:hover{
  border: solid 6px #f5956c;
  border-radius: 6px;
  cursor: pointer;
  opacity: 1;
}

.art-img.active, .photo-img.active {
  border: solid 6px #FF5050;
  border-radius: 6px;
  opacity: 1;
}

.select_label{
   color: #3448C5;
   font-weight: bold;
}

.select_label1{
  color: #0c163b;
  font-weight: bold;
  font-size: 12px;
}

.select_label2{
  color: #0c163b;
  font-weight: normal;
}

.env_select_label{
   color: #3448C5;
   font-weight: bold;
   padding-left: 15%;
}

.sliders{
  display: inline;
}

.slider_value{
   color: #FF5050;
   font-weight: bold;
}

.slider_label{
   color: #3448C5;
   font-weight: bold;
  padding-left: 15%;
}

.step_number {
        background:  black;
        color:  white;
        width: 24px;
        height: 24px;
        display: inline-block;
        text-align: center;
        line-height: 24px;
        border-radius: 100px;
}

.slidecontainer {
  width: 85%; /* Width of the outside container */
  text-align: center;
float: right;
padding-right: 15%;
}

/* The slider itself */

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;  
  background: #3448C5;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #FF5050;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #FF5050;
  cursor: pointer;
}

.cloudinary-button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #FF5050;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.cloudinary-button:hover {
  background-color: #ff0303;
  cursor: pointer;
}

.cloudinary-button:active {
  background-color: #ff0303;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.fix {
 display: block;
}

.loader {
  position: static;
  margin: auto;
  border: 16px solid #5A616A; 
  border-top: 16px solid #3448C5; 
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
} 

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.current-img {
	padding:8px 16px;
}

.demo-btn {
	border: 0px;
	background-color:#FF5050;
	border-radius:30px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:14px;
	font-weight:600;;
	padding:10px 16px;
	text-decoration:none;
	
}
.demo-btn:hover {
	background-color:#ff0303;
}

a.demo-btn:link, a.demo-btn:visited, a.demo-btn:hover, a.demo-btn:active {
	color: #ffffff;
	text-decoration:none;
}

.demo-btn:active {
	position:relative;
	top:1px;
}

span.mystep {
  background: #FF5050;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em;
}

.coordinates {
  text-align: center;
  color: #0c163b;
}

.tr_all {
  display:inline-block;
  vertical-align:top;
  margin-left: 3em;
  margin-bottom: 1em;
  text-align: left;
}

.tl_all {
  display:inline-block;
  vertical-align:top;
  margin-right: 3em;
  margin-bottom: 1em;
  text-align: right;
}

.br_all {
  display:inline-block;
  vertical-align:top;
  margin-left: 3em;
  margin-bottom: 1em;
  text-align: left;
}

.bl_all {
  display:inline-block;
  vertical-align:top;
  margin-right: 3em;
  margin-bottom: 1em;
  text-align: right;
}

.options {
  font-size: 18px;
  font-weight: bold;
  color: #0c163b;
}

.coordinate-value {
  color: #FF5050;
  font-weight: bold; 
  text-align: right;  
}

/* Accessible Media Demo Styles */

/* Dark theme support for audio description demo */
[data-theme="dark"] .audio-description-demo {
  border-color: var(--dark-border) !important;
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

[data-theme="dark"] .audio-description-demo h4 {
  color: var(--dark-border) !important;
}

/* Video player demo styles */
#wordHighlight {
  height: 400px;
  padding-top: unset;
}
#wordHighlight > div.vjs-poster > picture > img {
  object-fit: contain;
}

#wordHighlight > div.vjs-poster > picture {
  background: var(--main-content-color);
}
#wordHighlight.video-js {
  background-color: var(--main-content-color);
}

/* Dark theme support for colorblind demo */
[data-theme="dark"] .colorblind-demo {
  background-color: #2d3748 !important;
  border-color: #4a5568 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .colorblind-demo label {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .colorblind-demo select {
  background-color: #4a5568 !important;
  color: #e2e8f0 !important;
  border: 1px solid #718096 !important;
}

[data-theme="dark"] .url-display {
  background-color: #2c5282 !important;
  border: 1px solid #3182ce !important;
}

[data-theme="dark"] .url-display h4 {
  color: #63b3ed !important;
}

[data-theme="dark"] .url-display code {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .tips-section {
  background-color: #744210 !important;
  border: 1px solid #975a16 !important;
}

[data-theme="dark"] .tips-section h4 {
  color: #fbb041 !important;
}

[data-theme="dark"] .tips-section,
[data-theme="dark"] .tips-section ul,
[data-theme="dark"] .tips-section li {
  color: #faf089 !important;
}

/* Dark theme support for text overlay demo */
[data-theme="dark"] .text-overlay-demo label,
[data-theme="dark"] .text-overlay-demo input,
[data-theme="dark"] .text-overlay-demo select {
  --text-color: #e2e8f0;
  --input-bg: #2d3748;
}

/* Dark theme support for OCR text content */
[data-theme="dark"] .ocr-text-content {
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

/* Dark theme support for audio mixing demo */
[data-theme="dark"] .db-status-container {
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

/* Dark theme support for motion demo */
[data-theme="dark"] .motion-demo-container {
  border-color: var(--dark-border) !important;
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

/* Dark theme support for gallery demo container */
[data-theme="dark"] #accessible-gallery-demo {
  background: #2d3748 !important;
  border-color: #4a90e2 !important;
}

[data-theme="dark"] #accessible-gallery-demo h4 {
  color: #4a90e2 !important;
}

[data-theme="dark"] #accessible-gallery-demo p {
  color: #e2e8f0 !important;
}

/* Dark theme support for keyboard controls */
[data-theme="dark"] .keyboard-controls-container {
  border-color: var(--dark-border) !important;
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

[data-theme="dark"] .keyboard-controls-container h4 {
  color: var(--dark-border) !important;
}

[data-theme="dark"] .keyboard-key {
  background: var(--dark-kbd-bg) !important;
  color: var(--dark-kbd-text) !important;
  border-color: #718096 !important;
}

/* Dark theme support for video player demo */
[data-theme="dark"] .video-player-demo {
  border-color: var(--dark-border) !important;
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

[data-theme="dark"] .video-player-demo h4 {
  color: var(--dark-border) !important;
}

[data-theme="dark"] .video-demo-features {
  color: var(--dark-subtext) !important;
}

/* Dark theme support for upload widget demo */
[data-theme="dark"] .upload-widget-demo {
  border-color: var(--dark-border) !important;
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

[data-theme="dark"] .upload-widget-demo h4 {
  color: var(--dark-border) !important;
}

[data-theme="dark"] .upload-widget-demo > div:last-child {
  color: var(--dark-subtext) !important;
}

/* Text Layer Demo Styles */
.text-layer-demo-container {
  --light-border: #0066cc;
  --light-bg: #f8f9fa;
  --light-text: #333;
  --light-input-bg: #fff;
  --light-url-bg: #f8fafc;
  --light-url-border: #e2e8f0;
  --dark-border: #4a90e2;
  --dark-bg: #2d3748;
  --dark-text: #e2e8f0;
  --dark-input-bg: #1a202c;
  --dark-url-bg: #1e293b;
  --dark-url-border: #334155;
  
  border: 2px solid var(--light-border);
  border-radius: 8px;
  padding: 20px;
  background: var(--light-bg);
  color: var(--light-text);
}

.text-layer-demo-container h4 {
  margin-top: 0;
  color: var(--light-border);
}

.text-layer-demo-container .demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 20px;
}

.text-layer-demo-container .controls-section {
  text-align: left;
}

.text-layer-demo-container .control-group {
  margin-bottom: 15px;
}

.text-layer-demo-container .control-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.text-layer-demo-container .checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: normal;
}

.text-layer-demo-container .demo-checkbox {
  margin-right: 8px;
  cursor: pointer;
  width: 18px;
  height: 18px;
}

.text-layer-demo-container .checkbox-label code {
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}

.text-layer-demo-container .control-hint {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
  font-style: italic;
}

.text-layer-demo-container .text-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: var(--light-input-bg);
  color: var(--light-text);
  box-sizing: border-box;
}

.text-layer-demo-container .demo-select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: var(--light-input-bg);
  color: var(--light-text);
}

.text-layer-demo-container .text-input:focus,
.text-layer-demo-container .demo-select:focus {
  outline: 2px solid #3448c5;
  outline-offset: 2px;
}

.text-layer-demo-container .preview-section {
  text-align: center;
}

.text-layer-demo-container .preview-label {
  margin-bottom: 10px;
  font-weight: bold;
}

.text-layer-demo-container .preview-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 2px solid #ccc;
}

.text-layer-demo-container .preview-video {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 2px solid #ccc;
}

.text-layer-demo-container .transformation-url-box {
  margin-top: 20px;
  padding: 15px;
  border: 2px solid var(--light-border);
  border-radius: 5px;
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
  text-align: left;
  background: var(--light-url-bg);
}

.text-layer-demo-container .transformation-url-box strong {
  display: block;
  margin-bottom: 8px;
  font-family: sans-serif;
  color: var(--light-text);
}

.text-layer-demo-container #transformation-url-link {
  color: var(--light-border);
  text-decoration: none;
  display: block;
  transition: opacity 0.2s ease;
}

.text-layer-demo-container #transformation-url-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.text-layer-demo-container #transformation-url-display {
  color: inherit;
}

/* Dark theme support for text layer demo */
[data-theme="dark"] .text-layer-demo-container {
  border-color: var(--dark-border) !important;
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

[data-theme="dark"] .text-layer-demo-container h4 {
  color: var(--dark-border) !important;
}

[data-theme="dark"] .text-layer-demo-container .text-input,
[data-theme="dark"] .text-layer-demo-container .demo-select {
  background: var(--dark-input-bg) !important;
  color: var(--dark-text) !important;
  border-color: #4a5568 !important;
}

[data-theme="dark"] .text-layer-demo-container .transformation-url-box {
  background: var(--dark-url-bg) !important;
  border-color: var(--dark-border) !important;
}

[data-theme="dark"] .text-layer-demo-container .transformation-url-box strong {
  color: var(--dark-text) !important;
}

[data-theme="dark"] .text-layer-demo-container #transformation-url-link {
  color: var(--dark-border) !important;
}

[data-theme="dark"] .text-layer-demo-container .preview-image {
  border-color: #4a5568 !important;
}

[data-theme="dark"] .text-layer-demo-container .preview-video {
  border-color: #4a5568 !important;
}

[data-theme="dark"] .text-layer-demo-container .checkbox-label code {
  background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .text-layer-demo-container .control-hint {
  color: #a0aec0 !important;
}

/* X-Cld-Error Inspector Tool Styles */
.x-cld-error-inspector {
  max-width: 800px;
  margin: 20px 0;
  padding: 20px;
  border: 1px solid var(--inspector-border, #ddd);
  border-radius: 8px;
  background-color: var(--inspector-bg, #f9f9f9);
  color: var(--inspector-text, #333);
}

.x-cld-error-inspector .input-wrapper {
  margin-bottom: 15px;
}

.x-cld-error-inspector label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: var(--inspector-text, #333);
}

.x-cld-error-inspector input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--inspector-input-border, #ccc);
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
  background-color: var(--inspector-input-bg, #fff);
  color: var(--inspector-text, #333);
  box-sizing: border-box;
}

.x-cld-error-inspector button.x-cld-inspect-btn {
  padding: 10px 25px;
  line-height: 1.4;
  background-color: var(--button-background-color);
  font-family: "Inter", Helvetica, Arial, sans-serif;
  color: var(--sign-up-button-color);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.x-cld-error-inspector button.x-cld-inspect-btn:hover:not(:disabled) {
  filter: brightness(85%);
}

.x-cld-error-inspector button.x-cld-inspect-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.x-cld-error-inspector #result-container {
  margin-top: 20px;
}

.x-cld-error-inspector #loading {
  color: var(--inspector-loading, #666);
}

.x-cld-error-inspector .result-success {
  padding: 15px;
  background-color: var(--result-warning-bg, #fff3cd);
  border: 1px solid var(--result-warning-border, #ffc107);
  border-radius: 4px;
  margin-top: 10px;
  color: var(--inspector-text, #333);
}

.x-cld-error-inspector .result-error {
  padding: 15px;
  background-color: var(--result-error-bg, #f8d7da);
  border: 1px solid var(--result-error-border, #dc3545);
  border-radius: 4px;
  margin-top: 10px;
  color: var(--inspector-text, #333);
}

.x-cld-error-inspector .result-ok {
  padding: 15px;
  background-color: var(--result-success-bg, #d4edda);
  border: 1px solid var(--result-success-border, #28a745);
  border-radius: 4px;
  margin-top: 10px;
  color: var(--inspector-text, #333);
}

.x-cld-error-inspector .header-info {
  margin-top: 10px;
  padding: 10px;
  background-color: var(--header-info-bg, #e9ecef);
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  color: var(--inspector-text, #333);
}

.x-cld-error-inspector .header-label {
  font-weight: bold;
  color: var(--inspector-label, #495057);
}

/* Support for explicit dark theme class */
[data-theme="dark"] .x-cld-error-inspector {
  --inspector-border: #4a5568;
  --inspector-bg: #2d3748;
  --inspector-text: #e2e8f0;
  --inspector-input-border: #4a5568;
  --inspector-input-bg: #1a202c;
  --inspector-loading: #a0aec0;
  --inspector-label: #cbd5e0;
  --header-info-bg: #1a202c;
  --result-warning-bg: #744210;
  --result-warning-border: #d69e2e;
  --result-error-bg: #742a2a;
  --result-error-border: #fc8181;
  --result-success-bg: #22543d;
  --result-success-border: #48bb78;
}

/* Image Enhancement Demo Styles */

#image-enhancement-demo {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid var(--inspector-border, #ddd);
  border-radius: 8px;
  background-color: var(--inspector-bg, #f9f9f9);
}

#image-enhancement-demo h4 {
  color: var(--inspector-text, #333);
  margin-top: 0;
}

#image-thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 30px;
  gap: 10px;
}

.thumb-container {
  text-align: center;
  margin: 10px;
}

.thumb-img {
  cursor: pointer;
  max-width: 150px;
  height: 100px;
  object-fit: cover;
}

.thumb-label {
  font-size: 12px;
  margin-top: 5px;
  color: var(--inspector-text, #333);
}

.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.image-section {
  margin-bottom: 20px;
}

.image-label-wrapper {
  margin-bottom: 10px;
}

.comparison-label {
  color: var(--inspector-text, #333);
}

.comparison-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  cursor: pointer;
}

.comparison-image.original {
  border: 2px solid var(--inspector-border, #ddd);
}

.comparison-image.enhanced {
  border: 2px solid #3448c5;
}

.enhancement-option-wrapper {
  margin-bottom: 15px;
}

.enhancement-option-label {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  padding: 12px;
  border-radius: 6px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  background: var(--inspector-input-bg, #fff);
  color: var(--inspector-text, #333);
}

.enhancement-option-label:hover {
  background: var(--dropdown-background-active-color, #f0f0f0);
}

.enhancement-option-label.selected {
  background: var(--inspector-input-bg, #fff);
  border-color: #3448c5;
}

.enhancement-option-label input[type="radio"] {
  margin-right: 10px;
  margin-top: 4px;
}

.enhancement-option-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.enhancement-option-description {
  font-size: 13px;
  opacity: 0.8;
}

#transformation-url {
  margin-top: 20px;
  padding: 20px;
  background-color: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.url-link {
  text-decoration: none;
}

.url-code {
  background: #f1f5f9;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  color: #0f172a;
  word-break: break-all;
  cursor: pointer;
  display: block;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.url-code:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

#transformation-url > div {
  margin-bottom: 12px;
}

#transformation-url > div:last-child {
  margin-bottom: 0;
}

#transformation-url strong {
  color: #64748b;
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.thumb-label {
  color: var(--inspector-text, #333);
}

.comparison-label {
  color: var(--inspector-text, #333);
}

/* Dark theme support for Image Enhancement Demo */
[data-theme="dark"] #image-enhancement-demo {
  background-color: #2d3748 !important;
  border-color: #4a5568 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] #image-enhancement-demo h4 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .comparison-image.original {
  border-color: #4a5568;
}

[data-theme="dark"] #transformation-url {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] #transformation-url strong {
  color: #94a3b8 !important;
}

[data-theme="dark"] .url-code {
  background: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}

[data-theme="dark"] .url-code:hover {
  background: #334155;
  border-color: #475569;
}

[data-theme="dark"] .enhancement-option-label {
  background: #1a202c;
  color: #e2e8f0;
}

[data-theme="dark"] .enhancement-option-label:hover {
  background: #2d3748;
}

[data-theme="dark"] .enhancement-option-label.selected {
  background: #2d3748;
  border-color: #4a90e2 !important;
}

[data-theme="dark"] .thumb-label {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .comparison-label {
  color: #e2e8f0 !important;
}